@kaizen/components 1.79.0 → 1.79.2

package/dist/cjs/src/__next__/Select/Select.cjs

@@ -52,8 +52,9 @@ var Select = function (_a) {
     _c = _a.placeholder,
     placeholder = _c === void 0 ? '' : _c,
     isDisabled = _a.isDisabled,
+    onSelectionChange = _a.onSelectionChange,
     portalContainerId = _a.portalContainerId,
-    restProps = tslib.__rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "portalContainerId"]);
+    restProps = tslib.__rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "onSelectionChange", "portalContainerId"]);
   var refs = reactDom.useFloating().refs;
   var triggerRef = refs.reference;
   var fallbackId = React.useId();
@@ -70,7 +71,10 @@ var Select = function (_a) {
     selectedKey: typeof selectedKey === 'number' ? selectedKey.toString() : selectedKey,
     description: description,
     placeholder: placeholder,
-    isDisabled: isDisabled
+    isDisabled: isDisabled,
+    onSelectionChange: onSelectionChange ? function (key) {
+      return onSelectionChange(key);
+    } : undefined
   }, restProps);
   var state = select.useSelectState(ariaSelectProps);
   var _d = select$1.useSelect(ariaSelectProps, state, triggerRef),
@@ -128,7 +132,8 @@ var Select = function (_a) {
   }, React__default.default.createElement(SelectContext.SelectProvider, {
     state: state
   }, React__default.default.createElement(SelectPopoverContents.SelectPopoverContents, {
-    menuProps: menuProps
+    menuProps: menuProps,
+    popoverRef: refs.floating
   }, children)))), validationMessage && React__default.default.createElement(FieldMessage.FieldMessage, tslib.__assign({}, errorMessageProps, {
     id: validationId,
     message: validationMessage,

package/dist/cjs/src/__next__/Select/subcomponents/Overlay/Overlay.cjs

@@ -14,7 +14,8 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var Overlay = function (_a) {
   var children = _a.children,
     classNameOverride = _a.classNameOverride,
-    restProps = tslib.__rest(_a, ["children", "classNameOverride"]);
+    popoverRef = _a.popoverRef,
+    restProps = tslib.__rest(_a, ["children", "classNameOverride", "popoverRef"]);
   var state = SelectContext.useSelectContext().state;
   // Handle events that should cause the menu to close,
   // e.g. blur, clicking outside, or pressing the escape key.
@@ -23,13 +24,12 @@ var Overlay = function (_a) {
     isDismissable: true,
     isOpen: state.isOpen,
     onClose: state.close
-  }, overlayRef).overlayProps;
+  }, popoverRef !== null && popoverRef !== void 0 ? popoverRef : overlayRef).overlayProps;
   // Wrap in <FocusScope> so that focus is restored back to the trigger when the menu is closed
   // and auto focus on the first focusable item after loading. (disable eslint no-autofocus error for it)
   // In addition, add hidden <DismissButton> components at the start and end of the list
   // to allow screen reader users to dismiss the popup easily.
   return React__default.default.createElement("div", tslib.__assign({
-    ref: overlayRef,
     className: classNameOverride
   }, overlayProps, restProps), React__default.default.createElement(focus.FocusScope, {
     autoFocus: false,

package/dist/cjs/src/__next__/Select/subcomponents/SelectPopoverContents/SelectPopoverContents.cjs

@@ -14,7 +14,8 @@ function _interopDefault(e) {
 var React__default = /*#__PURE__*/_interopDefault(React);
 var SelectPopoverContents = function (_a) {
   var children = _a.children,
-    menuProps = _a.menuProps;
+    menuProps = _a.menuProps,
+    popoverRef = _a.popoverRef;
   var state = SelectContext.useSelectContext().state;
   // The collection structure is set by useSelectState's `children`
   // which we have used a util to ensure the following structure
@@ -23,7 +24,9 @@ var SelectPopoverContents = function (_a) {
   var itemNodes = Array.from(state.collection);
   return React__default.default.createElement("div", {
     className: SelectPopoverContents_module.selectPopoverContents
-  }, React__default.default.createElement(Overlay.Overlay, null, React__default.default.createElement(ListBox.ListBox, {
+  }, React__default.default.createElement(Overlay.Overlay, {
+    popoverRef: popoverRef
+  }, React__default.default.createElement(ListBox.ListBox, {
     menuProps: menuProps
   }, children ? children({
     items: itemNodes

package/dist/esm/src/__next__/Select/Select.mjs

@@ -44,8 +44,9 @@ const Select = /*#__PURE__*/function () {
       _c = _a.placeholder,
       placeholder = _c === void 0 ? '' : _c,
       isDisabled = _a.isDisabled,
+      onSelectionChange = _a.onSelectionChange,
       portalContainerId = _a.portalContainerId,
-      restProps = __rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "portalContainerId"]);
+      restProps = __rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "onSelectionChange", "portalContainerId"]);
     var refs = useFloating().refs;
     var triggerRef = refs.reference;
     var fallbackId = useId();
@@ -62,7 +63,10 @@ const Select = /*#__PURE__*/function () {
       selectedKey: typeof selectedKey === 'number' ? selectedKey.toString() : selectedKey,
       description: description,
       placeholder: placeholder,
-      isDisabled: isDisabled
+      isDisabled: isDisabled,
+      onSelectionChange: onSelectionChange ? function (key) {
+        return onSelectionChange(key);
+      } : undefined
     }, restProps);
     var state = useSelectState(ariaSelectProps);
     var _d = useSelect(ariaSelectProps, state, triggerRef),
@@ -120,7 +124,8 @@ const Select = /*#__PURE__*/function () {
     }, /*#__PURE__*/React.createElement(SelectProvider, {
       state: state
     }, /*#__PURE__*/React.createElement(SelectPopoverContents, {
-      menuProps: menuProps
+      menuProps: menuProps,
+      popoverRef: refs.floating
     }, children))))), validationMessage && (/*#__PURE__*/React.createElement(FieldMessage, __assign({}, errorMessageProps, {
       id: validationId,
       message: validationMessage,

package/dist/esm/src/__next__/Select/subcomponents/Overlay/Overlay.mjs

@@ -7,7 +7,8 @@ const Overlay = /*#__PURE__*/function () {
   const Overlay = function (_a) {
     var children = _a.children,
       classNameOverride = _a.classNameOverride,
-      restProps = __rest(_a, ["children", "classNameOverride"]);
+      popoverRef = _a.popoverRef,
+      restProps = __rest(_a, ["children", "classNameOverride", "popoverRef"]);
     var state = useSelectContext().state;
     // Handle events that should cause the menu to close,
     // e.g. blur, clicking outside, or pressing the escape key.
@@ -16,13 +17,12 @@ const Overlay = /*#__PURE__*/function () {
       isDismissable: true,
       isOpen: state.isOpen,
       onClose: state.close
-    }, overlayRef).overlayProps;
+    }, popoverRef !== null && popoverRef !== void 0 ? popoverRef : overlayRef).overlayProps;
     // Wrap in <FocusScope> so that focus is restored back to the trigger when the menu is closed
     // and auto focus on the first focusable item after loading. (disable eslint no-autofocus error for it)
     // In addition, add hidden <DismissButton> components at the start and end of the list
     // to allow screen reader users to dismiss the popup easily.
     return /*#__PURE__*/React.createElement("div", __assign({
-      ref: overlayRef,
       className: classNameOverride
     }, overlayProps, restProps), /*#__PURE__*/React.createElement(FocusScope, {
       autoFocus: false,

package/dist/esm/src/__next__/Select/subcomponents/SelectPopoverContents/SelectPopoverContents.mjs

@@ -7,7 +7,8 @@ import styles from './SelectPopoverContents.module.scss.mjs';
 const SelectPopoverContents = /*#__PURE__*/function () {
   const SelectPopoverContents = function (_a) {
     var children = _a.children,
-      menuProps = _a.menuProps;
+      menuProps = _a.menuProps,
+      popoverRef = _a.popoverRef;
     var state = useSelectContext().state;
     // The collection structure is set by useSelectState's `children`
     // which we have used a util to ensure the following structure
@@ -16,7 +17,9 @@ const SelectPopoverContents = /*#__PURE__*/function () {
     var itemNodes = Array.from(state.collection);
     return /*#__PURE__*/React.createElement("div", {
       className: styles.selectPopoverContents
-    }, /*#__PURE__*/React.createElement(Overlay, null, /*#__PURE__*/React.createElement(ListBox, {
+    }, /*#__PURE__*/React.createElement(Overlay, {
+      popoverRef: popoverRef
+    }, /*#__PURE__*/React.createElement(ListBox, {
       menuProps: menuProps
     }, children ? children({
       items: itemNodes

package/dist/types/__next__/Select/Select.d.ts

@@ -5,7 +5,7 @@ import { type Key } from '@react-types/shared';
 import { type OverrideClassName } from "../../types/OverrideClassName";
 import { type SelectPopoverContentsProps, type SelectToggleProps } from './subcomponents';
 import { type SelectItem, type SelectOption } from './types';
-type OmittedAriaSelectProps = 'children' | 'items';
+type OmittedAriaSelectProps = 'children' | 'items' | 'onSelectionChange';
 export type SelectProps<Option extends SelectOption = SelectOption> = {
     /**
      * Item objects in the collection.
@@ -45,13 +45,17 @@ export type SelectProps<Option extends SelectOption = SelectOption> = {
      * Use the `labelText` prop to provide a concise name, and the `description` prop for any help text.
      */
     placeholder?: string;
+    /**
+     * Handler that is called when the selection changes.
+     */
+    onSelectionChange?: (key: Key) => void;
 } & OverrideClassName<Omit<AriaSelectProps<Option>, OmittedAriaSelectProps>>;
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-select--docs Storybook}
  */
 export declare const Select: {
-    <Option extends SelectOption = SelectOption>({ label, items, id: propsId, trigger, children, status, validationMessage, isReversed, isFullWidth, disabledValues, classNameOverride, selectedKey, description, placeholder, isDisabled, portalContainerId, ...restProps }: SelectProps<Option>): JSX.Element;
+    <Option extends SelectOption = SelectOption>({ label, items, id: propsId, trigger, children, status, validationMessage, isReversed, isFullWidth, disabledValues, classNameOverride, selectedKey, description, placeholder, isDisabled, onSelectionChange, portalContainerId, ...restProps }: SelectProps<Option>): JSX.Element;
     displayName: string;
     Section: {
         <Option extends SelectOption = SelectOption>({ section, }: import("./subcomponents").ListBoxSectionProps<Option>): JSX.Element;

package/dist/types/__next__/Select/subcomponents/Overlay/Overlay.d.ts

@@ -3,8 +3,9 @@ import { type OverrideClassName } from "../../../../types/OverrideClassName";
 import { type SelectOption } from '../../types';
 export type OverlayProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
     children: React.ReactNode;
+    popoverRef?: React.RefObject<Element | null>;
 };
 export declare const Overlay: {
-    <Option extends SelectOption>({ children, classNameOverride, ...restProps }: OverlayProps): JSX.Element;
+    <Option extends SelectOption>({ children, classNameOverride, popoverRef, ...restProps }: OverlayProps): JSX.Element;
     displayName: string;
 };

package/dist/types/__next__/Select/subcomponents/SelectPopoverContents/SelectPopoverContents.d.ts

@@ -6,8 +6,9 @@ export type SelectPopoverContentsProps<Option extends SelectOption> = {
         items: SelectItemNode<Option>[];
     }) => React.ReactNode;
     menuProps: AriaListBoxOptions<SelectItem<Option>>;
+    popoverRef?: React.RefObject<Element | null>;
 };
 export declare const SelectPopoverContents: {
-    <Option extends SelectOption>({ children, menuProps, }: SelectPopoverContentsProps<Option>): JSX.Element;
+    <Option extends SelectOption>({ children, menuProps, popoverRef, }: SelectPopoverContentsProps<Option>): JSX.Element;
     displayName: string;
 };

package/package.json

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

package/src/__next__/Select/Select.tsx

@@ -25,7 +25,7 @@ import { getDisabledKeysFromItems } from './utils/getDisabledKeysFromItems'
 import { transformSelectItemToCollectionElement } from './utils/transformSelectItemToCollectionElement'
 import styles from './Select.module.scss'
 
-type OmittedAriaSelectProps = 'children' | 'items'
+type OmittedAriaSelectProps = 'children' | 'items' | 'onSelectionChange'
 
 export type SelectProps<Option extends SelectOption = SelectOption> = {
   /**
@@ -70,6 +70,10 @@ export type SelectProps<Option extends SelectOption = SelectOption> = {
    * Use the `labelText` prop to provide a concise name, and the `description` prop for any help text.
    */
   placeholder?: string
+  /**
+   * Handler that is called when the selection changes.
+   */
+  onSelectionChange?: (key: Key) => void
 } & OverrideClassName<Omit<AriaSelectProps<Option>, OmittedAriaSelectProps>>
 
 /**
@@ -92,6 +96,7 @@ export const Select = <Option extends SelectOption = SelectOption>({
   description,
   placeholder = '',
   isDisabled,
+  onSelectionChange,
   portalContainerId,
   ...restProps
 }: SelectProps<Option>): JSX.Element => {
@@ -114,6 +119,7 @@ export const Select = <Option extends SelectOption = SelectOption>({
     description,
     placeholder,
     isDisabled,
+    onSelectionChange: onSelectionChange ? (key) => onSelectionChange(key!) : undefined,
     ...restProps,
   }
 
@@ -177,7 +183,9 @@ export const Select = <Option extends SelectOption = SelectOption>({
         {state.isOpen && (
           <Popover id={popoverId} portalContainer={portalContainer} refs={refs}>
             <SelectProvider<Option> state={state}>
-              <SelectPopoverContents menuProps={menuProps}>{children}</SelectPopoverContents>
+              <SelectPopoverContents menuProps={menuProps} popoverRef={refs.floating}>
+                {children}
+              </SelectPopoverContents>
             </SelectProvider>
           </Popover>
         )}

package/src/__next__/Select/subcomponents/Overlay/Overlay.tsx

@@ -7,11 +7,13 @@ import { type SelectOption } from '../../types'
 
 export type OverlayProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
   children: React.ReactNode
+  popoverRef?: React.RefObject<Element | null>
 }
 
 export const Overlay = <Option extends SelectOption>({
   children,
   classNameOverride,
+  popoverRef,
   ...restProps
 }: OverlayProps): JSX.Element => {
   const { state } = useSelectContext<Option>()
@@ -21,7 +23,7 @@ export const Overlay = <Option extends SelectOption>({
   const overlayRef = React.useRef<HTMLDivElement>(null)
   const { overlayProps } = useOverlay(
     { isDismissable: true, isOpen: state.isOpen, onClose: state.close },
-    overlayRef,
+    popoverRef ?? overlayRef,
   )
 
   // Wrap in <FocusScope> so that focus is restored back to the trigger when the menu is closed
@@ -29,7 +31,7 @@ export const Overlay = <Option extends SelectOption>({
   // In addition, add hidden <DismissButton> components at the start and end of the list
   // to allow screen reader users to dismiss the popup easily.
   return (
-    <div ref={overlayRef} className={classNameOverride} {...overlayProps} {...restProps}>
+    <div className={classNameOverride} {...overlayProps} {...restProps}>
       {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
       <FocusScope autoFocus={false} restoreFocus>
         <DismissButton onDismiss={state.close} />

package/src/__next__/Select/subcomponents/SelectPopoverContents/SelectPopoverContents.tsx

@@ -10,11 +10,13 @@ import styles from './SelectPopoverContents.module.scss'
 export type SelectPopoverContentsProps<Option extends SelectOption> = {
   children?: (args: { items: SelectItemNode<Option>[] }) => React.ReactNode
   menuProps: AriaListBoxOptions<SelectItem<Option>>
+  popoverRef?: React.RefObject<Element | null>
 }
 
 export const SelectPopoverContents = <Option extends SelectOption>({
   children,
   menuProps,
+  popoverRef,
 }: SelectPopoverContentsProps<Option>): JSX.Element => {
   const { state } = useSelectContext<Option>()
 
@@ -26,7 +28,7 @@ export const SelectPopoverContents = <Option extends SelectOption>({
 
   return (
     <div className={styles.selectPopoverContents}>
-      <Overlay<Option>>
+      <Overlay<Option> popoverRef={popoverRef}>
         <ListBox<Option> menuProps={menuProps}>
           {children ? children({ items: itemNodes }) : <ListItems<Option> items={itemNodes} />}
         </ListBox>

package/src/__next__/Tooltip/_docs/Tooltip.spec.stories.tsx

@@ -45,23 +45,29 @@ export const OnButton: Story = {
     const button = canvas.queryByRole('button') ?? canvas.getByRole('link')
 
     await step('Hover shows', async () => {
-      await waitFor(() => userEvent.unhover(button))
+      await waitFor(() => userEvent.click(canvasElement)) // needed to refocus the browser window
+
       await userEvent.hover(button)
-      const tooltip = canvas.findByRole('tooltip')
-      await expect(await tooltip).toBeInTheDocument()
-      await expect((await tooltip).checkVisibility()).toBe(true)
+      await expect(await canvas.findByRole('tooltip')).toBeInTheDocument()
+      await expect((await canvas.findByRole('tooltip')).checkVisibility()).toBe(true)
       await expect(button).toHaveAttribute('aria-describedby', canvas.getByRole('tooltip').id)
       await userEvent.unhover(button)
     })
 
     await step('Focus shows', async () => {
+      await waitFor(() => userEvent.click(canvasElement)) // needed to refocus the browser window
+
       await userEvent.tab() // focus
-      await waitFor(() => expect(canvas.getByRole('tooltip')).toBeVisible())
+      await expect((await canvas.findByRole('tooltip')).checkVisibility()).toBe(true)
+      await expect(await canvas.findByRole('tooltip')).toBeInTheDocument()
       await userEvent.tab() // unfocus
-      await waitFor(() => expect(canvas.queryByRole('tooltip')).toBeNull())
+      waitFor(() => expect(canvas.queryByRole('tooltip')).toBeNull())
+      waitFor(async () => expect(await canvas.queryByText('Tooltip content')).toBeNull())
     })
 
     await step('Escape closes', async () => {
+      await waitFor(() => userEvent.click(canvasElement)) // needed to refocus the browser window
+
       await userEvent.tab() // focus
       await waitFor(() => expect(canvas.getByRole('tooltip')).toBeVisible())
       await userEvent.keyboard('{Escape}')