@apia/components 2.0.7 → 2.0.8
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/IconsList/Icon.js.map +1 -1
- package/dist/components/IconsList/IconWrapper.js.map +1 -1
- package/dist/components/IconsList/KeyHandler.js.map +1 -1
- package/dist/components/IconsList/context.js.map +1 -1
- package/dist/components/IconsList/index.js.map +1 -1
- package/dist/components/IconsList/renderers/DefaultIconRenderer.js.map +1 -1
- package/dist/components/IconsList/store/context.js.map +1 -1
- package/dist/components/IconsList/store/distinctors.js.map +1 -1
- package/dist/components/IconsList/store/keysMaker.js.map +1 -1
- package/dist/components/IconsList/store/operations.js.map +1 -1
- package/dist/components/IconsList/store/state.js.map +1 -1
- package/dist/components/IconsList/store/useStore.js.map +1 -1
- package/dist/components/IconsList/styles.js.map +1 -1
- package/dist/components/IconsList/util.js.map +1 -1
- package/dist/components/ListBox/Combobox.js.map +1 -1
- package/dist/components/ListBox/listbox.js.map +1 -1
- package/dist/components/ListBox/operations.js.map +1 -1
- package/dist/components/ListBox/useIndexedChildren.js.map +1 -1
- package/dist/components/ListBox/useListboxAutofocus.js.map +1 -1
- package/dist/components/ListBox/useListboxContextValue.js.map +1 -1
- package/dist/components/ListBox/useShoutSelectionChange.js.map +1 -1
- package/dist/components/ListBox/useStore.js.map +1 -1
- package/dist/components/ListBox/useUpdateRowCount.js.map +1 -1
- package/dist/components/SortableList/SortableListHandler.js +1 -1
- package/dist/components/SortableList/SortableListHandler.js.map +1 -1
- package/dist/components/SortableList/SortableListItem.js.map +1 -1
- package/dist/components/SortableList/index.js.map +1 -1
- package/dist/components/Toolbar/ToolbarController.js.map +1 -1
- package/dist/components/Toolbar/ToolbarIconButton.js.map +1 -1
- package/dist/components/Toolbar/ToolbarInput.js.map +1 -1
- package/dist/components/Toolbar/ToolbarSelect.js.map +1 -1
- package/dist/components/Toolbar/ToolbarSeparator.js.map +1 -1
- package/dist/components/Toolbar/ToolbarTextButton.js.map +1 -1
- package/dist/components/Toolbar/index.js.map +1 -1
- package/dist/components/Toolbar/styles.js.map +1 -1
- package/dist/components/accordion/Accordion.d.ts +1 -0
- package/dist/components/accordion/Accordion.js +6 -0
- package/dist/components/accordion/Accordion.js.map +1 -1
- package/dist/components/accordion/AccordionItem.d.ts +2 -1
- package/dist/components/accordion/AccordionItem.js +5 -1
- package/dist/components/accordion/AccordionItem.js.map +1 -1
- package/dist/components/accordion/AccordionItemButton.js.map +1 -1
- package/dist/components/accordion/AccordionItemContent.js.map +1 -1
- package/dist/components/accordion/KeyHandler.js +64 -59
- package/dist/components/accordion/KeyHandler.js.map +1 -1
- package/dist/components/accordion/context.js.map +1 -1
- package/dist/components/accordion/defaultElements/Checkbox.js.map +1 -1
- package/dist/components/accordion/defaultElements/DefaultAccordionItemButton.js +1 -3
- package/dist/components/accordion/defaultElements/DefaultAccordionItemButton.js.map +1 -1
- package/dist/components/accordion/defaultElements/useIsChecked.js.map +1 -1
- package/dist/components/accordion/handler.d.ts +1 -1
- package/dist/components/accordion/handler.js +11 -3
- package/dist/components/accordion/handler.js.map +1 -1
- package/dist/components/apia/ApiaDateFilter.js.map +1 -1
- package/dist/components/apia/ApiaFilter.js.map +1 -1
- package/dist/components/buttons/useOtherTagButton.js.map +1 -1
- package/dist/components/collapsiblePanel/index.js.map +1 -1
- package/dist/components/collapsiblePanel/styles.js.map +1 -1
- package/dist/components/dialogs/AlertModal.js.map +1 -1
- package/dist/components/dialogs/ConfirmModal.js.map +1 -1
- package/dist/components/forms/Captcha.js.map +1 -1
- package/dist/components/forms/Checkbox.js.map +1 -1
- package/dist/components/forms/DateInput.js.map +1 -1
- package/dist/components/forms/FieldErrorMessage.js.map +1 -1
- package/dist/components/forms/FieldLabel.js.map +1 -1
- package/dist/components/forms/IconInput.js.map +1 -1
- package/dist/components/forms/NumberInput.js.map +1 -1
- package/dist/components/forms/RequiredMark.js.map +1 -1
- package/dist/components/forms/buttons/BaseButton.js.map +1 -1
- package/dist/components/forms/buttons/IconButton.js.map +1 -1
- package/dist/components/forms/buttons/SimpleButton.js.map +1 -1
- package/dist/components/forms/util/style.js.map +1 -1
- package/dist/components/importComponent.js +1 -1
- package/dist/components/importComponent.js.map +1 -1
- package/dist/components/loaders/LinearLoader.js.map +1 -1
- package/dist/components/loaders/LoaderSpinner.js.map +1 -1
- package/dist/components/loaders/ProgressBar.js.map +1 -1
- package/dist/components/modals/CalendarModal.js.map +1 -1
- package/dist/components/modals/Modal.d.ts +28 -2
- package/dist/components/modals/Modal.js +3 -1
- package/dist/components/modals/Modal.js.map +1 -1
- package/dist/components/modals/ModalContext.js.map +1 -1
- package/dist/components/modals/Overlay.js.map +1 -1
- package/dist/components/modals/StaticModal.js.map +1 -1
- package/dist/components/modals/WindowModal.js +225 -4
- package/dist/components/modals/WindowModal.js.map +1 -1
- package/dist/components/modals/hooks/useEscapeKey.js +36 -0
- package/dist/components/modals/hooks/useEscapeKey.js.map +1 -0
- package/dist/components/modals/hooks/useInitialFocus.js +37 -0
- package/dist/components/modals/hooks/useInitialFocus.js.map +1 -0
- package/dist/components/modals/hooks/useModal.js.map +1 -1
- package/dist/components/modals/hooks/useStyleState.js +44 -0
- package/dist/components/modals/hooks/useStyleState.js.map +1 -0
- package/dist/components/modals/layout/Confirm.js.map +1 -1
- package/dist/components/modals/layout/DialogButtonBar.js.map +1 -1
- package/dist/components/modals/layout/DialogHeader.js +1 -2
- package/dist/components/modals/layout/DialogHeader.js.map +1 -1
- package/dist/components/responsive/AutoEllipsis.js.map +1 -1
- package/dist/components/responsive/makeResponsiveComponent.js.map +1 -1
- package/dist/components/waiAriaHelpers/typeAhead.js.map +1 -1
- package/dist/globalFocus.js +2 -2
- package/dist/globalFocus.js.map +1 -1
- package/dist/hooks/useBodyScrollLock.js +2 -2
- package/dist/hooks/useBodyScrollLock.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/objects/ApiaUtil/dialogs/ApiaUtilDialogs.js +3 -3
- package/dist/objects/ApiaUtil/dialogs/ApiaUtilDialogs.js.map +1 -1
- package/dist/objects/ApiaUtil/index.js +1 -1
- package/dist/objects/ApiaUtil/index.js.map +1 -1
- package/dist/objects/ApiaUtil/menu/ApiaUtilMenu.js +2 -2
- package/dist/objects/ApiaUtil/menu/ApiaUtilMenu.js.map +1 -1
- package/dist/objects/ApiaUtil/modals/ApiaUtilModals.js +3 -3
- package/dist/objects/ApiaUtil/modals/ApiaUtilModals.js.map +1 -1
- package/dist/objects/ApiaUtil/modals/OpenModal.d.ts +31 -1
- package/dist/objects/ApiaUtil/modals/OpenModal.js +18 -0
- package/dist/objects/ApiaUtil/modals/OpenModal.js.map +1 -1
- package/dist/objects/ApiaUtil/mouse/ApiaUtilMouse.js.map +1 -1
- package/dist/objects/ApiaUtil/notifications/ApiaUtilNotifications.js.map +1 -1
- package/dist/objects/ApiaUtil/parsers/ApiaUtilParsers.js.map +1 -1
- package/dist/objects/ApiaUtil/tabs/ApiaUtilCurrentTab.js.map +1 -1
- package/dist/objects/ApiaUtil/tabs/ApiaUtilTabsController.js +1 -1
- package/dist/objects/ApiaUtil/tabs/ApiaUtilTabsController.js.map +1 -1
- package/dist/objects/ApiaUtil/tabs/util.js.map +1 -1
- package/dist/objects/ApiaUtil/tooltips/ApiaUtilTooltip.js +1 -1
- package/dist/objects/ApiaUtil/tooltips/ApiaUtilTooltip.js.map +1 -1
- package/dist/objects/ApiaUtil/tooltips/ApiaUtilTooltips.js.map +1 -1
- package/dist/objects/ApiaUtil/tooltips/AutomaticTooltip.js +1 -1
- package/dist/objects/ApiaUtil/tooltips/AutomaticTooltip.js.map +1 -1
- package/dist/objects/ApiaUtil/tooltips/tooltip/Tooltip.js.map +1 -1
- package/dist/objects/ApiaUtil/tooltips/tooltip/util.js.map +1 -1
- package/dist/tabs/Content.js.map +1 -1
- package/dist/tabs/ContextMenu.js +1 -2
- package/dist/tabs/ContextMenu.js.map +1 -1
- package/dist/tabs/Item.js +1 -2
- package/dist/tabs/Item.js.map +1 -1
- package/dist/tabs/Tabs.js.map +1 -1
- package/dist/tabs/TabsList.js.map +1 -1
- package/dist/tabs/renderers/DefaultTabsLabelRenderer.js.map +1 -1
- package/dist/tabs/tabsController.js.map +1 -1
- package/dist/tabs/useTabsList.js.map +1 -1
- package/dist/tabs/util.js.map +1 -1
- package/package.json +8 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInput.js","sources":["../../../src/components/forms/NumberInput.tsx"],"sourcesContent":["/**\n * El NumberInput respeta los parámetros de ambiente:\n * - AMOUNT_DECIMAL_SEPARATOR\n * - AMOUNT_DECIMAL_ZEROS\n * - CHAR_DECIMAL_SEPARATOR\n * - CHAR_THOUS_SEPARATOR\n * - ADD_THOUSAND_SEPARATOR\n */\n\nimport React from 'react';\nimport { Input, InputProps } from '@apia/theme';\n\nexport type TNumberInputChangeEvent = { error: boolean; value: string };\n\nexport type TNumberInput = Omit<\n InputProps,\n 'type' | 'onChange' | 'onBlur' | 'value' | 'defaultValue'\n> & {\n onChange?: (ev: TNumberInputChangeEvent) => unknown;\n value?: string;\n defaultValue?: string;\n avoidDecimalRestriction?: boolean;\n};\n\ndeclare global {\n interface Window {\n AMOUNT_DECIMAL_SEPARATOR: string;\n AMOUNT_DECIMAL_ZEROS: string;\n CHAR_DECIMAL_SEPARATOR: string;\n CHAR_THOUS_SEPARATOR: string;\n ADD_THOUSAND_SEPARATOR: boolean;\n }\n}\n\nfunction fillZeros(amount: number) {\n return Array(Math.max(0, amount)).fill(0).join('');\n}\n\nfunction fillThousandsZeros(value: number) {\n const stringValue = String(value);\n return `${fillZeros(3 - stringValue.length)}${String(value)}`;\n}\n\nconst decimalCount = Number(window.AMOUNT_DECIMAL_SEPARATOR);\nconst decimalZeros = Number(window.AMOUNT_DECIMAL_ZEROS);\nconst decimalSeparator = window.CHAR_DECIMAL_SEPARATOR;\nconst thousandsSeparator = window.CHAR_THOUS_SEPARATOR;\nconst regexpThousandsSeparator =\n thousandsSeparator === '.' ? '\\\\.' : thousandsSeparator;\nconst regexpDecimalSeparator =\n decimalSeparator === '.' ? '\\\\.' : decimalSeparator;\nconst shouldRound = false;\n\nexport function parseNumberInputValueToNumber(value: string): number {\n return Number.parseFloat(\n value.replaceAll(thousandsSeparator, '').replaceAll(decimalSeparator, '.'),\n );\n}\n\nexport function parseNumberValueToNumberInput(value: string | number): string {\n const stringNumber = String(value);\n const result = stringNumber.match(/(-?)(\\d+)(?:\\.(\\d+))/);\n if (!result) return '';\n\n const isNegative = !!result[1];\n const integer = result[2];\n const decimals = result[3] as string | null;\n const decimalsString = decimals ? `${regexpDecimalSeparator}${decimals}` : '';\n\n return (\n formatValueToShow(`${isNegative ? '-' : ''}${integer}${decimalsString}`) ??\n ''\n );\n}\n\nfunction formatValueToShow(\n value: string,\n avoidDecimalRestriction = false,\n): string | null {\n const result = value.match(\n new RegExp(\n `^(-)?((?:(?:\\\\d{1,3})${regexpThousandsSeparator}(?:\\\\d{3}${regexpThousandsSeparator})*(?:\\\\d{3}))?|(?:\\\\d*))(?:(?:${regexpDecimalSeparator})(\\\\d+))?$`,\n ),\n );\n if (!result) return null;\n\n const isNegative = !!result[1];\n let module = Number(result[2].replaceAll(thousandsSeparator, ''));\n const slicedDecimals = avoidDecimalRestriction\n ? result[3]\n : result[3]?.slice(0, decimalCount + 1) ?? '';\n let decimalsString: string;\n if (!avoidDecimalRestriction) {\n const noZeroDecimals =\n (slicedDecimals\n ? `${String(\n Math.round(\n Number(\n `${slicedDecimals}${fillZeros(\n (shouldRound ? decimalCount + 1 : decimalCount) -\n slicedDecimals.length,\n )}`,\n ) / (shouldRound ? 10 : 1),\n ),\n )}`\n : ''\n )\n .slice(0, decimalCount)\n .match(/(\\d*[1-9])0*/)?.[1] ?? '';\n decimalsString = `${noZeroDecimals}${fillZeros(\n decimalZeros - noZeroDecimals.length,\n )}`;\n } else {\n decimalsString = slicedDecimals;\n }\n\n const finalNumberString: string[] = [];\n while (module >= 1000) {\n module /= 1000;\n const truncedInteger = Math.trunc(module);\n finalNumberString.unshift(\n fillThousandsZeros(Math.round((module - truncedInteger) * 1000)),\n );\n module = truncedInteger;\n }\n finalNumberString.unshift(String(module));\n\n return `${isNegative ? '-' : ''}${finalNumberString.join(\n window.ADD_THOUSAND_SEPARATOR ? window.CHAR_THOUS_SEPARATOR : '',\n )}${decimalsString.length > 0 ? `${decimalSeparator}${decimalsString}` : ''}`;\n}\n\nexport const NumberInput = React.forwardRef<HTMLInputElement, TNumberInput>(\n ({ value, avoidDecimalRestriction, ...props }, ref) => {\n const [actualValue, setActualValue] = React.useState<string>('');\n const [showValue, setShowValue] = React.useState<string>('');\n const lastEmittedValue = React.useRef<string>('');\n\n const setValue = React.useCallback(\n (newValue: string) => {\n if (newValue === '') {\n if (newValue === lastEmittedValue.current) return;\n setActualValue('');\n setShowValue('');\n props.onChange?.({ value: '', error: false });\n } else {\n const parsedValue = formatValueToShow(\n newValue,\n avoidDecimalRestriction,\n );\n if (parsedValue === null) {\n setActualValue('');\n setShowValue('');\n props.onChange?.({ value: '', error: true });\n } else {\n if (newValue === lastEmittedValue.current) return;\n setActualValue(newValue);\n setShowValue(parsedValue);\n props.onChange?.({ value: parsedValue, error: false });\n }\n }\n lastEmittedValue.current = newValue;\n },\n [avoidDecimalRestriction, props],\n );\n\n React.useEffect(() => {\n if (value !== actualValue) setValue((value as string) ?? '');\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [value]);\n\n return (\n <Input\n {...props}\n onFocus={React.useCallback(\n (ev: React.FocusEvent<HTMLInputElement>) => {\n props.onFocus?.(ev);\n setShowValue(\n String(actualValue).replaceAll(thousandsSeparator, ''),\n );\n },\n [actualValue, props],\n )}\n onBlur={React.useCallback(\n (ev: React.FocusEvent<HTMLInputElement>) => {\n setValue(ev.target.value);\n },\n [setValue],\n )}\n onChange={React.useCallback(\n (ev: React.ChangeEvent<HTMLInputElement>) => {\n setShowValue(ev.target.value);\n },\n [],\n )}\n type=\"text\"\n ref={ref}\n value={showValue}\n />\n );\n },\n);\n\nNumberInput.displayName = 'NumberInput';\n"],"names":["React"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"NumberInput.js","sources":["../../../src/components/forms/NumberInput.tsx"],"sourcesContent":["/**\r\n * El NumberInput respeta los parámetros de ambiente:\r\n * - AMOUNT_DECIMAL_SEPARATOR\r\n * - AMOUNT_DECIMAL_ZEROS\r\n * - CHAR_DECIMAL_SEPARATOR\r\n * - CHAR_THOUS_SEPARATOR\r\n * - ADD_THOUSAND_SEPARATOR\r\n */\r\n\r\nimport React from 'react';\r\nimport { Input, InputProps } from '@apia/theme';\r\n\r\nexport type TNumberInputChangeEvent = { error: boolean; value: string };\r\n\r\nexport type TNumberInput = Omit<\r\n InputProps,\r\n 'type' | 'onChange' | 'onBlur' | 'value' | 'defaultValue'\r\n> & {\r\n onChange?: (ev: TNumberInputChangeEvent) => unknown;\r\n value?: string;\r\n defaultValue?: string;\r\n avoidDecimalRestriction?: boolean;\r\n};\r\n\r\ndeclare global {\r\n interface Window {\r\n AMOUNT_DECIMAL_SEPARATOR: string;\r\n AMOUNT_DECIMAL_ZEROS: string;\r\n CHAR_DECIMAL_SEPARATOR: string;\r\n CHAR_THOUS_SEPARATOR: string;\r\n ADD_THOUSAND_SEPARATOR: boolean;\r\n }\r\n}\r\n\r\nfunction fillZeros(amount: number) {\r\n return Array(Math.max(0, amount)).fill(0).join('');\r\n}\r\n\r\nfunction fillThousandsZeros(value: number) {\r\n const stringValue = String(value);\r\n return `${fillZeros(3 - stringValue.length)}${String(value)}`;\r\n}\r\n\r\nconst decimalCount = Number(window.AMOUNT_DECIMAL_SEPARATOR);\r\nconst decimalZeros = Number(window.AMOUNT_DECIMAL_ZEROS);\r\nconst decimalSeparator = window.CHAR_DECIMAL_SEPARATOR;\r\nconst thousandsSeparator = window.CHAR_THOUS_SEPARATOR;\r\nconst regexpThousandsSeparator =\r\n thousandsSeparator === '.' ? '\\\\.' : thousandsSeparator;\r\nconst regexpDecimalSeparator =\r\n decimalSeparator === '.' ? '\\\\.' : decimalSeparator;\r\nconst shouldRound = false;\r\n\r\nexport function parseNumberInputValueToNumber(value: string): number {\r\n return Number.parseFloat(\r\n value.replaceAll(thousandsSeparator, '').replaceAll(decimalSeparator, '.'),\r\n );\r\n}\r\n\r\nexport function parseNumberValueToNumberInput(value: string | number): string {\r\n const stringNumber = String(value);\r\n const result = stringNumber.match(/(-?)(\\d+)(?:\\.(\\d+))/);\r\n if (!result) return '';\r\n\r\n const isNegative = !!result[1];\r\n const integer = result[2];\r\n const decimals = result[3] as string | null;\r\n const decimalsString = decimals ? `${regexpDecimalSeparator}${decimals}` : '';\r\n\r\n return (\r\n formatValueToShow(`${isNegative ? '-' : ''}${integer}${decimalsString}`) ??\r\n ''\r\n );\r\n}\r\n\r\nfunction formatValueToShow(\r\n value: string,\r\n avoidDecimalRestriction = false,\r\n): string | null {\r\n const result = value.match(\r\n new RegExp(\r\n `^(-)?((?:(?:\\\\d{1,3})${regexpThousandsSeparator}(?:\\\\d{3}${regexpThousandsSeparator})*(?:\\\\d{3}))?|(?:\\\\d*))(?:(?:${regexpDecimalSeparator})(\\\\d+))?$`,\r\n ),\r\n );\r\n if (!result) return null;\r\n\r\n const isNegative = !!result[1];\r\n let module = Number(result[2].replaceAll(thousandsSeparator, ''));\r\n const slicedDecimals = avoidDecimalRestriction\r\n ? result[3]\r\n : result[3]?.slice(0, decimalCount + 1) ?? '';\r\n let decimalsString: string;\r\n if (!avoidDecimalRestriction) {\r\n const noZeroDecimals =\r\n (slicedDecimals\r\n ? `${String(\r\n Math.round(\r\n Number(\r\n `${slicedDecimals}${fillZeros(\r\n (shouldRound ? decimalCount + 1 : decimalCount) -\r\n slicedDecimals.length,\r\n )}`,\r\n ) / (shouldRound ? 10 : 1),\r\n ),\r\n )}`\r\n : ''\r\n )\r\n .slice(0, decimalCount)\r\n .match(/(\\d*[1-9])0*/)?.[1] ?? '';\r\n decimalsString = `${noZeroDecimals}${fillZeros(\r\n decimalZeros - noZeroDecimals.length,\r\n )}`;\r\n } else {\r\n decimalsString = slicedDecimals;\r\n }\r\n\r\n const finalNumberString: string[] = [];\r\n while (module >= 1000) {\r\n module /= 1000;\r\n const truncedInteger = Math.trunc(module);\r\n finalNumberString.unshift(\r\n fillThousandsZeros(Math.round((module - truncedInteger) * 1000)),\r\n );\r\n module = truncedInteger;\r\n }\r\n finalNumberString.unshift(String(module));\r\n\r\n return `${isNegative ? '-' : ''}${finalNumberString.join(\r\n window.ADD_THOUSAND_SEPARATOR ? window.CHAR_THOUS_SEPARATOR : '',\r\n )}${decimalsString.length > 0 ? `${decimalSeparator}${decimalsString}` : ''}`;\r\n}\r\n\r\nexport const NumberInput = React.forwardRef<HTMLInputElement, TNumberInput>(\r\n ({ value, avoidDecimalRestriction, ...props }, ref) => {\r\n const [actualValue, setActualValue] = React.useState<string>('');\r\n const [showValue, setShowValue] = React.useState<string>('');\r\n const lastEmittedValue = React.useRef<string>('');\r\n\r\n const setValue = React.useCallback(\r\n (newValue: string) => {\r\n if (newValue === '') {\r\n if (newValue === lastEmittedValue.current) return;\r\n setActualValue('');\r\n setShowValue('');\r\n props.onChange?.({ value: '', error: false });\r\n } else {\r\n const parsedValue = formatValueToShow(\r\n newValue,\r\n avoidDecimalRestriction,\r\n );\r\n if (parsedValue === null) {\r\n setActualValue('');\r\n setShowValue('');\r\n props.onChange?.({ value: '', error: true });\r\n } else {\r\n if (newValue === lastEmittedValue.current) return;\r\n setActualValue(newValue);\r\n setShowValue(parsedValue);\r\n props.onChange?.({ value: parsedValue, error: false });\r\n }\r\n }\r\n lastEmittedValue.current = newValue;\r\n },\r\n [avoidDecimalRestriction, props],\r\n );\r\n\r\n React.useEffect(() => {\r\n if (value !== actualValue) setValue((value as string) ?? '');\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [value]);\r\n\r\n return (\r\n <Input\r\n {...props}\r\n onFocus={React.useCallback(\r\n (ev: React.FocusEvent<HTMLInputElement>) => {\r\n props.onFocus?.(ev);\r\n setShowValue(\r\n String(actualValue).replaceAll(thousandsSeparator, ''),\r\n );\r\n },\r\n [actualValue, props],\r\n )}\r\n onBlur={React.useCallback(\r\n (ev: React.FocusEvent<HTMLInputElement>) => {\r\n setValue(ev.target.value);\r\n },\r\n [setValue],\r\n )}\r\n onChange={React.useCallback(\r\n (ev: React.ChangeEvent<HTMLInputElement>) => {\r\n setShowValue(ev.target.value);\r\n },\r\n [],\r\n )}\r\n type=\"text\"\r\n ref={ref}\r\n value={showValue}\r\n />\r\n );\r\n },\r\n);\r\n\r\nNumberInput.displayName = 'NumberInput';\r\n"],"names":["React"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RequiredMark.js","sources":["../../../src/components/forms/RequiredMark.tsx"],"sourcesContent":["import { getLabel } from '@apia/util';\n\nexport interface IRequiredMark {\n isFormReadonly?: boolean;\n isRequired?: boolean;\n isReadonly?: boolean;\n}\n\n/**\n * Muestra el * en los campos de requerido.\n */\nexport const RequiredMark = ({\n isFormReadonly = false,\n isRequired = false,\n isReadonly = false,\n}: IRequiredMark) => {\n return isRequired && !isReadonly && !isFormReadonly ? (\n <abbr className=\"requiredMark\" title={getLabel('msgReqField').text}>\n *\n </abbr>\n ) : null;\n};\n"],"names":[],"mappings":";;;AAWO,MAAM,eAAe,CAAC;AAAA,EAC3B,cAAiB,GAAA,KAAA;AAAA,EACjB,UAAa,GAAA,KAAA;AAAA,EACb,UAAa,GAAA,KAAA;AACf,CAAqB,KAAA;AACnB,EAAA,OAAO,UAAc,IAAA,CAAC,UAAc,IAAA,CAAC,iCAClC,GAAA,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,cAAA,EAAe,OAAO,QAAS,CAAA,aAAa,CAAE,CAAA,IAAA,EAAM,eAEpE,CACE,GAAA,IAAA,CAAA;AACN;;;;"}
|
|
1
|
+
{"version":3,"file":"RequiredMark.js","sources":["../../../src/components/forms/RequiredMark.tsx"],"sourcesContent":["import { getLabel } from '@apia/util';\r\n\r\nexport interface IRequiredMark {\r\n isFormReadonly?: boolean;\r\n isRequired?: boolean;\r\n isReadonly?: boolean;\r\n}\r\n\r\n/**\r\n * Muestra el * en los campos de requerido.\r\n */\r\nexport const RequiredMark = ({\r\n isFormReadonly = false,\r\n isRequired = false,\r\n isReadonly = false,\r\n}: IRequiredMark) => {\r\n return isRequired && !isReadonly && !isFormReadonly ? (\r\n <abbr className=\"requiredMark\" title={getLabel('msgReqField').text}>\r\n *\r\n </abbr>\r\n ) : null;\r\n};\r\n"],"names":[],"mappings":";;;AAWO,MAAM,eAAe,CAAC;AAAA,EAC3B,cAAiB,GAAA,KAAA;AAAA,EACjB,UAAa,GAAA,KAAA;AAAA,EACb,UAAa,GAAA,KAAA;AACf,CAAqB,KAAA;AACnB,EAAA,OAAO,UAAc,IAAA,CAAC,UAAc,IAAA,CAAC,iCAClC,GAAA,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,cAAA,EAAe,OAAO,QAAS,CAAA,aAAa,CAAE,CAAA,IAAA,EAAM,eAEpE,CACE,GAAA,IAAA,CAAA;AACN;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseButton.js","sources":["../../../../src/components/forms/buttons/BaseButton.tsx"],"sourcesContent":["import { Button, Spinner, Flex, ThemeUIStyleObject } from '@apia/theme';\nimport { TApiaButtonType } from '../../types';\nimport { getVariant, spacing } from '@apia/theme';\n\ninterface IBaseButton {\n text?: string;\n children?: string;\n loadingChildren?: string;\n id?: string;\n name?: string;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n isLoading?: boolean;\n disabled?: boolean;\n variant?: TApiaButtonType | string;\n type?: 'button' | 'submit' | 'reset';\n SXProps?: ThemeUIStyleObject;\n}\n\n/**\n * The world's most **basic** button\n */\nexport const BaseButton = ({\n id,\n name,\n onClick = () => {},\n isLoading = false,\n loadingChildren,\n disabled = false,\n children = '',\n text = '',\n variant = 'primary',\n type = 'button',\n SXProps,\n ...buttonProps\n}: IBaseButton) => {\n return (\n <Button\n id={id}\n name={name}\n onClick={onClick}\n {...getVariant(variant)}\n type={type}\n title={children}\n disabled={isLoading || disabled}\n {...buttonProps}\n >\n <Flex\n as=\"span\"\n sx={{\n color: 'inherit',\n width: '100%',\n flexDirection: 'row',\n alignContent: 'center',\n justifyContent: 'center',\n alignItems: 'center',\n gap: spacing(3),\n ...SXProps,\n }}\n >\n {isLoading && (\n <>\n <Spinner size={20} color=\"inherit\" />\n {loadingChildren}\n </>\n )}\n {!isLoading && (children || text)}\n </Flex>\n </Button>\n );\n};\n"],"names":[],"mappings":";;;AAqBO,MAAM,aAAa,CAAC;AAAA,EACzB,EAAA;AAAA,EACA,IAAA;AAAA,EACA,UAAU,MAAM;AAAA,GAAC;AAAA,EACjB,SAAY,GAAA,KAAA;AAAA,EACZ,eAAA;AAAA,EACA,QAAW,GAAA,KAAA;AAAA,EACX,QAAW,GAAA,EAAA;AAAA,EACX,IAAO,GAAA,EAAA;AAAA,EACP,OAAU,GAAA,SAAA;AAAA,EACV,IAAO,GAAA,QAAA;AAAA,EACP,OAAA;AAAA,EACA,GAAG,WAAA;AACL,CAAmB,KAAA;AACjB,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACC,GAAG,WAAW,OAAO,CAAA;AAAA,MACtB,IAAA;AAAA,MACA,KAAO,EAAA,QAAA;AAAA,MACP,UAAU,SAAa,IAAA,QAAA;AAAA,MACtB,GAAG,WAAA;AAAA,MAEJ,QAAA,kBAAA,IAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,EAAG,EAAA,MAAA;AAAA,UACH,EAAI,EAAA;AAAA,YACF,KAAO,EAAA,SAAA;AAAA,YACP,KAAO,EAAA,MAAA;AAAA,YACP,aAAe,EAAA,KAAA;AAAA,YACf,YAAc,EAAA,QAAA;AAAA,YACd,cAAgB,EAAA,QAAA;AAAA,YAChB,UAAY,EAAA,QAAA;AAAA,YACZ,GAAA,EAAK,QAAQ,CAAC,CAAA;AAAA,YACd,GAAG,OAAA;AAAA,WACL;AAAA,UAEC,QAAA,EAAA;AAAA,YAAA,SAAA,oBAEG,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,OAAQ,EAAA,EAAA,IAAA,EAAM,EAAI,EAAA,KAAA,EAAM,SAAU,EAAA,CAAA;AAAA,cAClC,eAAA;AAAA,aACH,EAAA,CAAA;AAAA,YAED,CAAC,cAAc,QAAY,IAAA,IAAA,CAAA;AAAA,WAAA;AAAA,SAAA;AAAA,OAC9B;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}
|
|
1
|
+
{"version":3,"file":"BaseButton.js","sources":["../../../../src/components/forms/buttons/BaseButton.tsx"],"sourcesContent":["import { Button, Spinner, Flex, ThemeUIStyleObject } from '@apia/theme';\r\nimport { TApiaButtonType } from '../../types';\r\nimport { getVariant, spacing } from '@apia/theme';\r\n\r\ninterface IBaseButton {\r\n text?: string;\r\n children?: string;\r\n loadingChildren?: string;\r\n id?: string;\r\n name?: string;\r\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\r\n isLoading?: boolean;\r\n disabled?: boolean;\r\n variant?: TApiaButtonType | string;\r\n type?: 'button' | 'submit' | 'reset';\r\n SXProps?: ThemeUIStyleObject;\r\n}\r\n\r\n/**\r\n * The world's most **basic** button\r\n */\r\nexport const BaseButton = ({\r\n id,\r\n name,\r\n onClick = () => {},\r\n isLoading = false,\r\n loadingChildren,\r\n disabled = false,\r\n children = '',\r\n text = '',\r\n variant = 'primary',\r\n type = 'button',\r\n SXProps,\r\n ...buttonProps\r\n}: IBaseButton) => {\r\n return (\r\n <Button\r\n id={id}\r\n name={name}\r\n onClick={onClick}\r\n {...getVariant(variant)}\r\n type={type}\r\n title={children}\r\n disabled={isLoading || disabled}\r\n {...buttonProps}\r\n >\r\n <Flex\r\n as=\"span\"\r\n sx={{\r\n color: 'inherit',\r\n width: '100%',\r\n flexDirection: 'row',\r\n alignContent: 'center',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n gap: spacing(3),\r\n ...SXProps,\r\n }}\r\n >\r\n {isLoading && (\r\n <>\r\n <Spinner size={20} color=\"inherit\" />\r\n {loadingChildren}\r\n </>\r\n )}\r\n {!isLoading && (children || text)}\r\n </Flex>\r\n </Button>\r\n );\r\n};\r\n"],"names":[],"mappings":";;;AAqBO,MAAM,aAAa,CAAC;AAAA,EACzB,EAAA;AAAA,EACA,IAAA;AAAA,EACA,UAAU,MAAM;AAAA,GAAC;AAAA,EACjB,SAAY,GAAA,KAAA;AAAA,EACZ,eAAA;AAAA,EACA,QAAW,GAAA,KAAA;AAAA,EACX,QAAW,GAAA,EAAA;AAAA,EACX,IAAO,GAAA,EAAA;AAAA,EACP,OAAU,GAAA,SAAA;AAAA,EACV,IAAO,GAAA,QAAA;AAAA,EACP,OAAA;AAAA,EACA,GAAG,WAAA;AACL,CAAmB,KAAA;AACjB,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACC,GAAG,WAAW,OAAO,CAAA;AAAA,MACtB,IAAA;AAAA,MACA,KAAO,EAAA,QAAA;AAAA,MACP,UAAU,SAAa,IAAA,QAAA;AAAA,MACtB,GAAG,WAAA;AAAA,MAEJ,QAAA,kBAAA,IAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,EAAG,EAAA,MAAA;AAAA,UACH,EAAI,EAAA;AAAA,YACF,KAAO,EAAA,SAAA;AAAA,YACP,KAAO,EAAA,MAAA;AAAA,YACP,aAAe,EAAA,KAAA;AAAA,YACf,YAAc,EAAA,QAAA;AAAA,YACd,cAAgB,EAAA,QAAA;AAAA,YAChB,UAAY,EAAA,QAAA;AAAA,YACZ,GAAA,EAAK,QAAQ,CAAC,CAAA;AAAA,YACd,GAAG,OAAA;AAAA,WACL;AAAA,UAEC,QAAA,EAAA;AAAA,YAAA,SAAA,oBAEG,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,OAAQ,EAAA,EAAA,IAAA,EAAM,EAAI,EAAA,KAAA,EAAM,SAAU,EAAA,CAAA;AAAA,cAClC,eAAA;AAAA,aACH,EAAA,CAAA;AAAA,YAED,CAAC,cAAc,QAAY,IAAA,IAAA,CAAA;AAAA,WAAA;AAAA,SAAA;AAAA,OAC9B;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.js","sources":["../../../../src/components/forms/buttons/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n IconButton as IconButtonThemeUI,\n Spinner,\n IconButtonProps,\n ThemeUIStyleObject,\n} from '@apia/theme';\nimport { icons, TIconName, TIconType } from '@apia/icons';\nimport { getVariant } from '@apia/theme';\n\nexport type TIconSize = number | 'Xs' | 'Sm' | 'Md' | 'Lg' | 'Xl';\n\nexport type TApiaIconButton =\n | 'icon'\n | 'icon-primary'\n | 'icon-outline'\n | 'icon-only';\n\nexport type TIconButton = Omit<IconButtonProps, 'sx'> &\n React.AriaAttributes & {\n className?: string;\n /**\n * Es posible pasar explícitamente un ícono o el nombre del ícono de\n * acuerdo a la librería de la aplicación. Ver Icon.tsx\n */\n icon: TIconType | TIconName;\n iconSize?: TIconSize;\n id?: string;\n disabled?: boolean;\n href?: string;\n isLoading?: boolean;\n isToggled?: boolean;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n onMouseOut?: React.MouseEventHandler<HTMLButtonElement>;\n onMouseOver?: React.MouseEventHandler<HTMLButtonElement>;\n size?: TIconSize;\n title?: string;\n variant?: string;\n };\n\n/**\n * Renderiza un botón con un ícono adentro.\n *\n * La variante por defecto de este componente es buttons.icon\n *\n * Si se pasa solamente size, el iconSize será\n */\nexport const IconButton = React.forwardRef(\n (\n {\n className,\n disabled = false,\n icon,\n iconSize: outerIconSize,\n id,\n isLoading = false,\n isToggled = false,\n href,\n onClick = () => {},\n onMouseOver = () => {},\n onMouseOut = () => {},\n size = 'Sm',\n title,\n type = 'button',\n variant = 'icon',\n ...rest\n }: TIconButton,\n ref: React.Ref<HTMLButtonElement>,\n ) => {\n const sizes = ['Xs', 'Sm', 'Md', 'Lg', 'Xl'];\n const iconSize =\n outerIconSize ?? sizes[Math.max(0, sizes.indexOf(size as string) - 1)];\n\n const sx: ThemeUIStyleObject = React.useMemo(() => {\n return {\n width: `icon${size}`,\n minWidth: `icon${size}`,\n height: `icon${size}`,\n minHeight: `icon${size}`,\n svg: {\n width: `icon${iconSize}`,\n minWidth: `icon${iconSize}`,\n height: `icon${iconSize}`,\n minHeight: `icon${iconSize}`,\n },\n };\n }, [iconSize, size]);\n\n const ActualIcon = React.useMemo(() => {\n return typeof icon === 'string' ? icons[icon] : icon;\n }, [icon]);\n\n return (\n <IconButtonThemeUI\n id={id}\n ref={ref}\n onClick={React.useCallback(\n (ev: React.MouseEvent<HTMLButtonElement>) => {\n if (href) window.open(href, '_blank');\n onClick?.(ev);\n },\n [href, onClick],\n )}\n onMouseOver={onMouseOver}\n onMouseOut={onMouseOut}\n {...getVariant(variant)}\n sx={sx}\n disabled={isLoading || disabled}\n className={`${className ?? ''} iconButton ${\n isToggled ? 'isToggled' : ''\n }`}\n title={title}\n aria-label={\n rest['aria-label'] ?? (rest.as !== undefined ? undefined : title)\n }\n type={rest.as !== undefined ? undefined : type}\n role={href ? 'link' : undefined}\n {...rest}\n >\n {isLoading ? <Spinner color=\"inherit\" /> : <ActualIcon />}\n </IconButtonThemeUI>\n );\n },\n);\n\nIconButton.displayName = 'IconButton';\n"],"names":["IconButtonThemeUI"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"IconButton.js","sources":["../../../../src/components/forms/buttons/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport {\r\n IconButton as IconButtonThemeUI,\r\n Spinner,\r\n IconButtonProps,\r\n ThemeUIStyleObject,\r\n} from '@apia/theme';\r\nimport { icons, TIconName, TIconType } from '@apia/icons';\r\nimport { getVariant } from '@apia/theme';\r\n\r\nexport type TIconSize = number | 'Xs' | 'Sm' | 'Md' | 'Lg' | 'Xl';\r\n\r\nexport type TApiaIconButton =\r\n | 'icon'\r\n | 'icon-primary'\r\n | 'icon-outline'\r\n | 'icon-only';\r\n\r\nexport type TIconButton = Omit<IconButtonProps, 'sx'> &\r\n React.AriaAttributes & {\r\n className?: string;\r\n /**\r\n * Es posible pasar explícitamente un ícono o el nombre del ícono de\r\n * acuerdo a la librería de la aplicación. Ver Icon.tsx\r\n */\r\n icon: TIconType | TIconName;\r\n iconSize?: TIconSize;\r\n id?: string;\r\n disabled?: boolean;\r\n href?: string;\r\n isLoading?: boolean;\r\n isToggled?: boolean;\r\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\r\n onMouseOut?: React.MouseEventHandler<HTMLButtonElement>;\r\n onMouseOver?: React.MouseEventHandler<HTMLButtonElement>;\r\n size?: TIconSize;\r\n title?: string;\r\n variant?: string;\r\n };\r\n\r\n/**\r\n * Renderiza un botón con un ícono adentro.\r\n *\r\n * La variante por defecto de este componente es buttons.icon\r\n *\r\n * Si se pasa solamente size, el iconSize será\r\n */\r\nexport const IconButton = React.forwardRef(\r\n (\r\n {\r\n className,\r\n disabled = false,\r\n icon,\r\n iconSize: outerIconSize,\r\n id,\r\n isLoading = false,\r\n isToggled = false,\r\n href,\r\n onClick = () => {},\r\n onMouseOver = () => {},\r\n onMouseOut = () => {},\r\n size = 'Sm',\r\n title,\r\n type = 'button',\r\n variant = 'icon',\r\n ...rest\r\n }: TIconButton,\r\n ref: React.Ref<HTMLButtonElement>,\r\n ) => {\r\n const sizes = ['Xs', 'Sm', 'Md', 'Lg', 'Xl'];\r\n const iconSize =\r\n outerIconSize ?? sizes[Math.max(0, sizes.indexOf(size as string) - 1)];\r\n\r\n const sx: ThemeUIStyleObject = React.useMemo(() => {\r\n return {\r\n width: `icon${size}`,\r\n minWidth: `icon${size}`,\r\n height: `icon${size}`,\r\n minHeight: `icon${size}`,\r\n svg: {\r\n width: `icon${iconSize}`,\r\n minWidth: `icon${iconSize}`,\r\n height: `icon${iconSize}`,\r\n minHeight: `icon${iconSize}`,\r\n },\r\n };\r\n }, [iconSize, size]);\r\n\r\n const ActualIcon = React.useMemo(() => {\r\n return typeof icon === 'string' ? icons[icon] : icon;\r\n }, [icon]);\r\n\r\n return (\r\n <IconButtonThemeUI\r\n id={id}\r\n ref={ref}\r\n onClick={React.useCallback(\r\n (ev: React.MouseEvent<HTMLButtonElement>) => {\r\n if (href) window.open(href, '_blank');\r\n onClick?.(ev);\r\n },\r\n [href, onClick],\r\n )}\r\n onMouseOver={onMouseOver}\r\n onMouseOut={onMouseOut}\r\n {...getVariant(variant)}\r\n sx={sx}\r\n disabled={isLoading || disabled}\r\n className={`${className ?? ''} iconButton ${\r\n isToggled ? 'isToggled' : ''\r\n }`}\r\n title={title}\r\n aria-label={\r\n rest['aria-label'] ?? (rest.as !== undefined ? undefined : title)\r\n }\r\n type={rest.as !== undefined ? undefined : type}\r\n role={href ? 'link' : undefined}\r\n {...rest}\r\n >\r\n {isLoading ? <Spinner color=\"inherit\" /> : <ActualIcon />}\r\n </IconButtonThemeUI>\r\n );\r\n },\r\n);\r\n\r\nIconButton.displayName = 'IconButton';\r\n"],"names":["IconButtonThemeUI"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SimpleButton.js","sources":["../../../../src/components/forms/buttons/SimpleButton.tsx"],"sourcesContent":["import { TIconType } from '@apia/icons';\nimport {\n getVariant,\n spacing,\n Box,\n Button,\n ButtonProps,\n Spinner,\n ThemeUICSSObject,\n ThemeUIStyleObject,\n} from '@apia/theme';\nimport * as React from 'react';\n\nexport interface ISimpleButton extends ButtonProps {\n buttonSx?: ThemeUICSSObject;\n icon?: TIconType;\n iconColor?: string;\n iconPosition?: 'left' | 'right';\n iconSize?: number;\n isLoading?: boolean;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n size?: 'sm' | 'md' | 'lg';\n variant?: string;\n spinnerSize?: number;\n type?: 'button' | 'submit' | 'reset';\n}\n\nconst simpleButton: ThemeUICSSObject = {\n display: 'inline-flex',\n gap: spacing(3),\n position: 'relative',\n alignItems: 'center',\n justifyContent: 'center',\n\n svg: {\n flexShrink: 0,\n path: {\n fill: 'currentColor',\n },\n },\n\n '.toggled': {\n backgroundColor: 'primary',\n },\n\n '.button__content': {\n overflowWrap: 'break-word',\n },\n\n /* PREPEND HERE */\n};\n\nexport const SimpleButton = React.forwardRef(\n (\n {\n buttonSx,\n children = null,\n className,\n disabled = false,\n icon,\n iconColor,\n iconPosition = 'left',\n iconSize,\n id,\n isLoading,\n name,\n onClick,\n size,\n spinnerSize = 16,\n title,\n type = 'button',\n variant = 'primary',\n ...buttonProps\n }: ISimpleButton,\n ref: React.Ref<unknown>,\n ) => {\n const loadingSx = React.useMemo<ThemeUIStyleObject>(\n () => ({\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n }),\n [],\n );\n const spanSx = React.useMemo(\n () => ({\n color: isLoading ? 'transparent' : undefined,\n }),\n [isLoading],\n );\n const Icon = React.useMemo(() => icon, [icon]);\n\n return (\n <Button\n ref={ref as React.Ref<HTMLButtonElement>}\n id={id}\n name={name}\n title={title}\n aria-label={title}\n onClick={onClick}\n type={type}\n disabled={isLoading ?? disabled}\n className={className}\n {...getVariant(`${variant}${size !== 'md' && size ? `-${size}` : ''}`)}\n {...buttonProps}\n sx={{ ...simpleButton, ...buttonSx }}\n >\n {Icon && iconPosition === 'left' && (\n <Icon title=\"\" size={iconSize} color={iconColor} />\n )}\n <Box as=\"span\" className=\"button__content\" sx={spanSx}>\n {children ?? title}\n </Box>\n {Icon && iconPosition === 'right' && (\n <Icon title=\"\" size={iconSize} color={iconColor} />\n )}\n {isLoading && (\n <Box className=\"spinner\" sx={loadingSx}>\n <Spinner size={spinnerSize} color=\"inherit\" />\n </Box>\n )}\n </Button>\n );\n },\n);\n\nSimpleButton.displayName = 'SimpleButton';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SimpleButton.js","sources":["../../../../src/components/forms/buttons/SimpleButton.tsx"],"sourcesContent":["import { TIconType } from '@apia/icons';\r\nimport {\r\n getVariant,\r\n spacing,\r\n Box,\r\n Button,\r\n ButtonProps,\r\n Spinner,\r\n ThemeUICSSObject,\r\n ThemeUIStyleObject,\r\n} from '@apia/theme';\r\nimport * as React from 'react';\r\n\r\nexport interface ISimpleButton extends ButtonProps {\r\n buttonSx?: ThemeUICSSObject;\r\n icon?: TIconType;\r\n iconColor?: string;\r\n iconPosition?: 'left' | 'right';\r\n iconSize?: number;\r\n isLoading?: boolean;\r\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\r\n size?: 'sm' | 'md' | 'lg';\r\n variant?: string;\r\n spinnerSize?: number;\r\n type?: 'button' | 'submit' | 'reset';\r\n}\r\n\r\nconst simpleButton: ThemeUICSSObject = {\r\n display: 'inline-flex',\r\n gap: spacing(3),\r\n position: 'relative',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n\r\n svg: {\r\n flexShrink: 0,\r\n path: {\r\n fill: 'currentColor',\r\n },\r\n },\r\n\r\n '.toggled': {\r\n backgroundColor: 'primary',\r\n },\r\n\r\n '.button__content': {\r\n overflowWrap: 'break-word',\r\n },\r\n\r\n /* PREPEND HERE */\r\n};\r\n\r\nexport const SimpleButton = React.forwardRef(\r\n (\r\n {\r\n buttonSx,\r\n children = null,\r\n className,\r\n disabled = false,\r\n icon,\r\n iconColor,\r\n iconPosition = 'left',\r\n iconSize,\r\n id,\r\n isLoading,\r\n name,\r\n onClick,\r\n size,\r\n spinnerSize = 16,\r\n title,\r\n type = 'button',\r\n variant = 'primary',\r\n ...buttonProps\r\n }: ISimpleButton,\r\n ref: React.Ref<unknown>,\r\n ) => {\r\n const loadingSx = React.useMemo<ThemeUIStyleObject>(\r\n () => ({\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n bottom: 0,\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n }),\r\n [],\r\n );\r\n const spanSx = React.useMemo(\r\n () => ({\r\n color: isLoading ? 'transparent' : undefined,\r\n }),\r\n [isLoading],\r\n );\r\n const Icon = React.useMemo(() => icon, [icon]);\r\n\r\n return (\r\n <Button\r\n ref={ref as React.Ref<HTMLButtonElement>}\r\n id={id}\r\n name={name}\r\n title={title}\r\n aria-label={title}\r\n onClick={onClick}\r\n type={type}\r\n disabled={isLoading ?? disabled}\r\n className={className}\r\n {...getVariant(`${variant}${size !== 'md' && size ? `-${size}` : ''}`)}\r\n {...buttonProps}\r\n sx={{ ...simpleButton, ...buttonSx }}\r\n >\r\n {Icon && iconPosition === 'left' && (\r\n <Icon title=\"\" size={iconSize} color={iconColor} />\r\n )}\r\n <Box as=\"span\" className=\"button__content\" sx={spanSx}>\r\n {children ?? title}\r\n </Box>\r\n {Icon && iconPosition === 'right' && (\r\n <Icon title=\"\" size={iconSize} color={iconColor} />\r\n )}\r\n {isLoading && (\r\n <Box className=\"spinner\" sx={loadingSx}>\r\n <Spinner size={spinnerSize} color=\"inherit\" />\r\n </Box>\r\n )}\r\n </Button>\r\n );\r\n },\r\n);\r\n\r\nSimpleButton.displayName = 'SimpleButton';\r\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/forms/util/style.ts"],"sourcesContent":["import { ThemeUICSSObject } from '@apia/theme';\n\nexport const getFieldErrorStyles = (isValid: boolean): ThemeUICSSObject => {\n return {\n borderLeftStyle: !isValid ? 'solid' : null,\n borderLeftWidth: !isValid ? '4px' : null,\n borderLeftColor: !isValid ? 'danger' : undefined,\n };\n};\n\nexport const getFieldTouchedStyles = (isTouched: boolean): ThemeUICSSObject => {\n return {\n borderStyle: isTouched ? 'solid' : null,\n borderWidth: isTouched ? '1px' : null,\n borderColor: isTouched ? 'orange' : undefined,\n };\n};\n"],"names":[],"mappings":"AAEa,MAAA,mBAAA,GAAsB,CAAC,OAAuC,KAAA;AACzE,EAAO,OAAA;AAAA,IACL,eAAA,EAAiB,CAAC,OAAA,GAAU,OAAU,GAAA,IAAA;AAAA,IACtC,eAAA,EAAiB,CAAC,OAAA,GAAU,KAAQ,GAAA,IAAA;AAAA,IACpC,eAAA,EAAiB,CAAC,OAAA,GAAU,QAAW,GAAA,KAAA,CAAA;AAAA,GACzC,CAAA;AACF,EAAA;AAEa,MAAA,qBAAA,GAAwB,CAAC,SAAyC,KAAA;AAC7E,EAAO,OAAA;AAAA,IACL,WAAA,EAAa,YAAY,OAAU,GAAA,IAAA;AAAA,IACnC,WAAA,EAAa,YAAY,KAAQ,GAAA,IAAA;AAAA,IACjC,WAAA,EAAa,YAAY,QAAW,GAAA,KAAA,CAAA;AAAA,GACtC,CAAA;AACF;;;;"}
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/forms/util/style.ts"],"sourcesContent":["import { ThemeUICSSObject } from '@apia/theme';\r\n\r\nexport const getFieldErrorStyles = (isValid: boolean): ThemeUICSSObject => {\r\n return {\r\n borderLeftStyle: !isValid ? 'solid' : null,\r\n borderLeftWidth: !isValid ? '4px' : null,\r\n borderLeftColor: !isValid ? 'danger' : undefined,\r\n };\r\n};\r\n\r\nexport const getFieldTouchedStyles = (isTouched: boolean): ThemeUICSSObject => {\r\n return {\r\n borderStyle: isTouched ? 'solid' : null,\r\n borderWidth: isTouched ? '1px' : null,\r\n borderColor: isTouched ? 'orange' : undefined,\r\n };\r\n};\r\n"],"names":[],"mappings":"AAEa,MAAA,mBAAA,GAAsB,CAAC,OAAuC,KAAA;AACzE,EAAO,OAAA;AAAA,IACL,eAAA,EAAiB,CAAC,OAAA,GAAU,OAAU,GAAA,IAAA;AAAA,IACtC,eAAA,EAAiB,CAAC,OAAA,GAAU,KAAQ,GAAA,IAAA;AAAA,IACpC,eAAA,EAAiB,CAAC,OAAA,GAAU,QAAW,GAAA,KAAA,CAAA;AAAA,GACzC,CAAA;AACF,EAAA;AAEa,MAAA,qBAAA,GAAwB,CAAC,SAAyC,KAAA;AAC7E,EAAO,OAAA;AAAA,IACL,WAAA,EAAa,YAAY,OAAU,GAAA,IAAA;AAAA,IACnC,WAAA,EAAa,YAAY,KAAQ,GAAA,IAAA;AAAA,IACjC,WAAA,EAAa,YAAY,QAAW,GAAA,KAAA,CAAA;AAAA,GACtC,CAAA;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"importComponent.js","sources":["../../src/components/importComponent.tsx"],"sourcesContent":["import { type ComponentType, lazy } from 'react';\n\n/**\n * Permite importar un componente en forma dinámica con ruta relativa a\n * /customComponents\n */\nexport function importComponent<T = unknown>(path: string) {\n return lazy<ComponentType<T>>(() => {\n return new Promise<{\n default: ComponentType<T>;\n }>((resolve) => {\n import(/* webpackInclude: /\\.tsx?$/ */ `/customComponents/${path}`)\n .then((result: { default: ComponentType<T> }) => {\n resolve(result);\n })\n .catch((error: unknown) => {\n resolve({\n default: () => {\n console.error(error);\n return <>Error</>;\n },\n });\n });\n });\n });\n}\n"],"names":[],"mappings":";;;AAMO,SAAS,gBAA6B,IAAc,EAAA;AACzD,EAAA,OAAO,KAAuB,MAAM;AAClC,IAAO,OAAA,IAAI,OAER,CAAA,CAAC,OAAY,KAAA;AACd,MAAA;AAAA;AAAA,QAAuC,qBAAqB,IAAI,CAAA,CAAA;AAAA,OAC7D,CAAA,IAAA,CAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"importComponent.js","sources":["../../src/components/importComponent.tsx"],"sourcesContent":["import { type ComponentType, lazy } from 'react';\r\n\r\n/**\r\n * Permite importar un componente en forma dinámica con ruta relativa a\r\n * /customComponents\r\n */\r\nexport function importComponent<T = unknown>(path: string) {\r\n return lazy<ComponentType<T>>(() => {\r\n return new Promise<{\r\n default: ComponentType<T>;\r\n }>((resolve) => {\r\n import(/* webpackInclude: /\\.tsx?$/ */ `/customComponents/${path}`)\r\n .then((result: { default: { default: ComponentType<T> } }) => {\r\n resolve(result.default);\r\n })\r\n .catch((error: unknown) => {\r\n resolve({\r\n default: () => {\r\n console.error(error);\r\n return <>Error</>;\r\n },\r\n });\r\n });\r\n });\r\n });\r\n}\r\n"],"names":[],"mappings":";;;AAMO,SAAS,gBAA6B,IAAc,EAAA;AACzD,EAAA,OAAO,KAAuB,MAAM;AAClC,IAAO,OAAA,IAAI,OAER,CAAA,CAAC,OAAY,KAAA;AACd,MAAA;AAAA;AAAA,QAAuC,qBAAqB,IAAI,CAAA,CAAA;AAAA,OAC7D,CAAA,IAAA,CAAK,CAAC,MAAuD,KAAA;AAC5D,QAAA,OAAA,CAAQ,OAAO,OAAO,CAAA,CAAA;AAAA,OACvB,CAAA,CACA,KAAM,CAAA,CAAC,KAAmB,KAAA;AACzB,QAAQ,OAAA,CAAA;AAAA,UACN,SAAS,MAAM;AACb,YAAA,OAAA,CAAQ,MAAM,KAAK,CAAA,CAAA;AACnB,YAAA,uCAAS,QAAK,EAAA,OAAA,EAAA,CAAA,CAAA;AAAA,WAChB;AAAA,SACD,CAAA,CAAA;AAAA,OACF,CAAA,CAAA;AAAA,KACJ,CAAA,CAAA;AAAA,GACF,CAAA,CAAA;AACH;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinearLoader.js","sources":["../../../src/components/loaders/LinearLoader.tsx"],"sourcesContent":["import { BarLoader } from 'react-spinners';\nimport { Box, useThemeUI } from '@apia/theme';\n\nconst LinearLoader = () => {\n const theme = useThemeUI();\n return (\n <Box\n sx={{\n '*': { height: '6.5px !important' },\n }}\n >\n <Box\n sx={{\n zIndex: 'tooltip',\n position: 'fixed',\n top: 0,\n left: 0,\n right: 0,\n }}\n className=\"linearLoader\"\n >\n <BarLoader width=\"100%\" color={theme.theme.palette.primary.main} />\n </Box>\n </Box>\n );\n};\n\nexport default LinearLoader;\n"],"names":[],"mappings":";;;;AAGA,MAAM,eAAe,MAAM;AACzB,EAAA,MAAM,QAAQ,UAAW,EAAA,CAAA;AACzB,EACE,uBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,GAAA,EAAK,EAAE,MAAA,EAAQ,kBAAmB,EAAA;AAAA,OACpC;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA;AAAA,YACF,MAAQ,EAAA,SAAA;AAAA,YACR,QAAU,EAAA,OAAA;AAAA,YACV,GAAK,EAAA,CAAA;AAAA,YACL,IAAM,EAAA,CAAA;AAAA,YACN,KAAO,EAAA,CAAA;AAAA,WACT;AAAA,UACA,SAAU,EAAA,cAAA;AAAA,UAEV,QAAA,kBAAA,GAAA,CAAC,aAAU,KAAM,EAAA,MAAA,EAAO,OAAO,KAAM,CAAA,KAAA,CAAM,OAAQ,CAAA,OAAA,CAAQ,IAAM,EAAA,CAAA;AAAA,SAAA;AAAA,OACnE;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAA,CAAA;AAEA,qBAAe,YAAA;;;;"}
|
|
1
|
+
{"version":3,"file":"LinearLoader.js","sources":["../../../src/components/loaders/LinearLoader.tsx"],"sourcesContent":["import { BarLoader } from 'react-spinners';\r\nimport { Box, useThemeUI } from '@apia/theme';\r\n\r\nconst LinearLoader = () => {\r\n const theme = useThemeUI();\r\n return (\r\n <Box\r\n sx={{\r\n '*': { height: '6.5px !important' },\r\n }}\r\n >\r\n <Box\r\n sx={{\r\n zIndex: 'tooltip',\r\n position: 'fixed',\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n }}\r\n className=\"linearLoader\"\r\n >\r\n <BarLoader width=\"100%\" color={theme.theme.palette.primary.main} />\r\n </Box>\r\n </Box>\r\n );\r\n};\r\n\r\nexport default LinearLoader;\r\n"],"names":[],"mappings":";;;;AAGA,MAAM,eAAe,MAAM;AACzB,EAAA,MAAM,QAAQ,UAAW,EAAA,CAAA;AACzB,EACE,uBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,GAAA,EAAK,EAAE,MAAA,EAAQ,kBAAmB,EAAA;AAAA,OACpC;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA;AAAA,YACF,MAAQ,EAAA,SAAA;AAAA,YACR,QAAU,EAAA,OAAA;AAAA,YACV,GAAK,EAAA,CAAA;AAAA,YACL,IAAM,EAAA,CAAA;AAAA,YACN,KAAO,EAAA,CAAA;AAAA,WACT;AAAA,UACA,SAAU,EAAA,cAAA;AAAA,UAEV,QAAA,kBAAA,GAAA,CAAC,aAAU,KAAM,EAAA,MAAA,EAAO,OAAO,KAAM,CAAA,KAAA,CAAM,OAAQ,CAAA,OAAA,CAAQ,IAAM,EAAA,CAAA;AAAA,SAAA;AAAA,OACnE;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAA,CAAA;AAEA,qBAAe,YAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoaderSpinner.js","sources":["../../../src/components/loaders/LoaderSpinner.tsx"],"sourcesContent":["import { getVariant, makeStyledComponent } from '@apia/theme';\nimport React from 'react';\nimport { Spinner } from '@apia/theme';\nimport { ThemeUICSSObject } from '@apia/theme';\n\nexport const styles: ThemeUICSSObject = {\n height: 'iconmd',\n width: 'iconmd',\n background: 'palette.background.paper',\n};\n\nconst LoaderSpinner = makeStyledComponent(\n 'LoaderSpinner',\n 'layout.common.components.loaderSpinner',\n styles,\n ({ className }: { className?: string }) => {\n return (\n <Spinner\n {...getVariant('layout.common.components.loaderSpinner')}\n className={className}\n />\n );\n },\n);\n\nexport default LoaderSpinner;\n"],"names":[],"mappings":";;;AAKO,MAAM,MAA2B,GAAA;AAAA,EACtC,MAAQ,EAAA,QAAA;AAAA,EACR,KAAO,EAAA,QAAA;AAAA,EACP,UAAY,EAAA,0BAAA;AACd,EAAA;AAEA,MAAM,aAAgB,GAAA,mBAAA;AAAA,EACpB,eAAA;AAAA,EACA,wCAAA;AAAA,EACA,MAAA;AAAA,EACA,CAAC,EAAE,SAAA,EAAwC,KAAA;AACzC,IACE,uBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACE,GAAG,WAAW,wCAAwC,CAAA;AAAA,QACvD,SAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF,CAAA,CAAA;AAEA,sBAAe,aAAA;;;;"}
|
|
1
|
+
{"version":3,"file":"LoaderSpinner.js","sources":["../../../src/components/loaders/LoaderSpinner.tsx"],"sourcesContent":["import { getVariant, makeStyledComponent } from '@apia/theme';\r\nimport React from 'react';\r\nimport { Spinner } from '@apia/theme';\r\nimport { ThemeUICSSObject } from '@apia/theme';\r\n\r\nexport const styles: ThemeUICSSObject = {\r\n height: 'iconmd',\r\n width: 'iconmd',\r\n background: 'palette.background.paper',\r\n};\r\n\r\nconst LoaderSpinner = makeStyledComponent(\r\n 'LoaderSpinner',\r\n 'layout.common.components.loaderSpinner',\r\n styles,\r\n ({ className }: { className?: string }) => {\r\n return (\r\n <Spinner\r\n {...getVariant('layout.common.components.loaderSpinner')}\r\n className={className}\r\n />\r\n );\r\n },\r\n);\r\n\r\nexport default LoaderSpinner;\r\n"],"names":[],"mappings":";;;AAKO,MAAM,MAA2B,GAAA;AAAA,EACtC,MAAQ,EAAA,QAAA;AAAA,EACR,KAAO,EAAA,QAAA;AAAA,EACP,UAAY,EAAA,0BAAA;AACd,EAAA;AAEA,MAAM,aAAgB,GAAA,mBAAA;AAAA,EACpB,eAAA;AAAA,EACA,wCAAA;AAAA,EACA,MAAA;AAAA,EACA,CAAC,EAAE,SAAA,EAAwC,KAAA;AACzC,IACE,uBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACE,GAAG,WAAW,wCAAwC,CAAA;AAAA,QACvD,SAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF,CAAA,CAAA;AAEA,sBAAe,aAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.js","sources":["../../../src/components/loaders/ProgressBar.tsx"],"sourcesContent":["import { getVariant } from '@apia/theme';\nimport { FC } from 'react';\nimport { Progress, Label } from '@apia/theme';\n\nexport interface IProgressBar {\n id: string;\n progress?: number;\n loading?: boolean;\n}\n\nconst ProgressBar: FC<IProgressBar> = ({\n id,\n progress = 0,\n loading = false,\n}) => {\n return (\n <>\n <Label\n htmlFor={id}\n sx={{\n display: loading ? 'block' : 'none',\n m: '0px',\n }}\n >\n {`${progress}%`}\n </Label>\n <Progress\n id={id}\n max={100}\n value={progress}\n {...getVariant('styles.progress')}\n sx={{\n display: loading ? 'block' : 'none',\n }}\n >\n {`${progress}%`}\n </Progress>\n </>\n );\n};\n\nexport default ProgressBar;\n"],"names":[],"mappings":";;;AAUA,MAAM,cAAgC,CAAC;AAAA,EACrC,EAAA;AAAA,EACA,QAAW,GAAA,CAAA;AAAA,EACX,OAAU,GAAA,KAAA;AACZ,CAAM,KAAA;AACJ,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,EAAA;AAAA,QACT,EAAI,EAAA;AAAA,UACF,OAAA,EAAS,UAAU,OAAU,GAAA,MAAA;AAAA,UAC7B,CAAG,EAAA,KAAA;AAAA,SACL;AAAA,QAEC,aAAG,QAAQ,CAAA,CAAA,CAAA;AAAA,OAAA;AAAA,KACd;AAAA,oBACA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,GAAK,EAAA,GAAA;AAAA,QACL,KAAO,EAAA,QAAA;AAAA,QACN,GAAG,WAAW,iBAAiB,CAAA;AAAA,QAChC,EAAI,EAAA;AAAA,UACF,OAAA,EAAS,UAAU,OAAU,GAAA,MAAA;AAAA,SAC/B;AAAA,QAEC,aAAG,QAAQ,CAAA,CAAA,CAAA;AAAA,OAAA;AAAA,KACd;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEA,oBAAe,WAAA;;;;"}
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","sources":["../../../src/components/loaders/ProgressBar.tsx"],"sourcesContent":["import { getVariant } from '@apia/theme';\r\nimport { FC } from 'react';\r\nimport { Progress, Label } from '@apia/theme';\r\n\r\nexport interface IProgressBar {\r\n id: string;\r\n progress?: number;\r\n loading?: boolean;\r\n}\r\n\r\nconst ProgressBar: FC<IProgressBar> = ({\r\n id,\r\n progress = 0,\r\n loading = false,\r\n}) => {\r\n return (\r\n <>\r\n <Label\r\n htmlFor={id}\r\n sx={{\r\n display: loading ? 'block' : 'none',\r\n m: '0px',\r\n }}\r\n >\r\n {`${progress}%`}\r\n </Label>\r\n <Progress\r\n id={id}\r\n max={100}\r\n value={progress}\r\n {...getVariant('styles.progress')}\r\n sx={{\r\n display: loading ? 'block' : 'none',\r\n }}\r\n >\r\n {`${progress}%`}\r\n </Progress>\r\n </>\r\n );\r\n};\r\n\r\nexport default ProgressBar;\r\n"],"names":[],"mappings":";;;AAUA,MAAM,cAAgC,CAAC;AAAA,EACrC,EAAA;AAAA,EACA,QAAW,GAAA,CAAA;AAAA,EACX,OAAU,GAAA,KAAA;AACZ,CAAM,KAAA;AACJ,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,EAAA;AAAA,QACT,EAAI,EAAA;AAAA,UACF,OAAA,EAAS,UAAU,OAAU,GAAA,MAAA;AAAA,UAC7B,CAAG,EAAA,KAAA;AAAA,SACL;AAAA,QAEC,aAAG,QAAQ,CAAA,CAAA,CAAA;AAAA,OAAA;AAAA,KACd;AAAA,oBACA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,GAAK,EAAA,GAAA;AAAA,QACL,KAAO,EAAA,QAAA;AAAA,QACN,GAAG,WAAW,iBAAiB,CAAA;AAAA,QAChC,EAAI,EAAA;AAAA,UACF,OAAA,EAAS,UAAU,OAAU,GAAA,MAAA;AAAA,SAC/B;AAAA,QAEC,aAAG,QAAQ,CAAA,CAAA,CAAA;AAAA,OAAA;AAAA,KACd;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEA,oBAAe,WAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarModal.js","sources":["../../../src/components/modals/CalendarModal.tsx"],"sourcesContent":["import React, { ComponentType, FC, Suspense, lazy } from 'react';\nimport { Modal, TModal } from './Modal';\n\nexport interface ICalendarModal extends TModal {\n handleClickDay: (date: Date) => void;\n onCancel: () => void;\n calValue?: Date;\n locale: string;\n}\n\nexport const CalendarModal = React.forwardRef<HTMLDivElement, ICalendarModal>(\n ({ handleClickDay, onCancel, calValue, locale, size, ...props }, ref) => {\n const Calendar = lazy(\n () =>\n import('react-calendar') as unknown as Promise<{\n default: ComponentType<any>;\n }>,\n );\n return (\n <Modal\n noHeader\n size={size ?? 'cal'}\n shouldCloseOnEsc\n shouldCloseOnOverlayClick\n ref={ref}\n {...props}\n initialFocusGetter={(modalRef) => {\n return modalRef?.querySelector(\n '.react-calendar__tile--active',\n ) as HTMLElement;\n }}\n >\n <Suspense fallback={null}>\n <Calendar\n onClickDay={handleClickDay}\n locale={locale}\n value={calValue ?? new Date()}\n nextLabel=\"›\"\n next2Label=\"»\"\n prevLabel=\"‹\"\n prev2Label=\"«\"\n />\n </Suspense>\n </Modal>\n );\n },\n);\n\nCalendarModal.displayName = 'CalendarModal';\n"],"names":["React"],"mappings":";;;;AAUO,MAAM,gBAAgBA,cAAM,CAAA,UAAA;AAAA,EACjC,CAAC,EAAE,cAAA,EAAgB,QAAU,EAAA,QAAA,EAAU,QAAQ,IAAM,EAAA,GAAG,KAAM,EAAA,EAAG,GAAQ,KAAA;AACvE,IAAA,MAAM,QAAW,GAAA,IAAA;AAAA,MACf,MACE,OAAO,gBAAgB,CAAA;AAAA,KAG3B,CAAA;AACA,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,QAAQ,EAAA,IAAA;AAAA,QACR,MAAM,IAAQ,IAAA,KAAA;AAAA,QACd,gBAAgB,EAAA,IAAA;AAAA,QAChB,yBAAyB,EAAA,IAAA;AAAA,QACzB,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QACJ,kBAAA,EAAoB,CAAC,QAAa,KAAA;AAChC,UAAA,OAAO,QAAU,EAAA,aAAA;AAAA,YACf,+BAAA;AAAA,WACF,CAAA;AAAA,SACF;AAAA,QAEA,QAAA,kBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,QAAA,EAAU,IAClB,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,UAAY,EAAA,cAAA;AAAA,YACZ,MAAA;AAAA,YACA,KAAA,EAAO,QAAY,oBAAA,IAAI,IAAK,EAAA;AAAA,YAC5B,SAAU,EAAA,QAAA;AAAA,YACV,UAAW,EAAA,MAAA;AAAA,YACX,SAAU,EAAA,QAAA;AAAA,YACV,UAAW,EAAA,MAAA;AAAA,WAAA;AAAA,SAEf,EAAA,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,aAAA,CAAc,WAAc,GAAA,eAAA;;;;"}
|
|
1
|
+
{"version":3,"file":"CalendarModal.js","sources":["../../../src/components/modals/CalendarModal.tsx"],"sourcesContent":["import React, { ComponentType, FC, Suspense, lazy } from 'react';\r\nimport { Modal, TModal } from './Modal';\r\n\r\nexport interface ICalendarModal extends TModal {\r\n handleClickDay: (date: Date) => void;\r\n onCancel: () => void;\r\n calValue?: Date;\r\n locale: string;\r\n}\r\n\r\nexport const CalendarModal = React.forwardRef<HTMLDivElement, ICalendarModal>(\r\n ({ handleClickDay, onCancel, calValue, locale, size, ...props }, ref) => {\r\n const Calendar = lazy(\r\n () =>\r\n import('react-calendar') as unknown as Promise<{\r\n default: ComponentType<any>;\r\n }>,\r\n );\r\n return (\r\n <Modal\r\n noHeader\r\n size={size ?? 'cal'}\r\n shouldCloseOnEsc\r\n shouldCloseOnOverlayClick\r\n ref={ref}\r\n {...props}\r\n initialFocusGetter={(modalRef) => {\r\n return modalRef?.querySelector(\r\n '.react-calendar__tile--active',\r\n ) as HTMLElement;\r\n }}\r\n >\r\n <Suspense fallback={null}>\r\n <Calendar\r\n onClickDay={handleClickDay}\r\n locale={locale}\r\n value={calValue ?? new Date()}\r\n nextLabel=\"›\"\r\n next2Label=\"»\"\r\n prevLabel=\"‹\"\r\n prev2Label=\"«\"\r\n />\r\n </Suspense>\r\n </Modal>\r\n );\r\n },\r\n);\r\n\r\nCalendarModal.displayName = 'CalendarModal';\r\n"],"names":["React"],"mappings":";;;;AAUO,MAAM,gBAAgBA,cAAM,CAAA,UAAA;AAAA,EACjC,CAAC,EAAE,cAAA,EAAgB,QAAU,EAAA,QAAA,EAAU,QAAQ,IAAM,EAAA,GAAG,KAAM,EAAA,EAAG,GAAQ,KAAA;AACvE,IAAA,MAAM,QAAW,GAAA,IAAA;AAAA,MACf,MACE,OAAO,gBAAgB,CAAA;AAAA,KAG3B,CAAA;AACA,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,QAAQ,EAAA,IAAA;AAAA,QACR,MAAM,IAAQ,IAAA,KAAA;AAAA,QACd,gBAAgB,EAAA,IAAA;AAAA,QAChB,yBAAyB,EAAA,IAAA;AAAA,QACzB,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QACJ,kBAAA,EAAoB,CAAC,QAAa,KAAA;AAChC,UAAA,OAAO,QAAU,EAAA,aAAA;AAAA,YACf,+BAAA;AAAA,WACF,CAAA;AAAA,SACF;AAAA,QAEA,QAAA,kBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,QAAA,EAAU,IAClB,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,UAAY,EAAA,cAAA;AAAA,YACZ,MAAA;AAAA,YACA,KAAA,EAAO,QAAY,oBAAA,IAAI,IAAK,EAAA;AAAA,YAC5B,SAAU,EAAA,QAAA;AAAA,YACV,UAAW,EAAA,MAAA;AAAA,YACX,SAAU,EAAA,QAAA;AAAA,YACV,UAAW,EAAA,MAAA;AAAA,WAAA;AAAA,SAEf,EAAA,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,aAAA,CAAc,WAAc,GAAA,eAAA;;;;"}
|
|
@@ -5,11 +5,20 @@ import { IDialogHeader } from './layout/DialogHeader.js';
|
|
|
5
5
|
|
|
6
6
|
type TModal = {
|
|
7
7
|
animationDuration?: number;
|
|
8
|
+
/**
|
|
9
|
+
* Aplica solamente para modales que tengan draggable=true.
|
|
10
|
+
*/
|
|
11
|
+
defaultPosition?: {
|
|
12
|
+
left?: string;
|
|
13
|
+
right?: string;
|
|
14
|
+
top?: string;
|
|
15
|
+
bottom?: string;
|
|
16
|
+
};
|
|
8
17
|
/**
|
|
9
18
|
* Si esta variable está en true, el modal se comportará más como una ventana
|
|
10
19
|
* que como un modal
|
|
11
20
|
*/
|
|
12
|
-
|
|
21
|
+
draggable?: boolean;
|
|
13
22
|
children?: React__default.ReactNode;
|
|
14
23
|
className?: string;
|
|
15
24
|
id?: string;
|
|
@@ -46,6 +55,10 @@ type TModal = {
|
|
|
46
55
|
* el botón cerrar del header (La X).
|
|
47
56
|
*/
|
|
48
57
|
onClose?: () => void;
|
|
58
|
+
/**
|
|
59
|
+
* Este método recibe el evento del mousedown utilizado para controllar el dragstart. Si el usuario devuelve false, el drag no será realizado.
|
|
60
|
+
*/
|
|
61
|
+
onDragStart?: (ev: MouseEvent) => boolean;
|
|
49
62
|
/**
|
|
50
63
|
* Permite definir un callback que será llamado siempre que el modal se
|
|
51
64
|
* cierre, una vez que la animación haya terminado.
|
|
@@ -77,11 +90,20 @@ type TModal = {
|
|
|
77
90
|
} & Pick<IDialogHeader, 'hideCloseButton'>;
|
|
78
91
|
declare const Modal: React__default.ForwardRefExoticComponent<{
|
|
79
92
|
animationDuration?: number | undefined;
|
|
93
|
+
/**
|
|
94
|
+
* Aplica solamente para modales que tengan draggable=true.
|
|
95
|
+
*/
|
|
96
|
+
defaultPosition?: {
|
|
97
|
+
left?: string | undefined;
|
|
98
|
+
right?: string | undefined;
|
|
99
|
+
top?: string | undefined;
|
|
100
|
+
bottom?: string | undefined;
|
|
101
|
+
} | undefined;
|
|
80
102
|
/**
|
|
81
103
|
* Si esta variable está en true, el modal se comportará más como una ventana
|
|
82
104
|
* que como un modal
|
|
83
105
|
*/
|
|
84
|
-
|
|
106
|
+
draggable?: boolean | undefined;
|
|
85
107
|
children?: React__default.ReactNode;
|
|
86
108
|
className?: string | undefined;
|
|
87
109
|
id?: string | undefined;
|
|
@@ -118,6 +140,10 @@ declare const Modal: React__default.ForwardRefExoticComponent<{
|
|
|
118
140
|
* el botón cerrar del header (La X).
|
|
119
141
|
*/
|
|
120
142
|
onClose?: (() => void) | undefined;
|
|
143
|
+
/**
|
|
144
|
+
* Este método recibe el evento del mousedown utilizado para controllar el dragstart. Si el usuario devuelve false, el drag no será realizado.
|
|
145
|
+
*/
|
|
146
|
+
onDragStart?: ((ev: MouseEvent) => boolean) | undefined;
|
|
121
147
|
/**
|
|
122
148
|
* Permite definir un callback que será llamado siempre que el modal se
|
|
123
149
|
* cierre, una vez que la animación haya terminado.
|
|
@@ -2,10 +2,12 @@ import { jsx } from '@apia/theme/jsx-runtime';
|
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import { WindowModal } from './WindowModal.js';
|
|
4
4
|
import { StaticModal } from './StaticModal.js';
|
|
5
|
+
import { useBreakpointIndex } from '@theme-ui/match-media';
|
|
5
6
|
|
|
6
7
|
const Modal = forwardRef(
|
|
7
8
|
(props, ref) => {
|
|
8
|
-
|
|
9
|
+
const breakpoint = useBreakpointIndex();
|
|
10
|
+
if (props.draggable && breakpoint > 3) {
|
|
9
11
|
return /* @__PURE__ */ jsx(WindowModal, { ...props, ref });
|
|
10
12
|
}
|
|
11
13
|
return /* @__PURE__ */ jsx(StaticModal, { ...props, ref });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sources":["../../../src/components/modals/Modal.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { IOnFocusConfiguration, TFocusRetriever } from '@apia/util';\nimport { TModalSize } from '../types';\nimport { IDialogHeader } from './layout/DialogHeader';\nimport { WindowModal } from './WindowModal';\nimport { StaticModal } from './StaticModal';\n\nexport type TModal = {\n animationDuration?: number;\n /**\n * Si esta variable está en true, el modal se comportará más como una ventana\n * que como un modal\n */\n
|
|
1
|
+
{"version":3,"file":"Modal.js","sources":["../../../src/components/modals/Modal.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\r\nimport { IOnFocusConfiguration, TFocusRetriever } from '@apia/util';\r\nimport { TModalSize } from '../types';\r\nimport { IDialogHeader } from './layout/DialogHeader';\r\nimport { WindowModal } from './WindowModal';\r\nimport { StaticModal } from './StaticModal';\r\nimport { useBreakpointIndex } from '@theme-ui/match-media';\r\n\r\nexport type TModal = {\r\n animationDuration?: number;\r\n /**\r\n * Aplica solamente para modales que tengan draggable=true.\r\n */\r\n defaultPosition?: {\r\n left?: string;\r\n right?: string;\r\n top?: string;\r\n bottom?: string;\r\n };\r\n /**\r\n * Si esta variable está en true, el modal se comportará más como una ventana\r\n * que como un modal\r\n */\r\n draggable?: boolean;\r\n children?: React.ReactNode;\r\n className?: string;\r\n id?: string;\r\n initialFocusConfiguration?: IOnFocusConfiguration;\r\n /**\r\n * Este retriever será pasado al método focus.on para realizar el foco en el\r\n * elemento inicial del modal.\r\n *\r\n * @see focus\r\n */\r\n initialFocusGetter?: (\r\n modalInnerRef: HTMLElement,\r\n ) => ReturnType<TFocusRetriever>;\r\n /**\r\n * Si se pasa un ref, el modal hará foco sobre el elemento una vez que haya\r\n * abierto.\r\n */\r\n initialFocusRef?: React.RefObject<unknown>;\r\n /**\r\n * Controla el estado del modal, indicando a la transición de apertura o\r\n * cierre que debe comenzar, dependiendo de si cambia a true o false\r\n * respectivamente.\r\n */\r\n isOpen?: boolean;\r\n maxWidth?: number | string;\r\n /**\r\n * Permite pasar un componente React que se mostrará a la derecha del título,\r\n * con el fin de incorporar botones en el header del modal.\r\n */\r\n NavBar?: React.ReactNode;\r\n noFocus?: boolean;\r\n noHeader?: boolean;\r\n /**\r\n * Permite definir un callback que será llamado solamente cuando el modal se\r\n * cierre por medio del click en el overlay, al presionar escape o mediante\r\n * el botón cerrar del header (La X).\r\n */\r\n onClose?: () => void;\r\n /**\r\n * Este método recibe el evento del mousedown utilizado para controllar el dragstart. Si el usuario devuelve false, el drag no será realizado.\r\n */\r\n onDragStart?: (ev: MouseEvent) => boolean;\r\n /**\r\n * Permite definir un callback que será llamado siempre que el modal se\r\n * cierre, una vez que la animación haya terminado.\r\n */\r\n onExited?: () => unknown;\r\n /**\r\n * Al pasar un Portal, el modal se abrirá dentro de éste y no directamente en\r\n * la posición actual dentro del árbol de componentes. Normalmente, este\r\n * Portal es pasado automáticamente por el hook useModal (No el de la\r\n * librería, sino el nuestro).\r\n *\r\n * @see useModal\r\n */\r\n Portal?: React.FC<{\r\n children: React.ReactNode;\r\n }>;\r\n /**\r\n * Si es true, el modal será cerrado al presionar escape.\r\n */\r\n shouldCloseOnEsc?: boolean;\r\n /**\r\n * Si es true, el modal será cerrado al hacer clic en el overlay.\r\n */\r\n shouldCloseOnOverlayClick?: boolean;\r\n size?: TModalSize;\r\n stretch?: boolean;\r\n title?: string;\r\n variant?: string;\r\n} & Pick<IDialogHeader, 'hideCloseButton'>;\r\n\r\nexport const Modal = forwardRef(\r\n (props: TModal, ref: React.Ref<HTMLDivElement>) => {\r\n const breakpoint = useBreakpointIndex();\r\n\r\n if (props.draggable && breakpoint > 3) {\r\n return <WindowModal {...props} ref={ref} />;\r\n }\r\n return <StaticModal {...props} ref={ref} />;\r\n },\r\n);\r\n\r\nModal.displayName = 'Modal';\r\n"],"names":[],"mappings":";;;;;;AAgGO,MAAM,KAAQ,GAAA,UAAA;AAAA,EACnB,CAAC,OAAe,GAAmC,KAAA;AACjD,IAAA,MAAM,aAAa,kBAAmB,EAAA,CAAA;AAEtC,IAAI,IAAA,KAAA,CAAM,SAAa,IAAA,UAAA,GAAa,CAAG,EAAA;AACrC,MAAA,uBAAQ,GAAA,CAAA,WAAA,EAAA,EAAa,GAAG,KAAA,EAAO,GAAU,EAAA,CAAA,CAAA;AAAA,KAC3C;AACA,IAAA,uBAAQ,GAAA,CAAA,WAAA,EAAA,EAAa,GAAG,KAAA,EAAO,GAAU,EAAA,CAAA,CAAA;AAAA,GAC3C;AACF,EAAA;AAEA,KAAA,CAAM,WAAc,GAAA,OAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalContext.js","sources":["../../../src/components/modals/ModalContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport type TModalContext = {\n changeTitle: (newTitle: string) => void;\n close: () => unknown;\n descriptionId: string;\n};\n\nexport const ModalContext = createContext<TModalContext | null>(null);\n\nexport function useModalContext() {\n const context = useContext(ModalContext);\n\n if (!context) throw new Error('There is no ModalContext');\n\n return context;\n}\n"],"names":[],"mappings":";;AAQa,MAAA,YAAA,GAAe,cAAoC,IAAI,EAAA;AAE7D,SAAS,eAAkB,GAAA;AAChC,EAAM,MAAA,OAAA,GAAU,WAAW,YAAY,CAAA,CAAA;AAEvC,EAAA,IAAI,CAAC,OAAA;AAAS,IAAM,MAAA,IAAI,MAAM,0BAA0B,CAAA,CAAA;AAExD,EAAO,OAAA,OAAA,CAAA;AACT;;;;"}
|
|
1
|
+
{"version":3,"file":"ModalContext.js","sources":["../../../src/components/modals/ModalContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\r\n\r\nexport type TModalContext = {\r\n changeTitle: (newTitle: string) => void;\r\n close: () => unknown;\r\n descriptionId: string;\r\n};\r\n\r\nexport const ModalContext = createContext<TModalContext | null>(null);\r\n\r\nexport function useModalContext() {\r\n const context = useContext(ModalContext);\r\n\r\n if (!context) throw new Error('There is no ModalContext');\r\n\r\n return context;\r\n}\r\n"],"names":[],"mappings":";;AAQa,MAAA,YAAA,GAAe,cAAoC,IAAI,EAAA;AAE7D,SAAS,eAAkB,GAAA;AAChC,EAAM,MAAA,OAAA,GAAU,WAAW,YAAY,CAAA,CAAA;AAEvC,EAAA,IAAI,CAAC,OAAA;AAAS,IAAM,MAAA,IAAI,MAAM,0BAA0B,CAAA,CAAA;AAExD,EAAO,OAAA,OAAA,CAAA;AACT;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Overlay.js","sources":["../../../src/components/modals/Overlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { Box, BoxProps } from '@apia/theme';\nimport ReactFocusLock from 'react-focus-lock';\nimport { getVariant } from '@apia/theme';\nimport { useCombinedRefs } from '@apia/util';\nimport { useBodyScrollLock } from '../../hooks';\n\nexport interface IOverlay extends BoxProps {\n children: React.ReactNode;\n className?: string;\n onOverlayClicked: (event: React.MouseEvent<HTMLDivElement>) => void;\n /**\n * Permite pasar un callback que será llamado una vez que el overlay termine\n * de cerrarse.\n */\n onExited: () => void;\n isOpen?: boolean;\n shouldAvoidInitialFocusTrap?: boolean;\n stretch?: boolean;\n transitionDuration?: number;\n}\n\nexport const Overlay = React.forwardRef<unknown, IOverlay>(\n (\n {\n children,\n className = '',\n onExited,\n onOverlayClicked,\n isOpen: open = false,\n shouldAvoidInitialFocusTrap,\n stretch,\n transitionDuration = 150,\n ...props\n },\n ref,\n ) => {\n const innerRef = React.useRef<HTMLDivElement>(null);\n const assignRefs = useCombinedRefs(innerRef, ref);\n useBodyScrollLock(open);\n return (\n <CSSTransition\n in={open}\n timeout={transitionDuration}\n onExited={onExited}\n classNames=\"overlayAnimation\"\n appear\n nodeRef={innerRef}\n unmountOnExit\n >\n <Box\n className={`${className} overlay`}\n ref={assignRefs}\n {...props}\n data-type=\"overlay\"\n role=\"presentation\"\n onClick={React.useCallback(\n (ev: React.MouseEvent<HTMLDivElement>) => {\n if (ev.target === innerRef.current) onOverlayClicked(ev);\n },\n [onOverlayClicked],\n )}\n {...getVariant(\n props.variant ??\n `layout.common.modals.overlay${stretch ? '--stretch' : ''}`,\n )}\n >\n <ReactFocusLock\n autoFocus={shouldAvoidInitialFocusTrap ? false : undefined}\n returnFocus={false}\n crossFrame={false}\n disabled={\n document.activeElement?.classList.contains('filter') &&\n document.activeElement.tagName === 'INPUT'\n }\n whiteList={(el) => {\n return !el.closest('[role=\"menu\"]');\n }}\n >\n {children}\n </ReactFocusLock>\n </Box>\n </CSSTransition>\n );\n },\n);\n\nOverlay.displayName = 'Overlay';\n"],"names":[],"mappings":";;;;;;;;AAuBO,MAAM,UAAU,KAAM,CAAA,UAAA;AAAA,EAC3B,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAY,GAAA,EAAA;AAAA,IACZ,QAAA;AAAA,IACA,gBAAA;AAAA,IACA,QAAQ,IAAO,GAAA,KAAA;AAAA,IACf,2BAAA;AAAA,IACA,OAAA;AAAA,IACA,kBAAqB,GAAA,GAAA;AAAA,IACrB,GAAG,KAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAM,MAAA,QAAA,GAAW,KAAM,CAAA,MAAA,CAAuB,IAAI,CAAA,CAAA;AAClD,IAAM,MAAA,UAAA,GAAa,eAAgB,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAChD,IAAA,iBAAA,CAAkB,IAAI,CAAA,CAAA;AACtB,IACE,uBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA,IAAA;AAAA,QACJ,OAAS,EAAA,kBAAA;AAAA,QACT,QAAA;AAAA,QACA,UAAW,EAAA,kBAAA;AAAA,QACX,MAAM,EAAA,IAAA;AAAA,QACN,OAAS,EAAA,QAAA;AAAA,QACT,aAAa,EAAA,IAAA;AAAA,QAEb,QAAA,kBAAA,GAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,QAAA,CAAA;AAAA,YACvB,GAAK,EAAA,UAAA;AAAA,YACJ,GAAG,KAAA;AAAA,YACJ,WAAU,EAAA,SAAA;AAAA,YACV,IAAK,EAAA,cAAA;AAAA,YACL,SAAS,KAAM,CAAA,WAAA;AAAA,cACb,CAAC,EAAyC,KAAA;AACxC,gBAAI,IAAA,EAAA,CAAG,WAAW,QAAS,CAAA,OAAA;AAAS,kBAAA,gBAAA,CAAiB,EAAE,CAAA,CAAA;AAAA,eACzD;AAAA,cACA,CAAC,gBAAgB,CAAA;AAAA,aACnB;AAAA,YACC,GAAG,UAAA;AAAA,cACF,KAAM,CAAA,OAAA,IACJ,CAA+B,4BAAA,EAAA,OAAA,GAAU,cAAc,EAAE,CAAA,CAAA;AAAA,aAC7D;AAAA,YAEA,QAAA,kBAAA,GAAA;AAAA,cAAC,cAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,8BAA8B,KAAQ,GAAA,KAAA,CAAA;AAAA,gBACjD,WAAa,EAAA,KAAA;AAAA,gBACb,UAAY,EAAA,KAAA;AAAA,gBACZ,QAAA,EACE,SAAS,aAAe,EAAA,SAAA,CAAU,SAAS,QAAQ,CAAA,IACnD,QAAS,CAAA,aAAA,CAAc,OAAY,KAAA,OAAA;AAAA,gBAErC,SAAA,EAAW,CAAC,EAAO,KAAA;AACjB,kBAAO,OAAA,CAAC,EAAG,CAAA,OAAA,CAAQ,eAAe,CAAA,CAAA;AAAA,iBACpC;AAAA,gBAEC,QAAA;AAAA,eAAA;AAAA,aACH;AAAA,WAAA;AAAA,SACF;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,OAAA,CAAQ,WAAc,GAAA,SAAA;;;;"}
|
|
1
|
+
{"version":3,"file":"Overlay.js","sources":["../../../src/components/modals/Overlay.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { CSSTransition } from 'react-transition-group';\r\nimport { Box, BoxProps } from '@apia/theme';\r\nimport ReactFocusLock from 'react-focus-lock';\r\nimport { getVariant } from '@apia/theme';\r\nimport { useCombinedRefs } from '@apia/util';\r\nimport { useBodyScrollLock } from '../../hooks';\r\n\r\nexport interface IOverlay extends BoxProps {\r\n children: React.ReactNode;\r\n className?: string;\r\n onOverlayClicked: (event: React.MouseEvent<HTMLDivElement>) => void;\r\n /**\r\n * Permite pasar un callback que será llamado una vez que el overlay termine\r\n * de cerrarse.\r\n */\r\n onExited: () => void;\r\n isOpen?: boolean;\r\n shouldAvoidInitialFocusTrap?: boolean;\r\n stretch?: boolean;\r\n transitionDuration?: number;\r\n}\r\n\r\nexport const Overlay = React.forwardRef<unknown, IOverlay>(\r\n (\r\n {\r\n children,\r\n className = '',\r\n onExited,\r\n onOverlayClicked,\r\n isOpen: open = false,\r\n shouldAvoidInitialFocusTrap,\r\n stretch,\r\n transitionDuration = 150,\r\n ...props\r\n },\r\n ref,\r\n ) => {\r\n const innerRef = React.useRef<HTMLDivElement>(null);\r\n const assignRefs = useCombinedRefs(innerRef, ref);\r\n useBodyScrollLock(open);\r\n return (\r\n <CSSTransition\r\n in={open}\r\n timeout={transitionDuration}\r\n onExited={onExited}\r\n classNames=\"overlayAnimation\"\r\n appear\r\n nodeRef={innerRef}\r\n unmountOnExit\r\n >\r\n <Box\r\n className={`${className} overlay`}\r\n ref={assignRefs}\r\n {...props}\r\n data-type=\"overlay\"\r\n role=\"presentation\"\r\n onClick={React.useCallback(\r\n (ev: React.MouseEvent<HTMLDivElement>) => {\r\n if (ev.target === innerRef.current) onOverlayClicked(ev);\r\n },\r\n [onOverlayClicked],\r\n )}\r\n {...getVariant(\r\n props.variant ??\r\n `layout.common.modals.overlay${stretch ? '--stretch' : ''}`,\r\n )}\r\n >\r\n <ReactFocusLock\r\n autoFocus={shouldAvoidInitialFocusTrap ? false : undefined}\r\n returnFocus={false}\r\n crossFrame={false}\r\n disabled={\r\n document.activeElement?.classList.contains('filter') &&\r\n document.activeElement.tagName === 'INPUT'\r\n }\r\n whiteList={(el) => {\r\n return !el.closest('[role=\"menu\"]');\r\n }}\r\n >\r\n {children}\r\n </ReactFocusLock>\r\n </Box>\r\n </CSSTransition>\r\n );\r\n },\r\n);\r\n\r\nOverlay.displayName = 'Overlay';\r\n"],"names":[],"mappings":";;;;;;;;AAuBO,MAAM,UAAU,KAAM,CAAA,UAAA;AAAA,EAC3B,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAY,GAAA,EAAA;AAAA,IACZ,QAAA;AAAA,IACA,gBAAA;AAAA,IACA,QAAQ,IAAO,GAAA,KAAA;AAAA,IACf,2BAAA;AAAA,IACA,OAAA;AAAA,IACA,kBAAqB,GAAA,GAAA;AAAA,IACrB,GAAG,KAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAM,MAAA,QAAA,GAAW,KAAM,CAAA,MAAA,CAAuB,IAAI,CAAA,CAAA;AAClD,IAAM,MAAA,UAAA,GAAa,eAAgB,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAChD,IAAA,iBAAA,CAAkB,IAAI,CAAA,CAAA;AACtB,IACE,uBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA,IAAA;AAAA,QACJ,OAAS,EAAA,kBAAA;AAAA,QACT,QAAA;AAAA,QACA,UAAW,EAAA,kBAAA;AAAA,QACX,MAAM,EAAA,IAAA;AAAA,QACN,OAAS,EAAA,QAAA;AAAA,QACT,aAAa,EAAA,IAAA;AAAA,QAEb,QAAA,kBAAA,GAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,QAAA,CAAA;AAAA,YACvB,GAAK,EAAA,UAAA;AAAA,YACJ,GAAG,KAAA;AAAA,YACJ,WAAU,EAAA,SAAA;AAAA,YACV,IAAK,EAAA,cAAA;AAAA,YACL,SAAS,KAAM,CAAA,WAAA;AAAA,cACb,CAAC,EAAyC,KAAA;AACxC,gBAAI,IAAA,EAAA,CAAG,WAAW,QAAS,CAAA,OAAA;AAAS,kBAAA,gBAAA,CAAiB,EAAE,CAAA,CAAA;AAAA,eACzD;AAAA,cACA,CAAC,gBAAgB,CAAA;AAAA,aACnB;AAAA,YACC,GAAG,UAAA;AAAA,cACF,KAAM,CAAA,OAAA,IACJ,CAA+B,4BAAA,EAAA,OAAA,GAAU,cAAc,EAAE,CAAA,CAAA;AAAA,aAC7D;AAAA,YAEA,QAAA,kBAAA,GAAA;AAAA,cAAC,cAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,8BAA8B,KAAQ,GAAA,KAAA,CAAA;AAAA,gBACjD,WAAa,EAAA,KAAA;AAAA,gBACb,UAAY,EAAA,KAAA;AAAA,gBACZ,QAAA,EACE,SAAS,aAAe,EAAA,SAAA,CAAU,SAAS,QAAQ,CAAA,IACnD,QAAS,CAAA,aAAA,CAAc,OAAY,KAAA,OAAA;AAAA,gBAErC,SAAA,EAAW,CAAC,EAAO,KAAA;AACjB,kBAAO,OAAA,CAAC,EAAG,CAAA,OAAA,CAAQ,eAAe,CAAA,CAAA;AAAA,iBACpC;AAAA,gBAEC,QAAA;AAAA,eAAA;AAAA,aACH;AAAA,WAAA;AAAA,SACF;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,OAAA,CAAQ,WAAc,GAAA,SAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StaticModal.js","sources":["../../../src/components/modals/StaticModal.tsx"],"sourcesContent":["import React, {\n useEffect,\n useState,\n useCallback,\n forwardRef,\n useRef,\n} from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { Box } from '@apia/theme';\nimport uniqueId from 'lodash-es/uniqueId';\nimport {\n focus,\n focusSelector,\n getFocusSelector,\n useCombinedRefs,\n} from '@apia/util';\nimport { getVariant } from '@apia/theme';\nimport { Overlay } from './Overlay';\nimport DialogHeader from './layout/DialogHeader';\nimport { ModalContext } from './ModalContext';\nimport { TModal } from './Modal';\n\nexport const StaticModal = forwardRef(\n (\n {\n animationDuration = 150,\n children = null,\n className,\n hideCloseButton,\n id,\n initialFocusConfiguration,\n initialFocusGetter,\n initialFocusRef,\n isOpen = false,\n maxWidth,\n NavBar,\n noFocus,\n noHeader = false,\n onClose = () => {},\n onExited = () => {},\n Portal,\n shouldCloseOnEsc = true,\n shouldCloseOnOverlayClick = true,\n size = 'md',\n stretch,\n title = '',\n variant,\n }: Omit<TModal, 'asWindow'>,\n ref: React.Ref<HTMLDivElement>,\n ) => {\n const lastTitle = useRef(title);\n const [innerTitle, setInnerTitle] = useState(title);\n if (lastTitle.current !== title && innerTitle !== title) {\n setInnerTitle(title);\n }\n const [isOpenInner, setIsOpen] = useState(isOpen);\n const innerId = React.useMemo(() => {\n return `Modal${uniqueId()}`;\n }, []);\n\n useEffect(() => {\n setIsOpen(isOpen);\n }, [isOpen]);\n\n const closeHandler = useCallback(() => {\n setIsOpen(false);\n onClose();\n }, [onClose]);\n const [overlayElement, setInnerRef] = React.useState<HTMLElement>();\n const assignRefs = useCombinedRefs(\n setInnerRef as unknown as React.ForwardedRef<unknown>,\n ref as unknown as React.Ref<unknown>,\n );\n\n const overlayClickedHandle = (event: React.MouseEvent<HTMLDivElement>) => {\n if (shouldCloseOnOverlayClick) {\n if (\n (event.target as HTMLDivElement).getAttribute('data-type') ===\n 'overlay'\n ) {\n closeHandler();\n }\n }\n };\n\n useEffect(() => {\n function handleEscape(event: KeyboardEvent) {\n const overlays = [...document.querySelectorAll('.overlay')];\n\n if (\n overlays.length > 0 &&\n overlays[overlays.length - 1]?.id === innerId &&\n event.key === 'Escape'\n ) {\n event.preventDefault();\n event.stopPropagation();\n\n closeHandler();\n\n return false;\n }\n\n return true;\n }\n if (isOpenInner && shouldCloseOnEsc)\n document.addEventListener('keydown', handleEscape, false);\n return () => {\n document.removeEventListener('keydown', handleEscape, false);\n };\n }, [shouldCloseOnEsc, isOpenInner, closeHandler, innerId]);\n\n React.useEffect(\n () => {\n if (!noFocus && isOpenInner) {\n if (overlayElement) {\n void focus.on(\n () => {\n if (initialFocusGetter)\n return initialFocusGetter(overlayElement);\n if (initialFocusRef?.current)\n return (\n (initialFocusRef?.current || overlayElement) as HTMLElement\n ).querySelector(focusSelector) as HTMLElement;\n return overlayElement.querySelector(\n getFocusSelector(':not(.modal__closeButton)'),\n ) as HTMLElement;\n },\n { ...initialFocusConfiguration, focusEvenWhenScreenLocked: true },\n );\n }\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [overlayElement],\n );\n\n const Wrapper = React.useMemo(() => {\n return Portal ?? React.Fragment;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const nodeRef = useRef<HTMLElement | null>(null);\n\n return (\n <ModalContext.Provider\n value={React.useMemo(() => {\n return {\n changeTitle: (newTitle) => {\n setInnerTitle(newTitle);\n },\n close: () => {\n closeHandler();\n },\n descriptionId: `${innerId}_Description`,\n };\n }, [closeHandler, innerId])}\n >\n <Wrapper>\n <Overlay\n onOverlayClicked={overlayClickedHandle}\n isOpen={isOpen}\n className={className}\n stretch={stretch}\n ref={assignRefs}\n onExited={onExited}\n id={innerId}\n shouldAvoidInitialFocusTrap={noFocus}\n >\n <CSSTransition\n in={isOpen}\n timeout={animationDuration}\n classNames=\"modal\"\n appear\n unmountOnExit\n nodeRef={nodeRef}\n >\n <Box\n ref={nodeRef}\n className=\"modal__variantWrapper\"\n {...(variant ? getVariant(variant) : {})}\n >\n <Box\n id={id}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={title}\n aria-describedby={`${innerId}_Description`}\n aria-hidden=\"false\"\n className=\"modal__main\"\n // allows scrolling within element, despite body lock\n data-scroll-lock-scrollable\n sx={React.useMemo(() => {\n return {\n variant: `layout.common.modals.${size}`,\n ...(maxWidth !== undefined ? { maxWidth } : {}),\n };\n }, [maxWidth, size])}\n data-variant={`layout.common.modals.${size}`}\n >\n {!noHeader && (\n <DialogHeader\n className=\"modal__header\"\n NavBar={NavBar}\n title={innerTitle}\n close={closeHandler}\n hideCloseButton={hideCloseButton}\n id={`${innerId}_Header`}\n />\n )}\n <Box\n className=\"modal__content\"\n id={\n typeof children === 'string'\n ? `${innerId}_Description`\n : undefined\n }\n >\n {children}\n </Box>\n </Box>\n </Box>\n </CSSTransition>\n </Overlay>\n </Wrapper>\n </ModalContext.Provider>\n );\n },\n);\n\nStaticModal.displayName = 'StaticModal';\n"],"names":["React"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"StaticModal.js","sources":["../../../src/components/modals/StaticModal.tsx"],"sourcesContent":["import React, {\r\n useEffect,\r\n useState,\r\n useCallback,\r\n forwardRef,\r\n useRef,\r\n} from 'react';\r\nimport { CSSTransition } from 'react-transition-group';\r\nimport { Box } from '@apia/theme';\r\nimport uniqueId from 'lodash-es/uniqueId';\r\nimport {\r\n focus,\r\n focusSelector,\r\n getFocusSelector,\r\n useCombinedRefs,\r\n} from '@apia/util';\r\nimport { getVariant } from '@apia/theme';\r\nimport { Overlay } from './Overlay';\r\nimport DialogHeader from './layout/DialogHeader';\r\nimport { ModalContext } from './ModalContext';\r\nimport { TModal } from './Modal';\r\n\r\nexport const StaticModal = forwardRef(\r\n (\r\n {\r\n animationDuration = 150,\r\n children = null,\r\n className,\r\n hideCloseButton,\r\n id,\r\n initialFocusConfiguration,\r\n initialFocusGetter,\r\n initialFocusRef,\r\n isOpen = false,\r\n maxWidth,\r\n NavBar,\r\n noFocus,\r\n noHeader = false,\r\n onClose = () => {},\r\n onExited = () => {},\r\n Portal,\r\n shouldCloseOnEsc = true,\r\n shouldCloseOnOverlayClick = true,\r\n size = 'md',\r\n stretch,\r\n title = '',\r\n variant,\r\n }: Omit<TModal, 'asWindow'>,\r\n ref: React.Ref<HTMLDivElement>,\r\n ) => {\r\n const lastTitle = useRef(title);\r\n const [innerTitle, setInnerTitle] = useState(title);\r\n if (lastTitle.current !== title && innerTitle !== title) {\r\n setInnerTitle(title);\r\n }\r\n const [isOpenInner, setIsOpen] = useState(isOpen);\r\n const innerId = React.useMemo(() => {\r\n return `Modal${uniqueId()}`;\r\n }, []);\r\n\r\n useEffect(() => {\r\n setIsOpen(isOpen);\r\n }, [isOpen]);\r\n\r\n const closeHandler = useCallback(() => {\r\n setIsOpen(false);\r\n onClose();\r\n }, [onClose]);\r\n const [overlayElement, setInnerRef] = React.useState<HTMLElement>();\r\n const assignRefs = useCombinedRefs(\r\n setInnerRef as unknown as React.ForwardedRef<unknown>,\r\n ref as unknown as React.Ref<unknown>,\r\n );\r\n\r\n const overlayClickedHandle = (event: React.MouseEvent<HTMLDivElement>) => {\r\n if (shouldCloseOnOverlayClick) {\r\n if (\r\n (event.target as HTMLDivElement).getAttribute('data-type') ===\r\n 'overlay'\r\n ) {\r\n closeHandler();\r\n }\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n function handleEscape(event: KeyboardEvent) {\r\n const overlays = [...document.querySelectorAll('.overlay')];\r\n\r\n if (\r\n overlays.length > 0 &&\r\n overlays[overlays.length - 1]?.id === innerId &&\r\n event.key === 'Escape'\r\n ) {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n\r\n closeHandler();\r\n\r\n return false;\r\n }\r\n\r\n return true;\r\n }\r\n if (isOpenInner && shouldCloseOnEsc)\r\n document.addEventListener('keydown', handleEscape, false);\r\n return () => {\r\n document.removeEventListener('keydown', handleEscape, false);\r\n };\r\n }, [shouldCloseOnEsc, isOpenInner, closeHandler, innerId]);\r\n\r\n React.useEffect(\r\n () => {\r\n if (!noFocus && isOpenInner) {\r\n if (overlayElement) {\r\n void focus.on(\r\n () => {\r\n if (initialFocusGetter)\r\n return initialFocusGetter(overlayElement);\r\n if (initialFocusRef?.current)\r\n return (\r\n (initialFocusRef?.current || overlayElement) as HTMLElement\r\n ).querySelector(focusSelector) as HTMLElement;\r\n return overlayElement.querySelector(\r\n getFocusSelector(':not(.modal__closeButton)'),\r\n ) as HTMLElement;\r\n },\r\n { ...initialFocusConfiguration, focusEvenWhenScreenLocked: true },\r\n );\r\n }\r\n }\r\n },\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n [overlayElement],\r\n );\r\n\r\n const Wrapper = React.useMemo(() => {\r\n return Portal ?? React.Fragment;\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n const nodeRef = useRef<HTMLElement | null>(null);\r\n\r\n return (\r\n <ModalContext.Provider\r\n value={React.useMemo(() => {\r\n return {\r\n changeTitle: (newTitle) => {\r\n setInnerTitle(newTitle);\r\n },\r\n close: () => {\r\n closeHandler();\r\n },\r\n descriptionId: `${innerId}_Description`,\r\n };\r\n }, [closeHandler, innerId])}\r\n >\r\n <Wrapper>\r\n <Overlay\r\n onOverlayClicked={overlayClickedHandle}\r\n isOpen={isOpen}\r\n className={className}\r\n stretch={stretch}\r\n ref={assignRefs}\r\n onExited={onExited}\r\n id={innerId}\r\n shouldAvoidInitialFocusTrap={noFocus}\r\n >\r\n <CSSTransition\r\n in={isOpen}\r\n timeout={animationDuration}\r\n classNames=\"modal\"\r\n appear\r\n unmountOnExit\r\n nodeRef={nodeRef}\r\n >\r\n <Box\r\n ref={nodeRef}\r\n className=\"modal__variantWrapper\"\r\n {...(variant ? getVariant(variant) : {})}\r\n >\r\n <Box\r\n id={id}\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n aria-label={title}\r\n aria-describedby={`${innerId}_Description`}\r\n aria-hidden=\"false\"\r\n className=\"modal__main\"\r\n // allows scrolling within element, despite body lock\r\n data-scroll-lock-scrollable\r\n sx={React.useMemo(() => {\r\n return {\r\n variant: `layout.common.modals.${size}`,\r\n ...(maxWidth !== undefined ? { maxWidth } : {}),\r\n };\r\n }, [maxWidth, size])}\r\n data-variant={`layout.common.modals.${size}`}\r\n >\r\n {!noHeader && (\r\n <DialogHeader\r\n className=\"modal__header\"\r\n NavBar={NavBar}\r\n title={innerTitle}\r\n close={closeHandler}\r\n hideCloseButton={hideCloseButton}\r\n id={`${innerId}_Header`}\r\n />\r\n )}\r\n <Box\r\n className=\"modal__content\"\r\n id={\r\n typeof children === 'string'\r\n ? `${innerId}_Description`\r\n : undefined\r\n }\r\n >\r\n {children}\r\n </Box>\r\n </Box>\r\n </Box>\r\n </CSSTransition>\r\n </Overlay>\r\n </Wrapper>\r\n </ModalContext.Provider>\r\n );\r\n },\r\n);\r\n\r\nStaticModal.displayName = 'StaticModal';\r\n"],"names":["React"],"mappings":"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"}
|