@fluentui-react-native/stack 0.11.0 → 0.11.3

package/lib-commonjs/Stack.types.d.ts

@@ -3,14 +3,14 @@ import type { Spacing } from '@fluentui-react-native/framework';
 import type { IBackgroundColorTokens, IBorderTokens, FontTokens } from '@fluentui-react-native/tokens';
 import type { IRenderData } from '@uifabricshared/foundation-composable';
 import type { IStackItemProps } from './StackItem/StackItem.types';
-export declare const stackName = 'RNFStack';
+export declare const stackName = "RNFStack";
 /**
  * Defines a type made by the union of the different values that the align-items and justify-content flexbox
  * properties can take.
  */
 export type Alignment = ViewStyle['justifyContent'] | 'start' | 'end';
 export interface IStackStatics {
-  Item: React.FunctionComponent<IStackItemProps>;
+    Item: React.FunctionComponent<IStackItemProps>;
 }
 type SpacingGapValue = `${number}px` | `${number}` | keyof Spacing;
 /**
@@ -18,90 +18,91 @@ type SpacingGapValue = `${number}px` | `${number}` | keyof Spacing;
  * the right approach
  */
 export interface IStackTokens extends FontTokens, IBackgroundColorTokens, IBorderTokens {
-  /**
-   * Defines the spacing between Stack children.
-   * The property is specified as a value for 'row gap', followed optionally by a value for 'column gap'.
-   * If 'column gap' is omitted, it's set to the same value as 'row gap'.
-   */
-  childrenGap?: number | SpacingGapValue | `${SpacingGapValue} ${SpacingGapValue}`;
-  /**
-   * Defines a maximum height for the Stack.
-   */
-  maxHeight?: DimensionValue;
-  /**
-   * Defines a maximum width for the Stack.
-   */
-  maxWidth?: DimensionValue;
-  /**
-   * Defines the padding to be applied to the Stack contents relative to its border.
-   */
-  padding?: number | `${number}px` | keyof Spacing;
-  /**
-   * Defines whether to render Stack children horizontally.
-   * @defaultvalue false
-   */
-  horizontal?: boolean;
-  /**
-   * Defines whether to render Stack children in the opposite direction (bottom-to-top if it's a vertical Stack and
-   * right-to-left if it's a horizontal Stack).
-   * @defaultvalue false
-   */
-  reversed?: boolean;
-  /**
-   * Defines how to align Stack children horizontally (along the x-axis).
-   */
-  horizontalAlign?: Alignment;
-  /**
-   * Defines how to align Stack children vertically (along the y-axis).
-   */
-  verticalAlign?: Alignment;
-  /**
-   * Defines whether the Stack should take up 100% of the height of its parent.
-   * This property is required to be set to true when using the `grow` flag on children in vertical oriented Stacks.
-   * Stacks are rendered as block elements and grow horizontally to the container already.
-   * @defaultvalue false
-   */
-  verticalFill?: boolean;
-  /**
-   * Defines whether Stack children should not shrink to fit the available space.
-   * @defaultvalue false
-   */
-  disableShrink?: boolean;
-  /**
-   * Defines how much to grow the Stack in proportion to its siblings.
-   */
-  grow?: boolean | number;
-  /**
-   * Defines whether Stack children should wrap onto multiple rows or columns when they are about to overflow
-   * the size of the Stack.
-   * @defaultvalue false
-   */
-  wrap?: boolean;
-  /**
-   * Gap between items, multiplied by theme gap spacing
-   * Does not work while running Chakra for reasons specific to that engine (refer to https://github.com/microsoft/fluentui-react-native/issues/767)
-   */
-  gap?: number;
+    /**
+     * Defines the spacing between Stack children.
+     * The property is specified as a value for 'row gap', followed optionally by a value for 'column gap'.
+     * If 'column gap' is omitted, it's set to the same value as 'row gap'.
+     */
+    childrenGap?: number | SpacingGapValue | `${SpacingGapValue} ${SpacingGapValue}`;
+    /**
+     * Defines a maximum height for the Stack.
+     */
+    maxHeight?: DimensionValue;
+    /**
+     * Defines a maximum width for the Stack.
+     */
+    maxWidth?: DimensionValue;
+    /**
+     * Defines the padding to be applied to the Stack contents relative to its border.
+     */
+    padding?: number | `${number}px` | keyof Spacing;
+    /**
+     * Defines whether to render Stack children horizontally.
+     * @defaultvalue false
+     */
+    horizontal?: boolean;
+    /**
+     * Defines whether to render Stack children in the opposite direction (bottom-to-top if it's a vertical Stack and
+     * right-to-left if it's a horizontal Stack).
+     * @defaultvalue false
+     */
+    reversed?: boolean;
+    /**
+     * Defines how to align Stack children horizontally (along the x-axis).
+     */
+    horizontalAlign?: Alignment;
+    /**
+     * Defines how to align Stack children vertically (along the y-axis).
+     */
+    verticalAlign?: Alignment;
+    /**
+     * Defines whether the Stack should take up 100% of the height of its parent.
+     * This property is required to be set to true when using the `grow` flag on children in vertical oriented Stacks.
+     * Stacks are rendered as block elements and grow horizontally to the container already.
+     * @defaultvalue false
+     */
+    verticalFill?: boolean;
+    /**
+     * Defines whether Stack children should not shrink to fit the available space.
+     * @defaultvalue false
+     */
+    disableShrink?: boolean;
+    /**
+     * Defines how much to grow the Stack in proportion to its siblings.
+     */
+    grow?: boolean | number;
+    /**
+     * Defines whether Stack children should wrap onto multiple rows or columns when they are about to overflow
+     * the size of the Stack.
+     * @defaultvalue false
+     */
+    wrap?: boolean;
+    /**
+     * Gap between items, multiplied by theme gap spacing
+     * Does not work while running Chakra for reasons specific to that engine (refer to https://github.com/microsoft/fluentui-react-native/issues/767)
+     */
+    gap?: number;
 }
 /**
  * Base property definitions, these generally match fabric
  */
-export interface IStackProps extends IStackTokens, ViewProps {}
+export interface IStackProps extends IStackTokens, ViewProps {
+}
 export type IStackSlotProps = {
-  root: ViewProps;
-  inner: ViewProps;
+    root: ViewProps;
+    inner: ViewProps;
 };
 export interface IStackType {
-  props: IStackProps;
-  tokens: IStackTokens;
-  slotProps: IStackSlotProps;
-  statics: IStackStatics;
-  state: {
-    gap: IStackProps['gap'];
-    horizontal: IStackProps['horizontal'];
-    wrap: IStackProps['wrap'];
-  };
+    props: IStackProps;
+    tokens: IStackTokens;
+    slotProps: IStackSlotProps;
+    statics: IStackStatics;
+    state: {
+        gap: IStackProps['gap'];
+        horizontal: IStackProps['horizontal'];
+        wrap: IStackProps['wrap'];
+    };
 }
 export type IStackRenderData = IRenderData<IStackSlotProps, IStackType['state']>;
 export {};
-//# sourceMappingURL=Stack.types.d.ts.map
+//# sourceMappingURL=Stack.types.d.ts.map

package/lib-commonjs/Stack.types.js

@@ -1,5 +1,5 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.stackName = void 0;
 exports.stackName = 'RNFStack';
-//# sourceMappingURL=Stack.types.js.map
+//# sourceMappingURL=Stack.types.js.map

package/lib-commonjs/StackItem/StackItem.d.ts

@@ -2,4 +2,4 @@ import type * as React from 'react';
 import type { IStackItemProps } from './StackItem.types';
 export declare const StackItem: React.FunctionComponent<IStackItemProps>;
 export default StackItem;
-//# sourceMappingURL=StackItem.d.ts.map
+//# sourceMappingURL=StackItem.d.ts.map

package/lib-commonjs/StackItem/StackItem.js

@@ -1,17 +1,17 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.StackItem = void 0;
-const react_native_1 = require('react-native');
-const adapters_1 = require('@fluentui-react-native/adapters');
-const foundation_compose_1 = require('@uifabricshared/foundation-compose');
-const StackItem_settings_1 = require('./StackItem.settings');
-const StackItem_tokens_1 = require('./StackItem.tokens');
-const StackItem_types_1 = require('./StackItem.types');
+const react_native_1 = require("react-native");
+const adapters_1 = require("@fluentui-react-native/adapters");
+const foundation_compose_1 = require("@uifabricshared/foundation-compose");
+const StackItem_settings_1 = require("./StackItem.settings");
+const StackItem_tokens_1 = require("./StackItem.tokens");
+const StackItem_types_1 = require("./StackItem.types");
 exports.StackItem = (0, foundation_compose_1.compose)({
-  displayName: StackItem_types_1.stackItemName,
-  settings: StackItem_settings_1.settings,
-  slots: { root: { slotType: react_native_1.View, filter: adapters_1.filterViewProps } },
-  styles: { root: [StackItem_tokens_1.stackItemTokenProcessor] },
+    displayName: StackItem_types_1.stackItemName,
+    settings: StackItem_settings_1.settings,
+    slots: { root: { slotType: react_native_1.View, filter: adapters_1.filterViewProps } },
+    styles: { root: [StackItem_tokens_1.stackItemTokenProcessor] },
 });
 exports.default = exports.StackItem;
-//# sourceMappingURL=StackItem.js.map
+//# sourceMappingURL=StackItem.js.map

package/lib-commonjs/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-commonjs/StackItem/StackItem.settings.js

@@ -1,15 +1,15 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.settings = void 0;
-const StackItem_types_1 = require('./StackItem.types');
+const StackItem_types_1 = require("./StackItem.types");
 exports.settings = [
-  {
-    root: {
-      style: {
-        width: 'auto',
-      },
+    {
+        root: {
+            style: {
+                width: 'auto',
+            },
+        },
     },
-  },
-  StackItem_types_1.stackItemName,
+    StackItem_types_1.stackItemName,
 ];
-//# sourceMappingURL=StackItem.settings.js.map
+//# sourceMappingURL=StackItem.settings.js.map

package/lib-commonjs/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-commonjs/StackItem/StackItem.tokens.js

@@ -1,24 +1,24 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.stackItemTokenProcessor = void 0;
 exports._processor = _processor;
-const foundation_tokens_1 = require('@uifabricshared/foundation-tokens');
+const foundation_tokens_1 = require("@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'];
 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,
+        },
+    };
 }
 exports.stackItemTokenProcessor = (0, foundation_tokens_1.styleFunction)(_processor, _keyProps);
-//# sourceMappingURL=StackItem.tokens.js.map
+//# sourceMappingURL=StackItem.tokens.js.map

package/lib-commonjs/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-commonjs/StackItem/StackItem.types.js

@@ -1,5 +1,5 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.stackItemName = void 0;
 exports.stackItemName = 'RNFStackItem';
-//# sourceMappingURL=StackItem.types.js.map
+//# sourceMappingURL=StackItem.types.js.map

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

@@ -1,5 +1,5 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseGap = parseGap;
 exports.parsePadding = parsePadding;
 /**
@@ -9,15 +9,15 @@ exports.parsePadding = parsePadding;
 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")
@@ -26,36 +26,38 @@ const _getThemedSpacing = (space, theme) => {
  *  and the CSS unit (e.g. "px").
  */
 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")
  */
 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-commonjs/StackUtils.test.win32.d.ts

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