@mittwald/flow-react-components 1.6.0-next.43 → 1.6.0-next.45

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.
@@ -1 +1 @@
1
- {"version":3,"file":"Heading.module.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.module.scss"],"sourcesContent":[".heading {\n color: var(--heading--color);\n font-size: var(--font-size);\n font-weight: var(--heading--font-weight);\n text-wrap-style: pretty;\n\n --heading-line-height: calc(var(--font-size) * var(--line-height));\n\n @mixin color($color) {\n &.#{$color} {\n color: var(--heading--color-#{$color});\n }\n }\n\n @include color(\"danger\");\n @include color(\"unavailable\");\n @include color(\"dark\");\n @include color(\"light\");\n @include color(\"dark-static\");\n @include color(\"light-static\");\n\n .headingText {\n .icon {\n height: var(--heading-line-height);\n width: var(--heading-line-height);\n vertical-align: bottom;\n display: inline-block;\n margin-inline-end: var(--heading--icon-to-text-spacing);\n }\n }\n\n .headingContent {\n &:empty {\n display: none;\n }\n }\n\n .headingTextSpacer {\n margin-inline-end: var(--heading--icon-to-text-spacing);\n }\n\n .headingContentItem {\n vertical-align: bottom;\n display: inline-flex;\n max-width: 100%;\n min-height: var(--heading-line-height);\n align-items: center;\n\n &:not(:last-child) {\n margin-inline-end: var(--heading--icon-to-text-spacing);\n }\n }\n\n &:where(.h1) {\n --font-size: var(--font-size-heading--xl);\n }\n\n &:where(.h2) {\n --font-size: var(--font-size-heading--m);\n }\n\n &:where(.h3) {\n --font-size: var(--font-size-heading--s);\n }\n\n &:where(.h4),\n &:where(.h5),\n &:where(.h6) {\n --font-size: var(--font-size-heading--xs);\n }\n\n @mixin size($size) {\n &.size-#{$size} {\n --font-size: var(--font-size-heading--#{$size});\n }\n }\n\n @include size(\"xs\");\n @include size(\"s\");\n @include size(\"m\");\n @include size(\"l\");\n @include size(\"xl\");\n @include size(\"xxl\");\n\n &:where(.wrap-wrap) {\n text-wrap: wrap;\n }\n\n &:where(.wrap-balance) {\n text-wrap: balance;\n }\n}\n\n@media (max-width: 768px) {\n .heading {\n &:where(.h1),\n &.size-xl {\n --font-size: var(--font-size-heading--l);\n }\n\n &.size-l {\n --font-size: var(--font-size-heading--m);\n }\n\n &:where(.h2),\n &.size-m {\n --font-size: var(--font-size-heading--s);\n }\n\n &:where(.h3),\n &.size-s {\n --font-size: var(--font-size-heading--xs);\n }\n }\n}\n"],"mappings":""}
1
+ {"version":3,"file":"Heading.module.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.module.scss"],"sourcesContent":[".heading {\n color: var(--heading--color);\n font-size: var(--font-size);\n font-weight: var(--heading--font-weight);\n text-wrap-style: pretty;\n\n --heading-line-height: calc(var(--font-size) * var(--line-height));\n\n @mixin color($color) {\n &.#{$color} {\n color: var(--heading--color-#{$color});\n }\n }\n\n @include color(\"danger\");\n @include color(\"unavailable\");\n @include color(\"dark\");\n @include color(\"light\");\n @include color(\"dark-static\");\n @include color(\"light-static\");\n\n .headingText {\n .icon {\n height: var(--heading-line-height);\n width: var(--heading-line-height);\n vertical-align: bottom;\n display: inline-block;\n margin-inline-end: var(--heading--icon-to-text-spacing);\n }\n }\n\n .headingContent {\n &:empty {\n display: none;\n }\n }\n\n /* A truncated title keeps the tunnelled content on its line while both fit.\n Otherwise the content wraps below and the title truncates on a line of its\n own. In SkeletonMode the bar's outer span is the flex item and clips the\n bar. */\n &:has(> .headingText > :global(.flow--truncate)),\n &:has(\n > .headingText\n > *\n > :global(.flow--skeleton-mode--skeleton-text-content)\n > :global(.flow--truncate)\n ) {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-start;\n\n .headingText {\n display: flex;\n min-width: 0;\n\n > :has(> :global(.flow--skeleton-mode--skeleton-text-content)) {\n min-width: 0;\n overflow: hidden;\n }\n }\n\n .icon {\n flex-shrink: 0;\n }\n\n .headingContent {\n flex-shrink: 0;\n max-width: 100%;\n }\n }\n\n .headingTextSpacer {\n margin-inline-end: var(--heading--icon-to-text-spacing);\n }\n\n .headingContentItem {\n vertical-align: bottom;\n display: inline-flex;\n max-width: 100%;\n min-height: var(--heading-line-height);\n align-items: center;\n\n &:not(:last-child) {\n margin-inline-end: var(--heading--icon-to-text-spacing);\n }\n }\n\n &:where(.h1) {\n --font-size: var(--font-size-heading--xl);\n }\n\n &:where(.h2) {\n --font-size: var(--font-size-heading--m);\n }\n\n &:where(.h3) {\n --font-size: var(--font-size-heading--s);\n }\n\n &:where(.h4),\n &:where(.h5),\n &:where(.h6) {\n --font-size: var(--font-size-heading--xs);\n }\n\n @mixin size($size) {\n &.size-#{$size} {\n --font-size: var(--font-size-heading--#{$size});\n }\n }\n\n @include size(\"xs\");\n @include size(\"s\");\n @include size(\"m\");\n @include size(\"l\");\n @include size(\"xl\");\n @include size(\"xxl\");\n\n &:where(.wrap-wrap) {\n text-wrap: wrap;\n }\n\n &:where(.wrap-balance) {\n text-wrap: balance;\n }\n}\n\n@media (max-width: 768px) {\n .heading {\n &:where(.h1),\n &.size-xl {\n --font-size: var(--font-size-heading--l);\n }\n\n &.size-l {\n --font-size: var(--font-size-heading--m);\n }\n\n &:where(.h2),\n &.size-m {\n --font-size: var(--font-size-heading--s);\n }\n\n &:where(.h3),\n &.size-s {\n --font-size: var(--font-size-heading--xs);\n }\n }\n}\n"],"mappings":""}
@@ -0,0 +1,29 @@
1
+ "use client"
2
+ /* */
3
+ //#region src/lib/object/isPlainObjectDeepEqual.ts
4
+ var isRefObject = (something) => {
5
+ const keys = Object.keys(something);
6
+ return keys.length === 1 && keys[0] === "current";
7
+ };
8
+ var isPlainObject = (something) => {
9
+ if (typeof something !== "object" || something === null || "$$typeof" in something) return false;
10
+ const prototype = Object.getPrototypeOf(something);
11
+ return (prototype === Object.prototype || prototype === null) && !isRefObject(something);
12
+ };
13
+ /**
14
+ * Compares plain objects recursively and every other value by identity.
15
+ * Functions, arrays, class instances, React elements and ref objects (`{
16
+ * current }`) only count as equal when they are the same value, so a value
17
+ * created during render counts as a change.
18
+ */
19
+ var isPlainObjectDeepEqual = (first, second) => {
20
+ if (Object.is(first, second)) return true;
21
+ if (!isPlainObject(first) || !isPlainObject(second)) return false;
22
+ const firstKeys = Object.keys(first);
23
+ if (firstKeys.length !== Object.keys(second).length) return false;
24
+ return firstKeys.every((key) => Object.hasOwn(second, key) && isPlainObjectDeepEqual(first[key], second[key]));
25
+ };
26
+ //#endregion
27
+ export { isPlainObjectDeepEqual as default, isPlainObjectDeepEqual };
28
+
29
+ //# sourceMappingURL=isPlainObjectDeepEqual.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"isPlainObjectDeepEqual.mjs","names":[],"sources":["../../../../../../../src/lib/object/isPlainObjectDeepEqual.ts"],"sourcesContent":["const isRefObject = (something: object) => {\n const keys = Object.keys(something);\n return keys.length === 1 && keys[0] === \"current\";\n};\n\nconst isPlainObject = (\n something: unknown,\n): something is Record<string, unknown> => {\n if (\n typeof something !== \"object\" ||\n something === null ||\n \"$$typeof\" in something\n ) {\n return false;\n }\n const prototype = Object.getPrototypeOf(something);\n return (\n (prototype === Object.prototype || prototype === null) &&\n !isRefObject(something)\n );\n};\n\n/**\n * Compares plain objects recursively and every other value by identity.\n * Functions, arrays, class instances, React elements and ref objects (`{\n * current }`) only count as equal when they are the same value, so a value\n * created during render counts as a change.\n */\nexport const isPlainObjectDeepEqual = (\n first: unknown,\n second: unknown,\n): boolean => {\n if (Object.is(first, second)) {\n return true;\n }\n\n if (!isPlainObject(first) || !isPlainObject(second)) {\n return false;\n }\n\n const firstKeys = Object.keys(first);\n\n if (firstKeys.length !== Object.keys(second).length) {\n return false;\n }\n\n return firstKeys.every(\n (key) =>\n Object.hasOwn(second, key) &&\n isPlainObjectDeepEqual(first[key], second[key]),\n );\n};\n\nexport default isPlainObjectDeepEqual;\n"],"mappings":";;;AAAA,IAAM,eAAe,cAAsB;CACzC,MAAM,OAAO,OAAO,KAAK,SAAS;CAClC,OAAO,KAAK,WAAW,KAAK,KAAK,OAAO;AAC1C;AAEA,IAAM,iBACJ,cACyC;CACzC,IACE,OAAO,cAAc,YACrB,cAAc,QACd,cAAc,WAEd,OAAO;CAET,MAAM,YAAY,OAAO,eAAe,SAAS;CACjD,QACG,cAAc,OAAO,aAAa,cAAc,SACjD,CAAC,YAAY,SAAS;AAE1B;;;;;;;AAQA,IAAa,0BACX,OACA,WACY;CACZ,IAAI,OAAO,GAAG,OAAO,MAAM,GACzB,OAAO;CAGT,IAAI,CAAC,cAAc,KAAK,KAAK,CAAC,cAAc,MAAM,GAChD,OAAO;CAGT,MAAM,YAAY,OAAO,KAAK,KAAK;CAEnC,IAAI,UAAU,WAAW,OAAO,KAAK,MAAM,CAAC,CAAC,QAC3C,OAAO;CAGT,OAAO,UAAU,OACd,QACC,OAAO,OAAO,QAAQ,GAAG,KACzB,uBAAuB,MAAM,MAAM,OAAO,IAAI,CAClD;AACF"}
@@ -4,11 +4,12 @@ import { PropsContextProvider } from "../propsContext.mjs";
4
4
  import "react";
5
5
  import { jsx } from "react/jsx-runtime";
6
6
  //#region src/lib/propsContext/components/ClearPropsContext.tsx
7
+ var emptyPropsContext = {};
7
8
  /** @flr-generate all */
8
9
  var ClearPropsContext = (props) => {
9
10
  const { children } = props;
10
11
  return /* @__PURE__ */ jsx(PropsContextProvider, {
11
- value: {},
12
+ value: emptyPropsContext,
12
13
  children
13
14
  });
14
15
  };
@@ -1 +1 @@
1
- {"version":3,"file":"ClearPropsContext.mjs","names":[],"sources":["../../../../../../../../src/lib/propsContext/components/ClearPropsContext.tsx"],"sourcesContent":["import { PropsContextProvider } from \"@/lib/propsContext/propsContext\";\nimport { type FC, type PropsWithChildren } from \"react\";\n\nexport type ClearPropsContextProps = PropsWithChildren;\n\n/** @flr-generate all */\nexport const ClearPropsContext: FC<PropsWithChildren> = (props) => {\n const { children } = props;\n return <PropsContextProvider value={{}}>{children}</PropsContextProvider>;\n};\n\nexport default ClearPropsContext;\n"],"mappings":";;;;;;;AAMA,IAAa,qBAA4C,UAAU;CACjE,MAAM,EAAE,aAAa;CACrB,OAAO,oBAAC,sBAAD;EAAsB,OAAO,CAAC;EAAI;CAA+B,CAAA;AAC1E"}
1
+ {"version":3,"file":"ClearPropsContext.mjs","names":[],"sources":["../../../../../../../../src/lib/propsContext/components/ClearPropsContext.tsx"],"sourcesContent":["import { PropsContextProvider } from \"@/lib/propsContext/propsContext\";\nimport { type FC, type PropsWithChildren } from \"react\";\n\nexport type ClearPropsContextProps = PropsWithChildren;\n\nconst emptyPropsContext = {};\n\n/** @flr-generate all */\nexport const ClearPropsContext: FC<PropsWithChildren> = (props) => {\n const { children } = props;\n return (\n <PropsContextProvider value={emptyPropsContext}>\n {children}\n </PropsContextProvider>\n );\n};\n\nexport default ClearPropsContext;\n"],"mappings":";;;;;;AAKA,IAAM,oBAAoB,CAAC;;AAG3B,IAAa,qBAA4C,UAAU;CACjE,MAAM,EAAE,aAAa;CACrB,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC1B;CACmB,CAAA;AAE1B"}
@@ -3,18 +3,29 @@
3
3
  import { propsContext, usePropsContext } from "../propsContext.mjs";
4
4
  import { addNestingLevel } from "../nestedPropsContext/lib.mjs";
5
5
  import mergePropsContext from "../mergePropsContext.mjs";
6
- import { memo, useMemo } from "react";
6
+ import isPlainObjectDeepEqual from "../../object/isPlainObjectDeepEqual.mjs";
7
+ import { memo, useMemo, useRef } from "react";
7
8
  import { jsx } from "react/jsx-runtime";
8
9
  //#region src/lib/propsContext/components/PropsContextProvider.tsx
9
10
  var Provider = memo(propsContext.Provider);
10
11
  Provider.displayName = "PropsContextProviderInner";
12
+ var useStablePropsContext = (props) => {
13
+ const stableProps = useRef(props);
14
+ if (!isPlainObjectDeepEqual(stableProps.current, props)) stableProps.current = props;
15
+ return stableProps.current;
16
+ };
11
17
  var PropsContextProvider = memo((props) => {
12
18
  const { props: providedProps, dependencies = [], children } = props;
13
19
  const parentPropsContext = usePropsContext();
20
+ const stableProvidedProps = useStablePropsContext(providedProps);
14
21
  const propsWithParentPropsContext = useMemo(() => {
15
- const propsWithNestingLevel = addNestingLevel(providedProps);
22
+ const propsWithNestingLevel = addNestingLevel(stableProvidedProps);
16
23
  return mergePropsContext(parentPropsContext, propsWithNestingLevel);
17
- }, [parentPropsContext, ...dependencies]);
24
+ }, [
25
+ parentPropsContext,
26
+ stableProvidedProps,
27
+ ...dependencies
28
+ ]);
18
29
  return /* @__PURE__ */ jsx(Provider, {
19
30
  value: propsWithParentPropsContext,
20
31
  children
@@ -1 +1 @@
1
- {"version":3,"file":"PropsContextProvider.mjs","names":[],"sources":["../../../../../../../../src/lib/propsContext/components/PropsContextProvider.tsx"],"sourcesContent":["import mergePropsContext from \"@/lib/propsContext/mergePropsContext\";\nimport { addNestingLevel } from \"@/lib/propsContext/nestedPropsContext/lib\";\nimport { propsContext, usePropsContext } from \"@/lib/propsContext/propsContext\";\nimport type { PropsContext as PropsContextShape } from \"@/lib/propsContext/types\";\nimport type { DependencyList, FC, PropsWithChildren } from \"react\";\nimport { memo, useMemo } from \"react\";\n\ninterface Props extends PropsWithChildren {\n props: PropsContextShape;\n dependencies?: DependencyList;\n}\n\nconst Provider = memo(propsContext.Provider);\nProvider.displayName = \"PropsContextProviderInner\";\n\nexport const PropsContextProvider: FC<Props> = memo((props) => {\n const { props: providedProps, dependencies = [], children } = props;\n\n const parentPropsContext = usePropsContext();\n\n const propsWithParentPropsContext = useMemo(() => {\n const propsWithNestingLevel = addNestingLevel(providedProps);\n return mergePropsContext(parentPropsContext, propsWithNestingLevel);\n }, [parentPropsContext, ...dependencies]);\n\n return <Provider value={propsWithParentPropsContext}>{children}</Provider>;\n});\n\nPropsContextProvider.displayName = \"PropsContextProvider\";\n\nexport default PropsContextProvider;\n"],"mappings":";;;;;;;;AAYA,IAAM,WAAW,KAAK,aAAa,QAAQ;AAC3C,SAAS,cAAc;AAEvB,IAAa,uBAAkC,MAAM,UAAU;CAC7D,MAAM,EAAE,OAAO,eAAe,eAAe,CAAC,GAAG,aAAa;CAE9D,MAAM,qBAAqB,gBAAgB;CAE3C,MAAM,8BAA8B,cAAc;EAChD,MAAM,wBAAwB,gBAAgB,aAAa;EAC3D,OAAO,kBAAkB,oBAAoB,qBAAqB;CACpE,GAAG,CAAC,oBAAoB,GAAG,YAAY,CAAC;CAExC,OAAO,oBAAC,UAAD;EAAU,OAAO;EAA8B;CAAmB,CAAA;AAC3E,CAAC;AAED,qBAAqB,cAAc"}
1
+ {"version":3,"file":"PropsContextProvider.mjs","names":[],"sources":["../../../../../../../../src/lib/propsContext/components/PropsContextProvider.tsx"],"sourcesContent":["import mergePropsContext from \"@/lib/propsContext/mergePropsContext\";\nimport { addNestingLevel } from \"@/lib/propsContext/nestedPropsContext/lib\";\nimport { propsContext, usePropsContext } from \"@/lib/propsContext/propsContext\";\nimport { isPlainObjectDeepEqual } from \"@/lib/object/isPlainObjectDeepEqual\";\nimport type { PropsContext as PropsContextShape } from \"@/lib/propsContext/types\";\nimport type { DependencyList, FC, PropsWithChildren } from \"react\";\nimport { memo, useMemo, useRef } from \"react\";\n\ninterface Props extends PropsWithChildren {\n props: PropsContextShape;\n dependencies?: DependencyList;\n}\n\nconst Provider = memo(propsContext.Provider);\nProvider.displayName = \"PropsContextProviderInner\";\n\nconst useStablePropsContext = (props: PropsContextShape) => {\n const stableProps = useRef(props);\n if (!isPlainObjectDeepEqual(stableProps.current, props)) {\n stableProps.current = props;\n }\n return stableProps.current;\n};\n\nexport const PropsContextProvider: FC<Props> = memo((props) => {\n const { props: providedProps, dependencies = [], children } = props;\n\n const parentPropsContext = usePropsContext();\n const stableProvidedProps = useStablePropsContext(providedProps);\n\n const propsWithParentPropsContext = useMemo(() => {\n const propsWithNestingLevel = addNestingLevel(stableProvidedProps);\n return mergePropsContext(parentPropsContext, propsWithNestingLevel);\n }, [parentPropsContext, stableProvidedProps, ...dependencies]);\n\n return <Provider value={propsWithParentPropsContext}>{children}</Provider>;\n});\n\nPropsContextProvider.displayName = \"PropsContextProvider\";\n\nexport default PropsContextProvider;\n"],"mappings":";;;;;;;;;AAaA,IAAM,WAAW,KAAK,aAAa,QAAQ;AAC3C,SAAS,cAAc;AAEvB,IAAM,yBAAyB,UAA6B;CAC1D,MAAM,cAAc,OAAO,KAAK;CAChC,IAAI,CAAC,uBAAuB,YAAY,SAAS,KAAK,GACpD,YAAY,UAAU;CAExB,OAAO,YAAY;AACrB;AAEA,IAAa,uBAAkC,MAAM,UAAU;CAC7D,MAAM,EAAE,OAAO,eAAe,eAAe,CAAC,GAAG,aAAa;CAE9D,MAAM,qBAAqB,gBAAgB;CAC3C,MAAM,sBAAsB,sBAAsB,aAAa;CAE/D,MAAM,8BAA8B,cAAc;EAChD,MAAM,wBAAwB,gBAAgB,mBAAmB;EACjE,OAAO,kBAAkB,oBAAoB,qBAAqB;CACpE,GAAG;EAAC;EAAoB;EAAqB,GAAG;CAAY,CAAC;CAE7D,OAAO,oBAAC,UAAD;EAAU,OAAO;EAA8B;CAAmB,CAAA;AAC3E,CAAC;AAED,qBAAqB,cAAc"}
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Compares plain objects recursively and every other value by identity.
3
+ * Functions, arrays, class instances, React elements and ref objects (`{
4
+ * current }`) only count as equal when they are the same value, so a value
5
+ * created during render counts as a change.
6
+ */
7
+ export declare const isPlainObjectDeepEqual: (first: unknown, second: unknown) => boolean;
8
+ export default isPlainObjectDeepEqual;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mittwald/flow-react-components",
3
- "version": "1.6.0-next.43",
3
+ "version": "1.6.0-next.45",
4
4
  "type": "module",
5
5
  "description": "A React implementation of Flow, mittwald’s design system",
6
6
  "homepage": "https://flow.mittwald.de",
@@ -84,9 +84,9 @@
84
84
  "@internationalized/string-compiler": "^3.4.1",
85
85
  "@lezer/common": "^1.5.2",
86
86
  "@lezer/highlight": "^1.2.3",
87
- "@mittwald/flow-icons": "^1.6.0-next.43",
87
+ "@mittwald/flow-icons": "^1.6.0-next.45",
88
88
  "@mittwald/password-tools-js": "^3.0.0",
89
- "@mittwald/react-tunnel": "^1.6.0-next.43",
89
+ "@mittwald/react-tunnel": "^1.6.0-next.45",
90
90
  "@mittwald/react-use-promise": "^4.2.2",
91
91
  "@react-aria/form": "^3.2.1",
92
92
  "@react-aria/i18n": "^3.13.1",
@@ -139,13 +139,13 @@
139
139
  "@internationalized/date": "^3.12.3",
140
140
  "@lezer/generator": "^1.8.0",
141
141
  "@lezer/lr": "^1.4.10",
142
- "@mittwald/flow-components-base": "1.6.0-next.43",
143
- "@mittwald/flow-core": "1.6.0-next.43",
144
- "@mittwald/flow-design-tokens": "1.6.0-next.43",
145
- "@mittwald/flow-icons-base": "1.6.0-next.43",
142
+ "@mittwald/flow-components-base": "1.6.0-next.45",
143
+ "@mittwald/flow-core": "1.6.0-next.45",
144
+ "@mittwald/flow-design-tokens": "1.6.0-next.45",
145
+ "@mittwald/flow-icons-base": "1.6.0-next.45",
146
146
  "@mittwald/react-use-promise": "^4.2.2",
147
147
  "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
148
- "@mittwald/typescript-config": "1.6.0-next.43",
148
+ "@mittwald/typescript-config": "1.6.0-next.45",
149
149
  "@nx/storybook": "^22.7.6",
150
150
  "@storybook/addon-a11y": "^10.5.10",
151
151
  "@storybook/addon-actions": "^9.0.8",
@@ -199,7 +199,7 @@
199
199
  },
200
200
  "peerDependencies": {
201
201
  "@internationalized/date": "^3.12.2",
202
- "@mittwald/flow-icons-pro": "1.6.0-next.43",
202
+ "@mittwald/flow-icons-pro": "1.6.0-next.45",
203
203
  "@mittwald/react-use-promise": "^4.2.2",
204
204
  "next": "^16.2.3",
205
205
  "react": "^19.2.0",
@@ -223,5 +223,5 @@
223
223
  "browserslist": [
224
224
  "baseline widely available"
225
225
  ],
226
- "gitHead": "d8d651eef0bb739de08ff8330db93ea9d399a7ad"
226
+ "gitHead": "04fb1fb7e904c810cb599e8773f9d6833a216999"
227
227
  }