@mittwald/flow-react-components 0.2.0-alpha.158 → 0.2.0-alpha.159

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.2.0-alpha.159](https://github.com/mittwald/flow/compare/0.2.0-alpha.158...0.2.0-alpha.159) (2025-04-25)
+
+### Bug Fixes
+
+* allow context-overwrite of nullish React children ([#1403](https://github.com/mittwald/flow/issues/1403)) ([5ae6675](https://github.com/mittwald/flow/commit/5ae667568e6e8099fe4b689a95048431904cdbbf))
+
 # [0.2.0-alpha.158](https://github.com/mittwald/flow/compare/0.2.0-alpha.157...0.2.0-alpha.158) (2025-04-24)
 
 ### Features

package/dist/assets/doc-properties.json

@@ -159832,9 +159832,9 @@
       "flr-generate": "all",
       "flr-clear-props-context": ""
     },
-    "filePath": "/home/runner/work/flow/flow/packages/components/src/components/CheckboxButton/CheckboxButton.tsx",
+    "filePath": "/home/runner/work/flow/flow/packages/components/src/components/Checkbox/Checkbox.tsx",
     "description": "",
-    "displayName": "CheckboxButton",
+    "displayName": "Checkbox",
     "methods": [],
     "props": {
       "onFocus": {
@@ -160564,9 +160564,9 @@
       "flr-generate": "all",
       "flr-clear-props-context": ""
     },
-    "filePath": "/home/runner/work/flow/flow/packages/components/src/components/Checkbox/Checkbox.tsx",
+    "filePath": "/home/runner/work/flow/flow/packages/components/src/components/CheckboxButton/CheckboxButton.tsx",
     "description": "",
-    "displayName": "Checkbox",
+    "displayName": "CheckboxButton",
     "methods": [],
     "props": {
       "onFocus": {

package/dist/js/components/src/lib/hooks/useProps.mjs

@@ -7,22 +7,28 @@ import { useContextProps } from '../propsContext/propsContext.mjs';
 import { wrapChildrenWithNestedPropsContext } from '../propsContext/nestedPropsContext/wrapChildrenWithNestedPropsContext.mjs';
 import { omitBy } from 'remeda';
 import { isDynamicProp } from '../propsContext/dynamicProps/isDynamicProp.mjs';
+import { areChildrenEmpty } from '../react/areChildrenEmpty.mjs';
 
 const useProps = (component, localProps) => {
+  if ("children" in localProps) {
+    if (areChildrenEmpty(localProps.children)) {
+      localProps = { ...localProps };
+      delete localProps["children"];
+    }
+  }
   const propsContext = useContextProps();
   const contextProps = propsContext[component];
-  const resolvedDynamicProps = contextProps ? resolveDynamicProps(contextProps, localProps) : void 0;
-  const withNestedPropsContext = contextProps ? wrapChildrenWithNestedPropsContext(contextProps, localProps) : void 0;
+  const withResolvedDynamicProps = contextProps ? resolveDynamicProps(contextProps, localProps) : void 0;
+  const withNestedPropsContextProvider = contextProps ? wrapChildrenWithNestedPropsContext(contextProps, localProps) : void 0;
+  const withoutNestedAndDynamicProps = contextProps ? omitBy(
+    contextProps,
+    (value, key) => propsContextSupportingComponents.includes(key) || isDynamicProp(value)
+  ) : void 0;
   return mergeProps(
-    contextProps ? omitBy(
-      contextProps,
-      (value, key) => propsContextSupportingComponents.includes(
-        key
-      ) || isDynamicProp(value)
-    ) : contextProps,
+    withoutNestedAndDynamicProps,
     localProps,
-    resolvedDynamicProps,
-    withNestedPropsContext
+    withResolvedDynamicProps,
+    withNestedPropsContextProvider
   );
 };
 

package/dist/js/components/src/lib/hooks/useProps.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useProps.mjs","sources":["../../../../../../src/lib/hooks/useProps.ts"],"sourcesContent":["import type {\n  FlowComponentName,\n  FlowComponentProps,\n} from \"@/components/propTypes\";\nimport { propsContextSupportingComponents } from \"@/components/propTypes\";\nimport { mergeProps } from \"@react-aria/utils\";\nimport { resolveDynamicProps } from \"@/lib/propsContext/dynamicProps/resolveDynamicProps\";\nimport { useContextProps } from \"@/lib/propsContext/propsContext\";\nimport wrapChildrenWithNestedPropsContext from \"@/lib/propsContext/nestedPropsContext/wrapChildrenWithNestedPropsContext\";\nimport { omitBy } from \"remeda\";\nimport type { PropsContext } from \"@/lib/propsContext/types\";\nimport isDynamicProp from \"@/lib/propsContext/dynamicProps/isDynamicProp\";\n\nexport const useProps = <C extends FlowComponentName>(\n  component: C,\n  localProps: FlowComponentProps<C>,\n): FlowComponentProps<C> => {\n  const propsContext = useContextProps();\n\n  const contextProps = propsContext[component] as FlowComponentProps<C> &\n    PropsContext;\n\n  const resolvedDynamicProps = contextProps\n    ? resolveDynamicProps(contextProps, localProps)\n    : undefined;\n\n  const withNestedPropsContext = contextProps\n    ? wrapChildrenWithNestedPropsContext(contextProps, localProps)\n    : undefined;\n\n  return mergeProps(\n    contextProps\n      ? omitBy<FlowComponentProps<C>>(\n          contextProps,\n          (value, key) =>\n            propsContextSupportingComponents.includes(\n              key as FlowComponentName,\n            ) || isDynamicProp(value),\n        )\n      : contextProps,\n    localProps,\n    resolvedDynamicProps,\n    withNestedPropsContext,\n  ) as FlowComponentProps<C>;\n};\n\nexport default useProps;\n"],"names":[],"mappings":";;;;;;;;AAaa,MAAA,QAAA,GAAW,CACtB,SAAA,EACA,UAC0B,KAAA;AAC1B,EAAA,MAAM,eAAe,eAAgB,EAAA;AAErC,EAAM,MAAA,YAAA,GAAe,aAAa,SAAS,CAAA;AAG3C,EAAA,MAAM,oBAAuB,GAAA,YAAA,GACzB,mBAAoB,CAAA,YAAA,EAAc,UAAU,CAC5C,GAAA,MAAA;AAEJ,EAAA,MAAM,sBAAyB,GAAA,YAAA,GAC3B,kCAAmC,CAAA,YAAA,EAAc,UAAU,CAC3D,GAAA,MAAA;AAEJ,EAAO,OAAA,UAAA;AAAA,IACL,YACI,GAAA,MAAA;AAAA,MACE,YAAA;AAAA,MACA,CAAC,KAAO,EAAA,GAAA,KACN,gCAAiC,CAAA,QAAA;AAAA,QAC/B;AAAA,OACF,IAAK,cAAc,KAAK;AAAA,KAE5B,GAAA,YAAA;AAAA,IACJ,UAAA;AAAA,IACA,oBAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"useProps.mjs","sources":["../../../../../../src/lib/hooks/useProps.ts"],"sourcesContent":["import type {\n  FlowComponentName,\n  FlowComponentProps,\n} from \"@/components/propTypes\";\nimport { propsContextSupportingComponents } from \"@/components/propTypes\";\nimport { mergeProps } from \"@react-aria/utils\";\nimport { resolveDynamicProps } from \"@/lib/propsContext/dynamicProps/resolveDynamicProps\";\nimport { useContextProps } from \"@/lib/propsContext/propsContext\";\nimport wrapChildrenWithNestedPropsContext from \"@/lib/propsContext/nestedPropsContext/wrapChildrenWithNestedPropsContext\";\nimport { omitBy } from \"remeda\";\nimport type { PropsContext } from \"@/lib/propsContext/types\";\nimport isDynamicProp from \"@/lib/propsContext/dynamicProps/isDynamicProp\";\nimport { areChildrenEmpty } from \"@/lib/react/areChildrenEmpty\";\n\nexport const useProps = <C extends FlowComponentName>(\n  component: C,\n  localProps: FlowComponentProps<C>,\n): FlowComponentProps<C> => {\n  if (\"children\" in localProps) {\n    if (areChildrenEmpty(localProps.children)) {\n      localProps = { ...localProps };\n      delete localProps[\"children\"];\n    }\n  }\n\n  const propsContext = useContextProps();\n\n  const contextProps = propsContext[component] as\n    | (FlowComponentProps<C> & PropsContext)\n    | undefined;\n\n  const withResolvedDynamicProps = contextProps\n    ? resolveDynamicProps(contextProps, localProps)\n    : undefined;\n\n  const withNestedPropsContextProvider = contextProps\n    ? wrapChildrenWithNestedPropsContext(contextProps, localProps)\n    : undefined;\n\n  const withoutNestedAndDynamicProps = contextProps\n    ? omitBy<FlowComponentProps<C>>(\n        contextProps,\n        (value, key) =>\n          propsContextSupportingComponents.includes(key as FlowComponentName) ||\n          isDynamicProp(value),\n      )\n    : undefined;\n\n  return mergeProps(\n    withoutNestedAndDynamicProps,\n    localProps,\n    withResolvedDynamicProps,\n    withNestedPropsContextProvider,\n  ) as FlowComponentProps<C>;\n};\n\nexport default useProps;\n"],"names":[],"mappings":";;;;;;;;;AAca,MAAA,QAAA,GAAW,CACtB,SAAA,EACA,UAC0B,KAAA;AAC1B,EAAA,IAAI,cAAc,UAAY,EAAA;AAC5B,IAAI,IAAA,gBAAA,CAAiB,UAAW,CAAA,QAAQ,CAAG,EAAA;AACzC,MAAa,UAAA,GAAA,EAAE,GAAG,UAAW,EAAA;AAC7B,MAAA,OAAO,WAAW,UAAU,CAAA;AAAA;AAC9B;AAGF,EAAA,MAAM,eAAe,eAAgB,EAAA;AAErC,EAAM,MAAA,YAAA,GAAe,aAAa,SAAS,CAAA;AAI3C,EAAA,MAAM,wBAA2B,GAAA,YAAA,GAC7B,mBAAoB,CAAA,YAAA,EAAc,UAAU,CAC5C,GAAA,MAAA;AAEJ,EAAA,MAAM,8BAAiC,GAAA,YAAA,GACnC,kCAAmC,CAAA,YAAA,EAAc,UAAU,CAC3D,GAAA,MAAA;AAEJ,EAAA,MAAM,+BAA+B,YACjC,GAAA,MAAA;AAAA,IACE,YAAA;AAAA,IACA,CAAC,OAAO,GACN,KAAA,gCAAA,CAAiC,SAAS,GAAwB,CAAA,IAClE,cAAc,KAAK;AAAA,GAEvB,GAAA,MAAA;AAEJ,EAAO,OAAA,UAAA;AAAA,IACL,4BAAA;AAAA,IACA,UAAA;AAAA,IACA,wBAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/dist/js/components/src/lib/react/areChildrenEmpty.mjs

@@ -0,0 +1,23 @@
+"use client"
+/* */
+import React from 'react';
+
+const isNullish = (children) => children === null || children === void 0 || children === false;
+const areChildrenEmpty = (children) => {
+  if (isNullish(children)) {
+    return true;
+  }
+  if (Array.isArray(children)) {
+    return children.length === 0 || children.every(isNullish);
+  }
+  if (typeof children === "string" || typeof children === "number") {
+    return false;
+  }
+  if (React.isValidElement(children)) {
+    return false;
+  }
+  return true;
+};
+
+export { areChildrenEmpty };
+//# sourceMappingURL=areChildrenEmpty.mjs.map

package/dist/js/components/src/lib/react/areChildrenEmpty.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"areChildrenEmpty.mjs","sources":["../../../../../../src/lib/react/areChildrenEmpty.ts"],"sourcesContent":["import React from \"react\";\n\nconst isNullish = (children: React.ReactNode) =>\n  children === null || children === undefined || children === false;\n\nexport const areChildrenEmpty = (children: React.ReactNode): boolean => {\n  if (isNullish(children)) {\n    return true;\n  }\n\n  if (Array.isArray(children)) {\n    return children.length === 0 || children.every(isNullish);\n  }\n\n  if (typeof children === \"string\" || typeof children === \"number\") {\n    return false;\n  }\n\n  if (React.isValidElement(children)) {\n    return false;\n  }\n\n  return true;\n};\n"],"names":[],"mappings":";;AAEA,MAAM,YAAY,CAAC,QAAA,KACjB,aAAa,IAAQ,IAAA,QAAA,KAAa,UAAa,QAAa,KAAA,KAAA;AAEjD,MAAA,gBAAA,GAAmB,CAAC,QAAuC,KAAA;AACtE,EAAI,IAAA,SAAA,CAAU,QAAQ,CAAG,EAAA;AACvB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,QAAQ,CAAG,EAAA;AAC3B,IAAA,OAAO,QAAS,CAAA,MAAA,KAAW,CAAK,IAAA,QAAA,CAAS,MAAM,SAAS,CAAA;AAAA;AAG1D,EAAA,IAAI,OAAO,QAAA,KAAa,QAAY,IAAA,OAAO,aAAa,QAAU,EAAA;AAChE,IAAO,OAAA,KAAA;AAAA;AAGT,EAAI,IAAA,KAAA,CAAM,cAAe,CAAA,QAAQ,CAAG,EAAA;AAClC,IAAO,OAAA,KAAA;AAAA;AAGT,EAAO,OAAA,IAAA;AACT;;;;"}

package/dist/types/lib/hooks/useProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useProps.d.ts","sourceRoot":"","sources":["../../../../src/lib/hooks/useProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,wBAAwB,CAAC;AAUhC,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,iBAAiB,EAClD,WAAW,CAAC,EACZ,YAAY,kBAAkB,CAAC,CAAC,CAAC,KAChC,kBAAkB,CAAC,CAAC,CA4BtB,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"useProps.d.ts","sourceRoot":"","sources":["../../../../src/lib/hooks/useProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,wBAAwB,CAAC;AAWhC,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,iBAAiB,EAClD,WAAW,CAAC,EACZ,YAAY,kBAAkB,CAAC,CAAC,CAAC,KAChC,kBAAkB,CAAC,CAAC,CAqCtB,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/types/lib/hooks/useProps.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useProps.test.d.ts","sourceRoot":"","sources":["../../../../src/lib/hooks/useProps.test.tsx"],"names":[],"mappings":""}

package/dist/types/lib/react/areChildrenEmpty.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+export declare const areChildrenEmpty: (children: React.ReactNode) => boolean;
+//# sourceMappingURL=areChildrenEmpty.d.ts.map

package/dist/types/lib/react/areChildrenEmpty.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"areChildrenEmpty.d.ts","sourceRoot":"","sources":["../../../../src/lib/react/areChildrenEmpty.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,gBAAgB,GAAI,UAAU,KAAK,CAAC,SAAS,KAAG,OAkB5D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "0.2.0-alpha.158",
+  "version": "0.2.0-alpha.159",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://mittwald.github.io/flow",
@@ -53,7 +53,7 @@
   "dependencies": {
     "@chakra-ui/live-region": "^2.1.0",
     "@internationalized/string-compiler": "^3.2.6",
-    "@mittwald/react-tunnel": "0.2.0-alpha.158",
+    "@mittwald/react-tunnel": "0.2.0-alpha.159",
     "@mittwald/react-use-promise": "^3.0.4",
     "@react-aria/form": "^3.0.14",
     "@react-aria/utils": "^3.28.1",
@@ -92,7 +92,7 @@
   "devDependencies": {
     "@faker-js/faker": "^9.6.0",
     "@internationalized/date": "^3.7.0",
-    "@mittwald/flow-design-tokens": "0.2.0-alpha.158",
+    "@mittwald/flow-design-tokens": "0.2.0-alpha.159",
     "@mittwald/react-use-promise": "^2.6.0",
     "@mittwald/remote-dom-react": "1.2.2-mittwald.3",
     "@mittwald/typescript-config": "",
@@ -173,5 +173,5 @@
       "optional": true
     }
   },
-  "gitHead": "26ffbb99c9b9ec91bcbf0d9b3dc04f94101f9203"
+  "gitHead": "7ec2170b59dd7e302dda62fc269aadcb2c410033"
 }

package/dist/types/lib/propsContext/useProps.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useProps.test.d.ts","sourceRoot":"","sources":["../../../../src/lib/propsContext/useProps.test.tsx"],"names":[],"mappings":""}