@kaizen/components 1.73.13 → 1.74.0

package/dist/cjs/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.cjs

@@ -2,6 +2,7 @@
 
 var tslib = require('tslib');
 var React = require('react');
+var i18nReactIntl = require('@cultureamp/i18n-react-intl');
 var focus = require('@react-aria/focus');
 var listbox = require('@react-aria/listbox');
 var utils = require('@react-aria/utils');
@@ -38,6 +39,7 @@ var MultiSelectOption = function (_a) {
     isFocusVisible = _f.isFocusVisible,
     focusProps = _f.focusProps;
   var countElementId = React.useId();
+  var formatNumber = i18nReactIntl.useIntl().formatNumber;
   return React__default.default.createElement("li", tslib.__assign({}, utils.mergeProps(optionProps, focusProps), {
     ref: ref,
     className: classnames__default.default(MultiSelectOption_module.option, classNameOverride, isSelected && MultiSelectOption_module.isSelected, isFocusVisible && MultiSelectOption_module.isFocusVisible, isDisabled && MultiSelectOption_module.isDisabled),
@@ -51,9 +53,22 @@ var MultiSelectOption = function (_a) {
   })), item.rendered, ((_d = item.value) === null || _d === void 0 ? void 0 : _d.count) && React__default.default.createElement("span", {
     id: countElementId,
     className: MultiSelectOption_module.badgeContainer
-  }, React__default.default.createElement(Badge.Badge, {
-    classNameOverride: MultiSelectOption_module.badge
-  }, item.value.count), React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, " available")));
+  }, React__default.default.createElement(i18nReactIntl.FormattedMessage, {
+    defaultMessage: "<Badge>{count}</Badge><VisuallyHidden> available</VisuallyHidden>",
+    id: "filterMultiSelectMultiSelectOption.available",
+    description: "Number of filter items available",
+    values: {
+      count: formatNumber(parseInt(item.value.count)),
+      Badge: function (children) {
+        return React__default.default.createElement(Badge.Badge, {
+          classNameOverride: MultiSelectOption_module.badge
+        }, children);
+      },
+      VisuallyHidden: function (children) {
+        return React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, children);
+      }
+    }
+  })));
 };
 MultiSelectOption.displayName = 'FilterMultiSelect.Option';
 exports.MultiSelectOption = MultiSelectOption;

package/dist/cjs/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/ClearButton/ClearButton.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var i18nReactIntl = require('@cultureamp/i18n-react-intl');
 var classnames = require('classnames');
 var VisuallyHidden = require('../../../../../VisuallyHidden/VisuallyHidden.cjs');
 require('../../../context/MenuTriggerProvider/MenuTriggerProvider.cjs');
@@ -31,7 +32,16 @@ var ClearButton = function () {
         }));
       }
     }
-  }, "Clear", React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, " selections"));
+  }, React__default.default.createElement(i18nReactIntl.FormattedMessage, {
+    defaultMessage: "Clear<VisuallyHidden> selections</VisuallyHidden>",
+    id: "filterMultiSelectClearButton.label",
+    description: "Clear button label for filter multi-select",
+    values: {
+      VisuallyHidden: function (children) {
+        return React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, children);
+      }
+    }
+  }));
 };
 ClearButton.displayName = 'FilterMultiSelect.ClearButton';
 exports.ClearButton = ClearButton;

package/dist/cjs/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/SelectAllButton/SelectAllButton.cjs

@@ -2,6 +2,7 @@
 
 var tslib = require('tslib');
 var React = require('react');
+var i18nReactIntl = require('@cultureamp/i18n-react-intl');
 var classnames = require('classnames');
 require('../../../context/MenuTriggerProvider/MenuTriggerProvider.cjs');
 var SelectionProvider = require('../../../context/SelectionProvider/SelectionProvider.cjs');
@@ -20,6 +21,7 @@ var SelectAllButton = function () {
   var filteredOptions = Array.from(selectionState.collection.getKeys()).filter(function (key) {
     return !disabledOptions.includes(key);
   });
+  var formatMessage = i18nReactIntl.useIntl().formatMessage;
   return React__default.default.createElement("button", {
     type: "button",
     className: classnames__default.default(SelectionControlButton_module.button, selectionState.selectionManager.isSelectAll && SelectionControlButton_module.isDisabled),
@@ -27,7 +29,11 @@ var SelectAllButton = function () {
     onClick: function () {
       return !selectionState.selectionManager.isSelectAll && selectionState.selectionManager.setSelectedKeys(tslib.__spreadArray(tslib.__spreadArray([], selectedOptions, true), filteredOptions, true));
     }
-  }, "Select all");
+  }, formatMessage({
+    defaultMessage: 'Select all',
+    id: 'filterMultiSelectSelectAllButton.label',
+    description: 'Select all button in filter multi select'
+  }));
 };
 SelectAllButton.displayName = 'FilterMultiSelect.SelectAllButton';
 exports.SelectAllButton = SelectAllButton;

package/dist/esm/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.mjs

@@ -1,5 +1,6 @@
 import { __assign } from 'tslib';
 import React, { useId } from 'react';
+import { useIntl, FormattedMessage } from '@cultureamp/i18n-react-intl';
 import { useFocusRing } from '@react-aria/focus';
 import { useOption } from '@react-aria/listbox';
 import { mergeProps } from '@react-aria/utils';
@@ -30,6 +31,7 @@ const MultiSelectOption = /*#__PURE__*/function () {
       isFocusVisible = _f.isFocusVisible,
       focusProps = _f.focusProps;
     var countElementId = useId();
+    var formatNumber = useIntl().formatNumber;
     return /*#__PURE__*/React.createElement("li", __assign({}, mergeProps(optionProps, focusProps), {
       ref: ref,
       className: classnames(styles.option, classNameOverride, isSelected && styles.isSelected, isFocusVisible && styles.isFocusVisible, isDisabled && styles.isDisabled),
@@ -43,9 +45,22 @@ const MultiSelectOption = /*#__PURE__*/function () {
     })), item.rendered, ((_d = item.value) === null || _d === void 0 ? void 0 : _d.count) && (/*#__PURE__*/React.createElement("span", {
       id: countElementId,
       className: styles.badgeContainer
-    }, /*#__PURE__*/React.createElement(Badge, {
-      classNameOverride: styles.badge
-    }, item.value.count), /*#__PURE__*/React.createElement(VisuallyHidden, null, " available"))));
+    }, /*#__PURE__*/React.createElement(FormattedMessage, {
+      defaultMessage: "<Badge>{count}</Badge><VisuallyHidden> available</VisuallyHidden>",
+      id: "filterMultiSelectMultiSelectOption.available",
+      description: "Number of filter items available",
+      values: {
+        count: formatNumber(parseInt(item.value.count)),
+        Badge: function (children) {
+          return /*#__PURE__*/React.createElement(Badge, {
+            classNameOverride: styles.badge
+          }, children);
+        },
+        VisuallyHidden: function (children) {
+          return /*#__PURE__*/React.createElement(VisuallyHidden, null, children);
+        }
+      }
+    }))));
   };
   MultiSelectOption.displayName = 'FilterMultiSelect.Option';
   return MultiSelectOption;

package/dist/esm/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/ClearButton/ClearButton.mjs

@@ -1,4 +1,5 @@
 import React from 'react';
+import { FormattedMessage } from '@cultureamp/i18n-react-intl';
 import classnames from 'classnames';
 import { VisuallyHidden } from '../../../../../VisuallyHidden/VisuallyHidden.mjs';
 import '../../../context/MenuTriggerProvider/MenuTriggerProvider.mjs';
@@ -23,7 +24,16 @@ const ClearButton = /*#__PURE__*/function () {
           }));
         }
       }
-    }, "Clear", /*#__PURE__*/React.createElement(VisuallyHidden, null, " selections"));
+    }, /*#__PURE__*/React.createElement(FormattedMessage, {
+      defaultMessage: "Clear<VisuallyHidden> selections</VisuallyHidden>",
+      id: "filterMultiSelectClearButton.label",
+      description: "Clear button label for filter multi-select",
+      values: {
+        VisuallyHidden: function (children) {
+          return /*#__PURE__*/React.createElement(VisuallyHidden, null, children);
+        }
+      }
+    }));
   };
   ClearButton.displayName = 'FilterMultiSelect.ClearButton';
   return ClearButton;

package/dist/esm/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/SelectAllButton/SelectAllButton.mjs

@@ -1,5 +1,6 @@
 import { __spreadArray } from 'tslib';
 import React from 'react';
+import { useIntl } from '@cultureamp/i18n-react-intl';
 import classnames from 'classnames';
 import '../../../context/MenuTriggerProvider/MenuTriggerProvider.mjs';
 import { useSelectionContext } from '../../../context/SelectionProvider/SelectionProvider.mjs';
@@ -12,6 +13,7 @@ const SelectAllButton = /*#__PURE__*/function () {
     var filteredOptions = Array.from(selectionState.collection.getKeys()).filter(function (key) {
       return !disabledOptions.includes(key);
     });
+    var formatMessage = useIntl().formatMessage;
     return /*#__PURE__*/React.createElement("button", {
       type: "button",
       className: classnames(styles.button, selectionState.selectionManager.isSelectAll && styles.isDisabled),
@@ -19,7 +21,11 @@ const SelectAllButton = /*#__PURE__*/function () {
       onClick: function () {
         return !selectionState.selectionManager.isSelectAll && selectionState.selectionManager.setSelectedKeys(__spreadArray(__spreadArray([], selectedOptions, true), filteredOptions, true));
       }
-    }, "Select all");
+    }, formatMessage({
+      defaultMessage: 'Select all',
+      id: 'filterMultiSelectSelectAllButton.label',
+      description: 'Select all button in filter multi select'
+    }));
   };
   SelectAllButton.displayName = 'FilterMultiSelect.SelectAllButton';
   return SelectAllButton;

package/dist/types/Badge/Badge.d.ts

@@ -1,7 +1,6 @@
-import { type HTMLAttributes } from 'react';
+import { type HTMLAttributes, type PropsWithChildren } from 'react';
 import { type OverrideClassName } from "../types/OverrideClassName";
-type BadgeCommonProps = {
-    children?: string;
+type BadgeCommonProps = PropsWithChildren<{
     /**
      * The "dark" variant is no longer in the UI kit
      */
@@ -14,7 +13,7 @@ type BadgeCommonProps = {
      * Supports "small" and "large" sizes - defaults to "small"
      */
     size?: 'small' | 'large';
-} & OverrideClassName<HTMLAttributes<HTMLSpanElement>>;
+}> & OverrideClassName<HTMLAttributes<HTMLSpanElement>>;
 type DotProps = Omit<BadgeCommonProps, 'variant'> & {
     children?: never;
     variant: 'dot';

package/locales/en.json

@@ -62,6 +62,14 @@
     "description": "Label for the 'date to' field",
     "message": "Date to"
   },
+  "filterMultiSelectClearButton.label": {
+    "description": "Clear button label for filter multi-select",
+    "message": "Clear<VisuallyHidden> selections</VisuallyHidden>"
+  },
+  "filterMultiSelectMultiSelectOption.available": {
+    "description": "Number of filter items available",
+    "message": "<Badge>{count}</Badge><VisuallyHidden> available</VisuallyHidden>"
+  },
   "filterMultiSelectSearchInput.label": {
     "description": "Label for the search input",
     "message": "Filter options by search query"
@@ -70,6 +78,10 @@
     "description": "Placeholder for the search input",
     "message": "Search…"
   },
+  "filterMultiSelectSelectAllButton.label": {
+    "description": "Select all button in filter multi select",
+    "message": "Select all"
+  },
   "inputSearch.clear": {
     "description": "Label for the clear search button",
     "message": "Clear search"

package/package.json

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

package/src/Badge/Badge.tsx

@@ -1,10 +1,14 @@
-import React, { useLayoutEffect, useState, type HTMLAttributes } from 'react'
+import React, {
+  useLayoutEffect,
+  useState,
+  type HTMLAttributes,
+  type PropsWithChildren,
+} from 'react'
 import classnames from 'classnames'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import styles from './Badge.module.css'
 
-type BadgeCommonProps = {
-  children?: string
+type BadgeCommonProps = PropsWithChildren<{
   /**
    * The "dark" variant is no longer in the UI kit
    */
@@ -17,7 +21,8 @@ type BadgeCommonProps = {
    * Supports "small" and "large" sizes - defaults to "small"
    */
   size?: 'small' | 'large'
-} & OverrideClassName<HTMLAttributes<HTMLSpanElement>>
+}> &
+  OverrideClassName<HTMLAttributes<HTMLSpanElement>>
 
 type DotProps = Omit<BadgeCommonProps, 'variant'> & {
   children?: never

package/src/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.spec.tsx

@@ -82,20 +82,20 @@ describe('<MultiSelectOptionWrapper /> - Visual content', () => {
         <MultiSelectOptionWrapper
           item={{
             ...itemMock,
-            value: { ...itemMock.value, count: 'count-mock' },
+            value: { ...itemMock.value, count: '14' },
           }}
         />,
       )
     })
 
     it('shows the count in the badge', () => {
-      const badge = screen.getByText('count-mock')
+      const badge = screen.getByText('14')
       expect(badge).toBeInTheDocument()
     })
 
     it('has aria-description to describe the count are available for this option', () => {
       const option = screen.getByLabelText('label-mock')
-      expect(option).toHaveAccessibleDescription('count-mock available')
+      expect(option).toHaveAccessibleDescription('14 available')
     })
   })
 })

package/src/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.tsx

@@ -1,4 +1,5 @@
 import React, { useId } from 'react'
+import { FormattedMessage, useIntl } from '@cultureamp/i18n-react-intl'
 import { useFocusRing } from '@react-aria/focus'
 import { useOption } from '@react-aria/listbox'
 import { mergeProps } from '@react-aria/utils'
@@ -28,6 +29,7 @@ export const MultiSelectOption = ({
   // focus ring for accessibility
   const { isFocusVisible, focusProps } = useFocusRing()
   const countElementId = useId()
+  const { formatNumber } = useIntl()
 
   return (
     <li
@@ -50,8 +52,20 @@ export const MultiSelectOption = ({
       {item.rendered}
       {item.value?.count && (
         <span id={countElementId} className={styles.badgeContainer}>
-          <Badge classNameOverride={styles.badge}>{item.value.count}</Badge>
-          <VisuallyHidden> available</VisuallyHidden>
+          <FormattedMessage
+            defaultMessage="<Badge>{count}</Badge><VisuallyHidden> available</VisuallyHidden>"
+            id="filterMultiSelectMultiSelectOption.available"
+            description="Number of filter items available"
+            values={{
+              count: formatNumber(parseInt(item.value.count)),
+              Badge: (children: React.ReactNode) => (
+                <Badge classNameOverride={styles.badge}>{children}</Badge>
+              ),
+              VisuallyHidden: (children: React.ReactNode) => (
+                <VisuallyHidden>{children}</VisuallyHidden>
+              ),
+            }}
+          />
         </span>
       )}
     </li>

package/src/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/ClearButton/ClearButton.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { FormattedMessage } from '@cultureamp/i18n-react-intl'
 import classnames from 'classnames'
 import { VisuallyHidden } from '~components/VisuallyHidden'
 import { useSelectionContext } from '../../../context'
@@ -28,7 +29,16 @@ export const ClearButton = (): JSX.Element => {
         // TODO: add announcement here to inform selection cleared
       }
     >
-      Clear<VisuallyHidden> selections</VisuallyHidden>
+      <FormattedMessage
+        defaultMessage="Clear<VisuallyHidden> selections</VisuallyHidden>"
+        id="filterMultiSelectClearButton.label"
+        description="Clear button label for filter multi-select"
+        values={{
+          VisuallyHidden: (children: React.ReactNode) => (
+            <VisuallyHidden>{children}</VisuallyHidden>
+          ),
+        }}
+      />
     </button>
   )
 }

package/src/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/SelectAllButton/SelectAllButton.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { useIntl } from '@cultureamp/i18n-react-intl'
 import classnames from 'classnames'
 import { useSelectionContext } from '../../../context'
 import styles from '../SelectionControlButton.module.scss'
@@ -11,6 +12,8 @@ export const SelectAllButton = (): JSX.Element => {
     (key) => !disabledOptions.includes(key),
   )
 
+  const { formatMessage } = useIntl()
+
   return (
     <button
       type="button"
@@ -26,7 +29,11 @@ export const SelectAllButton = (): JSX.Element => {
         // TODO: add announcement here to inform all selected
       }
     >
-      Select all
+      {formatMessage({
+        defaultMessage: 'Select all',
+        id: 'filterMultiSelectSelectAllButton.label',
+        description: 'Select all button in filter multi select',
+      })}
     </button>
   )
 }

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

@@ -62,8 +62,11 @@ export const OnButton: Story = {
 
     await step('Escape closes', async () => {
       await userEvent.tab() // focus
+      await waitFor(() => expect(canvas.getByRole('tooltip')).toBeVisible())
       await userEvent.keyboard('{Escape}')
-      await waitFor(() => expect(canvas.queryByRole('tooltip')).toBeNull())
+      await waitFor(() => expect(canvas.queryByRole('tooltip')).toBeNull(), {
+        timeout: 5000,
+      })
       await userEvent.tab() // unfocus
     })
   },