@kaizen/components 1.81.0 → 2.0.0

package/src/Modal/ConfirmationModal/ConfirmationModal.tsx

@@ -1,8 +1,9 @@
 import React, { type HTMLAttributes } from 'react'
 import classnames from 'classnames'
-import type { ButtonProps } from '~components/Button'
+import type { ButtonProps } from '~components/ButtonV1'
 import { Heading } from '~components/Heading'
-import { Assertive, Cautionary, Informative, Negative, Positive } from '~components/Illustration'
+import { Icon } from '~components/Icon'
+import { Cautionary, Informative, Negative, Positive } from '~components/Illustration'
 import {
   GenericModal,
   ModalAccessibleDescription,
@@ -11,93 +12,61 @@ import {
   ModalFooter,
   ModalHeader,
 } from '~components/Modal/GenericModal'
-import { Icon } from '~components/__next__/Icon'
 import styles from './ConfirmationModal.module.scss'
 
-type Mood = 'positive' | 'informative' | 'negative' | 'cautionary' | 'assertive'
 type Variant = 'success' | 'informative' | 'warning' | 'cautionary'
 
 type BaseConfirmationModalProps = {
-  isOpen: boolean
-  unpadded?: boolean
+  'isOpen': boolean
+  'unpadded'?: boolean
   /**
    * To display the Prominent variation of the modal types
    */
-  isProminent?: boolean
-  title: string
-  onConfirm?: () => void
-  onDismiss: () => void
+  'isProminent'?: boolean
+  'title': string
+  'onConfirm'?: () => void
+  'onDismiss': () => void
   /** A callback that is triggered after the modal is opened. */
-  onAfterEnter?: () => void
+  'onAfterEnter'?: () => void
   /** A callback that is triggered after the modal is closed. */
-  onAfterLeave?: () => void
-  confirmLabel?: string
-  dismissLabel?: string
-  confirmWorking?: { label: string; labelHidden?: boolean }
-  /**
-   * @deprecated Please use data-testid
-   */
-  automationId?: string
-  children: React.ReactNode
+  'onAfterLeave'?: () => void
+  'confirmLabel'?: string
+  'dismissLabel'?: string
+  'confirmWorking'?: { label: string; labelHidden?: boolean }
+  'data-testid'?: string
+  'children': React.ReactNode
 } & HTMLAttributes<HTMLDivElement>
 
-type ConfirmationModalMoods = {
-  /**
-   * @deprecated Please use `variant` instead
-   */
-  mood: Mood
-  variant?: never
-}
-
 type ConfirmationModalVariants = {
-  /**
-   * @deprecated Please use `variant` instead
-   */
-  mood?: never
-  /**
-   * If you are transitioning from Moods:
-   * - `positive` should be `success`
-   * - `negative` should be `warning`
-   * - `assertive` should be `cautionary`
-   */
   variant: Variant
 }
 
-export type ConfirmationModalProps = BaseConfirmationModalProps &
-  (ConfirmationModalMoods | ConfirmationModalVariants)
+export type ConfirmationModalProps = BaseConfirmationModalProps & ConfirmationModalVariants
 
-const getIconName = (variantName: Mood | Variant): string => {
+const getIconName = (variantName: Variant): string => {
   switch (variantName) {
     case 'cautionary':
       return 'warning'
     case 'informative':
       return 'info'
-    case 'negative':
     case 'warning':
       return 'error'
-    case 'positive':
     case 'success':
       return 'check_circle'
-    case 'assertive':
-      return 'error'
   }
 }
 
-const getIcon = (variantName: Mood | Variant, isProminent: boolean): JSX.Element => {
+const getIcon = (variantName: Variant, isProminent: boolean): JSX.Element => {
   if (isProminent) {
     switch (variantName) {
       case 'cautionary':
         return <Cautionary />
       case 'informative':
         return <Informative />
-      case 'negative':
       case 'warning':
         return <Negative />
-      case 'positive':
       case 'success':
         return <Positive />
-      case 'assertive':
-        return <Assertive />
     }
   }
 
@@ -113,7 +82,6 @@ export const ConfirmationModal = ({
   isOpen,
   isProminent = false,
   unpadded = false,
-  mood,
   variant,
   title,
   onConfirm,
@@ -127,7 +95,7 @@ export const ConfirmationModal = ({
   className,
   ...props
 }: ConfirmationModalProps): JSX.Element => {
-  const variantName = variant ?? mood
+  const variantName = variant
 
   const onDismiss = confirmWorking ? undefined : propsOnDismiss
 
@@ -166,7 +134,7 @@ export const ConfirmationModal = ({
           <div
             className={classnames(
               styles.header,
-              variant ? styles[variant] : styles[`${mood}Header`],
+              styles[variant],
               isProminent && styles.prominent,
               !unpadded && styles.padded,
             )}
@@ -188,7 +156,7 @@ export const ConfirmationModal = ({
         </ModalBody>
         <ModalFooter
           actions={footerActions}
-          appearance={mood === 'negative' || variant == 'warning' ? 'destructive' : 'primary'}
+          appearance={variant == 'warning' ? 'destructive' : 'primary'}
           unpadded={unpadded}
         />
       </div>

package/src/Modal/ConfirmationModal/_docs/ConfirmationModal.stories.tsx

@@ -30,11 +30,6 @@ const meta = {
         disable: true,
       },
     },
-    mood: {
-      control: {
-        disable: true,
-      },
-    },
   },
 } satisfies Meta<typeof ConfirmationModal>
 

package/src/Modal/ContextModal/ContextModal.tsx

@@ -1,6 +1,6 @@
 import React, { type HTMLAttributes } from 'react'
 import classnames from 'classnames'
-import type { ButtonProps } from '~components/Button'
+import type { ButtonProps } from '~components/ButtonV1'
 import { Heading } from '~components/Heading'
 import {
   GenericModal,
@@ -23,29 +23,26 @@ export type ContextModalSecondaryActionProps =
 
 export type ContextModalProps = Readonly<
   {
-    isOpen: boolean
-    unpadded?: boolean
+    'isOpen': boolean
+    'unpadded'?: boolean
     /**
      * Defines the orientation layout of the image and content
      */
-    layout?: 'portrait' | 'landscape'
-    title: string
-    onConfirm?: () => void
-    onDismiss: () => void
+    'layout'?: 'portrait' | 'landscape'
+    'title': string
+    'onConfirm'?: () => void
+    'onDismiss': () => void
     /** A callback that is triggered after the modal is opened. */
-    onAfterEnter?: () => void
+    'onAfterEnter'?: () => void
     /** A callback that is triggered after the modal is closed. */
-    onAfterLeave?: () => void
-    confirmLabel?: string
-    confirmWorking?: { label: string; labelHidden?: boolean }
-    /**
-     * @deprecated use data-testid instead
-     */
-    automationId?: string
-    renderBackground?: () => React.ReactNode
-    image?: React.ReactNode
-    children: React.ReactNode
-    contentHeader?: React.ReactNode
+    'onAfterLeave'?: () => void
+    'confirmLabel'?: string
+    'confirmWorking'?: { label: string; labelHidden?: boolean }
+    'data-testid'?: string
+    'renderBackground'?: () => React.ReactNode
+    'image'?: React.ReactNode
+    'children': React.ReactNode
+    'contentHeader'?: React.ReactNode
   } & ContextModalSecondaryActionProps &
     HTMLAttributes<HTMLDivElement>
 >

package/src/Modal/GenericModal/GenericModal.spec.tsx

@@ -71,7 +71,7 @@ describe('<GenericModal />', () => {
 
   it('closes the modal when a click is outside of the modal content', async () => {
     const handleDismiss = vi.fn()
-    render(<GenericModalWrapper onOutsideModalClick={handleDismiss} />)
+    render(<GenericModalWrapper onOutsideModalClick={handleDismiss()} />)
 
     await user.click(screen.getByTestId('GenericModalTestId-scrollLayer'))
     await waitFor(() => {

package/src/Modal/GenericModal/GenericModal.tsx

@@ -1,9 +1,10 @@
-import React, { useCallback, useEffect, useId, useState } from 'react'
+import React, { useId, useRef } from 'react'
 import { createPortal } from 'react-dom'
 import { Transition } from '@headlessui/react'
 import classnames from 'classnames'
-import FocusLock from 'react-focus-lock'
+import { FocusOn } from 'react-focus-on'
 import { useIsClientReady } from '../../utils/useIsClientReady'
+
 import { warn } from '../util/console'
 import { ModalContext } from './context/ModalContext'
 import styles from './GenericModal.module.scss'
@@ -38,39 +39,22 @@ export const GenericModal = ({
 
   const labelledByID = useId()
   const describedByID = useId()
-
   const isClientReady = useIsClientReady()
 
-  const [scrollLayer, setScrollLayer] = useState<HTMLDivElement | null>(null)
-  const [modalLayer, setModalLayer] = useState<HTMLDivElement | null>(null)
+  const scrollLayerRef = useRef<HTMLDivElement | null>(null)
+  const modalLayerRef = useRef<HTMLDivElement | null>(null)
 
   const scrollModalToTop = (): void => {
     // If we have a really long modal, the autofocus could land on an element down below
     // causing the modal to scroll down and skipping over the content near the modal's top.
     // Ensure that when the modal opens, we are at the top of its content.
     requestAnimationFrame(() => {
-      if (!scrollLayer) return
-      scrollLayer.scrollTop = 0
-    })
-  }
-
-  const outsideModalClickHandler = (event: React.MouseEvent): void => {
-    if (event.target === scrollLayer || event.target === modalLayer) {
-      onOutsideModalClick?.(event)
-    }
-  }
-
-  const focusOnAccessibleLabel = (): void => {
-    if (!isClientReady) return
-
-    // Check if focus already exists within the modal
-    if (modalLayer?.contains(document.activeElement)) {
-      return
-    }
+      const scrollElement = scrollLayerRef.current
 
-    const labelElement: HTMLElement | null = document.getElementById(labelledByID)
-
-    labelElement?.focus()
+      // This little verbose of a check but this ensures that the element is attached to the DOM as it animates in. This additional check aims to avoid race conditions
+      if (!scrollElement?.isConnected) return
+      scrollElement.scrollTop = 0
+    })
   }
 
   const a11yWarn = (): void => {
@@ -86,60 +70,46 @@ export const GenericModal = ({
     }
   }
 
-  const preventBodyScroll = (): void => {
+  const focusOnAccessibleLabel = (): void => {
     if (!isClientReady) return
+    const modalElement = modalLayerRef.current
+    if (!modalElement?.isConnected) return
 
-    const hasScrollbar = window.innerWidth > document.documentElement.clientWidth
-    const scrollStyles = [styles.unscrollable]
+    // Check if focus already exists within the modal
+    if (modalElement.contains(document.activeElement)) {
+      return
+    }
+
+    const labelElement: HTMLElement | null = document.getElementById(labelledByID)
 
-    if (hasScrollbar) {
-      scrollStyles.push(styles.pseudoScrollbar)
+    if (labelElement?.isConnected) {
+      labelElement.focus()
     }
+  }
 
-    document.documentElement.classList.add(...scrollStyles)
+  const onEscapeKeyHandler = (e: Event): void => {
+    if (e instanceof KeyboardEvent) {
+      onEscapeKeyup?.(e)
+    }
   }
 
   const onAfterEnterHandler = (): void => {
     scrollModalToTop()
-    if (modalLayer) {
+    const modalElement = modalLayerRef.current
+    if (modalElement) {
       onAfterEnter?.()
       focusOnAccessibleLabel()
       a11yWarn()
     }
   }
 
-  const escapeKeyHandler = useCallback(
-    (event: KeyboardEvent): void => {
-      if (event.key === 'Escape') {
-        onEscapeKeyup?.(event)
-      }
-    },
-    [onEscapeKeyup],
-  )
-
-  const onBeforeEnterHandler = (): void => {
-    preventBodyScroll()
-
-    if (onEscapeKeyup && isClientReady) {
-      document.addEventListener('keyup', escapeKeyHandler)
+  const outsideModalClickHandler = (e: React.MouseEvent): void => {
+    if (e.target === scrollLayerRef.current || e.target === modalLayerRef.current) {
+      onOutsideModalClick?.(e)
     }
   }
 
-  const cleanUpAfterClose = useCallback(() => {
-    if (!isClientReady) return
-
-    document.documentElement.classList.remove(styles.unscrollable, styles.pseudoScrollbar)
-
-    if (onEscapeKeyup) {
-      document.removeEventListener('keyup', escapeKeyHandler)
-    }
-  }, [escapeKeyHandler, onEscapeKeyup, isClientReady])
-
-  /* Ensure sure add-on styles (e.g. unscrollable) and key event is cleaned up when the modal is unmounted*/
-  useEffect(() => () => cleanUpAfterClose(), [cleanUpAfterClose])
-
   const onAfterLeaveHandler = (): void => {
-    cleanUpAfterClose()
     propsOnAfterLeave?.()
   }
 
@@ -152,7 +122,6 @@ export const GenericModal = ({
     <Transition
       appear={true}
       show={isOpen}
-      beforeEnter={onBeforeEnterHandler}
       afterEnter={onAfterEnterHandler}
       afterLeave={onAfterLeaveHandler}
       data-generic-modal-transition-wrapper
@@ -161,9 +130,10 @@ export const GenericModal = ({
       as="div"
       className={classnames(styles.transitionLayer, className)}
     >
-      <FocusLock
-        disabled={focusLockDisabled}
+      <FocusOn
+        focusLock={focusLockDisabled}
         returnFocus={true}
+        onEscapeKey={onEscapeKeyHandler}
         // Disabling false positive
         // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus={false}
@@ -174,11 +144,9 @@ export const GenericModal = ({
         {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
         <div
           className={styles.scrollLayer}
-          ref={(scrollLayerRef): void => {
-            setScrollLayer(scrollLayerRef)
-          }}
-          onClick={outsideModalClickHandler}
+          ref={scrollLayerRef}
           data-testid={`${id}-scrollLayer`}
+          onClick={outsideModalClickHandler}
         >
           <ModalContext.Provider
             value={{
@@ -191,14 +159,14 @@ export const GenericModal = ({
               className={styles.modalLayer}
               aria-labelledby={labelledByID}
               aria-describedby={describedByID}
-              ref={(modalLayerRef): void => setModalLayer(modalLayerRef)}
+              ref={modalLayerRef}
               data-testid={id}
             >
               {children}
             </div>
           </ModalContext.Provider>
         </div>
-      </FocusLock>
+      </FocusOn>
     </Transition>,
     document.body,
   )

package/src/Modal/GenericModal/subcomponents/ModalFooter/ModalFooter.tsx

@@ -1,6 +1,6 @@
 import React, { type HTMLAttributes } from 'react'
 import classnames from 'classnames'
-import { Button, type ButtonProps } from '~components/Button'
+import { Button, type ButtonProps } from '~components/ButtonV1'
 import { useMediaQueries } from '~components/utils/useMediaQueries'
 import { ModalBody } from '../ModalBody/ModalBody'
 import styles from './ModalFooter.module.scss'
@@ -15,18 +15,15 @@ export type ModalFooterProps = {
    * action is anchored to the left edge of the modal.
    * For this rare instance added the variant prop as optional to update the order of action buttons.
    */
-  variant?: ActionsVariantProps
-  unpadded?: boolean
-  actions: ButtonProps[]
+  'variant'?: ActionsVariantProps
+  'unpadded'?: boolean
+  'actions': ButtonProps[]
   /**
    * @deprecated we are no longer supporting different appearances for ModalFooter, instead there will only be a single default appearance set by the Button.
    */
-  appearance?: 'primary' | 'destructive'
-  /**
-   * @deprecated Please use data-testid
-   */
-  automationId?: string
-  alignStart?: boolean
+  'appearance'?: 'primary' | 'destructive'
+  'data-testid'?: string
+  'alignStart'?: boolean
 } & HTMLAttributes<HTMLDivElement>
 
 export const ModalFooter = ({

package/src/Modal/GenericModal/subcomponents/ModalHeader/ModalHeader.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { IconButton } from '~components/Button'
-import { Icon } from '~components/__next__/Icon'
+import { IconButton } from '~components/ButtonV1'
+import { Icon } from '~components/Icon'
 import { ModalBody } from '../ModalBody'
 import styles from './ModalHeader.module.scss'
 

package/src/Modal/InputEditModal/InputEditModal.spec.tsx

@@ -15,7 +15,6 @@ const InputEditModalWrapper = ({
     title="Example modal title"
     onSubmit={(): void => undefined}
     onDismiss={(): void => undefined}
-    mood="positive"
     {...props}
   >
     {children}

package/src/Modal/InputEditModal/InputEditModal.tsx

@@ -1,6 +1,6 @@
 import React, { type HTMLAttributes } from 'react'
 import classnames from 'classnames'
-import type { ButtonProps } from '~components/Button'
+import type { ButtonProps } from '~components/ButtonV1'
 import { Heading } from '~components/Heading'
 import {
   GenericModal,
@@ -12,29 +12,22 @@ import {
 import styles from './InputEditModal.module.scss'
 
 export type InputEditModalProps = {
-  isOpen: boolean
-  unpadded?: boolean
-  /**
-   * @deprecated we are no longer supporting different moods for InputModal, instead there will only be a single default variant set by the component.
-   */
-  mood?: 'positive' | 'destructive'
-  title: string
-  onSubmit: () => void
-  onSecondaryAction?: () => void
-  onDismiss: () => void
+  'isOpen': boolean
+  'unpadded'?: boolean
+  'title': string
+  'onSubmit': () => void
+  'onSecondaryAction'?: () => void
+  'onDismiss': () => void
   /** A callback that is triggered after the modal is opened. */
-  onAfterEnter?: () => void
+  'onAfterEnter'?: () => void
   /** A callback that is triggered after the modal is closed. */
-  onAfterLeave?: () => void
-  submitLabel?: string
-  dismissLabel?: string
-  secondaryLabel?: string
-  /**
-   * @deprecated Please use data-testid
-   */
-  automationId?: string
-  children: React.ReactNode
-  submitWorking?: { label: string; labelHidden?: boolean }
+  'onAfterLeave'?: () => void
+  'submitLabel'?: string
+  'dismissLabel'?: string
+  'secondaryLabel'?: string
+  'data-testid'?: string
+  'children': React.ReactNode
+  'submitWorking'?: { label: string; labelHidden?: boolean }
 } & Omit<HTMLAttributes<HTMLDivElement>, 'onSubmit'>
 
 /**
@@ -43,7 +36,6 @@ export type InputEditModalProps = {
  */
 export const InputEditModal = ({
   isOpen,
-  mood,
   title,
   onSubmit,
   onSecondaryAction,
@@ -101,12 +93,7 @@ export const InputEditModal = ({
         <ModalBody>
           <div className={classnames(styles.body, !unpadded && styles.padded)}>{children}</div>
         </ModalBody>
-        <ModalFooter
-          actions={footerActions}
-          appearance={mood === 'destructive' ? 'destructive' : 'primary'}
-          variant="inputEdit"
-          unpadded={unpadded}
-        />
+        <ModalFooter actions={footerActions} variant="inputEdit" unpadded={unpadded} />
       </div>
     </GenericModal>
   )

package/src/Modal/InputEditModal/_docs/InputEditModal.stories.tsx

@@ -38,11 +38,6 @@ const meta = {
         disable: true,
       },
     },
-    mood: {
-      control: {
-        disable: true,
-      },
-    },
   },
 } satisfies Meta<typeof InputEditModal>
 

package/src/MultiSelect/subcomponents/Checkbox/Checkbox.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, type InputHTMLAttributes } from 'react'
 import classnames from 'classnames'
-import { Icon } from '~components/__next__/Icon'
+import { Icon } from '~components/Icon'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import styles from './Checkbox.module.scss'
 

package/src/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef, useId, type HTMLAttributes } from 'react'
 import classnames from 'classnames'
 import { ClearButton } from '~components/ClearButton'
 import { type FieldMessageProps } from '~components/FieldMessage'
-import { Icon, RemovableTag } from '~components/__next__'
+import { Icon } from '~components/Icon'
+import { RemovableTag } from '~components/__next__'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { type MultiSelectOption } from '../../types'
 import styles from './MultiSelectToggle.module.scss'

package/src/Notification/GlobalNotification/GlobalNotification.spec.tsx

@@ -5,14 +5,14 @@ import { GlobalNotification } from './GlobalNotification'
 describe('<GlobalNotification />', () => {
   it('renders the positive notification correctly', () => {
     const { getByText } = render(
-      <GlobalNotification type="positive">This is my positive notification</GlobalNotification>,
+      <GlobalNotification variant="success">This is my positive notification</GlobalNotification>,
     )
 
     expect(getByText('This is my positive notification')).toBeInTheDocument()
   })
   it('removes the notification from the DOM', () => {
     const { getByRole } = render(
-      <GlobalNotification type="positive">This is my positive notification</GlobalNotification>,
+      <GlobalNotification variant="success">This is my positive notification</GlobalNotification>,
     )
 
     expect(getByRole('button', { name: 'Close notification' })).toBeInTheDocument()

package/src/Notification/GlobalNotification/GlobalNotification.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import {
   GenericNotification,
-  type GenericNotificationType,
   type GenericNotificationVariant,
 } from '../subcomponents/GenericNotification'
 
@@ -12,8 +11,7 @@ export type GlobalNotificationBase = OverrideClassName<{
   persistent?: boolean
 }>
 
-export type GlobalNotificationProps = GlobalNotificationBase &
-  (GenericNotificationType | GenericNotificationVariant)
+export type GlobalNotificationProps = GlobalNotificationBase & GenericNotificationVariant
 
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082060757/Global+Notification Guidance} |

package/src/Notification/GlobalNotification/_docs/GlobalNotification.stickersheet.stories.tsx

@@ -43,29 +43,6 @@ const variants = [
   },
 ] satisfies { title: string; props: Partial<GlobalNotificationProps> }[]
 
-const types = [
-  {
-    title: 'Informative',
-    props: { type: 'informative' },
-  },
-  {
-    title: 'Success',
-    props: { type: 'positive' },
-  },
-  {
-    title: 'Cautionary',
-    props: { type: 'cautionary' },
-  },
-  {
-    title: 'Negative',
-    props: { type: 'negative' },
-  },
-  {
-    title: 'Security',
-    props: { type: 'security' },
-  },
-] satisfies { title: string; props: Partial<GlobalNotificationProps> }[]
-
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => {
     const defaultProps = {
@@ -87,14 +64,6 @@ const StickerSheetTemplate: StickerSheetStory = {
             </StickerSheet.Row>
           ))}
         </StickerSheet>
-
-        <StickerSheet title="Type (deprecated)" isReversed={isReversed}>
-          {types.map(({ title, props }) => (
-            <StickerSheet.Row key={title} header={title}>
-              <GlobalNotification {...defaultProps} {...props} />
-            </StickerSheet.Row>
-          ))}
-        </StickerSheet>
       </>
     )
   },