@wix/design-system 1.191.2 → 1.193.0

package/dist/docs/components/HorizontalScrollProps.md

@@ -0,0 +1,21 @@
+
+### children
+- type: ReactNode
+- description: The content that will be rendered inside the scrollable window.
+### scrollDistance
+- type: number
+- description: The number of pixels the scrollable content moves per button press.
+### scrollDebounce
+- type: number
+- description: The debounce time (in milliseconds) to limit the scroll event rate.
+### gradientColor
+- type: string
+- description: The color of the gradient behind the scroll buttons.
+### scrollButtonSkin
+- type: IconButtonSkin
+- description: Skin of the scroll buttons.
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in the tests.
+
+

package/dist/docs/components/HorizontalTimelineProps.md

@@ -0,0 +1,24 @@
+
+### skin
+- type: enum
+- description: Controls the style of the component.
+### alignLabel
+- type: enum
+- description: Aligns the labels of items.
+### 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.
+### items
+- type: arrayOf
+- description: Timeline items
+ * `skin` - Controls line and text color (deprecated).
+ * `line ` - Affects the line type, can be one of: 'filled' | 'dashed'.
+ * `label` -  Text displayed below the icon.
+ * `icon ` - An icon representing a timeline item.
+ * `width ` - The width of the timeline item, can be percentage or pixels.
+ * `labelEllipsis ` - Set ellipsis for item's label  .
+
+

package/dist/docs/components/IconButtonProps.md

@@ -0,0 +1,45 @@
+
+### 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: any
+- description: Sets the skin of a component
+### priority
+- type: any
+- description: Control the priority of a component
+### size
+- type: any
+- description: Control the size of a component
+### dataHook
+- type: any
+- description: Applies a data-hook HTML attribute that can be used in the tests
+### ariaLabel
+- type: any
+- description: Define a string value that labels the button element
+### ariaLabelledBy
+- type: any
+- description: Identify the element that labels the button element
+### 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/ImageProps.md

@@ -0,0 +1,38 @@
+
+### borderRadius
+- type: union
+- description: Sets the border radius of the image box.
+### 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.
+### showBorder
+- type: bool
+- description: Specifies whether to display a border around an image.
+### src
+- type: string
+- description: Specifies an URL link to image source. If not provided, a default placeholder image will be displayed.
+### alt
+- type: string
+- description: Specifies an alt text for an image. If not provided, will be set to empty and treated as decorative.
+### width
+- type: union
+- description: Sets the width of the image box.
+### height
+- type: union
+- description: Sets the height of the image box.
+### fit
+- type: enum
+- description: Specifies image fit mode inside a box.
+Check [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) CSS property values for more info.
+### position
+- type: string
+- description: Specifies source content position inside of an image box. Accepts any valid
+[CSS position](https://developer.mozilla.org/en-US/docs/Web/CSS/position_value) value.
+### transparent
+- type: bool
+- description: Specifies whether background of Image is transparent
+
+

package/dist/docs/components/ImageViewerProps.md

@@ -0,0 +1,76 @@
+
+### 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.
+### imageUrl
+- type: string
+- description: Links to image asset source (URL). Leave it blank when image is not uploaded yet.
+### fit
+- type: enum
+- description: Specifies image fit mode inside a box.
+Check [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) CSS property values for more info.
+### status
+- type: enum
+- description: Specifies the status of a viewer.
+### statusMessage
+- type: node
+- description: Defines the message to display on status icon hover. If not given or empty there will be no tooltip.
+### tooltipProps
+- type: shape
+- description: Allows to pass all common tooltip props.
+### showUpdateButton
+- type: bool
+- description: Specifies whether the update button is visible.
+### showDownloadButton
+- type: bool
+- description: Specifies whether the download button is visible.
+### showRemoveButton
+- type: bool
+- description: Specifies whether the remove button is visible.
+### onAddImage
+- type: func
+- description: Defines a click handler, which is called every time a user clicks on an empty viewer (when no `imageUrl` is provided).
+### onUpdateImage
+- type: func
+- description: Defines a handler function, which is called every time user clicks on the ‘Update image’ button.
+### onDownloadImage
+- type: func
+- description: Defines a handler function, which is called every time user clicks on the download button.
+### onRemoveImage
+- type: func
+- description: Defines a handler function, which is called every time user clicks on the ‘Remove image’ button.
+### onImageLoad
+- type: func
+- description: Defines a handler function which is called right after image loads.
+### addImageInfo
+- type: string
+- description: Specifies a message to display in a tooltip when no image is uploaded yet.
+### updateImageInfo
+- type: string
+- description: Defines a message to display in a tooltip when ‘Update’ action button is hovered.
+### downloadImageInfo
+- type: string
+- description: Defines a message to display in a tooltip when ‘Download’ action button is hovered.
+### removeImageInfo
+- type: string
+- description: Defines a message to display in a tooltip, when ‘remove’ action button is hovered.
+### moreImageInfo
+- type: string
+- description: Defines a message to display in a tooltip when the ‘More’ action button is hovered. Relevant only when all buttons are visible.
+### removeRoundedBorders
+- type: bool
+- description: Removes default border radius.
+### width
+- type: union
+- description: Sets the width of the viewer box.
+### height
+- type: union
+- description: Sets the height of the viewer box.
+### disabled
+- type: bool
+- description: Specifies whether the component is disabled.
+
+

package/dist/docs/components/InfoIconProps.md

@@ -0,0 +1,21 @@
+
+### dataHook
+- type: string
+- description: A hook for testing purposes.
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### size
+- type: enum
+- description: Controls the icon size.
+### content
+- type: node
+- description: Tooltip content.
+### tooltipProps
+- type: shape
+- description: Customize <Tooltip/> appearance with its props component.
+### children
+- type: node
+- description: A component to replace default the icon (internal use only).
+
+

package/dist/docs/components/InputAreaProps.md

@@ -0,0 +1,123 @@
+
+### 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.
+### children
+- type: func
+- description: Specifies custom textarea render function
+### 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).
+### size
+- type: enum
+- description: Controls the size of the input.
+### 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.
+### 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.
+### 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.
+### hasCounter
+- type: bool
+- description: Specifies whether character count is enabled.
+### id
+- type: string
+- description: Assigns an unique identifier for the root element.
+### name
+- type: string
+- description: Reference element data when a form is submitted.
+### maxHeight
+- type: string
+- description: Sets the maximum height of an area in pixels.
+### maxLength
+- type: number
+- description: Defines the maximum text length in number of characters.
+### minHeight
+- type: string
+- description: Sets the minimum height of an area in pixels.
+### onBlur
+- type: func
+- description: Defines a standard input onBlur callback
+### onChange
+- type: func
+- description: Defines a standard input onChange callback.
+### 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.
+### onKeyDown
+- type: func
+- description: Defines a standard input onKeyDown callback.
+### onKeyUp
+- type: func
+- description: Defines a standard input onKeyUp callback.
+### onCompositionStart
+- type: func
+- description: Defines a standard input onCompositionStart callback.
+### onCompositionEnd
+- type: func
+- description: Defines a standard input onCompositionEnd callback.
+### placeholder
+- type: string
+- description: Sets a placeholder message to display.
+### readOnly
+- type: bool
+- description: Specifies whether input is read only.
+### resizable
+- type: bool
+- description: Specifies whether area can be manually resized by the user.
+### rows
+- type: number
+- description: Sets initial height of an area to fit a specified number of rows.
+### autoGrow
+- type: bool
+- description: Specifies whether area should grow and shrink according to user input.
+### minRowsAutoGrow
+- type: number
+- description: Sets the minimum amount of rows the component can have in `autoGrow` mode
+### maxRowsAutoGrow
+- type: number
+- description: Sets the maximum amount of rows the component can have in `autoGrow` mode
+### tabIndex
+- type: number
+- description: Indicates that element can be focused and where it participates in sequential keyboard navigation.
+### tooltipPlacement
+- type: string
+- description: Controls placement of a status tooltip.
+### value
+- type: string
+- description: Defines input value.
+### required
+- type: bool
+- description: Specifies whether the input area is a mandatory field.
+
+

package/dist/docs/components/InputProps.md

@@ -0,0 +1,198 @@
+
+### 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.
+### id
+- type: string
+- description: Assigns a unique identifier for the root element
+### role
+- type: string
+- description: Specifies the role of the input element for accessibility
+### 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: boolean
+- description: Focus the element on mount (standard React input autoFocus)
+### autoSelect
+- type: boolean
+- description: Automatically selects the entire input text
+### 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
+### defaultValue
+- type: InputValue
+- description: Defines the initial value of an input
+### disabled
+- type: boolean
+- description: Specifies whether input should be disabled or not
+### status
+- type: InputStatus
+- description: Specify the status of a field
+### statusMessage
+- type: ReactNode
+- description: Defines the message to display on status icon hover. If not given or empty there will be no tooltip.
+### statusMessageTooltipProps
+- type: TooltipCommonProps
+- description: Status message tooltip props
+### hideStatusSuffix
+- type: boolean
+- description: Specifies whether status suffix should be hidden
+### forceFocus
+- type: boolean
+- description: USED FOR TESTING - forces focus state on the input
+### forceHover
+- type: boolean
+- description: USED FOR TESTING - forces hover state on the input
+### maxLength
+- type: number
+- description: Sets the maximum number of characters that can be inserted to a field
+### menuArrow
+- type: boolean
+- description: Specifies whether input should have a dropdown menu arrow on the right side
+### clearButton
+- type: boolean
+- description: Displays clear button (X) on a non-empty input
+### focusOnClearClick
+- type: boolean
+- description: Specifies whether to focus the field when clear button is clicked
+### name
+- type: string
+- description: Reference element data when a form is submitted
+### border
+- type: "standard" | "round" | "bottomLine" | "none"
+- description: Control the border style of input
+### noLeftBorderRadius
+- type: boolean
+- description: Specifies whether input shouldn’t have rounded corners on its left
+### noRightBorderRadius
+- type: boolean
+- description: Specifies whether input shouldn’t have rounded corners on its right
+### onBlur
+- type: FocusEventHandler<HTMLInputElement>
+- description: Defines a standard input onBlur callback
+### onChange
+- type: ChangeEventHandler<HTMLInputElement>
+- description: Defines a standard input onChange callback
+### onClear
+- type: MouseEventHandler<HTMLButtonElement>
+- description: Displays clear button (X) on a non-empty input and calls a callback function
+### onCompositionChange
+- type: (isComposing: boolean) => void
+- description: Defines a callback function called on compositionstart/compositionend events
+### onEnterPressed
+- type: KeyboardEventHandler<HTMLInputElement>
+- description: Defines a callback handler that is called when the user presses -enter-
+### onEscapePressed
+- type: KeyboardEventHandler<HTMLInputElement>
+- description: Defines a callback handler that is called when the user presses -escape-
+### onFocus
+- type: FocusEventHandler<HTMLInputElement>
+- description: Defines a standard input onFocus callback
+### onInputClicked
+- type: MouseEventHandler<HTMLInputElement | HTMLDivElement>
+- description: Defines a standard input onClick callback
+### onKeyDown
+- type: KeyboardEventHandler<HTMLInputElement>
+- description: Defines a standard input onKeyDown callback
+### onKeyUp
+- type: KeyboardEventHandler<HTMLInputElement>
+- description: Defines a standard input onKeyUp callback
+### onPaste
+- type: ClipboardEventHandler<HTMLInputElement>
+- description: Defines a callback handler that is called when user pastes text from a clipboard (using a mouse or keyboard shortcut)
+### onCopy
+- type: ClipboardEventHandler<HTMLInputElement>
+- description: Defines a callback handler that is called when user copies text to a clipboard (using a mouse or keyboard shortcut)
+### placeholder
+- type: string
+- description: Sets a placeholder message to display
+### prefix
+- type: ReactNode
+- description: Pass a component you want to show as the prefix of the input, e.g., text, icon
+### readOnly
+- type: boolean
+- description: Specifies whether input is read only
+### disableEditing
+- type: boolean
+- description: Restricts input editing
+### rtl
+- type: boolean
+- description: No description
+### size
+- type: InputSize
+- description: Controls the size of the input. Default value: `medium`
+### suffix
+- type: ReactNode
+- description: Pass a component you want to show as the suffix of the input, e.g., text, icon
+### tabIndex
+- type: number
+- description: Indicates that element can be focused and where it participates in sequential keyboard navigation
+### textOverflow
+- type: "clip" | "ellipsis"
+- description: Handles text overflow behavior. It can either `clip` (default) or display `ellipsis`.
+### tooltipPlacement
+- type: Placement
+- description: Controls placement of a status tooltip
+### type
+- type: string
+- description: Specifies the type of `<input/>` element to display. Default is text.
+### value
+- type: string | number
+- description: Specifies the current value of the element
+### withSelection
+- type: boolean
+- description: No description
+### required
+- type: boolean
+- description: Specifies whether input is mandatory
+### min
+- type: number
+- description: Sets a minimum value of an input. Similar to HTML5 min attribute.
+### max
+- type: number
+- description: Sets a maximum value of an input. Similar to html5 max attribute.
+### step
+- type: number
+- description: Specifies the interval between number values
+### customInput
+- type: Function | ReactNode
+- description: Render a custom input instead of the default html input tag
+### pattern
+- type: string
+- description: Sets a pattern that typed value must match to be valid (regex)
+### inputRef
+- type: (input: HTMLInputElement) => void
+- description: No description
+### inputmode
+- type: string
+- description: No description
+### ariaRoledescription
+- type: string
+- description: No description
+### clearButtonTooltipContent
+- type: ReactNode
+- description: When provided hover will display a tooltip with content
+### clearButtonTooltipProps
+- type: TooltipCommonProps
+- description: Clear button tooltip props
+### inputElementRef
+- type: any
+- description: Specifies reference of the input element
+### 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/InputShellProps.md

@@ -0,0 +1,40 @@
+
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute to be used in the tests.
+### children
+- type: ReactNode
+- description: Allows to render any component as a child item.
+### menuArrow
+- type: boolean
+- description: Specifies whether input should have a dropdown menu arrow on the right side.
+### focused
+- type: boolean | "auto"
+- description: Controls visual focus state.
+### size
+- type: ValuesOf<{ readonly tiny: "tiny"; readonly small: "small"; readonly medium: "medium"; readonly large: "large"; }>
+- description: Controls the size of the input. Default value: `medium`
+### placeholder
+- type: ReactNode
+- description: Sets a placeholder message to display
+### as
+- type: "button" | "div"
+- description: Renders the component as button.
+Renders the component as div.
+### disabled
+- type: boolean
+- description: Specifies whether user interactions are disabled.
+### tabIndex
+- type: number
+- description: Indicates that element can be focused and where it participates in sequential keyboard navigation.
+### aria-haspopup
+- type: boolean | "menu" | "listbox" | "tree" | "grid" | "dialog" | "true" | "false"
+- description: Indicates the element can trigger a popup and what kind of popup will be displayed.
+### aria-controls
+- type: string
+- description: Identifies the element whose contents or presence are controlled by the component.
+### onClick
+- type: MouseEventHandler<HTMLButtonElement> | MouseEventHandler<HTMLDivElement>
+- description: A callback function called on component click.
+
+