@kaizen/components 0.0.0-canary-fix-si-css-layers-20240523071705 → 0.0.0-canary-back-to-basics-20240529053149

package/dist/types/Calendar/CalendarPopover/CalendarPopover.d.ts

@@ -1,16 +1,16 @@
 import React, { HTMLAttributes } from "react";
-import { Options } from "@popperjs/core";
+import { UseFloatingOptions } from "@floating-ui/react-dom";
 import { OverrideClassName } from "../../types/OverrideClassName";
 export type CalendarPopoverProps = {
     children: React.ReactNode;
     referenceElement: HTMLElement | null;
-    popperOptions?: Partial<Options>;
+    floatingOptions?: Partial<UseFloatingOptions>;
 } & OverrideClassName<HTMLAttributes<HTMLDivElement>>;
 /**
  * Only for use with Calendar components.
  * @todo: Replace with Popover when we have a reusable one.
  */
 export declare const CalendarPopover: {
-    ({ children, referenceElement, popperOptions, classNameOverride, ...restProps }: CalendarPopoverProps): JSX.Element;
+    ({ children, referenceElement, floatingOptions, classNameOverride, ...restProps }: CalendarPopoverProps): JSX.Element;
     displayName: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-fix-si-css-layers-20240523071705",
+  "version": "0.0.0-canary-back-to-basics-20240529053149",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -26,26 +26,26 @@
     "styles.css"
   ],
   "dependencies": {
-    "@floating-ui/react-dom": "^2.0.9",
+    "@floating-ui/react-dom": "^2.1.0",
     "@headlessui/react": "<=1.5.0",
-    "@internationalized/date": "^3.5.3",
+    "@internationalized/date": "^3.5.4",
     "@popperjs/core": "^2.11.8",
     "@reach/tabs": "^0.18.0",
-    "@react-aria/button": "^3.9.4",
-    "@react-aria/datepicker": "^3.10.0",
-    "@react-aria/focus": "^3.17.0",
-    "@react-aria/i18n": "^3.11.0",
-    "@react-aria/listbox": "^3.12.0",
-    "@react-aria/menu": "^3.14.0",
-    "@react-aria/overlays": "^3.22.0",
-    "@react-aria/select": "^3.14.4",
-    "@react-aria/utils": "^3.24.0",
-    "@react-stately/collections": "^3.10.6",
-    "@react-stately/datepicker": "^3.9.3",
-    "@react-stately/list": "^3.10.4",
-    "@react-stately/menu": "^3.7.0",
-    "@react-stately/select": "^3.6.3",
-    "@react-types/shared": "^3.23.0",
+    "@react-aria/button": "^3.9.5",
+    "@react-aria/datepicker": "^3.10.1",
+    "@react-aria/focus": "^3.17.1",
+    "@react-aria/i18n": "^3.11.1",
+    "@react-aria/listbox": "^3.12.1",
+    "@react-aria/menu": "^3.14.1",
+    "@react-aria/overlays": "^3.22.1",
+    "@react-aria/select": "^3.14.5",
+    "@react-aria/utils": "^3.24.1",
+    "@react-stately/collections": "^3.10.7",
+    "@react-stately/datepicker": "^3.9.4",
+    "@react-stately/list": "^3.10.5",
+    "@react-stately/menu": "^3.7.1",
+    "@react-stately/select": "^3.6.4",
+    "@react-types/shared": "^3.23.1",
     "classnames": "^2.5.1",
     "date-fns": "^3.6.0",
     "lodash.debounce": "^4.0.8",
@@ -70,7 +70,7 @@
     "react-select": "^5.8.0",
     "react-textfit": "^1.1.1",
     "resize-observer-polyfill": "^1.5.1",
-    "use-debounce": "^10.0.0",
+    "use-debounce": "^10.0.1",
     "uuid": "^9.0.1",
     "@kaizen/hosted-assets": "2.0.3"
   },
@@ -79,23 +79,24 @@
   },
   "devDependencies": {
     "@cultureamp/frontend-apis": "^9.5.0",
-    "@cultureamp/i18n-react-intl": "^2.5.6",
+    "@cultureamp/i18n-react-intl": "^2.5.7",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react-dom": "^18.3.0",
     "@types/react-textfit": "^1.1.4",
     "@types/uuid": "^9.0.8",
     "autoprefixer": "^10.4.19",
+    "concat-cli": "^4.0.0",
     "query-string": "^9.0.0",
     "react-intl": "^6.6.8",
-    "rollup": "^4.17.2",
+    "rollup": "^4.18.0",
     "sass": "^1.77.2",
     "serialize-query-params": "^2.0.2",
     "svgo": "^3.3.2",
-    "ts-jest": "^29.1.2",
+    "ts-jest": "^29.1.3",
     "tslib": "^2.6.2",
-    "tsx": "^4.10.2",
-    "@kaizen/package-bundler": "0.0.0-canary-fix-si-css-layers-20240523071705",
-    "@kaizen/design-tokens": "10.4.0"
+    "tsx": "^4.11.0",
+    "@kaizen/package-bundler": "0.0.0-canary-back-to-basics-20240529053149",
+    "@kaizen/design-tokens": "10.4.1"
   },
   "devDependenciesComments": {
     "postcss": "Installed in root",
@@ -103,14 +104,17 @@
     "postcss-preset-env": "Installed in root"
   },
   "peerDependencies": {
-    "@cultureamp/i18n-react-intl": "^2.5.6",
+    "@cultureamp/i18n-react-intl": "^2.5.7",
     "react": "^18.3.1",
     "react-intl": "^6.6.8"
   },
   "scripts": {
-    "build": "pnpm package-bundler build-shared-ui && pnpm build:global-styles",
-    "build:global-styles": "postcss ./styles/global.css --output dist/styles.css",
     "clean": "rm -rf dist",
+    "lint:ts": "tsc --noEmit",
+    "build": "pnpm package-bundler build-shared-ui && pnpm build:styles",
+    "build:global-styles": "postcss ./styles/global.css --output dist/global.css",
+    "build:combine-styles": "concat-cli -f ./dist/global.css ./dist/styles.css -o ./dist/styles.css && rm ./dist/global.css",
+    "build:styles": "pnpm build:global-styles && pnpm build:combine-styles",
     "test": "FORCE_COLOR=1 jest",
     "test:ci": "pnpm test -- --ci",
     "update-icons": "./src/Icon/bin/update-icons.sh",

package/src/AvatarGroup/AvatarGroup.module.scss

@@ -9,10 +9,6 @@ $avatar-lg: 4.5rem;
 
 @mixin overlap($size) {
   margin-inline-start: calc(#{$size} / -2);
-
-  [dir="rtl"] & {
-    margin-left: 0;
-  }
 }
 
 .AvatarGroup {
@@ -22,22 +18,6 @@ $avatar-lg: 4.5rem;
   padding: 0;
 }
 
-.AvatarGroupItem {
-  + .AvatarGroupItem {
-    .small & {
-      @include overlap($avatar-sm);
-    }
-
-    .medium & {
-      @include overlap($avatar-md);
-    }
-
-    .large & {
-      @include overlap($avatar-lg);
-    }
-  }
-}
-
 .AvatarCounter {
   align-items: center;
   background: $color-gray-300;
@@ -49,7 +29,17 @@ $avatar-lg: 4.5rem;
   justify-content: center;
   overflow: hidden;
 
-  .small & {
+  [dir="rtl"] & {
+    direction: ltr;
+  }
+}
+
+.small {
+  .AvatarGroupItem + .AvatarGroupItem {
+    @include overlap($avatar-sm);
+  }
+
+  .AvatarCounter {
     box-shadow: none;
     border: none;
     width: $avatar-sm;
@@ -59,8 +49,14 @@ $avatar-lg: 4.5rem;
     font-weight: $typography-heading-5-font-weight;
     letter-spacing: $typography-heading-5-letter-spacing;
   }
+}
+
+.medium {
+  .AvatarGroupItem + .AvatarGroupItem {
+    @include overlap($avatar-md);
+  }
 
-  .medium & {
+  .AvatarCounter {
     width: $avatar-md;
     height: $avatar-md;
     font-family: $typography-heading-5-font-family;
@@ -68,8 +64,14 @@ $avatar-lg: 4.5rem;
     font-weight: $typography-heading-5-font-weight;
     letter-spacing: $typography-heading-5-letter-spacing;
   }
+}
+
+.large {
+  .AvatarGroupItem + .AvatarGroupItem {
+    @include overlap($avatar-lg);
+  }
 
-  .large & {
+  .AvatarCounter {
     width: $avatar-lg;
     height: $avatar-lg;
     font-family: $typography-heading-3-font-family;
@@ -77,9 +79,4 @@ $avatar-lg: 4.5rem;
     font-weight: $typography-heading-3-font-weight;
     letter-spacing: $typography-heading-3-letter-spacing;
   }
-
-  [dir="rtl"] & {
-    margin-left: 0;
-    direction: ltr;
-  }
 }

package/src/ButtonGroup/ButtonGroup.module.scss

@@ -26,26 +26,26 @@ $focus-ring-offset-inner: calc(-1 * #{$focus-ring-offset});
       }
     }
 
-    &.firstChild {
-      @extend %firstChildBorders;
+    &:not(.firstChild) {
+      border-inline-start: 1px solid $color-blue-300;
+    }
 
+    &:not(.firstChild, .lastChild) {
       &:focus-visible {
         &::after {
-          @extend %firstChildBorders;
-
-          inset-inline-end: $focus-ring-offset-inner;
+          inset-inline: $focus-ring-offset-inner $focus-ring-offset-inner;
         }
       }
     }
 
-    &:not(.firstChild) {
-      border-inline-start: 1px solid $color-blue-300;
-    }
+    &.firstChild {
+      @extend %firstChildBorders;
 
-    &:not(.firstChild, .lastChild) {
       &:focus-visible {
         &::after {
-          inset-inline: $focus-ring-offset-inner $focus-ring-offset-inner;
+          @extend %firstChildBorders;
+
+          inset-inline-end: $focus-ring-offset-inner;
         }
       }
     }

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

@@ -2,11 +2,18 @@
 @import "~@kaizen/design-tokens/sass/color";
 @import "~@kaizen/design-tokens/sass/shadow";
 @import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/layout";
 
 .calendarPopover {
   background-color: $color-white;
   z-index: 1010;
   box-shadow: $shadow-large-box-shadow;
   border-radius: $border-borderless-border-radius;
-  padding: $spacing-md;
+  padding: $spacing-12 $spacing-8;
+  box-sizing: border-box;
+  overflow: auto;
+
+  @media (min-width: $layout-breakpoints-medium) {
+    padding: $spacing-24;
+  }
 }

package/src/Calendar/CalendarPopover/CalendarPopover.tsx

@@ -1,14 +1,20 @@
 import React, { HTMLAttributes, useState } from "react"
-import { Options } from "@popperjs/core"
+import {
+  autoUpdate,
+  offset,
+  useFloating,
+  UseFloatingOptions,
+  size,
+  autoPlacement,
+} from "@floating-ui/react-dom"
 import classnames from "classnames"
-import { usePopper } from "react-popper"
 import { OverrideClassName } from "~types/OverrideClassName"
 import styles from "./CalendarPopover.module.scss"
 
 export type CalendarPopoverProps = {
   children: React.ReactNode
   referenceElement: HTMLElement | null
-  popperOptions?: Partial<Options>
+  floatingOptions?: Partial<UseFloatingOptions>
 } & OverrideClassName<HTMLAttributes<HTMLDivElement>>
 
 /**
@@ -18,37 +24,45 @@ export type CalendarPopoverProps = {
 export const CalendarPopover = ({
   children,
   referenceElement,
-  popperOptions,
+  floatingOptions,
   classNameOverride,
   ...restProps
 }: CalendarPopoverProps): JSX.Element => {
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
+  const [floatingElement, setFloatingElement] = useState<HTMLDivElement | null>(
     null
   )
 
-  const { styles: popperStyles, attributes: popperAttributes } = usePopper(
-    referenceElement,
-    popperElement,
-    {
-      modifiers: [
-        {
-          name: "offset",
-          options: {
-            offset: [0, 15],
-          },
+  const { floatingStyles } = useFloating({
+    placement: "bottom-start",
+    elements: {
+      reference: referenceElement,
+      floating: floatingElement,
+    },
+    strategy: "fixed",
+    middleware: [
+      size({
+        apply({ availableHeight, availableWidth, 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: `${Math.max(availableHeight - 25, 155)}px`,
+            maxWidth: `${availableWidth}px`,
+          })
         },
-      ],
-      placement: "bottom-start",
-      strategy: "fixed",
-      ...popperOptions,
-    }
-  )
+      }),
+      offset(15),
+      autoPlacement({
+        allowedPlacements: ["bottom-start", "bottom", "top-start", "top"],
+      }),
+    ],
+    whileElementsMounted: autoUpdate,
+    ...floatingOptions,
+  })
 
   return (
     <div
-      ref={setPopperElement}
-      style={popperStyles?.popper}
-      {...popperAttributes?.popper}
+      ref={setFloatingElement}
+      style={floatingStyles}
       className={classnames(styles.calendarPopover, classNameOverride)}
       role="dialog"
       aria-modal="true"

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

@@ -1,5 +1,7 @@
 import React from "react"
+import { offset, size, autoPlacement } from "@floating-ui/react-dom"
 import { Meta } from "@storybook/react"
+import { Text } from "~components/Text"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -11,7 +13,9 @@ import { CalendarPopover, CalendarPopoverProps } from "../index"
 export default {
   title: "Components/Date controls/Calendars/CalendarPopover",
   parameters: {
-    chromatic: { disable: false },
+    chromatic: {
+      disable: false,
+    },
     controls: { disable: true },
     a11y: {
       config: {
@@ -24,34 +28,65 @@ export default {
         ],
       },
     },
+    viewport: {
+      viewports: {
+        ViewportFull: {
+          name: "Viewport full size",
+          styles: {
+            width: "1024px",
+            height: "1500px",
+          },
+        },
+      },
+      defaultViewport: "ViewportFull",
+    },
   },
 } satisfies Meta
 
 const CalendarPopoverExample = ({
   children,
   rowHeight = 300,
-}: Partial<CalendarPopoverProps & { rowHeight: number }>): JSX.Element => {
+  /** this is here as a convenient way to test overlap */
+  strategy = "fixed",
+}: Partial<
+  CalendarPopoverProps & {
+    rowHeight: number
+    /** this is here as a convenient way to test overlap */
+    strategy?: "absolute" | "fixed"
+  }
+>): JSX.Element => {
   const [referenceElement, setReferenceElement] =
     React.useState<HTMLDivElement | null>(null)
 
   return (
     <>
       <div
+        className="bg-orange-300 inline-block"
         ref={setReferenceElement}
-        style={{ paddingBottom: "24px", marginTop: `${rowHeight}px` }}
-      />
+        style={{ marginBottom: `${rowHeight}px` }}
+      >
+        Reference element
+      </div>
       <CalendarPopover
         referenceElement={referenceElement}
-        popperOptions={{
-          modifiers: [
-            {
-              name: "offset",
-              options: {
-                offset: [24, 0],
+        floatingOptions={{
+          strategy,
+          middleware: [
+            offset(15),
+            size({
+              apply({ availableHeight, availableWidth, elements }) {
+                Object.assign(elements.floating.style, {
+                  maxHeight: `${Math.max(availableHeight - 25, 155)}px`,
+                  maxWidth: `${availableWidth}px`,
+                })
               },
-            },
+            }),
+            autoPlacement({
+              // This needs to be here for testing purposes as the default behaviour
+              // will cause overlapping calendars in the table
+              allowedPlacements: ["bottom-start"],
+            }),
           ],
-          placement: "top-start",
         }}
       >
         {children}
@@ -73,13 +108,13 @@ const StickerSheetTemplate: StickerSheetStory = {
         </StickerSheet.Row>
 
         <StickerSheet.Row rowTitle="CalendarSingle">
-          <CalendarPopoverExample>
+          <CalendarPopoverExample rowHeight={350}>
             <CalendarSingle selected={new Date("2022-02-19")} />
           </CalendarPopoverExample>
         </StickerSheet.Row>
 
         <StickerSheet.Row rowTitle="CalendarRange">
-          <CalendarPopoverExample>
+          <CalendarPopoverExample rowHeight={350}>
             <CalendarRange
               selected={{
                 from: new Date("2022-02-19"),
@@ -90,8 +125,9 @@ const StickerSheetTemplate: StickerSheetStory = {
         </StickerSheet.Row>
 
         <StickerSheet.Row rowTitle="CalendarRange with divider">
-          <CalendarPopoverExample>
+          <CalendarPopoverExample rowHeight={350}>
             <CalendarRange
+              data-testid="sb-final-calendar"
               selected={{
                 from: new Date("2022-02-19"),
                 to: new Date("2022-03-04"),
@@ -118,3 +154,56 @@ 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/Checkbox/Checkbox/Checkbox.module.scss

@@ -18,6 +18,10 @@ $dt-color-checkbox-background-color-checked: $color-gray-500;
   margin: 0;
 }
 
+.checkbox:disabled {
+  pointer-events: none;
+}
+
 .icon {
   height: $checkbox-size;
   width: $checkbox-size;
@@ -49,6 +53,10 @@ $dt-color-checkbox-background-color-checked: $color-gray-500;
   background-color: white;
   border-color: $dt-color-form-border-color;
 
+  .checkbox:hover + & {
+    border-color: $dt-color-form-border-color-hover;
+  }
+
   .checkbox:checked + &,
   .checkbox:indeterminate + & {
     background: $dt-color-checkbox-background-color-checked;
@@ -66,12 +74,8 @@ $dt-color-checkbox-background-color-checked: $color-gray-500;
     border-color: $dt-color-form-border-color-hover;
   }
 
-  .checkbox:not([disabled]):hover + & {
-    border-color: $dt-color-form-border-color-hover;
-  }
-
-  .checkbox:checked:not([disabled]):hover + &,
-  .checkbox:indeterminate:not([disabled]):hover + & {
+  .checkbox:checked:hover + &,
+  .checkbox:indeterminate:hover + & {
     background: $dt-color-form-border-color-hover;
     border-color: $dt-color-form-border-color-hover;
   }
@@ -108,24 +112,20 @@ $dt-color-checkbox-background-color-checked: $color-gray-500;
     background: rgba($color-white-rgb, 0.65);
   }
 
+  .checkbox:not([checked]):hover + &,
   .checkbox:not([checked]):focus + & {
     border-color: $color-white;
     background: rgba($color-white-rgb, 0.1);
   }
 
-  .checkbox:not([checked], [disabled]):hover + & {
-    border-color: $color-white;
-    background: rgba($color-white-rgb, 0.1);
-  }
-
   .checkbox:checked:focus + &,
   .checkbox:indeterminate:focus + & {
     background: $color-white;
     border-color: $color-white;
   }
 
-  .checkbox:indeterminate:not([disabled]):hover + &,
-  .checkbox:checked:not([disabled]):hover + & {
+  .checkbox:indeterminate:hover + &,
+  .checkbox:checked:hover + & {
     background: $color-white;
     border-color: $color-white;
   }