@wix/design-system 1.191.2 → 1.193.0

package/dist/docs/components/ModalProps.md

@@ -0,0 +1,90 @@
+
+### children
+- type: ReactNode
+- description: Renders modal content
+### dataHook
+- type: string
+- description: Applied as data-hook HTML attribute that can be used to create driver in testing
+### isOpen
+- type: boolean
+- description: Controls if modal is open or closed
+### borderRadius
+- type: number
+- description: Border radius of modal
+### contentLabel
+- type: string
+- description: a11y: The value of contentLabel is set as an aria-label on the modal element. This helps assistive technology, like screen readers, to add a label to an element that would otherwise be anonymous
+### zIndex
+- type: number
+- description: Controls z-index of the modal overlay
+### shouldCloseOnOverlayClick
+- type: boolean
+- description: Enables to close modal when mouse clicked on overlay area
+### shouldDisplayCloseButton
+- type: boolean
+- description: Displays a close button on the top right corner of the overlay
+### onRequestClose
+- type: (event?: MouseEvent<Element, MouseEvent> | KeyboardEvent<Element>) => void
+- description: Callback that will be executed when the modal is requested to be closed, prior to actually closing
+### onAfterOpen
+- type: () => void
+- description: Callback that will be executed after the modal has been opened
+### onAfterClose
+- type: () => void
+- description: Callback that will be executed after the modal has been closed
+### horizontalPosition
+- type: ModalHorizontalPosition
+- description: Horizontal position of the modal
+### verticalPosition
+- type: ModalVerticalPosition
+- description: Vertical position of the modal
+### closeTimeoutMS
+- type: number
+- description: Number indicating the milliseconds to wait before closing the modal
+### scrollable
+- type: boolean
+- description: Specifies if modal portal supports scroll
+### scrollableContent
+- type: boolean
+- description: Specifies if modal content should become scrollable when modal size will fit the window
+### maxHeight
+- type: string
+- description: Sets the maximum height for a scrollable content
+### height
+- type: string
+- description: Sets the height for modal's content container
+### overlayPosition
+- type: ModalOverlayPosition
+- description: css position of the modal overlay
+### parentSelector
+- type: () => HTMLElement
+- description: A function that returns a DOM element on which the modal should be appended to
+### appElement
+- type: string
+- description: Selector specifying where to apply the aria-hidden attribute
+### onOk
+- type: () => void
+- description: No description
+### screen
+- type: ModalScreen
+- description: Specifies minimum spacing between full viewport and modal content
+### showNavigationPreviousButton
+- type: boolean
+- description: Enable navigation previous buttons to the side of the content and listen on clicks by using onNavigationClickPrevious
+### showNavigationNextButton
+- type: boolean
+- description: Enable navigation next button to the side of the content and listen on clicks by using onNavigationClickNext
+### onNavigationClickPrevious
+- type: () => void
+- description: Callback that will be executed when the navigation control previous is clicked
+### onNavigationClickNext
+- type: () => void
+- description: Callback that will be executed when the navigation control next is clicked
+### navigationPreviousLabel
+- type: string
+- description: Label used for navigation control previous button tooltip
+### navigationNextLabel
+- type: string
+- description: Label used for navigation control next button tooltip
+
+

package/dist/docs/components/ModalSelectorLayoutProps.md

@@ -0,0 +1,104 @@
+
+### dataHook
+- type: string
+- description: applied as data-hook HTML attribute that can be used to create driver in testing
+### title
+- type: node
+- description: Title of the modal
+### subtitle
+- type: node
+- description: Fixed text displayed above the list
+### onOk
+- type: func
+- description: OK button callback, called with the currently selected item
+### onClose
+- type: func
+- description: X button callback
+### onCancel
+- type: func
+- description: Cancel button callback
+### dataSource
+- type: func
+- description: paging function that should have a signature of
+```typescript
+(searchQuery: string, offset: number, limit: number) =>
+Promise<{
+ items: Array<{
+   id: number | string,
+   title: node,
+   subtitle?: string,
+   extraText?: string,
+   extraNode?: node,
+   disabled?: boolean // show item as disabled, dont count it in "select all", exclude from `onOk`
+   selected?: boolean // force item as selected
+   image?: node
+   subtitleNode?: node,
+   belowNode?: node,
+   showBelowNodeOnSelect?: boolean,
+ }>,
+ totalCount: number
+}>
+```
+`offset` - next requested item's index<br>
+`limit` - number of items requested<br>
+`totalCount` - total number of items that suffice the current search query
+### cancelButtonText
+- type: string
+- description: Cancel button's text
+### okButtonText
+- type: string
+- description: OK button's text
+### imageSize
+- type: enum
+- description: Image icon size
+### imageShape
+- type: custom
+- description: Image icon shape, `rectangular` or `circle`.<br>
+NOTE: `circle` is not compatible with `imageSize` of `portrait` or `cinema`
+### searchPlaceholder
+- type: string
+- description: Placeholder text of the search input
+### emptyState
+- type: node
+- description: Component/element that will be rendered when there is nothing to display,
+i.e. empty `{items:[], totalCount: 0}` was returned on the first call to `dataSource`
+### noResultsFoundStateFactory
+- type: func
+- description: Function that will get the current `searchQuery` and should return the component/element
+that will be rendered when there are no items that suffice the entered search query
+### itemsPerPage
+- type: number
+- description: Number of items loaded each time the user scrolls down
+### withSearch
+- type: bool
+- description: Whether to display the search input or not
+### searchDebounceMs
+- type: number
+- description: Search debounce in milliseconds
+### height
+- type: string
+- description: Height CSS property, sets the height of the modal
+### maxHeight
+- type: string
+- description: Max-height CSS property, sets the maximum height of the modal.
+### multiple
+- type: bool
+- description: display checkbox and allow multi selection
+### selectAllText
+- type: string
+- description: string to be displayed in footer when `multiple` prop is used and no items are selected
+### deselectAllText
+- type: string
+- description: string to be displayed in footer when `multiple` prop is used and some or all items ar selected
+### disableConfirmation
+- type: bool
+- description: to disable confirm button
+### onSelect
+- type: func
+- description: callback that triggers on select and return selected item object
+### sideActions
+- type: node
+- description: Used to display some side component in the footer.
+Will override element select all in the footer when multiple=true
+
+

package/dist/docs/components/MultiSelectCheckboxProps.md

@@ -0,0 +1,253 @@
+
+### predicate
+- type: func
+- description: Defines a custom function for options filtering
+### enableSearch
+- type: bool
+- description: Sets whether to enable search in the dropdown
+### emptyStateMessage
+- type: string
+- description: Defines a message to be displayed instead of options when no options exist or no options pass the predicate filter function.
+### getSelectedOptionsText
+- type: func
+- description: Defines a callback function to get the text for the selected options
+### ariaControls
+- type: string
+- description: Associate a control with the regions that it controls
+### ariaDescribedby
+- type: string
+- description: 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
+- type: string
+- description: Define a string that labels the current element in case where a text label is not visible on the screen
+### autoFocus
+- type: bool
+- description: Focus the element on mount (standard React input autoFocus)
+### border
+- type: enum
+- description: Control the border style of input
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### clearButton
+- type: bool
+- description: Displays clear button (X) on a non-empty input
+### closeOnSelect
+- type: bool
+- description: Closes `DropdownLayout` when option is selected
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in the tests
+### defaultValue
+- type: string
+- description: Sets a default value for those who want to use this component un-controlled
+### delimiter
+- type: string
+- description: Specifies the delimiter symbol to be displayed between the selected options in the input
+### disabled
+- type: bool
+- description: Specifies whether input should be disabled or not
+### dropdownWidth
+- type: string
+- description: Sets the width of the dropdown in pixels
+### fixedFooter
+- type: node
+- description: Adds a fixed footer container at the bottom of options list in `<DropdownLayout/>`
+### fixedHeader
+- type: node
+- description: Adds a fixed header container at the top of options list in `<DropdownLayout/>`
+### focusOnOption
+- type: union
+- description: Highlights and scrolls view to the specified option when dropdown layout is opened. It does not select the specified option.
+### focusOnSelectedOption
+- type: bool
+- description: Scrolls view to the selected option when dropdown layout is opened
+### forceFocus
+- type: bool
+- description: USED FOR TESTING - forces focus state on the input
+### forceHover
+- type: bool
+- description: USED FOR TESTING - forces hover state on the input
+### hasMore
+- type: bool
+- description: Specifies whether there are more items to be loaded
+### hideStatusSuffix
+- type: bool
+- description: Specifies whether status suffix should be hidden
+### highlight
+- type: bool
+- description: Highlight word parts that match search criteria in bold
+### id
+- type: string
+- description: Assigns an unique identifier for the root element
+### infiniteScroll
+- type: bool
+- description: Specifies whether lazy loading of the dropdown layout items is enabled
+### loadMore
+- type: func
+- description: Defines a callback function which is called on a request to render more list items
+### markedOption
+- type: union
+- description: Sets the default hover behavior:
+ - `false` - no initially hovered list item
+ - `true` - hover first selectable option
+ - any `number/string` specify the id of an option to be hovered
+### maxHeightPixels
+- type: union
+- description: Sets the maximum height of the `dropdownLayout` in pixels
+### maxLength
+- type: number
+- description: Sets the maximum number of characters that can be entered into a field
+### menuArrow
+- type: bool
+- description: Specifies whether input should have a dropdown menu arrow on the right side
+### minWidthPixels
+- type: union
+- description: Sets the minimum width of `dropdownLayout` in pixels
+### name
+- type: string
+- description: Reference element data when a form is submitted
+### noLeftBorderRadius
+- type: bool
+- description: Specifies whether input shouldn’t have rounded corners on its left
+### noRightBorderRadius
+- type: bool
+- description: Specifies whether input shouldn’t have rounded corners on its right
+### onBlur
+- type: func
+- description: Defines a standard input `onBlur` callback
+### onClear
+- type: func
+- description: Displays clear button (X) on a non-empty input and calls a callback function with no arguments
+### onClose
+- type: func
+- description: Defines a callback function which is called whenever the user presses the escape key
+### onCompositionChange
+- type: func
+- description: Defines a callback function called on `compositionstart`/`compositionend` events
+### onDeselect
+- type: func
+- description: 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.
+### onEnterPressed
+- type: func
+- description: Defines a callback handler that is called when user presses -enter-
+### onEscapePressed
+- type: func
+- description: Defines a callback handler that is called when user presses -escape-
+### onFocus
+- type: func
+- description: Defines a standard input `onFocus` callback
+### onInputClicked
+- type: func
+- description: Defines a standard input `onClick` callback.
+### onKeyDown
+- type: func
+- description: Defines a standard input `onKeyDown` callback
+### onKeyUp
+- type: func
+- description: Defines a standard input `onKeyUp` callback
+### onManuallyInput
+- type: func
+- description: Defines a callback function which is called when 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.
+### onMouseEnter
+- type: func
+- description: Defines a callback function which is called whenever the user enters dropdown layout with the mouse cursor
+### onMouseLeave
+- type: func
+- description: Defines a callback function which is called whenever the user exits from dropdown layout with a mouse cursor
+### onOptionMarked
+- type: func
+- description: Defines a callback function which is called whenever an option becomes focused (hovered/active). Receives the relevant option object from the original `props.options` array.
+### onOptionsHide
+- type: func
+- description: Defines a callback function which is called when options dropdown is hidden
+### onOptionsShow
+- type: func
+- description: Defines a callback function which is called when options dropdown is shown
+### onPaste
+- type: func
+- description: Defines a callback handler that is called when user pastes text from a clipboard (using mouse or keyboard shortcut)
+### onSelect
+- type: func
+- description: Defines a callback function which is called whenever user selects a different option in the list
+### options
+- type: arrayOf
+- description: Array of objects:
+- `id <string / number>` *required*: the id of the option, should be unique;
+- value `<function / string / node>` *required*: can be a string, react element or a builder function;
+- disabled `<bool>` *default value- false*: whether this option is disabled or not;
+- linkTo `<string>`: when provided the option will be an anchor to the given value;
+- title `<bool>`  *default value- false*  **deprecated**: please use `listItemSectionBuilder` for rendering a title;
+- overrideStyle `<bool>` *default value- false*  **deprecated**: please use `overrideOptionStyle` for override option styles;
+- overrideOptionStyle `<bool>` *default value- false* - when set to `true`, the option will be responsible to its own styles. No styles will be applied from the DropdownLayout itself;
+- label `<string>`: the string displayed within an input when the option is selected. This is used when using `<DropdownLayout/>` with an `<Input/>`.
+### overflow
+- type: string
+- description: Handles container overflow
+### pattern
+- type: string
+- description: Sets a pattern that typed value must match to be valid (regex)
+### placeholder
+- type: string
+- description: Sets a placeholder message to display
+### popoverProps
+- type: shape
+- description: Allows to pass all common popover props. Check `<Popover/>` API for a full list.
+### prefix
+- type: node
+- description: Pass a component you want to show as the prefix of the input, e.g., text string, icon
+### readOnly
+- type: bool
+- description: Specifies whether input is read only
+### required
+- type: bool
+- description: Specifies whether input is mandatory
+### selectedId
+- type: union
+- description: Specifies selected option by its id
+### selectedOptions
+- type: array
+- description: Specifies an array of selected options ids
+### showOptionsIfEmptyInput
+- type: bool
+- description: Controls whether to show options if input is empty
+### size
+- type: enum
+- description: Controls the size of the input
+### status
+- type: enum
+- description: Specify the status of a field
+### statusMessage
+- type: node
+- description: Defines the message to display on status icon hover. If not given or empty there will be no tooltip.
+### suffix
+- type: node
+- description: Pass a component you want to show as the suffix of the input, e.g., text string, icon
+### tabIndex
+- type: number
+- description: Indicates that element can be focused and where it participates in sequential keyboard navigation
+### textOverflow
+- type: string
+- description: Handles text overflow behavior. It can either `clip` (default) or display `ellipsis`.
+### tooltipPlacement
+- type: string
+- description: Controls placement of a status tooltip
+### type
+- type: string
+- description: Specifies the type of `<input>` element to display. Default type is text.
+### value
+- type: union
+- description: Specifies the current value of the element
+### valueParser
+- type: func
+- description: No description
+### disableEditing
+- type: bool
+- description: Specifies if the input can be edited
+### clearOnBlur
+- type: any
+- description: No description
+
+

package/dist/docs/components/MultiSelectProps.md

@@ -0,0 +1,102 @@
+
+### ariaControls
+- type: string
+- description: Associate a control with the regions that it controls.
+### ariaDescribedby
+- type: string
+- description: 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
+- type: string
+- description: Define a string that labels the current element in case where a text label is not visible on the screen.
+### border
+- type: enum
+- description: Control the border style of input
+### closeOnSelect
+- type: bool
+- description: Closes list once list item is selected
+### popoverProps
+- type: shape
+- description: Allows to pass all common popover props.
+### predicate
+- type: func
+- description: Callback predicate for the filtering options function
+### tags
+- type: array
+- description: Optional list of strings that are selected suggestions.
+### maxNumRows
+- type: number
+- description: Max number of visible lines
+### delimiters
+- type: array
+- description: Delimiters that will trigger a Submit action (call to onTagsAdded). By default it is [,] but also enter and tab keys work.
+### emptyStateMessage
+- type: node
+- description: Defines a message to be displayed instead of options when no options exist or no options pass the predicate filter function.
+### hasMore
+- type: bool
+- description: Specifies whether there are more items to be loaded.
+### infiniteScroll
+- type: bool
+- description: Specifies whether lazy loading of the dropdown layout items is enabled.
+### loadMore
+- type: func
+- description: Defines a callback function which is called on a request to render more list items.
+### mode
+- type: string
+- description: Passing 'select' will render a readOnly input with menuArrow suffix *
+### status
+- type: enum
+- description: The status of the Multiselect
+### statusMessage
+- type: string
+- description: Text to be shown in the status icon tooltip
+### onReorder
+- type: func
+- description: When this callback function is set, tags can be reordered. The expected callback signature is `onReorder({addedIndex: number, removedIndex: number}) => void` *
+### onManuallyInput
+- type: func
+- description: A callback which is called when the user enters something in the input and then confirms the input with some action like Enter key or Tab.
+### onOptionsShow
+- type: func
+- description: A callback which is called when options dropdown is shown
+### onOptionsHide
+- type: func
+- description: A callback which is called when options dropdown is hidden
+### onSelect
+- type: func
+- description: 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.
+### customSuffix
+- type: node
+- description: A node to display as input suffix when the dropdown is closed
+### customPrefix
+- type: node
+- description: A node to display as input prefix when the dropdown is closed
+### disabled
+- type: bool
+- description: When set to true this component is disabled
+### clearOnBlur
+- type: bool
+- description: When set to false, the input will not be cleared on blur
+### acceptOnBlur
+- type: bool
+- description: When set to true, the input will be submitted as new tag on blur
+### onRemoveTag
+- type: func
+- description: A callback function to be called when a tag should be removed. The expected callback signature is `onRemoveTag(tagId: number | string) => void.`
+### readOnly
+- type: bool
+- description: Specifies whether input should be read only
+### fixedFooter
+- type: node
+- description: Adds a fixed footer container at the bottom of options list.
+### markedOption
+- type: union
+- description: Sets the default option focus behavior:
+ - `false` - no initially focused list item
+ - `true` - focus first selectable option
+ - any `number/string` specify the id of an option to be focused
+### customInput
+- type: any
+- description: No description
+
+

package/dist/docs/components/NavigationToastProps.md

@@ -0,0 +1,36 @@
+
+### key
+- type: string
+- description: Toast key
+### id
+- type: string
+- description: Toast id
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in the tests.
+### dismissible
+- type: boolean
+- description: Whether the toast should render the dismiss button.
+### dismissLabel
+- type: string
+- description: Aria label for the dismiss button.
+### onDismiss
+- type: (event?: React.MouseEvent) => void
+- description: Callback function called whenever the user clicks the dismiss button.
+### children
+- type: ReactNode
+- description: Content to display in the toast.
+### prefixIcon
+- type: false | IconElement
+- description: Custom icon displayed at the start of the toast content.
+### onAction
+- type: MouseEventHandler<HTMLDivElement>
+- description: Callback triggered when the toast action is performed.
+### duration
+- type: number
+- description: Time in milliseconds before the toast dismisses automatically. When set to `0` or `null`, the toast remains indefinitely.
+
+

package/dist/docs/components/NestableListBaseProps.md

@@ -0,0 +1,45 @@
+
+### items
+- type: any
+- description: No description
+### isRenderDraggingChildren
+- type: any
+- description: No description
+### childrenProperty
+- type: any
+- description: No description
+### childrenStyle
+- type: any
+- description: No description
+### renderPrefix
+- type: any
+- description: No description
+### renderAction
+- type: any
+- description: No description
+### onUpdate
+- type: any
+- description: No description
+### useDragHandle
+- type: any
+- description: No description
+### preventChangeDepth
+- type: any
+- description: No description
+### preventChangeParent
+- type: any
+- description: No description
+### enforcePinnedOrder
+- type: any
+- description: No description
+### maxDepth
+- type: any
+- description: No description
+### threshold
+- type: any
+- description: No description
+### dragLayerZIndex
+- type: any
+- description: No description
+
+

package/dist/docs/components/NestableListProps.md

@@ -0,0 +1,66 @@
+
+### actions
+- type: custom
+- description: Actions that will be rendered for on the root depth level
+### withBottomBorder
+- type: bool
+- description: Adds a bottom border (divider) to the last item.
+### readOnly
+- type: bool
+- description: Prevents the list from being reordered by removing the dragging grip icons.
+### addItemLabel
+- type: string
+- description: Adds a button to create a new item (to the Root or a child to the existing item).
+### dragHandleSize
+- type: enum
+- description: Size of the drag handle
+### showDragHandleOnHover
+- type: bool
+- description: Shows the drag handle only on hover.
+### onAddItem
+- type: func
+- description: Triggers function when the "Add new ..." button is clicked.
+### onChange
+- type: func
+- description: Triggers function when the item’s order or nesting position is changed.
+### maxDepth
+- type: number
+- description: Defines a maximum depth (number of levels) for the list.
+### preventChangeDepth
+- type: bool
+- description: Allows dragging and dropping an item only on its own depth (inside the same level).
+### preventChangeParent
+- type: bool
+- description: Allows dragging and dropping an item only on its own parent.
+### enforcePinnedOrder
+- type: bool
+- description: Allows dragging and dropping an item only on its pin section.
+### items
+- type: arrayOf
+- description: Defines each Nestable List item individually, using the following props:
+* __id__ - specifies an item’s ID.
+* __addItemLabel__ - creates the “Add new ...” button with a given label at the bottom of the item.
+* __isCollapsed__ - bool prop, defines whether to render the item’s children.
+* __children__ - defines an item’s children.
+* __draggable__ - bool prop, turns on / off dragging ability for an item.
+* All <a href="https://www.wix-pages.com/wix-design-system-employees/?path=/story/components-lists-table--tablelistitem" target="_blank">`<TableListItem/>`</a> props can be used to format item’s style and content.
+### dataHook
+- type: string
+- description: Can be applied in the tests as a data-hook HTML attribute.
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### zIndex
+- type: number
+- description: Defines the zIndex of the draggable layer
+### dividers
+- type: bool
+- description: Sets the divider visibility
+### indentSize
+- type: enum
+- description: Sets the indent size
+### hierarchyIndicator
+- type: bool
+- description: Displays hierarchyIndicator from the parent to children
+
+