@pushwoosh/dumb-components 1.0.1 → 1.0.2

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

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

package/DropdownMenu/components/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,27 @@
+import React, { useCallback, useState } from 'react';
+import { DropdownMenuContainer } from '../DropdownMenuContainer';
+import { DropdownMenuProvider } from './hooks';
+export function DropdownMenu(props) {
+  const [isAutoOpen, setIsAutoOpen] = 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
+    }
+  }, React.createElement(DropdownMenuContainer, {
+    windowZIndex: windowZIndex,
+    windowPlacement: windowPlacement,
+    onChangeIsOpen: onChangeIsOpen,
+    isOpen: isOpen,
+    ...rest
+  }, children));
+}

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

@@ -0,0 +1,4 @@
+import type { DropdownMenuContext } from './types';
+export declare const Context: import("react").Context<DropdownMenuContext | undefined>;
+export declare const DropdownMenuProvider: import("react").Provider<DropdownMenuContext | undefined>;
+export declare function useDropdownMenuContext(): DropdownMenuContext;

package/DropdownMenu/components/DropdownMenu/hooks.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+export const Context = createContext(undefined);
+export const DropdownMenuProvider = Context.Provider;
+export function useDropdownMenuContext() {
+  const context = useContext(Context);
+  if (!context) {
+    throw new Error('DropdownMenuContext is not defined! Please check what are you using useDropdownMenuContext in a child of DropdownMenu component!');
+  }
+  return context;
+}

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

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

package/DropdownMenu/components/DropdownMenu/index.js

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

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

@@ -0,0 +1,23 @@
+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;
+};
+export type DropdownMenuContext = {
+    readonly closeDropdown: () => void;
+    readonly windowZIndex: number;
+};
+export {};

package/DropdownMenu/components/DropdownMenu/types.js

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

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

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

package/DropdownMenu/components/DropdownMenuContainer/DropdownMenuContainer.js

@@ -0,0 +1,79 @@
+import React, { useLayoutEffect, useRef } from 'react';
+import { useOnClickOutside, useElementWidth } from '@pushwoosh/kit-hooks';
+import { DropdownIcon as Icon } from '@pushwoosh/kit-icons';
+import { useDropdownMenuContext } from '../DropdownMenu';
+import { DropdownMenuContainerButtonMap } from './maps';
+import { DropdownMenuContainerBox, DropdownMenuContainerChevron, DropdownMenuContainerIcon, DropdownMenuContainerPortal, DropdownMenuContainerTitle, DropdownMenuContainerWindow } from './styles';
+export function DropdownMenuContainer(props) {
+  const {
+    boxRef,
+    title,
+    color,
+    view,
+    minimal,
+    windowZIndex,
+    windowPlacement = 'bottom-start',
+    isDisabled,
+    hideChevron = false,
+    icon,
+    iconPlacement = 'left',
+    children,
+    isOpen,
+    onChangeIsOpen,
+    ...rest
+  } = props;
+  const DropdownMenuContainerButton = DropdownMenuContainerButtonMap[color][view];
+  const {
+    closeDropdown
+  } = useDropdownMenuContext();
+  const internalButtonRef = useRef(null);
+  const internalWindowRef = useRef(null);
+  const [buttonWidth, recalculateWidth] = useElementWidth(internalButtonRef);
+  useOnClickOutside([internalButtonRef, internalWindowRef], closeDropdown);
+  useLayoutEffect(() => {
+    recalculateWidth();
+  }, [recalculateWidth, title]);
+  return React.createElement(DropdownMenuContainerBox, {
+    ...rest,
+    ref: boxRef
+  }, React.createElement(DropdownMenuContainerButton, {
+    type: "button",
+    disabled: isDisabled,
+    isDisabled: isDisabled,
+    isActive: isOpen,
+    onClick: () => onChangeIsOpen(!isOpen),
+    minimal: minimal,
+    ref: internalButtonRef
+  }, icon && iconPlacement === 'left' && React.createElement(DropdownMenuContainerIcon, null, icon), title && React.createElement(React.Fragment, null, React.createElement(DropdownMenuContainerTitle, {
+    hideChevron: hideChevron
+  }, title), !hideChevron && React.createElement(DropdownMenuContainerChevron, null, React.createElement(Icon, {
+    direction: "down",
+    size: "small"
+  }))), icon && iconPlacement === 'right' && React.createElement(DropdownMenuContainerIcon, null, icon)), React.createElement(DropdownMenuContainerPortal, {
+    animation: false,
+    delay: 0,
+    duration: 0,
+    placement: windowPlacement,
+    reference: internalButtonRef,
+    visible: isOpen,
+    zIndex: windowZIndex,
+    content: React.createElement(DropdownMenuContainerWindow, {
+      "$minWidth": buttonWidth,
+      ref: internalWindowRef
+    }, isOpen && children),
+    popperOptions: {
+      strategy: 'fixed',
+      modifiers: [{
+        name: 'offset',
+        options: {
+          offset: [0, 4]
+        }
+      }, {
+        name: 'preventOverflow',
+        options: {
+          mainAxis: false
+        }
+      }]
+    }
+  }));
+}

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

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

package/DropdownMenu/components/DropdownMenuContainer/index.js

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

package/DropdownMenu/components/DropdownMenuContainer/maps.d.ts

@@ -0,0 +1,26 @@
+export declare const DropdownMenuContainerButtonMap: {
+    primary: {
+        ghost: import("styled-components").StyledComponent<"button", any, {
+            isDisabled?: boolean;
+            isActive: boolean;
+            minimal?: boolean;
+        }, never>;
+        shape: import("styled-components").StyledComponent<"button", any, {
+            isDisabled?: boolean;
+            isActive: boolean;
+            minimal?: boolean;
+        }, never>;
+    };
+    secondary: {
+        ghost: import("styled-components").StyledComponent<"button", any, {
+            isDisabled?: boolean;
+            isActive: boolean;
+            minimal?: boolean;
+        }, never>;
+        shape: import("styled-components").StyledComponent<"button", any, {
+            isDisabled?: boolean;
+            isActive: boolean;
+            minimal?: boolean;
+        }, never>;
+    };
+};

package/DropdownMenu/components/DropdownMenuContainer/maps.js

@@ -0,0 +1,11 @@
+import { DropdownMenuContainerButtonPrimaryGhost, DropdownMenuContainerButtonPrimaryShape, DropdownMenuContainerButtonSecondaryGhost, DropdownMenuContainerButtonSecondaryShape } from './styles';
+export const DropdownMenuContainerButtonMap = {
+  primary: {
+    ghost: DropdownMenuContainerButtonPrimaryGhost,
+    shape: DropdownMenuContainerButtonPrimaryShape
+  },
+  secondary: {
+    ghost: DropdownMenuContainerButtonSecondaryGhost,
+    shape: DropdownMenuContainerButtonSecondaryShape
+  }
+};

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

@@ -0,0 +1,35 @@
+export declare const DropdownMenuContainerBox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropdownMenuContainerButton: import("styled-components").StyledComponent<"button", any, {
+    isDisabled?: boolean;
+    isActive: boolean;
+    minimal?: boolean;
+}, never>;
+export declare const DropdownMenuContainerButtonPrimaryGhost: import("styled-components").StyledComponent<"button", any, {
+    isDisabled?: boolean;
+    isActive: boolean;
+    minimal?: boolean;
+}, never>;
+export declare const DropdownMenuContainerButtonPrimaryShape: import("styled-components").StyledComponent<"button", any, {
+    isDisabled?: boolean;
+    isActive: boolean;
+    minimal?: boolean;
+}, never>;
+export declare const DropdownMenuContainerButtonSecondaryGhost: import("styled-components").StyledComponent<"button", any, {
+    isDisabled?: boolean;
+    isActive: boolean;
+    minimal?: boolean;
+}, never>;
+export declare const DropdownMenuContainerButtonSecondaryShape: import("styled-components").StyledComponent<"button", any, {
+    isDisabled?: boolean;
+    isActive: boolean;
+    minimal?: boolean;
+}, never>;
+export declare const DropdownMenuContainerIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropdownMenuContainerTitle: import("styled-components").StyledComponent<"div", any, {
+    hideChevron: boolean;
+}, never>;
+export declare const DropdownMenuContainerChevron: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropdownMenuContainerPortal: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@tippyjs/react").TippyProps>, any, {}, never>;
+export declare const DropdownMenuContainerWindow: import("styled-components").StyledComponent<"div", any, {
+    $minWidth?: number | null;
+}, never>;

package/DropdownMenu/components/DropdownMenuContainer/styles.js

@@ -0,0 +1,109 @@
+import Tippy from '@tippyjs/react';
+import styled from 'styled-components';
+import { Color, FontSize, FontWeight, LineHeight, ShapeRadius, Spacing, UnitSize } from '@pushwoosh/kit-constants';
+export const DropdownMenuContainerBox = styled.div.withConfig({
+  displayName: "DropdownMenuContainerBox",
+  componentId: "sc-1vy81n-0"
+})(["position:relative;max-width:100%;"]);
+export const DropdownMenuContainerButton = styled.button.withConfig({
+  displayName: "DropdownMenuContainerButton",
+  componentId: "sc-1vy81n-1"
+})(["display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;max-width:100%;height:", ";padding:0 ", ";border:1px solid transparent;border-radius:", ";font-size:", ";font-weight:", ";line-height:", ";cursor:pointer;user-select:none;&:focus{outline:none;}&:disabled{cursor:not-allowed;}"], ({
+  minimal
+}) => minimal ? UnitSize.ICON_MEDIUM : UnitSize.FIELD_HEIGHT, ({
+  minimal
+}) => minimal ? 0 : `calc(${Spacing.S2} - 1px)`, ShapeRadius.CONTROL, FontSize.REGULAR, FontWeight.MEDIUM, LineHeight.REGULAR);
+export const DropdownMenuContainerButtonPrimaryGhost = styled(DropdownMenuContainerButton).withConfig({
+  displayName: "DropdownMenuContainerButtonPrimaryGhost",
+  componentId: "sc-1vy81n-2"
+})(["color:", ";background-color:", ";&:hover{color:", ";background-color:", ";}&:active{color:", ";background-color:", ";}&:disabled{color:", ";background-color:transparent;}"], ({
+  isActive
+}) => isActive ? Color.CLEAR : Color.PRIMARY, ({
+  isActive
+}) => isActive ? Color.MAIN : 'transparent', ({
+  isActive
+}) => isActive ? Color.CLEAR : Color.PRIMARY_HOVER, ({
+  isActive
+}) => isActive ? Color.MAIN : Color.BRIGHT_LIGHT, ({
+  isActive
+}) => isActive ? Color.CLEAR : Color.PRIMARY_PRESSED, ({
+  isActive
+}) => isActive ? Color.MAIN : Color.BRIGHT_LIGHT, Color.LOCKED);
+export const DropdownMenuContainerButtonPrimaryShape = styled(DropdownMenuContainerButton).withConfig({
+  displayName: "DropdownMenuContainerButtonPrimaryShape",
+  componentId: "sc-1vy81n-3"
+})(["color:", ";background-color:", ";&:hover{background-color:", ";}&:active{background-color:", ";}&:disabled{background-color:", ";}"], Color.CLEAR, ({
+  isActive
+}) => isActive ? Color.MAIN : Color.PRIMARY, ({
+  isActive
+}) => isActive ? Color.MAIN : Color.PRIMARY_HOVER, ({
+  isActive
+}) => isActive ? Color.MAIN : Color.PRIMARY_PRESSED, Color.LOCKED);
+export const DropdownMenuContainerButtonSecondaryGhost = styled(DropdownMenuContainerButton).withConfig({
+  displayName: "DropdownMenuContainerButtonSecondaryGhost",
+  componentId: "sc-1vy81n-4"
+})(["color:", ";background-color:", ";&:hover{color:", ";background-color:", ";}&:active{color:", ";background-color:", ";}&:disabled{color:", ";background-color:transparent;}"], ({
+  isActive
+}) => isActive ? Color.CLEAR : Color.MAIN, ({
+  isActive
+}) => isActive ? Color.MAIN : 'transparent', ({
+  isActive
+}) => isActive ? Color.CLEAR : Color.PRIMARY_HOVER, ({
+  isActive
+}) => isActive ? Color.MAIN : Color.BRIGHT_LIGHT, ({
+  isActive
+}) => isActive ? Color.CLEAR : Color.PRIMARY_PRESSED, ({
+  isActive
+}) => isActive ? Color.MAIN : Color.BRIGHT_LIGHT, Color.LOCKED);
+export const DropdownMenuContainerButtonSecondaryShape = styled(DropdownMenuContainerButton).withConfig({
+  displayName: "DropdownMenuContainerButtonSecondaryShape",
+  componentId: "sc-1vy81n-5"
+})(["border:1px solid ", ";color:", ";background-color:", ";&:hover{color:", ";background-color:", ";}&:active{color:", ";background-color:", ";}&:disabled{color:", ";background-color:", ";}"], ({
+  isActive
+}) => isActive ? 'transparent' : Color.FORM, ({
+  isActive
+}) => isActive ? Color.CLEAR : Color.MAIN, ({
+  isActive
+}) => isActive ? Color.MAIN : Color.FROZEN, ({
+  isActive
+}) => isActive ? Color.CLEAR : Color.PRIMARY, ({
+  isActive
+}) => isActive ? Color.MAIN : Color.FROZEN, ({
+  isActive
+}) => isActive ? Color.CLEAR : Color.MAIN, ({
+  isActive
+}) => isActive ? Color.MAIN : Color.FORM, Color.LOCKED, Color.FROZEN);
+export const DropdownMenuContainerIcon = styled.div.withConfig({
+  displayName: "DropdownMenuContainerIcon",
+  componentId: "sc-1vy81n-6"
+})(["flex:0 0 auto;"]);
+export const DropdownMenuContainerTitle = styled.div.withConfig({
+  displayName: "DropdownMenuContainerTitle",
+  componentId: "sc-1vy81n-7"
+})(["flex:1 1 auto;padding:", ";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;", " + &{padding:0 0 0 ", ";}"], ({
+  hideChevron
+}) => hideChevron ? `0 ${Spacing.S2}` : `0 0 0 ${Spacing.S2}`, /* sc-selector */DropdownMenuContainerIcon, Spacing.S1);
+export const DropdownMenuContainerChevron = styled.div.withConfig({
+  displayName: "DropdownMenuContainerChevron",
+  componentId: "sc-1vy81n-8"
+})(["flex:0 0 auto;padding:0 ", " 0 ", ";"], Spacing.S0, Spacing.S1);
+export const DropdownMenuContainerPortal = styled(Tippy).withConfig({
+  displayName: "DropdownMenuContainerPortal",
+  componentId: "sc-1vy81n-9"
+})(["pointer-events:all;.tippy-box{position:static;background-color:transparent;color:inherit;border-radius:0;font-size:inherit;line-height:inherit;outline:0;transition:none;}.tippy-content{position:static;padding:0;z-index:auto;}.tippy-arrow{display:none;}"]);
+export const DropdownMenuContainerWindow = styled.div.withConfig({
+  displayName: "DropdownMenuContainerWindow",
+  componentId: "sc-1vy81n-10"
+})(["min-width:", ";"], ({
+  $minWidth
+}) => $minWidth ? `${$minWidth}px` : 'auto');
+DropdownMenuContainerBox.displayName = 'DropdownMenuContainerBox';
+DropdownMenuContainerButton.displayName = 'DropdownMenuContainerButton';
+DropdownMenuContainerButtonPrimaryGhost.displayName = 'DropdownMenuContainerButtonPrimaryGhost';
+DropdownMenuContainerButtonPrimaryShape.displayName = 'DropdownMenuContainerButtonPrimaryShape';
+DropdownMenuContainerButtonSecondaryGhost.displayName = 'DropdownMenuContainerButtonSecondaryGhost';
+DropdownMenuContainerButtonSecondaryShape.displayName = 'DropdownMenuContainerButtonSecondaryShape';
+DropdownMenuContainerIcon.displayName = 'DropdownMenuContainerIcon';
+DropdownMenuContainerTitle.displayName = 'DropdownMenuContainerTitle';
+DropdownMenuContainerChevron.displayName = 'DropdownMenuContainerChevron';
+DropdownMenuContainerWindow.displayName = 'DropdownMenuContainerWindow';

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

@@ -0,0 +1,19 @@
+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 DropdownMenuContainerProps = {
+    readonly boxRef?: Ref<HTMLDivElement>;
+    readonly title?: 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) => any;
+    readonly children: ReactNode;
+};
+export {};

package/DropdownMenu/components/DropdownMenuContainer/types.js

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

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

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

package/DropdownMenu/components/DropdownMenuGroup/DropdownMenuGroup.js

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

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

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

package/DropdownMenu/components/DropdownMenuGroup/index.js

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

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

@@ -0,0 +1 @@
+export declare const DropdownMenuGroupBox: import("styled-components").StyledComponent<"div", any, {}, never>;

package/DropdownMenu/components/DropdownMenuGroup/styles.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+import { Color, Spacing } from '@pushwoosh/kit-constants';
+export const DropdownMenuGroupBox = styled.div.withConfig({
+  displayName: "DropdownMenuGroupBox",
+  componentId: "sc-hgafu1-0"
+})(["padding:", " 0;& + &{border-top:1px solid ", ";}"], Spacing.S3, Color.FORM);
+DropdownMenuGroupBox.displayName = 'DropdownMenuGroupBox';

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

@@ -0,0 +1,5 @@
+import type { Ref, ReactNode } from 'react';
+export type DropdownMenuGroupProps = Omit<JSX.IntrinsicElements['div'], 'ref'> & {
+    readonly boxRef?: Ref<HTMLDivElement>;
+    readonly children: ReactNode;
+};

package/DropdownMenu/components/DropdownMenuGroup/types.js

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

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

@@ -0,0 +1,5 @@
+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;

package/DropdownMenu/components/DropdownMenuItem/DropdownMenuItem.js

@@ -0,0 +1,38 @@
+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();
+    }
+  }, [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
+  });
+}

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

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

package/DropdownMenu/components/DropdownMenuItem/index.js

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

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

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

package/DropdownMenu/components/DropdownMenuItem/styles.js

@@ -0,0 +1,73 @@
+import styled from 'styled-components';
+import { Color, FontSize, FontWeight, LineHeight, Spacing } from '@pushwoosh/kit-constants';
+export const DropdownMenuItemBox = styled.a.withConfig({
+  displayName: "DropdownMenuItemBox",
+  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
+}) => {
+  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';

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

@@ -0,0 +1,24 @@
+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;
+};

package/DropdownMenu/components/DropdownMenuItem/types.js

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

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

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import { type CheckboxProps } from '@pushwoosh/kit-checkbox';
+export declare function DropdownMenuItemCheckbox(props: CheckboxProps): ReactElement;

package/DropdownMenu/components/DropdownMenuItemCheckbox/DropdownMenuItemCheckbox.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Checkbox } from '@pushwoosh/kit-checkbox';
+import { DropdownMenuItemCheckboxBox } from './styles';
+export function DropdownMenuItemCheckbox(props) {
+  return React.createElement(DropdownMenuItemCheckboxBox, null, React.createElement(Checkbox, {
+    color: "main",
+    ...props
+  }));
+}

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

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

package/DropdownMenu/components/DropdownMenuItemCheckbox/index.js

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

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

@@ -0,0 +1 @@
+export declare const DropdownMenuItemCheckboxBox: import("styled-components").StyledComponent<"div", any, {}, never>;

package/DropdownMenu/components/DropdownMenuItemCheckbox/styles.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { FontWeight, Spacing } from '@pushwoosh/kit-constants';
+import { DropdownMenuItemBox } from '../DropdownMenuItem';
+export const DropdownMenuItemCheckboxBox = styled.div.withConfig({
+  displayName: "DropdownMenuItemCheckboxBox",
+  componentId: "sc-wl9da7-0"
+})(["padding:", " ", ";", "{padding:", " ", " ", " calc(", " - 3px);}label{font-weight:", ";}"], Spacing.S1, Spacing.S3, DropdownMenuItemBox, Spacing.S3, Spacing.S4, Spacing.S3, Spacing.S4, FontWeight.REGULAR);
+DropdownMenuItemCheckboxBox.displayName = 'DropdownMenuItemCheckboxBox';

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

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