@workday/canvas-kit-react 8.0.0-alpha.253-next.22 → 8.0.0-alpha.428-next.2

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

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,98 +18,103 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabsItem = exports.useTabsItem = exports.StyledTabItem = void 0;
-var React = __importStar(require("react"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var layout_1 = require("@workday/canvas-kit-react/layout");
-var tooltip_1 = require("@workday/canvas-kit-react/tooltip");
-var icon_1 = require("@workday/canvas-kit-react/icon");
-var collection_1 = require("@workday/canvas-kit-react/collection");
-var useTabsModel_1 = require("./useTabsModel");
-exports.StyledTabItem = common_1.styled(layout_1.Box.as('button'))(function (_a) {
-    var theme = _a.theme, spacing = _a.spacing;
-    return (__assign(__assign(__assign(__assign({}, tokens_1.type.levels.subtext.large), { '& > *:not(style) ~ *:not(style)': {
-            marginLeft: spacing || tokens_1.space.xxs,
-        }, fontWeight: tokens_1.type.properties.fontWeights.medium, border: 'none', backgroundColor: 'transparent', flex: '0 0 auto', alignItems: 'center', padding: tokens_1.space.xs + " " + tokens_1.space.s, height: 52, boxSizing: 'border-box', cursor: 'pointer', color: tokens_1.colors.licorice300, position: 'relative', borderRadius: tokens_1.borderRadius.m + " " + tokens_1.borderRadius.m + " 0px 0px", transition: 'background 150ms ease, color 150ms ease' }), common_1.hideMouseFocus), { '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+const React = __importStar(require("react"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+const tooltip_1 = require("@workday/canvas-kit-react/tooltip");
+const icon_1 = require("@workday/canvas-kit-react/icon");
+const collection_1 = require("@workday/canvas-kit-react/collection");
+const useTabsModel_1 = require("./useTabsModel");
+exports.StyledTabItem = common_1.styled(layout_1.Box.as('button'))(({ theme }) => ({
+    ...tokens_1.type.levels.subtext.large,
+    fontWeight: tokens_1.type.properties.fontWeights.medium,
+    border: 'none',
+    backgroundColor: 'transparent',
+    flex: '0 0 auto',
+    alignItems: 'center',
+    padding: `${tokens_1.space.xs} ${tokens_1.space.s}`,
+    height: 52,
+    boxSizing: 'border-box',
+    cursor: 'pointer',
+    color: tokens_1.colors.licorice300,
+    position: 'relative',
+    borderRadius: `${tokens_1.borderRadius.m} ${tokens_1.borderRadius.m} 0px 0px`,
+    transition: 'background 150ms ease, color 150ms ease',
+    ...common_1.hideMouseFocus,
+    '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+        fill: tokens_1.iconColors.active,
+    },
+    '&:hover, &:focus': {
+        backgroundColor: tokens_1.colors.soap200,
+        color: tokens_1.colors.blackPepper400,
+        '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
+            fill: tokens_1.iconColors.hover,
+        },
+        '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
             fill: tokens_1.iconColors.active,
-        }, '&:hover, &:focus': {
-            backgroundColor: tokens_1.colors.soap200,
-            color: tokens_1.colors.blackPepper400,
-            '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-                fill: tokens_1.iconColors.hover,
-            },
-            '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-                fill: tokens_1.iconColors.active,
-            },
-        }, '&:focus': __assign({ outline: "none" }, common_1.focusRing({ inset: 'outer', width: 0, separation: 2 }, theme)), '&:disabled, &[aria-disabled]': {
-            color: tokens_1.colors.licorice100,
+        },
+    },
+    '&:focus': {
+        outline: `none`,
+        ...common_1.focusRing({ inset: 'outer', width: 0, separation: 2 }, theme),
+    },
+    '&:disabled, &[aria-disabled]': {
+        color: tokens_1.colors.licorice100,
+        '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
+            fill: tokens_1.iconColors.disabled,
+        },
+        '&:hover': {
+            cursor: 'auto',
+            backgroundColor: `transparent`,
             '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
                 fill: tokens_1.iconColors.disabled,
             },
-            '&:hover': {
-                cursor: 'auto',
-                backgroundColor: "transparent",
-                '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-                    fill: tokens_1.iconColors.disabled,
-                },
-            },
-        }, '&[aria-selected=true]': {
+        },
+    },
+    '&[aria-selected=true]': {
+        color: theme.canvas.palette.primary.main,
+        cursor: 'default',
+        '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
+            fill: theme.canvas.palette.primary.main,
+        },
+        '&:after': {
+            position: 'absolute',
+            height: tokens_1.space.xxxs,
+            borderRadius: `${tokens_1.borderRadius.m} ${tokens_1.borderRadius.m} 0px 0px`,
+            backgroundColor: theme.canvas.palette.primary.main,
+            bottom: 0,
+            content: `''`,
+            left: 0,
+            marginTop: '-2px',
+            width: '100%',
+        },
+        '&:hover, &:focus': {
+            backgroundColor: `transparent`,
             color: theme.canvas.palette.primary.main,
-            cursor: 'default',
-            '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-                fill: theme.canvas.palette.primary.main,
-            },
-            '&:after': {
-                position: 'absolute',
-                height: tokens_1.space.xxxs,
-                borderRadius: tokens_1.borderRadius.m + " " + tokens_1.borderRadius.m + " 0px 0px",
-                backgroundColor: theme.canvas.palette.primary.main,
-                bottom: 0,
-                content: "''",
-                left: 0,
-                marginTop: '-2px',
-                width: '100%',
-            },
-            '&:hover, &:focus': {
-                backgroundColor: "transparent",
-                color: theme.canvas.palette.primary.main,
-            },
-        } }));
-}, function (_a) {
-    var children = _a.children;
+        },
+    },
+}), ({ children, gap = tokens_1.space.xxs }) => {
     if (typeof children === 'string') {
         return common_1.ellipsisStyles;
     }
     else {
         return {
             display: 'flex',
+            gap,
         };
     }
 });
-exports.useTabsItem = common_1.composeHooks(common_1.createElemPropsHook(useTabsModel_1.useTabsModel)(function (_a, _, elemProps) {
-    var state = _a.state;
-    if (elemProps === void 0) { elemProps = {}; }
-    var name = elemProps['data-id'] || '';
-    var selected = !!elemProps['data-id'] && collection_1.isSelected(name, state);
+exports.useTabsItem = common_1.composeHooks(common_1.createElemPropsHook(useTabsModel_1.useTabsModel)(({ state }, _, elemProps = {}) => {
+    const name = elemProps['data-id'] || '';
+    const selected = !!elemProps['data-id'] && collection_1.isSelected(name, state);
     return {
         type: 'button',
         role: 'tab',
-        id: state.id + "-" + name,
         'aria-selected': selected,
-        'aria-controls': "tabpanel-" + state.id + "-" + name,
+        'aria-controls': `tabpanel-${state.id}-${name}`,
     };
 }), collection_1.useListItemSelect, collection_1.useOverflowListItemMeasure, collection_1.useListItemRovingFocus, collection_1.useListItemRegister);
 exports.TabsItem = common_1.createSubcomponent('button')({
@@ -131,9 +125,8 @@ exports.TabsItem = common_1.createSubcomponent('button')({
         Icon: icon_1.SystemIcon,
         Text: common_1.EllipsisText,
     },
-})(function (_a, Element) {
-    var children = _a.children, elemProps = __rest(_a, ["children"]);
-    var modality = common_1.useModalityType();
+})(({ children, ...elemProps }, Element) => {
+    const modality = common_1.useModalityType();
     return (React.createElement(tooltip_1.OverflowTooltip, null,
-        React.createElement(exports.StyledTabItem, __assign({ as: Element, maxWidth: modality === 'touch' ? undefined : 280 }, elemProps), children)));
+        React.createElement(exports.StyledTabItem, Object.assign({ as: Element, maxWidth: modality === 'touch' ? undefined : 280 }, elemProps), children)));
 });

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { Stack } from '@workday/canvas-kit-react/layout';
-export interface TabListProps<T = any> extends Omit<Partial<ExtractProps<typeof Stack, never>>, 'children'> {
+import { Flex } from '@workday/canvas-kit-react/layout';
+export interface TabListProps<T = any> extends Omit<ExtractProps<typeof Flex, never>, 'children'> {
     /**
      * If items are passed to a `TabsModel`, the child of `Tabs.List` should be a render prop. The
      * List will determine how and when the item will be rendered.
@@ -14,12 +14,24 @@ export interface TabListProps<T = any> extends Omit<Partial<ExtractProps<typeof
     children: ((item: T) => React.ReactNode) | React.ReactNode;
     overflowButton?: React.ReactNode;
 }
-export declare const useTabsList: <P extends {}, R>(model: {
+export declare const useTabsList: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
-        selectedIds: import("../../collection/lib/useSelectionListModel").SelectedIds;
+        getId: (item: any) => string;
+        orientation: import("../../collection/lib/useBaseListModel").Orientation;
+        panels: import("@workday/canvas-kit-react/collection").Item<any>[];
+        panelIndexRef: React.MutableRefObject<number>;
+        hiddenIds: string[];
+        itemWidthCache: Record<string, number>;
+        containerWidth: number;
+        overflowTargetWidth: number;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: React.MutableRefObject<number>;
+        cursorIndexRef: {
+            readonly current: number;
+        };
         UNSTABLE_virtual: {
             virtualItems: import("../../collection/lib/react-virtual").VirtualItem[];
             totalSize: number;
@@ -30,22 +42,43 @@ export declare const useTabsList: <P extends {}, R>(model: {
         UNSTABLE_defaultItemHeight: number;
         containerRef: React.RefObject<HTMLDivElement>;
         id: string;
-        orientation: import("../../collection/lib/useBaseListModel").Orientation;
         indexRef: React.MutableRefObject<number>;
         nonInteractiveIds: string[];
         isVirtualized: boolean;
-        items: import("../../collection").Item<any>[];
+        items: import("@workday/canvas-kit-react/collection").Item<any>[];
     };
     events: {
+        registerPanel: (data: {
+            item: any;
+            textValue: string;
+        }) => void;
+        unregisterPanel: (data: {
+            id: string;
+        }) => void;
         select(data: {
             id: string;
         }): void;
+        setContainerWidth(data: {
+            width?: number | undefined;
+        }): void;
+        setOverflowTargetWidth(data: {
+            width: number;
+        }): void;
+        addItemWidth(data: {
+            id: string;
+            width: number;
+        }): void;
+        removeItemWidth(data: {
+            id: string;
+        }): void;
+        addHiddenKey(data: {
+            id: string;
+        }): void;
+        removeHiddenKey(data: {
+            id: string;
+        }): void;
         selectAll(): void;
         unselectAll(): void;
-        registerItem(data: {
-            item: any;
-            textValue: string;
-        }): void;
         goTo(data: {
             id: string;
         }): void;
@@ -59,6 +92,10 @@ export declare const useTabsList: <P extends {}, R>(model: {
         goToLastOfRow(): void;
         goToNextPage(): void;
         goToPreviousPage(): void;
+        registerItem(data: {
+            item: any;
+            textValue: string;
+        }): void;
         unregisterItem(data: {
             id: string;
         }): void;
@@ -66,26 +103,109 @@ export declare const useTabsList: <P extends {}, R>(model: {
             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;
+            columnCount: number;
+            pageSizeRef: React.MutableRefObject<number>;
+            cursorIndexRef: {
+                readonly current: number;
+            };
+            UNSTABLE_virtual: {
+                virtualItems: import("../../collection/lib/react-virtual").VirtualItem[];
+                totalSize: number;
+                scrollToOffset: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToOffsetOptions | undefined) => void;
+                scrollToIndex: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
+                measure: () => void;
+            };
+            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;
+            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: {
+                item: any;
+                textValue: string;
+            }): void;
+            unregisterItem(data: {
+                id: string;
+            }): void;
+            updateItemHeight(data: {
+                value: number;
+            }): void;
+        };
+        selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
+        navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
+        getId: (item: any) => string;
+    };
     selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
     navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
     getId: (item: any) => string;
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {} & P & (R extends HTMLOrSVGElement ? {
-    ref: React.Ref<R>;
-} : {});
-export declare const TabsList: import("../../common").ElementComponentM<"div", TabListProps<any>, {
+}, {
+    readonly role: "tablist";
+    readonly overflowX: "auto" | undefined;
+} & {
+    ref: (instance: unknown) => void;
+} & {
+    onKeyDown(event: React.KeyboardEvent<Element>): void;
+    onFocus(): void;
+    onBlur(): void;
+}>;
+export declare const TabsList: import("@workday/canvas-kit-react/common").ElementComponentM<"div", TabListProps<any>, {
     state: {
         getId: (item: any) => string;
         orientation: import("../../collection/lib/useBaseListModel").Orientation;
-        panels: import("../../collection").Item<any>[];
+        panels: import("@workday/canvas-kit-react/collection").Item<any>[];
         panelIndexRef: React.MutableRefObject<number>;
         hiddenIds: string[];
         itemWidthCache: Record<string, number>;
         containerWidth: number;
         overflowTargetWidth: number;
-        selectedIds: import("../../collection/lib/useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: React.MutableRefObject<number>;
+        cursorIndexRef: {
+            readonly current: number;
+        };
         UNSTABLE_virtual: {
             virtualItems: import("../../collection/lib/react-virtual").VirtualItem[];
             totalSize: number;
@@ -99,7 +219,7 @@ export declare const TabsList: import("../../common").ElementComponentM<"div", T
         indexRef: React.MutableRefObject<number>;
         nonInteractiveIds: string[];
         isVirtualized: boolean;
-        items: import("../../collection").Item<any>[];
+        items: import("@workday/canvas-kit-react/collection").Item<any>[];
     };
     events: {
         registerPanel: (data: {
@@ -133,10 +253,6 @@ export declare const TabsList: import("../../common").ElementComponentM<"div", T
         }): void;
         selectAll(): void;
         unselectAll(): void;
-        registerItem(data: {
-            item: any;
-            textValue: string;
-        }): void;
         goTo(data: {
             id: string;
         }): void;
@@ -150,6 +266,10 @@ export declare const TabsList: import("../../common").ElementComponentM<"div", T
         goToLastOfRow(): void;
         goToNextPage(): void;
         goToPreviousPage(): void;
+        registerItem(data: {
+            item: any;
+            textValue: string;
+        }): void;
         unregisterItem(data: {
             id: string;
         }): void;
@@ -165,11 +285,15 @@ export declare const TabsList: import("../../common").ElementComponentM<"div", T
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
-            selectedIds: import("../../collection/lib/useSelectionListModel").SelectedIds;
+            visibility: "hidden" | "visible";
+            selectedIds: string[] | "all";
             unselectedIds: string[];
             cursorId: string;
             columnCount: number;
+            pageSizeRef: React.MutableRefObject<number>;
+            cursorIndexRef: {
+                readonly current: number;
+            };
             UNSTABLE_virtual: {
                 virtualItems: import("../../collection/lib/react-virtual").VirtualItem[];
                 totalSize: number;
@@ -179,11 +303,11 @@ export declare const TabsList: import("../../common").ElementComponentM<"div", T
             };
             UNSTABLE_defaultItemHeight: number;
             containerRef: React.RefObject<HTMLDivElement>;
-            orientation: import("../../collection/lib/useBaseListModel").Orientation;
+            orientation: "horizontal" | "vertical";
             indexRef: React.MutableRefObject<number>;
             nonInteractiveIds: string[];
             isVirtualized: boolean;
-            items: import("../../collection").Item<any>[];
+            items: import("@workday/canvas-kit-react/collection").Item<any>[];
             mode: "multiple" | "single";
         };
         events: {
@@ -197,10 +321,6 @@ export declare const TabsList: import("../../common").ElementComponentM<"div", T
             }): void;
             selectAll(): void;
             unselectAll(): void;
-            registerItem(data: {
-                item: any;
-                textValue: string;
-            }): void;
             goTo(data: {
                 id: string;
             }): void;
@@ -214,6 +334,10 @@ export declare const TabsList: import("../../common").ElementComponentM<"div", T
             goToLastOfRow(): void;
             goToNextPage(): void;
             goToPreviousPage(): void;
+            registerItem(data: {
+                item: any;
+                textValue: string;
+            }): void;
             unregisterItem(data: {
                 id: string;
             }): void;
@@ -229,4 +353,8 @@ export declare const TabsList: import("../../common").ElementComponentM<"div", T
     navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
     getId: (item: any) => string;
 }>;
+export declare const useTouchDirection: () => {
+    direction: string;
+    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;AAG/B,OAAO,EAIL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,KAAK,EAAC,MAAM,kCAAkC,CAAC;AAUvD,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,GAAG,CACnC,SAAQ,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC;IACpE;;;;;;;;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAOvB,CAAC;AAgBF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmBnB,CAAC"}
+{"version":3,"file":"TabsList.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAIL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAStD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUvB,CAAC;AAMF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BnB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;CA+B7B,CAAC"}

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

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,50 +18,66 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabsList = exports.useTabsList = void 0;
-var React = __importStar(require("react"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var layout_1 = require("@workday/canvas-kit-react/layout");
-var collection_1 = require("@workday/canvas-kit-react/collection");
-var useTabsModel_1 = require("./useTabsModel");
-exports.useTabsList = common_1.composeHooks(common_1.createElemPropsHook(useTabsModel_1.useTabsModel)(function () {
-    var modality = common_1.useModalityType();
-    return { role: 'tablist', overflowX: modality === 'touch' ? 'auto' : undefined };
+exports.useTouchDirection = exports.TabsList = exports.useTabsList = void 0;
+const React = __importStar(require("react"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+const collection_1 = require("@workday/canvas-kit-react/collection");
+const useTabsModel_1 = require("./useTabsModel");
+exports.useTabsList = common_1.composeHooks(common_1.createElemPropsHook(useTabsModel_1.useTabsModel)(() => {
+    const modality = common_1.useModalityType();
+    return {
+        role: 'tablist',
+        overflowX: modality === 'touch' ? 'auto' : undefined,
+    };
 }), collection_1.useOverflowListMeasure, collection_1.useListResetCursorOnBlur);
-var StyledStack = common_1.styled(layout_1.Stack)({
-    '::after': {
-        content: '""',
-        position: 'sticky',
-        height: 52,
-        minWidth: 30,
-        background: "linear-gradient(to right,rgba(255,255,255,0),white);",
-        zIndex: 1,
-        right: 0,
-        top: 0,
-        pointerEvents: 'none',
-    },
-});
+const StyledStack = common_1.styled(layout_1.Flex)(({ maskImage }) => ({
+    maskImage: maskImage,
+}));
 exports.TabsList = common_1.createSubcomponent('div')({
     displayName: 'Tabs.List',
     modelHook: useTabsModel_1.useTabsModel,
     elemPropsHook: exports.useTabsList,
-})(function (_a, Element, model) {
-    var children = _a.children, overflowButton = _a.overflowButton, elemProps = __rest(_a, ["children", "overflowButton"]);
-    var modality = common_1.useModalityType();
-    return (React.createElement(StyledStack, __assign({ as: Element, position: "relative", borderBottom: "1px solid " + tokens_1.commonColors.divider, paddingX: modality === 'touch' ? 'zero' : 'm', spacing: "xxxs" }, elemProps),
+})(({ children, overflowButton, ...elemProps }, Element, model) => {
+    const modality = common_1.useModalityType();
+    const touchStates = exports.useTouchDirection();
+    return (React.createElement(StyledStack, Object.assign({ as: Element, position: "relative", borderBottom: `1px solid ${tokens_1.commonColors.divider}`, paddingX: modality === 'touch' ? 'zero' : 'm', gap: "xs", maskImage: modality === 'touch' && touchStates.isDragging
+            ? `linear-gradient(${touchStates.direction === 'left' ? 'to left' : 'to right'}, white 80%, transparent)`
+            : undefined }, elemProps),
         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;