@kaizen/components 1.73.13 → 1.74.1

package/locales/tl.json

@@ -61,6 +61,14 @@
     "description" : "Label for the 'date to' field",
     "message" : "Petsa hanggang"
   },
+  "filterMultiSelectClearButton.label" : {
+    "description" : "Clear button label for filter multi-select",
+    "message" : "I-clear ang<VisuallyHidden> mga pinili</VisuallyHidden>"
+  },
+  "filterMultiSelectMultiSelectOption.available" : {
+    "description" : "Number of filter items available",
+    "message" : "<Badge>{count}</Badge><VisuallyHidden> ang available</VisuallyHidden>"
+  },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",
     "message" : "I-filter ang mga opsyon ayon sa query sa paghahanap"
@@ -69,6 +77,10 @@
     "description" : "Placeholder for the search input",
     "message" : "Hanapin..."
   },
+  "filterMultiSelectSelectAllButton.label" : {
+    "description" : "Select all button in filter multi select",
+    "message" : "Piliin lahat"
+  },
   "inputSearch.clear" : {
     "description" : "Label for the clear search button",
     "message" : "I-clear ang paghahanap"

package/locales/tr.json

@@ -61,6 +61,14 @@
     "description" : "Label for the 'date to' field",
     "message" : "Şu tarihe kadar"
   },
+  "filterMultiSelectClearButton.label" : {
+    "description" : "Clear button label for filter multi-select",
+    "message" : "<VisuallyHidden>Seçimleri</VisuallyHidden> temizle"
+  },
+  "filterMultiSelectMultiSelectOption.available" : {
+    "description" : "Number of filter items available",
+    "message" : "<Badge>{count}</Badge><VisuallyHidden> kullanılabilir</VisuallyHidden>"
+  },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",
     "message" : "Seçenekleri arama sorgusuna göre filtrele"
@@ -69,6 +77,10 @@
     "description" : "Placeholder for the search input",
     "message" : "Ara..."
   },
+  "filterMultiSelectSelectAllButton.label" : {
+    "description" : "Select all button in filter multi select",
+    "message" : "Tümünü seç"
+  },
   "inputSearch.clear" : {
     "description" : "Label for the clear search button",
     "message" : "Aramayı temizle"

package/locales/uk.json

@@ -61,6 +61,14 @@
     "description" : "Label for the 'date to' field",
     "message" : "Дата по"
   },
+  "filterMultiSelectClearButton.label" : {
+    "description" : "Clear button label for filter multi-select",
+    "message" : "Очистити<VisuallyHidden> виділення</VisuallyHidden>"
+  },
+  "filterMultiSelectMultiSelectOption.available" : {
+    "description" : "Number of filter items available",
+    "message" : "<Badge>{count}</Badge><VisuallyHidden> доступно</VisuallyHidden>"
+  },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",
     "message" : "Параметри фільтрування за пошуковим запитом"
@@ -69,6 +77,10 @@
     "description" : "Placeholder for the search input",
     "message" : "Пошук…"
   },
+  "filterMultiSelectSelectAllButton.label" : {
+    "description" : "Select all button in filter multi select",
+    "message" : "Вибрати все"
+  },
   "inputSearch.clear" : {
     "description" : "Label for the clear search button",
     "message" : "Очистити пошук"

package/locales/vi.json

@@ -61,6 +61,14 @@
     "description" : "Label for the 'date to' field",
     "message" : "Ngày đến"
   },
+  "filterMultiSelectClearButton.label" : {
+    "description" : "Clear button label for filter multi-select",
+    "message" : "Xóa<VisuallyHidden> lựa chọn</VisuallyHidden>"
+  },
+  "filterMultiSelectMultiSelectOption.available" : {
+    "description" : "Number of filter items available",
+    "message" : "<Badge>{count}</Badge><VisuallyHidden> có sẵn</VisuallyHidden>"
+  },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",
     "message" : "Tùy chọn lọc theo truy vấn tìm kiếm"
@@ -69,6 +77,10 @@
     "description" : "Placeholder for the search input",
     "message" : "Tìm kiếm…"
   },
+  "filterMultiSelectSelectAllButton.label" : {
+    "description" : "Select all button in filter multi select",
+    "message" : "Chọn tất cả"
+  },
   "inputSearch.clear" : {
     "description" : "Label for the clear search button",
     "message" : "Tìm kiếm rõ ràng"

package/locales/zh-TW.json

@@ -61,6 +61,14 @@
     "description" : "Label for the 'date to' field",
     "message" : "結束日期："
   },
+  "filterMultiSelectClearButton.label" : {
+    "description" : "Clear button label for filter multi-select",
+    "message" : "清除<VisuallyHidden>選取項目</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" : "依搜尋查詢篩選選項"
@@ -69,6 +77,10 @@
     "description" : "Placeholder for the search input",
     "message" : "搜尋..."
   },
+  "filterMultiSelectSelectAllButton.label" : {
+    "description" : "Select all button in filter multi select",
+    "message" : "全選"
+  },
   "inputSearch.clear" : {
     "description" : "Label for the clear search button",
     "message" : "清除搜尋"

package/locales/zh.json

@@ -61,6 +61,14 @@
     "description" : "Label for the 'date to' field",
     "message" : "结束日期"
   },
+  "filterMultiSelectClearButton.label" : {
+    "description" : "Clear button label for filter multi-select",
+    "message" : "清除<VisuallyHidden>选择</VisuallyHidden>"
+  },
+  "filterMultiSelectMultiSelectOption.available" : {
+    "description" : "Number of filter items available",
+    "message" : "<Badge>{count}</Badge><VisuallyHidden> 个可用</VisuallyHidden>"
+  },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",
     "message" : "按搜索查询筛选选项"
@@ -69,6 +77,10 @@
     "description" : "Placeholder for the search input",
     "message" : "搜索…"
   },
+  "filterMultiSelectSelectAllButton.label" : {
+    "description" : "Select all button in filter multi select",
+    "message" : "全选"
+  },
   "inputSearch.clear" : {
     "description" : "Label for the clear search button",
     "message" : "清除搜索"

package/package.json

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