@consumidor-positivo/aurora 1.3.0 → 1.3.2

package/astro/form/TokenField/index.astro

@@ -133,6 +133,13 @@ const digits = Array.from({ length: size }, (_, i) => i)
       if (value.length === size) emit('au:tokencomplete', { value })
     }
 
+    // Same as the hook's `_fillTokens`: keeps only the digits.
+    function fillTokens(raw: string) {
+      const digits = raw.replace(/\D/g, '').slice(0, size).split('')
+      setTokens(inputs.map((_, i) => digits[i] ?? ''))
+      focusAt(digits.length)
+    }
+
     on('input', (event) => {
       const i = indexOf(event.target)
       if (i < 0) return
@@ -140,6 +147,14 @@ const digits = Array.from({ length: size }, (_, i) => i)
       let value = inputs[i].value
       if (value === seen[i]) return
       seen[i] = value
+
+      // On mobile the `one-time-code` autofill and the keyboard clipboard
+      // suggestion put the whole code in one input as an input, not a paste.
+      if (value.replace(/\D/g, '').length >= size) {
+        fillTokens(value)
+        return
+      }
+
       const isEmpty = value === ''
 
       if (isValid(value)) {
@@ -178,14 +193,7 @@ const digits = Array.from({ length: size }, (_, i) => i)
       if (indexOf(event.target) < 0) return
       event.preventDefault()
 
-      const value = event.clipboardData?.getData('Text') ?? ''
-      if (isValid(value)) {
-        const pasted = value.split('').slice(0, size)
-        setTokens(inputs.map((_, i) => pasted[i] ?? ''))
-        focusAt(pasted.length)
-      } else {
-        setTokens(emptyTokens())
-      }
+      fillTokens(event.clipboardData?.getData('text') ?? '')
     })
 
     // The `[tokenMap]` effect also runs on mount.

package/dist/components/Tabs/index.es.js

@@ -109,6 +109,7 @@ import './styles.css';const Tabs = ({
           id: `au-tabpanel-${tab}`,
           "aria-labelledby": `au-tab-${tab}`,
           className: `au-tabs__children children-${tab}`,
+          hidden: activeTab !== tab,
           children: /* @__PURE__ */ jsx(When, { condition: activeTab === tab, children })
         },
         `au-tabs-${tab}`

package/dist/components/Tabs/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../lib/components/Tabs/index.tsx"],"sourcesContent":["import { useEffect, useState, useRef } from 'react'\nimport { If } from '@components/misc'\n\nimport classNames from 'classnames'\n\nimport './styles.scss'\n\nexport type TabsProps = {\n  tabs: TabItemProps[]\n  /** Hides the tab bar and renders only the active panel. Not mapped in Figma. */\n  areTabsHidden?: boolean\n  initialTab?: string\n  /** Content rendered at the right side of the tab bar. Not mapped in Figma. */\n  rightSlotChildren?: React.ReactNode\n  onClick?: (value: string) => void\n  'data-testid'?: string\n}\n\nexport type TabItemProps = {\n  tab: string\n  title: string\n  children?: React.ReactElement\n}\n\nexport const Tabs = ({\n  tabs,\n  initialTab,\n  onClick,\n  areTabsHidden,\n  rightSlotChildren,\n  'data-testid': dataTestId,\n}: TabsProps) => {\n  const [activeTab, setActiveTab] = useState(initialTab)\n  const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0 })\n\n  const tabsRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    setActiveTab(initialTab)\n  }, [initialTab])\n\n  useEffect(() => {\n    const container = tabsRef.current\n    if (activeTab && container) {\n      const activeElement = container.querySelector(\n        '.au-tabs__btns-option--active',\n      ) as HTMLElement\n\n      if (activeElement) {\n        setIndicatorStyle({\n          left: activeElement.offsetLeft,\n          width: activeElement.offsetWidth,\n        })\n      }\n    }\n  }, [activeTab, tabs])\n\n  const handleClick = (item: TabItemProps) => {\n    onClick && onClick(item.tab)\n    setActiveTab(item.tab)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return\n\n    const container = tabsRef.current\n    if (!container) return\n\n    const tabButtons = Array.from(\n      container.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]'),\n    )\n    const currentIndex = tabButtons.indexOf(\n      document.activeElement as HTMLButtonElement,\n    )\n    if (currentIndex === -1) return\n\n    event.preventDefault()\n\n    const lastIndex = tabButtons.length - 1\n    const nextIndex = {\n      ArrowLeft: currentIndex === 0 ? lastIndex : currentIndex - 1,\n      ArrowRight: currentIndex === lastIndex ? 0 : currentIndex + 1,\n      Home: 0,\n      End: lastIndex,\n    }[event.key as 'ArrowLeft' | 'ArrowRight' | 'Home' | 'End']\n\n    tabButtons[nextIndex]?.focus()\n  }\n\n  const focusableTab = activeTab ?? tabs[0]?.tab\n\n  return (\n    <>\n      <If condition={!areTabsHidden}>\n        <div className=\"au-tabs\" data-testid={dataTestId}>\n          <div className=\"au-tabs__container\">\n            <div\n              className=\"au-tabs__btns\"\n              role=\"tablist\"\n              ref={tabsRef}\n              onKeyDown={handleKeyDown}>\n              {tabs.map((item: TabItemProps) => (\n                <button\n                  key={item.tab}\n                  type=\"button\"\n                  role=\"tab\"\n                  id={`au-tab-${item.tab}`}\n                  aria-selected={activeTab === item.tab}\n                  aria-controls={`au-tabpanel-${item.tab}`}\n                  tabIndex={item.tab === focusableTab ? 0 : -1}\n                  className={classNames('au-tabs__btns-option', {\n                    'au-tabs__btns-option--active': activeTab === item.tab,\n                  })}\n                  onClick={() => handleClick(item)}>\n                  {item.title}\n                </button>\n              ))}\n              <div\n                className=\"au-tabs__btns-indicator\"\n                aria-hidden=\"true\"\n                style={{\n                  left: `${indicatorStyle.left}px`,\n                  width: `${indicatorStyle.width}px`,\n                }}\n              />\n            </div>\n            <If condition={!!rightSlotChildren}>{rightSlotChildren}</If>\n          </div>\n        </div>\n      </If>\n\n      {tabs.map(({ children, tab }: TabItemProps) => {\n        return (\n          <div\n            role=\"tabpanel\"\n            id={`au-tabpanel-${tab}`}\n            aria-labelledby={`au-tab-${tab}`}\n            className={`au-tabs__children children-${tab}`}\n            key={`au-tabs-${tab}`}>\n            <If condition={activeTab === tab}>{children}</If>\n          </div>\n        )\n      })}\n    </>\n  )\n}\n\nexport default Tabs\n"],"names":["_a","If"],"mappings":"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"}
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/Tabs/index.tsx"],"sourcesContent":["import { useEffect, useState, useRef } from 'react'\nimport { If } from '@components/misc'\n\nimport classNames from 'classnames'\n\nimport './styles.scss'\n\nexport type TabsProps = {\n  tabs: TabItemProps[]\n  /** Hides the tab bar and renders only the active panel. Not mapped in Figma. */\n  areTabsHidden?: boolean\n  initialTab?: string\n  /** Content rendered at the right side of the tab bar. Not mapped in Figma. */\n  rightSlotChildren?: React.ReactNode\n  onClick?: (value: string) => void\n  'data-testid'?: string\n}\n\nexport type TabItemProps = {\n  tab: string\n  title: string\n  children?: React.ReactElement\n}\n\nexport const Tabs = ({\n  tabs,\n  initialTab,\n  onClick,\n  areTabsHidden,\n  rightSlotChildren,\n  'data-testid': dataTestId,\n}: TabsProps) => {\n  const [activeTab, setActiveTab] = useState(initialTab)\n  const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0 })\n\n  const tabsRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    setActiveTab(initialTab)\n  }, [initialTab])\n\n  useEffect(() => {\n    const container = tabsRef.current\n    if (activeTab && container) {\n      const activeElement = container.querySelector(\n        '.au-tabs__btns-option--active',\n      ) as HTMLElement\n\n      if (activeElement) {\n        setIndicatorStyle({\n          left: activeElement.offsetLeft,\n          width: activeElement.offsetWidth,\n        })\n      }\n    }\n  }, [activeTab, tabs])\n\n  const handleClick = (item: TabItemProps) => {\n    onClick && onClick(item.tab)\n    setActiveTab(item.tab)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return\n\n    const container = tabsRef.current\n    if (!container) return\n\n    const tabButtons = Array.from(\n      container.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]'),\n    )\n    const currentIndex = tabButtons.indexOf(\n      document.activeElement as HTMLButtonElement,\n    )\n    if (currentIndex === -1) return\n\n    event.preventDefault()\n\n    const lastIndex = tabButtons.length - 1\n    const nextIndex = {\n      ArrowLeft: currentIndex === 0 ? lastIndex : currentIndex - 1,\n      ArrowRight: currentIndex === lastIndex ? 0 : currentIndex + 1,\n      Home: 0,\n      End: lastIndex,\n    }[event.key as 'ArrowLeft' | 'ArrowRight' | 'Home' | 'End']\n\n    tabButtons[nextIndex]?.focus()\n  }\n\n  const focusableTab = activeTab ?? tabs[0]?.tab\n\n  return (\n    <>\n      <If condition={!areTabsHidden}>\n        <div className=\"au-tabs\" data-testid={dataTestId}>\n          <div className=\"au-tabs__container\">\n            <div\n              className=\"au-tabs__btns\"\n              role=\"tablist\"\n              ref={tabsRef}\n              onKeyDown={handleKeyDown}>\n              {tabs.map((item: TabItemProps) => (\n                <button\n                  key={item.tab}\n                  type=\"button\"\n                  role=\"tab\"\n                  id={`au-tab-${item.tab}`}\n                  aria-selected={activeTab === item.tab}\n                  aria-controls={`au-tabpanel-${item.tab}`}\n                  tabIndex={item.tab === focusableTab ? 0 : -1}\n                  className={classNames('au-tabs__btns-option', {\n                    'au-tabs__btns-option--active': activeTab === item.tab,\n                  })}\n                  onClick={() => handleClick(item)}>\n                  {item.title}\n                </button>\n              ))}\n              <div\n                className=\"au-tabs__btns-indicator\"\n                aria-hidden=\"true\"\n                style={{\n                  left: `${indicatorStyle.left}px`,\n                  width: `${indicatorStyle.width}px`,\n                }}\n              />\n            </div>\n            <If condition={!!rightSlotChildren}>{rightSlotChildren}</If>\n          </div>\n        </div>\n      </If>\n\n      {tabs.map(({ children, tab }: TabItemProps) => {\n        return (\n          <div\n            role=\"tabpanel\"\n            id={`au-tabpanel-${tab}`}\n            aria-labelledby={`au-tab-${tab}`}\n            className={`au-tabs__children children-${tab}`}\n            hidden={activeTab !== tab}\n            key={`au-tabs-${tab}`}>\n            <If condition={activeTab === tab}>{children}</If>\n          </div>\n        )\n      })}\n    </>\n  )\n}\n\nexport default Tabs\n"],"names":["_a","If"],"mappings":"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"}

package/dist/components/form/TokenField/index.es.js

@@ -64,6 +64,11 @@ const useTokenField = ({
     );
     if (nextItem) nextItem.focus();
   }
+  function _fillTokens(raw) {
+    const digits = raw.replace(/\D/g, "").slice(0, size).split("");
+    setTokenMap({ ..._getDefaultTokens(), ...digits });
+    _goToNextInput(digits.length - 1);
+  }
   function _resetFocus() {
     var _a;
     const firstItem = (_a = rootElementRef.current) == null ? void 0 : _a.querySelector(
@@ -89,6 +94,10 @@ const useTokenField = ({
     var _a;
     e.preventDefault();
     let value = (_a = e == null ? void 0 : e.target) == null ? void 0 : _a.value;
+    if (value.replace(/\D/g, "").length >= size) {
+      _fillTokens(value);
+      return;
+    }
     const isNumberValid = inputtedValueIsValid(value);
     const isEmpty = value === "";
     if (isNumberValid) {
@@ -111,15 +120,7 @@ const useTokenField = ({
   }
   function onPasteNumber(e) {
     e.preventDefault();
-    const value = e.clipboardData.getData("Text");
-    const isNumberValid = inputtedValueIsValid(value);
-    if (isNumberValid) {
-      const arrValue = value.split("").slice(0, size);
-      setTokenMap({ ..._getDefaultTokens(), ...arrValue });
-      _goToNextInput(arrValue.length - 1);
-    } else {
-      setTokenMap(_getDefaultTokens());
-    }
+    _fillTokens(e.clipboardData.getData("text"));
   }
   return {
     onKeyUpHandler,

package/dist/components/form/TokenField/index.es.js.map

@@ -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  'data-testid'?: string\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  'data-testid': dataTestId,\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\" data-testid={dataTestId}>\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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"}
+{"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  // Keeps only the digits, so a code copied as \"123 456\" still fills in.\n  function _fillTokens(raw: string) {\n    const digits = raw.replace(/\\D/g, '').slice(0, size).split('')\n    setTokenMap({ ..._getDefaultTokens(), ...digits })\n    _goToNextInput(digits.length - 1)\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\n    // On mobile the `one-time-code` autofill and the keyboard clipboard\n    // suggestion put the whole code in one input as a change, not a paste.\n    if (value.replace(/\\D/g, '').length >= size) {\n      _fillTokens(value)\n      return\n    }\n\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    _fillTokens(e.clipboardData.getData('text'))\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  'data-testid'?: string\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  'data-testid': dataTestId,\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\" data-testid={dataTestId}>\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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@consumidor-positivo/aurora",
   "private": false,
-  "version": "1.3.0",
+  "version": "1.3.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/AcordoCertoBR/aurora"
@@ -12,7 +12,8 @@
   "sideEffects": [
     "*.scss",
     "*.css",
-    "*.astro"
+    "*.astro",
+    "./dist/components/globalStyles/index.es.js"
   ],
   "types": "./dist/main.d.ts",
   "files": [