@consumidor-positivo/aurora 0.0.161 → 0.0.163
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Alert/index.es.js +1 -1
- package/dist/components/Calendar/index.es.js +2 -2
- package/dist/components/CalendarHeader/index.es.js +2 -2
- package/dist/components/Checkbox/index.es.js +1 -1
- package/dist/components/Datepicker/index.es.js +3 -3
- package/dist/components/PortalHolder/index.es.js +1 -1
- package/dist/components/Segment/index.es.js +1 -1
- package/dist/components/SelectField/index.es.js +1 -1
- package/dist/components/Tabs/index.d.ts +5 -5
- package/dist/components/Tabs/index.es.js +4 -1
- package/dist/components/Tabs/index.es.js.map +1 -1
- package/dist/components/Tabs/styles.css +1 -1
- package/dist/components/Tag/index.es.js +1 -1
- package/dist/{index-DcE5oHTB.js → index-CXqMC069.js} +3 -3
- package/dist/{index-DcE5oHTB.js.map → index-CXqMC069.js.map} +1 -1
- package/dist/{index-wo9iM9yw.js → index-MXOwpC7T.js} +2 -2
- package/dist/{index-wo9iM9yw.js.map → index-MXOwpC7T.js.map} +1 -1
- package/dist/{index-ChXllGFe.js → index-_eN79cRy.js} +2 -2
- package/dist/{index-ChXllGFe.js.map → index-_eN79cRy.js.map} +1 -1
- package/dist/main.d.ts +1 -0
- package/package.json +1 -1
|
@@ -8,9 +8,9 @@ import { IconCheck } from "../icons/IconCheck/index.es.js";
|
|
|
8
8
|
import { IconClock } from "../icons/IconClock/index.es.js";
|
|
9
9
|
import { IconInfo } from "../icons/IconInfo/index.es.js";
|
|
10
10
|
import { IconX } from "../icons/IconX/index.es.js";
|
|
11
|
+
import { h as COLOR_NEUTRAL_70, C as COLOR_SUCCESS_50, b as COLOR_ERROR_50, W as COLOR_WARNING_50, a1 as COLOR_INFO_50 } from "../../tokens-D1vxtHgK.js";
|
|
11
12
|
import { Conditional } from "../Conditional/index.es.js";
|
|
12
13
|
import { Text } from "../Text/index.es.js";
|
|
13
|
-
import { h as COLOR_NEUTRAL_70, C as COLOR_SUCCESS_50, b as COLOR_ERROR_50, W as COLOR_WARNING_50, a1 as COLOR_INFO_50 } from "../../tokens-D1vxtHgK.js";
|
|
14
14
|
import './styles.css';const Alert = ({
|
|
15
15
|
showIcon = true,
|
|
16
16
|
status = "info",
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import "react/jsx-runtime";
|
|
2
2
|
import "../../index-CweZ_OcN.js";
|
|
3
|
-
import "../../index-
|
|
3
|
+
import "../../index-_eN79cRy.js";
|
|
4
4
|
import "../Button/index.es.js";
|
|
5
5
|
import "../PortalHolder/index.es.js";
|
|
6
|
-
import { a } from "../../index-
|
|
6
|
+
import { a } from "../../index-CXqMC069.js";
|
|
7
7
|
export {
|
|
8
8
|
a as DatepickerCalendar
|
|
9
9
|
};
|
|
@@ -3,8 +3,8 @@ import "../../index-CweZ_OcN.js";
|
|
|
3
3
|
import "../Icon/index.es.js";
|
|
4
4
|
import "../icons/IconChevronLeft/index.es.js";
|
|
5
5
|
import "../icons/IconChevronRight/index.es.js";
|
|
6
|
-
import "../../index-
|
|
7
|
-
import { C } from "../../index-
|
|
6
|
+
import "../../index-MXOwpC7T.js";
|
|
7
|
+
import { C } from "../../index-_eN79cRy.js";
|
|
8
8
|
export {
|
|
9
9
|
C as CalendarHeader
|
|
10
10
|
};
|
|
@@ -3,9 +3,9 @@ import $dbSRa$react__default, { useState, useEffect } from "react";
|
|
|
3
3
|
import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
4
4
|
import "../Icon/index.es.js";
|
|
5
5
|
import { IconCheck } from "../icons/IconCheck/index.es.js";
|
|
6
|
+
import { n as COLOR_NEUTRAL_00 } from "../../tokens-D1vxtHgK.js";
|
|
6
7
|
import { F as Field } from "../../index-ZE6zszxw.js";
|
|
7
8
|
import { Conditional } from "../Conditional/index.es.js";
|
|
8
|
-
import { n as COLOR_NEUTRAL_00 } from "../../tokens-D1vxtHgK.js";
|
|
9
9
|
import { Text } from "../Text/index.es.js";
|
|
10
10
|
import './styles.css';const CheckboxField = ({
|
|
11
11
|
label,
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { B as BREAKPOINT_MD, c as COLOR_NEUTRAL_40 } from "../../tokens-D1vxtHgK.js";
|
|
2
3
|
import "../../index-CweZ_OcN.js";
|
|
3
4
|
import "../Icon/index.es.js";
|
|
4
5
|
import { IconCalendar } from "../icons/IconCalendar/index.es.js";
|
|
5
6
|
import { InputField } from "../InputField/index.es.js";
|
|
6
|
-
import { g as getDefaultDate, D as DDMMYYYY, a as DatepickerCalendar, A as AUCalendarDate } from "../../index-
|
|
7
|
+
import { g as getDefaultDate, D as DDMMYYYY, a as DatepickerCalendar, A as AUCalendarDate } from "../../index-CXqMC069.js";
|
|
7
8
|
import { useRef, useState, useMemo, useEffect } from "react";
|
|
8
9
|
import { a as above } from "../../screen-DfYo7XQ_.js";
|
|
9
|
-
import { u as useOutsideClick } from "../../index-
|
|
10
|
-
import { B as BREAKPOINT_MD, c as COLOR_NEUTRAL_40 } from "../../tokens-D1vxtHgK.js";
|
|
10
|
+
import { u as useOutsideClick } from "../../index-MXOwpC7T.js";
|
|
11
11
|
import './styles.css';function useDatepicker({
|
|
12
12
|
value,
|
|
13
13
|
defaultValue = "empty",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx, Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { a as above } from "../../screen-DfYo7XQ_.js";
|
|
3
|
-
import { Portal } from "../Portal/index.es.js";
|
|
4
3
|
import { B as BREAKPOINT_MD } from "../../tokens-D1vxtHgK.js";
|
|
4
|
+
import { Portal } from "../Portal/index.es.js";
|
|
5
5
|
const PortalHolder = ({ withPortal, children }) => {
|
|
6
6
|
const shouldUsePortal = !above(BREAKPOINT_MD) && withPortal;
|
|
7
7
|
if (shouldUsePortal) return /* @__PURE__ */ jsx(Portal, { children });
|
|
@@ -4,7 +4,7 @@ import "../Icon/index.es.js";
|
|
|
4
4
|
import "../icons/IconChevronDown/index.es.js";
|
|
5
5
|
import "../icons/IconChevronLeft/index.es.js";
|
|
6
6
|
import "../icons/IconX/index.es.js";
|
|
7
|
-
import { S } from "../../index-
|
|
7
|
+
import { S } from "../../index-MXOwpC7T.js";
|
|
8
8
|
export {
|
|
9
9
|
S as Segment
|
|
10
10
|
};
|
|
@@ -9,10 +9,10 @@ import { IconSlash } from "../icons/IconSlash/index.es.js";
|
|
|
9
9
|
import { Modal } from "../Modal/index.es.js";
|
|
10
10
|
import { Text } from "../Text/index.es.js";
|
|
11
11
|
import { Conditional } from "../Conditional/index.es.js";
|
|
12
|
+
import { c as COLOR_NEUTRAL_40 } from "../../tokens-D1vxtHgK.js";
|
|
12
13
|
import { i as isMobile } from "../../isMobile-RyKhTreE.js";
|
|
13
14
|
import { F as Field } from "../../index-ZE6zszxw.js";
|
|
14
15
|
import { useState, useRef, useEffect } from "react";
|
|
15
|
-
import { c as COLOR_NEUTRAL_40 } from "../../tokens-D1vxtHgK.js";
|
|
16
16
|
import './styles.css';const useSelectField = (options, initialValue, onChange, onBlur, disabled, register, autocomplete = false, fullScreenOptions = false) => {
|
|
17
17
|
var _a;
|
|
18
18
|
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
|
|
2
|
-
export
|
|
3
|
-
tabs:
|
|
2
|
+
export type TabsProps = {
|
|
3
|
+
tabs: TabItemProps[];
|
|
4
4
|
areTabsHidden?: boolean;
|
|
5
5
|
initialTab?: string;
|
|
6
6
|
onClick: (value: string) => void;
|
|
7
|
-
}
|
|
8
|
-
export
|
|
7
|
+
};
|
|
8
|
+
export type TabItemProps = {
|
|
9
9
|
tab: string;
|
|
10
10
|
title: string;
|
|
11
11
|
children?: React.ReactElement;
|
|
12
12
|
icon?: React.ReactNode;
|
|
13
|
-
}
|
|
13
|
+
};
|
|
14
14
|
export declare const Tabs: ({ tabs, initialTab, onClick, areTabsHidden, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
15
|
export default Tabs;
|
|
@@ -2,7 +2,7 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
3
3
|
import { Conditional } from "../Conditional/index.es.js";
|
|
4
4
|
import { Button } from "../Button/index.es.js";
|
|
5
|
-
import { useState } from "react";
|
|
5
|
+
import { useState, useEffect } from "react";
|
|
6
6
|
import './styles.css';const Tabs = ({
|
|
7
7
|
tabs,
|
|
8
8
|
initialTab,
|
|
@@ -12,6 +12,9 @@ import './styles.css';const Tabs = ({
|
|
|
12
12
|
const [isClicked, setIsClicked] = useState(false);
|
|
13
13
|
const [currButton, setCurrButton] = useState(initialTab ?? "");
|
|
14
14
|
const [activeTab, setActiveTab] = useState(initialTab);
|
|
15
|
+
useEffect(() => {
|
|
16
|
+
setActiveTab(initialTab);
|
|
17
|
+
}, [initialTab]);
|
|
15
18
|
const handleClick = (item) => {
|
|
16
19
|
onClick(item.tab);
|
|
17
20
|
setCurrButton(item.tab);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../lib/components/Tabs/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { Conditional } from '@components/misc'\nimport { Button } from '@components/Button'\nimport { useState } from 'react'\nimport './styles.scss'\n\nexport
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../lib/components/Tabs/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { Conditional } from '@components/misc'\nimport { Button } from '@components/Button'\nimport { useEffect, useState } from 'react'\nimport './styles.scss'\n\nexport type TabsProps = {\n tabs: TabItemProps[]\n areTabsHidden?: boolean\n initialTab?: string\n onClick: (value: string) => void\n}\n\nexport type TabItemProps = {\n tab: string\n title: string\n children?: React.ReactElement\n icon?: React.ReactNode\n}\n\nexport const Tabs = ({\n tabs,\n initialTab,\n onClick,\n areTabsHidden,\n}: TabsProps) => {\n const [isClicked, setIsClicked] = useState(false)\n const [currButton, setCurrButton] = useState(initialTab ?? '')\n const [activeTab, setActiveTab] = useState(initialTab)\n\n useEffect(() => {\n setActiveTab(initialTab)\n }, [initialTab])\n\n const handleClick = (item: TabItemProps) => {\n onClick(item.tab)\n setCurrButton(item.tab)\n setActiveTab(item.tab)\n setIsClicked(true)\n }\n\n const buttonClass = (item: TabItemProps) => {\n const isActive =\n (isClicked && item.tab === currButton) || activeTab === item.tab\n return classNames('au-tabs__button', {\n active: isActive,\n })\n }\n\n return (\n <>\n <Conditional\n condition={!areTabsHidden}\n renderIf={\n <div className=\"au-tabs\">\n <div className=\"au-tabs__container\">\n {tabs.map((item: TabItemProps) => {\n return (\n <Button\n key={`au-tabs-${item.tab}`}\n className={buttonClass(item)}\n type={'outlined'}\n onClick={() => handleClick(item)}>\n {item.icon}\n {item.title}\n </Button>\n )\n })}\n </div>\n </div>\n }\n renderElse={null}\n />\n\n {tabs.map(({ children, tab }: TabItemProps) => {\n return (\n <div\n className={`au-tabs__children children-${tab}`}\n key={`au-tabs-${tab}`}>\n <Conditional\n condition={currButton === tab || activeTab === tab}\n renderIf={children}\n />\n </div>\n )\n })}\n </>\n )\n}\n\nexport default Tabs\n"],"names":[],"mappings":";;;;;AAoBO,MAAM,OAAO,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAiB;AACf,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,cAAc,EAAE;AAC7D,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,UAAU;AAErD,YAAU,MAAM;AACd,iBAAa,UAAU;AAAA,EAAA,GACtB,CAAC,UAAU,CAAC;AAET,QAAA,cAAc,CAAC,SAAuB;AAC1C,YAAQ,KAAK,GAAG;AAChB,kBAAc,KAAK,GAAG;AACtB,iBAAa,KAAK,GAAG;AACrB,iBAAa,IAAI;AAAA,EAAA;AAGb,QAAA,cAAc,CAAC,SAAuB;AAC1C,UAAM,WACH,aAAa,KAAK,QAAQ,cAAe,cAAc,KAAK;AAC/D,WAAO,WAAW,mBAAmB;AAAA,MACnC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,CAAC;AAAA,QACZ,UACE,oBAAC,OAAI,EAAA,WAAU,WACb,UAAA,oBAAC,OAAI,EAAA,WAAU,sBACZ,UAAA,KAAK,IAAI,CAAC,SAAuB;AAE9B,iBAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAW,YAAY,IAAI;AAAA,cAC3B,MAAM;AAAA,cACN,SAAS,MAAM,YAAY,IAAI;AAAA,cAC9B,UAAA;AAAA,gBAAK,KAAA;AAAA,gBACL,KAAK;AAAA,cAAA;AAAA,YAAA;AAAA,YALD,WAAW,KAAK,GAAG;AAAA,UAAA;AAAA,QAM1B,CAEH,GACH,EACF,CAAA;AAAA,QAEF,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,IAEC,KAAK,IAAI,CAAC,EAAE,UAAU,UAAwB;AAE3C,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,8BAA8B,GAAG;AAAA,UAE5C,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,eAAe,OAAO,cAAc;AAAA,cAC/C,UAAU;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,QAJK,WAAW,GAAG;AAAA,MAAA;AAAA,IAKrB,CAEH;AAAA,EACH,EAAA,CAAA;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.au-tabs__container{display:flex;gap:16px;white-space:nowrap;overflow-x:scroll}.au-tabs__container::-webkit-scrollbar{display:none}@media (min-width: 600px){.au-tabs__container{overflow:unset}}.au-tabs__button{font-size:14px;font-weight:600;border-color:#e2e4e9;color:#454a54}.au-tabs__button .au-icon svg,.au-tabs__button svg{color:#454a54}.au-tabs__button.active{background-color:#fafbff;border-color:#9abcff;color:#0048db}.au-tabs__button.active .au-icon svg,.au-tabs__button.active svg{color:#0048db}.au-tabs__children{margin:
|
|
1
|
+
.au-tabs__container{display:flex;gap:16px;white-space:nowrap;overflow-x:scroll}.au-tabs__container::-webkit-scrollbar{display:none}@media (min-width: 600px){.au-tabs__container{overflow:unset}}.au-tabs__button{font-size:14px;font-weight:600;border-color:#e2e4e9;color:#454a54}.au-tabs__button .au-icon svg,.au-tabs__button svg{color:#454a54}.au-tabs__button.active{background-color:#fafbff;border-color:#9abcff;color:#0048db}.au-tabs__button.active .au-icon svg,.au-tabs__button.active svg{color:#0048db}.au-tabs__children{margin-top:24px}@media (min-width: 600px){.au-tabs__children{margin-top:32px}}
|
|
@@ -6,8 +6,8 @@ import { IconAlertTriangle } from "../icons/IconAlertTriangle/index.es.js";
|
|
|
6
6
|
import { IconCheck } from "../icons/IconCheck/index.es.js";
|
|
7
7
|
import { IconInfo } from "../icons/IconInfo/index.es.js";
|
|
8
8
|
import { IconSlash } from "../icons/IconSlash/index.es.js";
|
|
9
|
-
import { Conditional } from "../Conditional/index.es.js";
|
|
10
9
|
import { C as COLOR_SUCCESS_50, b as COLOR_ERROR_50, W as COLOR_WARNING_50, a1 as COLOR_INFO_50, E as COLOR_BRAND_CYAN_50, h as COLOR_NEUTRAL_70 } from "../../tokens-D1vxtHgK.js";
|
|
10
|
+
import { Conditional } from "../Conditional/index.es.js";
|
|
11
11
|
import './styles.css';const Tag = ({
|
|
12
12
|
status,
|
|
13
13
|
border = "square",
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { c as classNames } from "./index-CweZ_OcN.js";
|
|
3
|
-
import { $ as $35ea8db9cb2ccb90$export$99faa760c7908e4f, a as $dfd62f934fc76fed$export$e1aef45b828286de, C as CalendarHeader, b as $dfd62f934fc76fed$export$5bd780d491cfc46c, c as $dfd62f934fc76fed$export$22e2d15eaa4d2377, d as $dfd62f934fc76fed$export$ad2135cac3a11b3d, e as $dfd62f934fc76fed$export$e11f8ba65d857bff, f as $dfd62f934fc76fed$export$5d847498420df57b } from "./index-
|
|
3
|
+
import { $ as $35ea8db9cb2ccb90$export$99faa760c7908e4f, a as $dfd62f934fc76fed$export$e1aef45b828286de, C as CalendarHeader, b as $dfd62f934fc76fed$export$5bd780d491cfc46c, c as $dfd62f934fc76fed$export$22e2d15eaa4d2377, d as $dfd62f934fc76fed$export$ad2135cac3a11b3d, e as $dfd62f934fc76fed$export$e11f8ba65d857bff, f as $dfd62f934fc76fed$export$5d847498420df57b } from "./index-_eN79cRy.js";
|
|
4
4
|
import { Button } from "./components/Button/index.es.js";
|
|
5
5
|
import { PortalHolder } from "./components/PortalHolder/index.es.js";
|
|
6
6
|
import { useRef, useState, useEffect } from "react";
|
|
7
|
-
import { a as above } from "./screen-DfYo7XQ_.js";
|
|
8
7
|
import { B as BREAKPOINT_MD } from "./tokens-D1vxtHgK.js";
|
|
8
|
+
import { a as above } from "./screen-DfYo7XQ_.js";
|
|
9
9
|
import './components/index/styles2.css';const DDMMYYYY = {
|
|
10
10
|
placeholder: "DD/MM/YYYY",
|
|
11
11
|
/** Apply DD/MM/YYYY to a field text while typing */
|
|
@@ -238,4 +238,4 @@ export {
|
|
|
238
238
|
DatepickerCalendar as a,
|
|
239
239
|
getDefaultDate as g
|
|
240
240
|
};
|
|
241
|
-
//# sourceMappingURL=index-
|
|
241
|
+
//# sourceMappingURL=index-CXqMC069.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-DcE5oHTB.js","sources":["../lib/components/form/Datepicker/helpers.ts","../lib/components/form/Datepicker/Calendar/hook.ts","../lib/components/form/Datepicker/Calendar/index.tsx"],"sourcesContent":["import { AUCalendarDateShape, DefaultValue, FormatAdapter } from './types'\n\n/**\n * This adapter Handle the input format and convert to a more\n * universal structure, that can be used accross all subcomponents in the datepicker.\n * if we need to support another format like dd-mm-yyyy, we only need to create another adapter\n * following this model\n */\nexport const DDMMYYYY: FormatAdapter = {\n placeholder: 'DD/MM/YYYY',\n /** Apply DD/MM/YYYY to a field text while typing */\n maskDate(dateStr) {\n let fmtInputDate = dateStr\n fmtInputDate = fmtInputDate.replace(/\\D/g, '') // Remove non-numeric characters\n\n if (fmtInputDate.length > 2) {\n fmtInputDate = `${fmtInputDate.slice(0, 2)}/${fmtInputDate.slice(2)}`\n }\n if (fmtInputDate.length > 5) {\n fmtInputDate = `${fmtInputDate.slice(0, 5)}/${fmtInputDate.slice(5)}`\n }\n return fmtInputDate\n },\n /** Check if a string is on DD/MM/YYYY Format */\n validateFormat(dateStr) {\n const pattern = /^\\d{2}\\/\\d{2}\\/\\d{4}$/\n return pattern.test(dateStr)\n },\n /** Covert a DD/MM/YYYY to the datepicker date structure */\n toCalendarDate(dateStr): AUCalendarDateShape {\n const [day, month, year] = dateStr.split('/').map(Number)\n return AUCalendarDate(day, month, year)\n },\n /** Covert a Date in the datepicker structure into a DD/MM/YYYY string */\n toString(dateObj: AUCalendarDateShape): string {\n const fmtNumber = (digit: number) =>\n String(digit).length === 1 ? `0${digit}` : String(digit)\n const { day, month, year } = dateObj\n\n return `${fmtNumber(day)}/${fmtNumber(month)}/${year}`\n },\n /** Check if a DD/MM/YYYY is a valid date */\n validate(dateStr, minValue, maxValue): boolean {\n const [day, month, year] = dateStr.split('/').map(Number)\n const date = new Date(year, month - 1, day)\n const isOlderThanMinDate =\n !!minValue &&\n date < new Date(minValue.year, minValue.month - 1, minValue.day)\n\n const exceedsMaxDate =\n !!maxValue &&\n date > new Date(maxValue.year, maxValue.month - 1, maxValue.day)\n\n return (\n date.getDate() === day &&\n date.getMonth() + 1 === month &&\n date.getFullYear() === year &&\n !isOlderThanMinDate &&\n !exceedsMaxDate\n )\n },\n}\n\nexport function AUCalendarDate(\n day: number,\n month: number,\n year: number,\n): AUCalendarDateShape {\n return {\n day,\n month,\n year,\n }\n}\n\nexport function getDefaultDate(\n defaultDateProp: DefaultValue,\n): AUCalendarDateShape | null {\n if (defaultDateProp == 'empty') return null\n if (defaultDateProp === 'now') {\n const now = new Date()\n return AUCalendarDate(now.getDate(), now.getMonth() + 1, now.getFullYear())\n }\n\n return defaultDateProp\n}\n","import { useEffect, useRef, useState } from 'react'\nimport { CalendarDate } from '@internationalized/date'\nimport { BREAKPOINT_MD } from '@core/tokens'\nimport { above } from '@core/utils/screen'\nimport { AUCalendarDate } from '../helpers'\nimport { AUCalendarDateShape } from '../types'\n\ntype UseCalendarProps = {\n minValue: AUCalendarDateShape\n maxValue: AUCalendarDateShape\n value?: AUCalendarDateShape | null\n isVisible: boolean\n onClose: () => void\n onChange: (date: AUCalendarDateShape) => void\n}\n\nexport function useCalendar({\n onChange,\n onClose,\n minValue,\n maxValue,\n value,\n isVisible,\n}: UseCalendarProps) {\n const rootEl = useRef<HTMLDivElement>(null)\n const [enteredAnimation, setEnteredAnimation] = useState(false)\n const [calendarInternalState, setCalendarInternalState] =\n useState<CalendarDate>()\n\n const [delayedIsVisible, setDelayedIsVisible] = useState(false)\n\n const usedMinValue = new CalendarDate(\n minValue.year,\n minValue.month,\n minValue.day,\n )\n const usedMaxValue = new CalendarDate(\n maxValue.year,\n maxValue.month,\n maxValue.day,\n )\n\n useEffect(() => {\n if (!value) return\n const { day, month, year } = value\n setCalendarInternalState(new CalendarDate(year, month, day))\n }, [value])\n\n useEffect(() => {\n if (isVisible) {\n setDelayedIsVisible(true)\n return delayComponentMount()\n } else {\n return delayComponentUnmount()\n }\n }, [isVisible])\n\n function delayComponentMount(delayTime = 100) {\n const t = setTimeout(() => {\n setEnteredAnimation(true)\n }, delayTime)\n\n return () => {\n clearTimeout(t)\n }\n }\n\n function delayComponentUnmount(delayTime = 200) {\n setEnteredAnimation(false)\n const timoutToUnmount = setTimeout(() => {\n setDelayedIsVisible(false)\n }, delayTime)\n\n return () => {\n clearTimeout(timoutToUnmount)\n }\n }\n\n function fmtWeekday(day: string) {\n const capitalized = `${day.charAt(0).toUpperCase()}${day.slice(1)}`\n return capitalized.replace('.', '')\n }\n\n function triggerChange(date: CalendarDate) {\n const { day, month, year } = date\n onChange(AUCalendarDate(day, month, year))\n onClose()\n }\n\n function calendarChange(date: CalendarDate) {\n setCalendarInternalState(date)\n if (!above(BREAKPOINT_MD)) return\n triggerChange(date)\n }\n\n function actionChange() {\n if (calendarInternalState) {\n triggerChange(calendarInternalState)\n }\n }\n\n return {\n actionChange,\n calendarChange,\n fmtWeekday,\n usedMaxValue,\n usedMinValue,\n rootEl,\n calendarInternalState,\n enteredAnimation,\n delayedIsVisible,\n }\n}\n","import classNames from 'classnames'\nimport {\n Calendar,\n CalendarCell,\n CalendarGrid,\n CalendarGridBody,\n CalendarGridHeader,\n CalendarHeaderCell,\n} from 'react-aria-components'\nimport { Button } from '@components/Button'\nimport { CalendarHeader } from '../CalendarHeader'\nimport { PortalHolder } from '../PortalHolder'\n\n\nimport { AUCalendarDateShape } from '../types'\nimport { useCalendar } from './hook'\nimport './styles.scss'\n\ntype DatepickerCalendarProps = {\n withPortal?: boolean\n minValue: AUCalendarDateShape\n maxValue: AUCalendarDateShape\n value?: AUCalendarDateShape | null\n onClose: () => void\n onChange: (date: AUCalendarDateShape) => void\n isVisible: boolean\n}\n\nexport const DatepickerCalendar = ({\n onClose,\n withPortal,\n minValue,\n maxValue,\n value,\n onChange,\n isVisible,\n}: DatepickerCalendarProps) => {\n const {\n rootEl,\n usedMaxValue,\n usedMinValue,\n calendarInternalState,\n calendarChange,\n fmtWeekday,\n actionChange,\n enteredAnimation,\n delayedIsVisible,\n } = useCalendar({\n onChange,\n onClose,\n minValue,\n maxValue,\n value,\n isVisible,\n })\n\n const componentClass = classNames('au-datepicker__calendar', {\n 'au-datepicker__calendar--visible': enteredAnimation,\n })\n\n if (!delayedIsVisible) return\n\n return (\n <PortalHolder withPortal={withPortal}>\n <div className={componentClass} ref={rootEl}>\n <div className=\"au-datepicker__calendar-backdrop\" onClick={onClose} />\n <div className=\"au-datepicker__calendar-card\">\n <Calendar\n autoFocus\n className=\"au-datepicker__calendar-base\"\n minValue={usedMinValue}\n maxValue={usedMaxValue}\n value={calendarInternalState}\n onChange={calendarChange}>\n <CalendarHeader defaultFocusDate={calendarInternalState} />\n <CalendarGrid\n className=\"au-datepicker__calendar-grid\"\n weekdayStyle=\"short\">\n <CalendarGridHeader>\n {(day) => (\n <CalendarHeaderCell className=\"au-datepicker__calendar-weekday\">\n {fmtWeekday(day)}\n </CalendarHeaderCell>\n )}\n </CalendarGridHeader>\n <CalendarGridBody>\n {(date) => (\n <CalendarCell\n className=\"au-datepicker__calendar-day\"\n date={date}\n />\n )}\n </CalendarGridBody>\n </CalendarGrid>\n </Calendar>\n <div className=\"au-datepicker__calendar-actions-dock\">\n <Button\n type=\"outlined\"\n className=\"au-datepicker__calendar-cancel\"\n expand=\"x\"\n onClick={onClose}>\n Cancelar\n </Button>\n <Button\n disabled={!calendarInternalState}\n onClick={actionChange}\n expand=\"x\">\n Confirmar\n </Button>\n </div>\n </div>\n </div>\n </PortalHolder>\n )\n}\n"],"names":["CalendarDate","Calendar","CalendarGrid","CalendarGridHeader","CalendarHeaderCell","CalendarGridBody","CalendarCell"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index-CXqMC069.js","sources":["../lib/components/form/Datepicker/helpers.ts","../lib/components/form/Datepicker/Calendar/hook.ts","../lib/components/form/Datepicker/Calendar/index.tsx"],"sourcesContent":["import { AUCalendarDateShape, DefaultValue, FormatAdapter } from './types'\n\n/**\n * This adapter Handle the input format and convert to a more\n * universal structure, that can be used accross all subcomponents in the datepicker.\n * if we need to support another format like dd-mm-yyyy, we only need to create another adapter\n * following this model\n */\nexport const DDMMYYYY: FormatAdapter = {\n placeholder: 'DD/MM/YYYY',\n /** Apply DD/MM/YYYY to a field text while typing */\n maskDate(dateStr) {\n let fmtInputDate = dateStr\n fmtInputDate = fmtInputDate.replace(/\\D/g, '') // Remove non-numeric characters\n\n if (fmtInputDate.length > 2) {\n fmtInputDate = `${fmtInputDate.slice(0, 2)}/${fmtInputDate.slice(2)}`\n }\n if (fmtInputDate.length > 5) {\n fmtInputDate = `${fmtInputDate.slice(0, 5)}/${fmtInputDate.slice(5)}`\n }\n return fmtInputDate\n },\n /** Check if a string is on DD/MM/YYYY Format */\n validateFormat(dateStr) {\n const pattern = /^\\d{2}\\/\\d{2}\\/\\d{4}$/\n return pattern.test(dateStr)\n },\n /** Covert a DD/MM/YYYY to the datepicker date structure */\n toCalendarDate(dateStr): AUCalendarDateShape {\n const [day, month, year] = dateStr.split('/').map(Number)\n return AUCalendarDate(day, month, year)\n },\n /** Covert a Date in the datepicker structure into a DD/MM/YYYY string */\n toString(dateObj: AUCalendarDateShape): string {\n const fmtNumber = (digit: number) =>\n String(digit).length === 1 ? `0${digit}` : String(digit)\n const { day, month, year } = dateObj\n\n return `${fmtNumber(day)}/${fmtNumber(month)}/${year}`\n },\n /** Check if a DD/MM/YYYY is a valid date */\n validate(dateStr, minValue, maxValue): boolean {\n const [day, month, year] = dateStr.split('/').map(Number)\n const date = new Date(year, month - 1, day)\n const isOlderThanMinDate =\n !!minValue &&\n date < new Date(minValue.year, minValue.month - 1, minValue.day)\n\n const exceedsMaxDate =\n !!maxValue &&\n date > new Date(maxValue.year, maxValue.month - 1, maxValue.day)\n\n return (\n date.getDate() === day &&\n date.getMonth() + 1 === month &&\n date.getFullYear() === year &&\n !isOlderThanMinDate &&\n !exceedsMaxDate\n )\n },\n}\n\nexport function AUCalendarDate(\n day: number,\n month: number,\n year: number,\n): AUCalendarDateShape {\n return {\n day,\n month,\n year,\n }\n}\n\nexport function getDefaultDate(\n defaultDateProp: DefaultValue,\n): AUCalendarDateShape | null {\n if (defaultDateProp == 'empty') return null\n if (defaultDateProp === 'now') {\n const now = new Date()\n return AUCalendarDate(now.getDate(), now.getMonth() + 1, now.getFullYear())\n }\n\n return defaultDateProp\n}\n","import { useEffect, useRef, useState } from 'react'\nimport { CalendarDate } from '@internationalized/date'\nimport { BREAKPOINT_MD } from '@core/tokens'\nimport { above } from '@core/utils/screen'\nimport { AUCalendarDate } from '../helpers'\nimport { AUCalendarDateShape } from '../types'\n\ntype UseCalendarProps = {\n minValue: AUCalendarDateShape\n maxValue: AUCalendarDateShape\n value?: AUCalendarDateShape | null\n isVisible: boolean\n onClose: () => void\n onChange: (date: AUCalendarDateShape) => void\n}\n\nexport function useCalendar({\n onChange,\n onClose,\n minValue,\n maxValue,\n value,\n isVisible,\n}: UseCalendarProps) {\n const rootEl = useRef<HTMLDivElement>(null)\n const [enteredAnimation, setEnteredAnimation] = useState(false)\n const [calendarInternalState, setCalendarInternalState] =\n useState<CalendarDate>()\n\n const [delayedIsVisible, setDelayedIsVisible] = useState(false)\n\n const usedMinValue = new CalendarDate(\n minValue.year,\n minValue.month,\n minValue.day,\n )\n const usedMaxValue = new CalendarDate(\n maxValue.year,\n maxValue.month,\n maxValue.day,\n )\n\n useEffect(() => {\n if (!value) return\n const { day, month, year } = value\n setCalendarInternalState(new CalendarDate(year, month, day))\n }, [value])\n\n useEffect(() => {\n if (isVisible) {\n setDelayedIsVisible(true)\n return delayComponentMount()\n } else {\n return delayComponentUnmount()\n }\n }, [isVisible])\n\n function delayComponentMount(delayTime = 100) {\n const t = setTimeout(() => {\n setEnteredAnimation(true)\n }, delayTime)\n\n return () => {\n clearTimeout(t)\n }\n }\n\n function delayComponentUnmount(delayTime = 200) {\n setEnteredAnimation(false)\n const timoutToUnmount = setTimeout(() => {\n setDelayedIsVisible(false)\n }, delayTime)\n\n return () => {\n clearTimeout(timoutToUnmount)\n }\n }\n\n function fmtWeekday(day: string) {\n const capitalized = `${day.charAt(0).toUpperCase()}${day.slice(1)}`\n return capitalized.replace('.', '')\n }\n\n function triggerChange(date: CalendarDate) {\n const { day, month, year } = date\n onChange(AUCalendarDate(day, month, year))\n onClose()\n }\n\n function calendarChange(date: CalendarDate) {\n setCalendarInternalState(date)\n if (!above(BREAKPOINT_MD)) return\n triggerChange(date)\n }\n\n function actionChange() {\n if (calendarInternalState) {\n triggerChange(calendarInternalState)\n }\n }\n\n return {\n actionChange,\n calendarChange,\n fmtWeekday,\n usedMaxValue,\n usedMinValue,\n rootEl,\n calendarInternalState,\n enteredAnimation,\n delayedIsVisible,\n }\n}\n","import classNames from 'classnames'\nimport {\n Calendar,\n CalendarCell,\n CalendarGrid,\n CalendarGridBody,\n CalendarGridHeader,\n CalendarHeaderCell,\n} from 'react-aria-components'\nimport { Button } from '@components/Button'\nimport { CalendarHeader } from '../CalendarHeader'\nimport { PortalHolder } from '../PortalHolder'\n\n\nimport { AUCalendarDateShape } from '../types'\nimport { useCalendar } from './hook'\nimport './styles.scss'\n\ntype DatepickerCalendarProps = {\n withPortal?: boolean\n minValue: AUCalendarDateShape\n maxValue: AUCalendarDateShape\n value?: AUCalendarDateShape | null\n onClose: () => void\n onChange: (date: AUCalendarDateShape) => void\n isVisible: boolean\n}\n\nexport const DatepickerCalendar = ({\n onClose,\n withPortal,\n minValue,\n maxValue,\n value,\n onChange,\n isVisible,\n}: DatepickerCalendarProps) => {\n const {\n rootEl,\n usedMaxValue,\n usedMinValue,\n calendarInternalState,\n calendarChange,\n fmtWeekday,\n actionChange,\n enteredAnimation,\n delayedIsVisible,\n } = useCalendar({\n onChange,\n onClose,\n minValue,\n maxValue,\n value,\n isVisible,\n })\n\n const componentClass = classNames('au-datepicker__calendar', {\n 'au-datepicker__calendar--visible': enteredAnimation,\n })\n\n if (!delayedIsVisible) return\n\n return (\n <PortalHolder withPortal={withPortal}>\n <div className={componentClass} ref={rootEl}>\n <div className=\"au-datepicker__calendar-backdrop\" onClick={onClose} />\n <div className=\"au-datepicker__calendar-card\">\n <Calendar\n autoFocus\n className=\"au-datepicker__calendar-base\"\n minValue={usedMinValue}\n maxValue={usedMaxValue}\n value={calendarInternalState}\n onChange={calendarChange}>\n <CalendarHeader defaultFocusDate={calendarInternalState} />\n <CalendarGrid\n className=\"au-datepicker__calendar-grid\"\n weekdayStyle=\"short\">\n <CalendarGridHeader>\n {(day) => (\n <CalendarHeaderCell className=\"au-datepicker__calendar-weekday\">\n {fmtWeekday(day)}\n </CalendarHeaderCell>\n )}\n </CalendarGridHeader>\n <CalendarGridBody>\n {(date) => (\n <CalendarCell\n className=\"au-datepicker__calendar-day\"\n date={date}\n />\n )}\n </CalendarGridBody>\n </CalendarGrid>\n </Calendar>\n <div className=\"au-datepicker__calendar-actions-dock\">\n <Button\n type=\"outlined\"\n className=\"au-datepicker__calendar-cancel\"\n expand=\"x\"\n onClick={onClose}>\n Cancelar\n </Button>\n <Button\n disabled={!calendarInternalState}\n onClick={actionChange}\n expand=\"x\">\n Confirmar\n </Button>\n </div>\n </div>\n </div>\n </PortalHolder>\n )\n}\n"],"names":["CalendarDate","Calendar","CalendarGrid","CalendarGridHeader","CalendarHeaderCell","CalendarGridBody","CalendarCell"],"mappings":";;;;;;;;AAQO,MAAM,WAA0B;AAAA,EACrC,aAAa;AAAA;AAAA,EAEb,SAAS,SAAS;AAChB,QAAI,eAAe;AACJ,mBAAA,aAAa,QAAQ,OAAO,EAAE;AAEzC,QAAA,aAAa,SAAS,GAAG;AACZ,qBAAA,GAAG,aAAa,MAAM,GAAG,CAAC,CAAC,IAAI,aAAa,MAAM,CAAC,CAAC;AAAA,IACrE;AACI,QAAA,aAAa,SAAS,GAAG;AACZ,qBAAA,GAAG,aAAa,MAAM,GAAG,CAAC,CAAC,IAAI,aAAa,MAAM,CAAC,CAAC;AAAA,IACrE;AACO,WAAA;AAAA,EACT;AAAA;AAAA,EAEA,eAAe,SAAS;AACtB,UAAM,UAAU;AACT,WAAA,QAAQ,KAAK,OAAO;AAAA,EAC7B;AAAA;AAAA,EAEA,eAAe,SAA8B;AACrC,UAAA,CAAC,KAAK,OAAO,IAAI,IAAI,QAAQ,MAAM,GAAG,EAAE,IAAI,MAAM;AACjD,WAAA,eAAe,KAAK,OAAO,IAAI;AAAA,EACxC;AAAA;AAAA,EAEA,SAAS,SAAsC;AAC7C,UAAM,YAAY,CAAC,UACjB,OAAO,KAAK,EAAE,WAAW,IAAI,IAAI,KAAK,KAAK,OAAO,KAAK;AACzD,UAAM,EAAE,KAAK,OAAO,KAAA,IAAS;AAEtB,WAAA,GAAG,UAAU,GAAG,CAAC,IAAI,UAAU,KAAK,CAAC,IAAI,IAAI;AAAA,EACtD;AAAA;AAAA,EAEA,SAAS,SAAS,UAAU,UAAmB;AACvC,UAAA,CAAC,KAAK,OAAO,IAAI,IAAI,QAAQ,MAAM,GAAG,EAAE,IAAI,MAAM;AACxD,UAAM,OAAO,IAAI,KAAK,MAAM,QAAQ,GAAG,GAAG;AAC1C,UAAM,qBACJ,CAAC,CAAC,YACF,OAAO,IAAI,KAAK,SAAS,MAAM,SAAS,QAAQ,GAAG,SAAS,GAAG;AAEjE,UAAM,iBACJ,CAAC,CAAC,YACF,OAAO,IAAI,KAAK,SAAS,MAAM,SAAS,QAAQ,GAAG,SAAS,GAAG;AAEjE,WACE,KAAK,QAAc,MAAA,OACnB,KAAK,SAAS,IAAI,MAAM,SACxB,KAAK,YAAY,MAAM,QACvB,CAAC,sBACD,CAAC;AAAA,EAEL;AACF;AAEgB,SAAA,eACd,KACA,OACA,MACqB;AACd,SAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;AAEO,SAAS,eACd,iBAC4B;AACxB,MAAA,mBAAmB,QAAgB,QAAA;AACvC,MAAI,oBAAoB,OAAO;AACvB,UAAA,0BAAU;AACT,WAAA,eAAe,IAAI,QAAA,GAAW,IAAI,SAAa,IAAA,GAAG,IAAI,YAAA,CAAa;AAAA,EAC5E;AAEO,SAAA;AACT;ACrEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACb,QAAA,SAAS,OAAuB,IAAI;AAC1C,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,KAAK;AAC9D,QAAM,CAAC,uBAAuB,wBAAwB,IACpD,SAAuB;AAEzB,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,KAAK;AAE9D,QAAM,eAAe,IAAIA;AAAAA,IACvB,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,EAAA;AAEX,QAAM,eAAe,IAAIA;AAAAA,IACvB,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,EAAA;AAGX,YAAU,MAAM;AACd,QAAI,CAAC,MAAO;AACZ,UAAM,EAAE,KAAK,OAAO,KAAA,IAAS;AAC7B,6BAAyB,IAAIA,0CAAa,MAAM,OAAO,GAAG,CAAC;AAAA,EAAA,GAC1D,CAAC,KAAK,CAAC;AAEV,YAAU,MAAM;AACd,QAAI,WAAW;AACb,0BAAoB,IAAI;AACxB,aAAO,oBAAoB;AAAA,IAAA,OACtB;AACL,aAAO,sBAAsB;AAAA,IAC/B;AAAA,EAAA,GACC,CAAC,SAAS,CAAC;AAEL,WAAA,oBAAoB,YAAY,KAAK;AACtC,UAAA,IAAI,WAAW,MAAM;AACzB,0BAAoB,IAAI;AAAA,OACvB,SAAS;AAEZ,WAAO,MAAM;AACX,mBAAa,CAAC;AAAA,IAAA;AAAA,EAElB;AAES,WAAA,sBAAsB,YAAY,KAAK;AAC9C,wBAAoB,KAAK;AACnB,UAAA,kBAAkB,WAAW,MAAM;AACvC,0BAAoB,KAAK;AAAA,OACxB,SAAS;AAEZ,WAAO,MAAM;AACX,mBAAa,eAAe;AAAA,IAAA;AAAA,EAEhC;AAEA,WAAS,WAAW,KAAa;AAC/B,UAAM,cAAc,GAAG,IAAI,OAAO,CAAC,EAAE,YAAa,CAAA,GAAG,IAAI,MAAM,CAAC,CAAC;AAC1D,WAAA,YAAY,QAAQ,KAAK,EAAE;AAAA,EACpC;AAEA,WAAS,cAAc,MAAoB;AACzC,UAAM,EAAE,KAAK,OAAO,KAAA,IAAS;AAC7B,aAAS,eAAe,KAAK,OAAO,IAAI,CAAC;AACjC;EACV;AAEA,WAAS,eAAe,MAAoB;AAC1C,6BAAyB,IAAI;AACzB,QAAA,CAAC,MAAM,aAAa,EAAG;AAC3B,kBAAc,IAAI;AAAA,EACpB;AAEA,WAAS,eAAe;AACtB,QAAI,uBAAuB;AACzB,oBAAc,qBAAqB;AAAA,IACrC;AAAA,EACF;AAEO,SAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;ACpFO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA+B;AACvB,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,YAAY;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAEK,QAAA,iBAAiB,WAAW,2BAA2B;AAAA,IAC3D,oCAAoC;AAAA,EAAA,CACrC;AAED,MAAI,CAAC,iBAAkB;AAGrB,SAAA,oBAAC,gBAAa,YACZ,UAAA,qBAAC,SAAI,WAAW,gBAAgB,KAAK,QACnC,UAAA;AAAA,IAAA,oBAAC,OAAI,EAAA,WAAU,oCAAmC,SAAS,SAAS;AAAA,IACpE,qBAAC,OAAI,EAAA,WAAU,gCACb,UAAA;AAAA,MAAA;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,WAAS;AAAA,UACT,WAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,OAAO;AAAA,UACP,UAAU;AAAA,UACV,UAAA;AAAA,YAAC,oBAAA,gBAAA,EAAe,kBAAkB,sBAAuB,CAAA;AAAA,YACzD;AAAA,cAACC;AAAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,cAAa;AAAA,gBACb,UAAA;AAAA,kBAAC,oBAAAC,2CAAA,EACE,UAAC,CAAA,QACC,oBAAAC,2CAAA,EAAmB,WAAU,mCAC3B,UAAA,WAAW,GAAG,EAAA,CACjB,EAEJ,CAAA;AAAA,kBACA,oBAACC,2CACE,EAAA,UAAA,CAAC,SACA;AAAA,oBAACC;AAAAA,oBAAA;AAAA,sBACC,WAAU;AAAA,sBACV;AAAA,oBAAA;AAAA,kBAAA,GAGN;AAAA,gBAAA;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,MACA,qBAAC,OAAI,EAAA,WAAU,wCACb,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,QAAO;AAAA,YACP,SAAS;AAAA,YAAS,UAAA;AAAA,UAAA;AAAA,QAEpB;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,UAAU,CAAC;AAAA,YACX,SAAS;AAAA,YACT,QAAO;AAAA,YAAI,UAAA;AAAA,UAAA;AAAA,QAEb;AAAA,MAAA,GACF;AAAA,IAAA,GACF;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;"}
|
|
@@ -5,8 +5,8 @@ import { IconChevronDown } from "./components/icons/IconChevronDown/index.es.js"
|
|
|
5
5
|
import { IconChevronLeft } from "./components/icons/IconChevronLeft/index.es.js";
|
|
6
6
|
import { IconX } from "./components/icons/IconX/index.es.js";
|
|
7
7
|
import { useState, useRef, useEffect } from "react";
|
|
8
|
-
import { a as above } from "./screen-DfYo7XQ_.js";
|
|
9
8
|
import { B as BREAKPOINT_MD } from "./tokens-D1vxtHgK.js";
|
|
9
|
+
import { a as above } from "./screen-DfYo7XQ_.js";
|
|
10
10
|
import './components/index/styles3.css';function useOutsideClick({
|
|
11
11
|
rootEl,
|
|
12
12
|
breakpoint,
|
|
@@ -138,4 +138,4 @@ export {
|
|
|
138
138
|
Segment as S,
|
|
139
139
|
useOutsideClick as u
|
|
140
140
|
};
|
|
141
|
-
//# sourceMappingURL=index-
|
|
141
|
+
//# sourceMappingURL=index-MXOwpC7T.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-
|
|
1
|
+
{"version":3,"file":"index-MXOwpC7T.js","sources":["../lib/core/hooks/useOutsideClick.ts","../lib/components/form/Datepicker/Segment/hook.ts","../lib/components/form/Datepicker/Segment/index.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { above } from '../utils/screen'\n\ntype UseOutsideClickProps = {\n rootEl: React.RefObject<HTMLDivElement>\n breakpoint?: string\n onLoseFocusCB: () => void\n}\n\nexport function useOutsideClick({\n rootEl,\n breakpoint,\n onLoseFocusCB,\n}: UseOutsideClickProps) {\n const [setupListener, setSetupListener] = useState(false)\n\n function listenOutsideClick() {\n if (breakpoint && !above(breakpoint)) return\n document.addEventListener('mousedown', handleLoseFocus)\n setSetupListener(true)\n }\n\n function clearOutsideClickListenner() {\n if (setupListener) {\n document.removeEventListener('mousedown', handleLoseFocus)\n setSetupListener(false)\n }\n }\n\n function handleLoseFocus(ev: MouseEvent | FocusEvent) {\n if (!rootEl.current) return\n\n const clickedOutside = !rootEl.current.contains(ev.target as Node)\n\n if (clickedOutside) {\n onLoseFocusCB()\n clearOutsideClickListenner()\n }\n }\n\n return {\n listenOutsideClick,\n }\n}\n","import { useEffect, useRef, useState } from 'react'\nimport { BREAKPOINT_MD } from '@core/tokens'\nimport { useOutsideClick } from '@core/hooks/useOutsideClick'\n\nimport { SegmentItem } from '../types'\n\ntype UseSegmentProps = {\n options: SegmentItem[]\n currentValue: string | number\n onSelect: (option: SegmentItem) => void\n}\n\nexport function useSegment({\n options,\n currentValue,\n onSelect,\n}: UseSegmentProps) {\n const [isListOpen, setIsListOpen] = useState(false)\n const rootEl = useRef<HTMLDivElement>(null)\n const selectedItem = useRef<HTMLLIElement>(null)\n const currentItem = options.find((item) => item.value === currentValue)\n const { listenOutsideClick } = useOutsideClick({\n rootEl,\n breakpoint: BREAKPOINT_MD,\n onLoseFocusCB: closeList,\n })\n\n useEffect(() => {\n if (selectedItem.current && isListOpen) {\n selectedItem.current.scrollIntoView({ block: 'center', inline: 'center' })\n }\n }, [isListOpen])\n\n function openList() {\n setIsListOpen(true)\n listenOutsideClick()\n }\n\n function closeList() {\n setIsListOpen(false)\n }\n\n function handleSelectItem(option: SegmentItem) {\n onSelect(option)\n setIsListOpen(false)\n }\n\n return {\n openList,\n closeList,\n isListOpen,\n rootEl,\n currentItem,\n handleSelectItem,\n selectedItem,\n }\n}\n","import classNames from 'classnames'\nimport { IconChevronDown, IconChevronLeft, IconX } from '@components/icons'\n\nimport { useSegment } from './hook'\nimport { SegmentItem } from '../types'\nimport './styles.scss'\n\ntype SegmentProps = {\n mobileTitle: string\n options: SegmentItem[]\n onSelect: (option: SegmentItem) => void\n currentValue: string | number\n minValue?: Date\n maxValue?: Date\n}\n\nexport const Segment = ({\n currentValue,\n options,\n mobileTitle,\n onSelect,\n}: SegmentProps) => {\n const {\n rootEl,\n isListOpen,\n openList,\n closeList,\n currentItem,\n handleSelectItem,\n selectedItem,\n } = useSegment({\n options,\n currentValue,\n onSelect,\n })\n\n return (\n <div\n ref={rootEl}\n tabIndex={0}\n className={classNames('au-datepicker__segment', {\n 'au-datepicker__segment--open': isListOpen,\n })}>\n <div className=\"au-datepicker__segment-input\" onClick={openList}>\n {currentItem?.label}\n <IconChevronDown />\n </div>\n <div className=\"au-datepicker__segment-list-holder\">\n <div className=\"au-datepicker__segment-list-header\">\n <div onClick={closeList}>\n <IconChevronLeft />\n </div>\n <h4 className=\"au-datepicker__segment-title\">{mobileTitle}</h4>\n <div onClick={closeList}>\n <IconX />\n </div>\n </div>\n <ul className=\"au-datepicker__segment-list\">\n {options.map((option, idx) => {\n const isSelectedItem = option.value === currentValue\n return (\n <li\n key={`au-datepicker-segment-li-${option.value}-${idx}`}\n onClick={() => handleSelectItem(option)}\n ref={isSelectedItem ? selectedItem : null}\n className={classNames('au-datepicker__segment-list-item', {\n 'au-datepicker__segment-list-item--active': isSelectedItem,\n })}>\n {option.label}\n </li>\n )\n })}\n </ul>\n </div>\n </div>\n )\n}\n"],"names":[],"mappings":";;;;;;;;;AASO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AAExD,WAAS,qBAAqB;AAC5B,QAAI,cAAc,CAAC,MAAM,UAAU,EAAG;AAC7B,aAAA,iBAAiB,aAAa,eAAe;AACtD,qBAAiB,IAAI;AAAA,EACvB;AAEA,WAAS,6BAA6B;AACpC,QAAI,eAAe;AACR,eAAA,oBAAoB,aAAa,eAAe;AACzD,uBAAiB,KAAK;AAAA,IACxB;AAAA,EACF;AAEA,WAAS,gBAAgB,IAA6B;AAChD,QAAA,CAAC,OAAO,QAAS;AAErB,UAAM,iBAAiB,CAAC,OAAO,QAAQ,SAAS,GAAG,MAAc;AAEjE,QAAI,gBAAgB;AACJ;AACa;IAC7B;AAAA,EACF;AAEO,SAAA;AAAA,IACL;AAAA,EAAA;AAEJ;AC/BO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAC5C,QAAA,SAAS,OAAuB,IAAI;AACpC,QAAA,eAAe,OAAsB,IAAI;AAC/C,QAAM,cAAc,QAAQ,KAAK,CAAC,SAAS,KAAK,UAAU,YAAY;AAChE,QAAA,EAAE,mBAAmB,IAAI,gBAAgB;AAAA,IAC7C;AAAA,IACA,YAAY;AAAA,IACZ,eAAe;AAAA,EAAA,CAChB;AAED,YAAU,MAAM;AACV,QAAA,aAAa,WAAW,YAAY;AACtC,mBAAa,QAAQ,eAAe,EAAE,OAAO,UAAU,QAAQ,UAAU;AAAA,IAC3E;AAAA,EAAA,GACC,CAAC,UAAU,CAAC;AAEf,WAAS,WAAW;AAClB,kBAAc,IAAI;AACC;EACrB;AAEA,WAAS,YAAY;AACnB,kBAAc,KAAK;AAAA,EACrB;AAEA,WAAS,iBAAiB,QAAqB;AAC7C,aAAS,MAAM;AACf,kBAAc,KAAK;AAAA,EACrB;AAEO,SAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;ACxCO,MAAM,UAAU,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAoB;AACZ,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAGC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAW,WAAW,0BAA0B;AAAA,QAC9C,gCAAgC;AAAA,MAAA,CACjC;AAAA,MACD,UAAA;AAAA,QAAA,qBAAC,OAAI,EAAA,WAAU,gCAA+B,SAAS,UACpD,UAAA;AAAA,UAAa,2CAAA;AAAA,8BACb,iBAAgB,EAAA;AAAA,QAAA,GACnB;AAAA,QACA,qBAAC,OAAI,EAAA,WAAU,sCACb,UAAA;AAAA,UAAC,qBAAA,OAAA,EAAI,WAAU,sCACb,UAAA;AAAA,YAAA,oBAAC,OAAI,EAAA,SAAS,WACZ,UAAA,oBAAC,kBAAgB,CAAA,GACnB;AAAA,YACC,oBAAA,MAAA,EAAG,WAAU,gCAAgC,UAAY,aAAA;AAAA,gCACzD,OAAI,EAAA,SAAS,WACZ,UAAA,oBAAC,QAAM,CAAA,GACT;AAAA,UAAA,GACF;AAAA,UACA,oBAAC,QAAG,WAAU,+BACX,kBAAQ,IAAI,CAAC,QAAQ,QAAQ;AACtB,kBAAA,iBAAiB,OAAO,UAAU;AAEtC,mBAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,SAAS,MAAM,iBAAiB,MAAM;AAAA,gBACtC,KAAK,iBAAiB,eAAe;AAAA,gBACrC,WAAW,WAAW,oCAAoC;AAAA,kBACxD,4CAA4C;AAAA,gBAAA,CAC7C;AAAA,gBACA,UAAO,OAAA;AAAA,cAAA;AAAA,cANH,4BAA4B,OAAO,KAAK,IAAI,GAAG;AAAA,YAAA;AAAA,UASzD,CAAA,GACH;AAAA,QAAA,GACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -3,7 +3,7 @@ import "./index-CweZ_OcN.js";
|
|
|
3
3
|
import "./components/Icon/index.es.js";
|
|
4
4
|
import { IconChevronLeft } from "./components/icons/IconChevronLeft/index.es.js";
|
|
5
5
|
import { IconChevronRight } from "./components/icons/IconChevronRight/index.es.js";
|
|
6
|
-
import { S as Segment } from "./index-
|
|
6
|
+
import { S as Segment } from "./index-MXOwpC7T.js";
|
|
7
7
|
import $dbSRa$react__default, { createContext, useContext, useState, useRef, useCallback, useEffect, useMemo, forwardRef } from "react";
|
|
8
8
|
import "react-dom";
|
|
9
9
|
createContext(null);
|
|
@@ -5686,4 +5686,4 @@ export {
|
|
|
5686
5686
|
$dfd62f934fc76fed$export$e11f8ba65d857bff as e,
|
|
5687
5687
|
$dfd62f934fc76fed$export$5d847498420df57b as f
|
|
5688
5688
|
};
|
|
5689
|
-
//# sourceMappingURL=index-
|
|
5689
|
+
//# sourceMappingURL=index-_eN79cRy.js.map
|