@chakra-ui/popper - npm Package Compare versions

Comparing version 3.0.6 to 3.0.7

dist/index.cjs.js

		@@ -29,3 +29,3 @@ "use strict";
		// src/use-popper.ts
		var import_react_utils = require("@chakra-ui/react-utils");
		var import_react_use_merge_refs = require("@chakra-ui/react-use-merge-refs");
		var import_core = require("@popperjs/core");
		@@ -316,3 +316,3 @@ var import_react = require("react");
		...props2,
		ref: (0, import_react_utils.mergeRefs)(referenceRef, ref)
		ref: (0, import_react_use_merge_refs.mergeRefs)(referenceRef, ref)
		}), [referenceRef]);
		@@ -325,3 +325,3 @@ const popperRef = (0, import_react.useCallback)((node) => {
		...props2,
		ref: (0, import_react_utils.mergeRefs)(popperRef, ref),
		ref: (0, import_react_use_merge_refs.mergeRefs)(popperRef, ref),
		style: {
		@@ -328,0 +328,0 @@ ...props2.style,

dist/index.d.ts

		import { Placement, Modifier, VirtualElement } from '@popperjs/core';
		export { Placement } from '@popperjs/core';
		import { PropGetterV2 } from '@chakra-ui/react-utils';
		import * as _chakra_ui_react_types from '@chakra-ui/react-types';
		import { PropGetter } from '@chakra-ui/react-types';

		@@ -87,19 +88,2 @@ declare type Logical = "start-start" \| "start-end" \| "end-start" \| "end-end" \| "start" \| "end";
		}
		declare type ArrowCSSVarProps = {
		/**
		* The size of the popover arrow.
		* This sets the `--popper-arrow-size` css property
		*/
		size?: string \| number;
		/**
		* The box-shadow color of the popover arrow.
		* This sets the `--popper-arrow-shadow-color` css property
		*/
		shadowColor?: string;
		/**
		* The background color of teh popper arrow.
		* This sets the `--popper-arrow-bg` css property.
		*/
		bg?: string;
		};
		declare function usePopper(props?: UsePopperProps): {
		@@ -111,6 +95,6 @@ update(): void;
		popperRef: <T_1 extends HTMLElement>(node: T_1 \| null) => void;
		getPopperProps: PropGetterV2<"div", {}>;
		getArrowProps: PropGetterV2<"div", ArrowCSSVarProps>;
		getArrowInnerProps: PropGetterV2<"div", {}>;
		getReferenceProps: PropGetterV2<"button", {}>;
		getPopperProps: PropGetter<Record<string, unknown>, _chakra_ui_react_types.DOMAttributes<_chakra_ui_react_types.DOMElement>>;
		getArrowProps: PropGetter<Record<string, unknown>, _chakra_ui_react_types.DOMAttributes<_chakra_ui_react_types.DOMElement>>;
		getArrowInnerProps: PropGetter<Record<string, unknown>, _chakra_ui_react_types.DOMAttributes<_chakra_ui_react_types.DOMElement>>;
		getReferenceProps: PropGetter<Record<string, unknown>, _chakra_ui_react_types.DOMAttributes<_chakra_ui_react_types.DOMElement>>;
		};
		@@ -146,2 +130,2 @@ declare type UsePopperReturn = ReturnType<typeof usePopper>;

		export { ArrowCSSVarProps, PlacementWithLogical, UsePopperProps, UsePopperReturn, cssVars as popperCSSVars, usePopper };
		export { PlacementWithLogical, UsePopperProps, UsePopperReturn, cssVars as popperCSSVars, usePopper };

dist/index.esm.js

		// src/use-popper.ts
		import { mergeRefs } from "@chakra-ui/react-utils";
		import { mergeRefs } from "@chakra-ui/react-use-merge-refs";
		import {
		@@ -4,0 +4,0 @@ createPopper

package.json

		{
		"name": "@chakra-ui/popper",
		"version": "3.0.6",
		"version": "3.0.7",
		"description": "A React component and hooks wrapper for popper.js",
		@@ -39,13 +39,14 @@ "keywords": [
		"dependencies": {
		"@chakra-ui/react-utils": "2.0.5",
		"@chakra-ui/react-use-merge-refs": "2.0.3",
		"@chakra-ui/react-types": "2.0.3",
		"@popperjs/core": "^2.9.3"
		},
		"peerDependencies": {
		"react": ">=18"
		},
		"devDependencies": {
		"@chakra-ui/hooks": "2.0.8",
		"@chakra-ui/hooks": "2.0.9",
		"framer-motion": "^6.2.9",
		"react": "^18.0.0"
		},
		"peerDependencies": {
		"react": ">=18"
		},
		"scripts": {
		@@ -57,4 +58,3 @@ "build": "tsup src/index.ts --dts",
		"build:fast": "tsup src/index.ts"
		},
		"readme": "# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n const { isOpen, onToggle } = useDisclosure()\n const { popperRef, referenceRef, getArrowProps } = usePopper()\n return (\n <>\n <Button ref={referenceRef} onClick={onToggle} mb={2}>\n {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n </Button>\n {isOpen && (\n <Box ref={popperRef} bg=\"red\">\n <div\n {...getArrowProps({\n style: {\n background: \"red\",\n },\n })}\n />\n This is a popover for the button!\n </Box>\n )}\n </>\n )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n // 2. Create toggle state\n const { isOpen, onToggle } = useDisclosure()\n\n // 3. Create motion variants\n const slide: Variants = {\n exit: {\n y: -2,\n opacity: 0,\n },\n enter: {\n y: 0,\n opacity: 1,\n },\n }\n\n // 4. Consume the `usePopper` hook\n const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n usePopper({\n placement: \"bottom-start\",\n })\n\n return (\n <>\n <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n <div {...getPopperProps()}>\n <AnimatePresence>\n {isOpen && (\n <motion.div\n transition={{\n type: \"spring\",\n duration: 0.2,\n }}\n variants={slide}\n initial=\"exit\"\n animate=\"enter\"\n exit=\"exit\"\n style={{\n background: \"red\",\n width: 200,\n transformOrigin,\n borderRadius: 4,\n }}\n >\n Testing\n <div\n {...getArrowProps({\n style: {\n background: \"red\",\n },\n })}\n />\n </motion.div>\n )}\n </AnimatePresence>\n </div>\n </>\n )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n"
		}
		}

@chakra-ui/popper - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes