@kaizen/components 1.68.6 → 1.68.7

package/src/DateRangePicker/DateRangePicker.spec.tsx

@@ -1,21 +1,19 @@
-import React, { useEffect, useState } from "react"
-import { render, screen, waitFor } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-import { DateRange } from "react-day-picker"
-import { formatDateRangeValue } from "./utils/formatDateRangeValue"
-import { DateRangePicker, DateRangePickerProps } from "./index"
+import React, { useEffect, useState } from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { DateRange } from 'react-day-picker'
+import { formatDateRangeValue } from './utils/formatDateRangeValue'
+import { DateRangePicker, DateRangePickerProps } from './index'
 
 const user = userEvent.setup()
 
-const DateRangePickerWrapper = (
-  props: Partial<DateRangePickerProps>
-): JSX.Element => {
+const DateRangePickerWrapper = (props: Partial<DateRangePickerProps>): JSX.Element => {
   const [selectedDateRange, setSelectedDateRange] = useState<DateRange>({
     from: props.selectedDateRange?.from,
     to: props.selectedDateRange?.to,
   })
   const { value: propValue, ...restProps } = props
-  const [value, setValue] = useState(propValue || "")
+  const [value, setValue] = useState(propValue ?? '')
 
   const onDateRangeChange = (dateRange: DateRange): void => {
     setSelectedDateRange(dateRange)
@@ -32,44 +30,44 @@ const DateRangePickerWrapper = (
       labelText="Choose date"
       onChange={onDateRangeChange}
       value={value}
-      defaultMonth={new Date("2022-03-01")}
+      defaultMonth={new Date('2022-03-01')}
       selectedDateRange={selectedDateRange}
       {...restProps}
     />
   )
 }
 
-describe("<DateRangePicker />", () => {
-  it("renders DateRangePicker and shows/hides on button press", async () => {
+describe('<DateRangePicker />', () => {
+  it('renders DateRangePicker and shows/hides on button press', async () => {
     render(<DateRangePickerWrapper />)
 
-    expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
 
-    const button = screen.getByRole("button")
+    const button = screen.getByRole('button')
     await user.click(button)
 
     await waitFor(() => {
-      expect(screen.queryByRole("dialog")).toBeInTheDocument()
+      expect(screen.queryByRole('dialog')).toBeInTheDocument()
     })
   })
 
-  it("shows/hides on button focus and keydown enter", async () => {
+  it('shows/hides on button focus and keydown enter', async () => {
     render(<DateRangePickerWrapper />)
 
-    expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
 
-    const button = screen.getByRole("button")
+    const button = screen.getByRole('button')
     button.focus()
-    await user.keyboard("{enter}")
+    await user.keyboard('{enter}')
 
-    expect(screen.queryByRole("dialog")).toBeInTheDocument()
+    expect(screen.queryByRole('dialog')).toBeInTheDocument()
   })
 
-  it("has disabled attribute on button", () => {
+  it('has disabled attribute on button', () => {
     render(<DateRangePickerWrapper isDisabled />)
 
-    const button = screen.getByRole("button")
+    const button = screen.getByRole('button')
 
-    expect(button).toHaveAttribute("disabled")
+    expect(button).toHaveAttribute('disabled')
   })
 })

package/src/DateRangePicker/DateRangePicker.tsx

@@ -1,22 +1,18 @@
-import React, { RefObject, useId, useRef, useState } from "react"
-import cx from "classnames"
-import { enUS } from "date-fns/locale"
-import { DateRange, isMatch } from "react-day-picker"
-import { FocusOn } from "react-focus-on"
-import {
-  DisabledDayMatchers,
-  calculateDisabledDays,
-  isDisabledDate,
-} from "~components/Calendar"
-import { CalendarPopover } from "~components/Calendar/CalendarPopover"
+import React, { RefObject, useId, useRef, useState } from 'react'
+import cx from 'classnames'
+import { enUS } from 'date-fns/locale'
+import { DateRange, isMatch } from 'react-day-picker'
+import { FocusOn } from 'react-focus-on'
+import { DisabledDayMatchers, calculateDisabledDays, isDisabledDate } from '~components/Calendar'
+import { CalendarPopover } from '~components/Calendar/CalendarPopover'
 import {
   LegacyCalendarRange,
   LegacyCalendarRangeProps,
-} from "~components/Calendar/LegacyCalendarRange"
-import { Label } from "~components/Label"
-import { VisuallyHidden } from "~components/VisuallyHidden"
-import { Icon } from "~components/__future__/Icon"
-import styles from "./DateRangePicker.module.scss"
+} from '~components/Calendar/LegacyCalendarRange'
+import { Label } from '~components/Label'
+import { VisuallyHidden } from '~components/VisuallyHidden'
+import { Icon } from '~components/__future__/Icon'
+import styles from './DateRangePicker.module.scss'
 
 export type DateRangePickerProps = {
   id?: string
@@ -40,11 +36,11 @@ export type DateRangePickerProps = {
    * Accepts a DayOfWeek value to start the week on that day.
    * By default it adapts to the provided locale.
    */
-  weekStartsOn?: LegacyCalendarRangeProps["weekStartsOn"]
+  weekStartsOn?: LegacyCalendarRangeProps['weekStartsOn']
   /**
    * Accepts a date to display that month on first render.
    */
-  defaultMonth?: LegacyCalendarRangeProps["defaultMonth"]
+  defaultMonth?: LegacyCalendarRangeProps['defaultMonth']
   /**
    * Event passed from consumer to handle the date on change.
    */
@@ -57,7 +53,7 @@ export type DateRangePickerProps = {
  */
 export const DateRangePicker = ({
   id: propsId,
-  buttonRef = useRef<HTMLButtonElement>(null),
+  buttonRef,
   description: _description, // not used
   labelText,
   isDisabled = false,
@@ -75,6 +71,8 @@ export const DateRangePicker = ({
   onChange,
   ...inputProps
 }: DateRangePickerProps): JSX.Element => {
+  const fallbackRef = useRef<HTMLButtonElement>(null)
+  const ref = buttonRef ?? fallbackRef
   const reactId = useId()
   const id = propsId ?? reactId
 
@@ -95,8 +93,8 @@ export const DateRangePicker = ({
   }
 
   const handleReturnFocus = (): void => {
-    if (buttonRef.current) {
-      buttonRef.current.focus()
+    if (ref.current) {
+      ref.current.focus()
     }
   }
 
@@ -147,12 +145,7 @@ export const DateRangePicker = ({
   return (
     <div>
       <div ref={containerRef} className={classNameOverride}>
-        <Label
-          id={`${id}-input-label`}
-          disabled={isDisabled}
-          htmlFor={id}
-          labelText={labelText}
-        />
+        <Label id={`${id}-input-label`} disabled={isDisabled} htmlFor={id} labelText={labelText} />
         <button
           type="button"
           id={id}
@@ -160,19 +153,15 @@ export const DateRangePicker = ({
             [styles.disabled]: isDisabled,
           })}
           disabled={isDisabled}
-          ref={buttonRef}
+          ref={ref}
           onClick={handleOpenClose}
-          aria-label={
-            selectedDateRange?.from ? `Change date: ${value}` : "Choose date"
-          }
+          aria-label={selectedDateRange?.from ? `Change date: ${value}` : 'Choose date'}
           {...inputProps}
         >
           <div className={styles.startIconAdornment}>
             <Icon name="today" isPresentational isFilled />
           </div>
-          <span className={styles.value}>
-            {selectedDateRange?.from ? value : undefined}
-          </span>
+          <span className={styles.value}>{selectedDateRange?.from ? value : undefined}</span>
         </button>
       </div>
 
@@ -206,4 +195,4 @@ export const DateRangePicker = ({
   )
 }
 
-DateRangePicker.displayName = "DateRangePicker"
+DateRangePicker.displayName = 'DateRangePicker'

package/src/DateRangePicker/_docs/DateRangePicker.stickersheet.stories.tsx

@@ -1,37 +1,28 @@
-import React, { useEffect, useState } from "react"
-import { Meta } from "@storybook/react"
-import { enAU } from "date-fns/locale"
-import { DateRange } from "react-day-picker"
+import React, { useEffect, useState } from 'react'
+import { Meta } from '@storybook/react'
+import { enAU } from 'date-fns/locale'
+import { DateRange } from 'react-day-picker'
 import {
   LegacyCalendarRange,
   LegacyCalendarRangeProps,
-} from "~components/Calendar/LegacyCalendarRange"
-import {
-  StickerSheet,
-  StickerSheetStory,
-} from "~storybook/components/StickerSheet"
-import {
-  DateRangePicker,
-  DateRangePickerProps,
-  formatDateRangeValue,
-} from "../index"
+} from '~components/Calendar/LegacyCalendarRange'
+import { StickerSheet, StickerSheetStory } from '~storybook/components/StickerSheet'
+import { DateRangePicker, DateRangePickerProps, formatDateRangeValue } from '../index'
 
 export default {
-  title: "Components/Date controls/DateRangePicker",
+  title: 'Components/Date controls/DateRangePicker',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },
   },
 } satisfies Meta
 
-const DateRangePickerTemplate = (
-  props: Partial<DateRangePickerProps>
-): JSX.Element => {
+const DateRangePickerTemplate = (props: Partial<DateRangePickerProps>): JSX.Element => {
   const [selectedDateRange, setSelectedDateRange] = useState<DateRange>({
     from: undefined,
     to: undefined,
   })
-  const [value, setValue] = useState("")
+  const [value, setValue] = useState('')
 
   const onDateRangeChange = (dateRange: DateRange): void => {
     setSelectedDateRange(dateRange)
@@ -53,9 +44,7 @@ const DateRangePickerTemplate = (
   )
 }
 
-const LegacyCalendarRangeTemplate = (
-  props: Partial<LegacyCalendarRangeProps>
-): JSX.Element => {
+const LegacyCalendarRangeTemplate = (props: Partial<LegacyCalendarRangeProps>): JSX.Element => {
   const selectedDateRange = {
     from: undefined,
     to: undefined,
@@ -81,7 +70,7 @@ const selectedDateRange = {
 const StickerSheetTemplate: StickerSheetStory = {
   render: () => (
     <>
-      <StickerSheet headers={["Default", "Selected Value", "Disabled"]}>
+      <StickerSheet headers={['Default', 'Selected Value', 'Disabled']}>
         <StickerSheet.Row header="Date Range Picker Input">
           <StickerSheet.Cell className="w-[250px]">
             <DateRangePickerTemplate />
@@ -98,17 +87,11 @@ const StickerSheetTemplate: StickerSheetStory = {
         </StickerSheet.Row>
       </StickerSheet>
 
-      <StickerSheet
-        headers={["Selected Range Dates", "Disabled Dates"]}
-        className="mt-32"
-      >
+      <StickerSheet headers={['Selected Range Dates', 'Disabled Dates']} className="mt-32">
         <StickerSheet.Row header="Date Range Calendar (Legacy)">
           <LegacyCalendarRangeTemplate selectedRange={selectedDateRange} />
           <LegacyCalendarRangeTemplate
-            disabledDays={[
-              new Date(2022, 1, 15),
-              { after: new Date(2022, 1, 17) },
-            ]}
+            disabledDays={[new Date(2022, 1, 15), { after: new Date(2022, 1, 17) }]}
           />
         </StickerSheet.Row>
       </StickerSheet>
@@ -118,11 +101,11 @@ const StickerSheetTemplate: StickerSheetStory = {
 
 export const StickerSheetDefault: StickerSheetStory = {
   ...StickerSheetTemplate,
-  name: "Sticker Sheet (Default)",
+  name: 'Sticker Sheet (Default)',
 }
 
 export const StickerSheetRTL: StickerSheetStory = {
   ...StickerSheetTemplate,
-  name: "Sticker Sheet (RTL)",
-  parameters: { textDirection: "rtl" },
+  name: 'Sticker Sheet (RTL)',
+  parameters: { textDirection: 'rtl' },
 }

package/src/DateRangePicker/_docs/DateRangePicker.stories.tsx

@@ -1,14 +1,14 @@
-import React, { useEffect, useState } from "react"
-import { Meta, StoryObj } from "@storybook/react"
-import { userEvent, within, expect, fn } from "@storybook/test"
-import { DateRange } from "react-day-picker"
-import { DateRangePicker, formatDateRangeValue } from "../index"
+import React, { useEffect, useState } from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { userEvent, within, expect, fn } from '@storybook/test'
+import { DateRange } from 'react-day-picker'
+import { DateRangePicker, formatDateRangeValue } from '../index'
 
 const meta = {
-  title: "Components/Date controls/DateRangePicker",
+  title: 'Components/Date controls/DateRangePicker',
   component: DateRangePicker,
   args: {
-    labelText: "Label",
+    labelText: 'Label',
     onChange: fn(),
   },
 } satisfies Meta<typeof DateRangePicker>
@@ -18,7 +18,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 const DateRangePickerTemplate: Story = {
-  render: args => {
+  render: (args) => {
     const [selectedDateRange, setSelectedDateRange] = useState<DateRange>({
       from: args?.selectedDateRange?.from,
       to: args?.selectedDateRange?.to,
@@ -53,7 +53,7 @@ export const Playground: Story = {
   parameters: {
     docs: {
       canvas: {
-        sourceState: "shown",
+        sourceState: 'shown',
       },
     },
   },
@@ -66,27 +66,27 @@ const selectedDateRange = {
 
 export const AboveIfAvailable: Story = {
   ...DateRangePickerTemplate,
-  name: "Limited viewport autoplacement above",
+  name: 'Limited viewport autoplacement above',
   args: {
-    labelText: "Calendar with space above",
+    labelText: 'Calendar with space above',
     selectedDateRange,
   },
   parameters: {
     viewport: {
       viewports: {
         LimitedViewportAutoPlace: {
-          name: "Limited vertical space",
+          name: 'Limited vertical space',
           styles: {
-            width: "1024px",
-            height: "500px",
+            width: '1024px',
+            height: '500px',
           },
         },
       },
-      defaultViewport: "LimitedViewportAutoPlace",
+      defaultViewport: 'LimitedViewportAutoPlace',
     },
   },
   decorators: [
-    Story => (
+    (Story) => (
       <div className="mt-[350px]">
         <Story />
       </div>
@@ -94,34 +94,34 @@ export const AboveIfAvailable: Story = {
   ],
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
-    await userEvent.click(canvas.getByRole("button", { name: /Change date:/ }))
-    await expect(canvas.getByRole("dialog")).toBeInTheDocument()
+    await userEvent.click(canvas.getByRole('button', { name: /Change date:/ }))
+    await expect(canvas.getByRole('dialog')).toBeInTheDocument()
   },
 }
 
 export const LimitedViewportHeight: Story = {
   ...DateRangePickerTemplate,
-  name: "Limited viewport height",
+  name: 'Limited viewport height',
   args: {
-    labelText: "Calendar with reduced space below",
+    labelText: 'Calendar with reduced space below',
     selectedDateRange,
   },
   parameters: {
     viewport: {
       viewports: {
         LimitedViewportHeight: {
-          name: "Limited vertical space",
+          name: 'Limited vertical space',
           styles: {
-            width: "1024px",
-            height: "300px",
+            width: '1024px',
+            height: '300px',
           },
         },
       },
-      defaultViewport: "LimitedViewportHeight",
+      defaultViewport: 'LimitedViewportHeight',
     },
   },
   decorators: [
-    Story => (
+    (Story) => (
       <div className="mb-[150px]">
         <Story />
       </div>
@@ -129,20 +129,20 @@ export const LimitedViewportHeight: Story = {
   ],
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
-    await userEvent.click(canvas.getByRole("button", { name: /Change date:/ }))
-    await expect(canvas.getByRole("dialog")).toBeInTheDocument()
+    await userEvent.click(canvas.getByRole('button', { name: /Change date:/ }))
+    await expect(canvas.getByRole('dialog')).toBeInTheDocument()
   },
 }
 
 export const FullViewportHeight: Story = {
   ...DateRangePickerTemplate,
-  name: "Full viewport height",
+  name: 'Full viewport height',
   args: {
-    labelText: "Calendar with full space below",
+    labelText: 'Calendar with full space below',
     selectedDateRange,
   },
   decorators: [
-    Story => (
+    (Story) => (
       <div className="mb-[350px]">
         <Story />
       </div>
@@ -150,7 +150,7 @@ export const FullViewportHeight: Story = {
   ],
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
-    await userEvent.click(canvas.getByRole("button", { name: /Change date:/ }))
-    await expect(canvas.getByRole("dialog")).toBeInTheDocument()
+    await userEvent.click(canvas.getByRole('button', { name: /Change date:/ }))
+    await expect(canvas.getByRole('dialog')).toBeInTheDocument()
   },
 }

package/src/DateRangePicker/index.ts

@@ -1,2 +1,2 @@
-export * from "./DateRangePicker"
-export * from "./utils/formatDateRangeValue"
+export * from './DateRangePicker'
+export * from './utils/formatDateRangeValue'

package/src/DateRangePicker/utils/formatDateRangeValue.spec.ts

@@ -1,35 +1,31 @@
-import { DateRange } from "~components/Calendar"
-import { formatDateRangeValue } from "./formatDateRangeValue"
+import { DateRange } from '~components/Calendar'
+import { formatDateRangeValue } from './formatDateRangeValue'
 
-describe("formatDateRangeValue", () => {
-  it("displays a from date by itself", () => {
+describe('formatDateRangeValue', () => {
+  it('displays a from date by itself', () => {
     const dateRangeFromOnly: DateRange = {
       from: new Date(2022, 1, 1),
       to: undefined,
     }
 
-    expect(formatDateRangeValue(dateRangeFromOnly)).toEqual("Feb 1, 2022")
+    expect(formatDateRangeValue(dateRangeFromOnly)).toEqual('Feb 1, 2022')
   })
 
-  it("displays a from date by itself", () => {
+  it('displays the year once when both dates share the same year', () => {
     const dateRangeBothValues: DateRange = {
       from: new Date(2022, 1, 1),
       to: new Date(2022, 2, 2),
     }
 
-    expect(formatDateRangeValue(dateRangeBothValues)).toEqual(
-      "Feb 1 – Mar 2, 2022"
-    )
+    expect(formatDateRangeValue(dateRangeBothValues)).toEqual('Feb 1 – Mar 2, 2022')
   })
 
-  it("displays a from date by itself", () => {
+  it('displays the year for both dates when they are not the same', () => {
     const dateRangeOvertoNewYear: DateRange = {
       from: new Date(2022, 1, 1),
       to: new Date(2023, 1, 1),
     }
 
-    expect(formatDateRangeValue(dateRangeOvertoNewYear)).toEqual(
-      "Feb 1, 2022 – Feb 1, 2023"
-    )
+    expect(formatDateRangeValue(dateRangeOvertoNewYear)).toEqual('Feb 1, 2022 – Feb 1, 2023')
   })
 })

package/src/DateRangePicker/utils/formatDateRangeValue.ts

@@ -1,35 +1,29 @@
-import { DateRange } from "~components/Calendar"
+import { DateRange } from '~components/Calendar'
 
 const dateFormatOptions: Intl.DateTimeFormatOptions = {
-  month: "short",
-  year: "numeric",
-  day: "numeric",
+  month: 'short',
+  year: 'numeric',
+  day: 'numeric',
 }
 
 const dateWithoutYearFormatOptions: Intl.DateTimeFormatOptions = {
-  month: "short",
-  day: "numeric",
+  month: 'short',
+  day: 'numeric',
 }
 
 export const formatDateRangeValue = (dateRange: DateRange): string => {
   if (dateRange.to) {
-    const isSameYear =
-      dateRange.from?.getFullYear() === dateRange?.to?.getFullYear()
+    const isSameYear = dateRange.from?.getFullYear() === dateRange?.to?.getFullYear()
 
     const from = isSameYear
-      ? dateRange.from?.toLocaleDateString(
-          "en-US",
-          dateWithoutYearFormatOptions
-        )
-      : dateRange.from?.toLocaleDateString("en-US", dateFormatOptions)
+      ? dateRange.from?.toLocaleDateString('en-US', dateWithoutYearFormatOptions)
+      : dateRange.from?.toLocaleDateString('en-US', dateFormatOptions)
 
-    const to = dateRange.to.toLocaleDateString("en-US", dateFormatOptions)
+    const to = dateRange.to.toLocaleDateString('en-US', dateFormatOptions)
 
     return `${from} – ${to}`
   } else {
-    const from = dateRange.from
-      ? dateRange.from.toLocaleDateString("en-US", dateFormatOptions)
-      : ""
+    const from = dateRange.from ? dateRange.from.toLocaleDateString('en-US', dateFormatOptions) : ''
 
     return from
   }

package/src/Divider/Divider.module.scss

@@ -1,5 +1,5 @@
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/color";
+@import '~@kaizen/design-tokens/sass/border';
+@import '~@kaizen/design-tokens/sass/color';
 
 // Use different tokens with different opacities across the Zen and Heart themes, by assuming that when Zen is applied there won't be any CSS variables declared.
 

package/src/Divider/Divider.tsx

@@ -1,10 +1,10 @@
-import React, { HTMLAttributes } from "react"
-import classnames from "classnames"
-import { OverrideClassName } from "~components/types/OverrideClassName"
-import styles from "./Divider.module.scss"
+import React, { HTMLAttributes } from 'react'
+import classnames from 'classnames'
+import { OverrideClassName } from '~components/types/OverrideClassName'
+import styles from './Divider.module.scss'
 
 export type DividerProps = {
-  variant: "content" | "canvas" | "menuSeparator"
+  variant: 'content' | 'canvas' | 'menuSeparator'
   isReversed?: boolean
 } & OverrideClassName<HTMLAttributes<HTMLDivElement>>
 
@@ -24,10 +24,10 @@ export const Divider = ({
       styles.wrapper,
       classNameOverride,
       isReversed && styles.reversed,
-      styles[variant]
+      styles[variant],
     )}
     {...props}
   />
 )
 
-Divider.displayName = "Divider"
+Divider.displayName = 'Divider'

package/src/Divider/_docs/Divider.stickersheet.stories.tsx

@@ -1,13 +1,10 @@
-import React from "react"
-import { Meta } from "@storybook/react"
-import {
-  StickerSheet,
-  StickerSheetStory,
-} from "~storybook/components/StickerSheet"
-import { Divider } from "../index"
+import React from 'react'
+import { Meta } from '@storybook/react'
+import { StickerSheet, StickerSheetStory } from '~storybook/components/StickerSheet'
+import { Divider } from '../index'
 
 export default {
-  title: "Components/Divider",
+  title: 'Components/Divider',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },
@@ -38,12 +35,12 @@ const StickerSheetTemplate: StickerSheetStory = {
 
 export const StickerSheetDefault: StickerSheetStory = {
   ...StickerSheetTemplate,
-  name: "Sticker Sheet (Default)",
+  name: 'Sticker Sheet (Default)',
 }
 
 export const StickerSheetReversed: StickerSheetStory = {
   ...StickerSheetTemplate,
-  name: "Sticker Sheet (Reversed)",
-  parameters: { backgrounds: { default: "Purple 700" } },
+  name: 'Sticker Sheet (Reversed)',
+  parameters: { backgrounds: { default: 'Purple 700' } },
   args: { isReversed: true },
 }