@bodynarf/react.components 1.13.5 → 1.13.6

package/components/accordion/component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/accordion/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA4C,MAAM,OAAO,CAAC;AAQrE,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,cAAc,EAAE,MAAM,IAAI,CAAC;AAEpC,sBAAsB;AACtB,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAoEjC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/accordion/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA4C,MAAM,OAAO,CAAC;AAQrE,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,cAAc,EAAE,MAAM,IAAI,CAAC;AAEpC,sBAAsB;AACtB,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAkEjC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/components/accordion/component/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { emptyFn, getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import { emptyFn, getClassName, isNotNullish } from "@bodynarf/utils";
 import { ElementSize } from "../../../types";
-import { mapDataAttributes } from "../../../utils";
+import { getElementColorClassName, getSizeClassName, mapDataAttributes } from "../../../utils";
 import Icon from "../../icon";
 import "./style.scss";
 /** Accordion panel */
@@ -12,7 +12,7 @@ const Accordion = ({ children, caption, style, size = ElementSize.Normal, defaul
     const [maxHeight, setMaxHeight] = useState(defaultExpanded ? undefined : 0);
     const toggleCollapse = useCallback(() => setMaxHeight(isExpanded ? 0 : expandablePanelRef.current.scrollHeight), [isExpanded]);
     useEffect(() => {
-        if (defaultExpanded && !isNullOrUndefined(expandablePanelRef.current)) {
+        if (defaultExpanded && isNotNullish(expandablePanelRef.current)) {
             setMaxHeight(expandablePanelRef.current.scrollHeight);
         }
     }, [defaultExpanded, size]);
@@ -21,13 +21,11 @@ const Accordion = ({ children, caption, style, size = ElementSize.Normal, defaul
     const elClassName = getClassName([
         "bbr-accordion",
         "message",
-        isNullOrUndefined(style) ? "" : `is-${style}`,
-        isNullOrUndefined(size) ? "" : `is-${size}`,
+        getElementColorClassName(style),
+        getSizeClassName(size),
         className,
     ]);
-    const dataAttributes = isNullOrUndefined(data)
-        ? undefined
-        : mapDataAttributes(data);
-    return (_jsxs("article", { className: elClassName, "aria-expanded": isExpanded, ...dataAttributes, children: [_jsxs("div", { className: "message-header is-unselectable", onClick: toggleCollapse, children: [_jsx("span", { title: title, children: caption }), _jsx(Icon, { name: "arrow-down", size: size })] }), _jsx("div", { className: "message-body", ref: expandablePanelRef, style: { maxHeight: `${maxHeight}px` }, children: _jsx("div", { className: "message-body__content", children: children }) })] }));
+    const dataAttributes = mapDataAttributes(data);
+    return (_jsxs("article", { ...dataAttributes, className: elClassName, "aria-expanded": isExpanded, children: [_jsxs("div", { onClick: toggleCollapse, className: "message-header is-unselectable", children: [_jsx("span", { title: title, children: caption }), _jsx(Icon, { size: size, name: "arrow-down" })] }), _jsx("div", { className: "message-body", ref: expandablePanelRef, style: { maxHeight: `${maxHeight}px` }, children: _jsx("div", { className: "message-body__content", children: children }) })] }));
 };
 export default Accordion;

package/components/accordion/types.d.ts

@@ -1,6 +1,6 @@
 import { BaseElementProps, ElementColor, ElementSize } from "../../types";
 /** Accordion panel props type */
-export interface AccordionProps extends BaseElementProps {
+export type AccordionProps = BaseElementProps & {
     /** Content that should be collapsed inside */
     children: React.ReactNode;
     /** Collapsible panel caption */
@@ -13,5 +13,5 @@ export interface AccordionProps extends BaseElementProps {
     style?: ElementColor;
     /** Extra handler for toggling visibility. Doesn't affect component logic */
     onToggle?: (collapsed: boolean) => void;
-}
+};
 //# sourceMappingURL=types.d.ts.map

package/components/accordion/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzE,iCAAiC;AACjC,MAAM,WAAW,cAAe,SAAQ,gBAAgB;IACpD,8CAA8C;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,gCAAgC;IAChC,OAAO,EAAE,MAAM,CAAC;IAEhB,6BAA6B;IAC7B,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,iBAAiB;IACjB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,YAAY;IACZ,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC3C"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzE,iCAAiC;AACjC,MAAM,MAAM,cAAc,GAAG,gBAAgB,GAAG;IAC5C,8CAA8C;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,gCAAgC;IAChC,OAAO,EAAE,MAAM,CAAC;IAEhB,6BAA6B;IAC7B,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,iBAAiB;IACjB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,YAAY;IACZ,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC3C,CAAC"}

package/components/anchor/types.d.ts

@@ -1,7 +1,7 @@
 import { BaseElementProps, ElementIcon } from "../../types";
 /**
  * Anchor component props type
- * @deprecated Since v1.2.0. Use html element with custom formatting
+ * @deprecated Since v1.12.0. Use html element with custom formatting
  */
 export interface AnchorProps extends BaseElementProps {
     /** Configuration od inner icon */

package/components/breadcrumbs/component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/breadcrumbs/component/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAa,MAAM,OAAO,CAAC;AAQtC,OAAO,EAAc,gBAAgB,EAAE,MAAM,IAAI,CAAC;AAIlD;;;EAGE;AACF,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA4CrC,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/breadcrumbs/component/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAa,MAAM,OAAO,CAAC;AAQtC,OAAO,EAAc,gBAAgB,EAAE,MAAM,IAAI,CAAC;AAIlD;;;EAGE;AACF,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA0CrC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/components/breadcrumbs/component/index.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
-import { getPositionClassName, mapDataAttributes } from "../../../utils";
+import { getClassName, isNullish } from "@bodynarf/utils";
+import { getPositionClassName, getSizeClassName, mapDataAttributes } from "../../../utils";
 import { ElementPosition, ElementSize } from "../../../types";
 import Icon from "../../icon";
-const defaultElementGenerator = ((bc) => _jsx(BreadCrumbItem, { item: bc }));
+const DefaultElementGenerator = ((bc) => _jsx(BreadCrumbItem, { item: bc }));
 /**
  * Breadcrumbs navigation panel
  * @description If items are not specified, an empty component will be displayed.
 */
-const BreadCrumbs = ({ items, position = ElementPosition.Left, size = ElementSize.Normal, separator = "arrow", elementGenerator = defaultElementGenerator, className, title, data, }) => {
+const BreadCrumbs = ({ items, position = ElementPosition.Left, size = ElementSize.Normal, separator = "arrow", elementGenerator = DefaultElementGenerator, className, title, data, }) => {
     if (items.length <= 1) {
         return null;
     }
@@ -16,22 +16,20 @@ const BreadCrumbs = ({ items, position = ElementPosition.Left, size = ElementSiz
         "bbr-breadcrumbs",
         "breadcrumb",
         className,
-        size === ElementSize.Normal ? undefined : `is-${size}`,
+        getSizeClassName(size),
         `has-${separator}-separator`,
         getPositionClassName(position),
     ]);
-    const dataAttributes = isNullOrUndefined(data)
-        ? undefined
-        : mapDataAttributes(data);
-    return (_jsx("nav", { className: elClassName, "aria-label": "breadcrumbs", title: title, ...dataAttributes, children: _jsx("ul", { children: items.map((breadCrumb, i, a) => _jsx("li", { className: i === a.length - 1 ? "is-active" : undefined, children: elementGenerator(breadCrumb) }, breadCrumb.href ?? breadCrumb.path)) }) }));
+    const dataAttributes = mapDataAttributes(data);
+    return (_jsx("nav", { title: title, ...dataAttributes, className: elClassName, "aria-label": "breadcrumbs", children: _jsx("ul", { children: items.map((breadCrumb, i, a) => _jsx("li", { className: i === a.length - 1 ? "is-active" : undefined, children: elementGenerator(breadCrumb) }, breadCrumb.href ?? breadCrumb.path)) }) }));
 };
 export default BreadCrumbs;
 /** Template for single breadcrumb */
 const BreadCrumbItem = ({ item, icon }) => {
-    if (isNullOrUndefined(icon)) {
+    if (isNullish(icon)) {
         return (_jsx("a", { href: item.href ?? item.path, children: item.caption }));
     }
-    if (icon?.position === ElementPosition.Right) {
+    if (icon.position === ElementPosition.Right) {
         return (_jsxs("a", { href: item.href ?? item.path, children: [item.caption, _jsx(Icon, { ...icon })] }));
     }
     return (_jsxs("a", { href: item.href ?? item.path, children: [_jsx(Icon, { ...icon }), item.caption] }));

package/components/breadcrumbs/types.d.ts

@@ -2,18 +2,8 @@ import { ReactNode } from "react";
 import { BaseElementProps, ElementIcon, ElementPosition, ElementSize } from "../../types";
 /** Breadcrumb item */
 export interface BreadCrumb {
-    /**
-     * Displayed text
-     * @deprecated Use `caption` instead
-     */
-    title?: string;
     /** Displayable caption */
     caption: string;
-    /**
-     * Page address
-     * @deprecated Since v1.2.0 Use `href`
-     */
-    path?: string;
     /** Link address */
     href: string;
     /**
@@ -23,11 +13,27 @@ export interface BreadCrumb {
     active?: boolean;
     /** Bootstrap icon class name */
     icon?: ElementIcon;
+    /**
+     * Displayed text
+     * @deprecated Use `caption` instead
+     */
+    title?: string;
+    /**
+     * Page address
+     * @deprecated Since v1.2.0 Use `href`
+     */
+    path?: string;
 }
 /** Breadcrumbs component props type */
 export type BreadcrumbsProps = BaseElementProps & {
     /** Breadcrumbs items */
     items: Array<BreadCrumb>;
+    /** Panel size */
+    size?: ElementSize;
+    /** Items position */
+    position?: ElementPosition;
+    /** Items separator. By default `arrow` */
+    separator?: "arrow" | "bullet" | "dot" | "succeeds";
     /**
      * Function that generates each element
      * @example
@@ -45,11 +51,5 @@ export type BreadcrumbsProps = BaseElementProps & {
      * }
     */
     elementGenerator?: (bc: BreadCrumb) => ReactNode;
-    /** Panel size */
-    size?: ElementSize;
-    /** Items position */
-    position?: ElementPosition;
-    /** Items separator. By default `arrow` */
-    separator?: "arrow" | "bullet" | "dot" | "succeeds";
 };
 //# sourceMappingURL=types.d.ts.map

package/components/breadcrumbs/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumbs/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzF,sBAAsB;AACtB,MAAM,WAAW,UAAU;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,0BAA0B;IAC1B,OAAO,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,gCAAgC;IAChC,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,uCAAuC;AACvC,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,GAAG;IAC9C,wBAAwB;IACxB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAEzB;;;;;;;;;;;;;;;MAeE;IACF,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,UAAU,KAAK,SAAS,CAAC;IAEjD,iBAAiB;IACjB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAE3B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,UAAU,CAAC;CACvD,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumbs/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzF,sBAAsB;AACtB,MAAM,WAAW,UAAU;IACvB,0BAA0B;IAC1B,OAAO,EAAE,MAAM,CAAC;IAEhB,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,gCAAgC;IAChC,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,uCAAuC;AACvC,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,GAAG;IAC9C,wBAAwB;IACxB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAEzB,iBAAiB;IACjB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAE3B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,UAAU,CAAC;IAEpD;;;;;;;;;;;;;;;MAeE;IACF,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,UAAU,KAAK,SAAS,CAAC;CACpD,CAAC"}

package/components/button/component/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { isNullOrEmpty, isNullOrUndefined, getClassName } from "@bodynarf/utils";
+import { isNullOrEmpty, isNotNullish, isNullish, getClassName } from "@bodynarf/utils";
 import { getSizeClassName } from "../../../utils";
 import "./style.scss";
 import ButtonWithIcon from "../components/buttonWithIcon";
@@ -9,7 +9,7 @@ import SimpleButton from "../components/simpleButton";
  * @throws Caption is not defined and icon configuration is not defined at the same time
  */
 const Button = (props) => {
-    if (isNullOrEmpty(props.caption) && isNullOrUndefined(props.icon)) {
+    if (isNullOrEmpty(props.caption) && isNullish(props.icon)) {
         throw new Error("No button content provided.");
     }
     const { light = false, outlined = false, rounded = false, isLoading = false, static: isStatic = false } = props;
@@ -25,7 +25,7 @@ const Button = (props) => {
         isLoading ? "is-loading" : "",
         isStatic ? "is-static" : "",
     ]);
-    if (!isNullOrUndefined(props.icon)) {
+    if (isNotNullish(props.icon)) {
         return (_jsx(ButtonWithIcon, { ...props, icon: props.icon, className: className }));
     }
     else {

package/components/button/components/buttonWithIcon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/components/buttonWithIcon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAQ3B,OAAO,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAE5C,iCAAiC;AACjC,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA+D3C,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/components/buttonWithIcon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAQ3B,OAAO,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAE5C,iCAAiC;AACjC,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA2D3C,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/components/button/components/buttonWithIcon/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
+import { getClassName, isNullOrEmpty } from "@bodynarf/utils";
 import { ElementPosition } from "../../../../types";
 import { mapDataAttributes } from "../../../../utils";
 import Icon from "../../../icon";
@@ -16,12 +16,10 @@ const ButtonWithIcon = ({ className, disabled, onClick, caption, icon, title, da
     className = isNullOrEmpty(caption)
         ? getClassName([className, "bbr-button--icon-only"])
         : className;
-    const dataAttributes = isNullOrUndefined(data)
-        ? undefined
-        : mapDataAttributes(data);
+    const dataAttributes = mapDataAttributes(data);
     if (icon.position === ElementPosition.Right) {
-        return (_jsxs("button", { type: "button", onClick: onClick, disabled: disabled, className: className, title: title, ...dataAttributes, children: [caption, _jsx(Icon, { ...icon, className: iconClassName })] }));
+        return (_jsxs("button", { type: "button", title: title, onClick: onClick, disabled: disabled, ...dataAttributes, className: className, children: [caption, _jsx(Icon, { ...icon, className: iconClassName })] }));
     }
-    return (_jsxs("button", { type: "button", onClick: onClick, disabled: disabled, className: className, title: title, ...dataAttributes, children: [_jsx(Icon, { ...icon, className: iconClassName }), caption] }));
+    return (_jsxs("button", { type: "button", title: title, onClick: onClick, disabled: disabled, ...dataAttributes, className: className, children: [_jsx(Icon, { ...icon, className: iconClassName }), caption] }));
 };
 export default ButtonWithIcon;

package/components/button/components/simpleButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/components/simpleButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAM3B,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,4CAA4C;AAC5C,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAwBvC,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/components/simpleButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAI3B,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,4CAA4C;AAC5C,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAqBvC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/components/button/components/simpleButton/index.js

@@ -1,11 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { isNullOrUndefined } from "@bodynarf/utils";
 import { mapDataAttributes } from "../../../../utils";
 /** Simple button component, without icon */
 const SimpleButton = ({ className, disabled, onClick, caption, title, data }) => {
-    const dataAttributes = isNullOrUndefined(data)
-        ? undefined
-        : mapDataAttributes(data);
-    return (_jsx("button", { type: "button", onClick: onClick, disabled: disabled, className: className, title: title, ...dataAttributes, children: caption }));
+    const dataAttributes = mapDataAttributes(data);
+    return (_jsx("button", { type: "button", title: title, onClick: onClick, disabled: disabled, ...dataAttributes, className: className, children: caption }));
 };
 export default SimpleButton;

package/components/button/types.d.ts

@@ -1,5 +1,7 @@
 import { BaseElementProps, ClickableElement, ElementIcon, ElementSize } from "../../types";
 export type ButtonProps = BaseElementProps & ClickableElement & {
+    /** Style */
+    style: ButtonStyle;
     /** Button displaying text */
     caption?: string;
     /**
@@ -7,8 +9,6 @@ export type ButtonProps = BaseElementProps & ClickableElement & {
      * @deprecated Use `style` prop instead
      */
     type?: ButtonType;
-    /** Style */
-    style: ButtonStyle;
     /** Configuration of inner icon */
     icon?: ElementIcon;
     /** Button size  */

package/components/button/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE1F,MAAM,MAAM,WAAW,GACjB,gBAAgB,GAChB,gBAAgB,GAChB;IACE,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,YAAY;IACZ,KAAK,EAAE,WAAW,CAAC;IAEnB,kCAAkC;IAClC,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,gCAAgC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEN;;;GAGG;AACH,MAAM,MAAM,UAAU,GAChB,SAAS,CAAC,yBAAyB,GACnC,SAAS,CAAC,4BAA4B,GACtC,MAAM,CAAC,yBAAyB,GAChC,MAAM,CAAC,sBAAsB,GAC7B,SAAS,CAAC,mBAAmB,GAC7B,SAAS,CAAC,oBAAoB,GAC9B,QAAQ,CAAC,iBAAiB,GAC1B,OAAO,CAAC,mBAAmB,GAC3B,OAAO,CAAC,wBAAwB,GAChC,MAAM,CAAC,uBAAuB,GAC9B,OAAO,CAAC,mBAAmB,GAC3B,MAAM,CAAC,sCAAsC,GAC7C,OAAO,CAAC,kDAAkD,CAC3D;AAEL,+BAA+B;AAC/B,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,GAAG;IAC7D,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,GAAG;IAClD,yBAAyB;IACzB,IAAI,EAAE,WAAW,CAAC;CACrB,CAAC;AAEF,wBAAwB;AACxB,oBAAY,WAAW;IACnB,yBAAyB;IACzB,OAAO,YAAY;IAEnB,4BAA4B;IAC5B,OAAO,YAAY;IAEnB,yBAAyB;IACzB,IAAI,SAAS;IAEb,sBAAsB;IACtB,IAAI,SAAS;IAEb,mBAAmB;IACnB,OAAO,YAAY;IAEnB,oBAAoB;IACpB,OAAO,YAAY;IAEnB,iBAAiB;IACjB,MAAM,WAAW;IAEjB,mBAAmB;IACnB,KAAK,UAAU;IAEf,wBAAwB;IACxB,KAAK,UAAU;IAEf,uBAAuB;IACvB,IAAI,SAAS;IAEb,mBAAmB;IACnB,KAAK,UAAU;IAEf,sCAAsC;IACtC,IAAI,SAAS;IAEb,kDAAkD;IAClD,KAAK,UAAU;CAClB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE1F,MAAM,MAAM,WAAW,GACjB,gBAAgB,GAChB,gBAAgB,GAChB;IACE,YAAY;IACZ,KAAK,EAAE,WAAW,CAAC;IAEnB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,kCAAkC;IAClC,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,gCAAgC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEN;;;GAGG;AACH,MAAM,MAAM,UAAU,GAChB,SAAS,CAAC,yBAAyB,GACnC,SAAS,CAAC,4BAA4B,GACtC,MAAM,CAAC,yBAAyB,GAChC,MAAM,CAAC,sBAAsB,GAC7B,SAAS,CAAC,mBAAmB,GAC7B,SAAS,CAAC,oBAAoB,GAC9B,QAAQ,CAAC,iBAAiB,GAC1B,OAAO,CAAC,mBAAmB,GAC3B,OAAO,CAAC,wBAAwB,GAChC,MAAM,CAAC,uBAAuB,GAC9B,OAAO,CAAC,mBAAmB,GAC3B,MAAM,CAAC,sCAAsC,GAC7C,OAAO,CAAC,kDAAkD,CAC3D;AAEL,+BAA+B;AAC/B,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,GAAG;IAC7D,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,GAAG;IAClD,yBAAyB;IACzB,IAAI,EAAE,WAAW,CAAC;CACrB,CAAC;AAEF,wBAAwB;AACxB,oBAAY,WAAW;IACnB,yBAAyB;IACzB,OAAO,YAAY;IAEnB,4BAA4B;IAC5B,OAAO,YAAY;IAEnB,yBAAyB;IACzB,IAAI,SAAS;IAEb,sBAAsB;IACtB,IAAI,SAAS;IAEb,mBAAmB;IACnB,OAAO,YAAY;IAEnB,oBAAoB;IACpB,OAAO,YAAY;IAEnB,iBAAiB;IACjB,MAAM,WAAW;IAEjB,mBAAmB;IACnB,KAAK,UAAU;IAEf,wBAAwB;IACxB,KAAK,UAAU;IAEf,uBAAuB;IACvB,IAAI,SAAS;IAEb,mBAAmB;IACnB,KAAK,UAAU;IAEf,sCAAsC;IACtC,IAAI,SAAS;IAEb,kDAAkD;IAClD,KAAK,UAAU;CAClB"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAI3B,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,aAAa,EAAE,MAAM,IAAI,CAAC;AAInC,yBAAyB;AACzB,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAI/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAI3B,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,aAAa,EAAE,MAAM,IAAI,CAAC;AAInC,yBAAyB;AACzB,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAU/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/dropdown/component/index.js

@@ -1,12 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { isNullOrUndefined } from "@bodynarf/utils";
+import { isNullish } from "@bodynarf/utils";
 import "./style.scss";
 import DropdownWithLabel from "../components/withLabel";
 import DropdownCompact from "../components/compact";
 /** Dropdown component */
 const Dropdown = (props) => {
-    return isNullOrUndefined(props.label)
+    // eslint-disable-next-line react/destructuring-assignment
+    return isNullish(props.label)
         ? _jsx(DropdownCompact, { ...props })
-        : _jsx(DropdownWithLabel, { ...props });
+        : (_jsx(DropdownWithLabel, { ...props, 
+            // eslint-disable-next-line react/destructuring-assignment
+            label: props.label }));
 };
 export default Dropdown;

package/components/dropdown/component/style.scss

@@ -93,6 +93,19 @@
         }
     }
 
+    &.is-up {
+        .dropdown-menu {
+            top: auto;
+            bottom: 100%;
+        }
+
+        &.is-active {
+            .bbr-dropdown__label .bbr-icon.bi-arrow-down::before {
+                transform: rotate(360deg);
+            }
+        }
+    }
+
     &--height-default {
         .dropdown-menu .dropdown-content {
             max-height: 15vw;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/compact/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4C,EAAE,EAAW,MAAM,OAAO,CAAC;AAQ9E,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,sCAAsC;AACtC,KAAK,oBAAoB,GAAG,aAAa,GAAG;IACxC,yCAAyC;IACzC,EAAE,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,uCAAuC;AACvC,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAkK7C,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/compact/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4C,EAAE,EAAmB,MAAM,OAAO,CAAC;AAQtF,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,sCAAsC;AACtC,KAAK,oBAAoB,GAAG,aAAa,GAAG;IACxC,yCAAyC;IACzC,EAAE,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,uCAAuC;AACvC,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA2L7C,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/components/dropdown/components/compact/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useId, useState, useMemo } from "react";
+import { useCallback, useId, useState, useMemo, useRef } from "react";
 import { getClassName, isNullOrEmpty, isNullish } from "@bodynarf/utils";
 import { getStyleClassName, mapDataAttributes } from "../../../../utils";
 import { useComponentOutsideClick } from "../../../../hooks";
@@ -10,8 +10,11 @@ import DropdownLabel from "../../components/label";
 const DropdownCompact = ({ items, value, onSelect, hideOnOuterClick = true, listMaxHeight, placeholder = "", noDataText = "No items found", noDataByQuery = "No items found by specified search", compact = false, disabled = false, deselectable = false, searchable = false, validationState, className, title, data, hint, id: propsId, }) => {
     const generatedId = useId();
     const id = propsId ?? generatedId;
+    const containerRef = useRef(null);
     const [isListVisible, setListVisible] = useState(false);
     const [searchValue, setSearchValue] = useState("");
+    const [isOpenUp, setIsOpenUp] = useState(false);
+    const filteredItems = useMemo(() => items.filter(({ displayValue }) => displayValue.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase())), [items, searchValue]);
     const onItemClick = useCallback((event) => {
         if (disabled) {
             return;
@@ -36,6 +39,14 @@ const DropdownCompact = ({ items, value, onSelect, hideOnOuterClick = true, list
         setSearchValue("");
         setListVisible(false);
     }, [setListVisible, value, items, onSelect, disabled]);
+    const shouldOpenUpward = useCallback((element) => {
+        const rect = element.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        const estimatedHeight = Math.min(items.length, 8) * 33 // 33 = 21px item height + 12px padding, 8 - max items in list
+            + 20; // 16px - padding top-bottom + 4px margin-top
+        return spaceBelow < estimatedHeight && spaceAbove > spaceBelow;
+    }, [items.length]);
     const onLabelClick = useCallback((event) => {
         if (disabled) {
             return;
@@ -49,9 +60,13 @@ const DropdownCompact = ({ items, value, onSelect, hideOnOuterClick = true, list
             setSearchValue("");
         }
         else {
+            if (containerRef.current) {
+                const openUp = shouldOpenUpward(containerRef.current);
+                setIsOpenUp(openUp);
+            }
             setListVisible(state => !state);
         }
-    }, [onSelect, setListVisible, disabled]);
+    }, [onSelect, setListVisible, disabled, shouldOpenUpward]);
     const onSearchChange = useCallback((value) => {
         setSearchValue(value);
         onSelect(undefined);
@@ -64,17 +79,13 @@ const DropdownCompact = ({ items, value, onSelect, hideOnOuterClick = true, list
         compact ? "bbr-dropdown--compact" : "",
         isListVisible ? "is-active" : "",
         isNullOrEmpty(listMaxHeight) ? "bbr-dropdown--height-default" : "",
+        isOpenUp ? "is-up" : "",
         "dropdown",
     ]);
     const labelComponentClassName = getStyleClassName(undefined, validationState);
-    const filteredItems = useMemo(() => items.filter(({ displayValue }) => displayValue.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase())), [items, searchValue]);
-    const dataAttributes = isNullish(data)
-        ? undefined
-        : mapDataAttributes(data);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: classNames, "data-dropdown-id": id, title: title, ...dataAttributes, children: [_jsx(DropdownLabel, { selectedItem: value, caption: placeholder, onClick: onLabelClick, searchable: searchable, lastSearch: searchValue, deselectable: deselectable, isListVisible: isListVisible, onSearchChange: onSearchChange, className: labelComponentClassName }), _jsx("div", { className: "dropdown-menu", children: filteredItems.length > 0
-                            ?
-                                _jsx("ul", { className: "dropdown-content", style: { maxHeight: listMaxHeight }, children: filteredItems.map(item => _jsx(DropdownItem, { item: item, onClick: onItemClick, selected: value?.value === item.value }, item.id)) })
-                            :
-                                _jsx("span", { className: "dropdown-content dropdown-item is-italic has-text-grey", children: isNullOrEmpty(searchValue) ? noDataText : noDataByQuery }) })] }, id), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+    const dataAttributes = mapDataAttributes(data);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { title: title, ref: containerRef, ...dataAttributes, "data-dropdown-id": id, className: classNames, children: [_jsx(DropdownLabel, { selectedItem: value, caption: placeholder, onClick: onLabelClick, searchable: searchable, lastSearch: searchValue, deselectable: deselectable, isListVisible: isListVisible, onSearchChange: onSearchChange, className: labelComponentClassName }), _jsx("div", { className: "dropdown-menu", children: filteredItems.length > 0
+                            ? (_jsx("ul", { className: "dropdown-content", style: { maxHeight: listMaxHeight }, children: filteredItems.map(item => _jsx(DropdownItem, { item: item, onClick: onItemClick, selected: value?.value === item.value }, item.id)) }))
+                            : (_jsx("span", { className: "dropdown-content dropdown-item is-italic has-text-grey", children: isNullOrEmpty(searchValue) ? noDataText : noDataByQuery })) })] }, id), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default DropdownCompact;

package/components/dropdown/components/item/index.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import { getClassName, isNotNullish } from "@bodynarf/utils";
 import { ElementPosition } from "../../../../types";
 import Icon from "../../../icon/component";
 /** Single item in dropdown component */
 const DropdownItem = ({ item, selected, onClick }) => {
-    if (!isNullOrUndefined(item.icon)) {
-        return (_jsx(DropdownItemWithIcon, { item: item, selected: selected, onClick: onClick }));
+    if (isNotNullish(item.icon)) {
+        return (_jsx(DropdownItemWithIcon, { item: item, onClick: onClick, selected: selected }));
     }
     const className = getClassName([
         "bbr-dropdown-item",
@@ -13,7 +13,7 @@ const DropdownItem = ({ item, selected, onClick }) => {
         selected ? "is-active" : "",
         "is-flex is-align-items-center",
     ]);
-    return (_jsx("li", { onClick: onClick, className: className, "data-dropdown-item-value": item.value, title: item.title, children: item.displayValue }, item.id));
+    return (_jsx("li", { onClick: onClick, title: item.title, className: className, "data-dropdown-item-value": item.value, children: item.displayValue }, item.id));
 };
 export default DropdownItem;
 /** Single item in dropdown component with icon */
@@ -33,7 +33,7 @@ const DropdownItemWithIcon = ({ item, selected, onClick }) => {
             : "bbr-icon--left",
     ]);
     if (icon.position === ElementPosition.Right) {
-        return (_jsxs("li", { onClick: onClick, className: className, "data-dropdown-item-value": item.value, title: item.title, children: [item.displayValue, _jsx(Icon, { name: icon.name, size: icon.size, className: iconClassName })] }, item.id));
+        return (_jsxs("li", { onClick: onClick, title: item.title, className: className, "data-dropdown-item-value": item.value, children: [item.displayValue, _jsx(Icon, { name: icon.name, size: icon.size, className: iconClassName })] }, item.id));
     }
-    return (_jsxs("li", { onClick: onClick, className: className, "data-dropdown-item-value": item.value, title: item.title, children: [_jsx(Icon, { name: icon.name, size: icon.size, className: iconClassName }), item.displayValue] }, item.id));
+    return (_jsxs("li", { onClick: onClick, title: item.title, className: className, "data-dropdown-item-value": item.value, children: [_jsx(Icon, { name: icon.name, size: icon.size, className: iconClassName }), item.displayValue] }, item.id));
 };

package/components/dropdown/components/label/component/index.d.ts

@@ -8,16 +8,16 @@ export type DropdownLabelProps = {
     deselectable: boolean;
     /** Is search through items enabled */
     searchable: boolean;
+    /** Last user search */
+    lastSearch: string;
+    /** Is items list visible */
+    isListVisible: boolean;
     /** Selected item */
     selectedItem?: SelectableItem;
     /** Element classnames */
     className?: string;
     /** Click handler*/
     onClick: (event: MouseEvent<HTMLElement>) => void;
-    /** Last user search */
-    lastSearch: string;
-    /** Is items list visible */
-    isListVisible: boolean;
     /** Handler of search value change by user */
     onSearchChange: (value: string) => void;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/dropdown/components/label/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAMjD,oCAAoC;AACpC,MAAM,MAAM,kBAAkB,GAAG;IAC7B,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAEhB,wBAAwB;IACxB,YAAY,EAAE,OAAO,CAAC;IAEtB,sCAAsC;IACtC,UAAU,EAAE,OAAO,CAAC;IAEpB,oBAAoB;IACpB,YAAY,CAAC,EAAE,cAAc,CAAC;IAE9B,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,mBAAmB;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAElD,uBAAuB;IACvB,UAAU,EAAE,MAAM,CAAC;IAEnB,4BAA4B;IAC5B,aAAa,EAAE,OAAO,CAAC;IAEvB,6CAA6C;IAC7C,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,sBAAsB;AACtB,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAwCzC,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/dropdown/components/label/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAMjD,oCAAoC;AACpC,MAAM,MAAM,kBAAkB,GAAG;IAC7B,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAEhB,wBAAwB;IACxB,YAAY,EAAE,OAAO,CAAC;IAEtB,sCAAsC;IACtC,UAAU,EAAE,OAAO,CAAC;IAEpB,uBAAuB;IACvB,UAAU,EAAE,MAAM,CAAC;IAEnB,4BAA4B;IAC5B,aAAa,EAAE,OAAO,CAAC;IAEvB,oBAAoB;IACpB,YAAY,CAAC,EAAE,cAAc,CAAC;IAE9B,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,mBAAmB;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAElD,6CAA6C;IAC7C,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,sBAAsB;AACtB,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAwCzC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/components/dropdown/components/label/component/index.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { isNullOrUndefined } from "@bodynarf/utils";
+import { isNullish } from "@bodynarf/utils";
 import SelectedItemLabel from "../components/selected";
 import EmptyLabel from "../components/empty";
 import DropdownLabelWithSearch from "../components/withSearch";
 /** Label component */
 const DropdownLabel = ({ caption, selectedItem, onClick, deselectable, className, searchable, onSearchChange, lastSearch, isListVisible, }) => {
     if (searchable) {
-        return (_jsx(DropdownLabelWithSearch, { caption: caption, onClick: onClick, className: className, onSearchChange: onSearchChange, deselectable: deselectable, selectedItem: selectedItem, lastSearch: lastSearch, isListVisible: isListVisible }));
+        return (_jsx(DropdownLabelWithSearch, { caption: caption, onClick: onClick, className: className, lastSearch: lastSearch, deselectable: deselectable, selectedItem: selectedItem, isListVisible: isListVisible, onSearchChange: onSearchChange }));
     }
-    if (isNullOrUndefined(selectedItem)) {
+    if (isNullish(selectedItem)) {
         return (_jsx(EmptyLabel, { caption: caption, onClick: onClick, className: className }));
     }
-    return (_jsx(SelectedItemLabel, { deselectable: deselectable, className: className, onClick: onClick, selectedItem: selectedItem }));
+    return (_jsx(SelectedItemLabel, { onClick: onClick, className: className, deselectable: deselectable, selectedItem: selectedItem }));
 };
 export default DropdownLabel;

package/components/dropdown/components/label/components/selected/index.d.ts

@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { DropdownLabelProps } from "../../component";
 /** Props type of `SelectedItemLabel` */
-type SelectedItemLabelProps = Pick<DropdownLabelProps, "selectedItem" | "onClick" | "deselectable" | "className">;
+type SelectedItemLabelProps = Pick<DropdownLabelProps, "onClick" | "deselectable" | "className"> & Required<Pick<DropdownLabelProps, "selectedItem">>;
 /** Dropdown label when item is selected */
 declare const SelectedItemLabel: FC<SelectedItemLabelProps>;
 export default SelectedItemLabel;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/dropdown/components/label/components/selected/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAQ3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,wCAAwC;AACxC,KAAK,sBAAsB,GAAG,IAAI,CAC9B,kBAAkB,EAChB,cAAc,GAAG,SAAS,GAC1B,cAAc,GAAG,WAAW,CACjC,CAAC;AAEF,2CAA2C;AAC3C,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA6CjD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/dropdown/components/label/components/selected/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAQ3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,wCAAwC;AACxC,KAAK,sBAAsB,GACrB,IAAI,CACF,kBAAkB,EAChB,SAAS,GACT,cAAc,GAAG,WAAW,CACjC,GACC,QAAQ,CAAC,IAAI,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC,CAAC;AAEzD,2CAA2C;AAC3C,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA6CjD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/components/dropdown/components/label/components/selected/index.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
+import { getClassName, isNotNullish, isNullOrEmpty } from "@bodynarf/utils";
 import { ElementSize } from "../../../../../../types";
 import Icon from "../../../../../icon";
 import SelectedItemLabelWithIcon from "../selectedWithIcon";
 /** Dropdown label when item is selected */
 const SelectedItemLabel = ({ selectedItem, onClick, deselectable, className, }) => {
-    if (!isNullOrUndefined(selectedItem.icon)) {
-        return (_jsx(SelectedItemLabelWithIcon, { deselectable: deselectable, onClick: onClick, className: className, selectedItem: selectedItem }));
+    if (isNotNullish(selectedItem.icon)) {
+        return (_jsx(SelectedItemLabelWithIcon, { onClick: onClick, className: className, deselectable: deselectable, selectedItem: selectedItem }));
     }
     const elClassName = getClassName([
         "button",
@@ -14,7 +14,7 @@ const SelectedItemLabel = ({ selectedItem, onClick, deselectable, className, })
         "bbr-dropdown__label",
         isNullOrEmpty(className) ? "" : `${className}--md`,
     ]);
-    return (_jsxs("label", { className: elClassName, onClick: onClick, children: [!!deselectable &&
-                _jsx(Icon, { name: "plus-lg", size: ElementSize.Medium }), _jsx("span", { className: deselectable ? "px-2" : "pr-2", title: selectedItem.title, children: selectedItem.displayValue }), _jsx(Icon, { name: "arrow-down", size: ElementSize.Medium })] }));
+    return (_jsxs("label", { onClick: onClick, className: elClassName, children: [!!deselectable &&
+                _jsx(Icon, { name: "plus-lg", size: ElementSize.Medium }), _jsx("span", { title: selectedItem.title, className: deselectable ? "px-2" : "pr-2", children: selectedItem.displayValue }), _jsx(Icon, { name: "arrow-down", size: ElementSize.Medium })] }));
 };
 export default SelectedItemLabel;

package/components/dropdown/components/label/components/selectedWithIcon/index.d.ts

@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { DropdownLabelProps } from "../../component";
 /** Props type of `SelectedItemLabelWithIcon` */
-type SelectedItemLabelWithIconProps = Pick<DropdownLabelProps, "selectedItem" | "onClick" | "deselectable" | "className">;
+type SelectedItemLabelWithIconProps = Pick<DropdownLabelProps, "onClick" | "deselectable" | "className"> & Required<Pick<DropdownLabelProps, "selectedItem">>;
 /** Dropdown label when item is selected and it's have icon */
 declare const SelectedItemLabelWithIcon: FC<SelectedItemLabelWithIconProps>;
 export default SelectedItemLabelWithIcon;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/dropdown/components/label/components/selectedWithIcon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAO3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,gDAAgD;AAChD,KAAK,8BAA8B,GAAG,IAAI,CACtC,kBAAkB,EAChB,cAAc,GAAG,SAAS,GAC1B,cAAc,GAAG,WAAW,CACjC,CAAC;AAEF,8DAA8D;AAC9D,QAAA,MAAM,yBAAyB,EAAE,EAAE,CAAC,8BAA8B,CAgFjE,CAAC;AAEF,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/dropdown/components/label/components/selectedWithIcon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAO3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,gDAAgD;AAChD,KAAK,8BAA8B,GAC7B,IAAI,CACF,kBAAkB,EAChB,SAAS,GACT,cAAc,GAAG,WAAW,CACjC,GACC,QAAQ,CAAC,IAAI,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC,CAAC;AAEzD,8DAA8D;AAC9D,QAAA,MAAM,yBAAyB,EAAE,EAAE,CAAC,8BAA8B,CAgFjE,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

package/components/dropdown/components/label/components/selectedWithIcon/index.js

@@ -19,10 +19,10 @@ const SelectedItemLabelWithIcon = ({ selectedItem, onClick, deselectable, classN
         "bbr-dropdown-item__icon"
     ]);
     if (icon.position === ElementPosition.Right) {
-        return (_jsxs("label", { className: elClassName, onClick: onClick, children: [!!deselectable &&
-                    _jsx(Icon, { name: "plus-lg", size: ElementSize.Medium }), _jsxs("span", { className: deselectable ? "px-2" : "pr-2", title: selectedItem.title, children: [selectedItem.displayValue, _jsx(Icon, { name: icon.name, size: icon.size, className: iconClassName })] }), _jsx(Icon, { name: "arrow-down", size: ElementSize.Medium })] }));
+        return (_jsxs("label", { onClick: onClick, className: elClassName, children: [!!deselectable &&
+                    _jsx(Icon, { name: "plus-lg", size: ElementSize.Medium }), _jsxs("span", { title: selectedItem.title, className: deselectable ? "px-2" : "pr-2", children: [selectedItem.displayValue, _jsx(Icon, { name: icon.name, size: icon.size, className: iconClassName })] }), _jsx(Icon, { name: "arrow-down", size: ElementSize.Medium })] }));
     }
-    return (_jsxs("label", { className: elClassName, onClick: onClick, children: [!!deselectable &&
-                _jsx(Icon, { name: "plus-lg", size: ElementSize.Medium }), _jsxs("span", { className: deselectable ? "mx-2" : "mr-2", title: selectedItem.title, children: [_jsx(Icon, { name: icon.name, size: icon.size, className: iconClassName }), selectedItem.displayValue] }), _jsx(Icon, { name: "arrow-down", size: ElementSize.Medium })] }));
+    return (_jsxs("label", { onClick: onClick, className: elClassName, children: [!!deselectable &&
+                _jsx(Icon, { name: "plus-lg", size: ElementSize.Medium }), _jsxs("span", { title: selectedItem.title, className: deselectable ? "mx-2" : "mr-2", children: [_jsx(Icon, { name: icon.name, size: icon.size, className: iconClassName }), selectedItem.displayValue] }), _jsx(Icon, { name: "arrow-down", size: ElementSize.Medium })] }));
 };
 export default SelectedItemLabelWithIcon;