@bodynarf/react.components 1.9.1 → 1.10.0

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import "./style.scss";
 import { AccordionProps } from "..";
 /** Accordion panel */

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":"AAQA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,cAAc,EAAE,MAAM,IAAI,CAAC;AAEpC,sBAAsB;AACtB,QAAA,MAAM,SAAS,2FAOZ,cAAc,KAAG,WA+DnB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/accordion/component/index.tsx"],"names":[],"mappings":";AAQA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,cAAc,EAAE,MAAM,IAAI,CAAC;AAEpC,sBAAsB;AACtB,QAAA,MAAM,SAAS,2FAOZ,cAAc,KAAG,WA+DnB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/components/accordion/component/index.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import { emptyFn, getClassName, isNullOrUndefined } from "@bodynarf/utils";
 import { ElementSize } from "../../../types";
 import { mapDataAttributes } from "../../../utils";
 import Icon from "../../icon";
 import "./style.scss";
 /** Accordion panel */
-const Accordion = ({ children, caption, style, size = ElementSize.Normal, defaultExpanded = false, onToggle, className, title, data, }) => {
+const Accordion = ({ children, caption, style, size = ElementSize.Normal, defaultExpanded = false, onToggle = emptyFn, className, title, data, }) => {
     const expandablePanelRef = useRef(null);
     const [isExpanded, setIsExpanded] = useState(defaultExpanded);
     const [maxHeight, setMaxHeight] = useState(defaultExpanded ? undefined : 0);
@@ -18,7 +18,7 @@ const Accordion = ({ children, caption, style, size = ElementSize.Normal, defaul
     }, [defaultExpanded]);
     useEffect(() => setIsExpanded(maxHeight !== 0), [maxHeight]);
     useEffect(() => {
-        onToggle?.call(undefined, !isExpanded);
+        onToggle.call(undefined, !isExpanded);
     }, [isExpanded, onToggle]);
     const elClassName = getClassName([
         "bbr-accordion",

package/components/anchor/component/index.js

@@ -14,7 +14,7 @@ export default function Anchor(props) {
         props.disableHovering === true ? "bbr-anchor--unhoverable" : ""
     ]);
     if (isNullOrUndefined(props.icon)) {
-        return (_jsx(SimpleAnchor, { ...props, className: className, onClick: props.onClick }));
+        return (_jsx(SimpleAnchor, { ...props, className: className }));
     }
-    return (_jsx(AnchorWithIcon, { ...props, icon: props.icon, className: className, onClick: props.onClick }));
+    return (_jsx(AnchorWithIcon, { ...props, icon: props.icon, className: className }));
 }

package/components/anchor/components/anchorWithIcon/index.d.ts

@@ -1,5 +1,12 @@
-import { AnchorWithIconProps } from "../..";
+/// <reference types="react" />
+import { ElementIcon } from "../../../../types";
+import { AnchorProps } from "../..";
+/** Props type of `AnchorWithIcon` */
+interface AnchorWithIconProps extends Omit<AnchorProps, "icon"> {
+    /** Configuration of icon */
+    icon: ElementIcon;
+}
 /** Anchor with icon component */
-declare const AnchorWithIcon: ({ href, className, onClick, caption, target, icon, title, data, }: AnchorWithIconProps) => JSX.Element;
+declare const AnchorWithIcon: ({ href, caption, target, icon, onClick, className, title, data, }: AnchorWithIconProps) => JSX.Element;
 export default AnchorWithIcon;
 //# sourceMappingURL=index.d.ts.map

package/components/anchor/components/anchorWithIcon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/anchor/components/anchorWithIcon/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAE5C,iCAAiC;AACjC,QAAA,MAAM,cAAc,sEAKjB,mBAAmB,KAAG,WA0CxB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/anchor/components/anchorWithIcon/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAmB,MAAM,YAAY,CAAC;AAI1D,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,qCAAqC;AACrC,UAAU,mBAAoB,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;IAC3D,4BAA4B;IAC5B,IAAI,EAAE,WAAW,CAAC;CACrB;AAED,iCAAiC;AACjC,QAAA,MAAM,cAAc,sEAMjB,mBAAmB,KAAG,WA0CxB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/components/anchor/components/anchorWithIcon/index.js

@@ -4,7 +4,7 @@ import { ElementPosition } from "../../../../types";
 import { mapDataAttributes } from "../../../../utils";
 import Icon from "../../../icon";
 /** Anchor with icon component */
-const AnchorWithIcon = ({ href, className, onClick, caption, target, icon, title, data, }) => {
+const AnchorWithIcon = ({ href, caption, target, icon, onClick, className, title, data, }) => {
     const iconClassName = isNullOrEmpty(caption)
         ? icon.className
         : icon.position === ElementPosition.Right
@@ -16,6 +16,6 @@ const AnchorWithIcon = ({ href, className, onClick, caption, target, icon, title
     if (icon.position === ElementPosition.Right) {
         return (_jsxs("a", { href: href, target: target, onClick: onClick, className: className, title: title, ...dataAttributes, children: [caption, _jsx(Icon, { ...icon, className: iconClassName })] }));
     }
-    return (_jsxs("a", { href: href, className: className, target: target, onClick: onClick, title: title, ...dataAttributes, children: [_jsx(Icon, { ...icon, className: iconClassName }), caption] }));
+    return (_jsxs("a", { href: href, target: target, onClick: onClick, className: className, title: title, ...dataAttributes, children: [_jsx(Icon, { ...icon, className: iconClassName }), caption] }));
 };
 export default AnchorWithIcon;

package/components/anchor/components/simpleAnchor/index.d.ts

@@ -1,5 +1,6 @@
-import { SimpleAnchorProps } from "../..";
+/// <reference types="react" />
+import { AnchorProps } from "../..";
 /** Simple anchor component, without icon */
-declare const SimpleAnchor: ({ href, className, onClick, caption, target, title, data, }: SimpleAnchorProps) => JSX.Element;
+declare const SimpleAnchor: ({ href, className, caption, target, onClick, title, data, }: AnchorProps) => JSX.Element;
 export default SimpleAnchor;
 //# sourceMappingURL=index.d.ts.map

package/components/anchor/components/simpleAnchor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/anchor/components/simpleAnchor/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,4CAA4C;AAC5C,QAAA,MAAM,YAAY,gEAIf,iBAAiB,KAAG,WAkBtB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/anchor/components/simpleAnchor/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,4CAA4C;AAC5C,QAAA,MAAM,YAAY,gEAKf,WAAW,KAAG,WAkBhB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/components/anchor/components/simpleAnchor/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { isNullOrUndefined } from "@bodynarf/utils";
 import { mapDataAttributes } from "../../../../utils";
 /** Simple anchor component, without icon */
-const SimpleAnchor = ({ href, className, onClick, caption, target, title, data, }) => {
+const SimpleAnchor = ({ href, className, caption, target, onClick, title, data, }) => {
     const dataAttributes = isNullOrUndefined(data)
         ? undefined
         : mapDataAttributes(data);

package/components/anchor/types.d.ts

@@ -1,25 +1,17 @@
 import { BaseElementProps, ElementIcon } from "../../types";
 /** Anchor component props type */
-export interface AnchorProps extends Omit<SimpleAnchorProps, "className"> {
+export interface AnchorProps extends BaseElementProps {
     /** Configuration od inner icon */
     icon?: ElementIcon;
-    /** Additional class names */
-    className?: string;
     /** Should css hovering effects be disabled */
     disableHovering?: boolean;
-}
-export interface SimpleAnchorProps extends BaseElementProps {
     /** Link destination */
     href?: string;
-    /** Click handler */
-    onClick?: () => void;
     /** Link caption  */
     caption?: string;
     /** Where to open the linked document */
     target?: "_blank" | "_top";
-}
-export interface AnchorWithIconProps extends SimpleAnchorProps {
-    /** Configuration of icon */
-    icon: ElementIcon;
+    /** Click handler */
+    onClick?: () => void;
 }
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/anchor/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE3D,kCAAkC;AAClC,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,iBAAiB,EAAE,WAAW,CAAC;IACrE,kCAAkC;IAClC,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACvD,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,wCAAwC;IACxC,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CAC9B;AAED,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC1D,4BAA4B;IAC5B,IAAI,EAAE,WAAW,CAAC;CACrB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/anchor/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE3D,kCAAkC;AAClC,MAAM,WAAW,WAAY,SAAQ,gBAAgB;IACjD,kCAAkC;IAClC,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,wCAAwC;IACxC,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAE3B,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB"}

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

@@ -1,34 +1,9 @@
-/// <reference types="react" />
-import { BaseElementProps, ElementSize } from "../../../types";
-import { BreadCrumb } from "../types";
-/** Breadcrumbs component props type */
-export interface BreadcrumbsProps extends BaseElementProps {
-    /** Breadcrumbs items */
-    items: Array<BreadCrumb>;
-    /**
-     * Function that generates each element
-     * @example
-     * <Link to={breadCrumb.path}>
-     *     {breadCrumb.icon &&
-     *         <span>
-     *             <Icon {...breadCrumb.icon} />
-     *         </span>
-     *     }
-     *     <span>
-     *         {breadCrumb.title}
-     *     </span>
-     * </Link>
-     *
-    */
-    elementGenerator: (bc: BreadCrumb) => JSX.Element;
-    /** Panel size */
-    size?: ElementSize;
-    /** Items position */
-    position?: "centered" | "right";
-    /** Items separator. By default `arrow` */
-    separator?: "arrow" | "bullet" | "dot" | "succeeds";
-}
-/** Breadcrumbs navigation panel */
-declare const BreadCrumbs: ({ items, size, position, separator, elementGenerator, className, title, data, }: BreadcrumbsProps) => JSX.Element;
+import { FC } from "react";
+import { BreadcrumbsProps } from "..";
+/**
+ * Breadcrumbs navigation panel
+ * @description If items are not specified, an empty component will be displayed.
+*/
+declare const BreadCrumbs: FC<BreadcrumbsProps>;
 export default BreadCrumbs;
 //# sourceMappingURL=index.d.ts.map

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":";AAEA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAG3D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,uCAAuC;AACvC,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACtD,wBAAwB;IACxB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAEzB;;;;;;;;;;;;;;MAcE;IACF,gBAAgB,EAAE,CAAC,EAAE,EAAE,UAAU,KAAK,GAAG,CAAC,OAAO,CAAC;IAElD,iBAAiB;IACjB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAEhC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,UAAU,CAAC;CACvD;AAED,mCAAmC;AACnC,QAAA,MAAM,WAAW,oFAMd,gBAAgB,KAAG,WAsCrB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/breadcrumbs/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAQ3B,OAAO,EAAc,gBAAgB,EAAE,MAAM,IAAI,CAAC;AAElD;;;EAGE;AACF,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA4CrC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/components/breadcrumbs/component/index.js

@@ -1,21 +1,37 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
 import { mapDataAttributes } from "../../../utils";
-/** Breadcrumbs navigation panel */
-const BreadCrumbs = ({ items, size, position, separator = "arrow", elementGenerator, className, title, data, }) => {
+import { ElementPosition, ElementSize } from "../../../types";
+import Icon from "../../icon";
+/**
+ * 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 = ((bc) => _jsx(BreadCrumbItem, { item: bc })), className, title, data, }) => {
     if (items.length <= 1) {
         return _jsx(_Fragment, {});
     }
     const elClassName = getClassName([
+        "bbr-breadcrumbs",
         "breadcrumb",
         className,
-        isNullOrUndefined(size) ? undefined : `is-${size}`,
+        size === ElementSize.Normal ? undefined : `is-${size}`,
         `has-${separator}-separator`,
-        isNullOrUndefined(position) ? undefined : `is-${position}`,
+        position === ElementPosition.Left ? undefined : `is-${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 => _jsx("li", { className: breadCrumb.active ? "is-active" : undefined, "aria-current": breadCrumb.active ? "page" : undefined, children: elementGenerator(breadCrumb) }, breadCrumb.path)) }) }));
+    return (_jsx("nav", { className: elClassName, "aria-label": "breadcrumbs", title: title, ...dataAttributes, children: _jsx("ul", { children: items.map(breadCrumb => _jsx("li", { className: breadCrumb.active ? "is-active" : undefined, children: elementGenerator(breadCrumb) }, breadCrumb.path)) }) }));
 };
 export default BreadCrumbs;
+/** Template for single breadcrumb */
+const BreadCrumbItem = ({ item, icon }) => {
+    if (isNullOrUndefined(icon)) {
+        return (_jsx("a", { href: item.path, "aria-current": item.active ? "page" : undefined, children: item.title }));
+    }
+    if (icon?.position === ElementPosition.Right) {
+        return (_jsxs("a", { href: item.path, "aria-current": item.active ? "page" : undefined, children: [item.title, _jsx(Icon, { ...icon })] }));
+    }
+    return (_jsxs("a", { href: item.path, "aria-current": item.active ? "page" : undefined, children: [_jsx(Icon, { ...icon }), item.title] }));
+};

package/components/breadcrumbs/types.d.ts

@@ -1,4 +1,5 @@
-import { ElementIcon } from "../../types";
+/// <reference types="react" />
+import { BaseElementProps, ElementIcon, ElementPosition, ElementSize } from "../../types";
 /** Breadcrumb item */
 export interface BreadCrumb {
     /** Displayed text */
@@ -10,4 +11,32 @@ export interface BreadCrumb {
     /** Bootstrap icon class name */
     icon?: ElementIcon;
 }
+/** Breadcrumbs component props type */
+export interface BreadcrumbsProps extends BaseElementProps {
+    /** Breadcrumbs items */
+    items: Array<BreadCrumb>;
+    /**
+     * Function that generates each element
+     * @example
+     * elementGenerator={breadCrumb =>
+     *  <div>
+     *     {breadCrumb.icon &&
+     *         <span>
+     *             <Icon {...breadCrumb.icon} />
+     *         </span>
+     *     }
+     *     <span>
+     *         {breadCrumb.title}
+     *     </span>
+     *  </div>
+     * }
+    */
+    elementGenerator?: (bc: BreadCrumb) => JSX.Element;
+    /** 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,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzC,sBAAsB;AACtB,MAAM,WAAW,UAAU;IACvB,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IAEd,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IAEb,6CAA6C;IAC7C,MAAM,EAAE,OAAO,CAAC;IAEhB,gCAAgC;IAChC,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumbs/types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzF,sBAAsB;AACtB,MAAM,WAAW,UAAU;IACvB,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IAEd,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IAMb,6CAA6C;IAC7C,MAAM,EAAE,OAAO,CAAC;IAEhB,gCAAgC;IAChC,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,uCAAuC;AACvC,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACtD,wBAAwB;IACxB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAEzB;;;;;;;;;;;;;;;MAeE;IACF,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,UAAU,KAAK,GAAG,CAAC,OAAO,CAAC;IAEnD,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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/button/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAIjC;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA4C9D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/button/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAIjC;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA0C9D"}

package/components/button/component/index.js

@@ -13,8 +13,8 @@ export default function Button(props) {
     }
     const { light = false, outlined = false, rounded = false, isLoading = false, static: isStatic = false } = props;
     const className = getClassName([
-        "button",
         "bbr-button",
+        "button",
         props.className,
         `is-${props.type}`,
         light ? "is-light" : "",
@@ -25,9 +25,9 @@ export default function Button(props) {
         isStatic ? "is-static" : "",
     ]);
     if (!isNullOrUndefined(props.icon)) {
-        return (_jsx(ButtonWithIcon, { ...props, className: className, onClick: props.onClick, icon: props.icon }));
+        return (_jsx(ButtonWithIcon, { ...props, icon: props.icon, className: className }));
     }
     else {
-        return (_jsx(SimpleButton, { ...props, className: className, onClick: props.onClick }));
+        return (_jsx(SimpleButton, { ...props, className: className }));
     }
 }

package/components/button/types.d.ts

@@ -27,7 +27,7 @@ export interface ButtonProps extends BaseElementProps {
 export declare type ButtonType = // TODO: to enum
 "default" /** color: transparent */ | "primary" /** color: sea-wave green */ | "link" /** color: blue-violet */ | "info" /** color: sky-blue */ | "success" /** color: green */ | "warning" /** color: yellow */ | "danger" /** color: red */ | "white" /** color: white */ | "light" /** color: light-gray */ | "dark" /** color: dark-gray */ | "black" /** color: black */ | "text" /** Underline text with color: gray */ | "ghost" /** Blue underline text with color: transparent */;
 /** Simple button props type */
-export interface SimpleButtonProps extends Omit<ButtonProps, 'className'> {
+export interface SimpleButtonProps extends Omit<ButtonProps, "className"> {
     /** Button class name*/
     className: string;
 }

package/components/dropdown/component/style.scss

@@ -17,7 +17,7 @@
         }
     }
 
-    label#{&}__label {
+    #{&}__label {
         cursor: pointer;
         user-select: none;
         display: flex;
@@ -88,7 +88,7 @@
     }
 
     &.is-active {
-        label.bbr-dropdown__label .bbr-icon.bi-arrow-down::before {
+        .bbr-dropdown__label .bbr-icon.bi-arrow-down::before {
             transform: rotate(180deg);
         }
     }
@@ -108,7 +108,7 @@
     }
 
     &--disabled {
-        label.bbr-dropdown__label {
+        .bbr-dropdown__label {
             background-color: hsl(0deg, 0%, 96%);
             border-color: hsl(0deg, 0%, 96%);
             box-shadow: none;

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

@@ -1,4 +1,11 @@
+import { FC } from "react";
 import { DropdownProps } from "../..";
-declare const DropdownCompact: ({ items, value, onSelect, deselectable, hideOnOuterClick, listMaxHeight, placeholder, compact, disabled, validationState, className, title, data, hint, }: DropdownProps) => JSX.Element;
+/** Props type of `DropdownCompact` */
+declare type DropdownCompactProps = DropdownProps & {
+    /** Manual compact dropdown identifier */
+    id?: string;
+};
+/** Dropdown component without label */
+declare const DropdownCompact: FC<DropdownCompactProps>;
 export default DropdownCompact;
 //# sourceMappingURL=index.d.ts.map

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":"AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,QAAA,MAAM,eAAe,8JAUlB,aAAa,KAAG,WAsHlB,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,EAAE,MAAM,OAAO,CAAC;AAQrE,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,sCAAsC;AACtC,aAAK,oBAAoB,GAAG,aAAa,GAAG;IACxC,yCAAyC;IACzC,EAAE,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,uCAAuC;AACvC,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA4J7C,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -6,9 +6,12 @@ import { useComponentOutsideClick } from "../../../../hooks";
 import InternalHint from "../../../primitives/internal/hint";
 import DropdownItem from "../../components/item";
 import DropdownLabel from "../../components/label";
-const DropdownCompact = ({ items, value, onSelect, deselectable = false, hideOnOuterClick, listMaxHeight, placeholder, compact = false, disabled = false, validationState, className, title, data, hint, }) => {
-    const id = useId();
+/** Dropdown component without label */
+const DropdownCompact = ({ items, value, onSelect, hideOnOuterClick, 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 [isListVisible, setListVisible] = useState(false);
+    const [searchValue, setSearchValue] = useState(null);
     const onItemClick = useCallback((event) => {
         if (disabled) {
             return;
@@ -30,6 +33,7 @@ const DropdownCompact = ({ items, value, onSelect, deselectable = false, hideOnO
             return;
         }
         onSelect(item);
+        setSearchValue(null);
         setListVisible(false);
     }, [setListVisible, value, items, onSelect, disabled]);
     const onLabelClick = useCallback((event) => {
@@ -42,11 +46,16 @@ const DropdownCompact = ({ items, value, onSelect, deselectable = false, hideOnO
         }
         if (target.classList.contains("bi-plus-lg")) {
             onSelect(undefined);
+            setSearchValue(null);
         }
         else {
             setListVisible(state => !state);
         }
     }, [onSelect, setListVisible, disabled]);
+    const onSearchChange = useCallback((value) => {
+        setSearchValue(value.length === 0 ? null : value);
+        onSelect(undefined);
+    }, [setSearchValue, onSelect]);
     useComponentOutsideClick(`[data-dropdown-id="${id}"]`, isListVisible, () => setListVisible(false), hideOnOuterClick);
     const classNames = getClassName([
         "bbr-dropdown",
@@ -58,11 +67,14 @@ const DropdownCompact = ({ items, value, onSelect, deselectable = false, hideOnO
         "dropdown",
     ]);
     const labelComponentClassName = getStyleClassName(undefined, validationState);
+    const filteredItems = isNullOrEmpty(searchValue)
+        ? items
+        : items.filter(({ displayValue }) => displayValue.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()));
     const dataAttributes = isNullOrUndefined(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, deselectable: deselectable, className: labelComponentClassName }), _jsx("div", { className: "dropdown-menu", children: items.length > 0
-                            ? _jsx("ul", { className: "dropdown-content", style: { maxHeight: listMaxHeight }, children: items.map(item => _jsx(DropdownItem, { item: item, onClick: onItemClick, selected: value?.value === item.value }, item.id)) })
-                            : _jsx("span", { className: "dropdown-content dropdown-item", children: "No items found" }) })] }, id), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+    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", children: isNullOrEmpty(searchValue) ? noDataText : noDataByQuery }) })] }, id), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default DropdownCompact;

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

@@ -1,18 +1,2 @@
-import { MouseEvent } from "react";
-import { SelectableItem } from "../..";
-export interface DropdownLabelProps {
-    /** Caption when no items selected */
-    caption: string;
-    /** Can user deselect */
-    deselectable: boolean;
-    /** Selected item */
-    selectedItem?: SelectableItem;
-    /** Element classnames */
-    className?: string;
-    /** Click handler*/
-    onClick: (event: MouseEvent<HTMLLabelElement>) => void;
-}
-/** Label component */
-declare const DropdownLabel: ({ caption, selectedItem, onClick, deselectable, className, }: DropdownLabelProps) => JSX.Element;
-export default DropdownLabel;
+export { default } from "./component";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/label/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAOnC,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,kBAAkB;IAC/B,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAEhB,wBAAwB;IACxB,YAAY,EAAE,OAAO,CAAC;IAEtB,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,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC1D;AAED,sBAAsB;AACtB,QAAA,MAAM,aAAa,iEAIhB,kBAAkB,KAAG,WA4CvB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/label/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}

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

@@ -1,54 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
-import { ElementPosition, ElementSize } from "../../../../types";
-import Icon from "../../../icon";
-/** Label component */
-const DropdownLabel = ({ caption, selectedItem, onClick, deselectable, className, }) => {
-    if (isNullOrUndefined(selectedItem)) {
-        return _jsx(EmptyLabel, { caption: caption, deselectable: deselectable, onClick: onClick, className: className });
-    }
-    if (!isNullOrUndefined(selectedItem.icon)) {
-        return _jsx(SelectedItemLabelWithIcon, { caption: caption, deselectable: deselectable, onClick: onClick, className: className, selectedItem: selectedItem });
-    }
-    const elClassName = getClassName([
-        "dropdown-trigger",
-        "bbr-dropdown__label",
-        isNullOrEmpty(className) ? "" : `${className}--md`,
-        "button"
-    ]);
-    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 })] }));
-};
-export default DropdownLabel;
-const EmptyLabel = ({ caption, onClick, className, }) => {
-    const elClassName = getClassName([
-        "dropdown-trigger",
-        "bbr-dropdown__label",
-        isNullOrEmpty(className) ? "" : `${className}--md`,
-        "bbr-dropdown__label--default",
-        "button"
-    ]);
-    return (_jsxs("label", { className: elClassName, onClick: onClick, children: [_jsx("span", { className: "mr-2", children: caption }), _jsx(Icon, { name: "arrow-down", size: ElementSize.Medium })] }));
-};
-const SelectedItemLabelWithIcon = ({ selectedItem, onClick, deselectable, className, }) => {
-    const elClassName = getClassName([
-        "dropdown-trigger",
-        "bbr-dropdown__label",
-        isNullOrEmpty(className) ? "" : `${className}--md`,
-        "button"
-    ]);
-    const icon = selectedItem.icon;
-    const iconClassName = getClassName([
-        icon.className,
-        icon.position === ElementPosition.Right
-            ? "bbr-icon--right"
-            : "bbr-icon--left",
-        "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", { 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 })] }));
-};
+export { default } from "./component";

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

@@ -1,4 +1,6 @@
+import { FC } from "react";
 import { DropdownProps } from "../..";
-declare const DropdownWithLabel: ({ items, value, onSelect, validationState, deselectable, hideOnOuterClick, listMaxHeight, label, placeholder, disabled, className, title, data, hint, }: DropdownProps) => JSX.Element;
+/** Dropdown component with label */
+declare const DropdownWithLabel: FC<DropdownProps>;
 export default DropdownWithLabel;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/withLabel/index.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,QAAA,MAAM,iBAAiB,4JASpB,aAAa,KAAG,WAiMlB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/withLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAS,MAAM,OAAO,CAAC;AAKlC,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGtC,oCAAoC;AACpC,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,aAAa,CAgBxC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}