@toptal/picasso-button 1.0.10-alpha-feature-migrate-buttons-6d6012711.21 → 1.0.10-alpha-FX-5195-fix-button-css-precedence-06be01cc1.19

package/dist-package/src/ButtonBase/ButtonBase.js

@@ -1,78 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { forwardRef } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { useTitleCase } from '@toptal/picasso-shared';
-import { Button as MUIButtonBase } from '@mui/base/Button';
-import { Loader } from '@toptal/picasso-loader';
-import { Container } from '@toptal/picasso-container';
-import { noop, toTitleCase } from '@toptal/picasso-utils';
-import { createCoreClassNames } from './styles';
-const getClickHandler = (loading, handler) => loading ? noop : handler;
-const getIcon = ({ icon }) => {
-    if (!icon) {
-        return null;
-    }
-    return React.cloneElement(icon, {
-        className: twMerge('text-[1.2em] flex-1', icon.props.className),
-        key: 'button-icon',
-    });
-};
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const isReactComponent = (component) => {
-    return (component &&
-        (component.$$typeof === Symbol.for('react.forward_ref') ||
-            typeof component === 'function'));
-};
-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];
-    const rootElementName = as !== 'button' && ('href' in props || 'to' in props) ? 'a' : undefined;
-    if (icon) {
-        const iconComponent = getIcon({ icon });
-        if (iconPosition === 'left') {
-            finalChildren.unshift(iconComponent);
-        }
-        else {
-            finalChildren.push(iconComponent);
-        }
-    }
-    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 } }),
-        React.createElement(Container, { as: 'span', inline: true, flex: true, direction: 'row', alignItems: 'center', className: contentClassName }, finalChildren),
-        loading && (React.createElement(Loader, { variant: 'inherit', className: 'absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%]', inline: true, size: 'small' }))));
-});
-ButtonBase.defaultProps = {
-    as: 'button',
-    children: null,
-    disabled: false,
-    iconPosition: 'left',
-    loading: false,
-    onClick: noop,
-    type: 'button',
-};
-ButtonBase.displayName = 'ButtonBase';
-export default ButtonBase;
-//# sourceMappingURL=ButtonBase.js.map

package/dist-package/src/ButtonBase/ButtonBase.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonBase.js","sourceRoot":"","sources":["../../../src/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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"}

package/dist-package/src/ButtonBase/index.d.ts

@@ -1,5 +0,0 @@
-import type { Props } from './ButtonBase';
-export { default as ButtonBase } from './ButtonBase';
-export type { IconPositionType } from './ButtonBase';
-export declare type ButtonBaseProps = Props;
-//# sourceMappingURL=index.d.ts.map

package/dist-package/src/ButtonBase/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ButtonBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AAEzC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,YAAY,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AACpD,oBAAY,eAAe,GAAG,KAAK,CAAA"}

package/dist-package/src/ButtonBase/index.js

@@ -1,2 +0,0 @@
-export { default as ButtonBase } from './ButtonBase';
-//# sourceMappingURL=index.js.map

package/dist-package/src/ButtonBase/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ButtonBase/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA"}

package/dist-package/src/ButtonBase/styles.d.ts

@@ -1,6 +0,0 @@
-export declare const createCoreClassNames: ({ disabled, loading, }: {
-    disabled?: boolean | undefined;
-    focused?: boolean | undefined;
-    loading?: boolean | undefined;
-}) => string[];
-//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/ButtonBase/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ButtonBase/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB;;;;MAO7B,MAAM,EA4BT,CAAA"}

package/dist-package/src/ButtonBase/styles.js

@@ -1,29 +0,0 @@
-export const createCoreClassNames = ({ disabled, loading, }) => {
-    const classNames = [
-        'text-lg',
-        'inline-flex',
-        'items-center',
-        'justify-center',
-        'select-none',
-        'appearance-none',
-        'm-0',
-        'relative',
-        'normal-case',
-        'align-middle',
-        'transition-colors',
-        'duration-350',
-        'ease-out',
-        'shrink-0',
-        'outline-none',
-        '[&+&]:ml-4',
-    ];
-    if (!disabled && !loading) {
-        classNames.push('cursor-pointer');
-    }
-    else {
-        classNames.push('cursor-default');
-        classNames.push('pointer-events-none');
-    }
-    return classNames;
-};
-//# sourceMappingURL=styles.js.map

package/dist-package/src/ButtonBase/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/ButtonBase/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACnC,QAAQ,EACR,OAAO,GAKR,EAAY,EAAE;IACb,MAAM,UAAU,GAAG;QACjB,SAAS;QACT,aAAa;QACb,cAAc;QACd,gBAAgB;QAChB,aAAa;QACb,iBAAiB;QACjB,KAAK;QACL,UAAU;QACV,aAAa;QACb,cAAc;QACd,mBAAmB;QACnB,cAAc;QACd,UAAU;QACV,UAAU;QACV,cAAc;QACd,YAAY;KACb,CAAA;IAED,IAAI,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE;QACzB,UAAU,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;KAClC;SAAM;QACL,UAAU,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;QACjC,UAAU,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAA;KACvC;IAED,OAAO,UAAU,CAAA;AACnB,CAAC,CAAA"}

package/src/ButtonBase/ButtonBase.tsx

@@ -1,182 +0,0 @@
-import type {
-  ReactNode,
-  ReactElement,
-  MouseEvent,
-  ElementType,
-  FC,
-} from 'react'
-import React, { forwardRef } from 'react'
-import { twMerge } from 'tailwind-merge'
-import type {
-  StandardProps,
-  ButtonOrAnchorProps,
-  OverridableComponent,
-  TextLabelProps,
-} from '@toptal/picasso-shared'
-import { useTitleCase } from '@toptal/picasso-shared'
-import { Button as MUIButtonBase } from '@mui/base/Button'
-import { Loader } from '@toptal/picasso-loader'
-import { Container } from '@toptal/picasso-container'
-import { noop, toTitleCase } from '@toptal/picasso-utils'
-
-import { createCoreClassNames } from './styles'
-
-export type IconPositionType = 'left' | 'right'
-
-export interface Props
-  extends StandardProps,
-    TextLabelProps,
-    ButtonOrAnchorProps {
-  as?: ElementType
-  /** Disables button */
-  disabled?: boolean
-  /** Content of Button component */
-  children?: ReactNode
-  /** ClassName for the content */
-  contentClassName?: string
-  /** Add an `<Icon />` along Button's children */
-  icon?: ReactElement
-  /** Icon can be positioned on the left or right */
-  iconPosition?: IconPositionType
-  /** Shows a loading indicator and disables click events */
-  loading?: boolean
-  /** Callback invoked when component is clicked */
-  onClick?: (event: MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => void
-  /** HTML Value of Button component */
-  value?: string | number
-  /** HTML title of Button component */
-  title?: string
-  /** HTML type of Button component */
-  type?: 'button' | 'reset' | 'submit'
-}
-
-const getClickHandler = (loading?: boolean, handler?: Props['onClick']) =>
-  loading ? noop : handler
-
-const getIcon = ({ icon }: { icon?: ReactElement }) => {
-  if (!icon) {
-    return null
-  }
-
-  return React.cloneElement(icon, {
-    className: twMerge('text-[1.2em] flex-1', icon.props.className),
-    key: 'button-icon',
-  })
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const isReactComponent = (component: any) => {
-  return (
-    component &&
-    (component.$$typeof === Symbol.for('react.forward_ref') ||
-      typeof component === 'function')
-  )
-}
-
-export const ButtonBase: OverridableComponent<Props> = forwardRef<
-  HTMLButtonElement,
-  Props
->(function ButtonBase(props, ref) {
-  const {
-    icon,
-    iconPosition,
-    loading,
-    children,
-    className,
-    contentClassName,
-    style,
-    disabled,
-    onClick,
-    title,
-    value,
-    type,
-    as = 'button',
-    titleCase: propsTitleCase,
-    ...rest
-  } = props
-
-  let RootElement: ElementType | FC = 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
-      ({ ownerState, ...restProps }: { ownerState: object }, rootRef) => {
-        const Root = as
-
-        return <Root ref={rootRef} {...restProps} />
-      }
-    )
-  }
-
-  const titleCase = useTitleCase(propsTitleCase)
-  const finalChildren = [titleCase ? toTitleCase(children) : children]
-  const rootElementName =
-    as !== 'button' && ('href' in props || 'to' in props) ? 'a' : undefined
-
-  if (icon) {
-    const iconComponent = getIcon({ icon })
-
-    if (iconPosition === 'left') {
-      finalChildren.unshift(iconComponent)
-    } else {
-      finalChildren.push(iconComponent)
-    }
-  }
-
-  const finalClassName = twMerge(createCoreClassNames({ disabled }), className)
-
-  return (
-    <MUIButtonBase
-      {...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={rest.tabIndex ?? disabled ? -1 : 0}
-      role={rest.role ?? 'button'}
-      rootElementName={rootElementName}
-      slots={{ root: RootElement }}
-    >
-      <Container
-        as='span'
-        inline
-        flex
-        direction='row'
-        alignItems='center'
-        className={contentClassName}
-      >
-        {finalChildren}
-      </Container>
-
-      {loading && (
-        <Loader
-          variant='inherit'
-          className='absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%]'
-          inline
-          size='small'
-        />
-      )}
-    </MUIButtonBase>
-  )
-})
-
-ButtonBase.defaultProps = {
-  as: 'button',
-  children: null,
-  disabled: false,
-  iconPosition: 'left',
-  loading: false,
-  onClick: noop,
-  type: 'button',
-}
-
-ButtonBase.displayName = 'ButtonBase'
-
-export default ButtonBase

package/src/ButtonBase/index.ts

@@ -1,5 +0,0 @@
-import type { Props } from './ButtonBase'
-
-export { default as ButtonBase } from './ButtonBase'
-export type { IconPositionType } from './ButtonBase'
-export type ButtonBaseProps = Props

package/src/ButtonBase/styles.ts

@@ -1,36 +0,0 @@
-export const createCoreClassNames = ({
-  disabled,
-  loading,
-}: {
-  disabled?: boolean
-  focused?: boolean
-  loading?: boolean
-}): string[] => {
-  const classNames = [
-    'text-lg',
-    'inline-flex',
-    'items-center',
-    'justify-center',
-    'select-none',
-    'appearance-none',
-    'm-0',
-    'relative',
-    'normal-case',
-    'align-middle',
-    'transition-colors',
-    'duration-350',
-    'ease-out',
-    'shrink-0',
-    'outline-none',
-    '[&+&]:ml-4',
-  ]
-
-  if (!disabled && !loading) {
-    classNames.push('cursor-pointer')
-  } else {
-    classNames.push('cursor-default')
-    classNames.push('pointer-events-none')
-  }
-
-  return classNames
-}