@homecode/ui 4.18.62 → 4.18.64

package/dist/esm/src/components/Icon/Icon.js

@@ -6,12 +6,14 @@ import ICONS from './icons/index.js';
 
 const icons = ICONS;
 function Icon(props) {
-    const { className, type, size, ...rest } = props;
+    const { className, icon: CustomIcon, type, size, ...rest } = props;
     const iconProps = {
         className: cn(S.root, S[`size-${size}`], className),
         role: 'img',
         ...rest,
     };
+    if (CustomIcon)
+        return jsx(CustomIcon, { ...iconProps });
     const localIcon = ICONS[type];
     if (!localIcon) {
         console.warn(`Icon: type="${type}" is unknown`);

package/dist/esm/src/components/Input/Input.js

@@ -14,12 +14,12 @@ import { generateUID } from '../../tools/uid.js';
 import S from './Input.styl.js';
 import '../ButtonGroup/ButtonGroup.styl.js';
 import '../Calendar/Calendar.styl.js';
-import 'compareq';
-import 'lodash.pick';
+import '../../tools/dom.js';
 import 'timen';
 import '../Portal/Portal.js';
 import '../Paranja/Paranja.styl.js';
-import '../../tools/dom.js';
+import 'compareq';
+import 'lodash.pick';
 import debounce from '../../tools/debounce.js';
 import '../Popup/Popup.styl.js';
 import '../../tools/queryParams.js';

package/dist/esm/src/components/InputFile/InputFile.js

@@ -21,9 +21,9 @@ import 'lodash.omit';
 import '../RequiredStar/RequiredStar.styl.js';
 import 'nanoid';
 import '../Input/Input.styl.js';
+import '../../tools/dom.js';
 import '../Portal/Portal.js';
 import '../Paranja/Paranja.styl.js';
-import '../../tools/dom.js';
 import '../Popup/Popup.styl.js';
 import '../../tools/queryParams.js';
 import '../Select/Select.styl.js';

package/dist/esm/src/components/Select/Select.js

@@ -1,24 +1,24 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as Select_helpers from './Select.helpers.js';
+import { mapById, buildOptionsTree, isMultiple, renderLabel } from './Select.helpers.js';
 import { Component, createRef } from 'react';
-import cn from 'classnames';
-import compare from 'compareq';
-import pick from 'lodash.pick';
-import omit from 'lodash.omit';
-import { createStore } from 'justorm/react';
-import Time from 'timen';
-import { Icon } from '../Icon/Icon.js';
+import { INTERACTION_MODE, getInteractionMode } from '../../tools/dom.js';
+import { AssistiveText } from '../AssistiveText/AssistiveText.js';
 import { Button } from '../Button/Button.js';
+import { Icon } from '../Icon/Icon.js';
 import { Input } from '../Input/Input.js';
 import { Label } from '../Label/Label.js';
 import { Popup } from '../Popup/Popup.js';
-import { Scroll } from '../Scroll/Scroll.js';
 import { RequiredStar } from '../RequiredStar/RequiredStar.js';
-import { AssistiveText } from '../AssistiveText/AssistiveText.js';
-import { INTERACTION_MODE, getInteractionMode } from '../../tools/dom.js';
-import throttle from '../../tools/throttle.js';
-import * as Select_helpers from './Select.helpers.js';
-import { mapById, buildOptionsTree, isMultiple, renderLabel } from './Select.helpers.js';
 import S from './Select.styl.js';
+import { Scroll } from '../Scroll/Scroll.js';
+import Time from 'timen';
+import cn from 'classnames';
+import compare from 'compareq';
+import { createStore } from 'justorm/react';
+import omit from 'lodash.omit';
+import pick from 'lodash.pick';
+import throttle from '../../tools/throttle.js';
 
 const SelectHelpers = Select_helpers;
 class Select extends Component {
@@ -61,10 +61,13 @@ class Select extends Component {
         });
     }
     componentDidUpdate(prevProps) {
-        const { options, value } = this.props;
+        const { options, value, searchValue } = this.props;
         if (!compare(value, prevProps.value)) {
             this.store.selected = this.getDefaultSelected();
         }
+        if (!compare(searchValue, prevProps.searchValue)) {
+            this.setSearchVal(searchValue);
+        }
         if (!compare(options, prevProps.options)) {
             this.onOptionsChange();
         }
@@ -193,7 +196,6 @@ class Select extends Component {
     unDocumentClick = () => document.removeEventListener('click', this.onDocumentClick);
     onFocus = e => {
         const { onFocus } = this.props;
-        this.setSearchVal('');
         this.store.isFocused = true;
         onFocus?.(e);
     };
@@ -374,9 +376,10 @@ class Select extends Component {
         return null;
     }
     getInputVal() {
-        const { isFocused, searchVal, selected } = this.store;
-        if (isFocused && searchVal)
-            return searchVal;
+        const { isFocused, selected } = this.store;
+        const searchValue = this.props.searchValue ?? this.store.searchVal;
+        if (isFocused)
+            return searchValue ?? '';
         const selectedPlain = Object.entries(selected).reduce((acc, entry) => {
             const parentId = this.coerceType(entry[0]);
             const val = entry[1];
@@ -390,6 +393,8 @@ class Select extends Component {
             }
             return acc;
         }, []);
+        if (selectedPlain.length === 0)
+            return searchValue;
         return selectedPlain.map(id => this.getItem(id)?.label).join(', ');
     }
     getLabel(id) {

package/dist/esm/types/src/components/Icon/Icon.types.d.ts

@@ -3,6 +3,7 @@ import CUSTOM_ICONS from './icons';
 export type IconSize = 'xs' | Size;
 export type IconType = keyof typeof CUSTOM_ICONS;
 export type Props = ComponentType & {
-    type: IconType;
+    icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+    type?: IconType;
     size: IconSize;
 };

package/dist/esm/types/src/components/Select/Select.d.ts

@@ -1,7 +1,7 @@
+import * as H from './Select.helpers';
+import * as T from './Select.types';
 import { Component, ReactNode } from 'react';
 import { Input } from 'uilib/components/Input/Input';
-import * as T from './Select.types';
-import * as H from './Select.helpers';
 export declare const SelectHelpers: typeof H;
 export declare class Select extends Component<T.Props, T.State> {
     store: any;

package/dist/esm/types/src/components/Select/Select.types.d.ts

@@ -44,6 +44,7 @@ export type Props = FormControl<Value> & InheritedInputProps & {
     clearButton?: boolean;
     selectAllButton?: boolean;
     value?: Value;
+    searchValue?: string;
     expandSelected?: boolean;
     onChange: (value: Value) => void;
     onSeachChange?: (value: string) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "4.18.62",
+  "version": "4.18.64",
   "description": "React UI components library",
   "scripts": {
     "test": "jest",