@bodynarf/react.components 1.12.5 → 1.13.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/dropdown/components/label/components/withSearch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAA2B,MAAM,OAAO,CAAC;AAOjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,OAAO,cAAc,CAAC;AAEtB,8CAA8C;AAC9C,aAAK,4BAA4B,GAAG,IAAI,CACpC,kBAAkB,EAClB,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,cAAc,GAAG,cAAc,CACxE,GAAG;IACA,uBAAuB;IACvB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1B,4BAA4B;IAC5B,aAAa,EAAE,OAAO,CAAC;IAEvB,6CAA6C;IAC7C,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,kCAAkC;AAClC,QAAA,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAyD7D,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/dropdown/components/label/components/withSearch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAA2B,MAAM,OAAO,CAAC;AAOjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,OAAO,cAAc,CAAC;AAEtB,8CAA8C;AAC9C,KAAK,4BAA4B,GAAG,IAAI,CACpC,kBAAkB,EAClB,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,cAAc,GAAG,cAAc,CACxE,GAAG;IACA,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,kCAAkC;AAClC,QAAA,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CA+D7D,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

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

@@ -1,33 +1,33 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
-import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
-import { ElementSize } from "../../../../../../types";
-import Icon from "../../../../../icon";
-import "./style.scss";
-/** Label component with search */
-const DropdownLabelWithSearch = ({ caption, className, deselectable, lastSearch, onSearchChange, isListVisible, onClick, selectedItem, }) => {
-    const elClassName = getClassName([
-        "dropdown-trigger",
-        "bbr-dropdown__label",
-        isNullOrEmpty(className) ? "" : `${className}--md`,
-        "button",
-        "bbr-dropdown__search"
-    ]);
-    const onChange = useCallback((event) => onSearchChange(event.target.value), [onSearchChange]);
-    const inputClassName = getClassName([
-        "input",
-        deselectable && !isNullOrUndefined(selectedItem) ? "px-2" : "pl-0"
-    ]);
-    const containerOnClick = useCallback((event) => {
-        event.stopPropagation();
-        const target = event.target;
-        if (target.nodeName !== "I" && isListVisible) {
-            return;
-        }
-        onClick(event);
-    }, [isListVisible, onClick]);
-    return (_jsxs("div", { className: elClassName, onClick: containerOnClick, children: [deselectable && !isNullOrUndefined(selectedItem)
-                &&
-                    _jsx(Icon, { name: "plus-lg", size: ElementSize.Medium }), _jsx("input", { type: "text", onChange: onChange, placeholder: caption, className: inputClassName, value: selectedItem?.displayValue ?? lastSearch ?? "" }), _jsx(Icon, { name: "arrow-down", size: ElementSize.Medium })] }));
-};
-export default DropdownLabelWithSearch;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementSize } from "../../../../../../types";
+import Icon from "../../../../../icon";
+import "./style.scss";
+/** Label component with search */
+const DropdownLabelWithSearch = ({ caption, className, deselectable, lastSearch, onSearchChange, isListVisible, onClick, selectedItem, }) => {
+    const elClassName = getClassName([
+        "button",
+        "dropdown-trigger",
+        "bbr-dropdown__label",
+        isNullOrEmpty(className) ? "" : `${className}--md`, // "success--md" OR "danger--md", check dropdown/styles.scss
+        "bbr-dropdown__search"
+    ]);
+    const onChange = useCallback((event) => onSearchChange(event.target.value), [onSearchChange]);
+    const inputClassName = getClassName([
+        "input",
+        deselectable && !isNullOrUndefined(selectedItem) ? "px-2" : "pl-0"
+    ]);
+    const containerOnClick = useCallback((event) => {
+        event.stopPropagation();
+        const target = event.target;
+        if (target.nodeName !== "I" && isListVisible) {
+            return;
+        }
+        onClick(event);
+    }, [isListVisible, onClick]);
+    return (_jsxs("div", { className: elClassName, onClick: containerOnClick, children: [!!deselectable && !isNullOrUndefined(selectedItem)
+                &&
+                    _jsx(Icon, { name: "plus-lg", size: ElementSize.Medium }), _jsx("input", { type: "text", onChange: onChange, placeholder: caption, className: inputClassName, value: selectedItem?.displayValue ?? lastSearch }), _jsx(Icon, { name: "arrow-down", size: ElementSize.Medium })] }));
+};
+export default DropdownLabelWithSearch;

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

@@ -1,2 +1,2 @@
-export { default } from "./component";
+export { default } from "./component";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-export { default } from "./component";
+export { default } from "./component";

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

@@ -1,6 +1,6 @@
-import { FC } from "react";
-import { DropdownProps } from "../..";
-/** Dropdown component with label */
-declare const DropdownWithLabel: FC<DropdownProps>;
-export default DropdownWithLabel;
+import { FC } from "react";
+import { DropdownProps } from "../..";
+/** Dropdown component with label */
+declare const DropdownWithLabel: FC<DropdownProps>;
+export default DropdownWithLabel;
 //# sourceMappingURL=index.d.ts.map

package/components/dropdown/components/withLabel/index.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useId } from "react";
-import { ElementSize } from "../../../../types";
-import LabelWrapper from "../../../primitives/internal/componentWithLabel";
-import DropdownCompact from "../compact";
-/** Dropdown component with label */
-const DropdownWithLabel = (props) => {
-    const id = useId();
-    return (_jsx(LabelWrapper, { id: id, label: props.label, size: ElementSize.Normal, children: _jsx(DropdownCompact, { ...props, id: id }) }));
-};
-export default DropdownWithLabel;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { ElementSize } from "../../../../types";
+import LabelWrapper from "../../../primitives/internal/componentWithLabel";
+import DropdownCompact from "../compact";
+/** Dropdown component with label */
+const DropdownWithLabel = (props) => {
+    const id = useId();
+    return (_jsx(LabelWrapper, { id: id, label: props.label, size: ElementSize.Normal, children: _jsx(DropdownCompact, { ...props, id: id }) }));
+};
+export default DropdownWithLabel;

package/components/dropdown/index.d.ts

@@ -1,3 +1,3 @@
-export { default } from "./component";
-export * from "./types";
+export { default } from "./component";
+export * from "./types";
 //# sourceMappingURL=index.d.ts.map

package/components/dropdown/index.js

@@ -1,2 +1,2 @@
-export { default } from "./component";
-export * from "./types";
+export { default } from "./component";
+export * from "./types";

package/components/dropdown/types.d.ts

@@ -1,65 +1,66 @@
-import { BaseElementProps, HintConfiguration, ValidationState, LabelConfiguration, ElementIcon } from "../../types";
-/** Dropdown item */
-export interface SelectableItem {
-    /** Unique item identifier */
-    id: string;
-    /** Item value */
-    value: string;
-    /** Displaying text */
-    displayValue: string;
-    /** Element title */
-    title?: string;
-    /** Element icon configuration */
-    icon?: ElementIcon;
-}
-/** Dropdown component props type */
-export interface DropdownProps extends BaseElementProps {
-    /** Items which can be selected */
-    items: Array<SelectableItem>;
-    /** Input element placeholder */
-    placeholder: string;
-    /**
-     * Action to update selected value, which stored outside
-    */
-    onSelect: (item?: SelectableItem) => void;
-    /**
-     * Selected value.
-     * Must be stored outside
-    */
-    value?: SelectableItem;
-    /** Hide dropdown list when its opened and user click outside */
-    hideOnOuterClick: boolean;
-    /** Can user deselect */
-    deselectable?: boolean;
-    /** Custom dropdown list max-height property */
-    listMaxHeight?: string;
-    /**
-     * Should dropdown be compact
-     * Will have width by maximum current selection item width
-     */
-    compact?: boolean;
-    /**
-     * Is element disabled
-     */
-    disabled?: boolean;
-    /** Label configuration */
-    label?: LabelConfiguration;
-    /** Current validation state */
-    validationState?: ValidationState;
-    /**
-     * Field hint configuration.
-     * Provides additional information to user to help fill the field
-     *
-     * (!) Hint will be overridden by the validation state, if specified
-     */
-    hint?: HintConfiguration;
-    /** Caption for dropdown list when there's no data to display */
-    noDataText?: string;
-    /** Is search through items enabled */
-    searchable?: boolean;
-    /**
-     * Text which would be displayed when search query applied and no items found
-     */
-    noDataByQuery?: string;
-}
+import { Optional } from "@bodynarf/utils";
+import { BaseElementProps, HintConfiguration, ValidationState, LabelConfiguration, ElementIcon } from "../../types";
+/** Dropdown item */
+export interface SelectableItem {
+    /** Unique item identifier */
+    id: string;
+    /** Item value */
+    value: string;
+    /** Displaying text */
+    displayValue: string;
+    /** Element title */
+    title?: string;
+    /** Element icon configuration */
+    icon?: ElementIcon;
+}
+/** Dropdown component props type */
+export interface DropdownProps extends BaseElementProps {
+    /** Items which can be selected */
+    items: Array<SelectableItem>;
+    /**
+     * Action to update selected value, which stored outside
+    */
+    onSelect: (item?: SelectableItem) => void;
+    /** Input element placeholder */
+    placeholder?: string;
+    /**
+     * Selected value.
+     * Must be stored outside
+    */
+    value: Optional<SelectableItem>;
+    /** Hide component list when its opened and user click outside */
+    hideOnOuterClick?: boolean;
+    /** Can user deselect */
+    deselectable?: boolean;
+    /** Custom component list max-height property */
+    listMaxHeight?: string;
+    /**
+     * Should component be compact
+     * Will have width by maximum current selection item width
+     */
+    compact?: boolean;
+    /**
+     * Is element disabled
+     */
+    disabled?: boolean;
+    /** Label configuration */
+    label?: LabelConfiguration;
+    /** Current validation state */
+    validationState?: ValidationState;
+    /**
+     * Field hint configuration.
+     * Provides additional information to user to help fill the field
+     *
+     * (!) Hint will be overridden by the validation state, if specified
+     */
+    hint?: HintConfiguration;
+    /** Caption for component list when there's no data to display */
+    noDataText?: string;
+    /** Is search through items enabled */
+    searchable?: boolean;
+    /**
+     * Text which would be displayed when search query applied and no items found
+     */
+    noDataByQuery?: string;
+}
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,eAAe,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEnH,oBAAoB;AACpB,MAAM,WAAW,cAAc;IAC3B,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IAEX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IAEd,sBAAsB;IACtB,YAAY,EAAE,MAAM,CAAC;IAErB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,iCAAiC;IACjC,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,oCAAoC;AACpC,MAAM,WAAW,aAAc,SAAQ,gBAAgB;IACnD,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAE7B,gCAAgC;IAChC,WAAW,EAAE,MAAM,CAAC;IAEpB;;MAEE;IACF,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE1C;;;MAGE;IACF,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB,gEAAgE;IAChE,gBAAgB,EAAE,OAAO,CAAC;IAE1B,wBAAwB;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAE3B,+BAA+B;IAC/B,eAAe,CAAC,EAAE,eAAe,CAAC;IAElC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IAEzB,gEAAgE;IAChE,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,eAAe,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEnH,oBAAoB;AACpB,MAAM,WAAW,cAAc;IAC3B,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IAEX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IAEd,sBAAsB;IACtB,YAAY,EAAE,MAAM,CAAC;IAErB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,iCAAiC;IACjC,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,oCAAoC;AACpC,MAAM,WAAW,aAAc,SAAQ,gBAAgB;IACnD,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAE7B;;MAEE;IACF,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE1C,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;MAGE;IACF,KAAK,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEhC,iEAAiE;IACjE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,wBAAwB;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gDAAgD;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAE3B,+BAA+B;IAC/B,eAAe,CAAC,EAAE,eAAe,CAAC;IAElC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IAEzB,iEAAiE;IACjE,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B"}

package/components/dropdown/types.js

@@ -1 +1 @@
-export {};
+export {};

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import "./styles.scss";
-import { FileUploadProps } from "..";
-/** FileUpload textual input component */
-declare const FileUpload: ({ onValueChange, placeholder, name, disabled, size, style, displayFileName, boxed, alignment, clearSelectionTitle, accept, className, title, data, }: FileUploadProps) => JSX.Element;
-export default FileUpload;
+import { FC } from "react";
+import "./styles.scss";
+import { FileUploadProps } from "..";
+/** Component for selecting files */
+declare const FileUpload: FC<FileUploadProps>;
+export default FileUpload;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/file/component/index.tsx"],"names":[],"mappings":";AAQA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,eAAe,EAAE,MAAM,IAAI,CAAC;AAErC,yCAAyC;AACzC,QAAA,MAAM,UAAU,yJAYb,eAAe,KAAG,WA+GpB,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/file/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAiC,MAAM,OAAO,CAAC;AAQvE,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,eAAe,EAAE,MAAM,IAAI,CAAC;AAErC,oCAAoC;AACpC,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA4HnC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/components/file/component/index.js

@@ -1,50 +1,51 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useRef, useState } from "react";
-import { generateGuid, getClassName, isNullish, isNullOrUndefined } from "@bodynarf/utils";
-import { ElementSize, ElementPosition } from "../../../types";
-import { mapDataAttributes } from "../../../utils";
-import Icon from "../../icon";
-import "./styles.scss";
-/** FileUpload textual input component */
-const FileUpload = ({ onValueChange, placeholder, name = generateGuid(), disabled = false, size = ElementSize.Normal, style, displayFileName = true, boxed = false, alignment = ElementPosition.Left, clearSelectionTitle = "Remove file selection", accept, className, title, data, }) => {
-    if (boxed && alignment === ElementPosition.Right) {
-        throw new Error("Boxed style cannot be used with Right alignment");
-    }
-    const [selectedFileName, setSelectedFileName] = useState(undefined);
-    const inputRef = useRef(null);
-    const onChange = useCallback((event) => {
-        const firstFile = event.target.files?.[0];
-        onValueChange(firstFile);
-        if (displayFileName && !isNullish(firstFile)) {
-            const fileName = firstFile.name;
-            setSelectedFileName(fileName);
-        }
-    }, [displayFileName, onValueChange]);
-    const onClearClick = useCallback(() => {
-        inputRef.current.value = "";
-        onValueChange(undefined);
-        setSelectedFileName(undefined);
-    }, [onValueChange]);
-    const containerClassName = getClassName([
-        "bbr-fileUpload",
-        "file",
-        displayFileName ? "has-name" : "",
-        alignment === ElementPosition.Right ? "is-right" : "",
-        boxed ? "is-boxed" : "",
-        isNullish(style) ? "" : `is-${style}`,
-        size === ElementSize.Normal ? "" : `is-${size}`,
-        className,
-    ]);
-    const dataAttributes = isNullOrUndefined(data)
-        ? undefined
-        : mapDataAttributes(data);
-    const shouldDisplayFileName = displayFileName && !isNullish(selectedFileName);
-    return (_jsxs("div", { className: containerClassName, children: [shouldDisplayFileName && alignment === ElementPosition.Right
-                &&
-                    _jsx(Icon, { name: "x-lg", className: "file-clear", size: size, onClick: onClearClick, title: clearSelectionTitle }), _jsxs("label", { className: "file-label", children: [_jsx("input", { type: "file", className: "file-input", accept: accept, id: name, name: name, disabled: disabled, onChange: onChange, placeholder: placeholder, title: title, ...dataAttributes, ref: inputRef }), _jsxs("span", { className: "file-cta", children: [_jsx("span", { className: "file-icon", children: _jsx(Icon, { name: "upload", size: size }) }), _jsx("span", { className: "file-label", children: placeholder })] }), shouldDisplayFileName
-                        &&
-                            _jsx("span", { className: "file-name", title: selectedFileName, children: selectedFileName })] }), shouldDisplayFileName && alignment === ElementPosition.Left
-                &&
-                    _jsx(Icon, { name: "x-lg", className: "file-clear", size: size, onClick: onClearClick, title: clearSelectionTitle })] }));
-};
-export default FileUpload;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+import { emptyFn, generateGuid, getClassName, isNullish, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementSize, ElementPosition } from "../../../types";
+import { getSizeClassName, getStyleClassName, mapDataAttributes } from "../../../utils";
+import Icon from "../../icon";
+import "./styles.scss";
+/** Component for selecting files */
+const FileUpload = ({ onValueChange = emptyFn, placeholder, name = generateGuid(), disabled = false, size = ElementSize.Normal, style, displayFileName = true, boxed = false, alignment = ElementPosition.Left, clearSelectionTitle = "Remove file selection", accept, className, title, data, }) => {
+    if (boxed && alignment === ElementPosition.Right) {
+        throw new Error("Boxed style cannot be used with Right alignment");
+    }
+    const [selectedFileName, setSelectedFileName] = useState(undefined);
+    const inputRef = useRef(null);
+    const onChange = useCallback((event) => {
+        const firstFile = event.target.files?.[0];
+        onValueChange(firstFile);
+        if (displayFileName && !isNullish(firstFile)) {
+            const fileName = firstFile.name;
+            setSelectedFileName(fileName);
+        }
+    }, [displayFileName, onValueChange]);
+    const onClearClick = useCallback(() => {
+        inputRef.current.value = "";
+        onValueChange(undefined);
+        setSelectedFileName(undefined);
+    }, [onValueChange]);
+    const containerClassName = getClassName([
+        "bbr-fileUpload",
+        "file",
+        displayFileName ? "has-name" : "",
+        alignment === ElementPosition.Right ? "is-right" : "",
+        boxed ? "is-boxed" : "",
+        getStyleClassName(style),
+        getSizeClassName(size),
+        disabled ? "is-disabled" : "",
+        className,
+    ]);
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    const shouldDisplayFileName = displayFileName && !isNullish(selectedFileName);
+    return (_jsxs("div", { className: containerClassName, children: [!!shouldDisplayFileName && alignment === ElementPosition.Right
+                &&
+                    _jsx(Icon, { name: "x-lg", className: "file-clear", size: size, onClick: onClearClick, title: clearSelectionTitle }), _jsxs("label", { className: "file-label", children: [_jsx("input", { type: "file", className: "file-input", accept: accept, id: name, name: name, disabled: disabled, onChange: onChange, placeholder: placeholder, title: title, ...dataAttributes, ref: inputRef }), _jsxs("span", { className: "file-cta", children: [_jsx("span", { className: "file-icon", children: _jsx(Icon, { name: "upload", size: size }) }), _jsx("span", { className: "file-label", children: placeholder })] }), !!shouldDisplayFileName
+                        &&
+                            _jsx("span", { className: "file-name", title: selectedFileName, children: selectedFileName })] }), !!shouldDisplayFileName && alignment === ElementPosition.Left
+                &&
+                    _jsx(Icon, { name: "x-lg", className: "file-clear", size: size, onClick: onClearClick, title: clearSelectionTitle })] }));
+};
+export default FileUpload;

package/components/file/component/styles.scss

@@ -104,4 +104,17 @@
             }
         }
     }
+
+    &.is-disabled .file-label {
+        background-color: hsl(0, 0%, 96%);
+        border-color: hsl(0, 0%, 86%);
+        color: hsl(0, 0%, 48%);
+        box-shadow: none;
+        cursor: not-allowed;
+
+        .file-cta {
+            background-color: inherit;
+            color: inherit;
+        }
+    }
 }

package/components/file/index.d.ts

@@ -1,3 +1,3 @@
-export { default } from "./component";
-export * from "./types";
+export { default } from "./component";
+export * from "./types";
 //# sourceMappingURL=index.d.ts.map

package/components/file/index.js

@@ -1,2 +1,2 @@
-export { default } from "./component";
-export * from "./types";
+export { default } from "./component";
+export * from "./types";

package/components/file/types.d.ts

@@ -1,32 +1,32 @@
-import { BaseElementProps, BaseInputElementProps, ElementFloatPosition } from "../../types";
-/** File upload component props type */
-export declare type FileUploadProps = BaseElementProps & Pick<BaseInputElementProps<File>, "onValueChange" | "disabled" | "size" | "style" | "name"> & {
-    /** Input element placeholder */
-    placeholder: string;
-    /**
-     * File types\extensions allowed to select via component
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/accept
-     */
-    accept?: string;
-    /**
-     * Position of a upload file
-     *
-     * ! NOTE: Right alignment cannot be used with boxed style
-     */
-    alignment?: ElementFloatPosition;
-    /**
-     * Display file name after selection
-     *
-     * Default is `true`
-     */
-    displayFileName?: boolean;
-    /**
-     * Is boxed block
-     *
-     * ! NOTE: Cannot be used with Right alignment
-     */
-    boxed?: boolean;
-    /** Title for clear button */
-    clearSelectionTitle?: string;
-};
+import { BaseElementProps, BaseNullableInputElementProps, ElementFloatPosition } from "../../types";
+/** File upload component props type */
+export type FileUploadProps = BaseElementProps & Pick<BaseNullableInputElementProps<File>, "onValueChange" | "disabled" | "size" | "style" | "name"> & {
+    /** Input element placeholder */
+    placeholder: string;
+    /**
+     * File types\extensions allowed to select via component
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/accept
+     */
+    accept?: string;
+    /**
+     * Position of a upload file
+     *
+     * ! NOTE: Right alignment cannot be used with boxed style
+     */
+    alignment?: ElementFloatPosition;
+    /**
+     * Display file name after selection
+     *
+     * Default is `true`
+     */
+    displayFileName?: boolean;
+    /**
+     * Is boxed block
+     *
+     * ! NOTE: Cannot be used with Right alignment
+     */
+    boxed?: boolean;
+    /** Title for clear button */
+    clearSelectionTitle?: string;
+};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/file/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAE3F,uCAAuC;AACvC,oBAAY,eAAe,GAAG,gBAAgB,GAAG,IAAI,CACjD,qBAAqB,CAAC,IAAI,CAAC,EACzB,eAAe,GAAG,UAAU,GAC5B,MAAM,GAAG,OAAO,GAChB,MAAM,CACX,GAAG;IACA,gCAAgC;IAChC,WAAW,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,SAAS,CAAC,EAAE,oBAAoB,CAAC;IAEjC;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,6BAA6B;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAChC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/file/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,6BAA6B,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAEnG,uCAAuC;AACvC,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG,IAAI,CACjD,6BAA6B,CAAC,IAAI,CAAC,EACjC,eAAe,GAAG,UAAU,GAC5B,MAAM,GAAG,OAAO,GAChB,MAAM,CACX,GAAG;IACA,gCAAgC;IAChC,WAAW,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,SAAS,CAAC,EAAE,oBAAoB,CAAC;IAEjC;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,6BAA6B;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAChC,CAAC"}

package/components/file/types.js

@@ -1 +1 @@
-export {};
+export {};

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

@@ -1,9 +1,9 @@
-import { FC } from "react";
-import "./style.scss";
-import { IconProps } from "../..";
-/**
- * Icon component. Based on bootstrap icons
- */
-declare const Icon: FC<IconProps>;
-export default Icon;
+import { FC } from "react";
+import "./style.scss";
+import { IconProps } from "../..";
+/**
+ * Icon component. Based on bootstrap icons
+ */
+declare const Icon: FC<IconProps>;
+export default Icon;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/icon/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAO3B,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASlC;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CA2BvB,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/icon/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAO3B,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CA4BvB,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/components/icon/component/index.js

@@ -1,28 +1,23 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
-import { ElementSize } from "../../../types";
-import { mapDataAttributes } from "../../../utils";
-import "./style.scss";
-const sizeToClassMap = new Map([
-    [ElementSize.Small, "bbr-icon--size-small"],
-    [ElementSize.Normal, ""],
-    [ElementSize.Medium, "bbr-icon--size-medium"],
-    [ElementSize.Large, "bbr-icon--size-large"]
-]);
-/**
- * Icon component. Based on bootstrap icons
- */
-const Icon = ({ name, size = ElementSize.Normal, className, title, data, onClick, }) => {
-    const classNames = getClassName([
-        "bbr-icon",
-        "bi",
-        `bi-${name}`,
-        className,
-        sizeToClassMap.has(size) ? sizeToClassMap.get(size) : "",
-    ]);
-    const dataAttributes = isNullOrUndefined(data)
-        ? undefined
-        : mapDataAttributes(data);
-    return (_jsx("i", { className: classNames, title: title, onClick: onClick, ...dataAttributes }));
-};
-export default Icon;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getClassName, isNullish } from "@bodynarf/utils";
+import { ElementSize } from "../../../types";
+import { getSizeClassName, mapDataAttributes } from "../../../utils";
+import "./style.scss";
+/**
+ * Icon component. Based on bootstrap icons
+ */
+const Icon = ({ name, size = ElementSize.Normal, className, title, data, onClick, }) => {
+    const classNames = getClassName([
+        "bbr-icon",
+        "bi",
+        `bi-${name}`,
+        className,
+        getSizeClassName(size),
+        isNullish(onClick) ? undefined : "is-clickable"
+    ]);
+    const dataAttributes = isNullish(data)
+        ? undefined
+        : mapDataAttributes(data);
+    return (_jsx("i", { className: classNames, title: title, onClick: onClick, ...dataAttributes }));
+};
+export default Icon;

package/components/icon/component/style.scss

@@ -2,13 +2,13 @@
     transition: 0.15s ease-in-out color;
     font-size: 1rem;
 
-    &--size-small {
+    &.is-small {
         font-size: 0.85rem;
     }
-    &--size-medium {
+    &.is-medium {
         font-size: 1.25rem;
     }
-    &--size-large {
+    &.is-large {
         font-size: 2rem;
     }
 

package/components/icon/index.d.ts

@@ -1,3 +1,3 @@
-export { default } from "./component";
-export * from "./types";
+export { default } from "./component";
+export * from "./types";
 //# sourceMappingURL=index.d.ts.map

package/components/icon/index.js

@@ -1,2 +1,2 @@
-export { default } from "./component";
-export * from "./types";
+export { default } from "./component";
+export * from "./types";