acinguiux-ds-react-framework 0.1.16 → 0.1.19

package/build/esm/components/DatePicker/components/NativeDatePicker/NativeDatePicker.js

@@ -1,45 +1,44 @@
-import { jsx as t } from "react/jsx-runtime";
-import { forwardRef as C, useRef as x, useImperativeHandle as k, useCallback as v } from "react";
-import R from "classnames";
-import { Sizes as S } from "../../../../react-base/src/consts/index.js";
-import { ariaLabel as E } from "../../../../react-base/src/components/DatePicker/DatePicker.consts.js";
-import m from "../../../Icon/components/CalendarEvent.js";
-import I from "../../../TextInput/TextInput.js";
-import { DATE_PICKER_CLASS as N } from "../../../../react-base/src/consts/classes.js";
-const h = C(
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as c, useRef as d, useImperativeHandle as C, useCallback as x } from "react";
+import k from "classnames";
+import { Sizes as v } from "../../../../react-base/src/consts/index.js";
+import { ariaLabel as S } from "../../../../react-base/src/components/DatePicker/DatePicker.consts.js";
+import a from "../../../Icon/components/CalendarEvent.js";
+import { TextInputStyled as R } from "./NativeDatePicker.styles.js";
+import { DATE_PICKER_CLASS as E } from "../../../../react-base/src/consts/classes.js";
+const T = c(
   ({
-    className: n,
-    size: f = `${S.Medium}`,
-    prefix: s,
-    suffix: l = !0,
-    background: o = !0,
-    allowClear: p = !0,
-    type: u = "date",
-    ...c
-  }, d) => {
-    const e = x(null);
-    k(d, () => e.current);
-    const a = v(() => {
-      var r, i;
-      (i = (r = e.current) == null ? void 0 : r.showPicker) == null || i.call(r);
+    className: i,
+    size: m = `${v.Medium}`,
+    prefix: n,
+    suffix: f = !0,
+    background: t = !0,
+    allowClear: s = !0,
+    type: l = "date",
+    ...p
+  }, u) => {
+    const r = d(null);
+    C(u, () => r.current);
+    const o = x(() => {
+      r.current?.showPicker?.();
     }, []);
-    return /* @__PURE__ */ t(
-      I,
+    return /* @__PURE__ */ e(
+      R,
       {
-        className: R(n, N),
-        "aria-label": E,
-        size: f,
-        prefix: s ? { transparent: !o, node: /* @__PURE__ */ t(m, {}), onClick: a } : void 0,
-        suffix: l ? { transparent: !o, node: /* @__PURE__ */ t(m, {}), onClick: a } : void 0,
-        ref: e,
-        type: u,
-        allowClear: p,
-        ...c
+        className: k(i, E),
+        "aria-label": S,
+        size: m,
+        prefix: n ? { transparent: !t, node: /* @__PURE__ */ e(a, {}), onClick: o } : void 0,
+        suffix: f ? { transparent: !t, node: /* @__PURE__ */ e(a, {}), onClick: o } : void 0,
+        inputRef: r,
+        type: l,
+        allowClear: s,
+        ...p
       }
     );
   }
 );
 export {
-  h as default
+  T as default
 };
 //# sourceMappingURL=NativeDatePicker.js.map

package/build/esm/components/DatePicker/components/NativeDatePicker/NativeDatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"NativeDatePicker.js","sources":["../../../../../../src/components/DatePicker/components/NativeDatePicker/NativeDatePicker.tsx"],"sourcesContent":["import { type ForwardedRef, forwardRef, useCallback, useImperativeHandle, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { Sizes, DATE_PICKER_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { DatePickerConsts } from 'acinguiux-ds-react-base/components/DatePicker';\n\nimport CalendarEvent from '../../../Icon/components/CalendarEvent';\nimport type { INativeDatePickerProps } from './NativeDatePicker.types';\nimport TextInput from '../../../TextInput/TextInput';\n\nconst NativeDatePicker = forwardRef(\n  (\n    {\n      className,\n      size = `${Sizes.Medium}`,\n      prefix,\n      suffix = true,\n      background = true,\n      allowClear = true,\n      type = 'date',\n      ...rest\n    }: INativeDatePickerProps,\n    ref: ForwardedRef<HTMLInputElement>,\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle(ref, () => inputRef.current!);\n\n    const onSuffixClick = useCallback(() => {\n      inputRef.current?.showPicker?.();\n    }, []);\n\n    return (\n      <TextInput\n        className={classNames(className, DATE_PICKER_CLASS)}\n        aria-label={DatePickerConsts.ariaLabel}\n        size={size}\n        prefix={prefix ? { transparent: !background, node: <CalendarEvent />, onClick: onSuffixClick } : undefined}\n        suffix={suffix ? { transparent: !background, node: <CalendarEvent />, onClick: onSuffixClick } : undefined}\n        ref={inputRef}\n        type={type}\n        allowClear={allowClear}\n        {...rest}\n      />\n    );\n  },\n);\n\nexport default NativeDatePicker;\n"],"names":["NativeDatePicker","forwardRef","className","size","Sizes","prefix","suffix","background","allowClear","type","rest","ref","inputRef","useRef","useImperativeHandle","onSuffixClick","useCallback","_b","_a","jsx","TextInput","classNames","DATE_PICKER_CLASS","DatePickerConsts.ariaLabel","CalendarEvent"],"mappings":";;;;;;;;AAUA,MAAMA,IAAmBC;AAAA,EACvB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,MAAAC,IAAO,GAAGC,EAAM,MAAM;AAAA,IACtB,QAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,YAAAC,IAAa;AAAA,IACb,YAAAC,IAAa;AAAA,IACb,MAAAC,IAAO;AAAA,IACP,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAWC,EAAyB,IAAI;AAC9C,IAAAC,EAAoBH,GAAK,MAAMC,EAAS,OAAQ;AAEhD,UAAMG,IAAgBC,EAAY,MAAM;;AACtC,OAAAC,KAAAC,IAAAN,EAAS,YAAT,gBAAAM,EAAkB,eAAlB,QAAAD,EAAA,KAAAC;AAAA,IACF,GAAG,CAAA,CAAE;AAEL,WACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAWnB,GAAWoB,CAAiB;AAAA,QAClD,cAAYC;AAAAA,QACZ,MAAApB;AAAA,QACA,QAAQE,IAAS,EAAE,aAAa,CAACE,GAAY,MAAM,gBAAAY,EAACK,GAAA,CAAA,CAAc,GAAI,SAAST,EAAA,IAAkB;AAAA,QACjG,QAAQT,IAAS,EAAE,aAAa,CAACC,GAAY,MAAM,gBAAAY,EAACK,GAAA,CAAA,CAAc,GAAI,SAAST,EAAA,IAAkB;AAAA,QACjG,KAAKH;AAAA,QACL,MAAAH;AAAA,QACA,YAAAD;AAAA,QACC,GAAGE;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
+{"version":3,"file":"NativeDatePicker.js","sources":["../../../../../../src/components/DatePicker/components/NativeDatePicker/NativeDatePicker.tsx"],"sourcesContent":["import { type ForwardedRef, forwardRef, useCallback, useImperativeHandle, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { Sizes, DATE_PICKER_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { DatePickerConsts } from 'acinguiux-ds-react-base/components/DatePicker';\n\nimport CalendarEvent from '../../../Icon/components/CalendarEvent';\nimport type { INativeDatePickerProps } from './NativeDatePicker.types';\nimport { TextInputStyled } from './NativeDatePicker.styles';\n\nconst NativeDatePicker = forwardRef(\n  (\n    {\n      className,\n      size = `${Sizes.Medium}`,\n      prefix,\n      suffix = true,\n      background = true,\n      allowClear = true,\n      type = 'date',\n      ...rest\n    }: INativeDatePickerProps,\n    ref: ForwardedRef<HTMLInputElement>,\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle(ref, () => inputRef.current!);\n\n    const onSuffixClick = useCallback(() => {\n      inputRef.current?.showPicker?.();\n    }, []);\n\n    return (\n      <TextInputStyled\n        className={classNames(className, DATE_PICKER_CLASS)}\n        aria-label={DatePickerConsts.ariaLabel}\n        size={size}\n        prefix={prefix ? { transparent: !background, node: <CalendarEvent />, onClick: onSuffixClick } : undefined}\n        suffix={suffix ? { transparent: !background, node: <CalendarEvent />, onClick: onSuffixClick } : undefined}\n        inputRef={inputRef}\n        type={type}\n        allowClear={allowClear}\n        {...rest}\n      />\n    );\n  },\n);\n\nexport default NativeDatePicker;\n"],"names":["NativeDatePicker","forwardRef","className","size","Sizes","prefix","suffix","background","allowClear","type","rest","ref","inputRef","useRef","useImperativeHandle","onSuffixClick","useCallback","jsx","TextInputStyled","classNames","DATE_PICKER_CLASS","DatePickerConsts.ariaLabel","CalendarEvent"],"mappings":";;;;;;;;AAUA,MAAMA,IAAmBC;AAAA,EACvB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,MAAAC,IAAO,GAAGC,EAAM,MAAM;AAAA,IACtB,QAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,YAAAC,IAAa;AAAA,IACb,YAAAC,IAAa;AAAA,IACb,MAAAC,IAAO;AAAA,IACP,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAWC,EAAyB,IAAI;AAC9C,IAAAC,EAAoBH,GAAK,MAAMC,EAAS,OAAQ;AAEhD,UAAMG,IAAgBC,EAAY,MAAM;AACtC,MAAAJ,EAAS,SAAS,aAAA;AAAA,IACpB,GAAG,CAAA,CAAE;AAEL,WACE,gBAAAK;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAWjB,GAAWkB,CAAiB;AAAA,QAClD,cAAYC;AAAAA,QACZ,MAAAlB;AAAA,QACA,QAAQE,IAAS,EAAE,aAAa,CAACE,GAAY,MAAM,gBAAAU,EAACK,GAAA,CAAA,CAAc,GAAI,SAASP,EAAA,IAAkB;AAAA,QACjG,QAAQT,IAAS,EAAE,aAAa,CAACC,GAAY,MAAM,gBAAAU,EAACK,GAAA,CAAA,CAAc,GAAI,SAASP,EAAA,IAAkB;AAAA,QACjG,UAAAH;AAAA,QACA,MAAAH;AAAA,QACA,YAAAD;AAAA,QACC,GAAGE;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}

package/build/esm/components/DatePicker/components/NativeDatePicker/NativeDatePicker.styles.d.ts

@@ -0,0 +1,7 @@
+import { TextInputTypes } from '../../../../react-base/src/components/TextInput';
+export declare const TextInputStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("../../../..").ITextInputProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, {
+    size: TextInputTypes.Size;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../../../..").ITextInputProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+//# sourceMappingURL=NativeDatePicker.styles.d.ts.map

package/build/esm/components/DatePicker/components/NativeDatePicker/NativeDatePicker.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeDatePicker.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/DatePicker/components/NativeDatePicker/NativeDatePicker.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAC;AAI9E,eAAO,MAAM,eAAe;;;UAA6B,cAAc,CAAC,IAAI;iNAM1E,CAAC"}

package/build/esm/components/DatePicker/components/NativeDatePicker/NativeDatePicker.styles.js

@@ -0,0 +1,12 @@
+import { styled as p, css as r } from "styled-components";
+import { getLabelTypographySize as o } from "../../../../react-base/src/utils/sizesUtils.js";
+import i from "../../../TextInput/TextInput.js";
+const y = p(i)(({ theme: t, size: e }) => r`
+    input {
+      line-height: calc(${t.typography("label", o(e)).lineHeight} - 2px);
+    }
+  `);
+export {
+  y as TextInputStyled
+};
+//# sourceMappingURL=NativeDatePicker.styles.js.map

package/build/esm/components/DatePicker/components/NativeDatePicker/NativeDatePicker.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeDatePicker.styles.js","sources":["../../../../../../src/components/DatePicker/components/NativeDatePicker/NativeDatePicker.styles.ts"],"sourcesContent":["import { css, styled } from 'styled-components';\nimport { getLabelTypographySize } from 'acinguiux-ds-react-base/utils/sizesUtils';\nimport { TextInputTypes } from 'acinguiux-ds-react-base/components/TextInput';\n\nimport TextInput from '../../../TextInput/TextInput';\n\nexport const TextInputStyled = styled(TextInput)<{ size: TextInputTypes.Size }>(({ theme, size }) => {\n  return css`\n    input {\n      line-height: calc(${theme.typography('label', getLabelTypographySize(size)).lineHeight} - 2px);\n    }\n  `;\n});\n"],"names":["TextInputStyled","styled","TextInput","theme","size","css","getLabelTypographySize"],"mappings":";;;AAMO,MAAMA,IAAkBC,EAAOC,CAAS,EAAiC,CAAC,EAAE,OAAAC,GAAO,MAAAC,QACjFC;AAAA;AAAA,0BAEiBF,EAAM,WAAW,SAASG,EAAuBF,CAAI,CAAC,EAAE,UAAU;AAAA;AAAA,GAG3F;"}

package/build/esm/components/DatePicker/components/RangeDatePicker/RangeDatePicker.d.ts

@@ -1,4 +1,4 @@
 import type { IRangeDatePickerProps } from './RangeDatePicker.types';
-declare const RangeDatePicker: ({ size, picker, format, disabled, invalid, defaultValue, value, onChange, open, calendarProps, placeholder, allowClear, className, ...ariaProps }: IRangeDatePickerProps) => import("react/jsx-runtime").JSX.Element;
+declare const RangeDatePicker: ({ size, picker, format, disabled, invalid, defaultValue, value, onChange, open, calendarProps, placeholder, allowClear, closeOnComplete, className, ...ariaProps }: IRangeDatePickerProps) => import("react/jsx-runtime").JSX.Element;
 export default RangeDatePicker;
 //# sourceMappingURL=RangeDatePicker.d.ts.map

package/build/esm/components/DatePicker/components/RangeDatePicker/RangeDatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RangeDatePicker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/DatePicker/components/RangeDatePicker/RangeDatePicker.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAGrE,QAAA,MAAM,eAAe,sJAelB,qBAAqB,4CA0MvB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"RangeDatePicker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/DatePicker/components/RangeDatePicker/RangeDatePicker.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAIrE,QAAA,MAAM,eAAe,uKAgBlB,qBAAqB,4CA8MvB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/build/esm/components/DatePicker/components/RangeDatePicker/RangeDatePicker.js

@@ -1,81 +1,83 @@
-import { jsxs as M, jsx as f, Fragment as J } from "react/jsx-runtime";
-import { useId as Q, useRef as y, useState as v, useEffect as V, useCallback as k } from "react";
-import { format as D, parse as U, isValid as Y } from "date-fns";
-import { Sizes as R } from "../../../../react-base/src/consts/index.js";
+import { jsxs as M, jsx as n, Fragment as J } from "react/jsx-runtime";
+import { useId as Q, useRef as O, useState as P, useEffect as j, useCallback as y } from "react";
+import { format as s, parse as U, isValid as Y } from "date-fns";
+import { Sizes as k } from "../../../../react-base/src/consts/index.js";
 import Z from "classnames";
-import { Popover as b, PopoverTrigger as h, PopoverContent as z } from "../../../Popover/Popover.js";
-import C from "../Calendar/Calendar.js";
+import { Popover as V, PopoverTrigger as z, PopoverContent as $ } from "../../../Popover/Popover.js";
 import oo from "../../../Icon/components/ArrowRight.js";
-import ro from "../../../Icon/components/CalendarEvent.js";
-import { SingleDatePickerTextInput as to } from "./RangeDatePicker.styles.js";
-import j from "../../../TextInput/TextInput.js";
-import { DATE_PICKER_CLASS as I } from "../../../../react-base/src/consts/classes.js";
+import eo from "../../../Icon/components/CalendarEvent.js";
+import { SingleDatePickerTextInput as to, StyledCalendar as ro } from "./RangeDatePicker.styles.js";
+import B from "../../../TextInput/TextInput.js";
+import { getNextOriginState as no, originToBound as io } from "../../utils/range.js";
+import { DATE_PICKER_CLASS as R } from "../../../../react-base/src/consts/classes.js";
 const Po = ({
-  size: p = R.Medium,
+  size: m = k.Medium,
   picker: _ = "day",
-  format: a = "dd/MM/yyyy",
-  disabled: s,
-  invalid: $,
-  defaultValue: B,
-  value: T,
-  onChange: t,
-  open: w,
-  calendarProps: L,
-  placeholder: m,
-  allowClear: W,
-  className: X,
+  format: t = "dd/MM/yyyy",
+  disabled: p,
+  invalid: L,
+  defaultValue: f,
+  value: c,
+  onChange: d,
+  open: S,
+  calendarProps: W,
+  placeholder: I,
+  allowClear: X,
+  closeOnComplete: T = !0,
+  className: b,
   ...q
 }) => {
-  const G = Q(), H = y(null), E = y(null), K = y(null), [e, c] = v(B), [n, S] = v();
-  V(() => {
-    c(T);
-  }, [T]);
-  const [u, x] = v({ from: "", to: "" }), [N, O] = v(w);
-  V(() => {
-    O(w);
-  }, [w]);
-  const d = k((o) => {
-    S(o), O((r) => !r);
-  }, []), P = k(
-    (o, r = n) => {
-      O(o), r && (r === "from" && setTimeout(() => {
-        var i;
-        return (i = E.current) == null ? void 0 : i.focus();
-      }, 0), r === "to" && setTimeout(() => {
-        var i;
-        return (i = K.current) == null ? void 0 : i.focus();
-      }, 0), S(void 0));
+  const G = Q(), H = O(null), E = O(null), N = O(null), [l, u] = P(f), [g, h] = P({
+    from: f?.from ? s(f.from, t) : "",
+    to: f?.to ? s(f.to, t) : ""
+  }), [i, C] = P();
+  j(() => {
+    u(c), h({
+      from: c?.from ? s(c.from, t) : "",
+      to: c?.to ? s(c.to, t) : ""
+    });
+  }, [c, t]);
+  const [x, v] = P(S);
+  j(() => {
+    v(S);
+  }, [S]);
+  const w = y((o) => {
+    C(o), v((e) => !e);
+  }, []), D = y(
+    (o, e = i) => {
+      v(o), e && (e === "from" && setTimeout(() => E.current?.focus(), 0), e === "to" && setTimeout(() => N.current?.focus(), 0), C(void 0));
     },
-    [n]
-  ), g = k(
+    [i]
+  ), K = y(
     (o) => {
-      o ? (x((r) => ({
-        ...r,
-        from: D(o.from ?? r.from, a),
-        ...o.to ? { to: D(o.to, a) } : {}
-      })), c(o), t == null || t(o)) : (x({ from: "", to: "" }), c(void 0), t == null || t(void 0)), n === "from" && (e == null ? void 0 : e.from) === (o == null ? void 0 : o.from) ? P(!1, "to") : n === "to" && (o != null && o.from) ? P(!1) : n === "from" && (o != null && o.from) && S("to");
+      o ? (h((r) => ({
+        from: o.from ?? r.from ? s(o.from ?? r.from, t) : "",
+        to: o.to ? s(o.to, t) : ""
+      })), u(o), d?.(o)) : (h({ from: "", to: "" }), u(void 0), d?.(void 0));
+      const { shouldClose: e, newOrigin: a } = no(o, l, i);
+      e && T && D(!1, a), C(a);
     },
-    [a, P, t, n, e]
-  ), A = (o) => (r) => {
-    x((l) => ({
-      ...l,
-      [o]: r.target.value
+    [t, T, D, d, i, l]
+  ), A = (o) => (e) => {
+    h((r) => ({
+      ...r,
+      [o]: e.target.value
     }));
-    const i = U(r.target.value, a, /* @__PURE__ */ new Date());
-    Y(i) ? (x((l) => ({
-      ...l,
-      [o]: D(i ?? l[o], a)
-    })), c(
-      (l) => ({
-        ...l,
-        [o]: i
+    const a = U(e.target.value, t, /* @__PURE__ */ new Date());
+    Y(a) ? (h((r) => ({
+      ...r,
+      [o]: s(a ?? r[o], t)
+    })), u(
+      (r) => ({
+        ...r,
+        [o]: a
       })
-    ), t == null || t({ ...e, [o]: i })) : (c(void 0), t == null || t(void 0));
-  }, F = (o) => (r) => {
-    r.key === " " && (r.preventDefault(), d(o));
+    ), d?.({ ...l, [o]: a })) : (u(void 0), d?.(void 0));
+  }, F = (o) => (e) => {
+    e.key === " " && (e.preventDefault(), w(o));
   };
-  return /* @__PURE__ */ M(b, { open: N, modal: !0, onOpenChange: P, children: [
-    /* @__PURE__ */ f(
+  return /* @__PURE__ */ M(V, { open: x, modal: !0, onOpenChange: D, children: [
+    /* @__PURE__ */ n(
       "p",
       {
         "aria-live": "polite",
@@ -91,78 +93,81 @@ const Po = ({
           whiteSpace: "nowrap",
           borderWidth: "0px"
         },
-        children: u.to ? `Selected date ${u.from} to ${u.to}` : "Please type or pick a date. Press space to open the calendar."
+        children: g.to ? `Selected date ${g.from} to ${g.to}` : "Please type or pick a date. Press space to open the calendar."
       }
     ),
-    _ === "day" && /* @__PURE__ */ f(h, { asChild: !0, children: /* @__PURE__ */ f(
+    _ === "day" && /* @__PURE__ */ n(z, { asChild: !0, children: /* @__PURE__ */ n(
       to,
       {
         inputRef: H,
-        className: Z(`${I}-range`, X),
-        size: p,
-        disabled: s,
-        invalid: $,
+        className: Z(`${R}-range`, b),
+        size: m,
+        disabled: p,
+        invalid: L,
         readOnly: !0,
         allowClear: !1,
-        customPrefix: /* @__PURE__ */ f(
-          j,
+        customPrefix: /* @__PURE__ */ n(
+          B,
           {
             inputRef: E,
-            className: `${I}-range-from`,
-            placeholder: (m == null ? void 0 : m.from) ?? "Start date",
-            disabled: s,
-            size: p,
-            value: u.from,
+            className: `${R}-range-from`,
+            placeholder: I?.from ?? "Start date",
+            "data-focused-popover": x && i === "from",
+            disabled: p,
+            size: m,
+            value: g.from,
             onKeyDown: F("from"),
             onChange: A("from"),
             wrapperProps: {
-              onClick: () => !s && d("from")
+              onClick: () => !p && w("from")
             }
           }
         ),
         customSuffix: /* @__PURE__ */ M(J, { children: [
-          /* @__PURE__ */ f(oo, {}),
-          /* @__PURE__ */ f(
-            j,
+          /* @__PURE__ */ n(oo, {}),
+          /* @__PURE__ */ n(
+            B,
             {
-              inputRef: K,
-              className: `${I}-range-to`,
-              placeholder: (m == null ? void 0 : m.to) ?? "End date",
-              size: p,
-              value: u.to,
-              disabled: s,
+              inputRef: N,
+              className: `${R}-range-to`,
+              placeholder: I?.to ?? "End date",
+              size: m,
+              value: g.to,
+              "data-focused-popover": x && i === "to",
+              disabled: p,
               wrapperProps: {
-                onClick: () => !s && d("to")
+                onClick: () => !p && w("to")
               },
               onKeyDown: F("to"),
               onChange: A("to"),
-              allowClear: W ? () => !!e : void 0,
-              onClear: () => g(void 0)
+              allowClear: X ? () => !!l : void 0,
+              onClear: () => K(void 0)
             }
           )
         ] }),
         suffix: {
-          node: /* @__PURE__ */ f(ro, {}),
-          onClick: () => !s && d("from")
+          node: /* @__PURE__ */ n(eo, {}),
+          onClick: () => !p && w("from")
         },
         type: "text",
         "aria-controls": "dialog",
-        "aria-expanded": N,
+        "aria-expanded": x,
         "aria-label": "Open calendar to choose date",
         ...q
       }
     ) }),
-    /* @__PURE__ */ f(z, { arrow: !0, sideOffset: 12, children: /* @__PURE__ */ f(
-      C,
+    /* @__PURE__ */ n($, { arrow: !0, sideOffset: 12, children: /* @__PURE__ */ n(
+      ro,
       {
         id: `calendar-${G}`,
-        ...L,
+        ...W,
         autoFocus: !0,
         variant: "range",
-        selected: e,
-        month: (e == null ? void 0 : e.from) ?? /* @__PURE__ */ new Date(),
-        size: p === R.XSmall ? R.Small : p,
-        onSelect: g
+        bound: io(i),
+        selected: l,
+        month: l?.from ?? /* @__PURE__ */ new Date(),
+        size: m === k.XSmall ? k.Small : m,
+        onSelect: K
       }
     ) })
   ] });

package/build/esm/components/DatePicker/components/RangeDatePicker/RangeDatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeDatePicker.js","sources":["../../../../../../src/components/DatePicker/components/RangeDatePicker/RangeDatePicker.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, useState } from 'react';\n\nimport { format as formatDate, isValid, parse } from 'date-fns';\nimport { DATE_PICKER_CLASS, Sizes } from 'acinguiux-ds-react-base/consts';\nimport classNames from 'classnames';\nimport type { DatePickerTypes } from 'acinguiux-ds-react-base/components/DatePicker';\n\nimport { Popover, PopoverContent, PopoverTrigger } from '../../../Popover/Popover';\nimport Calendar from '../Calendar/Calendar';\nimport { CalendarEvent, ArrowRight } from '../../../Icon/components';\nimport { SingleDatePickerTextInput } from './RangeDatePicker.styles';\nimport type { IRangeDatePickerProps } from './RangeDatePicker.types';\nimport TextInput from '../../../TextInput/TextInput';\n\nconst RangeDatePicker = ({\n  size = Sizes.Medium,\n  picker = 'day',\n  format = 'dd/MM/yyyy',\n  disabled,\n  invalid,\n  defaultValue,\n  value,\n  onChange,\n  open,\n  calendarProps,\n  placeholder,\n  allowClear,\n  className,\n  ...ariaProps\n}: IRangeDatePickerProps) => {\n  const calendarId = useId();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const inputRefFrom = useRef<HTMLInputElement>(null);\n  const inputRefTo = useRef<HTMLInputElement>(null);\n\n  // Hold the selected date in state\n  const [selectedDate, setSelectedDate] = useState<DatePickerTypes.RangeDate | undefined>(defaultValue);\n  // openOrigin is used to track which input is currently open ('from' or 'to')\n  const [openOrigin, setOpenOrigin] = useState<'from' | 'to' | undefined>();\n\n  useEffect(() => {\n    setSelectedDate(value);\n  }, [value]);\n\n  // Hold the input value in state\n  const [inputValue, setInputValue] = useState<{ from: string; to: string }>({ from: '', to: '' });\n\n  // Hold the dialog visibility in state\n  const [isPickerOpen, setIsPickerOpen] = useState(open);\n\n  useEffect(() => {\n    setIsPickerOpen(open);\n  }, [open]);\n\n  const togglePicker = useCallback((origin: 'from' | 'to') => {\n    setOpenOrigin(origin);\n    setIsPickerOpen((prev) => !prev);\n  }, []);\n\n  const handleOnPickerOpenChange = useCallback(\n    (isOpen: boolean, origin: 'from' | 'to' | undefined = openOrigin) => {\n      setIsPickerOpen(isOpen);\n\n      if (origin) {\n        if (origin === 'from') {\n          setTimeout(() => inputRefFrom.current?.focus(), 0);\n        }\n        if (origin === 'to') {\n          setTimeout(() => inputRefTo.current?.focus(), 0);\n        }\n        setOpenOrigin(undefined);\n      }\n    },\n    [openOrigin],\n  );\n\n  const handleDayPickerSelect = useCallback(\n    (date: DatePickerTypes.RangeDate | undefined) => {\n      if (!date) {\n        setInputValue({ from: '', to: '' });\n        setSelectedDate(undefined);\n        onChange?.(undefined);\n      } else {\n        setInputValue((prev) => ({\n          ...prev,\n          from: formatDate(date.from ?? prev.from, format),\n          ...(date.to ? { to: formatDate(date.to, format) } : {}),\n        }));\n        setSelectedDate(date);\n        onChange?.(date);\n      }\n\n      // if the picker openOrigin is 'from', and the selected from date is the same as the new date, then close the picker (we assume the user is done selecting the range)\n      if (openOrigin === 'from' && selectedDate?.from === date?.from) {\n        handleOnPickerOpenChange(false, 'to');\n        // if the picker openOrigin is 'to', and the selected from date exists, then close the picker (we assume the user is done selecting the range)\n      } else if (openOrigin === 'to' && date?.from) {\n        handleOnPickerOpenChange(false);\n        // if the picker openOrigin is 'from' and the selected from date exists, then switch to 'to' picker\n      } else if (openOrigin === 'from' && date?.from) {\n        setOpenOrigin('to');\n      }\n    },\n    [format, handleOnPickerOpenChange, onChange, openOrigin, selectedDate],\n  );\n\n  const handleInputChange = (key: 'from' | 'to') => (e: React.ChangeEvent<HTMLInputElement>) => {\n    setInputValue((prev) => ({\n      ...prev,\n      [key]: e.target.value,\n    }));\n    const parsedDate = parse(e.target.value, format, new Date());\n    if (isValid(parsedDate)) {\n      setInputValue((prev) => ({\n        ...prev,\n        [key]: formatDate(parsedDate ?? prev[key], format),\n      }));\n\n      setSelectedDate(\n        (prev) =>\n          ({\n            ...prev,\n            [key]: parsedDate,\n          }) as DatePickerTypes.RangeDate,\n      );\n      onChange?.({ ...selectedDate, [key]: parsedDate } as DatePickerTypes.RangeDate);\n    } else {\n      setSelectedDate(undefined);\n      onChange?.(undefined);\n    }\n  };\n\n  const handleOnKeyDown = (origin: 'from' | 'to') => (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === ' ') {\n      event.preventDefault();\n      togglePicker(origin);\n    }\n  };\n\n  return (\n    <Popover open={isPickerOpen} modal={true} onOpenChange={handleOnPickerOpenChange}>\n      <p\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        style={{\n          position: 'absolute',\n          width: '1px',\n          height: '1px',\n          padding: '0px',\n          margin: '-1px',\n          overflow: 'hidden',\n          clip: 'rect(0px, 0px, 0px, 0px)',\n          whiteSpace: 'nowrap',\n          borderWidth: '0px',\n        }}\n      >\n        {inputValue.to\n          ? `Selected date ${inputValue.from} to ${inputValue.to}`\n          : 'Please type or pick a date. Press space to open the calendar.'}\n      </p>\n      {picker === 'day' && (\n        <PopoverTrigger asChild={true}>\n          <SingleDatePickerTextInput\n            inputRef={inputRef}\n            className={classNames(`${DATE_PICKER_CLASS}-range`, className)}\n            size={size}\n            disabled={disabled}\n            invalid={invalid}\n            readOnly={true}\n            allowClear={false}\n            customPrefix={\n              <TextInput\n                inputRef={inputRefFrom}\n                className={`${DATE_PICKER_CLASS}-range-from`}\n                placeholder={placeholder?.from ?? 'Start date'}\n                disabled={disabled}\n                size={size}\n                value={inputValue.from}\n                onKeyDown={handleOnKeyDown('from')}\n                onChange={handleInputChange('from')}\n                wrapperProps={{\n                  onClick: () => !disabled && togglePicker('from'),\n                }}\n              />\n            }\n            customSuffix={\n              <>\n                <ArrowRight />\n                <TextInput\n                  inputRef={inputRefTo}\n                  className={`${DATE_PICKER_CLASS}-range-to`}\n                  placeholder={placeholder?.to ?? 'End date'}\n                  size={size}\n                  value={inputValue.to}\n                  disabled={disabled}\n                  wrapperProps={{\n                    onClick: () => !disabled && togglePicker('to'),\n                  }}\n                  onKeyDown={handleOnKeyDown('to')}\n                  onChange={handleInputChange('to')}\n                  allowClear={allowClear ? () => Boolean(selectedDate) : undefined}\n                  onClear={() => handleDayPickerSelect(undefined)}\n                />\n              </>\n            }\n            suffix={{\n              node: <CalendarEvent />,\n              onClick: () => !disabled && togglePicker('from'),\n            }}\n            type=\"text\"\n            aria-controls=\"dialog\"\n            aria-expanded={isPickerOpen}\n            aria-label=\"Open calendar to choose date\"\n            {...ariaProps}\n          />\n        </PopoverTrigger>\n      )}\n      <PopoverContent arrow={true} sideOffset={12}>\n        <Calendar\n          id={`calendar-${calendarId}`}\n          {...calendarProps}\n          autoFocus={true}\n          variant=\"range\"\n          selected={selectedDate}\n          month={selectedDate?.from ?? new Date()}\n          size={size === Sizes.XSmall ? Sizes.Small : size}\n          onSelect={handleDayPickerSelect}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n};\n\nexport default RangeDatePicker;\n"],"names":["RangeDatePicker","size","Sizes","picker","format","disabled","invalid","defaultValue","value","onChange","open","calendarProps","placeholder","allowClear","className","ariaProps","calendarId","useId","inputRef","useRef","inputRefFrom","inputRefTo","selectedDate","setSelectedDate","useState","openOrigin","setOpenOrigin","useEffect","inputValue","setInputValue","isPickerOpen","setIsPickerOpen","togglePicker","useCallback","origin","prev","handleOnPickerOpenChange","isOpen","_a","handleDayPickerSelect","date","formatDate","handleInputChange","key","e","parsedDate","parse","isValid","handleOnKeyDown","event","Popover","jsx","PopoverTrigger","SingleDatePickerTextInput","classNames","DATE_PICKER_CLASS","TextInput","jsxs","Fragment","ArrowRight","CalendarEvent","PopoverContent","Calendar"],"mappings":"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"}
+{"version":3,"file":"RangeDatePicker.js","sources":["../../../../../../src/components/DatePicker/components/RangeDatePicker/RangeDatePicker.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, useState } from 'react';\n\nimport { format as formatDate, isValid, parse } from 'date-fns';\nimport { DATE_PICKER_CLASS, Sizes } from 'acinguiux-ds-react-base/consts';\nimport classNames from 'classnames';\nimport type { DatePickerTypes } from 'acinguiux-ds-react-base/components/DatePicker';\n\nimport { Popover, PopoverContent, PopoverTrigger } from '../../../Popover/Popover';\nimport { CalendarEvent, ArrowRight } from '../../../Icon/components';\nimport { StyledCalendar, SingleDatePickerTextInput } from './RangeDatePicker.styles';\nimport type { IRangeDatePickerProps } from './RangeDatePicker.types';\nimport TextInput from '../../../TextInput/TextInput';\nimport { getNextOriginState, Origin, originToBound } from '../../utils/range';\n\nconst RangeDatePicker = ({\n  size = Sizes.Medium,\n  picker = 'day',\n  format = 'dd/MM/yyyy',\n  disabled,\n  invalid,\n  defaultValue,\n  value,\n  onChange,\n  open,\n  calendarProps,\n  placeholder,\n  allowClear,\n  closeOnComplete = true,\n  className,\n  ...ariaProps\n}: IRangeDatePickerProps) => {\n  const calendarId = useId();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const inputRefFrom = useRef<HTMLInputElement>(null);\n  const inputRefTo = useRef<HTMLInputElement>(null);\n\n  // Hold the selected date in state\n  const [selectedDate, setSelectedDate] = useState<DatePickerTypes.RangeDate | undefined>(defaultValue);\n  // Hold the input value in state\n  const [inputValue, setInputValue] = useState<{ from: string; to: string }>({\n    from: defaultValue?.from ? formatDate(defaultValue.from, format) : '',\n    to: defaultValue?.to ? formatDate(defaultValue.to, format) : '',\n  });\n  // openOrigin is used to track which input is currently open ('from' or 'to')\n  const [openOrigin, setOpenOrigin] = useState<Origin>();\n\n  useEffect(() => {\n    setSelectedDate(value);\n    setInputValue({\n      from: value?.from ? formatDate(value.from, format) : '',\n      to: value?.to ? formatDate(value.to, format) : '',\n    });\n  }, [value, format]);\n\n  // Hold the dialog visibility in state\n  const [isPickerOpen, setIsPickerOpen] = useState(open);\n\n  useEffect(() => {\n    setIsPickerOpen(open);\n  }, [open]);\n\n  const togglePicker = useCallback((origin: 'from' | 'to') => {\n    setOpenOrigin(origin);\n    setIsPickerOpen((prev) => !prev);\n  }, []);\n\n  const handleOnPickerOpenChange = useCallback(\n    (isOpen: boolean, origin: Origin = openOrigin) => {\n      setIsPickerOpen(isOpen);\n\n      if (origin) {\n        if (origin === 'from') {\n          setTimeout(() => inputRefFrom.current?.focus(), 0);\n        }\n        if (origin === 'to') {\n          setTimeout(() => inputRefTo.current?.focus(), 0);\n        }\n        setOpenOrigin(undefined);\n      }\n    },\n    [openOrigin],\n  );\n\n  const handleDayPickerSelect = useCallback(\n    (date: DatePickerTypes.RangeDate | undefined) => {\n      if (!date) {\n        setInputValue({ from: '', to: '' });\n        setSelectedDate(undefined);\n        onChange?.(undefined);\n      } else {\n        setInputValue((prev) => ({\n          from: (date.from ?? prev.from) ? formatDate(date.from ?? prev.from, format) : '',\n          to: date.to ? formatDate(date.to, format) : '',\n        }));\n        setSelectedDate(date);\n        onChange?.(date);\n      }\n\n      const { shouldClose, newOrigin } = getNextOriginState(date, selectedDate, openOrigin);\n\n      if (shouldClose && closeOnComplete) {\n        handleOnPickerOpenChange(false, newOrigin);\n      }\n      setOpenOrigin(newOrigin);\n    },\n    [format, closeOnComplete, handleOnPickerOpenChange, onChange, openOrigin, selectedDate],\n  );\n\n  const handleInputChange = (key: 'from' | 'to') => (e: React.ChangeEvent<HTMLInputElement>) => {\n    setInputValue((prev) => ({\n      ...prev,\n      [key]: e.target.value,\n    }));\n    const parsedDate = parse(e.target.value, format, new Date());\n    if (isValid(parsedDate)) {\n      setInputValue((prev) => ({\n        ...prev,\n        [key]: formatDate(parsedDate ?? prev[key], format),\n      }));\n\n      setSelectedDate(\n        (prev) =>\n          ({\n            ...prev,\n            [key]: parsedDate,\n          }) as DatePickerTypes.RangeDate,\n      );\n      onChange?.({ ...selectedDate, [key]: parsedDate } as DatePickerTypes.RangeDate);\n    } else {\n      setSelectedDate(undefined);\n      onChange?.(undefined);\n    }\n  };\n\n  const handleOnKeyDown = (origin: 'from' | 'to') => (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === ' ') {\n      event.preventDefault();\n      togglePicker(origin);\n    }\n  };\n\n  return (\n    <Popover open={isPickerOpen} modal={true} onOpenChange={handleOnPickerOpenChange}>\n      <p\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        style={{\n          position: 'absolute',\n          width: '1px',\n          height: '1px',\n          padding: '0px',\n          margin: '-1px',\n          overflow: 'hidden',\n          clip: 'rect(0px, 0px, 0px, 0px)',\n          whiteSpace: 'nowrap',\n          borderWidth: '0px',\n        }}\n      >\n        {inputValue.to\n          ? `Selected date ${inputValue.from} to ${inputValue.to}`\n          : 'Please type or pick a date. Press space to open the calendar.'}\n      </p>\n      {picker === 'day' && (\n        <PopoverTrigger asChild={true}>\n          <SingleDatePickerTextInput\n            inputRef={inputRef}\n            className={classNames(`${DATE_PICKER_CLASS}-range`, className)}\n            size={size}\n            disabled={disabled}\n            invalid={invalid}\n            readOnly={true}\n            allowClear={false}\n            customPrefix={\n              <TextInput\n                inputRef={inputRefFrom}\n                className={`${DATE_PICKER_CLASS}-range-from`}\n                placeholder={placeholder?.from ?? 'Start date'}\n                data-focused-popover={isPickerOpen && openOrigin === 'from'}\n                disabled={disabled}\n                size={size}\n                value={inputValue.from}\n                onKeyDown={handleOnKeyDown('from')}\n                onChange={handleInputChange('from')}\n                wrapperProps={{\n                  onClick: () => !disabled && togglePicker('from'),\n                }}\n              />\n            }\n            customSuffix={\n              <>\n                <ArrowRight />\n                <TextInput\n                  inputRef={inputRefTo}\n                  className={`${DATE_PICKER_CLASS}-range-to`}\n                  placeholder={placeholder?.to ?? 'End date'}\n                  size={size}\n                  value={inputValue.to}\n                  data-focused-popover={isPickerOpen && openOrigin === 'to'}\n                  disabled={disabled}\n                  wrapperProps={{\n                    onClick: () => !disabled && togglePicker('to'),\n                  }}\n                  onKeyDown={handleOnKeyDown('to')}\n                  onChange={handleInputChange('to')}\n                  allowClear={allowClear ? () => Boolean(selectedDate) : undefined}\n                  onClear={() => handleDayPickerSelect(undefined)}\n                />\n              </>\n            }\n            suffix={{\n              node: <CalendarEvent />,\n              onClick: () => !disabled && togglePicker('from'),\n            }}\n            type=\"text\"\n            aria-controls=\"dialog\"\n            aria-expanded={isPickerOpen}\n            aria-label=\"Open calendar to choose date\"\n            {...ariaProps}\n          />\n        </PopoverTrigger>\n      )}\n      <PopoverContent arrow={true} sideOffset={12}>\n        <StyledCalendar\n          id={`calendar-${calendarId}`}\n          {...calendarProps}\n          autoFocus={true}\n          variant=\"range\"\n          bound={originToBound(openOrigin)}\n          selected={selectedDate}\n          month={selectedDate?.from ?? new Date()}\n          size={size === Sizes.XSmall ? Sizes.Small : size}\n          onSelect={handleDayPickerSelect}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n};\n\nexport default RangeDatePicker;\n"],"names":["RangeDatePicker","size","Sizes","picker","format","disabled","invalid","defaultValue","value","onChange","open","calendarProps","placeholder","allowClear","closeOnComplete","className","ariaProps","calendarId","useId","inputRef","useRef","inputRefFrom","inputRefTo","selectedDate","setSelectedDate","useState","inputValue","setInputValue","formatDate","openOrigin","setOpenOrigin","useEffect","isPickerOpen","setIsPickerOpen","togglePicker","useCallback","origin","prev","handleOnPickerOpenChange","isOpen","handleDayPickerSelect","date","shouldClose","newOrigin","getNextOriginState","handleInputChange","key","parsedDate","parse","isValid","handleOnKeyDown","event","Popover","jsx","PopoverTrigger","SingleDatePickerTextInput","classNames","DATE_PICKER_CLASS","TextInput","jsxs","Fragment","ArrowRight","CalendarEvent","PopoverContent","StyledCalendar","originToBound"],"mappings":"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"}

package/build/esm/components/DatePicker/components/RangeDatePicker/RangeDatePicker.styles.d.ts

@@ -1,4 +1,6 @@
 import type { FC } from 'react';
+import type { DatePickerTypes } from '../../../../react-base/src/components/DatePicker';
 import type { ITextInputPropsImpl } from '../../../TextInput/TextInput.types';
+export declare const StyledCalendar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Calendar/Calendar.types").ICalendarProps<"single" | "range"> & import("styled-components/dist/types").BaseObject, DatePickerTypes.ICalendarProps & DatePickerTypes.IRangeCalendarProps>> & string & Omit<(<T extends "single" | "range">({ variant, size, picker, selected, zIndex, onSelect, month, footer, onMonthChange, showToday, ...props }: import("../Calendar/Calendar.types").ICalendarProps<T>) => import("react/jsx-runtime").JSX.Element | null), keyof import("react").Component<any, {}, any>>;
 export declare const SingleDatePickerTextInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../../../..").ITextInputProps & import("../../../../react-base/src/components/TextInput/TextInput.types.js").InternalProps, never>> & string & Omit<FC<ITextInputPropsImpl>, keyof import("react").Component<any, {}, any>>;
 //# sourceMappingURL=RangeDatePicker.styles.d.ts.map

package/build/esm/components/DatePicker/components/RangeDatePicker/RangeDatePicker.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RangeDatePicker.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/DatePicker/components/RangeDatePicker/RangeDatePicker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAShC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAG9E,eAAO,MAAM,yBAAyB,0UAgCrC,CAAC"}
+{"version":3,"file":"RangeDatePicker.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/DatePicker/components/RangeDatePicker/RangeDatePicker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAMhC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+CAA+C,CAAC;AAIrF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAI9E,eAAO,MAAM,cAAc,+mBAA2F,CAAC;AAEvH,eAAO,MAAM,yBAAyB,0UAgCrC,CAAC"}

package/build/esm/components/DatePicker/components/RangeDatePicker/RangeDatePicker.styles.js

@@ -1,11 +1,12 @@
-import { styled as i } from "styled-components";
+import { styled as a } from "styled-components";
 import { Variables as e } from "../../../../react-base/src/theme/types/layer.js";
 import { consts as t } from "../../../../react-base/src/components/Input/Input.consts.js";
 import { Sizes as n } from "../../../../react-base/src/consts/index.js";
-import { TextInputWrapper as a } from "../../../TextInput/TextInput.styles.js";
+import { TextInputWrapper as i } from "../../../TextInput/TextInput.styles.js";
 import d from "../../../TextInput/TextInput.js";
 import { Flexbox as p } from "../../../Flexbox/Flexbox.styles.js";
-const g = i(d)(
+import c from "../Calendar/Calendar.js";
+const $ = a(c)``, h = a(d)(
   ({ theme: o, size: r = `${n.Medium}` }) => `
   &, &:hover, &:active {
     background-color: ${o.layer({ foundation: "surface" })[e.BackgroundFoundation]};
@@ -19,11 +20,11 @@ const g = i(d)(
       display: none;
     }
 
-    > ${a} {
+    > ${i} {
       border-radius: ${t[r].affixBorderRadius}px;
-     &:hover, &:active, &:focus-within {
-        background-color: ${o.layer({ selectedProminence: "subtle" })[e.BackgroundSelected]};
-     }
+      &:hover, &:active, &:focus-within, &:has([data-focused-popover="true"]) {
+          background-color: ${o.layer({ selectedProminence: "subtle" })[e.BackgroundSelected]};
+      }
       flex: 1 1 0;
       width: auto;
       border-color: transparent;
@@ -39,6 +40,7 @@ const g = i(d)(
 `
 );
 export {
-  g as SingleDatePickerTextInput
+  h as SingleDatePickerTextInput,
+  $ as StyledCalendar
 };
 //# sourceMappingURL=RangeDatePicker.styles.js.map

package/build/esm/components/DatePicker/components/RangeDatePicker/RangeDatePicker.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeDatePicker.styles.js","sources":["../../../../../../src/components/DatePicker/components/RangeDatePicker/RangeDatePicker.styles.ts"],"sourcesContent":["import type { FC } from 'react';\n\nimport { styled } from 'styled-components';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { InputConsts } from 'acinguiux-ds-react-base/components/Input/index.js';\nimport { Sizes } from 'acinguiux-ds-react-base/consts';\n\nimport { TextInputWrapper } from '../../../TextInput/TextInput.styles';\nimport TextInput from '../../../TextInput/TextInput';\nimport type { ITextInputPropsImpl } from '../../../TextInput/TextInput.types';\nimport { Flexbox } from '../../../Flexbox/Flexbox.styles';\n\nexport const SingleDatePickerTextInput = styled(TextInput as FC<ITextInputPropsImpl>)(\n  ({ theme, size = `${Sizes.Medium}` }) => `\n  &, &:hover, &:active {\n    background-color: ${theme.layer({ foundation: 'surface' })[Variables.BackgroundFoundation]};\n  }\n\n  & > ${Flexbox} {\n    flex-direction: row;\n    gap: ${InputConsts.consts[size].containerGap}px;\n\n    > input {\n      display: none;\n    }\n\n    > ${TextInputWrapper} {\n      border-radius: ${InputConsts.consts[size].affixBorderRadius}px;\n     &:hover, &:active, &:focus-within {\n        background-color: ${theme.layer({ selectedProminence: 'subtle' })[Variables.BackgroundSelected]};\n     }\n      flex: 1 1 0;\n      width: auto;\n      border-color: transparent;\n      background: none;\n      padding: 0;\n      min-height: auto;\n    }\n\n    > svg {\n      display: inline-flex;\n    }\n  }\n`,\n);\n"],"names":["SingleDatePickerTextInput","styled","TextInput","theme","size","Sizes","Variables","Flexbox","InputConsts.consts","TextInputWrapper"],"mappings":";;;;;;;AAYO,MAAMA,IAA4BC,EAAOC,CAAoC;AAAA,EAClF,CAAC,EAAE,OAAAC,GAAO,MAAAC,IAAO,GAAGC,EAAM,MAAM,SAAS;AAAA;AAAA,wBAEnBF,EAAM,MAAM,EAAE,YAAY,WAAW,EAAEG,EAAU,oBAAoB,CAAC;AAAA;AAAA;AAAA,QAGtFC,CAAO;AAAA;AAAA,WAEJC,EAAmBJ,CAAI,EAAE,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMxCK,CAAgB;AAAA,uBACDD,EAAmBJ,CAAI,EAAE,iBAAiB;AAAA;AAAA,4BAErCD,EAAM,MAAM,EAAE,oBAAoB,UAAU,EAAEG,EAAU,kBAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAevG;"}
+{"version":3,"file":"RangeDatePicker.styles.js","sources":["../../../../../../src/components/DatePicker/components/RangeDatePicker/RangeDatePicker.styles.ts"],"sourcesContent":["import type { FC } from 'react';\n\nimport { styled } from 'styled-components';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { InputConsts } from 'acinguiux-ds-react-base/components/Input';\nimport { Sizes } from 'acinguiux-ds-react-base/consts';\nimport type { DatePickerTypes } from 'acinguiux-ds-react-base/components/DatePicker';\n\nimport { TextInputWrapper } from '../../../TextInput/TextInput.styles';\nimport TextInput from '../../../TextInput/TextInput';\nimport type { ITextInputPropsImpl } from '../../../TextInput/TextInput.types';\nimport { Flexbox } from '../../../Flexbox/Flexbox.styles';\nimport Calendar from '../Calendar/Calendar';\n\nexport const StyledCalendar = styled(Calendar)<DatePickerTypes.ICalendarProps & DatePickerTypes.IRangeCalendarProps>``;\n\nexport const SingleDatePickerTextInput = styled(TextInput as FC<ITextInputPropsImpl>)(\n  ({ theme, size = `${Sizes.Medium}` }) => `\n  &, &:hover, &:active {\n    background-color: ${theme.layer({ foundation: 'surface' })[Variables.BackgroundFoundation]};\n  }\n\n  & > ${Flexbox} {\n    flex-direction: row;\n    gap: ${InputConsts.consts[size].containerGap}px;\n\n    > input {\n      display: none;\n    }\n\n    > ${TextInputWrapper} {\n      border-radius: ${InputConsts.consts[size].affixBorderRadius}px;\n      &:hover, &:active, &:focus-within, &:has([data-focused-popover=\"true\"]) {\n          background-color: ${theme.layer({ selectedProminence: 'subtle' })[Variables.BackgroundSelected]};\n      }\n      flex: 1 1 0;\n      width: auto;\n      border-color: transparent;\n      background: none;\n      padding: 0;\n      min-height: auto;\n    }\n\n    > svg {\n      display: inline-flex;\n    }\n  }\n`,\n);\n"],"names":["StyledCalendar","styled","Calendar","SingleDatePickerTextInput","TextInput","theme","size","Sizes","Variables","Flexbox","InputConsts.consts","TextInputWrapper"],"mappings":";;;;;;;;AAcO,MAAMA,IAAiBC,EAAOC,CAAQ,KAEhCC,IAA4BF,EAAOG,CAAoC;AAAA,EAClF,CAAC,EAAE,OAAAC,GAAO,MAAAC,IAAO,GAAGC,EAAM,MAAM,SAAS;AAAA;AAAA,wBAEnBF,EAAM,MAAM,EAAE,YAAY,WAAW,EAAEG,EAAU,oBAAoB,CAAC;AAAA;AAAA;AAAA,QAGtFC,CAAO;AAAA;AAAA,WAEJC,EAAmBJ,CAAI,EAAE,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMxCK,CAAgB;AAAA,uBACDD,EAAmBJ,CAAI,EAAE,iBAAiB;AAAA;AAAA,8BAEnCD,EAAM,MAAM,EAAE,oBAAoB,UAAU,EAAEG,EAAU,kBAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAezG;"}

package/build/esm/components/DatePicker/components/RangeDatePicker/RangeDatePicker.types.d.ts

@@ -1,10 +1,10 @@
 import type { AriaAttributes, FocusEvent, MouseEvent, CSSProperties } from 'react';
 import type { DatePickerTypes } from '../../../../react-base/src/components/DatePicker';
-import { DayPickerProps } from '../Calendar/Calendar';
+import type { ICalendarProps } from '../Calendar/Calendar.types';
 export type IRangeDatePickerProps = AriaAttributes & DatePickerTypes.IRangePickerProps & {
     className?: string;
     style?: CSSProperties;
-    calendarProps: DatePickerTypes.ICalendarProps & DayPickerProps<'range'>;
+    calendarProps: ICalendarProps<'range'>;
     onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
     onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
     onClick?: (event: MouseEvent<HTMLInputElement>) => void;

package/build/esm/components/DatePicker/components/RangeDatePicker/RangeDatePicker.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RangeDatePicker.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/DatePicker/components/RangeDatePicker/RangeDatePicker.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEnF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+CAA+C,CAAC;AAErF,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,MAAM,qBAAqB,GAAG,cAAc,GAChD,eAAe,CAAC,iBAAiB,GAAG;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,aAAa,EAAE,eAAe,CAAC,cAAc,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC;IACxE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACvD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxD,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACpE,CAAC"}
+{"version":3,"file":"RangeDatePicker.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/DatePicker/components/RangeDatePicker/RangeDatePicker.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEnF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+CAA+C,CAAC;AAErF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAEjE,MAAM,MAAM,qBAAqB,GAAG,cAAc,GAChD,eAAe,CAAC,iBAAiB,GAAG;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,aAAa,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACvD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxD,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACpE,CAAC"}