@bodynarf/react.components 1.3.5 → 1.3.7

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/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/package.json

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