@kaizen/components 3.0.14 → 3.1.0

package/dist/cjs/src/BrandMoment/BrandMoment.cjs

@@ -29,15 +29,17 @@ var BrandMoment = function (_a) {
     body = _a.body,
     primaryAction = _a.primaryAction,
     secondaryAction = _a.secondaryAction,
+    tag = _a.tag,
     text = _a.text,
     classNameOverride = _a.classNameOverride,
-    restProps = tslib.__rest(_a, ["variant", "illustration", "header", "body", "primaryAction", "secondaryAction", "text", "classNameOverride"]);
+    restProps = tslib.__rest(_a, ["variant", "illustration", "header", "body", "primaryAction", "secondaryAction", "tag", "text", "classNameOverride"]);
   var queries = useMediaQueries.useMediaQueries().queries;
+  var Tag = tag !== null && tag !== void 0 ? tag : 'main';
   return React__default.default.createElement("div", tslib.__assign({
     className: classnames__default.default(BrandMoment_module.body, BrandMoment_module[variant], classNameOverride)
   }, restProps), React__default.default.createElement("header", {
     className: BrandMoment_module.header
-  }, header), React__default.default.createElement("main", {
+  }, header), React__default.default.createElement(Tag, {
     className: BrandMoment_module.main
   }, React__default.default.createElement("div", {
     className: BrandMoment_module.container

package/dist/cjs/src/Collapsible/Collapsible/Collapsible.cjs

@@ -87,12 +87,16 @@ var Collapsible = function (_a) {
     classNameOverride: Collapsible_module.chevronButton
   }))), (!lazyLoad || isOpen) && React__default.default.createElement(AnimateHeight__default.default, {
     height: isOpen ? 'auto' : 0,
+    disableDisplayNone: true,
     "data-testid": "collapsible-section-".concat(id)
   }, React__default.default.createElement("div", {
     id: sectionId,
     className: classnames__default.default(Collapsible_module.section, noSectionPadding && Collapsible_module.noPadding),
     role: "region",
-    "aria-labelledby": buttonId
+    "aria-labelledby": buttonId,
+    // TODO: Remove @ts-expect-error when upgrade to @types/react@19 that support the `inert` HTML attribute
+    // @ts-expect-error current react types don't yet support the `inert` HTML attribute
+    inert: isOpen ? undefined : true
   }, children)));
 };
 Collapsible.displayName = 'Collapsible';

package/dist/cjs/src/ErrorPage/ErrorPage.cjs

@@ -32,6 +32,7 @@ var ErrorPage = function (_a) {
     title = _a.title,
     message = _a.message,
     callToAction = _a.callToAction,
+    tag = _a.tag,
     classNameOverride = _a.classNameOverride;
   var formatMessage = i18nReactIntl.useIntl().formatMessage;
   var content = useErrorMessages.useErrorMessages(code);
@@ -48,6 +49,7 @@ var ErrorPage = function (_a) {
   return React__default.default.createElement("div", {
     className: classnames__default.default(classNameOverride)
   }, React__default.default.createElement(BrandMoment.BrandMoment, {
+    tag: tag,
     header: React__default.default.createElement(React__default.default.Fragment, null),
     body: React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement("div", {
       className: ErrorPage_module.paragraphPadding

package/dist/esm/src/BrandMoment/BrandMoment.mjs

@@ -21,15 +21,17 @@ const BrandMoment = /*#__PURE__*/function () {
       body = _a.body,
       primaryAction = _a.primaryAction,
       secondaryAction = _a.secondaryAction,
+      tag = _a.tag,
       text = _a.text,
       classNameOverride = _a.classNameOverride,
-      restProps = __rest(_a, ["variant", "illustration", "header", "body", "primaryAction", "secondaryAction", "text", "classNameOverride"]);
+      restProps = __rest(_a, ["variant", "illustration", "header", "body", "primaryAction", "secondaryAction", "tag", "text", "classNameOverride"]);
     var queries = useMediaQueries().queries;
+    var Tag = tag !== null && tag !== void 0 ? tag : 'main';
     return /*#__PURE__*/React.createElement("div", __assign({
       className: classnames(modules_5e37dab3.body, modules_5e37dab3[variant], classNameOverride)
     }, restProps), /*#__PURE__*/React.createElement("header", {
       className: modules_5e37dab3.header
-    }, header), /*#__PURE__*/React.createElement("main", {
+    }, header), /*#__PURE__*/React.createElement(Tag, {
       className: modules_5e37dab3.main
     }, /*#__PURE__*/React.createElement("div", {
       className: modules_5e37dab3.container

package/dist/esm/src/Collapsible/Collapsible/Collapsible.mjs

@@ -78,12 +78,16 @@ const Collapsible = /*#__PURE__*/function () {
       classNameOverride: modules_23a5f9ec.chevronButton
     }))), (!lazyLoad || isOpen) && (/*#__PURE__*/React.createElement(AnimateHeight, {
       height: isOpen ? 'auto' : 0,
+      disableDisplayNone: true,
       "data-testid": "collapsible-section-".concat(id)
     }, /*#__PURE__*/React.createElement("div", {
       id: sectionId,
       className: classnames(modules_23a5f9ec.section, noSectionPadding && modules_23a5f9ec.noPadding),
       role: "region",
-      "aria-labelledby": buttonId
+      "aria-labelledby": buttonId,
+      // TODO: Remove @ts-expect-error when upgrade to @types/react@19 that support the `inert` HTML attribute
+      // @ts-expect-error current react types don't yet support the `inert` HTML attribute
+      inert: isOpen ? undefined : true
     }, children))));
   };
   Collapsible.displayName = 'Collapsible';

package/dist/esm/src/ErrorPage/ErrorPage.mjs

@@ -24,6 +24,7 @@ const ErrorPage = /*#__PURE__*/function () {
       title = _a.title,
       message = _a.message,
       callToAction = _a.callToAction,
+      tag = _a.tag,
       classNameOverride = _a.classNameOverride;
     var formatMessage = useIntl().formatMessage;
     var content = useErrorMessages(code);
@@ -40,6 +41,7 @@ const ErrorPage = /*#__PURE__*/function () {
     return /*#__PURE__*/React.createElement("div", {
       className: classnames(classNameOverride)
     }, /*#__PURE__*/React.createElement(BrandMoment, {
+      tag: tag,
       header: /*#__PURE__*/React.createElement(React.Fragment, null),
       body: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
         className: modules_bbf9c78c.paragraphPadding

package/dist/types/BrandMoment/BrandMoment.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, type ReactElement, type ReactNode } from 'react';
+import { type ElementType, type HTMLAttributes, type ReactElement, type ReactNode } from 'react';
 import { type ButtonProps } from "../ButtonV1";
 import { type SceneProps } from "../Illustration";
 import { type OverrideClassName } from "../types/OverrideClassName";
@@ -11,6 +11,7 @@ export type BrandMomentProps = {
     body?: ReactNode;
     primaryAction?: ButtonProps;
     secondaryAction?: ButtonProps;
+    tag?: ElementType;
     text: {
         title: ReactNode;
         subtitle?: ReactNode;
@@ -23,7 +24,7 @@ export type BrandMomentProps = {
  * {@link https://cultureamp.design/?path=/docs/components-brand-moment--docs Storybook}
  */
 export declare const BrandMoment: {
-    ({ variant, illustration, header, body, primaryAction, secondaryAction, text, classNameOverride, ...restProps }: BrandMomentProps): JSX.Element;
+    ({ variant, illustration, header, body, primaryAction, secondaryAction, tag, text, classNameOverride, ...restProps }: BrandMomentProps): JSX.Element;
     displayName: string;
 };
 export {};

package/dist/types/ErrorPage/ErrorPage.d.ts

@@ -1,4 +1,4 @@
-import React, { type HTMLAttributes } from 'react';
+import React, { type ElementType, type HTMLAttributes } from 'react';
 import { type OverrideClassName } from "../types/OverrideClassName";
 import { type ErrorStatuses } from './hooks';
 export type ErrorPageProps = {
@@ -9,8 +9,9 @@ export type ErrorPageProps = {
         onContactSupport: () => void;
         homeHref?: string;
     };
+    tag?: ElementType;
 } & OverrideClassName<HTMLAttributes<HTMLDivElement>>;
 export declare const ErrorPage: {
-    ({ code, title, message, callToAction, classNameOverride, }: ErrorPageProps): JSX.Element;
+    ({ code, title, message, callToAction, tag, classNameOverride, }: ErrorPageProps): JSX.Element;
     displayName: string;
 };

package/package.json

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

package/src/BrandMoment/BrandMoment.spec.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { vi } from 'vitest'
+import { BrandMoment } from './BrandMoment'
+
+describe('<BrandMoment />', () => {
+  beforeAll(() => {
+    window.matchMedia = vi.fn().mockImplementation(() => ({
+      media: '',
+      onchange: null,
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      matches: false,
+    }))
+  })
+
+  it('renders a main element by default', () => {
+    const { container } = render(
+      <BrandMoment
+        variant="informative"
+        illustration={<div>illustration</div>}
+        header={<div>header</div>}
+        text={{ title: 'Title' }}
+      />,
+    )
+    expect(container.querySelector('main')).toBeInTheDocument()
+  })
+
+  it('renders the specified tag when provided', () => {
+    const { container } = render(
+      <BrandMoment
+        variant="informative"
+        illustration={<div>illustration</div>}
+        header={<div>header</div>}
+        tag="section"
+        text={{ title: 'Title' }}
+      />,
+    )
+    expect(container.querySelector('section')).toBeInTheDocument()
+    expect(container.querySelector('main')).not.toBeInTheDocument()
+  })
+})

package/src/BrandMoment/BrandMoment.tsx

@@ -1,4 +1,9 @@
-import React, { type HTMLAttributes, type ReactElement, type ReactNode } from 'react'
+import React, {
+  type ElementType,
+  type HTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+} from 'react'
 import classnames from 'classnames'
 import { Button, type ButtonProps } from '~components/ButtonV1'
 import { Heading } from '~components/Heading'
@@ -19,6 +24,7 @@ export type BrandMomentProps = {
   body?: ReactNode
   primaryAction?: ButtonProps
   secondaryAction?: ButtonProps
+  tag?: ElementType
   text: {
     title: ReactNode
     subtitle?: ReactNode
@@ -39,16 +45,18 @@ export const BrandMoment = ({
   body,
   primaryAction,
   secondaryAction,
+  tag,
   text,
   classNameOverride,
   ...restProps
 }: BrandMomentProps): JSX.Element => {
   const { queries } = useMediaQueries()
+  const Tag = tag ?? 'main'
 
   return (
     <div className={classnames(styles.body, styles[variant], classNameOverride)} {...restProps}>
       <header className={styles.header}>{header}</header>
-      <main className={styles.main}>
+      <Tag className={styles.main}>
         <div className={styles.container}>
           <div className={styles.mainInner}>
             <div className={styles.left}>
@@ -88,7 +96,7 @@ export const BrandMoment = ({
             </div>
           </div>
         </div>
-      </main>
+      </Tag>
       {text.footer && (
         <footer className={styles.footer}>
           <div className={styles.container}>

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

@@ -94,4 +94,47 @@ describe('<Collapsible />', () => {
       expect(section.style.height).toEqual('auto')
     })
   })
+
+  it('sets inert on the section when closed by default', async () => {
+    const { container } = render(
+      <Collapsible id="1" title="First panel" controlled>
+        First panel content
+      </Collapsible>,
+    )
+    const section = container.querySelector('[id="1-section"]')
+    expect(section).toHaveAttribute('inert')
+  })
+
+  it('does not set inert on the section when open by default', async () => {
+    const { container } = render(
+      <Collapsible id="1" title="First panel" open>
+        First panel content
+      </Collapsible>,
+    )
+    const section = container.querySelector('[id="1-section"]')
+    expect(section).not.toHaveAttribute('inert')
+  })
+
+  it('removes inert when opened and re-applies it when closed', async () => {
+    const { container, getByTestId } = render(
+      <Collapsible id="1" title="First panel">
+        First panel content
+      </Collapsible>,
+    )
+
+    const section = container.querySelector('[id="1-section"]')
+    const header = getByTestId('collapsible-header-1')
+
+    expect(section).toHaveAttribute('inert')
+
+    await user.click(header)
+    await waitFor(() => {
+      expect(section).not.toHaveAttribute('inert')
+    })
+
+    await user.click(header)
+    await waitFor(() => {
+      expect(section).toHaveAttribute('inert')
+    })
+  })
 })

package/src/Collapsible/Collapsible/Collapsible.tsx

@@ -128,12 +128,19 @@ export const Collapsible = ({
         </div>
       </div>
       {(!lazyLoad || isOpen) && (
-        <AnimateHeight height={isOpen ? 'auto' : 0} data-testid={`collapsible-section-${id}`}>
+        <AnimateHeight
+          height={isOpen ? 'auto' : 0}
+          disableDisplayNone
+          data-testid={`collapsible-section-${id}`}
+        >
           <div
             id={sectionId}
             className={classnames(styles.section, noSectionPadding && styles.noPadding)}
             role="region"
             aria-labelledby={buttonId}
+            // TODO: Remove @ts-expect-error when upgrade to @types/react@19 that support the `inert` HTML attribute
+            // @ts-expect-error current react types don't yet support the `inert` HTML attribute
+            inert={isOpen ? undefined : true}
           >
             {children}
           </div>

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

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { Heading } from '~components/Heading'
 import { Icon } from '~components/Icon'
+import { SingleSelect } from '~components/SingleSelect'
 import { Text } from '~components/Text'
 import { Collapsible } from '../index'
 
@@ -100,3 +101,33 @@ export const Controlled: Story = {
   },
   parameters: { docs: { source: { code: controlledSourceCode } } },
 }
+
+export const WithSingleSelect: Story = {
+  args: {
+    title: 'Single Collapsible',
+  },
+  render: (args) => (
+    <Collapsible {...args}>
+      <Text variant="body">Content before the SingleSelect</Text>
+      <SingleSelect
+        label="Type"
+        items={[
+          { label: 'Option 1', value: 'option-1' },
+          { label: 'Option 2', value: 'option-2' },
+          { label: 'Option 3', value: 'option-3' },
+        ]}
+      />
+      <Text variant="body">
+        Content after the SingleSelect — this should be reachable via VoiceOver
+      </Text>
+    </Collapsible>
+  ),
+  parameters: {
+    backgrounds: { default: 'Gray 100' },
+    docs: {
+      canvas: {
+        sourceState: 'shown',
+      },
+    },
+  },
+}

package/src/ErrorPage/ErrorPage.spec.tsx

@@ -127,4 +127,15 @@ describe('<ErrorPage />', () => {
       expect(screen.getByText('Error code 504')).toBeVisible()
     })
   })
+
+  it('renders a main element by default', () => {
+    const { container } = render(<ErrorPage code="404" />)
+    expect(container.querySelector('main')).toBeInTheDocument()
+  })
+
+  it('passes tag prop to BrandMoment', () => {
+    const { container } = render(<ErrorPage code="404" tag="section" />)
+    expect(container.querySelector('section')).toBeInTheDocument()
+    expect(container.querySelector('main')).not.toBeInTheDocument()
+  })
 })

package/src/ErrorPage/ErrorPage.tsx

@@ -1,4 +1,4 @@
-import React, { type HTMLAttributes } from 'react'
+import React, { type ElementType, type HTMLAttributes } from 'react'
 import { FormattedMessage, useIntl } from '@cultureamp/i18n-react-intl'
 import classNames from 'classnames'
 import { BrandMoment } from '~components/BrandMoment'
@@ -26,6 +26,7 @@ export type ErrorPageProps = {
     onContactSupport: () => void
     homeHref?: string
   }
+  tag?: ElementType
 } & OverrideClassName<HTMLAttributes<HTMLDivElement>>
 
 export const ErrorPage = ({
@@ -33,6 +34,7 @@ export const ErrorPage = ({
   title,
   message,
   callToAction,
+  tag,
   classNameOverride,
 }: ErrorPageProps): JSX.Element => {
   const { formatMessage } = useIntl()
@@ -48,6 +50,7 @@ export const ErrorPage = ({
   return (
     <div className={classNames(classNameOverride)}>
       <BrandMoment
+        tag={tag}
         header={<></>}
         body={
           <>