@wix/design-system 1.191.2 → 1.193.0

package/dist/docs/components/AnalyticsSummaryCardProps.md

@@ -0,0 +1,84 @@
+
+### 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.
+### title
+- type: string
+- description: Text for the title
+### titleTooltip
+- type: string
+- description: Text for title tooltip
+### value
+- type: string
+- description: Text value
+### valueTooltip
+- type: string
+- description: Text for value tooltip
+### trend
+- type: number
+- description: A number to be displayed as the trend, a positive number will be green with an arrow facing up and a negative number will be red with an arrow facing down
+### invertedTrend
+- type: boolean
+- description: Invert color and arrow direction of Trend.
+### isTrendVisible
+- type: boolean
+- description: Show/Hide trend
+### isLoading
+- type: boolean
+- description: Whether component is loading
+### ctaButton
+- type: ReactNode
+- description: CTA button React Node
+### onCTAClick
+- type: (event: MouseEvent<HTMLDivElement, MouseEvent>) => void
+- description: Fires when CTA button is clicked
+### alwaysShowCTA
+- type: boolean
+- description: Always show CTA button
+### onClick
+- type: (event: MouseEvent<HTMLDivElement, MouseEvent>) => void
+- description: Card would be clickable
+### onChartHover
+- type: (index: number) => void
+- description: Fires when chart is hovered
+### chartHighlightedStartingIndex
+- type: number
+- description: Indicates the starting index of the highlighted area of the chart
+### chartWidth
+- type: number
+- description: Chart width
+### chartData
+- type: { label: Date; value: number; }[]
+- description: Chart data
+### getChartTooltipContent
+- type: (index: number) => ReactNode
+- description: Chart tooltip content
+### chartColorHex
+- type: string
+- description: Sets the color of the chart
+### chartAnimationDuration
+- type: number
+- description: Chart animation duration
+### footer
+- type: ReactNode
+- description: Footer - node
+### border
+- type: boolean
+- description: Adds a border and corner radius
+### horizontalPadding
+- type: AnalyticsSummaryCardHorizontalPadding
+- description: Controls spacing size from left and right sides
+### focusableOnFocus
+- type: React.FocusEventHandler<E>
+- description: No description
+### focusableOnBlur
+- type: React.FocusEventHandler<E>
+- description: No description
+### ref
+- type: React.RefObject<E>
+- description: No description
+
+

package/dist/docs/components/AngleInputProps.md

@@ -0,0 +1,30 @@
+
+### onChange
+- type: (angle: number) => void
+- description: Callback function called on value change.
+### onPointerDown
+- type: () => void
+- description: Defines a callback function which will be called when onpointerdown is triggered.
+### onPointerUp
+- type: () => void
+- description: Defines a callback function which will be called when onpointerup is triggered.
+### onFocus
+- type: () => void
+- description: Optional callback for focus event.
+### onBlur
+- type: () => void
+- description: Optional callback for blur event.
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in the tests.
+### value
+- type: number
+- description: The current value of the angle.
+### disabled
+- type: boolean
+- description: Indicates if the slider is disabled.
+### step
+- type: number
+- description: Defines step increments for angle adjustment.
+
+

package/dist/docs/components/AnnouncementModalLayoutProps.md

@@ -0,0 +1,66 @@
+
+### title
+- type: ReactNode
+- description: The modal's title
+### subtitle
+- type: ReactNode
+- description: The modal's subtitle
+### content
+- type: ReactNode
+- description: the content you want to render in the modal, children passed directly will be treated as `content` as well
+### primaryButtonText
+- type: ReactNode
+- description: a text for the primary action button
+### primaryButtonProps
+- type: Omit<ButtonProps, "dataHook">
+- description: Passed to the primary action button as props without any filter / mutation
+### primaryButtonOnClick
+- type: () => void
+- description: a callback for when the primary action button is clicked
+### secondaryButtonText
+- type: ReactNode
+- description: a text for the secondary action button
+### secondaryButtonProps
+- type: Omit<ButtonProps, "dataHook">
+- description: Passed to the secondary button as props without any filter / mutation
+### secondaryButtonOnClick
+- type: () => void
+- description: callback for when the secondary action button is clicked
+### actionsSize
+- type: ButtonSize
+- description: will determine the action buttons size
+### sideActions
+- type: ReactNode
+- description: side actions node, to be rendered as the first element on the same row as the action buttons
+### footnote
+- type: ReactNode
+- description: a footnote node, to be rendered at the very bottom of the modal
+### footnoteSkin
+- type: FootnoteSkin
+- description: Sets the look and feel of the footnote
+### illustration
+- type: ReactNode
+- description: The illustration src or the illustration node itself
+### linkText
+- type: ReactNode
+- description: When not provided, the primary link will not be rendered
+### linkOnClick
+- type: () => void
+- description: callback for when the link is clicked
+### theme
+- type: "standard" | "premium"
+- description: a global theme for the modal, will be applied as stylable state and will affect footer buttons skin
+### className
+- type: string
+- description: No description
+### dataHook
+- type: string
+- description: No description
+### onCloseButtonClick
+- type: MouseEventHandler<HTMLButtonElement>
+- description: No description
+### onHelpButtonClick
+- type: MouseEventHandler<HTMLButtonElement>
+- description: No description
+
+

package/dist/docs/components/AreaChartProps.md

@@ -0,0 +1,23 @@
+
+### 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.
+### data
+- type: arrayOf
+- description: Array of Areat Chart items
+* `value` - Item's value.
+* `label` - A Short label under the value.
+### tooltipContent
+- type: func
+- description: Tooltip content template function
+### onTooltipShow
+- type: func
+- description: Callback on tooltip content show event
+### maxYTicksLimit
+- type: number
+- description: Maximum ticks allowed in Y axis
+
+

package/dist/docs/components/AtlasAddressInputProps.md

@@ -0,0 +1,107 @@
+
+### baseUrl
+- type: string
+- description: Accept a custom domain for WixAtlasServiceWeb to retrieve predictions from
+### token
+- type: string
+- description: Sets an authorization token to pass to the Atlas Service
+### language
+- type: string
+- description: Sets the `language` to pass to the Atlas Service.
+Use the language code e.g. `'en'`.
+### locale
+- type: string
+- description: Sets the `locale` to pass to the Atlas Service.
+Locale consists of language code and country code separated by a dash e.g. `'en-us'`.
+### debounceMs
+- type: number
+- description: Fetch predictions debounce in milliseconds (default: 200)
+### debounceFn
+- type: func
+- description: Allows passing a custom debounce function (default: lodash debounce).
+Usage:
+(callback: Function, debounceMs: number) => Function
+### 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.
+### clearButton
+- type: bool
+- description: Displays clear button (X) on a non-empty input
+### initialValue
+- type: string
+- description: Sets the initial input value
+### value
+- type: string
+- description: Sets a value to display (controlled mode)
+### disabled
+- type: bool
+- description: Specifies whether input is disabled
+### onSelect
+- type: func
+- description: Defines a callback function which is called whenever a user selects a different option in the list.
+### onChange
+- type: func
+- description: Defines a callback function which is called every time input value is changed
+### onClear
+- type: func
+- description: Defines a handler for getting notified upon a clear event. When passed, it displays a clear button in the input.
+### onFocus
+- type: func
+- description: Defines a standard input onFocus callback
+### onBlur
+- type: func
+- description: Defines a standard input onBlur callback
+### autoSelect
+- type: bool
+- description: Specifies whether input is auto selected on focus
+### selectOnSubmit
+- type: bool
+- description: Specifies whether to trigger `onSelect` handler when performing a Submit-Action (Enter or Tab key down).
+If set to true, `onSelect` will be called with the following params:
+
+`option`: an option with a label set to the input value.
+
+`getAddress`: function for retrieving additional place details
+   uses Atlas's search function to return the closest result to the input value
+
+This is useful when looking for locations for which Atlas does not give suggestions - for example: Apartment/Apt.
+### onError
+- type: func
+- description: Defines a handler for prediction fetching errors. Returns an error object.
+you can read these [guidelines](https://bo.wix.com/wix-docs/rnd/platformization-guidelines/errors#platformization-guidelines_errors_errors)
+to learn about the meaning of each error status.
+### status
+- type: enum
+- description: Specify the status of a field. Mostly used for a “loading” indication upon async request calls.
+### statusMessage
+- type: node
+- description: Defines the message to display on status icon hover. If not given or empty there will be no tooltip
+### border
+- type: enum
+- description: Control the border style of an input
+### size
+- type: enum
+- description: Controls the size of the input
+### placeholder
+- type: string
+- description: Sets a placeholder message to display
+### noResultsText
+- type: union
+- description: Sets the message to show in a dropdown when no results are found
+### optionLayout
+- type: enum
+- description: Sets the layout of `mainLabel` and `secondaryLabel`. The possible options can be either side by side or vertically stacked.
+### optionPrefix
+- type: node
+- description: Pass any component to show as the prefix of the option, e.g., text, icon.
+### optionSuffix
+- type: node
+- description: Pass any component to show as the suffix of the option, e.g., text, icon, button.
+### popoverProps
+- type: shape
+- description: Allows to pass common popover props
+
+

package/dist/docs/components/AudioPlayerProps.md

@@ -0,0 +1,48 @@
+
+### 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.
+### src
+- type: string
+- description: Specifies a link to the source of the track to be loaded for the sound (URL or base64 data URI).
+If a file has no extension, you will need to specify the extension using the format property.
+### format
+- type: string
+- description: Specifies a file format in situations where extraction does not work (such as a SoundCloud stream).<br/>
+By default, AudioPlayer detects your file format from the extension.
+### preload
+- type: enum
+- description: Determines what to download when the component is rendered: full file, its metadata or nothing at all.
+When webAudioAPI = true you can only set it to either 'auto' or 'none'.
+When webAudioAPI = false you can set it to 'auto', 'metadata' or 'none'.
+### autoplay
+- type: bool
+- description: Start playback automatically when audio is loaded.
+### webAudioAPI
+- type: bool
+- description: Specifies whether to force web audio API. Use it for relatively small audio files only because you have to wait for the full file
+to be downloaded and decoded before playing. Web Audio API allows advanced capabilities as described in
+[Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API).
+### onLoad
+- type: func
+- description: Defines a callback function which is called when audio is loaded.
+### onLoadError
+- type: func
+- description: Defines a callback function which is called every time audio fails to load.
+### onPlay
+- type: func
+- description: Defines a callback function which is called when audio is played.
+### onPause
+- type: func
+- description: Defines a callback function which is called when audio is paused.
+### onEnd
+- type: func
+- description: Will be called when audio is ended.
+### onSeek
+- type: func
+- description: Defines a callback function which is called when audio is sought explicitly (i.e. when user drags the slider).
+
+

package/dist/docs/components/AutoCompleteProps.md

@@ -0,0 +1,248 @@
+
+### 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.
+### disabled
+- type: bool
+- description: Specifies whether 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.
+### 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.
+### 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
+### 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 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 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): 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.
+### onEmptyState
+- type: func
+- description: Defines a callback function which is called when no options exist.
+### 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: Specify an array of options:
+- 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.
+### predicate
+- type: func
+- description: Defines a callback predicate for the filtering options function.
+### 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.
+### showOptionsIfEmptyInput
+- type: bool
+- description: Controls whether to show options if input is empty.
+### size
+- type: enum
+- description: Controls the size of the input. Default value: `medium`
+### 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 is text string.
+### autoSelect
+- type: any
+- description: No description
+### dropdownOffsetLeft
+- type: any
+- description: No description
+### inContainer
+- type: any
+- description: No description
+### selectedHighlight
+- type: any
+- description: No description
+### inputElement
+- type: any
+- description: No description
+### autocomplete
+- type: any
+- description: No description
+
+

package/dist/docs/components/AutoCompleteWithLabelProps.md

@@ -0,0 +1,69 @@
+
+### dataHook
+- type: string
+- description: Sets a default value for those who want to use this component un-controlled.
+### label
+- type: string
+- description: Defines a value label to show inside of a field.
+### options
+- type: arrayOf
+- description: Specify an array of options to display in the dropdown list.
+### suffix
+- type: arrayOf
+- description: Pass a component you want to show as the suffix of the input, e.g., text string, icon.
+### 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.
+### onFocus
+- type: func
+- description: Defines a standard input onFocus callback.
+### onBlur
+- type: func
+- description: Defines a standard input onBlur callback
+### onChange
+- type: func
+- description: Defines a standard input onChange callback.
+### name
+- type: string
+- description: Reference element data when a form is submitted.
+### type
+- type: string
+- description: Specifies the type of `<input/>` element to display. Default is text string.
+### 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).
+### autocomplete
+- type: string
+- description: 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
+### disabled
+- type: bool
+- description: Specifies whether input should be disabled or not.
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### maxLength
+- type: number
+- description: Sets the maximum number of characters that can be entered into a field.
+### placeholder
+- type: string
+- description: Sets a placeholder message to display.
+### onSelect
+- type: func
+- description: Defines a callback function which is called whenever user selects a different option in the list.
+### native
+- type: bool
+- description: Indicates whether to render using the native select element
+### value
+- type: union
+- description: Value of rendered child input
+### maxHeightPixels
+- type: union
+- description: Sets the maximum height of the dropdownLayout in pixels.
+
+