@wix/design-system 1.191.2 → 1.193.0

package/dist/docs/components/TableProps.md

@@ -0,0 +1,182 @@
+
+### children
+- type: any
+- description: Accept any wrapper component as a child element. It must eventually include <Table.Content/>.
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute to be used in the tests
+### onSelectionChanged
+- type: func
+- description: Defines a callback function which is called when selection happens. <br />
+There are 3 types of selections:
+   * `ALL` - bulk selection checkbox has been triggered to select all items
+   * `SINGLE_TOGGLE` - a checkbox to select one item from the list has been triggered. The change object will also include an `id` prop with the unique item identifier and a `value` prop with the new boolean selection state of the item.
+   * `NONE` - bulk selection has been triggered to unselect all items.
+### onSelectionStarted
+- type: func
+- description: Called when item selection triggered but not changed yet.
+### showSelection
+- type: bool
+- description: Displays selection checkbox as a first column in each row. To hide the selection checkbox from a specific row, set its `row.unselectable` value to true in the data array.
+### hideBulkSelectionCheckbox
+- type: bool
+- description: Hides bulk selection checkbox in the table titlebar
+### selectedIds
+- type: union
+- description: Defines an array of selected rows
+### selectionDisabled
+- type: union
+- description: Specifies whether table row selection is restricted at a given moment. Can be defined as:
+   * `bool` disables selection for all table rows
+   * `function` that will be called for each row to check whether to disable selection or not depending on specified condition
+### deselectRowsByDefault
+- type: bool
+- description: Controls bulk selection checkbox behaviour in indeterminate state. By default, first click on indeterminate state selects all items in the table. If set to `true`, first click will deselect all items instead.
+### withWrapper
+- type: bool
+- description: When false then Table would not create a `<div/>` wrapper around it's children.
+ Useful when using `<Table/>` to wrap a `<Page/>` component, in that case we use the `<Table/>` only as a context provider and it does not render anything to the DOM by itself.
+### onSortClick
+- type: func
+- description: Defines a callback function which is called on column title click
+### allowMultiDetailsExpansion
+- type: bool
+- description: Allows to expand multiple row details at once
+### data
+- type: array
+- description: Defines any amount of data to be displayed in the table. Properties for each entry:<br>
+  * `id`: should be provided and will be used as a React key internally
+  * `unselectable`: specifies whether a row can be selected by a user when `showSelection` is enabled for the whole table
+  * `checkboxTooltipContent`: defines tooltip content to show when user hovers selection checkbox
+  * any number of records with unique identifiers for column rendering
+### columns
+- type: arrayOf
+- description: Configures table columns. Required properties for each column:<br />
+   * `title`: specifies a text string or an element to display in the table titlebar
+   * `render`: defines a function which will be called to display this row value for this column<br>
+
+ Optional properties for each column:
+   * `onCellClick`: defines a  callback function which is called each time a cell in this column is clicked. Signature: `onCellClick(column, rowData, rowNum, event)`
+   * `sortable`: specifies whether field is sortable. If true clicking the header will call `onSortClick`.
+   * `sortDescending`: specifies what sort icon to display in the column header. `true` shows an up arrow, `false` shows a down arrow, `undefined' shows no icon.
+   * `infoTooltipProps`: controls info [tooltip](/?path=/story/components-overlays--tooltip) appearance in titlebar. Note: `dataHook`, `moveBy` and `children` will not be passed to tooltip.
+   * `style`: applies a custom CSS class to the component’s root element
+   * `align`: controls the alignment of the column content
+   * `width`: sets the width of a column. No value means column will try to contain its children, if possible.
+   * `important`: increases text size of this column data across all rows, sets font color to D10
+   * `stickyActionCell`: specifies whether `<TableActionCell/>` controls are fixed to the right side of the table
+### dynamicRowClass
+- type: func
+- description: Defines a function that gets row data and returns a class(es) to apply to that specific row
+### isRowHighlight
+- type: func
+- description: Defines a function that gets row data and returns boolean value specifying whether row is highlighted or not
+### isRowActive
+- type: func
+- description: Defines a function that gets row data and returns boolean value specifying whether row is active or not
+### hasMore
+- type: bool
+- description: Indicates whether there is additional data to load from external sources though `loadMore` function. When set to true `loadMore` property will be called until false value is received.
+### initialLoad
+- type: bool
+- description: Invokes `loadMore` on the initial table render
+### id
+- type: string
+- description: Assigns an unique identifier for the table
+### infiniteScroll
+- type: bool
+- description: Renders data gradually as user scrolls down the list
+### totalSelectableCount
+- type: number
+- description: Specifies the total number of selectable items in the table (including items not loaded yet).
+When ‘Select all’ is triggered in infinite scroll tables, newly loaded items will be selected automatically. In this case, `SelectionContext` holds not-selected items rather than the selected ones.
+SelectionContext.infiniteBulkSelected is true and SelectionContext.selectedCount is the value of totalSelectableCount minus the count of unselected items.
+### itemsPerPage
+- type: number
+- description: Determines the number of rows to rendered on each load of an infinite scroll table
+### loader
+- type: node
+- description: Pass a loader to show when loading more items in infinite scroll table. Most commonly pass <Loader/> or <Text/> components.
+### loadMore
+- type: func
+- description: Defines a callback function which is called each time user request to load more items
+### onRowClick
+- type: func
+- description: Defines a callback function which is called each time user clicks on the row. This prop is required to enable row hover effect.
+### onMouseEnterRow
+- type: func
+- description: Defines a callback function which is called each time mouse enters the row
+### onMouseLeaveRow
+- type: func
+- description: Defines a callback function which is called each time mouse leaves the row
+### useWindow
+- type: bool
+- description: Add scroll listeners to the window, or else, the component's parentNode.
+### scrollElement
+- type: object
+- description: Adds scroll listeners to specified DOM object
+### rowVerticalPadding
+- type: enum
+- description: Controls the amount of white space above and below row content:
+- `large`: 24px
+- `medium`: 18px
+- `small`: with the feature toggle: 15px, without the feature toggle: 12px
+- `tiny`: 12px
+- `xTiny`: 6px
+- `xxTiny`: 3px
+### rowDetails
+- type: func
+- description: Defines a function that returns a component to render in the expanded row content area
+### removeRowDetailsPadding
+- type: bool
+- description: Removes paddings from an expanded row content area
+### rowDataHook
+- type: union
+- description: Applies a data-hook HTML attribute or a function that calculates the data-hook for each row on the table
+### rowClass
+- type: string
+- description: A class to apply to all table body rows
+### showHeaderWhenEmpty
+- type: bool
+- description: Specifies whether to show table title bar when there’s no data in the table
+### showLastRowDivider
+- type: bool
+- description: Specifies whether last row in the table should have a bottom divider
+### isApplyColumnWidthStyle
+- type: bool
+- description: A flag specifying weather to apply column width style to table cells
+### virtualized
+- type: bool
+- description: ++EXPERIMENTAL++ Virtualize the table scrolling for long list items
+### virtualizedTableHeight
+- type: number
+- description: ++EXPERIMENTAL++ Controls virtualized table height
+### virtualizedLineHeight
+- type: number
+- description: ++EXPERIMENTAL++ Set virtualized table row height
+### virtualizedListRef
+- type: any
+- description: ++EXPERIMENTAL++ Set ref on virtualized list containing table rows
+### width
+- type: string
+- description: Defines the width of the table in percentages or pixels.
+### skin
+- type: enum
+- description: Controls the appearance of a table title bar
+### horizontalScroll
+- type: bool
+- description: Specifies whether table content can exceed the width of the table. If enabled, table can be scrolled horizontally.
+### stickyColumns
+- type: number
+- description: Specifies the number of columns to stick to the left side in tables that support horizontal scroll
+### isRowDisabled
+- type: func
+- description: Defines a function to call for each row to check whether row should appear as disabled or not
+### dragAndDrop
+- type: object
+- description: No description
+### onDragEnd
+- type: func
+- description: No description
+
+

package/dist/docs/components/TableToolbarProps.md

@@ -0,0 +1,12 @@
+
+### 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
+### removeVerticalPadding
+- type: bool
+- description: Removes vertical paddings from the component
+
+

package/dist/docs/components/TabsProps.md

@@ -0,0 +1,45 @@
+
+### 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.
+### activeId
+- type: string | number
+- description: A selected tab id
+### hasDivider
+- type: boolean
+- description: Places a divider on bottom
+### items
+- type: Item[]
+- description: An array of tabs
+### minWidth
+- type: string | number
+- description: A minimum width of the container
+### alignment
+- type: TabsAlignment
+- description: Control text alignment in tab item
+### type
+- type: TabsType
+- description: One of: '', compact, compactSide, uniformSide, uniformFull
+### size
+- type: "small" | "medium"
+- description: One of: medium, small
+### sideContent
+- type: ReactNode
+- description: Can be either string or renderable node
+### width
+- type: string | number
+- description: A specific width of a tab (only for uniformSide type)
+### onClick
+- type: (item: Item) => void
+- description: Click event handler
+### scrollOnOverflow
+- type: boolean
+- description: Wraps overflowing content within a scrollable container.
+### horizontalScrollProps
+- type: HorizontalScrollCommonProps
+- description: Allows to pass all common horizontal scroll props.
+
+

package/dist/docs/components/TagListProps.md

@@ -0,0 +1,36 @@
+
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute to be used in the tests.
+### tags
+- type: Omit<TagProps, "size" | "onRemove">[]
+- description: Lists all component’s tags and its properties.
+### size
+- type: TagListSize
+- description: Sets the size of a component.
+### onTagRemove
+- type: (id: string) => void
+- description: Defines a callback function that passes an `id` property as a parameter when removing a tag.
+### initiallyExpanded
+- type: boolean
+- description: Defines whether the list is:
+- initially expanded (shows all tags)
+- or collapsed (shows tags up to the max visible number)
+### maxVisibleTags
+- type: number
+- description: Sets an amount of tags to show before expanding.
+### actionButton
+- type: TagListActionButtonProps
+- description: Defines the label of an action button and its onClick function.
+### toggleMoreButton
+- type: (amountOfHiddenTags: number, isExpanded: boolean) => ToggleMoreButtonProps
+- description: Defines a function which provides props for the ToggleMoreButton.
+##### toggleMoreButton signature is:
+`function(amountOfHiddenTags: number, isExpanded: boolean) => ToggleMoreButtonProps`
+
+##### ToggleMoreButtonProps:
+* `label`: string
+* `tooltipContent`: node
+* `tooltipProps`: TooltipCommonProps
+
+

package/dist/docs/components/TagProps.md

@@ -0,0 +1,43 @@
+
+### disabled
+- type: boolean
+- description: Specifies whether the tag should be disabled
+### id
+- type: string
+- description: Assigns an unique identifier for the tag
+### onClick
+- type: (id: string, event: MouseEvent<HTMLButtonElement, MouseEvent>) => void
+- description: Defines a callback function which is called whenever a tag component is clicked.
+It passes the id property as the first parameter and a mouse event as second parameter.
+### onRemove
+- type: (id: string) => void
+- description: Defines a callback function which is called when removing the tag. It passes the id property as a parameter.
+### removable
+- type: boolean
+- description: Specifies whether the tag is removable or not. If enabled, a small clickable X icon is displayed on the right side of a component.
+### size
+- type: TagSize
+- description: Controls the size of the component
+### theme
+- type: TagTheme
+- description: Sets the theme of the component
+### thumb
+- type: ReactElement<any, string | JSXElementConstructor<any>>
+- description: Displays a thumbnail at the front of a tag label. Usually contain icons or `<Avatar/>`.
+### maxWidth
+- type: MaxWidth<string | number>
+- description: Sets a maximum tag width
+### ellipsisProps
+- type: EllipsisCommonProps
+- description: Ellipsis props
+### 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
+### children
+- type: ReactNode
+- description: Sets the text of the tag
+
+

package/dist/docs/components/TestimonialListProps.md

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

package/dist/docs/components/TextButtonProps.md

@@ -0,0 +1,77 @@
+
+### 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: TextButtonSkin
+- description: Specifies the skin of a button
+### underline
+- type: TextButtonUnderline
+- description: Specifies whether to display and when to display an underline below button label
+### weight
+- type: TextButtonWeight
+- description: Controls the font weight of button label
+### size
+- type: TextButtonSize
+- description: Controls the size of a button
+### suffixIcon
+- type: IconElement
+- description: Pass an icon or a component to display at the end of a label (e.g., svg, image, etc.)
+### prefixIcon
+- type: IconElement
+- description: Pass an icon or a component to display at the front of a label (e.g., svg, image, etc.)
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in the tests
+### fluid
+- type: boolean
+- description: Stretches button to fill a 100% of its parent container width
+### 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.
+### ariaLabel
+- type: string
+- description: Defines a string value that labels the button element to screen reader users
+### ariaLabelledBy
+- type: string
+- description: Identifies the element that labels the button element
+### ariaHaspopup
+- type: string
+- description: Indicates to screen reader users whether an interactive popup element, such as menu or dialog, can be triggered by a button
+### ariaExpanded
+- type: boolean
+- description: Indicates to screen reader users whether the collapsible content below is in the expanded or in the collapsed state
+### ariaControls
+- type: string
+- description: Identifies the element whose contents or presence are controlled by the button
+### ariaActiveDescendant
+- type: string
+- description: Identifies the element that represents the currently active descendant of the button
+### 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.
+### wrap
+- type: boolean
+- description: Enables wrapping when text is longer than its parent container. Cannot be used with as="button"
+### AnchorHTMLAttributes
+- type: All props from AnchorHTMLAttributes that comes from @types/react/index.d.ts
+- description: No description
+
+

package/dist/docs/components/TextProps.md

@@ -0,0 +1,111 @@
+
+### 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
+### appendTo
+- type: AppendTo
+- description: No description
+### disabled
+- type: boolean
+- description: No description
+### enterDelay
+- type: number
+- description: No description
+### exitDelay
+- type: number
+- description: No description
+### fixed
+- type: boolean
+- description: No description
+### flip
+- type: boolean
+- description: No description
+### maxWidth
+- type: React.CSSProperties
+- description: No description
+### moveBy
+- type: Partial<{ x: number; y: number; }>
+- description: No description
+### moveArrowTo
+- type: number
+- description: No description
+### onHide
+- type: () => void
+- description: No description
+### onShow
+- type: () => void
+- description: No description
+### placement
+- type: Placement
+- description: No description
+### textAlign
+- type: TooltipTextAlign
+- description: No description
+### zIndex
+- type: React.CSSProperties
+- description: No description
+### interactive
+- type: boolean
+- description: No description
+### ellipsis
+- type: boolean
+- description: No description
+### showTooltip
+- type: boolean
+- description: No description
+### maxLines
+- type: number
+- description: No description
+### onEllipsisStateChange
+- type: ((isActive: boolean) => void) & ((isActive: boolean) => void)
+- description: A callback fired when ellipsis state changes.
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in the tests.
+### tagName
+- type: "object" | "span" | "a" | "label" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 93 more ... | (string & ComponentType<...>)
+- description: Defines a tag name that text should be rendered inside of (e.g., div, a, p).
+### size
+- type: TextSize
+- description: Controls the font size of the text.
+### secondary
+- type: boolean
+- description: Sets text type to secondary. Affects font color only.
+### skin
+- type: TextSkin
+- description: Controls the skin of the text.
+### light
+- type: boolean
+- description: Inverts text color so it can be used on dark backgrounds.
+### weight
+- type: TextWeight
+- description: Controls the font weight of the text.
+### listStyle
+- type: ListStyle
+- description: Sets list items style.
+### tooltipProps
+- type: TooltipCommonProps
+- description: Allows to pass all common tooltip props.
+### widows
+- type: boolean
+- description: if true it will support widows in the text
+### suffix
+- type: ReactNode
+- description: Component displayed at the end of text, after ellipsis if truncated.
+### overflowWrap
+- type: OverflowWrap
+- description: Sets "overflow-wrap" CSS property. Controls how text will behave upon overflowing parent component
+### AnchorHTMLAttributes
+- type: All props from AnchorHTMLAttributes that comes from @types/react/index.d.ts
+- description: No description
+### LabelHTMLAttributes
+- type: All props from LabelHTMLAttributes that comes from @types/react/index.d.ts
+- description: No description
+
+

package/dist/docs/components/ThemeProviderProps.md

@@ -0,0 +1,9 @@
+
+### dataHook
+- type: string
+- description: Applied as data-hook HTML attribute that can be used in the tests
+### theme
+- type: shape
+- description: A theme object
+
+

package/dist/docs/components/ThumbnailProps.md

@@ -0,0 +1,68 @@
+
+### 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: node
+- description: Renders specified children items inside of the thumbnail. Accepts any kind of content. When passed, title will be rendered below a thumbnail.
+### title
+- type: node
+- description: Sets the title of a thumbnail.
+### description
+- type: node
+- description: Sets thumbnail description.
+### image
+- type: node
+- description: Specifies an image to be displayed inside of a thumbnail.
+If given as string, it will be used within `<img/>`.
+Otherwise can be given as React.Node
+### size
+- type: enum
+- description: Controls the size of a thumbnail.
+### selected
+- type: bool
+- description: Specifies whether a thumbnail is selected.
+### disabled
+- type: bool
+- description: Specifies whether thumbnail interactions are disabled.
+### hideSelectedIcon
+- type: bool
+- description: Hides a checkmark icon that indicates selected thumbnail. Selected option will be highlighted with border only.
+### backgroundImage
+- type: node
+- description: Render image as a background of a thumbnail. As a result, title is rendered below the image thumbnail.
+### onClick
+- type: func
+- description: Defines a callback function which is called every time a thumbnail is clicked.
+### onMouseOver
+- type: func
+- description: Defines a callback function which is called every time mouse is over a thumbnail.
+### width
+- type: union
+- description: Controls the width of a thumbnail.
+### height
+- type: union
+- description: Controls the height of a thumbnail.
+### contentAlignment
+- type: enum
+- description: Controls vertical alignment of content.
+### ellipsis
+- type: bool
+- description: Enables ellipsis text truncation.
+### maxLines
+- type: number
+- description: Controls maximum lines that is allowed before ellipsis text truncation is applied
+### textPosition
+- type: enum
+- description: Controls text position whether it is outside or inside of a thumbnail
+### noPadding
+- type: bool
+- description: Turns off padding for thumbnail with textPosition='inside'
+### tooltipProps
+- type: shape
+- description: Allows to pass tooltip common props.
+
+