@fluentui-react-native/stack 0.11.0 → 0.11.1

package/lib/StackItem/StackItem.settings.d.ts

@@ -1,4 +1,4 @@
 import type { IComposeSettings } from '@uifabricshared/foundation-compose';
 import type { IStackItemType } from './StackItem.types';
 export declare const settings: IComposeSettings<IStackItemType>;
-//# sourceMappingURL=StackItem.settings.d.ts.map
+//# sourceMappingURL=StackItem.settings.d.ts.map

package/lib/StackItem/StackItem.settings.js

@@ -1,12 +1,12 @@
 import { stackItemName } from './StackItem.types';
 export const settings = [
-  {
-    root: {
-      style: {
-        width: 'auto',
-      },
+    {
+        root: {
+            style: {
+                width: 'auto',
+            },
+        },
     },
-  },
-  stackItemName,
+    stackItemName,
 ];
-//# sourceMappingURL=StackItem.settings.js.map
+//# sourceMappingURL=StackItem.settings.js.map

package/lib/StackItem/StackItem.tokens.d.ts

@@ -2,9 +2,5 @@ import type { ViewProps } from 'react-native';
 import type { Theme } from '@fluentui-react-native/framework';
 import type { IStackItemTokens } from './StackItem.types';
 export declare function _processor(tokenProps: IStackItemTokens): ViewProps;
-export declare const stackItemTokenProcessor: import('@fluentui-react-native/tokens').StyleFactoryFunction<
-  ViewProps,
-  IStackItemTokens,
-  Theme
->;
-//# sourceMappingURL=StackItem.tokens.d.ts.map
+export declare const stackItemTokenProcessor: import("@fluentui-react-native/tokens").StyleFactoryFunction<ViewProps, IStackItemTokens, Theme>;
+//# sourceMappingURL=StackItem.tokens.d.ts.map

package/lib/StackItem/StackItem.tokens.js

@@ -1,20 +1,20 @@
 import { styleFunction } from '@uifabricshared/foundation-tokens';
 const alignMap = {
-  start: 'flex-start',
-  end: 'flex-end',
+    start: 'flex-start',
+    end: 'flex-end',
 };
 const _keyProps = ['align', 'disableShrink', 'grow', 'margin', 'shrink', 'verticalFill'];
 export function _processor(tokenProps) {
-  const { grow, shrink, disableShrink, align, verticalFill, margin } = tokenProps;
-  return {
-    style: {
-      margin,
-      height: verticalFill ? '100%' : 'auto',
-      flexShrink: disableShrink || (!grow && !shrink) ? 0 : 1,
-      flexGrow: typeof grow === 'number' ? grow : grow ? 1 : undefined,
-      alignSelf: (align && alignMap[align]) || undefined,
-    },
-  };
+    const { grow, shrink, disableShrink, align, verticalFill, margin } = tokenProps;
+    return {
+        style: {
+            margin,
+            height: verticalFill ? '100%' : 'auto',
+            flexShrink: disableShrink || (!grow && !shrink) ? 0 : 1,
+            flexGrow: typeof grow === 'number' ? grow : grow ? 1 : undefined,
+            alignSelf: (align && alignMap[align]) || undefined,
+        },
+    };
 }
 export const stackItemTokenProcessor = styleFunction(_processor, _keyProps);
-//# sourceMappingURL=StackItem.tokens.js.map
+//# sourceMappingURL=StackItem.tokens.js.map

package/lib/StackItem/StackItem.types.d.ts

@@ -1,52 +1,52 @@
 import type { DimensionValue, ViewProps } from 'react-native';
-export declare const stackItemName = 'RNFStackItem';
+export declare const stackItemName = "RNFStackItem";
 /**
  * Stack item props
  */
 export interface IStackItemTokens extends ViewProps {
-  /**
-   * Defines the margin to be applied to the StackItem relative to its container.
-   */
-  margin?: DimensionValue;
-  /**
-   * Defines the padding to be applied to the StackItem contents relative to its border.
-   */
-  padding?: DimensionValue;
-  /**
-   * Defines how much to grow the StackItem in proportion to its siblings.
-   */
-  grow?: boolean | number | 'inherit' | 'initial' | 'unset';
-  /**
-   * Defines at what ratio should the StackItem shrink to fit the available space.
-   */
-  shrink?: boolean | number | 'inherit' | 'initial' | 'unset';
-  /**
-   * Defines whether the StackItem should be prevented from shrinking.
-   * This can be used to prevent a StackItem from shrinking when it is inside of a Stack that has shrinking items.
-   * @defaultvalue false
-   */
-  disableShrink?: boolean;
-  /**
-   * Defines how to align the StackItem along the x-axis (for vertical Stacks) or the y-axis (for horizontal Stacks).
-   */
-  align?: 'auto' | 'stretch' | 'baseline' | 'start' | 'center' | 'end';
-  /**
-   * Defines whether the StackItem should take up 100% of the height of its parent.
-   * @defaultvalue true
-   */
-  verticalFill?: boolean;
-  /**
-   * Defines order of the StackItem.
-   * @defaultvalue 0
-   */
-  order?: number | string;
+    /**
+     * Defines the margin to be applied to the StackItem relative to its container.
+     */
+    margin?: DimensionValue;
+    /**
+     * Defines the padding to be applied to the StackItem contents relative to its border.
+     */
+    padding?: DimensionValue;
+    /**
+     * Defines how much to grow the StackItem in proportion to its siblings.
+     */
+    grow?: boolean | number | 'inherit' | 'initial' | 'unset';
+    /**
+     * Defines at what ratio should the StackItem shrink to fit the available space.
+     */
+    shrink?: boolean | number | 'inherit' | 'initial' | 'unset';
+    /**
+     * Defines whether the StackItem should be prevented from shrinking.
+     * This can be used to prevent a StackItem from shrinking when it is inside of a Stack that has shrinking items.
+     * @defaultvalue false
+     */
+    disableShrink?: boolean;
+    /**
+     * Defines how to align the StackItem along the x-axis (for vertical Stacks) or the y-axis (for horizontal Stacks).
+     */
+    align?: 'auto' | 'stretch' | 'baseline' | 'start' | 'center' | 'end';
+    /**
+     * Defines whether the StackItem should take up 100% of the height of its parent.
+     * @defaultvalue true
+     */
+    verticalFill?: boolean;
+    /**
+     * Defines order of the StackItem.
+     * @defaultvalue 0
+     */
+    order?: number | string;
 }
 export type IStackItemProps = IStackItemTokens & ViewProps;
 export interface IStackItemType {
-  props: IStackItemProps;
-  slotProps: {
-    root: ViewProps;
-  };
-  tokens: IStackItemTokens;
+    props: IStackItemProps;
+    slotProps: {
+        root: ViewProps;
+    };
+    tokens: IStackItemTokens;
 }
-//# sourceMappingURL=StackItem.types.d.ts.map
+//# sourceMappingURL=StackItem.types.d.ts.map

package/lib/StackItem/StackItem.types.js

@@ -1,2 +1,2 @@
 export const stackItemName = 'RNFStackItem';
-//# sourceMappingURL=StackItem.types.js.map
+//# sourceMappingURL=StackItem.types.js.map

package/lib/StackUtils.d.ts

@@ -1,7 +1,7 @@
 import type { Spacing, Theme } from '@fluentui-react-native/framework';
 export interface IParseGapResult {
-  rowGap: number;
-  columnGap: number;
+    rowGap: number;
+    columnGap: number;
 }
 type SpacingGapValue = `${number}px` | `${number}` | keyof Spacing;
 /**
@@ -10,14 +10,11 @@ type SpacingGapValue = `${number}px` | `${number}` | keyof Spacing;
  * Returns the separate numerical value of the padding (e.g. 10)
  *  and the CSS unit (e.g. "px").
  */
-export declare function parseGap(
-  gap: number | SpacingGapValue | `${SpacingGapValue} ${SpacingGapValue}` | undefined,
-  theme: Theme,
-): IParseGapResult;
+export declare function parseGap(gap: number | SpacingGapValue | `${SpacingGapValue} ${SpacingGapValue}` | undefined, theme: Theme): IParseGapResult;
 /**
  * Takes in a padding in a CSS-style format (e.g. 10, "10px"), or a key of a themed spacing value
  *  (e.g. "s1")
  */
 export declare function parsePadding(padding: keyof Spacing | number | `${number}px` | undefined, theme: Theme): number | undefined;
 export {};
-//# sourceMappingURL=StackUtils.d.ts.map
+//# sourceMappingURL=StackUtils.d.ts.map

package/lib/StackUtils.js

@@ -5,15 +5,15 @@
 const _spacingKey = 'spacing';
 // Helper function that converts a themed spacing key (if given) to the corresponding themed spacing value.
 const _getThemedSpacing = (space, theme) => {
-  const spacing = theme[_spacingKey];
-  if (spacing && typeof spacing === 'object' && typeof space === 'string') {
-    if (spacing.hasOwnProperty(space)) {
-      space = spacing[space];
+    const spacing = theme[_spacingKey];
+    if (spacing && typeof spacing === 'object' && typeof space === 'string') {
+        if (spacing.hasOwnProperty(space)) {
+            space = spacing[space];
+        }
     }
-  }
-  const numericalPart = parseFloat(space);
-  const numericalValue = isNaN(numericalPart) ? 0 : numericalPart;
-  return numericalValue;
+    const numericalPart = parseFloat(space);
+    const numericalValue = isNaN(numericalPart) ? 0 : numericalPart;
+    return numericalValue;
 };
 /**
  * Takes in a gap size in either a CSS-style format (e.g. 10 or "10px")
@@ -22,36 +22,38 @@ const _getThemedSpacing = (space, theme) => {
  *  and the CSS unit (e.g. "px").
  */
 export function parseGap(gap, theme) {
-  const result = {
-    rowGap: 0,
-    columnGap: 0,
-  };
-  if (gap) {
-    if (typeof gap === 'number') {
-      result.rowGap = gap;
-      result.columnGap = gap;
-    } else {
-      const splitGap = gap.split(' ');
-      if (splitGap.length === 2) {
-        result.rowGap = _getThemedSpacing(splitGap[0], theme);
-        result.columnGap = _getThemedSpacing(splitGap[1], theme);
-      } else {
-        const calculatedGap = _getThemedSpacing(gap, theme);
-        result.rowGap = calculatedGap;
-        result.columnGap = calculatedGap;
-      }
+    const result = {
+        rowGap: 0,
+        columnGap: 0,
+    };
+    if (gap) {
+        if (typeof gap === 'number') {
+            result.rowGap = gap;
+            result.columnGap = gap;
+        }
+        else {
+            const splitGap = gap.split(' ');
+            if (splitGap.length === 2) {
+                result.rowGap = _getThemedSpacing(splitGap[0], theme);
+                result.columnGap = _getThemedSpacing(splitGap[1], theme);
+            }
+            else {
+                const calculatedGap = _getThemedSpacing(gap, theme);
+                result.rowGap = calculatedGap;
+                result.columnGap = calculatedGap;
+            }
+        }
     }
-  }
-  return result;
+    return result;
 }
 /**
  * Takes in a padding in a CSS-style format (e.g. 10, "10px"), or a key of a themed spacing value
  *  (e.g. "s1")
  */
 export function parsePadding(padding, theme) {
-  if (padding === undefined || typeof padding === 'number') {
-    return padding;
-  }
-  return _getThemedSpacing(padding, theme);
+    if (padding === undefined || typeof padding === 'number') {
+        return padding;
+    }
+    return _getThemedSpacing(padding, theme);
 }
-//# sourceMappingURL=StackUtils.js.map
+//# sourceMappingURL=StackUtils.js.map

package/lib/StackUtils.test.win32.d.ts

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

package/lib/StackUtils.test.win32.js

@@ -1,54 +1,54 @@
 import { parseGap, parsePadding } from './StackUtils';
 describe('StackUtils', () => {
-  describe('parseGap', () => {
-    const theme = {
-      spacing: { m: '16em' },
-    };
-    it('returns a default value when given undefined', () => {
-      expect(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(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(parseGap(10, theme)).toEqual({ rowGap: { value: 10, unit: 'px' }, columnGap: { value: 10, unit: 'px' } });
+        });
+        it('can parse a string with px', () => {
+            expect(parseGap('32px', theme)).toEqual({ rowGap: { value: 32, unit: 'px' }, columnGap: { value: 32, unit: 'px' } });
+        });
+        it('can parse a string with a float', () => {
+            expect(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(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(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(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(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(parsePadding(undefined, theme)).toEqual(undefined);
+            expect(parsePadding(0, theme)).toEqual(0);
+        });
+        it('returns its argument when given a CSS-style padding', () => {
+            expect(parsePadding('10px', theme)).toEqual('10px');
+        });
+        it('converts themed spacing keys to CSS-style paddings', () => {
+            expect(parsePadding('s2', theme)).toEqual('5px');
+        });
     });
-    it('returns a value with px when given a number', () => {
-      expect(parseGap(10, theme)).toEqual({ rowGap: { value: 10, unit: 'px' }, columnGap: { value: 10, unit: 'px' } });
-    });
-    it('can parse a string with px', () => {
-      expect(parseGap('32px', theme)).toEqual({ rowGap: { value: 32, unit: 'px' }, columnGap: { value: 32, unit: 'px' } });
-    });
-    it('can parse a string with a float', () => {
-      expect(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(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(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(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(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(parsePadding(undefined, theme)).toEqual(undefined);
-      expect(parsePadding(0, theme)).toEqual(0);
-    });
-    it('returns its argument when given a CSS-style padding', () => {
-      expect(parsePadding('10px', theme)).toEqual('10px');
-    });
-    it('converts themed spacing keys to CSS-style paddings', () => {
-      expect(parsePadding('s2', theme)).toEqual('5px');
-    });
-  });
 });
-//# sourceMappingURL=StackUtils.test.win32.js.map
+//# sourceMappingURL=StackUtils.test.win32.js.map

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

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

package/lib/__tests__/Stack.test.js

@@ -1,20 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { act } from 'react';
 import { Text } from '@fluentui-react-native/text';
 import * as renderer from 'react-test-renderer';
 import { Stack } from '..';
 it('Stack with tokens', () => {
-  let component;
-  act(() => {
-    component = renderer.create(
-      _jsxs(Stack, {
-        maxWidth: 400,
-        gap: 8,
-        padding: 16,
-        children: [_jsx(Text, { children: 'Hello' }), _jsx(Text, { children: 'Hello' }), _jsx(Text, { children: 'Hello' })],
-      }),
-    );
-  });
-  expect(component.toJSON()).toMatchSnapshot();
+    let component;
+    act(() => {
+        component = renderer.create(_jsxs(Stack, { maxWidth: 400, gap: 8, padding: 16, children: [
+                _jsx(Text, { children: "Hello" }), _jsx(Text, { children: "Hello" }), _jsx(Text, { children: "Hello" })
+            ] }));
+    });
+    expect(component.toJSON()).toMatchSnapshot();
 });
-//# sourceMappingURL=Stack.test.js.map
+//# sourceMappingURL=Stack.test.js.map

package/lib/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/index.js

@@ -2,4 +2,4 @@ export { stackItemName } from './StackItem/StackItem.types';
 export { StackItem } from './StackItem/StackItem';
 export { stackName } from './Stack.types';
 export { Stack } from './Stack';
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/lib-commonjs/Stack.d.ts

@@ -1,21 +1,15 @@
 import type { IStackProps, IStackSlotProps } from './Stack.types';
 declare global {
-  namespace NodeJS {
-    interface Global {
-      __jsiExecutorDescription: any;
+    namespace NodeJS {
+        interface Global {
+            __jsiExecutorDescription: any;
+        }
     }
-  }
 }
-export declare const Stack: import('@uifabricshared/foundation-compose').IComposeReturnType<
-  IStackProps,
-  IStackSlotProps,
-  import('./Stack.types').IStackTokens,
-  {
+export declare const Stack: import("@uifabricshared/foundation-compose").IComposeReturnType<IStackProps, IStackSlotProps, import("./Stack.types").IStackTokens, {
     gap: number;
     horizontal: boolean;
     wrap: boolean;
-  },
-  import('./Stack.types').IStackStatics
->;
+}, import("./Stack.types").IStackStatics>;
 export default Stack;
-//# sourceMappingURL=Stack.d.ts.map
+//# sourceMappingURL=Stack.d.ts.map