@dxos/react-input 0.8.4-main.d05673bc65 → 0.8.4-main.e00bdcdb52
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/lib/browser/index.mjs +1 -1
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +1 -1
- package/dist/lib/node-esm/index.mjs.map +3 -3
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/Root.d.ts +4 -4
- package/dist/types/src/Root.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/PinInput.tsx +1 -1
|
@@ -228,7 +228,7 @@ var PinInput = /* @__PURE__ */ forwardRef2(({ __inputScope, className, disabled,
|
|
|
228
228
|
},
|
|
229
229
|
...props,
|
|
230
230
|
pattern,
|
|
231
|
-
className: "
|
|
231
|
+
className: "dx-fullscreen opacity-0",
|
|
232
232
|
style: {
|
|
233
233
|
caretColor: "transparent",
|
|
234
234
|
...props.style
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/InputMeta.tsx", "../../../src/Root.tsx", "../../../src/PinInput.tsx", "../../../src/TextInput.tsx", "../../../src/TextArea.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './Root';\n\ntype LabelProps = ComponentPropsWithRef<typeof Primitive.label> & { asChild?: boolean };\n\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<LabelProps>, forwardedRef) => {\n const { id } = useInputContext(INPUT_NAME, __inputScope);\n const Comp = asChild ? Slot : Primitive.label;\n return (\n <Comp {...props} htmlFor={id} ref={forwardedRef}>\n {children}\n </Comp>\n );\n },\n);\n\ntype DescriptionProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst Description = forwardRef<HTMLSpanElement, DescriptionProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<DescriptionProps>, forwardedRef) => {\n const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);\n const Comp = asChild ? Slot : Primitive.span;\n return (\n <Comp {...props} {...(validationValence === 'error' && { id: descriptionId })} ref={forwardedRef}>\n {children}\n </Comp>\n );\n },\n);\n\ntype ErrorMessageProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst ErrorMessage = forwardRef<HTMLSpanElement, ErrorMessageProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<ErrorMessageProps>, forwardedRef) => {\n const { errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n const Comp = asChild ? Slot : Primitive.span;\n return (\n <Comp {...props} id={errorMessageId} ref={forwardedRef}>\n {children}\n </Comp>\n );\n },\n);\n\ntype ValidationProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst Validation = forwardRef<HTMLSpanElement, ValidationProps>(\n (props: InputScopedProps<ValidationProps>, forwardedRef) => {\n const { __inputScope, asChild, children, ...otherProps } = props;\n const { validationValence } = useInputContext(INPUT_NAME, __inputScope);\n if (validationValence === 'error') {\n return <ErrorMessage {...props} ref={forwardedRef} />;\n } else {\n const Comp = asChild ? Slot : Primitive.span;\n return (\n <Comp {...otherProps} ref={forwardedRef}>\n {children}\n </Comp>\n );\n }\n },\n);\n\ntype DescriptionAndValidationProps = ComponentPropsWithRef<typeof Primitive.p> & { asChild?: boolean };\n\nconst DescriptionAndValidation = forwardRef<HTMLParagraphElement, DescriptionAndValidationProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<DescriptionAndValidationProps>, forwardedRef) => {\n const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);\n const Comp = asChild ? Slot : Primitive.p;\n return (\n <Comp {...props} {...(validationValence !== 'error' && { id: descriptionId })} ref={forwardedRef}>\n {children}\n </Comp>\n );\n },\n);\n\nexport { Label, Validation, Description, DescriptionAndValidation, ErrorMessage };\n\nexport type { LabelProps, ValidationProps, DescriptionProps, DescriptionAndValidationProps, ErrorMessageProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Scope, createContextScope } from '@radix-ui/react-context';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { useId } from '@dxos/react-hooks';\n\nconst INPUT_NAME = 'Input';\n\ntype Valence = 'success' | 'info' | 'warning' | 'error' | 'neutral';\n\ntype InputScopedProps<P> = P & { __inputScope?: Scope };\n\ntype InputRootProps = PropsWithChildren<{\n id?: string;\n validationValence?: Valence;\n descriptionId?: string;\n errorMessageId?: string;\n}>;\n\nconst [createInputContext, createInputScope] = createContextScope(INPUT_NAME, []);\n\ntype InputContextValue = {\n id: string;\n descriptionId: string;\n errorMessageId: string;\n validationValence: Valence;\n};\n\nconst [InputProvider, useInputContext] = createInputContext<InputContextValue>(INPUT_NAME);\n\nconst InputRoot = ({\n __inputScope,\n id: propsId,\n descriptionId: propsDescriptionId,\n errorMessageId: propsErrorMessageId,\n validationValence = 'neutral',\n children,\n}: InputScopedProps<InputRootProps>) => {\n const id = useId('input', propsId);\n const descriptionId = useId('input__description', propsDescriptionId);\n const errorMessageId = useId('input__error-message', propsErrorMessageId);\n return (\n <InputProvider {...{ id, descriptionId, errorMessageId, validationValence }} scope={__inputScope}>\n {children}\n </InputProvider>\n );\n};\n\nInputRoot.displayName = INPUT_NAME;\n\nexport { InputRoot, createInputScope, useInputContext, INPUT_NAME };\n\nexport type { Valence, InputRootProps, InputScopedProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport React, {\n type ChangeEvent,\n type ClipboardEvent,\n type ComponentPropsWithRef,\n type KeyboardEvent,\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from 'react';\n\nimport { useForwardedRef, useIsFocused } from '@dxos/react-hooks';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './Root';\n\ntype PinInputProps = Omit<ComponentPropsWithRef<'input'>, 'type' | 'maxLength'> & {\n /** Class name applied to each segment div. */\n segmentClassName?: string;\n /** Number of code segments. */\n length?: number;\n};\n\nconst PinInput = forwardRef<HTMLInputElement, PinInputProps>(\n (\n {\n __inputScope,\n className,\n disabled,\n segmentClassName,\n length = 6,\n pattern,\n value: controlledValue,\n onChange,\n onPaste,\n ...props\n }: InputScopedProps<PinInputProps>,\n forwardedRef,\n ) => {\n const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n const inputRef = useForwardedRef(forwardedRef);\n const inputFocused = useIsFocused(inputRef);\n const [internalValue, setInternalValue] = useState('');\n const [cursorPosition, setCursorPosition] = useState(0);\n\n const value = controlledValue != null ? String(controlledValue) : internalValue;\n\n // Derive a per-character filter from the `pattern` prop (e.g., `\\\\d*` → test each char against `\\\\d`).\n const charPattern = useMemo(() => {\n if (!pattern) {\n return undefined;\n }\n try {\n // Strip quantifiers (*, +, {n}) to get the base character class.\n const base = pattern.replace(/[*+?]$|\\{\\d+,?\\d*\\}$/g, '');\n return new RegExp(`^${base}$`);\n } catch {\n return undefined;\n }\n }, [pattern]);\n\n /** Filter a string to only characters matching the pattern. */\n const filterValue = useCallback(\n (input: string) => {\n if (!charPattern) {\n return input;\n }\n return input\n .split('')\n .filter((char) => charPattern.test(char))\n .join('');\n },\n [charPattern],\n );\n\n // Sync cursor position from the hidden input's selection.\n const syncCursor = useCallback(() => {\n const pos = inputRef.current?.selectionStart ?? value.length;\n setCursorPosition(Math.min(pos, value.length));\n }, [inputRef, value.length]);\n\n // Keep cursor in sync after value changes.\n useEffect(() => {\n setCursorPosition((prev) => Math.min(prev, value.length));\n }, [value.length]);\n\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const newValue = filterValue(event.target.value).slice(0, length);\n if (controlledValue == null) {\n setInternalValue(newValue);\n }\n setCursorPosition(event.target.selectionStart ?? newValue.length);\n onChange?.(event);\n },\n [length, controlledValue, onChange, filterValue],\n );\n\n const handlePaste = useCallback(\n (event: ClipboardEvent<HTMLInputElement>) => {\n onPaste?.(event);\n if (event.defaultPrevented) {\n return;\n }\n event.preventDefault();\n const pasted = filterValue(event.clipboardData.getData('text/plain')).slice(0, length);\n const input = inputRef.current;\n if (!input) {\n return;\n }\n // Use native setter to trigger React's synthetic onChange.\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;\n nativeInputValueSetter?.call(input, pasted);\n input.dispatchEvent(new Event('input', { bubbles: true }));\n },\n [length, inputRef, onPaste, filterValue],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n // Let the native input handle cursor movement, then sync.\n requestAnimationFrame(syncCursor);\n } else if (event.key === 'Backspace' && value.length === 0) {\n event.preventDefault();\n } else if (event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) {\n // Reject characters that don't match the allow pattern.\n if (charPattern && !charPattern.test(event.key)) {\n event.preventDefault();\n props.onKeyDown?.(event);\n return;\n }\n // Overwrite mode: replace character at cursor position instead of inserting.\n const input = inputRef.current;\n const pos = input?.selectionStart ?? value.length;\n if (pos < value.length && input) {\n event.preventDefault();\n const newValue = value.slice(0, pos) + event.key + value.slice(pos + 1);\n const newPos = Math.min(pos + 1, length);\n // Update state and cursor synchronously to avoid flicker.\n if (controlledValue == null) {\n setInternalValue(newValue);\n }\n setCursorPosition(newPos);\n // Sync the native input to match.\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;\n nativeInputValueSetter?.call(input, newValue);\n input.setSelectionRange(newPos, newPos);\n // Notify consumer via onChange with a synthetic-like event.\n onChange?.({ target: input, currentTarget: input } as ChangeEvent<HTMLInputElement>);\n }\n }\n props.onKeyDown?.(event);\n },\n [value, length, props.onKeyDown, syncCursor, inputRef, charPattern, controlledValue, onChange],\n );\n\n const handleSelect = useCallback(() => {\n syncCursor();\n }, [syncCursor]);\n\n const activeIndex = Math.min(cursorPosition, value.length < length ? value.length : length - 1);\n\n return (\n <div className={`relative inline-flex items-center gap-2 ${className ?? ''}`}>\n <input\n ref={inputRef}\n id={id}\n type='text'\n value={value}\n onChange={handleChange}\n onPaste={handlePaste}\n onKeyDown={handleKeyDown}\n onSelect={handleSelect}\n maxLength={length}\n disabled={disabled}\n spellCheck={false}\n aria-describedby={descriptionId}\n {...(validationValence === 'error' && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId,\n })}\n {...props}\n pattern={pattern}\n className='absolute inset-0 opacity-0 w-full h-full'\n style={{\n caretColor: 'transparent',\n ...props.style,\n }}\n />\n {Array.from({ length }, (_, index) => {\n const char = value[index] || '\\u00A0';\n const isCursor = !!(inputFocused && index === activeIndex);\n return (\n <div key={index} className={segmentClassName} {...(isCursor && { 'data-focused': '' })} aria-hidden='true'>\n {char}\n </div>\n );\n })}\n </div>\n );\n },\n);\n\nexport { PinInput };\n\nexport type { PinInputProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { Primitive } from '@radix-ui/react-primitive';\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './Root';\n\ntype TextInputProps = Omit<ComponentPropsWithRef<typeof Primitive.input>, 'id'>;\n\nconst TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n ({ __inputScope, ...props }: InputScopedProps<TextInputProps>, forwardedRef) => {\n const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n return (\n <Primitive.input\n {...{\n ...props,\n id,\n 'aria-describedby': descriptionId,\n ...(validationValence === 'error' && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId,\n }),\n ref: forwardedRef,\n }}\n />\n );\n },\n);\n\nexport { TextInput };\n\nexport type { TextInputProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './Root';\n\ntype TextAreaProps = Omit<ComponentPropsWithRef<'textarea'>, 'id'>;\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n ({ __inputScope, ...props }: InputScopedProps<TextAreaProps>, forwardedRef) => {\n const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n return (\n <textarea\n {...{\n ...props,\n id,\n 'aria-describedby': descriptionId,\n ...(validationValence === 'error' && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId,\n }),\n ref: forwardedRef,\n }}\n />\n );\n },\n);\n\nexport { TextArea };\n\nexport type { TextAreaProps };\n"],
|
|
5
|
-
"mappings": ";AAIA,SAASA,iBAAiB;AAC1B,SAASC,YAAY;AACrB,OAAOC,UAAqCC,kBAAkB;;;ACF9D,SAAqBC,0BAA0B;AAC/C,OAAOC,WAAuC;AAE9C,SAASC,aAAa;AAEtB,IAAMC,aAAa;AAanB,IAAM,CAACC,oBAAoBC,gBAAAA,
|
|
6
|
-
"names": ["Primitive", "Slot", "React", "forwardRef", "createContextScope", "React", "useId", "INPUT_NAME", "createInputContext", "createInputScope", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './Root';\n\ntype LabelProps = ComponentPropsWithRef<typeof Primitive.label> & { asChild?: boolean };\n\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<LabelProps>, forwardedRef) => {\n const { id } = useInputContext(INPUT_NAME, __inputScope);\n const Comp = asChild ? Slot : Primitive.label;\n return (\n <Comp {...props} htmlFor={id} ref={forwardedRef}>\n {children}\n </Comp>\n );\n },\n);\n\ntype DescriptionProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst Description = forwardRef<HTMLSpanElement, DescriptionProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<DescriptionProps>, forwardedRef) => {\n const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);\n const Comp = asChild ? Slot : Primitive.span;\n return (\n <Comp {...props} {...(validationValence === 'error' && { id: descriptionId })} ref={forwardedRef}>\n {children}\n </Comp>\n );\n },\n);\n\ntype ErrorMessageProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst ErrorMessage = forwardRef<HTMLSpanElement, ErrorMessageProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<ErrorMessageProps>, forwardedRef) => {\n const { errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n const Comp = asChild ? Slot : Primitive.span;\n return (\n <Comp {...props} id={errorMessageId} ref={forwardedRef}>\n {children}\n </Comp>\n );\n },\n);\n\ntype ValidationProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst Validation = forwardRef<HTMLSpanElement, ValidationProps>(\n (props: InputScopedProps<ValidationProps>, forwardedRef) => {\n const { __inputScope, asChild, children, ...otherProps } = props;\n const { validationValence } = useInputContext(INPUT_NAME, __inputScope);\n if (validationValence === 'error') {\n return <ErrorMessage {...props} ref={forwardedRef} />;\n } else {\n const Comp = asChild ? Slot : Primitive.span;\n return (\n <Comp {...otherProps} ref={forwardedRef}>\n {children}\n </Comp>\n );\n }\n },\n);\n\ntype DescriptionAndValidationProps = ComponentPropsWithRef<typeof Primitive.p> & { asChild?: boolean };\n\nconst DescriptionAndValidation = forwardRef<HTMLParagraphElement, DescriptionAndValidationProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<DescriptionAndValidationProps>, forwardedRef) => {\n const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);\n const Comp = asChild ? Slot : Primitive.p;\n return (\n <Comp {...props} {...(validationValence !== 'error' && { id: descriptionId })} ref={forwardedRef}>\n {children}\n </Comp>\n );\n },\n);\n\nexport { Label, Validation, Description, DescriptionAndValidation, ErrorMessage };\n\nexport type { LabelProps, ValidationProps, DescriptionProps, DescriptionAndValidationProps, ErrorMessageProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Scope, createContextScope } from '@radix-ui/react-context';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { useId } from '@dxos/react-hooks';\n\nconst INPUT_NAME = 'Input';\n\ntype Valence = 'success' | 'info' | 'warning' | 'error' | 'neutral';\n\ntype InputScopedProps<P> = P & { __inputScope?: Scope };\n\ntype InputRootProps = PropsWithChildren<{\n id?: string;\n validationValence?: Valence;\n descriptionId?: string;\n errorMessageId?: string;\n}>;\n\nconst [createInputContext, createInputScope] = createContextScope(INPUT_NAME, []);\n\ntype InputContextValue = {\n id: string;\n descriptionId: string;\n errorMessageId: string;\n validationValence: Valence;\n};\n\nconst [InputProvider, useInputContext] = createInputContext<InputContextValue>(INPUT_NAME);\n\nconst InputRoot = ({\n __inputScope,\n id: propsId,\n descriptionId: propsDescriptionId,\n errorMessageId: propsErrorMessageId,\n validationValence = 'neutral',\n children,\n}: InputScopedProps<InputRootProps>) => {\n const id = useId('input', propsId);\n const descriptionId = useId('input__description', propsDescriptionId);\n const errorMessageId = useId('input__error-message', propsErrorMessageId);\n return (\n <InputProvider {...{ id, descriptionId, errorMessageId, validationValence }} scope={__inputScope}>\n {children}\n </InputProvider>\n );\n};\n\nInputRoot.displayName = INPUT_NAME;\n\nexport { InputRoot, createInputScope, useInputContext, INPUT_NAME };\n\nexport type { Valence, InputRootProps, InputScopedProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport React, {\n type ChangeEvent,\n type ClipboardEvent,\n type ComponentPropsWithRef,\n type KeyboardEvent,\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from 'react';\n\nimport { useForwardedRef, useIsFocused } from '@dxos/react-hooks';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './Root';\n\ntype PinInputProps = Omit<ComponentPropsWithRef<'input'>, 'type' | 'maxLength'> & {\n /** Class name applied to each segment div. */\n segmentClassName?: string;\n /** Number of code segments. */\n length?: number;\n};\n\nconst PinInput = forwardRef<HTMLInputElement, PinInputProps>(\n (\n {\n __inputScope,\n className,\n disabled,\n segmentClassName,\n length = 6,\n pattern,\n value: controlledValue,\n onChange,\n onPaste,\n ...props\n }: InputScopedProps<PinInputProps>,\n forwardedRef,\n ) => {\n const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n const inputRef = useForwardedRef(forwardedRef);\n const inputFocused = useIsFocused(inputRef);\n const [internalValue, setInternalValue] = useState('');\n const [cursorPosition, setCursorPosition] = useState(0);\n\n const value = controlledValue != null ? String(controlledValue) : internalValue;\n\n // Derive a per-character filter from the `pattern` prop (e.g., `\\\\d*` → test each char against `\\\\d`).\n const charPattern = useMemo(() => {\n if (!pattern) {\n return undefined;\n }\n try {\n // Strip quantifiers (*, +, {n}) to get the base character class.\n const base = pattern.replace(/[*+?]$|\\{\\d+,?\\d*\\}$/g, '');\n return new RegExp(`^${base}$`);\n } catch {\n return undefined;\n }\n }, [pattern]);\n\n /** Filter a string to only characters matching the pattern. */\n const filterValue = useCallback(\n (input: string) => {\n if (!charPattern) {\n return input;\n }\n return input\n .split('')\n .filter((char) => charPattern.test(char))\n .join('');\n },\n [charPattern],\n );\n\n // Sync cursor position from the hidden input's selection.\n const syncCursor = useCallback(() => {\n const pos = inputRef.current?.selectionStart ?? value.length;\n setCursorPosition(Math.min(pos, value.length));\n }, [inputRef, value.length]);\n\n // Keep cursor in sync after value changes.\n useEffect(() => {\n setCursorPosition((prev) => Math.min(prev, value.length));\n }, [value.length]);\n\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const newValue = filterValue(event.target.value).slice(0, length);\n if (controlledValue == null) {\n setInternalValue(newValue);\n }\n setCursorPosition(event.target.selectionStart ?? newValue.length);\n onChange?.(event);\n },\n [length, controlledValue, onChange, filterValue],\n );\n\n const handlePaste = useCallback(\n (event: ClipboardEvent<HTMLInputElement>) => {\n onPaste?.(event);\n if (event.defaultPrevented) {\n return;\n }\n event.preventDefault();\n const pasted = filterValue(event.clipboardData.getData('text/plain')).slice(0, length);\n const input = inputRef.current;\n if (!input) {\n return;\n }\n // Use native setter to trigger React's synthetic onChange.\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;\n nativeInputValueSetter?.call(input, pasted);\n input.dispatchEvent(new Event('input', { bubbles: true }));\n },\n [length, inputRef, onPaste, filterValue],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n // Let the native input handle cursor movement, then sync.\n requestAnimationFrame(syncCursor);\n } else if (event.key === 'Backspace' && value.length === 0) {\n event.preventDefault();\n } else if (event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) {\n // Reject characters that don't match the allow pattern.\n if (charPattern && !charPattern.test(event.key)) {\n event.preventDefault();\n props.onKeyDown?.(event);\n return;\n }\n // Overwrite mode: replace character at cursor position instead of inserting.\n const input = inputRef.current;\n const pos = input?.selectionStart ?? value.length;\n if (pos < value.length && input) {\n event.preventDefault();\n const newValue = value.slice(0, pos) + event.key + value.slice(pos + 1);\n const newPos = Math.min(pos + 1, length);\n // Update state and cursor synchronously to avoid flicker.\n if (controlledValue == null) {\n setInternalValue(newValue);\n }\n setCursorPosition(newPos);\n // Sync the native input to match.\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;\n nativeInputValueSetter?.call(input, newValue);\n input.setSelectionRange(newPos, newPos);\n // Notify consumer via onChange with a synthetic-like event.\n onChange?.({ target: input, currentTarget: input } as ChangeEvent<HTMLInputElement>);\n }\n }\n props.onKeyDown?.(event);\n },\n [value, length, props.onKeyDown, syncCursor, inputRef, charPattern, controlledValue, onChange],\n );\n\n const handleSelect = useCallback(() => {\n syncCursor();\n }, [syncCursor]);\n\n const activeIndex = Math.min(cursorPosition, value.length < length ? value.length : length - 1);\n\n return (\n <div className={`relative inline-flex items-center gap-2 ${className ?? ''}`}>\n <input\n ref={inputRef}\n id={id}\n type='text'\n value={value}\n onChange={handleChange}\n onPaste={handlePaste}\n onKeyDown={handleKeyDown}\n onSelect={handleSelect}\n maxLength={length}\n disabled={disabled}\n spellCheck={false}\n aria-describedby={descriptionId}\n {...(validationValence === 'error' && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId,\n })}\n {...props}\n pattern={pattern}\n className='dx-fullscreen opacity-0'\n style={{\n caretColor: 'transparent',\n ...props.style,\n }}\n />\n {Array.from({ length }, (_, index) => {\n const char = value[index] || '\\u00A0';\n const isCursor = !!(inputFocused && index === activeIndex);\n return (\n <div key={index} className={segmentClassName} {...(isCursor && { 'data-focused': '' })} aria-hidden='true'>\n {char}\n </div>\n );\n })}\n </div>\n );\n },\n);\n\nexport { PinInput };\n\nexport type { PinInputProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { Primitive } from '@radix-ui/react-primitive';\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './Root';\n\ntype TextInputProps = Omit<ComponentPropsWithRef<typeof Primitive.input>, 'id'>;\n\nconst TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n ({ __inputScope, ...props }: InputScopedProps<TextInputProps>, forwardedRef) => {\n const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n return (\n <Primitive.input\n {...{\n ...props,\n id,\n 'aria-describedby': descriptionId,\n ...(validationValence === 'error' && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId,\n }),\n ref: forwardedRef,\n }}\n />\n );\n },\n);\n\nexport { TextInput };\n\nexport type { TextInputProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './Root';\n\ntype TextAreaProps = Omit<ComponentPropsWithRef<'textarea'>, 'id'>;\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n ({ __inputScope, ...props }: InputScopedProps<TextAreaProps>, forwardedRef) => {\n const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n return (\n <textarea\n {...{\n ...props,\n id,\n 'aria-describedby': descriptionId,\n ...(validationValence === 'error' && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId,\n }),\n ref: forwardedRef,\n }}\n />\n );\n },\n);\n\nexport { TextArea };\n\nexport type { TextAreaProps };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Primitive", "Slot", "React", "forwardRef", "createContextScope", "React", "useId", "INPUT_NAME", "createInputContext", "createInputScope", "InputProvider", "useInputContext", "InputRoot", "__inputScope", "id", "propsId", "descriptionId", "propsDescriptionId", "errorMessageId", "propsErrorMessageId", "validationValence", "children", "scope", "displayName", "Label", "forwardRef", "__inputScope", "asChild", "children", "props", "forwardedRef", "id", "useInputContext", "INPUT_NAME", "Comp", "Slot", "Primitive", "label", "React", "htmlFor", "ref", "Description", "descriptionId", "validationValence", "span", "ErrorMessage", "errorMessageId", "Validation", "otherProps", "DescriptionAndValidation", "p", "React", "forwardRef", "useCallback", "useEffect", "useMemo", "useState", "useForwardedRef", "useIsFocused", "PinInput", "forwardRef", "__inputScope", "className", "disabled", "segmentClassName", "length", "pattern", "value", "controlledValue", "onChange", "onPaste", "props", "forwardedRef", "id", "validationValence", "descriptionId", "errorMessageId", "useInputContext", "INPUT_NAME", "inputRef", "useForwardedRef", "inputFocused", "useIsFocused", "internalValue", "setInternalValue", "useState", "cursorPosition", "setCursorPosition", "String", "charPattern", "useMemo", "undefined", "base", "replace", "RegExp", "filterValue", "useCallback", "input", "split", "filter", "char", "test", "join", "syncCursor", "pos", "current", "selectionStart", "Math", "min", "useEffect", "prev", "handleChange", "event", "newValue", "target", "slice", "handlePaste", "defaultPrevented", "preventDefault", "pasted", "clipboardData", "getData", "nativeInputValueSetter", "Object", "getOwnPropertyDescriptor", "HTMLInputElement", "prototype", "set", "call", "dispatchEvent", "Event", "bubbles", "handleKeyDown", "key", "requestAnimationFrame", "metaKey", "ctrlKey", "altKey", "onKeyDown", "newPos", "setSelectionRange", "currentTarget", "handleSelect", "activeIndex", "React", "div", "ref", "type", "onSelect", "maxLength", "spellCheck", "aria-describedby", "style", "caretColor", "Array", "from", "_", "index", "isCursor", "aria-hidden", "Primitive", "React", "forwardRef", "TextInput", "forwardRef", "__inputScope", "props", "forwardedRef", "id", "validationValence", "descriptionId", "errorMessageId", "useInputContext", "INPUT_NAME", "React", "Primitive", "input", "ref", "React", "forwardRef", "TextArea", "forwardRef", "__inputScope", "props", "forwardedRef", "id", "validationValence", "descriptionId", "errorMessageId", "useInputContext", "INPUT_NAME", "React", "textarea", "ref"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/Root.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"src/Root.tsx":{"bytes":4510,"imports":[{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true}],"format":"esm"},"src/InputMeta.tsx":{"bytes":9992,"imports":[{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"src/PinInput.tsx":{"bytes":23950,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"src/TextInput.tsx":{"bytes":3107,"imports":[{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"src/TextArea.tsx":{"bytes":2873,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"src/index.ts":{"bytes":726,"imports":[{"path":"src/InputMeta.tsx","kind":"import-statement","original":"./InputMeta"},{"path":"src/Root.tsx","kind":"import-statement","original":"./Root"},{"path":"src/PinInput.tsx","kind":"import-statement","original":"./PinInput"},{"path":"src/TextInput.tsx","kind":"import-statement","original":"./TextInput"},{"path":"src/TextArea.tsx","kind":"import-statement","original":"./TextArea"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":23680},"dist/lib/browser/index.mjs":{"imports":[{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["Description","DescriptionAndValidation","ErrorMessage","INPUT_NAME","InputRoot","Label","PinInput","TextArea","TextInput","Validation","createInputScope","useInputContext"],"entryPoint":"src/index.ts","inputs":{"src/InputMeta.tsx":{"bytesInOutput":2282},"src/Root.tsx":{"bytesInOutput":875},"src/index.ts":{"bytesInOutput":0},"src/PinInput.tsx":{"bytesInOutput":5220},"src/TextInput.tsx":{"bytesInOutput":610},"src/TextArea.tsx":{"bytesInOutput":534}},"bytes":9876}}}
|
|
@@ -230,7 +230,7 @@ var PinInput = /* @__PURE__ */ forwardRef2(({ __inputScope, className, disabled,
|
|
|
230
230
|
},
|
|
231
231
|
...props,
|
|
232
232
|
pattern,
|
|
233
|
-
className: "
|
|
233
|
+
className: "dx-fullscreen opacity-0",
|
|
234
234
|
style: {
|
|
235
235
|
caretColor: "transparent",
|
|
236
236
|
...props.style
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/InputMeta.tsx", "../../../src/Root.tsx", "../../../src/PinInput.tsx", "../../../src/TextInput.tsx", "../../../src/TextArea.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './Root';\n\ntype LabelProps = ComponentPropsWithRef<typeof Primitive.label> & { asChild?: boolean };\n\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<LabelProps>, forwardedRef) => {\n const { id } = useInputContext(INPUT_NAME, __inputScope);\n const Comp = asChild ? Slot : Primitive.label;\n return (\n <Comp {...props} htmlFor={id} ref={forwardedRef}>\n {children}\n </Comp>\n );\n },\n);\n\ntype DescriptionProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst Description = forwardRef<HTMLSpanElement, DescriptionProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<DescriptionProps>, forwardedRef) => {\n const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);\n const Comp = asChild ? Slot : Primitive.span;\n return (\n <Comp {...props} {...(validationValence === 'error' && { id: descriptionId })} ref={forwardedRef}>\n {children}\n </Comp>\n );\n },\n);\n\ntype ErrorMessageProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst ErrorMessage = forwardRef<HTMLSpanElement, ErrorMessageProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<ErrorMessageProps>, forwardedRef) => {\n const { errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n const Comp = asChild ? Slot : Primitive.span;\n return (\n <Comp {...props} id={errorMessageId} ref={forwardedRef}>\n {children}\n </Comp>\n );\n },\n);\n\ntype ValidationProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst Validation = forwardRef<HTMLSpanElement, ValidationProps>(\n (props: InputScopedProps<ValidationProps>, forwardedRef) => {\n const { __inputScope, asChild, children, ...otherProps } = props;\n const { validationValence } = useInputContext(INPUT_NAME, __inputScope);\n if (validationValence === 'error') {\n return <ErrorMessage {...props} ref={forwardedRef} />;\n } else {\n const Comp = asChild ? Slot : Primitive.span;\n return (\n <Comp {...otherProps} ref={forwardedRef}>\n {children}\n </Comp>\n );\n }\n },\n);\n\ntype DescriptionAndValidationProps = ComponentPropsWithRef<typeof Primitive.p> & { asChild?: boolean };\n\nconst DescriptionAndValidation = forwardRef<HTMLParagraphElement, DescriptionAndValidationProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<DescriptionAndValidationProps>, forwardedRef) => {\n const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);\n const Comp = asChild ? Slot : Primitive.p;\n return (\n <Comp {...props} {...(validationValence !== 'error' && { id: descriptionId })} ref={forwardedRef}>\n {children}\n </Comp>\n );\n },\n);\n\nexport { Label, Validation, Description, DescriptionAndValidation, ErrorMessage };\n\nexport type { LabelProps, ValidationProps, DescriptionProps, DescriptionAndValidationProps, ErrorMessageProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Scope, createContextScope } from '@radix-ui/react-context';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { useId } from '@dxos/react-hooks';\n\nconst INPUT_NAME = 'Input';\n\ntype Valence = 'success' | 'info' | 'warning' | 'error' | 'neutral';\n\ntype InputScopedProps<P> = P & { __inputScope?: Scope };\n\ntype InputRootProps = PropsWithChildren<{\n id?: string;\n validationValence?: Valence;\n descriptionId?: string;\n errorMessageId?: string;\n}>;\n\nconst [createInputContext, createInputScope] = createContextScope(INPUT_NAME, []);\n\ntype InputContextValue = {\n id: string;\n descriptionId: string;\n errorMessageId: string;\n validationValence: Valence;\n};\n\nconst [InputProvider, useInputContext] = createInputContext<InputContextValue>(INPUT_NAME);\n\nconst InputRoot = ({\n __inputScope,\n id: propsId,\n descriptionId: propsDescriptionId,\n errorMessageId: propsErrorMessageId,\n validationValence = 'neutral',\n children,\n}: InputScopedProps<InputRootProps>) => {\n const id = useId('input', propsId);\n const descriptionId = useId('input__description', propsDescriptionId);\n const errorMessageId = useId('input__error-message', propsErrorMessageId);\n return (\n <InputProvider {...{ id, descriptionId, errorMessageId, validationValence }} scope={__inputScope}>\n {children}\n </InputProvider>\n );\n};\n\nInputRoot.displayName = INPUT_NAME;\n\nexport { InputRoot, createInputScope, useInputContext, INPUT_NAME };\n\nexport type { Valence, InputRootProps, InputScopedProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport React, {\n type ChangeEvent,\n type ClipboardEvent,\n type ComponentPropsWithRef,\n type KeyboardEvent,\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from 'react';\n\nimport { useForwardedRef, useIsFocused } from '@dxos/react-hooks';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './Root';\n\ntype PinInputProps = Omit<ComponentPropsWithRef<'input'>, 'type' | 'maxLength'> & {\n /** Class name applied to each segment div. */\n segmentClassName?: string;\n /** Number of code segments. */\n length?: number;\n};\n\nconst PinInput = forwardRef<HTMLInputElement, PinInputProps>(\n (\n {\n __inputScope,\n className,\n disabled,\n segmentClassName,\n length = 6,\n pattern,\n value: controlledValue,\n onChange,\n onPaste,\n ...props\n }: InputScopedProps<PinInputProps>,\n forwardedRef,\n ) => {\n const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n const inputRef = useForwardedRef(forwardedRef);\n const inputFocused = useIsFocused(inputRef);\n const [internalValue, setInternalValue] = useState('');\n const [cursorPosition, setCursorPosition] = useState(0);\n\n const value = controlledValue != null ? String(controlledValue) : internalValue;\n\n // Derive a per-character filter from the `pattern` prop (e.g., `\\\\d*` → test each char against `\\\\d`).\n const charPattern = useMemo(() => {\n if (!pattern) {\n return undefined;\n }\n try {\n // Strip quantifiers (*, +, {n}) to get the base character class.\n const base = pattern.replace(/[*+?]$|\\{\\d+,?\\d*\\}$/g, '');\n return new RegExp(`^${base}$`);\n } catch {\n return undefined;\n }\n }, [pattern]);\n\n /** Filter a string to only characters matching the pattern. */\n const filterValue = useCallback(\n (input: string) => {\n if (!charPattern) {\n return input;\n }\n return input\n .split('')\n .filter((char) => charPattern.test(char))\n .join('');\n },\n [charPattern],\n );\n\n // Sync cursor position from the hidden input's selection.\n const syncCursor = useCallback(() => {\n const pos = inputRef.current?.selectionStart ?? value.length;\n setCursorPosition(Math.min(pos, value.length));\n }, [inputRef, value.length]);\n\n // Keep cursor in sync after value changes.\n useEffect(() => {\n setCursorPosition((prev) => Math.min(prev, value.length));\n }, [value.length]);\n\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const newValue = filterValue(event.target.value).slice(0, length);\n if (controlledValue == null) {\n setInternalValue(newValue);\n }\n setCursorPosition(event.target.selectionStart ?? newValue.length);\n onChange?.(event);\n },\n [length, controlledValue, onChange, filterValue],\n );\n\n const handlePaste = useCallback(\n (event: ClipboardEvent<HTMLInputElement>) => {\n onPaste?.(event);\n if (event.defaultPrevented) {\n return;\n }\n event.preventDefault();\n const pasted = filterValue(event.clipboardData.getData('text/plain')).slice(0, length);\n const input = inputRef.current;\n if (!input) {\n return;\n }\n // Use native setter to trigger React's synthetic onChange.\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;\n nativeInputValueSetter?.call(input, pasted);\n input.dispatchEvent(new Event('input', { bubbles: true }));\n },\n [length, inputRef, onPaste, filterValue],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n // Let the native input handle cursor movement, then sync.\n requestAnimationFrame(syncCursor);\n } else if (event.key === 'Backspace' && value.length === 0) {\n event.preventDefault();\n } else if (event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) {\n // Reject characters that don't match the allow pattern.\n if (charPattern && !charPattern.test(event.key)) {\n event.preventDefault();\n props.onKeyDown?.(event);\n return;\n }\n // Overwrite mode: replace character at cursor position instead of inserting.\n const input = inputRef.current;\n const pos = input?.selectionStart ?? value.length;\n if (pos < value.length && input) {\n event.preventDefault();\n const newValue = value.slice(0, pos) + event.key + value.slice(pos + 1);\n const newPos = Math.min(pos + 1, length);\n // Update state and cursor synchronously to avoid flicker.\n if (controlledValue == null) {\n setInternalValue(newValue);\n }\n setCursorPosition(newPos);\n // Sync the native input to match.\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;\n nativeInputValueSetter?.call(input, newValue);\n input.setSelectionRange(newPos, newPos);\n // Notify consumer via onChange with a synthetic-like event.\n onChange?.({ target: input, currentTarget: input } as ChangeEvent<HTMLInputElement>);\n }\n }\n props.onKeyDown?.(event);\n },\n [value, length, props.onKeyDown, syncCursor, inputRef, charPattern, controlledValue, onChange],\n );\n\n const handleSelect = useCallback(() => {\n syncCursor();\n }, [syncCursor]);\n\n const activeIndex = Math.min(cursorPosition, value.length < length ? value.length : length - 1);\n\n return (\n <div className={`relative inline-flex items-center gap-2 ${className ?? ''}`}>\n <input\n ref={inputRef}\n id={id}\n type='text'\n value={value}\n onChange={handleChange}\n onPaste={handlePaste}\n onKeyDown={handleKeyDown}\n onSelect={handleSelect}\n maxLength={length}\n disabled={disabled}\n spellCheck={false}\n aria-describedby={descriptionId}\n {...(validationValence === 'error' && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId,\n })}\n {...props}\n pattern={pattern}\n className='absolute inset-0 opacity-0 w-full h-full'\n style={{\n caretColor: 'transparent',\n ...props.style,\n }}\n />\n {Array.from({ length }, (_, index) => {\n const char = value[index] || '\\u00A0';\n const isCursor = !!(inputFocused && index === activeIndex);\n return (\n <div key={index} className={segmentClassName} {...(isCursor && { 'data-focused': '' })} aria-hidden='true'>\n {char}\n </div>\n );\n })}\n </div>\n );\n },\n);\n\nexport { PinInput };\n\nexport type { PinInputProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { Primitive } from '@radix-ui/react-primitive';\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './Root';\n\ntype TextInputProps = Omit<ComponentPropsWithRef<typeof Primitive.input>, 'id'>;\n\nconst TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n ({ __inputScope, ...props }: InputScopedProps<TextInputProps>, forwardedRef) => {\n const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n return (\n <Primitive.input\n {...{\n ...props,\n id,\n 'aria-describedby': descriptionId,\n ...(validationValence === 'error' && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId,\n }),\n ref: forwardedRef,\n }}\n />\n );\n },\n);\n\nexport { TextInput };\n\nexport type { TextInputProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './Root';\n\ntype TextAreaProps = Omit<ComponentPropsWithRef<'textarea'>, 'id'>;\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n ({ __inputScope, ...props }: InputScopedProps<TextAreaProps>, forwardedRef) => {\n const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n return (\n <textarea\n {...{\n ...props,\n id,\n 'aria-describedby': descriptionId,\n ...(validationValence === 'error' && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId,\n }),\n ref: forwardedRef,\n }}\n />\n );\n },\n);\n\nexport { TextArea };\n\nexport type { TextAreaProps };\n"],
|
|
5
|
-
"mappings": ";;;AAIA,SAASA,iBAAiB;AAC1B,SAASC,YAAY;AACrB,OAAOC,UAAqCC,kBAAkB;;;ACF9D,SAAqBC,0BAA0B;AAC/C,OAAOC,WAAuC;AAE9C,SAASC,aAAa;AAEtB,IAAMC,aAAa;AAanB,IAAM,CAACC,oBAAoBC,gBAAAA,
|
|
6
|
-
"names": ["Primitive", "Slot", "React", "forwardRef", "createContextScope", "React", "useId", "INPUT_NAME", "createInputContext", "createInputScope", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './Root';\n\ntype LabelProps = ComponentPropsWithRef<typeof Primitive.label> & { asChild?: boolean };\n\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<LabelProps>, forwardedRef) => {\n const { id } = useInputContext(INPUT_NAME, __inputScope);\n const Comp = asChild ? Slot : Primitive.label;\n return (\n <Comp {...props} htmlFor={id} ref={forwardedRef}>\n {children}\n </Comp>\n );\n },\n);\n\ntype DescriptionProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst Description = forwardRef<HTMLSpanElement, DescriptionProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<DescriptionProps>, forwardedRef) => {\n const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);\n const Comp = asChild ? Slot : Primitive.span;\n return (\n <Comp {...props} {...(validationValence === 'error' && { id: descriptionId })} ref={forwardedRef}>\n {children}\n </Comp>\n );\n },\n);\n\ntype ErrorMessageProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst ErrorMessage = forwardRef<HTMLSpanElement, ErrorMessageProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<ErrorMessageProps>, forwardedRef) => {\n const { errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n const Comp = asChild ? Slot : Primitive.span;\n return (\n <Comp {...props} id={errorMessageId} ref={forwardedRef}>\n {children}\n </Comp>\n );\n },\n);\n\ntype ValidationProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst Validation = forwardRef<HTMLSpanElement, ValidationProps>(\n (props: InputScopedProps<ValidationProps>, forwardedRef) => {\n const { __inputScope, asChild, children, ...otherProps } = props;\n const { validationValence } = useInputContext(INPUT_NAME, __inputScope);\n if (validationValence === 'error') {\n return <ErrorMessage {...props} ref={forwardedRef} />;\n } else {\n const Comp = asChild ? Slot : Primitive.span;\n return (\n <Comp {...otherProps} ref={forwardedRef}>\n {children}\n </Comp>\n );\n }\n },\n);\n\ntype DescriptionAndValidationProps = ComponentPropsWithRef<typeof Primitive.p> & { asChild?: boolean };\n\nconst DescriptionAndValidation = forwardRef<HTMLParagraphElement, DescriptionAndValidationProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<DescriptionAndValidationProps>, forwardedRef) => {\n const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);\n const Comp = asChild ? Slot : Primitive.p;\n return (\n <Comp {...props} {...(validationValence !== 'error' && { id: descriptionId })} ref={forwardedRef}>\n {children}\n </Comp>\n );\n },\n);\n\nexport { Label, Validation, Description, DescriptionAndValidation, ErrorMessage };\n\nexport type { LabelProps, ValidationProps, DescriptionProps, DescriptionAndValidationProps, ErrorMessageProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Scope, createContextScope } from '@radix-ui/react-context';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { useId } from '@dxos/react-hooks';\n\nconst INPUT_NAME = 'Input';\n\ntype Valence = 'success' | 'info' | 'warning' | 'error' | 'neutral';\n\ntype InputScopedProps<P> = P & { __inputScope?: Scope };\n\ntype InputRootProps = PropsWithChildren<{\n id?: string;\n validationValence?: Valence;\n descriptionId?: string;\n errorMessageId?: string;\n}>;\n\nconst [createInputContext, createInputScope] = createContextScope(INPUT_NAME, []);\n\ntype InputContextValue = {\n id: string;\n descriptionId: string;\n errorMessageId: string;\n validationValence: Valence;\n};\n\nconst [InputProvider, useInputContext] = createInputContext<InputContextValue>(INPUT_NAME);\n\nconst InputRoot = ({\n __inputScope,\n id: propsId,\n descriptionId: propsDescriptionId,\n errorMessageId: propsErrorMessageId,\n validationValence = 'neutral',\n children,\n}: InputScopedProps<InputRootProps>) => {\n const id = useId('input', propsId);\n const descriptionId = useId('input__description', propsDescriptionId);\n const errorMessageId = useId('input__error-message', propsErrorMessageId);\n return (\n <InputProvider {...{ id, descriptionId, errorMessageId, validationValence }} scope={__inputScope}>\n {children}\n </InputProvider>\n );\n};\n\nInputRoot.displayName = INPUT_NAME;\n\nexport { InputRoot, createInputScope, useInputContext, INPUT_NAME };\n\nexport type { Valence, InputRootProps, InputScopedProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport React, {\n type ChangeEvent,\n type ClipboardEvent,\n type ComponentPropsWithRef,\n type KeyboardEvent,\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from 'react';\n\nimport { useForwardedRef, useIsFocused } from '@dxos/react-hooks';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './Root';\n\ntype PinInputProps = Omit<ComponentPropsWithRef<'input'>, 'type' | 'maxLength'> & {\n /** Class name applied to each segment div. */\n segmentClassName?: string;\n /** Number of code segments. */\n length?: number;\n};\n\nconst PinInput = forwardRef<HTMLInputElement, PinInputProps>(\n (\n {\n __inputScope,\n className,\n disabled,\n segmentClassName,\n length = 6,\n pattern,\n value: controlledValue,\n onChange,\n onPaste,\n ...props\n }: InputScopedProps<PinInputProps>,\n forwardedRef,\n ) => {\n const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n const inputRef = useForwardedRef(forwardedRef);\n const inputFocused = useIsFocused(inputRef);\n const [internalValue, setInternalValue] = useState('');\n const [cursorPosition, setCursorPosition] = useState(0);\n\n const value = controlledValue != null ? String(controlledValue) : internalValue;\n\n // Derive a per-character filter from the `pattern` prop (e.g., `\\\\d*` → test each char against `\\\\d`).\n const charPattern = useMemo(() => {\n if (!pattern) {\n return undefined;\n }\n try {\n // Strip quantifiers (*, +, {n}) to get the base character class.\n const base = pattern.replace(/[*+?]$|\\{\\d+,?\\d*\\}$/g, '');\n return new RegExp(`^${base}$`);\n } catch {\n return undefined;\n }\n }, [pattern]);\n\n /** Filter a string to only characters matching the pattern. */\n const filterValue = useCallback(\n (input: string) => {\n if (!charPattern) {\n return input;\n }\n return input\n .split('')\n .filter((char) => charPattern.test(char))\n .join('');\n },\n [charPattern],\n );\n\n // Sync cursor position from the hidden input's selection.\n const syncCursor = useCallback(() => {\n const pos = inputRef.current?.selectionStart ?? value.length;\n setCursorPosition(Math.min(pos, value.length));\n }, [inputRef, value.length]);\n\n // Keep cursor in sync after value changes.\n useEffect(() => {\n setCursorPosition((prev) => Math.min(prev, value.length));\n }, [value.length]);\n\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const newValue = filterValue(event.target.value).slice(0, length);\n if (controlledValue == null) {\n setInternalValue(newValue);\n }\n setCursorPosition(event.target.selectionStart ?? newValue.length);\n onChange?.(event);\n },\n [length, controlledValue, onChange, filterValue],\n );\n\n const handlePaste = useCallback(\n (event: ClipboardEvent<HTMLInputElement>) => {\n onPaste?.(event);\n if (event.defaultPrevented) {\n return;\n }\n event.preventDefault();\n const pasted = filterValue(event.clipboardData.getData('text/plain')).slice(0, length);\n const input = inputRef.current;\n if (!input) {\n return;\n }\n // Use native setter to trigger React's synthetic onChange.\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;\n nativeInputValueSetter?.call(input, pasted);\n input.dispatchEvent(new Event('input', { bubbles: true }));\n },\n [length, inputRef, onPaste, filterValue],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n // Let the native input handle cursor movement, then sync.\n requestAnimationFrame(syncCursor);\n } else if (event.key === 'Backspace' && value.length === 0) {\n event.preventDefault();\n } else if (event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) {\n // Reject characters that don't match the allow pattern.\n if (charPattern && !charPattern.test(event.key)) {\n event.preventDefault();\n props.onKeyDown?.(event);\n return;\n }\n // Overwrite mode: replace character at cursor position instead of inserting.\n const input = inputRef.current;\n const pos = input?.selectionStart ?? value.length;\n if (pos < value.length && input) {\n event.preventDefault();\n const newValue = value.slice(0, pos) + event.key + value.slice(pos + 1);\n const newPos = Math.min(pos + 1, length);\n // Update state and cursor synchronously to avoid flicker.\n if (controlledValue == null) {\n setInternalValue(newValue);\n }\n setCursorPosition(newPos);\n // Sync the native input to match.\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;\n nativeInputValueSetter?.call(input, newValue);\n input.setSelectionRange(newPos, newPos);\n // Notify consumer via onChange with a synthetic-like event.\n onChange?.({ target: input, currentTarget: input } as ChangeEvent<HTMLInputElement>);\n }\n }\n props.onKeyDown?.(event);\n },\n [value, length, props.onKeyDown, syncCursor, inputRef, charPattern, controlledValue, onChange],\n );\n\n const handleSelect = useCallback(() => {\n syncCursor();\n }, [syncCursor]);\n\n const activeIndex = Math.min(cursorPosition, value.length < length ? value.length : length - 1);\n\n return (\n <div className={`relative inline-flex items-center gap-2 ${className ?? ''}`}>\n <input\n ref={inputRef}\n id={id}\n type='text'\n value={value}\n onChange={handleChange}\n onPaste={handlePaste}\n onKeyDown={handleKeyDown}\n onSelect={handleSelect}\n maxLength={length}\n disabled={disabled}\n spellCheck={false}\n aria-describedby={descriptionId}\n {...(validationValence === 'error' && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId,\n })}\n {...props}\n pattern={pattern}\n className='dx-fullscreen opacity-0'\n style={{\n caretColor: 'transparent',\n ...props.style,\n }}\n />\n {Array.from({ length }, (_, index) => {\n const char = value[index] || '\\u00A0';\n const isCursor = !!(inputFocused && index === activeIndex);\n return (\n <div key={index} className={segmentClassName} {...(isCursor && { 'data-focused': '' })} aria-hidden='true'>\n {char}\n </div>\n );\n })}\n </div>\n );\n },\n);\n\nexport { PinInput };\n\nexport type { PinInputProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { Primitive } from '@radix-ui/react-primitive';\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './Root';\n\ntype TextInputProps = Omit<ComponentPropsWithRef<typeof Primitive.input>, 'id'>;\n\nconst TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n ({ __inputScope, ...props }: InputScopedProps<TextInputProps>, forwardedRef) => {\n const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n return (\n <Primitive.input\n {...{\n ...props,\n id,\n 'aria-describedby': descriptionId,\n ...(validationValence === 'error' && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId,\n }),\n ref: forwardedRef,\n }}\n />\n );\n },\n);\n\nexport { TextInput };\n\nexport type { TextInputProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './Root';\n\ntype TextAreaProps = Omit<ComponentPropsWithRef<'textarea'>, 'id'>;\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n ({ __inputScope, ...props }: InputScopedProps<TextAreaProps>, forwardedRef) => {\n const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n return (\n <textarea\n {...{\n ...props,\n id,\n 'aria-describedby': descriptionId,\n ...(validationValence === 'error' && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId,\n }),\n ref: forwardedRef,\n }}\n />\n );\n },\n);\n\nexport { TextArea };\n\nexport type { TextAreaProps };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Primitive", "Slot", "React", "forwardRef", "createContextScope", "React", "useId", "INPUT_NAME", "createInputContext", "createInputScope", "InputProvider", "useInputContext", "InputRoot", "__inputScope", "id", "propsId", "descriptionId", "propsDescriptionId", "errorMessageId", "propsErrorMessageId", "validationValence", "children", "scope", "displayName", "Label", "forwardRef", "__inputScope", "asChild", "children", "props", "forwardedRef", "id", "useInputContext", "INPUT_NAME", "Comp", "Slot", "Primitive", "label", "React", "htmlFor", "ref", "Description", "descriptionId", "validationValence", "span", "ErrorMessage", "errorMessageId", "Validation", "otherProps", "DescriptionAndValidation", "p", "React", "forwardRef", "useCallback", "useEffect", "useMemo", "useState", "useForwardedRef", "useIsFocused", "PinInput", "forwardRef", "__inputScope", "className", "disabled", "segmentClassName", "length", "pattern", "value", "controlledValue", "onChange", "onPaste", "props", "forwardedRef", "id", "validationValence", "descriptionId", "errorMessageId", "useInputContext", "INPUT_NAME", "inputRef", "useForwardedRef", "inputFocused", "useIsFocused", "internalValue", "setInternalValue", "useState", "cursorPosition", "setCursorPosition", "String", "charPattern", "useMemo", "undefined", "base", "replace", "RegExp", "filterValue", "useCallback", "input", "split", "filter", "char", "test", "join", "syncCursor", "pos", "current", "selectionStart", "Math", "min", "useEffect", "prev", "handleChange", "event", "newValue", "target", "slice", "handlePaste", "defaultPrevented", "preventDefault", "pasted", "clipboardData", "getData", "nativeInputValueSetter", "Object", "getOwnPropertyDescriptor", "HTMLInputElement", "prototype", "set", "call", "dispatchEvent", "Event", "bubbles", "handleKeyDown", "key", "requestAnimationFrame", "metaKey", "ctrlKey", "altKey", "onKeyDown", "newPos", "setSelectionRange", "currentTarget", "handleSelect", "activeIndex", "React", "div", "ref", "type", "onSelect", "maxLength", "spellCheck", "aria-describedby", "style", "caretColor", "Array", "from", "_", "index", "isCursor", "aria-hidden", "Primitive", "React", "forwardRef", "TextInput", "forwardRef", "__inputScope", "props", "forwardedRef", "id", "validationValence", "descriptionId", "errorMessageId", "useInputContext", "INPUT_NAME", "React", "Primitive", "input", "ref", "React", "forwardRef", "TextArea", "forwardRef", "__inputScope", "props", "forwardedRef", "id", "validationValence", "descriptionId", "errorMessageId", "useInputContext", "INPUT_NAME", "React", "textarea", "ref"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/Root.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"src/Root.tsx":{"bytes":4510,"imports":[{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true}],"format":"esm"},"src/InputMeta.tsx":{"bytes":9992,"imports":[{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"src/PinInput.tsx":{"bytes":23950,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"src/TextInput.tsx":{"bytes":3107,"imports":[{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"src/TextArea.tsx":{"bytes":2873,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"src/index.ts":{"bytes":726,"imports":[{"path":"src/InputMeta.tsx","kind":"import-statement","original":"./InputMeta"},{"path":"src/Root.tsx","kind":"import-statement","original":"./Root"},{"path":"src/PinInput.tsx","kind":"import-statement","original":"./PinInput"},{"path":"src/TextInput.tsx","kind":"import-statement","original":"./TextInput"},{"path":"src/TextArea.tsx","kind":"import-statement","original":"./TextArea"}],"format":"esm"}},"outputs":{"dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":23682},"dist/lib/node-esm/index.mjs":{"imports":[{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["Description","DescriptionAndValidation","ErrorMessage","INPUT_NAME","InputRoot","Label","PinInput","TextArea","TextInput","Validation","createInputScope","useInputContext"],"entryPoint":"src/index.ts","inputs":{"src/InputMeta.tsx":{"bytesInOutput":2282},"src/Root.tsx":{"bytesInOutput":875},"src/index.ts":{"bytesInOutput":0},"src/PinInput.tsx":{"bytesInOutput":5220},"src/TextInput.tsx":{"bytesInOutput":610},"src/TextArea.tsx":{"bytesInOutput":534}},"bytes":9969}}}
|
package/dist/types/src/Root.d.ts
CHANGED
|
@@ -19,10 +19,10 @@ type InputContextValue = {
|
|
|
19
19
|
validationValence: Valence;
|
|
20
20
|
};
|
|
21
21
|
declare const useInputContext: (consumerName: string, scope: Scope<InputContextValue | undefined>) => InputContextValue;
|
|
22
|
-
declare
|
|
23
|
-
|
|
24
|
-
displayName: string;
|
|
25
|
-
}
|
|
22
|
+
declare function InputRoot({ __inputScope, id: propsId, descriptionId: propsDescriptionId, errorMessageId: propsErrorMessageId, validationValence, children }: InputScopedProps<InputRootProps>): React.JSX.Element;
|
|
23
|
+
declare namespace InputRoot {
|
|
24
|
+
var displayName: string;
|
|
25
|
+
}
|
|
26
26
|
export { InputRoot, createInputScope, useInputContext, INPUT_NAME };
|
|
27
27
|
export type { Valence, InputRootProps, InputScopedProps };
|
|
28
28
|
//# sourceMappingURL=Root.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Root.d.ts","sourceRoot":"","sources":["../../../src/Root.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,KAAK,EAAsB,MAAM,yBAAyB,CAAC;AACzE,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAItD,QAAA,MAAM,UAAU,UAAU,CAAC;AAE3B,KAAK,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAEpE,KAAK,gBAAgB,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,YAAY,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAExD,KAAK,cAAc,GAAG,iBAAiB,CAAC;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC,CAAC;AAEH,QAAA,MAA2B,gBAAgB,+CAAsC,CAAC;AAElF,KAAK,iBAAiB,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,QAAA,MAAsB,eAAe,0FAAqD,CAAC;
|
|
1
|
+
{"version":3,"file":"Root.d.ts","sourceRoot":"","sources":["../../../src/Root.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,KAAK,EAAsB,MAAM,yBAAyB,CAAC;AACzE,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAItD,QAAA,MAAM,UAAU,UAAU,CAAC;AAE3B,KAAK,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAEpE,KAAK,gBAAgB,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,YAAY,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAExD,KAAK,cAAc,GAAG,iBAAiB,CAAC;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC,CAAC;AAEH,QAAA,MAA2B,gBAAgB,+CAAsC,CAAC;AAElF,KAAK,iBAAiB,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,QAAA,MAAsB,eAAe,0FAAqD,CAAC;2BAExE,EACjB,YAAY,EACZ,EAAE,EAAE,OAAO,EACX,aAAa,EAAE,kBAAkB,EACjC,cAAc,EAAE,mBAAmB,EACnC,iBAA6B,EAC7B,QAAQ,EACT,EAAE,gBAAgB,CAAC,cAAc,CAAC;;;;AAanC,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,eAAe,EAAE,UAAU,EAAE,CAAC;AAEpE,YAAY,EAAE,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,CAAC"}
|