@fluentui-react-native/drawer 0.5.0 → 0.5.3

package/lib-commonjs/useDrawer.js

@@ -1,81 +1,76 @@
-'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, onClose: onCloseProp, onFocus, onScrimClick: onScrimClickProp, 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, isFirstOpen, open]);
+    const onClose = (0, react_1.useCallback)((e) => {
+        onCloseProp && onCloseProp(e);
+    }, [onCloseProp]);
+    const onScrimClick = (0, react_1.useCallback)((e) => {
+        onScrimClickProp && onScrimClickProp(e);
+    }, [onScrimClickProp]);
+    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,68 +1,69 @@
 {
   "name": "@fluentui-react-native/drawer",
-  "version": "0.5.0",
+  "version": "0.5.3",
   "description": "A cross-platform Drawer component using the Fluent Design System",
+  "license": "MIT",
+  "author": "",
   "repository": {
     "type": "git",
     "url": "https://github.com/microsoft/fluentui-react-native.git",
     "directory": "packages/components/Drawer"
   },
-  "license": "MIT",
-  "author": "",
+  "main": "lib-commonjs/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
   "exports": {
     ".": {
       "types": "./lib/index.d.ts",
       "import": "./lib/index.js",
-      "require": "./lib-commonjs/index.js"
+      "require": "./lib-commonjs/index.js",
+      "default": "./src/index.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",
+    "build-core": "tsgo --outDir lib --module esnext --moduleResolution bundler",
     "clean": "fluentui-scripts clean",
     "depcheck": "fluentui-scripts depcheck",
-    "lint": "fluentui-scripts eslint",
+    "format": "fluentui-scripts format",
+    "lint": "fluentui-scripts lint",
     "lint-package": "fluentui-scripts lint-package",
-    "prettier": "fluentui-scripts prettier",
     "test": "fluentui-scripts jest",
     "update-snapshots": "fluentui-scripts jest -u"
   },
   "dependencies": {
-    "@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"
+    "@fluentui-react-native/framework": "0.15.3",
+    "@fluentui-react-native/interactive-hooks": "0.28.3",
+    "@fluentui-react-native/theme-tokens": "0.28.3",
+    "@fluentui-react-native/use-styling": "0.14.3"
   },
   "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/framework-base": "0.3.3",
+    "@fluentui-react-native/jest-config": "0.1.0",
     "@fluentui-react-native/kit-config": "0.1.2",
-    "@fluentui-react-native/scripts": "0.1.2",
+    "@fluentui-react-native/lint-config-rules": "0.1.3",
+    "@fluentui-react-native/scripts": "0.1.0",
     "@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": "~19.1.4",
     "@types/react-test-renderer": "^19.1.0",
-    "react": "19.1.0",
-    "react-native": "^0.81.0",
+    "react": "19.1.4",
+    "react-native": "^0.81.6",
     "react-native-macos": "^0.81.0",
     "react-native-windows": "^0.81.0",
-    "react-test-renderer": "19.1.0"
+    "react-test-renderer": "19.1.4"
   },
   "peerDependencies": {
     "@office-iss/react-native-win32": "^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",
+    "@types/react": "~18.2.0 || ~19.0.0 || ~19.1.4",
+    "react": "18.2.0 || 19.0.0 || 19.1.4",
+    "react-native": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.6",
     "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"
   },

package/src/DrawerTokens.ts

@@ -37,4 +37,4 @@ export const defaultDrawerTokens: TokenSettings<DrawerTokens, Theme> = (t: Theme
       drawerCornerRadius: globalTokens.corner.radius120,
       height: '50%',
     },
-  } as DrawerTokens);
+  }) as DrawerTokens;

package/src/useDrawer.ts

@@ -8,7 +8,18 @@ import type { DrawerProps, DrawerInfo } from './Drawer.types';
 const { height, width } = Dimensions.get('window');
 
 export const useDrawer = (props: DrawerProps): DrawerInfo => {
-  const { onBlur, onFocus, accessibilityLabel, open, drawerPosition = 'left', showHandle = true, children, ...rest } = props;
+  const {
+    onBlur,
+    onClose: onCloseProp,
+    onFocus,
+    onScrimClick: onScrimClickProp,
+    accessibilityLabel,
+    open,
+    drawerPosition = 'left',
+    showHandle = true,
+    children,
+    ...rest
+  } = props;
   const animatedValue = useRef(new Animated.Value(0)).current;
   const [internalOpen, setInternalOpen] = useState(open);
   const [isFirstOpen, setIsFirstOpen] = useState(true);
@@ -36,20 +47,20 @@ export const useDrawer = (props: DrawerProps): DrawerInfo => {
         });
       }
     }
-  }, [animatedValue, open]);
+  }, [animatedValue, isFirstOpen, open]);
 
   const onClose = useCallback(
     (e: InteractionEvent) => {
-      props?.onClose && props.onClose(e);
+      onCloseProp && onCloseProp(e);
     },
-    [props?.onClose],
+    [onCloseProp],
   );
 
   const onScrimClick = useCallback(
     (e: InteractionEvent) => {
-      props?.onScrimClick && props.onScrimClick(e);
+      onScrimClickProp && onScrimClickProp(e);
     },
-    [props?.onScrimClick],
+    [onScrimClickProp],
   );
 
   const animatedTranslateX = animatedValue.interpolate({

package/eslint.config.js

@@ -1,3 +0,0 @@
-const baseConfig = require('@fluentui-react-native/eslint-config-rules');
-
-module.exports = baseConfig;