@quen-ui/components 0.0.14 → 1.0.0

package/dist/ColorPicker/styles.d.ts

@@ -0,0 +1,43 @@
+import { TQuenSize } from '../types/size';
+import { TColorValue } from './types';
+export declare const ColorPickerWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    size: TQuenSize;
+}>> & string;
+export declare const ColorPickerPanel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    size: TQuenSize;
+}>> & string;
+export declare const ColorPickerSaturationWrapStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ColorPickerSaturationGradientStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    color: string;
+}>> & string;
+export declare const ColorPickerThumbStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    left?: number;
+    top?: number;
+    size: TQuenSize;
+}>> & string;
+export declare const ColorPickerSliderStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    size: TQuenSize;
+}>> & string;
+export declare const ColorPickerSliderTrackStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    bg: string;
+}>> & string;
+export declare const ColorPickerSliderHueTrackStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ColorPickerSliderThumbStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    left?: number;
+    size: TQuenSize;
+}>> & string;
+export declare const ColorPickerPresetStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    color: string;
+    active?: boolean;
+    size: TQuenSize;
+}>> & string;
+export declare const ColorPickerPreviewSwatchStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    color: string;
+    size: TQuenSize;
+    isAlpha?: boolean;
+    hiddenInputs?: boolean;
+}>> & string;
+export declare const ColorPickerSwatchInputStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    color: TColorValue;
+    size: TQuenSize;
+}>> & string;

package/dist/ColorPicker/styles.es.js

@@ -0,0 +1,234 @@
+import styled from "styled-components";
+import { math, toColorString } from "polished";
+const getSizeWrapper = (size) => {
+  switch (size) {
+    case "l":
+      return "26.25rem";
+    case "s":
+      return "15rem";
+    case "xs":
+      return "11.25rem";
+    case "m":
+    default:
+      return "20rem";
+  }
+};
+const getSizeThumb = (size) => {
+  switch (size) {
+    case "xs":
+      return "0.625rem";
+    case "s":
+      return "0.75rem";
+    case "l":
+      return "1.5rem";
+    case "m":
+    default:
+      return "1rem";
+  }
+};
+const getSizePreset = (size) => {
+  switch (size) {
+    case "xs":
+      return "1.375rem";
+    case "s":
+      return "1.625rem";
+    case "l":
+      return "2.5rem";
+    case "m":
+    default:
+      return "2rem";
+  }
+};
+const getSizeSlider = (size) => {
+  switch (size) {
+    case "xs":
+      return "0.75rem";
+    case "s":
+      return "1rem";
+    case "l":
+      return "1.5rem";
+    case "m":
+    default:
+      return "1.25rem";
+  }
+};
+const getHeightPreview = (size, hideInputs, isAlpha) => {
+  if (isAlpha === false && !hideInputs) {
+    return math(
+      `${getSizeSlider(size)} * 2 + 0.75rem + 0.875rem`
+    );
+  }
+  if (!isAlpha && hideInputs) {
+    return math(
+      `${getSizeSlider(size)} + 0.25rem`
+    );
+  }
+  return math(
+    `${getSizeSlider(size)} * 2 + 0.75rem`
+  );
+};
+const getSizeSwatchInput = (size) => {
+  switch (size) {
+    case "m":
+    default:
+      return math(`2.5rem - 0.75rem`);
+  }
+};
+const ColorPickerWrapper = styled.div`
+  width: ${({ size }) => getSizeWrapper(size)};
+  user-select: none;
+`;
+const ColorPickerPanel = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["size"].includes(prop)
+})`
+  background: ${({ theme }) => theme.components.ColorPicker.background};
+  border-radius: ${({ theme }) => theme.components.ColorPicker.radius};
+  padding: ${({ theme, size }) => theme.components.ColorPicker.padding[size]};
+  border: 1px solid ${({ theme }) => theme.components.ColorPicker.borderColor};
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+`;
+const ColorPickerSaturationWrapStyled = styled.div`
+  position: relative;
+  width: 100%;
+  padding-top: 56%;
+  border-radius: 6px;
+  overflow: hidden;
+  touch-action: none;
+`;
+const ColorPickerSaturationGradientStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["color"].includes(prop)
+})`
+  position: absolute;
+  inset: 0;
+  background: ${({ color }) => `linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0)), linear-gradient(to right, #fff, ${color})`};
+`;
+const ColorPickerThumbStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["left", "top", "size"].includes(prop)
+})`
+  position: absolute;
+  border-radius: 50%;
+  border: 2px solid ${({ theme }) => theme.components.ColorPicker.borderColor};
+  width: ${({ size }) => getSizeThumb(size)};
+  height: ${({ size }) => getSizeThumb(size)};
+  left: ${({ left }) => left}%;
+  top: ${({ top }) => top}%;
+  transform: translate(-50%, -50%);
+`;
+const ColorPickerSliderStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["size"].includes(prop)
+})`
+  position: relative;
+  height: ${({ size }) => getSizeSlider(size)};
+  border-radius: 6px;
+  cursor: pointer;
+  background-image: conic-gradient(
+    rgba(0, 0, 0, 0.6) 25%,
+    transparent 25% 50%,
+    rgba(0, 0, 0, 0.6) 50% 75%,
+    transparent 75% 100%
+  );
+  background-size: 8px 8px;
+`;
+const ColorPickerSliderTrackStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["bg"].includes(prop)
+})`
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  background: ${({ bg }) => bg};
+`;
+const ColorPickerSliderHueTrackStyled = styled.div`
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(
+    to right,
+    #f00 0%,
+    #ff0 17%,
+    #0f0 34%,
+    #0ff 50%,
+    #00f 67%,
+    #f0f 83%,
+    #f00 100%
+  );
+`;
+const ColorPickerSliderThumbStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["left", "size"].includes(prop)
+})`
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: ${({ size }) => getSizeSlider(size)};
+  height: ${({ size }) => getSizeSlider(size)};
+  border-radius: 50%;
+  border: 2px solid ${({ theme }) => theme.components.ColorPicker.borderColor};
+  left: ${({ left }) => left ?? 0}%;
+`;
+const ColorPickerPresetStyled = styled.button.withConfig({
+  shouldForwardProp: (prop) => !["color", "active", "size"].includes(prop)
+})`
+  width: ${({ size }) => getSizePreset(size)};
+  height: ${({ size }) => getSizePreset(size)};
+  border-radius: ${({ theme }) => theme.components.ColorPicker.radius};
+  border: ${({ active, theme }) => active ? `2px solid ${theme.components.ColorPicker.borderColor}` : "none"};
+  background: ${({ color }) => color};
+  cursor: pointer;
+`;
+const ColorPickerPreviewSwatchStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["color", "size", "isAlpha", "hiddenInputs"].includes(prop)
+})`
+  min-width: ${({ size }) => size === "xs" ? "100%" : math(`${getSizeSlider(size)} * 2`)};
+  height: ${({ size, isAlpha, hiddenInputs }) => getHeightPreview(size, hiddenInputs, isAlpha)};
+  border-radius: ${({ theme }) => theme.components.ColorPicker.radius};
+  border: 1px solid ${({ theme }) => theme.components.ColorPicker.borderColor};
+  background-image: conic-gradient(
+    rgba(0, 0, 0, 0.6) 25%,
+    transparent 25% 50%,
+    rgba(0, 0, 0, 0.6) 50% 75%,
+    transparent 75% 100%
+  );
+  background-size: ${({ size }) => size === "xs" ? "8px 8px" : "50% 50%"};
+
+  .quen-ui__color-picker__preview-swatch__inner {
+    width: 100%;
+    height: 100%;
+    background: ${({ color }) => color};
+  }
+`;
+const ColorPickerSwatchInputStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["size", "color"].includes(prop)
+})`
+  border: 1px solid ${({ theme }) => theme.components.ColorPicker.borderColor};
+  background-image: conic-gradient(
+      rgba(0, 0, 0, 0.6) 25%,
+      transparent 25% 50%,
+      rgba(0, 0, 0, 0.6) 50% 75%,
+      transparent 75% 100%
+  );
+  background-size: 8px 8px;
+  width: ${({ size }) => getSizeSwatchInput(size)};
+  height: ${({ size }) => getSizeSwatchInput(size)};
+  
+  .quen-ui__color-picker__swatch-input__inner {
+    background: ${({ color }) => typeof color === "string" || !color ? color : toColorString(color)};
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+`;
+export {
+  ColorPickerPanel,
+  ColorPickerPresetStyled,
+  ColorPickerPreviewSwatchStyled,
+  ColorPickerSaturationGradientStyled,
+  ColorPickerSaturationWrapStyled,
+  ColorPickerSliderHueTrackStyled,
+  ColorPickerSliderStyled,
+  ColorPickerSliderThumbStyled,
+  ColorPickerSliderTrackStyled,
+  ColorPickerSwatchInputStyled,
+  ColorPickerThumbStyled,
+  ColorPickerWrapper
+};

package/dist/ColorPicker/types.d.ts

@@ -0,0 +1,56 @@
+import { CSSProperties } from 'react';
+import { HslColor, HslaColor, RgbColor, RgbaColor } from 'polished/lib/types/color';
+import { TQuenSize } from '../types/size';
+import { ITextFieldProps } from '../TextField';
+export type TColorFormat = "hex" | "hexa" | "rgb" | "rgba" | "hsl" | "hsla";
+export type TRgbColor = RgbColor | RgbaColor;
+export type THslColor = HslColor | HslaColor;
+export type TColorValue = string | TRgbColor | THslColor;
+export interface IBaseColorPickerProps {
+    /** Controlled color value */
+    value?: TColorValue;
+    /** Uncontrolled initial color value */
+    defaultValue?: TColorValue;
+    /** Triggered continuously as user interacts */
+    onChange?: (color: TColorValue) => void;
+    /** Triggered when user stops dragging / completes selection */
+    onChangeComplete?: (color: TColorValue) => void;
+    /** Output color format */
+    format?: TColorFormat;
+    /** Disables color picker interactions */
+    disabled?: boolean;
+    /** Size of component */
+    size?: TQuenSize;
+    /** Custom class */
+    className?: string;
+    /** Inline styles */
+    style?: CSSProperties;
+}
+export interface IColorPickerProps extends IBaseColorPickerProps {
+    /** Pre-defined selectable colors */
+    presets?: Array<TColorValue>;
+    /** Hides the color format input fields */
+    hideInputs?: boolean;
+    /** Hides the preset swatches section */
+    hidePresets?: boolean;
+}
+export interface IInputsColorProps {
+    format: TColorFormat;
+    onChangeHex: (color: string) => void;
+    onBlur: () => void;
+    size: TQuenSize;
+    onChangeRGB: (color: TRgbColor) => void;
+    hsl: THslColor;
+    onChangeHSL: (color: THslColor) => void;
+    disabled?: boolean;
+}
+export type TInputColorProps = Pick<IColorPickerProps, "format" | "onChange" | "presets" | "hidePresets"> & Omit<ITextFieldProps, "onChange" | "leftContent"> & {
+    /** Controlled popover state */
+    open?: boolean;
+    /** Uncontrolled popover initial state */
+    defaultOpen?: boolean;
+    /** Triggered when the dropdown is opened/closed */
+    onOpenChange?: (open: boolean) => void;
+    /** Displays a small color preview square in the input */
+    showSwatch?: boolean;
+};

package/dist/Divider/styles.cjs.js

@@ -17,11 +17,11 @@ const getDirectionStyles = ({
       }
 
       &::after {
-        border-radius: 0 0.25rem 0.25rem 0;
+        border-radius: ${({ theme }) => `0 ${theme.components.Divider.radius} ${theme.components.Divider.radius} 0`};
       }
 
       &::before {
-        border-radius: 0.25rem 0 0 0.25rem;
+        border-radius: ${({ theme }) => `${theme.components.Divider.radius} 0 0 ${theme.components.Divider.radius}`};
       }
     `;
   }
@@ -35,10 +35,10 @@ const getDirectionStyles = ({
     }
 
     &::after {
-      border-radius: 0 0 0.25rem 0.25rem;
+      border-radius: ${({ theme }) => `0 0 ${theme.components.Divider.radius} ${theme.components.Divider.radius}`};
     }
     &::before {
-      border-radius: 0.25rem 0.25rem 0 0;
+      border-radius: ${({ theme }) => `${theme.components.Divider.radius} ${theme.components.Divider.radius} 0 0`};
     }
   `;
 };
@@ -82,31 +82,33 @@ const getBackground = ({
     switch (view) {
       case "disabled":
         return styled.css`
-              background-color: ${theme.colors.gray[9]};
+              background-color: ${theme.components.Divider.disabledBackground};
             `;
       case "danger":
         return styled.css`
-              background-color: ${theme.colors.red[9]};
+              background-color: ${theme.components.Divider.dangerBackground};
             `;
       case "success":
         return styled.css`
-              background-color: ${theme.colors.green[9]};
+              background-color: ${theme.components.Divider.successBackground};
             `;
       case "warning":
         return styled.css`
-              background-color: ${theme.colors.orange[9]};
+              background-color: ${theme.components.Divider.warningBackground};
             `;
       case "primary":
       default:
         return styled.css`
-              background-color: ${theme.colors.grayViolet[9]};
+              background-color: ${theme.components.Divider.primaryBackground};
             `;
     }
   }};
     }
   `;
 };
-const DividerStyled = styled.div`
+const DividerStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["direction", "view"].includes(prop)
+})`
   display: flex;
   align-items: center;
   ${({ children }) => Boolean(children) && "gap: 0.5rem"};

package/dist/Divider/styles.es.js

@@ -15,11 +15,11 @@ const getDirectionStyles = ({
       }
 
       &::after {
-        border-radius: 0 0.25rem 0.25rem 0;
+        border-radius: ${({ theme }) => `0 ${theme.components.Divider.radius} ${theme.components.Divider.radius} 0`};
       }
 
       &::before {
-        border-radius: 0.25rem 0 0 0.25rem;
+        border-radius: ${({ theme }) => `${theme.components.Divider.radius} 0 0 ${theme.components.Divider.radius}`};
       }
     `;
   }
@@ -33,10 +33,10 @@ const getDirectionStyles = ({
     }
 
     &::after {
-      border-radius: 0 0 0.25rem 0.25rem;
+      border-radius: ${({ theme }) => `0 0 ${theme.components.Divider.radius} ${theme.components.Divider.radius}`};
     }
     &::before {
-      border-radius: 0.25rem 0.25rem 0 0;
+      border-radius: ${({ theme }) => `${theme.components.Divider.radius} ${theme.components.Divider.radius} 0 0`};
     }
   `;
 };
@@ -80,31 +80,33 @@ const getBackground = ({
     switch (view) {
       case "disabled":
         return css`
-              background-color: ${theme.colors.gray[9]};
+              background-color: ${theme.components.Divider.disabledBackground};
             `;
       case "danger":
         return css`
-              background-color: ${theme.colors.red[9]};
+              background-color: ${theme.components.Divider.dangerBackground};
             `;
       case "success":
         return css`
-              background-color: ${theme.colors.green[9]};
+              background-color: ${theme.components.Divider.successBackground};
             `;
       case "warning":
         return css`
-              background-color: ${theme.colors.orange[9]};
+              background-color: ${theme.components.Divider.warningBackground};
             `;
       case "primary":
       default:
         return css`
-              background-color: ${theme.colors.grayViolet[9]};
+              background-color: ${theme.components.Divider.primaryBackground};
             `;
     }
   }};
     }
   `;
 };
-const DividerStyled = styled.div`
+const DividerStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["direction", "view"].includes(prop)
+})`
   display: flex;
   align-items: center;
   ${({ children }) => Boolean(children) && "gap: 0.5rem"};

package/dist/Drawer/Drawer.cjs.js

@@ -1,7 +1,7 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const reactDom = require("react-dom");
+const require$$2 = require("react-dom");
 const reactTransitionState = require("react-transition-state");
 const hooks = require("@quen-ui/hooks");
 const styles = require("./styles.cjs.js");
@@ -28,7 +28,11 @@ const Drawer = ({
     initialEntered: open
   });
   const refWrapper = React.useRef(null);
-  hooks.useOnClickOutside(refWrapper, () => !noCloseOnClickOutside && (onClose == null ? void 0 : onClose()));
+  hooks.useOnClickOutside(refWrapper, () => {
+    if (open && !noCloseOnClickOutside) {
+      onClose?.();
+    }
+  });
   React.useEffect(() => {
     toggle(open);
   }, [open]);
@@ -37,7 +41,7 @@ const Drawer = ({
     setContainer(container2);
   }, []);
   if (state.isEnter && container) {
-    return reactDom.createPortal(
+    return require$$2.createPortal(
       /* @__PURE__ */ jsxRuntime.jsx(styles.DrawerWrapper, { zIndex, children: /* @__PURE__ */ jsxRuntime.jsxs(
         styles.DrawerStyled,
         {

package/dist/Drawer/Drawer.es.js

@@ -27,7 +27,11 @@ const Drawer = ({
     initialEntered: open
   });
   const refWrapper = useRef(null);
-  useOnClickOutside(refWrapper, () => !noCloseOnClickOutside && (onClose == null ? void 0 : onClose()));
+  useOnClickOutside(refWrapper, () => {
+    if (open && !noCloseOnClickOutside) {
+      onClose?.();
+    }
+  });
   useEffect(() => {
     toggle(open);
   }, [open]);

package/dist/Drawer/styles.cjs.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const styled = require("styled-components");
-const polished = require("polished");
 const DrawerWrapper = styled.div`
   position: fixed;
   top: 0;
@@ -9,7 +8,7 @@ const DrawerWrapper = styled.div`
   right: 0;
   bottom: 0;
   z-index: ${({ zIndex }) => zIndex || 1e3};
-  background: ${({ theme }) => polished.rgba(theme.colors.grayViolet[2], 0.7)};
+  background: ${({ theme }) => theme.components.Drawer.overlayBackground};
 `;
 const sizes = {
   xs: "240px",
@@ -58,16 +57,16 @@ const DrawerStyled = styled.div`
   max-height: 100vh;
   position: fixed;
   outline: 0;
-  background: ${({ theme }) => theme.colors.grayViolet[2]};
+  background: ${({ theme }) => theme.components.Drawer.background};
 
   ${({ status }) => (status === "preEnter" || status === "exiting") && ` opacity: 0;
       transform: scale(0.5);
     `};
-  
+
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.space.xs};
-  
+
   .quen-ui-drawer--content {
     padding: 0.5rem;
     overflow: auto;

package/dist/Drawer/styles.es.js

@@ -1,5 +1,4 @@
 import styled, { css } from "styled-components";
-import { rgba } from "polished";
 const DrawerWrapper = styled.div`
   position: fixed;
   top: 0;
@@ -7,7 +6,7 @@ const DrawerWrapper = styled.div`
   right: 0;
   bottom: 0;
   z-index: ${({ zIndex }) => zIndex || 1e3};
-  background: ${({ theme }) => rgba(theme.colors.grayViolet[2], 0.7)};
+  background: ${({ theme }) => theme.components.Drawer.overlayBackground};
 `;
 const sizes = {
   xs: "240px",
@@ -56,16 +55,16 @@ const DrawerStyled = styled.div`
   max-height: 100vh;
   position: fixed;
   outline: 0;
-  background: ${({ theme }) => theme.colors.grayViolet[2]};
+  background: ${({ theme }) => theme.components.Drawer.background};
 
   ${({ status }) => (status === "preEnter" || status === "exiting") && ` opacity: 0;
       transform: scale(0.5);
     `};
-  
+
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.space.xs};
-  
+
   .quen-ui-drawer--content {
     padding: 0.5rem;
     overflow: auto;

package/dist/Dropdown/Dropdown.cjs.js

@@ -1,8 +1,9 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const reactDom = require("react-dom");
+const require$$2 = require("react-dom");
 const reactTransitionState = require("react-transition-state");
+const hooks = require("@quen-ui/hooks");
 const styles = require("./styles.cjs.js");
 const DropdownPortal = require("./DropdownPortal.cjs.js");
 const helpers = require("./helpers.cjs.js");
@@ -12,20 +13,37 @@ const Dropdown = ({
   direction = "bottom",
   width,
   anchorRef,
+  onClickClose,
   ...props
 }) => {
   const [anchorRect, setAnchorRect] = React.useState(helpers.DEFAULT_RECT_ELEMENT);
+  const dropdownRef = React.useRef(null);
   const [containerDropdown, setContainerDropdown] = React.useState(null);
   const [state, toggle] = reactTransitionState.useTransitionState({
     timeout: 500,
     unmountOnExit: true,
     initialEntered: open
   });
+  hooks.useOnClickOutside(
+    anchorRef,
+    () => {
+      if (typeof open === "undefined") {
+        toggle(false);
+        onClickClose?.();
+      }
+    },
+    {
+      excludeRef: dropdownRef
+    }
+  );
   const calculateAnchorRect = () => {
     if (anchorRef && anchorRef.current) {
       setAnchorRect(helpers.calculateRectElement(anchorRef.current));
     }
   };
+  const handleClickAnchorRef = () => {
+    toggle();
+  };
   React.useEffect(() => {
     window.addEventListener("resize", calculateAnchorRect);
     window.addEventListener("scroll", calculateAnchorRect, true);
@@ -35,7 +53,17 @@ const Dropdown = ({
     };
   }, [anchorRect]);
   React.useEffect(() => {
-    toggle(open);
+    if (typeof open === "undefined") {
+      anchorRef.current?.addEventListener("click", handleClickAnchorRef);
+    }
+    return () => {
+      anchorRef.current?.removeEventListener("click", handleClickAnchorRef);
+    };
+  }, [anchorRef]);
+  React.useEffect(() => {
+    if (typeof open !== "undefined") {
+      toggle(open);
+    }
   }, [open]);
   React.useLayoutEffect(() => {
     calculateAnchorRect();
@@ -47,7 +75,7 @@ const Dropdown = ({
   if (disabled) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(styles.DropdownWrapper, { children: state.isEnter && containerDropdown && reactDom.createPortal(
+  return /* @__PURE__ */ jsxRuntime.jsx(styles.DropdownWrapper, { children: state.isEnter && containerDropdown && require$$2.createPortal(
     /* @__PURE__ */ jsxRuntime.jsx(
       DropdownPortal,
       {
@@ -56,7 +84,8 @@ const Dropdown = ({
         transitionStatus: state.status,
         anchorRef,
         anchorRect,
-        width: width || "max-content"
+        width: width || "max-content",
+        ref: dropdownRef
       }
     ),
     containerDropdown

package/dist/Dropdown/Dropdown.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import { ReactNode } from 'react';
 import { IDropdownProps } from './types';
-declare const Dropdown: <ITEM>({ disabled, open, direction, width, anchorRef, ...props }: IDropdownProps<ITEM>) => React.ReactNode;
+declare const Dropdown: <ITEM>({ disabled, open, direction, width, anchorRef, onClickClose, ...props }: IDropdownProps<ITEM>) => ReactNode;
 export default Dropdown;