@kaizen/components 1.68.6 → 1.68.7

package/src/__future__/Select/subcomponents/Option/Option.tsx

@@ -1,16 +1,16 @@
-import React, { HTMLAttributes } from "react"
-import { FocusableElement } from "@react-types/shared"
-import classnames from "classnames"
-import { mergeProps, useFocusRing, useOption } from "react-aria"
-import { Icon } from "~components/__future__/Icon"
-import { OverrideClassName } from "~components/types/OverrideClassName"
-import { useSelectContext } from "../../context"
-import { SelectOption, SelectOptionNode } from "../../types"
-import styles from "./Option.module.scss"
+import React, { HTMLAttributes } from 'react'
+import { FocusableElement } from '@react-types/shared'
+import classnames from 'classnames'
+import { mergeProps, useFocusRing, useOption } from 'react-aria'
+import { Icon } from '~components/__future__/Icon'
+import { OverrideClassName } from '~components/types/OverrideClassName'
+import { useSelectContext } from '../../context'
+import { SelectOption, SelectOptionNode } from '../../types'
+import styles from './Option.module.scss'
 
 export type OptionProps<Option extends SelectOption = SelectOption> = {
   item: SelectOptionNode<Option>
-} & OverrideClassName<Omit<HTMLAttributes<HTMLLIElement>, "children">>
+} & OverrideClassName<Omit<HTMLAttributes<HTMLLIElement>, 'children'>>
 
 export const Option = <Option extends SelectOption = SelectOption>({
   item,
@@ -19,11 +19,7 @@ export const Option = <Option extends SelectOption = SelectOption>({
 }: OptionProps<Option>): JSX.Element => {
   const { state } = useSelectContext<Option>()
   const ref = React.useRef<HTMLLIElement>(null)
-  const { optionProps, isSelected, isDisabled } = useOption(
-    { key: item.key },
-    state,
-    ref
-  )
+  const { optionProps, isSelected, isDisabled } = useOption({ key: item.key }, state, ref)
 
   const { onPointerUp, ...restOptionProps } = optionProps
 
@@ -33,7 +29,7 @@ export const Option = <Option extends SelectOption = SelectOption>({
     <li
       {...mergeProps(restOptionProps, focusProps, props, {
         onPointerUp: (e: React.PointerEvent<FocusableElement>) => {
-          if (e.pointerType === "touch") {
+          if (e.pointerType === 'touch') {
             // On touch devices, the listbox closes too quickly so below elements will trigger their pointer events.
             // Slow it down a bit to prevent the appearance of propagation.
             setTimeout(() => state.setSelectedKey(item.key), 250)
@@ -48,18 +44,16 @@ export const Option = <Option extends SelectOption = SelectOption>({
         isSelected && styles.isSelected,
         isFocusVisible && styles.isFocusVisible,
         isDisabled && styles.disabled,
-        classNameOverride
+        classNameOverride,
       )}
       aria-label={item.textValue}
     >
       {item.rendered}
-      <span
-        className={classnames(styles.icon, isSelected && styles.isSelected)}
-      >
+      <span className={classnames(styles.icon, isSelected && styles.isSelected)}>
         {isSelected && <Icon name="check" isPresentational />}
       </span>
     </li>
   )
 }
 
-Option.displayName = "Option"
+Option.displayName = 'Option'

package/src/__future__/Select/subcomponents/Option/index.ts

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

package/src/__future__/Select/subcomponents/Overlay/Overlay.tsx

@@ -1,9 +1,9 @@
-import React, { HTMLAttributes } from "react"
-import { FocusScope } from "@react-aria/focus"
-import { useOverlay, DismissButton } from "@react-aria/overlays"
-import { OverrideClassName } from "~components/types/OverrideClassName"
-import { useSelectContext } from "../../context"
-import { SelectOption } from "../../types"
+import React, { HTMLAttributes } from 'react'
+import { FocusScope } from '@react-aria/focus'
+import { useOverlay, DismissButton } from '@react-aria/overlays'
+import { OverrideClassName } from '~components/types/OverrideClassName'
+import { useSelectContext } from '../../context'
+import { SelectOption } from '../../types'
 
 export type OverlayProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
   children: React.ReactNode
@@ -21,7 +21,7 @@ export const Overlay = <Option extends SelectOption>({
   const overlayRef = React.useRef<HTMLDivElement>(null)
   const { overlayProps } = useOverlay(
     { isDismissable: true, isOpen: state.isOpen, onClose: state.close },
-    overlayRef
+    overlayRef,
   )
 
   // Wrap in <FocusScope> so that focus is restored back to the trigger when the menu is closed
@@ -29,12 +29,7 @@ export const Overlay = <Option extends SelectOption>({
   // In addition, add hidden <DismissButton> components at the start and end of the list
   // to allow screen reader users to dismiss the popup easily.
   return (
-    <div
-      ref={overlayRef}
-      className={classNameOverride}
-      {...overlayProps}
-      {...restProps}
-    >
+    <div ref={overlayRef} className={classNameOverride} {...overlayProps} {...restProps}>
       {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
       <FocusScope autoFocus={false} restoreFocus>
         <DismissButton onDismiss={state.close} />
@@ -45,4 +40,4 @@ export const Overlay = <Option extends SelectOption>({
   )
 }
 
-Overlay.displayName = "Overlay"
+Overlay.displayName = 'Overlay'

package/src/__future__/Select/subcomponents/Overlay/index.ts

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

package/src/__future__/Select/subcomponents/SectionDivider/SectionDivider.module.scss

@@ -1,4 +1,4 @@
-@import "~@kaizen/design-tokens/sass/spacing";
+@import '~@kaizen/design-tokens/sass/spacing';
 
 .divider {
   margin: $spacing-8 0;

package/src/__future__/Select/subcomponents/SectionDivider/SectionDivider.tsx

@@ -1,9 +1,9 @@
-import React from "react"
-import { Divider } from "~components/Divider"
-import styles from "./SectionDivider.module.scss"
+import React from 'react'
+import { Divider } from '~components/Divider'
+import styles from './SectionDivider.module.scss'
 
 export const SectionDivider = (): JSX.Element => (
   <Divider classNameOverride={styles.divider} variant="canvas" />
 )
 
-SectionDivider.displayName = "SectionDivider"
+SectionDivider.displayName = 'SectionDivider'

package/src/__future__/Select/subcomponents/SectionDivider/index.ts

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

package/src/__future__/Select/subcomponents/SelectPopoverContents/SelectPopoverContents.module.scss

@@ -1,4 +1,4 @@
-@import "~@kaizen/design-tokens/sass/spacing";
+@import '~@kaizen/design-tokens/sass/spacing';
 
 .selectPopoverContents {
   padding: $spacing-12;

package/src/__future__/Select/subcomponents/SelectPopoverContents/SelectPopoverContents.tsx

@@ -1,14 +1,14 @@
-import React from "react"
-import { AriaListBoxOptions } from "@react-aria/listbox"
-import { useSelectContext } from "../../context"
-import { SelectOption, SelectItem, SelectItemNode } from "../../types"
-import { ListBox } from "../ListBox"
-import { ListItems } from "../ListItems"
-import { Overlay } from "../Overlay"
-import styles from "./SelectPopoverContents.module.scss"
+import React from 'react'
+import { AriaListBoxOptions } from '@react-aria/listbox'
+import { useSelectContext } from '../../context'
+import { SelectOption, SelectItem, SelectItemNode } from '../../types'
+import { ListBox } from '../ListBox'
+import { ListItems } from '../ListItems'
+import { Overlay } from '../Overlay'
+import styles from './SelectPopoverContents.module.scss'
 
 export type SelectPopoverContentsProps<Option extends SelectOption> = {
-  children?: (args: { items: Array<SelectItemNode<Option>> }) => React.ReactNode
+  children?: (args: { items: SelectItemNode<Option>[] }) => React.ReactNode
   menuProps: AriaListBoxOptions<SelectItem<Option>>
 }
 
@@ -22,23 +22,17 @@ export const SelectPopoverContents = <Option extends SelectOption>({
   // which we have used a util to ensure the following structure
   // - SelectOptionGroup => Section
   // - Option => Item
-  const itemNodes = Array.from(state.collection) as Array<
-    SelectItemNode<Option>
-  >
+  const itemNodes = Array.from(state.collection) as SelectItemNode<Option>[]
 
   return (
     <div className={styles.selectPopoverContents}>
       <Overlay<Option>>
         <ListBox<Option> menuProps={menuProps}>
-          {children ? (
-            children({ items: itemNodes })
-          ) : (
-            <ListItems<Option> items={itemNodes} />
-          )}
+          {children ? children({ items: itemNodes }) : <ListItems<Option> items={itemNodes} />}
         </ListBox>
       </Overlay>
     </div>
   )
 }
 
-SelectPopoverContents.displayName = "Select.PopoverContents"
+SelectPopoverContents.displayName = 'Select.PopoverContents'

package/src/__future__/Select/subcomponents/SelectPopoverContents/index.ts

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

package/src/__future__/Select/subcomponents/SelectToggle/SelectToggle.module.scss

@@ -1,8 +1,8 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/typography";
-@import "../../../../../styles/utils/button-reset";
+@import '~@kaizen/design-tokens/sass/color';
+@import '~@kaizen/design-tokens/sass/border';
+@import '~@kaizen/design-tokens/sass/spacing';
+@import '~@kaizen/design-tokens/sass/typography';
+@import '../../../../../styles/utils/button-reset';
 
 .iconWrapper {
   line-height: 1;
@@ -61,11 +61,10 @@
     &::after {
       $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
 
-      content: "";
+      content: '';
       position: absolute;
       background: transparent;
-      border: $border-focus-ring-border-width $border-focus-ring-border-style
-        $color-blue-500;
+      border: $border-focus-ring-border-width $border-focus-ring-border-style $color-blue-500;
       border-radius: $border-focus-ring-border-radius;
       inset: calc(-1 * #{$focus-ring-offset});
     }
@@ -81,8 +80,7 @@
 }
 
 .caution {
-  border: $border-solid-border-width $border-solid-border-style
-    $color-yellow-600;
+  border: $border-solid-border-width $border-solid-border-style $color-yellow-600;
 }
 
 .disabled {
@@ -93,8 +91,7 @@
 }
 
 .reversed {
-  border: $border-solid-border-width $border-solid-border-style
-    rgba($color-white-rgb, 0.8);
+  border: $border-solid-border-width $border-solid-border-style rgba($color-white-rgb, 0.8);
   background-color: transparent;
   color: $color-white;
 

package/src/__future__/Select/subcomponents/SelectToggle/SelectToggle.tsx

@@ -1,10 +1,10 @@
-import React, { HTMLAttributes } from "react"
-import { DOMAttributes, FocusableElement } from "@react-types/shared"
-import classnames from "classnames"
-import { Label } from "~components/Label"
-import { Icon } from "~components/__future__/Icon"
-import { OverrideClassName } from "~components/types/OverrideClassName"
-import styles from "./SelectToggle.module.scss"
+import React, { HTMLAttributes } from 'react'
+import { DOMAttributes, FocusableElement } from '@react-types/shared'
+import classnames from 'classnames'
+import { Label } from '~components/Label'
+import { Icon } from '~components/__future__/Icon'
+import { OverrideClassName } from '~components/types/OverrideClassName'
+import styles from './SelectToggle.module.scss'
 
 export type SelectToggleProps = {
   label: React.ReactNode
@@ -19,16 +19,13 @@ export type SelectToggleProps = {
    */
   placeholder?: string
   /** Updates the styling of the validation. */
-  status?: "error" | "caution"
+  status?: 'error' | 'caution'
   isDisabled?: boolean
   /** Use the `reversed` styles. */
   isReversed?: boolean
 } & OverrideClassName<HTMLAttributes<HTMLButtonElement>>
 
-export const SelectToggle = React.forwardRef<
-  HTMLButtonElement,
-  SelectToggleProps
->(
+export const SelectToggle = React.forwardRef<HTMLButtonElement, SelectToggleProps>(
   (
     {
       label,
@@ -36,14 +33,14 @@ export const SelectToggle = React.forwardRef<
       value,
       valueProps,
       isOpen,
-      placeholder = "Select",
+      placeholder = 'Select',
       status,
       isDisabled,
       isReversed,
       classNameOverride,
       ...restProps
     },
-    ref
+    ref,
   ) => (
     <div>
       <Label {...labelProps} reversed={isReversed} disabled={isDisabled}>
@@ -59,24 +56,24 @@ export const SelectToggle = React.forwardRef<
         className={classnames(
           styles.selectToggle,
           (value === null || value === undefined) && styles.placeholder,
-          status === "error" && styles.error,
-          status === "caution" && styles.caution,
+          status === 'error' && styles.error,
+          status === 'caution' && styles.caution,
           isDisabled && styles.disabled,
           isReversed && styles.reversed,
-          classNameOverride
+          classNameOverride,
         )}
       >
         <span {...valueProps} className={styles.value}>
           {value ?? placeholder}
         </span>
         <Icon
-          name={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}
+          name={isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}
           isPresentational
           className={styles.icon}
         />
       </button>
     </div>
-  )
+  ),
 )
 
-SelectToggle.displayName = "SelectToggle"
+SelectToggle.displayName = 'SelectToggle'

package/src/__future__/Select/subcomponents/SelectToggle/index.ts

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

package/src/__future__/Select/subcomponents/index.ts

@@ -1,9 +1,9 @@
-export * from "./ListBox"
-export * from "./ListBoxSection"
-export * from "./ListItem"
-export * from "./ListItems"
-export * from "./Option"
-export * from "./Overlay"
-export * from "./SectionDivider"
-export * from "./SelectPopoverContents"
-export * from "./SelectToggle"
+export * from './ListBox'
+export * from './ListBoxSection'
+export * from './ListItem'
+export * from './ListItems'
+export * from './Option'
+export * from './Overlay'
+export * from './SectionDivider'
+export * from './SelectPopoverContents'
+export * from './SelectToggle'

package/src/__future__/Select/types.ts

@@ -1,4 +1,4 @@
-import { Node, Key } from "@react-types/shared"
+import { Node, Key } from '@react-types/shared'
 
 export type SelectOption = {
   label: string
@@ -16,18 +16,19 @@ export type SelectItem<Option extends SelectOption = SelectOption> =
   | Option
   | SelectOptionGroup<Option>
 
-export type SelectOptionNode<Option extends SelectOption = SelectOption> =
-  Node<Option> & {
-    type: "item"
-    hasChildNodes: false
-  }
+export type SelectOptionNode<Option extends SelectOption = SelectOption> = Node<Option> & {
+  type: 'item'
+  hasChildNodes: false
+}
 
-export type SelectOptionGroupNode<Option extends SelectOption = SelectOption> =
-  Omit<Node<SelectOptionGroup<Option>>, "childNodes"> & {
-    type: "section"
-    hasChildNodes: true
-    childNodes: Array<SelectOptionNode<Option>>
-  }
+export type SelectOptionGroupNode<Option extends SelectOption = SelectOption> = Omit<
+  Node<SelectOptionGroup<Option>>,
+  'childNodes'
+> & {
+  type: 'section'
+  hasChildNodes: true
+  childNodes: SelectOptionNode<Option>[]
+}
 
 export type SelectItemNode<Option extends SelectOption = SelectOption> =
   | SelectOptionNode<Option>

package/src/__future__/Select/utils/getDisabledKeysFromItems.ts

@@ -1,17 +1,15 @@
-import { Key } from "@react-types/shared"
-import { SelectItem, SelectOption } from "../types"
-import { isSelectOptionGroup } from "./isSelectOptionGroup"
+import { Key } from '@react-types/shared'
+import { SelectItem, SelectOption } from '../types'
+import { isSelectOptionGroup } from './isSelectOptionGroup'
 
-export const getDisabledKeysFromItems = <
-  Option extends SelectOption = SelectOption,
->(
-  items: Array<SelectItem<Option>>
+export const getDisabledKeysFromItems = <Option extends SelectOption = SelectOption>(
+  items: SelectItem<Option>[],
 ): Key[] =>
   items.reduce((acc: Key[], item) => {
     if (isSelectOptionGroup(item)) {
       const keys = Array.from(item.options)
-        .filter(groupItem => groupItem.disabled)
-        .map(disabledItems => disabledItems.value)
+        .filter((groupItem) => groupItem.disabled)
+        .map((disabledItems) => disabledItems.value)
       return [...acc, ...keys]
     }
 

package/src/__future__/Select/utils/isSelectOptionGroup.ts

@@ -1,6 +1,6 @@
-import { SelectItem, SelectOption, SelectOptionGroup } from "../types"
+import { SelectItem, SelectOption, SelectOptionGroup } from '../types'
 
 export const isSelectOptionGroup = <Option extends SelectOption>(
-  item: SelectItem
+  item: SelectItem,
 ): item is SelectOptionGroup<Option> =>
-  item.hasOwnProperty("options") && Array.isArray(item.options)
+  Object.prototype.hasOwnProperty.call(item, 'options') && Array.isArray(item.options)

package/src/__future__/Select/utils/transformSelectItemToCollectionElement.tsx

@@ -1,13 +1,11 @@
-import React from "react"
-import { Item, Section } from "@react-stately/collections"
-import { CollectionElement } from "@react-types/shared"
-import { SelectItem, SelectOption } from "../types"
-import { isSelectOptionGroup } from "./isSelectOptionGroup"
+import React from 'react'
+import { Item, Section } from '@react-stately/collections'
+import { CollectionElement } from '@react-types/shared'
+import { SelectItem, SelectOption } from '../types'
+import { isSelectOptionGroup } from './isSelectOptionGroup'
 
-export const transformSelectItemToCollectionElement = <
-  Option extends SelectOption,
->(
-  item: SelectItem<Option>
+export const transformSelectItemToCollectionElement = <Option extends SelectOption>(
+  item: SelectItem<Option>,
 ): CollectionElement<SelectItem<Option>> =>
   isSelectOptionGroup<Option>(item) ? (
     <Section<Option> key={item.label} title={item.label} items={item.options}>

package/src/__future__/Tabs/Tabs.tsx

@@ -1,11 +1,7 @@
-import React from "react"
-import {
-  Tabs as RACTabs,
-  TabsProps as RACTabsProps,
-  Key as RACKey,
-} from "react-aria-components"
+import React from 'react'
+import { Tabs as RACTabs, TabsProps as RACTabsProps, Key as RACKey } from 'react-aria-components'
 
-export type TabsProps = Omit<RACTabsProps, "orientation">
+export type TabsProps = Omit<RACTabsProps, 'orientation'>
 export type Key = RACKey
 
 /**

package/src/__future__/Tabs/_docs/Tabs.stories.tsx

@@ -1,11 +1,11 @@
-import React, { useState } from "react"
-import { Meta, StoryObj } from "@storybook/react"
-import { Text } from "~components/Text"
-import { Button } from "~components/__actions__/v2"
-import { Tab, TabList, TabPanel, Tabs, Key } from "../index"
+import React, { useState } from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { Text } from '~components/Text'
+import { Button } from '~components/__actions__/v2'
+import { Tab, TabList, TabPanel, Tabs, Key } from '../index'
 
 const meta = {
-  title: "Components/Tabs/Tabs (Future)",
+  title: 'Components/Tabs/Tabs (Future)',
   component: Tabs,
   args: {
     children: (
@@ -43,31 +43,24 @@ export const Playground: Story = {
     chromatic: { disable: false },
     docs: {
       canvas: {
-        sourceState: "shown",
+        sourceState: 'shown',
       },
     },
   },
   args: {
-    defaultSelectedKey: "one",
-    // eslint-disable-next-line no-console
-    onSelectionChange: (key): void => console.log("Tab changed to ", key),
+    defaultSelectedKey: 'one',
+
+    onSelectionChange: (key): void => console.log('Tab changed to ', key),
   },
 }
 
 export const Controlled: Story = {
-  render: args => {
+  render: (args) => {
     const [selectedKey, setSelectedKey] = useState<Key>(0)
     return (
       <>
-        <Tabs
-          {...args}
-          selectedKey={selectedKey}
-          onSelectionChange={setSelectedKey}
-        />
-        <Button
-          label="Switch to tab 2"
-          onClick={(): void => setSelectedKey("two")}
-        />
+        <Tabs {...args} selectedKey={selectedKey} onSelectionChange={setSelectedKey} />
+        <Button label="Switch to tab 2" onClick={(): void => setSelectedKey('two')} />
       </>
     )
   },

package/src/__future__/Tabs/index.ts

@@ -1,2 +1,2 @@
-export * from "./Tabs"
-export * from "./subcomponents"
+export * from './Tabs'
+export * from './subcomponents'

package/src/__future__/Tabs/subcomponents/Tab/Tab.module.css

@@ -46,7 +46,7 @@
   color: var(--color-blue-500);
 
   &::before {
-    content: "";
+    content: '';
     display: block;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
@@ -71,7 +71,7 @@
     border: 2px solid transparent;
 
     &:focus-visible::after {
-      content: "";
+      content: '';
       position: absolute;
       background: transparent;
       border-radius: var(--border-focus-ring-border-radius);
@@ -84,7 +84,7 @@
 
   .tab[data-selected]::before {
     /* High contrast also doesn't see the pseudo element created to show the active tab. */
-    content: "";
+    content: '';
     position: absolute;
     left: 0;
     right: 0;

package/src/__future__/Tabs/subcomponents/Tab/Tab.tsx

@@ -1,8 +1,8 @@
-import React from "react"
-import classnames from "classnames"
-import { Tab as RACTab, TabProps as RACTabProps } from "react-aria-components"
-import { Badge } from "~components/Badge"
-import styles from "./Tab.module.css"
+import React from 'react'
+import classnames from 'classnames'
+import { Tab as RACTab, TabProps as RACTabProps } from 'react-aria-components'
+import { Badge } from '~components/Badge'
+import styles from './Tab.module.css'
 
 export type TabProps = {
   /**
@@ -13,13 +13,7 @@ export type TabProps = {
 } & Omit<
   RACTabProps,
   // omitting link functionality because it goes against WAI ARIA standards https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
-  | "href"
-  | "hrefLang"
-  | "target"
-  | "rel"
-  | "download"
-  | "ping"
-  | "referrerPolicy"
+  'href' | 'hrefLang' | 'target' | 'rel' | 'download' | 'ping' | 'referrerPolicy'
 >
 
 /**
@@ -40,13 +34,7 @@ export const Tab = (props: TabProps): JSX.Element => {
           {children}
           {badge && (
             <span className={styles.badge}>
-              <Badge
-                variant={
-                  isSelected || isFocusVisible || isHovered
-                    ? "active"
-                    : "default"
-                }
-              >
+              <Badge variant={isSelected || isFocusVisible || isHovered ? 'active' : 'default'}>
                 {badge}
               </Badge>
             </span>

package/src/__future__/Tabs/subcomponents/Tab/index.ts

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