@rescui/button 0.22.3 → 0.22.4-RUI-262-Migrate-to-GH-Actions-Release-dummy-8695a904.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/button",
-  "version": "0.22.3",
+  "version": "0.22.4-RUI-262-Migrate-to-GH-Actions-Release-dummy-8695a904.3+8695a904",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
-    "@rescui/use-resize-observer": "^0.3.0",
+    "@rescui/use-resize-observer": "0.3.1-RUI-262-Migrate-to-GH-Actions-Release-dummy-8695a904.19+8695a904",
     "classnames": "^2.2.6"
   },
   "peerDependencies": {
@@ -25,11 +25,11 @@
     "react": ">=16.8.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.2.10",
-    "@rescui/icons": "^1.6.0",
-    "@rescui/scripts": "^0.5.1",
-    "@rescui/typography": "^0.24.0",
-    "@rescui/visual-regression": "^0.1.2",
+    "@rescui/colors": "0.2.11-RUI-262-Migrate-to-GH-Actions-Release-dummy-8695a904.19+8695a904",
+    "@rescui/icons": "1.6.1-RUI-262-Migrate-to-GH-Actions-Release-dummy-8695a904.3+8695a904",
+    "@rescui/scripts": "0.5.1",
+    "@rescui/typography": "0.24.1-RUI-262-Migrate-to-GH-Actions-Release-dummy-8695a904.19+8695a904",
+    "@rescui/visual-regression": "0.1.2",
     "@types/classnames": "^2.2.11"
   },
   "scripts": {
@@ -37,5 +37,5 @@
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "54f2d2d607806ac5698ae6e63575559f13422edc"
+  "gitHead": "8695a9042a55369f8df8f03ffd61c988cd3d3df4"
 }

package/lib/_virtual/index.css.js

@@ -1,15 +0,0 @@
-var styles = {
-  "icon": "_icon_y6pspg_4",
-  "sizeXS": "_sizeXS_y6pspg_14",
-  "sizeS": "_sizeS_y6pspg_18",
-  "sizeM": "_sizeM_y6pspg_22",
-  "sizeL": "_sizeL_y6pspg_26",
-  "light": "_light_y6pspg_30",
-  "dark": "_dark_y6pspg_34",
-  "allVariants": "_allVariants_y6pspg_48",
-  "variant16": "_variant16_y6pspg_53",
-  "variant20": "_variant20_y6pspg_54",
-  "variant24": "_variant24_y6pspg_55",
-  "variant28": "_variant28_y6pspg_58"
-};
-export { styles as default };

package/lib/_virtual/loading.js

@@ -1,122 +0,0 @@
-import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'classnames';
-import styles from './index.css.js';
-const sizeStyles = {
-  "xs": styles.sizeXS,
-  "s": styles.sizeS,
-  "m": styles.sizeM,
-  "l": styles.sizeL
-};
-const Size = {
-  "xs": "xs",
-  "s": "s",
-  "m": "m",
-  "l": "l"
-};
-const LoadingIcon16 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
-  viewBox: "0 0 16 16"
-}, props, {
-  ref: ref
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M8 3.25a4.75 4.75 0 1 0 4.686 3.968.75.75 0 1 1 1.48-.245q.083.503.084 1.027a6.25 6.25 0 1 1-5.223-6.166.75.75 0 0 1-.245 1.48A5 5 0 0 0 8 3.25",
-  style: {
-    animation: "rs-icon-rotate 1s linear infinite",
-    transformOrigin: "center center"
-  }
-})));
-LoadingIcon16.displayName = 'LoadingIcon16';
-const LoadingIcon20 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
-  viewBox: "0 0 20 20"
-}, props, {
-  ref: ref
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M10 4a6 6 0 1 0 5.92 5.012 1 1 0 0 1 1.972-.326Q18 9.329 18 10a8 8 0 1 1-6.686-7.892 1 1 0 0 1-.326 1.973A6 6 0 0 0 10 4",
-  style: {
-    animation: "rs-icon-rotate 1s linear infinite",
-    transformOrigin: "center center"
-  }
-})));
-LoadingIcon20.displayName = 'LoadingIcon20';
-const LoadingIcon24 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
-  viewBox: "0 0 24 24"
-}, props, {
-  ref: ref
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M12 6a6 6 0 1 0 5.92 5.012 1.5 1.5 0 0 1 2.959-.49q.12.724.121 1.478a9 9 0 1 1-7.522-8.879 1.5 1.5 0 0 1-.49 2.96Q12.508 6 12 6",
-  style: {
-    animation: "rs-icon-rotate 1s linear infinite",
-    transformOrigin: "center center"
-  }
-})));
-LoadingIcon24.displayName = 'LoadingIcon24';
-const LoadingIcon28 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
-  viewBox: "0 0 28 28"
-}, props, {
-  ref: ref
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M14 6.5a7.5 7.5 0 1 0 7.399 6.265 1.5 1.5 0 0 1 2.96-.49q.14.844.141 1.725c0 5.799-4.701 10.5-10.5 10.5S3.5 19.799 3.5 14 8.201 3.5 14 3.5q.813 0 1.595.12a1.5 1.5 0 0 1-.453 2.966A7.6 7.6 0 0 0 14 6.5",
-  style: {
-    animation: "rs-icon-rotate 1s linear infinite",
-    transformOrigin: "center center"
-  }
-})));
-LoadingIcon28.displayName = 'LoadingIcon28';
-const LoadingIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    theme,
-    size: sizeFromProps = "m",
-    className,
-    style,
-    ['data-render-all-sizes']: renderAllSizes = false,
-    ...props
-  } = _ref;
-  const size = sizeFromProps in Size ? sizeFromProps : "m";
-  const mainProps = { ...props,
-    className: cn(styles.icon, styles[theme], sizeStyles[size], renderAllSizes && styles.allVariants, className),
-    style: renderAllSizes ? {
-      '--rs-icon-ar-width': 28,
-      '--rs-icon-ar-height': 28,
-      ...style
-    } : style,
-    ref
-  };
-
-  if (renderAllSizes) {
-    return /*#__PURE__*/React.createElement("svg", _extends({
-      viewBox: "0 0 28 28"
-    }, mainProps), /*#__PURE__*/React.createElement(LoadingIcon16, {
-      className: styles.variant16
-    }), /*#__PURE__*/React.createElement(LoadingIcon20, {
-      className: styles.variant20
-    }), /*#__PURE__*/React.createElement(LoadingIcon24, {
-      className: styles.variant24
-    }), /*#__PURE__*/React.createElement(LoadingIcon28, {
-      className: styles.variant28
-    }));
-  }
-
-  if (size === Size['xs']) {
-    return /*#__PURE__*/React.createElement(LoadingIcon16, mainProps);
-  }
-
-  if (size === Size['s']) {
-    return /*#__PURE__*/React.createElement(LoadingIcon20, mainProps);
-  }
-
-  if (size === Size['m']) {
-    return /*#__PURE__*/React.createElement(LoadingIcon24, mainProps);
-  }
-
-  return /*#__PURE__*/React.createElement(LoadingIcon28, mainProps);
-});
-LoadingIcon.displayName = 'LoadingIcon';
-LoadingIcon.propTypes = {
-  className: PropTypes.string,
-  theme: PropTypes.oneOf(["light", "dark"]),
-  size: PropTypes.oneOf(["xs", "s", "m", "l"]),
-  'data-render-all-sizes': PropTypes.bool,
-  style: PropTypes.object
-};
-export { Size, LoadingIcon as default };

package/lib/button.d.ts

@@ -1,81 +0,0 @@
-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' | 'xs';
-export declare type ButtonModeGeneric = 'classic' | 'rock' | 'transparent' | 'outline';
-export declare type ButtonModeClear = 'clear';
-export declare type ButtonType = 'button' | 'submit' | 'reset';
-export declare type ButtonIconPosition = 'left' | 'left-edge' | 'right' | 'right-edge';
-export declare type ButtonFlat = 'left' | 'right';
-export declare type ButtonShifted = 'all' | ButtonShiftedSide | ButtonShiftedSide[];
-declare type ButtonIntrinsicProps = {
-    /** Additional class-name */
-    className?: string;
-    /** Child element */
-    children?: React.ReactNode;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Button size */
-    size?: ButtonSize;
-    /** Appearance theme */
-    theme?: Theme;
-    /** Shows loading icon, use when some action related to button is in progress */
-    busy?: boolean;
-    /** @ignore */
-    highlighted?: boolean;
-    /** @ignore */
-    flat?: ButtonFlat;
-    /**
-     * Allow wrapping inside the button.
-     * Do not allow a multiline Button to be placed next to another Button on the same line.
-     * */
-    allowMultiline?: boolean;
-    /**
-     * Multiline default state. Use for optimising rerenders of always multiline buttons.
-     * @ignore
-     * */
-    defaultMultiline?: boolean;
-    tabIndex?: number;
-    title?: string;
-    /** Button appearance */
-    mode?: ButtonModeGeneric | ButtonModeClear;
-    /** **Works only with `mode="clear"`.** Offsets a clear button to one or more sides before the text. Button's background then extends beyond its container. */
-    shifted?: ButtonShifted;
-    /** Additional icon */
-    icon?: React.ReactNode;
-    /**
-     * **Works only if the `icon` is present.**
-     * Additional icon position.
-     * `-edge` variants are useful for aligning icons between multiple buttons in a column (some of which may be multiline).
-     * @see [RUI-228](https://youtrack.jetbrains.com/issue/RUI-228/Fix-button-icon-size-and-position)
-     * */
-    iconPosition?: ButtonIconPosition;
-    /** Url path for using component as a link. **Transform a Button into a link (`a` element).** */
-    href?: string;
-    /** [Link target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). **Works only for the link Button.** */
-    target?: '_blank' | '_self' | '_parent' | '_top';
-    /** [Link rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#rel). **Works only for the link Button.** */
-    rel?: string;
-    /**
-     * Completely removes focus ability.
-     * We use separate property instead of tabIndex
-     * because tabIndex doesn't remove all of the controls behavior.
-     * For example, 'space' button press support remains active.
-     * We can fix this with a special property.
-     * **Transform a Button into a `div` element. Do not use with link props (`href`, `rel`, `target`, etc).**
-     * @ignore
-     * */
-    notFocusable?: boolean;
-    /**
-     * [More about button types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)
-     * @type "button" | "submit" | "reset"
-     * */
-    type?: ButtonType | string;
-    /** Click event handler */
-    onClick?: React.MouseEventHandler<HTMLButtonElement> | React.MouseEventHandler<HTMLAnchorElement> | React.MouseEventHandler<HTMLDivElement>;
-};
-declare type NativeProps = React.ButtonHTMLAttributes<HTMLButtonElement> | React.AnchorHTMLAttributes<HTMLAnchorElement> | React.BaseHTMLAttributes<HTMLDivElement>;
-export declare type ButtonProps = Omit<NativeProps, keyof ButtonIntrinsicProps> & ButtonIntrinsicProps;
-declare type ButtonPossibleHTMLType = HTMLAnchorElement | HTMLButtonElement | HTMLDivElement;
-export declare const Button: React.ForwardRefExoticComponent<Omit<NativeProps, keyof ButtonIntrinsicProps> & ButtonIntrinsicProps & React.RefAttributes<ButtonPossibleHTMLType>>;
-export default Button;

package/lib/button.js

@@ -1,232 +0,0 @@
-"use client";
-import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
-import React, { useState, useRef, cloneElement } from 'react';
-import PropTypes from 'prop-types';
-import cn from 'classnames';
-import { useThemeWithUndefined } from '@rescui/ui-contexts';
-import { useResizeObserver } from '@rescui/use-resize-observer';
-import LoadingIcon from './_virtual/loading.js';
-import styles from './button.p.module.css.js';
-
-const calculateShifted = (shiftedProp, side) => shiftedProp === 'all' || shiftedProp === side || Array.isArray(shiftedProp) && _includesInstanceProperty(shiftedProp).call(shiftedProp, side);
-
-const MODE_STYLES = {
-  classic: styles.modeClassic,
-  rock: styles.modeRock,
-  transparent: styles.modeTransparent,
-  outline: styles.modeOutline,
-  clear: styles.modeClear
-};
-const SIZE_STYLES = {
-  xs: styles.sizeXs,
-  s: styles.sizeS,
-  m: styles.sizeM,
-  l: styles.sizeL
-};
-const ICON_POSITION_STYLES = {
-  left: styles.alignIconLeft,
-  'left-edge': styles.alignIconLeftEdge,
-  right: styles.alignIconRight,
-  '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;
-  const [multiline, setMultiline] = useState(defaultMultiline);
-  const contentRef = useRef(null);
-  const ref = useRef(null);
-
-  const handleRef = el => {
-    ref.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
-
-  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, {
-      className: styles.icon,
-      "data-render-all-sizes": true
-    });
-  } else if ( /*#__PURE__*/React.isValidElement(icon)) {
-    var _icon$props;
-
-    iconSlot = /*#__PURE__*/cloneElement(icon, {
-      className: cn((_icon$props = icon.props) === null || _icon$props === void 0 ? void 0 : _icon$props.className, styles.icon),
-      'data-render-all-sizes': true
-    });
-  }
-
-  const showBusyOverlay = ! /*#__PURE__*/React.isValidElement(icon) && busy;
-  const buttonSharedProps = {
-    href,
-    disabled,
-    className: 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.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
-
-  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"
-  }), buttonContent);
-
-  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`');
-    }
-    /** 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);
-  } else {
-    return /*#__PURE__*/React.createElement("button", {
-      "data-test": 'button',
-      ...restProps,
-      ref: handleRef,
-
-      /* eslint-disable-next-line react/button-has-type */
-      type: type,
-      ...buttonSharedProps
-    }, buttonChildren);
-  }
-});
-Button.displayName = 'Button';
-
-function validateAdditional(propType, callback) {
-  return (props, propName) => {
-    if (typeof props[propName] !== 'undefined') {
-      const cbRes = callback(props, propName);
-
-      if (cbRes) {
-        return cbRes;
-      }
-
-      PropTypes.checkPropTypes({
-        [propName]: propType
-      }, props, 'prop', 'Button');
-    }
-
-    return null;
-  };
-}
-
-Button.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.node,
-  disabled: PropTypes.bool,
-  href: validateAdditional(PropTypes.string, props => {
-    if (typeof props.notFocusable !== 'undefined') {
-      return new Error(`'href' prop cannot be used with 'notFocusable' prop`);
-    }
-
-    return null;
-  }),
-  icon: PropTypes.node,
-  iconPosition: PropTypes.oneOf(['left', 'left-edge', 'right', 'right-edge']),
-  size: PropTypes.oneOf(['l', 'm', 's', 'xs']),
-  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 null;
-  }),
-  theme: PropTypes.oneOf(['light', 'dark']),
-  type: PropTypes.oneOf(['button', 'submit', 'reset']),
-  onClick: PropTypes.func,
-  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 null;
-  }),
-  busy: PropTypes.bool,
-  flat: PropTypes.oneOf(['left', 'right']),
-  highlighted: PropTypes.bool,
-  allowMultiline: PropTypes.bool,
-  defaultMultiline: PropTypes.bool,
-  shifted: PropTypes.oneOfType([PropTypes.oneOf(['all', 'left', 'right', 'top', 'bottom']), PropTypes.arrayOf(PropTypes.oneOf(['left', 'right', 'top', 'bottom']))])
-};
-export { Button, Button as default };

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

@@ -1,34 +0,0 @@
-var styles = {
-  "light": "_light_1uc95v6_6",
-  "dark": "_dark_1uc95v6_9",
-  "flatRight": "_flatRight_1uc95v6_13",
-  "flatLeft": "_flatLeft_1uc95v6_16",
-  "sizeXs": "_sizeXs_1uc95v6_20",
-  "sizeS": "_sizeS_1uc95v6_23",
-  "sizeM": "_sizeM_1uc95v6_26",
-  "sizeL": "_sizeL_1uc95v6_29",
-  "modeClassic": "_modeClassic_1uc95v6_33",
-  "modeRock": "_modeRock_1uc95v6_36",
-  "modeTransparent": "_modeTransparent_1uc95v6_39",
-  "modeOutline": "_modeOutline_1uc95v6_42",
-  "modeClear": "_modeClear_1uc95v6_45",
-  "alignIconLeft": "_alignIconLeft_1uc95v6_49",
-  "alignIconLeftEdge": "_alignIconLeftEdge_1uc95v6_52",
-  "alignIconRight": "_alignIconRight_1uc95v6_55",
-  "alignIconRightEdge": "_alignIconRightEdge_1uc95v6_58",
-  "main": "_main_1uc95v6_62",
-  "disabled": "_disabled_1uc95v6_139",
-  "busy": "_busy_1uc95v6_149",
-  "busyOverlay": "_busyOverlay_1uc95v6_153",
-  "icon": "_icon_1uc95v6_188",
-  "allowMultiline": "_allowMultiline_1uc95v6_203",
-  "content": "_content_1uc95v6_207",
-  "multiline": "_multiline_1uc95v6_213",
-  "withoutText": "_withoutText_1uc95v6_217",
-  "busyIcon": "_busyIcon_1uc95v6_222",
-  "shiftedLeft": "_shiftedLeft_1uc95v6_243",
-  "shiftedRight": "_shiftedRight_1uc95v6_246",
-  "shiftedTop": "_shiftedTop_1uc95v6_249",
-  "shiftedBottom": "_shiftedBottom_1uc95v6_252"
-};
-export { styles as default };