@rescui/switcher 0.9.8 → 0.10.1

package/lib/vertical-switcher.js

@@ -0,0 +1,264 @@
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.regexp.exec.js";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
+import _getIteratorMethod from "@babel/runtime-corejs3/core-js/get-iterator-method";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import "core-js/modules/es.object.to-string.js";
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof _Symbol !== "undefined" && _getIteratorMethod(o) || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { var _context; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context = Object.prototype.toString.call(o)).call(_context, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+import React, { createContext, useRef, useCallback, useState, useEffect, useContext, 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 styles from './vertical-switcher.p.module.css.js'; // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+var noop = function noop() {};
+
+var verticalSwitcherContext = /*#__PURE__*/createContext({
+  switcherValue: null,
+  onChange: noop,
+  handleOptionRef: function handleOptionRef() {
+    return noop;
+  },
+  disabled: null
+});
+var sizeToClass = {
+  l: styles.sizeL,
+  m: styles.sizeM,
+  s: styles.sizeS,
+  xs: styles.sizeXS
+};
+var themeToClass = {
+  light: styles.themeLight,
+  dark: styles.themeDark
+};
+var modeToClass = {
+  classic: styles.modeClassic,
+  rock: styles.modeRock
+}; // eslint-disable-next-line complexity
+
+var processOptions = function processOptions(_ref) {
+  var _foundIndexByValue;
+
+  var rawOptions = _ref.rawOptions,
+      value = _ref.value,
+      iconPosition = _ref.iconPosition;
+  var options = [];
+  var foundIndexByValue = null;
+  var currentIndex = 0;
+  var withLeftIcons = false;
+
+  var _iterator = _createForOfIteratorHelper(rawOptions),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var option = _step.value;
+      options.push({
+        label: option.label,
+        value: option.value,
+        icon: option.icon
+      });
+
+      if ( /*#__PURE__*/React.isValidElement(option.icon) && iconPosition === 'left') {
+        withLeftIcons = true;
+      }
+
+      if (option.value === value && foundIndexByValue === null) {
+        foundIndexByValue = currentIndex;
+      }
+
+      currentIndex++;
+    } // If some options on the first depth level have icons, we should align all other options accordingly
+
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+
+  if (withLeftIcons) {
+    options.forEach(function (option) {
+      if (! /*#__PURE__*/React.isValidElement(option.icon)) {
+        option.icon = /*#__PURE__*/React.createElement("span", {
+          className: styles.fakeIcon
+        });
+      }
+    });
+  }
+
+  return {
+    options: options,
+    activeIndex: (_foundIndexByValue = foundIndexByValue) !== null && _foundIndexByValue !== void 0 ? _foundIndexByValue : 0
+  };
+}; // 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 isNodeEmpty = function isNodeEmpty(node) {
+  return node === null || typeof node === 'undefined' || node === false || node === true || node === '';
+};
+
+function Option(_ref2) {
+  var label = _ref2.label,
+      value = _ref2.value,
+      icon = _ref2.icon,
+      index = _ref2.index;
+
+  var _useContext = useContext(verticalSwitcherContext),
+      switcherValue = _useContext.switcherValue,
+      onChange = _useContext.onChange,
+      handleOptionRef = _useContext.handleOptionRef,
+      disabled = _useContext.disabled;
+
+  var selected = switcherValue === value;
+  var isWithoutText = isNodeEmpty(label);
+  return /*#__PURE__*/React.createElement("button", {
+    key: String(value),
+    ref: handleOptionRef(index),
+    onClick: function onClick() {
+      return onChange(value);
+    },
+    type: "button",
+    "data-rs-internal": 'vertical-switcher__option',
+    disabled: disabled,
+    className: cn(styles.option, selected && styles.selected),
+    "data-test": cn("vertical-switcher-option", selected && ' vertical-switcher-option-selected')
+  }, /*#__PURE__*/React.isValidElement(icon) && /*#__PURE__*/cloneElement(icon, {
+    className: cn(icon.props.className, styles.icon)
+  }), !isWithoutText && /*#__PURE__*/React.createElement("span", {
+    className: styles.optionLabel
+  }, label));
+}
+
+function VerticalSwitcher(_ref3) {
+  var _options$activeIndex;
+
+  var className = _ref3.className,
+      themeFromProps = _ref3.theme,
+      _ref3$size = _ref3.size,
+      size = _ref3$size === void 0 ? 'm' : _ref3$size,
+      disabled = _ref3.disabled,
+      e2eId = _ref3['data-e2e'],
+      rawOptions = _ref3.options,
+      switcherValue = _ref3.value,
+      _ref3$mode = _ref3.mode,
+      mode = _ref3$mode === void 0 ? 'classic' : _ref3$mode,
+      _ref3$iconPosition = _ref3.iconPosition,
+      iconPosition = _ref3$iconPosition === void 0 ? 'left' : _ref3$iconPosition,
+      onChange = _ref3.onChange,
+      style = _ref3.style;
+  var refsArray = useRef([]);
+  var containerRef = useRef(null);
+  var theme = useThemeWithUndefined(themeFromProps);
+
+  var _processOptions = processOptions({
+    rawOptions: rawOptions,
+    value: switcherValue,
+    iconPosition: iconPosition
+  }),
+      options = _processOptions.options,
+      activeIndex = _processOptions.activeIndex;
+
+  var handleOptionRef = useCallback(function (index) {
+    return function (ref) {
+      if (!ref) {
+        return;
+      }
+
+      if (refsArray.current[index] !== ref) {
+        refsArray.current[index] = ref;
+      }
+    };
+  }, []);
+
+  var _useState = useState({
+    offset: 0,
+    height: 0
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      mark = _useState2[0],
+      setMark = _useState2[1];
+
+  var onResize = function onResize() {
+    var activeEl = refsArray.current[activeIndex];
+
+    if (!activeEl) {
+      return;
+    }
+
+    var parentEl = activeEl.parentElement;
+    var activeElBox = activeEl.getBoundingClientRect();
+    var parentBox = parentEl.getBoundingClientRect();
+    setMark({
+      // standard activeEl.offsetTop always return rounded value, so it does not suit us
+      offset: activeElBox.top - parentBox.top + parentEl.scrollTop,
+      height: activeElBox.height
+    });
+  }; // eslint-disable-next-line react-hooks/exhaustive-deps
+
+
+  useEffect(function () {
+    return onResize();
+  }, [activeIndex]);
+  useResizeObserver(containerRef, onResize);
+  return /*#__PURE__*/React.createElement("span", {
+    className: cn(className, styles.verticalSwitcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled, iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft),
+    "data-e2e": e2eId,
+    ref: containerRef,
+    "data-rs-internal": 'vertical-switcher',
+    "data-test": cn("vertical-switcher", disabled && "vertical-switcher-disabled"),
+    style: style
+  }, /*#__PURE__*/React.createElement(verticalSwitcherContext.Provider, {
+    value: {
+      switcherValue: (_options$activeIndex = options[activeIndex]) === null || _options$activeIndex === void 0 ? void 0 : _options$activeIndex.value,
+      onChange: onChange,
+      handleOptionRef: handleOptionRef,
+      disabled: disabled
+    }
+  }, _mapInstanceProperty(options).call(options, function (_ref4, index) {
+    var value = _ref4.value,
+        label = _ref4.label,
+        icon = _ref4.icon;
+    return /*#__PURE__*/React.createElement(Option, {
+      key: String(value),
+      value: value,
+      label: label,
+      icon: icon,
+      index: index
+    });
+  }), /*#__PURE__*/React.createElement("span", {
+    className: cn(styles.mark),
+    style: {
+      top: mark.offset,
+      height: mark.height
+    }
+  })));
+}
+
+var optionPropType = PropTypes.shape({
+  label: PropTypes.node,
+  value: PropTypes.any.isRequired,
+  icon: PropTypes.node
+});
+VerticalSwitcher.propTypes = {
+  options: PropTypes.arrayOf(optionPropType).isRequired,
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.any.isRequired,
+  className: PropTypes.string,
+  size: PropTypes.oneOf(['l', 'm', 's', 'xs']),
+  theme: PropTypes.oneOf(['light', 'dark']),
+  iconPosition: PropTypes.oneOf(['left', 'right']),
+  disabled: PropTypes.bool,
+  style: PropTypes.object,
+  'data-e2e': PropTypes.string
+};
+export { VerticalSwitcher };

package/lib/vertical-switcher.p.module.css.js

@@ -0,0 +1,21 @@
+var styles = {
+  "themeLight": "_themeLight_1mttwcn_6",
+  "themeDark": "_themeDark_1mttwcn_9",
+  "sizeXS": "_sizeXS_1mttwcn_13",
+  "sizeS": "_sizeS_1mttwcn_16",
+  "sizeM": "_sizeM_1mttwcn_19",
+  "sizeL": "_sizeL_1mttwcn_22",
+  "modeClassic": "_modeClassic_1mttwcn_26",
+  "modeRock": "_modeRock_1mttwcn_29",
+  "verticalSwitcher": "_verticalSwitcher_1mttwcn_33",
+  "disabled": "_disabled_1mttwcn_50",
+  "alignIconLeft": "_alignIconLeft_1mttwcn_55",
+  "alignIconRight": "_alignIconRight_1mttwcn_58",
+  "option": "_option_1mttwcn_62",
+  "selected": "_selected_1mttwcn_107",
+  "optionLabel": "_optionLabel_1mttwcn_126",
+  "icon": "_icon_1mttwcn_132",
+  "fakeIcon": "_fakeIcon_1mttwcn_143",
+  "mark": "_mark_1mttwcn_150"
+};
+export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/switcher",
-  "version": "0.9.8",
+  "version": "0.10.1",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -36,5 +36,5 @@
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "efe72850816ad50de41544ab1d6f84db0d89b322"
+  "gitHead": "9269aa5b525b43a4a876dbf12d15c7e88debae18"
 }

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

@@ -1,20 +0,0 @@
-var styles = {
-  "themeLight": "_themeLight_es4omi_6",
-  "themeDark": "_themeDark_es4omi_9",
-  "sizeXS": "_sizeXS_es4omi_13",
-  "sizeS": "_sizeS_es4omi_16",
-  "sizeM": "_sizeM_es4omi_19",
-  "sizeL": "_sizeL_es4omi_22",
-  "modeClassic": "_modeClassic_es4omi_26",
-  "modeRock": "_modeRock_es4omi_29",
-  "compact": "_compact_es4omi_33",
-  "switcher": "_switcher_es4omi_37",
-  "alignIconLeft": "_alignIconLeft_es4omi_61",
-  "alignIconRight": "_alignIconRight_es4omi_64",
-  "option": "_option_es4omi_68",
-  "disabled": "_disabled_es4omi_104",
-  "selected": "_selected_es4omi_117",
-  "icon": "_icon_es4omi_138",
-  "mark": "_mark_es4omi_151"
-};
-export { styles as default };