@workday/canvas-kit-react 15.0.0-alpha.1326-next.0 → 15.0.0

package/dist/es6/segmented-control/lib/SegmentedControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAyB,2BAA2B,EAAC,MAAM,0BAA0B,CAAC;AAE7F;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,2BAA2B,CAAC,EAAE,CAAC;IAE5D;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CAC7C;AAsBD;;GAEG;AACH,eAAO,MAAM,gBAAgB;;CA+B3B,CAAC"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIzB;;;;;;;OAOG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;OAOG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}

package/dist/es6/segmented-control/lib/SegmentedControl.js

@@ -1,38 +1,51 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { createComponent } from '@workday/canvas-kit-react/common';
-import { SegmentedControlButton } from './SegmentedControlButton';
-const onButtonClick = (existingOnClick, onChange, index, event) => {
-    if (existingOnClick) {
-        existingOnClick(event);
-    }
-    const target = event.currentTarget;
-    if (target && onChange) {
-        if (target.value) {
-            onChange(target.value);
-        }
-        else {
-            onChange(index);
-        }
-    }
-};
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { createContainer } from '@workday/canvas-kit-react/common';
+import { SegmentedControlItem } from './SegmentedControlItem';
+import { SegmentedControlList } from './SegmentedControlList';
+import { useSegmentedControlModel } from './hooks/useSegmentedControlModel';
 /**
- * @deprecated ⚠️ `SegmentedControl` in Main has been deprecated and will be removed in a future major version. Please use [`SegmentedControl` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs) instead.
+ * `SegmentedControl` is a container component that is responsible for creating a
+ * {@link SegmentedControlModel} and sharing it with its subcomponents using React context. It does
+ * not represent a real element.
+ *
+ * ```tsx
+ * <SegmentedControl items={[]}>{Child components}</SegmentedControl>
+ * ```
+ *
+ * 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 = useSegmentedControlModel({
+ *   items: [],
+ * });
+ *
+ * <SegmentedControl model={model}>{Child components}</SegmentedControl>
+ * ```
  */
-export const SegmentedControl = createComponent('div')({
+export const SegmentedControl = createContainer()({
     displayName: 'SegmentedControl',
-    Component: ({ value = 0, children, onChange, ...elemProps }, ref) => {
-        return (_jsx("div", { ...elemProps, children: React.Children.map(children, (child, index) => {
-                if (typeof child.type === typeof SegmentedControlButton) {
-                    return React.cloneElement(child, {
-                        toggled: typeof value === 'number' ? index === value : child.props.value === value,
-                        onClick: onButtonClick.bind(undefined, child.props.onClick, onChange, index),
-                    });
-                }
-                return child;
-            }) }));
-    },
+    modelHook: useSegmentedControlModel,
     subComponents: {
-        Button: SegmentedControlButton,
+        /**
+         * `SegmentedControl.List` renders {@link Grid} under the hood. It is a container for
+         * {@link SegmentedControlItem SegmentedControl.Item} subcomponents.
+         *
+         * ```tsx
+         * <SegmentedControl.List>{SegmentedControl.Items}</SegmentedControl.List>
+         * ```
+         */
+        List: SegmentedControlList,
+        /**
+         * `SegmentedControl.Item` is a `button` element built on `BaseButton`. `SegmentedControl.Item`
+         * has a `data-id` prop to handle `onSelect` properly.
+         *
+         * ```tsx
+         * <SegmentedControl.Item data-id="table">Table</SegmentedControl.Item>
+         * ```
+         */
+        Item: SegmentedControlItem,
     },
+})(({ children }) => {
+    return _jsx(_Fragment, { children: children });
 });

package/dist/es6/segmented-control/lib/SegmentedControlItem.d.ts

@@ -0,0 +1,248 @@
+import * as React from 'react';
+import { ButtonContainerProps } from '@workday/canvas-kit-react/button';
+import { TooltipProps } from '@workday/canvas-kit-react/tooltip';
+import { CanvasSystemIcon } from '@workday/canvas-system-icons-web';
+export interface ItemProps extends ButtonContainerProps {
+    /**
+     * Optionally pass index to the item. This should be done if `SegmentedControl.Item` components were created
+     * via a `[Array::map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/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.
+     */
+    children?: React.ReactNode;
+    /**
+     * The identifier of the item. This identifier will be used in change events and for `initialTab`.
+     * If this property is not provided, it will default to a string representation
+     * of the 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 `SegmentedControl` component and append the
+     * index at the end. Only set this for advanced cases.
+     */
+    id?: string;
+    /**
+     * Part of the ARIA specification for buttons. Lets screen readers know which button is active. This
+     * should either be `true` or `false`. This is automatically set by the
+     * component and should only be used in advanced cases.
+     */
+    'aria-pressed'?: boolean;
+    /**
+     * The icon of the button.
+     */
+    icon?: CanvasSystemIcon;
+    /**
+     * Tooltip Props
+     */
+    tooltipProps?: Omit<TooltipProps, 'children'>;
+}
+export declare const segmentedControlItemStencil: import("@workday/canvas-kit-styling").Stencil<{
+    size: {
+        large: {
+            height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))";
+            gap: "var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem))";
+        };
+        medium: {
+            height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem))";
+        };
+        small: {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            height: "var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem))";
+        };
+    };
+    variant: {
+        iconOnly: {};
+        textOnly: {};
+        iconWithText: {};
+    };
+}, {}, {}, import("@workday/canvas-kit-styling").Stencil<{
+    size: {
+        large: {
+            fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))";
+            lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))";
+            height: "var(--cnvs-sys-size-lg, 3rem)";
+            paddingInline: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8, 2rem))";
+            minWidth: "var(--cnvs-base-size-1400, 7rem)";
+        };
+        medium: {
+            fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
+            minWidth: "var(--cnvs-base-size-1200, 6rem)";
+            paddingInline: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem))";
+            height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))";
+        };
+        small: {
+            fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
+            height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem))";
+            minWidth: "var(--cnvs-base-size-1000, 5rem)";
+            paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem))";
+            gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem))";
+        };
+        extraSmall: {
+            fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))";
+            lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))";
+            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))";
+            height: "var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem))";
+            minWidth: string;
+            paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem))";
+            gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem))";
+        };
+    };
+    grow: {
+        true: {
+            width: string;
+            maxWidth: string;
+        };
+    };
+    iconPosition: {
+        only: {
+            padding: number;
+        };
+        start: {};
+        end: {};
+    };
+}, {}, {
+    background: string;
+    border: string;
+    boxShadowInner: string;
+    boxShadowOuter: string;
+    label: string;
+    opacity: string;
+    borderRadius: string;
+}, never, never>, never>;
+export declare const SegmentedControlItem: import("@workday/canvas-kit-react/common").ElementComponentM<"button", ItemProps, {
+    state: {
+        disabled: boolean;
+        size: "medium" | "small" | "large";
+        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("../..").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("../..").SelectionManager;
+    navigation: import("../..").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("../..").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("../..").SelectionManager;
+        navigation: import("../..").NavigationManager;
+        getId: (item: any) => string;
+        getTextValue: (item: any) => string;
+    } | undefined;
+}>;
+//# sourceMappingURL=SegmentedControlItem.d.ts.map

package/dist/es6/segmented-control/lib/SegmentedControlItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControlItem.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControlItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAa,oBAAoB,EAAgB,MAAM,kCAAkC,CAAC;AAIjG,OAAO,EAAU,YAAY,EAAC,MAAM,mCAAmC,CAAC;AAExE,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAMlE,MAAM,WAAW,SAAU,SAAQ,oBAAoB;IACrD;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAuJtC,CAAC;AAyBH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmB/B,CAAC"}

package/dist/es6/segmented-control/lib/SegmentedControlItem.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { BaseButton, buttonStencil } from '@workday/canvas-kit-react/button';
+import { createSubcomponent } from '@workday/canvas-kit-react/common';
+import { systemIconStencil } from '@workday/canvas-kit-react/icon';
+import { Text } from '@workday/canvas-kit-react/text';
+import { Tooltip } from '@workday/canvas-kit-react/tooltip';
+import { colorSpace, createStencil, handleCsProp } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+import { useSegmentedControlItem } from './hooks/useSegmentedControlItem';
+import { useSegmentedControlModel } from './hooks/useSegmentedControlModel';
+export const segmentedControlItemStencil = createStencil({
+    extends: buttonStencil,
+    base: { name: "3s92e7", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));font-weight:var(--cnvs-sys-font-weight-bold);text-align:start;padding-inline:0;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));--borderRadius-button-c26182:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));--label-button-c26182:var(--cnvs-sys-color-fg-muted-default);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-default);&:hover, &.hover{--background-button-c26182:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-hover, 0.08) * 100%));--label-button-c26182:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:active, &.active{--background-button-c26182:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-pressed, 0.18) * 100%));--label-button-c26182:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:focus-visible, &.focus{--label-button-c26182:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-strong);}&:disabled, &.disabled{--opacity-button-c26182:var(--cnvs-sys-opacity-disabled);--background-button-c26182:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--label-button-c26182:var(--cnvs-sys-color-fg-muted-default);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-default);}&[aria-pressed='true']{--background-button-c26182:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));--border-button-c26182:var(--cnvs-sys-color-border-input-default);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);--label-button-c26182:var(--cnvs-sys-color-fg-strong);&:hover, &.hover{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);--label-button-c26182:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--opacity-button-c26182:var(--cnvs-sys-opacity-disabled);}}:dir(rtl){svg{transform:scaleX(-1);}}" },
+    modifiers: {
+        size: {
+            large: { name: "34l25v", styles: "height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));" },
+            medium: { name: "2ko2o4", styles: "height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));" },
+            small: { name: "y8y6r", styles: "font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));font-weight:var(--cnvs-sys-font-weight-bold);height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));" }
+        },
+        variant: {
+            iconOnly: { name: "12t6x0", styles: "" },
+            textOnly: { name: "3zif9e", styles: "" },
+            iconWithText: { name: "bfb1h", styles: "" }
+        }
+    },
+    compound: [
+        {
+            modifiers: { size: 'large', variant: 'iconOnly' },
+            styles: { name: "380d31", styles: "min-width:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));" }
+        },
+        {
+            modifiers: { size: 'large', variant: 'iconWithText' },
+            styles: { name: "27a1oy", styles: "padding-inline:var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem)) var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));" }
+        },
+        {
+            modifiers: { size: 'large', variant: 'textOnly' },
+            styles: { name: "azswi", styles: "padding-inline:var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));" }
+        },
+        {
+            modifiers: { size: 'medium', variant: 'iconOnly' },
+            styles: { name: "34lnfo", styles: "min-width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));" }
+        },
+        {
+            modifiers: { size: 'medium', variant: 'iconWithText' },
+            styles: { name: "1ldm4p", styles: "padding-inline:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem));" }
+        },
+        {
+            modifiers: { size: 'medium', variant: 'textOnly' },
+            styles: { name: "he6a4", styles: "padding-inline:var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem));" }
+        },
+        {
+            modifiers: { size: 'small', variant: 'iconOnly' },
+            styles: { name: "bddct", styles: "min-width:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));" }
+        },
+        {
+            modifiers: { size: 'small', variant: 'iconWithText' },
+            styles: { name: "zzd9b", styles: "padding-inline:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
+        },
+        {
+            modifiers: { size: 'small', variant: 'textOnly' },
+            styles: { name: "3bepei", styles: "padding-inline:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
+        }
+    ]
+}, "segmented-control-item-7b0971");
+const Container = ({ tooltipProps, children }) => {
+    return tooltipProps ? (_jsx(Tooltip, { ...tooltipProps, children: children })) : (_jsx(React.Fragment, { children: children }));
+};
+const getVariant = (icon, children) => {
+    if (icon && children) {
+        return 'iconWithText';
+    }
+    else if (!icon && children) {
+        return 'textOnly';
+    }
+    else {
+        return 'iconOnly';
+    }
+};
+export const SegmentedControlItem = createSubcomponent('button')({
+    displayName: 'SegmentedControl.Item',
+    modelHook: useSegmentedControlModel,
+    elemPropsHook: useSegmentedControlItem,
+})(({ children, icon, tooltipProps, ...elemProps }, Element, { state: { size } }) => {
+    const variant = getVariant(icon, children);
+    const iconSize = size === 'small' ? 'extraSmall' : 'small';
+    return (_jsx(Container, { tooltipProps: tooltipProps, children: _jsxs(BaseButton, { as: Element, ...handleCsProp(elemProps, segmentedControlItemStencil({ size, variant })), children: [icon && _jsx(BaseButton.Icon, { icon: icon, size: iconSize }), children && _jsx(Text, { children: children })] }) }));
+});

package/dist/es6/segmented-control/lib/SegmentedControlList.d.ts

@@ -0,0 +1,148 @@
+import * as React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Grid } from '@workday/canvas-kit-react/layout';
+export interface SegmentedControlListProps<T = any> extends Omit<Partial<ExtractProps<typeof Grid, never>>, 'children'> {
+    'aria-label': string;
+    children: ((item: T) => React.ReactNode) | React.ReactNode;
+}
+export declare const segmentedControlListStencil: import("@workday/canvas-kit-styling").Stencil<{
+    orientation: {
+        vertical: ({ items }: {
+            items: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            gridTemplateRows: string;
+        };
+        horizontal: ({ items }: {
+            items: `--${string}`;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            gridTemplateColumns: string;
+        };
+    };
+}, {}, {
+    items: string;
+}, never, never>;
+export declare const SegmentedControlList: import("@workday/canvas-kit-react/common").ElementComponentM<"div", SegmentedControlListProps<any>, {
+    state: {
+        disabled: boolean;
+        size: "medium" | "small" | "large";
+        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;
+    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=SegmentedControlList.d.ts.map

package/dist/es6/segmented-control/lib/SegmentedControlList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControlList.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControlList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAMtD,MAAM,WAAW,yBAAyB,CAAC,CAAC,GAAG,GAAG,CAChD,SAAQ,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC;IACnE,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;CAC5D;AAED,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;gBAsBtC,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkB/B,CAAC"}

package/dist/es6/segmented-control/lib/SegmentedControlList.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useListRenderItems } from '@workday/canvas-kit-react/collection';
+import { createSubcomponent } from '@workday/canvas-kit-react/common';
+import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+import { useSegmentedControlModel } from './hooks/useSegmentedControlModel';
+export const segmentedControlListStencil = createStencil({
+    vars: {
+        items: '',
+    },
+    base: { name: "1rkjtu", styles: "box-sizing:border-box;display:inline-grid;background-color:var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09)));border:0 solid var(--cnvs-sys-color-border-transparent);border-radius:var(--cnvs-sys-shape-lg, 0.75rem);padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));grid-gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));" },
+    modifiers: {
+        orientation: {
+            vertical: { name: "1froxv", styles: "grid-template-rows:repeat(var(--items-segmented-control-list-55b1aa), 1fr);" },
+            horizontal: { name: "1p9z0z", styles: "grid-template-columns:repeat(var(--items-segmented-control-list-55b1aa), 1fr);" }
+        }
+    }
+}, "segmented-control-list-55b1aa");
+export const SegmentedControlList = createSubcomponent('div')({
+    displayName: 'SegmentedControl.List',
+    modelHook: useSegmentedControlModel,
+})(({ children, ...elemProps }, Element, model) => {
+    return (_jsx(Element, { role: "group", ...handleCsProp(elemProps, segmentedControlListStencil({
+            items: `${model.state.items.length}`,
+            orientation: model.state.orientation,
+        })), children: useListRenderItems(model, children) }));
+});