@fluentui-react-native/stack 0.11.0 → 0.11.3

package/lib-commonjs/StackUtils.test.win32.js

@@ -1,74 +1,56 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const StackUtils_1 = require('./StackUtils');
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const StackUtils_1 = require("./StackUtils");
 describe('StackUtils', () => {
-  describe('parseGap', () => {
-    const theme = {
-      spacing: { m: '16em' },
-    };
-    it('returns a default value when given undefined', () => {
-      expect((0, StackUtils_1.parseGap)(undefined, theme)).toEqual({
-        rowGap: { value: 0, unit: 'px' },
-        columnGap: { value: 0, unit: 'px' },
-      });
+    describe('parseGap', () => {
+        const theme = {
+            spacing: { m: '16em' },
+        };
+        it('returns a default value when given undefined', () => {
+            expect((0, StackUtils_1.parseGap)(undefined, theme)).toEqual({ rowGap: { value: 0, unit: 'px' }, columnGap: { value: 0, unit: 'px' } });
+        });
+        it('returns a value with px when given a number', () => {
+            expect((0, StackUtils_1.parseGap)(10, theme)).toEqual({ rowGap: { value: 10, unit: 'px' }, columnGap: { value: 10, unit: 'px' } });
+        });
+        it('can parse a string with px', () => {
+            expect((0, StackUtils_1.parseGap)('32px', theme)).toEqual({ rowGap: { value: 32, unit: 'px' }, columnGap: { value: 32, unit: 'px' } });
+        });
+        it('can parse a string with a float', () => {
+            expect((0, StackUtils_1.parseGap)('20.5px', theme)).toEqual({ rowGap: { value: 20.5, unit: 'px' }, columnGap: { value: 20.5, unit: 'px' } });
+        });
+        it('parses the value from the theme when given a spacing key', () => {
+            expect((0, StackUtils_1.parseGap)('m', theme)).toEqual({ rowGap: { value: 16, unit: 'em' }, columnGap: { value: 16, unit: 'em' } });
+        });
+        it('can parse a string with both horizontal and vertical gap', () => {
+            expect((0, StackUtils_1.parseGap)('30px 10px', theme)).toEqual({ rowGap: { value: 30, unit: 'px' }, columnGap: { value: 10, unit: 'px' } });
+        });
+        it('defaults to px with a string with horizontal and vertical gap with no units', () => {
+            expect((0, StackUtils_1.parseGap)('50 30', theme)).toEqual({ rowGap: { value: 50, unit: 'px' }, columnGap: { value: 30, unit: 'px' } });
+        });
+        it('can parse a string with horizontal and vertical gap with one of them getting value from the theme when given a spacing key', () => {
+            expect((0, StackUtils_1.parseGap)('50px m', theme)).toEqual({ rowGap: { value: 50, unit: 'px' }, columnGap: { value: 16, unit: 'em' } });
+        });
+    });
+    describe('parsePadding', () => {
+        const theme = {
+            spacing: {
+                s2: '5px',
+                s1: '10px',
+                m: '15px',
+                l1: '20px',
+                l2: '25px',
+            },
+        };
+        it('returns its argument when given undefined, a number, or an empty string', () => {
+            expect((0, StackUtils_1.parsePadding)(undefined, theme)).toEqual(undefined);
+            expect((0, StackUtils_1.parsePadding)(0, theme)).toEqual(0);
+        });
+        it('returns its argument when given a CSS-style padding', () => {
+            expect((0, StackUtils_1.parsePadding)('10px', theme)).toEqual('10px');
+        });
+        it('converts themed spacing keys to CSS-style paddings', () => {
+            expect((0, StackUtils_1.parsePadding)('s2', theme)).toEqual('5px');
+        });
     });
-    it('returns a value with px when given a number', () => {
-      expect((0, StackUtils_1.parseGap)(10, theme)).toEqual({ rowGap: { value: 10, unit: 'px' }, columnGap: { value: 10, unit: 'px' } });
-    });
-    it('can parse a string with px', () => {
-      expect((0, StackUtils_1.parseGap)('32px', theme)).toEqual({
-        rowGap: { value: 32, unit: 'px' },
-        columnGap: { value: 32, unit: 'px' },
-      });
-    });
-    it('can parse a string with a float', () => {
-      expect((0, StackUtils_1.parseGap)('20.5px', theme)).toEqual({
-        rowGap: { value: 20.5, unit: 'px' },
-        columnGap: { value: 20.5, unit: 'px' },
-      });
-    });
-    it('parses the value from the theme when given a spacing key', () => {
-      expect((0, StackUtils_1.parseGap)('m', theme)).toEqual({ rowGap: { value: 16, unit: 'em' }, columnGap: { value: 16, unit: 'em' } });
-    });
-    it('can parse a string with both horizontal and vertical gap', () => {
-      expect((0, StackUtils_1.parseGap)('30px 10px', theme)).toEqual({
-        rowGap: { value: 30, unit: 'px' },
-        columnGap: { value: 10, unit: 'px' },
-      });
-    });
-    it('defaults to px with a string with horizontal and vertical gap with no units', () => {
-      expect((0, StackUtils_1.parseGap)('50 30', theme)).toEqual({
-        rowGap: { value: 50, unit: 'px' },
-        columnGap: { value: 30, unit: 'px' },
-      });
-    });
-    it('can parse a string with horizontal and vertical gap with one of them getting value from the theme when given a spacing key', () => {
-      expect((0, StackUtils_1.parseGap)('50px m', theme)).toEqual({
-        rowGap: { value: 50, unit: 'px' },
-        columnGap: { value: 16, unit: 'em' },
-      });
-    });
-  });
-  describe('parsePadding', () => {
-    const theme = {
-      spacing: {
-        s2: '5px',
-        s1: '10px',
-        m: '15px',
-        l1: '20px',
-        l2: '25px',
-      },
-    };
-    it('returns its argument when given undefined, a number, or an empty string', () => {
-      expect((0, StackUtils_1.parsePadding)(undefined, theme)).toEqual(undefined);
-      expect((0, StackUtils_1.parsePadding)(0, theme)).toEqual(0);
-    });
-    it('returns its argument when given a CSS-style padding', () => {
-      expect((0, StackUtils_1.parsePadding)('10px', theme)).toEqual('10px');
-    });
-    it('converts themed spacing keys to CSS-style paddings', () => {
-      expect((0, StackUtils_1.parsePadding)('s2', theme)).toEqual('5px');
-    });
-  });
 });
-//# sourceMappingURL=StackUtils.test.win32.js.map
+//# sourceMappingURL=StackUtils.test.win32.js.map

package/lib-commonjs/__tests__/Stack.test.d.ts

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

package/lib-commonjs/__tests__/Stack.test.js

@@ -1,76 +1,50 @@
-'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;
+"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 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;
+        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('react/jsx-runtime');
-const react_1 = require('react');
-const text_1 = require('@fluentui-react-native/text');
-const renderer = __importStar(require('react-test-renderer'));
-const __1 = require('..');
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const text_1 = require("@fluentui-react-native/text");
+const renderer = __importStar(require("react-test-renderer"));
+const __1 = require("..");
 it('Stack with tokens', () => {
-  let component;
-  (0, react_1.act)(() => {
-    component = renderer.create(
-      jsx_runtime_1.jsxs(__1.Stack, {
-        maxWidth: 400,
-        gap: 8,
-        padding: 16,
-        children: [
-          jsx_runtime_1.jsx(text_1.Text, { children: 'Hello' }),
-          jsx_runtime_1.jsx(text_1.Text, { children: 'Hello' }),
-          jsx_runtime_1.jsx(text_1.Text, { children: 'Hello' }),
-        ],
-      }),
-    );
-  });
-  expect(component.toJSON()).toMatchSnapshot();
+    let component;
+    (0, react_1.act)(() => {
+        component = renderer.create(jsx_runtime_1.jsxs(__1.Stack, { maxWidth: 400, gap: 8, padding: 16, children: [
+                jsx_runtime_1.jsx(text_1.Text, { children: "Hello" }), jsx_runtime_1.jsx(text_1.Text, { children: "Hello" }), jsx_runtime_1.jsx(text_1.Text, { children: "Hello" })
+            ] }));
+    });
+    expect(component.toJSON()).toMatchSnapshot();
 });
-//# sourceMappingURL=Stack.test.js.map
+//# sourceMappingURL=Stack.test.js.map

package/lib-commonjs/index.d.ts

@@ -4,4 +4,4 @@ export { StackItem } from './StackItem/StackItem';
 export { stackName } from './Stack.types';
 export type { Alignment, IStackProps, IStackRenderData, IStackSlotProps, IStackStatics, IStackTokens, IStackType } from './Stack.types';
 export { Stack } from './Stack';
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/lib-commonjs/index.js

@@ -1,32 +1,12 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Stack = exports.stackName = exports.StackItem = exports.stackItemName = void 0;
-const StackItem_types_1 = require('./StackItem/StackItem.types');
-Object.defineProperty(exports, 'stackItemName', {
-  enumerable: true,
-  get: function () {
-    return StackItem_types_1.stackItemName;
-  },
-});
-const StackItem_1 = require('./StackItem/StackItem');
-Object.defineProperty(exports, 'StackItem', {
-  enumerable: true,
-  get: function () {
-    return StackItem_1.StackItem;
-  },
-});
-const Stack_types_1 = require('./Stack.types');
-Object.defineProperty(exports, 'stackName', {
-  enumerable: true,
-  get: function () {
-    return Stack_types_1.stackName;
-  },
-});
-const Stack_1 = require('./Stack');
-Object.defineProperty(exports, 'Stack', {
-  enumerable: true,
-  get: function () {
-    return Stack_1.Stack;
-  },
-});
-//# sourceMappingURL=index.js.map
+const StackItem_types_1 = require("./StackItem/StackItem.types");
+Object.defineProperty(exports, "stackItemName", { enumerable: true, get: function () { return StackItem_types_1.stackItemName; } });
+const StackItem_1 = require("./StackItem/StackItem");
+Object.defineProperty(exports, "StackItem", { enumerable: true, get: function () { return StackItem_1.StackItem; } });
+const Stack_types_1 = require("./Stack.types");
+Object.defineProperty(exports, "stackName", { enumerable: true, get: function () { return Stack_types_1.stackName; } });
+const Stack_1 = require("./Stack");
+Object.defineProperty(exports, "Stack", { enumerable: true, get: function () { return Stack_1.Stack; } });
+//# sourceMappingURL=index.js.map

package/package.json

@@ -1,72 +1,73 @@
 {
   "name": "@fluentui-react-native/stack",
-  "version": "0.11.0",
+  "version": "0.11.3",
   "description": "A cross-platform opinionated Fluent Text component",
+  "license": "MIT",
+  "author": "",
   "repository": {
     "type": "git",
     "url": "https://github.com/microsoft/fluentui-react-native.git",
     "directory": "packages/components/Stack"
   },
-  "license": "MIT",
-  "author": "",
+  "main": "lib-commonjs/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
   "exports": {
     ".": {
       "types": "./lib/index.d.ts",
       "import": "./lib/index.js",
-      "require": "./lib-commonjs/index.js"
+      "require": "./lib-commonjs/index.js",
+      "default": "./src/index.ts"
     }
   },
-  "main": "lib-commonjs/index.js",
-  "module": "lib/index.js",
-  "types": "lib/index.d.ts",
   "scripts": {
     "build": "fluentui-scripts build",
     "build-cjs": "tsgo --outDir lib-commonjs",
-    "build-esm": "tsgo --outDir lib --module esnext --moduleResolution bundler",
+    "build-core": "tsgo --outDir lib --module esnext --moduleResolution bundler",
     "clean": "fluentui-scripts clean",
     "depcheck": "fluentui-scripts depcheck",
-    "lint": "fluentui-scripts eslint",
+    "format": "fluentui-scripts format",
+    "lint": "fluentui-scripts lint",
     "lint-package": "fluentui-scripts lint-package",
-    "prettier": "fluentui-scripts prettier",
     "test": "fluentui-scripts jest",
     "update-snapshots": "fluentui-scripts jest -u"
   },
   "dependencies": {
-    "@fluentui-react-native/adapters": "0.14.0",
-    "@fluentui-react-native/framework": "0.15.0",
-    "@fluentui-react-native/tokens": "0.24.0",
-    "@uifabricshared/foundation-composable": "0.14.0",
-    "@uifabricshared/foundation-compose": "1.16.0",
-    "@uifabricshared/foundation-settings": "0.16.0",
-    "@uifabricshared/foundation-tokens": "0.16.0"
+    "@fluentui-react-native/adapters": "0.14.3",
+    "@fluentui-react-native/framework": "0.15.3",
+    "@fluentui-react-native/tokens": "0.24.3",
+    "@uifabricshared/foundation-composable": "0.14.3",
+    "@uifabricshared/foundation-compose": "1.16.3",
+    "@uifabricshared/foundation-settings": "0.16.3",
+    "@uifabricshared/foundation-tokens": "0.16.3"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@fluentui-react-native/babel-config": "0.1.1",
-    "@fluentui-react-native/eslint-config-rules": "0.1.1",
-    "@fluentui-react-native/framework-base": "0.3.0",
-    "@fluentui-react-native/jest-config": "0.1.1",
+    "@fluentui-react-native/framework-base": "0.3.3",
+    "@fluentui-react-native/jest-config": "0.1.0",
     "@fluentui-react-native/kit-config": "0.1.2",
-    "@fluentui-react-native/scripts": "0.1.2",
-    "@fluentui-react-native/text": "0.25.0",
+    "@fluentui-react-native/lint-config-rules": "0.1.3",
+    "@fluentui-react-native/scripts": "0.1.0",
+    "@fluentui-react-native/text": "0.25.3",
     "@react-native-community/cli": "^20.0.0",
     "@react-native-community/cli-platform-android": "^20.0.0",
     "@react-native-community/cli-platform-ios": "^20.0.0",
     "@react-native/babel-preset": "^0.81.0",
     "@react-native/metro-config": "^0.81.0",
-    "@types/react": "~19.1.0",
+    "@types/react": "~19.1.4",
     "@types/react-test-renderer": "^19.1.0",
-    "react": "19.1.0",
-    "react-native": "^0.81.0",
+    "react": "19.1.4",
+    "react-native": "^0.81.6",
     "react-native-macos": "^0.81.0",
     "react-native-windows": "^0.81.0",
-    "react-test-renderer": "19.1.0"
+    "react-test-renderer": "19.1.4"
   },
   "peerDependencies": {
     "@office-iss/react-native-win32": "^0.74.0",
-    "@types/react": "~18.2.0 || ~19.0.0 || ~19.1.0",
-    "react": "18.2.0 || 19.0.0 || 19.1.0",
-    "react-native": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0",
+    "@types/react": "~18.2.0 || ~19.0.0 || ~19.1.4",
+    "react": "18.2.0 || 19.0.0 || 19.1.4",
+    "react-native": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.6",
     "react-native-macos": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0",
     "react-native-windows": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0"
   },

package/src/Stack.tsx

@@ -41,7 +41,7 @@ const render = (Slots: ISlots<IStackSlotProps>, renderData: IStackRenderData, ..
   if (gap && gap > 0 && children && globalThis.__jsiExecutorDescription !== 'ChakraRuntime') {
     const extraStyle: ViewStyle = horizontal ? { marginLeft: gap } : { marginTop: gap };
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore - TODO, fix typing error
+    // @ts-expect-error - TODO, fix typing error
     children = React.Children.map(children, (child: React.ReactChild, index: number) => {
       if (React.isValidElement(child) && index > 0) {
         const childProps = child.props as ObjectBase;

package/eslint.config.js

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