@veracity/vui 2.10.0-beta.0 → 2.10.0-beta.1

package/dist/cjs/input/autoCompletePopover.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { AutoCompletePopoverProps } from './input.types';
+/** Wrapper for the autocomplete popover. */
+export declare const AutoCompletePopover: ({ autoCompleteOptions, autoCompleteMaxHeight, children, filterAutoCompleteOptions, onAutoCompleteSelect }: AutoCompletePopoverProps) => JSX.Element;
+declare const _default: React.MemoExoticComponent<({ autoCompleteOptions, autoCompleteMaxHeight, children, filterAutoCompleteOptions, onAutoCompleteSelect }: AutoCompletePopoverProps) => JSX.Element>;
+export default _default;
+//# sourceMappingURL=autoCompletePopover.d.ts.map

package/dist/cjs/input/autoCompletePopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autoCompletePopover.d.ts","sourceRoot":"","sources":["../../../src/input/autoCompletePopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAA;AAYxD,4CAA4C;AAC5C,eAAO,MAAM,mBAAmB,8GAM7B,wBAAwB,gBAqB1B,CAAA;;AAED,wBAA8C"}

package/dist/cjs/input/autoCompletePopover.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutoCompletePopover = void 0;
+const react_1 = __importDefault(require("react"));
+const core_1 = require("../core");
+const list_1 = require("../list");
+const popover_1 = require("../popover");
+const utils_1 = require("../utils");
+const InputContainer = core_1.styled.divBox `
+  width: 100%;
+`;
+const options = {
+    aria: {
+        expanded: false
+    }
+};
+/** Wrapper for the autocomplete popover. */
+const AutoCompletePopover = ({ autoCompleteOptions, autoCompleteMaxHeight, children, filterAutoCompleteOptions, onAutoCompleteSelect }) => {
+    var _a;
+    if (!(autoCompleteOptions === null || autoCompleteOptions === void 0 ? void 0 : autoCompleteOptions.length))
+        return children;
+    return (react_1.default.createElement(popover_1.Popover, { options: options, placement: "bottom-start" },
+        react_1.default.createElement(popover_1.Popover.Trigger, { as: InputContainer, className: (0, utils_1.cs)('vui-input-popoverTrigger') }, children),
+        !!autoCompleteOptions && (react_1.default.createElement(popover_1.Popover.Content, null,
+            react_1.default.createElement(list_1.List, { maxH: autoCompleteMaxHeight }, (_a = autoCompleteOptions === null || autoCompleteOptions === void 0 ? void 0 : autoCompleteOptions.filter) === null || _a === void 0 ? void 0 : _a.call(autoCompleteOptions, filterAutoCompleteOptions).map((i) => (react_1.default.createElement(list_1.List.Item, { cursor: "pointer", hoverBg: "skyBlue.hover", key: i, onClick: () => onAutoCompleteSelect(i) }, i))))))));
+};
+exports.AutoCompletePopover = AutoCompletePopover;
+exports.default = react_1.default.memo(exports.AutoCompletePopover);

package/dist/cjs/input/helpText.d.ts

@@ -1,5 +1,5 @@
 import { HelpTextProps } from './input.types';
-/** Displaying help text bellow an input.. */
+/** Displaying help text bellow the input. */
 export declare const HelpText: import("../core").VuiComponent<"div", HelpTextProps>;
 export default HelpText;
 //# sourceMappingURL=helpText.d.ts.map

package/dist/cjs/input/helpText.js

@@ -22,7 +22,7 @@ const p_1 = __importDefault(require("../p"));
 const utils_1 = require("../utils");
 const consts_1 = require("./consts");
 const context_1 = require("./context");
-/** Displaying help text bellow an input.. */
+/** Displaying help text bellow the input. */
 exports.HelpText = (0, core_1.vui)((props, ref) => {
     const { className, children, isError } = props, rest = __rest(props, ["className", "children", "isError"]);
     const inputProps = (0, context_1.useInputContext)();

package/dist/cjs/input/input.d.ts

@@ -3,7 +3,6 @@ import HelpText from './helpText';
 import { InputProps } from './input.types';
 import InputIcon from './inputIcon';
 import InputInput from './inputInput';
-export declare const InputContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
 export declare const InputBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
 /**
  * Displays an input element wrapped in a div to allow extra content, like counter, side icons or buttons.

package/dist/cjs/input/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAQnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,eAAO,MAAM,cAAc,+HAE1B,CAAA;AAED,eAAO,MAAM,SAAS,+HAgBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK;UAuJV,gBAAgB;WACf,iBAAiB;cACd,eAAe;CAC1B,CAAA;AAMD,eAAe,KAAK,CAAA"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAOnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,eAAO,MAAM,SAAS,+HAgBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK;UAwIV,gBAAgB;WACf,iBAAiB;cACd,eAAe;CAC1B,CAAA;AAMD,eAAe,KAAK,CAAA"}

package/dist/cjs/input/input.js

@@ -37,22 +37,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = exports.InputBase = exports.InputContainer = void 0;
+exports.Input = exports.InputBase = void 0;
 const react_1 = __importStar(require("react"));
 const core_1 = require("../core");
-const list_1 = require("../list");
-const popover_1 = require("../popover");
 const t_1 = require("../t");
 const utils_1 = require("../utils");
+const autoCompletePopover_1 = __importDefault(require("./autoCompletePopover"));
 const consts_1 = require("./consts");
 const context_1 = require("./context");
 const helpers_1 = require("./helpers");
 const helpText_1 = __importDefault(require("./helpText"));
 const inputIcon_1 = __importDefault(require("./inputIcon"));
 const inputInput_1 = __importDefault(require("./inputInput"));
-exports.InputContainer = core_1.styled.divBox `
-  width: 100%;
-`;
 exports.InputBase = core_1.styled.divBox `
   align-items: center;
   background-color: white;
@@ -76,7 +72,7 @@ exports.InputBase = core_1.styled.divBox `
  * Exposes some props to the children via context.
  */
 exports.Input = (0, core_1.vui)((props, ref) => {
-    var _a, _b, _c;
+    var _a, _b;
     const { 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, size, state = '', stateMapping, step, type = 'text', value, variant } = props, rest = __rest(props, ["autoComplete", "autoCompleteOptions", "autoCompleteMaxHeight", "autoFocus", "children", "className", "defaultValue", "disabled", "errorText", "iconLeft", "iconRight", "id", "input", "inputProps", "inputRef", "itemLeft", "itemRight", "helpText", "max", "maxLength", "min", "name", "onBlur", "onChange", "onFocus", "pattern", "placeholder", "readOnly", "required", "showCount", "size", "state", "stateMapping", "step", "type", "value", "variant"]);
     const [count, setCount] = (0, react_1.useState)((0, helpers_1.getInitialCount)(props));
     const [valueInternal, setValueInternal] = (0, react_1.useState)(defaultValue || '');
@@ -105,42 +101,35 @@ exports.Input = (0, core_1.vui)((props, ref) => {
     }, [value]);
     const filterAutoCompleteOptions = (i) => valueInternal === i ? false : !valueInternal || i.toLowerCase().includes(`${valueInternal}`.toLowerCase());
     return (react_1.default.createElement(context_1.InputProvider, { value: context },
-        react_1.default.createElement(popover_1.Popover, { options: {
-                aria: {
-                    expanded: !(autoCompleteOptions === null || autoCompleteOptions === void 0 ? void 0 : autoCompleteOptions.length)
-                }
-            }, placement: "bottom-start" },
-            react_1.default.createElement(popover_1.Popover.Trigger, { as: exports.InputContainer, className: (0, utils_1.cs)('vui-input-popoverTrigger') },
-                react_1.default.createElement(exports.InputBase, Object.assign({ className: (0, utils_1.cs)('vui-input', className), ref: ref }, styles.container, aliasedProps, rest),
-                    itemLeft,
-                    (0, utils_1.isString)(iconLeft) ? react_1.default.createElement(inputIcon_1.default, { ml: 1, name: iconLeft }) : iconLeft, (_a = children !== null && children !== void 0 ? children : input) !== null && _a !== void 0 ? _a : (react_1.default.createElement(inputInput_1.default, Object.assign({ ref: inputRef }, {
-                    autoFocus,
-                    defaultValue,
-                    disabled,
-                    id,
-                    max,
-                    maxLength,
-                    min,
-                    name,
-                    onBlur,
-                    onChange,
-                    onFocus,
-                    pattern,
-                    placeholder,
-                    readOnly,
-                    required,
-                    step,
-                    type
-                }, { autoComplete: (autoCompleteOptions === null || autoCompleteOptions === void 0 ? void 0 : autoCompleteOptions.length) ? 'off' : autoComplete, value: valueInternal }, inputProps))),
-                    (0, utils_1.isString)(iconRight) ? react_1.default.createElement(inputIcon_1.default, { mr: 1, name: iconRight }) : iconRight,
-                    itemRight,
-                    state && react_1.default.createElement(inputIcon_1.default, Object.assign({ mr: 1 }, (_b = states[state]) === null || _b === void 0 ? void 0 : _b.iconProps)),
-                    showCount && (react_1.default.createElement(t_1.T, { className: "vui-inputCount", color: maxLength && count > maxLength ? consts_1.inputColors.error : consts_1.inputColors.helpText, position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
-                        count,
-                        " ",
-                        maxLength ? `/ ${maxLength}` : null)))),
-            !!autoCompleteOptions && (react_1.default.createElement(popover_1.Popover.Content, null,
-                react_1.default.createElement(list_1.List, { maxH: autoCompleteMaxHeight }, (_c = autoCompleteOptions === null || autoCompleteOptions === void 0 ? void 0 : autoCompleteOptions.filter) === null || _c === void 0 ? void 0 : _c.call(autoCompleteOptions, filterAutoCompleteOptions).map((i) => (react_1.default.createElement(list_1.List.Item, { cursor: "pointer", hoverBg: "skyBlue.hover", key: i, onClick: () => onAutoCompleteSelect(i) }, i))))))),
+        react_1.default.createElement(autoCompletePopover_1.default, { autoCompleteMaxHeight: autoCompleteMaxHeight, autoCompleteOptions: autoCompleteOptions, filterAutoCompleteOptions: filterAutoCompleteOptions, onAutoCompleteSelect: onAutoCompleteSelect },
+            react_1.default.createElement(exports.InputBase, Object.assign({ className: (0, utils_1.cs)('vui-input', className), ref: ref }, styles.container, aliasedProps, rest),
+                itemLeft,
+                (0, utils_1.isString)(iconLeft) ? react_1.default.createElement(inputIcon_1.default, { ml: 1, name: iconLeft }) : iconLeft, (_a = children !== null && children !== void 0 ? children : input) !== null && _a !== void 0 ? _a : (react_1.default.createElement(inputInput_1.default, Object.assign({ ref: inputRef }, {
+                autoFocus,
+                defaultValue,
+                disabled,
+                id,
+                max,
+                maxLength,
+                min,
+                name,
+                onBlur,
+                onChange,
+                onFocus,
+                pattern,
+                placeholder,
+                readOnly,
+                required,
+                step,
+                type
+            }, { autoComplete: (autoCompleteOptions === null || autoCompleteOptions === void 0 ? void 0 : autoCompleteOptions.length) ? 'off' : autoComplete, value: valueInternal }, inputProps))),
+                (0, utils_1.isString)(iconRight) ? react_1.default.createElement(inputIcon_1.default, { mr: 1, name: iconRight }) : iconRight,
+                itemRight,
+                state && react_1.default.createElement(inputIcon_1.default, Object.assign({ mr: 1 }, (_b = states[state]) === null || _b === void 0 ? void 0 : _b.iconProps)),
+                showCount && (react_1.default.createElement(t_1.T, { className: "vui-inputCount", color: maxLength && count > maxLength ? consts_1.inputColors.error : consts_1.inputColors.helpText, position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
+                    count,
+                    " ",
+                    maxLength ? `/ ${maxLength}` : null)))),
         !!helpText && react_1.default.createElement(helpText_1.default, null, helpText),
         !!errorText && react_1.default.createElement(helpText_1.default, { isError: true }, errorText)));
 });

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

@@ -75,6 +75,17 @@ export type InputProps = SystemProps & ThemingProps<'Input'> & {
     /** 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;
 };

package/dist/cjs/input/input.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.types.d.ts","sourceRoot":"","sources":["../../../src/input/input.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"input.types.d.ts","sourceRoot":"","sources":["../../../src/input/input.types.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { AutoCompletePopoverProps } from './input.types';
+/** Wrapper for the autocomplete popover. */
+export declare const AutoCompletePopover: ({ autoCompleteOptions, autoCompleteMaxHeight, children, filterAutoCompleteOptions, onAutoCompleteSelect }: AutoCompletePopoverProps) => JSX.Element;
+declare const _default: React.MemoExoticComponent<({ autoCompleteOptions, autoCompleteMaxHeight, children, filterAutoCompleteOptions, onAutoCompleteSelect }: AutoCompletePopoverProps) => JSX.Element>;
+export default _default;
+//# sourceMappingURL=autoCompletePopover.d.ts.map

package/dist/esm/input/autoCompletePopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autoCompletePopover.d.ts","sourceRoot":"","sources":["../../../src/input/autoCompletePopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAA;AAYxD,4CAA4C;AAC5C,eAAO,MAAM,mBAAmB,8GAM7B,wBAAwB,gBAqB1B,CAAA;;AAED,wBAA8C"}

package/dist/esm/input/autoCompletePopover.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { styled } from '../core';
+import { List } from '../list';
+import { Popover } from '../popover';
+import { cs } from '../utils';
+const InputContainer = styled.divBox `
+  width: 100%;
+`;
+const options = {
+    aria: {
+        expanded: false
+    }
+};
+/** Wrapper for the autocomplete popover. */
+export const AutoCompletePopover = ({ autoCompleteOptions, autoCompleteMaxHeight, children, filterAutoCompleteOptions, onAutoCompleteSelect }) => {
+    if (!autoCompleteOptions?.length)
+        return children;
+    return (React.createElement(Popover, { options: options, placement: "bottom-start" },
+        React.createElement(Popover.Trigger, { as: InputContainer, className: cs('vui-input-popoverTrigger') }, children),
+        !!autoCompleteOptions && (React.createElement(Popover.Content, null,
+            React.createElement(List, { maxH: autoCompleteMaxHeight }, autoCompleteOptions?.filter?.(filterAutoCompleteOptions).map((i) => (React.createElement(List.Item, { cursor: "pointer", hoverBg: "skyBlue.hover", key: i, onClick: () => onAutoCompleteSelect(i) }, i))))))));
+};
+export default React.memo(AutoCompletePopover);

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

@@ -1,5 +1,5 @@
 import { HelpTextProps } from './input.types';
-/** Displaying help text bellow an input.. */
+/** Displaying help text bellow the input. */
 export declare const HelpText: import("../core").VuiComponent<"div", HelpTextProps>;
 export default HelpText;
 //# sourceMappingURL=helpText.d.ts.map

package/dist/esm/input/helpText.js

@@ -5,7 +5,7 @@ import P from '../p';
 import { cs } from '../utils';
 import { inputColors } from './consts';
 import { useInputContext } from './context';
-/** Displaying help text bellow an input.. */
+/** Displaying help text bellow the input. */
 export const HelpText = vui((props, ref) => {
     const { className, children, isError, ...rest } = props;
     const inputProps = useInputContext();

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

@@ -3,7 +3,6 @@ import HelpText from './helpText';
 import { InputProps } from './input.types';
 import InputIcon from './inputIcon';
 import InputInput from './inputInput';
-export declare const InputContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
 export declare const InputBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
 /**
  * Displays an input element wrapped in a div to allow extra content, like counter, side icons or buttons.

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAQnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,eAAO,MAAM,cAAc,+HAE1B,CAAA;AAED,eAAO,MAAM,SAAS,+HAgBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK;UAuJV,gBAAgB;WACf,iBAAiB;cACd,eAAe;CAC1B,CAAA;AAMD,eAAe,KAAK,CAAA"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAOnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,eAAO,MAAM,SAAS,+HAgBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK;UAwIV,gBAAgB;WACf,iBAAiB;cACd,eAAe;CAC1B,CAAA;AAMD,eAAe,KAAK,CAAA"}

package/dist/esm/input/input.js

@@ -1,18 +1,14 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { styled, useStyleConfig, vui } from '../core';
-import { List } from '../list';
-import { Popover } from '../popover';
 import { T } from '../t';
 import { cs, filterUndefined, isString } from '../utils';
+import AutoCompletePopover from './autoCompletePopover';
 import { 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 InputContainer = styled.divBox `
-  width: 100%;
-`;
 export const InputBase = styled.divBox `
   align-items: center;
   background-color: white;
@@ -63,43 +59,36 @@ export const Input = vui((props, ref) => {
     }, [value]);
     const filterAutoCompleteOptions = (i) => valueInternal === i ? false : !valueInternal || i.toLowerCase().includes(`${valueInternal}`.toLowerCase());
     return (React.createElement(InputProvider, { value: context },
-        React.createElement(Popover, { options: {
-                aria: {
-                    expanded: !autoCompleteOptions?.length
-                }
-            }, placement: "bottom-start" },
-            React.createElement(Popover.Trigger, { as: InputContainer, className: cs('vui-input-popoverTrigger') },
-                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 }),
-                    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)))),
-            !!autoCompleteOptions && (React.createElement(Popover.Content, null,
-                React.createElement(List, { maxH: autoCompleteMaxHeight }, autoCompleteOptions?.filter?.(filterAutoCompleteOptions).map((i) => (React.createElement(List.Item, { cursor: "pointer", hoverBg: "skyBlue.hover", key: i, onClick: () => onAutoCompleteSelect(i) }, i))))))),
+        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 }),
+                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)));
 });

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

@@ -75,6 +75,17 @@ export type InputProps = SystemProps & ThemingProps<'Input'> & {
     /** 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;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"input.types.d.ts","sourceRoot":"","sources":["../../../src/input/input.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"input.types.d.ts","sourceRoot":"","sources":["../../../src/input/input.types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.10.0-beta.0",
+  "version": "2.10.0-beta.1",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/input/autoCompletePopover.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+
+import { styled } from '../core'
+import { List } from '../list'
+import { Popover } from '../popover'
+import { cs } from '../utils'
+import { AutoCompletePopoverProps } from './input.types'
+
+const InputContainer = styled.divBox`
+  width: 100%;
+`
+
+const options = {
+  aria: {
+    expanded: false
+  }
+}
+
+/** Wrapper for the autocomplete popover. */
+export const AutoCompletePopover = ({
+  autoCompleteOptions,
+  autoCompleteMaxHeight,
+  children,
+  filterAutoCompleteOptions,
+  onAutoCompleteSelect
+}: AutoCompletePopoverProps) => {
+  if (!autoCompleteOptions?.length) return children
+
+  return (
+    <Popover options={options} placement="bottom-start">
+      <Popover.Trigger as={InputContainer} className={cs('vui-input-popoverTrigger')}>
+        {children}
+      </Popover.Trigger>
+      {!!autoCompleteOptions && (
+        <Popover.Content>
+          <List maxH={autoCompleteMaxHeight}>
+            {autoCompleteOptions?.filter?.(filterAutoCompleteOptions).map((i: string) => (
+              <List.Item cursor="pointer" hoverBg="skyBlue.hover" key={i} onClick={() => onAutoCompleteSelect(i)}>
+                {i}
+              </List.Item>
+            ))}
+          </List>
+        </Popover.Content>
+      )}
+    </Popover>
+  )
+}
+
+export default React.memo(AutoCompletePopover)

package/src/input/helpText.tsx

@@ -8,7 +8,7 @@ import { inputColors } from './consts'
 import { useInputContext } from './context'
 import { HelpTextProps } from './input.types'
 
-/** Displaying help text bellow an input.. */
+/** Displaying help text bellow the input. */
 export const HelpText = vui<'div', HelpTextProps>((props, ref) => {
   const { className, children, isError, ...rest } = props
   const inputProps = useInputContext()

package/src/input/input.tsx

@@ -1,10 +1,9 @@
 import React, { useEffect, useMemo, useState } from 'react'
 
 import { styled, useStyleConfig, vui, VuiComponent } from '../core'
-import { List } from '../list'
-import { Popover } from '../popover'
 import { T } from '../t'
 import { ChangeEvent, cs, filterUndefined, isString } from '../utils'
+import AutoCompletePopover from './autoCompletePopover'
 import { inputColors, inputStateMapping } from './consts'
 import { InputProvider } from './context'
 import { getInitialCount } from './helpers'
@@ -13,10 +12,6 @@ import { InputProps } from './input.types'
 import InputIcon from './inputIcon'
 import InputInput from './inputInput'
 
-export const InputContainer = styled.divBox`
-  width: 100%;
-`
-
 export const InputBase = styled.divBox`
   align-items: center;
   background-color: white;
@@ -118,74 +113,59 @@ export const Input = vui<'div', InputProps>((props, ref) => {
 
   return (
     <InputProvider value={context}>
-      <Popover
-        options={{
-          aria: {
-            expanded: !autoCompleteOptions?.length
-          }
-        }}
-        placement="bottom-start"
+      <AutoCompletePopover
+        autoCompleteMaxHeight={autoCompleteMaxHeight}
+        autoCompleteOptions={autoCompleteOptions}
+        filterAutoCompleteOptions={filterAutoCompleteOptions}
+        onAutoCompleteSelect={onAutoCompleteSelect}
       >
-        <Popover.Trigger as={InputContainer} className={cs('vui-input-popoverTrigger')}>
-          <InputBase className={cs('vui-input', className)} ref={ref} {...styles.container} {...aliasedProps} {...rest}>
-            {itemLeft}
-            {isString(iconLeft) ? <InputIcon ml={1} name={iconLeft} /> : iconLeft}
-            {children ?? input ?? (
-              <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) ? <InputIcon mr={1} name={iconRight} /> : iconRight}
-            {itemRight}
-            {state && <InputIcon mr={1} {...states[state]?.iconProps} />}
-            {showCount && (
-              <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}
-              </T>
-            )}
-          </InputBase>
-        </Popover.Trigger>
-        {!!autoCompleteOptions && (
-          <Popover.Content>
-            <List maxH={autoCompleteMaxHeight}>
-              {autoCompleteOptions?.filter?.(filterAutoCompleteOptions).map((i: string) => (
-                <List.Item cursor="pointer" hoverBg="skyBlue.hover" key={i} onClick={() => onAutoCompleteSelect(i)}>
-                  {i}
-                </List.Item>
-              ))}
-            </List>
-          </Popover.Content>
-        )}
-      </Popover>
+        <InputBase className={cs('vui-input', className)} ref={ref} {...styles.container} {...aliasedProps} {...rest}>
+          {itemLeft}
+          {isString(iconLeft) ? <InputIcon ml={1} name={iconLeft} /> : iconLeft}
+          {children ?? input ?? (
+            <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) ? <InputIcon mr={1} name={iconRight} /> : iconRight}
+          {itemRight}
+          {state && <InputIcon mr={1} {...states[state]?.iconProps} />}
+          {showCount && (
+            <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}
+            </T>
+          )}
+        </InputBase>
+      </AutoCompletePopover>
       {!!helpText && <HelpText>{helpText}</HelpText>}
       {!!errorText && <HelpText isError>{errorText}</HelpText>}
     </InputProvider>

package/src/input/input.types.ts

@@ -80,6 +80,18 @@ export type InputProps = SystemProps &
     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
 }