@via-profit/ui-kit 0.1.0-rc.50 → 0.1.0-rc.52

package/Autocomplete/AutocompleteContainer.d.ts

@@ -3,7 +3,9 @@ import { Value, OnRequestClose, GetOptionSelected } from '../Menu';
 import { TextFieldProps } from '../TextField';
 import type { AnchorPos } from '../Popper';
 import type { MenuItemCommonProps } from '../Menu/MenuItem';
-export interface AutocompleteProps<T, Multiple extends boolean | undefined = undefined> {
+type NativeInputProps = React.InputHTMLAttributes<HTMLInputElement>;
+type AutocompleteInputProps = Omit<NativeInputProps, 'onChange' | 'value' | 'children'>;
+export interface AutocompleteProps<T, Multiple extends boolean | undefined = undefined> extends AutocompleteInputProps {
     readonly items: readonly T[];
     readonly value: Value<T, Multiple>;
     /**
@@ -42,11 +44,39 @@ export interface AutocompleteProps<T, Multiple extends boolean | undefined = und
      * Field placeholder
      */
     readonly placeholder?: string;
+    /**
+     * If is true then the asterisk will be displayed in label\
+     * If is ReactNode then ReactNode will be displayed in label
+     */
+    readonly requiredAsterisk?: boolean | React.ReactNode;
+    /**
+     * If true then TextField will be filled in full width on horizontal
+     */
+    readonly fullWidth?: boolean;
+    /**
+     * Native <input> element reference
+     */
+    readonly inputRef?: React.MutableRefObject<HTMLInputElement | null> | React.RefCallback<HTMLInputElement>;
+    /**
+     * End icon component
+     */
+    readonly endIcon?: React.ReactElement;
+    /**
+     * Start icon component
+     */
+    readonly startIcon?: React.ReactElement;
     /**
      * Field label text or element
      */
     readonly label?: TextFieldProps['label'];
+    /**
+     * If true then `errorText` value will be displayed under the TextField element
+     */
     readonly error?: TextFieldProps['error'];
+    /**
+     * Text or ReactNode to show in error element\
+     * Will be displaed only if `error` property is tru
+     */
     readonly errorText?: TextFieldProps['errorText'];
     readonly filterItems?: FilterItems<T>;
     readonly onChange?: OnChange<T, Multiple>;

package/Autocomplete/AutocompleteContainer.js

@@ -22,6 +22,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -34,9 +45,9 @@ const Spinner_1 = __importDefault(require("../LoadingIndicator/Spinner"));
 const IconClear_1 = __importDefault(require("./IconClear"));
 const context_1 = __importStar(require("./context"));
 const Autocomplete = react_1.default.forwardRef((props, ref) => {
-    const { items, value, multiple, isOpen = false, isLoading = false, clearIfNotSelected = true, anchorPos = 'auto-start-end', placeholder, label, error, errorText, filterItems, children, onChange, selectedItemToString, onInputChange, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, } = props;
+    const { items, value, multiple, isOpen = false, isLoading = false, clearIfNotSelected = true, anchorPos = 'auto-start-end', requiredAsterisk, startIcon, fullWidth, placeholder, label, error, errorText, inputRef, filterItems, children, onChange, selectedItemToString, onInputChange, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined } = props, nativeInputProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "clearIfNotSelected", "anchorPos", "requiredAsterisk", "startIcon", "fullWidth", "placeholder", "label", "error", "errorText", "inputRef", "filterItems", "children", "onChange", "selectedItemToString", "onInputChange", "getOptionSelected", "onRequestOpen", "onRequestClose"]);
     const menuRef = react_1.default.useRef(null);
-    const inputRef = react_1.default.useRef(null);
+    const fieldInputRef = react_1.default.useRef(null);
     const isFocusedRef = react_1.default.useRef(false);
     const { state, dispatch } = (0, context_1.default)();
     const { currentOpen, filteredItems, inputValue, currentValue, anchorElement, currentLoading } = state;
@@ -51,7 +62,7 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
         }));
         setTimeout(() => {
             var _a;
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_a = fieldInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }, 15);
     }, [dispatch, onChange, items, multiple]);
     /**
@@ -144,11 +155,19 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
         dispatch((0, context_1.actionSetPartial)({ currentOpen: isOpen, currentLoading: isLoading, filteredItems: items }));
     }, [isOpen, isLoading, items, dispatch]);
     return (react_1.default.createElement("div", null,
-        react_1.default.useMemo(() => (react_1.default.createElement(TextField_1.default, { placeholder: placeholder, label: label, error: error, errorText: errorText, endIcon: react_1.default.createElement(Button_1.default, { iconOnly: true, type: "button", onClick: () => (currentLoading ? 'undefined' : clear()) }, currentLoading ? react_1.default.createElement(Spinner_1.default, null) : react_1.default.createElement(IconClear_1.default, null)), onKeyDown: inputKeydownEvent, ref: el => {
+        react_1.default.useMemo(() => (react_1.default.createElement(TextField_1.default, Object.assign({}, nativeInputProps, { placeholder: placeholder, label: label, error: error, requiredAsterisk: requiredAsterisk, errorText: errorText, fullWidth: fullWidth, startIcon: startIcon, endIcon: react_1.default.createElement(Button_1.default, { iconOnly: true, type: "button", onClick: () => (currentLoading ? 'undefined' : clear()) }, currentLoading ? react_1.default.createElement(Spinner_1.default, null) : react_1.default.createElement(IconClear_1.default, null)), onKeyDown: inputKeydownEvent, ref: el => {
                 if (anchorElement !== el) {
                     dispatch((0, context_1.actionSetPartial)({ anchorElement: el }));
                 }
-            }, inputRef: inputRef, value: inputValue, onBlur: () => {
+            }, inputRef: el => {
+                fieldInputRef.current = el;
+                if (typeof inputRef === 'function') {
+                    inputRef(el);
+                }
+                if (inputRef && typeof inputRef === 'object') {
+                    inputRef.current = el;
+                }
+            }, value: inputValue, onBlur: () => {
                 isFocusedRef.current = false;
                 if (clearIfNotSelected) {
                     dispatch((0, context_1.actionSetPartial)({
@@ -179,19 +198,24 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
                 dispatch((0, context_1.actionSetPartial)({
                     filteredItems: newItems,
                 }));
-            } })), [
+            } }))), [
             placeholder,
             label,
-            multiple,
             error,
+            requiredAsterisk,
             errorText,
+            fullWidth,
+            startIcon,
             currentLoading,
             inputKeydownEvent,
             inputValue,
             clear,
             anchorElement,
             dispatch,
+            inputRef,
             clearIfNotSelected,
+            multiple,
+            nativeInputProps,
             value,
             selectedItemToString,
             onRequestOpen,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.1.0-rc.50",
+  "version": "0.1.0-rc.52",
   "description": "UI Kit",
   "repository": {
     "type": "git",