@toptal/picasso-button 1.0.10-alpha-feature-migrate-buttons-638be38bb.19 → 1.0.10-alpha-FX-5195-fix-update-problems-902f38edb.16

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,GAOR,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,177 +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]
-
-  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}
-      disabled={disabled}
-      title={title}
-      value={value}
-      type={type}
-      data-component-type='button'
-      tabIndex={rest.tabIndex ?? disabled ? -1 : 0}
-      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,38 +0,0 @@
-export const createCoreClassNames = ({
-  disabled,
-  loading,
-}: {
-  disabled?: boolean
-  focused?: boolean
-  hovered?: boolean
-  active?: 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
-}