@pushwoosh/kit-helpers 4.4.1 → 4.6.0

package/grid.d.ts

@@ -3,6 +3,7 @@ export declare const GridContainer: import("styled-components").StyledComponent<
     $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
     $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
     $gap?: string | number | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
     $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
     $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
     $margin?: string | number | undefined;
@@ -13,6 +14,7 @@ export declare const Columns: import("styled-components").StyledComponent<"div",
     $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
     $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
     $gap?: string | number | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
     $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
     $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
     $margin?: string | number | undefined;
@@ -25,6 +27,7 @@ export declare const Rows: import("styled-components").StyledComponent<"div", an
     $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
     $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
     $gap?: string | number | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
     $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
     $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
     $margin?: string | number | undefined;
@@ -37,19 +40,25 @@ export declare const Horizontal: import("styled-components").StyledComponent<"di
     $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
     $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
     $gap?: string | number | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
     $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
     $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
     $margin?: string | number | undefined;
     $padding?: string | number | undefined;
     $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
-}, never>;
+} & {
+    $gridAutoFlow: string;
+}, "$gridAutoFlow">;
 export declare const Vertical: import("styled-components").StyledComponent<"div", any, {
     $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
     $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
     $gap?: string | number | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
     $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
     $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
     $margin?: string | number | undefined;
     $padding?: string | number | undefined;
     $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
-}, never>;
+} & {
+    $gridAutoFlow: string;
+}, "$gridAutoFlow">;

package/grid.js

@@ -11,7 +11,7 @@ const createCssDeclaration = (property, value, valueConvert) => {
 export const GridContainer = styled.div.withConfig({
   displayName: "GridContainer",
   componentId: "sc-1mpmh7u-0"
-})(["display:grid;", " ", " ", " ", " ", " ", " ", " ", ""], props => createCssDeclaration('align-content', props.$alignContent), props => createCssDeclaration('align-items', props.$alignItems), props => createCssDeclaration('gap', props.$gap, toCssValue), props => createCssDeclaration('justify-content', props.$justifyContent), props => createCssDeclaration('justify-items', props.$justifyItems), props => createCssDeclaration('margin', props.$margin, toCssValue), props => createCssDeclaration('padding', props.$padding, toCssValue), props => createCssDeclaration('place-items', props.$placeItems));
+})(["display:grid;", " ", " ", " ", " ", " ", " ", " ", " ", ""], props => createCssDeclaration('align-content', props.$alignContent), props => createCssDeclaration('align-items', props.$alignItems), props => createCssDeclaration('gap', props.$gap, toCssValue), props => createCssDeclaration('grid-auto-flow', props.$gridAutoFlow), props => createCssDeclaration('justify-content', props.$justifyContent), props => createCssDeclaration('justify-items', props.$justifyItems), props => createCssDeclaration('margin', props.$margin, toCssValue), props => createCssDeclaration('padding', props.$padding, toCssValue), props => createCssDeclaration('place-items', props.$placeItems));
 export const Columns = styled(GridContainer).withConfig({
   displayName: "Columns",
   componentId: "sc-1mpmh7u-1"
@@ -20,11 +20,15 @@ export const Rows = styled(GridContainer).withConfig({
   displayName: "Rows",
   componentId: "sc-1mpmh7u-2"
 })(["grid-template-rows:", ";"], props => gridTemplate(props.$sizes));
-export const Horizontal = styled(GridContainer).withConfig({
+export const Horizontal = styled(GridContainer).attrs({
+  $gridAutoFlow: 'column'
+}).withConfig({
   displayName: "Horizontal",
   componentId: "sc-1mpmh7u-3"
-})(["grid-auto-flow:column;"]);
-export const Vertical = styled(GridContainer).withConfig({
+})([""]);
+export const Vertical = styled(GridContainer).attrs({
+  $gridAutoFlow: 'row'
+}).withConfig({
   displayName: "Vertical",
   componentId: "sc-1mpmh7u-4"
-})(["grid-auto-flow:row;"]);
+})([""]);

package/hooks/useAsyncFn.d.ts

@@ -22,5 +22,8 @@ export type AsyncFnReturn<T extends FunctionReturningPromise = FunctionReturning
     StateFromFunctionReturningPromise<T>,
     T
 ];
+export type CallbackParams = {
+    reset?: boolean;
+};
 export default function useAsyncFn<T extends FunctionReturningPromise>(fn: T, deps?: DependencyList, initialState?: StateFromFunctionReturningPromise<T> | (() => StateFromFunctionReturningPromise<T>)): AsyncFnReturn<T>;
 export {};

package/hooks/useAsyncFn.js

@@ -7,17 +7,21 @@ export default function useAsyncFn(fn, deps = [], initialState = getDefaultState
   const lastCallId = useRef(0);
   const isMounted = useMountedState();
   const [state, setState] = useState(initialState);
-  const callback = useCallback((...args) => {
+  const callback = useCallback(({
+    reset
+  } = {}) => {
     // eslint-disable-next-line no-plusplus
     const callId = ++lastCallId.current;
     const canSet = () => isMounted() && callId === lastCallId.current;
     if (canSet()) {
-      setState(prevState => ({
+      setState(prevState => reset ? {
+        loading: true
+      } : {
         ...prevState,
         loading: true
-      }));
+      });
     }
-    return fn(...args).then(value => {
+    return fn().then(value => {
       if (canSet()) {
         setState({
           value,

package/hooks/useDelayedEffect.d.ts

@@ -1,2 +1,3 @@
-declare const useDelayedEffect: (effect: () => void, deps: any[], delay: number) => void;
+import { type DependencyList } from 'react';
+declare const useDelayedEffect: (effect: () => void, deps: DependencyList, delay: number) => void;
 export default useDelayedEffect;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/kit-helpers",
-  "version": "4.4.1",
+  "version": "4.6.0",
   "description": "React component for build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",