@wix/patterns 1.457.0 → 1.458.0

package/dist/dts-bundle/components/RadioGroupFilter.d.ts

@@ -0,0 +1,29 @@
+import React, { PropsWithChildren } from 'react';
+import { RadioProps } from '@wix/design-system';
+
+/**
+ * `FilterProps` — cut here because it has its own bundle.
+ * Look `FilterProps` up in the bundle index for its full shape.
+ */
+interface FilterProps<V> {
+}
+
+interface RadioGroupFilterProps<V> extends FilterProps<V[]> {
+    /**
+     * List of items to select from
+     * @external
+     */
+    data: V[];
+    /**
+     * A function that returns Radio props for rendering each item
+     * @external
+     */
+    renderItem?: (item: V, index: number) => Partial<PropsWithChildren<RadioProps>>;
+}
+declare function _RadioGroupFilter<V>(props: RadioGroupFilterProps<V>): React.JSX.Element;
+declare const RadioGroupFilter: typeof _RadioGroupFilter & {
+    displayName: string;
+};
+
+export { RadioGroupFilter };
+export type { RadioGroupFilterProps };

package/dist/dts-bundle/components/SecondaryActions.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactElement } from 'react';
+
+/**
+ * `ActionSubitem` — cut here because it has its own bundle.
+ * Look `ActionSubitem` up in the bundle index for its full shape.
+ */
+type ActionSubitem = unknown;
+
+type SecondaryActionsElement = ReactElement<ActionSubitem, typeof SecondaryActions>;
+declare function SecondaryActions({ subItems, ...props }: ActionSubitem): React.JSX.Element;
+
+export { SecondaryActions };
+export type { SecondaryActionsElement };

package/dist/dts-bundle/components/SettingsPage.d.ts

@@ -0,0 +1,262 @@
+import * as React from 'react';
+import React__default, { ReactElement, ReactNode } from 'react';
+import { CardProps, IconElement, Breadcrumbs, BadgeProps, PageProps } from '@wix/design-system';
+import { FieldValues } from 'react-hook-form';
+
+interface ErrorCardProps extends CardProps {
+    /**
+     * Title to display in the error state.
+     */
+    title?: string;
+    /**
+     * Subtitle to display in the error state.
+     */
+    subtitle?: string;
+    /**
+     * Action button to display in the error state.
+     */
+    action?: {
+        /**
+         * Action button text.
+         */
+        text: string;
+        /**
+         * Callback function to run when the action button is clicked.
+         */
+        onClick: () => void;
+        /**
+         * [Icon](https://www.docs.wixdesignsystem.com/?path=/story/foundations-icons--icons) to display on the action button before the text.
+         */
+        prefixIcon?: IconElement;
+    };
+}
+
+interface CardContainerProps extends CardProps {
+    /**
+     * Additional loading flag, if you need to show loader after the main entity is fetched.
+     * Also, if an error occurs on a side request (other than passed to `fetch`), you can use `error` to show the card error state.
+     * Alongside with `error` you also need to pass `errorState.onRetry` callback, which should change the `status` accordingly.
+     */
+    status?: 'idle' | 'loading' | 'error' | 'success';
+    /**
+     * Height of content while loading (not including paddings)
+     */
+    minHeight?: string;
+    /**
+     * Card Error State configuration
+     */
+    errorState?: ErrorCardProps;
+    /**
+     * Identifier of the card.
+     * If you want to open a page and auto-scroll and focus ont his card, pass in the the query params `anchor={yourCardId}`.
+     */
+    id?: string;
+}
+
+interface FormPageCardProps extends CardContainerProps {
+}
+
+interface SettingsPageCardProps extends FormPageCardProps {
+}
+declare function _SettingsPageCard(props: SettingsPageCardProps): React__default.JSX.Element;
+declare namespace _SettingsPageCard {
+    var displayName: string;
+}
+
+/**
+ * `WixPatternsContainer` — you receive this, you don't construct it.
+ * Produced by `useWixPatternsContainer()` (also `buildWixPatternsContainer()`, `useCustomFieldsViewWidget()`).
+ */
+declare class WixPatternsContainer {
+}
+
+/**
+ * `CollectionPageState` — you receive this, you don't construct it.
+ * Produced by `useCollectionPageState()` (also `useCollectionPageContext()`).
+ */
+declare class CollectionPageState {
+}
+
+/**
+ * `MoreActionsItem` — cut here because it has its own bundle.
+ * Look `MoreActionsItem` up in the bundle index for its full shape.
+ */
+interface MoreActionsItem {
+}
+
+interface ExploreAppsModalProps {
+    title: string;
+    subtitle: string;
+    tag: string;
+}
+
+interface MoreActionsProps {
+    /**
+     * Actions items that appear in the `MoreActions` popover menu. \
+     * Actions can be grouped by using an array of arrays. \
+     * Each sub-array represents a different group within the popover, \
+     * and a divider will be rendered after each sub-array to separate the groups.
+     * @overrideType [MoreActionsItem](./?path=/story/common-types--moreactionsitem)[] | [MoreActionsItem](./?path=/story/common-types--moreactionsitem)[][]
+     * @external
+     */
+    items?: MoreActionsPropItem[] | MoreActionsPropItem[][];
+    /**
+     * An id of the container defined in the installed on a site application that contains TPA's actions.
+     */
+    containerId?: string;
+    /**
+     * Additional properties passed to the `onClick` of the container's extensions menu items.
+     */
+    containerProps?: Record<string, any>;
+    /**
+     * Additional info for cairoPageCtaClicked BI event.
+     */
+    biAdditionalInfo?: string;
+    dataHook?: string;
+    exploreAppsModalProps?: ExploreAppsModalProps;
+}
+
+type MoreActionItemFactory = (params: {
+    pageState: CollectionPageState;
+    container: WixPatternsContainer;
+}) => MoreActionsItem;
+type MoreActionsPropItem = MoreActionsItem | MoreActionItemFactory;
+
+interface MoreActionsIconProps extends MoreActionsProps {
+}
+declare function _MoreActionsIcon(params: MoreActionsIconProps): React__default.JSX.Element;
+declare const MoreActionsIcon: typeof _MoreActionsIcon & {
+    displayName: string;
+};
+
+type MoreActionsElement = ReactElement<MoreActionsProps, typeof MoreActionsIcon>;
+
+/**
+ * Props for the PageSubTitle component.
+ * @property {string} text The subtitle text.
+ * @property {Object} [learnMore] An object with a `url` (required) for displaying a link button on the subtitle.
+ * @property {string} learnMore.url where the link should navigate to
+ * @property {string} [learnMore.label ="Learn more"] - the label of the link button. defaults to "Learn More"
+ */
+interface PageSubTitleProps {
+    text: string;
+    learnMore?: {
+        url: string;
+        label?: string;
+    };
+}
+
+interface FormPageHeaderProps {
+    /**
+     * <MoreActions />
+     */
+    moreActions?: MoreActionsElement;
+    /**
+     * Page breadcrumbs
+     */
+    breadcrumbs?: ReactElement<Breadcrumbs>;
+    /**
+     * Page title text and optional badges
+     */
+    title: {
+        text: string;
+        badges?: (Pick<BadgeProps, 'skin' | 'prefixIcon' | 'suffixIcon'> & {
+            text: string;
+        })[];
+    };
+    /**
+     * Page subtitle text
+     */
+    subtitle?: PageSubTitleProps;
+}
+
+interface FormPageMainContentProps {
+    /**
+     * Applies a data-hook HTML attribute that can be used in tests
+     */
+    dataHook?: string;
+    children?: ReactNode;
+}
+
+interface FormPageAdditionalContentProps {
+    /**
+     * Applies a data-hook HTML attribute that can be used in tests
+     */
+    dataHook?: string;
+    children?: ReactNode;
+    /**
+     * Makes the additional content sticky when scrolling
+     */
+    sticky?: boolean;
+}
+
+/**
+ * `SettingsPageState` — you receive this, you don't construct it.
+ * Produced by `useSettingsPage()` (also `useSettingsPageContext()`).
+ */
+declare class SettingsPageState<T, V> {
+}
+
+declare function useSettingsPageHeader(child: SettingsPageHeaderElement): React__default.JSX.Element;
+
+interface SettingsPageHeaderProps extends FormPageHeaderProps {
+}
+type SettingsPageHeaderElement = ReactElement<SettingsPageHeaderProps, typeof SettingsPageHeader>;
+declare function SettingsPageHeader(_props: SettingsPageHeaderProps): null;
+declare namespace SettingsPageHeader {
+    var useSettingsPageHeader: typeof useSettingsPageHeader;
+    var displayName: string;
+}
+
+declare function useSettingsPageContent(child: SettingsPageContentElement, scrollableRef?: HTMLElement | null): React.JSX.Element;
+
+interface SettingsPageContentProps {
+    /**
+     * <SettingsPage.MainContent> and, if needed, <Settings.AdditionalContent> elements
+     */
+    children: ReactNode;
+}
+type SettingsPageContentElement = ReactElement<SettingsPageContentProps, typeof SettingsPageContent>;
+declare function SettingsPageContent(_props: SettingsPageContentProps): null;
+declare namespace SettingsPageContent {
+    var useSettingsPageContent: typeof useSettingsPageContent;
+    var displayName: string;
+}
+
+interface SettingsPageMainContentProps extends FormPageMainContentProps {
+}
+declare function SettingsPageMainContent(props: SettingsPageMainContentProps): React__default.JSX.Element;
+declare namespace SettingsPageMainContent {
+    var displayName: string;
+}
+
+interface SettingsPageAdditionalContentProps extends FormPageAdditionalContentProps {
+}
+declare function SettingsPageAdditionalContent(props: SettingsPageAdditionalContentProps): React__default.JSX.Element;
+declare namespace SettingsPageAdditionalContent {
+    var displayName: string;
+}
+
+interface SettingsPageProps<T, V extends FieldValues = FieldValues> extends PageProps {
+    /**
+     * SettingsPageState instance created with the `useSettingsPage` hook
+     */
+    state: SettingsPageState<T, V>;
+}
+declare function _SettingsPage<T, V extends FieldValues = FieldValues>({ state, ...rest }: SettingsPageProps<T, V>): React__default.JSX.Element;
+declare namespace _SettingsPage {
+    var Header: typeof SettingsPageHeader;
+    var Content: typeof SettingsPageContent;
+    var MainContent: typeof SettingsPageMainContent;
+    var AdditionalContent: typeof SettingsPageAdditionalContent;
+    var Card: typeof _SettingsPageCard & {
+        displayName: string;
+    };
+    var displayName: string;
+}
+declare const SettingsPage: typeof _SettingsPage & {
+    displayName: string;
+};
+
+export { SettingsPage };
+export type { SettingsPageProps };

package/dist/dts-bundle/components/SingleSelectFilter.d.ts

@@ -0,0 +1,107 @@
+import React from 'react';
+import { ListItemSelectSizes, listItemSectionBuilder, DropdownPropsControlled } from '@wix/design-system';
+import { DropdownLayoutOption } from '@wix/design-system/dist/types/DropdownLayout';
+
+/**
+ * `CollectionState` — you receive this, you don't construct it.
+ * Produced by `useFilterCollection()` (also `useStaticListFilterCollection()`, `useCollection()`, `createCollection()`).
+ */
+declare class CollectionState<T, F> {
+}
+
+/**
+ * `Filter` — cut here because it has its own bundle.
+ * Look `Filter` up in the bundle index for its full shape.
+ */
+interface Filter<T> {
+}
+type FiltersMap = {
+    [key: string]: Filter<any> | undefined;
+};
+
+/**
+ * `DropdownSelectState` — you receive this, you don't construct it.
+ * An internal state object — reached through another state object, never built directly.
+ */
+declare class DropdownSelectState<V> {
+}
+
+interface ListItem {
+    className?: string;
+    checkbox?: boolean;
+    prefix?: React.ReactNode;
+    title?: string;
+    subtitle?: string;
+    suffix?: React.ReactNode;
+    selected?: boolean;
+    disabled?: boolean;
+    size?: ListItemSelectSizes;
+    ellipsis?: boolean;
+    dataHook?: string;
+    sectionId?: string;
+    label?: string;
+}
+
+type DropdownLayoutOptionWithSectionId = DropdownLayoutOption & {
+    sectionId?: string;
+};
+interface BuildSectionOptionsArgs {
+    readonly items: DropdownLayoutOptionWithSectionId[];
+    readonly renderSection?: (sectionId: string) => Parameters<typeof listItemSectionBuilder>[0];
+}
+
+interface CollectionFilterInitialFetchTimingProps {
+    /**
+     * At which point the initial fetch of the filter collection data takes place. If this prop is omitted, it will take place on component mount.<br> <br>
+     * Supported values: <br>
+     * - `focus`: On the first visitor interaction with the filter component.
+     * @default undefined - on component mount
+     * @external
+     */
+    initialFetchTiming?: 'focus';
+    collection: {
+        initialFetch: () => unknown;
+    };
+}
+
+/**
+ * `FilterProps` — cut here because it has its own bundle.
+ * Look `FilterProps` up in the bundle index for its full shape.
+ */
+interface FilterProps<V> {
+}
+
+interface SingleSelectFilterBaseProps<V> extends Omit<Partial<DropdownPropsControlled>, 'onClear'>, FilterProps<V[]> {
+    filter: Filter<V[]>;
+    renderItem?: (item: V, index: number) => ListItem;
+    renderSection?: BuildSectionOptionsArgs['renderSection'];
+    dropdownSelect: DropdownSelectState<V>;
+    placeholder?: string;
+}
+
+interface SingleSelectFilterProps<V, F extends FiltersMap> extends Omit<SingleSelectFilterBaseProps<V>, 'keyedItems' | 'options' | 'dropdownSelect'>, CollectionFilterInitialFetchTimingProps {
+    /**
+     * Collection state object to fetch the items for the dropdown list.<br>
+     * Create using [useFilterCollection](./?path=/story/features-filter-hooks--usefiltercollection) or [useStaticListFilterCollection](./?path=/story/features-filter-hooks--usestaticlistfiltercollection).
+     * @external
+     */
+    collection: CollectionState<V, F>;
+    /**
+     * A function that returns a [ListItemSelectProps](https://www.docs.wixdesignsystem.com/?path=/story/components-form-dropdownlistitems--listitemselect) extended by `{sectionId?: string}`<br/>
+     * (Optional)
+     * @external
+     */
+    renderItem?: (item: V, index: number) => ListItem;
+    /**
+     * A function that returns  [ListItemSectionProps](https://www.docs.wixdesignsystem.com/?path=/story/components-form-dropdownlistitems--listitemsection) <br/>
+     * According to make it works you need return `sectionId` in `renderItem` method. <br/>
+     * ⚠️ Server should return section items sorted by sections in strict order. Otherwise, when using infinite scrolling the behavior of the sections will be unexpected (see sections example). <br/>
+     * (Optional)
+     * @external
+     */
+    renderSection?: SingleSelectFilterBaseProps<V>['renderSection'];
+}
+declare function SingleSelectFilter<V, F extends FiltersMap>(props: SingleSelectFilterProps<V, F>): React.JSX.Element;
+
+export { SingleSelectFilter };
+export type { SingleSelectFilterProps };

package/dist/dts-bundle/components/SummaryBar.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+
+interface SummaryItem {
+    title: string;
+    value: string;
+}
+type SummaryBarStatus = 'loading' | 'error' | 'success';
+type SummaryData = SummaryItem[];
+interface SummaryBarProps {
+    /**
+     * Data to display in the summary bar.
+     * @external
+     */
+    data: SummaryData;
+    /**
+     * Summary bar status.
+     * <br><br>
+     * Supported values:<br>
+     * - `"success"`<br>
+     * - `"loading"`<br>
+     * - `"error"`
+     * @external
+     * @default success
+     */
+    status: SummaryBarStatus;
+    /**
+     * Function that is called every time **Reload** is clicked.
+     * @external
+     */
+    onRetry: () => void | Promise<void>;
+}
+declare const SummaryBar: ((props: SummaryBarProps) => React.JSX.Element) & {
+    displayName: string;
+};
+
+export { SummaryBar };
+export type { SummaryBarProps, SummaryBarStatus, SummaryData, SummaryItem };

package/dist/dts-bundle/components/Table.d.ts

@@ -0,0 +1,175 @@
+import React, { ReactNode } from 'react';
+import { IconElement } from '@wix/design-system';
+
+/**
+ * `CollectionState` — you receive this, you don't construct it.
+ * Produced by `useFilterCollection()` (also `useStaticListFilterCollection()`, `useCollection()`, `createCollection()`).
+ */
+declare class CollectionState<T, F> {
+}
+
+/**
+ * `Filter` — cut here because it has its own bundle.
+ * Look `Filter` up in the bundle index for its full shape.
+ */
+interface Filter<T> {
+}
+type FiltersMap = {
+    [key: string]: Filter<any> | undefined;
+};
+
+/**
+ * `TableState` — you receive this, you don't construct it.
+ * Produced by `useTableCollection()` (also `useAmbassadorTable()`, `useTableContext()`). Look `TableState` up in the bundle index for its own API.
+ */
+declare class TableState<T, F> {
+}
+
+interface CtaBaseProps {
+    /**
+     * A unique identifier for the CTA.
+     * @external
+     */
+    id: string;
+    /**
+     * A callback that runs each time the button is clicked.
+     * @external
+     */
+    onClick?: () => void;
+    /**
+     * Button label.
+     * @external
+     */
+    label?: string;
+    /**
+     * An optional Icon prefix.
+     * @external
+     */
+    prefixIcon?: IconElement;
+}
+
+interface SectionBadgeConfig {
+    visible: boolean;
+    skin?: 'light' | 'danger' | 'neutralLight';
+}
+/**
+ * A summary item to display in the section header.
+ * @external
+ */
+interface SectionSummaryItem {
+    /**
+     * An icon to display before the text.
+     * @external
+     */
+    icon: ReactNode;
+    /**
+     * A label for the summary item.
+     * @external
+     */
+    text: string;
+    /**
+     * A count value for the summary item.
+     * @external
+     */
+    count: number;
+}
+interface Section {
+    /**
+     * A title for the section.
+     * @external
+     */
+    title: string;
+    /**
+     * A primary call to action for the section.
+     * @overrideType [CtaBaseProps](./?path=/story/common-types--ctabaseprops)
+     * @external
+     */
+    primaryAction?: CtaBaseProps;
+    /**
+     * A badge for the section. Configuration object for showing item count.
+     * @external
+     */
+    badge?: SectionBadgeConfig;
+    /**
+     * Summary items to display in the section header.
+     * Each item can have an icon, text label, and count.
+     * @external
+     */
+    summary?: SectionSummaryItem[];
+    /**
+     * Whether the section is collapsed.
+     * When true, the section items are hidden.
+     * @external
+     */
+    collapsed?: boolean;
+}
+/**
+ * A function that extracts the grouping key from an item.
+ * @external
+ */
+type GroupBy<T> = (item: T) => string;
+/**
+ * A function that renders section configuration given the section ID and all items in the section.
+ * @external
+ */
+type RenderSection<T> = (sectionId: string, items: T[]) => Section;
+/**
+ * Event callbacks for section interactions.
+ * @external
+ */
+interface SectionEvents {
+    /**
+     * Called when a section is toggled (collapsed/expanded).
+     * @param sectionId - The ID of the section being toggled
+     * @param isCollapsed - Whether the section is now collapsed
+     * @external
+     */
+    onToggle?: (sectionId: string, isCollapsed: boolean) => void;
+}
+
+interface TableSectionsProps<T, F extends FiltersMap> extends CollectionTableBaseProps<T, F> {
+    groupBy: GroupBy<T>;
+    renderSection: RenderSection<T>;
+    table: TableState<T, F>;
+    collapsible?: boolean;
+    events?: SectionEvents;
+}
+declare const TableSections: (<T, F extends FiltersMap>({ groupBy, renderSection, table, columns, rowDetails, collapsible, events, ...collectionTableProps }: TableSectionsProps<T, F>) => React.JSX.Element) & {
+    displayName: string;
+};
+type TableSectionsProp<T> = {
+    TableSections: typeof TableSections;
+    groupBy: GroupBy<T>;
+    renderSection: RenderSection<T>;
+    collapsible?: boolean;
+    events?: SectionEvents;
+};
+
+/**
+ * `CollectionTableBaseProps` — cut here because it has its own bundle.
+ * Look `CollectionTableBaseProps` up in the bundle index for its full shape.
+ */
+interface CollectionTableBaseProps<T, F> {
+}
+
+interface TableProps<T, F extends FiltersMap> extends CollectionTableBaseProps<T, F> {
+    rowHeight?: number | ((item: T, index: number) => number);
+    estimatedRowHeight?: number;
+    /**
+     * A state instance created using the [`useTableCollection()`](./?path=/story/base-components-collections-table-usetablecollection--usetablecollection) hook, responsible for managing the data displayed in the table.
+     * @overrideType [TableState](./?path=/story/base-components-collections-table-tablestate--tablestate)
+     * @external
+     */
+    state: CollectionState<T, F> | TableState<T, F>;
+    isVirtual?: boolean;
+    /**
+     * Configuration for rendering table sections. When provided, the table will render with section headers
+     * that group related rows together
+     * @external
+     */
+    sections?: TableSectionsProp<T>;
+}
+declare function Table<T, F extends FiltersMap = FiltersMap>(props: TableProps<T, F>): React.JSX.Element;
+
+export { Table };
+export type { TableProps };