diff --git a/app/src/docs/_examples/dataSources/DataSourcePropsPatch.example.tsx b/app/src/docs/_examples/dataSources/DataSourcePropsPatch.example.tsx new file mode 100644 index 0000000000..e55fea2b69 --- /dev/null +++ b/app/src/docs/_examples/dataSources/DataSourcePropsPatch.example.tsx @@ -0,0 +1,66 @@ +import React, { useMemo, useState } from 'react'; +import { DataSourceViewer } from '@epam/uui-docs'; +import { DataSourceState, ItemsMap, ItemsMapParams, useArrayDataSource } from '@epam/uui-core'; + +interface Item { + id: string; + name: string; + parentId?: string; +} + +const items: Item[] = [ + { id: '1', name: 'Parent 1' }, + { id: '1.1', name: 'Child 1.1', parentId: '1' }, + { id: '1.2', name: 'Child 1.2', parentId: '1' }, + + { id: '2', name: 'Parent 2' }, + { id: '2.1', name: 'Child 2.1', parentId: '2' }, + { id: '2.2', name: 'Child 2.2', parentId: '2' }, + + { id: '3', name: 'Parent 3' }, + { id: '3.2', name: 'Child 3.2', parentId: '3' }, + { id: '3.1', name: 'Child 3.1', parentId: '3' }, +]; + +const params: ItemsMapParams = { getId: (item) => item.id }; + +export default function DataSourcePropsPatchExample() { + const patch1 = useMemo(() => ItemsMap.fromObject( + { 4: { id: '4', name: 'Parent 4' } }, + params, + ), []); + + const patch2 = useMemo(() => ItemsMap.fromObject( + { 1: { id: '1', name: 'Parent 1 with new name' } }, + params, + ), []); + + const [value1, onValueChange1] = useState({}); + const dataSource1 = useArrayDataSource({ + items, + patch: patch1, + }, []); + + const [value2, onValueChange2] = useState({}); + const dataSource2 = useArrayDataSource({ + items, + patch: patch2, + }, []); + + return ( + <> + + + + ); +} diff --git a/app/src/docs/_examples/dataSources/DataSourcePropsPatchFixItemBetweenSortings.example.tsx b/app/src/docs/_examples/dataSources/DataSourcePropsPatchFixItemBetweenSortings.example.tsx new file mode 100644 index 0000000000..3efa997d2f --- /dev/null +++ b/app/src/docs/_examples/dataSources/DataSourcePropsPatchFixItemBetweenSortings.example.tsx @@ -0,0 +1,103 @@ +import React, { useState } from 'react'; +import { DataSourceState, IImmutableMap, ItemsMap, SortingOption, useArrayDataSource, useForm } from '@epam/uui-core'; +import { DataSourceTableViewer, sortableDataSourceColumns } from '@epam/uui-docs'; + +interface Item { + id: string; + name: string; + parentId?: string; +} + +interface FormState { + items: IImmutableMap; +} + +const items: Record = { + 1: { id: '1', name: 'Parent 1' }, + 1.1: { id: '1.1', name: 'Child 1.1', parentId: '1' }, + 1.2: { id: '1.2', name: 'Child 1.2', parentId: '1' }, + + 2: { id: '2', name: 'Parent 2' }, + 2.1: { id: '2.1', name: 'Child 2.1', parentId: '2' }, + 2.2: { id: '2.2', name: 'Child 2.2', parentId: '2' }, + + 3: { id: '3', name: 'Parent 3' }, + 3.2: { id: '3.2', name: 'Child 3.2', parentId: '3' }, + 3.1: { id: '3.1', name: 'Child 3.1', parentId: '3' }, +}; + +const itemsMap = ItemsMap.fromObject(items, { getId: ({ id }) => id }); + +const defaultSorting: SortingOption[] = [{ field: 'name', direction: 'asc' }]; + +export default function DataSourcePropsPatchFixItemBetweenSortingsExample() { + const { lens: lens1, value: formValue1 } = useForm({ + value: { items: itemsMap }, + onSave: () => Promise.resolve(), + }); + + const { lens: lens2, value: formValue2 } = useForm({ + value: { items: itemsMap }, + onSave: () => Promise.resolve(), + }); + + const { lens: lens3, value: formValue3 } = useForm({ + value: { items: itemsMap }, + onSave: () => Promise.resolve(), + }); + + const [value1, onValueChange1] = useState>({ sorting: defaultSorting }); + const dataSource1 = useArrayDataSource({ + items: Object.values(items), + patch: formValue1.items, + getRowOptions: (item) => ({ + ...lens1.prop('items').key(item.id).toProps(), + }), + }, []); + + const [value2, onValueChange2] = useState>({ sorting: defaultSorting }); + const dataSource2 = useArrayDataSource({ + items: Object.values(items), + patch: formValue2.items, + getRowOptions: (item) => ({ + ...lens2.prop('items').key(item.id).toProps(), + }), + fixItemBetweenSortings: true, + }, []); + + const [value3, onValueChange3] = useState>({ sorting: defaultSorting }); + const dataSource3 = useArrayDataSource({ + items: Object.values(items), + patch: formValue3.items, + getRowOptions: (item) => ({ + ...lens3.prop('items').key(item.id).toProps(), + }), + fixItemBetweenSortings: false, + }, []); + + return ( + <> + + + + + ); +} diff --git a/app/src/docs/_examples/dataSources/DataSourcePropsPatchGetNewItemPosition.example.tsx b/app/src/docs/_examples/dataSources/DataSourcePropsPatchGetNewItemPosition.example.tsx new file mode 100644 index 0000000000..52d8eae7bf --- /dev/null +++ b/app/src/docs/_examples/dataSources/DataSourcePropsPatchGetNewItemPosition.example.tsx @@ -0,0 +1,78 @@ +import React, { useMemo, useState } from 'react'; +import { DataSourceViewer } from '@epam/uui-docs'; +import { DataSourceState, ItemsMap, ItemsMapParams, PatchOrdering, useArrayDataSource } from '@epam/uui-core'; + +interface Item { + id: string; + name: string; + parentId?: string; +} + +const items: Item[] = [ + { id: '1', name: 'Parent 1' }, + { id: '1.1', name: 'Child 1.1', parentId: '1' }, + { id: '1.2', name: 'Child 1.2', parentId: '1' }, + + { id: '2', name: 'Parent 2' }, + { id: '2.1', name: 'Child 2.1', parentId: '2' }, + { id: '2.2', name: 'Child 2.2', parentId: '2' }, + + { id: '3', name: 'Parent 3' }, + { id: '3.2', name: 'Child 3.2', parentId: '3' }, + { id: '3.1', name: 'Child 3.1', parentId: '3' }, +]; + +const params: ItemsMapParams = { getId: (item) => item.id }; + +export default function DataSourcePropsPatchGetNewItemPositionExample() { + const patch = useMemo(() => ItemsMap.fromObject( + { + 1: { id: '1', name: 'Parent 1 with new name' }, + 4: { id: '4', name: 'Parent 4' }, + }, + params, + ), []); + + const [value1, onValueChange1] = useState({}); + const dataSource1 = useArrayDataSource({ + items, + patch, + }, []); + + const [value2, onValueChange2] = useState({}); + const dataSource2 = useArrayDataSource({ + items, + patch, + getNewItemPosition: () => PatchOrdering.TOP, + }, []); + + const [value3, onValueChange3] = useState({}); + const dataSource3 = useArrayDataSource({ + items, + patch, + getNewItemPosition: () => PatchOrdering.BOTTOM, + }, []); + + return ( + <> + + + + + ); +} diff --git a/app/src/docs/_examples/dataSources/DataSourcePropsPatchIsDeleted.example.tsx b/app/src/docs/_examples/dataSources/DataSourcePropsPatchIsDeleted.example.tsx new file mode 100644 index 0000000000..d7687f1cc5 --- /dev/null +++ b/app/src/docs/_examples/dataSources/DataSourcePropsPatchIsDeleted.example.tsx @@ -0,0 +1,49 @@ +import React, { useMemo, useState } from 'react'; +import { DataSourceViewer } from '@epam/uui-docs'; +import { DataSourceState, ItemsMap, ItemsMapParams, useArrayDataSource } from '@epam/uui-core'; + +interface Item { + id: string; + name: string; + parentId?: string; + isDeleted?: boolean; +} + +const items: Item[] = [ + { id: '1', name: 'Parent 1' }, + { id: '1.1', name: 'Child 1.1', parentId: '1' }, + { id: '1.2', name: 'Child 1.2', parentId: '1' }, + + { id: '2', name: 'Parent 2' }, + { id: '2.1', name: 'Child 2.1', parentId: '2' }, + { id: '2.2', name: 'Child 2.2', parentId: '2' }, + + { id: '3', name: 'Parent 3' }, + { id: '3.2', name: 'Child 3.2', parentId: '3' }, + { id: '3.1', name: 'Child 3.1', parentId: '3' }, +]; + +const params: ItemsMapParams = { getId: (item) => item.id }; + +export default function DataSourcePropsPatchIsDeletedExample() { + const patch = useMemo(() => ItemsMap.fromObject( + { 1: { id: '1', name: 'Parent 1', isDeleted: true } }, + params, + ), []); + + const [value, onValueChange] = useState({}); + const dataSource = useArrayDataSource({ + items, + patch, + isDeleted: (item) => item.isDeleted ?? false, + }, []); + + return ( + + ); +} diff --git a/app/src/docs/_examples/dataSources/DataSourcePropsShowSelectedOnly.example.tsx b/app/src/docs/_examples/dataSources/DataSourcePropsShowSelectedOnly.example.tsx new file mode 100644 index 0000000000..fb6bce0775 --- /dev/null +++ b/app/src/docs/_examples/dataSources/DataSourcePropsShowSelectedOnly.example.tsx @@ -0,0 +1,39 @@ +import React, { useState } from 'react'; +import { DataSourceViewer } from '@epam/uui-docs'; +import { DataSourceState, useArrayDataSource } from '@epam/uui-core'; + +const items = [ + { id: '1', name: 'Parent 1' }, + { id: '1.1', name: 'Child 1.1', parentId: '1' }, + { id: '1.2', name: 'Child 1.2', parentId: '1' }, + + { id: '2', name: 'Parent 2' }, + { id: '2.1', name: 'Child 2.1', parentId: '2' }, + { id: '2.2', name: 'Child 2.2', parentId: '2' }, + + { id: '3', name: 'Parent 3' }, + { id: '3.2', name: 'Child 3.2', parentId: '3' }, + { id: '3.1', name: 'Child 3.1', parentId: '3' }, +]; + +export default function DataSourcePropsShowSelectedOnlyExample() { + const [showSelectedOnly, setShowSelectedOnly] = useState(false); + + const [value, onValueChange] = useState({ checked: ['1'] }); + const dataSource = useArrayDataSource({ + items, + rowOptions: { checkbox: { isVisible: true } }, + showSelectedOnly, + }, []); + + return ( + setShowSelectedOnly(!showSelectedOnly) } + /> + ); +} diff --git a/app/src/docs/dataSources/BaseDataSourceProps.doc.tsx b/app/src/docs/dataSources/BaseDataSourceProps.doc.tsx index 477031e2f1..6de3383052 100644 --- a/app/src/docs/dataSources/BaseDataSourceProps.doc.tsx +++ b/app/src/docs/dataSources/BaseDataSourceProps.doc.tsx @@ -10,12 +10,17 @@ export class DataSourcesBaseDataSourcePropsDoc extends BaseDocsBlock { - + + + + + + ); } diff --git a/public/docs/content/examples-dataSources-ArrayDataSourceSorting.json b/public/docs/content/examples-dataSources-ArrayDataSourceSorting.json index 4fdd4e7abf..b0b198724e 100644 --- a/public/docs/content/examples-dataSources-ArrayDataSourceSorting.json +++ b/public/docs/content/examples-dataSources-ArrayDataSourceSorting.json @@ -1,53 +1,25 @@ -{ - "object": "value", - "document": { - "object": "document", +[ + { "data": {}, - "nodes": [ + "type": "paragraph", + "children": [ { - "object": "block", - "type": "paragraph", - "data": {}, - "nodes": [ - { - "object": "text", - "text": "To enable a sorting functionality, it is enough to pass a ", - "marks": [] - }, - { - "object": "text", - "text": "sorting", - "marks": [ - { - "object": "mark", - "type": "uui-richTextEditor-code", - "data": {} - } - ] - }, - { - "object": "text", - "text": " object to the ", - "marks": [] - }, - { - "object": "text", - "text": "DataSource", - "marks": [ - { - "object": "mark", - "type": "uui-richTextEditor-code", - "data": {} - } - ] - }, - { - "object": "text", - "text": " state.", - "marks": [] - } - ] + "text": "To enable a sorting functionality, it is enough to pass a " + }, + { + "text": "sorting", + "uui-richTextEditor-code": true + }, + { + "text": " object to the " + }, + { + "text": "DataSource", + "uui-richTextEditor-code": true + }, + { + "text": " state." } ] } -} \ No newline at end of file +] \ No newline at end of file diff --git a/public/docs/content/examples-dataSources-DataSourcePropsPatch.json b/public/docs/content/examples-dataSources-DataSourcePropsPatch.json new file mode 100644 index 0000000000..3d1b07eb1d --- /dev/null +++ b/public/docs/content/examples-dataSources-DataSourcePropsPatch.json @@ -0,0 +1,111 @@ +[ + { + "type": "paragraph", + "children": [ + { + "text": "Contains a list of items, which overrides values of corresponding items in DataSource. Comparison is made by item's id (configured with " + }, + { + "text": "getId", + "uui-richTextEditor-code": true + }, + { + "text": " prop). If a patch contains an item with id=1, this item will override the existing item with the same id=1." + } + ] + }, + { + "type": "paragraph", + "children": [ + { + "text": "Patch prop, as well as complimentary settings, enables updating, adding, deleting, and moving items on the view, without modifying the original data. " + } + ] + }, + { + "type": "paragraph", + "children": [ + { + "text": "Patch prop, as well as complimentary props, enables to:" + } + ] + }, + { + "type": "unordered-list", + "children": [ + { + "type": "list-item", + "children": [ + { + "type": "list-item-child", + "children": [ + { + "text": "edit data, which is managed by LazyDataSource, can be huge, and can't be loaded completely" + } + ] + } + ] + }, + { + "type": "list-item", + "children": [ + { + "type": "list-item-child", + "children": [ + { + "text": "simplify a form initialization - the patch can start as an empty array, and the data to edit can be loaded and managed by Async or Lazy DataSource" + } + ] + } + ] + }, + { + "type": "list-item", + "children": [ + { + "type": "list-item-child", + "children": [ + { + "text": "simplify saving data to server - patch contains only changed data, so you can send a patch as is to server to save it" + } + ] + } + ] + }, + { + "type": "list-item", + "children": [ + { + "type": "list-item-child", + "children": [ + { + "text": "refresh data in DataSources, w/o loosing changes. E.g. you can change sorting in LazyDataSource, causing re-loading data, and the patch will be re-applied to the new data." + } + ] + } + ] + } + ] + }, + { + "type": "paragraph", + "children": [ + { + "text": "Examples of real-life usage can be seen " + }, + { + "type": "link", + "url": "/documents?id=editableTables&mode=doc&isSkin=null&category=tables&theme=loveship#editable_table", + "target": "_blank", + "children": [ + { + "text": "here" + } + ] + }, + { + "text": "." + } + ] + } +] \ No newline at end of file diff --git a/public/docs/content/examples-dataSources-DataSourcePropsPatchFixItemBetweenSortings.json b/public/docs/content/examples-dataSources-DataSourcePropsPatchFixItemBetweenSortings.json new file mode 100644 index 0000000000..cdcff53eab --- /dev/null +++ b/public/docs/content/examples-dataSources-DataSourcePropsPatchFixItemBetweenSortings.json @@ -0,0 +1,54 @@ +[ + { + "children": [ + { + "text": "While a row being edited, changes in its values can affect its position. For example, if we have \"Parent1\", \"Parent 2\", and \"Parent 3\", sorted by name, and the user changes \"Parent 3\" to be \"A\" - it should jump to the first position, as \"A\" should be the first item according to sorting. To avoid such jumps, the position of each item is 'fixed' - no item will change its position, until sorting is changed. " + } + ], + "type": "paragraph" + }, + { + "type": "paragraph", + "children": [ + { + "text": "This behavior is controlled with the " + }, + { + "text": "fixItemBetweenSortings", + "uui-richTextEditor-code": true + }, + { + "text": " prop, and is enabled by default." + } + ] + }, + { + "type": "paragraph", + "children": [ + { + "text": "There are cases, when you need rows to move instantly, reflecting changes in their value. For example, if you use " + }, + { + "text": "item.order", + "uui-richTextEditor-code": true + }, + { + "text": " and " + }, + { + "text": "getOrderBetween", + "uui-richTextEditor-code": true + }, + { + "text": " helper to control rows order. In this case, you want to disable this 'fixing' behavior by passing " + }, + { + "text": "fixItemBetweenSortings: false", + "uui-richTextEditor-code": true + }, + { + "text": "." + } + ] + } +] \ No newline at end of file diff --git a/public/docs/content/examples-dataSources-DataSourcePropsPatchGetNewItemPosition.json b/public/docs/content/examples-dataSources-DataSourcePropsPatchGetNewItemPosition.json new file mode 100644 index 0000000000..3584b15092 --- /dev/null +++ b/public/docs/content/examples-dataSources-DataSourcePropsPatchGetNewItemPosition.json @@ -0,0 +1,10 @@ +[ + { + "children": [ + { + "text": "Specifies, where to put a new item. By default, all new items are placed at the top of the list." + } + ], + "type": "paragraph" + } +] \ No newline at end of file diff --git a/public/docs/content/examples-dataSources-DataSourcePropsPatchIsDeleted.json b/public/docs/content/examples-dataSources-DataSourcePropsPatchIsDeleted.json new file mode 100644 index 0000000000..29cfdb8bcd --- /dev/null +++ b/public/docs/content/examples-dataSources-DataSourcePropsPatchIsDeleted.json @@ -0,0 +1,10 @@ +[ + { + "type": "paragraph", + "children": [ + { + "text": "To enable deleting of items, it is required to specify the getter for the deleted state. Items for which isDeleted(item) == true - will be removed from list." + } + ] + } +] \ No newline at end of file diff --git a/public/docs/content/examples-dataSources-DataSourcePropsShowSelectedOnly.json b/public/docs/content/examples-dataSources-DataSourcePropsShowSelectedOnly.json new file mode 100644 index 0000000000..7570d8ecd8 --- /dev/null +++ b/public/docs/content/examples-dataSources-DataSourcePropsShowSelectedOnly.json @@ -0,0 +1,25 @@ +[ + { + "type": "paragraph", + "children": [ + { + "text": "Enables/disables showing selected rows only." + } + ] + }, + { + "type": "paragraph", + "children": [ + { + "text": "If enabled in " + }, + { + "text": "LazyDataSource", + "uui-richTextEditor-code": true + }, + { + "text": " since initialization, only selected/checked records are loaded. The rest of the records would be loaded after turning on a showing of all the records." + } + ] + } +] \ No newline at end of file diff --git a/public/docs/docsGenOutput/docsGenOutput.d.ts b/public/docs/docsGenOutput/docsGenOutput.d.ts index 3e76da5ebb..f5fa6bab62 100644 --- a/public/docs/docsGenOutput/docsGenOutput.d.ts +++ b/public/docs/docsGenOutput/docsGenOutput.d.ts @@ -7,9 +7,6 @@ type Autogenerated_TDocsGenExportedTypeRef = '@epam/uui-core:AcceptDropParams' | '@epam/uui-core:ApiExtensions' | '@epam/uui-core:ApiRecoveryReason' | '@epam/uui-core:ApiStatus' | -'@epam/uui-core:ApplyFilterOptions' | -'@epam/uui-core:ApplySearchOptions' | -'@epam/uui-core:ApplySortOptions' | '@epam/uui-core:ArrayDataSourceProps' | '@epam/uui-core:ArrayElement' | '@epam/uui-core:ArrayListViewProps' | @@ -17,12 +14,14 @@ type Autogenerated_TDocsGenExportedTypeRef = '@epam/uui-core:AcceptDropParams' | '@epam/uui-core:AsyncDataSourceProps' | '@epam/uui-core:AsyncListViewProps' | '@epam/uui-core:BaseArrayListViewProps' | +'@epam/uui-core:BaseDataSourceConfig' | '@epam/uui-core:BaseDatePickerProps' | '@epam/uui-core:BaseListViewProps' | '@epam/uui-core:BaseRangeDatePickerProps' | '@epam/uui-core:BatchPromiseOptions' | '@epam/uui-core:BlockTypes' | '@epam/uui-core:CascadeSelection' | +'@epam/uui-core:CascadeSelectionService' | '@epam/uui-core:CheckboxCoreProps' | '@epam/uui-core:ClassValue' | '@epam/uui-core:ColumnsConfig' | @@ -62,6 +61,7 @@ type Autogenerated_TDocsGenExportedTypeRef = '@epam/uui-core:AcceptDropParams' | '@epam/uui-core:ErrorPageInfo' | '@epam/uui-core:FileUploadOptions' | '@epam/uui-core:FileUploadResponse' | +'@epam/uui-core:FilterConfig' | '@epam/uui-core:FilterPredicate' | '@epam/uui-core:FilterPredicateName' | '@epam/uui-core:FiltersConfig' | @@ -119,10 +119,12 @@ type Autogenerated_TDocsGenExportedTypeRef = '@epam/uui-core:AcceptDropParams' | '@epam/uui-core:IHasTabIndex' | '@epam/uui-core:IHasValidationMessage' | '@epam/uui-core:IHistory4' | +'@epam/uui-core:IImmutableMap' | '@epam/uui-core:ILayoutContext' | '@epam/uui-core:ILens' | '@epam/uui-core:ILockContext' | '@epam/uui-core:IMap' | +'@epam/uui-core:IMapElement' | '@epam/uui-core:IModal' | '@epam/uui-core:IModalContext' | '@epam/uui-core:INotification' | @@ -134,8 +136,14 @@ type Autogenerated_TDocsGenExportedTypeRef = '@epam/uui-core:AcceptDropParams' | '@epam/uui-core:IRouterContext' | '@epam/uui-core:ITablePreset' | '@epam/uui-core:ITableState' | -'@epam/uui-core:ItemsComparator' | +'@epam/uui-core:ItemsMapParams' | +'@epam/uui-core:ItemsStorageParams' | '@epam/uui-core:ITree' | +'@epam/uui-core:ITreeItemsInfo' | +'@epam/uui-core:ITreeLoadResult' | +'@epam/uui-core:ITreeNodeInfo' | +'@epam/uui-core:ITreeNodeStatus' | +'@epam/uui-core:ITreeParams' | '@epam/uui-core:IUserSettingsContext' | '@epam/uui-core:LabeledInputCoreProps' | '@epam/uui-core:LayoutLayer' | @@ -148,43 +156,56 @@ type Autogenerated_TDocsGenExportedTypeRef = '@epam/uui-core:AcceptDropParams' | '@epam/uui-core:LazyListViewProps' | '@epam/uui-core:LazyLoadedMapLoadCallback' | '@epam/uui-core:Link' | -'@epam/uui-core:ListApiResponse' | -'@epam/uui-core:ListApiSettings' | '@epam/uui-core:LoadingStatus' | -'@epam/uui-core:LoadTreeOptions' | '@epam/uui-core:Metadata' | '@epam/uui-core:ModalBlockerProps' | '@epam/uui-core:ModalFooterCoreProps' | '@epam/uui-core:ModalHeaderCoreProps' | '@epam/uui-core:ModalOperation' | '@epam/uui-core:ModalWindowProps' | +'@epam/uui-core:ModificationOptions' | '@epam/uui-core:NotificationOperation' | '@epam/uui-core:NotificationParams' | +'@epam/uui-core:OnUpdate' | +'@epam/uui-core:PatchOptions' | +'@epam/uui-core:PatchOrderingType' | '@epam/uui-core:PickerBaseOptions' | '@epam/uui-core:PickerBaseProps' | '@epam/uui-core:PickerBindingProps' | '@epam/uui-core:PickerBindingValueType' | '@epam/uui-core:PickerFilterConfig' | '@epam/uui-core:PickerFooterProps' | +'@epam/uui-core:PickerShowSelectedOnly' | +'@epam/uui-core:Position' | +'@epam/uui-core:PositionType' | '@epam/uui-core:RangeDatePickerInputType' | '@epam/uui-core:RangeDatePickerPresets' | '@epam/uui-core:RangeDatePickerPresetValue' | '@epam/uui-core:RangeDatePickerValue' | +'@epam/uui-core:RecordStatus' | '@epam/uui-core:RenderCellProps' | '@epam/uui-core:RenderEditorProps' | '@epam/uui-core:ScrollAlign' | '@epam/uui-core:ScrollToConfig' | +'@epam/uui-core:SearchConfig' | +'@epam/uui-core:SetDataSourceState' | '@epam/uui-core:SinglePickerProps' | +'@epam/uui-core:SortConfig' | '@epam/uui-core:SortDirection' | +'@epam/uui-core:SortedPatchByParentId' | '@epam/uui-core:SortingOption' | '@epam/uui-core:SpinnerCoreProps' | '@epam/uui-core:TableFiltersConfig' | '@epam/uui-core:TextInputCoreProps' | '@epam/uui-core:TooltipCoreProps' | -'@epam/uui-core:ITreeNodeInfo' | -'@epam/uui-core:ITreeParams' | +'@epam/uui-core:UseCascadeSelectionServiceProps' | +'@epam/uui-core:UseDataRowsProps' | +'@epam/uui-core:UseFoldingServiceProps' | '@epam/uui-core:UseFormProps' | +'@epam/uui-core:UseLazyFetchingAdvisorProps' | '@epam/uui-core:UseTableStateHookParams' | +'@epam/uui-core:UseTreeProps' | +'@epam/uui-core:UseTreeResult' | '@epam/uui-core:UseUuiErrorOptions' | '@epam/uui-core:UseUuiErrorProps' | '@epam/uui-core:UseUuiServicesProps' | @@ -250,6 +271,7 @@ type Autogenerated_TDocsGenExportedTypeRef = '@epam/uui-core:AcceptDropParams' | '@epam/uui-components:PickerModalOptions' | '@epam/uui-components:PickerModalScalarProps' | '@epam/uui-components:PickerTogglerProps' | +'@epam/uui-components:PickerTogglerRenderItemParams' | '@epam/uui-components:PortalProps' | '@epam/uui-components:PositionValues' | '@epam/uui-components:RadioInputProps' | diff --git a/public/docs/docsGenOutput/docsGenOutput.json b/public/docs/docsGenOutput/docsGenOutput.json index 6053465c6b..e9ed39a1a5 100644 --- a/public/docs/docsGenOutput/docsGenOutput.json +++ b/public/docs/docsGenOutput/docsGenOutput.json @@ -1,5 +1,5 @@ { - "version": "5.7.0", + "version": "5.7.1", "docsGenTypes": { "@epam/uui-core:AcceptDropParams": { "summary": { @@ -703,177 +703,6 @@ } } }, - "@epam/uui-core:ApplyFilterOptions": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "ApplyFilterOptions", - "nameFull": "ApplyFilterOptions" - }, - "src": "uui-core/src/data/processing/views/tree/ITree.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "ApplyFilterOptions", - "print": [ - "interface ApplyFilterOptions extends Pick, 'filter'> {", - " getFilter?: (filter: TFilter) => (item: TItem) => boolean;", - "}" - ] - }, - "props": [ - { - "uid": "getFilter", - "name": "getFilter", - "typeValue": { - "raw": "(filter: TFilter) => (item: TItem) => boolean" - }, - "editor": { - "type": "func" - }, - "required": false - }, - { - "uid": "filter", - "name": "filter", - "comment": { - "raw": [ - "Filter value used to filter data based on it.", - " Included in the API request object when using a LazyDataSource.", - " For Array and Async data sources, filtering is performed internally by the datasource." - ] - }, - "typeValue": { - "raw": "TFilter" - }, - "from": "@epam/uui-core:DataSourceState", - "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:ApplySearchOptions": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "ApplySearchOptions", - "nameFull": "ApplySearchOptions" - }, - "src": "uui-core/src/data/processing/views/tree/ITree.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "ApplySearchOptions", - "print": [ - "interface ApplySearchOptions extends Pick, 'search'> {", - " getSearchFields?: (item: TItem) => string[];", - " sortSearchByRelevance?: boolean;", - "}" - ] - }, - "props": [ - { - "uid": "getSearchFields", - "name": "getSearchFields", - "typeValue": { - "raw": "(item: TItem) => string[]" - }, - "editor": { - "type": "func" - }, - "required": false - }, - { - "uid": "sortSearchByRelevance", - "name": "sortSearchByRelevance", - "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" - }, - "required": false - }, - { - "uid": "search", - "name": "search", - "comment": { - "raw": [ - "Search value, used to filter data based on it.", - " Included in the API request object when using a LazyDataSource.", - " For Array and Async data sources, searching is performed internally by the datasource." - ] - }, - "typeValue": { - "raw": "string" - }, - "editor": { - "type": "string" - }, - "from": "@epam/uui-core:DataSourceState", - "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:ApplySortOptions": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "ApplySortOptions", - "nameFull": "ApplySortOptions" - }, - "src": "uui-core/src/data/processing/views/tree/ITree.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "ApplySortOptions", - "print": [ - "interface ApplySortOptions extends Pick, 'sorting'> {", - " sortBy?(item: TItem, sorting: SortingOption): any;", - "}" - ] - }, - "props": [ - { - "uid": "sortBy", - "name": "sortBy", - "typeValue": { - "raw": "(item: TItem, sorting: SortingOption) => any" - }, - "editor": { - "type": "func" - }, - "required": false - }, - { - "uid": "sorting", - "name": "sorting", - "comment": { - "raw": [ - "Sorting value, used to sort data based on it.", - " Included in the API request object when using a LazyDataSource.", - " For Array and Async data sources, sorting is performed internally by the datasource." - ] - }, - "typeValue": { - "raw": "SortingOption[]" - }, - "from": "@epam/uui-core:DataSourceState", - "required": false - } - ], - "propsFromUnion": false - } - }, "@epam/uui-core:ArrayDataSourceProps": { "summary": { "module": "@epam/uui-core", @@ -894,106 +723,6 @@ ] }, "props": [ - { - "uid": "items", - "name": "items", - "comment": { - "raw": [ - "Data, which should be represented by a DataSource." - ] - }, - "typeValue": { - "raw": "TItem[] | ITree" - }, - "from": "@epam/uui-core:ArrayListViewProps", - "required": false - }, - { - "uid": "getSearchFields", - "name": "getSearchFields", - "comment": { - "raw": [ - "A pure function that gets search value for each item.", - " Default: (item) => item.name." - ] - }, - "typeValue": { - "raw": "(item: TItem) => string[]" - }, - "editor": { - "type": "func" - }, - "from": "@epam/uui-core:BaseArrayListViewProps", - "required": false - }, - { - "uid": "sortBy", - "name": "sortBy", - "comment": { - "raw": [ - "A pure function that gets sorting value for current sorting value" - ] - }, - "typeValue": { - "raw": "(item: TItem, sorting: SortingOption) => any" - }, - "editor": { - "type": "func" - }, - "from": "@epam/uui-core:BaseArrayListViewProps", - "required": false - }, - { - "uid": "getFilter", - "name": "getFilter", - "comment": { - "raw": [ - "A pure function that returns filter callback to be applied for each item.", - " The callback should return true, if item passed the filter." - ] - }, - "typeValue": { - "raw": "(filter: TFilter) => (item: TItem) => boolean" - }, - "editor": { - "type": "func" - }, - "from": "@epam/uui-core:BaseArrayListViewProps", - "required": false - }, - { - "uid": "sortSearchByRelevance", - "name": "sortSearchByRelevance", - "comment": { - "raw": [ - "Enables sorting of search results by relevance.", - " - The highest priority has records, which have a full match with a search keyword.", - " - The lower one has records, which have a search keyword at the 0 position, but not the full match.", - " - Then, records, which contain a search keyword as a separate word, but not at the beginning.", - " - And the lowest one - any other match of the search keyword.", - "", - " Example:", - " - `search`: 'some'", - " - `record string`: 'some word', `rank` = 4", - " - `record string`: 'someone', `rank` = 3", - " - `record string`: 'I know some guy', `rank` = 2", - " - `record string`: 'awesome', `rank` = 1", - "", - " @default true" - ], - "tags": { - "@default": true - } - }, - "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" - }, - "from": "@epam/uui-core:BaseArrayListViewProps", - "required": false - }, { "uid": "getId", "name": "getId", @@ -1001,7 +730,8 @@ "raw": [ "Should return unique ID of the TItem", " If omitted, we assume that every TItem has and unique id in its 'id' field.", - " @param item An item to get ID of" + " @param item - record, which id should be returned.", + " @returns item id." ] }, "typeValue": { @@ -1010,7 +740,7 @@ "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -1028,7 +758,7 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -1043,7 +773,10 @@ " - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain", " to highlight parents with selected children", " - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),", - " We need to load parents with a separate call (if backend doesn't pre-fetch them)" + " We need to load parents with a separate call (if backend doesn't pre-fetch them)", + "", + " @param item - record, which paretnId should be returned.", + " @returns item parentId." ] }, "typeValue": { @@ -1052,7 +785,7 @@ "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -1071,7 +804,7 @@ "typeValue": { "raw": "DataRowOptions" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -1084,16 +817,17 @@ " See DataRowOptions for more details.", " If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.", " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", - " @param item An item to get options for" + " @param item - record, configuration should be returned for.", + " @param index - index of a row. It is optional and should not be expected, that it is provided on every call." ] }, "typeValue": { - "raw": "(item: TItem, index: number) => DataRowOptions" + "raw": "(item: TItem, index?: number | undefined) => DataRowOptions" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -1102,7 +836,9 @@ "comment": { "raw": [ "Can be specified to unfold all or some items at start.", - " If not specified, all rows would be folded." + " If not specified, all rows would be folded.", + " @param item - record, folding value should be returned for.", + " @param dataSourceState - dataSource state with current `foldAll` value. It provides the possibility to respect foldAll change, if `isFoldedByDefault` is implemented." ] }, "typeValue": { @@ -1111,7 +847,7 @@ "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -1141,7 +877,7 @@ "explicit" ] }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -1149,8 +885,12 @@ "name": "selectAll", "comment": { "raw": [ - "Enables or disables \"select all\" checkbox. Default is true." - ] + "Enables/disables selectAll functionality. If disabled explicitly, `selectAll`, returned from a view is null.", + " @default true" + ], + "tags": { + "@default": true + } }, "typeValue": { "raw": "boolean" @@ -1158,19 +898,16 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "backgroundReload", - "name": "backgroundReload", + "uid": "showSelectedOnly", + "name": "showSelectedOnly", "comment": { "raw": [ - "Enables background reloading of data on search/sort/filter/reload, which turns off the rows placeholders displaying while data loading.", - " During data reloading, previous data is displayed. To prevent any interaction with visible not actual rows, a blocker/spinner should be displayed.", - " In UUI components, such as `PickerInput`, `PickerList`, `PickerModal` and `DataTable`, blockers are added.", - " It is required to add blockers/spinners to the components, built on your own.", - " If reloading is started, `view.getListProps` returns `isReloading` flag, set to `true`." + "Enables returning only selected rows and loading missing selected/checked rows, if it is required/possible.", + " If enabled, `useView` returns only selected rows from `IDataSourceView.getVisibleRows`." ] }, "typeValue": { @@ -1179,84 +916,100 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:ArrayElement": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "ArrayElement", - "nameFull": "ArrayElement" - }, - "src": "uui-core/src/data/lenses/types.ts", - "exported": true - }, - "details": { - "kind": 265, - "typeValue": { - "raw": "ArrayElement", - "print": [ - "type ArrayElement = ArrayType extends (infer ElementType)[] ? ElementType : never;" - ] - } - } - }, - "@epam/uui-core:ArrayListViewProps": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "ArrayListViewProps", - "nameFull": "ArrayListViewProps" - }, - "src": "uui-core/src/data/processing/views/ArrayListView.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "ArrayListViewProps", - "print": [ - "interface ArrayListViewProps extends BaseArrayListViewProps {", - " /** Data, which should be represented by a DataSource. */", - " items?: TItem[] | ITree;", - "}" - ] - }, - "props": [ + }, { - "uid": "items", - "name": "items", + "uid": "patch", + "name": "patch", "comment": { "raw": [ - "Data, which should be represented by a DataSource." + "Items, which should be added/updated/deleted from the tree." ] }, "typeValue": { - "raw": "TItem[] | ITree" + "raw": "IMap | IImmutableMap" }, + "from": "@epam/uui-core:PatchOptions", "required": false }, { - "uid": "getSearchFields", - "name": "getSearchFields", + "uid": "isDeleted", + "name": "isDeleted", "comment": { "raw": [ - "A pure function that gets search value for each item.", - " Default: (item) => item.name." + "To enable deleting of the items, it is required to specify getter for deleted state." ] }, "typeValue": { - "raw": "(item: TItem) => string[]" + "raw": "(item: TItem) => boolean" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:PatchOptions", + "required": false + }, + { + "uid": "getNewItemPosition", + "name": "getNewItemPosition", + "comment": { + "raw": [ + "Provides information about the relative position of the new item.", + " @param item - new item, position should be got for.", + " @returns relative position in the list of items.", + " @default PatchOrdering.TOP" + ] + }, + "typeValue": { + "raw": "(item: TItem) => symbol" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:PatchOptions", + "required": false + }, + { + "uid": "getItemTemporaryOrder", + "name": "getItemTemporaryOrder", + "comment": { + "raw": [ + "Provides information about the temporary order of the new item.", + " @param item - new item, temporary order should be got for.", + " @returns temporary order", + "", + " @experimental The API of this feature can be changed in the future releases." + ] + }, + "typeValue": { + "raw": "(item: TItem) => string" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseArrayListViewProps", + "from": "@epam/uui-core:PatchOptions", + "required": false + }, + { + "uid": "fixItemBetweenSortings", + "name": "fixItemBetweenSortings", + "comment": { + "raw": [ + "If enabled, items position is fixed between sorting.", + " @default true" + ], + "tags": { + "@default": true + } + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:PatchOptions", "required": false }, { @@ -1273,25 +1026,25 @@ "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseArrayListViewProps", + "from": "@epam/uui-core:SortConfig", "required": false }, { - "uid": "getFilter", - "name": "getFilter", + "uid": "getSearchFields", + "name": "getSearchFields", "comment": { "raw": [ - "A pure function that returns filter callback to be applied for each item.", - " The callback should return true, if item passed the filter." + "A pure function that gets search value for each item.", + " @default (item) => item.name." ] }, "typeValue": { - "raw": "(filter: TFilter) => (item: TItem) => boolean" + "raw": "(item: TItem) => string[]" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseArrayListViewProps", + "from": "@epam/uui-core:SearchConfig", "required": false }, { @@ -1324,9 +1077,85 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:BaseArrayListViewProps", + "from": "@epam/uui-core:SearchConfig", + "required": false + }, + { + "uid": "getFilter", + "name": "getFilter", + "comment": { + "raw": [ + "A pure function that returns filter callback to be applied for each item.", + " The callback should return true, if item passed the filter." + ] + }, + "typeValue": { + "raw": "(filter: TFilter) => (item: TItem) => boolean" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:FilterConfig", "required": false }, + { + "uid": "items", + "name": "items", + "comment": { + "raw": [ + "Data, which should be represented by a DataSource." + ] + }, + "typeValue": { + "raw": "TItem[]" + }, + "from": "@epam/uui-core:ArrayDataSourceConfig", + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:ArrayElement": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "ArrayElement", + "nameFull": "ArrayElement" + }, + "src": "uui-core/src/data/lenses/types.ts", + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "ArrayElement", + "print": [ + "type ArrayElement = ArrayType extends (infer ElementType)[] ? ElementType : never;" + ] + } + } + }, + "@epam/uui-core:ArrayListViewProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "ArrayListViewProps", + "nameFull": "ArrayListViewProps" + }, + "src": "uui-core/src/data/processing/views/types.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "ArrayListViewProps", + "print": [ + "interface ArrayListViewProps extends BaseArrayListViewProps, ArrayDataSourceConfig {", + "}" + ] + }, + "props": [ { "uid": "getId", "name": "getId", @@ -1334,7 +1163,8 @@ "raw": [ "Should return unique ID of the TItem", " If omitted, we assume that every TItem has and unique id in its 'id' field.", - " @param item An item to get ID of" + " @param item - record, which id should be returned.", + " @returns item id." ] }, "typeValue": { @@ -1343,7 +1173,7 @@ "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -1361,7 +1191,7 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -1376,7 +1206,10 @@ " - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain", " to highlight parents with selected children", " - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),", - " We need to load parents with a separate call (if backend doesn't pre-fetch them)" + " We need to load parents with a separate call (if backend doesn't pre-fetch them)", + "", + " @param item - record, which paretnId should be returned.", + " @returns item parentId." ] }, "typeValue": { @@ -1385,7 +1218,7 @@ "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -1404,7 +1237,7 @@ "typeValue": { "raw": "DataRowOptions" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -1417,16 +1250,17 @@ " See DataRowOptions for more details.", " If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.", " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", - " @param item An item to get options for" + " @param item - record, configuration should be returned for.", + " @param index - index of a row. It is optional and should not be expected, that it is provided on every call." ] }, "typeValue": { - "raw": "(item: TItem, index: number) => DataRowOptions" + "raw": "(item: TItem, index?: number | undefined) => DataRowOptions" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -1435,7 +1269,9 @@ "comment": { "raw": [ "Can be specified to unfold all or some items at start.", - " If not specified, all rows would be folded." + " If not specified, all rows would be folded.", + " @param item - record, folding value should be returned for.", + " @param dataSourceState - dataSource state with current `foldAll` value. It provides the possibility to respect foldAll change, if `isFoldedByDefault` is implemented." ] }, "typeValue": { @@ -1444,7 +1280,7 @@ "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -1474,7 +1310,7 @@ "explicit" ] }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -1482,8 +1318,12 @@ "name": "selectAll", "comment": { "raw": [ - "Enables or disables \"select all\" checkbox. Default is true." - ] + "Enables/disables selectAll functionality. If disabled explicitly, `selectAll`, returned from a view is null.", + " @default true" + ], + "tags": { + "@default": true + } }, "typeValue": { "raw": "boolean" @@ -1491,19 +1331,16 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "backgroundReload", - "name": "backgroundReload", + "uid": "showSelectedOnly", + "name": "showSelectedOnly", "comment": { "raw": [ - "Enables background reloading of data on search/sort/filter/reload, which turns off the rows placeholders displaying while data loading.", - " During data reloading, previous data is displayed. To prevent any interaction with visible not actual rows, a blocker/spinner should be displayed.", - " In UUI components, such as `PickerInput`, `PickerList`, `PickerModal` and `DataTable`, blockers are added.", - " It is required to add blockers/spinners to the components, built on your own.", - " If reloading is started, `view.getListProps` returns `isReloading` flag, set to `true`." + "Enables returning only selected rows and loading missing selected/checked rows, if it is required/possible.", + " If enabled, `useView` returns only selected rows from `IDataSourceView.getVisibleRows`." ] }, "typeValue": { @@ -1512,64 +1349,257 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:ArrayPickerProps": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "ArrayPickerProps", - "nameFull": "ArrayPickerProps" - }, - "src": "uui-core/src/types/pickers.ts", - "exported": true - }, - "details": { - "kind": 265, - "typeValue": { - "raw": "{ selectionMode: 'multi'; valueType?: 'id' | undefined; emptyValue?: [] | null | undefined; } & IEditable | { selectionMode: 'multi'; valueType: 'entity'; emptyValue?: [] | null | undefined; } & IEditable", - "print": [ - "type ArrayPickerProps = ({", - " /** If 'single' provided - only one item is selected. In case of 'multi' - multiple items are selected */", - " selectionMode: 'multi';", - " /** Defines what to use in value/onValueChange: 'id' - item id (TId). 'entity' - the item itself (TItem) */", - " valueType?: 'id';", - " /** Defines what to use as an empty value. If other value provided, it will be assumed as selection */", - " emptyValue?: [", - " ] | null;", - "} & IEditable) | ({", - " /** If 'single' provided - only one item is selected. In case of 'multi' - multiple items are selected */", - " selectionMode: 'multi';", - " /** Defines what to use in value/onValueChange: 'id' - item id (TId). 'entity' - the item itself (TItem) */", - " valueType: 'entity';", - " /** Defines what to use as an empty value. If other value provided, it will be assumed as selection */", - " emptyValue?: [", - " ] | null;", - "} & IEditable);" - ] - }, - "props": [ + }, { - "uid": "selectionMode", - "name": "selectionMode", + "uid": "patch", + "name": "patch", "comment": { "raw": [ - "If 'single' provided - only one item is selected. In case of 'multi' - multiple items are selected" + "Items, which should be added/updated/deleted from the tree." ] }, "typeValue": { - "raw": "'multi'" - }, - "editor": { - "type": "oneOf", - "options": [ - "multi" - ] + "raw": "IMap | IImmutableMap" + }, + "from": "@epam/uui-core:PatchOptions", + "required": false + }, + { + "uid": "isDeleted", + "name": "isDeleted", + "comment": { + "raw": [ + "To enable deleting of the items, it is required to specify getter for deleted state." + ] + }, + "typeValue": { + "raw": "(item: TItem) => boolean" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:PatchOptions", + "required": false + }, + { + "uid": "getNewItemPosition", + "name": "getNewItemPosition", + "comment": { + "raw": [ + "Provides information about the relative position of the new item.", + " @param item - new item, position should be got for.", + " @returns relative position in the list of items.", + " @default PatchOrdering.TOP" + ] + }, + "typeValue": { + "raw": "(item: TItem) => symbol" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:PatchOptions", + "required": false + }, + { + "uid": "getItemTemporaryOrder", + "name": "getItemTemporaryOrder", + "comment": { + "raw": [ + "Provides information about the temporary order of the new item.", + " @param item - new item, temporary order should be got for.", + " @returns temporary order", + "", + " @experimental The API of this feature can be changed in the future releases." + ] + }, + "typeValue": { + "raw": "(item: TItem) => string" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:PatchOptions", + "required": false + }, + { + "uid": "fixItemBetweenSortings", + "name": "fixItemBetweenSortings", + "comment": { + "raw": [ + "If enabled, items position is fixed between sorting.", + " @default true" + ], + "tags": { + "@default": true + } + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:PatchOptions", + "required": false + }, + { + "uid": "sortBy", + "name": "sortBy", + "comment": { + "raw": [ + "A pure function that gets sorting value for current sorting value" + ] + }, + "typeValue": { + "raw": "(item: TItem, sorting: SortingOption) => any" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:SortConfig", + "required": false + }, + { + "uid": "getSearchFields", + "name": "getSearchFields", + "comment": { + "raw": [ + "A pure function that gets search value for each item.", + " @default (item) => item.name." + ] + }, + "typeValue": { + "raw": "(item: TItem) => string[]" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:SearchConfig", + "required": false + }, + { + "uid": "sortSearchByRelevance", + "name": "sortSearchByRelevance", + "comment": { + "raw": [ + "Enables sorting of search results by relevance.", + " - The highest priority has records, which have a full match with a search keyword.", + " - The lower one has records, which have a search keyword at the 0 position, but not the full match.", + " - Then, records, which contain a search keyword as a separate word, but not at the beginning.", + " - And the lowest one - any other match of the search keyword.", + "", + " Example:", + " - `search`: 'some'", + " - `record string`: 'some word', `rank` = 4", + " - `record string`: 'someone', `rank` = 3", + " - `record string`: 'I know some guy', `rank` = 2", + " - `record string`: 'awesome', `rank` = 1", + "", + " @default true" + ], + "tags": { + "@default": true + } + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:SearchConfig", + "required": false + }, + { + "uid": "getFilter", + "name": "getFilter", + "comment": { + "raw": [ + "A pure function that returns filter callback to be applied for each item.", + " The callback should return true, if item passed the filter." + ] + }, + "typeValue": { + "raw": "(filter: TFilter) => (item: TItem) => boolean" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:FilterConfig", + "required": false + }, + { + "uid": "items", + "name": "items", + "comment": { + "raw": [ + "Data, which should be represented by a DataSource." + ] + }, + "typeValue": { + "raw": "TItem[]" + }, + "from": "@epam/uui-core:ArrayDataSourceConfig", + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:ArrayPickerProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "ArrayPickerProps", + "nameFull": "ArrayPickerProps" + }, + "src": "uui-core/src/types/pickers.ts", + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "{ selectionMode: 'multi'; valueType?: 'id' | undefined; emptyValue?: [] | null | undefined; } & IEditable | { selectionMode: 'multi'; valueType: 'entity'; emptyValue?: [] | null | undefined; } & IEditable", + "print": [ + "type ArrayPickerProps = ({", + " /** If 'single' provided - only one item is selected. In case of 'multi' - multiple items are selected */", + " selectionMode: 'multi';", + " /** Defines what to use in value/onValueChange: 'id' - item id (TId). 'entity' - the item itself (TItem) */", + " valueType?: 'id';", + " /** Defines what to use as an empty value. If other value provided, it will be assumed as selection */", + " emptyValue?: [", + " ] | null;", + "} & IEditable) | ({", + " /** If 'single' provided - only one item is selected. In case of 'multi' - multiple items are selected */", + " selectionMode: 'multi';", + " /** Defines what to use in value/onValueChange: 'id' - item id (TId). 'entity' - the item itself (TItem) */", + " valueType: 'entity';", + " /** Defines what to use as an empty value. If other value provided, it will be assumed as selection */", + " emptyValue?: [", + " ] | null;", + "} & IEditable);" + ] + }, + "props": [ + { + "uid": "selectionMode", + "name": "selectionMode", + "comment": { + "raw": [ + "If 'single' provided - only one item is selected. In case of 'multi' - multiple items are selected" + ] + }, + "typeValue": { + "raw": "'multi'" + }, + "editor": { + "type": "oneOf", + "options": [ + "multi" + ] }, "required": true }, @@ -1778,112 +1808,6 @@ ] }, "props": [ - { - "uid": "api", - "name": "api", - "comment": { - "raw": [ - "A function to retrieve the data, asynchronously. This function usually performs a REST API call.", - " Should return the array of items, which will be processed by dataSource.", - " This api called only once during the initialization and assumed to return the full amount of data.", - " For lazy loading cases, use LazyDataSource" - ] - }, - "typeValue": { - "raw": "() => Promise" - }, - "editor": { - "type": "func" - }, - "from": "@epam/uui-core:AsyncListViewProps", - "required": true - }, - { - "uid": "getSearchFields", - "name": "getSearchFields", - "comment": { - "raw": [ - "A pure function that gets search value for each item.", - " Default: (item) => item.name." - ] - }, - "typeValue": { - "raw": "(item: TItem) => string[]" - }, - "editor": { - "type": "func" - }, - "from": "@epam/uui-core:BaseArrayListViewProps", - "required": false - }, - { - "uid": "sortBy", - "name": "sortBy", - "comment": { - "raw": [ - "A pure function that gets sorting value for current sorting value" - ] - }, - "typeValue": { - "raw": "(item: TItem, sorting: SortingOption) => any" - }, - "editor": { - "type": "func" - }, - "from": "@epam/uui-core:BaseArrayListViewProps", - "required": false - }, - { - "uid": "getFilter", - "name": "getFilter", - "comment": { - "raw": [ - "A pure function that returns filter callback to be applied for each item.", - " The callback should return true, if item passed the filter." - ] - }, - "typeValue": { - "raw": "(filter: TFilter) => (item: TItem) => boolean" - }, - "editor": { - "type": "func" - }, - "from": "@epam/uui-core:BaseArrayListViewProps", - "required": false - }, - { - "uid": "sortSearchByRelevance", - "name": "sortSearchByRelevance", - "comment": { - "raw": [ - "Enables sorting of search results by relevance.", - " - The highest priority has records, which have a full match with a search keyword.", - " - The lower one has records, which have a search keyword at the 0 position, but not the full match.", - " - Then, records, which contain a search keyword as a separate word, but not at the beginning.", - " - And the lowest one - any other match of the search keyword.", - "", - " Example:", - " - `search`: 'some'", - " - `record string`: 'some word', `rank` = 4", - " - `record string`: 'someone', `rank` = 3", - " - `record string`: 'I know some guy', `rank` = 2", - " - `record string`: 'awesome', `rank` = 1", - "", - " @default true" - ], - "tags": { - "@default": true - } - }, - "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" - }, - "from": "@epam/uui-core:BaseArrayListViewProps", - "required": false - }, { "uid": "getId", "name": "getId", @@ -1891,7 +1815,8 @@ "raw": [ "Should return unique ID of the TItem", " If omitted, we assume that every TItem has and unique id in its 'id' field.", - " @param item An item to get ID of" + " @param item - record, which id should be returned.", + " @returns item id." ] }, "typeValue": { @@ -1900,7 +1825,7 @@ "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -1918,7 +1843,7 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -1933,7 +1858,10 @@ " - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain", " to highlight parents with selected children", " - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),", - " We need to load parents with a separate call (if backend doesn't pre-fetch them)" + " We need to load parents with a separate call (if backend doesn't pre-fetch them)", + "", + " @param item - record, which paretnId should be returned.", + " @returns item parentId." ] }, "typeValue": { @@ -1942,7 +1870,7 @@ "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -1961,7 +1889,7 @@ "typeValue": { "raw": "DataRowOptions" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -1974,16 +1902,17 @@ " See DataRowOptions for more details.", " If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.", " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", - " @param item An item to get options for" + " @param item - record, configuration should be returned for.", + " @param index - index of a row. It is optional and should not be expected, that it is provided on every call." ] }, "typeValue": { - "raw": "(item: TItem, index: number) => DataRowOptions" + "raw": "(item: TItem, index?: number | undefined) => DataRowOptions" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -1992,7 +1921,9 @@ "comment": { "raw": [ "Can be specified to unfold all or some items at start.", - " If not specified, all rows would be folded." + " If not specified, all rows would be folded.", + " @param item - record, folding value should be returned for.", + " @param dataSourceState - dataSource state with current `foldAll` value. It provides the possibility to respect foldAll change, if `isFoldedByDefault` is implemented." ] }, "typeValue": { @@ -2001,7 +1932,7 @@ "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -2031,7 +1962,7 @@ "explicit" ] }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -2039,8 +1970,12 @@ "name": "selectAll", "comment": { "raw": [ - "Enables or disables \"select all\" checkbox. Default is true." - ] + "Enables/disables selectAll functionality. If disabled explicitly, `selectAll`, returned from a view is null.", + " @default true" + ], + "tags": { + "@default": true + } }, "typeValue": { "raw": "boolean" @@ -2048,19 +1983,16 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "backgroundReload", - "name": "backgroundReload", + "uid": "showSelectedOnly", + "name": "showSelectedOnly", "comment": { "raw": [ - "Enables background reloading of data on search/sort/filter/reload, which turns off the rows placeholders displaying while data loading.", - " During data reloading, previous data is displayed. To prevent any interaction with visible not actual rows, a blocker/spinner should be displayed.", - " In UUI components, such as `PickerInput`, `PickerList`, `PickerModal` and `DataTable`, blockers are added.", - " It is required to add blockers/spinners to the components, built on your own.", - " If reloading is started, `view.getListProps` returns `isReloading` flag, set to `true`." + "Enables returning only selected rows and loading missing selected/checked rows, if it is required/possible.", + " If enabled, `useView` returns only selected rows from `IDataSourceView.getVisibleRows`." ] }, "typeValue": { @@ -2069,74 +2001,100 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:AsyncListViewProps": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "AsyncListViewProps", - "nameFull": "AsyncListViewProps" - }, - "src": "uui-core/src/data/processing/views/AsyncListView.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "AsyncListViewProps", - "print": [ - "interface AsyncListViewProps extends BaseArrayListViewProps {", - " /** A function to retrieve the data, asynchronously. This function usually performs a REST API call.", - " * Should return the array of items, which will be processed by dataSource.", - " * This api called only once during the initialization and assumed to return the full amount of data.", - " * For lazy loading cases, use LazyDataSource", - " * */", - " api(): Promise;", - "}" - ] - }, - "props": [ + }, { - "uid": "api", - "name": "api", + "uid": "patch", + "name": "patch", "comment": { "raw": [ - "A function to retrieve the data, asynchronously. This function usually performs a REST API call.", - " Should return the array of items, which will be processed by dataSource.", - " This api called only once during the initialization and assumed to return the full amount of data.", - " For lazy loading cases, use LazyDataSource" + "Items, which should be added/updated/deleted from the tree." ] }, "typeValue": { - "raw": "() => Promise" + "raw": "IMap | IImmutableMap" + }, + "from": "@epam/uui-core:PatchOptions", + "required": false + }, + { + "uid": "isDeleted", + "name": "isDeleted", + "comment": { + "raw": [ + "To enable deleting of the items, it is required to specify getter for deleted state." + ] + }, + "typeValue": { + "raw": "(item: TItem) => boolean" }, "editor": { "type": "func" }, - "required": true + "from": "@epam/uui-core:PatchOptions", + "required": false }, { - "uid": "getSearchFields", - "name": "getSearchFields", + "uid": "getNewItemPosition", + "name": "getNewItemPosition", "comment": { "raw": [ - "A pure function that gets search value for each item.", - " Default: (item) => item.name." + "Provides information about the relative position of the new item.", + " @param item - new item, position should be got for.", + " @returns relative position in the list of items.", + " @default PatchOrdering.TOP" ] }, "typeValue": { - "raw": "(item: TItem) => string[]" + "raw": "(item: TItem) => symbol" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:PatchOptions", + "required": false + }, + { + "uid": "getItemTemporaryOrder", + "name": "getItemTemporaryOrder", + "comment": { + "raw": [ + "Provides information about the temporary order of the new item.", + " @param item - new item, temporary order should be got for.", + " @returns temporary order", + "", + " @experimental The API of this feature can be changed in the future releases." + ] + }, + "typeValue": { + "raw": "(item: TItem) => string" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseArrayListViewProps", + "from": "@epam/uui-core:PatchOptions", + "required": false + }, + { + "uid": "fixItemBetweenSortings", + "name": "fixItemBetweenSortings", + "comment": { + "raw": [ + "If enabled, items position is fixed between sorting.", + " @default true" + ], + "tags": { + "@default": true + } + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:PatchOptions", "required": false }, { @@ -2153,25 +2111,25 @@ "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseArrayListViewProps", + "from": "@epam/uui-core:SortConfig", "required": false }, { - "uid": "getFilter", - "name": "getFilter", + "uid": "getSearchFields", + "name": "getSearchFields", "comment": { "raw": [ - "A pure function that returns filter callback to be applied for each item.", - " The callback should return true, if item passed the filter." + "A pure function that gets search value for each item.", + " @default (item) => item.name." ] }, "typeValue": { - "raw": "(filter: TFilter) => (item: TItem) => boolean" + "raw": "(item: TItem) => string[]" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseArrayListViewProps", + "from": "@epam/uui-core:SearchConfig", "required": false }, { @@ -2204,9 +2162,71 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:BaseArrayListViewProps", + "from": "@epam/uui-core:SearchConfig", "required": false }, + { + "uid": "getFilter", + "name": "getFilter", + "comment": { + "raw": [ + "A pure function that returns filter callback to be applied for each item.", + " The callback should return true, if item passed the filter." + ] + }, + "typeValue": { + "raw": "(filter: TFilter) => (item: TItem) => boolean" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:FilterConfig", + "required": false + }, + { + "uid": "api", + "name": "api", + "comment": { + "raw": [ + "A function to retrieve the data, asynchronously. This function usually performs a REST API call.", + " Should return the array of items, which will be processed by dataSource.", + " This api called only once during the initialization and assumed to return the full amount of data.", + " For lazy loading cases, use LazyDataSource" + ] + }, + "typeValue": { + "raw": "() => Promise" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:AsyncDataSourceConfig", + "required": true + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:AsyncListViewProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "AsyncListViewProps", + "nameFull": "AsyncListViewProps" + }, + "src": "uui-core/src/data/processing/views/types.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "AsyncListViewProps", + "print": [ + "interface AsyncListViewProps extends BaseArrayListViewProps, AsyncDataSourceConfig {", + "}" + ] + }, + "props": [ { "uid": "getId", "name": "getId", @@ -2214,7 +2234,8 @@ "raw": [ "Should return unique ID of the TItem", " If omitted, we assume that every TItem has and unique id in its 'id' field.", - " @param item An item to get ID of" + " @param item - record, which id should be returned.", + " @returns item id." ] }, "typeValue": { @@ -2223,7 +2244,7 @@ "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -2241,7 +2262,7 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -2256,7 +2277,10 @@ " - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain", " to highlight parents with selected children", " - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),", - " We need to load parents with a separate call (if backend doesn't pre-fetch them)" + " We need to load parents with a separate call (if backend doesn't pre-fetch them)", + "", + " @param item - record, which paretnId should be returned.", + " @returns item parentId." ] }, "typeValue": { @@ -2265,7 +2289,7 @@ "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -2284,7 +2308,7 @@ "typeValue": { "raw": "DataRowOptions" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -2297,16 +2321,17 @@ " See DataRowOptions for more details.", " If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.", " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", - " @param item An item to get options for" + " @param item - record, configuration should be returned for.", + " @param index - index of a row. It is optional and should not be expected, that it is provided on every call." ] }, "typeValue": { - "raw": "(item: TItem, index: number) => DataRowOptions" + "raw": "(item: TItem, index?: number | undefined) => DataRowOptions" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -2315,7 +2340,9 @@ "comment": { "raw": [ "Can be specified to unfold all or some items at start.", - " If not specified, all rows would be folded." + " If not specified, all rows would be folded.", + " @param item - record, folding value should be returned for.", + " @param dataSourceState - dataSource state with current `foldAll` value. It provides the possibility to respect foldAll change, if `isFoldedByDefault` is implemented." ] }, "typeValue": { @@ -2324,7 +2351,7 @@ "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -2354,7 +2381,7 @@ "explicit" ] }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -2362,8 +2389,12 @@ "name": "selectAll", "comment": { "raw": [ - "Enables or disables \"select all\" checkbox. Default is true." - ] + "Enables/disables selectAll functionality. If disabled explicitly, `selectAll`, returned from a view is null.", + " @default true" + ], + "tags": { + "@default": true + } }, "typeValue": { "raw": "boolean" @@ -2371,19 +2402,16 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "backgroundReload", - "name": "backgroundReload", + "uid": "showSelectedOnly", + "name": "showSelectedOnly", "comment": { "raw": [ - "Enables background reloading of data on search/sort/filter/reload, which turns off the rows placeholders displaying while data loading.", - " During data reloading, previous data is displayed. To prevent any interaction with visible not actual rows, a blocker/spinner should be displayed.", - " In UUI components, such as `PickerInput`, `PickerList`, `PickerModal` and `DataTable`, blockers are added.", - " It is required to add blockers/spinners to the components, built on your own.", - " If reloading is started, `view.getListProps` returns `isReloading` flag, set to `true`." + "Enables returning only selected rows and loading missing selected/checked rows, if it is required/possible.", + " If enabled, `useView` returns only selected rows from `IDataSourceView.getVisibleRows`." ] }, "typeValue": { @@ -2392,75 +2420,100 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:BaseArrayListViewProps": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "BaseArrayListViewProps", - "nameFull": "BaseArrayListViewProps" - }, - "src": "uui-core/src/data/processing/views/ArrayListView.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "BaseArrayListViewProps", - "print": [ - "interface BaseArrayListViewProps extends BaseListViewProps {", - " /** A pure function that gets search value for each item.", - " Default: (item) => item.name.", - " */", - " getSearchFields?(item: TItem): string[];", - " /** A pure function that gets sorting value for current sorting value */", - " sortBy?(item: TItem, sorting: SortingOption): any;", - " /** A pure function that returns filter callback to be applied for each item.", - " * The callback should return true, if item passed the filter.", - " * */", - " getFilter?(filter: TFilter): (item: TItem) => boolean;", - " /**", - " * Enables sorting of search results by relevance.", - " * - The highest priority has records, which have a full match with a search keyword.", - " * - The lower one has records, which have a search keyword at the 0 position, but not the full match.", - " * - Then, records, which contain a search keyword as a separate word, but not at the beginning.", - " * - And the lowest one - any other match of the search keyword.", - " *", - " * Example:", - " * - `search`: 'some'", - " * - `record string`: 'some word', `rank` = 4", - " * - `record string`: 'someone', `rank` = 3", - " * - `record string`: 'I know some guy', `rank` = 2", - " * - `record string`: 'awesome', `rank` = 1", - " *", - " * @default true", - " */", - " sortSearchByRelevance?: boolean;", - "}" - ] - }, - "props": [ + }, { - "uid": "getSearchFields", - "name": "getSearchFields", + "uid": "patch", + "name": "patch", "comment": { "raw": [ - "A pure function that gets search value for each item.", - " Default: (item) => item.name." + "Items, which should be added/updated/deleted from the tree." ] }, "typeValue": { - "raw": "(item: TItem) => string[]" + "raw": "IMap | IImmutableMap" + }, + "from": "@epam/uui-core:PatchOptions", + "required": false + }, + { + "uid": "isDeleted", + "name": "isDeleted", + "comment": { + "raw": [ + "To enable deleting of the items, it is required to specify getter for deleted state." + ] + }, + "typeValue": { + "raw": "(item: TItem) => boolean" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:PatchOptions", + "required": false + }, + { + "uid": "getNewItemPosition", + "name": "getNewItemPosition", + "comment": { + "raw": [ + "Provides information about the relative position of the new item.", + " @param item - new item, position should be got for.", + " @returns relative position in the list of items.", + " @default PatchOrdering.TOP" + ] + }, + "typeValue": { + "raw": "(item: TItem) => symbol" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:PatchOptions", + "required": false + }, + { + "uid": "getItemTemporaryOrder", + "name": "getItemTemporaryOrder", + "comment": { + "raw": [ + "Provides information about the temporary order of the new item.", + " @param item - new item, temporary order should be got for.", + " @returns temporary order", + "", + " @experimental The API of this feature can be changed in the future releases." + ] + }, + "typeValue": { + "raw": "(item: TItem) => string" }, "editor": { "type": "func" }, + "from": "@epam/uui-core:PatchOptions", + "required": false + }, + { + "uid": "fixItemBetweenSortings", + "name": "fixItemBetweenSortings", + "comment": { + "raw": [ + "If enabled, items position is fixed between sorting.", + " @default true" + ], + "tags": { + "@default": true + } + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:PatchOptions", "required": false }, { @@ -2477,23 +2530,25 @@ "editor": { "type": "func" }, + "from": "@epam/uui-core:SortConfig", "required": false }, { - "uid": "getFilter", - "name": "getFilter", + "uid": "getSearchFields", + "name": "getSearchFields", "comment": { "raw": [ - "A pure function that returns filter callback to be applied for each item.", - " The callback should return true, if item passed the filter." + "A pure function that gets search value for each item.", + " @default (item) => item.name." ] }, "typeValue": { - "raw": "(filter: TFilter) => (item: TItem) => boolean" + "raw": "(item: TItem) => string[]" }, "editor": { "type": "func" }, + "from": "@epam/uui-core:SearchConfig", "required": false }, { @@ -2526,8 +2581,71 @@ "editor": { "type": "bool" }, + "from": "@epam/uui-core:SearchConfig", + "required": false + }, + { + "uid": "getFilter", + "name": "getFilter", + "comment": { + "raw": [ + "A pure function that returns filter callback to be applied for each item.", + " The callback should return true, if item passed the filter." + ] + }, + "typeValue": { + "raw": "(filter: TFilter) => (item: TItem) => boolean" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:FilterConfig", "required": false }, + { + "uid": "api", + "name": "api", + "comment": { + "raw": [ + "A function to retrieve the data, asynchronously. This function usually performs a REST API call.", + " Should return the array of items, which will be processed by dataSource.", + " This api called only once during the initialization and assumed to return the full amount of data.", + " For lazy loading cases, use LazyDataSource" + ] + }, + "typeValue": { + "raw": "() => Promise" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:AsyncDataSourceConfig", + "required": true + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:BaseArrayListViewProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "BaseArrayListViewProps", + "nameFull": "BaseArrayListViewProps" + }, + "src": "uui-core/src/data/processing/views/types.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "BaseArrayListViewProps", + "print": [ + "interface BaseArrayListViewProps extends BaseListViewProps, SortConfig, SearchConfig, FilterConfig {", + "}" + ] + }, + "props": [ { "uid": "getId", "name": "getId", @@ -2535,7 +2653,8 @@ "raw": [ "Should return unique ID of the TItem", " If omitted, we assume that every TItem has and unique id in its 'id' field.", - " @param item An item to get ID of" + " @param item - record, which id should be returned.", + " @returns item id." ] }, "typeValue": { @@ -2544,7 +2663,7 @@ "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -2562,7 +2681,7 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -2577,7 +2696,10 @@ " - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain", " to highlight parents with selected children", " - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),", - " We need to load parents with a separate call (if backend doesn't pre-fetch them)" + " We need to load parents with a separate call (if backend doesn't pre-fetch them)", + "", + " @param item - record, which paretnId should be returned.", + " @returns item parentId." ] }, "typeValue": { @@ -2586,7 +2708,7 @@ "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -2605,7 +2727,7 @@ "typeValue": { "raw": "DataRowOptions" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -2618,16 +2740,17 @@ " See DataRowOptions for more details.", " If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.", " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", - " @param item An item to get options for" + " @param item - record, configuration should be returned for.", + " @param index - index of a row. It is optional and should not be expected, that it is provided on every call." ] }, "typeValue": { - "raw": "(item: TItem, index: number) => DataRowOptions" + "raw": "(item: TItem, index?: number | undefined) => DataRowOptions" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -2636,7 +2759,9 @@ "comment": { "raw": [ "Can be specified to unfold all or some items at start.", - " If not specified, all rows would be folded." + " If not specified, all rows would be folded.", + " @param item - record, folding value should be returned for.", + " @param dataSourceState - dataSource state with current `foldAll` value. It provides the possibility to respect foldAll change, if `isFoldedByDefault` is implemented." ] }, "typeValue": { @@ -2645,7 +2770,7 @@ "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -2675,7 +2800,7 @@ "explicit" ] }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { @@ -2683,8 +2808,12 @@ "name": "selectAll", "comment": { "raw": [ - "Enables or disables \"select all\" checkbox. Default is true." - ] + "Enables/disables selectAll functionality. If disabled explicitly, `selectAll`, returned from a view is null.", + " @default true" + ], + "tags": { + "@default": true + } }, "typeValue": { "raw": "boolean" @@ -2692,19 +2821,16 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "backgroundReload", - "name": "backgroundReload", + "uid": "showSelectedOnly", + "name": "showSelectedOnly", "comment": { "raw": [ - "Enables background reloading of data on search/sort/filter/reload, which turns off the rows placeholders displaying while data loading.", - " During data reloading, previous data is displayed. To prevent any interaction with visible not actual rows, a blocker/spinner should be displayed.", - " In UUI components, such as `PickerInput`, `PickerList`, `PickerModal` and `DataTable`, blockers are added.", - " It is required to add blockers/spinners to the components, built on your own.", - " If reloading is started, `view.getListProps` returns `isReloading` flag, set to `true`." + "Enables returning only selected rows and loading missing selected/checked rows, if it is required/possible.", + " If enabled, `useView` returns only selected rows from `IDataSourceView.getVisibleRows`." ] }, "typeValue": { @@ -2713,143 +2839,91 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:BaseDatePickerProps": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "BaseDatePickerProps", - "nameFull": "BaseDatePickerProps" - }, - "src": "uui-core/src/types/components/datePicker/BaseDatePicker.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "BaseDatePickerProps", - "print": [ - "interface BaseDatePickerProps extends IEditable, ICanFocus, IDisableable, IHasPlaceholder, ICanBeReadonly, IAnalyticableOnChange, IHasForwardedRef {", - " /** Date format string, see [dayjs docs](@link https://day.js.org/docs/en/display/format) */", - " format?: string;", - " /** Filter selectable days. Days, for which this callback returns false - will be disabled */", - " filter?(day: Dayjs): boolean;", - " /** Overrides rendering of picker Target - component which triggers dropdown. Can be used to attach DatePicker to other components, e.g. Buttons */", - " renderTarget?(props: IDropdownToggler): ReactNode;", - " /** Defines where to place calendar icon */", - " iconPosition?: 'left' | 'right';", - " /**", - " * Disable clearing date value (e.g. via cross icon)", - " * @default false", - " */", - " disableClear?: boolean;", - " /** Overrides rendering of the single day. For example, to highlight certain days */", - " renderDay?: (day: Dayjs, onDayClick: (day: Dayjs) => void) => ReactElement;", - " /** If this function returns true, the day will be highlighted as holiday */", - " isHoliday?: (day: Dayjs) => boolean;", - " /** Called when component lose focus */", - " onBlur?: (e?: React.FocusEvent) => void;", - " /** Dropdown position relative to the input. See [Popper Docs](@link https://popper.js.org/) */", - " placement?: Placement;", - " /** Any HTML attributes (native or 'data-') to put on date picker parts */", - " rawProps?: {", - " /** Any HTML attributes (native or 'data-') to put on date picker input */", - " input?: IHasRawProps>['rawProps'];", - " /** Any HTML attributes (native or 'data-') to put on date picker body */", - " body?: IHasRawProps>['rawProps'];", - " };", - " /** CSS class(es) to put on datepicker input */", - " inputCx?: CX;", - " /** CSS class(es) to put on datepicker body */", - " bodyCx?: CX;", - "}" - ] - }, - "props": [ + }, { - "uid": "format", - "name": "format", + "uid": "patch", + "name": "patch", "comment": { "raw": [ - "Date format string, see [dayjs docs](@link https://day.js.org/docs/en/display/format)" + "Items, which should be added/updated/deleted from the tree." ] }, "typeValue": { - "raw": "string" - }, - "editor": { - "type": "string" + "raw": "IMap | IImmutableMap" }, + "from": "@epam/uui-core:PatchOptions", "required": false }, { - "uid": "filter", - "name": "filter", + "uid": "isDeleted", + "name": "isDeleted", "comment": { "raw": [ - "Filter selectable days. Days, for which this callback returns false - will be disabled" + "To enable deleting of the items, it is required to specify getter for deleted state." ] }, "typeValue": { - "raw": "(day: Dayjs) => boolean" + "raw": "(item: TItem) => boolean" }, "editor": { "type": "func" }, + "from": "@epam/uui-core:PatchOptions", "required": false }, { - "uid": "renderTarget", - "name": "renderTarget", + "uid": "getNewItemPosition", + "name": "getNewItemPosition", "comment": { "raw": [ - "Overrides rendering of picker Target - component which triggers dropdown. Can be used to attach DatePicker to other components, e.g. Buttons" + "Provides information about the relative position of the new item.", + " @param item - new item, position should be got for.", + " @returns relative position in the list of items.", + " @default PatchOrdering.TOP" ] }, "typeValue": { - "raw": "(props: IDropdownToggler) => React.ReactNode" + "raw": "(item: TItem) => symbol" }, "editor": { - "type": "component" + "type": "func" }, + "from": "@epam/uui-core:PatchOptions", "required": false }, { - "uid": "iconPosition", - "name": "iconPosition", + "uid": "getItemTemporaryOrder", + "name": "getItemTemporaryOrder", "comment": { "raw": [ - "Defines where to place calendar icon" + "Provides information about the temporary order of the new item.", + " @param item - new item, temporary order should be got for.", + " @returns temporary order", + "", + " @experimental The API of this feature can be changed in the future releases." ] }, "typeValue": { - "raw": "'left' | 'right'" + "raw": "(item: TItem) => string" }, "editor": { - "type": "oneOf", - "options": [ - "left", - "right" - ] + "type": "func" }, + "from": "@epam/uui-core:PatchOptions", "required": false }, { - "uid": "disableClear", - "name": "disableClear", + "uid": "fixItemBetweenSortings", + "name": "fixItemBetweenSortings", "comment": { "raw": [ - "Disable clearing date value (e.g. via cross icon)", - " @default false" + "If enabled, items position is fixed between sorting.", + " @default true" ], "tags": { - "@default": false + "@default": true } }, "typeValue": { @@ -2858,413 +2932,352 @@ "editor": { "type": "bool" }, + "from": "@epam/uui-core:PatchOptions", "required": false }, { - "uid": "renderDay", - "name": "renderDay", + "uid": "sortBy", + "name": "sortBy", "comment": { "raw": [ - "Overrides rendering of the single day. For example, to highlight certain days" + "A pure function that gets sorting value for current sorting value" ] }, "typeValue": { - "raw": "(day: Dayjs, onDayClick: (day: Dayjs) => void) => React.ReactElement>" + "raw": "(item: TItem, sorting: SortingOption) => any" }, "editor": { - "type": "component" + "type": "func" }, + "from": "@epam/uui-core:SortConfig", "required": false }, { - "uid": "isHoliday", - "name": "isHoliday", + "uid": "getSearchFields", + "name": "getSearchFields", "comment": { "raw": [ - "If this function returns true, the day will be highlighted as holiday" + "A pure function that gets search value for each item.", + " @default (item) => item.name." ] }, "typeValue": { - "raw": "(day: Dayjs) => boolean" + "raw": "(item: TItem) => string[]" }, "editor": { "type": "func" }, + "from": "@epam/uui-core:SearchConfig", "required": false }, { - "uid": "onBlur", - "name": "onBlur", + "uid": "sortSearchByRelevance", + "name": "sortSearchByRelevance", "comment": { "raw": [ - "Called when component lose focus" - ] + "Enables sorting of search results by relevance.", + " - The highest priority has records, which have a full match with a search keyword.", + " - The lower one has records, which have a search keyword at the 0 position, but not the full match.", + " - Then, records, which contain a search keyword as a separate word, but not at the beginning.", + " - And the lowest one - any other match of the search keyword.", + "", + " Example:", + " - `search`: 'some'", + " - `record string`: 'some word', `rank` = 4", + " - `record string`: 'someone', `rank` = 3", + " - `record string`: 'I know some guy', `rank` = 2", + " - `record string`: 'awesome', `rank` = 1", + "", + " @default true" + ], + "tags": { + "@default": true + } }, "typeValue": { - "raw": "(e?: React.FocusEvent | undefined) => void" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, + "from": "@epam/uui-core:SearchConfig", "required": false }, { - "uid": "placement", - "name": "placement", + "uid": "getFilter", + "name": "getFilter", "comment": { "raw": [ - "Dropdown position relative to the input. See [Popper Docs](@link https://popper.js.org/)" + "A pure function that returns filter callback to be applied for each item.", + " The callback should return true, if item passed the filter." ] }, "typeValue": { - "raw": "'left' | 'right' | 'auto' | 'auto-start' | 'auto-end' | 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end'" + "raw": "(filter: TFilter) => (item: TItem) => boolean" }, "editor": { - "type": "oneOf", - "options": [ - "left", - "right", - "auto", - "auto-start", - "auto-end", - "top", - "bottom", - "top-start", - "top-end", - "bottom-start", - "bottom-end", - "right-start", - "right-end", - "left-start", - "left-end" - ] + "type": "func" }, + "from": "@epam/uui-core:FilterConfig", "required": false - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:BaseDataSourceConfig": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "BaseDataSourceConfig", + "nameFull": "BaseDataSourceConfig" + }, + "src": "uui-core/src/types/dataSources.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "BaseDataSourceConfig", + "print": [ + "interface BaseDataSourceConfig extends PatchOptions {", + " /**", + " * Should return unique ID of the TItem", + " * If omitted, we assume that every TItem has and unique id in its 'id' field.", + " * @param item - record, which id should be returned.", + " * @returns item id.", + " */", + " getId?(item: TItem): TId;", + " /**", + " * Set to true, if you use IDs which can't act as javascript Map key (objects or arrays).", + " * In this case, IDs will be internally JSON.stringify-ed to be used as Maps keys.", + " */", + " complexIds?: boolean;", + " /** Should return ID of the Item's parent. Usually it's i => i.parentId.", + " * If specified, Data Source will build items hierarchy.", + " *", + " * Also, it is used by LazyDataSource to pre-fetch missing parents of loaded items. This is required in following cases:", + " * - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain", + " * to highlight parents with selected children", + " * - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),", + " * We need to load parents with a separate call (if backend doesn't pre-fetch them)", + " *", + " * @param item - record, which paretnId should be returned.", + " * @returns item parentId.", + " */", + " getParentId?(item: TItem): TId | undefined;", + " /**", + " * Specifies if rows are selectable, checkable, draggable, clickable, and more.", + " * See DataRowOptions for more details.", + " * If options depends on the item itself, use getRowOptions.", + " * Specifying both rowOptions and getRowOptions might help to render better loading skeletons: we use only rowOptions in this case, as we haven't loaded an item yet.", + " * Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", + " * @param item An item to get options for", + " */", + " rowOptions?: DataRowOptions;", + " /**", + " * For each row, specify if row is selectable, editable, checkable, draggable, clickable, have its own set of columns, and more.", + " * To make rows editable, pass IEditable interface to each row. This works the same way as for other editable components.", + " * See DataRowOptions for more details.", + " * If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.", + " * Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", + " * @param item - record, configuration should be returned for.", + " * @param index - index of a row. It is optional and should not be expected, that it is provided on every call.", + " */", + " getRowOptions?(item: TItem, index?: number): DataRowOptions;", + " /**", + " * Can be specified to unfold all or some items at start.", + " * If not specified, all rows would be folded.", + " * @param item - record, folding value should be returned for.", + " * @param dataSourceState - dataSource state with current `foldAll` value. It provides the possibility to respect foldAll change, if `isFoldedByDefault` is implemented.", + " */", + " isFoldedByDefault?(item: TItem, state: DataSourceState): boolean;", + " /**", + " * Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.", + " * - false: All nodes are selected independently (default).", + " * - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.", + " * - 'implicit': Selecting a parent node means that all children are considered checked.", + " * The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked", + " * parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,", + " * its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last", + " * unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked.", + " */", + " cascadeSelection?: CascadeSelection;", + " /**", + " * Enables/disables selectAll functionality. If disabled explicitly, `selectAll`, returned from a view is null.", + " * @default true", + " */", + " selectAll?: true | false;", + " /**", + " * Enables returning only selected rows and loading missing selected/checked rows, if it is required/possible.", + " * If enabled, `useView` returns only selected rows from `IDataSourceView.getVisibleRows`.", + " */", + " showSelectedOnly?: boolean;", + "}" + ] + }, + "props": [ { - "uid": "rawProps", - "name": "rawProps", + "uid": "getId", + "name": "getId", "comment": { "raw": [ - "Any HTML attributes (native or 'data-') to put on date picker parts" + "Should return unique ID of the TItem", + " If omitted, we assume that every TItem has and unique id in its 'id' field.", + " @param item - record, which id should be returned.", + " @returns item id." ] }, "typeValue": { - "raw": "{ input?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; }" + "raw": "(item: TItem) => TId" + }, + "editor": { + "type": "func" }, "required": false }, { - "uid": "inputCx", - "name": "inputCx", + "uid": "complexIds", + "name": "complexIds", "comment": { "raw": [ - "CSS class(es) to put on datepicker input" + "Set to true, if you use IDs which can't act as javascript Map key (objects or arrays).", + " In this case, IDs will be internally JSON.stringify-ed to be used as Maps keys." ] }, "typeValue": { - "raw": "null | string | number | boolean | ClassDictionary | ClassArray" + "raw": "boolean" + }, + "editor": { + "type": "bool" }, - "typeValueRef": "@epam/uui-core:ClassValue", "required": false }, { - "uid": "bodyCx", - "name": "bodyCx", + "uid": "getParentId", + "name": "getParentId", "comment": { "raw": [ - "CSS class(es) to put on datepicker body" + "Should return ID of the Item's parent. Usually it's i => i.parentId.", + " If specified, Data Source will build items hierarchy.", + "", + " Also, it is used by LazyDataSource to pre-fetch missing parents of loaded items. This is required in following cases:", + " - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain", + " to highlight parents with selected children", + " - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),", + " We need to load parents with a separate call (if backend doesn't pre-fetch them)", + "", + " @param item - record, which paretnId should be returned.", + " @returns item parentId." ] }, "typeValue": { - "raw": "null | string | number | boolean | ClassDictionary | ClassArray" + "raw": "(item: TItem) => TId | undefined" + }, + "editor": { + "type": "func" }, - "typeValueRef": "@epam/uui-core:ClassValue", "required": false }, { - "uid": "isInvalid", - "name": "isInvalid", + "uid": "rowOptions", + "name": "rowOptions", "comment": { "raw": [ - "True if component contains invalid input" + "Specifies if rows are selectable, checkable, draggable, clickable, and more.", + " See DataRowOptions for more details.", + " If options depends on the item itself, use getRowOptions.", + " Specifying both rowOptions and getRowOptions might help to render better loading skeletons: we use only rowOptions in this case, as we haven't loaded an item yet.", + " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", + " @param item An item to get options for" ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "DataRowOptions" }, - "from": "@epam/uui-core:ICanBeInvalid", "required": false }, { - "uid": "isDisabled", - "name": "isDisabled", + "uid": "getRowOptions", + "name": "getRowOptions", "comment": { "raw": [ - "Disable editing, and visually de-emphasize value of the component" + "For each row, specify if row is selectable, editable, checkable, draggable, clickable, have its own set of columns, and more.", + " To make rows editable, pass IEditable interface to each row. This works the same way as for other editable components.", + " See DataRowOptions for more details.", + " If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.", + " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", + " @param item - record, configuration should be returned for.", + " @param index - index of a row. It is optional and should not be expected, that it is provided on every call." ] }, "typeValue": { - "raw": "boolean" + "raw": "(item: TItem, index?: number | undefined) => DataRowOptions" }, "editor": { - "type": "bool" + "type": "func" }, - "from": "@epam/uui-core:IDisableable", "required": false }, { - "uid": "isReadonly", - "name": "isReadonly", + "uid": "isFoldedByDefault", + "name": "isFoldedByDefault", "comment": { "raw": [ - "Disable editing. Unlike isDisabled, keep component's value readable." + "Can be specified to unfold all or some items at start.", + " If not specified, all rows would be folded.", + " @param item - record, folding value should be returned for.", + " @param dataSourceState - dataSource state with current `foldAll` value. It provides the possibility to respect foldAll change, if `isFoldedByDefault` is implemented." ] }, "typeValue": { - "raw": "boolean" + "raw": "(item: TItem, state: DataSourceState) => boolean" }, "editor": { - "type": "bool" + "type": "func" }, - "from": "@epam/uui-core:ICanBeReadonly", "required": false }, { - "uid": "isRequired", - "name": "isRequired", + "uid": "cascadeSelection", + "name": "cascadeSelection", "comment": { "raw": [ - "Marks that component's value is required and shouldn't be empty" - ] - }, - "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" - }, - "from": "@epam/uui-core:ICanBeRequired", - "required": false - }, - { - "uid": "value", - "name": "value", - "comment": { - "raw": [ - "The current value of component" - ] - }, - "typeValue": { - "raw": "null | string" - }, - "editor": { - "type": "string" - }, - "from": "@epam/uui-core:IControlled", - "required": true - }, - { - "uid": "onValueChange", - "name": "onValueChange", - "comment": { - "raw": [ - "Called when value needs to be changed (usually due to user interaction)" - ] - }, - "typeValue": { - "raw": "(newValue: string | null) => void" - }, - "editor": { - "type": "func" - }, - "from": "@epam/uui-core:IControlled", - "required": true - }, - { - "uid": "onFocus", - "name": "onFocus", - "comment": { - "raw": [ - "Called when component gets input focus" - ] - }, - "typeValue": { - "raw": "(e: React.FocusEvent) => void" - }, - "editor": { - "type": "func" - }, - "from": "@epam/uui-core:ICanFocus", - "required": false - }, - { - "uid": "placeholder", - "name": "placeholder", - "comment": { - "raw": [ - "Placeholder to display when empty" - ] - }, - "typeValue": { - "raw": "any" - }, - "from": "@epam/uui-core:IHasPlaceholder", - "required": false - }, - { - "uid": "getValueChangeAnalyticsEvent", - "name": "getValueChangeAnalyticsEvent", - "comment": { - "raw": [ - "Given a value, returns an analytics event to send when component is edited.", - " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)." + "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.", + " - false: All nodes are selected independently (default).", + " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.", + " - 'implicit': Selecting a parent node means that all children are considered checked.", + " The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked", + " parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,", + " its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last", + " unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked." ] }, "typeValue": { - "raw": "(newValue: string | null, oldValue: string | null) => AnalyticsEvent" + "raw": "boolean | 'implicit' | 'explicit'" }, "editor": { - "type": "func" - }, - "from": "@epam/uui-core:IAnalyticableOnChange", - "required": false - }, - { - "uid": "forwardedRef", - "name": "forwardedRef", - "comment": { - "raw": [ - "this ref is passed to the underlying component" - ] - }, - "typeValue": { - "raw": "null | (instance: HTMLElement | null) => void | React.MutableRefObject" - }, - "from": "@epam/uui-core:IHasForwardedRef", - "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:BaseListViewProps": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "BaseListViewProps", - "nameFull": "BaseListViewProps" - }, - "src": "uui-core/src/types/dataSources.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "BaseListViewProps", - "print": [ - "// eslint-disable-next-line @typescript-eslint/no-unused-vars", - "interface BaseListViewProps {", - " /**", - " * Should return unique ID of the TItem", - " * If omitted, we assume that every TItem has and unique id in its 'id' field.", - " * @param item An item to get ID of", - " */", - " getId?(item: TItem): TId;", - " /**", - " * Set to true, if you use IDs which can't act as javascript Map key (objects or arrays).", - " * In this case, IDs will be internally JSON.stringify-ed to be used as Maps keys.", - " */", - " complexIds?: boolean;", - " /** Should return ID of the Item's parent. Usually it's i => i.parentId.", - " * If specified, Data Source will build items hierarchy.", - " *", - " * Also, it is used by LazyDataSource to pre-fetch missing parents of loaded items. This is required in following cases:", - " * - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain", - " * to highlight parents with selected children", - " * - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),", - " * We need to load parents with a separate call (if backend doesn't pre-fetch them)", - " */", - " getParentId?(item: TItem): TId | undefined;", - " /**", - " * Specifies if rows are selectable, checkable, draggable, clickable, and more.", - " * See DataRowOptions for more details.", - " * If options depends on the item itself, use getRowOptions.", - " * Specifying both rowOptions and getRowOptions might help to render better loading skeletons: we use only rowOptions in this case, as we haven't loaded an item yet.", - " * Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", - " * @param item An item to get options for", - " */", - " rowOptions?: DataRowOptions;", - " /**", - " * For each row, specify if row is selectable, editable, checkable, draggable, clickable, have its own set of columns, and more.", - " * To make rows editable, pass IEditable interface to each row. This works the same way as for other editable components.", - " * See DataRowOptions for more details.", - " * If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.", - " * Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", - " * @param item An item to get options for", - " */", - " getRowOptions?(item: TItem, index: number): DataRowOptions;", - " /**", - " * Can be specified to unfold all or some items at start.", - " * If not specified, all rows would be folded.", - " */", - " isFoldedByDefault?(item: TItem, state: DataSourceState): boolean;", - " /**", - " * Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.", - " * - false: All nodes are selected independently (default).", - " * - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.", - " * - 'implicit': Selecting a parent node means that all children are considered checked.", - " * The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked", - " * parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,", - " * its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last", - " * unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked.", - " */", - " cascadeSelection?: CascadeSelection;", - " /**", - " * Enables or disables \"select all\" checkbox. Default is true.", - " */", - " selectAll?: true | false;", - " /**", - " * Enables background reloading of data on search/sort/filter/reload, which turns off the rows placeholders displaying while data loading.", - " * During data reloading, previous data is displayed. To prevent any interaction with visible not actual rows, a blocker/spinner should be displayed.", - " * In UUI components, such as `PickerInput`, `PickerList`, `PickerModal` and `DataTable`, blockers are added.", - " * It is required to add blockers/spinners to the components, built on your own.", - " * If reloading is started, `view.getListProps` returns `isReloading` flag, set to `true`.", - " */", - " backgroundReload?: boolean;", - "}" - ] - }, - "props": [ - { - "uid": "getId", - "name": "getId", - "comment": { - "raw": [ - "Should return unique ID of the TItem", - " If omitted, we assume that every TItem has and unique id in its 'id' field.", - " @param item An item to get ID of" + "type": "oneOf", + "options": [ + false, + true, + "implicit", + "explicit" ] }, - "typeValue": { - "raw": "(item: TItem) => TId" - }, - "editor": { - "type": "func" - }, "required": false }, { - "uid": "complexIds", - "name": "complexIds", + "uid": "selectAll", + "name": "selectAll", "comment": { "raw": [ - "Set to true, if you use IDs which can't act as javascript Map key (objects or arrays).", - " In this case, IDs will be internally JSON.stringify-ed to be used as Maps keys." - ] + "Enables/disables selectAll functionality. If disabled explicitly, `selectAll`, returned from a view is null.", + " @default true" + ], + "tags": { + "@default": true + } }, "typeValue": { "raw": "boolean" @@ -3275,120 +3288,105 @@ "required": false }, { - "uid": "getParentId", - "name": "getParentId", + "uid": "showSelectedOnly", + "name": "showSelectedOnly", "comment": { "raw": [ - "Should return ID of the Item's parent. Usually it's i => i.parentId.", - " If specified, Data Source will build items hierarchy.", - "", - " Also, it is used by LazyDataSource to pre-fetch missing parents of loaded items. This is required in following cases:", - " - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain", - " to highlight parents with selected children", - " - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),", - " We need to load parents with a separate call (if backend doesn't pre-fetch them)" + "Enables returning only selected rows and loading missing selected/checked rows, if it is required/possible.", + " If enabled, `useView` returns only selected rows from `IDataSourceView.getVisibleRows`." ] }, "typeValue": { - "raw": "(item: TItem) => TId | undefined" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, "required": false }, { - "uid": "rowOptions", - "name": "rowOptions", + "uid": "patch", + "name": "patch", "comment": { "raw": [ - "Specifies if rows are selectable, checkable, draggable, clickable, and more.", - " See DataRowOptions for more details.", - " If options depends on the item itself, use getRowOptions.", - " Specifying both rowOptions and getRowOptions might help to render better loading skeletons: we use only rowOptions in this case, as we haven't loaded an item yet.", - " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", - " @param item An item to get options for" + "Items, which should be added/updated/deleted from the tree." ] }, "typeValue": { - "raw": "DataRowOptions" + "raw": "IMap | IImmutableMap" }, + "from": "@epam/uui-core:PatchOptions", "required": false }, { - "uid": "getRowOptions", - "name": "getRowOptions", + "uid": "isDeleted", + "name": "isDeleted", "comment": { "raw": [ - "For each row, specify if row is selectable, editable, checkable, draggable, clickable, have its own set of columns, and more.", - " To make rows editable, pass IEditable interface to each row. This works the same way as for other editable components.", - " See DataRowOptions for more details.", - " If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.", - " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", - " @param item An item to get options for" + "To enable deleting of the items, it is required to specify getter for deleted state." ] }, "typeValue": { - "raw": "(item: TItem, index: number) => DataRowOptions" + "raw": "(item: TItem) => boolean" }, "editor": { "type": "func" }, + "from": "@epam/uui-core:PatchOptions", "required": false }, { - "uid": "isFoldedByDefault", - "name": "isFoldedByDefault", + "uid": "getNewItemPosition", + "name": "getNewItemPosition", "comment": { "raw": [ - "Can be specified to unfold all or some items at start.", - " If not specified, all rows would be folded." + "Provides information about the relative position of the new item.", + " @param item - new item, position should be got for.", + " @returns relative position in the list of items.", + " @default PatchOrdering.TOP" ] }, "typeValue": { - "raw": "(item: TItem, state: DataSourceState) => boolean" + "raw": "(item: TItem) => symbol" }, "editor": { "type": "func" }, + "from": "@epam/uui-core:PatchOptions", "required": false }, { - "uid": "cascadeSelection", - "name": "cascadeSelection", + "uid": "getItemTemporaryOrder", + "name": "getItemTemporaryOrder", "comment": { "raw": [ - "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.", - " - false: All nodes are selected independently (default).", - " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.", - " - 'implicit': Selecting a parent node means that all children are considered checked.", - " The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked", - " parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,", - " its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last", - " unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked." + "Provides information about the temporary order of the new item.", + " @param item - new item, temporary order should be got for.", + " @returns temporary order", + "", + " @experimental The API of this feature can be changed in the future releases." ] }, "typeValue": { - "raw": "boolean | 'implicit' | 'explicit'" + "raw": "(item: TItem) => string" }, "editor": { - "type": "oneOf", - "options": [ - false, - true, - "implicit", - "explicit" - ] + "type": "func" }, + "from": "@epam/uui-core:PatchOptions", "required": false }, { - "uid": "selectAll", - "name": "selectAll", + "uid": "fixItemBetweenSortings", + "name": "fixItemBetweenSortings", "comment": { "raw": [ - "Enables or disables \"select all\" checkbox. Default is true." - ] + "If enabled, items position is fixed between sorting.", + " @default true" + ], + "tags": { + "@default": true + } }, "typeValue": { "raw": "boolean" @@ -3396,91 +3394,75 @@ "editor": { "type": "bool" }, + "from": "@epam/uui-core:PatchOptions", "required": false }, { - "uid": "backgroundReload", - "name": "backgroundReload", + "uid": "sortBy", + "name": "sortBy", "comment": { "raw": [ - "Enables background reloading of data on search/sort/filter/reload, which turns off the rows placeholders displaying while data loading.", - " During data reloading, previous data is displayed. To prevent any interaction with visible not actual rows, a blocker/spinner should be displayed.", - " In UUI components, such as `PickerInput`, `PickerList`, `PickerModal` and `DataTable`, blockers are added.", - " It is required to add blockers/spinners to the components, built on your own.", - " If reloading is started, `view.getListProps` returns `isReloading` flag, set to `true`." + "A pure function that gets sorting value for current sorting value" ] }, "typeValue": { - "raw": "boolean" + "raw": "(item: TItem, sorting: SortingOption) => any" }, "editor": { - "type": "bool" + "type": "func" }, + "from": "@epam/uui-core:SortConfig", "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:BaseRangeDatePickerProps": { + "@epam/uui-core:BaseDatePickerProps": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "BaseRangeDatePickerProps", - "nameFull": "BaseRangeDatePickerProps" + "name": "BaseDatePickerProps", + "nameFull": "BaseDatePickerProps" }, - "src": "uui-core/src/types/components/datePicker/BaseRangeDatePicker.ts", + "src": "uui-core/src/types/components/datePicker/BaseDatePicker.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "BaseRangeDatePickerProps", + "raw": "BaseDatePickerProps", "print": [ - "interface BaseRangeDatePickerProps extends IEditable, IDisableable, ICanBeReadonly, IAnalyticableOnChange, IHasForwardedRef {", + "interface BaseDatePickerProps extends IEditable, ICanFocus, IDisableable, IHasPlaceholder, ICanBeReadonly, IAnalyticableOnChange, IHasForwardedRef {", " /** Date format string, see [dayjs docs](@link https://day.js.org/docs/en/display/format) */", " format?: string;", " /** Filter selectable days. Days, for which this callback returns false - will be disabled */", " filter?(day: Dayjs): boolean;", - " /** Overrides rendering of picker Target - component which triggers dropdown. Can be used to attach RangeDatePicker to other components, e.g. Buttons */", + " /** Overrides rendering of picker Target - component which triggers dropdown. Can be used to attach DatePicker to other components, e.g. Buttons */", " renderTarget?(props: IDropdownToggler): ReactNode;", - " /** Allows to add a custom footer to the Picker's dropdown body */", - " renderFooter?(value: RangeDatePickerValue): ReactNode;", - " /** Overrides rendering of the single day. For example, to highlight certain days */", - " renderDay?: (day: Dayjs, onDayClick: (day: Dayjs) => void) => ReactElement;", - " /**", - " * Range presets (like 'this week', 'this month', etc.) to display at the right of the Picker's body.", - " * UUI provides defaults in the 'rangeDatePickerPresets' exported variable - you can use it as is, or build on top of it (e.g. add your presets)", - " */", - " presets?: RangeDatePickerPresets;", + " /** Defines where to place calendar icon */", + " iconPosition?: 'left' | 'right';", " /**", - " * Disables clearing component (with the cross icon)", + " * Disable clearing date value (e.g. via cross icon)", " * @default false", " */", " disableClear?: boolean;", - " /**", - " * Dropdown position relative to the input. See [Popper Docs](@link https://popper.js.org/)", - " * @default 'bottom-start'", - " */", - " placement?: Placement;", + " /** Overrides rendering of the single day. For example, to highlight certain days */", + " renderDay?: (day: Dayjs, onDayClick: (day: Dayjs) => void) => ReactElement;", " /** If this function returns true, the day will be highlighted as holiday */", " isHoliday?: (day: Dayjs) => boolean;", - " /** Called when component gets input focus */", - " onFocus?: (e: React.FocusEvent, inputType: 'from' | 'to') => void;", - " /** Called when component looses input focus */", - " onBlur?: (e: React.FocusEvent, inputType: 'from' | 'to') => void;", - " /** Called when component is opened/closed */", - " onOpenChange?: (isOpen: boolean) => void;", - " /** rawProps as HTML attributes */", + " /** Called when component lose focus */", + " onBlur?: (e?: React.FocusEvent) => void;", + " /** Dropdown position relative to the input. See [Popper Docs](@link https://popper.js.org/) */", + " placement?: Placement;", + " /** Any HTML attributes (native or 'data-') to put on date picker parts */", " rawProps?: {", - " /** Any HTML attributes (native or 'data-') to put on 'from' input */", - " from?: IHasRawProps>['rawProps'];", - " /** Any HTML attributes (native or 'data-') to put on 'to' input */", - " to?: IHasRawProps>['rawProps'];", + " /** Any HTML attributes (native or 'data-') to put on date picker input */", + " input?: IHasRawProps>['rawProps'];", " /** Any HTML attributes (native or 'data-') to put on date picker body */", " body?: IHasRawProps>['rawProps'];", " };", - " /** CSS class(es) to put on rangeDatePicker input */", + " /** CSS class(es) to put on datepicker input */", " inputCx?: CX;", " /** CSS class(es) to put on datepicker body */", " bodyCx?: CX;", @@ -3525,7 +3507,7 @@ "name": "renderTarget", "comment": { "raw": [ - "Overrides rendering of picker Target - component which triggers dropdown. Can be used to attach RangeDatePicker to other components, e.g. Buttons" + "Overrides rendering of picker Target - component which triggers dropdown. Can be used to attach DatePicker to other components, e.g. Buttons" ] }, "typeValue": { @@ -3537,49 +3519,23 @@ "required": false }, { - "uid": "renderFooter", - "name": "renderFooter", - "comment": { - "raw": [ - "Allows to add a custom footer to the Picker's dropdown body" - ] - }, - "typeValue": { - "raw": "(value: RangeDatePickerValue) => React.ReactNode" - }, - "editor": { - "type": "component" - }, - "required": false - }, - { - "uid": "renderDay", - "name": "renderDay", + "uid": "iconPosition", + "name": "iconPosition", "comment": { "raw": [ - "Overrides rendering of the single day. For example, to highlight certain days" + "Defines where to place calendar icon" ] }, "typeValue": { - "raw": "(day: Dayjs, onDayClick: (day: Dayjs) => void) => React.ReactElement>" + "raw": "'left' | 'right'" }, "editor": { - "type": "component" - }, - "required": false - }, - { - "uid": "presets", - "name": "presets", - "comment": { - "raw": [ - "Range presets (like 'this week', 'this month', etc.) to display at the right of the Picker's body.", - " UUI provides defaults in the 'rangeDatePickerPresets' exported variable - you can use it as is, or build on top of it (e.g. add your presets)" + "type": "oneOf", + "options": [ + "left", + "right" ] }, - "typeValue": { - "raw": "RangeDatePickerPresets" - }, "required": false }, { @@ -3587,7 +3543,7 @@ "name": "disableClear", "comment": { "raw": [ - "Disables clearing component (with the cross icon)", + "Disable clearing date value (e.g. via cross icon)", " @default false" ], "tags": { @@ -3603,39 +3559,18 @@ "required": false }, { - "uid": "placement", - "name": "placement", + "uid": "renderDay", + "name": "renderDay", "comment": { "raw": [ - "Dropdown position relative to the input. See [Popper Docs](@link https://popper.js.org/)", - " @default 'bottom-start'" - ], - "tags": { - "@default": "bottom-start" - } + "Overrides rendering of the single day. For example, to highlight certain days" + ] }, "typeValue": { - "raw": "'left' | 'right' | 'auto' | 'auto-start' | 'auto-end' | 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end'" + "raw": "(day: Dayjs, onDayClick: (day: Dayjs) => void) => React.ReactElement>" }, "editor": { - "type": "oneOf", - "options": [ - "left", - "right", - "auto", - "auto-start", - "auto-end", - "top", - "bottom", - "top-start", - "top-end", - "bottom-start", - "bottom-end", - "right-start", - "right-end", - "left-start", - "left-end" - ] + "type": "component" }, "required": false }, @@ -3655,32 +3590,16 @@ }, "required": false }, - { - "uid": "onFocus", - "name": "onFocus", - "comment": { - "raw": [ - "Called when component gets input focus" - ] - }, - "typeValue": { - "raw": "(e: React.FocusEvent, inputType: 'from' | 'to') => void" - }, - "editor": { - "type": "func" - }, - "required": false - }, { "uid": "onBlur", "name": "onBlur", "comment": { "raw": [ - "Called when component looses input focus" + "Called when component lose focus" ] }, "typeValue": { - "raw": "(e: React.FocusEvent, inputType: 'from' | 'to') => void" + "raw": "(e?: React.FocusEvent | undefined) => void" }, "editor": { "type": "func" @@ -3688,18 +3607,35 @@ "required": false }, { - "uid": "onOpenChange", - "name": "onOpenChange", + "uid": "placement", + "name": "placement", "comment": { "raw": [ - "Called when component is opened/closed" + "Dropdown position relative to the input. See [Popper Docs](@link https://popper.js.org/)" ] }, "typeValue": { - "raw": "(isOpen: boolean) => void" + "raw": "'left' | 'right' | 'auto' | 'auto-start' | 'auto-end' | 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end'" }, "editor": { - "type": "func" + "type": "oneOf", + "options": [ + "left", + "right", + "auto", + "auto-start", + "auto-end", + "top", + "bottom", + "top-start", + "top-end", + "bottom-start", + "bottom-end", + "right-start", + "right-end", + "left-start", + "left-end" + ] }, "required": false }, @@ -3708,11 +3644,11 @@ "name": "rawProps", "comment": { "raw": [ - "rawProps as HTML attributes" + "Any HTML attributes (native or 'data-') to put on date picker parts" ] }, "typeValue": { - "raw": "{ from?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; to?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; }" + "raw": "{ input?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; }" }, "required": false }, @@ -3721,7 +3657,7 @@ "name": "inputCx", "comment": { "raw": [ - "CSS class(es) to put on rangeDatePicker input" + "CSS class(es) to put on datepicker input" ] }, "typeValue": { @@ -3821,7 +3757,10 @@ ] }, "typeValue": { - "raw": "RangeDatePickerValue" + "raw": "null | string" + }, + "editor": { + "type": "string" }, "from": "@epam/uui-core:IControlled", "required": true @@ -3835,7 +3774,7 @@ ] }, "typeValue": { - "raw": "(newValue: RangeDatePickerValue) => void" + "raw": "(newValue: string | null) => void" }, "editor": { "type": "func" @@ -3844,166 +3783,119 @@ "required": true }, { - "uid": "getValueChangeAnalyticsEvent", - "name": "getValueChangeAnalyticsEvent", + "uid": "onFocus", + "name": "onFocus", "comment": { "raw": [ - "Given a value, returns an analytics event to send when component is edited.", - " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)." + "Called when component gets input focus" ] }, "typeValue": { - "raw": "(newValue: RangeDatePickerValue | null, oldValue: RangeDatePickerValue | null) => AnalyticsEvent" + "raw": "(e: React.FocusEvent) => void" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:IAnalyticableOnChange", + "from": "@epam/uui-core:ICanFocus", "required": false }, { - "uid": "forwardedRef", - "name": "forwardedRef", + "uid": "placeholder", + "name": "placeholder", "comment": { "raw": [ - "this ref is passed to the underlying component" + "Placeholder to display when empty" ] }, "typeValue": { - "raw": "null | (instance: HTMLElement | null) => void | React.MutableRefObject" + "raw": "any" }, - "from": "@epam/uui-core:IHasForwardedRef", + "from": "@epam/uui-core:IHasPlaceholder", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:BatchPromiseOptions": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "BatchPromiseOptions", - "nameFull": "BatchPromiseOptions" - }, - "src": "uui-core/src/helpers/batch.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "BatchPromiseOptions", - "print": [ - "interface BatchPromiseOptions {", - " /** Minimum time (in ms) to pass after the last call, before triggering the batch */", - " throttleMs?: number;", - "}" - ] - }, - "props": [ + }, { - "uid": "throttleMs", - "name": "throttleMs", + "uid": "getValueChangeAnalyticsEvent", + "name": "getValueChangeAnalyticsEvent", "comment": { "raw": [ - "Minimum time (in ms) to pass after the last call, before triggering the batch" + "Given a value, returns an analytics event to send when component is edited.", + " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)." ] }, "typeValue": { - "raw": "number" + "raw": "(newValue: string | null, oldValue: string | null) => AnalyticsEvent" }, "editor": { - "type": "number" + "type": "func" + }, + "from": "@epam/uui-core:IAnalyticableOnChange", + "required": false + }, + { + "uid": "forwardedRef", + "name": "forwardedRef", + "comment": { + "raw": [ + "this ref is passed to the underlying component" + ] + }, + "typeValue": { + "raw": "null | (instance: HTMLElement | null) => void | React.MutableRefObject" }, + "from": "@epam/uui-core:IHasForwardedRef", "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:BlockTypes": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "BlockTypes", - "nameFull": "BlockTypes" - }, - "src": "uui-core/src/services/ApiContext.ts", - "exported": true - }, - "details": { - "kind": 265, - "typeValue": { - "raw": "'attachment' | 'iframe' | 'image'", - "print": [ - "type BlockTypes = 'attachment' | 'iframe' | 'image';" - ] - } - } - }, - "@epam/uui-core:CascadeSelection": { + "@epam/uui-core:BaseListViewProps": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "CascadeSelection", - "nameFull": "CascadeSelection" + "name": "BaseListViewProps", + "nameFull": "BaseListViewProps" }, "src": "uui-core/src/types/dataSources.ts", "exported": true }, - "details": { - "kind": 265, - "typeValue": { - "raw": "boolean | 'implicit' | 'explicit'", - "print": [ - "type CascadeSelection = boolean | typeof CascadeSelectionTypes.EXPLICIT | typeof CascadeSelectionTypes.IMPLICIT;" - ] - } - } - }, - "@epam/uui-core:CheckboxCoreProps": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "CheckboxCoreProps", - "nameFull": "CheckboxCoreProps" - }, - "src": "uui-core/src/types/components/Checkbox.ts", - "exported": true - }, "details": { "kind": 264, "typeValue": { - "raw": "CheckboxCoreProps", + "raw": "BaseListViewProps", "print": [ - "interface CheckboxCoreProps extends ICheckable, ICanFocus, IHasCX, ICanBeInvalid, IHasLabel, ICanBeReadonly, IAnalyticableOnChange, IHasRawProps>, IHasForwardedRef {", + "interface BaseListViewProps extends BaseDataSourceConfig {", "}" ] }, "props": [ { - "uid": "isInvalid", - "name": "isInvalid", + "uid": "getId", + "name": "getId", "comment": { "raw": [ - "True if component contains invalid input" + "Should return unique ID of the TItem", + " If omitted, we assume that every TItem has and unique id in its 'id' field.", + " @param item - record, which id should be returned.", + " @returns item id." ] }, "typeValue": { - "raw": "boolean" + "raw": "(item: TItem) => TId" }, "editor": { - "type": "bool" + "type": "func" }, - "from": "@epam/uui-core:ICanBeInvalid", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "isDisabled", - "name": "isDisabled", + "uid": "complexIds", + "name": "complexIds", "comment": { "raw": [ - "Disable editing, and visually de-emphasize value of the component" + "Set to true, if you use IDs which can't act as javascript Map key (objects or arrays).", + " In this case, IDs will be internally JSON.stringify-ed to be used as Maps keys." ] }, "typeValue": { @@ -4012,1376 +3904,1503 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:IDisableable", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "isReadonly", - "name": "isReadonly", + "uid": "getParentId", + "name": "getParentId", "comment": { "raw": [ - "Disable editing. Unlike isDisabled, keep component's value readable." + "Should return ID of the Item's parent. Usually it's i => i.parentId.", + " If specified, Data Source will build items hierarchy.", + "", + " Also, it is used by LazyDataSource to pre-fetch missing parents of loaded items. This is required in following cases:", + " - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain", + " to highlight parents with selected children", + " - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),", + " We need to load parents with a separate call (if backend doesn't pre-fetch them)", + "", + " @param item - record, which paretnId should be returned.", + " @returns item parentId." ] }, "typeValue": { - "raw": "boolean" + "raw": "(item: TItem) => TId | undefined" }, "editor": { - "type": "bool" + "type": "func" }, - "from": "@epam/uui-core:ICanBeReadonly", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "isRequired", - "name": "isRequired", + "uid": "rowOptions", + "name": "rowOptions", "comment": { "raw": [ - "Marks that component's value is required and shouldn't be empty" + "Specifies if rows are selectable, checkable, draggable, clickable, and more.", + " See DataRowOptions for more details.", + " If options depends on the item itself, use getRowOptions.", + " Specifying both rowOptions and getRowOptions might help to render better loading skeletons: we use only rowOptions in this case, as we haven't loaded an item yet.", + " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", + " @param item An item to get options for" ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "DataRowOptions" }, - "from": "@epam/uui-core:ICanBeRequired", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "value", - "name": "value", + "uid": "getRowOptions", + "name": "getRowOptions", "comment": { "raw": [ - "The current value of component" + "For each row, specify if row is selectable, editable, checkable, draggable, clickable, have its own set of columns, and more.", + " To make rows editable, pass IEditable interface to each row. This works the same way as for other editable components.", + " See DataRowOptions for more details.", + " If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.", + " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", + " @param item - record, configuration should be returned for.", + " @param index - index of a row. It is optional and should not be expected, that it is provided on every call." ] }, "typeValue": { - "raw": "boolean" + "raw": "(item: TItem, index?: number | undefined) => DataRowOptions" }, "editor": { - "type": "bool" + "type": "func" }, - "from": "@epam/uui-core:IControlled", - "required": true + "from": "@epam/uui-core:BaseDataSourceConfig", + "required": false }, { - "uid": "onValueChange", - "name": "onValueChange", + "uid": "isFoldedByDefault", + "name": "isFoldedByDefault", "comment": { "raw": [ - "Called when value needs to be changed (usually due to user interaction)" + "Can be specified to unfold all or some items at start.", + " If not specified, all rows would be folded.", + " @param item - record, folding value should be returned for.", + " @param dataSourceState - dataSource state with current `foldAll` value. It provides the possibility to respect foldAll change, if `isFoldedByDefault` is implemented." ] }, "typeValue": { - "raw": "(newValue: boolean) => void" + "raw": "(item: TItem, state: DataSourceState) => boolean" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:IControlled", - "required": true + "from": "@epam/uui-core:BaseDataSourceConfig", + "required": false }, { - "uid": "indeterminate", - "name": "indeterminate", + "uid": "cascadeSelection", + "name": "cascadeSelection", "comment": { "raw": [ - "Sets checkbox in indeterminate state (neither checked or unchecked), which usually means that children elements has both values" + "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.", + " - false: All nodes are selected independently (default).", + " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.", + " - 'implicit': Selecting a parent node means that all children are considered checked.", + " The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked", + " parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,", + " its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last", + " unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked." ] }, "typeValue": { - "raw": "boolean" + "raw": "boolean | 'implicit' | 'explicit'" }, "editor": { - "type": "bool" + "type": "oneOf", + "options": [ + false, + true, + "implicit", + "explicit" + ] }, - "from": "@epam/uui-core:ICheckable", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "onFocus", - "name": "onFocus", + "uid": "selectAll", + "name": "selectAll", "comment": { "raw": [ - "Called when component gets input focus" - ] + "Enables/disables selectAll functionality. If disabled explicitly, `selectAll`, returned from a view is null.", + " @default true" + ], + "tags": { + "@default": true + } }, "typeValue": { - "raw": "(e: React.FocusEvent) => void" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "from": "@epam/uui-core:ICanFocus", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "onBlur", - "name": "onBlur", + "uid": "showSelectedOnly", + "name": "showSelectedOnly", "comment": { "raw": [ - "Called when component looses input focus" + "Enables returning only selected rows and loading missing selected/checked rows, if it is required/possible.", + " If enabled, `useView` returns only selected rows from `IDataSourceView.getVisibleRows`." ] }, "typeValue": { - "raw": "(e: React.FocusEvent) => void" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "from": "@epam/uui-core:ICanFocus", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "cx", - "name": "cx", + "uid": "patch", + "name": "patch", "comment": { "raw": [ - "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" + "Items, which should be added/updated/deleted from the tree." ] }, "typeValue": { - "raw": "null | string | number | boolean | ClassDictionary | ClassArray" + "raw": "IMap | IImmutableMap" }, - "typeValueRef": "@epam/uui-core:ClassValue", - "from": "@epam/uui-core:IHasCX", + "from": "@epam/uui-core:PatchOptions", "required": false }, { - "uid": "label", - "name": "label", + "uid": "isDeleted", + "name": "isDeleted", "comment": { "raw": [ - "Component label. Can be a string, or React.Element. Certain components supports minimal markup (,,) in labels." + "To enable deleting of the items, it is required to specify getter for deleted state." ] }, "typeValue": { - "raw": "React.ReactNode" + "raw": "(item: TItem) => boolean" }, - "typeValueRef": "@types/react:ReactNode", - "from": "@epam/uui-core:IHasLabel", + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:PatchOptions", "required": false }, { - "uid": "getValueChangeAnalyticsEvent", - "name": "getValueChangeAnalyticsEvent", + "uid": "getNewItemPosition", + "name": "getNewItemPosition", "comment": { "raw": [ - "Given a value, returns an analytics event to send when component is edited.", - " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)." + "Provides information about the relative position of the new item.", + " @param item - new item, position should be got for.", + " @returns relative position in the list of items.", + " @default PatchOrdering.TOP" ] }, "typeValue": { - "raw": "(newValue: boolean | null, oldValue: boolean | null) => AnalyticsEvent" + "raw": "(item: TItem) => symbol" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:IAnalyticableOnChange", + "from": "@epam/uui-core:PatchOptions", "required": false }, { - "uid": "rawProps", - "name": "rawProps", + "uid": "getItemTemporaryOrder", + "name": "getItemTemporaryOrder", "comment": { "raw": [ - "Any HTML attributes (native or 'data-') to put on the underlying component" + "Provides information about the temporary order of the new item.", + " @param item - new item, temporary order should be got for.", + " @returns temporary order", + "", + " @experimental The API of this feature can be changed in the future releases." ] }, "typeValue": { - "raw": "React.LabelHTMLAttributes & Record<`data-${string}`, string>" + "raw": "(item: TItem) => string" }, - "from": "@epam/uui-core:IHasRawProps", + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:PatchOptions", "required": false }, { - "uid": "forwardedRef", - "name": "forwardedRef", + "uid": "fixItemBetweenSortings", + "name": "fixItemBetweenSortings", "comment": { "raw": [ - "this ref is passed to the underlying component" - ] + "If enabled, items position is fixed between sorting.", + " @default true" + ], + "tags": { + "@default": true + } }, "typeValue": { - "raw": "null | (instance: HTMLLabelElement | null) => void | React.MutableRefObject" + "raw": "boolean" }, - "from": "@epam/uui-core:IHasForwardedRef", + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:PatchOptions", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:ClassValue": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "ClassValue", - "nameFull": "ClassValue" - }, - "src": "uui-core/src/helpers/cx.ts", - "exported": true - }, - "details": { - "kind": 265, - "typeValue": { - "raw": "undefined | null | string | number | boolean | ClassDictionary | ClassArray", - "print": [ - "/* The ClassValue type is a union type that represents the valid values that can be passed as arguments to the classnames function. It can be one of the following types:", - "- string: A string representing a class name.", - "- number: A number representing a class name. This is useful when using CSS modules.", - "- ClassDictionary: An object whose keys are class names and values are booleans. If the value is true, the corresponding class name will be included in the resulting string, otherwise it will be omitted.", - "- ClassArray: An array of values of type ClassValue. This allows you to pass multiple class names or class dictionaries as arguments to classnames.", - "- undefined: If undefined is passed as an argument, it will be ignored.", - "- null: If null is passed as an argument, it will be ignored.", - "- boolean: If a boolean value is passed as an argument, it will be ignored if it is false and included if it is true. */", - "type ClassValue = string | number | ClassDictionary | ClassArray | undefined | null | boolean;" - ] - } - } - }, - "@epam/uui-core:ColumnsConfig": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "ColumnsConfig", - "nameFull": "ColumnsConfig" - }, - "src": "uui-core/src/types/tables.ts", - "exported": true - }, - "details": { - "kind": 265, - "typeValue": { - "raw": "ColumnsConfig", - "print": [ - "type ColumnsConfig = {", - " /** Config for each column */", - " [key: string]: IColumnConfig;", - "};" - ] - }, - "props": [ + }, { - "uid": "[key: string]", - "name": "[key: string]", + "uid": "sortBy", + "name": "sortBy", "comment": { "raw": [ - "Config for each column" + "A pure function that gets sorting value for current sorting value" ] }, "typeValue": { - "raw": "IColumnConfig" + "raw": "(item: TItem, sorting: SortingOption) => any" }, - "required": true + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:SortConfig", + "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:CommonContexts": { + "@epam/uui-core:BaseRangeDatePickerProps": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "CommonContexts", - "nameFull": "CommonContexts" + "name": "BaseRangeDatePickerProps", + "nameFull": "BaseRangeDatePickerProps" }, - "src": "uui-core/src/types/contexts.ts", + "src": "uui-core/src/types/components/datePicker/BaseRangeDatePicker.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "CommonContexts", + "raw": "BaseRangeDatePickerProps", "print": [ - "interface CommonContexts extends UuiContexts {", - " /** Api definitions */", - " api: TApi & ApiExtensions;", - " /** App context, any app global settings. */", - " uuiApp: TAppContext;", - " /** React router history instance */", - " history?: IHistory4;", + "interface BaseRangeDatePickerProps extends IEditable, IDisableable, ICanBeReadonly, IAnalyticableOnChange, IHasForwardedRef {", + " /** Date format string, see [dayjs docs](@link https://day.js.org/docs/en/display/format) */", + " format?: string;", + " /** Filter selectable days. Days, for which this callback returns false - will be disabled */", + " filter?(day: Dayjs): boolean;", + " /** Overrides rendering of picker Target - component which triggers dropdown. Can be used to attach RangeDatePicker to other components, e.g. Buttons */", + " renderTarget?(props: IDropdownToggler): ReactNode;", + " /** Allows to add a custom footer to the Picker's dropdown body */", + " renderFooter?(value: RangeDatePickerValue): ReactNode;", + " /** Overrides rendering of the single day. For example, to highlight certain days */", + " renderDay?: (day: Dayjs, onDayClick: (day: Dayjs) => void) => ReactElement;", + " /**", + " * Range presets (like 'this week', 'this month', etc.) to display at the right of the Picker's body.", + " * UUI provides defaults in the 'rangeDatePickerPresets' exported variable - you can use it as is, or build on top of it (e.g. add your presets)", + " */", + " presets?: RangeDatePickerPresets;", + " /**", + " * Disables clearing component (with the cross icon)", + " * @default false", + " */", + " disableClear?: boolean;", + " /**", + " * Dropdown position relative to the input. See [Popper Docs](@link https://popper.js.org/)", + " * @default 'bottom-start'", + " */", + " placement?: Placement;", + " /** If this function returns true, the day will be highlighted as holiday */", + " isHoliday?: (day: Dayjs) => boolean;", + " /** Called when component gets input focus */", + " onFocus?: (e: React.FocusEvent, inputType: 'from' | 'to') => void;", + " /** Called when component looses input focus */", + " onBlur?: (e: React.FocusEvent, inputType: 'from' | 'to') => void;", + " /** Called when component is opened/closed */", + " onOpenChange?: (isOpen: boolean) => void;", + " /** rawProps as HTML attributes */", + " rawProps?: {", + " /** Any HTML attributes (native or 'data-') to put on 'from' input */", + " from?: IHasRawProps>['rawProps'];", + " /** Any HTML attributes (native or 'data-') to put on 'to' input */", + " to?: IHasRawProps>['rawProps'];", + " /** Any HTML attributes (native or 'data-') to put on date picker body */", + " body?: IHasRawProps>['rawProps'];", + " };", + " /** CSS class(es) to put on rangeDatePicker input */", + " inputCx?: CX;", + " /** CSS class(es) to put on datepicker body */", + " bodyCx?: CX;", "}" ] }, "props": [ { - "uid": "api", - "name": "api", + "uid": "format", + "name": "format", "comment": { "raw": [ - "Api definitions" + "Date format string, see [dayjs docs](@link https://day.js.org/docs/en/display/format)" ] }, "typeValue": { - "raw": "TApi & ApiExtensions" + "raw": "string" }, - "required": true + "editor": { + "type": "string" + }, + "required": false }, { - "uid": "uuiApp", - "name": "uuiApp", + "uid": "filter", + "name": "filter", "comment": { "raw": [ - "App context, any app global settings." + "Filter selectable days. Days, for which this callback returns false - will be disabled" ] }, "typeValue": { - "raw": "TAppContext" + "raw": "(day: Dayjs) => boolean" }, - "required": true + "editor": { + "type": "func" + }, + "required": false }, { - "uid": "history", - "name": "history", + "uid": "renderTarget", + "name": "renderTarget", "comment": { "raw": [ - "React router history instance" + "Overrides rendering of picker Target - component which triggers dropdown. Can be used to attach RangeDatePicker to other components, e.g. Buttons" ] }, "typeValue": { - "raw": "IHistory4" + "raw": "(props: IDropdownToggler) => React.ReactNode" + }, + "editor": { + "type": "component" }, "required": false }, { - "uid": "uuiApi", - "name": "uuiApi", + "uid": "renderFooter", + "name": "renderFooter", "comment": { "raw": [ - "Api service allows you to process requests with an error handling.", - " See more here - https://uui.epam.com/documents?id=apiContext&category=contexts" + "Allows to add a custom footer to the Picker's dropdown body" ] }, "typeValue": { - "raw": "IApiContext" + "raw": "(value: RangeDatePickerValue) => React.ReactNode" }, - "from": "@epam/uui-core:UuiContexts", - "required": true + "editor": { + "type": "component" + }, + "required": false }, { - "uid": "uuiRouter", - "name": "uuiRouter", + "uid": "renderDay", + "name": "renderDay", "comment": { "raw": [ - "Instance of react-router wrapped by UUI adapter" + "Overrides rendering of the single day. For example, to highlight certain days" ] }, "typeValue": { - "raw": "IRouterContext" + "raw": "(day: Dayjs, onDayClick: (day: Dayjs) => void) => React.ReactElement>" }, - "from": "@epam/uui-core:UuiContexts", - "required": true + "editor": { + "type": "component" + }, + "required": false }, { - "uid": "uuiModals", - "name": "uuiModals", + "uid": "presets", + "name": "presets", "comment": { "raw": [ - "Modals service allows you to show modal windows over the main content.", - " See more here - https://uui.epam.com/documents?id=modalContext&category=contexts" + "Range presets (like 'this week', 'this month', etc.) to display at the right of the Picker's body.", + " UUI provides defaults in the 'rangeDatePickerPresets' exported variable - you can use it as is, or build on top of it (e.g. add your presets)" ] }, "typeValue": { - "raw": "IModalContext" + "raw": "RangeDatePickerPresets" }, - "from": "@epam/uui-core:UuiContexts", - "required": true + "required": false }, { - "uid": "uuiDnD", - "name": "uuiDnD", + "uid": "disableClear", + "name": "disableClear", "comment": { "raw": [ - "Drag and Drop service for dnd operations.", - " See more here - https://uui.epam.com/documents?id=dragAndDrop" - ] - }, - "typeValue": { - "raw": "IDndContext" + "Disables clearing component (with the cross icon)", + " @default false" + ], + "tags": { + "@default": false + } }, - "from": "@epam/uui-core:UuiContexts", - "required": true + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "required": false }, { - "uid": "uuiUserSettings", - "name": "uuiUserSettings", + "uid": "placement", + "name": "placement", "comment": { "raw": [ - "UserSettings service allows you to store user data in localStorage." - ] + "Dropdown position relative to the input. See [Popper Docs](@link https://popper.js.org/)", + " @default 'bottom-start'" + ], + "tags": { + "@default": "bottom-start" + } }, "typeValue": { - "raw": "IUserSettingsContext" + "raw": "'left' | 'right' | 'auto' | 'auto-start' | 'auto-end' | 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end'" }, - "from": "@epam/uui-core:UuiContexts", - "required": true + "editor": { + "type": "oneOf", + "options": [ + "left", + "right", + "auto", + "auto-start", + "auto-end", + "top", + "bottom", + "top-start", + "top-end", + "bottom-start", + "bottom-end", + "right-start", + "right-end", + "left-start", + "left-end" + ] + }, + "required": false }, { - "uid": "uuiAnalytics", - "name": "uuiAnalytics", + "uid": "isHoliday", + "name": "isHoliday", "comment": { "raw": [ - "Web analytics service allows you to send user interaction events to the analytics systems.", - " See more here - https://uui.epam.com/documents?id=analyticsContext&category=contexts" + "If this function returns true, the day will be highlighted as holiday" ] }, "typeValue": { - "raw": "IAnalyticsContext" + "raw": "(day: Dayjs) => boolean" }, - "from": "@epam/uui-core:UuiContexts", - "required": true + "editor": { + "type": "func" + }, + "required": false }, { - "uid": "uuiErrors", - "name": "uuiErrors", + "uid": "onFocus", + "name": "onFocus", "comment": { "raw": [ - "Error service allows you to report errors.", - " See more here - https://uui.epam.com/documents?id=apiContext&category=contexts" + "Called when component gets input focus" ] }, "typeValue": { - "raw": "IErrorContext" + "raw": "(e: React.FocusEvent, inputType: 'from' | 'to') => void" }, - "from": "@epam/uui-core:UuiContexts", - "required": true + "editor": { + "type": "func" + }, + "required": false }, { - "uid": "uuiNotifications", - "name": "uuiNotifications", + "uid": "onBlur", + "name": "onBlur", "comment": { "raw": [ - "Notifications service allows you to show notifications over the main content.", - " See more here - https://uui.epam.com/documents?id=notificationContextDoc&category=contexts" + "Called when component looses input focus" ] }, "typeValue": { - "raw": "INotificationContext" + "raw": "(e: React.FocusEvent, inputType: 'from' | 'to') => void" }, - "from": "@epam/uui-core:UuiContexts", - "required": true + "editor": { + "type": "func" + }, + "required": false }, { - "uid": "uuiLayout", - "name": "uuiLayout", + "uid": "onOpenChange", + "name": "onOpenChange", "comment": { "raw": [ - "Layout service. Used to manage layout for overlays like modals, dropdowns, etc." + "Called when component is opened/closed" ] }, "typeValue": { - "raw": "ILayoutContext" + "raw": "(isOpen: boolean) => void" }, - "from": "@epam/uui-core:UuiContexts", - "required": true + "editor": { + "type": "func" + }, + "required": false }, { - "uid": "uuiLocks", - "name": "uuiLocks", + "uid": "rawProps", + "name": "rawProps", "comment": { "raw": [ - "Lock service.", - " See more here - https://uui.epam.com/documents?id=lockContextDoc&category=contexts" + "rawProps as HTML attributes" ] }, "typeValue": { - "raw": "ILockContext" + "raw": "{ from?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; to?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; }" }, - "from": "@epam/uui-core:UuiContexts", - "required": true - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:ContextProviderProps": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "ContextProviderProps", - "nameFull": "ContextProviderProps" - }, - "src": "uui-core/src/services/ContextProvider.tsx", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "ContextProviderProps", - "print": [ - "interface ContextProviderProps extends UuiServicesProps, IHasChildren {", - " /** Callback to load the AppContext data. AppContext is used to load global data, before application mount */", - " loadAppContext?: (api: TApi) => Promise;", - " /** Called when all contexts were initiated */", - " onInitCompleted(svc: CommonContexts): void;", - " /** Instance of react-router history.", - " * Note, that it should be the same object which you passed to the Router.", - " * */", - " history?: IHistory4;", - " /** Code of Google Analytics.", - " * If provided, user interactions events will be sent to your GA.", - " * */", - " gaCode?: string;", - "}" - ] - }, - "props": [ + "required": false + }, { - "uid": "loadAppContext", - "name": "loadAppContext", + "uid": "inputCx", + "name": "inputCx", "comment": { "raw": [ - "Callback to load the AppContext data. AppContext is used to load global data, before application mount" + "CSS class(es) to put on rangeDatePicker input" ] }, "typeValue": { - "raw": "(api: TApi) => Promise" - }, - "editor": { - "type": "func" + "raw": "null | string | number | boolean | ClassDictionary | ClassArray" }, + "typeValueRef": "@epam/uui-core:ClassValue", "required": false }, { - "uid": "onInitCompleted", - "name": "onInitCompleted", + "uid": "bodyCx", + "name": "bodyCx", "comment": { "raw": [ - "Called when all contexts were initiated" + "CSS class(es) to put on datepicker body" ] }, "typeValue": { - "raw": "(svc: CommonContexts) => void" - }, - "editor": { - "type": "func" + "raw": "null | string | number | boolean | ClassDictionary | ClassArray" }, - "required": true + "typeValueRef": "@epam/uui-core:ClassValue", + "required": false }, { - "uid": "history", - "name": "history", + "uid": "isInvalid", + "name": "isInvalid", "comment": { "raw": [ - "Instance of react-router history.", - " Note, that it should be the same object which you passed to the Router." + "True if component contains invalid input" ] }, "typeValue": { - "raw": "IHistory4" + "raw": "boolean" }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:ICanBeInvalid", "required": false }, { - "uid": "gaCode", - "name": "gaCode", + "uid": "isDisabled", + "name": "isDisabled", "comment": { "raw": [ - "Code of Google Analytics.", - " If provided, user interactions events will be sent to your GA." + "Disable editing, and visually de-emphasize value of the component" ] }, "typeValue": { - "raw": "string" + "raw": "boolean" }, "editor": { - "type": "string" + "type": "bool" }, + "from": "@epam/uui-core:IDisableable", "required": false }, { - "uid": "apiDefinition", - "name": "apiDefinition", + "uid": "isReadonly", + "name": "isReadonly", "comment": { "raw": [ - "Function to get the api definitions.", - " Usually, api definitions this is an object which contain object with all api requests of the app.", - " Then you can call this requests via 'uuiContext.api.myApi(myData)'" + "Disable editing. Unlike isDisabled, keep component's value readable." ] }, "typeValue": { - "raw": "(processRequest: IProcessRequest) => TApi" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "from": "@epam/uui-core:UuiServicesProps", + "from": "@epam/uui-core:ICanBeReadonly", "required": false }, { - "uid": "apiReloginPath", - "name": "apiReloginPath", + "uid": "isRequired", + "name": "isRequired", "comment": { "raw": [ - "Url to the relogin page. Used to open new browser window by this path, in case of auth lost error.", - " Opened by this path page, should process authentication and then post 'authSuccess' cross-window message to the opener, to recover failed requests.", - " @default '/auth/login'" - ], - "tags": { - "@default": "/auth/login" - } + "Marks that component's value is required and shouldn't be empty" + ] }, "typeValue": { - "raw": "string" + "raw": "boolean" }, "editor": { - "type": "string" + "type": "bool" }, - "from": "@epam/uui-core:ApiContextProps", + "from": "@epam/uui-core:ICanBeRequired", "required": false }, { - "uid": "apiPingPath", - "name": "apiPingPath", + "uid": "value", + "name": "value", "comment": { "raw": [ - "Url to the api, which ApiContext will start pinging in case of 'connection lost', until it gets 200 status. Then it will retry failed requests.", - " @default '/auth/ping'" - ], - "tags": { - "@default": "/auth/ping" - } + "The current value of component" + ] }, "typeValue": { - "raw": "string" - }, - "editor": { - "type": "string" + "raw": "RangeDatePickerValue" }, - "from": "@epam/uui-core:ApiContextProps", - "required": false + "from": "@epam/uui-core:IControlled", + "required": true }, { - "uid": "apiServerUrl", - "name": "apiServerUrl", + "uid": "onValueChange", + "name": "onValueChange", "comment": { "raw": [ - "Url to the server api under which all requests will be processed. Usefully for cases, when all api located by some specific url, which is not much app url.", - " @default ''" - ], - "tags": { - "@default": "" - } + "Called when value needs to be changed (usually due to user interaction)" + ] }, "typeValue": { - "raw": "string" + "raw": "(newValue: RangeDatePickerValue) => void" }, "editor": { - "type": "string" + "type": "func" }, - "from": "@epam/uui-core:ApiContextProps", - "required": false + "from": "@epam/uui-core:IControlled", + "required": true }, { - "uid": "fetch", - "name": "fetch", + "uid": "getValueChangeAnalyticsEvent", + "name": "getValueChangeAnalyticsEvent", "comment": { "raw": [ - "Allows to replace fetch implementation, for adding auth headers, mocking for testing, etc.", - " By default, standard fetch will be used." + "Given a value, returns an analytics event to send when component is edited.", + " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)." ] }, "typeValue": { - "raw": "typeof fetch" + "raw": "(newValue: RangeDatePickerValue | null, oldValue: RangeDatePickerValue | null) => AnalyticsEvent" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:ApiContextProps", + "from": "@epam/uui-core:IAnalyticableOnChange", "required": false }, { - "uid": "children", - "name": "children", + "uid": "forwardedRef", + "name": "forwardedRef", "comment": { "raw": [ - "Component children" + "this ref is passed to the underlying component" ] }, "typeValue": { - "raw": "React.ReactNode" + "raw": "null | (instance: HTMLElement | null) => void | React.MutableRefObject" }, - "typeValueRef": "@types/react:ReactNode", - "from": "@epam/uui-core:IHasChildren", + "from": "@epam/uui-core:IHasForwardedRef", "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:CX": { + "@epam/uui-core:BatchPromiseOptions": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "CX", - "nameFull": "CX" + "name": "BatchPromiseOptions", + "nameFull": "BatchPromiseOptions" }, - "src": "uui-core/src/types/objects.ts", + "src": "uui-core/src/helpers/batch.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "BatchPromiseOptions", + "print": [ + "interface BatchPromiseOptions {", + " /** Minimum time (in ms) to pass after the last call, before triggering the batch */", + " throttleMs?: number;", + "}" + ] + }, + "props": [ + { + "uid": "throttleMs", + "name": "throttleMs", + "comment": { + "raw": [ + "Minimum time (in ms) to pass after the last call, before triggering the batch" + ] + }, + "typeValue": { + "raw": "number" + }, + "editor": { + "type": "number" + }, + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:BlockTypes": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "BlockTypes", + "nameFull": "BlockTypes" + }, + "src": "uui-core/src/services/ApiContext.ts", "exported": true }, "details": { "kind": 265, "typeValue": { - "raw": "undefined | null | string | number | boolean | ClassDictionary | ClassArray", + "raw": "'attachment' | 'iframe' | 'image'", "print": [ - "// CX type is a union type that represents the valid values to pass CSS classes", - "type CX = ClassValue;" + "type BlockTypes = 'attachment' | 'iframe' | 'image';" ] } } }, - "@epam/uui-core:DataColumnProps": { + "@epam/uui-core:CascadeSelection": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "DataColumnProps", - "nameFull": "DataColumnProps" + "name": "CascadeSelection", + "nameFull": "CascadeSelection" + }, + "src": "uui-core/src/types/dataSources.ts", + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "boolean | 'implicit' | 'explicit'", + "print": [ + "type CascadeSelection = boolean | typeof CascadeSelectionTypes.EXPLICIT | typeof CascadeSelectionTypes.IMPLICIT;" + ] + } + } + }, + "@epam/uui-core:CascadeSelectionService": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "CascadeSelectionService", + "nameFull": "CascadeSelectionService" + }, + "src": "uui-core/src/data/processing/views/dataRows/services/useCascadeSelectionService.ts", + "comment": { + "raw": [ + "A service which provides cascade selection functionality with loading missing records." + ] }, - "src": "uui-core/src/types/tables.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "DataColumnProps", + "raw": "CascadeSelectionService", "print": [ - "interface DataColumnProps extends ICanBeFixed, IHasCX, IClickable, IHasRawProps, Attributes {", - " /**", - " * Unique key to identify the column. Used to reference columns, e.g. in ColumnsConfig.", - " * Also, used as React key for cells, header cells, and other components inside tables.", - " */", - " key: string;", - " /** Column caption. Can be a plain text, or any React Component */", - " caption?: React.ReactNode;", - " /**", - " * The width of the column. Usually, columns has exact this width.", - " * When all columns fit, and there's spare horizontal space, you can use 'grow' prop to use this space for certain columns.", - " * DataTable's columns can't shrink below width - table will add horizontal scrolling instead of shrinking columns", - " */", - " width: number;", - " /** Minimal width to which column can be resized manually */", - " minWidth?: number;", - " /** The flex grow for the column. Allows column to grow in width if there's spare horizontal space */", - " grow?: number;", - " /** Aligns cell and header content horizontally */", - " textAlign?: 'left' | 'center' | 'right';", - " /** Aligns only cell content horizontally */", - " justifyContent?: CSS.JustifyContentProperty;", - " /** Align cell content vertically */", - " alignSelf?: CSS.AlignSelfProperty;", - " /**", - " * Enables sorting arrows on the column.", - " * Sorting state is kept in DataSourceState.sorting", - " */", - " isSortable?: boolean;", - " /** Disallows to hide column via ColumnsConfiguration */", - " isAlwaysVisible?: boolean;", - " /** Makes column hidden by default. User can turn it on later, via ColumnsConfiguration */", - " isHiddenByDefault?: boolean;", - " /** Info tooltip displayed in the table header */", - " info?: React.ReactNode;", - " /**", - " * Should return true, if current filter affects the column.", - " * Usually, this prop is filled automatically by the useTableState hook.", - " * If you use the useTableState hook, you don't need to specify it manually.", - " */", - " isFilterActive?: (filter: TFilter, column: DataColumnProps) => boolean;", - " /** A pure function that defines that column value can be copied to the other column. */", - " canCopy?: (cell: DataTableSelectedCellData) => boolean;", - " /** A pure function that defines that column accepts copying other column value into it */", - " canAcceptCopy?: (from: DataTableSelectedCellData, to: DataTableSelectedCellData) => boolean;", - " /** Pass true, to enable column resizing. By default, will be used global 'allowColumnsResizing' value from DataTable component. */", - " allowResizing?: boolean;", - " /** Render the cell content. The item props is the value of the whole row (TItem). */", - " render?(item: TItem, props: DataRowProps): any;", - " /** Overrides rendering of the whole cell */", - " renderCell?(cellProps: RenderCellProps): any;", - " /**", - " * Render callback for column header dropdown.", - " * Usually, this prop is filled automatically by the useTableState hook.", - " * If you use the useTableState hook, you don't need to specify it manually.", - " */", - " renderDropdown?(): React.ReactNode;", + "/**", + " * A service which provides cascade selection functionality with loading missing records.", + " */", + "interface CascadeSelectionService {", " /**", - " * Render callback for column filter.", - " * If you use useTableState hook, and you specify filter for the column, default filter will be rendered automatically.", - " * You can use this prop to render a custom filter component.", - " */", - " renderFilter?(lens: ILens, dropdownProps: IDropdownBodyProps): React.ReactNode;", - " /** Render callback for column header tooltip.", - " * This tooltip will appear on cell hover with 600ms delay.", - " *", - " * If omitted, default implementation with column.caption + column.info will be rendered.", - " * Pass `() => null` to disable tooltip rendering.", + " * Provides a cascade selection functionality.", + " * @param isChecked - checking state of the item.", + " * @param checkedId - ID of the item to be checked. If `undefined` - root is checked.", + " * @param isRoot - marks if cascade selection should be performed on all the items.", + " * @param checked - current state of checked items.", + " * @returns new checked items.", " */", - " renderTooltip?(column: DataColumnProps): React.ReactNode;", + " handleCascadeSelection: (isChecked: boolean, checkedId?: TId, isRoot?: boolean, checked?: TId[]) => Promise;", "}" ] }, "props": [ { - "uid": "key", - "name": "key", + "uid": "handleCascadeSelection", + "name": "handleCascadeSelection", "comment": { "raw": [ - "Unique key to identify the column. Used to reference columns, e.g. in ColumnsConfig.", - " Also, used as React key for cells, header cells, and other components inside tables." + "Provides a cascade selection functionality.", + " @param isChecked - checking state of the item.", + " @param checkedId - ID of the item to be checked. If `undefined` - root is checked.", + " @param isRoot - marks if cascade selection should be performed on all the items.", + " @param checked - current state of checked items.", + " @returns new checked items." ] }, "typeValue": { - "raw": "string" + "raw": "(isChecked: boolean, checkedId?: TId | undefined, isRoot?: boolean | undefined, checked?: TId[] | undefined) => Promise" }, "editor": { - "type": "string" + "type": "func" }, "required": true - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:CheckboxCoreProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "CheckboxCoreProps", + "nameFull": "CheckboxCoreProps" + }, + "src": "uui-core/src/types/components/Checkbox.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "CheckboxCoreProps", + "print": [ + "interface CheckboxCoreProps extends ICheckable, ICanFocus, IHasCX, ICanBeInvalid, IHasLabel, ICanBeReadonly, IAnalyticableOnChange, IHasRawProps>, IHasForwardedRef {", + "}" + ] + }, + "props": [ { - "uid": "caption", - "name": "caption", + "uid": "isInvalid", + "name": "isInvalid", "comment": { "raw": [ - "Column caption. Can be a plain text, or any React Component" + "True if component contains invalid input" ] }, "typeValue": { - "raw": "React.ReactNode" + "raw": "boolean" }, - "typeValueRef": "@types/react:ReactNode", + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:ICanBeInvalid", "required": false }, { - "uid": "width", - "name": "width", - "comment": { + "uid": "isDisabled", + "name": "isDisabled", + "comment": { "raw": [ - "The width of the column. Usually, columns has exact this width.", - " When all columns fit, and there's spare horizontal space, you can use 'grow' prop to use this space for certain columns.", - " DataTable's columns can't shrink below width - table will add horizontal scrolling instead of shrinking columns" + "Disable editing, and visually de-emphasize value of the component" ] }, "typeValue": { - "raw": "number" + "raw": "boolean" }, "editor": { - "type": "number" + "type": "bool" }, - "required": true + "from": "@epam/uui-core:IDisableable", + "required": false }, { - "uid": "minWidth", - "name": "minWidth", + "uid": "isReadonly", + "name": "isReadonly", "comment": { "raw": [ - "Minimal width to which column can be resized manually" + "Disable editing. Unlike isDisabled, keep component's value readable." ] }, "typeValue": { - "raw": "number" + "raw": "boolean" }, "editor": { - "type": "number" + "type": "bool" }, + "from": "@epam/uui-core:ICanBeReadonly", "required": false }, { - "uid": "grow", - "name": "grow", + "uid": "isRequired", + "name": "isRequired", "comment": { "raw": [ - "The flex grow for the column. Allows column to grow in width if there's spare horizontal space" + "Marks that component's value is required and shouldn't be empty" ] }, "typeValue": { - "raw": "number" + "raw": "boolean" }, "editor": { - "type": "number" + "type": "bool" }, + "from": "@epam/uui-core:ICanBeRequired", "required": false }, { - "uid": "textAlign", - "name": "textAlign", + "uid": "value", + "name": "value", "comment": { "raw": [ - "Aligns cell and header content horizontally" + "The current value of component" ] }, "typeValue": { - "raw": "'left' | 'right' | 'center'" + "raw": "boolean" }, "editor": { - "type": "oneOf", - "options": [ - "left", - "right", - "center" - ] + "type": "bool" }, - "required": false + "from": "@epam/uui-core:IControlled", + "required": true }, { - "uid": "justifyContent", - "name": "justifyContent", + "uid": "onValueChange", + "name": "onValueChange", "comment": { "raw": [ - "Aligns only cell content horizontally" + "Called when value needs to be changed (usually due to user interaction)" ] }, "typeValue": { - "raw": "string" + "raw": "(newValue: boolean) => void" }, "editor": { - "type": "string" + "type": "func" }, - "required": false + "from": "@epam/uui-core:IControlled", + "required": true }, { - "uid": "alignSelf", - "name": "alignSelf", + "uid": "indeterminate", + "name": "indeterminate", "comment": { "raw": [ - "Align cell content vertically" + "Sets checkbox in indeterminate state (neither checked or unchecked), which usually means that children elements has both values" ] }, "typeValue": { - "raw": "string" + "raw": "boolean" }, "editor": { - "type": "string" + "type": "bool" }, + "from": "@epam/uui-core:ICheckable", "required": false }, { - "uid": "isSortable", - "name": "isSortable", + "uid": "onFocus", + "name": "onFocus", "comment": { "raw": [ - "Enables sorting arrows on the column.", - " Sorting state is kept in DataSourceState.sorting" + "Called when component gets input focus" ] }, "typeValue": { - "raw": "boolean" + "raw": "(e: React.FocusEvent) => void" }, "editor": { - "type": "bool" + "type": "func" }, + "from": "@epam/uui-core:ICanFocus", "required": false }, { - "uid": "isAlwaysVisible", - "name": "isAlwaysVisible", + "uid": "onBlur", + "name": "onBlur", "comment": { "raw": [ - "Disallows to hide column via ColumnsConfiguration" + "Called when component looses input focus" ] }, "typeValue": { - "raw": "boolean" + "raw": "(e: React.FocusEvent) => void" }, "editor": { - "type": "bool" + "type": "func" }, + "from": "@epam/uui-core:ICanFocus", "required": false }, { - "uid": "isHiddenByDefault", - "name": "isHiddenByDefault", + "uid": "cx", + "name": "cx", "comment": { "raw": [ - "Makes column hidden by default. User can turn it on later, via ColumnsConfiguration" + "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "null | string | number | boolean | ClassDictionary | ClassArray" }, + "typeValueRef": "@epam/uui-core:ClassValue", + "from": "@epam/uui-core:IHasCX", "required": false }, { - "uid": "info", - "name": "info", + "uid": "label", + "name": "label", "comment": { "raw": [ - "Info tooltip displayed in the table header" + "Component label. Can be a string, or React.Element. Certain components supports minimal markup (,,) in labels." ] }, "typeValue": { "raw": "React.ReactNode" }, "typeValueRef": "@types/react:ReactNode", + "from": "@epam/uui-core:IHasLabel", "required": false }, { - "uid": "isFilterActive", - "name": "isFilterActive", + "uid": "getValueChangeAnalyticsEvent", + "name": "getValueChangeAnalyticsEvent", "comment": { "raw": [ - "Should return true, if current filter affects the column.", - " Usually, this prop is filled automatically by the useTableState hook.", - " If you use the useTableState hook, you don't need to specify it manually." + "Given a value, returns an analytics event to send when component is edited.", + " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)." ] }, "typeValue": { - "raw": "(filter: TFilter, column: DataColumnProps) => boolean" + "raw": "(newValue: boolean | null, oldValue: boolean | null) => AnalyticsEvent" }, "editor": { "type": "func" }, + "from": "@epam/uui-core:IAnalyticableOnChange", "required": false }, { - "uid": "canCopy", - "name": "canCopy", + "uid": "rawProps", + "name": "rawProps", "comment": { "raw": [ - "A pure function that defines that column value can be copied to the other column." + "Any HTML attributes (native or 'data-') to put on the underlying component" ] }, "typeValue": { - "raw": "(cell: DataTableSelectedCellData) => boolean" - }, - "editor": { - "type": "func" + "raw": "React.LabelHTMLAttributes & Record<`data-${string}`, string>" }, + "from": "@epam/uui-core:IHasRawProps", "required": false }, { - "uid": "canAcceptCopy", - "name": "canAcceptCopy", + "uid": "forwardedRef", + "name": "forwardedRef", "comment": { "raw": [ - "A pure function that defines that column accepts copying other column value into it" + "this ref is passed to the underlying component" ] }, "typeValue": { - "raw": "(from: DataTableSelectedCellData, to: DataTableSelectedCellData) => boolean" - }, - "editor": { - "type": "func" + "raw": "null | (instance: HTMLLabelElement | null) => void | React.MutableRefObject" }, + "from": "@epam/uui-core:IHasForwardedRef", "required": false - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:ClassValue": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "ClassValue", + "nameFull": "ClassValue" + }, + "src": "uui-core/src/helpers/cx.ts", + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "undefined | null | string | number | boolean | ClassDictionary | ClassArray", + "print": [ + "/* The ClassValue type is a union type that represents the valid values that can be passed as arguments to the classnames function. It can be one of the following types:", + "- string: A string representing a class name.", + "- number: A number representing a class name. This is useful when using CSS modules.", + "- ClassDictionary: An object whose keys are class names and values are booleans. If the value is true, the corresponding class name will be included in the resulting string, otherwise it will be omitted.", + "- ClassArray: An array of values of type ClassValue. This allows you to pass multiple class names or class dictionaries as arguments to classnames.", + "- undefined: If undefined is passed as an argument, it will be ignored.", + "- null: If null is passed as an argument, it will be ignored.", + "- boolean: If a boolean value is passed as an argument, it will be ignored if it is false and included if it is true. */", + "type ClassValue = string | number | ClassDictionary | ClassArray | undefined | null | boolean;" + ] + } + } + }, + "@epam/uui-core:ColumnsConfig": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "ColumnsConfig", + "nameFull": "ColumnsConfig" + }, + "src": "uui-core/src/types/tables.ts", + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "ColumnsConfig", + "print": [ + "type ColumnsConfig = {", + " /** Config for each column */", + " [key: string]: IColumnConfig;", + "};" + ] + }, + "props": [ { - "uid": "allowResizing", - "name": "allowResizing", + "uid": "[key: string]", + "name": "[key: string]", "comment": { "raw": [ - "Pass true, to enable column resizing. By default, will be used global 'allowColumnsResizing' value from DataTable component." + "Config for each column" ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "IColumnConfig" }, - "required": false - }, + "required": true + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:CommonContexts": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "CommonContexts", + "nameFull": "CommonContexts" + }, + "src": "uui-core/src/types/contexts.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "CommonContexts", + "print": [ + "interface CommonContexts extends UuiContexts {", + " /** Api definitions */", + " api: TApi & ApiExtensions;", + " /** App context, any app global settings. */", + " uuiApp: TAppContext;", + " /** React router history instance */", + " history?: IHistory4;", + "}" + ] + }, + "props": [ { - "uid": "render", - "name": "render", + "uid": "api", + "name": "api", "comment": { "raw": [ - "Render the cell content. The item props is the value of the whole row (TItem)." + "Api definitions" ] }, "typeValue": { - "raw": "(item: TItem, props: DataRowProps) => any" - }, - "editor": { - "type": "func" + "raw": "TApi & ApiExtensions" }, - "required": false + "required": true }, { - "uid": "renderCell", - "name": "renderCell", + "uid": "uuiApp", + "name": "uuiApp", "comment": { "raw": [ - "Overrides rendering of the whole cell" + "App context, any app global settings." ] }, "typeValue": { - "raw": "(cellProps: RenderCellProps) => any" - }, - "editor": { - "type": "func" + "raw": "TAppContext" }, - "required": false + "required": true }, { - "uid": "renderDropdown", - "name": "renderDropdown", + "uid": "history", + "name": "history", "comment": { "raw": [ - "Render callback for column header dropdown.", - " Usually, this prop is filled automatically by the useTableState hook.", - " If you use the useTableState hook, you don't need to specify it manually." + "React router history instance" ] }, "typeValue": { - "raw": "() => React.ReactNode" - }, - "editor": { - "type": "component" + "raw": "IHistory4" }, "required": false }, { - "uid": "renderFilter", - "name": "renderFilter", + "uid": "uuiApi", + "name": "uuiApi", "comment": { "raw": [ - "Render callback for column filter.", - " If you use useTableState hook, and you specify filter for the column, default filter will be rendered automatically.", - " You can use this prop to render a custom filter component." + "Api service allows you to process requests with an error handling.", + " See more here - https://uui.epam.com/documents?id=apiContext&category=contexts" ] }, "typeValue": { - "raw": "(lens: ILens, dropdownProps: IDropdownBodyProps) => React.ReactNode" - }, - "editor": { - "type": "component" + "raw": "IApiContext" }, - "required": false + "from": "@epam/uui-core:UuiContexts", + "required": true }, { - "uid": "renderTooltip", - "name": "renderTooltip", + "uid": "uuiRouter", + "name": "uuiRouter", "comment": { "raw": [ - "Render callback for column header tooltip.", - " This tooltip will appear on cell hover with 600ms delay.", - "", - " If omitted, default implementation with column.caption + column.info will be rendered.", - " Pass `() => null` to disable tooltip rendering." + "Instance of react-router wrapped by UUI adapter" ] }, "typeValue": { - "raw": "(column: DataColumnProps) => React.ReactNode" - }, - "editor": { - "type": "component" + "raw": "IRouterContext" }, - "required": false + "from": "@epam/uui-core:UuiContexts", + "required": true }, { - "uid": "fix", - "name": "fix", + "uid": "uuiModals", + "name": "uuiModals", "comment": { "raw": [ - "If specified, will make column fixed - it would not scroll horizontally" + "Modals service allows you to show modal windows over the main content.", + " See more here - https://uui.epam.com/documents?id=modalContext&category=contexts" ] }, "typeValue": { - "raw": "'left' | 'right'" - }, - "editor": { - "type": "oneOf", - "options": [ - "left", - "right" - ] + "raw": "IModalContext" }, - "from": "@epam/uui-core:ICanBeFixed", - "required": false + "from": "@epam/uui-core:UuiContexts", + "required": true }, { - "uid": "cx", - "name": "cx", + "uid": "uuiDnD", + "name": "uuiDnD", "comment": { "raw": [ - "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" + "Drag and Drop service for dnd operations.", + " See more here - https://uui.epam.com/documents?id=dragAndDrop" ] }, "typeValue": { - "raw": "null | string | number | boolean | ClassDictionary | ClassArray" + "raw": "IDndContext" }, - "typeValueRef": "@epam/uui-core:ClassValue", - "from": "@epam/uui-core:IHasCX", - "required": false + "from": "@epam/uui-core:UuiContexts", + "required": true }, { - "uid": "onClick", - "name": "onClick", + "uid": "uuiUserSettings", + "name": "uuiUserSettings", "comment": { "raw": [ - "Called when component is clicked" + "UserSettings service allows you to store user data in localStorage." ] }, "typeValue": { - "raw": "(e?: any) => void" - }, - "editor": { - "type": "func" + "raw": "IUserSettingsContext" }, - "from": "@epam/uui-core:IClickable", - "required": false + "from": "@epam/uui-core:UuiContexts", + "required": true }, { - "uid": "rawProps", - "name": "rawProps", + "uid": "uuiAnalytics", + "name": "uuiAnalytics", "comment": { "raw": [ - "Any HTML attributes (native or 'data-') to put on the underlying component" + "Web analytics service allows you to send user interaction events to the analytics systems.", + " See more here - https://uui.epam.com/documents?id=analyticsContext&category=contexts" ] }, "typeValue": { - "raw": "HTMLDivElement & Record<`data-${string}`, string>" + "raw": "IAnalyticsContext" }, - "from": "@epam/uui-core:IHasRawProps", - "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:DataPickerCellProps": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "DataPickerCellProps", - "nameFull": "DataPickerCellProps" - }, - "src": "uui-core/src/types/pickers.ts", - "comment": { - "raw": [ - "Props for cells in pickers." - ] - }, - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "DataPickerCellProps", - "print": [ - "/** Props for cells in pickers. */", - "interface DataPickerCellProps extends IHasCX {", - " /** Key to use as component's key. */", - " key: string;", - " /** DataRowProps object for the picker row where a cell is placed. */", - " rowProps: DataRowProps;", - " /** Render the cell content. The item props is the value of the whole row (TItem). */", - " renderItem(item: TItem, rowProps: DataRowProps): ReactNode;", - "}" - ] - }, - "props": [ + "from": "@epam/uui-core:UuiContexts", + "required": true + }, { - "uid": "key", - "name": "key", + "uid": "uuiErrors", + "name": "uuiErrors", "comment": { "raw": [ - "Key to use as component's key." + "Error service allows you to report errors.", + " See more here - https://uui.epam.com/documents?id=apiContext&category=contexts" ] }, "typeValue": { - "raw": "string" - }, - "editor": { - "type": "string" + "raw": "IErrorContext" }, + "from": "@epam/uui-core:UuiContexts", "required": true }, { - "uid": "rowProps", - "name": "rowProps", + "uid": "uuiNotifications", + "name": "uuiNotifications", "comment": { "raw": [ - "DataRowProps object for the picker row where a cell is placed." + "Notifications service allows you to show notifications over the main content.", + " See more here - https://uui.epam.com/documents?id=notificationContextDoc&category=contexts" ] }, "typeValue": { - "raw": "DataRowProps" + "raw": "INotificationContext" }, - "typeValueRef": "@epam/uui-core:DataRowProps", + "from": "@epam/uui-core:UuiContexts", "required": true }, { - "uid": "renderItem", - "name": "renderItem", + "uid": "uuiLayout", + "name": "uuiLayout", "comment": { "raw": [ - "Render the cell content. The item props is the value of the whole row (TItem)." + "Layout service. Used to manage layout for overlays like modals, dropdowns, etc." ] }, "typeValue": { - "raw": "(item: TItem, rowProps: DataRowProps) => React.ReactNode" - }, - "editor": { - "type": "component" + "raw": "ILayoutContext" }, + "from": "@epam/uui-core:UuiContexts", "required": true }, { - "uid": "cx", - "name": "cx", + "uid": "uuiLocks", + "name": "uuiLocks", "comment": { "raw": [ - "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" + "Lock service.", + " See more here - https://uui.epam.com/documents?id=lockContextDoc&category=contexts" ] }, "typeValue": { - "raw": "null | string | number | boolean | ClassDictionary | ClassArray" + "raw": "ILockContext" }, - "typeValueRef": "@epam/uui-core:ClassValue", - "from": "@epam/uui-core:IHasCX", - "required": false + "from": "@epam/uui-core:UuiContexts", + "required": true } ], "propsFromUnion": false } }, - "@epam/uui-core:DataQuery": { + "@epam/uui-core:ContextProviderProps": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "DataQuery", - "nameFull": "DataQuery" + "name": "ContextProviderProps", + "nameFull": "ContextProviderProps" }, - "src": "uui-core/src/types/dataQuery.ts", + "src": "uui-core/src/services/ContextProvider.tsx", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "DataQuery", + "raw": "ContextProviderProps", "print": [ - "interface DataQuery extends Pick, 'sorting' | 'range' | 'search'> {", - " /** The filter object value with predicates, by which data should be filtered. */", - " filter?: DataQueryFilter;", + "interface ContextProviderProps extends UuiServicesProps, IHasChildren {", + " /** Callback to load the AppContext data. AppContext is used to load global data, before application mount */", + " loadAppContext?: (api: TApi) => Promise;", + " /** Called when all contexts were initiated */", + " onInitCompleted(svc: CommonContexts): void;", + " /** Instance of react-router history.", + " * Note, that it should be the same object which you passed to the Router.", + " * */", + " history?: IHistory4;", + " /** Code of Google Analytics.", + " * If provided, user interactions events will be sent to your GA.", + " * */", + " gaCode?: string;", "}" ] }, "props": [ { - "uid": "filter", - "name": "filter", + "uid": "loadAppContext", + "name": "loadAppContext", "comment": { "raw": [ - "The filter object value with predicates, by which data should be filtered." + "Callback to load the AppContext data. AppContext is used to load global data, before application mount" ] }, "typeValue": { - "raw": "DataQueryFilter" + "raw": "(api: TApi) => Promise" + }, + "editor": { + "type": "func" }, "required": false }, { - "uid": "search", - "name": "search", + "uid": "onInitCompleted", + "name": "onInitCompleted", "comment": { "raw": [ - "The search string, by which data should be searched." + "Called when all contexts were initiated" + ] + }, + "typeValue": { + "raw": "(svc: CommonContexts) => void" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "history", + "name": "history", + "comment": { + "raw": [ + "Instance of react-router history.", + " Note, that it should be the same object which you passed to the Router." + ] + }, + "typeValue": { + "raw": "IHistory4" + }, + "required": false + }, + { + "uid": "gaCode", + "name": "gaCode", + "comment": { + "raw": [ + "Code of Google Analytics.", + " If provided, user interactions events will be sent to your GA." ] }, "typeValue": { @@ -5390,240 +5409,379 @@ "editor": { "type": "string" }, - "from": "@epam/uui-core:LazyDataSourceApiRequest", "required": false }, { - "uid": "sorting", - "name": "sorting", + "uid": "apiDefinition", + "name": "apiDefinition", "comment": { "raw": [ - "Sorting options, by which data should be sorted." + "Function to get the api definitions.", + " Usually, api definitions this is an object which contain object with all api requests of the app.", + " Then you can call this requests via 'uuiContext.api.myApi(myData)'" ] }, "typeValue": { - "raw": "SortingOption[]" + "raw": "(processRequest: IProcessRequest) => TApi" }, - "from": "@epam/uui-core:LazyDataSourceApiRequest", + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:UuiServicesProps", "required": false }, { - "uid": "range", - "name": "range", + "uid": "apiReloginPath", + "name": "apiReloginPath", "comment": { "raw": [ - "Specifies a range of the rows to be retrieved." + "Url to the relogin page. Used to open new browser window by this path, in case of auth lost error.", + " Opened by this path page, should process authentication and then post 'authSuccess' cross-window message to the opener, to recover failed requests.", + " @default '/auth/login'" + ], + "tags": { + "@default": "/auth/login" + } + }, + "typeValue": { + "raw": "string" + }, + "editor": { + "type": "string" + }, + "from": "@epam/uui-core:ApiContextProps", + "required": false + }, + { + "uid": "apiPingPath", + "name": "apiPingPath", + "comment": { + "raw": [ + "Url to the api, which ApiContext will start pinging in case of 'connection lost', until it gets 200 status. Then it will retry failed requests.", + " @default '/auth/ping'" + ], + "tags": { + "@default": "/auth/ping" + } + }, + "typeValue": { + "raw": "string" + }, + "editor": { + "type": "string" + }, + "from": "@epam/uui-core:ApiContextProps", + "required": false + }, + { + "uid": "apiServerUrl", + "name": "apiServerUrl", + "comment": { + "raw": [ + "Url to the server api under which all requests will be processed. Usefully for cases, when all api located by some specific url, which is not much app url.", + " @default ''" + ], + "tags": { + "@default": "" + } + }, + "typeValue": { + "raw": "string" + }, + "editor": { + "type": "string" + }, + "from": "@epam/uui-core:ApiContextProps", + "required": false + }, + { + "uid": "fetch", + "name": "fetch", + "comment": { + "raw": [ + "Allows to replace fetch implementation, for adding auth headers, mocking for testing, etc.", + " By default, standard fetch will be used." ] }, "typeValue": { - "raw": "LazyDataSourceApiRequestRange" + "raw": "typeof fetch" }, - "from": "@epam/uui-core:LazyDataSourceApiRequest", + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:ApiContextProps", + "required": false + }, + { + "uid": "children", + "name": "children", + "comment": { + "raw": [ + "Component children" + ] + }, + "typeValue": { + "raw": "React.ReactNode" + }, + "typeValueRef": "@types/react:ReactNode", + "from": "@epam/uui-core:IHasChildren", "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:DataQueryFilter": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "DataQueryFilter", - "nameFull": "DataQueryFilter" - }, - "src": "uui-core/src/types/dataQuery.ts", - "exported": true - }, - "details": { - "kind": 265, - "typeValue": { - "raw": "DataQueryFilter", - "print": [ - "type DataQueryFilter = {", - " [TPropName in keyof T]?: DataQueryFilterCondition;", - "};" - ] - } - } - }, - "@epam/uui-core:DataQueryFilterCondition": { + "@epam/uui-core:CX": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "DataQueryFilterCondition", - "nameFull": "DataQueryFilterCondition" + "name": "CX", + "nameFull": "CX" }, - "src": "uui-core/src/types/dataQuery.ts", + "src": "uui-core/src/types/objects.ts", "exported": true }, "details": { "kind": 265, "typeValue": { - "raw": "TField | FilterPredicate", + "raw": "undefined | null | string | number | boolean | ClassDictionary | ClassArray", "print": [ - "type DataQueryFilterCondition = TField | FilterPredicate;" + "// CX type is a union type that represents the valid values to pass CSS classes", + "type CX = ClassValue;" ] } } }, - "@epam/uui-core:DataRowOptions": { + "@epam/uui-core:DataColumnProps": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "DataRowOptions", - "nameFull": "DataRowOptions" - }, - "src": "uui-core/src/types/dataRows.ts", - "comment": { - "raw": [ - "A part of the DataRowProps, which can be configured for each data row via getRowOptions callback.", - " Other props in DataRowProps are computed when generating rows." - ] + "name": "DataColumnProps", + "nameFull": "DataColumnProps" }, + "src": "uui-core/src/types/tables.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "DataRowOptions", + "raw": "DataColumnProps", "print": [ - "/** A part of the DataRowProps, which can be configured for each data row via getRowOptions callback.", - " * Other props in DataRowProps are computed when generating rows.", - " */", - "interface DataRowOptions extends Partial>, IHasValidationMessage {", - " /** If row needs a checkbox, this field should be specified, and it props can be configured here */", - " checkbox?: {", - " isVisible: boolean;", - " } & IDisableable & ICanBeInvalid;", - " /** True if row is selectable (for whole-row single-selection, multi-selection via checkbox are configured with the checkbox prop) */", - " isSelectable?: boolean;", - " /** Configures row drag-n-drop options - if it can be dragged, can rows can be dropped into it, etc. */", - " dnd?: IDndActor;", - " /** Row click handler */", - " onClick?(rowProps: DataRowProps): void;", - " /** Can be specified to make row act as a link (plain or SPA) */", - " link?: Link;", + "interface DataColumnProps extends ICanBeFixed, IHasCX, IClickable, IHasRawProps, Attributes {", " /**", - " * A pure function that gets pinned state for each row.", - " * If row pinned, it means that it will be sticky inside their parent section.", - " * */", - " pin?(rowProps: DataRowProps): boolean;", + " * Unique key to identify the column. Used to reference columns, e.g. in ColumnsConfig.", + " * Also, used as React key for cells, header cells, and other components inside tables.", + " */", + " key: string;", + " /** Column caption. Can be a plain text, or any React Component */", + " caption?: React.ReactNode;", + " /**", + " * The width of the column. Usually, columns has exact this width.", + " * When all columns fit, and there's spare horizontal space, you can use 'grow' prop to use this space for certain columns.", + " * DataTable's columns can't shrink below width - table will add horizontal scrolling instead of shrinking columns", + " */", + " width: number;", + " /** Minimal width to which column can be resized manually */", + " minWidth?: number;", + " /** The flex grow for the column. Allows column to grow in width if there's spare horizontal space */", + " grow?: number;", + " /** Aligns cell and header content horizontally */", + " textAlign?: 'left' | 'center' | 'right';", + " /** Aligns only cell content horizontally */", + " justifyContent?: CSS.JustifyContentProperty;", + " /** Align cell content vertically */", + " alignSelf?: CSS.AlignSelfProperty;", + " /**", + " * Enables sorting arrows on the column.", + " * Sorting state is kept in DataSourceState.sorting", + " */", + " isSortable?: boolean;", + " /** Disallows to hide column via ColumnsConfiguration */", + " isAlwaysVisible?: boolean;", + " /** Makes column hidden by default. User can turn it on later, via ColumnsConfiguration */", + " isHiddenByDefault?: boolean;", + " /** Info tooltip displayed in the table header */", + " info?: React.ReactNode;", + " /**", + " * Should return true, if current filter affects the column.", + " * Usually, this prop is filled automatically by the useTableState hook.", + " * If you use the useTableState hook, you don't need to specify it manually.", + " */", + " isFilterActive?: (filter: TFilter, column: DataColumnProps) => boolean;", + " /** A pure function that defines that column value can be copied to the other column. */", + " canCopy?: (cell: DataTableSelectedCellData) => boolean;", + " /** A pure function that defines that column accepts copying other column value into it */", + " canAcceptCopy?: (from: DataTableSelectedCellData, to: DataTableSelectedCellData) => boolean;", + " /** Pass true, to enable column resizing. By default, will be used global 'allowColumnsResizing' value from DataTable component. */", + " allowResizing?: boolean;", + " /** Render the cell content. The item props is the value of the whole row (TItem). */", + " render?(item: TItem, props: DataRowProps): any;", + " /** Overrides rendering of the whole cell */", + " renderCell?(cellProps: RenderCellProps): any;", + " /**", + " * Render callback for column header dropdown.", + " * Usually, this prop is filled automatically by the useTableState hook.", + " * If you use the useTableState hook, you don't need to specify it manually.", + " */", + " renderDropdown?(): React.ReactNode;", + " /**", + " * Render callback for column filter.", + " * If you use useTableState hook, and you specify filter for the column, default filter will be rendered automatically.", + " * You can use this prop to render a custom filter component.", + " */", + " renderFilter?(lens: ILens, dropdownProps: IDropdownBodyProps): React.ReactNode;", + " /** Render callback for column header tooltip.", + " * This tooltip will appear on cell hover with 600ms delay.", + " *", + " * If omitted, default implementation with column.caption + column.info will be rendered.", + " * Pass `() => null` to disable tooltip rendering.", + " */", + " renderTooltip?(column: DataColumnProps): React.ReactNode;", "}" ] }, "props": [ { - "uid": "checkbox", - "name": "checkbox", + "uid": "key", + "name": "key", "comment": { "raw": [ - "If row needs a checkbox, this field should be specified, and it props can be configured here" + "Unique key to identify the column. Used to reference columns, e.g. in ColumnsConfig.", + " Also, used as React key for cells, header cells, and other components inside tables." ] }, "typeValue": { - "raw": "{ isVisible: boolean; } & IDisableable & ICanBeInvalid" + "raw": "string" + }, + "editor": { + "type": "string" + }, + "required": true + }, + { + "uid": "caption", + "name": "caption", + "comment": { + "raw": [ + "Column caption. Can be a plain text, or any React Component" + ] + }, + "typeValue": { + "raw": "React.ReactNode" }, + "typeValueRef": "@types/react:ReactNode", "required": false }, { - "uid": "isSelectable", - "name": "isSelectable", + "uid": "width", + "name": "width", "comment": { "raw": [ - "True if row is selectable (for whole-row single-selection, multi-selection via checkbox are configured with the checkbox prop)" + "The width of the column. Usually, columns has exact this width.", + " When all columns fit, and there's spare horizontal space, you can use 'grow' prop to use this space for certain columns.", + " DataTable's columns can't shrink below width - table will add horizontal scrolling instead of shrinking columns" ] }, "typeValue": { - "raw": "boolean" + "raw": "number" }, "editor": { - "type": "bool" + "type": "number" }, - "required": false + "required": true }, { - "uid": "dnd", - "name": "dnd", + "uid": "minWidth", + "name": "minWidth", "comment": { "raw": [ - "Configures row drag-n-drop options - if it can be dragged, can rows can be dropped into it, etc." + "Minimal width to which column can be resized manually" ] }, "typeValue": { - "raw": "IDndActor" + "raw": "number" + }, + "editor": { + "type": "number" }, "required": false }, { - "uid": "onClick", - "name": "onClick", + "uid": "grow", + "name": "grow", "comment": { "raw": [ - "Row click handler" + "The flex grow for the column. Allows column to grow in width if there's spare horizontal space" ] }, "typeValue": { - "raw": "(rowProps: DataRowProps) => void" + "raw": "number" }, "editor": { - "type": "func" + "type": "number" }, "required": false }, { - "uid": "link", - "name": "link", + "uid": "textAlign", + "name": "textAlign", "comment": { "raw": [ - "Can be specified to make row act as a link (plain or SPA)" + "Aligns cell and header content horizontally" ] }, "typeValue": { - "raw": "Link" + "raw": "'left' | 'right' | 'center'" + }, + "editor": { + "type": "oneOf", + "options": [ + "left", + "right", + "center" + ] }, "required": false }, { - "uid": "pin", - "name": "pin", + "uid": "justifyContent", + "name": "justifyContent", "comment": { "raw": [ - "A pure function that gets pinned state for each row.", - " If row pinned, it means that it will be sticky inside their parent section." + "Aligns only cell content horizontally" ] }, "typeValue": { - "raw": "(rowProps: DataRowProps) => boolean" + "raw": "string" }, "editor": { - "type": "func" + "type": "string" }, "required": false }, { - "uid": "isInvalid", - "name": "isInvalid", + "uid": "alignSelf", + "name": "alignSelf", "comment": { "raw": [ - "True if component contains invalid input" + "Align cell content vertically" ] }, "typeValue": { - "raw": "boolean" + "raw": "string" }, "editor": { - "type": "bool" + "type": "string" }, - "from": "@epam/uui-core:ICanBeInvalid", "required": false }, { - "uid": "isDisabled", - "name": "isDisabled", + "uid": "isSortable", + "name": "isSortable", "comment": { "raw": [ - "Disable editing, and visually de-emphasize value of the component" + "Enables sorting arrows on the column.", + " Sorting state is kept in DataSourceState.sorting" ] }, "typeValue": { @@ -5632,15 +5790,14 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:IDisableable", "required": false }, { - "uid": "isReadonly", - "name": "isReadonly", + "uid": "isAlwaysVisible", + "name": "isAlwaysVisible", "comment": { "raw": [ - "Disable editing. Unlike isDisabled, keep component's value readable." + "Disallows to hide column via ColumnsConfiguration" ] }, "typeValue": { @@ -5649,15 +5806,14 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:ICanBeReadonly", "required": false }, { - "uid": "isRequired", - "name": "isRequired", + "uid": "isHiddenByDefault", + "name": "isHiddenByDefault", "comment": { "raw": [ - "Marks that component's value is required and shouldn't be empty" + "Makes column hidden by default. User can turn it on later, via ColumnsConfiguration" ] }, "typeValue": { @@ -5666,609 +5822,413 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:ICanBeRequired", "required": false }, { - "uid": "value", - "name": "value", + "uid": "info", + "name": "info", "comment": { "raw": [ - "The current value of component" + "Info tooltip displayed in the table header" ] }, "typeValue": { - "raw": "TItem" + "raw": "React.ReactNode" }, - "from": "@epam/uui-core:IControlled", + "typeValueRef": "@types/react:ReactNode", "required": false }, { - "uid": "onValueChange", - "name": "onValueChange", + "uid": "isFilterActive", + "name": "isFilterActive", "comment": { "raw": [ - "Called when value needs to be changed (usually due to user interaction)" + "Should return true, if current filter affects the column.", + " Usually, this prop is filled automatically by the useTableState hook.", + " If you use the useTableState hook, you don't need to specify it manually." ] }, "typeValue": { - "raw": "(newValue: TItem) => void" + "raw": "(filter: TFilter, column: DataColumnProps) => boolean" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:IControlled", "required": false }, { - "uid": "validationMessage", - "name": "validationMessage", + "uid": "canCopy", + "name": "canCopy", "comment": { "raw": [ - "Message describing why the value is invalid" + "A pure function that defines that column value can be copied to the other column." ] }, "typeValue": { - "raw": "React.ReactNode" + "raw": "(cell: DataTableSelectedCellData) => boolean" + }, + "editor": { + "type": "func" }, - "typeValueRef": "@types/react:ReactNode", - "from": "@epam/uui-core:IHasValidationMessage", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:DataRowPathItem": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "DataRowPathItem", - "nameFull": "DataRowPathItem" - }, - "src": "uui-core/src/types/dataRows.ts", - "comment": { - "raw": [ - "Holds parent info for data rows" - ] - }, - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "DataRowPathItem", - "print": [ - "/** Holds parent info for data rows */", - "interface DataRowPathItem {", - " /** Item ID */", - " id: TId;", - " /** Item value */", - " value: TItem;", - " /** If true, indicates that this item last child of his parent */", - " isLastChild: boolean;", - "}" - ] - }, - "props": [ + }, { - "uid": "id", - "name": "id", + "uid": "canAcceptCopy", + "name": "canAcceptCopy", "comment": { "raw": [ - "Item ID" + "A pure function that defines that column accepts copying other column value into it" ] }, "typeValue": { - "raw": "TId" + "raw": "(from: DataTableSelectedCellData, to: DataTableSelectedCellData) => boolean" }, - "required": true + "editor": { + "type": "func" + }, + "required": false }, { - "uid": "value", - "name": "value", + "uid": "allowResizing", + "name": "allowResizing", "comment": { "raw": [ - "Item value" + "Pass true, to enable column resizing. By default, will be used global 'allowColumnsResizing' value from DataTable component." ] }, "typeValue": { - "raw": "TItem" + "raw": "boolean" }, - "required": true + "editor": { + "type": "bool" + }, + "required": false }, { - "uid": "isLastChild", - "name": "isLastChild", + "uid": "render", + "name": "render", "comment": { "raw": [ - "If true, indicates that this item last child of his parent" + "Render the cell content. The item props is the value of the whole row (TItem)." ] }, "typeValue": { - "raw": "boolean" + "raw": "(item: TItem, props: DataRowProps) => any" }, "editor": { - "type": "bool" - }, - "required": true - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:DataRowProps": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "DataRowProps", - "nameFull": "DataRowProps" - }, - "src": "uui-core/src/types/dataRows.ts", - "comment": { - "raw": [ - "DataRowProps is a base shape of props, passed to items in various lists or trees.", - "", - " Despite 'Row' in it's name, it doesn't directly connected to a table.", - " We use DataRowProps as a base for DataTableRowProps and DataPickerRowProps.", - " But it can also be used for any user-built list, tree, custom picker rows, or even a grid of cards.", - "", - " Array of DataRowProps describes a part of hierarchical list, while still being a flat array (not a tree of some kind).", - " We use depth, indent, path, and other props to show row's place in the hierarchy.", - " This is very handy to handle rendering, especially in virtual scrolling scenarios.", - "", - " DataSources primary job is to convert various data stores into arrays of DataRowProps." - ] - }, - "exported": true - }, - "details": { - "kind": 265, - "typeValue": { - "raw": "DataRowProps", - "print": [ - "/** DataRowProps is a base shape of props, passed to items in various lists or trees.", - " *", - " * Despite 'Row' in it's name, it doesn't directly connected to a table.", - " * We use DataRowProps as a base for DataTableRowProps and DataPickerRowProps.", - " * But it can also be used for any user-built list, tree, custom picker rows, or even a grid of cards.", - " *", - " * Array of DataRowProps describes a part of hierarchical list, while still being a flat array (not a tree of some kind).", - " * We use depth, indent, path, and other props to show row's place in the hierarchy.", - " * This is very handy to handle rendering, especially in virtual scrolling scenarios.", - " *", - " * DataSources primary job is to convert various data stores into arrays of DataRowProps.", - " */", - "type DataRowProps = FlexRowProps & DataRowOptions & {", - " /** ID of the TItem rows displays */", - " id: TId;", - " /** Key to be used as component's key when rendering. Usually, it's stringified ID */", - " rowKey: string;", - " /** Index of the row, from the top of the list. This doesn't account any hierarchy. */", - " index: number;", - " /** The data item (TItem) row displays. Will be undefined if isLoading = true. */", - " value: TItem | undefined;", - " /** ID of the parent TItem */", - " parentId?: TId;", - " /** Hierarchical path from the root node to the item (excluding the item itself) */", - " path?: DataRowPathItem[];", - " /* visual */", - " /** Depth of the row in tree, 0 for the top-level */", - " depth?: number;", - " /** Indent of the item, to show hierarchy.", - " * Unlike depth, it contains additional logic, to not add unnecessary indents:", - " * if all children of node has no children, all nodes would get the same indent as parent.", - " */", - " indent?: number;", - " /** True if row is in loading state. 'value' is empty in this case */", - " isLoading?: boolean;", - " /** True if item doesn't exist in a dataSource */", - " isUnknown?: boolean;", - " /** True if row be folded or unfolded (usually because it contains children) */", - " isFoldable?: boolean;", - " /** True if row is currently folded */", - " isFolded?: boolean;", - " /** True if row is checked with checkbox */", - " isChecked?: boolean;", - " /** True if row has checkbox and can be checkable */", - " isCheckable?: boolean;", - " /** True if some of row's children are checked.", - " * Used to show 'indefinite' checkbox state, to show user that something inside is checked */", - " isChildrenChecked?: boolean;", - " /** True if row is selected (in single-select mode, or in case when interface use both single row selection and checkboxes) */", - " isSelected?: boolean;", - " /** True if any of row's children is selected. */", - " isChildrenSelected?: boolean;", - " /** True if row is focused. Focus can be changed via keyboard arrow keys, or by hovering mouse on top of the row */", - " isFocused?: boolean;", - " /** True if row is the last child of his parent */", - " isLastChild?: boolean;", - " /* events */", - " /** Handles row folding change.", - " * We demand to pass the row as well, to avoid creating closures for each row.", - " */", - " onFold?(rowProps: DataRowProps): void;", - " /** Handles row click.", - " * We demand to pass the row as well, to avoid creating closures for each row.", - " */", - " onClick?(rowProps: DataRowProps): void;", - " /** Handles row checkbox change.", - " * We demand to pass the row as well, to avoid creating closures for each row.", - " */", - " onCheck?(rowProps: DataRowProps): void;", - " /** Handles row selection.", - " * We demand to pass the row as well, to avoid creating closures for each row.", - " */", - " onSelect?(rowProps: DataRowProps): void;", - " /** Handles row focusing.", - " */", - " onFocus?(focusedIndex: number): void;", - " /** True if row pinned, it means that it will be sticky inside his nesting level */", - " isPinned?: boolean;", - "};" - ] - }, - "props": [ - { - "uid": "cx", - "name": "cx", - "comment": { - "raw": [ - "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" - ] - }, - "typeValue": { - "raw": "null | string | number | boolean | ClassDictionary | ClassArray" + "type": "func" }, - "typeValueRef": "@epam/uui-core:ClassValue", - "from": "@epam/uui-core:IHasCX", "required": false }, { - "uid": "onClick", - "name": "onClick", + "uid": "renderCell", + "name": "renderCell", "comment": { "raw": [ - "Called when component is clicked" + "Overrides rendering of the whole cell" ] }, "typeValue": { - "raw": "((e?: any) => void) & ((rowProps: DataRowProps) => void) & ((rowProps: DataRowProps) => void)" + "raw": "(cellProps: RenderCellProps) => any" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:IClickable", - "required": false - }, - { - "uid": "key", - "name": "key", - "typeValue": { - "raw": "null | string | number" - }, - "from": "@types/react:Attributes", - "required": false - }, - { - "uid": "children", - "name": "children", - "comment": { - "raw": [ - "Component children" - ] - }, - "typeValue": { - "raw": "React.ReactNode" - }, - "typeValueRef": "@types/react:ReactNode", - "from": "@epam/uui-core:IHasChildren", "required": false }, { - "uid": "rawProps", - "name": "rawProps", + "uid": "renderDropdown", + "name": "renderDropdown", "comment": { "raw": [ - "Any HTML attributes (native or 'data-') to put on the underlying component" + "Render callback for column header dropdown.", + " Usually, this prop is filled automatically by the useTableState hook.", + " If you use the useTableState hook, you don't need to specify it manually." ] }, "typeValue": { - "raw": "React.HTMLAttributes & Record<`data-${string}`, string>" - }, - "from": "@epam/uui-core:IHasRawProps", - "required": false - }, - { - "uid": "alignItems", - "name": "alignItems", - "comment": { - "raw": [ - "Flexbox align-items property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)", - " @default 'center'" - ], - "tags": { - "@default": "center" - } - }, - "typeValue": { - "raw": "'top' | 'bottom' | 'center' | 'stretch'" + "raw": "() => React.ReactNode" }, "editor": { - "type": "oneOf", - "options": [ - "top", - "bottom", - "center", - "stretch" - ] + "type": "component" }, - "from": "@epam/uui-core:FlexRowProps", "required": false }, { - "uid": "justifyContent", - "name": "justifyContent", + "uid": "renderFilter", + "name": "renderFilter", "comment": { "raw": [ - "Flexbox justifyContent property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)" + "Render callback for column filter.", + " If you use useTableState hook, and you specify filter for the column, default filter will be rendered automatically.", + " You can use this prop to render a custom filter component." ] }, "typeValue": { - "raw": "'center' | 'space-around' | 'space-between' | 'space-evenly' | 'end' | 'start'" + "raw": "(lens: ILens, dropdownProps: IDropdownBodyProps) => React.ReactNode" }, "editor": { - "type": "oneOf", - "options": [ - "center", - "space-around", - "space-between", - "space-evenly", - "end", - "start" - ] - }, - "from": "@epam/uui-core:FlexRowProps", - "required": false - }, - { - "uid": "columnGap", - "name": "columnGap", - "comment": { - "raw": [ - "Flexbox column gap property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-gap-row-gap-column-gap)" - ] - }, - "typeValue": { - "raw": "number | '6' | '12' | '18' | '24' | '36'" + "type": "component" }, - "from": "@epam/uui-core:FlexRowProps", "required": false }, { - "uid": "rowGap", - "name": "rowGap", + "uid": "renderTooltip", + "name": "renderTooltip", "comment": { "raw": [ - "Flexbox row gap property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-gap-row-gap-column-gap)" + "Render callback for column header tooltip.", + " This tooltip will appear on cell hover with 600ms delay.", + "", + " If omitted, default implementation with column.caption + column.info will be rendered.", + " Pass `() => null` to disable tooltip rendering." ] }, "typeValue": { - "raw": "number | '6' | '12' | '18' | '24' | '36'" - }, - "from": "@epam/uui-core:FlexRowProps", - "required": false - }, - { - "uid": "checkbox", - "name": "checkbox", - "comment": { - "raw": [ - "If row needs a checkbox, this field should be specified, and it props can be configured here" - ] + "raw": "(column: DataColumnProps) => React.ReactNode" }, - "typeValue": { - "raw": "{ isVisible: boolean; } & IDisableable & ICanBeInvalid" + "editor": { + "type": "component" }, - "from": "@epam/uui-core:DataRowOptions", "required": false }, { - "uid": "isSelectable", - "name": "isSelectable", + "uid": "fix", + "name": "fix", "comment": { "raw": [ - "True if row is selectable (for whole-row single-selection, multi-selection via checkbox are configured with the checkbox prop)" + "If specified, will make column fixed - it would not scroll horizontally" ] }, "typeValue": { - "raw": "boolean" + "raw": "'left' | 'right'" }, "editor": { - "type": "bool" - }, - "from": "@epam/uui-core:DataRowOptions", - "required": false - }, - { - "uid": "dnd", - "name": "dnd", - "comment": { - "raw": [ - "Configures row drag-n-drop options - if it can be dragged, can rows can be dropped into it, etc." + "type": "oneOf", + "options": [ + "left", + "right" ] }, - "typeValue": { - "raw": "IDndActor" - }, - "from": "@epam/uui-core:DataRowOptions", + "from": "@epam/uui-core:ICanBeFixed", "required": false }, { - "uid": "link", - "name": "link", + "uid": "cx", + "name": "cx", "comment": { "raw": [ - "Can be specified to make row act as a link (plain or SPA)" + "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" ] }, "typeValue": { - "raw": "Link" + "raw": "null | string | number | boolean | ClassDictionary | ClassArray" }, - "from": "@epam/uui-core:DataRowOptions", + "typeValueRef": "@epam/uui-core:ClassValue", + "from": "@epam/uui-core:IHasCX", "required": false }, { - "uid": "pin", - "name": "pin", + "uid": "onClick", + "name": "onClick", "comment": { "raw": [ - "A pure function that gets pinned state for each row.", - " If row pinned, it means that it will be sticky inside their parent section." + "Called when component is clicked" ] }, "typeValue": { - "raw": "(rowProps: DataRowProps) => boolean" + "raw": "(e?: any) => void" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:DataRowOptions", + "from": "@epam/uui-core:IClickable", "required": false }, { - "uid": "isInvalid", - "name": "isInvalid", + "uid": "rawProps", + "name": "rawProps", "comment": { "raw": [ - "True if component contains invalid input" + "Any HTML attributes (native or 'data-') to put on the underlying component" ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "HTMLDivElement & Record<`data-${string}`, string>" }, - "from": "@epam/uui-core:ICanBeInvalid", + "from": "@epam/uui-core:IHasRawProps", "required": false - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:DataPickerCellProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "DataPickerCellProps", + "nameFull": "DataPickerCellProps" + }, + "src": "uui-core/src/types/pickers.ts", + "comment": { + "raw": [ + "Props for cells in pickers." + ] + }, + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "DataPickerCellProps", + "print": [ + "/** Props for cells in pickers. */", + "interface DataPickerCellProps extends IHasCX {", + " /** Key to use as component's key. */", + " key: string;", + " /** DataRowProps object for the picker row where a cell is placed. */", + " rowProps: DataRowProps;", + " /** Render the cell content. The item props is the value of the whole row (TItem). */", + " renderItem(item: TItem, rowProps: DataRowProps): ReactNode;", + "}" + ] + }, + "props": [ { - "uid": "isDisabled", - "name": "isDisabled", + "uid": "key", + "name": "key", "comment": { "raw": [ - "Disable editing, and visually de-emphasize value of the component" + "Key to use as component's key." ] }, "typeValue": { - "raw": "boolean" + "raw": "string" }, "editor": { - "type": "bool" + "type": "string" }, - "from": "@epam/uui-core:IDisableable", - "required": false + "required": true }, { - "uid": "isReadonly", - "name": "isReadonly", + "uid": "rowProps", + "name": "rowProps", "comment": { "raw": [ - "Disable editing. Unlike isDisabled, keep component's value readable." + "DataRowProps object for the picker row where a cell is placed." ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "DataRowProps" }, - "from": "@epam/uui-core:ICanBeReadonly", - "required": false + "typeValueRef": "@epam/uui-core:DataRowProps", + "required": true }, { - "uid": "isRequired", - "name": "isRequired", + "uid": "renderItem", + "name": "renderItem", "comment": { "raw": [ - "Marks that component's value is required and shouldn't be empty" + "Render the cell content. The item props is the value of the whole row (TItem)." ] }, "typeValue": { - "raw": "boolean" + "raw": "(item: TItem, rowProps: DataRowProps) => React.ReactNode" }, "editor": { - "type": "bool" + "type": "component" }, - "from": "@epam/uui-core:ICanBeRequired", - "required": false + "required": true }, { - "uid": "value", - "name": "value", + "uid": "cx", + "name": "cx", "comment": { "raw": [ - "The current value of component" + "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" ] }, "typeValue": { - "raw": "TItem" + "raw": "null | string | number | boolean | ClassDictionary | ClassArray" }, - "from": "@epam/uui-core:IControlled", - "required": true - }, + "typeValueRef": "@epam/uui-core:ClassValue", + "from": "@epam/uui-core:IHasCX", + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:DataQuery": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "DataQuery", + "nameFull": "DataQuery" + }, + "src": "uui-core/src/types/dataQuery.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "DataQuery", + "print": [ + "interface DataQuery extends Pick, 'sorting' | 'range' | 'search'> {", + " /** The filter object value with predicates, by which data should be filtered. */", + " filter?: DataQueryFilter;", + "}" + ] + }, + "props": [ { - "uid": "onValueChange", - "name": "onValueChange", + "uid": "filter", + "name": "filter", "comment": { "raw": [ - "Called when value needs to be changed (usually due to user interaction)" + "The filter object value with predicates, by which data should be filtered." ] }, "typeValue": { - "raw": "(newValue: TItem) => void" - }, - "editor": { - "type": "func" + "raw": "DataQueryFilter" }, - "from": "@epam/uui-core:IControlled", "required": false }, { - "uid": "validationMessage", - "name": "validationMessage", + "uid": "sorting", + "name": "sorting", "comment": { "raw": [ - "Message describing why the value is invalid" + "Sorting options, by which data should be sorted." ] }, "typeValue": { - "raw": "React.ReactNode" + "raw": "SortingOption[]" }, - "typeValueRef": "@types/react:ReactNode", - "from": "@epam/uui-core:IHasValidationMessage", + "from": "@epam/uui-core:LazyDataSourceApiRequest", "required": false }, { - "uid": "id", - "name": "id", + "uid": "range", + "name": "range", "comment": { "raw": [ - "ID of the TItem rows displays" + "Specifies a range of the rows to be retrieved." ] }, "typeValue": { - "raw": "TId" + "raw": "LazyDataSourceApiRequestRange" }, - "required": true + "from": "@epam/uui-core:LazyDataSourceApiRequest", + "required": false }, { - "uid": "rowKey", - "name": "rowKey", + "uid": "search", + "name": "search", "comment": { "raw": [ - "Key to be used as component's key when rendering. Usually, it's stringified ID" + "The search string, by which data should be searched." ] }, "typeValue": { @@ -6277,106 +6237,120 @@ "editor": { "type": "string" }, - "required": true - }, - { - "uid": "index", - "name": "index", - "comment": { - "raw": [ - "Index of the row, from the top of the list. This doesn't account any hierarchy." - ] - }, - "typeValue": { - "raw": "number" - }, - "editor": { - "type": "number" - }, - "required": true - }, - { - "uid": "parentId", - "name": "parentId", - "comment": { - "raw": [ - "ID of the parent TItem" - ] - }, - "typeValue": { - "raw": "TId" - }, - "required": false - }, - { - "uid": "path", - "name": "path", - "comment": { - "raw": [ - "Hierarchical path from the root node to the item (excluding the item itself)" - ] - }, - "typeValue": { - "raw": "DataRowPathItem[]" - }, - "required": false - }, - { - "uid": "depth", - "name": "depth", - "comment": { - "raw": [ - "Depth of the row in tree, 0 for the top-level" - ] - }, - "typeValue": { - "raw": "number" - }, - "editor": { - "type": "number" - }, - "required": false - }, - { - "uid": "indent", - "name": "indent", - "comment": { - "raw": [ - "Indent of the item, to show hierarchy.", - " Unlike depth, it contains additional logic, to not add unnecessary indents:", - " if all children of node has no children, all nodes would get the same indent as parent." - ] - }, - "typeValue": { - "raw": "number" - }, - "editor": { - "type": "number" - }, + "from": "@epam/uui-core:LazyDataSourceApiRequest", "required": false - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:DataQueryFilter": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "DataQueryFilter", + "nameFull": "DataQueryFilter" + }, + "src": "uui-core/src/types/dataQuery.ts", + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "DataQueryFilter", + "print": [ + "type DataQueryFilter = {", + " [TPropName in keyof T]?: DataQueryFilterCondition;", + "};" + ] + } + } + }, + "@epam/uui-core:DataQueryFilterCondition": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "DataQueryFilterCondition", + "nameFull": "DataQueryFilterCondition" + }, + "src": "uui-core/src/types/dataQuery.ts", + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "TField | FilterPredicate", + "print": [ + "type DataQueryFilterCondition = TField | FilterPredicate;" + ] + } + } + }, + "@epam/uui-core:DataRowOptions": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "DataRowOptions", + "nameFull": "DataRowOptions" + }, + "src": "uui-core/src/types/dataRows.ts", + "comment": { + "raw": [ + "A part of the DataRowProps, which can be configured for each data row via getRowOptions callback.", + " Other props in DataRowProps are computed when generating rows." + ] + }, + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "DataRowOptions", + "print": [ + "/** A part of the DataRowProps, which can be configured for each data row via getRowOptions callback.", + " * Other props in DataRowProps are computed when generating rows.", + " */", + "interface DataRowOptions extends Partial>, IHasValidationMessage {", + " /** If row needs a checkbox, this field should be specified, and it props can be configured here */", + " checkbox?: {", + " isVisible: boolean;", + " } & IDisableable & ICanBeInvalid;", + " /** True if row is selectable (for whole-row single-selection, multi-selection via checkbox are configured with the checkbox prop) */", + " isSelectable?: boolean;", + " /** Configures row drag-n-drop options - if it can be dragged, can rows can be dropped into it, etc. */", + " dnd?: IDndActor;", + " /** Row click handler */", + " onClick?(rowProps: DataRowProps): void;", + " /** Can be specified to make row act as a link (plain or SPA) */", + " link?: Link;", + " /**", + " * A pure function that gets pinned state for each row.", + " * If row pinned, it means that it will be sticky inside their parent section.", + " * */", + " pin?(rowProps: DataRowProps): boolean;", + "}" + ] + }, + "props": [ { - "uid": "isLoading", - "name": "isLoading", + "uid": "checkbox", + "name": "checkbox", "comment": { "raw": [ - "True if row is in loading state. 'value' is empty in this case" + "If row needs a checkbox, this field should be specified, and it props can be configured here" ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "{ isVisible: boolean; } & IDisableable & ICanBeInvalid" }, "required": false }, { - "uid": "isUnknown", - "name": "isUnknown", + "uid": "isSelectable", + "name": "isSelectable", "comment": { "raw": [ - "True if item doesn't exist in a dataSource" + "True if row is selectable (for whole-row single-selection, multi-selection via checkbox are configured with the checkbox prop)" ] }, "typeValue": { @@ -6388,76 +6362,70 @@ "required": false }, { - "uid": "isFoldable", - "name": "isFoldable", + "uid": "dnd", + "name": "dnd", "comment": { "raw": [ - "True if row be folded or unfolded (usually because it contains children)" + "Configures row drag-n-drop options - if it can be dragged, can rows can be dropped into it, etc." ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "IDndActor" }, "required": false }, { - "uid": "isFolded", - "name": "isFolded", + "uid": "onClick", + "name": "onClick", "comment": { "raw": [ - "True if row is currently folded" + "Row click handler" ] }, "typeValue": { - "raw": "boolean" + "raw": "(rowProps: DataRowProps) => void" }, "editor": { - "type": "bool" + "type": "func" }, "required": false }, { - "uid": "isChecked", - "name": "isChecked", + "uid": "link", + "name": "link", "comment": { "raw": [ - "True if row is checked with checkbox" + "Can be specified to make row act as a link (plain or SPA)" ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "Link" }, "required": false }, { - "uid": "isCheckable", - "name": "isCheckable", + "uid": "pin", + "name": "pin", "comment": { "raw": [ - "True if row has checkbox and can be checkable" + "A pure function that gets pinned state for each row.", + " If row pinned, it means that it will be sticky inside their parent section." ] }, "typeValue": { - "raw": "boolean" + "raw": "(rowProps: DataRowProps) => boolean" }, "editor": { - "type": "bool" + "type": "func" }, "required": false }, { - "uid": "isChildrenChecked", - "name": "isChildrenChecked", + "uid": "isInvalid", + "name": "isInvalid", "comment": { "raw": [ - "True if some of row's children are checked.", - " Used to show 'indefinite' checkbox state, to show user that something inside is checked" + "True if component contains invalid input" ] }, "typeValue": { @@ -6466,14 +6434,15 @@ "editor": { "type": "bool" }, + "from": "@epam/uui-core:ICanBeInvalid", "required": false }, { - "uid": "isSelected", - "name": "isSelected", + "uid": "isDisabled", + "name": "isDisabled", "comment": { "raw": [ - "True if row is selected (in single-select mode, or in case when interface use both single row selection and checkboxes)" + "Disable editing, and visually de-emphasize value of the component" ] }, "typeValue": { @@ -6482,14 +6451,15 @@ "editor": { "type": "bool" }, + "from": "@epam/uui-core:IDisableable", "required": false }, { - "uid": "isChildrenSelected", - "name": "isChildrenSelected", + "uid": "isReadonly", + "name": "isReadonly", "comment": { "raw": [ - "True if any of row's children is selected." + "Disable editing. Unlike isDisabled, keep component's value readable." ] }, "typeValue": { @@ -6498,14 +6468,15 @@ "editor": { "type": "bool" }, + "from": "@epam/uui-core:ICanBeReadonly", "required": false }, { - "uid": "isFocused", - "name": "isFocused", + "uid": "isRequired", + "name": "isRequired", "comment": { "raw": [ - "True if row is focused. Focus can be changed via keyboard arrow keys, or by hovering mouse on top of the row" + "Marks that component's value is required and shouldn't be empty" ] }, "typeValue": { @@ -6514,97 +6485,123 @@ "editor": { "type": "bool" }, + "from": "@epam/uui-core:ICanBeRequired", "required": false }, { - "uid": "isLastChild", - "name": "isLastChild", + "uid": "value", + "name": "value", "comment": { "raw": [ - "True if row is the last child of his parent" + "The current value of component" ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "TItem" }, + "from": "@epam/uui-core:IControlled", "required": false }, { - "uid": "onFold", - "name": "onFold", + "uid": "onValueChange", + "name": "onValueChange", "comment": { "raw": [ - "Handles row folding change.", - " We demand to pass the row as well, to avoid creating closures for each row." + "Called when value needs to be changed (usually due to user interaction)" ] }, "typeValue": { - "raw": "(rowProps: DataRowProps) => void" + "raw": "(newValue: TItem) => void" }, "editor": { "type": "func" }, + "from": "@epam/uui-core:IControlled", "required": false }, { - "uid": "onCheck", - "name": "onCheck", + "uid": "validationMessage", + "name": "validationMessage", "comment": { "raw": [ - "Handles row checkbox change.", - " We demand to pass the row as well, to avoid creating closures for each row." + "Message describing why the value is invalid" ] }, "typeValue": { - "raw": "(rowProps: DataRowProps) => void" - }, - "editor": { - "type": "func" + "raw": "React.ReactNode" }, + "typeValueRef": "@types/react:ReactNode", + "from": "@epam/uui-core:IHasValidationMessage", "required": false - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:DataRowPathItem": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "DataRowPathItem", + "nameFull": "DataRowPathItem" + }, + "src": "uui-core/src/types/dataRows.ts", + "comment": { + "raw": [ + "Holds parent info for data rows" + ] + }, + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "DataRowPathItem", + "print": [ + "/** Holds parent info for data rows */", + "interface DataRowPathItem {", + " /** Item ID */", + " id: TId;", + " /** Item value */", + " value: TItem;", + " /** If true, indicates that this item last child of his parent */", + " isLastChild: boolean;", + "}" + ] + }, + "props": [ { - "uid": "onSelect", - "name": "onSelect", + "uid": "id", + "name": "id", "comment": { "raw": [ - "Handles row selection.", - " We demand to pass the row as well, to avoid creating closures for each row." + "Item ID" ] }, "typeValue": { - "raw": "(rowProps: DataRowProps) => void" - }, - "editor": { - "type": "func" + "raw": "TId" }, - "required": false + "required": true }, { - "uid": "onFocus", - "name": "onFocus", + "uid": "value", + "name": "value", "comment": { "raw": [ - "Handles row focusing." + "Item value" ] }, "typeValue": { - "raw": "(focusedIndex: number) => void" - }, - "editor": { - "type": "func" + "raw": "TItem" }, - "required": false + "required": true }, { - "uid": "isPinned", - "name": "isPinned", + "uid": "isLastChild", + "name": "isLastChild", "comment": { "raw": [ - "True if row pinned, it means that it will be sticky inside his nesting level" + "If true, indicates that this item last child of his parent" ] }, "typeValue": { @@ -6613,511 +6610,500 @@ "editor": { "type": "bool" }, - "required": false + "required": true } ], "propsFromUnion": false } }, - "@epam/uui-core:DataSourceListCounts": { + "@epam/uui-core:DataRowProps": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "DataSourceListCounts", - "nameFull": "DataSourceListCounts" + "name": "DataRowProps", + "nameFull": "DataRowProps" + }, + "src": "uui-core/src/types/dataRows.ts", + "comment": { + "raw": [ + "DataRowProps is a base shape of props, passed to items in various lists or trees.", + "", + " Despite 'Row' in it's name, it doesn't directly connected to a table.", + " We use DataRowProps as a base for DataTableRowProps and DataPickerRowProps.", + " But it can also be used for any user-built list, tree, custom picker rows, or even a grid of cards.", + "", + " Array of DataRowProps describes a part of hierarchical list, while still being a flat array (not a tree of some kind).", + " We use depth, indent, path, and other props to show row's place in the hierarchy.", + " This is very handy to handle rendering, especially in virtual scrolling scenarios.", + "", + " DataSources primary job is to convert various data stores into arrays of DataRowProps." + ] }, - "src": "uui-core/src/types/dataSources.ts", "exported": true }, "details": { "kind": 265, "typeValue": { - "raw": "DataSourceListCounts", + "raw": "DataRowProps", "print": [ - "type DataSourceListCounts = {", - " /**", - " * Count of rows, after applying filter, and folding on tree nodes.", - " * Obsolete! Please switch to exactRowsCount / knownRowsCount", - " */", - " rowsCount?: number;", - " /** Count of rows, if all rows loaded. Can be null while initial loading, or if API doesn't return count */", - " exactRowsCount?: number;", - " /**", - " * There's at least knownRowsCount rows. There can be more if list is lazy loaded.", - " * Equals to exactRowsCount if all rows are loaded, or if API returns rows count", - " * Otherwise, exactRowsCount will be null, and knownRowsCount will specify number of loaded rows.", - " */", - " knownRowsCount?: number;", - " /** Total count of items, before applying the filter. If there's a tree, it counts all nodes, including folded children */", - " totalCount?: number;", + "/** DataRowProps is a base shape of props, passed to items in various lists or trees.", + " *", + " * Despite 'Row' in it's name, it doesn't directly connected to a table.", + " * We use DataRowProps as a base for DataTableRowProps and DataPickerRowProps.", + " * But it can also be used for any user-built list, tree, custom picker rows, or even a grid of cards.", + " *", + " * Array of DataRowProps describes a part of hierarchical list, while still being a flat array (not a tree of some kind).", + " * We use depth, indent, path, and other props to show row's place in the hierarchy.", + " * This is very handy to handle rendering, especially in virtual scrolling scenarios.", + " *", + " * DataSources primary job is to convert various data stores into arrays of DataRowProps.", + " */", + "type DataRowProps = FlexRowProps & DataRowOptions & {", + " /** ID of the TItem rows displays */", + " id: TId;", + " /** Key to be used as component's key when rendering. Usually, it's stringified ID */", + " rowKey: string;", + " /** Index of the row, from the top of the list. This doesn't account any hierarchy. */", + " index: number;", + " /** The data item (TItem) row displays. Will be undefined if isLoading = true. */", + " value: TItem | undefined;", + " /** ID of the parent TItem */", + " parentId?: TId;", + " /** Hierarchical path from the root node to the item (excluding the item itself) */", + " path?: DataRowPathItem[];", + " /* visual */", + " /** Depth of the row in tree, 0 for the top-level */", + " depth?: number;", + " /** Indent of the item, to show hierarchy.", + " * Unlike depth, it contains additional logic, to not add unnecessary indents:", + " * if all children of node has no children, all nodes would get the same indent as parent.", + " */", + " indent?: number;", + " /** True if row is in loading state. 'value' is empty in this case */", + " isLoading?: boolean;", + " /** True if item doesn't exist in a dataSource */", + " isUnknown?: boolean;", + " /** True if row be folded or unfolded (usually because it contains children) */", + " isFoldable?: boolean;", + " /** True if row is currently folded */", + " isFolded?: boolean;", + " /** True if row is checked with checkbox */", + " isChecked?: boolean;", + " /** True if row has checkbox and can be checkable */", + " isCheckable?: boolean;", + " /** True if some of row's children are checked.", + " * Used to show 'indefinite' checkbox state, to show user that something inside is checked */", + " isChildrenChecked?: boolean;", + " /** True if row is selected (in single-select mode, or in case when interface use both single row selection and checkboxes) */", + " isSelected?: boolean;", + " /** True if any of row's children is selected. */", + " isChildrenSelected?: boolean;", + " /** True if row is focused. Focus can be changed via keyboard arrow keys, or by hovering mouse on top of the row */", + " isFocused?: boolean;", + " /** True if row is the last child of his parent */", + " isLastChild?: boolean;", + " /* events */", + " /** Handles row folding change.", + " * We demand to pass the row as well, to avoid creating closures for each row.", + " */", + " onFold?(rowProps: DataRowProps): void;", + " /** Handles row click.", + " * We demand to pass the row as well, to avoid creating closures for each row.", + " */", + " onClick?(rowProps: DataRowProps): void;", + " /** Handles row checkbox change.", + " * We demand to pass the row as well, to avoid creating closures for each row.", + " */", + " onCheck?(rowProps: DataRowProps): void;", + " /** Handles row selection.", + " * We demand to pass the row as well, to avoid creating closures for each row.", + " */", + " onSelect?(rowProps: DataRowProps): void;", + " /** Handles row focusing.", + " */", + " onFocus?(focusedIndex: number): void;", + " /** True if row pinned, it means that it will be sticky inside his nesting level */", + " isPinned?: boolean;", "};" ] }, "props": [ { - "uid": "rowsCount", - "name": "rowsCount", + "uid": "cx", + "name": "cx", "comment": { "raw": [ - "Count of rows, after applying filter, and folding on tree nodes.", - " Obsolete! Please switch to exactRowsCount / knownRowsCount" + "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" ] }, "typeValue": { - "raw": "number" - }, - "editor": { - "type": "number" + "raw": "null | string | number | boolean | ClassDictionary | ClassArray" }, + "typeValueRef": "@epam/uui-core:ClassValue", + "from": "@epam/uui-core:IHasCX", "required": false }, { - "uid": "exactRowsCount", - "name": "exactRowsCount", + "uid": "onClick", + "name": "onClick", "comment": { "raw": [ - "Count of rows, if all rows loaded. Can be null while initial loading, or if API doesn't return count" + "Called when component is clicked" ] }, "typeValue": { - "raw": "number" + "raw": "((e?: any) => void) & ((rowProps: DataRowProps) => void) & ((rowProps: DataRowProps) => void)" }, "editor": { - "type": "number" + "type": "func" }, + "from": "@epam/uui-core:IClickable", "required": false }, { - "uid": "knownRowsCount", - "name": "knownRowsCount", - "comment": { - "raw": [ - "There's at least knownRowsCount rows. There can be more if list is lazy loaded.", - " Equals to exactRowsCount if all rows are loaded, or if API returns rows count", - " Otherwise, exactRowsCount will be null, and knownRowsCount will specify number of loaded rows." - ] - }, + "uid": "key", + "name": "key", "typeValue": { - "raw": "number" - }, - "editor": { - "type": "number" + "raw": "null | string | number" }, + "from": "@types/react:Attributes", "required": false }, { - "uid": "totalCount", - "name": "totalCount", + "uid": "children", + "name": "children", "comment": { "raw": [ - "Total count of items, before applying the filter. If there's a tree, it counts all nodes, including folded children" + "Component children" ] }, "typeValue": { - "raw": "number" - }, - "editor": { - "type": "number" + "raw": "React.ReactNode" }, + "typeValueRef": "@types/react:ReactNode", + "from": "@epam/uui-core:IHasChildren", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:DataSourceListProps": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "DataSourceListProps", - "nameFull": "DataSourceListProps" - }, - "src": "uui-core/src/types/dataSources.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "DataSourceListProps", - "print": [ - "interface DataSourceListProps extends DataSourceListCounts {", - " /**", - " * ICheckable object for Select All behavior.", - " * If omitted, Select All action will be absent.", - " * */", - " selectAll?: ICheckable;", - " /** Signals that data is reloading on search/sort/filter/reload. */", - " isReloading?: boolean;", - "}" - ] - }, - "props": [ + }, { - "uid": "selectAll", - "name": "selectAll", + "uid": "rawProps", + "name": "rawProps", "comment": { "raw": [ - "ICheckable object for Select All behavior.", - " If omitted, Select All action will be absent." + "Any HTML attributes (native or 'data-') to put on the underlying component" ] }, "typeValue": { - "raw": "ICheckable" + "raw": "React.HTMLAttributes & Record<`data-${string}`, string>" }, + "from": "@epam/uui-core:IHasRawProps", "required": false }, { - "uid": "isReloading", - "name": "isReloading", + "uid": "alignItems", + "name": "alignItems", "comment": { "raw": [ - "Signals that data is reloading on search/sort/filter/reload." - ] + "Flexbox align-items property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)", + " @default 'center'" + ], + "tags": { + "@default": "center" + } }, "typeValue": { - "raw": "boolean" + "raw": "'top' | 'bottom' | 'center' | 'stretch'" }, "editor": { - "type": "bool" + "type": "oneOf", + "options": [ + "top", + "bottom", + "center", + "stretch" + ] }, + "from": "@epam/uui-core:FlexRowProps", "required": false }, { - "uid": "rowsCount", - "name": "rowsCount", + "uid": "justifyContent", + "name": "justifyContent", "comment": { "raw": [ - "Count of rows, after applying filter, and folding on tree nodes.", - " Obsolete! Please switch to exactRowsCount / knownRowsCount" + "Flexbox justifyContent property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)" ] }, "typeValue": { - "raw": "number" + "raw": "'center' | 'space-around' | 'space-between' | 'space-evenly' | 'end' | 'start'" }, "editor": { - "type": "number" + "type": "oneOf", + "options": [ + "center", + "space-around", + "space-between", + "space-evenly", + "end", + "start" + ] }, - "from": "@epam/uui-core:DataSourceListCounts", + "from": "@epam/uui-core:FlexRowProps", "required": false }, { - "uid": "exactRowsCount", - "name": "exactRowsCount", + "uid": "columnGap", + "name": "columnGap", "comment": { "raw": [ - "Count of rows, if all rows loaded. Can be null while initial loading, or if API doesn't return count" + "Flexbox column gap property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-gap-row-gap-column-gap)" ] }, "typeValue": { - "raw": "number" - }, - "editor": { - "type": "number" + "raw": "number | '6' | '12' | '18' | '24' | '36'" }, - "from": "@epam/uui-core:DataSourceListCounts", + "from": "@epam/uui-core:FlexRowProps", "required": false }, { - "uid": "knownRowsCount", - "name": "knownRowsCount", + "uid": "rowGap", + "name": "rowGap", "comment": { "raw": [ - "There's at least knownRowsCount rows. There can be more if list is lazy loaded.", - " Equals to exactRowsCount if all rows are loaded, or if API returns rows count", - " Otherwise, exactRowsCount will be null, and knownRowsCount will specify number of loaded rows." + "Flexbox row gap property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-gap-row-gap-column-gap)" ] }, "typeValue": { - "raw": "number" - }, - "editor": { - "type": "number" + "raw": "number | '6' | '12' | '18' | '24' | '36'" }, - "from": "@epam/uui-core:DataSourceListCounts", + "from": "@epam/uui-core:FlexRowProps", "required": false }, { - "uid": "totalCount", - "name": "totalCount", + "uid": "checkbox", + "name": "checkbox", "comment": { "raw": [ - "Total count of items, before applying the filter. If there's a tree, it counts all nodes, including folded children" + "If row needs a checkbox, this field should be specified, and it props can be configured here" ] }, "typeValue": { - "raw": "number" - }, - "editor": { - "type": "number" + "raw": "{ isVisible: boolean; } & IDisableable & ICanBeInvalid" }, - "from": "@epam/uui-core:DataSourceListCounts", + "from": "@epam/uui-core:DataRowOptions", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:DataSourceState": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "DataSourceState", - "nameFull": "DataSourceState" - }, - "src": "uui-core/src/types/dataSources.ts", - "comment": { - "raw": [ - "Holds state of a components displaying lists - like tables. Holds virtual list position, filter, search, selection, etc." - ] - }, - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "DataSourceState", - "print": [ - "/** Holds state of a components displaying lists - like tables. Holds virtual list position, filter, search, selection, etc. */", - "interface DataSourceState, TId = any> extends VirtualListState {", - " /**", - " * Search value, used to filter data based on it.", - " * Included in the API request object when using a LazyDataSource.", - " * For Array and Async data sources, searching is performed internally by the datasource.", - " * */", - " search?: string;", - " /** Array of checked items IDs */", - " checked?: TId[];", - " /**", - " * A map of item IDs to their folding state.", - " * If an item ID is present with a `true` value, it's folded; otherwise, it's not folded.", - " * */", - " folded?: Record;", - " /**", - " * Filter value used to filter data based on it.", - " * Included in the API request object when using a LazyDataSource.", - " * For Array and Async data sources, filtering is performed internally by the datasource.", - " * */", - " filter?: TFilter;", - " /**", - " * Sorting value, used to sort data based on it.", - " * Included in the API request object when using a LazyDataSource.", - " * For Array and Async data sources, sorting is performed internally by the datasource.", - " * */", - " sorting?: SortingOption[];", - " /** ID of selected item. It can be only one selected item at the moment. */", - " selectedId?: TId;", - " /** Index of currently focused item */", - " focusedIndex?: number;", - " /** Current page number */", - " page?: number;", - " /** The amount of items per page */", - " pageSize?: number;", - " /**", - " * Provides default folding of nodes if the opposite value is not present in the folded map.", - " * It is used to collapse/expand all nodes.", - " */", - " foldAll?: boolean;", - "}" - ] - }, - "props": [ + }, { - "uid": "search", - "name": "search", + "uid": "isSelectable", + "name": "isSelectable", "comment": { "raw": [ - "Search value, used to filter data based on it.", - " Included in the API request object when using a LazyDataSource.", - " For Array and Async data sources, searching is performed internally by the datasource." + "True if row is selectable (for whole-row single-selection, multi-selection via checkbox are configured with the checkbox prop)" ] }, "typeValue": { - "raw": "string" + "raw": "boolean" }, "editor": { - "type": "string" + "type": "bool" }, + "from": "@epam/uui-core:DataRowOptions", "required": false }, { - "uid": "checked", - "name": "checked", + "uid": "dnd", + "name": "dnd", "comment": { "raw": [ - "Array of checked items IDs" + "Configures row drag-n-drop options - if it can be dragged, can rows can be dropped into it, etc." ] }, "typeValue": { - "raw": "TId[]" + "raw": "IDndActor" }, + "from": "@epam/uui-core:DataRowOptions", "required": false }, { - "uid": "folded", - "name": "folded", + "uid": "link", + "name": "link", "comment": { "raw": [ - "A map of item IDs to their folding state.", - " If an item ID is present with a `true` value, it's folded; otherwise, it's not folded." + "Can be specified to make row act as a link (plain or SPA)" ] }, "typeValue": { - "raw": "Record" + "raw": "Link" }, + "from": "@epam/uui-core:DataRowOptions", "required": false }, { - "uid": "filter", - "name": "filter", + "uid": "pin", + "name": "pin", "comment": { "raw": [ - "Filter value used to filter data based on it.", - " Included in the API request object when using a LazyDataSource.", - " For Array and Async data sources, filtering is performed internally by the datasource." + "A pure function that gets pinned state for each row.", + " If row pinned, it means that it will be sticky inside their parent section." ] }, "typeValue": { - "raw": "TFilter" + "raw": "(rowProps: DataRowProps) => boolean" + }, + "editor": { + "type": "func" }, + "from": "@epam/uui-core:DataRowOptions", "required": false }, { - "uid": "sorting", - "name": "sorting", + "uid": "isInvalid", + "name": "isInvalid", "comment": { "raw": [ - "Sorting value, used to sort data based on it.", - " Included in the API request object when using a LazyDataSource.", - " For Array and Async data sources, sorting is performed internally by the datasource." + "True if component contains invalid input" ] }, "typeValue": { - "raw": "SortingOption[]" + "raw": "boolean" + }, + "editor": { + "type": "bool" }, + "from": "@epam/uui-core:ICanBeInvalid", "required": false }, { - "uid": "selectedId", - "name": "selectedId", + "uid": "isDisabled", + "name": "isDisabled", "comment": { "raw": [ - "ID of selected item. It can be only one selected item at the moment." + "Disable editing, and visually de-emphasize value of the component" ] }, "typeValue": { - "raw": "TId" + "raw": "boolean" + }, + "editor": { + "type": "bool" }, + "from": "@epam/uui-core:IDisableable", "required": false }, { - "uid": "focusedIndex", - "name": "focusedIndex", + "uid": "isReadonly", + "name": "isReadonly", "comment": { "raw": [ - "Index of currently focused item" + "Disable editing. Unlike isDisabled, keep component's value readable." ] }, "typeValue": { - "raw": "number" + "raw": "boolean" }, "editor": { - "type": "number" + "type": "bool" }, + "from": "@epam/uui-core:ICanBeReadonly", "required": false }, { - "uid": "page", - "name": "page", + "uid": "isRequired", + "name": "isRequired", "comment": { "raw": [ - "Current page number" + "Marks that component's value is required and shouldn't be empty" ] }, "typeValue": { - "raw": "number" + "raw": "boolean" }, "editor": { - "type": "number" + "type": "bool" }, + "from": "@epam/uui-core:ICanBeRequired", "required": false }, { - "uid": "pageSize", - "name": "pageSize", + "uid": "value", + "name": "value", "comment": { "raw": [ - "The amount of items per page" + "The current value of component" ] }, "typeValue": { - "raw": "number" - }, - "editor": { - "type": "number" + "raw": "TItem" }, - "required": false + "from": "@epam/uui-core:IControlled", + "required": true }, { - "uid": "foldAll", - "name": "foldAll", + "uid": "onValueChange", + "name": "onValueChange", "comment": { "raw": [ - "Provides default folding of nodes if the opposite value is not present in the folded map.", - " It is used to collapse/expand all nodes." + "Called when value needs to be changed (usually due to user interaction)" ] }, "typeValue": { - "raw": "boolean" + "raw": "(newValue: TItem) => void" }, "editor": { - "type": "bool" + "type": "func" }, + "from": "@epam/uui-core:IControlled", "required": false }, { - "uid": "scrollTo", - "name": "scrollTo", + "uid": "validationMessage", + "name": "validationMessage", "comment": { "raw": [ - "Virtual list ensures that row with this Index is within the visible area, if not Virtual List .", - " Virtual list updates this value on scroll to null when appear in the visible area.", - " If this value is updated manually, Virtual List would scroll to the specified items.", - " It would attempt to put scroll so this item will be at the top of the list." + "Message describing why the value is invalid" ] }, "typeValue": { - "raw": "ScrollToConfig" + "raw": "React.ReactNode" }, - "from": "@epam/uui-core:VirtualListState", + "typeValueRef": "@types/react:ReactNode", + "from": "@epam/uui-core:IHasValidationMessage", "required": false }, { - "uid": "topIndex", - "name": "topIndex", + "uid": "id", + "name": "id", "comment": { "raw": [ - "Index of the topmost item, in rendered batch.", - " Note - this item might not be visible, as Virtual List maintain some reserve of rows on top / at the bottom of the list" + "ID of the TItem rows displays" ] }, "typeValue": { - "raw": "number" + "raw": "TId" + }, + "required": true + }, + { + "uid": "rowKey", + "name": "rowKey", + "comment": { + "raw": [ + "Key to be used as component's key when rendering. Usually, it's stringified ID" + ] + }, + "typeValue": { + "raw": "string" }, "editor": { - "type": "number" + "type": "string" }, - "from": "@epam/uui-core:VirtualListRange", - "required": false + "required": true }, { - "uid": "visibleCount", - "name": "visibleCount", + "uid": "index", + "name": "index", "comment": { "raw": [ - "Number of currently rendered items.", - " Virtual list updates this value automatically, if it too small.", - " Note Virtual List renders more items, that actually visible,", - " as it need maintain some reserve of rows on top / at the bottom of the list." + "Index of the row, from the top of the list. This doesn't account any hierarchy." ] }, "typeValue": { @@ -7126,95 +7112,58 @@ "editor": { "type": "number" }, - "from": "@epam/uui-core:VirtualListRange", - "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:DataTableCellOptions": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "DataTableCellOptions", - "nameFull": "DataTableCellOptions" - }, - "src": "uui-core/src/types/tables.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "DataTableCellOptions", - "print": [ - "interface DataTableCellOptions {", - " /** Key to use as component's key */", - " key: string;", - " /** DataTableRowsProps object for the table row the cell is at */", - " rowProps: DataTableRowProps;", - " /** DataColumnProps object for the column the cell is at */", - " column: DataColumnProps;", - " /** Column index in table */", - " index?: number;", - " /** True if the cell is in the first column */", - " isFirstColumn: boolean;", - " /** True if the cell is in the last column */", - " isLastColumn: boolean;", - " /** HTML tabIndex attribute to set on the cell */", - " tabIndex?: React.HTMLAttributes['tabIndex'];", - "}" - ] - }, - "props": [ + "required": true + }, { - "uid": "key", - "name": "key", + "uid": "parentId", + "name": "parentId", "comment": { "raw": [ - "Key to use as component's key" + "ID of the parent TItem" ] }, "typeValue": { - "raw": "string" - }, - "editor": { - "type": "string" + "raw": "TId" }, - "required": true + "required": false }, { - "uid": "rowProps", - "name": "rowProps", + "uid": "path", + "name": "path", "comment": { "raw": [ - "DataTableRowsProps object for the table row the cell is at" + "Hierarchical path from the root node to the item (excluding the item itself)" ] }, "typeValue": { - "raw": "DataTableRowProps" + "raw": "DataRowPathItem[]" }, - "required": true + "required": false }, { - "uid": "column", - "name": "column", + "uid": "depth", + "name": "depth", "comment": { "raw": [ - "DataColumnProps object for the column the cell is at" + "Depth of the row in tree, 0 for the top-level" ] }, "typeValue": { - "raw": "DataColumnProps" + "raw": "number" }, - "required": true + "editor": { + "type": "number" + }, + "required": false }, { - "uid": "index", - "name": "index", + "uid": "indent", + "name": "indent", "comment": { "raw": [ - "Column index in table" + "Indent of the item, to show hierarchy.", + " Unlike depth, it contains additional logic, to not add unnecessary indents:", + " if all children of node has no children, all nodes would get the same indent as parent." ] }, "typeValue": { @@ -7226,11 +7175,11 @@ "required": false }, { - "uid": "isFirstColumn", - "name": "isFirstColumn", + "uid": "isLoading", + "name": "isLoading", "comment": { "raw": [ - "True if the cell is in the first column" + "True if row is in loading state. 'value' is empty in this case" ] }, "typeValue": { @@ -7239,14 +7188,14 @@ "editor": { "type": "bool" }, - "required": true + "required": false }, { - "uid": "isLastColumn", - "name": "isLastColumn", + "uid": "isUnknown", + "name": "isUnknown", "comment": { "raw": [ - "True if the cell is in the last column" + "True if item doesn't exist in a dataSource" ] }, "typeValue": { @@ -7255,219 +7204,127 @@ "editor": { "type": "bool" }, - "required": true + "required": false }, { - "uid": "tabIndex", - "name": "tabIndex", + "uid": "isFoldable", + "name": "isFoldable", "comment": { "raw": [ - "HTML tabIndex attribute to set on the cell" + "True if row be folded or unfolded (usually because it contains children)" ] }, "typeValue": { - "raw": "number" + "raw": "boolean" }, "editor": { - "type": "number" + "type": "bool" }, "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:DataTableCellProps": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "DataTableCellProps", - "nameFull": "DataTableCellProps" - }, - "src": "uui-core/src/types/tables.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "DataTableCellProps", - "print": [ - "interface DataTableCellProps extends DataTableCellOptions, IHasCX, Partial>, IHasValidationMessage {", - " /** Add-on controls to put before the cell content (folding arrow, checkbox, etc.) */", - " addons?: React.ReactNode;", - " /** Overrides default loading placeholder ('skeleton') rendering.", - " * By default: () => Unknown ", - " * */", - " renderPlaceholder?(cellProps: DataTableCellProps): React.ReactNode;", - " /** Overrides default unknown item rendering */", - " renderUnknown?(cellProps: DataTableCellProps): React.ReactNode;", - " /**", - " * If passed, the cell is rendered as editable - receives focus, show validation errors.", - " * All necessary props for the editor are passed as argument:", - " * - props implements IEditable and can be passed directly to suitable component (like TextInput)", - " * - ICanFocus props are passed as well. Component should implement it so cell focus highlight works properly", - " * - mode='cell' prop is passed to render UUI components in 'cell' mode", - " * - rowProps is passed, so you depend on additional info about the row itself", - " */", - " renderEditor?(props: RenderEditorProps): React.ReactNode;", - " /** Overrides default tooltip, used to show validation message if the cell is invalid */", - " renderTooltip?: (props: ICanBeInvalid & TooltipCoreProps) => React.ReactElement;", - "}" - ] - }, - "props": [ - { - "uid": "addons", - "name": "addons", - "comment": { - "raw": [ - "Add-on controls to put before the cell content (folding arrow, checkbox, etc.)" - ] - }, - "typeValue": { - "raw": "React.ReactNode" - }, - "typeValueRef": "@types/react:ReactNode", - "required": false }, { - "uid": "renderPlaceholder", - "name": "renderPlaceholder", + "uid": "isFolded", + "name": "isFolded", "comment": { "raw": [ - "Overrides default loading placeholder ('skeleton') rendering.", - " By default: () => Unknown " + "True if row is currently folded" ] }, "typeValue": { - "raw": "(cellProps: DataTableCellProps) => React.ReactNode" + "raw": "boolean" }, "editor": { - "type": "component" + "type": "bool" }, "required": false }, { - "uid": "renderUnknown", - "name": "renderUnknown", + "uid": "isChecked", + "name": "isChecked", "comment": { "raw": [ - "Overrides default unknown item rendering" + "True if row is checked with checkbox" ] }, "typeValue": { - "raw": "(cellProps: DataTableCellProps) => React.ReactNode" + "raw": "boolean" }, "editor": { - "type": "component" + "type": "bool" }, "required": false }, { - "uid": "renderEditor", - "name": "renderEditor", + "uid": "isCheckable", + "name": "isCheckable", "comment": { "raw": [ - "If passed, the cell is rendered as editable - receives focus, show validation errors.", - " All necessary props for the editor are passed as argument:", - " - props implements IEditable and can be passed directly to suitable component (like TextInput)", - " - ICanFocus props are passed as well. Component should implement it so cell focus highlight works properly", - " - mode='cell' prop is passed to render UUI components in 'cell' mode", - " - rowProps is passed, so you depend on additional info about the row itself" + "True if row has checkbox and can be checkable" ] }, "typeValue": { - "raw": "(props: RenderEditorProps) => React.ReactNode" + "raw": "boolean" }, "editor": { - "type": "component" + "type": "bool" }, "required": false }, { - "uid": "renderTooltip", - "name": "renderTooltip", + "uid": "isChildrenChecked", + "name": "isChildrenChecked", "comment": { "raw": [ - "Overrides default tooltip, used to show validation message if the cell is invalid" + "True if some of row's children are checked.", + " Used to show 'indefinite' checkbox state, to show user that something inside is checked" ] }, "typeValue": { - "raw": "(props: ICanBeInvalid & TooltipCoreProps) => React.ReactElement>" + "raw": "boolean" }, "editor": { - "type": "component" + "type": "bool" }, "required": false }, { - "uid": "key", - "name": "key", + "uid": "isSelected", + "name": "isSelected", "comment": { "raw": [ - "Key to use as component's key" + "True if row is selected (in single-select mode, or in case when interface use both single row selection and checkboxes)" ] }, "typeValue": { - "raw": "string" + "raw": "boolean" }, "editor": { - "type": "string" - }, - "from": "@epam/uui-core:DataTableCellOptions", - "required": true - }, - { - "uid": "rowProps", - "name": "rowProps", - "comment": { - "raw": [ - "DataTableRowsProps object for the table row the cell is at" - ] - }, - "typeValue": { - "raw": "DataTableRowProps" - }, - "from": "@epam/uui-core:DataTableCellOptions", - "required": true - }, - { - "uid": "column", - "name": "column", - "comment": { - "raw": [ - "DataColumnProps object for the column the cell is at" - ] - }, - "typeValue": { - "raw": "DataColumnProps" + "type": "bool" }, - "from": "@epam/uui-core:DataTableCellOptions", - "required": true + "required": false }, { - "uid": "index", - "name": "index", + "uid": "isChildrenSelected", + "name": "isChildrenSelected", "comment": { "raw": [ - "Column index in table" + "True if any of row's children is selected." ] }, "typeValue": { - "raw": "number" + "raw": "boolean" }, "editor": { - "type": "number" + "type": "bool" }, - "from": "@epam/uui-core:DataTableCellOptions", "required": false }, { - "uid": "isFirstColumn", - "name": "isFirstColumn", + "uid": "isFocused", + "name": "isFocused", "comment": { "raw": [ - "True if the cell is in the first column" + "True if row is focused. Focus can be changed via keyboard arrow keys, or by hovering mouse on top of the row" ] }, "typeValue": { @@ -7476,15 +7333,14 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:DataTableCellOptions", - "required": true + "required": false }, { - "uid": "isLastColumn", - "name": "isLastColumn", + "uid": "isLastChild", + "name": "isLastChild", "comment": { "raw": [ - "True if the cell is in the last column" + "True if row is the last child of his parent" ] }, "typeValue": { @@ -7493,81 +7349,81 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:DataTableCellOptions", - "required": true + "required": false }, { - "uid": "tabIndex", - "name": "tabIndex", + "uid": "onFold", + "name": "onFold", "comment": { "raw": [ - "HTML tabIndex attribute to set on the cell" + "Handles row folding change.", + " We demand to pass the row as well, to avoid creating closures for each row." ] }, "typeValue": { - "raw": "number" + "raw": "(rowProps: DataRowProps) => void" }, "editor": { - "type": "number" + "type": "func" }, - "from": "@epam/uui-core:DataTableCellOptions", "required": false }, { - "uid": "cx", - "name": "cx", + "uid": "onCheck", + "name": "onCheck", "comment": { "raw": [ - "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" + "Handles row checkbox change.", + " We demand to pass the row as well, to avoid creating closures for each row." ] }, "typeValue": { - "raw": "null | string | number | boolean | ClassDictionary | ClassArray" + "raw": "(rowProps: DataRowProps) => void" + }, + "editor": { + "type": "func" }, - "typeValueRef": "@epam/uui-core:ClassValue", - "from": "@epam/uui-core:IHasCX", "required": false }, { - "uid": "isInvalid", - "name": "isInvalid", + "uid": "onSelect", + "name": "onSelect", "comment": { "raw": [ - "True if component contains invalid input" + "Handles row selection.", + " We demand to pass the row as well, to avoid creating closures for each row." ] }, "typeValue": { - "raw": "boolean" + "raw": "(rowProps: DataRowProps) => void" }, "editor": { - "type": "bool" + "type": "func" }, - "from": "@epam/uui-core:ICanBeInvalid", "required": false }, { - "uid": "isDisabled", - "name": "isDisabled", + "uid": "onFocus", + "name": "onFocus", "comment": { "raw": [ - "Disable editing, and visually de-emphasize value of the component" + "Handles row focusing." ] }, "typeValue": { - "raw": "boolean" + "raw": "(focusedIndex: number) => void" }, "editor": { - "type": "bool" + "type": "func" }, - "from": "@epam/uui-core:IDisableable", "required": false }, { - "uid": "isReadonly", - "name": "isReadonly", + "uid": "isPinned", + "name": "isPinned", "comment": { "raw": [ - "Disable editing. Unlike isDisabled, keep component's value readable." + "True if row pinned, it means that it will be sticky inside his nesting level" ] }, "typeValue": { @@ -7576,176 +7432,165 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:ICanBeReadonly", "required": false - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:DataSourceListCounts": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "DataSourceListCounts", + "nameFull": "DataSourceListCounts" + }, + "src": "uui-core/src/types/dataSources.ts", + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "DataSourceListCounts", + "print": [ + "type DataSourceListCounts = {", + " /**", + " * Count of rows, after applying filter, and folding on tree nodes.", + " * Obsolete! Please switch to exactRowsCount / knownRowsCount", + " */", + " rowsCount?: number;", + " /** Count of rows, if all rows loaded. Can be null while initial loading, or if API doesn't return count */", + " exactRowsCount?: number;", + " /**", + " * There's at least knownRowsCount rows. There can be more if list is lazy loaded.", + " * Equals to exactRowsCount if all rows are loaded, or if API returns rows count", + " * Otherwise, exactRowsCount will be null, and knownRowsCount will specify number of loaded rows.", + " */", + " knownRowsCount?: number;", + " /** Total count of items, before applying the filter. If there's a tree, it counts all nodes, including folded children */", + " totalCount?: number;", + "};" + ] + }, + "props": [ { - "uid": "isRequired", - "name": "isRequired", + "uid": "rowsCount", + "name": "rowsCount", "comment": { "raw": [ - "Marks that component's value is required and shouldn't be empty" + "Count of rows, after applying filter, and folding on tree nodes.", + " Obsolete! Please switch to exactRowsCount / knownRowsCount" ] }, "typeValue": { - "raw": "boolean" + "raw": "number" }, "editor": { - "type": "bool" + "type": "number" }, - "from": "@epam/uui-core:ICanBeRequired", "required": false }, { - "uid": "value", - "name": "value", + "uid": "exactRowsCount", + "name": "exactRowsCount", "comment": { "raw": [ - "The current value of component" + "Count of rows, if all rows loaded. Can be null while initial loading, or if API doesn't return count" ] }, "typeValue": { - "raw": "TCellValue" + "raw": "number" + }, + "editor": { + "type": "number" }, - "from": "@epam/uui-core:IControlled", "required": false }, { - "uid": "onValueChange", - "name": "onValueChange", + "uid": "knownRowsCount", + "name": "knownRowsCount", "comment": { "raw": [ - "Called when value needs to be changed (usually due to user interaction)" + "There's at least knownRowsCount rows. There can be more if list is lazy loaded.", + " Equals to exactRowsCount if all rows are loaded, or if API returns rows count", + " Otherwise, exactRowsCount will be null, and knownRowsCount will specify number of loaded rows." ] }, "typeValue": { - "raw": "(newValue: TCellValue) => void" + "raw": "number" }, "editor": { - "type": "func" + "type": "number" }, - "from": "@epam/uui-core:IControlled", "required": false }, { - "uid": "validationMessage", - "name": "validationMessage", + "uid": "totalCount", + "name": "totalCount", "comment": { "raw": [ - "Message describing why the value is invalid" + "Total count of items, before applying the filter. If there's a tree, it counts all nodes, including folded children" ] }, "typeValue": { - "raw": "React.ReactNode" + "raw": "number" + }, + "editor": { + "type": "number" }, - "typeValueRef": "@types/react:ReactNode", - "from": "@epam/uui-core:IHasValidationMessage", "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:DataTableColumnsConfigOptions": { + "@epam/uui-core:DataSourceListProps": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "DataTableColumnsConfigOptions", - "nameFull": "DataTableColumnsConfigOptions" + "name": "DataSourceListProps", + "nameFull": "DataSourceListProps" }, - "src": "uui-core/src/types/tables.ts", + "src": "uui-core/src/types/dataSources.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "DataTableColumnsConfigOptions", + "raw": "DataSourceListProps", "print": [ - "interface DataTableColumnsConfigOptions {", - " /** If true, allows user to change columns order", - " * @default false", - " * */", - " allowColumnsReordering?: boolean;", - " /** If true, allows user to change columns width", - " * @default false", + "interface DataSourceListProps extends DataSourceListCounts {", + " /**", + " * ICheckable object for Select All behavior.", + " * If omitted, Select All action will be absent.", " * */", - " allowColumnsResizing?: boolean;", + " selectAll?: ICheckable;", + " /** Signals that data is reloading on search/sort/filter/reload. */", + " isReloading?: boolean;", "}" ] }, "props": [ { - "uid": "allowColumnsReordering", - "name": "allowColumnsReordering", + "uid": "selectAll", + "name": "selectAll", "comment": { "raw": [ - "If true, allows user to change columns order", - " @default false" - ], - "tags": { - "@default": false - } + "ICheckable object for Select All behavior.", + " If omitted, Select All action will be absent." + ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "ICheckable" }, "required": false }, { - "uid": "allowColumnsResizing", - "name": "allowColumnsResizing", - "comment": { - "raw": [ - "If true, allows user to change columns width", - " @default false" - ], - "tags": { - "@default": false - } - }, - "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" - }, - "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:DataTableConfigModalParams": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "DataTableConfigModalParams", - "nameFull": "DataTableConfigModalParams" - }, - "src": "uui-core/src/types/tables.ts", - "exported": true - }, - "details": { - "kind": 265, - "typeValue": { - "raw": "DataTableConfigModalParams", - "print": [ - "type DataTableConfigModalParams = IEditable & {", - " /** Array of all table columns */", - " columns: DataColumnProps[];", - "};" - ] - }, - "props": [ - { - "uid": "isInvalid", - "name": "isInvalid", + "uid": "isReloading", + "name": "isReloading", "comment": { "raw": [ - "True if component contains invalid input" + "Signals that data is reloading on search/sort/filter/reload." ] }, "typeValue": { @@ -7754,314 +7599,290 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:ICanBeInvalid", "required": false }, { - "uid": "isDisabled", - "name": "isDisabled", + "uid": "rowsCount", + "name": "rowsCount", "comment": { "raw": [ - "Disable editing, and visually de-emphasize value of the component" + "Count of rows, after applying filter, and folding on tree nodes.", + " Obsolete! Please switch to exactRowsCount / knownRowsCount" ] }, "typeValue": { - "raw": "boolean" + "raw": "number" }, "editor": { - "type": "bool" + "type": "number" }, - "from": "@epam/uui-core:IDisableable", + "from": "@epam/uui-core:DataSourceListCounts", "required": false }, { - "uid": "isReadonly", - "name": "isReadonly", + "uid": "exactRowsCount", + "name": "exactRowsCount", "comment": { "raw": [ - "Disable editing. Unlike isDisabled, keep component's value readable." + "Count of rows, if all rows loaded. Can be null while initial loading, or if API doesn't return count" ] }, "typeValue": { - "raw": "boolean" + "raw": "number" }, "editor": { - "type": "bool" + "type": "number" }, - "from": "@epam/uui-core:ICanBeReadonly", + "from": "@epam/uui-core:DataSourceListCounts", "required": false }, { - "uid": "isRequired", - "name": "isRequired", + "uid": "knownRowsCount", + "name": "knownRowsCount", "comment": { "raw": [ - "Marks that component's value is required and shouldn't be empty" + "There's at least knownRowsCount rows. There can be more if list is lazy loaded.", + " Equals to exactRowsCount if all rows are loaded, or if API returns rows count", + " Otherwise, exactRowsCount will be null, and knownRowsCount will specify number of loaded rows." ] }, "typeValue": { - "raw": "boolean" + "raw": "number" }, "editor": { - "type": "bool" + "type": "number" }, - "from": "@epam/uui-core:ICanBeRequired", + "from": "@epam/uui-core:DataSourceListCounts", "required": false }, { - "uid": "value", - "name": "value", - "comment": { - "raw": [ - "The current value of component" - ] - }, - "typeValue": { - "raw": "DataSourceState, any>" - }, - "from": "@epam/uui-core:IControlled", - "required": true - }, - { - "uid": "onValueChange", - "name": "onValueChange", + "uid": "totalCount", + "name": "totalCount", "comment": { "raw": [ - "Called when value needs to be changed (usually due to user interaction)" + "Total count of items, before applying the filter. If there's a tree, it counts all nodes, including folded children" ] }, "typeValue": { - "raw": "(newValue: DataSourceState, any>) => void" + "raw": "number" }, "editor": { - "type": "func" - }, - "from": "@epam/uui-core:IControlled", - "required": true - }, - { - "uid": "columns", - "name": "columns", - "comment": { - "raw": [ - "Array of all table columns" - ] - }, - "typeValue": { - "raw": "DataColumnProps[]" + "type": "number" }, - "required": true + "from": "@epam/uui-core:DataSourceListCounts", + "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:DataTableHeaderCellProps": { + "@epam/uui-core:DataSourceState": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "DataTableHeaderCellProps", - "nameFull": "DataTableHeaderCellProps" + "name": "DataSourceState", + "nameFull": "DataSourceState" + }, + "src": "uui-core/src/types/dataSources.ts", + "comment": { + "raw": [ + "Holds state of a components displaying lists - like tables. Holds virtual list position, filter, search, selection, etc." + ] }, - "src": "uui-core/src/types/tables.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "DataTableHeaderCellProps", + "raw": "DataSourceState", "print": [ - "interface DataTableHeaderCellProps extends IEditable, IDropdownToggler, IHasCX, DataTableColumnsConfigOptions {", - " key: string;", - " column: DataColumnProps;", - " isFirstColumn: boolean;", - " isLastColumn: boolean;", - " selectAll?: ICheckable;", + "/** Holds state of a components displaying lists - like tables. Holds virtual list position, filter, search, selection, etc. */", + "interface DataSourceState, TId = any> extends VirtualListState {", " /**", - " * Enables collapse/expand all functionality.", + " * Search value, used to filter data based on it.", + " * Included in the API request object when using a LazyDataSource.", + " * For Array and Async data sources, searching is performed internally by the datasource.", " * */", - " showFoldAll?: boolean;", - " /**", - " * Fold all click handler.", - " * If `showFoldAll` is not enabled, onFoldAll is not passed.", + " search?: string;", + " /** Array of checked items IDs */", + " checked?: TId[];", + " /**", + " * A map of item IDs to their folding state.", + " * If an item ID is present with a `true` value, it's folded; otherwise, it's not folded.", " * */", - " onFoldAll?(): void;", + " folded?: Record;", " /**", - " * Indicates if all nodes are folded.", + " * Filter value used to filter data based on it.", + " * Included in the API request object when using a LazyDataSource.", + " * For Array and Async data sources, filtering is performed internally by the datasource.", + " * */", + " filter?: TFilter;", + " /**", + " * Sorting value, used to sort data based on it.", + " * Included in the API request object when using a LazyDataSource.", + " * For Array and Async data sources, sorting is performed internally by the datasource.", + " * */", + " sorting?: SortingOption[];", + " /** ID of selected item. It can be only one selected item at the moment. */", + " selectedId?: TId;", + " /** Index of currently focused item */", + " focusedIndex?: number;", + " /** Current page number */", + " page?: number;", + " /** The amount of items per page */", + " pageSize?: number;", + " /**", + " * Provides default folding of nodes if the opposite value is not present in the folded map.", + " * It is used to collapse/expand all nodes.", " */", - " areAllFolded?: boolean;", - " isFilterActive?: boolean;", - " sortDirection?: SortDirection;", - " onSort(dir: SortDirection): void;", - " onDrop?(params: DropParams, DataColumnProps>): void;", - " renderFilter?: (dropdownProps: IDropdownBodyProps) => React.ReactNode;", + " foldAll?: boolean;", "}" ] }, "props": [ { - "uid": "key", - "name": "key", + "uid": "search", + "name": "search", + "comment": { + "raw": [ + "Search value, used to filter data based on it.", + " Included in the API request object when using a LazyDataSource.", + " For Array and Async data sources, searching is performed internally by the datasource." + ] + }, "typeValue": { "raw": "string" }, "editor": { "type": "string" }, - "required": true + "required": false }, { - "uid": "column", - "name": "column", - "typeValue": { - "raw": "DataColumnProps" + "uid": "checked", + "name": "checked", + "comment": { + "raw": [ + "Array of checked items IDs" + ] }, - "required": true - }, - { - "uid": "isFirstColumn", - "name": "isFirstColumn", "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "TId[]" }, - "required": true + "required": false }, { - "uid": "isLastColumn", - "name": "isLastColumn", - "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "uid": "folded", + "name": "folded", + "comment": { + "raw": [ + "A map of item IDs to their folding state.", + " If an item ID is present with a `true` value, it's folded; otherwise, it's not folded." + ] }, - "required": true - }, - { - "uid": "selectAll", - "name": "selectAll", "typeValue": { - "raw": "ICheckable" + "raw": "Record" }, "required": false }, { - "uid": "showFoldAll", - "name": "showFoldAll", + "uid": "filter", + "name": "filter", "comment": { "raw": [ - "Enables collapse/expand all functionality." + "Filter value used to filter data based on it.", + " Included in the API request object when using a LazyDataSource.", + " For Array and Async data sources, filtering is performed internally by the datasource." ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "TFilter" }, "required": false }, { - "uid": "onFoldAll", - "name": "onFoldAll", + "uid": "sorting", + "name": "sorting", "comment": { "raw": [ - "Fold all click handler.", - " If `showFoldAll` is not enabled, onFoldAll is not passed." + "Sorting value, used to sort data based on it.", + " Included in the API request object when using a LazyDataSource.", + " For Array and Async data sources, sorting is performed internally by the datasource." ] }, "typeValue": { - "raw": "() => void" - }, - "editor": { - "type": "func" + "raw": "SortingOption[]" }, "required": false }, { - "uid": "areAllFolded", - "name": "areAllFolded", + "uid": "selectedId", + "name": "selectedId", "comment": { "raw": [ - "Indicates if all nodes are folded." + "ID of selected item. It can be only one selected item at the moment." ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "TId" }, "required": false }, { - "uid": "isFilterActive", - "name": "isFilterActive", - "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "uid": "focusedIndex", + "name": "focusedIndex", + "comment": { + "raw": [ + "Index of currently focused item" + ] }, - "required": false - }, - { - "uid": "sortDirection", - "name": "sortDirection", "typeValue": { - "raw": "'asc' | 'desc'" + "raw": "number" }, "editor": { - "type": "oneOf", - "options": [ - "asc", - "desc" - ] + "type": "number" }, "required": false }, { - "uid": "onSort", - "name": "onSort", - "typeValue": { - "raw": "(dir: SortDirection) => void" - }, - "editor": { - "type": "func" + "uid": "page", + "name": "page", + "comment": { + "raw": [ + "Current page number" + ] }, - "required": true - }, - { - "uid": "onDrop", - "name": "onDrop", "typeValue": { - "raw": "(params: DropParams, DataColumnProps>) => void" + "raw": "number" }, "editor": { - "type": "func" + "type": "number" }, "required": false }, { - "uid": "renderFilter", - "name": "renderFilter", + "uid": "pageSize", + "name": "pageSize", + "comment": { + "raw": [ + "The amount of items per page" + ] + }, "typeValue": { - "raw": "(dropdownProps: IDropdownBodyProps) => React.ReactNode" + "raw": "number" }, "editor": { - "type": "component" + "type": "number" }, "required": false }, { - "uid": "isInvalid", - "name": "isInvalid", + "uid": "foldAll", + "name": "foldAll", "comment": { "raw": [ - "True if component contains invalid input" + "Provides default folding of nodes if the opposite value is not present in the folded map.", + " It is used to collapse/expand all nodes." ] }, "typeValue": { @@ -8070,151 +7891,182 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:ICanBeInvalid", "required": false }, { - "uid": "isDisabled", - "name": "isDisabled", + "uid": "scrollTo", + "name": "scrollTo", "comment": { "raw": [ - "Disable editing, and visually de-emphasize value of the component" + "Virtual list ensures that row with this Index is within the visible area, if not Virtual List .", + " Virtual list updates this value on scroll to null when appear in the visible area.", + " If this value is updated manually, Virtual List would scroll to the specified items.", + " It would attempt to put scroll so this item will be at the top of the list." ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "ScrollToConfig" }, - "from": "@epam/uui-core:IDisableable", + "from": "@epam/uui-core:VirtualListState", "required": false }, { - "uid": "isReadonly", - "name": "isReadonly", + "uid": "topIndex", + "name": "topIndex", "comment": { "raw": [ - "Disable editing. Unlike isDisabled, keep component's value readable." + "Index of the topmost item, in rendered batch.", + " Note - this item might not be visible, as Virtual List maintain some reserve of rows on top / at the bottom of the list" ] }, "typeValue": { - "raw": "boolean" + "raw": "number" }, "editor": { - "type": "bool" + "type": "number" }, - "from": "@epam/uui-core:ICanBeReadonly", + "from": "@epam/uui-core:VirtualListRange", "required": false }, { - "uid": "isRequired", - "name": "isRequired", + "uid": "visibleCount", + "name": "visibleCount", "comment": { "raw": [ - "Marks that component's value is required and shouldn't be empty" + "Number of currently rendered items.", + " Virtual list updates this value automatically, if it too small.", + " Note Virtual List renders more items, that actually visible,", + " as it need maintain some reserve of rows on top / at the bottom of the list." ] }, "typeValue": { - "raw": "boolean" + "raw": "number" }, "editor": { - "type": "bool" + "type": "number" }, - "from": "@epam/uui-core:ICanBeRequired", + "from": "@epam/uui-core:VirtualListRange", "required": false - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:DataTableCellOptions": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "DataTableCellOptions", + "nameFull": "DataTableCellOptions" + }, + "src": "uui-core/src/types/tables.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "DataTableCellOptions", + "print": [ + "interface DataTableCellOptions {", + " /** Key to use as component's key */", + " key: string;", + " /** DataTableRowsProps object for the table row the cell is at */", + " rowProps: DataTableRowProps;", + " /** DataColumnProps object for the column the cell is at */", + " column: DataColumnProps;", + " /** Column index in table */", + " index?: number;", + " /** True if the cell is in the first column */", + " isFirstColumn: boolean;", + " /** True if the cell is in the last column */", + " isLastColumn: boolean;", + " /** HTML tabIndex attribute to set on the cell */", + " tabIndex?: React.HTMLAttributes['tabIndex'];", + "}" + ] + }, + "props": [ { - "uid": "value", - "name": "value", + "uid": "key", + "name": "key", "comment": { "raw": [ - "The current value of component" + "Key to use as component's key" ] }, "typeValue": { - "raw": "DataTableState" + "raw": "string" + }, + "editor": { + "type": "string" }, - "from": "@epam/uui-core:IControlled", "required": true }, { - "uid": "onValueChange", - "name": "onValueChange", + "uid": "rowProps", + "name": "rowProps", "comment": { "raw": [ - "Called when value needs to be changed (usually due to user interaction)" + "DataTableRowsProps object for the table row the cell is at" ] }, "typeValue": { - "raw": "(newValue: DataTableState) => void" - }, - "editor": { - "type": "func" + "raw": "DataTableRowProps" }, - "from": "@epam/uui-core:IControlled", "required": true }, { - "uid": "isOpen", - "name": "isOpen", + "uid": "column", + "name": "column", "comment": { "raw": [ - "When isDropdown=true, indicate that dropdown is open with chevron icon" + "DataColumnProps object for the column the cell is at" ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "DataColumnProps" }, - "from": "@epam/uui-core:IDropdownToggler", - "required": false + "required": true }, { - "uid": "isDropdown", - "name": "isDropdown", + "uid": "index", + "name": "index", "comment": { "raw": [ - "Shows chevron icon, enabling component to act as dropdown toggler" + "Column index in table" ] }, "typeValue": { - "raw": "boolean" + "raw": "number" }, "editor": { - "type": "bool" + "type": "number" }, - "from": "@epam/uui-core:IDropdownToggler", "required": false }, { - "uid": "cx", - "name": "cx", + "uid": "isFirstColumn", + "name": "isFirstColumn", "comment": { "raw": [ - "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" + "True if the cell is in the first column" ] }, "typeValue": { - "raw": "null | string | number | boolean | ClassDictionary | ClassArray" + "raw": "boolean" }, - "typeValueRef": "@epam/uui-core:ClassValue", - "from": "@epam/uui-core:IHasCX", - "required": false + "editor": { + "type": "bool" + }, + "required": true }, { - "uid": "allowColumnsReordering", - "name": "allowColumnsReordering", + "uid": "isLastColumn", + "name": "isLastColumn", "comment": { "raw": [ - "If true, allows user to change columns order", - " @default false" - ], - "tags": { - "@default": false - } + "True if the cell is in the last column" + ] }, "typeValue": { "raw": "boolean" @@ -8222,40 +8074,34 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:DataTableColumnsConfigOptions", - "required": false + "required": true }, { - "uid": "allowColumnsResizing", - "name": "allowColumnsResizing", + "uid": "tabIndex", + "name": "tabIndex", "comment": { "raw": [ - "If true, allows user to change columns width", - " @default false" - ], - "tags": { - "@default": false - } + "HTML tabIndex attribute to set on the cell" + ] }, "typeValue": { - "raw": "boolean" + "raw": "number" }, "editor": { - "type": "bool" + "type": "number" }, - "from": "@epam/uui-core:DataTableColumnsConfigOptions", "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:DataTableHeaderRowProps": { + "@epam/uui-core:DataTableCellProps": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "DataTableHeaderRowProps", - "nameFull": "DataTableHeaderRowProps" + "name": "DataTableCellProps", + "nameFull": "DataTableCellProps" }, "src": "uui-core/src/types/tables.ts", "exported": true @@ -8263,70 +8109,94 @@ "details": { "kind": 264, "typeValue": { - "raw": "DataTableHeaderRowProps", + "raw": "DataTableCellProps", "print": [ - "interface DataTableHeaderRowProps extends IEditable, IHasCX, DataTableColumnsConfigOptions {", - " columns: DataColumnProps[];", - " selectAll?: ICheckable;", - " /**", - " * Enables collapse/expand all functionality.", + "interface DataTableCellProps extends DataTableCellOptions, IHasCX, Partial>, IHasValidationMessage {", + " /** Add-on controls to put before the cell content (folding arrow, checkbox, etc.) */", + " addons?: React.ReactNode;", + " /** Overrides default loading placeholder ('skeleton') rendering.", + " * By default: () => Unknown ", " * */", - " showFoldAll?: boolean;", - " onConfigButtonClick?: (params: DataTableConfigModalParams) => any;", - " renderCell?: (props: DataTableHeaderCellProps) => React.ReactNode;", - " renderConfigButton?: () => React.ReactNode;", + " renderPlaceholder?(cellProps: DataTableCellProps): React.ReactNode;", + " /** Overrides default unknown item rendering */", + " renderUnknown?(cellProps: DataTableCellProps): React.ReactNode;", + " /**", + " * If passed, the cell is rendered as editable - receives focus, show validation errors.", + " * All necessary props for the editor are passed as argument:", + " * - props implements IEditable and can be passed directly to suitable component (like TextInput)", + " * - ICanFocus props are passed as well. Component should implement it so cell focus highlight works properly", + " * - mode='cell' prop is passed to render UUI components in 'cell' mode", + " * - rowProps is passed, so you depend on additional info about the row itself", + " */", + " renderEditor?(props: RenderEditorProps): React.ReactNode;", + " /** Overrides default tooltip, used to show validation message if the cell is invalid */", + " renderTooltip?: (props: ICanBeInvalid & TooltipCoreProps) => React.ReactElement;", "}" ] }, "props": [ { - "uid": "columns", - "name": "columns", - "typeValue": { - "raw": "DataColumnProps[]" + "uid": "addons", + "name": "addons", + "comment": { + "raw": [ + "Add-on controls to put before the cell content (folding arrow, checkbox, etc.)" + ] }, - "required": true - }, - { - "uid": "selectAll", - "name": "selectAll", "typeValue": { - "raw": "ICheckable" + "raw": "React.ReactNode" }, + "typeValueRef": "@types/react:ReactNode", "required": false }, { - "uid": "showFoldAll", - "name": "showFoldAll", + "uid": "renderPlaceholder", + "name": "renderPlaceholder", "comment": { "raw": [ - "Enables collapse/expand all functionality." + "Overrides default loading placeholder ('skeleton') rendering.", + " By default: () => Unknown " ] }, "typeValue": { - "raw": "boolean" + "raw": "(cellProps: DataTableCellProps) => React.ReactNode" }, "editor": { - "type": "bool" + "type": "component" }, "required": false }, { - "uid": "onConfigButtonClick", - "name": "onConfigButtonClick", + "uid": "renderUnknown", + "name": "renderUnknown", + "comment": { + "raw": [ + "Overrides default unknown item rendering" + ] + }, "typeValue": { - "raw": "(params: DataTableConfigModalParams) => any" + "raw": "(cellProps: DataTableCellProps) => React.ReactNode" }, "editor": { - "type": "func" + "type": "component" }, "required": false }, { - "uid": "renderCell", - "name": "renderCell", + "uid": "renderEditor", + "name": "renderEditor", + "comment": { + "raw": [ + "If passed, the cell is rendered as editable - receives focus, show validation errors.", + " All necessary props for the editor are passed as argument:", + " - props implements IEditable and can be passed directly to suitable component (like TextInput)", + " - ICanFocus props are passed as well. Component should implement it so cell focus highlight works properly", + " - mode='cell' prop is passed to render UUI components in 'cell' mode", + " - rowProps is passed, so you depend on additional info about the row itself" + ] + }, "typeValue": { - "raw": "(props: DataTableHeaderCellProps) => React.ReactNode" + "raw": "(props: RenderEditorProps) => React.ReactNode" }, "editor": { "type": "component" @@ -8334,10 +8204,15 @@ "required": false }, { - "uid": "renderConfigButton", - "name": "renderConfigButton", + "uid": "renderTooltip", + "name": "renderTooltip", + "comment": { + "raw": [ + "Overrides default tooltip, used to show validation message if the cell is invalid" + ] + }, "typeValue": { - "raw": "() => React.ReactNode" + "raw": "(props: ICanBeInvalid & TooltipCoreProps) => React.ReactElement>" }, "editor": { "type": "component" @@ -8345,62 +8220,73 @@ "required": false }, { - "uid": "isInvalid", - "name": "isInvalid", + "uid": "key", + "name": "key", "comment": { "raw": [ - "True if component contains invalid input" + "Key to use as component's key" ] }, "typeValue": { - "raw": "boolean" + "raw": "string" }, "editor": { - "type": "bool" + "type": "string" }, - "from": "@epam/uui-core:ICanBeInvalid", - "required": false + "from": "@epam/uui-core:DataTableCellOptions", + "required": true }, { - "uid": "isDisabled", - "name": "isDisabled", + "uid": "rowProps", + "name": "rowProps", "comment": { "raw": [ - "Disable editing, and visually de-emphasize value of the component" + "DataTableRowsProps object for the table row the cell is at" ] }, "typeValue": { - "raw": "boolean" + "raw": "DataTableRowProps" }, - "editor": { - "type": "bool" + "from": "@epam/uui-core:DataTableCellOptions", + "required": true + }, + { + "uid": "column", + "name": "column", + "comment": { + "raw": [ + "DataColumnProps object for the column the cell is at" + ] }, - "from": "@epam/uui-core:IDisableable", - "required": false + "typeValue": { + "raw": "DataColumnProps" + }, + "from": "@epam/uui-core:DataTableCellOptions", + "required": true }, { - "uid": "isReadonly", - "name": "isReadonly", + "uid": "index", + "name": "index", "comment": { "raw": [ - "Disable editing. Unlike isDisabled, keep component's value readable." + "Column index in table" ] }, "typeValue": { - "raw": "boolean" + "raw": "number" }, "editor": { - "type": "bool" + "type": "number" }, - "from": "@epam/uui-core:ICanBeReadonly", + "from": "@epam/uui-core:DataTableCellOptions", "required": false }, { - "uid": "isRequired", - "name": "isRequired", + "uid": "isFirstColumn", + "name": "isFirstColumn", "comment": { "raw": [ - "Marks that component's value is required and shouldn't be empty" + "True if the cell is in the first column" ] }, "typeValue": { @@ -8409,39 +8295,42 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:ICanBeRequired", - "required": false + "from": "@epam/uui-core:DataTableCellOptions", + "required": true }, { - "uid": "value", - "name": "value", + "uid": "isLastColumn", + "name": "isLastColumn", "comment": { "raw": [ - "The current value of component" + "True if the cell is in the last column" ] }, "typeValue": { - "raw": "DataTableState" + "raw": "boolean" }, - "from": "@epam/uui-core:IControlled", + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:DataTableCellOptions", "required": true }, { - "uid": "onValueChange", - "name": "onValueChange", + "uid": "tabIndex", + "name": "tabIndex", "comment": { "raw": [ - "Called when value needs to be changed (usually due to user interaction)" + "HTML tabIndex attribute to set on the cell" ] }, "typeValue": { - "raw": "(newValue: DataTableState) => void" + "raw": "number" }, "editor": { - "type": "func" + "type": "number" }, - "from": "@epam/uui-core:IControlled", - "required": true + "from": "@epam/uui-core:DataTableCellOptions", + "required": false }, { "uid": "cx", @@ -8459,16 +8348,12 @@ "required": false }, { - "uid": "allowColumnsReordering", - "name": "allowColumnsReordering", + "uid": "isInvalid", + "name": "isInvalid", "comment": { "raw": [ - "If true, allows user to change columns order", - " @default false" - ], - "tags": { - "@default": false - } + "True if component contains invalid input" + ] }, "typeValue": { "raw": "boolean" @@ -8476,20 +8361,16 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:DataTableColumnsConfigOptions", + "from": "@epam/uui-core:ICanBeInvalid", "required": false }, { - "uid": "allowColumnsResizing", - "name": "allowColumnsResizing", + "uid": "isDisabled", + "name": "isDisabled", "comment": { "raw": [ - "If true, allows user to change columns width", - " @default false" - ], - "tags": { - "@default": false - } + "Disable editing, and visually de-emphasize value of the component" + ] }, "typeValue": { "raw": "boolean" @@ -8497,319 +8378,187 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:DataTableColumnsConfigOptions", - "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:DataTableRowProps": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "DataTableRowProps", - "nameFull": "DataTableRowProps" - }, - "src": "uui-core/src/types/tables.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "DataTableRowProps", - "print": [ - "interface DataTableRowProps extends DataRowProps {", - " /** Array of visible columns */", - " columns?: DataColumnProps[];", - " /**", - " * Render callback for each cell at row.", - " * If omitted, default cell renderer will be used.", - " * */", - " renderCell?: (props: DataTableCellProps) => ReactNode;", - " /**", - " * Render callback for the drop marker. Rendered only if 'dnd' option was provided via getRowProps.", - " * If omitted, default renderer will be used.", - " * */", - " renderDropMarkers?: (props: DndActorRenderParams) => ReactNode;", - "}" - ] - }, - "props": [ - { - "uid": "columns", - "name": "columns", - "comment": { - "raw": [ - "Array of visible columns" - ] - }, - "typeValue": { - "raw": "DataColumnProps[]" - }, + "from": "@epam/uui-core:IDisableable", "required": false }, { - "uid": "renderCell", - "name": "renderCell", + "uid": "isReadonly", + "name": "isReadonly", "comment": { "raw": [ - "Render callback for each cell at row.", - " If omitted, default cell renderer will be used." + "Disable editing. Unlike isDisabled, keep component's value readable." ] }, "typeValue": { - "raw": "(props: DataTableCellProps) => React.ReactNode" + "raw": "boolean" }, "editor": { - "type": "component" + "type": "bool" }, + "from": "@epam/uui-core:ICanBeReadonly", "required": false }, { - "uid": "renderDropMarkers", - "name": "renderDropMarkers", + "uid": "isRequired", + "name": "isRequired", "comment": { "raw": [ - "Render callback for the drop marker. Rendered only if 'dnd' option was provided via getRowProps.", - " If omitted, default renderer will be used." + "Marks that component's value is required and shouldn't be empty" ] }, "typeValue": { - "raw": "(props: DndActorRenderParams) => React.ReactNode" + "raw": "boolean" }, "editor": { - "type": "component" + "type": "bool" }, + "from": "@epam/uui-core:ICanBeRequired", "required": false }, { - "uid": "cx", - "name": "cx", + "uid": "value", + "name": "value", "comment": { "raw": [ - "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" + "The current value of component" ] }, "typeValue": { - "raw": "null | string | number | boolean | ClassDictionary | ClassArray" + "raw": "TCellValue" }, - "typeValueRef": "@epam/uui-core:ClassValue", - "from": "@epam/uui-core:IHasCX", + "from": "@epam/uui-core:IControlled", "required": false }, { - "uid": "onClick", - "name": "onClick", + "uid": "onValueChange", + "name": "onValueChange", "comment": { "raw": [ - "Called when component is clicked" + "Called when value needs to be changed (usually due to user interaction)" ] }, "typeValue": { - "raw": "((e?: any) => void) & ((rowProps: DataRowProps) => void) & ((rowProps: DataRowProps) => void)" + "raw": "(newValue: TCellValue) => void" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:IClickable", - "required": false - }, - { - "uid": "key", - "name": "key", - "typeValue": { - "raw": "null | string | number" - }, - "from": "@types/react:Attributes", + "from": "@epam/uui-core:IControlled", "required": false }, { - "uid": "children", - "name": "children", + "uid": "validationMessage", + "name": "validationMessage", "comment": { "raw": [ - "Component children" + "Message describing why the value is invalid" ] }, "typeValue": { "raw": "React.ReactNode" }, "typeValueRef": "@types/react:ReactNode", - "from": "@epam/uui-core:IHasChildren", - "required": false - }, - { - "uid": "rawProps", - "name": "rawProps", - "comment": { - "raw": [ - "Any HTML attributes (native or 'data-') to put on the underlying component" - ] - }, - "typeValue": { - "raw": "React.HTMLAttributes & Record<`data-${string}`, string>" - }, - "from": "@epam/uui-core:IHasRawProps", + "from": "@epam/uui-core:IHasValidationMessage", "required": false - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:DataTableColumnsConfigOptions": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "DataTableColumnsConfigOptions", + "nameFull": "DataTableColumnsConfigOptions" + }, + "src": "uui-core/src/types/tables.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "DataTableColumnsConfigOptions", + "print": [ + "interface DataTableColumnsConfigOptions {", + " /** If true, allows user to change columns order", + " * @default false", + " * */", + " allowColumnsReordering?: boolean;", + " /** If true, allows user to change columns width", + " * @default false", + " * */", + " allowColumnsResizing?: boolean;", + "}" + ] + }, + "props": [ { - "uid": "alignItems", - "name": "alignItems", + "uid": "allowColumnsReordering", + "name": "allowColumnsReordering", "comment": { "raw": [ - "Flexbox align-items property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)", - " @default 'center'" + "If true, allows user to change columns order", + " @default false" ], "tags": { - "@default": "center" + "@default": false } }, - "typeValue": { - "raw": "'top' | 'bottom' | 'center' | 'stretch'" - }, - "editor": { - "type": "oneOf", - "options": [ - "top", - "bottom", - "center", - "stretch" - ] - }, - "from": "@epam/uui-core:FlexRowProps", - "required": false - }, - { - "uid": "justifyContent", - "name": "justifyContent", - "comment": { - "raw": [ - "Flexbox justifyContent property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)" - ] - }, - "typeValue": { - "raw": "'center' | 'space-around' | 'space-between' | 'space-evenly' | 'end' | 'start'" - }, - "editor": { - "type": "oneOf", - "options": [ - "center", - "space-around", - "space-between", - "space-evenly", - "end", - "start" - ] - }, - "from": "@epam/uui-core:FlexRowProps", - "required": false - }, - { - "uid": "columnGap", - "name": "columnGap", - "comment": { - "raw": [ - "Flexbox column gap property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-gap-row-gap-column-gap)" - ] - }, - "typeValue": { - "raw": "number | '6' | '12' | '18' | '24' | '36'" - }, - "from": "@epam/uui-core:FlexRowProps", - "required": false - }, - { - "uid": "rowGap", - "name": "rowGap", - "comment": { - "raw": [ - "Flexbox row gap property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-gap-row-gap-column-gap)" - ] - }, - "typeValue": { - "raw": "number | '6' | '12' | '18' | '24' | '36'" - }, - "from": "@epam/uui-core:FlexRowProps", - "required": false - }, - { - "uid": "checkbox", - "name": "checkbox", - "comment": { - "raw": [ - "If row needs a checkbox, this field should be specified, and it props can be configured here" - ] - }, - "typeValue": { - "raw": "{ isVisible: boolean; } & IDisableable & ICanBeInvalid" - }, - "from": "@epam/uui-core:DataRowOptions", - "required": false - }, - { - "uid": "isSelectable", - "name": "isSelectable", - "comment": { - "raw": [ - "True if row is selectable (for whole-row single-selection, multi-selection via checkbox are configured with the checkbox prop)" - ] - }, "typeValue": { "raw": "boolean" }, "editor": { "type": "bool" }, - "from": "@epam/uui-core:DataRowOptions", - "required": false - }, - { - "uid": "dnd", - "name": "dnd", - "comment": { - "raw": [ - "Configures row drag-n-drop options - if it can be dragged, can rows can be dropped into it, etc." - ] - }, - "typeValue": { - "raw": "IDndActor" - }, - "from": "@epam/uui-core:DataRowOptions", - "required": false - }, - { - "uid": "link", - "name": "link", - "comment": { - "raw": [ - "Can be specified to make row act as a link (plain or SPA)" - ] - }, - "typeValue": { - "raw": "Link" - }, - "from": "@epam/uui-core:DataRowOptions", "required": false }, { - "uid": "pin", - "name": "pin", + "uid": "allowColumnsResizing", + "name": "allowColumnsResizing", "comment": { "raw": [ - "A pure function that gets pinned state for each row.", - " If row pinned, it means that it will be sticky inside their parent section." - ] + "If true, allows user to change columns width", + " @default false" + ], + "tags": { + "@default": false + } }, "typeValue": { - "raw": "(rowProps: DataRowProps) => boolean" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "from": "@epam/uui-core:DataRowOptions", "required": false - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:DataTableConfigModalParams": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "DataTableConfigModalParams", + "nameFull": "DataTableConfigModalParams" + }, + "src": "uui-core/src/types/tables.ts", + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "DataTableConfigModalParams", + "print": [ + "type DataTableConfigModalParams = IEditable & {", + " /** Array of all table columns */", + " columns: DataColumnProps[];", + "};" + ] + }, + "props": [ { "uid": "isInvalid", "name": "isInvalid", @@ -8887,7 +8636,7 @@ ] }, "typeValue": { - "raw": "TItem" + "raw": "DataSourceState, any>" }, "from": "@epam/uui-core:IControlled", "required": true @@ -8901,147 +8650,162 @@ ] }, "typeValue": { - "raw": "(newValue: TItem) => void" + "raw": "(newValue: DataSourceState, any>) => void" }, "editor": { "type": "func" }, "from": "@epam/uui-core:IControlled", - "required": false + "required": true }, { - "uid": "validationMessage", - "name": "validationMessage", + "uid": "columns", + "name": "columns", "comment": { "raw": [ - "Message describing why the value is invalid" + "Array of all table columns" ] }, "typeValue": { - "raw": "React.ReactNode" + "raw": "DataColumnProps[]" }, - "typeValueRef": "@types/react:ReactNode", - "from": "@epam/uui-core:IHasValidationMessage", - "required": false - }, + "required": true + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:DataTableHeaderCellProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "DataTableHeaderCellProps", + "nameFull": "DataTableHeaderCellProps" + }, + "src": "uui-core/src/types/tables.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "DataTableHeaderCellProps", + "print": [ + "interface DataTableHeaderCellProps extends IEditable, IDropdownToggler, IHasCX, DataTableColumnsConfigOptions {", + " key: string;", + " column: DataColumnProps;", + " isFirstColumn: boolean;", + " isLastColumn: boolean;", + " selectAll?: ICheckable;", + " /**", + " * Enables collapse/expand all functionality.", + " * */", + " showFoldAll?: boolean;", + " /**", + " * Fold all click handler.", + " * If `showFoldAll` is not enabled, onFoldAll is not passed.", + " * */", + " onFoldAll?(): void;", + " /**", + " * Indicates if all nodes are folded.", + " */", + " areAllFolded?: boolean;", + " isFilterActive?: boolean;", + " sortDirection?: SortDirection;", + " onSort(dir: SortDirection): void;", + " onDrop?(params: DropParams, DataColumnProps>): void;", + " renderFilter?: (dropdownProps: IDropdownBodyProps) => React.ReactNode;", + "}" + ] + }, + "props": [ { - "uid": "id", - "name": "id", - "comment": { - "raw": [ - "ID of the TItem rows displays" - ] - }, + "uid": "key", + "name": "key", "typeValue": { - "raw": "TId" + "raw": "string" + }, + "editor": { + "type": "string" }, - "from": "@epam/uui-core:DataRowProps", "required": true }, { - "uid": "rowKey", - "name": "rowKey", - "comment": { - "raw": [ - "Key to be used as component's key when rendering. Usually, it's stringified ID" - ] - }, + "uid": "column", + "name": "column", "typeValue": { - "raw": "string" - }, - "editor": { - "type": "string" + "raw": "DataColumnProps" }, - "from": "@epam/uui-core:DataRowProps", "required": true }, { - "uid": "index", - "name": "index", - "comment": { - "raw": [ - "Index of the row, from the top of the list. This doesn't account any hierarchy." - ] - }, + "uid": "isFirstColumn", + "name": "isFirstColumn", "typeValue": { - "raw": "number" + "raw": "boolean" }, "editor": { - "type": "number" + "type": "bool" }, - "from": "@epam/uui-core:DataRowProps", "required": true }, { - "uid": "parentId", - "name": "parentId", - "comment": { - "raw": [ - "ID of the parent TItem" - ] - }, + "uid": "isLastColumn", + "name": "isLastColumn", "typeValue": { - "raw": "TId" + "raw": "boolean" }, - "from": "@epam/uui-core:DataRowProps", - "required": false + "editor": { + "type": "bool" + }, + "required": true }, { - "uid": "path", - "name": "path", - "comment": { - "raw": [ - "Hierarchical path from the root node to the item (excluding the item itself)" - ] - }, + "uid": "selectAll", + "name": "selectAll", "typeValue": { - "raw": "DataRowPathItem[]" + "raw": "ICheckable" }, - "from": "@epam/uui-core:DataRowProps", "required": false }, { - "uid": "depth", - "name": "depth", + "uid": "showFoldAll", + "name": "showFoldAll", "comment": { "raw": [ - "Depth of the row in tree, 0 for the top-level" + "Enables collapse/expand all functionality." ] }, "typeValue": { - "raw": "number" + "raw": "boolean" }, "editor": { - "type": "number" + "type": "bool" }, - "from": "@epam/uui-core:DataRowProps", "required": false }, { - "uid": "indent", - "name": "indent", + "uid": "onFoldAll", + "name": "onFoldAll", "comment": { "raw": [ - "Indent of the item, to show hierarchy.", - " Unlike depth, it contains additional logic, to not add unnecessary indents:", - " if all children of node has no children, all nodes would get the same indent as parent." + "Fold all click handler.", + " If `showFoldAll` is not enabled, onFoldAll is not passed." ] }, "typeValue": { - "raw": "number" + "raw": "() => void" }, "editor": { - "type": "number" + "type": "func" }, - "from": "@epam/uui-core:DataRowProps", "required": false }, { - "uid": "isLoading", - "name": "isLoading", + "uid": "areAllFolded", + "name": "areAllFolded", "comment": { "raw": [ - "True if row is in loading state. 'value' is empty in this case" + "Indicates if all nodes are folded." ] }, "typeValue": { @@ -9050,83 +8814,73 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:DataRowProps", "required": false }, { - "uid": "isUnknown", - "name": "isUnknown", - "comment": { - "raw": [ - "True if item doesn't exist in a dataSource" - ] - }, + "uid": "isFilterActive", + "name": "isFilterActive", "typeValue": { "raw": "boolean" }, "editor": { "type": "bool" }, - "from": "@epam/uui-core:DataRowProps", "required": false }, { - "uid": "isFoldable", - "name": "isFoldable", - "comment": { - "raw": [ - "True if row be folded or unfolded (usually because it contains children)" - ] - }, + "uid": "sortDirection", + "name": "sortDirection", "typeValue": { - "raw": "boolean" + "raw": "'asc' | 'desc'" }, "editor": { - "type": "bool" + "type": "oneOf", + "options": [ + "asc", + "desc" + ] }, - "from": "@epam/uui-core:DataRowProps", "required": false }, { - "uid": "isFolded", - "name": "isFolded", - "comment": { - "raw": [ - "True if row is currently folded" - ] + "uid": "onSort", + "name": "onSort", + "typeValue": { + "raw": "(dir: SortDirection) => void" + }, + "editor": { + "type": "func" }, + "required": true + }, + { + "uid": "onDrop", + "name": "onDrop", "typeValue": { - "raw": "boolean" + "raw": "(params: DropParams, DataColumnProps>) => void" }, "editor": { - "type": "bool" + "type": "func" }, - "from": "@epam/uui-core:DataRowProps", "required": false }, { - "uid": "isChecked", - "name": "isChecked", - "comment": { - "raw": [ - "True if row is checked with checkbox" - ] - }, + "uid": "renderFilter", + "name": "renderFilter", "typeValue": { - "raw": "boolean" + "raw": "(dropdownProps: IDropdownBodyProps) => React.ReactNode" }, "editor": { - "type": "bool" + "type": "component" }, - "from": "@epam/uui-core:DataRowProps", "required": false }, { - "uid": "isCheckable", - "name": "isCheckable", + "uid": "isInvalid", + "name": "isInvalid", "comment": { "raw": [ - "True if row has checkbox and can be checkable" + "True if component contains invalid input" ] }, "typeValue": { @@ -9135,16 +8889,15 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:DataRowProps", + "from": "@epam/uui-core:ICanBeInvalid", "required": false }, { - "uid": "isChildrenChecked", - "name": "isChildrenChecked", + "uid": "isDisabled", + "name": "isDisabled", "comment": { "raw": [ - "True if some of row's children are checked.", - " Used to show 'indefinite' checkbox state, to show user that something inside is checked" + "Disable editing, and visually de-emphasize value of the component" ] }, "typeValue": { @@ -9153,15 +8906,15 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:DataRowProps", + "from": "@epam/uui-core:IDisableable", "required": false }, { - "uid": "isSelected", - "name": "isSelected", + "uid": "isReadonly", + "name": "isReadonly", "comment": { "raw": [ - "True if row is selected (in single-select mode, or in case when interface use both single row selection and checkboxes)" + "Disable editing. Unlike isDisabled, keep component's value readable." ] }, "typeValue": { @@ -9170,15 +8923,15 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:DataRowProps", + "from": "@epam/uui-core:ICanBeReadonly", "required": false }, { - "uid": "isChildrenSelected", - "name": "isChildrenSelected", + "uid": "isRequired", + "name": "isRequired", "comment": { "raw": [ - "True if any of row's children is selected." + "Marks that component's value is required and shouldn't be empty" ] }, "typeValue": { @@ -9187,121 +8940,121 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:DataRowProps", + "from": "@epam/uui-core:ICanBeRequired", "required": false }, { - "uid": "isFocused", - "name": "isFocused", + "uid": "value", + "name": "value", "comment": { "raw": [ - "True if row is focused. Focus can be changed via keyboard arrow keys, or by hovering mouse on top of the row" + "The current value of component" ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "DataTableState" }, - "from": "@epam/uui-core:DataRowProps", - "required": false + "from": "@epam/uui-core:IControlled", + "required": true }, { - "uid": "isLastChild", - "name": "isLastChild", + "uid": "onValueChange", + "name": "onValueChange", "comment": { "raw": [ - "True if row is the last child of his parent" + "Called when value needs to be changed (usually due to user interaction)" ] }, "typeValue": { - "raw": "boolean" + "raw": "(newValue: DataTableState) => void" }, "editor": { - "type": "bool" + "type": "func" }, - "from": "@epam/uui-core:DataRowProps", - "required": false + "from": "@epam/uui-core:IControlled", + "required": true }, { - "uid": "onFold", - "name": "onFold", + "uid": "isOpen", + "name": "isOpen", "comment": { "raw": [ - "Handles row folding change.", - " We demand to pass the row as well, to avoid creating closures for each row." + "When isDropdown=true, indicate that dropdown is open with chevron icon" ] }, "typeValue": { - "raw": "(rowProps: DataRowProps) => void" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "from": "@epam/uui-core:DataRowProps", + "from": "@epam/uui-core:IDropdownToggler", "required": false }, { - "uid": "onCheck", - "name": "onCheck", + "uid": "isDropdown", + "name": "isDropdown", "comment": { "raw": [ - "Handles row checkbox change.", - " We demand to pass the row as well, to avoid creating closures for each row." + "Shows chevron icon, enabling component to act as dropdown toggler" ] }, "typeValue": { - "raw": "(rowProps: DataRowProps) => void" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "from": "@epam/uui-core:DataRowProps", + "from": "@epam/uui-core:IDropdownToggler", "required": false }, { - "uid": "onSelect", - "name": "onSelect", + "uid": "cx", + "name": "cx", "comment": { "raw": [ - "Handles row selection.", - " We demand to pass the row as well, to avoid creating closures for each row." + "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" ] }, "typeValue": { - "raw": "(rowProps: DataRowProps) => void" - }, - "editor": { - "type": "func" + "raw": "null | string | number | boolean | ClassDictionary | ClassArray" }, - "from": "@epam/uui-core:DataRowProps", + "typeValueRef": "@epam/uui-core:ClassValue", + "from": "@epam/uui-core:IHasCX", "required": false }, { - "uid": "onFocus", - "name": "onFocus", + "uid": "allowColumnsReordering", + "name": "allowColumnsReordering", "comment": { "raw": [ - "Handles row focusing." - ] + "If true, allows user to change columns order", + " @default false" + ], + "tags": { + "@default": false + } }, "typeValue": { - "raw": "(focusedIndex: number) => void" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "from": "@epam/uui-core:DataRowProps", + "from": "@epam/uui-core:DataTableColumnsConfigOptions", "required": false }, { - "uid": "isPinned", - "name": "isPinned", + "uid": "allowColumnsResizing", + "name": "allowColumnsResizing", "comment": { "raw": [ - "True if row pinned, it means that it will be sticky inside his nesting level" - ] + "If true, allows user to change columns width", + " @default false" + ], + "tags": { + "@default": false + } }, "typeValue": { "raw": "boolean" @@ -9309,19 +9062,19 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:DataRowProps", + "from": "@epam/uui-core:DataTableColumnsConfigOptions", "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:DataTableSelectedCellData": { + "@epam/uui-core:DataTableHeaderRowProps": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "DataTableSelectedCellData", - "nameFull": "DataTableSelectedCellData" + "name": "DataTableHeaderRowProps", + "nameFull": "DataTableHeaderRowProps" }, "src": "uui-core/src/types/tables.ts", "exported": true @@ -9329,611 +9082,551 @@ "details": { "kind": 264, "typeValue": { - "raw": "DataTableSelectedCellData", + "raw": "DataTableHeaderRowProps", "print": [ - "interface DataTableSelectedCellData {", - " /** Column props of the selected cell */", - " column: DataColumnProps;", - " /** Row props of the selected cell */", - " row: DataRowProps;", + "interface DataTableHeaderRowProps extends IEditable, IHasCX, DataTableColumnsConfigOptions {", + " columns: DataColumnProps[];", + " selectAll?: ICheckable;", + " /**", + " * Enables collapse/expand all functionality.", + " * */", + " showFoldAll?: boolean;", + " onConfigButtonClick?: (params: DataTableConfigModalParams) => any;", + " renderCell?: (props: DataTableHeaderCellProps) => React.ReactNode;", + " renderConfigButton?: () => React.ReactNode;", "}" ] }, "props": [ { - "uid": "column", - "name": "column", - "comment": { - "raw": [ - "Column props of the selected cell" - ] - }, + "uid": "columns", + "name": "columns", "typeValue": { - "raw": "DataColumnProps" + "raw": "DataColumnProps[]" }, "required": true }, { - "uid": "row", - "name": "row", - "comment": { - "raw": [ - "Row props of the selected cell" - ] - }, + "uid": "selectAll", + "name": "selectAll", "typeValue": { - "raw": "DataRowProps" + "raw": "ICheckable" }, - "typeValueRef": "@epam/uui-core:DataRowProps", - "required": true - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:DataTableState": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "DataTableState", - "nameFull": "DataTableState" - }, - "src": "uui-core/src/types/tables.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "DataTableState", - "print": [ - "interface DataTableState extends DataSourceState {", - " /** Configuration of columns at the DataTable. Used to define column visibility, width and order */", - " columnsConfig?: ColumnsConfig;", - " /** Configuration of filter at the FilterPanel. Used to define filter visibility and order */", - " filtersConfig?: FiltersConfig;", - " /** ID of currently selected preset */", - " presetId?: number | null;", - " /** State which will not trigger data reloading, but will be stored in presets or URL */", - " viewState?: TViewState;", - "}" - ] - }, - "props": [ + "required": false + }, { - "uid": "columnsConfig", - "name": "columnsConfig", + "uid": "showFoldAll", + "name": "showFoldAll", "comment": { "raw": [ - "Configuration of columns at the DataTable. Used to define column visibility, width and order" + "Enables collapse/expand all functionality." ] }, "typeValue": { - "raw": "ColumnsConfig" + "raw": "boolean" + }, + "editor": { + "type": "bool" }, "required": false }, { - "uid": "filtersConfig", - "name": "filtersConfig", - "comment": { - "raw": [ - "Configuration of filter at the FilterPanel. Used to define filter visibility and order" - ] - }, + "uid": "onConfigButtonClick", + "name": "onConfigButtonClick", "typeValue": { - "raw": "FiltersConfig" + "raw": "(params: DataTableConfigModalParams) => any" + }, + "editor": { + "type": "func" }, "required": false }, { - "uid": "presetId", - "name": "presetId", - "comment": { - "raw": [ - "ID of currently selected preset" - ] + "uid": "renderCell", + "name": "renderCell", + "typeValue": { + "raw": "(props: DataTableHeaderCellProps) => React.ReactNode" + }, + "editor": { + "type": "component" }, + "required": false + }, + { + "uid": "renderConfigButton", + "name": "renderConfigButton", "typeValue": { - "raw": "null | number" + "raw": "() => React.ReactNode" }, "editor": { - "type": "number" + "type": "component" }, "required": false }, { - "uid": "viewState", - "name": "viewState", + "uid": "isInvalid", + "name": "isInvalid", "comment": { "raw": [ - "State which will not trigger data reloading, but will be stored in presets or URL" + "True if component contains invalid input" ] }, "typeValue": { - "raw": "TViewState" + "raw": "boolean" + }, + "editor": { + "type": "bool" }, + "from": "@epam/uui-core:ICanBeInvalid", "required": false }, { - "uid": "search", - "name": "search", + "uid": "isDisabled", + "name": "isDisabled", "comment": { "raw": [ - "Search value, used to filter data based on it.", - " Included in the API request object when using a LazyDataSource.", - " For Array and Async data sources, searching is performed internally by the datasource." + "Disable editing, and visually de-emphasize value of the component" ] }, "typeValue": { - "raw": "string" + "raw": "boolean" }, "editor": { - "type": "string" + "type": "bool" }, - "from": "@epam/uui-core:DataSourceState", + "from": "@epam/uui-core:IDisableable", "required": false }, { - "uid": "checked", - "name": "checked", + "uid": "isReadonly", + "name": "isReadonly", "comment": { "raw": [ - "Array of checked items IDs" + "Disable editing. Unlike isDisabled, keep component's value readable." ] }, "typeValue": { - "raw": "any[]" + "raw": "boolean" }, - "from": "@epam/uui-core:DataSourceState", + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:ICanBeReadonly", "required": false }, { - "uid": "folded", - "name": "folded", + "uid": "isRequired", + "name": "isRequired", "comment": { "raw": [ - "A map of item IDs to their folding state.", - " If an item ID is present with a `true` value, it's folded; otherwise, it's not folded." + "Marks that component's value is required and shouldn't be empty" ] }, "typeValue": { - "raw": "Record" + "raw": "boolean" }, - "from": "@epam/uui-core:DataSourceState", + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:ICanBeRequired", "required": false }, { - "uid": "filter", - "name": "filter", + "uid": "value", + "name": "value", "comment": { "raw": [ - "Filter value used to filter data based on it.", - " Included in the API request object when using a LazyDataSource.", - " For Array and Async data sources, filtering is performed internally by the datasource." + "The current value of component" ] }, "typeValue": { - "raw": "TFilter" + "raw": "DataTableState" }, - "from": "@epam/uui-core:DataSourceState", - "required": false + "from": "@epam/uui-core:IControlled", + "required": true }, { - "uid": "sorting", - "name": "sorting", + "uid": "onValueChange", + "name": "onValueChange", "comment": { "raw": [ - "Sorting value, used to sort data based on it.", - " Included in the API request object when using a LazyDataSource.", - " For Array and Async data sources, sorting is performed internally by the datasource." + "Called when value needs to be changed (usually due to user interaction)" ] }, "typeValue": { - "raw": "SortingOption[]" + "raw": "(newValue: DataTableState) => void" }, - "from": "@epam/uui-core:DataSourceState", - "required": false + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IControlled", + "required": true }, { - "uid": "selectedId", - "name": "selectedId", + "uid": "cx", + "name": "cx", "comment": { "raw": [ - "ID of selected item. It can be only one selected item at the moment." + "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" ] }, "typeValue": { - "raw": "any" + "raw": "null | string | number | boolean | ClassDictionary | ClassArray" }, - "from": "@epam/uui-core:DataSourceState", + "typeValueRef": "@epam/uui-core:ClassValue", + "from": "@epam/uui-core:IHasCX", "required": false }, { - "uid": "focusedIndex", - "name": "focusedIndex", + "uid": "allowColumnsReordering", + "name": "allowColumnsReordering", "comment": { "raw": [ - "Index of currently focused item" - ] + "If true, allows user to change columns order", + " @default false" + ], + "tags": { + "@default": false + } }, "typeValue": { - "raw": "number" + "raw": "boolean" }, "editor": { - "type": "number" + "type": "bool" }, - "from": "@epam/uui-core:DataSourceState", + "from": "@epam/uui-core:DataTableColumnsConfigOptions", "required": false }, { - "uid": "page", - "name": "page", + "uid": "allowColumnsResizing", + "name": "allowColumnsResizing", "comment": { "raw": [ - "Current page number" - ] + "If true, allows user to change columns width", + " @default false" + ], + "tags": { + "@default": false + } }, "typeValue": { - "raw": "number" + "raw": "boolean" }, "editor": { - "type": "number" + "type": "bool" }, - "from": "@epam/uui-core:DataSourceState", + "from": "@epam/uui-core:DataTableColumnsConfigOptions", "required": false - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:DataTableRowProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "DataTableRowProps", + "nameFull": "DataTableRowProps" + }, + "src": "uui-core/src/types/tables.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "DataTableRowProps", + "print": [ + "interface DataTableRowProps extends DataRowProps {", + " /** Array of visible columns */", + " columns?: DataColumnProps[];", + " /**", + " * Render callback for each cell at row.", + " * If omitted, default cell renderer will be used.", + " * */", + " renderCell?: (props: DataTableCellProps) => ReactNode;", + " /**", + " * Render callback for the drop marker. Rendered only if 'dnd' option was provided via getRowProps.", + " * If omitted, default renderer will be used.", + " * */", + " renderDropMarkers?: (props: DndActorRenderParams) => ReactNode;", + "}" + ] + }, + "props": [ { - "uid": "pageSize", - "name": "pageSize", + "uid": "columns", + "name": "columns", "comment": { "raw": [ - "The amount of items per page" + "Array of visible columns" ] }, "typeValue": { - "raw": "number" - }, - "editor": { - "type": "number" + "raw": "DataColumnProps[]" }, - "from": "@epam/uui-core:DataSourceState", "required": false }, { - "uid": "foldAll", - "name": "foldAll", + "uid": "renderCell", + "name": "renderCell", "comment": { "raw": [ - "Provides default folding of nodes if the opposite value is not present in the folded map.", - " It is used to collapse/expand all nodes." + "Render callback for each cell at row.", + " If omitted, default cell renderer will be used." ] }, "typeValue": { - "raw": "boolean" + "raw": "(props: DataTableCellProps) => React.ReactNode" }, "editor": { - "type": "bool" - }, - "from": "@epam/uui-core:DataSourceState", - "required": false - }, - { - "uid": "scrollTo", - "name": "scrollTo", - "comment": { - "raw": [ - "Virtual list ensures that row with this Index is within the visible area, if not Virtual List .", - " Virtual list updates this value on scroll to null when appear in the visible area.", - " If this value is updated manually, Virtual List would scroll to the specified items.", - " It would attempt to put scroll so this item will be at the top of the list." - ] - }, - "typeValue": { - "raw": "ScrollToConfig" + "type": "component" }, - "from": "@epam/uui-core:VirtualListState", "required": false }, { - "uid": "topIndex", - "name": "topIndex", + "uid": "renderDropMarkers", + "name": "renderDropMarkers", "comment": { "raw": [ - "Index of the topmost item, in rendered batch.", - " Note - this item might not be visible, as Virtual List maintain some reserve of rows on top / at the bottom of the list" + "Render callback for the drop marker. Rendered only if 'dnd' option was provided via getRowProps.", + " If omitted, default renderer will be used." ] }, "typeValue": { - "raw": "number" + "raw": "(props: DndActorRenderParams) => React.ReactNode" }, "editor": { - "type": "number" + "type": "component" }, - "from": "@epam/uui-core:VirtualListRange", "required": false }, { - "uid": "visibleCount", - "name": "visibleCount", + "uid": "cx", + "name": "cx", "comment": { "raw": [ - "Number of currently rendered items.", - " Virtual list updates this value automatically, if it too small.", - " Note Virtual List renders more items, that actually visible,", - " as it need maintain some reserve of rows on top / at the bottom of the list." + "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" ] }, "typeValue": { - "raw": "number" - }, - "editor": { - "type": "number" + "raw": "null | string | number | boolean | ClassDictionary | ClassArray" }, - "from": "@epam/uui-core:VirtualListRange", + "typeValueRef": "@epam/uui-core:ClassValue", + "from": "@epam/uui-core:IHasCX", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:DatePickerCoreProps": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "DatePickerCoreProps", - "nameFull": "DatePickerCoreProps" - }, - "src": "uui-core/src/types/components/datePicker/DatePicker.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "DatePickerCoreProps", - "print": [ - "interface DatePickerCoreProps extends BaseDatePickerProps {", - " /** render prop to add a custom footer inside the DatePicker dropdown body */", - " renderFooter?(): ReactNode;", - "}" - ] - }, - "props": [ + }, { - "uid": "renderFooter", - "name": "renderFooter", + "uid": "onClick", + "name": "onClick", "comment": { "raw": [ - "render prop to add a custom footer inside the DatePicker dropdown body" + "Called when component is clicked" ] }, "typeValue": { - "raw": "() => React.ReactNode" + "raw": "((e?: any) => void) & ((rowProps: DataRowProps) => void) & ((rowProps: DataRowProps) => void)" }, "editor": { - "type": "component" + "type": "func" }, + "from": "@epam/uui-core:IClickable", "required": false }, { - "uid": "format", - "name": "format", - "comment": { - "raw": [ - "Date format string, see [dayjs docs](@link https://day.js.org/docs/en/display/format)" - ] - }, + "uid": "key", + "name": "key", "typeValue": { - "raw": "string" - }, - "editor": { - "type": "string" + "raw": "null | string | number" }, - "from": "@epam/uui-core:BaseDatePickerProps", + "from": "@types/react:Attributes", "required": false }, { - "uid": "filter", - "name": "filter", + "uid": "children", + "name": "children", "comment": { "raw": [ - "Filter selectable days. Days, for which this callback returns false - will be disabled" + "Component children" ] }, "typeValue": { - "raw": "(day: Dayjs) => boolean" - }, - "editor": { - "type": "func" + "raw": "React.ReactNode" }, - "from": "@epam/uui-core:BaseDatePickerProps", + "typeValueRef": "@types/react:ReactNode", + "from": "@epam/uui-core:IHasChildren", "required": false }, { - "uid": "renderTarget", - "name": "renderTarget", + "uid": "rawProps", + "name": "rawProps", "comment": { "raw": [ - "Overrides rendering of picker Target - component which triggers dropdown. Can be used to attach DatePicker to other components, e.g. Buttons" + "Any HTML attributes (native or 'data-') to put on the underlying component" ] }, "typeValue": { - "raw": "(props: IDropdownToggler) => React.ReactNode" - }, - "editor": { - "type": "component" + "raw": "React.HTMLAttributes & Record<`data-${string}`, string>" }, - "from": "@epam/uui-core:BaseDatePickerProps", + "from": "@epam/uui-core:IHasRawProps", "required": false }, { - "uid": "iconPosition", - "name": "iconPosition", + "uid": "alignItems", + "name": "alignItems", "comment": { "raw": [ - "Defines where to place calendar icon" - ] + "Flexbox align-items property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)", + " @default 'center'" + ], + "tags": { + "@default": "center" + } }, "typeValue": { - "raw": "'left' | 'right'" + "raw": "'top' | 'bottom' | 'center' | 'stretch'" }, "editor": { "type": "oneOf", "options": [ - "left", - "right" + "top", + "bottom", + "center", + "stretch" ] }, - "from": "@epam/uui-core:BaseDatePickerProps", + "from": "@epam/uui-core:FlexRowProps", "required": false }, { - "uid": "disableClear", - "name": "disableClear", + "uid": "justifyContent", + "name": "justifyContent", "comment": { "raw": [ - "Disable clearing date value (e.g. via cross icon)", - " @default false" - ], - "tags": { - "@default": false - } + "Flexbox justifyContent property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)" + ] }, "typeValue": { - "raw": "boolean" + "raw": "'center' | 'space-around' | 'space-between' | 'space-evenly' | 'end' | 'start'" }, "editor": { - "type": "bool" + "type": "oneOf", + "options": [ + "center", + "space-around", + "space-between", + "space-evenly", + "end", + "start" + ] }, - "from": "@epam/uui-core:BaseDatePickerProps", + "from": "@epam/uui-core:FlexRowProps", "required": false }, { - "uid": "renderDay", - "name": "renderDay", + "uid": "columnGap", + "name": "columnGap", "comment": { "raw": [ - "Overrides rendering of the single day. For example, to highlight certain days" + "Flexbox column gap property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-gap-row-gap-column-gap)" ] }, "typeValue": { - "raw": "(day: Dayjs, onDayClick: (day: Dayjs) => void) => React.ReactElement>" - }, - "editor": { - "type": "component" + "raw": "number | '6' | '12' | '18' | '24' | '36'" }, - "from": "@epam/uui-core:BaseDatePickerProps", + "from": "@epam/uui-core:FlexRowProps", "required": false }, { - "uid": "isHoliday", - "name": "isHoliday", + "uid": "rowGap", + "name": "rowGap", "comment": { "raw": [ - "If this function returns true, the day will be highlighted as holiday" + "Flexbox row gap property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-gap-row-gap-column-gap)" ] }, "typeValue": { - "raw": "(day: Dayjs) => boolean" - }, - "editor": { - "type": "func" + "raw": "number | '6' | '12' | '18' | '24' | '36'" }, - "from": "@epam/uui-core:BaseDatePickerProps", + "from": "@epam/uui-core:FlexRowProps", "required": false }, { - "uid": "onBlur", - "name": "onBlur", + "uid": "checkbox", + "name": "checkbox", "comment": { "raw": [ - "Called when component lose focus" + "If row needs a checkbox, this field should be specified, and it props can be configured here" ] }, "typeValue": { - "raw": "(e?: React.FocusEvent | undefined) => void" - }, - "editor": { - "type": "func" + "raw": "{ isVisible: boolean; } & IDisableable & ICanBeInvalid" }, - "from": "@epam/uui-core:BaseDatePickerProps", + "from": "@epam/uui-core:DataRowOptions", "required": false }, { - "uid": "placement", - "name": "placement", + "uid": "isSelectable", + "name": "isSelectable", "comment": { "raw": [ - "Dropdown position relative to the input. See [Popper Docs](@link https://popper.js.org/)" + "True if row is selectable (for whole-row single-selection, multi-selection via checkbox are configured with the checkbox prop)" ] }, "typeValue": { - "raw": "'left' | 'right' | 'auto' | 'auto-start' | 'auto-end' | 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end'" + "raw": "boolean" }, "editor": { - "type": "oneOf", - "options": [ - "left", - "right", - "auto", - "auto-start", - "auto-end", - "top", - "bottom", - "top-start", - "top-end", - "bottom-start", - "bottom-end", - "right-start", - "right-end", - "left-start", - "left-end" - ] + "type": "bool" }, - "from": "@epam/uui-core:BaseDatePickerProps", + "from": "@epam/uui-core:DataRowOptions", "required": false }, { - "uid": "rawProps", - "name": "rawProps", + "uid": "dnd", + "name": "dnd", "comment": { "raw": [ - "Any HTML attributes (native or 'data-') to put on date picker parts" + "Configures row drag-n-drop options - if it can be dragged, can rows can be dropped into it, etc." ] }, "typeValue": { - "raw": "{ input?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; }" + "raw": "IDndActor" }, - "from": "@epam/uui-core:BaseDatePickerProps", + "from": "@epam/uui-core:DataRowOptions", "required": false }, { - "uid": "inputCx", - "name": "inputCx", + "uid": "link", + "name": "link", "comment": { "raw": [ - "CSS class(es) to put on datepicker input" + "Can be specified to make row act as a link (plain or SPA)" ] }, "typeValue": { - "raw": "null | string | number | boolean | ClassDictionary | ClassArray" + "raw": "Link" }, - "typeValueRef": "@epam/uui-core:ClassValue", - "from": "@epam/uui-core:BaseDatePickerProps", + "from": "@epam/uui-core:DataRowOptions", "required": false }, { - "uid": "bodyCx", - "name": "bodyCx", + "uid": "pin", + "name": "pin", "comment": { "raw": [ - "CSS class(es) to put on datepicker body" + "A pure function that gets pinned state for each row.", + " If row pinned, it means that it will be sticky inside their parent section." ] }, "typeValue": { - "raw": "null | string | number | boolean | ClassDictionary | ClassArray" + "raw": "(rowProps: DataRowProps) => boolean" }, - "typeValueRef": "@epam/uui-core:ClassValue", - "from": "@epam/uui-core:BaseDatePickerProps", + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:DataRowOptions", "required": false }, { @@ -10013,10 +9706,7 @@ ] }, "typeValue": { - "raw": "null | string" - }, - "editor": { - "type": "string" + "raw": "TItem" }, "from": "@epam/uui-core:IControlled", "required": true @@ -10030,248 +9720,147 @@ ] }, "typeValue": { - "raw": "(newValue: string | null) => void" + "raw": "(newValue: TItem) => void" }, "editor": { "type": "func" }, "from": "@epam/uui-core:IControlled", - "required": true + "required": false }, { - "uid": "onFocus", - "name": "onFocus", + "uid": "validationMessage", + "name": "validationMessage", "comment": { "raw": [ - "Called when component gets input focus" + "Message describing why the value is invalid" ] }, "typeValue": { - "raw": "(e: React.FocusEvent) => void" - }, - "editor": { - "type": "func" + "raw": "React.ReactNode" }, - "from": "@epam/uui-core:ICanFocus", + "typeValueRef": "@types/react:ReactNode", + "from": "@epam/uui-core:IHasValidationMessage", "required": false }, { - "uid": "placeholder", - "name": "placeholder", + "uid": "id", + "name": "id", "comment": { "raw": [ - "Placeholder to display when empty" + "ID of the TItem rows displays" ] }, "typeValue": { - "raw": "any" + "raw": "TId" }, - "from": "@epam/uui-core:IHasPlaceholder", - "required": false + "from": "@epam/uui-core:DataRowProps", + "required": true }, { - "uid": "getValueChangeAnalyticsEvent", - "name": "getValueChangeAnalyticsEvent", + "uid": "rowKey", + "name": "rowKey", "comment": { "raw": [ - "Given a value, returns an analytics event to send when component is edited.", - " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)." + "Key to be used as component's key when rendering. Usually, it's stringified ID" ] }, "typeValue": { - "raw": "(newValue: string | null, oldValue: string | null) => AnalyticsEvent" + "raw": "string" }, "editor": { - "type": "func" + "type": "string" }, - "from": "@epam/uui-core:IAnalyticableOnChange", - "required": false + "from": "@epam/uui-core:DataRowProps", + "required": true }, { - "uid": "forwardedRef", - "name": "forwardedRef", - "comment": { - "raw": [ - "this ref is passed to the underlying component" - ] - }, - "typeValue": { - "raw": "null | (instance: HTMLElement | null) => void | React.MutableRefObject" - }, - "from": "@epam/uui-core:IHasForwardedRef", - "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:DndActorProps": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "DndActorProps", - "nameFull": "DndActorProps" - }, - "src": "uui-core/src/services/dnd/DndActor.tsx", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "DndActorProps", - "print": [ - "interface DndActorProps extends IDndActor {", - " /** Render callback for DragActor content */", - " render(props: DndActorRenderParams): React.ReactNode;", - "}" - ] - }, - "props": [ - { - "uid": "render", - "name": "render", + "uid": "index", + "name": "index", "comment": { "raw": [ - "Render callback for DragActor content" + "Index of the row, from the top of the list. This doesn't account any hierarchy." ] }, "typeValue": { - "raw": "(props: DndActorRenderParams) => React.ReactNode" + "raw": "number" }, "editor": { - "type": "component" + "type": "number" }, + "from": "@epam/uui-core:DataRowProps", "required": true }, { - "uid": "srcData", - "name": "srcData", + "uid": "parentId", + "name": "parentId", "comment": { "raw": [ - "Data used when this component acts as a drag source.", - " If provided, it means this component can be dragged. Can be used in combination with dstData." + "ID of the parent TItem" ] }, "typeValue": { - "raw": "TSrcData" + "raw": "TId" }, - "from": "@epam/uui-core:IDndActor", + "from": "@epam/uui-core:DataRowProps", "required": false }, { - "uid": "dstData", - "name": "dstData", + "uid": "path", + "name": "path", "comment": { "raw": [ - "Data used when this component acts as a drop destination.", - " If provided, it means something can be dragged onto this component. Can be used in combination with srcData." + "Hierarchical path from the root node to the item (excluding the item itself)" ] }, "typeValue": { - "raw": "TDstData" + "raw": "DataRowPathItem[]" }, - "from": "@epam/uui-core:IDndActor", + "from": "@epam/uui-core:DataRowProps", "required": false }, { - "uid": "canAcceptDrop", - "name": "canAcceptDrop", + "uid": "depth", + "name": "depth", "comment": { "raw": [ - "A pure function that gets permitted positions for a drop action" + "Depth of the row in tree, 0 for the top-level" ] }, "typeValue": { - "raw": "(params: AcceptDropParams) => Partial> | null" + "raw": "number" }, "editor": { - "type": "func" + "type": "number" }, - "from": "@epam/uui-core:IDndActor", + "from": "@epam/uui-core:DataRowProps", "required": false }, { - "uid": "onDrop", - "name": "onDrop", + "uid": "indent", + "name": "indent", "comment": { "raw": [ - "Called when accepted drop action performed on this actor. Usually used to reorder and update items" + "Indent of the item, to show hierarchy.", + " Unlike depth, it contains additional logic, to not add unnecessary indents:", + " if all children of node has no children, all nodes would get the same indent as parent." ] }, "typeValue": { - "raw": "(data: DropParams) => void" + "raw": "number" }, "editor": { - "type": "func" + "type": "number" }, - "from": "@epam/uui-core:IDndActor", + "from": "@epam/uui-core:DataRowProps", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:DndActorRenderParams": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "DndActorRenderParams", - "nameFull": "DndActorRenderParams" - }, - "src": "uui-core/src/types/dnd.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "DndActorRenderParams", - "print": [ - "interface DndActorRenderParams {", - " /** True, if the element can be dragged. Doesn't mean that DnD is active. */", - " isDraggable: boolean;", - " /** True, if the element is dragged out. True for placeholder left when it's element it dragged out. False for Drag Ghost. */", - " isDraggedOut: boolean;", - " /** True, if the element is rendered as Drag Ghost. All other flags are false for drag ghost. */", - " isDragGhost: boolean;", - " /** True, if the element is being dragged over, even if drop is not accepted by the element (canAcceptDrop returned false) */", - " isDraggedOver: boolean;", - " /** True, if the element is being dragged over, and drop on it is accepted - canAcceptDrop returned true */", - " isDropAccepted: boolean;", - " /** True if any drag and drop operation is in progress, even if the element not being dragged */", - " isDndInProgress: boolean;", - " /** Drag data associated with the element. Specified always, even if there is no DnD operation happening. */", - " dragData?: any;", - " /** Drop position. Chosen from accepted drop positions according to pointer coordinates */", - " position?: DropPosition;", - " /**", - " * Event handlers. Component is expected to pass these events to the top element it renders.", - " * As onClick event on the element will be overwritten, use DndActorProps.onClick to receive click events on the element", - " */", - " eventHandlers: {", - " onTouchStart?(e: React.TouchEvent): void;", - " onPointerDown?(e: React.PointerEvent): void;", - " onPointerEnter?(e: React.PointerEvent): void;", - " onPointerMove?(e: React.PointerEvent): void;", - " onPointerLeave?(e: React.PointerEvent): void;", - " onPointerUp?(e: React.PointerEvent): void;", - " };", - " /**", - " * CSS class names to add to the element.", - " * Some of these markers are used by the DndActor internally, so they must be added even if no used by component itself to apply styles.", - " */", - " classNames: string[];", - " /** Ref to the DOM element to perform DnD actions */", - " ref?: React.Ref;", - "}" - ] - }, - "props": [ + }, { - "uid": "isDraggable", - "name": "isDraggable", + "uid": "isLoading", + "name": "isLoading", "comment": { "raw": [ - "True, if the element can be dragged. Doesn't mean that DnD is active." + "True if row is in loading state. 'value' is empty in this case" ] }, "typeValue": { @@ -10280,14 +9869,15 @@ "editor": { "type": "bool" }, - "required": true + "from": "@epam/uui-core:DataRowProps", + "required": false }, { - "uid": "isDraggedOut", - "name": "isDraggedOut", + "uid": "isUnknown", + "name": "isUnknown", "comment": { "raw": [ - "True, if the element is dragged out. True for placeholder left when it's element it dragged out. False for Drag Ghost." + "True if item doesn't exist in a dataSource" ] }, "typeValue": { @@ -10296,14 +9886,15 @@ "editor": { "type": "bool" }, - "required": true + "from": "@epam/uui-core:DataRowProps", + "required": false }, { - "uid": "isDragGhost", - "name": "isDragGhost", + "uid": "isFoldable", + "name": "isFoldable", "comment": { "raw": [ - "True, if the element is rendered as Drag Ghost. All other flags are false for drag ghost." + "True if row be folded or unfolded (usually because it contains children)" ] }, "typeValue": { @@ -10312,14 +9903,15 @@ "editor": { "type": "bool" }, - "required": true + "from": "@epam/uui-core:DataRowProps", + "required": false }, { - "uid": "isDraggedOver", - "name": "isDraggedOver", + "uid": "isFolded", + "name": "isFolded", "comment": { "raw": [ - "True, if the element is being dragged over, even if drop is not accepted by the element (canAcceptDrop returned false)" + "True if row is currently folded" ] }, "typeValue": { @@ -10328,14 +9920,15 @@ "editor": { "type": "bool" }, - "required": true + "from": "@epam/uui-core:DataRowProps", + "required": false }, { - "uid": "isDropAccepted", - "name": "isDropAccepted", + "uid": "isChecked", + "name": "isChecked", "comment": { "raw": [ - "True, if the element is being dragged over, and drop on it is accepted - canAcceptDrop returned true" + "True if row is checked with checkbox" ] }, "typeValue": { @@ -10344,14 +9937,15 @@ "editor": { "type": "bool" }, - "required": true + "from": "@epam/uui-core:DataRowProps", + "required": false }, { - "uid": "isDndInProgress", - "name": "isDndInProgress", + "uid": "isCheckable", + "name": "isCheckable", "comment": { "raw": [ - "True if any drag and drop operation is in progress, even if the element not being dragged" + "True if row has checkbox and can be checkable" ] }, "typeValue": { @@ -10360,204 +9954,172 @@ "editor": { "type": "bool" }, - "required": true + "from": "@epam/uui-core:DataRowProps", + "required": false }, { - "uid": "dragData", - "name": "dragData", + "uid": "isChildrenChecked", + "name": "isChildrenChecked", "comment": { "raw": [ - "Drag data associated with the element. Specified always, even if there is no DnD operation happening." + "True if some of row's children are checked.", + " Used to show 'indefinite' checkbox state, to show user that something inside is checked" ] }, "typeValue": { - "raw": "any" + "raw": "boolean" + }, + "editor": { + "type": "bool" }, + "from": "@epam/uui-core:DataRowProps", "required": false }, { - "uid": "position", - "name": "position", + "uid": "isSelected", + "name": "isSelected", "comment": { "raw": [ - "Drop position. Chosen from accepted drop positions according to pointer coordinates" + "True if row is selected (in single-select mode, or in case when interface use both single row selection and checkboxes)" ] }, "typeValue": { - "raw": "'left' | 'right' | 'top' | 'bottom' | 'inside'" + "raw": "boolean" }, "editor": { - "type": "oneOf", - "options": [ - "left", - "right", - "top", - "bottom", - "inside" - ] + "type": "bool" }, + "from": "@epam/uui-core:DataRowProps", "required": false }, { - "uid": "eventHandlers", - "name": "eventHandlers", + "uid": "isChildrenSelected", + "name": "isChildrenSelected", "comment": { "raw": [ - "Event handlers. Component is expected to pass these events to the top element it renders.", - " As onClick event on the element will be overwritten, use DndActorProps.onClick to receive click events on the element" + "True if any of row's children is selected." ] }, "typeValue": { - "raw": "{ onTouchStart?(e: React.TouchEvent): void; onPointerDown?(e: React.PointerEvent): void; onPointerEnter?(e: React.PointerEvent): void; onPointerMove?(e: React.PointerEvent): void; onPointerLeave?(e: React.PointerEvent): void; onPointerUp?(e: React.PointerEvent): void; }" + "raw": "boolean" }, - "required": true + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:DataRowProps", + "required": false }, { - "uid": "classNames", - "name": "classNames", + "uid": "isFocused", + "name": "isFocused", "comment": { "raw": [ - "CSS class names to add to the element.", - " Some of these markers are used by the DndActor internally, so they must be added even if no used by component itself to apply styles." + "True if row is focused. Focus can be changed via keyboard arrow keys, or by hovering mouse on top of the row" ] }, "typeValue": { - "raw": "string[]" + "raw": "boolean" }, - "required": true + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:DataRowProps", + "required": false }, { - "uid": "ref", - "name": "ref", + "uid": "isLastChild", + "name": "isLastChild", "comment": { "raw": [ - "Ref to the DOM element to perform DnD actions" + "True if row is the last child of his parent" ] }, "typeValue": { - "raw": "null | (instance: any) => void | React.RefObject" + "raw": "boolean" + }, + "editor": { + "type": "bool" }, + "from": "@epam/uui-core:DataRowProps", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:DragGhostProps": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "DragGhostProps", - "nameFull": "DragGhostProps" - }, - "src": "uui-core/src/services/dnd/DragGhost.tsx", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "DragGhostProps", - "print": [ - "interface DragGhostProps {", - "}" - ] - } - } - }, - "@epam/uui-core:DropdownBodyProps": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "DropdownBodyProps", - "nameFull": "DropdownBodyProps" - }, - "src": "uui-core/src/types/components/Dropdown.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "DropdownBodyProps", - "print": [ - "interface DropdownBodyProps extends IDropdownBodyProps {", - "}" - ] - }, - "props": [ + }, { - "uid": "onClose", - "name": "onClose", + "uid": "onFold", + "name": "onFold", "comment": { "raw": [ - "Call to close the Dropdown body" + "Handles row folding change.", + " We demand to pass the row as well, to avoid creating closures for each row." ] }, "typeValue": { - "raw": "() => void" + "raw": "(rowProps: DataRowProps) => void" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:IDropdownBodyProps", + "from": "@epam/uui-core:DataRowProps", "required": false }, { - "uid": "togglerWidth", - "name": "togglerWidth", + "uid": "onCheck", + "name": "onCheck", "comment": { "raw": [ - "The width of the toggler, which can be used to adjust the body width to it" + "Handles row checkbox change.", + " We demand to pass the row as well, to avoid creating closures for each row." ] }, "typeValue": { - "raw": "number" + "raw": "(rowProps: DataRowProps) => void" }, "editor": { - "type": "number" + "type": "func" }, - "from": "@epam/uui-core:IDropdownBodyProps", + "from": "@epam/uui-core:DataRowProps", "required": false }, { - "uid": "togglerHeight", - "name": "togglerHeight", + "uid": "onSelect", + "name": "onSelect", "comment": { "raw": [ - "The height of the toggler" + "Handles row selection.", + " We demand to pass the row as well, to avoid creating closures for each row." ] }, "typeValue": { - "raw": "number" + "raw": "(rowProps: DataRowProps) => void" }, "editor": { - "type": "number" + "type": "func" }, - "from": "@epam/uui-core:IDropdownBodyProps", + "from": "@epam/uui-core:DataRowProps", "required": false }, { - "uid": "scheduleUpdate", - "name": "scheduleUpdate", + "uid": "onFocus", + "name": "onFocus", "comment": { "raw": [ - "Call to force recompute dropdown position" + "Handles row focusing." ] }, "typeValue": { - "raw": "() => void" + "raw": "(focusedIndex: number) => void" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:IDropdownBodyProps", + "from": "@epam/uui-core:DataRowProps", "required": false }, { - "uid": "isOpen", - "name": "isOpen", + "uid": "isPinned", + "name": "isPinned", "comment": { "raw": [ - "Indicates that dropdown is open" + "True if row pinned, it means that it will be sticky inside his nesting level" ] }, "typeValue": { @@ -10566,307 +10128,252 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:IDropdownBodyProps", + "from": "@epam/uui-core:DataRowProps", "required": false - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:DataTableSelectedCellData": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "DataTableSelectedCellData", + "nameFull": "DataTableSelectedCellData" + }, + "src": "uui-core/src/types/tables.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "DataTableSelectedCellData", + "print": [ + "interface DataTableSelectedCellData {", + " /** Column props of the selected cell */", + " column: DataColumnProps;", + " /** Row props of the selected cell */", + " row: DataRowProps;", + "}" + ] + }, + "props": [ { - "uid": "arrowProps", - "name": "arrowProps", + "uid": "column", + "name": "column", "comment": { "raw": [ - "Props that should be provided to the arrow component" + "Column props of the selected cell" ] }, "typeValue": { - "raw": "PopperArrowProps" + "raw": "DataColumnProps" }, - "from": "@epam/uui-core:IDropdownBodyProps", - "required": false + "required": true }, { - "uid": "placement", - "name": "placement", + "uid": "row", + "name": "row", "comment": { "raw": [ - "Dropdown position relative to the input. See [Popper Docs](@link https://popper.js.org/)" + "Row props of the selected cell" ] }, "typeValue": { - "raw": "'left' | 'right' | 'auto' | 'auto-start' | 'auto-end' | 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end'" - }, - "editor": { - "type": "oneOf", - "options": [ - "left", - "right", - "auto", - "auto-start", - "auto-end", - "top", - "bottom", - "top-start", - "top-end", - "bottom-start", - "bottom-end", - "right-start", - "right-end", - "left-start", - "left-end" - ] + "raw": "DataRowProps" }, - "from": "@epam/uui-core:IDropdownBodyProps", - "required": false + "typeValueRef": "@epam/uui-core:DataRowProps", + "required": true } ], "propsFromUnion": false } }, - "@epam/uui-core:DropdownPlacement": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "DropdownPlacement", - "nameFull": "DropdownPlacement" - }, - "src": "uui-core/src/types/components/Dropdown.ts", - "exported": true - }, - "details": { - "kind": 265, - "typeValue": { - "raw": "Placement", - "print": [ - "type DropdownPlacement = Placement;" - ] - } - } - }, - "@epam/uui-core:DropdownProps": { + "@epam/uui-core:DataTableState": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "DropdownProps", - "nameFull": "DropdownProps" + "name": "DataTableState", + "nameFull": "DataTableState" }, - "src": "uui-core/src/types/components/Dropdown.ts", + "src": "uui-core/src/types/tables.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "DropdownProps", + "raw": "DataTableState", "print": [ - "interface DropdownProps extends Partial>, IHasForwardedRef {", - " /**", - " * Render callback for the dropdown target.", - " * Note, that it's required to pass 'props' parameters to the target component.", - " */", - " renderTarget: (props: IDropdownTogglerProps) => React.ReactNode;", - " /** Render callback for the dropdown body */", - " renderBody: (props: DropdownBodyProps) => React.ReactNode;", - " /** Called when dropdown was closed */", - " onClose?: () => void;", - " /** Disable dropdown opening */", - " isNotUnfoldable?: boolean;", - " /** zIndex for dropdown body", - " * By default used value received by LayoutContext", - " * */", - " zIndex?: number;", - " /** Defines dropdown body placement relative to target */", - " placement?: DropdownPlacement;", - " /** Original popper.js modifiers. See [Popper docs]{@link https://popper.js.org/docs/v2/modifiers/} */", - " modifiers?: Modifier[];", - " /** Defines how much 'ms' user should hold mouse over target to open the dropdown", - " * This prop work only with openOnHover={true}", - " * @default 0", - " * */", - " openDelay?: number;", - " /** Defines after which delay dropdown will be closed, if user leave mouse from target.", - " * This prop work only with openOnHover={true}", - " * @default 0", - " * */", - " closeDelay?: number;", - " /** If true, dropdown will be opened by click on toggler.", - " * @default true", - " * */", - " openOnClick?: boolean;", - " /** If true, dropdown will be opened by hover on toggler.", - " * @default false", - " * */", - " openOnHover?: boolean;", - " /** If true, clicks on target will toggle dropdown open state.", - " * If false, click on target will only open dropdown and won't close it.", - " * @default true", - " * */", - " closeOnTargetClick?: boolean;", - " /** If true, dropdown will be closed on click outside body or toggler.", - " * @default true", - " * */", - " closeOnClickOutside?: boolean;", - " /** Defined when to close dropdown in case of openOnHover={ true }", - " * toggler — dropdown will be closed when a mouse leaves the target component", - " * boundary — will not to close the dropdown when a mouse is on target or in 30px around target area", - " * false — will not close dropdown by mouse move event", - " * @default 'toggler'", - " * */", - " closeOnMouseLeave?: 'toggler' | 'boundary' | false;", - " /**", - " * Node of portal target, where to render the dropdown body.", - " * By default, will be used global portal node.", - " * */", - " portalTarget?: HTMLElement;", - " /**", - " * Element relative to which dropdown will calculate position", - " * */", - " boundaryElement?: Boundary;", - " /** Pass false, if you do not want to close the dropdown in case Toggler move out of viewport.", - " * @default true", - " * */", - " closeBodyOnTogglerHidden?: boolean; // default: true;", + "interface DataTableState extends DataSourceState {", + " /** Configuration of columns at the DataTable. Used to define column visibility, width and order */", + " columnsConfig?: ColumnsConfig;", + " /** Configuration of filter at the FilterPanel. Used to define filter visibility and order */", + " filtersConfig?: FiltersConfig;", + " /** ID of currently selected preset */", + " presetId?: number | null;", + " /** State which will not trigger data reloading, but will be stored in presets or URL */", + " viewState?: TViewState;", "}" ] }, "props": [ { - "uid": "renderTarget", - "name": "renderTarget", + "uid": "columnsConfig", + "name": "columnsConfig", "comment": { "raw": [ - "Render callback for the dropdown target.", - " Note, that it's required to pass 'props' parameters to the target component." + "Configuration of columns at the DataTable. Used to define column visibility, width and order" ] }, "typeValue": { - "raw": "(props: IDropdownTogglerProps) => React.ReactNode" - }, - "editor": { - "type": "component" + "raw": "ColumnsConfig" }, - "required": true + "required": false }, { - "uid": "renderBody", - "name": "renderBody", + "uid": "filtersConfig", + "name": "filtersConfig", "comment": { "raw": [ - "Render callback for the dropdown body" + "Configuration of filter at the FilterPanel. Used to define filter visibility and order" ] }, "typeValue": { - "raw": "(props: DropdownBodyProps) => React.ReactNode" - }, - "editor": { - "type": "component" + "raw": "FiltersConfig" }, - "required": true + "required": false }, { - "uid": "onClose", - "name": "onClose", + "uid": "presetId", + "name": "presetId", "comment": { "raw": [ - "Called when dropdown was closed" + "ID of currently selected preset" ] }, "typeValue": { - "raw": "() => void" + "raw": "null | number" }, "editor": { - "type": "func" + "type": "number" }, "required": false }, { - "uid": "isNotUnfoldable", - "name": "isNotUnfoldable", + "uid": "viewState", + "name": "viewState", "comment": { "raw": [ - "Disable dropdown opening" + "State which will not trigger data reloading, but will be stored in presets or URL" ] }, "typeValue": { - "raw": "boolean" + "raw": "TViewState" + }, + "required": false + }, + { + "uid": "search", + "name": "search", + "comment": { + "raw": [ + "Search value, used to filter data based on it.", + " Included in the API request object when using a LazyDataSource.", + " For Array and Async data sources, searching is performed internally by the datasource." + ] + }, + "typeValue": { + "raw": "string" }, "editor": { - "type": "bool" + "type": "string" }, + "from": "@epam/uui-core:DataSourceState", "required": false }, { - "uid": "zIndex", - "name": "zIndex", + "uid": "checked", + "name": "checked", "comment": { "raw": [ - "zIndex for dropdown body", - " By default used value received by LayoutContext" + "Array of checked items IDs" ] }, "typeValue": { - "raw": "number" + "raw": "any[]" }, - "editor": { - "type": "number" + "from": "@epam/uui-core:DataSourceState", + "required": false + }, + { + "uid": "folded", + "name": "folded", + "comment": { + "raw": [ + "A map of item IDs to their folding state.", + " If an item ID is present with a `true` value, it's folded; otherwise, it's not folded." + ] + }, + "typeValue": { + "raw": "Record" }, + "from": "@epam/uui-core:DataSourceState", "required": false }, { - "uid": "placement", - "name": "placement", + "uid": "filter", + "name": "filter", "comment": { "raw": [ - "Defines dropdown body placement relative to target" + "Filter value used to filter data based on it.", + " Included in the API request object when using a LazyDataSource.", + " For Array and Async data sources, filtering is performed internally by the datasource." ] }, "typeValue": { - "raw": "'left' | 'right' | 'auto' | 'auto-start' | 'auto-end' | 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end'" + "raw": "TFilter" }, - "editor": { - "type": "oneOf", - "options": [ - "left", - "right", - "auto", - "auto-start", - "auto-end", - "top", - "bottom", - "top-start", - "top-end", - "bottom-start", - "bottom-end", - "right-start", - "right-end", - "left-start", - "left-end" + "from": "@epam/uui-core:DataSourceState", + "required": false + }, + { + "uid": "sorting", + "name": "sorting", + "comment": { + "raw": [ + "Sorting value, used to sort data based on it.", + " Included in the API request object when using a LazyDataSource.", + " For Array and Async data sources, sorting is performed internally by the datasource." ] }, + "typeValue": { + "raw": "SortingOption[]" + }, + "from": "@epam/uui-core:DataSourceState", "required": false }, { - "uid": "modifiers", - "name": "modifiers", + "uid": "selectedId", + "name": "selectedId", "comment": { "raw": [ - "Original popper.js modifiers. See [Popper docs]{@link https://popper.js.org/docs/v2/modifiers/}" + "ID of selected item. It can be only one selected item at the moment." ] }, "typeValue": { - "raw": "(StrictModifier | Partial>)[]" + "raw": "any" }, + "from": "@epam/uui-core:DataSourceState", "required": false }, { - "uid": "openDelay", - "name": "openDelay", + "uid": "focusedIndex", + "name": "focusedIndex", "comment": { "raw": [ - "Defines how much 'ms' user should hold mouse over target to open the dropdown", - " This prop work only with openOnHover={true}", - " @default 0" - ], - "tags": { - "@default": 0 - } + "Index of currently focused item" + ] }, "typeValue": { "raw": "number" @@ -10874,20 +10381,16 @@ "editor": { "type": "number" }, + "from": "@epam/uui-core:DataSourceState", "required": false }, { - "uid": "closeDelay", - "name": "closeDelay", + "uid": "page", + "name": "page", "comment": { "raw": [ - "Defines after which delay dropdown will be closed, if user leave mouse from target.", - " This prop work only with openOnHover={true}", - " @default 0" - ], - "tags": { - "@default": 0 - } + "Current page number" + ] }, "typeValue": { "raw": "number" @@ -10895,39 +10398,34 @@ "editor": { "type": "number" }, + "from": "@epam/uui-core:DataSourceState", "required": false }, { - "uid": "openOnClick", - "name": "openOnClick", + "uid": "pageSize", + "name": "pageSize", "comment": { "raw": [ - "If true, dropdown will be opened by click on toggler.", - " @default true" - ], - "tags": { - "@default": true - } + "The amount of items per page" + ] }, "typeValue": { - "raw": "boolean" + "raw": "number" }, "editor": { - "type": "bool" + "type": "number" }, + "from": "@epam/uui-core:DataSourceState", "required": false }, { - "uid": "openOnHover", - "name": "openOnHover", + "uid": "foldAll", + "name": "foldAll", "comment": { "raw": [ - "If true, dropdown will be opened by hover on toggler.", - " @default false" - ], - "tags": { - "@default": false - } + "Provides default folding of nodes if the opposite value is not present in the folded map.", + " It is used to collapse/expand all nodes." + ] }, "typeValue": { "raw": "boolean" @@ -10935,114 +10433,188 @@ "editor": { "type": "bool" }, + "from": "@epam/uui-core:DataSourceState", "required": false }, { - "uid": "closeOnTargetClick", - "name": "closeOnTargetClick", + "uid": "scrollTo", + "name": "scrollTo", "comment": { "raw": [ - "If true, clicks on target will toggle dropdown open state.", - " If false, click on target will only open dropdown and won't close it.", - " @default true" - ], - "tags": { - "@default": true - } + "Virtual list ensures that row with this Index is within the visible area, if not Virtual List .", + " Virtual list updates this value on scroll to null when appear in the visible area.", + " If this value is updated manually, Virtual List would scroll to the specified items.", + " It would attempt to put scroll so this item will be at the top of the list." + ] }, "typeValue": { - "raw": "boolean" + "raw": "ScrollToConfig" + }, + "from": "@epam/uui-core:VirtualListState", + "required": false + }, + { + "uid": "topIndex", + "name": "topIndex", + "comment": { + "raw": [ + "Index of the topmost item, in rendered batch.", + " Note - this item might not be visible, as Virtual List maintain some reserve of rows on top / at the bottom of the list" + ] + }, + "typeValue": { + "raw": "number" }, "editor": { - "type": "bool" + "type": "number" }, + "from": "@epam/uui-core:VirtualListRange", "required": false }, { - "uid": "closeOnClickOutside", - "name": "closeOnClickOutside", + "uid": "visibleCount", + "name": "visibleCount", "comment": { "raw": [ - "If true, dropdown will be closed on click outside body or toggler.", - " @default true" - ], - "tags": { - "@default": true - } + "Number of currently rendered items.", + " Virtual list updates this value automatically, if it too small.", + " Note Virtual List renders more items, that actually visible,", + " as it need maintain some reserve of rows on top / at the bottom of the list." + ] }, "typeValue": { - "raw": "boolean" + "raw": "number" }, "editor": { - "type": "bool" + "type": "number" + }, + "from": "@epam/uui-core:VirtualListRange", + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:DatePickerCoreProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "DatePickerCoreProps", + "nameFull": "DatePickerCoreProps" + }, + "src": "uui-core/src/types/components/datePicker/DatePicker.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "DatePickerCoreProps", + "print": [ + "interface DatePickerCoreProps extends BaseDatePickerProps {", + " /** render prop to add a custom footer inside the DatePicker dropdown body */", + " renderFooter?(): ReactNode;", + "}" + ] + }, + "props": [ + { + "uid": "renderFooter", + "name": "renderFooter", + "comment": { + "raw": [ + "render prop to add a custom footer inside the DatePicker dropdown body" + ] + }, + "typeValue": { + "raw": "() => React.ReactNode" + }, + "editor": { + "type": "component" }, "required": false }, { - "uid": "closeOnMouseLeave", - "name": "closeOnMouseLeave", + "uid": "format", + "name": "format", "comment": { "raw": [ - "Defined when to close dropdown in case of openOnHover={ true }", - " toggler — dropdown will be closed when a mouse leaves the target component", - " boundary — will not to close the dropdown when a mouse is on target or in 30px around target area", - " false — will not close dropdown by mouse move event", - " @default 'toggler'" - ], - "tags": { - "@default": "toggler" - } + "Date format string, see [dayjs docs](@link https://day.js.org/docs/en/display/format)" + ] }, "typeValue": { - "raw": "false | 'toggler' | 'boundary'" + "raw": "string" }, "editor": { - "type": "oneOf", - "options": [ - false, - "toggler", - "boundary" + "type": "string" + }, + "from": "@epam/uui-core:BaseDatePickerProps", + "required": false + }, + { + "uid": "filter", + "name": "filter", + "comment": { + "raw": [ + "Filter selectable days. Days, for which this callback returns false - will be disabled" ] }, + "typeValue": { + "raw": "(day: Dayjs) => boolean" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:BaseDatePickerProps", "required": false }, { - "uid": "portalTarget", - "name": "portalTarget", + "uid": "renderTarget", + "name": "renderTarget", "comment": { "raw": [ - "Node of portal target, where to render the dropdown body.", - " By default, will be used global portal node." + "Overrides rendering of picker Target - component which triggers dropdown. Can be used to attach DatePicker to other components, e.g. Buttons" ] }, "typeValue": { - "raw": "HTMLElement" + "raw": "(props: IDropdownToggler) => React.ReactNode" + }, + "editor": { + "type": "component" }, + "from": "@epam/uui-core:BaseDatePickerProps", "required": false }, { - "uid": "boundaryElement", - "name": "boundaryElement", + "uid": "iconPosition", + "name": "iconPosition", "comment": { "raw": [ - "Element relative to which dropdown will calculate position" + "Defines where to place calendar icon" ] }, "typeValue": { - "raw": "HTMLElement | HTMLElement[] | 'clippingParents'" + "raw": "'left' | 'right'" + }, + "editor": { + "type": "oneOf", + "options": [ + "left", + "right" + ] }, + "from": "@epam/uui-core:BaseDatePickerProps", "required": false }, { - "uid": "closeBodyOnTogglerHidden", - "name": "closeBodyOnTogglerHidden", + "uid": "disableClear", + "name": "disableClear", "comment": { "raw": [ - "Pass false, if you do not want to close the dropdown in case Toggler move out of viewport.", - " @default true" + "Disable clearing date value (e.g. via cross icon)", + " @default false" ], "tags": { - "@default": true + "@default": false } }, "typeValue": { @@ -11051,629 +10623,490 @@ "editor": { "type": "bool" }, + "from": "@epam/uui-core:BaseDatePickerProps", "required": false }, { - "uid": "value", - "name": "value", + "uid": "renderDay", + "name": "renderDay", "comment": { "raw": [ - "The current value of component" + "Overrides rendering of the single day. For example, to highlight certain days" ] }, "typeValue": { - "raw": "boolean" + "raw": "(day: Dayjs, onDayClick: (day: Dayjs) => void) => React.ReactElement>" }, "editor": { - "type": "bool" + "type": "component" }, - "from": "@epam/uui-core:IControlled", + "from": "@epam/uui-core:BaseDatePickerProps", "required": false }, { - "uid": "onValueChange", - "name": "onValueChange", + "uid": "isHoliday", + "name": "isHoliday", "comment": { "raw": [ - "Called when value needs to be changed (usually due to user interaction)" + "If this function returns true, the day will be highlighted as holiday" ] }, "typeValue": { - "raw": "(newValue: boolean) => void" + "raw": "(day: Dayjs) => boolean" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:IControlled", + "from": "@epam/uui-core:BaseDatePickerProps", "required": false }, { - "uid": "forwardedRef", - "name": "forwardedRef", + "uid": "onBlur", + "name": "onBlur", "comment": { "raw": [ - "this ref is passed to the underlying component" + "Called when component lose focus" ] }, "typeValue": { - "raw": "null | (instance: HTMLElement | null) => void | React.MutableRefObject" + "raw": "(e?: React.FocusEvent | undefined) => void" }, - "from": "@epam/uui-core:IHasForwardedRef", + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:BaseDatePickerProps", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:DropParams": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "DropParams", - "nameFull": "DropParams" - }, - "src": "uui-core/src/types/dnd.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "DropParams", - "print": [ - "interface DropParams extends AcceptDropParams {", - " /** Current drop position, indicates where item will be dropped relative to the destination */", - " position: DropPosition;", - "}" - ] - }, - "props": [ + }, { - "uid": "position", - "name": "position", + "uid": "placement", + "name": "placement", "comment": { "raw": [ - "Current drop position, indicates where item will be dropped relative to the destination" + "Dropdown position relative to the input. See [Popper Docs](@link https://popper.js.org/)" ] }, "typeValue": { - "raw": "'left' | 'right' | 'top' | 'bottom' | 'inside'" + "raw": "'left' | 'right' | 'auto' | 'auto-start' | 'auto-end' | 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end'" }, - "typeValueRef": "@epam/uui-core:DropPosition", "editor": { "type": "oneOf", "options": [ "left", "right", + "auto", + "auto-start", + "auto-end", "top", "bottom", - "inside" + "top-start", + "top-end", + "bottom-start", + "bottom-end", + "right-start", + "right-end", + "left-start", + "left-end" ] }, - "required": true + "from": "@epam/uui-core:BaseDatePickerProps", + "required": false }, { - "uid": "srcData", - "name": "srcData", + "uid": "rawProps", + "name": "rawProps", "comment": { "raw": [ - "Source item data. This is the srcData of the actor that is being dropped into." + "Any HTML attributes (native or 'data-') to put on date picker parts" ] }, "typeValue": { - "raw": "TSrcData" + "raw": "{ input?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; }" }, - "from": "@epam/uui-core:AcceptDropParams", - "required": true + "from": "@epam/uui-core:BaseDatePickerProps", + "required": false }, { - "uid": "dstData", - "name": "dstData", + "uid": "inputCx", + "name": "inputCx", "comment": { "raw": [ - "Destination item data. This is the dstData of the actor into which the drop is performed." + "CSS class(es) to put on datepicker input" ] }, "typeValue": { - "raw": "TDstData" + "raw": "null | string | number | boolean | ClassDictionary | ClassArray" }, - "from": "@epam/uui-core:AcceptDropParams", + "typeValueRef": "@epam/uui-core:ClassValue", + "from": "@epam/uui-core:BaseDatePickerProps", "required": false }, { - "uid": "offsetLeft", - "name": "offsetLeft", - "typeValue": { - "raw": "number" + "uid": "bodyCx", + "name": "bodyCx", + "comment": { + "raw": [ + "CSS class(es) to put on datepicker body" + ] }, - "editor": { - "type": "number" + "typeValue": { + "raw": "null | string | number | boolean | ClassDictionary | ClassArray" }, - "from": "@epam/uui-core:AcceptDropParams", - "required": true + "typeValueRef": "@epam/uui-core:ClassValue", + "from": "@epam/uui-core:BaseDatePickerProps", + "required": false }, { - "uid": "offsetTop", - "name": "offsetTop", + "uid": "isInvalid", + "name": "isInvalid", + "comment": { + "raw": [ + "True if component contains invalid input" + ] + }, "typeValue": { - "raw": "number" + "raw": "boolean" }, "editor": { - "type": "number" + "type": "bool" }, - "from": "@epam/uui-core:AcceptDropParams", - "required": true + "from": "@epam/uui-core:ICanBeInvalid", + "required": false }, { - "uid": "targetWidth", - "name": "targetWidth", + "uid": "isDisabled", + "name": "isDisabled", + "comment": { + "raw": [ + "Disable editing, and visually de-emphasize value of the component" + ] + }, "typeValue": { - "raw": "number" + "raw": "boolean" }, "editor": { - "type": "number" + "type": "bool" }, - "from": "@epam/uui-core:AcceptDropParams", - "required": true + "from": "@epam/uui-core:IDisableable", + "required": false }, { - "uid": "targetHeight", - "name": "targetHeight", + "uid": "isReadonly", + "name": "isReadonly", + "comment": { + "raw": [ + "Disable editing. Unlike isDisabled, keep component's value readable." + ] + }, "typeValue": { - "raw": "number" + "raw": "boolean" }, "editor": { - "type": "number" + "type": "bool" }, - "from": "@epam/uui-core:AcceptDropParams", - "required": true - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:DropPosition": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "DropPosition", - "nameFull": "DropPosition" - }, - "src": "uui-core/src/types/dnd.ts", - "exported": true - }, - "details": { - "kind": 265, - "typeValue": { - "raw": "'left' | 'right' | 'top' | 'bottom' | 'inside'", - "print": [ - "type DropPosition = 'top' | 'bottom' | 'left' | 'right' | 'inside';" - ] - } - } - }, - "@epam/uui-core:DropPositionOptions": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "DropPositionOptions", - "nameFull": "DropPositionOptions<__type>" - }, - "src": "uui-core/src/types/dnd.ts", - "exported": true - }, - "details": { - "kind": 265, - "typeValue": { - "raw": "Partial>", - "print": [ - "type DropPositionOptions = Partial>;" - ] - } - } - }, - "@epam/uui-core:ErrorPageInfo": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "ErrorPageInfo", - "nameFull": "ErrorPageInfo" - }, - "src": "uui-core/src/services/ErrorContext.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "ErrorPageInfo", - "print": [ - "interface ErrorPageInfo {", - " /** Error status code */", - " status?: number;", - " /** Title of error page */", - " title?: React.ReactNode;", - " /** Subtitle of error page */", - " subtitle?: React.ReactNode;", - " /** Url of error image to display on error page */", - " imageUrl?: string;", - " /** Url of error image to display on error page in case of mobile layout (app width < 720px) */", - " mobileImageUrl?: string;", - "}" - ] - }, - "props": [ + "from": "@epam/uui-core:ICanBeReadonly", + "required": false + }, { - "uid": "status", - "name": "status", + "uid": "isRequired", + "name": "isRequired", "comment": { "raw": [ - "Error status code" + "Marks that component's value is required and shouldn't be empty" ] }, "typeValue": { - "raw": "number" + "raw": "boolean" }, "editor": { - "type": "number" + "type": "bool" }, + "from": "@epam/uui-core:ICanBeRequired", "required": false }, { - "uid": "title", - "name": "title", + "uid": "value", + "name": "value", "comment": { "raw": [ - "Title of error page" + "The current value of component" ] }, "typeValue": { - "raw": "React.ReactNode" + "raw": "null | string" }, - "typeValueRef": "@types/react:ReactNode", - "required": false + "editor": { + "type": "string" + }, + "from": "@epam/uui-core:IControlled", + "required": true }, { - "uid": "subtitle", - "name": "subtitle", + "uid": "onValueChange", + "name": "onValueChange", "comment": { "raw": [ - "Subtitle of error page" + "Called when value needs to be changed (usually due to user interaction)" ] }, "typeValue": { - "raw": "React.ReactNode" + "raw": "(newValue: string | null) => void" }, - "typeValueRef": "@types/react:ReactNode", - "required": false + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IControlled", + "required": true }, { - "uid": "imageUrl", - "name": "imageUrl", + "uid": "onFocus", + "name": "onFocus", "comment": { "raw": [ - "Url of error image to display on error page" + "Called when component gets input focus" ] }, "typeValue": { - "raw": "string" + "raw": "(e: React.FocusEvent) => void" }, "editor": { - "type": "string" + "type": "func" }, + "from": "@epam/uui-core:ICanFocus", "required": false }, { - "uid": "mobileImageUrl", - "name": "mobileImageUrl", + "uid": "placeholder", + "name": "placeholder", "comment": { "raw": [ - "Url of error image to display on error page in case of mobile layout (app width < 720px)" + "Placeholder to display when empty" ] }, "typeValue": { - "raw": "string" - }, - "editor": { - "type": "string" + "raw": "any" }, + "from": "@epam/uui-core:IHasPlaceholder", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:FileUploadOptions": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "FileUploadOptions", - "nameFull": "FileUploadOptions" - }, - "src": "uui-core/src/services/ApiContext.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "FileUploadOptions", - "print": [ - "interface FileUploadOptions {", - " /** Called during the file uploading, used to track upload progress */", - " onProgress?: (progress: number) => any;", - " /** Callback to receive the instance of xhr. Can be used to abort the request. */", - " getXHR?: (xhr: XMLHttpRequest) => any;", - "}" - ] - }, - "props": [ + }, { - "uid": "onProgress", - "name": "onProgress", + "uid": "getValueChangeAnalyticsEvent", + "name": "getValueChangeAnalyticsEvent", "comment": { "raw": [ - "Called during the file uploading, used to track upload progress" + "Given a value, returns an analytics event to send when component is edited.", + " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)." ] }, "typeValue": { - "raw": "(progress: number) => any" + "raw": "(newValue: string | null, oldValue: string | null) => AnalyticsEvent" }, "editor": { "type": "func" }, + "from": "@epam/uui-core:IAnalyticableOnChange", "required": false }, { - "uid": "getXHR", - "name": "getXHR", + "uid": "forwardedRef", + "name": "forwardedRef", "comment": { "raw": [ - "Callback to receive the instance of xhr. Can be used to abort the request." + "this ref is passed to the underlying component" ] }, "typeValue": { - "raw": "(xhr: XMLHttpRequest) => any" - }, - "editor": { - "type": "func" + "raw": "null | (instance: HTMLElement | null) => void | React.MutableRefObject" }, + "from": "@epam/uui-core:IHasForwardedRef", "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:FileUploadResponse": { + "@epam/uui-core:DndActorProps": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "FileUploadResponse", - "nameFull": "FileUploadResponse" + "name": "DndActorProps", + "nameFull": "DndActorProps" }, - "src": "uui-core/src/services/ApiContext.ts", + "src": "uui-core/src/services/dnd/DndActor.tsx", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "FileUploadResponse", + "raw": "DndActorProps", "print": [ - "interface FileUploadResponse {", - " /** ID of the file */", - " id: number;", - " /** Name of the file */", - " name: string;", - " /** File size */", - " size: number;", - " /** Path to the file source */", - " path?: string;", - " /** Type of file representation. Used for UUI SlateRTE file displaying. */", - " type?: BlockTypes;", - " /** Extension of the file */", - " extension?: string;", - " /** Upload error */", - " error?: {", - " /** If true, indicates about error while file uploading */", - " isError: boolean;", - " /** Error message */", - " message?: string;", - " };", + "interface DndActorProps extends IDndActor {", + " /** Render callback for DragActor content */", + " render(props: DndActorRenderParams): React.ReactNode;", "}" ] }, "props": [ { - "uid": "id", - "name": "id", - "comment": { - "raw": [ - "ID of the file" - ] - }, - "typeValue": { - "raw": "number" - }, - "editor": { - "type": "number" - }, - "required": true - }, - { - "uid": "name", - "name": "name", + "uid": "render", + "name": "render", "comment": { "raw": [ - "Name of the file" + "Render callback for DragActor content" ] }, "typeValue": { - "raw": "string" + "raw": "(props: DndActorRenderParams) => React.ReactNode" }, "editor": { - "type": "string" + "type": "component" }, "required": true }, { - "uid": "size", - "name": "size", + "uid": "srcData", + "name": "srcData", "comment": { "raw": [ - "File size" + "Data used when this component acts as a drag source.", + " If provided, it means this component can be dragged. Can be used in combination with dstData." ] }, "typeValue": { - "raw": "number" - }, - "editor": { - "type": "number" + "raw": "TSrcData" }, - "required": true + "from": "@epam/uui-core:IDndActor", + "required": false }, { - "uid": "path", - "name": "path", + "uid": "dstData", + "name": "dstData", "comment": { "raw": [ - "Path to the file source" + "Data used when this component acts as a drop destination.", + " If provided, it means something can be dragged onto this component. Can be used in combination with srcData." ] }, "typeValue": { - "raw": "string" - }, - "editor": { - "type": "string" + "raw": "TDstData" }, + "from": "@epam/uui-core:IDndActor", "required": false }, { - "uid": "type", - "name": "type", + "uid": "canAcceptDrop", + "name": "canAcceptDrop", "comment": { "raw": [ - "Type of file representation. Used for UUI SlateRTE file displaying." + "A pure function that gets permitted positions for a drop action" ] }, "typeValue": { - "raw": "'attachment' | 'iframe' | 'image'" + "raw": "(params: AcceptDropParams) => Partial> | null" }, "editor": { - "type": "oneOf", - "options": [ - "attachment", - "iframe", - "image" - ] + "type": "func" }, + "from": "@epam/uui-core:IDndActor", "required": false }, { - "uid": "extension", - "name": "extension", + "uid": "onDrop", + "name": "onDrop", "comment": { "raw": [ - "Extension of the file" + "Called when accepted drop action performed on this actor. Usually used to reorder and update items" ] }, "typeValue": { - "raw": "string" + "raw": "(data: DropParams) => void" }, "editor": { - "type": "string" - }, - "required": false - }, - { - "uid": "error", - "name": "error", - "comment": { - "raw": [ - "Upload error" - ] - }, - "typeValue": { - "raw": "{ isError: boolean; message?: string | undefined; }" + "type": "func" }, + "from": "@epam/uui-core:IDndActor", "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:FilterPredicate": { + "@epam/uui-core:DndActorRenderParams": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "FilterPredicate", - "nameFull": "FilterPredicate" + "name": "DndActorRenderParams", + "nameFull": "DndActorRenderParams" }, - "src": "uui-core/src/types/dataQuery.ts", + "src": "uui-core/src/types/dnd.ts", "exported": true }, "details": { - "kind": 265, + "kind": 264, "typeValue": { - "raw": "FilterPredicate", + "raw": "DndActorRenderParams", "print": [ - "type FilterPredicate = {", - " /** In. Should match some of these values. */", - " in?: TField[];", - " /** Not In. Should not match some of these values. */", - " nin?: TField[];", - " /** Should be null */", - " isNull?: boolean;", - " /** Greater than */", - " gt?: TField;", - " /** Greater than or equal */", - " gte?: TField;", - " /** Lower than */", - " lt?: TField;", - " /** Lower than or equal */", - " lte?: TField;", - " /** In range. Should be in these range */", - " inRange?: RangeValue;", - " /** Not in range. Should not be in these range */", - " notInRange?: RangeValue;", - " /** Equal */", - " eq?: TField;", - " /** Not equal */", - " neq?: TField;", - " /** Should not much provide predicates */", - " not?: FilterPredicate;", - "};" + "interface DndActorRenderParams {", + " /** True, if the element can be dragged. Doesn't mean that DnD is active. */", + " isDraggable: boolean;", + " /** True, if the element is dragged out. True for placeholder left when it's element it dragged out. False for Drag Ghost. */", + " isDraggedOut: boolean;", + " /** True, if the element is rendered as Drag Ghost. All other flags are false for drag ghost. */", + " isDragGhost: boolean;", + " /** True, if the element is being dragged over, even if drop is not accepted by the element (canAcceptDrop returned false) */", + " isDraggedOver: boolean;", + " /** True, if the element is being dragged over, and drop on it is accepted - canAcceptDrop returned true */", + " isDropAccepted: boolean;", + " /** True if any drag and drop operation is in progress, even if the element not being dragged */", + " isDndInProgress: boolean;", + " /** Drag data associated with the element. Specified always, even if there is no DnD operation happening. */", + " dragData?: any;", + " /** Drop position. Chosen from accepted drop positions according to pointer coordinates */", + " position?: DropPosition;", + " /**", + " * Event handlers. Component is expected to pass these events to the top element it renders.", + " * As onClick event on the element will be overwritten, use DndActorProps.onClick to receive click events on the element", + " */", + " eventHandlers: {", + " onTouchStart?(e: React.TouchEvent): void;", + " onPointerDown?(e: React.PointerEvent): void;", + " onPointerEnter?(e: React.PointerEvent): void;", + " onPointerMove?(e: React.PointerEvent): void;", + " onPointerLeave?(e: React.PointerEvent): void;", + " onPointerUp?(e: React.PointerEvent): void;", + " };", + " /**", + " * CSS class names to add to the element.", + " * Some of these markers are used by the DndActor internally, so they must be added even if no used by component itself to apply styles.", + " */", + " classNames: string[];", + " /** Ref to the DOM element to perform DnD actions */", + " ref?: React.Ref;", + "}" ] }, "props": [ { - "uid": "in", - "name": "in", + "uid": "isDraggable", + "name": "isDraggable", "comment": { "raw": [ - "In. Should match some of these values." + "True, if the element can be dragged. Doesn't mean that DnD is active." ] }, "typeValue": { - "raw": "TField[]" - }, - "required": false - }, - { - "uid": "nin", - "name": "nin", - "comment": { - "raw": [ - "Not In. Should not match some of these values." - ] + "raw": "boolean" }, - "typeValue": { - "raw": "TField[]" + "editor": { + "type": "bool" }, - "required": false + "required": true }, { - "uid": "isNull", - "name": "isNull", + "uid": "isDraggedOut", + "name": "isDraggedOut", "comment": { "raw": [ - "Should be null" + "True, if the element is dragged out. True for placeholder left when it's element it dragged out. False for Drag Ghost." ] }, "typeValue": { @@ -11682,122 +11115,146 @@ "editor": { "type": "bool" }, - "required": false + "required": true }, { - "uid": "gt", - "name": "gt", + "uid": "isDragGhost", + "name": "isDragGhost", "comment": { "raw": [ - "Greater than" + "True, if the element is rendered as Drag Ghost. All other flags are false for drag ghost." ] }, "typeValue": { - "raw": "TField" + "raw": "boolean" }, - "required": false + "editor": { + "type": "bool" + }, + "required": true }, { - "uid": "gte", - "name": "gte", + "uid": "isDraggedOver", + "name": "isDraggedOver", "comment": { "raw": [ - "Greater than or equal" + "True, if the element is being dragged over, even if drop is not accepted by the element (canAcceptDrop returned false)" ] }, "typeValue": { - "raw": "TField" + "raw": "boolean" }, - "required": false + "editor": { + "type": "bool" + }, + "required": true }, { - "uid": "lt", - "name": "lt", + "uid": "isDropAccepted", + "name": "isDropAccepted", "comment": { "raw": [ - "Lower than" + "True, if the element is being dragged over, and drop on it is accepted - canAcceptDrop returned true" ] }, "typeValue": { - "raw": "TField" + "raw": "boolean" }, - "required": false + "editor": { + "type": "bool" + }, + "required": true }, { - "uid": "lte", - "name": "lte", + "uid": "isDndInProgress", + "name": "isDndInProgress", "comment": { "raw": [ - "Lower than or equal" + "True if any drag and drop operation is in progress, even if the element not being dragged" ] }, "typeValue": { - "raw": "TField" + "raw": "boolean" }, - "required": false + "editor": { + "type": "bool" + }, + "required": true }, { - "uid": "inRange", - "name": "inRange", + "uid": "dragData", + "name": "dragData", "comment": { "raw": [ - "In range. Should be in these range" + "Drag data associated with the element. Specified always, even if there is no DnD operation happening." ] }, "typeValue": { - "raw": "RangeValue" + "raw": "any" }, "required": false }, { - "uid": "notInRange", - "name": "notInRange", + "uid": "position", + "name": "position", "comment": { "raw": [ - "Not in range. Should not be in these range" + "Drop position. Chosen from accepted drop positions according to pointer coordinates" ] }, "typeValue": { - "raw": "RangeValue" + "raw": "'left' | 'right' | 'top' | 'bottom' | 'inside'" + }, + "editor": { + "type": "oneOf", + "options": [ + "left", + "right", + "top", + "bottom", + "inside" + ] }, "required": false }, { - "uid": "eq", - "name": "eq", + "uid": "eventHandlers", + "name": "eventHandlers", "comment": { "raw": [ - "Equal" + "Event handlers. Component is expected to pass these events to the top element it renders.", + " As onClick event on the element will be overwritten, use DndActorProps.onClick to receive click events on the element" ] }, "typeValue": { - "raw": "TField" + "raw": "{ onTouchStart?(e: React.TouchEvent): void; onPointerDown?(e: React.PointerEvent): void; onPointerEnter?(e: React.PointerEvent): void; onPointerMove?(e: React.PointerEvent): void; onPointerLeave?(e: React.PointerEvent): void; onPointerUp?(e: React.PointerEvent): void; }" }, - "required": false + "required": true }, { - "uid": "neq", - "name": "neq", + "uid": "classNames", + "name": "classNames", "comment": { "raw": [ - "Not equal" + "CSS class names to add to the element.", + " Some of these markers are used by the DndActor internally, so they must be added even if no used by component itself to apply styles." ] }, "typeValue": { - "raw": "TField" + "raw": "string[]" }, - "required": false + "required": true }, { - "uid": "not", - "name": "not", + "uid": "ref", + "name": "ref", "comment": { "raw": [ - "Should not much provide predicates" + "Ref to the DOM element to perform DnD actions" ] }, "typeValue": { - "raw": "FilterPredicate" + "raw": "null | (instance: any) => void | React.RefObject" }, "required": false } @@ -11805,1195 +11262,1098 @@ "propsFromUnion": false } }, - "@epam/uui-core:FilterPredicateName": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "FilterPredicateName", - "nameFull": "FilterPredicateName" - }, - "src": "uui-core/src/types/dataQuery.ts", - "exported": true - }, - "details": { - "kind": 265, - "typeValue": { - "raw": "'in' | 'nin' | 'isNull' | 'gt' | 'gte' | 'lt' | 'lte' | 'inRange' | 'notInRange' | 'eq' | 'neq' | 'not'", - "print": [ - "type FilterPredicateName = keyof FilterPredicate;" - ] - } - } - }, - "@epam/uui-core:FiltersConfig": { + "@epam/uui-core:DragGhostProps": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "FiltersConfig", - "nameFull": "FiltersConfig" + "name": "DragGhostProps", + "nameFull": "DragGhostProps" }, - "src": "uui-core/src/types/tables.ts", + "src": "uui-core/src/services/dnd/DragGhost.tsx", "exported": true }, "details": { - "kind": 265, + "kind": 264, "typeValue": { - "raw": "FiltersConfig", + "raw": "DragGhostProps", "print": [ - "type FiltersConfig = {", - " [key in keyof TFilter]: IFilterConfig;", - "};" + "interface DragGhostProps {", + "}" ] } } }, - "@epam/uui-core:FlexCellProps": { + "@epam/uui-core:DropdownBodyProps": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "FlexCellProps", - "nameFull": "FlexCellProps" + "name": "DropdownBodyProps", + "nameFull": "DropdownBodyProps" }, - "src": "uui-core/src/types/props.ts", + "src": "uui-core/src/types/components/Dropdown.ts", "exported": true }, "details": { - "kind": 265, + "kind": 264, "typeValue": { - "raw": "FlexCellProps", + "raw": "DropdownBodyProps", "print": [ - "type FlexCellProps = IHasCX & IClickable & IHasRawProps> & Attributes & IHasChildren & {", - " /** CSS width. Set to 'auto' to make FlexCell resize to it's content */", - " width?: number | 'auto' | '100%';", - " /** CSS min-width */", - " minWidth?: number;", - " /** Flexbox flex-grow property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flex-grow) */", - " grow?: number;", - " /** Flexbox shrink property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flex-shrink) */", - " shrink?: number;", - " /** CSS text-align property */", - " textAlign?: 'left' | 'center' | 'right';", - " /** Flexbox align-self property. Aligns items vertically for horizontal flexbox. [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-align-self) */", - " alignSelf?: CSS.AlignSelfProperty;", - " /** Standard style attribute. Styles are added to element style, overriding supplied flex styles */", - " style?: React.CSSProperties;", - "};" + "interface DropdownBodyProps extends IDropdownBodyProps {", + "}" ] }, "props": [ { - "uid": "cx", - "name": "cx", - "comment": { - "raw": [ - "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" - ] - }, - "typeValue": { - "raw": "null | string | number | boolean | ClassDictionary | ClassArray" - }, - "typeValueRef": "@epam/uui-core:ClassValue", - "from": "@epam/uui-core:IHasCX", - "required": false - }, - { - "uid": "onClick", - "name": "onClick", + "uid": "onClose", + "name": "onClose", "comment": { "raw": [ - "Called when component is clicked" + "Call to close the Dropdown body" ] }, "typeValue": { - "raw": "(e?: any) => void" + "raw": "() => void" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:IClickable", + "from": "@epam/uui-core:IDropdownBodyProps", "required": false }, { - "uid": "rawProps", - "name": "rawProps", + "uid": "togglerWidth", + "name": "togglerWidth", "comment": { "raw": [ - "Any HTML attributes (native or 'data-') to put on the underlying component" + "The width of the toggler, which can be used to adjust the body width to it" ] }, "typeValue": { - "raw": "React.HTMLAttributes & Record<`data-${string}`, string>" + "raw": "number" }, - "from": "@epam/uui-core:IHasRawProps", - "required": false - }, - { - "uid": "key", - "name": "key", - "typeValue": { - "raw": "null | string | number" + "editor": { + "type": "number" }, - "from": "@types/react:Attributes", + "from": "@epam/uui-core:IDropdownBodyProps", "required": false }, { - "uid": "children", - "name": "children", + "uid": "togglerHeight", + "name": "togglerHeight", "comment": { "raw": [ - "Component children" + "The height of the toggler" ] }, "typeValue": { - "raw": "React.ReactNode" - }, - "typeValueRef": "@types/react:ReactNode", - "from": "@epam/uui-core:IHasChildren", - "required": false - }, - { - "uid": "width", - "name": "width", - "comment": { - "raw": [ - "CSS width. Set to 'auto' to make FlexCell resize to it's content" - ] + "raw": "number" }, - "typeValue": { - "raw": "number | 'auto' | '100%'" + "editor": { + "type": "number" }, + "from": "@epam/uui-core:IDropdownBodyProps", "required": false }, { - "uid": "minWidth", - "name": "minWidth", + "uid": "scheduleUpdate", + "name": "scheduleUpdate", "comment": { "raw": [ - "CSS min-width" + "Call to force recompute dropdown position" ] }, "typeValue": { - "raw": "number" + "raw": "() => void" }, "editor": { - "type": "number" + "type": "func" }, + "from": "@epam/uui-core:IDropdownBodyProps", "required": false }, { - "uid": "grow", - "name": "grow", + "uid": "isOpen", + "name": "isOpen", "comment": { "raw": [ - "Flexbox flex-grow property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flex-grow)" + "Indicates that dropdown is open" ] }, "typeValue": { - "raw": "number" + "raw": "boolean" }, "editor": { - "type": "number" + "type": "bool" }, + "from": "@epam/uui-core:IDropdownBodyProps", "required": false }, { - "uid": "shrink", - "name": "shrink", + "uid": "arrowProps", + "name": "arrowProps", "comment": { "raw": [ - "Flexbox shrink property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flex-shrink)" + "Props that should be provided to the arrow component" ] }, "typeValue": { - "raw": "number" - }, - "editor": { - "type": "number" + "raw": "PopperArrowProps" }, + "from": "@epam/uui-core:IDropdownBodyProps", "required": false }, { - "uid": "textAlign", - "name": "textAlign", + "uid": "placement", + "name": "placement", "comment": { "raw": [ - "CSS text-align property" + "Dropdown position relative to the input. See [Popper Docs](@link https://popper.js.org/)" ] }, "typeValue": { - "raw": "'left' | 'right' | 'center'" + "raw": "'left' | 'right' | 'auto' | 'auto-start' | 'auto-end' | 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end'" }, "editor": { "type": "oneOf", "options": [ "left", "right", - "center" - ] - }, - "required": false - }, - { - "uid": "alignSelf", - "name": "alignSelf", - "comment": { - "raw": [ - "Flexbox align-self property. Aligns items vertically for horizontal flexbox. [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-align-self)" - ] - }, - "typeValue": { - "raw": "string" - }, - "editor": { - "type": "string" - }, - "required": false - }, - { - "uid": "style", - "name": "style", - "comment": { - "raw": [ - "Standard style attribute. Styles are added to element style, overriding supplied flex styles" + "auto", + "auto-start", + "auto-end", + "top", + "bottom", + "top-start", + "top-end", + "bottom-start", + "bottom-end", + "right-start", + "right-end", + "left-start", + "left-end" ] }, - "typeValue": { - "raw": "React.CSSProperties" - }, + "from": "@epam/uui-core:IDropdownBodyProps", "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:FlexRowProps": { + "@epam/uui-core:DropdownPlacement": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "FlexRowProps", - "nameFull": "FlexRowProps" + "name": "DropdownPlacement", + "nameFull": "DropdownPlacement" }, - "src": "uui-core/src/types/props.ts", + "src": "uui-core/src/types/components/Dropdown.ts", "exported": true }, "details": { "kind": 265, "typeValue": { - "raw": "FlexRowProps", + "raw": "Placement", "print": [ - "type FlexRowProps = IHasCX & IClickable & Attributes & IHasChildren & IHasRawProps> & {", - " /** Flexbox align-items property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)", - " * @default 'center'", + "type DropdownPlacement = Placement;" + ] + } + } + }, + "@epam/uui-core:DropdownProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "DropdownProps", + "nameFull": "DropdownProps" + }, + "src": "uui-core/src/types/components/Dropdown.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "DropdownProps", + "print": [ + "interface DropdownProps extends Partial>, IHasForwardedRef {", + " /**", + " * Render callback for the dropdown target.", + " * Note, that it's required to pass 'props' parameters to the target component.", + " */", + " renderTarget: (props: IDropdownTogglerProps) => React.ReactNode;", + " /** Render callback for the dropdown body */", + " renderBody: (props: DropdownBodyProps) => React.ReactNode;", + " /** Called when dropdown was closed */", + " onClose?: () => void;", + " /** Disable dropdown opening */", + " isNotUnfoldable?: boolean;", + " /** zIndex for dropdown body", + " * By default used value received by LayoutContext", " * */", - " alignItems?: 'top' | 'center' | 'bottom' | 'stretch';", - " /** Flexbox justifyContent property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) */", - " justifyContent?: 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'start' | 'end';", - " /** Flexbox column gap property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-gap-row-gap-column-gap) */", - " columnGap?: number | '6' | '12' | '18' | '24' | '36';", - " /** Flexbox row gap property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-gap-row-gap-column-gap) */", - " rowGap?: number | '6' | '12' | '18' | '24' | '36';", - "};" + " zIndex?: number;", + " /** Defines dropdown body placement relative to target */", + " placement?: DropdownPlacement;", + " /** Original popper.js modifiers. See [Popper docs]{@link https://popper.js.org/docs/v2/modifiers/} */", + " modifiers?: Modifier[];", + " /** Defines how much 'ms' user should hold mouse over target to open the dropdown", + " * This prop work only with openOnHover={true}", + " * @default 0", + " * */", + " openDelay?: number;", + " /** Defines after which delay dropdown will be closed, if user leave mouse from target.", + " * This prop work only with openOnHover={true}", + " * @default 0", + " * */", + " closeDelay?: number;", + " /** If true, dropdown will be opened by click on toggler.", + " * @default true", + " * */", + " openOnClick?: boolean;", + " /** If true, dropdown will be opened by hover on toggler.", + " * @default false", + " * */", + " openOnHover?: boolean;", + " /** If true, clicks on target will toggle dropdown open state.", + " * If false, click on target will only open dropdown and won't close it.", + " * @default true", + " * */", + " closeOnTargetClick?: boolean;", + " /** If true, dropdown will be closed on click outside body or toggler.", + " * @default true", + " * */", + " closeOnClickOutside?: boolean;", + " /** Defined when to close dropdown in case of openOnHover={ true }", + " * toggler — dropdown will be closed when a mouse leaves the target component", + " * boundary — will not to close the dropdown when a mouse is on target or in 30px around target area", + " * false — will not close dropdown by mouse move event", + " * @default 'toggler'", + " * */", + " closeOnMouseLeave?: 'toggler' | 'boundary' | false;", + " /**", + " * Node of portal target, where to render the dropdown body.", + " * By default, will be used global portal node.", + " * */", + " portalTarget?: HTMLElement;", + " /**", + " * Element relative to which dropdown will calculate position", + " * */", + " boundaryElement?: Boundary;", + " /** Pass false, if you do not want to close the dropdown in case Toggler move out of viewport.", + " * @default true", + " * */", + " closeBodyOnTogglerHidden?: boolean; // default: true;", + "}" ] }, "props": [ { - "uid": "cx", - "name": "cx", + "uid": "renderTarget", + "name": "renderTarget", "comment": { "raw": [ - "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" + "Render callback for the dropdown target.", + " Note, that it's required to pass 'props' parameters to the target component." ] }, "typeValue": { - "raw": "null | string | number | boolean | ClassDictionary | ClassArray" + "raw": "(props: IDropdownTogglerProps) => React.ReactNode" }, - "typeValueRef": "@epam/uui-core:ClassValue", - "from": "@epam/uui-core:IHasCX", - "required": false + "editor": { + "type": "component" + }, + "required": true }, { - "uid": "onClick", - "name": "onClick", + "uid": "renderBody", + "name": "renderBody", "comment": { "raw": [ - "Called when component is clicked" + "Render callback for the dropdown body" ] }, "typeValue": { - "raw": "(e?: any) => void" + "raw": "(props: DropdownBodyProps) => React.ReactNode" }, "editor": { - "type": "func" - }, - "from": "@epam/uui-core:IClickable", - "required": false - }, - { - "uid": "key", - "name": "key", - "typeValue": { - "raw": "null | string | number" + "type": "component" }, - "from": "@types/react:Attributes", - "required": false + "required": true }, { - "uid": "children", - "name": "children", + "uid": "onClose", + "name": "onClose", "comment": { "raw": [ - "Component children" + "Called when dropdown was closed" ] }, "typeValue": { - "raw": "React.ReactNode" + "raw": "() => void" + }, + "editor": { + "type": "func" }, - "typeValueRef": "@types/react:ReactNode", - "from": "@epam/uui-core:IHasChildren", "required": false }, { - "uid": "rawProps", - "name": "rawProps", + "uid": "isNotUnfoldable", + "name": "isNotUnfoldable", "comment": { "raw": [ - "Any HTML attributes (native or 'data-') to put on the underlying component" + "Disable dropdown opening" ] }, "typeValue": { - "raw": "React.HTMLAttributes & Record<`data-${string}`, string>" + "raw": "boolean" + }, + "editor": { + "type": "bool" }, - "from": "@epam/uui-core:IHasRawProps", "required": false }, { - "uid": "alignItems", - "name": "alignItems", + "uid": "zIndex", + "name": "zIndex", "comment": { "raw": [ - "Flexbox align-items property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)", - " @default 'center'" - ], - "tags": { - "@default": "center" - } + "zIndex for dropdown body", + " By default used value received by LayoutContext" + ] }, "typeValue": { - "raw": "'top' | 'bottom' | 'center' | 'stretch'" + "raw": "number" }, "editor": { - "type": "oneOf", - "options": [ - "top", - "bottom", - "center", - "stretch" - ] + "type": "number" }, "required": false }, { - "uid": "justifyContent", - "name": "justifyContent", + "uid": "placement", + "name": "placement", "comment": { "raw": [ - "Flexbox justifyContent property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)" + "Defines dropdown body placement relative to target" ] }, "typeValue": { - "raw": "'center' | 'space-around' | 'space-between' | 'space-evenly' | 'end' | 'start'" + "raw": "'left' | 'right' | 'auto' | 'auto-start' | 'auto-end' | 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end'" }, "editor": { "type": "oneOf", "options": [ - "center", - "space-around", - "space-between", - "space-evenly", - "end", - "start" + "left", + "right", + "auto", + "auto-start", + "auto-end", + "top", + "bottom", + "top-start", + "top-end", + "bottom-start", + "bottom-end", + "right-start", + "right-end", + "left-start", + "left-end" ] }, "required": false }, { - "uid": "columnGap", - "name": "columnGap", + "uid": "modifiers", + "name": "modifiers", "comment": { "raw": [ - "Flexbox column gap property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-gap-row-gap-column-gap)" + "Original popper.js modifiers. See [Popper docs]{@link https://popper.js.org/docs/v2/modifiers/}" ] }, "typeValue": { - "raw": "number | '6' | '12' | '18' | '24' | '36'" + "raw": "(StrictModifier | Partial>)[]" }, "required": false }, { - "uid": "rowGap", - "name": "rowGap", + "uid": "openDelay", + "name": "openDelay", "comment": { "raw": [ - "Flexbox row gap property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-gap-row-gap-column-gap)" - ] + "Defines how much 'ms' user should hold mouse over target to open the dropdown", + " This prop work only with openOnHover={true}", + " @default 0" + ], + "tags": { + "@default": 0 + } }, "typeValue": { - "raw": "number | '6' | '12' | '18' | '24' | '36'" + "raw": "number" }, - "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:FormProps": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "FormProps", - "nameFull": "FormProps" - }, - "src": "uui-core/src/data/forms/Form.tsx", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "FormProps", - "print": [ - "interface FormProps {", - " /** Current value of the form state */", - " value: T;", - " /**", - " * Render the form body, provided by form state", - " * */", - " renderForm: (props: IFormApi) => ReactNode;", - " /**", - " * Returns form metadata - information used to validate the form.", - " * @param state Metadata can depend on state, and will be re-computed on updates", - " */", - " getMetadata?(state: T): Metadata;", - " /**", - " * Occurs when 'save' function is called on Form.", - " * Should save form data (usually with API call to server).", - " * Server can also reject form, and provide validation errors in response.", - " * @param state Form state to save", - " */", - " onSave(state: T): Promise | void>;", - " /**", - " * Called when form is unmounted, but user still have unsaved changes.", - " * Accepts a Promise to be returned. If promise resolves to true - save procedure is performed.", - " * The common use-case is to show a modal with \"Save Changes?\" dialog", - " * Skins usually implement this as default behavior. To prevent it, you can pass null to this prop to override it.", - " */", - " beforeLeave?: (() => Promise) | null;", - " /**", - " * Used to restore unsaved user edits from the last session (usually to localstorage, via uuiUserSettings context)", - " * If unsaved changes are detected, this callback is called. If it is resolved - the form restores unsaved edits.", - " * The common use-case is to show a modal with \"You have unsaved changes, restore them?\" dialog", - " * Skins usually implement this as default behavior. To prevent it, you can pass null to this prop to override it.", - " */", - " loadUnsavedChanges?: () => Promise;", - " /**", - " * Called after successful save.", - " * @param state Saved state", - " * @param isSavedBeforeLeave true, if save is triggered via leaving the page, and \"Save Changes?\" dialog", - " */", - " onSuccess?(state: T, isSavedBeforeLeave?: boolean): any;", - " /** Called when save fails */", - " onError?(error: any): any;", - " /**", - " * The key, under which form save unsaved state usually to localstorage, via uuiUserSettings context)", - " */", - " settingsKey?: string;", - " /**", - " * Controls when form validation occurs:", - " * save (default, recommended) - form is validated on save. If form is invalid - it will be revalidated on every change, until become valid", - " * change - form is validated on every user change. Only fields changes in current edit session are validated", - " */", - " validationOn?: ValidationMode;", - "}" - ] - }, - "props": [ + "editor": { + "type": "number" + }, + "required": false + }, { - "uid": "value", - "name": "value", + "uid": "closeDelay", + "name": "closeDelay", "comment": { "raw": [ - "Current value of the form state" - ] + "Defines after which delay dropdown will be closed, if user leave mouse from target.", + " This prop work only with openOnHover={true}", + " @default 0" + ], + "tags": { + "@default": 0 + } }, "typeValue": { - "raw": "T" + "raw": "number" }, - "required": true + "editor": { + "type": "number" + }, + "required": false }, { - "uid": "renderForm", - "name": "renderForm", + "uid": "openOnClick", + "name": "openOnClick", "comment": { "raw": [ - "Render the form body, provided by form state" - ] + "If true, dropdown will be opened by click on toggler.", + " @default true" + ], + "tags": { + "@default": true + } }, "typeValue": { - "raw": "(props: IFormApi) => React.ReactNode" + "raw": "boolean" }, "editor": { - "type": "component" + "type": "bool" }, - "required": true + "required": false }, { - "uid": "getMetadata", - "name": "getMetadata", + "uid": "openOnHover", + "name": "openOnHover", "comment": { "raw": [ - "Returns form metadata - information used to validate the form.", - " @param state Metadata can depend on state, and will be re-computed on updates" - ] + "If true, dropdown will be opened by hover on toggler.", + " @default false" + ], + "tags": { + "@default": false + } }, "typeValue": { - "raw": "(state: T) => Metadata" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, "required": false }, { - "uid": "onSave", - "name": "onSave", + "uid": "closeOnTargetClick", + "name": "closeOnTargetClick", "comment": { "raw": [ - "Occurs when 'save' function is called on Form.", - " Should save form data (usually with API call to server).", - " Server can also reject form, and provide validation errors in response.", - " @param state Form state to save" - ] + "If true, clicks on target will toggle dropdown open state.", + " If false, click on target will only open dropdown and won't close it.", + " @default true" + ], + "tags": { + "@default": true + } }, "typeValue": { - "raw": "(state: T) => Promise>" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "required": true + "required": false }, { - "uid": "beforeLeave", - "name": "beforeLeave", + "uid": "closeOnClickOutside", + "name": "closeOnClickOutside", "comment": { "raw": [ - "Called when form is unmounted, but user still have unsaved changes.", - " Accepts a Promise to be returned. If promise resolves to true - save procedure is performed.", - " The common use-case is to show a modal with \"Save Changes?\" dialog", - " Skins usually implement this as default behavior. To prevent it, you can pass null to this prop to override it." - ] + "If true, dropdown will be closed on click outside body or toggler.", + " @default true" + ], + "tags": { + "@default": true + } }, "typeValue": { - "raw": "null | () => Promise" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, "required": false }, { - "uid": "loadUnsavedChanges", - "name": "loadUnsavedChanges", + "uid": "closeOnMouseLeave", + "name": "closeOnMouseLeave", "comment": { "raw": [ - "Used to restore unsaved user edits from the last session (usually to localstorage, via uuiUserSettings context)", - " If unsaved changes are detected, this callback is called. If it is resolved - the form restores unsaved edits.", - " The common use-case is to show a modal with \"You have unsaved changes, restore them?\" dialog", - " Skins usually implement this as default behavior. To prevent it, you can pass null to this prop to override it." - ] + "Defined when to close dropdown in case of openOnHover={ true }", + " toggler — dropdown will be closed when a mouse leaves the target component", + " boundary — will not to close the dropdown when a mouse is on target or in 30px around target area", + " false — will not close dropdown by mouse move event", + " @default 'toggler'" + ], + "tags": { + "@default": "toggler" + } }, "typeValue": { - "raw": "() => Promise" + "raw": "false | 'toggler' | 'boundary'" }, "editor": { - "type": "func" + "type": "oneOf", + "options": [ + false, + "toggler", + "boundary" + ] }, "required": false }, { - "uid": "onSuccess", - "name": "onSuccess", + "uid": "portalTarget", + "name": "portalTarget", "comment": { "raw": [ - "Called after successful save.", - " @param state Saved state", - " @param isSavedBeforeLeave true, if save is triggered via leaving the page, and \"Save Changes?\" dialog" + "Node of portal target, where to render the dropdown body.", + " By default, will be used global portal node." ] }, "typeValue": { - "raw": "(state: T, isSavedBeforeLeave?: boolean | undefined) => any" - }, - "editor": { - "type": "func" + "raw": "HTMLElement" }, "required": false }, { - "uid": "onError", - "name": "onError", + "uid": "boundaryElement", + "name": "boundaryElement", "comment": { "raw": [ - "Called when save fails" + "Element relative to which dropdown will calculate position" ] }, "typeValue": { - "raw": "(error: any) => any" - }, - "editor": { - "type": "func" + "raw": "HTMLElement | HTMLElement[] | 'clippingParents'" }, "required": false }, { - "uid": "settingsKey", - "name": "settingsKey", + "uid": "closeBodyOnTogglerHidden", + "name": "closeBodyOnTogglerHidden", "comment": { "raw": [ - "The key, under which form save unsaved state usually to localstorage, via uuiUserSettings context)" - ] + "Pass false, if you do not want to close the dropdown in case Toggler move out of viewport.", + " @default true" + ], + "tags": { + "@default": true + } }, "typeValue": { - "raw": "string" + "raw": "boolean" }, "editor": { - "type": "string" + "type": "bool" }, "required": false }, { - "uid": "validationOn", - "name": "validationOn", + "uid": "value", + "name": "value", "comment": { "raw": [ - "Controls when form validation occurs:", - " save (default, recommended) - form is validated on save. If form is invalid - it will be revalidated on every change, until become valid", - " change - form is validated on every user change. Only fields changes in current edit session are validated" + "The current value of component" ] }, "typeValue": { - "raw": "'change' | 'save'" + "raw": "boolean" }, "editor": { - "type": "oneOf", - "options": [ - "change", - "save" - ] + "type": "bool" }, + "from": "@epam/uui-core:IControlled", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:FormSaveResponse": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "FormSaveResponse", - "nameFull": "FormSaveResponse" - }, - "src": "uui-core/src/data/forms/Form.tsx", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "FormSaveResponse", - "print": [ - "interface FormSaveResponse {", - " /** New form value, which will replace previous one */", - " form?: T;", - " /** Server-side validation state. It's applied in priority over client validation. */", - " validation?: ValidationState;", - "}" - ] - }, - "props": [ + }, { - "uid": "form", - "name": "form", + "uid": "onValueChange", + "name": "onValueChange", "comment": { "raw": [ - "New form value, which will replace previous one" + "Called when value needs to be changed (usually due to user interaction)" ] }, "typeValue": { - "raw": "T" + "raw": "(newValue: boolean) => void" + }, + "editor": { + "type": "func" }, + "from": "@epam/uui-core:IControlled", "required": false }, { - "uid": "validation", - "name": "validation", + "uid": "forwardedRef", + "name": "forwardedRef", "comment": { "raw": [ - "Server-side validation state. It's applied in priority over client validation." + "this ref is passed to the underlying component" ] }, "typeValue": { - "raw": "ValidationState" + "raw": "null | (instance: HTMLElement | null) => void | React.MutableRefObject" }, + "from": "@epam/uui-core:IHasForwardedRef", "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:IAdaptiveItem": { + "@epam/uui-core:DropParams": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IAdaptiveItem", - "nameFull": "IAdaptiveItem" + "name": "DropParams", + "nameFull": "DropParams" }, - "src": "uui-core/src/types/props.ts", + "src": "uui-core/src/types/dnd.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "IAdaptiveItem", + "raw": "DropParams", "print": [ - "// TBD: remove when MainMenu old api of items providing will be removed", - "interface IAdaptiveItem {", - " estimatedWidth?: number;", - " priority?: number;", - " showInBurgerMenu?: boolean;", - " collapseToMore?: boolean;", - " collapsedContainer?: boolean;", + "interface DropParams extends AcceptDropParams {", + " /** Current drop position, indicates where item will be dropped relative to the destination */", + " position: DropPosition;", "}" ] }, "props": [ { - "uid": "estimatedWidth", - "name": "estimatedWidth", + "uid": "position", + "name": "position", + "comment": { + "raw": [ + "Current drop position, indicates where item will be dropped relative to the destination" + ] + }, "typeValue": { - "raw": "number" + "raw": "'left' | 'right' | 'top' | 'bottom' | 'inside'" }, + "typeValueRef": "@epam/uui-core:DropPosition", "editor": { - "type": "number" + "type": "oneOf", + "options": [ + "left", + "right", + "top", + "bottom", + "inside" + ] + }, + "required": true + }, + { + "uid": "srcData", + "name": "srcData", + "comment": { + "raw": [ + "Source item data. This is the srcData of the actor that is being dropped into." + ] + }, + "typeValue": { + "raw": "TSrcData" + }, + "from": "@epam/uui-core:AcceptDropParams", + "required": true + }, + { + "uid": "dstData", + "name": "dstData", + "comment": { + "raw": [ + "Destination item data. This is the dstData of the actor into which the drop is performed." + ] + }, + "typeValue": { + "raw": "TDstData" }, + "from": "@epam/uui-core:AcceptDropParams", "required": false }, { - "uid": "priority", - "name": "priority", + "uid": "offsetLeft", + "name": "offsetLeft", "typeValue": { "raw": "number" }, "editor": { "type": "number" }, - "required": false + "from": "@epam/uui-core:AcceptDropParams", + "required": true }, { - "uid": "showInBurgerMenu", - "name": "showInBurgerMenu", + "uid": "offsetTop", + "name": "offsetTop", "typeValue": { - "raw": "boolean" + "raw": "number" }, "editor": { - "type": "bool" + "type": "number" }, - "required": false + "from": "@epam/uui-core:AcceptDropParams", + "required": true }, { - "uid": "collapseToMore", - "name": "collapseToMore", + "uid": "targetWidth", + "name": "targetWidth", "typeValue": { - "raw": "boolean" + "raw": "number" }, "editor": { - "type": "bool" + "type": "number" }, - "required": false + "from": "@epam/uui-core:AcceptDropParams", + "required": true }, { - "uid": "collapsedContainer", - "name": "collapsedContainer", + "uid": "targetHeight", + "name": "targetHeight", "typeValue": { - "raw": "boolean" + "raw": "number" }, "editor": { - "type": "bool" + "type": "number" }, - "required": false + "from": "@epam/uui-core:AcceptDropParams", + "required": true } ], "propsFromUnion": false } }, - "@epam/uui-core:IAnalyticableClick": { + "@epam/uui-core:DropPosition": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IAnalyticableClick", - "nameFull": "IAnalyticableClick" + "name": "DropPosition", + "nameFull": "DropPosition" }, - "src": "uui-core/src/types/props.ts", + "src": "uui-core/src/types/dnd.ts", "exported": true }, "details": { - "kind": 264, + "kind": 265, "typeValue": { - "raw": "IAnalyticableClick", + "raw": "'left' | 'right' | 'top' | 'bottom' | 'inside'", "print": [ - "interface IAnalyticableClick {", - " /**", - " * An analytics event to send (via AnalyticsContext) when component is clicked.", - " * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts).", - " */", - " clickAnalyticsEvent?: AnalyticsEvent;", - "}" + "type DropPosition = 'top' | 'bottom' | 'left' | 'right' | 'inside';" ] - }, - "props": [ - { - "uid": "clickAnalyticsEvent", - "name": "clickAnalyticsEvent", - "comment": { - "raw": [ - "An analytics event to send (via AnalyticsContext) when component is clicked.", - " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)." - ] - }, - "typeValue": { - "raw": "null | { [key: string]: any; name: string; }" - }, - "required": false - } - ], - "propsFromUnion": false + } } }, - "@epam/uui-core:IAnalyticableOnChange": { + "@epam/uui-core:DropPositionOptions": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IAnalyticableOnChange", - "nameFull": "IAnalyticableOnChange" + "name": "DropPositionOptions", + "nameFull": "DropPositionOptions<__type>" }, - "src": "uui-core/src/types/props.ts", + "src": "uui-core/src/types/dnd.ts", "exported": true }, "details": { - "kind": 264, + "kind": 265, "typeValue": { - "raw": "IAnalyticableOnChange", + "raw": "Partial>", "print": [ - "interface IAnalyticableOnChange {", - " /**", - " * Given a value, returns an analytics event to send when component is edited.", - " * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts).", - " */", - " getValueChangeAnalyticsEvent?: (newValue: T | null, oldValue: T | null) => AnalyticsEvent;", - "}" + "type DropPositionOptions = Partial>;" ] - }, - "props": [ - { - "uid": "getValueChangeAnalyticsEvent", - "name": "getValueChangeAnalyticsEvent", - "comment": { - "raw": [ - "Given a value, returns an analytics event to send when component is edited.", - " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)." - ] - }, - "typeValue": { - "raw": "(newValue: T | null, oldValue: T | null) => AnalyticsEvent" - }, - "editor": { - "type": "func" - }, - "required": false - } - ], - "propsFromUnion": false + } } }, - "@epam/uui-core:IAnalyticsContext": { + "@epam/uui-core:ErrorPageInfo": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IAnalyticsContext", - "nameFull": "IAnalyticsContext" + "name": "ErrorPageInfo", + "nameFull": "ErrorPageInfo" }, - "src": "uui-core/src/types/contexts.ts", + "src": "uui-core/src/services/ErrorContext.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "IAnalyticsContext", + "raw": "ErrorPageInfo", "print": [ - "interface IAnalyticsContext {", - " /** Sends event to the all listeners */", - " sendEvent(event?: AnalyticsEvent): void;", - " /** Adds analytic event listener */", - " addListener(listener: IAnalyticsListener): void;", + "interface ErrorPageInfo {", + " /** Error status code */", + " status?: number;", + " /** Title of error page */", + " title?: React.ReactNode;", + " /** Subtitle of error page */", + " subtitle?: React.ReactNode;", + " /** Url of error image to display on error page */", + " imageUrl?: string;", + " /** Url of error image to display on error page in case of mobile layout (app width < 720px) */", + " mobileImageUrl?: string;", "}" ] }, "props": [ { - "uid": "sendEvent", - "name": "sendEvent", + "uid": "status", + "name": "status", "comment": { "raw": [ - "Sends event to the all listeners" + "Error status code" ] }, "typeValue": { - "raw": "(event?: AnalyticsEvent | undefined) => void" + "raw": "number" }, "editor": { - "type": "func" + "type": "number" }, - "required": true + "required": false }, { - "uid": "addListener", - "name": "addListener", + "uid": "title", + "name": "title", "comment": { "raw": [ - "Adds analytic event listener" + "Title of error page" ] }, "typeValue": { - "raw": "(listener: IAnalyticsListener) => void" + "raw": "React.ReactNode" + }, + "typeValueRef": "@types/react:ReactNode", + "required": false + }, + { + "uid": "subtitle", + "name": "subtitle", + "comment": { + "raw": [ + "Subtitle of error page" + ] + }, + "typeValue": { + "raw": "React.ReactNode" + }, + "typeValueRef": "@types/react:ReactNode", + "required": false + }, + { + "uid": "imageUrl", + "name": "imageUrl", + "comment": { + "raw": [ + "Url of error image to display on error page" + ] + }, + "typeValue": { + "raw": "string" }, "editor": { - "type": "func" + "type": "string" }, - "required": true - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:IAnalyticsListener": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "IAnalyticsListener", - "nameFull": "IAnalyticsListener" - }, - "src": "uui-core/src/types/contexts.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "IAnalyticsListener", - "print": [ - "interface IAnalyticsListener {", - " /** Defines how to send event to the analytics system */", - " sendEvent(event: AnalyticsEvent, parameters: Omit, eventType?: 'event' | 'pageView' | 'apiTiming'): void;", - "}" - ] - }, - "props": [ + "required": false + }, { - "uid": "sendEvent", - "name": "sendEvent", + "uid": "mobileImageUrl", + "name": "mobileImageUrl", "comment": { "raw": [ - "Defines how to send event to the analytics system" + "Url of error image to display on error page in case of mobile layout (app width < 720px)" ] }, "typeValue": { - "raw": "(event: AnalyticsEvent, parameters: Omit, eventType?: 'event' | 'pageView' | 'apiTiming' | undefined) => void" + "raw": "string" }, "editor": { - "type": "func" + "type": "string" }, - "required": true + "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:IApiContext": { + "@epam/uui-core:FileUploadOptions": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IApiContext", - "nameFull": "IApiContext" + "name": "FileUploadOptions", + "nameFull": "FileUploadOptions" }, - "src": "uui-core/src/types/contexts.ts", + "src": "uui-core/src/services/ApiContext.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "IApiContext", + "raw": "FileUploadOptions", "print": [ - "interface IApiContext extends IBaseContext {", - " /** Current status of api service.", - " * idle - service do nothing and ready to process new requests", - " * running - service is currently processing requests", - " * error - service received an error and stop processing requests, due to this error will be discarded", - " * recovery - service trying to restore connection and recover latest requests", - " * */", - " readonly status: ApiStatus;", - " /** Reason of why api trying to recover connection */", - " readonly recoveryReason: ApiRecoveryReason | null;", - " /** Returns currently processing or failed requests */", - " getActiveCalls(status?: ApiCallStatus): ApiCallInfo[];", - " /** Resets all errors */", - " reset(): void;", - " /** Starts fetch call with providing params */", - " processRequest(url: string, method: string, data?: any, options?: ApiCallOptions): Promise;", - " /** Starts file uploading using FormData */", - " uploadFile(url: string, file: File, options: FileUploadOptions): Promise;", - " /** Url to the relogin page. Used to open new browser window by this path, in case of auth lost error.", - " * Opened by this path page, should process authentication and then post 'authSuccess' cross-window message to the opener, to recover failed requests.", - " * @default '/auth/login'", - " * */", - " apiReloginPath: string;", + "interface FileUploadOptions {", + " /** Called during the file uploading, used to track upload progress */", + " onProgress?: (progress: number) => any;", + " /** Callback to receive the instance of xhr. Can be used to abort the request. */", + " getXHR?: (xhr: XMLHttpRequest) => any;", "}" ] }, "props": [ { - "uid": "status", - "name": "status", - "comment": { - "raw": [ - "Current status of api service.", - " idle - service do nothing and ready to process new requests", - " running - service is currently processing requests", - " error - service received an error and stop processing requests, due to this error will be discarded", - " recovery - service trying to restore connection and recover latest requests" - ] - }, - "typeValue": { - "raw": "'running' | 'error' | 'idle' | 'recovery'" - }, - "typeValueRef": "@epam/uui-core:ApiStatus", - "editor": { - "type": "oneOf", - "options": [ - "running", - "error", - "idle", - "recovery" - ] - }, - "required": true - }, - { - "uid": "recoveryReason", - "name": "recoveryReason", + "uid": "onProgress", + "name": "onProgress", "comment": { "raw": [ - "Reason of why api trying to recover connection" + "Called during the file uploading, used to track upload progress" ] }, "typeValue": { - "raw": "null | 'auth-lost' | 'connection-lost' | 'server-overload' | 'maintenance'" + "raw": "(progress: number) => any" }, - "typeValueRef": "@epam/uui-core:ApiRecoveryReason", "editor": { - "type": "oneOf", - "options": [ - "auth-lost", - "connection-lost", - "server-overload", - "maintenance", - null - ] + "type": "func" }, "required": false }, { - "uid": "getActiveCalls", - "name": "getActiveCalls", + "uid": "getXHR", + "name": "getXHR", "comment": { "raw": [ - "Returns currently processing or failed requests" + "Callback to receive the instance of xhr. Can be used to abort the request." ] }, "typeValue": { - "raw": "(status?: ApiCallStatus | undefined) => ApiCallInfo[]" + "raw": "(xhr: XMLHttpRequest) => any" }, "editor": { "type": "func" }, - "required": true - }, + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:FileUploadResponse": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "FileUploadResponse", + "nameFull": "FileUploadResponse" + }, + "src": "uui-core/src/services/ApiContext.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "FileUploadResponse", + "print": [ + "interface FileUploadResponse {", + " /** ID of the file */", + " id: number;", + " /** Name of the file */", + " name: string;", + " /** File size */", + " size: number;", + " /** Path to the file source */", + " path?: string;", + " /** Type of file representation. Used for UUI SlateRTE file displaying. */", + " type?: BlockTypes;", + " /** Extension of the file */", + " extension?: string;", + " /** Upload error */", + " error?: {", + " /** If true, indicates about error while file uploading */", + " isError: boolean;", + " /** Error message */", + " message?: string;", + " };", + "}" + ] + }, + "props": [ { - "uid": "reset", - "name": "reset", + "uid": "id", + "name": "id", "comment": { "raw": [ - "Resets all errors" + "ID of the file" ] }, "typeValue": { - "raw": "() => void" + "raw": "number" }, "editor": { - "type": "func" + "type": "number" }, "required": true }, { - "uid": "processRequest", - "name": "processRequest", + "uid": "name", + "name": "name", "comment": { "raw": [ - "Starts fetch call with providing params" + "Name of the file" ] }, "typeValue": { - "raw": "(url: string, method: string, data?: any, options?: ApiCallOptions | undefined) => Promise" + "raw": "string" }, "editor": { - "type": "func" + "type": "string" }, "required": true }, { - "uid": "uploadFile", - "name": "uploadFile", + "uid": "size", + "name": "size", "comment": { "raw": [ - "Starts file uploading using FormData" + "File size" ] }, "typeValue": { - "raw": "(url: string, file: File, options: FileUploadOptions) => Promise" + "raw": "number" }, "editor": { - "type": "func" + "type": "number" }, "required": true }, { - "uid": "apiReloginPath", - "name": "apiReloginPath", + "uid": "path", + "name": "path", "comment": { "raw": [ - "Url to the relogin page. Used to open new browser window by this path, in case of auth lost error.", - " Opened by this path page, should process authentication and then post 'authSuccess' cross-window message to the opener, to recover failed requests.", - " @default '/auth/login'" - ], - "tags": { - "@default": "/auth/login" - } + "Path to the file source" + ] }, "typeValue": { "raw": "string" @@ -13001,429 +12361,308 @@ "editor": { "type": "string" }, - "required": true + "required": false }, { - "uid": "subscribe", - "name": "subscribe", + "uid": "type", + "name": "type", "comment": { "raw": [ - "Add your handler, which will be called on context updates" + "Type of file representation. Used for UUI SlateRTE file displaying." ] }, "typeValue": { - "raw": "(handler: (state: {}) => void) => void" + "raw": "'attachment' | 'iframe' | 'image'" }, "editor": { - "type": "func" + "type": "oneOf", + "options": [ + "attachment", + "iframe", + "image" + ] }, - "from": "@epam/uui-core:IBaseContext", - "required": true + "required": false }, { - "uid": "unsubscribe", - "name": "unsubscribe", + "uid": "extension", + "name": "extension", "comment": { "raw": [ - "Unsubscribe from context updates" + "Extension of the file" ] }, "typeValue": { - "raw": "(handler: (state: {}) => void) => void" + "raw": "string" }, "editor": { - "type": "func" + "type": "string" }, - "from": "@epam/uui-core:IBaseContext", - "required": true + "required": false }, { - "uid": "destroyContext", - "name": "destroyContext", + "uid": "error", + "name": "error", "comment": { "raw": [ - "Manually destroy context and unsubscribe from all listeners" + "Upload error" ] }, "typeValue": { - "raw": "() => void" - }, - "editor": { - "type": "func" + "raw": "{ isError: boolean; message?: string | undefined; }" }, - "from": "@epam/uui-core:IBaseContext", - "required": true + "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:IBaseContext": { + "@epam/uui-core:FilterConfig": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IBaseContext", - "nameFull": "IBaseContext" + "name": "FilterConfig", + "nameFull": "FilterConfig" }, - "src": "uui-core/src/types/contexts.ts", + "src": "uui-core/src/types/dataSources.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "IBaseContext", + "raw": "FilterConfig", "print": [ - "interface IBaseContext {", - " /** Add your handler, which will be called on context updates */", - " subscribe(handler: (state: TState) => void): void;", - " /** Unsubscribe from context updates */", - " unsubscribe(handler: (state: TState) => void): void;", - " /** Manually destroy context and unsubscribe from all listeners */", - " destroyContext: () => void;", + "interface FilterConfig {", + " /**", + " * A pure function that returns filter callback to be applied for each item.", + " * The callback should return true, if item passed the filter.", + " */", + " getFilter?(filter: TFilter): (item: TItem) => boolean;", "}" ] }, "props": [ { - "uid": "subscribe", - "name": "subscribe", - "comment": { - "raw": [ - "Add your handler, which will be called on context updates" - ] - }, - "typeValue": { - "raw": "(handler: (state: TState) => void) => void" - }, - "editor": { - "type": "func" - }, - "required": true - }, - { - "uid": "unsubscribe", - "name": "unsubscribe", - "comment": { - "raw": [ - "Unsubscribe from context updates" - ] - }, - "typeValue": { - "raw": "(handler: (state: TState) => void) => void" - }, - "editor": { - "type": "func" - }, - "required": true - }, - { - "uid": "destroyContext", - "name": "destroyContext", + "uid": "getFilter", + "name": "getFilter", "comment": { "raw": [ - "Manually destroy context and unsubscribe from all listeners" + "A pure function that returns filter callback to be applied for each item.", + " The callback should return true, if item passed the filter." ] }, "typeValue": { - "raw": "() => void" + "raw": "(filter: TFilter) => (item: TItem) => boolean" }, "editor": { "type": "func" }, - "required": true + "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:IBasicPickerToggler": { + "@epam/uui-core:FilterPredicate": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IBasicPickerToggler", - "nameFull": "IBasicPickerToggler" - }, - "src": "uui-core/src/types/pickers.ts", - "comment": { - "raw": [ - "Component can be used as Toggler control for pickers.", - " This interface is enough for basic pickers.", - " Picker togglers with search or advanced selection display should implement IPickerToggler interface" - ] + "name": "FilterPredicate", + "nameFull": "FilterPredicate" }, + "src": "uui-core/src/types/dataQuery.ts", "exported": true }, "details": { - "kind": 264, + "kind": 265, "typeValue": { - "raw": "IBasicPickerToggler", + "raw": "FilterPredicate", "print": [ - "/**", - " * Component can be used as Toggler control for pickers.", - " * This interface is enough for basic pickers.", - " * Picker togglers with search or advanced selection display should implement IPickerToggler interface", - " */", - "interface IBasicPickerToggler extends IDropdownTogglerProps {", - " /** Call to clear toggler value */", - " onClear?(e?: any): void;", - "}" + "type FilterPredicate = {", + " /** In. Should match some of these values. */", + " in?: TField[];", + " /** Not In. Should not match some of these values. */", + " nin?: TField[];", + " /** Should be null */", + " isNull?: boolean;", + " /** Greater than */", + " gt?: TField;", + " /** Greater than or equal */", + " gte?: TField;", + " /** Lower than */", + " lt?: TField;", + " /** Lower than or equal */", + " lte?: TField;", + " /** In range. Should be in these range */", + " inRange?: RangeValue;", + " /** Not in range. Should not be in these range */", + " notInRange?: RangeValue;", + " /** Equal */", + " eq?: TField;", + " /** Not equal */", + " neq?: TField;", + " /** Should not much provide predicates */", + " not?: FilterPredicate;", + "};" ] }, "props": [ { - "uid": "onClear", - "name": "onClear", + "uid": "in", + "name": "in", "comment": { "raw": [ - "Call to clear toggler value" + "In. Should match some of these values." ] }, "typeValue": { - "raw": "(e?: any) => void" - }, - "editor": { - "type": "func" + "raw": "TField[]" }, "required": false }, { - "uid": "toggleDropdownOpening", - "name": "toggleDropdownOpening", + "uid": "nin", + "name": "nin", "comment": { "raw": [ - "Called when associated dropdown should open or close" + "Not In. Should not match some of these values." ] }, "typeValue": { - "raw": "(value: boolean) => void" - }, - "editor": { - "type": "func" + "raw": "TField[]" }, - "from": "@epam/uui-core:IDropdownTogglerProps", "required": false }, { - "uid": "isInteractedOutside", - "name": "isInteractedOutside", + "uid": "isNull", + "name": "isNull", "comment": { "raw": [ - "Called when component is interacted outside, to close the dropdown" + "Should be null" ] }, "typeValue": { - "raw": "(event: Event) => boolean" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "from": "@epam/uui-core:IDropdownTogglerProps", "required": false }, { - "uid": "ref", - "name": "ref", + "uid": "gt", + "name": "gt", "comment": { "raw": [ - "Toggler component ref" + "Greater than" ] }, "typeValue": { - "raw": "null | (instance: any) => void | React.RefObject" + "raw": "TField" }, - "from": "@epam/uui-core:IDropdownTogglerProps", "required": false }, { - "uid": "isOpen", - "name": "isOpen", + "uid": "gte", + "name": "gte", "comment": { "raw": [ - "When isDropdown=true, indicate that dropdown is open with chevron icon" + "Greater than or equal" ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "TField" }, - "from": "@epam/uui-core:IDropdownToggler", "required": false }, { - "uid": "isDropdown", - "name": "isDropdown", + "uid": "lt", + "name": "lt", "comment": { "raw": [ - "Shows chevron icon, enabling component to act as dropdown toggler" + "Lower than" ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "TField" }, - "from": "@epam/uui-core:IDropdownToggler", "required": false }, { - "uid": "onClick", - "name": "onClick", + "uid": "lte", + "name": "lte", "comment": { "raw": [ - "Called when component is clicked" + "Lower than or equal" ] }, "typeValue": { - "raw": "(e?: any) => void" - }, - "editor": { - "type": "func" + "raw": "TField" }, - "from": "@epam/uui-core:IClickable", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:ICanBeFixed": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "ICanBeFixed", - "nameFull": "ICanBeFixed" - }, - "src": "uui-core/src/types/tables.ts", - "exported": true - }, - "details": { - "kind": 265, - "typeValue": { - "raw": "ICanBeFixed", - "print": [ - "type ICanBeFixed = {", - " /** If specified, will make column fixed - it would not scroll horizontally */", - " fix?: 'left' | 'right';", - "};" - ] - }, - "props": [ + }, { - "uid": "fix", - "name": "fix", + "uid": "inRange", + "name": "inRange", "comment": { "raw": [ - "If specified, will make column fixed - it would not scroll horizontally" + "In range. Should be in these range" ] }, "typeValue": { - "raw": "'left' | 'right'" + "raw": "RangeValue" }, - "editor": { - "type": "oneOf", - "options": [ - "left", - "right" + "required": false + }, + { + "uid": "notInRange", + "name": "notInRange", + "comment": { + "raw": [ + "Not in range. Should not be in these range" ] }, + "typeValue": { + "raw": "RangeValue" + }, "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:ICanBeInvalid": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "ICanBeInvalid", - "nameFull": "ICanBeInvalid" - }, - "src": "uui-core/src/types/props.ts", - "comment": { - "raw": [ - "Component value can be invalid" - ] - }, - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "ICanBeInvalid", - "print": [ - "/** Component value can be invalid */", - "interface ICanBeInvalid {", - " /** True if component contains invalid input */", - " isInvalid?: boolean;", - "}" - ] - }, - "props": [ + }, { - "uid": "isInvalid", - "name": "isInvalid", + "uid": "eq", + "name": "eq", "comment": { "raw": [ - "True if component contains invalid input" + "Equal" ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "TField" }, "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:ICanBeReadonly": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "ICanBeReadonly", - "nameFull": "ICanBeReadonly" - }, - "src": "uui-core/src/types/props.ts", - "comment": { - "raw": [ - "Component can be made read-only" - ] - }, - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "ICanBeReadonly", - "print": [ - "/** Component can be made read-only */", - "interface ICanBeReadonly {", - " /** Disable editing. Unlike isDisabled, keep component's value readable. */", - " isReadonly?: boolean;", - "}" - ] - }, - "props": [ + }, { - "uid": "isReadonly", - "name": "isReadonly", + "uid": "neq", + "name": "neq", "comment": { "raw": [ - "Disable editing. Unlike isDisabled, keep component's value readable." + "Not equal" ] }, "typeValue": { - "raw": "boolean" + "raw": "TField" }, - "editor": { - "type": "bool" + "required": false + }, + { + "uid": "not", + "name": "not", + "comment": { + "raw": [ + "Should not much provide predicates" + ] + }, + "typeValue": { + "raw": "FilterPredicate" }, "required": false } @@ -13431,353 +12670,260 @@ "propsFromUnion": false } }, - "@epam/uui-core:ICanBeRequired": { + "@epam/uui-core:FilterPredicateName": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "ICanBeRequired", - "nameFull": "ICanBeRequired" + "name": "FilterPredicateName", + "nameFull": "FilterPredicateName" }, - "src": "uui-core/src/types/props.ts", + "src": "uui-core/src/types/dataQuery.ts", "exported": true }, "details": { - "kind": 264, + "kind": 265, "typeValue": { - "raw": "ICanBeRequired", + "raw": "'in' | 'nin' | 'isNull' | 'gt' | 'gte' | 'lt' | 'lte' | 'inRange' | 'notInRange' | 'eq' | 'neq' | 'not'", "print": [ - "interface ICanBeRequired {", - " /** Marks that component's value is required and shouldn't be empty */", - " isRequired?: boolean;", - "}" + "type FilterPredicateName = keyof FilterPredicate;" ] - }, - "props": [ - { - "uid": "isRequired", - "name": "isRequired", - "comment": { - "raw": [ - "Marks that component's value is required and shouldn't be empty" - ] - }, - "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" - }, - "required": false - } - ], - "propsFromUnion": false + } } }, - "@epam/uui-core:ICanFocus": { + "@epam/uui-core:FiltersConfig": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "ICanFocus", - "nameFull": "ICanFocus" - }, - "src": "uui-core/src/types/props.ts", - "comment": { - "raw": [ - "Component can get input focus" - ] + "name": "FiltersConfig", + "nameFull": "FiltersConfig" }, + "src": "uui-core/src/types/tables.ts", "exported": true }, "details": { - "kind": 264, + "kind": 265, "typeValue": { - "raw": "ICanFocus", + "raw": "FiltersConfig", "print": [ - "/** Component can get input focus */", - "interface ICanFocus {", - " /** Called when component gets input focus */", - " onFocus?: (e: React.FocusEvent) => void;", - " /** Called when component looses input focus */", - " onBlur?: (e: React.FocusEvent) => void;", - "}" + "type FiltersConfig = {", + " [key in keyof TFilter]: IFilterConfig;", + "};" ] - }, - "props": [ - { - "uid": "onFocus", - "name": "onFocus", - "comment": { - "raw": [ - "Called when component gets input focus" - ] - }, - "typeValue": { - "raw": "(e: React.FocusEvent) => void" - }, - "editor": { - "type": "func" - }, - "required": false - }, - { - "uid": "onBlur", - "name": "onBlur", - "comment": { - "raw": [ - "Called when component looses input focus" - ] - }, - "typeValue": { - "raw": "(e: React.FocusEvent) => void" - }, - "editor": { - "type": "func" - }, - "required": false - } - ], - "propsFromUnion": false + } } }, - "@epam/uui-core:ICanRedirect": { + "@epam/uui-core:FlexCellProps": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "ICanRedirect", - "nameFull": "ICanRedirect" + "name": "FlexCellProps", + "nameFull": "FlexCellProps" }, "src": "uui-core/src/types/props.ts", - "comment": { - "raw": [ - "Component acts as a link, and can redirect" - ] - }, "exported": true }, "details": { - "kind": 264, + "kind": 265, "typeValue": { - "raw": "ICanRedirect", + "raw": "FlexCellProps", "print": [ - "/** Component acts as a link, and can redirect */", - "interface ICanRedirect {", - " /** Link object to redirect to for SPA-redirects */", - " link?: Link;", - " /** Href (URL) to redirect to, for non-SPA redirects */", - " href?: string;", - " /** Highlights component to show that link is active (browser is displaying the page to which link is pointing) */", - " isLinkActive?: boolean;", - " /** Controls where the link should be opened */", - " target?: '_blank';", - "}" + "type FlexCellProps = IHasCX & IClickable & IHasRawProps> & Attributes & IHasChildren & {", + " /** CSS width. Set to 'auto' to make FlexCell resize to it's content */", + " width?: number | 'auto' | '100%';", + " /** CSS min-width */", + " minWidth?: number;", + " /** Flexbox flex-grow property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flex-grow) */", + " grow?: number;", + " /** Flexbox shrink property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flex-shrink) */", + " shrink?: number;", + " /** CSS text-align property */", + " textAlign?: 'left' | 'center' | 'right';", + " /** Flexbox align-self property. Aligns items vertically for horizontal flexbox. [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-align-self) */", + " alignSelf?: CSS.AlignSelfProperty;", + " /** Standard style attribute. Styles are added to element style, overriding supplied flex styles */", + " style?: React.CSSProperties;", + "};" ] }, "props": [ { - "uid": "link", - "name": "link", + "uid": "cx", + "name": "cx", "comment": { "raw": [ - "Link object to redirect to for SPA-redirects" + "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" ] }, "typeValue": { - "raw": "Link" + "raw": "null | string | number | boolean | ClassDictionary | ClassArray" }, + "typeValueRef": "@epam/uui-core:ClassValue", + "from": "@epam/uui-core:IHasCX", "required": false }, { - "uid": "href", - "name": "href", + "uid": "onClick", + "name": "onClick", "comment": { "raw": [ - "Href (URL) to redirect to, for non-SPA redirects" + "Called when component is clicked" ] }, "typeValue": { - "raw": "string" + "raw": "(e?: any) => void" }, "editor": { - "type": "string" + "type": "func" }, + "from": "@epam/uui-core:IClickable", "required": false }, { - "uid": "isLinkActive", - "name": "isLinkActive", + "uid": "rawProps", + "name": "rawProps", "comment": { "raw": [ - "Highlights component to show that link is active (browser is displaying the page to which link is pointing)" + "Any HTML attributes (native or 'data-') to put on the underlying component" ] }, "typeValue": { - "raw": "boolean" + "raw": "React.HTMLAttributes & Record<`data-${string}`, string>" }, - "editor": { - "type": "bool" + "from": "@epam/uui-core:IHasRawProps", + "required": false + }, + { + "uid": "key", + "name": "key", + "typeValue": { + "raw": "null | string | number" }, + "from": "@types/react:Attributes", "required": false }, { - "uid": "target", - "name": "target", + "uid": "children", + "name": "children", "comment": { "raw": [ - "Controls where the link should be opened" + "Component children" ] }, "typeValue": { - "raw": "'_blank'" - }, - "editor": { - "type": "oneOf", - "options": [ - "_blank" - ] + "raw": "React.ReactNode" }, + "typeValueRef": "@types/react:ReactNode", + "from": "@epam/uui-core:IHasChildren", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:ICheckable": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "ICheckable", - "nameFull": "ICheckable" - }, - "src": "uui-core/src/types/props.ts", - "exported": true - }, - "details": { - "kind": 265, - "typeValue": { - "raw": "ICheckable", - "print": [ - "type ICheckable = IEditable & IDisableable & {", - " /** Sets checkbox in indeterminate state (neither checked or unchecked), which usually means that children elements has both values */", - " indeterminate?: boolean;", - "};" - ] - }, - "props": [ + }, { - "uid": "isInvalid", - "name": "isInvalid", + "uid": "width", + "name": "width", "comment": { "raw": [ - "True if component contains invalid input" + "CSS width. Set to 'auto' to make FlexCell resize to it's content" ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "number | 'auto' | '100%'" }, - "from": "@epam/uui-core:ICanBeInvalid", "required": false }, { - "uid": "isDisabled", - "name": "isDisabled", + "uid": "minWidth", + "name": "minWidth", "comment": { "raw": [ - "Disable editing, and visually de-emphasize value of the component" + "CSS min-width" ] }, "typeValue": { - "raw": "boolean" + "raw": "number" }, "editor": { - "type": "bool" + "type": "number" }, - "from": "@epam/uui-core:IDisableable", "required": false }, { - "uid": "isReadonly", - "name": "isReadonly", + "uid": "grow", + "name": "grow", "comment": { "raw": [ - "Disable editing. Unlike isDisabled, keep component's value readable." + "Flexbox flex-grow property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flex-grow)" ] }, "typeValue": { - "raw": "boolean" + "raw": "number" }, "editor": { - "type": "bool" + "type": "number" }, - "from": "@epam/uui-core:ICanBeReadonly", "required": false }, { - "uid": "isRequired", - "name": "isRequired", + "uid": "shrink", + "name": "shrink", "comment": { "raw": [ - "Marks that component's value is required and shouldn't be empty" + "Flexbox shrink property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flex-shrink)" ] }, "typeValue": { - "raw": "boolean" + "raw": "number" }, "editor": { - "type": "bool" + "type": "number" }, - "from": "@epam/uui-core:ICanBeRequired", "required": false }, { - "uid": "value", - "name": "value", + "uid": "textAlign", + "name": "textAlign", "comment": { "raw": [ - "The current value of component" + "CSS text-align property" ] }, "typeValue": { - "raw": "boolean" + "raw": "'left' | 'right' | 'center'" }, "editor": { - "type": "bool" + "type": "oneOf", + "options": [ + "left", + "right", + "center" + ] }, - "from": "@epam/uui-core:IControlled", - "required": true + "required": false }, { - "uid": "onValueChange", - "name": "onValueChange", + "uid": "alignSelf", + "name": "alignSelf", "comment": { "raw": [ - "Called when value needs to be changed (usually due to user interaction)" + "Flexbox align-self property. Aligns items vertically for horizontal flexbox. [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-align-self)" ] }, "typeValue": { - "raw": "(newValue: boolean) => void" + "raw": "string" }, "editor": { - "type": "func" + "type": "string" }, - "from": "@epam/uui-core:IControlled", - "required": true + "required": false }, { - "uid": "indeterminate", - "name": "indeterminate", + "uid": "style", + "name": "style", "comment": { "raw": [ - "Sets checkbox in indeterminate state (neither checked or unchecked), which usually means that children elements has both values" + "Standard style attribute. Styles are added to element style, overriding supplied flex styles" ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "React.CSSProperties" }, "required": false } @@ -13785,38 +12931,55 @@ "propsFromUnion": false } }, - "@epam/uui-core:IClickable": { + "@epam/uui-core:FlexRowProps": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IClickable", - "nameFull": "IClickable" + "name": "FlexRowProps", + "nameFull": "FlexRowProps" }, "src": "uui-core/src/types/props.ts", - "comment": { - "raw": [ - "Component supports click action" - ] - }, "exported": true }, "details": { - "kind": 264, + "kind": 265, "typeValue": { - "raw": "IClickable", + "raw": "FlexRowProps", "print": [ - "/** Component supports click action */", - "interface IClickable {", - " /** Called when component is clicked */", - " onClick?(e?: any): void;", - "}" - ] - }, - "props": [ - { - "uid": "onClick", - "name": "onClick", - "comment": { + "type FlexRowProps = IHasCX & IClickable & Attributes & IHasChildren & IHasRawProps> & {", + " /** Flexbox align-items property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)", + " * @default 'center'", + " * */", + " alignItems?: 'top' | 'center' | 'bottom' | 'stretch';", + " /** Flexbox justifyContent property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) */", + " justifyContent?: 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'start' | 'end';", + " /** Flexbox column gap property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-gap-row-gap-column-gap) */", + " columnGap?: number | '6' | '12' | '18' | '24' | '36';", + " /** Flexbox row gap property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-gap-row-gap-column-gap) */", + " rowGap?: number | '6' | '12' | '18' | '24' | '36';", + "};" + ] + }, + "props": [ + { + "uid": "cx", + "name": "cx", + "comment": { + "raw": [ + "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" + ] + }, + "typeValue": { + "raw": "null | string | number | boolean | ClassDictionary | ClassArray" + }, + "typeValueRef": "@epam/uui-core:ClassValue", + "from": "@epam/uui-core:IHasCX", + "required": false + }, + { + "uid": "onClick", + "name": "onClick", + "comment": { "raw": [ "Called when component is clicked" ] @@ -13827,251 +12990,341 @@ "editor": { "type": "func" }, + "from": "@epam/uui-core:IClickable", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:IColumnConfig": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "IColumnConfig", - "nameFull": "IColumnConfig" - }, - "src": "uui-core/src/types/tables.ts", - "exported": true - }, - "details": { - "kind": 265, - "typeValue": { - "raw": "IColumnConfig", - "print": [ - "type IColumnConfig = {", - " /** If true, the column will be shown in the FiltersPanel */", - " isVisible?: boolean;", - " /**", - " * Determines the order in which this column should appear in the table.", - " * The columns are sorted in ascending alphabetical order.", - " */", - " order?: string;", - " /** The width of the column */", - " width?: number;", - "} & ICanBeFixed;" - ] - }, - "props": [ + }, { - "uid": "isVisible", - "name": "isVisible", + "uid": "key", + "name": "key", + "typeValue": { + "raw": "null | string | number" + }, + "from": "@types/react:Attributes", + "required": false + }, + { + "uid": "children", + "name": "children", "comment": { "raw": [ - "If true, the column will be shown in the FiltersPanel" + "Component children" ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "React.ReactNode" }, + "typeValueRef": "@types/react:ReactNode", + "from": "@epam/uui-core:IHasChildren", "required": false }, { - "uid": "order", - "name": "order", + "uid": "rawProps", + "name": "rawProps", "comment": { "raw": [ - "Determines the order in which this column should appear in the table.", - " The columns are sorted in ascending alphabetical order." + "Any HTML attributes (native or 'data-') to put on the underlying component" ] }, "typeValue": { - "raw": "string" - }, - "editor": { - "type": "string" + "raw": "React.HTMLAttributes & Record<`data-${string}`, string>" }, + "from": "@epam/uui-core:IHasRawProps", "required": false }, { - "uid": "width", - "name": "width", + "uid": "alignItems", + "name": "alignItems", "comment": { "raw": [ - "The width of the column" - ] + "Flexbox align-items property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)", + " @default 'center'" + ], + "tags": { + "@default": "center" + } }, "typeValue": { - "raw": "number" + "raw": "'top' | 'bottom' | 'center' | 'stretch'" }, "editor": { - "type": "number" + "type": "oneOf", + "options": [ + "top", + "bottom", + "center", + "stretch" + ] }, "required": false }, { - "uid": "fix", - "name": "fix", + "uid": "justifyContent", + "name": "justifyContent", "comment": { "raw": [ - "If specified, will make column fixed - it would not scroll horizontally" + "Flexbox justifyContent property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)" ] }, "typeValue": { - "raw": "'left' | 'right'" + "raw": "'center' | 'space-around' | 'space-between' | 'space-evenly' | 'end' | 'start'" }, "editor": { "type": "oneOf", "options": [ - "left", - "right" + "center", + "space-around", + "space-between", + "space-evenly", + "end", + "start" ] }, - "from": "@epam/uui-core:ICanBeFixed", + "required": false + }, + { + "uid": "columnGap", + "name": "columnGap", + "comment": { + "raw": [ + "Flexbox column gap property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-gap-row-gap-column-gap)" + ] + }, + "typeValue": { + "raw": "number | '6' | '12' | '18' | '24' | '36'" + }, + "required": false + }, + { + "uid": "rowGap", + "name": "rowGap", + "comment": { + "raw": [ + "Flexbox row gap property [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-gap-row-gap-column-gap)" + ] + }, + "typeValue": { + "raw": "number | '6' | '12' | '18' | '24' | '36'" + }, "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:Icon": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "Icon", - "nameFull": "Icon" - }, - "src": "uui-core/src/types/objects.ts", - "exported": true - }, - "details": { - "kind": 265, - "typeValue": { - "raw": "Icon", - "print": [ - "type Icon = React.FC;" - ] - } - } - }, - "@epam/uui-core:IContextProviderSsrProps": { + "@epam/uui-core:FormProps": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IContextProviderSsrProps", - "nameFull": "IContextProviderSsrProps" + "name": "FormProps", + "nameFull": "FormProps" }, - "src": "uui-core/src/ssr/useUuiServicesSsr.tsx", + "src": "uui-core/src/data/forms/Form.tsx", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "IContextProviderSsrProps", + "raw": "FormProps", "print": [ - "interface IContextProviderSsrProps extends UseUuiServicesProps {", - " router: any;", + "interface FormProps {", + " /** Current value of the form state */", + " value: T;", + " /**", + " * Render the form body, provided by form state", + " * */", + " renderForm: (props: IFormApi) => ReactNode;", + " /**", + " * Returns form metadata - information used to validate the form.", + " * @param state Metadata can depend on state, and will be re-computed on updates", + " */", + " getMetadata?(state: T): Metadata;", + " /**", + " * Occurs when 'save' function is called on Form.", + " * Should save form data (usually with API call to server).", + " * Server can also reject form, and provide validation errors in response.", + " * @param state Form state to save", + " */", + " onSave(state: T): Promise | void>;", + " /**", + " * Called when form is unmounted, but user still have unsaved changes.", + " * Accepts a Promise to be returned. If promise resolves to true - save procedure is performed.", + " * The common use-case is to show a modal with \"Save Changes?\" dialog", + " * Skins usually implement this as default behavior. To prevent it, you can pass null to this prop to override it.", + " */", + " beforeLeave?: (() => Promise) | null;", + " /**", + " * Used to restore unsaved user edits from the last session (usually to localstorage, via uuiUserSettings context)", + " * If unsaved changes are detected, this callback is called. If it is resolved - the form restores unsaved edits.", + " * The common use-case is to show a modal with \"You have unsaved changes, restore them?\" dialog", + " * Skins usually implement this as default behavior. To prevent it, you can pass null to this prop to override it.", + " */", + " loadUnsavedChanges?: () => Promise;", + " /**", + " * Called after successful save.", + " * @param state Saved state", + " * @param isSavedBeforeLeave true, if save is triggered via leaving the page, and \"Save Changes?\" dialog", + " */", + " onSuccess?(state: T, isSavedBeforeLeave?: boolean): any;", + " /** Called when save fails */", + " onError?(error: any): any;", + " /**", + " * The key, under which form save unsaved state usually to localstorage, via uuiUserSettings context)", + " */", + " settingsKey?: string;", + " /**", + " * Controls when form validation occurs:", + " * save (default, recommended) - form is validated on save. If form is invalid - it will be revalidated on every change, until become valid", + " * change - form is validated on every user change. Only fields changes in current edit session are validated", + " */", + " validationOn?: ValidationMode;", "}" ] }, "props": [ { - "uid": "router", - "name": "router", + "uid": "value", + "name": "value", + "comment": { + "raw": [ + "Current value of the form state" + ] + }, "typeValue": { - "raw": "any" + "raw": "T" }, "required": true }, { - "uid": "appContext", - "name": "appContext", + "uid": "renderForm", + "name": "renderForm", "comment": { "raw": [ - "AppContext value" + "Render the form body, provided by form state" ] }, "typeValue": { - "raw": "TAppContext" + "raw": "(props: IFormApi) => React.ReactNode" + }, + "editor": { + "type": "component" + }, + "required": true + }, + { + "uid": "getMetadata", + "name": "getMetadata", + "comment": { + "raw": [ + "Returns form metadata - information used to validate the form.", + " @param state Metadata can depend on state, and will be re-computed on updates" + ] + }, + "typeValue": { + "raw": "(state: T) => Metadata" + }, + "editor": { + "type": "func" }, - "from": "@epam/uui-core:UseUuiServicesProps", "required": false }, { - "uid": "apiDefinition", - "name": "apiDefinition", + "uid": "onSave", + "name": "onSave", "comment": { "raw": [ - "Function to get the api definitions.", - " Usually, api definitions this is an object which contain object with all api requests of the app.", - " Then you can call this requests via 'uuiContext.api.myApi(myData)'" + "Occurs when 'save' function is called on Form.", + " Should save form data (usually with API call to server).", + " Server can also reject form, and provide validation errors in response.", + " @param state Form state to save" ] }, "typeValue": { - "raw": "(processRequest: IProcessRequest) => TApi" + "raw": "(state: T) => Promise>" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "beforeLeave", + "name": "beforeLeave", + "comment": { + "raw": [ + "Called when form is unmounted, but user still have unsaved changes.", + " Accepts a Promise to be returned. If promise resolves to true - save procedure is performed.", + " The common use-case is to show a modal with \"Save Changes?\" dialog", + " Skins usually implement this as default behavior. To prevent it, you can pass null to this prop to override it." + ] + }, + "typeValue": { + "raw": "null | () => Promise" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:UuiServicesProps", "required": false }, { - "uid": "apiReloginPath", - "name": "apiReloginPath", + "uid": "loadUnsavedChanges", + "name": "loadUnsavedChanges", "comment": { "raw": [ - "Url to the relogin page. Used to open new browser window by this path, in case of auth lost error.", - " Opened by this path page, should process authentication and then post 'authSuccess' cross-window message to the opener, to recover failed requests.", - " @default '/auth/login'" - ], - "tags": { - "@default": "/auth/login" - } + "Used to restore unsaved user edits from the last session (usually to localstorage, via uuiUserSettings context)", + " If unsaved changes are detected, this callback is called. If it is resolved - the form restores unsaved edits.", + " The common use-case is to show a modal with \"You have unsaved changes, restore them?\" dialog", + " Skins usually implement this as default behavior. To prevent it, you can pass null to this prop to override it." + ] }, "typeValue": { - "raw": "string" + "raw": "() => Promise" }, "editor": { - "type": "string" + "type": "func" }, - "from": "@epam/uui-core:ApiContextProps", "required": false }, { - "uid": "apiPingPath", - "name": "apiPingPath", + "uid": "onSuccess", + "name": "onSuccess", "comment": { "raw": [ - "Url to the api, which ApiContext will start pinging in case of 'connection lost', until it gets 200 status. Then it will retry failed requests.", - " @default '/auth/ping'" - ], - "tags": { - "@default": "/auth/ping" - } + "Called after successful save.", + " @param state Saved state", + " @param isSavedBeforeLeave true, if save is triggered via leaving the page, and \"Save Changes?\" dialog" + ] }, "typeValue": { - "raw": "string" + "raw": "(state: T, isSavedBeforeLeave?: boolean | undefined) => any" }, "editor": { - "type": "string" + "type": "func" }, - "from": "@epam/uui-core:ApiContextProps", "required": false }, { - "uid": "apiServerUrl", - "name": "apiServerUrl", + "uid": "onError", + "name": "onError", "comment": { "raw": [ - "Url to the server api under which all requests will be processed. Usefully for cases, when all api located by some specific url, which is not much app url.", - " @default ''" - ], - "tags": { - "@default": "" - } + "Called when save fails" + ] + }, + "typeValue": { + "raw": "(error: any) => any" + }, + "editor": { + "type": "func" + }, + "required": false + }, + { + "uid": "settingsKey", + "name": "settingsKey", + "comment": { + "raw": [ + "The key, under which form save unsaved state usually to localstorage, via uuiUserSettings context)" + ] }, "typeValue": { "raw": "string" @@ -14079,231 +13332,296 @@ "editor": { "type": "string" }, - "from": "@epam/uui-core:ApiContextProps", "required": false }, { - "uid": "fetch", - "name": "fetch", + "uid": "validationOn", + "name": "validationOn", "comment": { "raw": [ - "Allows to replace fetch implementation, for adding auth headers, mocking for testing, etc.", - " By default, standard fetch will be used." + "Controls when form validation occurs:", + " save (default, recommended) - form is validated on save. If form is invalid - it will be revalidated on every change, until become valid", + " change - form is validated on every user change. Only fields changes in current edit session are validated" ] }, "typeValue": { - "raw": "typeof fetch" + "raw": "'change' | 'save'" }, "editor": { - "type": "func" + "type": "oneOf", + "options": [ + "change", + "save" + ] }, - "from": "@epam/uui-core:ApiContextProps", "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:IControlled": { + "@epam/uui-core:FormSaveResponse": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IControlled", - "nameFull": "IControlled" + "name": "FormSaveResponse", + "nameFull": "FormSaveResponse" }, - "src": "uui-core/src/types/props.ts", + "src": "uui-core/src/data/forms/Form.tsx", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "IControlled", + "raw": "FormSaveResponse", "print": [ - "interface IControlled {", - " /** The current value of component */", - " value: T;", - " /** Called when value needs to be changed (usually due to user interaction) */", - " onValueChange(newValue: T): void;", + "interface FormSaveResponse {", + " /** New form value, which will replace previous one */", + " form?: T;", + " /** Server-side validation state. It's applied in priority over client validation. */", + " validation?: ValidationState;", "}" ] }, "props": [ { - "uid": "value", - "name": "value", + "uid": "form", + "name": "form", "comment": { "raw": [ - "The current value of component" + "New form value, which will replace previous one" ] }, "typeValue": { "raw": "T" }, - "required": true + "required": false }, { - "uid": "onValueChange", - "name": "onValueChange", + "uid": "validation", + "name": "validation", "comment": { "raw": [ - "Called when value needs to be changed (usually due to user interaction)" + "Server-side validation state. It's applied in priority over client validation." ] }, "typeValue": { - "raw": "(newValue: T) => void" - }, - "editor": { - "type": "func" + "raw": "ValidationState" }, - "required": true + "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:IDataSource": { + "@epam/uui-core:IAdaptiveItem": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IDataSource", - "nameFull": "IDataSource" + "name": "IAdaptiveItem", + "nameFull": "IAdaptiveItem" }, - "src": "uui-core/src/types/dataSources.ts", + "src": "uui-core/src/types/props.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "IDataSource", + "raw": "IAdaptiveItem", "print": [ - "interface IDataSource {", - " getId(item: TItem): TId;", - " getById(id: TId): TItem | void;", - " setItem(item: TItem): void;", - " getView(value: DataSourceState, onValueChange: (val: DataSourceState) => any, options?: any): IDataSourceView;", - " useView(value: DataSourceState, onValueChange: (val: DataSourceState) => any, options?: any, deps?: any[]): IDataSourceView;", - " unsubscribeView(onValueChange: (val: DataSourceState) => any): void;", + "// TBD: remove when MainMenu old api of items providing will be removed", + "interface IAdaptiveItem {", + " estimatedWidth?: number;", + " priority?: number;", + " showInBurgerMenu?: boolean;", + " collapseToMore?: boolean;", + " collapsedContainer?: boolean;", "}" ] }, "props": [ { - "uid": "getId", - "name": "getId", + "uid": "estimatedWidth", + "name": "estimatedWidth", "typeValue": { - "raw": "(item: TItem) => TId" + "raw": "number" }, "editor": { - "type": "func" + "type": "number" }, - "required": true + "required": false }, { - "uid": "getById", - "name": "getById", + "uid": "priority", + "name": "priority", "typeValue": { - "raw": "(id: TId) => void | TItem" + "raw": "number" }, "editor": { - "type": "func" + "type": "number" }, - "required": true + "required": false }, { - "uid": "setItem", - "name": "setItem", + "uid": "showInBurgerMenu", + "name": "showInBurgerMenu", "typeValue": { - "raw": "(item: TItem) => void" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "required": true + "required": false }, { - "uid": "getView", - "name": "getView", + "uid": "collapseToMore", + "name": "collapseToMore", "typeValue": { - "raw": "(value: DataSourceState, onValueChange: (val: DataSourceState) => any, options?: any) => IDataSourceView" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "required": true + "required": false }, { - "uid": "useView", - "name": "useView", + "uid": "collapsedContainer", + "name": "collapsedContainer", "typeValue": { - "raw": "(value: DataSourceState, onValueChange: (val: DataSourceState) => any, options?: any, deps?: any[] | undefined) => IDataSourceView" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "required": true - }, + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IAnalyticableClick": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IAnalyticableClick", + "nameFull": "IAnalyticableClick" + }, + "src": "uui-core/src/types/props.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "IAnalyticableClick", + "print": [ + "interface IAnalyticableClick {", + " /**", + " * An analytics event to send (via AnalyticsContext) when component is clicked.", + " * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts).", + " */", + " clickAnalyticsEvent?: AnalyticsEvent;", + "}" + ] + }, + "props": [ + { + "uid": "clickAnalyticsEvent", + "name": "clickAnalyticsEvent", + "comment": { + "raw": [ + "An analytics event to send (via AnalyticsContext) when component is clicked.", + " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)." + ] + }, + "typeValue": { + "raw": "null | { [key: string]: any; name: string; }" + }, + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IAnalyticableOnChange": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IAnalyticableOnChange", + "nameFull": "IAnalyticableOnChange" + }, + "src": "uui-core/src/types/props.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "IAnalyticableOnChange", + "print": [ + "interface IAnalyticableOnChange {", + " /**", + " * Given a value, returns an analytics event to send when component is edited.", + " * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts).", + " */", + " getValueChangeAnalyticsEvent?: (newValue: T | null, oldValue: T | null) => AnalyticsEvent;", + "}" + ] + }, + "props": [ { - "uid": "unsubscribeView", - "name": "unsubscribeView", + "uid": "getValueChangeAnalyticsEvent", + "name": "getValueChangeAnalyticsEvent", + "comment": { + "raw": [ + "Given a value, returns an analytics event to send when component is edited.", + " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)." + ] + }, "typeValue": { - "raw": "(onValueChange: (val: DataSourceState) => any) => void" + "raw": "(newValue: T | null, oldValue: T | null) => AnalyticsEvent" }, "editor": { "type": "func" }, - "required": true + "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:IDataSourceView": { + "@epam/uui-core:IAnalyticsContext": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IDataSourceView", - "nameFull": "IDataSourceView" + "name": "IAnalyticsContext", + "nameFull": "IAnalyticsContext" }, - "src": "uui-core/src/types/dataSources.ts", + "src": "uui-core/src/types/contexts.ts", "exported": true }, "details": { - "kind": 265, + "kind": 264, "typeValue": { - "raw": "IDataSourceView", + "raw": "IAnalyticsContext", "print": [ - "// eslint-disable-next-line @typescript-eslint/no-unused-vars", - "type IDataSourceView = {", - " getConfig(): IDataSourceViewConfig;", - " getById(id: TId, index: number): DataRowProps;", - " getListProps(): DataSourceListProps;", - " getRows(): DataRowProps[];", - " getSelectedRows(range?: VirtualListRange): DataRowProps[];", - " getSelectedRowsCount(): number;", - " reload(): void;", - " /**", - " * Activates IDataSourceView.", - " * After view activation, it becomes able to listen to updates.", - " */", - " activate(): void;", - " /**", - " * Deactivates IDataSourceView.", - " * After view deactivation, it becomes impossible to listen to updates.", - " */", - " deactivate(): void;", - " loadData(): void;", - " clearAllChecked(): void;", - " _forceUpdate(): void;", - " selectAll?: ICheckable;", - "};" + "interface IAnalyticsContext {", + " /** Sends event to the all listeners */", + " sendEvent(event?: AnalyticsEvent): void;", + " /** Adds analytic event listener */", + " addListener(listener: IAnalyticsListener): void;", + "}" ] }, "props": [ { - "uid": "getConfig", - "name": "getConfig", + "uid": "sendEvent", + "name": "sendEvent", + "comment": { + "raw": [ + "Sends event to the all listeners" + ] + }, "typeValue": { - "raw": "() => IDataSourceViewConfig" + "raw": "(event?: AnalyticsEvent | undefined) => void" }, "editor": { "type": "func" @@ -14311,54 +13629,170 @@ "required": true }, { - "uid": "getById", - "name": "getById", + "uid": "addListener", + "name": "addListener", + "comment": { + "raw": [ + "Adds analytic event listener" + ] + }, "typeValue": { - "raw": "(id: TId, index: number) => DataRowProps" + "raw": "(listener: IAnalyticsListener) => void" }, "editor": { "type": "func" }, "required": true - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IAnalyticsListener": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IAnalyticsListener", + "nameFull": "IAnalyticsListener" + }, + "src": "uui-core/src/types/contexts.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "IAnalyticsListener", + "print": [ + "interface IAnalyticsListener {", + " /** Defines how to send event to the analytics system */", + " sendEvent(event: AnalyticsEvent, parameters: Omit, eventType?: 'event' | 'pageView' | 'apiTiming'): void;", + "}" + ] + }, + "props": [ { - "uid": "getListProps", - "name": "getListProps", + "uid": "sendEvent", + "name": "sendEvent", + "comment": { + "raw": [ + "Defines how to send event to the analytics system" + ] + }, "typeValue": { - "raw": "() => DataSourceListProps" + "raw": "(event: AnalyticsEvent, parameters: Omit, eventType?: 'event' | 'pageView' | 'apiTiming' | undefined) => void" }, "editor": { "type": "func" }, "required": true - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IApiContext": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IApiContext", + "nameFull": "IApiContext" + }, + "src": "uui-core/src/types/contexts.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "IApiContext", + "print": [ + "interface IApiContext extends IBaseContext {", + " /** Current status of api service.", + " * idle - service do nothing and ready to process new requests", + " * running - service is currently processing requests", + " * error - service received an error and stop processing requests, due to this error will be discarded", + " * recovery - service trying to restore connection and recover latest requests", + " * */", + " readonly status: ApiStatus;", + " /** Reason of why api trying to recover connection */", + " readonly recoveryReason: ApiRecoveryReason | null;", + " /** Returns currently processing or failed requests */", + " getActiveCalls(status?: ApiCallStatus): ApiCallInfo[];", + " /** Resets all errors */", + " reset(): void;", + " /** Starts fetch call with providing params */", + " processRequest(url: string, method: string, data?: any, options?: ApiCallOptions): Promise;", + " /** Starts file uploading using FormData */", + " uploadFile(url: string, file: File, options: FileUploadOptions): Promise;", + " /** Url to the relogin page. Used to open new browser window by this path, in case of auth lost error.", + " * Opened by this path page, should process authentication and then post 'authSuccess' cross-window message to the opener, to recover failed requests.", + " * @default '/auth/login'", + " * */", + " apiReloginPath: string;", + "}" + ] + }, + "props": [ { - "uid": "getRows", - "name": "getRows", + "uid": "status", + "name": "status", + "comment": { + "raw": [ + "Current status of api service.", + " idle - service do nothing and ready to process new requests", + " running - service is currently processing requests", + " error - service received an error and stop processing requests, due to this error will be discarded", + " recovery - service trying to restore connection and recover latest requests" + ] + }, "typeValue": { - "raw": "() => DataRowProps[]" + "raw": "'running' | 'error' | 'idle' | 'recovery'" }, + "typeValueRef": "@epam/uui-core:ApiStatus", "editor": { - "type": "func" + "type": "oneOf", + "options": [ + "running", + "error", + "idle", + "recovery" + ] }, "required": true }, { - "uid": "getSelectedRows", - "name": "getSelectedRows", + "uid": "recoveryReason", + "name": "recoveryReason", + "comment": { + "raw": [ + "Reason of why api trying to recover connection" + ] + }, "typeValue": { - "raw": "(range?: VirtualListRange | undefined) => DataRowProps[]" + "raw": "null | 'auth-lost' | 'connection-lost' | 'server-overload' | 'maintenance'" }, + "typeValueRef": "@epam/uui-core:ApiRecoveryReason", "editor": { - "type": "func" + "type": "oneOf", + "options": [ + "auth-lost", + "connection-lost", + "server-overload", + "maintenance", + null + ] }, - "required": true + "required": false }, { - "uid": "getSelectedRowsCount", - "name": "getSelectedRowsCount", + "uid": "getActiveCalls", + "name": "getActiveCalls", + "comment": { + "raw": [ + "Returns currently processing or failed requests" + ] + }, "typeValue": { - "raw": "() => number" + "raw": "(status?: ApiCallStatus | undefined) => ApiCallInfo[]" }, "editor": { "type": "func" @@ -14366,8 +13800,13 @@ "required": true }, { - "uid": "reload", - "name": "reload", + "uid": "reset", + "name": "reset", + "comment": { + "raw": [ + "Resets all errors" + ] + }, "typeValue": { "raw": "() => void" }, @@ -14377,16 +13816,15 @@ "required": true }, { - "uid": "activate", - "name": "activate", + "uid": "processRequest", + "name": "processRequest", "comment": { "raw": [ - "Activates IDataSourceView.", - " After view activation, it becomes able to listen to updates." + "Starts fetch call with providing params" ] }, "typeValue": { - "raw": "() => void" + "raw": "(url: string, method: string, data?: any, options?: ApiCallOptions | undefined) => Promise" }, "editor": { "type": "func" @@ -14394,16 +13832,15 @@ "required": true }, { - "uid": "deactivate", - "name": "deactivate", + "uid": "uploadFile", + "name": "uploadFile", "comment": { "raw": [ - "Deactivates IDataSourceView.", - " After view deactivation, it becomes impossible to listen to updates." + "Starts file uploading using FormData" ] }, "typeValue": { - "raw": "() => void" + "raw": "(url: string, file: File, options: FileUploadOptions) => Promise" }, "editor": { "type": "func" @@ -14411,151 +13848,172 @@ "required": true }, { - "uid": "loadData", - "name": "loadData", + "uid": "apiReloginPath", + "name": "apiReloginPath", + "comment": { + "raw": [ + "Url to the relogin page. Used to open new browser window by this path, in case of auth lost error.", + " Opened by this path page, should process authentication and then post 'authSuccess' cross-window message to the opener, to recover failed requests.", + " @default '/auth/login'" + ], + "tags": { + "@default": "/auth/login" + } + }, "typeValue": { - "raw": "() => void" + "raw": "string" }, "editor": { - "type": "func" + "type": "string" }, "required": true }, { - "uid": "clearAllChecked", - "name": "clearAllChecked", + "uid": "subscribe", + "name": "subscribe", + "comment": { + "raw": [ + "Add your handler, which will be called on context updates" + ] + }, "typeValue": { - "raw": "() => void" + "raw": "(handler: (state: {}) => void) => void" }, "editor": { "type": "func" }, + "from": "@epam/uui-core:IBaseContext", "required": true }, { - "uid": "_forceUpdate", - "name": "_forceUpdate", + "uid": "unsubscribe", + "name": "unsubscribe", + "comment": { + "raw": [ + "Unsubscribe from context updates" + ] + }, "typeValue": { - "raw": "() => void" + "raw": "(handler: (state: {}) => void) => void" }, "editor": { "type": "func" }, + "from": "@epam/uui-core:IBaseContext", "required": true }, { - "uid": "selectAll", - "name": "selectAll", + "uid": "destroyContext", + "name": "destroyContext", + "comment": { + "raw": [ + "Manually destroy context and unsubscribe from all listeners" + ] + }, "typeValue": { - "raw": "ICheckable" + "raw": "() => void" }, - "required": false + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IBaseContext", + "required": true } ], "propsFromUnion": false } }, - "@epam/uui-core:IDataSourceViewConfig": { + "@epam/uui-core:IBaseContext": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IDataSourceViewConfig", - "nameFull": "IDataSourceViewConfig" + "name": "IBaseContext", + "nameFull": "IBaseContext" }, - "src": "uui-core/src/types/dataSources.ts", + "src": "uui-core/src/types/contexts.ts", "exported": true }, "details": { - "kind": 265, + "kind": 264, "typeValue": { - "raw": "IDataSourceViewConfig", + "raw": "IBaseContext", "print": [ - "type IDataSourceViewConfig = {", - " complexIds?: boolean;", - " cascadeSelection?: CascadeSelection;", - " selectAll?: true | false;", - " backgroundReload?: boolean;", - " flattenSearchResults?: boolean;", - "};" + "interface IBaseContext {", + " /** Add your handler, which will be called on context updates */", + " subscribe(handler: (state: TState) => void): void;", + " /** Unsubscribe from context updates */", + " unsubscribe(handler: (state: TState) => void): void;", + " /** Manually destroy context and unsubscribe from all listeners */", + " destroyContext: () => void;", + "}" ] }, "props": [ { - "uid": "complexIds", - "name": "complexIds", + "uid": "subscribe", + "name": "subscribe", + "comment": { + "raw": [ + "Add your handler, which will be called on context updates" + ] + }, "typeValue": { - "raw": "boolean" + "raw": "(handler: (state: TState) => void) => void" }, "editor": { - "type": "bool" + "type": "func" }, - "required": false + "required": true }, { - "uid": "cascadeSelection", - "name": "cascadeSelection", - "typeValue": { - "raw": "boolean | 'implicit' | 'explicit'" - }, - "editor": { - "type": "oneOf", - "options": [ - false, - true, - "implicit", - "explicit" + "uid": "unsubscribe", + "name": "unsubscribe", + "comment": { + "raw": [ + "Unsubscribe from context updates" ] }, - "required": false - }, - { - "uid": "selectAll", - "name": "selectAll", "typeValue": { - "raw": "boolean" + "raw": "(handler: (state: TState) => void) => void" }, "editor": { - "type": "bool" + "type": "func" }, - "required": false + "required": true }, { - "uid": "backgroundReload", - "name": "backgroundReload", - "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "uid": "destroyContext", + "name": "destroyContext", + "comment": { + "raw": [ + "Manually destroy context and unsubscribe from all listeners" + ] }, - "required": false - }, - { - "uid": "flattenSearchResults", - "name": "flattenSearchResults", "typeValue": { - "raw": "boolean" + "raw": "() => void" }, "editor": { - "type": "bool" + "type": "func" }, - "required": false + "required": true } ], "propsFromUnion": false } }, - "@epam/uui-core:IDisableable": { + "@epam/uui-core:IBasicPickerToggler": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IDisableable", - "nameFull": "IDisableable" + "name": "IBasicPickerToggler", + "nameFull": "IBasicPickerToggler" }, - "src": "uui-core/src/types/props.ts", + "src": "uui-core/src/types/pickers.ts", "comment": { "raw": [ - "Component can be disabled" + "Component can be used as Toggler control for pickers.", + " This interface is enough for basic pickers.", + " Picker togglers with search or advanced selection display should implement IPickerToggler interface" ] }, "exported": true @@ -14563,314 +14021,363 @@ "details": { "kind": 264, "typeValue": { - "raw": "IDisableable", + "raw": "IBasicPickerToggler", "print": [ - "/** Component can be disabled */", - "interface IDisableable {", - " /** Disable editing, and visually de-emphasize value of the component */", - " isDisabled?: boolean;", + "/**", + " * Component can be used as Toggler control for pickers.", + " * This interface is enough for basic pickers.", + " * Picker togglers with search or advanced selection display should implement IPickerToggler interface", + " */", + "interface IBasicPickerToggler extends IDropdownTogglerProps {", + " /** Call to clear toggler value */", + " onClear?(e?: any): void;", "}" ] }, "props": [ { - "uid": "isDisabled", - "name": "isDisabled", + "uid": "onClear", + "name": "onClear", "comment": { "raw": [ - "Disable editing, and visually de-emphasize value of the component" + "Call to clear toggler value" ] }, "typeValue": { - "raw": "boolean" + "raw": "(e?: any) => void" }, "editor": { - "type": "bool" + "type": "func" }, "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:IDndActor": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "IDndActor", - "nameFull": "IDndActor" - }, - "src": "uui-core/src/types/dnd.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "IDndActor", - "print": [ - "interface IDndActor {", - " /** Data used when this component acts as a drag source.", - " * If provided, it means this component can be dragged. Can be used in combination with dstData.", - " */", - " srcData?: TSrcData;", - " /** Data used when this component acts as a drop destination.", - " * If provided, it means something can be dragged onto this component. Can be used in combination with srcData.", - " */", - " dstData?: TDstData;", - " /** A pure function that gets permitted positions for a drop action */", - " canAcceptDrop?(params: AcceptDropParams): DropPositionOptions | null;", - " /** Called when accepted drop action performed on this actor. Usually used to reorder and update items */", - " onDrop?(data: DropParams): void;", - "}" - ] - }, - "props": [ + }, { - "uid": "srcData", - "name": "srcData", + "uid": "toggleDropdownOpening", + "name": "toggleDropdownOpening", "comment": { "raw": [ - "Data used when this component acts as a drag source.", - " If provided, it means this component can be dragged. Can be used in combination with dstData." + "Called when associated dropdown should open or close" ] }, "typeValue": { - "raw": "TSrcData" + "raw": "(value: boolean) => void" + }, + "editor": { + "type": "func" }, + "from": "@epam/uui-core:IDropdownTogglerProps", "required": false }, { - "uid": "dstData", - "name": "dstData", + "uid": "isInteractedOutside", + "name": "isInteractedOutside", "comment": { "raw": [ - "Data used when this component acts as a drop destination.", - " If provided, it means something can be dragged onto this component. Can be used in combination with srcData." + "Called when component is interacted outside, to close the dropdown" ] }, "typeValue": { - "raw": "TDstData" + "raw": "(event: Event) => boolean" + }, + "editor": { + "type": "func" }, + "from": "@epam/uui-core:IDropdownTogglerProps", "required": false }, { - "uid": "canAcceptDrop", - "name": "canAcceptDrop", + "uid": "ref", + "name": "ref", "comment": { "raw": [ - "A pure function that gets permitted positions for a drop action" + "Toggler component ref" ] }, "typeValue": { - "raw": "(params: AcceptDropParams) => Partial> | null" + "raw": "null | (instance: any) => void | React.RefObject" + }, + "from": "@epam/uui-core:IDropdownTogglerProps", + "required": false + }, + { + "uid": "isOpen", + "name": "isOpen", + "comment": { + "raw": [ + "When isDropdown=true, indicate that dropdown is open with chevron icon" + ] + }, + "typeValue": { + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, + "from": "@epam/uui-core:IDropdownToggler", "required": false }, { - "uid": "onDrop", - "name": "onDrop", + "uid": "isDropdown", + "name": "isDropdown", "comment": { "raw": [ - "Called when accepted drop action performed on this actor. Usually used to reorder and update items" + "Shows chevron icon, enabling component to act as dropdown toggler" ] }, "typeValue": { - "raw": "(data: DropParams) => void" + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:IDropdownToggler", + "required": false + }, + { + "uid": "onClick", + "name": "onClick", + "comment": { + "raw": [ + "Called when component is clicked" + ] + }, + "typeValue": { + "raw": "(e?: any) => void" }, "editor": { "type": "func" }, + "from": "@epam/uui-core:IClickable", "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:IDndContext": { + "@epam/uui-core:ICanBeFixed": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IDndContext", - "nameFull": "IDndContext" + "name": "ICanBeFixed", + "nameFull": "ICanBeFixed" }, - "src": "uui-core/src/types/contexts.ts", + "src": "uui-core/src/types/tables.ts", "exported": true }, "details": { - "kind": 264, + "kind": 265, "typeValue": { - "raw": "IDndContext", + "raw": "ICanBeFixed", "print": [ - "interface IDndContext extends IBaseContext {", - " startDrag(node: Node, data: any, renderGhost: () => React.ReactNode): void;", - " endDrag(): void;", - " /** Indicates that drag in progress */", - " isDragging: boolean;", - " dragData?: any;", - " getMouseCoords: () => TMouseCoords;", - "}" + "type ICanBeFixed = {", + " /** If specified, will make column fixed - it would not scroll horizontally */", + " fix?: 'left' | 'right';", + "};" ] }, "props": [ { - "uid": "startDrag", - "name": "startDrag", - "typeValue": { - "raw": "(node: Node, data: any, renderGhost: () => React.ReactNode) => void" - }, - "editor": { - "type": "func" - }, - "required": true - }, - { - "uid": "endDrag", - "name": "endDrag", - "typeValue": { - "raw": "() => void" - }, - "editor": { - "type": "func" - }, - "required": true - }, - { - "uid": "isDragging", - "name": "isDragging", + "uid": "fix", + "name": "fix", "comment": { "raw": [ - "Indicates that drag in progress" + "If specified, will make column fixed - it would not scroll horizontally" ] }, "typeValue": { - "raw": "boolean" + "raw": "'left' | 'right'" }, "editor": { - "type": "bool" - }, - "required": true - }, - { - "uid": "dragData", - "name": "dragData", - "typeValue": { - "raw": "any" + "type": "oneOf", + "options": [ + "left", + "right" + ] }, "required": false - }, - { - "uid": "getMouseCoords", - "name": "getMouseCoords", - "typeValue": { - "raw": "() => TMouseCoords" - }, - "editor": { - "type": "func" - }, - "required": true - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:ICanBeInvalid": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "ICanBeInvalid", + "nameFull": "ICanBeInvalid" + }, + "src": "uui-core/src/types/props.ts", + "comment": { + "raw": [ + "Component value can be invalid" + ] + }, + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "ICanBeInvalid", + "print": [ + "/** Component value can be invalid */", + "interface ICanBeInvalid {", + " /** True if component contains invalid input */", + " isInvalid?: boolean;", + "}" + ] + }, + "props": [ { - "uid": "subscribe", - "name": "subscribe", + "uid": "isInvalid", + "name": "isInvalid", "comment": { "raw": [ - "Add your handler, which will be called on context updates" + "True if component contains invalid input" ] }, "typeValue": { - "raw": "(handler: (state: DndContextState) => void) => void" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "from": "@epam/uui-core:IBaseContext", - "required": true - }, + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:ICanBeReadonly": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "ICanBeReadonly", + "nameFull": "ICanBeReadonly" + }, + "src": "uui-core/src/types/props.ts", + "comment": { + "raw": [ + "Component can be made read-only" + ] + }, + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "ICanBeReadonly", + "print": [ + "/** Component can be made read-only */", + "interface ICanBeReadonly {", + " /** Disable editing. Unlike isDisabled, keep component's value readable. */", + " isReadonly?: boolean;", + "}" + ] + }, + "props": [ { - "uid": "unsubscribe", - "name": "unsubscribe", + "uid": "isReadonly", + "name": "isReadonly", "comment": { "raw": [ - "Unsubscribe from context updates" + "Disable editing. Unlike isDisabled, keep component's value readable." ] }, "typeValue": { - "raw": "(handler: (state: DndContextState) => void) => void" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "from": "@epam/uui-core:IBaseContext", - "required": true - }, + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:ICanBeRequired": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "ICanBeRequired", + "nameFull": "ICanBeRequired" + }, + "src": "uui-core/src/types/props.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "ICanBeRequired", + "print": [ + "interface ICanBeRequired {", + " /** Marks that component's value is required and shouldn't be empty */", + " isRequired?: boolean;", + "}" + ] + }, + "props": [ { - "uid": "destroyContext", - "name": "destroyContext", + "uid": "isRequired", + "name": "isRequired", "comment": { "raw": [ - "Manually destroy context and unsubscribe from all listeners" + "Marks that component's value is required and shouldn't be empty" ] }, "typeValue": { - "raw": "() => void" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "from": "@epam/uui-core:IBaseContext", - "required": true + "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:IDropdownBodyProps": { + "@epam/uui-core:ICanFocus": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IDropdownBodyProps", - "nameFull": "IDropdownBodyProps" + "name": "ICanFocus", + "nameFull": "ICanFocus" }, "src": "uui-core/src/types/props.ts", + "comment": { + "raw": [ + "Component can get input focus" + ] + }, "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "IDropdownBodyProps", + "raw": "ICanFocus", "print": [ - "interface IDropdownBodyProps {", - " /** Call to close the Dropdown body */", - " onClose?: () => void;", - " /** The width of the toggler, which can be used to adjust the body width to it */", - " togglerWidth?: number;", - " /** The height of the toggler */", - " togglerHeight?: number;", - " /** Call to force recompute dropdown position */", - " scheduleUpdate?: () => void;", - " /** Indicates that dropdown is open */", - " isOpen?: boolean;", - " /** Props that should be provided to the arrow component */", - " arrowProps?: PopperArrowProps;", - " /** Dropdown position relative to the input. See [Popper Docs](@link https://popper.js.org/) */", - " placement?: Placement;", + "/** Component can get input focus */", + "interface ICanFocus {", + " /** Called when component gets input focus */", + " onFocus?: (e: React.FocusEvent) => void;", + " /** Called when component looses input focus */", + " onBlur?: (e: React.FocusEvent) => void;", "}" ] }, "props": [ { - "uid": "onClose", - "name": "onClose", + "uid": "onFocus", + "name": "onFocus", "comment": { "raw": [ - "Call to close the Dropdown body" + "Called when component gets input focus" ] }, "typeValue": { - "raw": "() => void" + "raw": "(e: React.FocusEvent) => void" }, "editor": { "type": "func" @@ -14878,59 +14385,94 @@ "required": false }, { - "uid": "togglerWidth", - "name": "togglerWidth", + "uid": "onBlur", + "name": "onBlur", "comment": { "raw": [ - "The width of the toggler, which can be used to adjust the body width to it" + "Called when component looses input focus" ] }, "typeValue": { - "raw": "number" + "raw": "(e: React.FocusEvent) => void" }, "editor": { - "type": "number" + "type": "func" }, "required": false - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:ICanRedirect": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "ICanRedirect", + "nameFull": "ICanRedirect" + }, + "src": "uui-core/src/types/props.ts", + "comment": { + "raw": [ + "Component acts as a link, and can redirect" + ] + }, + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "ICanRedirect", + "print": [ + "/** Component acts as a link, and can redirect */", + "interface ICanRedirect {", + " /** Link object to redirect to for SPA-redirects */", + " link?: Link;", + " /** Href (URL) to redirect to, for non-SPA redirects */", + " href?: string;", + " /** Highlights component to show that link is active (browser is displaying the page to which link is pointing) */", + " isLinkActive?: boolean;", + " /** Controls where the link should be opened */", + " target?: '_blank';", + "}" + ] + }, + "props": [ { - "uid": "togglerHeight", - "name": "togglerHeight", + "uid": "link", + "name": "link", "comment": { "raw": [ - "The height of the toggler" + "Link object to redirect to for SPA-redirects" ] }, "typeValue": { - "raw": "number" - }, - "editor": { - "type": "number" + "raw": "Link" }, "required": false }, { - "uid": "scheduleUpdate", - "name": "scheduleUpdate", + "uid": "href", + "name": "href", "comment": { "raw": [ - "Call to force recompute dropdown position" + "Href (URL) to redirect to, for non-SPA redirects" ] }, "typeValue": { - "raw": "() => void" + "raw": "string" }, "editor": { - "type": "func" + "type": "string" }, "required": false }, { - "uid": "isOpen", - "name": "isOpen", + "uid": "isLinkActive", + "name": "isLinkActive", "comment": { "raw": [ - "Indicates that dropdown is open" + "Highlights component to show that link is active (browser is displaying the page to which link is pointing)" ] }, "typeValue": { @@ -14942,47 +14484,20 @@ "required": false }, { - "uid": "arrowProps", - "name": "arrowProps", - "comment": { - "raw": [ - "Props that should be provided to the arrow component" - ] - }, - "typeValue": { - "raw": "PopperArrowProps" - }, - "required": false - }, - { - "uid": "placement", - "name": "placement", + "uid": "target", + "name": "target", "comment": { "raw": [ - "Dropdown position relative to the input. See [Popper Docs](@link https://popper.js.org/)" + "Controls where the link should be opened" ] }, "typeValue": { - "raw": "'left' | 'right' | 'auto' | 'auto-start' | 'auto-end' | 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end'" + "raw": "'_blank'" }, "editor": { "type": "oneOf", "options": [ - "left", - "right", - "auto", - "auto-start", - "auto-end", - "top", - "bottom", - "top-start", - "top-end", - "bottom-start", - "bottom-end", - "right-start", - "right-end", - "left-start", - "left-end" + "_blank" ] }, "required": false @@ -14991,42 +14506,34 @@ "propsFromUnion": false } }, - "@epam/uui-core:IDropdownToggler": { + "@epam/uui-core:ICheckable": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IDropdownToggler", - "nameFull": "IDropdownToggler" + "name": "ICheckable", + "nameFull": "ICheckable" }, "src": "uui-core/src/types/props.ts", - "comment": { - "raw": [ - "Component can be used as Toggler control for dropdown menus" - ] - }, "exported": true }, "details": { - "kind": 264, + "kind": 265, "typeValue": { - "raw": "IDropdownToggler", + "raw": "ICheckable", "print": [ - "/** Component can be used as Toggler control for dropdown menus */", - "interface IDropdownToggler {", - " /** When isDropdown=true, indicate that dropdown is open with chevron icon */", - " isOpen?: boolean;", - " /** Shows chevron icon, enabling component to act as dropdown toggler */", - " isDropdown?: boolean;", - "}" + "type ICheckable = IEditable & IDisableable & {", + " /** Sets checkbox in indeterminate state (neither checked or unchecked), which usually means that children elements has both values */", + " indeterminate?: boolean;", + "};" ] }, "props": [ { - "uid": "isOpen", - "name": "isOpen", + "uid": "isInvalid", + "name": "isInvalid", "comment": { "raw": [ - "When isDropdown=true, indicate that dropdown is open with chevron icon" + "True if component contains invalid input" ] }, "typeValue": { @@ -15035,14 +14542,15 @@ "editor": { "type": "bool" }, + "from": "@epam/uui-core:ICanBeInvalid", "required": false }, { - "uid": "isDropdown", - "name": "isDropdown", + "uid": "isDisabled", + "name": "isDisabled", "comment": { "raw": [ - "Shows chevron icon, enabling component to act as dropdown toggler" + "Disable editing, and visually de-emphasize value of the component" ] }, "typeValue": { @@ -15051,89 +14559,49 @@ "editor": { "type": "bool" }, + "from": "@epam/uui-core:IDisableable", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:IDropdownTogglerProps": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "IDropdownTogglerProps", - "nameFull": "IDropdownTogglerProps" - }, - "src": "uui-core/src/types/props.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "IDropdownTogglerProps", - "print": [ - "interface IDropdownTogglerProps extends IDropdownToggler, IClickable {", - " /** Called when associated dropdown should open or close */", - " toggleDropdownOpening?: (value: boolean) => void;", - " /** Called when component is interacted outside, to close the dropdown */", - " isInteractedOutside?: (event: Event) => boolean;", - " /** Toggler component ref */", - " ref?: React.Ref;", - "}" - ] - }, - "props": [ + }, { - "uid": "toggleDropdownOpening", - "name": "toggleDropdownOpening", + "uid": "isReadonly", + "name": "isReadonly", "comment": { "raw": [ - "Called when associated dropdown should open or close" + "Disable editing. Unlike isDisabled, keep component's value readable." ] }, "typeValue": { - "raw": "(value: boolean) => void" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, + "from": "@epam/uui-core:ICanBeReadonly", "required": false }, { - "uid": "isInteractedOutside", - "name": "isInteractedOutside", + "uid": "isRequired", + "name": "isRequired", "comment": { "raw": [ - "Called when component is interacted outside, to close the dropdown" + "Marks that component's value is required and shouldn't be empty" ] }, "typeValue": { - "raw": "(event: Event) => boolean" + "raw": "boolean" }, "editor": { - "type": "func" - }, - "required": false - }, - { - "uid": "ref", - "name": "ref", - "comment": { - "raw": [ - "Toggler component ref" - ] - }, - "typeValue": { - "raw": "null | (instance: any) => void | React.RefObject" + "type": "bool" }, + "from": "@epam/uui-core:ICanBeRequired", "required": false }, { - "uid": "isOpen", - "name": "isOpen", + "uid": "value", + "name": "value", "comment": { "raw": [ - "When isDropdown=true, indicate that dropdown is open with chevron icon" + "The current value of component" ] }, "typeValue": { @@ -15142,58 +14610,57 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:IDropdownToggler", - "required": false + "from": "@epam/uui-core:IControlled", + "required": true }, { - "uid": "isDropdown", - "name": "isDropdown", + "uid": "onValueChange", + "name": "onValueChange", "comment": { "raw": [ - "Shows chevron icon, enabling component to act as dropdown toggler" + "Called when value needs to be changed (usually due to user interaction)" ] }, "typeValue": { - "raw": "boolean" + "raw": "(newValue: boolean) => void" }, "editor": { - "type": "bool" + "type": "func" }, - "from": "@epam/uui-core:IDropdownToggler", - "required": false + "from": "@epam/uui-core:IControlled", + "required": true }, { - "uid": "onClick", - "name": "onClick", + "uid": "indeterminate", + "name": "indeterminate", "comment": { "raw": [ - "Called when component is clicked" + "Sets checkbox in indeterminate state (neither checked or unchecked), which usually means that children elements has both values" ] }, "typeValue": { - "raw": "(e?: any) => void" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "from": "@epam/uui-core:IClickable", "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:IEditable": { + "@epam/uui-core:IClickable": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IEditable", - "nameFull": "IEditable" + "name": "IClickable", + "nameFull": "IClickable" }, "src": "uui-core/src/types/props.ts", "comment": { "raw": [ - "Component displays an editable value. Text Input is a basic example." + "Component supports click action" ] }, "exported": true @@ -15201,37 +14668,71 @@ "details": { "kind": 264, "typeValue": { - "raw": "IEditable", + "raw": "IClickable", "print": [ - "/** Component displays an editable value. Text Input is a basic example. */", - "interface IEditable extends ICanBeInvalid, IDisableable, ICanBeReadonly, ICanBeRequired, IControlled {", + "/** Component supports click action */", + "interface IClickable {", + " /** Called when component is clicked */", + " onClick?(e?: any): void;", "}" ] }, "props": [ { - "uid": "isInvalid", - "name": "isInvalid", + "uid": "onClick", + "name": "onClick", "comment": { "raw": [ - "True if component contains invalid input" + "Called when component is clicked" ] }, "typeValue": { - "raw": "boolean" + "raw": "(e?: any) => void" }, "editor": { - "type": "bool" + "type": "func" }, - "from": "@epam/uui-core:ICanBeInvalid", "required": false - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IColumnConfig": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IColumnConfig", + "nameFull": "IColumnConfig" + }, + "src": "uui-core/src/types/tables.ts", + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "IColumnConfig", + "print": [ + "type IColumnConfig = {", + " /** If true, the column will be shown in the FiltersPanel */", + " isVisible?: boolean;", + " /**", + " * Determines the order in which this column should appear in the table.", + " * The columns are sorted in ascending alphabetical order.", + " */", + " order?: string;", + " /** The width of the column */", + " width?: number;", + "} & ICanBeFixed;" + ] + }, + "props": [ { - "uid": "isDisabled", - "name": "isDisabled", + "uid": "isVisible", + "name": "isVisible", "comment": { "raw": [ - "Disable editing, and visually de-emphasize value of the component" + "If true, the column will be shown in the FiltersPanel" ] }, "typeValue": { @@ -15240,418 +14741,320 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:IDisableable", "required": false }, { - "uid": "isReadonly", - "name": "isReadonly", + "uid": "order", + "name": "order", "comment": { "raw": [ - "Disable editing. Unlike isDisabled, keep component's value readable." + "Determines the order in which this column should appear in the table.", + " The columns are sorted in ascending alphabetical order." ] }, "typeValue": { - "raw": "boolean" + "raw": "string" }, "editor": { - "type": "bool" + "type": "string" }, - "from": "@epam/uui-core:ICanBeReadonly", "required": false }, { - "uid": "isRequired", - "name": "isRequired", + "uid": "width", + "name": "width", "comment": { "raw": [ - "Marks that component's value is required and shouldn't be empty" + "The width of the column" ] }, "typeValue": { - "raw": "boolean" + "raw": "number" }, "editor": { - "type": "bool" + "type": "number" }, - "from": "@epam/uui-core:ICanBeRequired", "required": false }, { - "uid": "value", - "name": "value", - "comment": { - "raw": [ - "The current value of component" - ] - }, - "typeValue": { - "raw": "T" - }, - "from": "@epam/uui-core:IControlled", - "required": true - }, - { - "uid": "onValueChange", - "name": "onValueChange", + "uid": "fix", + "name": "fix", "comment": { "raw": [ - "Called when value needs to be changed (usually due to user interaction)" + "If specified, will make column fixed - it would not scroll horizontally" ] }, "typeValue": { - "raw": "(newValue: T) => void" + "raw": "'left' | 'right'" }, "editor": { - "type": "func" + "type": "oneOf", + "options": [ + "left", + "right" + ] }, - "from": "@epam/uui-core:IControlled", - "required": true + "from": "@epam/uui-core:ICanBeFixed", + "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:IEditableDebouncerOptions": { + "@epam/uui-core:Icon": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IEditableDebouncerOptions", - "nameFull": "IEditableDebouncerOptions" - }, - "src": "uui-core/src/helpers/IEditableDebouncer.ts", - "comment": { - "raw": [ - "IEditableDebouncer component options." - ] + "name": "Icon", + "nameFull": "Icon" }, + "src": "uui-core/src/types/objects.ts", "exported": true }, "details": { - "kind": 264, + "kind": 265, "typeValue": { - "raw": "IEditableDebouncerOptions", + "raw": "Icon", "print": [ - "/**", - " * IEditableDebouncer component options.", - " */", - "interface IEditableDebouncerOptions {", - " /** Pass true to disable debouncing */", - " disableDebounce?: boolean;", - " /** Debounce delay in ms. Default value is 500ms */", - " debounceDelay?: number;", - "}" + "type Icon = React.FC;" ] - }, - "props": [ - { - "uid": "disableDebounce", - "name": "disableDebounce", - "comment": { - "raw": [ - "Pass true to disable debouncing" - ] - }, - "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" - }, - "required": false - }, - { - "uid": "debounceDelay", - "name": "debounceDelay", - "comment": { - "raw": [ - "Debounce delay in ms. Default value is 500ms" - ] - }, - "typeValue": { - "raw": "number" - }, - "editor": { - "type": "number" - }, - "required": false - } - ], - "propsFromUnion": false + } } }, - "@epam/uui-core:IEditableDebouncerProps": { + "@epam/uui-core:IContextProviderSsrProps": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IEditableDebouncerProps", - "nameFull": "IEditableDebouncerProps" - }, - "src": "uui-core/src/helpers/IEditableDebouncer.ts", - "comment": { - "raw": [ - "IEditableDebouncer component props." - ] + "name": "IContextProviderSsrProps", + "nameFull": "IContextProviderSsrProps" }, + "src": "uui-core/src/ssr/useUuiServicesSsr.tsx", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "IEditableDebouncerProps", + "raw": "IContextProviderSsrProps", "print": [ - "/**", - " * IEditableDebouncer component props.", - " */", - "interface IEditableDebouncerProps extends IEditable, IEditableDebouncerOptions, IAnalyticableOnChange {", - " /**", - " * Render wrapped component.", - " */", - " render: (props: IEditable) => React.ReactNode;", + "interface IContextProviderSsrProps extends UseUuiServicesProps {", + " router: any;", "}" ] }, "props": [ { - "uid": "render", - "name": "render", - "comment": { - "raw": [ - "Render wrapped component." - ] - }, + "uid": "router", + "name": "router", "typeValue": { - "raw": "(props: IEditable) => React.ReactNode" - }, - "editor": { - "type": "component" + "raw": "any" }, "required": true }, { - "uid": "isInvalid", - "name": "isInvalid", - "comment": { - "raw": [ - "True if component contains invalid input" - ] - }, - "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" - }, - "from": "@epam/uui-core:ICanBeInvalid", - "required": false - }, - { - "uid": "isDisabled", - "name": "isDisabled", + "uid": "appContext", + "name": "appContext", "comment": { "raw": [ - "Disable editing, and visually de-emphasize value of the component" + "AppContext value" ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "TAppContext" }, - "from": "@epam/uui-core:IDisableable", + "from": "@epam/uui-core:UseUuiServicesProps", "required": false }, { - "uid": "isReadonly", - "name": "isReadonly", + "uid": "apiDefinition", + "name": "apiDefinition", "comment": { "raw": [ - "Disable editing. Unlike isDisabled, keep component's value readable." + "Function to get the api definitions.", + " Usually, api definitions this is an object which contain object with all api requests of the app.", + " Then you can call this requests via 'uuiContext.api.myApi(myData)'" ] }, "typeValue": { - "raw": "boolean" + "raw": "(processRequest: IProcessRequest) => TApi" }, "editor": { - "type": "bool" + "type": "func" }, - "from": "@epam/uui-core:ICanBeReadonly", + "from": "@epam/uui-core:UuiServicesProps", "required": false }, { - "uid": "isRequired", - "name": "isRequired", + "uid": "apiReloginPath", + "name": "apiReloginPath", "comment": { "raw": [ - "Marks that component's value is required and shouldn't be empty" - ] + "Url to the relogin page. Used to open new browser window by this path, in case of auth lost error.", + " Opened by this path page, should process authentication and then post 'authSuccess' cross-window message to the opener, to recover failed requests.", + " @default '/auth/login'" + ], + "tags": { + "@default": "/auth/login" + } }, "typeValue": { - "raw": "boolean" + "raw": "string" }, "editor": { - "type": "bool" + "type": "string" }, - "from": "@epam/uui-core:ICanBeRequired", + "from": "@epam/uui-core:ApiContextProps", "required": false }, { - "uid": "value", - "name": "value", - "comment": { - "raw": [ - "The current value of component" - ] - }, - "typeValue": { - "raw": "T" - }, - "from": "@epam/uui-core:IControlled", - "required": true - }, - { - "uid": "onValueChange", - "name": "onValueChange", - "comment": { - "raw": [ - "Called when value needs to be changed (usually due to user interaction)" - ] - }, - "typeValue": { - "raw": "(newValue: T) => void" - }, - "editor": { - "type": "func" - }, - "from": "@epam/uui-core:IControlled", - "required": true - }, - { - "uid": "disableDebounce", - "name": "disableDebounce", + "uid": "apiPingPath", + "name": "apiPingPath", "comment": { "raw": [ - "Pass true to disable debouncing" - ] + "Url to the api, which ApiContext will start pinging in case of 'connection lost', until it gets 200 status. Then it will retry failed requests.", + " @default '/auth/ping'" + ], + "tags": { + "@default": "/auth/ping" + } }, "typeValue": { - "raw": "boolean" + "raw": "string" }, "editor": { - "type": "bool" + "type": "string" }, - "from": "@epam/uui-core:IEditableDebouncerOptions", + "from": "@epam/uui-core:ApiContextProps", "required": false }, { - "uid": "debounceDelay", - "name": "debounceDelay", + "uid": "apiServerUrl", + "name": "apiServerUrl", "comment": { "raw": [ - "Debounce delay in ms. Default value is 500ms" - ] + "Url to the server api under which all requests will be processed. Usefully for cases, when all api located by some specific url, which is not much app url.", + " @default ''" + ], + "tags": { + "@default": "" + } }, "typeValue": { - "raw": "number" + "raw": "string" }, "editor": { - "type": "number" + "type": "string" }, - "from": "@epam/uui-core:IEditableDebouncerOptions", + "from": "@epam/uui-core:ApiContextProps", "required": false }, { - "uid": "getValueChangeAnalyticsEvent", - "name": "getValueChangeAnalyticsEvent", + "uid": "fetch", + "name": "fetch", "comment": { "raw": [ - "Given a value, returns an analytics event to send when component is edited.", - " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)." + "Allows to replace fetch implementation, for adding auth headers, mocking for testing, etc.", + " By default, standard fetch will be used." ] }, "typeValue": { - "raw": "(newValue: T | null, oldValue: T | null) => AnalyticsEvent" + "raw": "typeof fetch" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:IAnalyticableOnChange", + "from": "@epam/uui-core:ApiContextProps", "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:IErrorContext": { + "@epam/uui-core:IControlled": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IErrorContext", - "nameFull": "IErrorContext" + "name": "IControlled", + "nameFull": "IControlled" }, - "src": "uui-core/src/types/contexts.ts", + "src": "uui-core/src/types/props.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "IErrorContext", + "raw": "IControlled", "print": [ - "interface IErrorContext extends IBaseContext {", - " /** Current error */", - " currentError?: Error;", - " /** Reports error to context */", - " reportError(error: Error): void;", - " /** Sets an error handler callback */", - " onError(callback: Function): void;", - " /** Discard current error */", - " discardError(): void;", - " /** Discard errors and refresh app */", - " recover(): void;", + "interface IControlled {", + " /** The current value of component */", + " value: T;", + " /** Called when value needs to be changed (usually due to user interaction) */", + " onValueChange(newValue: T): void;", "}" ] }, "props": [ { - "uid": "currentError", - "name": "currentError", + "uid": "value", + "name": "value", "comment": { "raw": [ - "Current error" + "The current value of component" ] }, "typeValue": { - "raw": "Error" + "raw": "T" }, - "required": false + "required": true }, { - "uid": "reportError", - "name": "reportError", + "uid": "onValueChange", + "name": "onValueChange", "comment": { "raw": [ - "Reports error to context" + "Called when value needs to be changed (usually due to user interaction)" ] }, "typeValue": { - "raw": "(error: Error) => void" + "raw": "(newValue: T) => void" }, "editor": { "type": "func" }, "required": true - }, - { - "uid": "onError", - "name": "onError", - "comment": { - "raw": [ - "Sets an error handler callback" - ] - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IDataSource": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IDataSource", + "nameFull": "IDataSource" + }, + "src": "uui-core/src/types/dataSources.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "IDataSource", + "print": [ + "interface IDataSource {", + " getId(item: TItem): TId;", + " getById(id: TId): TItem | void;", + " setItem(item: TItem): void;", + " useView(value: DataSourceState, onValueChange: SetDataSourceState, options?: any, deps?: any[]): IDataSourceView;", + "}" + ] + }, + "props": [ + { + "uid": "getId", + "name": "getId", "typeValue": { - "raw": "(callback: Function) => void" + "raw": "(item: TItem) => TId" }, "editor": { "type": "func" @@ -15659,15 +15062,21 @@ "required": true }, { - "uid": "discardError", - "name": "discardError", - "comment": { - "raw": [ - "Discard current error" - ] + "uid": "getById", + "name": "getById", + "typeValue": { + "raw": "(id: TId) => void | TItem" + }, + "editor": { + "type": "func" }, + "required": true + }, + { + "uid": "setItem", + "name": "setItem", "typeValue": { - "raw": "() => void" + "raw": "(item: TItem) => void" }, "editor": { "type": "func" @@ -15675,15 +15084,54 @@ "required": true }, { - "uid": "recover", - "name": "recover", - "comment": { - "raw": [ - "Discard errors and refresh app" - ] + "uid": "useView", + "name": "useView", + "typeValue": { + "raw": "(value: DataSourceState, onValueChange: SetDataSourceState, options?: any, deps?: any[] | undefined) => IDataSourceView" + }, + "editor": { + "type": "func" }, + "required": true + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IDataSourceView": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IDataSourceView", + "nameFull": "IDataSourceView" + }, + "src": "uui-core/src/types/dataSources.ts", + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "IDataSourceView", + "print": [ + "// eslint-disable-next-line @typescript-eslint/no-unused-vars", + "type IDataSourceView = {", + " getConfig(): IDataSourceViewConfig;", + " getById(id: TId, index: number): DataRowProps;", + " getListProps(): DataSourceListProps;", + " getVisibleRows(): DataRowProps[];", + " getSelectedRowsCount(): number;", + " reload(): void;", + " clearAllChecked(): void;", + " selectAll?: ICheckable;", + "};" + ] + }, + "props": [ + { + "uid": "getConfig", + "name": "getConfig", "typeValue": { - "raw": "() => void" + "raw": "() => IDataSourceViewConfig" }, "editor": { "type": "func" @@ -15691,117 +15139,166 @@ "required": true }, { - "uid": "subscribe", - "name": "subscribe", - "comment": { - "raw": [ - "Add your handler, which will be called on context updates" - ] + "uid": "getById", + "name": "getById", + "typeValue": { + "raw": "(id: TId, index: number) => DataRowProps" + }, + "editor": { + "type": "func" }, + "required": true + }, + { + "uid": "getListProps", + "name": "getListProps", "typeValue": { - "raw": "(handler: (state: {}) => void) => void" + "raw": "() => DataSourceListProps" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:IBaseContext", "required": true }, { - "uid": "unsubscribe", - "name": "unsubscribe", - "comment": { - "raw": [ - "Unsubscribe from context updates" - ] + "uid": "getVisibleRows", + "name": "getVisibleRows", + "typeValue": { + "raw": "() => DataRowProps[]" }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "getSelectedRowsCount", + "name": "getSelectedRowsCount", "typeValue": { - "raw": "(handler: (state: {}) => void) => void" + "raw": "() => number" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:IBaseContext", "required": true }, { - "uid": "destroyContext", - "name": "destroyContext", - "comment": { - "raw": [ - "Manually destroy context and unsubscribe from all listeners" - ] + "uid": "reload", + "name": "reload", + "typeValue": { + "raw": "() => void" + }, + "editor": { + "type": "func" }, + "required": true + }, + { + "uid": "clearAllChecked", + "name": "clearAllChecked", "typeValue": { "raw": "() => void" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:IBaseContext", "required": true + }, + { + "uid": "selectAll", + "name": "selectAll", + "typeValue": { + "raw": "ICheckable" + }, + "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:IFilterConfig": { + "@epam/uui-core:IDataSourceViewConfig": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IFilterConfig", - "nameFull": "IFilterConfig" + "name": "IDataSourceViewConfig", + "nameFull": "IDataSourceViewConfig" }, - "src": "uui-core/src/types/tables.ts", + "src": "uui-core/src/types/dataSources.ts", "exported": true }, "details": { "kind": 265, "typeValue": { - "raw": "IFilterConfig", + "raw": "IDataSourceViewConfig", "print": [ - "type IFilterConfig = {", - " /** If true, the filter will be shown in the FiltersPanel */", - " isVisible: boolean;", - " /**", - " * Determines the order in which this filter should appear in the filters list.", - " * The filters are sorted in ascending alphabetical order.", - " */", - " order?: string;", + "type IDataSourceViewConfig = {", + " complexIds?: boolean;", + " cascadeSelection?: CascadeSelection;", + " selectAll?: true | false;", + " backgroundReload?: boolean;", + " flattenSearchResults?: boolean;", "};" ] }, "props": [ { - "uid": "isVisible", - "name": "isVisible", - "comment": { - "raw": [ - "If true, the filter will be shown in the FiltersPanel" + "uid": "complexIds", + "name": "complexIds", + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "required": false + }, + { + "uid": "cascadeSelection", + "name": "cascadeSelection", + "typeValue": { + "raw": "boolean | 'implicit' | 'explicit'" + }, + "editor": { + "type": "oneOf", + "options": [ + false, + true, + "implicit", + "explicit" ] }, + "required": false + }, + { + "uid": "selectAll", + "name": "selectAll", "typeValue": { "raw": "boolean" }, "editor": { "type": "bool" }, - "required": true + "required": false }, { - "uid": "order", - "name": "order", - "comment": { - "raw": [ - "Determines the order in which this filter should appear in the filters list.", - " The filters are sorted in ascending alphabetical order." - ] + "uid": "backgroundReload", + "name": "backgroundReload", + "typeValue": { + "raw": "boolean" }, + "editor": { + "type": "bool" + }, + "required": false + }, + { + "uid": "flattenSearchResults", + "name": "flattenSearchResults", "typeValue": { - "raw": "string" + "raw": "boolean" }, "editor": { - "type": "string" + "type": "bool" }, "required": false } @@ -15809,236 +15306,344 @@ "propsFromUnion": false } }, - "@epam/uui-core:IFilterItemBodyProps": { + "@epam/uui-core:IDisableable": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IFilterItemBodyProps", - "nameFull": "IFilterItemBodyProps" + "name": "IDisableable", + "nameFull": "IDisableable" + }, + "src": "uui-core/src/types/props.ts", + "comment": { + "raw": [ + "Component can be disabled" + ] }, - "src": "uui-core/src/types/components/filterItemBody.ts", "exported": true }, "details": { - "kind": 265, + "kind": 264, "typeValue": { - "raw": "FilterConfigBase & Pick, 'dataSource' | 'getName' | 'renderRow'> & { type: 'singlePicker' | 'multiPicker'; showSearch?: boolean | undefined; maxBodyHeight?: number | undefined; } & IEditable & IDropdownBodyProps & { selectedPredicate?: string | undefined; } | FilterConfigBase & Pick & { type: 'datePicker'; } & IEditable & IDropdownBodyProps & { selectedPredicate?: string | undefined; } | FilterConfigBase & { type: 'numeric'; } & IEditable & IDropdownBodyProps & { selectedPredicate?: string | undefined; } | FilterConfigBase & Pick & { type: 'rangeDatePicker'; } & IEditable & IDropdownBodyProps & { selectedPredicate?: string | undefined; } | FilterConfigBase & { type: 'custom'; render: (props: IFilterItemBodyProps) => React.ReactElement>; getTogglerValue: (props: IFilterItemBodyProps) => React.ReactNode; } & IEditable & IDropdownBodyProps & { selectedPredicate?: string | undefined; }", + "raw": "IDisableable", "print": [ - "type IFilterItemBodyProps = TableFiltersConfig & IEditable & IDropdownBodyProps & {", - " /** Name of currently selected predicate */", - " selectedPredicate?: string;", - "};" + "/** Component can be disabled */", + "interface IDisableable {", + " /** Disable editing, and visually de-emphasize value of the component */", + " isDisabled?: boolean;", + "}" ] }, "props": [ { - "uid": "title", - "name": "title", + "uid": "isDisabled", + "name": "isDisabled", "comment": { "raw": [ - "Title of the filter, displayed in filter toggler and filter body" + "Disable editing, and visually de-emphasize value of the component" ] }, "typeValue": { - "raw": "string" + "raw": "boolean" }, "editor": { - "type": "string" + "type": "bool" }, - "from": "@epam/uui-core:FilterConfigBase", - "required": true - }, + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IDndActor": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IDndActor", + "nameFull": "IDndActor" + }, + "src": "uui-core/src/types/dnd.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "IDndActor", + "print": [ + "interface IDndActor {", + " /** Data used when this component acts as a drag source.", + " * If provided, it means this component can be dragged. Can be used in combination with dstData.", + " */", + " srcData?: TSrcData;", + " /** Data used when this component acts as a drop destination.", + " * If provided, it means something can be dragged onto this component. Can be used in combination with srcData.", + " */", + " dstData?: TDstData;", + " /** A pure function that gets permitted positions for a drop action */", + " canAcceptDrop?(params: AcceptDropParams): DropPositionOptions | null;", + " /** Called when accepted drop action performed on this actor. Usually used to reorder and update items */", + " onDrop?(data: DropParams): void;", + "}" + ] + }, + "props": [ { - "uid": "field", - "name": "field", + "uid": "srcData", + "name": "srcData", "comment": { "raw": [ - "Field of filters object, where store the filter value" + "Data used when this component acts as a drag source.", + " If provided, it means this component can be dragged. Can be used in combination with dstData." ] }, "typeValue": { - "raw": "keyof TFilter" + "raw": "TSrcData" }, - "from": "@epam/uui-core:FilterConfigBase", - "required": true + "required": false }, { - "uid": "columnKey", - "name": "columnKey", + "uid": "dstData", + "name": "dstData", "comment": { "raw": [ - "Key of the column to which the filter is attached.", - " If omitted, filter won't be attached to the column." + "Data used when this component acts as a drop destination.", + " If provided, it means something can be dragged onto this component. Can be used in combination with srcData." ] }, "typeValue": { - "raw": "string" - }, - "editor": { - "type": "string" + "raw": "TDstData" }, - "from": "@epam/uui-core:FilterConfigBase", "required": false }, { - "uid": "isAlwaysVisible", - "name": "isAlwaysVisible", + "uid": "canAcceptDrop", + "name": "canAcceptDrop", "comment": { "raw": [ - "Pass true to make filter always visible in FilterPanel. User can't hide it via 'Add filter' dropdown" + "A pure function that gets permitted positions for a drop action" ] }, "typeValue": { - "raw": "boolean" + "raw": "(params: AcceptDropParams) => Partial> | null" }, "editor": { - "type": "bool" + "type": "func" }, - "from": "@epam/uui-core:FilterConfigBase", "required": false }, { - "uid": "predicates", - "name": "predicates", + "uid": "onDrop", + "name": "onDrop", "comment": { "raw": [ - "Array of available predicates for the filter. This predicated can be chosen by user and applied to the filter value." + "Called when accepted drop action performed on this actor. Usually used to reorder and update items" ] }, "typeValue": { - "raw": "IFilterPredicate[]" + "raw": "(data: DropParams) => void" + }, + "editor": { + "type": "func" }, - "from": "@epam/uui-core:FilterConfigBase", "required": false - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IDndContext": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IDndContext", + "nameFull": "IDndContext" + }, + "src": "uui-core/src/types/contexts.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "IDndContext", + "print": [ + "interface IDndContext extends IBaseContext {", + " startDrag(node: Node, data: any, renderGhost: () => React.ReactNode): void;", + " endDrag(): void;", + " /** Indicates that drag in progress */", + " isDragging: boolean;", + " dragData?: any;", + " getMouseCoords: () => TMouseCoords;", + "}" + ] + }, + "props": [ { - "uid": "maxCount", - "name": "maxCount", - "comment": { - "raw": [ - "Count of words to show in the Filter toggler. By default, 2 item will be shown." - ] + "uid": "startDrag", + "name": "startDrag", + "typeValue": { + "raw": "(node: Node, data: any, renderGhost: () => React.ReactNode) => void" }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "endDrag", + "name": "endDrag", "typeValue": { - "raw": "number" + "raw": "() => void" }, "editor": { - "type": "number" + "type": "func" }, - "from": "@epam/uui-core:FilterConfigBase", - "required": false + "required": true }, { - "uid": "togglerWidth", - "name": "togglerWidth", + "uid": "isDragging", + "name": "isDragging", "comment": { "raw": [ - "Defines maxWidth of the filter toggler" + "Indicates that drag in progress" ] }, "typeValue": { - "raw": "number" + "raw": "boolean" }, "editor": { - "type": "number" + "type": "bool" }, - "from": "@epam/uui-core:FilterConfigBase", - "required": false + "required": true }, { - "uid": "dataSource", - "name": "dataSource", - "comment": { - "raw": [ - "Datasource to get data for the picker" - ] + "uid": "dragData", + "name": "dragData", + "typeValue": { + "raw": "any" }, + "required": false + }, + { + "uid": "getMouseCoords", + "name": "getMouseCoords", "typeValue": { - "raw": "IDataSource" + "raw": "() => TMouseCoords" + }, + "editor": { + "type": "func" }, - "from": "@epam/uui-core:PickerBaseOptions", "required": true }, { - "uid": "getName", - "name": "getName", + "uid": "subscribe", + "name": "subscribe", "comment": { "raw": [ - "A pure function that gets entity name from entity object.", - " Default: (item) => item.name." + "Add your handler, which will be called on context updates" ] }, "typeValue": { - "raw": "(item: any) => string" + "raw": "(handler: (state: DndContextState) => void) => void" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:PickerBaseOptions", - "required": false + "from": "@epam/uui-core:IBaseContext", + "required": true }, { - "uid": "renderRow", - "name": "renderRow", + "uid": "unsubscribe", + "name": "unsubscribe", "comment": { "raw": [ - "Allow to customize how each selectable row is rendered. Can be used to add subtitles, avatars, etc." + "Unsubscribe from context updates" ] }, "typeValue": { - "raw": "(props: DataRowProps, dataSourceState: DataSourceState, any>) => React.ReactNode" + "raw": "(handler: (state: DndContextState) => void) => void" }, "editor": { - "type": "component" + "type": "func" }, - "from": "@epam/uui-core:PickerBaseOptions", - "required": false + "from": "@epam/uui-core:IBaseContext", + "required": true }, { - "uid": "type", - "name": "type", + "uid": "destroyContext", + "name": "destroyContext", "comment": { "raw": [ - "Type of the filter" + "Manually destroy context and unsubscribe from all listeners" ] }, "typeValue": { - "raw": "'singlePicker' | 'multiPicker'" + "raw": "() => void" }, "editor": { - "type": "oneOf", - "options": [ - "singlePicker", - "multiPicker" - ] + "type": "func" }, - "from": "@epam/uui-core:PickerFilterConfig", + "from": "@epam/uui-core:IBaseContext", "required": true - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IDropdownBodyProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IDropdownBodyProps", + "nameFull": "IDropdownBodyProps" + }, + "src": "uui-core/src/types/props.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "IDropdownBodyProps", + "print": [ + "interface IDropdownBodyProps {", + " /** Call to close the Dropdown body */", + " onClose?: () => void;", + " /** The width of the toggler, which can be used to adjust the body width to it */", + " togglerWidth?: number;", + " /** The height of the toggler */", + " togglerHeight?: number;", + " /** Call to force recompute dropdown position */", + " scheduleUpdate?: () => void;", + " /** Indicates that dropdown is open */", + " isOpen?: boolean;", + " /** Props that should be provided to the arrow component */", + " arrowProps?: PopperArrowProps;", + " /** Dropdown position relative to the input. See [Popper Docs](@link https://popper.js.org/) */", + " placement?: Placement;", + "}" + ] + }, + "props": [ { - "uid": "showSearch", - "name": "showSearch", + "uid": "onClose", + "name": "onClose", "comment": { "raw": [ - "Pass false to hide search in picker body.", - " If omitted, true value will be used." + "Call to close the Dropdown body" ] }, "typeValue": { - "raw": "boolean" + "raw": "() => void" }, "editor": { - "type": "bool" + "type": "func" }, - "from": "@epam/uui-core:PickerFilterConfig", "required": false }, { - "uid": "maxBodyHeight", - "name": "maxBodyHeight", + "uid": "togglerWidth", + "name": "togglerWidth", "comment": { "raw": [ - "Height of picker items list in px. This height doesn't include height of body toolbars(sorting, predicates)" + "The width of the toggler, which can be used to adjust the body width to it" ] }, "typeValue": { @@ -16047,49 +15652,46 @@ "editor": { "type": "number" }, - "from": "@epam/uui-core:PickerFilterConfig", "required": false }, { - "uid": "isInvalid", - "name": "isInvalid", + "uid": "togglerHeight", + "name": "togglerHeight", "comment": { "raw": [ - "True if component contains invalid input" + "The height of the toggler" ] }, "typeValue": { - "raw": "boolean" + "raw": "number" }, "editor": { - "type": "bool" + "type": "number" }, - "from": "@epam/uui-core:ICanBeInvalid", "required": false }, { - "uid": "isDisabled", - "name": "isDisabled", + "uid": "scheduleUpdate", + "name": "scheduleUpdate", "comment": { "raw": [ - "Disable editing, and visually de-emphasize value of the component" + "Call to force recompute dropdown position" ] }, "typeValue": { - "raw": "boolean" + "raw": "() => void" }, "editor": { - "type": "bool" + "type": "func" }, - "from": "@epam/uui-core:IDisableable", "required": false }, { - "uid": "isReadonly", - "name": "isReadonly", + "uid": "isOpen", + "name": "isOpen", "comment": { "raw": [ - "Disable editing. Unlike isDisabled, keep component's value readable." + "Indicates that dropdown is open" ] }, "typeValue": { @@ -16098,439 +15700,440 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:ICanBeReadonly", "required": false }, { - "uid": "isRequired", - "name": "isRequired", + "uid": "arrowProps", + "name": "arrowProps", "comment": { "raw": [ - "Marks that component's value is required and shouldn't be empty" + "Props that should be provided to the arrow component" ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "PopperArrowProps" }, - "from": "@epam/uui-core:ICanBeRequired", "required": false }, { - "uid": "value", - "name": "value", - "comment": { - "raw": [ - "The current value of component" - ] - }, - "typeValue": { - "raw": "any" - }, - "from": "@epam/uui-core:IControlled", - "required": true - }, - { - "uid": "onValueChange", - "name": "onValueChange", + "uid": "placement", + "name": "placement", "comment": { "raw": [ - "Called when value needs to be changed (usually due to user interaction)" + "Dropdown position relative to the input. See [Popper Docs](@link https://popper.js.org/)" ] }, "typeValue": { - "raw": "(newValue: any) => void" + "raw": "'left' | 'right' | 'auto' | 'auto-start' | 'auto-end' | 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end'" }, "editor": { - "type": "func" + "type": "oneOf", + "options": [ + "left", + "right", + "auto", + "auto-start", + "auto-end", + "top", + "bottom", + "top-start", + "top-end", + "bottom-start", + "bottom-end", + "right-start", + "right-end", + "left-start", + "left-end" + ] }, - "from": "@epam/uui-core:IControlled", - "required": true - }, + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IDropdownToggler": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IDropdownToggler", + "nameFull": "IDropdownToggler" + }, + "src": "uui-core/src/types/props.ts", + "comment": { + "raw": [ + "Component can be used as Toggler control for dropdown menus" + ] + }, + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "IDropdownToggler", + "print": [ + "/** Component can be used as Toggler control for dropdown menus */", + "interface IDropdownToggler {", + " /** When isDropdown=true, indicate that dropdown is open with chevron icon */", + " isOpen?: boolean;", + " /** Shows chevron icon, enabling component to act as dropdown toggler */", + " isDropdown?: boolean;", + "}" + ] + }, + "props": [ { - "uid": "onClose", - "name": "onClose", + "uid": "isOpen", + "name": "isOpen", "comment": { "raw": [ - "Call to close the Dropdown body" + "When isDropdown=true, indicate that dropdown is open with chevron icon" ] }, "typeValue": { - "raw": "() => void" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "from": "@epam/uui-core:IDropdownBodyProps", "required": false }, { - "uid": "togglerHeight", - "name": "togglerHeight", + "uid": "isDropdown", + "name": "isDropdown", "comment": { "raw": [ - "The height of the toggler" + "Shows chevron icon, enabling component to act as dropdown toggler" ] }, "typeValue": { - "raw": "number" + "raw": "boolean" }, "editor": { - "type": "number" + "type": "bool" }, - "from": "@epam/uui-core:IDropdownBodyProps", "required": false - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IDropdownTogglerProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IDropdownTogglerProps", + "nameFull": "IDropdownTogglerProps" + }, + "src": "uui-core/src/types/props.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "IDropdownTogglerProps", + "print": [ + "interface IDropdownTogglerProps extends IDropdownToggler, IClickable {", + " /** Called when associated dropdown should open or close */", + " toggleDropdownOpening?: (value: boolean) => void;", + " /** Called when component is interacted outside, to close the dropdown */", + " isInteractedOutside?: (event: Event) => boolean;", + " /** Toggler component ref */", + " ref?: React.Ref;", + "}" + ] + }, + "props": [ { - "uid": "scheduleUpdate", - "name": "scheduleUpdate", + "uid": "toggleDropdownOpening", + "name": "toggleDropdownOpening", "comment": { "raw": [ - "Call to force recompute dropdown position" + "Called when associated dropdown should open or close" ] }, "typeValue": { - "raw": "() => void" + "raw": "(value: boolean) => void" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:IDropdownBodyProps", "required": false }, { - "uid": "isOpen", - "name": "isOpen", + "uid": "isInteractedOutside", + "name": "isInteractedOutside", "comment": { "raw": [ - "Indicates that dropdown is open" + "Called when component is interacted outside, to close the dropdown" ] }, "typeValue": { - "raw": "boolean" + "raw": "(event: Event) => boolean" }, "editor": { - "type": "bool" + "type": "func" }, - "from": "@epam/uui-core:IDropdownBodyProps", "required": false }, { - "uid": "arrowProps", - "name": "arrowProps", + "uid": "ref", + "name": "ref", "comment": { "raw": [ - "Props that should be provided to the arrow component" + "Toggler component ref" ] }, "typeValue": { - "raw": "PopperArrowProps" + "raw": "null | (instance: any) => void | React.RefObject" }, - "from": "@epam/uui-core:IDropdownBodyProps", "required": false }, { - "uid": "placement", - "name": "placement", + "uid": "isOpen", + "name": "isOpen", "comment": { "raw": [ - "Dropdown position relative to the input. See [Popper Docs](@link https://popper.js.org/)" + "When isDropdown=true, indicate that dropdown is open with chevron icon" ] }, "typeValue": { - "raw": "'left' | 'right' | 'auto' | 'auto-start' | 'auto-end' | 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end'" + "raw": "boolean" }, "editor": { - "type": "oneOf", - "options": [ - "left", - "right", - "auto", - "auto-start", - "auto-end", - "top", - "bottom", - "top-start", - "top-end", - "bottom-start", - "bottom-end", - "right-start", - "right-end", - "left-start", - "left-end" - ] + "type": "bool" }, - "from": "@epam/uui-core:IDropdownBodyProps", + "from": "@epam/uui-core:IDropdownToggler", "required": false }, { - "uid": "selectedPredicate", - "name": "selectedPredicate", + "uid": "isDropdown", + "name": "isDropdown", "comment": { "raw": [ - "Name of currently selected predicate" + "Shows chevron icon, enabling component to act as dropdown toggler" ] }, "typeValue": { - "raw": "string" + "raw": "boolean" }, "editor": { - "type": "string" + "type": "bool" }, + "from": "@epam/uui-core:IDropdownToggler", "required": false }, { - "uid": "filter", - "name": "filter", + "uid": "onClick", + "name": "onClick", "comment": { "raw": [ - "Filter selectable days. Days, for which this callback returns false - will be disabled" + "Called when component is clicked" ] }, "typeValue": { - "raw": "(day: Dayjs) => boolean" + "raw": "(e?: any) => void" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseDatePickerProps", + "from": "@epam/uui-core:IClickable", "required": false - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IEditable": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IEditable", + "nameFull": "IEditable" + }, + "src": "uui-core/src/types/props.ts", + "comment": { + "raw": [ + "Component displays an editable value. Text Input is a basic example." + ] + }, + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "IEditable", + "print": [ + "/** Component displays an editable value. Text Input is a basic example. */", + "interface IEditable extends ICanBeInvalid, IDisableable, ICanBeReadonly, ICanBeRequired, IControlled {", + "}" + ] + }, + "props": [ { - "uid": "format", - "name": "format", + "uid": "isInvalid", + "name": "isInvalid", "comment": { "raw": [ - "Date format string, see [dayjs docs](@link https://day.js.org/docs/en/display/format)" + "True if component contains invalid input" ] }, "typeValue": { - "raw": "string" + "raw": "boolean" }, "editor": { - "type": "string" + "type": "bool" }, - "from": "@epam/uui-core:BaseDatePickerProps", + "from": "@epam/uui-core:ICanBeInvalid", "required": false }, { - "uid": "type_2", - "name": "type", - "comment": { - "raw": [ - "Type of the filter" - ] - }, - "typeValue": { - "raw": "'datePicker'" - }, - "editor": { - "type": "oneOf", - "options": [ - "datePicker" - ] - }, - "from": "@epam/uui-core:DatePickerFilterConfig", - "required": true - }, - { - "uid": "type_3", - "name": "type", + "uid": "isDisabled", + "name": "isDisabled", "comment": { "raw": [ - "Type of the filter" + "Disable editing, and visually de-emphasize value of the component" ] }, "typeValue": { - "raw": "'numeric'" + "raw": "boolean" }, "editor": { - "type": "oneOf", - "options": [ - "numeric" - ] + "type": "bool" }, - "from": "@epam/uui-core:NumericFilterConfig", - "required": true + "from": "@epam/uui-core:IDisableable", + "required": false }, { - "uid": "type_4", - "name": "type", + "uid": "isReadonly", + "name": "isReadonly", "comment": { "raw": [ - "Type of the filter" + "Disable editing. Unlike isDisabled, keep component's value readable." ] }, "typeValue": { - "raw": "'rangeDatePicker'" + "raw": "boolean" }, "editor": { - "type": "oneOf", - "options": [ - "rangeDatePicker" - ] + "type": "bool" }, - "from": "@epam/uui-core:RangeDatePickerFilterConfig", - "required": true + "from": "@epam/uui-core:ICanBeReadonly", + "required": false }, { - "uid": "type_5", - "name": "type", + "uid": "isRequired", + "name": "isRequired", "comment": { "raw": [ - "Type of the filter" + "Marks that component's value is required and shouldn't be empty" ] }, "typeValue": { - "raw": "'custom'" + "raw": "boolean" }, "editor": { - "type": "oneOf", - "options": [ - "custom" - ] + "type": "bool" }, - "from": "@epam/uui-core:CustomFilterConfig", - "required": true + "from": "@epam/uui-core:ICanBeRequired", + "required": false }, { - "uid": "render", - "name": "render", + "uid": "value", + "name": "value", "comment": { "raw": [ - "Render callback for filter body" + "The current value of component" ] }, "typeValue": { - "raw": "(props: IFilterItemBodyProps) => React.ReactElement>" - }, - "editor": { - "type": "component" + "raw": "T" }, - "from": "@epam/uui-core:CustomFilterConfig", + "from": "@epam/uui-core:IControlled", "required": true }, { - "uid": "getTogglerValue", - "name": "getTogglerValue", + "uid": "onValueChange", + "name": "onValueChange", "comment": { "raw": [ - "A pure function that gets value to display in filter toggler" + "Called when value needs to be changed (usually due to user interaction)" ] }, "typeValue": { - "raw": "(props: IFilterItemBodyProps) => React.ReactNode" + "raw": "(newValue: T) => void" }, "editor": { - "type": "component" + "type": "func" }, - "from": "@epam/uui-core:CustomFilterConfig", + "from": "@epam/uui-core:IControlled", "required": true } ], - "propsFromUnion": true + "propsFromUnion": false } }, - "@epam/uui-core:IFilterPredicate": { + "@epam/uui-core:IEditableDebouncerOptions": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IFilterPredicate", - "nameFull": "IFilterPredicate" + "name": "IEditableDebouncerOptions", + "nameFull": "IEditableDebouncerOptions" + }, + "src": "uui-core/src/helpers/IEditableDebouncer.ts", + "comment": { + "raw": [ + "IEditableDebouncer component options." + ] }, - "src": "uui-core/src/types/tables.ts", "exported": true }, "details": { - "kind": 265, + "kind": 264, "typeValue": { - "raw": "IFilterPredicate", + "raw": "IEditableDebouncerOptions", "print": [ - "type IFilterPredicate = {", - " /** Name of the predicate, used to display */", - " name: string;", - " /** Predicate key, which wraps filter value.", - " * E.g. your have 'in' predicate for locationIds filter, the resulted filter object will be:", - " * filter: {", - " * locationIds: {", - " * in: [/selected location ids/]", - " * }", - " * }", - " * */", - " predicate: FilterPredicateName;", - " /** Pass true to make this predicate selected by default */", - " isDefault?: boolean;", - "};" + "/**", + " * IEditableDebouncer component options.", + " */", + "interface IEditableDebouncerOptions {", + " /** Pass true to disable debouncing */", + " disableDebounce?: boolean;", + " /** Debounce delay in ms. Default value is 500ms */", + " debounceDelay?: number;", + "}" ] }, "props": [ { - "uid": "name", - "name": "name", + "uid": "disableDebounce", + "name": "disableDebounce", "comment": { "raw": [ - "Name of the predicate, used to display" + "Pass true to disable debouncing" ] }, "typeValue": { - "raw": "string" + "raw": "boolean" }, "editor": { - "type": "string" - }, - "required": true - }, - { - "uid": "predicate", - "name": "predicate", - "comment": { - "raw": [ - "Predicate key, which wraps filter value.", - " E.g. your have 'in' predicate for locationIds filter, the resulted filter object will be:", - " filter: {", - " locationIds: {", - " in: [/selected location ids/]", - " }", - " }" - ] - }, - "typeValue": { - "raw": "'in' | 'nin' | 'isNull' | 'gt' | 'gte' | 'lt' | 'lte' | 'inRange' | 'notInRange' | 'eq' | 'neq' | 'not'" - }, - "editor": { - "type": "oneOf", - "options": [ - "in", - "nin", - "isNull", - "gt", - "gte", - "lt", - "lte", - "inRange", - "notInRange", - "eq", - "neq", - "not" - ] + "type": "bool" }, - "required": true + "required": false }, { - "uid": "isDefault", - "name": "isDefault", + "uid": "debounceDelay", + "name": "debounceDelay", "comment": { "raw": [ - "Pass true to make this predicate selected by default" + "Debounce delay in ms. Default value is 500ms" ] }, "typeValue": { - "raw": "boolean" + "raw": "number" }, "editor": { - "type": "bool" + "type": "number" }, "required": false } @@ -16538,215 +16141,262 @@ "propsFromUnion": false } }, - "@epam/uui-core:IFormApi": { + "@epam/uui-core:IEditableDebouncerProps": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IFormApi", - "nameFull": "IFormApi" + "name": "IEditableDebouncerProps", + "nameFull": "IEditableDebouncerProps" + }, + "src": "uui-core/src/helpers/IEditableDebouncer.ts", + "comment": { + "raw": [ + "IEditableDebouncer component props." + ] }, - "src": "uui-core/src/data/forms/Form.tsx", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "IFormApi", + "raw": "IEditableDebouncerProps", "print": [ - "interface IFormApi extends IEditable, ValidationState {", - " /**", - " * Lens - a helper to split parts of the form state, validation, and setState callbacks, and pass this to components", - " */", - " lens: ILens;", - " /**", - " * Sets form value. The signature is the same for setState in React.useState - either new value, or callback to update the value.", - " * The change is threated as user input - sets isChanged and creates undo endpoint", - " */", - " setValue: (s: React.SetStateAction) => void;", - " /**", - " * Replaces form value. The signature is the same for setState in React.useState - either new value, or callback to update the value.", - " * The change is not threated as user input - it replaces last changed state, and doesn't create undo checkpoint.", - " */", - " replaceValue: (s: React.SetStateAction) => void;", - " /**", - " * Triggers save procedure - validation, calling props.onSave, and processing results", - " */", - " save(): void;", - " /**", - " * Undo to last checkpoint", - " */", - " undo(): void;", - " /**", - " * Redo last action", - " */", - " redo(): void;", - " /**", - " * Reverts all changes up to the initial or last saved state", - " */", - " revert(): void;", - " /**", - " * Try to leave form and ask to save unsaved changes", - " */", - " close(): Promise;", + "/**", + " * IEditableDebouncer component props.", + " */", + "interface IEditableDebouncerProps extends IEditable, IEditableDebouncerOptions, IAnalyticableOnChange {", " /**", - " * Forces form to validate value.", - " * Validation is usually done automatically, according to validationOn prop.", - " * Use this method only in corner cases.", + " * Render wrapped component.", " */", - " validate(): ValidationState;", - " /** True if there are changes to undo */", - " canUndo: boolean;", - " /** True if there are changes to redo */", - " canRedo: boolean;", - " /** True if there are changes to revers */", - " canRevert: boolean;", - " /** True if form is changed since the initial state, or the last save */", - " isChanged: boolean;", - " /** True if save is in progress */", - " isInProgress: boolean;", + " render: (props: IEditable) => React.ReactNode;", "}" ] }, "props": [ { - "uid": "lens", - "name": "lens", + "uid": "render", + "name": "render", "comment": { "raw": [ - "Lens - a helper to split parts of the form state, validation, and setState callbacks, and pass this to components" + "Render wrapped component." ] }, "typeValue": { - "raw": "ILens" + "raw": "(props: IEditable) => React.ReactNode" + }, + "editor": { + "type": "component" }, "required": true }, { - "uid": "setValue", - "name": "setValue", + "uid": "isInvalid", + "name": "isInvalid", "comment": { "raw": [ - "Sets form value. The signature is the same for setState in React.useState - either new value, or callback to update the value.", - " The change is threated as user input - sets isChanged and creates undo endpoint" + "True if component contains invalid input" ] }, "typeValue": { - "raw": "(s: React.SetStateAction) => void" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "required": true + "from": "@epam/uui-core:ICanBeInvalid", + "required": false }, { - "uid": "replaceValue", - "name": "replaceValue", + "uid": "isDisabled", + "name": "isDisabled", "comment": { "raw": [ - "Replaces form value. The signature is the same for setState in React.useState - either new value, or callback to update the value.", - " The change is not threated as user input - it replaces last changed state, and doesn't create undo checkpoint." + "Disable editing, and visually de-emphasize value of the component" ] }, "typeValue": { - "raw": "(s: React.SetStateAction) => void" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "required": true + "from": "@epam/uui-core:IDisableable", + "required": false }, { - "uid": "save", - "name": "save", + "uid": "isReadonly", + "name": "isReadonly", "comment": { "raw": [ - "Triggers save procedure - validation, calling props.onSave, and processing results" + "Disable editing. Unlike isDisabled, keep component's value readable." ] }, "typeValue": { - "raw": "() => void" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "required": true + "from": "@epam/uui-core:ICanBeReadonly", + "required": false }, { - "uid": "undo", - "name": "undo", + "uid": "isRequired", + "name": "isRequired", "comment": { "raw": [ - "Undo to last checkpoint" + "Marks that component's value is required and shouldn't be empty" ] }, "typeValue": { - "raw": "() => void" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" + }, + "from": "@epam/uui-core:ICanBeRequired", + "required": false + }, + { + "uid": "value", + "name": "value", + "comment": { + "raw": [ + "The current value of component" + ] + }, + "typeValue": { + "raw": "T" }, + "from": "@epam/uui-core:IControlled", "required": true }, { - "uid": "redo", - "name": "redo", + "uid": "onValueChange", + "name": "onValueChange", "comment": { "raw": [ - "Redo last action" + "Called when value needs to be changed (usually due to user interaction)" ] }, "typeValue": { - "raw": "() => void" + "raw": "(newValue: T) => void" }, "editor": { "type": "func" }, + "from": "@epam/uui-core:IControlled", "required": true }, { - "uid": "revert", - "name": "revert", + "uid": "disableDebounce", + "name": "disableDebounce", "comment": { "raw": [ - "Reverts all changes up to the initial or last saved state" + "Pass true to disable debouncing" ] }, "typeValue": { - "raw": "() => void" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "required": true + "from": "@epam/uui-core:IEditableDebouncerOptions", + "required": false }, { - "uid": "close", - "name": "close", + "uid": "debounceDelay", + "name": "debounceDelay", "comment": { "raw": [ - "Try to leave form and ask to save unsaved changes" + "Debounce delay in ms. Default value is 500ms" ] }, "typeValue": { - "raw": "() => Promise" + "raw": "number" + }, + "editor": { + "type": "number" + }, + "from": "@epam/uui-core:IEditableDebouncerOptions", + "required": false + }, + { + "uid": "getValueChangeAnalyticsEvent", + "name": "getValueChangeAnalyticsEvent", + "comment": { + "raw": [ + "Given a value, returns an analytics event to send when component is edited.", + " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)." + ] + }, + "typeValue": { + "raw": "(newValue: T | null, oldValue: T | null) => AnalyticsEvent" }, "editor": { "type": "func" }, - "required": true + "from": "@epam/uui-core:IAnalyticableOnChange", + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IErrorContext": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IErrorContext", + "nameFull": "IErrorContext" + }, + "src": "uui-core/src/types/contexts.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "IErrorContext", + "print": [ + "interface IErrorContext extends IBaseContext {", + " /** Current error */", + " currentError?: Error;", + " /** Reports error to context */", + " reportError(error: Error): void;", + " /** Sets an error handler callback */", + " onError(callback: Function): void;", + " /** Discard current error */", + " discardError(): void;", + " /** Discard errors and refresh app */", + " recover(): void;", + "}" + ] + }, + "props": [ + { + "uid": "currentError", + "name": "currentError", + "comment": { + "raw": [ + "Current error" + ] + }, + "typeValue": { + "raw": "Error" + }, + "required": false }, { - "uid": "validate", - "name": "validate", + "uid": "reportError", + "name": "reportError", "comment": { "raw": [ - "Forces form to validate value.", - " Validation is usually done automatically, according to validationOn prop.", - " Use this method only in corner cases." + "Reports error to context" ] }, "typeValue": { - "raw": "() => ValidationState" + "raw": "(error: Error) => void" }, "editor": { "type": "func" @@ -16754,108 +16404,141 @@ "required": true }, { - "uid": "canUndo", - "name": "canUndo", + "uid": "onError", + "name": "onError", "comment": { "raw": [ - "True if there are changes to undo" + "Sets an error handler callback" ] }, "typeValue": { - "raw": "boolean" + "raw": "(callback: Function) => void" }, "editor": { - "type": "bool" + "type": "func" }, "required": true }, { - "uid": "canRedo", - "name": "canRedo", + "uid": "discardError", + "name": "discardError", "comment": { "raw": [ - "True if there are changes to redo" + "Discard current error" ] }, "typeValue": { - "raw": "boolean" + "raw": "() => void" }, "editor": { - "type": "bool" + "type": "func" }, "required": true }, { - "uid": "canRevert", - "name": "canRevert", + "uid": "recover", + "name": "recover", "comment": { "raw": [ - "True if there are changes to revers" + "Discard errors and refresh app" ] }, "typeValue": { - "raw": "boolean" + "raw": "() => void" }, "editor": { - "type": "bool" + "type": "func" }, "required": true }, { - "uid": "isChanged", - "name": "isChanged", + "uid": "subscribe", + "name": "subscribe", "comment": { "raw": [ - "True if form is changed since the initial state, or the last save" + "Add your handler, which will be called on context updates" ] }, "typeValue": { - "raw": "boolean" + "raw": "(handler: (state: {}) => void) => void" }, "editor": { - "type": "bool" + "type": "func" }, + "from": "@epam/uui-core:IBaseContext", "required": true }, { - "uid": "isInProgress", - "name": "isInProgress", + "uid": "unsubscribe", + "name": "unsubscribe", "comment": { "raw": [ - "True if save is in progress" + "Unsubscribe from context updates" ] }, "typeValue": { - "raw": "boolean" + "raw": "(handler: (state: {}) => void) => void" }, "editor": { - "type": "bool" + "type": "func" }, + "from": "@epam/uui-core:IBaseContext", "required": true }, { - "uid": "isInvalid", - "name": "isInvalid", + "uid": "destroyContext", + "name": "destroyContext", "comment": { "raw": [ - "True if component contains invalid input" + "Manually destroy context and unsubscribe from all listeners" ] }, "typeValue": { - "raw": "boolean" + "raw": "() => void" }, "editor": { - "type": "bool" + "type": "func" }, - "from": "@epam/uui-core:ICanBeInvalid", - "required": false - }, + "from": "@epam/uui-core:IBaseContext", + "required": true + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IFilterConfig": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IFilterConfig", + "nameFull": "IFilterConfig" + }, + "src": "uui-core/src/types/tables.ts", + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "IFilterConfig", + "print": [ + "type IFilterConfig = {", + " /** If true, the filter will be shown in the FiltersPanel */", + " isVisible: boolean;", + " /**", + " * Determines the order in which this filter should appear in the filters list.", + " * The filters are sorted in ascending alphabetical order.", + " */", + " order?: string;", + "};" + ] + }, + "props": [ { - "uid": "isDisabled", - "name": "isDisabled", + "uid": "isVisible", + "name": "isVisible", "comment": { "raw": [ - "Disable editing, and visually de-emphasize value of the component" + "If true, the filter will be shown in the FiltersPanel" ] }, "typeValue": { @@ -16864,118 +16547,3170 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:IDisableable", - "required": false + "required": true }, { - "uid": "isReadonly", - "name": "isReadonly", + "uid": "order", + "name": "order", "comment": { "raw": [ - "Disable editing. Unlike isDisabled, keep component's value readable." + "Determines the order in which this filter should appear in the filters list.", + " The filters are sorted in ascending alphabetical order." ] }, "typeValue": { - "raw": "boolean" + "raw": "string" }, "editor": { - "type": "bool" + "type": "string" }, - "from": "@epam/uui-core:ICanBeReadonly", "required": false - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IFilterItemBodyProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IFilterItemBodyProps", + "nameFull": "IFilterItemBodyProps" + }, + "src": "uui-core/src/types/components/filterItemBody.ts", + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "FilterConfigBase & Pick, 'dataSource' | 'getName' | 'renderRow'> & { type: 'singlePicker' | 'multiPicker'; showSearch?: boolean | undefined; maxBodyHeight?: number | undefined; } & IEditable & IDropdownBodyProps & { selectedPredicate?: string | undefined; } | FilterConfigBase & Pick & { type: 'datePicker'; } & IEditable & IDropdownBodyProps & { selectedPredicate?: string | undefined; } | FilterConfigBase & { type: 'numeric'; } & IEditable & IDropdownBodyProps & { selectedPredicate?: string | undefined; } | FilterConfigBase & Pick & { type: 'rangeDatePicker'; } & IEditable & IDropdownBodyProps & { selectedPredicate?: string | undefined; } | FilterConfigBase & { type: 'custom'; render: (props: IFilterItemBodyProps) => React.ReactElement>; getTogglerValue: (props: IFilterItemBodyProps) => React.ReactNode; } & IEditable & IDropdownBodyProps & { selectedPredicate?: string | undefined; }", + "print": [ + "type IFilterItemBodyProps = TableFiltersConfig & IEditable & IDropdownBodyProps & {", + " /** Name of currently selected predicate */", + " selectedPredicate?: string;", + "};" + ] + }, + "props": [ { - "uid": "isRequired", - "name": "isRequired", + "uid": "title", + "name": "title", "comment": { "raw": [ - "Marks that component's value is required and shouldn't be empty" + "Title of the filter, displayed in filter toggler and filter body" ] }, "typeValue": { - "raw": "boolean" + "raw": "string" }, "editor": { - "type": "bool" + "type": "string" }, - "from": "@epam/uui-core:ICanBeRequired", - "required": false + "from": "@epam/uui-core:FilterConfigBase", + "required": true }, { - "uid": "value", - "name": "value", + "uid": "field", + "name": "field", "comment": { "raw": [ - "The current value of component" + "Field of filters object, where store the filter value" ] }, "typeValue": { - "raw": "T" + "raw": "keyof TFilter" }, - "from": "@epam/uui-core:IControlled", + "from": "@epam/uui-core:FilterConfigBase", "required": true }, { - "uid": "onValueChange", - "name": "onValueChange", + "uid": "columnKey", + "name": "columnKey", "comment": { "raw": [ - "Called when value needs to be changed (usually due to user interaction)" + "Key of the column to which the filter is attached.", + " If omitted, filter won't be attached to the column." ] }, "typeValue": { - "raw": "(newValue: T) => void" + "raw": "string" }, "editor": { - "type": "func" + "type": "string" }, - "from": "@epam/uui-core:IControlled", - "required": true + "from": "@epam/uui-core:FilterConfigBase", + "required": false }, { - "uid": "validationProps", - "name": "validationProps", + "uid": "isAlwaysVisible", + "name": "isAlwaysVisible", "comment": { "raw": [ - "If T is a complex value (object or array), this property contains validation states of inner items" + "Pass true to make filter always visible in FilterPanel. User can't hide it via 'Add filter' dropdown" ] }, "typeValue": { - "raw": "{ [key: string]: ValidationState; }" + "raw": "boolean" }, - "from": "@epam/uui-core:ValidationState", + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:FilterConfigBase", "required": false }, { - "uid": "validationMessage", - "name": "validationMessage", + "uid": "predicates", + "name": "predicates", "comment": { "raw": [ - "Message describing why the value is invalid" + "Array of available predicates for the filter. This predicated can be chosen by user and applied to the filter value." ] }, "typeValue": { - "raw": "React.ReactNode" + "raw": "IFilterPredicate[]" + }, + "from": "@epam/uui-core:FilterConfigBase", + "required": false + }, + { + "uid": "maxCount", + "name": "maxCount", + "comment": { + "raw": [ + "Count of words to show in the Filter toggler. By default, 2 item will be shown." + ] + }, + "typeValue": { + "raw": "number" + }, + "editor": { + "type": "number" + }, + "from": "@epam/uui-core:FilterConfigBase", + "required": false + }, + { + "uid": "togglerWidth", + "name": "togglerWidth", + "comment": { + "raw": [ + "Defines maxWidth of the filter toggler" + ] + }, + "typeValue": { + "raw": "number" + }, + "editor": { + "type": "number" + }, + "from": "@epam/uui-core:FilterConfigBase", + "required": false + }, + { + "uid": "dataSource", + "name": "dataSource", + "comment": { + "raw": [ + "Datasource to get data for the picker" + ] + }, + "typeValue": { + "raw": "IDataSource" + }, + "from": "@epam/uui-core:PickerBaseOptions", + "required": true + }, + { + "uid": "getName", + "name": "getName", + "comment": { + "raw": [ + "A pure function that gets entity name from entity object.", + " Default: (item) => item.name." + ] + }, + "typeValue": { + "raw": "(item: any) => string" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:PickerBaseOptions", + "required": false + }, + { + "uid": "renderRow", + "name": "renderRow", + "comment": { + "raw": [ + "Allow to customize how each selectable row is rendered. Can be used to add subtitles, avatars, etc." + ] + }, + "typeValue": { + "raw": "(props: DataRowProps, dataSourceState: DataSourceState, any>) => React.ReactNode" + }, + "editor": { + "type": "component" + }, + "from": "@epam/uui-core:PickerBaseOptions", + "required": false + }, + { + "uid": "type", + "name": "type", + "comment": { + "raw": [ + "Type of the filter" + ] + }, + "typeValue": { + "raw": "'singlePicker' | 'multiPicker'" + }, + "editor": { + "type": "oneOf", + "options": [ + "singlePicker", + "multiPicker" + ] + }, + "from": "@epam/uui-core:PickerFilterConfig", + "required": true + }, + { + "uid": "showSearch", + "name": "showSearch", + "comment": { + "raw": [ + "Pass false to hide search in picker body.", + " If omitted, true value will be used." + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:PickerFilterConfig", + "required": false + }, + { + "uid": "maxBodyHeight", + "name": "maxBodyHeight", + "comment": { + "raw": [ + "Height of picker items list in px. This height doesn't include height of body toolbars(sorting, predicates)" + ] + }, + "typeValue": { + "raw": "number" + }, + "editor": { + "type": "number" + }, + "from": "@epam/uui-core:PickerFilterConfig", + "required": false + }, + { + "uid": "isInvalid", + "name": "isInvalid", + "comment": { + "raw": [ + "True if component contains invalid input" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:ICanBeInvalid", + "required": false + }, + { + "uid": "isDisabled", + "name": "isDisabled", + "comment": { + "raw": [ + "Disable editing, and visually de-emphasize value of the component" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:IDisableable", + "required": false + }, + { + "uid": "isReadonly", + "name": "isReadonly", + "comment": { + "raw": [ + "Disable editing. Unlike isDisabled, keep component's value readable." + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:ICanBeReadonly", + "required": false + }, + { + "uid": "isRequired", + "name": "isRequired", + "comment": { + "raw": [ + "Marks that component's value is required and shouldn't be empty" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:ICanBeRequired", + "required": false + }, + { + "uid": "value", + "name": "value", + "comment": { + "raw": [ + "The current value of component" + ] + }, + "typeValue": { + "raw": "any" + }, + "from": "@epam/uui-core:IControlled", + "required": true + }, + { + "uid": "onValueChange", + "name": "onValueChange", + "comment": { + "raw": [ + "Called when value needs to be changed (usually due to user interaction)" + ] + }, + "typeValue": { + "raw": "(newValue: any) => void" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IControlled", + "required": true + }, + { + "uid": "onClose", + "name": "onClose", + "comment": { + "raw": [ + "Call to close the Dropdown body" + ] + }, + "typeValue": { + "raw": "() => void" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IDropdownBodyProps", + "required": false + }, + { + "uid": "togglerHeight", + "name": "togglerHeight", + "comment": { + "raw": [ + "The height of the toggler" + ] + }, + "typeValue": { + "raw": "number" + }, + "editor": { + "type": "number" + }, + "from": "@epam/uui-core:IDropdownBodyProps", + "required": false + }, + { + "uid": "scheduleUpdate", + "name": "scheduleUpdate", + "comment": { + "raw": [ + "Call to force recompute dropdown position" + ] + }, + "typeValue": { + "raw": "() => void" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IDropdownBodyProps", + "required": false + }, + { + "uid": "isOpen", + "name": "isOpen", + "comment": { + "raw": [ + "Indicates that dropdown is open" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:IDropdownBodyProps", + "required": false + }, + { + "uid": "arrowProps", + "name": "arrowProps", + "comment": { + "raw": [ + "Props that should be provided to the arrow component" + ] + }, + "typeValue": { + "raw": "PopperArrowProps" + }, + "from": "@epam/uui-core:IDropdownBodyProps", + "required": false + }, + { + "uid": "placement", + "name": "placement", + "comment": { + "raw": [ + "Dropdown position relative to the input. See [Popper Docs](@link https://popper.js.org/)" + ] + }, + "typeValue": { + "raw": "'left' | 'right' | 'auto' | 'auto-start' | 'auto-end' | 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end'" + }, + "editor": { + "type": "oneOf", + "options": [ + "left", + "right", + "auto", + "auto-start", + "auto-end", + "top", + "bottom", + "top-start", + "top-end", + "bottom-start", + "bottom-end", + "right-start", + "right-end", + "left-start", + "left-end" + ] + }, + "from": "@epam/uui-core:IDropdownBodyProps", + "required": false + }, + { + "uid": "selectedPredicate", + "name": "selectedPredicate", + "comment": { + "raw": [ + "Name of currently selected predicate" + ] + }, + "typeValue": { + "raw": "string" + }, + "editor": { + "type": "string" + }, + "required": false + }, + { + "uid": "filter", + "name": "filter", + "comment": { + "raw": [ + "Filter selectable days. Days, for which this callback returns false - will be disabled" + ] + }, + "typeValue": { + "raw": "(day: Dayjs) => boolean" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:BaseDatePickerProps", + "required": false + }, + { + "uid": "format", + "name": "format", + "comment": { + "raw": [ + "Date format string, see [dayjs docs](@link https://day.js.org/docs/en/display/format)" + ] + }, + "typeValue": { + "raw": "string" + }, + "editor": { + "type": "string" + }, + "from": "@epam/uui-core:BaseDatePickerProps", + "required": false + }, + { + "uid": "type_2", + "name": "type", + "comment": { + "raw": [ + "Type of the filter" + ] + }, + "typeValue": { + "raw": "'datePicker'" + }, + "editor": { + "type": "oneOf", + "options": [ + "datePicker" + ] + }, + "from": "@epam/uui-core:DatePickerFilterConfig", + "required": true + }, + { + "uid": "type_3", + "name": "type", + "comment": { + "raw": [ + "Type of the filter" + ] + }, + "typeValue": { + "raw": "'numeric'" + }, + "editor": { + "type": "oneOf", + "options": [ + "numeric" + ] + }, + "from": "@epam/uui-core:NumericFilterConfig", + "required": true + }, + { + "uid": "type_4", + "name": "type", + "comment": { + "raw": [ + "Type of the filter" + ] + }, + "typeValue": { + "raw": "'rangeDatePicker'" + }, + "editor": { + "type": "oneOf", + "options": [ + "rangeDatePicker" + ] + }, + "from": "@epam/uui-core:RangeDatePickerFilterConfig", + "required": true + }, + { + "uid": "type_5", + "name": "type", + "comment": { + "raw": [ + "Type of the filter" + ] + }, + "typeValue": { + "raw": "'custom'" + }, + "editor": { + "type": "oneOf", + "options": [ + "custom" + ] + }, + "from": "@epam/uui-core:CustomFilterConfig", + "required": true + }, + { + "uid": "render", + "name": "render", + "comment": { + "raw": [ + "Render callback for filter body" + ] + }, + "typeValue": { + "raw": "(props: IFilterItemBodyProps) => React.ReactElement>" + }, + "editor": { + "type": "component" + }, + "from": "@epam/uui-core:CustomFilterConfig", + "required": true + }, + { + "uid": "getTogglerValue", + "name": "getTogglerValue", + "comment": { + "raw": [ + "A pure function that gets value to display in filter toggler" + ] + }, + "typeValue": { + "raw": "(props: IFilterItemBodyProps) => React.ReactNode" + }, + "editor": { + "type": "component" + }, + "from": "@epam/uui-core:CustomFilterConfig", + "required": true + } + ], + "propsFromUnion": true + } + }, + "@epam/uui-core:IFilterPredicate": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IFilterPredicate", + "nameFull": "IFilterPredicate" + }, + "src": "uui-core/src/types/tables.ts", + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "IFilterPredicate", + "print": [ + "type IFilterPredicate = {", + " /** Name of the predicate, used to display */", + " name: string;", + " /** Predicate key, which wraps filter value.", + " * E.g. your have 'in' predicate for locationIds filter, the resulted filter object will be:", + " * filter: {", + " * locationIds: {", + " * in: [/selected location ids/]", + " * }", + " * }", + " * */", + " predicate: FilterPredicateName;", + " /** Pass true to make this predicate selected by default */", + " isDefault?: boolean;", + "};" + ] + }, + "props": [ + { + "uid": "name", + "name": "name", + "comment": { + "raw": [ + "Name of the predicate, used to display" + ] + }, + "typeValue": { + "raw": "string" + }, + "editor": { + "type": "string" + }, + "required": true + }, + { + "uid": "predicate", + "name": "predicate", + "comment": { + "raw": [ + "Predicate key, which wraps filter value.", + " E.g. your have 'in' predicate for locationIds filter, the resulted filter object will be:", + " filter: {", + " locationIds: {", + " in: [/selected location ids/]", + " }", + " }" + ] + }, + "typeValue": { + "raw": "'in' | 'nin' | 'isNull' | 'gt' | 'gte' | 'lt' | 'lte' | 'inRange' | 'notInRange' | 'eq' | 'neq' | 'not'" + }, + "editor": { + "type": "oneOf", + "options": [ + "in", + "nin", + "isNull", + "gt", + "gte", + "lt", + "lte", + "inRange", + "notInRange", + "eq", + "neq", + "not" + ] + }, + "required": true + }, + { + "uid": "isDefault", + "name": "isDefault", + "comment": { + "raw": [ + "Pass true to make this predicate selected by default" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IFormApi": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IFormApi", + "nameFull": "IFormApi" + }, + "src": "uui-core/src/data/forms/Form.tsx", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "IFormApi", + "print": [ + "interface IFormApi extends IEditable, ValidationState {", + " /**", + " * Lens - a helper to split parts of the form state, validation, and setState callbacks, and pass this to components", + " */", + " lens: ILens;", + " /**", + " * Sets form value. The signature is the same for setState in React.useState - either new value, or callback to update the value.", + " * The change is threated as user input - sets isChanged and creates undo endpoint", + " */", + " setValue: (s: React.SetStateAction) => void;", + " /**", + " * Replaces form value. The signature is the same for setState in React.useState - either new value, or callback to update the value.", + " * The change is not threated as user input - it replaces last changed state, and doesn't create undo checkpoint.", + " */", + " replaceValue: (s: React.SetStateAction) => void;", + " /**", + " * Triggers save procedure - validation, calling props.onSave, and processing results", + " */", + " save(): void;", + " /**", + " * Undo to last checkpoint", + " */", + " undo(): void;", + " /**", + " * Redo last action", + " */", + " redo(): void;", + " /**", + " * Reverts all changes up to the initial or last saved state", + " */", + " revert(): void;", + " /**", + " * Try to leave form and ask to save unsaved changes", + " */", + " close(): Promise;", + " /**", + " * Forces form to validate value.", + " * Validation is usually done automatically, according to validationOn prop.", + " * Use this method only in corner cases.", + " */", + " validate(): ValidationState;", + " /** True if there are changes to undo */", + " canUndo: boolean;", + " /** True if there are changes to redo */", + " canRedo: boolean;", + " /** True if there are changes to revers */", + " canRevert: boolean;", + " /** True if form is changed since the initial state, or the last save */", + " isChanged: boolean;", + " /** True if save is in progress */", + " isInProgress: boolean;", + "}" + ] + }, + "props": [ + { + "uid": "lens", + "name": "lens", + "comment": { + "raw": [ + "Lens - a helper to split parts of the form state, validation, and setState callbacks, and pass this to components" + ] + }, + "typeValue": { + "raw": "ILens" + }, + "required": true + }, + { + "uid": "setValue", + "name": "setValue", + "comment": { + "raw": [ + "Sets form value. The signature is the same for setState in React.useState - either new value, or callback to update the value.", + " The change is threated as user input - sets isChanged and creates undo endpoint" + ] + }, + "typeValue": { + "raw": "(s: React.SetStateAction) => void" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "replaceValue", + "name": "replaceValue", + "comment": { + "raw": [ + "Replaces form value. The signature is the same for setState in React.useState - either new value, or callback to update the value.", + " The change is not threated as user input - it replaces last changed state, and doesn't create undo checkpoint." + ] + }, + "typeValue": { + "raw": "(s: React.SetStateAction) => void" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "save", + "name": "save", + "comment": { + "raw": [ + "Triggers save procedure - validation, calling props.onSave, and processing results" + ] + }, + "typeValue": { + "raw": "() => void" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "undo", + "name": "undo", + "comment": { + "raw": [ + "Undo to last checkpoint" + ] + }, + "typeValue": { + "raw": "() => void" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "redo", + "name": "redo", + "comment": { + "raw": [ + "Redo last action" + ] + }, + "typeValue": { + "raw": "() => void" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "revert", + "name": "revert", + "comment": { + "raw": [ + "Reverts all changes up to the initial or last saved state" + ] + }, + "typeValue": { + "raw": "() => void" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "close", + "name": "close", + "comment": { + "raw": [ + "Try to leave form and ask to save unsaved changes" + ] + }, + "typeValue": { + "raw": "() => Promise" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "validate", + "name": "validate", + "comment": { + "raw": [ + "Forces form to validate value.", + " Validation is usually done automatically, according to validationOn prop.", + " Use this method only in corner cases." + ] + }, + "typeValue": { + "raw": "() => ValidationState" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "canUndo", + "name": "canUndo", + "comment": { + "raw": [ + "True if there are changes to undo" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "required": true + }, + { + "uid": "canRedo", + "name": "canRedo", + "comment": { + "raw": [ + "True if there are changes to redo" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "required": true + }, + { + "uid": "canRevert", + "name": "canRevert", + "comment": { + "raw": [ + "True if there are changes to revers" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "required": true + }, + { + "uid": "isChanged", + "name": "isChanged", + "comment": { + "raw": [ + "True if form is changed since the initial state, or the last save" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "required": true + }, + { + "uid": "isInProgress", + "name": "isInProgress", + "comment": { + "raw": [ + "True if save is in progress" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "required": true + }, + { + "uid": "isInvalid", + "name": "isInvalid", + "comment": { + "raw": [ + "True if component contains invalid input" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:ICanBeInvalid", + "required": false + }, + { + "uid": "isDisabled", + "name": "isDisabled", + "comment": { + "raw": [ + "Disable editing, and visually de-emphasize value of the component" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:IDisableable", + "required": false + }, + { + "uid": "isReadonly", + "name": "isReadonly", + "comment": { + "raw": [ + "Disable editing. Unlike isDisabled, keep component's value readable." + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:ICanBeReadonly", + "required": false + }, + { + "uid": "isRequired", + "name": "isRequired", + "comment": { + "raw": [ + "Marks that component's value is required and shouldn't be empty" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:ICanBeRequired", + "required": false + }, + { + "uid": "value", + "name": "value", + "comment": { + "raw": [ + "The current value of component" + ] + }, + "typeValue": { + "raw": "T" + }, + "from": "@epam/uui-core:IControlled", + "required": true + }, + { + "uid": "onValueChange", + "name": "onValueChange", + "comment": { + "raw": [ + "Called when value needs to be changed (usually due to user interaction)" + ] + }, + "typeValue": { + "raw": "(newValue: T) => void" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IControlled", + "required": true + }, + { + "uid": "validationProps", + "name": "validationProps", + "comment": { + "raw": [ + "If T is a complex value (object or array), this property contains validation states of inner items" + ] + }, + "typeValue": { + "raw": "{ [key: string]: ValidationState; }" + }, + "from": "@epam/uui-core:ValidationState", + "required": false + }, + { + "uid": "validationMessage", + "name": "validationMessage", + "comment": { + "raw": [ + "Message describing why the value is invalid" + ] + }, + "typeValue": { + "raw": "React.ReactNode" + }, + "typeValueRef": "@types/react:ReactNode", + "from": "@epam/uui-core:IHasValidationMessage", + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IHasCaption": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IHasCaption", + "nameFull": "IHasCaption" + }, + "src": "uui-core/src/types/props.ts", + "comment": { + "raw": [ + "Component has a caption. E.g. Button" + ] + }, + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "IHasCaption", + "print": [ + "/** Component has a caption. E.g. Button */", + "interface IHasCaption {", + " /** Caption. Can be a string, or React.Element. Certain components supports minimal markup (,,) in captions. */", + " caption?: ReactNode;", + "}" + ] + }, + "props": [ + { + "uid": "caption", + "name": "caption", + "comment": { + "raw": [ + "Caption. Can be a string, or React.Element. Certain components supports minimal markup (,,) in captions." + ] + }, + "typeValue": { + "raw": "React.ReactNode" + }, + "typeValueRef": "@types/react:ReactNode", + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IHasChildren": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IHasChildren", + "nameFull": "IHasChildren" + }, + "src": "uui-core/src/types/props.ts", + "comment": { + "raw": [ + "Component can have child components" + ] + }, + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "IHasChildren", + "print": [ + "/** Component can have child components */", + "interface IHasChildren {", + " /** Component children */", + " children?: ReactNode;", + "}" + ] + }, + "props": [ + { + "uid": "children", + "name": "children", + "comment": { + "raw": [ + "Component children" + ] + }, + "typeValue": { + "raw": "React.ReactNode" + }, + "typeValueRef": "@types/react:ReactNode", + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IHasCX": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IHasCX", + "nameFull": "IHasCX" + }, + "src": "uui-core/src/types/props.ts", + "comment": { + "raw": [ + "Component can accept cx property, allowing to pass classes to put on component.", + " CX is a shortcut for 'classnames'.", + " The props accept string, arrays, object, recursively. All falsy values are thrown away. Examples:", + " - 'red' => 'red'", + " - ['red', 0, false, 'blue' ] => 'red blue'", + " - { 'red': true, 'blue': false, ['green', 'white']} => 'red green white'" + ] + }, + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "IHasCX", + "print": [ + "/**", + " * Component can accept cx property, allowing to pass classes to put on component.", + " * CX is a shortcut for 'classnames'.", + " * The props accept string, arrays, object, recursively. All falsy values are thrown away. Examples:", + " * - 'red' => 'red'", + " * - ['red', 0, false, 'blue' ] => 'red blue'", + " * - { 'red': true, 'blue': false, ['green', 'white']} => 'red green white'", + " */", + "interface IHasCX {", + " /** CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details */", + " cx?: CX;", + "}" + ] + }, + "props": [ + { + "uid": "cx", + "name": "cx", + "comment": { + "raw": [ + "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" + ] + }, + "typeValue": { + "raw": "null | string | number | boolean | ClassDictionary | ClassArray" + }, + "typeValueRef": "@epam/uui-core:ClassValue", + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IHasDirection": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IHasDirection", + "nameFull": "IHasDirection" + }, + "src": "uui-core/src/types/props.ts", + "comment": { + "raw": [ + "Component has direction of child components." + ] + }, + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "IHasDirection", + "print": [ + "/** Component has direction of child components. */", + "interface IHasDirection {", + " /** Direction of child components. */", + " direction?: 'vertical' | 'horizontal';", + "}" + ] + }, + "props": [ + { + "uid": "direction", + "name": "direction", + "comment": { + "raw": [ + "Direction of child components." + ] + }, + "typeValue": { + "raw": "'vertical' | 'horizontal'" + }, + "editor": { + "type": "oneOf", + "options": [ + "vertical", + "horizontal" + ] + }, + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IHasForwardedRef": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IHasForwardedRef", + "nameFull": "IHasForwardedRef" + }, + "src": "uui-core/src/types/props.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "IHasForwardedRef", + "print": [ + "interface IHasForwardedRef {", + " /** this ref is passed to the underlying component */", + " forwardedRef?: ForwardedRef;", + "}" + ] + }, + "props": [ + { + "uid": "forwardedRef", + "name": "forwardedRef", + "comment": { + "raw": [ + "this ref is passed to the underlying component" + ] + }, + "typeValue": { + "raw": "null | (instance: T | null) => void | React.MutableRefObject" + }, + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IHasIcon": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IHasIcon", + "nameFull": "IHasIcon" + }, + "src": "uui-core/src/types/props.ts", + "comment": { + "raw": [ + "An icon can be added to component" + ] + }, + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "IHasIcon", + "print": [ + "/** An icon can be added to component */", + "interface IHasIcon {", + " /** Icon can be a React element (usually an SVG element) */", + " icon?: Icon;", + " /** Position of the icon (left of right) */", + " iconPosition?: 'left' | 'right';", + " /** Click handler for the icon */", + " onIconClick?(): void;", + "}" + ] + }, + "props": [ + { + "uid": "icon", + "name": "icon", + "comment": { + "raw": [ + "Icon can be a React element (usually an SVG element)" + ] + }, + "typeValue": { + "raw": "Icon" + }, + "editor": { + "type": "component" + }, + "required": false + }, + { + "uid": "iconPosition", + "name": "iconPosition", + "comment": { + "raw": [ + "Position of the icon (left of right)" + ] + }, + "typeValue": { + "raw": "'left' | 'right'" + }, + "editor": { + "type": "oneOf", + "options": [ + "left", + "right" + ] + }, + "required": false + }, + { + "uid": "onIconClick", + "name": "onIconClick", + "comment": { + "raw": [ + "Click handler for the icon" + ] + }, + "typeValue": { + "raw": "() => void" + }, + "editor": { + "type": "func" + }, + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IHasLabel": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IHasLabel", + "nameFull": "IHasLabel" + }, + "src": "uui-core/src/types/props.ts", + "comment": { + "raw": [ + "Component has label. E.g. User Name" + ] + }, + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "IHasLabel", + "print": [ + "/** Component has label. E.g. User Name */", + "interface IHasLabel {", + " /** Component label. Can be a string, or React.Element. Certain components supports minimal markup (,,) in labels. */", + " label?: ReactNode;", + "}" + ] + }, + "props": [ + { + "uid": "label", + "name": "label", + "comment": { + "raw": [ + "Component label. Can be a string, or React.Element. Certain components supports minimal markup (,,) in labels." + ] + }, + "typeValue": { + "raw": "React.ReactNode" + }, + "typeValueRef": "@types/react:ReactNode", + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IHasPlaceholder": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IHasPlaceholder", + "nameFull": "IHasPlaceholder" + }, + "src": "uui-core/src/types/props.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "IHasPlaceholder", + "print": [ + "interface IHasPlaceholder {", + " /** Placeholder to display when empty */", + " placeholder?: any;", + "}" + ] + }, + "props": [ + { + "uid": "placeholder", + "name": "placeholder", + "comment": { + "raw": [ + "Placeholder to display when empty" + ] + }, + "typeValue": { + "raw": "any" + }, + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IHasRawProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IHasRawProps", + "nameFull": "IHasRawProps" + }, + "src": "uui-core/src/types/props.ts", + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "IHasRawProps", + "print": [ + "// Component allows to pass raw HTML props to put on the DOM element", + "type IHasRawProps = {", + " /** Any HTML attributes (native or 'data-') to put on the underlying component */", + " rawProps?: T & Record<`data-${string}`, string>;", + "};" + ] + }, + "props": [ + { + "uid": "rawProps", + "name": "rawProps", + "comment": { + "raw": [ + "Any HTML attributes (native or 'data-') to put on the underlying component" + ] + }, + "typeValue": { + "raw": "T & Record<`data-${string}`, string>" + }, + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IHasStyleAttrs": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IHasStyleAttrs", + "nameFull": "IHasStyleAttrs" + }, + "src": "uui-core/src/types/props.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "IHasStyleAttrs", + "print": [ + "interface IHasStyleAttrs {", + " /** CSS style prop to put on the component */", + " style?: React.CSSProperties;", + "}" + ] + }, + "props": [ + { + "uid": "style", + "name": "style", + "comment": { + "raw": [ + "CSS style prop to put on the component" + ] + }, + "typeValue": { + "raw": "React.CSSProperties" + }, + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IHasTabIndex": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IHasTabIndex", + "nameFull": "IHasTabIndex" + }, + "src": "uui-core/src/types/props.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "IHasTabIndex", + "print": [ + "// TBD: merge with ICanFocus?", + "interface IHasTabIndex {", + " /** Controls the order of keyboard navigation between components */", + " tabIndex?: React.HTMLAttributes['tabIndex'];", + "}" + ] + }, + "props": [ + { + "uid": "tabIndex", + "name": "tabIndex", + "comment": { + "raw": [ + "Controls the order of keyboard navigation between components" + ] + }, + "typeValue": { + "raw": "number" + }, + "editor": { + "type": "number" + }, + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IHasValidationMessage": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IHasValidationMessage", + "nameFull": "IHasValidationMessage" + }, + "src": "uui-core/src/types/props.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "IHasValidationMessage", + "print": [ + "interface IHasValidationMessage {", + " /** Message describing why the value is invalid */", + " validationMessage?: ReactNode;", + "}" + ] + }, + "props": [ + { + "uid": "validationMessage", + "name": "validationMessage", + "comment": { + "raw": [ + "Message describing why the value is invalid" + ] + }, + "typeValue": { + "raw": "React.ReactNode" + }, + "typeValueRef": "@types/react:ReactNode", + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IHistory4": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IHistory4", + "nameFull": "IHistory4" + }, + "src": "uui-core/src/services/routing/HistoryAdaptedRouter.tsx", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "IHistory4", + "print": [ + "interface IHistory4 {", + " location: Link;", + " push(link: Link): void;", + " replace(link: Link): void;", + " createHref(link: Link): string;", + " listen(listener: (location: Link) => void): () => void;", + " block(listener: (args: any) => any): () => void;", + "}" + ] + }, + "props": [ + { + "uid": "location", + "name": "location", + "typeValue": { + "raw": "Link" + }, + "required": true + }, + { + "uid": "push", + "name": "push", + "typeValue": { + "raw": "(link: Link) => void" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "replace", + "name": "replace", + "typeValue": { + "raw": "(link: Link) => void" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "createHref", + "name": "createHref", + "typeValue": { + "raw": "(link: Link) => string" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "listen", + "name": "listen", + "typeValue": { + "raw": "(listener: (location: Link) => void) => () => void" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "block", + "name": "block", + "typeValue": { + "raw": "(listener: (args: any) => any) => () => void" + }, + "editor": { + "type": "func" + }, + "required": true + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IImmutableMap": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IImmutableMap", + "nameFull": "IImmutableMap" + }, + "src": "uui-core/src/types/objects.ts", + "comment": { + "raw": [ + "Immutable map." + ] + }, + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "IImmutableMap", + "print": [ + "/**", + " * Immutable map.", + " */", + "interface IImmutableMap {", + " /**", + " * Must implement multiple constructors:", + " * - constructor with empty arguments or initial data (optional);", + " * - constructor, which accepts an argument of IMap type and clones its value (mandatory).", + " * The example of implementation can be found in 'uui-core/src/data/processing/views/tree/ItemsMap.ts'.", + " */", + " constructor: Function;", + " [Symbol.iterator](): IterableIterator<[", + " TKey,", + " TValue", + " ]>;", + " get(key: TKey): TValue | undefined;", + " /**", + " * Should return cloned map with new value in it. This operation is immutable.", + " * @param key - key of a map.", + " * @param value - value, to be set into a map, using the key.", + " */", + " set(key: TKey, value?: TValue): IImmutableMap;", + " /**", + " * Should return a cloned map, without data, located by the key. This operation is immutable.", + " * @param key", + " */", + " delete(key: TKey): IImmutableMap;", + " has(key: TKey): boolean;", + " size: number;", + "}" + ] + }, + "props": [ + { + "uid": "constructor", + "name": "constructor", + "comment": { + "raw": [ + "Must implement multiple constructors:", + " - constructor with empty arguments or initial data (optional);", + " - constructor, which accepts an argument of IMap type and clones its value (mandatory).", + " The example of implementation can be found in 'uui-core/src/data/processing/views/tree/ItemsMap.ts'." + ] + }, + "typeValue": { + "raw": "Function" + }, + "required": true + }, + { + "uid": "get", + "name": "get", + "typeValue": { + "raw": "(key: TKey) => TValue | undefined" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "set", + "name": "set", + "comment": { + "raw": [ + "Should return cloned map with new value in it. This operation is immutable.", + " @param key - key of a map.", + " @param value - value, to be set into a map, using the key." + ] + }, + "typeValue": { + "raw": "(key: TKey, value?: TValue | undefined) => IImmutableMap" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "delete", + "name": "delete", + "comment": { + "raw": [ + "Should return a cloned map, without data, located by the key. This operation is immutable.", + " @param key" + ] + }, + "typeValue": { + "raw": "(key: TKey) => IImmutableMap" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "has", + "name": "has", + "typeValue": { + "raw": "(key: TKey) => boolean" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "size", + "name": "size", + "typeValue": { + "raw": "number" + }, + "editor": { + "type": "number" + }, + "required": true + }, + { + "uid": "[Symbol.iterator]", + "name": "[Symbol.iterator]", + "typeValue": { + "raw": "() => IterableIterator<[TKey, TValue]>" + }, + "editor": { + "type": "func" + }, + "required": true + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:ILayoutContext": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "ILayoutContext", + "nameFull": "ILayoutContext" + }, + "src": "uui-core/src/types/contexts.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "ILayoutContext", + "print": [ + "interface ILayoutContext {", + " /** Returns the new layer. This layer will be higher than previous. */", + " getLayer(): LayoutLayer;", + " /** Removes provided layer from layers list */", + " releaseLayer(layer: LayoutLayer): void;", + " /**", + " * Returns portal root node.", + " * In simple cases it will be node with 'main' or 'root' id or document.body.", + " * Or it will return node with portalRootId.", + " */", + " getPortalRoot(): HTMLElement;", + " /**", + " * Returns unique id, which can be used as id for portal root.", + " * Usually used for cases with shadow DOM, to be able to find this portal root element if it's located under shadow DOM", + " */", + " getPortalRootId(): string;", + "}" + ] + }, + "props": [ + { + "uid": "getLayer", + "name": "getLayer", + "comment": { + "raw": [ + "Returns the new layer. This layer will be higher than previous." + ] + }, + "typeValue": { + "raw": "() => LayoutLayer" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "releaseLayer", + "name": "releaseLayer", + "comment": { + "raw": [ + "Removes provided layer from layers list" + ] + }, + "typeValue": { + "raw": "(layer: LayoutLayer) => void" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "getPortalRoot", + "name": "getPortalRoot", + "comment": { + "raw": [ + "Returns portal root node.", + " In simple cases it will be node with 'main' or 'root' id or document.body.", + " Or it will return node with portalRootId." + ] + }, + "typeValue": { + "raw": "() => HTMLElement" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "getPortalRootId", + "name": "getPortalRootId", + "comment": { + "raw": [ + "Returns unique id, which can be used as id for portal root.", + " Usually used for cases with shadow DOM, to be able to find this portal root element if it's located under shadow DOM" + ] + }, + "typeValue": { + "raw": "() => string" + }, + "editor": { + "type": "func" + }, + "required": true + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:ILens": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "ILens", + "nameFull": "ILens" + }, + "src": "uui-core/src/data/lenses/types.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "ILens", + "print": [ + "interface ILens {", + " /** Get lens value */", + " get(): TFocused;", + " /** Get lens value of the IMap or IImmutableMap by provided id. */", + " key(id: TId): ILens>>;", + " /** Set new lens value */", + " set(value: TFocused): void;", + " /** Updates lens value with returned value from provided callback.", + " * This callback received current lens value as a param", + " * */", + " update(fn: (current: TFocused) => TFocused): void;", + " /** Return a new lens on the provided field name */", + " prop(name: K): ILens>;", + " /** Return a new lens on item of array by provided index */", + " index(index: number): ILens>;", + " /** Add to the lens a setter callback, which received old and new value and should return new value for set.", + " * This callback will be called on any lens update", + " * */", + " onChange(fn: (oldValue: TFocused, newValue: TFocused) => TFocused): ILens;", + " /** Defines default lens value, which will be return in case of lens have 'null' or 'undefined' value */", + " default(value: TFocused): ILens;", + " /** Return IEditable interface, which accepted by UUI form components.", + " * Usually you just need to spread it to the component, e.g. { ...lens.prop('name').toProps() } */", + " toProps(): IEditable & ValidationState;", + "}" + ] + }, + "props": [ + { + "uid": "get", + "name": "get", + "comment": { + "raw": [ + "Get lens value" + ] + }, + "typeValue": { + "raw": "() => TFocused" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "key", + "name": "key", + "comment": { + "raw": [ + "Get lens value of the IMap or IImmutableMap by provided id." + ] + }, + "typeValue": { + "raw": "(id: TId) => ILens>>" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "set", + "name": "set", + "comment": { + "raw": [ + "Set new lens value" + ] + }, + "typeValue": { + "raw": "(value: TFocused) => void" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "update", + "name": "update", + "comment": { + "raw": [ + "Updates lens value with returned value from provided callback.", + " This callback received current lens value as a param" + ] + }, + "typeValue": { + "raw": "(fn: (current: TFocused) => TFocused) => void" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "prop", + "name": "prop", + "comment": { + "raw": [ + "Return a new lens on the provided field name" + ] + }, + "typeValue": { + "raw": "(name: K) => ILens>" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "index", + "name": "index", + "comment": { + "raw": [ + "Return a new lens on item of array by provided index" + ] + }, + "typeValue": { + "raw": "(index: number) => ILens>" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "onChange", + "name": "onChange", + "comment": { + "raw": [ + "Add to the lens a setter callback, which received old and new value and should return new value for set.", + " This callback will be called on any lens update" + ] + }, + "typeValue": { + "raw": "(fn: (oldValue: TFocused, newValue: TFocused) => TFocused) => ILens" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "default", + "name": "default", + "comment": { + "raw": [ + "Defines default lens value, which will be return in case of lens have 'null' or 'undefined' value" + ] + }, + "typeValue": { + "raw": "(value: TFocused) => ILens" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "toProps", + "name": "toProps", + "comment": { + "raw": [ + "Return IEditable interface, which accepted by UUI form components.", + " Usually you just need to spread it to the component, e.g. { ...lens.prop('name').toProps() }" + ] + }, + "typeValue": { + "raw": "() => IEditable & ValidationState" + }, + "editor": { + "type": "func" + }, + "required": true + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:ILockContext": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "ILockContext", + "nameFull": "ILockContext" + }, + "src": "uui-core/src/types/contexts.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "ILockContext", + "print": [ + "interface ILockContext {", + " /**", + " * Tries to take a lock, and sets tryRelease callback, which will be invoked when something tries to take control over.", + " * If a lock already exists, it tries to release the current lock and then set a new one", + " */", + " acquire(tryRelease: () => Promise): Promise;", + " /** Releases lock without calling tryRelease callback */", + " release(lock: object): void;", + " /** Tries to acquire a lock for the time while the action is being executed. */", + " withLock(action: () => Promise): Promise;", + " /** Returns currently active lock */", + " getCurrentLock: () => Lock | null;", + "}" + ] + }, + "props": [ + { + "uid": "acquire", + "name": "acquire", + "comment": { + "raw": [ + "Tries to take a lock, and sets tryRelease callback, which will be invoked when something tries to take control over.", + " If a lock already exists, it tries to release the current lock and then set a new one" + ] + }, + "typeValue": { + "raw": "(tryRelease: () => Promise) => Promise" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "release", + "name": "release", + "comment": { + "raw": [ + "Releases lock without calling tryRelease callback" + ] + }, + "typeValue": { + "raw": "(lock: object) => void" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "withLock", + "name": "withLock", + "comment": { + "raw": [ + "Tries to acquire a lock for the time while the action is being executed." + ] + }, + "typeValue": { + "raw": "(action: () => Promise) => Promise" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "getCurrentLock", + "name": "getCurrentLock", + "comment": { + "raw": [ + "Returns currently active lock" + ] + }, + "typeValue": { + "raw": "() => Lock | null" + }, + "editor": { + "type": "func" + }, + "required": true + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IMap": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IMap", + "nameFull": "IMap" + }, + "src": "uui-core/src/types/objects.ts", + "comment": { + "raw": [ + "Mutable map." + ] + }, + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "IMap", + "print": [ + "/**", + " * Mutable map.", + " */", + "interface IMap {", + " /**", + " * Must implement multiple constructors:", + " * - constructor with empty arguments or initial data (optional);", + " * - constructor, which accepts an argument of IMap type and clones its value (mandatory).", + " */", + " constructor: Function;", + " [Symbol.iterator](): IterableIterator<[", + " TKey,", + " TValue", + " ]>;", + " get(key: TKey): TValue | undefined;", + " /**", + " * Should set data to the existing map. This operation is mutable.", + " * @param key - key of a map.", + " * @param value - value, to be set into a map, using the key.", + " */", + " set(key: TKey, value?: TValue): IMap;", + " /**", + " * Should delete an element, located in a map by key. This operation is mutable.", + " * @param key", + " */", + " delete(key: TKey): boolean;", + " has(key: TKey): boolean;", + " size: number;", + "}" + ] + }, + "props": [ + { + "uid": "constructor", + "name": "constructor", + "comment": { + "raw": [ + "Must implement multiple constructors:", + " - constructor with empty arguments or initial data (optional);", + " - constructor, which accepts an argument of IMap type and clones its value (mandatory)." + ] + }, + "typeValue": { + "raw": "Function" + }, + "required": true + }, + { + "uid": "get", + "name": "get", + "typeValue": { + "raw": "(key: TKey) => TValue | undefined" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "set", + "name": "set", + "comment": { + "raw": [ + "Should set data to the existing map. This operation is mutable.", + " @param key - key of a map.", + " @param value - value, to be set into a map, using the key." + ] + }, + "typeValue": { + "raw": "(key: TKey, value?: TValue | undefined) => IMap" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "delete", + "name": "delete", + "comment": { + "raw": [ + "Should delete an element, located in a map by key. This operation is mutable.", + " @param key" + ] + }, + "typeValue": { + "raw": "(key: TKey) => boolean" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "has", + "name": "has", + "typeValue": { + "raw": "(key: TKey) => boolean" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "size", + "name": "size", + "typeValue": { + "raw": "number" + }, + "editor": { + "type": "number" + }, + "required": true + }, + { + "uid": "[Symbol.iterator]", + "name": "[Symbol.iterator]", + "typeValue": { + "raw": "() => IterableIterator<[TKey, TValue]>" + }, + "editor": { + "type": "func" + }, + "required": true + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IMapElement": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IMapElement", + "nameFull": "IMapElement" + }, + "src": "uui-core/src/data/lenses/types.ts", + "comment": { + "raw": [ + "IMap element, supported by ILens." + ] + }, + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "IMapElement", + "print": [ + "/**", + " * IMap element, supported by ILens.", + " */", + "type IMapElement = MapType extends IMap ? Item : MapType extends IImmutableMap ? Item : never;" + ] + } + } + }, + "@epam/uui-core:IModal": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IModal", + "nameFull": "IModal" + }, + "src": "uui-core/src/types/props.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "IModal", + "print": [ + "interface IModal {", + " /** Indicates whether the modal is currently displayed */", + " isActive?: boolean;", + " /** Unique key of the modal */", + " key: string;", + " /** Modal zIndex value. Calculated via LayoutContext. */", + " zIndex: number;", + " /** Call to successfully close the modal. It's resolves `modalContext.show()` promise with provided value. */", + " success(result: TResult): void;", + " /** Call to close the modal with abort action. It's rejects `modalContext.show()` promise with provided value. */", + " abort(result?: any): void;", + " /** Parameters that provided via second param of `modalContext.show` method */", + " parameters?: TParameters;", + " /** Depth of current modal layer */", + " depth?: number;", + "}" + ] + }, + "props": [ + { + "uid": "isActive", + "name": "isActive", + "comment": { + "raw": [ + "Indicates whether the modal is currently displayed" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "required": false + }, + { + "uid": "key", + "name": "key", + "comment": { + "raw": [ + "Unique key of the modal" + ] + }, + "typeValue": { + "raw": "string" + }, + "editor": { + "type": "string" + }, + "required": true + }, + { + "uid": "zIndex", + "name": "zIndex", + "comment": { + "raw": [ + "Modal zIndex value. Calculated via LayoutContext." + ] + }, + "typeValue": { + "raw": "number" + }, + "editor": { + "type": "number" + }, + "required": true + }, + { + "uid": "success", + "name": "success", + "comment": { + "raw": [ + "Call to successfully close the modal. It's resolves `modalContext.show()` promise with provided value." + ] + }, + "typeValue": { + "raw": "(result: TResult) => void" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "abort", + "name": "abort", + "comment": { + "raw": [ + "Call to close the modal with abort action. It's rejects `modalContext.show()` promise with provided value." + ] + }, + "typeValue": { + "raw": "(result?: any) => void" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "parameters", + "name": "parameters", + "comment": { + "raw": [ + "Parameters that provided via second param of `modalContext.show` method" + ] + }, + "typeValue": { + "raw": "TParameters" + }, + "required": false + }, + { + "uid": "depth", + "name": "depth", + "comment": { + "raw": [ + "Depth of current modal layer" + ] + }, + "typeValue": { + "raw": "number" + }, + "editor": { + "type": "number" + }, + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IModalContext": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IModalContext", + "nameFull": "IModalContext" + }, + "src": "uui-core/src/types/contexts.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "IModalContext", + "print": [ + "interface IModalContext extends IBaseContext {", + " /** Shows provided modal component with defined params */", + " show(render: (props: IModal) => React.ReactNode, parameters?: TParameters): Promise;", + " /** Removes all active modals */", + " closeAll(): void;", + " /** Returns true, if some modal displayed */", + " isModalOperationActive(): boolean;", + " /** Returns all active modals */", + " getOperations(): ModalOperation[];", + "}" + ] + }, + "props": [ + { + "uid": "show", + "name": "show", + "comment": { + "raw": [ + "Shows provided modal component with defined params" + ] + }, + "typeValue": { + "raw": "(render: (props: IModal) => React.ReactNode, parameters?: TParameters | undefined) => Promise" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "closeAll", + "name": "closeAll", + "comment": { + "raw": [ + "Removes all active modals" + ] + }, + "typeValue": { + "raw": "() => void" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "isModalOperationActive", + "name": "isModalOperationActive", + "comment": { + "raw": [ + "Returns true, if some modal displayed" + ] + }, + "typeValue": { + "raw": "() => boolean" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "getOperations", + "name": "getOperations", + "comment": { + "raw": [ + "Returns all active modals" + ] + }, + "typeValue": { + "raw": "() => ModalOperation[]" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "subscribe", + "name": "subscribe", + "comment": { + "raw": [ + "Add your handler, which will be called on context updates" + ] + }, + "typeValue": { + "raw": "(handler: (state: {}) => void) => void" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IBaseContext", + "required": true + }, + { + "uid": "unsubscribe", + "name": "unsubscribe", + "comment": { + "raw": [ + "Unsubscribe from context updates" + ] + }, + "typeValue": { + "raw": "(handler: (state: {}) => void) => void" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IBaseContext", + "required": true + }, + { + "uid": "destroyContext", + "name": "destroyContext", + "comment": { + "raw": [ + "Manually destroy context and unsubscribe from all listeners" + ] + }, + "typeValue": { + "raw": "() => void" + }, + "editor": { + "type": "func" }, - "typeValueRef": "@types/react:ReactNode", - "from": "@epam/uui-core:IHasValidationMessage", - "required": false + "from": "@epam/uui-core:IBaseContext", + "required": true } ], "propsFromUnion": false } }, - "@epam/uui-core:IHasCaption": { + "@epam/uui-core:INotification": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IHasCaption", - "nameFull": "IHasCaption" + "name": "INotification", + "nameFull": "INotification" }, "src": "uui-core/src/types/props.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "INotification", + "print": [ + "interface INotification {", + " /** Call to close the notification with abort action. It's rejects `notificationContext.show()` promise. */", + " onClose?(): void;", + " /** Call to close the notification with success action. It's resolved `notificationContext.show()` promise. */", + " onSuccess?(): void;", + " /** Cancel notification closing timer */", + " clearTimer?(): void;", + " /** Reinitialize notification closing timer. It will be set to the provided notification duration. */", + " refreshTimer?(): void;", + " /** Unique id of the notification */", + " id: number;", + " /** Unique key of the notification */", + " key: string;", + "}" + ] + }, + "props": [ + { + "uid": "onClose", + "name": "onClose", + "comment": { + "raw": [ + "Call to close the notification with abort action. It's rejects `notificationContext.show()` promise." + ] + }, + "typeValue": { + "raw": "() => void" + }, + "editor": { + "type": "func" + }, + "required": false + }, + { + "uid": "onSuccess", + "name": "onSuccess", + "comment": { + "raw": [ + "Call to close the notification with success action. It's resolved `notificationContext.show()` promise." + ] + }, + "typeValue": { + "raw": "() => void" + }, + "editor": { + "type": "func" + }, + "required": false + }, + { + "uid": "clearTimer", + "name": "clearTimer", + "comment": { + "raw": [ + "Cancel notification closing timer" + ] + }, + "typeValue": { + "raw": "() => void" + }, + "editor": { + "type": "func" + }, + "required": false + }, + { + "uid": "refreshTimer", + "name": "refreshTimer", + "comment": { + "raw": [ + "Reinitialize notification closing timer. It will be set to the provided notification duration." + ] + }, + "typeValue": { + "raw": "() => void" + }, + "editor": { + "type": "func" + }, + "required": false + }, + { + "uid": "id", + "name": "id", + "comment": { + "raw": [ + "Unique id of the notification" + ] + }, + "typeValue": { + "raw": "number" + }, + "editor": { + "type": "number" + }, + "required": true + }, + { + "uid": "key", + "name": "key", + "comment": { + "raw": [ + "Unique key of the notification" + ] + }, + "typeValue": { + "raw": "string" + }, + "editor": { + "type": "string" + }, + "required": true + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:INotificationContext": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "INotificationContext", + "nameFull": "INotificationContext" + }, + "src": "uui-core/src/types/contexts.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "INotificationContext", + "print": [ + "interface INotificationContext extends IBaseContext {", + " /** Shows provided notification component with defined params */", + " show(render: (props: INotification) => React.ReactNode, notificationParams?: NotificationParams): Promise;", + " /** Returns all active notifications */", + " getNotifications(): NotificationOperation[];", + " /** Removes notification by their id */", + " remove(id: number): void;", + " /** Removes all active notification */", + " clearAll(): void;", + "}" + ] + }, + "props": [ + { + "uid": "show", + "name": "show", + "comment": { + "raw": [ + "Shows provided notification component with defined params" + ] + }, + "typeValue": { + "raw": "(render: (props: INotification) => React.ReactNode, notificationParams?: NotificationParams | undefined) => Promise" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "getNotifications", + "name": "getNotifications", + "comment": { + "raw": [ + "Returns all active notifications" + ] + }, + "typeValue": { + "raw": "() => NotificationOperation[]" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "remove", + "name": "remove", + "comment": { + "raw": [ + "Removes notification by their id" + ] + }, + "typeValue": { + "raw": "(id: number) => void" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "clearAll", + "name": "clearAll", + "comment": { + "raw": [ + "Removes all active notification" + ] + }, + "typeValue": { + "raw": "() => void" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "subscribe", + "name": "subscribe", + "comment": { + "raw": [ + "Add your handler, which will be called on context updates" + ] + }, + "typeValue": { + "raw": "(handler: (state: {}) => void) => void" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IBaseContext", + "required": true + }, + { + "uid": "unsubscribe", + "name": "unsubscribe", + "comment": { + "raw": [ + "Unsubscribe from context updates" + ] + }, + "typeValue": { + "raw": "(handler: (state: {}) => void) => void" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IBaseContext", + "required": true + }, + { + "uid": "destroyContext", + "name": "destroyContext", + "comment": { + "raw": [ + "Manually destroy context and unsubscribe from all listeners" + ] + }, + "typeValue": { + "raw": "() => void" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IBaseContext", + "required": true + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IPickerToggler": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IPickerToggler", + "nameFull": "IPickerToggler" + }, + "src": "uui-core/src/types/pickers.ts", "comment": { "raw": [ - "Component has a caption. E.g. Button" + "Component can be used as Toggler control for pickers.", + " Only IDropdownToggler implementation is necessary for the picker to function.", + " Other props can be implemented for full-featured picker togglers." ] }, "exported": true @@ -16983,601 +19718,680 @@ "details": { "kind": 264, "typeValue": { - "raw": "IHasCaption", + "raw": "IPickerToggler", "print": [ - "/** Component has a caption. E.g. Button */", - "interface IHasCaption {", - " /** Caption. Can be a string, or React.Element. Certain components supports minimal markup (,,) in captions. */", - " caption?: ReactNode;", + "/**", + " * Component can be used as Toggler control for pickers.", + " * Only IDropdownToggler implementation is necessary for the picker to function.", + " * Other props can be implemented for full-featured picker togglers.", + " */", + "interface IPickerToggler extends IBasicPickerToggler, Partial>, Partial, Partial, Partial {", + " /** Array of selected rows */", + " selection?: DataRowProps[];", + " /** Amount of selected items */", + " selectedRowsCount?: number;", "}" ] }, "props": [ { - "uid": "caption", - "name": "caption", + "uid": "selection", + "name": "selection", + "comment": { + "raw": [ + "Array of selected rows" + ] + }, + "typeValue": { + "raw": "DataRowProps[]" + }, + "required": false + }, + { + "uid": "selectedRowsCount", + "name": "selectedRowsCount", + "comment": { + "raw": [ + "Amount of selected items" + ] + }, + "typeValue": { + "raw": "number" + }, + "editor": { + "type": "number" + }, + "required": false + }, + { + "uid": "onClear", + "name": "onClear", + "comment": { + "raw": [ + "Call to clear toggler value" + ] + }, + "typeValue": { + "raw": "(e?: any) => void" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IBasicPickerToggler", + "required": false + }, + { + "uid": "toggleDropdownOpening", + "name": "toggleDropdownOpening", + "comment": { + "raw": [ + "Called when associated dropdown should open or close" + ] + }, + "typeValue": { + "raw": "(value: boolean) => void" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IDropdownTogglerProps", + "required": false + }, + { + "uid": "isInteractedOutside", + "name": "isInteractedOutside", + "comment": { + "raw": [ + "Called when component is interacted outside, to close the dropdown" + ] + }, + "typeValue": { + "raw": "(event: Event) => boolean" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IDropdownTogglerProps", + "required": false + }, + { + "uid": "ref", + "name": "ref", + "comment": { + "raw": [ + "Toggler component ref" + ] + }, + "typeValue": { + "raw": "null | (instance: any) => void | React.RefObject" + }, + "from": "@epam/uui-core:IDropdownTogglerProps", + "required": false + }, + { + "uid": "isOpen", + "name": "isOpen", + "comment": { + "raw": [ + "When isDropdown=true, indicate that dropdown is open with chevron icon" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:IDropdownToggler", + "required": false + }, + { + "uid": "isDropdown", + "name": "isDropdown", + "comment": { + "raw": [ + "Shows chevron icon, enabling component to act as dropdown toggler" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:IDropdownToggler", + "required": false + }, + { + "uid": "onClick", + "name": "onClick", + "comment": { + "raw": [ + "Called when component is clicked" + ] + }, + "typeValue": { + "raw": "(e?: any) => void" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IClickable", + "required": false + }, + { + "uid": "isInvalid", + "name": "isInvalid", + "comment": { + "raw": [ + "True if component contains invalid input" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:ICanBeInvalid", + "required": false + }, + { + "uid": "isDisabled", + "name": "isDisabled", + "comment": { + "raw": [ + "Disable editing, and visually de-emphasize value of the component" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:IDisableable", + "required": false + }, + { + "uid": "isReadonly", + "name": "isReadonly", + "comment": { + "raw": [ + "Disable editing. Unlike isDisabled, keep component's value readable." + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:ICanBeReadonly", + "required": false + }, + { + "uid": "isRequired", + "name": "isRequired", + "comment": { + "raw": [ + "Marks that component's value is required and shouldn't be empty" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:ICanBeRequired", + "required": false + }, + { + "uid": "value", + "name": "value", "comment": { "raw": [ - "Caption. Can be a string, or React.Element. Certain components supports minimal markup (,,) in captions." + "The current value of component" ] }, "typeValue": { - "raw": "React.ReactNode" + "raw": "string" }, - "typeValueRef": "@types/react:ReactNode", + "editor": { + "type": "string" + }, + "from": "@epam/uui-core:IControlled", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:IHasChildren": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "IHasChildren", - "nameFull": "IHasChildren" - }, - "src": "uui-core/src/types/props.ts", - "comment": { - "raw": [ - "Component can have child components" - ] - }, - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "IHasChildren", - "print": [ - "/** Component can have child components */", - "interface IHasChildren {", - " /** Component children */", - " children?: ReactNode;", - "}" - ] - }, - "props": [ + }, { - "uid": "children", - "name": "children", + "uid": "onValueChange", + "name": "onValueChange", "comment": { "raw": [ - "Component children" + "Called when value needs to be changed (usually due to user interaction)" ] }, "typeValue": { - "raw": "React.ReactNode" + "raw": "(newValue: string) => void" }, - "typeValueRef": "@types/react:ReactNode", + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IControlled", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:IHasCX": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "IHasCX", - "nameFull": "IHasCX" - }, - "src": "uui-core/src/types/props.ts", - "comment": { - "raw": [ - "Component can accept cx property, allowing to pass classes to put on component.", - " CX is a shortcut for 'classnames'.", - " The props accept string, arrays, object, recursively. All falsy values are thrown away. Examples:", - " - 'red' => 'red'", - " - ['red', 0, false, 'blue' ] => 'red blue'", - " - { 'red': true, 'blue': false, ['green', 'white']} => 'red green white'" - ] - }, - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "IHasCX", - "print": [ - "/**", - " * Component can accept cx property, allowing to pass classes to put on component.", - " * CX is a shortcut for 'classnames'.", - " * The props accept string, arrays, object, recursively. All falsy values are thrown away. Examples:", - " * - 'red' => 'red'", - " * - ['red', 0, false, 'blue' ] => 'red blue'", - " * - { 'red': true, 'blue': false, ['green', 'white']} => 'red green white'", - " */", - "interface IHasCX {", - " /** CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details */", - " cx?: CX;", - "}" - ] - }, - "props": [ + }, { - "uid": "cx", - "name": "cx", + "uid": "placeholder", + "name": "placeholder", "comment": { "raw": [ - "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" + "Placeholder to display when empty" ] }, "typeValue": { - "raw": "null | string | number | boolean | ClassDictionary | ClassArray" + "raw": "any" }, - "typeValueRef": "@epam/uui-core:ClassValue", + "from": "@epam/uui-core:IHasPlaceholder", "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:IHasDirection": { + "@epam/uui-core:IPresetsApi": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IHasDirection", - "nameFull": "IHasDirection" - }, - "src": "uui-core/src/types/props.ts", - "comment": { - "raw": [ - "Component has direction of child components." - ] + "name": "IPresetsApi", + "nameFull": "IPresetsApi" }, + "src": "uui-core/src/types/tables.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "IHasDirection", + "raw": "IPresetsApi", "print": [ - "/** Component has direction of child components. */", - "interface IHasDirection {", - " /** Direction of child components. */", - " direction?: 'vertical' | 'horizontal';", + "interface IPresetsApi {", + " /** ID of selected preset */", + " activePresetId: number | null;", + " /** Function that selects given preset */", + " choosePreset(preset: ITablePreset): void;", + " /** Function that gives preset name and create new preset with this name and current table state */", + " createNewPreset(name: string): Promise;", + " /** Function that gives preset and return if this preset changed or not */", + " hasPresetChanged(preset: ITablePreset): boolean;", + " /** Function that gives the preset and creat their duplicate */", + " duplicatePreset(preset: ITablePreset): void;", + " /** Function that deletes given preset */", + " deletePreset(preset: ITablePreset): Promise;", + " /** Function that updates given preset */", + " updatePreset(preset: ITablePreset): Promise;", + " /** Function that gives preset and return URL link on given preset */", + " getPresetLink(preset: ITablePreset): string;", + " /** Array of presets */", + " presets: ITablePreset[];", "}" ] }, "props": [ { - "uid": "direction", - "name": "direction", + "uid": "activePresetId", + "name": "activePresetId", "comment": { "raw": [ - "Direction of child components." + "ID of selected preset" ] }, "typeValue": { - "raw": "'vertical' | 'horizontal'" + "raw": "null | number" }, "editor": { - "type": "oneOf", - "options": [ - "vertical", - "horizontal" - ] + "type": "number" }, "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:IHasForwardedRef": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "IHasForwardedRef", - "nameFull": "IHasForwardedRef" - }, - "src": "uui-core/src/types/props.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "IHasForwardedRef", - "print": [ - "interface IHasForwardedRef {", - " /** this ref is passed to the underlying component */", - " forwardedRef?: ForwardedRef;", - "}" - ] - }, - "props": [ + }, { - "uid": "forwardedRef", - "name": "forwardedRef", + "uid": "choosePreset", + "name": "choosePreset", "comment": { "raw": [ - "this ref is passed to the underlying component" + "Function that selects given preset" ] }, "typeValue": { - "raw": "null | (instance: T | null) => void | React.MutableRefObject" + "raw": "(preset: ITablePreset) => void" }, - "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:IHasIcon": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "IHasIcon", - "nameFull": "IHasIcon" - }, - "src": "uui-core/src/types/props.ts", - "comment": { - "raw": [ - "An icon can be added to component" - ] - }, - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "IHasIcon", - "print": [ - "/** An icon can be added to component */", - "interface IHasIcon {", - " /** Icon can be a React element (usually an SVG element) */", - " icon?: Icon;", - " /** Position of the icon (left of right) */", - " iconPosition?: 'left' | 'right';", - " /** Click handler for the icon */", - " onIconClick?(): void;", - "}" - ] - }, - "props": [ + "editor": { + "type": "func" + }, + "required": true + }, { - "uid": "icon", - "name": "icon", + "uid": "createNewPreset", + "name": "createNewPreset", "comment": { "raw": [ - "Icon can be a React element (usually an SVG element)" + "Function that gives preset name and create new preset with this name and current table state" ] }, "typeValue": { - "raw": "Icon" + "raw": "(name: string) => Promise" }, "editor": { - "type": "component" + "type": "func" }, - "required": false + "required": true }, { - "uid": "iconPosition", - "name": "iconPosition", + "uid": "hasPresetChanged", + "name": "hasPresetChanged", "comment": { "raw": [ - "Position of the icon (left of right)" + "Function that gives preset and return if this preset changed or not" ] }, "typeValue": { - "raw": "'left' | 'right'" + "raw": "(preset: ITablePreset) => boolean" }, "editor": { - "type": "oneOf", - "options": [ - "left", - "right" + "type": "func" + }, + "required": true + }, + { + "uid": "duplicatePreset", + "name": "duplicatePreset", + "comment": { + "raw": [ + "Function that gives the preset and creat their duplicate" ] }, - "required": false + "typeValue": { + "raw": "(preset: ITablePreset) => void" + }, + "editor": { + "type": "func" + }, + "required": true }, { - "uid": "onIconClick", - "name": "onIconClick", + "uid": "deletePreset", + "name": "deletePreset", "comment": { "raw": [ - "Click handler for the icon" + "Function that deletes given preset" ] }, "typeValue": { - "raw": "() => void" + "raw": "(preset: ITablePreset) => Promise" }, "editor": { "type": "func" }, - "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:IHasLabel": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "IHasLabel", - "nameFull": "IHasLabel" - }, - "src": "uui-core/src/types/props.ts", - "comment": { - "raw": [ - "Component has label. E.g. User Name" - ] - }, - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "IHasLabel", - "print": [ - "/** Component has label. E.g. User Name */", - "interface IHasLabel {", - " /** Component label. Can be a string, or React.Element. Certain components supports minimal markup (,,) in labels. */", - " label?: ReactNode;", - "}" - ] - }, - "props": [ + "required": true + }, { - "uid": "label", - "name": "label", + "uid": "updatePreset", + "name": "updatePreset", "comment": { "raw": [ - "Component label. Can be a string, or React.Element. Certain components supports minimal markup (,,) in labels." + "Function that updates given preset" ] }, "typeValue": { - "raw": "React.ReactNode" + "raw": "(preset: ITablePreset) => Promise" }, - "typeValueRef": "@types/react:ReactNode", - "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:IHasPlaceholder": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "IHasPlaceholder", - "nameFull": "IHasPlaceholder" - }, - "src": "uui-core/src/types/props.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "IHasPlaceholder", - "print": [ - "interface IHasPlaceholder {", - " /** Placeholder to display when empty */", - " placeholder?: any;", - "}" - ] - }, - "props": [ + "editor": { + "type": "func" + }, + "required": true + }, { - "uid": "placeholder", - "name": "placeholder", + "uid": "getPresetLink", + "name": "getPresetLink", "comment": { "raw": [ - "Placeholder to display when empty" + "Function that gives preset and return URL link on given preset" ] }, "typeValue": { - "raw": "any" + "raw": "(preset: ITablePreset) => string" }, - "required": false + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "presets", + "name": "presets", + "comment": { + "raw": [ + "Array of presets" + ] + }, + "typeValue": { + "raw": "ITablePreset[]" + }, + "required": true } ], "propsFromUnion": false } }, - "@epam/uui-core:IHasRawProps": { + "@epam/uui-core:IProcessRequest": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IHasRawProps", - "nameFull": "IHasRawProps" + "name": "IProcessRequest", + "nameFull": "IProcessRequest" }, - "src": "uui-core/src/types/props.ts", + "src": "uui-core/src/services/ApiContext.ts", "exported": true }, "details": { "kind": 265, "typeValue": { - "raw": "IHasRawProps", + "raw": "IProcessRequest", "print": [ - "// Component allows to pass raw HTML props to put on the DOM element", - "type IHasRawProps = {", - " /** Any HTML attributes (native or 'data-') to put on the underlying component */", - " rawProps?: T & Record<`data-${string}`, string>;", - "};" + "type IProcessRequest = (url: string, method: string, data?: any, options?: ApiCallOptions) => Promise;" ] - }, - "props": [ - { - "uid": "rawProps", - "name": "rawProps", - "comment": { - "raw": [ - "Any HTML attributes (native or 'data-') to put on the underlying component" - ] - }, - "typeValue": { - "raw": "T & Record<`data-${string}`, string>" - }, - "required": false - } - ], - "propsFromUnion": false + } } }, - "@epam/uui-core:IHasStyleAttrs": { + "@epam/uui-core:IRouter6": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IHasStyleAttrs", - "nameFull": "IHasStyleAttrs" + "name": "IRouter6", + "nameFull": "IRouter6" + }, + "src": "uui-core/src/services/routing/interfaces/IRouter6.ts", + "comment": { + "raw": [ + "From: react-router version 6.14.0", + "", + " The type definition of the IRouter6 is not complete (It's OK as long as we only use a subset of its API)", + "", + " NOTE: Complete definitions of the router is located in @remix-run/router:", + " https://github.com/remix-run/react-router/blob/main/packages/router/router.ts#L57" + ] }, - "src": "uui-core/src/types/props.ts", "exported": true }, "details": { - "kind": 264, + "kind": 265, "typeValue": { - "raw": "IHasStyleAttrs", + "raw": "IRouter6", "print": [ - "interface IHasStyleAttrs {", - " /** CSS style prop to put on the component */", - " style?: React.CSSProperties;", - "}" + "/**", + " * From: react-router version 6.14.0", + " *", + " * The type definition of the IRouter6 is not complete (It's OK as long as we only use a subset of its API)", + " *", + " * NOTE: Complete definitions of the router is located in @remix-run/router:", + " * https://github.com/remix-run/react-router/blob/main/packages/router/router.ts#L57", + " */", + "type IRouter6 = {", + " state: RouterState;", + " navigate(to: To | null, opts?: RouterNavigateOptions): Promise;", + " navigate(to: number): Promise;", + " getBlocker: (key: string, fn: BlockerFunction) => unknown;", + " subscribe: (fn: (state: RouterState) => void) => () => void;", + " deleteBlocker: (key: string) => void;", + " createHref(location: Location | URL): string;", + "};" ] }, "props": [ { - "uid": "style", - "name": "style", - "comment": { - "raw": [ - "CSS style prop to put on the component" - ] + "uid": "state", + "name": "state", + "typeValue": { + "raw": "RouterState" + }, + "typeValueRef": "@epam/uui-core:RouterState", + "required": true + }, + { + "uid": "navigate", + "name": "navigate", + "typeValue": { + "raw": "{ (to: To | null, opts?: RouterNavigateOptions | undefined): Promise; (to: number): Promise; }" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "getBlocker", + "name": "getBlocker", + "typeValue": { + "raw": "(key: string, fn: BlockerFunction) => unknown" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "subscribe", + "name": "subscribe", + "typeValue": { + "raw": "(fn: (state: RouterState) => void) => () => void" + }, + "editor": { + "type": "func" }, + "required": true + }, + { + "uid": "deleteBlocker", + "name": "deleteBlocker", "typeValue": { - "raw": "React.CSSProperties" + "raw": "(key: string) => void" }, - "required": false + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "createHref", + "name": "createHref", + "typeValue": { + "raw": "(location: Location | URL) => string" + }, + "editor": { + "type": "func" + }, + "required": true } ], "propsFromUnion": false } }, - "@epam/uui-core:IHasTabIndex": { + "@epam/uui-core:IRouterContext": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IHasTabIndex", - "nameFull": "IHasTabIndex" + "name": "IRouterContext", + "nameFull": "IRouterContext" }, - "src": "uui-core/src/types/props.ts", + "src": "uui-core/src/types/contexts.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "IHasTabIndex", + "raw": "IRouterContext", "print": [ - "// TBD: merge with ICanFocus?", - "interface IHasTabIndex {", - " /** Controls the order of keyboard navigation between components */", - " tabIndex?: React.HTMLAttributes['tabIndex'];", + "interface IRouterContext {", + " /** Returns current location link */", + " getCurrentLink(): Link;", + " /** Makes a SPA redirect to the provided link */", + " redirect(link?: Link | string): void;", + " /** Makes a SPA redirect to the provided link. Replaces the current entry in the history stack with a new one */", + " transfer(link: Link): void;", + " /** Returns true, if provided link match current location */", + " isActive(link: Link): boolean;", + " /** Creates href string based on provided link */", + " createHref(link: Link): string;", + " /** Subscribes to the router updates */", + " listen(listener: (link: Link) => void): () => void;", + " /**", + " * Blocks router changes. Can be used to show confirmation dialogs before the redirect.", + " * If block callback provide, all router changes will be blocked, you need to unblock and to retry them by yourself.", + " * */", + " block(callback: (link: Link) => void): () => void;", "}" ] }, "props": [ { - "uid": "tabIndex", - "name": "tabIndex", + "uid": "getCurrentLink", + "name": "getCurrentLink", "comment": { "raw": [ - "Controls the order of keyboard navigation between components" + "Returns current location link" ] }, "typeValue": { - "raw": "number" + "raw": "() => Link" }, "editor": { - "type": "number" + "type": "func" }, - "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:IHasValidationMessage": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "IHasValidationMessage", - "nameFull": "IHasValidationMessage" - }, - "src": "uui-core/src/types/props.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "IHasValidationMessage", - "print": [ - "interface IHasValidationMessage {", - " /** Message describing why the value is invalid */", - " validationMessage?: ReactNode;", - "}" - ] - }, - "props": [ + "required": true + }, { - "uid": "validationMessage", - "name": "validationMessage", + "uid": "redirect", + "name": "redirect", "comment": { "raw": [ - "Message describing why the value is invalid" + "Makes a SPA redirect to the provided link" ] }, "typeValue": { - "raw": "React.ReactNode" + "raw": "(link?: string | Link | undefined) => void" }, - "typeValueRef": "@types/react:ReactNode", - "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:IHistory4": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "IHistory4", - "nameFull": "IHistory4" - }, - "src": "uui-core/src/services/routing/HistoryAdaptedRouter.tsx", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "IHistory4", - "print": [ - "interface IHistory4 {", - " location: Link;", - " push(link: Link): void;", - " replace(link: Link): void;", - " createHref(link: Link): string;", - " listen(listener: (location: Link) => void): () => void;", - " block(listener: (args: any) => any): () => void;", - "}" - ] - }, - "props": [ - { - "uid": "location", - "name": "location", - "typeValue": { - "raw": "Link" + "editor": { + "type": "func" }, "required": true }, { - "uid": "push", - "name": "push", + "uid": "transfer", + "name": "transfer", + "comment": { + "raw": [ + "Makes a SPA redirect to the provided link. Replaces the current entry in the history stack with a new one" + ] + }, "typeValue": { "raw": "(link: Link) => void" }, @@ -17587,10 +20401,15 @@ "required": true }, { - "uid": "replace", - "name": "replace", + "uid": "isActive", + "name": "isActive", + "comment": { + "raw": [ + "Returns true, if provided link match current location" + ] + }, "typeValue": { - "raw": "(link: Link) => void" + "raw": "(link: Link) => boolean" }, "editor": { "type": "func" @@ -17600,6 +20419,11 @@ { "uid": "createHref", "name": "createHref", + "comment": { + "raw": [ + "Creates href string based on provided link" + ] + }, "typeValue": { "raw": "(link: Link) => string" }, @@ -17611,8 +20435,13 @@ { "uid": "listen", "name": "listen", + "comment": { + "raw": [ + "Subscribes to the router updates" + ] + }, "typeValue": { - "raw": "(listener: (location: Link) => void) => () => void" + "raw": "(listener: (link: Link) => void) => () => void" }, "editor": { "type": "func" @@ -17622,8 +20451,14 @@ { "uid": "block", "name": "block", + "comment": { + "raw": [ + "Blocks router changes. Can be used to show confirmation dialogs before the redirect.", + " If block callback provide, all router changes will be blocked, you need to unblock and to retry them by yourself." + ] + }, "typeValue": { - "raw": "(listener: (args: any) => any) => () => void" + "raw": "(callback: (link: Link) => void) => () => void" }, "editor": { "type": "func" @@ -17634,330 +20469,470 @@ "propsFromUnion": false } }, - "@epam/uui-core:ILayoutContext": { + "@epam/uui-core:ITablePreset": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "ILayoutContext", - "nameFull": "ILayoutContext" + "name": "ITablePreset", + "nameFull": "ITablePreset" }, - "src": "uui-core/src/types/contexts.ts", + "src": "uui-core/src/types/tables.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "ILayoutContext", + "raw": "ITablePreset", "print": [ - "interface ILayoutContext {", - " /** Returns the new layer. This layer will be higher than previous. */", - " getLayer(): LayoutLayer;", - " /** Removes provided layer from layers list */", - " releaseLayer(layer: LayoutLayer): void;", - " /**", - " * Returns portal root node.", - " * In simple cases it will be node with 'main' or 'root' id or document.body.", - " * Or it will return node with portalRootId.", - " */", - " getPortalRoot(): HTMLElement;", + "interface ITablePreset {", + " /** Name of the filter */", + " name: string;", + " /** Unique Id of the filter */", + " id: number | null;", + " /** If true, this preset can't be deleted or modified */", + " isReadonly?: boolean;", " /**", - " * Returns unique id, which can be used as id for portal root.", - " * Usually used for cases with shadow DOM, to be able to find this portal root element if it's located under shadow DOM", + " * Determines the order in which this preset should appear in the presets list.", + " * The columns are sorted in ascending alphabetical order.", " */", - " getPortalRootId(): string;", + " order?: string;", + " /** Filter value stored in the preset */", + " filter?: TFilter;", + " /** Columns config value stored in the preset */", + " columnsConfig?: ColumnsConfig;", + " /** Filters config value stored in the preset */", + " filtersConfig?: FiltersConfig;", + " /** Sorting value stored in the preset */", + " sorting?: SortingOption[];", + " /** View state value stored in the preset */", + " viewState?: TViewState;", "}" ] }, "props": [ { - "uid": "getLayer", - "name": "getLayer", + "uid": "name", + "name": "name", "comment": { "raw": [ - "Returns the new layer. This layer will be higher than previous." + "Name of the filter" ] }, "typeValue": { - "raw": "() => LayoutLayer" + "raw": "string" }, "editor": { - "type": "func" + "type": "string" }, "required": true }, { - "uid": "releaseLayer", - "name": "releaseLayer", + "uid": "id", + "name": "id", "comment": { "raw": [ - "Removes provided layer from layers list" + "Unique Id of the filter" ] }, "typeValue": { - "raw": "(layer: LayoutLayer) => void" + "raw": "null | number" }, "editor": { - "type": "func" + "type": "number" }, - "required": true + "required": false }, { - "uid": "getPortalRoot", - "name": "getPortalRoot", + "uid": "isReadonly", + "name": "isReadonly", "comment": { "raw": [ - "Returns portal root node.", - " In simple cases it will be node with 'main' or 'root' id or document.body.", - " Or it will return node with portalRootId." + "If true, this preset can't be deleted or modified" ] }, "typeValue": { - "raw": "() => HTMLElement" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "required": true + "required": false }, { - "uid": "getPortalRootId", - "name": "getPortalRootId", + "uid": "order", + "name": "order", "comment": { "raw": [ - "Returns unique id, which can be used as id for portal root.", - " Usually used for cases with shadow DOM, to be able to find this portal root element if it's located under shadow DOM" + "Determines the order in which this preset should appear in the presets list.", + " The columns are sorted in ascending alphabetical order." ] }, "typeValue": { - "raw": "() => string" + "raw": "string" }, "editor": { - "type": "func" + "type": "string" }, - "required": true + "required": false + }, + { + "uid": "filter", + "name": "filter", + "comment": { + "raw": [ + "Filter value stored in the preset" + ] + }, + "typeValue": { + "raw": "TFilter" + }, + "required": false + }, + { + "uid": "columnsConfig", + "name": "columnsConfig", + "comment": { + "raw": [ + "Columns config value stored in the preset" + ] + }, + "typeValue": { + "raw": "ColumnsConfig" + }, + "required": false + }, + { + "uid": "filtersConfig", + "name": "filtersConfig", + "comment": { + "raw": [ + "Filters config value stored in the preset" + ] + }, + "typeValue": { + "raw": "FiltersConfig" + }, + "required": false + }, + { + "uid": "sorting", + "name": "sorting", + "comment": { + "raw": [ + "Sorting value stored in the preset" + ] + }, + "typeValue": { + "raw": "SortingOption[]" + }, + "required": false + }, + { + "uid": "viewState", + "name": "viewState", + "comment": { + "raw": [ + "View state value stored in the preset" + ] + }, + "typeValue": { + "raw": "TViewState" + }, + "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:ILens": { + "@epam/uui-core:ITableState": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "ILens", - "nameFull": "ILens" + "name": "ITableState", + "nameFull": "ITableState" }, - "src": "uui-core/src/data/lenses/types.ts", + "src": "uui-core/src/types/tables.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "ILens", + "raw": "ITableState", "print": [ - "interface ILens {", - " /** Get lens value */", - " get(): TFocused;", - " /** Set new lens value */", - " set(value: TFocused): void;", - " /** Updates lens value with returned value from provided callback.", - " * This callback received current lens value as a param", - " * */", - " update(fn: (current: TFocused) => TFocused): void;", - " /** Return a new lens on the provided field name */", - " prop(name: K): ILens>;", - " /** Return a new lens on item of array by provided index */", - " index(index: number): ILens>;", - " /** Add to the lens a setter callback, which received old and new value and should return new value for set.", - " * This callback will be called on any lens update", - " * */", - " onChange(fn: (oldValue: TFocused, newValue: TFocused) => TFocused): ILens;", - " /** Defines default lens value, which will be return in case of lens have 'null' or 'undefined' value */", - " default(value: TFocused): ILens;", - " /** Return IEditable interface, which accepted by UUI form components.", - " * Usually you just need to spread it to the component, e.g. { ...lens.prop('name').toProps() } */", - " toProps(): IEditable & ValidationState;", + "interface ITableState, TViewState = any> extends IPresetsApi {", + " /** Table state value */", + " tableState: DataTableState;", + " /** Function that updates table state value */", + " setTableState: Dispatch>>;", + " /** Function that updates filter value */", + " setFilter(filter: TFilter): void;", + " /** Function that updates columns config value */", + " setColumnsConfig(columnsConfig: ColumnsConfig): void;", + " /** Function that updates filters config value */", + " setFiltersConfig(filtersConfig: FiltersConfig): void;", "}" ] }, "props": [ { - "uid": "get", - "name": "get", + "uid": "tableState", + "name": "tableState", "comment": { "raw": [ - "Get lens value" + "Table state value" ] }, "typeValue": { - "raw": "() => TFocused" + "raw": "DataTableState" + }, + "required": true + }, + { + "uid": "setTableState", + "name": "setTableState", + "comment": { + "raw": [ + "Function that updates table state value" + ] + }, + "typeValue": { + "raw": "React.Dispatch>>" }, + "typeValueRef": "@types/react:Dispatch", "editor": { "type": "func" }, "required": true }, { - "uid": "set", - "name": "set", + "uid": "setFilter", + "name": "setFilter", "comment": { "raw": [ - "Set new lens value" + "Function that updates filter value" + ] + }, + "typeValue": { + "raw": "(filter: TFilter) => void" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "setColumnsConfig", + "name": "setColumnsConfig", + "comment": { + "raw": [ + "Function that updates columns config value" + ] + }, + "typeValue": { + "raw": "(columnsConfig: ColumnsConfig) => void" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "setFiltersConfig", + "name": "setFiltersConfig", + "comment": { + "raw": [ + "Function that updates filters config value" + ] + }, + "typeValue": { + "raw": "(filtersConfig: FiltersConfig) => void" + }, + "editor": { + "type": "func" + }, + "required": true + }, + { + "uid": "activePresetId", + "name": "activePresetId", + "comment": { + "raw": [ + "ID of selected preset" + ] + }, + "typeValue": { + "raw": "null | number" + }, + "editor": { + "type": "number" + }, + "from": "@epam/uui-core:IPresetsApi", + "required": false + }, + { + "uid": "choosePreset", + "name": "choosePreset", + "comment": { + "raw": [ + "Function that selects given preset" + ] + }, + "typeValue": { + "raw": "(preset: ITablePreset) => void" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IPresetsApi", + "required": true + }, + { + "uid": "createNewPreset", + "name": "createNewPreset", + "comment": { + "raw": [ + "Function that gives preset name and create new preset with this name and current table state" ] }, "typeValue": { - "raw": "(value: TFocused) => void" + "raw": "(name: string) => Promise" }, "editor": { "type": "func" }, + "from": "@epam/uui-core:IPresetsApi", "required": true }, { - "uid": "update", - "name": "update", + "uid": "hasPresetChanged", + "name": "hasPresetChanged", "comment": { "raw": [ - "Updates lens value with returned value from provided callback.", - " This callback received current lens value as a param" + "Function that gives preset and return if this preset changed or not" ] }, "typeValue": { - "raw": "(fn: (current: TFocused) => TFocused) => void" + "raw": "(preset: ITablePreset) => boolean" }, "editor": { "type": "func" }, + "from": "@epam/uui-core:IPresetsApi", "required": true }, { - "uid": "prop", - "name": "prop", + "uid": "duplicatePreset", + "name": "duplicatePreset", "comment": { "raw": [ - "Return a new lens on the provided field name" + "Function that gives the preset and creat their duplicate" ] }, "typeValue": { - "raw": "(name: K) => ILens>" + "raw": "(preset: ITablePreset) => void" }, "editor": { "type": "func" }, + "from": "@epam/uui-core:IPresetsApi", "required": true }, { - "uid": "index", - "name": "index", + "uid": "deletePreset", + "name": "deletePreset", "comment": { "raw": [ - "Return a new lens on item of array by provided index" + "Function that deletes given preset" ] }, "typeValue": { - "raw": "(index: number) => ILens>" + "raw": "(preset: ITablePreset) => Promise" }, "editor": { "type": "func" }, + "from": "@epam/uui-core:IPresetsApi", "required": true }, { - "uid": "onChange", - "name": "onChange", + "uid": "updatePreset", + "name": "updatePreset", "comment": { "raw": [ - "Add to the lens a setter callback, which received old and new value and should return new value for set.", - " This callback will be called on any lens update" + "Function that updates given preset" ] }, "typeValue": { - "raw": "(fn: (oldValue: TFocused, newValue: TFocused) => TFocused) => ILens" + "raw": "(preset: ITablePreset) => Promise" }, "editor": { "type": "func" }, + "from": "@epam/uui-core:IPresetsApi", "required": true }, { - "uid": "default", - "name": "default", + "uid": "getPresetLink", + "name": "getPresetLink", "comment": { "raw": [ - "Defines default lens value, which will be return in case of lens have 'null' or 'undefined' value" + "Function that gives preset and return URL link on given preset" ] }, "typeValue": { - "raw": "(value: TFocused) => ILens" + "raw": "(preset: ITablePreset) => string" }, "editor": { "type": "func" }, + "from": "@epam/uui-core:IPresetsApi", "required": true }, { - "uid": "toProps", - "name": "toProps", + "uid": "presets", + "name": "presets", "comment": { "raw": [ - "Return IEditable interface, which accepted by UUI form components.", - " Usually you just need to spread it to the component, e.g. { ...lens.prop('name').toProps() }" + "Array of presets" ] }, "typeValue": { - "raw": "() => IEditable & ValidationState" - }, - "editor": { - "type": "func" + "raw": "ITablePreset[]" }, + "from": "@epam/uui-core:IPresetsApi", "required": true } ], "propsFromUnion": false } }, - "@epam/uui-core:ILockContext": { + "@epam/uui-core:ItemsMapParams": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "ILockContext", - "nameFull": "ILockContext" + "name": "ItemsMapParams", + "nameFull": "ItemsMapParams" }, - "src": "uui-core/src/types/contexts.ts", + "src": "uui-core/src/data/processing/views/tree/ItemsMap.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "ILockContext", + "raw": "ItemsMapParams", "print": [ - "interface ILockContext {", - " /**", - " * Tries to take a lock, and sets tryRelease callback, which will be invoked when something tries to take control over.", - " * If a lock already exists, it tries to release the current lock and then set a new one", - " */", - " acquire(tryRelease: () => Promise): Promise;", - " /** Releases lock without calling tryRelease callback */", - " release(lock: object): void;", - " /** Tries to acquire a lock for the time while the action is being executed. */", - " withLock(action: () => Promise): Promise;", - " /** Returns currently active lock */", - " getCurrentLock: () => Lock | null;", + "interface ItemsMapParams {", + " getId: (item: TItem) => TId;", + " complexIds?: boolean;", "}" ] }, "props": [ { - "uid": "acquire", - "name": "acquire", - "comment": { - "raw": [ - "Tries to take a lock, and sets tryRelease callback, which will be invoked when something tries to take control over.", - " If a lock already exists, it tries to release the current lock and then set a new one" - ] - }, + "uid": "getId", + "name": "getId", "typeValue": { - "raw": "(tryRelease: () => Promise) => Promise" + "raw": "(item: TItem) => TId" }, "editor": { "type": "func" @@ -17965,15 +20940,118 @@ "required": true }, { - "uid": "release", - "name": "release", + "uid": "complexIds", + "name": "complexIds", + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:ItemsStorageParams": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "ItemsStorageParams", + "nameFull": "ItemsStorageParams" + }, + "src": "uui-core/src/data/processing/views/tree/ItemsStorage.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "ItemsStorageParams", + "print": [ + "interface ItemsStorageParams {", + " items?: TItem[];", + " params: ItemsMapParams;", + "}" + ] + }, + "props": [ + { + "uid": "items", + "name": "items", + "typeValue": { + "raw": "TItem[]" + }, + "required": false + }, + { + "uid": "params", + "name": "params", + "typeValue": { + "raw": "ItemsMapParams" + }, + "required": true + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:ITree": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "ITree", + "nameFull": "ITree" + }, + "src": "uui-core/src/data/processing/views/tree/ITree.ts", + "comment": { + "raw": [ + "Proxy interface for a tree-like structure.", + " It is library/data-structure shape agnostic.", + " It provides a flexible way to represent existing data in a tree-like shape for the UUI internal usage, without repacking data in some specific form." + ] + }, + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "ITree", + "print": [ + "/**", + " * Proxy interface for a tree-like structure.", + " * It is library/data-structure shape agnostic.", + " * It provides a flexible way to represent existing data in a tree-like shape for the UUI internal usage, without repacking data in some specific form.", + " */", + "interface ITree {", + " /**", + " * Provides a tree configuration.", + " */", + " getParams(): ITreeParams;", + " /**", + " * Provides item's children and count/totalCount/assumedCount/status of its node.", + " * @param parentId - id of an item, which children info should be returned.", + " */", + " getItems(parentId?: TId): ITreeItemsInfo;", + " /**", + " * Item getter. Provides access to the item by its ID.", + " * @param id - ID of an item to be returned.", + " */", + " getById(id: TId): TItem | typeof NOT_FOUND_RECORD;", + "}" + ] + }, + "props": [ + { + "uid": "getParams", + "name": "getParams", "comment": { "raw": [ - "Releases lock without calling tryRelease callback" + "Provides a tree configuration." ] }, "typeValue": { - "raw": "(lock: object) => void" + "raw": "() => ITreeParams" }, "editor": { "type": "func" @@ -17981,15 +21059,16 @@ "required": true }, { - "uid": "withLock", - "name": "withLock", + "uid": "getItems", + "name": "getItems", "comment": { "raw": [ - "Tries to acquire a lock for the time while the action is being executed." + "Provides item's children and count/totalCount/assumedCount/status of its node.", + " @param parentId - id of an item, which children info should be returned." ] }, "typeValue": { - "raw": "(action: () => Promise) => Promise" + "raw": "(parentId?: TId | undefined) => ITreeItemsInfo" }, "editor": { "type": "func" @@ -17997,15 +21076,16 @@ "required": true }, { - "uid": "getCurrentLock", - "name": "getCurrentLock", + "uid": "getById", + "name": "getById", "comment": { "raw": [ - "Returns currently active lock" + "Item getter. Provides access to the item by its ID.", + " @param id - ID of an item to be returned." ] }, "typeValue": { - "raw": "() => Lock | null" + "raw": "(id: TId) => TItem | typeof NOT_FOUND_RECORD" }, "editor": { "type": "func" @@ -18016,247 +21096,296 @@ "propsFromUnion": false } }, - "@epam/uui-core:IMap": { + "@epam/uui-core:ITreeItemsInfo": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IMap", - "nameFull": "IMap" + "name": "ITreeItemsInfo", + "nameFull": "ITreeItemsInfo" + }, + "src": "uui-core/src/data/processing/views/tree/ITree.ts", + "comment": { + "raw": [ + "Items, status and state information, like count/assumedCount/totalCount of the ITree node." + ] }, - "src": "uui-core/src/types/objects.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "IMap", + "raw": "ITreeItemsInfo", "print": [ - "interface IMap {", - " constructor: Function;", - " [Symbol.iterator](): IterableIterator<[", - " TKey,", - " TValue", - " ]>;", - " get(key: TKey): TValue;", - " set(key: TKey, value: TValue): IMap;", - " has(key: TKey): boolean;", - " delete(key: TKey): boolean;", - " size: number;", + "/**", + " * Items, status and state information, like count/assumedCount/totalCount of the ITree node.", + " */", + "interface ITreeItemsInfo extends ITreeNodeInfo {", + " /**", + " * Tree node IDs.", + " */", + " ids: TId[];", + " /**", + " * ITree node loading/state status.", + " */", + " status: ITreeNodeStatus;", "}" ] }, "props": [ { - "uid": "constructor", - "name": "constructor", - "typeValue": { - "raw": "Function" + "uid": "ids", + "name": "ids", + "comment": { + "raw": [ + "Tree node IDs." + ] }, - "required": true - }, - { - "uid": "get", - "name": "get", "typeValue": { - "raw": "(key: TKey) => TValue" - }, - "editor": { - "type": "func" + "raw": "TId[]" }, "required": true }, { - "uid": "set", - "name": "set", - "typeValue": { - "raw": "(key: TKey, value: TValue) => IMap" - }, - "editor": { - "type": "func" + "uid": "status", + "name": "status", + "comment": { + "raw": [ + "ITree node loading/state status." + ] }, - "required": true - }, - { - "uid": "has", - "name": "has", "typeValue": { - "raw": "(key: TKey) => boolean" + "raw": "'FULLY_LOADED' | 'PARTIALLY_LOADED' | 'EMPTY'" }, + "typeValueRef": "@epam/uui-core:ITreeNodeStatus", "editor": { - "type": "func" + "type": "oneOf", + "options": [ + "FULLY_LOADED", + "PARTIALLY_LOADED", + "EMPTY" + ] }, "required": true }, { - "uid": "delete", - "name": "delete", + "uid": "count", + "name": "count", + "comment": { + "raw": [ + "Count of the records, returned from server or explicitly counted from data.", + " If undefined, not all data is loaded from server." + ] + }, "typeValue": { - "raw": "(key: TKey) => boolean" + "raw": "number" }, "editor": { - "type": "func" + "type": "number" }, - "required": true + "from": "@epam/uui-core:ITreeNodeInfo", + "required": false }, { - "uid": "size", - "name": "size", + "uid": "totalCount", + "name": "totalCount", + "comment": { + "raw": [ + "Total count of the records. Usually, is returned from server on a root node fetch." + ] + }, "typeValue": { "raw": "number" }, "editor": { "type": "number" }, - "required": true + "from": "@epam/uui-core:ITreeNodeInfo", + "required": false }, { - "uid": "[Symbol.iterator]", - "name": "[Symbol.iterator]", + "uid": "assumedCount", + "name": "assumedCount", + "comment": { + "raw": [ + "Assumed count, got from the `getChildCount` result." + ] + }, "typeValue": { - "raw": "() => IterableIterator<[TKey, TValue]>" + "raw": "number" }, "editor": { - "type": "func" + "type": "number" }, - "required": true + "from": "@epam/uui-core:ITreeNodeInfo", + "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:IModal": { + "@epam/uui-core:ITreeLoadResult": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IModal", - "nameFull": "IModal" + "name": "ITreeLoadResult", + "nameFull": "ITreeLoadResult" + }, + "src": "uui-core/src/data/processing/views/tree/Tree.ts", + "comment": { + "raw": [ + "Structured result of tree records loading." + ] }, - "src": "uui-core/src/types/props.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "IModal", + "raw": "ITreeLoadResult", "print": [ - "interface IModal {", - " /** Indicates whether the modal is currently displayed */", - " isActive?: boolean;", - " /** Unique key of the modal */", - " key: string;", - " /** Modal zIndex value. Calculated via LayoutContext. */", - " zIndex: number;", - " /** Call to successfully close the modal. It's resolves `modalContext.show()` promise with provided value. */", - " success(result: TResult): void;", - " /** Call to close the modal with abort action. It's rejects `modalContext.show()` promise with provided value. */", - " abort(result?: any): void;", - " /** Parameters that provided via second param of `modalContext.show` method */", - " parameters?: TParameters;", - " /** Depth of current modal layer */", - " depth?: number;", + "/**", + " * Structured result of tree records loading.", + " */", + "interface ITreeLoadResult {", + " /**", + " * Loaded records.", + " */", + " loadedItems: TItem[];", + " /**", + " * Loaded records, structured by parents IDs.", + " */", + " byParentId: IMap;", + " /**", + " * Loading node info, like count/assumedCount/totalCount, by IDs.", + " */", + " nodeInfoById: IMap;", "}" ] }, "props": [ { - "uid": "isActive", - "name": "isActive", + "uid": "loadedItems", + "name": "loadedItems", "comment": { "raw": [ - "Indicates whether the modal is currently displayed" + "Loaded records." ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "TItem[]" }, - "required": false + "required": true }, { - "uid": "key", - "name": "key", + "uid": "byParentId", + "name": "byParentId", "comment": { "raw": [ - "Unique key of the modal" + "Loaded records, structured by parents IDs." ] }, "typeValue": { - "raw": "string" - }, - "editor": { - "type": "string" + "raw": "IMap" }, "required": true }, { - "uid": "zIndex", - "name": "zIndex", + "uid": "nodeInfoById", + "name": "nodeInfoById", "comment": { "raw": [ - "Modal zIndex value. Calculated via LayoutContext." + "Loading node info, like count/assumedCount/totalCount, by IDs." ] }, "typeValue": { - "raw": "number" - }, - "editor": { - "type": "number" + "raw": "IMap" }, "required": true - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:ITreeNodeInfo": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "ITreeNodeInfo", + "nameFull": "ITreeNodeInfo" + }, + "src": "uui-core/src/data/processing/views/tree/treeStructure/types.ts", + "comment": { + "raw": [ + "Info of the tree node." + ] + }, + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "ITreeNodeInfo", + "print": [ + "/**", + " * Info of the tree node.", + " */", + "interface ITreeNodeInfo {", + " /**", + " * Count of the records, returned from server or explicitly counted from data.", + " * If undefined, not all data is loaded from server.", + " */", + " count?: number;", + " /**", + " * Total count of the records. Usually, is returned from server on a root node fetch.", + " */", + " totalCount?: number;", + " /**", + " * Assumed count, got from the `getChildCount` result.", + " */", + " assumedCount?: number;", + "}" + ] + }, + "props": [ { - "uid": "success", - "name": "success", + "uid": "count", + "name": "count", "comment": { "raw": [ - "Call to successfully close the modal. It's resolves `modalContext.show()` promise with provided value." + "Count of the records, returned from server or explicitly counted from data.", + " If undefined, not all data is loaded from server." ] }, "typeValue": { - "raw": "(result: TResult) => void" + "raw": "number" }, "editor": { - "type": "func" + "type": "number" }, - "required": true + "required": false }, { - "uid": "abort", - "name": "abort", + "uid": "totalCount", + "name": "totalCount", "comment": { "raw": [ - "Call to close the modal with abort action. It's rejects `modalContext.show()` promise with provided value." + "Total count of the records. Usually, is returned from server on a root node fetch." ] }, "typeValue": { - "raw": "(result?: any) => void" + "raw": "number" }, "editor": { - "type": "func" - }, - "required": true - }, - { - "uid": "parameters", - "name": "parameters", - "comment": { - "raw": [ - "Parameters that provided via second param of `modalContext.show` method" - ] - }, - "typeValue": { - "raw": "TParameters" + "type": "number" }, "required": false }, { - "uid": "depth", - "name": "depth", + "uid": "assumedCount", + "name": "assumedCount", "comment": { "raw": [ - "Depth of current modal layer" + "Assumed count, got from the `getChildCount` result." ] }, "typeValue": { @@ -18271,60 +21400,90 @@ "propsFromUnion": false } }, - "@epam/uui-core:IModalContext": { + "@epam/uui-core:ITreeNodeStatus": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IModalContext", - "nameFull": "IModalContext" + "name": "ITreeNodeStatus", + "nameFull": "ITreeNodeStatus" + }, + "src": "uui-core/src/data/processing/views/tree/ITree.ts", + "comment": { + "raw": [ + "ITree node loading/state status." + ] + }, + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "'FULLY_LOADED' | 'PARTIALLY_LOADED' | 'EMPTY'", + "print": [ + "/**", + " * ITree node loading/state status.", + " */", + "type ITreeNodeStatus = typeof FULLY_LOADED | typeof PARTIALLY_LOADED | typeof EMPTY;" + ] + } + } + }, + "@epam/uui-core:ITreeParams": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "ITreeParams", + "nameFull": "ITreeParams" + }, + "src": "uui-core/src/data/processing/views/tree/treeStructure/types.ts", + "comment": { + "raw": [ + "ITree configuration." + ] }, - "src": "uui-core/src/types/contexts.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "IModalContext", + "raw": "ITreeParams", "print": [ - "interface IModalContext extends IBaseContext {", - " /** Shows provided modal component with defined params */", - " show(render: (props: IModal) => React.ReactNode, parameters?: TParameters): Promise;", - " /** Removes all active modals */", - " closeAll(): void;", - " /** Returns true, if some modal displayed */", - " isModalOperationActive(): boolean;", - " /** Returns all active modals */", - " getOperations(): ModalOperation[];", + "/**", + " * ITree configuration.", + " */", + "interface ITreeParams {", + " /**", + " * Item ID getter.", + " */", + " getId(item: TItem): TId;", + " /**", + " * Item parent ID getter.", + " */", + " getParentId?(item: TItem): TId | undefined;", + " /**", + " * Item child count getter.", + " * @param item - item, which children count should be returned.", + " * @returns assumed children count. If unknown, it is better to return 1.", + " */", + " getChildCount?(item: TItem): number;", + " /**", + " * Enables support of ids of types Object, Array, etc.", + " */", + " complexIds?: boolean;", "}" ] }, "props": [ { - "uid": "show", - "name": "show", - "comment": { - "raw": [ - "Shows provided modal component with defined params" - ] - }, - "typeValue": { - "raw": "(render: (props: IModal) => React.ReactNode, parameters?: TParameters | undefined) => Promise" - }, - "editor": { - "type": "func" - }, - "required": true - }, - { - "uid": "closeAll", - "name": "closeAll", + "uid": "getId", + "name": "getId", "comment": { "raw": [ - "Removes all active modals" + "Item ID getter." ] }, "typeValue": { - "raw": "() => void" + "raw": "(item: TItem) => TId" }, "editor": { "type": "func" @@ -18332,194 +21491,251 @@ "required": true }, { - "uid": "isModalOperationActive", - "name": "isModalOperationActive", + "uid": "getParentId", + "name": "getParentId", "comment": { "raw": [ - "Returns true, if some modal displayed" + "Item parent ID getter." ] }, "typeValue": { - "raw": "() => boolean" + "raw": "(item: TItem) => TId | undefined" }, "editor": { "type": "func" }, - "required": true + "required": false }, { - "uid": "getOperations", - "name": "getOperations", + "uid": "getChildCount", + "name": "getChildCount", "comment": { "raw": [ - "Returns all active modals" + "Item child count getter.", + " @param item - item, which children count should be returned.", + " @returns assumed children count. If unknown, it is better to return 1." ] }, "typeValue": { - "raw": "() => ModalOperation[]" + "raw": "(item: TItem) => number" }, "editor": { "type": "func" }, - "required": true + "required": false }, { - "uid": "subscribe", - "name": "subscribe", + "uid": "complexIds", + "name": "complexIds", "comment": { "raw": [ - "Add your handler, which will be called on context updates" + "Enables support of ids of types Object, Array, etc." ] }, "typeValue": { - "raw": "(handler: (state: {}) => void) => void" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "from": "@epam/uui-core:IBaseContext", - "required": true - }, + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:IUserSettingsContext": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "IUserSettingsContext", + "nameFull": "IUserSettingsContext" + }, + "src": "uui-core/src/types/contexts.ts", + "comment": { + "raw": [ + "Save data to the localStorage" + ] + }, + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "IUserSettingsContext", + "print": [ + "/** Save data to the localStorage */", + "interface IUserSettingsContext {", + " /** Gets value by key from localStorage */", + " get(key: any, initial?: TValue): TValue;", + " /** Sets value by key from localStorage */", + " set(key: any, value: TValue): void;", + "}" + ] + }, + "props": [ { - "uid": "unsubscribe", - "name": "unsubscribe", + "uid": "get", + "name": "get", "comment": { "raw": [ - "Unsubscribe from context updates" + "Gets value by key from localStorage" ] }, "typeValue": { - "raw": "(handler: (state: {}) => void) => void" + "raw": "(key: any, initial?: TValue | undefined) => TValue" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:IBaseContext", "required": true }, { - "uid": "destroyContext", - "name": "destroyContext", + "uid": "set", + "name": "set", "comment": { "raw": [ - "Manually destroy context and unsubscribe from all listeners" + "Sets value by key from localStorage" ] }, "typeValue": { - "raw": "() => void" + "raw": "(key: any, value: TValue) => void" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:IBaseContext", "required": true } ], "propsFromUnion": false } }, - "@epam/uui-core:INotification": { + "@epam/uui-core:LabeledInputCoreProps": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "INotification", - "nameFull": "INotification" + "name": "LabeledInputCoreProps", + "nameFull": "LabeledInputCoreProps" }, - "src": "uui-core/src/types/props.ts", + "src": "uui-core/src/types/components/LabeledInput.tsx", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "INotification", + "raw": "LabeledInputCoreProps", "print": [ - "interface INotification {", - " /** Call to close the notification with abort action. It's rejects `notificationContext.show()` promise. */", - " onClose?(): void;", - " /** Call to close the notification with success action. It's resolved `notificationContext.show()` promise. */", - " onSuccess?(): void;", - " /** Cancel notification closing timer */", - " clearTimer?(): void;", - " /** Reinitialize notification closing timer. It will be set to the provided notification duration. */", - " refreshTimer?(): void;", - " /** Unique id of the notification */", - " id: number;", - " /** Unique key of the notification */", - " key: string;", + "interface LabeledInputCoreProps extends ICanBeInvalid, IHasCX, IHasLabel, IHasChildren, ICanBeRequired, IHasValidationMessage, IHasRawProps>, IHasForwardedRef {", + " /** Position of the label, relative to the wrapped component (top of left) */", + " labelPosition?: 'top' | 'left';", + " /** Info hint text to show in tooltip */", + " info?: ReactNode;", + " /** Marks related field as optional */", + " isOptional?: boolean;", + " /** HTML 'for' tag to bind the label to a component.", + " * Can be used when component can't be wrapped by the LabeledInput, e.g. when form is layed out as table with labels and inputs placed into different columns", + " */", + " htmlFor?: string;", + " /** A value from LabeledInput children */", + " value?: any;", + " /** Maximum text length, in characters */", + " maxLength?: number;", + " /** Showing current text length, in characters and maxLength */", + " charCounter?: boolean;", + " /** Additional info positioned at the bottom of LabeledInput */", + " footnote?: ReactNode;", + " /** Additional info positioned to the right side of label */", + " sidenote?: ReactNode;", "}" ] }, "props": [ { - "uid": "onClose", - "name": "onClose", + "uid": "labelPosition", + "name": "labelPosition", "comment": { "raw": [ - "Call to close the notification with abort action. It's rejects `notificationContext.show()` promise." + "Position of the label, relative to the wrapped component (top of left)" ] }, "typeValue": { - "raw": "() => void" + "raw": "'left' | 'top'" }, "editor": { - "type": "func" + "type": "oneOf", + "options": [ + "left", + "top" + ] }, "required": false }, { - "uid": "onSuccess", - "name": "onSuccess", + "uid": "info", + "name": "info", "comment": { "raw": [ - "Call to close the notification with success action. It's resolved `notificationContext.show()` promise." + "Info hint text to show in tooltip" ] }, "typeValue": { - "raw": "() => void" - }, - "editor": { - "type": "func" + "raw": "React.ReactNode" }, + "typeValueRef": "@types/react:ReactNode", "required": false }, { - "uid": "clearTimer", - "name": "clearTimer", + "uid": "isOptional", + "name": "isOptional", "comment": { "raw": [ - "Cancel notification closing timer" + "Marks related field as optional" ] }, "typeValue": { - "raw": "() => void" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, "required": false }, { - "uid": "refreshTimer", - "name": "refreshTimer", + "uid": "htmlFor", + "name": "htmlFor", "comment": { "raw": [ - "Reinitialize notification closing timer. It will be set to the provided notification duration." + "HTML 'for' tag to bind the label to a component.", + " Can be used when component can't be wrapped by the LabeledInput, e.g. when form is layed out as table with labels and inputs placed into different columns" ] }, "typeValue": { - "raw": "() => void" + "raw": "string" }, "editor": { - "type": "func" + "type": "string" }, "required": false }, { - "uid": "id", - "name": "id", + "uid": "value", + "name": "value", "comment": { "raw": [ - "Unique id of the notification" + "A value from LabeledInput children" + ] + }, + "typeValue": { + "raw": "any" + }, + "required": false + }, + { + "uid": "maxLength", + "name": "maxLength", + "comment": { + "raw": [ + "Maximum text length, in characters" ] }, "typeValue": { @@ -18528,230 +21744,210 @@ "editor": { "type": "number" }, - "required": true + "required": false }, { - "uid": "key", - "name": "key", + "uid": "charCounter", + "name": "charCounter", "comment": { "raw": [ - "Unique key of the notification" + "Showing current text length, in characters and maxLength" ] }, "typeValue": { - "raw": "string" + "raw": "boolean" }, "editor": { - "type": "string" + "type": "bool" }, - "required": true - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:INotificationContext": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "INotificationContext", - "nameFull": "INotificationContext" - }, - "src": "uui-core/src/types/contexts.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "INotificationContext", - "print": [ - "interface INotificationContext extends IBaseContext {", - " /** Shows provided notification component with defined params */", - " show(render: (props: INotification) => React.ReactNode, notificationParams?: NotificationParams): Promise;", - " /** Returns all active notifications */", - " getNotifications(): NotificationOperation[];", - " /** Removes notification by their id */", - " remove(id: number): void;", - " /** Removes all active notification */", - " clearAll(): void;", - "}" - ] - }, - "props": [ + "required": false + }, { - "uid": "show", - "name": "show", + "uid": "footnote", + "name": "footnote", "comment": { "raw": [ - "Shows provided notification component with defined params" + "Additional info positioned at the bottom of LabeledInput" ] }, "typeValue": { - "raw": "(render: (props: INotification) => React.ReactNode, notificationParams?: NotificationParams | undefined) => Promise" + "raw": "React.ReactNode" }, - "editor": { - "type": "func" + "typeValueRef": "@types/react:ReactNode", + "required": false + }, + { + "uid": "sidenote", + "name": "sidenote", + "comment": { + "raw": [ + "Additional info positioned to the right side of label" + ] }, - "required": true + "typeValue": { + "raw": "React.ReactNode" + }, + "typeValueRef": "@types/react:ReactNode", + "required": false }, { - "uid": "getNotifications", - "name": "getNotifications", + "uid": "isInvalid", + "name": "isInvalid", "comment": { "raw": [ - "Returns all active notifications" + "True if component contains invalid input" ] }, "typeValue": { - "raw": "() => NotificationOperation[]" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "required": true + "from": "@epam/uui-core:ICanBeInvalid", + "required": false }, { - "uid": "remove", - "name": "remove", + "uid": "cx", + "name": "cx", "comment": { "raw": [ - "Removes notification by their id" + "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" ] }, "typeValue": { - "raw": "(id: number) => void" - }, - "editor": { - "type": "func" + "raw": "null | string | number | boolean | ClassDictionary | ClassArray" }, - "required": true + "typeValueRef": "@epam/uui-core:ClassValue", + "from": "@epam/uui-core:IHasCX", + "required": false }, { - "uid": "clearAll", - "name": "clearAll", + "uid": "label", + "name": "label", "comment": { "raw": [ - "Removes all active notification" + "Component label. Can be a string, or React.Element. Certain components supports minimal markup (,,) in labels." ] }, "typeValue": { - "raw": "() => void" + "raw": "React.ReactNode" }, - "editor": { - "type": "func" + "typeValueRef": "@types/react:ReactNode", + "from": "@epam/uui-core:IHasLabel", + "required": false + }, + { + "uid": "children", + "name": "children", + "comment": { + "raw": [ + "Component children" + ] }, - "required": true + "typeValue": { + "raw": "React.ReactNode" + }, + "typeValueRef": "@types/react:ReactNode", + "from": "@epam/uui-core:IHasChildren", + "required": false }, { - "uid": "subscribe", - "name": "subscribe", + "uid": "isRequired", + "name": "isRequired", "comment": { "raw": [ - "Add your handler, which will be called on context updates" + "Marks that component's value is required and shouldn't be empty" ] }, "typeValue": { - "raw": "(handler: (state: {}) => void) => void" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "from": "@epam/uui-core:IBaseContext", - "required": true + "from": "@epam/uui-core:ICanBeRequired", + "required": false }, { - "uid": "unsubscribe", - "name": "unsubscribe", + "uid": "validationMessage", + "name": "validationMessage", "comment": { "raw": [ - "Unsubscribe from context updates" + "Message describing why the value is invalid" ] }, "typeValue": { - "raw": "(handler: (state: {}) => void) => void" - }, - "editor": { - "type": "func" + "raw": "React.ReactNode" }, - "from": "@epam/uui-core:IBaseContext", - "required": true + "typeValueRef": "@types/react:ReactNode", + "from": "@epam/uui-core:IHasValidationMessage", + "required": false }, { - "uid": "destroyContext", - "name": "destroyContext", + "uid": "rawProps", + "name": "rawProps", "comment": { "raw": [ - "Manually destroy context and unsubscribe from all listeners" + "Any HTML attributes (native or 'data-') to put on the underlying component" ] }, "typeValue": { - "raw": "() => void" + "raw": "React.HTMLAttributes & Record<`data-${string}`, string>" }, - "editor": { - "type": "func" + "from": "@epam/uui-core:IHasRawProps", + "required": false + }, + { + "uid": "forwardedRef", + "name": "forwardedRef", + "comment": { + "raw": [ + "this ref is passed to the underlying component" + ] }, - "from": "@epam/uui-core:IBaseContext", - "required": true + "typeValue": { + "raw": "null | (instance: HTMLDivElement | null) => void | React.MutableRefObject" + }, + "from": "@epam/uui-core:IHasForwardedRef", + "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:IPickerToggler": { + "@epam/uui-core:LayoutLayer": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IPickerToggler", - "nameFull": "IPickerToggler" - }, - "src": "uui-core/src/types/pickers.ts", - "comment": { - "raw": [ - "Component can be used as Toggler control for pickers.", - " Only IDropdownToggler implementation is necessary for the picker to function.", - " Other props can be implemented for full-featured picker togglers." - ] + "name": "LayoutLayer", + "nameFull": "LayoutLayer" }, + "src": "uui-core/src/services/LayoutContext.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "IPickerToggler", + "raw": "LayoutLayer", "print": [ - "/**", - " * Component can be used as Toggler control for pickers.", - " * Only IDropdownToggler implementation is necessary for the picker to function.", - " * Other props can be implemented for full-featured picker togglers.", - " */", - "interface IPickerToggler extends IBasicPickerToggler, Partial>, Partial, Partial, Partial {", - " /** Array of selected rows */", - " selection?: DataRowProps[];", - " /** Amount of selected items */", - " selectedRowsCount?: number;", + "interface LayoutLayer {", + " /** ID of the layer */", + " id: number;", + " /** Level of the layer depth */", + " depth: number;", + " /** zIndex of the layer */", + " zIndex: number;", "}" ] }, "props": [ { - "uid": "selection", - "name": "selection", - "comment": { - "raw": [ - "Array of selected rows" - ] - }, - "typeValue": { - "raw": "DataRowProps[]" - }, - "required": false - }, - { - "uid": "selectedRowsCount", - "name": "selectedRowsCount", + "uid": "id", + "name": "id", "comment": { "raw": [ - "Amount of selected items" + "ID of the layer" ] }, "typeValue": { @@ -18760,793 +21956,974 @@ "editor": { "type": "number" }, - "required": false + "required": true }, { - "uid": "onClear", - "name": "onClear", + "uid": "depth", + "name": "depth", "comment": { "raw": [ - "Call to clear toggler value" + "Level of the layer depth" ] }, "typeValue": { - "raw": "(e?: any) => void" + "raw": "number" }, "editor": { - "type": "func" + "type": "number" }, - "from": "@epam/uui-core:IBasicPickerToggler", - "required": false + "required": true }, { - "uid": "toggleDropdownOpening", - "name": "toggleDropdownOpening", + "uid": "zIndex", + "name": "zIndex", "comment": { "raw": [ - "Called when associated dropdown should open or close" + "zIndex of the layer" ] }, "typeValue": { - "raw": "(value: boolean) => void" + "raw": "number" }, "editor": { - "type": "func" + "type": "number" }, - "from": "@epam/uui-core:IDropdownTogglerProps", - "required": false - }, + "required": true + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:LazyDataSourceApi": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "LazyDataSourceApi", + "nameFull": "LazyDataSourceApi" + }, + "src": "uui-core/src/types/dataSources.ts", + "comment": { + "raw": [ + "Defines API to retrieve data for DataSources" + ] + }, + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "LazyDataSourceApi", + "print": [ + "/** Defines API to retrieve data for DataSources */", + "type LazyDataSourceApi = (", + "/** Defines input arguments for Lazy Data Source APIs */", + "request: LazyDataSourceApiRequest, ", + "/** Defines the context of API request. */", + "context?: LazyDataSourceApiRequestContext) => Promise>;" + ] + } + } + }, + "@epam/uui-core:LazyDataSourceApiRequest": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "LazyDataSourceApiRequest", + "nameFull": "LazyDataSourceApiRequest" + }, + "src": "uui-core/src/types/dataSources.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "LazyDataSourceApiRequest", + "print": [ + "/** Defines input arguments for Lazy Data Source APIs */", + "// eslint-disable-next-line @typescript-eslint/no-unused-vars", + "interface LazyDataSourceApiRequest {", + " /**", + " * The filter object, by which data should be filtered.", + " * It is a merged result of filters from DataSourceState and LazyDataSourceProps.", + " */", + " filter?: TFilter;", + " /** Sorting options, by which data should be sorted. */", + " sorting?: SortingOption[];", + " /** The search string, by which data should be searched. */", + " search?: string;", + " /** Specifies a range of the rows to be retrieved. */", + " range?: LazyDataSourceApiRequestRange;", + " /** Page number for which data should be retrieved. */", + " page?: number;", + " /** Number of items at the page. */", + " pageSize?: number;", + " /**", + " * An array of item IDs to be retrieved from the API.", + " * Other request options like filter, search and others should be ignored when IDs are provided.", + " * Used for requesting specific items separately from the list.", + " */", + " ids?: TId[];", + "}" + ] + }, + "props": [ { - "uid": "isInteractedOutside", - "name": "isInteractedOutside", + "uid": "filter", + "name": "filter", "comment": { "raw": [ - "Called when component is interacted outside, to close the dropdown" + "The filter object, by which data should be filtered.", + " It is a merged result of filters from DataSourceState and LazyDataSourceProps." ] }, "typeValue": { - "raw": "(event: Event) => boolean" - }, - "editor": { - "type": "func" + "raw": "TFilter" }, - "from": "@epam/uui-core:IDropdownTogglerProps", "required": false }, { - "uid": "ref", - "name": "ref", + "uid": "sorting", + "name": "sorting", "comment": { "raw": [ - "Toggler component ref" + "Sorting options, by which data should be sorted." ] }, "typeValue": { - "raw": "null | (instance: any) => void | React.RefObject" + "raw": "SortingOption[]" }, - "from": "@epam/uui-core:IDropdownTogglerProps", "required": false }, { - "uid": "isOpen", - "name": "isOpen", + "uid": "search", + "name": "search", "comment": { "raw": [ - "When isDropdown=true, indicate that dropdown is open with chevron icon" + "The search string, by which data should be searched." ] }, "typeValue": { - "raw": "boolean" + "raw": "string" }, "editor": { - "type": "bool" + "type": "string" }, - "from": "@epam/uui-core:IDropdownToggler", "required": false }, { - "uid": "isDropdown", - "name": "isDropdown", + "uid": "range", + "name": "range", "comment": { "raw": [ - "Shows chevron icon, enabling component to act as dropdown toggler" + "Specifies a range of the rows to be retrieved." ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "LazyDataSourceApiRequestRange" }, - "from": "@epam/uui-core:IDropdownToggler", "required": false }, { - "uid": "onClick", - "name": "onClick", + "uid": "page", + "name": "page", "comment": { "raw": [ - "Called when component is clicked" + "Page number for which data should be retrieved." ] }, "typeValue": { - "raw": "(e?: any) => void" + "raw": "number" }, "editor": { - "type": "func" + "type": "number" }, - "from": "@epam/uui-core:IClickable", "required": false }, { - "uid": "isInvalid", - "name": "isInvalid", + "uid": "pageSize", + "name": "pageSize", "comment": { "raw": [ - "True if component contains invalid input" + "Number of items at the page." ] }, "typeValue": { - "raw": "boolean" + "raw": "number" }, "editor": { - "type": "bool" + "type": "number" }, - "from": "@epam/uui-core:ICanBeInvalid", "required": false }, { - "uid": "isDisabled", - "name": "isDisabled", + "uid": "ids", + "name": "ids", "comment": { "raw": [ - "Disable editing, and visually de-emphasize value of the component" + "An array of item IDs to be retrieved from the API.", + " Other request options like filter, search and others should be ignored when IDs are provided.", + " Used for requesting specific items separately from the list." ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "TId[]" }, - "from": "@epam/uui-core:IDisableable", "required": false - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:LazyDataSourceApiRequestContext": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "LazyDataSourceApiRequestContext", + "nameFull": "LazyDataSourceApiRequestContext" + }, + "src": "uui-core/src/types/dataSources.ts", + "comment": { + "raw": [ + "Defines the context of API request. E.g. parent if we require to retrieve sub-list of the tree" + ] + }, + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "LazyDataSourceApiRequestContext", + "print": [ + "/** Defines the context of API request. E.g. parent if we require to retrieve sub-list of the tree */", + "interface LazyDataSourceApiRequestContext {", + " /**", + " * The ID of the parent item whose children are being requested.", + " * Used for lazy-loading data in tree lists.", + " */", + " parentId?: TId | null;", + " /** The parent entity whose children are being requested */", + " parent?: TItem | null;", + "}" + ] + }, + "props": [ { - "uid": "isReadonly", - "name": "isReadonly", + "uid": "parentId", + "name": "parentId", "comment": { "raw": [ - "Disable editing. Unlike isDisabled, keep component's value readable." + "The ID of the parent item whose children are being requested.", + " Used for lazy-loading data in tree lists." ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "null | TId" }, - "from": "@epam/uui-core:ICanBeReadonly", "required": false }, { - "uid": "isRequired", - "name": "isRequired", + "uid": "parent", + "name": "parent", "comment": { "raw": [ - "Marks that component's value is required and shouldn't be empty" + "The parent entity whose children are being requested" ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "null | TItem" }, - "from": "@epam/uui-core:ICanBeRequired", "required": false - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:LazyDataSourceApiRequestRange": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "LazyDataSourceApiRequestRange", + "nameFull": "LazyDataSourceApiRequestRange" + }, + "src": "uui-core/src/types/dataSources.ts", + "comment": { + "raw": [ + "The range (from/count) of required rows for LazyDataSourceApiRequest" + ] + }, + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "LazyDataSourceApiRequestRange", + "print": [ + "// Lazy Data Source API", + "/** The range (from/count) of required rows for LazyDataSourceApiRequest */", + "interface LazyDataSourceApiRequestRange {", + " /** Element index to fetch from. */", + " from: number;", + " /** Count of elements to be retrieved. */", + " count?: number;", + "}" + ] + }, + "props": [ { - "uid": "value", - "name": "value", + "uid": "from", + "name": "from", "comment": { "raw": [ - "The current value of component" + "Element index to fetch from." ] }, "typeValue": { - "raw": "string" + "raw": "number" }, "editor": { - "type": "string" + "type": "number" }, - "from": "@epam/uui-core:IControlled", - "required": false + "required": true }, { - "uid": "onValueChange", - "name": "onValueChange", + "uid": "count", + "name": "count", "comment": { "raw": [ - "Called when value needs to be changed (usually due to user interaction)" + "Count of elements to be retrieved." ] }, "typeValue": { - "raw": "(newValue: string) => void" + "raw": "number" }, "editor": { - "type": "func" - }, - "from": "@epam/uui-core:IControlled", - "required": false - }, - { - "uid": "placeholder", - "name": "placeholder", - "comment": { - "raw": [ - "Placeholder to display when empty" - ] - }, - "typeValue": { - "raw": "any" + "type": "number" }, - "from": "@epam/uui-core:IHasPlaceholder", "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:IPresetsApi": { + "@epam/uui-core:LazyDataSourceApiResponse": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "IPresetsApi", - "nameFull": "IPresetsApi" + "name": "LazyDataSourceApiResponse", + "nameFull": "LazyDataSourceApiResponse" + }, + "src": "uui-core/src/types/dataSources.ts", + "comment": { + "raw": [ + "Defines Lazy Data Source APIs response shape" + ] }, - "src": "uui-core/src/types/tables.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "IPresetsApi", + "raw": "LazyDataSourceApiResponse", "print": [ - "interface IPresetsApi {", - " /** ID of selected preset */", - " activePresetId: number | null;", - " /** Function that selects given preset */", - " choosePreset(preset: ITablePreset): void;", - " /** Function that gives preset name and create new preset with this name and current table state */", - " createNewPreset(name: string): Promise;", - " /** Function that gives preset and return if this preset changed or not */", - " hasPresetChanged(preset: ITablePreset): boolean;", - " /** Function that gives the preset and creat their duplicate */", - " duplicatePreset(preset: ITablePreset): void;", - " /** Function that deletes given preset */", - " deletePreset(preset: ITablePreset): Promise;", - " /** Function that updates given preset */", - " updatePreset(preset: ITablePreset): Promise;", - " /** Function that gives preset and return URL link on given preset */", - " getPresetLink(preset: ITablePreset): string;", - " /** Array of presets */", - " presets: ITablePreset[];", + "/** Defines Lazy Data Source APIs response shape */", + "interface LazyDataSourceApiResponse {", + " /** List of items which was requested via API */", + " items: TItem[];", + " /**", + " * API can set 'from' field if it wants to return more items than what was requested in request.range.", + " * This can be used to return all items at once (with from:0, count: totalCount), or align response to pages.", + " */", + " from?: number;", + " /**", + " * Total count of items which match current filter and pagination.", + " * If not specified, total count will be detected only when user scrolls to the end of the list.", + " */", + " count?: number;", + " /**", + " * Total count of items which match current filter.", + " */", + " totalCount?: number;", "}" ] }, "props": [ { - "uid": "activePresetId", - "name": "activePresetId", - "comment": { - "raw": [ - "ID of selected preset" - ] - }, - "typeValue": { - "raw": "null | number" - }, - "editor": { - "type": "number" - }, - "required": false - }, - { - "uid": "choosePreset", - "name": "choosePreset", + "uid": "items", + "name": "items", "comment": { "raw": [ - "Function that selects given preset" + "List of items which was requested via API" ] }, "typeValue": { - "raw": "(preset: ITablePreset) => void" - }, - "editor": { - "type": "func" + "raw": "TItem[]" }, "required": true }, { - "uid": "createNewPreset", - "name": "createNewPreset", + "uid": "from", + "name": "from", "comment": { "raw": [ - "Function that gives preset name and create new preset with this name and current table state" + "API can set 'from' field if it wants to return more items than what was requested in request.range.", + " This can be used to return all items at once (with from:0, count: totalCount), or align response to pages." ] }, "typeValue": { - "raw": "(name: string) => Promise" + "raw": "number" }, "editor": { - "type": "func" + "type": "number" }, - "required": true + "required": false }, { - "uid": "hasPresetChanged", - "name": "hasPresetChanged", + "uid": "count", + "name": "count", "comment": { "raw": [ - "Function that gives preset and return if this preset changed or not" + "Total count of items which match current filter and pagination.", + " If not specified, total count will be detected only when user scrolls to the end of the list." ] }, "typeValue": { - "raw": "(preset: ITablePreset) => boolean" + "raw": "number" }, "editor": { - "type": "func" + "type": "number" }, - "required": true + "required": false }, { - "uid": "duplicatePreset", - "name": "duplicatePreset", + "uid": "totalCount", + "name": "totalCount", "comment": { "raw": [ - "Function that gives the preset and creat their duplicate" + "Total count of items which match current filter." ] }, "typeValue": { - "raw": "(preset: ITablePreset) => void" + "raw": "number" }, "editor": { - "type": "func" + "type": "number" }, - "required": true - }, + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:LazyDataSourceProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "LazyDataSourceProps", + "nameFull": "LazyDataSourceProps" + }, + "src": "uui-core/src/data/processing/LazyDataSource.tsx", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "LazyDataSourceProps", + "print": [ + "interface LazyDataSourceProps extends LazyListViewProps {", + "}" + ] + }, + "props": [ { - "uid": "deletePreset", - "name": "deletePreset", + "uid": "getId", + "name": "getId", "comment": { "raw": [ - "Function that deletes given preset" + "Should return unique ID of the TItem", + " If omitted, we assume that every TItem has and unique id in its 'id' field.", + " @param item - record, which id should be returned.", + " @returns item id." ] }, "typeValue": { - "raw": "(preset: ITablePreset) => Promise" + "raw": "(item: TItem) => TId" }, "editor": { "type": "func" }, - "required": true + "from": "@epam/uui-core:BaseDataSourceConfig", + "required": false }, { - "uid": "updatePreset", - "name": "updatePreset", + "uid": "complexIds", + "name": "complexIds", "comment": { "raw": [ - "Function that updates given preset" + "Set to true, if you use IDs which can't act as javascript Map key (objects or arrays).", + " In this case, IDs will be internally JSON.stringify-ed to be used as Maps keys." ] }, "typeValue": { - "raw": "(preset: ITablePreset) => Promise" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "required": true + "from": "@epam/uui-core:BaseDataSourceConfig", + "required": false }, { - "uid": "getPresetLink", - "name": "getPresetLink", + "uid": "getParentId", + "name": "getParentId", "comment": { "raw": [ - "Function that gives preset and return URL link on given preset" + "Should return ID of the Item's parent. Usually it's i => i.parentId.", + " If specified, Data Source will build items hierarchy.", + "", + " Also, it is used by LazyDataSource to pre-fetch missing parents of loaded items. This is required in following cases:", + " - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain", + " to highlight parents with selected children", + " - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),", + " We need to load parents with a separate call (if backend doesn't pre-fetch them)", + "", + " @param item - record, which paretnId should be returned.", + " @returns item parentId." ] }, "typeValue": { - "raw": "(preset: ITablePreset) => string" + "raw": "(item: TItem) => TId | undefined" }, "editor": { "type": "func" }, - "required": true + "from": "@epam/uui-core:BaseDataSourceConfig", + "required": false }, { - "uid": "presets", - "name": "presets", + "uid": "rowOptions", + "name": "rowOptions", "comment": { "raw": [ - "Array of presets" + "Specifies if rows are selectable, checkable, draggable, clickable, and more.", + " See DataRowOptions for more details.", + " If options depends on the item itself, use getRowOptions.", + " Specifying both rowOptions and getRowOptions might help to render better loading skeletons: we use only rowOptions in this case, as we haven't loaded an item yet.", + " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", + " @param item An item to get options for" ] }, "typeValue": { - "raw": "ITablePreset[]" + "raw": "DataRowOptions" }, - "required": true - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:IProcessRequest": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "IProcessRequest", - "nameFull": "IProcessRequest" - }, - "src": "uui-core/src/services/ApiContext.ts", - "exported": true - }, - "details": { - "kind": 265, - "typeValue": { - "raw": "IProcessRequest", - "print": [ - "type IProcessRequest = (url: string, method: string, data?: any, options?: ApiCallOptions) => Promise;" - ] - } - } - }, - "@epam/uui-core:IRouter6": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "IRouter6", - "nameFull": "IRouter6" - }, - "src": "uui-core/src/services/routing/interfaces/IRouter6.ts", - "comment": { - "raw": [ - "From: react-router version 6.14.0", - "", - " The type definition of the IRouter6 is not complete (It's OK as long as we only use a subset of its API)", - "", - " NOTE: Complete definitions of the router is located in @remix-run/router:", - " https://github.com/remix-run/react-router/blob/main/packages/router/router.ts#L57" - ] - }, - "exported": true - }, - "details": { - "kind": 265, - "typeValue": { - "raw": "IRouter6", - "print": [ - "/**", - " * From: react-router version 6.14.0", - " *", - " * The type definition of the IRouter6 is not complete (It's OK as long as we only use a subset of its API)", - " *", - " * NOTE: Complete definitions of the router is located in @remix-run/router:", - " * https://github.com/remix-run/react-router/blob/main/packages/router/router.ts#L57", - " */", - "type IRouter6 = {", - " state: RouterState;", - " navigate(to: To | null, opts?: RouterNavigateOptions): Promise;", - " navigate(to: number): Promise;", - " getBlocker: (key: string, fn: BlockerFunction) => unknown;", - " subscribe: (fn: (state: RouterState) => void) => () => void;", - " deleteBlocker: (key: string) => void;", - " createHref(location: Location | URL): string;", - "};" - ] - }, - "props": [ + "from": "@epam/uui-core:BaseDataSourceConfig", + "required": false + }, { - "uid": "state", - "name": "state", + "uid": "getRowOptions", + "name": "getRowOptions", + "comment": { + "raw": [ + "For each row, specify if row is selectable, editable, checkable, draggable, clickable, have its own set of columns, and more.", + " To make rows editable, pass IEditable interface to each row. This works the same way as for other editable components.", + " See DataRowOptions for more details.", + " If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.", + " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", + " @param item - record, configuration should be returned for.", + " @param index - index of a row. It is optional and should not be expected, that it is provided on every call." + ] + }, "typeValue": { - "raw": "RouterState" + "raw": "(item: TItem, index?: number | undefined) => DataRowOptions" }, - "typeValueRef": "@epam/uui-core:RouterState", - "required": true + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:BaseDataSourceConfig", + "required": false }, { - "uid": "navigate", - "name": "navigate", + "uid": "isFoldedByDefault", + "name": "isFoldedByDefault", + "comment": { + "raw": [ + "Can be specified to unfold all or some items at start.", + " If not specified, all rows would be folded.", + " @param item - record, folding value should be returned for.", + " @param dataSourceState - dataSource state with current `foldAll` value. It provides the possibility to respect foldAll change, if `isFoldedByDefault` is implemented." + ] + }, "typeValue": { - "raw": "{ (to: To | null, opts?: RouterNavigateOptions | undefined): Promise; (to: number): Promise; }" + "raw": "(item: TItem, state: DataSourceState) => boolean" }, "editor": { "type": "func" }, - "required": true + "from": "@epam/uui-core:BaseDataSourceConfig", + "required": false }, { - "uid": "getBlocker", - "name": "getBlocker", + "uid": "cascadeSelection", + "name": "cascadeSelection", + "comment": { + "raw": [ + "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.", + " - false: All nodes are selected independently (default).", + " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.", + " - 'implicit': Selecting a parent node means that all children are considered checked.", + " The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked", + " parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,", + " its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last", + " unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked." + ] + }, "typeValue": { - "raw": "(key: string, fn: BlockerFunction) => unknown" + "raw": "boolean | 'implicit' | 'explicit'" }, "editor": { - "type": "func" + "type": "oneOf", + "options": [ + false, + true, + "implicit", + "explicit" + ] }, - "required": true + "from": "@epam/uui-core:BaseDataSourceConfig", + "required": false }, { - "uid": "subscribe", - "name": "subscribe", + "uid": "selectAll", + "name": "selectAll", + "comment": { + "raw": [ + "Enables/disables selectAll functionality. If disabled explicitly, `selectAll`, returned from a view is null.", + " @default true" + ], + "tags": { + "@default": true + } + }, "typeValue": { - "raw": "(fn: (state: RouterState) => void) => () => void" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "required": true + "from": "@epam/uui-core:BaseDataSourceConfig", + "required": false }, { - "uid": "deleteBlocker", - "name": "deleteBlocker", + "uid": "showSelectedOnly", + "name": "showSelectedOnly", + "comment": { + "raw": [ + "Enables returning only selected rows and loading missing selected/checked rows, if it is required/possible.", + " If enabled, `useView` returns only selected rows from `IDataSourceView.getVisibleRows`." + ] + }, "typeValue": { - "raw": "(key: string) => void" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "required": true + "from": "@epam/uui-core:BaseDataSourceConfig", + "required": false }, { - "uid": "createHref", - "name": "createHref", + "uid": "patch", + "name": "patch", + "comment": { + "raw": [ + "Items, which should be added/updated/deleted from the tree." + ] + }, "typeValue": { - "raw": "(location: Location | URL) => string" + "raw": "IMap | IImmutableMap" + }, + "from": "@epam/uui-core:PatchOptions", + "required": false + }, + { + "uid": "isDeleted", + "name": "isDeleted", + "comment": { + "raw": [ + "To enable deleting of the items, it is required to specify getter for deleted state." + ] + }, + "typeValue": { + "raw": "(item: TItem) => boolean" }, "editor": { "type": "func" }, - "required": true - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:IRouterContext": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "IRouterContext", - "nameFull": "IRouterContext" - }, - "src": "uui-core/src/types/contexts.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "IRouterContext", - "print": [ - "interface IRouterContext {", - " /** Returns current location link */", - " getCurrentLink(): Link;", - " /** Makes a SPA redirect to the provided link */", - " redirect(link?: Link | string): void;", - " /** Makes a SPA redirect to the provided link. Replaces the current entry in the history stack with a new one */", - " transfer(link: Link): void;", - " /** Returns true, if provided link match current location */", - " isActive(link: Link): boolean;", - " /** Creates href string based on provided link */", - " createHref(link: Link): string;", - " /** Subscribes to the router updates */", - " listen(listener: (link: Link) => void): () => void;", - " /**", - " * Blocks router changes. Can be used to show confirmation dialogs before the redirect.", - " * If block callback provide, all router changes will be blocked, you need to unblock and to retry them by yourself.", - " * */", - " block(callback: (link: Link) => void): () => void;", - "}" - ] - }, - "props": [ + "from": "@epam/uui-core:PatchOptions", + "required": false + }, { - "uid": "getCurrentLink", - "name": "getCurrentLink", + "uid": "getNewItemPosition", + "name": "getNewItemPosition", "comment": { "raw": [ - "Returns current location link" + "Provides information about the relative position of the new item.", + " @param item - new item, position should be got for.", + " @returns relative position in the list of items.", + " @default PatchOrdering.TOP" ] }, "typeValue": { - "raw": "() => Link" + "raw": "(item: TItem) => symbol" }, "editor": { "type": "func" }, - "required": true + "from": "@epam/uui-core:PatchOptions", + "required": false }, { - "uid": "redirect", - "name": "redirect", + "uid": "getItemTemporaryOrder", + "name": "getItemTemporaryOrder", "comment": { "raw": [ - "Makes a SPA redirect to the provided link" + "Provides information about the temporary order of the new item.", + " @param item - new item, temporary order should be got for.", + " @returns temporary order", + "", + " @experimental The API of this feature can be changed in the future releases." ] }, "typeValue": { - "raw": "(link?: string | Link | undefined) => void" + "raw": "(item: TItem) => string" }, "editor": { "type": "func" }, - "required": true + "from": "@epam/uui-core:PatchOptions", + "required": false }, { - "uid": "transfer", - "name": "transfer", + "uid": "fixItemBetweenSortings", + "name": "fixItemBetweenSortings", "comment": { "raw": [ - "Makes a SPA redirect to the provided link. Replaces the current entry in the history stack with a new one" + "If enabled, items position is fixed between sorting.", + " @default true" + ], + "tags": { + "@default": true + } + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:PatchOptions", + "required": false + }, + { + "uid": "sortBy", + "name": "sortBy", + "comment": { + "raw": [ + "A pure function that gets sorting value for current sorting value" ] }, "typeValue": { - "raw": "(link: Link) => void" + "raw": "(item: TItem, sorting: SortingOption) => any" }, "editor": { "type": "func" }, - "required": true + "from": "@epam/uui-core:SortConfig", + "required": false }, { - "uid": "isActive", - "name": "isActive", + "uid": "api", + "name": "api", "comment": { "raw": [ - "Returns true, if provided link match current location" + "A function to retrieve the data, asynchronously.", + " This function usually performs a REST API call.", + " API is used to retrieve lists of items.", + " It is expected to:", + " - be able to handle paging (via from/count params)", + " - be able to retrieve specific items by the list of their ids", + " - be able to retrieve children by parents (when getChildCount is specified, and ctx.parentId is passed)" ] }, "typeValue": { - "raw": "(link: Link) => boolean" + "raw": "LazyDataSourceApi" }, + "typeValueRef": "@epam/uui-core:LazyDataSourceApi", "editor": { "type": "func" }, + "from": "@epam/uui-core:LazyDataSourceConfig", "required": true }, { - "uid": "createHref", - "name": "createHref", + "uid": "getChildCount", + "name": "getChildCount", "comment": { "raw": [ - "Creates href string based on provided link" + "Should return number of children of the item.", + " If it returns > 0, the item is assumed to have children and to be foldable.", + " Usually, this value should be returned from API, as a field of a parent, e.g. { id: 1, name: 'London', childCount: 12 }.", + " In this case, you can implement getChildCount as (i) => i.childCount.", + "", + " If you can't get number of children via API, you can return a guess value (avg number of children for this type of entity).", + " Note, that this can lead to more API calls, and increased load times in the 'parallel' fetch mode." ] }, "typeValue": { - "raw": "(link: Link) => string" + "raw": "(item: TItem) => number" }, "editor": { "type": "func" }, - "required": true + "from": "@epam/uui-core:LazyDataSourceConfig", + "required": false }, { - "uid": "listen", - "name": "listen", + "uid": "filter", + "name": "filter", "comment": { "raw": [ - "Subscribes to the router updates" + "A filter to pass to API.", + " Note, that the DataSourceState also has a filter fields. These two filters are merged before API calls.", + " Use this prop if you need to apply some filter in any case.", + " Prefer to use filter in the DataSourceState for end-user editable filters." ] }, "typeValue": { - "raw": "(listener: (link: Link) => void) => () => void" + "raw": "TFilter" + }, + "from": "@epam/uui-core:LazyDataSourceConfig", + "required": false + }, + { + "uid": "fetchStrategy", + "name": "fetchStrategy", + "comment": { + "raw": [ + "Defines how to fetch children:", + " sequential (default) - fetch children for each parent one-by-one. Makes minimal over-querying, at cost of some speed.", + " parallel - fetch children for several parents simultaneously. Can make a lot of over-querying for deep trees.", + " Recommended for 2 level trees (grouping), as it makes no over-querying in this case, and is faster than sequential strategy." + ] + }, + "typeValue": { + "raw": "'sequential' | 'parallel'" }, "editor": { - "type": "func" + "type": "oneOf", + "options": [ + "sequential", + "parallel" + ] }, - "required": true + "from": "@epam/uui-core:LazyDataSourceConfig", + "required": false }, { - "uid": "block", - "name": "block", + "uid": "backgroundReload", + "name": "backgroundReload", "comment": { "raw": [ - "Blocks router changes. Can be used to show confirmation dialogs before the redirect.", - " If block callback provide, all router changes will be blocked, you need to unblock and to retry them by yourself." + "Enables background reloading of data on search/sort/filter/reload, which turns off the rows placeholders displaying while data loading.", + " During data reloading, previous data is displayed. To prevent any interaction with visible not actual rows, a blocker/spinner should be displayed.", + " In UUI components, such as `PickerInput`, `PickerList`, `PickerModal` and `DataTable`, blockers are added.", + " It is required to add blockers/spinners to the components, built on your own.", + " If reloading is started, `view.getListProps` returns `isReloading` flag, set to `true`." ] }, "typeValue": { - "raw": "(callback: (link: Link) => void) => () => void" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "required": true + "from": "@epam/uui-core:LazyDataSourceConfig", + "required": false + }, + { + "uid": "flattenSearchResults", + "name": "flattenSearchResults", + "comment": { + "raw": [ + "Falls back to plain list from tree, if there's search.", + " Default is true.", + "", + " If enabled, and search is active:", + " - API will be called with parentId and parent undefined", + " - getChildCount is ignored, all nodes are assumed to have no children", + "", + " See more here: https://github.com/epam/UUI/issues/8" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:LazyDataSourceConfig", + "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:ITablePreset": { + "@epam/uui-core:LazyListViewProps": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "ITablePreset", - "nameFull": "ITablePreset" + "name": "LazyListViewProps", + "nameFull": "LazyListViewProps" }, - "src": "uui-core/src/types/tables.ts", + "src": "uui-core/src/data/processing/views/types.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "ITablePreset", + "raw": "LazyListViewProps", "print": [ - "interface ITablePreset {", - " /** Name of the filter */", - " name: string;", - " /** Unique Id of the filter */", - " id: number | null;", - " /** If true, this preset can't be deleted or modified */", - " isReadonly?: boolean;", - " /**", - " * Determines the order in which this preset should appear in the presets list.", - " * The columns are sorted in ascending alphabetical order.", - " */", - " order?: string;", - " /** Filter value stored in the preset */", - " filter?: TFilter;", - " /** Columns config value stored in the preset */", - " columnsConfig?: ColumnsConfig;", - " /** Filters config value stored in the preset */", - " filtersConfig?: FiltersConfig;", - " /** Sorting value stored in the preset */", - " sorting?: SortingOption[];", - " /** View state value stored in the preset */", - " viewState?: TViewState;", + "interface LazyListViewProps extends BaseListViewProps, LazyDataSourceConfig {", "}" ] }, "props": [ { - "uid": "name", - "name": "name", - "comment": { - "raw": [ - "Name of the filter" - ] - }, - "typeValue": { - "raw": "string" - }, - "editor": { - "type": "string" - }, - "required": true - }, - { - "uid": "id", - "name": "id", + "uid": "getId", + "name": "getId", "comment": { "raw": [ - "Unique Id of the filter" + "Should return unique ID of the TItem", + " If omitted, we assume that every TItem has and unique id in its 'id' field.", + " @param item - record, which id should be returned.", + " @returns item id." ] }, "typeValue": { - "raw": "null | number" + "raw": "(item: TItem) => TId" }, "editor": { - "type": "number" + "type": "func" }, + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "isReadonly", - "name": "isReadonly", + "uid": "complexIds", + "name": "complexIds", "comment": { "raw": [ - "If true, this preset can't be deleted or modified" + "Set to true, if you use IDs which can't act as javascript Map key (objects or arrays).", + " In this case, IDs will be internally JSON.stringify-ed to be used as Maps keys." ] }, "typeValue": { @@ -19555,864 +22932,861 @@ "editor": { "type": "bool" }, + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "order", - "name": "order", + "uid": "getParentId", + "name": "getParentId", "comment": { "raw": [ - "Determines the order in which this preset should appear in the presets list.", - " The columns are sorted in ascending alphabetical order." + "Should return ID of the Item's parent. Usually it's i => i.parentId.", + " If specified, Data Source will build items hierarchy.", + "", + " Also, it is used by LazyDataSource to pre-fetch missing parents of loaded items. This is required in following cases:", + " - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain", + " to highlight parents with selected children", + " - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),", + " We need to load parents with a separate call (if backend doesn't pre-fetch them)", + "", + " @param item - record, which paretnId should be returned.", + " @returns item parentId." ] }, "typeValue": { - "raw": "string" + "raw": "(item: TItem) => TId | undefined" }, "editor": { - "type": "string" + "type": "func" }, + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "filter", - "name": "filter", + "uid": "rowOptions", + "name": "rowOptions", "comment": { "raw": [ - "Filter value stored in the preset" + "Specifies if rows are selectable, checkable, draggable, clickable, and more.", + " See DataRowOptions for more details.", + " If options depends on the item itself, use getRowOptions.", + " Specifying both rowOptions and getRowOptions might help to render better loading skeletons: we use only rowOptions in this case, as we haven't loaded an item yet.", + " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", + " @param item An item to get options for" ] }, "typeValue": { - "raw": "TFilter" + "raw": "DataRowOptions" }, + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "columnsConfig", - "name": "columnsConfig", + "uid": "getRowOptions", + "name": "getRowOptions", "comment": { "raw": [ - "Columns config value stored in the preset" + "For each row, specify if row is selectable, editable, checkable, draggable, clickable, have its own set of columns, and more.", + " To make rows editable, pass IEditable interface to each row. This works the same way as for other editable components.", + " See DataRowOptions for more details.", + " If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.", + " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", + " @param item - record, configuration should be returned for.", + " @param index - index of a row. It is optional and should not be expected, that it is provided on every call." ] }, "typeValue": { - "raw": "ColumnsConfig" + "raw": "(item: TItem, index?: number | undefined) => DataRowOptions" }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "filtersConfig", - "name": "filtersConfig", + "uid": "isFoldedByDefault", + "name": "isFoldedByDefault", "comment": { "raw": [ - "Filters config value stored in the preset" + "Can be specified to unfold all or some items at start.", + " If not specified, all rows would be folded.", + " @param item - record, folding value should be returned for.", + " @param dataSourceState - dataSource state with current `foldAll` value. It provides the possibility to respect foldAll change, if `isFoldedByDefault` is implemented." ] }, "typeValue": { - "raw": "FiltersConfig" + "raw": "(item: TItem, state: DataSourceState) => boolean" + }, + "editor": { + "type": "func" }, + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "sorting", - "name": "sorting", + "uid": "cascadeSelection", + "name": "cascadeSelection", "comment": { "raw": [ - "Sorting value stored in the preset" + "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.", + " - false: All nodes are selected independently (default).", + " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.", + " - 'implicit': Selecting a parent node means that all children are considered checked.", + " The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked", + " parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,", + " its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last", + " unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked." ] }, "typeValue": { - "raw": "SortingOption[]" + "raw": "boolean | 'implicit' | 'explicit'" }, - "required": false - }, - { - "uid": "viewState", - "name": "viewState", - "comment": { - "raw": [ - "View state value stored in the preset" + "editor": { + "type": "oneOf", + "options": [ + false, + true, + "implicit", + "explicit" ] }, - "typeValue": { - "raw": "TViewState" - }, + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:ITableState": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "ITableState", - "nameFull": "ITableState" - }, - "src": "uui-core/src/types/tables.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "ITableState", - "print": [ - "interface ITableState, TViewState = any> extends IPresetsApi {", - " /** Table state value */", - " tableState: DataTableState;", - " /** Function that updates table state value */", - " setTableState(newState: DataTableState): void;", - " /** Function that updates filter value */", - " setFilter(filter: TFilter): void;", - " /** Function that updates columns config value */", - " setColumnsConfig(columnsConfig: ColumnsConfig): void;", - " /** Function that updates filters config value */", - " setFiltersConfig(filtersConfig: FiltersConfig): void;", - "}" - ] - }, - "props": [ + }, { - "uid": "tableState", - "name": "tableState", + "uid": "selectAll", + "name": "selectAll", "comment": { "raw": [ - "Table state value" - ] + "Enables/disables selectAll functionality. If disabled explicitly, `selectAll`, returned from a view is null.", + " @default true" + ], + "tags": { + "@default": true + } }, "typeValue": { - "raw": "DataTableState" + "raw": "boolean" }, - "required": true + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:BaseDataSourceConfig", + "required": false }, { - "uid": "setTableState", - "name": "setTableState", + "uid": "showSelectedOnly", + "name": "showSelectedOnly", "comment": { "raw": [ - "Function that updates table state value" + "Enables returning only selected rows and loading missing selected/checked rows, if it is required/possible.", + " If enabled, `useView` returns only selected rows from `IDataSourceView.getVisibleRows`." ] }, "typeValue": { - "raw": "(newState: DataTableState) => void" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "required": true + "from": "@epam/uui-core:BaseDataSourceConfig", + "required": false }, { - "uid": "setFilter", - "name": "setFilter", + "uid": "patch", + "name": "patch", "comment": { "raw": [ - "Function that updates filter value" + "Items, which should be added/updated/deleted from the tree." ] }, "typeValue": { - "raw": "(filter: TFilter) => void" - }, - "editor": { - "type": "func" + "raw": "IMap | IImmutableMap" }, - "required": true + "from": "@epam/uui-core:PatchOptions", + "required": false }, { - "uid": "setColumnsConfig", - "name": "setColumnsConfig", + "uid": "isDeleted", + "name": "isDeleted", "comment": { "raw": [ - "Function that updates columns config value" + "To enable deleting of the items, it is required to specify getter for deleted state." ] }, "typeValue": { - "raw": "(columnsConfig: ColumnsConfig) => void" + "raw": "(item: TItem) => boolean" }, "editor": { "type": "func" }, - "required": true + "from": "@epam/uui-core:PatchOptions", + "required": false }, { - "uid": "setFiltersConfig", - "name": "setFiltersConfig", + "uid": "getNewItemPosition", + "name": "getNewItemPosition", "comment": { "raw": [ - "Function that updates filters config value" + "Provides information about the relative position of the new item.", + " @param item - new item, position should be got for.", + " @returns relative position in the list of items.", + " @default PatchOrdering.TOP" ] }, "typeValue": { - "raw": "(filtersConfig: FiltersConfig) => void" + "raw": "(item: TItem) => symbol" }, "editor": { "type": "func" }, - "required": true + "from": "@epam/uui-core:PatchOptions", + "required": false }, { - "uid": "activePresetId", - "name": "activePresetId", + "uid": "getItemTemporaryOrder", + "name": "getItemTemporaryOrder", "comment": { "raw": [ - "ID of selected preset" + "Provides information about the temporary order of the new item.", + " @param item - new item, temporary order should be got for.", + " @returns temporary order", + "", + " @experimental The API of this feature can be changed in the future releases." ] }, "typeValue": { - "raw": "null | number" + "raw": "(item: TItem) => string" }, "editor": { - "type": "number" + "type": "func" }, - "from": "@epam/uui-core:IPresetsApi", + "from": "@epam/uui-core:PatchOptions", "required": false }, { - "uid": "choosePreset", - "name": "choosePreset", + "uid": "fixItemBetweenSortings", + "name": "fixItemBetweenSortings", "comment": { "raw": [ - "Function that selects given preset" - ] + "If enabled, items position is fixed between sorting.", + " @default true" + ], + "tags": { + "@default": true + } }, "typeValue": { - "raw": "(preset: ITablePreset) => void" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "from": "@epam/uui-core:IPresetsApi", - "required": true + "from": "@epam/uui-core:PatchOptions", + "required": false }, { - "uid": "createNewPreset", - "name": "createNewPreset", + "uid": "sortBy", + "name": "sortBy", "comment": { "raw": [ - "Function that gives preset name and create new preset with this name and current table state" + "A pure function that gets sorting value for current sorting value" ] }, "typeValue": { - "raw": "(name: string) => Promise" + "raw": "(item: TItem, sorting: SortingOption) => any" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:IPresetsApi", - "required": true + "from": "@epam/uui-core:SortConfig", + "required": false }, { - "uid": "hasPresetChanged", - "name": "hasPresetChanged", + "uid": "api", + "name": "api", "comment": { "raw": [ - "Function that gives preset and return if this preset changed or not" + "A function to retrieve the data, asynchronously.", + " This function usually performs a REST API call.", + " API is used to retrieve lists of items.", + " It is expected to:", + " - be able to handle paging (via from/count params)", + " - be able to retrieve specific items by the list of their ids", + " - be able to retrieve children by parents (when getChildCount is specified, and ctx.parentId is passed)" ] }, "typeValue": { - "raw": "(preset: ITablePreset) => boolean" + "raw": "LazyDataSourceApi" }, + "typeValueRef": "@epam/uui-core:LazyDataSourceApi", "editor": { "type": "func" }, - "from": "@epam/uui-core:IPresetsApi", + "from": "@epam/uui-core:LazyDataSourceConfig", "required": true }, { - "uid": "duplicatePreset", - "name": "duplicatePreset", + "uid": "getChildCount", + "name": "getChildCount", "comment": { "raw": [ - "Function that gives the preset and creat their duplicate" + "Should return number of children of the item.", + " If it returns > 0, the item is assumed to have children and to be foldable.", + " Usually, this value should be returned from API, as a field of a parent, e.g. { id: 1, name: 'London', childCount: 12 }.", + " In this case, you can implement getChildCount as (i) => i.childCount.", + "", + " If you can't get number of children via API, you can return a guess value (avg number of children for this type of entity).", + " Note, that this can lead to more API calls, and increased load times in the 'parallel' fetch mode." ] }, "typeValue": { - "raw": "(preset: ITablePreset) => void" + "raw": "(item: TItem) => number" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:IPresetsApi", - "required": true + "from": "@epam/uui-core:LazyDataSourceConfig", + "required": false }, { - "uid": "deletePreset", - "name": "deletePreset", + "uid": "filter", + "name": "filter", "comment": { "raw": [ - "Function that deletes given preset" + "A filter to pass to API.", + " Note, that the DataSourceState also has a filter fields. These two filters are merged before API calls.", + " Use this prop if you need to apply some filter in any case.", + " Prefer to use filter in the DataSourceState for end-user editable filters." ] }, "typeValue": { - "raw": "(preset: ITablePreset) => Promise" - }, - "editor": { - "type": "func" + "raw": "TFilter" }, - "from": "@epam/uui-core:IPresetsApi", - "required": true + "from": "@epam/uui-core:LazyDataSourceConfig", + "required": false }, { - "uid": "updatePreset", - "name": "updatePreset", + "uid": "fetchStrategy", + "name": "fetchStrategy", "comment": { "raw": [ - "Function that updates given preset" + "Defines how to fetch children:", + " sequential (default) - fetch children for each parent one-by-one. Makes minimal over-querying, at cost of some speed.", + " parallel - fetch children for several parents simultaneously. Can make a lot of over-querying for deep trees.", + " Recommended for 2 level trees (grouping), as it makes no over-querying in this case, and is faster than sequential strategy." ] }, "typeValue": { - "raw": "(preset: ITablePreset) => Promise" + "raw": "'sequential' | 'parallel'" }, "editor": { - "type": "func" + "type": "oneOf", + "options": [ + "sequential", + "parallel" + ] }, - "from": "@epam/uui-core:IPresetsApi", - "required": true + "from": "@epam/uui-core:LazyDataSourceConfig", + "required": false }, { - "uid": "getPresetLink", - "name": "getPresetLink", + "uid": "backgroundReload", + "name": "backgroundReload", "comment": { "raw": [ - "Function that gives preset and return URL link on given preset" + "Enables background reloading of data on search/sort/filter/reload, which turns off the rows placeholders displaying while data loading.", + " During data reloading, previous data is displayed. To prevent any interaction with visible not actual rows, a blocker/spinner should be displayed.", + " In UUI components, such as `PickerInput`, `PickerList`, `PickerModal` and `DataTable`, blockers are added.", + " It is required to add blockers/spinners to the components, built on your own.", + " If reloading is started, `view.getListProps` returns `isReloading` flag, set to `true`." ] }, "typeValue": { - "raw": "(preset: ITablePreset) => string" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "from": "@epam/uui-core:IPresetsApi", - "required": true + "from": "@epam/uui-core:LazyDataSourceConfig", + "required": false }, { - "uid": "presets", - "name": "presets", + "uid": "flattenSearchResults", + "name": "flattenSearchResults", "comment": { "raw": [ - "Array of presets" + "Falls back to plain list from tree, if there's search.", + " Default is true.", + "", + " If enabled, and search is active:", + " - API will be called with parentId and parent undefined", + " - getChildCount is ignored, all nodes are assumed to have no children", + "", + " See more here: https://github.com/epam/UUI/issues/8" ] }, "typeValue": { - "raw": "ITablePreset[]" + "raw": "boolean" }, - "from": "@epam/uui-core:IPresetsApi", - "required": true + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:LazyDataSourceConfig", + "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:ItemsComparator": { + "@epam/uui-core:LazyLoadedMapLoadCallback": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "ItemsComparator", - "nameFull": "ItemsComparator" + "name": "LazyLoadedMapLoadCallback", + "nameFull": "LazyLoadedMapLoadCallback" + }, + "src": "uui-core/src/helpers/LazyLoadedMap.ts", + "comment": { + "raw": [ + "An callback to pass to LazyLoadedMap constructor" + ] }, - "src": "uui-core/src/data/processing/views/tree/ITree.ts", "exported": true }, "details": { "kind": 265, "typeValue": { - "raw": "ItemsComparator", + "raw": "LazyLoadedMapLoadCallback", "print": [ - "type ItemsComparator = (newItem: TItem, existingItem: TItem) => number;" + "/**", + " * An callback to pass to LazyLoadedMap constructor", + " */", + "type LazyLoadedMapLoadCallback = (pending: TKey[]) => Promise<[", + " TKey,", + " TValue", + "][]>;" ] } } }, - "@epam/uui-core:ITree": { + "@epam/uui-core:Link": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "ITree", - "nameFull": "ITree" + "name": "Link", + "nameFull": "Link" + }, + "src": "uui-core/src/types/objects.ts", + "comment": { + "raw": [ + "Defines location within SPA application" + ] }, - "src": "uui-core/src/data/processing/views/tree/ITree.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "ITree", + "raw": "Link", "print": [ - "interface ITree {", - " clearStructure(): ITree;", - " getRootIds(): TId[];", - " getRootItems(): TItem[];", - " getById(id: TId): TItem | typeof NOT_FOUND_RECORD;", - " getChildren(item: TItem): TItem[];", - " getChildrenByParentId(parentId: TId): TItem[];", - " getChildrenIdsByParentId(parentId: TId): TId[];", - " getParentIdsRecursive(id: TId): TId[];", - " getParents(id: TId): TItem[];", - " getPathById(id: TId): DataRowPathItem[];", - " getPathItem(item: TItem): DataRowPathItem;", - " getNodeInfo(id: TId): ITreeNodeInfo;", - " isFlatList(): boolean;", - " patch(items: TItem[], isDeleted?: () => boolean, comparator?: ItemsComparator): ITree;", - " mergeItems(tree: ITree): ITree;", - " cascadeSelection(currentSelection: TId[], selectedId: TId | undefined, isSelected: boolean, options?: {", - " isSelectable?: (id: TId, item: TItem | typeof NOT_FOUND_RECORD) => boolean;", - " cascade?: CascadeSelection;", - " }): TId[];", - " load(options: LoadTreeOptions, value: Readonly, withNestedChildren?: boolean): Promise>;", - " loadMissing(options: LoadTreeOptions, value: Readonly): Promise>;", - " loadMissingIdsAndParents(options: LoadTreeOptions, idsToLoad: TId[]): Promise>;", - " getTotalCount(): number;", - " forEach(action: (item: TItem, id: TId, parentId: TId, stop: () => void) => void, options?: {", - " direction?: 'bottom-up' | 'top-down';", - " parentId?: TId;", - " includeParent?: boolean;", - " }): void;", - " forEachItem(action: (item: TItem, id: TId, parentId: TId) => void): void;", - " computeSubtotals(get: (item: TItem, hasChildren: boolean) => TSubtotals, add: (a: TSubtotals, b: TSubtotals) => TSubtotals): CompositeKeysMap | Map;", - " filter(options: ApplyFilterOptions): ITree;", - " search(options: ApplySearchOptions): ITree;", - " sort(options: ApplySortOptions): ITree;", + "/** Defines location within SPA application */", + "interface Link {", + " /** A URL pathname, beginning with a '/' */", + " pathname: string;", + " /** Object that will be parsed to the URL search params */", + " query?: any;", + " /** A URL search string, beginning with a '?' */", + " search?: string;", + " /** A unique string associated with this location. May be used to safely store", + " * and retrieve data in some other storage API, like `localStorage`.", + " *", + " * Note: This value is always \"default\" on the initial location.", + " */", + " key?: string;", + " /** A URL fragment identifier, beginning with a '#' */", + " hash?: string;", + " /** A value of arbitrary data associated with this location */", + " state?: any;", "}" ] }, "props": [ { - "uid": "clearStructure", - "name": "clearStructure", - "typeValue": { - "raw": "() => ITree" - }, - "editor": { - "type": "func" - }, - "required": true - }, - { - "uid": "getRootIds", - "name": "getRootIds", - "typeValue": { - "raw": "() => TId[]" - }, - "editor": { - "type": "func" - }, - "required": true - }, - { - "uid": "getRootItems", - "name": "getRootItems", - "typeValue": { - "raw": "() => TItem[]" - }, - "editor": { - "type": "func" + "uid": "pathname", + "name": "pathname", + "comment": { + "raw": [ + "A URL pathname, beginning with a '/'" + ] }, - "required": true - }, - { - "uid": "getById", - "name": "getById", "typeValue": { - "raw": "(id: TId) => TItem | typeof NOT_FOUND_RECORD" + "raw": "string" }, "editor": { - "type": "func" + "type": "string" }, "required": true }, { - "uid": "getChildren", - "name": "getChildren", - "typeValue": { - "raw": "(item: TItem) => TItem[]" - }, - "editor": { - "type": "func" + "uid": "query", + "name": "query", + "comment": { + "raw": [ + "Object that will be parsed to the URL search params" + ] }, - "required": true - }, - { - "uid": "getChildrenByParentId", - "name": "getChildrenByParentId", "typeValue": { - "raw": "(parentId: TId) => TItem[]" - }, - "editor": { - "type": "func" + "raw": "any" }, - "required": true + "required": false }, { - "uid": "getChildrenIdsByParentId", - "name": "getChildrenIdsByParentId", - "typeValue": { - "raw": "(parentId: TId) => TId[]" - }, - "editor": { - "type": "func" + "uid": "search", + "name": "search", + "comment": { + "raw": [ + "A URL search string, beginning with a '?'" + ] }, - "required": true - }, - { - "uid": "getParentIdsRecursive", - "name": "getParentIdsRecursive", "typeValue": { - "raw": "(id: TId) => TId[]" + "raw": "string" }, "editor": { - "type": "func" + "type": "string" }, - "required": true + "required": false }, { - "uid": "getParents", - "name": "getParents", - "typeValue": { - "raw": "(id: TId) => TItem[]" - }, - "editor": { - "type": "func" + "uid": "key", + "name": "key", + "comment": { + "raw": [ + "A unique string associated with this location. May be used to safely store", + " and retrieve data in some other storage API, like `localStorage`.", + "", + " Note: This value is always \"default\" on the initial location." + ] }, - "required": true - }, - { - "uid": "getPathById", - "name": "getPathById", "typeValue": { - "raw": "(id: TId) => DataRowPathItem[]" + "raw": "string" }, "editor": { - "type": "func" + "type": "string" }, - "required": true + "required": false }, { - "uid": "getPathItem", - "name": "getPathItem", - "typeValue": { - "raw": "(item: TItem) => DataRowPathItem" - }, - "editor": { - "type": "func" + "uid": "hash", + "name": "hash", + "comment": { + "raw": [ + "A URL fragment identifier, beginning with a '#'" + ] }, - "required": true - }, - { - "uid": "getNodeInfo", - "name": "getNodeInfo", "typeValue": { - "raw": "(id: TId) => ITreeNodeInfo" + "raw": "string" }, "editor": { - "type": "func" + "type": "string" }, - "required": true + "required": false }, { - "uid": "isFlatList", - "name": "isFlatList", - "typeValue": { - "raw": "() => boolean" - }, - "editor": { - "type": "func" + "uid": "state", + "name": "state", + "comment": { + "raw": [ + "A value of arbitrary data associated with this location" + ] }, - "required": true - }, - { - "uid": "patch", - "name": "patch", "typeValue": { - "raw": "(items: TItem[], isDeleted?: () => boolean, comparator?: ItemsComparator | undefined) => ITree" - }, - "editor": { - "type": "func" + "raw": "any" }, - "required": true - }, + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:LoadingStatus": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "LoadingStatus", + "nameFull": "LoadingStatus" + }, + "src": "uui-core/src/helpers/LazyLoadedMap.ts", + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "typeof UNKNOWN | typeof LOADING | typeof PENDING | typeof LOADED | typeof FAILED", + "print": [ + "type LoadingStatus = typeof UNKNOWN | typeof LOADING | typeof PENDING | typeof LOADED | typeof FAILED;" + ] + } + } + }, + "@epam/uui-core:Metadata": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "Metadata", + "nameFull": "Metadata" + }, + "src": "uui-core/src/types/validation.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "Metadata", + "print": [ + "interface Metadata extends IDisableable, ICanBeReadonly, ICanBeRequired {", + " /** Metadata for the nested fields */", + " props?: {", + " [P in keyof T]?: Metadata;", + " };", + " /**", + " * Metadata for all fields of current level of object.", + " * Usually used for consistent validation of arrays.", + " */", + " all?: Metadata>;", + " /** Defines minimal value to pass the validation */", + " minValue?: number;", + " /** Defines maximal value to pass the validation */", + " maxValue?: number;", + " /** Defines maximal length of the string to pass the validation */", + " maxLength?: number;", + " /** Array of your custom validators.", + " * Validator is a pure function that accept value and should return error message if this field is invalid.", + " * If validators provided, all other metadata options(e.g. isRequired, maxLength) will be ignored.", + " * */", + " validators?: CustomValidator[];", + "}" + ] + }, + "props": [ { - "uid": "mergeItems", - "name": "mergeItems", - "typeValue": { - "raw": "(tree: ITree) => ITree" - }, - "editor": { - "type": "func" + "uid": "props", + "name": "props", + "comment": { + "raw": [ + "Metadata for the nested fields" + ] }, - "required": true - }, - { - "uid": "cascadeSelection", - "name": "cascadeSelection", "typeValue": { - "raw": "(currentSelection: TId[], selectedId: TId | undefined, isSelected: boolean, options?: { isSelectable?: ((id: TId, item: TItem | typeof NOT_FOUND_RECORD) => boolean) | undefined; cascade?: CascadeSelection | undefined; } | undefined) => TId[]" - }, - "editor": { - "type": "func" + "raw": "{ [P in keyof T]?: Metadata | undefined; }" }, - "required": true + "required": false }, { - "uid": "load", - "name": "load", - "typeValue": { - "raw": "(options: LoadTreeOptions, value: Readonly, any>>, withNestedChildren?: boolean | undefined) => Promise>" - }, - "editor": { - "type": "func" + "uid": "all", + "name": "all", + "comment": { + "raw": [ + "Metadata for all fields of current level of object.", + " Usually used for consistent validation of arrays." + ] }, - "required": true - }, - { - "uid": "loadMissing", - "name": "loadMissing", "typeValue": { - "raw": "(options: LoadTreeOptions, value: Readonly, any>>) => Promise>" - }, - "editor": { - "type": "func" + "raw": "Metadata>" }, - "required": true + "required": false }, { - "uid": "loadMissingIdsAndParents", - "name": "loadMissingIdsAndParents", - "typeValue": { - "raw": "(options: LoadTreeOptions, idsToLoad: TId[]) => Promise>" - }, - "editor": { - "type": "func" + "uid": "minValue", + "name": "minValue", + "comment": { + "raw": [ + "Defines minimal value to pass the validation" + ] }, - "required": true - }, - { - "uid": "getTotalCount", - "name": "getTotalCount", "typeValue": { - "raw": "() => number" + "raw": "number" }, "editor": { - "type": "func" + "type": "number" }, - "required": true + "required": false }, { - "uid": "forEach", - "name": "forEach", - "typeValue": { - "raw": "(action: (item: TItem, id: TId, parentId: TId, stop: () => void) => void, options?: { direction?: 'bottom-up' | 'top-down' | undefined; parentId?: TId | undefined; includeParent?: boolean | undefined; } | undefined) => void" - }, - "editor": { - "type": "func" + "uid": "maxValue", + "name": "maxValue", + "comment": { + "raw": [ + "Defines maximal value to pass the validation" + ] }, - "required": true - }, - { - "uid": "forEachItem", - "name": "forEachItem", "typeValue": { - "raw": "(action: (item: TItem, id: TId, parentId: TId) => void) => void" + "raw": "number" }, "editor": { - "type": "func" + "type": "number" }, - "required": true + "required": false }, { - "uid": "computeSubtotals", - "name": "computeSubtotals", - "typeValue": { - "raw": "(get: (item: TItem, hasChildren: boolean) => TSubtotals, add: (a: TSubtotals, b: TSubtotals) => TSubtotals) => CompositeKeysMap | Map" - }, - "editor": { - "type": "func" + "uid": "maxLength", + "name": "maxLength", + "comment": { + "raw": [ + "Defines maximal length of the string to pass the validation" + ] }, - "required": true - }, - { - "uid": "filter", - "name": "filter", "typeValue": { - "raw": "(options: ApplyFilterOptions) => ITree" + "raw": "number" }, "editor": { - "type": "func" + "type": "number" }, - "required": true + "required": false }, { - "uid": "search", - "name": "search", - "typeValue": { - "raw": "(options: ApplySearchOptions) => ITree" + "uid": "validators", + "name": "validators", + "comment": { + "raw": [ + "Array of your custom validators.", + " Validator is a pure function that accept value and should return error message if this field is invalid.", + " If validators provided, all other metadata options(e.g. isRequired, maxLength) will be ignored." + ] }, - "editor": { - "type": "func" + "typeValue": { + "raw": "CustomValidator[]" }, - "required": true + "required": false }, { - "uid": "sort", - "name": "sort", + "uid": "isDisabled", + "name": "isDisabled", + "comment": { + "raw": [ + "Disable editing, and visually de-emphasize value of the component" + ] + }, "typeValue": { - "raw": "(options: ApplySortOptions) => ITree" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "required": true - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:IUserSettingsContext": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "IUserSettingsContext", - "nameFull": "IUserSettingsContext" - }, - "src": "uui-core/src/types/contexts.ts", - "comment": { - "raw": [ - "Save data to the localStorage" - ] - }, - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "IUserSettingsContext", - "print": [ - "/** Save data to the localStorage */", - "interface IUserSettingsContext {", - " /** Gets value by key from localStorage */", - " get(key: any, initial?: TValue): TValue;", - " /** Sets value by key from localStorage */", - " set(key: any, value: TValue): void;", - "}" - ] - }, - "props": [ + "from": "@epam/uui-core:IDisableable", + "required": false + }, { - "uid": "get", - "name": "get", + "uid": "isReadonly", + "name": "isReadonly", "comment": { "raw": [ - "Gets value by key from localStorage" + "Disable editing. Unlike isDisabled, keep component's value readable." ] }, "typeValue": { - "raw": "(key: any, initial?: TValue | undefined) => TValue" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "required": true + "from": "@epam/uui-core:ICanBeReadonly", + "required": false }, { - "uid": "set", - "name": "set", + "uid": "isRequired", + "name": "isRequired", "comment": { "raw": [ - "Sets value by key from localStorage" + "Marks that component's value is required and shouldn't be empty" ] }, "typeValue": { - "raw": "(key: any, value: TValue) => void" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "required": true + "from": "@epam/uui-core:ICanBeRequired", + "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:LabeledInputCoreProps": { + "@epam/uui-core:ModalBlockerProps": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "LabeledInputCoreProps", - "nameFull": "LabeledInputCoreProps" + "name": "ModalBlockerProps", + "nameFull": "ModalBlockerProps" }, - "src": "uui-core/src/types/components/LabeledInput.tsx", + "src": "uui-core/src/types/components/Modals.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "LabeledInputCoreProps", + "raw": "ModalBlockerProps", "print": [ - "interface LabeledInputCoreProps extends ICanBeInvalid, IHasCX, IHasLabel, IHasChildren, ICanBeRequired, IHasValidationMessage, IHasRawProps>, IHasForwardedRef {", - " /** Position of the label, relative to the wrapped component (top of left) */", - " labelPosition?: 'top' | 'left';", - " /** Info hint text to show in tooltip */", - " info?: ReactNode;", - " /** Marks related field as optional */", - " isOptional?: boolean;", - " /** HTML 'for' tag to bind the label to a component.", - " * Can be used when component can't be wrapped by the LabeledInput, e.g. when form is layed out as table with labels and inputs placed into different columns", + "interface ModalBlockerProps extends IModal, IHasCX, IHasChildren, IHasRawProps>, IHasForwardedRef {", + " /** Pass true to disabled locking focus inside modal.", + " * If omitted, first clickable element of modal will receive focus on mount and focus will be looped inside modal.", + " * */", + " disableFocusLock?: boolean;", + " /** Pass true to disabled modal closing by 'esc' key */", + " disableCloseByEsc?: boolean;", + " /** Pass true to disabled modal closing by click outside modal window */", + " disallowClickOutside?: boolean;", + " /**", + " * Pass true to disable modal close by router change.", + " * If omitted, modal window will be closed on any router change.", " */", - " htmlFor?: string;", - " /** A value from LabeledInput children */", - " value?: any;", - " /** Maximum text length, in characters */", - " maxLength?: number;", - " /** Showing current text length, in characters and maxLength */", - " charCounter?: boolean;", - " /** Additional info positioned at the bottom of LabeledInput */", - " footnote?: ReactNode;", - " /** Additional info positioned to the right side of label */", - " sidenote?: ReactNode;", + " disableCloseOnRouterChange?: boolean;", "}" ] }, "props": [ { - "uid": "labelPosition", - "name": "labelPosition", + "uid": "disableFocusLock", + "name": "disableFocusLock", "comment": { "raw": [ - "Position of the label, relative to the wrapped component (top of left)" + "Pass true to disabled locking focus inside modal.", + " If omitted, first clickable element of modal will receive focus on mount and focus will be looped inside modal." ] }, "typeValue": { - "raw": "'left' | 'top'" + "raw": "boolean" }, "editor": { - "type": "oneOf", - "options": [ - "left", - "top" - ] + "type": "bool" }, "required": false }, { - "uid": "info", - "name": "info", + "uid": "disableCloseByEsc", + "name": "disableCloseByEsc", "comment": { "raw": [ - "Info hint text to show in tooltip" + "Pass true to disabled modal closing by 'esc' key" ] }, "typeValue": { - "raw": "React.ReactNode" + "raw": "boolean" + }, + "editor": { + "type": "bool" }, - "typeValueRef": "@types/react:ReactNode", "required": false }, { - "uid": "isOptional", - "name": "isOptional", + "uid": "disallowClickOutside", + "name": "disallowClickOutside", "comment": { "raw": [ - "Marks related field as optional" + "Pass true to disabled modal closing by click outside modal window" ] }, "typeValue": { @@ -20424,41 +23798,62 @@ "required": false }, { - "uid": "htmlFor", - "name": "htmlFor", + "uid": "disableCloseOnRouterChange", + "name": "disableCloseOnRouterChange", "comment": { "raw": [ - "HTML 'for' tag to bind the label to a component.", - " Can be used when component can't be wrapped by the LabeledInput, e.g. when form is layed out as table with labels and inputs placed into different columns" + "Pass true to disable modal close by router change.", + " If omitted, modal window will be closed on any router change." ] }, "typeValue": { - "raw": "string" + "raw": "boolean" }, "editor": { - "type": "string" + "type": "bool" }, "required": false }, { - "uid": "value", - "name": "value", + "uid": "isActive", + "name": "isActive", "comment": { "raw": [ - "A value from LabeledInput children" + "Indicates whether the modal is currently displayed" ] }, "typeValue": { - "raw": "any" + "raw": "boolean" + }, + "editor": { + "type": "bool" }, + "from": "@epam/uui-core:IModal", "required": false }, { - "uid": "maxLength", - "name": "maxLength", + "uid": "key", + "name": "key", "comment": { "raw": [ - "Maximum text length, in characters" + "Unique key of the modal" + ] + }, + "typeValue": { + "raw": "string" + }, + "editor": { + "type": "string" + }, + "from": "@epam/uui-core:IModal", + "required": true + }, + { + "uid": "zIndex", + "name": "zIndex", + "comment": { + "raw": [ + "Modal zIndex value. Calculated via LayoutContext." ] }, "typeValue": { @@ -20467,67 +23862,72 @@ "editor": { "type": "number" }, - "required": false + "from": "@epam/uui-core:IModal", + "required": true }, { - "uid": "charCounter", - "name": "charCounter", + "uid": "success", + "name": "success", "comment": { "raw": [ - "Showing current text length, in characters and maxLength" + "Call to successfully close the modal. It's resolves `modalContext.show()` promise with provided value." ] }, "typeValue": { - "raw": "boolean" + "raw": "(result: any) => void" }, "editor": { - "type": "bool" + "type": "func" }, - "required": false + "from": "@epam/uui-core:IModal", + "required": true }, { - "uid": "footnote", - "name": "footnote", + "uid": "abort", + "name": "abort", "comment": { "raw": [ - "Additional info positioned at the bottom of LabeledInput" + "Call to close the modal with abort action. It's rejects `modalContext.show()` promise with provided value." ] }, "typeValue": { - "raw": "React.ReactNode" + "raw": "(result?: any) => void" }, - "typeValueRef": "@types/react:ReactNode", - "required": false + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IModal", + "required": true }, { - "uid": "sidenote", - "name": "sidenote", + "uid": "parameters", + "name": "parameters", "comment": { "raw": [ - "Additional info positioned to the right side of label" + "Parameters that provided via second param of `modalContext.show` method" ] }, "typeValue": { - "raw": "React.ReactNode" + "raw": "any" }, - "typeValueRef": "@types/react:ReactNode", + "from": "@epam/uui-core:IModal", "required": false }, { - "uid": "isInvalid", - "name": "isInvalid", + "uid": "depth", + "name": "depth", "comment": { "raw": [ - "True if component contains invalid input" + "Depth of current modal layer" ] }, "typeValue": { - "raw": "boolean" + "raw": "number" }, "editor": { - "type": "bool" + "type": "number" }, - "from": "@epam/uui-core:ICanBeInvalid", + "from": "@epam/uui-core:IModal", "required": false }, { @@ -20546,41 +23946,80 @@ "required": false }, { - "uid": "label", - "name": "label", + "uid": "children", + "name": "children", "comment": { "raw": [ - "Component label. Can be a string, or React.Element. Certain components supports minimal markup (,,) in labels." + "Component children" ] }, "typeValue": { "raw": "React.ReactNode" }, "typeValueRef": "@types/react:ReactNode", - "from": "@epam/uui-core:IHasLabel", + "from": "@epam/uui-core:IHasChildren", "required": false }, { - "uid": "children", - "name": "children", + "uid": "rawProps", + "name": "rawProps", "comment": { "raw": [ - "Component children" + "Any HTML attributes (native or 'data-') to put on the underlying component" ] }, "typeValue": { - "raw": "React.ReactNode" + "raw": "React.HTMLAttributes & Record<`data-${string}`, string>" }, - "typeValueRef": "@types/react:ReactNode", - "from": "@epam/uui-core:IHasChildren", + "from": "@epam/uui-core:IHasRawProps", "required": false }, { - "uid": "isRequired", - "name": "isRequired", + "uid": "forwardedRef", + "name": "forwardedRef", "comment": { "raw": [ - "Marks that component's value is required and shouldn't be empty" + "this ref is passed to the underlying component" + ] + }, + "typeValue": { + "raw": "null | (instance: HTMLDivElement | null) => void | React.MutableRefObject" + }, + "from": "@epam/uui-core:IHasForwardedRef", + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:ModalFooterCoreProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "ModalFooterCoreProps", + "nameFull": "ModalFooterCoreProps" + }, + "src": "uui-core/src/types/components/Modals.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "ModalFooterCoreProps", + "print": [ + "interface ModalFooterCoreProps extends IHasChildren, IHasCX, IHasRawProps> {", + " /** Pass true to enable the top border of ModalFooter */", + " borderTop?: boolean;", + "}" + ] + }, + "props": [ + { + "uid": "borderTop", + "name": "borderTop", + "comment": { + "raw": [ + "Pass true to enable the top border of ModalFooter" ] }, "typeValue": { @@ -20589,371 +24028,385 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:ICanBeRequired", "required": false }, { - "uid": "validationMessage", - "name": "validationMessage", + "uid": "children", + "name": "children", "comment": { "raw": [ - "Message describing why the value is invalid" + "Component children" ] }, "typeValue": { "raw": "React.ReactNode" }, "typeValueRef": "@types/react:ReactNode", - "from": "@epam/uui-core:IHasValidationMessage", + "from": "@epam/uui-core:IHasChildren", "required": false }, { - "uid": "rawProps", - "name": "rawProps", + "uid": "cx", + "name": "cx", "comment": { "raw": [ - "Any HTML attributes (native or 'data-') to put on the underlying component" + "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" ] }, "typeValue": { - "raw": "React.HTMLAttributes & Record<`data-${string}`, string>" + "raw": "null | string | number | boolean | ClassDictionary | ClassArray" }, - "from": "@epam/uui-core:IHasRawProps", + "typeValueRef": "@epam/uui-core:ClassValue", + "from": "@epam/uui-core:IHasCX", "required": false }, { - "uid": "forwardedRef", - "name": "forwardedRef", + "uid": "rawProps", + "name": "rawProps", "comment": { "raw": [ - "this ref is passed to the underlying component" + "Any HTML attributes (native or 'data-') to put on the underlying component" ] }, "typeValue": { - "raw": "null | (instance: HTMLDivElement | null) => void | React.MutableRefObject" + "raw": "React.HTMLAttributes & Record<`data-${string}`, string>" }, - "from": "@epam/uui-core:IHasForwardedRef", + "from": "@epam/uui-core:IHasRawProps", "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:LayoutLayer": { + "@epam/uui-core:ModalHeaderCoreProps": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "LayoutLayer", - "nameFull": "LayoutLayer" + "name": "ModalHeaderCoreProps", + "nameFull": "ModalHeaderCoreProps" }, - "src": "uui-core/src/services/LayoutContext.ts", + "src": "uui-core/src/types/components/Modals.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "LayoutLayer", + "raw": "ModalHeaderCoreProps", "print": [ - "interface LayoutLayer {", - " /** ID of the layer */", - " id: number;", - " /** Level of the layer depth */", - " depth: number;", - " /** zIndex of the layer */", - " zIndex: number;", + "interface ModalHeaderCoreProps extends IHasChildren, IHasCX, IHasRawProps> {", + " /** Called when cross icon in ModalHeader is clicked */", + " onClose?: () => any;", + " /** Modal title to display in header */", + " title?: React.ReactNode;", "}" ] }, "props": [ { - "uid": "id", - "name": "id", + "uid": "onClose", + "name": "onClose", "comment": { "raw": [ - "ID of the layer" + "Called when cross icon in ModalHeader is clicked" ] }, "typeValue": { - "raw": "number" + "raw": "() => any" }, "editor": { - "type": "number" + "type": "func" }, - "required": true + "required": false }, { - "uid": "depth", - "name": "depth", + "uid": "title", + "name": "title", "comment": { "raw": [ - "Level of the layer depth" + "Modal title to display in header" ] }, "typeValue": { - "raw": "number" + "raw": "React.ReactNode" }, - "editor": { - "type": "number" + "typeValueRef": "@types/react:ReactNode", + "required": false + }, + { + "uid": "children", + "name": "children", + "comment": { + "raw": [ + "Component children" + ] }, - "required": true + "typeValue": { + "raw": "React.ReactNode" + }, + "typeValueRef": "@types/react:ReactNode", + "from": "@epam/uui-core:IHasChildren", + "required": false }, { - "uid": "zIndex", - "name": "zIndex", + "uid": "cx", + "name": "cx", "comment": { "raw": [ - "zIndex of the layer" + "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" ] }, "typeValue": { - "raw": "number" + "raw": "null | string | number | boolean | ClassDictionary | ClassArray" }, - "editor": { - "type": "number" + "typeValueRef": "@epam/uui-core:ClassValue", + "from": "@epam/uui-core:IHasCX", + "required": false + }, + { + "uid": "rawProps", + "name": "rawProps", + "comment": { + "raw": [ + "Any HTML attributes (native or 'data-') to put on the underlying component" + ] }, - "required": true + "typeValue": { + "raw": "React.HTMLAttributes & Record<`data-${string}`, string>" + }, + "from": "@epam/uui-core:IHasRawProps", + "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:LazyDataSourceApi": { + "@epam/uui-core:ModalOperation": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "LazyDataSourceApi", - "nameFull": "LazyDataSourceApi" - }, - "src": "uui-core/src/types/dataSources.ts", - "comment": { - "raw": [ - "Defines API to retrieve data for DataSources" - ] + "name": "ModalOperation", + "nameFull": "ModalOperation" }, + "src": "uui-core/src/services/ModalContext.ts", "exported": true }, "details": { - "kind": 265, + "kind": 264, "typeValue": { - "raw": "LazyDataSourceApi", + "raw": "ModalOperation", "print": [ - "/** Defines API to retrieve data for DataSources */", - "type LazyDataSourceApi = (", - "/** Defines input arguments for Lazy Data Source APIs */", - "request: LazyDataSourceApiRequest, ", - "/** Defines the context of API request. */", - "context?: LazyDataSourceApiRequestContext) => Promise>;" + "interface ModalOperation {", + " /** Modal component that should be rendered */", + " component?: React.ComponentType;", + " /** Modal component props */", + " props: IModal;", + "}" ] - } + }, + "props": [ + { + "uid": "component", + "name": "component", + "comment": { + "raw": [ + "Modal component that should be rendered" + ] + }, + "typeValue": { + "raw": "React.ComponentClass | React.FunctionComponent" + }, + "required": false + }, + { + "uid": "props", + "name": "props", + "comment": { + "raw": [ + "Modal component props" + ] + }, + "typeValue": { + "raw": "IModal" + }, + "required": true + } + ], + "propsFromUnion": false } }, - "@epam/uui-core:LazyDataSourceApiRequest": { + "@epam/uui-core:ModalWindowProps": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "LazyDataSourceApiRequest", - "nameFull": "LazyDataSourceApiRequest" + "name": "ModalWindowProps", + "nameFull": "ModalWindowProps" }, - "src": "uui-core/src/types/dataSources.ts", + "src": "uui-core/src/types/components/Modals.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "LazyDataSourceApiRequest", + "raw": "ModalWindowProps", "print": [ - "/** Defines input arguments for Lazy Data Source APIs */", - "// eslint-disable-next-line @typescript-eslint/no-unused-vars", - "interface LazyDataSourceApiRequest {", - " /**", - " * The filter object, by which data should be filtered.", - " * It is a merged result of filters from DataSourceState and LazyDataSourceProps.", - " */", - " filter?: TFilter;", - " /** Sorting options, by which data should be sorted. */", - " sorting?: SortingOption[];", - " /** The search string, by which data should be searched. */", - " search?: string;", - " /** Specifies a range of the rows to be retrieved. */", - " range?: LazyDataSourceApiRequestRange;", - " /** Page number for which data should be retrieved. */", - " page?: number;", - " /** Number of items at the page. */", - " pageSize?: number;", - " /**", - " * An array of item IDs to be retrieved from the API.", - " * Other request options like filter, search and others should be ignored when IDs are provided.", - " * Used for requesting specific items separately from the list.", - " */", - " ids?: TId[];", + "interface ModalWindowProps extends VPanelProps, IHasForwardedRef {", "}" ] }, "props": [ { - "uid": "filter", - "name": "filter", + "uid": "cx", + "name": "cx", "comment": { "raw": [ - "The filter object, by which data should be filtered.", - " It is a merged result of filters from DataSourceState and LazyDataSourceProps." + "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" ] }, "typeValue": { - "raw": "TFilter" + "raw": "null | string | number | boolean | ClassDictionary | ClassArray" }, + "typeValueRef": "@epam/uui-core:ClassValue", + "from": "@epam/uui-core:IHasCX", "required": false }, { - "uid": "sorting", - "name": "sorting", + "uid": "children", + "name": "children", "comment": { "raw": [ - "Sorting options, by which data should be sorted." + "Component children" ] }, "typeValue": { - "raw": "SortingOption[]" + "raw": "React.ReactNode" }, + "typeValueRef": "@types/react:ReactNode", + "from": "@epam/uui-core:IHasChildren", "required": false }, { - "uid": "search", - "name": "search", + "uid": "onClick", + "name": "onClick", "comment": { "raw": [ - "The search string, by which data should be searched." + "Called when component is clicked" ] }, "typeValue": { - "raw": "string" + "raw": "(e?: any) => void" }, "editor": { - "type": "string" + "type": "func" }, + "from": "@epam/uui-core:IClickable", "required": false }, { - "uid": "range", - "name": "range", + "uid": "rawProps", + "name": "rawProps", "comment": { "raw": [ - "Specifies a range of the rows to be retrieved." + "Any HTML attributes (native or 'data-') to put on the underlying component" ] }, "typeValue": { - "raw": "LazyDataSourceApiRequestRange" + "raw": "React.HTMLAttributes & Record<`data-${string}`, string>" }, + "from": "@epam/uui-core:IHasRawProps", "required": false }, { - "uid": "page", - "name": "page", + "uid": "forwardedRef", + "name": "forwardedRef", "comment": { "raw": [ - "Page number for which data should be retrieved." + "this ref is passed to the underlying component" ] }, "typeValue": { - "raw": "number" - }, - "editor": { - "type": "number" + "raw": "null | (instance: HTMLDivElement | null) => void | React.MutableRefObject" }, + "from": "@epam/uui-core:IHasForwardedRef", "required": false }, { - "uid": "pageSize", - "name": "pageSize", + "uid": "clickAnalyticsEvent", + "name": "clickAnalyticsEvent", "comment": { "raw": [ - "Number of items at the page." + "An analytics event to send (via AnalyticsContext) when component is clicked.", + " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)." ] }, "typeValue": { - "raw": "number" - }, - "editor": { - "type": "number" + "raw": "null | { [key: string]: any; name: string; }" }, + "from": "@epam/uui-core:IAnalyticableClick", "required": false }, { - "uid": "ids", - "name": "ids", + "uid": "style", + "name": "style", "comment": { "raw": [ - "An array of item IDs to be retrieved from the API.", - " Other request options like filter, search and others should be ignored when IDs are provided.", - " Used for requesting specific items separately from the list." + "Native style attributes" ] }, "typeValue": { - "raw": "TId[]" + "raw": "React.CSSProperties" }, + "from": "@epam/uui-core:VPanelProps", "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:LazyDataSourceApiRequestContext": { + "@epam/uui-core:ModificationOptions": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "LazyDataSourceApiRequestContext", - "nameFull": "LazyDataSourceApiRequestContext" - }, - "src": "uui-core/src/types/dataSources.ts", - "comment": { - "raw": [ - "Defines the context of API request. E.g. parent if we require to retrieve sub-list of the tree" - ] + "name": "ModificationOptions", + "nameFull": "ModificationOptions" }, + "src": "uui-core/src/data/processing/views/tree/ItemsStorage.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "LazyDataSourceApiRequestContext", + "raw": "ModificationOptions", "print": [ - "/** Defines the context of API request. E.g. parent if we require to retrieve sub-list of the tree */", - "interface LazyDataSourceApiRequestContext {", - " /**", - " * The ID of the parent item whose children are being requested.", - " * Used for lazy-loading data in tree lists.", - " */", - " parentId?: TId | null;", - " /** The parent entity whose children are being requested */", - " parent?: TItem | null;", + "interface ModificationOptions {", + " reset?: boolean;", + " on?: 'load' | 'patch';", "}" ] }, "props": [ { - "uid": "parentId", - "name": "parentId", - "comment": { - "raw": [ - "The ID of the parent item whose children are being requested.", - " Used for lazy-loading data in tree lists." - ] - }, + "uid": "reset", + "name": "reset", "typeValue": { - "raw": "null | TId" + "raw": "boolean" + }, + "editor": { + "type": "bool" }, "required": false }, { - "uid": "parent", - "name": "parent", - "comment": { - "raw": [ - "The parent entity whose children are being requested" - ] - }, + "uid": "on", + "name": "on", "typeValue": { - "raw": "null | TItem" + "raw": "'load' | 'patch'" + }, + "editor": { + "type": "oneOf", + "options": [ + "load", + "patch" + ] }, "required": false } @@ -20961,321 +24414,295 @@ "propsFromUnion": false } }, - "@epam/uui-core:LazyDataSourceApiRequestRange": { + "@epam/uui-core:NotificationOperation": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "LazyDataSourceApiRequestRange", - "nameFull": "LazyDataSourceApiRequestRange" - }, - "src": "uui-core/src/types/dataSources.ts", - "comment": { - "raw": [ - "The range (from/count) of required rows for LazyDataSourceApiRequest" - ] + "name": "NotificationOperation", + "nameFull": "NotificationOperation" }, + "src": "uui-core/src/services/NotificationContext.tsx", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "LazyDataSourceApiRequestRange", + "raw": "NotificationOperation", "print": [ - "// Lazy Data Source API", - "/** The range (from/count) of required rows for LazyDataSourceApiRequest */", - "interface LazyDataSourceApiRequestRange {", - " /** Element index to fetch from. */", - " from: number;", - " /** Count of elements to be retrieved. */", - " count?: number;", + "interface NotificationOperation {", + " /** Notification component that should be rendered */", + " component: React.ComponentType;", + " /** Notification component props */", + " props: INotification;", + " /** Notification config */", + " config: NotificationParams;", "}" ] }, "props": [ { - "uid": "from", - "name": "from", + "uid": "component", + "name": "component", "comment": { "raw": [ - "Element index to fetch from." + "Notification component that should be rendered" ] }, "typeValue": { - "raw": "number" - }, - "editor": { - "type": "number" + "raw": "React.ComponentType" }, + "typeValueRef": "@types/react:ComponentType", "required": true }, { - "uid": "count", - "name": "count", + "uid": "props", + "name": "props", "comment": { "raw": [ - "Count of elements to be retrieved." + "Notification component props" ] }, "typeValue": { - "raw": "number" + "raw": "INotification" }, - "editor": { - "type": "number" + "required": true + }, + { + "uid": "config", + "name": "config", + "comment": { + "raw": [ + "Notification config" + ] }, - "required": false + "typeValue": { + "raw": "NotificationParams" + }, + "required": true } ], "propsFromUnion": false } }, - "@epam/uui-core:LazyDataSourceApiResponse": { + "@epam/uui-core:NotificationParams": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "LazyDataSourceApiResponse", - "nameFull": "LazyDataSourceApiResponse" - }, - "src": "uui-core/src/types/dataSources.ts", - "comment": { - "raw": [ - "Defines Lazy Data Source APIs response shape" - ] + "name": "NotificationParams", + "nameFull": "NotificationParams" }, + "src": "uui-core/src/types/contexts.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "LazyDataSourceApiResponse", + "raw": "NotificationParams", "print": [ - "/** Defines Lazy Data Source APIs response shape */", - "interface LazyDataSourceApiResponse {", - " /** List of items which was requested via API */", - " items: TItem[];", - " /**", - " * API can set 'from' field if it wants to return more items than what was requested in request.range.", - " * This can be used to return all items at once (with from:0, count: totalCount), or align response to pages.", - " */", - " from?: number;", - " /**", - " * Total count of items which match current filter and pagination.", - " * If not specified, total count will be detected only when user scrolls to the end of the list.", - " */", - " count?: number;", - " /**", - " * Total count of items which match current filter.", + "interface NotificationParams {", + " /** Notification visibility duration in ms", + " * If 'forever' value provided, notification required manual action for closing.", " */", - " totalCount?: number;", + " duration?: number | 'forever';", + " /** Position of notification depends on screen corners */", + " position?: 'bot-left' | 'bot-right' | 'top-left' | 'top-right' | 'top-center' | 'bot-center';", "}" ] }, "props": [ { - "uid": "items", - "name": "items", - "comment": { - "raw": [ - "List of items which was requested via API" - ] - }, - "typeValue": { - "raw": "TItem[]" - }, - "required": true - }, - { - "uid": "from", - "name": "from", + "uid": "duration", + "name": "duration", "comment": { "raw": [ - "API can set 'from' field if it wants to return more items than what was requested in request.range.", - " This can be used to return all items at once (with from:0, count: totalCount), or align response to pages." + "Notification visibility duration in ms", + " If 'forever' value provided, notification required manual action for closing." ] }, "typeValue": { - "raw": "number" - }, - "editor": { - "type": "number" + "raw": "number | 'forever'" }, "required": false }, { - "uid": "count", - "name": "count", + "uid": "position", + "name": "position", "comment": { "raw": [ - "Total count of items which match current filter and pagination.", - " If not specified, total count will be detected only when user scrolls to the end of the list." + "Position of notification depends on screen corners" ] }, "typeValue": { - "raw": "number" + "raw": "'bot-left' | 'bot-right' | 'top-left' | 'top-right' | 'top-center' | 'bot-center'" }, "editor": { - "type": "number" - }, - "required": false - }, - { - "uid": "totalCount", - "name": "totalCount", - "comment": { - "raw": [ - "Total count of items which match current filter." + "type": "oneOf", + "options": [ + "bot-left", + "bot-right", + "top-left", + "top-right", + "top-center", + "bot-center" ] }, - "typeValue": { - "raw": "number" - }, - "editor": { - "type": "number" - }, "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:LazyDataSourceProps": { + "@epam/uui-core:OnUpdate": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "LazyDataSourceProps", - "nameFull": "LazyDataSourceProps" + "name": "OnUpdate", + "nameFull": "OnUpdate" + }, + "src": "uui-core/src/data/processing/views/tree/ItemsStorage.ts", + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "OnUpdate", + "print": [ + "type OnUpdate = (newItemsMap: ItemsMap) => void;" + ] + } + } + }, + "@epam/uui-core:PatchOptions": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "PatchOptions", + "nameFull": "PatchOptions" + }, + "src": "uui-core/src/types/dataSources.ts", + "comment": { + "raw": [ + "Patch tree configuration." + ] }, - "src": "uui-core/src/data/processing/LazyDataSource.tsx", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "LazyDataSourceProps", + "raw": "PatchOptions", "print": [ - "interface LazyDataSourceProps extends LazyListViewProps {", + "/**", + " * Patch tree configuration.", + " */", + "interface PatchOptions extends SortConfig {", + " /**", + " * Items, which should be added/updated/deleted from the tree.", + " */", + " patch?: IMap | IImmutableMap;", + " /**", + " * To enable deleting of the items, it is required to specify getter for deleted state.", + " */", + " isDeleted?(item: TItem): boolean;", + " /**", + " * Provides information about the relative position of the new item.", + " * @param item - new item, position should be got for.", + " * @returns relative position in the list of items.", + " * @default PatchOrdering.TOP", + " */", + " getNewItemPosition?: (item: TItem) => PatchOrderingType;", + " /**", + " *", + " * Provides information about the temporary order of the new item.", + " * @param item - new item, temporary order should be got for.", + " * @returns temporary order", + " *", + " * @experimental The API of this feature can be changed in the future releases.", + " */", + " getItemTemporaryOrder?: (item: TItem) => string;", + " /**", + " * If enabled, items position is fixed between sorting.", + " * @default true", + " */", + " fixItemBetweenSortings?: boolean;", "}" ] }, "props": [ { - "uid": "api", - "name": "api", + "uid": "patch", + "name": "patch", "comment": { "raw": [ - "A function to retrieve the data, asynchronously.", - " This function usually performs a REST API call.", - " API is used to retrieve lists of items.", - " It is expected to:", - " - be able to handle paging (via from/count params)", - " - be able to retrieve specific items by the list of their ids", - " - be able to retrieve children by parents (when getChildCount is specified, and ctx.parentId is passed)" + "Items, which should be added/updated/deleted from the tree." ] }, "typeValue": { - "raw": "LazyDataSourceApi" - }, - "typeValueRef": "@epam/uui-core:LazyDataSourceApi", - "editor": { - "type": "func" + "raw": "IMap | IImmutableMap" }, - "from": "@epam/uui-core:LazyListViewProps", - "required": true + "required": false }, { - "uid": "getChildCount", - "name": "getChildCount", + "uid": "isDeleted", + "name": "isDeleted", "comment": { "raw": [ - "Should return number of children of the item.", - " If it returns > 0, the item is assumed to have children and to be foldable.", - " Usually, this value should be returned from API, as a field of a parent, e.g. { id: 1, name: 'London', childCount: 12 }.", - " In this case, you can implement getChildCount as (i) => i.childCount.", - "", - " If you can't get number of children via API, you can return a guess value (avg number of children for this type of entity).", - " Note, that this can lead to more API calls, and increased load times in the 'parallel' fetch mode." + "To enable deleting of the items, it is required to specify getter for deleted state." ] }, "typeValue": { - "raw": "(item: TItem) => number" + "raw": "(item: TItem) => boolean" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:LazyListViewProps", - "required": false - }, - { - "uid": "filter", - "name": "filter", - "comment": { - "raw": [ - "A filter to pass to API.", - " Note, that the DataSourceState also has a filter fields. These two filters are merged before API calls.", - " Use this prop if you need to apply some filter in any case.", - " Prefer to use filter in the DataSourceState for end-user editable filters." - ] - }, - "typeValue": { - "raw": "TFilter" - }, - "from": "@epam/uui-core:LazyListViewProps", "required": false }, { - "uid": "fetchStrategy", - "name": "fetchStrategy", + "uid": "getNewItemPosition", + "name": "getNewItemPosition", "comment": { "raw": [ - "Defines how to fetch children:", - " sequential (default) - fetch children for each parent one-by-one. Makes minimal over-querying, at cost of some speed.", - " parallel - fetch children for several parents simultaneously. Can make a lot of over-querying for deep trees.", - " Recommended for 2 level trees (grouping), as it makes no over-querying in this case, and is faster than sequential strategy." + "Provides information about the relative position of the new item.", + " @param item - new item, position should be got for.", + " @returns relative position in the list of items.", + " @default PatchOrdering.TOP" ] }, "typeValue": { - "raw": "'sequential' | 'parallel'" + "raw": "(item: TItem) => symbol" }, "editor": { - "type": "oneOf", - "options": [ - "sequential", - "parallel" - ] + "type": "func" }, - "from": "@epam/uui-core:LazyListViewProps", "required": false }, { - "uid": "flattenSearchResults", - "name": "flattenSearchResults", + "uid": "getItemTemporaryOrder", + "name": "getItemTemporaryOrder", "comment": { "raw": [ - "Falls back to plain list from tree, if there's search.", - " Default is true.", - "", - " If enabled, and search is active:", - " - API will be called with parentId and parent undefined", - " - getChildCount is ignored, all nodes are assumed to have no children", + "Provides information about the temporary order of the new item.", + " @param item - new item, temporary order should be got for.", + " @returns temporary order", "", - " See more here: https://github.com/epam/UUI/issues/8" + " @experimental The API of this feature can be changed in the future releases." ] }, "typeValue": { - "raw": "boolean" + "raw": "(item: TItem) => string" }, "editor": { - "type": "bool" + "type": "func" }, - "from": "@epam/uui-core:LazyListViewProps", "required": false }, { - "uid": "legacyLoadDataBehavior", - "name": "legacyLoadDataBehavior", + "uid": "fixItemBetweenSortings", + "name": "fixItemBetweenSortings", "comment": { "raw": [ - "This option is added for the purpose of supporting legacy behavior of fetching data", - " on `getRows` and `getListProps`, not to break users' own implementation of dataSources.", + "If enabled, items position is fixed between sorting.", " @default true" ], "tags": { @@ -21288,311 +24715,249 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:LazyListViewProps", "required": false }, { - "uid": "getId", - "name": "getId", + "uid": "sortBy", + "name": "sortBy", "comment": { "raw": [ - "Should return unique ID of the TItem", - " If omitted, we assume that every TItem has and unique id in its 'id' field.", - " @param item An item to get ID of" + "A pure function that gets sorting value for current sorting value" ] }, "typeValue": { - "raw": "(item: TItem) => TId" + "raw": "(item: TItem, sorting: SortingOption) => any" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:SortConfig", "required": false - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:PatchOrderingType": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "PatchOrderingType", + "nameFull": "PatchOrderingType" + }, + "src": "uui-core/src/data/processing/views/tree/types.ts", + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "symbol", + "print": [ + "type PatchOrderingType = typeof PatchOrdering.TOP | typeof PatchOrdering.BOTTOM;" + ] + } + } + }, + "@epam/uui-core:PickerBaseOptions": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "PickerBaseOptions", + "nameFull": "PickerBaseOptions" + }, + "src": "uui-core/src/types/pickers.ts", + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "PickerBaseOptions", + "print": [ + "type PickerBaseOptions = {", + " /** Name of the entity being selected. Affects wording like \"Please select [entity]\" */", + " entityName?: string;", + " /** Plural name of the entity being selected. Affects wording like \"X [entities] selected\" */", + " entityPluralName?: string;", + " /** Datasource to get data for the picker */", + " dataSource: IDataSource;", + " /** A pure function that gets entity name from entity object.", + " Default: (item) => item.name.", + " */", + " getName?: (item: TItem) => string;", + " /** Allow to customize how each selectable row is rendered. Can be used to add subtitles, avatars, etc. */", + " renderRow?: (props: DataRowProps, dataSourceState: DataSourceState) => ReactNode;", + " /** Gets options for each row. Allow to make rows non-selectable, as well as many other tweaks. */", + " getRowOptions?: (item: TItem, index: number) => DataRowOptions;", + " /** Overrides the default 'no records found' banner.", + " * The 'search' callback parameter allows to distinguish cases when there's no records at all, and when current search doesn't find anything. */", + " renderNotFound?: (props: {", + " search: string;", + " onClose: () => void;", + " }) => ReactNode;", + " /** Defines which value is to set on clear. E.g. you can put an empty array instead of null for empty multi-select Pickers */", + " emptyValue?: undefined | null | [", + " ];", + " /** Defines how items should be sorted. By default, items are shown in order they are provided to the DataSource */", + " sortBy?(item: TItem, sorting: SortingOption): any;", + " /** Additional filter to apply to the DataSource. Can be used to limit selection somehow, w/o re-building the DataSource. E.g. in the linked pickers scenario. */", + " filter?: any;", + " /** Defines sorting to pass to the DataSource */", + " sorting?: SortingOption;", + " /**", + " * Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.", + " * - false: All nodes are selected independently (default).", + " * - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.", + " * - 'implicit': Selecting a parent node means that all children are considered checked.", + " * The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked", + " * parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,", + " * its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last", + " * unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked.", + " */", + " cascadeSelection?: CascadeSelection;", + " /** You can return true for all, or some items to fold them. */", + " isFoldedByDefault?(item: TItem): boolean;", + " /** Given an item, should return an array of string fields to search on. By default, the search is performed on item.name field. */", + " getSearchFields?(item: TItem): string[];", + " /** Component ref */", + " ref?: React.Ref;", + "};" + ] + }, + "props": [ { - "uid": "complexIds", - "name": "complexIds", + "uid": "entityName", + "name": "entityName", "comment": { "raw": [ - "Set to true, if you use IDs which can't act as javascript Map key (objects or arrays).", - " In this case, IDs will be internally JSON.stringify-ed to be used as Maps keys." + "Name of the entity being selected. Affects wording like \"Please select [entity]\"" ] }, "typeValue": { - "raw": "boolean" + "raw": "string" }, "editor": { - "type": "bool" + "type": "string" }, - "from": "@epam/uui-core:BaseListViewProps", "required": false }, { - "uid": "getParentId", - "name": "getParentId", + "uid": "entityPluralName", + "name": "entityPluralName", "comment": { "raw": [ - "Should return ID of the Item's parent. Usually it's i => i.parentId.", - " If specified, Data Source will build items hierarchy.", - "", - " Also, it is used by LazyDataSource to pre-fetch missing parents of loaded items. This is required in following cases:", - " - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain", - " to highlight parents with selected children", - " - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),", - " We need to load parents with a separate call (if backend doesn't pre-fetch them)" + "Plural name of the entity being selected. Affects wording like \"X [entities] selected\"" ] }, "typeValue": { - "raw": "(item: TItem) => TId | undefined" + "raw": "string" }, "editor": { - "type": "func" + "type": "string" }, - "from": "@epam/uui-core:BaseListViewProps", "required": false }, { - "uid": "rowOptions", - "name": "rowOptions", + "uid": "dataSource", + "name": "dataSource", "comment": { "raw": [ - "Specifies if rows are selectable, checkable, draggable, clickable, and more.", - " See DataRowOptions for more details.", - " If options depends on the item itself, use getRowOptions.", - " Specifying both rowOptions and getRowOptions might help to render better loading skeletons: we use only rowOptions in this case, as we haven't loaded an item yet.", - " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", - " @param item An item to get options for" + "Datasource to get data for the picker" ] }, "typeValue": { - "raw": "DataRowOptions" + "raw": "IDataSource" }, - "from": "@epam/uui-core:BaseListViewProps", - "required": false + "required": true }, { - "uid": "getRowOptions", - "name": "getRowOptions", + "uid": "getName", + "name": "getName", "comment": { "raw": [ - "For each row, specify if row is selectable, editable, checkable, draggable, clickable, have its own set of columns, and more.", - " To make rows editable, pass IEditable interface to each row. This works the same way as for other editable components.", - " See DataRowOptions for more details.", - " If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.", - " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", - " @param item An item to get options for" + "A pure function that gets entity name from entity object.", + " Default: (item) => item.name." ] }, "typeValue": { - "raw": "(item: TItem, index: number) => DataRowOptions" + "raw": "(item: TItem) => string" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseListViewProps", "required": false }, { - "uid": "isFoldedByDefault", - "name": "isFoldedByDefault", + "uid": "renderRow", + "name": "renderRow", "comment": { "raw": [ - "Can be specified to unfold all or some items at start.", - " If not specified, all rows would be folded." + "Allow to customize how each selectable row is rendered. Can be used to add subtitles, avatars, etc." ] }, "typeValue": { - "raw": "(item: TItem, state: DataSourceState) => boolean" + "raw": "(props: DataRowProps, dataSourceState: DataSourceState, any>) => React.ReactNode" }, "editor": { - "type": "func" + "type": "component" }, - "from": "@epam/uui-core:BaseListViewProps", "required": false }, { - "uid": "cascadeSelection", - "name": "cascadeSelection", + "uid": "getRowOptions", + "name": "getRowOptions", "comment": { "raw": [ - "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.", - " - false: All nodes are selected independently (default).", - " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.", - " - 'implicit': Selecting a parent node means that all children are considered checked.", - " The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked", - " parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,", - " its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last", - " unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked." + "Gets options for each row. Allow to make rows non-selectable, as well as many other tweaks." ] }, "typeValue": { - "raw": "boolean | 'implicit' | 'explicit'" + "raw": "(item: TItem, index: number) => DataRowOptions" }, "editor": { - "type": "oneOf", - "options": [ - false, - true, - "implicit", - "explicit" - ] + "type": "func" }, - "from": "@epam/uui-core:BaseListViewProps", "required": false }, { - "uid": "selectAll", - "name": "selectAll", + "uid": "renderNotFound", + "name": "renderNotFound", "comment": { "raw": [ - "Enables or disables \"select all\" checkbox. Default is true." + "Overrides the default 'no records found' banner.", + " The 'search' callback parameter allows to distinguish cases when there's no records at all, and when current search doesn't find anything." ] }, "typeValue": { - "raw": "boolean" + "raw": "(props: { search: string; onClose: () => void; }) => React.ReactNode" }, "editor": { - "type": "bool" + "type": "component" }, - "from": "@epam/uui-core:BaseListViewProps", "required": false }, { - "uid": "backgroundReload", - "name": "backgroundReload", + "uid": "emptyValue", + "name": "emptyValue", "comment": { "raw": [ - "Enables background reloading of data on search/sort/filter/reload, which turns off the rows placeholders displaying while data loading.", - " During data reloading, previous data is displayed. To prevent any interaction with visible not actual rows, a blocker/spinner should be displayed.", - " In UUI components, such as `PickerInput`, `PickerList`, `PickerModal` and `DataTable`, blockers are added.", - " It is required to add blockers/spinners to the components, built on your own.", - " If reloading is started, `view.getListProps` returns `isReloading` flag, set to `true`." + "Defines which value is to set on clear. E.g. you can put an empty array instead of null for empty multi-select Pickers" ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "null | []" }, - "from": "@epam/uui-core:BaseListViewProps", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:LazyListViewProps": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "LazyListViewProps", - "nameFull": "LazyListViewProps" - }, - "src": "uui-core/src/data/processing/views/LazyListView.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "LazyListViewProps", - "print": [ - "interface LazyListViewProps extends BaseListViewProps {", - " /**", - " * A function to retrieve the data, asynchronously.", - " * This function usually performs a REST API call.", - " * API is used to retrieve lists of items.", - " * It is expected to:", - " * - be able to handle paging (via from/count params)", - " * - be able to retrieve specific items by the list of their ids", - " * - be able to retrieve children by parents (when getChildCount is specified, and ctx.parentId is passed)", - " */", - " api: LazyDataSourceApi;", - " /**", - " * Should return number of children of the item.", - " * If it returns > 0, the item is assumed to have children and to be foldable.", - " * Usually, this value should be returned from API, as a field of a parent, e.g. { id: 1, name: 'London', childCount: 12 }.", - " * In this case, you can implement getChildCount as (i) => i.childCount.", - " *", - " * If you can't get number of children via API, you can return a guess value (avg number of children for this type of entity).", - " * Note, that this can lead to more API calls, and increased load times in the 'parallel' fetch mode.", - " */", - " getChildCount?(item: TItem): number;", - " /**", - " * A filter to pass to API.", - " * Note, that the DataSourceState also has a filter fields. These two filters are merged before API calls.", - " * Use this prop if you need to apply some filter in any case.", - " * Prefer to use filter in the DataSourceState for end-user editable filters.", - " */", - " filter?: TFilter;", - " /**", - " * Defines how to fetch children:", - " * sequential (default) - fetch children for each parent one-by-one. Makes minimal over-querying, at cost of some speed.", - " * parallel - fetch children for several parents simultaneously. Can make a lot of over-querying for deep trees.", - " * Recommended for 2 level trees (grouping), as it makes no over-querying in this case, and is faster than sequential strategy.", - " */", - " fetchStrategy?: 'sequential' | 'parallel';", - " /**", - " * Falls back to plain list from tree, if there's search.", - " * Default is true.", - " *", - " * If enabled, and search is active:", - " * - API will be called with parentId and parent undefined", - " * - getChildCount is ignored, all nodes are assumed to have no children", - " *", - " * See more here: https://github.com/epam/UUI/issues/8", - " */", - " flattenSearchResults?: boolean;", - " /**", - " * This option is added for the purpose of supporting legacy behavior of fetching data", - " * on `getRows` and `getListProps`, not to break users' own implementation of dataSources.", - " * @default true", - " */", - " legacyLoadDataBehavior?: boolean;", - "}" - ] - }, - "props": [ - { - "uid": "api", - "name": "api", - "comment": { - "raw": [ - "A function to retrieve the data, asynchronously.", - " This function usually performs a REST API call.", - " API is used to retrieve lists of items.", - " It is expected to:", - " - be able to handle paging (via from/count params)", - " - be able to retrieve specific items by the list of their ids", - " - be able to retrieve children by parents (when getChildCount is specified, and ctx.parentId is passed)" - ] - }, - "typeValue": { - "raw": "LazyDataSourceApi" - }, - "typeValueRef": "@epam/uui-core:LazyDataSourceApi", - "editor": { - "type": "func" - }, - "required": true }, { - "uid": "getChildCount", - "name": "getChildCount", + "uid": "sortBy", + "name": "sortBy", "comment": { "raw": [ - "Should return number of children of the item.", - " If it returns > 0, the item is assumed to have children and to be foldable.", - " Usually, this value should be returned from API, as a field of a parent, e.g. { id: 1, name: 'London', childCount: 12 }.", - " In this case, you can implement getChildCount as (i) => i.childCount.", - "", - " If you can't get number of children via API, you can return a guess value (avg number of children for this type of entity).", - " Note, that this can lead to more API calls, and increased load times in the 'parallel' fetch mode." + "Defines how items should be sorted. By default, items are shown in order they are provided to the DataSource" ] }, "typeValue": { - "raw": "(item: TItem) => number" + "raw": "(item: TItem, sorting: SortingOption) => any" }, "editor": { "type": "func" @@ -21604,1012 +24969,795 @@ "name": "filter", "comment": { "raw": [ - "A filter to pass to API.", - " Note, that the DataSourceState also has a filter fields. These two filters are merged before API calls.", - " Use this prop if you need to apply some filter in any case.", - " Prefer to use filter in the DataSourceState for end-user editable filters." + "Additional filter to apply to the DataSource. Can be used to limit selection somehow, w/o re-building the DataSource. E.g. in the linked pickers scenario." ] }, "typeValue": { - "raw": "TFilter" + "raw": "any" }, "required": false }, { - "uid": "fetchStrategy", - "name": "fetchStrategy", + "uid": "sorting", + "name": "sorting", "comment": { "raw": [ - "Defines how to fetch children:", - " sequential (default) - fetch children for each parent one-by-one. Makes minimal over-querying, at cost of some speed.", - " parallel - fetch children for several parents simultaneously. Can make a lot of over-querying for deep trees.", - " Recommended for 2 level trees (grouping), as it makes no over-querying in this case, and is faster than sequential strategy." + "Defines sorting to pass to the DataSource" ] }, "typeValue": { - "raw": "'sequential' | 'parallel'" - }, - "editor": { - "type": "oneOf", - "options": [ - "sequential", - "parallel" - ] + "raw": "SortingOption" }, "required": false }, { - "uid": "flattenSearchResults", - "name": "flattenSearchResults", + "uid": "cascadeSelection", + "name": "cascadeSelection", "comment": { "raw": [ - "Falls back to plain list from tree, if there's search.", - " Default is true.", - "", - " If enabled, and search is active:", - " - API will be called with parentId and parent undefined", - " - getChildCount is ignored, all nodes are assumed to have no children", - "", - " See more here: https://github.com/epam/UUI/issues/8" + "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.", + " - false: All nodes are selected independently (default).", + " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.", + " - 'implicit': Selecting a parent node means that all children are considered checked.", + " The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked", + " parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,", + " its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last", + " unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked." ] }, "typeValue": { - "raw": "boolean" + "raw": "boolean | 'implicit' | 'explicit'" }, "editor": { - "type": "bool" + "type": "oneOf", + "options": [ + false, + true, + "implicit", + "explicit" + ] }, "required": false }, { - "uid": "legacyLoadDataBehavior", - "name": "legacyLoadDataBehavior", + "uid": "isFoldedByDefault", + "name": "isFoldedByDefault", "comment": { "raw": [ - "This option is added for the purpose of supporting legacy behavior of fetching data", - " on `getRows` and `getListProps`, not to break users' own implementation of dataSources.", - " @default true" - ], - "tags": { - "@default": true - } + "You can return true for all, or some items to fold them." + ] }, "typeValue": { - "raw": "boolean" + "raw": "(item: TItem) => boolean" }, "editor": { - "type": "bool" + "type": "func" }, "required": false }, { - "uid": "getId", - "name": "getId", + "uid": "getSearchFields", + "name": "getSearchFields", "comment": { "raw": [ - "Should return unique ID of the TItem", - " If omitted, we assume that every TItem has and unique id in its 'id' field.", - " @param item An item to get ID of" + "Given an item, should return an array of string fields to search on. By default, the search is performed on item.name field." ] }, "typeValue": { - "raw": "(item: TItem) => TId" + "raw": "(item: TItem) => string[]" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseListViewProps", "required": false }, { - "uid": "complexIds", - "name": "complexIds", + "uid": "ref", + "name": "ref", "comment": { "raw": [ - "Set to true, if you use IDs which can't act as javascript Map key (objects or arrays).", - " In this case, IDs will be internally JSON.stringify-ed to be used as Maps keys." + "Component ref" ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "null | (instance: HTMLElement | null) => void | React.RefObject" }, - "from": "@epam/uui-core:BaseListViewProps", "required": false - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:PickerBaseProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "PickerBaseProps", + "nameFull": "PickerBaseProps" + }, + "src": "uui-core/src/types/pickers.ts", + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "PickerBaseOptions & { selectionMode: 'single'; valueType?: 'id' | undefined; } & IEditable & IAnalyticableOnChange & PickerShowSelectedOnly | PickerBaseOptions & { selectionMode: 'single'; valueType: 'entity'; } & IEditable & IAnalyticableOnChange & PickerShowSelectedOnly | PickerBaseOptions & { selectionMode: 'multi'; valueType?: 'id' | undefined; emptyValue?: [] | null | undefined; } & IEditable & IAnalyticableOnChange & PickerShowSelectedOnly | PickerBaseOptions & { selectionMode: 'multi'; valueType: 'entity'; emptyValue?: [] | null | undefined; } & IEditable & IAnalyticableOnChange & PickerShowSelectedOnly", + "print": [ + "type PickerBaseProps = PickerBaseOptions & PickerBindingProps & IAnalyticableOnChange & PickerShowSelectedOnly;" + ] + }, + "props": [ { - "uid": "getParentId", - "name": "getParentId", + "uid": "entityName", + "name": "entityName", "comment": { "raw": [ - "Should return ID of the Item's parent. Usually it's i => i.parentId.", - " If specified, Data Source will build items hierarchy.", - "", - " Also, it is used by LazyDataSource to pre-fetch missing parents of loaded items. This is required in following cases:", - " - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain", - " to highlight parents with selected children", - " - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),", - " We need to load parents with a separate call (if backend doesn't pre-fetch them)" + "Name of the entity being selected. Affects wording like \"Please select [entity]\"" ] }, "typeValue": { - "raw": "(item: TItem) => TId | undefined" + "raw": "string" }, "editor": { - "type": "func" + "type": "string" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:PickerBaseOptions", "required": false }, { - "uid": "rowOptions", - "name": "rowOptions", + "uid": "entityPluralName", + "name": "entityPluralName", "comment": { "raw": [ - "Specifies if rows are selectable, checkable, draggable, clickable, and more.", - " See DataRowOptions for more details.", - " If options depends on the item itself, use getRowOptions.", - " Specifying both rowOptions and getRowOptions might help to render better loading skeletons: we use only rowOptions in this case, as we haven't loaded an item yet.", - " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", - " @param item An item to get options for" + "Plural name of the entity being selected. Affects wording like \"X [entities] selected\"" ] }, "typeValue": { - "raw": "DataRowOptions" + "raw": "string" + }, + "editor": { + "type": "string" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:PickerBaseOptions", "required": false }, { - "uid": "getRowOptions", - "name": "getRowOptions", + "uid": "dataSource", + "name": "dataSource", "comment": { "raw": [ - "For each row, specify if row is selectable, editable, checkable, draggable, clickable, have its own set of columns, and more.", - " To make rows editable, pass IEditable interface to each row. This works the same way as for other editable components.", - " See DataRowOptions for more details.", - " If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.", - " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", - " @param item An item to get options for" + "Datasource to get data for the picker" ] }, "typeValue": { - "raw": "(item: TItem, index: number) => DataRowOptions" - }, - "editor": { - "type": "func" + "raw": "IDataSource" }, - "from": "@epam/uui-core:BaseListViewProps", - "required": false + "from": "@epam/uui-core:PickerBaseOptions", + "required": true }, { - "uid": "isFoldedByDefault", - "name": "isFoldedByDefault", + "uid": "getName", + "name": "getName", "comment": { "raw": [ - "Can be specified to unfold all or some items at start.", - " If not specified, all rows would be folded." + "A pure function that gets entity name from entity object.", + " Default: (item) => item.name." ] }, "typeValue": { - "raw": "(item: TItem, state: DataSourceState) => boolean" + "raw": "(item: TItem) => string" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:PickerBaseOptions", "required": false }, { - "uid": "cascadeSelection", - "name": "cascadeSelection", + "uid": "renderRow", + "name": "renderRow", "comment": { "raw": [ - "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.", - " - false: All nodes are selected independently (default).", - " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.", - " - 'implicit': Selecting a parent node means that all children are considered checked.", - " The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked", - " parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,", - " its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last", - " unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked." + "Allow to customize how each selectable row is rendered. Can be used to add subtitles, avatars, etc." ] }, "typeValue": { - "raw": "boolean | 'implicit' | 'explicit'" + "raw": "(props: DataRowProps, dataSourceState: DataSourceState, any>) => React.ReactNode" }, "editor": { - "type": "oneOf", - "options": [ - false, - true, - "implicit", - "explicit" - ] + "type": "component" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:PickerBaseOptions", "required": false }, { - "uid": "selectAll", - "name": "selectAll", + "uid": "getRowOptions", + "name": "getRowOptions", "comment": { "raw": [ - "Enables or disables \"select all\" checkbox. Default is true." + "Gets options for each row. Allow to make rows non-selectable, as well as many other tweaks." ] }, "typeValue": { - "raw": "boolean" + "raw": "(item: TItem, index: number) => DataRowOptions" }, "editor": { - "type": "bool" + "type": "func" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:PickerBaseOptions", "required": false }, { - "uid": "backgroundReload", - "name": "backgroundReload", + "uid": "renderNotFound", + "name": "renderNotFound", "comment": { "raw": [ - "Enables background reloading of data on search/sort/filter/reload, which turns off the rows placeholders displaying while data loading.", - " During data reloading, previous data is displayed. To prevent any interaction with visible not actual rows, a blocker/spinner should be displayed.", - " In UUI components, such as `PickerInput`, `PickerList`, `PickerModal` and `DataTable`, blockers are added.", - " It is required to add blockers/spinners to the components, built on your own.", - " If reloading is started, `view.getListProps` returns `isReloading` flag, set to `true`." + "Overrides the default 'no records found' banner.", + " The 'search' callback parameter allows to distinguish cases when there's no records at all, and when current search doesn't find anything." ] }, "typeValue": { - "raw": "boolean" + "raw": "(props: { search: string; onClose: () => void; }) => React.ReactNode" }, "editor": { - "type": "bool" + "type": "component" }, - "from": "@epam/uui-core:BaseListViewProps", + "from": "@epam/uui-core:PickerBaseOptions", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:LazyLoadedMapLoadCallback": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "LazyLoadedMapLoadCallback", - "nameFull": "LazyLoadedMapLoadCallback" - }, - "src": "uui-core/src/helpers/LazyLoadedMap.ts", - "comment": { - "raw": [ - "An callback to pass to LazyLoadedMap constructor" - ] - }, - "exported": true - }, - "details": { - "kind": 265, - "typeValue": { - "raw": "LazyLoadedMapLoadCallback", - "print": [ - "/**", - " * An callback to pass to LazyLoadedMap constructor", - " */", - "type LazyLoadedMapLoadCallback = (pending: TKey[]) => Promise<[", - " TKey,", - " TValue", - "][]>;" - ] - } - } - }, - "@epam/uui-core:Link": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "Link", - "nameFull": "Link" - }, - "src": "uui-core/src/types/objects.ts", - "comment": { - "raw": [ - "Defines location within SPA application" - ] - }, - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "Link", - "print": [ - "/** Defines location within SPA application */", - "interface Link {", - " /** A URL pathname, beginning with a '/' */", - " pathname: string;", - " /** Object that will be parsed to the URL search params */", - " query?: any;", - " /** A URL search string, beginning with a '?' */", - " search?: string;", - " /** A unique string associated with this location. May be used to safely store", - " * and retrieve data in some other storage API, like `localStorage`.", - " *", - " * Note: This value is always \"default\" on the initial location.", - " */", - " key?: string;", - " /** A URL fragment identifier, beginning with a '#' */", - " hash?: string;", - " /** A value of arbitrary data associated with this location */", - " state?: any;", - "}" - ] - }, - "props": [ + }, { - "uid": "pathname", - "name": "pathname", + "uid": "emptyValue", + "name": "emptyValue", "comment": { "raw": [ - "A URL pathname, beginning with a '/'" + "Defines which value is to set on clear. E.g. you can put an empty array instead of null for empty multi-select Pickers" ] }, "typeValue": { - "raw": "string" + "raw": "null | []" + }, + "from": "@epam/uui-core:PickerBaseOptions", + "required": false + }, + { + "uid": "sortBy", + "name": "sortBy", + "comment": { + "raw": [ + "Defines how items should be sorted. By default, items are shown in order they are provided to the DataSource" + ] + }, + "typeValue": { + "raw": "(item: TItem, sorting: SortingOption) => any" }, "editor": { - "type": "string" + "type": "func" }, - "required": true + "from": "@epam/uui-core:PickerBaseOptions", + "required": false }, { - "uid": "query", - "name": "query", + "uid": "filter", + "name": "filter", "comment": { "raw": [ - "Object that will be parsed to the URL search params" + "Additional filter to apply to the DataSource. Can be used to limit selection somehow, w/o re-building the DataSource. E.g. in the linked pickers scenario." ] }, "typeValue": { "raw": "any" }, + "from": "@epam/uui-core:PickerBaseOptions", "required": false }, { - "uid": "search", - "name": "search", + "uid": "sorting", + "name": "sorting", "comment": { "raw": [ - "A URL search string, beginning with a '?'" + "Defines sorting to pass to the DataSource" ] }, "typeValue": { - "raw": "string" - }, - "editor": { - "type": "string" + "raw": "SortingOption" }, + "from": "@epam/uui-core:PickerBaseOptions", "required": false }, { - "uid": "key", - "name": "key", + "uid": "cascadeSelection", + "name": "cascadeSelection", "comment": { "raw": [ - "A unique string associated with this location. May be used to safely store", - " and retrieve data in some other storage API, like `localStorage`.", - "", - " Note: This value is always \"default\" on the initial location." + "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.", + " - false: All nodes are selected independently (default).", + " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.", + " - 'implicit': Selecting a parent node means that all children are considered checked.", + " The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked", + " parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,", + " its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last", + " unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked." ] }, "typeValue": { - "raw": "string" + "raw": "boolean | 'implicit' | 'explicit'" }, "editor": { - "type": "string" + "type": "oneOf", + "options": [ + false, + true, + "implicit", + "explicit" + ] }, + "from": "@epam/uui-core:PickerBaseOptions", "required": false }, { - "uid": "hash", - "name": "hash", + "uid": "isFoldedByDefault", + "name": "isFoldedByDefault", "comment": { "raw": [ - "A URL fragment identifier, beginning with a '#'" + "You can return true for all, or some items to fold them." ] }, "typeValue": { - "raw": "string" + "raw": "(item: TItem) => boolean" }, "editor": { - "type": "string" + "type": "func" }, + "from": "@epam/uui-core:PickerBaseOptions", "required": false }, { - "uid": "state", - "name": "state", + "uid": "getSearchFields", + "name": "getSearchFields", "comment": { "raw": [ - "A value of arbitrary data associated with this location" + "Given an item, should return an array of string fields to search on. By default, the search is performed on item.name field." ] }, "typeValue": { - "raw": "any" + "raw": "(item: TItem) => string[]" + }, + "editor": { + "type": "func" }, + "from": "@epam/uui-core:PickerBaseOptions", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:ListApiResponse": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "ListApiResponse", - "nameFull": "ListApiResponse" - }, - "src": "uui-core/src/data/processing/ListApiCache.tsx", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "ListApiResponse", - "print": [ - "interface ListApiResponse {", - " /** Items according to the request. For items that are not fetched yet, null will be returned. */", - " items: TItem[];", - "}" - ] - }, - "props": [ + }, { - "uid": "items", - "name": "items", + "uid": "ref", + "name": "ref", "comment": { "raw": [ - "Items according to the request. For items that are not fetched yet, null will be returned." + "Component ref" ] }, "typeValue": { - "raw": "TItem[]" + "raw": "null | (instance: HTMLElement | null) => void | React.RefObject" }, - "required": true - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:ListApiSettings": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "ListApiSettings", - "nameFull": "ListApiSettings" - }, - "src": "uui-core/src/data/processing/ListApiCache.tsx", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "ListApiSettings", - "print": [ - "interface ListApiSettings {", - " /** Lazy List API used to fetch items */", - " api: LazyDataSourceApi;", - " /** Get ID from an item. Id is expected to be value-type, i.e. can be used as Map's key */", - " getId: (item: TItem) => TId;", - " /** Will be called after new data is fetched into the list */", - " onUpdate?: () => void;", - "}" - ] - }, - "props": [ + "from": "@epam/uui-core:PickerBaseOptions", + "required": false + }, { - "uid": "api", - "name": "api", + "uid": "selectionMode", + "name": "selectionMode", "comment": { "raw": [ - "Lazy List API used to fetch items" + "If 'single' provided - only one item is selected. In case of 'multi' - multiple items are selected" ] }, "typeValue": { - "raw": "LazyDataSourceApi" + "raw": "'single'" }, - "typeValueRef": "@epam/uui-core:LazyDataSourceApi", "editor": { - "type": "func" + "type": "oneOf", + "options": [ + "single" + ] }, + "from": "@epam/uui-core:SinglePickerProps", "required": true }, { - "uid": "getId", - "name": "getId", + "uid": "valueType", + "name": "valueType", "comment": { "raw": [ - "Get ID from an item. Id is expected to be value-type, i.e. can be used as Map's key" + "Defines what to use in value/onValueChange: 'id' - item id (TId). 'entity' - the item itself (TItem)" ] }, "typeValue": { - "raw": "(item: TItem) => TId" + "raw": "'id'" }, "editor": { - "type": "func" + "type": "oneOf", + "options": [ + "id" + ] }, - "required": true + "from": "@epam/uui-core:SinglePickerProps", + "required": false }, { - "uid": "onUpdate", - "name": "onUpdate", + "uid": "isInvalid", + "name": "isInvalid", "comment": { "raw": [ - "Will be called after new data is fetched into the list" + "True if component contains invalid input" ] }, "typeValue": { - "raw": "() => void" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, + "from": "@epam/uui-core:ICanBeInvalid", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:LoadingStatus": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "LoadingStatus", - "nameFull": "LoadingStatus" - }, - "src": "uui-core/src/helpers/LazyLoadedMap.ts", - "exported": true - }, - "details": { - "kind": 265, - "typeValue": { - "raw": "typeof UNKNOWN | typeof LOADING | typeof PENDING | typeof LOADED | typeof FAILED", - "print": [ - "type LoadingStatus = typeof UNKNOWN | typeof LOADING | typeof PENDING | typeof LOADED | typeof FAILED;" - ] - } - } - }, - "@epam/uui-core:LoadTreeOptions": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "LoadTreeOptions", - "nameFull": "LoadTreeOptions" - }, - "src": "uui-core/src/data/processing/views/tree/ITree.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "LoadTreeOptions", - "print": [ - "interface LoadTreeOptions extends Pick, 'api' | 'getChildCount' | 'filter' | 'fetchStrategy' | 'flattenSearchResults'> {", - " loadAllChildren?(id: TId): boolean;", - " isLoadStrict?: boolean;", - " isFolded?: (item: TItem) => boolean;", - "}" - ] - }, - "props": [ + }, { - "uid": "loadAllChildren", - "name": "loadAllChildren", + "uid": "isDisabled", + "name": "isDisabled", + "comment": { + "raw": [ + "Disable editing, and visually de-emphasize value of the component" + ] + }, "typeValue": { - "raw": "(id: TId) => boolean" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, + "from": "@epam/uui-core:IDisableable", "required": false }, { - "uid": "isLoadStrict", - "name": "isLoadStrict", + "uid": "isReadonly", + "name": "isReadonly", + "comment": { + "raw": [ + "Disable editing. Unlike isDisabled, keep component's value readable." + ] + }, "typeValue": { "raw": "boolean" }, "editor": { "type": "bool" }, + "from": "@epam/uui-core:ICanBeReadonly", "required": false }, { - "uid": "isFolded", - "name": "isFolded", + "uid": "isRequired", + "name": "isRequired", + "comment": { + "raw": [ + "Marks that component's value is required and shouldn't be empty" + ] + }, "typeValue": { - "raw": "(item: TItem) => boolean" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, + "from": "@epam/uui-core:ICanBeRequired", "required": false }, { - "uid": "filter", - "name": "filter", + "uid": "value", + "name": "value", "comment": { "raw": [ - "A filter to pass to API.", - " Note, that the DataSourceState also has a filter fields. These two filters are merged before API calls.", - " Use this prop if you need to apply some filter in any case.", - " Prefer to use filter in the DataSourceState for end-user editable filters." + "The current value of component" ] }, "typeValue": { - "raw": "TFilter" + "raw": "TId" }, - "from": "@epam/uui-core:LazyListViewProps", - "required": false + "from": "@epam/uui-core:IControlled", + "required": true }, { - "uid": "api", - "name": "api", + "uid": "onValueChange", + "name": "onValueChange", "comment": { "raw": [ - "A function to retrieve the data, asynchronously.", - " This function usually performs a REST API call.", - " API is used to retrieve lists of items.", - " It is expected to:", - " - be able to handle paging (via from/count params)", - " - be able to retrieve specific items by the list of their ids", - " - be able to retrieve children by parents (when getChildCount is specified, and ctx.parentId is passed)" + "Called when value needs to be changed (usually due to user interaction)" ] }, "typeValue": { - "raw": "LazyDataSourceApi" + "raw": "(newValue: TId) => void" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:LazyListViewProps", + "from": "@epam/uui-core:IControlled", "required": true }, { - "uid": "getChildCount", - "name": "getChildCount", + "uid": "getValueChangeAnalyticsEvent", + "name": "getValueChangeAnalyticsEvent", "comment": { "raw": [ - "Should return number of children of the item.", - " If it returns > 0, the item is assumed to have children and to be foldable.", - " Usually, this value should be returned from API, as a field of a parent, e.g. { id: 1, name: 'London', childCount: 12 }.", - " In this case, you can implement getChildCount as (i) => i.childCount.", - "", - " If you can't get number of children via API, you can return a guess value (avg number of children for this type of entity).", - " Note, that this can lead to more API calls, and increased load times in the 'parallel' fetch mode." + "Given a value, returns an analytics event to send when component is edited.", + " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)." ] }, "typeValue": { - "raw": "(item: TItem) => number" + "raw": "(newValue: any, oldValue: any) => AnalyticsEvent" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:LazyListViewProps", + "from": "@epam/uui-core:IAnalyticableOnChange", "required": false }, { - "uid": "fetchStrategy", - "name": "fetchStrategy", + "uid": "showSelectedOnly", + "name": "showSelectedOnly", "comment": { "raw": [ - "Defines how to fetch children:", - " sequential (default) - fetch children for each parent one-by-one. Makes minimal over-querying, at cost of some speed.", - " parallel - fetch children for several parents simultaneously. Can make a lot of over-querying for deep trees.", - " Recommended for 2 level trees (grouping), as it makes no over-querying in this case, and is faster than sequential strategy." + "Enables/disables selected rows only in Picker." ] }, "typeValue": { - "raw": "'sequential' | 'parallel'" + "raw": "boolean" }, "editor": { - "type": "oneOf", - "options": [ - "sequential", - "parallel" - ] + "type": "bool" }, - "from": "@epam/uui-core:LazyListViewProps", + "from": "@epam/uui-core:PickerShowSelectedOnly", "required": false }, { - "uid": "flattenSearchResults", - "name": "flattenSearchResults", + "uid": "valueType_2", + "name": "valueType", "comment": { "raw": [ - "Falls back to plain list from tree, if there's search.", - " Default is true.", - "", - " If enabled, and search is active:", - " - API will be called with parentId and parent undefined", - " - getChildCount is ignored, all nodes are assumed to have no children", - "", - " See more here: https://github.com/epam/UUI/issues/8" + "Defines what to use in value/onValueChange: 'id' - item id (TId). 'entity' - the item itself (TItem)" ] }, "typeValue": { - "raw": "boolean" + "raw": "'entity'" }, "editor": { - "type": "bool" + "type": "oneOf", + "options": [ + "entity" + ] }, - "from": "@epam/uui-core:LazyListViewProps", - "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:Metadata": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "Metadata", - "nameFull": "Metadata" - }, - "src": "uui-core/src/types/validation.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "Metadata", - "print": [ - "interface Metadata extends IDisableable, ICanBeReadonly, ICanBeRequired {", - " /** Metadata for the nested fields */", - " props?: {", - " [P in keyof T]?: Metadata;", - " };", - " /**", - " * Metadata for all fields of current level of object.", - " * Usually used for consistent validation of arrays.", - " */", - " all?: Metadata>;", - " /** Defines minimal value to pass the validation */", - " minValue?: number;", - " /** Defines maximal value to pass the validation */", - " maxValue?: number;", - " /** Defines maximal length of the string to pass the validation */", - " maxLength?: number;", - " /** Array of your custom validators.", - " * Validator is a pure function that accept value and should return error message if this field is invalid.", - " * If validators provided, all other metadata options(e.g. isRequired, maxLength) will be ignored.", - " * */", - " validators?: CustomValidator[];", - "}" - ] - }, - "props": [ + "from": "@epam/uui-core:SinglePickerProps", + "required": true + }, { - "uid": "props", - "name": "props", + "uid": "value_2", + "name": "value", "comment": { "raw": [ - "Metadata for the nested fields" + "The current value of component" ] }, "typeValue": { - "raw": "{ [P in keyof T]?: Metadata | undefined; }" + "raw": "TItem" }, - "required": false + "from": "@epam/uui-core:IControlled", + "required": true }, { - "uid": "all", - "name": "all", + "uid": "onValueChange_2", + "name": "onValueChange", "comment": { "raw": [ - "Metadata for all fields of current level of object.", - " Usually used for consistent validation of arrays." + "Called when value needs to be changed (usually due to user interaction)" ] }, "typeValue": { - "raw": "Metadata>" + "raw": "(newValue: TItem) => void" }, - "required": false + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IControlled", + "required": true }, { - "uid": "minValue", - "name": "minValue", + "uid": "selectionMode_3", + "name": "selectionMode", "comment": { "raw": [ - "Defines minimal value to pass the validation" + "If 'single' provided - only one item is selected. In case of 'multi' - multiple items are selected" ] }, "typeValue": { - "raw": "number" + "raw": "'multi'" }, "editor": { - "type": "number" + "type": "oneOf", + "options": [ + "multi" + ] }, - "required": false + "from": "@epam/uui-core:ArrayPickerProps", + "required": true }, { - "uid": "maxValue", - "name": "maxValue", + "uid": "valueType_3", + "name": "valueType", "comment": { "raw": [ - "Defines maximal value to pass the validation" + "Defines what to use in value/onValueChange: 'id' - item id (TId). 'entity' - the item itself (TItem)" ] }, "typeValue": { - "raw": "number" + "raw": "'id'" }, "editor": { - "type": "number" + "type": "oneOf", + "options": [ + "id" + ] }, + "from": "@epam/uui-core:ArrayPickerProps", "required": false }, { - "uid": "maxLength", - "name": "maxLength", + "uid": "value_3", + "name": "value", "comment": { "raw": [ - "Defines maximal length of the string to pass the validation" + "The current value of component" ] }, "typeValue": { - "raw": "number" - }, - "editor": { - "type": "number" + "raw": "TId[]" }, - "required": false + "from": "@epam/uui-core:IControlled", + "required": true }, { - "uid": "validators", - "name": "validators", + "uid": "onValueChange_3", + "name": "onValueChange", "comment": { "raw": [ - "Array of your custom validators.", - " Validator is a pure function that accept value and should return error message if this field is invalid.", - " If validators provided, all other metadata options(e.g. isRequired, maxLength) will be ignored." + "Called when value needs to be changed (usually due to user interaction)" ] }, "typeValue": { - "raw": "CustomValidator[]" + "raw": "(newValue: TId[]) => void" }, - "required": false + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IControlled", + "required": true }, { - "uid": "isDisabled", - "name": "isDisabled", + "uid": "valueType_4", + "name": "valueType", "comment": { "raw": [ - "Disable editing, and visually de-emphasize value of the component" + "Defines what to use in value/onValueChange: 'id' - item id (TId). 'entity' - the item itself (TItem)" ] }, "typeValue": { - "raw": "boolean" + "raw": "'entity'" }, "editor": { - "type": "bool" + "type": "oneOf", + "options": [ + "entity" + ] }, - "from": "@epam/uui-core:IDisableable", - "required": false + "from": "@epam/uui-core:ArrayPickerProps", + "required": true }, { - "uid": "isReadonly", - "name": "isReadonly", + "uid": "value_4", + "name": "value", "comment": { "raw": [ - "Disable editing. Unlike isDisabled, keep component's value readable." + "The current value of component" ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "TItem[]" }, - "from": "@epam/uui-core:ICanBeReadonly", - "required": false + "from": "@epam/uui-core:IControlled", + "required": true }, { - "uid": "isRequired", - "name": "isRequired", + "uid": "onValueChange_4", + "name": "onValueChange", "comment": { "raw": [ - "Marks that component's value is required and shouldn't be empty" + "Called when value needs to be changed (usually due to user interaction)" ] }, "typeValue": { - "raw": "boolean" + "raw": "(newValue: TItem[]) => void" }, "editor": { - "type": "bool" + "type": "func" }, - "from": "@epam/uui-core:ICanBeRequired", - "required": false + "from": "@epam/uui-core:IControlled", + "required": true } ], - "propsFromUnion": false + "propsFromUnion": true } }, - "@epam/uui-core:ModalBlockerProps": { + "@epam/uui-core:PickerBindingProps": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "ModalBlockerProps", - "nameFull": "ModalBlockerProps" + "name": "PickerBindingProps", + "nameFull": "PickerBindingProps" }, - "src": "uui-core/src/types/components/Modals.ts", + "src": "uui-core/src/types/pickers.ts", "exported": true }, "details": { - "kind": 264, + "kind": 265, "typeValue": { - "raw": "ModalBlockerProps", + "raw": "{ selectionMode: 'single'; valueType?: 'id' | undefined; } & IEditable | { selectionMode: 'single'; valueType: 'entity'; } & IEditable | { selectionMode: 'multi'; valueType?: 'id' | undefined; emptyValue?: [] | null | undefined; } & IEditable | { selectionMode: 'multi'; valueType: 'entity'; emptyValue?: [] | null | undefined; } & IEditable", "print": [ - "interface ModalBlockerProps extends IModal, IHasCX, IHasChildren, IHasRawProps>, IHasForwardedRef {", - " /** Pass true to disabled locking focus inside modal.", - " * If omitted, first clickable element of modal will receive focus on mount and focus will be looped inside modal.", - " * */", - " disableFocusLock?: boolean;", - " /** Pass true to disabled modal closing by 'esc' key */", - " disableCloseByEsc?: boolean;", - " /** Pass true to disabled modal closing by click outside modal window */", - " disallowClickOutside?: boolean;", - " /**", - " * Pass true to disable modal close by router change.", - " * If omitted, modal window will be closed on any router change.", - " */", - " disableCloseOnRouterChange?: boolean;", - "}" + "type PickerBindingProps = SinglePickerProps | ArrayPickerProps;" ] }, "props": [ { - "uid": "disableFocusLock", - "name": "disableFocusLock", + "uid": "selectionMode", + "name": "selectionMode", "comment": { "raw": [ - "Pass true to disabled locking focus inside modal.", - " If omitted, first clickable element of modal will receive focus on mount and focus will be looped inside modal." + "If 'single' provided - only one item is selected. In case of 'multi' - multiple items are selected" ] }, "typeValue": { - "raw": "boolean" + "raw": "'single'" }, "editor": { - "type": "bool" + "type": "oneOf", + "options": [ + "single" + ] }, - "required": false + "from": "@epam/uui-core:SinglePickerProps", + "required": true }, { - "uid": "disableCloseByEsc", - "name": "disableCloseByEsc", + "uid": "valueType", + "name": "valueType", "comment": { "raw": [ - "Pass true to disabled modal closing by 'esc' key" + "Defines what to use in value/onValueChange: 'id' - item id (TId). 'entity' - the item itself (TItem)" ] }, "typeValue": { - "raw": "boolean" + "raw": "'id'" }, "editor": { - "type": "bool" + "type": "oneOf", + "options": [ + "id" + ] }, + "from": "@epam/uui-core:SinglePickerProps", "required": false }, { - "uid": "disallowClickOutside", - "name": "disallowClickOutside", + "uid": "isInvalid", + "name": "isInvalid", "comment": { "raw": [ - "Pass true to disabled modal closing by click outside modal window" + "True if component contains invalid input" ] }, "typeValue": { @@ -22618,15 +25766,15 @@ "editor": { "type": "bool" }, + "from": "@epam/uui-core:ICanBeInvalid", "required": false }, { - "uid": "disableCloseOnRouterChange", - "name": "disableCloseOnRouterChange", + "uid": "isDisabled", + "name": "isDisabled", "comment": { "raw": [ - "Pass true to disable modal close by router change.", - " If omitted, modal window will be closed on any router change." + "Disable editing, and visually de-emphasize value of the component" ] }, "typeValue": { @@ -22635,14 +25783,15 @@ "editor": { "type": "bool" }, + "from": "@epam/uui-core:IDisableable", "required": false }, { - "uid": "isActive", - "name": "isActive", + "uid": "isReadonly", + "name": "isReadonly", "comment": { "raw": [ - "Indicates whether the modal is currently displayed" + "Disable editing. Unlike isDisabled, keep component's value readable." ] }, "typeValue": { @@ -22651,671 +25800,510 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:IModal", + "from": "@epam/uui-core:ICanBeReadonly", "required": false }, { - "uid": "key", - "name": "key", + "uid": "isRequired", + "name": "isRequired", "comment": { "raw": [ - "Unique key of the modal" + "Marks that component's value is required and shouldn't be empty" ] }, "typeValue": { - "raw": "string" + "raw": "boolean" }, "editor": { - "type": "string" + "type": "bool" }, - "from": "@epam/uui-core:IModal", - "required": true + "from": "@epam/uui-core:ICanBeRequired", + "required": false }, { - "uid": "zIndex", - "name": "zIndex", + "uid": "value", + "name": "value", "comment": { "raw": [ - "Modal zIndex value. Calculated via LayoutContext." + "The current value of component" ] }, "typeValue": { - "raw": "number" - }, - "editor": { - "type": "number" + "raw": "TId" }, - "from": "@epam/uui-core:IModal", + "from": "@epam/uui-core:IControlled", "required": true }, { - "uid": "success", - "name": "success", + "uid": "onValueChange", + "name": "onValueChange", "comment": { "raw": [ - "Call to successfully close the modal. It's resolves `modalContext.show()` promise with provided value." + "Called when value needs to be changed (usually due to user interaction)" ] }, "typeValue": { - "raw": "(result: any) => void" + "raw": "(newValue: TId) => void" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:IModal", + "from": "@epam/uui-core:IControlled", "required": true }, { - "uid": "abort", - "name": "abort", + "uid": "valueType_2", + "name": "valueType", "comment": { "raw": [ - "Call to close the modal with abort action. It's rejects `modalContext.show()` promise with provided value." + "Defines what to use in value/onValueChange: 'id' - item id (TId). 'entity' - the item itself (TItem)" ] }, "typeValue": { - "raw": "(result?: any) => void" + "raw": "'entity'" }, "editor": { - "type": "func" + "type": "oneOf", + "options": [ + "entity" + ] }, - "from": "@epam/uui-core:IModal", + "from": "@epam/uui-core:SinglePickerProps", "required": true }, { - "uid": "parameters", - "name": "parameters", + "uid": "value_2", + "name": "value", "comment": { "raw": [ - "Parameters that provided via second param of `modalContext.show` method" + "The current value of component" ] }, "typeValue": { - "raw": "any" + "raw": "TItem" }, - "from": "@epam/uui-core:IModal", - "required": false + "from": "@epam/uui-core:IControlled", + "required": true }, { - "uid": "depth", - "name": "depth", + "uid": "onValueChange_2", + "name": "onValueChange", "comment": { "raw": [ - "Depth of current modal layer" + "Called when value needs to be changed (usually due to user interaction)" ] }, "typeValue": { - "raw": "number" + "raw": "(newValue: TItem) => void" }, "editor": { - "type": "number" + "type": "func" }, - "from": "@epam/uui-core:IModal", - "required": false + "from": "@epam/uui-core:IControlled", + "required": true }, { - "uid": "cx", - "name": "cx", + "uid": "selectionMode_3", + "name": "selectionMode", "comment": { "raw": [ - "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" + "If 'single' provided - only one item is selected. In case of 'multi' - multiple items are selected" ] }, "typeValue": { - "raw": "null | string | number | boolean | ClassDictionary | ClassArray" + "raw": "'multi'" }, - "typeValueRef": "@epam/uui-core:ClassValue", - "from": "@epam/uui-core:IHasCX", - "required": false + "editor": { + "type": "oneOf", + "options": [ + "multi" + ] + }, + "from": "@epam/uui-core:ArrayPickerProps", + "required": true }, { - "uid": "children", - "name": "children", + "uid": "valueType_3", + "name": "valueType", "comment": { "raw": [ - "Component children" + "Defines what to use in value/onValueChange: 'id' - item id (TId). 'entity' - the item itself (TItem)" ] }, "typeValue": { - "raw": "React.ReactNode" + "raw": "'id'" }, - "typeValueRef": "@types/react:ReactNode", - "from": "@epam/uui-core:IHasChildren", + "editor": { + "type": "oneOf", + "options": [ + "id" + ] + }, + "from": "@epam/uui-core:ArrayPickerProps", "required": false }, { - "uid": "rawProps", - "name": "rawProps", + "uid": "emptyValue", + "name": "emptyValue", "comment": { "raw": [ - "Any HTML attributes (native or 'data-') to put on the underlying component" + "Defines what to use as an empty value. If other value provided, it will be assumed as selection" ] }, "typeValue": { - "raw": "React.HTMLAttributes & Record<`data-${string}`, string>" + "raw": "null | []" }, - "from": "@epam/uui-core:IHasRawProps", + "from": "@epam/uui-core:ArrayPickerProps", "required": false }, { - "uid": "forwardedRef", - "name": "forwardedRef", + "uid": "value_3", + "name": "value", "comment": { "raw": [ - "this ref is passed to the underlying component" + "The current value of component" ] }, "typeValue": { - "raw": "null | (instance: HTMLDivElement | null) => void | React.MutableRefObject" + "raw": "TId[]" }, - "from": "@epam/uui-core:IHasForwardedRef", - "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:ModalFooterCoreProps": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "ModalFooterCoreProps", - "nameFull": "ModalFooterCoreProps" - }, - "src": "uui-core/src/types/components/Modals.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "ModalFooterCoreProps", - "print": [ - "interface ModalFooterCoreProps extends IHasChildren, IHasCX, IHasRawProps> {", - " /** Pass true to enable the top border of ModalFooter */", - " borderTop?: boolean;", - "}" - ] - }, - "props": [ + "from": "@epam/uui-core:IControlled", + "required": true + }, { - "uid": "borderTop", - "name": "borderTop", + "uid": "onValueChange_3", + "name": "onValueChange", "comment": { "raw": [ - "Pass true to enable the top border of ModalFooter" + "Called when value needs to be changed (usually due to user interaction)" ] }, "typeValue": { - "raw": "boolean" + "raw": "(newValue: TId[]) => void" }, "editor": { - "type": "bool" + "type": "func" }, - "required": false + "from": "@epam/uui-core:IControlled", + "required": true }, { - "uid": "children", - "name": "children", + "uid": "valueType_4", + "name": "valueType", "comment": { "raw": [ - "Component children" + "Defines what to use in value/onValueChange: 'id' - item id (TId). 'entity' - the item itself (TItem)" ] }, "typeValue": { - "raw": "React.ReactNode" + "raw": "'entity'" }, - "typeValueRef": "@types/react:ReactNode", - "from": "@epam/uui-core:IHasChildren", - "required": false + "editor": { + "type": "oneOf", + "options": [ + "entity" + ] + }, + "from": "@epam/uui-core:ArrayPickerProps", + "required": true }, { - "uid": "cx", - "name": "cx", + "uid": "value_4", + "name": "value", "comment": { "raw": [ - "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" + "The current value of component" ] }, "typeValue": { - "raw": "null | string | number | boolean | ClassDictionary | ClassArray" + "raw": "TItem[]" }, - "typeValueRef": "@epam/uui-core:ClassValue", - "from": "@epam/uui-core:IHasCX", - "required": false + "from": "@epam/uui-core:IControlled", + "required": true }, { - "uid": "rawProps", - "name": "rawProps", + "uid": "onValueChange_4", + "name": "onValueChange", "comment": { "raw": [ - "Any HTML attributes (native or 'data-') to put on the underlying component" + "Called when value needs to be changed (usually due to user interaction)" ] }, "typeValue": { - "raw": "React.HTMLAttributes & Record<`data-${string}`, string>" + "raw": "(newValue: TItem[]) => void" }, - "from": "@epam/uui-core:IHasRawProps", - "required": false + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IControlled", + "required": true } ], - "propsFromUnion": false + "propsFromUnion": true } }, - "@epam/uui-core:ModalHeaderCoreProps": { + "@epam/uui-core:PickerBindingValueType": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "ModalHeaderCoreProps", - "nameFull": "ModalHeaderCoreProps" + "name": "PickerBindingValueType", + "nameFull": "PickerBindingValueType" }, - "src": "uui-core/src/types/components/Modals.ts", + "src": "uui-core/src/types/pickers.ts", "exported": true }, "details": { - "kind": 264, + "kind": 265, "typeValue": { - "raw": "ModalHeaderCoreProps", + "raw": "'scalar' | 'array'", "print": [ - "interface ModalHeaderCoreProps extends IHasChildren, IHasCX, IHasRawProps> {", - " /** Called when cross icon in ModalHeader is clicked */", - " onClose?: () => any;", - " /** Modal title to display in header */", - " title?: React.ReactNode;", - "}" + "type PickerBindingValueType = 'scalar' | 'array';" ] - }, - "props": [ - { - "uid": "onClose", - "name": "onClose", - "comment": { - "raw": [ - "Called when cross icon in ModalHeader is clicked" - ] - }, - "typeValue": { - "raw": "() => any" - }, - "editor": { - "type": "func" - }, - "required": false - }, - { - "uid": "title", - "name": "title", - "comment": { - "raw": [ - "Modal title to display in header" - ] - }, - "typeValue": { - "raw": "React.ReactNode" - }, - "typeValueRef": "@types/react:ReactNode", - "required": false - }, - { - "uid": "children", - "name": "children", - "comment": { - "raw": [ - "Component children" - ] - }, - "typeValue": { - "raw": "React.ReactNode" - }, - "typeValueRef": "@types/react:ReactNode", - "from": "@epam/uui-core:IHasChildren", - "required": false - }, - { - "uid": "cx", - "name": "cx", - "comment": { - "raw": [ - "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" - ] - }, - "typeValue": { - "raw": "null | string | number | boolean | ClassDictionary | ClassArray" - }, - "typeValueRef": "@epam/uui-core:ClassValue", - "from": "@epam/uui-core:IHasCX", - "required": false - }, - { - "uid": "rawProps", - "name": "rawProps", - "comment": { - "raw": [ - "Any HTML attributes (native or 'data-') to put on the underlying component" - ] - }, - "typeValue": { - "raw": "React.HTMLAttributes & Record<`data-${string}`, string>" - }, - "from": "@epam/uui-core:IHasRawProps", - "required": false - } - ], - "propsFromUnion": false + } } }, - "@epam/uui-core:ModalOperation": { + "@epam/uui-core:PickerFilterConfig": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "ModalOperation", - "nameFull": "ModalOperation" + "name": "PickerFilterConfig", + "nameFull": "PickerFilterConfig" }, - "src": "uui-core/src/services/ModalContext.ts", + "src": "uui-core/src/types/tables.ts", "exported": true }, "details": { - "kind": 264, + "kind": 265, "typeValue": { - "raw": "ModalOperation", + "raw": "PickerFilterConfig", "print": [ - "interface ModalOperation {", - " /** Modal component that should be rendered */", - " component?: React.ComponentType;", - " /** Modal component props */", - " props: IModal;", - "}" + "type PickerFilterConfig = FilterConfigBase & Pick, 'dataSource' | 'getName' | 'renderRow'> & {", + " /** Type of the filter */", + " type: 'singlePicker' | 'multiPicker';", + " /**", + " * Pass false to hide search in picker body.", + " * If omitted, true value will be used.", + " */", + " showSearch?: boolean;", + " /** Height of picker items list in px. This height doesn't include height of body toolbars(sorting, predicates) */", + " maxBodyHeight?: number;", + "};" ] }, "props": [ { - "uid": "component", - "name": "component", + "uid": "title", + "name": "title", "comment": { "raw": [ - "Modal component that should be rendered" + "Title of the filter, displayed in filter toggler and filter body" ] }, "typeValue": { - "raw": "React.ComponentClass | React.FunctionComponent" - }, - "required": false - }, - { - "uid": "props", - "name": "props", - "comment": { - "raw": [ - "Modal component props" - ] + "raw": "string" }, - "typeValue": { - "raw": "IModal" + "editor": { + "type": "string" }, + "from": "@epam/uui-core:FilterConfigBase", "required": true - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:ModalWindowProps": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "ModalWindowProps", - "nameFull": "ModalWindowProps" - }, - "src": "uui-core/src/types/components/Modals.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "ModalWindowProps", - "print": [ - "interface ModalWindowProps extends VPanelProps, IHasForwardedRef {", - "}" - ] - }, - "props": [ + }, { - "uid": "cx", - "name": "cx", + "uid": "field", + "name": "field", "comment": { "raw": [ - "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" + "Field of filters object, where store the filter value" ] }, "typeValue": { - "raw": "null | string | number | boolean | ClassDictionary | ClassArray" + "raw": "keyof TFilter" }, - "typeValueRef": "@epam/uui-core:ClassValue", - "from": "@epam/uui-core:IHasCX", - "required": false + "from": "@epam/uui-core:FilterConfigBase", + "required": true }, { - "uid": "children", - "name": "children", + "uid": "columnKey", + "name": "columnKey", "comment": { "raw": [ - "Component children" + "Key of the column to which the filter is attached.", + " If omitted, filter won't be attached to the column." ] }, "typeValue": { - "raw": "React.ReactNode" + "raw": "string" }, - "typeValueRef": "@types/react:ReactNode", - "from": "@epam/uui-core:IHasChildren", + "editor": { + "type": "string" + }, + "from": "@epam/uui-core:FilterConfigBase", "required": false }, { - "uid": "onClick", - "name": "onClick", + "uid": "isAlwaysVisible", + "name": "isAlwaysVisible", "comment": { "raw": [ - "Called when component is clicked" + "Pass true to make filter always visible in FilterPanel. User can't hide it via 'Add filter' dropdown" ] }, "typeValue": { - "raw": "(e?: any) => void" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "from": "@epam/uui-core:IClickable", + "from": "@epam/uui-core:FilterConfigBase", "required": false }, { - "uid": "rawProps", - "name": "rawProps", + "uid": "predicates", + "name": "predicates", "comment": { "raw": [ - "Any HTML attributes (native or 'data-') to put on the underlying component" + "Array of available predicates for the filter. This predicated can be chosen by user and applied to the filter value." ] }, "typeValue": { - "raw": "React.HTMLAttributes & Record<`data-${string}`, string>" + "raw": "IFilterPredicate[]" }, - "from": "@epam/uui-core:IHasRawProps", + "from": "@epam/uui-core:FilterConfigBase", "required": false }, { - "uid": "forwardedRef", - "name": "forwardedRef", + "uid": "maxCount", + "name": "maxCount", "comment": { "raw": [ - "this ref is passed to the underlying component" + "Count of words to show in the Filter toggler. By default, 2 item will be shown." ] }, "typeValue": { - "raw": "null | (instance: HTMLDivElement | null) => void | React.MutableRefObject" + "raw": "number" }, - "from": "@epam/uui-core:IHasForwardedRef", + "editor": { + "type": "number" + }, + "from": "@epam/uui-core:FilterConfigBase", "required": false }, { - "uid": "clickAnalyticsEvent", - "name": "clickAnalyticsEvent", + "uid": "togglerWidth", + "name": "togglerWidth", "comment": { "raw": [ - "An analytics event to send (via AnalyticsContext) when component is clicked.", - " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)." + "Defines maxWidth of the filter toggler" ] }, "typeValue": { - "raw": "null | { [key: string]: any; name: string; }" + "raw": "number" }, - "from": "@epam/uui-core:IAnalyticableClick", + "editor": { + "type": "number" + }, + "from": "@epam/uui-core:FilterConfigBase", "required": false }, { - "uid": "style", - "name": "style", + "uid": "dataSource", + "name": "dataSource", "comment": { "raw": [ - "Native style attributes" + "Datasource to get data for the picker" ] }, "typeValue": { - "raw": "React.CSSProperties" + "raw": "IDataSource" }, - "from": "@epam/uui-core:VPanelProps", - "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:NotificationOperation": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "NotificationOperation", - "nameFull": "NotificationOperation" - }, - "src": "uui-core/src/services/NotificationContext.tsx", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "NotificationOperation", - "print": [ - "interface NotificationOperation {", - " /** Notification component that should be rendered */", - " component: React.ComponentType;", - " /** Notification component props */", - " props: INotification;", - " /** Notification config */", - " config: NotificationParams;", - "}" - ] - }, - "props": [ + "from": "@epam/uui-core:PickerBaseOptions", + "required": true + }, { - "uid": "component", - "name": "component", + "uid": "getName", + "name": "getName", "comment": { "raw": [ - "Notification component that should be rendered" + "A pure function that gets entity name from entity object.", + " Default: (item) => item.name." ] }, "typeValue": { - "raw": "React.ComponentType" + "raw": "(item: any) => string" }, - "typeValueRef": "@types/react:ComponentType", - "required": true + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:PickerBaseOptions", + "required": false }, { - "uid": "props", - "name": "props", + "uid": "renderRow", + "name": "renderRow", "comment": { "raw": [ - "Notification component props" + "Allow to customize how each selectable row is rendered. Can be used to add subtitles, avatars, etc." ] }, "typeValue": { - "raw": "INotification" + "raw": "(props: DataRowProps, dataSourceState: DataSourceState, any>) => React.ReactNode" }, - "required": true + "editor": { + "type": "component" + }, + "from": "@epam/uui-core:PickerBaseOptions", + "required": false }, { - "uid": "config", - "name": "config", + "uid": "type", + "name": "type", "comment": { "raw": [ - "Notification config" + "Type of the filter" ] }, "typeValue": { - "raw": "NotificationParams" + "raw": "'singlePicker' | 'multiPicker'" + }, + "editor": { + "type": "oneOf", + "options": [ + "singlePicker", + "multiPicker" + ] }, "required": true - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:NotificationParams": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "NotificationParams", - "nameFull": "NotificationParams" - }, - "src": "uui-core/src/types/contexts.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "NotificationParams", - "print": [ - "interface NotificationParams {", - " /** Notification visibility duration in ms", - " * If 'forever' value provided, notification required manual action for closing.", - " */", - " duration?: number | 'forever';", - " /** Position of notification depends on screen corners */", - " position?: 'bot-left' | 'bot-right' | 'top-left' | 'top-right' | 'top-center' | 'bot-center';", - "}" - ] - }, - "props": [ + }, { - "uid": "duration", - "name": "duration", + "uid": "showSearch", + "name": "showSearch", "comment": { "raw": [ - "Notification visibility duration in ms", - " If 'forever' value provided, notification required manual action for closing." + "Pass false to hide search in picker body.", + " If omitted, true value will be used." ] }, "typeValue": { - "raw": "number | 'forever'" + "raw": "boolean" + }, + "editor": { + "type": "bool" }, "required": false }, { - "uid": "position", - "name": "position", + "uid": "maxBodyHeight", + "name": "maxBodyHeight", "comment": { "raw": [ - "Position of notification depends on screen corners" + "Height of picker items list in px. This height doesn't include height of body toolbars(sorting, predicates)" ] }, "typeValue": { - "raw": "'bot-left' | 'bot-right' | 'top-left' | 'top-right' | 'top-center' | 'bot-center'" + "raw": "number" }, "editor": { - "type": "oneOf", - "options": [ - "bot-left", - "bot-right", - "top-left", - "top-right", - "top-center", - "bot-center" - ] + "type": "number" }, "required": false } @@ -23323,12 +26311,12 @@ "propsFromUnion": false } }, - "@epam/uui-core:PickerBaseOptions": { + "@epam/uui-core:PickerFooterProps": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "PickerBaseOptions", - "nameFull": "PickerBaseOptions" + "name": "PickerFooterProps", + "nameFull": "PickerFooterProps" }, "src": "uui-core/src/types/pickers.ts", "exported": true @@ -23336,296 +26324,351 @@ "details": { "kind": 265, "typeValue": { - "raw": "PickerBaseOptions", + "raw": "PickerFooterProps", "print": [ - "type PickerBaseOptions = {", - " /** Name of the entity being selected. Affects wording like \"Please select [entity]\" */", - " entityName?: string;", - " /** Plural name of the entity being selected. Affects wording like \"X [entities] selected\" */", - " entityPluralName?: string;", - " /** Datasource to get data for the picker */", - " dataSource: IDataSource;", - " /** A pure function that gets entity name from entity object.", - " Default: (item) => item.name.", - " */", - " getName?: (item: TItem) => string;", - " /** Allow to customize how each selectable row is rendered. Can be used to add subtitles, avatars, etc. */", - " renderRow?: (props: DataRowProps, dataSourceState: DataSourceState) => ReactNode;", - " /** Gets options for each row. Allow to make rows non-selectable, as well as many other tweaks. */", - " getRowOptions?: (item: TItem, index: number) => DataRowOptions;", - " /** Overrides the default 'no records found' banner.", - " * The 'search' callback parameter allows to distinguish cases when there's no records at all, and when current search doesn't find anything. */", - " renderNotFound?: (props: {", - " search: string;", - " onClose: () => void;", - " }) => ReactNode;", - " /** Defines which value is to set on clear. E.g. you can put an empty array instead of null for empty multi-select Pickers */", - " emptyValue?: undefined | null | [", - " ];", - " /** Defines how items should be sorted. By default, items are shown in order they are provided to the DataSource */", - " sortBy?(item: TItem, sorting: SortingOption): any;", - " /** Additional filter to apply to the DataSource. Can be used to limit selection somehow, w/o re-building the DataSource. E.g. in the linked pickers scenario. */", - " filter?: any;", - " /** Defines sorting to pass to the DataSource */", - " sorting?: SortingOption;", - " /**", - " * Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.", - " * - false: All nodes are selected independently (default).", - " * - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.", - " * - 'implicit': Selecting a parent node means that all children are considered checked.", - " * The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked", - " * parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,", - " * its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last", - " * unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked.", - " */", - " cascadeSelection?: CascadeSelection;", - " /** You can return true for all, or some items to fold them. */", - " isFoldedByDefault?(item: TItem): boolean;", - " /** Given an item, should return an array of string fields to search on. By default, the search is performed on item.name field. */", - " getSearchFields?(item: TItem): string[];", - " /** Component ref */", - " ref?: React.Ref;", + "type PickerFooterProps = {", + " /** Instance of picker DataSource view */", + " view: IDataSourceView;", + " /** IEditable interface for the 'Show only selected' toggler */", + " showSelected: IEditable;", + " /** Call to clear picker selection */", + " clearSelection: () => void;", + " /** If 'single' provided - only one item is selected. In case of 'multi' - multiple items are selected */", + " selectionMode: 'single' | 'multi';", + " /** If true, 'Clear' button will be disabled */", + " disableClear?: boolean;", "};" ] }, "props": [ { - "uid": "entityName", - "name": "entityName", - "comment": { - "raw": [ - "Name of the entity being selected. Affects wording like \"Please select [entity]\"" - ] - }, - "typeValue": { - "raw": "string" - }, - "editor": { - "type": "string" - }, - "required": false - }, - { - "uid": "entityPluralName", - "name": "entityPluralName", + "uid": "view", + "name": "view", "comment": { "raw": [ - "Plural name of the entity being selected. Affects wording like \"X [entities] selected\"" + "Instance of picker DataSource view" ] }, "typeValue": { - "raw": "string" - }, - "editor": { - "type": "string" + "raw": "IDataSourceView" }, - "required": false + "typeValueRef": "@epam/uui-core:IDataSourceView", + "required": true }, { - "uid": "dataSource", - "name": "dataSource", + "uid": "showSelected", + "name": "showSelected", "comment": { "raw": [ - "Datasource to get data for the picker" + "IEditable interface for the 'Show only selected' toggler" ] }, "typeValue": { - "raw": "IDataSource" + "raw": "IEditable" }, "required": true }, { - "uid": "getName", - "name": "getName", + "uid": "clearSelection", + "name": "clearSelection", "comment": { "raw": [ - "A pure function that gets entity name from entity object.", - " Default: (item) => item.name." + "Call to clear picker selection" ] }, "typeValue": { - "raw": "(item: TItem) => string" + "raw": "() => void" }, "editor": { "type": "func" }, - "required": false + "required": true }, { - "uid": "renderRow", - "name": "renderRow", + "uid": "selectionMode", + "name": "selectionMode", "comment": { "raw": [ - "Allow to customize how each selectable row is rendered. Can be used to add subtitles, avatars, etc." + "If 'single' provided - only one item is selected. In case of 'multi' - multiple items are selected" ] }, "typeValue": { - "raw": "(props: DataRowProps, dataSourceState: DataSourceState, any>) => React.ReactNode" + "raw": "'multi' | 'single'" }, "editor": { - "type": "component" - }, - "required": false - }, - { - "uid": "getRowOptions", - "name": "getRowOptions", - "comment": { - "raw": [ - "Gets options for each row. Allow to make rows non-selectable, as well as many other tweaks." + "type": "oneOf", + "options": [ + "multi", + "single" ] }, - "typeValue": { - "raw": "(item: TItem, index: number) => DataRowOptions" - }, - "editor": { - "type": "func" - }, - "required": false + "required": true }, { - "uid": "renderNotFound", - "name": "renderNotFound", + "uid": "disableClear", + "name": "disableClear", "comment": { "raw": [ - "Overrides the default 'no records found' banner.", - " The 'search' callback parameter allows to distinguish cases when there's no records at all, and when current search doesn't find anything." + "If true, 'Clear' button will be disabled" ] }, "typeValue": { - "raw": "(props: { search: string; onClose: () => void; }) => React.ReactNode" + "raw": "boolean" }, "editor": { - "type": "component" - }, - "required": false - }, - { - "uid": "emptyValue", - "name": "emptyValue", - "comment": { - "raw": [ - "Defines which value is to set on clear. E.g. you can put an empty array instead of null for empty multi-select Pickers" - ] - }, - "typeValue": { - "raw": "null | []" + "type": "bool" }, "required": false - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:PickerShowSelectedOnly": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "PickerShowSelectedOnly", + "nameFull": "PickerShowSelectedOnly" + }, + "src": "uui-core/src/types/pickers.ts", + "comment": { + "raw": [ + "Show selected rows only in Picker." + ] + }, + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "PickerShowSelectedOnly", + "print": [ + "/**", + " * Show selected rows only in Picker.", + " */", + "interface PickerShowSelectedOnly {", + " /**", + " * Enables/disables selected rows only in Picker.", + " */", + " showSelectedOnly?: boolean;", + "}" + ] + }, + "props": [ { - "uid": "sortBy", - "name": "sortBy", + "uid": "showSelectedOnly", + "name": "showSelectedOnly", "comment": { "raw": [ - "Defines how items should be sorted. By default, items are shown in order they are provided to the DataSource" + "Enables/disables selected rows only in Picker." ] }, "typeValue": { - "raw": "(item: TItem, sorting: SortingOption) => any" + "raw": "boolean" }, "editor": { - "type": "func" - }, - "required": false - }, - { - "uid": "filter", - "name": "filter", - "comment": { - "raw": [ - "Additional filter to apply to the DataSource. Can be used to limit selection somehow, w/o re-building the DataSource. E.g. in the linked pickers scenario." - ] - }, - "typeValue": { - "raw": "any" + "type": "bool" }, "required": false - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:Position": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "Position", + "nameFull": "Position" + }, + "src": "uui-core/src/types/dataSources.ts", + "comment": { + "raw": [ + "Position an item should be placed to." + ] + }, + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "'top' | 'bottom' | 'initial' | { after: TId; }", + "print": [ + "/**", + " * Position an item should be placed to.", + " */", + "type Position = PositionType | {", + " after: TId;", + "};" + ] + } + } + }, + "@epam/uui-core:PositionType": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "PositionType", + "nameFull": "PositionType" + }, + "src": "uui-core/src/types/dataSources.ts", + "comment": { + "raw": [ + "Type of the position an item to be placed to." + ] + }, + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "'top' | 'bottom' | 'initial'", + "print": [ + "/**", + " * Type of the position an item to be placed to.", + " */", + "type PositionType = 'initial' | 'top' | 'bottom';" + ] + } + } + }, + "@epam/uui-core:RangeDatePickerInputType": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "RangeDatePickerInputType", + "nameFull": "RangeDatePickerInputType" + }, + "src": "uui-core/src/types/components/datePicker/BaseRangeDatePicker.ts", + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "'from' | 'to'", + "print": [ + "type RangeDatePickerInputType = 'from' | 'to';" + ] + } + } + }, + "@epam/uui-core:RangeDatePickerPresets": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "RangeDatePickerPresets", + "nameFull": "RangeDatePickerPresets" + }, + "src": "uui-core/src/types/components/datePicker/BaseRangeDatePicker.ts", + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "RangeDatePickerPresets", + "print": [ + "type RangeDatePickerPresets = {", + " /** Preset config */", + " [key: string]: {", + " /** Name of the preset to display in rangeDatePicker body */", + " name: ReactNode;", + " /** A pure function that gets range value which will be applied by preset selection */", + " getRange: () => RangeDatePickerPresetValue;", + " };", + "};" + ] + }, + "props": [ { - "uid": "sorting", - "name": "sorting", + "uid": "[key: string]", + "name": "[key: string]", "comment": { "raw": [ - "Defines sorting to pass to the DataSource" + "Preset config" ] }, "typeValue": { - "raw": "SortingOption" + "raw": "{ name: React.ReactNode; getRange: () => RangeDatePickerPresetValue; }" }, - "required": false - }, + "required": true + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:RangeDatePickerPresetValue": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "RangeDatePickerPresetValue", + "nameFull": "RangeDatePickerPresetValue" + }, + "src": "uui-core/src/types/components/datePicker/BaseRangeDatePicker.ts", + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "RangeDatePickerPresetValue", + "print": [ + "type RangeDatePickerPresetValue = {", + " /** Range from value */", + " from?: string;", + " /** Range to value */", + " to?: string;", + " /** Preset order in presets list */", + " order?: number;", + "};" + ] + }, + "props": [ { - "uid": "cascadeSelection", - "name": "cascadeSelection", + "uid": "from", + "name": "from", "comment": { "raw": [ - "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.", - " - false: All nodes are selected independently (default).", - " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.", - " - 'implicit': Selecting a parent node means that all children are considered checked.", - " The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked", - " parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,", - " its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last", - " unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked." + "Range from value" ] }, "typeValue": { - "raw": "boolean | 'implicit' | 'explicit'" + "raw": "string" }, "editor": { - "type": "oneOf", - "options": [ - false, - true, - "implicit", - "explicit" - ] + "type": "string" }, "required": false }, { - "uid": "isFoldedByDefault", - "name": "isFoldedByDefault", + "uid": "to", + "name": "to", "comment": { "raw": [ - "You can return true for all, or some items to fold them." + "Range to value" ] }, "typeValue": { - "raw": "(item: TItem) => boolean" + "raw": "string" }, "editor": { - "type": "func" + "type": "string" }, "required": false }, { - "uid": "getSearchFields", - "name": "getSearchFields", + "uid": "order", + "name": "order", "comment": { "raw": [ - "Given an item, should return an array of string fields to search on. By default, the search is performed on item.name field." + "Preset order in presets list" ] }, "typeValue": { - "raw": "(item: TItem) => string[]" + "raw": "number" }, "editor": { - "type": "func" - }, - "required": false - }, - { - "uid": "ref", - "name": "ref", - "comment": { - "raw": [ - "Component ref" - ] - }, - "typeValue": { - "raw": "null | (instance: HTMLElement | null) => void | React.RefObject" + "type": "number" }, "required": false } @@ -23633,318 +26676,315 @@ "propsFromUnion": false } }, - "@epam/uui-core:PickerBaseProps": { + "@epam/uui-core:RangeDatePickerValue": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "PickerBaseProps", - "nameFull": "PickerBaseProps" + "name": "RangeDatePickerValue", + "nameFull": "RangeDatePickerValue" }, - "src": "uui-core/src/types/pickers.ts", + "src": "uui-core/src/types/components/datePicker/BaseRangeDatePicker.ts", "exported": true }, "details": { - "kind": 265, + "kind": 264, "typeValue": { - "raw": "PickerBaseOptions & { selectionMode: 'single'; valueType?: 'id' | undefined; } & IEditable & IAnalyticableOnChange | PickerBaseOptions & { selectionMode: 'single'; valueType: 'entity'; } & IEditable & IAnalyticableOnChange | PickerBaseOptions & { selectionMode: 'multi'; valueType?: 'id' | undefined; emptyValue?: [] | null | undefined; } & IEditable & IAnalyticableOnChange | PickerBaseOptions & { selectionMode: 'multi'; valueType: 'entity'; emptyValue?: [] | null | undefined; } & IEditable & IAnalyticableOnChange", + "raw": "RangeDatePickerValue", "print": [ - "type PickerBaseProps = PickerBaseOptions & PickerBindingProps & IAnalyticableOnChange;" + "interface RangeDatePickerValue {", + " /** RangeDatePicker 'from' value */", + " from: string | null;", + " /** RangeDatePicker 'to' value */", + " to: string | null;", + "}" ] }, "props": [ { - "uid": "entityName", - "name": "entityName", + "uid": "from", + "name": "from", "comment": { "raw": [ - "Name of the entity being selected. Affects wording like \"Please select [entity]\"" + "RangeDatePicker 'from' value" ] }, "typeValue": { - "raw": "string" + "raw": "null | string" }, "editor": { "type": "string" }, - "from": "@epam/uui-core:PickerBaseOptions", "required": false }, { - "uid": "entityPluralName", - "name": "entityPluralName", + "uid": "to", + "name": "to", "comment": { "raw": [ - "Plural name of the entity being selected. Affects wording like \"X [entities] selected\"" + "RangeDatePicker 'to' value" ] }, "typeValue": { - "raw": "string" + "raw": "null | string" }, "editor": { "type": "string" }, - "from": "@epam/uui-core:PickerBaseOptions", "required": false - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:RecordStatus": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "RecordStatus", + "nameFull": "RecordStatus" + }, + "src": "uui-core/src/data/processing/views/tree/types.ts", + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "typeof NOT_FOUND_RECORD | typeof PENDING_RECORD | typeof LOADING_RECORD | typeof LOADED_RECORD | typeof FAILED_RECORD", + "print": [ + "type RecordStatus = typeof PENDING_RECORD | typeof LOADING_RECORD | typeof LOADED_RECORD | typeof NOT_FOUND_RECORD | typeof FAILED_RECORD;" + ] + } + } + }, + "@epam/uui-core:RenderCellProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "RenderCellProps", + "nameFull": "RenderCellProps" + }, + "src": "uui-core/src/types/tables.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "RenderCellProps", + "print": [ + "interface RenderCellProps extends DataTableCellOptions {", + " /**", + " * Lens instance, wrapping IEditable on the row, to help binding to row's value.", + " * E.g. ", + " */", + " rowLens: ILens;", + "}" + ] + }, + "props": [ { - "uid": "dataSource", - "name": "dataSource", + "uid": "rowLens", + "name": "rowLens", "comment": { "raw": [ - "Datasource to get data for the picker" + "Lens instance, wrapping IEditable on the row, to help binding to row's value.", + " E.g. " ] }, "typeValue": { - "raw": "IDataSource" + "raw": "ILens" }, - "from": "@epam/uui-core:PickerBaseOptions", "required": true }, { - "uid": "getName", - "name": "getName", - "comment": { - "raw": [ - "A pure function that gets entity name from entity object.", - " Default: (item) => item.name." - ] - }, - "typeValue": { - "raw": "(item: TItem) => string" - }, - "editor": { - "type": "func" - }, - "from": "@epam/uui-core:PickerBaseOptions", - "required": false - }, - { - "uid": "renderRow", - "name": "renderRow", - "comment": { - "raw": [ - "Allow to customize how each selectable row is rendered. Can be used to add subtitles, avatars, etc." - ] - }, - "typeValue": { - "raw": "(props: DataRowProps, dataSourceState: DataSourceState, any>) => React.ReactNode" - }, - "editor": { - "type": "component" - }, - "from": "@epam/uui-core:PickerBaseOptions", - "required": false - }, - { - "uid": "getRowOptions", - "name": "getRowOptions", + "uid": "key", + "name": "key", "comment": { "raw": [ - "Gets options for each row. Allow to make rows non-selectable, as well as many other tweaks." + "Key to use as component's key" ] }, "typeValue": { - "raw": "(item: TItem, index: number) => DataRowOptions" + "raw": "string" }, "editor": { - "type": "func" + "type": "string" }, - "from": "@epam/uui-core:PickerBaseOptions", - "required": false + "from": "@epam/uui-core:DataTableCellOptions", + "required": true }, { - "uid": "renderNotFound", - "name": "renderNotFound", + "uid": "rowProps", + "name": "rowProps", "comment": { "raw": [ - "Overrides the default 'no records found' banner.", - " The 'search' callback parameter allows to distinguish cases when there's no records at all, and when current search doesn't find anything." + "DataTableRowsProps object for the table row the cell is at" ] }, "typeValue": { - "raw": "(props: { search: string; onClose: () => void; }) => React.ReactNode" - }, - "editor": { - "type": "component" + "raw": "DataTableRowProps" }, - "from": "@epam/uui-core:PickerBaseOptions", - "required": false + "from": "@epam/uui-core:DataTableCellOptions", + "required": true }, { - "uid": "emptyValue", - "name": "emptyValue", + "uid": "column", + "name": "column", "comment": { "raw": [ - "Defines which value is to set on clear. E.g. you can put an empty array instead of null for empty multi-select Pickers" + "DataColumnProps object for the column the cell is at" ] }, "typeValue": { - "raw": "null | []" + "raw": "DataColumnProps" }, - "from": "@epam/uui-core:PickerBaseOptions", - "required": false + "from": "@epam/uui-core:DataTableCellOptions", + "required": true }, { - "uid": "sortBy", - "name": "sortBy", + "uid": "index", + "name": "index", "comment": { "raw": [ - "Defines how items should be sorted. By default, items are shown in order they are provided to the DataSource" + "Column index in table" ] }, "typeValue": { - "raw": "(item: TItem, sorting: SortingOption) => any" + "raw": "number" }, "editor": { - "type": "func" - }, - "from": "@epam/uui-core:PickerBaseOptions", - "required": false - }, - { - "uid": "filter", - "name": "filter", - "comment": { - "raw": [ - "Additional filter to apply to the DataSource. Can be used to limit selection somehow, w/o re-building the DataSource. E.g. in the linked pickers scenario." - ] - }, - "typeValue": { - "raw": "any" - }, - "from": "@epam/uui-core:PickerBaseOptions", - "required": false - }, - { - "uid": "sorting", - "name": "sorting", - "comment": { - "raw": [ - "Defines sorting to pass to the DataSource" - ] - }, - "typeValue": { - "raw": "SortingOption" + "type": "number" }, - "from": "@epam/uui-core:PickerBaseOptions", + "from": "@epam/uui-core:DataTableCellOptions", "required": false }, { - "uid": "cascadeSelection", - "name": "cascadeSelection", + "uid": "isFirstColumn", + "name": "isFirstColumn", "comment": { "raw": [ - "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.", - " - false: All nodes are selected independently (default).", - " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.", - " - 'implicit': Selecting a parent node means that all children are considered checked.", - " The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked", - " parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,", - " its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last", - " unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked." + "True if the cell is in the first column" ] }, "typeValue": { - "raw": "boolean | 'implicit' | 'explicit'" + "raw": "boolean" }, "editor": { - "type": "oneOf", - "options": [ - false, - true, - "implicit", - "explicit" - ] + "type": "bool" }, - "from": "@epam/uui-core:PickerBaseOptions", - "required": false + "from": "@epam/uui-core:DataTableCellOptions", + "required": true }, { - "uid": "isFoldedByDefault", - "name": "isFoldedByDefault", + "uid": "isLastColumn", + "name": "isLastColumn", "comment": { "raw": [ - "You can return true for all, or some items to fold them." + "True if the cell is in the last column" ] }, "typeValue": { - "raw": "(item: TItem) => boolean" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "from": "@epam/uui-core:PickerBaseOptions", - "required": false + "from": "@epam/uui-core:DataTableCellOptions", + "required": true }, { - "uid": "getSearchFields", - "name": "getSearchFields", + "uid": "tabIndex", + "name": "tabIndex", "comment": { "raw": [ - "Given an item, should return an array of string fields to search on. By default, the search is performed on item.name field." + "HTML tabIndex attribute to set on the cell" ] }, "typeValue": { - "raw": "(item: TItem) => string[]" + "raw": "number" }, "editor": { - "type": "func" + "type": "number" }, - "from": "@epam/uui-core:PickerBaseOptions", + "from": "@epam/uui-core:DataTableCellOptions", "required": false - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:RenderEditorProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "RenderEditorProps", + "nameFull": "RenderEditorProps" + }, + "src": "uui-core/src/types/tables.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "RenderEditorProps", + "print": [ + "interface RenderEditorProps extends IEditable, IHasValidationMessage, ICanFocus {", + " /** DataRowProps object of rendered row */", + " rowProps: DataRowProps;", + " /** Cell mode signal the editor component to adapt it's visuals to cell editor */", + " mode: 'cell';", + " /** Ref to pass to the editor component.", + " * It's required for correct focus/blur behavior.", + " * */", + " ref?: ForwardedRef;", + "}" + ] + }, + "props": [ { - "uid": "ref", - "name": "ref", + "uid": "rowProps", + "name": "rowProps", "comment": { "raw": [ - "Component ref" + "DataRowProps object of rendered row" ] }, "typeValue": { - "raw": "null | (instance: HTMLElement | null) => void | React.RefObject" + "raw": "DataRowProps" }, - "from": "@epam/uui-core:PickerBaseOptions", - "required": false + "typeValueRef": "@epam/uui-core:DataRowProps", + "required": true }, { - "uid": "selectionMode", - "name": "selectionMode", + "uid": "mode", + "name": "mode", "comment": { "raw": [ - "If 'single' provided - only one item is selected. In case of 'multi' - multiple items are selected" + "Cell mode signal the editor component to adapt it's visuals to cell editor" ] }, "typeValue": { - "raw": "'single'" + "raw": "'cell'" }, "editor": { "type": "oneOf", "options": [ - "single" + "cell" ] }, - "from": "@epam/uui-core:SinglePickerProps", "required": true }, { - "uid": "valueType", - "name": "valueType", + "uid": "ref", + "name": "ref", "comment": { "raw": [ - "Defines what to use in value/onValueChange: 'id' - item id (TId). 'entity' - the item itself (TItem)" + "Ref to pass to the editor component.", + " It's required for correct focus/blur behavior." ] }, "typeValue": { - "raw": "'id'" - }, - "editor": { - "type": "oneOf", - "options": [ - "id" - ] + "raw": "null | (instance: HTMLElement | null) => void | React.MutableRefObject" }, - "from": "@epam/uui-core:SinglePickerProps", "required": false }, { @@ -23995,97 +27035,28 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:ICanBeReadonly", - "required": false - }, - { - "uid": "isRequired", - "name": "isRequired", - "comment": { - "raw": [ - "Marks that component's value is required and shouldn't be empty" - ] - }, - "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" - }, - "from": "@epam/uui-core:ICanBeRequired", - "required": false - }, - { - "uid": "value", - "name": "value", - "comment": { - "raw": [ - "The current value of component" - ] - }, - "typeValue": { - "raw": "TId" - }, - "from": "@epam/uui-core:IControlled", - "required": true - }, - { - "uid": "onValueChange", - "name": "onValueChange", - "comment": { - "raw": [ - "Called when value needs to be changed (usually due to user interaction)" - ] - }, - "typeValue": { - "raw": "(newValue: TId) => void" - }, - "editor": { - "type": "func" - }, - "from": "@epam/uui-core:IControlled", - "required": true - }, - { - "uid": "getValueChangeAnalyticsEvent", - "name": "getValueChangeAnalyticsEvent", - "comment": { - "raw": [ - "Given a value, returns an analytics event to send when component is edited.", - " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)." - ] - }, - "typeValue": { - "raw": "(newValue: any, oldValue: any) => AnalyticsEvent" - }, - "editor": { - "type": "func" - }, - "from": "@epam/uui-core:IAnalyticableOnChange", + "from": "@epam/uui-core:ICanBeReadonly", "required": false }, { - "uid": "valueType_2", - "name": "valueType", + "uid": "isRequired", + "name": "isRequired", "comment": { "raw": [ - "Defines what to use in value/onValueChange: 'id' - item id (TId). 'entity' - the item itself (TItem)" + "Marks that component's value is required and shouldn't be empty" ] }, "typeValue": { - "raw": "'entity'" + "raw": "boolean" }, "editor": { - "type": "oneOf", - "options": [ - "entity" - ] + "type": "bool" }, - "from": "@epam/uui-core:SinglePickerProps", - "required": true + "from": "@epam/uui-core:ICanBeRequired", + "required": false }, { - "uid": "value_2", + "uid": "value", "name": "value", "comment": { "raw": [ @@ -24093,13 +27064,13 @@ ] }, "typeValue": { - "raw": "TItem" + "raw": "TCellValue" }, "from": "@epam/uui-core:IControlled", "required": true }, { - "uid": "onValueChange_2", + "uid": "onValueChange", "name": "onValueChange", "comment": { "raw": [ @@ -24107,7 +27078,7 @@ ] }, "typeValue": { - "raw": "(newValue: TItem) => void" + "raw": "(newValue: TCellValue) => void" }, "editor": { "type": "func" @@ -24116,137 +27087,320 @@ "required": true }, { - "uid": "selectionMode_3", - "name": "selectionMode", + "uid": "validationMessage", + "name": "validationMessage", "comment": { "raw": [ - "If 'single' provided - only one item is selected. In case of 'multi' - multiple items are selected" + "Message describing why the value is invalid" ] }, "typeValue": { - "raw": "'multi'" - }, - "editor": { - "type": "oneOf", - "options": [ - "multi" - ] + "raw": "React.ReactNode" }, - "from": "@epam/uui-core:ArrayPickerProps", - "required": true + "typeValueRef": "@types/react:ReactNode", + "from": "@epam/uui-core:IHasValidationMessage", + "required": false }, { - "uid": "valueType_3", - "name": "valueType", + "uid": "onFocus", + "name": "onFocus", "comment": { "raw": [ - "Defines what to use in value/onValueChange: 'id' - item id (TId). 'entity' - the item itself (TItem)" + "Called when component gets input focus" ] }, "typeValue": { - "raw": "'id'" + "raw": "(e: React.FocusEvent) => void" }, "editor": { - "type": "oneOf", - "options": [ - "id" - ] + "type": "func" }, - "from": "@epam/uui-core:ArrayPickerProps", + "from": "@epam/uui-core:ICanFocus", "required": false }, { - "uid": "value_3", - "name": "value", + "uid": "onBlur", + "name": "onBlur", "comment": { "raw": [ - "The current value of component" + "Called when component looses input focus" ] }, "typeValue": { - "raw": "TId[]" + "raw": "(e: React.FocusEvent) => void" }, - "from": "@epam/uui-core:IControlled", - "required": true - }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:ICanFocus", + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:ScrollAlign": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "ScrollAlign", + "nameFull": "ScrollAlign" + }, + "src": "uui-core/src/types/dataSources.ts", + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "'top' | 'nearest'", + "print": [ + "type ScrollAlign = 'top' | 'nearest';" + ] + } + } + }, + "@epam/uui-core:ScrollToConfig": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "ScrollToConfig", + "nameFull": "ScrollToConfig" + }, + "src": "uui-core/src/types/dataSources.ts", + "comment": { + "raw": [ + "Holds configuration of the force scrolling behavior." + ] + }, + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "ScrollToConfig", + "print": [ + "/**", + " * Holds configuration of the force scrolling behavior.", + " */", + "interface ScrollToConfig {", + " /** Index of the row to be scrolled to. */", + " index?: number;", + " /** Scrolling movement behavior. */", + " behavior?: ScrollBehavior;", + " /** Alignment behavior. This property specifies, to which position a row with an index should be scrolled to.", + " * @default 'top'", + " *", + " * If `nearest` is specified, a list will be scrolled to a row in the nearest position only if row is not visible.", + " * If a row is closer to the bottom, the list will be scrolled to the row in the bottom position of a scroll container.", + " * If closer to the top, will be scrolled to the row in the top position.", + " *", + " * If `top` is specified, scrolling a list to a row to the top part of the container will happen in any case.", + " */", + " align?: ScrollAlign;", + "}" + ] + }, + "props": [ { - "uid": "onValueChange_3", - "name": "onValueChange", + "uid": "index", + "name": "index", "comment": { "raw": [ - "Called when value needs to be changed (usually due to user interaction)" + "Index of the row to be scrolled to." ] }, "typeValue": { - "raw": "(newValue: TId[]) => void" + "raw": "number" }, "editor": { - "type": "func" + "type": "number" }, - "from": "@epam/uui-core:IControlled", - "required": true + "required": false }, { - "uid": "valueType_4", - "name": "valueType", + "uid": "behavior", + "name": "behavior", "comment": { "raw": [ - "Defines what to use in value/onValueChange: 'id' - item id (TId). 'entity' - the item itself (TItem)" + "Scrolling movement behavior." ] }, "typeValue": { - "raw": "'entity'" + "raw": "'auto' | 'instant' | 'smooth'" }, "editor": { "type": "oneOf", "options": [ - "entity" + "auto", + "instant", + "smooth" ] }, - "from": "@epam/uui-core:ArrayPickerProps", - "required": true + "required": false }, { - "uid": "value_4", - "name": "value", + "uid": "align", + "name": "align", "comment": { "raw": [ - "The current value of component" - ] + "Alignment behavior. This property specifies, to which position a row with an index should be scrolled to.", + " @default 'top'", + "", + " If `nearest` is specified, a list will be scrolled to a row in the nearest position only if row is not visible.", + " If a row is closer to the bottom, the list will be scrolled to the row in the bottom position of a scroll container.", + " If closer to the top, will be scrolled to the row in the top position.", + "", + " If `top` is specified, scrolling a list to a row to the top part of the container will happen in any case." + ], + "tags": { + "@default": "top" + } }, "typeValue": { - "raw": "TItem[]" + "raw": "'top' | 'nearest'" }, - "from": "@epam/uui-core:IControlled", - "required": true - }, + "editor": { + "type": "oneOf", + "options": [ + "top", + "nearest" + ] + }, + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:SearchConfig": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "SearchConfig", + "nameFull": "SearchConfig" + }, + "src": "uui-core/src/types/dataSources.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "SearchConfig", + "print": [ + "interface SearchConfig {", + " /**", + " * A pure function that gets search value for each item.", + " * @default (item) => item.name.", + " */", + " getSearchFields?(item: TItem): string[];", + " /**", + " * Enables sorting of search results by relevance.", + " * - The highest priority has records, which have a full match with a search keyword.", + " * - The lower one has records, which have a search keyword at the 0 position, but not the full match.", + " * - Then, records, which contain a search keyword as a separate word, but not at the beginning.", + " * - And the lowest one - any other match of the search keyword.", + " *", + " * Example:", + " * - `search`: 'some'", + " * - `record string`: 'some word', `rank` = 4", + " * - `record string`: 'someone', `rank` = 3", + " * - `record string`: 'I know some guy', `rank` = 2", + " * - `record string`: 'awesome', `rank` = 1", + " *", + " * @default true", + " */", + " sortSearchByRelevance?: boolean;", + "}" + ] + }, + "props": [ { - "uid": "onValueChange_4", - "name": "onValueChange", + "uid": "getSearchFields", + "name": "getSearchFields", "comment": { "raw": [ - "Called when value needs to be changed (usually due to user interaction)" + "A pure function that gets search value for each item.", + " @default (item) => item.name." ] }, "typeValue": { - "raw": "(newValue: TItem[]) => void" + "raw": "(item: TItem) => string[]" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:IControlled", - "required": true + "required": false + }, + { + "uid": "sortSearchByRelevance", + "name": "sortSearchByRelevance", + "comment": { + "raw": [ + "Enables sorting of search results by relevance.", + " - The highest priority has records, which have a full match with a search keyword.", + " - The lower one has records, which have a search keyword at the 0 position, but not the full match.", + " - Then, records, which contain a search keyword as a separate word, but not at the beginning.", + " - And the lowest one - any other match of the search keyword.", + "", + " Example:", + " - `search`: 'some'", + " - `record string`: 'some word', `rank` = 4", + " - `record string`: 'someone', `rank` = 3", + " - `record string`: 'I know some guy', `rank` = 2", + " - `record string`: 'awesome', `rank` = 1", + "", + " @default true" + ], + "tags": { + "@default": true + } + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "required": false } ], - "propsFromUnion": true + "propsFromUnion": false } }, - "@epam/uui-core:PickerBindingProps": { + "@epam/uui-core:SetDataSourceState": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "PickerBindingProps", - "nameFull": "PickerBindingProps" + "name": "SetDataSourceState", + "nameFull": "SetDataSourceState" + }, + "src": "uui-core/src/types/dataSources.ts", + "comment": { + "raw": [ + "DataSource state update handler." + ] + }, + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "SetDataSourceState", + "print": [ + "/**", + " * DataSource state update handler.", + " */", + "type SetDataSourceState, TId = any> = (updateState: (prevState: DataSourceState) => DataSourceState) => void;" + ] + } + } + }, + "@epam/uui-core:SinglePickerProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "SinglePickerProps", + "nameFull": "SinglePickerProps" }, "src": "uui-core/src/types/pickers.ts", "exported": true @@ -24254,9 +27408,19 @@ "details": { "kind": 265, "typeValue": { - "raw": "{ selectionMode: 'single'; valueType?: 'id' | undefined; } & IEditable | { selectionMode: 'single'; valueType: 'entity'; } & IEditable | { selectionMode: 'multi'; valueType?: 'id' | undefined; emptyValue?: [] | null | undefined; } & IEditable | { selectionMode: 'multi'; valueType: 'entity'; emptyValue?: [] | null | undefined; } & IEditable", + "raw": "{ selectionMode: 'single'; valueType?: 'id' | undefined; } & IEditable | { selectionMode: 'single'; valueType: 'entity'; } & IEditable", "print": [ - "type PickerBindingProps = SinglePickerProps | ArrayPickerProps;" + "type SinglePickerProps = ({", + " /** If 'single' provided - only one item is selected. In case of 'multi' - multiple items are selected */", + " selectionMode: 'single';", + " /** Defines what to use in value/onValueChange: 'id' - item id (TId). 'entity' - the item itself (TItem) */", + " valueType?: 'id';", + "} & IEditable) | ({", + " /** If 'single' provided - only one item is selected. In case of 'multi' - multiple items are selected */", + " selectionMode: 'single';", + " /** Defines what to use in value/onValueChange: 'id' - item id (TId). 'entity' - the item itself (TItem) */", + " valueType: 'entity';", + "} & IEditable);" ] }, "props": [ @@ -24277,7 +27441,6 @@ "single" ] }, - "from": "@epam/uui-core:SinglePickerProps", "required": true }, { @@ -24297,7 +27460,6 @@ "id" ] }, - "from": "@epam/uui-core:SinglePickerProps", "required": false }, { @@ -24416,7 +27578,6 @@ "entity" ] }, - "from": "@epam/uui-core:SinglePickerProps", "required": true }, { @@ -24449,173 +27610,341 @@ }, "from": "@epam/uui-core:IControlled", "required": true - }, + } + ], + "propsFromUnion": true + } + }, + "@epam/uui-core:SortConfig": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "SortConfig", + "nameFull": "SortConfig" + }, + "src": "uui-core/src/types/dataSources.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "SortConfig", + "print": [ + "interface SortConfig {", + " /**", + " * A pure function that gets sorting value for current sorting value", + " */", + " sortBy?(item: TItem, sorting: SortingOption): any;", + "}" + ] + }, + "props": [ { - "uid": "selectionMode_3", - "name": "selectionMode", + "uid": "sortBy", + "name": "sortBy", "comment": { "raw": [ - "If 'single' provided - only one item is selected. In case of 'multi' - multiple items are selected" + "A pure function that gets sorting value for current sorting value" ] }, "typeValue": { - "raw": "'multi'" + "raw": "(item: TItem, sorting: SortingOption) => any" }, "editor": { - "type": "oneOf", - "options": [ - "multi" + "type": "func" + }, + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:SortDirection": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "SortDirection", + "nameFull": "SortDirection" + }, + "src": "uui-core/src/types/dataSources.ts", + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "'asc' | 'desc'", + "print": [ + "type SortDirection = 'asc' | 'desc';" + ] + } + } + }, + "@epam/uui-core:SortedPatchByParentId": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "SortedPatchByParentId", + "nameFull": "SortedPatchByParentId" + }, + "src": "uui-core/src/types/dataSources.ts", + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "SortedPatchByParentId", + "print": [ + "type SortedPatchByParentId = IMap;", + " newItems: TItem[];", + "}>;" + ] + }, + "props": [ + { + "uid": "constructor", + "name": "constructor", + "comment": { + "raw": [ + "Must implement multiple constructors:", + " - constructor with empty arguments or initial data (optional);", + " - constructor, which accepts an argument of IMap type and clones its value (mandatory)." ] }, - "from": "@epam/uui-core:ArrayPickerProps", + "typeValue": { + "raw": "Function" + }, + "from": "@epam/uui-core:IMap", "required": true }, { - "uid": "valueType_3", - "name": "valueType", + "uid": "get", + "name": "get", + "typeValue": { + "raw": "(key: TId) => { top: TId[]; bottom: TId[]; updated: TId[]; moved: TId[]; withTempOrder: TId[]; updatedItemsMap: IMap; newItems: TItem[]; } | undefined" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IMap", + "required": true + }, + { + "uid": "set", + "name": "set", "comment": { "raw": [ - "Defines what to use in value/onValueChange: 'id' - item id (TId). 'entity' - the item itself (TItem)" + "Should set data to the existing map. This operation is mutable.", + " @param key - key of a map.", + " @param value - value, to be set into a map, using the key." ] }, "typeValue": { - "raw": "'id'" + "raw": "(key: TId, value?: { top: TId[]; bottom: TId[]; updated: TId[]; moved: TId[]; withTempOrder: TId[]; updatedItemsMap: IMap; newItems: TItem[]; } | undefined) => IMap; newItems: TItem[]; }>" }, "editor": { - "type": "oneOf", - "options": [ - "id" - ] + "type": "func" }, - "from": "@epam/uui-core:ArrayPickerProps", - "required": false + "from": "@epam/uui-core:IMap", + "required": true }, { - "uid": "emptyValue", - "name": "emptyValue", + "uid": "delete", + "name": "delete", "comment": { "raw": [ - "Defines what to use as an empty value. If other value provided, it will be assumed as selection" + "Should delete an element, located in a map by key. This operation is mutable.", + " @param key" ] }, "typeValue": { - "raw": "null | []" + "raw": "(key: TId) => boolean" }, - "from": "@epam/uui-core:ArrayPickerProps", - "required": false + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IMap", + "required": true + }, + { + "uid": "has", + "name": "has", + "typeValue": { + "raw": "(key: TId) => boolean" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IMap", + "required": true + }, + { + "uid": "size", + "name": "size", + "typeValue": { + "raw": "number" + }, + "editor": { + "type": "number" + }, + "from": "@epam/uui-core:IMap", + "required": true }, { - "uid": "value_3", - "name": "value", + "uid": "[Symbol.iterator]", + "name": "[Symbol.iterator]", + "typeValue": { + "raw": "() => IterableIterator<[TId, { top: TId[]; bottom: TId[]; updated: TId[]; moved: TId[]; withTempOrder: TId[]; updatedItemsMap: IMap; newItems: TItem[]; }]>" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IMap", + "required": true + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:SortingOption": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "SortingOption", + "nameFull": "SortingOption" + }, + "src": "uui-core/src/types/dataSources.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "SortingOption", + "print": [ + "interface SortingOption {", + " /** Field of sorted entity under which sorting is performed */", + " field: keyof T;", + " /** Direction of a sorting */", + " direction?: SortDirection;", + "}" + ] + }, + "props": [ + { + "uid": "field", + "name": "field", "comment": { "raw": [ - "The current value of component" + "Field of sorted entity under which sorting is performed" ] }, "typeValue": { - "raw": "TId[]" + "raw": "keyof T" }, - "from": "@epam/uui-core:IControlled", "required": true }, { - "uid": "onValueChange_3", - "name": "onValueChange", + "uid": "direction", + "name": "direction", "comment": { "raw": [ - "Called when value needs to be changed (usually due to user interaction)" + "Direction of a sorting" ] }, "typeValue": { - "raw": "(newValue: TId[]) => void" + "raw": "'asc' | 'desc'" }, "editor": { - "type": "func" + "type": "oneOf", + "options": [ + "asc", + "desc" + ] }, - "from": "@epam/uui-core:IControlled", - "required": true - }, + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:SpinnerCoreProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "SpinnerCoreProps", + "nameFull": "SpinnerCoreProps" + }, + "src": "uui-core/src/types/components/Spinner.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "SpinnerCoreProps", + "print": [ + "interface SpinnerCoreProps extends IHasCX, IHasRawProps>, IHasForwardedRef {", + "}" + ] + }, + "props": [ { - "uid": "valueType_4", - "name": "valueType", + "uid": "cx", + "name": "cx", "comment": { "raw": [ - "Defines what to use in value/onValueChange: 'id' - item id (TId). 'entity' - the item itself (TItem)" + "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" ] }, "typeValue": { - "raw": "'entity'" - }, - "editor": { - "type": "oneOf", - "options": [ - "entity" - ] + "raw": "null | string | number | boolean | ClassDictionary | ClassArray" }, - "from": "@epam/uui-core:ArrayPickerProps", - "required": true + "typeValueRef": "@epam/uui-core:ClassValue", + "from": "@epam/uui-core:IHasCX", + "required": false }, { - "uid": "value_4", - "name": "value", + "uid": "rawProps", + "name": "rawProps", "comment": { "raw": [ - "The current value of component" + "Any HTML attributes (native or 'data-') to put on the underlying component" ] }, "typeValue": { - "raw": "TItem[]" + "raw": "React.HTMLAttributes & Record<`data-${string}`, string>" }, - "from": "@epam/uui-core:IControlled", - "required": true + "from": "@epam/uui-core:IHasRawProps", + "required": false }, { - "uid": "onValueChange_4", - "name": "onValueChange", + "uid": "forwardedRef", + "name": "forwardedRef", "comment": { "raw": [ - "Called when value needs to be changed (usually due to user interaction)" + "this ref is passed to the underlying component" ] }, "typeValue": { - "raw": "(newValue: TItem[]) => void" - }, - "editor": { - "type": "func" + "raw": "null | (instance: HTMLDivElement | null) => void | React.MutableRefObject" }, - "from": "@epam/uui-core:IControlled", - "required": true + "from": "@epam/uui-core:IHasForwardedRef", + "required": false } ], - "propsFromUnion": true - } - }, - "@epam/uui-core:PickerBindingValueType": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "PickerBindingValueType", - "nameFull": "PickerBindingValueType" - }, - "src": "uui-core/src/types/pickers.ts", - "exported": true - }, - "details": { - "kind": 265, - "typeValue": { - "raw": "'scalar' | 'array'", - "print": [ - "type PickerBindingValueType = 'scalar' | 'array';" - ] - } + "propsFromUnion": false } }, - "@epam/uui-core:PickerFilterConfig": { + "@epam/uui-core:TableFiltersConfig": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "PickerFilterConfig", - "nameFull": "PickerFilterConfig" + "name": "TableFiltersConfig", + "nameFull": "TableFiltersConfig" }, "src": "uui-core/src/types/tables.ts", "exported": true @@ -24623,19 +27952,9 @@ "details": { "kind": 265, "typeValue": { - "raw": "PickerFilterConfig", + "raw": "PickerFilterConfig | DatePickerFilterConfig | NumericFilterConfig | RangeDatePickerFilterConfig | CustomFilterConfig", "print": [ - "type PickerFilterConfig = FilterConfigBase & Pick, 'dataSource' | 'getName' | 'renderRow'> & {", - " /** Type of the filter */", - " type: 'singlePicker' | 'multiPicker';", - " /**", - " * Pass false to hide search in picker body.", - " * If omitted, true value will be used.", - " */", - " showSearch?: boolean;", - " /** Height of picker items list in px. This height doesn't include height of body toolbars(sorting, predicates) */", - " maxBodyHeight?: number;", - "};" + "type TableFiltersConfig = PickerFilterConfig | DatePickerFilterConfig | NumericFilterConfig | RangeDatePickerFilterConfig | CustomFilterConfig;" ] }, "props": [ @@ -24820,6 +28139,7 @@ "multiPicker" ] }, + "from": "@epam/uui-core:PickerFilterConfig", "required": true }, { @@ -24837,6 +28157,7 @@ "editor": { "type": "bool" }, + "from": "@epam/uui-core:PickerFilterConfig", "required": false }, { @@ -24853,237 +28174,271 @@ "editor": { "type": "number" }, + "from": "@epam/uui-core:PickerFilterConfig", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:PickerFooterProps": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "PickerFooterProps", - "nameFull": "PickerFooterProps" - }, - "src": "uui-core/src/types/pickers.ts", - "exported": true - }, - "details": { - "kind": 265, - "typeValue": { - "raw": "PickerFooterProps", - "print": [ - "type PickerFooterProps = {", - " /** Instance of picker DataSource view */", - " view: IDataSourceView;", - " /** IEditable interface for the 'Show only selected' toggler */", - " showSelected: IEditable;", - " /** Call to clear picker selection */", - " clearSelection: () => void;", - " /** If 'single' provided - only one item is selected. In case of 'multi' - multiple items are selected */", - " selectionMode: 'single' | 'multi';", - " /** If true, 'Clear' button will be disabled */", - " disableClear?: boolean;", - "};" - ] - }, - "props": [ + }, { - "uid": "view", - "name": "view", + "uid": "filter", + "name": "filter", "comment": { "raw": [ - "Instance of picker DataSource view" + "Filter selectable days. Days, for which this callback returns false - will be disabled" ] }, "typeValue": { - "raw": "IDataSourceView" + "raw": "(day: Dayjs) => boolean" }, - "typeValueRef": "@epam/uui-core:IDataSourceView", + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:BaseDatePickerProps", + "required": false + }, + { + "uid": "format", + "name": "format", + "comment": { + "raw": [ + "Date format string, see [dayjs docs](@link https://day.js.org/docs/en/display/format)" + ] + }, + "typeValue": { + "raw": "string" + }, + "editor": { + "type": "string" + }, + "from": "@epam/uui-core:BaseDatePickerProps", + "required": false + }, + { + "uid": "type_2", + "name": "type", + "comment": { + "raw": [ + "Type of the filter" + ] + }, + "typeValue": { + "raw": "'datePicker'" + }, + "editor": { + "type": "oneOf", + "options": [ + "datePicker" + ] + }, + "from": "@epam/uui-core:DatePickerFilterConfig", "required": true }, { - "uid": "showSelected", - "name": "showSelected", + "uid": "type_3", + "name": "type", "comment": { "raw": [ - "IEditable interface for the 'Show only selected' toggler" + "Type of the filter" ] }, "typeValue": { - "raw": "IEditable" + "raw": "'numeric'" + }, + "editor": { + "type": "oneOf", + "options": [ + "numeric" + ] }, + "from": "@epam/uui-core:NumericFilterConfig", "required": true }, { - "uid": "clearSelection", - "name": "clearSelection", + "uid": "type_4", + "name": "type", "comment": { "raw": [ - "Call to clear picker selection" + "Type of the filter" ] }, "typeValue": { - "raw": "() => void" + "raw": "'rangeDatePicker'" }, "editor": { - "type": "func" + "type": "oneOf", + "options": [ + "rangeDatePicker" + ] }, + "from": "@epam/uui-core:RangeDatePickerFilterConfig", "required": true }, { - "uid": "selectionMode", - "name": "selectionMode", + "uid": "type_5", + "name": "type", "comment": { "raw": [ - "If 'single' provided - only one item is selected. In case of 'multi' - multiple items are selected" + "Type of the filter" ] }, "typeValue": { - "raw": "'multi' | 'single'" + "raw": "'custom'" }, "editor": { "type": "oneOf", "options": [ - "multi", - "single" + "custom" ] }, + "from": "@epam/uui-core:CustomFilterConfig", "required": true }, { - "uid": "disableClear", - "name": "disableClear", + "uid": "render", + "name": "render", "comment": { "raw": [ - "If true, 'Clear' button will be disabled" + "Render callback for filter body" ] }, "typeValue": { - "raw": "boolean" + "raw": "(props: IFilterItemBodyProps) => React.ReactElement>" }, "editor": { - "type": "bool" + "type": "component" }, - "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:RangeDatePickerInputType": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "RangeDatePickerInputType", - "nameFull": "RangeDatePickerInputType" - }, - "src": "uui-core/src/types/components/datePicker/BaseRangeDatePicker.ts", - "exported": true - }, - "details": { - "kind": 265, - "typeValue": { - "raw": "'from' | 'to'", - "print": [ - "type RangeDatePickerInputType = 'from' | 'to';" - ] - } - } - }, - "@epam/uui-core:RangeDatePickerPresets": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "RangeDatePickerPresets", - "nameFull": "RangeDatePickerPresets" - }, - "src": "uui-core/src/types/components/datePicker/BaseRangeDatePicker.ts", - "exported": true - }, - "details": { - "kind": 265, - "typeValue": { - "raw": "RangeDatePickerPresets", - "print": [ - "type RangeDatePickerPresets = {", - " /** Preset config */", - " [key: string]: {", - " /** Name of the preset to display in rangeDatePicker body */", - " name: ReactNode;", - " /** A pure function that gets range value which will be applied by preset selection */", - " getRange: () => RangeDatePickerPresetValue;", - " };", - "};" - ] - }, - "props": [ + "from": "@epam/uui-core:CustomFilterConfig", + "required": true + }, { - "uid": "[key: string]", - "name": "[key: string]", + "uid": "getTogglerValue", + "name": "getTogglerValue", "comment": { "raw": [ - "Preset config" + "A pure function that gets value to display in filter toggler" ] }, "typeValue": { - "raw": "{ name: React.ReactNode; getRange: () => RangeDatePickerPresetValue; }" + "raw": "(props: IFilterItemBodyProps) => React.ReactNode" }, + "editor": { + "type": "component" + }, + "from": "@epam/uui-core:CustomFilterConfig", "required": true } ], - "propsFromUnion": false + "propsFromUnion": true } }, - "@epam/uui-core:RangeDatePickerPresetValue": { + "@epam/uui-core:TextInputCoreProps": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "RangeDatePickerPresetValue", - "nameFull": "RangeDatePickerPresetValue" + "name": "TextInputCoreProps", + "nameFull": "TextInputCoreProps" }, - "src": "uui-core/src/types/components/datePicker/BaseRangeDatePicker.ts", + "src": "uui-core/src/types/components/TextInput.ts", "exported": true }, "details": { - "kind": 265, + "kind": 264, "typeValue": { - "raw": "RangeDatePickerPresetValue", + "raw": "TextInputCoreProps", "print": [ - "type RangeDatePickerPresetValue = {", - " /** Range from value */", - " from?: string;", - " /** Range to value */", - " to?: string;", - " /** Preset order in presets list */", - " order?: number;", - "};" + "interface TextInputCoreProps extends IHasCX, IClickable, IDisableable, IEditable, IHasPlaceholder, IHasIcon, ICanBeReadonly, IDropdownToggler, IAnalyticableOnChange, IHasRawProps>, ICanFocus, IHasTabIndex {", + " /** Enables cancel (cross) icon, and fires when the icon is clicked */", + " onCancel?(): void;", + " /** Enables accept (check) icon, and fires when the icon is clicked */", + " onAccept?(): void;", + " /** keydown event handler to put on the HTML input element */", + " onKeyDown?(e?: any): void;", + " /** Put focus on the element, when component is mounted */", + " autoFocus?: boolean;", + " /** Standard 'type' attribute to put on the HTML input element (e.g. 'password') */", + " type?: string;", + " /** Standard [autocomplete attribute]{@link https://www.w3schools.com/tags/att_input_autocomplete.asp} */", + " autoComplete?: string;", + " /** Standard [name attribute]{@link https://www.w3schools.com/tags/att_input_name.asp} */", + " name?: string;", + " /** Maximum input length in characters */", + " maxLength?: number;", + " /** Standard [inputMode attribute]{@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode} */", + " inputMode?: React.InputHTMLAttributes['inputMode'];", + " /** HTML ID attribute for input */", + " id?: string;", + "}" ] }, "props": [ { - "uid": "from", - "name": "from", + "uid": "onCancel", + "name": "onCancel", "comment": { "raw": [ - "Range from value" + "Enables cancel (cross) icon, and fires when the icon is clicked" ] }, "typeValue": { - "raw": "string" + "raw": "() => void" }, "editor": { - "type": "string" + "type": "func" }, "required": false }, { - "uid": "to", - "name": "to", + "uid": "onAccept", + "name": "onAccept", "comment": { "raw": [ - "Range to value" + "Enables accept (check) icon, and fires when the icon is clicked" + ] + }, + "typeValue": { + "raw": "() => void" + }, + "editor": { + "type": "func" + }, + "required": false + }, + { + "uid": "onKeyDown", + "name": "onKeyDown", + "comment": { + "raw": [ + "keydown event handler to put on the HTML input element" + ] + }, + "typeValue": { + "raw": "(e?: any) => void" + }, + "editor": { + "type": "func" + }, + "required": false + }, + { + "uid": "autoFocus", + "name": "autoFocus", + "comment": { + "raw": [ + "Put focus on the element, when component is mounted" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "required": false + }, + { + "uid": "type", + "name": "type", + "comment": { + "raw": [ + "Standard 'type' attribute to put on the HTML input element (e.g. 'password')" ] }, "typeValue": { @@ -25095,59 +28450,31 @@ "required": false }, { - "uid": "order", - "name": "order", + "uid": "autoComplete", + "name": "autoComplete", "comment": { "raw": [ - "Preset order in presets list" + "Standard [autocomplete attribute]{@link https://www.w3schools.com/tags/att_input_autocomplete.asp}" ] }, "typeValue": { - "raw": "number" + "raw": "string" }, "editor": { - "type": "number" + "type": "string" }, "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:RangeDatePickerValue": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "RangeDatePickerValue", - "nameFull": "RangeDatePickerValue" - }, - "src": "uui-core/src/types/components/datePicker/BaseRangeDatePicker.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "RangeDatePickerValue", - "print": [ - "interface RangeDatePickerValue {", - " /** RangeDatePicker 'from' value */", - " from: string | null;", - " /** RangeDatePicker 'to' value */", - " to: string | null;", - "}" - ] - }, - "props": [ + }, { - "uid": "from", - "name": "from", + "uid": "name", + "name": "name", "comment": { "raw": [ - "RangeDatePicker 'from' value" + "Standard [name attribute]{@link https://www.w3schools.com/tags/att_input_name.asp}" ] }, "typeValue": { - "raw": "null | string" + "raw": "string" }, "editor": { "type": "string" @@ -25155,70 +28482,53 @@ "required": false }, { - "uid": "to", - "name": "to", + "uid": "maxLength", + "name": "maxLength", "comment": { "raw": [ - "RangeDatePicker 'to' value" + "Maximum input length in characters" ] }, "typeValue": { - "raw": "null | string" + "raw": "number" }, "editor": { - "type": "string" + "type": "number" }, "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:RenderCellProps": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "RenderCellProps", - "nameFull": "RenderCellProps" - }, - "src": "uui-core/src/types/tables.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "RenderCellProps", - "print": [ - "interface RenderCellProps extends DataTableCellOptions {", - " /**", - " * Lens instance, wrapping IEditable on the row, to help binding to row's value.", - " * E.g. ", - " */", - " rowLens: ILens;", - "}" - ] - }, - "props": [ + }, { - "uid": "rowLens", - "name": "rowLens", + "uid": "inputMode", + "name": "inputMode", "comment": { "raw": [ - "Lens instance, wrapping IEditable on the row, to help binding to row's value.", - " E.g. " + "Standard [inputMode attribute]{@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode}" ] }, "typeValue": { - "raw": "ILens" + "raw": "'search' | 'numeric' | 'none' | 'text' | 'tel' | 'url' | 'email' | 'decimal'" }, - "required": true + "editor": { + "type": "oneOf", + "options": [ + "search", + "numeric", + "none", + "text", + "tel", + "url", + "email", + "decimal" + ] + }, + "required": false }, { - "uid": "key", - "name": "key", + "uid": "id", + "name": "id", "comment": { "raw": [ - "Key to use as component's key" + "HTML ID attribute for input" ] }, "typeValue": { @@ -25227,60 +28537,63 @@ "editor": { "type": "string" }, - "from": "@epam/uui-core:DataTableCellOptions", - "required": true + "required": false }, { - "uid": "rowProps", - "name": "rowProps", + "uid": "cx", + "name": "cx", "comment": { "raw": [ - "DataTableRowsProps object for the table row the cell is at" + "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" ] }, "typeValue": { - "raw": "DataTableRowProps" + "raw": "null | string | number | boolean | ClassDictionary | ClassArray" }, - "from": "@epam/uui-core:DataTableCellOptions", - "required": true + "typeValueRef": "@epam/uui-core:ClassValue", + "from": "@epam/uui-core:IHasCX", + "required": false }, { - "uid": "column", - "name": "column", + "uid": "onClick", + "name": "onClick", "comment": { "raw": [ - "DataColumnProps object for the column the cell is at" + "Called when component is clicked" ] }, "typeValue": { - "raw": "DataColumnProps" + "raw": "(e?: any) => void" }, - "from": "@epam/uui-core:DataTableCellOptions", - "required": true + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IClickable", + "required": false }, { - "uid": "index", - "name": "index", + "uid": "isDisabled", + "name": "isDisabled", "comment": { "raw": [ - "Column index in table" + "Disable editing, and visually de-emphasize value of the component" ] }, "typeValue": { - "raw": "number" + "raw": "boolean" }, "editor": { - "type": "number" + "type": "bool" }, - "from": "@epam/uui-core:DataTableCellOptions", + "from": "@epam/uui-core:IDisableable", "required": false }, { - "uid": "isFirstColumn", - "name": "isFirstColumn", + "uid": "isInvalid", + "name": "isInvalid", "comment": { "raw": [ - "True if the cell is in the first column" + "True if component contains invalid input" ] }, "typeValue": { @@ -25289,15 +28602,15 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:DataTableCellOptions", - "required": true + "from": "@epam/uui-core:ICanBeInvalid", + "required": false }, { - "uid": "isLastColumn", - "name": "isLastColumn", + "uid": "isReadonly", + "name": "isReadonly", "comment": { "raw": [ - "True if the cell is in the last column" + "Disable editing. Unlike isDisabled, keep component's value readable." ] }, "typeValue": { @@ -25306,162 +28619,135 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:DataTableCellOptions", - "required": true + "from": "@epam/uui-core:ICanBeReadonly", + "required": false }, { - "uid": "tabIndex", - "name": "tabIndex", + "uid": "isRequired", + "name": "isRequired", "comment": { "raw": [ - "HTML tabIndex attribute to set on the cell" + "Marks that component's value is required and shouldn't be empty" ] }, "typeValue": { - "raw": "number" + "raw": "boolean" }, "editor": { - "type": "number" + "type": "bool" }, - "from": "@epam/uui-core:DataTableCellOptions", + "from": "@epam/uui-core:ICanBeRequired", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:RenderEditorProps": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "RenderEditorProps", - "nameFull": "RenderEditorProps" - }, - "src": "uui-core/src/types/tables.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "RenderEditorProps", - "print": [ - "interface RenderEditorProps extends IEditable, IHasValidationMessage, ICanFocus {", - " /** DataRowProps object of rendered row */", - " rowProps: DataRowProps;", - " /** Cell mode signal the editor component to adapt it's visuals to cell editor */", - " mode: 'cell';", - " /** Ref to pass to the editor component.", - " * It's required for correct focus/blur behavior.", - " * */", - " ref?: ForwardedRef;", - "}" - ] - }, - "props": [ + }, { - "uid": "rowProps", - "name": "rowProps", + "uid": "value", + "name": "value", "comment": { "raw": [ - "DataRowProps object of rendered row" + "The current value of component" ] }, "typeValue": { - "raw": "DataRowProps" + "raw": "string" }, - "typeValueRef": "@epam/uui-core:DataRowProps", + "editor": { + "type": "string" + }, + "from": "@epam/uui-core:IControlled", "required": true }, { - "uid": "mode", - "name": "mode", + "uid": "onValueChange", + "name": "onValueChange", "comment": { "raw": [ - "Cell mode signal the editor component to adapt it's visuals to cell editor" + "Called when value needs to be changed (usually due to user interaction)" ] }, "typeValue": { - "raw": "'cell'" + "raw": "(newValue: string | undefined) => void" }, "editor": { - "type": "oneOf", - "options": [ - "cell" - ] + "type": "func" }, + "from": "@epam/uui-core:IControlled", "required": true }, { - "uid": "ref", - "name": "ref", + "uid": "placeholder", + "name": "placeholder", "comment": { "raw": [ - "Ref to pass to the editor component.", - " It's required for correct focus/blur behavior." + "Placeholder to display when empty" ] }, "typeValue": { - "raw": "null | (instance: HTMLElement | null) => void | React.MutableRefObject" + "raw": "any" }, + "from": "@epam/uui-core:IHasPlaceholder", "required": false }, { - "uid": "isInvalid", - "name": "isInvalid", + "uid": "icon", + "name": "icon", "comment": { "raw": [ - "True if component contains invalid input" + "Icon can be a React element (usually an SVG element)" ] }, "typeValue": { - "raw": "boolean" + "raw": "Icon" }, "editor": { - "type": "bool" + "type": "component" }, - "from": "@epam/uui-core:ICanBeInvalid", + "from": "@epam/uui-core:IHasIcon", "required": false }, { - "uid": "isDisabled", - "name": "isDisabled", + "uid": "iconPosition", + "name": "iconPosition", "comment": { "raw": [ - "Disable editing, and visually de-emphasize value of the component" + "Position of the icon (left of right)" ] }, "typeValue": { - "raw": "boolean" + "raw": "'left' | 'right'" }, "editor": { - "type": "bool" + "type": "oneOf", + "options": [ + "left", + "right" + ] }, - "from": "@epam/uui-core:IDisableable", + "from": "@epam/uui-core:IHasIcon", "required": false }, { - "uid": "isReadonly", - "name": "isReadonly", + "uid": "onIconClick", + "name": "onIconClick", "comment": { "raw": [ - "Disable editing. Unlike isDisabled, keep component's value readable." + "Click handler for the icon" ] }, "typeValue": { - "raw": "boolean" + "raw": "() => void" }, "editor": { - "type": "bool" + "type": "func" }, - "from": "@epam/uui-core:ICanBeReadonly", + "from": "@epam/uui-core:IHasIcon", "required": false }, { - "uid": "isRequired", - "name": "isRequired", + "uid": "isOpen", + "name": "isOpen", "comment": { "raw": [ - "Marks that component's value is required and shouldn't be empty" + "When isDropdown=true, indicate that dropdown is open with chevron icon" ] }, "typeValue": { @@ -25470,53 +28756,56 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:ICanBeRequired", + "from": "@epam/uui-core:IDropdownToggler", "required": false }, { - "uid": "value", - "name": "value", + "uid": "isDropdown", + "name": "isDropdown", "comment": { "raw": [ - "The current value of component" + "Shows chevron icon, enabling component to act as dropdown toggler" ] }, "typeValue": { - "raw": "TCellValue" + "raw": "boolean" }, - "from": "@epam/uui-core:IControlled", - "required": true + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:IDropdownToggler", + "required": false }, { - "uid": "onValueChange", - "name": "onValueChange", + "uid": "getValueChangeAnalyticsEvent", + "name": "getValueChangeAnalyticsEvent", "comment": { "raw": [ - "Called when value needs to be changed (usually due to user interaction)" + "Given a value, returns an analytics event to send when component is edited.", + " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)." ] }, "typeValue": { - "raw": "(newValue: TCellValue) => void" + "raw": "(newValue: string | null, oldValue: string | null) => AnalyticsEvent" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:IControlled", - "required": true + "from": "@epam/uui-core:IAnalyticableOnChange", + "required": false }, { - "uid": "validationMessage", - "name": "validationMessage", + "uid": "rawProps", + "name": "rawProps", "comment": { "raw": [ - "Message describing why the value is invalid" + "Any HTML attributes (native or 'data-') to put on the underlying component" ] }, "typeValue": { - "raw": "React.ReactNode" + "raw": "React.HTMLAttributes & Record<`data-${string}`, string>" }, - "typeValueRef": "@types/react:ReactNode", - "from": "@epam/uui-core:IHasValidationMessage", + "from": "@epam/uui-core:IHasRawProps", "required": false }, { @@ -25528,7 +28817,7 @@ ] }, "typeValue": { - "raw": "(e: React.FocusEvent) => void" + "raw": "(e: React.FocusEvent) => void" }, "editor": { "type": "func" @@ -25545,259 +28834,380 @@ ] }, "typeValue": { - "raw": "(e: React.FocusEvent) => void" + "raw": "(e: React.FocusEvent) => void" }, "editor": { "type": "func" }, "from": "@epam/uui-core:ICanFocus", "required": false + }, + { + "uid": "tabIndex", + "name": "tabIndex", + "comment": { + "raw": [ + "Controls the order of keyboard navigation between components" + ] + }, + "typeValue": { + "raw": "number" + }, + "editor": { + "type": "number" + }, + "from": "@epam/uui-core:IHasTabIndex", + "required": false } ], "propsFromUnion": false } }, - "@epam/uui-core:ScrollAlign": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "ScrollAlign", - "nameFull": "ScrollAlign" - }, - "src": "uui-core/src/types/dataSources.ts", - "exported": true - }, - "details": { - "kind": 265, - "typeValue": { - "raw": "'top' | 'nearest'", - "print": [ - "type ScrollAlign = 'top' | 'nearest';" - ] - } - } - }, - "@epam/uui-core:ScrollToConfig": { + "@epam/uui-core:TooltipCoreProps": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "ScrollToConfig", - "nameFull": "ScrollToConfig" - }, - "src": "uui-core/src/types/dataSources.ts", - "comment": { - "raw": [ - "Holds configuration of the force scrolling behavior." - ] + "name": "TooltipCoreProps", + "nameFull": "TooltipCoreProps" }, + "src": "uui-core/src/types/components/Tooltip.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "ScrollToConfig", + "raw": "TooltipCoreProps", "print": [ - "/**", - " * Holds configuration of the force scrolling behavior.", - " */", - "interface ScrollToConfig {", - " /** Index of the row to be scrolled to. */", - " index?: number;", - " /** Scrolling movement behavior. */", - " behavior?: ScrollBehavior;", - " /** Alignment behavior. This property specifies, to which position a row with an index should be scrolled to.", - " * @default 'top'", - " *", - " * If `nearest` is specified, a list will be scrolled to a row in the nearest position only if row is not visible.", - " * If a row is closer to the bottom, the list will be scrolled to the row in the bottom position of a scroll container.", - " * If closer to the top, will be scrolled to the row in the top position.", - " *", - " * If `top` is specified, scrolling a list to a row to the top part of the container will happen in any case.", - " */", - " align?: ScrollAlign;", + "interface TooltipCoreProps extends IHasCX, IHasChildren, IHasRawProps>, Partial>, Pick {", + " /** Content to show in the tooltip (ReactNode) */", + " content?: any;", + " /** Alternative to 'content' prop, you can pass a render function.", + " * The function will only be called when content is shown, this can save performance. */", + " renderContent?(): any;", + " /** See [Popper docs]{@link https://popper.js.org/docs/v2/modifiers/offset/} */", + " offset?: Options['offset'];", + " /** React Node(s) to show tooltip for */", + " children?: React.ReactNode;", + " /** Max width of tooltip */", + " maxWidth?: number;", "}" ] }, "props": [ { - "uid": "index", - "name": "index", + "uid": "content", + "name": "content", + "comment": { + "raw": [ + "Content to show in the tooltip (ReactNode)" + ] + }, + "typeValue": { + "raw": "any" + }, + "required": false + }, + { + "uid": "renderContent", + "name": "renderContent", + "comment": { + "raw": [ + "Alternative to 'content' prop, you can pass a render function.", + " The function will only be called when content is shown, this can save performance." + ] + }, + "typeValue": { + "raw": "() => any" + }, + "editor": { + "type": "func" + }, + "required": false + }, + { + "uid": "offset", + "name": "offset", + "comment": { + "raw": [ + "See [Popper docs]{@link https://popper.js.org/docs/v2/modifiers/offset/}" + ] + }, + "typeValue": { + "raw": "OffsetsFunction | [number | null | undefined, number | null | undefined]" + }, + "required": false + }, + { + "uid": "children", + "name": "children", + "comment": { + "raw": [ + "React Node(s) to show tooltip for" + ] + }, + "typeValue": { + "raw": "React.ReactNode" + }, + "typeValueRef": "@types/react:ReactNode", + "required": false + }, + { + "uid": "maxWidth", + "name": "maxWidth", + "comment": { + "raw": [ + "Max width of tooltip" + ] + }, + "typeValue": { + "raw": "number" + }, + "editor": { + "type": "number" + }, + "required": false + }, + { + "uid": "cx", + "name": "cx", + "comment": { + "raw": [ + "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" + ] + }, + "typeValue": { + "raw": "null | string | number | boolean | ClassDictionary | ClassArray" + }, + "typeValueRef": "@epam/uui-core:ClassValue", + "from": "@epam/uui-core:IHasCX", + "required": false + }, + { + "uid": "rawProps", + "name": "rawProps", + "comment": { + "raw": [ + "Any HTML attributes (native or 'data-') to put on the underlying component" + ] + }, + "typeValue": { + "raw": "React.HTMLAttributes & Record<`data-${string}`, string>" + }, + "from": "@epam/uui-core:IHasRawProps", + "required": false + }, + { + "uid": "value", + "name": "value", + "comment": { + "raw": [ + "The current value of component" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:IControlled", + "required": false + }, + { + "uid": "onValueChange", + "name": "onValueChange", + "comment": { + "raw": [ + "Called when value needs to be changed (usually due to user interaction)" + ] + }, + "typeValue": { + "raw": "(newValue: boolean) => void" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IControlled", + "required": false + }, + { + "uid": "onClose", + "name": "onClose", "comment": { "raw": [ - "Index of the row to be scrolled to." + "Called when dropdown was closed" ] }, "typeValue": { - "raw": "number" + "raw": "() => void" }, "editor": { - "type": "number" + "type": "func" }, + "from": "@epam/uui-core:DropdownProps", "required": false }, { - "uid": "behavior", - "name": "behavior", + "uid": "placement", + "name": "placement", "comment": { "raw": [ - "Scrolling movement behavior." + "Defines dropdown body placement relative to target" ] }, "typeValue": { - "raw": "'auto' | 'instant' | 'smooth'" + "raw": "'left' | 'right' | 'auto' | 'auto-start' | 'auto-end' | 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end'" }, "editor": { "type": "oneOf", "options": [ + "left", + "right", "auto", - "instant", - "smooth" + "auto-start", + "auto-end", + "top", + "bottom", + "top-start", + "top-end", + "bottom-start", + "bottom-end", + "right-start", + "right-end", + "left-start", + "left-end" ] }, + "from": "@epam/uui-core:DropdownProps", "required": false }, { - "uid": "align", - "name": "align", + "uid": "modifiers", + "name": "modifiers", "comment": { "raw": [ - "Alignment behavior. This property specifies, to which position a row with an index should be scrolled to.", - " @default 'top'", - "", - " If `nearest` is specified, a list will be scrolled to a row in the nearest position only if row is not visible.", - " If a row is closer to the bottom, the list will be scrolled to the row in the bottom position of a scroll container.", - " If closer to the top, will be scrolled to the row in the top position.", - "", - " If `top` is specified, scrolling a list to a row to the top part of the container will happen in any case." + "Original popper.js modifiers. See [Popper docs]{@link https://popper.js.org/docs/v2/modifiers/}" + ] + }, + "typeValue": { + "raw": "(StrictModifier | Partial>)[]" + }, + "from": "@epam/uui-core:DropdownProps", + "required": false + }, + { + "uid": "openDelay", + "name": "openDelay", + "comment": { + "raw": [ + "Defines how much 'ms' user should hold mouse over target to open the dropdown", + " This prop work only with openOnHover={true}", + " @default 0" ], "tags": { - "@default": "top" + "@default": 0 } }, "typeValue": { - "raw": "'top' | 'nearest'" + "raw": "number" }, "editor": { - "type": "oneOf", - "options": [ - "top", - "nearest" - ] + "type": "number" }, + "from": "@epam/uui-core:DropdownProps", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:SinglePickerProps": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "SinglePickerProps", - "nameFull": "SinglePickerProps" - }, - "src": "uui-core/src/types/pickers.ts", - "exported": true - }, - "details": { - "kind": 265, - "typeValue": { - "raw": "{ selectionMode: 'single'; valueType?: 'id' | undefined; } & IEditable | { selectionMode: 'single'; valueType: 'entity'; } & IEditable", - "print": [ - "type SinglePickerProps = ({", - " /** If 'single' provided - only one item is selected. In case of 'multi' - multiple items are selected */", - " selectionMode: 'single';", - " /** Defines what to use in value/onValueChange: 'id' - item id (TId). 'entity' - the item itself (TItem) */", - " valueType?: 'id';", - "} & IEditable) | ({", - " /** If 'single' provided - only one item is selected. In case of 'multi' - multiple items are selected */", - " selectionMode: 'single';", - " /** Defines what to use in value/onValueChange: 'id' - item id (TId). 'entity' - the item itself (TItem) */", - " valueType: 'entity';", - "} & IEditable);" - ] - }, - "props": [ + }, { - "uid": "selectionMode", - "name": "selectionMode", + "uid": "closeDelay", + "name": "closeDelay", "comment": { "raw": [ - "If 'single' provided - only one item is selected. In case of 'multi' - multiple items are selected" - ] + "Defines after which delay dropdown will be closed, if user leave mouse from target.", + " This prop work only with openOnHover={true}", + " @default 0" + ], + "tags": { + "@default": 0 + } }, "typeValue": { - "raw": "'single'" + "raw": "number" }, "editor": { - "type": "oneOf", - "options": [ - "single" - ] + "type": "number" }, - "required": true + "from": "@epam/uui-core:DropdownProps", + "required": false }, { - "uid": "valueType", - "name": "valueType", + "uid": "closeOnMouseLeave", + "name": "closeOnMouseLeave", "comment": { "raw": [ - "Defines what to use in value/onValueChange: 'id' - item id (TId). 'entity' - the item itself (TItem)" - ] + "Defined when to close dropdown in case of openOnHover={ true }", + " toggler — dropdown will be closed when a mouse leaves the target component", + " boundary — will not to close the dropdown when a mouse is on target or in 30px around target area", + " false — will not close dropdown by mouse move event", + " @default 'toggler'" + ], + "tags": { + "@default": "toggler" + } }, "typeValue": { - "raw": "'id'" + "raw": "false | 'toggler' | 'boundary'" }, "editor": { "type": "oneOf", "options": [ - "id" + false, + "toggler", + "boundary" ] }, + "from": "@epam/uui-core:DropdownProps", "required": false }, { - "uid": "isInvalid", - "name": "isInvalid", + "uid": "portalTarget", + "name": "portalTarget", "comment": { "raw": [ - "True if component contains invalid input" + "Node of portal target, where to render the dropdown body.", + " By default, will be used global portal node." ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "HTMLElement" }, - "from": "@epam/uui-core:ICanBeInvalid", + "from": "@epam/uui-core:DropdownProps", "required": false }, { - "uid": "isDisabled", - "name": "isDisabled", + "uid": "boundaryElement", + "name": "boundaryElement", "comment": { "raw": [ - "Disable editing, and visually de-emphasize value of the component" + "Element relative to which dropdown will calculate position" ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "HTMLElement | HTMLElement[] | 'clippingParents'" }, - "from": "@epam/uui-core:IDisableable", + "from": "@epam/uui-core:DropdownProps", "required": false }, { - "uid": "isReadonly", - "name": "isReadonly", + "uid": "closeBodyOnTogglerHidden", + "name": "closeBodyOnTogglerHidden", "comment": { "raw": [ - "Disable editing. Unlike isDisabled, keep component's value readable." - ] + "Pass false, if you do not want to close the dropdown in case Toggler move out of viewport.", + " @default true" + ], + "tags": { + "@default": true + } }, "typeValue": { "raw": "boolean" @@ -25805,470 +29215,530 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:ICanBeReadonly", + "from": "@epam/uui-core:DropdownProps", "required": false - }, + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:UseCascadeSelectionServiceProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "UseCascadeSelectionServiceProps", + "nameFull": "UseCascadeSelectionServiceProps" + }, + "src": "uui-core/src/data/processing/views/dataRows/services/useCascadeSelectionService.ts", + "comment": { + "raw": [ + "Cascade selection service configuration." + ] + }, + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "UseCascadeSelectionServiceProps", + "print": [ + "/**", + " * Cascade selection service configuration.", + " */", + "interface UseCascadeSelectionServiceProps extends Pick, 'rowOptions' | 'getRowOptions' | 'cascadeSelection'>, LoadMissingRecords, GetItemStatus {", + " /**", + " * Tree-like data, cascade selection should be performed on.", + " */", + " tree: ITree;", + "}" + ] + }, + "props": [ { - "uid": "isRequired", - "name": "isRequired", + "uid": "tree", + "name": "tree", "comment": { "raw": [ - "Marks that component's value is required and shouldn't be empty" + "Tree-like data, cascade selection should be performed on." ] }, "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" + "raw": "ITree" }, - "from": "@epam/uui-core:ICanBeRequired", - "required": false + "required": true }, { - "uid": "value", - "name": "value", + "uid": "rowOptions", + "name": "rowOptions", "comment": { "raw": [ - "The current value of component" + "Specifies if rows are selectable, checkable, draggable, clickable, and more.", + " See DataRowOptions for more details.", + " If options depends on the item itself, use getRowOptions.", + " Specifying both rowOptions and getRowOptions might help to render better loading skeletons: we use only rowOptions in this case, as we haven't loaded an item yet.", + " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", + " @param item An item to get options for" ] }, "typeValue": { - "raw": "TId" + "raw": "DataRowOptions" }, - "from": "@epam/uui-core:IControlled", - "required": true + "from": "@epam/uui-core:BaseDataSourceConfig", + "required": false }, { - "uid": "onValueChange", - "name": "onValueChange", + "uid": "getRowOptions", + "name": "getRowOptions", "comment": { "raw": [ - "Called when value needs to be changed (usually due to user interaction)" + "For each row, specify if row is selectable, editable, checkable, draggable, clickable, have its own set of columns, and more.", + " To make rows editable, pass IEditable interface to each row. This works the same way as for other editable components.", + " See DataRowOptions for more details.", + " If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.", + " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", + " @param item - record, configuration should be returned for.", + " @param index - index of a row. It is optional and should not be expected, that it is provided on every call." ] }, "typeValue": { - "raw": "(newValue: TId) => void" + "raw": "(item: TItem, index?: number | undefined) => DataRowOptions" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:IControlled", - "required": true + "from": "@epam/uui-core:BaseDataSourceConfig", + "required": false }, { - "uid": "valueType_2", - "name": "valueType", + "uid": "cascadeSelection", + "name": "cascadeSelection", "comment": { "raw": [ - "Defines what to use in value/onValueChange: 'id' - item id (TId). 'entity' - the item itself (TItem)" + "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.", + " - false: All nodes are selected independently (default).", + " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.", + " - 'implicit': Selecting a parent node means that all children are considered checked.", + " The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked", + " parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,", + " its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last", + " unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked." ] }, "typeValue": { - "raw": "'entity'" + "raw": "boolean | 'implicit' | 'explicit'" }, "editor": { "type": "oneOf", "options": [ - "entity" + false, + true, + "implicit", + "explicit" ] }, - "required": true + "from": "@epam/uui-core:BaseDataSourceConfig", + "required": false }, { - "uid": "value_2", - "name": "value", + "uid": "loadMissingRecordsOnCheck", + "name": "loadMissingRecordsOnCheck", "comment": { "raw": [ - "The current value of component" + "Loads missing records and provides a fulfilled tree.", + " @param id - id of an item, which is checked and records should be loaded for.", + " @param isChecked - checking status of the record.", + " @param isRoot - a flag, which marks if all records should be checked/unchecked.", + " @returns fulfilled tree with missing records, those required to be loaded for checking." ] }, "typeValue": { - "raw": "TItem" + "raw": "(id: TId, isChecked: boolean, isRoot: boolean) => Promise>" }, - "from": "@epam/uui-core:IControlled", - "required": true + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:LoadMissingRecords", + "required": false }, { - "uid": "onValueChange_2", - "name": "onValueChange", + "uid": "getItemStatus", + "name": "getItemStatus", "comment": { "raw": [ - "Called when value needs to be changed (usually due to user interaction)" + "Provides a status of the given item.", + " @param id - id of an item, status to be provided for.", + " @returns status of the item." ] }, "typeValue": { - "raw": "(newValue: TItem) => void" + "raw": "(id: TId) => RecordStatus" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:IControlled", - "required": true + "from": "@epam/uui-core:GetItemStatus", + "required": false } ], - "propsFromUnion": true + "propsFromUnion": false } }, - "@epam/uui-core:SortDirection": { + "@epam/uui-core:UseDataRowsProps": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "SortDirection", - "nameFull": "SortDirection" + "name": "UseDataRowsProps", + "nameFull": "UseDataRowsProps" }, - "src": "uui-core/src/types/dataSources.ts", - "exported": true - }, - "details": { - "kind": 265, - "typeValue": { - "raw": "'asc' | 'desc'", - "print": [ - "type SortDirection = 'asc' | 'desc';" + "src": "uui-core/src/data/processing/views/dataRows/useDataRows.ts", + "comment": { + "raw": [ + "`useDataRows` configuration." ] - } - } - }, - "@epam/uui-core:SortingOption": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "SortingOption", - "nameFull": "SortingOption" }, - "src": "uui-core/src/types/dataSources.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "SortingOption", + "raw": "UseDataRowsProps", "print": [ - "interface SortingOption {", - " /** Field of sorted entity under which sorting is performed */", - " field: keyof T;", - " /** Direction of a sorting */", - " direction?: SortDirection;", + "/**", + " * `useDataRows` configuration.", + " */", + "interface UseDataRowsProps extends CommonTreeConfig, ITreeLoadingState, Partial>, GetItemStatus {", + " /**", + " * Tree-like data, rows to be built from.", + " */", + " tree: ITree;", "}" ] }, "props": [ { - "uid": "field", - "name": "field", + "uid": "tree", + "name": "tree", "comment": { "raw": [ - "Field of sorted entity under which sorting is performed" + "Tree-like data, rows to be built from." ] }, "typeValue": { - "raw": "keyof T" + "raw": "ITree" }, "required": true }, { - "uid": "direction", - "name": "direction", + "uid": "dataSourceState", + "name": "dataSourceState", "comment": { "raw": [ - "Direction of a sorting" + "State of the dataSource." ] }, "typeValue": { - "raw": "'asc' | 'desc'" - }, - "editor": { - "type": "oneOf", - "options": [ - "asc", - "desc" - ] + "raw": "DataSourceState" }, - "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:SpinnerCoreProps": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "SpinnerCoreProps", - "nameFull": "SpinnerCoreProps" - }, - "src": "uui-core/src/types/components/Spinner.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "SpinnerCoreProps", - "print": [ - "interface SpinnerCoreProps extends IHasCX, IHasRawProps>, IHasForwardedRef {", - "}" - ] - }, - "props": [ + "from": "@epam/uui-core:CommonTreeConfig", + "required": true + }, { - "uid": "cx", - "name": "cx", + "uid": "setDataSourceState", + "name": "setDataSourceState", "comment": { "raw": [ - "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" + "DataSource state update handler." ] }, "typeValue": { - "raw": "null | string | number | boolean | ClassDictionary | ClassArray" + "raw": "SetDataSourceState" }, - "typeValueRef": "@epam/uui-core:ClassValue", - "from": "@epam/uui-core:IHasCX", - "required": false + "typeValueRef": "@epam/uui-core:SetDataSourceState", + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:CommonTreeConfig", + "required": true }, { - "uid": "rawProps", - "name": "rawProps", + "uid": "getId", + "name": "getId", "comment": { "raw": [ - "Any HTML attributes (native or 'data-') to put on the underlying component" + "Should return unique ID of the TItem", + " If omitted, we assume that every TItem has and unique id in its 'id' field.", + " @param item - record, which id should be returned.", + " @returns item id." ] }, "typeValue": { - "raw": "React.HTMLAttributes & Record<`data-${string}`, string>" + "raw": "(item: TItem) => TId" }, - "from": "@epam/uui-core:IHasRawProps", + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "forwardedRef", - "name": "forwardedRef", + "uid": "complexIds", + "name": "complexIds", "comment": { "raw": [ - "this ref is passed to the underlying component" + "Set to true, if you use IDs which can't act as javascript Map key (objects or arrays).", + " In this case, IDs will be internally JSON.stringify-ed to be used as Maps keys." ] }, "typeValue": { - "raw": "null | (instance: HTMLDivElement | null) => void | React.MutableRefObject" + "raw": "boolean" }, - "from": "@epam/uui-core:IHasForwardedRef", + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:TableFiltersConfig": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "TableFiltersConfig", - "nameFull": "TableFiltersConfig" - }, - "src": "uui-core/src/types/tables.ts", - "exported": true - }, - "details": { - "kind": 265, - "typeValue": { - "raw": "PickerFilterConfig | DatePickerFilterConfig | NumericFilterConfig | RangeDatePickerFilterConfig | CustomFilterConfig", - "print": [ - "type TableFiltersConfig = PickerFilterConfig | DatePickerFilterConfig | NumericFilterConfig | RangeDatePickerFilterConfig | CustomFilterConfig;" - ] - }, - "props": [ + }, { - "uid": "title", - "name": "title", + "uid": "getParentId", + "name": "getParentId", "comment": { "raw": [ - "Title of the filter, displayed in filter toggler and filter body" + "Should return ID of the Item's parent. Usually it's i => i.parentId.", + " If specified, Data Source will build items hierarchy.", + "", + " Also, it is used by LazyDataSource to pre-fetch missing parents of loaded items. This is required in following cases:", + " - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain", + " to highlight parents with selected children", + " - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),", + " We need to load parents with a separate call (if backend doesn't pre-fetch them)", + "", + " @param item - record, which paretnId should be returned.", + " @returns item parentId." ] }, "typeValue": { - "raw": "string" + "raw": "(item: TItem) => TId | undefined" }, "editor": { - "type": "string" + "type": "func" }, - "from": "@epam/uui-core:FilterConfigBase", - "required": true + "from": "@epam/uui-core:BaseDataSourceConfig", + "required": false }, { - "uid": "field", - "name": "field", + "uid": "rowOptions", + "name": "rowOptions", "comment": { "raw": [ - "Field of filters object, where store the filter value" + "Specifies if rows are selectable, checkable, draggable, clickable, and more.", + " See DataRowOptions for more details.", + " If options depends on the item itself, use getRowOptions.", + " Specifying both rowOptions and getRowOptions might help to render better loading skeletons: we use only rowOptions in this case, as we haven't loaded an item yet.", + " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", + " @param item An item to get options for" ] }, "typeValue": { - "raw": "keyof TFilter" + "raw": "DataRowOptions" }, - "from": "@epam/uui-core:FilterConfigBase", - "required": true + "from": "@epam/uui-core:BaseDataSourceConfig", + "required": false }, { - "uid": "columnKey", - "name": "columnKey", + "uid": "getRowOptions", + "name": "getRowOptions", "comment": { "raw": [ - "Key of the column to which the filter is attached.", - " If omitted, filter won't be attached to the column." + "For each row, specify if row is selectable, editable, checkable, draggable, clickable, have its own set of columns, and more.", + " To make rows editable, pass IEditable interface to each row. This works the same way as for other editable components.", + " See DataRowOptions for more details.", + " If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.", + " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", + " @param item - record, configuration should be returned for.", + " @param index - index of a row. It is optional and should not be expected, that it is provided on every call." ] }, "typeValue": { - "raw": "string" + "raw": "(item: TItem, index?: number | undefined) => DataRowOptions" }, "editor": { - "type": "string" + "type": "func" }, - "from": "@epam/uui-core:FilterConfigBase", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "isAlwaysVisible", - "name": "isAlwaysVisible", + "uid": "isFoldedByDefault", + "name": "isFoldedByDefault", "comment": { "raw": [ - "Pass true to make filter always visible in FilterPanel. User can't hide it via 'Add filter' dropdown" + "Can be specified to unfold all or some items at start.", + " If not specified, all rows would be folded.", + " @param item - record, folding value should be returned for.", + " @param dataSourceState - dataSource state with current `foldAll` value. It provides the possibility to respect foldAll change, if `isFoldedByDefault` is implemented." ] }, "typeValue": { - "raw": "boolean" + "raw": "(item: TItem, state: DataSourceState) => boolean" }, "editor": { - "type": "bool" + "type": "func" }, - "from": "@epam/uui-core:FilterConfigBase", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "predicates", - "name": "predicates", + "uid": "cascadeSelection", + "name": "cascadeSelection", "comment": { "raw": [ - "Array of available predicates for the filter. This predicated can be chosen by user and applied to the filter value." + "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.", + " - false: All nodes are selected independently (default).", + " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.", + " - 'implicit': Selecting a parent node means that all children are considered checked.", + " The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked", + " parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,", + " its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last", + " unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked." ] }, "typeValue": { - "raw": "IFilterPredicate[]" + "raw": "boolean | 'implicit' | 'explicit'" }, - "from": "@epam/uui-core:FilterConfigBase", + "editor": { + "type": "oneOf", + "options": [ + false, + true, + "implicit", + "explicit" + ] + }, + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "maxCount", - "name": "maxCount", + "uid": "selectAll", + "name": "selectAll", "comment": { "raw": [ - "Count of words to show in the Filter toggler. By default, 2 item will be shown." - ] + "Enables/disables selectAll functionality. If disabled explicitly, `selectAll`, returned from a view is null.", + " @default true" + ], + "tags": { + "@default": true + } }, "typeValue": { - "raw": "number" + "raw": "boolean" }, "editor": { - "type": "number" + "type": "bool" }, - "from": "@epam/uui-core:FilterConfigBase", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "togglerWidth", - "name": "togglerWidth", + "uid": "showSelectedOnly", + "name": "showSelectedOnly", "comment": { "raw": [ - "Defines maxWidth of the filter toggler" + "Enables returning only selected rows and loading missing selected/checked rows, if it is required/possible.", + " If enabled, `useView` returns only selected rows from `IDataSourceView.getVisibleRows`." ] }, "typeValue": { - "raw": "number" + "raw": "boolean" }, "editor": { - "type": "number" + "type": "bool" }, - "from": "@epam/uui-core:FilterConfigBase", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "dataSource", - "name": "dataSource", + "uid": "patch", + "name": "patch", "comment": { "raw": [ - "Datasource to get data for the picker" + "Items, which should be added/updated/deleted from the tree." ] }, "typeValue": { - "raw": "IDataSource" + "raw": "IMap | IImmutableMap" }, - "from": "@epam/uui-core:PickerBaseOptions", - "required": true + "from": "@epam/uui-core:PatchOptions", + "required": false }, { - "uid": "getName", - "name": "getName", + "uid": "isDeleted", + "name": "isDeleted", "comment": { "raw": [ - "A pure function that gets entity name from entity object.", - " Default: (item) => item.name." + "To enable deleting of the items, it is required to specify getter for deleted state." ] }, "typeValue": { - "raw": "(item: any) => string" + "raw": "(item: TItem) => boolean" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:PickerBaseOptions", + "from": "@epam/uui-core:PatchOptions", "required": false }, { - "uid": "renderRow", - "name": "renderRow", + "uid": "getNewItemPosition", + "name": "getNewItemPosition", "comment": { "raw": [ - "Allow to customize how each selectable row is rendered. Can be used to add subtitles, avatars, etc." + "Provides information about the relative position of the new item.", + " @param item - new item, position should be got for.", + " @returns relative position in the list of items.", + " @default PatchOrdering.TOP" ] }, "typeValue": { - "raw": "(props: DataRowProps, dataSourceState: DataSourceState, any>) => React.ReactNode" + "raw": "(item: TItem) => symbol" }, "editor": { - "type": "component" + "type": "func" }, - "from": "@epam/uui-core:PickerBaseOptions", + "from": "@epam/uui-core:PatchOptions", "required": false }, { - "uid": "type", - "name": "type", + "uid": "getItemTemporaryOrder", + "name": "getItemTemporaryOrder", "comment": { "raw": [ - "Type of the filter" + "Provides information about the temporary order of the new item.", + " @param item - new item, temporary order should be got for.", + " @returns temporary order", + "", + " @experimental The API of this feature can be changed in the future releases." ] }, "typeValue": { - "raw": "'singlePicker' | 'multiPicker'" + "raw": "(item: TItem) => string" }, "editor": { - "type": "oneOf", - "options": [ - "singlePicker", - "multiPicker" - ] + "type": "func" }, - "from": "@epam/uui-core:PickerFilterConfig", - "required": true + "from": "@epam/uui-core:PatchOptions", + "required": false }, { - "uid": "showSearch", - "name": "showSearch", + "uid": "fixItemBetweenSortings", + "name": "fixItemBetweenSortings", "comment": { "raw": [ - "Pass false to hide search in picker body.", - " If omitted, true value will be used." - ] + "If enabled, items position is fixed between sorting.", + " @default true" + ], + "tags": { + "@default": true + } }, "typeValue": { "raw": "boolean" @@ -26276,320 +29746,360 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:PickerFilterConfig", + "from": "@epam/uui-core:PatchOptions", "required": false }, { - "uid": "maxBodyHeight", - "name": "maxBodyHeight", + "uid": "sortBy", + "name": "sortBy", "comment": { "raw": [ - "Height of picker items list in px. This height doesn't include height of body toolbars(sorting, predicates)" + "A pure function that gets sorting value for current sorting value" ] }, "typeValue": { - "raw": "number" + "raw": "(item: TItem, sorting: SortingOption) => any" }, "editor": { - "type": "number" + "type": "func" }, - "from": "@epam/uui-core:PickerFilterConfig", + "from": "@epam/uui-core:SortConfig", "required": false }, { - "uid": "filter", - "name": "filter", + "uid": "isFetching", + "name": "isFetching", "comment": { "raw": [ - "Filter selectable days. Days, for which this callback returns false - will be disabled" + "Are tree records loading silently." ] }, "typeValue": { - "raw": "(day: Dayjs) => boolean" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "from": "@epam/uui-core:BaseDatePickerProps", + "from": "@epam/uui-core:ITreeLoadingState", "required": false }, { - "uid": "format", - "name": "format", + "uid": "isLoading", + "name": "isLoading", "comment": { "raw": [ - "Date format string, see [dayjs docs](@link https://day.js.org/docs/en/display/format)" + "Are tree records loading loadly (show loading placeholders, etc)." ] }, "typeValue": { - "raw": "string" + "raw": "boolean" }, "editor": { - "type": "string" + "type": "bool" }, - "from": "@epam/uui-core:BaseDatePickerProps", + "from": "@epam/uui-core:ITreeLoadingState", "required": false }, { - "uid": "type_2", - "name": "type", + "uid": "handleCascadeSelection", + "name": "handleCascadeSelection", "comment": { "raw": [ - "Type of the filter" + "Provides a cascade selection functionality.", + " @param isChecked - checking state of the item.", + " @param checkedId - ID of the item to be checked. If `undefined` - root is checked.", + " @param isRoot - marks if cascade selection should be performed on all the items.", + " @param checked - current state of checked items.", + " @returns new checked items." ] }, "typeValue": { - "raw": "'datePicker'" + "raw": "(isChecked: boolean, checkedId?: TId | undefined, isRoot?: boolean | undefined, checked?: TId[] | undefined) => Promise" }, "editor": { - "type": "oneOf", - "options": [ - "datePicker" - ] + "type": "func" }, - "from": "@epam/uui-core:DatePickerFilterConfig", - "required": true + "from": "@epam/uui-core:CascadeSelectionService", + "required": false }, { - "uid": "type_3", - "name": "type", + "uid": "getItemStatus", + "name": "getItemStatus", "comment": { "raw": [ - "Type of the filter" + "Provides a status of the given item.", + " @param id - id of an item, status to be provided for.", + " @returns status of the item." ] }, "typeValue": { - "raw": "'numeric'" + "raw": "(id: TId) => RecordStatus" }, "editor": { - "type": "oneOf", - "options": [ - "numeric" - ] + "type": "func" }, - "from": "@epam/uui-core:NumericFilterConfig", - "required": true - }, + "from": "@epam/uui-core:GetItemStatus", + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:UseFoldingServiceProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "UseFoldingServiceProps", + "nameFull": "UseFoldingServiceProps" + }, + "src": "uui-core/src/data/processing/views/dataRows/services/useFoldingService.ts", + "comment": { + "raw": [ + "Folding service configuration." + ] + }, + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "UseFoldingServiceProps", + "print": [ + "/**", + " * Folding service configuration.", + " */", + "type UseFoldingServiceProps = Pick, 'getId' | 'dataSourceState' | 'setDataSourceState' | 'isFoldedByDefault'>;" + ] + }, + "props": [ { - "uid": "type_4", - "name": "type", + "uid": "getId", + "name": "getId", "comment": { "raw": [ - "Type of the filter" + "Should return unique ID of the TItem", + " If omitted, we assume that every TItem has and unique id in its 'id' field.", + " @param item - record, which id should be returned.", + " @returns item id." ] }, "typeValue": { - "raw": "'rangeDatePicker'" + "raw": "(item: TItem) => TId" }, "editor": { - "type": "oneOf", - "options": [ - "rangeDatePicker" - ] + "type": "func" }, - "from": "@epam/uui-core:RangeDatePickerFilterConfig", - "required": true + "from": "@epam/uui-core:BaseDataSourceConfig", + "required": false }, { - "uid": "type_5", - "name": "type", + "uid": "dataSourceState", + "name": "dataSourceState", "comment": { "raw": [ - "Type of the filter" + "State of the dataSource." ] }, "typeValue": { - "raw": "'custom'" - }, - "editor": { - "type": "oneOf", - "options": [ - "custom" - ] + "raw": "DataSourceState" }, - "from": "@epam/uui-core:CustomFilterConfig", + "from": "@epam/uui-core:CommonTreeConfig", "required": true }, { - "uid": "render", - "name": "render", + "uid": "setDataSourceState", + "name": "setDataSourceState", "comment": { "raw": [ - "Render callback for filter body" + "DataSource state update handler." ] }, "typeValue": { - "raw": "(props: IFilterItemBodyProps) => React.ReactElement>" + "raw": "SetDataSourceState" }, "editor": { - "type": "component" + "type": "func" }, - "from": "@epam/uui-core:CustomFilterConfig", + "from": "@epam/uui-core:CommonTreeConfig", "required": true }, { - "uid": "getTogglerValue", - "name": "getTogglerValue", + "uid": "isFoldedByDefault", + "name": "isFoldedByDefault", "comment": { "raw": [ - "A pure function that gets value to display in filter toggler" + "Can be specified to unfold all or some items at start.", + " If not specified, all rows would be folded.", + " @param item - record, folding value should be returned for.", + " @param dataSourceState - dataSource state with current `foldAll` value. It provides the possibility to respect foldAll change, if `isFoldedByDefault` is implemented." ] }, "typeValue": { - "raw": "(props: IFilterItemBodyProps) => React.ReactNode" + "raw": "(item: TItem, state: DataSourceState) => boolean" }, "editor": { - "type": "component" + "type": "func" }, - "from": "@epam/uui-core:CustomFilterConfig", - "required": true + "from": "@epam/uui-core:BaseDataSourceConfig", + "required": false } ], - "propsFromUnion": true + "propsFromUnion": false } }, - "@epam/uui-core:TextInputCoreProps": { + "@epam/uui-core:UseFormProps": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "TextInputCoreProps", - "nameFull": "TextInputCoreProps" + "name": "UseFormProps", + "nameFull": "UseFormProps" }, - "src": "uui-core/src/types/components/TextInput.ts", + "src": "uui-core/src/data/forms/useForm.ts", "exported": true }, "details": { - "kind": 264, + "kind": 265, "typeValue": { - "raw": "TextInputCoreProps", + "raw": "UseFormProps", "print": [ - "interface TextInputCoreProps extends IHasCX, IClickable, IDisableable, IEditable, IHasPlaceholder, IHasIcon, ICanBeReadonly, IDropdownToggler, IAnalyticableOnChange, IHasRawProps>, ICanFocus, IHasTabIndex {", - " /** Enables cancel (cross) icon, and fires when the icon is clicked */", - " onCancel?(): void;", - " /** Enables accept (check) icon, and fires when the icon is clicked */", - " onAccept?(): void;", - " /** keydown event handler to put on the HTML input element */", - " onKeyDown?(e?: any): void;", - " /** Put focus on the element, when component is mounted */", - " autoFocus?: boolean;", - " /** Standard 'type' attribute to put on the HTML input element (e.g. 'password') */", - " type?: string;", - " /** Standard [autocomplete attribute]{@link https://www.w3schools.com/tags/att_input_autocomplete.asp} */", - " autoComplete?: string;", - " /** Standard [name attribute]{@link https://www.w3schools.com/tags/att_input_name.asp} */", - " name?: string;", - " /** Maximum input length in characters */", - " maxLength?: number;", - " /** Standard [inputMode attribute]{@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode} */", - " inputMode?: React.InputHTMLAttributes['inputMode'];", - " /** HTML ID attribute for input */", - " id?: string;", - "}" + "type UseFormProps = Omit, 'renderForm'>;" ] }, "props": [ { - "uid": "onCancel", - "name": "onCancel", + "uid": "value", + "name": "value", "comment": { "raw": [ - "Enables cancel (cross) icon, and fires when the icon is clicked" + "Current value of the form state" ] }, "typeValue": { - "raw": "() => void" + "raw": "T" + }, + "from": "@epam/uui-core:FormProps", + "required": true + }, + { + "uid": "getMetadata", + "name": "getMetadata", + "comment": { + "raw": [ + "Returns form metadata - information used to validate the form.", + " @param state Metadata can depend on state, and will be re-computed on updates" + ] + }, + "typeValue": { + "raw": "(state: T) => Metadata" }, "editor": { "type": "func" }, + "from": "@epam/uui-core:FormProps", "required": false }, { - "uid": "onAccept", - "name": "onAccept", + "uid": "onSave", + "name": "onSave", "comment": { "raw": [ - "Enables accept (check) icon, and fires when the icon is clicked" + "Occurs when 'save' function is called on Form.", + " Should save form data (usually with API call to server).", + " Server can also reject form, and provide validation errors in response.", + " @param state Form state to save" ] }, "typeValue": { - "raw": "() => void" + "raw": "(state: T) => Promise>" }, "editor": { "type": "func" }, - "required": false + "from": "@epam/uui-core:FormProps", + "required": true }, { - "uid": "onKeyDown", - "name": "onKeyDown", + "uid": "beforeLeave", + "name": "beforeLeave", "comment": { "raw": [ - "keydown event handler to put on the HTML input element" + "Called when form is unmounted, but user still have unsaved changes.", + " Accepts a Promise to be returned. If promise resolves to true - save procedure is performed.", + " The common use-case is to show a modal with \"Save Changes?\" dialog", + " Skins usually implement this as default behavior. To prevent it, you can pass null to this prop to override it." ] }, "typeValue": { - "raw": "(e?: any) => void" + "raw": "null | () => Promise" }, "editor": { "type": "func" }, + "from": "@epam/uui-core:FormProps", "required": false }, { - "uid": "autoFocus", - "name": "autoFocus", + "uid": "loadUnsavedChanges", + "name": "loadUnsavedChanges", "comment": { "raw": [ - "Put focus on the element, when component is mounted" + "Used to restore unsaved user edits from the last session (usually to localstorage, via uuiUserSettings context)", + " If unsaved changes are detected, this callback is called. If it is resolved - the form restores unsaved edits.", + " The common use-case is to show a modal with \"You have unsaved changes, restore them?\" dialog", + " Skins usually implement this as default behavior. To prevent it, you can pass null to this prop to override it." ] }, "typeValue": { - "raw": "boolean" + "raw": "() => Promise" }, "editor": { - "type": "bool" + "type": "func" }, + "from": "@epam/uui-core:FormProps", "required": false }, { - "uid": "type", - "name": "type", + "uid": "onSuccess", + "name": "onSuccess", "comment": { "raw": [ - "Standard 'type' attribute to put on the HTML input element (e.g. 'password')" + "Called after successful save.", + " @param state Saved state", + " @param isSavedBeforeLeave true, if save is triggered via leaving the page, and \"Save Changes?\" dialog" ] }, "typeValue": { - "raw": "string" + "raw": "(state: T, isSavedBeforeLeave?: boolean | undefined) => any" }, "editor": { - "type": "string" + "type": "func" }, + "from": "@epam/uui-core:FormProps", "required": false }, { - "uid": "autoComplete", - "name": "autoComplete", + "uid": "onError", + "name": "onError", "comment": { "raw": [ - "Standard [autocomplete attribute]{@link https://www.w3schools.com/tags/att_input_autocomplete.asp}" + "Called when save fails" ] }, "typeValue": { - "raw": "string" + "raw": "(error: any) => any" }, "editor": { - "type": "string" + "type": "func" }, + "from": "@epam/uui-core:FormProps", "required": false }, { - "uid": "name", - "name": "name", + "uid": "settingsKey", + "name": "settingsKey", "comment": { "raw": [ - "Standard [name attribute]{@link https://www.w3schools.com/tags/att_input_name.asp}" + "The key, under which form save unsaved state usually to localstorage, via uuiUserSettings context)" ] }, "typeValue": { @@ -26598,104 +30108,233 @@ "editor": { "type": "string" }, + "from": "@epam/uui-core:FormProps", "required": false }, { - "uid": "maxLength", - "name": "maxLength", + "uid": "validationOn", + "name": "validationOn", "comment": { "raw": [ - "Maximum input length in characters" + "Controls when form validation occurs:", + " save (default, recommended) - form is validated on save. If form is invalid - it will be revalidated on every change, until become valid", + " change - form is validated on every user change. Only fields changes in current edit session are validated" ] }, "typeValue": { - "raw": "number" + "raw": "'change' | 'save'" }, "editor": { - "type": "number" + "type": "oneOf", + "options": [ + "change", + "save" + ] + }, + "from": "@epam/uui-core:FormProps", + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:UseLazyFetchingAdvisorProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "UseLazyFetchingAdvisorProps", + "nameFull": "UseLazyFetchingAdvisorProps" + }, + "src": "uui-core/src/data/processing/views/tree/hooks/strategies/lazyTree/useLazyFetchingAdvisor.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "UseLazyFetchingAdvisorProps", + "print": [ + "interface UseLazyFetchingAdvisorProps {", + " dataSourceState: DataSourceState;", + " filter?: TFilter;", + " forceReload?: boolean;", + " backgroundReload?: boolean;", + " showSelectedOnly?: boolean;", + "}" + ] + }, + "props": [ + { + "uid": "dataSourceState", + "name": "dataSourceState", + "typeValue": { + "raw": "DataSourceState" + }, + "required": true + }, + { + "uid": "filter", + "name": "filter", + "typeValue": { + "raw": "TFilter" }, "required": false }, { - "uid": "inputMode", - "name": "inputMode", + "uid": "forceReload", + "name": "forceReload", + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "required": false + }, + { + "uid": "backgroundReload", + "name": "backgroundReload", + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "required": false + }, + { + "uid": "showSelectedOnly", + "name": "showSelectedOnly", + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:UseTableStateHookParams": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "UseTableStateHookParams", + "nameFull": "UseTableStateHookParams" + }, + "src": "uui-core/src/hooks/useTableState/useTableState.ts", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "UseTableStateHookParams", + "print": [ + "interface UseTableStateHookParams, TViewState = any> extends UseTableStateHookBaseParams, Partial>> {", + "}" + ] + }, + "props": [ + { + "uid": "columns", + "name": "columns", "comment": { "raw": [ - "Standard [inputMode attribute]{@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode}" + "Columns configuration, can be omitted if used without tables" ] }, "typeValue": { - "raw": "'search' | 'numeric' | 'none' | 'text' | 'tel' | 'url' | 'email' | 'decimal'" + "raw": "DataColumnProps[]" }, - "editor": { - "type": "oneOf", - "options": [ - "search", - "numeric", - "none", - "text", - "tel", - "url", - "email", - "decimal" + "from": "@epam/uui-core:UseTableStateHookBaseParams", + "required": false + }, + { + "uid": "filters", + "name": "filters", + "comment": { + "raw": [ + "Filters configuration, can be omitted if you don't need filters" + ] + }, + "typeValue": { + "raw": "TableFiltersConfig[]" + }, + "from": "@epam/uui-core:UseTableStateHookBaseParams", + "required": false + }, + { + "uid": "initialPresets", + "name": "initialPresets", + "comment": { + "raw": [ + "Initial presets array" ] }, + "typeValue": { + "raw": "ITablePreset[]" + }, + "from": "@epam/uui-core:UseTableStateHookBaseParams", "required": false }, { - "uid": "id", - "name": "id", + "uid": "onPresetCreate", + "name": "onPresetCreate", "comment": { "raw": [ - "HTML ID attribute for input" + "Called when preset was created. Should return the ID of new preset" ] }, "typeValue": { - "raw": "string" + "raw": "(preset: ITablePreset) => Promise" }, "editor": { - "type": "string" + "type": "func" }, + "from": "@epam/uui-core:UseTableStateHookBaseParams", "required": false }, { - "uid": "cx", - "name": "cx", + "uid": "onPresetUpdate", + "name": "onPresetUpdate", "comment": { "raw": [ - "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" + "Called when preset was updated" ] }, "typeValue": { - "raw": "null | string | number | boolean | ClassDictionary | ClassArray" + "raw": "(preset: ITablePreset) => Promise" }, - "typeValueRef": "@epam/uui-core:ClassValue", - "from": "@epam/uui-core:IHasCX", + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:UseTableStateHookBaseParams", "required": false }, { - "uid": "onClick", - "name": "onClick", + "uid": "onPresetDelete", + "name": "onPresetDelete", "comment": { "raw": [ - "Called when component is clicked" + "Called when preset was deleted" ] }, "typeValue": { - "raw": "(e?: any) => void" + "raw": "(preset: ITablePreset) => Promise" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:IClickable", + "from": "@epam/uui-core:UseTableStateHookBaseParams", "required": false }, { - "uid": "isDisabled", - "name": "isDisabled", + "uid": "isInvalid", + "name": "isInvalid", "comment": { "raw": [ - "Disable editing, and visually de-emphasize value of the component" + "True if component contains invalid input" ] }, "typeValue": { @@ -26704,15 +30343,15 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:IDisableable", + "from": "@epam/uui-core:ICanBeInvalid", "required": false }, { - "uid": "isInvalid", - "name": "isInvalid", + "uid": "isDisabled", + "name": "isDisabled", "comment": { "raw": [ - "True if component contains invalid input" + "Disable editing, and visually de-emphasize value of the component" ] }, "typeValue": { @@ -26721,7 +30360,7 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:ICanBeInvalid", + "from": "@epam/uui-core:IDisableable", "required": false }, { @@ -26767,13 +30406,10 @@ ] }, "typeValue": { - "raw": "string" - }, - "editor": { - "type": "string" + "raw": "DataTableState" }, "from": "@epam/uui-core:IControlled", - "required": true + "required": false }, { "uid": "onValueChange", @@ -26784,982 +30420,1157 @@ ] }, "typeValue": { - "raw": "(newValue: string | undefined) => void" + "raw": "(newValue: DataTableState) => void" }, "editor": { "type": "func" }, "from": "@epam/uui-core:IControlled", + "required": false + } + ], + "propsFromUnion": false + } + }, + "@epam/uui-core:UseTreeProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "UseTreeProps", + "nameFull": "UseTreeProps" + }, + "src": "uui-core/src/data/processing/views/tree/hooks/strategies/types/strategies.ts", + "comment": { + "raw": [ + "useTree hook configuration." + ] + }, + "exported": true + }, + "details": { + "kind": 265, + "typeValue": { + "raw": "SyncTreeProps | AsyncTreeProps | LazyTreeProps", + "print": [ + "/**", + " * useTree hook configuration.", + " */", + "type UseTreeProps = (SyncTreeProps | AsyncTreeProps | LazyTreeProps);" + ] + }, + "props": [ + { + "uid": "dataSourceState", + "name": "dataSourceState", + "comment": { + "raw": [ + "State of the dataSource." + ] + }, + "typeValue": { + "raw": "DataSourceState" + }, + "from": "@epam/uui-core:CommonTreeConfig", "required": true }, { - "uid": "placeholder", - "name": "placeholder", + "uid": "setDataSourceState", + "name": "setDataSourceState", "comment": { "raw": [ - "Placeholder to display when empty" + "DataSource state update handler." ] }, "typeValue": { - "raw": "any" + "raw": "SetDataSourceState" }, - "from": "@epam/uui-core:IHasPlaceholder", + "typeValueRef": "@epam/uui-core:SetDataSourceState", + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:CommonTreeConfig", + "required": true + }, + { + "uid": "getId", + "name": "getId", + "comment": { + "raw": [ + "Should return unique ID of the TItem", + " If omitted, we assume that every TItem has and unique id in its 'id' field.", + " @param item - record, which id should be returned.", + " @returns item id." + ] + }, + "typeValue": { + "raw": "(item: TItem) => TId" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "icon", - "name": "icon", + "uid": "complexIds", + "name": "complexIds", "comment": { "raw": [ - "Icon can be a React element (usually an SVG element)" + "Set to true, if you use IDs which can't act as javascript Map key (objects or arrays).", + " In this case, IDs will be internally JSON.stringify-ed to be used as Maps keys." ] }, "typeValue": { - "raw": "Icon" + "raw": "boolean" }, "editor": { - "type": "component" + "type": "bool" }, - "from": "@epam/uui-core:IHasIcon", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "iconPosition", - "name": "iconPosition", + "uid": "getParentId", + "name": "getParentId", "comment": { "raw": [ - "Position of the icon (left of right)" + "Should return ID of the Item's parent. Usually it's i => i.parentId.", + " If specified, Data Source will build items hierarchy.", + "", + " Also, it is used by LazyDataSource to pre-fetch missing parents of loaded items. This is required in following cases:", + " - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain", + " to highlight parents with selected children", + " - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),", + " We need to load parents with a separate call (if backend doesn't pre-fetch them)", + "", + " @param item - record, which paretnId should be returned.", + " @returns item parentId." ] }, "typeValue": { - "raw": "'left' | 'right'" + "raw": "(item: TItem) => TId | undefined" }, "editor": { - "type": "oneOf", - "options": [ - "left", - "right" + "type": "func" + }, + "from": "@epam/uui-core:BaseDataSourceConfig", + "required": false + }, + { + "uid": "rowOptions", + "name": "rowOptions", + "comment": { + "raw": [ + "Specifies if rows are selectable, checkable, draggable, clickable, and more.", + " See DataRowOptions for more details.", + " If options depends on the item itself, use getRowOptions.", + " Specifying both rowOptions and getRowOptions might help to render better loading skeletons: we use only rowOptions in this case, as we haven't loaded an item yet.", + " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", + " @param item An item to get options for" ] }, - "from": "@epam/uui-core:IHasIcon", + "typeValue": { + "raw": "DataRowOptions" + }, + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "onIconClick", - "name": "onIconClick", + "uid": "getRowOptions", + "name": "getRowOptions", "comment": { "raw": [ - "Click handler for the icon" + "For each row, specify if row is selectable, editable, checkable, draggable, clickable, have its own set of columns, and more.", + " To make rows editable, pass IEditable interface to each row. This works the same way as for other editable components.", + " See DataRowOptions for more details.", + " If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.", + " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", + " @param item - record, configuration should be returned for.", + " @param index - index of a row. It is optional and should not be expected, that it is provided on every call." ] }, "typeValue": { - "raw": "() => void" + "raw": "(item: TItem, index?: number | undefined) => DataRowOptions" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:IHasIcon", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "isOpen", - "name": "isOpen", + "uid": "isFoldedByDefault", + "name": "isFoldedByDefault", "comment": { "raw": [ - "When isDropdown=true, indicate that dropdown is open with chevron icon" + "Can be specified to unfold all or some items at start.", + " If not specified, all rows would be folded.", + " @param item - record, folding value should be returned for.", + " @param dataSourceState - dataSource state with current `foldAll` value. It provides the possibility to respect foldAll change, if `isFoldedByDefault` is implemented." ] }, "typeValue": { - "raw": "boolean" + "raw": "(item: TItem, state: DataSourceState) => boolean" }, "editor": { - "type": "bool" + "type": "func" }, - "from": "@epam/uui-core:IDropdownToggler", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "isDropdown", - "name": "isDropdown", + "uid": "cascadeSelection", + "name": "cascadeSelection", "comment": { "raw": [ - "Shows chevron icon, enabling component to act as dropdown toggler" + "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.", + " - false: All nodes are selected independently (default).", + " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.", + " - 'implicit': Selecting a parent node means that all children are considered checked.", + " The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked", + " parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,", + " its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last", + " unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked." + ] + }, + "typeValue": { + "raw": "boolean | 'implicit' | 'explicit'" + }, + "editor": { + "type": "oneOf", + "options": [ + false, + true, + "implicit", + "explicit" ] }, + "from": "@epam/uui-core:BaseDataSourceConfig", + "required": false + }, + { + "uid": "selectAll", + "name": "selectAll", + "comment": { + "raw": [ + "Enables/disables selectAll functionality. If disabled explicitly, `selectAll`, returned from a view is null.", + " @default true" + ], + "tags": { + "@default": true + } + }, "typeValue": { "raw": "boolean" }, "editor": { "type": "bool" }, - "from": "@epam/uui-core:IDropdownToggler", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "getValueChangeAnalyticsEvent", - "name": "getValueChangeAnalyticsEvent", + "uid": "showSelectedOnly", + "name": "showSelectedOnly", "comment": { "raw": [ - "Given a value, returns an analytics event to send when component is edited.", - " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)." + "Enables returning only selected rows and loading missing selected/checked rows, if it is required/possible.", + " If enabled, `useView` returns only selected rows from `IDataSourceView.getVisibleRows`." ] }, "typeValue": { - "raw": "(newValue: string | null, oldValue: string | null) => AnalyticsEvent" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "from": "@epam/uui-core:IAnalyticableOnChange", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "rawProps", - "name": "rawProps", + "uid": "patch", + "name": "patch", "comment": { "raw": [ - "Any HTML attributes (native or 'data-') to put on the underlying component" + "Items, which should be added/updated/deleted from the tree." ] }, "typeValue": { - "raw": "React.HTMLAttributes & Record<`data-${string}`, string>" + "raw": "IMap | IImmutableMap" }, - "from": "@epam/uui-core:IHasRawProps", + "from": "@epam/uui-core:PatchOptions", "required": false }, { - "uid": "onFocus", - "name": "onFocus", + "uid": "isDeleted", + "name": "isDeleted", "comment": { "raw": [ - "Called when component gets input focus" + "To enable deleting of the items, it is required to specify getter for deleted state." ] }, "typeValue": { - "raw": "(e: React.FocusEvent) => void" + "raw": "(item: TItem) => boolean" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:ICanFocus", + "from": "@epam/uui-core:PatchOptions", "required": false }, { - "uid": "onBlur", - "name": "onBlur", + "uid": "getNewItemPosition", + "name": "getNewItemPosition", "comment": { "raw": [ - "Called when component looses input focus" + "Provides information about the relative position of the new item.", + " @param item - new item, position should be got for.", + " @returns relative position in the list of items.", + " @default PatchOrdering.TOP" ] }, "typeValue": { - "raw": "(e: React.FocusEvent) => void" + "raw": "(item: TItem) => symbol" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:ICanFocus", + "from": "@epam/uui-core:PatchOptions", "required": false }, { - "uid": "tabIndex", - "name": "tabIndex", + "uid": "getItemTemporaryOrder", + "name": "getItemTemporaryOrder", "comment": { "raw": [ - "Controls the order of keyboard navigation between components" + "Provides information about the temporary order of the new item.", + " @param item - new item, temporary order should be got for.", + " @returns temporary order", + "", + " @experimental The API of this feature can be changed in the future releases." ] }, "typeValue": { - "raw": "number" + "raw": "(item: TItem) => string" }, "editor": { - "type": "number" + "type": "func" }, - "from": "@epam/uui-core:IHasTabIndex", + "from": "@epam/uui-core:PatchOptions", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:TooltipCoreProps": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "TooltipCoreProps", - "nameFull": "TooltipCoreProps" - }, - "src": "uui-core/src/types/components/Tooltip.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "TooltipCoreProps", - "print": [ - "interface TooltipCoreProps extends IHasCX, IHasChildren, IHasRawProps>, Partial>, Pick {", - " /** Content to show in the tooltip (ReactNode) */", - " content?: any;", - " /** Alternative to 'content' prop, you can pass a render function.", - " * The function will only be called when content is shown, this can save performance. */", - " renderContent?(): any;", - " /** See [Popper docs]{@link https://popper.js.org/docs/v2/modifiers/offset/} */", - " offset?: Options['offset'];", - " /** React Node(s) to show tooltip for */", - " children?: React.ReactNode;", - " /** Max width of tooltip */", - " maxWidth?: number;", - "}" - ] - }, - "props": [ + }, { - "uid": "content", - "name": "content", + "uid": "fixItemBetweenSortings", + "name": "fixItemBetweenSortings", "comment": { "raw": [ - "Content to show in the tooltip (ReactNode)" - ] + "If enabled, items position is fixed between sorting.", + " @default true" + ], + "tags": { + "@default": true + } }, "typeValue": { - "raw": "any" + "raw": "boolean" + }, + "editor": { + "type": "bool" }, + "from": "@epam/uui-core:PatchOptions", "required": false }, { - "uid": "renderContent", - "name": "renderContent", + "uid": "sortBy", + "name": "sortBy", "comment": { "raw": [ - "Alternative to 'content' prop, you can pass a render function.", - " The function will only be called when content is shown, this can save performance." + "A pure function that gets sorting value for current sorting value" ] }, "typeValue": { - "raw": "() => any" + "raw": "(item: TItem, sorting: SortingOption) => any" }, "editor": { "type": "func" }, + "from": "@epam/uui-core:SortConfig", "required": false }, { - "uid": "offset", - "name": "offset", + "uid": "getSearchFields", + "name": "getSearchFields", "comment": { "raw": [ - "See [Popper docs]{@link https://popper.js.org/docs/v2/modifiers/offset/}" + "A pure function that gets search value for each item.", + " @default (item) => item.name." ] }, "typeValue": { - "raw": "OffsetsFunction | [number | null | undefined, number | null | undefined]" + "raw": "(item: TItem) => string[]" + }, + "editor": { + "type": "func" }, + "from": "@epam/uui-core:SearchConfig", "required": false }, { - "uid": "children", - "name": "children", + "uid": "sortSearchByRelevance", + "name": "sortSearchByRelevance", "comment": { "raw": [ - "React Node(s) to show tooltip for" - ] + "Enables sorting of search results by relevance.", + " - The highest priority has records, which have a full match with a search keyword.", + " - The lower one has records, which have a search keyword at the 0 position, but not the full match.", + " - Then, records, which contain a search keyword as a separate word, but not at the beginning.", + " - And the lowest one - any other match of the search keyword.", + "", + " Example:", + " - `search`: 'some'", + " - `record string`: 'some word', `rank` = 4", + " - `record string`: 'someone', `rank` = 3", + " - `record string`: 'I know some guy', `rank` = 2", + " - `record string`: 'awesome', `rank` = 1", + "", + " @default true" + ], + "tags": { + "@default": true + } }, "typeValue": { - "raw": "React.ReactNode" + "raw": "boolean" }, - "typeValueRef": "@types/react:ReactNode", + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:SearchConfig", "required": false }, { - "uid": "maxWidth", - "name": "maxWidth", + "uid": "getFilter", + "name": "getFilter", "comment": { "raw": [ - "Max width of tooltip" + "A pure function that returns filter callback to be applied for each item.", + " The callback should return true, if item passed the filter." ] }, "typeValue": { - "raw": "number" + "raw": "(filter: TFilter) => (item: TItem) => boolean" }, "editor": { - "type": "number" + "type": "func" }, + "from": "@epam/uui-core:FilterConfig", "required": false }, { - "uid": "cx", - "name": "cx", + "uid": "setItems", + "name": "setItems", "comment": { "raw": [ - "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" + "Items updating listener, which fires on items loading/reloading/reset." ] }, "typeValue": { - "raw": "null | string | number | boolean | ClassDictionary | ClassArray" + "raw": "(items: TItem[], options?: ModificationOptions | undefined) => ItemsMap" }, - "typeValueRef": "@epam/uui-core:ClassValue", - "from": "@epam/uui-core:IHasCX", + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:SharedItemsState", "required": false }, { - "uid": "rawProps", - "name": "rawProps", + "uid": "items", + "name": "items", "comment": { "raw": [ - "Any HTML attributes (native or 'data-') to put on the underlying component" + "Data, which should be represented by a DataSource." ] }, "typeValue": { - "raw": "React.HTMLAttributes & Record<`data-${string}`, string>" + "raw": "TItem[]" }, - "from": "@epam/uui-core:IHasRawProps", + "from": "@epam/uui-core:ArrayDataSourceConfig", "required": false }, { - "uid": "value", - "name": "value", + "uid": "type", + "name": "type", "comment": { "raw": [ - "The current value of component" + "Type of the tree to be supported." ] }, "typeValue": { - "raw": "boolean" + "raw": "'sync'" }, "editor": { - "type": "bool" + "type": "oneOf", + "options": [ + "sync" + ] }, - "from": "@epam/uui-core:IControlled", - "required": false + "from": "@epam/uui-core:SyncTreeProps", + "required": true }, { - "uid": "onValueChange", - "name": "onValueChange", + "uid": "type_2", + "name": "type", "comment": { "raw": [ - "Called when value needs to be changed (usually due to user interaction)" + "Type of the tree to be supported." ] }, "typeValue": { - "raw": "(newValue: boolean) => void" + "raw": "'async'" }, "editor": { - "type": "func" + "type": "oneOf", + "options": [ + "async" + ] }, - "from": "@epam/uui-core:IControlled", - "required": false + "from": "@epam/uui-core:AsyncTreeProps", + "required": true }, { - "uid": "onClose", - "name": "onClose", + "uid": "isLoaded", + "name": "isLoaded", "comment": { "raw": [ - "Called when dropdown was closed" + "Disables loading of records, if isLoaded = true.", + " If isLoaded = true, items are taken from itemsMap.", + " @internal" ] }, "typeValue": { - "raw": "() => void" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "from": "@epam/uui-core:DropdownProps", + "from": "@epam/uui-core:AsyncTreeProps", "required": false }, { - "uid": "placement", - "name": "placement", + "uid": "itemsMap", + "name": "itemsMap", "comment": { "raw": [ - "Defines dropdown body placement relative to target" + "Map of shared items." ] }, "typeValue": { - "raw": "'left' | 'right' | 'auto' | 'auto-start' | 'auto-end' | 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end'" + "raw": "ItemsMap" }, - "editor": { - "type": "oneOf", - "options": [ - "left", - "right", - "auto", - "auto-start", - "auto-end", - "top", - "bottom", - "top-start", - "top-end", - "bottom-start", - "bottom-end", - "right-start", - "right-end", - "left-start", - "left-end" + "from": "@epam/uui-core:SharedItemsState", + "required": false + }, + { + "uid": "itemsStatusMap", + "name": "itemsStatusMap", + "comment": { + "raw": [ + "Map of items statuses." ] }, - "from": "@epam/uui-core:DropdownProps", + "typeValue": { + "raw": "IMap" + }, + "from": "@epam/uui-core:ItemsStatuses", "required": false }, { - "uid": "modifiers", - "name": "modifiers", + "uid": "api", + "name": "api", "comment": { "raw": [ - "Original popper.js modifiers. See [Popper docs]{@link https://popper.js.org/docs/v2/modifiers/}" + "A function to retrieve the data, asynchronously. This function usually performs a REST API call.", + " Should return the array of items, which will be processed by dataSource.", + " This api called only once during the initialization and assumed to return the full amount of data.", + " For lazy loading cases, use LazyDataSource" ] }, "typeValue": { - "raw": "(StrictModifier | Partial>)[]" + "raw": "() => Promise" }, - "from": "@epam/uui-core:DropdownProps", - "required": false + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:AsyncDataSourceConfig", + "required": true }, { - "uid": "openDelay", - "name": "openDelay", + "uid": "api_2", + "name": "api", "comment": { "raw": [ - "Defines how much 'ms' user should hold mouse over target to open the dropdown", - " This prop work only with openOnHover={true}", - " @default 0" - ], - "tags": { - "@default": 0 - } + "A function to retrieve the data, asynchronously.", + " This function usually performs a REST API call.", + " API is used to retrieve lists of items.", + " It is expected to:", + " - be able to handle paging (via from/count params)", + " - be able to retrieve specific items by the list of their ids", + " - be able to retrieve children by parents (when getChildCount is specified, and ctx.parentId is passed)" + ] + }, + "typeValue": { + "raw": "LazyDataSourceApi" + }, + "typeValueRef": "@epam/uui-core:LazyDataSourceApi", + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:LazyDataSourceConfig", + "required": true + }, + { + "uid": "getChildCount", + "name": "getChildCount", + "comment": { + "raw": [ + "Should return number of children of the item.", + " If it returns > 0, the item is assumed to have children and to be foldable.", + " Usually, this value should be returned from API, as a field of a parent, e.g. { id: 1, name: 'London', childCount: 12 }.", + " In this case, you can implement getChildCount as (i) => i.childCount.", + "", + " If you can't get number of children via API, you can return a guess value (avg number of children for this type of entity).", + " Note, that this can lead to more API calls, and increased load times in the 'parallel' fetch mode." + ] }, "typeValue": { - "raw": "number" + "raw": "(item: TItem) => number" }, "editor": { - "type": "number" + "type": "func" }, - "from": "@epam/uui-core:DropdownProps", + "from": "@epam/uui-core:LazyDataSourceConfig", "required": false }, { - "uid": "closeDelay", - "name": "closeDelay", + "uid": "filter", + "name": "filter", "comment": { "raw": [ - "Defines after which delay dropdown will be closed, if user leave mouse from target.", - " This prop work only with openOnHover={true}", - " @default 0" - ], - "tags": { - "@default": 0 - } + "A filter to pass to API.", + " Note, that the DataSourceState also has a filter fields. These two filters are merged before API calls.", + " Use this prop if you need to apply some filter in any case.", + " Prefer to use filter in the DataSourceState for end-user editable filters." + ] }, "typeValue": { - "raw": "number" - }, - "editor": { - "type": "number" + "raw": "TFilter" }, - "from": "@epam/uui-core:DropdownProps", + "from": "@epam/uui-core:LazyDataSourceConfig", "required": false }, { - "uid": "closeOnMouseLeave", - "name": "closeOnMouseLeave", + "uid": "fetchStrategy", + "name": "fetchStrategy", "comment": { "raw": [ - "Defined when to close dropdown in case of openOnHover={ true }", - " toggler — dropdown will be closed when a mouse leaves the target component", - " boundary — will not to close the dropdown when a mouse is on target or in 30px around target area", - " false — will not close dropdown by mouse move event", - " @default 'toggler'" - ], - "tags": { - "@default": "toggler" - } + "Defines how to fetch children:", + " sequential (default) - fetch children for each parent one-by-one. Makes minimal over-querying, at cost of some speed.", + " parallel - fetch children for several parents simultaneously. Can make a lot of over-querying for deep trees.", + " Recommended for 2 level trees (grouping), as it makes no over-querying in this case, and is faster than sequential strategy." + ] }, "typeValue": { - "raw": "false | 'toggler' | 'boundary'" + "raw": "'sequential' | 'parallel'" }, "editor": { "type": "oneOf", "options": [ - false, - "toggler", - "boundary" + "sequential", + "parallel" ] }, - "from": "@epam/uui-core:DropdownProps", + "from": "@epam/uui-core:LazyDataSourceConfig", "required": false }, { - "uid": "portalTarget", - "name": "portalTarget", + "uid": "backgroundReload", + "name": "backgroundReload", "comment": { "raw": [ - "Node of portal target, where to render the dropdown body.", - " By default, will be used global portal node." + "Enables background reloading of data on search/sort/filter/reload, which turns off the rows placeholders displaying while data loading.", + " During data reloading, previous data is displayed. To prevent any interaction with visible not actual rows, a blocker/spinner should be displayed.", + " In UUI components, such as `PickerInput`, `PickerList`, `PickerModal` and `DataTable`, blockers are added.", + " It is required to add blockers/spinners to the components, built on your own.", + " If reloading is started, `view.getListProps` returns `isReloading` flag, set to `true`." ] }, "typeValue": { - "raw": "HTMLElement" + "raw": "boolean" }, - "from": "@epam/uui-core:DropdownProps", + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:LazyDataSourceConfig", "required": false }, { - "uid": "boundaryElement", - "name": "boundaryElement", + "uid": "flattenSearchResults", + "name": "flattenSearchResults", "comment": { "raw": [ - "Element relative to which dropdown will calculate position" + "Falls back to plain list from tree, if there's search.", + " Default is true.", + "", + " If enabled, and search is active:", + " - API will be called with parentId and parent undefined", + " - getChildCount is ignored, all nodes are assumed to have no children", + "", + " See more here: https://github.com/epam/UUI/issues/8" ] }, "typeValue": { - "raw": "HTMLElement | HTMLElement[] | 'clippingParents'" + "raw": "boolean" }, - "from": "@epam/uui-core:DropdownProps", + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:LazyDataSourceConfig", "required": false }, { - "uid": "closeBodyOnTogglerHidden", - "name": "closeBodyOnTogglerHidden", + "uid": "type_3", + "name": "type", "comment": { "raw": [ - "Pass false, if you do not want to close the dropdown in case Toggler move out of viewport.", - " @default true" - ], - "tags": { - "@default": true - } + "Type of the tree to be supported." + ] }, "typeValue": { - "raw": "boolean" + "raw": "'lazy'" }, "editor": { - "type": "bool" + "type": "oneOf", + "options": [ + "lazy" + ] }, - "from": "@epam/uui-core:DropdownProps", - "required": false + "from": "@epam/uui-core:LazyTreeProps", + "required": true } ], - "propsFromUnion": false + "propsFromUnion": true } }, - "@epam/uui-core:ITreeNodeInfo": { + "@epam/uui-core:UseTreeResult": { "summary": { "module": "@epam/uui-core", "typeName": { - "name": "ITreeNodeInfo", - "nameFull": "ITreeNodeInfo" + "name": "UseTreeResult", + "nameFull": "UseTreeResult" + }, + "src": "uui-core/src/data/processing/views/tree/hooks/types.ts", + "comment": { + "raw": [ + "Result of the useTree hook." + ] }, - "src": "uui-core/src/data/processing/views/tree/ITree.ts", "exported": true }, "details": { "kind": 264, "typeValue": { - "raw": "ITreeNodeInfo", + "raw": "UseTreeResult", "print": [ - "interface ITreeNodeInfo {", - " count?: number;", + "/**", + " * Result of the useTree hook.", + " */", + "interface UseTreeResult extends CommonTreeConfig, ITreeLoadingState, ITreeActions, LoadMissingRecords, GetItemStatus {", + " /**", + " * Tree-like data, rows to be build from.", + " */", + " tree: ITree;", + " /**", + " * Tree-like data, selected rows to be build from and cascade selection should be performed on.", + " */", + " selectionTree: ITree;", + " /**", + " * Version of the tree before applying patch to it.", + " */", + " treeWithoutPatch: ITree;", + " /**", + " * Total count of the rows.", + " */", " totalCount?: number;", "}" ] }, "props": [ { - "uid": "count", - "name": "count", - "typeValue": { - "raw": "number" + "uid": "tree", + "name": "tree", + "comment": { + "raw": [ + "Tree-like data, rows to be build from." + ] }, - "editor": { - "type": "number" + "typeValue": { + "raw": "ITree" }, - "required": false + "required": true }, { - "uid": "totalCount", - "name": "totalCount", - "typeValue": { - "raw": "number" - }, - "editor": { - "type": "number" + "uid": "selectionTree", + "name": "selectionTree", + "comment": { + "raw": [ + "Tree-like data, selected rows to be build from and cascade selection should be performed on." + ] }, - "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:ITreeParams": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "ITreeParams", - "nameFull": "ITreeParams" - }, - "src": "uui-core/src/data/processing/views/tree/ITree.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "ITreeParams", - "print": [ - "interface ITreeParams {", - " getId?(item: TItem): TId;", - " getParentId?(item: TItem): TId | undefined;", - " complexIds?: boolean;", - "}" - ] - }, - "props": [ - { - "uid": "getId", - "name": "getId", "typeValue": { - "raw": "(item: TItem) => TId" + "raw": "ITree" }, - "editor": { - "type": "func" - }, - "required": false + "required": true }, { - "uid": "getParentId", - "name": "getParentId", - "typeValue": { - "raw": "(item: TItem) => TId | undefined" + "uid": "treeWithoutPatch", + "name": "treeWithoutPatch", + "comment": { + "raw": [ + "Version of the tree before applying patch to it." + ] }, - "editor": { - "type": "func" + "typeValue": { + "raw": "ITree" }, - "required": false + "required": true }, { - "uid": "complexIds", - "name": "complexIds", + "uid": "totalCount", + "name": "totalCount", + "comment": { + "raw": [ + "Total count of the rows." + ] + }, "typeValue": { - "raw": "boolean" + "raw": "number" }, "editor": { - "type": "bool" + "type": "number" }, "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:UseFormProps": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "UseFormProps", - "nameFull": "UseFormProps" - }, - "src": "uui-core/src/data/forms/useForm.ts", - "exported": true - }, - "details": { - "kind": 265, - "typeValue": { - "raw": "UseFormProps", - "print": [ - "type UseFormProps = Omit, 'renderForm'>;" - ] - }, - "props": [ + }, { - "uid": "value", - "name": "value", + "uid": "dataSourceState", + "name": "dataSourceState", "comment": { "raw": [ - "Current value of the form state" + "State of the dataSource." ] }, "typeValue": { - "raw": "T" + "raw": "DataSourceState" }, - "from": "@epam/uui-core:FormProps", + "from": "@epam/uui-core:CommonTreeConfig", "required": true }, { - "uid": "getMetadata", - "name": "getMetadata", + "uid": "setDataSourceState", + "name": "setDataSourceState", "comment": { "raw": [ - "Returns form metadata - information used to validate the form.", - " @param state Metadata can depend on state, and will be re-computed on updates" + "DataSource state update handler." ] }, "typeValue": { - "raw": "(state: T) => Metadata" + "raw": "SetDataSourceState" }, + "typeValueRef": "@epam/uui-core:SetDataSourceState", "editor": { "type": "func" }, - "from": "@epam/uui-core:FormProps", - "required": false + "from": "@epam/uui-core:CommonTreeConfig", + "required": true }, { - "uid": "onSave", - "name": "onSave", + "uid": "getId", + "name": "getId", "comment": { "raw": [ - "Occurs when 'save' function is called on Form.", - " Should save form data (usually with API call to server).", - " Server can also reject form, and provide validation errors in response.", - " @param state Form state to save" + "Should return unique ID of the TItem", + " If omitted, we assume that every TItem has and unique id in its 'id' field.", + " @param item - record, which id should be returned.", + " @returns item id." ] }, "typeValue": { - "raw": "(state: T) => Promise>" + "raw": "(item: TItem) => TId" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:FormProps", - "required": true + "from": "@epam/uui-core:BaseDataSourceConfig", + "required": false }, { - "uid": "beforeLeave", - "name": "beforeLeave", + "uid": "complexIds", + "name": "complexIds", "comment": { "raw": [ - "Called when form is unmounted, but user still have unsaved changes.", - " Accepts a Promise to be returned. If promise resolves to true - save procedure is performed.", - " The common use-case is to show a modal with \"Save Changes?\" dialog", - " Skins usually implement this as default behavior. To prevent it, you can pass null to this prop to override it." + "Set to true, if you use IDs which can't act as javascript Map key (objects or arrays).", + " In this case, IDs will be internally JSON.stringify-ed to be used as Maps keys." ] }, "typeValue": { - "raw": "null | () => Promise" + "raw": "boolean" }, "editor": { - "type": "func" + "type": "bool" }, - "from": "@epam/uui-core:FormProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "loadUnsavedChanges", - "name": "loadUnsavedChanges", + "uid": "getParentId", + "name": "getParentId", "comment": { "raw": [ - "Used to restore unsaved user edits from the last session (usually to localstorage, via uuiUserSettings context)", - " If unsaved changes are detected, this callback is called. If it is resolved - the form restores unsaved edits.", - " The common use-case is to show a modal with \"You have unsaved changes, restore them?\" dialog", - " Skins usually implement this as default behavior. To prevent it, you can pass null to this prop to override it." + "Should return ID of the Item's parent. Usually it's i => i.parentId.", + " If specified, Data Source will build items hierarchy.", + "", + " Also, it is used by LazyDataSource to pre-fetch missing parents of loaded items. This is required in following cases:", + " - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain", + " to highlight parents with selected children", + " - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),", + " We need to load parents with a separate call (if backend doesn't pre-fetch them)", + "", + " @param item - record, which paretnId should be returned.", + " @returns item parentId." ] }, "typeValue": { - "raw": "() => Promise" + "raw": "(item: TItem) => TId | undefined" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:FormProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "onSuccess", - "name": "onSuccess", + "uid": "rowOptions", + "name": "rowOptions", "comment": { "raw": [ - "Called after successful save.", - " @param state Saved state", - " @param isSavedBeforeLeave true, if save is triggered via leaving the page, and \"Save Changes?\" dialog" + "Specifies if rows are selectable, checkable, draggable, clickable, and more.", + " See DataRowOptions for more details.", + " If options depends on the item itself, use getRowOptions.", + " Specifying both rowOptions and getRowOptions might help to render better loading skeletons: we use only rowOptions in this case, as we haven't loaded an item yet.", + " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", + " @param item An item to get options for" ] }, "typeValue": { - "raw": "(state: T, isSavedBeforeLeave?: boolean | undefined) => any" - }, - "editor": { - "type": "func" + "raw": "DataRowOptions" }, - "from": "@epam/uui-core:FormProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "onError", - "name": "onError", + "uid": "getRowOptions", + "name": "getRowOptions", "comment": { "raw": [ - "Called when save fails" + "For each row, specify if row is selectable, editable, checkable, draggable, clickable, have its own set of columns, and more.", + " To make rows editable, pass IEditable interface to each row. This works the same way as for other editable components.", + " See DataRowOptions for more details.", + " If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.", + " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance", + " @param item - record, configuration should be returned for.", + " @param index - index of a row. It is optional and should not be expected, that it is provided on every call." ] }, "typeValue": { - "raw": "(error: any) => any" + "raw": "(item: TItem, index?: number | undefined) => DataRowOptions" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:FormProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "settingsKey", - "name": "settingsKey", + "uid": "isFoldedByDefault", + "name": "isFoldedByDefault", "comment": { "raw": [ - "The key, under which form save unsaved state usually to localstorage, via uuiUserSettings context)" + "Can be specified to unfold all or some items at start.", + " If not specified, all rows would be folded.", + " @param item - record, folding value should be returned for.", + " @param dataSourceState - dataSource state with current `foldAll` value. It provides the possibility to respect foldAll change, if `isFoldedByDefault` is implemented." ] }, "typeValue": { - "raw": "string" + "raw": "(item: TItem, state: DataSourceState) => boolean" }, "editor": { - "type": "string" + "type": "func" }, - "from": "@epam/uui-core:FormProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "validationOn", - "name": "validationOn", + "uid": "cascadeSelection", + "name": "cascadeSelection", "comment": { "raw": [ - "Controls when form validation occurs:", - " save (default, recommended) - form is validated on save. If form is invalid - it will be revalidated on every change, until become valid", - " change - form is validated on every user change. Only fields changes in current edit session are validated" + "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.", + " - false: All nodes are selected independently (default).", + " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.", + " - 'implicit': Selecting a parent node means that all children are considered checked.", + " The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked", + " parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,", + " its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last", + " unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked." ] }, "typeValue": { - "raw": "'change' | 'save'" + "raw": "boolean | 'implicit' | 'explicit'" }, "editor": { "type": "oneOf", "options": [ - "change", - "save" + false, + true, + "implicit", + "explicit" ] }, - "from": "@epam/uui-core:FormProps", + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false - } - ], - "propsFromUnion": false - } - }, - "@epam/uui-core:UseTableStateHookParams": { - "summary": { - "module": "@epam/uui-core", - "typeName": { - "name": "UseTableStateHookParams", - "nameFull": "UseTableStateHookParams" - }, - "src": "uui-core/src/hooks/useTableState/useTableState.ts", - "exported": true - }, - "details": { - "kind": 264, - "typeValue": { - "raw": "UseTableStateHookParams", - "print": [ - "interface UseTableStateHookParams, TViewState = any> extends UseTableStateHookBaseParams, Partial>> {", - "}" - ] - }, - "props": [ + }, { - "uid": "columns", - "name": "columns", + "uid": "selectAll", + "name": "selectAll", "comment": { "raw": [ - "Columns configuration, can be omitted if used without tables" - ] + "Enables/disables selectAll functionality. If disabled explicitly, `selectAll`, returned from a view is null.", + " @default true" + ], + "tags": { + "@default": true + } }, "typeValue": { - "raw": "DataColumnProps[]" + "raw": "boolean" }, - "from": "@epam/uui-core:UseTableStateHookBaseParams", + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "filters", - "name": "filters", + "uid": "showSelectedOnly", + "name": "showSelectedOnly", "comment": { "raw": [ - "Filters configuration, can be omitted if you don't need filters" + "Enables returning only selected rows and loading missing selected/checked rows, if it is required/possible.", + " If enabled, `useView` returns only selected rows from `IDataSourceView.getVisibleRows`." ] }, "typeValue": { - "raw": "TableFiltersConfig[]" + "raw": "boolean" }, - "from": "@epam/uui-core:UseTableStateHookBaseParams", + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:BaseDataSourceConfig", "required": false }, { - "uid": "initialPresets", - "name": "initialPresets", + "uid": "patch", + "name": "patch", "comment": { "raw": [ - "Initial presets array" + "Items, which should be added/updated/deleted from the tree." ] }, "typeValue": { - "raw": "ITablePreset[]" + "raw": "IMap | IImmutableMap" }, - "from": "@epam/uui-core:UseTableStateHookBaseParams", + "from": "@epam/uui-core:PatchOptions", "required": false }, { - "uid": "onPresetCreate", - "name": "onPresetCreate", + "uid": "isDeleted", + "name": "isDeleted", "comment": { "raw": [ - "Called when preset was created. Should return the ID of new preset" + "To enable deleting of the items, it is required to specify getter for deleted state." ] }, "typeValue": { - "raw": "(preset: ITablePreset) => Promise" + "raw": "(item: TItem) => boolean" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:UseTableStateHookBaseParams", + "from": "@epam/uui-core:PatchOptions", "required": false }, { - "uid": "onPresetUpdate", - "name": "onPresetUpdate", + "uid": "getNewItemPosition", + "name": "getNewItemPosition", "comment": { "raw": [ - "Called when preset was updated" + "Provides information about the relative position of the new item.", + " @param item - new item, position should be got for.", + " @returns relative position in the list of items.", + " @default PatchOrdering.TOP" ] }, "typeValue": { - "raw": "(preset: ITablePreset) => Promise" + "raw": "(item: TItem) => symbol" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:UseTableStateHookBaseParams", + "from": "@epam/uui-core:PatchOptions", "required": false }, { - "uid": "onPresetDelete", - "name": "onPresetDelete", + "uid": "getItemTemporaryOrder", + "name": "getItemTemporaryOrder", "comment": { "raw": [ - "Called when preset was deleted" + "Provides information about the temporary order of the new item.", + " @param item - new item, temporary order should be got for.", + " @returns temporary order", + "", + " @experimental The API of this feature can be changed in the future releases." ] }, "typeValue": { - "raw": "(preset: ITablePreset) => Promise" + "raw": "(item: TItem) => string" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:UseTableStateHookBaseParams", + "from": "@epam/uui-core:PatchOptions", "required": false }, { - "uid": "isInvalid", - "name": "isInvalid", + "uid": "fixItemBetweenSortings", + "name": "fixItemBetweenSortings", "comment": { "raw": [ - "True if component contains invalid input" - ] + "If enabled, items position is fixed between sorting.", + " @default true" + ], + "tags": { + "@default": true + } }, "typeValue": { "raw": "boolean" @@ -27767,32 +31578,32 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:ICanBeInvalid", + "from": "@epam/uui-core:PatchOptions", "required": false }, { - "uid": "isDisabled", - "name": "isDisabled", + "uid": "sortBy", + "name": "sortBy", "comment": { "raw": [ - "Disable editing, and visually de-emphasize value of the component" + "A pure function that gets sorting value for current sorting value" ] }, "typeValue": { - "raw": "boolean" + "raw": "(item: TItem, sorting: SortingOption) => any" }, "editor": { - "type": "bool" + "type": "func" }, - "from": "@epam/uui-core:IDisableable", + "from": "@epam/uui-core:SortConfig", "required": false }, { - "uid": "isReadonly", - "name": "isReadonly", + "uid": "isFetching", + "name": "isFetching", "comment": { "raw": [ - "Disable editing. Unlike isDisabled, keep component's value readable." + "Are tree records loading silently." ] }, "typeValue": { @@ -27801,15 +31612,15 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:ICanBeReadonly", + "from": "@epam/uui-core:ITreeLoadingState", "required": false }, { - "uid": "isRequired", - "name": "isRequired", + "uid": "isLoading", + "name": "isLoading", "comment": { "raw": [ - "Marks that component's value is required and shouldn't be empty" + "Are tree records loading loadly (show loading placeholders, etc)." ] }, "typeValue": { @@ -27818,38 +31629,64 @@ "editor": { "type": "bool" }, - "from": "@epam/uui-core:ICanBeRequired", + "from": "@epam/uui-core:ITreeLoadingState", "required": false }, { - "uid": "value", - "name": "value", + "uid": "reload", + "name": "reload", "comment": { "raw": [ - "The current value of component" + "Tree reloading handler." ] }, "typeValue": { - "raw": "DataTableState" + "raw": "() => void" }, - "from": "@epam/uui-core:IControlled", + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:ITreeActions", + "required": true + }, + { + "uid": "loadMissingRecordsOnCheck", + "name": "loadMissingRecordsOnCheck", + "comment": { + "raw": [ + "Loads missing records and provides a fulfilled tree.", + " @param id - id of an item, which is checked and records should be loaded for.", + " @param isChecked - checking status of the record.", + " @param isRoot - a flag, which marks if all records should be checked/unchecked.", + " @returns fulfilled tree with missing records, those required to be loaded for checking." + ] + }, + "typeValue": { + "raw": "(id: TId, isChecked: boolean, isRoot: boolean) => Promise>" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:LoadMissingRecords", "required": false }, { - "uid": "onValueChange", - "name": "onValueChange", + "uid": "getItemStatus", + "name": "getItemStatus", "comment": { "raw": [ - "Called when value needs to be changed (usually due to user interaction)" + "Provides a status of the given item.", + " @param id - id of an item, status to be provided for.", + " @returns status of the item." ] }, "typeValue": { - "raw": "(newValue: DataTableState) => void" + "raw": "(id: TId) => RecordStatus" }, "editor": { "type": "func" }, - "from": "@epam/uui-core:IControlled", + "from": "@epam/uui-core:GetItemStatus", "required": false } ], @@ -29152,6 +32989,60 @@ "exported": false } }, + "@epam/uui-core:ArrayDataSourceConfig": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "ArrayDataSourceConfig", + "nameFull": "ArrayDataSourceConfig" + }, + "src": "uui-core/src/data/processing/views/tree/hooks/strategies/types/common.ts", + "exported": false + } + }, + "@epam/uui-core:AsyncDataSourceConfig": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "AsyncDataSourceConfig", + "nameFull": "AsyncDataSourceConfig" + }, + "src": "uui-core/src/data/processing/views/tree/hooks/strategies/types/common.ts", + "exported": false + } + }, + "@epam/uui-core:AsyncTreeProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "AsyncTreeProps", + "nameFull": "AsyncTreeProps" + }, + "src": "uui-core/src/data/processing/views/tree/hooks/strategies/asyncTree/types.ts", + "comment": { + "raw": [ + "Async tree hook configuration." + ] + }, + "exported": false + } + }, + "@epam/uui-core:CommonTreeConfig": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "CommonTreeConfig", + "nameFull": "CommonTreeConfig" + }, + "src": "uui-core/src/data/processing/views/tree/hooks/strategies/types/common.ts", + "comment": { + "raw": [ + "Tree configuration." + ] + }, + "exported": false + } + }, "@epam/uui-core:CustomFilterConfig": { "summary": { "module": "@epam/uui-core", @@ -29185,6 +33076,103 @@ "exported": false } }, + "@epam/uui-core:GetItemStatus": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "GetItemStatus", + "nameFull": "GetItemStatus" + }, + "src": "uui-core/src/data/processing/views/tree/hooks/strategies/types/strategies.ts", + "comment": { + "raw": [ + "Item status getter." + ] + }, + "exported": false + } + }, + "@epam/uui-core:ItemsStatuses": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "ItemsStatuses", + "nameFull": "ItemsStatuses" + }, + "src": "uui-core/src/data/processing/views/tree/hooks/strategies/types/common.ts", + "exported": false + } + }, + "@epam/uui-core:ITreeActions": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "ITreeActions", + "nameFull": "ITreeActions" + }, + "src": "uui-core/src/data/processing/views/tree/hooks/strategies/types/common.ts", + "comment": { + "raw": [ + "Actions, allowed to be performed on the tree." + ] + }, + "exported": false + } + }, + "@epam/uui-core:ITreeLoadingState": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "ITreeLoadingState", + "nameFull": "ITreeLoadingState" + }, + "src": "uui-core/src/data/processing/views/tree/hooks/strategies/types/common.ts", + "comment": { + "raw": [ + "Loading state of the tree." + ] + }, + "exported": false + } + }, + "@epam/uui-core:LazyDataSourceConfig": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "LazyDataSourceConfig", + "nameFull": "LazyDataSourceConfig" + }, + "src": "uui-core/src/data/processing/views/tree/hooks/strategies/types/common.ts", + "exported": false + } + }, + "@epam/uui-core:LazyTreeProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "LazyTreeProps", + "nameFull": "LazyTreeProps" + }, + "src": "uui-core/src/data/processing/views/tree/hooks/strategies/lazyTree/types.ts", + "exported": false + } + }, + "@epam/uui-core:LoadMissingRecords": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "LoadMissingRecords", + "nameFull": "LoadMissingRecords" + }, + "src": "uui-core/src/data/processing/views/tree/hooks/strategies/types/strategies.ts", + "comment": { + "raw": [ + "Load missing records getter." + ] + }, + "exported": false + } + }, "@epam/uui-core:NumericFilterConfig": { "summary": { "module": "@epam/uui-core", @@ -29218,6 +33206,28 @@ "exported": false } }, + "@epam/uui-core:SharedItemsState": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "SharedItemsState", + "nameFull": "SharedItemsState" + }, + "src": "uui-core/src/data/processing/views/tree/hooks/strategies/types/common.ts", + "exported": false + } + }, + "@epam/uui-core:SyncTreeProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "SyncTreeProps", + "nameFull": "SyncTreeProps" + }, + "src": "uui-core/src/data/processing/views/tree/hooks/strategies/syncTree/types.ts", + "exported": false + } + }, "@epam/uui-core:UseTableStateHookBaseParams": { "summary": { "module": "@epam/uui-core", @@ -29442,11 +33452,15 @@ "raw": "AdaptiveItemProps", "print": [ "type AdaptiveItemProps = T & {", - " /** Render callback of the item. It renders items inside the panel and measures their width.", + " /**", + " * Render callback of the item. It renders items inside the panel and measures their width.", " * Pay attention that we can't measure margins. If you need to have margins, please make a wrapper and add margins inside", " * */", " render: (item: AdaptiveItemProps, hiddenItems?: AdaptiveItemProps[], displayedItems?: AdaptiveItemProps[]) => any;", - " /** Item collapsed priority. An item with lower priority will be hidden first, and so on. If several items have the same priority, all of them will be hidden; */", + " /**", + " * Item collapsing priority. Items with lower priority will be hidden first.", + " * If several items have the same priority, they will be hidden together, even if there's a place for one of them.", + " * */", " priority: number;", " /** If true, this item will be shown when some other items was hidden; for example, you can use it to render dropdowns with hidden items.", " * You can provide more than one collapsedContainer item, but will be shown only those which has minimal priority, but this priority can't be less than the last hidden item’s priority. */", @@ -29479,7 +33493,8 @@ "name": "priority", "comment": { "raw": [ - "Item collapsed priority. An item with lower priority will be hidden first, and so on. If several items have the same priority, all of them will be hidden;" + "Item collapsing priority. Items with lower priority will be hidden first.", + " If several items have the same priority, they will be hidden together, even if there's a place for one of them." ] }, "typeValue": { @@ -41697,7 +45712,7 @@ "details": { "kind": 265, "typeValue": { - "raw": "PickerBaseOptions & { selectionMode: 'single'; valueType?: 'id' | undefined; } & IEditable & IAnalyticableOnChange & ICanFocus & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } | PickerBaseOptions & { selectionMode: 'single'; valueType: 'entity'; } & IEditable & IAnalyticableOnChange & ICanFocus & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } | PickerBaseOptions & { selectionMode: 'multi'; valueType?: 'id' | undefined; emptyValue?: [] | null | undefined; } & IEditable & IAnalyticableOnChange & ICanFocus & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } | PickerBaseOptions & { selectionMode: 'multi'; valueType: 'entity'; emptyValue?: [] | null | undefined; } & IEditable & IAnalyticableOnChange & ICanFocus & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; }", + "raw": "PickerBaseOptions & { selectionMode: 'single'; valueType?: 'id' | undefined; } & IEditable & IAnalyticableOnChange & PickerShowSelectedOnly & ICanFocus & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } | PickerBaseOptions & { selectionMode: 'single'; valueType: 'entity'; } & IEditable & IAnalyticableOnChange & PickerShowSelectedOnly & ICanFocus & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } | PickerBaseOptions & { selectionMode: 'multi'; valueType?: 'id' | undefined; emptyValue?: [] | null | undefined; } & IEditable & IAnalyticableOnChange & PickerShowSelectedOnly & ICanFocus & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } | PickerBaseOptions & { selectionMode: 'multi'; valueType: 'entity'; emptyValue?: [] | null | undefined; } & IEditable & IAnalyticableOnChange & PickerShowSelectedOnly & ICanFocus & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; }", "print": [ "type PickerInputBaseProps = PickerBaseProps & ICanFocus & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & {", " /** dropdown (default) - show selection in dropdown; modal - opens modal window to select items */", @@ -42178,6 +46193,23 @@ "from": "@epam/uui-core:IAnalyticableOnChange", "required": false }, + { + "uid": "showSelectedOnly", + "name": "showSelectedOnly", + "comment": { + "raw": [ + "Enables/disables selected rows only in Picker." + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:PickerShowSelectedOnly", + "required": false + }, { "uid": "onFocus", "name": "onFocus", @@ -42816,7 +46848,7 @@ "details": { "kind": 265, "typeValue": { - "raw": "PickerBaseOptions & { selectionMode: 'single'; valueType?: 'id' | undefined; } & IEditable & IAnalyticableOnChange & { maxDefaultItems?: number | undefined; maxTotalItems?: number | undefined; defaultIds?: TId[] | undefined; settingsKey?: string | undefined; sortBy?(item: TItem, sorting: SortingOption): string; } | PickerBaseOptions & { selectionMode: 'single'; valueType: 'entity'; } & IEditable & IAnalyticableOnChange & { maxDefaultItems?: number | undefined; maxTotalItems?: number | undefined; defaultIds?: TId[] | undefined; settingsKey?: string | undefined; sortBy?(item: TItem, sorting: SortingOption): string; } | PickerBaseOptions & { selectionMode: 'multi'; valueType?: 'id' | undefined; emptyValue?: [] | null | undefined; } & IEditable & IAnalyticableOnChange & { maxDefaultItems?: number | undefined; maxTotalItems?: number | undefined; defaultIds?: TId[] | undefined; settingsKey?: string | undefined; sortBy?(item: TItem, sorting: SortingOption): string; } | PickerBaseOptions & { selectionMode: 'multi'; valueType: 'entity'; emptyValue?: [] | null | undefined; } & IEditable & IAnalyticableOnChange & { maxDefaultItems?: number | undefined; maxTotalItems?: number | undefined; defaultIds?: TId[] | undefined; settingsKey?: string | undefined; sortBy?(item: TItem, sorting: SortingOption): string; }", + "raw": "PickerBaseOptions & { selectionMode: 'single'; valueType?: 'id' | undefined; } & IEditable & IAnalyticableOnChange & PickerShowSelectedOnly & { maxDefaultItems?: number | undefined; maxTotalItems?: number | undefined; defaultIds?: TId[] | undefined; settingsKey?: string | undefined; sortBy?(item: TItem, sorting: SortingOption): string; } | PickerBaseOptions & { selectionMode: 'single'; valueType: 'entity'; } & IEditable & IAnalyticableOnChange & PickerShowSelectedOnly & { maxDefaultItems?: number | undefined; maxTotalItems?: number | undefined; defaultIds?: TId[] | undefined; settingsKey?: string | undefined; sortBy?(item: TItem, sorting: SortingOption): string; } | PickerBaseOptions & { selectionMode: 'multi'; valueType?: 'id' | undefined; emptyValue?: [] | null | undefined; } & IEditable & IAnalyticableOnChange & PickerShowSelectedOnly & { maxDefaultItems?: number | undefined; maxTotalItems?: number | undefined; defaultIds?: TId[] | undefined; settingsKey?: string | undefined; sortBy?(item: TItem, sorting: SortingOption): string; } | PickerBaseOptions & { selectionMode: 'multi'; valueType: 'entity'; emptyValue?: [] | null | undefined; } & IEditable & IAnalyticableOnChange & PickerShowSelectedOnly & { maxDefaultItems?: number | undefined; maxTotalItems?: number | undefined; defaultIds?: TId[] | undefined; settingsKey?: string | undefined; sortBy?(item: TItem, sorting: SortingOption): string; }", "print": [ "type PickerListBaseProps = Exclude, 'cascadeSelection'> & {", " /**", @@ -43253,6 +47285,23 @@ "from": "@epam/uui-core:IAnalyticableOnChange", "required": false }, + { + "uid": "showSelectedOnly", + "name": "showSelectedOnly", + "comment": { + "raw": [ + "Enables/disables selected rows only in Picker." + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:PickerShowSelectedOnly", + "required": false + }, { "uid": "maxDefaultItems", "name": "maxDefaultItems", @@ -44068,7 +48117,7 @@ " cancelIcon?: Icon;", " dropdownIcon?: Icon;", " autoFocus?: boolean;", - " renderItem?(props: DataRowProps): React.ReactNode;", + " renderItem?(props: PickerTogglerRenderItemParams): React.ReactNode;", " getName?: (item: TItem) => string;", " entityName?: string;", " maxItems?: number;", @@ -44125,7 +48174,7 @@ "uid": "renderItem", "name": "renderItem", "typeValue": { - "raw": "(props: DataRowProps) => React.ReactNode" + "raw": "(props: PickerTogglerRenderItemParams) => React.ReactNode" }, "editor": { "type": "component" @@ -44663,6 +48712,131 @@ "propsFromUnion": false } }, + "@epam/uui-components:PickerTogglerRenderItemParams": { + "summary": { + "module": "@epam/uui-components", + "typeName": { + "name": "PickerTogglerRenderItemParams", + "nameFull": "PickerTogglerRenderItemParams" + }, + "src": "uui-components/src/pickers/PickerToggler.tsx", + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "PickerTogglerRenderItemParams", + "print": [ + "interface PickerTogglerRenderItemParams extends IHasCaption, IDisableable {", + " /** Key for the component */", + " key: string;", + " /** DataRowProps object of the rendered item */", + " rowProps?: DataRowProps;", + " /** Indicates that tag is collapsed rest selected items, like '+N items selected' */", + " isCollapsed?: boolean;", + " /** Call to clear a value */", + " onClear?(e?: any): void;", + "}" + ] + }, + "props": [ + { + "uid": "key", + "name": "key", + "comment": { + "raw": [ + "Key for the component" + ] + }, + "typeValue": { + "raw": "string" + }, + "editor": { + "type": "string" + }, + "required": true + }, + { + "uid": "rowProps", + "name": "rowProps", + "comment": { + "raw": [ + "DataRowProps object of the rendered item" + ] + }, + "typeValue": { + "raw": "DataRowProps" + }, + "required": false + }, + { + "uid": "isCollapsed", + "name": "isCollapsed", + "comment": { + "raw": [ + "Indicates that tag is collapsed rest selected items, like '+N items selected'" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "required": false + }, + { + "uid": "onClear", + "name": "onClear", + "comment": { + "raw": [ + "Call to clear a value" + ] + }, + "typeValue": { + "raw": "(e?: any) => void" + }, + "editor": { + "type": "func" + }, + "required": false + }, + { + "uid": "caption", + "name": "caption", + "comment": { + "raw": [ + "Caption. Can be a string, or React.Element. Certain components supports minimal markup (,,) in captions." + ] + }, + "typeValue": { + "raw": "React.ReactNode" + }, + "typeValueRef": "@types/react:ReactNode", + "from": "@epam/uui-core:IHasCaption", + "required": false + }, + { + "uid": "isDisabled", + "name": "isDisabled", + "comment": { + "raw": [ + "Disable editing, and visually de-emphasize value of the component" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:IDisableable", + "required": false + } + ], + "propsFromUnion": false + } + }, "@epam/uui-components:PortalProps": { "summary": { "module": "@epam/uui-components", @@ -53968,11 +58142,19 @@ "typeValue": { "raw": "TreeProps", "print": [ - "interface TreeProps extends IHasCX, IHasChildren, IEditable {", + "interface TreeProps extends IHasCX, IHasChildren {", " items: TreeListItem[];", " renderRow(row: DataRowProps): void;", " getSearchFields?(item: TItem): string[];", " search?: string;", + " /**", + " * DataSource state.", + " */", + " value: DataSourceState;", + " /**", + " * DataSource state update handler.", + " */", + " onValueChange: SetDataSourceState;", "}" ] }, @@ -54018,6 +58200,36 @@ }, "required": false }, + { + "uid": "value", + "name": "value", + "comment": { + "raw": [ + "DataSource state." + ] + }, + "typeValue": { + "raw": "DataSourceState" + }, + "required": true + }, + { + "uid": "onValueChange", + "name": "onValueChange", + "comment": { + "raw": [ + "DataSource state update handler." + ] + }, + "typeValue": { + "raw": "SetDataSourceState" + }, + "typeValueRef": "@epam/uui-core:SetDataSourceState", + "editor": { + "type": "func" + }, + "required": true + }, { "uid": "cx", "name": "cx", @@ -54047,105 +58259,6 @@ "typeValueRef": "@types/react:ReactNode", "from": "@epam/uui-core:IHasChildren", "required": false - }, - { - "uid": "isInvalid", - "name": "isInvalid", - "comment": { - "raw": [ - "True if component contains invalid input" - ] - }, - "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" - }, - "from": "@epam/uui-core:ICanBeInvalid", - "required": false - }, - { - "uid": "isDisabled", - "name": "isDisabled", - "comment": { - "raw": [ - "Disable editing, and visually de-emphasize value of the component" - ] - }, - "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" - }, - "from": "@epam/uui-core:IDisableable", - "required": false - }, - { - "uid": "isReadonly", - "name": "isReadonly", - "comment": { - "raw": [ - "Disable editing. Unlike isDisabled, keep component's value readable." - ] - }, - "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" - }, - "from": "@epam/uui-core:ICanBeReadonly", - "required": false - }, - { - "uid": "isRequired", - "name": "isRequired", - "comment": { - "raw": [ - "Marks that component's value is required and shouldn't be empty" - ] - }, - "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" - }, - "from": "@epam/uui-core:ICanBeRequired", - "required": false - }, - { - "uid": "value", - "name": "value", - "comment": { - "raw": [ - "The current value of component" - ] - }, - "typeValue": { - "raw": "DataSourceState, any>" - }, - "from": "@epam/uui-core:IControlled", - "required": true - }, - { - "uid": "onValueChange", - "name": "onValueChange", - "comment": { - "raw": [ - "Called when value needs to be changed (usually due to user interaction)" - ] - }, - "typeValue": { - "raw": "(newValue: DataSourceState, any>) => void" - }, - "editor": { - "type": "func" - }, - "from": "@epam/uui-core:IControlled", - "required": true } ], "propsFromUnion": false @@ -54164,7 +58277,7 @@ "details": { "kind": 265, "typeValue": { - "raw": "PickerBaseOptions & { selectionMode: 'single'; valueType?: 'id' | undefined; } & IEditable & IAnalyticableOnChange & ICanFocus & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } & TProps & { toggleModalOpening?(opened: boolean): void; shouldShowBody?(): boolean; } | PickerBaseOptions & { selectionMode: 'single'; valueType: 'entity'; } & IEditable & IAnalyticableOnChange & ICanFocus & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } & TProps & { toggleModalOpening?(opened: boolean): void; shouldShowBody?(): boolean; } | PickerBaseOptions & { selectionMode: 'multi'; valueType?: 'id' | undefined; emptyValue?: [] | null | undefined; } & IEditable & IAnalyticableOnChange & ICanFocus & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } & TProps & { toggleModalOpening?(opened: boolean): void; shouldShowBody?(): boolean; } | PickerBaseOptions & { selectionMode: 'multi'; valueType: 'entity'; emptyValue?: [] | null | undefined; } & IEditable & IAnalyticableOnChange & ICanFocus & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } & TProps & { toggleModalOpening?(opened: boolean): void; shouldShowBody?(): boolean; }", + "raw": "PickerBaseOptions & { selectionMode: 'single'; valueType?: 'id' | undefined; } & IEditable & IAnalyticableOnChange & PickerShowSelectedOnly & ICanFocus & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } & TProps & { toggleModalOpening?(opened: boolean): void; shouldShowBody?(): boolean; } | PickerBaseOptions & { selectionMode: 'single'; valueType: 'entity'; } & IEditable & IAnalyticableOnChange & PickerShowSelectedOnly & ICanFocus & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } & TProps & { toggleModalOpening?(opened: boolean): void; shouldShowBody?(): boolean; } | PickerBaseOptions & { selectionMode: 'multi'; valueType?: 'id' | undefined; emptyValue?: [] | null | undefined; } & IEditable & IAnalyticableOnChange & PickerShowSelectedOnly & ICanFocus & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } & TProps & { toggleModalOpening?(opened: boolean): void; shouldShowBody?(): boolean; } | PickerBaseOptions & { selectionMode: 'multi'; valueType: 'entity'; emptyValue?: [] | null | undefined; } & IEditable & IAnalyticableOnChange & PickerShowSelectedOnly & ICanFocus & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } & TProps & { toggleModalOpening?(opened: boolean): void; shouldShowBody?(): boolean; }", "print": [ "type UsePickerInputProps = PickerInputBaseProps & TProps & {", " toggleModalOpening?(opened: boolean): void;", @@ -54585,6 +58698,23 @@ "from": "@epam/uui-core:IAnalyticableOnChange", "required": false }, + { + "uid": "showSelectedOnly", + "name": "showSelectedOnly", + "comment": { + "raw": [ + "Enables/disables selected rows only in Picker." + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:PickerShowSelectedOnly", + "required": false + }, { "uid": "onFocus", "name": "onFocus", @@ -55265,7 +59395,7 @@ "details": { "kind": 265, "typeValue": { - "raw": "PickerBaseOptions & { selectionMode: 'single'; valueType?: 'id' | undefined; } & IEditable & IAnalyticableOnChange & { maxDefaultItems?: number | undefined; maxTotalItems?: number | undefined; defaultIds?: TId[] | undefined; settingsKey?: string | undefined; sortBy?(item: TItem, sorting: SortingOption): string; } & TProps | PickerBaseOptions & { selectionMode: 'single'; valueType: 'entity'; } & IEditable & IAnalyticableOnChange & { maxDefaultItems?: number | undefined; maxTotalItems?: number | undefined; defaultIds?: TId[] | undefined; settingsKey?: string | undefined; sortBy?(item: TItem, sorting: SortingOption): string; } & TProps | PickerBaseOptions & { selectionMode: 'multi'; valueType?: 'id' | undefined; emptyValue?: [] | null | undefined; } & IEditable & IAnalyticableOnChange & { maxDefaultItems?: number | undefined; maxTotalItems?: number | undefined; defaultIds?: TId[] | undefined; settingsKey?: string | undefined; sortBy?(item: TItem, sorting: SortingOption): string; } & TProps | PickerBaseOptions & { selectionMode: 'multi'; valueType: 'entity'; emptyValue?: [] | null | undefined; } & IEditable & IAnalyticableOnChange & { maxDefaultItems?: number | undefined; maxTotalItems?: number | undefined; defaultIds?: TId[] | undefined; settingsKey?: string | undefined; sortBy?(item: TItem, sorting: SortingOption): string; } & TProps", + "raw": "PickerBaseOptions & { selectionMode: 'single'; valueType?: 'id' | undefined; } & IEditable & IAnalyticableOnChange & PickerShowSelectedOnly & { maxDefaultItems?: number | undefined; maxTotalItems?: number | undefined; defaultIds?: TId[] | undefined; settingsKey?: string | undefined; sortBy?(item: TItem, sorting: SortingOption): string; } & TProps | PickerBaseOptions & { selectionMode: 'single'; valueType: 'entity'; } & IEditable & IAnalyticableOnChange & PickerShowSelectedOnly & { maxDefaultItems?: number | undefined; maxTotalItems?: number | undefined; defaultIds?: TId[] | undefined; settingsKey?: string | undefined; sortBy?(item: TItem, sorting: SortingOption): string; } & TProps | PickerBaseOptions & { selectionMode: 'multi'; valueType?: 'id' | undefined; emptyValue?: [] | null | undefined; } & IEditable & IAnalyticableOnChange & PickerShowSelectedOnly & { maxDefaultItems?: number | undefined; maxTotalItems?: number | undefined; defaultIds?: TId[] | undefined; settingsKey?: string | undefined; sortBy?(item: TItem, sorting: SortingOption): string; } & TProps | PickerBaseOptions & { selectionMode: 'multi'; valueType: 'entity'; emptyValue?: [] | null | undefined; } & IEditable & IAnalyticableOnChange & PickerShowSelectedOnly & { maxDefaultItems?: number | undefined; maxTotalItems?: number | undefined; defaultIds?: TId[] | undefined; settingsKey?: string | undefined; sortBy?(item: TItem, sorting: SortingOption): string; } & TProps", "print": [ "type UsePickerListProps = PickerListBaseProps & TProps & {};" ] @@ -55683,6 +59813,23 @@ "from": "@epam/uui-core:IAnalyticableOnChange", "required": false }, + { + "uid": "showSelectedOnly", + "name": "showSelectedOnly", + "comment": { + "raw": [ + "Enables/disables selected rows only in Picker." + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:PickerShowSelectedOnly", + "required": false + }, { "uid": "maxDefaultItems", "name": "maxDefaultItems", @@ -61957,7 +66104,9 @@ "print": [ "interface DataTableProps extends IEditable, DataSourceListProps, DataTableColumnsConfigOptions, Pick {", " /** Callback to get rows that will be rendered in table */", - " getRows(): DataRowProps[];", + " getRows?(): DataRowProps[];", + " /** Rows that should be rendered in table */", + " rows?: DataRowProps[];", " /** Array of all possible columns for the table */", " columns: DataColumnProps[];", " /** Render callback for the table row.", @@ -62008,7 +66157,20 @@ "editor": { "type": "func" }, - "required": true + "required": false + }, + { + "uid": "rows", + "name": "rows", + "comment": { + "raw": [ + "Rows that should be rendered in table" + ] + }, + "typeValue": { + "raw": "DataRowProps[]" + }, + "required": false }, { "uid": "columns", @@ -72057,14 +76219,14 @@ "details": { "kind": 265, "typeValue": { - "raw": "SizeMod & IHasEditMode & PickerBaseOptions & { selectionMode: 'single'; valueType?: 'id' | undefined; } & IEditable & IAnalyticableOnChange & ICanFocus & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } & { renderTag?: ((props: PickerTogglerTagProps) => JSX.Element) | undefined; } | SizeMod & IHasEditMode & PickerBaseOptions & { selectionMode: 'single'; valueType: 'entity'; } & IEditable & IAnalyticableOnChange & ICanFocus & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } & { renderTag?: ((props: PickerTogglerTagProps) => JSX.Element) | undefined; } | SizeMod & IHasEditMode & PickerBaseOptions & { selectionMode: 'multi'; valueType?: 'id' | undefined; emptyValue?: [] | null | undefined; } & IEditable & IAnalyticableOnChange & ICanFocus & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } & { renderTag?: ((props: PickerTogglerTagProps) => JSX.Element) | undefined; } | SizeMod & IHasEditMode & PickerBaseOptions & { selectionMode: 'multi'; valueType: 'entity'; emptyValue?: [] | null | undefined; } & IEditable & IAnalyticableOnChange & ICanFocus & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } & { renderTag?: ((props: PickerTogglerTagProps) => JSX.Element) | undefined; }", + "raw": "SizeMod & IHasEditMode & PickerBaseOptions & { selectionMode: 'single'; valueType?: 'id' | undefined; } & IEditable & IAnalyticableOnChange & PickerShowSelectedOnly & ICanFocus & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } & { renderTag?: ((props: PickerTogglerRenderItemParams) => JSX.Element) | undefined; } | SizeMod & IHasEditMode & PickerBaseOptions & { selectionMode: 'single'; valueType: 'entity'; } & IEditable & IAnalyticableOnChange & PickerShowSelectedOnly & ICanFocus & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } & { renderTag?: ((props: PickerTogglerRenderItemParams) => JSX.Element) | undefined; } | SizeMod & IHasEditMode & PickerBaseOptions & { selectionMode: 'multi'; valueType?: 'id' | undefined; emptyValue?: [] | null | undefined; } & IEditable & IAnalyticableOnChange & PickerShowSelectedOnly & ICanFocus & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } & { renderTag?: ((props: PickerTogglerRenderItemParams) => JSX.Element) | undefined; } | SizeMod & IHasEditMode & PickerBaseOptions & { selectionMode: 'multi'; valueType: 'entity'; emptyValue?: [] | null | undefined; } & IEditable & IAnalyticableOnChange & PickerShowSelectedOnly & ICanFocus & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } & { renderTag?: ((props: PickerTogglerRenderItemParams) => JSX.Element) | undefined; }", "print": [ "type PickerInputProps = SizeMod & IHasEditMode & PickerInputBaseProps & {", " /**", " * Render callback for picker toggler selection tag", " * If omitted, default `PickerTogglerTag` component will be rendered", " */", - " renderTag?: (props: PickerTogglerTagProps) => JSX.Element;", + " renderTag?: (props: PickerTogglerRenderItemParams) => JSX.Element;", "};" ] }, @@ -72530,6 +76692,23 @@ "from": "@epam/uui-core:IAnalyticableOnChange", "required": false }, + { + "uid": "showSelectedOnly", + "name": "showSelectedOnly", + "comment": { + "raw": [ + "Enables/disables selected rows only in Picker." + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:PickerShowSelectedOnly", + "required": false + }, { "uid": "onFocus", "name": "onFocus", @@ -73008,7 +77187,7 @@ ] }, "typeValue": { - "raw": "(props: PickerTogglerTagProps) => JSX.Element" + "raw": "(props: PickerTogglerRenderItemParams) => JSX.Element" }, "editor": { "type": "func" @@ -74878,7 +79057,7 @@ "details": { "kind": 265, "typeValue": { - "raw": "SizeMod & IHasPlaceholder & PickerModalOptions & { renderModalToggler?(props: IClickable & IHasCaption & IDisableable, selection: DataRowProps[]): React.ReactNode; noOptionsMessage?: React.ReactNode; } & PickerBaseOptions & { selectionMode: 'single'; valueType?: 'id' | undefined; } & IEditable & IAnalyticableOnChange & { maxDefaultItems?: number | undefined; maxTotalItems?: number | undefined; defaultIds?: TId[] | undefined; settingsKey?: string | undefined; sortBy?(item: TItem, sorting: SortingOption): string; } | SizeMod & IHasPlaceholder & PickerModalOptions & { renderModalToggler?(props: IClickable & IHasCaption & IDisableable, selection: DataRowProps[]): React.ReactNode; noOptionsMessage?: React.ReactNode; } & PickerBaseOptions & { selectionMode: 'single'; valueType: 'entity'; } & IEditable & IAnalyticableOnChange & { maxDefaultItems?: number | undefined; maxTotalItems?: number | undefined; defaultIds?: TId[] | undefined; settingsKey?: string | undefined; sortBy?(item: TItem, sorting: SortingOption): string; } | SizeMod & IHasPlaceholder & PickerModalOptions & { renderModalToggler?(props: IClickable & IHasCaption & IDisableable, selection: DataRowProps[]): React.ReactNode; noOptionsMessage?: React.ReactNode; } & PickerBaseOptions & { selectionMode: 'multi'; valueType?: 'id' | undefined; emptyValue?: [] | null | undefined; } & IEditable & IAnalyticableOnChange & { maxDefaultItems?: number | undefined; maxTotalItems?: number | undefined; defaultIds?: TId[] | undefined; settingsKey?: string | undefined; sortBy?(item: TItem, sorting: SortingOption): string; } | SizeMod & IHasPlaceholder & PickerModalOptions & { renderModalToggler?(props: IClickable & IHasCaption & IDisableable, selection: DataRowProps[]): React.ReactNode; noOptionsMessage?: React.ReactNode; } & PickerBaseOptions & { selectionMode: 'multi'; valueType: 'entity'; emptyValue?: [] | null | undefined; } & IEditable & IAnalyticableOnChange & { maxDefaultItems?: number | undefined; maxTotalItems?: number | undefined; defaultIds?: TId[] | undefined; settingsKey?: string | undefined; sortBy?(item: TItem, sorting: SortingOption): string; }", + "raw": "SizeMod & IHasPlaceholder & PickerModalOptions & { renderModalToggler?(props: IClickable & IHasCaption & IDisableable, selection: DataRowProps[]): React.ReactNode; noOptionsMessage?: React.ReactNode; } & PickerBaseOptions & { selectionMode: 'single'; valueType?: 'id' | undefined; } & IEditable & IAnalyticableOnChange & PickerShowSelectedOnly & { maxDefaultItems?: number | undefined; maxTotalItems?: number | undefined; defaultIds?: TId[] | undefined; settingsKey?: string | undefined; sortBy?(item: TItem, sorting: SortingOption): string; } | SizeMod & IHasPlaceholder & PickerModalOptions & { renderModalToggler?(props: IClickable & IHasCaption & IDisableable, selection: DataRowProps[]): React.ReactNode; noOptionsMessage?: React.ReactNode; } & PickerBaseOptions & { selectionMode: 'single'; valueType: 'entity'; } & IEditable & IAnalyticableOnChange & PickerShowSelectedOnly & { maxDefaultItems?: number | undefined; maxTotalItems?: number | undefined; defaultIds?: TId[] | undefined; settingsKey?: string | undefined; sortBy?(item: TItem, sorting: SortingOption): string; } | SizeMod & IHasPlaceholder & PickerModalOptions & { renderModalToggler?(props: IClickable & IHasCaption & IDisableable, selection: DataRowProps[]): React.ReactNode; noOptionsMessage?: React.ReactNode; } & PickerBaseOptions & { selectionMode: 'multi'; valueType?: 'id' | undefined; emptyValue?: [] | null | undefined; } & IEditable & IAnalyticableOnChange & PickerShowSelectedOnly & { maxDefaultItems?: number | undefined; maxTotalItems?: number | undefined; defaultIds?: TId[] | undefined; settingsKey?: string | undefined; sortBy?(item: TItem, sorting: SortingOption): string; } | SizeMod & IHasPlaceholder & PickerModalOptions & { renderModalToggler?(props: IClickable & IHasCaption & IDisableable, selection: DataRowProps[]): React.ReactNode; noOptionsMessage?: React.ReactNode; } & PickerBaseOptions & { selectionMode: 'multi'; valueType: 'entity'; emptyValue?: [] | null | undefined; } & IEditable & IAnalyticableOnChange & PickerShowSelectedOnly & { maxDefaultItems?: number | undefined; maxTotalItems?: number | undefined; defaultIds?: TId[] | undefined; settingsKey?: string | undefined; sortBy?(item: TItem, sorting: SortingOption): string; }", "print": [ "type PickerListProps = SizeMod & IHasPlaceholder & PickerModalOptions & {", " renderModalToggler?(props: IClickable & IHasCaption & IDisableable, selection: DataRowProps[]): React.ReactNode;", @@ -75428,6 +79607,23 @@ "from": "@epam/uui-core:IAnalyticableOnChange", "required": false }, + { + "uid": "showSelectedOnly", + "name": "showSelectedOnly", + "comment": { + "raw": [ + "Enables/disables selected rows only in Picker." + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:PickerShowSelectedOnly", + "required": false + }, { "uid": "maxDefaultItems", "name": "maxDefaultItems", @@ -76452,13 +80648,9 @@ "typeValue": { "raw": "PickerTogglerTagProps", "print": [ - "interface PickerTogglerTagProps extends TagProps {", + "interface PickerTogglerTagProps extends PickerTogglerRenderItemParams, TagProps {", " /** Defines component size */", " size?: types.ControlSize;", - " /** If this is true, then the PickerTogglerTag will be an additional tag with the number of collapsed elements in the caption. */", - " isCollapsed?: boolean;", - " /** Defines row props (see more: uui-components/src/pickers/PickerToggler.tsx PickerTogglerProps) */", - " rowProps?: DataRowProps;", "}" ] }, @@ -76486,12 +80678,43 @@ }, "required": false }, + { + "uid": "key", + "name": "key", + "comment": { + "raw": [ + "Key for the component" + ] + }, + "typeValue": { + "raw": "string" + }, + "editor": { + "type": "string" + }, + "from": "@epam/uui-components:PickerTogglerRenderItemParams", + "required": true + }, + { + "uid": "rowProps", + "name": "rowProps", + "comment": { + "raw": [ + "DataRowProps object of the rendered item" + ] + }, + "typeValue": { + "raw": "DataRowProps" + }, + "from": "@epam/uui-components:PickerTogglerRenderItemParams", + "required": false + }, { "uid": "isCollapsed", "name": "isCollapsed", "comment": { "raw": [ - "If this is true, then the PickerTogglerTag will be an additional tag with the number of collapsed elements in the caption." + "Indicates that tag is collapsed rest selected items, like '+N items selected'" ] }, "typeValue": { @@ -76500,19 +80723,56 @@ "editor": { "type": "bool" }, + "from": "@epam/uui-components:PickerTogglerRenderItemParams", "required": false }, { - "uid": "rowProps", - "name": "rowProps", + "uid": "onClear", + "name": "onClear", "comment": { "raw": [ - "Defines row props (see more: uui-components/src/pickers/PickerToggler.tsx PickerTogglerProps)" + "Call to clear a value" ] }, "typeValue": { - "raw": "DataRowProps" + "raw": "(e?: any) => void" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-components:PickerTogglerRenderItemParams", + "required": false + }, + { + "uid": "caption", + "name": "caption", + "comment": { + "raw": [ + "Caption. Can be a string, or React.Element. Certain components supports minimal markup (,,) in captions." + ] + }, + "typeValue": { + "raw": "React.ReactNode" + }, + "typeValueRef": "@types/react:ReactNode", + "from": "@epam/uui-core:IHasCaption", + "required": false + }, + { + "uid": "isDisabled", + "name": "isDisabled", + "comment": { + "raw": [ + "Disable editing, and visually de-emphasize value of the component" + ] }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:IDisableable", "required": false }, { @@ -76564,23 +80824,6 @@ "from": "@epam/uui-core:IHasTabIndex", "required": false }, - { - "uid": "isDisabled", - "name": "isDisabled", - "comment": { - "raw": [ - "Disable editing, and visually de-emphasize value of the component" - ] - }, - "typeValue": { - "raw": "boolean" - }, - "editor": { - "type": "bool" - }, - "from": "@epam/uui-core:IDisableable", - "required": false - }, { "uid": "cx", "name": "cx", @@ -76767,21 +81010,6 @@ "from": "@epam/uui-core:IHasIcon", "required": false }, - { - "uid": "caption", - "name": "caption", - "comment": { - "raw": [ - "Caption. Can be a string, or React.Element. Certain components supports minimal markup (,,) in captions." - ] - }, - "typeValue": { - "raw": "React.ReactNode" - }, - "typeValueRef": "@types/react:ReactNode", - "from": "@epam/uui-core:IHasCaption", - "required": false - }, { "uid": "fill", "name": "fill", @@ -76807,23 +81035,6 @@ "from": "@epam/uui:TagCoreProps", "required": false }, - { - "uid": "onClear", - "name": "onClear", - "comment": { - "raw": [ - "Call to clear toggler value" - ] - }, - "typeValue": { - "raw": "(e?: any) => void" - }, - "editor": { - "type": "func" - }, - "from": "@epam/uui:TagCoreProps", - "required": false - }, { "uid": "clearIcon", "name": "clearIcon", @@ -100965,6 +105176,17 @@ "exported": false } }, + "@types/react:Dispatch": { + "summary": { + "module": "@types/react", + "typeName": { + "name": "Dispatch", + "nameFull": "Dispatch" + }, + "src": "node_modules/@types/react/index.d.ts", + "exported": false + } + }, "@types/react:DOMAttributes": { "summary": { "module": "@types/react", diff --git a/uui-core/src/types/dataSources.ts b/uui-core/src/types/dataSources.ts index f8850a5b17..ff85e2123a 100644 --- a/uui-core/src/types/dataSources.ts +++ b/uui-core/src/types/dataSources.ts @@ -124,10 +124,16 @@ export interface IDataSource { * Patch tree configuration. */ export interface PatchOptions extends SortConfig { + /** + * Items, which should be added/updated/deleted from the tree. + */ + patch?: IMap | IImmutableMap; + /** * To enable deleting of the items, it is required to specify getter for deleted state. */ isDeleted?(item: TItem): boolean; + /** * Provides information about the relative position of the new item. * @param item - new item, position should be got for. @@ -135,6 +141,7 @@ export interface PatchOptions extends SortConfig { * @default PatchOrdering.TOP */ getNewItemPosition?: (item: TItem) => PatchOrderingType; + /** * * Provides information about the temporary order of the new item. @@ -144,10 +151,6 @@ export interface PatchOptions extends SortConfig { * @experimental The API of this feature can be changed in the future releases. */ getItemTemporaryOrder?: (item: TItem) => string; - /** - * Items, which should be added/updated/deleted from the tree. - */ - patch?: IMap | IImmutableMap; /** * If enabled, items position is fixed between sorting. diff --git a/uui-docs/src/dataSources/DataSourceViewer.tsx b/uui-docs/src/dataSources/DataSourceViewer.tsx index 99b4bcb6c5..8a3f57494a 100644 --- a/uui-docs/src/dataSources/DataSourceViewer.tsx +++ b/uui-docs/src/dataSources/DataSourceViewer.tsx @@ -1,19 +1,21 @@ import React, { useCallback } from 'react'; import { DataPickerRow, VirtualList, Text, Panel, LinkButton } from '@epam/promo'; -import { FlexRow, PickerItem } from '@epam/uui'; +import { FlexRow, PickerItem, Switch } from '@epam/uui'; import { DataRowProps, DataSourceState, IDataSource, IEditable } from '@epam/uui-core'; import css from './DataSourceViewer.module.scss'; interface Props extends IEditable { exampleTitle?: string; selectAll?: boolean; + showSelectedOnly?: boolean; getName?: (item: TItem) => string; dataSource: IDataSource; onValueChange: React.Dispatch>>; + onShowSelectedOnlyChange?: () => void; } export function DataSourceViewer(props: Props) { - const { value, onValueChange, dataSource, exampleTitle, selectAll: showSelectAll } = props; + const { value, onValueChange, dataSource, exampleTitle, selectAll: showSelectAll, showSelectedOnly, onShowSelectedOnlyChange } = props; const view = dataSource.useView(value, onValueChange); const renderItem = (item: TItem, rowProps: DataRowProps) => { @@ -75,6 +77,9 @@ export function DataSourceViewer(props: Props) { onClick={ hasSelection ? clearAll : selectAll } /> )} + {onShowSelectedOnlyChange && ( + + )} { value.checked?.length > 0 && ( diff --git a/uui-docs/src/dataSources/columns.tsx b/uui-docs/src/dataSources/columns.tsx index 02caed4f26..ced2c61210 100644 --- a/uui-docs/src/dataSources/columns.tsx +++ b/uui-docs/src/dataSources/columns.tsx @@ -19,6 +19,24 @@ export const dataSourceColumns: DataColumnProps<{ name: string }, number, any>[] }, ]; +export const sortableDataSourceColumns: DataColumnProps<{ name: string }, number, any>[] = [ + { + key: 'name', + caption: 'Name', + width: 290, + fix: 'left', + isSortable: true, + renderCell: (props) => ( + } + padding="12" + { ...props } + /> + ), + }, +]; + export const dataSourceTextColumns: DataColumnProps<{ name: string }, number, any>[] = [ { key: 'name',