@kaizen/components 1.68.10 → 1.68.12

package/dist/esm/__future__/Tabs/subcomponents/TabList/TabList.mjs

@@ -1,7 +1,10 @@
 import { __rest, __assign } from 'tslib';
-import React from 'react';
+import React, { useState, useRef, useId, useContext, useEffect } from 'react';
 import classnames from 'classnames';
-import { TabList as TabList$1 } from 'react-aria-components';
+import { TabListStateContext, TabList as TabList$1 } from 'react-aria-components';
+import { Icon } from '../../../Icon/Icon.mjs';
+import { isRTL } from '../../../../__utilities__/isRTL/isRTL.mjs';
+import { SCROLL_AMOUNT } from '../../constants.mjs';
 import styles from './TabList.module.css.mjs';
 
 /**
@@ -13,10 +16,123 @@ var TabList = function (props) {
     noPadding = _a === void 0 ? false : _a,
     children = props.children,
     className = props.className,
-    restProps = __rest(props, ['aria-label', "noPadding", "children", "className"]);
-  return /*#__PURE__*/React.createElement(TabList$1, __assign({
+    testId = props["data-testid"],
+    restProps = __rest(props, ['aria-label', "noPadding", "children", "className", 'data-testid']);
+  var _b = useState(false),
+    isDocumentReady = _b[0],
+    setIsDocumentReady = _b[1];
+  var _c = useState(false),
+    leftArrowEnabled = _c[0],
+    setLeftArrowEnabled = _c[1];
+  var _d = useState(false),
+    rightArrowEnabled = _d[0],
+    setRightArrowEnabled = _d[1];
+  var tabListRef = useRef(null);
+  var tabListId = useId();
+  var _e = useState(false),
+    isRTL$1 = _e[0],
+    setIsRTL = _e[1];
+  var _f = useState(),
+    containerElement = _f[0],
+    setContainerElement = _f[1];
+  var tabListContext = useContext(TabListStateContext);
+  var selectedKey = tabListContext === null || tabListContext === void 0 ? void 0 : tabListContext.selectedKey;
+  useEffect(function () {
+    if (!isDocumentReady) {
+      setIsDocumentReady(true);
+      return;
+    }
+    var container = document.getElementById(tabListId);
+    setContainerElement(container);
+    setIsRTL(container ? isRTL(container) : false);
+  }, [isDocumentReady, tabListId]);
+  useEffect(function () {
+    if (!isDocumentReady) {
+      return;
+    }
+    var tabs = containerElement === null || containerElement === void 0 ? void 0 : containerElement.querySelectorAll('[data-kz-tab]');
+    if (!tabs) {
+      return;
+    }
+    var firstTabObserver = new IntersectionObserver(function (entries) {
+      if (!entries[0].isIntersecting) {
+        setLeftArrowEnabled(true);
+        return;
+      }
+      setLeftArrowEnabled(false);
+    }, {
+      threshold: 0.75,
+      root: containerElement
+    });
+    firstTabObserver.observe(isRTL$1 ? tabs[tabs.length - 1] : tabs[0]);
+    var lastTabObserver = new IntersectionObserver(function (entries) {
+      if (!entries[0].isIntersecting) {
+        setRightArrowEnabled(true);
+        return;
+      }
+      setRightArrowEnabled(false);
+    }, {
+      threshold: 0.75,
+      root: containerElement
+    });
+    lastTabObserver.observe(isRTL$1 ? tabs[0] : tabs[tabs.length - 1]);
+    return function () {
+      firstTabObserver.disconnect();
+      lastTabObserver.disconnect();
+    };
+  }, [isDocumentReady, containerElement, isRTL$1]);
+  useEffect(function () {
+    var _a;
+    if (!isDocumentReady) {
+      return;
+    }
+    // Scroll selected tab into view
+    (_a = containerElement === null || containerElement === void 0 ? void 0 : containerElement.querySelector('[role="tab"][data-selected=true]')) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+      block: 'nearest',
+      inline: 'center'
+    });
+  }, [selectedKey, containerElement, isDocumentReady]);
+  var handleArrowPress = function (direction) {
+    if (tabListRef.current) {
+      var tabListScrollPos = tabListRef.current.scrollLeft;
+      var newSpot = direction === 'left' ? tabListScrollPos - SCROLL_AMOUNT : tabListScrollPos + SCROLL_AMOUNT;
+      tabListRef.current.scrollLeft = newSpot;
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.container,
+    id: tabListId
+  }, leftArrowEnabled && (
+  /*#__PURE__*/
+  // making a conscious decision to use <div onClick> over <button> here, because:
+  // - <button> would add pointless noise for a screen reader user
+  // - keyboard only user can toggle through tabs with left/right arrow keys already
+  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+  React.createElement("div", {
+    onClick: function () {
+      return handleArrowPress('left');
+    },
+    className: styles.leftArrow,
+    "data-testid": testId ? "".concat(testId, "-kz-tablist-left-arrow") : undefined
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron_left",
+    isPresentational: true
+  }))), /*#__PURE__*/React.createElement(TabList$1, __assign({
     "aria-label": ariaLabel,
+    ref: tabListRef,
     className: classnames(styles.tabList, className, noPadding && styles.noPadding)
-  }, restProps), children);
+  }, restProps), children), rightArrowEnabled && (
+  /*#__PURE__*/
+  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+  React.createElement("div", {
+    onClick: function () {
+      return handleArrowPress('right');
+    },
+    className: styles.rightArrow,
+    "data-testid": testId ? "".concat(testId, "-kz-tablist-right-arrow") : undefined
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron_right",
+    isPresentational: true
+  }))));
 };
 export { TabList };

package/dist/esm/__future__/Tabs/subcomponents/TabList/TabList.module.css.mjs

@@ -1,5 +1,8 @@
 var styles = {
+  "container": "TabList-module_container__Z8JCa",
   "tabList": "TabList-module_tabList__e1qAi",
-  "noPadding": "TabList-module_noPadding__YM23K"
+  "noPadding": "TabList-module_noPadding__YM23K",
+  "leftArrow": "TabList-module_leftArrow__CPchY",
+  "rightArrow": "TabList-module_rightArrow__0xcW1"
 };
 export { styles as default };

package/dist/esm/__utilities__/isRTL/isRTL.mjs

@@ -0,0 +1,9 @@
+/**
+ * Finds the first ancestor with a `dir` property on it
+ * Returning true is that is `dir=rtl` and returning false in all other cases
+ */
+var isRTL = function (element) {
+  var _a;
+  return !!((_a = element.closest('[dir]')) === null || _a === void 0 ? void 0 : _a.matches('[dir="rtl"]'));
+};
+export { isRTL };

package/dist/styles.css

@@ -349,6 +349,9 @@
   align-items: center;
 }
 
+.Focusable-module_focusableWrapper__NfuIi {
+  display: inline-flex;
+}
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -405,9 +408,6 @@
     opacity: 1;
   }
 }
-.Focusable-module_focusableWrapper__NfuIi {
-  display: inline-flex;
-}
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 .OverlayArrow-module_overlayArrow__hoDyK {
@@ -5657,15 +5657,67 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   }
 }
 
+.TabList-module_container__Z8JCa {
+  position: relative;
+}
+
 .TabList-module_tabList__e1qAi {
   border-bottom: 1px solid rgba(var(--color-gray-600-rgb), 0.1);
-  padding: var(--spacing-xs) var(--spacing-md) 0;
+  padding: var(--spacing-6) 0 0;
+  width: 100%;
+  height: 100%;
+  overflow-x: scroll;
+  white-space: nowrap;
+  scrollbar-width: none;
+  scroll-behavior: smooth;
 }
 
 .TabList-module_noPadding__YM23K {
   padding: 0;
 }
 
+.TabList-module_leftArrow__CPchY,
+.TabList-module_rightArrow__0xcW1 {
+  --icon-size: 24;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  z-index: 10000;
+  background: var(--color-white);
+  inset-block: 0 1px;
+  width: 48px;
+  cursor: default;
+  user-select: none;
+}
+
+/*
+ * Note: we're purposefully using directional properties instead of start/end for positioning and styling related to the carousel arrows
+*/
+.TabList-module_leftArrow__CPchY {
+  left: 0;
+}
+
+.TabList-module_leftArrow__CPchY,
+.TabList-module_leftArrow__CPchY:hover {
+  border-right: 1px solid rgba(var(--color-gray-600-rgb), 0.1);
+}
+
+.TabList-module_rightArrow__0xcW1 {
+  right: 0;
+}
+
+.TabList-module_rightArrow__0xcW1,
+.TabList-module_rightArrow__0xcW1:hover {
+  border-left: 1px solid rgba(var(--color-gray-600-rgb), 0.1);
+}
+
+.TabList-module_leftArrow__CPchY:hover,
+.TabList-module_rightArrow__0xcW1:hover {
+  background: var(--color-gray-200);
+}
+
 .TabPanel-module_tabPanel__ae5Rx {
   border: 2px solid transparent;
 
@@ -8649,6 +8701,98 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   display: block;
   margin-bottom: var(--spacing-xs, 0.375rem);
 }
+.LiveIcon-module_liveIcon__v6FG- {
+  display: inline-block;
+  position: relative;
+  width: 20px;
+  height: 20px;
+  margin-inline-start: 0.25rem;
+  color: var(--color-green-500);
+}
+
+.LiveIcon-module_liveIcon_base__Kagqm {
+  opacity: 0.3;
+  display: block;
+}
+
+.LiveIcon-module_liveIcon_1__ye1Qk,
+.LiveIcon-module_liveIcon_2__p6f55,
+.LiveIcon-module_liveIcon_3__JmRFR {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  aspect-ratio: 1;
+  overflow: hidden;
+}
+
+.LiveIcon-module_liveIcon_1__ye1Qk {
+  clip-path: circle(16%);
+}
+
+.LiveIcon-module_liveIcon_2__p6f55,
+.LiveIcon-module_liveIcon_3__JmRFR {
+  animation-duration: 3s;
+  animation-iteration-count: 3;
+  animation-delay: 1s;
+}
+
+.LiveIcon-module_liveIcon_2__p6f55 {
+  clip-path: circle(32%);
+  animation-name: LiveIcon-module_pulse-inner__EGliV;
+}
+
+.LiveIcon-module_liveIcon_3__JmRFR {
+  clip-path: circle(50%);
+  animation-name: LiveIcon-module_pulse-outer__bxHMh;
+}
+
+@keyframes LiveIcon-module_pulse-inner__EGliV {
+  0% {
+    opacity: 0;
+  }
+
+  25% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  75% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes LiveIcon-module_pulse-outer__bxHMh {
+  0% {
+    opacity: 0;
+  }
+
+  25% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  75% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -8844,89 +8988,6 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   background-color: var(--color-blue-100, #e6f6ff);
   color: var(--color-purple-800, #2f2438);
 }
-
-.Tag-module_liveIcon__URtak {
-  display: inline-block;
-  position: relative;
-  width: 20px;
-  height: 20px;
-  margin-inline-start: 0.25rem;
-  color: var(--color-green-500, #3f9a86);
-}
-
-.Tag-module_liveIcon_base__Nk5um {
-  opacity: 30%;
-  display: block;
-}
-
-.Tag-module_liveIcon_1__STFJY,
-.Tag-module_liveIcon_2__rko-D,
-.Tag-module_liveIcon_3__fL71y {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  aspect-ratio: 1;
-  overflow: hidden;
-}
-
-.Tag-module_liveIcon_1__STFJY {
-  clip-path: circle(16%);
-}
-
-.Tag-module_liveIcon_2__rko-D,
-.Tag-module_liveIcon_3__fL71y {
-  animation-duration: 3s;
-  animation-iteration-count: 3;
-  animation-delay: 1s;
-}
-
-.Tag-module_liveIcon_2__rko-D {
-  clip-path: circle(32%);
-  animation-name: Tag-module_pulse-inner__0-JFL;
-}
-
-.Tag-module_liveIcon_3__fL71y {
-  clip-path: circle(50%);
-  animation-name: Tag-module_pulse-outer__f9Oox;
-}
-
-@keyframes Tag-module_pulse-inner__0-JFL {
-  0% {
-    opacity: 0%;
-  }
-  25% {
-    opacity: 0%;
-  }
-  50% {
-    opacity: 100%;
-  }
-  75% {
-    opacity: 100%;
-  }
-  100% {
-    opacity: 100%;
-  }
-}
-@keyframes Tag-module_pulse-outer__f9Oox {
-  0% {
-    opacity: 0%;
-  }
-  25% {
-    opacity: 0%;
-  }
-  50% {
-    opacity: 0%;
-  }
-  75% {
-    opacity: 100%;
-  }
-  100% {
-    opacity: 100%;
-  }
-}
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -10105,6 +10166,7 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 }
 /** THIS IS AN AUTOGENERATED FILE **/
 .TileGrid-module_grid__1WCNc {
+  list-style-type: none;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
   grid-gap: var(--spacing-md, 1.5rem);
@@ -11690,6 +11752,12 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   /* sets fron the bottom to the centre of the dot */
   top: calc(100% - calc(var(--progress-stepper-indicator-size) / 2));
   transform: translateX(-50%);
+
+  :dir(rtl) & {
+    left: unset;
+    right: 100%;
+    transform: translateX(50%);
+  }
 }
 
 .ProgressStepper-module_stepperDescription__KplV3 {

package/dist/types/Tag/subcomponents/LiveIcon/LiveIcon.d.ts

@@ -0,0 +1,4 @@
+export declare const LiveIcon: {
+    (): JSX.Element;
+    displayName: string;
+};

package/dist/types/Tag/subcomponents/LiveIcon/index.d.ts

@@ -0,0 +1 @@
+export * from './LiveIcon';

package/dist/types/Tag/subcomponents/index.d.ts

@@ -0,0 +1 @@
+export * from './LiveIcon';

package/dist/types/Tile/TileGrid/TileGrid.d.ts

@@ -4,7 +4,7 @@ import { InformationTileProps } from '../InformationTile';
 import { MultiActionTileProps } from '../MultiActionTile';
 type TileProps = InformationTileProps | MultiActionTileProps;
 export type TileElement = ReactElement<TileProps>;
-export interface TileGridProps extends OverrideClassName<HTMLAttributes<HTMLDivElement>> {
+export interface TileGridProps extends OverrideClassName<HTMLAttributes<HTMLUListElement>> {
     children: TileElement[] | TileElement;
 }
 /**

package/dist/types/__future__/Tabs/constants.d.ts

@@ -0,0 +1 @@
+export declare const SCROLL_AMOUNT = 120;

package/dist/types/__future__/Tabs/subcomponents/TabList/TabList.d.ts

@@ -10,6 +10,7 @@ export type TabListProps = {
      */
     'noPadding'?: boolean;
     'children': ReactNode;
+    'data-testid'?: string;
 } & RACTabListProps<HTMLElement>;
 /**
  * Wrapper for the tabs themselves

package/dist/types/__utilities__/isRTL/index.d.ts

@@ -0,0 +1 @@
+export * from './isRTL';

package/dist/types/__utilities__/isRTL/isRTL.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Finds the first ancestor with a `dir` property on it
+ * Returning true is that is `dir=rtl` and returning false in all other cases
+ */
+export declare const isRTL: (element: Element) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.68.10",
+  "version": "1.68.12",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -117,8 +117,8 @@
     "svgo": "^3.3.2",
     "tslib": "^2.8.1",
     "tsx": "^4.19.2",
-    "@kaizen/design-tokens": "10.8.6",
-    "@kaizen/package-bundler": "2.0.3"
+    "@kaizen/package-bundler": "2.0.3",
+    "@kaizen/design-tokens": "10.8.6"
   },
   "devDependenciesComments": {
     "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",

package/src/Tag/Tag.module.scss

@@ -211,95 +211,3 @@ $small: $spacing-md;
   background-color: $color-blue-100;
   color: $color-purple-800;
 }
-
-.liveIcon {
-  display: inline-block;
-  position: relative;
-  width: 20px;
-  height: 20px;
-  margin-inline-start: 0.25rem;
-  color: $color-green-500;
-}
-
-.liveIcon_base {
-  opacity: 30%;
-  display: block;
-}
-
-.liveIcon_1,
-.liveIcon_2,
-.liveIcon_3 {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  aspect-ratio: 1;
-  overflow: hidden;
-}
-
-.liveIcon_1 {
-  clip-path: circle(16%);
-}
-
-.liveIcon_2,
-.liveIcon_3 {
-  animation-duration: 3s;
-  animation-iteration-count: 3;
-  animation-delay: 1s;
-}
-
-.liveIcon_2 {
-  clip-path: circle(32%);
-  animation-name: pulse-inner;
-}
-
-.liveIcon_3 {
-  clip-path: circle(50%);
-  animation-name: pulse-outer;
-}
-
-@keyframes pulse-inner {
-  0% {
-    opacity: 0%;
-  }
-
-  25% {
-    opacity: 0%;
-  }
-
-  50% {
-    opacity: 100%;
-  }
-
-  75% {
-    opacity: 100%;
-  }
-
-  100% {
-    opacity: 100%;
-  }
-}
-
-@keyframes pulse-outer {
-  0% {
-    opacity: 0%;
-  }
-
-  25% {
-    opacity: 0%;
-  }
-
-  50% {
-    opacity: 0%;
-  }
-
-  75% {
-    opacity: 100%;
-  }
-
-  100% {
-    opacity: 100%;
-  }
-}

package/src/Tag/Tag.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import classnames from 'classnames'
 import { Avatar, AvatarProps } from '~components/Avatar'
-import { LiveIcon } from '~components/Icon'
 import { Icon } from '~components/__future__/Icon'
+import { LiveIcon } from './subcomponents/LiveIcon/LiveIcon'
 import { TagVariants } from './types'
 import styles from './Tag.module.scss'
 
@@ -130,42 +130,7 @@ export const Tag = (props: TagProps): JSX.Element => {
               </button>
             </>
           )}
-          {variant === 'statusLive' && (
-            <span className={styles.liveIcon}>
-              <LiveIcon
-                role="presentation"
-                classNameOverride={styles.liveIcon_base}
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-              />
-              <LiveIcon
-                role="presentation"
-                classNameOverride={styles.liveIcon_1}
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-              />
-              <LiveIcon
-                role="presentation"
-                classNameOverride={styles.liveIcon_2}
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-              />
-              <LiveIcon
-                role="presentation"
-                classNameOverride={styles.liveIcon_3}
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-              />
-            </span>
-          )}
+          {variant === 'statusLive' && <LiveIcon />}
         </>
       </div>
     </div>