@kaizen/components 1.68.6 → 1.68.8

package/src/__actions__/Menu/v1/subcomponents/MenuDropdown/MenuDropdown.tsx

@@ -1,8 +1,8 @@
-import React, { useCallback, useEffect, useState } from "react"
-import classnames from "classnames"
-import { FocusOn } from "react-focus-on"
-import { usePopper } from "react-popper"
-import styles from "./MenuDropdown.module.scss"
+import React, { useCallback, useEffect, useState } from 'react'
+import classnames from 'classnames'
+import { FocusOn } from 'react-focus-on'
+import { usePopper } from 'react-popper'
+import styles from './MenuDropdown.module.scss'
 
 export type MenuDropdownProps = {
   id?: string
@@ -13,9 +13,9 @@ export type MenuDropdownProps = {
     left: number
     right: number
   } | null
-  align?: "left" | "right"
-  width?: "default" | "contain"
-  autoHide?: "on" | "outside-click-only" | "off"
+  align?: 'left' | 'right'
+  width?: 'default' | 'contain'
+  autoHide?: 'on' | 'outside-click-only' | 'off'
   children: React.ReactNode
   referenceElement: HTMLElement | null
 }
@@ -25,35 +25,29 @@ export const MenuDropdown = ({
   referenceElement,
   id,
   hideMenuDropdown,
-  autoHide = "on",
-  align = "left",
-  width = "default",
+  autoHide = 'on',
+  align = 'left',
+  width = 'default',
 }: MenuDropdownProps): JSX.Element => {
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
-    null
-  )
-  const { styles: popperStyles, attributes } = usePopper(
-    referenceElement,
-    popperElement,
-    {
-      modifiers: [
-        {
-          name: "offset",
-          options: {
-            offset: [0, 6], // value used from the $spacing-xs scss variable,
-          },
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null)
+  const { styles: popperStyles, attributes } = usePopper(referenceElement, popperElement, {
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: [0, 6], // value used from the $spacing-xs scss variable,
         },
-        {
-          name: "preventOverflow",
-          options: {
-            // Gives some room so the menu shadow doesn't get clipped if near the edge of the viewport.
-            padding: 8,
-          },
+      },
+      {
+        name: 'preventOverflow',
+        options: {
+          // Gives some room so the menu shadow doesn't get clipped if near the edge of the viewport.
+          padding: 8,
         },
-      ],
-      placement: align === "left" ? "bottom-start" : "bottom-end",
-    }
-  )
+      },
+    ],
+    placement: align === 'left' ? 'bottom-start' : 'bottom-end',
+  })
 
   // This callback handler will not run when autoHide === "off"
   const handleDocumentClickForAutoHide = useCallback(
@@ -68,7 +62,7 @@ export const MenuDropdown = ({
         hideMenuDropdown()
       }
     },
-    [popperElement, referenceElement, hideMenuDropdown]
+    [popperElement, referenceElement, hideMenuDropdown],
   )
 
   const handleDocumentResize = useCallback(() => {
@@ -76,32 +70,28 @@ export const MenuDropdown = ({
   }, [hideMenuDropdown])
 
   const handleRootClick = (): void => {
-    if (autoHide === "on") {
+    if (autoHide === 'on') {
       // ie. is not equal to "off" | "outside-click-only"
       hideMenuDropdown()
     }
   }
 
   useEffect(() => {
-    window.addEventListener("resize", handleDocumentResize, false)
+    window.addEventListener('resize', handleDocumentResize, false)
 
     return () => {
-      window.removeEventListener("resize", handleDocumentResize, false)
+      window.removeEventListener('resize', handleDocumentResize, false)
     }
   }, [handleDocumentResize])
 
   useEffect(() => {
-    if (autoHide !== "off") {
-      document.addEventListener("click", handleDocumentClickForAutoHide, true)
+    if (autoHide !== 'off') {
+      document.addEventListener('click', handleDocumentClickForAutoHide, true)
     }
 
     return () => {
-      if (autoHide !== "off") {
-        document.removeEventListener(
-          "click",
-          handleDocumentClickForAutoHide,
-          true
-        )
+      if (autoHide !== 'off') {
+        document.removeEventListener('click', handleDocumentClickForAutoHide, true)
       }
     }
   }, [autoHide, handleDocumentClickForAutoHide])
@@ -126,10 +116,7 @@ export const MenuDropdown = ({
         ref={setPopperElement}
         {...attributes.popper}
         style={popperStyles.popper}
-        className={classnames(
-          styles.menuContainer,
-          width == "default" && styles.defaultWidth
-        )}
+        className={classnames(styles.menuContainer, width == 'default' && styles.defaultWidth)}
         onClick={handleRootClick}
       >
         {children}
@@ -138,4 +125,4 @@ export const MenuDropdown = ({
   )
 }
 
-MenuDropdown.displayName = "MenuDropdown"
+MenuDropdown.displayName = 'MenuDropdown'

package/src/__actions__/Menu/v1/subcomponents/MenuDropdown/index.ts

@@ -1 +1 @@
-export * from "./MenuDropdown"
+export * from './MenuDropdown'

package/src/__actions__/Menu/v1/subcomponents/MenuHeading/MenuHeading.module.scss

@@ -1,5 +1,5 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/spacing";
+@import '~@kaizen/design-tokens/sass/color';
+@import '~@kaizen/design-tokens/sass/spacing';
 
 $gutter: calc(#{$spacing-md} * 1 / 6);
 

package/src/__actions__/Menu/v1/subcomponents/MenuHeading/MenuHeading.tsx

@@ -1,7 +1,7 @@
-import React from "react"
-import classnames from "classnames"
-import { Heading, HeadingProps } from "~components/Heading"
-import styles from "./MenuHeading.module.scss"
+import React from 'react'
+import classnames from 'classnames'
+import { Heading, HeadingProps } from '~components/Heading'
+import styles from './MenuHeading.module.scss'
 
 export type MenuHeadingProps = {
   children: React.ReactNode
@@ -21,4 +21,4 @@ export const MenuHeading = ({
   />
 )
 
-MenuHeading.displayName = "MenuHeading"
+MenuHeading.displayName = 'MenuHeading'

package/src/__actions__/Menu/v1/subcomponents/MenuHeading/index.ts

@@ -1 +1 @@
-export * from "./MenuHeading"
+export * from './MenuHeading'

package/src/__actions__/Menu/v1/subcomponents/MenuItem/MenuItem.module.scss

@@ -1,6 +1,6 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/typography";
+@import '~@kaizen/design-tokens/sass/color';
+@import '~@kaizen/design-tokens/sass/spacing';
+@import '~@kaizen/design-tokens/sass/typography';
 
 .menuListItem {
   display: flex;

package/src/__actions__/Menu/v1/subcomponents/MenuItem/MenuItem.tsx

@@ -1,28 +1,28 @@
-import React from "react"
-import classnames from "classnames"
-import styles from "./MenuItem.module.scss"
+import React from 'react'
+import classnames from 'classnames'
+import styles from './MenuItem.module.scss'
 
 export type MenuItemProps = {
-  label: string
-  href?: string
+  'label': string
+  'href'?: string
   // Only applicable if href is supplied above
-  target?: string
-  onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void
-  icon?: JSX.Element
-  destructive?: boolean
-  disabled?: boolean
+  'target'?: string
+  'onClick'?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void
+  'icon'?: JSX.Element
+  'destructive'?: boolean
+  'disabled'?: boolean
   /**
    * @deprecated use data-testid
    */
-  automationId?: string
+  'automationId'?: string
   /**
    * Not recommended - this was added for use in exceptional cases like the navigation bar, which needs
    * to highlight which page the user is currently on. By design, Menus don't have active items,
    * because they are supposed to be a bunch of links/actions.
    */
-  isActive?: boolean
-  "data-testid"?: string
-  id?: string
+  'isActive'?: boolean
+  'data-testid'?: string
+  'id'?: string
 }
 
 export const MenuItem = ({
@@ -34,7 +34,7 @@ export const MenuItem = ({
   href,
   target,
   isActive,
-  "data-testid": dataTestId,
+  'data-testid': dataTestId,
   id,
 }: MenuItemProps): JSX.Element => {
   const wrappedLabel = <span className={styles.menuItem__Label}>{label}</span>
@@ -42,9 +42,9 @@ export const MenuItem = ({
 
   const className = classnames(
     styles.menuItem,
-    destructive && styles["menuItem--destructive"],
-    disabled && styles["menuItem--disabled"],
-    isActive && styles["menuItem--active"]
+    destructive && styles['menuItem--destructive'],
+    disabled && styles['menuItem--disabled'],
+    isActive && styles['menuItem--active'],
   )
 
   if (disabled) {
@@ -75,7 +75,7 @@ export const MenuItem = ({
           target={target}
           // this tells screenreaders that this link represents the current page
           // (only intended for use in things like a nav with dropdowns)
-          aria-current={isActive ? "page" : undefined}
+          aria-current={isActive ? 'page' : undefined}
           data-testid={dataTestId}
         >
           {iconNode}
@@ -101,4 +101,4 @@ export const MenuItem = ({
   )
 }
 
-MenuItem.displayName = "MenuItem"
+MenuItem.displayName = 'MenuItem'

package/src/__actions__/Menu/v1/subcomponents/MenuItem/index.ts

@@ -1 +1 @@
-export * from "./MenuItem"
+export * from './MenuItem'

package/src/__actions__/Menu/v1/subcomponents/MenuList/MenuList.module.scss

@@ -1,4 +1,4 @@
-@import "~@kaizen/design-tokens/sass/border";
+@import '~@kaizen/design-tokens/sass/border';
 
 .menuSection {
   list-style: none;
@@ -10,7 +10,7 @@
       width: 100%;
       height: 1px;
       background-color: $border-solid-border-color;
-      content: "";
+      content: '';
       display: block;
       margin: 5px 0;
     }

package/src/__actions__/Menu/v1/subcomponents/MenuList/MenuList.spec.tsx

@@ -1,44 +1,36 @@
-import React from "react"
-import { render, screen } from "@testing-library/react"
-import { MenuHeading } from "../MenuHeading"
-import { MenuItem } from "../MenuItem"
-import { MenuList } from "./MenuList"
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { MenuHeading } from '../MenuHeading'
+import { MenuItem } from '../MenuItem'
+import { MenuList } from './MenuList'
 
-describe("MenuList", () => {
-  describe("With a heading", () => {
-    it("gives the list an accessible name of the section heading text", () => {
+describe('MenuList', () => {
+  describe('With a heading', () => {
+    it('gives the list an accessible name of the section heading text', () => {
       render(
         <MenuList heading={<MenuHeading>A menu section</MenuHeading>}>
           <MenuItem label="Item one" />
-        </MenuList>
+        </MenuList>,
       )
-      expect(
-        screen.getByRole("list", { name: "A menu section" })
-      ).toBeInTheDocument()
+      expect(screen.getByRole('list', { name: 'A menu section' })).toBeInTheDocument()
     })
 
-    it("applies custom heading props", () => {
+    it('applies custom heading props', () => {
       render(
         <MenuList heading={<MenuHeading tag="h2">A menu section</MenuHeading>}>
           <MenuItem label="Item one" />
-        </MenuList>
+        </MenuList>,
       )
-      expect(
-        screen.getByRole("heading", { name: "A menu section", level: 2 })
-      ).toBeInTheDocument()
+      expect(screen.getByRole('heading', { name: 'A menu section', level: 2 })).toBeInTheDocument()
     })
   })
 
-  it("still links ids correctly when a heading id provided", () => {
+  it('still links ids correctly when a heading id provided', () => {
     render(
-      <MenuList
-        heading={<MenuHeading id="custom-id">A menu section</MenuHeading>}
-      >
+      <MenuList heading={<MenuHeading id="custom-id">A menu section</MenuHeading>}>
         <MenuItem label="Item one" />
-      </MenuList>
+      </MenuList>,
     )
-    expect(
-      screen.getByRole("list", { name: "A menu section" })
-    ).toBeInTheDocument()
+    expect(screen.getByRole('list', { name: 'A menu section' })).toBeInTheDocument()
   })
 })

package/src/__actions__/Menu/v1/subcomponents/MenuList/MenuList.tsx

@@ -1,6 +1,6 @@
-import React, { HTMLAttributes, cloneElement, useId } from "react"
-import { OverrideClassName } from "~components/types/OverrideClassName"
-import styles from "./MenuList.module.scss"
+import React, { HTMLAttributes, cloneElement, useId } from 'react'
+import { OverrideClassName } from '~components/types/OverrideClassName'
+import styles from './MenuList.module.scss'
 
 export type MenuListProps = {
   heading?: JSX.Element
@@ -26,4 +26,4 @@ export const MenuList = (props: MenuListProps): JSX.Element => {
   )
 }
 
-MenuList.displayName = "MenuList"
+MenuList.displayName = 'MenuList'

package/src/__actions__/Menu/v1/subcomponents/MenuList/index.ts

@@ -1 +1 @@
-export * from "./MenuList"
+export * from './MenuList'

package/src/__actions__/Menu/v1/subcomponents/StatelessMenu/StatelessMenu.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useState, SyntheticEvent, useRef } from "react"
-import ReactDOM from "react-dom"
-import { MenuDropdown } from "../MenuDropdown"
-import styles from "./StatelessMenu.module.scss"
+import React, { useEffect, useState, SyntheticEvent, useRef } from 'react'
+import ReactDOM from 'react-dom'
+import { MenuDropdown } from '../MenuDropdown'
+import styles from './StatelessMenu.module.scss'
 
 export type StatelessMenuProps = {
   /**
@@ -10,7 +10,7 @@ export type StatelessMenuProps = {
    * is aligned to the left of the button (and vice versa)
    * @default "left"
    */
-  align?: "left" | "right"
+  'align'?: 'left' | 'right'
 
   /**
    * The width of the dropdown.
@@ -18,45 +18,45 @@ export type StatelessMenuProps = {
    * "contain": contain the children's width (will be same width as children)
    * @default "default"
    */
-  dropdownWidth?: "default" | "contain"
+  'dropdownWidth'?: 'default' | 'contain'
   /**
    * @deprecated use data-testid instead
    */
-  automationId?: string
-  "data-testid"?: string
-  dropdownId?: string
+  'automationId'?: string
+  'data-testid'?: string
+  'dropdownId'?: string
   /**
    * Determines when the menu should automatically hide.
    * @default: "on"
    */
-  autoHide?: "on" | "outside-click-only" | "off"
+  'autoHide'?: 'on' | 'outside-click-only' | 'off'
   /**
    * The content to appear inside the dropdown when it is open
    */
-  children: React.ReactNode
+  'children': React.ReactNode
   /**
    * Render the tooltip inside a react portal, given the CSS selector.
    * This is typically used for instances where the menu is a descendant of an
    * `overflow: scroll` or `overflow: hidden` element.
    */
-  portalSelector?: string
-  isMenuVisible: boolean
-  toggleMenuDropdown: () => void
-  hideMenuDropdown: () => void
-  renderButton: (args: {
-    onClick: (e: any) => void
-    onMouseDown: (e: any) => void
-    "aria-haspopup": boolean
-    "aria-expanded": boolean
+  'portalSelector'?: string
+  'isMenuVisible': boolean
+  'toggleMenuDropdown': () => void
+  'hideMenuDropdown': () => void
+  'renderButton': (args: {
+    'onClick': (e: any) => void
+    'onMouseDown': (e: any) => void
+    'aria-haspopup': boolean
+    'aria-expanded': boolean
   }) => React.ReactElement
-  onClick?: (event: SyntheticEvent) => void
+  'onClick'?: (event: SyntheticEvent) => void
 }
 
 export const StatelessMenu = ({
-  align = "left",
-  dropdownWidth = "default",
-  autoHide = "on",
-  "data-testid": dataTestId,
+  align = 'left',
+  dropdownWidth = 'default',
+  autoHide = 'on',
+  'data-testid': dataTestId,
   dropdownId,
   children,
   portalSelector,
@@ -66,20 +66,18 @@ export const StatelessMenu = ({
   renderButton,
   onClick,
 }: StatelessMenuProps): JSX.Element => {
-  const [referenceElement, setReferenceElement] =
-    useState<HTMLSpanElement | null>(null)
+  const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>(null)
   const portalSelectorElementRef = useRef<Element | null>(null)
 
   const menuButton = renderButton({
-    onClick: (e: React.MouseEvent<Element, MouseEvent>) => {
+    'onClick': (e: React.MouseEvent<Element, MouseEvent>) => {
       e.preventDefault()
       e.stopPropagation()
       toggleMenuDropdown()
     },
-    onMouseDown: (e: React.MouseEvent<Element, MouseEvent>) =>
-      e.preventDefault(),
-    "aria-haspopup": true,
-    "aria-expanded": isMenuVisible,
+    'onMouseDown': (e: React.MouseEvent<Element, MouseEvent>) => e.preventDefault(),
+    'aria-haspopup': true,
+    'aria-expanded': isMenuVisible,
   })
 
   useEffect(() => {
@@ -91,9 +89,7 @@ export const StatelessMenu = ({
   useEffect(() => {
     if (portalSelector && !portalSelectorElementRef.current) {
       // eslint-disable-next-line no-console
-      console.warn(
-        "The portal could not be created using the selector: " + portalSelector
-      )
+      console.warn('The portal could not be created using the selector: ' + portalSelector)
     }
   }, [portalSelectorElementRef, portalSelector])
 
@@ -123,4 +119,4 @@ export const StatelessMenu = ({
   )
 }
 
-StatelessMenu.displayName = "StatelessMenu"
+StatelessMenu.displayName = 'StatelessMenu'

package/src/__actions__/Menu/v1/subcomponents/StatelessMenu/index.ts

@@ -1 +1 @@
-export * from "./StatelessMenu"
+export * from './StatelessMenu'

package/src/__actions__/Menu/v2/_docs/Menu.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as MenuStories from "./Menu.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as MenuStories from './Menu.stories'
 
 <Meta of={MenuStories} />
 
@@ -13,7 +13,11 @@ import * as MenuStories from "./Menu.stories"
 
 />
 
-<KAIOInstallation exportNames={["Menu", "MenuDropdown", "MenuList", "MenuItem"]} family="actions" version="2" />
+<KAIOInstallation
+  exportNames={['Menu', 'MenuDropdown', 'MenuList', 'MenuItem']}
+  family="actions"
+  version="2"
+/>
 
 ## Overview
 

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

@@ -1,12 +1,12 @@
-import React from "react"
-import { Meta, StoryObj } from "@storybook/react"
-import { Button } from "~components/__actions__/v2"
-import { Icon } from "~components/__future__/Icon"
-import * as MenuV1Stories from "../../v1/_docs/Menu.stories"
-import { Menu, MenuList, MenuItem, MenuHeading } from "../index"
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { Button } from '~components/__actions__/v2'
+import { Icon } from '~components/__future__/Icon'
+import * as MenuV1Stories from '../../v1/_docs/Menu.stories'
+import { Menu, MenuList, MenuItem, MenuHeading } from '../index'
 
 const meta = {
-  title: "Actions/Menu/v2",
+  title: 'Actions/Menu/v2',
   component: Menu,
   args: {
     button: (
@@ -20,7 +20,7 @@ const meta = {
       <MenuList>
         <MenuItem
           onClick={() => {
-            alert("Duplicated!")
+            alert('Duplicated!')
           }}
           icon={<Icon name="content_copy" isPresentational isFilled />}
           label="Duplicate item"
@@ -36,14 +36,14 @@ const meta = {
     ),
   },
   decorators: [
-    Story => (
+    (Story) => (
       <div className="flex mt-[60px] gap-12">
         <Story />
       </div>
     ),
   ],
   parameters: {
-    layout: "centered",
+    layout: 'centered',
   },
 } satisfies Meta<typeof Menu>
 

package/src/__actions__/Menu/v2/index.ts

@@ -1,6 +1,6 @@
-export * from "../v1/Menu"
-export * from "../v1/subcomponents/MenuList"
-export * from "../v1/subcomponents/MenuDropdown"
-export * from "../v1/subcomponents/MenuItem"
-export * from "../v1/subcomponents/MenuHeading"
-export * from "../v1/subcomponents/StatelessMenu"
+export * from '../v1/Menu'
+export * from '../v1/subcomponents/MenuList'
+export * from '../v1/subcomponents/MenuDropdown'
+export * from '../v1/subcomponents/MenuItem'
+export * from '../v1/subcomponents/MenuHeading'
+export * from '../v1/subcomponents/StatelessMenu'

package/src/__actions__/Menu/v3/Menu.module.css

@@ -25,7 +25,7 @@
     width: 100%;
     height: 1px;
     background-color: var(--border-solid-border-color);
-    content: "";
+    content: '';
     display: block;
     margin-block: var(--spacing-6);
   }

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

@@ -1,17 +1,11 @@
-import React, { forwardRef } from "react"
-import {
-  Menu as RACMenu,
-  MenuProps as RACMenuProps,
-} from "react-aria-components"
-import { mergeClassNames } from "~components/utils/mergeClassNames"
-import styles from "./Menu.module.css"
+import React, { forwardRef } from 'react'
+import { Menu as RACMenu, MenuProps as RACMenuProps } from 'react-aria-components'
+import { mergeClassNames } from '~components/utils/mergeClassNames'
+import styles from './Menu.module.css'
 
 export type MenuProps = Omit<
   RACMenuProps<HTMLDivElement>,
-  | "selectionMode"
-  | "disallowEmptySelection"
-  | "selectedKeys"
-  | "defaultSelectedKeys"
+  'selectionMode' | 'disallowEmptySelection' | 'selectedKeys' | 'defaultSelectedKeys'
 >
 
 /**
@@ -19,10 +13,8 @@ export type MenuProps = Omit<
  */
 export const Menu = forwardRef<HTMLDivElement, MenuProps>(
   ({ className, ...props }, ref): JSX.Element => (
-    <RACMenu
-      className={mergeClassNames(styles.menu, className)}
-      ref={ref}
-      {...props}
-    />
-  )
+    <RACMenu className={mergeClassNames(styles.menu, className)} ref={ref} {...props} />
+  ),
 )
+
+Menu.displayName = 'Menu'