@kaizen/components 1.81.0 → 1.81.1

package/dist/types/__libs__/react-aria/index.d.ts

@@ -0,0 +1 @@
+export * from 'react-aria';

package/dist/types/__libs__/react-aria-components/index.d.ts

@@ -0,0 +1 @@
+export * from 'react-aria-components';

package/libs/README.md

@@ -0,0 +1,7 @@
+# Entrypoint: libs
+
+This directory is here to redirect any imports from `@kaizen/components/libs` to the correct distribution of compiled code to allow for treeshaking of external libraries like `react-aria`.
+
+These are exported to reduce compatibility issues when using libs within our components.
+
+More details: [https://github.com/theKashey/multiple-entry-points-example](https://github.com/theKashey/multiple-entry-points-example)

package/libs/react-aria/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../../dist/cjs/reactAriaKZ.cjs",
+  "module": "../../dist/esm/reactAriaKZ.mjs",
+  "types": "../../dist/types/__libs__/react-aria/index.d.ts"
+}

package/libs/react-aria-components/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../../dist/cjs/reactAriaComponentsKZ.cjs",
+  "module": "../../dist/esm/reactAriaComponentsKZ.mjs",
+  "types": "../../dist/types/__libs__/react-aria-components/index.d.ts"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.81.0",
+  "version": "1.81.1",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -20,6 +20,7 @@
     "v1",
     "v2",
     "v3",
+    "libs",
     "dist",
     "icons",
     "locales",
@@ -47,6 +48,16 @@
       "import": "./dist/esm/next.mjs",
       "require": "./dist/cjs/next.cjs"
     },
+    "./libs/react-aria": {
+      "types": "./dist/types/__libs__/react-aria/index.d.ts",
+      "import": "./dist/esm/reactAriaKZ.mjs",
+      "require": "./dist/cjs/reactAriaKZ.cjs"
+    },
+    "./libs/react-aria-components": {
+      "types": "./dist/types/__libs__/react-aria-components/index.d.ts",
+      "import": "./dist/esm/reactAriaComponentsKZ.mjs",
+      "require": "./dist/cjs/reactAriaComponentsKZ.cjs"
+    },
     "./v1/actions": {
       "types": "./dist/types/v1-actions.d.ts",
       "import": "./dist/esm/actionsV1.mjs",

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/RichTextEditor/RichTextEditor/RichTextEditor.spec.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { type StoryObj } from '@storybook/react'
-import { expect, userEvent, within } from '@storybook/test'
+import { expect, userEvent, waitFor, within } from '@storybook/test'
 import { type EditorContentArray } from '../types'
 import { RichTextEditor, type RichTextEditorProps } from './RichTextEditor'
 
@@ -149,8 +149,9 @@ export const CreateALink: Story = {
   name: 'Create a link',
   play: async (context) => {
     const { canvasElement, step } = context
-    const { getByRole, getByText } = within(canvasElement)
+    const { getByRole, getByText, queryByRole, findByRole } = within(canvasElement)
     const editor = getByRole('textbox')
+
     await step('Focus on editor', async () => {
       await userEvent.click(editor)
       expect(editor).toHaveFocus()
@@ -185,8 +186,14 @@ export const CreateALink: Story = {
       await userEvent.keyboard('{Tab}{Enter}')
     })
 
+    await step('The Link Modal closes', async () => {
+      await waitFor(() => {
+        expect(queryByRole('dialog')).not.toBeInTheDocument()
+      })
+    })
+
     await step('Link exists in the RTE', async () => {
-      const link = getByRole('link', { name: 'Link' })
+      const link = await findByRole('link', { name: 'Link' })
       expect(link).toBeInTheDocument()
     })
   },

package/src/__libs__/react-aria/index.ts

@@ -0,0 +1 @@
+export * from 'react-aria'

package/src/__libs__/react-aria-components/index.ts

@@ -0,0 +1 @@
+export * from 'react-aria-components'