@onesy/ui-react 1.0.172 → 1.0.173

package/Slider/Slider.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -16,7 +15,8 @@ var _Tooltip = _interopRequireDefault(require("../Tooltip"));
 var _Zoom = _interopRequireDefault(require("../Zoom"));
 var _Type = _interopRequireDefault(require("../Type"));
 var _utils2 = require("../utils");
-const _excluded = ["tonal", "color", "size", "value", "valueDefault", "onChange", "orientation", "marks", "precision", "min", "max", "tooltip", "labels", "onlyMarks", "labelTooltipResolve", "iconButtonPositionResolve", "noTrack", "noButtons", "square", "inverted", "readOnly", "disabled", "icon", "onMouseDown", "onTouchStart", "IconButtonProps", "LabelProps", "TooltipProps", "Component", "style", "className", "children"];
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "tonal", "color", "size", "value", "valueDefault", "onChange", "orientation", "marks", "precision", "min", "max", "tooltip", "labels", "onlyMarks", "labelTooltipResolve", "iconButtonPositionResolve", "noTrack", "noButtons", "square", "inverted", "readOnly", "disabled", "icon", "onMouseDown", "onTouchStart", "IconButtonProps", "LabelProps", "TooltipProps", "Component", "style", "className", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const useStyle = (0, _styleReact.style)(theme => {
@@ -432,7 +432,7 @@ const useStyle = (0, _styleReact.style)(theme => {
 }, {
   name: 'onesy-Slider'
 });
-const Slider = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Slider = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _String$split$;
   const theme = (0, _styleReact.useOnesyTheme)();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesySlider) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
@@ -441,6 +441,7 @@ const Slider = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const Zoom = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Zoom) || _Zoom.default;
   const Type = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Type) || _Type.default;
   const {
+      ref,
       tonal = true,
       color: color_ = 'primary',
       size = 'regular',
@@ -829,7 +830,7 @@ const Slider = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     if (values.length === 1) return !inverted ? value___6 <= values[0] : value___6 > values[0];else return !inverted ? value___6 >= values[0] && value___6 <= values[values.length - 1] : value___6 < values[0] || value___6 > values[values.length - 1];
   };
   const labelMethod = (0, _utils.is)('function', labelTooltipResolve) ? labelTooltipResolve : value___7 => +value___7.toFixed();
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, _objectSpread(_objectSpread({
     ref: item_10 => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item_10);else ref.current = item_10;
@@ -850,83 +851,88 @@ const Slider = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     "aria-valuemax": max,
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Slider', theme) && ['onesy-Slider-root', `onesy-Slider-size-${size}`, mouseDown && `onesy-Slider-mouse-down`, focus && `onesy-Slider-focus`, readOnly && `onesy-Slider-read-only`, disabled && `onesy-Slider-disabled`], className, classes.root, classes[`color_${color}`], tonal && classes[`tonal_color_${color}`], classes[`root_orientation_${orientation}`], noButtons && focus && classes.focus_outline, square && classes.square, readOnly && classes.readOnly, disabled && classes.disabled]),
     style: _objectSpread(_objectSpread({}, styles.root), style)
-  }, other), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Slider', theme) && ['onesy-Slider-rail'], classes.rail, classes[`orientation_${orientation}`], classes[`rail_orientation_${orientation}`], classes[`rail_orientation_${orientation}_size_${size}`], !inverted ? [classes[`rail_color_${color}`]] : [classes[`track_color_${color}`], tonal && classes[`track_tonal_color_${color}`]]]),
-    style: styles.rail
-  }), !noTrack && /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Slider', theme) && ['onesy-Slider-track'], classes.track, classes[`orientation_${orientation}`], classes[`track_orientation_${orientation}`], classes[`track_orientation_${orientation}_size_${size}`], !inverted ? [classes[`track_color_${color}`], tonal && classes[`track_tonal_color_${color}`]] : [classes[`rail_color_${color}`]]]),
-    style: styles.track
-  }), !!marks_.length && /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Slider', theme) && ['onesy-Slider-marks'], classes.marks, classes[`orientation_${orientation}`], classes[`track_size_${size}`]])
-  }, marks_.map((item_11, index_6) => /*#__PURE__*/_react.default.createElement("span", {
-    key: index_6,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Slider', theme) && ['onesy-Slider-mark'], classes.mark, markTrack(item_11.value) ? classes[`rail_color_${color}`] : [classes[`track_color_${color}`], tonal && classes[`track_tonal_color_${color}`]]]),
-    style: _objectSpread(_objectSpread({}, markTrack(item_11.value) ? styles.markRail : styles.markTrack), {}, {
-      [propInset]: valueMark(item_11.value)
-    })
-  }))), labels && !!marks_.length && /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Slider', theme) && ['onesy-Slider-labels'], classes.labels, classes[`labels_orientation_${orientation}`]])
-  }, marks_.map((item_12, index_7) => /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
-    key: index_7,
-    version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3'
-  }, LabelProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Slider', theme) && ['onesy-Slider-label'], LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.className, classes.label, classes[`label_orientation_${orientation}`], theme.direction === 'rtl' && classes[`label_orientation_${orientation}_rtl`], item_12.value <= value && classes.label_active]),
-    style: _objectSpread({
-      [propInset]: valueMark(item_12.value)
-    }, LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.style)
-  }), item_12.label))), !noButtons && values.map((value___8, index_8) => {
-    var _icon$props, _icon$props2;
-    const classNameIcon = (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Slider', theme) && ['onesy-Slider-icon'], classes.icon, classes[`track_color_${color}`], tonal && classes[`track_tonal_color_${color}`], classes[`icon_size_${size}`], mouseDownButton === index_8 && classes.iconActive]);
-    return /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-      key: index_8,
-      className: (0, _styleReact.classNames)([classes.tooltip, classes[`tooltip_orientation_${orientation}`]]),
-      classNameSwitch: classes[`tooltip_switch_orientation_${orientation}_${theme.direction}`]
-    }, tooltip === 'always' || tooltip !== undefined && mouseDownButton === index_8 ? {
-      open: true
-    } : tooltip === undefined ? {
-      open: false
-    } : {}, {
-      label: labelMethod(value___8),
-      position: orientation === 'horizontal' ? 'top' : theme.direction === 'ltr' ? 'left' : 'right',
-      alignment: "center",
-      TransitionComponent: Zoom,
-      transformOrigin: orientation === 'horizontal' ? 'center bottom' : 'center right',
-      transformOriginSwitch: orientation === 'horizontal' ? 'center top' : 'center left',
-      transformOriginRtl: orientation === 'horizontal' ? 'center bottom' : 'center left',
-      transformOriginRtlSwitch: orientation === 'horizontal' ? 'center top' : 'center right',
-      noMargin: true,
-      LabelProps: {
-        style: styles.label
-      },
-      LabelTextProps: {
-        className: classes.tooltipLabelText
-      }
-    }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-      ref: item_13 => refs.iconButtons.current.push(item_13),
-      size: size,
-      tonal: tonal,
-      color: color,
-      onBlur: onBlur,
-      onFocus: () => {
-        onFocus();
-        onFocusButton(index_8);
-      },
-      onMouseDown: event_4 => onMouseDownButton(event_4, index_8),
-      "aria-valuenow": valueValue(value___8),
-      "aria-valuetext": `${valueValue(value___8)}%`,
-      "aria-valuemin": min,
-      "aria-valuemax": max
-    }, IconButtonProps, {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Slider', theme) && ['onesy-Slider-icon-button'], IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.className, classes.iconButton, classes[`orientation_${orientation}`], !tonal && classes[`iconButton_color_${color}`], tonal && classes[`iconButton_tonal_color_${color}`]]),
-      style: _objectSpread(_objectSpread({}, iconButtonStyles(value___8)), IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.style)
-    }), icon ? /*#__PURE__*/_react.default.cloneElement(icon, {
-      className: (0, _styleReact.classNames)([icon === null || icon === void 0 || (_icon$props = icon.props) === null || _icon$props === void 0 ? void 0 : _icon$props.className, classNameIcon]),
-      style: _objectSpread(_objectSpread({}, styles.icon), icon === null || icon === void 0 || (_icon$props2 = icon.props) === null || _icon$props2 === void 0 ? void 0 : _icon$props2.style)
-    }) : /*#__PURE__*/_react.default.createElement("span", {
-      className: classNameIcon,
-      style: styles.icon
-    })));
+  }, other), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Slider', theme) && ['onesy-Slider-rail'], classes.rail, classes[`orientation_${orientation}`], classes[`rail_orientation_${orientation}`], classes[`rail_orientation_${orientation}_size_${size}`], !inverted ? [classes[`rail_color_${color}`]] : [classes[`track_color_${color}`], tonal && classes[`track_tonal_color_${color}`]]]),
+      style: styles.rail
+    }), !noTrack && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Slider', theme) && ['onesy-Slider-track'], classes.track, classes[`orientation_${orientation}`], classes[`track_orientation_${orientation}`], classes[`track_orientation_${orientation}_size_${size}`], !inverted ? [classes[`track_color_${color}`], tonal && classes[`track_tonal_color_${color}`]] : [classes[`rail_color_${color}`]]]),
+      style: styles.track
+    }), !!marks_.length && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Slider', theme) && ['onesy-Slider-marks'], classes.marks, classes[`orientation_${orientation}`], classes[`track_size_${size}`]]),
+      children: marks_.map((item_11, index_6) => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Slider', theme) && ['onesy-Slider-mark'], classes.mark, markTrack(item_11.value) ? classes[`rail_color_${color}`] : [classes[`track_color_${color}`], tonal && classes[`track_tonal_color_${color}`]]]),
+        style: _objectSpread(_objectSpread({}, markTrack(item_11.value) ? styles.markRail : styles.markTrack), {}, {
+          [propInset]: valueMark(item_11.value)
+        })
+      }, index_6))
+    }), labels && !!marks_.length && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Slider', theme) && ['onesy-Slider-labels'], classes.labels, classes[`labels_orientation_${orientation}`]]),
+      children: marks_.map((item_12, index_7) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread({
+        version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3'
+      }, LabelProps), {}, {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Slider', theme) && ['onesy-Slider-label'], LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.className, classes.label, classes[`label_orientation_${orientation}`], theme.direction === 'rtl' && classes[`label_orientation_${orientation}_rtl`], item_12.value <= value && classes.label_active]),
+        style: _objectSpread({
+          [propInset]: valueMark(item_12.value)
+        }, LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.style),
+        children: item_12.label
+      }), index_7))
+    }), !noButtons && values.map((value___8, index_8) => {
+      var _icon$props, _icon$props2;
+      const classNameIcon = (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Slider', theme) && ['onesy-Slider-icon'], classes.icon, classes[`track_color_${color}`], tonal && classes[`track_tonal_color_${color}`], classes[`icon_size_${size}`], mouseDownButton === index_8 && classes.iconActive]);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread(_objectSpread({
+        className: (0, _styleReact.classNames)([classes.tooltip, classes[`tooltip_orientation_${orientation}`]]),
+        classNameSwitch: classes[`tooltip_switch_orientation_${orientation}_${theme.direction}`]
+      }, tooltip === 'always' || tooltip !== undefined && mouseDownButton === index_8 ? {
+        open: true
+      } : tooltip === undefined ? {
+        open: false
+      } : {}), {}, {
+        label: labelMethod(value___8),
+        position: orientation === 'horizontal' ? 'top' : theme.direction === 'ltr' ? 'left' : 'right',
+        alignment: "center",
+        TransitionComponent: Zoom,
+        transformOrigin: orientation === 'horizontal' ? 'center bottom' : 'center right',
+        transformOriginSwitch: orientation === 'horizontal' ? 'center top' : 'center left',
+        transformOriginRtl: orientation === 'horizontal' ? 'center bottom' : 'center left',
+        transformOriginRtlSwitch: orientation === 'horizontal' ? 'center top' : 'center right',
+        noMargin: true,
+        LabelProps: {
+          style: styles.label
+        },
+        LabelTextProps: {
+          className: classes.tooltipLabelText
+        }
+      }, TooltipProps), {}, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
+          ref: item_13 => refs.iconButtons.current.push(item_13),
+          size: size,
+          tonal: tonal,
+          color: color,
+          onBlur: onBlur,
+          onFocus: () => {
+            onFocus();
+            onFocusButton(index_8);
+          },
+          onMouseDown: event_4 => onMouseDownButton(event_4, index_8),
+          "aria-valuenow": valueValue(value___8),
+          "aria-valuetext": `${valueValue(value___8)}%`,
+          "aria-valuemin": min,
+          "aria-valuemax": max
+        }, IconButtonProps), {}, {
+          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Slider', theme) && ['onesy-Slider-icon-button'], IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.className, classes.iconButton, classes[`orientation_${orientation}`], !tonal && classes[`iconButton_color_${color}`], tonal && classes[`iconButton_tonal_color_${color}`]]),
+          style: _objectSpread(_objectSpread({}, iconButtonStyles(value___8)), IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.style),
+          children: icon ? /*#__PURE__*/_react.default.cloneElement(icon, {
+            className: (0, _styleReact.classNames)([icon === null || icon === void 0 || (_icon$props = icon.props) === null || _icon$props === void 0 ? void 0 : _icon$props.className, classNameIcon]),
+            style: _objectSpread(_objectSpread({}, styles.icon), icon === null || icon === void 0 || (_icon$props2 = icon.props) === null || _icon$props2 === void 0 ? void 0 : _icon$props2.style)
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: classNameIcon,
+            style: styles.icon
+          })
+        }))
+      }), index_8);
+    })]
   }));
-});
+};
 Slider.displayName = 'onesy-Slider';
 var _default = exports.default = Slider;