@corva/ui 3.1.0-rc.5 → 3.1.0

package/components/AdvancedSlider/AdvancedSlider.js

@@ -1,414 +1 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { useRef, useState, useEffect, useMemo } from 'react';
-import { Resizable } from 're-resizable';
-import { withSize } from 'react-sizeme';
-import classNames from 'classnames';
-import { useThrottledCallback } from '../shared/useThrottledCallback.js';
-import { Handle } from './Handle.js';
-import { HandleIcon } from './icons/HandleIcon.js';
-import { getSizedControls } from './utils.js';
-import { useSliderStyles } from './styles/sliderStyles.js';
-import './styles/handleStyles.js';
-import { INPUT_WIDTH, INPUT_HEIGHT, INNER_GAP, MIN_ARROW_GAP, HORIZONTAL_ORIENTATION, VERTICAL_ORIENTATION, HORIZONTAL_MIN_GAP, VERTICAL_MIN_GAP } from './constants.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-var _excluded = ["min", "max", "value", "onChange", "orientation", "valueFormatter", "displayFormatter", "editableHandles", "onStop", "reversed", "handlePosition", "handleClasses", "minimal", "dimension"];
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var PAGE_NAME = 'twoValuesSliderDefault';
-var AdvancedSlider = function AdvancedSlider(_ref) {
-  var _classnames2, _classnames3;
-  var min = _ref.min,
-    max = _ref.max,
-    value = _ref.value,
-    _ref$onChange = _ref.onChange,
-    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-    _ref$orientation = _ref.orientation,
-    orientation = _ref$orientation === void 0 ? HORIZONTAL_ORIENTATION : _ref$orientation,
-    _ref$valueFormatter = _ref.valueFormatter,
-    valueFormatter = _ref$valueFormatter === void 0 ? Math.floor : _ref$valueFormatter,
-    _ref$displayFormatter = _ref.displayFormatter,
-    displayFormatter = _ref$displayFormatter === void 0 ? function (value) {
-      return value;
-    } : _ref$displayFormatter,
-    _ref$editableHandles = _ref.editableHandles,
-    editableHandles = _ref$editableHandles === void 0 ? true : _ref$editableHandles,
-    _ref$onStop = _ref.onStop,
-    onStop = _ref$onStop === void 0 ? function () {} : _ref$onStop,
-    _ref$reversed = _ref.reversed,
-    reversed = _ref$reversed === void 0 ? false : _ref$reversed,
-    handlePosition = _ref.handlePosition,
-    _ref$handleClasses = _ref.handleClasses,
-    handleClasses = _ref$handleClasses === void 0 ? {} : _ref$handleClasses,
-    _ref$minimal = _ref.minimal,
-    minimal = _ref$minimal === void 0 ? false : _ref$minimal,
-    _ref$dimension = _ref.dimension,
-    dimension = _ref$dimension === void 0 ? 'small' : _ref$dimension,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var _ref2 = rest,
-    _ref2$size = _ref2.size,
-    sliderSize = _ref2$size === void 0 ? {} : _ref2$size;
-  var classes = useSliderStyles();
-  var headRef = useRef(null);
-  var tailRef = useRef(null);
-  var isHorizontalOrientation = orientation === HORIZONTAL_ORIENTATION;
-  var isVerticalOrientation = orientation === VERTICAL_ORIENTATION;
-  var size = minimal ? sliderSize : _objectSpread(_objectSpread({}, sliderSize), {}, {
-    width: isHorizontalOrientation ? sliderSize.width - 2 * INPUT_WIDTH : sliderSize.width,
-    height: isVerticalOrientation ? sliderSize.height - 2 * INPUT_HEIGHT : sliderSize.height
-  });
-  var _useState = useState([valueFormatter(value === null || value === void 0 ? void 0 : value.at(0)), valueFormatter(value === null || value === void 0 ? void 0 : value.at(1))]),
-    _useState2 = _slicedToArray(_useState, 2),
-    range = _useState2[0],
-    setRange = _useState2[1];
-  var sliderStateOnCapturing = useRef(null); // NOTE: Store slider state on capturing the handle
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isHandleCaptured = _useState4[0],
-    setIsHandleCaptured = _useState4[1]; // NOTE: user grabbed slider handle
-
-  var _range = _slicedToArray(range, 2),
-    head = _range[0],
-    tail = _range[1];
-  var _getSizedControls = getSizedControls({
-      isHorizontalOrientation: isHorizontalOrientation,
-      size: size,
-      max: max,
-      min: min,
-      tail: tail,
-      head: head
-    }),
-    headMaxWidth = _getSizedControls.headMaxWidth,
-    tailMaxWidth = _getSizedControls.tailMaxWidth,
-    headMaxHeight = _getSizedControls.headMaxHeight,
-    tailMaxHeight = _getSizedControls.tailMaxHeight;
-
-  // NOTE: Overwrite head/tail values based on props
-  useEffect(function () {
-    if (!sliderStateOnCapturing.current) {
-      var _values = [valueFormatter(value === null || value === void 0 ? void 0 : value.at(0)), valueFormatter(value === null || value === void 0 ? void 0 : value.at(1))];
-      var _head = Math.min.apply(Math, _values);
-      var _tail = Math.max.apply(Math, _values);
-      setRange([_head, _tail]);
-    }
-  }, [value === null || value === void 0 ? void 0 : value.at(0), value === null || value === void 0 ? void 0 : value.at(1)]);
-
-  // NOTE: Resize blocks based on values
-  useEffect(function () {
-    if (isHorizontalOrientation) {
-      var headWidth = size.width / (max - min) * (head - min);
-      var tailWidth = size.width / (max - min) * (max - tail);
-      headRef.current.updateSize({
-        width: !reversed ? headWidth : tailWidth,
-        height: size.height
-      });
-      tailRef.current.updateSize({
-        width: !reversed ? tailWidth : headWidth,
-        height: size.height
-      });
-    } else if (isVerticalOrientation) {
-      var headHeight = size.height / (max - min) * (head - min);
-      var tailHeight = size.height / (max - min) * (max - tail);
-      headRef.current.updateSize({
-        width: size.width,
-        height: !reversed ? headHeight : tailHeight
-      });
-      tailRef.current.updateSize({
-        width: size.width,
-        height: !reversed ? tailHeight : headHeight
-      });
-    }
-  }, [min, max, head, tail, size.width, size.height, orientation]);
-
-  // NOTE: Add event listener when slider handle is captured
-  useEffect(function () {
-    var addEventListeners = function addEventListeners() {
-      document.addEventListener('mousemove', onMouseMove);
-      document.addEventListener('mouseup', onMouseUp);
-      document.addEventListener('touchmove', onTouchMove);
-      document.addEventListener('touchend', onTouchEnd);
-    };
-    var removeEventListeners = function removeEventListeners() {
-      document.removeEventListener('mousemove', onMouseMove);
-      document.removeEventListener('mouseup', onMouseUp);
-      document.removeEventListener('touchmove', onTouchMove);
-      document.removeEventListener('touchend', onTouchEnd);
-    };
-    if (isHandleCaptured) {
-      addEventListeners();
-    } else {
-      removeEventListeners();
-      onStop();
-    }
-    return function () {
-      removeEventListeners();
-    };
-  }, [isHandleCaptured]);
-  var onResize = useThrottledCallback(function (e, direction, refToElement) {
-    sliderStateOnCapturing.current = 'onResize Event'; // anything
-
-    var elemWidth = refToElement.clientWidth;
-    var elemHeight = refToElement.clientHeight;
-    var nextHead = head;
-    var nextTail = tail;
-    if (direction === 'right') {
-      // Horizontal head
-      if (!reversed) {
-        nextHead = valueFormatter(min + elemWidth / size.width * (max - min));
-      } else {
-        nextTail = valueFormatter(max - elemWidth / size.width * (max - min));
-      }
-    } else if (direction === 'left') {
-      // Horizontal tail
-      if (!reversed) {
-        nextTail = valueFormatter(max - elemWidth / size.width * (max - min));
-      } else {
-        nextHead = valueFormatter(min + elemWidth / size.width * (max - min));
-      }
-    } else if (direction === 'bottom') {
-      // Vertical head
-      if (!reversed) {
-        nextHead = valueFormatter(min + elemHeight / size.height * (max - min));
-      } else {
-        nextTail = valueFormatter(max - elemHeight / size.height * (max - min));
-      }
-    } else if (direction === 'top') {
-      // Vertical tail
-      if (!reversed) {
-        nextTail = valueFormatter(max - elemHeight / size.height * (max - min));
-      } else {
-        nextHead = valueFormatter(min + elemHeight / size.height * (max - min));
-      }
-    }
-    nextHead = Math.min(nextHead, tail);
-    nextTail = Math.max(nextTail, head);
-    setRange([nextHead, nextTail]);
-    onChange([nextHead, nextTail]);
-  });
-  var onResizeStop = useThrottledCallback(function /* e, direction, refToElement, delta */
-  () {
-    sliderStateOnCapturing.current = null;
-    onStop();
-  });
-
-  // NOTE: Store mouse position and head, tail values. Triggered by onMouseDown and onTouchStart
-  var rememberInitialState = function rememberInitialState(xPos, yPos) {
-    sliderStateOnCapturing.current = {
-      xPos: xPos,
-      yPos: yPos,
-      head: head,
-      tail: tail
-    };
-  };
-  var calculateNextState = function calculateNextState(xPos, yPos) {
-    if (sliderStateOnCapturing.current) {
-      var diffPixel;
-      var diffValue;
-
-      // NOTE: Calculate next head, tail values based on mouse move
-      if (isHorizontalOrientation) {
-        diffPixel = sliderStateOnCapturing.current.xPos - xPos;
-        diffValue = diffPixel / size.width * (max - min);
-      } else if (isVerticalOrientation) {
-        diffPixel = sliderStateOnCapturing.current.yPos - yPos;
-        diffValue = diffPixel / size.height * (max - min);
-      }
-      var headComputed = sliderStateOnCapturing.current.head - diffValue * (!reversed ? 1 : -1);
-      var tailComputed = sliderStateOnCapturing.current.tail - diffValue * (!reversed ? 1 : -1);
-      var originalGap = sliderStateOnCapturing.current.tail - sliderStateOnCapturing.current.head;
-      var nextHead;
-      var nextTail;
-      if (headComputed <= min) {
-        nextHead = min;
-        nextTail = min + originalGap;
-      } else if (tailComputed >= max) {
-        nextHead = max - originalGap;
-        nextTail = max;
-      } else {
-        nextHead = headComputed;
-        nextTail = tailComputed;
-      }
-      nextHead = valueFormatter(nextHead);
-      nextTail = valueFormatter(nextTail);
-      setRange([nextHead, nextTail]);
-      onChange([nextHead, nextTail]);
-    }
-  };
-
-  // NOTE: Mouse event handlers for the drag handle (middle)
-  var onMouseDown = function onMouseDown(e) {
-    rememberInitialState(e.clientX, e.clientY);
-    setIsHandleCaptured(true);
-  };
-  var onMouseMove = useThrottledCallback(function (e) {
-    calculateNextState(e.clientX, e.clientY);
-  });
-  var onMouseUp = useThrottledCallback(function () {
-    sliderStateOnCapturing.current = null;
-    setIsHandleCaptured(false);
-  });
-
-  // NOTE: Touch event handlers for the drag handle (middle)
-  var onTouchStart = function onTouchStart(e) {
-    rememberInitialState(e.touches[0].pageX, e.touches[0].pageY);
-    setIsHandleCaptured(true);
-  };
-  var onTouchMove = useThrottledCallback(function (e) {
-    calculateNextState(e.touches[0].pageX, e.touches[0].pageY);
-  });
-  var onTouchEnd = useThrottledCallback(function () {
-    sliderStateOnCapturing.current = null;
-    setIsHandleCaptured(false);
-  });
-
-  // NOTE: Callbacks for head/tail input fields
-  var onChangeHead = useThrottledCallback(function (nextHead) {
-    setRange([nextHead, tail]);
-    onChange([nextHead, tail]);
-    onStop();
-  });
-  var onChangeTail = useThrottledCallback(function (nextTail) {
-    setRange([head, nextTail]);
-    onChange([head, nextTail]);
-    onStop();
-  });
-  var isSmallGap = useMemo(function () {
-    var gap = (tail - head) / (max - min) * (isVerticalOrientation ? size.height : size.width);
-    return gap < 30;
-  }, [min, max, head, tail]);
-  var isInsideArrowsVisible = useMemo(function () {
-    var gap = (tail - head) / (max - min) * (isVerticalOrientation ? size.height : size.width);
-    return gap < INNER_GAP;
-  }, [min, max, head, tail]);
-  var getSingleGap = function getSingleGap(current, maxValue) {
-    return current / maxValue * (isVerticalOrientation ? size.height : size.width);
-  };
-  var arrowsOutsideConfig = useMemo(function () {
-    var minGap = isHorizontalOrientation ? HORIZONTAL_MIN_GAP : VERTICAL_MIN_GAP;
-    if (reversed) {
-      return {
-        isRightArrowInvisible: getSingleGap(head, max) < MIN_ARROW_GAP,
-        isLeftArrowInvisible: getSingleGap(max - tail, max) < MIN_ARROW_GAP,
-        distance: (tail - head) / (max - min) * (isVerticalOrientation ? size.height : size.width) - minGap
-      };
-    }
-    return {
-      isRightArrowInvisible: getSingleGap(max - tail, max) < MIN_ARROW_GAP,
-      isLeftArrowInvisible: getSingleGap(head, max) < MIN_ARROW_GAP,
-      distance: (tail - head) / (max - min) * (isVerticalOrientation ? size.height : size.width) - minGap
-    };
-  }, [min, max, head, tail, reversed]);
-  var getHandleComponent = function getHandleComponent(placement) {
-    var headHandleProps = {
-      min: min,
-      max: tail,
-      value: head,
-      onChange: onChangeHead
-    };
-    var tailHandleProps = {
-      min: head,
-      max: max,
-      value: tail,
-      onChange: onChangeTail
-    };
-    if (placement === 'head') {
-      return /*#__PURE__*/jsx(Handle, _objectSpread({
-        "data-testid": "".concat(PAGE_NAME, "_handle_top"),
-        placement: "head",
-        dimension: dimension,
-        readOnly: !editableHandles,
-        isInsideArrowsVisible: isInsideArrowsVisible,
-        arrowsOutsideConfig: arrowsOutsideConfig,
-        displayFormatter: displayFormatter,
-        orientation: orientation,
-        classes: handleClasses,
-        minimal: minimal
-      }, !reversed ? headHandleProps : tailHandleProps));
-    } else if (placement === 'tail') {
-      return /*#__PURE__*/jsx(Handle, _objectSpread({
-        "data-testid": "".concat(PAGE_NAME, "_handle_bottom"),
-        placement: "tail",
-        dimension: dimension,
-        readOnly: !editableHandles,
-        isInsideArrowsVisible: isInsideArrowsVisible,
-        arrowsOutsideConfig: arrowsOutsideConfig,
-        displayFormatter: displayFormatter,
-        orientation: orientation,
-        classes: handleClasses,
-        minimal: minimal
-      }, !reversed ? tailHandleProps : headHandleProps));
-    }
-    return null;
-  };
-  return /*#__PURE__*/jsx("div", {
-    className: classNames(classes.rootWrapper, classes["".concat(orientation, "-").concat(dimension)], _defineProperty({}, classes.rootMinimal, minimal)),
-    children: /*#__PURE__*/jsxs("div", {
-      className: classNames(classes.root, (_classnames2 = {}, _defineProperty(_classnames2, classes.horizontalRoot, isHorizontalOrientation), _defineProperty(_classnames2, classes.verticalRoot, isVerticalOrientation), _defineProperty(_classnames2, classes.minimal, minimal), _classnames2)),
-      children: [/*#__PURE__*/jsx(Resizable, {
-        className: classes.resizable,
-        ref: headRef,
-        minHeight: 0,
-        minWidth: 0,
-        maxWidth: reversed ? tailMaxWidth : headMaxWidth,
-        maxHeight: reversed ? tailMaxHeight : headMaxHeight,
-        enable: {
-          right: isHorizontalOrientation,
-          bottom: isVerticalOrientation
-        },
-        handleComponent: {
-          right: getHandleComponent('head'),
-          bottom: getHandleComponent('head')
-        },
-        onResize: onResize,
-        onResizeStop: onResizeStop
-      }), /*#__PURE__*/jsx("div", {
-        className: classes.body,
-        "data-testid": "slider-body",
-        onMouseDown: onMouseDown,
-        onTouchStart: onTouchStart,
-        children: !isSmallGap ? /*#__PURE__*/jsx("div", {
-          className: classes.bodyHandleIcon,
-          "data-testid": "".concat(PAGE_NAME, "_handle"),
-          children: /*#__PURE__*/jsx(HandleIcon, {
-            orientation: orientation,
-            minimal: minimal
-          })
-        }) : /*#__PURE__*/jsx("div", {
-          className: classNames((_classnames3 = {}, _defineProperty(_classnames3, classes.horizontalBodyHandle, isHorizontalOrientation), _defineProperty(_classnames3, classes.verticalBodyHandle, isVerticalOrientation), _defineProperty(_classnames3, classes.leftBodyHandle, handlePosition === 'left'), _defineProperty(_classnames3, classes.rightBodyHandle, handlePosition === 'right'), _defineProperty(_classnames3, classes.topBodyHandle, handlePosition === 'top'), _defineProperty(_classnames3, classes.bottomBodyHandle, handlePosition === 'bottom'), _classnames3)),
-          children: /*#__PURE__*/jsx("div", {
-            className: classes.bodyHandle,
-            "data-testid": "".concat(PAGE_NAME, "_handle"),
-            children: /*#__PURE__*/jsx(HandleIcon, {
-              orientation: "vertical",
-              minimal: minimal
-            })
-          })
-        })
-      }), /*#__PURE__*/jsx(Resizable, {
-        className: classes.resizable,
-        ref: tailRef,
-        minHeight: 0,
-        minWidth: 0,
-        enable: {
-          left: isHorizontalOrientation,
-          top: isVerticalOrientation
-        },
-        handleComponent: {
-          left: getHandleComponent('tail'),
-          top: getHandleComponent('tail')
-        },
-        onResize: onResize,
-        onResizeStop: onResizeStop
-      })]
-    })
-  });
-};
-var AdvancedSlider$1 = withSize({
-  monitorWidth: true,
-  monitorHeight: true
-})(AdvancedSlider);
-
-export { AdvancedSlider, AdvancedSlider$1 as default };
-//# sourceMappingURL=AdvancedSlider.js.map
+import{__rest as t,__assign as e}from'./../../ext-esm/tslib/tslib.es6.js';import{jsx as i,jsxs as n}from"react/jsx-runtime";import{useRef as o,useState as a,useEffect as r,useMemo as d}from"react";import{Resizable as l}from"re-resizable";import{withSize as h}from"react-sizeme";import s from"classnames";import{useThrottledCallback as m}from"../shared/useThrottledCallback.js";import{Handle as c}from"./Handle.js";import{HandleIcon as u}from"./icons/HandleIcon.js";import{getSizedControls as v}from"./utils.js";import{useSliderStyles as f}from"./styles/sliderStyles.js";import"./styles/handleStyles.js";import{INPUT_WIDTH as p,INPUT_HEIGHT as g,INNER_GAP as w,MIN_ARROW_GAP as b,HORIZONTAL_ORIENTATION as y,VERTICAL_ORIENTATION as H,HORIZONTAL_MIN_GAP as z,VERTICAL_MIN_GAP as x}from"./constants.js";var M="twoValuesSliderDefault",S=function(h){var S,C,L,j=h.min,E=h.max,R=h.value,I=h.onChange,N=void 0===I?function(){}:I,W=h.orientation,_=void 0===W?y:W,A=h.valueFormatter,B=void 0===A?Math.floor:A,F=h.displayFormatter,P=void 0===F?function(t){return t}:F,O=h.editableHandles,X=void 0===O||O,Y=h.onStop,V=void 0===Y?function(){}:Y,D=h.reversed,T=void 0!==D&&D,k=h.handlePosition,q=h.handleClasses,G=void 0===q?{}:q,J=h.minimal,K=void 0!==J&&J,Q=h.dimension,U=void 0===Q?"small":Q,Z=t(h,["min","max","value","onChange","orientation","valueFormatter","displayFormatter","editableHandles","onStop","reversed","handlePosition","handleClasses","minimal","dimension"]).size,$=void 0===Z?{}:Z,tt=f(),et=o(null),it=o(null),nt=_===y,ot=_===H,at=K?$:e(e({},$),{width:nt?$.width-2*p:$.width,height:ot?$.height-2*g:$.height}),rt=a([B(null==R?void 0:R.at(0)),B(null==R?void 0:R.at(1))]),dt=rt[0],lt=rt[1],ht=o(null),st=a(!1),mt=st[0],ct=st[1],ut=dt[0],vt=dt[1],ft=v({isHorizontalOrientation:nt,size:at,max:E,min:j,tail:vt,head:ut}),pt=ft.headMaxWidth,gt=ft.tailMaxWidth,wt=ft.headMaxHeight,bt=ft.tailMaxHeight;r((function(){if(!ht.current){var t=[B(null==R?void 0:R.at(0)),B(null==R?void 0:R.at(1))],e=Math.min.apply(Math,t),i=Math.max.apply(Math,t);lt([e,i])}}),[null==R?void 0:R.at(0),null==R?void 0:R.at(1)]),r((function(){if(nt){var t=at.width/(E-j)*(ut-j),e=at.width/(E-j)*(E-vt);et.current.updateSize({width:T?e:t,height:at.height}),it.current.updateSize({width:T?t:e,height:at.height})}else if(ot){var i=at.height/(E-j)*(ut-j),n=at.height/(E-j)*(E-vt);et.current.updateSize({width:at.width,height:T?n:i}),it.current.updateSize({width:at.width,height:T?i:n})}}),[j,E,ut,vt,at.width,at.height,_]),r((function(){var t=function(){document.removeEventListener("mousemove",Mt),document.removeEventListener("mouseup",St),document.removeEventListener("touchmove",Ct),document.removeEventListener("touchend",Lt)};return mt?(document.addEventListener("mousemove",Mt),document.addEventListener("mouseup",St),document.addEventListener("touchmove",Ct),document.addEventListener("touchend",Lt)):(t(),V()),function(){t()}}),[mt]);var yt=m((function(t,e,i){ht.current="onResize Event";var n=i.clientWidth,o=i.clientHeight,a=ut,r=vt;"right"===e?T?r=B(E-n/at.width*(E-j)):a=B(j+n/at.width*(E-j)):"left"===e?T?a=B(j+n/at.width*(E-j)):r=B(E-n/at.width*(E-j)):"bottom"===e?T?r=B(E-o/at.height*(E-j)):a=B(j+o/at.height*(E-j)):"top"===e&&(T?a=B(j+o/at.height*(E-j)):r=B(E-o/at.height*(E-j))),a=Math.min(a,vt),r=Math.max(r,ut),lt([a,r]),N([a,r])})),Ht=m((function(){ht.current=null,V()})),zt=function(t,e){ht.current={xPos:t,yPos:e,head:ut,tail:vt}},xt=function(t,e){if(ht.current){var i=void 0;nt?i=(ht.current.xPos-t)/at.width*(E-j):ot&&(i=(ht.current.yPos-e)/at.height*(E-j));var n=ht.current.head-i*(T?-1:1),o=ht.current.tail-i*(T?-1:1),a=ht.current.tail-ht.current.head,r=void 0,d=void 0;n<=j?(r=j,d=j+a):o>=E?(r=E-a,d=E):(r=n,d=o),r=B(r),d=B(d),lt([r,d]),N([r,d])}},Mt=m((function(t){xt(t.clientX,t.clientY)})),St=m((function(){ht.current=null,ct(!1)})),Ct=m((function(t){xt(t.touches[0].pageX,t.touches[0].pageY)})),Lt=m((function(){ht.current=null,ct(!1)})),jt=m((function(t){lt([t,vt]),N([t,vt]),V()})),Et=m((function(t){lt([ut,t]),N([ut,t]),V()})),Rt=d((function(){return(vt-ut)/(E-j)*(ot?at.height:at.width)<30}),[j,E,ut,vt]),It=d((function(){return(vt-ut)/(E-j)*(ot?at.height:at.width)<w}),[j,E,ut,vt]),Nt=function(t,e){return t/e*(ot?at.height:at.width)},Wt=d((function(){var t=nt?z:x;return T?{isRightArrowInvisible:Nt(ut,E)<b,isLeftArrowInvisible:Nt(E-vt,E)<b,distance:(vt-ut)/(E-j)*(ot?at.height:at.width)-t}:{isRightArrowInvisible:Nt(E-vt,E)<b,isLeftArrowInvisible:Nt(ut,E)<b,distance:(vt-ut)/(E-j)*(ot?at.height:at.width)-t}}),[j,E,ut,vt,T]),_t=function(t){var n={min:j,max:vt,value:ut,onChange:jt},o={min:ut,max:E,value:vt,onChange:Et};return"head"===t?i(c,e({"data-testid":"".concat(M,"_handle_top"),placement:"head",dimension:U,readOnly:!X,isInsideArrowsVisible:It,arrowsOutsideConfig:Wt,displayFormatter:P,orientation:_,classes:G,minimal:K},T?o:n)):"tail"===t?i(c,e({"data-testid":"".concat(M,"_handle_bottom"),placement:"tail",dimension:U,readOnly:!X,isInsideArrowsVisible:It,arrowsOutsideConfig:Wt,displayFormatter:P,orientation:_,classes:G,minimal:K},T?n:o)):null};return i("div",{className:s(tt.rootWrapper,tt["".concat(_,"-").concat(U)],(S={},S[tt.rootMinimal]=K,S)),children:n("div",{className:s(tt.root,(C={},C[tt.horizontalRoot]=nt,C[tt.verticalRoot]=ot,C[tt.minimal]=K,C)),children:[i(l,{className:tt.resizable,ref:et,minHeight:0,minWidth:0,maxWidth:T?gt:pt,maxHeight:T?bt:wt,enable:{right:nt,bottom:ot},handleComponent:{right:_t("head"),bottom:_t("head")},onResize:yt,onResizeStop:Ht}),i("div",{className:tt.body,"data-testid":"slider-body",onMouseDown:function(t){zt(t.clientX,t.clientY),ct(!0)},onTouchStart:function(t){zt(t.touches[0].pageX,t.touches[0].pageY),ct(!0)},children:i("div",Rt?{className:s((L={},L[tt.horizontalBodyHandle]=nt,L[tt.verticalBodyHandle]=ot,L[tt.leftBodyHandle]="left"===k,L[tt.rightBodyHandle]="right"===k,L[tt.topBodyHandle]="top"===k,L[tt.bottomBodyHandle]="bottom"===k,L)),children:i("div",{className:tt.bodyHandle,"data-testid":"".concat(M,"_handle"),children:i(u,{orientation:"vertical",minimal:K})})}:{className:tt.bodyHandleIcon,"data-testid":"".concat(M,"_handle"),children:i(u,{orientation:_,minimal:K})})}),i(l,{className:tt.resizable,ref:it,minHeight:0,minWidth:0,enable:{left:nt,top:ot},handleComponent:{left:_t("tail"),top:_t("tail")},onResize:yt,onResizeStop:Ht})]})})},C=h({monitorWidth:!0,monitorHeight:!0})(S);export{S as AdvancedSlider,C as default};

package/components/AdvancedSlider/Handle.js

@@ -1,162 +1 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useState, useRef, useEffect } from 'react';
-import { Input } from '@material-ui/core';
-import classNames from 'classnames';
-import './styles/sliderStyles.js';
-import { useHandleStyles } from './styles/handleStyles.js';
-import { getIsInputValueValid, getValidatedValue } from './utils.js';
-import { HOVER_ARREA_WIDTH_BY_DIMENSION, HOVER_ARREA_HEIGHT, HORIZONTAL_ORIENTATION, VERTICAL_ORIENTATION, HEAD_PLACEMENT } from './constants.js';
-import { LeftIcon, RightIcon } from '../../icons/iconParkIcons.js';
-import '../../icons/customIcons/icons/AddMessage.js';
-import '../../icons/customIcons/icons/Attention.js';
-import '../../icons/customIcons/icons/Collapse.js';
-import '../../icons/customIcons/icons/Dashboard.js';
-import '../../icons/customIcons/icons/Expand.js';
-import '../../icons/customIcons/icons/FolderClosed.js';
-import '../../icons/customIcons/icons/FolderClosedFilled.js';
-import '../../icons/customIcons/icons/FolderOpened.js';
-import '../../icons/customIcons/icons/GreaterOrEqual.js';
-import '../../icons/customIcons/icons/LessOrEqual.js';
-import '../../icons/customIcons/icons/Search.js';
-import '../../icons/customIcons/icons/Wellhub.js';
-import '../../icons/customIcons/icons/MultiRuler.js';
-import '../../icons/customIcons/icons/Checkbox.js';
-import '../../icons/customIcons/icons/CheckboxChecked.js';
-import '../../icons/customIcons/icons/CheckboxIndeterminate.js';
-import '../../icons/customIcons/icons/Radio.js';
-import '../../icons/customIcons/icons/RadioChecked.js';
-import '../../icons/customIcons/icons/SimulFrac.js';
-import '../../icons/customIcons/icons/ZipperFrac.js';
-import '../../icons/customIcons/icons/CautionFilled.js';
-import '../../icons/customIcons/icons/MoreApp.js';
-import '../../icons/customIcons/icons/Pad.js';
-import '../../icons/customIcons/icons/Gap.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var isBuggySymbolEntered = function isBuggySymbolEntered(event) {
-  var _event$target, _event$nativeEvent;
-  var value = event === null || event === void 0 ? void 0 : (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value;
-  var floatValue = value ? parseFloat(value) : 0;
-  var isValidValue = floatValue >= Number.MIN_SAFE_INTEGER && floatValue < Number.MAX_SAFE_INTEGER;
-  var char = event === null || event === void 0 ? void 0 : (_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.data;
-  var pointCount = value.split('.').length - 1;
-  var isValidChar = !char || char === '.' || char === '-' || char >= '0' && char <= '9';
-  var isNotValidMinus = char === '-' && value === '';
-  return !isValidValue || !isValidChar || pointCount > 1 || isNotValidMinus;
-};
-
-/*
-interface HandleProps {
-  value: number | string;
-  orientation: 'vertical' | 'horizontal';
-  placement: 'head' | 'tail';
-  onChange: (newValue: number) => void;
-  min: number;
-  max: number;
-  minimal?: boolean;
-}
-*/
-var Handle = function Handle(_ref) {
-  var _classnames, _classnames2, _classnames3, _classnames4;
-  var value = _ref.value,
-    orientation = _ref.orientation,
-    placement = _ref.placement,
-    dimension = _ref.dimension,
-    readOnly = _ref.readOnly,
-    onChange = _ref.onChange,
-    min = _ref.min,
-    max = _ref.max,
-    displayFormatter = _ref.displayFormatter,
-    isInsideArrowsVisible = _ref.isInsideArrowsVisible,
-    arrowsOutsideConfig = _ref.arrowsOutsideConfig,
-    classes = _ref.classes,
-    minimal = _ref.minimal,
-    dataTestId = _ref['data-testid'];
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    hasError = _useState2[0],
-    setHasError = _useState2[1];
-  var _useState3 = useState(value),
-    _useState4 = _slicedToArray(_useState3, 2),
-    internal = _useState4[0],
-    setInternal = _useState4[1];
-  var inputRef = useRef(null);
-  var isHorizontalOrientation = orientation === HORIZONTAL_ORIENTATION;
-  var isVerticalOrientation = orientation === VERTICAL_ORIENTATION;
-  var isHeadPlacement = placement === HEAD_PLACEMENT;
-  var styles = useHandleStyles({
-    distance: arrowsOutsideConfig === null || arrowsOutsideConfig === void 0 ? void 0 : arrowsOutsideConfig.distance,
-    minimal: minimal,
-    hoverAreaHeight: isHorizontalOrientation ? HOVER_ARREA_WIDTH_BY_DIMENSION[dimension] : HOVER_ARREA_HEIGHT,
-    hoverAreaWidth: isHorizontalOrientation ? HOVER_ARREA_HEIGHT : HOVER_ARREA_WIDTH_BY_DIMENSION[dimension]
-  });
-  var onChangeValue = function onChangeValue(e) {
-    var newValue = e.target.value;
-    if (isBuggySymbolEntered(e)) {
-      return;
-    }
-    setInternal(newValue);
-    if (hasError) setHasError(false);
-  };
-  var handleKeyDown = function handleKeyDown(_ref2) {
-    var keyCode = _ref2.keyCode,
-      target = _ref2.target;
-    if (keyCode !== 13) return;
-    handleValueSubmit(target.value);
-  };
-  var handleBlur = function handleBlur(_ref3) {
-    var target = _ref3.target;
-    handleValueSubmit(target.value);
-  };
-  var handleValueSubmit = function handleValueSubmit(value) {
-    if (readOnly) {
-      return;
-    }
-    var formattedValue = Number(value);
-    var isInputValid = getIsInputValueValid(formattedValue);
-    if (!isInputValid) {
-      setHasError(true);
-      return;
-    }
-    onChange(getValidatedValue(formattedValue, min, max));
-  };
-  useEffect(function () {
-    setInternal(value);
-    if (hasError) setHasError(false);
-  }, [value]);
-  return /*#__PURE__*/jsxs("div", {
-    className: classNames(styles.root, classes.handleRoot, styles[dimension], (_classnames = {}, _defineProperty(_classnames, styles.horizontalHeadRoot, isHorizontalOrientation && isHeadPlacement), _defineProperty(_classnames, styles.horizontalTailRoot, isHorizontalOrientation && !isHeadPlacement), _defineProperty(_classnames, styles.verticalHeadRoot, isVerticalOrientation && isHeadPlacement), _defineProperty(_classnames, styles.verticalTailRoot, isVerticalOrientation && !isHeadPlacement), _defineProperty(_classnames, styles.minimalHandleRoot, minimal), _classnames)),
-    children: [/*#__PURE__*/jsx(LeftIcon, {
-      size: 16,
-      className: classNames(styles.leftArrow, (_classnames2 = {}, _defineProperty(_classnames2, styles.reversedLeftArrow, isVerticalOrientation), _defineProperty(_classnames2, styles.isInvisible, isInsideArrowsVisible && !isHeadPlacement || isHeadPlacement && (arrowsOutsideConfig === null || arrowsOutsideConfig === void 0 ? void 0 : arrowsOutsideConfig.isLeftArrowInvisible)), _classnames2)),
-      fill: "white"
-    }), /*#__PURE__*/jsx("div", {
-      className: classNames(styles.handle, classes.handle, (_classnames3 = {}, _defineProperty(_classnames3, styles.horizontalHeadHandle, isHorizontalOrientation && isHeadPlacement), _defineProperty(_classnames3, styles.horizontalTailHandle, isHorizontalOrientation && !isHeadPlacement), _defineProperty(_classnames3, styles.verticalHeadHandle, isVerticalOrientation && isHeadPlacement), _defineProperty(_classnames3, styles.verticalTailHandle, isVerticalOrientation && !isHeadPlacement), _defineProperty(_classnames3, styles.minimalHandle, minimal), _defineProperty(_classnames3, styles.minimalVerticalHandle, minimal && isVerticalOrientation), _classnames3)),
-      "data-testid": dataTestId,
-      children: !minimal && /*#__PURE__*/jsx(Input, {
-        inputProps: {
-          'data-testid': 'handle-input'
-        },
-        readOnly: readOnly,
-        inputRef: inputRef,
-        onKeyDown: handleKeyDown,
-        onBlur: handleBlur,
-        classes: {
-          root: classNames(styles.inputRoot, hasError && styles.hasError)
-        },
-        value: readOnly ? displayFormatter(internal) : internal,
-        onChange: onChangeValue,
-        disableUnderline: true,
-        error: !(Number.isFinite(+internal) && +internal >= min && +internal <= max)
-      })
-    }), /*#__PURE__*/jsx(RightIcon, {
-      size: 16,
-      className: classNames(styles.rightArrow, (_classnames4 = {}, _defineProperty(_classnames4, styles.reversedRightArrow, isVerticalOrientation), _defineProperty(_classnames4, styles.isInvisible, isInsideArrowsVisible && isHeadPlacement || !isHeadPlacement && (arrowsOutsideConfig === null || arrowsOutsideConfig === void 0 ? void 0 : arrowsOutsideConfig.isRightArrowInvisible)), _classnames4)),
-      fill: "white"
-    })]
-  });
-};
-
-export { Handle };
-//# sourceMappingURL=Handle.js.map
+import o from"@babel/runtime/helpers/defineProperty";import i from"@babel/runtime/helpers/slicedToArray";import{useState as s,useRef as n,useEffect as t}from"react";import{Input as e}from"@material-ui/core";import r from"classnames";import"./styles/sliderStyles.js";import{useHandleStyles as c}from"./styles/handleStyles.js";import{getIsInputValueValid as a,getValidatedValue as l}from"./utils.js";import{HOVER_ARREA_WIDTH_BY_DIMENSION as m,HOVER_ARREA_HEIGHT as d,HORIZONTAL_ORIENTATION as u,VERTICAL_ORIENTATION as p,HEAD_PLACEMENT as v}from"./constants.js";import{LeftIcon as h,RightIcon as I}from"../../icons/iconParkIcons.js";import"../../icons/customIcons/icons/AddMessage.js";import"../../icons/customIcons/icons/Attention.js";import"../../icons/customIcons/icons/Collapse.js";import"../../icons/customIcons/icons/Dashboard.js";import"../../icons/customIcons/icons/Expand.js";import"../../icons/customIcons/icons/FolderClosed.js";import"../../icons/customIcons/icons/FolderClosedFilled.js";import"../../icons/customIcons/icons/FolderOpened.js";import"../../icons/customIcons/icons/GreaterOrEqual.js";import"../../icons/customIcons/icons/LessOrEqual.js";import"../../icons/customIcons/icons/Search.js";import"../../icons/customIcons/icons/Wellhub.js";import"../../icons/customIcons/icons/MultiRuler.js";import"../../icons/customIcons/icons/Checkbox.js";import"../../icons/customIcons/icons/CheckboxChecked.js";import"../../icons/customIcons/icons/CheckboxIndeterminate.js";import"../../icons/customIcons/icons/Radio.js";import"../../icons/customIcons/icons/RadioChecked.js";import"../../icons/customIcons/icons/SimulFrac.js";import"../../icons/customIcons/icons/ZipperFrac.js";import"../../icons/customIcons/icons/CautionFilled.js";import"../../icons/customIcons/icons/MoreApp.js";import"../../icons/customIcons/icons/Pad.js";import"../../icons/customIcons/icons/Gap.js";import{jsxs as j,jsx as f}from"react/jsx-runtime";var b=function(b){var A,R,g,C,F=b.value,H=b.orientation,w=b.placement,y=b.dimension,E=b.readOnly,N=b.onChange,k=b.min,x=b.max,T=b.displayFormatter,z=b.isInsideArrowsVisible,O=b.arrowsOutsideConfig,S=b.classes,M=b.minimal,G=b["data-testid"],P=s(!1),_=i(P,2),L=_[0],q=_[1],D=s(F),V=i(D,2),W=V[0],B=V[1],K=n(null),U=H===u,X=H===p,Z=w===v,J=c({distance:null==O?void 0:O.distance,minimal:M,hoverAreaHeight:U?m[y]:d,hoverAreaWidth:U?d:m[y]}),Q=function(o){if(!E){var i=Number(o);a(i)?N(l(i,k,x)):q(!0)}};return t((function(){B(F),L&&q(!1)}),[F]),j("div",{className:r(J.root,S.handleRoot,J[y],(A={},o(A,J.horizontalHeadRoot,U&&Z),o(A,J.horizontalTailRoot,U&&!Z),o(A,J.verticalHeadRoot,X&&Z),o(A,J.verticalTailRoot,X&&!Z),o(A,J.minimalHandleRoot,M),A)),children:[f(h,{size:16,className:r(J.leftArrow,(R={},o(R,J.reversedLeftArrow,X),o(R,J.isInvisible,z&&!Z||Z&&(null==O?void 0:O.isLeftArrowInvisible)),R)),fill:"white"}),f("div",{className:r(J.handle,S.handle,(g={},o(g,J.horizontalHeadHandle,U&&Z),o(g,J.horizontalTailHandle,U&&!Z),o(g,J.verticalHeadHandle,X&&Z),o(g,J.verticalTailHandle,X&&!Z),o(g,J.minimalHandle,M),o(g,J.minimalVerticalHandle,M&&X),g)),"data-testid":G,children:!M&&f(e,{inputProps:{"data-testid":"handle-input"},readOnly:E,inputRef:K,onKeyDown:function(o){var i=o.keyCode,s=o.target;13===i&&Q(s.value)},onBlur:function(o){var i=o.target;Q(i.value)},classes:{root:r(J.inputRoot,L&&J.hasError)},value:E?T(W):W,onChange:function(o){var i=o.target.value;(function(o){var i,s,n=null==o||null===(i=o.target)||void 0===i?void 0:i.value,t=n?parseFloat(n):0,e=t>=Number.MIN_SAFE_INTEGER&&t<Number.MAX_SAFE_INTEGER,r=null==o||null===(s=o.nativeEvent)||void 0===s?void 0:s.data,c=n.split(".").length-1;return!e||!(!r||"."===r||"-"===r||r>="0"&&r<="9")||c>1||"-"===r&&""===n})(o)||(B(i),L&&q(!1))},disableUnderline:!0,error:!(Number.isFinite(+W)&&+W>=k&&+W<=x)})}),f(I,{size:16,className:r(J.rightArrow,(C={},o(C,J.reversedRightArrow,X),o(C,J.isInvisible,z&&Z||!Z&&(null==O?void 0:O.isRightArrowInvisible)),C)),fill:"white"})]})};export{b as Handle};

package/components/AdvancedSlider/constants.js

@@ -1,23 +1 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-
-var _HOVER_ARREA_WIDTH_BY;
-var INPUT_VALUE_REGEX = /^[0-9.-]*$/;
-var VERTICAL_ORIENTATION = 'vertical';
-var HORIZONTAL_ORIENTATION = 'horizontal';
-var HEAD_PLACEMENT = 'head';
-var INPUT_WIDTH = 47;
-var INPUT_HEIGHT = 20;
-var MIN_ARROW_GAP = 12;
-var INNER_GAP = 24;
-var VERTICAL_MIN_GAP = 90;
-var HORIZONTAL_MIN_GAP = 48;
-var DIMENSION = {
-  small: 'small',
-  medium: 'medium',
-  large: 'large'
-};
-var HOVER_ARREA_WIDTH_BY_DIMENSION = (_HOVER_ARREA_WIDTH_BY = {}, _defineProperty(_HOVER_ARREA_WIDTH_BY, DIMENSION.small, 40), _defineProperty(_HOVER_ARREA_WIDTH_BY, DIMENSION.medium, 64), _defineProperty(_HOVER_ARREA_WIDTH_BY, DIMENSION.large, 120), _HOVER_ARREA_WIDTH_BY);
-var HOVER_ARREA_HEIGHT = 40;
-
-export { DIMENSION, HEAD_PLACEMENT, HORIZONTAL_MIN_GAP, HORIZONTAL_ORIENTATION, HOVER_ARREA_HEIGHT, HOVER_ARREA_WIDTH_BY_DIMENSION, INNER_GAP, INPUT_HEIGHT, INPUT_VALUE_REGEX, INPUT_WIDTH, MIN_ARROW_GAP, VERTICAL_MIN_GAP, VERTICAL_ORIENTATION };
-//# sourceMappingURL=constants.js.map
+import e from"@babel/runtime/helpers/defineProperty";var l,r=/^[0-9.-]*$/,m="vertical",a="horizontal",i="head",o=47,t=20,d=12,p=24,s=90,u=48,g={small:"small",medium:"medium",large:"large"},h=(e(l={},g.small,40),e(l,g.medium,64),e(l,g.large,120),l),n=40;export{g as DIMENSION,i as HEAD_PLACEMENT,u as HORIZONTAL_MIN_GAP,a as HORIZONTAL_ORIENTATION,n as HOVER_ARREA_HEIGHT,h as HOVER_ARREA_WIDTH_BY_DIMENSION,p as INNER_GAP,t as INPUT_HEIGHT,r as INPUT_VALUE_REGEX,o as INPUT_WIDTH,d as MIN_ARROW_GAP,s as VERTICAL_MIN_GAP,m as VERTICAL_ORIENTATION};

package/components/AdvancedSlider/utils.js

@@ -1,30 +1 @@
-import { INPUT_VALUE_REGEX } from './constants.js';
-
-var getValidatedValue = function getValidatedValue(value, min, max) {
-  return Math.min(Math.max(value, min), max);
-};
-var getIsInputValueValid = function getIsInputValueValid(inputValue) {
-  return INPUT_VALUE_REGEX.test(inputValue) && !Number.isNaN(Number(inputValue));
-};
-var getHoverAreaSize = function getHoverAreaSize(_ref) {
-  var inititalSize = _ref.inititalSize,
-    distance = _ref.distance;
-  return distance < 0 ? inititalSize - Math.abs(distance / 2) : inititalSize;
-};
-var getSizedControls = function getSizedControls(_ref2) {
-  var isHorizontalOrientation = _ref2.isHorizontalOrientation,
-    size = _ref2.size,
-    max = _ref2.max,
-    min = _ref2.min,
-    head = _ref2.head,
-    tail = _ref2.tail;
-  return {
-    headMaxWidth: isHorizontalOrientation ? size.width / (max - min) * (tail - min) : size.width,
-    tailMaxWidth: isHorizontalOrientation ? size.width / (max - min) * (max - head) : size.width,
-    headMaxHeight: !isHorizontalOrientation ? size.height / (max - min) * (tail - min) : size.height,
-    tailMaxHeight: !isHorizontalOrientation ? size.height / (max - min) * (max - head) : size.height
-  };
-};
-
-export { getHoverAreaSize, getIsInputValueValid, getSizedControls, getValidatedValue };
-//# sourceMappingURL=utils.js.map
+import{INPUT_VALUE_REGEX as t}from"./constants.js";var i=function(t,i,a){return Math.min(Math.max(t,i),a)},a=function(i){return t.test(i)&&!Number.isNaN(Number(i))},h=function(t){var i=t.inititalSize,a=t.distance;return a<0?i-Math.abs(a/2):i},e=function(t){var i=t.isHorizontalOrientation,a=t.size,h=t.max,e=t.min,n=t.head,r=t.tail;return{headMaxWidth:i?a.width/(h-e)*(r-e):a.width,tailMaxWidth:i?a.width/(h-e)*(h-n):a.width,headMaxHeight:i?a.height:a.height/(h-e)*(r-e),tailMaxHeight:i?a.height:a.height/(h-e)*(h-n)}};export{h as getHoverAreaSize,a as getIsInputValueValid,e as getSizedControls,i as getValidatedValue};