@workday/canvas-kit-react 8.3.10 → 8.3.11

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

@@ -229,4 +229,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,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;AAMF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BnB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;CA+B7B,CAAC"}

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

@@ -41,7 +41,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabsList = exports.useTabsList = void 0;
+exports.useTouchDirection = 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");
@@ -52,18 +52,11 @@ exports.useTabsList = common_1.composeHooks(common_1.createElemPropsHook(useTabs
     var 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',
-    },
+var StyledStack = common_1.styled(layout_1.Stack)(function (_a) {
+    var maskImage = _a.maskImage;
+    return ({
+        maskImage: maskImage,
+    });
 });
 exports.TabsList = common_1.createSubcomponent('div')({
     displayName: 'Tabs.List',
@@ -72,7 +65,42 @@ exports.TabsList = common_1.createSubcomponent('div')({
 })(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),
+    var touchStates = exports.useTouchDirection();
+    return (React.createElement(StyledStack, __assign({ as: Element, position: "relative", borderBottom: "1px solid " + tokens_1.commonColors.divider, paddingX: modality === 'touch' ? 'zero' : 'm', spacing: "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));
 });
+var useTouchDirection = function () {
+    var _a = React.useState(false), isDragging = _a[0], setIsDragging = _a[1];
+    var _b = React.useState('right'), touchDir = _b[0], setTouchDirection = _b[1];
+    React.useEffect(function () {
+        var prevXPos = window.pageXOffset;
+        var handleTouchMove = function (e) {
+            var currXPos = e.touches[0].clientX;
+            setIsDragging(true);
+            if (currXPos > prevXPos) {
+                setTouchDirection('left');
+            }
+            else if (currXPos < prevXPos) {
+                setTouchDirection('right');
+            }
+            prevXPos = currXPos;
+            e.preventDefault();
+        };
+        var handleDragEnd = function () {
+            setIsDragging(false);
+        };
+        window.addEventListener('touchmove', handleTouchMove);
+        window.addEventListener('touchstart', handleDragEnd);
+        window.addEventListener('touchend', handleDragEnd);
+        return function () {
+            window.removeEventListener('touchmove', handleTouchMove);
+            window.removeEventListener('touchstart', handleDragEnd);
+            window.removeEventListener('touchend', handleDragEnd);
+        };
+    }, []);
+    return { direction: touchDir, isDragging: isDragging };
+};
+exports.useTouchDirection = useTouchDirection;

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

@@ -229,4 +229,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/es6/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,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;AAMF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BnB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;CA+B7B,CAAC"}

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

@@ -30,18 +30,11 @@ export var useTabsList = composeHooks(createElemPropsHook(useTabsModel)(function
     var modality = useModalityType();
     return { role: 'tablist', overflowX: modality === 'touch' ? 'auto' : undefined };
 }), useOverflowListMeasure, useListResetCursorOnBlur);
-var StyledStack = styled(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',
-    },
+var StyledStack = styled(Stack)(function (_a) {
+    var maskImage = _a.maskImage;
+    return ({
+        maskImage: maskImage,
+    });
 });
 export var TabsList = createSubcomponent('div')({
     displayName: 'Tabs.List',
@@ -50,7 +43,41 @@ export var TabsList = createSubcomponent('div')({
 })(function (_a, Element, model) {
     var children = _a.children, overflowButton = _a.overflowButton, elemProps = __rest(_a, ["children", "overflowButton"]);
     var modality = useModalityType();
-    return (React.createElement(StyledStack, __assign({ as: Element, position: "relative", borderBottom: "1px solid " + commonColors.divider, paddingX: modality === 'touch' ? 'zero' : 'm', spacing: "xxxs" }, elemProps),
+    var touchStates = useTouchDirection();
+    return (React.createElement(StyledStack, __assign({ as: Element, position: "relative", borderBottom: "1px solid " + commonColors.divider, paddingX: modality === 'touch' ? 'zero' : 'm', spacing: "xs", maskImage: modality === 'touch' && touchStates.isDragging
+            ? "linear-gradient(" + (touchStates.direction === 'left' ? 'to left' : 'to right') + ", white 80%, transparent)"
+            : undefined }, elemProps),
         useListRenderItems(model, children),
         overflowButton));
 });
+export var useTouchDirection = function () {
+    var _a = React.useState(false), isDragging = _a[0], setIsDragging = _a[1];
+    var _b = React.useState('right'), touchDir = _b[0], setTouchDirection = _b[1];
+    React.useEffect(function () {
+        var prevXPos = window.pageXOffset;
+        var handleTouchMove = function (e) {
+            var currXPos = e.touches[0].clientX;
+            setIsDragging(true);
+            if (currXPos > prevXPos) {
+                setTouchDirection('left');
+            }
+            else if (currXPos < prevXPos) {
+                setTouchDirection('right');
+            }
+            prevXPos = currXPos;
+            e.preventDefault();
+        };
+        var handleDragEnd = function () {
+            setIsDragging(false);
+        };
+        window.addEventListener('touchmove', handleTouchMove);
+        window.addEventListener('touchstart', handleDragEnd);
+        window.addEventListener('touchend', handleDragEnd);
+        return function () {
+            window.removeEventListener('touchmove', handleTouchMove);
+            window.removeEventListener('touchstart', handleDragEnd);
+            window.removeEventListener('touchend', handleDragEnd);
+        };
+    }, []);
+    return { direction: touchDir, isDragging: isDragging };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "8.3.10",
+  "version": "8.3.11",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,7 +49,7 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^8.3.10",
+    "@workday/canvas-kit-popup-stack": "^8.3.11",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
@@ -67,5 +67,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "c29efe7de90624aa47c67345c5d2648408e5f670"
+  "gitHead": "10735acb841a98b72878b6ff07b1fc97a3edf0a2"
 }

package/tabs/lib/TabsList.tsx

@@ -44,19 +44,9 @@ export const useTabsList = composeHooks(
   useListResetCursorOnBlur
 );
 
-const StyledStack = styled(Stack)<StyledType>({
-  '::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 = styled(Stack)<StyledType & {maskImage?: string}>(({maskImage}) => ({
+  maskImage: maskImage,
+}));
 
 export const TabsList = createSubcomponent('div')({
   displayName: 'Tabs.List',
@@ -64,13 +54,21 @@ export const TabsList = createSubcomponent('div')({
   elemPropsHook: useTabsList,
 })<TabListProps>(({children, overflowButton, ...elemProps}, Element, model) => {
   const modality = useModalityType();
+  const touchStates = useTouchDirection();
   return (
     <StyledStack
       as={Element}
       position="relative"
       borderBottom={`1px solid ${commonColors.divider}`}
       paddingX={modality === 'touch' ? 'zero' : 'm'}
-      spacing="xxxs"
+      spacing="xs"
+      maskImage={
+        modality === 'touch' && touchStates.isDragging
+          ? `linear-gradient(${
+              touchStates.direction === 'left' ? 'to left' : 'to right'
+            }, white 80%, transparent)`
+          : undefined
+      }
       {...elemProps}
     >
       {useListRenderItems(model, children)}
@@ -78,3 +76,36 @@ export const TabsList = createSubcomponent('div')({
     </StyledStack>
   );
 });
+
+export const useTouchDirection = () => {
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [touchDir, setTouchDirection] = React.useState('right');
+
+  React.useEffect(() => {
+    let prevXPos = window.pageXOffset;
+    const handleTouchMove = function(e: TouchEvent) {
+      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};
+};