@consumidor-positivo/aurora 0.0.140 → 0.0.142

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.
Files changed (20) hide show
  1. package/dist/components/Alert/index.es.js +1 -1
  2. package/dist/components/Calendar/index.es.js +2 -2
  3. package/dist/components/CalendarHeader/index.es.js +2 -2
  4. package/dist/components/Checkbox/index.es.js +1 -1
  5. package/dist/components/Datepicker/index.es.js +3 -3
  6. package/dist/components/EmailField/index.es.js +5 -10
  7. package/dist/components/EmailField/index.es.js.map +1 -1
  8. package/dist/components/PortalHolder/index.es.js +1 -1
  9. package/dist/components/Segment/index.es.js +1 -1
  10. package/dist/components/TokenField/index.es.js +3 -1
  11. package/dist/components/TokenField/index.es.js.map +1 -1
  12. package/dist/components/form/EmailField/hook.d.ts +1 -1
  13. package/dist/components/form/EmailField/index.d.ts +2 -2
  14. package/dist/{index-Cn20y-Ji.js → index-B9cLhrrb.js} +2 -2
  15. package/dist/{index-Cn20y-Ji.js.map → index-B9cLhrrb.js.map} +1 -1
  16. package/dist/{index-CXayTd35.js → index-BDy8i79S.js} +2 -2
  17. package/dist/{index-CXayTd35.js.map → index-BDy8i79S.js.map} +1 -1
  18. package/dist/{index-piVJ4mle.js → index-C9HFx59f.js} +3 -3
  19. package/dist/{index-piVJ4mle.js.map → index-C9HFx59f.js.map} +1 -1
  20. package/package.json +1 -1
package/dist/components/Alert/index.es.js CHANGED
@@ -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-BwvPtuyb.js";
12
11
  import { Conditional } from "../Conditional/index.es.js";
13
12
  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
15
  status = "info",
16
16
  type = 1,
package/dist/components/Calendar/index.es.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import "react/jsx-runtime";
2
2
  import "../../index-CweZ_OcN.js";
3
- import "../../index-Cn20y-Ji.js";
3
+ import "../../index-B9cLhrrb.js";
4
4
  import "../Button/index.es.js";
5
5
  import "../PortalHolder/index.es.js";
6
- import { a } from "../../index-piVJ4mle.js";
6
+ import { a } from "../../index-C9HFx59f.js";
7
7
  export {
8
8
  a as DatepickerCalendar
9
9
  };
package/dist/components/CalendarHeader/index.es.js CHANGED
@@ -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-CXayTd35.js";
7
- import { C } from "../../index-Cn20y-Ji.js";
6
+ import "../../index-BDy8i79S.js";
7
+ import { C } from "../../index-B9cLhrrb.js";
8
8
  export {
9
9
  C as CalendarHeader
10
10
  };
package/dist/components/Checkbox/index.es.js CHANGED
@@ -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 { n as COLOR_NEUTRAL_00 } from "../../tokens-BwvPtuyb.js";
7
6
  import { F as Field } from "../../index-ZE6zszxw.js";
7
+ import { n as COLOR_NEUTRAL_00 } from "../../tokens-BwvPtuyb.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 = ({
package/dist/components/Datepicker/index.es.js CHANGED
@@ -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";
3
2
  import "../../index-CweZ_OcN.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 { g as getDefaultDate, D as DDMMYYYY, a as DatepickerCalendar, A as AUCalendarDate } from "../../index-piVJ4mle.js";
6
+ import { g as getDefaultDate, D as DDMMYYYY, a as DatepickerCalendar, A as AUCalendarDate } from "../../index-C9HFx59f.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-CXayTd35.js";
9
+ import { u as useOutsideClick } from "../../index-BDy8i79S.js";
10
+ import { B as BREAKPOINT_MD, c as COLOR_NEUTRAL_40 } from "../../tokens-BwvPtuyb.js";
11
11
  import './styles.css';function useDatepicker({
12
12
  value,
13
13
  defaultValue = "empty",
package/dist/components/EmailField/index.es.js CHANGED
@@ -15,14 +15,14 @@ import './styles.css';const emailDomains = [
15
15
  "live.com",
16
16
  "msn.com"
17
17
  ];
18
- const useEmailAutocomplete = () => {
18
+ const useEmailAutocomplete = (propsOnChange) => {
19
19
  const [inputValue, setInputValue] = useState("");
20
20
  const [suggestions, setSuggestions] = useState([]);
21
21
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
22
22
  const handleChange = (e) => {
23
23
  const value = e.target.value;
24
- if (inputValue === value) return;
25
24
  setInputValue(value);
25
+ if (propsOnChange) propsOnChange(value);
26
26
  const atIndex = value.indexOf("@");
27
27
  if (atIndex > -1) {
28
28
  const domainPart = value.slice(atIndex + 1);
@@ -41,6 +41,7 @@ const useEmailAutocomplete = () => {
41
41
  if (atIndex > -1) {
42
42
  const completedEmailValue = inputValue.slice(0, atIndex + 1) + suggestion;
43
43
  setInputValue(completedEmailValue);
44
+ if (propsOnChange) propsOnChange(completedEmailValue);
44
45
  }
45
46
  setSuggestions([]);
46
47
  setIsDropdownOpen(false);
@@ -69,7 +70,6 @@ const EmailField = ({
69
70
  inputStyle,
70
71
  rightSlot,
71
72
  inputRef,
72
- setValue,
73
73
  ...props
74
74
  }) => {
75
75
  const {
@@ -78,7 +78,7 @@ const EmailField = ({
78
78
  isDropdownOpen,
79
79
  handleChange,
80
80
  handleSuggestionClick
81
- } = useEmailAutocomplete();
81
+ } = useEmailAutocomplete(props.onChange);
82
82
  return /* @__PURE__ */ jsxs(
83
83
  Field.Root,
84
84
  {
@@ -111,12 +111,7 @@ const EmailField = ({
111
111
  disabled,
112
112
  style: inputStyle,
113
113
  ...props,
114
- onChange: (e) => {
115
- handleChange(e);
116
- if (setValue) {
117
- setValue(inputValue);
118
- }
119
- }
114
+ onChange: handleChange
120
115
  }
121
116
  ),
122
117
  /* @__PURE__ */ jsx(
package/dist/components/EmailField/index.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.js","sources":["../../../lib/components/form/EmailField/hook.ts","../../../lib/components/form/EmailField/index.tsx"],"sourcesContent":["import { useState } from 'react'\n\nconst emailDomains = [\n 'gmail.com',\n 'hotmail.com',\n 'yahoo.com',\n 'outlook.com',\n 'yahoo.com.br',\n 'uol.com.br',\n 'ig.com.br',\n 'terra.com.br',\n 'aol.com',\n 'live.com',\n 'msn.com',\n]\n\nexport const useEmailAutocomplete = () => {\n const [inputValue, setInputValue] = useState('')\n const [suggestions, setSuggestions] = useState<string[]>([])\n const [isDropdownOpen, setIsDropdownOpen] = useState(false)\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const value = e.target.value\n if (inputValue === value) return\n setInputValue(value)\n\n const atIndex = value.indexOf('@')\n if (atIndex > -1) {\n const domainPart = value.slice(atIndex + 1)\n const filteredDomains = emailDomains.filter((domain) =>\n domain.startsWith(domainPart),\n )\n setSuggestions(filteredDomains)\n setIsDropdownOpen(filteredDomains.length > 0)\n } else {\n setSuggestions([])\n setIsDropdownOpen(false)\n }\n }\n\n const handleSuggestionClick = (suggestion: string) => {\n const atIndex = inputValue.indexOf('@')\n if (atIndex > -1) {\n\t\t\tconst completedEmailValue = inputValue.slice(0, atIndex + 1) + suggestion;\n setInputValue(completedEmailValue);\n }\n setSuggestions([])\n setIsDropdownOpen(false)\n }\n\n return {\n inputValue,\n setInputValue,\n suggestions,\n isDropdownOpen,\n handleChange,\n handleSuggestionClick,\n }\n}\n","import Field from '../Field'\nimport { useEmailAutocomplete } from './hook'\nimport classNames from 'classnames'\nimport './styles.scss'\n\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {\n showOptionalLabel?: boolean\n requiredInput?: boolean\n success?: boolean\n error?: boolean\n errorMessage?: string\n helpMessage?: string\n rightSlot?: React.ReactNode\n label?: string\n inputStyle?: React.CSSProperties\n inputRef?: React.RefObject<HTMLInputElement>\n\tsetValue?: (value: string) => void\n}\n\nexport const EmailField = ({\n showOptionalLabel,\n requiredInput,\n success,\n error,\n errorMessage,\n helpMessage,\n label,\n id,\n disabled,\n style,\n className,\n inputStyle,\n rightSlot,\n inputRef,\n\tsetValue,\n ...props\n}: InputProps) => {\n const {\n inputValue,\n suggestions,\n isDropdownOpen,\n handleChange,\n handleSuggestionClick,\n } = useEmailAutocomplete();\n\n return (\n <Field.Root\n style={style}\n customclass={className}\n success={success}\n error={error}\n disabled={disabled}>\n <Field.Label\n text={label}\n id={id}\n showOptionalLabel={showOptionalLabel}\n required={requiredInput}\n success={success}\n error={error}\n disabled={disabled}\n />\n <Field.InputHolder rightSideSlot={rightSlot}>\n <Field.Input\n id={id}\n type=\"email\"\n inputRef={inputRef}\n value={inputValue}\n disabled={disabled}\n style={inputStyle}\n {...props}\n\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\thandleChange(e);\n\t\t\t\t\t\n\t\t\t\t\t\tif (setValue) {\n\t\t\t\t\t\t\tsetValue(inputValue);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n />\n <ul\n className={classNames('au-field__input-autocomplete', {\n 'au-field__input-autocomplete--open': isDropdownOpen,\n })}\n tabIndex={-1}\n role=\"listbox\"\n aria-expanded={isDropdownOpen}\n style={{\n overflowY: 'auto',\n }}>\n {suggestions.map((suggestion, index) => (\n <li\n className=\"au-field__input-option\"\n onClick={() => handleSuggestionClick(suggestion)}\n role=\"option\"\n key={index}>\n {suggestion}\n </li>\n ))}\n </ul>\n </Field.InputHolder>\n <Field.Message\n hasError={!!error}\n errorMessage={errorMessage}\n helpMessage={helpMessage}\n />\n </Field.Root>\n )\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.es.js","sources":["../../../lib/components/form/EmailField/hook.ts","../../../lib/components/form/EmailField/index.tsx"],"sourcesContent":["import { useState } from 'react'\n\nconst emailDomains = [\n 'gmail.com',\n 'hotmail.com',\n 'yahoo.com',\n 'outlook.com',\n 'yahoo.com.br',\n 'uol.com.br',\n 'ig.com.br',\n 'terra.com.br',\n 'aol.com',\n 'live.com',\n 'msn.com',\n]\n\nexport const useEmailAutocomplete = (propsOnChange?: (value: string) => void) => {\n const [inputValue, setInputValue] = useState('')\n const [suggestions, setSuggestions] = useState<string[]>([])\n const [isDropdownOpen, setIsDropdownOpen] = useState(false)\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const value = e.target.value\n \n setInputValue(value)\n\t\tif(propsOnChange) propsOnChange(value);\n\n const atIndex = value.indexOf('@')\n if (atIndex > -1) {\n const domainPart = value.slice(atIndex + 1)\n const filteredDomains = emailDomains.filter((domain) =>\n domain.startsWith(domainPart),\n )\n setSuggestions(filteredDomains)\n setIsDropdownOpen(filteredDomains.length > 0)\n } else {\n setSuggestions([])\n setIsDropdownOpen(false)\n }\n }\n\n const handleSuggestionClick = (suggestion: string) => {\n const atIndex = inputValue.indexOf('@')\n if (atIndex > -1) {\n\t\t\tconst completedEmailValue = inputValue.slice(0, atIndex + 1) + suggestion;\n setInputValue(completedEmailValue);\n\t\t\tif(propsOnChange) propsOnChange(completedEmailValue);\n }\n setSuggestions([])\n setIsDropdownOpen(false)\n }\n\n return {\n inputValue,\n setInputValue,\n suggestions,\n isDropdownOpen,\n handleChange,\n handleSuggestionClick,\n }\n}\n","import Field from '../Field'\nimport { useEmailAutocomplete } from './hook'\nimport classNames from 'classnames'\nimport './styles.scss'\n\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {\n showOptionalLabel?: boolean\n requiredInput?: boolean\n success?: boolean\n error?: boolean\n errorMessage?: string\n helpMessage?: string\n rightSlot?: React.ReactNode\n label?: string\n inputStyle?: React.CSSProperties\n inputRef?: React.RefObject<HTMLInputElement>\n\tonChange?: (value: string) => void;\n}\n\nexport const EmailField = ({\n showOptionalLabel,\n requiredInput,\n success,\n error,\n errorMessage,\n helpMessage,\n label,\n id,\n disabled,\n style,\n className,\n inputStyle,\n rightSlot,\n inputRef,\n ...props\n}: InputProps) => {\n const {\n inputValue,\n suggestions,\n isDropdownOpen,\n handleChange,\n handleSuggestionClick,\n } = useEmailAutocomplete(props.onChange);\n\n return (\n <Field.Root\n style={style}\n customclass={className}\n success={success}\n error={error}\n disabled={disabled}>\n <Field.Label\n text={label}\n id={id}\n showOptionalLabel={showOptionalLabel}\n required={requiredInput}\n success={success}\n error={error}\n disabled={disabled}\n />\n <Field.InputHolder rightSideSlot={rightSlot}>\n <Field.Input\n id={id}\n type=\"email\"\n inputRef={inputRef}\n value={inputValue}\n disabled={disabled}\n style={inputStyle}\n {...props}\n\t\t\t\t\tonChange={handleChange}\n />\n <ul\n className={classNames('au-field__input-autocomplete', {\n 'au-field__input-autocomplete--open': isDropdownOpen,\n })}\n tabIndex={-1}\n role=\"listbox\"\n aria-expanded={isDropdownOpen}\n style={{\n overflowY: 'auto',\n }}>\n {suggestions.map((suggestion, index) => (\n <li\n className=\"au-field__input-option\"\n onClick={() => handleSuggestionClick(suggestion)}\n role=\"option\"\n key={index}>\n {suggestion}\n </li>\n ))}\n </ul>\n </Field.InputHolder>\n <Field.Message\n hasError={!!error}\n errorMessage={errorMessage}\n helpMessage={helpMessage}\n />\n </Field.Root>\n )\n}\n"],"names":[],"mappings":"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"}
package/dist/components/PortalHolder/index.es.js CHANGED
@@ -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-BwvPtuyb.js";
4
3
  import { Portal } from "../Portal/index.es.js";
4
+ import { B as BREAKPOINT_MD } from "../../tokens-BwvPtuyb.js";
5
5
  const PortalHolder = ({ withPortal, children }) => {
6
6
  const shouldUsePortal = !above(BREAKPOINT_MD) && withPortal;
7
7
  if (shouldUsePortal) return /* @__PURE__ */ jsx(Portal, { children });
package/dist/components/Segment/index.es.js CHANGED
@@ -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-CXayTd35.js";
7
+ import { S } from "../../index-BDy8i79S.js";
8
8
  export {
9
9
  S as Segment
10
10
  };
package/dist/components/TokenField/index.es.js CHANGED
@@ -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 })
package/dist/components/TokenField/index.es.js.map CHANGED
@@ -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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"}
package/dist/components/form/EmailField/hook.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- export declare const useEmailAutocomplete: () => {
2
+ export declare const useEmailAutocomplete: (propsOnChange?: ((value: string) => void) | undefined) => {
3
3
  inputValue: string;
4
4
  setInputValue: import('react').Dispatch<import('react').SetStateAction<string>>;
5
5
  suggestions: string[];
package/dist/components/form/EmailField/index.d.ts CHANGED
@@ -10,6 +10,6 @@ export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
10
10
  label?: string;
11
11
  inputStyle?: React.CSSProperties;
12
12
  inputRef?: React.RefObject<HTMLInputElement>;
13
- setValue?: (value: string) => void;
13
+ onChange?: (value: string) => void;
14
14
  };
15
- export declare const EmailField: ({ showOptionalLabel, requiredInput, success, error, errorMessage, helpMessage, label, id, disabled, style, className, inputStyle, rightSlot, inputRef, setValue, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
15
+ export declare const EmailField: ({ showOptionalLabel, requiredInput, success, error, errorMessage, helpMessage, label, id, disabled, style, className, inputStyle, rightSlot, inputRef, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
package/dist/{index-Cn20y-Ji.js → index-B9cLhrrb.js} RENAMED
@@ -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-CXayTd35.js";
6
+ import { S as Segment } from "./index-BDy8i79S.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-Cn20y-Ji.js.map
5689
+ //# sourceMappingURL=index-B9cLhrrb.js.map