@chakra-ui/clickable - npm Package Compare versions

Comparing version 2.0.8 to 2.0.9

dist/index.cjs.js

		@@ -27,5 +27,7 @@ "use strict";

		// ../../utilities/shared-utils/dist/index.esm.js
		var dataAttr = (condition) => condition ? "" : void 0;

		// src/use-clickable.ts
		var import_utils = require("@chakra-ui/utils");
		var import_react_utils = require("@chakra-ui/react-utils");
		var import_react_use_merge_refs = require("@chakra-ui/react-use-merge-refs");

		@@ -156,3 +158,3 @@ // src/use-event-listeners.ts
		const handleMouseDown = (0, import_react2.useCallback)((event) => {
		if ((0, import_utils.isRightClick)(event))
		if (event.button !== 0)
		return;
		@@ -173,3 +175,3 @@ if (isDisabled) {
		const handleMouseUp = (0, import_react2.useCallback)((event) => {
		if ((0, import_utils.isRightClick)(event))
		if (event.button !== 0)
		return;
		@@ -195,3 +197,3 @@ if (!isButton) {
		}, [isPressed, onMouseLeave]);
		const ref = (0, import_react_utils.mergeRefs)(htmlRef, refCallback);
		const ref = (0, import_react_use_merge_refs.mergeRefs)(htmlRef, refCallback);
		if (isButton) {
		@@ -217,3 +219,3 @@ return {
		role: "button",
		"data-active": (0, import_utils.dataAttr)(isPressed),
		"data-active": dataAttr(isPressed),
		"aria-disabled": isDisabled ? "true" : void 0,
		@@ -220,0 +222,0 @@ tabIndex: trulyDisabled ? void 0 : tabIndex,

dist/index.d.ts

		@@ -1,2 +0,1 @@
		import * as _chakra_ui_utils from '@chakra-ui/utils';
		import * as react from 'react';
		@@ -296,3 +295,3 @@
		role: string;
		"data-active": _chakra_ui_utils.Booleanish;
		"data-active": boolean \| "true" \| "false";
		"aria-disabled": "true" \| undefined;
		@@ -299,0 +298,0 @@ tabIndex: number \| undefined;

dist/index.esm.js

		@@ -0,4 +1,6 @@
		// ../../utilities/shared-utils/dist/index.esm.js
		var dataAttr = (condition) => condition ? "" : void 0;

		// src/use-clickable.ts
		import { dataAttr, isRightClick } from "@chakra-ui/utils";
		import { mergeRefs } from "@chakra-ui/react-utils";
		import { mergeRefs } from "@chakra-ui/react-use-merge-refs";

		@@ -129,3 +131,3 @@ // src/use-event-listeners.ts
		const handleMouseDown = useCallback2((event) => {
		if (isRightClick(event))
		if (event.button !== 0)
		return;
		@@ -146,3 +148,3 @@ if (isDisabled) {
		const handleMouseUp = useCallback2((event) => {
		if (isRightClick(event))
		if (event.button !== 0)
		return;
		@@ -149,0 +151,0 @@ if (!isButton) {

package.json

		{
		"name": "@chakra-ui/clickable",
		"version": "2.0.8",
		"version": "2.0.9",
		"description": "React hook and component that implements native button interactions",
		@@ -34,12 +34,12 @@ "keywords": [
		"dependencies": {
		"@chakra-ui/react-utils": "2.0.5",
		"@chakra-ui/utils": "2.0.8"
		"@chakra-ui/react-use-merge-refs": "2.0.3"
		},
		"devDependencies": {
		"@chakra-ui/shared-utils": "2.0.1",
		"@chakra-ui/system": "2.2.7",
		"react": "^18.0.0"
		},
		"peerDependencies": {
		"react": ">=18"
		},
		"devDependencies": {
		"@chakra-ui/system": "2.2.6",
		"react": "^18.0.0"
		},
		"scripts": {
		@@ -51,4 +51,3 @@ "build": "tsup src/index.ts --dts",
		"build:fast": "tsup src/index.ts"
		},
		"readme": "# @chakra-ui/clickable\n\nReact hook that implements all the interactions of a native `button` component\nwith support for making it focusable even if it is disabled.\n\nIt can be used with both native button elements or other elements (like `div`).\n\n## Installation\n\n```jsx\nimport { useClickable } from \"@chakra-ui/clickable\"\n```\n\n## Usage\n\n```jsx\n// create a clickable primitive\nconst Clickable = (props) => {\n const clickable = useClickable(props)\n return <chakra.button display=\"inline-flex\" {...clickable} />\n}\n\n// use the clickable primitive\nconst Example = () => (\n <Clickable\n as=\"div\"\n onClick={(event) => {\n alert(\"clicked\")\n }}\n _active={{ bg: \"blue\", color: \"white\" }}\n _disabled={{ opacity: 0.4, pointerEvents: \"none\" }}\n >\n Clickable\n </Clickable>\n)\n```\n"
		}
		}

New alerts