@pushwoosh/dumb-components 1.0.12 → 1.0.14

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/DropdownMenuButton/types.js

@@ -0,0 +1 @@
+export {};

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/Modal/components/ModalContent/index.d.ts

@@ -1 +1 @@
-export { ModalHeader, ModalBodyGroup, ModalBodyItem, ModalBody, ModalFooter, } from './styled';
+export { ModalHeader, ModalBodyGroup, ModalBodyItem, ModalBody, ModalFooter, } from './styles';

package/Modal/components/ModalContent/index.js

@@ -1 +1 @@
-export { ModalHeader, ModalBodyGroup, ModalBodyItem, ModalBody, ModalFooter } from './styled';
+export { ModalHeader, ModalBodyGroup, ModalBodyItem, ModalBody, ModalFooter } from './styles';

package/Modal/components/ModalContent/{styled.js → styles.js}

@@ -3,27 +3,27 @@ import { Color, Spacing } from '@pushwoosh/kit-constants';
 import { Vertical } from '@pushwoosh/kit-helpers';
 export const ModalHeader = styled.div.withConfig({
   displayName: "ModalHeader",
-  componentId: "sc-t60vr-0"
+  componentId: "sc-1b5r517-0"
 })(["padding:", " ", " ", ";background-color:", ";"], Spacing.S7, Spacing.S7, Spacing.S3, Color.CLEAR);
 ModalHeader.displayName = 'ModalHeader';
 export const ModalBodyGroup = styled(Vertical).withConfig({
   displayName: "ModalBodyGroup",
-  componentId: "sc-t60vr-1"
+  componentId: "sc-1b5r517-1"
 })(["background-color:", ";gap:1px;"], Color.DIVIDER);
 ModalBodyGroup.displayName = 'ModalBodyGroup';
 export const ModalBodyItem = styled.div.withConfig({
   displayName: "ModalBodyItem",
-  componentId: "sc-t60vr-2"
+  componentId: "sc-1b5r517-2"
 })(["padding:", " ", ";background-color:", ";"], ({
   $vPadding
 }) => $vPadding ? Spacing.S7 : 0, Spacing.S7, Color.CLEAR);
 export const ModalBody = styled.div.withConfig({
   displayName: "ModalBody",
-  componentId: "sc-t60vr-3"
+  componentId: "sc-1b5r517-3"
 })(["background-color:", ";overflow-y:auto;&:not(:has(> ", ")){padding:", ";&:not(:first-child){padding-top:0;}}"], Color.CLEAR, ModalBodyGroup, Spacing.S7);
 ModalBody.displayName = 'ModalBody';
 export const ModalFooter = styled.div.withConfig({
   displayName: "ModalFooter",
-  componentId: "sc-t60vr-4"
+  componentId: "sc-1b5r517-4"
 })(["padding:", ";background-color:", ";border-top:1px solid ", ";"], Spacing.S7, Color.CLEAR, Color.DIVIDER);
 ModalFooter.displayName = 'ModalFooter';

package/Radio/Radio.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { NativeLabel, NativeRadio } from './styled';
+import { NativeLabel, NativeRadio } from './styles';
 // eslint-disable-next-line prefer-const
 let counter = 0;
 export function Radio(props) {

package/Radio/{styled.js → styles.js}

@@ -3,11 +3,11 @@ import { Color, Spacing, FontSize, LineHeight } from '@pushwoosh/kit-constants';
 import { ColorMap } from './maps';
 export const NativeRadio = styled.input.withConfig({
   displayName: "NativeRadio",
-  componentId: "sc-154q01x-0"
+  componentId: "sc-34lgtl-0"
 })(["appearance:none;-webkit-appearance:none;-moz-appearance:none;width:20px;height:20px;border:2px solid ", ";border-radius:50%;background-color:", ";transition:border 0.1s,background-color 0.1s;cursor:pointer;&:focus{outline:none;}&[type=radio]:hover{border-color:", ";}&[type=radio]:disabled{cursor:not-allowed;border-color:", ";background-color:", ";}&[type=radio]:checked{border:6px solid ", ";}&[type=radio]:checked:hover{border-color:", ";}&[type=radio]:checked:disabled{border-color:", ";background-color:", ";}"], Color.PHANTOM, Color.CLEAR, Color.PRIMARY_HOVER, Color.LOCKED, Color.FROZEN, Color.PRIMARY, Color.PRIMARY_HOVER, Color.LOCKED, Color.FROZEN);
 export const NativeLabel = styled.label.withConfig({
   displayName: "NativeLabel",
-  componentId: "sc-154q01x-1"
+  componentId: "sc-34lgtl-1"
 })(["display:inline-flex;align-items:center;font-size:", ";line-height:", ";user-select:none;", " & > ", "{&:not(:last-child){margin-right:", ";}}"], FontSize.REGULAR, LineHeight.REGULAR, ({
   $color
 }) => $color && `color: ${ColorMap[$color]};`, NativeRadio, Spacing.S3);

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

@@ -3,9 +3,9 @@ type UseDataTableParamsParams<P extends DataTableParams> = {
     defaultOrder: string;
     defaultDirection?: 'asc' | 'desc';
     defaultPerPage?: number;
-    extend?: (obj: Record<string, string>, params: DataTableParams) => P;
+    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, extend, prefix, }: UseDataTableParamsParams<P>): UseDataTableParamsReturn<P>;
+export declare function useDataTableGetParams<P extends DataTableParams>({ defaultOrder, defaultDirection, defaultPerPage, customizeParams, prefix, }: UseDataTableParamsParams<P>): UseDataTableParamsReturn<P>;
 export {};

package/Table/hooks/useDataTableGetParams.js

@@ -1,46 +1,39 @@
 import { useMemo, useRef } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import { usePersistentFunction } from '@pushwoosh/kit-helpers';
-function pickBy(obj) {
-  return Object.fromEntries(Object.entries(obj).filter(([, value]) => !!value));
-}
-function mapKeys(obj, mapper) {
-  return Object.fromEntries(Object.entries(obj).map(([key, value]) => [mapper(key), value]));
-}
-function shallowEqual(a, b) {
-  return Object.keys(a).every(key => a[key] === b[key]);
-}
+import { mapKeys, pickBy, shallowEqual } from './helpers';
 export function useDataTableGetParams({
   defaultOrder,
   defaultDirection = 'asc',
   defaultPerPage = 10,
-  extend,
+  customizeParams,
   prefix = ''
 }) {
   const history = useHistory();
   const {
     search: locationSearch
   } = useLocation();
-  const extendRef = useRef(extend);
-  extendRef.current = extend;
-  const prevRef = useRef({});
+  const customizeParamsRef = useRef(customizeParams);
+  customizeParamsRef.current = customizeParams;
+  const prevDataTableParamsRef = useRef({});
   const dataTableParams = useMemo(() => {
     const searchParams = new URLSearchParams(locationSearch);
-    const obj = mapKeys(Object.fromEntries(searchParams), key => key.startsWith(prefix) ? key.slice(prefix.length) : key);
+    const searchParamsWoPrefix = mapKeys(Object.fromEntries(searchParams), key => key.startsWith(prefix) ? key.slice(prefix.length) : key);
     // eslint-disable-next-line no-nested-ternary
-    const realOrderDirection = !obj.direction ? defaultDirection : obj.direction === 'asc' ? 'asc' : 'desc';
+    const realOrderDirection = !searchParamsWoPrefix.direction ? defaultDirection : searchParamsWoPrefix.direction === 'asc' ? 'asc' : 'desc';
     const params = {
-      search: obj.search ?? '',
-      order: obj.order || defaultOrder,
+      search: searchParamsWoPrefix.search ?? '',
+      order: searchParamsWoPrefix.order || defaultOrder,
       direction: realOrderDirection,
-      page: +obj.page || 1,
-      perPage: +obj.perPage || defaultPerPage
+      page: +searchParamsWoPrefix.page || 1,
+      perPage: +searchParamsWoPrefix.perPage || defaultPerPage
     };
-    const resultParams = extendRef.current ? extendRef.current(obj, params) : params;
-    if (!shallowEqual(resultParams, prevRef.current)) {
-      prevRef.current = resultParams;
+    // 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 prevRef.current;
+    return prevDataTableParamsRef.current;
   }, [locationSearch, defaultDirection, defaultOrder, defaultPerPage, prefix]);
   const changeDataTableParams = usePersistentFunction(params => {
     const searchParams = new URLSearchParams(locationSearch);