@kaizen/components 3.0.4 → 3.0.6

package/dist/cjs/src/Filter/Filter/Filter.cjs

@@ -50,6 +50,7 @@ var Filter = function (_a) {
   }, restProps), React__default.default.cloneElement(trigger, {
     ref: filterButtonRef
   }), isRefLoaded && isOpen && React__default.default.createElement(reactFocusOn.FocusOn, {
+    preventScrollOnFocus: true,
     scrollLock: false,
     onClickOutside: function () {
       return setIsOpen(false);

package/dist/cjs/src/Focusable/Focusable.cjs

@@ -4,7 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
 var reactAria = require('react-aria');
-var Focusable_module = require('./Focusable.module.scss.cjs');
+var Focusable_module = require('./Focusable.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

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

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

package/dist/cjs/src/Menu/MenuPopover.cjs

@@ -3,6 +3,8 @@
 var tslib = require('tslib');
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
+var mergeClassNames = require('../utils/mergeClassNames.cjs');
+var MenuPopover_module = require('./MenuPopover.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e
@@ -13,9 +15,12 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 /**
  * Overlay element for holding a <Menu>
  */
-var MenuPopover = React.forwardRef(function (props, ref) {
+var MenuPopover = React.forwardRef(function (_a, ref) {
+  var className = _a.className,
+    props = tslib.__rest(_a, ["className"]);
   return React__default.default.createElement(reactAriaComponents.Popover, tslib.__assign({
-    ref: ref
+    ref: ref,
+    className: mergeClassNames.mergeClassNames(MenuPopover_module.menuPopover, className)
   }, props));
 });
 MenuPopover.displayName = 'MenuPopover';

package/dist/cjs/src/Menu/MenuPopover.module.css.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+var styles = {
+  "menuPopover": "MenuPopover-module_menuPopover__lPRKM"
+};
+module.exports = styles;

package/dist/cjs/src/SearchField/SearchField.cjs

@@ -4,7 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var InputSearch = require('../Input/InputSearch/InputSearch.cjs');
 var Label = require('../Label/Label.cjs');
-var SearchField_module = require('./SearchField.module.scss.cjs');
+var SearchField_module = require('./SearchField.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/src/SearchField/{SearchField.module.scss.cjs → SearchField.module.css.cjs}

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

package/dist/esm/src/Filter/Filter/Filter.mjs

@@ -42,6 +42,7 @@ const Filter = /*#__PURE__*/function () {
     }, restProps), /*#__PURE__*/React.cloneElement(trigger, {
       ref: filterButtonRef
     }), isRefLoaded && isOpen && (/*#__PURE__*/React.createElement(FocusOn, {
+      preventScrollOnFocus: true,
       scrollLock: false,
       onClickOutside: function () {
         return setIsOpen(false);

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

@@ -2,7 +2,7 @@ import { __rest, __assign } from 'tslib';
 import React, { useRef } from 'react';
 import classnames from 'classnames';
 import { useFocusable } from 'react-aria';
-import styles from './Focusable.module.scss.mjs';
+import styles from './Focusable.module.css.mjs';
 var Focusable = function (_a) {
   var children = _a.children,
     className = _a.className,

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

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

package/dist/esm/src/Menu/MenuPopover.mjs

@@ -1,14 +1,19 @@
-import { __assign } from 'tslib';
+import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import { Popover } from 'react-aria-components';
+import { mergeClassNames } from '../utils/mergeClassNames.mjs';
+import styles from './MenuPopover.module.css.mjs';
 
 /**
  * Overlay element for holding a <Menu>
  */
 const MenuPopover = /*#__PURE__*/function () {
-  const MenuPopover = /*#__PURE__*/forwardRef(function (props, ref) {
+  const MenuPopover = /*#__PURE__*/forwardRef(function (_a, ref) {
+    var className = _a.className,
+      props = __rest(_a, ["className"]);
     return /*#__PURE__*/React.createElement(Popover, __assign({
-      ref: ref
+      ref: ref,
+      className: mergeClassNames(styles.menuPopover, className)
     }, props));
   });
   MenuPopover.displayName = 'MenuPopover';

package/dist/esm/src/Menu/MenuPopover.module.css.mjs

@@ -0,0 +1,4 @@
+var styles = {
+  "menuPopover": "MenuPopover-module_menuPopover__lPRKM"
+};
+export { styles as default };

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

@@ -2,7 +2,7 @@ import { __rest, __assign } from 'tslib';
 import React, { useId } from 'react';
 import { InputSearch } from '../Input/InputSearch/InputSearch.mjs';
 import { Label } from '../Label/Label.mjs';
-import styles from './SearchField.module.scss.mjs';
+import styles from './SearchField.module.css.mjs';
 
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896613/Search+Field Guidance} |

package/dist/esm/src/SearchField/{SearchField.module.scss.mjs → SearchField.module.css.mjs}

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

package/dist/styles.css

@@ -4684,10 +4684,11 @@
 }
 
 @layer kz-components {
-  .Focusable-module_focusableWrapper__zd-5E {
+  .Focusable-module_focusableWrapper__uU2wP {
     display: inline-flex;
   }
 }
+
 @layer kz-components {
   .GuidanceBlock-module_banner__7FT39.GuidanceBlock-module_noMaxWidth__UCCUk {
     max-width: inherit;
@@ -5763,15 +5764,14 @@
 
 @layer kz-components {
   .Menu-module_menu__-Dayv {
-    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-module_menu__-Dayv .react-aria-Header {
@@ -5845,6 +5845,16 @@
   }
 }
 
+@layer kz-components {
+  .MenuPopover-module_menuPopover__lPRKM {
+    display: flex;
+    overflow: hidden;
+    border-radius: var(--border-solid-border-radius);
+    box-shadow: var(--shadow-large-box-shadow);
+    background-color: var(--color-white);
+  }
+}
+
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -8469,13 +8479,13 @@
     min-height: calc((var(--typography-paragraph-body-line-height, 1.5rem) + var(--spacing-16, 1rem)) * 20 - var(--spacing-16, 1rem));
   }
 }
-/** THIS IS AN AUTOGENERATED FILE **/
 @layer kz-components {
-  .SearchField-module_label__NxYfn {
+  .SearchField-module_label__QRNGF {
     display: block;
-    margin-bottom: var(--spacing-xs, 0.375rem);
+    margin-bottom: var(--spacing-xs);
   }
 }
+
 @layer kz-components {
   .SVG-module_icon__EKRwX {
     width: 20px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "3.0.4",
+  "version": "3.0.6",
   "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,7 +130,7 @@
   },
   "devDependencies": {
     "@cultureamp/frontend-apis": "13.3.0",
-    "@cultureamp/i18n-react-intl": "^4.0.1",
+    "@cultureamp/i18n-react-intl": "^4.1.0",
     "@cultureamp/package-bundler": "^2.4.4",
     "@testing-library/dom": "^10.4.1",
     "@types/jest-axe": "^3.5.9",

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/esm/src/Focusable/Focusable.module.scss.mjs

@@ -1,4 +0,0 @@
-var styles = {
-  "focusableWrapper": "Focusable-module_focusableWrapper__zd-5E"
-};
-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
-  }
-}