@chakra-ui/popper - npm Package Compare versions

Comparing version 2.4.3 to 3.0.0-next.0

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.
 * -----------------------------------------------------------------------------------------------*/
@@ -336,3 +336,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
 
@@ -339,0 +339,0 @@ cleanup.current == null ? void 0 : cleanup.current();

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.
 * -----------------------------------------------------------------------------------------------*/
@@ -336,3 +336,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
 
@@ -339,0 +339,0 @@ cleanup.current == null ? void 0 : cleanup.current();

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.
 * -----------------------------------------------------------------------------------------------*/
@@ -332,3 +332,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
 
@@ -335,0 +335,0 @@ cleanup.current == null ? void 0 : cleanup.current();

package.json

 {
   "name": "@chakra-ui/popper",
-  "version": "2.4.3",
+  "version": "3.0.0-next.0",
   "description": "A React component and hooks wrapper for popper.js",
@@ -40,3 +40,3 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/react-utils": "1.2.3",
+    "@chakra-ui/react-utils": "2.0.0-next.0",
     "@popperjs/core": "^2.9.3"
@@ -48,4 +48,4 @@ },
   "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 (

src/modifiers.ts

@@ -6,3 +6,3 @@ import { Placement, Modifier, State } from "@popperjs/core"
  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.
 * -----------------------------------------------------------------------------------------------*/
@@ -18,6 +18,8 @@
   },
-  effect: ({ state }) => () => {
-    const reference = state.elements.reference as HTMLElement
-    state.elements.popper.style.width = `${reference.offsetWidth}px`
-  },
+  effect:
+    ({ state }) =>
+    () => {
+      const reference = state.elements.reference as HTMLElement
+      state.elements.popper.style.width = `${reference.offsetWidth}px`
+    },
 }
@@ -39,5 +41,7 @@
   },
-  effect: ({ state }) => () => {
-    setTransformOrigin(state)
-  },
+  effect:
+    ({ state }) =>
+    () => {
+      setTransformOrigin(state)
+    },
 }
@@ -117,5 +121,7 @@
   },
-  effect: ({ state }) => () => {
-    setInnerArrowStyles(state)
-  },
+  effect:
+    ({ state }) =>
+    () => {
+      setInnerArrowStyles(state)
+    },
 }
@@ -122,0 +128,0 @@

src/use-popper.ts

@@ -135,3 +135,3 @@ import { mergeRefs, PropGetterV2 } from "@chakra-ui/react-utils"
 
-    // If popper instance exists, destroy it so we can create a new one
+    // If popper instance exists, destroy it, so we can create a new one
     cleanup.current?.()
@@ -138,0 +138,0 @@

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

Total package byte prevSize

73674

increased by0.09%

Lines of code

2024

increased by0.3%

Number of lines in readme file

173

increased by1.17%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Dependency changes

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

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

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

• + Addedframesync@6.1.2(transitive)

• + Addedtslib@2.4.0(transitive)

• - Removed@chakra-ui/react-utils@1.2.3(transitive)

• - Removed@chakra-ui/utils@1.10.4(transitive)

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

• - Removedframesync@5.3.0(transitive)

• - Removedtslib@2.7.0(transitive)

• Updated@chakra-ui/react-utils@2.0.0-next.0