@wix/patterns 1.375.0 → 1.378.0

package/dist/docs/MultiSelectCollectionFilter.md

@@ -115,6 +115,7 @@ function EmptyState() {
 |------|------|----------|---------|-------------|
 | `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. |
@@ -128,11 +129,11 @@ function EmptyState() {
 | `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 |
+| `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 DropdownLayout on option selection |
+| `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. |
@@ -152,7 +153,21 @@ function EmptyState() {
 | `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. |
-| `autocomplete` | `string` | No | - | 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 |
+| `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 |
@@ -160,9 +175,9 @@ function EmptyState() {
 | `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. |
+| `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 |
@@ -189,8 +204,9 @@ function EmptyState() {
 | `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 |
+| `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 |
@@ -216,5 +232,15 @@ function EmptyState() {
 | `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<Omit<TagProps, "size" \| "onRemove">>)` | 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. |
 

package/dist/docs/PickerContent.md

@@ -110,6 +110,30 @@ export function PickerModalExample() {
 | `customMaxSelectionLabel` | `((_: { num: number; max: number; }) => string)` | No | - | Function that returns label for multi selection like: '2 items selected (24 max)` This function accepts argument {num: number, max: number} |
 | `renderCustomNotification` | `((data: { selected?: number; total?: number; }) => ReactElement<FloatingNotificationProps, typeof FloatingNotification>) \| undefined` | No | - | Function that returns custom notification that will be displayed in the picker modal. Useful to describe additional information about the selection (for instance how to increase limit of selected items). @param data.selected - number of selected items @param data.total - total number of items |
 | `showSelectedCount` | `boolean` | No | - | Displays count of selected items in <CustomModalLayout /> `sideActions` |
+| `title` | `ReactNode` | No | - | Sets text title for the modal; can be used in conjunction with other components |
+| `subtitle` | `ReactNode` | No | - | Sets text subtitle for the modal; can be used in conjunction with other components |
+| `content` | `ReactNode` | No | - | Contains all modal's content in its middle area. `<CustomModalLayout/>` children are passed as `content`, too. |
+| `primaryButtonText` | `ReactNode` | No | - | Sets text label or other content (e.g., <Loader/>) for the primary button |
+| `primaryButtonProps` | `Omit<ButtonProps, "dataHook">` | No | - | Passes on any `<Button/>` properties on the primary button |
+| `primaryButtonOnClick` | `(() => void)` | No | - | Defines a call-back function after user clicks on the primary button |
+| `primaryButtonTooltipProps` | `(TooltipCommonProps & { content: ReactNode; })` | No | - | Passes on any `<Tooltip/>` properties on the primary button tooltip |
+| `secondaryButtonText` | `ReactNode` | No | - | Sets text label for the secondary button |
+| `secondaryButtonProps` | `Omit<ButtonProps, "dataHook">` | No | - | Passes on any `<Button/>` properties on the secondary button |
+| `secondaryButtonOnClick` | `(() => void)` | No | - | Defines a call-back function after user clicks on the secondary button |
+| `actionsSize` | `"small" \| "tiny" \| "medium" \| "large"` | No | - | Sets the size of action buttons |
+| `sideActions` | `ReactNode` | No | - | Contains a checkbox or other components at the start of the footer |
+| `footnote` | `ReactNode` | No | - | Renders supplementary text or other components at the bottom of the modal |
+| `footnoteSkin` | `"light" \| "neutral"` | No | - | Sets the look and feel of the footnote |
+| `width` | `Width<string \| number>` | No | - | Fixes the width of component; if content area is wider than `width`, it scrolls horizontally |
+| `maxWidth` | `MaxWidth<string \| number>` | No | - | Sets the maximum width of component; if content area is longer than maxWidth, it scrolls horizontally |
+| `height` | `Height<string \| number>` | No | - | Fixes the height of component |
+| `maxHeight` | `MaxHeight<string \| number>` | No | - | Sets the maximum height of component; if content area is longer than maxHeight, it scrolls vertically |
+| `removeContentPadding` | `boolean` | No | - | Removes 30 px left and right padding from the content area |
+| `showHeaderDivider` | `boolean \| "auto"` | No | - | Controls visibility of a header divider. When set to `auto`, it is shown only when scroll position is greater than 0. When set to `true`, it is always visible, and when set to `false`, it is always hidden. |
+| `showFooterDivider` | `boolean \| "auto"` | No | - | Controls visibility of a footer divider. When set to `auto`, it is shown up until content is scrolled to the very bottom. When set to `true`, it is always visible, and when set to `false`, it is always hidden. |
+| `overflowY` | `"visible" \| "hidden" \| "scroll" \| "auto" \| "overlay" \| "none" \| "clip" \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "-moz-hidden-unscrollable"` | No | - | Determines what happens when content overflows component vertically. Value 'none' will be removed in next major, use "visible" value instead. |
+| `style` | `CSSProperties` | No | - | Sets object of CSS styles |
+| `theme` | `"standard" \| "premium" \| "destructive"` | No | - | @deprecated use skin prop instead |
 | `className` | `string` | No | - | Specifies a CSS class name to be appended to the component’s root element. |
 | `dataHook` | `string` | No | - | Applies a data-hook HTML attribute to be used in the tests. |
 | `closeButtonProps` | `ModalCloseButtonProps` | No | - | Close button props. |

package/dist/docs/PickerModal.md

@@ -644,6 +644,30 @@ Integrating with `PickerModal` is usually done by the following steps
 | `state` | `PickerModalState<T, F>` | Yes | - | State object created with [`usePickerModal`](./?path=/story/base-components-collections-picker-hooks--usepickermodal) |
 | `renderError` | `(params: { err: unknown; isOnline: boolean; }) => ReactElement<any, string \| JSXElementConstructor<any>>` | Yes | - | A component to be rendered in the modal content when there's a failure fetching the data @param params @param params.err - The original failure error object @param params.isOnline - Indicates whether internet connection is available or not |
 | `multiple` | `MultipleSelection` | No | - | Limits the number of items that can be selected.<br> Either a boolean or a number. A number indicates the maximum number of selections, `true` indicates no limit, `false` indicates only 1 item (radio button will be shown instead of checkboxes) |
+| `title` | `ReactNode` | No | - | Sets text title for the modal; can be used in conjunction with other components |
+| `subtitle` | `ReactNode` | No | - | Sets text subtitle for the modal; can be used in conjunction with other components |
+| `content` | `ReactNode` | No | - | Contains all modal's content in its middle area. `<CustomModalLayout/>` children are passed as `content`, too. |
+| `primaryButtonText` | `ReactNode` | No | - | Sets text label or other content (e.g., <Loader/>) for the primary button |
+| `primaryButtonProps` | `Omit<ButtonProps, "dataHook">` | No | - | Passes on any `<Button/>` properties on the primary button |
+| `primaryButtonOnClick` | `(() => void)` | No | - | Defines a call-back function after user clicks on the primary button |
+| `primaryButtonTooltipProps` | `(TooltipCommonProps & { content: ReactNode; })` | No | - | Passes on any `<Tooltip/>` properties on the primary button tooltip |
+| `secondaryButtonText` | `ReactNode` | No | - | Sets text label for the secondary button |
+| `secondaryButtonProps` | `Omit<ButtonProps, "dataHook">` | No | - | Passes on any `<Button/>` properties on the secondary button |
+| `secondaryButtonOnClick` | `(() => void)` | No | - | Defines a call-back function after user clicks on the secondary button |
+| `actionsSize` | `"small" \| "tiny" \| "medium" \| "large"` | No | - | Sets the size of action buttons |
+| `sideActions` | `ReactNode` | No | - | Contains a checkbox or other components at the start of the footer |
+| `footnote` | `ReactNode` | No | - | Renders supplementary text or other components at the bottom of the modal |
+| `footnoteSkin` | `"light" \| "neutral"` | No | - | Sets the look and feel of the footnote |
+| `width` | `Width<string \| number>` | No | - | Fixes the width of component; if content area is wider than `width`, it scrolls horizontally |
+| `maxWidth` | `MaxWidth<string \| number>` | No | - | Sets the maximum width of component; if content area is longer than maxWidth, it scrolls horizontally |
+| `height` | `Height<string \| number>` | No | - | Fixes the height of component |
+| `maxHeight` | `MaxHeight<string \| number>` | No | - | Sets the maximum height of component; if content area is longer than maxHeight, it scrolls vertically |
+| `removeContentPadding` | `boolean` | No | - | Removes 30 px left and right padding from the content area |
+| `showHeaderDivider` | `boolean \| "auto"` | No | - | Controls visibility of a header divider. When set to `auto`, it is shown only when scroll position is greater than 0. When set to `true`, it is always visible, and when set to `false`, it is always hidden. |
+| `showFooterDivider` | `boolean \| "auto"` | No | - | Controls visibility of a footer divider. When set to `auto`, it is shown up until content is scrolled to the very bottom. When set to `true`, it is always visible, and when set to `false`, it is always hidden. |
+| `overflowY` | `"visible" \| "hidden" \| "scroll" \| "auto" \| "overlay" \| "none" \| "clip" \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "-moz-hidden-unscrollable"` | No | - | Determines what happens when content overflows component vertically. Value 'none' will be removed in next major, use "visible" value instead. |
+| `style` | `CSSProperties` | No | - | Sets object of CSS styles |
+| `theme` | `"standard" \| "premium" \| "destructive"` | No | - | @deprecated use skin prop instead |
 | `className` | `string` | No | - | Specifies a CSS class name to be appended to the component’s root element. |
 | `dataHook` | `string` | No | - | Applies a data-hook HTML attribute to be used in the tests. |
 | `closeButtonProps` | `ModalCloseButtonProps` | No | - | Close button props. |

package/dist/docs/SingleSelectFilter.md

@@ -308,7 +308,7 @@ function CustomRenderItem() {
 | `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 |
+| `selectedId` | `string \| number` | No | - | Specifies selected option by its id. |
 | `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 |
@@ -316,12 +316,12 @@ function CustomRenderItem() {
 | `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 DropdownLayout on option selection |
+| `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 | - | Whether the selected option will be highlighted when dropdown reopened. |
+| `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. |
@@ -336,7 +336,19 @@ function CustomRenderItem() {
 | `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. |
-| `autocomplete` | `string` | No | - | 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 |
+| `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 |
@@ -374,6 +386,7 @@ function CustomRenderItem() {
 | `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 |
@@ -399,5 +412,7 @@ function CustomRenderItem() {
 | `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<Omit<TagProps, "size" \| "onRemove">>)` | 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. |
+| `initialSelectedId` | `undefined` | No | - | An initial selected option id. (Implies Uncontrolled mode) |
+| `allowTextSelection` | `boolean` | No | `true` | Controls whether a user can select a text of a selected value. |
 | `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. |
 

package/dist/docs/Table.md

@@ -1003,6 +1003,7 @@ function UseExternalDataSource() {
 | `checkboxTooltipContent` | `((rowData: KeyedItem<T>) => string)` | No | - | A function that receives the item of the row and returns a string for tooltip content. |
 | `bulkActionToolbar` | `BulkActionToolbarRenderProp<T, F>` | No | - | Render a custom toolbar when more than 1 item is selected.<br> The function accepts the following parameters * `selectedValues`: The items that were checked via the selection column * `uncheckedValues`: The items that were unchecked via the selection column * `allSelected`: Indicates whether the "Select All" checkbox is checked * `openModal`: Opens the modal that contains the component from `bulkActionModal` render prop * `clearSelection`: Clears all existing selection, call this after the action on the selected items was done * `total`: Total items in the server (taken from [`fetchData`](./?path=/story/common-hooks--usecollection) return value). * `openConfirmModal`: Opens a `<MessageModalLayout/>` to confirm an action about to be applied on the selected items. * `query`: ComputedQuery<F> - Representation of the current paging, sorting & filtering applied. Usually for using together with bulk action such as `updateAll` and `deleteAll` > When passed, enables `showSelection` by default. |
 | `bulkActionModal` | `BulkActionModalRenderProp<T, F>` | No | - | Opens a modal from the [`MultiBulkActionToolbar`](./?path=/story/features-actions-bulk-actions--multibulkactiontoolbar). Supported parameters: + `selectedValues`: Selected item values. + `uncheckedValues`: Unselected item values. + `isSelectAll`: [bool] Whether the **Select All** option is selected. + `closeModal`: Closes the modal. + `query`: [object] Instance of [ComputedQuery](./?path=/story/common-types--computedquery) that represents the query that resulted in an empty state. Representation of the current paging, sorting and filtering applied. Usually for using together with bulk action such as `updateAll` and `deleteAll`. |
+| `dataHook` | `string` | No | - | Applies a data-hook HTML attribute to be used in the tests |
 | `search` | `boolean \| FilterElement<any> \| CollectionSearchElement` | No | `true` | Displays a search input on the right side of the table toolbar.<br> <br> Accepts a boolean or a custom React element as a parameter. When passing `false`, no search input is displayed. |
 | `title` | `ToolbarTitleElement` | No | - | Displays a title at the left of a toolbar. Accepts a [ToolbarTitle](./?path=/story/features-display-toolbar--toolbartitle) component. |
 | `errorState` | `((err: unknown, params: { isOnline: boolean; retry: () => void; }) => ReactElement<any, string \| JSXElementConstructor<any>>)` | No | - | A render function to be rendered when there's an error fetching data from the server.<br> The function accepts the following parameters <br> * `err`: The error thrown by the [fetchData](./?path=/story/common-hooks--usecollection) function <br> * `isOnline`: Indicates whether internet connection is available <br> * `retry`: Retry collection fetch on failed response, similar to `collection.retryFetch` <br> Returns [`EmptyState`](https://www.docs.wixdesignsystem.com/?path=/story/components-layout--emptystate) component. |
@@ -1035,6 +1036,16 @@ function UseExternalDataSource() {
 | `importModal` | `ReactElement<any, string \| JSXElementConstructor<any>>` | No | - | A [`<ImportModal />`] react element to be rendered in table's context. |
 | `dragAndDropCategories` | `(keyof F)[][] \| null` | No | - | By default, drag and drop works only without filters. To enable drag and drop with filters, pass an array of filters to this prop. The functionality will then work only for the specified filters, and to enable without filters, you must pass an empty array. For more information, see the [Drag and Drop Overview](//?path=/story/features-sort-drag-and-drop--overview). |
 | `hideBulkSelectionCheckbox` | `boolean` | No | - | Hides bulk selection checkbox in the table titlebar, If the [`MultiBulkActionToolbar`](./?path=/story/features-actions-bulk-actions--multibulkactiontoolbar) feature is enabled, this flag will have no effect. |
+| `onSelectionChanged` | `OnSelectionChangedFn` | No | - | Defines a callback function which is called when selection happens. <br /> There are 3 types of selections: * `ALL` - bulk selection checkbox has been triggered to select all items * `SINGLE_TOGGLE` - a checkbox to select one item from the list has been triggered. The change object will also include an `id` prop with the unique item identifier and a `value` prop with the new boolean selection state of the item. * `NONE` - bulk selection has been triggered to unselect all items. |
+| `onSelectionStarted` | `(() => void)` | No | - | Called when item selection triggered but not changed yet. |
+| `showRowNumbers` | `boolean` | No | `false` | When true and showSelection is enabled, displays row numbers in the selection column. The checkbox appears on hover or when the row is selected. |
+| `bulkSelectionCheckboxRef` | `Ref<HTMLInputElement>` | No | - | A ref to the bulk selection checkbox in the table titlebar |
+| `selectedIds` | `string[] \| number[]` | No | - | Defines an array of selected rows |
+| `selectionDisabled` | `boolean \| SelectionDisabledFn<KeyedItem<T>>` | No | - | Specifies whether table row selection is restricted at a given moment. Can be defined as: * `bool` disables selection for all table rows * `function` that will be called for each row to check whether to disable selection or not depending on specified condition |
+| `deselectRowsByDefault` | `boolean` | No | `false` | Controls bulk selection checkbox behaviour in indeterminate state. By default, first click on indeterminate state selects all items in the table. If set to `true`, first click will deselect all items instead. |
+| `withWrapper` | `boolean` | No | `true` | When false then Table would not create a `<div/>` wrapper around it's children. Useful when using `<Table/>` to wrap a `<Page/>` component, in that case we use the `<Table/>` only as a context provider and it does not render anything to the DOM by itself. |
+| `onSortClick` | `((colData: TableColumn<any>, colNum: number) => void)` | No | - | Defines a callback function which is called on column title click |
+| `totalSelectableCount` | `number` | No | - | Specifies the total number of selectable items in the table (including items not loaded yet). When ‘Select all’ is triggered in infinite scroll tables, newly loaded items will be selected automatically. In this case, `SelectionContext` holds not-selected items rather than the selected ones. SelectionContext.infiniteBulkSelected is true and SelectionContext.selectedCount is the value of totalSelectableCount minus the count of unselected items. |
 | `stickySelectionColumn` | `boolean` | No | - | Whether to add a sticky column. <br> Sticky columns allow you to display specific columns at all times while the visitor scrolls the table horizontally. |
 | `actionCell` | `ActionCell<T, F>` | No | - | Use this property to add an action at the end of each row. For example, a delete button to delete a table item. Accepts an [`ActionCellProps`](./?path=/story/features-actions-action-cell--actioncellprops) object, or a function that returns an `ActionCellProps` object. |
 | `actionCellWidth` | `string \| number` | No | - | Width of the column containing the `actionCell` component. |

package/dist/docs/TableFolders.md

@@ -372,6 +372,7 @@ function WithTags() {
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
+| `dataHook` | `string` | No | - | Applies a data-hook HTML attribute to be used in the tests |
 | `state` | `TableFoldersState<T1, F1, T2, F2>` | Yes | - | A TableFoldersState instance created using [useTableFolders](./?path=/story/base-components-collections-tablefolders-usetablefolders--usetablefolders). |
 | `columns` | `TableFoldersColumn<T1, T2>[]` | Yes | - | The same as [Table.columns](./?path=/story/base-components-collections-table-table--table), with the addition of `renderFolder` property. |
 | `iconColumn` | `TableFoldersColumn<T1, T2>` | No | - | Specific entry for rendering the item icon, defaults to simple `Avatar` (for folders a `Folder` icon is rendered). |
@@ -412,6 +413,16 @@ function WithTags() {
 | `importModal` | `ReactElement<any, string \| JSXElementConstructor<any>>` | No | - | A [`<ImportModal />`] react element to be rendered in table's context. |
 | `dragAndDropCategories` | `(keyof F1 \| keyof F2)[][] \| null` | No | - | By default, drag and drop works only without filters. To enable drag and drop with filters, pass an array of filters to this prop. The functionality will then work only for the specified filters, and to enable without filters, you must pass an empty array. For more information, see the [Drag and Drop Overview](//?path=/story/features-sort-drag-and-drop--overview). |
 | `hideBulkSelectionCheckbox` | `boolean` | No | - | Hides bulk selection checkbox in the table titlebar, If the [`MultiBulkActionToolbar`](./?path=/story/features-actions-bulk-actions--multibulkactiontoolbar) feature is enabled, this flag will have no effect. |
+| `onSelectionChanged` | `OnSelectionChangedFn` | No | - | Defines a callback function which is called when selection happens. <br /> There are 3 types of selections: * `ALL` - bulk selection checkbox has been triggered to select all items * `SINGLE_TOGGLE` - a checkbox to select one item from the list has been triggered. The change object will also include an `id` prop with the unique item identifier and a `value` prop with the new boolean selection state of the item. * `NONE` - bulk selection has been triggered to unselect all items. |
+| `onSelectionStarted` | `(() => void)` | No | - | Called when item selection triggered but not changed yet. |
+| `showSelection` | `boolean` | No | `false` | Displays selection checkbox as a first column in each row. To hide the selection checkbox from a specific row, set its `row.unselectable` value to true in the data array. |
+| `showRowNumbers` | `boolean` | No | `false` | When true and showSelection is enabled, displays row numbers in the selection column. The checkbox appears on hover or when the row is selected. |
+| `bulkSelectionCheckboxRef` | `Ref<HTMLInputElement>` | No | - | A ref to the bulk selection checkbox in the table titlebar |
+| `selectedIds` | `string[] \| number[]` | No | - | Defines an array of selected rows |
+| `deselectRowsByDefault` | `boolean` | No | `false` | Controls bulk selection checkbox behaviour in indeterminate state. By default, first click on indeterminate state selects all items in the table. If set to `true`, first click will deselect all items instead. |
+| `withWrapper` | `boolean` | No | `true` | When false then Table would not create a `<div/>` wrapper around it's children. Useful when using `<Table/>` to wrap a `<Page/>` component, in that case we use the `<Table/>` only as a context provider and it does not render anything to the DOM by itself. |
+| `onSortClick` | `((colData: TableColumn<any>, colNum: number) => void)` | No | - | Defines a callback function which is called on column title click |
+| `totalSelectableCount` | `number` | No | - | Specifies the total number of selectable items in the table (including items not loaded yet). When ‘Select all’ is triggered in infinite scroll tables, newly loaded items will be selected automatically. In this case, `SelectionContext` holds not-selected items rather than the selected ones. SelectionContext.infiniteBulkSelected is true and SelectionContext.selectedCount is the value of totalSelectableCount minus the count of unselected items. |
 | `stickySelectionColumn` | `boolean` | No | - | Whether to add a sticky column. <br> Sticky columns allow you to display specific columns at all times while the visitor scrolls the table horizontally. |
 | `actionCell` | `ActionCell<T1, F1>` | No | - | Use this property to add an action at the end of each row. For example, a delete button to delete a table item. Accepts an [`ActionCellProps`](./?path=/story/features-actions-action-cell--actioncellprops) object, or a function that returns an `ActionCellProps` object. |
 | `actionCellWidth` | `string \| number` | No | - | Width of the column containing the `actionCell` component. |

package/dist/docs/TableGridSwitch.md

@@ -267,7 +267,17 @@ function TableGridSwitchAdvanceSorting() {
 | `columns` | `TableColumn<T>[]` | Yes | - | Defines the columns of the table. Accepts an array of [`TableColumn`](./?path=/story/common-types--tablecolumn) objects. |
 | `onRowClick` | `((item: T, index: number) => void)` | No | - | A callback method to be called on row click. Signature: `onRowClick(rowData, rowNum)`. To enable hover effect you should set this prop. |
 | `hideBulkSelectionCheckbox` | `boolean` | No | - | Hides bulk selection checkbox in the table titlebar, If the [`MultiBulkActionToolbar`](./?path=/story/features-actions-bulk-actions--multibulkactiontoolbar) feature is enabled, this flag will have no effect. |
+| `onSelectionChanged` | `OnSelectionChangedFn` | No | - | Defines a callback function which is called when selection happens. <br /> There are 3 types of selections: * `ALL` - bulk selection checkbox has been triggered to select all items * `SINGLE_TOGGLE` - a checkbox to select one item from the list has been triggered. The change object will also include an `id` prop with the unique item identifier and a `value` prop with the new boolean selection state of the item. * `NONE` - bulk selection has been triggered to unselect all items. |
+| `onSelectionStarted` | `(() => void)` | No | - | Called when item selection triggered but not changed yet. |
 | `showSelection` | `boolean` | No | `false` | Whether to show a checkbox column for selecting items. |
+| `showRowNumbers` | `boolean` | No | `false` | When true and showSelection is enabled, displays row numbers in the selection column. The checkbox appears on hover or when the row is selected. |
+| `bulkSelectionCheckboxRef` | `Ref<HTMLInputElement>` | No | - | A ref to the bulk selection checkbox in the table titlebar |
+| `selectedIds` | `string[] \| number[]` | No | - | Defines an array of selected rows |
+| `selectionDisabled` | `boolean \| SelectionDisabledFn<KeyedItem<T>>` | No | - | Specifies whether table row selection is restricted at a given moment. Can be defined as: * `bool` disables selection for all table rows * `function` that will be called for each row to check whether to disable selection or not depending on specified condition |
+| `deselectRowsByDefault` | `boolean` | No | `false` | Controls bulk selection checkbox behaviour in indeterminate state. By default, first click on indeterminate state selects all items in the table. If set to `true`, first click will deselect all items instead. |
+| `withWrapper` | `boolean` | No | `true` | When false then Table would not create a `<div/>` wrapper around it's children. Useful when using `<Table/>` to wrap a `<Page/>` component, in that case we use the `<Table/>` only as a context provider and it does not render anything to the DOM by itself. |
+| `onSortClick` | `((colData: TableColumn<any>, colNum: number) => void)` | No | - | Defines a callback function which is called on column title click |
+| `totalSelectableCount` | `number` | No | - | Specifies the total number of selectable items in the table (including items not loaded yet). When ‘Select all’ is triggered in infinite scroll tables, newly loaded items will be selected automatically. In this case, `SelectionContext` holds not-selected items rather than the selected ones. SelectionContext.infiniteBulkSelected is true and SelectionContext.selectedCount is the value of totalSelectableCount minus the count of unselected items. |
 | `stickySelectionColumn` | `boolean` | No | - | Whether to add a sticky column. <br> Sticky columns allow you to display specific columns at all times while the visitor scrolls the table horizontally. |
 | `dataExtension` | `(FC<DataExtensionOverrides> & DataExtensionObjectType) \| DataExtensionElement` | No | - | Data extension implementation: `import { DataExtension } from '@wix/patterns';` |
 | `checkboxTooltipContent` | `((rowData: KeyedItem<T>) => string)` | No | - | A function that receives the item of the row and returns a string for tooltip content. |

package/dist/docs/TableGridSwitchFolders.md

@@ -415,7 +415,17 @@ function WithTags() {
 | `bulkActionToolbar` | `MultiCollectionBulkActionToolbarRenderProps` | No | - | A toolbar for performing bulk actions on multiple items. Supported parameters: + `selectedValues`: Selected item values. + `uncheckedValues`: Unselected item values. + `isSelectAll`: [bool] Whether the **Select All** option is selected. + `openModal`: Opens a modal that contains the component from `bulkActionModal` render prop. + `clearSelection`: Clears all selections. Call this after the action on the selected items finishes. + `closeModal`: Closes the modal. + `openConfirmModal`: Opens a `<MessageModalLayout />` to confirm an action to be applied to the selected items. + `query`: [object] Instance of [ComputedQuery](./?path=/story/common-types--computedquery) that represents the query that resulted in an empty state. Representation of the current paging, sorting and filtering applied. Usually for using together with bulk action such as `updateAll` and `deleteAll`. |
 | `columns` | `TableFoldersColumn<T1, T2>[]` | Yes | - | The same as [Table.columns](./?path=/story/base-components-collections-table-table--table), with the addition of `renderFolder` property. |
 | `hideBulkSelectionCheckbox` | `boolean` | No | - | Hides bulk selection checkbox in the table titlebar, If the [`MultiBulkActionToolbar`](./?path=/story/features-actions-bulk-actions--multibulkactiontoolbar) feature is enabled, this flag will have no effect. |
+| `onSelectionChanged` | `OnSelectionChangedFn` | No | - | Defines a callback function which is called when selection happens. <br /> There are 3 types of selections: * `ALL` - bulk selection checkbox has been triggered to select all items * `SINGLE_TOGGLE` - a checkbox to select one item from the list has been triggered. The change object will also include an `id` prop with the unique item identifier and a `value` prop with the new boolean selection state of the item. * `NONE` - bulk selection has been triggered to unselect all items. |
+| `onSelectionStarted` | `(() => void)` | No | - | Called when item selection triggered but not changed yet. |
+| `showSelection` | `boolean` | No | `false` | Displays selection checkbox as a first column in each row. To hide the selection checkbox from a specific row, set its `row.unselectable` value to true in the data array. |
+| `showRowNumbers` | `boolean` | No | `false` | When true and showSelection is enabled, displays row numbers in the selection column. The checkbox appears on hover or when the row is selected. |
+| `bulkSelectionCheckboxRef` | `Ref<HTMLInputElement>` | No | - | A ref to the bulk selection checkbox in the table titlebar |
+| `selectedIds` | `string[] \| number[]` | No | - | Defines an array of selected rows |
 | `selectionDisabled` | `((item: T1 \| T2) => void)` | No | - | Disables row checkbox |
+| `deselectRowsByDefault` | `boolean` | No | `false` | Controls bulk selection checkbox behaviour in indeterminate state. By default, first click on indeterminate state selects all items in the table. If set to `true`, first click will deselect all items instead. |
+| `withWrapper` | `boolean` | No | `true` | When false then Table would not create a `<div/>` wrapper around it's children. Useful when using `<Table/>` to wrap a `<Page/>` component, in that case we use the `<Table/>` only as a context provider and it does not render anything to the DOM by itself. |
+| `onSortClick` | `((colData: TableColumn<any>, colNum: number) => void)` | No | - | Defines a callback function which is called on column title click |
+| `totalSelectableCount` | `number` | No | - | Specifies the total number of selectable items in the table (including items not loaded yet). When ‘Select all’ is triggered in infinite scroll tables, newly loaded items will be selected automatically. In this case, `SelectionContext` holds not-selected items rather than the selected ones. SelectionContext.infiniteBulkSelected is true and SelectionContext.selectedCount is the value of totalSelectableCount minus the count of unselected items. |
 | `stickySelectionColumn` | `boolean` | No | - | Whether to add a sticky column. <br> Sticky columns allow you to display specific columns at all times while the visitor scrolls the table horizontally. |
 | `bulkActionModal` | `MultiCollectionBulkActionModalRenderProps` | No | - | Render a modal to be opened from `bulkActionToolbar`.<br> The function accepts the following parameters * `allSelected`: Indicates whether the "Select All" checkbox is checked * `closeModal`: Closes the a modal |
 | `actionCellWidth` | `string \| number` | No | - | Width of the column containing the `actionCell` component. |

package/dist/docs/index.json

@@ -1,8 +1,4 @@
 {
-  "ActionSubItem": {
-    "file": "ActionSubItem.md",
-    "category": "Common/Types"
-  },
   "AI Assistant": {
     "file": "AI Assistant.md",
     "category": "Integrations/AI Assistant"
@@ -11,6 +7,10 @@
     "file": "AutoCompleteFilter.md",
     "category": "Features/Filter/Components"
   },
+  "ActionSubItem": {
+    "file": "ActionSubItem.md",
+    "category": "Common/Types"
+  },
   "CollectionEmptyState": {
     "file": "CollectionEmptyState.md",
     "category": "Features/Display/Empty States"
@@ -39,14 +39,14 @@
     "file": "CollectionPage.Header.md",
     "category": "Base Components/Pages/Collection Page"
   },
-  "CollectionSearch": {
-    "file": "CollectionSearch.md",
-    "category": "Features/Filter/Components"
-  },
   "CollectionPremiumEmptyState": {
     "file": "CollectionPremiumEmptyState.md",
     "category": "Features/Display/Empty States"
   },
+  "CollectionSearch": {
+    "file": "CollectionSearch.md",
+    "category": "Features/Filter/Components"
+  },
   "CollectionSubToolbar": {
     "file": "CollectionSubToolbar.md",
     "category": "Common/Components"
@@ -79,14 +79,14 @@
     "file": "EntityPage.md",
     "category": "Base Components/Pages/Entity Page"
   },
-  "EntityPage.AdditionalContent": {
-    "file": "EntityPage.AdditionalContent.md",
-    "category": "Base Components/Pages/Entity Page"
-  },
   "EntityPage.Card": {
     "file": "EntityPage.Card.md",
     "category": "Base Components/Pages/Entity Page"
   },
+  "EntityPage.AdditionalContent": {
+    "file": "EntityPage.AdditionalContent.md",
+    "category": "Base Components/Pages/Entity Page"
+  },
   "EntityPage.Content": {
     "file": "EntityPage.Content.md",
     "category": "Base Components/Pages/Entity Page"
@@ -391,14 +391,14 @@
     "file": "ActionCellProps.md",
     "category": "Features/Actions/Action Cell"
   },
-  "BulkSelectState": {
-    "file": "BulkSelectState.md",
-    "category": "Common/State"
-  },
   "BulkActionModalRenderProp": {
     "file": "BulkActionModalRenderProp.md",
     "category": "Common/Types"
   },
+  "BulkSelectState": {
+    "file": "BulkSelectState.md",
+    "category": "Common/State"
+  },
   "Category": {
     "file": "Category.md",
     "category": "Common/Types"
@@ -423,10 +423,6 @@
     "file": "customFilter.md",
     "category": "Features/Filter/Factories"
   },
-  "DataResultRaw": {
-    "file": "DataResultRaw.md",
-    "category": "Common/Types"
-  },
   "Data Extension Overview": {
     "file": "Data Extension Overview.md",
     "category": "Features/Enrich/Data Extension"
@@ -443,6 +439,10 @@
     "file": "Allow Users to Add Extended Fields.md",
     "category": "Features/Enrich/Data Extension"
   },
+  "DataResultRaw": {
+    "file": "DataResultRaw.md",
+    "category": "Common/Types"
+  },
   "EntityPageState": {
     "file": "EntityPageState.md",
     "category": "Base Components/Pages/Entity Page/State"

package/dist/esm/components/CardContainer/CardContainer.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "CardContainer1969536951";
+var _namespace_ = "CardContainer114447389";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "CardContainer1969536951__root" };
+export var classes = { "root": "CardContainer114447389__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CardContainer/CardContainer.st.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardContainer.st.css.js","sourceRoot":"","sources":["../../../../src/components/CardContainer/CardContainer.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,yBAAyB,CAAC;AAC5C,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,+BAA+B,EAAC,CAAC;AAC9D,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}
+{"version":3,"file":"CardContainer.st.css.js","sourceRoot":"","sources":["../../../../src/components/CardContainer/CardContainer.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,wBAAwB,CAAC;AAC3C,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,8BAA8B,EAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}

package/dist/esm/components/Collapse/Collapse.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "Collapse495485484";
+var _namespace_ = "Collapse3104481491";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "Collapse495485484__root", "exit": "Collapse495485484__exit" };
+export var classes = { "root": "Collapse3104481491__root", "exit": "Collapse3104481491__exit" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/Collapse/Collapse.st.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"Collapse.st.css.js","sourceRoot":"","sources":["../../../../src/components/Collapse/Collapse.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,mBAAmB,CAAC;AACtC,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,yBAAyB,EAAC,MAAM,EAAC,yBAAyB,EAAC,CAAC;AACzF,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}
+{"version":3,"file":"Collapse.st.css.js","sourceRoot":"","sources":["../../../../src/components/Collapse/Collapse.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,oBAAoB,CAAC;AACvC,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,0BAA0B,EAAC,MAAM,EAAC,0BAA0B,EAAC,CAAC;AAC3F,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}

package/dist/esm/components/CollectionPageNew/CollectionPage.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "CollectionPage840018264";
+var _namespace_ = "CollectionPage3278007346";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "CollectionPage840018264__root" };
+export var classes = { "root": "CollectionPage3278007346__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CollectionPageNew/CollectionPage.st.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollectionPage.st.css.js","sourceRoot":"","sources":["../../../../src/components/CollectionPageNew/CollectionPage.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,yBAAyB,CAAC;AAC5C,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,+BAA+B,EAAC,CAAC;AAC9D,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAC,oCAAoC,EAAC,sCAAsC,EAAC,0CAA0C,EAAC,4CAA4C,EAAC,+BAA+B,EAAC,iCAAiC,EAAC,eAAe,EAAC,iBAAiB,EAAC,CAAC"}
+{"version":3,"file":"CollectionPage.st.css.js","sourceRoot":"","sources":["../../../../src/components/CollectionPageNew/CollectionPage.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,0BAA0B,CAAC;AAC7C,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,gCAAgC,EAAC,CAAC;AAC/D,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAC,oCAAoC,EAAC,sCAAsC,EAAC,0CAA0C,EAAC,4CAA4C,EAAC,+BAA+B,EAAC,iCAAiC,EAAC,eAAe,EAAC,iBAAiB,EAAC,CAAC"}

package/dist/esm/components/CollectionSectionHeader/CollectionSectionHeader.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "CollectionSectionHeader1591435620";
+var _namespace_ = "CollectionSectionHeader2753131021";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "CollectionSectionHeader1591435620__root", "summaryIcon": "CollectionSectionHeader1591435620__summaryIcon" };
+export var classes = { "root": "CollectionSectionHeader2753131021__root", "summaryIcon": "CollectionSectionHeader2753131021__summaryIcon" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CollectionTable/CollectionTable.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "CollectionTable4275959506";
+var _namespace_ = "CollectionTable544938562";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "CollectionTable4275959506__root" };
+export var classes = { "root": "CollectionTable544938562__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CollectionTable/CollectionTable.st.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollectionTable.st.css.js","sourceRoot":"","sources":["../../../../src/components/CollectionTable/CollectionTable.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,2BAA2B,CAAC;AAC9C,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,iCAAiC,EAAC,CAAC;AAChE,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}
+{"version":3,"file":"CollectionTable.st.css.js","sourceRoot":"","sources":["../../../../src/components/CollectionTable/CollectionTable.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,0BAA0B,CAAC;AAC7C,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,gCAAgC,EAAC,CAAC;AAC/D,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}

package/dist/esm/components/CollectionToolbar/CollectionToolbar.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "CollectionToolbar877256535";
+var _namespace_ = "CollectionToolbar1902004285";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "CollectionToolbar877256535__root", "left": "CollectionToolbar877256535__left", "right": "CollectionToolbar877256535__right", "fullWidth": "CollectionToolbar877256535__fullWidth" };
+export var classes = { "root": "CollectionToolbar1902004285__root", "left": "CollectionToolbar1902004285__left", "right": "CollectionToolbar1902004285__right", "fullWidth": "CollectionToolbar1902004285__fullWidth" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CollectionToolbar/CollectionToolbar.st.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollectionToolbar.st.css.js","sourceRoot":"","sources":["../../../../src/components/CollectionToolbar/CollectionToolbar.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,4BAA4B,CAAC;AAC/C,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,kCAAkC,EAAC,MAAM,EAAC,kCAAkC,EAAC,OAAO,EAAC,mCAAmC,EAAC,WAAW,EAAC,uCAAuC,EAAC,CAAC;AAC3M,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}
+{"version":3,"file":"CollectionToolbar.st.css.js","sourceRoot":"","sources":["../../../../src/components/CollectionToolbar/CollectionToolbar.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,6BAA6B,CAAC;AAChD,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,mCAAmC,EAAC,MAAM,EAAC,mCAAmC,EAAC,OAAO,EAAC,oCAAoC,EAAC,WAAW,EAAC,wCAAwC,EAAC,CAAC;AAC/M,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}

package/dist/esm/components/CollectionToolbar/SearchOrCustomFilter.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "SearchOrCustomFilter3794450166";
+var _namespace_ = "SearchOrCustomFilter3579726546";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "SearchOrCustomFilter3794450166__root", "search": "SearchOrCustomFilter3794450166__search", "searchMobile": "SearchOrCustomFilter3794450166__searchMobile" };
+export var classes = { "root": "SearchOrCustomFilter3579726546__root", "search": "SearchOrCustomFilter3579726546__search", "searchMobile": "SearchOrCustomFilter3579726546__searchMobile" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};