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

package/lib-commonjs/useSlots.samples.test.js

@@ -1,243 +1,325 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const framework_base_1 = require("@fluentui-react-native/framework-base");
-const framework_base_2 = require("@fluentui-react-native/framework-base");
-const renderer = __importStar(require("react-test-renderer"));
-const buildUseSlots_1 = require("./buildUseSlots");
+'use strict';
+var __createBinding =
+  (this && this.__createBinding) ||
+  (Object.create
+    ? function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (!desc || ('get' in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+          desc = {
+            enumerable: true,
+            get: function () {
+              return m[k];
+            },
+          };
+        }
+        Object.defineProperty(o, k2, desc);
+      }
+    : function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        o[k2] = m[k];
+      });
+var __setModuleDefault =
+  (this && this.__setModuleDefault) ||
+  (Object.create
+    ? function (o, v) {
+        Object.defineProperty(o, 'default', { enumerable: true, value: v });
+      }
+    : function (o, v) {
+        o['default'] = v;
+      });
+var __importStar =
+  (this && this.__importStar) ||
+  (function () {
+    var ownKeys = function (o) {
+      ownKeys =
+        Object.getOwnPropertyNames ||
+        function (o) {
+          var ar = [];
+          for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+          return ar;
+        };
+      return ownKeys(o);
+    };
+    return function (mod) {
+      if (mod && mod.__esModule) return mod;
+      var result = {};
+      if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== 'default') __createBinding(result, mod, k[i]);
+      __setModuleDefault(result, mod);
+      return result;
+    };
+  })();
+Object.defineProperty(exports, '__esModule', { value: true });
+const jsx_runtime_1 = require('@fluentui-react-native/framework-base/jsx-runtime');
+/** @jsxImportSource @fluentui-react-native/framework-base */
+const react_1 = require('react');
+const framework_base_1 = require('@fluentui-react-native/framework-base');
+const framework_base_2 = require('@fluentui-react-native/framework-base');
+const renderer = __importStar(require('react-test-renderer'));
+const react_native_1 = require('react-native');
+const buildUseSlots_1 = require('./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_runtime_1.jsx(react_native_1.Text, { ...(0, framework_base_1.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 = (0, framework_base_2.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 (0, framework_base_2.withSlots)("span", { ...(0, framework_base_1.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_runtime_1.jsx(react_native_1.Text, {
+        ...(0, framework_base_1.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 = (0, framework_base_2.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 (0, framework_base_2.withSlots)("span", { ...(0, framework_base_1.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((0, framework_base_2.withSlots)("div", null,
-            (0, framework_base_2.withSlots)(BoldTextStaged, { style: styleToMerge }, "Staged component at one level"),
-            (0, framework_base_2.withSlots)(BoldTextStandard, { style: styleToMerge }, "Standard component of a single level")))
-            .toJSON();
-        expect(wrapper).toMatchSnapshot();
+    let component;
+    (0, react_1.act)(() => {
+      component = renderer.create(
+        jsx_runtime_1.jsxs(react_native_1.View, {
+          children: [
+            jsx_runtime_1.jsx(BoldTextStaged, { style: styleToMerge, children: 'Staged component at one level' }),
+            jsx_runtime_1.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_runtime_1.jsx(BoldTextStandard, { ...(0, framework_base_1.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 = (0, buildUseSlots_1.buildUseSlots)({ slots: { text: BoldTextStaged } });
+  /**
+   * Now author the staged component using the slot hook
+   */
+  const HeaderStaged = (0, framework_base_2.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 (0, framework_base_2.withSlots)(BoldTextStandard, { ...(0, framework_base_1.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_runtime_1.jsx(BoldText, { ...(0, framework_base_1.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 = (0, buildUseSlots_1.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 = (0, framework_base_2.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 (0, framework_base_2.withSlots)(BoldText, { ...(0, framework_base_1.mergeProps)(headerBaseProps, props, extra) }, children);
-        };
+    let component;
+    (0, react_1.act)(() => {
+      component = renderer.create(
+        jsx_runtime_1.jsxs('div', {
+          children: [
+            jsx_runtime_1.jsx(HeaderStaged, { style: styleToMerge, children: 'Staged component with two levels' }),
+            jsx_runtime_1.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((0, framework_base_2.withSlots)("div", null,
-            (0, framework_base_2.withSlots)(HeaderStaged, { style: styleToMerge }, "Staged component with two levels"),
-            (0, framework_base_2.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 jsx_runtime_1.jsxs(react_native_1.View, {
+      ...(0, framework_base_1.mergeProps)(containerProps, rest),
+      children: [
+        jsx_runtime_1.jsx(HeaderStandard, { ...headerColorProps, children: children }),
+        captionText && jsx_runtime_1.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 = (0, buildUseSlots_1.buildUseSlots)({
+    /** Slots are just like above, this component will have three sub-components */
+    slots: {
+      container: react_native_1.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 = (0, framework_base_2.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 } = (0, framework_base_1.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 jsx_runtime_1.jsxs(Slots.container, {
+        ...rest,
+        children: [
+          jsx_runtime_1.jsx(Slots.header, { children: children }),
+          captionText && jsx_runtime_1.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 ((0, framework_base_2.withSlots)("div", { ...(0, framework_base_1.mergeProps)(containerProps, rest) },
-            (0, framework_base_2.withSlots)(HeaderStandard, { ...headerColorProps }, children),
-            captionText && (0, framework_base_2.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 = (0, buildUseSlots_1.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;
+    (0, react_1.act)(() => {
+      component = renderer.create(
+        jsx_runtime_1.jsxs('div', {
+          children: [
+            jsx_runtime_1.jsx('span', { children: '--- SIMPLE USAGE COMPARISON ---' }),
+            jsx_runtime_1.jsx(CaptionedHeaderStandard, { style: styleToMerge, children: 'Standard HOC' }),
+            jsx_runtime_1.jsx(CaptionedHeaderStaged, { style: styleToMerge, children: 'Staged HOC' }),
+            jsx_runtime_1.jsx('span', { children: '--- COMPARISON WITH CAPTIONS ---' }),
+            jsx_runtime_1.jsx(CaptionedHeaderStandard, {
+              style: styleToMerge,
+              captionText: 'Caption text',
+              children: 'Standard HOC with Caption',
+            }),
+            jsx_runtime_1.jsx(CaptionedHeaderStaged, {
+              style: styleToMerge,
+              captionText: 'Caption text',
+              children: 'Staged HOC with Caption',
+            }),
+            jsx_runtime_1.jsx('span', { children: '--- COMPARISON WITH CAPTIONS AND CUSTOMIZATIONS ---' }),
+            jsx_runtime_1.jsx(CaptionedHeaderStandard, {
+              style: styleToMerge,
+              captionText: 'Caption text',
+              captionColor: 'yellow',
+              headerColor: 'red',
+              children: 'Standard HOC with caption and customizations',
+            }),
+            jsx_runtime_1.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 = (0, framework_base_2.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 } = (0, framework_base_1.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 ((0, framework_base_2.withSlots)(Slots.container, { ...rest },
-                (0, framework_base_2.withSlots)(Slots.header, null, children),
-                captionText && (0, framework_base_2.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((0, framework_base_2.withSlots)("div", null,
-            (0, framework_base_2.withSlots)("span", null, "--- SIMPLE USAGE COMPARISON ---"),
-            (0, framework_base_2.withSlots)(CaptionedHeaderStandard, { style: styleToMerge }, "Standard HOC"),
-            (0, framework_base_2.withSlots)(CaptionedHeaderStaged, { style: styleToMerge }, "Staged HOC"),
-            (0, framework_base_2.withSlots)("span", null, "--- COMPARISON WITH CAPTIONS ---"),
-            (0, framework_base_2.withSlots)(CaptionedHeaderStandard, { style: styleToMerge, captionText: "Caption text" }, "Standard HOC with Caption"),
-            (0, framework_base_2.withSlots)(CaptionedHeaderStaged, { style: styleToMerge, captionText: "Caption text" }, "Staged HOC with Caption"),
-            (0, framework_base_2.withSlots)("span", null, "--- COMPARISON WITH CAPTIONS AND CUSTOMIZATIONS ---"),
-            (0, framework_base_2.withSlots)(CaptionedHeaderStandard, { style: styleToMerge, captionText: "Caption text", captionColor: "yellow", headerColor: "red" }, "Standard HOC with caption and customizations"),
-            (0, framework_base_2.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-commonjs/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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"}