@wix/design-system 1.191.2 → 1.193.0

package/dist/docs/components/RadarChartProps.md

@@ -0,0 +1,36 @@
+
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in tests
+### data
+- type: arrayOf
+- description: Defines data points that construct spider web-like charts. Available properties for array items:<br />
+     - `value` - a number that represents value in chart<br />
+     - `label` - a label that represents value description around the chart<br />
+     - `color` - data point color.<br />
+     - `tooltipContent` - data point tooltip content
+### scale
+- type: arrayOf
+- description: Defines a number of scale circles in the chart. Available properties for each scale:<br />
+       - `value` - a number representing scale<br />
+       - `suffix` - a string that represents value meaning (i.e. % or $)
+### disabled
+- type: bool
+- description: Specifies whether graph is disabled
+### width
+- type: number
+- description: Controls the width of a graph. Minimum width is 150 pixels.
+### labelDistance
+- type: number
+- description: Controls label distance from a chart
+### hoverIndex
+- type: number
+- description: Defines the index of a data point in hover state
+### labelWidth
+- type: number
+- description: Defines maximum width of data labels
+### onDataPointHover
+- type: func
+- description: Defines a callback function which is called every time user hovers over a data point. Includes all data point data as first argument and index as second.
+
+

package/dist/docs/components/RadioGroupProps.md

@@ -0,0 +1,51 @@
+
+### 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.
+### onChange
+- type: func
+- description: Defines a callback function which is called every time user selects a different value
+### value
+- type: union
+- description: Specifies the selected radio value
+### disabledRadios
+- type: arrayOf
+- description: Specify the values of the disabled radio buttons
+### vAlign
+- type: enum
+- description: Controls radio alignment to the label on Y axis
+### disabled
+- type: bool
+- description: Disables the entire group
+### display
+- type: enum
+- description: Control options direction
+### selectionArea
+- type: enum
+- description: Controls selection area highlight visibility
+### selectionAreaSkin
+- type: enum
+- description: Sets the design of the selection area
+### selectionAreaPadding
+- type: string
+- description: Sets the amount of white space around the radio label in pixels
+### children
+- type: node
+- description: Lists RadioGroup items. You're recommended to use it with <RadioGroup.Radio/>.
+### spacing
+- type: string
+- description: Controls the distance between options
+### name
+- type: string
+- description: Sets a unique name of a radio group
+### fullWidth
+- type: bool
+- description: Makes component full width and divides all available horizontal space into even parts for each radio button
+### size
+- type: enum
+- description: Controls size
+
+

package/dist/docs/components/RadioProps.md

@@ -0,0 +1,42 @@
+
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in tests
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### checked
+- type: bool
+- description: Specifies whether a radio is selected
+### disabled
+- type: bool
+- description: Specifies whether radio should be disabled
+### label
+- type: node
+- description: Sets the label on the right side of a radio. The default accepted value is a text string, but it can be overridden to any other component.
+### name
+- type: node
+- description: Sets a unique name for the radio
+### id
+- type: string
+- description: Assigns an unique identifier for the radio
+### value
+- type: union
+- description: Sets the value that the radio represents
+### onChange
+- type: func
+- description: Defines a callback function which is called when radio is selected
+### onMouseEnter
+- type: func
+- description: Defines a callback function which is called when cursor enters radio
+### onMouseLeave
+- type: func
+- description: Defines a callback function which is called when cursor leaves radio
+### alignItems
+- type: enum
+- description: Control radio alignment with a label
+### size
+- type: enum
+- description: Control size
+
+

package/dist/docs/components/RangeProps.md

@@ -0,0 +1,9 @@
+
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in the tests.
+### children
+- type: any
+- description: Accept any component as a child item. At the moment it is most commonly used with `<DatePicker/>` or `<Input/>`
+
+

package/dist/docs/components/RichTextInputAreaProps.md

@@ -0,0 +1,41 @@
+
+### 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.
+### initialValue
+- type: string
+- description: Sets the initial value to be displayed in the editor.
+### placeholder
+- type: string
+- description: Sets a placeholder message to display.
+### disabled
+- type: bool
+- description: Specifies whether an editor and its toolbar should be disabled.
+### status
+- type: enum
+- description: Specifies the status of a field.
+### statusMessage
+- type: string
+- description: Defines the message to display on status icon hover. If not given or empty there will be no tooltip.
+### onChange
+- type: func
+- description: Defines a standard callback function for changes: `onChange(htmlText, { plainText })`
+### minHeight
+- type: string
+- description: Defines a minimum height for the editor (it grows by default)
+### maxHeight
+- type: string
+- description: Defines a maximum height for the editor (it grows by default)
+### spellCheck
+- type: bool
+- description: Enables browsers spell checking.
+Do not affect IE.
+In Safari, autocorrects by default.
+### texts
+- type: shape
+- description: Defines text styles to be shown.
+
+

package/dist/docs/components/SearchProps.md

@@ -0,0 +1,223 @@
+
+### 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
+### autocomplete
+- type: string
+- description: Sets the value of native autocomplete attribute (consult the [HTML spec](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete) for possible values)
+### 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
+### debounceMs
+- type: number
+- description: Specifies the `onChange` debounce in milliseconds
+### defaultValue
+- type: string
+- description: Defines the initial value of an input for those who want to use this component un-controlled
+### disabled
+- type: bool
+- description: Specifies whether the input should be disabled or not
+### disableEditing
+- type: bool
+- description: Restricts input editing
+### dropdownWidth
+- type: string
+- description: Sets the width of the dropdown in pixels
+### renderEmptyState
+- type: func
+- description: Function which returns custom node shown when no options are available
+### expandable
+- type: bool
+- description: Specifies whether to collapse input to search icon only. Once clicked, icon will expand to a full search input.
+### expandWidth
+- type: union
+- description: Specifies the width of an input in an  expanded state
+### 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 the 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
+### 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
+### 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
+### onChange
+- type: func
+- description: Defines a standard input `onChange` 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
+### onEnterPressed
+- type: func
+- description: Defines a callback handler that is called when the presses -enter-
+### onEscapePressed
+- type: func
+- description: Defines a callback handler that is called when the 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 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
+### 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 the 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 for 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 the 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 common popover props. Check `<Popover/>` API for a full list.
+### predicate
+- type: func
+- description: Defines a custom function for options filtering
+### readOnly
+- type: bool
+- description: Specifies whether input is read only
+### required
+- type: bool
+- description: Specifies that an input must be filled out before submitting the form
+### scrollbar
+- type: enum
+- description: Controls which type of scrollbar to render inside the dropdown
+### 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.
+### 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 the placement of a status tooltip
+### type
+- type: string
+- description: Specifies the type of `<input>` element to display. The default type is text.
+### value
+- type: union
+- description: Specifies the current value of the element
+
+

package/dist/docs/components/SectionHeaderProps.md

@@ -0,0 +1,45 @@
+
+### title
+- type: React.ReactNode
+- description: Title text or element.
+
+`React.ReactElement` values are not affected by `as`, `id`,
+`aria-describedby`, and `size` props or default text styling.
+### suffix
+- type: React.ReactNode
+- description: Suffix content.
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in the tests
+### skin
+- type: SectionHeaderSkin
+- description: Skin variant.
+### as
+- type: SectionHeaderTitleAs
+- description: Renders component as any other component or a given HTML tag.
+### id
+- type: string
+- description: Title text element id.
+### aria-describedby
+- type: string
+- description: Title text element label reference id.
+### size
+- type: SectionHeaderTitleSize
+- description: Title size.
+### align
+- type: SectionHeaderTitleAlignment
+- description: Title alignment.
+### divider
+- type: SectionHeaderDivider
+- description: Divider type.
+### horizontalPadding
+- type: SectionHeaderHorizontalPadding
+- description: Horizontal padding.
+### RefAttributes
+- type: All props from RefAttributes that comes from @types/react/index.d.ts
+- description: No description
+### Attributes
+- type: All props from Attributes that comes from @types/react/index.d.ts
+- description: No description
+
+

package/dist/docs/components/SectionHelperProps.md

@@ -0,0 +1,42 @@
+
+### dataHook
+- type: string
+- description: Applied as data-hook HTML attribute that can be used in the tests
+### appearance
+- type: SectionHelperAppearance
+- description: Sets the look and feel of the component
+### title
+- type: React.ReactNode
+- description: Adds text as the title
+### size
+- type: SectionHelperSize
+- description: Controls the component padding
+### showCloseButton
+- type: boolean
+- description: decide if to show the close button
+### onClose
+- type: React.MouseEventHandler<HTMLElement>
+- description: When provided, will make a close button appear and invoke it upon click
+### onAction
+- type: React.MouseEventHandler<HTMLElement>
+- description: When provided, will make an action button appear and invoke it upon click
+### actionText
+- type: React.ReactNode
+- description: Text or any child component for the action button
+### fullWidth
+- type: boolean
+- description: Set the content width to 100%
+### layout
+- type: SectionHelperLayout
+- description: Controls the component layout
+### border
+- type: SectionHelperBorder
+- description: Controls the component border
+### showPrefixIcon
+- type: boolean
+- description: Enables showing prefix icon
+### prefixIcon
+- type: React.ReactNode
+- description: Overrides default prefix icon
+
+

package/dist/docs/components/SegmentedToggleProps.md

@@ -0,0 +1,24 @@
+
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in the tests
+### defaultSelected
+- type: node
+- description: Specifies the initially selected option
+### selected
+- type: node
+- description: Specifies whether an option is selected
+### size
+- type: enum
+- description: Controls the size of the segmented toggle
+### onClick
+- type: func
+- description: Defines a callback function which is called every time option is clicked. Returns a selected element and its value.
+### disabled
+- type: bool
+- description: Specifies whether interactions are disabled.
+### children
+- type: array
+- description: Accepts <SegmentedToggle.Icon/> or <SegmentedToggle.Button/> as child items to list down available options
+
+

package/dist/docs/components/SelectableAccordionProps.md

@@ -0,0 +1,28 @@
+
+### dataHook
+- type: string
+- description: Applied as 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.
+### type
+- type: enum
+- description: A type can be ether radio, checkbox, or toggle, which will effect the way an accordion item is selected
+### items
+- type: arrayOf
+- description: An array of Accordion items:
+- `title`: A title of the item
+- `subtitle`: An optional second row of the header
+- `content`: A content of the item
+- `initiallyOpen`: Whether the item is initially open
+- `open`: Whether the item is open
+- `disabled`: Whether the item is disabled
+- `onClick`: A callback which is invoked when item's selection is changed
+### verticalPadding
+- type: enum
+- description: Extra space on top and bottom of selectable accordion item
+### onSelectionChanged
+- type: func
+- description: A callback which is invoked every time the selection is changed
+
+

package/dist/docs/components/SelectorButtonProps.md

@@ -0,0 +1,41 @@
+
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in the tests.
+### DOMAttributes
+- type: All props from DOMAttributes that comes from @types/react/index.d.ts
+- description: No description
+### ellipsis
+- type: boolean
+- description: Specifies whether component handles text overflow with ellipsis. If enabled, label that exceed available space will be displayed inside of a tooltip when user hover over a button.
+### showTooltip
+- type: boolean
+- description: Specifies whether the full button label is displayed in a tooltip when label overflows available space.
+
+Behaviour is enabled by default. Set property value to false to show ellipsis without a tooltip.
+### tooltipProps
+- type: TooltipCommonProps
+- description: Allows to pass all common tooltip props. Use it to customize a tooltip created from text ellipsis.
+### ButtonHTMLAttributes
+- type: All props from ButtonHTMLAttributes that comes from @types/react/index.d.ts
+- description: No description
+### fullWidth
+- type: boolean
+- description: Sets button width to fill a 100% of a parent container width.
+### suffixIcon
+- type: IconElement
+- description: Pass an icon or a component to display at the end of a label (e.g., svg, image, etc.)
+### onClick
+- type: MouseEventHandler<HTMLButtonElement>
+- description: Defines a callback function which is called every time a button is clicked.
+### size
+- type: ValuesOf<{ readonly SMALL: "small"; readonly MEDIUM: "medium"; readonly LARGE: "large"; }>
+- description: Controls the size of a button.
+### RefAttributes
+- type: All props from RefAttributes that comes from @types/react/index.d.ts
+- description: No description
+### Attributes
+- type: All props from Attributes that comes from @types/react/index.d.ts
+- description: No description
+
+

package/dist/docs/components/SelectorListProps.md

@@ -0,0 +1,91 @@
+
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute to be used in the tests
+### dataSource
+- type: func
+- description: Returns data source for the list described in a following structure:
+
+```typescript
+(searchQuery: string, offset: number, limit: number) =>
+Promise<{
+ items: Array<{
+   id: number | string, // sets the unique item ID (required)
+   title: node, defines // an item’s title (required)
+   subtitle?: string, // defines an item’s subtitle
+   extraText?: string, // contains any text at the end of an item
+   extraNode?: node, // contains any component at the end of an item
+   disabled?: boolean, // controls if an item is disabled for selection or not
+   selected?: boolean, // sets an item as selected
+   indeterminate?: boolean, // sets an item as indeterminate
+   image?: node, // contains <Image/> or other component to illustrate an item
+   subtitleNode?: node, // contains any component below an item’s subtitle
+   belowNode?: node, // contains any component below the item, to be shown after an item is selected
+   showBelowNodeOnSelect?: boolean, // allows to show belowNode content when an item is selected
+ }>,
+ offset: number, // specifies the item index in the data source to start fetching from<br>
+ limit: number, // sets a max amount of items to load from the data source<br>
+ totalCount: number, // sets a max amount of items to load from the data source on user’s search query
+}>
+```
+### size
+- type: enum
+- description: Controls the size of component paddings and list items
+### imageSize
+- type: enum
+- description: Controls the size of item images. Note: `portrait` and `cinema` sizes are only compatible with `rectangular` image shape.
+### imageShape
+- type: enum
+- description: Controls the shape of item images
+### showDivider
+- type: bool
+- description: Use to display a divider between items
+### searchPlaceholder
+- type: string
+- description: Defines placeholder value shown in the search input
+### emptyState
+- type: node
+- description: Contains a component which is shown when there are no items to display in the selector list.
+
+i.e. empty `{items:[], totalCount: 0}` was returned on the first call to `dataSource`. Render `<EmptyState/>` component in `section` theme for this purpose.
+### renderNoResults
+- type: func
+- description: Defines a function that gets the current `searchQuery` and returns the component that is shown when no items are found. Render `<EmptyState />` component in `section` theme for this purpose.
+### itemsPerPage
+- type: number
+- description: Sets the number of items to be loaded each time users scroll down to the end of the list
+### withSearch
+- type: bool
+- description: Controls whether to display the search input
+### searchDebounceMs
+- type: number
+- description: Sets search debounce in milliseconds
+### height
+- type: string
+- description: Sets the height of the component in % or px
+### maxHeight
+- type: string
+- description: Sets the maximum height of the component in % or px
+### multiple
+- type: bool
+- description: Renders checkboxes instead of radio buttons and allows users to select multiple items
+### onSelect
+- type: func
+- description: Defines callback that triggers on select and return selected item object
+### selectAllText
+- type: string
+- description: Sets the label for the checkbox which allows to select all items
+### deselectAllText
+- type: string
+- description: Sets the label for the checkbox which allows to deselect all selected items
+### initialAmountToLoad
+- type: number
+- description: Sets the number of items to load on initial render or after search. If not defined, it will be equal to `itemsPerPage` value.
+### subtitle
+- type: node
+- description: Contains text or other component in a fixed position at the top of the list
+### renderToggleAllCheckbox
+- type: func
+- description: Displays a checkbox which allows to select and deselect all items at once
+
+