@kaizen/components 1.70.23 → 1.71.0

package/dist/types/RichTextEditor/utils/commands/index.d.ts

@@ -1,4 +1,3 @@
-export * from './fixtures/mockRangeForBoundingRect';
 export * from './addMark';
 export * from './getMarkAttrs';
 export * from './getMarkRange';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.70.23",
+  "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/RichTextEditor/utils/commands/index.ts

@@ -1,4 +1,3 @@
-export * from './fixtures/mockRangeForBoundingRect'
 export * from './addMark'
 export * from './getMarkAttrs'
 export * from './getMarkRange'

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;

package/dist/cjs/RichTextEditor/utils/commands/fixtures/mockRangeForBoundingRect.cjs

@@ -1,40 +0,0 @@
-'use strict';
-
-var vitest = require('vitest');
-
-// eslint-disable-next-line import/no-extraneous-dependencies
-/*
- ** This is used handle the JSDom type error issue you may encounter in testing
- ** See https://github.com/jsdom/jsdom/issues/3002
- */
-var mockRangeForBoundingRect = function () {
-  vitest.vi.spyOn(document, 'createRange').mockImplementation(function () {
-    var range = new Range();
-    range.getBoundingClientRect = function () {
-      return {
-        x: 0,
-        y: 0,
-        bottom: 0,
-        height: 0,
-        left: 0,
-        right: 0,
-        top: 0,
-        width: 0,
-        toJSON: function () {
-          return undefined;
-        }
-      };
-    };
-    range.getClientRects = function () {
-      var _a;
-      return _a = {
-        item: function () {
-          return null;
-        },
-        length: 0
-      }, _a[Symbol.iterator] = vitest.vi.fn(), _a;
-    };
-    return range;
-  });
-};
-exports.mockRangeForBoundingRect = mockRangeForBoundingRect;

package/dist/esm/RichTextEditor/utils/commands/fixtures/mockRangeForBoundingRect.mjs

@@ -1,38 +0,0 @@
-import { vi } from 'vitest';
-
-// eslint-disable-next-line import/no-extraneous-dependencies
-/*
- ** This is used handle the JSDom type error issue you may encounter in testing
- ** See https://github.com/jsdom/jsdom/issues/3002
- */
-var mockRangeForBoundingRect = function () {
-  vi.spyOn(document, 'createRange').mockImplementation(function () {
-    var range = new Range();
-    range.getBoundingClientRect = function () {
-      return {
-        x: 0,
-        y: 0,
-        bottom: 0,
-        height: 0,
-        left: 0,
-        right: 0,
-        top: 0,
-        width: 0,
-        toJSON: function () {
-          return undefined;
-        }
-      };
-    };
-    range.getClientRects = function () {
-      var _a;
-      return _a = {
-        item: function () {
-          return null;
-        },
-        length: 0
-      }, _a[Symbol.iterator] = vi.fn(), _a;
-    };
-    return range;
-  });
-};
-export { mockRangeForBoundingRect };