@bodynarf/react.components 1.10.1 → 1.11.1

package/components/breadcrumbs/component/index.js

@@ -28,10 +28,10 @@ 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 }));
+        return (_jsx("a", { href: item.path, "aria-current": item.active ? "page" : undefined, children: item.caption }));
     }
     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: [item.caption, _jsx(Icon, { ...icon })] }));
     }
-    return (_jsxs("a", { href: item.path, "aria-current": item.active ? "page" : undefined, children: [_jsx(Icon, { ...icon }), item.title] }));
+    return (_jsxs("a", { href: item.path, "aria-current": item.active ? "page" : undefined, children: [_jsx(Icon, { ...icon }), item.caption] }));
 };

package/components/breadcrumbs/types.d.ts

@@ -2,8 +2,13 @@
 import { BaseElementProps, ElementIcon, ElementPosition, ElementSize } from "../../types";
 /** Breadcrumb item */
 export interface BreadCrumb {
-    /** Displayed text */
-    title: string;
+    /**
+     * Displayed text
+     * @deprecated Use `caption` instead
+     */
+    title?: string;
+    /** Displayable caption */
+    caption: string;
     /** Page address */
     path: string;
     /** Is current page. Will be not clickable */

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,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"}
+{"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;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,0BAA0B;IAC1B,OAAO,EAAE,MAAM,CAAC;IAEhB,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/file/component/index.d.ts

@@ -0,0 +1,6 @@
+import "./styles.scss";
+import { FileUploadProps } from "..";
+/** FileUpload textual input component */
+declare const FileUpload: ({ onValueChange, placeholder, name, disabled, size, style, displayFileName, boxed, alignment, clearSelectionTitle, className, title, data, }: FileUploadProps) => JSX.Element;
+export default FileUpload;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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,iJAWb,eAAe,KAAG,WA6GpB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/components/file/component/index.js

@@ -0,0 +1,50 @@
+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", 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", 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

@@ -0,0 +1,107 @@
+.bbr-fileUpload {
+    &.has-name {
+        .file-clear {
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+            z-index: 2;
+
+            &:hover {
+                color: #0d6efd;
+            }
+        }
+
+        &:not(.is-right) {
+            &.is-small {
+                .file-name {
+                    padding-right: 1.5rem;
+                }
+
+                .file-clear {
+                    margin-left: -1.25rem;
+                }
+            }
+
+            &.is-medium {
+                .file-name {
+                    padding-right: 2rem;
+                }
+
+                .file-clear {
+                    margin-left: -1.75rem;
+                }
+            }
+
+            &.is-large {
+                .file-name {
+                    padding-right: 2.75rem;
+                }
+
+                .file-clear {
+                    margin-left: -2.5rem;
+                }
+            }
+
+            &:not(.is-small):not(.is-medium):not(.is-large) {
+                .file-name {
+                    padding-right: 1.75rem;
+                    max-width: 17rem;
+                }
+
+                .file-clear {
+                    margin-left: -1.5rem;
+                }
+            }
+        }
+
+        &.is-right {
+            &.is-small {
+                .file-name {
+                    padding-left: 1.5rem;
+                }
+
+                .file-clear {
+                    margin-right: -1.25rem;
+                }
+            }
+
+            &.is-medium {
+                .file-name {
+                    padding-left: 2rem;
+                }
+
+                .file-clear {
+                    margin-right: -1.75rem;
+                }
+            }
+
+            &.is-large {
+                .file-name {
+                    padding-left: 2.75rem;
+                }
+
+                .file-clear {
+                    margin-right: -2.5rem;
+                }
+            }
+
+            &:not(.is-small):not(.is-medium):not(.is-large) {
+                .file-name {
+                    padding-left: 1.75rem;
+                    max-width: 17rem;
+                }
+
+                .file-clear {
+                    margin-right: -1.5rem;
+                }
+            }
+        }
+
+        &.is-boxed {
+            .file-clear {
+                align-items: end;
+                padding-bottom: 0.75rem;
+            }
+        }
+    }
+}

package/components/file/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/file/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,cAAc,SAAS,CAAC"}

package/components/file/index.js

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

package/components/file/types.d.ts

@@ -0,0 +1,27 @@
+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;
+    /**
+     * 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

@@ -0,0 +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;;;;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

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

package/components/primitives/checkbox/component/index.d.ts

@@ -2,6 +2,6 @@
 import "./style.scss";
 import { CheckBoxProps } from "../..";
 /** Boolean input component */
-declare const CheckBox: ({ onValueChange, defaultValue, label, name, size, style, disabled, rounded, block, withoutBorder, hasBackgroundColor, fixBackgroundColor, isFormLabel, className, title, data, }: CheckBoxProps) => JSX.Element;
+declare const CheckBox: ({ onValueChange, defaultValue, label, name, size, style, disabled, rounded, block, withoutBorder, hasBackgroundColor, fixBackgroundColor, isFormLabel, className, data, }: CheckBoxProps) => JSX.Element;
 export default CheckBox;
 //# sourceMappingURL=index.d.ts.map

package/components/primitives/checkbox/component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/checkbox/component/index.tsx"],"names":[],"mappings":";AAQA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,8BAA8B;AAC9B,QAAA,MAAM,QAAQ,qLAWX,aAAa,KAAG,WAoFlB,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/checkbox/component/index.tsx"],"names":[],"mappings":";AAQA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,8BAA8B;AAC9B,QAAA,MAAM,QAAQ,8KAWX,aAAa,KAAG,WAyFlB,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/primitives/checkbox/component/index.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
-import { generateGuid, getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import { generateGuid, getClassName, isNullish, isNullOrUndefined } from "@bodynarf/utils";
 import { ElementSize } from "../../../../types";
 import { mapDataAttributes } from "../../../../utils";
 import ComponentWithLabel from "../../internal/componentWithLabel";
 import "./style.scss";
 /** Boolean input component */
-const CheckBox = ({ onValueChange, defaultValue, label, name = generateGuid(), size = ElementSize.Normal, style, disabled = false, rounded = false, block = false, withoutBorder = false, hasBackgroundColor = false, fixBackgroundColor = false, isFormLabel = false, className, title, data, }) => {
+const CheckBox = ({ onValueChange, defaultValue, label, name = generateGuid(), size = ElementSize.Normal, style, disabled = false, rounded = false, block = false, withoutBorder = false, hasBackgroundColor = false, fixBackgroundColor = false, isFormLabel = false, className, data, }) => {
     const onChecked = useCallback((event) => onValueChange(event.target.checked), [onValueChange]);
     const elClassName = getClassName([
         "is-checkradio",
@@ -20,18 +20,21 @@ const CheckBox = ({ onValueChange, defaultValue, label, name = generateGuid(), s
         block ? "is-block" : "",
         withoutBorder ? "has-no-border" : "",
     ]);
-    const dataAttributes = isNullOrUndefined(data)
+    const dataAttributes = isNullish(data)
         ? undefined
         : mapDataAttributes(data);
-    if (!isNullOrUndefined(label) && isFormLabel) {
+    if (!isNullish(label) && isFormLabel) {
         return (_jsxs(ComponentWithLabel, { id: name, label: {
                 ...label,
                 horizontalContainerClassName: getClassName([label.horizontalContainerClassName, "p-0"]),
-            }, size: ElementSize.Normal, children: [_jsx("input", { type: "checkbox", id: name, name: name, disabled: disabled, onChange: onChecked, className: elClassName, defaultChecked: defaultValue, title: title, ...dataAttributes }), _jsx("label", { className: "is-empty", htmlFor: name })] }));
+            }, size: ElementSize.Normal, children: [_jsx("input", { type: "checkbox", id: name, name: name, disabled: disabled, onChange: onChecked, className: elClassName, defaultChecked: defaultValue, ...dataAttributes }), _jsx("label", { className: "is-empty", htmlFor: name })] }));
     }
     const labelClassName = isNullOrUndefined(label)
         ? "is-empty"
         : undefined;
-    return (_jsxs("div", { className: "bbr-field bbr-input field mr-2", children: [_jsx("input", { type: "checkbox", id: name, name: name, disabled: disabled, onChange: onChecked, className: elClassName, defaultChecked: defaultValue, title: title, ...dataAttributes }), _jsx("label", { htmlFor: name, className: labelClassName, children: label?.caption })] }));
+    const labelDataAttributes = isNullish(label?.data)
+        ? undefined
+        : mapDataAttributes(label.data);
+    return (_jsxs("div", { className: "bbr-field bbr-input field mr-2", children: [_jsx("input", { type: "checkbox", id: name, name: name, disabled: disabled, onChange: onChecked, className: elClassName, defaultChecked: defaultValue, ...dataAttributes }), _jsx("label", { htmlFor: name, className: labelClassName, title: label?.title, ...labelDataAttributes, children: label?.caption })] }));
 };
 export default CheckBox;

package/components/primitives/checkbox/types.d.ts

@@ -1,6 +1,6 @@
 import { BaseInputElementProps } from "../../../types";
 /** Checkbox component props type */
-export interface CheckBoxProps extends Omit<BaseInputElementProps<boolean>, "readonly" | "validationState" | "loading" | "placeholder" | "hint"> {
+export interface CheckBoxProps extends Omit<BaseInputElementProps<boolean>, "readonly" | "validationState" | "loading" | "placeholder" | "hint" | "title" | "autofocus"> {
     /** Is full colored checkbox */
     block?: boolean;
     /** Remove the checkbox border */

package/components/primitives/checkbox/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/checkbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAEnD,oCAAoC;AACpC,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EACtE,UAAU,GAAG,iBAAiB,GAC5B,SAAS,GAAG,aAAa,GACzB,MAAM,CACX;IACG,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,iCAAiC;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;MAGE;IACF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;;MAIE;IACF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/checkbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAEnD,oCAAoC;AACpC,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EACpE,UAAU,GAAG,iBAAiB,GAC9B,SAAS,GAAG,aAAa,GACzB,MAAM,GAAG,OAAO,GAChB,WAAW,CAChB;IACG,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,iCAAiC;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;MAGE;IACF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;;MAIE;IACF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB"}

package/components/primitives/color/components/picker/index.d.ts

@@ -15,6 +15,6 @@ export interface ColorPickerControlProps extends Omit<BaseInputElementProps<stri
     previewConfig?: ColorPickerPreviewConfig;
 }
 /** Color picker container component */
-declare const ColorPickerControl: ({ value, defaultValue, onValueChange, elementClassName, disabled, previewConfig, size, id, title, data, hint, validationState, }: ColorPickerControlProps) => JSX.Element;
+declare const ColorPickerControl: ({ value, defaultValue, onValueChange, elementClassName, disabled, autoFocus, previewConfig, size, id, title, data, hint, validationState, }: ColorPickerControlProps) => JSX.Element;
 export default ColorPickerControl;
 //# sourceMappingURL=index.d.ts.map

package/components/primitives/color/components/picker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/color/components/picker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAIpC,OAAO,EAAmB,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAIpE,OAAO,EAA4B,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAE3E,oCAAoC;AACpC,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CACjD,qBAAqB,CAAC,MAAM,CAAC,EAC3B,eAAe,GAAG,aAAa,GAC/B,SAAS,GAAG,UAAU,GACtB,SAAS,GAAG,WAAW,CAC5B;IACG,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IAEd,gCAAgC;IAChC,EAAE,EAAE,MAAM,CAAC;IAEX,6BAA6B;IAC7B,gBAAgB,EAAE,MAAM,CAAC;IAEzB,qCAAqC;IACrC,aAAa,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE9D,oCAAoC;IACpC,aAAa,CAAC,EAAE,wBAAwB,CAAC;CAC5C;AAED,uCAAuC;AACvC,QAAA,MAAM,kBAAkB,qIAQrB,uBAAuB,KAAG,WA0C5B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/color/components/picker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAIpC,OAAO,EAAmB,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAIpE,OAAO,EAA4B,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAE3E,oCAAoC;AACpC,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CACjD,qBAAqB,CAAC,MAAM,CAAC,EAC3B,eAAe,GAAG,aAAa,GAC/B,SAAS,GAAG,UAAU,GACtB,SAAS,GAAG,WAAW,CAC5B;IACG,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IAEd,gCAAgC;IAChC,EAAE,EAAE,MAAM,CAAC;IAEX,6BAA6B;IAC7B,gBAAgB,EAAE,MAAM,CAAC;IAEzB,qCAAqC;IACrC,aAAa,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE9D,oCAAoC;IACpC,aAAa,CAAC,EAAE,wBAAwB,CAAC;CAC5C;AAED,uCAAuC;AACvC,QAAA,MAAM,kBAAkB,gJAQrB,uBAAuB,KAAG,WA2C5B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/components/primitives/color/components/picker/index.js

@@ -4,15 +4,15 @@ import { ElementPosition } from "../../../../../types";
 import { mapDataAttributes } from "../../../../../utils";
 import InternalHint from "../../../internal/hint";
 /** Color picker container component */
-const ColorPickerControl = ({ value, defaultValue, onValueChange, elementClassName, disabled = false, previewConfig, size, id, title, data, hint, validationState, }) => {
+const ColorPickerControl = ({ value, defaultValue, onValueChange, elementClassName, disabled = false, autoFocus = false, previewConfig, size, id, title, data, hint, validationState, }) => {
     if (!isNullOrUndefined(previewConfig)) {
         return (_jsx(PickerWithPreview, { id: id, size: size, value: value, disabled: disabled, defaultValue: defaultValue, onValueChange: onValueChange, previewConfig: previewConfig, elementClassName: elementClassName, data: data, title: title }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "control bbr-input", children: _jsx("input", { type: "color", id: id, name: id, disabled: disabled, className: elementClassName, onChange: onValueChange, defaultValue: defaultValue, ...data, title: title }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "control bbr-input", children: _jsx("input", { type: "color", id: id, name: id, disabled: disabled, autoFocus: autoFocus, onChange: onValueChange, defaultValue: defaultValue, className: elementClassName, ...data, title: title }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default ColorPickerControl;
 /** Picker sub component with preview */
-const PickerWithPreview = ({ elementClassName, disabled, size, defaultValue, onValueChange, value, id, title, data, previewConfig, hint, validationState, }) => {
+const PickerWithPreview = ({ elementClassName, disabled, size, defaultValue, onValueChange, value, autoFocus = false, id, title, data, previewConfig, hint, validationState, }) => {
     const classNames = getClassName([
         "bbr-color-picker__preview",
         "button",
@@ -30,7 +30,7 @@ const PickerWithPreview = ({ elementClassName, disabled, size, defaultValue, onV
         previewConfig.position === ElementPosition.Left ? "ml-1" : "mr-1",
     ]);
     if (previewConfig.position === ElementPosition.Right) {
-        return (_jsxs("div", { className: "is-flex is-flex-direction-row is-flex-wrap-nowrap is-justify-content-start", children: [_jsx("div", { className: controlContainerClassName, children: _jsx("input", { type: "color", id: id, name: id, disabled: disabled, onChange: onValueChange, defaultValue: defaultValue, className: elementClassName, title: title, ...dataAttributes }) }), _jsx("button", { className: classNames, style: {
+        return (_jsxs("div", { className: "is-flex is-flex-direction-row is-flex-wrap-nowrap is-justify-content-start", children: [_jsx("div", { className: controlContainerClassName, children: _jsx("input", { type: "color", id: id, name: id, disabled: disabled, autoFocus: autoFocus, onChange: onValueChange, defaultValue: defaultValue, className: elementClassName, title: title, ...dataAttributes }) }), _jsx("button", { className: classNames, style: {
                         "--color-picker__background-color": value,
                         "--color-picker__color": color,
                     }, children: value }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
@@ -38,5 +38,5 @@ const PickerWithPreview = ({ elementClassName, disabled, size, defaultValue, onV
     return (_jsxs("div", { className: "is-flex is-flex-direction-row is-flex-wrap-nowrap is-justify-content-start", children: [_jsx("button", { className: classNames, style: {
                     "--color-picker__background-color": value,
                     "--color-picker__color": color,
-                }, children: value }), _jsx("div", { className: controlContainerClassName, children: _jsx("input", { type: "color", id: id, name: id, disabled: disabled, onChange: onValueChange, defaultValue: defaultValue, className: elementClassName, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+                }, children: value }), _jsx("div", { className: controlContainerClassName, children: _jsx("input", { type: "color", id: id, name: id, disabled: disabled, autoFocus: autoFocus, onChange: onValueChange, defaultValue: defaultValue, className: elementClassName, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };

package/components/primitives/color/components/withLabel/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ColorPickerProps } from "../..";
 /** Color picker component with form label */
-declare function ColorPickerWithLabel({ preview, name, defaultValue, onValueChange, validationState, disabled, rounded, size, label, hint, className, title, data, }: ColorPickerProps): JSX.Element;
+declare function ColorPickerWithLabel({ preview, name, defaultValue, onValueChange, validationState, disabled, rounded, size, autoFocus, label, hint, className, title, data, }: ColorPickerProps): JSX.Element;
 export default ColorPickerWithLabel;
 //# sourceMappingURL=index.d.ts.map

package/components/primitives/color/components/withLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/color/components/withLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAGzC,6CAA6C;AAC7C,iBAAS,oBAAoB,CAAC,EAC1B,OAAO,EACP,IAAqB,EACrB,YAAY,EAAE,aAAa,EAC3B,eAAe,EACf,QAAgB,EAAE,OAAe,EAAE,IAAyB,EAC5D,KAAK,EAEL,IAAI,EACJ,SAAS,EAAE,KAAK,EAAE,IAAI,GACzB,EAAE,gBAAgB,eAgDlB;AAED,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/color/components/withLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAGzC,6CAA6C;AAC7C,iBAAS,oBAAoB,CAAC,EAC1B,OAAO,EACP,IAAqB,EACrB,YAAY,EAAE,aAAa,EAC3B,eAAe,EACf,QAAgB,EAAE,OAAe,EAAE,IAAyB,EAC5D,SAAiB,EACjB,KAAK,EAEL,IAAI,EACJ,SAAS,EAAE,KAAK,EAAE,IAAI,GACzB,EAAE,gBAAgB,eAiDlB;AAED,eAAe,oBAAoB,CAAC"}

package/components/primitives/color/components/withLabel/index.js

@@ -6,7 +6,7 @@ import { getStyleClassName } from "../../../../../utils";
 import ComponentWithLabel from "../../../internal/componentWithLabel";
 import ColorPickerControl from "../picker";
 /** Color picker component with form label */
-function ColorPickerWithLabel({ preview, name = generateGuid(), defaultValue, onValueChange, validationState, disabled = false, rounded = false, size = ElementSize.Normal, label, hint, className, title, data, }) {
+function ColorPickerWithLabel({ preview, name = generateGuid(), defaultValue, onValueChange, validationState, disabled = false, rounded = false, size = ElementSize.Normal, autoFocus = false, label, hint, className, title, data, }) {
     const defaultColor = isNullOrUndefined(defaultValue)
         ? whiteHex
         : rgbToHex(defaultValue);
@@ -20,6 +20,6 @@ function ColorPickerWithLabel({ preview, name = generateGuid(), defaultValue, on
         size === ElementSize.Normal ? "" : `is-${size}`,
         "input",
     ]);
-    return (_jsx(ComponentWithLabel, { id: name, size: size, label: label, children: _jsx(ColorPickerControl, { id: name, value: value, disabled: disabled, previewConfig: preview, onValueChange: onChange, defaultValue: defaultColor, elementClassName: elClassName, hint: hint, validationState: validationState, data: data, title: title }) }));
+    return (_jsx(ComponentWithLabel, { id: name, size: size, label: label, children: _jsx(ColorPickerControl, { id: name, value: value, disabled: disabled, autoFocus: autoFocus, previewConfig: preview, onValueChange: onChange, defaultValue: defaultColor, elementClassName: elClassName, hint: hint, validationState: validationState, data: data, title: title }) }));
 }
 export default ColorPickerWithLabel;

package/components/primitives/color/components/withoutLabel/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ColorPickerProps } from "../..";
 /** Color picker component without form label */
-declare function ColorPickerWithoutLabel({ preview, name, defaultValue, onValueChange, validationState, disabled, rounded, size, className, title, data, hint, }: ColorPickerProps): JSX.Element;
+declare function ColorPickerWithoutLabel({ preview, name, defaultValue, onValueChange, validationState, disabled, rounded, size, autoFocus, className, title, data, hint, }: ColorPickerProps): JSX.Element;
 export default ColorPickerWithoutLabel;
 //# sourceMappingURL=index.d.ts.map

package/components/primitives/color/components/withoutLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/color/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAGzC,gDAAgD;AAChD,iBAAS,uBAAuB,CAAC,EAC7B,OAAO,EACP,IAAqB,EACrB,YAAY,EAAE,aAAa,EAC3B,eAAe,EACf,QAAgB,EAAE,OAAe,EAAE,IAAI,EAEvC,SAAS,EAAE,KAAK,EAAE,IAAI,EACtB,IAAI,GACP,EAAE,gBAAgB,eA6ClB;AAED,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/color/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAGzC,gDAAgD;AAChD,iBAAS,uBAAuB,CAAC,EAC7B,OAAO,EACP,IAAqB,EACrB,YAAY,EAAE,aAAa,EAC3B,eAAe,EACf,QAAgB,EAAE,OAAe,EAAE,IAAI,EACvC,SAAiB,EAEjB,SAAS,EAAE,KAAK,EAAE,IAAI,EACtB,IAAI,GACP,EAAE,gBAAgB,eA8ClB;AAED,eAAe,uBAAuB,CAAC"}

package/components/primitives/color/components/withoutLabel/index.js

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useState } from "react";
 import { generateGuid, getClassName, hexToRgb, isNullOrUndefined, rgbToHex, whiteHex } from "@bodynarf/utils";
 import ColorPickerControl from "../picker";
 /** Color picker component without form label */
-function ColorPickerWithoutLabel({ preview, name = generateGuid(), defaultValue, onValueChange, validationState, disabled = false, rounded = false, size, className, title, data, hint, }) {
+function ColorPickerWithoutLabel({ preview, name = generateGuid(), defaultValue, onValueChange, validationState, disabled = false, rounded = false, size, autoFocus = false, className, title, data, hint, }) {
     const defaultColor = isNullOrUndefined(defaultValue)
         ? whiteHex
         : rgbToHex(defaultValue);
@@ -16,6 +16,6 @@ function ColorPickerWithoutLabel({ preview, name = generateGuid(), defaultValue,
         isNullOrUndefined(size) ? "" : `is-${size}`,
         "input",
     ]);
-    return (_jsx("div", { className: "bbr-color-picker", children: _jsx(ColorPickerControl, { id: name, value: value, disabled: disabled, previewConfig: preview, onValueChange: onChange, defaultValue: defaultColor, elementClassName: elClassName, data: data, title: title, hint: hint, validationState: validationState }) }));
+    return (_jsx("div", { className: "bbr-color-picker", children: _jsx(ColorPickerControl, { id: name, value: value, disabled: disabled, autoFocus: autoFocus, previewConfig: preview, onValueChange: onChange, defaultValue: defaultColor, elementClassName: elClassName, data: data, title: title, hint: hint, validationState: validationState }) }));
 }
 export default ColorPickerWithoutLabel;

package/components/primitives/date/component/index.d.ts

@@ -2,6 +2,6 @@
 import "./style.scss";
 import { DateProps } from "../..";
 /** Date input component */
-declare const DatePicker: ({ defaultValue, onValueChange, validationState, name, style, size, readonly, disabled, rounded, loading, label, onBlur, className, title, data, hint, }: DateProps) => JSX.Element;
+declare const DatePicker: ({ defaultValue, onValueChange, validationState, name, style, size, readonly, disabled, rounded, loading, autoFocus, label, onBlur, className, title, data, hint, }: DateProps) => JSX.Element;
 export default DatePicker;
 //# sourceMappingURL=index.d.ts.map

package/components/primitives/date/component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/date/component/index.tsx"],"names":[],"mappings":";AASA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,2BAA2B;AAC3B,QAAA,MAAM,UAAU,4JAWb,SAAS,KAAG,WA2Dd,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/date/component/index.tsx"],"names":[],"mappings":";AASA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,2BAA2B;AAC3B,QAAA,MAAM,UAAU,uKAWb,SAAS,KAAG,WA4Dd,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/components/primitives/date/component/index.js

@@ -7,7 +7,7 @@ import ComponentWithLabel from "../../internal/componentWithLabel";
 import InternalHint from "../../internal/hint";
 import "./style.scss";
 /** Date input component */
-const DatePicker = ({ defaultValue, onValueChange, validationState, name = generateGuid(), style, size = ElementSize.Normal, readonly = false, disabled = false, rounded = false, loading = false, label, onBlur, className, title, data, hint, }) => {
+const DatePicker = ({ defaultValue, onValueChange, validationState, name = generateGuid(), style, size = ElementSize.Normal, readonly = false, disabled = false, rounded = false, loading = false, autoFocus = false, label, onBlur, className, title, data, hint, }) => {
     const onChange = useCallback((event) => onValueChange(isStringEmpty(event.target.value)
         ? undefined
         : new Date(event.target.value)), [onValueChange]);
@@ -26,6 +26,6 @@ const DatePicker = ({ defaultValue, onValueChange, validationState, name = gener
     const dataAttributes = isNullOrUndefined(data)
         ? undefined
         : mapDataAttributes(data);
-    return (_jsxs(ComponentWithLabel, { id: name, size: size, label: label, children: [_jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "date", id: name, name: name, onBlur: onBlur, readOnly: readonly, disabled: disabled, onChange: onChange, className: elClassName, defaultValue: stringifiedDefValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+    return (_jsxs(ComponentWithLabel, { id: name, size: size, label: label, children: [_jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "date", id: name, name: name, onBlur: onBlur, readOnly: readonly, disabled: disabled, onChange: onChange, className: elClassName, defaultValue: stringifiedDefValue, autoFocus: autoFocus, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default DatePicker;

package/components/primitives/internal/componentWithLabel/index.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import { FC } from "react";
 import { ElementSize, LabelConfiguration } from "../../../../types";
 /** Form input component with label props */
-export interface ComponentWithLabelProps {
+export declare type ComponentWithLabelProps = {
     /** Label configuration */
     label: LabelConfiguration;
     /** Component size */
@@ -10,8 +10,8 @@ export interface ComponentWithLabelProps {
     id: string;
     /** Node element with input element */
     children: React.ReactNode;
-}
+};
 /** Form input component with describing label */
-declare const ComponentWithLabel: ({ label, id, size, children, }: ComponentWithLabelProps) => JSX.Element;
+declare const ComponentWithLabel: FC<ComponentWithLabelProps>;
 export default ComponentWithLabel;
 //# sourceMappingURL=index.d.ts.map

package/components/primitives/internal/componentWithLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/internal/componentWithLabel/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAE7D,4CAA4C;AAC5C,MAAM,WAAW,uBAAuB;IACpC,0BAA0B;IAC1B,KAAK,EAAE,kBAAkB,CAAC;IAE1B,qBAAqB;IACrB,IAAI,EAAE,WAAW,CAAC;IAElB,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IAEX,sCAAsC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,iDAAiD;AACjD,QAAA,MAAM,kBAAkB,mCAGrB,uBAAuB,KAAG,WAwD5B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/internal/componentWithLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAI3B,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAG7D,4CAA4C;AAC5C,oBAAY,uBAAuB,GAAG;IAClC,0BAA0B;IAC1B,KAAK,EAAE,kBAAkB,CAAC;IAE1B,qBAAqB;IACrB,IAAI,EAAE,WAAW,CAAC;IAElB,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IAEX,sCAAsC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AAEF,iDAAiD;AACjD,QAAA,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAqEnD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/components/primitives/internal/componentWithLabel/index.js

@@ -1,14 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getClassName, getValueOrDefault } from "@bodynarf/utils";
+import { getClassName, getValueOrDefault, isNullish } from "@bodynarf/utils";
 import { ElementSize } from "../../../../types";
+import { mapDataAttributes } from "../../../../utils";
 /** Form input component with describing label */
 const ComponentWithLabel = ({ label, id, size, children, }) => {
     const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
     const labelClassName = getClassName([
         "label",
         !label.horizontal ? elSizeClassName : "",
-        label.className
+        label.className,
     ]);
+    const dataAttributes = isNullish(label.data)
+        ? undefined
+        : mapDataAttributes(label.data);
     if (label.horizontal) {
         const labelContainerClassName = getClassName([
             "field-label",
@@ -19,8 +23,8 @@ const ComponentWithLabel = ({ label, id, size, children, }) => {
             "field-body",
             label.horizontalFieldContainerClassName
         ]);
-        return (_jsxs("div", { className: "bbr-field bbr-input field is-horizontal", children: [_jsx("div", { className: labelContainerClassName, children: _jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsx("div", { className: "field", children: children }) })] }));
+        return (_jsxs("div", { className: "bbr-field bbr-input field is-horizontal", children: [_jsx("div", { className: labelContainerClassName, children: _jsx("label", { htmlFor: id, className: labelClassName, title: label.title, ...dataAttributes, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsx("div", { className: "field", children: children }) })] }));
     }
-    return (_jsxs("div", { className: "bbr-field bbr-input field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), children] }));
+    return (_jsxs("div", { className: "bbr-field bbr-input field", children: [_jsx("label", { htmlFor: id, className: labelClassName, title: label.title, ...dataAttributes, children: label.caption }), children] }));
 };
 export default ComponentWithLabel;

package/components/primitives/multiline/components/withLabel/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { MultilineProps } from "../..";
 /** Multiline textual input component with describing label */
-declare const MultilineWithLabel: ({ defaultValue, onValueChange, validationState, name, size, style, label, placeholder, readonly, disabled, loading, fixed, rows, onBlur, className, title, data, hint, }: MultilineProps) => JSX.Element;
+declare const MultilineWithLabel: ({ defaultValue, onValueChange, validationState, name, size, style, label, placeholder, readonly, disabled, loading, fixed, autoFocus, rows, onBlur, className, title, data, hint, }: MultilineProps) => JSX.Element;
 export default MultilineWithLabel;
 //# sourceMappingURL=index.d.ts.map

package/components/primitives/multiline/components/withLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/multiline/components/withLabel/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,8DAA8D;AAC9D,QAAA,MAAM,kBAAkB,6KAYrB,cAAc,KAAG,WAoDnB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/multiline/components/withLabel/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,8DAA8D;AAC9D,QAAA,MAAM,kBAAkB,wLAYrB,cAAc,KAAG,WAqDnB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/components/primitives/multiline/components/withLabel/index.js

@@ -6,7 +6,7 @@ import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
 import ComponentWithLabel from "../../../internal/componentWithLabel";
 import InternalHint from "../../../internal/hint";
 /** Multiline textual input component with describing label */
-const MultilineWithLabel = ({ defaultValue, onValueChange, validationState, name = generateGuid(), size = ElementSize.Normal, style, label, placeholder, readonly = false, disabled = false, loading = false, fixed = false, rows, onBlur, className, title, data, hint, }) => {
+const MultilineWithLabel = ({ defaultValue, onValueChange, validationState, name = generateGuid(), size = ElementSize.Normal, style, label, placeholder, readonly = false, disabled = false, loading = false, fixed = false, autoFocus = false, rows, onBlur, className, title, data, hint, }) => {
     const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
     const elClassName = getClassName([
         className,
@@ -22,6 +22,6 @@ const MultilineWithLabel = ({ defaultValue, onValueChange, validationState, name
     const dataAttributes = isNullOrUndefined(data)
         ? undefined
         : mapDataAttributes(data);
-    return (_jsxs(ComponentWithLabel, { id: name, size: size, label: label, children: [_jsx("div", { className: inputContainerClassName, children: _jsx("textarea", { id: name, name: name, rows: rows, onBlur: onBlur, readOnly: readonly, disabled: disabled, onChange: onChange, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+    return (_jsxs(ComponentWithLabel, { id: name, size: size, label: label, children: [_jsx("div", { className: inputContainerClassName, children: _jsx("textarea", { id: name, name: name, rows: rows, onBlur: onBlur, readOnly: readonly, disabled: disabled, onChange: onChange, autoFocus: autoFocus, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default MultilineWithLabel;

package/components/primitives/multiline/components/withoutLabel/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { MultilineProps } from "../..";
 /** Multiline textual input component without describing label*/
-declare const MultilineWithoutLabel: ({ onValueChange, defaultValue, validationState, name, placeholder, onBlur, size, style, loading, fixed, rows, className, title, data, hint, }: MultilineProps) => JSX.Element;
+declare const MultilineWithoutLabel: ({ onValueChange, defaultValue, validationState, name, placeholder, onBlur, size, style, loading, fixed, autoFocus, rows, className, title, data, hint, }: MultilineProps) => JSX.Element;
 export default MultilineWithoutLabel;
 //# sourceMappingURL=index.d.ts.map

package/components/primitives/multiline/components/withoutLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/multiline/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,gEAAgE;AAChE,QAAA,MAAM,qBAAqB,kJAUxB,cAAc,KAAG,WAiDnB,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/multiline/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,gEAAgE;AAChE,QAAA,MAAM,qBAAqB,6JAUxB,cAAc,KAAG,WAkDnB,CAAC;AAEF,eAAe,qBAAqB,CAAC"}