@dt-dds/react-drawer 1.0.0-beta.47

package/dist/index.mjs

@@ -0,0 +1,449 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/Drawer.tsx
+import { useTheme as useTheme3, Global } from "@emotion/react";
+import { useCallback, useEffect as useEffect2, useState } from "react";
+
+// src/components/title/DrawerTitle.tsx
+import { Typography } from "@dt-dds/react-typography";
+import { jsx } from "react/jsx-runtime";
+var DrawerTitle = ({ title }) => /* @__PURE__ */ jsx(Typography, { color: "content.dark", element: "h4", fontStyles: "h4", children: title });
+
+// src/components/header/DrawerHeader.tsx
+import { IconButton } from "@dt-dds/react-icon-button";
+
+// ../../dt-dds-react/core/assets/svgs/AllOut.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Apis.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Apps.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/ArrowDropDown.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/ArrowDropUp.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/ArrowLeft.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/ArrowRight.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/AvatarThumbnail.tsx
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Bolt.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/CalendarMonth.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Cancel.tsx
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Check.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/CheckCircle.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/CheckCircleOutline.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Close.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+var CloseIcon = (props) => {
+  return /* @__PURE__ */ jsx16(
+    "svg",
+    __spreadProps(__spreadValues({
+      fill: "none",
+      height: "24",
+      viewBox: "0 0 24 24",
+      width: "24",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), {
+      children: /* @__PURE__ */ jsx16(
+        "path",
+        {
+          d: "M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z",
+          fill: "currentColor"
+        }
+      )
+    })
+  );
+};
+var Close_default = CloseIcon;
+
+// ../../dt-dds-react/core/assets/svgs/Copy.tsx
+import { jsx as jsx17, jsxs as jsxs6 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Delete.tsx
+import { jsx as jsx18, jsxs as jsxs7 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Edit.tsx
+import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Email.tsx
+import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/EmailSend.tsx
+import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Error.tsx
+import { useTheme } from "@emotion/react";
+import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/ErrorOutline.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/EVStation.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Info.tsx
+import { jsx as jsx25 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/InfoOutline.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Input.tsx
+import { jsx as jsx27, jsxs as jsxs12 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Language.tsx
+import { jsx as jsx28 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/LocationOn.tsx
+import { jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/LocationSearching.tsx
+import { jsx as jsx30 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/MenuCompact.tsx
+import { jsx as jsx31 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/MenuExpand.tsx
+import { jsx as jsx32 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Menu.tsx
+import { jsx as jsx33 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/MoreHorizontal.tsx
+import { jsx as jsx34 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/MoreVertical.tsx
+import { jsx as jsx35 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/NoData.tsx
+import { useTheme as useTheme2 } from "@emotion/react";
+import { jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/NotFound.tsx
+import { jsx as jsx37, jsxs as jsxs15 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropDown.tsx
+import { jsx as jsx38 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropUp.tsx
+import { jsx as jsx39 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/PhoneOutlined.tsx
+import { jsx as jsx40 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Payments.tsx
+import { jsx as jsx41 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Products.tsx
+import { jsx as jsx42, jsxs as jsxs16 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/RemoveCircleOutline.tsx
+import { jsx as jsx43 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Share.tsx
+import { jsx as jsx44, jsxs as jsxs17 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Signout.tsx
+import { jsx as jsx45 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Teams.tsx
+import { jsx as jsx46, jsxs as jsxs18 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Timeline.tsx
+import { jsx as jsx47, jsxs as jsxs19 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Topic.tsx
+import { jsx as jsx48, jsxs as jsxs20 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/UnfoldLess.tsx
+import { jsx as jsx49 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/UnfoldMore.tsx
+import { jsx as jsx50 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Username.tsx
+import { jsx as jsx51, jsxs as jsxs21 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/ViewAgenda.tsx
+import { jsx as jsx52, jsxs as jsxs22 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Visibility.tsx
+import { jsx as jsx53, jsxs as jsxs23 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/VisibilityOff.tsx
+import { jsx as jsx54, jsxs as jsxs24 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/WarningOutline.tsx
+import { jsx as jsx55 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Warning.tsx
+import { jsx as jsx56 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Wifi.tsx
+import { jsx as jsx57 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Settings.tsx
+import { jsx as jsx58 } from "react/jsx-runtime";
+
+// src/context/DrawerProvider.tsx
+import { createContext, useContext } from "react";
+import { jsx as jsx59 } from "react/jsx-runtime";
+var DEFAULT_VALUE = {
+  handleClose: () => null
+};
+var DrawerContext = createContext(DEFAULT_VALUE);
+var DrawerContextProvider = ({
+  handleClose,
+  children
+}) => {
+  return /* @__PURE__ */ jsx59(DrawerContext.Provider, { value: { handleClose }, children });
+};
+var useDrawerContext = () => {
+  const context = useContext(DrawerContext);
+  if (!context) {
+    throw new Error(
+      "Drawer compound components cannot be rendered outside the Drawer component"
+    );
+  }
+  return context;
+};
+
+// src/components/header/DrawerHeader.styled.ts
+import styled from "@emotion/styled";
+var HeaderStyled = styled.header`
+  ${({ theme }) => `
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 0 ${theme.spacing.xs} ${theme.spacing["2xs"]};
+
+    &:has(+.hasScroll) {
+      box-shadow: ${theme.shadows.xs};
+    }
+
+    @media only screen and (min-width: ${theme.breakpoints.s}px) {
+      padding: 0 ${theme.spacing.s} ${theme.spacing["2xs"]};
+    }
+  `}
+`;
+
+// src/components/header/DrawerHeader.tsx
+import { jsx as jsx60, jsxs as jsxs25 } from "react/jsx-runtime";
+var DrawerHeader = ({ children }) => {
+  const { handleClose } = useDrawerContext();
+  return /* @__PURE__ */ jsxs25(HeaderStyled, { "data-testid": "drawer-header", children: [
+    /* @__PURE__ */ jsx60("div", { children }),
+    /* @__PURE__ */ jsx60(
+      IconButton,
+      {
+        color: "default",
+        dataTestId: "drawer-close-button",
+        onClick: handleClose,
+        children: /* @__PURE__ */ jsx60(Close_default, {})
+      }
+    )
+  ] });
+};
+
+// src/components/body/DrawerBody.tsx
+import { useEffect, useRef } from "react";
+
+// src/components/body/DrawerBody.styled.ts
+import styled2 from "@emotion/styled";
+var DrawerContentStyled = styled2.section`
+  ${({ theme }) => `
+    position: relative;
+    overflow: auto;
+    padding:  ${theme.spacing["2xs"]} ${theme.spacing.xs} 0;
+    
+    @media only screen and (min-width: ${theme.breakpoints.s}px) {
+      padding:  ${theme.spacing["2xs"]} ${theme.spacing.s} 0;
+    }
+  `}
+`;
+var ScrollableSectionObserverStyled = styled2.div`
+  position: absolute;
+  margin-top: ${({ theme }) => theme.spacing["4xs"]};
+`;
+
+// src/components/body/DrawerBody.tsx
+import { jsx as jsx61, jsxs as jsxs26 } from "react/jsx-runtime";
+var DrawerBody = ({ children, style, dataTestId }) => {
+  const scrollableSectionObserverRef = useRef(null);
+  const handleScrollClass = (isSectionScrollable) => {
+    var _a;
+    const sectionElement = (_a = scrollableSectionObserverRef.current) == null ? void 0 : _a.parentElement;
+    if (sectionElement) {
+      isSectionScrollable ? sectionElement.classList.add("hasScroll") : sectionElement.classList.remove("hasScroll");
+    }
+  };
+  useEffect(() => {
+    if (scrollableSectionObserverRef.current) {
+      const observer = new IntersectionObserver(
+        ([{ isIntersecting: isSectionObserverVisible }]) => handleScrollClass(!isSectionObserverVisible)
+      );
+      observer.observe(scrollableSectionObserverRef.current);
+      return () => observer.disconnect();
+    }
+  }, [scrollableSectionObserverRef]);
+  return /* @__PURE__ */ jsxs26(
+    DrawerContentStyled,
+    {
+      "data-testid": dataTestId != null ? dataTestId : "drawer-body",
+      style,
+      children: [
+        children,
+        /* @__PURE__ */ jsx61(ScrollableSectionObserverStyled, { ref: scrollableSectionObserverRef })
+      ]
+    }
+  );
+};
+
+// src/Drawer.styled.ts
+import { DRAWER_Z_INDEX } from "@dt-dds/react-core";
+import { css } from "@emotion/react";
+import styled3 from "@emotion/styled";
+var GlobalStyle = css`
+  body {
+    overflow: hidden;
+  }
+`;
+var MainContainerStyled = styled3.div`
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: ${DRAWER_Z_INDEX};
+`;
+var OverlayStyled = styled3.div`
+  ${({ theme, isVisible }) => `
+    width: 100%;
+    height: 100vh;
+    position: absolute;
+    background-color: ${theme.palette.surface.dark};
+    opacity: ${isVisible ? 0.2 : 0};
+    transition: opacity ${theme.animations.emphasizedDecelerate.duration}
+      ${theme.animations.emphasizedDecelerate.timingFunction};
+  `}
+`;
+var DrawerStyled = styled3.div`
+  ${({ theme, isVisible }) => `
+    display: grid;
+    grid-template-rows: auto 1fr;
+    padding: ${theme.spacing.xs} 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    background-color: ${theme.palette.surface.contrast};
+    transform: ${isVisible ? "translateX(0)" : "translateX(100%)"};
+    transition: transform ${theme.animations.emphasizedDecelerate.duration}
+      ${theme.animations.emphasizedDecelerate.timingFunction};
+
+    @media only screen and (min-width: ${theme.breakpoints.s}px) {
+      width: 500px;
+      border-radius: ${theme.radius["3xs"]} ${theme.radius.none}
+        ${theme.radius.none} ${theme.radius["3xs"]};
+      box-shadow: ${theme.shadows.s};
+      padding: ${theme.spacing.s} 0;
+    }
+  `}
+`;
+
+// src/Drawer.tsx
+import { jsx as jsx62, jsxs as jsxs27 } from "react/jsx-runtime";
+var animationToMiliseconds = (duration) => parseFloat(duration.replace(/[^\d.]/g, "")) * 1e3;
+var Drawer = ({
+  isVisible,
+  setIsVisible,
+  children,
+  dataTestId
+}) => {
+  const [isTransformed, setIsTransformed] = useState(false);
+  const theme = useTheme3();
+  const handleClose = useCallback(() => {
+    setIsTransformed(false);
+    setTimeout(() => {
+      setIsVisible(false);
+    }, animationToMiliseconds(theme.animations.emphasizedDecelerate.timingFunction));
+  }, [setIsVisible, theme.animations.emphasizedDecelerate.timingFunction]);
+  useEffect2(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        handleClose();
+      }
+    };
+    setIsTransformed(isVisible);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleClose, isVisible]);
+  return /* @__PURE__ */ jsx62(DrawerContextProvider, { handleClose, children: /* @__PURE__ */ jsxs27(MainContainerStyled, { children: [
+    isVisible ? /* @__PURE__ */ jsx62(Global, { styles: GlobalStyle }) : null,
+    /* @__PURE__ */ jsx62(
+      OverlayStyled,
+      {
+        "data-testid": "drawer-overlay",
+        isVisible: isTransformed,
+        onClick: handleClose
+      }
+    ),
+    /* @__PURE__ */ jsx62(
+      DrawerStyled,
+      {
+        "data-testid": dataTestId != null ? dataTestId : "drawer-content-container",
+        isVisible: isTransformed,
+        children
+      }
+    )
+  ] }) });
+};
+Drawer.Title = DrawerTitle;
+Drawer.Header = DrawerHeader;
+Drawer.Body = DrawerBody;
+var Drawer_default = Drawer;
+export {
+  Drawer_default as Drawer
+};

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@dt-dds/react-drawer",
+  "version": "1.0.0-beta.47",
+  "license": "MIT",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint --cache .",
+    "test": "jest",
+    "test:report": "open ./jest-coverage/lcov-report/index.html",
+    "test:update:snapshot": "jest -u"
+  },
+  "dependencies": {
+    "@dt-dds/react-core": "1.0.0-beta.41",
+    "@dt-dds/react-icon-button": "1.0.0-beta.9",
+    "@dt-dds/react-typography": "1.0.0-beta.32"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.9",
+    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.23.3",
+    "@emotion/babel-plugin": "^11.11.0",
+    "@emotion/css": "^11.7.1",
+    "@emotion/jest": "^11.10.0",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.4",
+    "babel-loader": "^8.3.0",
+    "eslint-config-custom": "*",
+    "eslint-plugin-storybook": "^9.1.0",
+    "jest-config": "*",
+    "react": "^18.1.0",
+    "react-dom": "^18.2.0",
+    "tsconfig": "*",
+    "tsup": "^6.6.3",
+    "typescript": "^4.5.3"
+  },
+  "peerDependencies": {
+    "@emotion/css": "^11.7.1",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2"
+  }
+}