@workday/canvas-kit-react 13.1.5 → 13.1.7

package/dist/commonjs/tabs/lib/TabsList.d.ts

@@ -14,6 +14,320 @@ export interface TabListProps<T = any> extends Omit<ExtractProps<typeof Flex, ne
     children: ((item: T) => React.ReactNode) | React.ReactNode;
     overflowButton?: React.ReactNode;
 }
+export declare const useTabOverflowScroll: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        getId: (item: any) => string;
+        orientation: import("@workday/canvas-kit-react/collection").Orientation;
+        panels: import("@workday/canvas-kit-react/collection").Item<any>[];
+        panelIndexRef: React.MutableRefObject<number>;
+        hiddenIds: string[];
+        itemSizeCache: Record<string, number>;
+        itemWidthCache: Record<string, number>;
+        containerSize: number;
+        containerWidth: number;
+        containerGap: number;
+        overflowTargetWidth: number;
+        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;
+        indexRef: React.MutableRefObject<number>;
+        nonInteractiveIds: string[];
+        isVirtualized: boolean;
+        items: import("@workday/canvas-kit-react/collection").Item<any>[];
+    };
+    events: {
+        registerPanel: (data: {
+            id: string;
+            textValue: string;
+        }) => void;
+        unregisterPanel: (data: {
+            id: string;
+        }) => void;
+        select(data: {
+            id: string;
+        }): void;
+        setContainerSize(data: {
+            width?: number | undefined;
+            height?: number | undefined;
+        }): void;
+        setContainerWidth(data: {
+            width?: number | undefined;
+        }): void;
+        setContainerGap(data: {
+            size: number;
+        }): void;
+        setOverflowTargetSize(data: {
+            width: number;
+            height: number;
+        }): void;
+        setOverflowTargetWidth(data: {
+            width: number;
+        }): void;
+        addItemWidth(data: {
+            id: string;
+            width: number;
+        }): void;
+        addItemSize(data: {
+            id: string;
+            width: number;
+            height: number;
+        }): void;
+        removeItemSize(data: {
+            id: string;
+        }): void;
+        removeItemWidth(data: {
+            id: string;
+        }): void;
+        addHiddenKey(data: {
+            id: string;
+        }): void;
+        removeHiddenKey(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;
+    };
+    menu: {
+        state: {
+            stackRef: React.RefObject<HTMLDivElement>;
+            targetRef: React.RefObject<HTMLButtonElement>;
+            initialFocusRef: React.RefObject<any> | undefined;
+            returnFocusRef: React.RefObject<any> | undefined;
+            placement: import("@popperjs/core").Placement;
+            id: string;
+            visibility: "hidden" | "visible";
+            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>;
+            orientation: "horizontal" | "vertical";
+            indexRef: React.MutableRefObject<number>;
+            nonInteractiveIds: string[];
+            isVirtualized: boolean;
+            items: import("@workday/canvas-kit-react/collection").Item<any>[];
+            mode: "multiple" | "single";
+        };
+        events: {
+            updatePlacement(data: {
+                placement: import("@popperjs/core").Placement;
+            }): void;
+            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): 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;
+            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;
+        };
+        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;
+            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;
+        };
+        selection: import("@workday/canvas-kit-react/collection").SelectionManager;
+        navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
+        getId: (item: any) => string;
+        getTextValue: (item: any) => string;
+    };
+    selection: import("@workday/canvas-kit-react/collection").SelectionManager;
+    navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
+    getId: (item: any) => string;
+    getTextValue: (item: any) => string;
+}, {
+    readonly ref: (instance: HTMLDivElement | null) => void;
+    readonly onScroll: (event: React.UIEvent<HTMLDivElement>) => void;
+}>;
 export declare const useTabsList: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
         getId: (item: any) => string;
@@ -325,19 +639,33 @@ export declare const useTabsList: import("@workday/canvas-kit-react/common").Beh
     getId: (item: any) => string;
     getTextValue: (item: any) => string;
 }, import("@workday/canvas-kit-react/common").RemoveNulls<import("@workday/canvas-kit-react/common").MergeProps<{
+    readonly ref: (instance: HTMLDivElement | null) => void;
+    readonly onScroll: (event: React.UIEvent<HTMLDivElement>) => void;
+}, import("@workday/canvas-kit-react/common").MergeProps<{
     readonly role: "tablist";
-    readonly overflowX: "auto" | undefined;
+    readonly 'aria-orientation': import("@workday/canvas-kit-react/collection").Orientation;
 }, import("@workday/canvas-kit-react/common").MergeProps<{
     readonly ref: (instance: HTMLElement | null) => void;
 }, import("@workday/canvas-kit-react/common").MergeProps<{
     readonly onKeyDown: (event: React.KeyboardEvent<Element>) => void;
     readonly onFocus: () => void;
     readonly onBlur: () => void;
-}, import("@workday/canvas-kit-react/common").MergeProps<{}, import("@workday/canvas-kit-react/common").MergeProps<{}, import("@workday/canvas-kit-react/common").MergeProps<{}, {}>>>>>>>>;
+}, import("@workday/canvas-kit-react/common").MergeProps<{}, import("@workday/canvas-kit-react/common").MergeProps<{}, {}>>>>>>>>;
 export declare const tabsListStencil: import("@workday/canvas-kit-styling").Stencil<{
     modality: {
         touch: {
+            overflowX: "auto";
             paddingInline: "--cnvs-sys-space-zero";
+            '&[data-scroll-position="start"]': {
+                maskImage: "linear-gradient(to right, white 80%, transparent)";
+            };
+            '&[data-scroll-position="middle"]': {
+                maskImage: "linear-gradient(to left, white 80%, transparent), linear-gradient(to right, white 80%, transparent)";
+                maskComposite: "intersect";
+            };
+            '&[data-scroll-position="end"]': {
+                maskImage: "linear-gradient(to left, white 80%, transparent)";
+            };
         };
         mouse: {};
         pen: {};
@@ -350,10 +678,6 @@ export declare const tabsListStencil: import("@workday/canvas-kit-styling").Sten
         left: {};
         right: {};
     };
-    currentScrollPos: {
-        true: {};
-        false: {};
-    };
 }, {}, {}, never, never>;
 export declare const TabsList: import("@workday/canvas-kit-react/common").ElementComponentM<"div", TabListProps<any> & {
     maskImage?: string | undefined;
@@ -668,8 +992,4 @@ export declare const TabsList: import("@workday/canvas-kit-react/common").Elemen
     getId: (item: any) => string;
     getTextValue: (item: any) => string;
 }>;
-export declare const useTouchDirection: () => {
-    direction: "left" | "right" | undefined;
-    isDragging: boolean;
-};
 //# sourceMappingURL=TabsList.d.ts.map

package/dist/commonjs/tabs/lib/TabsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsList.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAIL,YAAY,EAEb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AAWnE,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC/F;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC3D,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2LAUvB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;wBAoD1B,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyBpB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;CA+B7B,CAAC"}
+{"version":3,"file":"TabsList.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAIL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AAWnE,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC/F;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC3D,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAyCD,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAsBT,aAAa,CAAC,cAAc,CAAC;EAMpD,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BARA,aAAa,CAAC,cAAc,CAAC;;;;;;;;;;iIAkBpD,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAwC1B,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsBpB,CAAC"}

package/dist/commonjs/tabs/lib/TabsList.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTouchDirection = exports.TabsList = exports.tabsListStencil = exports.useTabsList = void 0;
+exports.TabsList = exports.tabsListStencil = exports.useTabsList = exports.useTabOverflowScroll = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
@@ -32,95 +32,90 @@ const collection_1 = require("@workday/canvas-kit-react/collection");
 const useTabsModel_1 = require("./useTabsModel");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
-exports.useTabsList = (0, common_1.composeHooks)((0, common_1.createElemPropsHook)(useTabsModel_1.useTabsModel)(() => {
-    const modality = (0, common_1.useModalityType)();
+function getScrollPercentage(elem, direction) {
+    if (direction === 'vertical') {
+        if (elem.scrollHeight > elem.clientHeight) {
+            const percentage = elem.scrollTop / (elem.scrollHeight - elem.clientHeight);
+            return percentage;
+        }
+        else {
+            return -1;
+        }
+    }
+    if (elem.scrollWidth > elem.clientWidth) {
+        const percentage = elem.scrollLeft / (elem.scrollWidth - elem.clientWidth);
+        return percentage;
+    }
+    else {
+        return -1;
+    }
+}
+function getScrollPosition(elem, direction) {
+    const percentage = getScrollPercentage(elem, direction);
+    return percentage <= -1
+        ? undefined
+        : percentage > 0.99
+            ? 'end'
+            : percentage > 0.01
+                ? 'middle'
+                : 'start';
+}
+function setScrollPosition(elem, scrollPosition) {
+    if (scrollPosition) {
+        elem.setAttribute('data-scroll-position', scrollPosition);
+    }
+    else {
+        elem.removeAttribute('data-scroll-position');
+    }
+}
+exports.useTabOverflowScroll = (0, common_1.createElemPropsHook)(useTabsModel_1.useTabsModel)((_model, ref, elemProps = {}) => {
+    const direction = elemProps['aria-orientation'] || 'vertical';
+    const { localRef, elementRef } = (0, common_1.useLocalRef)(ref);
+    React.useLayoutEffect(() => {
+        if (!localRef.current) {
+            return;
+        }
+        setScrollPosition(localRef.current, getScrollPosition(localRef.current, direction));
+    }, [localRef, direction]);
+    return {
+        ref: elementRef,
+        onScroll: (event) => {
+            const elem = event.currentTarget;
+            setScrollPosition(elem, getScrollPosition(elem, direction));
+        },
+    };
+});
+exports.useTabsList = (0, common_1.composeHooks)(exports.useTabOverflowScroll, (0, common_1.createElemPropsHook)(useTabsModel_1.useTabsModel)(model => {
     return {
         role: 'tablist',
-        overflowX: modality === 'touch' ? 'auto' : undefined,
+        'aria-orientation': model.state.orientation,
     };
 }), collection_1.useOverflowListMeasure, collection_1.useListResetCursorOnBlur);
 exports.tabsListStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "p2ql6x", styles: "box-sizing:border-box;display:flex;position:relative;border-bottom:0.0625rem solid var(--cnvs-sys-color-border-divider);gap:var(--cnvs-sys-space-x3);padding-inline:var(--cnvs-sys-space-x6);mask-image:none;" },
+    base: { name: "b1wy6x", styles: "box-sizing:border-box;display:flex;position:relative;border-bottom:0.0625rem solid var(--cnvs-sys-color-border-divider);gap:var(--cnvs-sys-space-x3);padding-inline:var(--cnvs-sys-space-x6);" },
     modifiers: {
         modality: {
-            touch: { name: "p2ql6y", styles: "padding-inline:var(--cnvs-sys-space-zero);" },
-            mouse: { name: "p2ql6z", styles: "" },
-            pen: { name: "p2ql70", styles: "" }
+            touch: { name: "b1wy6y", styles: "overflow-x:auto;padding-inline:var(--cnvs-sys-space-zero);&[data-scroll-position=\"start\"]{mask-image:linear-gradient(to right, white 80%, transparent);}&[data-scroll-position=\"middle\"]{mask-image:linear-gradient(to left, white 80%, transparent), linear-gradient(to right, white 80%, transparent);mask-composite:intersect;}&[data-scroll-position=\"end\"]{mask-image:linear-gradient(to left, white 80%, transparent);}" },
+            mouse: { name: "b1wy6z", styles: "" },
+            pen: { name: "b1wy70", styles: "" }
         },
         isDragging: {
-            true: { name: "p2ql71", styles: "" },
-            false: { name: "p2ql72", styles: "" }
+            true: { name: "b1wy71", styles: "" },
+            false: { name: "b1wy72", styles: "" }
         },
         direction: {
-            left: { name: "p2ql73", styles: "" },
-            right: { name: "p2ql74", styles: "" }
-        },
-        currentScrollPos: {
-            true: { name: "p2ql75", styles: "" },
-            false: { name: "p2ql76", styles: "" }
+            left: { name: "b1wy73", styles: "" },
+            right: { name: "b1wy74", styles: "" }
         }
-    },
-    compound: [
-        {
-            modifiers: {
-                modality: 'touch',
-                isDragging: true,
-                direction: 'left',
-            },
-            styles: { name: "p2ql77", styles: "mask-image:linear-gradient(to left, white 80%, transparent);" }
-        },
-        {
-            modifiers: {
-                modality: 'touch',
-                isDragging: true,
-                direction: 'right',
-            },
-            styles: { name: "p2ql78", styles: "mask-image:linear-gradient(to right, white 80%, transparent);" }
-        }
-    ]
-}, "tabs-list-d3ec20");
+    }
+}, "tabs-list-8f274c");
 exports.TabsList = (0, common_1.createSubcomponent)('div')({
     displayName: 'Tabs.List',
     modelHook: useTabsModel_1.useTabsModel,
     elemPropsHook: exports.useTabsList,
 })(({ children, overflowButton, ...elemProps }, Element, model) => {
     const modality = (0, common_1.useModalityType)();
-    const touchStates = (0, exports.useTouchDirection)();
     return ((0, jsx_runtime_1.jsxs)(Element, { ...(0, layout_1.mergeStyles)(elemProps, (0, exports.tabsListStencil)({
             modality: modality,
-            isDragging: touchStates.isDragging,
-            direction: touchStates.direction,
         })), children: [(0, collection_1.useListRenderItems)(model, children), overflowButton] }));
 });
-const useTouchDirection = () => {
-    const [isDragging, setIsDragging] = React.useState(false);
-    const [touchDir, setTouchDirection] = React.useState('right');
-    React.useEffect(() => {
-        let prevXPos = window.pageXOffset;
-        const handleTouchMove = function (e) {
-            const currXPos = e.touches[0].clientX;
-            setIsDragging(true);
-            if (currXPos > prevXPos) {
-                setTouchDirection('left');
-            }
-            else if (currXPos < prevXPos) {
-                setTouchDirection('right');
-            }
-            prevXPos = currXPos;
-            e.preventDefault();
-        };
-        const handleDragEnd = function () {
-            setIsDragging(false);
-        };
-        window.addEventListener('touchmove', handleTouchMove);
-        window.addEventListener('touchstart', handleDragEnd);
-        window.addEventListener('touchend', handleDragEnd);
-        return () => {
-            window.removeEventListener('touchmove', handleTouchMove);
-            window.removeEventListener('touchstart', handleDragEnd);
-            window.removeEventListener('touchend', handleDragEnd);
-        };
-    }, []);
-    return { direction: touchDir, isDragging: isDragging };
-};
-exports.useTouchDirection = useTouchDirection;

package/dist/commonjs/tabs/lib/TabsOverflowButton.js

@@ -13,7 +13,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const tabsOverflowButtonStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "p2ql79", styles: "box-sizing:border-box;&:has([data-part=\"tabs-overflow-button-icon\"]){display:flex;gap:var(--cnvs-sys-space-zero);}" }
+    base: { name: "b1wy75", styles: "box-sizing:border-box;&:has([data-part=\"tabs-overflow-button-icon\"]){display:flex;gap:var(--cnvs-sys-space-zero);}" }
 }, "tabs-overflow-button-4425ed");
 exports.useTabsOverflowButton = (0, common_1.composeHooks)((0, common_1.createElemPropsHook)(useTabsModel_1.useTabsModel)(() => {
     return {

package/dist/commonjs/text/lib/LabelText.js

@@ -9,21 +9,21 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const Text_1 = require("./Text");
 const labelTextStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: Text_1.textStencil,
-    base: { name: "p2qlp", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-sys-color-text-default);" },
+    base: { name: "b1wyp", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-sys-color-text-default);" },
     modifiers: {
         disabled: {
-            true: { name: "p2qlq", styles: "cursor:default;color:var(--cnvs-sys-color-text-disabled);" }
+            true: { name: "b1wyq", styles: "cursor:default;color:var(--cnvs-sys-color-text-disabled);" }
         },
         variant: {
-            inverse: { name: "p2qlr", styles: "color:var(--cnvs-sys-color-text-inverse);" },
-            error: { name: "p2qls", styles: "color:var(--cnvs-sys-color-text-critical-default);" },
-            hint: { name: "p2qlt", styles: "color:var(--cnvs-sys-color-text-hint);" }
+            inverse: { name: "b1wyr", styles: "color:var(--cnvs-sys-color-text-inverse);" },
+            error: { name: "b1wys", styles: "color:var(--cnvs-sys-color-text-critical-default);" },
+            hint: { name: "b1wyt", styles: "color:var(--cnvs-sys-color-text-hint);" }
         }
     },
     compound: [
         {
             modifiers: { variant: 'inverse', disabled: true },
-            styles: { name: "p2qlu", styles: "opacity:var(--cnvs-sys-opacity-disabled);color:var(--cnvs-sys-color-text-inverse);" }
+            styles: { name: "b1wyu", styles: "opacity:var(--cnvs-sys-opacity-disabled);color:var(--cnvs-sys-color-text-inverse);" }
         }
     ]
 }, "label-text-981a80");

package/dist/commonjs/text/lib/Text.js

@@ -7,30 +7,30 @@ const common_1 = require("@workday/canvas-kit-react/common");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 exports.textStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "p2ql5", styles: "box-sizing:border-box;" },
+    base: { name: "b1wy5", styles: "box-sizing:border-box;" },
     modifiers: {
         typeLevel: {
             // Title level styles
-            'title.large': { name: "p2ql6", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-large);font-size:var(--cnvs-sys-font-size-title-large);color:var(--cnvs-sys-color-text-strong);" },
-            'title.medium': { name: "p2ql7", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-medium);font-size:var(--cnvs-sys-font-size-title-medium);color:var(--cnvs-sys-color-text-strong);" },
-            'title.small': { name: "p2ql8", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-small);font-size:var(--cnvs-sys-font-size-title-small);color:var(--cnvs-sys-color-text-strong);" },
+            'title.large': { name: "b1wy6", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-large);font-size:var(--cnvs-sys-font-size-title-large);color:var(--cnvs-sys-color-text-strong);" },
+            'title.medium': { name: "b1wy7", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-medium);font-size:var(--cnvs-sys-font-size-title-medium);color:var(--cnvs-sys-color-text-strong);" },
+            'title.small': { name: "b1wy8", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-small);font-size:var(--cnvs-sys-font-size-title-small);color:var(--cnvs-sys-color-text-strong);" },
             // Heading level styles
-            'heading.large': { name: "p2ql9", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-large);font-size:var(--cnvs-sys-font-size-heading-large);color:var(--cnvs-sys-color-text-strong);" },
-            'heading.medium': { name: "p2qla", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-medium);font-size:var(--cnvs-sys-font-size-heading-medium);color:var(--cnvs-sys-color-text-strong);" },
-            'heading.small': { name: "p2qlb", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-small);font-size:var(--cnvs-sys-font-size-heading-small);color:var(--cnvs-sys-color-text-strong);" },
+            'heading.large': { name: "b1wy9", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-large);font-size:var(--cnvs-sys-font-size-heading-large);color:var(--cnvs-sys-color-text-strong);" },
+            'heading.medium': { name: "b1wya", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-medium);font-size:var(--cnvs-sys-font-size-heading-medium);color:var(--cnvs-sys-color-text-strong);" },
+            'heading.small': { name: "b1wyb", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-small);font-size:var(--cnvs-sys-font-size-heading-small);color:var(--cnvs-sys-color-text-strong);" },
             // Body level styles
-            'body.large': { name: "p2qlc", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-large);font-size:var(--cnvs-sys-font-size-body-large);color:var(--cnvs-sys-color-text-default);" },
-            'body.medium': { name: "p2qld", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-medium);font-size:var(--cnvs-sys-font-size-body-medium);color:var(--cnvs-sys-color-text-default);" },
-            'body.small': { name: "p2qle", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-small);font-size:var(--cnvs-sys-font-size-body-small);letter-spacing:var(--cnvs-base-letter-spacing-200);color:var(--cnvs-sys-color-text-default);" },
+            'body.large': { name: "b1wyc", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-large);font-size:var(--cnvs-sys-font-size-body-large);color:var(--cnvs-sys-color-text-default);" },
+            'body.medium': { name: "b1wyd", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-medium);font-size:var(--cnvs-sys-font-size-body-medium);color:var(--cnvs-sys-color-text-default);" },
+            'body.small': { name: "b1wye", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-small);font-size:var(--cnvs-sys-font-size-body-small);letter-spacing:var(--cnvs-base-letter-spacing-200);color:var(--cnvs-sys-color-text-default);" },
             // Subtext level styles
-            'subtext.large': { name: "p2qlf", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-sys-color-text-default);" },
-            'subtext.medium': { name: "p2qlg", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-medium);font-size:var(--cnvs-sys-font-size-subtext-medium);letter-spacing:var(--cnvs-base-letter-spacing-100);color:var(--cnvs-sys-color-text-default);" },
-            'subtext.small': { name: "p2qlh", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-small);font-size:var(--cnvs-sys-font-size-subtext-small);letter-spacing:var(--cnvs-base-letter-spacing-50);color:var(--cnvs-sys-color-text-default);" }
+            'subtext.large': { name: "b1wyf", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-sys-color-text-default);" },
+            'subtext.medium': { name: "b1wyg", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-medium);font-size:var(--cnvs-sys-font-size-subtext-medium);letter-spacing:var(--cnvs-base-letter-spacing-100);color:var(--cnvs-sys-color-text-default);" },
+            'subtext.small': { name: "b1wyh", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-small);font-size:var(--cnvs-sys-font-size-subtext-small);letter-spacing:var(--cnvs-base-letter-spacing-50);color:var(--cnvs-sys-color-text-default);" }
         },
         variant: {
-            error: { name: "p2qli", styles: "color:var(--cnvs-sys-color-text-critical-default);" },
-            hint: { name: "p2qlj", styles: "color:var(--cnvs-sys-color-text-hint);" },
-            inverse: { name: "p2qlk", styles: "color:var(--cnvs-sys-color-text-inverse);" }
+            error: { name: "b1wyi", styles: "color:var(--cnvs-sys-color-text-critical-default);" },
+            hint: { name: "b1wyj", styles: "color:var(--cnvs-sys-color-text-hint);" },
+            inverse: { name: "b1wyk", styles: "color:var(--cnvs-sys-color-text-inverse);" }
         }
     }
 }, "text-8fe759");