@styleless-ui/react/InputSlider/InputSlider.js

Completely unstyled, headless and accessible React UI components.

"use strict";var __assign=this&&this.__assign||function(){return __assign=Object.assign||function(e){for(var t,n=1,a=arguments.length;n<a;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},__assign.apply(this,arguments)},__createBinding=this&&this.__createBinding||(Object.create?function(e,t,n,a){void 0===a&&(a=n);var r=Object.getOwnPropertyDescriptor(t,n);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,a,r)}:function(e,t,n,a){void 0===a&&(a=n),e[a]=t[n]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&__createBinding(t,e,n);return __setModuleDefault(t,e),t},__rest=this&&this.__rest||function(e,t){var n={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&t.indexOf(a)<0&&(n[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(a=Object.getOwnPropertySymbols(e);r<a.length;r++)t.indexOf(a[r])<0&&Object.prototype.propertyIsEnumerable.call(e,a[r])&&(n[a[r]]=e[a[r]])}return n},__spreadArray=this&&this.__spreadArray||function(e,t,n){if(n||2===arguments.length)for(var a,r=0,i=t.length;r<i;r++)!a&&r in t||(a||(a=Array.prototype.slice.call(t,0,r)),a[r]=t[r]);return e.concat(a||Array.prototype.slice.call(t))};Object.defineProperty(exports,"__esModule",{value:!0});var jsx_runtime_1=require("react/jsx-runtime"),React=__importStar(require("react")),internals_1=require("../internals"),utils_1=require("../utils"),Slots=__importStar(require("./slots")),getLabelInfo=function(e){var t={};if("screenReaderLabel"in e)t.srOnlyLabel=e.screenReaderLabel;else{if(!("labelledBy"in e))throw new Error(["[StylelessUI][InputSlider]: Invalid `label` provided.","Each `label` property must be in shape of `{ screenReaderLabel: string; } | { labelledBy: string; }`"].join("\n"));t.labelledBy=e.labelledBy}return t},findNearestValue=function(e,t){var n=Math.floor(e.length/2),a=1/0,r=t,i=function(n){var i=e[n],l=Math.abs(t-i);a>l&&(a=l,r=i)};if(e[n]<t)for(var l=n;l<e.length;l++)i(l);else for(l=0;l<=n;l++)i(l);return r},getRelativeValue=function(e,t,n,a,r){var i=r.max,l=r.step,s=(0,utils_1.remap)(e,0,t,0,i);if("number"==typeof l&&l&&(s=Math.floor(s/l)*l),"snap"===l){var u=a.sort().map((function(e){return e.length*i/100}));s=findNearestValue(u,s)}var o=n.minValue,d=n.maxValue;return(0,utils_1.clamp)(s,o,d)},getNearestThumb=function(e,t){var n=t.left,a=t.right,r=Math.abs(n.value-e);return a?r<=Math.abs(a.value-e)?__assign(__assign({},n),{index:0}):__assign(__assign({},a),{index:1}):__assign(__assign({},n),{index:0})},InputSliderBase=function(e,t){var n,a,r,i,l=e.max,s=e.min,u=e.step,o=e.stops,d=e.onChange,c=e.onClick,_=e.setThumbValueText,f=e.renderThumbValueText,v=e.value,h=e.defaultValue,g=e.label,m=e.classes,p=e.style,b=e.orientation,y=void 0===b?"horizontal":b,x=e.multiThumb,S=void 0!==x&&x,T=e.disabled,R=void 0!==T&&T,w=__rest(e,["max","min","step","stops","onChange","onClick","setThumbValueText","renderThumbValueText","value","defaultValue","label","classes","style","orientation","multiThumb","disabled"]);if(void 0===s)throw new Error("[StylelessUI][InputSlider]: The `min` property is missing.");if(void 0===l)throw new Error("[StylelessUI][InputSlider]: The `max` property is missing.");if(l<s)throw new Error("[StylelessUI][InputSlider]: The `min` property must be less than or equal to `max` property.");if(void 0===o&&"snap"===u)throw new Error('[StylelessUI][InputSlider]: When using `step="snap"` you must also provide a valid `stops` property.');var I=(0,utils_1.useControlledProp)(v,h,S?[s,l]:s),j=I[0],V=I[1];if(S&&!Array.isArray(j))throw new Error("[StylelessUI][InputSlider]: The `value` and `defaultValue` should be an array of exactly two numbers when `multiThumb={true}.`");if(!S&&"number"!=typeof j)throw new Error("[StylelessUI][InputSlider]: The `value` and `defaultValue` should be a number when `multiThumb={false}.`");if(S&&!Array.isArray(g))throw new Error("[StylelessUI][InputSlider]: The `label` property should be an array of exactly two labels when `multiThumb={true}.`");var z=React.useRef(void 0),O=function(){if(Array.isArray(j)){var e=(0,utils_1.clamp)(j[0],s,l),t=(0,utils_1.clamp)(j[1],s,l);if(e>t){if(z.current)return z.current;throw new Error("[StylelessUI][InputSlider]: Invalid `value` provided! (`value[0] > value[1]`)")}return z.current=[e,t],z.current}return(0,utils_1.clamp)(j,s,l)}(),E=React.useMemo((function(){var e;return"number"==typeof o?0===o?[]:Array(o+1).fill({length:100/o}).map((function(e,t){return{length:e.length*t}})):null!==(e=null==o?void 0:o.reduce((function(e,t){var n=t.value,a=t.label;return __spreadArray(__spreadArray([],e,!0),[{label:a,length:100*(0,utils_1.inLerp)(0,l,n)}],!1)}),[]))&&void 0!==e?e:[]}),[o,l]),B=(0,utils_1.useIsMounted)(),K=React.useRef(null),L=React.useState(!1),M=L[0],k=L[1],N=React.useState(!0),U=N[0],D=N[1],P=React.useState({left:!1,right:!1}),C=P[0],A=P[1],F=React.useRef(null),X=(0,utils_1.useForkedRefs)(t,F),q=(0,utils_1.useDirection)(F),W=(0,utils_1.useEventCallback)((function(e){var t,n="rtl"===q,a=n?[internals_1.SystemKeys.LEFT,"horizontal"===y?internals_1.SystemKeys.UP:internals_1.SystemKeys.DOWN].includes(e.key):[internals_1.SystemKeys.RIGHT,"horizontal"===y?internals_1.SystemKeys.UP:internals_1.SystemKeys.DOWN].includes(e.key),r=n?[internals_1.SystemKeys.RIGHT,"horizontal"===y?internals_1.SystemKeys.DOWN:internals_1.SystemKeys.UP].includes(e.key):[internals_1.SystemKeys.LEFT,"horizontal"===y?internals_1.SystemKeys.DOWN:internals_1.SystemKeys.UP].includes(e.key);if(a||r){e.preventDefault();var i=ye(e.currentTarget),s=xe(i.index),o=xe((i.index+1)%2);K.current=null,s.stateRef.current.zIndex=2,o.stateRef.current.zIndex=1;var d,c=s.minValue,_=s.maxValue;if(void 0===u)d=s.value+(a?1:r?-1:0);else if("snap"===u){var f=E.map((function(e){return e.length*l/100})),v=f.indexOf(s.value);d=null!==(t=f[(0,utils_1.clamp)(a?v+1:r?v-1:0,0,f.length-1)])&&void 0!==t?t:f[0]}else d=s.value+(a?u:r?-u:0);var h=(0,utils_1.clamp)(d,c,_);if(S)j[i.index]!==h&&be(0===i.index?[h,O[1]]:[O[0],h]);else be(h)}})),Y=(0,utils_1.useButtonBase)({disabled:R,onKeyDown:W}),G=Y.handleBlur,H=Y.handleButtonRef,J=Y.handleFocus,Q=Y.handleKeyDown,Z=Y.handleKeyUp,$=Y.isFocusedVisible,ee=(0,utils_1.useButtonBase)({disabled:R,onKeyDown:W}),te=ee.handleBlur,ne=ee.handleButtonRef,ae=ee.handleFocus,re=ee.handleKeyDown,ie=ee.handleKeyUp,le=ee.isFocusedVisible,se=React.useRef(null),ue=React.useRef(null),oe=(0,utils_1.useForkedRefs)(se,H),de=(0,utils_1.useForkedRefs)(ue,ne),ce=React.useRef({active:!1,zIndex:1}),_e=React.useRef({active:!1,zIndex:1});React.useEffect((function(){if($&&f)return A((function(e){return __assign(__assign({},e),{left:!0})})),function(){A((function(e){return __assign(__assign({},e),{left:!1})}))}}),[$,f]),React.useEffect((function(){if(le&&f)return A((function(e){return __assign(__assign({},e),{right:!0})})),function(){A((function(e){return __assign(__assign({},e),{right:!1})}))}}),[le,f]);var fe,ve,he,ge,me=(fe=S?O[0]:O,ve=S?O[1]:l,{left:{value:fe,minValue:s,maxValue:ve,ref:oe,stateRef:ce,label:getLabelInfo(S?g[0]:g)},right:{value:ve,minValue:fe,maxValue:l,ref:de,stateRef:_e,label:S?getLabelInfo(g[1]):{}}}),pe=(he=100*(0,utils_1.inLerp)(0,l,me.left.value),ge=100*(0,utils_1.inLerp)(l,0,me.right.value),{leftThumb:he,rightThumb:ge,range:{start:S?he:0,end:S?ge:100-he}}),be=function(e){!R&&B()&&(V(e),null==d||d(e,K.current))},ye=function(e){return{element:e,index:e===se.current?0:e===ue.current?1:0}},xe=function(e){return 0===e?me.left:me.right},Se=function(e){if(F.current){var t=ye(e.currentTarget);K.current=t,k(!0),D(!1);var n=xe(t.index),a=xe((t.index+1)%2),r=n.stateRef.current,i=a.stateRef.current;r.active=!0,r.zIndex=2,i.zIndex=1,A((function(e){var n;return __assign(__assign({},e),((n={})[0===t.index?"left":"right"]=!0,n))}))}},Te=function(){if(K.current){var e=K.current,t=xe(e.index).stateRef.current;t.active?(k(!1),setTimeout((function(){return D(!0)}),10),t.active=!1,K.current=null,A((function(t){var n;return __assign(__assign({},t),((n={})[0===e.index?"left":"right"]=!1,n))}))):K.current=null}},Re=function(e){var t,n;if(F.current&&K.current){var a=K.current,r=xe(a.index);if(r.stateRef.current.active){e.cancelable&&(e.preventDefault(),e.stopPropagation());var i="touchstart"===e.type?null!==(n=null===(t=e.touches[0])||void 0===t?void 0:t["horizontal"===y?"clientX":"clientY"])&&void 0!==n?n:0:e["horizontal"===y?"clientX":"clientY"],s=(0,utils_1.getBoundingClientRect)(F.current),o="horizontal"===y?s.left:s.top,d="horizontal"===y?s.width:s.height;i-=o,i=(0,utils_1.clamp)(i,0,d);var c=getRelativeValue(i,d,r,E,{max:l,step:u});if(S)j[a.index]!==c&&be(0===a.index?[c,O[1]]:[O[0],c]);else be(c)}}},we=__assign({position:"absolute",transform:"horizontal"===y?"translateX(-50%)":"translateY(-50%)",zIndex:me.left.stateRef.current.zIndex},{horizontal:__assign({},{ltr:{left:"".concat(pe.leftThumb,"%")},rtl:{right:"".concat(pe.leftThumb,"%")}}[null!=q?q:"ltr"]),vertical:{top:"".concat(pe.leftThumb,"%")}}[y]),Ie=__assign({position:"absolute",transform:"horizontal"===y?"translateX(50%)":"translateY(50%)",zIndex:me.right.stateRef.current.zIndex},{horizontal:__assign({},{ltr:{right:"".concat(pe.rightThumb,"%")},rtl:{left:"".concat(pe.rightThumb,"%")}}[null!=q?q:"ltr"]),vertical:{bottom:"".concat(pe.rightThumb,"%")}}[y]),je=__assign({position:"absolute"},{horizontal:__assign({},{ltr:{left:"".concat(pe.range.start,"%"),right:"".concat(pe.range.end,"%")},rtl:{right:"".concat(pe.range.start,"%"),left:"".concat(pe.range.end,"%")}}[null!=q?q:"ltr"]),vertical:{top:"".concat(pe.range.start,"%"),bottom:"".concat(pe.range.end,"%")}}[y]),Ve=__assign({position:"relative"},{horizontal:{width:"100%"},vertical:{height:"100%"}}[y]),ze={role:"slider","aria-orientation":y,onTouchStart:Se,onMouseDown:Se},Oe=(0,utils_1.useEventCallback)((function(e){var t=ye(e.currentTarget);xe(t.index).stateRef.current.active||A((function(e){var n;return __assign(__assign({},e),((n={})[0===t.index?"left":"right"]=!0,n))}))})),Ee=(0,utils_1.useEventCallback)((function(e){var t=ye(e.currentTarget);xe(t.index).stateRef.current.active||A((function(e){var n;return __assign(__assign({},e),((n={})[0===t.index?"left":"right"]=!1,n))}))})),Be=(0,utils_1.useEventCallback)((function(e){var t;e.stopPropagation();var n=e.currentTarget.parentElement;if(n){var a=n.getAttribute("data-segment-index");if(a){var r=Number(a),i=null===(t=E[r])||void 0===t?void 0:t.length;if(void 0!==i){var l=getNearestThumb(i,{left:xe(0),right:S?xe(1):null}),s=l.minValue,u=l.maxValue,o=(0,utils_1.clamp)(i,s,u);if(S)j[l.index]!==o&&be(0===l.index?[o,O[1]]:[O[0],o]);else be(o)}}}})),Ke=__assign(__assign({},ze),{"aria-label":me.left.label.srOnlyLabel,"aria-labelledby":me.left.label.labelledBy,"aria-valuetext":null==_?void 0:_(me.left.value),"aria-valuenow":me.left.value,"aria-valuemin":me.left.minValue,"aria-valuemax":me.left.maxValue,style:__assign(__assign({},we),internals_1.disableUserSelectCSSProperties),ref:me.left.ref,onBlur:G,onFocus:J,onKeyDown:Q,onKeyUp:Z,onMouseEnter:f?Oe:void 0,onMouseLeave:f?Ee:void 0}),Le=S?__assign(__assign({},ze),{"aria-label":me.right.label.srOnlyLabel,"aria-labelledby":me.right.label.labelledBy,"aria-valuetext":null==_?void 0:_(me.right.value),"aria-valuenow":me.right.value,"aria-valuemin":me.right.minValue,"aria-valuemax":me.right.maxValue,style:__assign(__assign({},Ie),internals_1.disableUserSelectCSSProperties),ref:me.right.ref,onBlur:te,onFocus:ae,onKeyDown:re,onKeyUp:ie,onMouseEnter:f?Oe:void 0,onMouseLeave:f?Ee:void 0}):null,Me="function"==typeof m?m({disabled:R,orientation:y,leadingThumbState:{active:0===(null===(n=K.current)||void 0===n?void 0:n.index),focusedVisible:$},trailingThumbState:{active:1===(null===(a=K.current)||void 0===a?void 0:a.index),focusedVisible:le}}):m;return"undefined"!=typeof document&&((0,utils_1.useEventListener)({target:document,eventType:"touchend",handler:Te,options:{passive:!1}}),(0,utils_1.useEventListener)({target:document,eventType:"mouseup",handler:Te,options:{passive:!1}}),(0,utils_1.useEventListener)({target:document,eventType:"touchmove",handler:Re,options:{passive:!1}},M),(0,utils_1.useEventListener)({target:document,eventType:"mousemove",handler:Re,options:{passive:!1}},M)),(0,jsx_runtime_1.jsxs)("div",__assign({},w,{ref:X,style:__assign(__assign({},p),{position:"relative"}),className:null==Me?void 0:Me.root,onClick:function(e){if(U&&!R&&B()&&F.current){var t="horizontal"===y?e.clientX:e.clientY,n=(0,utils_1.getBoundingClientRect)(F.current),a="horizontal"===y?n.left:n.top,r="horizontal"===y?n.width:n.height;t-=a,t=(0,utils_1.clamp)(t,0,r);var i=getNearestThumb((0,utils_1.remap)(t,0,r,0,l),{left:xe(0),right:S?xe(1):null}),s=getRelativeValue(t,r,i,E,{max:l,step:u});if(S)j[i.index]!==s&&be(0===i.index?[s,O[1]]:[O[0],s]);else be(s);null==c||c(e)}},"data-slot":Slots.Root,"aria-orientation":y,"aria-disabled":R},{children:[(0,jsx_runtime_1.jsxs)("div",__assign({"aria-hidden":"true",className:null==Me?void 0:Me.track,"data-slot":Slots.Track,style:Ve},{children:[(0,jsx_runtime_1.jsx)("div",{"aria-hidden":"true",className:null==Me?void 0:Me.range,"data-slot":Slots.Range,style:je}),!!E.length&&(0,jsx_runtime_1.jsx)("div",__assign({"aria-hidden":"true",className:null==Me?void 0:Me.segments,"data-slot":Slots.Segments},{children:E.map((function(e,t){var n=e.length,a=e.label;return(0,jsx_runtime_1.jsxs)("div",__assign({className:null==Me?void 0:Me.segment,"data-slot":Slots.Segment,"data-segment-index":t,style:__assign({position:"absolute"},{horizontal:__assign({},{ltr:{left:"".concat(n,"%")},rtl:{right:"".concat(n,"%")}}[null!=q?q:"ltr"]),vertical:{top:"".concat(n,"%")}}[y])},{children:[(0,jsx_runtime_1.jsx)("div",{style:__assign({position:"absolute"},{horizontal:__assign({},{ltr:{left:0,transform:"translateX(-50%)"},rtl:{right:0,transform:"translateX(50%)"}}[null!=q?q:"ltr"]),vertical:{top:0,transform:"translateY(-50%)"}}[y]),className:null==Me?void 0:Me.segmentMark,"data-slot":Slots.SegmentMark}),(0,jsx_runtime_1.jsx)("div",__assign({className:null==Me?void 0:Me.segmentLabel,"data-slot":Slots.SegmentLabel,onClick:Be},{children:a}))]}),String(n)+String(t)+String(a))}))}))]})),(0,jsx_runtime_1.jsx)("div",__assign({},Ke,{tabIndex:0,className:[null==Me?void 0:Me.thumb,null==Me?void 0:Me.leadingThumb].filter(Boolean).join(" "),"data-thumb-index":"0","data-slot":Slots.Thumb,"data-active":0===(null===(r=K.current)||void 0===r?void 0:r.index)?"":void 0,"data-focus-visible":$?"":void 0},{children:(0,jsx_runtime_1.jsx)("div",__assign({"aria-hidden":"true","data-slot":Slots.ThumbText},{children:null==f?void 0:f(me.left.value,C.left,Ke["aria-valuetext"])}))})),S&&(0,jsx_runtime_1.jsx)("div",__assign({},Le,{tabIndex:0,className:[null==Me?void 0:Me.thumb,null==Me?void 0:Me.trailingThumb].filter(Boolean).join(" "),"data-thumb-index":"1","data-slot":Slots.Thumb,"data-active":1===(null===(i=K.current)||void 0===i?void 0:i.index)?"":void 0,"data-focus-visible":le?"":void 0},{children:(0,jsx_runtime_1.jsx)("div",__assign({"aria-hidden":"true","data-slot":Slots.ThumbText},{children:null==f?void 0:f(me.right.value,C.right,Le["aria-valuetext"])}))}))]}))},InputSlider=(0,utils_1.componentWithForwardedRef)(InputSliderBase);exports.default=InputSlider;