@kaizen/components 1.70.24 → 1.71.0

package/dist/cjs/Calendar/CalendarPopover/CalendarPopover.cjs

@@ -26,36 +26,49 @@ var CalendarPopover = function (_a) {
   var _b = React.useState(null),
     floatingElement = _b[0],
     setFloatingElement = _b[1];
-  var floatingStyles = reactDom.useFloating(tslib.__assign({
-    placement: 'bottom-start',
-    elements: {
-      reference: referenceElement,
-      floating: floatingElement
-    },
-    strategy: 'fixed',
-    middleware: [reactDom.size({
-      apply: function (_a) {
-        var availableHeight = _a.availableHeight,
-          availableWidth = _a.availableWidth,
-          elements = _a.elements;
-        Object.assign(elements.floating.style, {
-          // 155 is enough of a minimum to cut off half of the second row of dates.
-          // This indicates to users that there is more content that is scrollable
-          maxHeight: "".concat(Math.max(availableHeight - 25, 155), "px"),
-          maxWidth: "".concat(availableWidth, "px")
-        });
-      }
-    }), reactDom.offset(15), reactDom.autoPlacement({
-      allowedPlacements: ['bottom-start', 'bottom', 'top-start', 'top']
-    })],
-    whileElementsMounted: reactDom.autoUpdate
-  }, floatingOptions)).floatingStyles;
+  var _c = reactDom.useFloating(tslib.__assign({
+      placement: 'bottom-start',
+      elements: {
+        reference: referenceElement,
+        floating: floatingElement
+      },
+      strategy: 'fixed',
+      middleware: [reactDom.size({
+        apply: function (_a) {
+          var availableHeight = _a.availableHeight,
+            availableWidth = _a.availableWidth,
+            elements = _a.elements;
+          Object.assign(elements.floating.style, {
+            // 155 is enough of a minimum to cut off half of the second row of dates.
+            // This indicates to users that there is more content that is scrollable
+            maxHeight: "".concat(Math.max(availableHeight - 25, 155), "px"),
+            maxWidth: "".concat(availableWidth, "px")
+          });
+        }
+      }), reactDom.offset(15), reactDom.autoPlacement({
+        allowedPlacements: ['bottom-start', 'bottom', 'top-start', 'top']
+      })],
+      whileElementsMounted: reactDom.autoUpdate
+    }, floatingOptions)),
+    floatingStyles = _c.floatingStyles,
+    update = _c.update;
+  React.useEffect(function () {
+    var _a;
+    if (floatingElement && referenceElement) {
+      // @ts-expect-error this can be removed when we update to react 19
+      referenceElement.popoverTargetElement = floatingElement;
+      (_a = floatingElement.showPopover) === null || _a === undefined ? undefined : _a.call(floatingElement);
+      update();
+    }
+  }, [referenceElement, floatingElement, update]);
   return React__default.default.createElement("div", tslib.__assign({
     ref: setFloatingElement,
     style: floatingStyles,
     className: classnames__default.default(CalendarPopover_module.calendarPopover, classNameOverride),
     role: "dialog",
-    "aria-modal": "true"
+    "aria-modal": "true",
+    // @ts-expect-error this can be removed when we update to react 19
+    popover: "manual"
   }, restProps), children);
 };
 CalendarPopover.displayName = 'CalendarPopover';

package/dist/esm/Calendar/CalendarPopover/CalendarPopover.mjs

@@ -1,5 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useFloating, size, offset, autoPlacement, autoUpdate } from '@floating-ui/react-dom';
 import classnames from 'classnames';
 import styles from './CalendarPopover.module.scss.mjs';
@@ -18,36 +18,49 @@ const CalendarPopover = /*#__PURE__*/function () {
     var _b = useState(null),
       floatingElement = _b[0],
       setFloatingElement = _b[1];
-    var floatingStyles = useFloating(__assign({
-      placement: 'bottom-start',
-      elements: {
-        reference: referenceElement,
-        floating: floatingElement
-      },
-      strategy: 'fixed',
-      middleware: [size({
-        apply: function (_a) {
-          var availableHeight = _a.availableHeight,
-            availableWidth = _a.availableWidth,
-            elements = _a.elements;
-          Object.assign(elements.floating.style, {
-            // 155 is enough of a minimum to cut off half of the second row of dates.
-            // This indicates to users that there is more content that is scrollable
-            maxHeight: "".concat(Math.max(availableHeight - 25, 155), "px"),
-            maxWidth: "".concat(availableWidth, "px")
-          });
-        }
-      }), offset(15), autoPlacement({
-        allowedPlacements: ['bottom-start', 'bottom', 'top-start', 'top']
-      })],
-      whileElementsMounted: autoUpdate
-    }, floatingOptions)).floatingStyles;
+    var _c = useFloating(__assign({
+        placement: 'bottom-start',
+        elements: {
+          reference: referenceElement,
+          floating: floatingElement
+        },
+        strategy: 'fixed',
+        middleware: [size({
+          apply: function (_a) {
+            var availableHeight = _a.availableHeight,
+              availableWidth = _a.availableWidth,
+              elements = _a.elements;
+            Object.assign(elements.floating.style, {
+              // 155 is enough of a minimum to cut off half of the second row of dates.
+              // This indicates to users that there is more content that is scrollable
+              maxHeight: "".concat(Math.max(availableHeight - 25, 155), "px"),
+              maxWidth: "".concat(availableWidth, "px")
+            });
+          }
+        }), offset(15), autoPlacement({
+          allowedPlacements: ['bottom-start', 'bottom', 'top-start', 'top']
+        })],
+        whileElementsMounted: autoUpdate
+      }, floatingOptions)),
+      floatingStyles = _c.floatingStyles,
+      update = _c.update;
+    useEffect(function () {
+      var _a;
+      if (floatingElement && referenceElement) {
+        // @ts-expect-error this can be removed when we update to react 19
+        referenceElement.popoverTargetElement = floatingElement;
+        (_a = floatingElement.showPopover) === null || _a === undefined ? undefined : _a.call(floatingElement);
+        update();
+      }
+    }, [referenceElement, floatingElement, update]);
     return /*#__PURE__*/React.createElement("div", __assign({
       ref: setFloatingElement,
       style: floatingStyles,
       className: classnames(styles.calendarPopover, classNameOverride),
       role: "dialog",
-      "aria-modal": "true"
+      "aria-modal": "true",
+      // @ts-expect-error this can be removed when we update to react 19
+      popover: "manual"
     }, restProps), children);
   };
   CalendarPopover.displayName = 'CalendarPopover';

package/dist/styles.css

@@ -3173,6 +3173,12 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
     padding: var(--spacing-24, 1.5rem);
   }
 }
+
+.CalendarPopover-module_calendarPopover__p2xp9[popover]:popover-open {
+  z-index: unset;
+  margin: 0;
+  inset: unset;
+}
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -10848,7 +10854,6 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   display: flex;
   align-items: center;
   min-width: 0;
-  z-index: 1000;
   transform: translateY(-0.0833em);
 }
 @media (max-width: 1365px) {
@@ -11162,7 +11167,7 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
     width: 3.75rem;
     height: 3.75rem;
     background: linear-gradient(0deg, var(--color-purple-600, #5f3361), rgba(var(--color-purple-600-rgb, 95, 51, 97), 0));
-    z-index: 1020;
+    z-index: 1;
   }
 }
 @media (max-width: 767px) {
@@ -11227,7 +11232,6 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   cursor: pointer;
   display: flex;
   position: absolute;
-  z-index: 1020;
   align-items: center;
   top: 50%;
   transform: translateY(-50%);
@@ -11275,7 +11279,6 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   position: absolute;
   white-space: nowrap;
   width: 1px;
-  z-index: 1019;
   inset-inline-end: auto;
   inset-inline-start: -3rem;
   position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.70.24",
+  "version": "1.71.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/Calendar/CalendarPopover/CalendarPopover.module.scss

@@ -17,3 +17,11 @@
     padding: $spacing-24;
   }
 }
+
+// Overrides for if the browser supports popovers. The inset unset is to fix a bug with RTL positioning https://github.com/floating-ui/floating-ui/issues/3221
+// Margin 0 because default styling for [popover] is margin: auto to center it.
+.calendarPopover[popover]:popover-open {
+  z-index: unset;
+  margin: 0;
+  inset: unset;
+}

package/src/Calendar/CalendarPopover/CalendarPopover.tsx

@@ -1,4 +1,4 @@
-import React, { useState, type HTMLAttributes } from 'react'
+import React, { useEffect, useState, type HTMLAttributes } from 'react'
 import {
   autoPlacement,
   autoUpdate,
@@ -30,7 +30,7 @@ export const CalendarPopover = ({
 }: CalendarPopoverProps): JSX.Element => {
   const [floatingElement, setFloatingElement] = useState<HTMLDivElement | null>(null)
 
-  const { floatingStyles } = useFloating({
+  const { floatingStyles, update } = useFloating({
     placement: 'bottom-start',
     elements: {
       reference: referenceElement,
@@ -57,6 +57,15 @@ export const CalendarPopover = ({
     ...floatingOptions,
   })
 
+  useEffect(() => {
+    if (floatingElement && referenceElement) {
+      // @ts-expect-error this can be removed when we update to react 19
+      referenceElement.popoverTargetElement = floatingElement
+      floatingElement.showPopover?.()
+      update()
+    }
+  }, [referenceElement, floatingElement, update])
+
   return (
     <div
       ref={setFloatingElement}
@@ -64,6 +73,8 @@ export const CalendarPopover = ({
       className={classnames(styles.calendarPopover, classNameOverride)}
       role="dialog"
       aria-modal="true"
+      // @ts-expect-error this can be removed when we update to react 19
+      popover="manual"
       {...restProps}
     >
       {children}

package/src/Calendar/CalendarPopover/_docs/CalendarPopover.stickersheet.stories.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { autoPlacement, offset, size } from '@floating-ui/react-dom'
 import { type Meta } from '@storybook/react'
-import { Text } from '~components/Text'
 import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
 import { CalendarRange } from '../../CalendarRange'
 import { CalendarSingle } from '../../CalendarSingle'
@@ -150,56 +149,3 @@ export const StickerSheetRTL: StickerSheetStory = {
     textDirection: 'rtl',
   },
 }
-
-export const StickerSheetResponsive: StickerSheetStory = {
-  name: 'Sticker Sheet (Responsive)',
-  render: () => (
-    <>
-      <Text variant="intro-lede" classNameOverride="mb-12 ">
-        CalendarSingle scaled to availableHeight
-      </Text>
-      <div className="h-[250px] p-12 bg-purple-100 overflow-hidden relative">
-        <CalendarPopoverExample strategy="absolute">
-          <CalendarSingle selected={new Date('2022-02-19')} />
-        </CalendarPopoverExample>
-      </div>
-      <Text variant="intro-lede" classNameOverride="mb-12 ">
-        CalendarRange scaled to availableHeight
-      </Text>
-      <div className="h-[250px] p-12 bg-purple-100 overflow-hidden relative">
-        <CalendarPopoverExample strategy="absolute">
-          <CalendarRange
-            selected={{
-              from: new Date('2022-02-19'),
-              to: new Date('2022-03-04'),
-            }}
-            hasDivider
-          />
-        </CalendarPopoverExample>
-      </div>
-      <Text variant="intro-lede" classNameOverride="mb-12 mt-24">
-        CalendarSingle scaled to availableWidth
-      </Text>
-      <div className="h-[250px] p-12 bg-purple-100 overflow-hidden relative w-[250px]">
-        <CalendarPopoverExample strategy="absolute">
-          <CalendarSingle selected={new Date('2022-03-19')} />
-        </CalendarPopoverExample>
-      </div>
-      <Text variant="intro-lede" classNameOverride="mb-12 mt-24">
-        CalendarRanger scaled to availableWidth
-      </Text>
-      <div className="h-[250px] p-12 bg-purple-100 overflow-hidden relative w-[250px]">
-        <CalendarPopoverExample strategy="absolute">
-          <CalendarRange
-            data-testid="sb-final-calendar"
-            selected={{
-              from: new Date('2022-02-19'),
-              to: new Date('2022-03-04'),
-            }}
-            hasDivider
-          />
-        </CalendarPopoverExample>
-      </div>
-    </>
-  ),
-}

package/src/TitleBlockZen/TitleBlockZen.module.scss

@@ -114,7 +114,6 @@ $tab-container-height-medium-and-small-collapsed: 0;
   display: flex;
   align-items: center;
   min-width: 0; // this is an important trick to prevent flexbox items from overflowing
-  z-index: $ca-z-index-dropdown; // this ensures the page switcher dropdown sits over nav tabs
   transform: translateY(-0.0833em);
 
   .hasSubtitle & {
@@ -434,7 +433,7 @@ $tab-container-height-medium-and-small-collapsed: 0;
     width: $tab-container-height-small;
     height: $tab-container-height-small;
     background: linear-gradient(0deg, $color-purple-600, rgba($color-purple-600-rgb, 0));
-    z-index: $ca-z-index-sticky;
+    z-index: 1;
   }
 
   .adminVariant & {
@@ -503,7 +502,6 @@ $tab-container-height-medium-and-small-collapsed: 0;
   cursor: pointer;
   display: flex;
   position: absolute;
-  z-index: $ca-z-index-sticky;
   align-items: center;
   top: 50%;
   transform: translateY(-50%);
@@ -573,9 +571,6 @@ $tab-container-height-medium-and-small-collapsed: 0;
   // We are using visually hidden here instead of display:none so that a screen reader
   // navigating via 'read mode' (which doesn't trigger hover/focus) will still hear this link name
   @include visually-hidden;
-
-  z-index: $ca-z-index-sticky - 1;
-
   @include ca-position($start: -2 * $ca-grid);
 
   position: absolute;