@wix/patterns 1.458.0 → 1.460.0

package/dist/docs/MultiSelectCheckboxFilter.md

@@ -256,139 +256,12 @@ function ItemsSelectionFilterExample() {
 
 ## API
 
-### Extends
-
-[MultiSelectCheckboxProps](https://www.docs.wixdesignsystem.com/?activeTab=API&path=%2Fstory%2Fcomponents-api-components--multiselectcheckbox)
-
 ### Props
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `collection` | `CollectionState<V, F>` | Yes | - | A collection state object to fetch the dropdown items.<br> A collection created using [useFilterCollection](./?path=/story/features-filter-hooks--usefiltercollection) or [useStaticListFilterCollection](./?path=/story/features-filter-hooks--usestaticlistfiltercollection) |
-| `renderItem` | `((item: V, index: number) => ListItem)` | No | - | A function that returns a [ListItemSelectProps](https://www.docs.wixdesignsystem.com/?path=/story/components-form-dropdownlistitems--listitemselect) (Optional) |
-| `maxSelected` | `number` | No | - | The maximum number of items that can be selected. Once reached, every unselected option becomes disabled (already-selected options stay deselectable). When undefined, selection is unbounded. Read once on mount — later changes to this prop are ignored. (Optional) |
-| `size` | `"small" \| "tiny" \| "medium" \| "large"` | No | - | Controls the size of the input. Default value: `medium` |
-| `dataHook` | `string` | No | ``collection-filter-${filter.name}`` | Applies a data-hook HTML attribute that can be used in the tests |
-| `className` | `string` | No | - | Specifies a CSS class name to be appended to the component's root element. |
-| `dropDirectionUp` | `boolean` | No | - | @deprecated |
-| `focusOnSelectedOption` | `boolean` | No | - | Scroll view to the selected option on opening the dropdown |
-| `onClose` | `(() => void)` | No | - | Callback function called whenever the user press the `Escape` keyboard. |
-| `onOptionMarked` | `((option: DropdownLayoutValueOption \| null, optionElementId?: string) => void)` | No | - | Callback function called whenever an option becomes focused (hovered/active). Receives the relevant option object from the original props.options array. |
-| `onOptionsNavigate` | `((option: DropdownLayoutValueOption \| null) => void)` | No | - | Callback function called whenever the user navigates to an option (via keyboard or mouse). Receives the relevant option object from the original props.options array, or null when navigation is cleared. |
-| `visible` | `boolean` | No | - | Should show or hide the component |
-| `selectedId` | `string \| number` | No | - | The id of the selected option in the list |
-| `tabIndex` | `number` | No | - | Indicates that element can be focused and where it participates in sequential keyboard navigation |
-| `onClickOutside` | `((e: TouchEvent \| MouseEvent) => void)` | No | - | @deprecated Do not use this prop. |
-| `fixedHeader` | `ReactNode` | No | - | A fixed header to the list |
-| `fixedFooter` | `ReactNode` | No | - | A fixed footer to the list |
-| `maxHeightPixels` | `string \| number` | No | - | Set the max height of the dropdownLayout in pixels |
-| `minWidthPixels` | `string \| number` | No | - | Set the min width of the dropdownLayout in pixels |
-| `withArrow` | `boolean` | No | - | @deprecated Do not use this prop. |
-| `closeOnSelect` | `boolean` | No | `true` | Closes DropdownLayout on option selection |
-| `onMouseEnter` | `MouseEventHandler<HTMLElement>` | No | - | Callback function called whenever the user entered with the mouse to the dropdown layout. |
-| `onMouseLeave` | `MouseEventHandler<HTMLElement>` | No | - | Callback function called whenever the user exited with the mouse from the dropdown layout. |
-| `onMouseDown` | `MouseEventHandler<HTMLElement>` | No | - | Callback function called whenever the user clicks the dropdown layout. |
-| `itemHeight` | `"big" \| "small"` | No | - | @deprecated Do not use this prop. |
-| `selectedHighlight` | `boolean` | No | `true` | Whether the selected option will be highlighted when dropdown reopened. |
-| `inContainer` | `boolean` | No | - | Whether the `<DropdownLayout/>` is in a container component. If `true`, some styles such as shadows, positioning and padding will be added the the component contentContainer. |
-| `infiniteScroll` | `boolean` | No | - | Set this prop for lazy loading of the dropdown layout items. |
-| `loadMore` | `((page: number) => void)` | No | - | A callback called when more items are requested to be rendered. |
-| `hasMore` | `boolean` | No | - | Whether there are more items to be loaded. |
-| `markedOption` | `string \| number \| boolean` | No | - | Sets the default hover behavior when: 1. `false` means no default 2. `true` means to hover the first selectable option 3. Any number/string represents the id of option to hover |
-| `overflow` | `"visible" \| "hidden" \| "scroll" \| "auto"` | No | - | Set overflow of container |
-| `focusOnOption` | `string \| number` | No | - | Marks (not selects) and scrolls view to the option on opening the dropdown by option id |
-| `scrollToOption` | `string \| number` | No | - | Scrolls to the specified option when dropdown is opened without marking it |
-| `listType` | `"action" \| "select"` | No | - | Defines type of behavior applied in list |
-| `autoFocus` | `boolean` | No | - | Focus the element on mount (standard React input autoFocus) |
-| `scrollbar` | `"fixed" \| "overlay"` | No | - | Controls which type of scrollbar to render |
-| `listboxId` | `string` | No | - | Defines the id for the listbox |
-| `onDrillIn` | `((option: DropdownLayoutValueOption) => void)` | No | - | Called when the user presses ArrowRight on a hovered option. Use to move focus into an interactive child element (e.g. an actions menu). |
-| `onDrillOut` | `(() => void)` | No | - | Called when the user navigates back from a drilled-in child element (e.g. via ArrowLeft or Escape). Use to restore focus to the trigger input. |
-| `predicate` | `((option: DropdownLayoutValueOption) => boolean)` | No | - | Defines a custom function for options filtering |
-| `emptyStateMessage` | `ReactNode` | No | - | Defines a message to be displayed instead of options when no options exist or no options pass the predicate filter function. |
-| `autocomplete` | `string` | No | `'off'` | Sets the value of native autocomplete attribute (check the [HTML spec](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete) for possible values |
-| `inputElement` | `ReactElement<any, string \| JSXElementConstructor<any>>` | No | - | Use a customized input component instead of the default @wix /design-system `<Input/>` component |
-| `onManuallyInput` | `ManualInputFnSignature` | No | - | A callback which is called when the user performs a Submit-Action. Submit-Action triggers are: "Enter", "Tab", [typing any defined delimiters], Paste action. `onManuallyInput(values: Array<string>): void - The array of strings is the result of splitting the input value by the given delimiters |
-| `valueParser` | `((option: DropdownLayoutValueOption) => ReactNode \| RenderOptionFn)` | No | - | Function that receives an option, and should return the value to be displayed. |
-| `dropdownWidth` | `string` | No | `null` | Sets the width of the dropdown |
-| `dropdownOffsetLeft` | `string` | No | `'0'` | Sets the offset of the dropdown from the left |
-| `showOptionsIfEmptyInput` | `boolean` | No | `true` | Controls whether to show options if input is empty |
-| `highlight` | `boolean` | No | - | Mark in bold word parts based on search pattern |
-| `native` | `boolean` | No | `false` | Indicates whether to render using the native select element |
-| `popoverProps` | `PopoverCommonProps` | No | - | common popover props |
-| `onOptionsShow` | `(() => void)` | No | - | A callback which is called when options dropdown is shown |
-| `onOptionsHide` | `(() => void)` | No | - | A callback which is called when options dropdown is hidden |
-| `showDrawerOnMobile` | `boolean` | No | `true` | Controls whether to show drawer on mobile devices |
-| `id` | `string` | No | - | Assigns a unique identifier for the root element |
-| `role` | `string` | No | - | Specifies the role of the input element for accessibility |
-| `ariaControls` | `string` | No | - | Associate a control with the regions that it controls |
-| `ariaDescribedby` | `string` | No | - | Associate a region with its descriptions. Similar to aria-controls but instead associating descriptions to the region and description identifiers are separated with a space. |
-| `ariaLabel` | `string` | No | - | Define a string that labels the current element in case where a text label is not visible on the screen |
-| `autoSelect` | `boolean` | No | - | Automatically selects the entire input text |
-| `defaultValue` | `InputValue` | No | - | Defines the initial value of an input |
-| `disabled` | `boolean` | No | - | Specifies whether input should be disabled or not |
-| `status` | `"error" \| "warning" \| "loading"` | No | - | Specify the status of a field |
-| `statusMessage` | `ReactNode` | No | - | Defines the message to display on status icon hover. If not given or empty there will be no tooltip. |
-| `statusMessageTooltipProps` | `TooltipCommonProps` | No | - | Status message tooltip props |
-| `hideStatusSuffix` | `boolean` | No | - | Specifies whether status suffix should be hidden |
-| `forceFocus` | `boolean` | No | - | USED FOR TESTING - forces focus state on the input |
-| `forceHover` | `boolean` | No | - | USED FOR TESTING - forces hover state on the input |
-| `maxLength` | `number` | No | - | Sets the maximum number of characters that can be inserted to a field |
-| `menuArrow` | `boolean` | No | - | Specifies whether input should have a dropdown menu arrow on the right side |
-| `clearButton` | `boolean` | No | - | Displays clear button (X) on a non-empty input |
-| `focusOnClearClick` | `boolean` | No | - | Specifies whether to focus the field when clear button is clicked |
-| `name` | `string` | No | - | Reference element data when a form is submitted |
-| `border` | `"standard" \| "round" \| "bottomLine" \| "none"` | No | - | Control the border style of input |
-| `backgroundColor` | `string` | No | - | Sets the background color of the input. Accepts any CSS color value. |
-| `noLeftBorderRadius` | `boolean` | No | - | Specifies whether input shouldn't have rounded corners on its left |
-| `noRightBorderRadius` | `boolean` | No | - | Specifies whether input shouldn't have rounded corners on its right |
-| `onBlur` | `FocusEventHandler<HTMLInputElement>` | No | - | Defines a standard input onBlur callback |
-| `onChange` | `ChangeEventHandler<HTMLInputElement>` | No | - | Defines a standard input onChange callback |
-| `onClear` | `((event: MouseEvent<HTMLButtonElement, MouseEvent> \| KeyboardEvent<HTMLButtonElement>) => void)` | No | - | Displays clear button (X) on a non-empty input and calls a callback function |
-| `onCompositionChange` | `((isComposing: boolean) => void)` | No | - | Defines a callback function called on compositionstart/compositionend events |
-| `onEnterPressed` | `KeyboardEventHandler<HTMLInputElement>` | No | - | Defines a callback handler that is called when the user presses -enter- |
-| `onEscapePressed` | `KeyboardEventHandler<HTMLInputElement>` | No | - | Defines a callback handler that is called when the user presses -escape- |
-| `onFocus` | `FocusEventHandler<HTMLInputElement>` | No | - | Defines a standard input onFocus callback |
-| `onInputClicked` | `MouseEventHandler<HTMLInputElement \| HTMLDivElement>` | No | - | Defines a standard input onClick callback |
-| `onKeyDown` | `KeyboardEventHandler<HTMLInputElement>` | No | - | Defines a standard input onKeyDown callback |
-| `onKeyUp` | `KeyboardEventHandler<HTMLInputElement>` | No | - | Defines a standard input onKeyUp callback |
-| `onPaste` | `ClipboardEventHandler<HTMLInputElement>` | No | - | Defines a callback handler that is called when user pastes text from a clipboard (using a mouse or keyboard shortcut) |
-| `onCopy` | `ClipboardEventHandler<HTMLInputElement>` | No | - | Defines a callback handler that is called when user copies text to a clipboard (using a mouse or keyboard shortcut) |
-| `placeholder` | `string` | No | - | Sets a placeholder message to display |
-| `prefix` | `ReactNode` | No | - | Pass a component you want to show as the prefix of the input, e.g., text, icon |
-| `readOnly` | `boolean` | No | - | Specifies whether input is read only |
-| `disableEditing` | `boolean` | No | - | Restricts input editing |
-| `rtl` | `boolean` | No | - | Specifies text direction. If true, the text will be displayed from right to left |
-| `suffix` | `ReactNode` | No | - | Pass a component you want to show as the suffix of the input, e.g., text, icon |
-| `textOverflow` | `"clip" \| "ellipsis"` | No | - | Handles text overflow behavior. It can either `clip` (default) or display `ellipsis`. |
-| `tooltipPlacement` | `"auto" \| "auto-start" \| "auto-end" \| "top-start" \| "top" \| "top-end" \| "right-start" \| "right" \| "right-end" \| "bottom-end" \| "bottom" \| "bottom-start" \| "left-end" \| "left" \| "left-start"` | No | - | Controls placement of a status tooltip @deprecated use tooltipProps instead |
-| `type` | `string` | No | - | Specifies the type of `<input/>` element to display. Default is text. |
-| `value` | `string \| number` | No | - | Specifies the current value of the element |
-| `required` | `boolean` | No | - | Specifies whether input is mandatory |
-| `min` | `MinValue` | No | - | Sets a minimum value of an input. Similar to HTML5 min attribute. |
-| `max` | `MaxValue` | No | - | Sets a maximum value of an input. Similar to html5 max attribute. |
-| `step` | `number` | No | - | Specifies the interval between number values |
-| `customInput` | `Function \| ReactNode` | No | - | Render a custom input instead of the default html input tag |
-| `pattern` | `string` | No | - | Sets a pattern that typed value must match to be valid (regex) |
-| `inputRef` | `Ref<HTMLInputElement>` | No | - | Ref to the underlying `<input>` DOM element. Accepts callback and object refs. Use for input masking libraries such as `use-mask-input`. Memoize callback refs to avoid reattaching on every render. |
-| `clearButtonTooltipContent` | `ReactNode` | No | - | When provided hover will display a tooltip with content |
-| `clearButtonTooltipProps` | `TooltipCommonProps` | No | - | Clear button tooltip props |
-| `clearButtonAriaLabel` | `string` | No | - | Aria label for the clear button |
-| `inputElementRef` | `any` | No | - | Specifies reference of the input element |
-| `filter` | `Filter<V[]>` | Yes | - | A filter state object such as [ArrayFilter](./?path=/story/features-filter-factories--arrayfilter) |
-| `fieldType` | `"SHORT_TEXT" \| "LONG_TEXT" \| "NUMBER" \| "BOOLEAN" \| "DATE" \| "DATE_TIME" \| "DATETIME" \| "TIME" \| "URL" \| "EMAIL" \| "IMAGE" \| "MEDIA_GALLERY" \| "AUDIO" \| "DOCUMENT" \| "MULTI_DOCUMENT" \| "RICH_TEXT" \| "RICH_CONTENT" \| "REFERENCE" \| "MULTI_REFERENCE" \| "OBJECT" \| "ARRAY" \| "ADDRESS" \| "COLOR" \| "INTEGER" \| "DECIMAL" \| "CHECKBOX" \| "DROPDOWN" \| "FILES" \| "MULTI_SELECT"` | No | - | The field type string used to resolve a prefix icon for the filter. Cairo maps this to the appropriate icon internally. |
-| `layout` | `"button"` | No | - | Padding settings. If this prop it omitted, padding will exist on the sides of the filter.<br> <br> Supported values: <br> - `"button"`: Removes padding from the sides of the filter. |
-| `toolbarItemProps` | `{ label?: ReactNode; }` | No | - | Customizes the filter in the toolbar.<br> <br> Supported properties: <br> - `label`: [string] Prefix for the filter element. |
-| `toolbarTagProps` | `{ label?: string; }` | No | - | Customizes the filter tag in the toolbar.<br> <br> Supported properties: <br> - `label`: [string] Overrides the default filter name when filtered tag is shown. |
-| `initiallyOpen` | `boolean` | No | - | Indicates whether the filter should be visible by default in the filters panel |
-| `accordionItemProps` | `(AccordionItemType & { label?: string; })` | No | - | Customizes the filter [accordion](https://www.docs.wixdesignsystem.com/?path=/story/components-lists--accordion).<br> <br> Supported properties: <br> - `label`: [string] Accordion item title. You can also use `AccordionProps['items'][number].title` for more flexibility. <br> - Extends [AccordionProps['items'[number]](https://www.docs.wixdesignsystem.com/?path=/story/components-lists--accordion). |
-| `onAppliedFilterTagRemove` | `((item: V) => unknown)` | No | - | Callback that's run when a filter is removed by a visitor from the sub-toolbar. @param item |
-| `renderToolbarTag` | `((item: V) => Partial<TagListTag>)` | No | - | Customizes how the tag list in the sub-toolbar is rendered. <br><br> Extends [`TagListProps['tags'][number]`](https://www.docs.wixdesignsystem.com/?path=/story/components-lists-table--taglist). |
-| `sectionTitle` | `string` | No | - | Title for the section in the accordion. |
-| `selectedOptions` | `(string \| number)[]` | No | - | Specifies an array of selected options ids |
-| `onDeselect` | `((id: string \| number, option: DropdownLayoutValueOption) => void)` | No | - | Defines a callback function called on option deselect. Function receives the id of the unselected option as the first argument, and the actual option object as the second argument. |
-| `delimiter` | `string` | No | `', '` | Specifies the delimiter symbol to be displayed between the selected options in the input |
-| `enableSearch` | `boolean` | No | `false` | Sets whether to enable search in the dropdown |
-| `getSelectedOptionsText` | `((selectedOptionsCount: number) => string)` | No | - | Defines a callback function to get the text for the selected options |
-| `initialFetchTiming` | `"focus"` | No | `undefined - on component mount` | At which point the initial fetch of the filter collection data takes place. If this prop is omitted, it will take place on component mount.<br> <br> Supported values: <br> - `focus`: On the first visitor interaction with the filter component. |
+Read `dist/dts-bundle/components/MultiSelectCheckboxFilter.d.ts` for `MultiSelectCheckboxFilter`'s full prop list, with types and
+descriptions. They are not repeated here, so the bundle is the single source of truth.
+
+A one-line stub in that file is an answer, not a truncation: an empty body with a
+"Produced by" note means you get the value from that hook or factory rather than
+constructing it. `dist/dts-bundle/index.json` maps every name to its bundle path.
 

package/dist/docs/MultiSelectCollectionFilter.md

@@ -105,144 +105,12 @@ function EmptyState() {
 
 ## API
 
-### Extends
-
-[MultiSelectProps](https://www.docs.wixdesignsystem.com/?path=/story/components-form--multiselect)
-
 ### Props
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `collection` | `CollectionState<V, F>` | Yes | - | A collection state object to fetch the dropdown items.<br> A collection created using [useFilterCollection](./?path=/story/features-filter-hooks--usefiltercollection) or [useStaticListFilterCollection](./?path=/story/features-filter-hooks--usestaticlistfiltercollection) |
-| `renderItem` | `((item: V, index: number) => ListItem)` | No | - | A function that returns a [ListItemSelectProps](https://www.docs.wixdesignsystem.com/?path=/story/components-form-dropdownlistitems--listitemselect) (Optional) |
-| `onSelect` | `((option: DropdownLayoutValueOption) => void)` | No | - | A callback which is called when the user selects an option from the list. `onSelect(option: Option): void` - Option is the original option from the provided options prop. |
-| `size` | `"small" \| "tiny" \| "medium" \| "large"` | No | - | Controls the size of the input. Default value: `medium` |
-| `dataHook` | `string` | No | - | Applies a data-hook HTML attribute that can be used in the tests |
-| `className` | `string` | No | - | Specifies a CSS class name to be appended to the component's root element. |
-| `dropDirectionUp` | `boolean` | No | - | @deprecated |
-| `focusOnSelectedOption` | `boolean` | No | - | Scroll view to the selected option on opening the dropdown |
-| `onClose` | `(() => void)` | No | - | Callback function called whenever the user press the `Escape` keyboard. |
-| `onOptionMarked` | `((option: DropdownLayoutValueOption \| null, optionElementId?: string) => void)` | No | - | Callback function called whenever an option becomes focused (hovered/active). Receives the relevant option object from the original props.options array. |
-| `onOptionsNavigate` | `((option: DropdownLayoutValueOption \| null) => void)` | No | - | Callback function called whenever the user navigates to an option (via keyboard or mouse). Receives the relevant option object from the original props.options array, or null when navigation is cleared. |
-| `visible` | `boolean` | No | - | Should show or hide the component |
-| `selectedId` | `string \| number` | No | - | The id of the selected option in the list |
-| `tabIndex` | `number` | No | - | Indicates that element can be focused and where it participates in sequential keyboard navigation |
-| `onClickOutside` | `((e: TouchEvent \| MouseEvent) => void)` | No | - | @deprecated Do not use this prop. |
-| `fixedHeader` | `ReactNode` | No | - | A fixed header to the list |
-| `fixedFooter` | `ReactNode` | No | - | Adds a fixed footer container at the bottom of options list. |
-| `maxHeightPixels` | `string \| number` | No | - | Set the max height of the dropdownLayout in pixels |
-| `minWidthPixels` | `string \| number` | No | - | Set the min width of the dropdownLayout in pixels |
-| `withArrow` | `boolean` | No | - | @deprecated Do not use this prop. |
-| `closeOnSelect` | `boolean` | No | - | Closes list once list item is selected |
-| `onMouseEnter` | `MouseEventHandler<HTMLElement>` | No | - | Callback function called whenever the user entered with the mouse to the dropdown layout. |
-| `onMouseLeave` | `MouseEventHandler<HTMLElement>` | No | - | Callback function called whenever the user exited with the mouse from the dropdown layout. |
-| `onMouseDown` | `MouseEventHandler<HTMLElement>` | No | - | Callback function called whenever the user clicks the dropdown layout. |
-| `itemHeight` | `"big" \| "small"` | No | - | @deprecated Do not use this prop. |
-| `selectedHighlight` | `boolean` | No | - | Whether the selected option will be highlighted when dropdown reopened. |
-| `inContainer` | `boolean` | No | - | Whether the `<DropdownLayout/>` is in a container component. If `true`, some styles such as shadows, positioning and padding will be added the the component contentContainer. |
-| `infiniteScroll` | `boolean` | No | - | Set this prop for lazy loading of the dropdown layout items. |
-| `loadMore` | `((page: number) => void)` | No | - | A callback called when more items are requested to be rendered. |
-| `hasMore` | `boolean` | No | - | Whether there are more items to be loaded. |
-| `markedOption` | `string \| number \| boolean` | No | - | Sets the default hover behavior when: 1. `false` means no default 2. `true` means to hover the first selectable option 3. Any number/string represents the id of option to hover |
-| `overflow` | `"visible" \| "hidden" \| "scroll" \| "auto"` | No | - | Set overflow of container |
-| `focusOnOption` | `string \| number` | No | - | Marks (not selects) and scrolls view to the option on opening the dropdown by option id |
-| `scrollToOption` | `string \| number` | No | - | Scrolls to the specified option when dropdown is opened without marking it |
-| `listType` | `"action" \| "select"` | No | - | Defines type of behavior applied in list |
-| `autoFocus` | `boolean` | No | - | Focus the element on mount (standard React input autoFocus) |
-| `scrollbar` | `"fixed" \| "overlay"` | No | - | Controls which type of scrollbar to render |
-| `listboxId` | `string` | No | - | Defines the id for the listbox |
-| `onDrillIn` | `((option: DropdownLayoutValueOption) => void)` | No | - | Called when the user presses ArrowRight on a hovered option. Use to move focus into an interactive child element (e.g. an actions menu). |
-| `onDrillOut` | `(() => void)` | No | - | Called when the user navigates back from a drilled-in child element (e.g. via ArrowLeft or Escape). Use to restore focus to the trigger input. |
-| `predicate` | `((option: DropdownLayoutValueOption) => boolean)` | No | - | Callback predicate for the filtering options function |
-| `emptyStateMessage` | `ReactNode` | No | - | Defines a message to be displayed instead of options when no options exist or no options pass the predicate filter function. |
-| `autocomplete` | `string` | No | `'off'` | Sets the value of native autocomplete attribute (check the [HTML spec](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete) for possible values |
-| `inputElement` | `ReactElement<any, string \| JSXElementConstructor<any>>` | No | - | Use a customized input component instead of the default @wix /design-system `<Input/>` component |
-| `onManuallyInput` | `((values: string[]) => void)` | No | - | A callback which is called when the user performs a Submit-Action. Submit-Action triggers are: "Enter", "Tab", [typing any defined delimiters], Paste action. `onManuallyInput(values: Array<string>): void - The array of strings is the result of splitting the input value by the given delimiters |
-| `valueParser` | `((option: DropdownLayoutValueOption) => ReactNode \| RenderOptionFn)` | No | - | Function that receives an option, and should return the value to be displayed. |
-| `dropdownWidth` | `string` | No | `null` | Sets the width of the dropdown |
-| `dropdownOffsetLeft` | `string` | No | `'0'` | Sets the offset of the dropdown from the left |
-| `showOptionsIfEmptyInput` | `boolean` | No | `true` | Controls whether to show options if input is empty |
-| `highlight` | `boolean` | No | - | Mark in bold word parts based on search pattern |
-| `native` | `boolean` | No | `false` | Indicates whether to render using the native select element |
-| `popoverProps` | `PopoverCommonProps` | No | - | common popover props |
-| `onOptionsShow` | `(() => void)` | No | - | A callback which is called when options dropdown is shown |
-| `onOptionsHide` | `(() => void)` | No | - | A callback which is called when options dropdown is hidden |
-| `showDrawerOnMobile` | `boolean` | No | `true` | Controls whether to show drawer on mobile devices |
-| `id` | `string` | No | - | Assigns a unique identifier for the root element |
-| `role` | `string` | No | - | Specifies the role of the input element for accessibility |
-| `ariaControls` | `string` | No | - | Associate a control with the regions that it controls |
-| `ariaDescribedby` | `string` | No | - | Associate a region with its descriptions. Similar to aria-controls but instead associating descriptions to the region and description identifiers are separated with a space. |
-| `ariaLabel` | `string` | No | - | Define a string that labels the current element in case where a text label is not visible on the screen |
-| `autoSelect` | `boolean` | No | - | Automatically selects the entire input text |
-| `defaultValue` | `InputValue` | No | - | Defines the initial value of an input |
-| `disabled` | `boolean` | No | - | When set to true this component is disabled |
-| `status` | `"error" \| "warning" \| "loading"` | No | - | The status of the input |
-| `statusMessage` | `ReactNode` | No | - | Text to be shown in the status icon tooltip |
-| `statusMessageTooltipProps` | `TooltipCommonProps` | No | - | Status message tooltip props |
-| `hideStatusSuffix` | `boolean` | No | - | Specifies whether status suffix should be hidden |
-| `forceFocus` | `boolean` | No | - | USED FOR TESTING - forces focus state on the input |
-| `forceHover` | `boolean` | No | - | USED FOR TESTING - forces hover state on the input |
-| `maxLength` | `number` | No | - | Sets the maximum number of characters that can be inserted to a field |
-| `menuArrow` | `boolean` | No | - | Specifies whether input should have a dropdown menu arrow on the right side |
-| `clearButton` | `boolean` | No | - | Displays clear button (X) on a non-empty input |
-| `focusOnClearClick` | `boolean` | No | - | Specifies whether to focus the field when clear button is clicked |
-| `name` | `string` | No | - | Reference element data when a form is submitted |
-| `border` | `"standard" \| "round" \| "bottomLine" \| "none"` | No | - | Control the border style of input |
-| `backgroundColor` | `string` | No | - | Sets the background color of the input. Accepts any CSS color value. |
-| `noLeftBorderRadius` | `boolean` | No | - | Specifies whether input shouldn't have rounded corners on its left |
-| `noRightBorderRadius` | `boolean` | No | - | Specifies whether input shouldn't have rounded corners on its right |
-| `onBlur` | `FocusEventHandler<HTMLInputElement>` | No | - | Defines a standard input onBlur callback |
-| `onChange` | `ChangeEventHandler<HTMLInputElement>` | No | - | Defines a standard input onChange callback |
-| `onClear` | `((event: MouseEvent<HTMLButtonElement, MouseEvent> \| KeyboardEvent<HTMLButtonElement>) => void)` | No | - | Displays clear button (X) on a non-empty input and calls a callback function |
-| `onCompositionChange` | `((isComposing: boolean) => void)` | No | - | Defines a callback function called on compositionstart/compositionend events |
-| `onEnterPressed` | `KeyboardEventHandler<HTMLInputElement>` | No | - | Defines a callback handler that is called when the user presses -enter- |
-| `onEscapePressed` | `KeyboardEventHandler<HTMLInputElement>` | No | - | Defines a callback handler that is called when the user presses -escape- |
-| `onFocus` | `FocusEventHandler<HTMLInputElement>` | No | - | Defines a standard input onFocus callback |
-| `onInputClicked` | `MouseEventHandler<HTMLInputElement \| HTMLDivElement>` | No | - | Defines a standard input onClick callback |
-| `onKeyDown` | `KeyboardEventHandler<HTMLInputElement>` | No | - | Defines a standard input onKeyDown callback |
-| `onKeyUp` | `KeyboardEventHandler<HTMLInputElement>` | No | - | Defines a standard input onKeyUp callback |
-| `onPaste` | `ClipboardEventHandler<HTMLInputElement>` | No | - | Defines a callback handler that is called when user pastes text from a clipboard (using a mouse or keyboard shortcut) |
-| `onCopy` | `ClipboardEventHandler<HTMLInputElement>` | No | - | Defines a callback handler that is called when user copies text to a clipboard (using a mouse or keyboard shortcut) |
-| `placeholder` | `string` | No | - | Sets a placeholder message to display |
-| `prefix` | `ReactNode` | No | - | Pass a component you want to show as the prefix of the input, e.g., text, icon |
-| `readOnly` | `boolean` | No | - | Specifies whether input should be read only |
-| `disableEditing` | `boolean` | No | - | Restricts input editing |
-| `rtl` | `boolean` | No | - | Specifies text direction. If true, the text will be displayed from right to left |
-| `suffix` | `ReactNode` | No | - | Pass a component you want to show as the suffix of the input, e.g., text, icon |
-| `textOverflow` | `"clip" \| "ellipsis"` | No | - | Handles text overflow behavior. It can either `clip` (default) or display `ellipsis`. |
-| `tooltipPlacement` | `"auto" \| "auto-start" \| "auto-end" \| "top-start" \| "top" \| "top-end" \| "right-start" \| "right" \| "right-end" \| "bottom-end" \| "bottom" \| "bottom-start" \| "left-end" \| "left" \| "left-start"` | No | - | Controls placement of a status tooltip @deprecated use tooltipProps instead |
-| `type` | `string` | No | - | Specifies the type of `<input/>` element to display. Default is text. |
-| `value` | `string \| number` | No | - | Specifies the current value of the element |
-| `required` | `boolean` | No | - | Specifies whether input is mandatory |
-| `min` | `MinValue` | No | - | Sets a minimum value of an input. Similar to HTML5 min attribute. |
-| `max` | `MaxValue` | No | - | Sets a maximum value of an input. Similar to html5 max attribute. |
-| `step` | `number` | No | - | Specifies the interval between number values |
-| `customInput` | `Function \| ReactNode` | No | - | Render a custom input instead of the default html input tag |
-| `pattern` | `string` | No | - | Sets a pattern that typed value must match to be valid (regex) |
-| `inputRef` | `Ref<HTMLInputElement>` | No | - | Ref to the underlying `<input>` DOM element. Accepts callback and object refs. Use for input masking libraries such as `use-mask-input`. Memoize callback refs to avoid reattaching on every render. |
-| `clearButtonTooltipContent` | `ReactNode` | No | - | When provided hover will display a tooltip with content |
-| `clearButtonTooltipProps` | `TooltipCommonProps` | No | - | Clear button tooltip props |
-| `clearButtonAriaLabel` | `string` | No | - | Aria label for the clear button |
-| `inputElementRef` | `any` | No | - | Specifies reference of the input element |
-| `filter` | `Filter<V[]>` | Yes | - | A filter state object such as [ArrayFilter](./?path=/story/features-filter-factories--arrayfilter) |
-| `fieldType` | `"SHORT_TEXT" \| "LONG_TEXT" \| "NUMBER" \| "BOOLEAN" \| "DATE" \| "DATE_TIME" \| "DATETIME" \| "TIME" \| "URL" \| "EMAIL" \| "IMAGE" \| "MEDIA_GALLERY" \| "AUDIO" \| "DOCUMENT" \| "MULTI_DOCUMENT" \| "RICH_TEXT" \| "RICH_CONTENT" \| "REFERENCE" \| "MULTI_REFERENCE" \| "OBJECT" \| "ARRAY" \| "ADDRESS" \| "COLOR" \| "INTEGER" \| "DECIMAL" \| "CHECKBOX" \| "DROPDOWN" \| "FILES" \| "MULTI_SELECT"` | No | - | The field type string used to resolve a prefix icon for the filter. Cairo maps this to the appropriate icon internally. |
-| `layout` | `"button"` | No | - | Padding settings. If this prop it omitted, padding will exist on the sides of the filter.<br> <br> Supported values: <br> - `"button"`: Removes padding from the sides of the filter. |
-| `toolbarItemProps` | `{ label?: ReactNode; }` | No | - | Customizes the filter in the toolbar.<br> <br> Supported properties: <br> - `label`: [string] Prefix for the filter element. |
-| `toolbarTagProps` | `{ label?: string; }` | No | - | Customizes the filter tag in the toolbar.<br> <br> Supported properties: <br> - `label`: [string] Overrides the default filter name when filtered tag is shown. |
-| `initiallyOpen` | `boolean` | No | - | Indicates whether the filter should be visible by default in the filters panel |
-| `accordionItemProps` | `(AccordionItemType & { label?: string; })` | No | - | Customizes the filter [accordion](https://www.docs.wixdesignsystem.com/?path=/story/components-lists--accordion).<br> <br> Supported properties: <br> - `label`: [string] Accordion item title. You can also use `AccordionProps['items'][number].title` for more flexibility. <br> - Extends [AccordionProps['items'[number]](https://www.docs.wixdesignsystem.com/?path=/story/components-lists--accordion). |
-| `onAppliedFilterTagRemove` | `((item: V) => unknown)` | No | - | Callback that's run when a filter is removed by a visitor from the sub-toolbar. @param item |
-| `renderToolbarTag` | `((item: V) => Partial<TagListTag>)` | No | - | Customizes how the tag list in the sub-toolbar is rendered. <br><br> Extends [`TagListProps['tags'][number]`](https://www.docs.wixdesignsystem.com/?path=/story/components-lists-table--taglist). |
-| `sectionTitle` | `string` | No | - | Title for the section in the accordion. |
-| `tags` | `MultiSelectTag[]` | No | - | Optional list of strings that are selected suggestions. |
-| `maxNumRows` | `number` | No | - | Max number of visible lines |
-| `delimiters` | `string[]` | No | - | Delimiters that will trigger a Submit action (call to onTagsAdded). By default it is [,] but also enter and tab keys work. |
-| `mode` | `"select"` | No | - | Passing 'select' will render a readOnly input with menuArrow suffix * |
-| `onReorder` | `OnReorderFn` | No | - | When this callback function is set, tags can be reordered. The expected callback signature is `onReorder({addedIndex: number, removedIndex: number}) => void` * |
-| `customSuffix` | `ReactNode` | No | - | A node to display as input suffix when the dropdown is closed |
-| `customPrefix` | `ReactNode` | No | - | A node to display as input prefix when the dropdown is closed |
-| `onRemoveTag` | `((tagId: string) => void)` | No | - | A callback function to be called when a tag should be removed. The expected callback signature is `onRemoveTag(tagId: number \| string) => void.` |
-| `clearOnBlur` | `boolean` | No | `true` | When set to false, the input will not be cleared on blur |
-| `acceptOnBlur` | `boolean` | No | - | When set to true, the input will be submitted as new tag on blur |
-| `initialFetchTiming` | `"focus"` | No | `undefined - on component mount` | At which point the initial fetch of the filter collection data takes place. If this prop is omitted, it will take place on component mount.<br> <br> Supported values: <br> - `focus`: On the first visitor interaction with the filter component. |
+Read `dist/dts-bundle/components/MultiSelectCollectionFilter.d.ts` for `MultiSelectCollectionFilter`'s full prop list, with types and
+descriptions. They are not repeated here, so the bundle is the single source of truth.
+
+A one-line stub in that file is an answer, not a truncation: an empty body with a
+"Produced by" note means you get the value from that hook or factory rather than
+constructing it. `dist/dts-bundle/index.json` maps every name to its bundle path.
 

package/dist/docs/NestedTable/drag-and-drop.tsx

@@ -0,0 +1,107 @@
+import { Page } from '@wix/design-system';
+import React from 'react';
+import {
+  queryContacts,
+  moveContact,
+} from '@wix/ambassador-contacts-v4-contact/http';
+import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
+import {
+  PageWrapper,
+  NestedTable,
+  useNestedTable,
+  createNestedTableSingleEntityLevels,
+  useCreateCollection,
+  Filter,
+  stringsArrayFilter,
+  NestedTableDragAndDrop,
+} from '@wix/patterns';
+import { useHttpClient } from '@wix/yoshi-flow-bm';
+
+type ContactFilters = {
+  parentId: Filter<string[]>;
+};
+
+function SingleEntityNestedTableDragAndDrop() {
+  const httpClient = useHttpClient();
+
+  const createCollection = useCreateCollection();
+
+  const state = useNestedTable({
+    columns: [
+      {
+        id: 'lastSeen',
+        title: 'Last Seen',
+      },
+    ],
+    levels: createNestedTableSingleEntityLevels<
+      string,
+      Contact,
+      ContactFilters
+    >(5, {
+      createCollection: (params) => {
+        const collection = createCollection<Contact, ContactFilters>({
+          queryName: 'SingleEntityNestedTableDragAndDrop',
+          filters: {
+            parentId: stringsArrayFilter(),
+          },
+          fetchData: (query) => {
+            const { limit, offset, search, filters } = query;
+            return httpClient
+              .request(
+                queryContacts({
+                  query: { paging: { limit, offset }, filter: filters },
+                  search,
+                }),
+              )
+              .then((res) => {
+                const {
+                  data: { contacts = [], pagingMetadata = {} },
+                } = res;
+                return {
+                  items: contacts,
+                  total: pagingMetadata.total,
+                };
+              });
+          },
+          fetchErrorMessage: ({ err }) => String(err),
+        });
+
+        return {
+          collection,
+          parentFilter: collection.filters.parentId,
+        };
+      },
+      parentKey: (item) => item.parentId,
+      setParent: (item, parentId) => ({ ...item, parentId }),
+      dragAndDropSubmit: async (event) => {
+        await httpClient.request(
+          moveContact({
+            contactId: event.from.item.id,
+            insertAfterId: event.after
+              ? (event.after.item as Contact).id
+              : null,
+            parentId: event.parentId,
+          }),
+        );
+      },
+      columns: {
+        lastSeen: (item) => String(item.lastSeen?.toISOString()),
+      },
+      renderMainColumn: (item) => ({
+        subtitle: item.level,
+      }),
+    }),
+  });
+
+  return (
+    <PageWrapper>
+      <Page height="400px">
+        <Page.Header title="Contacts" />
+
+        <Page.Content>
+          <NestedTable state={state} dragAndDrop={NestedTableDragAndDrop} />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}

package/dist/docs/NestedTable/filters.tsx

@@ -0,0 +1,192 @@
+import { Page } from '@wix/design-system';
+import React from 'react';
+import { contacts } from '@wix/crm';
+import { subDays } from 'date-fns';
+import {
+  PageWrapper,
+  NestedTable,
+  useNestedTable,
+  createNestedTableLevel,
+  useCreateCollection,
+  Filter,
+  stringsArrayFilter,
+  CollectionToolbarFilters,
+  idNameArrayFilter,
+  SingleSelectFilter,
+  useStaticListFilterCollection,
+  OffsetQuery,
+} from '@wix/patterns';
+
+interface Duration {
+  id: string;
+  name: string;
+  days: number | null;
+}
+
+type NestedTableFilters = {
+  level?: Filter<string[]>;
+  lastActivity?: Filter<Duration[]>;
+};
+
+type Category = {
+  id: string;
+  name: string;
+};
+
+function VariousEntitiesNestedTable() {
+  const ALL_CATEGORIES = [
+    { id: 'Beginner', name: 'Beginner' },
+    { id: 'Amateur', name: 'Amateur' },
+    { id: 'Semi-Pro', name: 'Semi-Pro' },
+    { id: 'Professional', name: 'Professional' },
+    { id: 'World Class', name: 'World Class' },
+    { id: 'Legendary', name: 'Legendary' },
+    { id: 'Ultimate', name: 'Ultimate' },
+  ];
+
+  const buildQuery = (query: OffsetQuery<NestedTableFilters>) => {
+    const { filters, search, limit, offset } = query;
+    let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
+
+    if (search) {
+      queryBuilder = queryBuilder.startsWith('info.name.first', search);
+    }
+
+    if (filters.level) {
+      queryBuilder = queryBuilder.in('info.jobTitle', filters.level);
+    }
+
+    const lastActivityDays = filters.lastActivity?.[0]?.days;
+    if (lastActivityDays) {
+      queryBuilder = queryBuilder.gt(
+        'lastActivity.activityDate',
+        subDays(new window.Date(), lastActivityDays),
+      );
+    }
+
+    return queryBuilder;
+  };
+
+  const createCollection = useCreateCollection();
+
+  const [filters] = React.useState(() => ({
+    lastActivity: idNameArrayFilter<Duration>(),
+  }));
+
+  const state = useNestedTable({
+    filters,
+    fetchAllLimit: 100,
+    columns: [
+      {
+        id: 'lastActivity',
+        title: 'Last Activity',
+      },
+    ],
+    levels: [
+      createNestedTableLevel({
+        createCollection: () => {
+          const collection = createCollection<Category, NestedTableFilters>({
+            filters,
+            queryName: 'VariousEntitiesNestedTable-levels',
+            fetchData: async (query) => {
+              if (!query.filters.lastActivity) {
+                return {
+                  items: ALL_CATEGORIES,
+                };
+              }
+
+              // The following code should be done on the server on a real application
+              const queryBuilder = buildQuery(query);
+              const contactsResponse = await queryBuilder.find();
+              const fetchedContacts = contactsResponse.items;
+
+              return Promise.resolve({
+                items: ALL_CATEGORIES.filter((category) =>
+                  fetchedContacts.some(
+                    (contact) => contact.info?.jobTitle === category.id,
+                  ),
+                ),
+              });
+            },
+
+            fetchErrorMessage: ({ err }) => String(err),
+          });
+
+          return {
+            collection,
+          };
+        },
+        parentKey: () => undefined,
+      }),
+      createNestedTableLevel({
+        createCollection: (params) => {
+          const collection = createCollection<
+            contacts.Contact,
+            NestedTableFilters
+          >({
+            queryName: 'VariousEntitiesNestedTable-contacts',
+            filters: {
+              ...filters,
+              level: stringsArrayFilter(),
+            },
+            itemKey: (item) => item._id as string,
+            itemName: (item) => item.info?.name as string,
+            fetchData: async (query) => {
+              const queryBuilder = buildQuery(query);
+              const contactsResponse = await queryBuilder.find();
+              const fetchedContacts = contactsResponse.items;
+              return { items: fetchedContacts };
+            },
+            fetchErrorMessage: ({ err }) => String(err),
+          });
+
+          return {
+            collection,
+            parentFilter: collection.filters.level,
+          };
+        },
+        parentKey: (item) => item.info?.jobTitle,
+        columns: {
+          lastActivity: (item) =>
+            item.lastActivity?.activityDate?.toLocaleString(),
+        },
+        renderMainColumn: (item) => ({
+          title: `${item.info?.name?.first} ${item.info?.name?.last}`,
+        }),
+      }),
+    ],
+  });
+
+  const lastActivityCollection = useStaticListFilterCollection(
+    filters.lastActivity,
+    [
+      { id: 'w', name: 'Week', days: 7 },
+      { id: 'm', name: 'Month', days: 30 },
+      { id: 'y', name: 'Year', days: 365 },
+      { id: 'o', name: 'Other', days: null },
+    ],
+  );
+
+  return (
+    <PageWrapper>
+      <Page height="400px">
+        <Page.Header title="Contacts" />
+        <Page.Content>
+          <NestedTable
+            state={state}
+            filters={
+              <CollectionToolbarFilters>
+                <SingleSelectFilter
+                  filter={filters.lastActivity}
+                  placeholder="Select Last Activity"
+                  accordionItemProps={{ label: 'Last Activity' }}
+                  collection={lastActivityCollection}
+                />
+              </CollectionToolbarFilters>
+            }
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}