@wix/design-system 1.191.2 → 1.193.0

package/dist/docs/components/DropdownBaseProps.md

@@ -0,0 +1,143 @@
+
+### open
+- type: boolean
+- description: Control whether the <Popover/> should be opened
+### onShow
+- type: () => void
+- description: Defines a callback function which is called when dropdown is opened
+### onHide
+- type: () => void
+- description: Defines a callback function which is called when dropdown is closed
+### 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
+### placement
+- type: Placement
+- description: Control popover placement
+### appendTo
+- type: AppendTo
+- description: Specifies where popover should be inserted as a last child - whether `parent` or `window` containers
+### showArrow
+- type: boolean
+- description: Specifies whether popover arrow should be shown
+### onClickOutside
+- type: () => void
+- description: Defines a callback function which is called when user clicks outside of a dropdown
+### onMouseEnter
+- type: () => void
+- description: Defines a callback function which is called on `onMouseEnter` event on the entire component
+### onMouseLeave
+- type: () => void
+- description: Defines a callback function which is called on `onMouseLeave` event on the entire component
+### onMouseDown
+- type: MouseEventHandler<HTMLElement>
+- description: No description
+### onSelect
+- type: (option: DropdownLayoutValueOption) => void
+- description: Defines a callback function which is called whenever user selects a different option in the list
+### dynamicWidth
+- type: boolean
+- description: Set popover's content width to a minimum width of a trigger element,
+but it can expand up to the defined value of `maxWidth`
+### maxWidth
+- type: MaxWidth<string | number>
+- description: Controls the maximum width of dropdown layout
+### minWidth
+- type: MinWidth<string | number>
+- description: Controls the minimum width of dropdown layout
+### maxHeight
+- type: string | number
+- description: Controls the maximum height of dropdown layout
+### children
+- type: DropdownBaseChildrenFn
+- description: Specifies a target component to be rendered. If a regular node is passed, it'll be rendered as-is.
+If a function is passed, it's expected to return a React element.
+The function accepts an object containing the following properties:
+
+ * `open` - will open the Popover
+ * `close` - will close the Popover
+ * `toggle` - will toggle the Popover
+ * `isOpen` - indicates whether the items list is currently open
+ * `delegateKeyDown` - the underlying DropdownLayout's keydown handler. It can be called
+                       inside another keyDown event in order to delegate it.
+ * `selectedOption` - the currently selected option
+
+Check inserted component documentation for more information on available properties.
+### options
+- type: DropdownLayoutOption[]
+- description: Specifies an array of options for a dropdown list. Objects must have an id and can include string value or node.
+If value is '-', a divider will be rendered instead (dividers do not require and id).
+### selectedId
+- type: string | number
+- description: Define the selected option in the list
+### overflow
+- type: Overflow
+- description: Handles container overflow behaviour
+### tabIndex
+- type: number
+- description: Indicates that element can be focused and where it participates in sequential keyboard navigation
+### initialSelectedId
+- type: string | number
+- description: Sets the initially selected option in the list. Used when selection
+behaviour is being controlled.
+### zIndex
+- type: number
+- description: Specifies the stack order (`z-index`) of a dropdown layout
+### moveBy
+- type: MoveByOffset
+- description: Moves dropdown content relative to the parent on X or Y axis by a defined amount of pixels
+### flip
+- type: boolean
+- description: Specifies whether to flip the <Popover/> placement
+when it starts to overlap the target element (<Popover.Element/>)
+### fixed
+- type: boolean
+- description: Specifies whether to enable the fixed behaviour. If enabled, <Popover/> keep its
+original placement even when it's being positioned outside the boundary.
+### fluid
+- type: boolean
+- description: Stretches trigger element to fill its parent container width
+### animate
+- type: boolean
+- description: Adds enter and exit animation
+### focusOnSelectedOption
+- type: boolean
+- description: Focus to the selected option when dropdown is opened
+### infiniteScroll
+- type: boolean
+- description: Specifies whether lazy loading of the dropdown items is enabled
+### loadMore
+- type: (page: number) => void
+- description: Defines a callback function which is called on a request to render more list items
+### hasMore
+- type: boolean
+- description: Specifies whether there are more items to load
+### focusOnOption
+- type: string | number
+- description: Focus to the specified option when dropdown is opened
+### scrollToOption
+- type: string | number
+- description: Scrolls to the specified option when dropdown is opened without marking it
+### fixedHeader
+- type: ReactNode
+- description: A fixed header to the list
+### fixedFooter
+- type: ReactNode
+- description: A fixed footer to the list
+### listType
+- type: ListType
+- description: Defines type of behavior applied in list
+### autoFocus
+- type: boolean
+- description: Specifies whether first list item should be focused
+### markedOption
+- type: string | number | boolean
+- description: Sets the initial marking of an option in the list when opened:
+- `false` - no initially hovered list item
+- `true` - hover first selectable option
+- any `number/string` specify the id of an option to be hovered
+
+

package/dist/docs/components/DropdownLayoutProps.md

@@ -0,0 +1,125 @@
+
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in the tests.
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### dropDirectionUp
+- type: boolean
+- description: No description
+### focusOnSelectedOption
+- type: boolean
+- description: Scroll view to the selected option on opening the dropdown
+### onClose
+- type: () => void
+- description: Callback function called whenever the user press the `Escape` keyboard.
+### onSelect
+- type: (option: DropdownLayoutValueOption, sameOptionWasPicked: boolean) => void
+- description: Callback function called whenever the user selects a different option in the list
+### onOptionMarked
+- type: (option: DropdownLayoutValueOption, optionElementId?: string) => void
+- description: Callback function called whenever an option becomes focused (hovered/active). Receives the relevant option object from the original props.options array.
+### visible
+- type: boolean
+- description: Should show or hide the component
+### options
+- type: DropdownLayoutOption[]
+- 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/>`.
+### selectedId
+- type: string | number
+- description: The id of the selected option in the list
+### tabIndex
+- type: number
+- description: Specifies the tab order of the component.
+### onClickOutside
+- type: (e: TouchEvent | MouseEvent) => void
+- description: No description
+### fixedHeader
+- type: ReactNode
+- description: A fixed header to the list
+### fixedFooter
+- type: ReactNode
+- description: A fixed footer to the list
+### maxHeightPixels
+- type: string | number
+- description: Set the max height of the dropdownLayout in pixels
+### minWidthPixels
+- type: string | number
+- description: Set the min width of the dropdownLayout in pixels
+### withArrow
+- type: boolean
+- description: No description
+### closeOnSelect
+- type: boolean
+- description: Closes DropdownLayout on option selection
+### onMouseEnter
+- type: MouseEventHandler<HTMLElement>
+- description: Callback function called whenever the user entered with the mouse to the dropdown layout.
+### onMouseLeave
+- type: MouseEventHandler<HTMLElement>
+- description: Callback function called whenever the user exited with the mouse from the dropdown layout.
+### onMouseDown
+- type: MouseEventHandler<HTMLElement>
+- description: Callback function called whenever the user clicks the dropdown layout.
+### itemHeight
+- type: DropdownLayoutItemHeight
+- description: No description
+### selectedHighlight
+- type: boolean
+- description: Whether the selected option will be highlighted when dropdown reopened.
+### inContainer
+- type: boolean
+- description: 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
+- type: boolean
+- description: Set this prop for lazy loading of the dropdown layout items.
+### loadMore
+- type: (page: number) => void
+- description: A callback called when more items are requested to be rendered.
+### hasMore
+- type: boolean
+- description: Whether there are more items to be loaded.
+### markedOption
+- type: string | number | boolean
+- description: Sets the default hover behavior when:
+1. `false` means no default
+2. `true` means to hover the first selectable option
+3. Any number/string represents the id of option to hover
+### overflow
+- type: Overflow
+- description: Set overflow of container
+### focusOnOption
+- type: string | number
+- description: Marks (not selects) and scrolls view to the option on opening the dropdown by option id
+### scrollToOption
+- type: string | number
+- description: Scrolls to the specified option when dropdown is opened without marking it
+### listType
+- type: ListType
+- description: Defines type of behavior applied in list
+### autoFocus
+- type: boolean
+- description: Specifies whether first list item should be focused
+### scrollbar
+- type: "overlay" | "fixed"
+- description: Controls which type of scrollbar to render
+### listboxId
+- type: string
+- description: Defines the id for the listbox
+### overlayScrollbarProps
+- type: { OverlayScrollbarHostElement: React.FunctionComponent<any>; OverlayScrollbarContentElement: React.ForwardRefExoticComponent<any>; }
+- description: No description
+### ref
+- type: React.ForwardedRef<DropdownLayout>
+- description: No description
+
+

package/dist/docs/components/DropdownProps.md

@@ -0,0 +1,212 @@
+
+### initialSelectedId
+- type: union
+- description: An initial selected option id. (Implies Uncontrolled mode)
+### 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.
+### 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.
+### 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.
+### 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.
+### native
+- type: bool
+- description: Render options list via native select element.
+### 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.
+### onChange
+- type: func
+- description: Defines a standard input onChange callback.
+### onCompositionChange
+- type: func
+- description: Defines a callback function called on compositionstart/compositionend events.
+### 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.
+### 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;
+- disabledDescription `<string>` tooltip description for a disabled item;
+- 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.
+### placeholder
+- type: string
+- description: Sets a placeholder message to display.
+### popoverProps
+- type: shape
+- description: Allows to pass all common popover props.
+### 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.
+### selectedId
+- type: union
+- description: Specifies selected option by its id.
+### 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.
+### valueParser
+- type: func
+- description: Defines a callback function that is triggered when one of the dropdown options are selected. This property should be used together with builders.
+
+

package/dist/docs/components/DropzoneProps.md

@@ -0,0 +1,15 @@
+
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in the tests.
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### onDrop
+- type: func
+- description: Defines an event handler which is called when files are dropped over the dropzone. Dropped files are supplied as an argument to the function.
+### children
+- type: node
+- description: Accepts `<Dropzone.Overlay />` or `<Dropzone.Content />`. Both of them can contain any required content.
+
+

package/dist/docs/components/EditableSelectorProps.md

@@ -0,0 +1,35 @@
+
+### dataHook
+- type: string
+- description: Applied as data-hook HTML attribute that can be used in the tests
+### title
+- type: string
+- description: The editable selector's title
+### toggleType
+- type: enum
+- description: Specifies the type of the toggle
+### newRowLabel
+- type: string
+- description: Text for the add new row button
+### editButtonText
+- type: string
+- description: Text for the edit button
+### onOptionAdded
+- type: func
+- description: New option added callback function
+### onOptionEdit
+- type: func
+- description: Option edited callback function
+### onOptionDelete
+- type: func
+- description: Option deleted callback function
+### onOptionToggle
+- type: func
+- description: Option toggled callback function
+### options
+- type: arrayOf
+- description: Array of objects:
+* `title` - the title of the option.
+* `isSelected` - whether this option is selected or not.
+
+

package/dist/docs/components/EditableTitleProps.md

@@ -0,0 +1,24 @@
+
+### initialValue
+- type: string
+- description: Defines a text value that is shown initially
+### defaultValue
+- type: string
+- description: Defines text value that is shown when the title is empty. When clicked this value will become a default 'value'
+### onSubmit
+- type: func
+- description: Triggers function when a user is done with editing the title
+### maxLength
+- type: number
+- description: Sets the max number of characters that a user can type in the title
+### autoFocus
+- type: bool
+- description: Sets focus on the title as soon as the component is rendered (on mount)
+### onChange
+- type: func
+- description: Triggers function when the title is being edited
+### value
+- type: string
+- description: Sets the controlled value of the input
+
+

package/dist/docs/components/EmptyStateProps.md

@@ -0,0 +1,30 @@
+
+### theme
+- type: EmptyStateTheme
+- description: Sets the style theme for the empty state
+### title
+- type: ReactNode
+- description: Sets the content for the title
+### subtitle
+- type: ReactNode
+- description: Sets the content for the subtitle
+### image
+- type: string | ReactElement<any, string | JSXElementConstructor<any>>
+- description: Contains the empty state image. Can be either a string representing the image URL, or a node to render.
+### children
+- type: ReactNode
+- description: Contains components rendered below the subtitle, e.g., `<Button/>` or `<TextButton/>`
+### classNames
+- type: { imageContainer?: string; }
+- description: Sets the empty state image bottom margin. If not specified, use the default padding defined in the CSS.
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute to be used in the tests
+### align
+- type: EmptyStateAlign
+- description: Sets the alignment of all empty state contents within the component container
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+
+

package/dist/docs/components/FacesRatingBarProps.md

@@ -0,0 +1,27 @@
+
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in the tests
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### readOnly
+- type: bool
+- description: Specifies whether the rating bar is in read only mode
+### descriptionValues
+- type: arrayOf
+- description: Specifies the rate value descriptions’ texts. The array length must match the maxValue prop number (5 by default).
+### value
+- type: enum
+- description: Specifies the selected rate. `0` indicates undefined rating. `readOnly` mode value cannot be `0`.
+### maxValue
+- type: enum
+- description: Specifies the maximum rate value.
+### onChange
+- type: func
+- description: Defines a handler that is called whenever a rating changes.
+##### Signature:
+function(rating: number) => void
+* `rating`: 1 | 2 | 3 | 4 | 5
+
+

package/dist/docs/components/FeatureListProps.md

@@ -0,0 +1,18 @@
+
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in the tests
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### cols
+- type: number
+- description: Defines the number of columns. It is used to define how many features will be displayed in a single row.
+### features
+- type: arrayOf
+- description: Specifies an array of features. It accepts following properties:
+ * `image` - use to pass a visual representation of a feature
+ * `title` - use to specify feature title
+ * `text` - use to specify a short feature description.q
+
+