@bodynarf/react.components 1.7.94 → 1.7.96

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

@@ -4,22 +4,22 @@ import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
 import { ElementSize } from "../../../..";
 import { getValidationValues } from "../../../../../utils";
 /** Multiline textual input component without describing label*/
-const MultilineWithoutLabel = ({ onValueChange, defaultValue, validationState, name, placeholder, onBlur, className, size, style, rounded, loading, fixed, rows, }) => {
+const MultilineWithoutLabel = ({ onValueChange, defaultValue, validationState, name, placeholder, onBlur, className, size, style, rounded = false, loading = false, fixed = false, rows, }) => {
     const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
     const id = name || generateGuid();
     const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
     const elClassName = getClassName([
         className,
         "is-{0}".format(getValueOrDefault(size, ElementSize.Normal)),
-        rounded === true ? "is-rounded" : "",
+        rounded ? "is-rounded" : "",
         styleClassName,
         "textarea",
-        fixed === true ? "has-fixed-size" : "",
+        fixed ? "has-fixed-size" : "",
     ]);
     const inputContainerClassName = getClassName([
         "control",
         "bbr-input",
-        loading === true ? "is-loading" : "",
+        loading ? "is-loading" : "",
     ]);
     return (_jsxs("div", { className: "field", children: [_jsx("div", { className: inputContainerClassName, children: _jsx("textarea", { className: elClassName, placeholder: placeholder, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, id: id, name: id, rows: rows }) }), isValidationDefined && validationMessages.length > 0 &&
                 _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { NumberProps } from "../../../number";
 /** Number component with label */
 declare const NumberWithLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, label, placeholder, onBlur, step, }: NumberProps) => JSX.Element;

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":";AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,kCAAkC;AAClC,QAAA,MAAM,eAAe,4JAOlB,WAAW,KAAG,WA2GhB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withLabel/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,kCAAkC;AAClC,QAAA,MAAM,eAAe,4JAOlB,WAAW,KAAG,WA2GhB,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -4,7 +4,7 @@ import { generateGuid, getClassName, getValueOrDefault, isStringEmpty } from "@b
 import { ElementSize } from "../../../..";
 import { getValidationValues } from "../../../../../utils";
 /** Number component with label */
-const NumberWithLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, label, placeholder, onBlur, step, }) => {
+const NumberWithLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded = false, loading = false, label, placeholder, onBlur, step = 1, }) => {
     const onChange = useCallback((event) => onValueChange(isStringEmpty(event.target.value) ? undefined : +event.target.value), [onValueChange]);
     const id = name || generateGuid();
     const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
@@ -12,13 +12,13 @@ const NumberWithLabel = ({ onValueChange, readonly, disabled, defaultValue, vali
     const elClassName = getClassName([
         className,
         elSizeClassName,
-        rounded === true ? "is-rounded" : "",
+        rounded ? "is-rounded" : "",
         styleClassName,
         "input",
     ]);
     const inputContainerClassName = getClassName([
         "control",
-        loading === true ? "is-loading" : "",
+        loading ? "is-loading" : "",
     ]);
     const labelClassName = getClassName([
         "label",
@@ -35,10 +35,10 @@ const NumberWithLabel = ({ onValueChange, readonly, disabled, defaultValue, vali
             "field-body",
             label.horizontalFieldContainerClassName
         ]);
-        return (_jsxs("div", { className: "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: _jsxs("div", { className: "field", children: [_jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "number", className: elClassName, placeholder: placeholder, readOnly: readonly, disabled: disabled, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, name: id, id: id, step: step ?? 1 }) }), isValidationDefined && validationMessages.length > 0 &&
+        return (_jsxs("div", { className: "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: _jsxs("div", { className: "field", children: [_jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "number", className: elClassName, placeholder: placeholder, readOnly: readonly, disabled: disabled, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, name: id, id: id, step: step }) }), isValidationDefined && validationMessages.length > 0 &&
                                 _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }) })] }));
     }
-    return (_jsxs("div", { className: "bbr-input field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "number", className: elClassName, placeholder: placeholder, readOnly: readonly, disabled: disabled, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, name: id, id: id, step: step ?? 1 }) }), isValidationDefined && validationMessages.length > 0 &&
+    return (_jsxs("div", { className: "bbr-input field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "number", className: elClassName, placeholder: placeholder, readOnly: readonly, disabled: disabled, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, name: id, id: id, step: step }) }), isValidationDefined && validationMessages.length > 0 &&
                 _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
 };
 export default NumberWithLabel;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { NumberProps } from "../../../number";
 /** Number component without label */
 declare const NumberWithoutLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, placeholder, onBlur, step, }: NumberProps) => JSX.Element;

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":";AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,qCAAqC;AACrC,QAAA,MAAM,kBAAkB,qJAOrB,WAAW,KAAG,WA8ChB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withoutLabel/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,qCAAqC;AACrC,QAAA,MAAM,kBAAkB,qJAOrB,WAAW,KAAG,WA8ChB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -4,23 +4,23 @@ import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
 import { ElementSize } from "../../../..";
 import { getValidationValues } from "../../../../../utils";
 /** Number component without label */
-const NumberWithoutLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, placeholder, onBlur, step, }) => {
+const NumberWithoutLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded = false, loading = false, placeholder, onBlur, step = 1, }) => {
     const onChange = useCallback((event) => onValueChange(+event.target.value), [onValueChange]);
     const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
     const elClassName = getClassName([
         className,
         "is-{0}".format(getValueOrDefault(size, ElementSize.Normal)),
-        rounded === true ? "is-rounded" : "",
+        rounded ? "is-rounded" : "",
         styleClassName,
         "input",
     ]);
     const containerClassName = getClassName([
         "control",
         "bbr-input",
-        loading === true ? "is-loading" : "",
+        loading ? "is-loading" : "",
     ]);
     const id = name || generateGuid();
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: containerClassName, children: _jsx("input", { type: "number", className: elClassName, placeholder: placeholder, readOnly: readonly, disabled: disabled, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, name: id, id: id, step: step ?? 1 }) }), isValidationDefined && validationMessages.length > 0 &&
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: containerClassName, children: _jsx("input", { type: "number", className: elClassName, placeholder: placeholder, readOnly: readonly, disabled: disabled, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, name: id, id: id, step: step }) }), isValidationDefined && validationMessages.length > 0 &&
                 _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
 };
 export default NumberWithoutLabel;

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":";AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,QAAA,MAAM,iBAAiB,uIAMpB,aAAa,KAAG,WAgIlB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/password/components/withLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,QAAA,MAAM,iBAAiB,uIAOpB,aAAa,KAAG,WAgIlB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -4,7 +4,7 @@ import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
 import { getValidationValues } from "../../../../../utils";
 import { ElementSize } from "../../../..";
 import Icon from "../../../../icon";
-const PasswordWithLabel = ({ onValueChange, disabled, validationState, name, className, size, style, rounded, loading, label, placeholder, canShowPassword, }) => {
+const PasswordWithLabel = ({ onValueChange, disabled, validationState, name, className, size, style, rounded = false, loading = false, label, placeholder, canShowPassword = false, }) => {
     const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
     const [contentIsHidden, setContentIsHidden] = useState(true);
     const onIconClick = useCallback(() => setContentIsHidden(state => !state), [setContentIsHidden]);
@@ -14,14 +14,14 @@ const PasswordWithLabel = ({ onValueChange, disabled, validationState, name, cla
     const elClassName = getClassName([
         className,
         elSizeClassName,
-        rounded === true ? "is-rounded" : "",
+        rounded ? "is-rounded" : "",
         styleClassName,
         "bbr-password",
         "input",
     ]);
     const inputContainerClassName = getClassName([
         "control",
-        loading === true ? "is-loading" : "",
+        loading ? "is-loading" : "",
         canShowPassword ? "has-icons-right" : "",
         "bbr-password__wrapper",
     ]);

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":";AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,QAAA,MAAM,oBAAoB,gIAMvB,aAAa,KAAG,WA4DlB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/password/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,QAAA,MAAM,oBAAoB,gIAOvB,aAAa,KAAG,WA4DlB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

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

@@ -4,7 +4,7 @@ import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
 import { ElementSize } from "../../../..";
 import { getValidationValues } from "../../../../../utils";
 import Icon from "../../../../icon";
-const PasswordWithoutLabel = ({ onValueChange, disabled, validationState, name, className, size, style, rounded, loading, placeholder, canShowPassword, }) => {
+const PasswordWithoutLabel = ({ onValueChange, disabled, validationState, name, className, size, style, rounded = false, loading = false, placeholder, canShowPassword = false, }) => {
     const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
     const [contentIsHidden, setContentIsHidden] = useState(true);
     const onIconClick = useCallback(() => setContentIsHidden(state => !state), [setContentIsHidden]);
@@ -14,7 +14,7 @@ const PasswordWithoutLabel = ({ onValueChange, disabled, validationState, name,
     const elClassName = getClassName([
         className,
         elSizeClassName,
-        rounded === true ? "is-rounded" : "",
+        rounded ? "is-rounded" : "",
         styleClassName,
         "bbr-password",
         "input",
@@ -22,7 +22,7 @@ const PasswordWithoutLabel = ({ onValueChange, disabled, validationState, name,
     const containerClassName = getClassName([
         "control",
         "bbr-input",
-        loading === true ? "is-loading" : "",
+        loading ? "is-loading" : "",
         canShowPassword ? "has-icons-right" : "",
         "bbr-password__wrapper",
     ]);

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

@@ -2,9 +2,9 @@ import { BaseInputElementProps } from "../..";
 /** Password component props type */
 export interface PasswordProps extends Omit<BaseInputElementProps<string>, "defaultValue" | "readonly"> {
     /**
-     * Is icon "Show password" visible.
+     * Is clickable icon "Show password" visible.
      * Will show password on click
     */
-    canShowPassword: boolean;
+    canShowPassword?: boolean;
 }
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/password/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,oCAAoC;AACpC,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC;IACnG;;;MAGE;IACF,eAAe,EAAE,OAAO,CAAC;CAC5B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/password/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,oCAAoC;AACpC,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC;IACnG;;;MAGE;IACF,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/textWithLabel/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,0CAA0C;AAC1C,QAAA,MAAM,aAAa,sJAMhB,SAAS,KAAG,WAwGd,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/textWithLabel/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,0CAA0C;AAC1C,QAAA,MAAM,aAAa,sJAOhB,SAAS,KAAG,WAwGd,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -4,7 +4,7 @@ import { generateGuid, getClassName, getValueOrDefault, } from "@bodynarf/utils"
 import { ElementSize } from "../../../..";
 import { getValidationValues } from "../../../../../utils";
 /** Textual input with describing label */
-const TextWithLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, label, placeholder, onBlur, }) => {
+const TextWithLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded = false, loading = false, label, placeholder, onBlur, }) => {
     const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
     const id = name || generateGuid();
     const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
@@ -12,13 +12,13 @@ const TextWithLabel = ({ onValueChange, readonly, disabled, defaultValue, valida
     const elClassName = getClassName([
         className,
         elSizeClassName,
-        rounded === true ? "is-rounded" : "",
+        rounded ? "is-rounded" : "",
         styleClassName,
         "input",
     ]);
     const inputContainerClassName = getClassName([
         "control",
-        loading === true ? "is-loading" : "",
+        loading ? "is-loading" : "",
     ]);
     const labelClassName = getClassName([
         "label",

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/textWithoutLabel/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,6CAA6C;AAC7C,QAAA,MAAM,gBAAgB,+IAMnB,SAAS,KAAG,WA6Cd,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/text/components/textWithoutLabel/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,6CAA6C;AAC7C,QAAA,MAAM,gBAAgB,+IAOnB,SAAS,KAAG,WA6Cd,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -4,20 +4,20 @@ import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
 import { ElementSize } from "../../../..";
 import { getValidationValues } from "../../../../../utils";
 /** Textual input without describing label */
-const TextWithoutLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, placeholder, onBlur, }) => {
+const TextWithoutLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded = false, loading = false, placeholder, onBlur, }) => {
     const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
     const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
     const elClassName = getClassName([
         className,
         "is-{0}".format(getValueOrDefault(size, ElementSize.Normal)),
-        rounded === true ? "is-rounded" : "",
+        rounded ? "is-rounded" : "",
         styleClassName,
         "input",
     ]);
     const containerClassName = getClassName([
         "control",
         "bbr-input",
-        loading === true ? "is-loading" : "",
+        loading ? "is-loading" : "",
     ]);
     const id = name || generateGuid();
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: containerClassName, children: _jsx("input", { className: elClassName, type: "text", placeholder: placeholder, readOnly: readonly, disabled: disabled, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, name: id, id: id }) }), isValidationDefined && validationMessages.length > 0 &&

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":";AAIA,OAAO,cAAc,CAAC;AAItB,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,uBAAuB;AACvB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC3B,UAAU,EAAE,QAAQ,EAAE,OAAO,EAC7B,IAAI,EAAE,YAAY,EAClB,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,GACrC,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAyE3B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/search/component/index.tsx"],"names":[],"mappings":";AAIA,OAAO,cAAc,CAAC;AAItB,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,uBAAuB;AACvB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC3B,UAAU,EAAE,QAAQ,EAAE,OAAO,EAC7B,IAAI,EAAE,YAAY,EAClB,IAAI,EACJ,SAAiB,EAAE,OAAe,EAAE,QAAQ,GAC/C,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAyE3B"}

package/components/search/component/index.js

@@ -4,7 +4,7 @@ import { generateGuid, getClassName } from "@bodynarf/utils";
 import "./style.scss";
 import Button from "../../button";
 /** Search component */
-export default function Search({ searchType, onSearch, caption, name, defaultValue, size, isLoading, rounded, disabled, }) {
+export default function Search({ searchType, onSearch, caption, name, defaultValue, size, isLoading = false, rounded = false, disabled, }) {
     const [elementName] = useState(name || generateGuid());
     const [searchValue, setSearchValue] = useState(defaultValue || "");
     const onChange = useCallback((event) => {
@@ -19,14 +19,14 @@ export default function Search({ searchType, onSearch, caption, name, defaultVal
         "bbr-search",
         "control",
         `is-${(size || "normal")}`,
-        isLoading === true ? "is-loading" : "",
+        isLoading ? "is-loading" : "",
         searchType === "byButton" ? "is-expanded" : "",
     ]);
     const inputClassName = getClassName([
         "input",
         "is-unselectable",
         `is-${(size || "normal")}`,
-        rounded === true ? "is-rounded" : "",
+        rounded ? "is-rounded" : "",
     ]);
     if (searchType === "byButton") {
         return (_jsxs("div", { className: "field has-addons", children: [_jsx("div", { className: className, children: _jsx("input", { type: "search", name: elementName, defaultValue: searchValue, className: inputClassName, disabled: disabled, onChange: onChange, placeholder: caption }) }), _jsx("div", { className: "control", children: _jsx(Button, { caption: "Search", type: "info", onClick: onSearchButtonClick, isLoading: isLoading, size: size }) })] }));

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./style.scss";
 import { BaseElementProps, ElementSize } from "../..";
 import { TabItem, TabsPosition, TabsStyle } from "../../tabs";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/component/index.tsx"],"names":[],"mappings":";AAIA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGhE,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGxE,gCAAgC;AAChC,MAAM,WAAW,SAAU,SAAQ,gBAAgB;IAC/C,WAAW;IACX,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtB,8CAA8C;IAC9C,kBAAkB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAE5C;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,YAAY,CAAC;IAExB,sBAAsB;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;GAGG;AACH,QAAA,MAAM,IAAI,4GAMP,SAAS,KAAG,WA6Ed,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/component/index.tsx"],"names":[],"mappings":"AAIA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGhE,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGxE,gCAAgC;AAChC,MAAM,WAAW,SAAU,SAAQ,gBAAgB;IAC/C,WAAW;IACX,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtB,8CAA8C;IAC9C,kBAAkB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAE5C;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,YAAY,CAAC;IAExB,sBAAsB;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;GAGG;AACH,QAAA,MAAM,IAAI,4GAMP,SAAS,KAAG,WA6Ed,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/components/tabs/component/index.js

@@ -10,11 +10,11 @@ import TabItemComponent from "../../tabs/components/item";
  * Tabs panel
  * @throws Items are empty
  */
-const Tabs = ({ items, onActiveItemChange, defaultActive, size, position, style, fullWidth, className, title, data, }) => {
+const Tabs = ({ items, onActiveItemChange, defaultActive = items[0], size, position = TabsPosition.left, style = TabsStyle.default, fullWidth = false, className, title, data, }) => {
     if (items.length === 0) {
         throw new Error("Invalid configuration. Tab items must be defined");
     }
-    const [activeItem, setActiveItem] = useState(defaultActive ?? items[0]);
+    const [activeItem, setActiveItem] = useState(defaultActive);
     const isFirstRun = useRef(true);
     const onTabsClick = useCallback((container) => {
         const closestTab = container.target.closest(".bbr-tabs__tab");
@@ -41,10 +41,10 @@ const Tabs = ({ items, onActiveItemChange, defaultActive, size, position, style,
     const elClassName = getClassName([
         "bbr-tabs",
         "tabs",
-        position ?? TabsPosition.left,
+        position,
         getSizeClassName(size, [ElementSize.Normal]),
-        style ?? TabsStyle.default,
-        fullWidth === true ? "is-fullwidth" : "",
+        style,
+        fullWidth ? "is-fullwidth" : "",
         className,
     ]);
     const dataAttributes = isNullOrUndefined(data)

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tag/component/index.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,OAAO,cAAc,CAAC;AAEtB,sBAAsB;AACtB,QAAA,MAAM,GAAG,2FAMN,QAAQ,KAAG,WAmCb,CAAC;AAEF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tag/component/index.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,OAAO,cAAc,CAAC;AAEtB,sBAAsB;AACtB,QAAA,MAAM,GAAG,2FAQN,QAAQ,KAAG,WA+Bb,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/components/tag/component/index.js

@@ -3,9 +3,7 @@ import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
 import { ElementColor, ElementSize } from "../..";
 import "./style.scss";
 /** Single tag item */
-const Tag = ({ content, size, style, rounded, lightColor, customColor, onClick, className, title, }) => {
-    size ??= ElementSize.Normal;
-    style ??= ElementColor.Default;
+const Tag = ({ content, size = ElementSize.Normal, style = ElementColor.Default, rounded = false, lightColor = false, customColor, onClick, className, title, }) => {
     if (!isNullOrUndefined(customColor)) {
         style = ElementColor.Default;
     }
@@ -14,8 +12,8 @@ const Tag = ({ content, size, style, rounded, lightColor, customColor, onClick,
         "tag",
         style === ElementColor.Default ? "" : `is-${style}`,
         !isNullOrUndefined(customColor) ? "bbr-tag--custom" : "",
-        lightColor === true && isNullOrUndefined(customColor) ? "is-light" : "",
-        rounded === true ? "is-rounded" : "",
+        lightColor && isNullOrUndefined(customColor) ? "is-light" : "",
+        rounded ? "is-rounded" : "",
         size === ElementSize.Normal || size === ElementSize.Small ? "" : `is-${size}`,
         isNullOrUndefined(onClick) ? "" : "bbr-tag--clickable",
         className,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bodynarf/react.components",
-    "version": "1.7.94",
+    "version": "1.7.96",
     "author": {
         "name": "Artem",
         "email": "bodynar@gmail.com"

package/readme.md

@@ -15,26 +15,30 @@ Small library with react components based on Bulma CSS framework&nbsp; <a href="
 5. *(Optional)* To use **Checkbox** component - install [bulma-checkradio](https://www.npmjs.com/package/bulma-checkradio) and make sure you imported these styles in parent container
 
 ## Description
+Mostly all components have root css class with `bbr-` prefix. BBR - Bodynarf Bulma React
 
-Mostly all components have root class with `bbr-` prefix. BBR - Bodynarf Bulma React
 ### Simple components
 Simple react components based on html elements.
 
+#### Controls
+ - **Checkbox** - (*see p.5 of installation*) Checkbox component based on [bulma-checkradio](https://wikiki.github.io/form/checkradio)
  - **ColorPicker** - control that allows picking color (with preview option)
- - **Date** - date input;
- - **Multiline** - multiline text input;
+ - **Date** - date input
+ - **Multiline** - multiline text input
+ - **Number** - number input with step
+ - **Password** - single line password input (requires icon, see icon component description)
  - **Text** - single line text input;
- - **Anchor**
- - **Button**
- - **Number**
- - **Password** - single line password input (requires icon, see *p.4*)
+
+#### Components
+ - **Anchor** - simple anchor (link) component
+ - **Button** - button that allows user to interact with system by clicking it _(assume everyone knows what is button)_
  - **Icon** - *see p.4 of installation*
- - **Dropdown** - custom dropdown component, based on html div elements & css. Allows to use icon in elements
- - **Checkbox** - (*see p.5 of installation*) Checkbox component based on [bulma-checkradio](https://wikiki.github.io/form/checkradio)
+ - **Tag** - small component stands for tag visualization
 
 ### Complex components
 Complex components is set of components built via combining simple components or represent complex logical component
- - **Search** - Search bar with optional button to perform search
+ - **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)
  - **Paginator** - Pagination elements to navigate through paged list
   
 	Example:
@@ -50,8 +54,10 @@ Complex components is set of components built via combining simple components or
 			onPageChange={onPageChange}
 		/>
 	```
+ - **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 emmit event when click was outside of component
+ - **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