@bodynarf/react.components 1.3.4 → 1.3.8

package/components/dropdown/components/dropdownLabel/index.js

@@ -15,6 +15,6 @@ const DropdownLabel = ({ caption, selectedItem, onClick, deselectable }) => {
         "button"
     ]);
     return (_jsxs("label", { className: className, onClick: onClick, children: [deselectVisible &&
-                _jsx(Icon, { name: "plus-lg" }), _jsx("span", { className: deselectVisible ? "mx-2" : "mr-2", title: itemSelected ? text : undefined, children: text }), _jsx(Icon, { name: "arrow-up" })] }));
+                _jsx(Icon, { name: "plus-lg" }), _jsx("span", { className: deselectVisible ? "mx-2" : "mr-2", title: itemSelected ? text : undefined, children: text }), _jsx(Icon, { name: "arrow-down" })] }));
 };
 export default DropdownLabel;

package/components/dropdown/dropdown.scss

@@ -2,22 +2,12 @@
     min-width: 7.5rem;
     width: fit-content;
 
-    &__list {
-        position: absolute;
-
-        opacity: 0;
-        visibility: collapse;
-
-        transition: 0.15s ease-in-out opacity;
-    }
-
     & .dropdown-menu {
         min-width: 11.75rem;
-    }
 
-    span.dropdown-item {
-        color: gray;
-        text-align: center;
+        & .dropdown-content {
+            overflow: auto;
+        }
     }
 
     &__label {
@@ -80,10 +70,11 @@
         .app-dropdown__label .app-icon.bi-arrow-up::before {
             transform: rotate(180deg);
         }
+    }
 
-        .app-dropdown__list {
-            opacity: 1;
-            visibility: visible;
+    &--height-default {
+        .dropdown-menu .dropdown-content {
+            height: 15vw;
         }
     }
 }

package/components/dropdown/index.d.ts

@@ -11,19 +11,21 @@ export declare type DropdownProps = BaseElementProps & {
     value?: SelectableItem;
     /**
      * Action to update selected value, which stored outside
-     */
+    */
     onSelect: (item?: SelectableItem) => void;
     /**
      * Caption.
      * Appears only no element selected
-     */
+    */
     caption: string;
     /** Hide dropdown list when its opened and user click outside */
     hideOnOuterClick: boolean;
     /** Can user deselect */
     deselectable?: boolean;
+    /** Custom dropdown list height property */
+    listHeight?: string;
 };
 /** Dropdown component */
-declare const Dropdown: ({ value, items, onSelect, caption, deselectable, className, hideOnOuterClick }: DropdownProps) => JSX.Element;
+declare const Dropdown: ({ value, items, onSelect, caption, deselectable, className, hideOnOuterClick, listHeight }: DropdownProps) => JSX.Element;
 export default Dropdown;
 //# sourceMappingURL=index.d.ts.map

package/components/dropdown/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/index.tsx"],"names":[],"mappings":"AAIA,OAAO,iBAAiB,CAAC;AAIzB,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAK5C,oBAAY,aAAa,GAAG,gBAAgB,GAAG;IAC3C,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAE7B;;;MAGE;IACF,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB;;OAEG;IACH,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE1C;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB,gEAAgE;IAChE,gBAAgB,EAAE,OAAO,CAAC;IAE1B,wBAAwB;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAA;AAED,yBAAyB;AACzB,QAAA,MAAM,QAAQ,mFAAoF,aAAa,KAAG,WA2FjH,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/index.tsx"],"names":[],"mappings":"AAIA,OAAO,iBAAiB,CAAC;AAIzB,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAK5C,oBAAY,aAAa,GAAG,gBAAgB,GAAG;IAC3C,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAE7B;;;MAGE;IACF,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB;;MAEE;IACF,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE1C;;;MAGE;IACF,OAAO,EAAE,MAAM,CAAC;IAEhB,gEAAgE;IAChE,gBAAgB,EAAE,OAAO,CAAC;IAE1B,wBAAwB;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB,CAAA;AAED,yBAAyB;AACzB,QAAA,MAAM,QAAQ,+FAAgG,aAAa,KAAG,WA4F7H,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/dropdown/index.js

@@ -6,7 +6,7 @@ import { useComponentOutsideClick } from '../../hooks/useComponentOutsideClick';
 import DropdownItem from './components/dropdownItem';
 import DropdownLabel from './components/dropdownLabel';
 /** Dropdown component */
-const Dropdown = ({ value, items, onSelect, caption, deselectable, className, hideOnOuterClick }) => {
+const Dropdown = ({ value, items, onSelect, caption, deselectable, className, hideOnOuterClick, listHeight }) => {
     const id = useId();
     const [isListVisible, setListVisible] = useState(false);
     const onItemClick = useCallback((event) => {
@@ -45,11 +45,12 @@ const Dropdown = ({ value, items, onSelect, caption, deselectable, className, hi
     const classNames = getClassName([
         "app-dropdown",
         isListVisible ? "is-active" : "",
+        isNullOrEmpty(listHeight) ? "app-dropdown--height-default" : "",
         className,
         "dropdown"
     ]);
     return (_jsxs("div", { className: classNames, "data-dropdown-id": id, children: [_jsx(DropdownLabel, { caption: caption, deselectable: deselectable === true, selectedItem: value, onClick: onLabelClick }), _jsx("div", { className: "dropdown-menu", children: items.length > 0
-                    ? _jsx("ul", { className: "dropdown-content", children: items.map(item => _jsx(DropdownItem, { item: item, selected: value?.value === item.value, onClick: onItemClick }, item.id)) })
+                    ? _jsx("ul", { className: "dropdown-content", style: { height: listHeight }, children: items.map(item => _jsx(DropdownItem, { item: item, selected: value?.value === item.value, onClick: onItemClick }, item.id)) })
                     : _jsx("span", { className: "dropdown-content dropdown-item", children: "No items found" }) })] }, id));
 };
 export default Dropdown;

package/components/search/index.d.ts

@@ -1,24 +1,23 @@
 /// <reference types="react" />
 import './search.scss';
+import { ElementSize } from '../types';
 export declare type SearchProps = {
+    /**
+     * Search type: by typing, starts from minimum characters to search
+     * or by clicking on button next to search bar.
+     * Default `is byTyping`
+    */
+    searchType: 'byTyping' | 'byButton';
     /** Search caption */
     caption: string;
     /** Search handler */
     onSearch: (searchPattern: string) => void;
     /** Initial search value */
     defaultValue?: string;
-    /**
-     * Search type: by typing, starts from minimum characters to search
-     * or by clicking on button next to search bar.
-     * Default `is byTyping`
-    */
-    searchType?: 'byTyping' | 'byButton';
     /** Control name. If empty - will be replaced by random guid */
     name?: string;
-    /** Minimum amount of characters to search */
-    minCharsToSearch?: number;
     /** Size of search bar */
-    size?: 'small' | 'normal' | 'medium' | 'large';
+    size?: ElementSize;
     /** Should search bar be rounded */
     rounded?: boolean;
     /** Is search bar disabled */
@@ -27,5 +26,5 @@ export declare type SearchProps = {
     isLoading?: boolean;
 };
 /** Search component */
-export default function Search(props: SearchProps): JSX.Element;
+export default function Search({ searchType, onSearch, caption, name, defaultValue, size, isLoading, rounded, disabled, }: SearchProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/components/search/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/search/index.tsx"],"names":[],"mappings":";AAIA,OAAO,eAAe,CAAC;AAIvB,oBAAY,WAAW,GAAG;IACtB,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAEhB,qBAAqB;IACrB,QAAQ,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;MAIE;IACF,UAAU,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAErC,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,yBAAyB;IACzB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAE/C,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qDAAqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,uBAAuB;AACvB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA4E9D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/search/index.tsx"],"names":[],"mappings":";AAIA,OAAO,eAAe,CAAC;AAGvB,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,oBAAY,WAAW,GAAG;IACtB;;;;MAIE;IACF,UAAU,EAAE,UAAU,GAAG,UAAU,CAAC;IAEpC,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAEhB,qBAAqB;IACrB,QAAQ,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,yBAAyB;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qDAAqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,uBAAuB;AACvB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC3B,UAAU,EAAE,QAAQ,EAAE,OAAO,EAC7B,IAAI,EAAE,YAAY,EAClB,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,GACrC,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAsE3B"}

package/components/search/index.js

@@ -4,36 +4,32 @@ import { generateGuid, getClassName } from '@bodynarf/utils';
 import './search.scss';
 import Button from '../button';
 /** Search component */
-export default function Search(props) {
-    const [name] = useState(props.name || generateGuid());
-    const [searchValue, setSearchValue] = useState(props.defaultValue || '');
-    const searchType = props.searchType || 'byTyping';
+export default function Search({ searchType, onSearch, caption, name, defaultValue, size, isLoading, rounded, disabled, }) {
+    const [elementName] = useState(name || generateGuid());
+    const [searchValue, setSearchValue] = useState(defaultValue || '');
     const onChange = useCallback((event) => {
         const elementValue = event.target.value;
         if (searchType === 'byTyping') {
-            const minCharsToSearch = props.minCharsToSearch || 3;
-            if (elementValue.length >= minCharsToSearch) {
-                props.onSearch(elementValue);
-            }
+            onSearch(elementValue);
         }
         setSearchValue(elementValue);
-    }, [props, searchType]);
-    const onSearchButtonClick = useCallback(() => props.onSearch(searchValue), [props, searchValue]);
+    }, [onSearch, searchType]);
+    const onSearchButtonClick = useCallback(() => onSearch(searchValue), [onSearch, searchValue]);
     const className = getClassName([
         'app-search control',
-        `is-${(props.size || 'normal')}`,
-        props.isLoading === true ? 'is-loading' : '',
+        `is-${(size || 'normal')}`,
+        isLoading === true ? 'is-loading' : '',
         searchType === 'byButton' ? 'is-expanded' : '',
     ]);
     const inputClassName = getClassName([
         'input is-unselectable',
-        `is-${(props.size || 'normal')}`,
-        props.rounded === true ? 'is-rounded' : '',
+        `is-${(size || 'normal')}`,
+        rounded === true ? 'is-rounded' : '',
     ]);
     if (searchType === 'byButton') {
-        return (_jsxs("div", { className: "field has-addons", children: [_jsx("div", { className: className, children: _jsx("input", { type: 'search', name: name, defaultValue: searchValue, className: inputClassName, disabled: props.disabled, onChange: onChange, placeholder: props.caption }) }), _jsx("div", { className: "control", children: _jsx(Button, { caption: "Search", type: "info", onClick: onSearchButtonClick, isLoading: props.isLoading }) })] }));
+        return (_jsxs("div", { className: "field has-addons", children: [_jsx("div", { className: className, children: _jsx("input", { type: 'search', name: elementName, defaultValue: searchValue, className: inputClassName, disabled: disabled, onChange: onChange, placeholder: caption }) }), _jsx("div", { className: "control", children: _jsx(Button, { caption: "Search", type: "info", onClick: onSearchButtonClick, isLoading: isLoading }) })] }));
     }
     else {
-        return (_jsx("div", { className: className, children: _jsx("input", { type: 'search', name: name, defaultValue: searchValue, className: inputClassName, disabled: props.disabled, onChange: onChange, placeholder: props.caption }) }));
+        return (_jsx("div", { className: className, children: _jsx("input", { type: 'search', name: elementName, defaultValue: searchValue, className: inputClassName, disabled: disabled, onChange: onChange, placeholder: caption }) }));
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bodynarf/react.components",
-    "version": "1.3.4",
+    "version": "1.3.8",
     "author": {
         "name": "Artem",
         "email": "bodynar@gmail.com"