@fluentui-react-native/use-slots 0.10.2 → 0.10.4

package/CHANGELOG.json

@@ -2,7 +2,72 @@
   "name": "@fluentui-react-native/use-slots",
   "entries": [
     {
-      "date": "Wed, 29 Jan 2025 23:39:17 GMT",
+      "date": "Thu, 10 Jul 2025 20:30:28 GMT",
+      "version": "0.10.4",
+      "tag": "@fluentui-react-native/use-slots_v0.10.4",
+      "comments": {
+        "none": [
+          {
+            "author": "ruaraki@microsoft.com",
+            "package": "@fluentui-react-native/use-slots",
+            "commit": "a245202877ef7f2be9ab5f0e1356b2270957e693",
+            "comment": "Run bump-versions"
+          },
+          {
+            "author": "4123478+tido64@users.noreply.github.com",
+            "package": "@fluentui-react-native/use-slots",
+            "commit": "79bb06f6bbfd0a36f9d2ef371f4857be9660f027",
+            "comment": "Fixed `align-deps` warnings"
+          },
+          {
+            "author": "jasonmo@microsoft.com",
+            "package": "@fluentui-react-native/use-slots",
+            "commit": "54087dca787180bbf34630470cd0d06e88366b30",
+            "comment": "update eslint to 9.x and use new flat config format with security rules"
+          }
+        ],
+        "patch": [
+          {
+            "author": "jasonmo@microsoft.com",
+            "package": "@fluentui-react-native/use-slots",
+            "commit": "479b93cea460a26df70c55b5d3335927ed374713",
+            "comment": "update builds to use node16 settings and modern export maps"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 10 Jul 2025 19:20:14 GMT",
+      "version": "0.10.3",
+      "tag": "@fluentui-react-native/use-slots_v0.10.3",
+      "comments": {
+        "patch": [
+          {
+            "author": "4123478+tido64@users.noreply.github.com",
+            "package": "@fluentui-react-native/use-slots",
+            "commit": "24b9abab3370f008afd2dbb304751fc9af6bec4a",
+            "comment": "Add support for React Native 0.74"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 11 Jun 2025 19:34:46 GMT",
+      "version": "0.10.2",
+      "tag": "@fluentui-react-native/use-slots_v0.10.2",
+      "comments": {
+        "none": [
+          {
+            "author": "4123478+tido64@users.noreply.github.com",
+            "package": "@fluentui-react-native/use-slots",
+            "commit": "2342b87a20e5a584bd2073c8c5a266f0aa48c8bb",
+            "comment": "Added missing dev dependencies"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 29 Jan 2025 23:43:52 GMT",
       "version": "0.10.2",
       "tag": "@fluentui-react-native/use-slots_v0.10.2",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,28 @@
 # Change Log - @fluentui-react-native/use-slots
 
-<!-- This log was last generated on Wed, 29 Jan 2025 23:39:17 GMT and should not be manually modified. -->
+<!-- This log was last generated on Thu, 10 Jul 2025 20:30:28 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 0.10.4
+
+Thu, 10 Jul 2025 20:30:28 GMT
+
+### Patches
+
+- update builds to use node16 settings and modern export maps (jasonmo@microsoft.com)
+
+## 0.10.3
+
+Thu, 10 Jul 2025 19:20:14 GMT
+
+### Patches
+
+- Add support for React Native 0.74 (4123478+tido64@users.noreply.github.com)
+
 ## 0.10.2
 
-Wed, 29 Jan 2025 23:39:17 GMT
+Wed, 29 Jan 2025 23:43:52 GMT
 
 ### Patches
 

package/eslint.config.js

@@ -0,0 +1,3 @@
+const baseConfig = require('@fluentui-react-native/eslint-config-rules');
+
+module.exports = baseConfig;

package/lib/buildUseSlots.js

@@ -1,18 +1,14 @@
 import { useSlot } from '@fluentui-react-native/use-slot';
 export function buildUseSlots(options) {
-    var slots = options.slots, _a = options.filters, filters = _a === void 0 ? {} : _a, useStyling = options.useStyling;
-    return function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
+    const { slots, filters = {}, useStyling } = options;
+    return (...args) => {
         // get the baseline slot props to render with the slots
         // eslint-disable-next-line @typescript-eslint/ban-types
-        var slotProps = typeof useStyling === 'function' ? useStyling.apply(void 0, args) : (useStyling || {});
+        const slotProps = typeof useStyling === 'function' ? useStyling(...args) : (useStyling || {});
         // build up a set of slots closures and store them in props
-        var builtSlots = {};
+        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(function (slotName) {
+        Object.keys(slots).forEach((slotName) => {
             builtSlots[slotName] = useSlot(slots[slotName], slotProps[slotName], filters[slotName]);
         });
         // return the prebuilt closures, these will have internal references to state.results

package/lib/buildUseSlots.js.map

@@ -1 +1 @@
-{"version":3,"file":"buildUseSlots.js","sourceRoot":"","sources":["../src/buildUseSlots.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAgB1D,MAAM,UAAU,aAAa,CAAa,OAAmC;IACnE,IAAA,KAAK,GAA+B,OAAO,MAAtC,EAAE,KAA6B,OAAO,QAAxB,EAAZ,OAAO,mBAAG,EAAE,KAAA,EAAE,UAAU,GAAK,OAAO,WAAZ,CAAa;IACpD,OAAO;QAAC,cAAc;aAAd,UAAc,EAAd,qBAAc,EAAd,IAAc;YAAd,yBAAc;;QACpB,uDAAuD;QACvD,wDAAwD;QACxD,IAAM,SAAS,GAAe,OAAO,UAAU,KAAK,UAAU,CAAC,CAAC,CAAE,UAAuB,eAAI,IAAI,EAAE,CAAC,CAAE,CAAC,UAAU,IAAI,EAAE,CAAgB,CAAC;QAExI,2DAA2D;QAC3D,IAAM,UAAU,GAAsB,EAAuB,CAAC;QAE9D,mGAAmG;QACnG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,UAAC,QAAQ;YAClC,UAAU,CAAC,QAAQ,CAAC,GAAG,OAAO,CAAC,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"}
+{"version":3,"file":"buildUseSlots.js","sourceRoot":"","sources":["../src/buildUseSlots.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAgB1D,MAAM,UAAU,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,wDAAwD;QACxD,MAAM,SAAS,GAAe,OAAO,UAAU,KAAK,UAAU,CAAC,CAAC,CAAE,UAAuB,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAE,CAAC,UAAU,IAAI,EAAE,CAAgB,CAAC;QAExI,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,OAAO,CAAC,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"}

package/lib/buildUseSlots.test.js

@@ -1,37 +1,26 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { View, Text } from 'react-native';
 import { withSlots, stagedComponent } from '@fluentui-react-native/use-slot';
 import * as renderer from 'react-test-renderer';
 import { buildUseSlots } from './buildUseSlots';
-var useSlotsBase = buildUseSlots({
+const useSlotsBase = buildUseSlots({
     slots: {
         outer: View,
         inner: View,
         content: Text,
     },
 });
-var CompBase = stagedComponent(function (props) {
-    var Slots = useSlotsBase(props);
-    return function (extra) {
-        var merged = __assign(__assign({}, props), extra);
-        return (withSlots(Slots.outer, __assign({}, merged),
+const CompBase = stagedComponent((props) => {
+    const Slots = useSlotsBase(props);
+    return (extra) => {
+        const merged = { ...props, ...extra };
+        return (withSlots(Slots.outer, { ...merged },
             withSlots(Slots.inner, { style: { backgroundColor: 'blue', width: 20, height: 10 } },
                 withSlots(Slots.content, null, "Hello"))));
     };
 });
-describe('buildUseSlots test suite', function () {
-    it('Simple component render', function () {
-        var tree = renderer.create(withSlots(CompBase, { style: { width: 30, height: 20, borderColor: 'green', borderWidth: 1 } })).toJSON();
+describe('buildUseSlots test suite', () => {
+    it('Simple component render', () => {
+        const tree = renderer.create(withSlots(CompBase, { style: { width: 30, height: 20, borderColor: 'green', borderWidth: 1 } })).toJSON();
         expect(tree).toMatchSnapshot();
     });
 });

package/lib/buildUseSlots.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"buildUseSlots.test.js","sourceRoot":"","sources":["../src/buildUseSlots.test.tsx"],"names":[],"mappings":";;;;;;;;;;;AAGA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAC7E,OAAO,KAAK,QAAQ,MAAM,qBAAqB,CAAC;AAEhD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAQhD,IAAM,YAAY,GAAG,aAAa,CAAa;IAC7C,KAAK,EAAE;QACL,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,IAAI;QACX,OAAO,EAAE,IAAI;KACd;CACF,CAAC,CAAC;AAEH,IAAM,QAAQ,GAAG,eAAe,CAAC,UAAC,KAAgB;IAChD,IAAM,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IAClC,OAAO,UAAC,KAAgB;QACtB,IAAM,MAAM,yBAAQ,KAAK,GAAK,KAAK,CAAE,CAAC;QACtC,OAAO,CACL,UAAC,KAAK,CAAC,KAAK,eAAK,MAAM;YACrB,UAAC,KAAK,CAAC,KAAK,IAAC,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;gBACpE,UAAC,KAAK,CAAC,OAAO,gBAAsB,CACxB,CACF,CACf,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,0BAA0B,EAAE;IACnC,EAAE,CAAC,yBAAyB,EAAE;QAC5B,IAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,UAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC,EAAE,GAAI,CAAC,CAAC,MAAM,EAAE,CAAC;QAC5H,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"buildUseSlots.test.js","sourceRoot":"","sources":["../src/buildUseSlots.test.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAC7E,OAAO,KAAK,QAAQ,MAAM,qBAAqB,CAAC;AAEhD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAQhD,MAAM,YAAY,GAAG,aAAa,CAAa;IAC7C,KAAK,EAAE;QACL,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,IAAI;QACX,OAAO,EAAE,IAAI;KACd;CACF,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAG,eAAe,CAAC,CAAC,KAAgB,EAAE,EAAE;IACpD,MAAM,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IAClC,OAAO,CAAC,KAAgB,EAAE,EAAE;QAC1B,MAAM,MAAM,GAAG,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,EAAE,CAAC;QACtC,OAAO,CACL,UAAC,KAAK,CAAC,KAAK,OAAK,MAAM;YACrB,UAAC,KAAK,CAAC,KAAK,IAAC,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;gBACpE,UAAC,KAAK,CAAC,OAAO,gBAAsB,CACxB,CACF,CACf,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,0BAA0B,EAAE,GAAG,EAAE;IACxC,EAAE,CAAC,yBAAyB,EAAE,GAAG,EAAE;QACjC,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,UAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC,EAAE,GAAI,CAAC,CAAC,MAAM,EAAE,CAAC;QAC5H,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/lib/useSlots.samples.test.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { mergeProps } from '@fluentui-react-native/merge-props';
 import { withSlots, stagedComponent } from '@fluentui-react-native/use-slot';
 import * as renderer from 'react-test-renderer';
@@ -28,7 +6,7 @@ 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', function () {
+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.
@@ -39,20 +17,20 @@ describe('useSlots sample code test suite', function () {
      * 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.
      */
-    var boldBaseProps = { style: { fontWeight: 900 } };
+    const boldBaseProps = { style: { fontWeight: 900 } };
     /**
      * First create the bold text in the standard way. This is just a function component.
      */
-    var BoldTextStandard = function (props) {
+    const BoldTextStandard = (props) => {
         /**
          * Pick out the children to pass them on to the child Text element
          */
-        var children = props.children, rest = __rest(props, ["children"]);
+        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", __assign({}, mergeProps(boldBaseProps, rest)), children);
+        return withSlots("span", { ...mergeProps(boldBaseProps, rest) }, children);
     };
     BoldTextStandard.displayName = 'BoldTextStandard';
     /**
@@ -61,26 +39,26 @@ describe('useSlots sample code test suite', function () {
      *
      * The stagedComponent function takes an input function of this form and wraps it in a function component that react knows how to render
      */
-    var BoldTextStaged = stagedComponent(function (props) {
+    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 function (extra, children) {
+        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", __assign({}, mergeProps(boldBaseProps, props, extra)), children);
+            return withSlots("span", { ...mergeProps(boldBaseProps, props, extra) }, children);
         };
     });
     BoldTextStaged.displayName = 'BoldTextStaged';
-    it('renders sample 1 - the two types of basic bold text components', function () {
-        var styleToMerge = { color: 'black' };
+    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
          */
-        var wrapper = renderer
+        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")))
@@ -93,16 +71,16 @@ describe('useSlots sample code test suite', function () {
      * 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.
      */
-    var headerBaseProps = { style: { fontSize: 20 } };
+    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
      */
-    var HeaderStandard = function (props) {
-        var children = props.children, rest = __rest(props, ["children"]);
-        return withSlots(BoldTextStandard, __assign({}, mergeProps(headerBaseProps, rest)), children);
+    const HeaderStandard = (props) => {
+        const { children, ...rest } = props;
+        return withSlots(BoldTextStandard, { ...mergeProps(headerBaseProps, rest) }, children);
     };
     HeaderStandard.displayName = 'HeaderStandard';
     /**
@@ -112,11 +90,11 @@ describe('useSlots sample code test suite', function () {
      *
      * This should be built once, and consumed by the component, not built on the fly inside
      */
-    var useHeaderSlots = buildUseSlots({ slots: { text: BoldTextStaged } });
+    const useHeaderSlots = buildUseSlots({ slots: { text: BoldTextStaged } });
     /**
      * Now author the staged component using the slot hook
      */
-    var HeaderStaged = stagedComponent(function (props) {
+    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
@@ -124,9 +102,9 @@ describe('useSlots sample code test suite', function () {
          *
          * Note that while we are passing in props, in the simple usage case it isn't used and could be omitted if desired
          * */
-        var BoldText = useHeaderSlots(props).text;
+        const BoldText = useHeaderSlots(props).text;
         /** Now the inner closure, pretty much the same as before */
-        return function (extra, children) {
+        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
@@ -135,7 +113,7 @@ describe('useSlots sample code test suite', function () {
              * 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, __assign({}, mergeProps(headerBaseProps, props, extra)), children);
+            return withSlots(BoldText, { ...mergeProps(headerBaseProps, props, extra) }, children);
         };
     });
     HeaderStaged.displayName = 'HeaderStaged';
@@ -143,12 +121,12 @@ describe('useSlots sample code test suite', function () {
      * 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', function () {
-        var styleToMerge = { color: 'black' };
+    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
          */
-        var wrapper = renderer
+        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")))
@@ -156,13 +134,13 @@ describe('useSlots sample code test suite', function () {
         expect(wrapper).toMatchSnapshot();
     });
     /** standard props for the container */
-    var containerProps = { style: { display: 'flex', flexDirection: 'column' } };
+    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
      */
-    var colorProps = {};
-    var getColorProps = function (value) {
+    const colorProps = {};
+    const getColorProps = (value) => {
         if (value !== undefined) {
             colorProps[value] = colorProps[value] || { style: { color: value } };
             return colorProps[value];
@@ -172,19 +150,19 @@ describe('useSlots sample code test suite', function () {
     /**
      * now just create the component like a standard react functional component
      */
-    var CaptionedHeaderStandard = function (props) {
-        var headerColor = props.headerColor, captionColor = props.captionColor, captionText = props.captionText, children = props.children, rest = __rest(props, ["headerColor", "captionColor", "captionText", "children"]);
-        var headerColorProps = getColorProps(headerColor);
-        var captionColorProps = getColorProps(captionColor);
-        return (withSlots("div", __assign({}, mergeProps(containerProps, rest)),
-            withSlots(HeaderStandard, __assign({}, headerColorProps), children),
-            captionText && withSlots(BoldTextStandard, __assign({}, captionColorProps), captionText)));
+    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';";
+    CaptionedHeaderStandard.displayName = `CaptionedHeaderStandard';`;
     /**
      * now build the same component using slots hook. This will also add use of the style injection pattern
      */
-    var useCaptionedHeaderSlots = buildUseSlots({
+    const useCaptionedHeaderSlots = buildUseSlots({
         /** Slots are just like above, this component will have three sub-components */
         slots: {
             container: 'div',
@@ -192,37 +170,37 @@ describe('useSlots sample code test suite', function () {
             caption: BoldTextStaged,
         },
         /** useStyling is an optional function that turns props into props for the sub-components */
-        useStyling: function (props) { return ({
+        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 */
-    var clearCustomProps = { headerColor: undefined, captionColor: undefined };
+    const clearCustomProps = { headerColor: undefined, captionColor: undefined };
     /**
      * now use the hook to implement it as a staged component
      */
-    var CaptionedHeaderStaged = stagedComponent(function (props) {
+    const CaptionedHeaderStaged = stagedComponent((props) => {
         // At the point where this is called the slots are initialized with the initial prop values from useStyling above
-        var Slots = useCaptionedHeaderSlots(props);
-        return function (extra, children) {
+        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
-            var _a = mergeProps(props, extra, clearCustomProps), captionText = _a.captionText, rest = __rest(_a, ["captionText"]);
+            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, __assign({}, rest),
+            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', function () {
-        var styleToMerge = { backgroundColor: 'gray', borderColor: 'purple', borderWidth: 1 };
+    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.
          */
-        var wrapper = renderer
+        const wrapper = renderer
             .create(withSlots("div", null,
             withSlots("span", null, "--- SIMPLE USAGE COMPARISON ---"),
             withSlots(CaptionedHeaderStandard, { style: styleToMerge }, "Standard HOC"),

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.js

@@ -1,21 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.buildUseSlots = void 0;
-var use_slot_1 = require("@fluentui-react-native/use-slot");
+const use_slot_1 = require("@fluentui-react-native/use-slot");
 function buildUseSlots(options) {
-    var slots = options.slots, _a = options.filters, filters = _a === void 0 ? {} : _a, useStyling = options.useStyling;
-    return function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
+    const { slots, filters = {}, useStyling } = options;
+    return (...args) => {
         // get the baseline slot props to render with the slots
         // eslint-disable-next-line @typescript-eslint/ban-types
-        var slotProps = typeof useStyling === 'function' ? useStyling.apply(void 0, args) : (useStyling || {});
+        const slotProps = typeof useStyling === 'function' ? useStyling(...args) : (useStyling || {});
         // build up a set of slots closures and store them in props
-        var builtSlots = {};
+        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(function (slotName) {
+        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

package/lib-commonjs/buildUseSlots.js.map

@@ -1 +1 @@
-{"version":3,"file":"buildUseSlots.js","sourceRoot":"","sources":["../src/buildUseSlots.ts"],"names":[],"mappings":";;;AACA,4DAA0D;AAgB1D,SAAgB,aAAa,CAAa,OAAmC;IACnE,IAAA,KAAK,GAA+B,OAAO,MAAtC,EAAE,KAA6B,OAAO,QAAxB,EAAZ,OAAO,mBAAG,EAAE,KAAA,EAAE,UAAU,GAAK,OAAO,WAAZ,CAAa;IACpD,OAAO;QAAC,cAAc;aAAd,UAAc,EAAd,qBAAc,EAAd,IAAc;YAAd,yBAAc;;QACpB,uDAAuD;QACvD,wDAAwD;QACxD,IAAM,SAAS,GAAe,OAAO,UAAU,KAAK,UAAU,CAAC,CAAC,CAAE,UAAuB,eAAI,IAAI,EAAE,CAAC,CAAE,CAAC,UAAU,IAAI,EAAE,CAAgB,CAAC;QAExI,2DAA2D;QAC3D,IAAM,UAAU,GAAsB,EAAuB,CAAC;QAE9D,mGAAmG;QACnG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,UAAC,QAAQ;YAClC,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":";;;AACA,8DAA0D;AAgB1D,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,wDAAwD;QACxD,MAAM,SAAS,GAAe,OAAO,UAAU,KAAK,UAAU,CAAC,CAAC,CAAE,UAAuB,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAE,CAAC,UAAU,IAAI,EAAE,CAAgB,CAAC;QAExI,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"}

package/lib-commonjs/buildUseSlots.test.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -34,29 +23,29 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_native_1 = require("react-native");
-var use_slot_1 = require("@fluentui-react-native/use-slot");
-var renderer = __importStar(require("react-test-renderer"));
-var buildUseSlots_1 = require("./buildUseSlots");
-var useSlotsBase = (0, buildUseSlots_1.buildUseSlots)({
+const react_native_1 = require("react-native");
+const use_slot_1 = require("@fluentui-react-native/use-slot");
+const renderer = __importStar(require("react-test-renderer"));
+const buildUseSlots_1 = require("./buildUseSlots");
+const useSlotsBase = (0, buildUseSlots_1.buildUseSlots)({
     slots: {
         outer: react_native_1.View,
         inner: react_native_1.View,
         content: react_native_1.Text,
     },
 });
-var CompBase = (0, use_slot_1.stagedComponent)(function (props) {
-    var Slots = useSlotsBase(props);
-    return function (extra) {
-        var merged = __assign(__assign({}, props), extra);
-        return ((0, use_slot_1.withSlots)(Slots.outer, __assign({}, merged),
+const CompBase = (0, use_slot_1.stagedComponent)((props) => {
+    const Slots = useSlotsBase(props);
+    return (extra) => {
+        const merged = { ...props, ...extra };
+        return ((0, use_slot_1.withSlots)(Slots.outer, { ...merged },
             (0, use_slot_1.withSlots)(Slots.inner, { style: { backgroundColor: 'blue', width: 20, height: 10 } },
                 (0, use_slot_1.withSlots)(Slots.content, null, "Hello"))));
     };
 });
-describe('buildUseSlots test suite', function () {
-    it('Simple component render', function () {
-        var tree = renderer.create((0, use_slot_1.withSlots)(CompBase, { style: { width: 30, height: 20, borderColor: 'green', borderWidth: 1 } })).toJSON();
+describe('buildUseSlots test suite', () => {
+    it('Simple component render', () => {
+        const tree = renderer.create((0, use_slot_1.withSlots)(CompBase, { style: { width: 30, height: 20, borderColor: 'green', borderWidth: 1 } })).toJSON();
         expect(tree).toMatchSnapshot();
     });
 });

package/lib-commonjs/buildUseSlots.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"buildUseSlots.test.js","sourceRoot":"","sources":["../src/buildUseSlots.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,6CAA0C;AAE1C,4DAA6E;AAC7E,4DAAgD;AAEhD,iDAAgD;AAQhD,IAAM,YAAY,GAAG,IAAA,6BAAa,EAAa;IAC7C,KAAK,EAAE;QACL,KAAK,EAAE,mBAAI;QACX,KAAK,EAAE,mBAAI;QACX,OAAO,EAAE,mBAAI;KACd;CACF,CAAC,CAAC;AAEH,IAAM,QAAQ,GAAG,IAAA,0BAAe,EAAC,UAAC,KAAgB;IAChD,IAAM,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IAClC,OAAO,UAAC,KAAgB;QACtB,IAAM,MAAM,yBAAQ,KAAK,GAAK,KAAK,CAAE,CAAC;QACtC,OAAO,CACL,0BAAC,KAAK,CAAC,KAAK,eAAK,MAAM;YACrB,0BAAC,KAAK,CAAC,KAAK,IAAC,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;gBACpE,0BAAC,KAAK,CAAC,OAAO,gBAAsB,CACxB,CACF,CACf,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,0BAA0B,EAAE;IACnC,EAAE,CAAC,yBAAyB,EAAE;QAC5B,IAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,0BAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC,EAAE,GAAI,CAAC,CAAC,MAAM,EAAE,CAAC;QAC5H,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"buildUseSlots.test.js","sourceRoot":"","sources":["../src/buildUseSlots.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAGA,+CAA0C;AAE1C,8DAA6E;AAC7E,8DAAgD;AAEhD,mDAAgD;AAQhD,MAAM,YAAY,GAAG,IAAA,6BAAa,EAAa;IAC7C,KAAK,EAAE;QACL,KAAK,EAAE,mBAAI;QACX,KAAK,EAAE,mBAAI;QACX,OAAO,EAAE,mBAAI;KACd;CACF,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAG,IAAA,0BAAe,EAAC,CAAC,KAAgB,EAAE,EAAE;IACpD,MAAM,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IAClC,OAAO,CAAC,KAAgB,EAAE,EAAE;QAC1B,MAAM,MAAM,GAAG,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,EAAE,CAAC;QACtC,OAAO,CACL,0BAAC,KAAK,CAAC,KAAK,OAAK,MAAM;YACrB,0BAAC,KAAK,CAAC,KAAK,IAAC,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;gBACpE,0BAAC,KAAK,CAAC,OAAO,gBAAsB,CACxB,CACF,CACf,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,0BAA0B,EAAE,GAAG,EAAE;IACxC,EAAE,CAAC,yBAAyB,EAAE,GAAG,EAAE;QACjC,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,0BAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC,EAAE,GAAI,CAAC,CAAC,MAAM,EAAE,CAAC;QAC5H,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

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

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -33,27 +22,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var merge_props_1 = require("@fluentui-react-native/merge-props");
-var use_slot_1 = require("@fluentui-react-native/use-slot");
-var renderer = __importStar(require("react-test-renderer"));
-var buildUseSlots_1 = require("./buildUseSlots");
+const merge_props_1 = require("@fluentui-react-native/merge-props");
+const use_slot_1 = require("@fluentui-react-native/use-slot");
+const renderer = __importStar(require("react-test-renderer"));
+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', function () {
+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.
@@ -64,20 +42,20 @@ describe('useSlots sample code test suite', function () {
      * 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.
      */
-    var boldBaseProps = { style: { fontWeight: 900 } };
+    const boldBaseProps = { style: { fontWeight: 900 } };
     /**
      * First create the bold text in the standard way. This is just a function component.
      */
-    var BoldTextStandard = function (props) {
+    const BoldTextStandard = (props) => {
         /**
          * Pick out the children to pass them on to the child Text element
          */
-        var children = props.children, rest = __rest(props, ["children"]);
+        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, use_slot_1.withSlots)("span", __assign({}, (0, merge_props_1.mergeProps)(boldBaseProps, rest)), children);
+        return (0, use_slot_1.withSlots)("span", { ...(0, merge_props_1.mergeProps)(boldBaseProps, rest) }, children);
     };
     BoldTextStandard.displayName = 'BoldTextStandard';
     /**
@@ -86,26 +64,26 @@ describe('useSlots sample code test suite', function () {
      *
      * The stagedComponent function takes an input function of this form and wraps it in a function component that react knows how to render
      */
-    var BoldTextStaged = (0, use_slot_1.stagedComponent)(function (props) {
+    const BoldTextStaged = (0, use_slot_1.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 function (extra, children) {
+        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, use_slot_1.withSlots)("span", __assign({}, (0, merge_props_1.mergeProps)(boldBaseProps, props, extra)), children);
+            return (0, use_slot_1.withSlots)("span", { ...(0, merge_props_1.mergeProps)(boldBaseProps, props, extra) }, children);
         };
     });
     BoldTextStaged.displayName = 'BoldTextStaged';
-    it('renders sample 1 - the two types of basic bold text components', function () {
-        var styleToMerge = { color: 'black' };
+    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
          */
-        var wrapper = renderer
+        const wrapper = renderer
             .create((0, use_slot_1.withSlots)("div", null,
             (0, use_slot_1.withSlots)(BoldTextStaged, { style: styleToMerge }, "Staged component at one level"),
             (0, use_slot_1.withSlots)(BoldTextStandard, { style: styleToMerge }, "Standard component of a single level")))
@@ -118,16 +96,16 @@ describe('useSlots sample code test suite', function () {
      * 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.
      */
-    var headerBaseProps = { style: { fontSize: 20 } };
+    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
      */
-    var HeaderStandard = function (props) {
-        var children = props.children, rest = __rest(props, ["children"]);
-        return (0, use_slot_1.withSlots)(BoldTextStandard, __assign({}, (0, merge_props_1.mergeProps)(headerBaseProps, rest)), children);
+    const HeaderStandard = (props) => {
+        const { children, ...rest } = props;
+        return (0, use_slot_1.withSlots)(BoldTextStandard, { ...(0, merge_props_1.mergeProps)(headerBaseProps, rest) }, children);
     };
     HeaderStandard.displayName = 'HeaderStandard';
     /**
@@ -137,11 +115,11 @@ describe('useSlots sample code test suite', function () {
      *
      * This should be built once, and consumed by the component, not built on the fly inside
      */
-    var useHeaderSlots = (0, buildUseSlots_1.buildUseSlots)({ slots: { text: BoldTextStaged } });
+    const useHeaderSlots = (0, buildUseSlots_1.buildUseSlots)({ slots: { text: BoldTextStaged } });
     /**
      * Now author the staged component using the slot hook
      */
-    var HeaderStaged = (0, use_slot_1.stagedComponent)(function (props) {
+    const HeaderStaged = (0, use_slot_1.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
@@ -149,9 +127,9 @@ describe('useSlots sample code test suite', function () {
          *
          * Note that while we are passing in props, in the simple usage case it isn't used and could be omitted if desired
          * */
-        var BoldText = useHeaderSlots(props).text;
+        const BoldText = useHeaderSlots(props).text;
         /** Now the inner closure, pretty much the same as before */
-        return function (extra, children) {
+        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
@@ -160,7 +138,7 @@ describe('useSlots sample code test suite', function () {
              * 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, use_slot_1.withSlots)(BoldText, __assign({}, (0, merge_props_1.mergeProps)(headerBaseProps, props, extra)), children);
+            return (0, use_slot_1.withSlots)(BoldText, { ...(0, merge_props_1.mergeProps)(headerBaseProps, props, extra) }, children);
         };
     });
     HeaderStaged.displayName = 'HeaderStaged';
@@ -168,12 +146,12 @@ describe('useSlots sample code test suite', function () {
      * 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', function () {
-        var styleToMerge = { color: 'black' };
+    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
          */
-        var wrapper = renderer
+        const wrapper = renderer
             .create((0, use_slot_1.withSlots)("div", null,
             (0, use_slot_1.withSlots)(HeaderStaged, { style: styleToMerge }, "Staged component with two levels"),
             (0, use_slot_1.withSlots)(HeaderStandard, { style: styleToMerge }, "Standard component with two levels")))
@@ -181,13 +159,13 @@ describe('useSlots sample code test suite', function () {
         expect(wrapper).toMatchSnapshot();
     });
     /** standard props for the container */
-    var containerProps = { style: { display: 'flex', flexDirection: 'column' } };
+    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
      */
-    var colorProps = {};
-    var getColorProps = function (value) {
+    const colorProps = {};
+    const getColorProps = (value) => {
         if (value !== undefined) {
             colorProps[value] = colorProps[value] || { style: { color: value } };
             return colorProps[value];
@@ -197,19 +175,19 @@ describe('useSlots sample code test suite', function () {
     /**
      * now just create the component like a standard react functional component
      */
-    var CaptionedHeaderStandard = function (props) {
-        var headerColor = props.headerColor, captionColor = props.captionColor, captionText = props.captionText, children = props.children, rest = __rest(props, ["headerColor", "captionColor", "captionText", "children"]);
-        var headerColorProps = getColorProps(headerColor);
-        var captionColorProps = getColorProps(captionColor);
-        return ((0, use_slot_1.withSlots)("div", __assign({}, (0, merge_props_1.mergeProps)(containerProps, rest)),
-            (0, use_slot_1.withSlots)(HeaderStandard, __assign({}, headerColorProps), children),
-            captionText && (0, use_slot_1.withSlots)(BoldTextStandard, __assign({}, captionColorProps), captionText)));
+    const CaptionedHeaderStandard = (props) => {
+        const { headerColor, captionColor, captionText, children, ...rest } = props;
+        const headerColorProps = getColorProps(headerColor);
+        const captionColorProps = getColorProps(captionColor);
+        return ((0, use_slot_1.withSlots)("div", { ...(0, merge_props_1.mergeProps)(containerProps, rest) },
+            (0, use_slot_1.withSlots)(HeaderStandard, { ...headerColorProps }, children),
+            captionText && (0, use_slot_1.withSlots)(BoldTextStandard, { ...captionColorProps }, captionText)));
     };
-    CaptionedHeaderStandard.displayName = "CaptionedHeaderStandard';";
+    CaptionedHeaderStandard.displayName = `CaptionedHeaderStandard';`;
     /**
      * now build the same component using slots hook. This will also add use of the style injection pattern
      */
-    var useCaptionedHeaderSlots = (0, buildUseSlots_1.buildUseSlots)({
+    const useCaptionedHeaderSlots = (0, buildUseSlots_1.buildUseSlots)({
         /** Slots are just like above, this component will have three sub-components */
         slots: {
             container: 'div',
@@ -217,37 +195,37 @@ describe('useSlots sample code test suite', function () {
             caption: BoldTextStaged,
         },
         /** useStyling is an optional function that turns props into props for the sub-components */
-        useStyling: function (props) { return ({
+        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 */
-    var clearCustomProps = { headerColor: undefined, captionColor: undefined };
+    const clearCustomProps = { headerColor: undefined, captionColor: undefined };
     /**
      * now use the hook to implement it as a staged component
      */
-    var CaptionedHeaderStaged = (0, use_slot_1.stagedComponent)(function (props) {
+    const CaptionedHeaderStaged = (0, use_slot_1.stagedComponent)((props) => {
         // At the point where this is called the slots are initialized with the initial prop values from useStyling above
-        var Slots = useCaptionedHeaderSlots(props);
-        return function (extra, children) {
+        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
-            var _a = (0, merge_props_1.mergeProps)(props, extra, clearCustomProps), captionText = _a.captionText, rest = __rest(_a, ["captionText"]);
+            const { captionText, ...rest } = (0, merge_props_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, use_slot_1.withSlots)(Slots.container, __assign({}, rest),
+            return ((0, use_slot_1.withSlots)(Slots.container, { ...rest },
                 (0, use_slot_1.withSlots)(Slots.header, null, children),
                 captionText && (0, use_slot_1.withSlots)(Slots.caption, null, captionText)));
         };
     });
     CaptionedHeaderStaged.displayName = 'CaptionedHeaderStaged';
-    it('renders sample 3 - the two types of higher order header components', function () {
-        var styleToMerge = { backgroundColor: 'gray', borderColor: 'purple', borderWidth: 1 };
+    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.
          */
-        var wrapper = renderer
+        const wrapper = renderer
             .create((0, use_slot_1.withSlots)("div", null,
             (0, use_slot_1.withSlots)("span", null, "--- SIMPLE USAGE COMPARISON ---"),
             (0, use_slot_1.withSlots)(CaptionedHeaderStandard, { style: styleToMerge }, "Standard HOC"),

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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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/use-slots",
-  "version": "0.10.2",
+  "version": "0.10.4",
   "description": "Hook function to return styled slots",
   "repository": {
     "type": "git",
@@ -9,6 +9,13 @@
   },
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "require": "./lib-commonjs/index.js",
+      "types": "./lib/index.d.ts"
+    }
+  },
   "typings": "lib/index.d.ts",
   "scripts": {
     "build": "fluentui-scripts build",
@@ -27,19 +34,20 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@fluentui-react-native/use-slot": "0.6.2"
+    "@fluentui-react-native/use-slot": "0.6.4"
   },
   "devDependencies": {
-    "@fluentui-react-native/merge-props": "0.9.1",
+    "@babel/core": "^7.20.0",
+    "@fluentui-react-native/merge-props": "0.9.3",
     "@fluentui-react-native/scripts": "0.1.1",
-    "@react-native/babel-preset": "^0.73.0",
-    "@react-native/metro-config": "^0.73.0",
+    "@react-native/babel-preset": "^0.74.0",
+    "@react-native/metro-config": "^0.74.0",
     "react": "18.2.0",
-    "react-native": "^0.73.0"
+    "react-native": "^0.74.0"
   },
   "peerDependencies": {
     "react": "18.2.0",
-    "react-native": "^0.73.0"
+    "react-native": "^0.73.0 || ^0.74.0"
   },
   "rnx-kit": {
     "kitType": "library",
@@ -47,10 +55,16 @@
       "presets": [
         "microsoft/react-native"
       ],
-      "requirements": [
-        "react-native@0.73"
-      ],
+      "requirements": {
+        "development": [
+          "react-native@0.74"
+        ],
+        "production": [
+          "react-native@0.73 || 0.74"
+        ]
+      },
       "capabilities": [
+        "babel-preset-react-native",
         "core",
         "core-android",
         "core-ios",

package/.eslintrc.js

@@ -1,3 +0,0 @@
-module.exports = {
-  extends: ['@fluentui-react-native/eslint-config-rules'],
-};