@mittwald/flow-react-components 1.2.0-next.63 → 1.2.0-next.65

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.
@@ -4,16 +4,18 @@
4
4
  var item = "flow--list--items--item";
5
5
  var isSelected = "flow--list--items--item--is-selected";
6
6
  var hasAction = "flow--list--items--item--has-action";
7
+ var bottomContent = "flow--list--items--item--bottom-content";
7
8
  var link = "flow--list--items--item--link";
8
9
  var tile = "flow--list--items--item--tile";
9
10
  var Item_module_default = {
10
11
  item,
11
12
  isSelected,
12
13
  hasAction,
14
+ bottomContent,
13
15
  link,
14
16
  tile
15
17
  };
16
18
  //#endregion
17
- export { Item_module_default as default, hasAction, isSelected, item, link, tile };
19
+ export { bottomContent, Item_module_default as default, hasAction, isSelected, item, link, tile };
18
20
 
19
21
  //# sourceMappingURL=Item.module.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Item.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/components/Item/Item.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.item {\n position: relative;\n\n /* The link overlay and the interactive content lifted above it (see .link\n below) stack against each other only — never against anything outside the\n item. */\n isolation: isolate;\n cursor: default;\n background-color: var(--list-item--background-color--default);\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n @include focus.focus;\n\n &.item {\n outline-offset: calc(var(--size-px--xs) * -1);\n box-shadow: none;\n }\n\n &:where(.isSelected) {\n background-color: var(--list-item--background-color--pressed);\n }\n\n &:not(:last-child) {\n border-bottom: var(--list-item--border-width) var(--list-item--border-style)\n var(--list-item--border-color);\n }\n\n &[data-href] {\n cursor: pointer;\n }\n\n &:where(.hasAction):not(\n &:has(:global(.flow--list--items--item--view--bottom-content):hover)\n ) {\n &:where(:not(.isSelected)) {\n &:hover {\n background-color: var(--list-item--background-color--hover);\n }\n }\n\n &[data-pressed] {\n background-color: var(--list-item--background-color--pressed);\n }\n }\n\n :global(.flow--avatar) {\n transition-property: filter;\n transition-duration: var(--transition--duration--default);\n }\n\n /* Elements */\n\n /*\n * Covers the whole item so a right-click anywhere on it hits a real link.\n * Interactive content is lifted back above the overlay, so buttons, context\n * menus and checkboxes keep receiving their own clicks.\n */\n .link {\n position: absolute;\n inset: 0;\n z-index: 1;\n }\n\n &:has(.link) {\n :where(\n a,\n button,\n input,\n label,\n select,\n summary,\n textarea,\n [role=\"button\"],\n [role=\"checkbox\"],\n [role=\"link\"],\n [role=\"switch\"],\n [tabindex]\n ):not(.link) {\n position: relative;\n z-index: 2;\n }\n\n /*\n * The bottom slot carries arbitrary consumer content (and the accordion's\n * expanded content), so it stays fully clickable and selectable.\n */\n :global(.flow--list--list-item-view--bottom-content) {\n position: relative;\n z-index: 2;\n }\n }\n\n &.tile {\n border: none;\n border-radius: var(--list-item--corner-radius);\n\n &.item {\n outline-offset: var(--size-px--xxs);\n }\n\n &:where(.hasAction) {\n &:not(.isSelected) {\n &:hover {\n :global(.flow--avatar) {\n filter: brightness(var(--image-button--brightness--hover));\n }\n }\n }\n\n &[data-pressed] {\n :global(.flow--avatar) {\n filter: brightness(var(--image-button--brightness--pressed));\n }\n }\n }\n }\n}\n"],"mappings":""}
1
+ {"version":3,"file":"Item.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/components/Item/Item.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.item {\n position: relative;\n\n /* The link overlay and the interactive content lifted above it (see .link\n below) stack against each other only — never against anything outside the\n item. */\n isolation: isolate;\n cursor: default;\n background-color: var(--list-item--background-color--default);\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n @include focus.focus;\n\n &.item {\n outline-offset: calc(var(--size-px--xs) * -1);\n box-shadow: none;\n }\n\n &:where(.isSelected) {\n background-color: var(--list-item--background-color--pressed);\n }\n\n &:not(:last-child) {\n border-bottom: var(--list-item--border-width) var(--list-item--border-style)\n var(--list-item--border-color);\n }\n\n &[data-href] {\n cursor: pointer;\n }\n\n /*\n * The bottom content carries its own interactive elements, so hovering it\n * must not highlight the whole item. `.bottomContent` is defined here and\n * applied by ListItemViewContent, so the class name stays type-checked\n * instead of naming ListItemView's generated class from the outside.\n */\n &:where(.hasAction):not(:has(.bottomContent:hover)) {\n &:where(:not(.isSelected)) {\n &:hover {\n background-color: var(--list-item--background-color--hover);\n }\n }\n\n &[data-pressed] {\n background-color: var(--list-item--background-color--pressed);\n }\n }\n\n :global(.flow--avatar) {\n transition-property: filter;\n transition-duration: var(--transition--duration--default);\n }\n\n /* Elements */\n\n /*\n * Covers the whole item so a right-click anywhere on it hits a real link.\n * Interactive content is lifted back above the overlay, so buttons, context\n * menus and checkboxes keep receiving their own clicks.\n */\n .link {\n position: absolute;\n inset: 0;\n z-index: 1;\n }\n\n &:has(.link) {\n :where(\n a,\n button,\n input,\n label,\n select,\n summary,\n textarea,\n [role=\"button\"],\n [role=\"checkbox\"],\n [role=\"link\"],\n [role=\"switch\"],\n [tabindex]\n ):not(.link) {\n position: relative;\n z-index: 2;\n }\n\n /*\n * The bottom slot carries arbitrary consumer content (and the accordion's\n * expanded content), so it stays fully clickable and selectable.\n */\n .bottomContent {\n position: relative;\n z-index: 2;\n }\n }\n\n &.tile {\n border: none;\n border-radius: var(--list-item--corner-radius);\n\n &.item {\n outline-offset: var(--size-px--xxs);\n }\n\n &:where(.hasAction) {\n &:not(.isSelected) {\n &:hover {\n :global(.flow--avatar) {\n filter: brightness(var(--image-button--brightness--hover));\n }\n }\n }\n\n &[data-pressed] {\n :global(.flow--avatar) {\n filter: brightness(var(--image-button--brightness--pressed));\n }\n }\n }\n }\n}\n"],"mappings":""}
@@ -3,22 +3,19 @@
3
3
  import { PropsContextProvider } from "../../../../../../lib/propsContext/components/PropsContextProvider.mjs";
4
4
  import dynamic from "../../../../../../lib/propsContext/dynamicProps/dynamic.mjs";
5
5
  import { ColumnLayout } from "../../../../../ColumnLayout/ColumnLayout.mjs";
6
+ import Item_module_default from "../../../Items/components/Item/Item.module.mjs";
6
7
  import ListItemView_module_default from "../../ListItemView.module.mjs";
7
8
  import clsx from "clsx";
8
9
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
9
10
  //#region src/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.tsx
10
- var getStyleForContentSlot = (slot) => slot === "top" ? ListItemView_module_default.topContent : slot === "bottom" ? ListItemView_module_default.bottomContent : ListItemView_module_default.topContent;
11
+ var getStyleForContentSlot = (slot) => slot === "bottom" ? clsx(ListItemView_module_default.bottomContent, Item_module_default.bottomContent) : ListItemView_module_default.topContent;
11
12
  /** @flr-generate all */
12
13
  var ListItemViewContent = (props) => {
13
14
  const { children, avatar, title, subTitle, button, bottom, checkbox, viewMode, s, m, l } = props;
14
- const contentProps = {
15
- bottom: {
16
- onMouseDown: (e) => e.stopPropagation(),
17
- onPointerDown: (e) => e.stopPropagation(),
18
- className: ListItemView_module_default.bottomContent
19
- },
20
- top: { className: ListItemView_module_default.topContent }
21
- };
15
+ const contentProps = { bottom: {
16
+ onMouseDown: (e) => e.stopPropagation(),
17
+ onPointerDown: (e) => e.stopPropagation()
18
+ } };
22
19
  const propsContext = {
23
20
  ContextMenu: { placement: "bottom end" },
24
21
  Button: { className: ListItemView_module_default.action },
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemViewContent.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren, ReactNode } from \"react\";\nimport styles from \"../../ListItemView.module.scss\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { ListViewMode } from \"@/components/List/model/types\";\nimport clsx from \"clsx\";\nimport {\n ColumnLayout,\n type ColumnLayoutProps,\n} from \"@/components/ColumnLayout\";\n\nexport type ListItemViewContentProps = PropsWithChildren &\n Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\"> & {\n title?: ReactNode;\n subTitle?: ReactNode;\n avatar?: ReactNode;\n button?: ReactNode;\n bottom?: ReactNode;\n checkbox?: ReactNode;\n viewMode?: ListViewMode;\n };\n\nconst getStyleForContentSlot = (slot?: string) =>\n slot === \"top\"\n ? styles.topContent\n : slot === \"bottom\"\n ? styles.bottomContent\n : styles.topContent;\n\n/** @flr-generate all */\nexport const ListItemViewContent = (props: ListItemViewContentProps) => {\n const {\n children,\n avatar,\n title,\n subTitle,\n button,\n bottom,\n checkbox,\n viewMode,\n s,\n m,\n l,\n } = props;\n\n const contentProps: Record<string, ComponentProps<\"div\">> = {\n bottom: {\n onMouseDown: (e) => e.stopPropagation(),\n onPointerDown: (e) => e.stopPropagation(),\n className: styles.bottomContent,\n },\n top: {\n className: styles.topContent,\n },\n };\n\n const propsContext: PropsContext = {\n ContextMenu: {\n placement: \"bottom end\",\n },\n Button: {\n className: styles.action,\n },\n ActionGroup: {\n className: styles.action,\n },\n Content: {\n className: dynamic((p) => getStyleForContentSlot(p.slot)),\n onMouseDown: dynamic((p) => contentProps[p.slot ?? \"top\"]?.onMouseDown),\n onPointerDown: dynamic(\n (p) => contentProps[p.slot ?? \"top\"]?.onPointerDown,\n ),\n },\n Avatar: {\n className: styles.avatar,\n },\n Heading: {\n className: styles.heading,\n level: 5,\n size: \"xs\",\n elementType: \"span\",\n Badge: { className: styles.badge },\n AlertBadge: { className: styles.badge },\n },\n Text: {\n className: styles.text,\n },\n Link: {\n unstyled: true,\n },\n };\n\n const className = clsx(\n styles.view,\n viewMode === \"tiles\" ? styles.tileView : styles.listView,\n );\n\n const header = (\n <div className={styles.header}>\n <div className={styles.checkboxContainer}>{checkbox}</div>\n {avatar}\n <div className={styles.title}>\n {title}\n <div className={styles.subTitle}>{subTitle}</div>\n </div>\n </div>\n );\n\n const innerListContent = (\n <>\n {header}\n {children}\n </>\n );\n\n const listColumnsContentView = (\n <ColumnLayout\n s={s}\n m={m}\n l={l}\n className={clsx(styles.content, styles.columnLayout)}\n >\n {innerListContent}\n </ColumnLayout>\n );\n\n const listDefaultContentView = (\n <div className={styles.content}>{innerListContent}</div>\n );\n\n const listView = (\n <>\n <div className={styles.contentWrapper}>\n {s || m || l ? listColumnsContentView : listDefaultContentView}\n {button}\n </div>\n {bottom}\n </>\n );\n\n const tilesViews = (\n <>\n <div className={styles.avatarContainer}>{avatar}</div>\n <div className={styles.content}>\n <div className={styles.header}>\n <div className={styles.checkboxContainer}>{checkbox}</div>\n <div className={styles.title}>\n {title}\n <div className={styles.subTitle}>{subTitle}</div>\n </div>\n {button}\n </div>\n {children}\n {bottom}\n </div>\n </>\n );\n\n return (\n <div className={className}>\n <PropsContextProvider props={propsContext}>\n {viewMode === \"list\" && listView}\n {viewMode === \"tiles\" && tilesViews}\n </PropsContextProvider>\n </div>\n );\n};\n\nexport default ListItemViewContent;\n"],"mappings":";;;;;;;;;AAyBA,IAAM,0BAA0B,SAC9B,SAAS,QACL,4BAAO,aACP,SAAS,WACP,4BAAO,gBACP,4BAAO;;AAGf,IAAa,uBAAuB,UAAoC;CACtE,MAAM,EACJ,UACA,QACA,OACA,UACA,QACA,QACA,UACA,UACA,GACA,GACA,MACE;CAEJ,MAAM,eAAsD;EAC1D,QAAQ;GACN,cAAc,MAAM,EAAE,gBAAgB;GACtC,gBAAgB,MAAM,EAAE,gBAAgB;GACxC,WAAW,4BAAO;EACpB;EACA,KAAK,EACH,WAAW,4BAAO,WACpB;CACF;CAEA,MAAM,eAA6B;EACjC,aAAa,EACX,WAAW,aACb;EACA,QAAQ,EACN,WAAW,4BAAO,OACpB;EACA,aAAa,EACX,WAAW,4BAAO,OACpB;EACA,SAAS;GACP,WAAW,SAAS,MAAM,uBAAuB,EAAE,IAAI,CAAC;GACxD,aAAa,SAAS,MAAM,aAAa,EAAE,QAAQ,MAAM,EAAE,WAAW;GACtE,eAAe,SACZ,MAAM,aAAa,EAAE,QAAQ,MAAM,EAAE,aACxC;EACF;EACA,QAAQ,EACN,WAAW,4BAAO,OACpB;EACA,SAAS;GACP,WAAW,4BAAO;GAClB,OAAO;GACP,MAAM;GACN,aAAa;GACb,OAAO,EAAE,WAAW,4BAAO,MAAM;GACjC,YAAY,EAAE,WAAW,4BAAO,MAAM;EACxC;EACA,MAAM,EACJ,WAAW,4BAAO,KACpB;EACA,MAAM,EACJ,UAAU,KACZ;CACF;CAEA,MAAM,YAAY,KAChB,4BAAO,MACP,aAAa,UAAU,4BAAO,WAAW,4BAAO,QAClD;CAEA,MAAM,SACJ,qBAAC,OAAD;EAAK,WAAW,4BAAO;EAAvB,UAAA;GACE,oBAAC,OAAD;IAAK,WAAW,4BAAO;IAAoB,UAAA;GAAc,CAAA;GACxD;GACD,qBAAC,OAAD;IAAK,WAAW,4BAAO;IAAvB,UAAA,CACG,OACD,oBAAC,OAAD;KAAK,WAAW,4BAAO;KAAW,UAAA;IAAc,CAAA,CAC7C;;EACF;;CAGP,MAAM,mBACJ,qBAAA,UAAA,EAAA,UAAA,CACG,QACA,QACD,EAAA,CAAA;CAGJ,MAAM,yBACJ,oBAAC,cAAD;EACK;EACA;EACA;EACH,WAAW,KAAK,4BAAO,SAAS,4BAAO,YAAY;EAElD,UAAA;CACW,CAAA;CAGhB,MAAM,yBACJ,oBAAC,OAAD;EAAK,WAAW,4BAAO;EAAU,UAAA;CAAsB,CAAA;CAGzD,MAAM,WACJ,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,OAAD;EAAK,WAAW,4BAAO;EAAvB,UAAA,CACG,KAAK,KAAK,IAAI,yBAAyB,wBACvC,MACE;CACJ,CAAA,GAAA,MACD,EAAA,CAAA;CAGJ,MAAM,aACJ,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;EAAK,WAAW,4BAAO;EAAkB,UAAA;CAAY,CAAA,GACrD,qBAAC,OAAD;EAAK,WAAW,4BAAO;EAAvB,UAAA;GACE,qBAAC,OAAD;IAAK,WAAW,4BAAO;IAAvB,UAAA;KACE,oBAAC,OAAD;MAAK,WAAW,4BAAO;MAAoB,UAAA;KAAc,CAAA;KACzD,qBAAC,OAAD;MAAK,WAAW,4BAAO;MAAvB,UAAA,CACG,OACD,oBAAC,OAAD;OAAK,WAAW,4BAAO;OAAW,UAAA;MAAc,CAAA,CAC7C;;KACJ;IACE;;GACJ;GACA;EACE;CACL,CAAA,CAAA,EAAA,CAAA;CAGJ,OACE,oBAAC,OAAD;EAAgB;EACd,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACG,aAAa,UAAU,UACvB,aAAa,WAAW,UACL;;CACnB,CAAA;AAET"}
1
+ {"version":3,"file":"ListItemViewContent.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren, ReactNode } from \"react\";\nimport styles from \"../../ListItemView.module.scss\";\nimport itemStyles from \"@/components/List/components/Items/components/Item/Item.module.scss\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { ListViewMode } from \"@/components/List/model/types\";\nimport clsx from \"clsx\";\nimport {\n ColumnLayout,\n type ColumnLayoutProps,\n} from \"@/components/ColumnLayout\";\n\nexport type ListItemViewContentProps = PropsWithChildren &\n Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\"> & {\n title?: ReactNode;\n subTitle?: ReactNode;\n avatar?: ReactNode;\n button?: ReactNode;\n bottom?: ReactNode;\n checkbox?: ReactNode;\n viewMode?: ListViewMode;\n };\n\n/*\n * The bottom content also carries Item's own `bottomContent` class.\n * Item.module.scss uses it to exclude this area from the item's hover and\n * pressed background — it has its own interactive elements.\n */\nconst getStyleForContentSlot = (slot?: string) =>\n slot === \"bottom\"\n ? clsx(styles.bottomContent, itemStyles.bottomContent)\n : styles.topContent;\n\n/** @flr-generate all */\nexport const ListItemViewContent = (props: ListItemViewContentProps) => {\n const {\n children,\n avatar,\n title,\n subTitle,\n button,\n bottom,\n checkbox,\n viewMode,\n s,\n m,\n l,\n } = props;\n\n const contentProps: Record<string, ComponentProps<\"div\">> = {\n bottom: {\n onMouseDown: (e) => e.stopPropagation(),\n onPointerDown: (e) => e.stopPropagation(),\n },\n };\n\n const propsContext: PropsContext = {\n ContextMenu: {\n placement: \"bottom end\",\n },\n Button: {\n className: styles.action,\n },\n ActionGroup: {\n className: styles.action,\n },\n Content: {\n className: dynamic((p) => getStyleForContentSlot(p.slot)),\n onMouseDown: dynamic((p) => contentProps[p.slot ?? \"top\"]?.onMouseDown),\n onPointerDown: dynamic(\n (p) => contentProps[p.slot ?? \"top\"]?.onPointerDown,\n ),\n },\n Avatar: {\n className: styles.avatar,\n },\n Heading: {\n className: styles.heading,\n level: 5,\n size: \"xs\",\n elementType: \"span\",\n Badge: { className: styles.badge },\n AlertBadge: { className: styles.badge },\n },\n Text: {\n className: styles.text,\n },\n Link: {\n unstyled: true,\n },\n };\n\n const className = clsx(\n styles.view,\n viewMode === \"tiles\" ? styles.tileView : styles.listView,\n );\n\n const header = (\n <div className={styles.header}>\n <div className={styles.checkboxContainer}>{checkbox}</div>\n {avatar}\n <div className={styles.title}>\n {title}\n <div className={styles.subTitle}>{subTitle}</div>\n </div>\n </div>\n );\n\n const innerListContent = (\n <>\n {header}\n {children}\n </>\n );\n\n const listColumnsContentView = (\n <ColumnLayout\n s={s}\n m={m}\n l={l}\n className={clsx(styles.content, styles.columnLayout)}\n >\n {innerListContent}\n </ColumnLayout>\n );\n\n const listDefaultContentView = (\n <div className={styles.content}>{innerListContent}</div>\n );\n\n const listView = (\n <>\n <div className={styles.contentWrapper}>\n {s || m || l ? listColumnsContentView : listDefaultContentView}\n {button}\n </div>\n {bottom}\n </>\n );\n\n const tilesViews = (\n <>\n <div className={styles.avatarContainer}>{avatar}</div>\n <div className={styles.content}>\n <div className={styles.header}>\n <div className={styles.checkboxContainer}>{checkbox}</div>\n <div className={styles.title}>\n {title}\n <div className={styles.subTitle}>{subTitle}</div>\n </div>\n {button}\n </div>\n {children}\n {bottom}\n </div>\n </>\n );\n\n return (\n <div className={className}>\n <PropsContextProvider props={propsContext}>\n {viewMode === \"list\" && listView}\n {viewMode === \"tiles\" && tilesViews}\n </PropsContextProvider>\n </div>\n );\n};\n\nexport default ListItemViewContent;\n"],"mappings":";;;;;;;;;;AA+BA,IAAM,0BAA0B,SAC9B,SAAS,WACL,KAAK,4BAAO,eAAe,oBAAW,aAAa,IACnD,4BAAO;;AAGb,IAAa,uBAAuB,UAAoC;CACtE,MAAM,EACJ,UACA,QACA,OACA,UACA,QACA,QACA,UACA,UACA,GACA,GACA,MACE;CAEJ,MAAM,eAAsD,EAC1D,QAAQ;EACN,cAAc,MAAM,EAAE,gBAAgB;EACtC,gBAAgB,MAAM,EAAE,gBAAgB;CAC1C,EACF;CAEA,MAAM,eAA6B;EACjC,aAAa,EACX,WAAW,aACb;EACA,QAAQ,EACN,WAAW,4BAAO,OACpB;EACA,aAAa,EACX,WAAW,4BAAO,OACpB;EACA,SAAS;GACP,WAAW,SAAS,MAAM,uBAAuB,EAAE,IAAI,CAAC;GACxD,aAAa,SAAS,MAAM,aAAa,EAAE,QAAQ,MAAM,EAAE,WAAW;GACtE,eAAe,SACZ,MAAM,aAAa,EAAE,QAAQ,MAAM,EAAE,aACxC;EACF;EACA,QAAQ,EACN,WAAW,4BAAO,OACpB;EACA,SAAS;GACP,WAAW,4BAAO;GAClB,OAAO;GACP,MAAM;GACN,aAAa;GACb,OAAO,EAAE,WAAW,4BAAO,MAAM;GACjC,YAAY,EAAE,WAAW,4BAAO,MAAM;EACxC;EACA,MAAM,EACJ,WAAW,4BAAO,KACpB;EACA,MAAM,EACJ,UAAU,KACZ;CACF;CAEA,MAAM,YAAY,KAChB,4BAAO,MACP,aAAa,UAAU,4BAAO,WAAW,4BAAO,QAClD;CAEA,MAAM,SACJ,qBAAC,OAAD;EAAK,WAAW,4BAAO;EAAvB,UAAA;GACE,oBAAC,OAAD;IAAK,WAAW,4BAAO;IAAoB,UAAA;GAAc,CAAA;GACxD;GACD,qBAAC,OAAD;IAAK,WAAW,4BAAO;IAAvB,UAAA,CACG,OACD,oBAAC,OAAD;KAAK,WAAW,4BAAO;KAAW,UAAA;IAAc,CAAA,CAC7C;;EACF;;CAGP,MAAM,mBACJ,qBAAA,UAAA,EAAA,UAAA,CACG,QACA,QACD,EAAA,CAAA;CAGJ,MAAM,yBACJ,oBAAC,cAAD;EACK;EACA;EACA;EACH,WAAW,KAAK,4BAAO,SAAS,4BAAO,YAAY;EAElD,UAAA;CACW,CAAA;CAGhB,MAAM,yBACJ,oBAAC,OAAD;EAAK,WAAW,4BAAO;EAAU,UAAA;CAAsB,CAAA;CAGzD,MAAM,WACJ,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,OAAD;EAAK,WAAW,4BAAO;EAAvB,UAAA,CACG,KAAK,KAAK,IAAI,yBAAyB,wBACvC,MACE;CACJ,CAAA,GAAA,MACD,EAAA,CAAA;CAGJ,MAAM,aACJ,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;EAAK,WAAW,4BAAO;EAAkB,UAAA;CAAY,CAAA,GACrD,qBAAC,OAAD;EAAK,WAAW,4BAAO;EAAvB,UAAA;GACE,qBAAC,OAAD;IAAK,WAAW,4BAAO;IAAvB,UAAA;KACE,oBAAC,OAAD;MAAK,WAAW,4BAAO;MAAoB,UAAA;KAAc,CAAA;KACzD,qBAAC,OAAD;MAAK,WAAW,4BAAO;MAAvB,UAAA,CACG,OACD,oBAAC,OAAD;OAAK,WAAW,4BAAO;OAAW,UAAA;MAAc,CAAA,CAC7C;;KACJ;IACE;;GACJ;GACA;EACE;CACL,CAAA,CAAA,EAAA,CAAA;CAGJ,OACE,oBAAC,OAAD;EAAgB;EACd,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACG,aAAa,UAAU,UACvB,aAAa,WAAW,UACL;;CACnB,CAAA;AAET"}
@@ -31,7 +31,10 @@ var SectionHeader = flowComponent("SectionHeader", (props) => {
31
31
  tunnel: actionsTunnel,
32
32
  Button: { tunnel: null },
33
33
  Switch: { tunnel: null },
34
- Link: { tunnel: null }
34
+ Link: {
35
+ size: "m",
36
+ tunnel: null
37
+ }
35
38
  },
36
39
  FileField: {
37
40
  tunnel: actionsTunnel,
@@ -42,10 +45,7 @@ var SectionHeader = flowComponent("SectionHeader", (props) => {
42
45
  Button: { tunnel: null }
43
46
  },
44
47
  Heading: { level: 2 },
45
- Link: {
46
- size: "s",
47
- tunnel: actionsTunnel
48
- }
48
+ Link: { tunnel: actionsTunnel }
49
49
  };
50
50
  return /* @__PURE__ */ jsx("header", {
51
51
  ref,
@@ -1 +1 @@
1
- {"version":3,"file":"SectionHeader.mjs","names":[],"sources":["../../../../../../../../../src/components/Section/components/SectionHeader/SectionHeader.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, RefAttributes } from \"react\";\nimport styles from \"./SectionHeader.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport {\n overlayTriggersTunneledTo,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport type SectionHeaderProps = PropsWithChildren &\n PropsWithClassName &\n RefAttributes<HTMLHeadingElement>;\n\nexport const SectionHeader: FC<SectionHeaderProps> = flowComponent(\n \"SectionHeader\",\n (props) => {\n const { children, className, ref } = props;\n\n const rootClassName = clsx(styles.sectionHeader, className);\n\n const actionsTunnel = {\n id: \"actions\",\n component: \"SectionHeader\",\n } as const;\n\n const propsContext: PropsContext = {\n ...overlayTriggersTunneledTo(actionsTunnel),\n Switch: {\n labelPosition: \"leading\",\n tunnel: actionsTunnel,\n },\n Button: {\n size: \"s\",\n tunnel: actionsTunnel,\n },\n ActionGroup: {\n preserveOrder: true,\n size: \"s\",\n tunnel: actionsTunnel,\n Button: {\n tunnel: null,\n },\n Switch: {\n tunnel: null,\n },\n Link: {\n tunnel: null,\n },\n },\n FileField: {\n tunnel: actionsTunnel,\n Button: { size: \"s\" },\n },\n Action: {\n tunnel: actionsTunnel,\n Button: {\n tunnel: null,\n },\n },\n Heading: {\n level: 2,\n },\n Link: {\n size: \"s\",\n tunnel: actionsTunnel,\n },\n };\n\n return (\n <header ref={ref} className={rootClassName}>\n <PropsContextProvider props={propsContext}>\n {children}\n <div className={styles.actions}>\n <UiComponentTunnelExit id=\"actions\" component=\"SectionHeader\" />\n </div>\n </PropsContextProvider>\n </header>\n );\n },\n {\n type: \"layout\",\n },\n);\n\nexport default SectionHeader;\n"],"mappings":";;;;;;;;;;AAgBA,IAAa,gBAAwC,cACnD,kBACC,UAAU;CACT,MAAM,EAAE,UAAU,WAAW,QAAQ;CAErC,MAAM,gBAAgB,KAAK,6BAAO,eAAe,SAAS;CAE1D,MAAM,gBAAgB;EACpB,IAAI;EACJ,WAAW;CACb;CAEA,MAAM,eAA6B;EACjC,GAAG,0BAA0B,aAAa;EAC1C,QAAQ;GACN,eAAe;GACf,QAAQ;EACV;EACA,QAAQ;GACN,MAAM;GACN,QAAQ;EACV;EACA,aAAa;GACX,eAAe;GACf,MAAM;GACN,QAAQ;GACR,QAAQ,EACN,QAAQ,KACV;GACA,QAAQ,EACN,QAAQ,KACV;GACA,MAAM,EACJ,QAAQ,KACV;EACF;EACA,WAAW;GACT,QAAQ;GACR,QAAQ,EAAE,MAAM,IAAI;EACtB;EACA,QAAQ;GACN,QAAQ;GACR,QAAQ,EACN,QAAQ,KACV;EACF;EACA,SAAS,EACP,OAAO,EACT;EACA,MAAM;GACJ,MAAM;GACN,QAAQ;EACV;CACF;CAEA,OACE,oBAAC,UAAD;EAAa;EAAK,WAAW;EAC3B,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACG,UACD,oBAAC,OAAD;IAAK,WAAW,6BAAO;IACrB,UAAA,oBAAC,uBAAD;KAAuB,IAAG;KAAU,WAAU;IAAiB,CAAA;GAC5D,CAAA,CACe;;CAChB,CAAA;AAEZ,GACA,EACE,MAAM,SACR,CACF"}
1
+ {"version":3,"file":"SectionHeader.mjs","names":[],"sources":["../../../../../../../../../src/components/Section/components/SectionHeader/SectionHeader.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, RefAttributes } from \"react\";\nimport styles from \"./SectionHeader.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport {\n overlayTriggersTunneledTo,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport type SectionHeaderProps = PropsWithChildren &\n PropsWithClassName &\n RefAttributes<HTMLHeadingElement>;\n\nexport const SectionHeader: FC<SectionHeaderProps> = flowComponent(\n \"SectionHeader\",\n (props) => {\n const { children, className, ref } = props;\n\n const rootClassName = clsx(styles.sectionHeader, className);\n\n const actionsTunnel = {\n id: \"actions\",\n component: \"SectionHeader\",\n } as const;\n\n const propsContext: PropsContext = {\n ...overlayTriggersTunneledTo(actionsTunnel),\n Switch: {\n labelPosition: \"leading\",\n tunnel: actionsTunnel,\n },\n Button: {\n size: \"s\",\n tunnel: actionsTunnel,\n },\n ActionGroup: {\n preserveOrder: true,\n size: \"s\",\n tunnel: actionsTunnel,\n Button: {\n tunnel: null,\n },\n Switch: {\n tunnel: null,\n },\n Link: {\n size: \"m\",\n tunnel: null,\n },\n },\n FileField: {\n tunnel: actionsTunnel,\n Button: { size: \"s\" },\n },\n Action: {\n tunnel: actionsTunnel,\n Button: {\n tunnel: null,\n },\n },\n Heading: {\n level: 2,\n },\n Link: {\n tunnel: actionsTunnel,\n },\n };\n\n return (\n <header ref={ref} className={rootClassName}>\n <PropsContextProvider props={propsContext}>\n {children}\n <div className={styles.actions}>\n <UiComponentTunnelExit id=\"actions\" component=\"SectionHeader\" />\n </div>\n </PropsContextProvider>\n </header>\n );\n },\n {\n type: \"layout\",\n },\n);\n\nexport default SectionHeader;\n"],"mappings":";;;;;;;;;;AAgBA,IAAa,gBAAwC,cACnD,kBACC,UAAU;CACT,MAAM,EAAE,UAAU,WAAW,QAAQ;CAErC,MAAM,gBAAgB,KAAK,6BAAO,eAAe,SAAS;CAE1D,MAAM,gBAAgB;EACpB,IAAI;EACJ,WAAW;CACb;CAEA,MAAM,eAA6B;EACjC,GAAG,0BAA0B,aAAa;EAC1C,QAAQ;GACN,eAAe;GACf,QAAQ;EACV;EACA,QAAQ;GACN,MAAM;GACN,QAAQ;EACV;EACA,aAAa;GACX,eAAe;GACf,MAAM;GACN,QAAQ;GACR,QAAQ,EACN,QAAQ,KACV;GACA,QAAQ,EACN,QAAQ,KACV;GACA,MAAM;IACJ,MAAM;IACN,QAAQ;GACV;EACF;EACA,WAAW;GACT,QAAQ;GACR,QAAQ,EAAE,MAAM,IAAI;EACtB;EACA,QAAQ;GACN,QAAQ;GACR,QAAQ,EACN,QAAQ,KACV;EACF;EACA,SAAS,EACP,OAAO,EACT;EACA,MAAM,EACJ,QAAQ,cACV;CACF;CAEA,OACE,oBAAC,UAAD;EAAa;EAAK,WAAW;EAC3B,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACG,UACD,oBAAC,OAAD;IAAK,WAAW,6BAAO;IACrB,UAAA,oBAAC,uBAAD;KAAuB,IAAG;KAAU,WAAU;IAAiB,CAAA;GAC5D,CAAA,CACe;;CAChB,CAAA;AAEZ,GACA,EACE,MAAM,SACR,CACF"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mittwald/flow-react-components",
3
- "version": "1.2.0-next.63",
3
+ "version": "1.2.0-next.65",
4
4
  "type": "module",
5
5
  "description": "A React implementation of Flow, mittwald’s design system",
6
6
  "homepage": "https://flow.mittwald.de",
@@ -83,9 +83,9 @@
83
83
  "@internationalized/string-compiler": "^3.4.1",
84
84
  "@lezer/common": "^1.5.2",
85
85
  "@lezer/highlight": "^1.2.3",
86
- "@mittwald/flow-icons": "^1.2.0-next.63",
86
+ "@mittwald/flow-icons": "^1.2.0-next.65",
87
87
  "@mittwald/password-tools-js": "^3.0.0",
88
- "@mittwald/react-tunnel": "^1.2.0-next.63",
88
+ "@mittwald/react-tunnel": "^1.2.0-next.65",
89
89
  "@mittwald/react-use-promise": "^4.2.2",
90
90
  "@react-aria/form": "^3.2.1",
91
91
  "@react-aria/i18n": "^3.13.1",
@@ -138,12 +138,12 @@
138
138
  "@internationalized/date": "^3.12.3",
139
139
  "@lezer/generator": "^1.8.0",
140
140
  "@lezer/lr": "^1.4.10",
141
- "@mittwald/flow-core": "1.2.0-next.63",
142
- "@mittwald/flow-design-tokens": "1.2.0-next.63",
143
- "@mittwald/flow-icons-base": "1.2.0-next.63",
141
+ "@mittwald/flow-core": "1.2.0-next.65",
142
+ "@mittwald/flow-design-tokens": "1.2.0-next.65",
143
+ "@mittwald/flow-icons-base": "1.2.0-next.65",
144
144
  "@mittwald/react-use-promise": "^4.2.2",
145
145
  "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
146
- "@mittwald/typescript-config": "1.2.0-next.63",
146
+ "@mittwald/typescript-config": "1.2.0-next.65",
147
147
  "@nx/storybook": "^22.7.6",
148
148
  "@storybook/addon-a11y": "^10.5.10",
149
149
  "@storybook/addon-actions": "^9.0.8",
@@ -195,7 +195,7 @@
195
195
  },
196
196
  "peerDependencies": {
197
197
  "@internationalized/date": "^3.12.2",
198
- "@mittwald/flow-icons-pro": "1.2.0-next.63",
198
+ "@mittwald/flow-icons-pro": "1.2.0-next.65",
199
199
  "@mittwald/react-use-promise": "^4.2.2",
200
200
  "next": "^16.2.3",
201
201
  "react": "^19.2.0",
@@ -219,5 +219,5 @@
219
219
  "browserslist": [
220
220
  "baseline widely available"
221
221
  ],
222
- "gitHead": "3429ba6a4c8bb8365620c2a714513e45ed0ff13e"
222
+ "gitHead": "49efe5b201356e56b203aca362e2e97fa3a3a3e2"
223
223
  }