@kaizen/components 1.67.10 → 1.67.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.67.10",
+  "version": "1.67.11",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -118,8 +118,8 @@
     "svgo": "^3.3.2",
     "tslib": "^2.8.0",
     "tsx": "^4.19.2",
-    "@kaizen/package-bundler": "1.1.9",
-    "@kaizen/design-tokens": "10.8.1"
+    "@kaizen/design-tokens": "10.8.1",
+    "@kaizen/package-bundler": "1.1.10"
   },
   "devDependenciesComments": {
     "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",

package/src/__actions__/Menu/v3/Menu.tsx

@@ -4,7 +4,7 @@ import {
   MenuProps as RACMenuProps,
 } from "react-aria-components"
 import { mergeClassNames } from "~components/utils/mergeClassNames"
-import styles from "./Menu.module.scss"
+import styles from "./Menu.module.css"
 
 export type MenuProps = Omit<
   RACMenuProps<HTMLDivElement>,

package/src/__actions__/Menu/v3/{MenuItem.module.scss → MenuItem.module.css}

@@ -1,4 +1,5 @@
 .item {
+  display: block;
   font-family: var(--typography-paragraph-body-font-family);
   font-size: var(--typography-paragraph-body-font-size);
   letter-spacing: var(--typography-paragraph-body-letter-spacing);
@@ -9,14 +10,17 @@
   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;
 }
 
+.flexWrapper {
+  display: flex;
+  gap: 0 var(--spacing-8);
+  align-items: center;
+}
+
 .iconWrapper {
   flex-shrink: 0;
   display: flex;

package/src/__actions__/Menu/v3/MenuItem.tsx

@@ -4,7 +4,7 @@ import {
   MenuItemProps as RACMenuItemProps,
 } from "react-aria-components"
 import { mergeClassNames } from "~components/utils/mergeClassNames"
-import styles from "./MenuItem.module.scss"
+import styles from "./MenuItem.module.css"
 
 export type MenuItemProps = RACMenuItemProps & {
   /**
@@ -17,16 +17,27 @@ export type MenuItemProps = RACMenuItemProps & {
  * A MenuItem represents an individual action in a Menu.
  */
 export const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(
-  ({ className, icon, children, ...props }, ref): JSX.Element => (
-    <RACMenuItem
-      ref={ref}
-      className={mergeClassNames(styles.item, className)}
-      {...props}
-    >
-      <>
-        {icon && <span className={styles.iconWrapper}>{icon}</span>}
-        {children}
-      </>
-    </RACMenuItem>
-  )
+  ({ className, icon, children, textValue, ...props }, ref): JSX.Element => {
+    const determinedTextValue =
+      textValue || (typeof children === "string" ? children : undefined)
+    return (
+      <RACMenuItem
+        ref={ref}
+        className={mergeClassNames(styles.item, className)}
+        textValue={determinedTextValue}
+        {...props}
+      >
+        <>
+          {typeof children === "string" && icon ? (
+            <div className={styles.flexWrapper}>
+              <span className={styles.iconWrapper}>{icon}</span>
+              {children}
+            </div>
+          ) : (
+            <>{children}</>
+          )}
+        </>
+      </RACMenuItem>
+    )
+  }
 )

package/src/__actions__/Menu/v3/_docs/ApiSpecification.mdx

@@ -71,12 +71,21 @@ import * as exampleStories from "./Menu.stories"
 
 ## Actions and Next.js routing
 
-Use the `href` prop when an action navigates to a new page. Wrapping your app in `FrontendServices` from `@cultureamp/next-services` will automatically turn these into Next.js links.
+Use the `href` prop when an action navigates to a new page.
+[Work in progress] Eventually, wrapping your app in `FrontendServices` from `@cultureamp/next-services` will automatically turn these into Next.js links.
 
 Otherwise, use the `onAction` prop to trigger an action within the page.
 
 <Canvas className="mb-24" of={docsStories.Actions}  />
 
+## Typeahead
+
+Typeahead (the ability to quickly skip to an item by typing a few characters after opening) will automatically work when `MenuItem` `children` is a `string`.
+
+If you're passing `ReactNode` into `MenuItem` `children`, you'll need to specify the `textValue` prop manually on `MenuItem` in order for typeahead to work.
+
+<Canvas className="mb-24" of={exampleStories.RichContent}  />
+
 ## Sections
 
 Sections can be added with the `Section` and `Header` component from `react-aria-components`.

package/src/__actions__/Menu/v3/_docs/Menu.docs.stories.tsx

@@ -110,7 +110,6 @@ export const SelectionDont: Story = {
 export const LabelChevronDo: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen} {...args}>
-      {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
       <Button className="[--icon-size:24]">
         Edit item
         <Icon name="keyboard_arrow_down" isPresentational />
@@ -211,7 +210,6 @@ export const MenuItemLabelsDont: Story = {
 export const SentenceCaseDo: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
       <Button className="[--icon-size:24]">
         <Icon name="more_horiz" alt="Additional actions" />
       </Button>
@@ -229,7 +227,6 @@ export const SentenceCaseDo: Story = {
 export const SentenceCaseDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
       <Button className="[--icon-size:24]">
         <Icon name="more_horiz" alt="Additional actions" />
       </Button>
@@ -247,7 +244,6 @@ export const SentenceCaseDont: Story = {
 export const ElipsesDo: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
       <Button className="[--icon-size:24]">
         <Icon name="more_horiz" alt="Additional actions" />
       </Button>
@@ -265,7 +261,6 @@ export const ElipsesDo: Story = {
 export const ElipsesDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
       <Button className="[--icon-size:24]">
         <Icon name="more_horiz" alt="Additional actions" />
       </Button>

package/src/__actions__/Menu/v3/_docs/Menu.stories.tsx

@@ -2,6 +2,7 @@ import React, { FunctionComponent } from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import isChromatic from "chromatic"
 import { Popover } from "react-aria-components"
+import { Text } from "~components/Text"
 import { Button } from "~components/__actions__/v3"
 import { Icon } from "~components/__future__/Icon"
 import { Menu, MenuTrigger, MenuItem } from "../index"
@@ -24,7 +25,6 @@ type Story = StoryObj<typeof meta>
 export const Playground: Story = {
   render: ({ defaultOpen: _, ...args }) => (
     <MenuTrigger {...args}>
-      {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
       <Button className="[--icon-size:24]">
         <Icon name="more_horiz" alt="Additional actions" />
       </Button>
@@ -64,3 +64,35 @@ export const Controlled: Story = {
   ...testStories.Controlled,
   play: undefined,
 }
+
+export const RichContent: Story = {
+  render: ({ defaultOpen: _, ...args }) => (
+    <MenuTrigger {...args}>
+      <Button className="[--icon-size:24]">
+        <Icon name="more_horiz" alt="Additional actions" />
+      </Button>
+      <Popover>
+        <Menu>
+          <MenuItem textValue="Save">
+            <div>Save</div>
+            <Text tag="div" variant="extra-small">
+              Saves all data
+            </Text>
+          </MenuItem>
+          <MenuItem textValue="Edit">
+            <div>Edit</div>
+            <Text tag="div" variant="extra-small">
+              Adjust the name and description
+            </Text>
+          </MenuItem>
+          <MenuItem textValue="Delete">
+            Delete
+            <Text tag="div" variant="extra-small">
+              Completely remove, cannot be undone
+            </Text>
+          </MenuItem>
+        </Menu>
+      </Popover>
+    </MenuTrigger>
+  ),
+}

package/dist/cjs/__actions__/Menu/v3/MenuItem.module.scss.cjs

@@ -1,7 +0,0 @@
-'use strict';
-
-var styles = {
-  "item": "MenuItem-module_item__DPerF",
-  "iconWrapper": "MenuItem-module_iconWrapper__bRdQN"
-};
-module.exports = styles;

package/dist/esm/__actions__/Menu/v3/MenuItem.module.scss.mjs

@@ -1,5 +0,0 @@
-var styles = {
-  "item": "MenuItem-module_item__DPerF",
-  "iconWrapper": "MenuItem-module_iconWrapper__bRdQN"
-};
-export { styles as default };