@fluentui-react-native/use-slots 0.10.11 → 0.11.0

package/lib/useSlots.samples.test.js

@@ -1,218 +1,259 @@
+import { jsx as _jsx, jsxs as _jsxs } from '@fluentui-react-native/framework-base/jsx-runtime';
+/** @jsxImportSource @fluentui-react-native/framework-base */
+import { act } from 'react';
 import { mergeProps } from '@fluentui-react-native/framework-base';
-import { withSlots, stagedComponent } from '@fluentui-react-native/framework-base';
+import { phasedComponent } from '@fluentui-react-native/framework-base';
 import * as renderer from 'react-test-renderer';
+import { View, Text } from 'react-native';
 import { buildUseSlots } from './buildUseSlots';
 /**
  * This file contains samples and description to help explain what the useSlots hook does and why it is useful
  * for building components.
  */
 describe('useSlots sample code test suite', () => {
+  /**
+   * The first mechanism to understand is the stagedComponent mechanic. This allows a component to be written, separating
+   * hook calls and component rendering. This allows it to be safely called as a function by a higher order component, even conditionally.
+   */
+  /**
+   * Example #1: Single level simple component ----------------------------------------
+   *
+   * First we are going to create a wrapped text component that bolds all text. One component will be authored as a staged
+   * component and one as a regular component.
+   */
+  const boldBaseProps = { style: { fontWeight: 900 } };
+  /**
+   * First create the bold text in the standard way. This is just a function component.
+   */
+  const BoldTextStandard = (props) => {
     /**
-     * The first mechanism to understand is the stagedComponent mechanic. This allows a component to be written, separating
-     * hook calls and component rendering. This allows it to be safely called as a function by a higher order component, even conditionally.
+     * Pick out the children to pass them on to the child Text element
      */
+    const { children, ...rest } = props;
     /**
-     * Example #1: Single level simple component ----------------------------------------
-     *
-     * First we are going to create a wrapped text component that bolds all text. One component will be authored as a staged
-     * component and one as a regular component.
+     * Now render the text, merging the baseProps with the style updates with the rest param. Note that this leverages the fact
+     * that mergeProps will reliably produce style objects with the same reference, given the same inputs.
      */
-    const boldBaseProps = { style: { fontWeight: 900 } };
+    return _jsx(Text, { ...mergeProps(boldBaseProps, rest), children: children });
+  };
+  BoldTextStandard.displayName = 'BoldTextStandard';
+  /**
+   * To write the same component using the staged pattern is only slightly more complex. The pattern involves splitting the component rendering into
+   * two parts and executing any hooks in the first part.
+   *
+   * The phasedComponent function takes an input function of this form and wraps it in a function component that react knows how to render
+   */
+  const BoldTextStaged = phasedComponent((props) => {
     /**
-     * First create the bold text in the standard way. This is just a function component.
+     * This section would be where hook/styling code would go, props here would include everything coming in from the base react tree with the
+     * exception of children, which will be passed in stage 2.
      */
-    const BoldTextStandard = (props) => {
-        /**
-         * Pick out the children to pass them on to the child Text element
-         */
-        const { children, ...rest } = props;
-        /**
-         * Now render the text, merging the baseProps with the style updates with the rest param. Note that this leverages the fact
-         * that mergeProps will reliably produce style objects with the same reference, given the same inputs.
-         */
-        return withSlots("span", { ...mergeProps(boldBaseProps, rest) }, children);
+    return (extra) => {
+      /**
+       * extra are additional props that may be filled in by a higher order component. They should not include styling and are only props the
+       * enclosing component are passing to the JSX elements
+       */
+      const { children, ...rest } = extra;
+      return _jsx(Text, { ...mergeProps(boldBaseProps, props, rest), children: children });
     };
-    BoldTextStandard.displayName = 'BoldTextStandard';
+  });
+  BoldTextStaged.displayName = 'BoldTextStaged';
+  it('renders sample 1 - the two types of basic bold text components', () => {
+    const styleToMerge = { color: 'black' };
     /**
-     * To write the same component using the staged pattern is only slightly more complex. The pattern involves splitting the component rendering into
-     * two parts and executing any hooks in the first part.
-     *
-     * The stagedComponent function takes an input function of this form and wraps it in a function component that react knows how to render
+     * First render the staged component. This invokes the wrapper that was built by the stagedComponent function
      */
-    const BoldTextStaged = stagedComponent((props) => {
-        /**
-         * This section would be where hook/styling code would go, props here would include everything coming in from the base react tree with the
-         * exception of children, which will be passed in stage 2.
-         */
-        return (extra, children) => {
-            /**
-             * extra are additional props that may be filled in by a higher order component. They should not include styling and are only props the
-             * enclosing component are passing to the JSX elements
-             */
-            return withSlots("span", { ...mergeProps(boldBaseProps, props, extra) }, children);
-        };
-    });
-    BoldTextStaged.displayName = 'BoldTextStaged';
-    it('renders sample 1 - the two types of basic bold text components', () => {
-        const styleToMerge = { color: 'black' };
-        /**
-         * First render the staged component. This invokes the wrapper that was built by the stagedComponent function
-         */
-        const wrapper = renderer
-            .create(withSlots("div", null,
-            withSlots(BoldTextStaged, { style: styleToMerge }, "Staged component at one level"),
-            withSlots(BoldTextStandard, { style: styleToMerge }, "Standard component of a single level")))
-            .toJSON();
-        expect(wrapper).toMatchSnapshot();
+    let component;
+    act(() => {
+      component = renderer.create(
+        _jsxs(View, {
+          children: [
+            _jsx(BoldTextStaged, { style: styleToMerge, children: 'Staged component at one level' }),
+            _jsx(BoldTextStandard, { style: styleToMerge, children: 'Standard component of a single level' }),
+          ],
+        }),
+      );
     });
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  /**
+   * Example #2 - Simple component containing another simple component -------------------------------------
+   *
+   * Next we will build a layer on top of the previously authored components to turn the bold text components into header components. This is
+   * to illustrate the way in which components can be commonly built on top of other simpler components.
+   */
+  const headerBaseProps = { style: { fontSize: 20 } };
+  /**
+   * The standard way of doing things is a repeat of what happens above. Grab the children, pass them on, merge the rest of the props with
+   * base props.
+   *
+   * This again leverages style merging via mergeProps to avoid changing the references of the style objects on every render
+   */
+  const HeaderStandard = (props) => {
+    const { children, ...rest } = props;
+    return _jsx(BoldTextStandard, { ...mergeProps(headerBaseProps, rest), children: children });
+  };
+  HeaderStandard.displayName = 'HeaderStandard';
+  /**
+   * To consume the staged component we'll use the use slots hook builder. This allows easy consumption of staged components (or standard components)
+   * This will be described in more detail further on but in this case the component has a single child component, so it only has one slot that we
+   * will call 'text'
+   *
+   * This should be built once, and consumed by the component, not built on the fly inside
+   */
+  const useHeaderSlots = buildUseSlots({ slots: { text: BoldTextStaged } });
+  /**
+   * Now author the staged component using the slot hook
+   */
+  const HeaderStaged = phasedComponent((props) => {
     /**
-     * Example #2 - Simple component containing another simple component -------------------------------------
-     *
-     * Next we will build a layer on top of the previously authored components to turn the bold text components into header components. This is
-     * to illustrate the way in which components can be commonly built on top of other simpler components.
-     */
-    const headerBaseProps = { style: { fontSize: 20 } };
-    /**
-     * The standard way of doing things is a repeat of what happens above. Grab the children, pass them on, merge the rest of the props with
-     * base props.
+     * Call the slots hook (or any hook) outside of the inner closure. The useSlots hook will return an object with each slot as a renderable
+     * function. The hooks for sub-components will be called as part of this call. Props passed in at this point will be the props that appear
+     * in outer part of the staged component. (For this example `props`)
      *
-     * This again leverages style merging via mergeProps to avoid changing the references of the style objects on every render
-     */
-    const HeaderStandard = (props) => {
-        const { children, ...rest } = props;
-        return withSlots(BoldTextStandard, { ...mergeProps(headerBaseProps, rest) }, children);
+     * Note that while we are passing in props, in the simple usage case it isn't used and could be omitted if desired
+     * */
+    const BoldText = useHeaderSlots(props).text;
+    /** Now the inner closure, pretty much the same as before */
+    return (extra) => {
+      const { children, ...rest } = extra;
+      /**
+       * Instead of rendering the <BoldTextStageed> component directly we render using the slot. If this is a staged component it will call the
+       * inner closure directly, without going through createElement. Entries passed into the JSX, including children, are what appear in the
+       * props of the inner closure. (In this example `extra`)
+       *
+       * NOTE: this requires using the withSlots helper via the jsx directive. This knows how to pick apart the entries and just call the second
+       * part of the function
+       */
+      return _jsx(BoldText, { ...mergeProps(headerBaseProps, props, rest), children: children });
     };
-    HeaderStandard.displayName = 'HeaderStandard';
-    /**
-     * To consume the staged component we'll use the use slots hook builder. This allows easy consumption of staged components (or standard components)
-     * This will be described in more detail further on but in this case the component has a single child component, so it only has one slot that we
-     * will call 'text'
-     *
-     * This should be built once, and consumed by the component, not built on the fly inside
-     */
-    const useHeaderSlots = buildUseSlots({ slots: { text: BoldTextStaged } });
+  });
+  HeaderStaged.displayName = 'HeaderStaged';
+  /**
+   * Look at the snapshots to compare the rendered output. The staged component will skip the intermediate levels of the react hieararchy while
+   * still rendering to the correct primitives.
+   */
+  it('renders sample 2 = the two types of two level header components', () => {
+    const styleToMerge = { color: 'black' };
     /**
-     * Now author the staged component using the slot hook
+     * First render the staged component. This invokes the wrapper that was built by the stagedComponent function
      */
-    const HeaderStaged = stagedComponent((props) => {
-        /**
-         * Call the slots hook (or any hook) outside of the inner closure. The useSlots hook will return an object with each slot as a renderable
-         * function. The hooks for sub-components will be called as part of this call. Props passed in at this point will be the props that appear
-         * in outer part of the staged component. (For this example `props`)
-         *
-         * Note that while we are passing in props, in the simple usage case it isn't used and could be omitted if desired
-         * */
-        const BoldText = useHeaderSlots(props).text;
-        /** Now the inner closure, pretty much the same as before */
-        return (extra, children) => {
-            /**
-             * Instead of rendering the <BoldTextStageed> component directly we render using the slot. If this is a staged component it will call the
-             * inner closure directly, without going through createElement. Entries passed into the JSX, including children, are what appear in the
-             * props of the inner closure. (In this example `extra`)
-             *
-             * NOTE: this requires using the withSlots helper via the jsx directive. This knows how to pick apart the entries and just call the second
-             * part of the function
-             */
-            return withSlots(BoldText, { ...mergeProps(headerBaseProps, props, extra) }, children);
-        };
+    let component;
+    act(() => {
+      component = renderer.create(
+        _jsxs('div', {
+          children: [
+            _jsx(HeaderStaged, { style: styleToMerge, children: 'Staged component with two levels' }),
+            _jsx(HeaderStandard, { style: styleToMerge, children: 'Standard component with two levels' }),
+          ],
+        }),
+      );
     });
-    HeaderStaged.displayName = 'HeaderStaged';
-    /**
-     * Look at the snapshots to compare the rendered output. The staged component will skip the intermediate levels of the react hieararchy while
-     * still rendering to the correct primitives.
-     */
-    it('renders sample 2 = the two types of two level header components', () => {
-        const styleToMerge = { color: 'black' };
-        /**
-         * First render the staged component. This invokes the wrapper that was built by the stagedComponent function
-         */
-        const wrapper = renderer
-            .create(withSlots("div", null,
-            withSlots(HeaderStaged, { style: styleToMerge }, "Staged component with two levels"),
-            withSlots(HeaderStandard, { style: styleToMerge }, "Standard component with two levels")))
-            .toJSON();
-        expect(wrapper).toMatchSnapshot();
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  /** standard props for the container */
+  const containerProps = { style: { display: 'flex', flexDirection: 'column' } };
+  /**
+   * add a quick cache to ensure that we don't thrash the styles. This is a danger any time a value from a style is added as
+   * a prop on a component
+   */
+  const colorProps = {};
+  const getColorProps = (value) => {
+    if (value !== undefined) {
+      colorProps[value] = colorProps[value] || { style: { color: value } };
+      return colorProps[value];
+    }
+    return {};
+  };
+  /**
+   * now just create the component like a standard react functional component
+   */
+  const CaptionedHeaderStandard = (props) => {
+    const { headerColor, captionColor, captionText, children, ...rest } = props;
+    const headerColorProps = getColorProps(headerColor);
+    const captionColorProps = getColorProps(captionColor);
+    return _jsxs(View, {
+      ...mergeProps(containerProps, rest),
+      children: [
+        _jsx(HeaderStandard, { ...headerColorProps, children: children }),
+        captionText && _jsx(BoldTextStandard, { ...captionColorProps, children: captionText }),
+      ],
     });
-    /** standard props for the container */
-    const containerProps = { style: { display: 'flex', flexDirection: 'column' } };
-    /**
-     * add a quick cache to ensure that we don't thrash the styles. This is a danger any time a value from a style is added as
-     * a prop on a component
-     */
-    const colorProps = {};
-    const getColorProps = (value) => {
-        if (value !== undefined) {
-            colorProps[value] = colorProps[value] || { style: { color: value } };
-            return colorProps[value];
-        }
-        return {};
+  };
+  CaptionedHeaderStandard.displayName = `CaptionedHeaderStandard';`;
+  /**
+   * now build the same component using slots hook. This will also add use of the style injection pattern
+   */
+  const useCaptionedHeaderSlots = buildUseSlots({
+    /** Slots are just like above, this component will have three sub-components */
+    slots: {
+      container: View,
+      header: HeaderStaged,
+      caption: BoldTextStaged,
+    },
+    /** useStyling is an optional function that turns props into props for the sub-components */
+    useStyling: (props) => ({
+      container: containerProps,
+      header: getColorProps(props.headerColor),
+      caption: getColorProps(props.captionColor),
+    }),
+  });
+  /** a mask to clear props that we don't want to pass to the inner view */
+  const clearCustomProps = { headerColor: undefined, captionColor: undefined };
+  /**
+   * now use the hook to implement it as a staged component
+   */
+  const CaptionedHeaderStaged = phasedComponent((props) => {
+    // At the point where this is called the slots are initialized with the initial prop values from useStyling above
+    const Slots = useCaptionedHeaderSlots(props);
+    return (extra) => {
+      // merge the props together, picking out the caption text and clearing any custom values we don't want forwarded to the view
+      const { children, captionText, ...rest } = mergeProps(props, extra, clearCustomProps);
+      // now render using the slots. Any values passed in via JSX will be merged with values from the slot hook above
+      return _jsxs(Slots.container, {
+        ...rest,
+        children: [_jsx(Slots.header, { children: children }), captionText && _jsx(Slots.caption, { children: captionText })],
+      });
     };
+  });
+  CaptionedHeaderStaged.displayName = 'CaptionedHeaderStaged';
+  it('renders sample 3 - the two types of higher order header components', () => {
+    const styleToMerge = { backgroundColor: 'gray', borderColor: 'purple', borderWidth: 1 };
     /**
-     * now just create the component like a standard react functional component
+     * Render the two sets of components. Note in the snapshots how the render tree layers for the standard approach are starting
+     * to add up.
      */
-    const CaptionedHeaderStandard = (props) => {
-        const { headerColor, captionColor, captionText, children, ...rest } = props;
-        const headerColorProps = getColorProps(headerColor);
-        const captionColorProps = getColorProps(captionColor);
-        return (withSlots("div", { ...mergeProps(containerProps, rest) },
-            withSlots(HeaderStandard, { ...headerColorProps }, children),
-            captionText && withSlots(BoldTextStandard, { ...captionColorProps }, captionText)));
-    };
-    CaptionedHeaderStandard.displayName = `CaptionedHeaderStandard';`;
-    /**
-     * now build the same component using slots hook. This will also add use of the style injection pattern
-     */
-    const useCaptionedHeaderSlots = buildUseSlots({
-        /** Slots are just like above, this component will have three sub-components */
-        slots: {
-            container: 'div',
-            header: HeaderStaged,
-            caption: BoldTextStaged,
-        },
-        /** useStyling is an optional function that turns props into props for the sub-components */
-        useStyling: (props) => ({
-            container: containerProps,
-            header: getColorProps(props.headerColor),
-            caption: getColorProps(props.captionColor),
+    let component;
+    act(() => {
+      component = renderer.create(
+        _jsxs('div', {
+          children: [
+            _jsx('span', { children: '--- SIMPLE USAGE COMPARISON ---' }),
+            _jsx(CaptionedHeaderStandard, { style: styleToMerge, children: 'Standard HOC' }),
+            _jsx(CaptionedHeaderStaged, { style: styleToMerge, children: 'Staged HOC' }),
+            _jsx('span', { children: '--- COMPARISON WITH CAPTIONS ---' }),
+            _jsx(CaptionedHeaderStandard, { style: styleToMerge, captionText: 'Caption text', children: 'Standard HOC with Caption' }),
+            _jsx(CaptionedHeaderStaged, { style: styleToMerge, captionText: 'Caption text', children: 'Staged HOC with Caption' }),
+            _jsx('span', { children: '--- COMPARISON WITH CAPTIONS AND CUSTOMIZATIONS ---' }),
+            _jsx(CaptionedHeaderStandard, {
+              style: styleToMerge,
+              captionText: 'Caption text',
+              captionColor: 'yellow',
+              headerColor: 'red',
+              children: 'Standard HOC with caption and customizations',
+            }),
+            _jsx(CaptionedHeaderStaged, {
+              style: styleToMerge,
+              captionText: 'Caption text',
+              captionColor: 'yellow',
+              headerColor: 'red',
+              children: 'Staged HOC with caption and customizations',
+            }),
+          ],
         }),
+      );
     });
-    /** a mask to clear props that we don't want to pass to the inner view */
-    const clearCustomProps = { headerColor: undefined, captionColor: undefined };
-    /**
-     * now use the hook to implement it as a staged component
-     */
-    const CaptionedHeaderStaged = stagedComponent((props) => {
-        // At the point where this is called the slots are initialized with the initial prop values from useStyling above
-        const Slots = useCaptionedHeaderSlots(props);
-        return (extra, children) => {
-            // merge the props together, picking out the caption text and clearing any custom values we don't want forwarded to the view
-            const { captionText, ...rest } = mergeProps(props, extra, clearCustomProps);
-            // now render using the slots. Any values passed in via JSX will be merged with values from the slot hook above
-            return (withSlots(Slots.container, { ...rest },
-                withSlots(Slots.header, null, children),
-                captionText && withSlots(Slots.caption, null, captionText)));
-        };
-    });
-    CaptionedHeaderStaged.displayName = 'CaptionedHeaderStaged';
-    it('renders sample 3 - the two types of higher order header components', () => {
-        const styleToMerge = { backgroundColor: 'gray', borderColor: 'purple', borderWidth: 1 };
-        /**
-         * Render the two sets of components. Note in the snapshots how the render tree layers for the standard approach are starting
-         * to add up.
-         */
-        const wrapper = renderer
-            .create(withSlots("div", null,
-            withSlots("span", null, "--- SIMPLE USAGE COMPARISON ---"),
-            withSlots(CaptionedHeaderStandard, { style: styleToMerge }, "Standard HOC"),
-            withSlots(CaptionedHeaderStaged, { style: styleToMerge }, "Staged HOC"),
-            withSlots("span", null, "--- COMPARISON WITH CAPTIONS ---"),
-            withSlots(CaptionedHeaderStandard, { style: styleToMerge, captionText: "Caption text" }, "Standard HOC with Caption"),
-            withSlots(CaptionedHeaderStaged, { style: styleToMerge, captionText: "Caption text" }, "Staged HOC with Caption"),
-            withSlots("span", null, "--- COMPARISON WITH CAPTIONS AND CUSTOMIZATIONS ---"),
-            withSlots(CaptionedHeaderStandard, { style: styleToMerge, captionText: "Caption text", captionColor: "yellow", headerColor: "red" }, "Standard HOC with caption and customizations"),
-            withSlots(CaptionedHeaderStaged, { style: styleToMerge, captionText: "Caption text", captionColor: "yellow", headerColor: "red" }, "Staged HOC with caption and customizations")))
-            .toJSON();
-        expect(wrapper).toMatchSnapshot();
-    });
+    expect(component.toJSON()).toMatchSnapshot();
+  });
 });
-//# sourceMappingURL=useSlots.samples.test.js.map
+//# sourceMappingURL=useSlots.samples.test.js.map

package/lib/useSlots.samples.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSlots.samples.test.js","sourceRoot":"","sources":["../src/useSlots.samples.test.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"useSlots.samples.test.js","sourceRoot":"","sources":["../src/useSlots.samples.test.tsx"],"names":[],"mappings":"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"}

package/lib-commonjs/buildUseSlots.d.ts

@@ -1,17 +1,18 @@
-import type { ComposableFunction, SlotFn, NativeReactType } from '@fluentui-react-native/framework-base';
+import { type ComponentType } from '@fluentui-react-native/use-slot';
+import type { FunctionComponent, PropsFilter } from '@fluentui-react-native/framework-base';
 export type Slots<TSlotProps> = {
-    [K in keyof TSlotProps]: SlotFn<TSlotProps[K]>;
+  [K in keyof TSlotProps]: FunctionComponent<TSlotProps[K]>;
 };
 export type UseSlotOptions<TSlotProps> = {
-    slots: {
-        [K in keyof TSlotProps]: NativeReactType | ComposableFunction<TSlotProps[K]>;
-    };
-    filters?: {
-        [K in keyof TSlotProps]?: (propName: string) => boolean;
-    };
-    useStyling?: TSlotProps | GetSlotProps<TSlotProps>;
+  slots: {
+    [K in keyof TSlotProps]: ComponentType<TSlotProps[K]>;
+  };
+  filters?: {
+    [K in keyof TSlotProps]?: PropsFilter;
+  };
+  useStyling?: TSlotProps | GetSlotProps<TSlotProps>;
 };
 export type GetSlotProps<TSlotProps> = (...args: any[]) => TSlotProps;
 export type UseSlotsBase<TSlotProps> = (...args: any[]) => Slots<TSlotProps>;
 export declare function buildUseSlots<TSlotProps>(options: UseSlotOptions<TSlotProps>): UseSlotsBase<TSlotProps>;
-//# sourceMappingURL=buildUseSlots.d.ts.map
+//# sourceMappingURL=buildUseSlots.d.ts.map

package/lib-commonjs/buildUseSlots.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buildUseSlots.d.ts","sourceRoot":"","sources":["../src/buildUseSlots.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAUzG,MAAM,MAAM,KAAK,CAAC,UAAU,IAAI;KAAG,CAAC,IAAI,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;CAAE,CAAC;AAEnF,MAAM,MAAM,cAAc,CAAC,UAAU,IAAI;IACvC,KAAK,EAAE;SAAG,CAAC,IAAI,MAAM,UAAU,GAAG,eAAe,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;KAAE,CAAC;IACxF,OAAO,CAAC,EAAE;SAAG,CAAC,IAAI,MAAM,UAAU,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO;KAAE,CAAC;IACtE,UAAU,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC,UAAU,CAAC,CAAC;CACpD,CAAC;AAEF,MAAM,MAAM,YAAY,CAAC,UAAU,IAAI,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,UAAU,CAAC;AAEtE,MAAM,MAAM,YAAY,CAAC,UAAU,IAAI,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,KAAK,CAAC,UAAU,CAAC,CAAC;AAE7E,wBAAgB,aAAa,CAAC,UAAU,EAAE,OAAO,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAkBvG"}
+{"version":3,"file":"buildUseSlots.d.ts","sourceRoot":"","sources":["../src/buildUseSlots.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAC9E,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAS5F,MAAM,MAAM,KAAK,CAAC,UAAU,IAAI;KAAG,CAAC,IAAI,MAAM,UAAU,GAAG,iBAAiB,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;CAAE,CAAC;AAE9F,MAAM,MAAM,cAAc,CAAC,UAAU,IAAI;IACvC,KAAK,EAAE;SAAG,CAAC,IAAI,MAAM,UAAU,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;KAAE,CAAC;IACjE,OAAO,CAAC,EAAE;SAAG,CAAC,IAAI,MAAM,UAAU,CAAC,CAAC,EAAE,WAAW;KAAE,CAAC;IACpD,UAAU,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC,UAAU,CAAC,CAAC;CACpD,CAAC;AAEF,MAAM,MAAM,YAAY,CAAC,UAAU,IAAI,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,UAAU,CAAC;AAEtE,MAAM,MAAM,YAAY,CAAC,UAAU,IAAI,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,KAAK,CAAC,UAAU,CAAC,CAAC;AAE7E,wBAAgB,aAAa,CAAC,UAAU,EAAE,OAAO,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAqBvG"}

package/lib-commonjs/buildUseSlots.js

@@ -1,21 +1,22 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildUseSlots = void 0;
-const use_slot_1 = require("@fluentui-react-native/use-slot");
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.buildUseSlots = buildUseSlots;
+const use_slot_1 = require('@fluentui-react-native/use-slot');
 function buildUseSlots(options) {
-    const { slots, filters = {}, useStyling } = options;
-    return (...args) => {
-        // get the baseline slot props to render with the slots
-        const slotProps = typeof useStyling === 'function' ? useStyling(...args) : (useStyling || {});
-        // build up a set of slots closures and store them in props
-        const builtSlots = {};
-        // for each slot go through and either cache the slot props or call part one render if it is staged
-        Object.keys(slots).forEach((slotName) => {
-            builtSlots[slotName] = (0, use_slot_1.useSlot)(slots[slotName], slotProps[slotName], filters[slotName]);
-        });
-        // return the prebuilt closures, these will have internal references to state.results
-        return builtSlots;
-    };
+  const { slots, filters = {}, useStyling } = options;
+  return (...args) => {
+    // get the baseline slot props to render with the slots
+    const slotProps = typeof useStyling === 'function' ? useStyling(...args) : useStyling || {};
+    // build up a set of slots closures and store them in props
+    const builtSlots = {};
+    // for each slot go through and either cache the slot props or call part one render if it is staged
+    // note: changing this to a for..in loop causes rule of hooks violations
+    // eslint-disable-next-line @rnx-kit/no-foreach-with-captured-variables
+    Object.keys(slots).forEach((slotName) => {
+      builtSlots[slotName] = (0, use_slot_1.useSlot)(slots[slotName], slotProps[slotName], filters[slotName]);
+    });
+    // return the prebuilt closures, these will have internal references to state.results
+    return builtSlots;
+  };
 }
-exports.buildUseSlots = buildUseSlots;
-//# sourceMappingURL=buildUseSlots.js.map
+//# sourceMappingURL=buildUseSlots.js.map

package/lib-commonjs/buildUseSlots.js.map

@@ -1 +1 @@
-{"version":3,"file":"buildUseSlots.js","sourceRoot":"","sources":["../src/buildUseSlots.ts"],"names":[],"mappings":";;;AACA,8DAA0D;AAqB1D,SAAgB,aAAa,CAAa,OAAmC;IAC3E,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,EAAE,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC;IACpD,OAAO,CAAC,GAAG,IAAW,EAAE,EAAE;QACxB,uDAAuD;QACvD,MAAM,SAAS,GACb,OAAO,UAAU,KAAK,UAAU,CAAC,CAAC,CAAE,UAAqC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAE,CAAC,UAAU,IAAI,EAAE,CAAgB,CAAC;QAE1H,2DAA2D;QAC3D,MAAM,UAAU,GAAsB,EAAuB,CAAC;QAE9D,mGAAmG;QACnG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;YACtC,UAAU,CAAC,QAAQ,CAAC,GAAG,IAAA,kBAAO,EAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC1F,CAAC,CAAC,CAAC;QAEH,qFAAqF;QACrF,OAAO,UAAU,CAAC;IACpB,CAAC,CAAC;AACJ,CAAC;AAlBD,sCAkBC"}
+{"version":3,"file":"buildUseSlots.js","sourceRoot":"","sources":["../src/buildUseSlots.ts"],"names":[],"mappings":";;;AAAA,8DAA8E;AAsB9E,uBAA0C,OAAmC,EAA4B;IACvG,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,EAAE,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC;IACpD,OAAO,CAAC,GAAG,IAAW,EAAE,EAAE,CAAC;QACzB,uDAAuD;QACvD,MAAM,SAAS,GACb,OAAO,UAAU,KAAK,UAAU,CAAC,CAAC,CAAE,UAAqC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAE,CAAC,UAAU,IAAI,EAAE,CAAgB,CAAC;QAE1H,2DAA2D;QAC3D,MAAM,UAAU,GAAsB,EAAuB,CAAC;QAE9D,mGAAmG;QAEnG,wEAAwE;QACxE,uEAAuE;QACvE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC;YACvC,UAAU,CAAC,QAAQ,CAAC,GAAG,IAAA,kBAAO,EAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;QAAA,CACzF,CAAC,CAAC;QAEH,qFAAqF;QACrF,OAAO,UAAU,CAAC;IAAA,CACnB,CAAC;AAAA,CACH"}

package/lib-commonjs/buildUseSlots.test.d.ts

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=buildUseSlots.test.d.ts.map
+//# sourceMappingURL=buildUseSlots.test.d.ts.map