@kaizen/components 1.49.2 → 1.50.0

package/locales/km-KH.json

@@ -21,6 +21,18 @@
     "description" : "Label for the 'date to' field",
     "message" : "កាលបរិច្ឆេទទៅ"
   },
+  "filterMultiSelectSearchInput.label" : {
+    "description" : "Label for the search input",
+    "message" : "Filter options by search query"
+  },
+  "filterMultiSelectSearchInput.placeholder" : {
+    "description" : "Placeholder for the search input",
+    "message" : "ស្វែងរក..."
+  },
+  "inputSearch.clear" : {
+    "description" : "Label for the clear search button",
+    "message" : "Clear search"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "ទាក់ទងផ្នែកគាំទ្រ"

package/locales/ko.json

@@ -21,6 +21,18 @@
     "description" : "Label for the 'date to' field",
     "message" : "종료 날짜"
   },
+  "filterMultiSelectSearchInput.label" : {
+    "description" : "Label for the search input",
+    "message" : "검색어별 필터링 옵션"
+  },
+  "filterMultiSelectSearchInput.placeholder" : {
+    "description" : "Placeholder for the search input",
+    "message" : "검색..."
+  },
+  "inputSearch.clear" : {
+    "description" : "Label for the clear search button",
+    "message" : "검색 지우기"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "지원 센터에 문의하십시오."

package/locales/lt.json

@@ -21,6 +21,18 @@
     "description" : "Label for the 'date to' field",
     "message" : "Data iki"
   },
+  "filterMultiSelectSearchInput.label" : {
+    "description" : "Label for the search input",
+    "message" : "Filtruoti parinktis pagal paieškos užklausą"
+  },
+  "filterMultiSelectSearchInput.placeholder" : {
+    "description" : "Placeholder for the search input",
+    "message" : "Paieška…"
+  },
+  "inputSearch.clear" : {
+    "description" : "Label for the clear search button",
+    "message" : "Išvalyti paiešką"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "kreipkitės į pagalbos tarnybą"

package/locales/lv.json

@@ -21,6 +21,18 @@
     "description" : "Label for the 'date to' field",
     "message" : "Datums līdz"
   },
+  "filterMultiSelectSearchInput.label" : {
+    "description" : "Label for the search input",
+    "message" : "Filtrēt opcijas pēc meklēšanas vaicājuma"
+  },
+  "filterMultiSelectSearchInput.placeholder" : {
+    "description" : "Placeholder for the search input",
+    "message" : "Meklēt…"
+  },
+  "inputSearch.clear" : {
+    "description" : "Label for the clear search button",
+    "message" : "Notīrīt meklēšanu"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "sazinieties ar atbalsta dienestu"

package/locales/mi.json

@@ -21,6 +21,18 @@
     "description" : "Label for the 'date to' field",
     "message" : "Date to"
   },
+  "filterMultiSelectSearchInput.label" : {
+    "description" : "Label for the search input",
+    "message" : "Filter options by search query"
+  },
+  "filterMultiSelectSearchInput.placeholder" : {
+    "description" : "Placeholder for the search input",
+    "message" : "Rapua"
+  },
+  "inputSearch.clear" : {
+    "description" : "Label for the clear search button",
+    "message" : "Clear search"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "whakapā ki te kapa tautoko."

package/locales/ms.json

@@ -21,6 +21,18 @@
     "description" : "Label for the 'date to' field",
     "message" : "Tarikh hingga"
   },
+  "filterMultiSelectSearchInput.label" : {
+    "description" : "Label for the search input",
+    "message" : "Tapis pilihan mengikut pertanyaan carian"
+  },
+  "filterMultiSelectSearchInput.placeholder" : {
+    "description" : "Placeholder for the search input",
+    "message" : "Cari…"
+  },
+  "inputSearch.clear" : {
+    "description" : "Label for the clear search button",
+    "message" : "Kosongkan carian"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "hubungi bahagian sokongan"

package/locales/nb.json

@@ -21,6 +21,18 @@
     "description" : "Label for the 'date to' field",
     "message" : "Dato til"
   },
+  "filterMultiSelectSearchInput.label" : {
+    "description" : "Label for the search input",
+    "message" : "Filter options by search query"
+  },
+  "filterMultiSelectSearchInput.placeholder" : {
+    "description" : "Placeholder for the search input",
+    "message" : "Søk …"
+  },
+  "inputSearch.clear" : {
+    "description" : "Label for the clear search button",
+    "message" : "Clear search"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "kontakt kundestøtten"

package/locales/nl.json

@@ -21,6 +21,18 @@
     "description" : "Label for the 'date to' field",
     "message" : "Datum tot"
   },
+  "filterMultiSelectSearchInput.label" : {
+    "description" : "Label for the search input",
+    "message" : "Filter options by search query"
+  },
+  "filterMultiSelectSearchInput.placeholder" : {
+    "description" : "Placeholder for the search input",
+    "message" : "Zoeken…"
+  },
+  "inputSearch.clear" : {
+    "description" : "Label for the clear search button",
+    "message" : "Clear search"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "neem contact op met de ondersteuning"

package/locales/pl.json

@@ -21,6 +21,18 @@
     "description" : "Label for the 'date to' field",
     "message" : "Data zakończenia"
   },
+  "filterMultiSelectSearchInput.label" : {
+    "description" : "Label for the search input",
+    "message" : "Filter options by search query"
+  },
+  "filterMultiSelectSearchInput.placeholder" : {
+    "description" : "Placeholder for the search input",
+    "message" : "Wyszukaj..."
+  },
+  "inputSearch.clear" : {
+    "description" : "Label for the clear search button",
+    "message" : "Clear search"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "skontaktuj się z działem wsparcia"

package/locales/pt-BR.json

@@ -21,6 +21,18 @@
     "description" : "Label for the 'date to' field",
     "message" : "Data final"
   },
+  "filterMultiSelectSearchInput.label" : {
+    "description" : "Label for the search input",
+    "message" : "Opções de filtro por consulta"
+  },
+  "filterMultiSelectSearchInput.placeholder" : {
+    "description" : "Placeholder for the search input",
+    "message" : "Pesquisa…"
+  },
+  "inputSearch.clear" : {
+    "description" : "Label for the clear search button",
+    "message" : "Limpar pesquisa"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "entre em contato com o suporte"

package/locales/pt.json

@@ -21,6 +21,18 @@
     "description" : "Label for the 'date to' field",
     "message" : "Data final"
   },
+  "filterMultiSelectSearchInput.label" : {
+    "description" : "Label for the search input",
+    "message" : "Filter options by search query"
+  },
+  "filterMultiSelectSearchInput.placeholder" : {
+    "description" : "Placeholder for the search input",
+    "message" : "Procurar…"
+  },
+  "inputSearch.clear" : {
+    "description" : "Label for the clear search button",
+    "message" : "Clear search"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "entre em contato com o suporte"

package/locales/ro.json

@@ -21,6 +21,18 @@
     "description" : "Label for the 'date to' field",
     "message" : "Data până la"
   },
+  "filterMultiSelectSearchInput.label" : {
+    "description" : "Label for the search input",
+    "message" : "Opțiuni de filtrare după interogarea de căutare"
+  },
+  "filterMultiSelectSearchInput.placeholder" : {
+    "description" : "Placeholder for the search input",
+    "message" : "Căutare…"
+  },
+  "inputSearch.clear" : {
+    "description" : "Label for the clear search button",
+    "message" : "Ștergere căutare"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "contactați asistența"

package/locales/ru.json

@@ -21,6 +21,18 @@
     "description" : "Label for the 'date to' field",
     "message" : "Дата по"
   },
+  "filterMultiSelectSearchInput.label" : {
+    "description" : "Label for the search input",
+    "message" : "Параметры фильтрации по поисковому запросу"
+  },
+  "filterMultiSelectSearchInput.placeholder" : {
+    "description" : "Placeholder for the search input",
+    "message" : "Поиск..."
+  },
+  "inputSearch.clear" : {
+    "description" : "Label for the clear search button",
+    "message" : "Очистить поиск"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "обратитесь в службу поддержки,"

package/locales/si-LK.json

@@ -21,6 +21,18 @@
     "description" : "Label for the 'date to' field",
     "message" : "දිනය දක්වා"
   },
+  "filterMultiSelectSearchInput.label" : {
+    "description" : "Label for the search input",
+    "message" : "Filter options by search query"
+  },
+  "filterMultiSelectSearchInput.placeholder" : {
+    "description" : "Placeholder for the search input",
+    "message" : "සොයන්න…"
+  },
+  "inputSearch.clear" : {
+    "description" : "Label for the clear search button",
+    "message" : "Clear search"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "සහය හා සම්බන්ධ වන්න"

package/locales/sk.json

@@ -21,6 +21,18 @@
     "description" : "Label for the 'date to' field",
     "message" : "Dátum do"
   },
+  "filterMultiSelectSearchInput.label" : {
+    "description" : "Label for the search input",
+    "message" : "Filter options by search query"
+  },
+  "filterMultiSelectSearchInput.placeholder" : {
+    "description" : "Placeholder for the search input",
+    "message" : "Vyhľadáva sa..."
+  },
+  "inputSearch.clear" : {
+    "description" : "Label for the clear search button",
+    "message" : "Clear search"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "sa obráťte na podporu,"

package/locales/sr.json

@@ -21,6 +21,18 @@
     "description" : "Label for the 'date to' field",
     "message" : "Datum „Do“"
   },
+  "filterMultiSelectSearchInput.label" : {
+    "description" : "Label for the search input",
+    "message" : "Filtriranje opcija po upitu pretrage"
+  },
+  "filterMultiSelectSearchInput.placeholder" : {
+    "description" : "Placeholder for the search input",
+    "message" : "Pretraga..."
+  },
+  "inputSearch.clear" : {
+    "description" : "Label for the clear search button",
+    "message" : "Obriši pretragu"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "kontaktirajte podršku"

package/locales/sv.json

@@ -21,6 +21,18 @@
     "description" : "Label for the 'date to' field",
     "message" : "Slutdatum"
   },
+  "filterMultiSelectSearchInput.label" : {
+    "description" : "Label for the search input",
+    "message" : "Filtrera alternativ efter sökfråga"
+  },
+  "filterMultiSelectSearchInput.placeholder" : {
+    "description" : "Placeholder for the search input",
+    "message" : "Sök …"
+  },
+  "inputSearch.clear" : {
+    "description" : "Label for the clear search button",
+    "message" : "Rensa sökning"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "kontakta supporten"

package/locales/th.json

@@ -21,6 +21,18 @@
     "description" : "Label for the 'date to' field",
     "message" : "จนถึงวันที่"
   },
+  "filterMultiSelectSearchInput.label" : {
+    "description" : "Label for the search input",
+    "message" : "กรองตัวเลือกตามคิวรีการค้นหา"
+  },
+  "filterMultiSelectSearchInput.placeholder" : {
+    "description" : "Placeholder for the search input",
+    "message" : "ค้นหา…"
+  },
+  "inputSearch.clear" : {
+    "description" : "Label for the clear search button",
+    "message" : "ล้างการค้นหา"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "ติดต่อฝ่ายสนับสนุน"

package/locales/tl.json

@@ -21,6 +21,18 @@
     "description" : "Label for the 'date to' field",
     "message" : "Petsa hanggang"
   },
+  "filterMultiSelectSearchInput.label" : {
+    "description" : "Label for the search input",
+    "message" : "I-filter ang mga opsyon ayon sa query sa paghahanap"
+  },
+  "filterMultiSelectSearchInput.placeholder" : {
+    "description" : "Placeholder for the search input",
+    "message" : "Hanapin..."
+  },
+  "inputSearch.clear" : {
+    "description" : "Label for the clear search button",
+    "message" : "I-clear ang paghahanap"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "makipag-ugnayan sa suporta"

package/locales/tr.json

@@ -21,6 +21,18 @@
     "description" : "Label for the 'date to' field",
     "message" : "Şu tarihe kadar"
   },
+  "filterMultiSelectSearchInput.label" : {
+    "description" : "Label for the search input",
+    "message" : "Filter options by search query"
+  },
+  "filterMultiSelectSearchInput.placeholder" : {
+    "description" : "Placeholder for the search input",
+    "message" : "Ara..."
+  },
+  "inputSearch.clear" : {
+    "description" : "Label for the clear search button",
+    "message" : "Clear search"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "sorun devam ederse"

package/locales/uk.json

@@ -21,6 +21,18 @@
     "description" : "Label for the 'date to' field",
     "message" : "Дата по"
   },
+  "filterMultiSelectSearchInput.label" : {
+    "description" : "Label for the search input",
+    "message" : "Параметри фільтрування за пошуковим запитом"
+  },
+  "filterMultiSelectSearchInput.placeholder" : {
+    "description" : "Placeholder for the search input",
+    "message" : "Пошук…"
+  },
+  "inputSearch.clear" : {
+    "description" : "Label for the clear search button",
+    "message" : "Очистити пошук"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "зверніться до служби підтримки,"

package/locales/vi.json

@@ -21,6 +21,18 @@
     "description" : "Label for the 'date to' field",
     "message" : "Ngày đến"
   },
+  "filterMultiSelectSearchInput.label" : {
+    "description" : "Label for the search input",
+    "message" : "Tùy chọn lọc theo truy vấn tìm kiếm"
+  },
+  "filterMultiSelectSearchInput.placeholder" : {
+    "description" : "Placeholder for the search input",
+    "message" : "Tìm kiếm…"
+  },
+  "inputSearch.clear" : {
+    "description" : "Label for the clear search button",
+    "message" : "Tìm kiếm rõ ràng"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "liên hệ với bộ phận hỗ trợ"

package/locales/zh-TW.json

@@ -21,6 +21,18 @@
     "description" : "Label for the 'date to' field",
     "message" : "結束日期："
   },
+  "filterMultiSelectSearchInput.label" : {
+    "description" : "Label for the search input",
+    "message" : "Filter options by search query"
+  },
+  "filterMultiSelectSearchInput.placeholder" : {
+    "description" : "Placeholder for the search input",
+    "message" : "搜尋..."
+  },
+  "inputSearch.clear" : {
+    "description" : "Label for the clear search button",
+    "message" : "Clear search"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "聯絡支援中心"

package/locales/zh.json

@@ -21,6 +21,18 @@
     "description" : "Label for the 'date to' field",
     "message" : "结束日期"
   },
+  "filterMultiSelectSearchInput.label" : {
+    "description" : "Label for the search input",
+    "message" : "按搜索查询筛选选项"
+  },
+  "filterMultiSelectSearchInput.placeholder" : {
+    "description" : "Placeholder for the search input",
+    "message" : "搜索…"
+  },
+  "inputSearch.clear" : {
+    "description" : "Label for the clear search button",
+    "message" : "清除搜索"
+  },
   "kzErrorPage" : {
     "description" : "Label for contact button",
     "message" : "联系支持人员"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.49.2",
+  "version": "1.50.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -95,8 +95,8 @@
     "ts-jest": "^29.1.4",
     "tslib": "^2.6.3",
     "tsx": "^4.15.1",
-    "@kaizen/package-bundler": "1.1.1",
-    "@kaizen/design-tokens": "10.4.1"
+    "@kaizen/design-tokens": "10.4.1",
+    "@kaizen/package-bundler": "1.1.2"
   },
   "devDependenciesComments": {
     "postcss": "Installed in root",

package/src/Filter/FilterBar/subcomponents/FilterBarMultiSelect/FilterBarMultiSelect.tsx

@@ -11,14 +11,11 @@ import { checkArraysMatch } from "../../utils/checkArraysMatch"
 
 export type FilterBarMultiSelectProps = Omit<
   FilterMultiSelectProps,
-  | "isOpen"
-  | "setIsOpen"
-  | "renderTrigger"
-  | "label"
-  | "selectedKeys"
-  | "trigger"
+  "label" | "trigger"
 > & {
   id?: string
+  label?: FilterMultiSelectProps["label"]
+  trigger?: FilterMultiSelectProps["trigger"]
 }
 
 // This should technically be handled within the FilterMultiSelect

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

@@ -1,4 +1,5 @@
 import React, { useId } from "react"
+import { useIntl } from "@cultureamp/i18n-react-intl"
 import { InputSearch } from "~components/Input/InputSearch"
 import { useSelectionContext } from "../../context"
 import styles from "./SearchInput.module.scss"
@@ -14,6 +15,7 @@ export const SearchInput = ({
   id,
   isLoading,
 }: SearchInputProps): JSX.Element => {
+  const { formatMessage } = useIntl()
   const { setSearchQuery, searchQuery } = useSelectionContext()
 
   const handleChange: React.ChangeEventHandler<HTMLInputElement> = e => {
@@ -25,13 +27,24 @@ export const SearchInput = ({
   const reactId = useId()
   const inputId = id ?? reactId
 
+  const defaultAriaLabel = formatMessage({
+    id: "filterMultiSelectSearchInput.label",
+    defaultMessage: "Filter options by search query",
+    description: "Label for the search input",
+  })
+  const placeholder = formatMessage({
+    id: "filterMultiSelectSearchInput.placeholder",
+    defaultMessage: "Search…",
+    description: "Placeholder for the search input",
+  })
+
   return (
     <div className={styles.inputSearchContainer}>
       <InputSearch
         id={inputId}
-        aria-label={label ?? "Filter options by search query"}
+        aria-label={label ?? defaultAriaLabel}
         secondary
-        placeholder="Search…"
+        placeholder={placeholder}
         value={searchQuery}
         onChange={handleChange}
         onClear={handleClear}

package/src/Input/InputSearch/InputSearch.tsx

@@ -1,4 +1,5 @@
 import React, { InputHTMLAttributes, useRef } from "react"
+import { useIntl } from "@cultureamp/i18n-react-intl"
 import classnames from "classnames"
 import { ClearButton } from "~components/ClearButton"
 import { SearchIcon } from "~components/Icon/SearchIcon"
@@ -29,12 +30,20 @@ export const InputSearch = (props: InputSearchProps): JSX.Element => {
     secondary = false,
     ...restProps
   } = props
+  const { formatMessage } = useIntl()
   const inputRef = useRef<HTMLInputElement>(null)
 
   const handleOnClear = (): void => {
     inputRef.current?.focus()
     onClear && onClear()
   }
+
+  const clearButtonLabel = formatMessage({
+    id: "inputSearch.clear",
+    defaultMessage: "Clear search",
+    description: "Label for the clear search button",
+  })
+
   return (
     <div
       className={classnames(
@@ -78,7 +87,7 @@ export const InputSearch = (props: InputSearchProps): JSX.Element => {
           onClick={handleOnClear}
           disabled={disabled}
           classNameOverride={styles.endIconAdornment}
-          aria-label="clear search"
+          aria-label={clearButtonLabel}
         />
       )}
     </div>