@bodynarf/react.components 1.4.23 → 1.4.25

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DropdownProps } from "../..";
 declare const DropdownCompact: ({ items, value, onSelect, deselectable, className, hideOnOuterClick, listMaxHeight, placeholder, compact, disabled, }: DropdownProps) => JSX.Element;
 export default DropdownCompact;

package/components/dropdown/components/compact/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/compact/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAKtC,QAAA,MAAM,eAAe,0HAMlB,aAAa,KAAG,WAsGlB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/compact/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAKtC,QAAA,MAAM,eAAe,0HAMlB,aAAa,KAAG,WAsGlB,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DropdownProps } from '../..';
 declare const DropdownWithLabel: ({ items, value, onSelect, validationState, deselectable, className, hideOnOuterClick, listMaxHeight, label, placeholder, disabled }: DropdownProps) => JSX.Element;
 export default DropdownWithLabel;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/withLabel/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAKtC,QAAA,MAAM,iBAAiB,wIAOpB,aAAa,KAAG,WAoLlB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dropdown/components/withLabel/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAKtC,QAAA,MAAM,iBAAiB,wIAOpB,aAAa,KAAG,WAoLlB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/components/dropdown/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import './dropdown.scss';
 import { BaseElementProps } from '../types';
 import { InputLabel, ValidationState } from '../primitives';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/index.tsx"],"names":[],"mappings":"AAEA,OAAO,iBAAiB,CAAC;AAEzB,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAIzC,oBAAY,aAAa,GAAG,gBAAgB,GAAG;IAC3C,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAE7B,gCAAgC;IAChC,WAAW,EAAE,MAAM,CAAC;IAEpB;;MAEE;IACF,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE1C;;;MAGE;IACF,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB,gEAAgE;IAChE,gBAAgB,EAAE,OAAO,CAAC;IAE1B,wBAAwB;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,+BAA+B;IAC/B,eAAe,CAAC,EAAE,eAAe,CAAC;CACrC,CAAA;AAED,yBAAyB;AACzB,QAAA,MAAM,QAAQ,UAAW,aAAa,KAAG,WAMxC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/index.tsx"],"names":[],"mappings":";AAEA,OAAO,iBAAiB,CAAC;AAEzB,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAIzC,oBAAY,aAAa,GAAG,gBAAgB,GAAG;IAC3C,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAE7B,gCAAgC;IAChC,WAAW,EAAE,MAAM,CAAC;IAEpB;;MAEE;IACF,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE1C;;;MAGE;IACF,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB,gEAAgE;IAChE,gBAAgB,EAAE,OAAO,CAAC;IAE1B,wBAAwB;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,+BAA+B;IAC/B,eAAe,CAAC,EAAE,eAAe,CAAC;CACrC,CAAA;AAED,yBAAyB;AACzB,QAAA,MAAM,QAAQ,UAAW,aAAa,KAAG,WAMxC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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/hooks/usePagination.d.ts

@@ -1,3 +1,4 @@
+import { DependencyList } from "react";
 /** Paginator hook state */
 export interface PaginationState {
     /** Number of current page */
@@ -12,7 +13,8 @@ export interface PaginationState {
  * @param length Pagionation items count
  * @param size Page size. Default is 30
  * @param initPage Initial page. Default is 1
+ * @param dependencies List of dependencies. On any dependency update current page will be set to 1
  * @returns Pair of hook-stored state and handler for slicing current page items
  */
-export declare const usePagination: (length: number, size?: number, initPage?: number) => [PaginationState, (data: Array<any>) => Array<any>];
+export declare const usePagination: (length: number, size: number | undefined, initPage: number | undefined, dependencies: DependencyList) => [PaginationState, (data: Array<any>) => Array<any>];
 //# sourceMappingURL=usePagination.d.ts.map

package/hooks/usePagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePagination.d.ts","sourceRoot":"","sources":["../../src/hooks/usePagination.ts"],"names":[],"mappings":"AAEA,2BAA2B;AAC3B,MAAM,WAAW,eAAe;IAC5B,6BAA6B;IAC7B,WAAW,EAAE,MAAM,CAAC;IAEpB,sBAAsB;IACtB,UAAU,EAAE,MAAM,CAAC;IAEnB,6BAA6B;IAC7B,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAKD;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,WAAY,MAAM,SAAQ,MAAM,aAA8B,MAAM,8BAAgC,MAAM,GAAG,CAAC,KAAK,MAAM,GAAG,CAAC,CAsBtJ,CAAC"}
+{"version":3,"file":"usePagination.d.ts","sourceRoot":"","sources":["../../src/hooks/usePagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAA6C,MAAM,OAAO,CAAC;AAElF,2BAA2B;AAC3B,MAAM,WAAW,eAAe;IAC5B,6BAA6B;IAC7B,WAAW,EAAE,MAAM,CAAC;IAEpB,sBAAsB;IACtB,UAAU,EAAE,MAAM,CAAC;IAEnB,6BAA6B;IAC7B,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAKD;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,WAAY,MAAM,oHAAgH,MAAM,GAAG,CAAC,KAAK,MAAM,GAAG,CAAC,CAwBpL,CAAC"}

package/hooks/usePagination.js

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 /** Default page size */
 const defaultPageSize = 30;
 /**
@@ -6,9 +6,10 @@ const defaultPageSize = 30;
  * @param length Pagionation items count
  * @param size Page size. Default is 30
  * @param initPage Initial page. Default is 1
+ * @param dependencies List of dependencies. On any dependency update current page will be set to 1
  * @returns Pair of hook-stored state and handler for slicing current page items
  */
-export const usePagination = (length, size = defaultPageSize, initPage = 1) => {
+export const usePagination = (length, size = defaultPageSize, initPage = 1, dependencies) => {
     const [currentPage, setCurrentPage] = useState(initPage);
     const count = useMemo(() => Math.ceil(length / size), [size, length]);
     const onChange = useCallback((page) => setCurrentPage(page), [setCurrentPage]);
@@ -22,5 +23,6 @@ export const usePagination = (length, size = defaultPageSize, initPage = 1) => {
         pagesCount: count,
         onPageChange: onChange
     }), [currentPage, count, onChange]);
+    useEffect(() => setCurrentPage(1), dependencies);
     return [state, paginate];
 };

package/package.json

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