@onesy/ui-react 1.0.129 → 1.0.131

package/Clock/Clock.js

@@ -1,428 +1,481 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const style_react_1 = require("@onesy/style-react");
-const utils_1 = require("@onesy/utils");
-const date_1 = require("@onesy/date");
-const RoundMeter_1 = __importDefault(require("../RoundMeter"));
-const Path_1 = __importDefault(require("../Path"));
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {
-        userSelect: 'none',
-        touchAction: 'none',
-        '& .onesy-RoundMeter-children, & .onesy-RoundMeter-labels': {
-            pointerEvents: 'none'
-        },
-        '& svg > *': {
-            cursor: 'grab'
-        }
-    },
-    mouseDown: {
-        '& svg > *': {
-            cursor: 'grabbing'
-        }
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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"));
+var _styleReact = require("@onesy/style-react");
+var _utils = require("@onesy/utils");
+var _date = require("@onesy/date");
+var _RoundMeter = _interopRequireDefault(require("../RoundMeter"));
+var _Path = _interopRequireDefault(require("../Path"));
+var _utils2 = require("../utils");
+const _excluded = ["tonal", "color", "size", "value", "valueDefault", "onChange", "selecting", "selectingDefault", "onChangeSelecting", "format", "dayTime", "hour", "minute", "second", "autoNext", "min", "max", "validate", "readOnly", "disabled", "valid", "renderValue", "onDoneSelecting", "onClick", "className", "BackgroundProps"];
+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 => ({
+  root: {
+    userSelect: 'none',
+    touchAction: 'none',
+    '& .onesy-RoundMeter-children, & .onesy-RoundMeter-labels': {
+      pointerEvents: 'none'
     },
-}), { name: 'onesy-Clock' });
-const Clock = react_1.default.forwardRef((props__, ref) => {
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyClock) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props__)); }, [props__]);
-    const RoundMeter = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.RoundMeter) || RoundMeter_1.default; }, [theme]);
-    const Path = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Path) || Path_1.default; }, [theme]);
-    const { tonal = true, color = 'primary', size = 'regular', value: value_, valueDefault, onChange, selecting: selecting_, selectingDefault, onChangeSelecting, format = '12', dayTime = 'am', hour = true, minute = true, second = false, autoNext, min, max, validate, readOnly, disabled, valid: valid_, renderValue, onDoneSelecting, onClick: onClick_, className, BackgroundProps } = props, other = __rest(props, ["tonal", "color", "size", "value", "valueDefault", "onChange", "selecting", "selectingDefault", "onChangeSelecting", "format", "dayTime", "hour", "minute", "second", "autoNext", "min", "max", "validate", "readOnly", "disabled", "valid", "renderValue", "onDoneSelecting", "onClick", "className", "BackgroundProps"]);
-    const { classes } = useStyle();
-    const [value, setValue] = react_1.default.useState((valueDefault !== undefined ? valueDefault : value_) || new date_1.OnesyDate());
-    const [selecting, setSelecting] = react_1.default.useState((selectingDefault !== undefined ? selectingDefault : selecting_) || 'hour');
-    const [mouseDown, setMouseDown] = react_1.default.useState(false);
-    const refs = {
-        root: react_1.default.useRef(null),
-        middle: react_1.default.useRef(null),
-        mouseDown: react_1.default.useRef(null),
-        value: react_1.default.useRef(null),
-        selecting: react_1.default.useRef(null),
-        autoNext: react_1.default.useRef(null),
-        hour: react_1.default.useRef(null),
-        minute: react_1.default.useRef(null),
-        second: react_1.default.useRef(null),
-        format: react_1.default.useRef(null),
-        dayTime: react_1.default.useRef(null),
-        previous: react_1.default.useRef(selecting)
-    };
-    refs.mouseDown.current = mouseDown;
-    refs.value.current = value;
-    refs.hour.current = hour;
-    refs.minute.current = minute;
-    refs.second.current = second;
-    refs.selecting.current = selecting;
-    refs.autoNext.current = autoNext;
-    refs.format.current = format;
-    refs.dayTime.current = dayTime;
-    const resolve = react_1.default.useCallback((valueNew = refs.value.current, dayTimeValue = refs.dayTime.current) => {
-        // Resolve the range value
-        const valueHour = valueNew.hour;
-        if (format === '12') {
-            if (dayTimeValue === 'am' && valueHour > 12)
-                return (0, date_1.set)(valueHour - 12, 'hour', valueNew);
-            if (dayTimeValue === 'pm' && valueHour < 12)
-                return (0, date_1.set)(valueHour + 12, 'hour', valueNew);
-        }
-        return valueNew;
-    }, [value, dayTime, format]);
-    const inputToValue = react_1.default.useCallback((valueNew, unit = refs.selecting.current) => {
-        let onesyDate = new date_1.OnesyDate(refs.value.current);
-        let valueTime = valueNew;
-        if ((0, utils_1.is)('string', valueTime) && valueTime.startsWith('0'))
-            valueTime = valueTime.slice(1);
-        valueTime = +valueTime;
-        if (unit === 'hour')
-            onesyDate = (0, date_1.set)((format === '12' && dayTime === 'pm') ? valueTime + 12 : valueTime, 'hour', onesyDate);
-        else
-            onesyDate = (0, date_1.set)(valueTime, unit, onesyDate);
-        return resolve(onesyDate);
-    }, [value, format, dayTime, hour, minute, second]);
-    const onMove = react_1.default.useCallback((x_, y_) => {
-        const rectMiddle = refs.middle.current.getBoundingClientRect();
-        const x = x_ - rectMiddle.x;
-        const y = y_ - rectMiddle.y;
-        const radians = Math.atan2(x, y);
-        const degrees = (radians * 180) / Math.PI;
-        const angle = 180 - degrees;
-        // Make array of values
-        // for hours, minutes and seconds
-        // with +- 50% around the value
-        // Find item in that array that this angle fits within
-        let valuesAll = [];
-        if (refs.selecting.current === 'hour') {
-            const part = 360 / 12;
-            valuesAll = Array.from({ length: 12 }).map((item, index_) => [(part * index_) - (part / 2), (part * index_) + (part / 2)]);
-            let index = valuesAll.findIndex((item) => angle >= item[0] && angle <= item[1]);
-            if (index === -1 || index === 0)
-                index = refs.format.current === '24' ? 0 : 12;
-            if (refs.format.current === '24') {
-                let within = false;
-                const labelElements = refs.root.current.querySelectorAll('.onesy-RoundMeter-labels');
-                const elements = {
-                    outer: labelElements[0],
-                    inner: labelElements[1]
-                };
-                const rects = {
-                    outer: elements.outer.getBoundingClientRect(),
-                    inner: elements.inner.getBoundingClientRect()
-                };
-                const part_ = Math.abs(Math.abs(rects.outer.x) - Math.abs(rects.inner.x));
-                const valueMoved = Math.sqrt(x ** 2 + y ** 2);
-                const middleInner = Math.abs(Math.abs(rectMiddle.x) - Math.abs(rects.inner.x));
-                if (valueMoved <= (middleInner + (part_ / 2)))
-                    within = true;
-                if (within)
-                    index += 12;
-                index = (0, utils_1.clamp)(index, 0, 23);
-            }
-            // Validate
-            if (!valid(inputToValue(index, 'hour'), 'hour'))
-                return;
-            // Update values
-            onUpdate(inputToValue(index, 'hour'));
-        }
-        else if (['minute', 'second'].includes(refs.selecting.current)) {
-            const part = 360 / 60;
-            valuesAll = Array.from({ length: 60 }).map((item, index_) => [(part * index_) - (part / 2), (part * index_) + (part / 2)]);
-            let index = valuesAll.findIndex((item) => angle >= item[0] && angle <= item[1]);
-            if (index === -1 || index === 0)
-                index = 0;
-            // Validate
-            if (!valid(inputToValue(index), refs.selecting.current))
-                return;
-            // Update values
-            onUpdate(inputToValue(index));
-        }
-    }, []);
-    react_1.default.useEffect(() => {
-        var _a;
-        const onMouseUp = () => {
-            if (refs.mouseDown.current) {
-                setMouseDown(false);
-                // Auto next
-                if (refs.autoNext.current) {
-                    if (['hour', 'minute', 'second'].includes(refs.selecting.current)) {
-                        let valueSelecting;
-                        if (refs.selecting.current === 'second')
-                            valueSelecting = 'hour';
-                        if (refs.selecting.current === 'minute')
-                            valueSelecting = refs.second.current ? 'second' : 'hour';
-                        if (refs.selecting.current === 'hour' && refs.minute.current)
-                            valueSelecting = 'minute';
-                        onUpdateSelecting(valueSelecting);
-                    }
-                }
-                if ((0, utils_1.is)('function', onDoneSelecting))
-                    onDoneSelecting(refs.value.current, refs.selecting.current);
-            }
-        };
-        // Mouse move
-        const onMouseMove = (event) => {
-            if (refs.mouseDown.current) {
-                const { clientY, clientX } = event;
-                onMove(clientX, clientY);
-            }
-        };
-        // Touch move
-        const onTouchMove = (event) => {
-            if (refs.mouseDown.current) {
-                const { clientY, clientX } = event.touches[0];
-                onMove(clientX, clientY);
-            }
+    '& svg > *': {
+      cursor: 'grab'
+    }
+  },
+  mouseDown: {
+    '& svg > *': {
+      cursor: 'grabbing'
+    }
+  }
+}), {
+  name: 'onesy-Clock'
+});
+const Clock = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
+  const theme = (0, _styleReact.useOnesyTheme)();
+  const props = _react.default.useMemo(() => {
+    var _theme$ui, _theme$ui2;
+    return _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.onesyClock) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props__);
+  }, [props__]);
+  const RoundMeter = _react.default.useMemo(() => {
+    var _theme$elements;
+    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.RoundMeter) || _RoundMeter.default;
+  }, [theme]);
+  const Path = _react.default.useMemo(() => {
+    var _theme$elements2;
+    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Path) || _Path.default;
+  }, [theme]);
+  const {
+      tonal = true,
+      color = 'primary',
+      size = 'regular',
+      value: value_,
+      valueDefault,
+      onChange,
+      selecting: selecting_,
+      selectingDefault,
+      onChangeSelecting,
+      format = '12',
+      dayTime = 'am',
+      hour = true,
+      minute = true,
+      second = false,
+      autoNext,
+      min,
+      max,
+      validate,
+      readOnly,
+      disabled,
+      valid: valid_,
+      renderValue,
+      onDoneSelecting,
+      onClick: onClick_,
+      className,
+      BackgroundProps
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [value, setValue] = _react.default.useState((valueDefault !== undefined ? valueDefault : value_) || new _date.OnesyDate());
+  const [selecting, setSelecting] = _react.default.useState((selectingDefault !== undefined ? selectingDefault : selecting_) || 'hour');
+  const [mouseDown, setMouseDown] = _react.default.useState(false);
+  const refs = {
+    root: _react.default.useRef(null),
+    middle: _react.default.useRef(null),
+    mouseDown: _react.default.useRef(null),
+    value: _react.default.useRef(null),
+    selecting: _react.default.useRef(null),
+    autoNext: _react.default.useRef(null),
+    hour: _react.default.useRef(null),
+    minute: _react.default.useRef(null),
+    second: _react.default.useRef(null),
+    format: _react.default.useRef(null),
+    dayTime: _react.default.useRef(null),
+    previous: _react.default.useRef(selecting)
+  };
+  refs.mouseDown.current = mouseDown;
+  refs.value.current = value;
+  refs.hour.current = hour;
+  refs.minute.current = minute;
+  refs.second.current = second;
+  refs.selecting.current = selecting;
+  refs.autoNext.current = autoNext;
+  refs.format.current = format;
+  refs.dayTime.current = dayTime;
+  const resolve = _react.default.useCallback((valueNew = refs.value.current, dayTimeValue = refs.dayTime.current) => {
+    // Resolve the range value
+    const valueHour = valueNew.hour;
+    if (format === '12') {
+      if (dayTimeValue === 'am' && valueHour > 12) return (0, _date.set)(valueHour - 12, 'hour', valueNew);
+      if (dayTimeValue === 'pm' && valueHour < 12) return (0, _date.set)(valueHour + 12, 'hour', valueNew);
+    }
+    return valueNew;
+  }, [value, dayTime, format]);
+  const inputToValue = _react.default.useCallback((valueNew, unit = refs.selecting.current) => {
+    let onesyDate = new _date.OnesyDate(refs.value.current);
+    let valueTime = valueNew;
+    if ((0, _utils.is)('string', valueTime) && valueTime.startsWith('0')) valueTime = valueTime.slice(1);
+    valueTime = +valueTime;
+    if (unit === 'hour') onesyDate = (0, _date.set)(format === '12' && dayTime === 'pm' ? valueTime + 12 : valueTime, 'hour', onesyDate);else onesyDate = (0, _date.set)(valueTime, unit, onesyDate);
+    return resolve(onesyDate);
+  }, [value, format, dayTime, hour, minute, second]);
+  const onMove = _react.default.useCallback((x_, y_) => {
+    const rectMiddle = refs.middle.current.getBoundingClientRect();
+    const x = x_ - rectMiddle.x;
+    const y = y_ - rectMiddle.y;
+    const radians = Math.atan2(x, y);
+    const degrees = radians * 180 / Math.PI;
+    const angle = 180 - degrees;
+
+    // Make array of values
+    // for hours, minutes and seconds
+    // with +- 50% around the value
+
+    // Find item in that array that this angle fits within
+    let valuesAll = [];
+    if (refs.selecting.current === 'hour') {
+      const part = 360 / 12;
+      valuesAll = Array.from({
+        length: 12
+      }).map((item, index_) => [part * index_ - part / 2, part * index_ + part / 2]);
+      let index = valuesAll.findIndex(item => angle >= item[0] && angle <= item[1]);
+      if (index === -1 || index === 0) index = refs.format.current === '24' ? 0 : 12;
+      if (refs.format.current === '24') {
+        let within = false;
+        const labelElements = refs.root.current.querySelectorAll('.onesy-RoundMeter-labels');
+        const elements = {
+          outer: labelElements[0],
+          inner: labelElements[1]
         };
-        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
-        rootDocument.addEventListener('mouseup', onMouseUp);
-        rootDocument.addEventListener('mousemove', onMouseMove);
-        rootDocument.addEventListener('touchend', onMouseUp);
-        rootDocument.addEventListener('touchmove', onTouchMove, { passive: true });
-        return () => {
-            rootDocument.removeEventListener('mousemove', onMouseMove);
-            rootDocument.removeEventListener('mouseup', onMouseUp);
-            rootDocument.removeEventListener('touchmove', onTouchMove);
-            rootDocument.removeEventListener('touchend', onMouseUp);
+        const rects = {
+          outer: elements.outer.getBoundingClientRect(),
+          inner: elements.inner.getBoundingClientRect()
         };
-    }, []);
-    react_1.default.useEffect(() => {
-        if (value_ !== undefined && value_ !== value)
-            setValue(value_);
-    }, [value_]);
-    const updateTransitions = react_1.default.useCallback(() => {
-        // Add momentary transition to the OnesyRoundMeter-children > *
-        // if selecting value updates
-        if (refs.root.current) {
-            let elementChildren = refs.root.current.getElementsByClassName('onesy-RoundMeter-children')[0];
-            let elementLabels = refs.root.current.getElementsByClassName('onesy-RoundMeter-labels')[0];
-            if (elementChildren && elementLabels) {
-                elementChildren = Array.from(elementChildren.children);
-                elementLabels = Array.from(elementLabels.children);
-                elementChildren.forEach((item) => item.style.transition = 'transform .3s');
-                elementLabels.forEach((item) => item.style.transition = 'fill .3s');
-                setTimeout(() => {
-                    [...elementChildren, ...elementLabels].forEach((item) => item.style.removeProperty('transition'));
-                }, 300);
-            }
-        }
-    }, []);
-    react_1.default.useEffect(() => {
-        if (selecting_ !== undefined && selecting_ !== selecting) {
-            setSelecting(selecting_);
-            refs.previous.current = selecting_;
-            updateTransitions();
-        }
-    }, [selecting_]);
-    react_1.default.useEffect(() => {
-        if (selecting !== refs.previous.current) {
-            refs.previous.current = selecting;
-            updateTransitions();
-        }
-    }, [selecting]);
-    const onUpdate = react_1.default.useCallback((valueNew) => {
-        const newValue = (valueNew === null || valueNew === void 0 ? void 0 : valueNew.milliseconds) || null;
-        const previousValue = refs.value.current.milliseconds;
-        if (newValue === previousValue)
-            return;
-        if (!(readOnly || disabled)) {
-            // Inner controlled value
-            if (!props.hasOwnProperty('value'))
-                setValue(valueNew);
-            if ((0, utils_1.is)('function', onChange))
-                onChange(valueNew);
-        }
-    }, [readOnly, disabled]);
-    const onUpdateSelecting = react_1.default.useCallback((valueNew) => {
-        if (!(readOnly || disabled)) {
-            // Inner controlled selecting
-            if (!props.hasOwnProperty('selecting'))
-                setSelecting(valueNew);
-            if ((0, utils_1.is)('function', onChangeSelecting))
-                onChangeSelecting(valueNew);
-        }
-    }, [readOnly, disabled]);
-    const valid = react_1.default.useCallback((...args) => {
-        if ((0, utils_1.is)('function', valid_))
-            return valid_(...args);
-        const onesyDate = args[0];
-        if (min || max || validate) {
-            let response = true;
-            if ((0, utils_1.is)('function', validate))
-                response = validate(onesyDate);
-            if (min !== undefined)
-                response = response && (0, date_1.is)(onesyDate, 'after or same', min);
-            if (max !== undefined)
-                response = response && (0, date_1.is)(onesyDate, 'before or same', max);
-            return response;
+        const part_ = Math.abs(Math.abs(rects.outer.x) - Math.abs(rects.inner.x));
+        const valueMoved = Math.sqrt(x ** 2 + y ** 2);
+        const middleInner = Math.abs(Math.abs(rectMiddle.x) - Math.abs(rects.inner.x));
+        if (valueMoved <= middleInner + part_ / 2) within = true;
+        if (within) index += 12;
+        index = (0, _utils.clamp)(index, 0, 23);
+      }
+
+      // Validate
+      if (!valid(inputToValue(index, 'hour'), 'hour')) return;
+
+      // Update values
+      onUpdate(inputToValue(index, 'hour'));
+    } else if (['minute', 'second'].includes(refs.selecting.current)) {
+      const part = 360 / 60;
+      valuesAll = Array.from({
+        length: 60
+      }).map((item, index_) => [part * index_ - part / 2, part * index_ + part / 2]);
+      let index = valuesAll.findIndex(item => angle >= item[0] && angle <= item[1]);
+      if (index === -1 || index === 0) index = 0;
+
+      // Validate
+      if (!valid(inputToValue(index), refs.selecting.current)) return;
+
+      // Update values
+      onUpdate(inputToValue(index));
+    }
+  }, []);
+  _react.default.useEffect(() => {
+    var _refs$root$current;
+    const onMouseUp = () => {
+      if (refs.mouseDown.current) {
+        setMouseDown(false);
+
+        // Auto next
+        if (refs.autoNext.current) {
+          if (['hour', 'minute', 'second'].includes(refs.selecting.current)) {
+            let valueSelecting;
+            if (refs.selecting.current === 'second') valueSelecting = 'hour';
+            if (refs.selecting.current === 'minute') valueSelecting = refs.second.current ? 'second' : 'hour';
+            if (refs.selecting.current === 'hour' && refs.minute.current) valueSelecting = 'minute';
+            onUpdateSelecting(valueSelecting);
+          }
         }
-        return true;
-    }, [valid_, min, max, validate]);
-    const onMouseDown = react_1.default.useCallback(() => {
-        setMouseDown(true);
-    }, []);
-    const onClick = react_1.default.useCallback((event) => {
-        const { clientX: x, clientY: y } = event;
-        onMove(x, y);
-        if ((0, utils_1.is)('function', onClick_))
-            onClick_(event);
-    }, [onClick_]);
-    const palette = react_1.default.useMemo(() => {
-        var _a;
-        if (['inherit', 'default'].includes(color))
-            return theme.methods.color(theme.palette.text.default.primary);
-        if (color === 'themed')
-            return theme.methods.color(theme.palette.text.default.secondary);
-        if (color === 'inverted')
-            return theme.methods.color(theme.palette.background.default.primary);
-        return theme.methods.color(((_a = theme.palette.color[color]) === null || _a === void 0 ? void 0 : _a.main) || color);
-    }, [color, theme]);
-    let valueClock = '';
-    let valueClock24 = 0;
-    let valuePosition;
-    let labels = [];
-    let lowerPointer = false;
-    const colors = {
-        regular: 'currentColor',
-        inverse: theme.methods.palette.color.value(undefined, 90, true, palette)
+        if ((0, _utils.is)('function', onDoneSelecting)) onDoneSelecting(refs.value.current, refs.selecting.current);
+      }
     };
-    if (selecting === 'hour') {
-        // Value
-        valueClock = valueClock24 = value === null || value === void 0 ? void 0 : value.hour;
-        if (format === '24' && valueClock > 11)
-            lowerPointer = true;
-        if (valueClock > 12)
-            valueClock -= 12;
-        valuePosition = (100 / 12) * valueClock;
-        // Labels
-        if (format === '12')
-            labels = (0, utils_1.unique)([
-                // 12 hours
-                ...(Array.from({ length: 12 }).map((item, index) => ({
-                    value: index === 0 ? 12 : index,
-                    padding: theme.methods.space.value(2.5, 'px'),
-                    style: {
-                        fontSize: 14,
-                        opacity: valid(inputToValue(index === 0 ? 12 : index, 'hour'), 'hour') ? 1 : 0.27,
-                        fill: ((valueClock === 12 && index === 0) || (valueClock === index)) ? colors.inverse : colors.regular
-                    },
-                    position: index * (100 / 12)
-                })))
-            ], 'position');
-        else {
-            labels = [
-                (0, utils_1.unique)([
-                    // 0-11 hours
-                    ...(Array.from({ length: 12 }).map((item, index) => ({
-                        value: index === 0 ? '00' : index,
-                        padding: theme.methods.space.value(2.5, 'px'),
-                        style: {
-                            fontSize: 14,
-                            opacity: valid(inputToValue(index === 0 ? 0 : index, 'hour'), 'hour') ? 1 : 0.27,
-                            fill: valueClock24 === index ? colors.inverse : colors.regular
-                        },
-                        position: index * (100 / 12)
-                    })))
-                ], 'position'),
-                (0, utils_1.unique)([
-                    // 12-23 hours
-                    ...(Array.from({ length: 12 }).map((item, index) => ({
-                        value: 12 + index,
-                        padding: theme.methods.space.value(6, 'px'),
-                        style: {
-                            fontSize: 14,
-                            opacity: valid(inputToValue(12 + index, 'hour'), 'hour') ? 1 : 0.27,
-                            fill: valueClock24 === (12 + index) ? colors.inverse : colors.regular
-                        },
-                        position: index * (100 / 12)
-                    })))
-                ], 'position')
-            ];
-        }
+
+    // Mouse move
+    const onMouseMove = event => {
+      if (refs.mouseDown.current) {
+        const {
+          clientY,
+          clientX
+        } = event;
+        onMove(clientX, clientY);
+      }
+    };
+
+    // Touch move
+    const onTouchMove = event => {
+      if (refs.mouseDown.current) {
+        const {
+          clientY,
+          clientX
+        } = event.touches[0];
+        onMove(clientX, clientY);
+      }
+    };
+    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.ownerDocument) || window.document : undefined;
+    rootDocument.addEventListener('mouseup', onMouseUp);
+    rootDocument.addEventListener('mousemove', onMouseMove);
+    rootDocument.addEventListener('touchend', onMouseUp);
+    rootDocument.addEventListener('touchmove', onTouchMove, {
+      passive: true
+    });
+    return () => {
+      rootDocument.removeEventListener('mousemove', onMouseMove);
+      rootDocument.removeEventListener('mouseup', onMouseUp);
+      rootDocument.removeEventListener('touchmove', onTouchMove);
+      rootDocument.removeEventListener('touchend', onMouseUp);
+    };
+  }, []);
+  _react.default.useEffect(() => {
+    if (value_ !== undefined && value_ !== value) setValue(value_);
+  }, [value_]);
+  const updateTransitions = _react.default.useCallback(() => {
+    // Add momentary transition to the OnesyRoundMeter-children > *
+    // if selecting value updates
+    if (refs.root.current) {
+      let elementChildren = refs.root.current.getElementsByClassName('onesy-RoundMeter-children')[0];
+      let elementLabels = refs.root.current.getElementsByClassName('onesy-RoundMeter-labels')[0];
+      if (elementChildren && elementLabels) {
+        elementChildren = Array.from(elementChildren.children);
+        elementLabels = Array.from(elementLabels.children);
+        elementChildren.forEach(item => item.style.transition = 'transform .3s');
+        elementLabels.forEach(item => item.style.transition = 'fill .3s');
+        setTimeout(() => {
+          [...elementChildren, ...elementLabels].forEach(item => item.style.removeProperty('transition'));
+        }, 300);
+      }
+    }
+  }, []);
+  _react.default.useEffect(() => {
+    if (selecting_ !== undefined && selecting_ !== selecting) {
+      setSelecting(selecting_);
+      refs.previous.current = selecting_;
+      updateTransitions();
+    }
+  }, [selecting_]);
+  _react.default.useEffect(() => {
+    if (selecting !== refs.previous.current) {
+      refs.previous.current = selecting;
+      updateTransitions();
+    }
+  }, [selecting]);
+  const onUpdate = _react.default.useCallback(valueNew => {
+    const newValue = (valueNew === null || valueNew === void 0 ? void 0 : valueNew.milliseconds) || null;
+    const previousValue = refs.value.current.milliseconds;
+    if (newValue === previousValue) return;
+    if (!(readOnly || disabled)) {
+      // Inner controlled value
+      if (!props.hasOwnProperty('value')) setValue(valueNew);
+      if ((0, _utils.is)('function', onChange)) onChange(valueNew);
+    }
+  }, [readOnly, disabled]);
+  const onUpdateSelecting = _react.default.useCallback(valueNew => {
+    if (!(readOnly || disabled)) {
+      // Inner controlled selecting
+      if (!props.hasOwnProperty('selecting')) setSelecting(valueNew);
+      if ((0, _utils.is)('function', onChangeSelecting)) onChangeSelecting(valueNew);
+    }
+  }, [readOnly, disabled]);
+  const valid = _react.default.useCallback((...args) => {
+    if ((0, _utils.is)('function', valid_)) return valid_(...args);
+    const onesyDate = args[0];
+    if (min || max || validate) {
+      let response = true;
+      if ((0, _utils.is)('function', validate)) response = validate(onesyDate);
+      if (min !== undefined) response = response && (0, _date.is)(onesyDate, 'after or same', min);
+      if (max !== undefined) response = response && (0, _date.is)(onesyDate, 'before or same', max);
+      return response;
+    }
+    return true;
+  }, [valid_, min, max, validate]);
+  const onMouseDown = _react.default.useCallback(() => {
+    setMouseDown(true);
+  }, []);
+  const onClick = _react.default.useCallback(event => {
+    const {
+      clientX: x,
+      clientY: y
+    } = event;
+    onMove(x, y);
+    if ((0, _utils.is)('function', onClick_)) onClick_(event);
+  }, [onClick_]);
+  const palette = _react.default.useMemo(() => {
+    var _theme$palette$color$;
+    if (['inherit', 'default'].includes(color)) return theme.methods.color(theme.palette.text.default.primary);
+    if (color === 'themed') return theme.methods.color(theme.palette.text.default.secondary);
+    if (color === 'inverted') return theme.methods.color(theme.palette.background.default.primary);
+    return theme.methods.color(((_theme$palette$color$ = theme.palette.color[color]) === null || _theme$palette$color$ === void 0 ? void 0 : _theme$palette$color$.main) || color);
+  }, [color, theme]);
+  let valueClock = '';
+  let valueClock24 = 0;
+  let valuePosition;
+  let labels = [];
+  let lowerPointer = false;
+  const colors = {
+    regular: 'currentColor',
+    inverse: theme.methods.palette.color.value(undefined, 90, true, palette)
+  };
+  if (selecting === 'hour') {
+    // Value
+    valueClock = valueClock24 = value === null || value === void 0 ? void 0 : value.hour;
+    if (format === '24' && valueClock > 11) lowerPointer = true;
+    if (valueClock > 12) valueClock -= 12;
+    valuePosition = 100 / 12 * valueClock;
+
+    // Labels
+    if (format === '12') labels = (0, _utils.unique)([
+    // 12 hours
+    ...Array.from({
+      length: 12
+    }).map((item, index) => ({
+      value: index === 0 ? 12 : index,
+      padding: theme.methods.space.value(2.5, 'px'),
+      style: {
+        fontSize: 14,
+        opacity: valid(inputToValue(index === 0 ? 12 : index, 'hour'), 'hour') ? 1 : 0.27,
+        fill: valueClock === 12 && index === 0 || valueClock === index ? colors.inverse : colors.regular
+      },
+      position: index * (100 / 12)
+    }))], 'position');else {
+      labels = [(0, _utils.unique)([
+      // 0-11 hours
+      ...Array.from({
+        length: 12
+      }).map((item, index) => ({
+        value: index === 0 ? '00' : index,
+        padding: theme.methods.space.value(2.5, 'px'),
+        style: {
+          fontSize: 14,
+          opacity: valid(inputToValue(index === 0 ? 0 : index, 'hour'), 'hour') ? 1 : 0.27,
+          fill: valueClock24 === index ? colors.inverse : colors.regular
+        },
+        position: index * (100 / 12)
+      }))], 'position'), (0, _utils.unique)([
+      // 12-23 hours
+      ...Array.from({
+        length: 12
+      }).map((item, index) => ({
+        value: 12 + index,
+        padding: theme.methods.space.value(6, 'px'),
+        style: {
+          fontSize: 14,
+          opacity: valid(inputToValue(12 + index, 'hour'), 'hour') ? 1 : 0.27,
+          fill: valueClock24 === 12 + index ? colors.inverse : colors.regular
+        },
+        position: index * (100 / 12)
+      }))], 'position')];
+    }
+  }
+  if (selecting === 'minute') {
+    // Value
+    valueClock = value === null || value === void 0 ? void 0 : value.minute;
+    valuePosition = 100 / 60 * valueClock;
+
+    // Labels
+    labels = (0, _utils.unique)([
+    // 59 minutes
+    ...Array.from({
+      length: 12
+    }).map((item, index) => ({
+      value: index === 0 ? '00' : (0, _utils.getLeadingZerosNumber)(60 / 12 * index),
+      padding: theme.methods.space.value(2.5, 'px'),
+      style: {
+        fontSize: 14,
+        opacity: valid(inputToValue(index === 0 ? 0 : 60 / 12 * index), 'minute') ? 1 : 0.27,
+        fill: valueClock === 60 / 12 * index ? colors.inverse : colors.regular
+      },
+      position: index * (100 / 12)
+    }))], 'position');
+  }
+  if (selecting === 'second') {
+    // Value
+    valueClock = value === null || value === void 0 ? void 0 : value.second;
+    valuePosition = 100 / 60 * valueClock;
+
+    // Labels
+    labels = (0, _utils.unique)([
+    // 59 seconds
+    ...Array.from({
+      length: 12
+    }).map((item, index) => ({
+      value: index === 0 ? '00' : (0, _utils.getLeadingZerosNumber)(60 / 12 * index),
+      padding: theme.methods.space.value(2.5, 'px'),
+      style: {
+        fontSize: 14,
+        opacity: valid(inputToValue(index === 0 ? 0 : 60 / 12 * index, 'second'), 'second') ? 1 : 0.27,
+        fill: valueClock === 60 / 12 * index ? colors.inverse : colors.regular
+      },
+      position: index * (100 / 12)
+    }))], 'position');
+  }
+  return /*#__PURE__*/_react.default.createElement(RoundMeter, (0, _extends2.default)({
+    ref: item => {
+      if (ref) {
+        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    tonal: tonal,
+    color: color,
+    size: size,
+    labels: labels,
+    arcsVisible: false,
+    childrenPosition: "pre-marks",
+    onClick: onClick,
+    background: true,
+    BackgroundProps: {
+      fill: theme.methods.palette.color.value(undefined, 70, true, palette),
+      onMouseDown: onMouseDown,
+      onTouchStart: onMouseDown
+    },
+    renderLabel: (0, _utils.is)('function', renderValue) ? (x, y, valueItem, otherProps) => renderValue(value, selecting, x, y, valueItem, otherProps) : undefined
+  }, other, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Clock', theme) && ['onesy-Clock-round-meter'], className, classes.root, mouseDown && classes.mouseDown])
+  }), /*#__PURE__*/_react.default.createElement(Path, {
+    ref: refs.middle,
+    Component: "circle",
+    r: "4",
+    cx: "120",
+    cy: "120",
+    style: {
+      stroke: 'none',
+      fill: palette[40]
     }
-    if (selecting === 'minute') {
-        // Value
-        valueClock = value === null || value === void 0 ? void 0 : value.minute;
-        valuePosition = (100 / 60) * valueClock;
-        // Labels
-        labels = (0, utils_1.unique)([
-            // 59 minutes
-            ...(Array.from({ length: 12 }).map((item, index) => ({
-                value: index === 0 ? '00' : (0, utils_1.getLeadingZerosNumber)((60 / 12) * index),
-                padding: theme.methods.space.value(2.5, 'px'),
-                style: {
-                    fontSize: 14,
-                    opacity: valid(inputToValue(index === 0 ? 0 : (60 / 12) * index), 'minute') ? 1 : 0.27,
-                    fill: (valueClock === ((60 / 12) * index)) ? colors.inverse : colors.regular
-                },
-                position: index * (100 / 12)
-            })))
-        ], 'position');
+  }), /*#__PURE__*/_react.default.createElement(Path, {
+    d: "M 120 119 L 195 119 A 1 1 0 0 1 195 121 L 120 121 A 1 1 0 0 1 121 119",
+    value: valuePosition,
+    style: {
+      transformOrigin: '50% 50%',
+      fill: palette[40],
+      stroke: 'none'
     }
-    if (selecting === 'second') {
-        // Value
-        valueClock = value === null || value === void 0 ? void 0 : value.second;
-        valuePosition = (100 / 60) * valueClock;
-        // Labels
-        labels = (0, utils_1.unique)([
-            // 59 seconds
-            ...(Array.from({ length: 12 }).map((item, index) => ({
-                value: index === 0 ? '00' : (0, utils_1.getLeadingZerosNumber)((60 / 12) * index),
-                padding: theme.methods.space.value(2.5, 'px'),
-                style: {
-                    fontSize: 14,
-                    opacity: valid(inputToValue(index === 0 ? 0 : (60 / 12) * index, 'second'), 'second') ? 1 : 0.27,
-                    fill: (valueClock === ((60 / 12) * index)) ? colors.inverse : colors.regular
-                },
-                position: index * (100 / 12)
-            })))
-        ], 'position');
+  }), /*#__PURE__*/_react.default.createElement(Path, {
+    Component: "circle",
+    r: "24",
+    cx: lowerPointer ? 182 : 212.5,
+    cy: "120",
+    value: valuePosition,
+    style: {
+      transformOrigin: 'center',
+      fill: palette[40],
+      stroke: 'none'
     }
-    return ((0, jsx_runtime_1.jsxs)(RoundMeter, Object.assign({ ref: (item) => {
-            if (ref) {
-                if ((0, utils_1.is)('function', ref))
-                    ref(item);
-                else
-                    ref.current = item;
-            }
-            refs.root.current = item;
-        }, tonal: tonal, color: color, size: size, labels: labels, arcsVisible: false, childrenPosition: 'pre-marks', onClick: onClick, background: true, BackgroundProps: {
-            fill: theme.methods.palette.color.value(undefined, 70, true, palette),
-            onMouseDown: onMouseDown,
-            onTouchStart: onMouseDown
-        }, renderLabel: (0, utils_1.is)('function', renderValue) ? (x, y, valueItem, otherProps) => renderValue(value, selecting, x, y, valueItem, otherProps) : undefined }, other, { className: (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('Clock', theme) && [
-                'onesy-Clock-round-meter'
-            ],
-            className,
-            classes.root,
-            mouseDown && classes.mouseDown
-        ]) }, { children: [(0, jsx_runtime_1.jsx)(Path, { ref: refs.middle, Component: 'circle', r: '4', cx: '120', cy: '120', style: {
-                    stroke: 'none',
-                    fill: palette[40]
-                } }), (0, jsx_runtime_1.jsx)(Path, { d: 'M 120 119 L 195 119 A 1 1 0 0 1 195 121 L 120 121 A 1 1 0 0 1 121 119', value: valuePosition, style: {
-                    transformOrigin: '50% 50%',
-                    fill: palette[40],
-                    stroke: 'none'
-                } }), (0, jsx_runtime_1.jsx)(Path, { Component: 'circle', r: '24', cx: lowerPointer ? 182 : 212.5, cy: '120', value: valuePosition, style: {
-                    transformOrigin: 'center',
-                    fill: palette[40],
-                    stroke: 'none'
-                } })] })));
+  }));
 });
 Clock.displayName = 'onesy-Clock';
-exports.default = Clock;
+var _default = exports.default = Clock;