@onesy/ui-react 1.0.172 → 1.0.173

package/esm/Slider/Slider.js

@@ -1,7 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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"];
+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) { _defineProperty(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; }
 import React from 'react';
@@ -12,6 +11,7 @@ import TooltipElement from '../Tooltip';
 import ZoomElement from '../Zoom';
 import TypeElement from '../Type';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => {
   const rail = {
     position: 'absolute',
@@ -425,7 +425,7 @@ const useStyle = styleMethod(theme => {
 }, {
   name: 'onesy-Slider'
 });
-const Slider = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Slider = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySlider?.props?.default), props_);
   const IconButton = theme?.elements?.IconButton || IconButtonElement;
@@ -433,6 +433,7 @@ const Slider = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const Zoom = theme?.elements?.Zoom || ZoomElement;
   const Type = theme?.elements?.Type || TypeElement;
   const {
+      ref,
       tonal = true,
       color: color_ = 'primary',
       size = 'regular',
@@ -818,7 +819,7 @@ const Slider = /*#__PURE__*/React.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 = is('function', labelTooltipResolve) ? labelTooltipResolve : value___7 => +value___7.toFixed();
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/_jsxs(Component, _objectSpread(_objectSpread({
     ref: item_10 => {
       if (ref) {
         if (is('function', ref)) ref(item_10);else ref.current = item_10;
@@ -839,82 +840,87 @@ const Slider = /*#__PURE__*/React.forwardRef((props_, ref) => {
     "aria-valuemax": max,
     className: classNames([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.createElement("span", {
-    className: classNames([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.createElement("span", {
-    className: classNames([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.createElement("span", {
-    className: classNames([staticClassName('Slider', theme) && ['onesy-Slider-marks'], classes.marks, classes[`orientation_${orientation}`], classes[`track_size_${size}`]])
-  }, marks_.map((item_11, index_6) => /*#__PURE__*/React.createElement("span", {
-    key: index_6,
-    className: classNames([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.createElement("span", {
-    className: classNames([staticClassName('Slider', theme) && ['onesy-Slider-labels'], classes.labels, classes[`labels_orientation_${orientation}`]])
-  }, marks_.map((item_12, index_7) => /*#__PURE__*/React.createElement(Type, _extends({
-    key: index_7,
-    version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3'
-  }, LabelProps, {
-    className: classNames([staticClassName('Slider', theme) && ['onesy-Slider-label'], 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?.style)
-  }), item_12.label))), !noButtons && values.map((value___8, index_8) => {
-    const classNameIcon = classNames([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.createElement(Tooltip, _extends({
-      key: index_8,
-      className: 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.createElement(IconButton, _extends({
-      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: classNames([staticClassName('Slider', theme) && ['onesy-Slider-icon-button'], 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?.style)
-    }), icon ? /*#__PURE__*/React.cloneElement(icon, {
-      className: classNames([icon?.props?.className, classNameIcon]),
-      style: _objectSpread(_objectSpread({}, styles.icon), icon?.props?.style)
-    }) : /*#__PURE__*/React.createElement("span", {
-      className: classNameIcon,
-      style: styles.icon
-    })));
+  }, other), {}, {
+    children: [/*#__PURE__*/_jsx("span", {
+      className: classNames([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__*/_jsx("span", {
+      className: classNames([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__*/_jsx("span", {
+      className: classNames([staticClassName('Slider', theme) && ['onesy-Slider-marks'], classes.marks, classes[`orientation_${orientation}`], classes[`track_size_${size}`]]),
+      children: marks_.map((item_11, index_6) => /*#__PURE__*/_jsx("span", {
+        className: classNames([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__*/_jsx("span", {
+      className: classNames([staticClassName('Slider', theme) && ['onesy-Slider-labels'], classes.labels, classes[`labels_orientation_${orientation}`]]),
+      children: marks_.map((item_12, index_7) => /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread({
+        version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3'
+      }, LabelProps), {}, {
+        className: classNames([staticClassName('Slider', theme) && ['onesy-Slider-label'], 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?.style),
+        children: item_12.label
+      }), index_7))
+    }), !noButtons && values.map((value___8, index_8) => {
+      const classNameIcon = classNames([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__*/_jsx(Tooltip, _objectSpread(_objectSpread(_objectSpread({
+        className: 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__*/_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: classNames([staticClassName('Slider', theme) && ['onesy-Slider-icon-button'], 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?.style),
+          children: icon ? /*#__PURE__*/React.cloneElement(icon, {
+            className: classNames([icon?.props?.className, classNameIcon]),
+            style: _objectSpread(_objectSpread({}, styles.icon), icon?.props?.style)
+          }) : /*#__PURE__*/_jsx("span", {
+            className: classNameIcon,
+            style: styles.icon
+          })
+        }))
+      }), index_8);
+    })]
   }));
-});
+};
 Slider.displayName = 'onesy-Slider';
 export default Slider;