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

Completely unstyled, headless and accessible React UI components.

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