@toptal/picasso-button - npm Package Compare versions

Comparing version 2.0.4-alpha-feature-migrate-tag-e064cc8de.5 to 2.0.4-alpha-feature-tailwind-w21-c853d19b7.41

dist-package/src/Button/Button.js

@@ -14,3 +14,3 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
 import { noop } from '@toptal/picasso-utils';
@@ -17,0 +17,0 @@ // we need to ensure the correct order of styles import

dist-package/src/Button/styles.js

@@ -79,2 +79,3 @@ export const createSizeClassNames = (size) => {
                 variantClassNames.push('text-gray-500');
+                variantClassNames.push('visited:text-gray-500');
                 variantClassNames.push('border-gray-500');
@@ -139,3 +140,7 @@ variantClassNames.push('bg-white');
 export const createCoreClassNames = ({ disabled, focused, active, }) => {
-    const classNames = ['no-underline', 'rounded-sm', 'shadow-none'];
+    const classNames = [
+        'no-underline hover:no-underline',
+        'rounded-sm',
+        'shadow-none',
+    ];
     if (!disabled) {
@@ -142,0 +147,0 @@ classNames.push('focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)]');

dist-package/src/ButtonAction/ButtonAction.js

@@ -30,3 +30,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 export const ButtonAction = forwardRef(function ButtonAction(props, ref) {
-    const { className, active, focused, hovered, disabled, loading, icon, iconPosition, onClick } = props, rest = __rest(props, ["className", "active", "focused", "hovered", "disabled", "loading", "icon", "iconPosition", "onClick"]);
+    const { 
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    // We use these props only to determine styles
+    active, focused, hovered, 
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+    className, disabled, loading, icon, iconPosition, onClick } = props, rest = __rest(props, ["active", "focused", "hovered", "className", "disabled", "loading", "icon", "iconPosition", "onClick"]);
     const usedIcon = loading ? loaderIcon : icon;
@@ -40,3 +45,3 @@ const usedIconPosition = icon ? iconPosition : 'right';
     });
-    return (React.createElement(ButtonBase, Object.assign({}, rest, { ref: ref, icon: finalIcon, iconPosition: usedIconPosition, onClick: loading ? undefined : onClick, className: finalClassName, contentClassName: 'font-semibold text-blue-500 text-md', active: active, hovered: hovered, focused: focused, disabled: disabled })));
+    return (React.createElement(ButtonBase, Object.assign({}, rest, { ref: ref, icon: finalIcon, iconPosition: usedIconPosition, onClick: loading ? undefined : onClick, className: finalClassName, contentClassName: 'font-semibold text-blue-500 text-md', disabled: disabled })));
 });
@@ -43,0 +48,0 @@ ButtonAction.defaultProps = {

dist-package/src/ButtonBase/ButtonBase.js

@@ -13,3 +13,3 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef } from 'react';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
 import { useTitleCase } from '@toptal/picasso-shared';
@@ -31,29 +31,13 @@ import { Button as MUIButtonBase } from '@mui/base/Button';
 };
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const isReactComponent = (component) => {
-    return (component &&
-        (component.$$typeof === Symbol.for('react.forward_ref') ||
-            typeof component === 'function'));
-};
+const RootElement = forwardRef((props, ref) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { ownerState, as: Root } = props, rest = __rest(props, ["ownerState", "as"]);
+    return React.createElement(Root, Object.assign({}, rest, { ref: ref }));
+});
 export const ButtonBase = forwardRef(function ButtonBase(props, ref) {
     var _a, _b;
     const { icon, iconPosition, loading, children, className, contentClassName, style, disabled, onClick, title, value, type, as = 'button', titleCase: propsTitleCase } = props, rest = __rest(props, ["icon", "iconPosition", "loading", "children", "className", "contentClassName", "style", "disabled", "onClick", "title", "value", "type", "as", "titleCase"]);
-    let RootElement = as;
-    if (isReactComponent(RootElement)) {
-        RootElement = forwardRef(
-        // We don't need to pass ownerState to the root component
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        (_a, rootRef) => {
-            var { ownerState } = _a, restProps = __rest(_a, ["ownerState"]);
-            const Root = as;
-            return React.createElement(Root, Object.assign({ ref: rootRef }, restProps));
-        });
-    }
     const titleCase = useTitleCase(propsTitleCase);
     const finalChildren = [titleCase ? toTitleCase(children) : children];
-    /*
-     Workaround for the case: <Button as={Link} href='' /> (with empty href!), we have to determine "rootElementName" like below
-     Mui/base throws an error when "href" or "to" are empty
-     */
-    const rootElementName = as !== 'button' && ('href' in props || 'to' in props) ? 'a' : undefined;
+    const finalRootElementName = typeof as === 'string' ? as : 'a';
     if (icon) {
@@ -69,3 +53,5 @@ const iconComponent = getIcon({ icon });
     const finalClassName = twMerge(createCoreClassNames({ disabled }), className);
-    return (React.createElement(MUIButtonBase, Object.assign({}, rest, { ref: ref, onClick: getClickHandler(loading, onClick), className: finalClassName, style: style, "aria-disabled": disabled, disabled: disabled, title: title, value: value, type: type, "data-component-type": 'button', tabIndex: ((_a = rest.tabIndex) !== null && _a !== void 0 ? _a : disabled) ? -1 : 0, role: (_b = rest.role) !== null && _b !== void 0 ? _b : 'button', rootElementName: rootElementName, slots: { root: RootElement } }),
+    return (React.createElement(MUIButtonBase, Object.assign({}, rest, { ref: ref, onClick: getClickHandler(loading, onClick), className: finalClassName, style: style, "aria-disabled": disabled, disabled: disabled, title: title, value: value, type: type, "data-component-type": 'button', tabIndex: ((_a = rest.tabIndex) !== null && _a !== void 0 ? _a : disabled) ? -1 : 0, role: (_b = rest.role) !== null && _b !== void 0 ? _b : 'button', rootElementName: finalRootElementName, slots: { root: RootElement }, 
+        // @ts-ignore
+        slotProps: { root: { as } } }),
         React.createElement(Container, { as: 'span', inline: true, flex: true, direction: 'row', alignItems: 'center', className: contentClassName }, finalChildren),
@@ -72,0 +58,0 @@ loading && (React.createElement(Loader, { variant: 'inherit', className: 'absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%]', inline: true, size: 'small' }))));

dist-package/src/ButtonControlLabel/ButtonControlLabel.js

@@ -13,3 +13,3 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
 import { Container } from '@toptal/picasso-container';
@@ -16,0 +16,0 @@ import { Button } from '../Button';

dist-package/src/ButtonGroup/ButtonGroup.js

@@ -13,3 +13,3 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef } from 'react';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
 import { ButtonGroupItem } from '../ButtonGroupItem';
@@ -16,0 +16,0 @@ import { createRootClassNames } from './styles';

dist-package/src/ButtonGroupItem/ButtonGroupItem.js

@@ -13,3 +13,3 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
 import { Button } from '../Button';
@@ -16,0 +16,0 @@ import { createButtonGroupItemClassNames, createGroupVariantClassNames, } from './styles';

dist-package/src/ButtonSplit/ButtonSplit.js

@@ -13,3 +13,3 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef } from 'react';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
 import { ArrowDownMinor24, ArrowDownMinor16 } from '@toptal/picasso-icons';
@@ -16,0 +16,0 @@ import { Dropdown } from '@toptal/picasso-dropdown';

dist-package/src/ButtonSplit/styles.js

@@ -1,2 +0,2 @@
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
 export const createActionButtonClassNames = ({ variant, }) => {
@@ -3,0 +3,0 @@ return twMerge('transition-[color,background]', variant === 'primary' &&

package.json

 {
   "name": "@toptal/picasso-button",
-  "version": "2.0.4-alpha-feature-migrate-tag-e064cc8de.5+e064cc8de",
+  "version": "2.0.4-alpha-feature-tailwind-w21-c853d19b7.41+c853d19b7",
   "description": "Toptal UI components library - Button",
@@ -26,14 +26,13 @@ "publishConfig": {
     "@mui/base": "5.0.0-beta.40",
-    "@toptal/picasso-checkbox": "2.0.3-alpha-feature-migrate-tag-e064cc8de.5+e064cc8de",
-    "@toptal/picasso-container": "1.0.4-alpha-feature-migrate-tag-e064cc8de.11+e064cc8de",
-    "@toptal/picasso-dropdown": "2.0.4-alpha-feature-migrate-tag-e064cc8de.9+e064cc8de",
-    "@toptal/picasso-icons": "1.1.2-alpha-feature-migrate-tag-e064cc8de.11+e064cc8de",
-    "@toptal/picasso-link": "1.0.4-alpha-feature-migrate-tag-e064cc8de.11+e064cc8de",
-    "@toptal/picasso-loader": "1.0.4-alpha-feature-migrate-tag-e064cc8de.11+e064cc8de",
-    "@toptal/picasso-radio": "2.0.3-alpha-feature-migrate-tag-e064cc8de.5+e064cc8de",
-    "@toptal/picasso-shared": "15.0.1-alpha-feature-migrate-tag-e064cc8de.11+e064cc8de",
-    "@toptal/picasso-utils": "1.0.4-alpha-feature-migrate-tag-e064cc8de.11+e064cc8de",
+    "@toptal/picasso-checkbox": "2.0.3-alpha-feature-tailwind-w21-c853d19b7.41+c853d19b7",
+    "@toptal/picasso-container": "1.0.4-alpha-feature-tailwind-w21-c853d19b7.47+c853d19b7",
+    "@toptal/picasso-dropdown": "2.0.4-alpha-feature-tailwind-w21-c853d19b7.45+c853d19b7",
+    "@toptal/picasso-icons": "1.1.2-alpha-feature-tailwind-w21-c853d19b7.47+c853d19b7",
+    "@toptal/picasso-link": "1.0.4-alpha-feature-tailwind-w21-c853d19b7.47+c853d19b7",
+    "@toptal/picasso-loader": "1.0.4-alpha-feature-tailwind-w21-c853d19b7.47+c853d19b7",
+    "@toptal/picasso-radio": "2.0.3-alpha-feature-tailwind-w21-c853d19b7.41+c853d19b7",
+    "@toptal/picasso-shared": "15.0.1-alpha-feature-tailwind-w21-c853d19b7.47+c853d19b7",
+    "@toptal/picasso-utils": "1.0.4-alpha-feature-tailwind-w21-c853d19b7.47+c853d19b7",
     "ap-style-title-case": "^1.1.2",
-    "classnames": "^2.5.1",
-    "tailwind-merge": "^2.2.2"
+    "classnames": "^2.5.1"
   },
@@ -47,2 +46,3 @@ "sideEffects": [
     "@toptal/picasso-tailwind": ">=2.5.0",
+    "@toptal/picasso-tailwind-merge": "^1.0.1",
     "react": ">=16.12.0 < 19.0.0"
@@ -54,4 +54,5 @@ },
   "devDependencies": {
-    "@toptal/picasso-provider": "4.2.2-alpha-feature-migrate-tag-e064cc8de.19+e064cc8de",
-    "@toptal/picasso-test-utils": "1.1.2-alpha-feature-migrate-tag-e064cc8de.11+e064cc8de"
+    "@toptal/picasso-provider": "4.2.2-alpha-feature-tailwind-w21-c853d19b7.55+c853d19b7",
+    "@toptal/picasso-tailwind-merge": "1.1.1-alpha-feature-tailwind-w21-c853d19b7.4266+c853d19b7",
+    "@toptal/picasso-test-utils": "1.1.2-alpha-feature-tailwind-w21-c853d19b7.47+c853d19b7"
   },
@@ -63,3 +64,3 @@ "files": [
   ],
-  "gitHead": "e064cc8de5b2d151eae32ddf2086f027fb3062d5"
+  "gitHead": "c853d19b738f210c81c5a1148ceae81984bd10f3"
 }

src/Button/styles.ts

@@ -103,2 +103,3 @@ import type { SizeType } from '@toptal/picasso-shared'
         variantClassNames.push('text-gray-500')
+        variantClassNames.push('visited:text-gray-500')
         variantClassNames.push('border-gray-500')
@@ -177,3 +178,7 @@ variantClassNames.push('bg-white')
 }): string[] => {
-  const classNames = ['no-underline', 'rounded-sm', 'shadow-none']
+  const classNames = [
+    'no-underline hover:no-underline',
+    'rounded-sm',
+    'shadow-none',
+  ]
 
@@ -180,0 +185,0 @@ if (!disabled) {

src/ButtonSplit/styles.ts

 import type { SizeType } from '@toptal/picasso-shared'
-import { twMerge } from 'tailwind-merge'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
@@ -4,0 +4,0 @@ export const createActionButtonClassNames = ({

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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

219384

decreased by-0.3%

Dev dependency count

3

increased by50%

Lines of code

4270

decreased by-0.44%

Dependency changes

• + Added@toptal/picasso-shared@15.0.0(transitive)

• + Added@toptal/picasso-tailwind-merge@1.2.0(transitive)

• + Added@toptal/picasso-utils@1.0.3(transitive)

• + Added@types/color@3.0.6(transitive)

• + Added@types/color-convert@2.0.3(transitive)

• + Added@types/color-name@1.1.4(transitive)

• + Addedcolor@4.2.3(transitive)

• + Addedcolor-string@1.9.1(transitive)

• + Addedis-arrayish@0.3.2(transitive)

• + Addednotistack@1.0.10(transitive)

• + Addedsimple-swizzle@0.2.2(transitive)

• - Removedtailwind-merge@^2.2.2

• Updated@toptal/picasso-checkbox@2.0.3-alpha-feature-tailwind-w21-c853d19b7.41+c853d19b7

• Updated@toptal/picasso-container@1.0.4-alpha-feature-tailwind-w21-c853d19b7.47+c853d19b7

• Updated@toptal/picasso-dropdown@2.0.4-alpha-feature-tailwind-w21-c853d19b7.45+c853d19b7

• Updated@toptal/picasso-icons@1.1.2-alpha-feature-tailwind-w21-c853d19b7.47+c853d19b7

• Updated@toptal/picasso-link@1.0.4-alpha-feature-tailwind-w21-c853d19b7.47+c853d19b7

• Updated@toptal/picasso-loader@1.0.4-alpha-feature-tailwind-w21-c853d19b7.47+c853d19b7

• Updated@toptal/picasso-radio@2.0.3-alpha-feature-tailwind-w21-c853d19b7.41+c853d19b7

• Updated@toptal/picasso-shared@15.0.1-alpha-feature-tailwind-w21-c853d19b7.47+c853d19b7

• Updated@toptal/picasso-utils@1.0.4-alpha-feature-tailwind-w21-c853d19b7.47+c853d19b7