@fluentui-react-native/drawer 0.4.19 → 0.5.0

package/lib-commonjs/useDrawer.d.ts

@@ -1,3 +1,3 @@
 import type { DrawerProps, DrawerInfo } from './Drawer.types';
 export declare const useDrawer: (props: DrawerProps) => DrawerInfo;
-//# sourceMappingURL=useDrawer.d.ts.map
+//# sourceMappingURL=useDrawer.d.ts.map

package/lib-commonjs/useDrawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDrawer.d.ts","sourceRoot":"","sources":["../src/useDrawer.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAI9D,eAAO,MAAM,SAAS,UAAW,WAAW,KAAG,UAgF9C,CAAC"}
+{"version":3,"file":"useDrawer.d.ts","sourceRoot":"","sources":["../src/useDrawer.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAI9D,eAAO,MAAM,SAAS,oCAgFrB,CAAC"}

package/lib-commonjs/useDrawer.js

@@ -1,76 +1,81 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.useDrawer = void 0;
-const react_1 = require("react");
-const react_native_1 = require("react-native");
+const react_1 = require('react');
+const react_native_1 = require('react-native');
 const { height, width } = react_native_1.Dimensions.get('window');
 const useDrawer = (props) => {
-    const { onBlur, onFocus, accessibilityLabel, open, drawerPosition = 'left', showHandle = true, children, ...rest } = props;
-    const animatedValue = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
-    const [internalOpen, setInternalOpen] = (0, react_1.useState)(open);
-    const [isFirstOpen, setIsFirstOpen] = (0, react_1.useState)(true);
-    (0, react_1.useEffect)(() => {
-        if (open) {
-            setInternalOpen(true);
-            react_native_1.Animated.timing(animatedValue, {
-                toValue: 1,
-                duration: 300,
-                useNativeDriver: true,
-            }).start();
-        }
-        else {
-            if (isFirstOpen) {
-                setIsFirstOpen(false);
-            }
-            else {
-                react_native_1.Animated.parallel([
-                    react_native_1.Animated.timing(animatedValue, {
-                        toValue: 0,
-                        duration: 300,
-                        useNativeDriver: true,
-                    }),
-                ]).start(() => {
-                    setInternalOpen(false);
-                });
-            }
-        }
-    }, [animatedValue, open]);
-    const onClose = (0, react_1.useCallback)((e) => {
-        props?.onClose && props.onClose(e);
-    }, [props?.onClose]);
-    const onScrimClick = (0, react_1.useCallback)((e) => {
-        props?.onScrimClick && props.onScrimClick(e);
-    }, [props?.onScrimClick]);
-    const animatedTranslateX = animatedValue.interpolate({
-        inputRange: [0, 1],
-        outputRange: drawerPosition === 'left' ? [-width * 0.8, 0] : drawerPosition === 'right' ? [width * 0.8, 0] : [0, 0],
-    });
-    const animatedTranslateY = animatedValue.interpolate({
-        inputRange: [0, 1],
-        outputRange: [height, height * 0.5],
-    });
-    const animatedOpacity = animatedValue.interpolate({
-        inputRange: [0, 1],
-        outputRange: [0, 0.5],
-    });
-    const animatedStyle = {
-        transform: drawerPosition === 'left' || drawerPosition === 'right' ? [{ translateX: animatedTranslateX }] : [{ translateY: animatedTranslateY }],
-    };
-    return {
-        props: {
-            ...rest,
-            onClose,
-            onScrimClick,
-            animationConfig: {
-                animatedOpacity,
-                animatedStyle,
-            },
-            drawerPosition: drawerPosition ?? 'left',
-            children,
-            showHandle,
-            open: internalOpen,
-        },
-    };
+  const { onBlur, onFocus, accessibilityLabel, open, drawerPosition = 'left', showHandle = true, children, ...rest } = props;
+  const animatedValue = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+  const [internalOpen, setInternalOpen] = (0, react_1.useState)(open);
+  const [isFirstOpen, setIsFirstOpen] = (0, react_1.useState)(true);
+  (0, react_1.useEffect)(() => {
+    if (open) {
+      setInternalOpen(true);
+      react_native_1.Animated.timing(animatedValue, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    } else {
+      if (isFirstOpen) {
+        setIsFirstOpen(false);
+      } else {
+        react_native_1.Animated.parallel([
+          react_native_1.Animated.timing(animatedValue, {
+            toValue: 0,
+            duration: 300,
+            useNativeDriver: true,
+          }),
+        ]).start(() => {
+          setInternalOpen(false);
+        });
+      }
+    }
+  }, [animatedValue, open]);
+  const onClose = (0, react_1.useCallback)(
+    (e) => {
+      props?.onClose && props.onClose(e);
+    },
+    [props?.onClose],
+  );
+  const onScrimClick = (0, react_1.useCallback)(
+    (e) => {
+      props?.onScrimClick && props.onScrimClick(e);
+    },
+    [props?.onScrimClick],
+  );
+  const animatedTranslateX = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: drawerPosition === 'left' ? [-width * 0.8, 0] : drawerPosition === 'right' ? [width * 0.8, 0] : [0, 0],
+  });
+  const animatedTranslateY = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [height, height * 0.5],
+  });
+  const animatedOpacity = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 0.5],
+  });
+  const animatedStyle = {
+    transform:
+      drawerPosition === 'left' || drawerPosition === 'right' ? [{ translateX: animatedTranslateX }] : [{ translateY: animatedTranslateY }],
+  };
+  return {
+    props: {
+      ...rest,
+      onClose,
+      onScrimClick,
+      animationConfig: {
+        animatedOpacity,
+        animatedStyle,
+      },
+      drawerPosition: drawerPosition ?? 'left',
+      children,
+      showHandle,
+      open: internalOpen,
+    },
+  };
 };
 exports.useDrawer = useDrawer;
-//# sourceMappingURL=useDrawer.js.map
+//# sourceMappingURL=useDrawer.js.map

package/lib-commonjs/useDrawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDrawer.js","sourceRoot":"","sources":["../src/useDrawer.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useDrawer.js","sourceRoot":"","sources":["../src/useDrawer.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,79 +1,88 @@
 {
   "name": "@fluentui-react-native/drawer",
-  "version": "0.4.19",
+  "version": "0.5.0",
   "description": "A cross-platform Drawer component using the Fluent Design System",
-  "main": "lib-commonjs/index.js",
-  "module": "lib/index.js",
-  "react-native": "src/index.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/fluentui-react-native.git",
+    "directory": "packages/components/Drawer"
+  },
+  "license": "MIT",
+  "author": "",
   "exports": {
     ".": {
+      "types": "./lib/index.d.ts",
       "import": "./lib/index.js",
-      "require": "./lib-commonjs/index.js",
-      "types": "./lib/index.d.ts"
+      "require": "./lib-commonjs/index.js"
     }
   },
-  "typings": "lib/index.d.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",
     "clean": "fluentui-scripts clean",
     "depcheck": "fluentui-scripts depcheck",
-    "just": "fluentui-scripts",
     "lint": "fluentui-scripts eslint",
-    "test": "fluentui-scripts jest",
-    "update-snapshots": "fluentui-scripts jest -u",
+    "lint-package": "fluentui-scripts lint-package",
     "prettier": "fluentui-scripts prettier",
-    "prettier-fix": "fluentui-scripts prettier --fix true"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/microsoft/fluentui-react-native.git",
-    "directory": "packages/components/Drawer"
+    "test": "fluentui-scripts jest",
+    "update-snapshots": "fluentui-scripts jest -u"
   },
   "dependencies": {
-    "@fluentui-react-native/framework": "0.14.17",
-    "@fluentui-react-native/interactive-hooks": "0.27.19",
-    "@fluentui-react-native/theme-tokens": "0.27.11",
-    "@fluentui-react-native/use-styling": "0.13.12"
+    "@fluentui-react-native/framework": "0.15.0",
+    "@fluentui-react-native/interactive-hooks": "0.28.0",
+    "@fluentui-react-native/theme-tokens": "0.28.0",
+    "@fluentui-react-native/use-styling": "0.14.0"
   },
   "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/scripts": "0.1.1",
-    "@react-native/babel-preset": "^0.74.0",
-    "@react-native/metro-config": "^0.74.0",
-    "@types/react": "~18.2.0",
-    "@types/react-test-renderer": "^18.2.0",
-    "react": "18.2.0",
-    "react-native": "^0.74.0",
-    "react-native-macos": "^0.74.0",
-    "react-native-windows": "^0.74.0",
-    "react-test-renderer": "18.2.0"
+    "@fluentui-react-native/kit-config": "0.1.2",
+    "@fluentui-react-native/scripts": "0.1.2",
+    "@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-test-renderer": "^19.1.0",
+    "react": "19.1.0",
+    "react-native": "^0.81.0",
+    "react-native-macos": "^0.81.0",
+    "react-native-windows": "^0.81.0",
+    "react-test-renderer": "19.1.0"
   },
   "peerDependencies": {
     "@office-iss/react-native-win32": "^0.74.0",
-    "react": "18.2.0",
-    "react-native": "^0.73.0 || ^0.74.0",
-    "react-native-macos": "^0.73.0 || ^0.74.0",
-    "react-native-windows": "^0.73.0 || ^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",
+    "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"
+  },
+  "peerDependenciesMeta": {
+    "@office-iss/react-native-win32": {
+      "optional": true
+    },
+    "@types/react": {
+      "optional": true
+    },
+    "react-native-macos": {
+      "optional": true
+    },
+    "react-native-windows": {
+      "optional": true
+    }
   },
-  "author": "",
-  "license": "MIT",
   "rnx-kit": {
     "kitType": "library",
     "alignDeps": {
-      "presets": [
-        "microsoft/react-native"
-      ],
-      "requirements": {
-        "development": [
-          "react-native@0.74"
-        ],
-        "production": [
-          "react-native@0.73 || 0.74"
-        ]
-      },
       "capabilities": [
         "babel-preset-react-native",
         "core",
@@ -82,19 +91,11 @@
         "core-macos",
         "core-windows",
         "react",
-        "react-test-renderer"
+        "react-test-renderer",
+        "tools-core",
+        "tools-jest"
       ]
-    }
-  },
-  "peerDependenciesMeta": {
-    "@office-iss/react-native-win32": {
-      "optional": true
     },
-    "react-native-macos": {
-      "optional": true
-    },
-    "react-native-windows": {
-      "optional": true
-    }
+    "extends": "@fluentui-react-native/kit-config"
   }
-}
+}

package/src/Drawer.tsx

@@ -1,9 +1,8 @@
-/** @jsxRuntime classic */
-/** @jsx withSlots */
+/** @jsxImportSource @fluentui-react-native/framework-base */
 import { Animated, Modal, TouchableWithoutFeedback, View } from 'react-native';
 
 import type { UseSlots } from '@fluentui-react-native/framework';
-import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework';
+import { compose, mergeProps } from '@fluentui-react-native/framework';
 
 import { stylingSettings } from './Drawer.styling';
 import type { DrawerType, DrawerProps } from './Drawer.types';

package/src/Drawer.types.ts

@@ -1,4 +1,5 @@
 import type {
+  AnimatableNumericValue,
   Animated,
   ColorValue,
   DimensionValue,
@@ -46,7 +47,7 @@ export interface DrawerTokens {
   /**
    * The corner radius of the handle.
    * */
-  handleCornerRadius?: number;
+  handleCornerRadius?: AnimatableNumericValue | string;
 
   /**
    * The top margin of the handle.
@@ -86,7 +87,7 @@ export interface DrawerTokens {
    * The corner radius of the Drawer
    * @default 0
    * */
-  drawerCornerRadius?: number;
+  drawerCornerRadius?: AnimatableNumericValue | string;
 
   /**
    * The elevation of the Drawer
@@ -132,7 +133,7 @@ export interface DrawerTokens {
    * @platform iOS
    * */
 
-  shadowRadius?: number;
+  shadowRadius?: AnimatableNumericValue | string;
 
   /**
    * Positions/Behaviours of the Drawer, This is used to apply different tokens for different positions.

package/src/__tests__/Drawer.test.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { act } from 'react';
 import { Text } from 'react-native';
 
 import * as renderer from 'react-test-renderer';
@@ -11,13 +11,14 @@ jest.useFakeTimers();
 // Disable Drawer test, as it's still failing despite the line above
 describe('Drawer component tests', () => {
   it('Drawer default', () => {
-    const tree = renderer
-      .create(
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
         // <Drawer open={false} drawerPosition="left">
         <Text>Hello</Text>,
         // </Drawer>,
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
+      );
+    });
+    expect(component!.toJSON()).toMatchSnapshot();
   });
 });