@wix/design-system 1.191.2 → 1.193.0

package/dist/docs/components/CircularProgressBarProps.md

@@ -0,0 +1,36 @@
+
+### error
+- type: bool
+- description: Should be true if had failure during the progress
+### errorLabel
+- type: string
+- description: Label to display when an error happens
+### errorMessage
+- type: string
+- description: Message to display when an error happens
+### light
+- type: bool
+- description: Use light theme instead of dark theme
+### showProgressIndication
+- type: bool
+- description: Use to display a percentage progress
+### label
+- type: string
+- description: Use to display custom text in the progress bar
+### labelPlacement
+- type: enum
+- description: Placement of the label in the progress bar
+### size
+- type: string
+- description: Size of the bar
+### skin
+- type: enum
+- description: Skin of the bar
+### value
+- type: union
+- description: The number of the percentage progress
+### dataHook
+- type: string
+- description: No description
+
+

package/dist/docs/components/ClickableCardProps.md

@@ -0,0 +1,36 @@
+
+### children
+- type: ReactNode
+- description: Accepts any node as a child element.
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in the tests.
+### skin
+- type: ClickableCardSkin
+- description: Specifies the skin of a card.
+### hasPadding
+- type: boolean
+- description: Applies padding to the card.
+### disabled
+- type: boolean
+- description: Specifies whether user interactions are disabled.
+### as
+- type: "button" | "a"
+- description: Defines whether the card is rendered as an anchor (<a>) or a button (<button>). Defaults to button.
+### HTMLAttributes
+- type: All props from HTMLAttributes 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
+### ButtonHTMLAttributes
+- type: All props from ButtonHTMLAttributes that comes from @types/react/index.d.ts
+- description: No description
+### AriaAttributes
+- type: All props from AriaAttributes that comes from @types/react/index.d.ts
+- description: No description
+### DOMAttributes
+- type: All props from DOMAttributes that comes from @types/react/index.d.ts
+- description: No description
+
+

package/dist/docs/components/CloseButtonProps.md

@@ -0,0 +1,30 @@
+
+### ButtonHTMLAttributes
+- type: All props from ButtonHTMLAttributes that comes from @types/react/index.d.ts
+- description: No description
+### HTMLAttributes
+- type: All props from HTMLAttributes that comes from @types/react/index.d.ts
+- description: No description
+### AriaAttributes
+- type: All props from AriaAttributes that comes from @types/react/index.d.ts
+- description: No description
+### DOMAttributes
+- type: All props from DOMAttributes that comes from @types/react/index.d.ts
+- description: No description
+### skin
+- type: CloseButtonSkin
+- description: skins of closebutton
+### size
+- type: CloseButtonSize
+- description: size of closebutton
+### dataHook
+- type: string
+- description: string based data hook for testing
+### as
+- type: "object" | "small" | "form" | "slot" | "style" | "title" | "button" | "search" | "article" | "dialog" | "figure" | "img" | "link" | "main" | "menu" | "option" | "table" | "time" | ... 94 more ... | ComponentType<...>
+- description: Renders component as any other component or a given HTML tag.
+### AnchorHTMLAttributes
+- type: All props from AnchorHTMLAttributes that comes from @types/react/index.d.ts
+- description: No description
+
+

package/dist/docs/components/CollapseProps.md

@@ -0,0 +1,28 @@
+
+### dataHook
+- type: string
+- description: Adds a `data-hook` attribute for testing purposes.
+### position
+- type: "static" | "sticky"
+- description: Determines if the collapse stays fixed at the top of its container.
+### open
+- type: boolean
+- description: Determines whether the collapse is open.
+### mountOnEnter
+- type: boolean
+- description: Delays mounting the component until it is displayed.
+If `false`, the component mounts immediately. If `true`, it mounts on first display.
+### unmountOnExit
+- type: boolean
+- description: Unmounts the component after it finishes exiting. If `false`, the component stays mounted after exit.
+### onExpandAnimationEnd
+- type: (animationTiming?: AnimationTiming) => void
+- description: Triggered when the expand animation completes.
+### onCollapseAnimationEnd
+- type: (animationTiming?: AnimationTiming) => void
+- description: Triggered when the collapse animation completes.
+### children
+- type: React.ReactNode
+- description: Content to render inside the collapse.
+
+

package/dist/docs/components/ColorInputProps.md

@@ -0,0 +1,42 @@
+
+### placeholder
+- type: string
+- description: Defines placeholder text to display on an empty input
+### disabled
+- type: bool
+- description: Specifies whether the input should be disabled
+### status
+- type: enum
+- description: Specifies 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.
+### size
+- type: enum
+- description: Controls input size
+### value
+- type: string
+- description: Defines input value
+### onConfirm
+- type: func
+- description: Returns confirmed value
+### onCancel
+- type: func
+- description: Returns last confirmed value from `value` prop
+### onChange
+- type: func
+- description: Returns changed value of input or color picker
+### colorPickerChildren
+- type: union
+- description: Defines child items to render inside of a component. Accepts any kind of content. It receives the `changeColor` function to control <ColorInput/> value.
+### onAddColor
+- type: func
+- description: Defines a callback handler with color HEX string. Handler is called whenever the `Add Color` button is pressed.
+### addTooltipContent
+- type: node
+- description: Defines content to show in add button tooltip. Does not appear if `onAdd` is not passed.
+### popoverProps
+- type: object
+- description: Allows to pass popover props. See <Popover/> API for a full list.
+
+

package/dist/docs/components/ColorPickerProps.md

@@ -0,0 +1,42 @@
+
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in the tests
+### value
+- type: union
+- description: Defines current color. It can be provided in `string` or `object` format [https://github.com/Qix-/color](https://github.com/Qix-/color)
+### showHistory
+- type: bool
+- description: Specifies whether current and previously used colors should be displayed
+### showConverter
+- type: bool
+- description: Specifies whether `HEX`/`RGB`/`HSB` converter tabs be displayed
+### showInput
+- type: bool
+- description: Specifies whether color input in HEX mode should be displayed. This is relevant only if `showConverter` is `false`
+### onChange
+- type: func
+- description: Defines an event handler for color change.
+### onCancel
+- type: func
+- description: Defines an event handler for cancel button click.
+### onConfirm
+- type: func
+- description: Defines an event handler for confirm button click.
+### onAdd
+- type: func
+- description: Defines an event handler for color add button click. If not passed, the plus icon will not be visible.
+### children
+- type: union
+- description: Defines child items to be rendered above action buttons. Accepts any kind of content.
+### addTooltipContent
+- type: node
+- description: Defines content to show in add button tooltip. Does not appear if `onAdd` is not passed.
+### allowEmpty
+- type: bool
+- description: Allows to submit when color is not selected. Returns a color object with alpha equal to 0.
+### emptyPlaceholder
+- type: string
+- description: Defines a placeholder text to show in an input when `allowEmpty` is true
+
+

package/dist/docs/components/ComposerButtonProps.md

@@ -0,0 +1,42 @@
+
+### ButtonHTMLAttributes
+- type: All props from ButtonHTMLAttributes that comes from @types/react/index.d.ts
+- description: No description
+### HTMLAttributes
+- type: All props from HTMLAttributes that comes from @types/react/index.d.ts
+- description: No description
+### AriaAttributes
+- type: All props from AriaAttributes that comes from @types/react/index.d.ts
+- description: No description
+### DOMAttributes
+- type: All props from DOMAttributes that comes from @types/react/index.d.ts
+- description: No description
+### dataHook
+- type: any
+- description: Applies a data-hook HTML attribute that can be used in tests.
+### label
+- type: any
+- description: Sets label value.
+### shape
+- type: any
+- description: Sets button shape.
+### ellipsis
+- type: any
+- description: Truncates label that is longer than its parent container and displays ellipsis at the end of the last line.
+### maxLines
+- type: any
+- description: Truncates label text at a specific number of lines when using ellipsis.
+### as
+- type: any
+- description: Renders component as any other component or a given HTML tag.
+### 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
+### AnchorHTMLAttributes
+- type: All props from AnchorHTMLAttributes that comes from @types/react/index.d.ts
+- description: No description
+
+

package/dist/docs/components/ComposerHeaderProps.md

@@ -0,0 +1,18 @@
+
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute to be used in the tests
+### backButtonValue
+- type: node
+- description: Defines the label of a back button
+### onBackClick
+- type: func
+- description: Defines what happens when the back button is clicked
+### size
+- type: enum
+- description: Sets the height of the component and adjusts the size of the back button
+### dropShadow
+- type: bool
+- description: Applies a drop shadow effect
+
+

package/dist/docs/components/ComposerSidebarProps.md

@@ -0,0 +1,38 @@
+
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute to be used in the tests
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### labelPlacement
+- type: enum
+- description: Controls the items’ label placement
+### labelTooltipProps
+- type: object
+- description: Controls the items’ label tooltip when labelPlacement is set to tooltip
+### width
+- type: union
+- description: Sets the width of the container
+### size
+- type: enum
+- description: Sets the size of the items
+### selectedId
+- type: union
+- description: Defines which item is currently selected
+### ellipsis
+- type: bool
+- description: Controls the ellipsis of the item label
+### items
+- type: arrayOf
+- description: Defines an array of items (buttons and labels) to show on the sidebar:
+- `label`: text string next to a button
+- `icon`: icon shown in the toggle button
+- `disabled`: disables the item
+- `onClick`: defines what happens when the item is clicked on
+- `sectionTitle`: defines a section under which each item is placed
+### onClick
+- type: func
+- description: Defines a default on click handler for items
+
+

package/dist/docs/components/CopyClipboardProps.md

@@ -0,0 +1,21 @@
+
+### value
+- type: string
+- description: Text to be added to clipboard
+### children
+- type: (params: CopyClipboardChildrenProps) => ReactNode
+- description: Children render prop provides handlers to invoke copying to the clipboard
+### dataHook
+- type: string
+- description: Applied as data-hook HTML attribute that can be used in the tests
+### className
+- type: string
+- description: No description
+### onCopy
+- type: Function
+- description: onCopy callback
+### resetTimeout
+- type: number
+- description: Interval after which state of whether value was copied is reset
+
+

package/dist/docs/components/CornerRadiusInputProps.md

@@ -0,0 +1,44 @@
+
+### 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.
+### topLeft
+- type: CornerProps
+- description: Properties for the top left corner input.
+### topRight
+- type: CornerProps
+- description: Properties for the top right corner input.
+### bottomLeft
+- type: CornerProps
+- description: Properties for the bottom left corner input.
+### bottomRight
+- type: CornerProps
+- description: Properties for the bottom right corner input.
+### linked
+- type: boolean
+- description: When set to `true`, linked mode is initially enabled on the component.
+### onLinkedToggle
+- type: (isLinked: boolean) => void
+- description: Callback function that is called when the linked mode is toggled on or off.
+### linkingButtonLabels
+- type: { pressed: string; unpressed: string; }
+- description: Specifies the labels displayed when hovering over the link button.
+The `pressed` key defines the label shown when link mode is active (or pressed),
+while the `unpressed` key defines the label for when link mode is inactive (or unpressed).
+### size
+- type: ValuesOf<{ readonly tiny: "tiny"; readonly small: "small"; readonly medium: "medium"; readonly large: "large"; }>
+- description: Specifies the size of the component.
+### min
+- type: number
+- description: Min value for all corners.
+### max
+- type: number
+- description: Max value for all corners.
+### linkedValuesChangedMessage
+- type: string
+- description: When all corners have been modified in linked mode, this message is announced to screen readers.
+
+

package/dist/docs/components/CounterBadgeProps.md

@@ -0,0 +1,27 @@
+
+### children
+- type: ReactNode
+- description: Any element to be rendered inside
+### 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.
+### locale
+- type: "en" | "en-US" | "en-GB" | "en-AU" | "en-CA" | "ar" | "bg" | "ca" | "zh" | "zh-TW" | "zh-HK" | "zh-MO" | "cs" | "da" | "nl" | "fi" | "fr" | "fr-CA" | "fr-CH" | "fr-BE" | "de" | "de-CH" | ... 31 more ... | "vi"
+- description: Sets locale and formats the number according to it
+### skin
+- type: CounterBadgeSkin
+- description: The component's look and feel
+### size
+- type: CounterBadgeSize
+- description: The component's size. Can be small or medium
+### showShadow
+- type: boolean
+- description: Makes the card have a box-shadow style
+### truncate
+- type: boolean
+- description: Control whether values greater than 99 should be truncated
+
+

package/dist/docs/components/CustomModalLayoutProps.md

@@ -0,0 +1,87 @@
+
+### 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 to be used in the tests
+### onCloseButtonClick
+- type: func
+- description: Defines a call-back function after user clicks on the close button
+### onHelpButtonClick
+- type: func
+- description: Defines a call-back function after user clicks on the help button
+### theme
+- type: enum
+- description: Sets the appearance of modal (i.e., changes the skin of primary and secondary action buttons)
+### title
+- type: union
+- description: Sets text title for the modal; can be used in conjunction with other components
+### subtitle
+- type: union
+- description: Sets text subtitle for the modal; can be used in conjunction with other components
+### content
+- type: union
+- description: Contains all modal’s content in its middle area. `<CustomModalLayout/>` children are passed as `content`, too.
+### actionsSize
+- type: custom
+- description: Sets the size of action buttons
+### primaryButtonText
+- type: union
+- description: Sets text label or other content (e.g., <Loader/>) for the primary button
+### primaryButtonOnClick
+- type: func
+- description: Defines a call-back function after user clicks on the primary button
+### primaryButtonProps
+- type: custom
+- description: Passes on any `<Button/>` properties on the primary button
+### primaryButtonTooltipProps
+- type: shape
+- description: Passes on any `<Tooltip/>` properties on the primary button tooltip
+### secondaryButtonText
+- type: union
+- description: Sets text label for the secondary button
+### secondaryButtonOnClick
+- type: func
+- description: Defines a call-back function after user clicks on the secondary button
+### secondaryButtonProps
+- type: custom
+- description: Passes on any `<Button/>` properties on the secondary button
+### sideActions
+- type: node
+- description: Contains a checkbox or other components at the start of the footer
+### footnote
+- type: node
+- description: Renders supplementary text or other components at the bottom of the modal
+### footnoteSkin
+- type: enum
+- description: Sets the look and feel of the footnote
+### removeContentPadding
+- type: bool
+- description: Removes 30 px left and right padding from the content area
+### width
+- type: union
+- description: Fixes the width of component; if content area is wider than `width`, it scrolls horizontally
+### maxWidth
+- type: union
+- description: Sets the maximum width of component; if content area is longer than maxWidth, it scrolls horizontally
+### height
+- type: union
+- description: Fixes the height of component
+### maxHeight
+- type: union
+- description: Sets the maximum height of component; if content area is longer than maxHeight, it scrolls vertically
+### showHeaderDivider
+- type: enum
+- description: Controls visibility of a header divider. When set to `auto`, it is shown only when scroll position is greater than 0. When set to `true`, it is always visible, and when set to `false`, it is always hidden.
+### showFooterDivider
+- type: enum
+- description: Controls visibility of a footer divider. When set to `auto`, it is shown up until content is scrolled to the very bottom. When set to `true`, it is always visible, and when set to `false`, it is always hidden.
+### overflowY
+- type: string
+- description: Determines what happens when content overflows component vertically
+### style
+- type: any
+- description: Sets object of CSS styles
+
+

package/dist/docs/components/DatePickerProps.md

@@ -0,0 +1,163 @@
+
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### dataHook
+- type: string
+- description: Applies as data-hook HTML attribute that can be used in the tests
+### autoFocus
+- type: bool
+- description: Focus selected day automatically when component mounts or updates
+### customInput
+- type: node
+- description: Override a field with a custom input element. If you only need to pass custom props to the `<Input/>`, then use `inputProps` instead.
+### inputProps
+- type: object
+- description: Allows you to pass default Input component properties
+### dateIndication
+- type: func
+- description: ##### Add an indication under a specific date.
+   Function returns the indication node of a specific date or null if this day doesn't have an indication.
+- `param` {date: Date, isSelected: boolean }
+- `date` - a date
+- `isSelected` - whether this date is the selected date
+- `return` {React.node} - the indication node of a specific date or null if this day doesn't have an indication.
+### locale
+- type: enum
+- description: Specify date picker instance locale
+### dateStyle
+- type: enum
+- description: Sets date format of locale
+### disabled
+- type: bool
+- description: Specify whether a field should be disabled or not
+### excludePastDates
+- type: bool
+- description: Specify whether past dates should be selectable or not
+### filterDate
+- type: func
+- description: ##### Specify selectable dates:
+ * `param` {Date} `date` - a date to check
+ * `return` {boolean} - true if `date` should be selectable, false otherwise
+### inputDataHook
+- type: string
+- description: Applies a data-hook HTML attribute for date picker input
+### calendarDataHook
+- type: string
+- description: Applies a data-hook HTML attribute for date picker calendar view
+### placeholderText
+- type: string
+- description: Defines a placeholder of the field
+### rtl
+- type: bool
+- description: Specify whether RTL mode is enabled or not. When true, the keyboard navigation will be changed, meaning pressing on the right arrow will navigate to the previous day, and pressing on the left arrow will navigate to the next day.
+### value
+- type: object
+- description: Defines the selected date
+### initialOpen
+- type: bool
+- description: Specify whether the calendar will be initially visible or not
+### status
+- type: enum
+- description: Controls the status of a field
+### statusMessage
+- type: node
+- description: Defines the status message to be displayed on status icon hover. If not given or empty, the tooltip won’t be shown.
+### width
+- type: union
+- description: Sets the width of picker input in pixels or percentage
+### zIndex
+- type: number
+- description: Set a desired z-index for date picker popover
+### popoverProps
+- type: shape
+- description: Allows you to pass popover properties. The default placement value depends on the rtl prop - would be 'top-start' when rtl=false and 'top-end' in case of rtl=true.
+### firstDayOfWeek
+- type: enum
+- description: Specify the starting day of a week, allowing only from 0 to 6 (Sunday to Saturday). The default value is 1 which means Monday.
+### size
+- type: enum
+- description: Specifies the size of the input
+### readOnly
+- type: bool
+- description: Specify whether date picker input is readOnly or not
+### today
+- type: union
+- description: Sets today's date. The today indication is added automatically according to the user timezone but in some cases, we need the ability to add the today indication based on the business timezone.
+### clearButton
+- type: bool
+- description: Display a clear button (x) on a non-empty field
+### onChange
+- type: func
+- description: Provides a callback function when  day in selected in the calendar
+### onClear
+- type: func
+- description: Displays clear button (X) on a non-empty input and calls callback with no arguments
+### onClose
+- type: func
+- description: Defines a callback function that is  called whenever a user presses escape, clicks outside of the element or a date is selected and `shouldCloseOnSelect` is set. Receives an event as a first argument.
+### onOpen
+- type: func
+- description: Defines a callback function which is called when date picker is opened.
+### onMonthChange
+- type: func
+- description: Defines a callback function that is called with the date of the first day of the month whenever the user selects a month in the calendar
+### disableKeyboardType
+- type: bool
+- description: Disable typing the in the input. When true, choosing a date is possible only by picking from the calendar. Default: false.
+### showYearDropdown
+- type: bool
+- description: Displays a selectable yearDropdown
+### showMonthDropdown
+- type: bool
+- description: Displays a selectable monthDropdown
+### shouldCloseOnSelect
+- type: bool
+- description: Specify whether the calendar closes on day selection
+### monthDropdownAriaLabel
+- type: string
+- description: Defines a string value that labels the months dropdown in calendar header
+### monthDropdownAriaLabelledBy
+- type: string
+- description: Identifies the element that labels the months dropdown in calendar header
+### yearDropdownAriaLabel
+- type: string
+- description: Defines a string value that labels the years dropdown in calendar header
+### yearDropdownAriaLabelledBy
+- type: string
+- description: Identifies the element that labels the years dropdown in calendar header
+### leftArrowAriaLabel
+- type: string
+- description: Defines a string value that labels the left arrow in calendar header
+### leftArrowAriaLabelledBy
+- type: string
+- description: Identifies the element that labels the left arrow in calendar header
+### rightArrowAriaLabel
+- type: string
+- description: Defines a string value that labels the right arrow in calendar header
+### rightArrowAriaLabelledBy
+- type: string
+- description: Identifies the element that labels the right arrow in calendar header
+### validate
+- type: bool
+- description: Enables internal input validation
+### onValidate
+- type: func
+- description: Defines a callback function which is called on cases when date is validated.
+- {validationType: 'outOfBoundsError' | 'formatError' | 'valid', format: string, value: string }
+- `validationType` - type 'formatError' is set when validated date is in the wrong date format
+                   - type 'outOfBoundsError' is set when 'excludePastDates' is true and date input is before today
+                   - type 'valid' is set when entered date is valid
+- `format` - is set to valid date format
+- `value` - is set to current input value
+### clearButtonTooltipContent
+- type: node
+- description: When provided, hover will display a tooltip
+### clearButtonTooltipProps
+- type: node
+- description: Tooltip props
+### renderFooter
+- type: func
+- description: Function which renders a provided node at the bottom of the Calendar.
+
+

package/dist/docs/components/DividerProps.md

@@ -0,0 +1,15 @@
+
+### 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.
+### direction
+- type: DividerDirection
+- description: The direction of the divider
+### skin
+- type: DividerSkin
+- description: The skin of the divider
+
+