@mittwald/flow-react-components 0.2.0-alpha.422 → 0.2.0-alpha.423

package/dist/js/_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs

@@ -8,6 +8,8 @@ const locales = {"de-DE": {  "list.filters": `Filter`,
   "list.noResult.text": `Deine Suche ergab keine Ergebnisse. Bitte passe die Suchanfrage oder deine Filter an.`,
   "list.options": `Optionen`,
   "list.paginationInfo": (args) => `${args.visibleItemsCount} von insgesamt ${args.totalItemsCount} angezeigt`,
+  "list.search.announce.noResult": (args) => `Keine Treffer für "${args.searchTerm}"`,
+  "list.search.announce.result": (args) => `${args.resultCount} Treffer für "${args.searchTerm}"`,
   "list.settings": `Einstellungen`,
   "list.settings.viewMode": `Ansicht`,
   "list.settings.viewMode.list": `Liste`,
@@ -25,6 +27,8 @@ const locales = {"de-DE": {  "list.filters": `Filter`,
   "list.noResult.text": `Your search did not return any results. Please adjust the search query or your filters.`,
   "list.options": `Options`,
   "list.paginationInfo": (args) => `Showing ${args.visibleItemsCount} of ${args.totalItemsCount}`,
+  "list.search.announce.noResult": (args) => `${args.resultCount} matches for "${args.searchTerm}"`,
+  "list.search.announce.result": (args) => `No matches for "${args.searchTerm}"`,
   "list.settings": `Settings`,
   "list.settings.viewMode": `View`,
   "list.settings.viewMode.list": `List`,

package/dist/js/_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/js/components/src/components/Action/lib/ariaLive.mjs

@@ -3,7 +3,7 @@
 import { useLocalizedStringFormatter } from 'react-aria';
 import locales from '../../../../../_virtual/_.locale.json@8b26c19d587a90f821a2307c8122f6d1.mjs';
 import { useEffect } from 'react';
-import { useLiveRegion } from '@chakra-ui/live-region';
+import { announce } from '@react-aria/live-announcer';
 
 const useAriaAnnounceActionState = (actionState, options = {}) => {
   const formater = useLocalizedStringFormatter(locales);
@@ -12,19 +12,13 @@ const useAriaAnnounceActionState = (actionState, options = {}) => {
     isSucceededText = formater.format("action.isSucceeded"),
     isFailedText = formater.format("action.isFailed")
   } = options;
-  const liveRegion = useLiveRegion({
-    "aria-live": "polite",
-    "aria-atomic": false,
-    "aria-relevant": "text additions",
-    role: "status"
-  });
   useEffect(() => {
     if (actionState === "isPending") {
-      liveRegion.speak(isPendingText);
+      announce(isPendingText, "polite");
     } else if (actionState === "isSucceeded") {
-      liveRegion.speak(isSucceededText);
+      announce(isSucceededText, "polite");
     } else if (actionState === "isFailed") {
-      liveRegion.speak(isFailedText);
+      announce(isFailedText, "polite");
     }
   }, [actionState]);
 };

package/dist/js/components/src/components/Action/lib/ariaLive.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ariaLive.mjs","sources":["../../../../../../../src/components/Action/lib/ariaLive.ts"],"sourcesContent":["import { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../locales/*.locale.json\";\nimport { useEffect } from \"react\";\nimport { useLiveRegion } from \"@chakra-ui/live-region\";\nimport type { ActionStateValue } from \"@/components/Action/models/ActionState\";\n\ninterface Options {\n  isPendingText?: string;\n  isSucceededText?: string;\n  isFailedText?: string;\n}\n\nexport const useAriaAnnounceActionState = (\n  actionState: ActionStateValue,\n  options: Options = {},\n): void => {\n  const formater = useLocalizedStringFormatter(locales);\n\n  const {\n    isPendingText = formater.format(\"action.isPending\"),\n    isSucceededText = formater.format(\"action.isSucceeded\"),\n    isFailedText = formater.format(\"action.isFailed\"),\n  } = options;\n\n  const liveRegion = useLiveRegion({\n    \"aria-live\": \"polite\",\n    \"aria-atomic\": false,\n    \"aria-relevant\": \"text additions\",\n    role: \"status\",\n  });\n\n  useEffect(() => {\n    if (actionState === \"isPending\") {\n      liveRegion.speak(isPendingText);\n    } else if (actionState === \"isSucceeded\") {\n      liveRegion.speak(isSucceededText);\n    } else if (actionState === \"isFailed\") {\n      liveRegion.speak(isFailedText);\n    }\n  }, [actionState]);\n};\n"],"names":[],"mappings":";;;;;AAYO,MAAM,0BAA6B,GAAA,CACxC,WACA,EAAA,OAAA,GAAmB,EACV,KAAA;AACT,EAAM,MAAA,QAAA,GAAW,4BAA4B,OAAO,CAAA;AAEpD,EAAM,MAAA;AAAA,IACJ,aAAA,GAAgB,QAAS,CAAA,MAAA,CAAO,kBAAkB,CAAA;AAAA,IAClD,eAAA,GAAkB,QAAS,CAAA,MAAA,CAAO,oBAAoB,CAAA;AAAA,IACtD,YAAA,GAAe,QAAS,CAAA,MAAA,CAAO,iBAAiB;AAAA,GAC9C,GAAA,OAAA;AAEJ,EAAA,MAAM,aAAa,aAAc,CAAA;AAAA,IAC/B,WAAa,EAAA,QAAA;AAAA,IACb,aAAe,EAAA,KAAA;AAAA,IACf,eAAiB,EAAA,gBAAA;AAAA,IACjB,IAAM,EAAA;AAAA,GACP,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,gBAAgB,WAAa,EAAA;AAC/B,MAAA,UAAA,CAAW,MAAM,aAAa,CAAA;AAAA,KAChC,MAAA,IAAW,gBAAgB,aAAe,EAAA;AACxC,MAAA,UAAA,CAAW,MAAM,eAAe,CAAA;AAAA,KAClC,MAAA,IAAW,gBAAgB,UAAY,EAAA;AACrC,MAAA,UAAA,CAAW,MAAM,YAAY,CAAA;AAAA;AAC/B,GACF,EAAG,CAAC,WAAW,CAAC,CAAA;AAClB;;;;"}
+{"version":3,"file":"ariaLive.mjs","sources":["../../../../../../../src/components/Action/lib/ariaLive.ts"],"sourcesContent":["import { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../locales/*.locale.json\";\nimport { useEffect } from \"react\";\nimport type { ActionStateValue } from \"@/components/Action/models/ActionState\";\nimport { announce } from \"@react-aria/live-announcer\";\n\ninterface Options {\n  isPendingText?: string;\n  isSucceededText?: string;\n  isFailedText?: string;\n}\n\nexport const useAriaAnnounceActionState = (\n  actionState: ActionStateValue,\n  options: Options = {},\n): void => {\n  const formater = useLocalizedStringFormatter(locales);\n\n  const {\n    isPendingText = formater.format(\"action.isPending\"),\n    isSucceededText = formater.format(\"action.isSucceeded\"),\n    isFailedText = formater.format(\"action.isFailed\"),\n  } = options;\n\n  useEffect(() => {\n    if (actionState === \"isPending\") {\n      announce(isPendingText, \"polite\");\n    } else if (actionState === \"isSucceeded\") {\n      announce(isSucceededText, \"polite\");\n    } else if (actionState === \"isFailed\") {\n      announce(isFailedText, \"polite\");\n    }\n  }, [actionState]);\n};\n"],"names":[],"mappings":";;;;;AAYO,MAAM,0BAA6B,GAAA,CACxC,WACA,EAAA,OAAA,GAAmB,EACV,KAAA;AACT,EAAM,MAAA,QAAA,GAAW,4BAA4B,OAAO,CAAA;AAEpD,EAAM,MAAA;AAAA,IACJ,aAAA,GAAgB,QAAS,CAAA,MAAA,CAAO,kBAAkB,CAAA;AAAA,IAClD,eAAA,GAAkB,QAAS,CAAA,MAAA,CAAO,oBAAoB,CAAA;AAAA,IACtD,YAAA,GAAe,QAAS,CAAA,MAAA,CAAO,iBAAiB;AAAA,GAC9C,GAAA,OAAA;AAEJ,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,gBAAgB,WAAa,EAAA;AAC/B,MAAA,QAAA,CAAS,eAAe,QAAQ,CAAA;AAAA,KAClC,MAAA,IAAW,gBAAgB,aAAe,EAAA;AACxC,MAAA,QAAA,CAAS,iBAAiB,QAAQ,CAAA;AAAA,KACpC,MAAA,IAAW,gBAAgB,UAAY,EAAA;AACrC,MAAA,QAAA,CAAS,cAAc,QAAQ,CAAA;AAAA;AACjC,GACF,EAAG,CAAC,WAAW,CAAC,CAAA;AAClB;;;;"}

package/dist/js/components/src/components/List/components/Header/components/SearchField/SearchField.mjs

@@ -14,10 +14,11 @@ import '../../../../../../lib/viewComponentContext/viewComponentContext.mjs';
 import 'dot-prop';
 import SearchFieldView from '../../../../../../views/SearchFieldView.mjs';
 import styles from './SearchField.module.scss.mjs';
+import { useAriaAnnounceSearchState } from '../../../../hooks/useAriaAnnounceSearchState.mjs';
 
 const autoSubmitTimeout = 800;
 const DefaultSearchFieldRender = (props) => {
-  const { onChange, value, autoSubmit, ...searchFieldProps } = props;
+  const { onChange, value, autoSubmit = true, ...searchFieldProps } = props;
   const [searchString, setSearchString] = useState(value ?? "");
   const submitSearch = () => {
     if (searchString.trim() === "") {
@@ -32,6 +33,7 @@ const DefaultSearchFieldRender = (props) => {
       return () => clearTimeout(timeout);
     }
   }, [searchString, autoSubmit]);
+  useAriaAnnounceSearchState();
   useOnChange(value, () => {
     setSearchString(value ?? "");
   }, [searchString]);

package/dist/js/components/src/components/List/components/Header/components/SearchField/SearchField.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.mjs","sources":["../../../../../../../../../../src/components/List/components/Header/components/SearchField/SearchField.tsx"],"sourcesContent":["import type { FC, KeyboardEvent } from \"react\";\nimport { createElement, useEffect, useState } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport type { Search } from \"@/components/List/model/search/Search\";\nimport type { SearchFieldRenderComponent } from \"@/components/List/model/search/types\";\nimport { useOnChange } from \"@/lib/hooks\";\nimport SearchFieldView from \"@/views/SearchFieldView\";\nimport styles from \"./SearchField.module.scss\";\n\ninterface Props extends PropsWithClassName {\n  search: Search<never>;\n}\n\nconst autoSubmitTimeout = 800;\n\nconst DefaultSearchFieldRender: SearchFieldRenderComponent = (props) => {\n  const { onChange, value, autoSubmit, ...searchFieldProps } = props;\n\n  const [searchString, setSearchString] = useState(value ?? \"\");\n\n  const submitSearch = () => {\n    if (searchString.trim() === \"\") {\n      onChange(undefined);\n    } else {\n      onChange(searchString);\n    }\n  };\n\n  useEffect(() => {\n    if (autoSubmit) {\n      const timeout = setTimeout(() => submitSearch(), autoSubmitTimeout);\n      return () => clearTimeout(timeout);\n    }\n  }, [searchString, autoSubmit]);\n\n  useOnChange(value, () => {\n    setSearchString(value ?? \"\");\n  }, [searchString]);\n\n  const clearSearch = () => {\n    onChange(undefined);\n    setSearchString(\"\");\n  };\n\n  const handleKeyPress = (e: KeyboardEvent) => {\n    if (e.key === \"Enter\") {\n      submitSearch();\n    } else if (e.key === \"Escape\") {\n      clearSearch();\n    }\n  };\n\n  return (\n    <SearchFieldView\n      className={styles.searchField}\n      value={searchString}\n      onKeyUp={handleKeyPress}\n      onChange={(value) => setSearchString(value)}\n      onClear={clearSearch}\n      {...searchFieldProps}\n    />\n  );\n};\n\nexport const SearchField: FC<Props> = (props) => {\n  const { search } = props;\n  const render = search.render ?? DefaultSearchFieldRender;\n\n  return createElement(render, {\n    value: search.value,\n    onChange: search.setValue.bind(search),\n    ...search.textFieldProps,\n  });\n};\n\nexport default SearchField;\n"],"names":["value"],"mappings":";;;;;;;;;;;;;;;AAaA,MAAM,iBAAoB,GAAA,GAAA;AAE1B,MAAM,wBAAA,GAAuD,CAAC,KAAU,KAAA;AACtE,EAAA,MAAM,EAAE,QAAU,EAAA,KAAA,EAAO,UAAY,EAAA,GAAG,kBAAqB,GAAA,KAAA;AAE7D,EAAA,MAAM,CAAC,YAAc,EAAA,eAAe,CAAI,GAAA,QAAA,CAAS,SAAS,EAAE,CAAA;AAE5D,EAAA,MAAM,eAAe,MAAM;AACzB,IAAI,IAAA,YAAA,CAAa,IAAK,EAAA,KAAM,EAAI,EAAA;AAC9B,MAAA,QAAA,CAAS,MAAS,CAAA;AAAA,KACb,MAAA;AACL,MAAA,QAAA,CAAS,YAAY,CAAA;AAAA;AACvB,GACF;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,UAAY,EAAA;AACd,MAAA,MAAM,OAAU,GAAA,UAAA,CAAW,MAAM,YAAA,IAAgB,iBAAiB,CAAA;AAClE,MAAO,OAAA,MAAM,aAAa,OAAO,CAAA;AAAA;AACnC,GACC,EAAA,CAAC,YAAc,EAAA,UAAU,CAAC,CAAA;AAE7B,EAAA,WAAA,CAAY,OAAO,MAAM;AACvB,IAAA,eAAA,CAAgB,SAAS,EAAE,CAAA;AAAA,GAC7B,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,QAAA,CAAS,MAAS,CAAA;AAClB,IAAA,eAAA,CAAgB,EAAE,CAAA;AAAA,GACpB;AAEA,EAAM,MAAA,cAAA,GAAiB,CAAC,CAAqB,KAAA;AAC3C,IAAI,IAAA,CAAA,CAAE,QAAQ,OAAS,EAAA;AACrB,MAAa,YAAA,EAAA;AAAA,KACf,MAAA,IAAW,CAAE,CAAA,GAAA,KAAQ,QAAU,EAAA;AAC7B,MAAY,WAAA,EAAA;AAAA;AACd,GACF;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAO,CAAA,WAAA;AAAA,MAClB,KAAO,EAAA,YAAA;AAAA,MACP,OAAS,EAAA,cAAA;AAAA,MACT,QAAU,EAAA,CAACA,MAAU,KAAA,eAAA,CAAgBA,MAAK,CAAA;AAAA,MAC1C,OAAS,EAAA,WAAA;AAAA,MACR,GAAG;AAAA;AAAA,GACN;AAEJ,CAAA;AAEa,MAAA,WAAA,GAAyB,CAAC,KAAU,KAAA;AAC/C,EAAM,MAAA,EAAE,QAAW,GAAA,KAAA;AACnB,EAAM,MAAA,MAAA,GAAS,OAAO,MAAU,IAAA,wBAAA;AAEhC,EAAA,OAAO,cAAc,MAAQ,EAAA;AAAA,IAC3B,OAAO,MAAO,CAAA,KAAA;AAAA,IACd,QAAU,EAAA,MAAA,CAAO,QAAS,CAAA,IAAA,CAAK,MAAM,CAAA;AAAA,IACrC,GAAG,MAAO,CAAA;AAAA,GACX,CAAA;AACH;;;;"}
+{"version":3,"file":"SearchField.mjs","sources":["../../../../../../../../../../src/components/List/components/Header/components/SearchField/SearchField.tsx"],"sourcesContent":["import type { FC, KeyboardEvent } from \"react\";\nimport { createElement, useEffect, useState } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport type { Search } from \"@/components/List/model/search/Search\";\nimport type { SearchFieldRenderComponent } from \"@/components/List/model/search/types\";\nimport { useOnChange } from \"@/lib/hooks\";\nimport SearchFieldView from \"@/views/SearchFieldView\";\nimport styles from \"./SearchField.module.scss\";\nimport { useAriaAnnounceSearchState } from \"@/components/List/hooks/useAriaAnnounceSearchState\";\n\ninterface Props extends PropsWithClassName {\n  search: Search<never>;\n}\n\nconst autoSubmitTimeout = 800;\n\nconst DefaultSearchFieldRender: SearchFieldRenderComponent = (props) => {\n  const { onChange, value, autoSubmit = true, ...searchFieldProps } = props;\n\n  const [searchString, setSearchString] = useState(value ?? \"\");\n\n  const submitSearch = () => {\n    if (searchString.trim() === \"\") {\n      onChange(undefined);\n    } else {\n      onChange(searchString);\n    }\n  };\n\n  useEffect(() => {\n    if (autoSubmit) {\n      const timeout = setTimeout(() => submitSearch(), autoSubmitTimeout);\n      return () => clearTimeout(timeout);\n    }\n  }, [searchString, autoSubmit]);\n\n  useAriaAnnounceSearchState();\n\n  useOnChange(value, () => {\n    setSearchString(value ?? \"\");\n  }, [searchString]);\n\n  const clearSearch = () => {\n    onChange(undefined);\n    setSearchString(\"\");\n  };\n\n  const handleKeyPress = (e: KeyboardEvent) => {\n    if (e.key === \"Enter\") {\n      submitSearch();\n    } else if (e.key === \"Escape\") {\n      clearSearch();\n    }\n  };\n\n  return (\n    <SearchFieldView\n      className={styles.searchField}\n      value={searchString}\n      onKeyUp={handleKeyPress}\n      onChange={(value) => setSearchString(value)}\n      onClear={clearSearch}\n      {...searchFieldProps}\n    />\n  );\n};\n\nexport const SearchField: FC<Props> = (props) => {\n  const { search } = props;\n  const render = search.render ?? DefaultSearchFieldRender;\n\n  return createElement(render, {\n    value: search.value,\n    onChange: search.setValue.bind(search),\n    ...search.textFieldProps,\n  });\n};\n\nexport default SearchField;\n"],"names":["value"],"mappings":";;;;;;;;;;;;;;;;AAcA,MAAM,iBAAoB,GAAA,GAAA;AAE1B,MAAM,wBAAA,GAAuD,CAAC,KAAU,KAAA;AACtE,EAAA,MAAM,EAAE,QAAU,EAAA,KAAA,EAAO,aAAa,IAAM,EAAA,GAAG,kBAAqB,GAAA,KAAA;AAEpE,EAAA,MAAM,CAAC,YAAc,EAAA,eAAe,CAAI,GAAA,QAAA,CAAS,SAAS,EAAE,CAAA;AAE5D,EAAA,MAAM,eAAe,MAAM;AACzB,IAAI,IAAA,YAAA,CAAa,IAAK,EAAA,KAAM,EAAI,EAAA;AAC9B,MAAA,QAAA,CAAS,MAAS,CAAA;AAAA,KACb,MAAA;AACL,MAAA,QAAA,CAAS,YAAY,CAAA;AAAA;AACvB,GACF;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,UAAY,EAAA;AACd,MAAA,MAAM,OAAU,GAAA,UAAA,CAAW,MAAM,YAAA,IAAgB,iBAAiB,CAAA;AAClE,MAAO,OAAA,MAAM,aAAa,OAAO,CAAA;AAAA;AACnC,GACC,EAAA,CAAC,YAAc,EAAA,UAAU,CAAC,CAAA;AAE7B,EAA2B,0BAAA,EAAA;AAE3B,EAAA,WAAA,CAAY,OAAO,MAAM;AACvB,IAAA,eAAA,CAAgB,SAAS,EAAE,CAAA;AAAA,GAC7B,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,QAAA,CAAS,MAAS,CAAA;AAClB,IAAA,eAAA,CAAgB,EAAE,CAAA;AAAA,GACpB;AAEA,EAAM,MAAA,cAAA,GAAiB,CAAC,CAAqB,KAAA;AAC3C,IAAI,IAAA,CAAA,CAAE,QAAQ,OAAS,EAAA;AACrB,MAAa,YAAA,EAAA;AAAA,KACf,MAAA,IAAW,CAAE,CAAA,GAAA,KAAQ,QAAU,EAAA;AAC7B,MAAY,WAAA,EAAA;AAAA;AACd,GACF;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAO,CAAA,WAAA;AAAA,MAClB,KAAO,EAAA,YAAA;AAAA,MACP,OAAS,EAAA,cAAA;AAAA,MACT,QAAU,EAAA,CAACA,MAAU,KAAA,eAAA,CAAgBA,MAAK,CAAA;AAAA,MAC1C,OAAS,EAAA,WAAA;AAAA,MACR,GAAG;AAAA;AAAA,GACN;AAEJ,CAAA;AAEa,MAAA,WAAA,GAAyB,CAAC,KAAU,KAAA;AAC/C,EAAM,MAAA,EAAE,QAAW,GAAA,KAAA;AACnB,EAAM,MAAA,MAAA,GAAS,OAAO,MAAU,IAAA,wBAAA;AAEhC,EAAA,OAAO,cAAc,MAAQ,EAAA;AAAA,IAC3B,OAAO,MAAO,CAAA,KAAA;AAAA,IACd,QAAU,EAAA,MAAA,CAAO,QAAS,CAAA,IAAA,CAAK,MAAM,CAAA;AAAA,IACrC,GAAG,MAAO,CAAA;AAAA,GACX,CAAA;AACH;;;;"}

package/dist/js/components/src/components/List/hooks/useAriaAnnounceSearchState.mjs

@@ -0,0 +1,129 @@
+"use client"
+/* */
+import { useLocalizedStringFormatter } from 'react-aria';
+import locales from '../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
+import { announce } from '@react-aria/live-announcer';
+import '../../AccentBox/AccentBox.mjs';
+import 'react/jsx-runtime';
+import { useEffect } from 'react';
+import 'clsx';
+import '../../../lib/propsContext/propsContext.mjs';
+import '../../../lib/viewComponentContext/viewComponentContext.mjs';
+import '@mittwald/react-tunnel';
+import '../../../lib/slotContext/slotContext.mjs';
+import '@react-aria/utils';
+import 'remeda';
+import 'dot-prop';
+import '../../Button/Button.mjs';
+import '@tabler/icons-react';
+import '../../Icon/Icon.mjs';
+import '../../SuspenseTrigger/SuspenseTrigger.mjs';
+import '../../Action/Action.mjs';
+import '../../ActionGroup/ActionGroup.mjs';
+import '../../Alert/Alert.mjs';
+import '../../AlertBadge/AlertBadge.mjs';
+import '../../Align/Align.mjs';
+import 'recharts';
+import '../../Heading/Heading.mjs';
+import '../../Text/Text.mjs';
+import '../../Autocomplete/Autocomplete.mjs';
+import '../../Avatar/Avatar.mjs';
+import '../../Badge/Badge.mjs';
+import 'react-aria-components';
+import 'mobx';
+import '../../../lib/controller/overlay/context.mjs';
+import '../../Checkbox/Checkbox.mjs';
+import '../../CheckboxButton/CheckboxButton.mjs';
+import '../../CheckboxGroup/CheckboxGroup.mjs';
+import 'react-syntax-highlighter';
+import '../../CopyButton/CopyButton.mjs';
+import '../../ColumnLayout/ColumnLayout.mjs';
+import '../../ComboBox/ComboBox.mjs';
+import '../../Content/Content.mjs';
+import '../../ContextMenu/ContextMenu.mjs';
+import '../../MenuItem/MenuItem.mjs';
+import '../../ContextMenu/components/ContextMenuTrigger/ContextMenuTrigger.mjs';
+import '../../ContextMenu/components/ContextMenuSection/ContextMenuSection.mjs';
+import '../../ContextualHelp/ContextualHelp.mjs';
+import '../../ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.mjs';
+import '../../CounterBadge/CounterBadge.mjs';
+import '../../CountryOptions/CountryOptions.mjs';
+import '../../DatePicker/DatePicker.mjs';
+import '../../DateRangePicker/DateRangePicker.mjs';
+import '../../FieldDescription/FieldDescription.mjs';
+import '../../FieldError/FieldError.mjs';
+import '../../FileCard/FileCard.mjs';
+import '../../FileCardList/FileCardList.mjs';
+import '../../FileDropZone/FileDropZone.mjs';
+import '../../FileField/FileField.mjs';
+import '../../Header/Header.mjs';
+import '../../Image/Image.mjs';
+import '../../Initials/Initials.mjs';
+import '../../Label/Label.mjs';
+import '../../LayoutCard/LayoutCard.mjs';
+import '../../OverlayTrigger/components/MenuTrigger/MenuTrigger.mjs';
+import '../../LightBox/LightBox.mjs';
+import '../../Link/Link.mjs';
+import 'invariant';
+import '../components/ListSummary/ListSummary.mjs';
+import { useList } from './useList.mjs';
+import '../List.mjs';
+import 'react-markdown';
+import '../../Message/Message.mjs';
+import '../../MessageThread/MessageThread.mjs';
+import '../../Modal/Modal.mjs';
+import '../../Navigation/Navigation.mjs';
+import '../../Navigation/components/NavigationGroup/NavigationGroup.mjs';
+import '../../NotificationProvider/NotificationProvider.mjs';
+import 'luxon';
+import '../../NumberField/NumberField.mjs';
+import '../../Option/Option.mjs';
+import '../../PasswordCreationField/PasswordCreationField.mjs';
+import '../../Popover/components/PopoverTrigger/PopoverTrigger.mjs';
+import '../../Popover/Popover.mjs';
+import '../../ProgressBar/ProgressBar.mjs';
+import '../../RadioGroup/RadioGroup.mjs';
+import '../../RadioGroup/components/Radio/Radio.mjs';
+import '../../RadioGroup/components/RadioButton/RadioButton.mjs';
+import '../../SearchField/SearchField.mjs';
+import '../../Section/Section.mjs';
+import '../../SegmentedControl/SegmentedControl.mjs';
+import '../../SegmentedControl/components/Segment/Segment.mjs';
+import '../../Select/Select.mjs';
+import '../../SettingsProvider/SettingsProvider.mjs';
+import '../../Slider/Slider.mjs';
+import '../../Switch/Switch.mjs';
+import '../../Tabs/Tabs.mjs';
+import '../../Tabs/components/Tab/context.mjs';
+import '../../TextArea/TextArea.mjs';
+import '../../TextField/TextField.mjs';
+import '../../TimeField/TimeField.mjs';
+import '../../TranslationProvider/TranslationProvider.mjs';
+import { useDebounceCallback } from 'usehooks-ts';
+
+const announceDebounceMs = 600;
+const useAriaAnnounceSearchState = () => {
+  const formatter = useLocalizedStringFormatter(locales);
+  const list = useList();
+  const debouncedAnnounce = useDebounceCallback(announce, announceDebounceMs);
+  const searchTerm = list.search?.value;
+  const resultCount = list.batches.getTotalItemsCount();
+  const isLoading = list.loader.loaderState.useIsLoading();
+  useEffect(() => {
+    if (isLoading || !searchTerm) {
+      debouncedAnnounce.cancel();
+      return;
+    }
+    const text = formatter.format(
+      resultCount > 0 ? "list.search.announce.result" : "list.search.announce.noResult",
+      {
+        resultCount,
+        searchTerm
+      }
+    );
+    debouncedAnnounce(text, "polite");
+  }, [searchTerm, resultCount, isLoading]);
+};
+
+export { useAriaAnnounceSearchState };
+//# sourceMappingURL=useAriaAnnounceSearchState.mjs.map

package/dist/js/components/src/components/List/hooks/useAriaAnnounceSearchState.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAriaAnnounceSearchState.mjs","sources":["../../../../../../../src/components/List/hooks/useAriaAnnounceSearchState.ts"],"sourcesContent":["import { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../locales/*.locale.json\";\nimport { announce } from \"@react-aria/live-announcer\";\nimport { useList } from \"@/index/default\";\nimport { useDebounceCallback } from \"usehooks-ts\";\nimport { useEffect } from \"react\";\n\nconst announceDebounceMs = 600;\n\nexport const useAriaAnnounceSearchState = (): void => {\n  const formatter = useLocalizedStringFormatter(locales);\n  const list = useList();\n  const debouncedAnnounce = useDebounceCallback(announce, announceDebounceMs);\n\n  const searchTerm = list.search?.value;\n  const resultCount = list.batches.getTotalItemsCount();\n  const isLoading = list.loader.loaderState.useIsLoading();\n\n  useEffect(() => {\n    if (isLoading || !searchTerm) {\n      debouncedAnnounce.cancel();\n      return;\n    }\n\n    const text = formatter.format(\n      resultCount > 0\n        ? \"list.search.announce.result\"\n        : \"list.search.announce.noResult\",\n      {\n        resultCount,\n        searchTerm,\n      },\n    );\n\n    debouncedAnnounce(text, \"polite\");\n  }, [searchTerm, resultCount, isLoading]);\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,kBAAqB,GAAA,GAAA;AAEpB,MAAM,6BAA6B,MAAY;AACpD,EAAM,MAAA,SAAA,GAAY,4BAA4B,OAAO,CAAA;AACrD,EAAA,MAAM,OAAO,OAAQ,EAAA;AACrB,EAAM,MAAA,iBAAA,GAAoB,mBAAoB,CAAA,QAAA,EAAU,kBAAkB,CAAA;AAE1E,EAAM,MAAA,UAAA,GAAa,KAAK,MAAQ,EAAA,KAAA;AAChC,EAAM,MAAA,WAAA,GAAc,IAAK,CAAA,OAAA,CAAQ,kBAAmB,EAAA;AACpD,EAAA,MAAM,SAAY,GAAA,IAAA,CAAK,MAAO,CAAA,WAAA,CAAY,YAAa,EAAA;AAEvD,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,SAAA,IAAa,CAAC,UAAY,EAAA;AAC5B,MAAA,iBAAA,CAAkB,MAAO,EAAA;AACzB,MAAA;AAAA;AAGF,IAAA,MAAM,OAAO,SAAU,CAAA,MAAA;AAAA,MACrB,WAAA,GAAc,IACV,6BACA,GAAA,+BAAA;AAAA,MACJ;AAAA,QACE,WAAA;AAAA,QACA;AAAA;AACF,KACF;AAEA,IAAA,iBAAA,CAAkB,MAAM,QAAQ,CAAA;AAAA,GAC/B,EAAA,CAAC,UAAY,EAAA,WAAA,EAAa,SAAS,CAAC,CAAA;AACzC;;;;"}

package/dist/types/components/Action/lib/ariaLive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ariaLive.d.ts","sourceRoot":"","sources":["../../../../../src/components/Action/lib/ariaLive.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAE/E,UAAU,OAAO;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,0BAA0B,GACrC,aAAa,gBAAgB,EAC7B,UAAS,OAAY,KACpB,IAyBF,CAAC"}
+{"version":3,"file":"ariaLive.d.ts","sourceRoot":"","sources":["../../../../../src/components/Action/lib/ariaLive.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAG/E,UAAU,OAAO;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,0BAA0B,GACrC,aAAa,gBAAgB,EAC7B,UAAS,OAAY,KACpB,IAkBF,CAAC"}

package/dist/types/components/List/components/Header/components/SearchField/SearchField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/List/components/Header/components/SearchField/SearchField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAiB,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uCAAuC,CAAC;AAMpE,UAAU,KAAM,SAAQ,kBAAkB;IACxC,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;CACvB;AAqDD,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,KAAK,CASjC,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SearchField.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/List/components/Header/components/SearchField/SearchField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAiB,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uCAAuC,CAAC;AAOpE,UAAU,KAAM,SAAQ,kBAAkB;IACxC,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;CACvB;AAuDD,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,KAAK,CASjC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/types/components/List/hooks/useAriaAnnounceSearchState.d.ts

@@ -0,0 +1,2 @@
+export declare const useAriaAnnounceSearchState: () => void;
+//# sourceMappingURL=useAriaAnnounceSearchState.d.ts.map

package/dist/types/components/List/hooks/useAriaAnnounceSearchState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAriaAnnounceSearchState.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/hooks/useAriaAnnounceSearchState.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,0BAA0B,QAAO,IA2B7C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "0.2.0-alpha.422",
+  "version": "0.2.0-alpha.423",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://mittwald.github.io/flow",
@@ -55,12 +55,12 @@
     "test:unit": "vitest run"
   },
   "dependencies": {
-    "@chakra-ui/live-region": "^2.1.0",
     "@internationalized/string-compiler": "^3.2.6",
     "@mittwald/password-tools-js": "3.0.0-alpha.18",
-    "@mittwald/react-tunnel": "0.2.0-alpha.422",
+    "@mittwald/react-tunnel": "0.2.0-alpha.423",
     "@mittwald/react-use-promise": "^3.0.4",
     "@react-aria/form": "^3.1.0",
+    "@react-aria/live-announcer": "^3.4.4",
     "@react-aria/utils": "^3.30.0",
     "@react-stately/form": "^3.2.0",
     "@react-types/shared": "^3.31.0",
@@ -99,7 +99,7 @@
     "@faker-js/faker": "^9.9.0",
     "@internationalized/date": "^3.8.2",
     "@mittwald/flow-core": "",
-    "@mittwald/flow-design-tokens": "0.2.0-alpha.422",
+    "@mittwald/flow-design-tokens": "0.2.0-alpha.423",
     "@mittwald/react-use-promise": "^3.0.4",
     "@mittwald/remote-dom-react": "1.2.2-mittwald.3",
     "@mittwald/typescript-config": "",
@@ -172,5 +172,5 @@
       "optional": true
     }
   },
-  "gitHead": "585882c137ae15dfd3beee689910bd2728a308dc"
+  "gitHead": "3e61ca666bbefb2bb8ef0ffdb6dd71ba5e9a0ffe"
 }