softable-pixels-web 1.1.30 → 1.1.31
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/{Input-DD-ZOugU.js → Input-hznFa6IM.js} +7 -1
- package/dist/Input-hznFa6IM.js.map +1 -0
- package/dist/Select-Bvq9Xdgv.js.map +1 -1
- package/dist/context-menu.d.ts +1 -1
- package/dist/{index-VOysND-P.d.ts → index-B9F6s4M6.d.ts} +7 -2
- package/dist/{index-0Tu7_jh1.d.ts → index-CFojep1-.d.ts} +3 -3
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1 -1
- package/dist/input.d.ts +1 -1
- package/dist/input.js +1 -1
- package/dist/typography.d.ts +2 -2
- package/package.json +1 -1
- package/dist/Input-DD-ZOugU.js.map +0 -1
|
@@ -110,6 +110,7 @@ function createInputStyles(props) {
|
|
|
110
110
|
|
|
111
111
|
//#endregion
|
|
112
112
|
//#region src/components/commons/inputs/Input/index.tsx
|
|
113
|
+
/** biome-ignore-all lint/a11y/noAutofocus: It's a custom input component */
|
|
113
114
|
const Input = forwardRef((props, ref) => {
|
|
114
115
|
const reactId = useId();
|
|
115
116
|
const inputId = useMemo(() => {
|
|
@@ -166,7 +167,12 @@ const Input = forwardRef((props, ref) => {
|
|
|
166
167
|
required: props.required,
|
|
167
168
|
disabled: props.disabled,
|
|
168
169
|
className: classes.input,
|
|
170
|
+
autoFocus: props.autoFocus,
|
|
171
|
+
spellCheck: props.spellCheck,
|
|
172
|
+
autoCorrect: props.autoCorrect,
|
|
169
173
|
placeholder: props.placeholder,
|
|
174
|
+
autoComplete: props.autoComplete,
|
|
175
|
+
autoCapitalize: props.autoCapitalize,
|
|
170
176
|
"aria-label": !props.hideLabel ? void 0 : props.label,
|
|
171
177
|
onChange: handleChange
|
|
172
178
|
}),
|
|
@@ -181,4 +187,4 @@ Input.displayName = "Input";
|
|
|
181
187
|
|
|
182
188
|
//#endregion
|
|
183
189
|
export { Input as t };
|
|
184
|
-
//# sourceMappingURL=Input-
|
|
190
|
+
//# sourceMappingURL=Input-hznFa6IM.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Input-hznFa6IM.js","names":[],"sources":["../src/components/commons/inputs/Input/hooks/useInput/index.ts","../src/components/commons/inputs/Input/styles.ts","../src/components/commons/inputs/Input/index.tsx"],"sourcesContent":["// External Libraries\nimport { useState, useRef, useMemo } from 'react'\n\n// Services\nimport { Locale, MaskModule } from 'src/services/MaskModule'\n\n// Types\nimport type { InputProps } from '../../types'\n\nexport function useInput({ mask, onChange, ...rest }: InputProps) {\n // Refs\n const inputRef = useRef<HTMLInputElement>(null)\n\n // States\n const [showPassword, setShowPassword] = useState(false)\n\n // Constants\n const { minLength, maxLength } = useMemo(() => {\n const appliedMask = mask ? MaskModule.getMask(Locale.BR, mask) : undefined\n\n const minLength = appliedMask\n ? appliedMask.minLength || rest.minLength\n : rest.minLength\n\n const maxLength = appliedMask\n ? appliedMask.maxLength || rest.maxLength\n : rest.maxLength\n\n return { minLength, maxLength }\n }, [mask, rest.minLength, rest.maxLength])\n\n // Functions\n function togglePasswordVisibility() {\n setShowPassword(prev => !prev)\n }\n\n function handleRefMethods() {\n return { focus: handleFocus, blur: handleBlur }\n }\n\n function handleFocus() {\n inputRef.current?.focus()\n }\n\n function handleBlur() {\n inputRef.current?.blur()\n }\n\n function handleChange(e: React.ChangeEvent<HTMLInputElement>) {\n let value = e.target.value\n\n if (mask) {\n const module = MaskModule.getMask(Locale.BR, mask)\n if (module) value = module.format(value)\n }\n\n onChange?.(value)\n }\n\n return {\n inputRef,\n minLength,\n maxLength,\n showPassword,\n handleChange,\n handleRefMethods,\n togglePasswordVisibility\n }\n}\n","// Hooks\nimport { styled } from '@hooks/useThemedStyles/types'\n\n// Types\nimport type { InputProps } from './types'\n\nexport function createInputStyles(props: InputProps) {\n return styled({\n container: {\n width: '100%',\n\n display: 'flex',\n flexDirection: 'column',\n\n rowGap: '0.375rem'\n },\n wrapper: {\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n\n borderWidth: 1,\n columnGap: '0.25rem',\n borderRadius: '0.5rem',\n padding: '0.625rem 0.875rem',\n\n opacity: props.disabled ? 0.5 : 1,\n boxShadow: 'var(--px-shadow-default)',\n borderColor: props.errorMessage\n ? 'var(--px-color-error)'\n : 'var(--px-border-primary)',\n\n __rules: {\n '&:focus-within': {\n outlineOffset: '-1px',\n outline: `2px solid var(${props.errorMessage ? '--px-color-error' : '--px-color-primary'})`\n }\n }\n },\n\n input: {\n flex: 1,\n\n fontWeight: 500,\n fontSize: '1rem',\n lineHeight: '1.5rem',\n fontFamily: 'inherit',\n color: 'var(--px-text-primary)',\n\n __rules: {\n '&:disabled': {\n cursor: 'not-allowed'\n },\n\n '&:focus': {\n outline: 'none'\n },\n\n '&::placeholder': {\n fontWeight: 400,\n color: 'var(--px-text-secondary)'\n }\n }\n },\n\n button: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n\n cursor: 'pointer',\n padding: '0.25rem',\n borderRadius: '0.5rem',\n\n __rules: {\n '&:focus': {\n outline: '1px solid var(--px-border-primary)'\n }\n }\n }\n })\n}\n","/** biome-ignore-all lint/a11y/noAutofocus: It's a custom input component */\n// External Libraries\nimport { forwardRef, useId, useImperativeHandle, useMemo } from 'react'\n\n// Components\nimport { Label } from '../../toolkit/Label'\nimport { Icon } from '@components/commons/toolkit/Icon'\nimport { ErrorMessage } from '../../toolkit/ErrorMessage'\n\n// Types\nimport type { InputProps, InputMethods } from './types'\n\n// Hooks\nimport { useInput } from './hooks/useInput'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createInputStyles } from './styles'\n\nexport const Input = forwardRef<InputMethods, InputProps>((props, ref) => {\n // Constants\n const reactId = useId()\n const inputId = useMemo(() => {\n return props.id || `input-${reactId}`\n }, [props.id, reactId])\n\n // Hooks\n const {\n inputRef,\n minLength,\n maxLength,\n showPassword,\n handleChange,\n handleRefMethods,\n togglePasswordVisibility\n } = useInput(props)\n useImperativeHandle(ref, handleRefMethods)\n\n // Hooks\n const { styles, classes } = useThemedStyles(props, createInputStyles, {\n pick: p => [p.disabled, p.errorMessage],\n override: props.styles,\n applyCommonProps: true,\n commonSlot: 'container'\n })\n\n // Functions\n function getType() {\n if (props.type === 'password' && showPassword) return 'text'\n return props.type\n }\n\n function renderEndContent() {\n if (props.type === 'password') {\n return (\n <button\n type=\"button\"\n style={styles.button}\n className={classes.button}\n onClick={togglePasswordVisibility}\n >\n <Icon\n size=\"sm\"\n name={showPassword ? 'general-eye-off' : 'general-eye'}\n />\n </button>\n )\n }\n\n return props.endIcon ?? null\n }\n\n return (\n <div style={styles.container}>\n {props.hideLabel ? null : (\n <Label\n htmlFor={inputId}\n label={props.label}\n required={props.required}\n requiredColor={props.requiredColor}\n {...props.labelConfig}\n />\n )}\n\n <div style={styles.wrapper} className={classes.wrapper}>\n {props.startIcon}\n\n <input\n ref={inputRef}\n id={inputId}\n type={getType()}\n value={props.value}\n style={styles.input}\n minLength={minLength}\n maxLength={maxLength}\n required={props.required}\n disabled={props.disabled}\n className={classes.input}\n autoFocus={props.autoFocus}\n spellCheck={props.spellCheck}\n autoCorrect={props.autoCorrect}\n placeholder={props.placeholder}\n autoComplete={props.autoComplete}\n autoCapitalize={props.autoCapitalize}\n aria-label={!props.hideLabel ? undefined : props.label}\n onChange={handleChange}\n />\n\n {renderEndContent()}\n </div>\n\n {props.errorMessage ? (\n <ErrorMessage message={props.errorMessage} />\n ) : null}\n </div>\n )\n})\n\nInput.displayName = 'Input'\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select-Bvq9Xdgv.js","names":["value","Select: React.FC<SelectProps>"],"sources":["../src/components/commons/inputs/Select/components/OptionItem/styles.ts","../src/components/commons/inputs/Select/components/OptionItem/index.tsx","../src/hooks/useCompositeListNavigation/index.ts","../src/components/commons/inputs/Select/hooks/useSelect/index.ts","../src/components/commons/inputs/Select/styles.ts","../src/components/commons/inputs/Select/types.ts","../src/components/commons/inputs/Select/index.tsx"],"sourcesContent":["import type { OptionItemProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createOptionsStyles(\n props: OptionItemProps & { ['data-active']?: string }\n) {\n const { isSelected } = props\n const isActive = props['data-active'] === 'true'\n const highlighted = isSelected || isActive\n\n return styled({\n container: {\n width: '100%',\n\n display: 'flex',\n alignItems: 'center',\n textAlign: 'left',\n\n borderRadius: '0.25rem',\n padding: '0.5rem 0.75rem',\n\n cursor: 'pointer',\n transition: 'background-color 0.2s ease-out',\n\n backgroundColor: highlighted\n ? 'var(--px-background-card-hover)'\n : 'transparent',\n\n __rules: {\n '&:hover': {\n backgroundColor: 'var(--px-background-card-hover) !important'\n },\n\n '&:focus': {\n outlineOffset: '-1px',\n outline: '2px solid var(--px-color-primary)'\n }\n }\n },\n\n text: {\n flex: 1,\n\n fontSize: '1rem',\n fontWeight: 500,\n lineHeight: '1.5rem',\n fontFamily: 'inherit',\n color: 'var(--px-text-primary)',\n\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis'\n }\n })\n}\n","/** biome-ignore-all lint/a11y/useSemanticElements: It's a custom select component */\nimport type React from 'react'\nimport { forwardRef } from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { OptionItemProps } from './types'\n\n// Styles\nimport { createOptionsStyles } from './styles'\n\ntype NativeButtonProps = Omit<\n React.ComponentPropsWithoutRef<'button'>,\n 'onClick'\n>\n\nexport const OptionItem = forwardRef<\n HTMLButtonElement,\n OptionItemProps & NativeButtonProps\n>((props, ref) => {\n const { styles, classes } = useThemedStyles(props, createOptionsStyles)\n\n const { option, isSelected, onClick, ...rest } = props\n\n return (\n <button\n {...rest}\n ref={ref}\n type=\"button\"\n role=\"option\"\n style={styles.container}\n className={classes.container}\n aria-label={option.label}\n aria-selected={isSelected}\n onClick={() => onClick(option.value)}\n >\n <span style={styles.text}>{option.label}</span>\n </button>\n )\n})\n\nOptionItem.displayName = 'OptionItem'\n","// External Libraries\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nexport type CompositeItemMeta = {\n disabled?: boolean\n hasChildren?: boolean\n onActivate?: () => void\n onOpenChildren?: () => void\n onCloseChildren?: () => void\n}\n\ntype Params = {\n open: boolean\n itemCount: number\n initialIndex?: number\n onCloseByTab?: () => void\n setOpen: (v: boolean) => void\n makeMeta: (index: number) => CompositeItemMeta\n}\n\nfunction findNextEnabled(\n start: number,\n dir: 1 | -1,\n count: number,\n isDisabled: (i: number) => boolean\n) {\n if (count <= 0) return 0\n let i = start\n for (let step = 0; step < count; step++) {\n i = (i + dir + count) % count\n if (!isDisabled(i)) return i\n }\n return start\n}\n\nfunction findFirstEnabled(count: number, isDisabled: (i: number) => boolean) {\n for (let i = 0; i < count; i++) if (!isDisabled(i)) return i\n return 0\n}\n\nexport function useCompositeListNavigation({\n open,\n itemCount,\n initialIndex,\n setOpen,\n makeMeta,\n onCloseByTab\n}: Params) {\n const listRef = useRef<HTMLElement | null>(null)\n const itemRefs = useRef<Array<HTMLButtonElement | null>>([])\n\n const isDisabled = useCallback(\n (i: number) => !!makeMeta(i).disabled,\n [makeMeta]\n )\n\n const [activeIndex, setActiveIndex] = useState(0)\n\n const focusItem = useCallback((i: number) => {\n const el = itemRefs.current[i]\n if (!el) return\n el.focus({ preventScroll: true })\n el.scrollIntoView({ block: 'nearest' })\n }, [])\n\n const openAndFocus = useCallback(\n (index?: number) => {\n setOpen(true)\n\n const next =\n typeof index === 'number'\n ? index\n : typeof initialIndex === 'number'\n ? initialIndex\n : findFirstEnabled(itemCount, isDisabled)\n\n setActiveIndex(next)\n requestAnimationFrame(() => focusItem(next))\n },\n [focusItem, initialIndex, isDisabled, itemCount, setOpen]\n )\n\n useEffect(() => {\n if (!open) return\n requestAnimationFrame(() => focusItem(activeIndex))\n }, [open, activeIndex, focusItem])\n\n const move = useCallback(\n (dir: 1 | -1) => {\n const next = findNextEnabled(activeIndex, dir, itemCount, isDisabled)\n setActiveIndex(next)\n requestAnimationFrame(() => focusItem(next))\n },\n [activeIndex, itemCount, isDisabled, focusItem]\n )\n\n const activate = useCallback(() => {\n const meta = makeMeta(activeIndex)\n if (meta.disabled) return\n meta.onActivate?.()\n }, [activeIndex, makeMeta])\n\n const onListKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (!open) return\n\n switch (e.key) {\n case 'Tab': {\n // ✅ fecha e deixa o browser focar o próximo\n // (e NÃO restaura foco pro trigger)\n onCloseByTab?.()\n setOpen(false)\n return\n }\n\n case 'ArrowDown':\n e.preventDefault()\n move(+1)\n return\n\n case 'ArrowUp':\n e.preventDefault()\n move(-1)\n return\n\n case 'Home': {\n e.preventDefault()\n const first = findFirstEnabled(itemCount, isDisabled)\n setActiveIndex(first)\n requestAnimationFrame(() => focusItem(first))\n return\n }\n\n case 'End': {\n e.preventDefault()\n let last = itemCount - 1\n for (let i = itemCount - 1; i >= 0; i--) {\n if (!isDisabled(i)) {\n last = i\n break\n }\n }\n setActiveIndex(last)\n requestAnimationFrame(() => focusItem(last))\n return\n }\n\n case 'Enter':\n case ' ': {\n e.preventDefault()\n activate()\n return\n }\n\n case 'Escape':\n e.preventDefault()\n setOpen(false)\n return\n\n case 'ArrowRight': {\n e.preventDefault()\n const meta = makeMeta(activeIndex)\n if (meta.hasChildren) meta.onOpenChildren?.()\n return\n }\n\n case 'ArrowLeft': {\n e.preventDefault()\n const meta = makeMeta(activeIndex)\n meta.onCloseChildren?.()\n return\n }\n }\n },\n [\n open,\n itemCount,\n activeIndex,\n move,\n setOpen,\n activate,\n makeMeta,\n focusItem,\n isDisabled,\n onCloseByTab\n ]\n )\n\n const getTriggerProps = useCallback(() => {\n return {\n onKeyDown: (e: React.KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n e.preventDefault()\n if (!open) openAndFocus()\n return\n }\n\n if (e.key === 'ArrowUp') {\n e.preventDefault()\n if (!open) openAndFocus(itemCount > 0 ? itemCount - 1 : 0)\n }\n }\n }\n }, [open, openAndFocus, itemCount])\n\n const getListProps = useCallback(() => {\n return {\n ref: (el: HTMLElement | null) => {\n listRef.current = el\n },\n onKeyDown: onListKeyDown\n }\n }, [onListKeyDown])\n\n const getItemProps = useCallback(\n (index: number) => {\n const isActive = index === activeIndex\n return {\n ref: (el: HTMLButtonElement | null) => {\n itemRefs.current[index] = el\n },\n tabIndex: isActive ? 0 : -1,\n 'data-active': isActive ? 'true' : 'false'\n } as const\n },\n [activeIndex]\n )\n\n return {\n activeIndex,\n getListProps,\n getItemProps,\n openAndFocus,\n setActiveIndex,\n getTriggerProps\n }\n}\n","// External Libraries\nimport { useState } from 'react'\n\n// Types\nimport type { SelectProps } from '../../types'\nimport { useCompositeListNavigation } from '@hooks/useCompositeListNavigation'\n\nexport function useSelect({\n value,\n options,\n multiple,\n disabled,\n canClear,\n onChange\n}: SelectProps) {\n // States\n const [open, setOpen] = useState(false)\n\n // Hooks\n const nav = useCompositeListNavigation({\n open,\n itemCount: options.length,\n setOpen: changeOpen,\n makeMeta: makeMeta\n })\n\n // Functions\n function handleOptionClick(option: string) {\n const isAlreadySelected = value.includes(option)\n\n if (!multiple) {\n if (isAlreadySelected) {\n if (canClear) onChange([])\n } else onChange([option])\n\n setOpen(false)\n return\n }\n\n if (isAlreadySelected) {\n if (value.length === 1) {\n if (canClear) onChange([])\n } else onChange(value.filter(v => v !== option))\n } else onChange([...value, option])\n }\n\n function makeMeta(index: number) {\n const opt = options[index]\n return {\n onActivate: () => {\n if (opt) handleOptionClick(opt.value)\n }\n }\n }\n\n function changeOpen(value: boolean) {\n setOpen(value)\n }\n\n function togglePanel() {\n if (disabled) return\n if (!open) nav.openAndFocus()\n }\n\n function closePanel() {\n setOpen(false)\n }\n\n return {\n nav,\n open,\n makeMeta,\n changeOpen,\n togglePanel,\n closePanel,\n handleOptionClick\n }\n}\n","import { styled } from '@hooks/useThemedStyles/types'\nimport type { SelectProps } from './types'\n\nexport function createSelectStyles(props: SelectProps) {\n return styled({\n container: {\n width: '100%',\n\n display: 'flex',\n flexDirection: 'column',\n\n position: 'relative',\n\n rowGap: '0.375rem'\n },\n\n content: {\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n\n borderWidth: 1,\n columnGap: '0.25rem',\n borderRadius: '0.5rem',\n padding: '0.625rem 0.875rem',\n\n opacity: props.disabled ? 0.5 : 1,\n cursor: props.disabled ? 'not-allowed' : 'pointer',\n boxShadow: 'var(--px-shadow-default)',\n borderColor: props.errorMessage\n ? 'var(--px-color-error)'\n : 'var(--px-border-primary)',\n\n __rules: {\n '&:focus-within': {\n outlineOffset: '-1px !important',\n outline: `2px solid var(${props.errorMessage ? '--px-color-error' : '--px-color-primary'}) !important`\n }\n }\n },\n\n text: {\n flex: 1,\n\n textAlign: 'left',\n\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n\n fontSize: '1rem',\n lineHeight: '1.5rem',\n fontFamily: 'inherit',\n fontWeight: props.value.length ? 500 : 400,\n color: props.value.length\n ? 'var(--px-text-primary)'\n : 'var(--px-text-secondary)'\n },\n\n panel: {\n width: '100%'\n }\n })\n}\n","import type {\n StylesOf,\n TextProps,\n LayoutProps,\n MarginProps\n} from '@hooks/useThemedStyles/types'\nimport type { createSelectStyles } from './styles'\nimport type { FloatingOptions } from '@hooks/useFloating/types'\nimport type { PopoverProps } from '@components/commons/toolkit/Popover/types'\n\nexport interface SelectProps extends LayoutProps, MarginProps {\n label: string\n value: string[]\n placeholder?: string\n options: SelectOption[]\n\n portalId?: PopoverProps['portalId']\n strategy?: FloatingOptions['strategy']\n scrollContainerId?: FloatingOptions['scrollContainerId']\n absoluteReference?: FloatingOptions['absoluteReference']\n\n canClear?: boolean\n multiple?: boolean\n required?: boolean\n disabled?: boolean\n hideLabel?: boolean\n errorMessage?: string\n maxVisibleItems?: number\n\n startIcon?: React.ReactNode\n styles?: StylesOf<typeof createSelectStyles>\n\n requiredColor?: string\n labelConfig?: TextProps\n\n onChange: (value: string[]) => void\n}\n\nexport interface SelectOption {\n label: string\n value: string\n}\n","/** biome-ignore-all lint/a11y/useSemanticElements: It's a custom select component */\n// External Libraries\nimport type React from 'react'\nimport { useMemo } from 'react'\n\n// Components\nimport { OptionItem } from './components/OptionItem'\nimport { Icon } from '@components/commons/toolkit/Icon'\nimport { Label } from '@components/commons/toolkit/Label'\nimport { ErrorMessage } from '../../toolkit/ErrorMessage'\nimport { Typography } from '@components/commons/toolkit/Typography'\nimport { BasePopover } from '@components/commons/structure/BasePopover'\n\n// Hooks\nimport { useSelect } from './hooks/useSelect'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SelectProps } from './types'\nimport type { PopoverTriggerRenderProps } from '@components/commons/toolkit/Popover/types'\n\n// Styles\nimport { createSelectStyles } from './styles'\n\nexport * as SelectTypes from './types'\n\nexport const Select: React.FC<SelectProps> = props => {\n const { nav, open, changeOpen, handleOptionClick } = useSelect(props)\n const { styles, classes } = useThemedStyles(props, createSelectStyles, {\n pick: p => [p.disabled, p.errorMessage, p.value],\n override: props.styles,\n applyCommonProps: true,\n commonSlot: 'container'\n })\n\n const maxVisible = props.maxVisibleItems ?? Infinity\n const optionsMap = useMemo(\n () => new Map(props.options.map(option => [option.value, option.label])),\n [props.options]\n )\n\n // Functions\n function renderContent() {\n if (!props.value?.length) return props.placeholder\n\n const resolvedValues = props.value.map(val => optionsMap.get(val) ?? val)\n const visibleItems = resolvedValues.slice(0, maxVisible)\n const hiddenCount = resolvedValues.length - visibleItems.length\n\n let result = visibleItems.join(', ')\n if (hiddenCount > 0) result += ` +${hiddenCount}`\n return result\n }\n\n function renderTrigger({\n ref,\n ariaExpanded,\n onClick\n }: PopoverTriggerRenderProps) {\n const triggerKeyProps = nav.getTriggerProps()\n\n return (\n <button\n ref={ref as any}\n dir=\"ltr\"\n type=\"button\"\n role=\"combobox\"\n style={styles.content}\n aria-autocomplete=\"none\"\n aria-label={props.label}\n className={classes.content}\n aria-expanded={ariaExpanded}\n disabled={props.disabled}\n {...triggerKeyProps}\n onClick={onClick}\n >\n {props.value.length ? props.startIcon : null}\n\n <span id=\"text-content\" style={styles.text}>\n {renderContent()}\n </span>\n\n <Icon size=\"sm\" name=\"chevrons-down\" />\n </button>\n )\n }\n\n function renderOptions() {\n if (props.options.length === 0)\n return (\n <Typography variant=\"b2\" textAlign=\"center\">\n No options\n </Typography>\n )\n return props.options.map((option, idx) => (\n <OptionItem\n key={option.value}\n option={option}\n onClick={handleOptionClick}\n isSelected={props.value.includes(option.value)}\n {...nav.getItemProps(idx)}\n />\n ))\n }\n\n return (\n <div style={styles.container}>\n {props.hideLabel ? null : (\n <Label\n label={props.label}\n required={props.required}\n requiredColor={props.requiredColor}\n {...props.labelConfig}\n />\n )}\n\n <BasePopover\n open={open}\n portalId={props.portalId}\n absoluteReference={props.absoluteReference}\n floatingOptions={{\n viewportMargin: 0,\n strategy: props.strategy,\n scrollContainerId: props.scrollContainerId\n }}\n trigger={renderTrigger}\n onOpenChange={changeOpen}\n >\n <div style={styles.panel} role=\"listbox\" {...nav.getListProps()}>\n {renderOptions()}\n </div>\n </BasePopover>\n\n {props.errorMessage ? (\n <ErrorMessage message={props.errorMessage} />\n ) : null}\n </div>\n )\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Select-Bvq9Xdgv.js","names":["value","Select: React.FC<SelectProps>"],"sources":["../src/components/commons/inputs/Select/components/OptionItem/styles.ts","../src/components/commons/inputs/Select/components/OptionItem/index.tsx","../src/hooks/useCompositeListNavigation/index.ts","../src/components/commons/inputs/Select/hooks/useSelect/index.ts","../src/components/commons/inputs/Select/styles.ts","../src/components/commons/inputs/Select/types.ts","../src/components/commons/inputs/Select/index.tsx"],"sourcesContent":["import type { OptionItemProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createOptionsStyles(\n props: OptionItemProps & { ['data-active']?: string }\n) {\n const { isSelected } = props\n const isActive = props['data-active'] === 'true'\n const highlighted = isSelected || isActive\n\n return styled({\n container: {\n width: '100%',\n\n display: 'flex',\n alignItems: 'center',\n textAlign: 'left',\n\n borderRadius: '0.25rem',\n padding: '0.5rem 0.75rem',\n\n cursor: 'pointer',\n transition: 'background-color 0.2s ease-out',\n\n backgroundColor: highlighted\n ? 'var(--px-background-card-hover)'\n : 'transparent',\n\n __rules: {\n '&:hover': {\n backgroundColor: 'var(--px-background-card-hover) !important'\n },\n\n '&:focus': {\n outlineOffset: '-1px',\n outline: '2px solid var(--px-color-primary)'\n }\n }\n },\n\n text: {\n flex: 1,\n\n fontSize: '1rem',\n fontWeight: 500,\n lineHeight: '1.5rem',\n fontFamily: 'inherit',\n color: 'var(--px-text-primary)',\n\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis'\n }\n })\n}\n","/** biome-ignore-all lint/a11y/useSemanticElements: It's a custom select component */\nimport type React from 'react'\nimport { forwardRef } from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { OptionItemProps } from './types'\n\n// Styles\nimport { createOptionsStyles } from './styles'\n\ntype NativeButtonProps = Omit<\n React.ComponentPropsWithoutRef<'button'>,\n 'onClick'\n>\n\nexport const OptionItem = forwardRef<\n HTMLButtonElement,\n OptionItemProps & NativeButtonProps\n>((props, ref) => {\n const { styles, classes } = useThemedStyles(props, createOptionsStyles)\n\n const { option, isSelected, onClick, ...rest } = props\n\n return (\n <button\n {...rest}\n ref={ref}\n type=\"button\"\n role=\"option\"\n style={styles.container}\n className={classes.container}\n aria-label={option.label}\n aria-selected={isSelected}\n onClick={() => onClick(option.value)}\n >\n <span style={styles.text}>{option.label}</span>\n </button>\n )\n})\n\nOptionItem.displayName = 'OptionItem'\n","// External Libraries\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nexport type CompositeItemMeta = {\n disabled?: boolean\n hasChildren?: boolean\n onActivate?: () => void\n onOpenChildren?: () => void\n onCloseChildren?: () => void\n}\n\ntype Params = {\n open: boolean\n itemCount: number\n initialIndex?: number\n onCloseByTab?: () => void\n setOpen: (v: boolean) => void\n makeMeta: (index: number) => CompositeItemMeta\n}\n\nfunction findNextEnabled(\n start: number,\n dir: 1 | -1,\n count: number,\n isDisabled: (i: number) => boolean\n) {\n if (count <= 0) return 0\n let i = start\n for (let step = 0; step < count; step++) {\n i = (i + dir + count) % count\n if (!isDisabled(i)) return i\n }\n return start\n}\n\nfunction findFirstEnabled(count: number, isDisabled: (i: number) => boolean) {\n for (let i = 0; i < count; i++) if (!isDisabled(i)) return i\n return 0\n}\n\nexport function useCompositeListNavigation({\n open,\n itemCount,\n initialIndex,\n setOpen,\n makeMeta,\n onCloseByTab\n}: Params) {\n const listRef = useRef<HTMLElement | null>(null)\n const itemRefs = useRef<Array<HTMLButtonElement | null>>([])\n\n const isDisabled = useCallback(\n (i: number) => !!makeMeta(i).disabled,\n [makeMeta]\n )\n\n const [activeIndex, setActiveIndex] = useState(0)\n\n const focusItem = useCallback((i: number) => {\n const el = itemRefs.current[i]\n if (!el) return\n el.focus({ preventScroll: true })\n el.scrollIntoView({ block: 'nearest' })\n }, [])\n\n const openAndFocus = useCallback(\n (index?: number) => {\n setOpen(true)\n\n const next =\n typeof index === 'number'\n ? index\n : typeof initialIndex === 'number'\n ? initialIndex\n : findFirstEnabled(itemCount, isDisabled)\n\n setActiveIndex(next)\n requestAnimationFrame(() => focusItem(next))\n },\n [focusItem, initialIndex, isDisabled, itemCount, setOpen]\n )\n\n useEffect(() => {\n if (!open) return\n requestAnimationFrame(() => focusItem(activeIndex))\n }, [open, activeIndex, focusItem])\n\n const move = useCallback(\n (dir: 1 | -1) => {\n const next = findNextEnabled(activeIndex, dir, itemCount, isDisabled)\n setActiveIndex(next)\n requestAnimationFrame(() => focusItem(next))\n },\n [activeIndex, itemCount, isDisabled, focusItem]\n )\n\n const activate = useCallback(() => {\n const meta = makeMeta(activeIndex)\n if (meta.disabled) return\n meta.onActivate?.()\n }, [activeIndex, makeMeta])\n\n const onListKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (!open) return\n\n switch (e.key) {\n case 'Tab': {\n // ✅ fecha e deixa o browser focar o próximo\n // (e NÃO restaura foco pro trigger)\n onCloseByTab?.()\n setOpen(false)\n return\n }\n\n case 'ArrowDown':\n e.preventDefault()\n move(+1)\n return\n\n case 'ArrowUp':\n e.preventDefault()\n move(-1)\n return\n\n case 'Home': {\n e.preventDefault()\n const first = findFirstEnabled(itemCount, isDisabled)\n setActiveIndex(first)\n requestAnimationFrame(() => focusItem(first))\n return\n }\n\n case 'End': {\n e.preventDefault()\n let last = itemCount - 1\n for (let i = itemCount - 1; i >= 0; i--) {\n if (!isDisabled(i)) {\n last = i\n break\n }\n }\n setActiveIndex(last)\n requestAnimationFrame(() => focusItem(last))\n return\n }\n\n case 'Enter':\n case ' ': {\n e.preventDefault()\n activate()\n return\n }\n\n case 'Escape':\n e.preventDefault()\n setOpen(false)\n return\n\n case 'ArrowRight': {\n e.preventDefault()\n const meta = makeMeta(activeIndex)\n if (meta.hasChildren) meta.onOpenChildren?.()\n return\n }\n\n case 'ArrowLeft': {\n e.preventDefault()\n const meta = makeMeta(activeIndex)\n meta.onCloseChildren?.()\n return\n }\n }\n },\n [\n open,\n itemCount,\n activeIndex,\n move,\n setOpen,\n activate,\n makeMeta,\n focusItem,\n isDisabled,\n onCloseByTab\n ]\n )\n\n const getTriggerProps = useCallback(() => {\n return {\n onKeyDown: (e: React.KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n e.preventDefault()\n if (!open) openAndFocus()\n return\n }\n\n if (e.key === 'ArrowUp') {\n e.preventDefault()\n if (!open) openAndFocus(itemCount > 0 ? itemCount - 1 : 0)\n }\n }\n }\n }, [open, openAndFocus, itemCount])\n\n const getListProps = useCallback(() => {\n return {\n ref: (el: HTMLElement | null) => {\n listRef.current = el\n },\n onKeyDown: onListKeyDown\n }\n }, [onListKeyDown])\n\n const getItemProps = useCallback(\n (index: number) => {\n const isActive = index === activeIndex\n return {\n ref: (el: HTMLButtonElement | null) => {\n itemRefs.current[index] = el\n },\n tabIndex: isActive ? 0 : -1,\n 'data-active': isActive ? 'true' : 'false'\n } as const\n },\n [activeIndex]\n )\n\n return {\n activeIndex,\n getListProps,\n getItemProps,\n openAndFocus,\n setActiveIndex,\n getTriggerProps\n }\n}\n","// External Libraries\nimport { useState } from 'react'\n\n// Types\nimport type { SelectProps } from '../../types'\nimport { useCompositeListNavigation } from '@hooks/useCompositeListNavigation'\n\nexport function useSelect({\n value,\n options,\n multiple,\n disabled,\n canClear,\n onChange\n}: SelectProps) {\n // States\n const [open, setOpen] = useState(false)\n\n // Hooks\n const nav = useCompositeListNavigation({\n open,\n itemCount: options.length,\n setOpen: changeOpen,\n makeMeta: makeMeta\n })\n\n // Functions\n function handleOptionClick(option: string) {\n const isAlreadySelected = value.includes(option)\n\n if (!multiple) {\n if (isAlreadySelected) {\n if (canClear) onChange([])\n } else onChange([option])\n\n setOpen(false)\n return\n }\n\n if (isAlreadySelected) {\n if (value.length === 1) {\n if (canClear) onChange([])\n } else onChange(value.filter(v => v !== option))\n } else onChange([...value, option])\n }\n\n function makeMeta(index: number) {\n const opt = options[index]\n return {\n onActivate: () => {\n if (opt) handleOptionClick(opt.value)\n }\n }\n }\n\n function changeOpen(value: boolean) {\n setOpen(value)\n }\n\n function togglePanel() {\n if (disabled) return\n if (!open) nav.openAndFocus()\n }\n\n function closePanel() {\n setOpen(false)\n }\n\n return {\n nav,\n open,\n makeMeta,\n changeOpen,\n togglePanel,\n closePanel,\n handleOptionClick\n }\n}\n","import { styled } from '@hooks/useThemedStyles/types'\nimport type { SelectProps } from './types'\n\nexport function createSelectStyles(props: SelectProps) {\n return styled({\n container: {\n width: '100%',\n\n display: 'flex',\n flexDirection: 'column',\n\n position: 'relative',\n\n rowGap: '0.375rem'\n },\n\n content: {\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n\n borderWidth: 1,\n columnGap: '0.25rem',\n borderRadius: '0.5rem',\n padding: '0.625rem 0.875rem',\n\n opacity: props.disabled ? 0.5 : 1,\n cursor: props.disabled ? 'not-allowed' : 'pointer',\n boxShadow: 'var(--px-shadow-default)',\n borderColor: props.errorMessage\n ? 'var(--px-color-error)'\n : 'var(--px-border-primary)',\n\n __rules: {\n '&:focus-within': {\n outlineOffset: '-1px !important',\n outline: `2px solid var(${props.errorMessage ? '--px-color-error' : '--px-color-primary'}) !important`\n }\n }\n },\n\n text: {\n flex: 1,\n\n textAlign: 'left',\n\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n\n fontSize: '1rem',\n lineHeight: '1.5rem',\n fontFamily: 'inherit',\n fontWeight: props.value.length ? 500 : 400,\n color: props.value.length\n ? 'var(--px-text-primary)'\n : 'var(--px-text-secondary)'\n },\n\n panel: {\n width: '100%'\n }\n })\n}\n","import type {\n StylesOf,\n TextProps,\n LayoutProps,\n MarginProps\n} from '@hooks/useThemedStyles/types'\nimport type { createSelectStyles } from './styles'\nimport type { FloatingOptions } from '@hooks/useFloating/types'\nimport type { PopoverProps } from '@components/commons/toolkit/Popover/types'\n\nexport interface SelectProps extends LayoutProps, MarginProps {\n label: string\n value: string[]\n placeholder?: string\n options: SelectOption[]\n\n portalId?: PopoverProps['portalId']\n strategy?: FloatingOptions['strategy']\n scrollContainerId?: FloatingOptions['scrollContainerId']\n absoluteReference?: FloatingOptions['absoluteReference']\n\n canClear?: boolean\n multiple?: boolean\n required?: boolean\n disabled?: boolean\n hideLabel?: boolean\n errorMessage?: string\n maxVisibleItems?: number\n\n startIcon?: React.ReactNode\n styles?: StylesOf<typeof createSelectStyles>\n\n requiredColor?: string\n labelConfig?: TextProps\n\n onChange: (value: string[]) => void\n}\n\nexport interface SelectOption {\n label: string\n value: string\n}\n","/** biome-ignore-all lint/a11y/useSemanticElements: It's a custom select component */\n// External Libraries\nimport type React from 'react'\nimport { useMemo } from 'react'\n\n// Components\nimport { OptionItem } from './components/OptionItem'\nimport { Icon } from '@components/commons/toolkit/Icon'\nimport { Label } from '@components/commons/toolkit/Label'\nimport { ErrorMessage } from '../../toolkit/ErrorMessage'\nimport { Typography } from '@components/commons/toolkit/Typography'\nimport { BasePopover } from '@components/commons/structure/BasePopover'\n\n// Hooks\nimport { useSelect } from './hooks/useSelect'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SelectProps } from './types'\nimport type { PopoverTriggerRenderProps } from '@components/commons/toolkit/Popover/types'\n\n// Styles\nimport { createSelectStyles } from './styles'\n\nexport * as SelectTypes from './types'\n\nexport const Select: React.FC<SelectProps> = props => {\n const { nav, open, changeOpen, handleOptionClick } = useSelect(props)\n const { styles, classes } = useThemedStyles(props, createSelectStyles, {\n pick: p => [p.disabled, p.errorMessage, p.value],\n override: props.styles,\n applyCommonProps: true,\n commonSlot: 'container'\n })\n\n const maxVisible = props.maxVisibleItems ?? Infinity\n const optionsMap = useMemo(\n () => new Map(props.options.map(option => [option.value, option.label])),\n [props.options]\n )\n\n // Functions\n function renderContent() {\n if (!props.value?.length) return props.placeholder\n\n const resolvedValues = props.value.map(val => optionsMap.get(val) ?? val)\n const visibleItems = resolvedValues.slice(0, maxVisible)\n const hiddenCount = resolvedValues.length - visibleItems.length\n\n let result = visibleItems.join(', ')\n if (hiddenCount > 0) result += ` +${hiddenCount}`\n return result\n }\n\n function renderTrigger({\n ref,\n ariaExpanded,\n onClick\n }: PopoverTriggerRenderProps) {\n const triggerKeyProps = nav.getTriggerProps()\n\n return (\n <button\n ref={ref as any}\n dir=\"ltr\"\n type=\"button\"\n role=\"combobox\"\n style={styles.content}\n aria-autocomplete=\"none\"\n aria-label={props.label}\n className={classes.content}\n aria-expanded={ariaExpanded}\n disabled={props.disabled}\n {...triggerKeyProps}\n onClick={onClick}\n >\n {props.value.length ? props.startIcon : null}\n\n <span id=\"text-content\" style={styles.text}>\n {renderContent()}\n </span>\n\n <Icon size=\"sm\" name=\"chevrons-down\" />\n </button>\n )\n }\n\n function renderOptions() {\n if (props.options.length === 0) {\n return (\n <Typography variant=\"b2\" textAlign=\"center\">\n No options\n </Typography>\n )\n }\n\n return props.options.map((option, idx) => (\n <OptionItem\n key={option.value}\n option={option}\n onClick={handleOptionClick}\n isSelected={props.value.includes(option.value)}\n {...nav.getItemProps(idx)}\n />\n ))\n }\n\n return (\n <div style={styles.container}>\n {props.hideLabel ? null : (\n <Label\n label={props.label}\n required={props.required}\n requiredColor={props.requiredColor}\n {...props.labelConfig}\n />\n )}\n\n <BasePopover\n open={open}\n portalId={props.portalId}\n absoluteReference={props.absoluteReference}\n floatingOptions={{\n viewportMargin: 0,\n strategy: props.strategy,\n scrollContainerId: props.scrollContainerId\n }}\n trigger={renderTrigger}\n onOpenChange={changeOpen}\n >\n <div style={styles.panel} role=\"listbox\" {...nav.getListProps()}>\n {renderOptions()}\n </div>\n </BasePopover>\n\n {props.errorMessage ? (\n <ErrorMessage message={props.errorMessage} />\n ) : null}\n </div>\n )\n}\n"],"mappings":";;;;;;;;;AAGA,SAAgB,oBACd,OACA;CACA,MAAM,EAAE,eAAe;CACvB,MAAM,WAAW,MAAM,mBAAmB;AAG1C,QAAO,OAAO;EACZ,WAAW;GACT,OAAO;GAEP,SAAS;GACT,YAAY;GACZ,WAAW;GAEX,cAAc;GACd,SAAS;GAET,QAAQ;GACR,YAAY;GAEZ,iBAhBgB,cAAc,WAiB1B,oCACA;GAEJ,SAAS;IACP,WAAW,EACT,iBAAiB,8CAClB;IAED,WAAW;KACT,eAAe;KACf,SAAS;KACV;IACF;GACF;EAED,MAAM;GACJ,MAAM;GAEN,UAAU;GACV,YAAY;GACZ,YAAY;GACZ,YAAY;GACZ,OAAO;GAEP,UAAU;GACV,YAAY;GACZ,cAAc;GACf;EACF,CAAC;;;;;ACnCJ,MAAa,aAAa,YAGvB,OAAO,QAAQ;CAChB,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,oBAAoB;CAEvE,MAAM,EAAE,QAAQ,YAAY,SAAS,GAAG,SAAS;AAEjD,QACE,oBAAC;EACC,GAAI;EACC;EACL,MAAK;EACL,MAAK;EACL,OAAO,OAAO;EACd,WAAW,QAAQ;EACnB,cAAY,OAAO;EACnB,iBAAe;EACf,eAAe,QAAQ,OAAO,MAAM;YAEpC,oBAAC;GAAK,OAAO,OAAO;aAAO,OAAO;IAAa;GACxC;EAEX;AAEF,WAAW,cAAc;;;;ACvBzB,SAAS,gBACP,OACA,KACA,OACA,YACA;AACA,KAAI,SAAS,EAAG,QAAO;CACvB,IAAI,IAAI;AACR,MAAK,IAAI,OAAO,GAAG,OAAO,OAAO,QAAQ;AACvC,OAAK,IAAI,MAAM,SAAS;AACxB,MAAI,CAAC,WAAW,EAAE,CAAE,QAAO;;AAE7B,QAAO;;AAGT,SAAS,iBAAiB,OAAe,YAAoC;AAC3E,MAAK,IAAI,IAAI,GAAG,IAAI,OAAO,IAAK,KAAI,CAAC,WAAW,EAAE,CAAE,QAAO;AAC3D,QAAO;;AAGT,SAAgB,2BAA2B,EACzC,MACA,WACA,cACA,SACA,UACA,gBACS;CACT,MAAM,UAAU,OAA2B,KAAK;CAChD,MAAM,WAAW,OAAwC,EAAE,CAAC;CAE5D,MAAM,aAAa,aAChB,MAAc,CAAC,CAAC,SAAS,EAAE,CAAC,UAC7B,CAAC,SAAS,CACX;CAED,MAAM,CAAC,aAAa,kBAAkB,SAAS,EAAE;CAEjD,MAAM,YAAY,aAAa,MAAc;EAC3C,MAAM,KAAK,SAAS,QAAQ;AAC5B,MAAI,CAAC,GAAI;AACT,KAAG,MAAM,EAAE,eAAe,MAAM,CAAC;AACjC,KAAG,eAAe,EAAE,OAAO,WAAW,CAAC;IACtC,EAAE,CAAC;CAEN,MAAM,eAAe,aAClB,UAAmB;AAClB,UAAQ,KAAK;EAEb,MAAM,OACJ,OAAO,UAAU,WACb,QACA,OAAO,iBAAiB,WACtB,eACA,iBAAiB,WAAW,WAAW;AAE/C,iBAAe,KAAK;AACpB,8BAA4B,UAAU,KAAK,CAAC;IAE9C;EAAC;EAAW;EAAc;EAAY;EAAW;EAAQ,CAC1D;AAED,iBAAgB;AACd,MAAI,CAAC,KAAM;AACX,8BAA4B,UAAU,YAAY,CAAC;IAClD;EAAC;EAAM;EAAa;EAAU,CAAC;CAElC,MAAM,OAAO,aACV,QAAgB;EACf,MAAM,OAAO,gBAAgB,aAAa,KAAK,WAAW,WAAW;AACrE,iBAAe,KAAK;AACpB,8BAA4B,UAAU,KAAK,CAAC;IAE9C;EAAC;EAAa;EAAW;EAAY;EAAU,CAChD;CAED,MAAM,WAAW,kBAAkB;EACjC,MAAM,OAAO,SAAS,YAAY;AAClC,MAAI,KAAK,SAAU;AACnB,OAAK,cAAc;IAClB,CAAC,aAAa,SAAS,CAAC;CAE3B,MAAM,gBAAgB,aACnB,MAA2B;AAC1B,MAAI,CAAC,KAAM;AAEX,UAAQ,EAAE,KAAV;GACE,KAAK;AAGH,oBAAgB;AAChB,YAAQ,MAAM;AACd;GAGF,KAAK;AACH,MAAE,gBAAgB;AAClB,SAAK,EAAG;AACR;GAEF,KAAK;AACH,MAAE,gBAAgB;AAClB,SAAK,GAAG;AACR;GAEF,KAAK,QAAQ;AACX,MAAE,gBAAgB;IAClB,MAAM,QAAQ,iBAAiB,WAAW,WAAW;AACrD,mBAAe,MAAM;AACrB,gCAA4B,UAAU,MAAM,CAAC;AAC7C;;GAGF,KAAK,OAAO;AACV,MAAE,gBAAgB;IAClB,IAAI,OAAO,YAAY;AACvB,SAAK,IAAI,IAAI,YAAY,GAAG,KAAK,GAAG,IAClC,KAAI,CAAC,WAAW,EAAE,EAAE;AAClB,YAAO;AACP;;AAGJ,mBAAe,KAAK;AACpB,gCAA4B,UAAU,KAAK,CAAC;AAC5C;;GAGF,KAAK;GACL,KAAK;AACH,MAAE,gBAAgB;AAClB,cAAU;AACV;GAGF,KAAK;AACH,MAAE,gBAAgB;AAClB,YAAQ,MAAM;AACd;GAEF,KAAK,cAAc;AACjB,MAAE,gBAAgB;IAClB,MAAM,OAAO,SAAS,YAAY;AAClC,QAAI,KAAK,YAAa,MAAK,kBAAkB;AAC7C;;GAGF,KAAK;AACH,MAAE,gBAAgB;AAElB,IADa,SAAS,YAAY,CAC7B,mBAAmB;AACxB;;IAIN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAED,MAAM,kBAAkB,kBAAkB;AACxC,SAAO,EACL,YAAY,MAA2B;AACrC,OAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,OAAO,EAAE,QAAQ,aAAa;AAC/D,MAAE,gBAAgB;AAClB,QAAI,CAAC,KAAM,eAAc;AACzB;;AAGF,OAAI,EAAE,QAAQ,WAAW;AACvB,MAAE,gBAAgB;AAClB,QAAI,CAAC,KAAM,cAAa,YAAY,IAAI,YAAY,IAAI,EAAE;;KAG/D;IACA;EAAC;EAAM;EAAc;EAAU,CAAC;AAyBnC,QAAO;EACL;EACA,cAzBmB,kBAAkB;AACrC,UAAO;IACL,MAAM,OAA2B;AAC/B,aAAQ,UAAU;;IAEpB,WAAW;IACZ;KACA,CAAC,cAAc,CAAC;EAmBjB,cAjBmB,aAClB,UAAkB;GACjB,MAAM,WAAW,UAAU;AAC3B,UAAO;IACL,MAAM,OAAiC;AACrC,cAAS,QAAQ,SAAS;;IAE5B,UAAU,WAAW,IAAI;IACzB,eAAe,WAAW,SAAS;IACpC;KAEH,CAAC,YAAY,CACd;EAMC;EACA;EACA;EACD;;;;;ACpOH,SAAgB,UAAU,EACxB,OACA,SACA,UACA,UACA,UACA,YACc;CAEd,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;CAGvC,MAAM,MAAM,2BAA2B;EACrC;EACA,WAAW,QAAQ;EACnB,SAAS;EACC;EACX,CAAC;CAGF,SAAS,kBAAkB,QAAgB;EACzC,MAAM,oBAAoB,MAAM,SAAS,OAAO;AAEhD,MAAI,CAAC,UAAU;AACb,OAAI,mBACF;QAAI,SAAU,UAAS,EAAE,CAAC;SACrB,UAAS,CAAC,OAAO,CAAC;AAEzB,WAAQ,MAAM;AACd;;AAGF,MAAI,kBACF,KAAI,MAAM,WAAW,GACnB;OAAI,SAAU,UAAS,EAAE,CAAC;QACrB,UAAS,MAAM,QAAO,MAAK,MAAM,OAAO,CAAC;MAC3C,UAAS,CAAC,GAAG,OAAO,OAAO,CAAC;;CAGrC,SAAS,SAAS,OAAe;EAC/B,MAAM,MAAM,QAAQ;AACpB,SAAO,EACL,kBAAkB;AAChB,OAAI,IAAK,mBAAkB,IAAI,MAAM;KAExC;;CAGH,SAAS,WAAW,SAAgB;AAClC,UAAQA,QAAM;;CAGhB,SAAS,cAAc;AACrB,MAAI,SAAU;AACd,MAAI,CAAC,KAAM,KAAI,cAAc;;CAG/B,SAAS,aAAa;AACpB,UAAQ,MAAM;;AAGhB,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACD;;;;;ACzEH,SAAgB,mBAAmB,OAAoB;AACrD,QAAO,OAAO;EACZ,WAAW;GACT,OAAO;GAEP,SAAS;GACT,eAAe;GAEf,UAAU;GAEV,QAAQ;GACT;EAED,SAAS;GACP,OAAO;GACP,SAAS;GACT,YAAY;GACZ,gBAAgB;GAEhB,aAAa;GACb,WAAW;GACX,cAAc;GACd,SAAS;GAET,SAAS,MAAM,WAAW,KAAM;GAChC,QAAQ,MAAM,WAAW,gBAAgB;GACzC,WAAW;GACX,aAAa,MAAM,eACf,0BACA;GAEJ,SAAS,EACP,kBAAkB;IAChB,eAAe;IACf,SAAS,iBAAiB,MAAM,eAAe,qBAAqB,qBAAqB;IAC1F,EACF;GACF;EAED,MAAM;GACJ,MAAM;GAEN,WAAW;GAEX,UAAU;GACV,YAAY;GACZ,cAAc;GAEd,UAAU;GACV,YAAY;GACZ,YAAY;GACZ,YAAY,MAAM,MAAM,SAAS,MAAM;GACvC,OAAO,MAAM,MAAM,SACf,2BACA;GACL;EAED,OAAO,EACL,OAAO,QACR;EACF,CAAC;;;;;;;;;AErCJ,MAAaC,UAAgC,UAAS;CACpD,MAAM,EAAE,KAAK,MAAM,YAAY,sBAAsB,UAAU,MAAM;CACrE,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,oBAAoB;EACrE,OAAM,MAAK;GAAC,EAAE;GAAU,EAAE;GAAc,EAAE;GAAM;EAChD,UAAU,MAAM;EAChB,kBAAkB;EAClB,YAAY;EACb,CAAC;CAEF,MAAM,aAAa,MAAM,mBAAmB;CAC5C,MAAM,aAAa,cACX,IAAI,IAAI,MAAM,QAAQ,KAAI,WAAU,CAAC,OAAO,OAAO,OAAO,MAAM,CAAC,CAAC,EACxE,CAAC,MAAM,QAAQ,CAChB;CAGD,SAAS,gBAAgB;AACvB,MAAI,CAAC,MAAM,OAAO,OAAQ,QAAO,MAAM;EAEvC,MAAM,iBAAiB,MAAM,MAAM,KAAI,QAAO,WAAW,IAAI,IAAI,IAAI,IAAI;EACzE,MAAM,eAAe,eAAe,MAAM,GAAG,WAAW;EACxD,MAAM,cAAc,eAAe,SAAS,aAAa;EAEzD,IAAI,SAAS,aAAa,KAAK,KAAK;AACpC,MAAI,cAAc,EAAG,WAAU,KAAK;AACpC,SAAO;;CAGT,SAAS,cAAc,EACrB,KACA,cACA,WAC4B;EAC5B,MAAM,kBAAkB,IAAI,iBAAiB;AAE7C,SACE,qBAAC;GACM;GACL,KAAI;GACJ,MAAK;GACL,MAAK;GACL,OAAO,OAAO;GACd,qBAAkB;GAClB,cAAY,MAAM;GAClB,WAAW,QAAQ;GACnB,iBAAe;GACf,UAAU,MAAM;GAChB,GAAI;GACK;;IAER,MAAM,MAAM,SAAS,MAAM,YAAY;IAExC,oBAAC;KAAK,IAAG;KAAe,OAAO,OAAO;eACnC,eAAe;MACX;IAEP,oBAAC;KAAK,MAAK;KAAK,MAAK;MAAkB;;IAChC;;CAIb,SAAS,gBAAgB;AACvB,MAAI,MAAM,QAAQ,WAAW,EAC3B,QACE,oBAAC;GAAW,SAAQ;GAAK,WAAU;aAAS;IAE/B;AAIjB,SAAO,MAAM,QAAQ,KAAK,QAAQ,QAChC,oBAAC;GAES;GACR,SAAS;GACT,YAAY,MAAM,MAAM,SAAS,OAAO,MAAM;GAC9C,GAAI,IAAI,aAAa,IAAI;KAJpB,OAAO,MAKZ,CACF;;AAGJ,QACE,qBAAC;EAAI,OAAO,OAAO;;GAChB,MAAM,YAAY,OACjB,oBAAC;IACC,OAAO,MAAM;IACb,UAAU,MAAM;IAChB,eAAe,MAAM;IACrB,GAAI,MAAM;KACV;GAGJ,oBAAC;IACO;IACN,UAAU,MAAM;IAChB,mBAAmB,MAAM;IACzB,iBAAiB;KACf,gBAAgB;KAChB,UAAU,MAAM;KAChB,mBAAmB,MAAM;KAC1B;IACD,SAAS;IACT,cAAc;cAEd,oBAAC;KAAI,OAAO,OAAO;KAAO,MAAK;KAAU,GAAI,IAAI,cAAc;eAC5D,eAAe;MACZ;KACM;GAEb,MAAM,eACL,oBAAC,gBAAa,SAAS,MAAM,eAAgB,GAC3C;;GACA"}
|
package/dist/context-menu.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as types_d_exports, t as ContextMenu } from "./index-
|
|
1
|
+
import { n as types_d_exports, t as ContextMenu } from "./index-CFojep1-.js";
|
|
2
2
|
export { ContextMenu, types_d_exports as ContextMenuTypes };
|
|
@@ -2,7 +2,7 @@ import { a as TextProps, n as LayoutProps, r as MarginProps } from "./styleProps
|
|
|
2
2
|
import { r as StylesOf } from "./useThemedStyles-D0Wj8XM7.js";
|
|
3
3
|
import { r as MaskType } from "./index-Cs-WJgro.js";
|
|
4
4
|
import * as react0 from "react";
|
|
5
|
-
import { HTMLInputTypeAttribute, ReactNode } from "react";
|
|
5
|
+
import { HTMLInputTypeAttribute, InputHTMLAttributes, ReactNode } from "react";
|
|
6
6
|
|
|
7
7
|
//#region src/components/commons/inputs/Input/styles.d.ts
|
|
8
8
|
declare function createInputStyles(props: InputProps): {
|
|
@@ -79,6 +79,11 @@ interface InputProps extends LayoutProps, MarginProps {
|
|
|
79
79
|
maxLength?: number;
|
|
80
80
|
hideLabel?: boolean;
|
|
81
81
|
errorMessage?: string;
|
|
82
|
+
autoFocus?: boolean;
|
|
83
|
+
spellCheck?: boolean;
|
|
84
|
+
autoCorrect?: InputHTMLAttributes<HTMLInputElement>['autoCorrect'];
|
|
85
|
+
autoComplete?: InputHTMLAttributes<HTMLInputElement>['autoComplete'];
|
|
86
|
+
autoCapitalize?: InputHTMLAttributes<HTMLInputElement>['autoCapitalize'];
|
|
82
87
|
endIcon?: ReactNode;
|
|
83
88
|
startIcon?: ReactNode;
|
|
84
89
|
styles?: StylesOf<typeof createInputStyles>;
|
|
@@ -95,4 +100,4 @@ interface InputMethods {
|
|
|
95
100
|
declare const Input: react0.ForwardRefExoticComponent<InputProps & react0.RefAttributes<InputMethods>>;
|
|
96
101
|
//#endregion
|
|
97
102
|
export { Input as t };
|
|
98
|
-
//# sourceMappingURL=index-
|
|
103
|
+
//# sourceMappingURL=index-B9F6s4M6.d.ts.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { n as Placement } from "./types-ByiN1FkJ.js";
|
|
2
2
|
import { ReactNode } from "react";
|
|
3
|
-
import * as
|
|
3
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
4
4
|
|
|
5
5
|
//#region src/components/commons/toolkit/ContextMenu/styles.d.ts
|
|
6
6
|
declare function createContextMenuStyles<T>(_props: ContextMenuProps<T>): {
|
|
@@ -67,7 +67,7 @@ interface ContextMenuProps<T> {
|
|
|
67
67
|
}
|
|
68
68
|
//#endregion
|
|
69
69
|
//#region src/components/commons/toolkit/ContextMenu/index.d.ts
|
|
70
|
-
declare const ContextMenu: <T extends string>(props: ContextMenuProps<T>) =>
|
|
70
|
+
declare const ContextMenu: <T extends string>(props: ContextMenuProps<T>) => react_jsx_runtime0.JSX.Element;
|
|
71
71
|
//#endregion
|
|
72
72
|
export { types_d_exports as n, ContextMenu as t };
|
|
73
|
-
//# sourceMappingURL=index-
|
|
73
|
+
//# sourceMappingURL=index-CFojep1-.d.ts.map
|
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import "./types-X5cadzGX.js";
|
|
|
2
2
|
import { t as Button } from "./index-C4JS9PSn.js";
|
|
3
3
|
import { t as IconButton } from "./index-CfJRp6Z5.js";
|
|
4
4
|
import { n as Locale, r as MaskType, t as MaskModule } from "./index-Cs-WJgro.js";
|
|
5
|
-
import { t as Input } from "./index-
|
|
5
|
+
import { t as Input } from "./index-B9F6s4M6.js";
|
|
6
6
|
import { n as types_d_exports$3, t as Select } from "./index-d_2Cjz1T.js";
|
|
7
7
|
import { n as types_d_exports$2 } from "./types-mUSoybMc.js";
|
|
8
8
|
import { t as TextArea } from "./index-B7FPiP1T.js";
|
|
@@ -15,7 +15,7 @@ import { t as Checkbox } from "./index-CJHsyNfq.js";
|
|
|
15
15
|
import { r as types_d_exports } from "./types-gPgzbDxA.js";
|
|
16
16
|
import { Chip } from "./chip.js";
|
|
17
17
|
import { t as ChipList } from "./index-yD8AFwqR.js";
|
|
18
|
-
import { n as types_d_exports$1, t as ContextMenu } from "./index-
|
|
18
|
+
import { n as types_d_exports$1, t as ContextMenu } from "./index-CFojep1-.js";
|
|
19
19
|
import { InfoSummary, InfoSummaryItem, InfoSummaryProps } from "./info-summary.js";
|
|
20
20
|
import { t as Switch } from "./index-CzTlwSA6.js";
|
|
21
21
|
import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-zAekwBhQ.js";
|
package/dist/index.js
CHANGED
|
@@ -18,7 +18,7 @@ import { t as ChipList } from "./ChipList-oMddO6fO.js";
|
|
|
18
18
|
import { t as Button } from "./Button-BIvpHJtO.js";
|
|
19
19
|
import { t as IconButton } from "./IconButton-iiLQQcYQ.js";
|
|
20
20
|
import { n as MaskType, r as MaskModule, t as Locale } from "./MaskModule-Msq9W67y.js";
|
|
21
|
-
import { t as Input } from "./Input-
|
|
21
|
+
import { t as Input } from "./Input-hznFa6IM.js";
|
|
22
22
|
import { n as types_exports$3, t as Select } from "./Select-Bvq9Xdgv.js";
|
|
23
23
|
import { t as TextArea } from "./TextArea-CdJ_LEke.js";
|
|
24
24
|
import { t as Skeleton } from "./Skeleton-D0DopfRg.js";
|
package/dist/input.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as Input } from "./index-
|
|
1
|
+
import { t as Input } from "./index-B9F6s4M6.js";
|
|
2
2
|
export { Input };
|
package/dist/input.js
CHANGED
package/dist/typography.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { t as TypographyProps } from "./types-X5cadzGX.js";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime1 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/components/commons/toolkit/Typography/index.d.ts
|
|
5
|
-
declare function Typography(props: TypographyProps):
|
|
5
|
+
declare function Typography(props: TypographyProps): react_jsx_runtime1.JSX.Element;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { Typography };
|
|
8
8
|
//# sourceMappingURL=typography.d.ts.map
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Input-DD-ZOugU.js","names":[],"sources":["../src/components/commons/inputs/Input/hooks/useInput/index.ts","../src/components/commons/inputs/Input/styles.ts","../src/components/commons/inputs/Input/index.tsx"],"sourcesContent":["// External Libraries\nimport { useState, useRef, useMemo } from 'react'\n\n// Services\nimport { Locale, MaskModule } from 'src/services/MaskModule'\n\n// Types\nimport type { InputProps } from '../../types'\n\nexport function useInput({ mask, onChange, ...rest }: InputProps) {\n // Refs\n const inputRef = useRef<HTMLInputElement>(null)\n\n // States\n const [showPassword, setShowPassword] = useState(false)\n\n // Constants\n const { minLength, maxLength } = useMemo(() => {\n const appliedMask = mask ? MaskModule.getMask(Locale.BR, mask) : undefined\n\n const minLength = appliedMask\n ? appliedMask.minLength || rest.minLength\n : rest.minLength\n\n const maxLength = appliedMask\n ? appliedMask.maxLength || rest.maxLength\n : rest.maxLength\n\n return { minLength, maxLength }\n }, [mask, rest.minLength, rest.maxLength])\n\n // Functions\n function togglePasswordVisibility() {\n setShowPassword(prev => !prev)\n }\n\n function handleRefMethods() {\n return { focus: handleFocus, blur: handleBlur }\n }\n\n function handleFocus() {\n inputRef.current?.focus()\n }\n\n function handleBlur() {\n inputRef.current?.blur()\n }\n\n function handleChange(e: React.ChangeEvent<HTMLInputElement>) {\n let value = e.target.value\n\n if (mask) {\n const module = MaskModule.getMask(Locale.BR, mask)\n if (module) value = module.format(value)\n }\n\n onChange?.(value)\n }\n\n return {\n inputRef,\n minLength,\n maxLength,\n showPassword,\n handleChange,\n handleRefMethods,\n togglePasswordVisibility\n }\n}\n","// Hooks\nimport { styled } from '@hooks/useThemedStyles/types'\n\n// Types\nimport type { InputProps } from './types'\n\nexport function createInputStyles(props: InputProps) {\n return styled({\n container: {\n width: '100%',\n\n display: 'flex',\n flexDirection: 'column',\n\n rowGap: '0.375rem'\n },\n wrapper: {\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n\n borderWidth: 1,\n columnGap: '0.25rem',\n borderRadius: '0.5rem',\n padding: '0.625rem 0.875rem',\n\n opacity: props.disabled ? 0.5 : 1,\n boxShadow: 'var(--px-shadow-default)',\n borderColor: props.errorMessage\n ? 'var(--px-color-error)'\n : 'var(--px-border-primary)',\n\n __rules: {\n '&:focus-within': {\n outlineOffset: '-1px',\n outline: `2px solid var(${props.errorMessage ? '--px-color-error' : '--px-color-primary'})`\n }\n }\n },\n\n input: {\n flex: 1,\n\n fontWeight: 500,\n fontSize: '1rem',\n lineHeight: '1.5rem',\n fontFamily: 'inherit',\n color: 'var(--px-text-primary)',\n\n __rules: {\n '&:disabled': {\n cursor: 'not-allowed'\n },\n\n '&:focus': {\n outline: 'none'\n },\n\n '&::placeholder': {\n fontWeight: 400,\n color: 'var(--px-text-secondary)'\n }\n }\n },\n\n button: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n\n cursor: 'pointer',\n padding: '0.25rem',\n borderRadius: '0.5rem',\n\n __rules: {\n '&:focus': {\n outline: '1px solid var(--px-border-primary)'\n }\n }\n }\n })\n}\n","// External Libraries\nimport { forwardRef, useId, useImperativeHandle, useMemo } from 'react'\n\n// Components\nimport { Label } from '../../toolkit/Label'\nimport { Icon } from '@components/commons/toolkit/Icon'\nimport { ErrorMessage } from '../../toolkit/ErrorMessage'\n\n// Types\nimport type { InputProps, InputMethods } from './types'\n\n// Hooks\nimport { useInput } from './hooks/useInput'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createInputStyles } from './styles'\n\nexport const Input = forwardRef<InputMethods, InputProps>((props, ref) => {\n // Constants\n const reactId = useId()\n const inputId = useMemo(() => {\n return props.id || `input-${reactId}`\n }, [props.id, reactId])\n\n // Hooks\n const {\n inputRef,\n minLength,\n maxLength,\n showPassword,\n handleChange,\n handleRefMethods,\n togglePasswordVisibility\n } = useInput(props)\n useImperativeHandle(ref, handleRefMethods)\n\n // Hooks\n const { styles, classes } = useThemedStyles(props, createInputStyles, {\n pick: p => [p.disabled, p.errorMessage],\n override: props.styles,\n applyCommonProps: true,\n commonSlot: 'container'\n })\n\n // Functions\n function getType() {\n if (props.type === 'password' && showPassword) return 'text'\n return props.type\n }\n\n function renderEndContent() {\n if (props.type === 'password') {\n return (\n <button\n type=\"button\"\n style={styles.button}\n className={classes.button}\n onClick={togglePasswordVisibility}\n >\n <Icon\n size=\"sm\"\n name={showPassword ? 'general-eye-off' : 'general-eye'}\n />\n </button>\n )\n }\n\n return props.endIcon ?? null\n }\n\n return (\n <div style={styles.container}>\n {props.hideLabel ? null : (\n <Label\n htmlFor={inputId}\n label={props.label}\n required={props.required}\n requiredColor={props.requiredColor}\n {...props.labelConfig}\n />\n )}\n\n <div style={styles.wrapper} className={classes.wrapper}>\n {props.startIcon}\n\n <input\n ref={inputRef}\n id={inputId}\n type={getType()}\n value={props.value}\n style={styles.input}\n minLength={minLength}\n maxLength={maxLength}\n required={props.required}\n disabled={props.disabled}\n className={classes.input}\n placeholder={props.placeholder}\n aria-label={!props.hideLabel ? undefined : props.label}\n onChange={handleChange}\n />\n\n {renderEndContent()}\n </div>\n\n {props.errorMessage ? (\n <ErrorMessage message={props.errorMessage} />\n ) : null}\n </div>\n )\n})\n\nInput.displayName = 'Input'\n"],"mappings":"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"}
|