@rescui/button 0.24.7-RUI-308-Fix-select-issues-405b9fa40.12 → 0.25.1

package/lib/button.js

@@ -1,5 +1,7 @@
 "use client";
-import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
+import _includesInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/includes';
+import { c } from 'react-compiler-runtime';
 import React, { useState, useRef, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
@@ -30,86 +32,207 @@ const ICON_POSITION_STYLES = {
   'right-edge': styles.alignIconRightEdge
 };
 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;
+(t0, forwardedRef) => {
+  const $ = c(82);
+  let children;
+  let className;
+  let disabled;
+  let flat;
+  let highlighted;
+  let href;
+  let icon;
+  let notFocusable;
+  let restProps;
+  let shifted;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let themeFromProps;
+
+  if ($[0] !== t0) {
+    ({
+      className,
+      children,
+      href,
+      type: t1,
+      disabled,
+      size: t2,
+      theme: themeFromProps,
+      icon,
+      iconPosition: t3,
+      busy: t4,
+      allowMultiline: t5,
+      defaultMultiline: t6,
+      flat,
+      notFocusable,
+      highlighted,
+      shifted,
+      mode: t7,
+      ...restProps
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = disabled;
+    $[4] = flat;
+    $[5] = highlighted;
+    $[6] = href;
+    $[7] = icon;
+    $[8] = notFocusable;
+    $[9] = restProps;
+    $[10] = shifted;
+    $[11] = t1;
+    $[12] = t2;
+    $[13] = t3;
+    $[14] = t4;
+    $[15] = t5;
+    $[16] = t6;
+    $[17] = t7;
+    $[18] = themeFromProps;
+  } else {
+    children = $[1];
+    className = $[2];
+    disabled = $[3];
+    flat = $[4];
+    highlighted = $[5];
+    href = $[6];
+    icon = $[7];
+    notFocusable = $[8];
+    restProps = $[9];
+    shifted = $[10];
+    t1 = $[11];
+    t2 = $[12];
+    t3 = $[13];
+    t4 = $[14];
+    t5 = $[15];
+    t6 = $[16];
+    t7 = $[17];
+    themeFromProps = $[18];
+  }
+
+  const type = t1 === undefined ? "button" : t1;
+  const size = t2 === undefined ? "m" : t2;
+  const iconPosition = t3 === undefined ? "left" : t3;
+  const busy = t4 === undefined ? false : t4;
+  const allowMultiline = t5 === undefined ? false : t5;
+  const defaultMultiline = t6 === undefined ? false : t6;
+  const mode = t7 === undefined ? "classic" : t7;
   const [multiline, setMultiline] = useState(defaultMultiline);
   const contentRef = useRef(null);
   const ref = useRef(null);
+  let t8;
 
-  const handleRef = el => {
-    ref.current = el;
+  if ($[19] !== forwardedRef) {
+    t8 = el => {
+      ref.current = el;
 
-    if (forwardedRef) {
-      if (typeof forwardedRef === 'function') {
-        forwardedRef(el);
-      } else {
-        forwardedRef.current = el;
+      if (forwardedRef) {
+        if (typeof forwardedRef === "function") {
+          forwardedRef(el);
+        } else {
+          forwardedRef.current = el;
+        }
       }
-    }
-  };
+    };
 
-  useResizeObserver(contentRef, entry => {
-    const target = entry.target;
-    const {
-      height
-    } = entry.contentRect;
-    const targetStyles = getComputedStyle(target);
-    const singleLineBlockSize = parseInt(targetStyles.lineHeight, 10);
-    setMultiline(height > singleLineBlockSize);
-  });
-  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
+    $[19] = forwardedRef;
+    $[20] = t8;
+  } else {
+    t8 = $[20];
+  }
 
-  const isWithoutText = children === null || typeof children === 'undefined' || children === false || children === true || children === '';
-  let iconSlot;
+  const handleRef = t8;
+  let t9;
 
-  if ( /*#__PURE__*/React.isValidElement(icon) && busy) {
-    iconSlot = /*#__PURE__*/React.createElement(LoadingOutlineIcon, {
-      className: styles.icon,
-      "data-render-all-sizes": true
-    });
-  } else if ( /*#__PURE__*/React.isValidElement(icon)) {
-    iconSlot = /*#__PURE__*/cloneElement(icon, {
-      className: cn(icon.props?.className, styles.icon),
-      'data-render-all-sizes': true
-    });
+  if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = entry => {
+      const target = entry.target;
+      const {
+        height
+      } = entry.contentRect;
+      const targetStyles = getComputedStyle(target);
+      const singleLineBlockSize = parseInt(targetStyles.lineHeight, 10);
+      setMultiline(height > singleLineBlockSize);
+    };
+
+    $[21] = t9;
+  } else {
+    t9 = $[21];
   }
 
-  const showBusyOverlay = ! /*#__PURE__*/React.isValidElement(icon) && busy;
-  const buttonSharedProps = {
-    href,
-    disabled: disabled || busy,
-    ['data-busy']: busy ? 'true' : undefined,
-    className: cn(styles.main, MODE_STYLES[mode], SIZE_STYLES[size], ICON_POSITION_STYLES[iconPosition] ?? ICON_POSITION_STYLES.left, styles[theme], {
+  useResizeObserver(contentRef, t9);
+  const theme = useThemeWithUndefined(themeFromProps);
+  let iconSlot;
+  let isWithoutText;
+  let showBusyOverlay;
+  let t10;
+  let t11;
+  let t12;
+  let t13;
+
+  if ($[22] !== allowMultiline || $[23] !== busy || $[24] !== children || $[25] !== className || $[26] !== disabled || $[27] !== flat || $[28] !== highlighted || $[29] !== href || $[30] !== icon || $[31] !== iconPosition || $[32] !== mode || $[33] !== multiline || $[34] !== shifted || $[35] !== size || $[36] !== theme) {
+    const shiftedLeft = calculateShifted(shifted, "left");
+    const shiftedRight = calculateShifted(shifted, "right");
+    const shiftedTop = calculateShifted(shifted, "top");
+    const shiftedBottom = calculateShifted(shifted, "bottom");
+    isWithoutText = children === null || typeof children === "undefined" || children === false || children === true || children === "";
+
+    if ( /*#__PURE__*/ /*#__PURE__*/React.isValidElement(icon) && busy) {
+      let t14;
+
+      if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
+        t14 = /*#__PURE__*/React.createElement(LoadingOutlineIcon, {
+          className: styles.icon,
+          "data-render-all-sizes": true
+        });
+        $[44] = t14;
+      } else {
+        t14 = $[44];
+      }
+
+      iconSlot = t14;
+    } else {
+      if ( /*#__PURE__*/React.isValidElement(icon)) {
+        let t14;
+
+        if ($[45] !== icon) {
+          t14 = /*#__PURE__*/cloneElement(icon, {
+            className: cn(icon.props?.className, styles.icon),
+            "data-render-all-sizes": true
+          });
+          $[45] = icon;
+          $[46] = t14;
+        } else {
+          t14 = $[46];
+        }
+
+        iconSlot = t14;
+      }
+    }
+
+    let t14;
+
+    if ($[47] !== busy || $[48] !== icon) {
+      t14 = ! /*#__PURE__*/React.isValidElement(icon) && busy;
+      $[47] = busy;
+      $[48] = icon;
+      $[49] = t14;
+    } else {
+      t14 = $[49];
+    }
+
+    showBusyOverlay = t14;
+    t10 = href;
+    t11 = disabled || busy;
+    t12 = busy ? "true" : undefined;
+    t13 = cn(styles.main, MODE_STYLES[mode], SIZE_STYLES[size], ICON_POSITION_STYLES[iconPosition] ?? ICON_POSITION_STYLES.left, styles[theme], {
       [styles.disabled]: disabled,
-      [styles.flatLeft]: flat === 'left',
-      [styles.flatRight]: flat === 'right',
+      [styles.flatLeft]: flat === "left",
+      [styles.flatRight]: flat === "right",
       [styles.highlighted]: highlighted,
       [styles.withoutText]: isWithoutText,
       [styles.shiftedLeft]: shiftedLeft,
@@ -120,54 +243,171 @@ const Button = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line comple
       [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
-
-  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(LoadingOutlineIcon, {
-    className: styles.busyIcon,
-    size: size,
-    "data-test": "busy-icon"
-  }), buttonContent);
+    }, className);
+    $[22] = allowMultiline;
+    $[23] = busy;
+    $[24] = children;
+    $[25] = className;
+    $[26] = disabled;
+    $[27] = flat;
+    $[28] = highlighted;
+    $[29] = href;
+    $[30] = icon;
+    $[31] = iconPosition;
+    $[32] = mode;
+    $[33] = multiline;
+    $[34] = shifted;
+    $[35] = size;
+    $[36] = theme;
+    $[37] = iconSlot;
+    $[38] = isWithoutText;
+    $[39] = showBusyOverlay;
+    $[40] = t10;
+    $[41] = t11;
+    $[42] = t12;
+    $[43] = t13;
+  } else {
+    iconSlot = $[37];
+    isWithoutText = $[38];
+    showBusyOverlay = $[39];
+    t10 = $[40];
+    t11 = $[41];
+    t12 = $[42];
+    t13 = $[43];
+  }
+
+  let t14;
+
+  if ($[50] !== t10 || $[51] !== t11 || $[52] !== t12 || $[53] !== t13) {
+    t14 = {
+      href: t10,
+      disabled: t11,
+      "data-busy": t12,
+      className: t13
+    };
+    $[50] = t10;
+    $[51] = t11;
+    $[52] = t12;
+    $[53] = t13;
+    $[54] = t14;
+  } else {
+    t14 = $[54];
+  }
+
+  const buttonSharedProps = t14;
+  let t15;
+
+  if ($[55] !== children || $[56] !== isWithoutText) {
+    t15 = !isWithoutText && /*#__PURE__*/React.createElement("span", {
+      className: styles.content,
+      "data-rs-internal": "button__content",
+      "data-test": "button__content",
+      ref: contentRef
+    }, children);
+    $[55] = children;
+    $[56] = isWithoutText;
+    $[57] = t15;
+  } else {
+    t15 = $[57];
+  }
+
+  const buttonContent = t15;
+  let t16;
+
+  if ($[58] !== showBusyOverlay || $[59] !== size) {
+    t16 = showBusyOverlay && /*#__PURE__*/React.createElement(LoadingOutlineIcon, {
+      className: styles.busyIcon,
+      size: size,
+      "data-test": "busy-icon"
+    });
+    $[58] = showBusyOverlay;
+    $[59] = size;
+    $[60] = t16;
+  } else {
+    t16 = $[60];
+  }
+
+  let t17;
+
+  if ($[61] !== buttonContent || $[62] !== iconSlot || $[63] !== t16) {
+    t17 = /*#__PURE__*/React.createElement(React.Fragment, null, iconSlot, t16, buttonContent);
+    $[61] = buttonContent;
+    $[62] = iconSlot;
+    $[63] = t16;
+    $[64] = t17;
+  } else {
+    t17 = $[64];
+  }
+
+  const buttonChildren = t17;
 
   if (notFocusable) {
     if (href) {
-      console.error('Button with `href` can\'t be completely not focusable. If you want to remove Button with `href` from focus flow, use `tabIndex="-1"` instead of `notFocusable`');
+      console.error("Button with `href` can't be completely not focusable. If you want to remove Button with `href` from focus flow, use `tabIndex=\"-1\"` instead of `notFocusable`");
+    }
+
+    let t18;
+
+    if ($[65] !== buttonChildren || $[66] !== buttonSharedProps || $[67] !== handleRef || $[68] !== restProps) {
+      t18 = /*#__PURE__*/React.createElement("div", _extends({
+        "data-test": "button"
+      }, restProps, {
+        ref: handleRef
+      }, buttonSharedProps), buttonChildren);
+      $[65] = buttonChildren;
+      $[66] = buttonSharedProps;
+      $[67] = handleRef;
+      $[68] = restProps;
+      $[69] = t18;
+    } else {
+      t18 = $[69];
     }
-    /** use <div> tag for preventing button controls elements behavior for example 'space' button press support. */
-
-
-    return /*#__PURE__*/React.createElement("div", {
-      "data-test": 'button',
-      ...restProps,
-      ref: handleRef,
-      ...buttonSharedProps
-    }, buttonChildren);
-  } else if (href) {
-    return /*#__PURE__*/React.createElement("a", {
-      "data-test": 'button',
-      ...restProps,
-      ref: handleRef,
-      type: type,
-      ...buttonSharedProps
-    }, buttonChildren);
+
+    return t18;
   } else {
-    return /*#__PURE__*/React.createElement("button", {
-      "data-test": 'button',
-      ...restProps,
-      ref: handleRef,
-
-      /* eslint-disable-next-line react/button-has-type */
-      type: type,
-      ...buttonSharedProps
-    }, buttonChildren);
+    if (href) {
+      let t18;
+
+      if ($[70] !== buttonChildren || $[71] !== buttonSharedProps || $[72] !== handleRef || $[73] !== restProps || $[74] !== type) {
+        t18 = /*#__PURE__*/React.createElement("a", _extends({
+          "data-test": "button"
+        }, restProps, {
+          ref: handleRef,
+          type: type
+        }, buttonSharedProps), buttonChildren);
+        $[70] = buttonChildren;
+        $[71] = buttonSharedProps;
+        $[72] = handleRef;
+        $[73] = restProps;
+        $[74] = type;
+        $[75] = t18;
+      } else {
+        t18 = $[75];
+      }
+
+      return t18;
+    } else {
+      let t18;
+
+      if ($[76] !== buttonChildren || $[77] !== buttonSharedProps || $[78] !== handleRef || $[79] !== restProps || $[80] !== type) {
+        t18 = /*#__PURE__*/React.createElement("button", _extends({
+          "data-test": "button"
+        }, restProps, {
+          ref: handleRef,
+          type: type
+        }, buttonSharedProps), buttonChildren);
+        $[76] = buttonChildren;
+        $[77] = buttonSharedProps;
+        $[78] = handleRef;
+        $[79] = restProps;
+        $[80] = type;
+        $[81] = t18;
+      } else {
+        t18 = $[81];
+      }
+
+      return t18;
+    }
   }
 });
 Button.displayName = 'Button';

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

@@ -1,34 +1,34 @@
 var styles = {
-  "light": "_light_2ofd4c_6",
-  "dark": "_dark_2ofd4c_9",
-  "flatRight": "_flatRight_2ofd4c_13",
-  "flatLeft": "_flatLeft_2ofd4c_16",
-  "sizeXs": "_sizeXs_2ofd4c_20",
-  "sizeS": "_sizeS_2ofd4c_23",
-  "sizeM": "_sizeM_2ofd4c_26",
-  "sizeL": "_sizeL_2ofd4c_29",
-  "modeClassic": "_modeClassic_2ofd4c_33",
-  "modeRock": "_modeRock_2ofd4c_36",
-  "modeTransparent": "_modeTransparent_2ofd4c_39",
-  "modeOutline": "_modeOutline_2ofd4c_42",
-  "modeClear": "_modeClear_2ofd4c_45",
-  "alignIconLeft": "_alignIconLeft_2ofd4c_49",
-  "alignIconLeftEdge": "_alignIconLeftEdge_2ofd4c_52",
-  "alignIconRight": "_alignIconRight_2ofd4c_55",
-  "alignIconRightEdge": "_alignIconRightEdge_2ofd4c_58",
-  "main": "_main_2ofd4c_62",
-  "disabled": "_disabled_2ofd4c_139",
-  "busy": "_busy_2ofd4c_149",
-  "busyOverlay": "_busyOverlay_2ofd4c_153",
-  "icon": "_icon_2ofd4c_188",
-  "allowMultiline": "_allowMultiline_2ofd4c_203",
-  "content": "_content_2ofd4c_207",
-  "multiline": "_multiline_2ofd4c_213",
-  "withoutText": "_withoutText_2ofd4c_217",
-  "busyIcon": "_busyIcon_2ofd4c_222",
-  "shiftedLeft": "_shiftedLeft_2ofd4c_243",
-  "shiftedRight": "_shiftedRight_2ofd4c_246",
-  "shiftedTop": "_shiftedTop_2ofd4c_249",
-  "shiftedBottom": "_shiftedBottom_2ofd4c_252"
+  "light": "_light_15qumfk_6",
+  "dark": "_dark_15qumfk_9",
+  "flatRight": "_flatRight_15qumfk_13",
+  "flatLeft": "_flatLeft_15qumfk_16",
+  "sizeXs": "_sizeXs_15qumfk_20",
+  "sizeS": "_sizeS_15qumfk_23",
+  "sizeM": "_sizeM_15qumfk_26",
+  "sizeL": "_sizeL_15qumfk_29",
+  "modeClassic": "_modeClassic_15qumfk_33",
+  "modeRock": "_modeRock_15qumfk_36",
+  "modeTransparent": "_modeTransparent_15qumfk_39",
+  "modeOutline": "_modeOutline_15qumfk_42",
+  "modeClear": "_modeClear_15qumfk_45",
+  "alignIconLeft": "_alignIconLeft_15qumfk_49",
+  "alignIconLeftEdge": "_alignIconLeftEdge_15qumfk_52",
+  "alignIconRight": "_alignIconRight_15qumfk_55",
+  "alignIconRightEdge": "_alignIconRightEdge_15qumfk_58",
+  "main": "_main_15qumfk_62",
+  "disabled": "_disabled_15qumfk_139",
+  "busy": "_busy_15qumfk_149",
+  "busyOverlay": "_busyOverlay_15qumfk_153",
+  "icon": "_icon_15qumfk_188",
+  "allowMultiline": "_allowMultiline_15qumfk_203",
+  "content": "_content_15qumfk_207",
+  "multiline": "_multiline_15qumfk_213",
+  "withoutText": "_withoutText_15qumfk_217",
+  "busyIcon": "_busyIcon_15qumfk_222",
+  "shiftedLeft": "_shiftedLeft_15qumfk_243",
+  "shiftedRight": "_shiftedRight_15qumfk_246",
+  "shiftedTop": "_shiftedTop_15qumfk_249",
+  "shiftedBottom": "_shiftedBottom_15qumfk_252"
 };
 export { styles as default };