@bodynarf/react.components 1.4.22 → 1.4.24

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

@@ -1,5 +1,5 @@
 import { NumberProps } from "../..";
 /** Number component with label */
-declare const NumberWithLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, label, placeholder, onBlur, }: NumberProps) => JSX.Element;
+declare const NumberWithLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, label, placeholder, onBlur, step, }: 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":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAIpC,kCAAkC;AAClC,QAAA,MAAM,eAAe,sJAMlB,WAAW,KAAG,WAyGhB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withLabel/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAIpC,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 { InputSize } 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, }) => {
+const NumberWithLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, label, placeholder, onBlur, step, }) => {
     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, InputSize.Normal));
@@ -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 }) }), 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 ?? 1 }) }), isValidationDefined && validationMessages.length > 0 &&
                                 _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }) })] }));
     }
-    return (_jsxs("div", { className: "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 }) }), isValidationDefined && validationMessages.length > 0 &&
+    return (_jsxs("div", { className: "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 &&
                 _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
 };
 export default NumberWithLabel;

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

@@ -1,5 +1,5 @@
 import { NumberProps } from "../..";
 /** Number component without label */
-declare const NumberWithoutLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, placeholder, onBlur, }: NumberProps) => JSX.Element;
+declare const NumberWithoutLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, placeholder, onBlur, step, }: 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":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAIpC,qCAAqC;AACrC,QAAA,MAAM,kBAAkB,+IAMrB,WAAW,KAAG,WA4ChB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withoutLabel/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAIpC,qCAAqC;AACrC,QAAA,MAAM,kBAAkB,qJAOrB,WAAW,KAAG,WA6ChB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -4,7 +4,7 @@ import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
 import { InputSize } from "../../..";
 import { getValidationValues } from "../../../../../utils";
 /** Number component without label */
-const NumberWithoutLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, placeholder, onBlur, }) => {
+const NumberWithoutLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, placeholder, onBlur, step, }) => {
     const onChange = useCallback((event) => onValueChange(+event.target.value), [onValueChange]);
     const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
     const elClassName = getClassName([
@@ -19,7 +19,7 @@ const NumberWithoutLabel = ({ onValueChange, readonly, disabled, defaultValue, v
         loading === true ? "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 }) }), 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 ?? 1 }) }), isValidationDefined && validationMessages.length > 0 &&
                 _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
 };
 export default NumberWithoutLabel;

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

@@ -3,6 +3,12 @@ import { BaseInputElementProps } from "..";
 export interface NumberProps extends BaseInputElementProps<number> {
     /** Focus out event handler */
     onBlur?: () => void;
+    /**
+     * Difference which will be used to change value after step button click.
+     * See html input step documentation.
+     * @default 1
+    */
+    step?: number;
 }
 /** Number input component */
 declare const Number: (props: NumberProps) => JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/number/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,IAAI,CAAC;AAK3C,kCAAkC;AAClC,MAAM,WAAW,WAAY,SAAQ,qBAAqB,CAAC,MAAM,CAAC;IAC9D,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,6BAA6B;AAC7B,QAAA,MAAM,MAAM,UAAW,WAAW,KAAG,WAOpC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/number/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,IAAI,CAAC;AAK3C,kCAAkC;AAClC,MAAM,WAAW,WAAY,SAAQ,qBAAqB,CAAC,MAAM,CAAC;IAC9D,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;MAIE;IACF,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,6BAA6B;AAC7B,QAAA,MAAM,MAAM,UAAW,WAAW,KAAG,WAOpC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/package.json

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

package/readme.md

@@ -35,6 +35,7 @@ Simple react components based on html elements.
 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
  - **Paginator** - Pagination elements to navigate through paged list
+  
 	Example:
 	```tsx
 		const [{ currentPage, pagesCount, onPageChange }, paginate] = usePagination(items.length, ITEMS_PER_PAGE);