@mittwald/flow-react-components 0.2.0-alpha.192 → 0.2.0-alpha.194

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 React, { 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\";\n\ninterface Props extends PropsWithClassName {\n  search: Search<never>;\n}\n\nconst autoSubmitTimeout = 800;\n\nconst DefaultSearchFieldRender: SearchFieldRenderComponent = (props) => {\n  const { className, 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={className}\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 { className, search } = props;\n  const render = search.render ?? DefaultSearchFieldRender;\n\n  return createElement(render, {\n    className,\n    value: search.value,\n    onChange: search.setValue.bind(search),\n    ...search.textFieldProps,\n  });\n};\n"],"names":["value"],"mappings":";;;;;;;;;;;;;;AAYA,MAAM,iBAAoB,GAAA,GAAA;AAE1B,MAAM,wBAAA,GAAuD,CAAC,KAAU,KAAA;AACtE,EAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,OAAO,UAAY,EAAA,GAAG,kBAAqB,GAAA,KAAA;AAExE,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,SAAA;AAAA,MACA,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,SAAW,EAAA,MAAA,EAAW,GAAA,KAAA;AAC9B,EAAM,MAAA,MAAA,GAAS,OAAO,MAAU,IAAA,wBAAA;AAEhC,EAAA,OAAO,cAAc,MAAQ,EAAA;AAAA,IAC3B,SAAA;AAAA,IACA,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 React, { 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"],"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;;;;"}

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

@@ -0,0 +1,9 @@
+"use client"
+/* */
+const searchField = "flow--list--header--search-field";
+const styles = {
+	searchField: searchField
+};
+
+export { styles as default, searchField };
+//# sourceMappingURL=SearchField.module.scss.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchField.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/js/components/src/components/List/components/Header/components/Settings/SettingsMenu.mjs

@@ -0,0 +1,76 @@
+"use client"
+/* */
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
+import { useList } from '../../../../hooks/useList.mjs';
+import { ContextMenu } from '../../../../../ContextMenu/ContextMenu.mjs';
+import '../../../../../MenuItem/MenuItem.mjs';
+import { ContextMenuTrigger } from '../../../../../ContextMenu/components/ContextMenuTrigger/ContextMenuTrigger.mjs';
+import 'react-aria-components';
+import { ContextMenuSection } from '../../../../../ContextMenu/components/ContextMenuSection/ContextMenuSection.mjs';
+import locales from '../../../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
+import ButtonView from '../../../../../../views/ButtonView.mjs';
+import '@tabler/icons-react';
+import '../../../../../Icon/Icon.mjs';
+import '../../../../../../lib/viewComponentContext/viewComponentContext.mjs';
+import { IconSettings } from '../../../../../Icon/components/icons/IconSettings.mjs';
+import HeadingView from '../../../../../../views/HeadingView.mjs';
+import { useLocalizedStringFormatter } from 'react-aria';
+import headerStyles from '../../Header.module.css.mjs';
+import { Separator } from '../../../../../Separator/Separator.mjs';
+import { ViewModeMenuItem } from './ViewModeMenuItem.mjs';
+import { useAvailableViewModes } from '../../lib.mjs';
+import { SortingMenuItem } from './SortingMenuItem.mjs';
+
+const SettingsMenu = () => {
+  const list = useList();
+  const selectedViewMode = list.viewMode;
+  const availableViewModes = useAvailableViewModes();
+  const viewModeItems = availableViewModes.map((viewMode) => /* @__PURE__ */ jsx(ViewModeMenuItem, { viewMode }));
+  const sortingItems = list.visibleSorting.map((s) => /* @__PURE__ */ jsx(SortingMenuItem, { sorting: s }, s.id));
+  const labelSorting = list.visibleSorting.find((s) => s.isSorted());
+  const stringFormatter = useLocalizedStringFormatter(locales);
+  if (sortingItems.length === 0 && viewModeItems.length <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(ContextMenuTrigger, { children: [
+    /* @__PURE__ */ jsx(
+      ButtonView,
+      {
+        className: headerStyles.mobile,
+        variant: "outline",
+        color: "secondary",
+        "aria-label": stringFormatter.format("list.settings"),
+        children: /* @__PURE__ */ jsx(IconSettings, {})
+      }
+    ),
+    /* @__PURE__ */ jsxs(ContextMenu, { children: [
+      viewModeItems.length > 1 && /* @__PURE__ */ jsxs(
+        ContextMenuSection,
+        {
+          selectionMode: "single",
+          selectedKeys: [selectedViewMode],
+          children: [
+            /* @__PURE__ */ jsx(HeadingView, { children: stringFormatter.format("list.settings.viewMode") }),
+            viewModeItems
+          ]
+        }
+      ),
+      sortingItems.length > 0 && viewModeItems.length > 1 && /* @__PURE__ */ jsx(Separator, {}),
+      sortingItems.length > 0 && /* @__PURE__ */ jsxs(
+        ContextMenuSection,
+        {
+          selectionMode: "single",
+          selectedKeys: labelSorting ? [labelSorting.id] : [],
+          children: [
+            /* @__PURE__ */ jsx(HeadingView, { children: stringFormatter.format("list.sorting") }),
+            sortingItems
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+
+export { SettingsMenu };
+//# sourceMappingURL=SettingsMenu.mjs.map

package/dist/js/components/src/components/List/components/Header/components/Settings/SettingsMenu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsMenu.mjs","sources":["../../../../../../../../../../src/components/List/components/Header/components/Settings/SettingsMenu.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport ContextMenu, {\n  ContextMenuSection,\n  ContextMenuTrigger,\n} from \"@/components/ContextMenu\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { IconSettings } from \"@/components/Icon/components/icons\";\nimport HeadingView from \"@/views/HeadingView\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport styles from \"../../Header.module.css\";\nimport { Separator } from \"@/components/Separator\";\nimport { ViewModeMenuItem } from \"@/components/List/components/Header/components/Settings/ViewModeMenuItem\";\nimport { useAvailableViewModes } from \"@/components/List/components/Header/lib\";\nimport { SortingMenuItem } from \"@/components/List/components/Header/components/Settings/SortingMenuItem\";\n\nexport const SettingsMenu: FC = () => {\n  const list = useList();\n\n  const selectedViewMode = list.viewMode;\n  const availableViewModes = useAvailableViewModes();\n  const viewModeItems = availableViewModes.map((viewMode) => (\n    <ViewModeMenuItem viewMode={viewMode} />\n  ));\n\n  const sortingItems = list.visibleSorting.map((s) => (\n    <SortingMenuItem sorting={s} key={s.id} />\n  ));\n  const labelSorting = list.visibleSorting.find((s) => s.isSorted());\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  if (sortingItems.length === 0 && viewModeItems.length <= 1) {\n    return null;\n  }\n\n  return (\n    <ContextMenuTrigger>\n      <ButtonView\n        className={styles.mobile}\n        variant=\"outline\"\n        color=\"secondary\"\n        aria-label={stringFormatter.format(\"list.settings\")}\n      >\n        <IconSettings />\n      </ButtonView>\n\n      <ContextMenu>\n        {viewModeItems.length > 1 && (\n          <ContextMenuSection\n            selectionMode=\"single\"\n            selectedKeys={[selectedViewMode]}\n          >\n            <HeadingView>\n              {stringFormatter.format(\"list.settings.viewMode\")}\n            </HeadingView>\n            {viewModeItems}\n          </ContextMenuSection>\n        )}\n\n        {sortingItems.length > 0 && viewModeItems.length > 1 && <Separator />}\n\n        {sortingItems.length > 0 && (\n          <ContextMenuSection\n            selectionMode=\"single\"\n            selectedKeys={labelSorting ? [labelSorting.id] : []}\n          >\n            <HeadingView>{stringFormatter.format(\"list.sorting\")}</HeadingView>\n            {sortingItems}\n          </ContextMenuSection>\n        )}\n      </ContextMenu>\n    </ContextMenuTrigger>\n  );\n};\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAkBO,MAAM,eAAmB,MAAM;AACpC,EAAA,MAAM,OAAO,OAAQ,EAAA;AAErB,EAAA,MAAM,mBAAmB,IAAK,CAAA,QAAA;AAC9B,EAAA,MAAM,qBAAqB,qBAAsB,EAAA;AACjD,EAAM,MAAA,aAAA,GAAgB,mBAAmB,GAAI,CAAA,CAAC,6BAC3C,GAAA,CAAA,gBAAA,EAAA,EAAiB,UAAoB,CACvC,CAAA;AAED,EAAA,MAAM,YAAe,GAAA,IAAA,CAAK,cAAe,CAAA,GAAA,CAAI,CAAC,CAAA,qBAC3C,GAAA,CAAA,eAAA,EAAA,EAAgB,OAAS,EAAA,CAAA,EAAA,EAAQ,CAAE,CAAA,EAAI,CACzC,CAAA;AACD,EAAM,MAAA,YAAA,GAAe,KAAK,cAAe,CAAA,IAAA,CAAK,CAAC,CAAM,KAAA,CAAA,CAAE,UAAU,CAAA;AAEjE,EAAM,MAAA,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,IAAI,YAAa,CAAA,MAAA,KAAW,CAAK,IAAA,aAAA,CAAc,UAAU,CAAG,EAAA;AAC1D,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,4BACG,kBACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,WAAWA,YAAO,CAAA,MAAA;AAAA,QAClB,OAAQ,EAAA,SAAA;AAAA,QACR,KAAM,EAAA,WAAA;AAAA,QACN,YAAA,EAAY,eAAgB,CAAA,MAAA,CAAO,eAAe,CAAA;AAAA,QAElD,8BAAC,YAAa,EAAA,EAAA;AAAA;AAAA,KAChB;AAAA,yBAEC,WACE,EAAA,EAAA,QAAA,EAAA;AAAA,MAAA,aAAA,CAAc,SAAS,CACtB,oBAAA,IAAA;AAAA,QAAC,kBAAA;AAAA,QAAA;AAAA,UACC,aAAc,EAAA,QAAA;AAAA,UACd,YAAA,EAAc,CAAC,gBAAgB,CAAA;AAAA,UAE/B,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,WACE,EAAA,EAAA,QAAA,EAAA,eAAA,CAAgB,MAAO,CAAA,wBAAwB,CAClD,EAAA,CAAA;AAAA,YACC;AAAA;AAAA;AAAA,OACH;AAAA,MAGD,aAAa,MAAS,GAAA,CAAA,IAAK,cAAc,MAAS,GAAA,CAAA,wBAAM,SAAU,EAAA,EAAA,CAAA;AAAA,MAElE,YAAA,CAAa,SAAS,CACrB,oBAAA,IAAA;AAAA,QAAC,kBAAA;AAAA,QAAA;AAAA,UACC,aAAc,EAAA,QAAA;AAAA,UACd,cAAc,YAAe,GAAA,CAAC,YAAa,CAAA,EAAE,IAAI,EAAC;AAAA,UAElD,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,WAAa,EAAA,EAAA,QAAA,EAAA,eAAA,CAAgB,MAAO,CAAA,cAAc,CAAE,EAAA,CAAA;AAAA,YACpD;AAAA;AAAA;AAAA;AACH,KAEJ,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/List/components/Header/components/{SortingPicker/SortingPicker.mjs → Settings/SortingMenu.mjs}

@@ -2,7 +2,6 @@
 /* */
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import 'react';
-import { SortingPickerItem } from '../SortingPickerItem/SortingPickerItem.mjs';
 import { useList } from '../../../../hooks/useList.mjs';
 import { ContextMenu } from '../../../../../ContextMenu/ContextMenu.mjs';
 import '../../../../../MenuItem/MenuItem.mjs';
@@ -17,33 +16,40 @@ import '@tabler/icons-react';
 import '../../../../../Icon/Icon.mjs';
 import '../../../../../../lib/viewComponentContext/viewComponentContext.mjs';
 import { IconSorting } from '../../../../../Icon/components/icons/IconSorting.mjs';
+import headerStyles from '../../Header.module.css.mjs';
+import { SortingMenuItem } from './SortingMenuItem.mjs';
 
-const SortingPicker = () => {
+const SortingMenu = () => {
   const list = useList();
-  const pickerItems = list.visibleSorting.map((s) => /* @__PURE__ */ jsx(SortingPickerItem, { sorting: s }, s.id));
-  if (pickerItems.length === 0) {
+  const sortingItems = list.visibleSorting.map((s) => /* @__PURE__ */ jsx(SortingMenuItem, { sorting: s }, s.id));
+  if (sortingItems.length === 0) {
     return null;
   }
-  const pickerLabelSorting = list.visibleSorting.find((s) => s.isSorted());
-  const text = /* @__PURE__ */ jsx(TextView, { children: pickerLabelSorting ? /* @__PURE__ */ jsx(Fragment, { children: pickerLabelSorting.name ?? pickerLabelSorting.property }) : /* @__PURE__ */ jsx(Translate, { locales, children: "list.sorting" }) });
+  const labelSorting = list.visibleSorting.find((s) => s.isSorted());
+  const text = /* @__PURE__ */ jsx(TextView, { children: labelSorting ? /* @__PURE__ */ jsx(Fragment, { children: labelSorting.name ?? labelSorting.property }) : /* @__PURE__ */ jsx(Translate, { locales, children: "list.sorting" }) });
   return /* @__PURE__ */ jsxs(ContextMenuTrigger, { children: [
-    /* @__PURE__ */ jsxs(ButtonView, { variant: "outline", color: "secondary", children: [
-      text,
-      /* @__PURE__ */ jsx(IconSorting, {})
-    ] }),
+    /* @__PURE__ */ jsxs(
+      ButtonView,
+      {
+        variant: "outline",
+        color: "secondary",
+        className: headerStyles.desktop,
+        children: [
+          text,
+          /* @__PURE__ */ jsx(IconSorting, {})
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx(
       ContextMenu,
       {
         selectionMode: "single",
-        selectedKeys: pickerLabelSorting ? [pickerLabelSorting.id] : [],
-        onAction: (id) => {
-          list.getSorting(String(id)).enable();
-        },
-        children: pickerItems
+        selectedKeys: labelSorting ? [labelSorting.id] : [],
+        children: sortingItems
       }
     )
   ] });
 };
 
-export { SortingPicker };
-//# sourceMappingURL=SortingPicker.mjs.map
+export { SortingMenu };
+//# sourceMappingURL=SortingMenu.mjs.map

package/dist/js/components/src/components/List/components/Header/components/Settings/SortingMenu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortingMenu.mjs","sources":["../../../../../../../../../../src/components/List/components/Header/components/Settings/SortingMenu.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport ContextMenu, { ContextMenuTrigger } from \"@/components/ContextMenu\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { Translate } from \"@/lib/react/components/Translate\";\nimport TextView from \"@/views/TextView\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { IconSorting } from \"@/components/Icon/components/icons\";\nimport styles from \"@/components/List/components/Header/Header.module.css\";\nimport { SortingMenuItem } from \"@/components/List/components/Header/components/Settings/SortingMenuItem\";\n\nexport const SortingMenu: FC = () => {\n  const list = useList();\n\n  const sortingItems = list.visibleSorting.map((s) => (\n    <SortingMenuItem sorting={s} key={s.id} />\n  ));\n\n  if (sortingItems.length === 0) {\n    return null;\n  }\n\n  const labelSorting = list.visibleSorting.find((s) => s.isSorted());\n\n  const text = (\n    <TextView>\n      {labelSorting ? (\n        <>{labelSorting.name ?? labelSorting.property}</>\n      ) : (\n        <Translate locales={locales}>list.sorting</Translate>\n      )}\n    </TextView>\n  );\n\n  return (\n    <ContextMenuTrigger>\n      <ButtonView\n        variant=\"outline\"\n        color=\"secondary\"\n        className={styles.desktop}\n      >\n        {text}\n        <IconSorting />\n      </ButtonView>\n      <ContextMenu\n        selectionMode=\"single\"\n        selectedKeys={labelSorting ? [labelSorting.id] : []}\n      >\n        {sortingItems}\n      </ContextMenu>\n    </ContextMenuTrigger>\n  );\n};\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;;;;AAYO,MAAM,cAAkB,MAAM;AACnC,EAAA,MAAM,OAAO,OAAQ,EAAA;AAErB,EAAA,MAAM,YAAe,GAAA,IAAA,CAAK,cAAe,CAAA,GAAA,CAAI,CAAC,CAAA,qBAC3C,GAAA,CAAA,eAAA,EAAA,EAAgB,OAAS,EAAA,CAAA,EAAA,EAAQ,CAAE,CAAA,EAAI,CACzC,CAAA;AAED,EAAI,IAAA,YAAA,CAAa,WAAW,CAAG,EAAA;AAC7B,IAAO,OAAA,IAAA;AAAA;AAGT,EAAM,MAAA,YAAA,GAAe,KAAK,cAAe,CAAA,IAAA,CAAK,CAAC,CAAM,KAAA,CAAA,CAAE,UAAU,CAAA;AAEjE,EAAA,MAAM,IACJ,mBAAA,GAAA,CAAC,QACE,EAAA,EAAA,QAAA,EAAA,YAAA,mCACI,QAAa,EAAA,YAAA,CAAA,IAAA,IAAQ,YAAa,CAAA,QAAA,EAAS,CAE9C,mBAAA,GAAA,CAAC,SAAU,EAAA,EAAA,OAAA,EAAkB,0BAAY,CAE7C,EAAA,CAAA;AAGF,EAAA,4BACG,kBACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,SAAA;AAAA,QACR,KAAM,EAAA,WAAA;AAAA,QACN,WAAWA,YAAO,CAAA,OAAA;AAAA,QAEjB,QAAA,EAAA;AAAA,UAAA,IAAA;AAAA,8BACA,WAAY,EAAA,EAAA;AAAA;AAAA;AAAA,KACf;AAAA,oBACA,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,aAAc,EAAA,QAAA;AAAA,QACd,cAAc,YAAe,GAAA,CAAC,YAAa,CAAA,EAAE,IAAI,EAAC;AAAA,QAEjD,QAAA,EAAA;AAAA;AAAA;AACH,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/List/components/Header/components/Settings/SortingMenuItem.mjs

@@ -0,0 +1,48 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import MenuItemView from '../../../../../../views/MenuItemView.mjs';
+import 'invariant';
+import 'luxon';
+import 'react-aria-components';
+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 '@tabler/icons-react';
+import '../../../../../Icon/Icon.mjs';
+import '../../../../../Heading/Heading.mjs';
+import '../../../../../Text/Text.mjs';
+import 'react-aria';
+import '../../../../../Button/Button.mjs';
+import '../../../../../ContextMenu/ContextMenu.mjs';
+import '../../../../../MenuItem/MenuItem.mjs';
+import '../../../../../ContextMenu/components/ContextMenuTrigger/ContextMenuTrigger.mjs';
+import '../../../../../ContextMenu/components/ContextMenuSection/ContextMenuSection.mjs';
+import '../../../../../ColumnLayout/ColumnLayout.mjs';
+import '../../../ListSummary/ListSummary.mjs';
+import { useList } from '../../../../hooks/useList.mjs';
+import '../../../../List.mjs';
+
+const SortingMenuItem = (props) => {
+  const { sorting } = props;
+  const list = useList();
+  return /* @__PURE__ */ jsx(
+    MenuItemView,
+    {
+      id: sorting.id,
+      onAction: () => {
+        list.getSorting(sorting.id).enable();
+      },
+      children: sorting.name ?? sorting.property
+    }
+  );
+};
+
+export { SortingMenuItem };
+//# sourceMappingURL=SortingMenuItem.mjs.map

package/dist/js/components/src/components/List/components/Header/components/Settings/SortingMenuItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortingMenuItem.mjs","sources":["../../../../../../../../../../src/components/List/components/Header/components/Settings/SortingMenuItem.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport type { Sorting } from \"@/components/List/model/sorting/Sorting\";\nimport MenuItemView from \"@/views/MenuItemView\";\nimport { useList } from \"@/components/List\";\n\ninterface Props {\n  sorting: Sorting<never>;\n}\n\nexport const SortingMenuItem: FC<Props> = (props) => {\n  const { sorting } = props;\n\n  const list = useList();\n\n  return (\n    <MenuItemView\n      id={sorting.id}\n      onAction={() => {\n        list.getSorting(sorting.id).enable();\n      }}\n    >\n      {sorting.name ?? sorting.property}\n    </MenuItemView>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUa,MAAA,eAAA,GAA6B,CAAC,KAAU,KAAA;AACnD,EAAM,MAAA,EAAE,SAAY,GAAA,KAAA;AAEpB,EAAA,MAAM,OAAO,OAAQ,EAAA;AAErB,EACE,uBAAA,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,IAAI,OAAQ,CAAA,EAAA;AAAA,MACZ,UAAU,MAAM;AACd,QAAA,IAAA,CAAK,UAAW,CAAA,OAAA,CAAQ,EAAE,CAAA,CAAE,MAAO,EAAA;AAAA,OACrC;AAAA,MAEC,QAAA,EAAA,OAAA,CAAQ,QAAQ,OAAQ,CAAA;AAAA;AAAA,GAC3B;AAEJ;;;;"}

package/dist/js/components/src/components/List/components/Header/components/{ViewModeMenu → Settings}/ViewModeMenu.mjs

@@ -30,24 +30,15 @@ import '../../../ListSummary/ListSummary.mjs';
 import { useList } from '../../../../hooks/useList.mjs';
 import '../../../../List.mjs';
 import TextView from '../../../../../../views/TextView.mjs';
-import SectionView from '../../../../../../views/SectionView.mjs';
-import MenuItemView from '../../../../../../views/MenuItemView.mjs';
-import HeadingView from '../../../../../../views/HeadingView.mjs';
+import { ViewModeMenuItem } from './ViewModeMenuItem.mjs';
+import { useAvailableViewModes } from '../../lib.mjs';
+import headerStyles from '../../Header.module.css.mjs';
 
 const ViewModeMenu = () => {
   const stringFormatter = useLocalizedStringFormatter(locales);
   const list = useList();
   const selectedViewMode = list.viewMode;
-  const availableViewModes = [];
-  if (list.itemView?.showList) {
-    availableViewModes.push("list");
-  }
-  if (list.table) {
-    availableViewModes.push("table");
-  }
-  if (list.itemView?.showTiles) {
-    availableViewModes.push("tiles");
-  }
+  const availableViewModes = useAvailableViewModes();
   if (availableViewModes.length <= 1) {
     return null;
   }
@@ -58,26 +49,14 @@ const ViewModeMenu = () => {
         variant: "outline",
         color: "secondary",
         "aria-label": stringFormatter.format("list.settings"),
+        className: headerStyles.desktop,
         children: [
           /* @__PURE__ */ jsx(TextView, { children: stringFormatter.format(`list.settings.viewMode.${selectedViewMode}`) }),
           /* @__PURE__ */ jsx(IconView, {})
         ]
       }
     ),
-    /* @__PURE__ */ jsx(ContextMenu, { selectionMode: "single", selectedKeys: [selectedViewMode], children: /* @__PURE__ */ jsxs(SectionView, { children: [
-      /* @__PURE__ */ jsx(HeadingView, { children: stringFormatter.format("list.settings.viewMode") }),
-      availableViewModes.map((viewMode) => /* @__PURE__ */ jsx(
-        MenuItemView,
-        {
-          id: viewMode,
-          onAction: () => {
-            list.setViewMode(viewMode);
-          },
-          children: stringFormatter.format(`list.settings.viewMode.${viewMode}`)
-        },
-        viewMode
-      ))
-    ] }) })
+    /* @__PURE__ */ jsx(ContextMenu, { selectionMode: "single", selectedKeys: [selectedViewMode], children: availableViewModes.map((viewMode) => /* @__PURE__ */ jsx(ViewModeMenuItem, { viewMode })) })
   ] });
 };
 

package/dist/js/components/src/components/List/components/Header/components/Settings/ViewModeMenu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewModeMenu.mjs","sources":["../../../../../../../../../../src/components/List/components/Header/components/Settings/ViewModeMenu.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport { useList } from \"@/components/List\";\nimport { IconView } from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport TextView from \"@/views/TextView\";\nimport ContextMenu, { ContextMenuTrigger } from \"@/components/ContextMenu\";\nimport { ViewModeMenuItem } from \"@/components/List/components/Header/components/Settings/ViewModeMenuItem\";\nimport { useAvailableViewModes } from \"@/components/List/components/Header/lib\";\nimport styles from \"@/components/List/components/Header/Header.module.css\";\n\nexport const ViewModeMenu: FC = () => {\n  const stringFormatter = useLocalizedStringFormatter(locales);\n  const list = useList();\n  const selectedViewMode = list.viewMode;\n\n  const availableViewModes = useAvailableViewModes();\n\n  if (availableViewModes.length <= 1) {\n    return null;\n  }\n\n  return (\n    <ContextMenuTrigger>\n      <ButtonView\n        variant=\"outline\"\n        color=\"secondary\"\n        aria-label={stringFormatter.format(\"list.settings\")}\n        className={styles.desktop}\n      >\n        <TextView>\n          {stringFormatter.format(`list.settings.viewMode.${selectedViewMode}`)}\n        </TextView>\n        <IconView />\n      </ButtonView>\n      <ContextMenu selectionMode=\"single\" selectedKeys={[selectedViewMode]}>\n        {availableViewModes.map((viewMode) => (\n          <ViewModeMenuItem viewMode={viewMode} />\n        ))}\n      </ContextMenu>\n    </ContextMenuTrigger>\n  );\n};\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAM,eAAmB,MAAM;AACpC,EAAM,MAAA,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAC3D,EAAA,MAAM,OAAO,OAAQ,EAAA;AACrB,EAAA,MAAM,mBAAmB,IAAK,CAAA,QAAA;AAE9B,EAAA,MAAM,qBAAqB,qBAAsB,EAAA;AAEjD,EAAI,IAAA,kBAAA,CAAmB,UAAU,CAAG,EAAA;AAClC,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,4BACG,kBACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,SAAA;AAAA,QACR,KAAM,EAAA,WAAA;AAAA,QACN,YAAA,EAAY,eAAgB,CAAA,MAAA,CAAO,eAAe,CAAA;AAAA,QAClD,WAAWA,YAAO,CAAA,OAAA;AAAA,QAElB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YACE,QAAgB,EAAA,eAAA,CAAA,MAAA,CAAO,CAA0B,uBAAA,EAAA,gBAAgB,EAAE,CACtE,EAAA,CAAA;AAAA,8BACC,QAAS,EAAA,EAAA;AAAA;AAAA;AAAA,KACZ;AAAA,wBACC,WAAY,EAAA,EAAA,aAAA,EAAc,QAAS,EAAA,YAAA,EAAc,CAAC,gBAAgB,CAAA,EAChE,QAAmB,EAAA,kBAAA,CAAA,GAAA,CAAI,CAAC,QACvB,qBAAA,GAAA,CAAC,gBAAiB,EAAA,EAAA,QAAA,EAAoB,CACvC,CACH,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/List/components/Header/components/Settings/ViewModeMenuItem.mjs

@@ -0,0 +1,51 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import MenuItemView from '../../../../../../views/MenuItemView.mjs';
+import 'invariant';
+import 'luxon';
+import 'react-aria-components';
+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 '@tabler/icons-react';
+import '../../../../../Icon/Icon.mjs';
+import '../../../../../Heading/Heading.mjs';
+import '../../../../../Text/Text.mjs';
+import locales from '../../../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
+import { useLocalizedStringFormatter } from 'react-aria';
+import '../../../../../Button/Button.mjs';
+import '../../../../../ContextMenu/ContextMenu.mjs';
+import '../../../../../MenuItem/MenuItem.mjs';
+import '../../../../../ContextMenu/components/ContextMenuTrigger/ContextMenuTrigger.mjs';
+import '../../../../../ContextMenu/components/ContextMenuSection/ContextMenuSection.mjs';
+import '../../../../../ColumnLayout/ColumnLayout.mjs';
+import '../../../ListSummary/ListSummary.mjs';
+import { useList } from '../../../../hooks/useList.mjs';
+import '../../../../List.mjs';
+
+const ViewModeMenuItem = (props) => {
+  const { viewMode } = props;
+  const list = useList();
+  const stringFormatter = useLocalizedStringFormatter(locales);
+  return /* @__PURE__ */ jsx(
+    MenuItemView,
+    {
+      id: viewMode,
+      onAction: () => {
+        list.setViewMode(viewMode);
+      },
+      children: stringFormatter.format(`list.settings.viewMode.${viewMode}`)
+    },
+    viewMode
+  );
+};
+
+export { ViewModeMenuItem };
+//# sourceMappingURL=ViewModeMenuItem.mjs.map

package/dist/js/components/src/components/List/components/Header/components/Settings/ViewModeMenuItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewModeMenuItem.mjs","sources":["../../../../../../../../../../src/components/List/components/Header/components/Settings/ViewModeMenuItem.tsx"],"sourcesContent":["import React, { type FC } from \"react\";\nimport MenuItemView from \"@/views/MenuItemView\";\nimport type { ListViewMode } from \"@/components/List/model/types\";\nimport { useList } from \"@/components/List\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../../../locales/*.locale.json\";\n\ninterface Props {\n  viewMode: ListViewMode;\n}\n\nexport const ViewModeMenuItem: FC<Props> = (props) => {\n  const { viewMode } = props;\n  const list = useList();\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  return (\n    <MenuItemView\n      id={viewMode}\n      key={viewMode}\n      onAction={() => {\n        list.setViewMode(viewMode);\n      }}\n    >\n      {stringFormatter.format(`list.settings.viewMode.${viewMode}`)}\n    </MenuItemView>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWa,MAAA,gBAAA,GAA8B,CAAC,KAAU,KAAA;AACpD,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA;AACrB,EAAA,MAAM,OAAO,OAAQ,EAAA;AACrB,EAAM,MAAA,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EACE,uBAAA,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA,QAAA;AAAA,MAEJ,UAAU,MAAM;AACd,QAAA,IAAA,CAAK,YAAY,QAAQ,CAAA;AAAA,OAC3B;AAAA,MAEC,QAAgB,EAAA,eAAA,CAAA,MAAA,CAAO,CAA0B,uBAAA,EAAA,QAAQ,CAAE,CAAA;AAAA,KAAA;AAAA,IALvD;AAAA,GAMP;AAEJ;;;;"}

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

@@ -0,0 +1,47 @@
+"use client"
+/* */
+import 'invariant';
+import 'luxon';
+import 'react/jsx-runtime';
+import 'react-aria-components';
+import '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 '@tabler/icons-react';
+import '../../../Icon/Icon.mjs';
+import '../../../Heading/Heading.mjs';
+import '../../../Text/Text.mjs';
+import 'react-aria';
+import '../../../Button/Button.mjs';
+import '../../../ContextMenu/ContextMenu.mjs';
+import '../../../MenuItem/MenuItem.mjs';
+import '../../../ContextMenu/components/ContextMenuTrigger/ContextMenuTrigger.mjs';
+import '../../../ContextMenu/components/ContextMenuSection/ContextMenuSection.mjs';
+import '../../../ColumnLayout/ColumnLayout.mjs';
+import '../ListSummary/ListSummary.mjs';
+import { useList } from '../../hooks/useList.mjs';
+import '../../List.mjs';
+
+const useAvailableViewModes = () => {
+  const list = useList();
+  const availableViewModes = [];
+  if (list.itemView?.showList) {
+    availableViewModes.push("list");
+  }
+  if (list.table) {
+    availableViewModes.push("table");
+  }
+  if (list.itemView?.showTiles) {
+    availableViewModes.push("tiles");
+  }
+  return availableViewModes;
+};
+
+export { useAvailableViewModes };
+//# sourceMappingURL=lib.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lib.mjs","sources":["../../../../../../../../src/components/List/components/Header/lib.ts"],"sourcesContent":["import type { ListViewMode } from \"@/components/List/model/types\";\nimport { useList } from \"@/components/List\";\n\nexport const useAvailableViewModes = () => {\n  const list = useList();\n\n  const availableViewModes: ListViewMode[] = [];\n\n  if (list.itemView?.showList) {\n    availableViewModes.push(\"list\");\n  }\n  if (list.table) {\n    availableViewModes.push(\"table\");\n  }\n  if (list.itemView?.showTiles) {\n    availableViewModes.push(\"tiles\");\n  }\n\n  return availableViewModes;\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGO,MAAM,wBAAwB,MAAM;AACzC,EAAA,MAAM,OAAO,OAAQ,EAAA;AAErB,EAAA,MAAM,qBAAqC,EAAC;AAE5C,EAAI,IAAA,IAAA,CAAK,UAAU,QAAU,EAAA;AAC3B,IAAA,kBAAA,CAAmB,KAAK,MAAM,CAAA;AAAA;AAEhC,EAAA,IAAI,KAAK,KAAO,EAAA;AACd,IAAA,kBAAA,CAAmB,KAAK,OAAO,CAAA;AAAA;AAEjC,EAAI,IAAA,IAAA,CAAK,UAAU,SAAW,EAAA;AAC5B,IAAA,kBAAA,CAAmB,KAAK,OAAO,CAAA;AAAA;AAGjC,EAAO,OAAA,kBAAA;AACT;;;;"}

package/dist/types/components/ComboBox/ComboBox.d.ts

@@ -1,11 +1,12 @@
-import { PropsWithChildren, default as React } from 'react';
+import { PropsWithChildren } from 'react';
 import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
 import { OverlayController } from '../../lib/controller';
+import { OptionsProps } from '../Options/Options';
 import * as Aria from "react-aria-components";
-export interface ComboBoxProps extends Omit<Aria.ComboBoxProps<never>, "children">, Pick<Aria.InputProps, "placeholder">, PropsWithChildren, FlowComponentProps {
+export interface ComboBoxProps extends Omit<Aria.ComboBoxProps<never>, "children">, Pick<Aria.InputProps, "placeholder">, Pick<OptionsProps, "renderEmptyState">, PropsWithChildren, FlowComponentProps {
     onChange?: (value: string) => void;
     controller?: OverlayController;
 }
-export declare const ComboBox: React.FunctionComponent<ComboBoxProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboBox: import('react').FunctionComponent<ComboBoxProps & import('react').RefAttributes<HTMLDivElement>>;
 export default ComboBox;
 //# sourceMappingURL=ComboBox.d.ts.map

package/dist/types/components/ComboBox/ComboBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAY9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAE/E,OAAO,EAAE,KAAK,iBAAiB,EAAwB,MAAM,kBAAkB,CAAC;AAEhF,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,EACjD,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,EACpC,iBAAiB,EACjB,kBAAkB;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,iBAAiB,CAAC;CAChC;AAED,eAAO,MAAM,QAAQ,8EAoFnB,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAY9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAE/E,OAAO,EAAE,KAAK,iBAAiB,EAAwB,MAAM,kBAAkB,CAAC;AAChF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEjE,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,EACjD,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,EACpC,IAAI,CAAC,YAAY,EAAE,kBAAkB,CAAC,EACtC,iBAAiB,EACjB,kBAAkB;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,iBAAiB,CAAC;CAChC;AAED,eAAO,MAAM,QAAQ,kGAqFnB,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/dist/types/components/ComboBox/stories/FilePicker.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ComboBox } from '..';
+declare const meta: Meta<typeof ComboBox>;
+export default meta;
+type Story = StoryObj<typeof ComboBox>;
+export declare const Default: Story;
+//# sourceMappingURL=FilePicker.stories.d.ts.map

package/dist/types/components/ComboBox/stories/FilePicker.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilePicker.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/ComboBox/stories/FilePicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAmCjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAsE/B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEvC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}

package/dist/types/components/ContextMenu/components/ContextMenuSection/ContextMenuSection.d.ts

@@ -3,13 +3,13 @@ import { FlowComponentProps } from '../../../../lib/componentFactory/flowCompone
 import { ContextMenuSelectionMode } from '../../lib';
 import { MenuItemProps } from '../../../MenuItem';
 import * as Aria from "react-aria-components";
-export type ContextMenuSectionProps = PropsWithChildren & FlowComponentProps & Pick<Aria.MenuSectionProps<MenuItemProps>, "defaultSelectedKeys"> & {
+export type ContextMenuSectionProps = PropsWithChildren & FlowComponentProps & Pick<Aria.MenuSectionProps<MenuItemProps>, "defaultSelectedKeys" | "selectedKeys"> & {
     selectionMode?: ContextMenuSelectionMode;
 };
 /** @flr-generate all */
 export declare const ContextMenuSection: React.FunctionComponent<{
     children?: React.ReactNode | undefined;
-} & FlowComponentProps<HTMLDivElement> & Pick<Aria.MenuSectionProps<MenuItemProps>, "defaultSelectedKeys"> & {
+} & FlowComponentProps<HTMLDivElement> & Pick<Aria.MenuSectionProps<MenuItemProps>, "defaultSelectedKeys" | "selectedKeys"> & {
     selectionMode?: ContextMenuSelectionMode;
 } & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=ContextMenuSection.d.ts.map

package/dist/types/components/ContextMenu/components/ContextMenuSection/ContextMenuSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ContextMenu/components/ContextMenuSection/ContextMenuSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAC9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAG/E,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAO7E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,GACrD,kBAAkB,GAClB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,EAAE,qBAAqB,CAAC,GAAG;IAClE,aAAa,CAAC,EAAE,wBAAwB,CAAC;CAC1C,CAAC;AAEJ,wBAAwB;AACxB,eAAO,MAAM,kBAAkB;;;oBAJX,wBAAwB;wCAsC3C,CAAC"}
+{"version":3,"file":"ContextMenuSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ContextMenu/components/ContextMenuSection/ContextMenuSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAC9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAG/E,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAO7E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,GACrD,kBAAkB,GAClB,IAAI,CACF,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,EACpC,qBAAqB,GAAG,cAAc,CACvC,GAAG;IACF,aAAa,CAAC,EAAE,wBAAwB,CAAC;CAC1C,CAAC;AAEJ,wBAAwB;AACxB,eAAO,MAAM,kBAAkB;;;oBAJX,wBAAwB;wCAsC3C,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../src/components/List/List.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAc/D,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,sCAAsC,CAAC;AAM9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAK/C,MAAM,WAAW,SAAS,CAAC,CAAC,CAC1B,SAAQ,iBAAiB,EACvB,kBAAkB,EAClB,IAAI,CACF,SAAS,CAAC,CAAC,CAAC,EACV,QAAQ,GACR,QAAQ,GACR,UAAU,GACV,OAAO,GACP,mBAAmB,GACnB,SAAS,GACT,SAAS,CACZ;IACH,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,IAAI,qGA2If,CAAC;AAEH,eAAe,IAAI,CAAC"}
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../src/components/List/List.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAc/D,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,sCAAsC,CAAC;AAK9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAK/C,MAAM,WAAW,SAAS,CAAC,CAAC,CAC1B,SAAQ,iBAAiB,EACvB,kBAAkB,EAClB,IAAI,CACF,SAAS,CAAC,CAAC,CAAC,EACV,QAAQ,GACR,QAAQ,GACR,UAAU,GACV,OAAO,GACP,mBAAmB,GACnB,SAAS,GACT,SAAS,CACZ;IACH,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,IAAI,qGA6If,CAAC;AAEH,eAAe,IAAI,CAAC"}

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

@@ -1,8 +1,5 @@
 import { FC } from 'react';
 import { PropsWithClassName } from '../../../../lib/types/props';
-interface Props extends PropsWithClassName {
-    hasActionGroup?: boolean;
-}
-export declare const Header: FC<Props>;
+export declare const Header: FC<PropsWithClassName>;
 export default Header;
 //# sourceMappingURL=Header.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../../../src/components/List/components/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAQhC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAM5D,UAAU,KAAM,SAAQ,kBAAkB;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,KAAK,CAqC5B,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../../../src/components/List/components/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAMhC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAW5D,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,kBAAkB,CAkCzC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/types/components/List/components/Header/components/Filters/CombinedFilterMenu.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+export declare const CombinedFilterMenu: FC;
+//# sourceMappingURL=CombinedFilterMenu.d.ts.map

package/dist/types/components/List/components/Header/components/Filters/CombinedFilterMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CombinedFilterMenu.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/List/components/Header/components/Filters/CombinedFilterMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAgBhC,eAAO,MAAM,kBAAkB,EAAE,EA6ChC,CAAC"}

package/dist/types/components/List/components/Header/components/{FilterPicker/FilterPicker.d.ts → Filters/FilterMenu.d.ts}

@@ -3,6 +3,6 @@ import { Filter } from '../../../../model/filter/Filter';
 interface Props {
     filter: Filter<never, never, never>;
 }
-export declare const FilterPicker: FC<Props>;
+export declare const FilterMenu: FC<Props>;
 export {};
-//# sourceMappingURL=FilterPicker.d.ts.map
+//# sourceMappingURL=FilterMenu.d.ts.map

package/dist/types/components/List/components/Header/components/Filters/FilterMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterMenu.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/List/components/Header/components/Filters/FilterMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uCAAuC,CAAC;AAQpE,UAAU,KAAK;IACb,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;CACrC;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,KAAK,CA2BhC,CAAC"}

package/dist/types/components/List/components/Header/components/Filters/FilterMenuItem.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { FilterValue } from '../../../../model/filter/FilterValue';
+interface Props {
+    filterValue: FilterValue;
+}
+export declare const FilterMenuItem: FC<Props>;
+export {};
+//# sourceMappingURL=FilterMenuItem.d.ts.map

package/dist/types/components/List/components/Header/components/Filters/FilterMenuItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterMenuItem.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/List/components/Header/components/Filters/FilterMenuItem.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4CAA4C,CAAC;AAE9E,UAAU,KAAK;IACb,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,KAAK,CAcpC,CAAC"}

package/dist/types/components/List/components/Header/components/Filters/FilterMenuList.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+export declare const FilterMenuList: FC;
+//# sourceMappingURL=FilterMenuList.d.ts.map

package/dist/types/components/List/components/Header/components/Filters/FilterMenuList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterMenuList.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/List/components/Header/components/Filters/FilterMenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAKhC,eAAO,MAAM,cAAc,EAAE,EAM5B,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;AAKpE,UAAU,KAAM,SAAQ,kBAAkB;IACxC,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;CACvB;AAqDD,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,KAAK,CAUjC,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;AAMpE,UAAU,KAAM,SAAQ,kBAAkB;IACxC,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;CACvB;AAqDD,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,KAAK,CASjC,CAAC"}

package/dist/types/components/List/components/Header/components/Settings/SettingsMenu.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+export declare const SettingsMenu: FC;
+//# sourceMappingURL=SettingsMenu.d.ts.map

package/dist/types/components/List/components/Header/components/Settings/SettingsMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsMenu.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/List/components/Header/components/Settings/SettingsMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAkBhC,eAAO,MAAM,YAAY,EAAE,EA0D1B,CAAC"}

package/dist/types/components/List/components/Header/components/Settings/SortingMenu.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+export declare const SortingMenu: FC;
+//# sourceMappingURL=SortingMenu.d.ts.map

package/dist/types/components/List/components/Header/components/Settings/SortingMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortingMenu.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/List/components/Header/components/Settings/SortingMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAYhC,eAAO,MAAM,WAAW,EAAE,EAyCzB,CAAC"}

package/dist/types/components/List/components/Header/components/{SortingPickerItem/SortingPickerItem.d.ts → Settings/SortingMenuItem.d.ts}

@@ -3,6 +3,6 @@ import { Sorting } from '../../../../model/sorting/Sorting';
 interface Props {
     sorting: Sorting<never>;
 }
-export declare const SortingPickerItem: FC<Props>;
+export declare const SortingMenuItem: FC<Props>;
 export {};
-//# sourceMappingURL=SortingPickerItem.d.ts.map
+//# sourceMappingURL=SortingMenuItem.d.ts.map

package/dist/types/components/List/components/Header/components/Settings/SortingMenuItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortingMenuItem.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/List/components/Header/components/Settings/SortingMenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAIvE,UAAU,KAAK;IACb,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACzB;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,KAAK,CAerC,CAAC"}