@bodynarf/react.components 1.10.0 → 1.11.0

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withLabel/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,kCAAkC;AAClC,QAAA,MAAM,eAAe,+KAWlB,WAAW,KAAG,WAuDhB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withLabel/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,kCAAkC;AAClC,QAAA,MAAM,eAAe,0LAWlB,WAAW,KAAG,WAwDhB,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -6,7 +6,7 @@ import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
 import ComponentWithLabel from "../../../internal/componentWithLabel";
 import InternalHint from "../../../internal/hint";
 /** Number component with label */
-const NumberWithLabel = ({ onValueChange, defaultValue, validationState, name = generateGuid(), label, placeholder, size = ElementSize.Normal, style, rounded = false, loading = false, readonly = false, disabled = false, onBlur, step = 1, className, title, data, hint, }) => {
+const NumberWithLabel = ({ onValueChange, defaultValue, validationState, name = generateGuid(), label, placeholder, size = ElementSize.Normal, style, rounded = false, loading = false, readonly = false, disabled = false, autoFocus = false, onBlur, step = 1, className, title, data, hint, }) => {
     const onChange = useCallback((event) => onValueChange(isStringEmpty(event.target.value) ? undefined : +event.target.value), [onValueChange]);
     const elClassName = getClassName([
         className,
@@ -22,6 +22,6 @@ const NumberWithLabel = ({ onValueChange, defaultValue, 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("input", { type: "number", id: name, name: name, step: step, onBlur: onBlur, onChange: onChange, readOnly: readonly, disabled: disabled, 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("input", { type: "number", id: name, name: name, step: step, onBlur: onBlur, onChange: onChange, readOnly: readonly, disabled: disabled, autoFocus: autoFocus, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default NumberWithLabel;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { NumberProps } from "../..";
 /** Number component without label */
-declare const NumberWithoutLabel: ({ onValueChange, defaultValue, validationState, name, size, style, readonly, disabled, rounded, loading, placeholder, onBlur, step, className, title, data, hint, }: NumberProps) => JSX.Element;
+declare const NumberWithoutLabel: ({ onValueChange, defaultValue, validationState, name, size, style, readonly, disabled, autoFocus, rounded, loading, placeholder, onBlur, step, className, title, data, hint, }: NumberProps) => JSX.Element;
 export default NumberWithoutLabel;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,qCAAqC;AACrC,QAAA,MAAM,kBAAkB,wKAYrB,WAAW,KAAG,WAqDhB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,qCAAqC;AACrC,QAAA,MAAM,kBAAkB,mLAYrB,WAAW,KAAG,WAsDhB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -5,7 +5,7 @@ import { ElementSize } from "../../../../../types";
 import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
 import InternalHint from "../../../internal/hint";
 /** Number component without label */
-const NumberWithoutLabel = ({ onValueChange, defaultValue, validationState, name = generateGuid(), size, style, readonly = false, disabled = false, rounded = false, loading = false, placeholder, onBlur, step = 1, className, title, data, hint, }) => {
+const NumberWithoutLabel = ({ onValueChange, defaultValue, validationState, name = generateGuid(), size, style, readonly = false, disabled = false, autoFocus = false, rounded = false, loading = false, placeholder, onBlur, step = 1, className, title, data, hint, }) => {
     const onChange = useCallback((event) => onValueChange(+event.target.value), [onValueChange]);
     const elClassName = getClassName([
         className,
@@ -22,6 +22,6 @@ const NumberWithoutLabel = ({ onValueChange, defaultValue, validationState, name
     const dataAttributes = isNullOrUndefined(data)
         ? undefined
         : mapDataAttributes(data);
-    return (_jsxs("div", { className: "bbr-field field", children: [_jsx("div", { className: containerClassName, children: _jsx("input", { type: "number", id: name, name: name, step: step, onBlur: onBlur, onChange: onChange, readOnly: readonly, disabled: disabled, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+    return (_jsxs("div", { className: "bbr-field field", children: [_jsx("div", { className: containerClassName, children: _jsx("input", { type: "number", id: name, name: name, step: step, onBlur: onBlur, onChange: onChange, readOnly: readonly, disabled: disabled, autoFocus: autoFocus, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default NumberWithoutLabel;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { PasswordProps } from "../..";
-declare const PasswordWithLabel: ({ onValueChange, validationState, name, size, style, rounded, loading, disabled, canShowPassword, label, placeholder, className, title, data, hint, }: PasswordProps) => JSX.Element;
+declare const PasswordWithLabel: ({ onValueChange, validationState, name, size, style, rounded, loading, autoFocus, disabled, canShowPassword, label, placeholder, className, title, data, hint, }: PasswordProps) => JSX.Element;
 export default PasswordWithLabel;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/password/components/withLabel/index.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,QAAA,MAAM,iBAAiB,0JAUpB,aAAa,KAAG,WAqElB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/password/components/withLabel/index.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,QAAA,MAAM,iBAAiB,qKAUpB,aAAa,KAAG,WAsElB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -6,7 +6,7 @@ import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
 import Icon from "../../../../icon";
 import ComponentWithLabel from "../../../internal/componentWithLabel";
 import InternalHint from "../../../internal/hint";
-const PasswordWithLabel = ({ onValueChange, validationState, name = generateGuid(), size = ElementSize.Normal, style, rounded = false, loading = false, disabled = false, canShowPassword = false, label, placeholder, className, title, data, hint, }) => {
+const PasswordWithLabel = ({ onValueChange, validationState, name = generateGuid(), size = ElementSize.Normal, style, rounded = false, loading = false, autoFocus = false, disabled = false, canShowPassword = false, label, placeholder, className, title, data, hint, }) => {
     const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
     const [contentIsHidden, setContentIsHidden] = useState(true);
     const onIconClick = useCallback(() => setContentIsHidden(state => !state), [setContentIsHidden]);
@@ -28,7 +28,7 @@ const PasswordWithLabel = ({ onValueChange, validationState, name = generateGuid
     const dataAttributes = isNullOrUndefined(data)
         ? undefined
         : mapDataAttributes(data);
-    return (_jsxs(ComponentWithLabel, { id: name, size: size, label: label, children: [_jsxs("div", { className: inputContainerClassName, children: [_jsx("input", { type: contentIsHidden ? "password" : "text", id: name, name: name, disabled: disabled, onChange: onChange, className: elClassName, placeholder: placeholder, title: title, ...dataAttributes }), canShowPassword && !loading &&
+    return (_jsxs(ComponentWithLabel, { id: name, size: size, label: label, children: [_jsxs("div", { className: inputContainerClassName, children: [_jsx("input", { type: contentIsHidden ? "password" : "text", id: name, name: name, disabled: disabled, onChange: onChange, className: elClassName, placeholder: placeholder, autoFocus: autoFocus, title: title, ...dataAttributes }), canShowPassword && !loading &&
                         _jsx("span", { onClick: onIconClick, title: "Show password", className: `icon is-right ${elSizeClassName}`, children: _jsx(Icon, { name: contentIsHidden ? "eye" : "eye-slash", size: ElementSize.Medium }) })] }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default PasswordWithLabel;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { PasswordProps } from "../..";
-declare const PasswordWithoutLabel: ({ onValueChange, disabled, validationState, name, size, style, rounded, loading, placeholder, canShowPassword, className, title, data, hint, }: PasswordProps) => JSX.Element;
+declare const PasswordWithoutLabel: ({ onValueChange, disabled, validationState, name, size, style, rounded, loading, autoFocus, placeholder, canShowPassword, className, title, data, hint, }: PasswordProps) => JSX.Element;
 export default PasswordWithoutLabel;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/password/components/withoutLabel/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,QAAA,MAAM,oBAAoB,mJAUvB,aAAa,KAAG,WAoElB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/password/components/withoutLabel/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,QAAA,MAAM,oBAAoB,8JAUvB,aAAa,KAAG,WAqElB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

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

@@ -5,7 +5,7 @@ import { ElementSize } from "../../../../../types";
 import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
 import Icon from "../../../../icon";
 import InternalHint from "../../../internal/hint";
-const PasswordWithoutLabel = ({ onValueChange, disabled, validationState, name = generateGuid(), size = ElementSize.Normal, style, rounded = false, loading = false, placeholder, canShowPassword = false, className, title, data, hint, }) => {
+const PasswordWithoutLabel = ({ onValueChange, disabled, validationState, name = generateGuid(), size = ElementSize.Normal, style, rounded = false, loading = false, autoFocus = false, placeholder, canShowPassword = false, className, title, data, hint, }) => {
     const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
     const [contentIsHidden, setContentIsHidden] = useState(true);
     const onIconClick = useCallback(() => setContentIsHidden(state => !state), [setContentIsHidden]);
@@ -28,7 +28,7 @@ const PasswordWithoutLabel = ({ onValueChange, disabled, validationState, name =
     const dataAttributes = isNullOrUndefined(data)
         ? undefined
         : mapDataAttributes(data);
-    return (_jsxs("div", { className: "bbr-field field", children: [_jsxs("div", { className: containerClassName, children: [_jsx("input", { type: contentIsHidden ? "password" : "text", id: name, name: name, disabled: disabled, onChange: onChange, className: elClassName, placeholder: placeholder, title: title, ...dataAttributes }), canShowPassword && !loading &&
+    return (_jsxs("div", { className: "bbr-field field", children: [_jsxs("div", { className: containerClassName, children: [_jsx("input", { type: contentIsHidden ? "password" : "text", id: name, name: name, disabled: disabled, onChange: onChange, className: elClassName, placeholder: placeholder, autoFocus: autoFocus, title: title, ...dataAttributes }), canShowPassword && !loading &&
                         _jsx("span", { onClick: onIconClick, title: "Show password", className: `icon is-right ${elSizeClassName}`, children: _jsx(Icon, { name: contentIsHidden ? "eye" : "eye-slash", size: ElementSize.Medium }) })] }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default PasswordWithoutLabel;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/withLabel/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,0CAA0C;AAC1C,QAAA,MAAM,aAAa,yKAUhB,SAAS,KAAG,WAqDd,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/withLabel/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,0CAA0C;AAC1C,QAAA,MAAM,aAAa,oLAUhB,SAAS,KAAG,WAsDd,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -6,7 +6,7 @@ import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
 import InternalHint from "../../../internal/hint";
 import ComponentWithLabel from "../../../internal/componentWithLabel";
 /** Textual input with describing label */
-const TextWithLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name = generateGuid(), size = ElementSize.Normal, style, rounded = false, loading = false, label, placeholder, onBlur, className, title, data, hint, }) => {
+const TextWithLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name = generateGuid(), size = ElementSize.Normal, style, rounded = false, loading = false, autoFocus = false, label, placeholder, onBlur, className, title, data, hint, }) => {
     const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
     const elClassName = getClassName([
         className,
@@ -22,6 +22,6 @@ const TextWithLabel = ({ onValueChange, readonly, disabled, defaultValue, valida
     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: "text", id: name, name: name, 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("input", { type: "text", id: name, name: name, onBlur: onBlur, readOnly: readonly, disabled: disabled, onChange: onChange, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, autoFocus: autoFocus, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default TextWithLabel;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,6CAA6C;AAC7C,QAAA,MAAM,gBAAgB,kKAWnB,SAAS,KAAG,WAoDd,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,6CAA6C;AAC7C,QAAA,MAAM,gBAAgB,6KAWnB,SAAS,KAAG,WAqDd,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -5,7 +5,7 @@ import { ElementSize } from "../../../../../types";
 import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
 import InternalHint from "../../../internal/hint";
 /** Textual input without describing label */
-const TextWithoutLabel = ({ onValueChange, defaultValue, validationState, readonly = false, disabled = false, name = generateGuid(), size = ElementSize.Normal, style, rounded = false, loading = false, placeholder, onBlur, className, title, data, hint, }) => {
+const TextWithoutLabel = ({ onValueChange, defaultValue, validationState, readonly = false, disabled = false, name = generateGuid(), size = ElementSize.Normal, style, rounded = false, loading = false, autoFocus = false, placeholder, onBlur, className, title, data, hint, }) => {
     const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
     const elClassName = getClassName([
         className,
@@ -22,6 +22,6 @@ const TextWithoutLabel = ({ onValueChange, defaultValue, validationState, readon
     const dataAttributes = isNullOrUndefined(data)
         ? undefined
         : mapDataAttributes(data);
-    return (_jsxs("div", { className: "bbr-field field", children: [_jsx("div", { className: containerClassName, children: _jsx("input", { type: "text", id: name, name: name, 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("div", { className: "bbr-field field", children: [_jsx("div", { className: containerClassName, children: _jsx("input", { type: "text", id: name, name: name, onBlur: onBlur, readOnly: readonly, disabled: disabled, onChange: onChange, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, autoFocus: autoFocus, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default TextWithoutLabel;

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

@@ -2,5 +2,5 @@
 import "./style.scss";
 import { SearchProps } from "..";
 /** Search component */
-export default function Search({ searchType, onSearch, caption, name, defaultValue, size, isLoading, rounded, disabled, className, title, data, }: SearchProps): JSX.Element;
+export default function Search({ searchType, onSearch, caption, defaultValue, size, isLoading, rounded, disabled, autoFocus, className, title, data, }: SearchProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/search/component/index.tsx"],"names":[],"mappings":";AAQA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAEjC,uBAAuB;AACvB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC3B,UAAU,EAAE,QAAQ,EAAE,OAAO,EAC7B,IAAqB,EAAE,YAAiB,EACxC,IAAyB,EACzB,SAAiB,EAAE,OAAe,EAAE,QAAgB,EAEpD,SAAS,EAAE,KAAK,EAAE,IAAI,GACzB,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAwF3B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/search/component/index.tsx"],"names":[],"mappings":";AAQA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAEjC,uBAAuB;AACvB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC3B,UAAU,EAAE,QAAQ,EAAE,OAAO,EAC7B,YAAiB,EACjB,IAAyB,EACzB,SAAiB,EAAE,OAAe,EAAE,QAAgB,EACpD,SAAiB,EAEjB,SAAS,EAAE,KAAK,EAAE,IAAI,GACzB,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAuF3B"}

package/components/search/component/index.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
-import { generateGuid, getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
 import { ElementSize } from "../../../types";
 import { mapDataAttributes } from "../../../utils";
 import Button from "../../button";
 import "./style.scss";
 /** Search component */
-export default function Search({ searchType, onSearch, caption, name = generateGuid(), defaultValue = "", size = ElementSize.Normal, isLoading = false, rounded = false, disabled = false, className, title, data, }) {
-    const [elementName] = useState(name);
+export default function Search({ searchType, onSearch, caption, defaultValue = "", size = ElementSize.Normal, isLoading = false, rounded = false, disabled = false, autoFocus = false, className, title, data, }) {
     const [searchValue, setSearchValue] = useState(defaultValue);
     const onChange = useCallback((event) => {
         const elementValue = event.target.value;
@@ -35,7 +34,7 @@ export default function Search({ searchType, onSearch, caption, name = generateG
         ? undefined
         : mapDataAttributes(data);
     if (searchType === "byButton") {
-        return (_jsxs("div", { className: "field has-addons", children: [_jsx("div", { className: elClassName, children: _jsx("input", { type: "search", name: elementName, disabled: disabled, onChange: onChange, placeholder: caption, defaultValue: searchValue, className: inputClassName, title: title, ...dataAttributes }) }), _jsx("div", { className: "control", children: _jsx(Button, { type: "info", size: size, caption: "Search", disabled: disabled, isLoading: isLoading, onClick: onSearchButtonClick }) })] }));
+        return (_jsxs("div", { className: "field has-addons", children: [_jsx("div", { className: elClassName, children: _jsx("input", { type: "search", disabled: disabled, onChange: onChange, placeholder: caption, autoFocus: autoFocus, defaultValue: searchValue, className: inputClassName, title: title, ...dataAttributes }) }), _jsx("div", { className: "control", children: _jsx(Button, { type: "info", size: size, caption: "Search", disabled: disabled, isLoading: isLoading, onClick: onSearchButtonClick }) })] }));
     }
-    return (_jsx("div", { className: elClassName, children: _jsx("input", { type: "search", name: elementName, disabled: disabled, onChange: onChange, placeholder: caption, defaultValue: searchValue, className: inputClassName, title: title, ...dataAttributes }) }));
+    return (_jsx("div", { className: elClassName, children: _jsx("input", { type: "search", disabled: disabled, onChange: onChange, placeholder: caption, autoFocus: autoFocus, defaultValue: searchValue, className: inputClassName, title: title, ...dataAttributes }) }));
 }

package/components/search/types.d.ts

@@ -13,8 +13,6 @@ export interface SearchProps extends BaseElementProps {
     onSearch: (searchPattern: string) => void;
     /** Initial search value */
     defaultValue?: string;
-    /** Control name. If empty - will be replaced by random guid */
-    name?: string;
     /** Size of search bar */
     size?: ElementSize;
     /** Should search bar be rounded */
@@ -23,5 +21,11 @@ export interface SearchProps extends BaseElementProps {
     disabled?: boolean;
     /** Should loading icon be displayed in search bar */
     isLoading?: boolean;
+    /**
+     * Set focus on search field after render
+     *
+     * !NOTE! Only 1 element at page can have this flag
+     */
+    autoFocus?: boolean;
 }
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/search/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE3D,kCAAkC;AAClC,MAAM,WAAW,WAAY,SAAQ,gBAAgB;IACjD;;;;MAIE;IACF,UAAU,EAAE,UAAU,GAAG,UAAU,CAAC;IAEpC,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAEhB,qBAAqB;IACrB,QAAQ,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,yBAAyB;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qDAAqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/search/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE3D,kCAAkC;AAClC,MAAM,WAAW,WAAY,SAAQ,gBAAgB;IACjD;;;;MAIE;IACF,UAAU,EAAE,UAAU,GAAG,UAAU,CAAC;IAEpC,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAEhB,qBAAqB;IACrB,QAAQ,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,yBAAyB;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qDAAqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bodynarf/react.components",
-    "version": "1.10.0",
+    "version": "1.11.0",
     "author": {
         "name": "Artem",
         "email": "bodynar@gmail.com"
@@ -28,7 +28,8 @@
         "build_transfer": "npm run build && npm run transfer",
         "prepublish": "npm run build_transfer && cd dist && npm pack",
         "publish_pkg": "npm run build_transfer && cd dist && npm publish --access=public",
-        "lint": "npx eslint src/**/*.ts src/**/*.tsx"
+        "lint": "npx eslint src/**/*.ts src/**/*.tsx",
+        "prep_dev": "copyfiles src/**/*.* demo/src/components"
     },
     "devDependencies": {
         "@types/react": "^18.0.11",

package/readme.md

@@ -43,9 +43,10 @@ Simple react components based on html elements.
 ### Complex components
 Complex components is set of components built via combining simple components or represent complex logical component
  - **Accordion** - Collapsible container that can hide some content inside
- - **Dropdown** - custom dropdown component, based on html div elements & css (requires icon, see icon component description)
+ - **Dropdown** - Custom dropdown component, based on html div elements & css (requires icon, see icon component description)
+ - **Multiselect** - Dropdown with option to select several records
  - **Paginator** - Pagination elements to navigate through paged list
-  
+
 	Example:
 	```tsx
 		const [{ currentPage, pagesCount, onPageChange }, paginate] = usePagination(items.length, ITEMS_PER_PAGE);
@@ -61,8 +62,9 @@ Complex components is set of components built via combining simple components or
 	```
  - **Search** - Search bar with optional button to perform search
  - **Tabs** - Container for multi-content with option of switching displaying content without refreshing\scrolling page
- 
+
 ### Hooks
 
  - **useComponentOutsideClick** - Attach watcher for mouse clicks and emit event when click was outside of component
  - **usePagination** - Create a pagination config to easily manipulate with Paginator component
+ - **useUnmount** - Handle component unmounting event. Useful as component cleanup fn