@consumidor-positivo/aurora 0.8.0 → 0.9.0
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/BadgeInfo/index.es.js +1 -1
- package/dist/components/BadgeState/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/Tag/index.d.ts +5 -0
- package/dist/components/Tag/index.es.js +1 -1
- package/dist/components/Tag/index.es.js.map +1 -1
- package/dist/{index-BvQw_Wgb.js → index-BmRuA8Rb.js} +2 -2
- package/dist/{index-BvQw_Wgb.js.map → index-BmRuA8Rb.js.map} +1 -1
- package/dist/{index-vsYzka4t.js → index-DO2dHApF.js} +2 -2
- package/dist/{index-vsYzka4t.js.map → index-DO2dHApF.js.map} +1 -1
- package/dist/{index-NIxlEyxx.js → index-DRMgbgZb.js} +3 -3
- package/dist/{index-NIxlEyxx.js.map → index-DRMgbgZb.js.map} +1 -1
- package/dist/main.d.ts +1 -0
- package/dist/main.es.js +3 -1
- package/dist/main.es.js.map +1 -1
- package/dist/mixins.scss +11 -11
- 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 { d as COLOR_NEUTRAL_70, e as COLOR_WARNING_50, f as COLOR_INFO_50, b as COLOR_ERROR_50, C as COLOR_SUCCESS_50 } from "../../tokens-eEtvWiuX.js";
|
|
12
11
|
import { Conditional } from "../Conditional/index.es.js";
|
|
13
12
|
import { Text } from "../Text/index.es.js";
|
|
13
|
+
import { d as COLOR_NEUTRAL_70, e as COLOR_WARNING_50, f as COLOR_INFO_50, b as COLOR_ERROR_50, C as COLOR_SUCCESS_50 } from "../../tokens-eEtvWiuX.js";
|
|
14
14
|
import './styles.css';const Alert = ({
|
|
15
15
|
showIcon = true,
|
|
16
16
|
status = "info",
|
|
@@ -2,8 +2,8 @@ import { jsxs, jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { c as classNames } from "../../index-C6Q03EyZ.js";
|
|
3
3
|
import "../Icon/index.es.js";
|
|
4
4
|
import { IconInfo } from "../icons/IconInfo/index.es.js";
|
|
5
|
-
import { d as COLOR_NEUTRAL_70, g as COLOR_BRAND_CYAN_50, f as COLOR_INFO_50, e as COLOR_WARNING_50, b as COLOR_ERROR_50, C as COLOR_SUCCESS_50 } from "../../tokens-eEtvWiuX.js";
|
|
6
5
|
import { I as If, T as Then, E as Else } from "../../react-if.esm-Cozt8l48.js";
|
|
6
|
+
import { d as COLOR_NEUTRAL_70, g as COLOR_BRAND_CYAN_50, f as COLOR_INFO_50, e as COLOR_WARNING_50, b as COLOR_ERROR_50, C as COLOR_SUCCESS_50 } from "../../tokens-eEtvWiuX.js";
|
|
7
7
|
import './styles.css';const BadgeInfo = ({
|
|
8
8
|
status,
|
|
9
9
|
color = "primary",
|
|
@@ -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 { IconMoreHorizontal } from "../icons/IconMoreHorizontal/index.es.js";
|
|
9
|
-
import { g as COLOR_BRAND_CYAN_50, f as COLOR_INFO_50, e as COLOR_WARNING_50, b as COLOR_ERROR_50, C as COLOR_SUCCESS_50 } from "../../tokens-eEtvWiuX.js";
|
|
10
9
|
import { I as If, T as Then, E as Else } from "../../react-if.esm-Cozt8l48.js";
|
|
10
|
+
import { g as COLOR_BRAND_CYAN_50, f as COLOR_INFO_50, e as COLOR_WARNING_50, b as COLOR_ERROR_50, C as COLOR_SUCCESS_50 } from "../../tokens-eEtvWiuX.js";
|
|
11
11
|
import './styles.css';const BadgeState = ({
|
|
12
12
|
status,
|
|
13
13
|
isNumberBadge = false,
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import "react/jsx-runtime";
|
|
2
2
|
import "../../index-C6Q03EyZ.js";
|
|
3
|
-
import "../../index-
|
|
3
|
+
import "../../index-DO2dHApF.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-DRMgbgZb.js";
|
|
7
7
|
export {
|
|
8
8
|
a as DatepickerCalendar
|
|
9
9
|
};
|
|
@@ -3,8 +3,8 @@ import "../../index-C6Q03EyZ.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-BmRuA8Rb.js";
|
|
7
|
+
import { C } from "../../index-DO2dHApF.js";
|
|
8
8
|
export {
|
|
9
9
|
C as CalendarHeader
|
|
10
10
|
};
|
|
@@ -3,9 +3,9 @@ import $8WNJc$react__default, { useState, useEffect } from "react";
|
|
|
3
3
|
import { c as classNames } from "../../index-C6Q03EyZ.js";
|
|
4
4
|
import "../Icon/index.es.js";
|
|
5
5
|
import { IconCheck } from "../icons/IconCheck/index.es.js";
|
|
6
|
-
import { h as COLOR_NEUTRAL_00 } from "../../tokens-eEtvWiuX.js";
|
|
7
6
|
import { F as Field } from "../../index-ZE6zszxw.js";
|
|
8
7
|
import { Conditional } from "../Conditional/index.es.js";
|
|
8
|
+
import { h as COLOR_NEUTRAL_00 } from "../../tokens-eEtvWiuX.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-eEtvWiuX.js";
|
|
3
2
|
import "../../index-C6Q03EyZ.js";
|
|
4
3
|
import "../Icon/index.es.js";
|
|
5
4
|
import { IconCalendar } from "../icons/IconCalendar/index.es.js";
|
|
6
5
|
import { InputField } from "../InputField/index.es.js";
|
|
7
|
-
import { D as DDMMYYYY, g as getDefaultDate, a as DatepickerCalendar, A as AUCalendarDate } from "../../index-
|
|
6
|
+
import { D as DDMMYYYY, g as getDefaultDate, a as DatepickerCalendar, A as AUCalendarDate } from "../../index-DRMgbgZb.js";
|
|
8
7
|
import { useRef, useState, useMemo, useEffect } from "react";
|
|
9
8
|
import { a as above } from "../../screen-DfYo7XQ_.js";
|
|
10
|
-
import { u as useOutsideClick } from "../../index-
|
|
9
|
+
import { u as useOutsideClick } from "../../index-BmRuA8Rb.js";
|
|
10
|
+
import { B as BREAKPOINT_MD, c as COLOR_NEUTRAL_40 } from "../../tokens-eEtvWiuX.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 { B as BREAKPOINT_MD } from "../../tokens-eEtvWiuX.js";
|
|
4
3
|
import { Portal } from "../Portal/index.es.js";
|
|
4
|
+
import { B as BREAKPOINT_MD } from "../../tokens-eEtvWiuX.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-BmRuA8Rb.js";
|
|
8
8
|
export {
|
|
9
9
|
S as Segment
|
|
10
10
|
};
|
|
@@ -10,9 +10,9 @@ import { IconSlash } from "../icons/IconSlash/index.es.js";
|
|
|
10
10
|
import { Modal } from "../Modal/index.es.js";
|
|
11
11
|
import { Text } from "../Text/index.es.js";
|
|
12
12
|
import { Conditional } from "../Conditional/index.es.js";
|
|
13
|
-
import { c as COLOR_NEUTRAL_40 } from "../../tokens-eEtvWiuX.js";
|
|
14
13
|
import { i as isMobile } from "../../isMobile-RyKhTreE.js";
|
|
15
14
|
import { F as Field } from "../../index-ZE6zszxw.js";
|
|
15
|
+
import { c as COLOR_NEUTRAL_40 } from "../../tokens-eEtvWiuX.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);
|
|
@@ -13,4 +13,9 @@ export type TagProps = {
|
|
|
13
13
|
onClick?: () => void;
|
|
14
14
|
};
|
|
15
15
|
};
|
|
16
|
+
/**
|
|
17
|
+
* @deprecated Use `BadgeInfo` or `BadgeState` instead. `Tag` will be removed in a future major release.
|
|
18
|
+
* - `BadgeInfo`: informational badge with icon + text, supports `actionButton`, `customIcon`, `color`.
|
|
19
|
+
* - `BadgeState`: compact status indicator, supports `iconOnly`, `isNumberBadge`, `variant`.
|
|
20
|
+
*/
|
|
16
21
|
export declare const Tag: ({ status, border, size, type, color, customIcon, text, children, fullWidth, actionButton, }: TagProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -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 { d as COLOR_NEUTRAL_70, g as COLOR_BRAND_CYAN_50, f as COLOR_INFO_50, e as COLOR_WARNING_50, b as COLOR_ERROR_50, C as COLOR_SUCCESS_50 } from "../../tokens-eEtvWiuX.js";
|
|
10
9
|
import { Conditional } from "../Conditional/index.es.js";
|
|
10
|
+
import { d as COLOR_NEUTRAL_70, g as COLOR_BRAND_CYAN_50, f as COLOR_INFO_50, e as COLOR_WARNING_50, b as COLOR_ERROR_50, C as COLOR_SUCCESS_50 } from "../../tokens-eEtvWiuX.js";
|
|
11
11
|
import './styles.css';const Tag = ({
|
|
12
12
|
status,
|
|
13
13
|
border = "square",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../lib/components/Tag/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport {\n IconAlertOctagon,\n IconAlertTriangle,\n IconCheck,\n IconInfo,\n IconSlash,\n} from '@components/icons'\nimport {\n COLOR_ERROR_50,\n COLOR_INFO_50,\n COLOR_SUCCESS_50,\n COLOR_WARNING_50,\n COLOR_BRAND_CYAN_50,\n COLOR_NEUTRAL_70,\n} from '@core/tokens'\nimport './styles.scss'\nimport { Conditional } from '@components/misc'\n\nexport type TagProps = {\n status: 'info' | 'success' | 'error' | 'warning' | 'support' | 'neutral'\n border?: 'rounded' | 'square'\n type?: 'read-only' | 'badge'\n color?: 'primary' | 'secondary'\n size?: 'small' | 'medium' | 'large'\n text: string\n children?: React.ReactNode\n customIcon?: string | JSX.Element\n fullWidth?: boolean\n actionButton?: { content?: string; onClick?: () => void }\n}\n\nexport const Tag = ({\n status,\n border = 'square',\n size = 'medium',\n type = 'read-only',\n color = 'primary',\n customIcon,\n text,\n children,\n fullWidth,\n actionButton,\n}: TagProps) => {\n const statusMap = {\n success: {\n option: 'success',\n icon: <IconCheck rawColor={COLOR_SUCCESS_50} />,\n },\n error: {\n option: 'error',\n icon: <IconAlertOctagon rawColor={COLOR_ERROR_50} />,\n },\n warning: {\n option: 'warning',\n icon: <IconAlertTriangle rawColor={COLOR_WARNING_50} />,\n },\n info: { option: 'info', icon: <IconInfo rawColor={COLOR_INFO_50} /> },\n support: {\n option: 'support',\n icon: <IconInfo rawColor={COLOR_BRAND_CYAN_50} />,\n },\n neutral: {\n option: 'neutral',\n icon: <IconSlash rawColor={COLOR_NEUTRAL_70} />,\n },\n custom: {\n option: 'custom',\n icon: customIcon,\n },\n }\n\n const tagClasses = classNames('au-tag', {\n [`au-tag--${statusMap[status].option}`]: statusMap[status].option,\n [`au-tag--size-${size}`]: !!size,\n [`au-tag--type-${type}`]: !!type,\n [`au-tag--border-${border}`]: !!border,\n [`au-tag--color-${color}`]: !!color,\n [`au-tag--full-width`]: !!fullWidth,\n })\n\n const isBadgeTag = type === 'badge'\n const supportText = isBadgeTag ? text.toUpperCase() : text\n\n return (\n <div className={tagClasses}>\n <div className=\"au-tag__content\">\n <Conditional\n condition={!isBadgeTag}\n renderIf={\n <div className=\"au-tag__content-icon\" aria-hidden=\"true\">\n <Conditional\n condition={!!customIcon}\n renderIf={customIcon}\n renderElse={statusMap[status].icon}\n />\n </div>\n }\n />\n <p className={`au-tag__content-support-text`}>{supportText}</p>\n\n <Conditional\n condition={!!actionButton}\n renderIf={\n <button\n className=\"au-tag__action-btn\"\n onClick={actionButton?.onClick}>\n {actionButton?.content}\n </button>\n }\n />\n </div>\n {children}\n </div>\n )\n}\n"],"names":[],"mappings":";;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../lib/components/Tag/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport {\n IconAlertOctagon,\n IconAlertTriangle,\n IconCheck,\n IconInfo,\n IconSlash,\n} from '@components/icons'\nimport {\n COLOR_ERROR_50,\n COLOR_INFO_50,\n COLOR_SUCCESS_50,\n COLOR_WARNING_50,\n COLOR_BRAND_CYAN_50,\n COLOR_NEUTRAL_70,\n} from '@core/tokens'\nimport './styles.scss'\nimport { Conditional } from '@components/misc'\n\nexport type TagProps = {\n status: 'info' | 'success' | 'error' | 'warning' | 'support' | 'neutral'\n border?: 'rounded' | 'square'\n type?: 'read-only' | 'badge'\n color?: 'primary' | 'secondary'\n size?: 'small' | 'medium' | 'large'\n text: string\n children?: React.ReactNode\n customIcon?: string | JSX.Element\n fullWidth?: boolean\n actionButton?: { content?: string; onClick?: () => void }\n}\n\n/**\n * @deprecated Use `BadgeInfo` or `BadgeState` instead. `Tag` will be removed in a future major release.\n * - `BadgeInfo`: informational badge with icon + text, supports `actionButton`, `customIcon`, `color`.\n * - `BadgeState`: compact status indicator, supports `iconOnly`, `isNumberBadge`, `variant`.\n */\nexport const Tag = ({\n status,\n border = 'square',\n size = 'medium',\n type = 'read-only',\n color = 'primary',\n customIcon,\n text,\n children,\n fullWidth,\n actionButton,\n}: TagProps) => {\n const statusMap = {\n success: {\n option: 'success',\n icon: <IconCheck rawColor={COLOR_SUCCESS_50} />,\n },\n error: {\n option: 'error',\n icon: <IconAlertOctagon rawColor={COLOR_ERROR_50} />,\n },\n warning: {\n option: 'warning',\n icon: <IconAlertTriangle rawColor={COLOR_WARNING_50} />,\n },\n info: { option: 'info', icon: <IconInfo rawColor={COLOR_INFO_50} /> },\n support: {\n option: 'support',\n icon: <IconInfo rawColor={COLOR_BRAND_CYAN_50} />,\n },\n neutral: {\n option: 'neutral',\n icon: <IconSlash rawColor={COLOR_NEUTRAL_70} />,\n },\n custom: {\n option: 'custom',\n icon: customIcon,\n },\n }\n\n const tagClasses = classNames('au-tag', {\n [`au-tag--${statusMap[status].option}`]: statusMap[status].option,\n [`au-tag--size-${size}`]: !!size,\n [`au-tag--type-${type}`]: !!type,\n [`au-tag--border-${border}`]: !!border,\n [`au-tag--color-${color}`]: !!color,\n [`au-tag--full-width`]: !!fullWidth,\n })\n\n const isBadgeTag = type === 'badge'\n const supportText = isBadgeTag ? text.toUpperCase() : text\n\n return (\n <div className={tagClasses}>\n <div className=\"au-tag__content\">\n <Conditional\n condition={!isBadgeTag}\n renderIf={\n <div className=\"au-tag__content-icon\" aria-hidden=\"true\">\n <Conditional\n condition={!!customIcon}\n renderIf={customIcon}\n renderElse={statusMap[status].icon}\n />\n </div>\n }\n />\n <p className={`au-tag__content-support-text`}>{supportText}</p>\n\n <Conditional\n condition={!!actionButton}\n renderIf={\n <button\n className=\"au-tag__action-btn\"\n onClick={actionButton?.onClick}>\n {actionButton?.content}\n </button>\n }\n />\n </div>\n {children}\n </div>\n )\n}\n"],"names":[],"mappings":";;;;;;;;;;AAqCO,MAAM,MAAM,CAAC;AAAA,EAClB;AAAA,EACA,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAgB;AACd,QAAM,YAAY;AAAA,IAChB,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,WAAA,EAAU,UAAU,iBAAA,CAAkB;AAAA,IAAA;AAAA,IAE/C,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,MAAM,oBAAC,kBAAA,EAAiB,UAAU,eAAA,CAAgB;AAAA,IAAA;AAAA,IAEpD,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,mBAAA,EAAkB,UAAU,iBAAA,CAAkB;AAAA,IAAA;AAAA,IAEvD,MAAM,EAAE,QAAQ,QAAQ,MAAM,oBAAC,UAAA,EAAS,UAAU,cAAA,CAAe,EAAA;AAAA,IACjE,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,UAAA,EAAS,UAAU,oBAAA,CAAqB;AAAA,IAAA;AAAA,IAEjD,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,WAAA,EAAU,UAAU,iBAAA,CAAkB;AAAA,IAAA;AAAA,IAE/C,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,IAAA;AAAA,EACR;AAGF,QAAM,aAAa,WAAW,UAAU;AAAA,IACtC,CAAC,WAAW,UAAU,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,MAAM,EAAE;AAAA,IAC3D,CAAC,gBAAgB,IAAI,EAAE,GAAG,CAAC,CAAC;AAAA,IAC5B,CAAC,gBAAgB,IAAI,EAAE,GAAG,CAAC,CAAC;AAAA,IAC5B,CAAC,kBAAkB,MAAM,EAAE,GAAG,CAAC,CAAC;AAAA,IAChC,CAAC,iBAAiB,KAAK,EAAE,GAAG,CAAC,CAAC;AAAA,IAC9B,CAAC,oBAAoB,GAAG,CAAC,CAAC;AAAA,EAAA,CAC3B;AAED,QAAM,aAAa,SAAS;AAC5B,QAAM,cAAc,aAAa,KAAK,YAAA,IAAgB;AAEtD,SACE,qBAAC,OAAA,EAAI,WAAW,YACd,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,mBACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,CAAC;AAAA,UACZ,UACE,oBAAC,OAAA,EAAI,WAAU,wBAAuB,eAAY,QAChD,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,CAAC,CAAC;AAAA,cACb,UAAU;AAAA,cACV,YAAY,UAAU,MAAM,EAAE;AAAA,YAAA;AAAA,UAAA,EAChC,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJ,oBAAC,KAAA,EAAE,WAAW,gCAAiC,UAAA,aAAY;AAAA,MAE3D;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,CAAC,CAAC;AAAA,UACb,UACE;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,SAAS,6CAAc;AAAA,cACtB,UAAA,6CAAc;AAAA,YAAA;AAAA,UAAA;AAAA,QACjB;AAAA,MAAA;AAAA,IAEJ,GACF;AAAA,IACC;AAAA,EAAA,GACH;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 { B as BREAKPOINT_MD } from "./tokens-eEtvWiuX.js";
|
|
9
8
|
import { a as above } from "./screen-DfYo7XQ_.js";
|
|
9
|
+
import { B as BREAKPOINT_MD } from "./tokens-eEtvWiuX.js";
|
|
10
10
|
import './components/index/styles3.css';function useOutsideClick({
|
|
11
11
|
rootEl,
|
|
12
12
|
breakpoint,
|
|
@@ -150,4 +150,4 @@ export {
|
|
|
150
150
|
Segment as S,
|
|
151
151
|
useOutsideClick as u
|
|
152
152
|
};
|
|
153
|
-
//# sourceMappingURL=index-
|
|
153
|
+
//# sourceMappingURL=index-BmRuA8Rb.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-
|
|
1
|
+
{"version":3,"file":"index-BmRuA8Rb.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 className={classNames('au-datepicker__segment', {\n 'au-datepicker__segment--open': isListOpen,\n })}>\n <button\n type=\"button\"\n className=\"au-datepicker__segment-input\"\n onClick={openList}\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={isListOpen}>\n {currentItem?.label}\n <IconChevronDown aria-hidden=\"true\" />\n </button>\n <div className=\"au-datepicker__segment-list-holder\">\n <div className=\"au-datepicker__segment-list-header\">\n <button type=\"button\" onClick={closeList} aria-label=\"Voltar\">\n <IconChevronLeft aria-hidden=\"true\" />\n </button>\n <h4 className=\"au-datepicker__segment-title\">{mobileTitle}</h4>\n <button type=\"button\" onClick={closeList} aria-label=\"Fechar\">\n <IconX aria-hidden=\"true\" />\n </button>\n </div>\n <ul className=\"au-datepicker__segment-list\" role=\"listbox\">\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 role=\"option\"\n aria-selected={isSelectedItem}\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":"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"}
|
|
@@ -11,7 +11,7 @@ import "./index-C6Q03EyZ.js";
|
|
|
11
11
|
import "./components/Icon/index.es.js";
|
|
12
12
|
import { IconChevronLeft } from "./components/icons/IconChevronLeft/index.es.js";
|
|
13
13
|
import { IconChevronRight } from "./components/icons/IconChevronRight/index.es.js";
|
|
14
|
-
import { S as Segment } from "./index-
|
|
14
|
+
import { S as Segment } from "./index-BmRuA8Rb.js";
|
|
15
15
|
import $8WNJc$react__default, { useContext, useState, useRef, useCallback, useEffect, useMemo, forwardRef, useReducer, createContext } from "react";
|
|
16
16
|
import { flushSync } from "react-dom";
|
|
17
17
|
function $a4e76a5424781910$export$e08e3b67e392101e(...callbacks) {
|
|
@@ -6282,4 +6282,4 @@ export {
|
|
|
6282
6282
|
$6f9a1820b787aac7$export$e11f8ba65d857bff as e,
|
|
6283
6283
|
$6f9a1820b787aac7$export$5d847498420df57b as f
|
|
6284
6284
|
};
|
|
6285
|
-
//# sourceMappingURL=index-
|
|
6285
|
+
//# sourceMappingURL=index-DO2dHApF.js.map
|