@wix/design-system 1.191.2 → 1.193.0

package/dist/docs/components/FieldSetProps.md

@@ -0,0 +1,63 @@
+
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute to be used in the tests.
+### children
+- type: React.ReactNode
+- description: Accepts any kind of components as child elements. A child component should be a form element like an Input, InputArea, Dropdown or RichTextArea.
+### legend
+- type: React.ReactNode
+- description: Sets a field set legend, which is a descriptive title for a group of components. Its default value is a text string, but it can be overridden with any other component.
+### legendPlacement
+- type: LegendPlacement
+- description: Controls the position of the legend, in terms of field set child components.
+### legendAlignment
+- type: LegendAlignment
+- description: Controls the vertical alignment of the legend.
+### legendSize
+- type: LegendSize
+- description: Controls the size of the legend.
+### required
+- type: boolean
+- description: Marks the field set as mandatory with an asterisk (*) at the end of the legend.
+### infoContent
+- type: React.ReactNode
+- description: Displays a passed info message in a tooltip next to field set legend. Default value is a text string, but it can also be overridden with any other component.
+### infoTooltipProps
+- type: TooltipCommonProps
+- description: Allows control over the tooltip style and behaviour by passed tooltip properties.
+### suffix
+- type: React.ReactNode
+- description: Adds a custom element at the end of the legend row (it overrides the charCount in case it's provided).
+### charCount
+- type: number
+- description: Sets the maximum length for the field value inside field set child input. Character count is displayed in the top right corner of a component.
+### status
+- type: FieldSetStatusType
+- description: Sets the type (color, icon) of a status message for the whole field set.
+### statusMessage
+- type: React.ReactNode
+- description: Sets the field set status message. It is displayed bellow all field set child components.
+### statusId
+- type: string
+- description: Adds an id to a field set status message. Use with `aria-describedby` attribute on specific input to connect it with `FieldSet` status message for accessibility.
+### alignment
+- type: Alignment
+- description: Controls the alignment of all field set child components.
+### direction
+- type: Direction
+- description: Controls if field set child components are rendered horizontally or vertically.
+### gap
+- type: Gap
+- description: Controls the gap between all field set child components.
+### columns
+- type: string
+- description: Controls the width of each field set child component. Works only with `horizontal` direction.
+### ellipsis
+- type: boolean
+- description: Truncates legend that is longer than its parent container and displays ellipsis at the end of the last line. Enabled by default legend placement is set to `top`.
+### maxLines
+- type: number
+- description: Truncates legend text at a specific number of lines when using `ellipsis`.
+
+

package/dist/docs/components/FilePickerProps.md

@@ -0,0 +1,36 @@
+
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in tests.
+### error
+- type: bool
+- description: Defines if an error should show or not.
+### errorMessage
+- type: string
+- description: Sets an error message to display.
+### header
+- type: union
+- description: Allows to insert overline text at the top left of a component. Can also be overridden with any other component, i.e. <Image/>.
+### id
+- type: union
+- description: Specifies a unique id for the element.
+### mainLabel
+- type: string
+- description: Sets the main action label.
+### maxSize
+- type: number
+- description: Defines the maximum size of a file that can be uploaded.
+### name
+- type: string
+- description: Defines a name for inner input.
+### onChange
+- type: func
+- description: Defines a standard input onChange callback.
+### subLabel
+- type: string
+- description: Adds a supportive message below the action title.
+### supportedFormats
+- type: string
+- description: Defines which file types to accept (i.e. .jpeg, .gif, .png). Formats should be separated by a comma.
+
+

package/dist/docs/components/FileUploadProps.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.
+### children
+- type: (params: FileUploadChildrenProps) => ReactNode
+- description: Accepts any kind of component as a child item that calls out the file picker.
+##### Syntax:
+function({ openFileUpload }): element
+* `openFileUpload`: A function that will open a file upload dialog when triggered.
+* return: A react element
+### multiple
+- type: boolean
+- description: Allows you to select and upload multiple files at once.
+### accept
+- type: string
+- description: Defines which file types to accept (i.e. .jpeg, .gif, .png). Each format should be separated by a comma.
+### capture
+- type: FileUploadCapture
+- description: Specifies that a new file should be captured and which camera to use to capture the image or video data.
+`Use user` for the user-facing camera and `environment`  for the outward-facing camera.
+##### Note: This only works on mobile devices;
+If your device is a desktop computer, you'll get a standard file picker.
+### name
+- type: string
+- description: Specifies a form data name to be submitted along with the control value.
+### onChange
+- type: (files: FileList) => void
+- description: Defines a standard input onChange callback.
+
+

package/dist/docs/components/FillButtonProps.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.
+### onClick
+- type: func
+- description: Defines a callback handler. Handler is called whenever a button is clicked.
+### iconSize
+- type: enum
+- description: Controls the size of a plus icon.
+### disabled
+- type: bool
+- description: Specify whether button should be disabled or not
+### fill
+- type: string
+- description: Defines button fill value in string format. Accepts HEX colors and gradients.
+### tooltipContent
+- type: node
+- description: Specifies a message to display on button hover.
+### tooltipProps
+- type: shape
+- description: Allows to pass tooltip common props.
+### icon
+- type: node
+- description: Overrides a default plus icon to any WSR icon. Do not work together with `iconSize`. Icon size has to be controlled manually.
+
+

package/dist/docs/components/FillPreviewProps.md

@@ -0,0 +1,58 @@
+
+### 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.
+### fill
+- type: ReactNode
+- description: Specify a color, a gradient, image URL or SVG to be rendered as a preview content
+### selected
+- type: boolean
+- description: Specifies whether preview is selected or not. Selected item receives an outline border style.
+### disabled
+- type: boolean
+- description: Specify whether preview should be disabled or not
+apply disabled styles
+### aspectRatio
+- type: string | number
+- description: Control elements aspect ratio value
+### as
+- type: string | ComponentType<any>
+- description: an element type to render as (string or function).
+### href
+- type: string
+- description: URL of the page that link goes to
+### prefixIcon
+- type: ReactElement<any, string | JSXElementConstructor<any>>
+- description: accepts prefix icon
+### suffixIcon
+- type: ReactElement<any, string | JSXElementConstructor<any>>
+- description: accepts suffix icon
+### contentClassName
+- type: string
+- description: class name to be added to the content span
+### contentRef
+- type: RefObject<HTMLSpanElement>
+- description: React ref to be attached to the content span
+### 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
+### 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/FloatingHelperProps.md

@@ -0,0 +1,46 @@
+
+### dataHook
+- type: string
+- description: Applied as data-hook HTML attribute that can be used in the tests
+### width
+- type: union
+- description: Width HTML attribute of the content. If a number is passed then it defaults to px. e.g width={400} => width="400px"
+### target
+- type: node
+- description: The target of the popover
+### content
+- type: node
+- description: A `<FloatingHelper.Content>` component
+### onClose
+- type: func
+- description: callback to call when the popover content is requested to be closed (Uncontrolled mode only). NOTE: this callback is called when the close timeout (if exists) starts In Controlled mode - called when the close button is clicked. In Uncontrolled mode - called when the popover is closed
+### appearance
+- type: enum
+- description: Appearance : `dark` or `light`
+### initiallyOpened
+- type: bool
+- description: Controls whether the popover's content is initially opened (In Uncontrolled mode only)
+### opened
+- type: bool
+- description: Controls whether the popover's content is shown or not (aka Controlled mode).
+When undefined, then the component is Uncontrolled. See open/close behaviour section in docs.
+### placement
+- type: enum
+- description: The location to display the content.
+### appendTo
+- type: enum
+- description: Enables calculations in relation to a dom element.
+### onOpen
+- type: func
+- description: Callback to call when the popover content is requested to be opened (Uncontrolled mode only)
+### moveBy
+- type: shape
+- description: Moves the floating helper relative to the parent by x or y
+### zIndex
+- type: number
+- description: Floating helper z-index
+### hideDelay
+- type: number
+- description: Set a delay on closing
+
+

package/dist/docs/components/FloatingNotificationProps.md

@@ -0,0 +1,36 @@
+
+### 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.
+### type
+- type: enum
+- description: the type of notification
+### showCloseButton
+- type: bool
+- description: decides if to show the close button
+### onClose
+- type: func
+- description: close button on click handler
+### textButtonProps
+- type: custom
+- description: props to pass to textButton - renders the TextButton when not empty
+### buttonProps
+- type: custom
+- description: props to pass to button - renders the Button when not empty
+### prefixIcon
+- type: element
+- description: An icon element to appear before content
+### text
+- type: node
+- description: The text content of the notification
+### width
+- type: string
+- description: The width of the content container of the notification
+### fullWidth
+- type: bool
+- description: Is notification full width (removes left and right border, border radius, more height and bigger paddings)
+
+

package/dist/docs/components/FormFieldProps.md

@@ -0,0 +1,77 @@
+
+### children
+- type: ReactNode | ((data: { setCharactersLeft: CharactersLeftFn; }) => ReactNode)
+- description: Accept any kind of component as a child element. A child should be a form element like an Input, InputArea, Dropdown or RichTextArea.
+### charCount
+- type: number
+- description: Sets the maximum length for the field value. Character count is displayed in the top right corner of a component.
+### stretchContent
+- type: boolean
+- description: Defines whether or not the content (children container) grows when there's space available. Otherwise, it only uses the necessary space.
+### label
+- type: ReactNode
+- description: Sets a field label. It’s default value is a text string, but it can be overridden with any other component.
+### labelAlignment
+- type: LabelAlignment
+- description: Controls the label alignment
+### labelPlacement
+- type: LabelPlacement
+- description: Controls the label placement
+### labelSize
+- type: LabelSize
+- description: Controls the size of label
+### required
+- type: boolean
+- description: Marks a field as mandatory with an asterisk (*) at the end of a label.
+### infoContent
+- type: ReactNode
+- description: Displays a passed info message in a tooltip. Default value is a text string, but it can also be overridden with any other component.
+### infoTooltipProps
+- type: TooltipCommonProps
+- description: Allows control over the tooltip style and behaviour by passed tooltip properties.
+### suffix
+- type: ReactNode
+- description: Adds a custom element at the end of the label row (it overrides the charCount in case it's provided).
+### status
+- type: StatusType
+- description: Sets the type of status message, to give it appropriate colors and icons
+### statusMessage
+- type: ReactNode
+- description: Sets the status message. It is displayed bellow the child component
+### id
+- type: string
+- description: Input id used for connecting label to the input element using native ```for``` attribute
+
+```js
+<FormField id="myFormField" label="Hello">
+ <Input id="myFormField"/>
+</FormField>
+```
+### labelId
+- type: string
+- description: Sets the id of the label
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute that can be used in tests.
+### labelWidth
+- type: string
+- description: Applies custom width to the label. Works only when `labelPlacement` value is `right` or `left`
+### inputWidth
+- type: string
+- description: Applies custom width to the child component. Works only when `labelPlacement` value is `right` or `left`
+### classNames
+- type: string
+- description: Specifies a CSS class name to be appended to the component’s root element.
+### showInfoIconOnHover
+- type: boolean
+- description: Controls the visibility of the information icon based on hover.
+If set to true, the icon appears only when the component is hovered over. By default, the icon is always visible (false).
+When the component is wrapped with SidePanel.Field, the hover area extends to cover the full bounds of the component.
+### ellipsis
+- type: boolean
+- description: No description
+### maxLines
+- type: number
+- description: No description
+
+

package/dist/docs/components/FunnelChartProps.md

@@ -0,0 +1,49 @@
+
+### 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.
+### data
+- type: arrayOf
+- description: Array of Funnel Chart items
+* `value` - Item's value.
+* `label` - Short label under the value.
+* `displayValue` - Item's value send by the user.
+### fullHeight
+- type: bool
+- description: When provided, allows bars to take full height
+### hideDifferenceBadge
+- type: bool
+- description: A flag that controls the appearance of the calculated percentage badge
+### differenceBadgeSkin
+- type: enum
+- description: When provided, changes badge skin
+### differenceStepSkin
+- type: func
+- description: Returns the step skin by current index, badge's percentage and raw values
+##### Signature:
+`({currentIndex: number, difference: string, differenceValue: number}) => 'standard' | 'success'`
+### differenceBadgeProps
+- type: func
+- description: Returns the badge props by current index, badge's percentage and raw values
+##### Signature:
+`({currentIndex: number, difference: string, differenceValue: number}) => FunnelBadgeCommonProps`
+### differenceBadgeTooltipContent
+- type: func
+- description: Returns the tooltip props by current index, badge's percentage and raw values
+##### Signature:
+`({currentIndex: number, difference: string, differenceValue: number}) => React.ReactNode`
+### differenceBadgeTooltipProps
+- type: func
+- description: Returns the tooltip props by current index, badge's percentage and raw values
+##### Signature:
+`({currentIndex: number, difference: string, differenceValue: number}) => TooltipCommonProps`
+### onDifferenceBadgeTooltipShow
+- type: func
+- description: Callback on tooltip content show event by current index, badge's percentage and raw values
+##### Signature:
+`({currentIndex: number, difference: string, differenceValue: number}) => void`
+
+

package/dist/docs/components/GoogleAddressInputProps.md

@@ -0,0 +1,75 @@
+
+### placeholder
+- type: string
+- description: Placeholder for the input box
+### valuePrefix
+- type: string
+- description: Value to place before every search term (normally should not be used)
+### countryCode
+- type: string
+- description: Country code used to help with suggestions and geocoding
+### value
+- type: string
+- description: Controlled mode - value to display
+### types
+- type: array
+- description: Limit the autocomplete to specific types (see [here](https://developers.google.com/places/supported_types#table3) for list)
+### filterTypes
+- type: array
+- description: Lower level filtering of autocomplete result types (see [here](https://developers.google.com/places/supported_types) for list)
+### placeDetailsFields
+- type: array
+- description: Fields indicating which types of Places data to return (see [here](https://developers.google.com/maps/documentation/javascript/places#place_details)*
+### status
+- type: enum
+- description: Sets UI to indicate a status
+### statusMessage
+- type: node
+- description: The status message to display when hovering the status icon, if not given or empty there will be no tooltip
+### onChange
+- type: func
+- description: No description
+### onBlur
+- type: func
+- description: No description
+### onFocus
+- type: func
+- description: No description
+### onKeyDown
+- type: func
+- description: No description
+### onSet
+- type: func
+- description: Callback for results. Will return an object containing: originValue (value in the search), googleResult (google geocode result for the search), address (which will include: formatted (google formatted address), country, countryCode, street, number, postalCode, latLng (lat, lng))
+### Client
+- type: func
+- description: Google map client implementation (should implement autocomplete and geocode functions). Normally you would use @wix/design-system/clients/GoogleMapsClient
+### magnifyingGlass
+- type: bool
+- description: Show or hide magnifying glass icon
+### readOnly
+- type: bool
+- description: Sets the input to readOnly
+### autoSelect
+- type: bool
+- description: No description
+### footer
+- type: any
+- description: Display a footer as the last suggestion in the list
+### footerOptions
+- type: object
+- description: Set the footer's options (e.g. disabled, overrideStyles, etc. )
+### clearSuggestionsOnBlur
+- type: bool
+- description: Clear the suggestions list upon input blur
+### fallbackToManual
+- type: bool
+- description: If set to `true`, we will attempt to get a Google location from the input's text if there are no suggestions. This is useful when looking for locations for which google does not give suggestions - for example: Apartment/Apt
+### poweredByGoogle
+- type: bool
+- description: Shows the Powered By Google credit in a fixed footer
+### handler
+- type: enum
+- description: Sets how to get more details for a place (e.g. geocode, places, etc)
+
+

package/dist/docs/components/GooglePreviewProps.md

@@ -0,0 +1,57 @@
+
+### dataHook
+- type: string
+- description: Applies a data-hook HTML attribute to be used in the tests
+### description
+- type: string
+- description: Sets a short description for the page
+### descriptionMaxLines
+- type: number
+- description: Truncates description text at a specific number of lines
+### favicon
+- type: string
+- description: Specifies an URL link to favicon source. If not provided, a fallback favicon will be displayed.
+### onDescriptionClick
+- type: MouseEventHandler<HTMLElement>
+- description: Callback function triggered when description is clicked
+### onDescriptionMouseEnter
+- type: MouseEventHandler<HTMLElement>
+- description: Defines a callback function which is called when cursor enters the description
+### onDescriptionMouseLeave
+- type: MouseEventHandler<HTMLElement>
+- description: Defines a callback function which is called when cursor leaves the description
+### onTitleClick
+- type: MouseEventHandler<HTMLElement>
+- description: Callback function triggered when title is clicked
+### onTitleMouseEnter
+- type: MouseEventHandler<HTMLElement>
+- description: Defines a callback function which is called when cursor enters the title
+### onTitleMouseLeave
+- type: MouseEventHandler<HTMLElement>
+- description: Defines a callback function which is called when cursor leaves the title
+### onWebsiteInfoClick
+- type: MouseEventHandler<HTMLElement>
+- description: Callback function triggered when website info section (favicon, site name and preview URL) is clicked
+### previewUrl
+- type: string
+- description: Sets the link for the site
+### siteName
+- type: string
+- description: Sets the site name of the website
+### skin
+- type: "light" | "transparent"
+- description: Sets widget background color
+### title
+- type: string
+- description: Sets the title of the page
+### titleMaxLines
+- type: number
+- description: Truncates title text at a specific number of lines
+### websiteInfoTooltipContent
+- type: React.ReactNode
+- description: When provided, a tooltip will be displayed on website info section (favicon, site name and preview URL) hover
+### websiteInfoTooltipProps
+- type: Partial<TooltipCommonProps>
+- description: Allows to pass tooltip common props to website info tooltip.
+
+

package/dist/docs/components/HeadingProps.md

@@ -0,0 +1,84 @@
+
+### 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.
+### light
+- type: boolean
+- description: Invert heading style so it can be used on a dark or image background.
+### appearance
+- type: HeadingAppearance
+- description: this prop is deprecated and should not be used
+### as
+- type: keyof HTMLElementTagNameMap
+- description: Renders the heading as any other given HTML tag
+### size
+- type: Size
+- description: Controls the heading's visual size and HTML tag appearance. HTML tag can be overridden with ‘as’ prop.
+### id
+- type: string
+- description: Identifies the element that labels or describes the text element
+### children
+- type: React.ReactNode
+- description: Renders any kind of content within a heading. Usually it’s a text string.
+### 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
+- description: No description
+
+

package/dist/docs/components/HighlighterProps.md

@@ -0,0 +1,12 @@
+
+### dataHook
+- type: string
+- description: Applied as data-hook HTML attribute that can be used in the tests
+### match
+- type: string
+- description: match to highlight
+### emphasize
+- type: enum
+- description: style of highlight
+
+