@fluentui-react-native/stack 0.11.0 → 0.11.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Change Log - @fluentui-react-native/stack
 
+## 0.11.1
+
+### Patch Changes
+
+- 0d6e9c1: chore: migrate to `oxfmt`
+- ac6e7af: Ensure packages have a default export that references the typescript entrypoint and clean up build dependency ordering
+- Updated dependencies [0d6e9c1]
+- Updated dependencies [ac6e7af]
+  - @uifabricshared/foundation-composable@0.14.1
+  - @uifabricshared/foundation-settings@0.16.1
+  - @uifabricshared/foundation-compose@1.16.1
+  - @uifabricshared/foundation-tokens@0.16.1
+  - @fluentui-react-native/framework@0.15.1
+  - @fluentui-react-native/adapters@0.14.1
+  - @fluentui-react-native/tokens@0.24.1
+
 ## 0.11.0
 
 ### Minor Changes

package/lib/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

package/lib/Stack.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from '@fluentui-react-native/framework-base/jsx-runtime';
+import { jsx as _jsx } from "@fluentui-react-native/framework-base/jsx-runtime";
 /** @jsxImportSource @fluentui-react-native/framework-base */
 import * as React from 'react';
 import { View } from 'react-native';
@@ -11,54 +11,54 @@ import { buildStackRootStyles, buildStackInnerStyles } from './Stack.tokens';
 import { stackName } from './Stack.types';
 import StackItem from './StackItem/StackItem';
 function _mixinStyle(style, mixin) {
-  return style ? [style, mixin] : mixin;
+    return style ? [style, mixin] : mixin;
 }
 const _styleKey = 'style';
 const render = (Slots, renderData, ...children) => {
-  const { gap, horizontal, wrap } = renderData.state;
-  if (gap && gap > 0 && children && globalThis.__jsiExecutorDescription !== 'ChakraRuntime') {
-    const extraStyle = horizontal ? { marginLeft: gap } : { marginTop: gap };
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore - TODO, fix typing error
-    children = React.Children.map(children, (child, index) => {
-      if (React.isValidElement(child) && index > 0) {
-        const childProps = child.props;
-        const extraProps = { style: _mixinStyle(childProps[_styleKey], extraStyle) };
-        return React.cloneElement(child, {
-          ...childProps,
-          ...extraProps,
+    const { gap, horizontal, wrap } = renderData.state;
+    if (gap && gap > 0 && children && globalThis.__jsiExecutorDescription !== 'ChakraRuntime') {
+        const extraStyle = horizontal ? { marginLeft: gap } : { marginTop: gap };
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore - TODO, fix typing error
+        children = React.Children.map(children, (child, index) => {
+            if (React.isValidElement(child) && index > 0) {
+                const childProps = child.props;
+                const extraProps = { style: _mixinStyle(childProps[_styleKey], extraStyle) };
+                return React.cloneElement(child, {
+                    ...childProps,
+                    ...extraProps,
+                });
+            }
+            return child;
         });
-      }
-      return child;
-    });
-  }
-  if (wrap) {
-    return _jsx(Slots.root, { children: _jsx(Slots.inner, { children: children }) });
-  }
-  return _jsx(Slots.root, { children: children });
+    }
+    if (wrap) {
+        return (_jsx(Slots.root, { children: _jsx(Slots.inner, { children: children }) }));
+    }
+    return _jsx(Slots.root, { children: children });
 };
 export const Stack = compose({
-  displayName: stackName,
-  settings,
-  statics: {
-    Item: StackItem,
-  },
-  usePrepareProps: (props, useStyling) => {
-    const { gap, horizontal, wrap, ...rest } = props;
-    return {
-      slotProps: mergeSettings(useStyling(props), { root: rest }),
-      state: { gap, horizontal, wrap },
-    };
-  },
-  render: render,
-  slots: {
-    root: { slotType: View, filter: filterViewProps },
-    inner: { slotType: View, filter: filterViewProps },
-  },
-  styles: {
-    root: [buildStackRootStyles, backgroundColorTokens, borderTokens],
-    inner: [buildStackInnerStyles],
-  },
+    displayName: stackName,
+    settings,
+    statics: {
+        Item: StackItem,
+    },
+    usePrepareProps: (props, useStyling) => {
+        const { gap, horizontal, wrap, ...rest } = props;
+        return {
+            slotProps: mergeSettings(useStyling(props), { root: rest }),
+            state: { gap, horizontal, wrap },
+        };
+    },
+    render: render,
+    slots: {
+        root: { slotType: View, filter: filterViewProps },
+        inner: { slotType: View, filter: filterViewProps },
+    },
+    styles: {
+        root: [buildStackRootStyles, backgroundColorTokens, borderTokens],
+        inner: [buildStackInnerStyles],
+    },
 });
 export default Stack;
-//# sourceMappingURL=Stack.js.map
+//# sourceMappingURL=Stack.js.map

package/lib/Stack.settings.d.ts

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

package/lib/Stack.settings.js

@@ -1,60 +1,60 @@
 import { stackName } from './Stack.types';
 export const settings = [
-  {
-    root: {
-      style: {
-        display: 'flex',
-      },
-    },
-    inner: {
-      style: {
-        display: 'flex',
-        flexWrap: 'wrap',
-        overflow: 'visible',
-      },
-    },
-    _overrides: {
-      horizontal: {
+    {
         root: {
-          style: {
-            flexDirection: 'row',
-          },
-        },
-        _overrides: {
-          reversed: {
-            root: {
-              style: {
-                flexDirection: 'column-reverse',
-              },
+            style: {
+                display: 'flex',
             },
-          },
         },
-      },
-      reversed: {
-        root: {
-          style: {
-            flexDirection: 'row-reverse',
-          },
-        },
-      },
-      verticalFill: {
-        root: {
-          style: {
-            height: '100%',
-          },
+        inner: {
+            style: {
+                display: 'flex',
+                flexWrap: 'wrap',
+                overflow: 'visible',
+            },
         },
-      },
-      wrap: {
-        root: {
-          style: {
-            flexWrap: 'wrap',
-            height: '100%',
-            overflow: 'visible',
-          },
+        _overrides: {
+            horizontal: {
+                root: {
+                    style: {
+                        flexDirection: 'row',
+                    },
+                },
+                _overrides: {
+                    reversed: {
+                        root: {
+                            style: {
+                                flexDirection: 'column-reverse',
+                            },
+                        },
+                    },
+                },
+            },
+            reversed: {
+                root: {
+                    style: {
+                        flexDirection: 'row-reverse',
+                    },
+                },
+            },
+            verticalFill: {
+                root: {
+                    style: {
+                        height: '100%',
+                    },
+                },
+            },
+            wrap: {
+                root: {
+                    style: {
+                        flexWrap: 'wrap',
+                        height: '100%',
+                        overflow: 'visible',
+                    },
+                },
+            },
         },
-      },
     },
-  },
-  stackName,
+    stackName,
 ];
-//# sourceMappingURL=Stack.settings.js.map
+//# sourceMappingURL=Stack.settings.js.map

package/lib/Stack.tokens.d.ts

@@ -1,6 +1,6 @@
 import type { ViewProps } from 'react-native';
 import type { Theme } from '@fluentui-react-native/framework';
 import type { IStackTokens } from './Stack.types';
-export declare const buildStackInnerStyles: import('@fluentui-react-native/tokens').StyleFactoryFunction<ViewProps, IStackTokens, Theme>;
-export declare const buildStackRootStyles: import('@fluentui-react-native/tokens').StyleFactoryFunction<ViewProps, IStackTokens, Theme>;
-//# sourceMappingURL=Stack.tokens.d.ts.map
+export declare const buildStackInnerStyles: import("@fluentui-react-native/tokens").StyleFactoryFunction<ViewProps, IStackTokens, Theme>;
+export declare const buildStackRootStyles: import("@fluentui-react-native/tokens").StyleFactoryFunction<ViewProps, IStackTokens, Theme>;
+//# sourceMappingURL=Stack.tokens.d.ts.map

package/lib/Stack.tokens.js

@@ -1,87 +1,88 @@
 import { styleFunction } from '@uifabricshared/foundation-tokens';
 import { parseGap, parsePadding } from './StackUtils';
 const nameMap = {
-  start: 'flex-start',
-  end: 'flex-end',
+    start: 'flex-start',
+    end: 'flex-end',
 };
 function _mapAlignment(horizontal, horizontalAlign, verticalAlign, style) {
-  const alignValue = horizontal ? verticalAlign : horizontalAlign;
-  if (alignValue) {
-    style.alignItems = nameMap[alignValue] || alignValue;
-  }
-  const justifyValue = horizontal ? horizontalAlign : verticalAlign;
-  if (justifyValue) {
-    style.justifyContent = nameMap[justifyValue] || justifyValue;
-  }
+    const alignValue = horizontal ? verticalAlign : horizontalAlign;
+    if (alignValue) {
+        style.alignItems = (nameMap[alignValue] || alignValue);
+    }
+    const justifyValue = horizontal ? horizontalAlign : verticalAlign;
+    if (justifyValue) {
+        style.justifyContent = (nameMap[justifyValue] || justifyValue);
+    }
 }
 const _innerKeyProps = [
-  'horizontal',
-  // 'reversed',
-  'gap',
-  'horizontalAlign',
-  'verticalAlign',
-  // 'disableShrink',
-  'childrenGap',
-  'padding',
+    'horizontal',
+    // 'reversed',
+    'gap',
+    'horizontalAlign',
+    'verticalAlign',
+    // 'disableShrink',
+    'childrenGap',
+    'padding',
 ];
 function _buildInnerStyles(tokenProps, theme) {
-  const { horizontal, wrap, horizontalAlign, verticalAlign, padding } = tokenProps;
-  let innerStyle = undefined;
-  const childrenGap = tokenProps.childrenGap || tokenProps.gap;
-  const { rowGap, columnGap } = parseGap(childrenGap, theme);
-  if (wrap) {
-    innerStyle = {
-      rowGap: rowGap,
-      columnGap: columnGap,
-      padding: parsePadding(padding, theme),
-      width: '100%',
-    };
-    _mapAlignment(!!horizontal, horizontalAlign, verticalAlign, innerStyle);
-    if (horizontal) {
-      innerStyle.height = '100%';
-    } else {
-      innerStyle.maxHeight = '100%';
-      innerStyle.height = '100%';
+    const { horizontal, wrap, horizontalAlign, verticalAlign, padding } = tokenProps;
+    let innerStyle = undefined;
+    const childrenGap = tokenProps.childrenGap || tokenProps.gap;
+    const { rowGap, columnGap } = parseGap(childrenGap, theme);
+    if (wrap) {
+        innerStyle = {
+            rowGap: rowGap,
+            columnGap: columnGap,
+            padding: parsePadding(padding, theme),
+            width: '100%',
+        };
+        _mapAlignment(!!horizontal, horizontalAlign, verticalAlign, innerStyle);
+        if (horizontal) {
+            innerStyle.height = '100%';
+        }
+        else {
+            innerStyle.maxHeight = '100%';
+            innerStyle.height = '100%';
+        }
     }
-  }
-  return { style: innerStyle };
+    return { style: innerStyle };
 }
 export const buildStackInnerStyles = styleFunction(_buildInnerStyles, _innerKeyProps);
 function _buildRootStyles(tokenProps, theme) {
-  const { grow, horizontal, horizontalAlign, verticalAlign, maxHeight, maxWidth, padding, wrap } = tokenProps;
-  // const childrenGap = tokenProps.childrenGap || tokenProps.gap;
-  // const { rowGap, columnGap } = parseGap(childrenGap, theme);
-  const rootStyle = {
-    maxHeight,
-    maxWidth,
-  };
-  _mapAlignment(!!horizontal, horizontalAlign, verticalAlign, rootStyle);
-  if (grow && !wrap) {
-    rootStyle.flexGrow = typeof grow === 'boolean' ? (grow ? 1 : 0) : grow;
-    rootStyle.overflow = 'hidden';
-  }
-  if (!wrap) {
-    rootStyle.padding = parsePadding(padding, theme);
-  }
-  return { style: rootStyle };
-  // verticalFill,
-  // reversed,
-  // disableShrink,
+    const { grow, horizontal, horizontalAlign, verticalAlign, maxHeight, maxWidth, padding, wrap } = tokenProps;
+    // const childrenGap = tokenProps.childrenGap || tokenProps.gap;
+    // const { rowGap, columnGap } = parseGap(childrenGap, theme);
+    const rootStyle = {
+        maxHeight,
+        maxWidth,
+    };
+    _mapAlignment(!!horizontal, horizontalAlign, verticalAlign, rootStyle);
+    if (grow && !wrap) {
+        rootStyle.flexGrow = typeof grow === 'boolean' ? (grow ? 1 : 0) : grow;
+        rootStyle.overflow = 'hidden';
+    }
+    if (!wrap) {
+        rootStyle.padding = parsePadding(padding, theme);
+    }
+    return { style: rootStyle };
+    // verticalFill,
+    // reversed,
+    // disableShrink,
 }
 const _keyProps = [
-  // 'verticalFill',
-  'horizontal',
-  // 'reversed',
-  // 'gap',
-  'grow',
-  'wrap',
-  'horizontalAlign',
-  'verticalAlign',
-  // 'disableShrink',
-  // 'childrenGap',
-  'maxHeight',
-  'maxWidth',
-  'padding',
+    // 'verticalFill',
+    'horizontal',
+    // 'reversed',
+    // 'gap',
+    'grow',
+    'wrap',
+    'horizontalAlign',
+    'verticalAlign',
+    // 'disableShrink',
+    // 'childrenGap',
+    'maxHeight',
+    'maxWidth',
+    'padding',
 ];
 export const buildStackRootStyles = styleFunction(_buildRootStyles, _keyProps);
-//# sourceMappingURL=Stack.tokens.js.map
+//# sourceMappingURL=Stack.tokens.js.map

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

@@ -1,2 +1,2 @@
 export const stackName = 'RNFStack';
-//# sourceMappingURL=Stack.types.js.map
+//# sourceMappingURL=Stack.types.js.map

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

@@ -5,10 +5,10 @@ import { settings } from './StackItem.settings';
 import { stackItemTokenProcessor } from './StackItem.tokens';
 import { stackItemName } from './StackItem.types';
 export const StackItem = compose({
-  displayName: stackItemName,
-  settings: settings,
-  slots: { root: { slotType: View, filter: filterViewProps } },
-  styles: { root: [stackItemTokenProcessor] },
+    displayName: stackItemName,
+    settings: settings,
+    slots: { root: { slotType: View, filter: filterViewProps } },
+    styles: { root: [stackItemTokenProcessor] },
 });
 export default StackItem;
-//# sourceMappingURL=StackItem.js.map
+//# sourceMappingURL=StackItem.js.map