@mittwald/flow-react-components 1.2.0-next.22 → 1.2.0-next.23

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 (10) hide show
  1. package/dist/assets/component-index.json +1 -1
  2. package/dist/assets/doc-properties.json +1 -1
  3. package/dist/css/all-layered.css +1 -1
  4. package/dist/css/all.css +1 -1
  5. package/dist/js/packages/components/src/components/List/components/Items/components/Item/Item.module.mjs +3 -1
  6. package/dist/js/packages/components/src/components/List/components/Items/components/Item/Item.module.mjs.map +1 -1
  7. package/dist/js/packages/components/src/components/List/components/Items/views/GridListItem/GridListItem.mjs +13 -3
  8. package/dist/js/packages/components/src/components/List/components/Items/views/GridListItem/GridListItem.mjs.map +1 -1
  9. package/dist/types/components/List/components/Items/views/GridListItem/GridListItem.d.ts.map +1 -1
  10. package/package.json +9 -9
package/dist/js/packages/components/src/components/List/components/Items/components/Item/Item.module.mjs CHANGED
@@ -4,14 +4,16 @@
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 link = "flow--list--items--item--link";
7
8
  var tile = "flow--list--items--item--tile";
8
9
  var Item_module_default = {
9
10
  item,
10
11
  isSelected,
11
12
  hasAction,
13
+ link,
12
14
  tile
13
15
  };
14
16
  //#endregion
15
- export { Item_module_default as default, hasAction, isSelected, item, tile };
17
+ export { Item_module_default as default, hasAction, isSelected, item, link, tile };
16
18
 
17
19
  //# sourceMappingURL=Item.module.mjs.map
package/dist/js/packages/components/src/components/List/components/Items/components/Item/Item.module.mjs.map CHANGED
@@ -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 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 &.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 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":""}
package/dist/js/packages/components/src/components/List/components/Items/views/GridListItem/GridListItem.mjs CHANGED
@@ -2,15 +2,25 @@
2
2
  /* */
3
3
  import Item_module_default from "../../components/Item/Item.module.mjs";
4
4
  import clsx from "clsx";
5
- import { jsx } from "react/jsx-runtime";
5
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
6
+ import { useLinkProps } from "@react-aria/utils";
6
7
  import * as Aria from "react-aria-components";
7
8
  //#region src/components/List/components/Items/views/GridListItem/GridListItem.tsx
8
9
  /** @flr-generate all */
9
10
  var GridListItem = (props) => {
10
- const { hasAction, isTile, ...restProps } = props;
11
+ const { hasAction, isTile, children, ...restProps } = props;
12
+ const linkProps = useLinkProps(props);
13
+ const linkOverlay = linkProps.href ? /* @__PURE__ */ jsx("a", {
14
+ ...linkProps,
15
+ "aria-hidden": true,
16
+ className: Item_module_default.link,
17
+ draggable: false,
18
+ tabIndex: -1
19
+ }) : null;
11
20
  return /* @__PURE__ */ jsx(Aria.GridListItem, {
12
21
  ...restProps,
13
- className: (renderProps) => clsx(Item_module_default.item, hasAction && Item_module_default.hasAction, isTile && Item_module_default.tile, renderProps.isSelected && Item_module_default.isSelected)
22
+ className: (renderProps) => clsx(Item_module_default.item, hasAction && Item_module_default.hasAction, isTile && Item_module_default.tile, renderProps.isSelected && Item_module_default.isSelected),
23
+ children: (renderProps) => /* @__PURE__ */ jsxs(Fragment, { children: [typeof children === "function" ? children(renderProps) : children, linkOverlay] })
14
24
  });
15
25
  };
16
26
  //#endregion
package/dist/js/packages/components/src/components/List/components/Items/views/GridListItem/GridListItem.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"GridListItem.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/views/GridListItem/GridListItem.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { FC } from \"react\";\nimport styles from \"@/components/List/components/Items/components/Item/Item.module.scss\";\nimport clsx from \"clsx\";\n\nexport type GridListItemProps = Aria.GridListItemProps<never> & {\n hasAction?: boolean;\n isTile?: boolean;\n};\n\n/** @flr-generate all */\nexport const GridListItem: FC<GridListItemProps> = (props) => {\n const { hasAction, isTile, ...restProps } = props;\n return (\n <Aria.GridListItem\n {...restProps}\n className={(renderProps) =>\n clsx(\n styles.item,\n hasAction && styles.hasAction,\n isTile && styles.tile,\n renderProps.isSelected && styles.isSelected,\n )\n }\n />\n );\n};\n\nexport default GridListItem;\n"],"mappings":";;;;;;;;AAWA,IAAa,gBAAuC,UAAU;CAC5D,MAAM,EAAE,WAAW,QAAQ,GAAG,cAAc;CAC5C,OACE,oBAAC,KAAK,cAAN;EACE,GAAI;EACJ,YAAY,gBACV,KACE,oBAAO,MACP,aAAa,oBAAO,WACpB,UAAU,oBAAO,MACjB,YAAY,cAAc,oBAAO,UACnC;CAEH,CAAA;AAEL"}
1
+ {"version":3,"file":"GridListItem.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/views/GridListItem/GridListItem.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { FC } from \"react\";\nimport styles from \"@/components/List/components/Items/components/Item/Item.module.scss\";\nimport clsx from \"clsx\";\nimport { useLinkProps } from \"@react-aria/utils\";\n\nexport type GridListItemProps = Aria.GridListItemProps<never> & {\n hasAction?: boolean;\n isTile?: boolean;\n};\n\n/** @flr-generate all */\nexport const GridListItem: FC<GridListItemProps> = (props) => {\n const { hasAction, isTile, children, ...restProps } = props;\n\n // React Aria turns `href` into data attributes and navigates on press, so\n // the row itself is always a `div`. Overlay a real anchor to give the browser\n // back its own link affordances: context menu, middle-click, modifier-click.\n const linkProps = useLinkProps(props);\n\n const linkOverlay = linkProps.href ? (\n // The row keeps owning activation and the accessible semantics. The anchor\n // must stay untabbable — React Aria treats a tabbable descendant as\n // interactive content and would stop the row's own press — and out of the\n // accessibility tree, so screen readers announce the row unchanged.\n <a\n {...linkProps}\n aria-hidden\n className={styles.link}\n draggable={false}\n tabIndex={-1}\n />\n ) : null;\n\n return (\n <Aria.GridListItem\n {...restProps}\n className={(renderProps) =>\n clsx(\n styles.item,\n hasAction && styles.hasAction,\n isTile && styles.tile,\n renderProps.isSelected && styles.isSelected,\n )\n }\n >\n {(renderProps) => (\n <>\n {typeof children === \"function\" ? children(renderProps) : children}\n {linkOverlay}\n </>\n )}\n </Aria.GridListItem>\n );\n};\n\nexport default GridListItem;\n"],"mappings":";;;;;;;;;AAYA,IAAa,gBAAuC,UAAU;CAC5D,MAAM,EAAE,WAAW,QAAQ,UAAU,GAAG,cAAc;CAKtD,MAAM,YAAY,aAAa,KAAK;CAEpC,MAAM,cAAc,UAAU,OAK5B,oBAAC,KAAD;EACE,GAAI;EACJ,eAAA;EACA,WAAW,oBAAO;EAClB,WAAW;EACX,UAAU;CACX,CAAA,IACC;CAEJ,OACE,oBAAC,KAAK,cAAN;EACE,GAAI;EACJ,YAAY,gBACV,KACE,oBAAO,MACP,aAAa,oBAAO,WACpB,UAAU,oBAAO,MACjB,YAAY,cAAc,oBAAO,UACnC;EAGA,WAAA,gBACA,qBAAA,UAAA,EAAA,UAAA,CACG,OAAO,aAAa,aAAa,SAAS,WAAW,IAAI,UACzD,WACD,EAAA,CAAA;CAEa,CAAA;AAEvB"}
package/dist/types/components/List/components/Items/views/GridListItem/GridListItem.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"GridListItem.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/List/components/Items/views/GridListItem/GridListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAC9C,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,wBAAwB;AACxB,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAe9C,CAAC;AAEF,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"GridListItem.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/List/components/Items/views/GridListItem/GridListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAC9C,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAKhC,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,wBAAwB;AACxB,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CA0C9C,CAAC;AAEF,eAAe,YAAY,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mittwald/flow-react-components",
3
- "version": "1.2.0-next.22",
3
+ "version": "1.2.0-next.23",
4
4
  "type": "module",
5
5
  "description": "A React implementation of Flow, mittwald’s design system",
6
6
  "homepage": "https://flow.mittwald.de",
@@ -78,9 +78,9 @@
78
78
  "@internationalized/string-compiler": "^3.4.1",
79
79
  "@lezer/common": "^1.5.2",
80
80
  "@lezer/highlight": "^1.2.3",
81
- "@mittwald/flow-icons": "1.2.0-next.22",
81
+ "@mittwald/flow-icons": "1.2.0-next.23",
82
82
  "@mittwald/password-tools-js": "3.0.0-alpha.31",
83
- "@mittwald/react-tunnel": "1.2.0-next.22",
83
+ "@mittwald/react-tunnel": "1.2.0-next.23",
84
84
  "@mittwald/react-use-promise": "^4.2.2",
85
85
  "@react-aria/form": "^3.2.1",
86
86
  "@react-aria/i18n": "^3.13.1",
@@ -134,12 +134,12 @@
134
134
  "@internationalized/date": "^3.12.3",
135
135
  "@lezer/generator": "^1.8.0",
136
136
  "@lezer/lr": "^1.4.10",
137
- "@mittwald/flow-core": "1.2.0-next.22",
138
- "@mittwald/flow-design-tokens": "1.2.0-next.22",
139
- "@mittwald/flow-icons-base": "1.2.0-next.22",
137
+ "@mittwald/flow-core": "1.2.0-next.23",
138
+ "@mittwald/flow-design-tokens": "1.2.0-next.23",
139
+ "@mittwald/flow-icons-base": "1.2.0-next.23",
140
140
  "@mittwald/react-use-promise": "^4.2.2",
141
141
  "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
142
- "@mittwald/typescript-config": "1.2.0-next.22",
142
+ "@mittwald/typescript-config": "1.2.0-next.23",
143
143
  "@nx/storybook": "^22.7.6",
144
144
  "@storybook/addon-a11y": "^10.5.10",
145
145
  "@storybook/addon-actions": "^9.0.8",
@@ -190,7 +190,7 @@
190
190
  },
191
191
  "peerDependencies": {
192
192
  "@internationalized/date": "^3.12.2",
193
- "@mittwald/flow-icons-pro": "1.2.0-next.22",
193
+ "@mittwald/flow-icons-pro": "1.2.0-next.23",
194
194
  "@mittwald/react-use-promise": "^4.2.2",
195
195
  "next": "^16.2.3",
196
196
  "react": "^19.2.0",
@@ -211,5 +211,5 @@
211
211
  "optional": true
212
212
  }
213
213
  },
214
- "gitHead": "c4f2406c895a1c7de983f65dbafc85f412b9805a"
214
+ "gitHead": "462e3035a0bd8c71ac86c3ada50fa8a23e48576e"
215
215
  }