@workday/canvas-kit-labs-react 16.1.4 → 16.2.0-0612-next.0

package/dist/commonjs/selection-group/lib/SelectionGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionGroup.d.ts","sourceRoot":"","sources":["../../../../selection-group/lib/SelectionGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIvB;;;;;;;;;;OAUG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;OAOG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}

package/dist/commonjs/selection-group/lib/SelectionGroup.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectionGroup = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const common_1 = require("@workday/canvas-kit-react/common");
+const SelectionGroupItem_1 = require("./SelectionGroupItem");
+const SelectionGroupList_1 = require("./SelectionGroupList");
+const useSelectionGroupModel_1 = require("./hooks/useSelectionGroupModel");
+/**
+ * `SelectionGroup` is a container component that allows users to select one or more options from a
+ * predefined list using chip-style controls with a lightweight glyph indicator. It is responsible
+ * for creating a {@link useSelectionGroupModel SelectionGroupModel} and sharing it with its
+ * subcomponents using React context. It does not represent a real element.
+ *
+ * ```tsx
+ * <SelectionGroup mode="single">
+ *   <SelectionGroup.List aria-label="Select one option">
+ *     <SelectionGroup.Item data-id="first">First</SelectionGroup.Item>
+ *     <SelectionGroup.Item data-id="second">Second</SelectionGroup.Item>
+ *   </SelectionGroup.List>
+ * </SelectionGroup>
+ * ```
+ *
+ * Alternatively, you may pass in a model using the [hoisted model
+ * pattern](/getting-started/for-developers/resources/compound-components/#configuring-a-model).
+ *
+ * ```tsx
+ * const model = useSelectionGroupModel({mode: 'multiple'});
+ *
+ * <SelectionGroup model={model}>{Child components}</SelectionGroup>
+ * ```
+ */
+exports.SelectionGroup = (0, common_1.createContainer)()({
+    displayName: 'SelectionGroup',
+    modelHook: useSelectionGroupModel_1.useSelectionGroupModel,
+    subComponents: {
+        /**
+         * `SelectionGroup.List` is a container for {@link SelectionGroupItem SelectionGroup.Item}
+         * subcomponents. It renders a `radiogroup` in `single` mode and a `group` in `multiple` mode,
+         * and carries the group's accessible label and notification state.
+         *
+         * ```tsx
+         * <SelectionGroup.List aria-label="Select all that apply">
+         *   {SelectionGroup.Items}
+         * </SelectionGroup.List>
+         * ```
+         */
+        List: SelectionGroupList_1.SelectionGroupList,
+        /**
+         * `SelectionGroup.Item` is a `button` element with a glyph and a label. Each item requires a
+         * `data-id` prop to handle selection events properly.
+         *
+         * ```tsx
+         * <SelectionGroup.Item data-id="option-a">Option A</SelectionGroup.Item>
+         * ```
+         */
+        Item: SelectionGroupItem_1.SelectionGroupItem,
+    },
+})(({ children }) => {
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+});

package/dist/commonjs/selection-group/lib/SelectionGroupIcon.d.ts

@@ -0,0 +1,17 @@
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { SystemIcon } from '@workday/canvas-kit-react/icon';
+import { SelectionGroupMode } from './hooks/useSelectionGroupModel';
+export interface SelectionGroupIconProps extends Omit<ExtractProps<typeof SystemIcon, never>, 'icon'> {
+    /**
+     * The selection mode of the group the item belongs to. A circle is used for `single` and a
+     * square for `multiple`, matching the radio and checkbox controls each mode behaves like.
+     */
+    mode: SelectionGroupMode;
+    /**
+     * If true, the checked form of the icon is rendered.
+     */
+    selected: boolean;
+}
+export declare const selectionGroupIconStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>;
+export declare const SelectionGroupIcon: import("@workday/canvas-kit-react/common").ElementComponent<"span", SelectionGroupIconProps>;
+//# sourceMappingURL=SelectionGroupIcon.d.ts.map

package/dist/commonjs/selection-group/lib/SelectionGroupIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionGroupIcon.d.ts","sourceRoot":"","sources":["../../../../selection-group/lib/SelectionGroupIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,UAAU,EAAC,MAAM,gCAAgC,CAAC;AAS1D,OAAO,EAAC,kBAAkB,EAAC,MAAM,gCAAgC,CAAC;AAElE,MAAM,WAAW,uBACf,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,UAAU,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAC5D;;;OAGG;IACH,IAAI,EAAE,kBAAkB,CAAC;IACzB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,yBAAyB,iJAIpC,CAAC;AAYH,eAAO,MAAM,kBAAkB,8FAkB7B,CAAC"}

package/dist/commonjs/selection-group/lib/SelectionGroupIcon.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectionGroupIcon = exports.selectionGroupIconStencil = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const common_1 = require("@workday/canvas-kit-react/common");
+const icon_1 = require("@workday/canvas-kit-react/icon");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+exports.selectionGroupIconStencil = (0, canvas_kit_styling_1.createStencil)({
+    base: { name: "84ykk", styles: "box-sizing:border-box;flex-shrink:0;" }
+}, "selection-group-icon-6bc986");
+/**
+ * The icon is always rendered, in both modes and in both selected states, so items never shift
+ * width on selection. The shape communicates the mode and the checkmark communicates selection, so
+ * selected state is never conveyed by color alone.
+ */
+const icons = {
+    single: { selected: canvas_system_icons_web_1.checkCircleFillIcon, unselected: canvas_system_icons_web_1.circleIcon },
+    multiple: { selected: canvas_system_icons_web_1.checkboxFillIcon, unselected: canvas_system_icons_web_1.squareIcon },
+};
+exports.SelectionGroupIcon = (0, common_1.createComponent)('span')({
+    displayName: 'SelectionGroupIcon',
+    Component: ({ mode, selected, size = 'xs', ...elemProps }, ref, Element) => ((0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { as: Element, ref: ref, size: size, "aria-hidden": true, icon: icons[mode][selected ? 'selected' : 'unselected'], ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.selectionGroupIconStencil)()) })),
+});

package/dist/commonjs/selection-group/lib/SelectionGroupItem.d.ts

@@ -0,0 +1,173 @@
+import * as React from 'react';
+export interface SelectionGroupItemProps {
+    /**
+     * Optionally pass index to the item. This should be done if `SelectionGroup.Item` components were
+     * created via a `map` function. This index will ensure keyboard navigation works even if items
+     * are inserted out of order.
+     */
+    index?: number;
+    /**
+     * The contents of the item. This is text used as the accessible name of the button for screen
+     * readers. Labels should be short and concise.
+     */
+    children?: React.ReactNode;
+    /**
+     * The identifier of the item. This identifier will be used in change events.
+     * If this property is not provided, it will default to a string representation
+     * of the zero-based index of the item when it was initialized.
+     */
+    'data-id'?: string;
+    /**
+     * Optional id. If not set, it will inherit the ID passed to the `SelectionGroup` component and
+     * append the index at the end. Only set this for advanced cases.
+     */
+    id?: string;
+}
+export declare const selectionGroupItemStencil: import("@workday/canvas-kit-styling").Stencil<{
+    width: {
+        content: {
+            width: string;
+        };
+        equal: {
+            width: string;
+        };
+        column: {
+            width: string;
+        };
+    };
+}, {
+    readonly label: "selection-group-item-label";
+}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
+    shape: string;
+}, never>, {}, {
+    shape: string;
+}, never, never>, never>;
+export declare const SelectionGroupItem: import("@workday/canvas-kit-react/common").ElementComponentM<"button", SelectionGroupItemProps, {
+    state: {
+        mode: import("./hooks/useSelectionGroupModel").SelectionGroupMode;
+        width: import("./hooks/useSelectionGroupModel").SelectionGroupWidth;
+        disabled: boolean;
+        error: import("./hooks/useSelectionGroupModel").SelectionGroupError | undefined;
+        'aria-invalid': boolean | undefined;
+        'aria-describedby': string | undefined;
+        selectedIds: string[] | "all";
+        unselectedIds: string[];
+        cursorId: string | string[];
+        columnCount: number;
+        pageSizeRef: React.MutableRefObject<number>;
+        cursorIndexRef: {
+            readonly current: number;
+        };
+        UNSTABLE_virtual: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
+        UNSTABLE_defaultItemHeight: number;
+        containerRef: React.RefObject<HTMLDivElement>;
+        id: string;
+        orientation: "horizontal" | "vertical";
+        indexRef: React.MutableRefObject<number>;
+        nonInteractiveIds: string[];
+        isVirtualized: boolean;
+        items: import("@workday/canvas-kit-react/collection").Item<any>[];
+    };
+    events: {
+        goToNext: () => void;
+        goToPrevious: () => void;
+        goToPreviousRow: () => void;
+        goToNextRow: () => void;
+        goToFirst: () => void;
+        goToLast: () => void;
+        goToFirstOfRow: () => void;
+        goToLastOfRow: () => void;
+        goToNextPage: () => void;
+        goToPreviousPage: () => void;
+        select(data: {
+            id: string;
+        }): void;
+        selectAll(): void;
+        unselectAll(): void;
+        setSelectedIds(ids: string[] | "all"): void;
+        remove(data: {
+            id: string;
+            nextId?: string | undefined;
+            event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+        }): void;
+        goTo(data: {
+            id: string;
+        }): void;
+        registerItem(data: {
+            id: string;
+            textValue: string;
+        }): void;
+        unregisterItem(data: {
+            id: string;
+        }): void;
+        updateItemHeight(data: {
+            value: number;
+        }): void;
+    };
+    selection: import("@workday/canvas-kit-react/collection").SelectionManager;
+    navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
+    getId: (item: any) => string;
+    getTextValue: (item: any) => string;
+    UNSTABLE_parentModel: {
+        state: {
+            selectedIds: string[] | "all";
+            unselectedIds: string[];
+            cursorId: string | string[];
+            columnCount: number;
+            pageSizeRef: React.MutableRefObject<number>;
+            cursorIndexRef: {
+                readonly current: number;
+            };
+            UNSTABLE_virtual: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
+            UNSTABLE_defaultItemHeight: number;
+            containerRef: React.RefObject<HTMLDivElement>;
+            id: string;
+            orientation: "horizontal" | "vertical";
+            indexRef: React.MutableRefObject<number>;
+            nonInteractiveIds: string[];
+            isVirtualized: boolean;
+            items: import("@workday/canvas-kit-react/collection").Item<any>[];
+        };
+        events: {
+            select(data: {
+                id: string;
+            }): void;
+            selectAll(): void;
+            unselectAll(): void;
+            setSelectedIds(ids: string[] | "all"): void;
+            remove(data: {
+                id: string;
+                nextId?: string | undefined;
+                event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+            }): void;
+            goTo(data: {
+                id: string;
+            }): void;
+            goToNext(): void;
+            goToPrevious(): void;
+            goToPreviousRow(): void;
+            goToNextRow(): void;
+            goToFirst(): void;
+            goToLast(): void;
+            goToFirstOfRow(): void;
+            goToLastOfRow(): void;
+            goToNextPage(): void;
+            goToPreviousPage(): void;
+            registerItem(data: {
+                id: string;
+                textValue: string;
+            }): void;
+            unregisterItem(data: {
+                id: string;
+            }): void;
+            updateItemHeight(data: {
+                value: number;
+            }): void;
+        };
+        selection: import("@workday/canvas-kit-react/collection").SelectionManager;
+        navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
+        getId: (item: any) => string;
+        getTextValue: (item: any) => string;
+    } | undefined;
+}>;
+//# sourceMappingURL=SelectionGroupItem.d.ts.map

package/dist/commonjs/selection-group/lib/SelectionGroupItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionGroupItem.d.ts","sourceRoot":"","sources":["../../../../selection-group/lib/SelectionGroupItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,MAAM,WAAW,uBAAuB;IACtC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;wBAkFpC,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqB7B,CAAC"}

package/dist/commonjs/selection-group/lib/SelectionGroupItem.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectionGroupItem = exports.selectionGroupItemStencil = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const collection_1 = require("@workday/canvas-kit-react/collection");
+const common_1 = require("@workday/canvas-kit-react/common");
+const icon_1 = require("@workday/canvas-kit-react/icon");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const SelectionGroupIcon_1 = require("./SelectionGroupIcon");
+const useSelectionGroupItem_1 = require("./hooks/useSelectionGroupItem");
+const useSelectionGroupModel_1 = require("./hooks/useSelectionGroupModel");
+exports.selectionGroupItemStencil = (0, canvas_kit_styling_1.createStencil)({
+    extends: common_1.cornerShapeStencil,
+    parts: {
+        label: 'selection-group-item-label',
+    },
+    base: { name: "2ja79u", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-normal, 400);line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);font-size:var(--cnvs-sys-font-size-subtext-lg, 0.875rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);display:inline-flex;align-items:center;gap:var(--cnvs-base-size-75, 0.375rem);border:0.0625rem solid var(--cnvs-sys-color-border-default);padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));color:var(--cnvs-sys-color-fg-strong);cursor:pointer;text-align:start;transition:background-color 80ms ease, color 80ms ease, border-color 80ms ease;--color-system-icon-c9acc3:currentColor;--accentColor-system-icon-c9acc3:currentColor;[data-part=\"selection-group-item-label\"]{white-space:nowrap;}&:not([aria-checked=\"true\"]):is(:hover, .hover){background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:not([aria-checked=\"true\"]):is(:active, .active){background-color:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));}&:is(:focus-visible, .focus){box-shadow:0 0 0 1px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 3px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:is(:disabled, .disabled){cursor:default;opacity:var(--cnvs-sys-opacity-disabled);&:is(:hover, .hover){background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));}}&[aria-checked=\"true\"]{background-color:var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));border:0.0625rem solid transparent;color:var(--cnvs-sys-color-brand-fg-selected, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));&:is(:hover, .hover){background-color:var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));}&:is(:active, .active){background-color:var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));}&:is(:disabled, .disabled){background-color:var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11));color:var(--cnvs-sys-color-brand-fg-selected, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));}}" },
+    modifiers: {
+        width: {
+            content: { name: "hluj6", styles: "width:fit-content;" },
+            equal: { name: "1v6fnw", styles: "width:100%;" },
+            column: { name: "3i2d48", styles: "width:100%;" }
+        }
+    }
+}, "selection-group-item-15e2bc");
+exports.SelectionGroupItem = (0, common_1.createSubcomponent)('button')({
+    displayName: 'SelectionGroup.Item',
+    modelHook: useSelectionGroupModel_1.useSelectionGroupModel,
+    elemPropsHook: useSelectionGroupItem_1.useSelectionGroupItem,
+})(({ children, ...elemProps }, Element, model) => {
+    const name = elemProps['data-id'] || '';
+    const selected = !!name && (0, collection_1.isSelected)(name, model.state);
+    return ((0, jsx_runtime_1.jsxs)(Element, { ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.selectionGroupItemStencil)({
+            width: model.state.width,
+        })), children: [(0, jsx_runtime_1.jsx)(SelectionGroupIcon_1.SelectionGroupIcon, { mode: model.state.mode, selected: selected }), children && (0, jsx_runtime_1.jsx)("span", { ...exports.selectionGroupItemStencil.parts.label, children: children })] }));
+});

package/dist/commonjs/selection-group/lib/SelectionGroupList.d.ts

@@ -0,0 +1,172 @@
+import * as React from 'react';
+import { CSProps } from '@workday/canvas-kit-styling';
+export interface SelectionGroupListProps<T = any> extends CSProps {
+    /**
+     * Accessible label for the group. The label should state the selection mode, for example
+     * `"Select one"` or `"Select all that apply"`, so the mode is clear before interacting. Required
+     * unless `aria-labelledby` is provided or the group is wrapped in a `FormField` with a visible
+     * label.
+     */
+    'aria-label'?: string;
+    /**
+     * ID of an element that labels the group. Use when the group label is rendered outside the list.
+     */
+    'aria-labelledby'?: string;
+    children: ((item: T) => React.ReactNode) | React.ReactNode;
+}
+export declare const selectionGroupListStencil: import("@workday/canvas-kit-styling").Stencil<{
+    width: {
+        content: {};
+        equal: {
+            display: string;
+            gridAutoFlow: string;
+            gridAutoColumns: string;
+        };
+        column: {
+            flexDirection: string;
+            flexWrap: string;
+            width: string;
+        };
+    };
+    error: {
+        error: {
+            borderColor: "var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1))";
+        };
+        caution: {
+            borderColor: "var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)))";
+        };
+    };
+}, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
+    shape: string;
+}, never>, {}, {
+    shape: string;
+}, never, never>, never>;
+export declare const SelectionGroupList: import("@workday/canvas-kit-react/common").ElementComponentM<"div", SelectionGroupListProps<any>, {
+    state: {
+        mode: import("./hooks/useSelectionGroupModel").SelectionGroupMode;
+        width: import("./hooks/useSelectionGroupModel").SelectionGroupWidth;
+        disabled: boolean;
+        error: import("./hooks/useSelectionGroupModel").SelectionGroupError | undefined;
+        'aria-invalid': boolean | undefined;
+        'aria-describedby': string | undefined;
+        selectedIds: string[] | "all";
+        unselectedIds: string[];
+        cursorId: string | string[];
+        columnCount: number;
+        pageSizeRef: React.MutableRefObject<number>;
+        cursorIndexRef: {
+            readonly current: number;
+        };
+        UNSTABLE_virtual: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
+        UNSTABLE_defaultItemHeight: number;
+        containerRef: React.RefObject<HTMLDivElement>;
+        id: string;
+        orientation: "horizontal" | "vertical";
+        indexRef: React.MutableRefObject<number>;
+        nonInteractiveIds: string[];
+        isVirtualized: boolean;
+        items: import("@workday/canvas-kit-react/collection").Item<any>[];
+    };
+    events: {
+        goToNext: () => void;
+        goToPrevious: () => void;
+        goToPreviousRow: () => void;
+        goToNextRow: () => void;
+        goToFirst: () => void;
+        goToLast: () => void;
+        goToFirstOfRow: () => void;
+        goToLastOfRow: () => void;
+        goToNextPage: () => void;
+        goToPreviousPage: () => void;
+        select(data: {
+            id: string;
+        }): void;
+        selectAll(): void;
+        unselectAll(): void;
+        setSelectedIds(ids: string[] | "all"): void;
+        remove(data: {
+            id: string;
+            nextId?: string | undefined;
+            event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+        }): void;
+        goTo(data: {
+            id: string;
+        }): void;
+        registerItem(data: {
+            id: string;
+            textValue: string;
+        }): void;
+        unregisterItem(data: {
+            id: string;
+        }): void;
+        updateItemHeight(data: {
+            value: number;
+        }): void;
+    };
+    selection: import("@workday/canvas-kit-react/collection").SelectionManager;
+    navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
+    getId: (item: any) => string;
+    getTextValue: (item: any) => string;
+    UNSTABLE_parentModel: {
+        state: {
+            selectedIds: string[] | "all";
+            unselectedIds: string[];
+            cursorId: string | string[];
+            columnCount: number;
+            pageSizeRef: React.MutableRefObject<number>;
+            cursorIndexRef: {
+                readonly current: number;
+            };
+            UNSTABLE_virtual: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
+            UNSTABLE_defaultItemHeight: number;
+            containerRef: React.RefObject<HTMLDivElement>;
+            id: string;
+            orientation: "horizontal" | "vertical";
+            indexRef: React.MutableRefObject<number>;
+            nonInteractiveIds: string[];
+            isVirtualized: boolean;
+            items: import("@workday/canvas-kit-react/collection").Item<any>[];
+        };
+        events: {
+            select(data: {
+                id: string;
+            }): void;
+            selectAll(): void;
+            unselectAll(): void;
+            setSelectedIds(ids: string[] | "all"): void;
+            remove(data: {
+                id: string;
+                nextId?: string | undefined;
+                event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+            }): void;
+            goTo(data: {
+                id: string;
+            }): void;
+            goToNext(): void;
+            goToPrevious(): void;
+            goToPreviousRow(): void;
+            goToNextRow(): void;
+            goToFirst(): void;
+            goToLast(): void;
+            goToFirstOfRow(): void;
+            goToLastOfRow(): void;
+            goToNextPage(): void;
+            goToPreviousPage(): void;
+            registerItem(data: {
+                id: string;
+                textValue: string;
+            }): void;
+            unregisterItem(data: {
+                id: string;
+            }): void;
+            updateItemHeight(data: {
+                value: number;
+            }): void;
+        };
+        selection: import("@workday/canvas-kit-react/collection").SelectionManager;
+        navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
+        getId: (item: any) => string;
+        getTextValue: (item: any) => string;
+    } | undefined;
+}>;
+//# sourceMappingURL=SelectionGroupList.d.ts.map

package/dist/commonjs/selection-group/lib/SelectionGroupList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionGroupList.d.ts","sourceRoot":"","sources":["../../../../selection-group/lib/SelectionGroupList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAC,OAAO,EAAsC,MAAM,6BAA6B,CAAC;AAKzF,MAAM,WAAW,uBAAuB,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,OAAO;IAC/D;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;CAC5D;AAED,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;wBAwCpC,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsB7B,CAAC"}

package/dist/commonjs/selection-group/lib/SelectionGroupList.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectionGroupList = exports.selectionGroupListStencil = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const collection_1 = require("@workday/canvas-kit-react/collection");
+const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const useSelectionGroupModel_1 = require("./hooks/useSelectionGroupModel");
+exports.selectionGroupListStencil = (0, canvas_kit_styling_1.createStencil)({
+    extends: common_1.cornerShapeStencil,
+    base: { name: "4354zn", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);display:flex;flex-wrap:wrap;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));width:fit-content;border:0.125rem solid transparent;padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));transition:100ms border-color;" },
+    modifiers: {
+        width: {
+            content: { name: "3v8oj4", styles: "" },
+            // `1fr` auto columns inside a `fit-content` grid all resolve to the widest item's
+            // max-content width, which sizes every item to the longest label without measuring the DOM.
+            equal: { name: "41o1qx", styles: "display:grid;grid-auto-flow:column;grid-auto-columns:1fr;" },
+            column: { name: "1yq4s2", styles: "flex-direction:column;flex-wrap:nowrap;width:100%;" }
+        },
+        error: {
+            error: { name: "2g6m3w", styles: "border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));" },
+            caution: { name: "2us6z8", styles: "border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));" }
+        }
+    }
+}, "selection-group-list-25bb89");
+exports.SelectionGroupList = (0, common_1.createSubcomponent)('div')({
+    displayName: 'SelectionGroup.List',
+    modelHook: useSelectionGroupModel_1.useSelectionGroupModel,
+})(({ children, ...elemProps }, Element, model) => {
+    return ((0, jsx_runtime_1.jsx)(Element, { role: model.state.mode === 'single' ? 'radiogroup' : 'group', "aria-invalid": model.state.mode === 'single' ? model.state['aria-invalid'] : undefined, "aria-describedby": model.state['aria-describedby'], ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.selectionGroupListStencil)({
+            width: model.state.width,
+            error: model.state.error,
+        })), children: (0, collection_1.useListRenderItems)(model, children) }));
+});