@wix/design-system 1.191.2 → 1.193.0

package/dist/docs/components/NotificationProps.md

@@ -0,0 +1,30 @@
+
+### show
+- type: bool
+- description: when set to `true`, notification is shown
+### theme
+- type: enum
+- description: Notification theme
+### type
+- type: enum
+- description: Sets how <Notification/> should be displayed:
+- `type="global"` will take up space and push the content down.
+- `type="local"` will not take up space and will be displayed on top of content
+- `type="sticky"` will not take up space and will be displayed at the top of whole page and on top of content (position: fixed;)
+### autoHideTimeout
+- type: number
+- description: When provided, then the Notification will be hidden after the specified timeout.
+### zIndex
+- type: number
+- description: Notification z-index
+### onClose
+- type: func
+- description: No description
+### children
+- type: node
+- description: Can be either:
+- `<Notification.TextLabel/>` (required)
+- `<Notification.CloseButton/>`
+- `<Notification.ActionButton/>`
+
+

package/dist/docs/components/NumberInputProps.md

@@ -0,0 +1,184 @@
+
+### 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
+### ariaControls
+- type: string
+- description: No description
+### ariaDescribedby
+- type: string
+- description: No description
+### ariaLabel
+- type: string
+- description: No description
+### autoFocus
+- type: boolean
+- description: No description
+### autoSelect
+- type: boolean
+- description: No description
+### autocomplete
+- type: string
+- description: No description
+### 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.
+### hideStatusSuffix
+- type: boolean
+- description: No description
+### forceFocus
+- type: boolean
+- description: No description
+### forceHover
+- type: boolean
+- description: No description
+### maxLength
+- type: number
+- description: No description
+### menuArrow
+- type: boolean
+- description: No description
+### clearButton
+- type: boolean
+- description: No description
+### focusOnClearClick
+- type: boolean
+- description: No description
+### name
+- type: string
+- description: Reference element data when a form is submitted
+### border
+- type: "standard" | "round" | "bottomLine" | "none"
+- description: No description
+### noLeftBorderRadius
+- type: boolean
+- description: No description
+### noRightBorderRadius
+- type: boolean
+- description: No description
+### onBlur
+- type: FocusEventHandler<HTMLInputElement>
+- description: Defines a standard input onBlur callback
+### onClear
+- type: MouseEventHandler<HTMLButtonElement>
+- description: No description
+### onCompositionChange
+- type: (isComposing: boolean) => void
+- description: No description
+### onEnterPressed
+- type: KeyboardEventHandler<HTMLInputElement>
+- description: No description
+### onEscapePressed
+- type: KeyboardEventHandler<HTMLInputElement>
+- description: No description
+### onFocus
+- type: (e?: FocusEvent<HTMLInputElement, Element>) => void
+- description: Defines a standard input onFocus callback
+### onInputClicked
+- type: MouseEventHandler<HTMLInputElement>
+- description: No description
+### onKeyDown
+- type: KeyboardEventHandler<HTMLInputElement>
+- description: No description
+### onKeyUp
+- type: KeyboardEventHandler<HTMLInputElement>
+- description: No description
+### onPaste
+- type: ClipboardEventHandler<HTMLInputElement>
+- description: No description
+### 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: No description
+### disableEditing
+- type: boolean
+- description: No description
+### rtl
+- type: boolean
+- description: No description
+### size
+- type: InputSize
+- description: Controls the size of the input
+### 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: No description
+### textOverflow
+- type: "clip" | "ellipsis"
+- description: No description
+### tooltipPlacement
+- type: Placement
+- description: No description
+### type
+- type: string
+- description: No description
+### value
+- type: string | number
+- description: Specifies the current value of the element
+### withSelection
+- type: boolean
+- description: No description
+### required
+- type: boolean
+- description: No description
+### 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 | number[]
+- description: Specifies the interval between number values
+### customInput
+- type: Function | ReactNode
+- description: No description
+### pattern
+- type: string
+- description: No description
+### inputRef
+- type: ((input: HTMLInputElement) => void) | MutableRefObject<HTMLInputElement>
+- description: No description
+### strict
+- type: boolean
+- description: No description
+### hideStepper
+- type: boolean
+- description: Specifies whether stepper should be hidden
+### onChange
+- type: (value: number, stringValue: string) => void
+- description: Defines a standard input onChange callback
+### invalidMessage
+- type: string
+- description: Enables internal validation and defines a message to display when user types invalid value
+### onInvalid
+- type: (stringValue: string, { validationType, value, }: { validationType?: "outOfBoundsError" | "formatError"; value: string; }) => void
+- description: Defines a callback function which is called on cases when invalid value is typed.
+- return { stringValue: string, { validationType: 'formatError' | 'outOfBoundsError', value: string }}
+- `validationType` - type 'formatError' is set when value is in the wrong format
+                  - type 'outOfBoundsError' is set when min or max props are used and value does not match the bounds
+- `value` - is set to current input value
+
+

package/dist/docs/components/PageFooterProps.md

@@ -0,0 +1,23 @@
+
+### children
+- type: ReactNode
+- description: Accepts following elements as child items:
+- <Footer.Start />
+- <Footer.Center />
+- <Footer.End />
+- <Page.Footer.Start />
+- <Page.Footer.Center />
+- <Page.Footer.End />
+<br/>
+Each of these areas accept any component as their child.
+### 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.
+### divider
+- type: boolean
+- description: Renders a full-width divider at the top of the footer
+
+

package/dist/docs/components/PageProps.md

@@ -0,0 +1,59 @@
+
+### children
+- type: ReactNode
+- description: Accepts compound components as child items:
+- `<Page.Header/>`
+- `<Page.Content/>`
+- `<Page.Tail/>`
+- `<Page.Section/>`
+- `<Page.Footer/>`
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in the tests
+### backgroundImageUrl
+- type: string
+- description: Provides a link to the background image source (URL). Image will be displayed at the top of a page, underneath the \<Page.Header/>.
+### maxWidth
+- type: number
+- description: Sets the maximum width of the page (paddings excluded)
+### minWidth
+- type: number
+- description: Sets the minimum width of the page (paddings excluded)
+### height
+- type: string
+- description: Sets the height of the page in pixels (px), viewport height (vh), etc.
+### sidePadding
+- type: number
+- description: Sets the side paddings of a page
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### gradientClassName
+- type: string
+- description: Specifies a CSS class name that defines a gradient background for \<Page.Header/>
+### scrollableContentRef
+- type: (ref: HTMLElement) => void
+- description: Defines a reference called together with page scrollable content ref after page mount.
+<br/>
+**Note** - if you need this ref only for listening to scroll events on the scrollable content then use this prop instead:
+`scrollProps = {onScrollChanged/onScrollAreaChanged}`
+### zIndex
+- type: number
+- description: Specifies the stack order (z-index) of a page
+### horizontalScroll
+- type: boolean
+- description: Enables page content to scroll horizontally when its width exceed maximum allowed width
+### scrollProps
+- type: ScrollableContainerCommonProps
+- description: Pass properties related to the scrollable content of the page.
+<br/>
+**onScrollAreaChanged** - defines a handler function for scroll area changes.
+Function is triggered when the user scrolls to a different area of the scrollable content. See signature for possible areas:
+`function({area: {y: AreaY, x: AreaX}, target: HTMLElement}) => void`
+`AreaY`: top | middle | bottom | none
+`AreaX`: start | middle | end | none (not implemented yet)
+<br/>
+**onScrollAreaChanged** - defines a general handler for scroll changes with throttling (100ms):
+`function({target: HTMLElement}) => void`
+
+

package/dist/docs/components/PageSectionProps.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.
+### title
+- type: ReactNode
+- description: The main title content
+### subtitle
+- type: ReactNode
+- description: The subtitle content
+### showDivider
+- type: boolean
+- description: Renders a divider
+### actionsBar
+- type: ReactNode
+- description: A placeholder for a component that can contain actions.
+
+

package/dist/docs/components/PaginationProps.md

@@ -0,0 +1,36 @@
+
+### 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.
+### totalPages
+- type: number
+- description: Sets a number of available pages to show in the component
+### currentPage
+- type: number
+- description: Specifies a currently selected page
+### onChange
+- type: (event: { event: SyntheticEvent<Element, Event>; page: number; }) => void
+- description: Defines a callback function which returns a selected page or an arrow ({`event`,`page`})
+### pageUrl
+- type: (pageNumber: number) => string
+- description: Get pageNumber and returns url
+### nextLabel
+- type: string
+- description: Sets next page label
+### previousLabel
+- type: string
+- description: Sets previous page label
+### focusableOnFocus
+- type: React.FocusEventHandler<E>
+- description: No description
+### focusableOnBlur
+- type: React.FocusEventHandler<E>
+- description: No description
+### ref
+- type: React.RefObject<E>
+- description: No description
+
+

package/dist/docs/components/PaletteProps.md

@@ -0,0 +1,9 @@
+
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in the tests.
+### fill
+- type: ReactNode[]
+- description: Defines an array of fill items for the palette. Accepts solid colors, gradients or images.
+
+

package/dist/docs/components/PopoverMenuProps.md

@@ -0,0 +1,97 @@
+
+### maxWidth
+- type: union
+- description: Sets a maximum width for a Popover menu
+### minWidth
+- type: union
+- description: Sets a minimum width for a Popover menu
+### maxHeight
+- type: union
+- description: Sets a maximum height for a Popover menu
+### zIndex
+- type: number
+- description: Sets the Popover z-index
+### moveBy
+- type: shape
+- description: Moves Popover menu overlay relative to its trigger element by a defined number of px:
+- horizontally (on X-axis)
+- or vertically (on Y-axis)
+### triggerElement
+- type: union
+- description: Defines a component that calls out a Popover menu (`<IconButton />`, `<Button />` or `<Text Button />`)
+### placement
+- type: enum
+- description: Defines the Popover menu’s overlay placement in relation to its trigger element:
+ * auto-start
+ * auto
+ * auto-end
+ * top-start
+ * top
+ * top-end
+ * right-start
+ * right
+ * right-end
+ * bottom-start
+ * bottom
+ * bottom-end
+ * left-start
+ * left
+ * left-end
+### textSize
+- type: enum
+- description: Sets the size of text in Popover menu items
+### ellipsis
+- type: bool
+- description: Truncates menu item text that overflows component’s max Width
+### children
+- type: node
+- description: Stores Popover menu compound components:
+- <PopoverMenu.MenuItem />
+- <PopoverMenu.Divider /> (optional)
+- <PopoverMenu.SectionTitle /> (optional)
+
+`<PopoverMenu.MenuItem>` component has these fields:
+ * `text` - Sets a label for a Popover menu item
+ * `onClick` - Defines a callback function which is called when a Popover menu item is clicked on
+ * `skin` - Controls the appearance of a Popover menu item (one of `standard`, `dark`, `destructive`)
+ * `prefixIcon` - Contains an icon at the start of a Popover menu item
+ * `dataHook` - Applies a data-hook HTML attribute to be used in the tests
+ * `suffixIcon` - suffix icon property
+ * `disabled` - Disables a Popover menu item
+ * `subtitle` - Sets a text for a Popover menu item subtitle\
+
+`<PopoverMenu.Divider>` component has these fields:
+* `dataHook` - Applies a data-hook HTML attribute to be used in the tests
+
+`<PopoverMenu.SectionTitle>` component has these fields:
+* `dataHook` - Applies a data-hook HTML attribute to be used in the tests
+* `title` - Acts as a title for following list items.
+### appendTo
+- type: union
+- description: Enables calculations in relation to a DOM element
+### flip
+- type: bool
+- description: Enables the flip behaviour. This behaviour is used to flip the overlay placement when it starts to overlap the trigger element.
+### fixed
+- type: bool
+- description: Enables the fixed behaviour. This behaviour is used to keep the overlay at its original placement even when it is being positioned outside the boundary.
+### fluid
+- type: bool
+- description: No description
+### showArrow
+- type: bool
+- description: Controls visibility of the pointer arrow
+### 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.
+### onShow
+- type: func
+- description: Defines a callback function which is called when a Popover menu is opened
+### onHide
+- type: func
+- description: Defines a callback function which is called when a Popover menu is closed
+
+

package/dist/docs/components/PopoverProps.md

@@ -0,0 +1,136 @@
+
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### placement
+- type: Placement
+- description: The location to display the content
+### shown
+- type: boolean
+- description: Is the content shown or not
+### onClick
+- type: React.MouseEventHandler<HTMLDivElement>
+- description: onClick on the component
+### onClickOutside
+- type: Function
+- description: Provides callback to invoke when clicked outside of the popover
+### onTabOut
+- type: Function
+- description: Provides callback to invoke when popover loses focus
+### onEscPress
+- type: Function
+- description: Provides callback to invoke when popover loses focus
+### excludeClass
+- type: string
+- description: Clicking on elements with this excluded class will will not trigger onClickOutside callback
+### onMouseEnter
+- type: React.MouseEventHandler<HTMLDivElement>
+- description: onMouseEnter on the component
+### onMouseLeave
+- type: React.MouseEventHandler<HTMLDivElement>
+- description: onMouseLeave on the component
+### onKeyDown
+- type: React.KeyboardEventHandler<HTMLDivElement>
+- description: onKeyDown on the target component
+### showArrow
+- type: boolean
+- description: Show show arrow from the content
+### flip
+- type: boolean
+- description: Whether to enable the flip behaviour. This behaviour is used to flip the `<Popover/>`'s placement
+when it starts to overlap the target element (`<Popover.Element/>`).
+### fixed
+- type: boolean
+- description: Whether to enable the fixed behaviour. This behaviour is used to keep the `<Popover/>` at it's
+original placement even when it's being positioned outside the boundary.
+### moveBy
+- type: Partial<{ x: number; y: number; }>
+- description: Moves popover relative to the parent
+### hideDelay
+- type: number
+- description: Hide Delay in ms
+### showDelay
+- type: number
+- description: Show Delay in ms
+### moveArrowTo
+- type: number
+- description: Moves arrow by amount
+### appendTo
+- type: AppendTo
+- description: Enables calculations in relation to a dom element
+### timeout
+- type: number | { enter: number; exit: number; }
+- description: Animation timer
+### style
+- type: object
+- description: Inline style
+### id
+- type: string
+- description: Id
+### fluid
+- type: boolean
+- description: No description
+### customArrow
+- type: (placement: Placement, arrowProps: object) => React.ReactNode
+- description: Custom arrow element
+### role
+- type: string
+- description: target element role value
+### zIndex
+- type: React.CSSProperties
+- description: popover z-index
+### dynamicWidth
+- type: boolean
+- description: popovers content is set to minimum width of trigger element,
+but it can expand up to the value of maxWidth.
+### minWidth
+- type: string | number
+- description: popover content minWidth value
+- `number` value which converts to css with `px`
+- `string` value that contains `px`
+### maxWidth
+- type: string | number
+- description: popover content maxWidth value
+- `number` value which converts to css with `px`
+- `string` value that contains `px`
+### width
+- type: string | number
+- description: popover content width value
+- `number` value which converts to css with `px`
+- `string` value that contains `px`
+### disableClickOutsideWhenClosed
+- type: boolean
+- description: Breaking change:
+When true - onClickOutside will be called only when popover content is shown
+### dataHook
+- type: string
+- description: Hook for testing purposes.
+### tabIndex
+- type: number
+- description: tabindex for popover content element
+### aria-label
+- type: string
+- description: No description
+### aria-labelledby
+- type: string
+- description: No description
+### aria-describedby
+- type: string
+- description: No description
+### animate
+- type: boolean
+- description: Whether to animate the popover content when it is shown or hidden.
+### theme
+- type: PopoverTheme
+- description: Components skin value. Can be dark or light.
+### onShow
+- type: Function
+- description: Callback to invoke when popover is shown
+### onHide
+- type: Function
+- description: Callback to invoke when popover is hidden
+### interactive
+- type: boolean
+- description: Enables hovering the popover content.
+
+

package/dist/docs/components/PreviewWidgetProps.md

@@ -0,0 +1,30 @@
+
+### 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.
+### skin
+- type: enum
+- description: Sets the color of the content area background (`neutral` or `gradient`). To use custom skin color, set it to `custom` and use the `backgroundColor` prop
+### backgroundColor
+- type: string
+- description: Sets content area background color in HEX code. Can be set with custom colors (from WSR design system color palette)
+### contentOutline
+- type: enum
+- description: Sets the content outline as `shadow` (default), `border` or `none`
+### height
+- type: string
+- description: Adjusts the height of the component or can be set in specific % or px
+### width
+- type: string
+- description: Sets the width of the component in % or px
+### children
+- type: node
+- description: Sets the main preview content. Accepts an image, text paragraph or any other custom element
+### scrollable
+- type: bool
+- description: Enables vertical scroll of the overflowed content *
+
+

package/dist/docs/components/ProportionProps.md

@@ -0,0 +1,15 @@
+
+### dataHook
+- type: string
+- description: Applied as data-hook HTML attribute that can be used in the tests
+### children
+- type: node
+- description: Children to render.
+### className
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### aspectRatio
+- type: union
+- description: Predefined Proportion.square (1), Proportion.portrait (3/4), Proportion.cinema (16/9), Proportion.landscape (4/3), or a custom number (width / height) or 'none' for original size
+
+

package/dist/docs/components/PulseAnimationProps.md

@@ -0,0 +1,33 @@
+
+### dataHook
+- type: string
+- description: Applied as data-hook HTML attribute that can be used in the tests
+### children
+- type: node
+- description: Node to animate (one child node)
+### active
+- type: bool
+- description: Triggers the animation transition
+### onStart
+- type: func
+- description: A callback fired immediately after the animation starts.
+### onEnd
+- type: func
+- description: A callback fired immediately after the animation ends.
+### loop
+- type: bool
+- description: When set to true, the child component animate repetitively until stopped by other event
+### delay
+- type: union
+- description: Set a delay before the animation execution. When provided a number- sets this as `ms`.
+### color
+- type: enum
+- description: The color of the animation
+### borderRadius
+- type: string
+- description: Sets the border-radius css property of the animation
+### fluid
+- type: bool
+- description: Changes fluidity from fit-content to 100% and allows children to stretch to its parent container width
+
+