@fluentui-react-native/experimental-shadow 0.7.0 → 0.7.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Change Log - @fluentui-react-native/experimental-shadow
 
+## 0.7.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]
+  - @fluentui-react-native/pressable@0.13.1
+  - @fluentui-react-native/framework@0.15.1
+  - @fluentui-react-native/theme-types@0.44.1
+  - @fluentui-react-native/framework-base@0.3.1
+
 ## 0.7.0
 
 ### Minor Changes

package/lib/Shadow.d.ts

@@ -1,4 +1,4 @@
 import type { ShadowProps } from './Shadow.types';
-export declare const Shadow: import('@fluentui-react-native/framework-base').FunctionComponent<ShadowProps>;
+export declare const Shadow: import("@fluentui-react-native/framework-base").FunctionComponent<ShadowProps>;
 export default Shadow;
-//# sourceMappingURL=Shadow.d.ts.map
+//# sourceMappingURL=Shadow.d.ts.map

package/lib/Shadow.js

@@ -1,123 +1,87 @@
-import { Fragment as _Fragment, jsx as _jsx } from 'react/jsx-runtime';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { View } from 'react-native';
 import { memoize, mergeProps, phasedComponent, directComponent } from '@fluentui-react-native/framework-base';
 import { shadowName } from './Shadow.types';
 import { getShadowTokenStyleSet } from './shadowStyle';
 export const Shadow = phasedComponent((props) => {
-  return directComponent((final) => {
-    const { children, ...rest } = final;
-    if (!props.shadowToken) {
-      return _jsx(_Fragment, { children: children });
-    }
-    const { style: childStyle, ...restOfChildProps } = children.props;
-    const shadowViewStyleProps = getStylePropsForShadowViews(childStyle, props.shadowToken);
-    const innerShadowViewProps = mergeProps(restOfChildProps, shadowViewStyleProps.inner);
-    const outerShadowViewProps = mergeProps(rest, shadowViewStyleProps.outer);
-    const childWithInnerShadow = React.cloneElement(children, innerShadowViewProps);
-    return _jsx(View, { ...outerShadowViewProps, children: childWithInnerShadow });
-  });
+    return directComponent((final) => {
+        const { children, ...rest } = final;
+        if (!props.shadowToken) {
+            return _jsx(_Fragment, { children: children });
+        }
+        const { style: childStyle, ...restOfChildProps } = children.props;
+        const shadowViewStyleProps = getStylePropsForShadowViews(childStyle, props.shadowToken);
+        const innerShadowViewProps = mergeProps(restOfChildProps, shadowViewStyleProps.inner);
+        const outerShadowViewProps = mergeProps(rest, shadowViewStyleProps.outer);
+        const childWithInnerShadow = React.cloneElement(children, innerShadowViewProps);
+        return _jsx(View, { ...outerShadowViewProps, children: childWithInnerShadow });
+    });
 });
 const getStylePropsForShadowViews = memoize(getStylePropsForShadowViewsWorker);
 function getStylePropsForShadowViewsWorker(childStyleProps = {}, shadowToken) {
-  const shadowTokenStyleSet = getShadowTokenStyleSet(shadowToken);
-  if (__DEV__) {
-    if (!childStyleProps.backgroundColor) {
-      console.warn('The View that the Shadow is set on must have a background color set');
+    const shadowTokenStyleSet = getShadowTokenStyleSet(shadowToken);
+    if (__DEV__) {
+        if (!childStyleProps.backgroundColor) {
+            console.warn('The View that the Shadow is set on must have a background color set');
+        }
     }
-  }
-  const {
-    borderBottomWidth,
-    borderEndWidth,
-    borderLeftWidth,
-    borderRightWidth,
-    borderStartWidth,
-    borderTopWidth,
-    borderWidth,
-    margin,
-    marginBottom,
-    marginEnd,
-    marginHorizontal,
-    marginLeft,
-    marginRight,
-    marginStart,
-    marginTop,
-    marginVertical,
-    padding,
-    paddingBottom,
-    paddingEnd,
-    paddingHorizontal,
-    paddingLeft,
-    paddingRight,
-    paddingStart,
-    paddingTop,
-    paddingVertical,
-    alignItems,
-    flexWrap,
-    flexDirection,
-    start,
-    end,
-    left,
-    right,
-    top,
-    bottom,
-    ...restOfChildStyleProps
-  } = childStyleProps;
-  // Remove undefined properties, otherwise every prop will be added and be set to
-  // undefined, which can cause unexpected behaviour with some of the styles
-  const innerStyle = removeUndefinedProperties({
-    borderBottomWidth,
-    borderEndWidth,
-    borderLeftWidth,
-    borderRightWidth,
-    borderStartWidth,
-    borderTopWidth,
-    borderWidth,
-    padding,
-    paddingBottom,
-    paddingEnd,
-    paddingHorizontal,
-    paddingLeft,
-    paddingRight,
-    paddingStart,
-    paddingTop,
-    paddingVertical,
-    alignItems,
-    flexWrap,
-    flexDirection,
-    ...shadowTokenStyleSet.key,
-    ...restOfChildStyleProps,
-  });
-  const outerStyle = removeUndefinedProperties({
-    margin,
-    marginBottom,
-    marginEnd,
-    marginHorizontal,
-    marginLeft,
-    marginRight,
-    marginStart,
-    marginTop,
-    marginVertical,
-    start,
-    end,
-    left,
-    right,
-    top,
-    bottom,
-    ...shadowTokenStyleSet.ambient,
-    ...restOfChildStyleProps,
-  });
-  return { inner: { style: innerStyle }, outer: { style: outerStyle } };
+    const { borderBottomWidth, borderEndWidth, borderLeftWidth, borderRightWidth, borderStartWidth, borderTopWidth, borderWidth, margin, marginBottom, marginEnd, marginHorizontal, marginLeft, marginRight, marginStart, marginTop, marginVertical, padding, paddingBottom, paddingEnd, paddingHorizontal, paddingLeft, paddingRight, paddingStart, paddingTop, paddingVertical, alignItems, flexWrap, flexDirection, start, end, left, right, top, bottom, ...restOfChildStyleProps } = childStyleProps;
+    // Remove undefined properties, otherwise every prop will be added and be set to
+    // undefined, which can cause unexpected behaviour with some of the styles
+    const innerStyle = removeUndefinedProperties({
+        borderBottomWidth,
+        borderEndWidth,
+        borderLeftWidth,
+        borderRightWidth,
+        borderStartWidth,
+        borderTopWidth,
+        borderWidth,
+        padding,
+        paddingBottom,
+        paddingEnd,
+        paddingHorizontal,
+        paddingLeft,
+        paddingRight,
+        paddingStart,
+        paddingTop,
+        paddingVertical,
+        alignItems,
+        flexWrap,
+        flexDirection,
+        ...shadowTokenStyleSet.key,
+        ...restOfChildStyleProps,
+    });
+    const outerStyle = removeUndefinedProperties({
+        margin,
+        marginBottom,
+        marginEnd,
+        marginHorizontal,
+        marginLeft,
+        marginRight,
+        marginStart,
+        marginTop,
+        marginVertical,
+        start,
+        end,
+        left,
+        right,
+        top,
+        bottom,
+        ...shadowTokenStyleSet.ambient,
+        ...restOfChildStyleProps,
+    });
+    return { inner: { style: innerStyle }, outer: { style: outerStyle } };
 }
 function withObjectAssign(object, [key, value]) {
-  if (value !== undefined) {
-    return Object.assign(object, { [key]: value });
-  }
-  return object;
+    if (value !== undefined) {
+        return Object.assign(object, { [key]: value });
+    }
+    return object;
 }
 const removeUndefinedProperties = (object) => {
-  return Object.entries(object).reduce(withObjectAssign, {});
+    return Object.entries(object).reduce(withObjectAssign, {});
 };
 Shadow.displayName = shadowName;
 export default Shadow;
-//# sourceMappingURL=Shadow.js.map
+//# sourceMappingURL=Shadow.js.map

package/lib/Shadow.types.d.ts

@@ -1,10 +1,10 @@
 import type React from 'react';
 import type { ViewProps } from 'react-native';
 import type { ShadowToken } from '@fluentui-react-native/theme-types';
-export declare const shadowName = 'Shadow';
+export declare const shadowName = "Shadow";
 export interface ShadowProps extends ViewProps {
-  shadowToken?: ShadowToken;
-  /** Exactly one child */
-  children: React.ReactElement;
+    shadowToken?: ShadowToken;
+    /** Exactly one child */
+    children: React.ReactElement;
 }
-//# sourceMappingURL=Shadow.types.d.ts.map
+//# sourceMappingURL=Shadow.types.d.ts.map

package/lib/Shadow.types.js

@@ -1,2 +1,2 @@
 export const shadowName = 'Shadow';
-//# sourceMappingURL=Shadow.types.js.map
+//# sourceMappingURL=Shadow.types.js.map

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

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

package/lib/__tests__/Shadow.test.js

@@ -1,4 +1,4 @@
-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, View } from 'react-native';
 import { mergeStyles, useFluentTheme } from '@fluentui-react-native/framework';
@@ -7,152 +7,140 @@ import * as renderer from 'react-test-renderer';
 import { Shadow } from '../Shadow';
 const backgroundColor = { backgroundColor: 'red' };
 const TestShadow = (props) => {
-  const theme = useFluentTheme();
-  return _jsx(Shadow, {
-    shadowToken: theme.shadows[props.depth],
-    children: _jsx(View, { style: backgroundColor, children: _jsx(Text, { children: props.displayText }) }),
-  });
+    const theme = useFluentTheme();
+    return (_jsx(Shadow, { shadowToken: theme.shadows[props.depth], children: _jsx(View, { style: backgroundColor, children: _jsx(Text, { children: props.displayText }) }) }));
 };
 const TestPressableWithAndWithoutShadow = () => {
-  const theme = useFluentTheme();
-  return _jsxs(View, {
-    children: [
-      _jsx(Shadow, { shadowToken: theme.shadows['shadow16'], children: _jsx(Pressable, { style: backgroundColor }) }),
-      _jsx(View, { children: _jsx(Pressable, { style: backgroundColor }) }),
-    ],
-  });
+    const theme = useFluentTheme();
+    return (_jsxs(View, { children: [
+            _jsx(Shadow, { shadowToken: theme.shadows['shadow16'], children: _jsx(Pressable, { style: backgroundColor }) }), _jsx(View, { children: _jsx(Pressable, { style: backgroundColor }) })
+        ] }));
 };
 const TestShadowOnChildViewWithProps = (props) => {
-  const theme = useFluentTheme();
-  return _jsx(Shadow, {
-    shadowToken: theme.shadows['shadow16'],
-    children: _jsx(View, {
-      style: mergeStyles(props.childViewStyleProps, backgroundColor),
-      children: _jsx(Text, { children: JSON.stringify(props.childViewStyleProps) }),
-    }),
-  });
+    const theme = useFluentTheme();
+    return (_jsx(Shadow, { shadowToken: theme.shadows['shadow16'], children: _jsx(View, { style: mergeStyles(props.childViewStyleProps, backgroundColor), children: _jsx(Text, { children: JSON.stringify(props.childViewStyleProps) }) }) }));
 };
 describe('Shadow component tests', () => {
-  beforeAll(() => {
-    jest.mock('react-native/Libraries/Utilities/Platform', () => ({
-      OS: 'macos',
-      select: () => null,
-    }));
-  });
-  it('Shadow (depth=2)', () => {
-    let component;
-    act(() => {
-      component = renderer.create(_jsx(TestShadow, { displayText: 'Shadow (depth=2)', depth: 'shadow2' }));
-    });
-    expect(component.toJSON()).toMatchSnapshot();
-  });
-  it('Shadow (depth=4)', () => {
-    let component;
-    act(() => {
-      component = renderer.create(_jsx(TestShadow, { displayText: 'Shadow (depth=4)', depth: 'shadow4' }));
-    });
-    expect(component.toJSON()).toMatchSnapshot();
-  });
-  it('Shadow (depth=8)', () => {
-    let component;
-    act(() => {
-      component = renderer.create(_jsx(TestShadow, { displayText: 'Shadow (depth=8)', depth: 'shadow8' }));
-    });
-    expect(component.toJSON()).toMatchSnapshot();
-  });
-  it('Shadow (depth=16)', () => {
-    let component;
-    act(() => {
-      component = renderer.create(_jsx(TestShadow, { displayText: 'Shadow (depth=16)', depth: 'shadow16' }));
-    });
-    expect(component.toJSON()).toMatchSnapshot();
-  });
-  it('Shadow (depth=28)', () => {
-    let component;
-    act(() => {
-      component = renderer.create(_jsx(TestShadow, { displayText: 'Shadow (depth=28)', depth: 'shadow28' }));
-    });
-    expect(component.toJSON()).toMatchSnapshot();
-  });
-  it('Shadow (depth=64)', () => {
-    let component;
-    act(() => {
-      component = renderer.create(_jsx(TestShadow, { displayText: 'Shadow (depth=64)', depth: 'shadow64' }));
-    });
-    expect(component.toJSON()).toMatchSnapshot();
-  });
-  it('Brand shadow (depth=2)', () => {
-    let component;
-    act(() => {
-      component = renderer.create(_jsx(TestShadow, { displayText: 'Brand shadow (depth=2)', depth: 'shadow2brand' }));
-    });
-    expect(component.toJSON()).toMatchSnapshot();
-  });
-  it('Brand shadow (depth=4)', () => {
-    let component;
-    act(() => {
-      component = renderer.create(_jsx(TestShadow, { displayText: 'Brand shadow (depth=4)', depth: 'shadow4brand' }));
-    });
-    expect(component.toJSON()).toMatchSnapshot();
-  });
-  it('Brand shadow (depth=8)', () => {
-    let component;
-    act(() => {
-      component = renderer.create(_jsx(TestShadow, { displayText: 'Brand shadow (depth=8)', depth: 'shadow8brand' }));
-    });
-    expect(component.toJSON()).toMatchSnapshot();
-  });
-  it('Brand shadow (depth=16)', () => {
-    let component;
-    act(() => {
-      component = renderer.create(_jsx(TestShadow, { displayText: 'Brand shadow (depth=16)', depth: 'shadow16brand' }));
-    });
-    expect(component.toJSON()).toMatchSnapshot();
-  });
-  it('Brand shadow (depth=28)', () => {
-    let component;
-    act(() => {
-      component = renderer.create(_jsx(TestShadow, { displayText: 'Brand shadow (depth=28)', depth: 'shadow28brand' }));
-    });
-    expect(component.toJSON()).toMatchSnapshot();
-  });
-  it('Brand shadow (depth=64)', () => {
-    let component;
-    act(() => {
-      component = renderer.create(_jsx(TestShadow, { displayText: 'Brand shadow (depth=64)', depth: 'shadow64brand' }));
-    });
-    expect(component.toJSON()).toMatchSnapshot();
-  });
-  it('Pressable that has a shadow vs. pressable without shadow', () => {
-    let component;
-    act(() => {
-      component = renderer.create(_jsx(TestPressableWithAndWithoutShadow, {}));
-    });
-    expect(component.toJSON()).toMatchSnapshot();
-  });
-  it('Shadow on a child with margin and padding', () => {
-    let component;
-    act(() => {
-      component = renderer.create(_jsx(TestShadowOnChildViewWithProps, { childViewStyleProps: { margin: 2, padding: 2 } }));
-    });
-    expect(component.toJSON()).toMatchSnapshot();
-  });
-  it('Shadow on a child with border radius', () => {
-    let component;
-    act(() => {
-      component = renderer.create(_jsx(TestShadowOnChildViewWithProps, { childViewStyleProps: { borderRadius: 2 } }));
-    });
-    expect(component.toJSON()).toMatchSnapshot();
-  });
-  it('Shadow on a child with border width', () => {
-    let component;
-    act(() => {
-      component = renderer.create(_jsx(TestShadowOnChildViewWithProps, { childViewStyleProps: { borderWidth: 2 } }));
-    });
-    expect(component.toJSON()).toMatchSnapshot();
-  });
-  afterAll(() => {
-    jest.unmock('react-native/Libraries/Utilities/Platform');
-  });
+    beforeAll(() => {
+        jest.mock('react-native/Libraries/Utilities/Platform', () => ({
+            OS: 'macos',
+            select: () => null,
+        }));
+    });
+    it('Shadow (depth=2)', () => {
+        let component;
+        act(() => {
+            component = renderer.create(_jsx(TestShadow, { displayText: "Shadow (depth=2)", depth: "shadow2" }));
+        });
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+    it('Shadow (depth=4)', () => {
+        let component;
+        act(() => {
+            component = renderer.create(_jsx(TestShadow, { displayText: "Shadow (depth=4)", depth: "shadow4" }));
+        });
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+    it('Shadow (depth=8)', () => {
+        let component;
+        act(() => {
+            component = renderer.create(_jsx(TestShadow, { displayText: "Shadow (depth=8)", depth: "shadow8" }));
+        });
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+    it('Shadow (depth=16)', () => {
+        let component;
+        act(() => {
+            component = renderer.create(_jsx(TestShadow, { displayText: "Shadow (depth=16)", depth: "shadow16" }));
+        });
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+    it('Shadow (depth=28)', () => {
+        let component;
+        act(() => {
+            component = renderer.create(_jsx(TestShadow, { displayText: "Shadow (depth=28)", depth: "shadow28" }));
+        });
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+    it('Shadow (depth=64)', () => {
+        let component;
+        act(() => {
+            component = renderer.create(_jsx(TestShadow, { displayText: "Shadow (depth=64)", depth: "shadow64" }));
+        });
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+    it('Brand shadow (depth=2)', () => {
+        let component;
+        act(() => {
+            component = renderer.create(_jsx(TestShadow, { displayText: "Brand shadow (depth=2)", depth: "shadow2brand" }));
+        });
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+    it('Brand shadow (depth=4)', () => {
+        let component;
+        act(() => {
+            component = renderer.create(_jsx(TestShadow, { displayText: "Brand shadow (depth=4)", depth: "shadow4brand" }));
+        });
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+    it('Brand shadow (depth=8)', () => {
+        let component;
+        act(() => {
+            component = renderer.create(_jsx(TestShadow, { displayText: "Brand shadow (depth=8)", depth: "shadow8brand" }));
+        });
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+    it('Brand shadow (depth=16)', () => {
+        let component;
+        act(() => {
+            component = renderer.create(_jsx(TestShadow, { displayText: "Brand shadow (depth=16)", depth: "shadow16brand" }));
+        });
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+    it('Brand shadow (depth=28)', () => {
+        let component;
+        act(() => {
+            component = renderer.create(_jsx(TestShadow, { displayText: "Brand shadow (depth=28)", depth: "shadow28brand" }));
+        });
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+    it('Brand shadow (depth=64)', () => {
+        let component;
+        act(() => {
+            component = renderer.create(_jsx(TestShadow, { displayText: "Brand shadow (depth=64)", depth: "shadow64brand" }));
+        });
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+    it('Pressable that has a shadow vs. pressable without shadow', () => {
+        let component;
+        act(() => {
+            component = renderer.create(_jsx(TestPressableWithAndWithoutShadow, {}));
+        });
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+    it('Shadow on a child with margin and padding', () => {
+        let component;
+        act(() => {
+            component = renderer.create(_jsx(TestShadowOnChildViewWithProps, { childViewStyleProps: { margin: 2, padding: 2 } }));
+        });
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+    it('Shadow on a child with border radius', () => {
+        let component;
+        act(() => {
+            component = renderer.create(_jsx(TestShadowOnChildViewWithProps, { childViewStyleProps: { borderRadius: 2 } }));
+        });
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+    it('Shadow on a child with border width', () => {
+        let component;
+        act(() => {
+            component = renderer.create(_jsx(TestShadowOnChildViewWithProps, { childViewStyleProps: { borderWidth: 2 } }));
+        });
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+    afterAll(() => {
+        jest.unmock('react-native/Libraries/Utilities/Platform');
+    });
 });
-//# sourceMappingURL=Shadow.test.js.map
+//# sourceMappingURL=Shadow.test.js.map

package/lib/index.d.ts

@@ -1,4 +1,4 @@
 export { Shadow } from './Shadow';
 export type { ShadowProps } from './Shadow.types';
 export { getShadowTokenStyleSet } from './shadowStyle';
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/lib/index.js

@@ -1,3 +1,3 @@
 export { Shadow } from './Shadow';
 export { getShadowTokenStyleSet } from './shadowStyle';
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/lib/shadowStyle.d.ts

@@ -1,24 +1,24 @@
 import type { ShadowToken } from '@fluentui-react-native/theme-types';
 export declare const getShadowTokenStyleSet: typeof getShadowTokenStyleSetWorker;
 declare function getShadowTokenStyleSetWorker(shadowToken: ShadowToken): {
-  key: {
-    shadowColor: string;
-    shadowOpacity: number;
-    shadowRadius: number;
-    shadowOffset: {
-      width: number;
-      height: number;
+    key: {
+        shadowColor: string;
+        shadowOpacity: number;
+        shadowRadius: number;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
     };
-  };
-  ambient: {
-    shadowColor: string;
-    shadowOpacity: number;
-    shadowRadius: number;
-    shadowOffset: {
-      width: number;
-      height: number;
+    ambient: {
+        shadowColor: string;
+        shadowOpacity: number;
+        shadowRadius: number;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
     };
-  };
 };
 export {};
-//# sourceMappingURL=shadowStyle.d.ts.map
+//# sourceMappingURL=shadowStyle.d.ts.map