@mittwald/flow-react-components 1.6.0-next.30 → 1.6.0-next.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -30,14 +30,14 @@ var AllFiltersModal = (props) => {
30
30
  const isInitiallyLoading = list.loader.useIsInitiallyLoading();
31
31
  const totalItemCount = list.batches.getTotalItemsCount() ?? list.items.entries.length;
32
32
  const availableViewModes = useAvailableViewModes();
33
- const expandAccordions = (availableViewModes.length > 1 ? 1 : 0) + (list.sorting.length > 0 ? 1 : 0) + list.filters.length <= 2;
33
+ const expandAccordions = (availableViewModes.length > 1 ? 1 : 0) + (list.visibleSorting.length > 0 ? 1 : 0) + list.filters.length <= 2;
34
34
  const filterAccordions = list.filters.map((f) => /* @__PURE__ */ jsx(FilterAccordion, {
35
35
  filter: f,
36
36
  expandAccordions
37
37
  }, f.name));
38
38
  const accordions = [
39
39
  availableViewModes.length > 1 && /* @__PURE__ */ jsx(ViewModeAccordion, { expandAccordions }, "viewMode"),
40
- list.sorting.length > 0 && /* @__PURE__ */ jsx(SortingAccordion, { expandAccordions }, "sorting"),
40
+ list.visibleSorting.length > 0 && /* @__PURE__ */ jsx(SortingAccordion, { expandAccordions }, "sorting"),
41
41
  ...filterAccordions
42
42
  ].filter(Boolean);
43
43
  const hasSecondaryFilters = list.filters.some((f) => f.priority === "secondary");
@@ -1 +1 @@
1
- {"version":3,"file":"AllFiltersModal.mjs","names":["locales","styles"],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/AllFiltersModal.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { IconFilter } from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { useList } from \"@/components/List\";\nimport styles from \"@/components/List/components/Header/Header.module.scss\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport ContentView from \"@/views/ContentView\";\nimport SectionView from \"@/views/SectionView\";\nimport AccordionGroupView from \"@/views/AccordionGroupView\";\nimport { FilterAccordion } from \"@/components/List/components/Header/components/AllFiltersModal/FilterAccordion\";\nimport { ViewModeAccordion } from \"@/components/List/components/Header/components/AllFiltersModal/ViewModeAccordion\";\nimport TextView from \"@/views/TextView\";\nimport { SortingAccordion } from \"@/components/List/components/Header/components/AllFiltersModal/SortingAccordion\";\nimport ActionGroupView from \"@/views/ActionGroupView\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport HeadingView from \"@/views/HeadingView\";\nimport clsx from \"clsx\";\nimport Modal, { ModalTrigger } from \"@/components/Modal\";\nimport SkeletonTextView from \"@/views/SkeletonTextView\";\nimport { useAvailableViewModes } from \"../../lib\";\n\ninterface Props {\n isDisabled?: boolean;\n}\n\nexport const AllFiltersModal: FC<Props> = (props) => {\n const { isDisabled } = props;\n const list = useList();\n const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n const totalItemCount =\n list.batches.getTotalItemsCount() ?? list.items.entries.length;\n\n const availableViewModes = useAvailableViewModes();\n\n const accordionCount =\n (availableViewModes.length > 1 ? 1 : 0) +\n (list.sorting.length > 0 ? 1 : 0) +\n list.filters.length;\n\n const expandAccordions = accordionCount <= 2;\n\n const filterAccordions = list.filters.map((f) => (\n <FilterAccordion\n filter={f}\n key={f.name}\n expandAccordions={expandAccordions}\n />\n ));\n\n const accordions = [\n availableViewModes.length > 1 && (\n <ViewModeAccordion key=\"viewMode\" expandAccordions={expandAccordions} />\n ),\n list.sorting.length > 0 && (\n <SortingAccordion key=\"sorting\" expandAccordions={expandAccordions} />\n ),\n ...filterAccordions,\n ].filter(Boolean);\n\n const hasSecondaryFilters = list.filters.some(\n (f) => f.priority === \"secondary\",\n );\n\n const controller = useOverlayController(\"Modal\", {\n reuseControllerFromContext: false,\n });\n\n if (accordions.length === 0) {\n return null;\n }\n\n return (\n <ModalTrigger controller={controller}>\n <ButtonView\n className={clsx(\n styles.hideOnMobile,\n hasSecondaryFilters ? undefined : styles.hideOnDesktop,\n )}\n variant=\"outline\"\n color=\"secondary\"\n isDisabled={isDisabled}\n >\n <TextView>{stringFormatter.format(\"filters.all\")}</TextView>\n <IconFilter />\n </ButtonView>\n\n <ButtonView\n className={styles.hideOnDesktop}\n variant=\"outline\"\n color=\"secondary\"\n aria-label={stringFormatter.format(\"filters.all\")}\n >\n <IconFilter />\n </ButtonView>\n\n <Modal offCanvas controller={controller}>\n <HeadingView>{stringFormatter.format(\"filters.all\")}</HeadingView>\n <ContentView>\n <SectionView>\n <AccordionGroupView>{...accordions}</AccordionGroupView>\n </SectionView>\n </ContentView>\n\n <ActionGroupView>\n <ButtonView onPress={() => controller.close()}>\n <TextView>\n {isInitiallyLoading ? (\n <SkeletonTextView width=\"16ch\" />\n ) : (\n stringFormatter.format(\"results.show\", {\n totalItemCount,\n })\n )}\n </TextView>\n </ButtonView>\n <ButtonView\n color=\"secondary\"\n variant=\"soft\"\n onPress={() => {\n list.resetFilters();\n controller.close();\n }}\n >\n {stringFormatter.format(\"reset\")}\n </ButtonView>\n </ActionGroupView>\n </Modal>\n </ModalTrigger>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,IAAa,mBAA8B,UAAU;CACnD,MAAM,EAAE,eAAe;CACvB,MAAM,OAAO,QAAQ;CACrB,MAAM,kBAAkB,4BAA4BA,kBAAS,MAAM;CAEnE,MAAM,qBAAqB,KAAK,OAAO,sBAAsB;CAC7D,MAAM,iBACJ,KAAK,QAAQ,mBAAmB,KAAK,KAAK,MAAM,QAAQ;CAE1D,MAAM,qBAAqB,sBAAsB;CAOjD,MAAM,oBAJH,mBAAmB,SAAS,IAAI,IAAI,MACpC,KAAK,QAAQ,SAAS,IAAI,IAAI,KAC/B,KAAK,QAAQ,UAE4B;CAE3C,MAAM,mBAAmB,KAAK,QAAQ,KAAK,MACzC,oBAAC,iBAAD;EACE,QAAQ;EAEU;CACnB,GAFM,EAAE,IAER,CACF;CAED,MAAM,aAAa;EACjB,mBAAmB,SAAS,KAC1B,oBAAC,mBAAD,EAAoD,iBAAmB,GAAhD,UAAgD;EAEzE,KAAK,QAAQ,SAAS,KACpB,oBAAC,kBAAD,EAAkD,iBAAmB,GAA/C,SAA+C;EAEvE,GAAG;CACL,CAAC,CAAC,OAAO,OAAO;CAEhB,MAAM,sBAAsB,KAAK,QAAQ,MACtC,MAAM,EAAE,aAAa,WACxB;CAEA,MAAM,aAAa,qBAAqB,SAAS,EAC/C,4BAA4B,MAC9B,CAAC;CAED,IAAI,WAAW,WAAW,GACxB,OAAO;CAGT,OACE,qBAAC,cAAD;EAA0B;EAA1B,UAAA;GACE,qBAAC,YAAD;IACE,WAAW,KACTC,sBAAO,cACP,sBAAsB,KAAA,IAAYA,sBAAO,aAC3C;IACA,SAAQ;IACR,OAAM;IACM;IAPd,UAAA,CASE,oBAAC,UAAD,EAAA,UAAW,gBAAgB,OAAO,aAAa,EAAY,CAAA,GAC3D,oBAAC,YAAD,CAAa,CAAA,CACH;;GAEZ,oBAAC,YAAD;IACE,WAAWA,sBAAO;IAClB,SAAQ;IACR,OAAM;IACN,cAAY,gBAAgB,OAAO,aAAa;IAEhD,UAAA,oBAAC,YAAD,CAAa,CAAA;GACH,CAAA;GAEZ,qBAAC,OAAD;IAAO,WAAA;IAAsB;IAA7B,UAAA;KACE,oBAAC,aAAD,EAAA,UAAc,gBAAgB,OAAO,aAAa,EAAe,CAAA;KACjE,oBAAC,aAAD,EAAA,UACE,oBAAC,aAAD,EAAA,UACE,oBAAC,oBAAD,EAAA,UAAA,CAAoB,GAAI,UAA+B,EAAA,CAAA,EAC5C,CAAA,EACF,CAAA;KAEb,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,YAAD;MAAY,eAAe,WAAW,MAAM;MAC1C,UAAA,oBAAC,UAAD,EAAA,UACG,qBACC,oBAAC,kBAAD,EAAkB,OAAM,OAAQ,CAAA,IAEhC,gBAAgB,OAAO,gBAAgB,EACrC,eACF,CAAC,EAEK,CAAA;KACA,CAAA,GACZ,oBAAC,YAAD;MACE,OAAM;MACN,SAAQ;MACR,eAAe;OACb,KAAK,aAAa;OAClB,WAAW,MAAM;MACnB;MAEC,UAAA,gBAAgB,OAAO,OAAO;KACrB,CAAA,CACG,EAAA,CAAA;IACZ;;EACK;;AAElB"}
1
+ {"version":3,"file":"AllFiltersModal.mjs","names":["locales","styles"],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/AllFiltersModal.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { IconFilter } from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { useList } from \"@/components/List\";\nimport styles from \"@/components/List/components/Header/Header.module.scss\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport ContentView from \"@/views/ContentView\";\nimport SectionView from \"@/views/SectionView\";\nimport AccordionGroupView from \"@/views/AccordionGroupView\";\nimport { FilterAccordion } from \"@/components/List/components/Header/components/AllFiltersModal/FilterAccordion\";\nimport { ViewModeAccordion } from \"@/components/List/components/Header/components/AllFiltersModal/ViewModeAccordion\";\nimport TextView from \"@/views/TextView\";\nimport { SortingAccordion } from \"@/components/List/components/Header/components/AllFiltersModal/SortingAccordion\";\nimport ActionGroupView from \"@/views/ActionGroupView\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport HeadingView from \"@/views/HeadingView\";\nimport clsx from \"clsx\";\nimport Modal, { ModalTrigger } from \"@/components/Modal\";\nimport SkeletonTextView from \"@/views/SkeletonTextView\";\nimport { useAvailableViewModes } from \"../../lib\";\n\ninterface Props {\n isDisabled?: boolean;\n}\n\nexport const AllFiltersModal: FC<Props> = (props) => {\n const { isDisabled } = props;\n const list = useList();\n const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n const totalItemCount =\n list.batches.getTotalItemsCount() ?? list.items.entries.length;\n\n const availableViewModes = useAvailableViewModes();\n\n const accordionCount =\n (availableViewModes.length > 1 ? 1 : 0) +\n (list.visibleSorting.length > 0 ? 1 : 0) +\n list.filters.length;\n\n const expandAccordions = accordionCount <= 2;\n\n const filterAccordions = list.filters.map((f) => (\n <FilterAccordion\n filter={f}\n key={f.name}\n expandAccordions={expandAccordions}\n />\n ));\n\n const accordions = [\n availableViewModes.length > 1 && (\n <ViewModeAccordion key=\"viewMode\" expandAccordions={expandAccordions} />\n ),\n list.visibleSorting.length > 0 && (\n <SortingAccordion key=\"sorting\" expandAccordions={expandAccordions} />\n ),\n ...filterAccordions,\n ].filter(Boolean);\n\n const hasSecondaryFilters = list.filters.some(\n (f) => f.priority === \"secondary\",\n );\n\n const controller = useOverlayController(\"Modal\", {\n reuseControllerFromContext: false,\n });\n\n if (accordions.length === 0) {\n return null;\n }\n\n return (\n <ModalTrigger controller={controller}>\n <ButtonView\n className={clsx(\n styles.hideOnMobile,\n hasSecondaryFilters ? undefined : styles.hideOnDesktop,\n )}\n variant=\"outline\"\n color=\"secondary\"\n isDisabled={isDisabled}\n >\n <TextView>{stringFormatter.format(\"filters.all\")}</TextView>\n <IconFilter />\n </ButtonView>\n\n <ButtonView\n className={styles.hideOnDesktop}\n variant=\"outline\"\n color=\"secondary\"\n aria-label={stringFormatter.format(\"filters.all\")}\n >\n <IconFilter />\n </ButtonView>\n\n <Modal offCanvas controller={controller}>\n <HeadingView>{stringFormatter.format(\"filters.all\")}</HeadingView>\n <ContentView>\n <SectionView>\n <AccordionGroupView>{...accordions}</AccordionGroupView>\n </SectionView>\n </ContentView>\n\n <ActionGroupView>\n <ButtonView onPress={() => controller.close()}>\n <TextView>\n {isInitiallyLoading ? (\n <SkeletonTextView width=\"16ch\" />\n ) : (\n stringFormatter.format(\"results.show\", {\n totalItemCount,\n })\n )}\n </TextView>\n </ButtonView>\n <ButtonView\n color=\"secondary\"\n variant=\"soft\"\n onPress={() => {\n list.resetFilters();\n controller.close();\n }}\n >\n {stringFormatter.format(\"reset\")}\n </ButtonView>\n </ActionGroupView>\n </Modal>\n </ModalTrigger>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,IAAa,mBAA8B,UAAU;CACnD,MAAM,EAAE,eAAe;CACvB,MAAM,OAAO,QAAQ;CACrB,MAAM,kBAAkB,4BAA4BA,kBAAS,MAAM;CAEnE,MAAM,qBAAqB,KAAK,OAAO,sBAAsB;CAC7D,MAAM,iBACJ,KAAK,QAAQ,mBAAmB,KAAK,KAAK,MAAM,QAAQ;CAE1D,MAAM,qBAAqB,sBAAsB;CAOjD,MAAM,oBAJH,mBAAmB,SAAS,IAAI,IAAI,MACpC,KAAK,eAAe,SAAS,IAAI,IAAI,KACtC,KAAK,QAAQ,UAE4B;CAE3C,MAAM,mBAAmB,KAAK,QAAQ,KAAK,MACzC,oBAAC,iBAAD;EACE,QAAQ;EAEU;CACnB,GAFM,EAAE,IAER,CACF;CAED,MAAM,aAAa;EACjB,mBAAmB,SAAS,KAC1B,oBAAC,mBAAD,EAAoD,iBAAmB,GAAhD,UAAgD;EAEzE,KAAK,eAAe,SAAS,KAC3B,oBAAC,kBAAD,EAAkD,iBAAmB,GAA/C,SAA+C;EAEvE,GAAG;CACL,CAAC,CAAC,OAAO,OAAO;CAEhB,MAAM,sBAAsB,KAAK,QAAQ,MACtC,MAAM,EAAE,aAAa,WACxB;CAEA,MAAM,aAAa,qBAAqB,SAAS,EAC/C,4BAA4B,MAC9B,CAAC;CAED,IAAI,WAAW,WAAW,GACxB,OAAO;CAGT,OACE,qBAAC,cAAD;EAA0B;EAA1B,UAAA;GACE,qBAAC,YAAD;IACE,WAAW,KACTC,sBAAO,cACP,sBAAsB,KAAA,IAAYA,sBAAO,aAC3C;IACA,SAAQ;IACR,OAAM;IACM;IAPd,UAAA,CASE,oBAAC,UAAD,EAAA,UAAW,gBAAgB,OAAO,aAAa,EAAY,CAAA,GAC3D,oBAAC,YAAD,CAAa,CAAA,CACH;;GAEZ,oBAAC,YAAD;IACE,WAAWA,sBAAO;IAClB,SAAQ;IACR,OAAM;IACN,cAAY,gBAAgB,OAAO,aAAa;IAEhD,UAAA,oBAAC,YAAD,CAAa,CAAA;GACH,CAAA;GAEZ,qBAAC,OAAD;IAAO,WAAA;IAAsB;IAA7B,UAAA;KACE,oBAAC,aAAD,EAAA,UAAc,gBAAgB,OAAO,aAAa,EAAe,CAAA;KACjE,oBAAC,aAAD,EAAA,UACE,oBAAC,aAAD,EAAA,UACE,oBAAC,oBAAD,EAAA,UAAA,CAAoB,GAAI,UAA+B,EAAA,CAAA,EAC5C,CAAA,EACF,CAAA;KAEb,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,YAAD;MAAY,eAAe,WAAW,MAAM;MAC1C,UAAA,oBAAC,UAAD,EAAA,UACG,qBACC,oBAAC,kBAAD,EAAkB,OAAM,OAAQ,CAAA,IAEhC,gBAAgB,OAAO,gBAAgB,EACrC,eACF,CAAC,EAEK,CAAA;KACA,CAAA,GACZ,oBAAC,YAAD;MACE,OAAM;MACN,SAAQ;MACR,eAAe;OACb,KAAK,aAAa;OAClB,WAAW,MAAM;MACnB;MAEC,UAAA,gBAAgB,OAAO,OAAO;KACrB,CAAA,CACG,EAAA,CAAA;IACZ;;EACK;;AAElB"}
@@ -4,7 +4,7 @@ import { useOnChange } from "../../../../../../lib/hooks/useOnChange.mjs";
4
4
  import SearchFieldView from "../../../../../../views/SearchFieldView.mjs";
5
5
  import SearchField_module_default from "./SearchField.module.mjs";
6
6
  import { useAriaAnnounceSearchState } from "../../../../hooks/useAriaAnnounceSearchState.mjs";
7
- import { createElement, useEffect, useState } from "react";
7
+ import { createElement, useEffect, useEffectEvent, useState } from "react";
8
8
  import { jsx } from "react/jsx-runtime";
9
9
  //#region src/components/List/components/Header/components/SearchField/SearchField.tsx
10
10
  var autoSubmitTimeout = 500;
@@ -19,9 +19,10 @@ var DefaultSearchFieldRender = (props) => {
19
19
  onChange(searchString);
20
20
  }
21
21
  };
22
+ const autoSubmitSearch = useEffectEvent(submitSearch);
22
23
  useEffect(() => {
23
24
  if (autoSubmit) {
24
- const timeout = setTimeout(() => submitSearch(), autoSubmitTimeout);
25
+ const timeout = setTimeout(() => autoSubmitSearch(), autoSubmitTimeout);
25
26
  return () => clearTimeout(timeout);
26
27
  }
27
28
  }, [searchString, autoSubmit]);
@@ -50,6 +51,7 @@ var SearchField = (props) => {
50
51
  const { search, isDisabled } = props;
51
52
  const render = search.render ?? DefaultSearchFieldRender;
52
53
  return createElement(render, {
54
+ key: isDisabled ? "disabled" : "enabled",
53
55
  value: search.value,
54
56
  onChange: search.setValue.bind(search),
55
57
  isDisabled,
@@ -1 +1 @@
1
- {"version":3,"file":"SearchField.mjs","names":["styles"],"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 isDisabled?: boolean;\n}\n\nconst autoSubmitTimeout = 500;\n\nconst DefaultSearchFieldRender: SearchFieldRenderComponent = (props) => {\n const { onChange, value, autoSubmit = true, ...searchFieldProps } = props;\n\n const [searchString, setSearchString] = useState(value ?? \"\");\n const [previousSearchString, setPreviousSearchString] = useState(\"\");\n\n const submitSearch = () => {\n if (searchString.trim() === \"\") {\n onChange(undefined);\n } else if (previousSearchString !== searchString) {\n setPreviousSearchString(searchString);\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\" && !autoSubmit) {\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, isDisabled } = props;\n\n const render = search.render ?? DefaultSearchFieldRender;\n\n return createElement(render, {\n value: search.value,\n onChange: search.setValue.bind(search),\n isDisabled,\n ...search.textFieldProps,\n });\n};\n\nexport default SearchField;\n"],"mappings":";;;;;;;;;AAeA,IAAM,oBAAoB;AAE1B,IAAM,4BAAwD,UAAU;CACtE,MAAM,EAAE,UAAU,OAAO,aAAa,MAAM,GAAG,qBAAqB;CAEpE,MAAM,CAAC,cAAc,mBAAmB,SAAS,SAAS,EAAE;CAC5D,MAAM,CAAC,sBAAsB,2BAA2B,SAAS,EAAE;CAEnE,MAAM,qBAAqB;EACzB,IAAI,aAAa,KAAK,MAAM,IAC1B,SAAS,KAAA,CAAS;OACb,IAAI,yBAAyB,cAAc;GAChD,wBAAwB,YAAY;GACpC,SAAS,YAAY;EACvB;CACF;CAEA,gBAAgB;EACd,IAAI,YAAY;GACd,MAAM,UAAU,iBAAiB,aAAa,GAAG,iBAAiB;GAClE,aAAa,aAAa,OAAO;EACnC;CACF,GAAG,CAAC,cAAc,UAAU,CAAC;CAE7B,2BAA2B;CAE3B,YAAY,aAAa;EACvB,gBAAgB,SAAS,EAAE;CAC7B,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,oBAAoB;EACxB,SAAS,KAAA,CAAS;EAClB,gBAAgB,EAAE;CACpB;CAEA,MAAM,kBAAkB,MAAqB;EAC3C,IAAI,EAAE,QAAQ,WAAW,CAAC,YACxB,aAAa;OACR,IAAI,EAAE,QAAQ,UACnB,YAAY;CAEhB;CAEA,OACE,oBAAC,iBAAD;EACE,WAAWA,2BAAO;EAClB,OAAO;EACP,SAAS;EACT,WAAW,UAAU,gBAAgB,KAAK;EAC1C,SAAS;EACT,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,eAA0B,UAAU;CAC/C,MAAM,EAAE,QAAQ,eAAe;CAE/B,MAAM,SAAS,OAAO,UAAU;CAEhC,OAAO,cAAc,QAAQ;EAC3B,OAAO,OAAO;EACd,UAAU,OAAO,SAAS,KAAK,MAAM;EACrC;EACA,GAAG,OAAO;CACZ,CAAC;AACH"}
1
+ {"version":3,"file":"SearchField.mjs","names":["styles"],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/SearchField/SearchField.tsx"],"sourcesContent":["import type { FC, KeyboardEvent } from \"react\";\nimport { createElement, useEffect, useEffectEvent, 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 isDisabled?: boolean;\n}\n\nconst autoSubmitTimeout = 500;\n\nconst DefaultSearchFieldRender: SearchFieldRenderComponent = (props) => {\n const { onChange, value, autoSubmit = true, ...searchFieldProps } = props;\n\n const [searchString, setSearchString] = useState(value ?? \"\");\n const [previousSearchString, setPreviousSearchString] = useState(\"\");\n\n const submitSearch = () => {\n if (searchString.trim() === \"\") {\n onChange(undefined);\n } else if (previousSearchString !== searchString) {\n setPreviousSearchString(searchString);\n onChange(searchString);\n }\n };\n\n const autoSubmitSearch = useEffectEvent(submitSearch);\n\n useEffect(() => {\n if (autoSubmit) {\n const timeout = setTimeout(() => autoSubmitSearch(), 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\" && !autoSubmit) {\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, isDisabled } = props;\n\n const render = search.render ?? DefaultSearchFieldRender;\n\n return createElement(render, {\n // autoFocus only acts on mount, and a disabled field cannot take focus –\n // remount once the initial loading enables it.\n key: isDisabled ? \"disabled\" : \"enabled\",\n value: search.value,\n onChange: search.setValue.bind(search),\n isDisabled,\n ...search.textFieldProps,\n });\n};\n\nexport default SearchField;\n"],"mappings":";;;;;;;;;AAeA,IAAM,oBAAoB;AAE1B,IAAM,4BAAwD,UAAU;CACtE,MAAM,EAAE,UAAU,OAAO,aAAa,MAAM,GAAG,qBAAqB;CAEpE,MAAM,CAAC,cAAc,mBAAmB,SAAS,SAAS,EAAE;CAC5D,MAAM,CAAC,sBAAsB,2BAA2B,SAAS,EAAE;CAEnE,MAAM,qBAAqB;EACzB,IAAI,aAAa,KAAK,MAAM,IAC1B,SAAS,KAAA,CAAS;OACb,IAAI,yBAAyB,cAAc;GAChD,wBAAwB,YAAY;GACpC,SAAS,YAAY;EACvB;CACF;CAEA,MAAM,mBAAmB,eAAe,YAAY;CAEpD,gBAAgB;EACd,IAAI,YAAY;GACd,MAAM,UAAU,iBAAiB,iBAAiB,GAAG,iBAAiB;GACtE,aAAa,aAAa,OAAO;EACnC;CACF,GAAG,CAAC,cAAc,UAAU,CAAC;CAE7B,2BAA2B;CAE3B,YAAY,aAAa;EACvB,gBAAgB,SAAS,EAAE;CAC7B,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,oBAAoB;EACxB,SAAS,KAAA,CAAS;EAClB,gBAAgB,EAAE;CACpB;CAEA,MAAM,kBAAkB,MAAqB;EAC3C,IAAI,EAAE,QAAQ,WAAW,CAAC,YACxB,aAAa;OACR,IAAI,EAAE,QAAQ,UACnB,YAAY;CAEhB;CAEA,OACE,oBAAC,iBAAD;EACE,WAAWA,2BAAO;EAClB,OAAO;EACP,SAAS;EACT,WAAW,UAAU,gBAAgB,KAAK;EAC1C,SAAS;EACT,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,eAA0B,UAAU;CAC/C,MAAM,EAAE,QAAQ,eAAe;CAE/B,MAAM,SAAS,OAAO,UAAU;CAEhC,OAAO,cAAc,QAAQ;EAG3B,KAAK,aAAa,aAAa;EAC/B,OAAO,OAAO;EACd,UAAU,OAAO,SAAS,KAAK,MAAM;EACrC;EACA,GAAG,OAAO;CACZ,CAAC;AACH"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mittwald/flow-react-components",
3
- "version": "1.6.0-next.30",
3
+ "version": "1.6.0-next.32",
4
4
  "type": "module",
5
5
  "description": "A React implementation of Flow, mittwald’s design system",
6
6
  "homepage": "https://flow.mittwald.de",
@@ -84,9 +84,9 @@
84
84
  "@internationalized/string-compiler": "^3.4.1",
85
85
  "@lezer/common": "^1.5.2",
86
86
  "@lezer/highlight": "^1.2.3",
87
- "@mittwald/flow-icons": "^1.6.0-next.30",
87
+ "@mittwald/flow-icons": "^1.6.0-next.32",
88
88
  "@mittwald/password-tools-js": "^3.0.0",
89
- "@mittwald/react-tunnel": "^1.6.0-next.30",
89
+ "@mittwald/react-tunnel": "^1.6.0-next.32",
90
90
  "@mittwald/react-use-promise": "^4.2.2",
91
91
  "@react-aria/form": "^3.2.1",
92
92
  "@react-aria/i18n": "^3.13.1",
@@ -139,13 +139,13 @@
139
139
  "@internationalized/date": "^3.12.3",
140
140
  "@lezer/generator": "^1.8.0",
141
141
  "@lezer/lr": "^1.4.10",
142
- "@mittwald/flow-components-base": "1.6.0-next.30",
143
- "@mittwald/flow-core": "1.6.0-next.30",
144
- "@mittwald/flow-design-tokens": "1.6.0-next.30",
145
- "@mittwald/flow-icons-base": "1.6.0-next.30",
142
+ "@mittwald/flow-components-base": "1.6.0-next.32",
143
+ "@mittwald/flow-core": "1.6.0-next.32",
144
+ "@mittwald/flow-design-tokens": "1.6.0-next.32",
145
+ "@mittwald/flow-icons-base": "1.6.0-next.32",
146
146
  "@mittwald/react-use-promise": "^4.2.2",
147
147
  "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
148
- "@mittwald/typescript-config": "1.6.0-next.30",
148
+ "@mittwald/typescript-config": "1.6.0-next.32",
149
149
  "@nx/storybook": "^22.7.6",
150
150
  "@storybook/addon-a11y": "^10.5.10",
151
151
  "@storybook/addon-actions": "^9.0.8",
@@ -199,7 +199,7 @@
199
199
  },
200
200
  "peerDependencies": {
201
201
  "@internationalized/date": "^3.12.2",
202
- "@mittwald/flow-icons-pro": "1.6.0-next.30",
202
+ "@mittwald/flow-icons-pro": "1.6.0-next.32",
203
203
  "@mittwald/react-use-promise": "^4.2.2",
204
204
  "next": "^16.2.3",
205
205
  "react": "^19.2.0",
@@ -223,5 +223,5 @@
223
223
  "browserslist": [
224
224
  "baseline widely available"
225
225
  ],
226
- "gitHead": "e508cff063cd3184b66a56fbd8ac92e611c9ac38"
226
+ "gitHead": "3b3b3c48b5a98197d740d107c30f6130732594c0"
227
227
  }