@kaizen/components 1.61.0 → 1.61.2

package/codemods/utils/__snapshots__/transformSource.spec.ts.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`transformSource updates the value of Pancakes topping to jam 1`] = `
+exports[`transformSource > updates the value of Pancakes topping to jam 1`] = `
 "import * as React from "react";
 // @ts-ignore
 import { Pancakes } from "@kaizen/components";

package/dist/cjs/RichTextEditor/RichTextContent/RichTextContent.cjs

@@ -47,13 +47,22 @@ var RichTextContent = function (props) {
     classNameOverride = props.classNameOverride,
     restProps = tslib.__rest(props, ["content", "classNameOverride"]);
   var schema$1 = React.useState(schema.createSchemaWithAll())[0];
+  var editorId = React.useId();
+  React.useEffect(function () {
+    var _a;
+    // prosemirror only allows us to set this to false (which has caused a strange bug in the platform)
+    // so we have to hack a bit to remove the attribute completely
+    (_a = document.getElementById(editorId)) === null || _a === void 0 ? void 0 : _a.removeAttribute("contenteditable");
+  }, []);
   var editorRef = useRichTextEditor.useRichTextEditor(ProseMirrorState__namespace.EditorState.create({
     doc: ProseMirrorModel__namespace.Node.fromJSON(schema$1, {
       type: "doc",
       content: content
     }),
     schema: schema$1
-  }), undefined, {
+  }), {
+    id: editorId
+  }, {
     editable: false
   })[0];
   return React__default.default.createElement("div", tslib.__assign({

package/dist/esm/RichTextEditor/RichTextContent/RichTextContent.mjs

@@ -1,5 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import React, { useState } from 'react';
+import React, { useState, useId, useEffect } from 'react';
 import classnames from 'classnames';
 import { createSchemaWithAll } from '../RichTextEditor/schema.mjs';
 import * as ProseMirrorState from 'prosemirror-state';
@@ -18,13 +18,22 @@ const RichTextContent = /*#__PURE__*/function () {
       classNameOverride = props.classNameOverride,
       restProps = __rest(props, ["content", "classNameOverride"]);
     var schema = useState(createSchemaWithAll())[0];
+    var editorId = useId();
+    useEffect(function () {
+      var _a;
+      // prosemirror only allows us to set this to false (which has caused a strange bug in the platform)
+      // so we have to hack a bit to remove the attribute completely
+      (_a = document.getElementById(editorId)) === null || _a === void 0 ? void 0 : _a.removeAttribute("contenteditable");
+    }, []);
     var editorRef = useRichTextEditor(ProseMirrorState.EditorState.create({
       doc: ProseMirrorModel.Node.fromJSON(schema, {
         type: "doc",
         content: content
       }),
       schema: schema
-    }), undefined, {
+    }), {
+      id: editorId
+    }, {
       editable: false
     })[0];
     return /*#__PURE__*/React.createElement("div", __assign({

package/dist/styles.css

@@ -133,6 +133,7 @@
   padding: var(--spacing-24) var(--spacing-12);
   background: var(--color-white);
   gap: var(--spacing-16);
+  border-top: 2px solid rgba(var(--color-gray-600-rgb), 0.1);
 
   @media (width >= 768px) {
     grid-template-columns: 1fr 5fr 1fr;
@@ -143,6 +144,22 @@
   }
 }
 
+.FooterActions-module_footerAction__yu1mj {
+  display: flex;
+  flex-grow: 1;
+  flex-basis: auto;
+}
+
+.FooterActions-module_footerActionPrevious__C-ejW {
+  grid-area: "prev";
+  justify-content: start;
+}
+
+.FooterActions-module_footerActionNext__yLUMV {
+  grid-area: "next";
+  justify-content: end;
+}
+
 .Branding-module_branding__bawwf {
   justify-content: center;
   grid-area: branding;
@@ -159,25 +176,26 @@
   flex-basis: 7.5rem;
 }
 
-.Root-module_root__FYpNx {
-  display: grid;
-  background-color: var(--color-white);
-  grid-template: "branding" min-content "titles" max-content "actions" min-content / 1fr;
-  flex-grow: 1;
-  justify-content: center;
+.Titles-module_titles__gE8Zb {
+  grid-area: titles;
+  display: flex;
+  flex-direction: column;
   align-items: center;
-  text-align: center;
-  box-shadow: var(--shadow-small-box-shadow);
-  padding: var(--spacing-24);
-  gap: var(--spacing-16);
+  justify-content: center;
+  flex-grow: 1;
+}
 
-  @media (width >= 768px) {
-    align-items: start;
-    grid-template: "branding titles actions" min-content / 1fr max-content 1fr;
-    position: sticky;
-    top: 0;
-    z-index: 1;
-  }
+.Titles-module_pageTitle__CMn-j {
+  display: flex;
+  flex-direction: column;
+}
+
+.Titles-module_prefix__-Kflu {
+  margin-bottom: var(--spacing-4);
+}
+
+.Titles-module_statusTag__fhxfV {
+  margin-top: var(--spacing-8);
 }
 
 .Actions-module_actions__WJwtK {
@@ -196,42 +214,25 @@
   }
 }
 
-.FooterActions-module_footerAction__yu1mj {
-  display: flex;
+.Root-module_root__FYpNx {
+  display: grid;
+  background-color: var(--color-white);
+  grid-template: "branding" min-content "titles" max-content "actions" min-content / 1fr;
   flex-grow: 1;
-  flex-basis: auto;
-}
-
-.FooterActions-module_footerActionPrevious__C-ejW {
-  grid-area: "prev";
-  justify-content: start;
-}
-
-.FooterActions-module_footerActionNext__yLUMV {
-  grid-area: "next";
-  justify-content: end;
-}
-
-.Titles-module_titles__gE8Zb {
-  grid-area: titles;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
   justify-content: center;
-  flex-grow: 1;
-}
-
-.Titles-module_pageTitle__CMn-j {
-  display: flex;
-  flex-direction: column;
-}
-
-.Titles-module_prefix__-Kflu {
-  margin-bottom: var(--spacing-4);
-}
+  align-items: center;
+  text-align: center;
+  padding: var(--spacing-24);
+  gap: var(--spacing-16);
+  border-bottom: 2px solid rgb(var(--color-gray-600-rgb), 0.1);
 
-.Titles-module_statusTag__fhxfV {
-  margin-top: var(--spacing-8);
+  @media (width >= 768px) {
+    align-items: start;
+    grid-template: "branding titles actions" min-content / 1fr max-content 1fr;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
 }
 
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -262,6 +263,70 @@
 .OverlayArrow-module_overlayArrow__hoDyK.OverlayArrow-module_reversed__-WGcR path {
   fill: var(--color-white, #ffffff);
 }
+.MenuItem-module_item__DPerF {
+  font-family: var(--typography-paragraph-body-font-family);
+  font-size: var(--typography-paragraph-body-font-size);
+  letter-spacing: var(--typography-paragraph-body-letter-spacing);
+  font-weight: var(--typography-paragraph-body-font-weight);
+  line-height: var(--typography-paragraph-body-line-height);
+  color: rgba(var(--color-purple-800-rgb), 0.7);
+  padding: var(--spacing-6) var(--spacing-8);
+  border: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) transparent;
+  border-radius: 4px;
+  display: flex;
+  gap: 0 var(--spacing-8);
+  align-items: center;
+  margin-inline: var(--spacing-6);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.MenuItem-module_iconWrapper__bRdQN {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.MenuItem-module_item__DPerF[data-focused] {
+  background-color: var(--color-blue-100);
+  color: var(--color-blue-500);
+  outline: none;
+  border-color: var(--color-blue-500);
+}
+
+.MenuItem-module_item__DPerF[data-disabled] {
+  opacity: 0.3;
+}
+.Menu-module_menu__iHYqh {
+  background-color: var(--color-white);
+  color: var(--color-purple-800);
+  width: 248px;
+  max-height: 22rem;
+  overflow: auto;
+  padding-block: var(--spacing-6);
+  outline: none;
+  border-radius: var(--border-solid-border-radius);
+  box-shadow: var(--shadow-large-box-shadow);
+}
+
+.Menu-module_menu__iHYqh .react-aria-Header {
+  font-family: var(--typography-heading-6-font-family);
+  font-size: var(--typography-heading-6-font-size);
+  letter-spacing: var(--typography-heading-6-letter-spacing);
+  font-weight: var(--typography-heading-6-font-weight);
+  line-height: var(--typography-heading-6-line-height);
+  padding: var(--spacing-6) 10px;
+  margin-inline: var(--spacing-6);
+}
+
+.Menu-module_menu__iHYqh section:not(:last-of-type)::after {
+  width: 100%;
+  height: 1px;
+  background-color: var(--border-solid-border-color);
+  content: "";
+  display: block;
+  margin-block: var(--spacing-6);
+}
 .Button-module_button__QOSYH {
   --button-min-height-width: var(--spacing-48);
   --button-padding-x: calc(
@@ -350,70 +415,6 @@
   --button-icon-size: var(--spacing-16);
   gap: var(--spacing-8);
 }
-.Menu-module_menu__iHYqh {
-  background-color: var(--color-white);
-  color: var(--color-purple-800);
-  width: 248px;
-  max-height: 22rem;
-  overflow: auto;
-  padding-block: var(--spacing-6);
-  outline: none;
-  border-radius: var(--border-solid-border-radius);
-  box-shadow: var(--shadow-large-box-shadow);
-}
-
-.Menu-module_menu__iHYqh .react-aria-Header {
-  font-family: var(--typography-heading-6-font-family);
-  font-size: var(--typography-heading-6-font-size);
-  letter-spacing: var(--typography-heading-6-letter-spacing);
-  font-weight: var(--typography-heading-6-font-weight);
-  line-height: var(--typography-heading-6-line-height);
-  padding: var(--spacing-6) 10px;
-  margin-inline: var(--spacing-6);
-}
-
-.Menu-module_menu__iHYqh section:not(:last-of-type)::after {
-  width: 100%;
-  height: 1px;
-  background-color: var(--border-solid-border-color);
-  content: "";
-  display: block;
-  margin-block: var(--spacing-6);
-}
-.MenuItem-module_item__DPerF {
-  font-family: var(--typography-paragraph-body-font-family);
-  font-size: var(--typography-paragraph-body-font-size);
-  letter-spacing: var(--typography-paragraph-body-letter-spacing);
-  font-weight: var(--typography-paragraph-body-font-weight);
-  line-height: var(--typography-paragraph-body-line-height);
-  color: rgba(var(--color-purple-800-rgb), 0.7);
-  padding: var(--spacing-6) var(--spacing-8);
-  border: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) transparent;
-  border-radius: 4px;
-  display: flex;
-  gap: 0 var(--spacing-8);
-  align-items: center;
-  margin-inline: var(--spacing-6);
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.MenuItem-module_iconWrapper__bRdQN {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-}
-
-.MenuItem-module_item__DPerF[data-focused] {
-  background-color: var(--color-blue-100);
-  color: var(--color-blue-500);
-  outline: none;
-  border-color: var(--color-blue-500);
-}
-
-.MenuItem-module_item__DPerF[data-disabled] {
-  opacity: 0.3;
-}
 .Focusable-module_focusableWrapper__NfuIi {
   display: inline-flex;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.61.0",
+  "version": "1.61.2",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -92,6 +92,8 @@
     "@cultureamp/frontend-apis": "^9.8.2",
     "@cultureamp/i18n-react-intl": "^2.6.1",
     "@tanstack/react-query": "^5.51.23",
+    "@testing-library/dom": "^10.4.0",
+    "@types/jest-axe": "^3.5.9",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react-highlight": "^0.12.8",
     "@types/react-textfit": "^1.1.4",
@@ -99,6 +101,7 @@
     "autoprefixer": "^10.4.20",
     "concat-cli": "^4.0.0",
     "identity-obj-proxy": "^3.0.0",
+    "jest-axe": "^9.0.0",
     "lodash.isempty": "^4.4.0",
     "normalize.css": "^8.0.1",
     "postcss": "^8.4.41",
@@ -115,7 +118,6 @@
     "sass": "^1.77.8",
     "serialize-query-params": "^2.0.2",
     "svgo": "^3.3.2",
-    "ts-jest": "^29.2.4",
     "tslib": "^2.6.3",
     "tsx": "^4.17.0",
     "@kaizen/design-tokens": "10.6.0",
@@ -142,8 +144,7 @@
     "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",
+    "test": "FORCE_COLOR=1 vitest --config ../../vite.config.ts",
     "update-icons": "./src/Icon/bin/update-icons.sh",
     "i18n:extract": "pnpm i18n-extract",
     "clean": "rimraf 'dist' 'node_modules' '.turbo'",

package/src/Avatar/Avatar.spec.tsx

@@ -6,7 +6,7 @@ describe("<Avatar />", () => {
   // there is an issue with react-textfit that is only flagged in a test suite
   // this solution silences that specific case https://github.com/malte-wessel/react-textfit/issues/35
   beforeEach(() => {
-    jest.spyOn(console, "warn").mockImplementation(() => "")
+    vi.spyOn(console, "warn").mockImplementation(() => "")
   })
 
   it("renders user initials if the image link is broken", () => {

package/src/Calendar/utils/setFocusInCalendar.spec.tsx

@@ -2,13 +2,13 @@ import React from "react"
 import { render, screen, within } from "@testing-library/react"
 import { format } from "date-fns"
 import { enUS } from "date-fns/locale"
+import { vi } from "vitest"
 import { CalendarSingle, CalendarSingleProps } from "../CalendarSingle"
 import { setFocusInCalendar } from "./setFocusInCalendar"
-
 const CalendarWrapper = (props: Partial<CalendarSingleProps>): JSX.Element => (
   <CalendarSingle
     id="calendar-dialog"
-    onDayClick={jest.fn()}
+    onDayClick={vi.fn()}
     locale={enUS}
     onMount={calendarElement =>
       setFocusInCalendar(calendarElement, props.selected)

package/src/Checkbox/Checkbox/Checkbox.spec.tsx

@@ -1,9 +1,9 @@
 import React from "react"
 import { render, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { CheckboxProps } from "./Checkbox"
 import { Checkbox } from "."
-
 const user = userEvent.setup()
 
 const defaultProps = {
@@ -11,7 +11,7 @@ const defaultProps = {
   checkedStatus: "off",
   disabled: false,
   name: "someCheckboxName",
-  onCheck: jest.fn(),
+  onCheck: vi.fn(),
 } satisfies CheckboxProps
 
 describe("<Checkbox />", () => {

package/src/Collapsible/Collapsible/Collapsible.spec.tsx

@@ -1,23 +1,11 @@
 import React from "react"
 import { queryByTestId, render, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import { Collapsible } from "./Collapsible"
-
 const user = userEvent.setup()
 
 describe("<Collapsible />", () => {
-  it("includes the 'sticky' class on buttons when the 'sticky' prop is specified", () => {
-    const { getByTestId } = render(
-      <Collapsible id="1" title="First panel" sticky={{ top: "0px" }}>
-        First panel content
-      </Collapsible>
-    )
-
-    const collapsibleContainer = getByTestId("collapsible-header-1")
-
-    expect(collapsibleContainer.classList.contains("sticky")).toBeTruthy()
-  })
-
   it("toggles the height of the section on click of the button", async () => {
     const { getByTestId } = render(
       <Collapsible id="1" open title="First panel">
@@ -74,7 +62,7 @@ describe("<Collapsible />", () => {
   })
 
   it("runs the onToggle callback", async () => {
-    const onToggle = jest.fn()
+    const onToggle = vi.fn()
 
     const { getByTestId } = render(
       <Collapsible id="1" open title="First panel" onToggle={onToggle}>

package/src/Collapsible/Collapsible/_docs/Collapsible.stickersheet.stories.tsx

@@ -1,6 +1,8 @@
 import React from "react"
 import { Meta } from "@storybook/react"
+import { within } from "@storybook/test"
 import { Heading } from "~components/Heading"
+import { Text } from "~components/Text"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -73,3 +75,50 @@ export const StickerSheetRTL: StickerSheetStory = {
   name: "Sticker Sheet (RTL)",
   parameters: { textDirection: "rtl" },
 }
+
+export const Sticky: StickerSheetStory = {
+  render: () => (
+    <StickerSheet>
+      <StickerSheet.Body>
+        <StickerSheet.Row rowTitle="Sticky header">
+          <div style={{ height: "300px", overflow: "auto" }}>
+            <Collapsible
+              open
+              title="Sticky"
+              sticky={{ top: "-1px" }}
+              style={{ maxWidth: "300px" }}
+            >
+              <Text variant="body">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                Phasellus ac scelerisque sem, vel ultricies justo. Donec eu
+                porttitor ante, nec gravida orci. Nulla facilisi. Cras varius
+                erat id fermentum mattis. Mauris bibendum vestibulum erat, quis
+                blandit metus viverra sit amet. Vivamus pretium vitae turpis ut
+                condimentum. Sed vulputate magna nisl, in cursus urna hendrerit
+                et. Aenean semper, est non feugiat sodales, nisl ligula aliquet
+                lorem, sit amet scelerisque arcu quam a sapien. Donec in viverra
+                urna.
+              </Text>
+              <Text variant="body" data-testid="bottom-content">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                Phasellus ac scelerisque sem, vel ultricies justo. Donec eu
+                porttitor ante, nec gravida orci. Nulla facilisi. Cras varius
+                erat id fermentum mattis. Mauris bibendum vestibulum erat, quis
+                blandit metus viverra sit amet. Vivamus pretium vitae turpis ut
+                condimentum. Sed vulputate magna nisl, in cursus urna hendrerit
+                et. Aenean semper, est non feugiat sodales, nisl ligula aliquet
+                lorem, sit amet scelerisque arcu quam a sapien. Donec in viverra
+                urna.
+              </Text>
+            </Collapsible>
+          </div>
+        </StickerSheet.Row>
+      </StickerSheet.Body>
+    </StickerSheet>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const element = canvas.getByTestId("bottom-content")
+    element.scrollIntoView({ behavior: "instant", block: "end" })
+  },
+}

package/src/Collapsible/Collapsible/_docs/Collapsible.stories.tsx

@@ -88,17 +88,6 @@ export const CustomHeader: Story = {
   ),
 }
 
-export const Sticky: Story = {
-  args: {
-    title: "Sticky header",
-  },
-  render: ({ title }) => (
-    <Collapsible open title={title} sticky={{ top: "-1px" }}>
-      This does not work in Storybook docs, so use this as a code example only.
-    </Collapsible>
-  ),
-}
-
 const controlledSourceCode = `
 const [isOpen, setIsOpen] = useState<boolean>(false)
 return (<Collapsible {...args} open={isOpen} onToggle={setIsOpen} />)

package/src/DateInput/DateInputDescription/DateInputDescription.spec.tsx

@@ -1,19 +1,18 @@
 import React from "react"
-import { waitFor } from "@testing-library/react"
+import { waitFor, render } from "@testing-library/react"
 import { enUS } from "date-fns/locale"
-import { renderWithIntl } from "~tests"
 import { DateInputDescription } from "./DateInputDescription"
 
 describe("DateInputDescription", () => {
   it("returns template string when description is undefined", async () => {
-    const { container } = renderWithIntl(<DateInputDescription locale={enUS} />)
+    const { container } = render(<DateInputDescription locale={enUS} />)
     await waitFor(() => {
       expect(container).toHaveTextContent("Input format:mm/dd/yyyy")
     })
   })
 
   it("returns template string when description is empty string", async () => {
-    const { container } = renderWithIntl(
+    const { container } = render(
       <DateInputDescription description="" locale={enUS} />
     )
     await waitFor(() => {
@@ -22,7 +21,7 @@ describe("DateInputDescription", () => {
   })
 
   it("returns template string when description is a string", async () => {
-    const { container } = renderWithIntl(
+    const { container } = render(
       <DateInputDescription
         description="Custom description here"
         locale={enUS}
@@ -36,7 +35,7 @@ describe("DateInputDescription", () => {
   })
 
   it("returns template string when description is an element", async () => {
-    const { container } = renderWithIntl(
+    const { container } = render(
       <DateInputDescription
         description={<span>Custom description span</span>}
         locale={enUS}

package/src/DateInput/DateInputWithIconButton/DateInputWithIconButton.spec.tsx

@@ -1,6 +1,7 @@
 import React, { useRef } from "react"
 import { render, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { vi } from "vitest"
 import {
   DateInputWithIconButton,
   DateInputWithIconButtonProps,
@@ -11,7 +12,7 @@ const user = userEvent.setup()
 const defaultProps: DateInputWithIconButtonProps = {
   id: "test__date-input-with-icon-button",
   labelText: "Due date",
-  onButtonClick: jest.fn<void, []>(),
+  onButtonClick: vi.fn(),
 }
 
 const DateInputWithIconButtonWrapper = (
@@ -52,10 +53,7 @@ describe("<DateInputWithIconButton />", () => {
 
   describe("Refs", () => {
     it("correctly passes through input and button refs", async () => {
-      const onButtonClick = jest.fn<
-        void,
-        [string | null | undefined, string | null | undefined]
-      >()
+      const onButtonClick = vi.fn()
 
       const Wrapper = (): JSX.Element => {
         const inputRef = useRef<HTMLInputElement>(null)
@@ -74,7 +72,7 @@ describe("<DateInputWithIconButton />", () => {
               ref={ref}
               id="test__date-input-field--ref"
               labelText="label"
-              onButtonClick={jest.fn<void, []>()}
+              onButtonClick={vi.fn()}
             />
             <button type="button" onClick={handleClick}>
               Click me