@toptal/picasso-button
Advanced tools
Comparing version 2.0.4-alpha-feature-migrate-tag-e064cc8de.5 to 2.0.4-alpha-feature-tailwind-w21-c853d19b7.41
@@ -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 |
@@ -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)]'); |
@@ -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 = { |
@@ -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' })))); |
@@ -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'; |
@@ -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'; |
@@ -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'; |
@@ -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'; |
@@ -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' && |
{ | ||
"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" | ||
} |
@@ -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) { |
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 = ({ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis 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 riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
License Policy Violation
LicenseThis 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 riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
219384
3
4270
+ 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