@veracity/vui 2.15.4 → 2.17.0-beta.0

package/dist/esm/input/input.js

@@ -1,15 +1,16 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { IconButton } from '../button';
-import { styled, useStyleConfig, vui } from '../core';
-import { T } from '../t';
-import { cs, filterUndefined, isString } from '../utils';
-import AutoCompletePopover from './autoCompletePopover';
-import { clearIconSize, displayValueOnlyTextSize, inputColors, inputStateMapping } from './consts';
-import { InputProvider } from './context';
-import { getInitialCount } from './helpers';
-import HelpText from './helpText';
-import InputIcon from './inputIcon';
-import InputInput from './inputInput';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { IconButton } from '../button';
+import { styled, useStyleConfig, vui } from '../core';
+import { T } from '../t';
+import { cs, filterUndefined, isString } from '../utils';
+import AutoCompletePopover from './autoCompletePopover';
+import { clearIconSize, displayValueOnlyTextSize, inputColors, inputStateMapping } from './consts';
+import { InputProvider } from './context';
+import { getInitialCount } from './helpers';
+import HelpText from './helpText';
+import InputIcon from './inputIcon';
+import InputInput from './inputInput';
 export const InputBase = styled.divBox `
   align-items: center;
   color: sandsone.10;
@@ -30,84 +31,67 @@ export const InputBase = styled.divBox `
     background-color: sandstone.79;
     border-color: sandstone.79;
   }
-`;
-/**
- * Displays an input element wrapped in a div to allow extra content, like counter, side icons or buttons.
- * Forwards many relevant props to the inner input. Handles different states, like loading or error.
- * Exposes some props to the children via context.
- */
-export const Input = vui((props, ref) => {
-    const { allowClear, autoComplete, autoCompleteOptions, autoCompleteMaxHeight, autoFocus, children, className, defaultValue, disabled, errorText, iconLeft, iconRight, id, input, inputProps, inputRef, itemLeft, itemRight, helpText, max, maxLength, min, name, onBlur, onChange: onChangeProp, onFocus, pattern, placeholder, readOnly, required, showCount, displayValueOnly, size = 'lg', state = '', stateMapping, step, type = 'text', value, variant, ...rest } = props;
-    const [count, setCount] = useState(getInitialCount(props));
-    const [valueInternal, setValueInternal] = useState(defaultValue || '');
-    const states = { ...inputStateMapping, ...stateMapping };
-    const styles = useStyleConfig('Input', props);
-    const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant]);
-    function onChange(e) {
-        setValueInternal(e.target.value);
-        setCount(e.target.value.length);
-        onChangeProp?.(e);
-    }
-    function onAutoCompleteSelect(value) {
-        const e = { target: { value }, type: 'autoCompleteSelect' };
-        onChange(e);
-    }
-    function onClear() {
-        const value = '';
-        const e = { target: { value }, type: 'onClear' };
-        setValueInternal(value);
-        setCount(0);
-        onChange(e);
-    }
-    const aliasedProps = filterUndefined({
-        'aria-disabled': disabled,
-        bg: readOnly ? 'sandstone.97' : undefined,
-        borderColor: readOnly ? 'sandstone.55' : undefined,
-        focusWithinBorderColor: !readOnly ? 'transparent' : undefined,
-        focusWithinRingColor: readOnly ? 'transparent' : undefined
-    });
-    useEffect(() => {
-        setValueInternal(value ?? '');
-        setCount(`${value}`?.length ? `${value}`.length : 0);
-    }, [value]);
-    const filterAutoCompleteOptions = (i) => valueInternal === i ? false : !valueInternal || i.toLowerCase().includes(`${valueInternal}`.toLowerCase());
-    return (React.createElement(InputProvider, { value: context },
-        displayValueOnly ? (React.createElement(T, { className: cs('vui-input-value', className), size: displayValueOnlyTextSize[size] }, value || defaultValue)) : (React.createElement(AutoCompletePopover, { autoCompleteMaxHeight: autoCompleteMaxHeight, autoCompleteOptions: autoCompleteOptions, filterAutoCompleteOptions: filterAutoCompleteOptions, onAutoCompleteSelect: onAutoCompleteSelect },
-            React.createElement(InputBase, { className: cs('vui-input', className), ref: ref, ...styles.container, ...aliasedProps, ...rest },
-                itemLeft,
-                isString(iconLeft) ? React.createElement(InputIcon, { ml: 1, name: iconLeft }) : iconLeft,
-                children ?? input ?? (React.createElement(InputInput, { ref: inputRef, ...{
-                        autoFocus,
-                        defaultValue,
-                        disabled,
-                        id,
-                        max,
-                        maxLength,
-                        min,
-                        name,
-                        onBlur,
-                        onChange,
-                        onFocus,
-                        pattern,
-                        placeholder,
-                        readOnly,
-                        required,
-                        step,
-                        type
-                    }, autoComplete: autoCompleteOptions?.length ? 'off' : autoComplete, value: valueInternal, ...inputProps })),
-                isString(iconRight) ? React.createElement(InputIcon, { mr: 1, name: iconRight }) : iconRight,
-                itemRight,
-                state && React.createElement(InputIcon, { mr: 1, ...states[state]?.iconProps }),
-                allowClear && (React.createElement(IconButton, { disabled: !valueInternal, icon: "falTimes", mr: 0.5, onClick: onClear, size: clearIconSize[size], title: "Clear" })),
-                showCount && (React.createElement(T, { className: "vui-inputCount", color: maxLength && count > maxLength ? inputColors.error : inputColors.helpText, position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
-                    count,
-                    " ",
-                    maxLength ? `/ ${maxLength}` : null))))),
-        !!helpText && React.createElement(HelpText, null, helpText),
-        !!errorText && React.createElement(HelpText, { isError: true }, errorText)));
-});
-Input.Icon = InputIcon;
-Input.Input = InputInput;
-Input.HelpText = HelpText;
-Input.displayName = 'Input';
-export default Input;
+`;
+/**
+ * Displays an input element wrapped in a div to allow extra content, like counter, side icons or buttons.
+ * Forwards many relevant props to the inner input. Handles different states, like loading or error.
+ * Exposes some props to the children via context.
+ */
+export const Input = vui((props, ref) => {
+    const { allowClear, autoComplete, autoCompleteOptions, autoCompleteMaxHeight, autoFocus, children, className, defaultValue, disabled, errorText, iconLeft, iconRight, id, input, inputProps, inputRef, itemLeft, itemRight, helpText, max, maxLength, min, name, onBlur, onChange: onChangeProp, onFocus, pattern, placeholder, readOnly, required, showCount, displayValueOnly, size = 'lg', state = '', stateMapping, step, type = 'text', value, variant, ...rest } = props;
+    const [count, setCount] = useState(getInitialCount(props));
+    const [valueInternal, setValueInternal] = useState(defaultValue || '');
+    const states = { ...inputStateMapping, ...stateMapping };
+    const styles = useStyleConfig('Input', props);
+    const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant]);
+    function onChange(e) {
+        setValueInternal(e.target.value);
+        setCount(e.target.value.length);
+        onChangeProp?.(e);
+    }
+    function onAutoCompleteSelect(value) {
+        const e = { target: { value }, type: 'autoCompleteSelect' };
+        onChange(e);
+    }
+    function onClear() {
+        const value = '';
+        const e = { target: { value }, type: 'onClear' };
+        setValueInternal(value);
+        setCount(0);
+        onChange(e);
+    }
+    const aliasedProps = filterUndefined({
+        'aria-disabled': disabled,
+        bg: readOnly ? 'sandstone.97' : undefined,
+        borderColor: readOnly ? 'sandstone.55' : undefined,
+        focusWithinBorderColor: !readOnly ? 'transparent' : undefined,
+        focusWithinRingColor: readOnly ? 'transparent' : undefined
+    });
+    useEffect(() => {
+        setValueInternal(value ?? '');
+        setCount(`${value}`?.length ? `${value}`.length : 0);
+    }, [value]);
+    const filterAutoCompleteOptions = (i) => valueInternal === i ? false : !valueInternal || i.toLowerCase().includes(`${valueInternal}`.toLowerCase());
+    return (_jsxs(InputProvider, { value: context, children: [displayValueOnly ? (_jsx(T, { className: cs('vui-input-value', className), size: displayValueOnlyTextSize[size], children: value || defaultValue })) : (_jsx(AutoCompletePopover, { autoCompleteMaxHeight: autoCompleteMaxHeight, autoCompleteOptions: autoCompleteOptions, filterAutoCompleteOptions: filterAutoCompleteOptions, onAutoCompleteSelect: onAutoCompleteSelect, children: _jsxs(InputBase, { className: cs('vui-input', className), ref: ref, ...styles.container, ...aliasedProps, ...rest, children: [itemLeft, isString(iconLeft) ? _jsx(InputIcon, { ml: 1, name: iconLeft }) : iconLeft, children ?? input ?? (_jsx(InputInput, { ref: inputRef, autoFocus,
+                            defaultValue,
+                            disabled,
+                            id,
+                            max,
+                            maxLength,
+                            min,
+                            name,
+                            onBlur,
+                            onChange,
+                            onFocus,
+                            pattern,
+                            placeholder,
+                            readOnly,
+                            required,
+                            step,
+                            type, autoComplete: autoCompleteOptions?.length ? 'off' : autoComplete, value: valueInternal, ...inputProps })), isString(iconRight) ? _jsx(InputIcon, { mr: 1, name: iconRight }) : iconRight, itemRight, state && _jsx(InputIcon, { mr: 1, ...states[state]?.iconProps }), allowClear && (_jsx(IconButton, { disabled: !valueInternal, icon: "falTimes", mr: 0.5, onClick: onClear, size: clearIconSize[size], title: "Clear" })), showCount && (_jsxs(T, { className: "vui-inputCount", color: maxLength && count > maxLength ? inputColors.error : inputColors.helpText, position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)", children: [count, " ", maxLength ? `/ ${maxLength}` : null] }))] }) })), !!helpText && _jsx(HelpText, { children: helpText }), !!errorText && _jsx(HelpText, { isError: true, children: errorText })] }));
+});
+Input.Icon = InputIcon;
+Input.Input = InputInput;
+Input.HelpText = HelpText;
+Input.displayName = 'Input';
+export default Input;

package/dist/esm/input/input.types.d.ts

@@ -1,102 +1,102 @@
-import React from 'react';
-import { IconProp, IconProps } from '../icon';
-import { PProps } from '../p';
-import { SystemProps } from '../system';
-import { ThemingProps } from '../theme';
-import { ChangeEventHandler, FocusEventHandler, PropsOf } from '../utils';
-export type InputInputProps = PropsOf<'input', SystemProps>;
-export type InputProps = SystemProps & ThemingProps<'Input'> & {
-    /** Allow to remove input content with clear icon. */
-    allowClear?: boolean;
-    /** Passed to the inner input. */
-    autoComplete?: string;
-    /** List of autocomplete options. */
-    autoCompleteOptions?: string[];
-    /** Maximum autoComplete container height in px. */
-    autoCompleteMaxHeight?: number;
-    /** Passed to the inner input. */
-    autoFocus?: boolean;
-    /** Deprecated. Please use variant instead. @deprecated  */
-    colorScheme?: 'green' | 'grey' | 'red';
-    /** Passed to the inner input. */
-    defaultValue?: number | string;
-    /** Passed to the inner input. */
-    disabled?: boolean;
-    /** Socket displaying error text bellow an input. */
-    errorText?: string | React.ReactNode;
-    /** Socket displaying an icon on the left. */
-    iconLeft?: IconProp | JSX.Element;
-    /** Socket displaying an icon on the right. */
-    iconRight?: IconProp | JSX.Element;
-    /** Socket rendering a custom input element. */
-    input?: React.ReactNode;
-    /** Props object passed to the inner input. */
-    inputProps?: InputInputProps;
-    /** Ref passed to the inner input. */
-    inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
-    /** Deprecated. Please use variant="red" and/or state="error" instead. @deprecated*/
-    isInvalid?: boolean;
-    /** Socket displaying a custom element on the left. */
-    itemLeft?: React.ReactNode;
-    /** Socket displaying a custom element on the right. */
-    itemRight?: React.ReactNode;
-    /** Socket displaying help text bellow an input. */
-    helpText?: React.ReactNode | string;
-    /** Passed to the inner input. */
-    max?: number | string;
-    /** Passed to the inner input. */
-    maxLength?: number;
-    /** Passed to the inner input. */
-    min?: number | string;
-    /** Passed to the inner input. */
-    name?: string;
-    /** Passed to the inner input. */
-    onBlur?: FocusEventHandler;
-    /** Passed to the inner input. */
-    onChange?: ChangeEventHandler;
-    /** Passed to the inner input. */
-    onFocus?: FocusEventHandler;
-    /** Passed to the inner input. */
-    pattern?: string;
-    /** Passed to the inner input. */
-    placeholder?: string;
-    /** Passed to the inner input. */
-    readOnly?: boolean;
-    /** Passed to the inner input. */
-    required?: boolean;
-    /** Displays length of input value if also using maxLength. */
-    showCount?: boolean;
-    /** Displays the provided value. */
-    displayValueOnly?: boolean;
-    /** Modifies Input style and content based on the given state. */
-    state?: InputState;
-    /** Object definition of styles and content for each state. */
-    stateMapping?: InputStateMapping;
-    /** Passed to the inner input. */
-    step?: number;
-    /** Passed to the inner input. */
-    type?: InputType;
-    /** Passed to the inner input. */
-    value?: number | string;
-};
-export type AutoCompletePopoverProps = {
-    /** List of autocomplete options. */
-    autoCompleteOptions?: string[];
-    /** Maximum autoComplete container height in px. */
-    autoCompleteMaxHeight?: number;
-    /** The input children. */
-    children: JSX.Element;
-    /** Filter helper function. */
-    filterAutoCompleteOptions: (value: string, index: number, array: string[]) => boolean;
-    onAutoCompleteSelect: (value: string) => void;
-};
-export type HelpTextProps = PProps & {
-    isError?: boolean;
-};
-export type InputState = 'default' | 'error' | 'loading' | 'success';
-export type InputStateMapping = Record<string, {
-    variant?: InputProps['variant'];
-    iconProps: IconProps;
-}>;
-export type InputType = 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
+import React from 'react';
+import { IconProp, IconProps } from '../icon';
+import { PProps } from '../p';
+import { SystemProps } from '../system';
+import { ThemingProps } from '../theme';
+import { ChangeEventHandler, FocusEventHandler, PropsOf } from '../utils';
+export type InputInputProps = PropsOf<'input', SystemProps>;
+export type InputProps = SystemProps & ThemingProps<'Input'> & {
+    /** Allow to remove input content with clear icon. */
+    allowClear?: boolean;
+    /** Passed to the inner input. */
+    autoComplete?: string;
+    /** List of autocomplete options. */
+    autoCompleteOptions?: string[];
+    /** Maximum autoComplete container height in px. */
+    autoCompleteMaxHeight?: number;
+    /** Passed to the inner input. */
+    autoFocus?: boolean;
+    /** Deprecated. Please use variant instead. @deprecated  */
+    colorScheme?: 'green' | 'grey' | 'red';
+    /** Passed to the inner input. */
+    defaultValue?: number | string;
+    /** Passed to the inner input. */
+    disabled?: boolean;
+    /** Socket displaying error text bellow an input. */
+    errorText?: string | React.ReactNode;
+    /** Socket displaying an icon on the left. */
+    iconLeft?: IconProp | JSX.Element;
+    /** Socket displaying an icon on the right. */
+    iconRight?: IconProp | JSX.Element;
+    /** Socket rendering a custom input element. */
+    input?: React.ReactNode;
+    /** Props object passed to the inner input. */
+    inputProps?: InputInputProps;
+    /** Ref passed to the inner input. */
+    inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
+    /** Deprecated. Please use variant="red" and/or state="error" instead. @deprecated*/
+    isInvalid?: boolean;
+    /** Socket displaying a custom element on the left. */
+    itemLeft?: React.ReactNode;
+    /** Socket displaying a custom element on the right. */
+    itemRight?: React.ReactNode;
+    /** Socket displaying help text bellow an input. */
+    helpText?: React.ReactNode | string;
+    /** Passed to the inner input. */
+    max?: number | string;
+    /** Passed to the inner input. */
+    maxLength?: number;
+    /** Passed to the inner input. */
+    min?: number | string;
+    /** Passed to the inner input. */
+    name?: string;
+    /** Passed to the inner input. */
+    onBlur?: FocusEventHandler;
+    /** Passed to the inner input. */
+    onChange?: ChangeEventHandler;
+    /** Passed to the inner input. */
+    onFocus?: FocusEventHandler;
+    /** Passed to the inner input. */
+    pattern?: string;
+    /** Passed to the inner input. */
+    placeholder?: string;
+    /** Passed to the inner input. */
+    readOnly?: boolean;
+    /** Passed to the inner input. */
+    required?: boolean;
+    /** Displays length of input value if also using maxLength. */
+    showCount?: boolean;
+    /** Displays the provided value. */
+    displayValueOnly?: boolean;
+    /** Modifies Input style and content based on the given state. */
+    state?: InputState;
+    /** Object definition of styles and content for each state. */
+    stateMapping?: InputStateMapping;
+    /** Passed to the inner input. */
+    step?: number;
+    /** Passed to the inner input. */
+    type?: InputType;
+    /** Passed to the inner input. */
+    value?: number | string;
+};
+export type AutoCompletePopoverProps = {
+    /** List of autocomplete options. */
+    autoCompleteOptions?: string[];
+    /** Maximum autoComplete container height in px. */
+    autoCompleteMaxHeight?: number;
+    /** The input children. */
+    children: JSX.Element;
+    /** Filter helper function. */
+    filterAutoCompleteOptions: (value: string, index: number, array: string[]) => boolean;
+    onAutoCompleteSelect: (value: string) => void;
+};
+export type HelpTextProps = PProps & {
+    isError?: boolean;
+};
+export type InputState = 'default' | 'error' | 'loading' | 'success';
+export type InputStateMapping = Record<string, {
+    variant?: InputProps['variant'];
+    iconProps: IconProps;
+}>;
+export type InputType = 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
 //# sourceMappingURL=input.types.d.ts.map

package/dist/esm/input/input.types.js

@@ -1 +1 @@
-export {};
+export {};

package/dist/esm/input/inputIcon.d.ts

@@ -1,5 +1,5 @@
-import { IconProps } from '../icon';
-/** Displays an icon within the Input. */
-export declare const InputIcon: import("../core").VuiComponent<"svg", IconProps>;
-export default InputIcon;
+import { IconProps } from '../icon';
+/** Displays an icon within the Input. */
+export declare const InputIcon: import("../core").VuiComponent<"svg", IconProps>;
+export default InputIcon;
 //# sourceMappingURL=inputIcon.d.ts.map

package/dist/esm/input/inputIcon.js

@@ -1,17 +1,17 @@
-import React from 'react';
-import { useStyleConfig, vui } from '../core';
-import Icon from '../icon';
-import { cs } from '../utils';
-import { inputColors } from './consts';
-import { useInputContext } from './context';
-/** Displays an icon within the Input. */
-export const InputIcon = vui((props, ref) => {
-    const { className, ...rest } = props;
-    const inputProps = useInputContext();
-    const mergedProps = { ...inputProps, ...props };
-    const styles = useStyleConfig('Input', mergedProps);
-    const color = !mergedProps.disabled ? inputColors.icons : inputColors.placeholder;
-    return React.createElement(Icon, { className: cs('vui-inputIcon', className), color: color, ref: ref, ...styles.icon, ...rest });
-});
-InputIcon.displayName = 'InputIcon';
-export default InputIcon;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyleConfig, vui } from '../core';
+import Icon from '../icon';
+import { cs } from '../utils';
+import { inputColors } from './consts';
+import { useInputContext } from './context';
+/** Displays an icon within the Input. */
+export const InputIcon = vui((props, ref) => {
+    const { className, ...rest } = props;
+    const inputProps = useInputContext();
+    const mergedProps = { ...inputProps, ...props };
+    const styles = useStyleConfig('Input', mergedProps);
+    const color = !mergedProps.disabled ? inputColors.icons : inputColors.placeholder;
+    return _jsx(Icon, { className: cs('vui-inputIcon', className), color: color, ref: ref, ...styles.icon, ...rest });
+});
+InputIcon.displayName = 'InputIcon';
+export default InputIcon;

package/dist/esm/input/inputInput.d.ts

@@ -1,6 +1,6 @@
-import { InputInputProps } from './input.types';
-export declare const InputInputBase: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
-/** Displays an input element within the Input component. */
-export declare const InputInput: import("../core").VuiComponent<"input", InputInputProps>;
-export default InputInput;
+import { InputInputProps } from './input.types';
+export declare const InputInputBase: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
+/** Displays an input element within the Input component. */
+export declare const InputInput: import("../core").VuiComponent<"input", InputInputProps>;
+export default InputInput;
 //# sourceMappingURL=inputInput.d.ts.map

package/dist/esm/input/inputInput.js

@@ -1,7 +1,7 @@
-import React from 'react';
-import { styled, useStyleConfig, vui } from '../core';
-import { cs, filterUndefined } from '../utils';
-import { useInputContext } from './context';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styled, useStyleConfig, vui } from '../core';
+import { cs, filterUndefined } from '../utils';
+import { useInputContext } from './context';
 export const InputInputBase = styled.input `
   align-self: stretch;
   color: sandstone.10;
@@ -18,17 +18,17 @@ export const InputInputBase = styled.input `
   &[aria-disabled='true']::placeholder {
     cursor: not-allowed;
   }
-`;
-/** Displays an input element within the Input component. */
-export const InputInput = vui((props, ref) => {
-    const { className, autoComplete, ...rest } = props;
-    const inputProps = useInputContext();
-    const mergedProps = { ...inputProps, ...props };
-    const styles = useStyleConfig('Input', mergedProps);
-    const aliasedProps = filterUndefined({
-        'aria-disabled': mergedProps.disabled
-    });
-    return (React.createElement(InputInputBase, { "aria-label": "input-text", autoComplete: autoComplete, className: cs('vui-inputInput', className), ref: ref, ...styles.input, ...aliasedProps, ...rest }));
-});
-InputInput.displayName = 'InputInput';
-export default InputInput;
+`;
+/** Displays an input element within the Input component. */
+export const InputInput = vui((props, ref) => {
+    const { className, autoComplete, ...rest } = props;
+    const inputProps = useInputContext();
+    const mergedProps = { ...inputProps, ...props };
+    const styles = useStyleConfig('Input', mergedProps);
+    const aliasedProps = filterUndefined({
+        'aria-disabled': mergedProps.disabled
+    });
+    return (_jsx(InputInputBase, { "aria-label": "input-text", autoComplete: autoComplete, className: cs('vui-inputInput', className), ref: ref, ...styles.input, ...aliasedProps, ...rest }));
+});
+InputInput.displayName = 'InputInput';
+export default InputInput;