@pushwoosh/dumb-components 1.0.16 → 1.0.18

package/DropdownMenu/components/DropdownMenu/DropdownMenu.js

@@ -5,17 +5,18 @@ import { DropdownContext } from '../../context';
 const defaultPlacements = ['top-start', 'top-end', 'bottom-start', 'bottom-end'];
 export const DropdownMenu = ({
   renderHandler,
-  children,
+  color,
   isScrollable,
   menuZIndex,
-  menuPlacement
+  menuPlacement,
+  children
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const {
     refs,
     floatingStyles
   } = useFloating({
-    middleware: [offset(2), autoPlacement({
+    middleware: [offset(4), autoPlacement({
       allowedPlacements: menuPlacement ? [menuPlacement] : defaultPlacements
     })]
   });
@@ -42,6 +43,7 @@ export const DropdownMenu = ({
   }), isOpen && React.createElement(Place, {
     ref: refs.setFloating,
     style: floatingStyles,
+    "$color": color,
     "$scrollable": isScrollable,
     "$zIndex": menuZIndex
   }, typeof children === 'function' ? children() : children));

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

@@ -11,6 +11,7 @@ export declare const Place: import("styled-components").StyledComponent<"div", a
 } & {
     $gridAutoFlow: string;
 } & {
+    $color?: string;
     $zIndex?: number;
     $scrollable?: boolean;
 }, "$gridAutoFlow">;

package/DropdownMenu/components/DropdownMenu/styles.js

@@ -5,7 +5,9 @@ const scrollableCss = css(["max-height:248px;overflow-y:auto;"]);
 export const Place = styled(Vertical).withConfig({
   displayName: "Place",
   componentId: "sc-ij8wqc-0"
-})(["border:1px solid ", ";background-color:", ";min-width:140px;", " border-radius:", ";box-shadow:", ";z-index:", ";"], Color.FORM, Color.FROZEN, ({
+})(["border:1px solid ", ";background:", ";min-width:140px;", " border-radius:", ";box-shadow:", ";z-index:", ";"], Color.FORM, ({
+  $color
+}) => $color || Color.FROZEN, ({
   $scrollable
 }) => $scrollable && scrollableCss, ShapeRadius.CONTROL, Shadow.REGULAR, ({
   $zIndex

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

@@ -1,5 +1,6 @@
-import { type ReferenceType, type Placement } from '@floating-ui/react-dom';
+import type { ReferenceType, Placement } from '@floating-ui/react-dom';
 import type { ReactNode } from 'react';
+import type { Color } from '@pushwoosh/kit-constants';
 export type HandlerProps = {
     onClick: () => void;
     ref: (el: ReferenceType | null) => void;
@@ -8,6 +9,7 @@ export type HandlerProps = {
 export type DropdownMenuProps = {
     renderHandler: (args: HandlerProps) => ReactNode;
     children: (() => ReactNode) | ReactNode;
+    color?: Color.CLEAR | Color.FROZEN;
     isScrollable?: boolean;
     menuZIndex?: number;
     menuPlacement?: Placement;

package/DropdownMenu/components/DropdownMenuItem/styles.js

@@ -3,7 +3,7 @@ import { Color, Spacing, UnitSize } from '@pushwoosh/kit-constants';
 export const DropdownMenuItemStyled = styled.button.withConfig({
   displayName: "DropdownMenuItemStyled",
   componentId: "sc-1wmyvxp-0"
-})(["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.S4, UnitSize.FIELD_HEIGHT, ({
+})(["appearance:none;display:flex;align-items:center;padding:0 ", ";min-height:", ";border:none;color:", ";background:none;cursor:pointer;&:hover{background:", ";color:", ";}&:disabled{color:", ";cursor:not-allowed;}"], Spacing.S4, UnitSize.FIELD_HEIGHT, ({
   $active,
   $danger
 }) => {

package/FieldBox/styles.d.ts

@@ -16,5 +16,5 @@ export declare const TitleBox: import("styled-components").StyledComponent<"div"
     $alignItems: string;
     $justifyContent: string;
     $gap: Spacing;
-}, "$gap" | "$gridAutoFlow" | "$alignItems" | "$justifyContent">;
+}, "$gridAutoFlow" | "$alignItems" | "$gap" | "$justifyContent">;
 export declare const Link: import("styled-components").StyledComponent<typeof LinkBase, any, {}, never>;

package/Table/hooks/helpers.d.ts

@@ -1,3 +1,2 @@
-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

@@ -1,6 +1,3 @@
-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]));
 }

package/Table/hooks/useDataTableGetParams.js

@@ -1,7 +1,7 @@
 import { useMemo, useRef } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import { usePersistentFunction } from '@pushwoosh/kit-helpers';
-import { mapKeys, pickBy, shallowEqual } from './helpers';
+import { mapKeys, shallowEqual } from './helpers';
 export function useDataTableGetParams({
   defaultOrder,
   defaultDirection = 'asc',
@@ -37,10 +37,14 @@ export function useDataTableGetParams({
   }, [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);
-    });
+    const paramsWithPrefix = mapKeys(params, key => `${prefix}${key}`);
+    for (const [key, value] of Object.entries(paramsWithPrefix)) {
+      if (value === undefined || value === null || value === '') {
+        searchParams.delete(key);
+      } else {
+        searchParams.set(key, String(value));
+      }
+    }
     history.push({
       search: searchParams.toString()
     });

package/index.d.ts

@@ -1,4 +1,3 @@
-export { ActionsGroup, ActionsGroupItem } from './ActionsGroup';
 export { Badge, type BadgeColor } from './Badge';
 export { Banner, type BannerType } from './Banner';
 export { Button, GhostButton } from './Button';

package/index.js

@@ -1,4 +1,3 @@
-export { ActionsGroup, ActionsGroupItem } from './ActionsGroup';
 export { Badge } from './Badge';
 export { Banner } from './Banner';
 export { Button, GhostButton } from './Button';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",

package/ActionsGroup/ActionsGroup.d.ts

@@ -1,3 +0,0 @@
-import { type ReactElement } from 'react';
-import type { ActionsGroupProps } from './types';
-export declare function ActionsGroup(props: ActionsGroupProps): ReactElement;

package/ActionsGroup/ActionsGroup.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import { ActionsGroupBox, ActionsGroupInner } from './styles';
-export function ActionsGroup(props) {
-  const {
-    boxRef,
-    align,
-    gap,
-    children,
-    ...rest
-  } = props;
-  return React.createElement(ActionsGroupBox, {
-    ...rest,
-    ref: boxRef
-  }, React.createElement(ActionsGroupInner, {
-    "$align": align,
-    "$gap": gap
-  }, children));
-}

package/ActionsGroup/ActionsGroupItem.d.ts

@@ -1,3 +0,0 @@
-import { type ReactElement } from 'react';
-import type { ActionsGroupItemProps } from './types';
-export declare function ActionsGroupItem(props: ActionsGroupItemProps): ReactElement;

package/ActionsGroup/ActionsGroupItem.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import { ActionsGroupItemBox } from './styles';
-export function ActionsGroupItem(props) {
-  const {
-    boxRef,
-    ...rest
-  } = props;
-  return React.createElement(ActionsGroupItemBox, {
-    ...rest,
-    ref: boxRef
-  });
-}

package/ActionsGroup/index.d.ts

@@ -1,3 +0,0 @@
-export { ActionsGroup } from './ActionsGroup';
-export { ActionsGroupItem } from './ActionsGroupItem';
-export type { ActionsGroupProps, ActionsGroupItemProps } from './types';

package/ActionsGroup/index.js

@@ -1,2 +0,0 @@
-export { ActionsGroup } from './ActionsGroup';
-export { ActionsGroupItem } from './ActionsGroupItem';

package/ActionsGroup/styles.d.ts

@@ -1,7 +0,0 @@
-import type { ActionsGroupProps } from './types';
-export declare const ActionsGroupBox: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ActionsGroupItemBox: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ActionsGroupInner: import("styled-components").StyledComponent<"div", any, {
-    $align: ActionsGroupProps["align"];
-    $gap: ActionsGroupProps["gap"];
-}, never>;

package/ActionsGroup/styles.js

@@ -1,22 +0,0 @@
-import styled from 'styled-components';
-export const ActionsGroupBox = styled.div.withConfig({
-  displayName: "ActionsGroupBox",
-  componentId: "sc-eb6b51-0"
-})([""]);
-export const ActionsGroupItemBox = styled.div.withConfig({
-  displayName: "ActionsGroupItemBox",
-  componentId: "sc-eb6b51-1"
-})([""]);
-export const ActionsGroupInner = styled.div.withConfig({
-  displayName: "ActionsGroupInner",
-  componentId: "sc-eb6b51-2"
-})(["display:flex;flex-wrap:nowrap;align-items:center;justify-content:", ";margin:0 ", ";", "{padding:0 ", ";}"], ({
-  $align
-}) => $align === 'end' ? 'flex-end' : 'flex-start', ({
-  $gap
-}) => `calc(-${$gap}/2)`, ActionsGroupItemBox, ({
-  $gap
-}) => `calc(${$gap}/2)`);
-ActionsGroupBox.displayName = 'ActionsGroupBox';
-ActionsGroupInner.displayName = 'ActionsGroupInner';
-ActionsGroupItemBox.displayName = 'ActionsGroupBox';

package/ActionsGroup/types.d.ts

@@ -1,12 +0,0 @@
-import type { Ref, ReactNode } from 'react';
-import type { Spacing } from '@pushwoosh/kit-constants';
-export type ActionsGroupProps = Omit<JSX.IntrinsicElements['div'], 'ref'> & {
-    readonly boxRef?: Ref<HTMLDivElement>;
-    readonly align: 'start' | 'end';
-    readonly gap: Spacing;
-    readonly children: ReactNode;
-};
-export type ActionsGroupItemProps = Omit<JSX.IntrinsicElements['div'], 'ref'> & {
-    readonly boxRef?: Ref<HTMLDivElement>;
-    readonly children: ReactNode;
-};

package/ActionsGroup/types.js

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