@kaizen/components 1.79.7 → 1.79.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.79.7",
+  "version": "1.79.9",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/Modal/GenericModal/GenericModal.tsx

@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom'
 import { Transition } from '@headlessui/react'
 import classnames from 'classnames'
 import FocusLock from 'react-focus-lock'
+import { useIsClientReady } from '../../utils/useIsClientReady'
 import { warn } from '../util/console'
 import { ModalContext } from './context/ModalContext'
 import styles from './GenericModal.module.scss'
@@ -38,6 +39,8 @@ 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)
 
@@ -58,6 +61,8 @@ export const GenericModal = ({
   }
 
   const focusOnAccessibleLabel = (): void => {
+    if (!isClientReady) return
+
     // Check if focus already exists within the modal
     if (modalLayer?.contains(document.activeElement)) {
       return
@@ -69,6 +74,8 @@ export const GenericModal = ({
   }
 
   const a11yWarn = (): void => {
+    if (!isClientReady) return
+
     // Ensure that consumers have provided an element that labels the modal
     // to meet ARIA accessibility guidelines.
     if (!document.getElementById(labelledByID)) {
@@ -80,6 +87,8 @@ export const GenericModal = ({
   }
 
   const preventBodyScroll = (): void => {
+    if (!isClientReady) return
+
     const hasScrollbar = window.innerWidth > document.documentElement.clientWidth
     const scrollStyles = [styles.unscrollable]
 
@@ -111,28 +120,34 @@ export const GenericModal = ({
   const onBeforeEnterHandler = (): void => {
     preventBodyScroll()
 
-    if (onEscapeKeyup) {
+    if (onEscapeKeyup && isClientReady) {
       document.addEventListener('keyup', escapeKeyHandler)
     }
   }
 
-  const cleanUpAfterClose = (): void => {
+  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*/
-  // @todo: Fix if possible - avoiding breaking in eslint upgrade
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => () => cleanUpAfterClose(), [])
+  useEffect(() => () => cleanUpAfterClose(), [cleanUpAfterClose])
 
   const onAfterLeaveHandler = (): void => {
     cleanUpAfterClose()
     propsOnAfterLeave?.()
   }
+
+  // Don't render portal during SSR
+  if (!isClientReady) {
+    return <></>
+  }
+
   return createPortal(
     <Transition
       appear={true}

package/src/__next__/Button/_docs/Button--api-specification.mdx

@@ -156,6 +156,12 @@ If a button is statically the full width of a container you can use the `isFullW
 
 For resizing on smaller screens, consider using the `className` prop to leverage CSS media or container queries, ie: `<Button className="w-full md:w-[initial]">Label</Button>`.
 
+## Use a menu to show additional actions
+
+Instead of a split button (now a [deprecated component](https://cultureamp.atlassian.net/wiki/spaces/DES/pages/4286611457/Deprecating+Split+Buttons+-+Design+Request+for+Comment+RFC)), use a Button with text followed by a Menu to show any additional actions related to the most critical action.
+
+<Canvas className="mb-24" of={exampleStories.ButtonMenuPattern} />
+
 ## Additional API options
 
 The following table is a collection of additional React Aria and native HTML props that are exposed from the React Aria API. These are not required for the implementation of `Button` but can be used to extend its functionality. Refer back to the [overview section](#overview) for the core props that enable most use cases.

package/src/__next__/Button/_docs/Button.docs.stories.tsx

@@ -391,3 +391,32 @@ export const DontExampleTertiaryButtonWithIcons: Story = {
     variant: 'tertiary',
   },
 }
+
+export const ButtonMenuPattern: Story = {
+  name: 'Button + Menu Pattern',
+  render: () => (
+    <div className="flex gap-4">
+      <Button size="large" variant="secondary">
+        Edit Survey
+      </Button>
+      <MenuTrigger>
+        <Button
+          size="large"
+          icon={<Icon name="more_horiz" isPresentational />}
+          variant="secondary"
+          hasHiddenLabel
+        >
+          More surveys
+        </Button>
+        <MenuPopover>
+          <Menu>
+            <MenuItem>Survey 1</MenuItem>
+            <MenuItem>Survey 2</MenuItem>
+            <MenuItem>Survey 3</MenuItem>
+            <MenuItem>Survey 4</MenuItem>
+          </Menu>
+        </MenuPopover>
+      </MenuTrigger>
+    </div>
+  ),
+}

package/src/__next__/Menu/_docs/Menu--api-specification.mdx

@@ -83,3 +83,9 @@ Menu items can be disabled with the `isDisabled` prop.
 By default, the open/closed state of the menu is handled under the hood. In cases where you need control over the open state, use the `isOpen` and `onOpenChange` props on the `MenuTrigger` component (both props must be used for this to work).
 
 <Canvas className="mb-24" of={exampleStories.Controlled} />
+
+## Use a menu to show additional actions
+
+Instead of a split button (now a [deprecated component](https://cultureamp.atlassian.net/wiki/spaces/DES/pages/4286611457/Deprecating+Split+Buttons+-+Design+Request+for+Comment+RFC)), use a Button with text followed by a Menu to show any additional actions related to the most critical action.
+
+<Canvas className="mb-24" of={exampleStories.ButtonMenuPattern} />

package/src/__next__/Menu/_docs/Menu.stories.tsx

@@ -128,3 +128,32 @@ export const Sections: Story = {
     </MenuTrigger>
   ),
 }
+
+export const ButtonMenuPattern: Story = {
+  name: 'Button + Menu Pattern',
+  render: ({ defaultOpen: _, ...args }) => (
+    <div className="flex gap-4">
+      <Button size="large" variant="secondary">
+        Edit Survey
+      </Button>
+      <MenuTrigger {...args}>
+        <Button
+          size="large"
+          icon={<Icon name="more_horiz" isPresentational />}
+          variant="secondary"
+          hasHiddenLabel
+        >
+          More surveys
+        </Button>
+        <MenuPopover>
+          <Menu>
+            <MenuItem>Survey 1</MenuItem>
+            <MenuItem>Survey 2</MenuItem>
+            <MenuItem>Survey 3</MenuItem>
+            <MenuItem>Survey 4</MenuItem>
+          </Menu>
+        </MenuPopover>
+      </MenuTrigger>
+    </div>
+  ),
+}