@quen-ui/components 0.0.14

package/dist/Drawer/Drawer.es.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { useTransitionState } from "react-transition-state";
+import { useOnClickOutside } from "@quen-ui/hooks";
+import { DrawerWrapper, DrawerStyled, DrawerTitleWrapper } from "./styles.es.js";
+import Divider from "../Divider/Divider.es.js";
+import Title from "../typography/Title/Title.es.js";
+import Button from "../Button/Button.es.js";
+import SvgIconClose from "../assets/icon-close.svg.es.js";
+const Drawer = ({
+  open,
+  children,
+  position = "left",
+  size = "m",
+  zIndex,
+  noCloseOnClickOutside = false,
+  onClose,
+  title,
+  className,
+  closeIcon
+}) => {
+  const [container, setContainer] = useState(null);
+  const [state, toggle] = useTransitionState({
+    timeout: 500,
+    unmountOnExit: true,
+    initialEntered: open
+  });
+  const refWrapper = useRef(null);
+  useOnClickOutside(refWrapper, () => !noCloseOnClickOutside && (onClose == null ? void 0 : onClose()));
+  useEffect(() => {
+    toggle(open);
+  }, [open]);
+  useEffect(() => {
+    const container2 = document.getElementsByTagName("body").item(0);
+    setContainer(container2);
+  }, []);
+  if (state.isEnter && container) {
+    return createPortal(
+      /* @__PURE__ */ jsx(DrawerWrapper, { zIndex, children: /* @__PURE__ */ jsxs(
+        DrawerStyled,
+        {
+          role: "dialog",
+          size,
+          position,
+          ref: refWrapper,
+          status: state.status,
+          className,
+          children: [
+            title && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(DrawerTitleWrapper, { children: [
+                /* @__PURE__ */ jsx(Title, { size: "s", children: title }),
+                /* @__PURE__ */ jsx(Button, { view: "icon", size: "xs", onClick: onClose, children: closeIcon || /* @__PURE__ */ jsx(SvgIconClose, {}) })
+              ] }),
+              /* @__PURE__ */ jsx(Divider, { direction: "horizontal" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "quen-ui-drawer--content", children })
+          ]
+        }
+      ) }),
+      container
+    );
+  }
+  return null;
+};
+export {
+  Drawer as default
+};

package/dist/Drawer/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Drawer } from './Drawer';
+export type { IDrawerProps } from './types';

package/dist/Drawer/styles.cjs.js

@@ -0,0 +1,85 @@
+"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;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: ${({ zIndex }) => zIndex || 1e3};
+  background: ${({ theme }) => polished.rgba(theme.colors.grayViolet[2], 0.7)};
+`;
+const sizes = {
+  xs: "240px",
+  s: "320px",
+  m: "360px",
+  l: "500px",
+  full: "100%"
+};
+const getPosition = (position, size) => {
+  switch (position) {
+    case "left":
+      return styled.css`
+        bottom: 0;
+        top: 0;
+        left: 0;
+        width: ${sizes[size]};
+      `;
+    case "right":
+      return styled.css`
+        bottom: 0;
+        top: 0;
+        right: 0;
+        width: ${sizes[size]};
+      `;
+    case "top":
+      return styled.css`
+        top: 0;
+        left: 0;
+        right: 0;
+        height: ${sizes[size]};
+      `;
+    case "bottom":
+      return styled.css`
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: ${sizes[size]};
+      `;
+    default:
+      return null;
+  }
+};
+const DrawerStyled = styled.div`
+  ${({ size, position }) => getPosition(position, size)};
+  max-width: 100%;
+  max-height: 100vh;
+  position: fixed;
+  outline: 0;
+  background: ${({ theme }) => theme.colors.grayViolet[2]};
+
+  ${({ 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;
+  }
+`;
+const DrawerTitleWrapper = styled.div`
+  padding: 0.5rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+exports.DrawerStyled = DrawerStyled;
+exports.DrawerTitleWrapper = DrawerTitleWrapper;
+exports.DrawerWrapper = DrawerWrapper;
+exports.sizes = sizes;

package/dist/Drawer/styles.d.ts

@@ -0,0 +1,18 @@
+import { TransitionStatus } from 'react-transition-state';
+import { IDrawerProps } from './types';
+export declare const DrawerWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    zIndex?: number;
+}>> & string;
+export declare const sizes: {
+    xs: string;
+    s: string;
+    m: string;
+    l: string;
+    full: string;
+};
+export declare const DrawerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    size: Required<IDrawerProps>["size"];
+    position: IDrawerProps["position"];
+    status: TransitionStatus;
+}>> & string;
+export declare const DrawerTitleWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/Drawer/styles.es.js

@@ -0,0 +1,85 @@
+import styled, { css } from "styled-components";
+import { rgba } from "polished";
+const DrawerWrapper = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: ${({ zIndex }) => zIndex || 1e3};
+  background: ${({ theme }) => rgba(theme.colors.grayViolet[2], 0.7)};
+`;
+const sizes = {
+  xs: "240px",
+  s: "320px",
+  m: "360px",
+  l: "500px",
+  full: "100%"
+};
+const getPosition = (position, size) => {
+  switch (position) {
+    case "left":
+      return css`
+        bottom: 0;
+        top: 0;
+        left: 0;
+        width: ${sizes[size]};
+      `;
+    case "right":
+      return css`
+        bottom: 0;
+        top: 0;
+        right: 0;
+        width: ${sizes[size]};
+      `;
+    case "top":
+      return css`
+        top: 0;
+        left: 0;
+        right: 0;
+        height: ${sizes[size]};
+      `;
+    case "bottom":
+      return css`
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: ${sizes[size]};
+      `;
+    default:
+      return null;
+  }
+};
+const DrawerStyled = styled.div`
+  ${({ size, position }) => getPosition(position, size)};
+  max-width: 100%;
+  max-height: 100vh;
+  position: fixed;
+  outline: 0;
+  background: ${({ theme }) => theme.colors.grayViolet[2]};
+
+  ${({ 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;
+  }
+`;
+const DrawerTitleWrapper = styled.div`
+  padding: 0.5rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+export {
+  DrawerStyled,
+  DrawerTitleWrapper,
+  DrawerWrapper,
+  sizes
+};

package/dist/Drawer/types.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+import { TQuenSize } from '../types/size';
+export interface IDrawerProps {
+    /** Controls visibility (true = visible) */
+    open: boolean;
+    /** Callback when closing */
+    onClose: () => void;
+    /** 	Header content (supports JSX) */
+    title?: React.ReactNode;
+    /** Custom CSS class */
+    className?: string;
+    /** Custom close button */
+    closeIcon?: React.ReactNode;
+    /** Controls drawer dimensions */
+    size?: TQuenSize | "full";
+    /** Controls stacking order */
+    zIndex?: number;
+    /** Slide-in direction */
+    position?: "left" | "right" | "top" | "bottom";
+    /** Main content */
+    children?: React.ReactNode;
+    /** Disables closing when clicking outside */
+    noCloseOnClickOutside?: boolean;
+}

package/dist/Dropdown/Dropdown.cjs.js

@@ -0,0 +1,65 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const reactDom = require("react-dom");
+const reactTransitionState = require("react-transition-state");
+const styles = require("./styles.cjs.js");
+const DropdownPortal = require("./DropdownPortal.cjs.js");
+const helpers = require("./helpers.cjs.js");
+const Dropdown = ({
+  disabled,
+  open,
+  direction = "bottom",
+  width,
+  anchorRef,
+  ...props
+}) => {
+  const [anchorRect, setAnchorRect] = React.useState(helpers.DEFAULT_RECT_ELEMENT);
+  const [containerDropdown, setContainerDropdown] = React.useState(null);
+  const [state, toggle] = reactTransitionState.useTransitionState({
+    timeout: 500,
+    unmountOnExit: true,
+    initialEntered: open
+  });
+  const calculateAnchorRect = () => {
+    if (anchorRef && anchorRef.current) {
+      setAnchorRect(helpers.calculateRectElement(anchorRef.current));
+    }
+  };
+  React.useEffect(() => {
+    window.addEventListener("resize", calculateAnchorRect);
+    window.addEventListener("scroll", calculateAnchorRect, true);
+    return () => {
+      window.removeEventListener("resize", calculateAnchorRect);
+      window.addEventListener("scroll", calculateAnchorRect, true);
+    };
+  }, [anchorRect]);
+  React.useEffect(() => {
+    toggle(open);
+  }, [open]);
+  React.useLayoutEffect(() => {
+    calculateAnchorRect();
+  }, [state]);
+  React.useEffect(() => {
+    const container = document.getElementsByTagName("body").item(0);
+    setContainerDropdown(container);
+  }, []);
+  if (disabled) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(styles.DropdownWrapper, { children: state.isEnter && containerDropdown && reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DropdownPortal,
+      {
+        ...props,
+        direction,
+        transitionStatus: state.status,
+        anchorRef,
+        anchorRect,
+        width: width || "max-content"
+      }
+    ),
+    containerDropdown
+  ) });
+};
+module.exports = Dropdown;

package/dist/Dropdown/Dropdown.d.ts

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

package/dist/Dropdown/Dropdown.es.js

@@ -0,0 +1,66 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect, useLayoutEffect } from "react";
+import { createPortal } from "react-dom";
+import { useTransitionState } from "react-transition-state";
+import { DropdownWrapper } from "./styles.es.js";
+import DropdownPortal from "./DropdownPortal.es.js";
+import { DEFAULT_RECT_ELEMENT, calculateRectElement } from "./helpers.es.js";
+const Dropdown = ({
+  disabled,
+  open,
+  direction = "bottom",
+  width,
+  anchorRef,
+  ...props
+}) => {
+  const [anchorRect, setAnchorRect] = useState(DEFAULT_RECT_ELEMENT);
+  const [containerDropdown, setContainerDropdown] = useState(null);
+  const [state, toggle] = useTransitionState({
+    timeout: 500,
+    unmountOnExit: true,
+    initialEntered: open
+  });
+  const calculateAnchorRect = () => {
+    if (anchorRef && anchorRef.current) {
+      setAnchorRect(calculateRectElement(anchorRef.current));
+    }
+  };
+  useEffect(() => {
+    window.addEventListener("resize", calculateAnchorRect);
+    window.addEventListener("scroll", calculateAnchorRect, true);
+    return () => {
+      window.removeEventListener("resize", calculateAnchorRect);
+      window.addEventListener("scroll", calculateAnchorRect, true);
+    };
+  }, [anchorRect]);
+  useEffect(() => {
+    toggle(open);
+  }, [open]);
+  useLayoutEffect(() => {
+    calculateAnchorRect();
+  }, [state]);
+  useEffect(() => {
+    const container = document.getElementsByTagName("body").item(0);
+    setContainerDropdown(container);
+  }, []);
+  if (disabled) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(DropdownWrapper, { children: state.isEnter && containerDropdown && createPortal(
+    /* @__PURE__ */ jsx(
+      DropdownPortal,
+      {
+        ...props,
+        direction,
+        transitionStatus: state.status,
+        anchorRef,
+        anchorRect,
+        width: width || "max-content"
+      }
+    ),
+    containerDropdown
+  ) });
+};
+export {
+  Dropdown as default
+};

package/dist/Dropdown/DropdownItem.cjs.js

@@ -0,0 +1,32 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const styles = require("./styles.cjs.js");
+const DropdownItem = ({
+  getItemDisabled,
+  getItemOnClick,
+  getItemLabel,
+  onItemClick,
+  item,
+  getItemLeftContent,
+  size
+}) => {
+  const handleClick = (event) => {
+    var _a;
+    event.preventDefault();
+    (_a = getItemOnClick == null ? void 0 : getItemOnClick(item)) == null ? void 0 : _a(item, event);
+    onItemClick == null ? void 0 : onItemClick(item, event);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    styles.DropdownItemStyled,
+    {
+      size,
+      isDisabled: getItemDisabled == null ? void 0 : getItemDisabled(item),
+      onClick: handleClick,
+      children: [
+        getItemLeftContent == null ? void 0 : getItemLeftContent(item),
+        getItemLabel(item)
+      ]
+    }
+  );
+};
+module.exports = DropdownItem;

package/dist/Dropdown/DropdownItem.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { TDropdownItemProps } from './types';
+declare const DropdownItem: <ITEM>({ getItemDisabled, getItemOnClick, getItemLabel, onItemClick, item, getItemLeftContent, size }: TDropdownItemProps<ITEM>) => React.ReactElement;
+export default DropdownItem;

package/dist/Dropdown/DropdownItem.es.js

@@ -0,0 +1,33 @@
+import { jsxs } from "react/jsx-runtime";
+import { DropdownItemStyled } from "./styles.es.js";
+const DropdownItem = ({
+  getItemDisabled,
+  getItemOnClick,
+  getItemLabel,
+  onItemClick,
+  item,
+  getItemLeftContent,
+  size
+}) => {
+  const handleClick = (event) => {
+    var _a;
+    event.preventDefault();
+    (_a = getItemOnClick == null ? void 0 : getItemOnClick(item)) == null ? void 0 : _a(item, event);
+    onItemClick == null ? void 0 : onItemClick(item, event);
+  };
+  return /* @__PURE__ */ jsxs(
+    DropdownItemStyled,
+    {
+      size,
+      isDisabled: getItemDisabled == null ? void 0 : getItemDisabled(item),
+      onClick: handleClick,
+      children: [
+        getItemLeftContent == null ? void 0 : getItemLeftContent(item),
+        getItemLabel(item)
+      ]
+    }
+  );
+};
+export {
+  DropdownItem as default
+};

package/dist/Dropdown/DropdownList.cjs.js

@@ -0,0 +1,85 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const hooks = require("@quen-ui/hooks");
+const Divider = require("../Divider/Divider.cjs.js");
+const styles = require("./styles.cjs.js");
+const helpers = require("./helpers.cjs.js");
+const DropdownItem = require("./DropdownItem.cjs.js");
+const DropdownList = (props, ref) => {
+  const {
+    items = [],
+    sortGroup,
+    content,
+    getItemGroupId,
+    direction = "bottom",
+    className,
+    width,
+    size = "m",
+    getItemLabel,
+    getItemDisabled,
+    getItemKey,
+    getItemLeftContent,
+    getItemOnClick,
+    ...otherProps
+  } = helpers.withDefaultGetters(props);
+  hooks.useOnClickOutside(ref, otherProps.onClickOutside);
+  const groups = React.useMemo(() => {
+    const _groups = items.reduce(
+      (result, x) => {
+        if (getItemGroupId(x)) {
+          const index = result.length && result[0].length && result.findIndex(
+            (r) => getItemGroupId(r[0]) === getItemGroupId(x)
+          );
+          if (index !== -1) {
+            result[index].push(x);
+          } else {
+            result.push([]);
+            result[result.length - 1].push(x);
+          }
+        } else {
+          result[0].push(x);
+        }
+        return result;
+      },
+      [[]]
+    );
+    return sortGroup ? _groups.sort(
+      (items1, items2) => sortGroup(
+        getItemGroupId(items1[0]) || "1",
+        getItemGroupId(items2[0]) || "-1"
+      )
+    ) : _groups;
+  }, [items]);
+  if (items.length === 0 && !content) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    styles.DropdownListWrapper,
+    {
+      ref,
+      direction,
+      className,
+      width,
+      ...otherProps,
+      children: content ? content : groups.map((groupItems, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(styles.DropdownItemsWrapper, { children: groupItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+          DropdownItem,
+          {
+            item,
+            size,
+            getItemLabel,
+            getItemDisabled,
+            getItemLeftContent,
+            getItemOnClick,
+            onItemClick: otherProps.onItemClick
+          },
+          getItemKey == null ? void 0 : getItemKey(item)
+        )) }),
+        index !== groups.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(Divider, { direction: "horizontal" })
+      ] }, getItemGroupId == null ? void 0 : getItemGroupId(groupItems[0])))
+    }
+  );
+};
+const DropdownList$1 = React.forwardRef(DropdownList);
+module.exports = DropdownList$1;

package/dist/Dropdown/DropdownList.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+declare const _default: React.ForwardRefExoticComponent<Omit<import('./types').IDropdownProps<unknown>, "children" | "height"> & {
+    top?: number;
+    left?: number;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/dist/Dropdown/DropdownList.es.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default, { forwardRef, useMemo } from "react";
+import { useOnClickOutside } from "@quen-ui/hooks";
+import Divider from "../Divider/Divider.es.js";
+import { DropdownListWrapper, DropdownItemsWrapper } from "./styles.es.js";
+import { withDefaultGetters } from "./helpers.es.js";
+import DropdownItem from "./DropdownItem.es.js";
+const DropdownList = (props, ref) => {
+  const {
+    items = [],
+    sortGroup,
+    content,
+    getItemGroupId,
+    direction = "bottom",
+    className,
+    width,
+    size = "m",
+    getItemLabel,
+    getItemDisabled,
+    getItemKey,
+    getItemLeftContent,
+    getItemOnClick,
+    ...otherProps
+  } = withDefaultGetters(props);
+  useOnClickOutside(ref, otherProps.onClickOutside);
+  const groups = useMemo(() => {
+    const _groups = items.reduce(
+      (result, x) => {
+        if (getItemGroupId(x)) {
+          const index = result.length && result[0].length && result.findIndex(
+            (r) => getItemGroupId(r[0]) === getItemGroupId(x)
+          );
+          if (index !== -1) {
+            result[index].push(x);
+          } else {
+            result.push([]);
+            result[result.length - 1].push(x);
+          }
+        } else {
+          result[0].push(x);
+        }
+        return result;
+      },
+      [[]]
+    );
+    return sortGroup ? _groups.sort(
+      (items1, items2) => sortGroup(
+        getItemGroupId(items1[0]) || "1",
+        getItemGroupId(items2[0]) || "-1"
+      )
+    ) : _groups;
+  }, [items]);
+  if (items.length === 0 && !content) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    DropdownListWrapper,
+    {
+      ref,
+      direction,
+      className,
+      width,
+      ...otherProps,
+      children: content ? content : groups.map((groupItems, index) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+        /* @__PURE__ */ jsx(DropdownItemsWrapper, { children: groupItems.map((item) => /* @__PURE__ */ jsx(
+          DropdownItem,
+          {
+            item,
+            size,
+            getItemLabel,
+            getItemDisabled,
+            getItemLeftContent,
+            getItemOnClick,
+            onItemClick: otherProps.onItemClick
+          },
+          getItemKey == null ? void 0 : getItemKey(item)
+        )) }),
+        index !== groups.length - 1 && /* @__PURE__ */ jsx(Divider, { direction: "horizontal" })
+      ] }, getItemGroupId == null ? void 0 : getItemGroupId(groupItems[0])))
+    }
+  );
+};
+const DropdownList$1 = forwardRef(DropdownList);
+export {
+  DropdownList$1 as default
+};