baseui 15.0.1 → 16.0.0

package/button/button-internals.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-import type { ButtonProps } from './types';
-export default function ButtonInternals(props: ButtonProps): React.JSX.Element;
+import type { ButtonInternalsProps } from './types';
+export default function ButtonInternals(props: ButtonInternalsProps): React.JSX.Element;

package/button/button-internals.js

@@ -9,6 +9,8 @@ var ReactIs = _interopRequireWildcard(require("react-is"));
 var _styledComponents = require("./styled-components");
 var _utils = require("./utils");
 var _overrides = require("../helpers/overrides");
+var _styles = require("../styles");
+var _constants = require("./constants");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /*
@@ -21,13 +23,27 @@ LICENSE file in the root directory of this source tree.
 function RenderEnhancer(props) {
   const {
     Enhancer,
+    $isHovered,
+    $isPressed,
+    $isFocused,
+    $artworkSize,
     ...restProps
   } = props;
   if (typeof Enhancer === 'string') {
     return Enhancer;
   }
+  if (typeof Enhancer === 'function') {
+    return Enhancer({
+      isHovered: $isHovered,
+      isPressed: $isPressed,
+      isFocused: $isFocused,
+      artworkSize: $artworkSize
+    });
+  }
   if (ReactIs.isValidElementType(Enhancer)) {
-    return /*#__PURE__*/React.createElement(Enhancer, restProps);
+    return /*#__PURE__*/React.createElement(Enhancer, _extends({}, restProps, {
+      size: $artworkSize
+    }));
   }
   return Enhancer;
 }
@@ -35,16 +51,49 @@ function ButtonInternals(props) {
   const {
     children,
     overrides = {},
+    isHovered = false,
+    isPressed = false,
+    isFocused = false,
     startEnhancer,
-    endEnhancer
+    endEnhancer,
+    widthType
   } = props;
+  const [, theme] = (0, _styles.useStyletron)();
   const [StartEnhancer, startEnhancerProps] = (0, _overrides.getOverrides)(overrides.StartEnhancer, _styledComponents.StartEnhancer);
   const [EndEnhancer, endEnhancerProps] = (0, _overrides.getOverrides)(overrides.EndEnhancer, _styledComponents.EndEnhancer);
-  const sharedProps = (0, _utils.getSharedProps)(props);
-  const content = /*#__PURE__*/React.createElement(React.Fragment, null, startEnhancer !== null && startEnhancer !== undefined && /*#__PURE__*/React.createElement(StartEnhancer, _extends({}, sharedProps, startEnhancerProps), /*#__PURE__*/React.createElement(RenderEnhancer, {
-    Enhancer: startEnhancer
-  })), children, endEnhancer !== null && endEnhancer !== undefined && /*#__PURE__*/React.createElement(EndEnhancer, _extends({}, sharedProps, endEnhancerProps), /*#__PURE__*/React.createElement(RenderEnhancer, {
-    Enhancer: endEnhancer
+  const [StartEnhancerButtonContentContainer, startEnhancerButtonContentContainerProps] = (0, _overrides.getOverrides)(overrides.StartEnhancerButtonContentContainer, _styledComponents.StartEnhancerButtonContentContainer);
+  const sharedProps = {
+    ...(0, _utils.getSharedProps)(props),
+    $isHovered: isHovered,
+    $isPressed: isPressed,
+    $isFocused: isFocused
+  };
+  const artworkSize = (0, _styledComponents.getArtworkSize)({
+    $theme: theme,
+    $size: sharedProps.$size
+  });
+  const startEnhancerButtonContent = /*#__PURE__*/React.createElement(React.Fragment, null, startEnhancer !== null && startEnhancer !== undefined && /*#__PURE__*/React.createElement(StartEnhancer, _extends({}, sharedProps, startEnhancerProps, {
+    "aria-hidden": Boolean(children)
+  }), /*#__PURE__*/React.createElement(RenderEnhancer, {
+    Enhancer: startEnhancer,
+    $isHovered: isHovered,
+    $isPressed: isPressed,
+    $isFocused: isFocused,
+    $artworkSize: artworkSize
+  })), typeof children === 'function' ? children({
+    isHovered,
+    isPressed,
+    isFocused,
+    artworkSize
+  }) : children);
+  const content = /*#__PURE__*/React.createElement(React.Fragment, null, widthType === _constants.WIDTH_TYPE.fill ? /*#__PURE__*/React.createElement(StartEnhancerButtonContentContainer, _extends({}, sharedProps, startEnhancerButtonContentContainerProps), startEnhancerButtonContent) : /*#__PURE__*/React.createElement(React.Fragment, null, startEnhancerButtonContent), endEnhancer !== null && endEnhancer !== undefined && /*#__PURE__*/React.createElement(EndEnhancer, _extends({}, sharedProps, endEnhancerProps, {
+    "aria-hidden": Boolean(children)
+  }), /*#__PURE__*/React.createElement(RenderEnhancer, {
+    Enhancer: endEnhancer,
+    $isHovered: isHovered,
+    $isPressed: isPressed,
+    $isFocused: isFocused,
+    $artworkSize: artworkSize
   })));
   if (props.isLoading) {
     const hiddenStyle = {

package/button/button.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { ButtonProps, SharedStyleProps } from './types';
+import type { BaseButtonProps, SharedStyleProps } from './types';
 export interface ButtonComponentType {
-    <C extends React.ElementType = 'button'>(props: ButtonProps & Omit<React.ComponentProps<C>, keyof ButtonProps | keyof SharedStyleProps> & SharedStyleProps<C | React.ComponentType<any> | keyof JSX.IntrinsicElements>): JSX.Element;
+    <C extends React.ElementType = 'button'>(props: BaseButtonProps & Omit<React.ComponentProps<C>, keyof BaseButtonProps | keyof SharedStyleProps> & SharedStyleProps<C | React.ComponentType<any> | keyof JSX.IntrinsicElements>): JSX.Element;
     displayName?: string;
 }
 declare const ForwardedButton: ButtonComponentType;

package/button/button.js

@@ -27,7 +27,9 @@ class Button extends React.Component {
   constructor(..._args) {
     super(..._args);
     _defineProperty(this, "state", {
-      isFocusVisible: false
+      isFocusVisible: false,
+      isHovered: false,
+      isPressed: false
     });
     // @ts-ignore
     _defineProperty(this, "internalOnClick", (...args) => {
@@ -57,6 +59,42 @@ class Button extends React.Component {
         });
       }
     });
+    _defineProperty(this, "handleHovered", event => {
+      this.setState({
+        isHovered: true
+      });
+      // Forward the mouse enter event to user handler if provided
+      if (this.props.onMouseEnter) {
+        this.props.onMouseEnter(event);
+      }
+    });
+    _defineProperty(this, "handleNotHovered", event => {
+      this.setState({
+        isHovered: false
+      });
+      // Forward the mouse leave event to user handler if provided
+      if (this.props.onMouseLeave) {
+        this.props.onMouseLeave(event);
+      }
+    });
+    _defineProperty(this, "handlePressed", event => {
+      this.setState({
+        isPressed: true
+      });
+      // Forward the mouse down event to user handler if provided
+      if (this.props.onMouseDown) {
+        this.props.onMouseDown(event);
+      }
+    });
+    _defineProperty(this, "handleNotPressed", event => {
+      this.setState({
+        isPressed: false
+      });
+      // Forward the mouse up event to user handler if provided
+      if (this.props.onMouseUp) {
+        this.props.onMouseUp(event);
+      }
+    });
   }
   render() {
     const {
@@ -67,6 +105,8 @@ class Button extends React.Component {
       kind,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       shape,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      minHitArea,
       isLoading,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       isSelected,
@@ -75,14 +115,19 @@ class Button extends React.Component {
       startEnhancer,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       endEnhancer,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       children,
       forwardedRef,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       colors,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      backgroundSafe,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      widthType,
+      'aria-label': ariaLabel,
       ...restProps
     } = this.props;
-    // Get overrides
+
+    // Get overrides.
     const isAnchor = 'href' in restProps && Boolean(restProps?.href);
     const [BaseButton, baseButtonProps] = (0, _overrides.getOverrides)(
     // adding both (1) BaseButton and (2) Root
@@ -93,20 +138,33 @@ class Button extends React.Component {
     const [LoadingSpinnerContainer, loadingSpinnerContainerProps] = (0, _overrides.getOverrides)(overrides.LoadingSpinnerContainer, _styledComponents.LoadingSpinnerContainer);
     const sharedProps = {
       ...(0, _utils.getSharedProps)(this.props),
-      $isFocusVisible: this.state.isFocusVisible
+      $isFocusVisible: this.state.isFocusVisible,
+      $isHovered: this.state.isHovered,
+      $isPressed: this.state.isPressed
     };
     const ariaLoadingElements = isLoading ? {
-      ['aria-label']: typeof this.props.children === 'string' ? `loading ${this.props.children}` : 'content is loading',
+      ['aria-label']: ariaLabel ? ariaLabel : typeof children === 'string' ? `loading ${children}` : 'content is loading',
       ['aria-busy']: 'true',
       ['aria-live']: 'polite'
     } : {};
     const ariaDisabledProps = restProps?.disabled && isAnchor ? {
       ['aria-disabled']: true
     } : {};
+    const ariaLabelProps = isLoading ? {} : ariaLabel ? {
+      ['aria-label']: ariaLabel
+    } : typeof children === 'string' ? {
+      ['aria-label']: children
+    } : {};
+    // Only need to apply aria-pressed if it's a standalone button with isSelected prop
+    const ariaPressedProps =
+    // Button group component will pass aria-checked prop
+    typeof baseButtonProps['aria-checked'] === 'undefined' && typeof isSelected === 'boolean' ? {
+      ['aria-pressed']: isSelected
+    } : {};
     return /*#__PURE__*/React.createElement(BaseButton, _extends({
       ref: forwardedRef,
       "data-baseweb": "button"
-    }, ariaLoadingElements, ariaDisabledProps, sharedProps, restProps, baseButtonProps, {
+    }, ariaLoadingElements, ariaDisabledProps, ariaLabelProps, ariaPressedProps, sharedProps, restProps, baseButtonProps, {
       // Applies last to override passed in onClick
       onClick: this.internalOnClick,
       onFocus: (0, _focusVisible.forkFocus)({
@@ -116,8 +174,22 @@ class Button extends React.Component {
       onBlur: (0, _focusVisible.forkBlur)({
         ...restProps,
         ...baseButtonProps
-      }, this.handleBlur)
-    }), isLoading ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_buttonInternals.default, this.props), /*#__PURE__*/React.createElement(LoadingSpinnerContainer, _extends({}, sharedProps, loadingSpinnerContainerProps), /*#__PURE__*/React.createElement(LoadingSpinner, _extends({}, sharedProps, loadingSpinnerProps)))) : /*#__PURE__*/React.createElement(_buttonInternals.default, this.props));
+      }, this.handleBlur),
+      onMouseEnter: this.handleHovered,
+      onMouseLeave: this.handleNotHovered,
+      onMouseDown: this.handlePressed,
+      onMouseUp: this.handleNotPressed
+    }), isLoading ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_buttonInternals.default, _extends({}, this.props, {
+      isHovered: this.state.isHovered,
+      isPressed: this.state.isPressed,
+      isFocused: this.state.isFocusVisible
+    })), /*#__PURE__*/React.createElement(LoadingSpinnerContainer, _extends({}, sharedProps, loadingSpinnerContainerProps, {
+      "aria-hidden": true
+    }), /*#__PURE__*/React.createElement(LoadingSpinner, _extends({}, sharedProps, loadingSpinnerProps)))) : /*#__PURE__*/React.createElement(_buttonInternals.default, _extends({}, this.props, {
+      isHovered: this.state.isHovered,
+      isPressed: this.state.isPressed,
+      isFocused: this.state.isFocusVisible
+    })));
   }
 }
 _defineProperty(Button, "defaultProps", _defaultProps.defaultProps);

package/button/constants.d.ts

@@ -2,10 +2,21 @@ export declare const KIND: {
     readonly primary: "primary";
     readonly secondary: "secondary";
     readonly tertiary: "tertiary";
+    readonly dangerPrimary: "dangerPrimary";
+    readonly dangerSecondary: "dangerSecondary";
+    readonly dangerTertiary: "dangerTertiary";
 };
+export declare const BUTTON_GROUP_EXCLUSIVE_KINDS: Readonly<{
+    readonly outline: "outline";
+}>;
 export declare const SHAPE: {
     readonly default: "default";
+    readonly rectangular: "rectangular";
+    readonly rounded: "rounded";
     readonly pill: "pill";
+    /**
+     * @deprecated Use 'circle' or 'square' instead for icon-only buttons
+     */
     readonly round: "round";
     readonly circle: "circle";
     readonly square: "square";
@@ -15,4 +26,15 @@ export declare const SIZE: {
     readonly default: "default";
     readonly compact: "compact";
     readonly large: "large";
+    readonly xSmall: "xSmall";
+    readonly small: "small";
+    readonly medium: "medium";
+};
+export declare const MIN_HIT_AREA: {
+    readonly tap: "tap";
+    readonly click: "click";
+};
+export declare const WIDTH_TYPE: {
+    readonly hug: "hug";
+    readonly fill: "fill";
 };

package/button/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SIZE = exports.SHAPE = exports.KIND = void 0;
+exports.WIDTH_TYPE = exports.SIZE = exports.SHAPE = exports.MIN_HIT_AREA = exports.KIND = exports.BUTTON_GROUP_EXCLUSIVE_KINDS = void 0;
 /*
 Copyright (c) Uber Technologies, Inc.
 
@@ -13,18 +13,46 @@ LICENSE file in the root directory of this source tree.
 const KIND = exports.KIND = {
   primary: 'primary',
   secondary: 'secondary',
-  tertiary: 'tertiary'
+  tertiary: 'tertiary',
+  dangerPrimary: 'dangerPrimary',
+  dangerSecondary: 'dangerSecondary',
+  dangerTertiary: 'dangerTertiary'
 };
+const BUTTON_GROUP_EXCLUSIVE_KINDS = exports.BUTTON_GROUP_EXCLUSIVE_KINDS = Object.freeze({
+  outline: 'outline'
+});
 const SHAPE = exports.SHAPE = {
   default: 'default',
+  rectangular: 'rectangular',
+  // same as default
+  rounded: 'rounded',
+  // same as pill
   pill: 'pill',
+  /**
+   * @deprecated Use 'circle' or 'square' instead for icon-only buttons
+   */
   round: 'round',
   circle: 'circle',
   square: 'square'
 };
 const SIZE = exports.SIZE = {
   mini: 'mini',
+  // 'xSmall'
   default: 'default',
+  // 'medium'
   compact: 'compact',
-  large: 'large'
+  // 'small'
+  large: 'large',
+  // 'large'
+  xSmall: 'xSmall',
+  small: 'small',
+  medium: 'medium'
+};
+const MIN_HIT_AREA = exports.MIN_HIT_AREA = {
+  tap: 'tap',
+  click: 'click'
+};
+const WIDTH_TYPE = exports.WIDTH_TYPE = {
+  hug: 'hug',
+  fill: 'fill'
 };

package/button/default-props.d.ts

@@ -1,9 +1,11 @@
 export declare const defaultProps: {
+    backgroundSafe: boolean;
     disabled: boolean;
+    minHitArea: "click";
     isLoading: boolean;
-    isSelected: boolean;
     kind: "primary";
     overrides: {};
-    shape: "default";
-    size: "default";
+    shape: "rectangular";
+    size: "medium";
+    widthType: "hug";
 };

package/button/default-props.js

@@ -13,11 +13,13 @@ LICENSE file in the root directory of this source tree.
 */
 
 const defaultProps = exports.defaultProps = {
+  backgroundSafe: false,
   disabled: false,
+  minHitArea: _constants.MIN_HIT_AREA.click,
   isLoading: false,
-  isSelected: false,
   kind: _constants.KIND.primary,
   overrides: {},
-  shape: _constants.SHAPE.default,
-  size: _constants.SIZE.default
+  shape: _constants.SHAPE.rectangular,
+  size: _constants.SIZE.medium,
+  widthType: _constants.WIDTH_TYPE.hug
 };

package/button/index.d.ts

@@ -1,6 +1,6 @@
 import type { CustomColors } from './types';
 export { default as Button } from './button';
-export { KIND, SIZE, SHAPE } from './constants';
+export { KIND, SIZE, SHAPE, MIN_HIT_AREA, WIDTH_TYPE, BUTTON_GROUP_EXCLUSIVE_KINDS, } from './constants';
 export { BaseButton as StyledBaseButton, StartEnhancer as StyledStartEnhancer, EndEnhancer as StyledEndEnhancer, LoadingSpinner as StyledLoadingSpinner, LoadingSpinnerContainer as StyledLoadingSpinnerContainer, } from './styled-components';
 export * from './types';
 /** @deprecated use CustomColors instead. To be removed in future versions.*/

package/button/index.js

@@ -8,12 +8,21 @@ var _exportNames = {
   KIND: true,
   SIZE: true,
   SHAPE: true,
+  MIN_HIT_AREA: true,
+  WIDTH_TYPE: true,
+  BUTTON_GROUP_EXCLUSIVE_KINDS: true,
   StyledBaseButton: true,
   StyledStartEnhancer: true,
   StyledEndEnhancer: true,
   StyledLoadingSpinner: true,
   StyledLoadingSpinnerContainer: true
 };
+Object.defineProperty(exports, "BUTTON_GROUP_EXCLUSIVE_KINDS", {
+  enumerable: true,
+  get: function () {
+    return _constants.BUTTON_GROUP_EXCLUSIVE_KINDS;
+  }
+});
 Object.defineProperty(exports, "Button", {
   enumerable: true,
   get: function () {
@@ -26,6 +35,12 @@ Object.defineProperty(exports, "KIND", {
     return _constants.KIND;
   }
 });
+Object.defineProperty(exports, "MIN_HIT_AREA", {
+  enumerable: true,
+  get: function () {
+    return _constants.MIN_HIT_AREA;
+  }
+});
 Object.defineProperty(exports, "SHAPE", {
   enumerable: true,
   get: function () {
@@ -68,6 +83,12 @@ Object.defineProperty(exports, "StyledStartEnhancer", {
     return _styledComponents.StartEnhancer;
   }
 });
+Object.defineProperty(exports, "WIDTH_TYPE", {
+  enumerable: true,
+  get: function () {
+    return _constants.WIDTH_TYPE;
+  }
+});
 var _button = _interopRequireDefault(require("./button"));
 var _constants = require("./constants");
 var _styledComponents = require("./styled-components");

package/button/styled-components.d.ts

@@ -1,7 +1,14 @@
+import { type Theme } from '../styles';
+import { SIZE } from './constants';
 import type { SharedStyleProps } from './types';
 export declare const BaseButton: import("styletron-react").StyletronComponent<"button", SharedStyleProps>;
 export declare const AnchorBaseButton: import("styletron-react").StyletronComponent<"a", SharedStyleProps>;
 export declare const EndEnhancer: import("styletron-react").StyletronComponent<"div", SharedStyleProps>;
 export declare const StartEnhancer: import("styletron-react").StyletronComponent<"div", SharedStyleProps>;
+export declare const StartEnhancerButtonContentContainer: import("styletron-react").StyletronComponent<"div", SharedStyleProps>;
 export declare const LoadingSpinnerContainer: import("styletron-react").StyletronComponent<"div", SharedStyleProps>;
 export declare const LoadingSpinner: import("styletron-react").StyletronComponent<"span", SharedStyleProps>;
+export declare const getArtworkSize: ({ $theme, $size }: {
+    $theme: Theme;
+    $size?: keyof typeof SIZE;
+}) => string;