@kaizen/components 3.0.4 → 3.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -112,13 +112,13 @@
     "prosemirror-state": "^1.4.4",
     "prosemirror-transform": "^1.11.0",
     "prosemirror-utils": "^1.2.2",
-    "prosemirror-view": "^1.41.6",
+    "prosemirror-view": "^1.41.7",
     "react-animate-height": "^3.2.3",
     "react-aria": "^3.41.1",
     "react-aria-components": "^1.10.1",
     "react-day-picker": "9.6.7",
     "react-focus-lock": "^2.13.7",
-    "react-focus-on": "^3.10.1",
+    "react-focus-on": "^3.10.2",
     "react-popper": "^2.3.0",
     "react-select": "^5.10.2",
     "react-textfit": "^1.1.1",
@@ -130,8 +130,8 @@
   },
   "devDependencies": {
     "@cultureamp/frontend-apis": "13.3.0",
-    "@cultureamp/i18n-react-intl": "^4.0.1",
-    "@cultureamp/package-bundler": "^2.4.4",
+    "@cultureamp/i18n-react-intl": "^4.1.0",
+    "@cultureamp/package-bundler": "^4.0.1",
     "@testing-library/dom": "^10.4.1",
     "@types/jest-axe": "^3.5.9",
     "@types/lodash.debounce": "^4.0.9",
@@ -140,6 +140,7 @@
     "@types/uuid": "^11.0.0",
     "autoprefixer": "^10.4.27",
     "concat-cli": "^4.0.0",
+    "cssnano": "^7.1.3",
     "identity-obj-proxy": "^3.0.0",
     "jest-axe": "^10.0.0",
     "lodash.isempty": "^4.4.0",

package/src/Filter/Filter/Filter.tsx

@@ -56,6 +56,7 @@ export const Filter = ({
       })}
       {isRefLoaded && isOpen && (
         <FocusOn
+          preventScrollOnFocus
           scrollLock={false}
           onClickOutside={(): void => setIsOpen(false)}
           onEscapeKey={(): void => setIsOpen(false)}

package/src/Focusable/Focusable.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, type HTMLAttributes, type ReactNode } from 'react'
 import classnames from 'classnames'
 import { useFocusable, type FocusableOptions } from 'react-aria'
-import styles from './Focusable.module.scss'
+import styles from './Focusable.module.css'
 
 export type FocusableProps = {
   children: ReactNode

package/src/Menu/Menu.module.css

@@ -1,14 +1,13 @@
 @layer kz-components {
   .menu {
-    background-color: var(--color-white);
     color: var(--color-purple-800);
     width: 248px;
+    flex: 1 1 auto;
+    min-height: 0;
     max-height: 22rem;
     overflow: auto;
     padding-block: var(--spacing-6);
     outline: none;
-    border-radius: var(--border-solid-border-radius);
-    box-shadow: var(--shadow-large-box-shadow);
   }
 
   .menu :global(.react-aria-Header) {

package/src/Menu/MenuPopover.module.css

@@ -0,0 +1,9 @@
+@layer kz-components {
+  .menuPopover {
+    display: flex;
+    overflow: hidden;
+    border-radius: var(--border-solid-border-radius);
+    box-shadow: var(--shadow-large-box-shadow);
+    background-color: var(--color-white);
+  }
+}

package/src/Menu/MenuPopover.tsx

@@ -1,5 +1,7 @@
 import React, { forwardRef } from 'react'
 import { Popover, type PopoverProps } from 'react-aria-components'
+import { mergeClassNames } from '~components/utils/mergeClassNames'
+import styles from './MenuPopover.module.css'
 
 export type MenuPopoverProps = PopoverProps
 
@@ -7,6 +9,8 @@ export type MenuPopoverProps = PopoverProps
  * Overlay element for holding a <Menu>
  */
 export const MenuPopover = forwardRef<HTMLDivElement, MenuPopoverProps>(
-  (props, ref): JSX.Element => <Popover ref={ref} {...props} />,
+  ({ className, ...props }, ref): JSX.Element => (
+    <Popover ref={ref} className={mergeClassNames(styles.menuPopover, className)} {...props} />
+  ),
 )
 MenuPopover.displayName = 'MenuPopover'

package/src/SearchField/SearchField.module.css

@@ -0,0 +1,6 @@
+@layer kz-components {
+  .label {
+    display: block;
+    margin-bottom: var(--spacing-xs);
+  }
+}

package/src/SearchField/SearchField.tsx

@@ -1,7 +1,7 @@
 import React, { useId } from 'react'
 import { InputSearch, type InputSearchProps } from '~components/Input/InputSearch'
 import { Label } from '~components/Label'
-import styles from './SearchField.module.scss'
+import styles from './SearchField.module.css'
 
 export type SearchFieldProps = Omit<InputSearchProps, 'id'> & {
   id?: string

package/dist/cjs/src/Focusable/Focusable.module.scss.cjs

@@ -1,6 +0,0 @@
-'use strict';
-
-var styles = {
-  "focusableWrapper": "Focusable-module_focusableWrapper__zd-5E"
-};
-module.exports = styles;

package/dist/cjs/src/SearchField/SearchField.module.scss.cjs

@@ -1,6 +0,0 @@
-'use strict';
-
-var styles = {
-  "label": "SearchField-module_label__NxYfn"
-};
-module.exports = styles;

package/dist/esm/src/Focusable/Focusable.module.scss.mjs

@@ -1,4 +0,0 @@
-var styles = {
-  "focusableWrapper": "Focusable-module_focusableWrapper__zd-5E"
-};
-export { styles as default };

package/dist/esm/src/SearchField/SearchField.module.scss.mjs

@@ -1,4 +0,0 @@
-var styles = {
-  "label": "SearchField-module_label__NxYfn"
-};
-export { styles as default };

package/src/SearchField/SearchField.module.scss

@@ -1,8 +0,0 @@
-@import '~@kaizen/design-tokens/sass/spacing';
-
-@layer kz-components {
-  .label {
-    display: block;
-    margin-bottom: $spacing-xs; // @note: add gap between label and input
-  }
-}