@chakra-ui/popper - npm Package Compare versions

Comparing version 0.0.0-dev-20221513279 to 0.0.0-dev-2022423113827

dist/chakra-ui-popper.cjs.dev.js

@@ -104,3 +104,3 @@ 'use strict';
  The match width modifier sets the popper width to match the reference.
- It us useful for custom selects, autocomplete, etc.
+ It is useful for custom selects, autocomplete, etc.
 * -----------------------------------------------------------------------------------------------*/
@@ -289,3 +289,3 @@
 function getPopperPlacement(placement, dir) {
-  var _logicals$placement, _opposites$placement;
+  var _placement, _placement2;
 
@@ -296,5 +296,5 @@ if (dir === void 0) {
 
-  var value = ((_logicals$placement = logicals[placement]) == null ? void 0 : _logicals$placement[dir]) || placement;
+  var value = ((_placement = logicals[placement]) == null ? void 0 : _placement[dir]) || placement;
   if (dir === "ltr") return value;
-  return (_opposites$placement = opposites[placement]) != null ? _opposites$placement : value;
+  return (_placement2 = opposites[placement]) != null ? _placement2 : value;
 }
@@ -338,3 +338,3 @@
   var setupPopper = react.useCallback(function () {
-    if (!enabled || !reference.current || !popper.current) return; // If popper instance exists, destroy it so we can create a new one
+    if (!enabled || !reference.current || !popper.current) return; // If popper instance exists, destroy it, so we can create a new one
 
@@ -425,7 +425,7 @@ cleanup.current == null ? void 0 : cleanup.current();
         position: strategy,
-        minWidth: "max-content",
+        minWidth: matchWidth$1 ? undefined : "max-content",
         inset: "0 auto auto 0"
       })
     });
-  }, [strategy, popperRef]);
+  }, [strategy, popperRef, matchWidth$1]);
   var getArrowProps = react.useCallback(function (props, ref) {
@@ -432,0 +432,0 @@ if (props === void 0) {

dist/chakra-ui-popper.cjs.prod.js

@@ -104,3 +104,3 @@ 'use strict';
  The match width modifier sets the popper width to match the reference.
- It us useful for custom selects, autocomplete, etc.
+ It is useful for custom selects, autocomplete, etc.
 * -----------------------------------------------------------------------------------------------*/
@@ -289,3 +289,3 @@
 function getPopperPlacement(placement, dir) {
-  var _logicals$placement, _opposites$placement;
+  var _placement, _placement2;
 
@@ -296,5 +296,5 @@ if (dir === void 0) {
 
-  var value = ((_logicals$placement = logicals[placement]) == null ? void 0 : _logicals$placement[dir]) || placement;
+  var value = ((_placement = logicals[placement]) == null ? void 0 : _placement[dir]) || placement;
   if (dir === "ltr") return value;
-  return (_opposites$placement = opposites[placement]) != null ? _opposites$placement : value;
+  return (_placement2 = opposites[placement]) != null ? _placement2 : value;
 }
@@ -338,3 +338,3 @@
   var setupPopper = react.useCallback(function () {
-    if (!enabled || !reference.current || !popper.current) return; // If popper instance exists, destroy it so we can create a new one
+    if (!enabled || !reference.current || !popper.current) return; // If popper instance exists, destroy it, so we can create a new one
 
@@ -425,7 +425,7 @@ cleanup.current == null ? void 0 : cleanup.current();
         position: strategy,
-        minWidth: "max-content",
+        minWidth: matchWidth$1 ? undefined : "max-content",
         inset: "0 auto auto 0"
       })
     });
-  }, [strategy, popperRef]);
+  }, [strategy, popperRef, matchWidth$1]);
   var getArrowProps = react.useCallback(function (props, ref) {
@@ -432,0 +432,0 @@ if (props === void 0) {

dist/chakra-ui-popper.esm.js

@@ -100,3 +100,3 @@ import { mergeRefs } from '@chakra-ui/react-utils';
  The match width modifier sets the popper width to match the reference.
- It us useful for custom selects, autocomplete, etc.
+ It is useful for custom selects, autocomplete, etc.
 * -----------------------------------------------------------------------------------------------*/
@@ -285,3 +285,3 @@
 function getPopperPlacement(placement, dir) {
-  var _logicals$placement, _opposites$placement;
+  var _placement, _placement2;
 
@@ -292,5 +292,5 @@ if (dir === void 0) {
 
-  var value = ((_logicals$placement = logicals[placement]) == null ? void 0 : _logicals$placement[dir]) || placement;
+  var value = ((_placement = logicals[placement]) == null ? void 0 : _placement[dir]) || placement;
   if (dir === "ltr") return value;
-  return (_opposites$placement = opposites[placement]) != null ? _opposites$placement : value;
+  return (_placement2 = opposites[placement]) != null ? _placement2 : value;
 }
@@ -334,3 +334,3 @@
   var setupPopper = useCallback(function () {
-    if (!enabled || !reference.current || !popper.current) return; // If popper instance exists, destroy it so we can create a new one
+    if (!enabled || !reference.current || !popper.current) return; // If popper instance exists, destroy it, so we can create a new one
 
@@ -421,7 +421,7 @@ cleanup.current == null ? void 0 : cleanup.current();
         position: strategy,
-        minWidth: "max-content",
+        minWidth: matchWidth$1 ? undefined : "max-content",
         inset: "0 auto auto 0"
       })
     });
-  }, [strategy, popperRef]);
+  }, [strategy, popperRef, matchWidth$1]);
   var getArrowProps = useCallback(function (props, ref) {
@@ -428,0 +428,0 @@ if (props === void 0) {

dist/declarations/src/use-popper.d.ts

@@ -47,2 +47,3 @@ import { PropGetterV2 } from "@chakra-ui/react-utils";
      * and `resize` of the window.
+     * @default true
      */
@@ -49,0 +50,0 @@ eventListeners?: boolean | {

dist/declarations/src/utils.d.ts

@@ -29,3 +29,3 @@ import { Placement } from "@popperjs/core";
 export declare function getBoxShadow(placement: Placement): "1px 1px 1px 0 var(--popper-arrow-shadow-color)" | "-1px -1px 1px 0 var(--popper-arrow-shadow-color)" | "-1px 1px 1px 0 var(--popper-arrow-shadow-color)" | "1px -1px 1px 0 var(--popper-arrow-shadow-color)" | undefined;
-export declare const toTransformOrigin: (placement: Placement) => any;
+export declare const toTransformOrigin: (placement: Placement) => string;
 declare const defaultEventListeners: {
@@ -32,0 +32,0 @@ scroll: boolean;

package.json

 {
   "name": "@chakra-ui/popper",
-  "version": "0.0.0-dev-20221513279",
+  "version": "0.0.0-dev-2022423113827",
   "description": "A React component and hooks wrapper for popper.js",
@@ -25,4 +25,3 @@ "keywords": [
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
@@ -41,11 +40,11 @@ "publishConfig": {
   "dependencies": {
-    "@chakra-ui/react-utils": "0.0.0-dev-20221513279",
+    "@chakra-ui/react-utils": "2.0.0",
     "@popperjs/core": "^2.9.3"
   },
   "peerDependencies": {
-    "react": ">=16.8.6"
+    "react": ">=18"
   },
   "devDependencies": {
-    "react": "^17.0.1"
+    "react": "^18.0.0"
   }
 }

README.md

@@ -6,3 +6,3 @@ # Popper
 
-> This is an internal hook of Chakra-UI and it's not covered by semver, and may
+> This is an internal hook of Chakra-UI, and it's not covered by semver, and may
 > cause unexpected or broken application behavior. Use them at your own risk.
@@ -22,4 +22,4 @@
 ```jsx
-import { Box } from '@chakra-ui/layout'
-import { Button } from '@chakra-ui/button'
+import { Box } from "@chakra-ui/layout"
+import { Button } from "@chakra-ui/button"
 import { useDisclosure } from "@chakra-ui/hooks"
@@ -81,4 +81,4 @@ import { usePopper } from "@chakra-ui/popper"
 
-You can place the popper next to the reference without margin or distance between them.
-Useful to create an autocomplete or typeahead feature.
+You can place the popper next to the reference without margin or distance
+between them. Useful to create an autocomplete or typeahead feature.
 
@@ -93,7 +93,8 @@ ```jsx
 
-If the reference element is inside a fixed container, you should use the `fixed` strategy.
+If the reference element is inside a fixed container, you should use the `fixed`
+strategy.
 
 ```jsx
 const { popperRef, referenceRef } = usePopper({
-  strategy: 'fixed',
+  strategy: "fixed",
 })
@@ -107,3 +108,3 @@ ```
 
-```jsx
+```tsx
 // 1. Import components
@@ -131,5 +132,6 @@ import { useDisclosure } from "@chakra-ui/hooks"
   // 4. Consume the `usePopper` hook
-  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } = usePopper({
-    placement: "bottom-start",
-  })
+  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =
+    usePopper({
+      placement: "bottom-start",
+    })
 
@@ -136,0 +138,0 @@ return (

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

173

increased by1.17%

Worsened metrics

Total package byte prevSize

58324

decreased by-20.8%

Number of package files

17

decreased by-22.73%

Lines of code

1522

decreased by-24.58%

Dependency changes

• + Added@chakra-ui/react-utils@2.0.0(transitive)

• + Added@chakra-ui/utils@2.0.15(transitive)

• + Added@types/lodash.mergewith@4.6.7(transitive)

• + Addedcss-box-model@1.2.1(transitive)

• + Addedframesync@6.1.2(transitive)

• + Addedtiny-invariant@1.3.3(transitive)

• + Addedtslib@2.4.0(transitive)

• - Removed@chakra-ui/react-utils@0.0.0-dev-20221513279(transitive)

• - Removed@chakra-ui/utils@0.0.0-v3-20240109123510(transitive)

• - Removed@types/lodash.mergewith@4.6.8(transitive)

• Updated@chakra-ui/react-utils@2.0.0