@kaizen/components 1.79.5 → 1.79.7

package/src/__alpha__/SingleSelect/_docs/mockData.ts

@@ -0,0 +1,92 @@
+export const singleMockItems = [
+  { label: 'Short black', value: 'short-black' },
+  { label: 'Long black', value: 'long-black' },
+  { label: 'Batch brew', value: 'batch-brew' },
+  { label: 'Latte', value: 'latte' },
+  { label: 'Flat white', value: 'flat-white' },
+  { label: 'Mocha', value: 'mocha' },
+  { label: 'Cappuccino', value: 'cappuccino' },
+  { label: 'Magic', value: 'magic' },
+]
+
+export const groupedMockItems = [
+  {
+    label: 'Colours',
+    options: [
+      { label: 'Blue', value: 'blue' },
+      { label: 'Red', value: 'red' },
+      { label: 'Green', value: 'green' },
+    ],
+  },
+  {
+    label: 'Flavours',
+    options: [
+      { label: 'Vanilla', value: 'vanilla' },
+      { label: 'Chocolate', value: 'chocolate' },
+      { label: 'Strawberry', value: 'strawberry' },
+    ],
+  },
+]
+
+export const mixedMockItemsDisabled = [
+  { label: 'Short black', value: 'short-black', disabled: true },
+  { label: 'Long black', value: 'long-black' },
+  { label: 'Batch brew', value: 'batch-brew', disabled: true },
+  {
+    label: 'Size',
+    options: [
+      { label: 'Regular', value: 'regular' },
+      { label: 'Large', value: 'large', disabled: true },
+    ],
+  },
+  {
+    label: 'Syrup',
+    options: [
+      { label: 'Vanilla', value: 'vanilla', disabled: true },
+      { label: 'Caramel', value: 'caramel' },
+      { label: 'Hazelnut', value: 'hazelnut' },
+    ],
+  },
+]
+
+export const mixedMockItemsUngroupedFirst = [
+  { label: 'Batch brew', value: 'batch-brew' },
+  { label: 'Latte', value: 'latte' },
+  { label: 'Magic', value: 'magic' },
+  {
+    label: 'Size',
+    options: [
+      { label: 'Regular', value: 'regular' },
+      { label: 'Large', value: 'large' },
+    ],
+  },
+  {
+    label: 'Syrup',
+    options: [
+      { label: 'Vanilla', value: 'vanilla' },
+      { label: 'Caramel', value: 'caramel' },
+      { label: 'Hazelnut', value: 'hazelnut' },
+    ],
+  },
+]
+
+export const mixedMockItemsUnordered = [
+  {
+    label: 'Size',
+    options: [
+      { label: 'Regular', value: 'regular' },
+      { label: 'Large', value: 'large' },
+    ],
+  },
+  { label: 'Batch brew', value: 'batch-brew' },
+  { label: 'Latte', value: 'latte' },
+  { label: 'Magic', value: 'magic' },
+  {
+    label: 'Syrup',
+    options: [
+      { label: 'Vanilla', value: 'vanilla' },
+      { label: 'Caramel', value: 'caramel' },
+      { label: 'Hazelnut', value: 'hazelnut' },
+    ],
+  },
+]

package/src/__alpha__/SingleSelect/index.ts

@@ -0,0 +1 @@
+export * from './SingleSelect'

package/src/__alpha__/SingleSelect/subcomponents/List/List.module.css

@@ -0,0 +1,7 @@
+@layer kz-components {
+  .list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-16);
+  }
+}

package/src/__alpha__/SingleSelect/subcomponents/List/List.tsx

@@ -0,0 +1,17 @@
+import React, { type PropsWithChildren } from 'react'
+import classNames from 'classnames'
+import { ListBox as RACListBox, type ListBoxProps } from 'react-aria-components'
+import styles from './List.module.css'
+
+export const List = ({
+  children,
+  className,
+  ...props
+}: ListBoxProps<object> & PropsWithChildren): React.ReactElement => {
+  return (
+    <RACListBox className={classNames(styles.list, className)} {...props}>
+      {children}
+    </RACListBox>
+  )
+}
+List.displayName = 'SingleSelect.List'

package/src/__alpha__/SingleSelect/subcomponents/List/index.ts

@@ -0,0 +1 @@
+export * from './List'

package/src/__alpha__/SingleSelect/subcomponents/ListItem/ListItem.module.css

@@ -0,0 +1,9 @@
+@layer kz-components {
+  .listItem {
+    font-family: var(--typography-paragraph-body-font-family);
+    font-weight: var(--typography-paragraph-body-font-weight);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+  }
+}

package/src/__alpha__/SingleSelect/subcomponents/ListItem/ListItem.tsx

@@ -0,0 +1,17 @@
+import React, { type PropsWithChildren } from 'react'
+import classNames from 'classnames'
+import { ListBoxItem as RACListBoxItem, type ListBoxItemProps } from 'react-aria-components'
+import styles from './ListItem.module.css'
+
+export const ListItem = ({
+  children,
+  className,
+  ...props
+}: ListBoxItemProps<object> & PropsWithChildren): React.ReactElement => {
+  return (
+    <RACListBoxItem className={classNames(styles.listItem, className)} {...props}>
+      {children}
+    </RACListBoxItem>
+  )
+}
+ListItem.displayName = 'SingleSelect.ListItem'

package/src/__alpha__/SingleSelect/subcomponents/ListItem/index.ts

@@ -0,0 +1 @@
+export * from './ListItem'

package/src/__alpha__/SingleSelect/subcomponents/ListSection/ListSection.module.css

@@ -0,0 +1,9 @@
+@layer kz-components {
+  .listSectionHeader {
+    font-family: var(--typography-heading-5-font-family);
+    font-weight: var(--typography-heading-5-font-weight);
+    font-size: var(--typography-heading-5-font-size);
+    line-height: var(--typography-heading-5-line-height);
+    letter-spacing: var(--typography-heading-5-letter-spacing);
+  }
+}

package/src/__alpha__/SingleSelect/subcomponents/ListSection/ListSection.tsx

@@ -0,0 +1,23 @@
+import React, { type PropsWithChildren } from 'react'
+import classNames from 'classnames'
+import {
+  Header as RACHeader,
+  ListBoxSection as RACListBoxSection,
+  type ListBoxSectionProps,
+} from 'react-aria-components'
+import styles from './ListSection.module.css'
+
+export const ListSection = ({
+  name,
+  className,
+  children,
+  ...props
+}: ListBoxSectionProps<object> & PropsWithChildren & { name: string }): React.ReactElement => {
+  return (
+    <RACListBoxSection {...props}>
+      <RACHeader className={classNames(styles.listSectionHeader, className)}>{name}</RACHeader>
+      {children}
+    </RACListBoxSection>
+  )
+}
+ListSection.displayName = 'SingleSelect.ListSection'

package/src/__alpha__/SingleSelect/subcomponents/ListSection/index.ts

@@ -0,0 +1 @@
+export * from './ListSection'

package/src/__alpha__/SingleSelect/subcomponents/Trigger/Trigger.module.css

@@ -0,0 +1,18 @@
+@layer kz-components {
+  .button {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-family: var(--typography-paragraph-body-font-family);
+    font-weight: var(--typography-paragraph-body-font-weight);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+    padding: var(--spacing-12);
+    min-height: var(--spacing-48);
+    min-width: var(--spacing-200);
+    background-color: var(--color-white);
+    border-radius: var(--spacing-8);
+    border: 1px solid var(--color-gray-500);
+  }
+}

package/src/__alpha__/SingleSelect/subcomponents/Trigger/Trigger.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Button as RACButton, SelectValue } from 'react-aria-components'
+import { Icon } from '~components/__next__/Icon'
+import styles from './Trigger.module.css'
+
+export const Trigger = (): JSX.Element => {
+  return (
+    <RACButton className={styles.button}>
+      <SelectValue />
+      <Icon name="keyboard_arrow_down" isPresentational />
+    </RACButton>
+  )
+}

package/src/__alpha__/SingleSelect/subcomponents/Trigger/index.ts

@@ -0,0 +1 @@
+export * from './Trigger'

package/src/__alpha__/SingleSelect/subcomponents/index.ts

@@ -0,0 +1,4 @@
+export * from './List'
+export * from './ListSection'
+export * from './ListItem'
+export * from './Trigger'

package/src/__alpha__/index.ts

@@ -0,0 +1 @@
+export * from './SingleSelect'

package/src/__next__/Menu/_docs/Menu--migration-guide.mdx

@@ -0,0 +1,91 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Components/Menu/Migration guide" />
+
+# Menu migration guide
+
+## Audience
+
+This guide is relevant for Kaizen All-In-One (KAIO) v1 consumers.
+
+## Purpose
+
+This guide provides instructions for migrating menu usage from the `deprecated` (`@kaizen/components`) `Menu` component to the `next` (`@kaizen/components/next`) `Menu` component.
+
+This migration is a prerequisite for [migrating to KAIO v2](/docs/releases-upcoming-major-releases--docs).
+
+## Key API changes
+
+`next/Menu` separates its functionality into the following components:
+
+- `MenuTrigger` wraps the `MenuPopover` component and its trigger element.
+- `MenuPopover` contains a `Menu` component, and controls the popover placement and open and close interactions.
+- `Menu` contains one or more `MenuItem` and `MenuSection` components.
+- `MenuSection` enables menu items to be grouped into sections.
+- `MenuHeader` provides a section's header content.
+- `MenuItem` provides a menu item's content, and handles item selection.
+
+Other notable changes:
+
+- `Menu.align` prop becomes MenuPopover.placement, and values are mapped as follows:
+  - `left` becomes `start`
+  - `right` becomes `end`
+- `Menu.autoHide` prop is retired
+- `Menu.button` prop becomes `MenuTrigger.children`
+  - The trigger element must be a `next/Button`
+- `Menu.dropdownWidth` prop is retired
+- `Menu.portalSelector` prop is retired
+  - Where needed, [PortalProvider](https://react-spectrum.adobe.com/react-aria/PortalProvider.html) can be used to control portalling behaviour
+- `MenuItem.destructive` prop is retired
+  - This change aligns with a broader move towards more judicious use of colour
+- `MenuItem.disabled` prop becomes `MenuItem.isDisabled`
+- `MenuItem.label` prop becomes `MenuItem.children`
+- `MenuItem.onClick` prop becomes `MenuItem.onAction`
+  - React Aria's `Menu` does not expose native click events, e.g. `MenuItem.onAction` cannot call `e.preventDefault()`
+  - See React Aria [Menu documentation](https://react-spectrum.adobe.com/react-aria/Menu.html) for more details on working with `Menu` and `MenuItem` events
+- `MenuList.heading` prop becomes `MenuHeader` in a `MenuSection`
+
+## Migration example
+
+### Before
+
+```tsx
+<Menu button={<Button>Trigger</Button>}>
+  <MenuList>
+    <MenuList heading={<MenuHeading>Section One</MenuHeading>}>
+      <MenuItem onClick={() => alert('1')} label="Item 1" />
+      <MenuItem onClick={() => alert('2')} label="Item 2" />
+    </MenuList>
+    <MenuList heading={<MenuHeading>Section Two</MenuHeading>}>
+      <MenuItem onClick={() => alert('3')} label="Item 3" />
+      <MenuItem onClick={() => alert('4')} label="Item 4" />
+    </MenuList>
+  </MenuList>
+</Menu>
+```
+
+### After
+
+```tsx
+<MenuTrigger>
+  <Button>Trigger</Button>
+  <MenuPopover>
+    <Menu>
+      <MenuSection>
+        <MenuHeader>Section One</MenuHeader>
+        <MenuItem onAction={() => alert('1')}>Item 1</MenuItem>
+        <MenuItem onAction={() => alert('2')}>Item 2</MenuItem>
+      </MenuSection>
+      <MenuSection>
+        <MenuHeader>Section Two</MenuHeader>
+        <MenuItem onAction={() => alert('3')}>Item 3</MenuItem>
+        <MenuItem onAction={() => alert('4')}>Item 4</MenuItem>
+      </MenuSection>
+    </Menu>
+  </MenuPopover>
+</MenuTrigger>
+```
+
+## More information
+
+More information about `next/Menu` can be found at [API Specification](/docs/components-menu-menu-next-api-specification--docs) and [Usage Guidelines](/docs/components-menu-menu-next-usage-guidelines--docs).

package/src/__next__/Tabs/subcomponents/TabList/TabList.module.css

@@ -26,7 +26,9 @@
     align-items: center;
     justify-content: center;
     position: absolute;
-    z-index: 10000;
+
+    /* from $ca-z-index-fixed */
+    z-index: 1030;
     background: var(--color-white);
     inset-block: 0 1px;
     width: 48px;