@rescui/button 0.2.0 → 0.4.1

package/lib/button.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Theme } from '@rescui/ui-contexts';
 export declare type ButtonShiftedSide = 'right' | 'left' | 'top' | 'bottom';
-export declare type ButtonSize = 'l' | 'm' | 's';
+export declare type ButtonSize = 'l' | 'm' | 's' | 'xs';
 export declare type ButtonModeGeneric = 'classic' | 'rock' | 'transparent' | 'outline';
 export declare type ButtonModeClear = 'clear';
 export declare type ButtonType = 'button' | 'submit' | 'reset';
@@ -69,333 +69,5 @@ export declare type ButtonProps = {
     iconPosition?: never;
 });
 export declare type ButtonRef = HTMLDivElement & HTMLAnchorElement & HTMLButtonElement;
-export declare const Button: React.ForwardRefExoticComponent<({
-    /** Additional class-name */
-    className?: string;
-    /** Child element */
-    children?: React.ReactNode;
-    /** Disabled */
-    disabled?: boolean;
-    /** button size */
-    size?: ButtonSize;
-    /** Appearance theme */
-    theme?: Theme;
-    /** [More about button types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) */
-    type?: ButtonType;
-    /** Reduce horizontal padding. __Use only when providing external width (using className, flexbox, style={{width: 200px}}, etc.)__ */
-    narrow?: boolean;
-    /** Shows loading icon, use when some action related to button is in progress */
-    busy?: boolean;
-    /** @ignore */
-    highlighted?: boolean;
-    /** @ignore */
-    flat?: ButtonFlat;
-    tabIndex?: number;
-    title?: string;
-} & {
-    /** button appearance */
-    mode?: ButtonModeGeneric;
-    shifted?: never;
-} & {
-    /** Url path for using component as a link */
-    href?: string;
-    target?: '_blank' | '_self' | '_parent' | '_top';
-    onClick?: never;
-    notFocusable?: never;
-} & {
-    /** Additional icon */
-    icon: React.ReactNode;
-    /** Additional icon position */
-    iconPosition?: ButtonIconPosition;
-} & React.RefAttributes<ButtonRef>) | ({
-    /** Additional class-name */
-    className?: string;
-    /** Child element */
-    children?: React.ReactNode;
-    /** Disabled */
-    disabled?: boolean;
-    /** button size */
-    size?: ButtonSize;
-    /** Appearance theme */
-    theme?: Theme;
-    /** [More about button types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) */
-    type?: ButtonType;
-    /** Reduce horizontal padding. __Use only when providing external width (using className, flexbox, style={{width: 200px}}, etc.)__ */
-    narrow?: boolean;
-    /** Shows loading icon, use when some action related to button is in progress */
-    busy?: boolean;
-    /** @ignore */
-    highlighted?: boolean;
-    /** @ignore */
-    flat?: ButtonFlat;
-    tabIndex?: number;
-    title?: string;
-} & {
-    /** button appearance */
-    mode?: ButtonModeGeneric;
-    shifted?: never;
-} & {
-    /** Url path for using component as a link */
-    href?: string;
-    target?: '_blank' | '_self' | '_parent' | '_top';
-    onClick?: never;
-    notFocusable?: never;
-} & {
-    icon?: never;
-    iconPosition?: never;
-} & React.RefAttributes<ButtonRef>) | ({
-    /** Additional class-name */
-    className?: string;
-    /** Child element */
-    children?: React.ReactNode;
-    /** Disabled */
-    disabled?: boolean;
-    /** button size */
-    size?: ButtonSize;
-    /** Appearance theme */
-    theme?: Theme;
-    /** [More about button types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) */
-    type?: ButtonType;
-    /** Reduce horizontal padding. __Use only when providing external width (using className, flexbox, style={{width: 200px}}, etc.)__ */
-    narrow?: boolean;
-    /** Shows loading icon, use when some action related to button is in progress */
-    busy?: boolean;
-    /** @ignore */
-    highlighted?: boolean;
-    /** @ignore */
-    flat?: ButtonFlat;
-    tabIndex?: number;
-    title?: string;
-} & {
-    /** button appearance */
-    mode?: ButtonModeGeneric;
-    shifted?: never;
-} & {
-    href?: never;
-    target?: never;
-    /** Click event handler */
-    onClick?: React.MouseEventHandler<HTMLElement>;
-    /**
-     * Remove focus ability completely.
-     * We use separate property instead of tabIndex
-     * because tabIndex doesn't remove some controls behavior
-     * for example 'space' button press support.
-     * So with special property we can do it.
-     * @ignore
-     * */
-    notFocusable?: boolean;
-} & {
-    /** Additional icon */
-    icon: React.ReactNode;
-    /** Additional icon position */
-    iconPosition?: ButtonIconPosition;
-} & React.RefAttributes<ButtonRef>) | ({
-    /** Additional class-name */
-    className?: string;
-    /** Child element */
-    children?: React.ReactNode;
-    /** Disabled */
-    disabled?: boolean;
-    /** button size */
-    size?: ButtonSize;
-    /** Appearance theme */
-    theme?: Theme;
-    /** [More about button types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) */
-    type?: ButtonType;
-    /** Reduce horizontal padding. __Use only when providing external width (using className, flexbox, style={{width: 200px}}, etc.)__ */
-    narrow?: boolean;
-    /** Shows loading icon, use when some action related to button is in progress */
-    busy?: boolean;
-    /** @ignore */
-    highlighted?: boolean;
-    /** @ignore */
-    flat?: ButtonFlat;
-    tabIndex?: number;
-    title?: string;
-} & {
-    /** button appearance */
-    mode?: ButtonModeGeneric;
-    shifted?: never;
-} & {
-    href?: never;
-    target?: never;
-    /** Click event handler */
-    onClick?: React.MouseEventHandler<HTMLElement>;
-    /**
-     * Remove focus ability completely.
-     * We use separate property instead of tabIndex
-     * because tabIndex doesn't remove some controls behavior
-     * for example 'space' button press support.
-     * So with special property we can do it.
-     * @ignore
-     * */
-    notFocusable?: boolean;
-} & {
-    icon?: never;
-    iconPosition?: never;
-} & React.RefAttributes<ButtonRef>) | ({
-    /** Additional class-name */
-    className?: string;
-    /** Child element */
-    children?: React.ReactNode;
-    /** Disabled */
-    disabled?: boolean;
-    /** button size */
-    size?: ButtonSize;
-    /** Appearance theme */
-    theme?: Theme;
-    /** [More about button types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) */
-    type?: ButtonType;
-    /** Reduce horizontal padding. __Use only when providing external width (using className, flexbox, style={{width: 200px}}, etc.)__ */
-    narrow?: boolean;
-    /** Shows loading icon, use when some action related to button is in progress */
-    busy?: boolean;
-    /** @ignore */
-    highlighted?: boolean;
-    /** @ignore */
-    flat?: ButtonFlat;
-    tabIndex?: number;
-    title?: string;
-} & {
-    mode?: ButtonModeClear;
-    /** Offset a clear button to one or more sides before the text so that the button's background extends beyond its container.  */
-    shifted?: ButtonShifted;
-} & {
-    /** Url path for using component as a link */
-    href?: string;
-    target?: '_blank' | '_self' | '_parent' | '_top';
-    onClick?: never;
-    notFocusable?: never;
-} & {
-    /** Additional icon */
-    icon: React.ReactNode;
-    /** Additional icon position */
-    iconPosition?: ButtonIconPosition;
-} & React.RefAttributes<ButtonRef>) | ({
-    /** Additional class-name */
-    className?: string;
-    /** Child element */
-    children?: React.ReactNode;
-    /** Disabled */
-    disabled?: boolean;
-    /** button size */
-    size?: ButtonSize;
-    /** Appearance theme */
-    theme?: Theme;
-    /** [More about button types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) */
-    type?: ButtonType;
-    /** Reduce horizontal padding. __Use only when providing external width (using className, flexbox, style={{width: 200px}}, etc.)__ */
-    narrow?: boolean;
-    /** Shows loading icon, use when some action related to button is in progress */
-    busy?: boolean;
-    /** @ignore */
-    highlighted?: boolean;
-    /** @ignore */
-    flat?: ButtonFlat;
-    tabIndex?: number;
-    title?: string;
-} & {
-    mode?: ButtonModeClear;
-    /** Offset a clear button to one or more sides before the text so that the button's background extends beyond its container.  */
-    shifted?: ButtonShifted;
-} & {
-    /** Url path for using component as a link */
-    href?: string;
-    target?: '_blank' | '_self' | '_parent' | '_top';
-    onClick?: never;
-    notFocusable?: never;
-} & {
-    icon?: never;
-    iconPosition?: never;
-} & React.RefAttributes<ButtonRef>) | ({
-    /** Additional class-name */
-    className?: string;
-    /** Child element */
-    children?: React.ReactNode;
-    /** Disabled */
-    disabled?: boolean;
-    /** button size */
-    size?: ButtonSize;
-    /** Appearance theme */
-    theme?: Theme;
-    /** [More about button types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) */
-    type?: ButtonType;
-    /** Reduce horizontal padding. __Use only when providing external width (using className, flexbox, style={{width: 200px}}, etc.)__ */
-    narrow?: boolean;
-    /** Shows loading icon, use when some action related to button is in progress */
-    busy?: boolean;
-    /** @ignore */
-    highlighted?: boolean;
-    /** @ignore */
-    flat?: ButtonFlat;
-    tabIndex?: number;
-    title?: string;
-} & {
-    mode?: ButtonModeClear;
-    /** Offset a clear button to one or more sides before the text so that the button's background extends beyond its container.  */
-    shifted?: ButtonShifted;
-} & {
-    href?: never;
-    target?: never;
-    /** Click event handler */
-    onClick?: React.MouseEventHandler<HTMLElement>;
-    /**
-     * Remove focus ability completely.
-     * We use separate property instead of tabIndex
-     * because tabIndex doesn't remove some controls behavior
-     * for example 'space' button press support.
-     * So with special property we can do it.
-     * @ignore
-     * */
-    notFocusable?: boolean;
-} & {
-    /** Additional icon */
-    icon: React.ReactNode;
-    /** Additional icon position */
-    iconPosition?: ButtonIconPosition;
-} & React.RefAttributes<ButtonRef>) | ({
-    /** Additional class-name */
-    className?: string;
-    /** Child element */
-    children?: React.ReactNode;
-    /** Disabled */
-    disabled?: boolean;
-    /** button size */
-    size?: ButtonSize;
-    /** Appearance theme */
-    theme?: Theme;
-    /** [More about button types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) */
-    type?: ButtonType;
-    /** Reduce horizontal padding. __Use only when providing external width (using className, flexbox, style={{width: 200px}}, etc.)__ */
-    narrow?: boolean;
-    /** Shows loading icon, use when some action related to button is in progress */
-    busy?: boolean;
-    /** @ignore */
-    highlighted?: boolean;
-    /** @ignore */
-    flat?: ButtonFlat;
-    tabIndex?: number;
-    title?: string;
-} & {
-    mode?: ButtonModeClear;
-    /** Offset a clear button to one or more sides before the text so that the button's background extends beyond its container.  */
-    shifted?: ButtonShifted;
-} & {
-    href?: never;
-    target?: never;
-    /** Click event handler */
-    onClick?: React.MouseEventHandler<HTMLElement>;
-    /**
-     * Remove focus ability completely.
-     * We use separate property instead of tabIndex
-     * because tabIndex doesn't remove some controls behavior
-     * for example 'space' button press support.
-     * So with special property we can do it.
-     * @ignore
-     * */
-    notFocusable?: boolean;
-} & {
-    icon?: never;
-    iconPosition?: never;
-} & React.RefAttributes<ButtonRef>)>;
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<ButtonRef>>;
 export default Button;

package/lib/button.js

@@ -1,9 +1,19 @@
+import "core-js/modules/web.dom-collections.for-each.js";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "children", "href", "type", "disabled", "size", "theme", "icon", "iconPosition", "narrow", "busy", "flat", "notFocusable", "highlighted", "shifted", "mode"];
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _flatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/flat";
-import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
 import React, { cloneElement } from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
@@ -23,6 +33,7 @@ var MODE_STYLES = {
   clear: styles.modeClear
 };
 var SIZE_STYLES = {
+  xs: styles.sizeXs,
   s: styles.sizeS,
   m: styles.sizeM,
   l: styles.sizeL
@@ -31,6 +42,12 @@ var ICON_POSITION_STYLES = {
   left: styles.alignIconLeft,
   right: styles.alignIconRight
 };
+var ICON_SIZES = {
+  xs: 's',
+  s: 's',
+  m: 'm',
+  l: 'l'
+};
 var Button = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complexity
 function (_ref, ref) {
   var _cn;
@@ -81,19 +98,30 @@ function (_ref, ref) {
   var shiftedBottom = calculateShifted(shifted, 'bottom'); // check for ignored jsx values and empty string, more info https://reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored
 
   var isWithoutText = children === null || typeof children === 'undefined' || children === false || children === true || children === '';
-  return /*#__PURE__*/React.createElement(ButtonTag, _Object$assign({
+  var iconSlot;
+
+  if ( /*#__PURE__*/React.isValidElement(icon) && busy) {
+    iconSlot = /*#__PURE__*/React.createElement(LoadingIcon, {
+      className: styles.icon
+    });
+  } else if ( /*#__PURE__*/React.isValidElement(icon)) {
+    iconSlot = /*#__PURE__*/cloneElement(icon, {
+      className: cn(icon.props.className, styles.icon)
+    });
+  }
+
+  var showBusyOverlay = ! /*#__PURE__*/React.isValidElement(icon) && busy;
+  return /*#__PURE__*/React.createElement(ButtonTag, _objectSpread(_objectSpread({
     "data-test": 'button'
-  }, restProps, {
+  }, restProps), {}, {
     ref: ref,
     href: href,
     type: resolvedType,
     disabled: disabled,
-    className: cn(styles.main, MODE_STYLES[mode], SIZE_STYLES[size], ICON_POSITION_STYLES[iconPosition], styles[theme], (_cn = {}, _defineProperty(_cn, styles.disabled, disabled), _defineProperty(_cn, styles.narrow, narrow), _defineProperty(_cn, _flatInstanceProperty(styles), flat), _defineProperty(_cn, styles.highlighted, highlighted), _defineProperty(_cn, styles.withIcon, !!icon), _defineProperty(_cn, styles.withoutText, isWithoutText), _defineProperty(_cn, styles.shiftedLeft, shiftedLeft), _defineProperty(_cn, styles.shiftedRight, shiftedRight), _defineProperty(_cn, styles.shiftedTop, shiftedTop), _defineProperty(_cn, styles.shiftedBottom, shiftedBottom), _defineProperty(_cn, styles.busy, busy), _cn), className)
-  }), icon && /*#__PURE__*/cloneElement(icon, {
-    className: cn(icon.props.className, styles.icon)
-  }), busy && /*#__PURE__*/React.createElement(LoadingIcon, {
+    className: cn(styles.main, MODE_STYLES[mode], SIZE_STYLES[size], ICON_POSITION_STYLES[iconPosition], styles[theme], (_cn = {}, _defineProperty(_cn, styles.disabled, disabled), _defineProperty(_cn, styles.narrow, narrow), _defineProperty(_cn, styles.flatLeft, flat === 'left'), _defineProperty(_cn, styles.flatRight, flat === 'right'), _defineProperty(_cn, styles.highlighted, highlighted), _defineProperty(_cn, styles.withIcon, !!icon), _defineProperty(_cn, styles.withoutText, isWithoutText), _defineProperty(_cn, styles.shiftedLeft, shiftedLeft), _defineProperty(_cn, styles.shiftedRight, shiftedRight), _defineProperty(_cn, styles.shiftedTop, shiftedTop), _defineProperty(_cn, styles.shiftedBottom, shiftedBottom), _defineProperty(_cn, styles.busy, busy), _defineProperty(_cn, styles.busyOverlay, showBusyOverlay), _cn), className)
+  }), iconSlot, showBusyOverlay && /*#__PURE__*/React.createElement(LoadingIcon, {
     className: styles.busyIcon,
-    size: size,
+    size: ICON_SIZES[size],
     "data-test": "busy-icon"
   }), children);
 });
@@ -128,7 +156,7 @@ Button.propTypes = {
   }),
   icon: PropTypes.node,
   iconPosition: PropTypes.oneOf(['left', 'right']),
-  size: PropTypes.oneOf(['l', 'm', 's']),
+  size: PropTypes.oneOf(['l', 'm', 's', 'xs']),
   mode: validateAdditional(PropTypes.oneOf(['classic', 'rock', 'transparent', 'outline', 'clear']), function (props) {
     if (typeof props.shifted !== 'undefined' && props.mode !== 'clear') {
       return new Error("'shifted' prop cannot be used when 'mode' prop is not 'clear'.");

package/lib/button.module.pcss.js

@@ -1,30 +1,33 @@
 var styles = {
-  "main": "_main_16ytgbt_17",
-  "busy": "_busy_16ytgbt_48",
-  "light": "_light_16ytgbt_56",
-  "disabled": "_disabled_16ytgbt_58",
-  "dark": "_dark_16ytgbt_59",
-  "alignIconLeft": "_alignIconLeft_16ytgbt_74",
-  "alignIconRight": "_alignIconRight_16ytgbt_78",
-  "sizeS": "_sizeS_16ytgbt_82",
-  "sizeM": "_sizeM_16ytgbt_89",
-  "sizeL": "_sizeL_16ytgbt_96",
-  "withoutText": "_withoutText_16ytgbt_103",
-  "withIcon": "_withIcon_16ytgbt_109",
-  "flatRight": "_flatRight_16ytgbt_115",
-  "flatLeft": "_flatLeft_16ytgbt_120",
-  "modeClassic": "_modeClassic_16ytgbt_125",
-  "busyIcon": "_busyIcon_16ytgbt_129",
-  "modeRock": "_modeRock_16ytgbt_198",
-  "modeTransparent": "_modeTransparent_16ytgbt_276",
-  "modeOutline": "_modeOutline_16ytgbt_346",
-  "modeClear": "_modeClear_16ytgbt_424",
-  "highlighted": "_highlighted_16ytgbt_459",
-  "narrow": "_narrow_16ytgbt_500",
-  "shiftedLeft": "_shiftedLeft_16ytgbt_514",
-  "shiftedRight": "_shiftedRight_16ytgbt_515",
-  "shiftedTop": "_shiftedTop_16ytgbt_516",
-  "shiftedBottom": "_shiftedBottom_16ytgbt_517",
-  "icon": "_icon_16ytgbt_519"
+  "main": "_main_p9cwb6_17",
+  "rs-reset-letter-spacing": "_rs-reset-letter-spacing_p9cwb6_1",
+  "busy": "_busy_p9cwb6_49",
+  "busyOverlay": "_busyOverlay_p9cwb6_53",
+  "light": "_light_p9cwb6_59",
+  "disabled": "_disabled_p9cwb6_61",
+  "dark": "_dark_p9cwb6_62",
+  "alignIconLeft": "_alignIconLeft_p9cwb6_77",
+  "alignIconRight": "_alignIconRight_p9cwb6_81",
+  "sizeXs": "_sizeXs_p9cwb6_85",
+  "sizeS": "_sizeS_p9cwb6_92",
+  "sizeM": "_sizeM_p9cwb6_99",
+  "sizeL": "_sizeL_p9cwb6_106",
+  "withoutText": "_withoutText_p9cwb6_113",
+  "withIcon": "_withIcon_p9cwb6_119",
+  "flatRight": "_flatRight_p9cwb6_125",
+  "flatLeft": "_flatLeft_p9cwb6_130",
+  "modeClassic": "_modeClassic_p9cwb6_135",
+  "busyIcon": "_busyIcon_p9cwb6_139",
+  "modeRock": "_modeRock_p9cwb6_208",
+  "modeTransparent": "_modeTransparent_p9cwb6_286",
+  "modeOutline": "_modeOutline_p9cwb6_356",
+  "modeClear": "_modeClear_p9cwb6_434",
+  "highlighted": "_highlighted_p9cwb6_469",
+  "narrow": "_narrow_p9cwb6_510",
+  "shiftedLeft": "_shiftedLeft_p9cwb6_524",
+  "shiftedRight": "_shiftedRight_p9cwb6_525",
+  "shiftedTop": "_shiftedTop_p9cwb6_526",
+  "shiftedBottom": "_shiftedBottom_p9cwb6_527",
+  "icon": "_icon_p9cwb6_529"
 };
 export default styles;