@kaizen/components 1.79.0 → 1.79.1

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

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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.79.0",
+  "version": "1.79.1",
   "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,
   }
 

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}')