1mpacto-react-ui 2.0.20 → 2.0.21

package/dist/components/Textarea/TextareaFloatingInner.mjs

@@ -1,69 +1,64 @@
 import { jsxs as c, jsx as u } from "react/jsx-runtime";
-import l from "react";
-import a from "./TextareaFloatingInner.module.scss.mjs";
-import { useMergeRefs as D } from "../../hooks/useMergeRefs.mjs";
-import { useIsomorphicLayoutEffect as G } from "../../hooks/useCombinedResizeObserver.mjs";
-import { configTextareaFloatingInner as J } from "./TextareaFloatingInner.config.mjs";
-const K = l.forwardRef((n, v) => {
+import s from "react";
+import e from "./TextareaFloatingInner.module.scss.mjs";
+import { useMergeRefs as M } from "../../hooks/useMergeRefs.mjs";
+import { useIsomorphicLayoutEffect as P } from "../../hooks/useCombinedResizeObserver.mjs";
+import { configTextareaFloatingInner as A } from "./TextareaFloatingInner.config.mjs";
+const D = s.forwardRef((n, y) => {
   const {
-    isRequired: H,
-    classNameContainer: I,
-    className: L,
-    classNameLabel: T,
-    classNameLabelError: F,
+    isRequired: N,
+    classNameContainer: R,
+    className: v,
+    classNameLabel: H,
+    classNameLabelError: I,
     name: f,
     id: m,
     label: d,
-    error: r,
-    height: w,
+    error: l,
+    height: L,
     minHeight: h = 94,
-    maxHeight: E = 150,
-    style: S,
-    sizeInput: V = "medium",
-    translateLabel: Y = 20,
-    autoTranslateLabel: p = !1,
-    ...i
-  } = n, s = l.useRef(null), j = D(s, v), g = l.useRef(null), z = { ...S ?? {}, maxHeight: E, height: w ?? h, minHeight: h }, [x, b] = l.useState(!1), [B, $] = l.useState(!1), [k, q] = l.useState(Y), y = () => {
-    var e;
-    ["", void 0, null].includes(i.value) || ["", void 0, null].includes((e = s.current) == null ? void 0 : e.value) ? ($(!1), p && setTimeout(() => {
-      var N, R;
-      const t = ((N = s.current) == null ? void 0 : N.offsetHeight) ?? 0, P = ((R = g.current) == null ? void 0 : R.offsetHeight) ?? 0, A = (t - P) / 2;
-      q(A);
-    }, 100)) : $(!0);
-  }, C = function(e) {
-    var t;
-    b(!0), y(), (t = n.onFocus) == null || t.call(n, e);
-  }, M = function(e) {
-    var t;
-    b(!1), (t = n.onBlur) == null || t.call(n, e);
-  }, o = function(e) {
-    y();
-    const t = (e == null ? void 0 : e.target) ?? s.current;
-    t.style.height = "0px", t.style.height = t.scrollHeight + "px";
+    maxHeight: T = 150,
+    style: F,
+    sizeInput: w = "medium",
+    translateLabel: E = 20,
+    autoTranslateLabel: S = !1,
+    ...o
+  } = n, t = s.useRef(null), V = M(t, y), g = s.useRef(null), Y = { ...F ?? {}, maxHeight: T, height: L ?? h, minHeight: h }, [p, x] = s.useState(!1), [j, b] = s.useState(!1), [z, B] = s.useState(E), $ = () => {
+    ["", void 0, null].includes(o.value) || ["", void 0, null].includes(t.current?.value) ? (b(!1), S && setTimeout(() => {
+      const a = t.current?.offsetHeight ?? 0, r = g.current?.offsetHeight ?? 0, C = (a - r) / 2;
+      B(C);
+    }, 100)) : b(!0);
+  }, k = function(a) {
+    x(!0), $(), n.onFocus?.(a);
+  }, q = function(a) {
+    x(!1), n.onBlur?.(a);
+  }, i = function(a) {
+    $();
+    const r = a?.target ?? t.current;
+    r.style.height = "0px", r.style.height = r.scrollHeight + "px";
   };
-  return G(() => (x && s.current ? s.current.addEventListener("input", o) : o(), () => {
-    var e;
-    (e = s.current) == null || e.removeEventListener("input", o);
-  }), [x]), /* @__PURE__ */ c(
+  return P(() => (p && t.current ? t.current.addEventListener("input", i) : i(), () => {
+    t.current?.removeEventListener("input", i);
+  }), [p]), /* @__PURE__ */ c(
     "div",
     {
-      className: `${a.container} 
-      ${J.size[V]} 
-      ${I ?? ""}`,
+      className: `${e.container} 
+      ${A.size[w]} 
+      ${R ?? ""}`,
       children: [
-        /* @__PURE__ */ c("div", { className: `${a["container-textarea"]}`, children: [
+        /* @__PURE__ */ c("div", { className: `${e["container-textarea"]}`, children: [
           /* @__PURE__ */ u(
             "textarea",
             {
               id: m ?? f,
-              className: `${B ? "" : a["placeholder-shown"]} ${r ? a.error : ""} 
-          ${a.textarea} 
-          ${L ?? ""}`,
-              ref: j,
-              style: z,
-              ...i,
-              onFocus: C,
-              onBlur: M
+              className: `${j ? "" : e["placeholder-shown"]} ${l ? e.error : ""} 
+          ${e.textarea} 
+          ${v ?? ""}`,
+              ref: V,
+              style: Y,
+              ...o,
+              onFocus: k,
+              onBlur: q
             }
           ),
           d && /* @__PURE__ */ c(
@@ -72,30 +67,30 @@ const K = l.forwardRef((n, v) => {
               htmlFor: m ?? f,
               ref: g,
               style: {
-                transform: `translateY(${k}px)`
+                transform: `translateY(${z}px)`
               },
-              className: `${a.label} ${T ?? ""}`,
+              className: `${e.label} ${H ?? ""}`,
               children: [
                 d,
                 " ",
-                H && /* @__PURE__ */ u("span", { className: "iru-text-laba-red-08", children: "*" })
+                N && /* @__PURE__ */ u("span", { className: "iru-text-laba-red-08", children: "*" })
               ]
             }
           )
         ] }),
-        r && /* @__PURE__ */ u(
+        l && /* @__PURE__ */ u(
           "label",
           {
-            className: `${a["label-error"]} 
-          ${i.disabled ? a.disabled : ""} ${F ?? ""}`,
-            children: r
+            className: `${e["label-error"]} 
+          ${o.disabled ? e.disabled : ""} ${I ?? ""}`,
+            children: l
           }
         )
       ]
     }
   );
 });
-K.displayName = "TextareaFloatingInner";
+D.displayName = "TextareaFloatingInner";
 export {
-  K as default
+  D as default
 };

package/dist/components/Textarea/TextareaInnerLabel.cjs

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),c=require("react"),_=require("../../hooks/useCombinedResizeObserver.cjs"),w=require("../../hooks/useMergeRefs.cjs"),a=require("./TextareaInnerLabel.module.scss.cjs"),z=require("./TextareaInnerLabel.config.cjs"),x=c.forwardRef((n,g)=>{const{isRequired:$,classNameContainer:y,className:R,classNameLabel:L,classNameLabelError:N,name:o,id:d,label:f,error:l,height:j,minHeight:b=94,maxHeight:v=150,style:I,sizeInput:q="large",...i}=n,s=c.useRef(null),T=w.useMergeRefs(s,g),E={...I??{},maxHeight:v,height:j??b,minHeight:b},[m,h]=c.useState(!1),M=function(e){var t;h(!0),(t=n.onFocus)==null||t.call(n,e)},S=function(e){var t;h(!1),(t=n.onBlur)==null||t.call(n,e)},u=function(e){const t=(e==null?void 0:e.target)??s.current;t.style.height="0px",t.style.height=t.scrollHeight+"px"};return _.useIsomorphicLayoutEffect(()=>(m&&s.current?s.current.addEventListener("input",u):u(),()=>{var e;(e=s.current)==null||e.removeEventListener("input",u)}),[m]),r.jsxs("div",{className:`${a.default.container} 
-      ${z.configTextareaInnerLabel.size[q]} 
-      ${y??""}`,children:[r.jsxs("div",{className:`${a.default["container-textarea"]}`,children:[r.jsx("textarea",{id:d??o,className:` ${l?a.default.error:""} 
-          ${a.default.textarea} 
-          ${R??""}`,ref:T,style:E,...i,onFocus:M,onBlur:S}),f&&r.jsxs("label",{htmlFor:d??o,className:`${a.default.label} ${i.disabled?a.default.disabled:""} ${L??""}`,children:[f," ",$&&r.jsx("span",{children:"*"})]})]}),l&&r.jsx("label",{className:`${a.default["label-error"]} 
-          ${i.disabled?a.default.disabled:""} ${N??""}`,children:l})]})});x.displayName="TextareaInnerLabel";exports.default=x;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),c=require("react"),S=require("../../hooks/useCombinedResizeObserver.cjs"),_=require("../../hooks/useMergeRefs.cjs"),e=require("./TextareaInnerLabel.module.scss.cjs"),w=require("./TextareaInnerLabel.config.cjs"),x=c.forwardRef((s,g)=>{const{isRequired:$,classNameContainer:p,className:y,classNameLabel:R,classNameLabelError:L,name:o,id:d,label:f,error:n,height:N,minHeight:b=94,maxHeight:j=150,style:v,sizeInput:I="large",...l}=s,a=c.useRef(null),q=_.useMergeRefs(a,g),T={...v??{},maxHeight:j,height:N??b,minHeight:b},[m,h]=c.useState(!1),E=function(r){h(!0),s.onFocus?.(r)},M=function(r){h(!1),s.onBlur?.(r)},i=function(r){const u=r?.target??a.current;u.style.height="0px",u.style.height=u.scrollHeight+"px"};return S.useIsomorphicLayoutEffect(()=>(m&&a.current?a.current.addEventListener("input",i):i(),()=>{a.current?.removeEventListener("input",i)}),[m]),t.jsxs("div",{className:`${e.default.container} 
+      ${w.configTextareaInnerLabel.size[I]} 
+      ${p??""}`,children:[t.jsxs("div",{className:`${e.default["container-textarea"]}`,children:[t.jsx("textarea",{id:d??o,className:` ${n?e.default.error:""} 
+          ${e.default.textarea} 
+          ${y??""}`,ref:q,style:T,...l,onFocus:E,onBlur:M}),f&&t.jsxs("label",{htmlFor:d??o,className:`${e.default.label} ${l.disabled?e.default.disabled:""} ${R??""}`,children:[f," ",$&&t.jsx("span",{children:"*"})]})]}),n&&t.jsx("label",{className:`${e.default["label-error"]} 
+          ${l.disabled?e.default.disabled:""} ${L??""}`,children:n})]})});x.displayName="TextareaInnerLabel";exports.default=x;

package/dist/components/Textarea/TextareaInnerLabel.mjs

@@ -1,87 +1,84 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { jsxs as o, jsx as c } from "react/jsx-runtime";
 import m from "react";
-import { useIsomorphicLayoutEffect as z } from "../../hooks/useCombinedResizeObserver.mjs";
-import { useMergeRefs as B } from "../../hooks/useMergeRefs.mjs";
-import a from "./TextareaInnerLabel.module.scss.mjs";
-import { configTextareaInnerLabel as S } from "./TextareaInnerLabel.config.mjs";
-const p = m.forwardRef((r, x) => {
+import { useIsomorphicLayoutEffect as j } from "../../hooks/useCombinedResizeObserver.mjs";
+import { useMergeRefs as z } from "../../hooks/useMergeRefs.mjs";
+import e from "./TextareaInnerLabel.module.scss.mjs";
+import { configTextareaInnerLabel as B } from "./TextareaInnerLabel.config.mjs";
+const S = m.forwardRef((a, g) => {
   const {
-    isRequired: $,
-    classNameContainer: y,
-    className: N,
-    classNameLabel: L,
-    classNameLabelError: R,
+    isRequired: x,
+    classNameContainer: $,
+    className: y,
+    classNameLabel: N,
+    classNameLabelError: L,
     name: u,
     id: d,
     label: f,
-    error: l,
-    height: I,
+    error: n,
+    height: R,
     minHeight: h = 94,
-    maxHeight: v = 150,
-    style: E,
-    sizeInput: T = "large",
+    maxHeight: I = 150,
+    style: v,
+    sizeInput: E = "large",
     ...s
-  } = r, n = m.useRef(null), w = B(n, x), F = { ...E ?? {}, maxHeight: v, height: I ?? h, minHeight: h }, [b, g] = m.useState(!1), H = function(e) {
-    var t;
-    g(!0), (t = r.onFocus) == null || t.call(r, e);
-  }, j = function(e) {
-    var t;
-    g(!1), (t = r.onBlur) == null || t.call(r, e);
-  }, i = function(e) {
-    const t = (e == null ? void 0 : e.target) ?? n.current;
-    t.style.height = "0px", t.style.height = t.scrollHeight + "px";
+  } = a, t = m.useRef(null), T = z(t, g), w = { ...v ?? {}, maxHeight: I, height: R ?? h, minHeight: h }, [p, b] = m.useState(!1), F = function(r) {
+    b(!0), a.onFocus?.(r);
+  }, H = function(r) {
+    b(!1), a.onBlur?.(r);
+  }, l = function(r) {
+    const i = r?.target ?? t.current;
+    i.style.height = "0px", i.style.height = i.scrollHeight + "px";
   };
-  return z(() => (b && n.current ? n.current.addEventListener("input", i) : i(), () => {
-    var e;
-    (e = n.current) == null || e.removeEventListener("input", i);
-  }), [b]), /* @__PURE__ */ c(
+  return j(() => (p && t.current ? t.current.addEventListener("input", l) : l(), () => {
+    t.current?.removeEventListener("input", l);
+  }), [p]), /* @__PURE__ */ o(
     "div",
     {
-      className: `${a.container} 
-      ${S.size[T]} 
-      ${y ?? ""}`,
+      className: `${e.container} 
+      ${B.size[E]} 
+      ${$ ?? ""}`,
       children: [
-        /* @__PURE__ */ c("div", { className: `${a["container-textarea"]}`, children: [
-          /* @__PURE__ */ o(
+        /* @__PURE__ */ o("div", { className: `${e["container-textarea"]}`, children: [
+          /* @__PURE__ */ c(
             "textarea",
             {
               id: d ?? u,
-              className: ` ${l ? a.error : ""} 
-          ${a.textarea} 
-          ${N ?? ""}`,
-              ref: w,
-              style: F,
+              className: ` ${n ? e.error : ""} 
+          ${e.textarea} 
+          ${y ?? ""}`,
+              ref: T,
+              style: w,
               ...s,
-              onFocus: H,
-              onBlur: j
+              onFocus: F,
+              onBlur: H
             }
           ),
-          f && /* @__PURE__ */ c(
+          f && /* @__PURE__ */ o(
             "label",
             {
               htmlFor: d ?? u,
-              className: `${a.label} ${s.disabled ? a.disabled : ""} ${L ?? ""}`,
+              className: `${e.label} ${s.disabled ? e.disabled : ""} ${N ?? ""}`,
               children: [
                 f,
                 " ",
-                $ && /* @__PURE__ */ o("span", { children: "*" })
+                x && /* @__PURE__ */ c("span", { children: "*" })
               ]
             }
           )
         ] }),
-        l && /* @__PURE__ */ o(
+        n && /* @__PURE__ */ c(
           "label",
           {
-            className: `${a["label-error"]} 
-          ${s.disabled ? a.disabled : ""} ${R ?? ""}`,
-            children: l
+            className: `${e["label-error"]} 
+          ${s.disabled ? e.disabled : ""} ${L ?? ""}`,
+            children: n
           }
         )
       ]
     }
   );
 });
-p.displayName = "TextareaInnerLabel";
+S.displayName = "TextareaInnerLabel";
 export {
-  p as default
+  S as default
 };

package/dist/components/TimeRange/TimeRange.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),C=require("react"),A=require("../Popover/Popover.cjs"),i=require("./TimeRange.module.scss.cjs"),H=require("../Button/Button.cjs"),$=(t,o=2)=>String(t).padStart(o,"0"),M=(t,o)=>t[0][0]&&t[0][1]&&t[1][0]&&t[1][1]?`${t[0][0]}:${t[0][1]} - ${t[1][0]}:${t[1][1]}`:f[o]["Select Time"],f={"en-US":{to:"to",Hour:"Hour",Minute:"Minute","Select Time":"Select Time",Reset:"Reset",Apply:"Apply"},"id-ID":{to:"to",Hour:"Jam",Minute:"Menit","Select Time":"Pilih Waktu",Reset:"Reset",Apply:"Terapkan"},"zh-CN":{to:"到",Hour:"小时",Minute:"分钟","Select Time":"选择时间",Reset:"重置",Apply:"应用"},"nl-NL":{to:"tot",Hour:"Uur",Minute:"Minuten","Select Time":"Select Time",Reset:"Reset",Apply:"Toepassen"}},T=[["",""],["",""]],V=t=>{const{id:o="time-range",classNameContainer:y,value:s=T,buttonClick:j,zIndexPopper:l=1,offsetPopover:g=5,floatingOptions:S,locale:d="id-ID",disableValidation:v=!1}=t,h=C.useRef(null),[n,b]=C.useState(T),e=(r,N)=>{if(N==="start"){const x=[r,n[1]];b(x)}else{const x=[n[0],r];b(x)}},c=r=>{var N;(N=h.current)==null||N.handlerShow(r),b(s||T)},u=()=>{var r;typeof(t==null?void 0:t.onChange)=="function"&&t.onChange(T),b(T),(r=h.current)==null||r.setShow(!1)},m=()=>{var R;const r=Number(n[0][0]),N=Number(n[0][1]),x=Number(n[1][0]),E=Number(n[1][1]),I=n[0][0]&&n[0][1]&&n[1][0]&&n[1][1],w=r<x||r===x&&N<=E;I&&(w||v)&&(typeof(t==null?void 0:t.onChange)=="function"&&t.onChange(n),(R=h.current)==null||R.setShow(!1))};return a.jsxs(a.Fragment,{children:[a.jsx("div",{id:o,onClick:c,className:y,children:typeof j=="function"?j(s,M(s,d)):s?M(s,d):f[d]["Select Time"]}),a.jsx(A.default,{zIndex:l,ref:h,offset:g,id:`${o}-popover`,floatingOptions:{placement:"bottom-end",...S},className:"iru-flex iru-flex-col",children:a.jsxs("div",{className:i.default["container-time-range"],children:[a.jsxs("div",{className:i.default["time-range-header"],children:[a.jsx("div",{className:i.default["time-range"],children:n[0][0]&&n[0][1]?`${n[0][0]}:${n[0][1]}`:"--:--"}),a.jsx("p",{className:i.default["text-to"],children:f[d].to}),a.jsx("div",{className:i.default["time-range"],children:n[1][0]&&n[1][1]?`${n[1][0]}:${n[1][1]}`:"--:--"})]}),a.jsxs("div",{className:i.default["time-range-body"],children:[a.jsx(k,{type:"start",value:[n[0][0],n[0][1]],onChange:r=>e(r,"start"),locale:d,values:n,disableValidation:v}),a.jsx("div",{className:i.default["time-range-divider"]}),a.jsx(k,{type:"end",value:[n[1][0],n[1][1]],onChange:r=>e(r,"end"),locale:d,values:n,disableValidation:v})]}),a.jsxs("div",{className:`${i.default["time-range-footer"]}`,children:[typeof(t==null?void 0:t.buttonReset)=="function"?a.jsx("div",{onClick:u,children:t.buttonReset()}):a.jsx(H.default,{variants:"nude-laba-blue-10",size:"small",onClick:u,children:f[d].Reset}),typeof(t==null?void 0:t.buttonSubmit)=="function"?a.jsx("div",{onClick:m,children:t.buttonSubmit()}):a.jsx(H.default,{size:"small",onClick:m,children:f[d].Apply})]})]})})]})},k=t=>{const{value:o,onChange:y,type:s,locale:j,values:l,disableValidation:g}=t,S=(e,c,u)=>Array.from({length:(c-e)/u+1},(m,r)=>e+r*u),d=()=>{const e=document.getElementById(`time-range-${s}-hour-${o[0]}`),c=document.getElementById(`time-range-${s}-minute-${o[1]}`),u=document.getElementById(`time-range-${s}-hour`),m=document.getElementById(`time-range-${s}-minute`);e&&u&&u.scrollTo({behavior:"instant",top:e.offsetTop-75}),c&&m&&m.scrollTo({behavior:"instant",top:c.offsetTop-75})},v=e=>{if(s==="start"||g)return!1;{if(!l[0][0])return!1;const c=Number(l[0][0]);return e<c}},h=e=>{if(s==="start"||g)return!1;{if(!l[0][0]||!l[0][1]||!l[1][0])return!1;const c=Number(l[0][0]),u=Number(l[1][0]),m=Number(l[0][1]);return c===u&&e<m}},n=e=>{if(s==="start"||g)return!1;{const c=Number(l[0][0]);return e<c}},b=e=>{if(s==="start"||g)return!1;{if(!l[0][0]||!l[0][1]||!l[1][0])return!1;const c=Number(l[0][0]),u=Number(l[1][0]),m=Number(l[0][1]);return c===u&&e<m}};return C.useEffect(()=>{d()},[]),a.jsxs("div",{className:i.default["list-time"],children:[a.jsxs("div",{className:i.default["container-time"],children:[a.jsx("p",{className:i.default["title-time"],children:f[j].Hour}),a.jsx("div",{id:`time-range-${s}-hour`,className:i.default["container-cell-time"],children:S(0,23,1).map(e=>a.jsx("div",{id:`time-range-${s}-hour-${e}`,className:`${i.default["cell-time"]} ${o[0]===$(e)?i.default.selected:""} ${v(e)?i.default.error:""} ${n(e)?i.default.disabled:""}`,onClick:()=>y([$(e),o[1]]),children:$(e)},e))})]}),a.jsxs("div",{className:i.default["container-time"],children:[a.jsx("p",{className:i.default["title-time"],children:f[j].Minute}),a.jsx("div",{id:`time-range-${s}-minute`,className:i.default["container-cell-time"],children:S(0,59,1).map(e=>a.jsx("div",{id:`time-range-${s}-minute-${e}`,className:`${i.default["cell-time"]} ${o[1]===$(e)?i.default.selected:""} ${h(e)?i.default.error:""} ${b(e)?i.default.disabled:""}`,onClick:()=>y([o[0],$(e)]),children:$(e)},e))})]})]})};exports.default=V;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),S=require("react"),I=require("../Popover/Popover.cjs"),s=require("./TimeRange.module.scss.cjs"),C=require("../Button/Button.cjs"),x=(a,o=2)=>String(a).padStart(o,"0"),R=(a,o)=>a[0][0]&&a[0][1]&&a[1][0]&&a[1][1]?`${a[0][0]}:${a[0][1]} - ${a[1][0]}:${a[1][1]}`:f[o]["Select Time"],f={"en-US":{to:"to",Hour:"Hour",Minute:"Minute","Select Time":"Select Time",Reset:"Reset",Apply:"Apply"},"id-ID":{to:"to",Hour:"Jam",Minute:"Menit","Select Time":"Pilih Waktu",Reset:"Reset",Apply:"Terapkan"},"zh-CN":{to:"到",Hour:"小时",Minute:"分钟","Select Time":"选择时间",Reset:"重置",Apply:"应用"},"nl-NL":{to:"tot",Hour:"Uur",Minute:"Minuten","Select Time":"Select Time",Reset:"Reset",Apply:"Toepassen"}},j=[["",""],["",""]],w=a=>{const{id:o="time-range",classNameContainer:v,value:r=j,buttonClick:p,zIndexPopper:i=1,offsetPopover:g=5,floatingOptions:T,locale:d="id-ID",disableValidation:$=!1}=a,h=S.useRef(null),[t,b]=S.useState(j),e=(c,y)=>{if(y==="start"){const N=[c,t[1]];b(N)}else{const N=[t[0],c];b(N)}},l=c=>{h.current?.handlerShow(c),b(r||j)},u=()=>{typeof a?.onChange=="function"&&a.onChange(j),b(j),h.current?.setShow(!1)},m=()=>{const c=Number(t[0][0]),y=Number(t[0][1]),N=Number(t[1][0]),M=Number(t[1][1]),k=t[0][0]&&t[0][1]&&t[1][0]&&t[1][1],E=c<N||c===N&&y<=M;k&&(E||$)&&(typeof a?.onChange=="function"&&a.onChange(t),h.current?.setShow(!1))};return n.jsxs(n.Fragment,{children:[n.jsx("div",{id:o,onClick:l,className:v,children:typeof p=="function"?p(r,R(r,d)):r?R(r,d):f[d]["Select Time"]}),n.jsx(I.default,{zIndex:i,ref:h,offset:g,id:`${o}-popover`,floatingOptions:{placement:"bottom-end",...T},className:"iru-flex iru-flex-col",children:n.jsxs("div",{className:s.default["container-time-range"],children:[n.jsxs("div",{className:s.default["time-range-header"],children:[n.jsx("div",{className:s.default["time-range"],children:t[0][0]&&t[0][1]?`${t[0][0]}:${t[0][1]}`:"--:--"}),n.jsx("p",{className:s.default["text-to"],children:f[d].to}),n.jsx("div",{className:s.default["time-range"],children:t[1][0]&&t[1][1]?`${t[1][0]}:${t[1][1]}`:"--:--"})]}),n.jsxs("div",{className:s.default["time-range-body"],children:[n.jsx(H,{type:"start",value:[t[0][0],t[0][1]],onChange:c=>e(c,"start"),locale:d,values:t,disableValidation:$}),n.jsx("div",{className:s.default["time-range-divider"]}),n.jsx(H,{type:"end",value:[t[1][0],t[1][1]],onChange:c=>e(c,"end"),locale:d,values:t,disableValidation:$})]}),n.jsxs("div",{className:`${s.default["time-range-footer"]}`,children:[typeof a?.buttonReset=="function"?n.jsx("div",{onClick:u,children:a.buttonReset()}):n.jsx(C.default,{variants:"nude-laba-blue-10",size:"small",onClick:u,children:f[d].Reset}),typeof a?.buttonSubmit=="function"?n.jsx("div",{onClick:m,children:a.buttonSubmit()}):n.jsx(C.default,{size:"small",onClick:m,children:f[d].Apply})]})]})})]})},H=a=>{const{value:o,onChange:v,type:r,locale:p,values:i,disableValidation:g}=a,T=(e,l,u)=>Array.from({length:(l-e)/u+1},(m,c)=>e+c*u),d=()=>{const e=document.getElementById(`time-range-${r}-hour-${o[0]}`),l=document.getElementById(`time-range-${r}-minute-${o[1]}`),u=document.getElementById(`time-range-${r}-hour`),m=document.getElementById(`time-range-${r}-minute`);e&&u&&u.scrollTo({behavior:"instant",top:e.offsetTop-75}),l&&m&&m.scrollTo({behavior:"instant",top:l.offsetTop-75})},$=e=>{if(r==="start"||g)return!1;{if(!i[0][0])return!1;const l=Number(i[0][0]);return e<l}},h=e=>{if(r==="start"||g)return!1;{if(!i[0][0]||!i[0][1]||!i[1][0])return!1;const l=Number(i[0][0]),u=Number(i[1][0]),m=Number(i[0][1]);return l===u&&e<m}},t=e=>{if(r==="start"||g)return!1;{const l=Number(i[0][0]);return e<l}},b=e=>{if(r==="start"||g)return!1;{if(!i[0][0]||!i[0][1]||!i[1][0])return!1;const l=Number(i[0][0]),u=Number(i[1][0]),m=Number(i[0][1]);return l===u&&e<m}};return S.useEffect(()=>{d()},[]),n.jsxs("div",{className:s.default["list-time"],children:[n.jsxs("div",{className:s.default["container-time"],children:[n.jsx("p",{className:s.default["title-time"],children:f[p].Hour}),n.jsx("div",{id:`time-range-${r}-hour`,className:s.default["container-cell-time"],children:T(0,23,1).map(e=>n.jsx("div",{id:`time-range-${r}-hour-${e}`,className:`${s.default["cell-time"]} ${o[0]===x(e)?s.default.selected:""} ${$(e)?s.default.error:""} ${t(e)?s.default.disabled:""}`,onClick:()=>v([x(e),o[1]]),children:x(e)},e))})]}),n.jsxs("div",{className:s.default["container-time"],children:[n.jsx("p",{className:s.default["title-time"],children:f[p].Minute}),n.jsx("div",{id:`time-range-${r}-minute`,className:s.default["container-cell-time"],children:T(0,59,1).map(e=>n.jsx("div",{id:`time-range-${r}-minute-${e}`,className:`${s.default["cell-time"]} ${o[1]===x(e)?s.default.selected:""} ${h(e)?s.default.error:""} ${b(e)?s.default.disabled:""}`,onClick:()=>v([o[0],x(e)]),children:x(e)},e))})]})]})};exports.default=w;

package/dist/components/TimeRange/TimeRange.mjs

@@ -1,9 +1,9 @@
-import { jsxs as f, Fragment as p, jsx as a } from "react/jsx-runtime";
-import k, { useEffect as z } from "react";
-import B from "../Popover/Popover.mjs";
-import i from "./TimeRange.module.scss.mjs";
-import x from "../Button/Button.mjs";
-const T = (t, c = 2) => String(t).padStart(c, "0"), E = (t, c) => t[0][0] && t[0][1] && t[1][0] && t[1][1] ? `${t[0][0]}:${t[0][1]} - ${t[1][0]}:${t[1][1]}` : h[c]["Select Time"], h = {
+import { jsxs as f, Fragment as A, jsx as a } from "react/jsx-runtime";
+import R, { useEffect as V } from "react";
+import z from "../Popover/Popover.mjs";
+import n from "./TimeRange.module.scss.mjs";
+import M from "../Button/Button.mjs";
+const $ = (r, l = 2) => String(r).padStart(l, "0"), k = (r, l) => r[0][0] && r[0][1] && r[1][0] && r[1][1] ? `${r[0][0]}:${r[0][1]} - ${r[1][0]}:${r[1][1]}` : h[l]["Select Time"], h = {
   "en-US": {
     to: "to",
     Hour: "Hour",
@@ -36,146 +36,143 @@ const T = (t, c = 2) => String(t).padStart(c, "0"), E = (t, c) => t[0][0] && t[0
     Reset: "Reset",
     Apply: "Toepassen"
   }
-}, H = [
+}, y = [
   ["", ""],
   ["", ""]
-], U = (t) => {
+], O = (r) => {
   const {
-    id: c = "time-range",
-    classNameContainer: S,
-    value: r = H,
-    buttonClick: y,
-    zIndexPopper: l = 1,
+    id: l = "time-range",
+    classNameContainer: C,
+    value: i = y,
+    buttonClick: v,
+    zIndexPopper: s = 1,
     offsetPopover: g = 5,
-    floatingOptions: R,
+    floatingOptions: H,
     locale: u = "id-ID",
-    disableValidation: C = !1
-  } = t, N = k.useRef(null), [n, b] = k.useState(H), e = (s, $) => {
-    if ($ === "start") {
-      const v = [s, n[1]];
-      b(v);
+    disableValidation: T = !1
+  } = r, p = R.useRef(null), [t, N] = R.useState(y), e = (c, S) => {
+    if (S === "start") {
+      const b = [c, t[1]];
+      N(b);
     } else {
-      const v = [n[0], s];
-      b(v);
+      const b = [t[0], c];
+      N(b);
     }
-  }, o = (s) => {
-    var $;
-    ($ = N.current) == null || $.handlerShow(s), b(r || H);
+  }, o = (c) => {
+    p.current?.handlerShow(c), N(i || y);
   }, m = () => {
-    var s;
-    typeof (t == null ? void 0 : t.onChange) == "function" && t.onChange(H), b(H), (s = N.current) == null || s.setShow(!1);
+    typeof r?.onChange == "function" && r.onChange(y), N(y), p.current?.setShow(!1);
   }, d = () => {
-    var M;
-    const s = Number(n[0][0]), $ = Number(n[0][1]), v = Number(n[1][0]), w = Number(n[1][1]), A = n[0][0] && n[0][1] && n[1][0] && n[1][1], V = s < v || s === v && $ <= w;
-    A && (V || C) && (typeof (t == null ? void 0 : t.onChange) == "function" && t.onChange(n), (M = N.current) == null || M.setShow(!1));
+    const c = Number(t[0][0]), S = Number(t[0][1]), b = Number(t[1][0]), E = Number(t[1][1]), I = t[0][0] && t[0][1] && t[1][0] && t[1][1], w = c < b || c === b && S <= E;
+    I && (w || T) && (typeof r?.onChange == "function" && r.onChange(t), p.current?.setShow(!1));
   };
-  return /* @__PURE__ */ f(p, { children: [
-    /* @__PURE__ */ a("div", { id: c, onClick: o, className: S, children: typeof y == "function" ? y(r, E(r, u)) : r ? E(r, u) : h[u]["Select Time"] }),
+  return /* @__PURE__ */ f(A, { children: [
+    /* @__PURE__ */ a("div", { id: l, onClick: o, className: C, children: typeof v == "function" ? v(i, k(i, u)) : i ? k(i, u) : h[u]["Select Time"] }),
     /* @__PURE__ */ a(
-      B,
+      z,
       {
-        zIndex: l,
-        ref: N,
+        zIndex: s,
+        ref: p,
         offset: g,
-        id: `${c}-popover`,
-        floatingOptions: { placement: "bottom-end", ...R },
+        id: `${l}-popover`,
+        floatingOptions: { placement: "bottom-end", ...H },
         className: "iru-flex iru-flex-col",
-        children: /* @__PURE__ */ f("div", { className: i["container-time-range"], children: [
-          /* @__PURE__ */ f("div", { className: i["time-range-header"], children: [
-            /* @__PURE__ */ a("div", { className: i["time-range"], children: n[0][0] && n[0][1] ? `${n[0][0]}:${n[0][1]}` : "--:--" }),
-            /* @__PURE__ */ a("p", { className: i["text-to"], children: h[u].to }),
-            /* @__PURE__ */ a("div", { className: i["time-range"], children: n[1][0] && n[1][1] ? `${n[1][0]}:${n[1][1]}` : "--:--" })
+        children: /* @__PURE__ */ f("div", { className: n["container-time-range"], children: [
+          /* @__PURE__ */ f("div", { className: n["time-range-header"], children: [
+            /* @__PURE__ */ a("div", { className: n["time-range"], children: t[0][0] && t[0][1] ? `${t[0][0]}:${t[0][1]}` : "--:--" }),
+            /* @__PURE__ */ a("p", { className: n["text-to"], children: h[u].to }),
+            /* @__PURE__ */ a("div", { className: n["time-range"], children: t[1][0] && t[1][1] ? `${t[1][0]}:${t[1][1]}` : "--:--" })
           ] }),
-          /* @__PURE__ */ f("div", { className: i["time-range-body"], children: [
+          /* @__PURE__ */ f("div", { className: n["time-range-body"], children: [
             /* @__PURE__ */ a(
-              I,
+              x,
               {
                 type: "start",
-                value: [n[0][0], n[0][1]],
-                onChange: (s) => e(s, "start"),
+                value: [t[0][0], t[0][1]],
+                onChange: (c) => e(c, "start"),
                 locale: u,
-                values: n,
-                disableValidation: C
+                values: t,
+                disableValidation: T
               }
             ),
-            /* @__PURE__ */ a("div", { className: i["time-range-divider"] }),
+            /* @__PURE__ */ a("div", { className: n["time-range-divider"] }),
             /* @__PURE__ */ a(
-              I,
+              x,
               {
                 type: "end",
-                value: [n[1][0], n[1][1]],
-                onChange: (s) => e(s, "end"),
+                value: [t[1][0], t[1][1]],
+                onChange: (c) => e(c, "end"),
                 locale: u,
-                values: n,
-                disableValidation: C
+                values: t,
+                disableValidation: T
               }
             )
           ] }),
-          /* @__PURE__ */ f("div", { className: `${i["time-range-footer"]}`, children: [
-            typeof (t == null ? void 0 : t.buttonReset) == "function" ? /* @__PURE__ */ a("div", { onClick: m, children: t.buttonReset() }) : /* @__PURE__ */ a(x, { variants: "nude-laba-blue-10", size: "small", onClick: m, children: h[u].Reset }),
-            typeof (t == null ? void 0 : t.buttonSubmit) == "function" ? /* @__PURE__ */ a("div", { onClick: d, children: t.buttonSubmit() }) : /* @__PURE__ */ a(x, { size: "small", onClick: d, children: h[u].Apply })
+          /* @__PURE__ */ f("div", { className: `${n["time-range-footer"]}`, children: [
+            typeof r?.buttonReset == "function" ? /* @__PURE__ */ a("div", { onClick: m, children: r.buttonReset() }) : /* @__PURE__ */ a(M, { variants: "nude-laba-blue-10", size: "small", onClick: m, children: h[u].Reset }),
+            typeof r?.buttonSubmit == "function" ? /* @__PURE__ */ a("div", { onClick: d, children: r.buttonSubmit() }) : /* @__PURE__ */ a(M, { size: "small", onClick: d, children: h[u].Apply })
           ] })
         ] })
       }
     )
   ] });
-}, I = (t) => {
-  const { value: c, onChange: S, type: r, locale: y, values: l, disableValidation: g } = t, R = (e, o, m) => Array.from({ length: (o - e) / m + 1 }, (d, s) => e + s * m), u = () => {
-    const e = document.getElementById(`time-range-${r}-hour-${c[0]}`), o = document.getElementById(`time-range-${r}-minute-${c[1]}`), m = document.getElementById(`time-range-${r}-hour`), d = document.getElementById(`time-range-${r}-minute`);
+}, x = (r) => {
+  const { value: l, onChange: C, type: i, locale: v, values: s, disableValidation: g } = r, H = (e, o, m) => Array.from({ length: (o - e) / m + 1 }, (d, c) => e + c * m), u = () => {
+    const e = document.getElementById(`time-range-${i}-hour-${l[0]}`), o = document.getElementById(`time-range-${i}-minute-${l[1]}`), m = document.getElementById(`time-range-${i}-hour`), d = document.getElementById(`time-range-${i}-minute`);
     e && m && m.scrollTo({ behavior: "instant", top: e.offsetTop - 75 }), o && d && d.scrollTo({ behavior: "instant", top: o.offsetTop - 75 });
-  }, C = (e) => {
-    if (r === "start" || g) return !1;
+  }, T = (e) => {
+    if (i === "start" || g) return !1;
     {
-      if (!l[0][0]) return !1;
-      const o = Number(l[0][0]);
+      if (!s[0][0]) return !1;
+      const o = Number(s[0][0]);
       return e < o;
     }
-  }, N = (e) => {
-    if (r === "start" || g) return !1;
+  }, p = (e) => {
+    if (i === "start" || g) return !1;
     {
-      if (!l[0][0] || !l[0][1] || !l[1][0]) return !1;
-      const o = Number(l[0][0]), m = Number(l[1][0]), d = Number(l[0][1]);
+      if (!s[0][0] || !s[0][1] || !s[1][0]) return !1;
+      const o = Number(s[0][0]), m = Number(s[1][0]), d = Number(s[0][1]);
       return o === m && e < d;
     }
-  }, n = (e) => {
-    if (r === "start" || g) return !1;
+  }, t = (e) => {
+    if (i === "start" || g) return !1;
     {
-      const o = Number(l[0][0]);
+      const o = Number(s[0][0]);
       return e < o;
     }
-  }, b = (e) => {
-    if (r === "start" || g) return !1;
+  }, N = (e) => {
+    if (i === "start" || g) return !1;
     {
-      if (!l[0][0] || !l[0][1] || !l[1][0]) return !1;
-      const o = Number(l[0][0]), m = Number(l[1][0]), d = Number(l[0][1]);
+      if (!s[0][0] || !s[0][1] || !s[1][0]) return !1;
+      const o = Number(s[0][0]), m = Number(s[1][0]), d = Number(s[0][1]);
       return o === m && e < d;
     }
   };
-  return z(() => {
+  return V(() => {
     u();
-  }, []), /* @__PURE__ */ f("div", { className: i["list-time"], children: [
-    /* @__PURE__ */ f("div", { className: i["container-time"], children: [
-      /* @__PURE__ */ a("p", { className: i["title-time"], children: h[y].Hour }),
-      /* @__PURE__ */ a("div", { id: `time-range-${r}-hour`, className: i["container-cell-time"], children: R(0, 23, 1).map((e) => /* @__PURE__ */ a(
+  }, []), /* @__PURE__ */ f("div", { className: n["list-time"], children: [
+    /* @__PURE__ */ f("div", { className: n["container-time"], children: [
+      /* @__PURE__ */ a("p", { className: n["title-time"], children: h[v].Hour }),
+      /* @__PURE__ */ a("div", { id: `time-range-${i}-hour`, className: n["container-cell-time"], children: H(0, 23, 1).map((e) => /* @__PURE__ */ a(
         "div",
         {
-          id: `time-range-${r}-hour-${e}`,
-          className: `${i["cell-time"]} ${c[0] === T(e) ? i.selected : ""} ${C(e) ? i.error : ""} ${n(e) ? i.disabled : ""}`,
-          onClick: () => S([T(e), c[1]]),
-          children: T(e)
+          id: `time-range-${i}-hour-${e}`,
+          className: `${n["cell-time"]} ${l[0] === $(e) ? n.selected : ""} ${T(e) ? n.error : ""} ${t(e) ? n.disabled : ""}`,
+          onClick: () => C([$(e), l[1]]),
+          children: $(e)
         },
         e
       )) })
     ] }),
-    /* @__PURE__ */ f("div", { className: i["container-time"], children: [
-      /* @__PURE__ */ a("p", { className: i["title-time"], children: h[y].Minute }),
-      /* @__PURE__ */ a("div", { id: `time-range-${r}-minute`, className: i["container-cell-time"], children: R(0, 59, 1).map((e) => /* @__PURE__ */ a(
+    /* @__PURE__ */ f("div", { className: n["container-time"], children: [
+      /* @__PURE__ */ a("p", { className: n["title-time"], children: h[v].Minute }),
+      /* @__PURE__ */ a("div", { id: `time-range-${i}-minute`, className: n["container-cell-time"], children: H(0, 59, 1).map((e) => /* @__PURE__ */ a(
         "div",
         {
-          id: `time-range-${r}-minute-${e}`,
-          className: `${i["cell-time"]} ${c[1] === T(e) ? i.selected : ""} ${N(e) ? i.error : ""} ${b(e) ? i.disabled : ""}`,
-          onClick: () => S([c[0], T(e)]),
-          children: T(e)
+          id: `time-range-${i}-minute-${e}`,
+          className: `${n["cell-time"]} ${l[1] === $(e) ? n.selected : ""} ${p(e) ? n.error : ""} ${N(e) ? n.disabled : ""}`,
+          onClick: () => C([l[0], $(e)]),
+          children: $(e)
         },
         e
       )) })
@@ -183,5 +180,5 @@ const T = (t, c = 2) => String(t).padStart(c, "0"), E = (t, c) => t[0][0] && t[0
   ] });
 };
 export {
-  U as default
+  O as default
 };