@pushwoosh/dumb-components 1.0.11 → 1.0.13

package/DropdownMenu/components/DropdownMenu/DropdownMenu.d.ts

@@ -1,3 +1,3 @@
-import { type ReactElement } from 'react';
-import type { DropdownMenuProps } from './types';
-export declare function DropdownMenu(props: DropdownMenuProps): ReactElement;
+import { type FC } from 'react';
+import { type DropdownMenuProps } from './types';
+export declare const DropdownMenu: FC<DropdownMenuProps>;

package/DropdownMenu/components/DropdownMenu/DropdownMenu.js

@@ -1,27 +1,46 @@
-import React, { useCallback, useState } from 'react';
-import { DropdownMenuContainer } from '../DropdownMenuContainer';
-import { DropdownMenuProvider } from './hooks';
-export function DropdownMenu(props) {
-  const [isAutoOpen, setIsAutoOpen] = useState(false);
+import { autoPlacement, offset, useFloating } from '@floating-ui/react-dom';
+import React, { useEffect, useState } from 'react';
+import { Place } from './styles';
+import { DropdownContext } from '../../context';
+const defaultPlacements = ['top-start', 'top-end', 'bottom-start', 'bottom-end'];
+export const DropdownMenu = ({
+  renderHandler,
+  children,
+  menuZIndex,
+  menuPlacement
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
   const {
-    windowZIndex = 999,
-    windowPlacement = 'bottom-start',
-    isOpen = isAutoOpen,
-    children,
-    onChangeIsOpen = setIsAutoOpen,
-    ...rest
-  } = props;
-  const handleSetIsOpenFalse = useCallback(() => onChangeIsOpen(false), [onChangeIsOpen]);
-  return React.createElement(DropdownMenuProvider, {
-    value: {
-      windowZIndex,
-      closeDropdown: handleSetIsOpenFalse
+    refs,
+    floatingStyles
+  } = useFloating({
+    middleware: [offset(2), autoPlacement({
+      allowedPlacements: menuPlacement ? [menuPlacement] : defaultPlacements
+    })]
+  });
+  useEffect(() => {
+    if (isOpen) {
+      const handleClickListener = e => {
+        var _refs$floating$curren;
+        if (!((_refs$floating$curren = refs.floating.current) !== null && _refs$floating$curren !== void 0 && _refs$floating$curren.contains(e.target)) && !refs.reference.current.contains(e.target)) {
+          setIsOpen(false);
+        }
+      };
+      document.addEventListener('click', handleClickListener);
+      return () => {
+        document.removeEventListener('click', handleClickListener);
+      };
     }
-  }, React.createElement(DropdownMenuContainer, {
-    windowZIndex: windowZIndex,
-    windowPlacement: windowPlacement,
-    onChangeIsOpen: onChangeIsOpen,
-    isOpen: isOpen,
-    ...rest
-  }, children));
-}
+  }, [isOpen, refs.floating, refs.reference]);
+  return React.createElement(DropdownContext.Provider, {
+    value: setIsOpen
+  }, renderHandler({
+    onClick: () => setIsOpen(prev => !prev),
+    ref: refs.setReference,
+    isOpen
+  }), isOpen && React.createElement(Place, {
+    ref: refs.setFloating,
+    style: floatingStyles,
+    "$zIndex": menuZIndex
+  }, typeof children === 'function' ? children() : children));
+};

package/DropdownMenu/components/DropdownMenu/index.d.ts

@@ -1,2 +1,2 @@
 export { DropdownMenu } from './DropdownMenu';
-export { DropdownMenuProvider, useDropdownMenuContext } from './hooks';
+export { DropdownMenuSection } from './styles';

package/DropdownMenu/components/DropdownMenu/index.js

@@ -1,2 +1,2 @@
 export { DropdownMenu } from './DropdownMenu';
-export { DropdownMenuProvider, useDropdownMenuContext } from './hooks';
+export { DropdownMenuSection } from './styles';

package/DropdownMenu/components/DropdownMenu/styles.d.ts

@@ -0,0 +1,28 @@
+export declare const Place: 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;
+} & {
+    $gridAutoFlow: string;
+} & {
+    $zIndex?: number;
+}, "$gridAutoFlow">;
+export declare const DropdownMenuSection: 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;
+} & {
+    $gridAutoFlow: string;
+}, "$gridAutoFlow">;

package/DropdownMenu/components/DropdownMenu/styles.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+import { Color, Shadow, ShapeRadius, Spacing } from '@pushwoosh/kit-constants';
+import { Vertical } from '@pushwoosh/kit-helpers';
+export const Place = styled(Vertical).withConfig({
+  displayName: "Place",
+  componentId: "sc-ij8wqc-0"
+})(["border:1px solid ", ";background-color:", ";min-width:200px;max-height:300px;overflow-y:auto;border-radius:", ";box-shadow:", ";z-index:", ";"], Color.FORM, Color.FROZEN, ShapeRadius.CONTROL, Shadow.REGULAR, ({
+  $zIndex
+}) => $zIndex || 10);
+export const DropdownMenuSection = styled(Vertical).withConfig({
+  displayName: "DropdownMenuSection",
+  componentId: "sc-ij8wqc-1"
+})(["padding:", " 0;&:not(:first-child){border-top:1px solid ", ";}"], Spacing.S3, Color.FORM);

package/DropdownMenu/components/DropdownMenu/types.d.ts

@@ -1,23 +1,13 @@
-import type { Ref, ReactNode } from 'react';
-type WindowPlacement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'bottom' | 'right' | 'left' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end';
-export type DropdownMenuProps = {
-    readonly boxRef?: Ref<HTMLDivElement>;
-    readonly title?: string | ReactNode;
-    readonly color: 'primary' | 'secondary';
-    readonly view: 'shape' | 'ghost';
-    readonly minimal?: boolean;
-    readonly hideChevron?: boolean;
-    readonly icon?: ReactNode;
-    readonly iconPlacement?: 'left' | 'right';
-    readonly windowPlacement?: WindowPlacement;
-    readonly windowZIndex?: number;
-    readonly isDisabled?: boolean;
-    readonly isOpen?: boolean;
-    readonly onChangeIsOpen?: (isOpen: boolean) => void;
-    readonly children: ReactNode;
+import { type ReferenceType, type Placement } from '@floating-ui/react-dom';
+import type { ReactNode } from 'react';
+export type HandlerProps = {
+    onClick: () => void;
+    ref: (el: ReferenceType | null) => void;
+    isOpen: boolean;
 };
-export type DropdownMenuContext = {
-    readonly closeDropdown: () => void;
-    readonly windowZIndex: number;
+export type DropdownMenuProps = {
+    renderHandler: (args: HandlerProps) => ReactNode;
+    children: (() => ReactNode) | ReactNode;
+    menuZIndex?: number;
+    menuPlacement?: Placement;
 };
-export {};

package/DropdownMenu/components/DropdownMenuButton/DropdownMenuButton.d.ts

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+import { type DropdownMenuButtonProps } from './types';
+export declare const DropdownMenuButton: FC<DropdownMenuButtonProps>;

package/DropdownMenu/components/DropdownMenuButton/DropdownMenuButton.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Button } from '../../../Button';
+import { DropdownMenu } from '../DropdownMenu';
+export const DropdownMenuButton = ({
+  label,
+  menuZIndex,
+  menuPlacement,
+  children,
+  ...buttonProps
+}) => {
+  return React.createElement(DropdownMenu, {
+    menuZIndex: menuZIndex,
+    menuPlacement: menuPlacement,
+    renderHandler: ({
+      ref,
+      onClick,
+      isOpen
+    }) => React.createElement(Button, {
+      ...buttonProps,
+      boxRef: ref,
+      onClick: onClick,
+      isOpen: isOpen
+    }, label)
+  }, children);
+};

package/DropdownMenu/components/DropdownMenuButton/index.d.ts

@@ -0,0 +1 @@
+export { DropdownMenuButton } from './DropdownMenuButton';

package/DropdownMenu/components/DropdownMenuButton/index.js

@@ -0,0 +1 @@
+export { DropdownMenuButton } from './DropdownMenuButton';

package/DropdownMenu/components/DropdownMenuButton/types.d.ts

@@ -0,0 +1,14 @@
+import { type Placement } from '@floating-ui/react-dom';
+import { type ReactNode } from 'react';
+import { type RequiredButtonProps } from '../../../Button';
+export type DropdownMenuButtonProps = {
+    label: ReactNode;
+    menuZIndex?: number;
+    menuPlacement?: Placement;
+    color: RequiredButtonProps['color'];
+    size?: RequiredButtonProps['size'];
+    view?: RequiredButtonProps['view'];
+    icon?: RequiredButtonProps['icon'];
+    rightIcon?: RequiredButtonProps['rightIcon'];
+    children: (() => ReactNode) | ReactNode;
+};

package/DropdownMenu/components/DropdownMenuItem/DropdownMenuItem.d.ts

@@ -1,5 +1,3 @@
-import { type ReactElement } from 'react';
-import type { DropdownMenuItemPropsWithoutAs, DropdownMenuItemPropsWithAsTag, DropdownMenuItemPropsWithAsComponent } from './types';
-export declare function DropdownMenuItem(props: DropdownMenuItemPropsWithoutAs): ReactElement;
-export declare function DropdownMenuItem<AS extends keyof HTMLElementTagNameMap>(props: DropdownMenuItemPropsWithAsTag<AS>): ReactElement;
-export declare function DropdownMenuItem<OuterProps extends object>(props: DropdownMenuItemPropsWithAsComponent<OuterProps>): ReactElement;
+import { type FC } from 'react';
+import { type DropdownMenuItemProps } from './types';
+export declare const DropdownMenuItem: FC<DropdownMenuItemProps>;

package/DropdownMenu/components/DropdownMenuItem/DropdownMenuItem.js

@@ -1,38 +1,26 @@
-import React, { useCallback } from 'react';
-import { useDropdownMenuContext } from '../DropdownMenu';
-import { DropdownMenuItemBox } from './styles';
-export function DropdownMenuItem(props) {
-  const {
-    boxRef,
-    color,
-    isInteractive,
-    isDisabled,
-    onClick,
-    onChange,
-    ...rest
-  } = props;
-  const {
-    closeDropdown
-  } = useDropdownMenuContext();
-  const handleClick = useCallback(event => {
-    onClick === null || onClick === void 0 || onClick(event);
-    if (!isInteractive && !isDisabled && !onChange) {
-      closeDropdown();
+import React, { useContext } from 'react';
+import { DropdownMenuItemStyled } from './styles';
+import { DropdownContext } from '../../context';
+export const DropdownMenuItem = ({
+  children,
+  onClick,
+  isActive,
+  isDanger,
+  disabled
+}) => {
+  const onClickContext = useContext(DropdownContext);
+  if (process.env.NODE_ENV === 'development') {
+    if (!onClickContext) {
+      console.error('DropdownMenuItem must be inside DropdownMenu');
     }
-  }, [isDisabled, isInteractive, onClick, onChange, closeDropdown]);
-  const handleChange = useCallback(event => {
-    onChange === null || onChange === void 0 || onChange(event);
-    if (!isInteractive && !isDisabled) {
-      closeDropdown();
-    }
-  }, [isDisabled, isInteractive, onChange, closeDropdown]);
-  return React.createElement(DropdownMenuItemBox, {
-    ref: boxRef,
-    "$color": color,
-    "$isDisabled": isDisabled,
-    disabled: isDisabled,
-    onClick: handleClick,
-    onChange: handleChange,
-    ...rest
-  });
-}
+  }
+  return React.createElement(DropdownMenuItemStyled, {
+    "$active": isActive,
+    "$danger": isDanger,
+    onClick: () => {
+      onClickContext === null || onClickContext === void 0 || onClickContext(false);
+      onClick();
+    },
+    disabled: disabled
+  }, children);
+};

package/DropdownMenu/components/DropdownMenuItem/index.d.ts

@@ -1,3 +1 @@
 export { DropdownMenuItem } from './DropdownMenuItem';
-export { DropdownMenuItemBox } from './styles';
-export type { DropdownMenuItemColor } from './types';

package/DropdownMenu/components/DropdownMenuItem/index.js

@@ -1,2 +1 @@
-export { DropdownMenuItem } from './DropdownMenuItem';
-export { DropdownMenuItemBox } from './styles';
+export { DropdownMenuItem } from './DropdownMenuItem';

package/DropdownMenu/components/DropdownMenuItem/styles.d.ts

@@ -1,5 +1,4 @@
-import type { DropdownMenuItemColor } from './types';
-export declare const DropdownMenuItemBox: import("styled-components").StyledComponent<"a", any, {
-    $color: DropdownMenuItemColor;
-    $isDisabled?: boolean;
+export declare const DropdownMenuItemStyled: import("styled-components").StyledComponent<"button", any, {
+    $active?: boolean;
+    $danger?: boolean;
 }, never>;

package/DropdownMenu/components/DropdownMenuItem/styles.js

@@ -1,73 +1,12 @@
 import styled from 'styled-components';
-import { Color, FontSize, FontWeight, LineHeight, Spacing } from '@pushwoosh/kit-constants';
-export const DropdownMenuItemBox = styled.a.withConfig({
-  displayName: "DropdownMenuItemBox",
+import { Color, Spacing, UnitSize } from '@pushwoosh/kit-constants';
+export const DropdownMenuItemStyled = styled.button.withConfig({
+  displayName: "DropdownMenuItemStyled",
   componentId: "sc-1wmyvxp-0"
-})(["display:block;width:100%;padding:", " ", ";appearance:none;background:transparent;border:none;color:", ";font-size:", ";font-weight:", ";line-height:", ";white-space:nowrap;text-decoration:none;text-align:left;cursor:", ";user-select:none;&:hover{background:", ";color:", ";text-decoration:none;}&:active{background:", ";color:", ";pointer-events:", ";}"], Spacing.S3, Spacing.S4, ({
-  $color,
-  $isDisabled
+})(["appearance:none;display:flex;align-items:center;padding:0 ", ";height:", ";border:none;color:", ";background:none;cursor:pointer;&:hover{background:", ";color:", ";}&:disabled{color:", ";cursor:not-allowed;}"], Spacing.S3, UnitSize.FIELD_HEIGHT, ({
+  $active,
+  $danger
 }) => {
-  if ($isDisabled) {
-    return Color.LOCKED;
-  }
-  switch ($color) {
-    case 'primary':
-      return Color.PRIMARY;
-    case 'danger':
-      return Color.DANGER;
-    default:
-      return Color.MAIN;
-  }
-}, FontSize.REGULAR, FontWeight.REGULAR, LineHeight.REGULAR, ({
-  $isDisabled
-}) => $isDisabled ? 'not-allowed' : 'pointer', ({
-  $isDisabled
-}) => $isDisabled ? 'transparent' : Color.SOFT_LIGHT, ({
-  $color,
-  $isDisabled
-}) => {
-  if ($isDisabled) {
-    return Color.LOCKED;
-  }
-  switch ($color) {
-    case 'primary':
-      return Color.PRIMARY_HOVER;
-    case 'danger':
-      return Color.DANGER_HOVER;
-    default:
-      return Color.MAIN;
-  }
-}, ({
-  $color,
-  $isDisabled
-}) => {
-  if ($isDisabled) {
-    return 'transparent';
-  }
-  switch ($color) {
-    case 'primary':
-      return Color.BRIGHT_LIGHT;
-    case 'danger':
-      return Color.DANGER_LIGHT;
-    default:
-      return Color.BRIGHT_LIGHT;
-  }
-}, ({
-  $color,
-  $isDisabled
-}) => {
-  if ($isDisabled) {
-    return Color.LOCKED;
-  }
-  switch ($color) {
-    case 'primary':
-      return Color.PRIMARY_PRESSED;
-    case 'danger':
-      return Color.DANGER_PRESSED;
-    default:
-      return Color.PRIMARY_PRESSED;
-  }
-}, ({
-  $isDisabled
-}) => $isDisabled ? 'none' : 'auto');
-DropdownMenuItemBox.displayName = 'DropdownMenuItemBox';
+  if ($danger) return Color.DANGER;
+  return $active ? Color.PRIMARY : Color.MAIN;
+}, Color.SOFT_LIGHT, Color.MAIN, Color.LOCKED);

package/DropdownMenu/components/DropdownMenuItem/types.d.ts

@@ -1,24 +1,7 @@
-import type { JSX, Ref, ComponentType } from 'react';
-export type DropdownMenuItemColor = 'main' | 'primary' | 'danger';
-export type DropdownMenuItemPropsWithoutAs = Omit<JSX.IntrinsicElements['a'], 'ref'> & {
-    readonly boxRef?: Ref<HTMLAnchorElement>;
-    readonly color: DropdownMenuItemColor;
-    readonly title: string;
-    readonly href: string;
-    readonly isInteractive?: boolean;
-    readonly isDisabled?: boolean;
-};
-export type DropdownMenuItemPropsWithAsTag<AS extends keyof HTMLElementTagNameMap> = Omit<JSX.IntrinsicElements[AS], 'ref'> & {
-    readonly boxRef?: Ref<HTMLElementTagNameMap[AS]>;
-    readonly as: AS;
-    readonly color: DropdownMenuItemColor;
-    readonly isInteractive?: boolean;
-    readonly isDisabled?: boolean;
-};
-export type DropdownMenuItemPropsWithAsComponent<OuterProps extends object> = OuterProps & {
-    readonly boxRef?: Ref<HTMLElement>;
-    readonly as: ComponentType<OuterProps>;
-    readonly color: DropdownMenuItemColor;
-    readonly isInteractive?: boolean;
-    readonly isDisabled?: boolean;
-};
+import type { PropsWithChildren } from 'react';
+export type DropdownMenuItemProps = PropsWithChildren<{
+    onClick: () => void;
+    isActive?: boolean;
+    isDanger?: boolean;
+    disabled?: boolean;
+}>;

package/DropdownMenu/context.d.ts

@@ -0,0 +1 @@
+export declare const DropdownContext: import("react").Context<((isOpen: false) => void) | null>;

package/DropdownMenu/context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const DropdownContext = createContext(null);

package/DropdownMenu/index.d.ts

@@ -1,9 +1,3 @@
-export { DropdownMenu, DropdownMenuProvider, useDropdownMenuContext } from './components/DropdownMenu';
-export { DropdownMenuContainer } from './components/DropdownMenuContainer';
-export { DropdownMenuGroup } from './components/DropdownMenuGroup';
-export { DropdownMenuItem, DropdownMenuItemBox, type DropdownMenuItemColor } from './components/DropdownMenuItem';
-export { DropdownMenuItemCheckbox } from './components/DropdownMenuItemCheckbox';
-export { DropdownMenuItemPick } from './components/DropdownMenuItemPick';
-export { DropdownMenuItemRadio } from './components/DropdownMenuItemRadio';
-export { DropdownMenuNested } from './components/DropdownMenuNested';
-export { DropdownMenuWindow } from './components/DropdownMenuWindow';
+export { DropdownMenu, DropdownMenuSection } from './components/DropdownMenu';
+export { DropdownMenuButton } from './components/DropdownMenuButton';
+export { DropdownMenuItem } from './components/DropdownMenuItem';

package/DropdownMenu/index.js

@@ -1,9 +1,3 @@
-export { DropdownMenu, DropdownMenuProvider, useDropdownMenuContext } from './components/DropdownMenu';
-export { DropdownMenuContainer } from './components/DropdownMenuContainer';
-export { DropdownMenuGroup } from './components/DropdownMenuGroup';
-export { DropdownMenuItem, DropdownMenuItemBox } from './components/DropdownMenuItem';
-export { DropdownMenuItemCheckbox } from './components/DropdownMenuItemCheckbox';
-export { DropdownMenuItemPick } from './components/DropdownMenuItemPick';
-export { DropdownMenuItemRadio } from './components/DropdownMenuItemRadio';
-export { DropdownMenuNested } from './components/DropdownMenuNested';
-export { DropdownMenuWindow } from './components/DropdownMenuWindow';
+export { DropdownMenu, DropdownMenuSection } from './components/DropdownMenu';
+export { DropdownMenuButton } from './components/DropdownMenuButton';
+export { DropdownMenuItem } from './components/DropdownMenuItem';

package/EmailTemplatePreview/components/NoEmailTemplatePreview/NoEmailTemplatePreview.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Spacing } from '@pushwoosh/kit-constants';
 import { Vertical } from '@pushwoosh/kit-helpers';
-import PwLogo from './assets/PW_logo.svg?url';
+import Email from './assets/email.svg?url';
 import { Container, PreviewMock } from './styles';
 import { LockedText, LockedTitle } from '../../../common';
 export function NoEmailTemplatePreview() {
@@ -12,8 +12,8 @@ export function NoEmailTemplatePreview() {
     "$alignItems": "center",
     "$justifyContent": "center"
   }, React.createElement("img", {
-    src: PwLogo,
-    alt: "Application logo"
+    src: Email,
+    alt: "Email envelop icon"
   })), React.createElement(Vertical, null, React.createElement(LockedTitle, null, "Content missed..."), React.createElement(LockedText, {
     "$small": true
   }, "Might be old data or deleted presets")));

package/EmailTemplatePreview/components/NoEmailTemplatePreview/assets/email.svg

@@ -0,0 +1,5 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="logo - for light bg - outlines" opacity="0.5">
+<path id="shape" fill-rule="evenodd" clip-rule="evenodd" d="M9.16671 9.25C7.09564 9.25 5.41671 10.9289 5.41671 13V13.393C5.41644 13.408 5.41644 13.423 5.41671 13.438V28C5.41671 30.0711 7.09564 31.75 9.16671 31.75H30.8334C32.9044 31.75 34.5834 30.0711 34.5834 28V13.44C34.5837 13.4237 34.5837 13.4074 34.5834 13.391V13C34.5834 10.9289 32.9044 9.25 30.8334 9.25H9.16671ZM32.0484 12.7053C31.9159 12.1571 31.4222 11.75 30.8334 11.75H9.16671C8.57788 11.75 8.08415 12.1571 7.95166 12.7052L20.0001 19.4825L32.0484 12.7053ZM7.91671 15.554V28C7.91671 28.6904 8.47635 29.25 9.16671 29.25H30.8334C31.5237 29.25 32.0834 28.6904 32.0834 28V15.554L20.6129 22.0061C20.2324 22.2202 19.7677 22.2202 19.3872 22.0061L7.91671 15.554Z" fill="#7694B8" fill-opacity="0.2"/>
+</g>
+</svg>

package/Table/hooks/helpers.d.ts

@@ -0,0 +1,3 @@
+export declare function pickBy<T extends Record<string, any>>(obj: T): Record<string, any>;
+export declare function mapKeys<T extends Record<string, any>, K extends string>(obj: T, mapper: (key: string) => K): Record<K, T[keyof T]>;
+export declare function shallowEqual<T extends Record<string, any>>(a: T, b: T): boolean;

package/Table/hooks/helpers.js

@@ -0,0 +1,9 @@
+export function pickBy(obj) {
+  return Object.fromEntries(Object.entries(obj).filter(([, value]) => !!value));
+}
+export function mapKeys(obj, mapper) {
+  return Object.fromEntries(Object.entries(obj).map(([key, value]) => [mapper(key), value]));
+}
+export function shallowEqual(a, b) {
+  return Object.keys(a).every(key => a[key] === b[key]);
+}

package/Table/hooks/index.d.ts

@@ -1,2 +1,2 @@
 export { useDataTableContext } from './useDataTableContext';
-export { useDataTableParams } from './useDataTableParams';
+export { useDataTableGetParams } from './useDataTableGetParams';

package/Table/hooks/index.js

@@ -1,2 +1,2 @@
 export { useDataTableContext } from './useDataTableContext';
-export { useDataTableParams } from './useDataTableParams';
+export { useDataTableGetParams } from './useDataTableGetParams';

package/Table/hooks/useDataTableGetParams.d.ts

@@ -0,0 +1,11 @@
+import type { DataTableParams } from '../types';
+type UseDataTableParamsParams<P extends DataTableParams> = {
+    defaultOrder: string;
+    defaultDirection?: 'asc' | 'desc';
+    defaultPerPage?: number;
+    customizeParams?: (obj: Record<string, string>, params: DataTableParams) => P;
+    prefix?: string;
+};
+type UseDataTableParamsReturn<P> = readonly [P, (params: P) => void];
+export declare function useDataTableGetParams<P extends DataTableParams>({ defaultOrder, defaultDirection, defaultPerPage, customizeParams, prefix, }: UseDataTableParamsParams<P>): UseDataTableParamsReturn<P>;
+export {};

package/Table/hooks/useDataTableGetParams.js

@@ -0,0 +1,49 @@
+import { useMemo, useRef } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import { usePersistentFunction } from '@pushwoosh/kit-helpers';
+import { mapKeys, pickBy, shallowEqual } from './helpers';
+export function useDataTableGetParams({
+  defaultOrder,
+  defaultDirection = 'asc',
+  defaultPerPage = 10,
+  customizeParams,
+  prefix = ''
+}) {
+  const history = useHistory();
+  const {
+    search: locationSearch
+  } = useLocation();
+  const customizeParamsRef = useRef(customizeParams);
+  customizeParamsRef.current = customizeParams;
+  const prevDataTableParamsRef = useRef({});
+  const dataTableParams = useMemo(() => {
+    const searchParams = new URLSearchParams(locationSearch);
+    const searchParamsWoPrefix = mapKeys(Object.fromEntries(searchParams), key => key.startsWith(prefix) ? key.slice(prefix.length) : key);
+    // eslint-disable-next-line no-nested-ternary
+    const realOrderDirection = !searchParamsWoPrefix.direction ? defaultDirection : searchParamsWoPrefix.direction === 'asc' ? 'asc' : 'desc';
+    const params = {
+      search: searchParamsWoPrefix.search ?? '',
+      order: searchParamsWoPrefix.order || defaultOrder,
+      direction: realOrderDirection,
+      page: +searchParamsWoPrefix.page || 1,
+      perPage: +searchParamsWoPrefix.perPage || defaultPerPage
+    };
+    // it is necessary to compare with the previous parameters so that there are no extra rerenders
+    const resultParams = customizeParamsRef.current ? customizeParamsRef.current(searchParamsWoPrefix, params) : params;
+    if (!shallowEqual(resultParams, prevDataTableParamsRef.current)) {
+      prevDataTableParamsRef.current = resultParams;
+    }
+    return prevDataTableParamsRef.current;
+  }, [locationSearch, defaultDirection, defaultOrder, defaultPerPage, prefix]);
+  const changeDataTableParams = usePersistentFunction(params => {
+    const searchParams = new URLSearchParams(locationSearch);
+    const paramsWithPrefix = pickBy(mapKeys(params, key => `${prefix}${key}`));
+    Object.entries(paramsWithPrefix).forEach(([key, value]) => {
+      searchParams.set(key, value);
+    });
+    history.push({
+      search: searchParams.toString()
+    });
+  });
+  return [dataTableParams, changeDataTableParams];
+}

package/Table/index.d.ts

@@ -8,6 +8,6 @@ export { DataTableSortableCell } from './components/DataTableSortableCell';
 export { Loading } from './components/Loading';
 export { TableList } from './components/TableList';
 export { TablePagination } from './components/TablePagination';
-export { useDataTableContext, useDataTableParams } from './hooks';
+export { useDataTableContext, useDataTableGetParams } from './hooks';
 export { Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description, } from './styles';
 export type { DataTableParams, DataTableData, DataTableContextType } from './types';

package/Table/index.js

@@ -8,5 +8,5 @@ export { DataTableSortableCell } from './components/DataTableSortableCell';
 export { Loading } from './components/Loading';
 export { TableList } from './components/TableList';
 export { TablePagination } from './components/TablePagination';
-export { useDataTableContext, useDataTableParams } from './hooks';
+export { useDataTableContext, useDataTableGetParams } from './hooks';
 export { Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description } from './styles';

package/index.d.ts

@@ -5,7 +5,7 @@ export { Button, GhostButton } from './Button';
 export { CardMetric } from './CardMetric';
 export { Checkbox } from './Checkbox';
 export { Drawer, DrawerHeader, DrawerTitle, DrawerBody, DrawerDocs, useDocs, } from './Drawer';
-export { DropdownMenu, DropdownMenuProvider, useDropdownMenuContext, DropdownMenuContainer, DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemBox, DropdownMenuItemCheckbox, DropdownMenuItemPick, DropdownMenuItemRadio, DropdownMenuNested, DropdownMenuWindow, } from './DropdownMenu';
+export { DropdownMenu, DropdownMenuButton, DropdownMenuSection, DropdownMenuItem, } from './DropdownMenu';
 export { EditableField } from './EditableField';
 export { InputFile } from './InputFile';
 export { Modal, ModalTitle, ModalConfirm, ModalConfirmProvider, useModalConfirm, ModalHeader, ModalBodyGroup, ModalBodyItem, ModalBody, ModalFooter, } from './Modal';
@@ -26,7 +26,7 @@ export { StatisticCard } from './StatisticCard';
 export { EmailTemplatePreview, NoEmailTemplatePreview } from './EmailTemplatePreview';
 export { PushPreview } from './PushPreview';
 export { Toast, ToastProvider, useToast } from './Toast';
-export { ClearableInput, DataTable, DataTableList, DataTableGetContext, DataTablePagination, DataTableSearchInput, DataTableSortableCell, Loading, TableList, TablePagination, useDataTableContext, useDataTableParams, Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description, type DataTableParams, type DataTableData, type DataTableContextType, } from './Table';
+export { ClearableInput, DataTable, DataTableList, DataTableGetContext, DataTablePagination, DataTableSearchInput, DataTableSortableCell, Loading, TableList, TablePagination, useDataTableContext, useDataTableGetParams, Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description, type DataTableParams, type DataTableData, type DataTableContextType, } from './Table';
 export { AutosizeInput, PageHeader, PageHeaderEditable } from './PageHeader';
 export { ExportResult } from './ExportResult';
 export { NativeInput, NativeTextarea, NativeSelect } from './native';