npm - @mittwald/flow-react-components - Versions diffs - 0.2.0-alpha.192 → 0.2.0-alpha.193 - Mend

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

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.

Files changed (90) hide show

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

@@ -1,6 +1,7 @@
 "use client"
 /* */
-const locales = {"de-DE": {  "list.filters.clear": `Filter entfernen`,
+const locales = {"de-DE": {  "list.filters": `Filter`,
+  "list.filters.clear": `Filter entfernen`,
   "list.filters.reset": `Filter zurücksetzen`,
   "list.filters.store": `Filter speichern`,
   "list.noResult.heading": `Keine Suchergebnisse gefunden`,
@@ -16,7 +17,8 @@ const locales = {"de-DE": {  "list.filters.clear": `Filter entfernen`,
   "list.sorting": `Sortierung`,
   "list.toggleExpandButton.collapse": `Weniger anzeigen`,
   "list.toggleExpandButton.expand": `Mehr anzeigen`,
-},"en-US": {  "list.filters.clear": `Clear filters`,
+},"en-US": {  "list.filters": `Filters`,
+  "list.filters.clear": `Clear filters`,
   "list.filters.reset": `Reset filters`,
   "list.filters.store": `Store filters`,
   "list.noResult.heading": `No search results found`,

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

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

package/dist/js/components/src/components/ContextMenu/components/ContextMenuSection/ContextMenuSection.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextMenuSection.mjs","sources":["../../../../../../../../src/components/ContextMenu/components/ContextMenuSection/ContextMenuSection.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"../../ContextMenu.module.scss\";\nimport type { ContextMenuSelectionMode } from \"@/components/ContextMenu/lib\";\nimport {\n getAriaSelectionMode,\n getCloseOverlayType,\n getMenuItemSelectionVariant,\n} from \"@/components/ContextMenu/lib\";\nimport { Action } from \"@/components/Action\";\nimport type { MenuItemProps } from \"@/components/MenuItem\";\n\nexport type ContextMenuSectionProps = PropsWithChildren &\n FlowComponentProps &\n Pick<Aria.MenuSectionProps<MenuItemProps>, \"defaultSelectedKeys\"> & {\n selectionMode?: ContextMenuSelectionMode;\n };\n\n/** @flr-generate all */\nexport const ContextMenuSection = flowComponent(\n \"ContextMenuSection\",\n (props) => {\n const { children, selectionMode, ref, ...rest } = props;\n\n const selectionVariant = getMenuItemSelectionVariant(selectionMode);\n\n const propsContext: PropsContext = {\n Heading: {\n level: 5,\n wrapWith: <Aria.Header />,\n },\n MenuItem: {\n selectionVariant,\n },\n };\n\n return (\n <Aria.MenuSection\n ref={ref}\n {...rest}\n selectionMode={getAriaSelectionMode(selectionMode)}\n className={styles.section}\n >\n <PropsContextProvider props={propsContext} mergeInParentContext>\n <Action skip>\n <Action closeOverlay={getCloseOverlayType(selectionMode)}>\n {children}\n </Action>\n </Action>\n </PropsContextProvider>\n </Aria.MenuSection>\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;;;;~~AAwBO~~,MAAM,kBAAqB,GAAA,aAAA;AAAA,EAChC,oBAAA;AAAA,EACA,CAAC,KAAU,KAAA;AACT,IAAA,MAAM,EAAE,QAAU,EAAA,aAAA,EAAe,GAAK,EAAA,GAAG,MAAS,GAAA,KAAA;AAElD,IAAM,MAAA,gBAAA,GAAmB,4BAA4B,aAAa,CAAA;AAElE,IAAA,MAAM,YAA6B,GAAA;AAAA,MACjC,OAAS,EAAA;AAAA,QACP,KAAO,EAAA,CAAA;AAAA,QACP,QAAU,kBAAA,GAAA,CAAC,IAAK,CAAA,MAAA,EAAL,EAAY;AAAA,OACzB;AAAA,MACA,QAAU,EAAA;AAAA,QACR;AAAA;AACF,KACF;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,IAAK,CAAA,WAAA;AAAA,MAAL;AAAA,QACC,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QACJ,aAAA,EAAe,qBAAqB,aAAa,CAAA;AAAA,QACjD,WAAW,MAAO,CAAA,OAAA;AAAA,QAElB,8BAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,cAAc,oBAAoB,EAAA,IAAA,EAC7D,8BAAC,MAAO,EAAA,EAAA,IAAA,EAAI,IACV,EAAA,QAAA,kBAAA,GAAA,CAAC,UAAO,YAAc,EAAA,mBAAA,CAAoB,aAAa,CACpD,EAAA,QAAA,EACH,GACF,CACF,EAAA;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}
1	+ {"version":3,"file":"ContextMenuSection.mjs","sources":["../../../../../../../../src/components/ContextMenu/components/ContextMenuSection/ContextMenuSection.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"../../ContextMenu.module.scss\";\nimport type { ContextMenuSelectionMode } from \"@/components/ContextMenu/lib\";\nimport {\n getAriaSelectionMode,\n getCloseOverlayType,\n getMenuItemSelectionVariant,\n} from \"@/components/ContextMenu/lib\";\nimport { Action } from \"@/components/Action\";\nimport type { MenuItemProps } from \"@/components/MenuItem\";\n\nexport type ContextMenuSectionProps = PropsWithChildren &\n FlowComponentProps &\n Pick<\n Aria.MenuSectionProps<MenuItemProps>,\n \"defaultSelectedKeys\" \| \"selectedKeys\"\n > & {\n selectionMode?: ContextMenuSelectionMode;\n };\n\n/** @flr-generate all */\nexport const ContextMenuSection = flowComponent(\n \"ContextMenuSection\",\n (props) => {\n const { children, selectionMode, ref, ...rest } = props;\n\n const selectionVariant = getMenuItemSelectionVariant(selectionMode);\n\n const propsContext: PropsContext = {\n Heading: {\n level: 5,\n wrapWith: <Aria.Header />,\n },\n MenuItem: {\n selectionVariant,\n },\n };\n\n return (\n <Aria.MenuSection\n ref={ref}\n {...rest}\n selectionMode={getAriaSelectionMode(selectionMode)}\n className={styles.section}\n >\n <PropsContextProvider props={propsContext} mergeInParentContext>\n <Action skip>\n <Action closeOverlay={getCloseOverlayType(selectionMode)}>\n {children}\n </Action>\n </Action>\n </PropsContextProvider>\n </Aria.MenuSection>\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;;;;AA2BO,MAAM,kBAAqB,GAAA,aAAA;AAAA,EAChC,oBAAA;AAAA,EACA,CAAC,KAAU,KAAA;AACT,IAAA,MAAM,EAAE,QAAU,EAAA,aAAA,EAAe,GAAK,EAAA,GAAG,MAAS,GAAA,KAAA;AAElD,IAAM,MAAA,gBAAA,GAAmB,4BAA4B,aAAa,CAAA;AAElE,IAAA,MAAM,YAA6B,GAAA;AAAA,MACjC,OAAS,EAAA;AAAA,QACP,KAAO,EAAA,CAAA;AAAA,QACP,QAAU,kBAAA,GAAA,CAAC,IAAK,CAAA,MAAA,EAAL,EAAY;AAAA,OACzB;AAAA,MACA,QAAU,EAAA;AAAA,QACR;AAAA;AACF,KACF;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,IAAK,CAAA,WAAA;AAAA,MAAL;AAAA,QACC,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QACJ,aAAA,EAAe,qBAAqB,aAAa,CAAA;AAAA,QACjD,WAAW,MAAO,CAAA,OAAA;AAAA,QAElB,8BAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,cAAc,oBAAoB,EAAA,IAAA,EAC7D,8BAAC,MAAO,EAAA,EAAA,IAAA,EAAI,IACV,EAAA,QAAA,kBAAA,GAAA,CAAC,UAAO,YAAc,EAAA,mBAAA,CAAoB,aAAa,CACpD,EAAA,QAAA,EACH,GACF,CACF,EAAA;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}

package/dist/js/components/src/components/List/List.mjs CHANGED Viewed

@@ -1,9 +1,9 @@
 "use client"
 /* */
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { ActionGroup } from '../ActionGroup/ActionGroup.mjs';
 import { DataLoader } from './components/DataLoader/DataLoader.mjs';
 import { Header } from './components/Header/Header.mjs';
+import headerStyles from './components/Header/Header.module.css.mjs';
 import { Items } from './components/Items/Items.mjs';
 import { Table } from './components/Table/Table.mjs';
 import { List as List$1 } from './model/List.mjs';
@@ -26,7 +26,6 @@ import 'react';
 import '../../lib/viewComponentContext/viewComponentContext.mjs';
 import { PropsContextProvider } from '../../lib/propsContext/PropsContextProvider.mjs';
 import { deepFindOfType, deepFilterByType } from '../../lib/react/deepFindOfType.mjs';
-import { deepHas } from '../../lib/react/deepHas.mjs';
 import DivView from '../../views/DivView.mjs';
 import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
 import { Footer } from './components/Footer/Footer.mjs';
@@ -113,13 +112,16 @@ const List = flowComponent("List", (props) => {
   });
   const propsContext = {
     ActionGroup: {
-      tunnelId: "actions"
+      tunnelId: "actions",
+      className: headerStyles.actions,
+      Button: {
+        className: headerStyles.action
+      }
     },
     ListSummary: {
       tunnelId: "listSummary"
     }
   };
-  const hasActionGroup = deepHas(children, ActionGroup);
   return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(TunnelProvider, { children: /* @__PURE__ */ jsxs(
     listContext.Provider,
     {
@@ -130,7 +132,7 @@ const List = flowComponent("List", (props) => {
         /* @__PURE__ */ jsx(DataLoader, {}),
         /* @__PURE__ */ jsxs(DivView, { className: styles.list, ref, children: [
           children,
-          /* @__PURE__ */ jsx(Header, { hasActionGroup }),
+          /* @__PURE__ */ jsx(Header, {}),
           /* @__PURE__ */ jsxs(DivView, { className: styles.listWrapper, children: [
             listModel.items.entries.length > 0 && /* @__PURE__ */ jsx(TunnelExit, { id: "listSummary" }),
             (listModel.viewMode === "list" || listModel.viewMode === "tiles") && /* @__PURE__ */ jsx(Items, {}),

package/dist/js/components/src/components/List/List.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"List.mjs","sources":["../../../../../../src/components/List/List.tsx"],"sourcesContent":["import { ActionGroup } from \"@/components/ActionGroup\";\nimport { DataLoader } from \"@/components/List/components/DataLoader\";\nimport { Header } from \"@/components/List/components/Header/Header\";\nimport { Items } from \"@/components/List/components/Items/Items\";\nimport { Table } from \"@/components/List/components/Table\";\nimport ListModel from \"@/components/List/model/List\";\nimport type { IncrementalLoaderShape } from \"@/components/List/model/loading/types\";\nimport type { ListShape } from \"@/components/List/model/types\";\nimport { ListFilter } from \"@/components/List/setupComponents/ListFilter\";\nimport { ListItem } from \"@/components/List/setupComponents/ListItem\";\nimport { ListLoaderAsync } from \"@/components/List/setupComponents/ListLoaderAsync\";\nimport { ListLoaderAsyncResource } from \"@/components/List/setupComponents/ListLoaderAsyncResource\";\nimport { ListSearch } from \"@/components/List/setupComponents/ListSearch\";\nimport { ListSorting } from \"@/components/List/setupComponents/ListSorting\";\nimport { ListStaticData } from \"@/components/List/setupComponents/ListStaticData\";\nimport { Table as TableSetupComponent } from \"@/components/List/setupComponents/Table\";\nimport { TableBody } from \"@/components/List/setupComponents/TableBody\";\nimport { TableCell } from \"@/components/List/setupComponents/TableCell\";\nimport { TableColumn } from \"@/components/List/setupComponents/TableColumn\";\nimport { TableHeader } from \"@/components/List/setupComponents/TableHeader\";\nimport { TableRow } from \"@/components/List/setupComponents/TableRow\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { deepFilterByType, deepFindOfType } from \"@/lib/react/deepFindOfType\";\nimport { deepHas } from \"@/lib/react/deepHas\";\nimport DivView from \"@/views/DivView\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport type { PropsWithChildren } from \"react\";\nimport Footer from \"./components/Footer\";\nimport styles from \"./List.module.css\";\nimport { listContext } from \"./listContext\";\n\nexport interface ListProps<T>\n extends PropsWithChildren,\n FlowComponentProps,\n Omit<\n ListShape<T>,\n \| \"search\"\n \| \"loader\"\n \| \"itemView\"\n \| \"table\"\n \| \"batchesController\"\n \| \"filters\"\n \| \"sorting\"\n > {\n /** The number of items to be displayed on one page. */\n batchSize?: number;\n}\n\nexport const List = flowComponent(\"List\", (props) => {\n const { children, batchSize, onChange, ref, ...restProps } = props;\n\n const listLoaderAsync = deepFindOfType(\n children,\n ListLoaderAsync<never>,\n )?.props;\n const listLoaderAsyncResource = deepFindOfType(\n children,\n ListLoaderAsyncResource<never>,\n )?.props;\n const listStaticData = deepFindOfType(children, ListStaticData<never>)?.props;\n\n const loaderShape: IncrementalLoaderShape<never> = {\n source: listLoaderAsync\n ? {\n ...listLoaderAsync,\n asyncLoader: listLoaderAsync.children,\n }\n : listLoaderAsyncResource\n ? {\n ...listLoaderAsyncResource,\n asyncResourceFactory: listLoaderAsyncResource.children,\n }\n : listStaticData\n ? {\n staticData: listStaticData.data,\n }\n : undefined,\n };\n\n const searchProps = deepFindOfType(children, ListSearch)?.props;\n const itemViewProps = deepFindOfType(children, ListItem<never>)?.props;\n\n const tableProps = deepFindOfType(children, TableSetupComponent)?.props;\n const tableColumnProps = deepFilterByType(children, TableColumn<never>).map(\n (c) => ({\n ...c.props,\n name: c.props.children,\n }),\n );\n const tableCellProps = deepFilterByType(children, TableCell<never>).map(\n (c) => ({\n ...c.props,\n renderFn: c.props.children,\n }),\n );\n\n const tableRowProps = deepFindOfType(children, TableRow)?.props;\n const tableHeaderProps = deepFindOfType(children, TableHeader)?.props;\n const tableBodyProps = deepFindOfType(children, TableBody)?.props;\n\n const listModel = ListModel.useNew<never>({\n onChange,\n loader: loaderShape,\n filters: deepFilterByType(children, ListFilter<never, never, never>).map(\n (f) => ({\n ...f.props,\n renderItem: f.props.children,\n }),\n ),\n search: searchProps\n ? {\n render: searchProps.children,\n textFieldProps: searchProps,\n defaultValue: searchProps.defaultValue,\n }\n : undefined,\n sorting: deepFilterByType(children, ListSorting<never>).map((s) => s.props),\n\n itemView: itemViewProps\n ? {\n ...itemViewProps,\n renderFn: itemViewProps.children,\n }\n : undefined,\n\n table:\n tableColumnProps.length > 0\n ? {\n header: {\n ...tableHeaderProps,\n columns: tableColumnProps,\n },\n body: {\n ...tableBodyProps,\n row: {\n ...tableRowProps,\n cells: tableCellProps,\n },\n },\n ...tableProps,\n }\n : undefined,\n\n batchesController: {\n batchSize,\n },\n ...restProps,\n });\n\n const propsContext: PropsContext = {\n ActionGroup: {\n tunnelId: \"actions\",\n },\n ListSummary: {\n tunnelId: \"listSummary\",\n },\n };\n\n const hasActionGroup = deepHas(children, ActionGroup);\n\n return (\n <PropsContextProvider props={propsContext}>\n <TunnelProvider>\n <listContext.Provider\n value={{\n list: listModel,\n }}\n >\n <DataLoader />\n <DivView className={styles.list} ref={ref}>\n {children}\n <Header hasActionGroup={hasActionGroup} />\n\n <DivView className={styles.listWrapper}>\n {listModel.items.entries.length > 0 && (\n <TunnelExit id=\"listSummary\" />\n )}\n {(listModel.viewMode === \"list\" \|\|\n listModel.viewMode === \"tiles\") && <Items />}\n {listModel.viewMode === \"table\" && <Table />}\n </DivView>\n <Footer />\n </DivView>\n </listContext.Provider>\n </TunnelProvider>\n </PropsContextProvider>\n );\n});\n\nexport default List;\n"],"names":["TableSetupComponent","ListModel"],"mappings":"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"}
1	+ {"version":3,"file":"List.mjs","sources":["../../../../../../src/components/List/List.tsx"],"sourcesContent":["import { DataLoader } from \"@/components/List/components/DataLoader\";\nimport { Header } from \"@/components/List/components/Header/Header\";\nimport headerStyles from \"@/components/List/components/Header/Header.module.css\";\nimport { Items } from \"@/components/List/components/Items/Items\";\nimport { Table } from \"@/components/List/components/Table\";\nimport ListModel from \"@/components/List/model/List\";\nimport type { IncrementalLoaderShape } from \"@/components/List/model/loading/types\";\nimport type { ListShape } from \"@/components/List/model/types\";\nimport { ListFilter } from \"@/components/List/setupComponents/ListFilter\";\nimport { ListItem } from \"@/components/List/setupComponents/ListItem\";\nimport { ListLoaderAsync } from \"@/components/List/setupComponents/ListLoaderAsync\";\nimport { ListLoaderAsyncResource } from \"@/components/List/setupComponents/ListLoaderAsyncResource\";\nimport { ListSearch } from \"@/components/List/setupComponents/ListSearch\";\nimport { ListSorting } from \"@/components/List/setupComponents/ListSorting\";\nimport { ListStaticData } from \"@/components/List/setupComponents/ListStaticData\";\nimport { Table as TableSetupComponent } from \"@/components/List/setupComponents/Table\";\nimport { TableBody } from \"@/components/List/setupComponents/TableBody\";\nimport { TableCell } from \"@/components/List/setupComponents/TableCell\";\nimport { TableColumn } from \"@/components/List/setupComponents/TableColumn\";\nimport { TableHeader } from \"@/components/List/setupComponents/TableHeader\";\nimport { TableRow } from \"@/components/List/setupComponents/TableRow\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { deepFilterByType, deepFindOfType } from \"@/lib/react/deepFindOfType\";\nimport DivView from \"@/views/DivView\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport type { PropsWithChildren } from \"react\";\nimport Footer from \"./components/Footer\";\nimport styles from \"./List.module.css\";\nimport { listContext } from \"./listContext\";\n\nexport interface ListProps<T>\n extends PropsWithChildren,\n FlowComponentProps,\n Omit<\n ListShape<T>,\n \| \"search\"\n \| \"loader\"\n \| \"itemView\"\n \| \"table\"\n \| \"batchesController\"\n \| \"filters\"\n \| \"sorting\"\n > {\n /** The number of items to be displayed on one page. */\n batchSize?: number;\n}\n\nexport const List = flowComponent(\"List\", (props) => {\n const { children, batchSize, onChange, ref, ...restProps } = props;\n\n const listLoaderAsync = deepFindOfType(\n children,\n ListLoaderAsync<never>,\n )?.props;\n const listLoaderAsyncResource = deepFindOfType(\n children,\n ListLoaderAsyncResource<never>,\n )?.props;\n const listStaticData = deepFindOfType(children, ListStaticData<never>)?.props;\n\n const loaderShape: IncrementalLoaderShape<never> = {\n source: listLoaderAsync\n ? {\n ...listLoaderAsync,\n asyncLoader: listLoaderAsync.children,\n }\n : listLoaderAsyncResource\n ? {\n ...listLoaderAsyncResource,\n asyncResourceFactory: listLoaderAsyncResource.children,\n }\n : listStaticData\n ? {\n staticData: listStaticData.data,\n }\n : undefined,\n };\n\n const searchProps = deepFindOfType(children, ListSearch)?.props;\n const itemViewProps = deepFindOfType(children, ListItem<never>)?.props;\n\n const tableProps = deepFindOfType(children, TableSetupComponent)?.props;\n const tableColumnProps = deepFilterByType(children, TableColumn<never>).map(\n (c) => ({\n ...c.props,\n name: c.props.children,\n }),\n );\n const tableCellProps = deepFilterByType(children, TableCell<never>).map(\n (c) => ({\n ...c.props,\n renderFn: c.props.children,\n }),\n );\n\n const tableRowProps = deepFindOfType(children, TableRow)?.props;\n const tableHeaderProps = deepFindOfType(children, TableHeader)?.props;\n const tableBodyProps = deepFindOfType(children, TableBody)?.props;\n\n const listModel = ListModel.useNew<never>({\n onChange,\n loader: loaderShape,\n filters: deepFilterByType(children, ListFilter<never, never, never>).map(\n (f) => ({\n ...f.props,\n renderItem: f.props.children,\n }),\n ),\n search: searchProps\n ? {\n render: searchProps.children,\n textFieldProps: searchProps,\n defaultValue: searchProps.defaultValue,\n }\n : undefined,\n sorting: deepFilterByType(children, ListSorting<never>).map((s) => s.props),\n\n itemView: itemViewProps\n ? {\n ...itemViewProps,\n renderFn: itemViewProps.children,\n }\n : undefined,\n\n table:\n tableColumnProps.length > 0\n ? {\n header: {\n ...tableHeaderProps,\n columns: tableColumnProps,\n },\n body: {\n ...tableBodyProps,\n row: {\n ...tableRowProps,\n cells: tableCellProps,\n },\n },\n ...tableProps,\n }\n : undefined,\n\n batchesController: {\n batchSize,\n },\n ...restProps,\n });\n\n const propsContext: PropsContext = {\n ActionGroup: {\n tunnelId: \"actions\",\n className: headerStyles.actions,\n Button: {\n className: headerStyles.action,\n },\n },\n ListSummary: {\n tunnelId: \"listSummary\",\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <TunnelProvider>\n <listContext.Provider\n value={{\n list: listModel,\n }}\n >\n <DataLoader />\n <DivView className={styles.list} ref={ref}>\n {children}\n <Header />\n\n <DivView className={styles.listWrapper}>\n {listModel.items.entries.length > 0 && (\n <TunnelExit id=\"listSummary\" />\n )}\n {(listModel.viewMode === \"list\" \|\|\n listModel.viewMode === \"tiles\") && <Items />}\n {listModel.viewMode === \"table\" && <Table />}\n </DivView>\n <Footer />\n </DivView>\n </listContext.Provider>\n </TunnelProvider>\n </PropsContextProvider>\n );\n});\n\nexport default List;\n"],"names":["TableSetupComponent","ListModel"],"mappings":"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"}

package/dist/js/components/src/components/List/components/Header/Header.mjs CHANGED Viewed

@@ -1,35 +1,36 @@
 "use client"
 /* */
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react';
-import { SortingPicker } from './components/SortingPicker/SortingPicker.mjs';
-import { FilterPicker } from './components/FilterPicker/FilterPicker.mjs';
-import styles from './Header.module.css.mjs';
+import headerStyles from './Header.module.css.mjs';
 import clsx from 'clsx';
 import { ActiveFilters } from './components/ActiveFilters/ActiveFilters.mjs';
 import { useList } from '../../hooks/useList.mjs';
 import { SearchField } from './components/SearchField/SearchField.mjs';
-import { ViewModeMenu } from './components/ViewModeMenu/ViewModeMenu.mjs';
+import { ViewModeMenu } from './components/Settings/ViewModeMenu.mjs';
 import { TunnelExit } from '@mittwald/react-tunnel';
 import DivView from '../../../../views/DivView.mjs';
+import { SettingsMenu } from './components/Settings/SettingsMenu.mjs';
+import { SortingMenu } from './components/Settings/SortingMenu.mjs';
+import { FilterMenuList } from './components/Filters/FilterMenuList.mjs';
+import { CombinedFilterMenu } from './components/Filters/CombinedFilterMenu.mjs';
+import { useAvailableViewModes } from './lib.mjs';
 const Header = (props) => {
-  const { className, hasActionGroup } = props;
+  const { className } = props;
   const list = useList();
-  if (list.filters.length === 0 && list.visibleSorting.length === 0 && !list.search && !list.table && !(list.itemView?.showTiles && list.itemView?.showList) && !hasActionGroup) {
-    return null;
-  }
-  const filterPickerList = list.filters.map((filter) => /* @__PURE__ */ jsx(FilterPicker, { filter }, filter.property));
-  return /* @__PURE__ */ jsxs(DivView, { className: clsx(className, styles.header), children: [
-    /* @__PURE__ */ jsxs(DivView, { className: styles.pickerListAndSearch, children: [
-      /* @__PURE__ */ jsxs(DivView, { className: styles.pickerList, children: [
+  const availableViewModes = useAvailableViewModes();
+  const hasOptions = list.filters.length > 0 || list.visibleSorting.length > 0 || list.search || availableViewModes.length > 1;
+  return /* @__PURE__ */ jsxs(DivView, { className: clsx(className, headerStyles.header), children: [
+    /* @__PURE__ */ jsxs(DivView, { className: headerStyles.headerContent, children: [
+      /* @__PURE__ */ jsx(TunnelExit, { id: "actions" }),
+      hasOptions && /* @__PURE__ */ jsxs(DivView, { className: headerStyles.options, children: [
         /* @__PURE__ */ jsx(ViewModeMenu, {}),
-        /* @__PURE__ */ jsx(SortingPicker, {}),
-        filterPickerList
-      ] }),
-      /* @__PURE__ */ jsxs(DivView, { className: styles.searchAndActions, children: [
-        list.search && /* @__PURE__ */ jsx(SearchField, { className: styles.searchField, search: list.search }),
-        /* @__PURE__ */ jsx(TunnelExit, { id: "actions" })
+        /* @__PURE__ */ jsx(SortingMenu, {}),
+        /* @__PURE__ */ jsx(FilterMenuList, {}),
+        /* @__PURE__ */ jsx(SettingsMenu, {}),
+        /* @__PURE__ */ jsx(CombinedFilterMenu, {}),
+        list.search && /* @__PURE__ */ jsx(SearchField, { search: list.search })
       ] })
     ] }),
     /* @__PURE__ */ jsx(ActiveFilters, {})

package/dist/js/components/src/components/List/components/Header/Header.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Header.mjs","sources":["../../../../../../../../src/components/List/components/Header/Header.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport ~~{ SortingPicker } from \"@/components/List/components/Header/components/SortingPicker\";\nimport FilterPicker from \"@/components/List/components/Header/components/FilterPicker\";\nimport~~ styles from \"./Header.module.css\";\nimport clsx from \"clsx\";\nimport { ActiveFilters } from \"@/components/List/components/Header/components/ActiveFilters\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { SearchField } from \"@/components/List/components/Header/components/SearchField/SearchField\";\nimport { ViewModeMenu } from \"@/components/List/components/Header/components/~~ViewModeMenu~~/ViewModeMenu\";\nimport { TunnelExit } from \"@mittwald/react-tunnel\";\nimport DivView from \"@/views/DivView\";\n\~~ninterface~~ ~~Props~~ ~~extends~~ ~~PropsWithClassName~~ {\~~n hasActionGroup?:~~ ~~boolean~~;\n}\n\nexport const Header: FC<~~Props~~> = (props) => {\n const { className, ~~hasActionGroup~~ } = props;\n const list = useList();\n\n if (\n list.filters.length ~~===~~ 0 ~~&&\~~n list.visibleSorting.length ~~===~~ 0 ~~&&\~~n !list.search ~~&&\~~n ~~!list~~.~~table~~ ~~&&\n !(list.itemView?.showTiles~~ ~~&& list.itemView?.showList) &&\n !hasActionGroup\n ) {\n return null~~;\n }\n\n ~~const filterPickerList = list.filters.map((filter) => (\n <FilterPicker key={filter.property} filter={filter} />\n ));\n\n~~ return (\n <DivView className={clsx(className, styles.header)}>\n <DivView className={styles.~~pickerListAndSearch~~}>\n <DivView className={styles.~~pickerList~~}>\n <ViewModeMenu />\n <~~SortingPicker~~ />\n {~~filterPickerList~~}\n ~~</DivView>\~~n <~~DivView~~ ~~className={styles.searchAndActions}>\~~n {list.search && ~~(\n~~ <SearchField ~~className={styles.searchField}~~ search={list.search} ~~/>\n )~~}\n ~~<TunnelExit id=\"actions\" />\n~~ </DivView>\n </DivView>\n <ActiveFilters />\n </DivView>\n );\n};\n\nexport default Header;\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;AAkBa~~,MAAA,MAAA,~~GAAoB~~,CAAC,KAAU,KAAA;~~AAC1C~~,EAAM,MAAA,EAAE,~~SAAW~~,~~EAAA,cAAA,EAAmB,~~GAAA,KAAA;~~AACtC~~,EAAA,MAAM,OAAO,OAAQ,EAAA;AAErB,~~EACE~~,~~IAAA~~,~~IAAA~~,~~CAAK~~,~~QAAQ~~,~~MAAW~~,~~KAAA~~,~~CAAA~~,~~IACxB~~,~~KAAK,cAAe,CAAA,MAAA,KAAW,CAC/B,~~IAAA,~~CAAC~~,~~IAAK~~,CAAA,MAAA,~~IACN~~,~~CAAC~~,~~IAAK~~,~~CAAA~~,~~KAAA~~,~~IACN~~,~~EAAE,IAAK,~~CAAA,~~QAAA~~,~~EAAU~~,~~aAAa~~,~~IAAK~~,~~CAAA,QAAA,EAAU,QAC7C,CAAA,~~IAAA,~~CAAC~~,~~cACD~~,~~EAAA;AACA,IAAO,OAAA,~~IAAA~~;AAAA;AAGT~~,~~EAAM~~,~~MAAA~~,~~gBAAA~~,~~GAAmB,IAAK,CAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,MACzC,qBAAA,~~GAAA,~~CAAC,YAAmC,EAAA,EAAA,MAAA,EAAA,EAAjB,MAAO,~~CAAA~~,QAA0B,CACrD,CAAA~~;~~AAED~~,EAAA,4BACG,OAAQ,EAAA,EAAA,SAAA,EAAW,KAAK,SAAW,~~EAAA~~,~~MAAA~~,CAAO,MAAM,CAC/C,EAAA,QAAA,EAAA;AAAA,oBAAC,IAAA,CAAA,OAAA,EAAA,EAAQ,SAAW,~~EAAA~~,~~MAAA~~,CAAO,~~mBACzB~~,EAAA,QAAA,EAAA;AAAA,sBAAC,~~IAAA~~,CAAA,~~OAAA~~,EAAA,~~EAAQ~~,~~SAAW~~,EAAA,~~MAAA~~,~~CAAO~~,~~UACzB~~,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,YAAa,EAAA,EAAA,CAAA;AAAA,4BACb,~~aAAc~~,EAAA,EAAA,CAAA;AAAA,~~QACd;AAAA~~,~~OACH~~,EAAA,CAAA;AAAA,~~sBACC~~,~~IAAA~~,~~CAAA,OAAA,~~EAAA,~~EAAQ,SAAW,~~EAAA,~~MAAA~~,~~CAAO~~,~~gBACxB~~,EAAA,~~QAAA~~,~~EAAA~~;AAAA,~~QAAK~~,~~IAAA~~,~~CAAA~~,~~MAAA~~,~~wBACH~~,WAAY,EAAA,EAAA,~~SAAA,EAAW,OAAO,WAAa,EAAA,~~MAAA,EAAQ,KAAK,MAAQ,EAAA~~,CAAA~~;AAAA,~~wBAEnE~~,~~GAAA,CAAC,UAAW,~~EAAA~~,EAAA,EAAA,EAAG,SAAU,EAAA~~;AAAA,~~OAC3B~~,EAAA~~;AAAA~~,~~KACF,EAAA,~~CAAA;AAAA,wBACC,aAAc,EAAA,EAAA;AAAA,GACjB,EAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"Header.mjs","sources":["../../../../../../../../src/components/List/components/Header/Header.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport styles from \"./Header.module.css\";\nimport clsx from \"clsx\";\nimport { ActiveFilters } from \"@/components/List/components/Header/components/ActiveFilters\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { SearchField } from \"@/components/List/components/Header/components/SearchField/SearchField\";\nimport { ViewModeMenu } from \"@/components/List/components/Header/components/Settings/ViewModeMenu\";\nimport { TunnelExit } from \"@mittwald/react-tunnel\";\nimport DivView from \"@/views/DivView\";\nimport { SettingsMenu } from \"@/components/List/components/Header/components/Settings/SettingsMenu\";\nimport { SortingMenu } from \"@/components/List/components/Header/components/Settings/SortingMenu\";\nimport { FilterMenuList } from \"@/components/List/components/Header/components/Filters/FilterMenuList\";\nimport { CombinedFilterMenu } from \"@/components/List/components/Header/components/Filters/CombinedFilterMenu\";\nimport { useAvailableViewModes } from \"@/components/List/components/Header/lib\";\n\nexport const Header: FC<PropsWithClassName> = (props) => {\n const { className } = props;\n const list = useList();\n\n const availableViewModes = useAvailableViewModes();\n\n const hasOptions =\n list.filters.length > 0 \|\|\n list.visibleSorting.length > 0 \|\|\n list.search \|\|\n availableViewModes.length > 1;\n\n return (\n <DivView className={clsx(className, styles.header)}>\n <DivView className={styles.headerContent}>\n <TunnelExit id=\"actions\" />\n {hasOptions && (\n <DivView className={styles.options}>\n {/* Desktop /}\n <ViewModeMenu />\n <SortingMenu />\n <FilterMenuList />\n\n {/ Mobile */}\n <SettingsMenu />\n <CombinedFilterMenu />\n\n {list.search && <SearchField search={list.search} />}\n </DivView>\n )}\n </DivView>\n <ActiveFilters />\n </DivView>\n );\n};\n\nexport default Header;\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;AAiBa,MAAA,MAAA,GAAiC,CAAC,KAAU,KAAA;AACvD,EAAM,MAAA,EAAE,WAAc,GAAA,KAAA;AACtB,EAAA,MAAM,OAAO,OAAQ,EAAA;AAErB,EAAA,MAAM,qBAAqB,qBAAsB,EAAA;AAEjD,EAAA,MAAM,UACJ,GAAA,IAAA,CAAK,OAAQ,CAAA,MAAA,GAAS,CACtB,IAAA,IAAA,CAAK,cAAe,CAAA,MAAA,GAAS,CAC7B,IAAA,IAAA,CAAK,MACL,IAAA,kBAAA,CAAmB,MAAS,GAAA,CAAA;AAE9B,EAAA,4BACG,OAAQ,EAAA,EAAA,SAAA,EAAW,KAAK,SAAW,EAAAA,YAAA,CAAO,MAAM,CAC/C,EAAA,QAAA,EAAA;AAAA,oBAAC,IAAA,CAAA,OAAA,EAAA,EAAQ,SAAW,EAAAA,YAAA,CAAO,aACzB,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,UAAA,EAAA,EAAW,IAAG,SAAU,EAAA,CAAA;AAAA,MACxB,UACC,oBAAA,IAAA,CAAC,OAAQ,EAAA,EAAA,SAAA,EAAWA,aAAO,OAEzB,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,YAAa,EAAA,EAAA,CAAA;AAAA,4BACb,WAAY,EAAA,EAAA,CAAA;AAAA,4BACZ,cAAe,EAAA,EAAA,CAAA;AAAA,4BAGf,YAAa,EAAA,EAAA,CAAA;AAAA,4BACb,kBAAmB,EAAA,EAAA,CAAA;AAAA,QAEnB,KAAK,MAAU,oBAAA,GAAA,CAAC,WAAY,EAAA,EAAA,MAAA,EAAQ,KAAK,MAAQ,EAAA;AAAA,OACpD,EAAA;AAAA,KAEJ,EAAA,CAAA;AAAA,wBACC,aAAc,EAAA,EAAA;AAAA,GACjB,EAAA,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/List/components/Header/Header.module.css.mjs CHANGED Viewed

@@ -1,17 +1,21 @@
 "use client"
 /* */
 const header = "flow--list--header";
-const pickerListAndSearch = "flow--list--header--picker-list-and-search";
-const pickerList = "flow--list--header--picker-list";
-const searchAndActions = "flow--list--header--search-and-actions";
-const searchField = "flow--list--header--search-field";
-const styles = {
+const headerContent = "flow--list--header--header-content";
+const actions = "flow--list--header--actions";
+const options = "flow--list--header--options";
+const mobile = "flow--list--header--mobile";
+const desktop = "flow--list--header--desktop";
+const action = "flow--list--header--action";
+const headerStyles = {
 	header: header,
-	pickerListAndSearch: pickerListAndSearch,
-	pickerList: pickerList,
-	searchAndActions: searchAndActions,
-	searchField: searchField
+	headerContent: headerContent,
+	actions: actions,
+	options: options,
+	mobile: mobile,
+	desktop: desktop,
+	action: action
 };
-export { styles as default, header, pickerList, pickerListAndSearch, searchAndActions, searchField };
+export { action, actions, headerStyles as default, desktop, header, headerContent, mobile, options };
 //# sourceMappingURL=Header.module.css.mjs.map

package/dist/js/components/src/components/List/components/Header/Header.module.css.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Header.module.css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"Header.module.css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/dist/js/components/src/components/List/components/Header/components/Filters/CombinedFilterMenu.mjs ADDED Viewed

@@ -0,0 +1,76 @@
+"use client"
+/* */
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import 'react';
+import '@tabler/icons-react';
+import '../../../../../Icon/Icon.mjs';
+import '../../../../../../lib/viewComponentContext/viewComponentContext.mjs';
+import { IconFilter } from '../../../../../Icon/components/icons/IconFilter.mjs';
+import ButtonView from '../../../../../../views/ButtonView.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 'invariant';
+import 'luxon';
+import 'clsx';
+import '../../../../../../lib/propsContext/propsContext.mjs';
+import '@mittwald/react-tunnel';
+import '../../../../../../lib/slotContext/slotContext.mjs';
+import '@react-aria/utils';
+import 'remeda';
+import 'dot-prop';
+import '../../../../../Heading/Heading.mjs';
+import '../../../../../Text/Text.mjs';
+import locales from '../../../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
+import { useLocalizedStringFormatter } from 'react-aria';
+import '../../../../../ColumnLayout/ColumnLayout.mjs';
+import '../../../ListSummary/ListSummary.mjs';
+import { useList } from '../../../../hooks/useList.mjs';
+import '../../../../List.mjs';
+import HeadingView from '../../../../../../views/HeadingView.mjs';
+import { Separator } from '../../../../../Separator/Separator.mjs';
+import { FilterMenuItem } from './FilterMenuItem.mjs';
+import headerStyles from '../../Header.module.css.mjs';
+const CombinedFilterMenu = () => {
+  const list = useList();
+  const filters = list.filters;
+  const stringFormatter = useLocalizedStringFormatter(locales);
+  if (filters.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(ContextMenuTrigger, { children: [
+    /* @__PURE__ */ jsx(
+      ButtonView,
+      {
+        className: headerStyles.mobile,
+        variant: "outline",
+        color: "secondary",
+        "aria-label": stringFormatter.format("list.filters"),
+        children: /* @__PURE__ */ jsx(IconFilter, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(ContextMenu, { children: filters.map((f, i) => {
+      const activeFilterKeys = f.values.filter((v) => v.isActive).map((v) => v.id);
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          ContextMenuSection,
+          {
+            selectionMode: f.mode === "one" ? "single" : "multiple",
+            selectedKeys: activeFilterKeys,
+            children: [
+              /* @__PURE__ */ jsx(HeadingView, { children: f.name ?? f.property }),
+              f.values.map((v) => /* @__PURE__ */ jsx(FilterMenuItem, { filterValue: v }))
+            ]
+          }
+        ),
+        i + 1 < filters.length && /* @__PURE__ */ jsx(Separator, {})
+      ] });
+    }) })
+  ] });
+};
+export { CombinedFilterMenu };
+//# sourceMappingURL=CombinedFilterMenu.mjs.map

package/dist/js/components/src/components/List/components/Header/components/Filters/CombinedFilterMenu.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CombinedFilterMenu.mjs","sources":["../../../../../../../../../../src/components/List/components/Header/components/Filters/CombinedFilterMenu.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport { IconFilter } from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport ContextMenu, {\n ContextMenuSection,\n ContextMenuTrigger,\n} from \"@/components/ContextMenu\";\nimport { useList } from \"@/components/List\";\nimport HeadingView from \"@/views/HeadingView\";\nimport { Separator } from \"@/components/Separator\";\nimport { FilterMenuItem } from \"@/components/List/components/Header/components/Filters/FilterMenuItem\";\nimport styles from \"@/components/List/components/Header/Header.module.css\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../../../locales/*.locale.json\";\n\nexport const CombinedFilterMenu: FC = () => {\n const list = useList();\n\n const filters = list.filters;\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n if (filters.length === 0) {\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.filters\")}\n >\n <IconFilter />\n </ButtonView>\n <ContextMenu>\n {filters.map((f, i) => {\n const activeFilterKeys = f.values\n .filter((v) => v.isActive)\n .map((v) => v.id);\n\n return (\n <>\n <ContextMenuSection\n selectionMode={f.mode === \"one\" ? \"single\" : \"multiple\"}\n selectedKeys={activeFilterKeys}\n >\n <HeadingView>{f.name ?? f.property}</HeadingView>\n {f.values.map((v) => (\n <FilterMenuItem filterValue={v} />\n ))}\n </ContextMenuSection>\n {i + 1 < filters.length && <Separator />}\n </>\n );\n })}\n </ContextMenu>\n </ContextMenuTrigger>\n );\n};\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAM,qBAAyB,MAAM;AAC1C,EAAA,MAAM,OAAO,OAAQ,EAAA;AAErB,EAAA,MAAM,UAAU,IAAK,CAAA,OAAA;AAErB,EAAM,MAAA,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAI,IAAA,OAAA,CAAQ,WAAW,CAAG,EAAA;AACxB,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,cAAc,CAAA;AAAA,QAEjD,8BAAC,UAAW,EAAA,EAAA;AAAA;AAAA,KACd;AAAA,wBACC,WACE,EAAA,EAAA,QAAA,EAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,GAAG,CAAM,KAAA;AACrB,MAAA,MAAM,gBAAmB,GAAA,CAAA,CAAE,MACxB,CAAA,MAAA,CAAO,CAAC,CAAA,KAAM,CAAE,CAAA,QAAQ,CACxB,CAAA,GAAA,CAAI,CAAC,CAAA,KAAM,EAAE,EAAE,CAAA;AAElB,MAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,kBAAA;AAAA,UAAA;AAAA,YACC,aAAe,EAAA,CAAA,CAAE,IAAS,KAAA,KAAA,GAAQ,QAAW,GAAA,UAAA;AAAA,YAC7C,YAAc,EAAA,gBAAA;AAAA,YAEd,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,WAAa,EAAA,EAAA,QAAA,EAAA,CAAA,CAAE,IAAQ,IAAA,CAAA,CAAE,QAAS,EAAA,CAAA;AAAA,cAClC,CAAA,CAAE,OAAO,GAAI,CAAA,CAAC,sBACZ,GAAA,CAAA,cAAA,EAAA,EAAe,WAAa,EAAA,CAAA,EAAG,CACjC;AAAA;AAAA;AAAA,SACH;AAAA,QACC,CAAI,GAAA,CAAA,GAAI,OAAQ,CAAA,MAAA,wBAAW,SAAU,EAAA,EAAA;AAAA,OACxC,EAAA,CAAA;AAAA,KAEH,CACH,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/List/components/Header/components/{FilterPicker/FilterPicker.mjs → Filters/FilterMenu.mjs} RENAMED Viewed

@@ -6,7 +6,6 @@ import '@tabler/icons-react';
 import '../../../../../Icon/Icon.mjs';
 import '../../../../../../lib/viewComponentContext/viewComponentContext.mjs';
 import { IconFilter } from '../../../../../Icon/components/icons/IconFilter.mjs';
-import MenuItemView from '../../../../../../views/MenuItemView.mjs';
 import TextView from '../../../../../../views/TextView.mjs';
 import ButtonView from '../../../../../../views/ButtonView.mjs';
 import { ContextMenu } from '../../../../../ContextMenu/ContextMenu.mjs';
@@ -14,37 +13,37 @@ import '../../../../../MenuItem/MenuItem.mjs';
 import { ContextMenuTrigger } from '../../../../../ContextMenu/components/ContextMenuTrigger/ContextMenuTrigger.mjs';
 import 'react-aria-components';
 import '../../../../../ContextMenu/components/ContextMenuSection/ContextMenuSection.mjs';
+import { FilterMenuItem } from './FilterMenuItem.mjs';
+import headerStyles from '../../Header.module.css.mjs';
-const FilterPicker = (props) => {
+const FilterMenu = (props) => {
   const { filter } = props;
   const { values, mode, name, property } = filter;
-  const items = values.map((v) => /* @__PURE__ */ jsx(
-    MenuItemView,
-    {
-      id: v.id,
-      onAction: () => {
-        v.toggle();
-      },
-      children: v.render()
-    },
-    v.id
-  ));
+  const filterItems = values.map((v) => /* @__PURE__ */ jsx(FilterMenuItem, { filterValue: v }));
   const activeFilterKeys = values.filter((v) => v.isActive).map((v) => v.id);
   return /* @__PURE__ */ jsxs(ContextMenuTrigger, { children: [
-    /* @__PURE__ */ jsxs(ButtonView, { variant: "outline", color: "secondary", children: [
-      /* @__PURE__ */ jsx(TextView, { children: name ?? property }),
-      /* @__PURE__ */ jsx(IconFilter, {})
-    ] }),
+    /* @__PURE__ */ jsxs(
+      ButtonView,
+      {
+        className: headerStyles.desktop,
+        variant: "outline",
+        color: "secondary",
+        children: [
+          /* @__PURE__ */ jsx(TextView, { children: name ?? property }),
+          /* @__PURE__ */ jsx(IconFilter, {})
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx(
       ContextMenu,
       {
         selectionMode: mode === "one" ? "single" : "multiple",
         selectedKeys: activeFilterKeys,
-        children: items
+        children: filterItems
       }
     )
   ] });
 };
-export { FilterPicker };
-//# sourceMappingURL=FilterPicker.mjs.map
+export { FilterMenu };
+//# sourceMappingURL=FilterMenu.mjs.map

package/dist/js/components/src/components/List/components/Header/components/Filters/FilterMenu.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FilterMenu.mjs","sources":["../../../../../../../../../../src/components/List/components/Header/components/Filters/FilterMenu.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport type { Filter } from \"@/components/List/model/filter/Filter\";\nimport { IconFilter } from \"@/components/Icon/components/icons\";\nimport TextView from \"@/views/TextView\";\nimport ButtonView from \"@/views/ButtonView\";\nimport ContextMenu, { ContextMenuTrigger } from \"@/components/ContextMenu\";\nimport { FilterMenuItem } from \"@/components/List/components/Header/components/Filters/FilterMenuItem\";\nimport styles from \"@/components/List/components/Header/Header.module.css\";\n\ninterface Props {\n filter: Filter<never, never, never>;\n}\n\nexport const FilterMenu: FC<Props> = (props) => {\n const { filter } = props;\n\n const { values, mode, name, property } = filter;\n\n const filterItems = values.map((v) => <FilterMenuItem filterValue={v} />);\n\n const activeFilterKeys = values.filter((v) => v.isActive).map((v) => v.id);\n\n return (\n <ContextMenuTrigger>\n <ButtonView\n className={styles.desktop}\n variant=\"outline\"\n color=\"secondary\"\n >\n <TextView>{name ?? property}</TextView>\n <IconFilter />\n </ButtonView>\n <ContextMenu\n selectionMode={mode === \"one\" ? \"single\" : \"multiple\"}\n selectedKeys={activeFilterKeys}\n >\n {filterItems}\n </ContextMenu>\n </ContextMenuTrigger>\n );\n};\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;AAca,MAAA,UAAA,GAAwB,CAAC,KAAU,KAAA;AAC9C,EAAM,MAAA,EAAE,QAAW,GAAA,KAAA;AAEnB,EAAA,MAAM,EAAE,MAAA,EAAQ,IAAM,EAAA,IAAA,EAAM,UAAa,GAAA,MAAA;AAEzC,EAAM,MAAA,WAAA,GAAc,OAAO,GAAI,CAAA,CAAC,sBAAO,GAAA,CAAA,cAAA,EAAA,EAAe,WAAa,EAAA,CAAA,EAAG,CAAE,CAAA;AAExE,EAAA,MAAM,gBAAmB,GAAA,MAAA,CAAO,MAAO,CAAA,CAAC,CAAM,KAAA,CAAA,CAAE,QAAQ,CAAA,CAAE,GAAI,CAAA,CAAC,CAAM,KAAA,CAAA,CAAE,EAAE,CAAA;AAEzE,EAAA,4BACG,kBACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,WAAWA,YAAO,CAAA,OAAA;AAAA,QAClB,OAAQ,EAAA,SAAA;AAAA,QACR,KAAM,EAAA,WAAA;AAAA,QAEN,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,QAAA,EAAA,EAAU,kBAAQ,QAAS,EAAA,CAAA;AAAA,8BAC3B,UAAW,EAAA,EAAA;AAAA;AAAA;AAAA,KACd;AAAA,oBACA,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,aAAA,EAAe,IAAS,KAAA,KAAA,GAAQ,QAAW,GAAA,UAAA;AAAA,QAC3C,YAAc,EAAA,gBAAA;AAAA,QAEb,QAAA,EAAA;AAAA;AAAA;AACH,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/List/components/Header/components/Filters/FilterMenuItem.mjs ADDED Viewed

@@ -0,0 +1,23 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import MenuItemView from '../../../../../../views/MenuItemView.mjs';
+import 'react';
+const FilterMenuItem = (props) => {
+  const { filterValue } = props;
+  return /* @__PURE__ */ jsx(
+    MenuItemView,
+    {
+      id: filterValue.id,
+      onAction: () => {
+        filterValue.toggle();
+      },
+      children: filterValue.render()
+    },
+    filterValue.id
+  );
+};
+export { FilterMenuItem };
+//# sourceMappingURL=FilterMenuItem.mjs.map

package/dist/js/components/src/components/List/components/Header/components/Filters/FilterMenuItem.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FilterMenuItem.mjs","sources":["../../../../../../../../../../src/components/List/components/Header/components/Filters/FilterMenuItem.tsx"],"sourcesContent":["import MenuItemView from \"@/views/MenuItemView\";\nimport React, { type FC } from \"react\";\nimport type { FilterValue } from \"@/components/List/model/filter/FilterValue\";\n\ninterface Props {\n filterValue: FilterValue;\n}\n\nexport const FilterMenuItem: FC<Props> = (props) => {\n const { filterValue } = props;\n\n return (\n <MenuItemView\n id={filterValue.id}\n key={filterValue.id}\n onAction={() => {\n filterValue.toggle();\n }}\n >\n {filterValue.render()}\n </MenuItemView>\n );\n};\n"],"names":[],"mappings":";;;;AAQa,MAAA,cAAA,GAA4B,CAAC,KAAU,KAAA;AAClD,EAAM,MAAA,EAAE,aAAgB,GAAA,KAAA;AAExB,EACE,uBAAA,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,IAAI,WAAY,CAAA,EAAA;AAAA,MAEhB,UAAU,MAAM;AACd,QAAA,WAAA,CAAY,MAAO,EAAA;AAAA,OACrB;AAAA,MAEC,sBAAY,MAAO;AAAA,KAAA;AAAA,IALf,WAAY,CAAA;AAAA,GAMnB;AAEJ;;;;"}

package/dist/js/components/src/components/List/components/Header/components/Filters/FilterMenuList.mjs ADDED Viewed

@@ -0,0 +1,38 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+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';
+import { FilterMenu } from './FilterMenu.mjs';
+const FilterMenuList = () => {
+  const list = useList();
+  return list.filters.map((filter) => /* @__PURE__ */ jsx(FilterMenu, { filter }, filter.property));
+};
+export { FilterMenuList };
+//# sourceMappingURL=FilterMenuList.mjs.map

package/dist/js/components/src/components/List/components/Header/components/Filters/FilterMenuList.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FilterMenuList.mjs","sources":["../../../../../../../../../../src/components/List/components/Header/components/Filters/FilterMenuList.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport { useList } from \"@/components/List\";\nimport { FilterMenu } from \"@/components/List/components/Header/components/Filters/FilterMenu\";\n\nexport const FilterMenuList: FC = () => {\n const list = useList();\n\n return list.filters.map((filter) => (\n <FilterMenu key={filter.property} filter={filter} />\n ));\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKO,MAAM,iBAAqB,MAAM;AACtC,EAAA,MAAM,OAAO,OAAQ,EAAA;AAErB,EAAO,OAAA,IAAA,CAAK,OAAQ,CAAA,GAAA,CAAI,CAAC,MAAA,yBACtB,UAAiC,EAAA,EAAA,MAAA,EAAA,EAAjB,MAAO,CAAA,QAA0B,CACnD,CAAA;AACH;;;;"}

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

@@ -13,10 +13,11 @@ import '../../../../../../lib/slotContext/slotContext.mjs';
 import '../../../../../../lib/viewComponentContext/viewComponentContext.mjs';
 import 'dot-prop';
 import SearchFieldView from '../../../../../../views/SearchFieldView.mjs';
+import styles from './SearchField.module.scss.mjs';
 const autoSubmitTimeout = 800;
 const DefaultSearchFieldRender = (props) => {
-  const { className, onChange, value, autoSubmit, ...searchFieldProps } = props;
+  const { onChange, value, autoSubmit, ...searchFieldProps } = props;
   const [searchString, setSearchString] = useState(value ?? "");
   const submitSearch = () => {
     if (searchString.trim() === "") {
@@ -48,7 +49,7 @@ const DefaultSearchFieldRender = (props) => {
   return /* @__PURE__ */ jsx(
     SearchFieldView,
     {
-      className,
+      className: styles.searchField,
       value: searchString,
       onKeyUp: handleKeyPress,
       onChange: (value2) => setSearchString(value2),
@@ -58,10 +59,9 @@ const DefaultSearchFieldRender = (props) => {
   );
 };
 const SearchField = (props) => {
-  const { className, search } = props;
+  const { search } = props;
   const render = search.render ?? DefaultSearchFieldRender;
   return createElement(render, {
-    className,
     value: search.value,
     onChange: search.setValue.bind(search),
     ...search.textFieldProps

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

	@@ -1 +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;;;;"}
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\";\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 ADDED Viewed

@@ -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 ADDED Viewed

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