@consumidor-positivo/aurora 0.0.141 → 0.0.143
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.d.ts +3 -1
- package/dist/components/Alert/index.es.js +16 -4
- package/dist/components/Alert/index.es.js.map +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/TokenField/index.es.js +3 -1
- package/dist/components/TokenField/index.es.js.map +1 -1
- package/dist/{index-BDy8i79S.js → index-CXayTd35.js} +2 -2
- package/dist/{index-BDy8i79S.js.map → index-CXayTd35.js.map} +1 -1
- package/dist/{index-B9cLhrrb.js → index-Cn20y-Ji.js} +2 -2
- package/dist/{index-B9cLhrrb.js.map → index-Cn20y-Ji.js.map} +1 -1
- package/dist/{index-C9HFx59f.js → index-piVJ4mle.js} +3 -3
- package/dist/{index-C9HFx59f.js.map → index-piVJ4mle.js.map} +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
export type AlertProps = {
|
|
3
|
+
showIcon?: boolean;
|
|
3
4
|
status?: 'success' | 'error' | 'warning' | 'info' | 'timer';
|
|
4
5
|
type?: 1 | 2;
|
|
5
6
|
orientation?: 'horizontal' | 'vertical';
|
|
@@ -16,5 +17,6 @@ export type AlertProps = {
|
|
|
16
17
|
children?: React.ReactNode;
|
|
17
18
|
countdown?: number;
|
|
18
19
|
onCountdownEnd?: () => void;
|
|
20
|
+
onCloseButton?: () => void;
|
|
19
21
|
};
|
|
20
|
-
export declare const Alert: ({ status, type, orientation, title, text, actionButton, closeButton, children, countdown, onCountdownEnd, }: AlertProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
22
|
+
export declare const Alert: ({ showIcon, status, type, orientation, title, text, actionButton, closeButton, children, countdown, onCountdownEnd, onCloseButton, }: AlertProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -8,10 +8,11 @@ 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-BwvPtuyb.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-BwvPtuyb.js";
|
|
14
14
|
import './styles.css';const Alert = ({
|
|
15
|
+
showIcon = true,
|
|
15
16
|
status = "info",
|
|
16
17
|
type = 1,
|
|
17
18
|
orientation = "horizontal",
|
|
@@ -21,7 +22,8 @@ import './styles.css';const Alert = ({
|
|
|
21
22
|
closeButton = false,
|
|
22
23
|
children,
|
|
23
24
|
countdown = 59,
|
|
24
|
-
onCountdownEnd
|
|
25
|
+
onCountdownEnd,
|
|
26
|
+
onCloseButton
|
|
25
27
|
}) => {
|
|
26
28
|
const [isClosed, setIsClosed] = useState(false);
|
|
27
29
|
const [timeLeft, setTimeLeft] = useState(countdown);
|
|
@@ -51,6 +53,10 @@ import './styles.css';const Alert = ({
|
|
|
51
53
|
setIsCountdownFinished(false);
|
|
52
54
|
(_a = actionButton == null ? void 0 : actionButton.onClick) == null ? void 0 : _a.call(actionButton);
|
|
53
55
|
};
|
|
56
|
+
const handleCloseButtonClick = () => {
|
|
57
|
+
setIsClosed(true);
|
|
58
|
+
onCloseButton == null ? void 0 : onCloseButton();
|
|
59
|
+
};
|
|
54
60
|
const statusMap = {
|
|
55
61
|
success: {
|
|
56
62
|
option: "success",
|
|
@@ -82,7 +88,13 @@ import './styles.css';const Alert = ({
|
|
|
82
88
|
if (isClosed) return null;
|
|
83
89
|
return /* @__PURE__ */ jsxs("div", { className: alertClasses, children: [
|
|
84
90
|
/* @__PURE__ */ jsxs("div", { className: "au-alert__content", children: [
|
|
85
|
-
|
|
91
|
+
/* @__PURE__ */ jsx(
|
|
92
|
+
Conditional,
|
|
93
|
+
{
|
|
94
|
+
condition: showIcon,
|
|
95
|
+
renderIf: statusMap[status].icon
|
|
96
|
+
}
|
|
97
|
+
),
|
|
86
98
|
/* @__PURE__ */ jsxs("div", { className: `au-alert__container--${orientation}`, children: [
|
|
87
99
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
88
100
|
/* @__PURE__ */ jsx("h4", { className: `au-alert__title au-alert__title--${title == null ? void 0 : title.weight}`, children: title == null ? void 0 : title.content }),
|
|
@@ -113,7 +125,7 @@ import './styles.css';const Alert = ({
|
|
|
113
125
|
IconX,
|
|
114
126
|
{
|
|
115
127
|
rawColor: COLOR_NEUTRAL_70,
|
|
116
|
-
onClick:
|
|
128
|
+
onClick: handleCloseButtonClick
|
|
117
129
|
}
|
|
118
130
|
) })
|
|
119
131
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../lib/components/Alert/index.tsx"],"sourcesContent":["import { useState, useEffect } from 'react'\nimport classNames from 'classnames'\nimport {\n IconAlertOctagon,\n IconAlertTriangle,\n IconCheck,\n IconInfo,\n IconX,\n IconClock,\n} from '@components/icons'\nimport {\n COLOR_ERROR_50,\n COLOR_INFO_50,\n COLOR_NEUTRAL_70,\n COLOR_SUCCESS_50,\n COLOR_WARNING_50,\n} from '@core/tokens'\nimport { Conditional } from '@components/misc'\nimport { Text } from '@components/Text'\nimport './styles.scss'\n\nexport type AlertProps = {\n status?: 'success' | 'error' | 'warning' | 'info' | 'timer'\n type?: 1 | 2\n orientation?: 'horizontal' | 'vertical'\n title?: { content?: string; weight?: 'bold' | 'normal' }\n text?: string\n actionButton?: { content?: string; onClick?: () => void }\n closeButton?: boolean\n children?: React.ReactNode\n countdown?: number\n onCountdownEnd?: () => void\n}\n\nexport const Alert = ({\n status = 'info',\n type = 1,\n orientation = 'horizontal',\n title,\n text,\n actionButton,\n closeButton = false,\n children,\n countdown = 59,\n onCountdownEnd,\n}: AlertProps) => {\n const [isClosed, setIsClosed] = useState(false)\n const [timeLeft, setTimeLeft] = useState(countdown)\n const [isCountdownFinished, setIsCountdownFinished] = useState(false)\n\n useEffect(() => {\n if (status !== 'timer' || timeLeft <= 0) return\n\n const timer = setInterval(() => {\n setTimeLeft((prev) => {\n if (prev <= 1) {\n clearInterval(timer)\n setIsCountdownFinished(true)\n if (onCountdownEnd) onCountdownEnd()\n }\n return prev - 1\n })\n }, 1000)\n\n return () => clearInterval(timer)\n }, [status, timeLeft, onCountdownEnd])\n\n useEffect(() => {\n if (timeLeft > 0) {\n setIsCountdownFinished(false)\n }\n }, [timeLeft])\n\n const handleActionClick = () => {\n setTimeLeft(countdown)\n setIsCountdownFinished(false)\n actionButton?.onClick?.()\n }\n\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 timer: {\n option: 'timer',\n icon: (\n <div className=\"au-alert__timer\">\n <IconClock rawColor={COLOR_WARNING_50} />\n {!isCountdownFinished && (\n <Text className=\"au-alert__countdown\" variant=\"body-small\" weight=\"bold\">{timeLeft}s</Text>\n )}\n </div>\n ),\n },\n }\n\n const alertClasses = classNames('au-alert', {\n [`au-alert--${statusMap[status].option}--type-${type}`]:\n statusMap[status].option,\n })\n\n if (isClosed) return null\n\n return (\n <div className={alertClasses}>\n <div className=\"au-alert__content\">\n {statusMap[status].icon}\n <div className={`au-alert__container--${orientation}`}>\n <div>\n <h4 className={`au-alert__title au-alert__title--${title?.weight}`}>\n {title?.content}\n </h4>\n <p className={`au-alert__support-text`}>{text}</p>\n </div>\n {children}\n <Conditional\n condition={!!actionButton && (status !== 'timer' || isCountdownFinished)}\n renderIf={\n <button\n className=\"au-alert__action-btn\"\n onClick={handleActionClick}>\n {actionButton?.content}\n </button>\n }\n />\n </div>\n </div>\n\n <Conditional\n condition={closeButton}\n renderIf={\n <button className=\"au-alert__close-btn\">\n <IconX\n rawColor={COLOR_NEUTRAL_70}\n onClick={
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../lib/components/Alert/index.tsx"],"sourcesContent":["import { useState, useEffect } from 'react'\nimport classNames from 'classnames'\nimport {\n IconAlertOctagon,\n IconAlertTriangle,\n IconCheck,\n IconInfo,\n IconX,\n IconClock,\n} from '@components/icons'\nimport {\n COLOR_ERROR_50,\n COLOR_INFO_50,\n COLOR_NEUTRAL_70,\n COLOR_SUCCESS_50,\n COLOR_WARNING_50,\n} from '@core/tokens'\nimport { Conditional } from '@components/misc'\nimport { Text } from '@components/Text'\nimport './styles.scss'\n\nexport type AlertProps = {\n showIcon?: boolean\n status?: 'success' | 'error' | 'warning' | 'info' | 'timer'\n type?: 1 | 2\n orientation?: 'horizontal' | 'vertical'\n title?: { content?: string; weight?: 'bold' | 'normal' }\n text?: string\n actionButton?: { content?: string; onClick?: () => void }\n closeButton?: boolean\n children?: React.ReactNode\n countdown?: number\n onCountdownEnd?: () => void\n onCloseButton?: () => void\n}\n\nexport const Alert = ({\n showIcon = true,\n status = 'info',\n type = 1,\n orientation = 'horizontal',\n title,\n text,\n actionButton,\n closeButton = false,\n children,\n countdown = 59,\n onCountdownEnd,\n onCloseButton,\n}: AlertProps) => {\n const [isClosed, setIsClosed] = useState(false)\n const [timeLeft, setTimeLeft] = useState(countdown)\n const [isCountdownFinished, setIsCountdownFinished] = useState(false)\n\n useEffect(() => {\n if (status !== 'timer' || timeLeft <= 0) return\n\n const timer = setInterval(() => {\n setTimeLeft((prev) => {\n if (prev <= 1) {\n clearInterval(timer)\n setIsCountdownFinished(true)\n if (onCountdownEnd) onCountdownEnd()\n }\n return prev - 1\n })\n }, 1000)\n\n return () => clearInterval(timer)\n }, [status, timeLeft, onCountdownEnd])\n\n useEffect(() => {\n if (timeLeft > 0) {\n setIsCountdownFinished(false)\n }\n }, [timeLeft])\n\n const handleActionClick = () => {\n setTimeLeft(countdown)\n setIsCountdownFinished(false)\n actionButton?.onClick?.()\n }\n\n const handleCloseButtonClick = () => {\n setIsClosed(true)\n onCloseButton?.()\n }\n\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 timer: {\n option: 'timer',\n icon: (\n <div className=\"au-alert__timer\">\n <IconClock rawColor={COLOR_WARNING_50} />\n {!isCountdownFinished && (\n <Text className=\"au-alert__countdown\" variant=\"body-small\" weight=\"bold\">{timeLeft}s</Text>\n )}\n </div>\n ),\n },\n }\n\n const alertClasses = classNames('au-alert', {\n [`au-alert--${statusMap[status].option}--type-${type}`]:\n statusMap[status].option,\n })\n\n if (isClosed) return null\n\n return (\n <div className={alertClasses}>\n <div className=\"au-alert__content\">\n <Conditional \n condition={showIcon}\n renderIf={statusMap[status].icon}\n />\n <div className={`au-alert__container--${orientation}`}>\n <div>\n <h4 className={`au-alert__title au-alert__title--${title?.weight}`}>\n {title?.content}\n </h4>\n <p className={`au-alert__support-text`}>{text}</p>\n </div>\n {children}\n <Conditional\n condition={!!actionButton && (status !== 'timer' || isCountdownFinished)}\n renderIf={\n <button\n className=\"au-alert__action-btn\"\n onClick={handleActionClick}>\n {actionButton?.content}\n </button>\n }\n />\n </div>\n </div>\n\n <Conditional\n condition={closeButton}\n renderIf={\n <button className=\"au-alert__close-btn\">\n <IconX\n rawColor={COLOR_NEUTRAL_70}\n onClick={handleCloseButtonClick}\n />\n </button>\n }\n />\n </div>\n )\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import "react/jsx-runtime";
|
|
2
2
|
import "../../index-CweZ_OcN.js";
|
|
3
|
-
import "../../index-
|
|
3
|
+
import "../../index-Cn20y-Ji.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-piVJ4mle.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-CXayTd35.js";
|
|
7
|
+
import { C } from "../../index-Cn20y-Ji.js";
|
|
8
8
|
export {
|
|
9
9
|
C as CalendarHeader
|
|
10
10
|
};
|
|
@@ -3,8 +3,8 @@ 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 { F as Field } from "../../index-ZE6zszxw.js";
|
|
7
6
|
import { n as COLOR_NEUTRAL_00 } from "../../tokens-BwvPtuyb.js";
|
|
7
|
+
import { F as Field } from "../../index-ZE6zszxw.js";
|
|
8
8
|
import { Conditional } from "../Conditional/index.es.js";
|
|
9
9
|
import { Text } from "../Text/index.es.js";
|
|
10
10
|
import './styles.css';const CheckboxField = ({
|
|
@@ -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-BwvPtuyb.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-piVJ4mle.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-BwvPtuyb.js";
|
|
10
|
+
import { u as useOutsideClick } from "../../index-CXayTd35.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-BwvPtuyb.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-CXayTd35.js";
|
|
8
8
|
export {
|
|
9
9
|
S as Segment
|
|
10
10
|
};
|
|
@@ -181,7 +181,9 @@ const TokenField = ({
|
|
|
181
181
|
onChange: (e) => onChangeNumber(e, i),
|
|
182
182
|
onKeyUp: (e) => onKeyUpHandler(e, i),
|
|
183
183
|
onPaste: (e) => onPasteNumber(e),
|
|
184
|
-
"data-token-i": i
|
|
184
|
+
"data-token-i": i,
|
|
185
|
+
inputMode: "numeric",
|
|
186
|
+
autoComplete: "one-time-code"
|
|
185
187
|
}
|
|
186
188
|
) }, `token-digit-${i}`)) }),
|
|
187
189
|
/* @__PURE__ */ jsx(Field.Message, { hasError: !!error, errorMessage, helpMessage })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/TokenField/hook.tsx","../../../lib/components/form/TokenField/index.tsx"],"sourcesContent":["import { useState, useEffect, useRef } from 'react'\n\ntype UseTokenInputProps = {\n size: number\n onComplete?: (token: string) => void\n onChange?: (value: string) => void\n onChangeTimer?: (time: number) => void\n timer?: number | null\n}\n\nfunction inputtedValueIsValid(value: unknown) {\n const numberValue = Number(value)\n const isNaN = Number.isNaN(numberValue)\n return !isNaN\n}\n\nexport const useTokenField = ({\n size,\n onComplete,\n onChange,\n onChangeTimer,\n timer = null,\n}: UseTokenInputProps) => {\n const rootElementRef = useRef<HTMLDivElement | null>(null)\n const [tokenMap, setTokenMap] = useState(_getDefaultTokens())\n const [timerTime, setTimerTime] = useState<number | null>(timer)\n\n useEffect(_handleValueEvents, [tokenMap])\n useEffect(_handleStartTimer, [timer])\n useEffect(_handleTimerUpdate, [timerTime])\n\n function _handleValueEvents() {\n const tokenValueArray =\n Object.keys(tokenMap).map((key) => tokenMap[key]) || []\n const stringField = tokenValueArray.join('')\n const isTokenValid = stringField.length === size\n if (onChange) onChange(stringField)\n\n if (!!isTokenValid && !!onComplete) {\n onComplete(stringField)\n }\n }\n\n function _handleStartTimer() {\n let interval: NodeJS.Timeout\n\n if (timer) {\n interval = setInterval(() => {\n setTimerTime((currentTime) => {\n if (!currentTime) return null\n const reachedTheLimit = currentTime === 0\n if (reachedTheLimit) {\n return timer\n } else {\n return currentTime - 1\n }\n })\n }, 1000)\n\n if (interval) {\n return () => clearInterval(interval)\n }\n }\n }\n\n function _handleTimerUpdate() {\n if (onChangeTimer && timerTime) onChangeTimer(timerTime)\n\n if (timerTime === 0) {\n setTokenMap(_getDefaultTokens())\n _resetFocus()\n }\n }\n\n function _getDefaultTokens() {\n return [...Array(size)].reduce((acc, _, i) => ({ ...acc, [i]: '' }), {})\n }\n\n function _goToNextInput(i: number) {\n const nextItem = rootElementRef?.current?.querySelector<HTMLInputElement>(\n `[data-token-i='${i + 1}']`,\n )\n if (nextItem) nextItem.focus()\n }\n\n function _resetFocus() {\n const firstItem =\n rootElementRef.current?.querySelector<HTMLInputElement>(\n `[data-token-i='0']`,\n )\n firstItem?.focus()\n }\n\n function onKeyUpHandler(e: React.KeyboardEvent<HTMLInputElement>, i: number) {\n const hasBackspacePressed = e.which === 8 || e.key === 'Backspace'\n if (hasBackspacePressed) {\n const previousItem =\n rootElementRef?.current?.querySelector<HTMLInputElement>(\n `[data-token-i='${i - 1}']`,\n )\n const currentItem =\n rootElementRef?.current?.querySelector<HTMLInputElement>(\n `[data-token-i='${i}']`,\n )\n\n setTokenMap({ ...tokenMap, [i]: '' })\n if (!!previousItem && !currentItem?.value) previousItem.focus()\n }\n }\n\n function onChangeNumber(e: React.ChangeEvent<HTMLInputElement>, i: number) {\n e.preventDefault()\n let value = e?.target?.value\n const isNumberValid = inputtedValueIsValid(value)\n const isEmpty = value === ''\n\n if (isNumberValid) {\n let firstEmptyIndex = Object.keys(tokenMap).findIndex(\n (index) => tokenMap[index] === '',\n )\n\n if (value.length > 1) {\n firstEmptyIndex = firstEmptyIndex - 1\n value = value[value.length - 1]\n }\n\n if (firstEmptyIndex < 0) {\n if (value) {\n setTokenMap({ ...tokenMap, [i]: value })\n }\n\n return\n }\n\n setTokenMap({ ...tokenMap, [firstEmptyIndex]: value })\n if (!isEmpty) _goToNextInput(firstEmptyIndex)\n }\n }\n\n function onPasteNumber(e: React.ClipboardEvent<HTMLInputElement>) {\n e.preventDefault()\n const value = e.clipboardData.getData('Text')\n const isNumberValid = inputtedValueIsValid(value)\n\n if (isNumberValid) {\n const arrValue = value.split('').slice(0, size)\n setTokenMap({ ..._getDefaultTokens(), ...arrValue })\n\n _goToNextInput(arrValue.length - 1)\n } else {\n setTokenMap(_getDefaultTokens())\n }\n }\n\n return {\n onKeyUpHandler,\n onChangeNumber,\n onPasteNumber,\n tokenMap,\n rootElementRef,\n }\n}\n","import Field from '../Field'\nimport { useTokenField } from './hook'\nimport './styles.scss'\n\ntype TokenFieldProps = {\n label?: string\n disabled?: boolean\n success?: boolean\n error?: boolean\n errorMessage?: string\n helpMessage?: string\n showOptionalLabel?: boolean\n size?: number\n type?: 'number' | 'password' | 'text'\n style?: React.CSSProperties\n timer?: number\n onChangeTimer?: () => void\n onComplete?: (value: string) => void\n onChange?: (value: string) => void\n}\n\nexport const TokenField = ({\n label,\n disabled,\n success,\n error,\n errorMessage,\n helpMessage,\n showOptionalLabel,\n size = 6,\n type,\n style,\n timer,\n onChangeTimer,\n onComplete,\n onChange,\n}: TokenFieldProps) => {\n const {\n tokenMap,\n rootElementRef,\n onChangeNumber,\n onKeyUpHandler,\n onPasteNumber,\n } = useTokenField({ size, onComplete, onChange, onChangeTimer, timer })\n\n return (\n <Field.Root\n style={style}\n customclass=\"au-token-field\"\n success={success}\n error={error}\n disabled={disabled}>\n <Field.Label\n text={label}\n showOptionalLabel={showOptionalLabel}\n success={success}\n error={error}\n disabled={disabled}\n />\n <div ref={rootElementRef} className=\"au-token-field__container\">\n {[...Object.values(tokenMap)].map((_, i) => (\n <div key={`token-digit-${i}`}>\n <Field.Input\n customclass=\"au-token-field__input\"\n type={type || 'number'}\n value={tokenMap[i]}\n disabled={disabled}\n onChange={(e) => onChangeNumber(e, i)}\n onKeyUp={(e) => onKeyUpHandler(e, i)}\n onPaste={(e) => onPasteNumber(e)}\n data-token-i={i}\n />\n </div>\n ))}\n </div>\n <Field.Message hasError={!!error} errorMessage={errorMessage} helpMessage={helpMessage} />\n </Field.Root>\n )\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/TokenField/hook.tsx","../../../lib/components/form/TokenField/index.tsx"],"sourcesContent":["import { useState, useEffect, useRef } from 'react'\n\ntype UseTokenInputProps = {\n size: number\n onComplete?: (token: string) => void\n onChange?: (value: string) => void\n onChangeTimer?: (time: number) => void\n timer?: number | null\n}\n\nfunction inputtedValueIsValid(value: unknown) {\n const numberValue = Number(value)\n const isNaN = Number.isNaN(numberValue)\n return !isNaN\n}\n\nexport const useTokenField = ({\n size,\n onComplete,\n onChange,\n onChangeTimer,\n timer = null,\n}: UseTokenInputProps) => {\n const rootElementRef = useRef<HTMLDivElement | null>(null)\n const [tokenMap, setTokenMap] = useState(_getDefaultTokens())\n const [timerTime, setTimerTime] = useState<number | null>(timer)\n\n useEffect(_handleValueEvents, [tokenMap])\n useEffect(_handleStartTimer, [timer])\n useEffect(_handleTimerUpdate, [timerTime])\n\n function _handleValueEvents() {\n const tokenValueArray =\n Object.keys(tokenMap).map((key) => tokenMap[key]) || []\n const stringField = tokenValueArray.join('')\n const isTokenValid = stringField.length === size\n if (onChange) onChange(stringField)\n\n if (!!isTokenValid && !!onComplete) {\n onComplete(stringField)\n }\n }\n\n function _handleStartTimer() {\n let interval: NodeJS.Timeout\n\n if (timer) {\n interval = setInterval(() => {\n setTimerTime((currentTime) => {\n if (!currentTime) return null\n const reachedTheLimit = currentTime === 0\n if (reachedTheLimit) {\n return timer\n } else {\n return currentTime - 1\n }\n })\n }, 1000)\n\n if (interval) {\n return () => clearInterval(interval)\n }\n }\n }\n\n function _handleTimerUpdate() {\n if (onChangeTimer && timerTime) onChangeTimer(timerTime)\n\n if (timerTime === 0) {\n setTokenMap(_getDefaultTokens())\n _resetFocus()\n }\n }\n\n function _getDefaultTokens() {\n return [...Array(size)].reduce((acc, _, i) => ({ ...acc, [i]: '' }), {})\n }\n\n function _goToNextInput(i: number) {\n const nextItem = rootElementRef?.current?.querySelector<HTMLInputElement>(\n `[data-token-i='${i + 1}']`,\n )\n if (nextItem) nextItem.focus()\n }\n\n function _resetFocus() {\n const firstItem =\n rootElementRef.current?.querySelector<HTMLInputElement>(\n `[data-token-i='0']`,\n )\n firstItem?.focus()\n }\n\n function onKeyUpHandler(e: React.KeyboardEvent<HTMLInputElement>, i: number) {\n const hasBackspacePressed = e.which === 8 || e.key === 'Backspace'\n if (hasBackspacePressed) {\n const previousItem =\n rootElementRef?.current?.querySelector<HTMLInputElement>(\n `[data-token-i='${i - 1}']`,\n )\n const currentItem =\n rootElementRef?.current?.querySelector<HTMLInputElement>(\n `[data-token-i='${i}']`,\n )\n\n setTokenMap({ ...tokenMap, [i]: '' })\n if (!!previousItem && !currentItem?.value) previousItem.focus()\n }\n }\n\n function onChangeNumber(e: React.ChangeEvent<HTMLInputElement>, i: number) {\n e.preventDefault()\n let value = e?.target?.value\n const isNumberValid = inputtedValueIsValid(value)\n const isEmpty = value === ''\n\n if (isNumberValid) {\n let firstEmptyIndex = Object.keys(tokenMap).findIndex(\n (index) => tokenMap[index] === '',\n )\n\n if (value.length > 1) {\n firstEmptyIndex = firstEmptyIndex - 1\n value = value[value.length - 1]\n }\n\n if (firstEmptyIndex < 0) {\n if (value) {\n setTokenMap({ ...tokenMap, [i]: value })\n }\n\n return\n }\n\n setTokenMap({ ...tokenMap, [firstEmptyIndex]: value })\n if (!isEmpty) _goToNextInput(firstEmptyIndex)\n }\n }\n\n function onPasteNumber(e: React.ClipboardEvent<HTMLInputElement>) {\n e.preventDefault()\n const value = e.clipboardData.getData('Text')\n const isNumberValid = inputtedValueIsValid(value)\n\n if (isNumberValid) {\n const arrValue = value.split('').slice(0, size)\n setTokenMap({ ..._getDefaultTokens(), ...arrValue })\n\n _goToNextInput(arrValue.length - 1)\n } else {\n setTokenMap(_getDefaultTokens())\n }\n }\n\n return {\n onKeyUpHandler,\n onChangeNumber,\n onPasteNumber,\n tokenMap,\n rootElementRef,\n }\n}\n","import Field from '../Field'\nimport { useTokenField } from './hook'\nimport './styles.scss'\n\ntype TokenFieldProps = {\n label?: string\n disabled?: boolean\n success?: boolean\n error?: boolean\n errorMessage?: string\n helpMessage?: string\n showOptionalLabel?: boolean\n size?: number\n type?: 'number' | 'password' | 'text'\n style?: React.CSSProperties\n timer?: number\n onChangeTimer?: () => void\n onComplete?: (value: string) => void\n onChange?: (value: string) => void\n}\n\nexport const TokenField = ({\n label,\n disabled,\n success,\n error,\n errorMessage,\n helpMessage,\n showOptionalLabel,\n size = 6,\n type,\n style,\n timer,\n onChangeTimer,\n onComplete,\n onChange,\n}: TokenFieldProps) => {\n const {\n tokenMap,\n rootElementRef,\n onChangeNumber,\n onKeyUpHandler,\n onPasteNumber,\n } = useTokenField({ size, onComplete, onChange, onChangeTimer, timer })\n\n return (\n <Field.Root\n style={style}\n customclass=\"au-token-field\"\n success={success}\n error={error}\n disabled={disabled}>\n <Field.Label\n text={label}\n showOptionalLabel={showOptionalLabel}\n success={success}\n error={error}\n disabled={disabled}\n />\n <div ref={rootElementRef} className=\"au-token-field__container\">\n {[...Object.values(tokenMap)].map((_, i) => (\n <div key={`token-digit-${i}`}>\n <Field.Input\n customclass=\"au-token-field__input\"\n type={type || 'number'}\n value={tokenMap[i]}\n disabled={disabled}\n onChange={(e) => onChangeNumber(e, i)}\n onKeyUp={(e) => onKeyUpHandler(e, i)}\n onPaste={(e) => onPasteNumber(e)}\n data-token-i={i}\n\t\t\t\t\t\t\tinputMode=\"numeric\"\n\t\t\t\t\t\t\tautoComplete=\"one-time-code\"\n />\n </div>\n ))}\n </div>\n <Field.Message hasError={!!error} errorMessage={errorMessage} helpMessage={helpMessage} />\n </Field.Root>\n )\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -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-BwvPtuyb.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-CXayTd35.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-
|
|
1
|
+
{"version":3,"file":"index-CXayTd35.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":"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"}
|
|
@@ -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-CXayTd35.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-Cn20y-Ji.js.map
|