@rescui/button 0.17.1 → 0.18.1

package/lib/_virtual/index.css.js

@@ -1,10 +1,10 @@
 var styles = {
-  "icon": "_icon_1hf44po_4",
-  "sizeXS": "_sizeXS_1hf44po_14",
-  "sizeS": "_sizeS_1hf44po_18",
-  "sizeM": "_sizeM_1hf44po_22",
-  "sizeL": "_sizeL_1hf44po_26",
-  "light": "_light_1hf44po_30",
-  "dark": "_dark_1hf44po_34"
+  "icon": "_icon_ons1cf_4",
+  "sizeXS": "_sizeXS_ons1cf_14",
+  "sizeS": "_sizeS_ons1cf_18",
+  "sizeM": "_sizeM_ons1cf_22",
+  "sizeL": "_sizeL_ons1cf_26",
+  "light": "_light_ons1cf_30",
+  "dark": "_dark_ons1cf_34"
 };
 export { styles as default };

package/lib/_virtual/loading.js

@@ -1,22 +1,21 @@
 import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
-import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
 import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './index.css.js';
-var _excluded = ["theme", "size", "className"];
-var sizeStyles = {
+const sizeStyles = {
   "xs": styles.sizeXS,
   "s": styles.sizeS,
   "m": styles.sizeM,
   "l": styles.sizeL
 };
-var LoadingIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var theme = _ref.theme,
-      size = _ref.size,
-      className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+const LoadingIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    theme,
+    size,
+    className,
+    ...props
+  } = _ref;
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 24 24"
   }, props, {

package/lib/button.js

@@ -1,21 +1,4 @@
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/web.dom-collections.for-each.js";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "children", "href", "type", "disabled", "size", "theme", "icon", "iconPosition", "busy", "allowMultiline", "defaultMultiline", "flat", "notFocusable", "highlighted", "shifted", "mode"];
-
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : 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$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, { useState, useRef, cloneElement } from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
@@ -24,61 +7,52 @@ import { useResizeObserver } from '@rescui/use-resize-observer';
 import LoadingIcon from './_virtual/loading.js';
 import styles from './button.p.module.css.js';
 
-var calculateShifted = function calculateShifted(shiftedProp, side) {
-  return shiftedProp === 'all' || shiftedProp === side || Array.isArray(shiftedProp) && _includesInstanceProperty(shiftedProp).call(shiftedProp, side);
-};
+const calculateShifted = (shiftedProp, side) => shiftedProp === 'all' || shiftedProp === side || Array.isArray(shiftedProp) && _includesInstanceProperty(shiftedProp).call(shiftedProp, side);
 
-var MODE_STYLES = {
+const MODE_STYLES = {
   classic: styles.modeClassic,
   rock: styles.modeRock,
   transparent: styles.modeTransparent,
   outline: styles.modeOutline,
   clear: styles.modeClear
 };
-var SIZE_STYLES = {
+const SIZE_STYLES = {
   xs: styles.sizeXs,
   s: styles.sizeS,
   m: styles.sizeM,
   l: styles.sizeL
 };
-var Button = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complexity
-function (_ref, forwardedRef) {
-  var _cn;
-
-  var className = _ref.className,
-      children = _ref.children,
-      href = _ref.href,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'button' : _ref$type,
-      disabled = _ref.disabled,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'm' : _ref$size,
-      themeFromProps = _ref.theme,
-      icon = _ref.icon,
-      _ref$iconPosition = _ref.iconPosition,
-      iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition,
-      _ref$busy = _ref.busy,
-      busy = _ref$busy === void 0 ? false : _ref$busy,
-      _ref$allowMultiline = _ref.allowMultiline,
-      allowMultiline = _ref$allowMultiline === void 0 ? false : _ref$allowMultiline,
-      _ref$defaultMultiline = _ref.defaultMultiline,
-      defaultMultiline = _ref$defaultMultiline === void 0 ? false : _ref$defaultMultiline,
-      flat = _flatInstanceProperty(_ref),
-      notFocusable = _ref.notFocusable,
-      highlighted = _ref.highlighted,
-      shifted = _ref.shifted,
-      _ref$mode = _ref.mode,
-      mode = _ref$mode === void 0 ? 'classic' : _ref$mode,
-      restProps = _objectWithoutProperties(_ref, _excluded);
-
-  var _useState = useState(defaultMultiline),
-      _useState2 = _slicedToArray(_useState, 2),
-      multiline = _useState2[0],
-      setMultiline = _useState2[1];
-
-  var ref = useRef(null);
-
-  var handleRef = function handleRef(el) {
+const Button = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complexity
+(_ref, forwardedRef) => {
+  let {
+    className,
+    children,
+    href,
+    type = 'button',
+    disabled,
+    size = 'm',
+    theme: themeFromProps,
+    icon,
+    iconPosition = 'left',
+    busy = false,
+    allowMultiline = false,
+    defaultMultiline = false,
+    flat,
+    notFocusable,
+    highlighted
+    /* supported only for clear mode */
+    ,
+    shifted
+    /* supported only for clear mode */
+    ,
+    mode = 'classic',
+    ...restProps
+  } = _ref;
+  const [multiline, setMultiline] = useState(defaultMultiline);
+  const contentRef = useRef(null);
+  const ref = useRef(null);
+
+  const handleRef = el => {
     ref.current = el;
 
     if (forwardedRef) {
@@ -90,21 +64,23 @@ function (_ref, forwardedRef) {
     }
   };
 
-  useResizeObserver(ref, function (entry) {
-    var target = entry.target;
-    var height = entry.contentRect.height;
-    var targetStyles = getComputedStyle(target);
-    var singleLineBlockSize = parseInt(targetStyles.lineHeight, 10);
+  useResizeObserver(contentRef, entry => {
+    const target = entry.target;
+    const {
+      height
+    } = entry.contentRect;
+    const targetStyles = getComputedStyle(target);
+    const singleLineBlockSize = parseInt(targetStyles.lineHeight, 10);
     setMultiline(height > singleLineBlockSize);
   });
-  var theme = useThemeWithUndefined(themeFromProps);
-  var shiftedLeft = calculateShifted(shifted, 'left');
-  var shiftedRight = calculateShifted(shifted, 'right');
-  var shiftedTop = calculateShifted(shifted, 'top');
-  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
+  const theme = useThemeWithUndefined(themeFromProps);
+  const shiftedLeft = calculateShifted(shifted, 'left');
+  const shiftedRight = calculateShifted(shifted, 'right');
+  const shiftedTop = calculateShifted(shifted, 'top');
+  const 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 === '';
-  var iconSlot;
+  const isWithoutText = children === null || typeof children === 'undefined' || children === false || children === true || children === '';
+  let iconSlot;
 
   if ( /*#__PURE__*/React.isValidElement(icon) && busy) {
     iconSlot = /*#__PURE__*/React.createElement(LoadingIcon, {
@@ -116,17 +92,36 @@ function (_ref, forwardedRef) {
     });
   }
 
-  var showBusyOverlay = ! /*#__PURE__*/React.isValidElement(icon) && busy;
-  var buttonSharedProps = {
-    href: href,
-    disabled: disabled,
-    className: cn(styles.main, MODE_STYLES[mode], SIZE_STYLES[size], iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft, styles[theme], (_cn = {}, _defineProperty(_cn, styles.disabled, disabled), _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.multiline, multiline), _defineProperty(_cn, styles.allowMultiline, allowMultiline), _defineProperty(_cn, styles.busy, busy), _defineProperty(_cn, styles.busyOverlay, showBusyOverlay), _cn), className)
+  const showBusyOverlay = ! /*#__PURE__*/React.isValidElement(icon) && busy;
+  const buttonSharedProps = {
+    href,
+    disabled,
+    className: cn(styles.main, MODE_STYLES[mode], SIZE_STYLES[size], iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft, styles[theme], {
+      [styles.disabled]: disabled,
+      [styles.flatLeft]: flat === 'left',
+      [styles.flatRight]: flat === 'right',
+      [styles.highlighted]: highlighted,
+      [styles.withoutText]: isWithoutText,
+      [styles.shiftedLeft]: shiftedLeft,
+      [styles.shiftedRight]: shiftedRight,
+      [styles.shiftedTop]: shiftedTop,
+      [styles.shiftedBottom]: shiftedBottom,
+      [styles.multiline]: multiline,
+      [styles.allowMultiline]: allowMultiline,
+      [styles.busy]: busy,
+      [styles.busyOverlay]: showBusyOverlay
+    }, className)
   }; // Google Translate replaces TextNodes on page which is leading to a React error on manipulating buttonChildren e.g. when switching to the busy state.
   // To prevent this we wrap text node in a span element which itself will not be replaced by Google Translate.
   // More info here: https://github.com/facebook/react/issues/11538
 
-  var buttonContent = !isWithoutText && typeof children === 'string' ? /*#__PURE__*/React.createElement("span", null, children) : children;
-  var buttonChildren = /*#__PURE__*/React.createElement(React.Fragment, null, iconSlot, showBusyOverlay && /*#__PURE__*/React.createElement(LoadingIcon, {
+  const buttonContent = !isWithoutText && /*#__PURE__*/React.createElement("span", {
+    className: styles.content,
+    "data-rs-internal": "button__content",
+    "data-test": "button__content",
+    ref: contentRef
+  }, children);
+  const buttonChildren = /*#__PURE__*/React.createElement(React.Fragment, null, iconSlot, showBusyOverlay && /*#__PURE__*/React.createElement(LoadingIcon, {
     className: styles.busyIcon,
     size: size,
     "data-test": "busy-icon"
@@ -139,41 +134,46 @@ function (_ref, forwardedRef) {
     /** use <div> tag for preventing button controls elements behavior for example 'space' button press support. */
 
 
-    return /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread({
-      "data-test": 'button'
-    }, restProps), {}, {
-      ref: handleRef
-    }, buttonSharedProps), buttonChildren);
+    return /*#__PURE__*/React.createElement("div", {
+      "data-test": 'button',
+      ...restProps,
+      ref: handleRef,
+      ...buttonSharedProps
+    }, buttonChildren);
   } else if (href) {
-    return /*#__PURE__*/React.createElement("a", _objectSpread(_objectSpread({
-      "data-test": 'button'
-    }, restProps), {}, {
+    return /*#__PURE__*/React.createElement("a", {
+      "data-test": 'button',
+      ...restProps,
       ref: handleRef,
-      type: type
-    }, buttonSharedProps), buttonChildren);
+      type: type,
+      ...buttonSharedProps
+    }, buttonChildren);
   } else {
-    return /*#__PURE__*/React.createElement("button", _objectSpread(_objectSpread({
-      "data-test": 'button'
-    }, restProps), {}, {
+    return /*#__PURE__*/React.createElement("button", {
+      "data-test": 'button',
+      ...restProps,
       ref: handleRef,
 
       /* eslint-disable-next-line react/button-has-type */
-      type: type
-    }, buttonSharedProps), buttonChildren);
+      type: type,
+      ...buttonSharedProps
+    }, buttonChildren);
   }
 });
 Button.displayName = 'Button';
 
 function validateAdditional(propType, callback) {
-  return function (props, propName) {
+  return (props, propName) => {
     if (typeof props[propName] !== 'undefined') {
-      var cbRes = callback(props, propName);
+      const cbRes = callback(props, propName);
 
       if (cbRes) {
         return cbRes;
       }
 
-      PropTypes.checkPropTypes(_defineProperty({}, propName, propType), props, 'prop', 'Button');
+      PropTypes.checkPropTypes({
+        [propName]: propType
+      }, props, 'prop', 'Button');
     }
 
     return null;
@@ -184,9 +184,9 @@ Button.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node,
   disabled: PropTypes.bool,
-  href: validateAdditional(PropTypes.string, function (props) {
+  href: validateAdditional(PropTypes.string, props => {
     if (typeof props.notFocusable !== 'undefined') {
-      return new Error("'href' prop cannot be used with 'notFocusable' prop");
+      return new Error(`'href' prop cannot be used with 'notFocusable' prop`);
     }
 
     return null;
@@ -194,9 +194,9 @@ Button.propTypes = {
   icon: PropTypes.node,
   iconPosition: PropTypes.oneOf(['left', 'right']),
   size: PropTypes.oneOf(['l', 'm', 's', 'xs']),
-  mode: validateAdditional(PropTypes.oneOf(['classic', 'rock', 'transparent', 'outline', 'clear']), function (props) {
+  mode: validateAdditional(PropTypes.oneOf(['classic', 'rock', 'transparent', 'outline', 'clear']), props => {
     if (typeof props.shifted !== 'undefined' && props.mode !== 'clear') {
-      return new Error("'shifted' prop cannot be used when 'mode' prop is not 'clear'.");
+      return new Error(`'shifted' prop cannot be used when 'mode' prop is not 'clear'.`);
     }
 
     return null;
@@ -204,9 +204,9 @@ Button.propTypes = {
   theme: PropTypes.oneOf(['light', 'dark']),
   type: PropTypes.oneOf(['button', 'submit', 'reset']),
   onClick: PropTypes.func,
-  notFocusable: validateAdditional(PropTypes.bool, function (props) {
+  notFocusable: validateAdditional(PropTypes.bool, props => {
     if (typeof props.href !== 'undefined' || typeof props.target !== 'undefined') {
-      return new Error("'notFocusable' prop cannot be used with 'href' and 'target' props");
+      return new Error(`'notFocusable' prop cannot be used with 'href' and 'target' props`);
     }
 
     return null;

package/lib/button.p.module.css.js

@@ -1,32 +1,32 @@
 var styles = {
-  "light": "_light_14w89nx_6",
-  "dark": "_dark_14w89nx_9",
-  "flatRight": "_flatRight_14w89nx_13",
-  "flatLeft": "_flatLeft_14w89nx_16",
-  "sizeXs": "_sizeXs_14w89nx_20",
-  "sizeS": "_sizeS_14w89nx_23",
-  "sizeM": "_sizeM_14w89nx_26",
-  "sizeL": "_sizeL_14w89nx_29",
-  "modeClassic": "_modeClassic_14w89nx_33",
-  "modeRock": "_modeRock_14w89nx_36",
-  "modeTransparent": "_modeTransparent_14w89nx_39",
-  "modeOutline": "_modeOutline_14w89nx_42",
-  "modeClear": "_modeClear_14w89nx_45",
-  "alignIconLeft": "_alignIconLeft_14w89nx_49",
-  "alignIconRight": "_alignIconRight_14w89nx_52",
-  "main": "_main_14w89nx_56",
-  "disabled": "_disabled_14w89nx_122",
-  "busy": "_busy_14w89nx_132",
-  "busyOverlay": "_busyOverlay_14w89nx_136",
-  "allowMultiline": "_allowMultiline_14w89nx_176",
-  "multiline": "_multiline_14w89nx_180",
-  "withoutText": "_withoutText_14w89nx_184",
-  "withIcon": "_withIcon_14w89nx_192",
-  "icon": "_icon_14w89nx_198",
-  "busyIcon": "_busyIcon_14w89nx_212",
-  "shiftedLeft": "_shiftedLeft_14w89nx_229",
-  "shiftedRight": "_shiftedRight_14w89nx_232",
-  "shiftedTop": "_shiftedTop_14w89nx_235",
-  "shiftedBottom": "_shiftedBottom_14w89nx_238"
+  "light": "_light_c0yiq4_6",
+  "dark": "_dark_c0yiq4_9",
+  "flatRight": "_flatRight_c0yiq4_13",
+  "flatLeft": "_flatLeft_c0yiq4_16",
+  "sizeXs": "_sizeXs_c0yiq4_20",
+  "sizeS": "_sizeS_c0yiq4_23",
+  "sizeM": "_sizeM_c0yiq4_26",
+  "sizeL": "_sizeL_c0yiq4_29",
+  "modeClassic": "_modeClassic_c0yiq4_33",
+  "modeRock": "_modeRock_c0yiq4_36",
+  "modeTransparent": "_modeTransparent_c0yiq4_39",
+  "modeOutline": "_modeOutline_c0yiq4_42",
+  "modeClear": "_modeClear_c0yiq4_45",
+  "alignIconLeft": "_alignIconLeft_c0yiq4_49",
+  "alignIconRight": "_alignIconRight_c0yiq4_52",
+  "main": "_main_c0yiq4_56",
+  "disabled": "_disabled_c0yiq4_133",
+  "busy": "_busy_c0yiq4_143",
+  "busyOverlay": "_busyOverlay_c0yiq4_147",
+  "icon": "_icon_c0yiq4_182",
+  "allowMultiline": "_allowMultiline_c0yiq4_195",
+  "multiline": "_multiline_c0yiq4_199",
+  "withoutText": "_withoutText_c0yiq4_203",
+  "busyIcon": "_busyIcon_c0yiq4_208",
+  "content": "_content_c0yiq4_224",
+  "shiftedLeft": "_shiftedLeft_c0yiq4_229",
+  "shiftedRight": "_shiftedRight_c0yiq4_232",
+  "shiftedTop": "_shiftedTop_c0yiq4_235",
+  "shiftedBottom": "_shiftedBottom_c0yiq4_238"
 };
 export { styles as default };