@kaizen/components 0.0.0-canary-v2-20250901045936 → 0.0.0-canary-debug-tab-20251015223744

package/locales/lv.json

@@ -184,8 +184,16 @@
     "description" : "Prompts user to interact with button to hide information",
     "message" : "Paslēpt informāciju:"
   },
+  "singleSelect.chevronButton" : {
+    "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
+    "message" : "Rādīt {field} ieteikumus"
+  },
+  "singleSelect.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button",
+    "message" : "Notīrīt {field} atlasi"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Papildu darbības"
   }
-}
+}

package/locales/mi.json

@@ -174,7 +174,7 @@
   },
   "kzErrorPage.goToHome" : {
     "description" : "Home button label",
-    "message" : "Go to Home"
+    "message" : "Haere ki te whārangi Kāinga"
   },
   "kzGenericTile.infoButtonLabel" : {
     "description" : "Prompts user to interact with button to reveal more information",
@@ -184,8 +184,16 @@
     "description" : "Prompts user to interact with button to hide information",
     "message" : "Huna mōhiohio:"
   },
+  "singleSelect.chevronButton" : {
+    "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
+    "message" : "Whakaatu whakaaro mo {field}"
+  },
+  "singleSelect.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button",
+    "message" : "Ūkuia {field} tīpakonga"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Ngā mahi tāpiri"
   }
-}
+}

package/locales/ms.json

@@ -184,8 +184,16 @@
     "description" : "Prompts user to interact with button to hide information",
     "message" : "Sembunyikan maklumat:"
   },
+  "singleSelect.chevronButton" : {
+    "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
+    "message" : "Tunjukkan cadangan untuk {field}"
+  },
+  "singleSelect.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button",
+    "message" : "Kosongkan pilihan {field}"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Tindakan tambahan"
   }
-}
+}

package/locales/nb.json

@@ -184,8 +184,16 @@
     "description" : "Prompts user to interact with button to hide information",
     "message" : "Skjul informasjon:"
   },
+  "singleSelect.chevronButton" : {
+    "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
+    "message" : "Vis forslag for {field}"
+  },
+  "singleSelect.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button",
+    "message" : "Fjern {field}-valg"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Ytterligere handlinger"
   }
-}
+}

package/locales/nl.json

@@ -184,8 +184,16 @@
     "description" : "Prompts user to interact with button to hide information",
     "message" : "Informatie verbergen:"
   },
+  "singleSelect.chevronButton" : {
+    "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
+    "message" : "Suggesties voor {field} weergeven"
+  },
+  "singleSelect.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button",
+    "message" : "Selectie van {field} wissen"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Meer acties"
   }
-}
+}

package/locales/pl.json

@@ -184,8 +184,16 @@
     "description" : "Prompts user to interact with button to hide information",
     "message" : "Ukryj informacje:"
   },
+  "singleSelect.chevronButton" : {
+    "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
+    "message" : "Pokaż sugestie dla {field}"
+  },
+  "singleSelect.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button",
+    "message" : "Wyczyść zaznaczenie {field}"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Dodatkowe działania"
   }
-}
+}

package/locales/pt-BR.json

@@ -184,8 +184,16 @@
     "description" : "Prompts user to interact with button to hide information",
     "message" : "Ocultar informações:"
   },
+  "singleSelect.chevronButton" : {
+    "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
+    "message" : "Mostrar sugestões para {field}"
+  },
+  "singleSelect.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button",
+    "message" : "Limpar seleção de {field}"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Mais ações"
   }
-}
+}

package/locales/pt.json

@@ -184,8 +184,16 @@
     "description" : "Prompts user to interact with button to hide information",
     "message" : "Ocultar informações:"
   },
+  "singleSelect.chevronButton" : {
+    "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
+    "message" : "Mostrar sugestões para {field}"
+  },
+  "singleSelect.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button",
+    "message" : "Limpar seleção de {field}"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Mais ações"
   }
-}
+}

package/locales/ro.json

@@ -184,8 +184,16 @@
     "description" : "Prompts user to interact with button to hide information",
     "message" : "Ascundeți informațiile:"
   },
+  "singleSelect.chevronButton" : {
+    "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
+    "message" : "Afișați sugestii pentru {field}"
+  },
+  "singleSelect.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button",
+    "message" : "Ștergeți selecția {field}"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Acțiuni suplimentare"
   }
-}
+}

package/locales/ru.json

@@ -184,8 +184,16 @@
     "description" : "Prompts user to interact with button to hide information",
     "message" : "Скрыть информацию:"
   },
+  "singleSelect.chevronButton" : {
+    "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
+    "message" : "Показать предложения для {field}"
+  },
+  "singleSelect.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button",
+    "message" : "Очистить выбор {field}"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Дополнительные действия"
   }
-}
+}

package/locales/si-LK.json

@@ -184,8 +184,16 @@
     "description" : "Prompts user to interact with button to hide information",
     "message" : "තොරතුරු සඟවන්න:"
   },
+  "singleSelect.chevronButton" : {
+    "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
+    "message" : "{field} සඳහා යෝජනා පෙන්වන්න"
+  },
+  "singleSelect.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button",
+    "message" : "{field} තෝරාගැනීම මකා දමන්න"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "අතිරේක ක්‍රියාමාර්ග"
   }
-}
+}

package/locales/sk.json

@@ -184,8 +184,16 @@
     "description" : "Prompts user to interact with button to hide information",
     "message" : "Skryť informácie:"
   },
+  "singleSelect.chevronButton" : {
+    "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
+    "message" : "Zobraziť návrhy pre {field}"
+  },
+  "singleSelect.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button",
+    "message" : "Zrušiť výber: {field}"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Ďalšie činnosti"
   }
-}
+}

package/locales/sr.json

@@ -184,8 +184,16 @@
     "description" : "Prompts user to interact with button to hide information",
     "message" : "Sakrij informacije:"
   },
+  "singleSelect.chevronButton" : {
+    "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
+    "message" : "Prikaži predloge za {field}"
+  },
+  "singleSelect.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button",
+    "message" : "Obriši {field} izbor"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Dodatne radnje"
   }
-}
+}

package/locales/sv.json

@@ -184,8 +184,16 @@
     "description" : "Prompts user to interact with button to hide information",
     "message" : "Dölj information:"
   },
+  "singleSelect.chevronButton" : {
+    "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
+    "message" : "Visa förslag för {field}"
+  },
+  "singleSelect.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button",
+    "message" : "Rensa {field} val"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Ytterligare åtgärder"
   }
-}
+}

package/locales/th.json

@@ -184,8 +184,16 @@
     "description" : "Prompts user to interact with button to hide information",
     "message" : "ซ่อนข้อมูล:"
   },
+  "singleSelect.chevronButton" : {
+    "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
+    "message" : "แสดงคำแนะนำสำหรับ {field}"
+  },
+  "singleSelect.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button",
+    "message" : "ล้างการเลือก {field}"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "การดำเนินการเพิ่มเติม"
   }
-}
+}

package/locales/tl.json

@@ -184,8 +184,16 @@
     "description" : "Prompts user to interact with button to hide information",
     "message" : "Itago ang impormasyon:"
   },
+  "singleSelect.chevronButton" : {
+    "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
+    "message" : "Ipakita ang mga mungkahi para sa {field}"
+  },
+  "singleSelect.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button",
+    "message" : "I-clear ang {field} selection"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Karagdagang mga aksiyon"
   }
-}
+}

package/locales/tr.json

@@ -184,8 +184,16 @@
     "description" : "Prompts user to interact with button to hide information",
     "message" : "Bilgileri gizleyin:"
   },
+  "singleSelect.chevronButton" : {
+    "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
+    "message" : "{field} için önerileri göster"
+  },
+  "singleSelect.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button",
+    "message" : "{field} seçimini temizle"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Ek eylemler"
   }
-}
+}

package/locales/uk.json

@@ -184,8 +184,16 @@
     "description" : "Prompts user to interact with button to hide information",
     "message" : "Приховати інформацію:"
   },
+  "singleSelect.chevronButton" : {
+    "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
+    "message" : "Показати пропозиції для {field}"
+  },
+  "singleSelect.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button",
+    "message" : "Очистити виділення {field}"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Додаткові дії"
   }
-}
+}

package/locales/vi.json

@@ -184,8 +184,16 @@
     "description" : "Prompts user to interact with button to hide information",
     "message" : "Ẩn thông tin:"
   },
+  "singleSelect.chevronButton" : {
+    "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
+    "message" : "Hiển thị gợi ý cho {field}"
+  },
+  "singleSelect.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button",
+    "message" : "Xóa lựa chọn {field}"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "Các hành động bổ sung"
   }
-}
+}

package/locales/zh-TW.json

@@ -184,8 +184,16 @@
     "description" : "Prompts user to interact with button to hide information",
     "message" : "隱藏資訊："
   },
+  "singleSelect.chevronButton" : {
+    "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
+    "message" : "顯示對 {field} 的建議"
+  },
+  "singleSelect.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button",
+    "message" : "清除 {field} 選擇"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "其他行動"
   }
-}
+}

package/locales/zh.json

@@ -184,8 +184,16 @@
     "description" : "Prompts user to interact with button to hide information",
     "message" : "隐藏信息："
   },
+  "singleSelect.chevronButton" : {
+    "description" : "Aria label text for the SingleSelect button to open and close suggestions list",
+    "message" : "显示{field}的建议"
+  },
+  "singleSelect.clearButtonAlt" : {
+    "description" : "Alt text for the clear selection button",
+    "message" : "清除{field}选择"
+  },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
     "message" : "附加操作"
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-v2-20250901045936",
+  "version": "0.0.0-canary-debug-tab-20251015223744",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -15,6 +15,7 @@
   "files": [
     "bin",
     "codemods",
+    "alpha",
     "future",
     "next",
     "libs",
@@ -36,6 +37,11 @@
       "import": "./dist/esm/index.mjs",
       "require": "./dist/cjs/index.cjs"
     },
+    "./alpha": {
+      "types": "./dist/types/__alpha__/index.d.ts",
+      "import": "./dist/esm/alpha.mjs",
+      "require": "./dist/cjs/alpha.cjs"
+    },
     "./next": {
       "types": "./dist/types/__next__/index.d.ts",
       "import": "./dist/esm/next.mjs",
@@ -86,6 +92,7 @@
     "@react-aria/select": "^3.15.7",
     "@react-aria/utils": "^3.29.1",
     "@react-stately/collections": "^3.12.5",
+    "@react-stately/combobox": "^3.11.1",
     "@react-stately/datepicker": "^3.14.2",
     "@react-stately/list": "^3.12.3",
     "@react-stately/menu": "^3.9.5",
@@ -152,10 +159,10 @@
     "sass": "1.79.6",
     "serialize-query-params": "^2.0.2",
     "svgo": "^3.3.2",
-    "tslib": "^2.8.1",
     "ts-patch": "^3.3.0",
+    "tslib": "^2.8.1",
     "tsx": "^4.20.3",
-    "@kaizen/design-tokens": "0.0.0-canary-v2-20250901045936"
+    "@kaizen/design-tokens": "11.0.0"
   },
   "devDependenciesComments": {
     "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",

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,
   )