@wix/design-system 1.191.2 → 1.193.0

package/dist/docs/components/TimeInputProps.md

@@ -0,0 +1,87 @@
+
+### 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.
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in the tests
+### disabled
+- type: bool
+- description: Specifies whether component is disabled
+### locale
+- type: enum
+- description: Sets locale and formats time according to it
+### onChange
+- type: func
+- description: Defines a callback function which is called on every time value changes
+### onInvalid
+- type: func
+- description: Defines a callback function which is called on cases when invalid time is typed or confirmed with an action.
+- return {{ validationType: 'formatError' | 'outOfBoundsError', value: string }}
+- `validationType` - type 'formatError'is set when value is in the wrong time format
+                   - type 'outOfBoundsError' is set when `excludePastTimes` or `filterTime` is used and value does not match the filters
+- `value` - is set to current input value
+### placeholder
+- type: string
+- description: Sets a placeholder message to display
+### prefix
+- type: node
+- description: Pass a component you want to show as the prefix of the input, e.g., text, icon
+### readOnly
+- type: bool
+- description: Specifies whether input is read only
+### autoSelect
+- type: bool
+- description: Specifies whether input is auto selected on focus
+### size
+- type: enum
+- description: Controls the size of the input
+### status
+- type: enum
+- description: Specify the status of a field
+### statusMessage
+- type: node
+- description: Defines the message to display on status icon hover. If not given or empty there will be no tooltip.
+### invalidMessage
+- type: string
+- description: Enables internal validation and defines a message to display when user types invalid time value
+### step
+- type: number
+- description: Specifies the interval between time values shown in dropdown
+### suffix
+- type: node
+- description: Pass a component you want to show as the suffix of the input, e.g., text, icon
+### timeStyle
+- type: string
+- description: Specifies what time formatting style to use when calling `format()`
+### value
+- type: object
+- description: Specifies the current value of the input
+### width
+- type: enum
+- description: Controls the width of the component. `auto` will resize the input to match width of its contents, while `100%` will take up the full parent container width.
+### onFocus
+- type: func
+- description: Defines a standard input `onFocus` callback
+### onBlur
+- type: func
+- description: Defines a standard input `onBlur` callback
+### excludePastTimes
+- type: bool
+- description: Specify whether past time slots should be shown or not
+### filterTime
+- type: func
+- description: Specify selectable time slots:
+ * `param` {Date} `value` - a time to check
+ * `return` {boolean} - true if `value` should be shown in time slots dropdown, false otherwise
+### hideStatusSuffix
+- type: bool
+- description: Specifies whether status suffix is hidden.
+### popoverProps
+- type: shape
+- description: Allows to pass all common popover props.
+
+

package/dist/docs/components/TimeTableProps.md

@@ -0,0 +1,34 @@
+
+### dataHook
+- type: string
+- description: Hook for testing purposes.
+### onChange
+- type: func
+- description: Event triggered on column data change:
+`onChange(columns, { addedToColumnIndex, removedFromColumnIndex, addedItemIndex, removedItemIndex })`
+### columns
+- type: arrayOf
+- description: Column data configuration. Item content is provided as a simple node or a
+render function with `content` property. When render function is used the
+signature is:
+`({ Item, draggable, disabled }) => {}`:
+- `Item` - component used to provide default item visual representation.
+You should render `<Item draggable={draggable} disabled={disabled}>...</Item>`
+- `draggable` - item is draggable.
+- `disabled` - item is disabled.
+### onAdd
+- type: func
+- description: Event triggered on add button click: `onAdd(columnIndex)`.
+When not provided the button will be hidden.
+### addItemButtonLabel
+- type: node
+- description: Title of add button.
+### insertPosition
+- type: enum
+- description: Position where dragged items will be inserted. Using `any` value will
+allow the items to be re-ordered within the same column.
+### height
+- type: union
+- description: Custom table height.
+
+

package/dist/docs/components/TimelineProps.md

@@ -0,0 +1,22 @@
+
+### 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
+### items
+- type: TimelineItem[]
+- description: Defines each individual event item in the component:
+- `label` stores a text string naming the event or renders other components as its children
+- `labelAction` stores an action button (or other components) related to the event
+- `customPrefix` defines a custom milestone symbol for an item on the vertical axis
+- `suffix` stores a date of the event (or other components)
+### gap
+- type: string
+- description: Sets the distance that separates each item from the one below
+### skin
+- type: TimelineSkin
+- description: Sets the skin of the component
+
+

package/dist/docs/components/ToastProps.md

@@ -0,0 +1,27 @@
+
+### key
+- type: string
+- description: Toast key
+### role
+- type: "alert" | "status"
+- description: Aria role for the toast.
+### id
+- type: string
+- description: Toast id
+### 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.
+### dismissible
+- type: boolean
+- description: Whether the toast should render the dismiss button.
+### dismissLabel
+- type: string
+- description: Aria label for the dismiss button.
+### onDismiss
+- type: (event?: React.MouseEvent) => void
+- description: Callback function called whenever the user clicks the dismiss button.
+
+

package/dist/docs/components/ToggleButtonProps.md

@@ -0,0 +1,51 @@
+
+### as
+- type: union
+- description: render as some other component or DOM tag
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### children
+- type: node
+- description: Used for passing any @wix/design-system icon. For external icon make sure to follow ux sizing guidelines
+### skin
+- type: enum
+- description: Button skins
+### size
+- type: enum
+- description: Button size
+### shape
+- type: enum
+- description: Button shape
+### labelValue
+- type: node
+- description: Label content
+### labelPlacement
+- type: enum
+- description: Label placement
+### labelEllipsis
+- type: bool
+- description: Whether label should have ellipsis
+### onClick
+- type: func
+- description: Click event handler
+### selected
+- type: bool
+- description: Applies selected styles
+### interactive
+- type: bool
+- description: Enables pointer events of a selected button.
+### disabled
+- type: bool
+- description: Applies disabled styles
+### border
+- type: bool
+- description: Applies border
+### dataHook
+- type: string
+- description: String based data hook
+### tooltipProps
+- type: shape
+- description: Tooltip props for label. Applied only when `labelPlacement` is `tooltip`.
+
+

package/dist/docs/components/ToggleSwitchProps.md

@@ -0,0 +1,30 @@
+
+### 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 an unique identifier for the root element.
+### skin
+- type: enum
+- description: Controls the skin of a toggle.
+### size
+- type: enum
+- description: Controls the size of a toggle.
+### checked
+- type: bool
+- description: Specifies whether toggle is checked.
+### disabled
+- type: bool
+- description: Specifies whether toggle is disabled.
+### onChange
+- type: func
+- description: Defines a callback function which is called every time toggle state changes.
+### tabIndex
+- type: number
+- description: Indicates that element can be focused and where it participates in sequential keyboard navigation.
+
+

package/dist/docs/components/TooltipProps.md

@@ -0,0 +1,90 @@
+
+### 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.
+### children
+- type: any
+- description: Defines tooltip’s trigger element
+### content
+- type: React.ReactNode
+- description: Defines the content to be shown inside a tooltip
+### disabled
+- type: boolean
+- description: Allows showing a tooltip when hovering on a disabled trigger element with mouse
+### textAlign
+- type: TooltipTextAlign
+- description: Controls the alignment of tooltip’s content
+### enterDelay
+- type: number
+- description: Sets time to wait before showing the tooltip (in milliseconds)
+### exitDelay
+- type: number
+- description: Sets time to wait before hiding the tooltip (in milliseconds)
+### moveBy
+- type: Partial<{ x: number; y: number; }>
+- description: Moves a tooltip in relation to its trigger element on x or y axis
+### moveArrowTo
+- type: number
+- description: Moves a tooltip’s arrow by a defined amount
+### appendTo
+- type: AppendTo
+- description: Calculates tooltip’s position in relation to a DOM element.
+Can be either: 'window', 'scrollParent', 'viewport', 'parent', element or
+function based predicate. I.e., (elm) => elm.getAttribute('data-hook') === 'value
+### flip
+- type: boolean
+- description: Flips a tooltip’s placement when it starts to overlap its trigger element
+### fixed
+- type: boolean
+- description: Enables keeping a tooltip at its original placement even when it is being positioned outside the boundary
+### maxWidth
+- type: React.CSSProperties
+- description: Defines max width of a tooltip in px. If content is wider than maxWidth allows, it wraps into multiple lines.
+### onShow
+- type: () => void
+- description: Defines a callback function on tooltip’s show event
+### onHide
+- type: () => void
+- description: Defines a callback function on tooltip’s hide event
+### placement
+- type: Placement
+- description: Sets tooltip’s placement in relation to its trigger element
+### size
+- type: TooltipSize
+- description: Controls the size of a tooltip
+### zIndex
+- type: React.CSSProperties
+- description: Controls the tooltip’s z-index
+### fluid
+- type: boolean
+- description: Stretches the root element to the width of its container
+### aria-labelledby
+- type: string
+- description: Connects tooltip’s trigger element to tooltip’s label content for assistive technologies.
+Use this when the action doesn't have any visual text content, i.e. Icon Button.
+Currently only one, either aria-labelledby or aria-describedby is supported.
+If both are provided aria-labelledby takes priority.
+### aria-describedby
+- type: string
+- description: Connects tooltip’s trigger element to tooltip’s descriptive content for assistive technologies.
+Use this when you want to provide information in addition to actions visual information, i.e. TextButton.
+Currently only one, either aria-labelledby or aria-describedby is supported.
+If both are provided aria-labelledby takes priority.
+### inline
+- type: boolean
+- description: Enables inline-block behaviour for the tooltip trigger element.
+Use this when working with inline based elements i.e. Text, TextButton, Button etc.
+### interactive
+- type: boolean
+- description: Enables hovering the tooltip itself.
+### 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/TopBannerProps.md

@@ -0,0 +1,34 @@
+
+### 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.
+### zIndex
+- type: number
+- description: Controls the z-index of the component.
+### position
+- type: TopBannerPosition
+- description: Determines if the top banner stays fixed at the top of its container.
+### dismissible
+- type: boolean
+- description: Determines whether the top banner should render a dismiss button.
+### dismissLabel
+- type: string
+- description: Aria label for the dismiss button.
+### action
+- type: ReactNode
+- description: An action component to display in the top banner. The component can be one of these types:
+Can be either:
+- `<TopBanner.ActionButton/>`
+- `<TopBanner.ActionLink/>`
+- custom
+### onDismiss
+- type: (event: MouseEvent<Element, MouseEvent>) => void
+- description: Callback function called whenever the user clicks the dismiss button.
+### children
+- type: ReactNode
+- description: The main content of the top banner.
+
+

package/dist/docs/components/TransitionProps.md

@@ -0,0 +1,192 @@
+
+### animateOnLoad
+- type: boolean
+- description: Shows enter animation on component mount.
+### 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.
+### enterAnimation
+- type: EnterAnimation
+- description: Sets a type of animation that happens on enter animation.
+ - fadeIn -
+```javascript
+ {
+   delay?: 'short' | 'medium' | 'long';
+   duration:
+     | 'fast01'
+     | 'fast02'
+     | 'medium01'
+     | 'medium02'
+     | 'slow01'
+     | 'slow02';
+   easing?: 'enterEasing' | 'standardEasing';
+ }
+ ```
+ - moveIn -
+ ```javascript
+ {
+   delay?: 'short' | 'medium' | 'long';
+   direction:
+     | 'topToBottom'
+     | 'bottomToTop'
+     | 'leftToRight'
+     | 'rightToLeft';
+   distance: string;
+   duration:
+     | 'fast01'
+     | 'fast02'
+     | 'medium01'
+     | 'medium02'
+     | 'slow01'
+     | 'slow02';
+   easing?: 'enterEasing' | 'standardEasing';
+ }
+ ```
+ - expand -
+ ```javascript
+ {
+   delay?: 'short' | 'medium' | 'long';
+   direction:
+     | 'topToBottom'
+     | 'bottomToTop'
+     | 'leftToRight'
+     | 'rightToLeft';
+   duration:
+     | 'fast01'
+     | 'fast02'
+     | 'medium01'
+     | 'medium02'
+     | 'slow01'
+     | 'slow02';
+   easing?: 'enterEasing' | 'standardEasing';
+ }
+ ```
+ - scaleUp -
+ ```javascript
+ {
+   delay?: 'short' | 'medium' | 'long';
+   direction:
+     | 'center'
+     | 'top'
+     | 'topEnd'
+     | 'right'
+     | 'bottomEnd'
+     | 'bottom'
+     | 'bottomStart'
+     | 'left'
+     | 'topStart';
+   duration:
+     | 'fast01'
+     | 'fast02'
+     | 'medium01'
+     | 'medium02'
+     | 'slow01'
+     | 'slow02';
+   easing?: 'enterEasing' | 'standardEasing';
+   scale: string;
+ }
+ ```
+### exitAnimation
+- type: ExitAnimation
+- description: Sets a type of animation that happens on exit animation.
+ - fadeOut -
+ ```javascript
+{
+   delay?: 'short' | 'medium' | 'long';
+   duration:
+     | 'fast01'
+     | 'fast02'
+     | 'medium01'
+     | 'medium02'
+     | 'slow01'
+     | 'slow02';
+   easing?: 'exitEasing' | 'standardEasing';
+ }
+ ```
+ - moveOut -
+ ```javascript
+ {
+   delay?: 'short' | 'medium' | 'long';
+   direction:
+     | 'topToBottom'
+     | 'bottomToTop'
+     | 'leftToRight'
+     | 'rightToLeft';
+   distance: string;
+   duration:
+     | 'fast01'
+     | 'fast02'
+     | 'medium01'
+     | 'medium02'
+     | 'slow01'
+     | 'slow02';
+   easing?: 'exitEasing' | 'standardEasing'
+ }
+ ```
+ - collapse -
+ ```javascript
+ {
+   delay?: 'short' | 'medium' | 'long';
+   direction:
+     | 'topToBottom'
+     | 'bottomToTop'
+     | 'leftToRight'
+     | 'rightToLeft';
+   duration:
+     | 'fast01'
+     | 'fast02'
+     | 'medium01'
+     | 'medium02'
+     | 'slow01'
+     | 'slow02';
+   easing?: 'exitEasing' | 'standardEasing';
+ }
+ ```
+ - scaleDown -
+ ```javascript
+ {
+   delay?: 'short' | 'medium' | 'long';
+   direction:
+     | 'center'
+     | 'top'
+     | 'topEnd'
+     | 'right'
+     | 'bottomEnd'
+     | 'bottom'
+     | 'bottomStart'
+     | 'left'
+     | 'topStart';
+   duration:
+     | 'fast01'
+     | 'fast02'
+     | 'medium01'
+     | 'medium02'
+     | 'slow01'
+     | 'slow02';
+   easing?: 'exitEasing' | 'standardEasing';
+   scale: string;
+ }
+ ```
+### mountOnEnter
+- type: boolean
+- description: Lazy-mounts the component. If false, will be mounted immediately. It true, will be mounted with first enter.
+### onStart
+- type: (animationTiming?: AnimationTiming) => void
+- description: Defines a callback function which is called immediately after the animation starts. animationTiming notes if the animation is enter or exit.
+### onEnd
+- type: (animationTiming?: AnimationTiming) => void
+- description: Defines a callback function which is called immediately after the animation ends. animationTiming notes if the animation is enter or exit.
+### show
+- type: boolean
+- description: Shows animation when set to true.
+### unmountOnExit
+- type: boolean
+- description: Unmounts the component after it finishes exiting. If false, will stay mounted after exit.
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+
+

package/dist/docs/components/TrendIndicatorProps.md

@@ -0,0 +1,21 @@
+
+### 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.
+### value
+- 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
+### inverted
+- type: boolean
+- description: Invert color and arrow direction.
+### 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: Locale
+### format
+- type: "percent" | "decimal"
+- description: Allow showing value as percentage or as absolute number
+
+

package/dist/docs/components/VariableInputProps.md

@@ -0,0 +1,64 @@
+
+### 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
+### disabled
+- type: bool
+- description: Specifies whether input should be disabled or not
+### readOnly
+- type: bool
+- description: Specifies whether input is read only
+### initialValue
+- type: string
+- description: Defines an initial value to display
+### multiline
+- type: bool
+- description: Specifies whether component allow multiple lines or not. If false, text won’t wrap and horizontal scroll will appear inside of a component.
+### onChange
+- type: func
+- description: Defines a callback function that is called each time value is changed:
+`onChange(value: String): void`
+### onSubmit
+- type: func
+- description: Defines a callback function that is called on value submit, in other words after `insertVariable()` and `setValue()`
+`onSubmit(value: String): void`
+### onBlur
+- type: func
+- description: Defines a callback function that is called on focus out:
+`onBlur(value: String): void`
+### onFocus
+- type: func
+- description: Defines a callback function that is called on focus in:
+`onFocus(value: String): void`
+### 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.
+### placeholder
+- type: string
+- description: Sets a placeholder message to display
+### rows
+- type: number
+- description: Set the height of a component to fit the given number of rows
+### size
+- type: enum
+- description: Controls the size of the input and variable tags
+### variableParser
+- type: func
+- description: Defines the variable keys that component will parse and convert to <Tag/> components on blur and while using `insertVariable`.
+For each key `variableParser` will be called and should return a proper text for that key or false in case the key is invalid.
+`variableParser(key: String): String|boolean`
+### variableTagPropsParser
+- type: func
+- description: A function callback that is being called on each keyboard enter and expects a return of object with properties meant for Tag component.
+It is designed to dynamically determine the styling or properties applied to variable tags within the input field.`
+### variableTemplate
+- type: shape
+- description: Defines a template for variable recognition. Typed text strings with matching prefix and suffix symbols will be converted to <Tag/> components.
+
+