@fluentui-react-native/framework-base 0.2.1 → 0.3.0

package/CHANGELOG.json

@@ -2,7 +2,7 @@
   "name": "@fluentui-react-native/framework-base",
   "entries": [
     {
-      "date": "Tue, 05 Aug 2025 18:46:08 GMT",
+      "date": "Tue, 05 Aug 2025 18:50:43 GMT",
       "version": "0.2.1",
       "tag": "@fluentui-react-native/framework-base_v0.2.1",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,45 @@
 # Change Log - @fluentui-react-native/framework-base
 
-<!-- This log was last generated on Tue, 05 Aug 2025 18:46:08 GMT and should not be manually modified. -->
+## 0.3.0
+
+### Minor Changes
+
+- d7adbdd: # Migration from Beachball to Changesets
+
+  This changeset represents the migration from Beachball to Changesets for version management and consolidates all changes from 440+ beachball change files that were in the `change/` directory.
+
+  All 75 affected packages receive a minor version bump to acknowledge the accumulated changes from the beachball era.
+
+  ## What Changed
+
+  Going forward, all version management uses Changesets via `yarn changeset`. The following beachball infrastructure has been removed:
+
+  - ❌ 440+ beachball change files from `change/` directory
+  - ❌ `beachball` package dependency
+  - ❌ Beachball scripts from `package.json`
+  - ❌ `beachball.config.js` configuration file
+  - ❌ Beachball publish steps from Azure Pipelines
+
+  ## New Workflow
+
+  ✅ **Create changes**: Run `yarn changeset` to document changes
+  ✅ **Version bump PRs**: Automatically created by GitHub Actions
+  ✅ **Publishing**: Handled by Azure Pipelines using `changeset publish`
+  ✅ **Validation**: CI validates changesets and blocks major version bumps
+
+  For details, see `CHANGESETS_SETUP.md` and `CONTRIBUTING.md`.
+
+### Patch Changes
+
+- d1d8c26: We were pinning @types/react and react-native-macos via resolutions. This fixes that which uncovered a bunch of type inconsistencies that needed to be addressed.
+
+<!-- This log was last generated on Tue, 05 Aug 2025 18:50:43 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
 ## 0.2.1
 
-Tue, 05 Aug 2025 18:46:08 GMT
+Tue, 05 Aug 2025 18:50:43 GMT
 
 ### Patches
 

package/README.md

@@ -16,4 +16,21 @@ The shared patterns for rendering components, as well as the JSX handlers have b
 
 ## Type Helpers
 
-- TODO: There are a number of issues with the way types are handled in the larger fluentui-react-native project, helpers and core types will be added here to help solve inference issues, avoid hard typecasts, and help the project eventually move to typescript 5.x.
+This package provides several TypeScript utility types:
+
+- `PropsOf<TComponent>` - Extract props from a React component type
+- `FunctionComponent<TProps>` - A function component type without the children handling complications of React.FC
+- `DirectComponent<TProps>` - A function component marked for direct rendering
+- `PhasedComponent<TProps>` - A component with two-phase rendering support
+- `SlotFn<TProps>` - Slot function type used in the composition framework
+- `FinalRender<TProps>` - The final rendering signature for phased components
+
+## JSX Runtime
+
+This package exports a custom JSX runtime at `@fluentui-react-native/framework-base/jsx-runtime`. Use it in your component files with:
+
+```tsx
+/** @jsxImportSource @fluentui-react-native/framework-base */
+```
+
+The custom runtime enables automatic element flattening for direct and phased components.

package/babel.config.js

@@ -1 +1 @@
-module.exports = require('@fluentui-react-native/babel-config/babel.react.config.js');
+module.exports = require('@fluentui-react-native/react-configs/babel.react.config.js');

package/jsx-runtime.js

@@ -0,0 +1 @@
+module.exports = require('./lib-commonjs/jsx-runtime.js');

package/lib/component-patterns/directComponent.d.ts

@@ -0,0 +1,7 @@
+import type { FunctionComponent } from './render.types';
+/**
+ * @param component functional component, usually a closure, to make into a direct component
+ * @return the same component with the direct component flag set, return type is a pure function component
+ */
+export declare function directComponent<TProps>(component: FunctionComponent<TProps>): FunctionComponent<TProps>;
+//# sourceMappingURL=directComponent.d.ts.map

package/lib/component-patterns/directComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"directComponent.d.ts","sourceRoot":"","sources":["../../src/component-patterns/directComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,SAAS,EAAE,iBAAiB,CAAC,MAAM,CAAC,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAEvG"}

package/lib/component-patterns/directComponent.js

@@ -0,0 +1,8 @@
+/**
+ * @param component functional component, usually a closure, to make into a direct component
+ * @return the same component with the direct component flag set, return type is a pure function component
+ */
+export function directComponent(component) {
+  return Object.assign(component, { _callDirect: true });
+}
+//# sourceMappingURL=directComponent.js.map

package/lib/component-patterns/directComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"directComponent.js","sourceRoot":"","sources":["../../src/component-patterns/directComponent.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,UAAU,eAAe,CAAS,SAAoC,EAA6B;IACvG,OAAO,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC;AAAA,CACxD"}

package/lib/component-patterns/extract.d.ts

@@ -0,0 +1,22 @@
+import type { ViewStyle, TextStyle, ImageStyle } from 'react-native';
+type StyleTypes = ViewStyle | TextStyle | ImageStyle;
+/**
+ * Extract the props from a React element. If the element is undefined, undefined will be returned.
+ * @param element The React element from which to extract the props.
+ * @returns The extracted props or undefined if the element is undefined.
+ */
+export declare function extractProps<T extends object>(element?: React.ReactElement): T | undefined;
+/**
+ * Extract the children from a React element. If the element is undefined, undefined will be returned.
+ * @param element The React element from which to extract the children.
+ * @returns The extracted children or undefined if the element is undefined.
+ */
+export declare function extractChildren(element?: React.ReactElement): React.ReactNode | undefined;
+/**
+ * Extract a style object from a React element. If the element is undefined or does not have a style prop, an empty object will be returned.
+ * @param element The React element from which to extract the style.
+ * @returns The extracted style object or an empty object if not available.
+ */
+export declare function extractStyle<T extends StyleTypes = ViewStyle>(element?: React.ReactElement): T;
+export {};
+//# sourceMappingURL=extract.d.ts.map

package/lib/component-patterns/extract.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extract.d.ts","sourceRoot":"","sources":["../../src/component-patterns/extract.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAErE,KAAK,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAIrD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,CAAC,GAAG,SAAS,CAE1F;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,GAAG,SAAS,CAEzF;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,UAAU,GAAG,SAAS,EAAE,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,CAAC,CAE9F"}

package/lib/component-patterns/extract.js

@@ -0,0 +1,25 @@
+/**
+ * Extract the props from a React element. If the element is undefined, undefined will be returned.
+ * @param element The React element from which to extract the props.
+ * @returns The extracted props or undefined if the element is undefined.
+ */
+export function extractProps(element) {
+  return element ? element.props : undefined;
+}
+/**
+ * Extract the children from a React element. If the element is undefined, undefined will be returned.
+ * @param element The React element from which to extract the children.
+ * @returns The extracted children or undefined if the element is undefined.
+ */
+export function extractChildren(element) {
+  return extractProps(element)?.children;
+}
+/**
+ * Extract a style object from a React element. If the element is undefined or does not have a style prop, an empty object will be returned.
+ * @param element The React element from which to extract the style.
+ * @returns The extracted style object or an empty object if not available.
+ */
+export function extractStyle(element) {
+  return extractProps(element)?.style ?? {};
+}
+//# sourceMappingURL=extract.js.map

package/lib/component-patterns/extract.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extract.js","sourceRoot":"","sources":["../../src/component-patterns/extract.ts"],"names":[],"mappings":"AAMA;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAmB,OAA4B,EAAiB;IAC1F,OAAO,OAAO,CAAC,CAAC,CAAE,OAAO,CAAC,KAAW,CAAC,CAAC,CAAC,SAAS,CAAC;AAAA,CACnD;AAED;;;;GAIG;AACH,MAAM,UAAU,eAAe,CAAC,OAA4B,EAA+B;IACzF,OAAO,YAAY,CAAoB,OAAO,CAAC,EAAE,QAAQ,CAAC;AAAA,CAC3D;AAED;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAmC,OAA4B,EAAK;IAC9F,OAAQ,YAAY,CAAiB,OAAO,CAAC,EAAE,KAAW,IAAK,EAAQ,CAAC;AAAA,CACzE"}

package/lib/component-patterns/phasedComponent.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { PhasedRender, FunctionComponent } from './render.types';
+/**
+ * Extract the phased render function from a component, if it has one.
+ * Handles both the newer PhasedComponent pattern (_phasedRender) and the legacy
+ * ComposableFunction pattern (_staged) for backward compatibility.
+ *
+ * @param component - The component to extract the phased render from
+ * @returns The phased render function if present, undefined otherwise
+ */
+export declare function getPhasedRender<TProps>(component: React.ComponentType<TProps>): PhasedRender<TProps> | undefined;
+/**
+ * Take a phased render function and make a real component out of it, attaching the phased render function
+ * so it can be split if used in that manner.
+ * @param getInnerPhase - phased render function to wrap into a staged component
+ */
+export declare function phasedComponent<TProps>(getInnerPhase: PhasedRender<TProps>): FunctionComponent<TProps>;
+//# sourceMappingURL=phasedComponent.d.ts.map

package/lib/component-patterns/phasedComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"phasedComponent.d.ts","sourceRoot":"","sources":["../../src/component-patterns/phasedComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAuC,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAI3G;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,GAAG,YAAY,CAAC,MAAM,CAAC,GAAG,SAAS,CAuBhH;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,aAAa,EAAE,YAAY,CAAC,MAAM,CAAC,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAUtG"}

package/lib/component-patterns/phasedComponent.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { renderForJsxRuntime } from './render';
+/**
+ * Extract the phased render function from a component, if it has one.
+ * Handles both the newer PhasedComponent pattern (_phasedRender) and the legacy
+ * ComposableFunction pattern (_staged) for backward compatibility.
+ *
+ * @param component - The component to extract the phased render from
+ * @returns The phased render function if present, undefined otherwise
+ */
+export function getPhasedRender(component) {
+  // only a function component can have a phased render
+  if (typeof component === 'function') {
+    // if this has a phased render function, return it
+    if (component._phasedRender) {
+      return component._phasedRender;
+    } else if (component._staged) {
+      // for backward compatibility check for staged render and return a wrapper that maps the signature
+      const staged = component._staged;
+      return (props) => {
+        const { children, ...rest } = props;
+        const inner = staged(rest, ...React.Children.toArray(children));
+        // staged render functions were not consistently marking contents as composable, though they were treated
+        // as such in useHook. To maintain compatibility we mark the returned function as composable here. This was
+        // dangerous, but this shim is necessary for backward compatibility. The newer pattern is explicit about this.
+        if (typeof inner === 'function' && !inner._canCompose) {
+          return Object.assign(inner, { _canCompose: true });
+        }
+        return inner;
+      };
+    }
+  }
+  return undefined;
+}
+/**
+ * Take a phased render function and make a real component out of it, attaching the phased render function
+ * so it can be split if used in that manner.
+ * @param getInnerPhase - phased render function to wrap into a staged component
+ */
+export function phasedComponent(getInnerPhase) {
+  return Object.assign(
+    (props) => {
+      // pull out children from props
+      const { children, ...outerProps } = props;
+      const Inner = getInnerPhase(outerProps);
+      return renderForJsxRuntime(Inner, { children });
+    },
+    { _phasedRender: getInnerPhase },
+  );
+}
+//# sourceMappingURL=phasedComponent.js.map

package/lib/component-patterns/phasedComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"phasedComponent.js","sourceRoot":"","sources":["../../src/component-patterns/phasedComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAG/C;;;;;;;GAOG;AACH,MAAM,UAAU,eAAe,CAAS,SAAsC,EAAoC;IAChH,qDAAqD;IACrD,IAAI,OAAO,SAAS,KAAK,UAAU,EAAE,CAAC;QACpC,kDAAkD;QAClD,IAAK,SAAqC,CAAC,aAAa,EAAE,CAAC;YACzD,OAAQ,SAAqC,CAAC,aAAa,CAAC;QAC9D,CAAC;aAAM,IAAK,SAAwC,CAAC,OAAO,EAAE,CAAC;YAC7D,kGAAkG;YAClG,MAAM,MAAM,GAAI,SAAwC,CAAC,OAAO,CAAC;YACjE,OAAO,CAAC,KAAa,EAAE,EAAE,CAAC;gBACxB,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAwC,CAAC;gBACvE,MAAM,KAAK,GAAG,MAAM,CAAC,IAAc,EAAE,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;gBAC1E,yGAAyG;gBACzG,2GAA2G;gBAC3G,8GAA8G;gBAC9G,IAAI,OAAO,KAAK,KAAK,UAAU,IAAI,CAAE,KAAuC,CAAC,WAAW,EAAE,CAAC;oBACzF,OAAO,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC;gBACrD,CAAC;gBACD,OAAO,KAAK,CAAC;YAAA,CACd,CAAC;QACJ,CAAC;IACH,CAAC;IACD,OAAO,SAAS,CAAC;AAAA,CAClB;AAED;;;;GAIG;AACH,MAAM,UAAU,eAAe,CAAS,aAAmC,EAA6B;IACtG,OAAO,MAAM,CAAC,MAAM,CAClB,CAAC,KAAsC,EAAE,EAAE,CAAC;QAC1C,+BAA+B;QAC/B,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;QAC1C,MAAM,KAAK,GAAG,aAAa,CAAC,UAAoB,CAAC,CAAC;QAClD,OAAO,mBAAmB,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC;IAAA,CACjD,EACD,EAAE,aAAa,EAAE,aAAa,EAAE,CACjC,CAAC;AAAA,CACH"}

package/lib/component-patterns/render.d.ts

@@ -1,8 +1,14 @@
 import React from 'react';
 import * as ReactJSX from 'react/jsx-runtime';
-import type { RenderType, RenderResult } from './render.types';
+import type { RenderType, RenderResult, DirectComponent } from './render.types';
 export type CustomRender = () => RenderResult;
-export declare function renderForJsxRuntime<TProps>(type: React.ElementType, props: React.PropsWithChildren<TProps>, key?: React.Key, jsxFn?: typeof ReactJSX.jsx): RenderResult;
+export declare function asDirectComponent<TProps>(type: RenderType): DirectComponent<TProps> | undefined;
+export declare function renderForJsxRuntime<TProps>(
+  type: React.ElementType,
+  props: React.PropsWithChildren<TProps>,
+  key?: React.Key,
+  jsxFn?: typeof ReactJSX.jsx,
+): RenderResult;
 export declare function renderForClassicRuntime<TProps>(type: RenderType, props: TProps, ...children: React.ReactNode[]): RenderResult;
 export declare const renderSlot: typeof renderForClassicRuntime;
-//# sourceMappingURL=render.d.ts.map
+//# sourceMappingURL=render.d.ts.map

package/lib/component-patterns/render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/component-patterns/render.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAC;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAA0C,MAAM,gBAAgB,CAAC;AAEvG,MAAM,MAAM,YAAY,GAAG,MAAM,YAAY,CAAC;AAgB9C,wBAAgB,mBAAmB,CAAC,MAAM,EACxC,IAAI,EAAE,KAAK,CAAC,WAAW,EACvB,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,EACtC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,EACf,KAAK,GAAE,OAAO,QAAQ,CAAC,GAAkB,GACxC,YAAY,CAad;AAED,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,GAAG,YAAY,CAW7H;AAED,eAAO,MAAM,UAAU,gCAA0B,CAAC"}
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/component-patterns/render.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAC;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,eAAe,EAAyB,MAAM,gBAAgB,CAAC;AAEvG,MAAM,MAAM,YAAY,GAAG,MAAM,YAAY,CAAC;AAE9C,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,IAAI,EAAE,UAAU,GAAG,eAAe,CAAC,MAAM,CAAC,GAAG,SAAS,CAK/F;AASD,wBAAgB,mBAAmB,CAAC,MAAM,EACxC,IAAI,EAAE,KAAK,CAAC,WAAW,EACvB,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,EACtC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,EACf,KAAK,GAAE,OAAO,QAAQ,CAAC,GAAe,GACrC,YAAY,CA4Bd;AAED,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,GAAG,YAAY,CAI7H;AAED,eAAO,MAAM,UAAU,gCAA0B,CAAC"}

package/lib/component-patterns/render.js

@@ -1,42 +1,49 @@
 import React from 'react';
 import * as ReactJSX from 'react/jsx-runtime';
-function asDirectComponent(type) {
-    if (typeof type === 'function' && type._callDirect) {
-        return type;
-    }
-    return undefined;
+export function asDirectComponent(type) {
+  if (typeof type === 'function' && type._callDirect) {
+    return type;
+  }
+  return undefined;
 }
 function asLegacyDirectComponent(type) {
-    if (typeof type === 'function' && type._canCompose) {
-        return type;
-    }
-    return undefined;
+  if (typeof type === 'function' && type._canCompose) {
+    return type;
+  }
+  return undefined;
 }
-export function renderForJsxRuntime(type, props, key, jsxFn = ReactJSX.jsx) {
-    const legacyDirect = asLegacyDirectComponent(type);
-    if (legacyDirect) {
-        const { children, ...rest } = props;
-        const newProps = { ...rest, key };
-        return legacyDirect(newProps, ...React.Children.toArray(children));
-    }
-    const directComponent = asDirectComponent(type);
-    if (directComponent) {
-        const newProps = { ...props, key };
-        return directComponent(newProps);
+export function renderForJsxRuntime(type, props, key, jsxFn = undefined) {
+  const legacyDirect = asLegacyDirectComponent(type);
+  if (legacyDirect) {
+    const { children, ...rest } = props;
+    const newProps = { ...rest, key };
+    return legacyDirect(newProps, ...React.Children.toArray(children));
+  }
+  const directComponent = asDirectComponent(type);
+  if (directComponent) {
+    const newProps = { ...props, key };
+    return directComponent(newProps);
+  }
+  // auto-detect whether to use jsx or jsxs based on number of children, 0 or 1 = jsx, more than 1 = jsxs
+  if (!jsxFn) {
+    if (React.Children.count(props.children) > 1) {
+      jsxFn = ReactJSX.jsxs;
+    } else {
+      jsxFn = ReactJSX.jsx;
     }
-    return jsxFn(type, props, key);
+  }
+  // Extract key from props to avoid React 19 warning about spreading key prop
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const { key: propsKey, ...propsWithoutKey } = props;
+  // Use explicitly passed key, or fall back to key from props
+  const finalKey = key ?? propsKey;
+  // now call the appropriate jsx function to render the component
+  return jsxFn(type, propsWithoutKey, finalKey);
 }
 export function renderForClassicRuntime(type, props, ...children) {
-    const legacyDirect = asLegacyDirectComponent(type);
-    if (legacyDirect) {
-        return legacyDirect(props, ...children);
-    }
-    const directComponent = asDirectComponent(type);
-    if (directComponent) {
-        const newProps = { ...props, children };
-        return directComponent(newProps);
-    }
-    return React.createElement(type, props, ...children);
+  // if it is a non-string type with _canCompose set just call the function directly, otherwise call createElement as normal
+  const propsWithChildren = { children, ...props };
+  return renderForJsxRuntime(type, propsWithChildren);
 }
 export const renderSlot = renderForClassicRuntime;
-//# sourceMappingURL=render.js.map
+//# sourceMappingURL=render.js.map

package/lib/component-patterns/render.js.map

@@ -1 +1 @@
-{"version":3,"file":"render.js","sourceRoot":"","sources":["../../src/component-patterns/render.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAC;AAK9C,SAAS,iBAAiB,CAAS,IAAgB;IACjD,IAAI,OAAO,IAAI,KAAK,UAAU,IAAK,IAAgC,CAAC,WAAW,EAAE;QAC/E,OAAO,IAA+B,CAAC;KACxC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,SAAS,uBAAuB,CAAS,IAAgB;IACvD,IAAI,OAAO,IAAI,KAAK,UAAU,IAAK,IAAsC,CAAC,WAAW,EAAE;QACrF,OAAO,IAAqC,CAAC;KAC9C;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,MAAM,UAAU,mBAAmB,CACjC,IAAuB,EACvB,KAAsC,EACtC,GAAe,EACf,QAA6B,QAAQ,CAAC,GAAG;IAEzC,MAAM,YAAY,GAAG,uBAAuB,CAAC,IAAI,CAAC,CAAC;IACnD,IAAI,YAAY,EAAE;QAChB,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;QACpC,MAAM,QAAQ,GAAG,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,CAAC;QAClC,OAAO,YAAY,CAAC,QAAQ,EAAE,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAiB,CAAC;KACpF;IACD,MAAM,eAAe,GAAG,iBAAiB,CAAS,IAAI,CAAC,CAAC;IACxD,IAAI,eAAe,EAAE;QACnB,MAAM,QAAQ,GAAG,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,CAAC;QACnC,OAAO,eAAe,CAAC,QAAQ,CAAC,CAAC;KAClC;IACD,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;AACjC,CAAC;AAED,MAAM,UAAU,uBAAuB,CAAS,IAAgB,EAAE,KAAa,EAAE,GAAG,QAA2B;IAC7G,MAAM,YAAY,GAAG,uBAAuB,CAAC,IAAI,CAAC,CAAC;IACnD,IAAI,YAAY,EAAE;QAChB,OAAO,YAAY,CAAC,KAAK,EAAE,GAAG,QAAQ,CAAiB,CAAC;KACzD;IACD,MAAM,eAAe,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAChD,IAAI,eAAe,EAAE;QACnB,MAAM,QAAQ,GAAG,EAAE,GAAG,KAAK,EAAE,QAAQ,EAAE,CAAC;QACxC,OAAO,eAAe,CAAC,QAAQ,CAAC,CAAC;KAClC;IACD,OAAO,KAAK,CAAC,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,CAAC;AACvD,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,uBAAuB,CAAC"}
+{"version":3,"file":"render.js","sourceRoot":"","sources":["../../src/component-patterns/render.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAC;AAK9C,MAAM,UAAU,iBAAiB,CAAS,IAAgB,EAAuC;IAC/F,IAAI,OAAO,IAAI,KAAK,UAAU,IAAK,IAAgC,CAAC,WAAW,EAAE,CAAC;QAChF,OAAO,IAA+B,CAAC;IACzC,CAAC;IACD,OAAO,SAAS,CAAC;AAAA,CAClB;AAED,SAAS,uBAAuB,CAAS,IAAgB,EAA6C;IACpG,IAAI,OAAO,IAAI,KAAK,UAAU,IAAK,IAAsC,CAAC,WAAW,EAAE,CAAC;QACtF,OAAO,IAAqC,CAAC;IAC/C,CAAC;IACD,OAAO,SAAS,CAAC;AAAA,CAClB;AAED,MAAM,UAAU,mBAAmB,CACjC,IAAuB,EACvB,KAAsC,EACtC,GAAe,EACf,KAAK,GAAwB,SAAS,EACxB;IACd,MAAM,YAAY,GAAG,uBAAuB,CAAC,IAAI,CAAC,CAAC;IACnD,IAAI,YAAY,EAAE,CAAC;QACjB,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;QACpC,MAAM,QAAQ,GAAG,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,CAAC;QAClC,OAAO,YAAY,CAAC,QAAQ,EAAE,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAiB,CAAC;IACrF,CAAC;IACD,MAAM,eAAe,GAAG,iBAAiB,CAAS,IAAI,CAAC,CAAC;IACxD,IAAI,eAAe,EAAE,CAAC;QACpB,MAAM,QAAQ,GAAG,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,CAAC;QACnC,OAAO,eAAe,CAAC,QAAQ,CAAC,CAAC;IACnC,CAAC;IAED,uGAAuG;IACvG,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC7C,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC;QACxB,CAAC;aAAM,CAAC;YACN,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC;QACvB,CAAC;IACH,CAAC;IACD,4EAA4E;IAC5E,8DAA8D;IAC9D,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,eAAe,EAAE,GAAG,KAAY,CAAC;IAC3D,4DAA4D;IAC5D,MAAM,QAAQ,GAAG,GAAG,IAAI,QAAQ,CAAC;IACjC,gEAAgE;IAChE,OAAO,KAAK,CAAC,IAAI,EAAE,eAAe,EAAE,QAAQ,CAAC,CAAC;AAAA,CAC/C;AAED,MAAM,UAAU,uBAAuB,CAAS,IAAgB,EAAE,KAAa,EAAE,GAAG,QAA2B,EAAgB;IAC7H,0HAA0H;IAC1H,MAAM,iBAAiB,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,CAAC;IACjD,OAAO,mBAAmB,CAAC,IAAyB,EAAE,iBAAiB,CAAC,CAAC;AAAA,CAC1E;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,uBAAuB,CAAC"}

package/lib/component-patterns/render.types.d.ts

@@ -1,15 +1,19 @@
 import type React from 'react';
-import type ReactJSX from 'react/jsx-runtime';
+import type { FurnJSX } from '../jsx-namespace';
 /**
  * Base types for rendering components in a react application, extracted from react types
  */
-export type RenderResult = ReturnType<typeof ReactJSX.jsx>;
-export type RenderType = Parameters<typeof ReactJSX.jsx>[0] | string;
+export type RenderResult = FurnJSX.Element;
+export type RenderType = FurnJSX.ElementType;
 /**
  * The standard element type inputs for react and react-native. This might be View or Button, or it might be 'div' in web. Effectively
  * it is what react accepts for React.createElement
  */
 export type NativeReactType = RenderType;
+/**
+ * Get the props from a react component type
+ */
+export type PropsOf<TComponent> = TComponent extends React.JSXElementConstructor<infer P> ? P : never;
 /**
  * DIRECT RENDERING
  *
@@ -25,74 +29,96 @@ export type NativeReactType = RenderType;
 /**
  * type of the render function, not a FunctionComponent to help prevent hook usage
  */
-export type DirectComponentFunction<TProps> = (props: TProps) => RenderResult;
+export type FunctionComponentCore<TProps> = (props: TProps) => RenderResult;
+/**
+ * A function component that returns an element type. This allows for the empty call props usage for native
+ * components, as well as handles the returns of React components.
+ */
+export type FunctionComponent<TProps> = FunctionComponentCore<TProps> & {
+  displayName?: string;
+};
 /**
  * The full component definition that has the attached properties to allow the jsx handlers to render it directly.
  */
-export type DirectComponent<TProps> = DirectComponentFunction<TProps> & {
-    displayName?: string;
-    _callDirect?: boolean;
+export type DirectComponent<TProps> = FunctionComponentCore<TProps> & {
+  displayName?: string;
+  _callDirect?: boolean;
 };
+type LegacyComponentFunction<TProps> = (props: TProps, ...children: React.ReactNode[]) => RenderResult;
 /**
  * Legacy slot function type, this allows the rendering handlers to bypass the normal JSX rendering and call the function
  * directly. This expects the function to have children as the last argument of the call which isn't consistent with standard
  * react usage, where children are passed as a prop. If writing new components use the DirectComponent type instead.
  * @deprecated use DirectComponent instead
  */
-export type LegacyDirectComponent<TProps> = React.FunctionComponent<TProps> & {
-    _canCompose?: boolean;
+export type LegacyDirectComponent<TProps> = LegacyComponentFunction<TProps> & {
+  _canCompose?: boolean;
 };
 /**
- * Legacy type name used for consistency with old rendering patterns.
+ * Slot function type used in the composition framework. Slot functions return React elements (not arbitrary ReactNode values)
+ * since they always either call staged render functions or React.createElement.
  */
-export type SlotFn<TProps> = LegacyDirectComponent<TProps>;
+export type SlotFn<TProps> = {
+  (props: TProps, ...children: React.ReactNode[]): React.ReactElement | null;
+  _canCompose?: boolean;
+};
 /**
- * MULTI-STAGE RENDERING
+ * PHASED RENDERING (formerly called "staged" or "two-stage" rendering)
  *
- * The above direct rendering pattern is useful for simple components, but it does not allow for hooks or complex logic. The staged render pattern allows
- * for a component to be rendered in two stages, allowing for hooks to be used in the first stage and then the second stage to be a simple render function that can
+ * The above direct rendering pattern is useful for simple components, but it does not allow for hooks or complex logic. The phased render pattern allows
+ * for a component to be rendered in two phases, allowing for hooks to be used in the first phase and then the second phase to be a simple render function that can
  * be called directly.
  *
- * In code that respects the pattern the first stage will be called with props (though children will not be present) and will return a function that will be called
- * with additional props, this time with children present. This allows for the first stage to handle all the logic and hooks, while the second stage can be a simple render function
+ * In code that respects the pattern, the first phase will be called with props (though children will not be present) and will return a function that will be called
+ * with additional props, this time with children present. This allows for the first phase to handle all the logic and hooks, while the second phase can be a simple render function
  * that can leverage direct rendering if supported.
  *
- * The component itself will be a FunctionComponent, but it will have an attached property that is the staged render function. This allows the component to be used in two
+ * The component itself will be a FunctionComponent, but it will have an attached property that is the phased render function. This allows the component to be used in two
  * parts via the useSlot hook, or to be used directly in JSX/TSX as a normal component.
  */
 /**
- * This is an updated version of the staged render that handles children and types more consistently. Generally children
- * will be passed as part of the props for component rendering, it is inconsistent to have them as a variable argument.
+ * Phased render function signature. This is the recommended pattern for components that need hooks.
+ *
+ * Phase 1 receives props (without children) and can use hooks to compute derived state.
+ * Phase 2 returns a component that will be called with props including children.
  *
- * The `children` prop will be automatically inferred and typed correctly by the prop type. Hooks are still expected
+ * Children will be passed as part of the props for component rendering. The `children` prop will be
+ * automatically inferred and typed correctly by the prop type.
  */
-export type TwoStageRender<TProps> = (props: TProps) => React.ComponentType<React.PropsWithChildren<TProps>>;
+export type PhasedRender<TProps> = (props: TProps) => React.ComponentType<React.PropsWithChildren<TProps>>;
 /**
- * Component type for a component that can be rendered in two stages, with the attached render function.
+ * Component type for a component that can be rendered in two phases, with the attached phased render function.
+ * Use phasedComponent() to create these.
  */
-export type StagedComponent<TProps> = React.FunctionComponent<TProps> & {
-    _twoStageRender?: TwoStageRender<TProps>;
+export type PhasedComponent<TProps> = FunctionComponent<TProps> & {
+  _phasedRender?: PhasedRender<TProps>;
 };
 /**
- * The final rendering of the props in a staged render. This is the function component signature that matches that of
+ * The final rendering of the props in a phased render. This is the function component signature that matches that of
  * React.createElement, children (if present) will be part of the variable args at the end.
  */
-export type FinalRender<TProps> = (props: TProps, ...children: React.ReactNode[]) => JSX.Element | null;
+export type FinalRender<TProps> = (props: TProps, ...children: React.ReactNode[]) => FurnJSX.Element | null;
 /**
- * Signature for a staged render function.
- * @deprecated Use TwoStageRender instead
+ * Legacy staged render function signature.
+ * @deprecated Use PhasedRender instead. This older pattern splits children from props which is inconsistent with React conventions.
  */
 export type StagedRender<TProps> = (props: TProps, ...args: any[]) => FinalRender<TProps>;
 /**
- * Signature for a component that uses the staged render pattern.
- * @deprecated Use TwoStageRender instead
+ * Legacy component type that uses the staged render pattern.
+ * @deprecated Use PhasedComponent instead. Create with phasedComponent() rather than stagedComponent().
  */
-export type ComposableFunction<TProps> = React.FunctionComponent<TProps> & {
-    _staged?: StagedRender<TProps>;
+export type ComposableFunction<TProps> = FunctionComponent<TProps> & {
+  _staged?: StagedRender<TProps>;
 };
 /**
  * A type aggregating all the custom types that can be used in the render process.
  * @internal only used in this package, should not be exported
  */
-export type AnyCustomType<TProps> = React.FunctionComponent<TProps> | DirectComponent<TProps> | StagedComponent<TProps> | ComposableFunction<TProps> | LegacyDirectComponent<TProps>;
-//# sourceMappingURL=render.types.d.ts.map
+export type AnyCustomType<TProps> =
+  | React.FunctionComponent<TProps>
+  | DirectComponent<TProps>
+  | PhasedComponent<TProps>
+  | ComposableFunction<TProps>
+  | LegacyDirectComponent<TProps>;
+export {};
+//# sourceMappingURL=render.types.d.ts.map

package/lib/component-patterns/render.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render.types.d.ts","sourceRoot":"","sources":["../../src/component-patterns/render.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAC;AAE9C;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,GAAG,CAAC,CAAC;AAC3D,MAAM,MAAM,UAAU,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC;AAErE;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,UAAU,CAAC;AAEzC;;;;;;;;;;;GAWG;AAEH;;GAEG;AACH,MAAM,MAAM,uBAAuB,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,MAAM,KAAK,YAAY,CAAC;AAE9E;;GAEG;AACH,MAAM,MAAM,eAAe,CAAC,MAAM,IAAI,uBAAuB,CAAC,MAAM,CAAC,GAAG;IACtE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,qBAAqB,CAAC,MAAM,IAAI,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,GAAG;IAC5E,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,MAAM,CAAC,MAAM,IAAI,qBAAqB,CAAC,MAAM,CAAC,CAAC;AAE3D;;;;;;;;;;;;;GAaG;AAEH;;;;;GAKG;AACH,MAAM,MAAM,cAAc,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC;AAE7G;;GAEG;AACH,MAAM,MAAM,eAAe,CAAC,MAAM,IAAI,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,GAAG;IACtE,eAAe,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;CAC1C,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,WAAW,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;AAExG;;;GAGG;AACH,MAAM,MAAM,YAAY,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,WAAW,CAAC,MAAM,CAAC,CAAC;AAE1F;;;GAGG;AACH,MAAM,MAAM,kBAAkB,CAAC,MAAM,IAAI,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAA;CAAE,CAAC;AAE9G;;;GAGG;AACH,MAAM,MAAM,aAAa,CAAC,MAAM,IAC5B,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,GAC/B,eAAe,CAAC,MAAM,CAAC,GACvB,eAAe,CAAC,MAAM,CAAC,GACvB,kBAAkB,CAAC,MAAM,CAAC,GAC1B,qBAAqB,CAAC,MAAM,CAAC,CAAC"}
+{"version":3,"file":"render.types.d.ts","sourceRoot":"","sources":["../../src/component-patterns/render.types.ts"],"names":[],"mappings":"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"}

package/lib/component-patterns/render.types.js

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=render.types.js.map
+//# sourceMappingURL=render.types.js.map

package/lib/component-patterns/stagedComponent.d.ts

@@ -1,15 +1,10 @@
-import type { StagedComponent, TwoStageRender, StagedRender, ComposableFunction } from './render.types';
+import type { StagedRender, ComposableFunction } from './render.types';
 /**
  * Take a staged render function and make a real component out of it
  *
  * @param staged - staged render function to wrap into a staged component
  * @param memo - optional flag to enable wrapping the created component in a React.memo HOC
+ * @deprecated Use phasedComponent from phasedComponent.ts instead
  */
 export declare function stagedComponent<TProps>(staged: StagedRender<TProps>, memo?: boolean): ComposableFunction<TProps>;
-/**
- * Take a two stage render function and make a real component out of it, attaching the staged render function
- * so it can be split if used in that manner.
- * @param staged - two stage render function to wrap into a staged component
- */
-export declare function twoStageComponent<TProps>(staged: TwoStageRender<TProps>): StagedComponent<TProps>;
-//# sourceMappingURL=stagedComponent.d.ts.map
+//# sourceMappingURL=stagedComponent.d.ts.map

package/lib/component-patterns/stagedComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stagedComponent.d.ts","sourceRoot":"","sources":["../../src/component-patterns/stagedComponent.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAMxG;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,EAAE,YAAY,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAQhH;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,eAAe,CAAC,MAAM,CAAC,CAUjG"}
+{"version":3,"file":"stagedComponent.d.ts","sourceRoot":"","sources":["../../src/component-patterns/stagedComponent.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAMvE;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,EAAE,YAAY,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAQhH"}

package/lib/component-patterns/stagedComponent.js

@@ -1,38 +1,21 @@
-/**
- * @jsxRuntime classic
- * @jsx withSlots
- */
 import * as React from 'react';
-import { withSlots } from './withSlots';
 function asArray(val) {
-    return Array.isArray(val) ? val : [val];
+  return Array.isArray(val) ? val : [val];
 }
 /**
  * Take a staged render function and make a real component out of it
  *
  * @param staged - staged render function to wrap into a staged component
  * @param memo - optional flag to enable wrapping the created component in a React.memo HOC
+ * @deprecated Use phasedComponent from phasedComponent.ts instead
  */
 export function stagedComponent(staged, memo) {
-    const component = (props) => {
-        const { children, ...rest } = props;
-        return staged(rest)({}, asArray(children));
-    };
-    const stagedComponent = memo ? React.memo(component) : component;
-    Object.assign(stagedComponent, { _staged: staged });
-    return stagedComponent;
-}
-/**
- * Take a two stage render function and make a real component out of it, attaching the staged render function
- * so it can be split if used in that manner.
- * @param staged - two stage render function to wrap into a staged component
- */
-export function twoStageComponent(staged) {
-    return Object.assign((props) => {
-        const { children, ...outerProps } = props;
-        const innerProps = { children };
-        const Inner = staged(outerProps);
-        return withSlots(Inner, { ...innerProps });
-    }, { _twoStageRender: staged });
+  const component = (props) => {
+    const { children, ...rest } = props;
+    return staged(rest)({}, asArray(children));
+  };
+  const stagedComponent = memo ? React.memo(component) : component;
+  Object.assign(stagedComponent, { _staged: staged });
+  return stagedComponent;
 }
-//# sourceMappingURL=stagedComponent.js.map
+//# sourceMappingURL=stagedComponent.js.map