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

package/dist/index.js

@@ -0,0 +1,483 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// index.ts
+var drawer_exports = {};
+__export(drawer_exports, {
+  Drawer: () => Drawer_default
+});
+module.exports = __toCommonJS(drawer_exports);
+
+// src/Drawer.tsx
+var import_react6 = require("@emotion/react");
+var import_react7 = require("react");
+
+// src/components/title/DrawerTitle.tsx
+var import_react_typography = require("@dt-dds/react-typography");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DrawerTitle = ({ title }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_typography.Typography, { color: "content.dark", element: "h4", fontStyles: "h4", children: title });
+
+// src/components/header/DrawerHeader.tsx
+var import_react_icon_button = require("@dt-dds/react-icon-button");
+
+// ../../dt-dds-react/core/assets/svgs/AllOut.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Apis.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Apps.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/ArrowDropDown.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/ArrowDropUp.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/ArrowLeft.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/ArrowRight.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/AvatarThumbnail.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Bolt.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/CalendarMonth.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Cancel.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Check.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/CheckCircle.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/CheckCircleOutline.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Close.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var CloseIcon = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "svg",
+    __spreadProps(__spreadValues({
+      fill: "none",
+      height: "24",
+      viewBox: "0 0 24 24",
+      width: "24",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), {
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "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
+var import_jsx_runtime17 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Delete.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Edit.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Email.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/EmailSend.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Error.tsx
+var import_react = require("@emotion/react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/ErrorOutline.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/EVStation.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Info.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/InfoOutline.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Input.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Language.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/LocationOn.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/LocationSearching.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/MenuCompact.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/MenuExpand.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Menu.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/MoreHorizontal.tsx
+var import_jsx_runtime34 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/MoreVertical.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/NoData.tsx
+var import_react2 = require("@emotion/react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/NotFound.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropDown.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropUp.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/PhoneOutlined.tsx
+var import_jsx_runtime40 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Payments.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Products.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/RemoveCircleOutline.tsx
+var import_jsx_runtime43 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Share.tsx
+var import_jsx_runtime44 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Signout.tsx
+var import_jsx_runtime45 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Teams.tsx
+var import_jsx_runtime46 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Timeline.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Topic.tsx
+var import_jsx_runtime48 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/UnfoldLess.tsx
+var import_jsx_runtime49 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/UnfoldMore.tsx
+var import_jsx_runtime50 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Username.tsx
+var import_jsx_runtime51 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/ViewAgenda.tsx
+var import_jsx_runtime52 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Visibility.tsx
+var import_jsx_runtime53 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/VisibilityOff.tsx
+var import_jsx_runtime54 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/WarningOutline.tsx
+var import_jsx_runtime55 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Warning.tsx
+var import_jsx_runtime56 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Wifi.tsx
+var import_jsx_runtime57 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Settings.tsx
+var import_jsx_runtime58 = require("react/jsx-runtime");
+
+// src/context/DrawerProvider.tsx
+var import_react3 = require("react");
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var DEFAULT_VALUE = {
+  handleClose: () => null
+};
+var DrawerContext = (0, import_react3.createContext)(DEFAULT_VALUE);
+var DrawerContextProvider = ({
+  handleClose,
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DrawerContext.Provider, { value: { handleClose }, children });
+};
+var useDrawerContext = () => {
+  const context = (0, import_react3.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
+var import_styled = __toESM(require("@emotion/styled"));
+var HeaderStyled = import_styled.default.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
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var DrawerHeader = ({ children }) => {
+  const { handleClose } = useDrawerContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(HeaderStyled, { "data-testid": "drawer-header", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { children }),
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      import_react_icon_button.IconButton,
+      {
+        color: "default",
+        dataTestId: "drawer-close-button",
+        onClick: handleClose,
+        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Close_default, {})
+      }
+    )
+  ] });
+};
+
+// src/components/body/DrawerBody.tsx
+var import_react4 = require("react");
+
+// src/components/body/DrawerBody.styled.ts
+var import_styled2 = __toESM(require("@emotion/styled"));
+var DrawerContentStyled = import_styled2.default.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 = import_styled2.default.div`
+  position: absolute;
+  margin-top: ${({ theme }) => theme.spacing["4xs"]};
+`;
+
+// src/components/body/DrawerBody.tsx
+var import_jsx_runtime61 = require("react/jsx-runtime");
+var DrawerBody = ({ children, style, dataTestId }) => {
+  const scrollableSectionObserverRef = (0, import_react4.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");
+    }
+  };
+  (0, import_react4.useEffect)(() => {
+    if (scrollableSectionObserverRef.current) {
+      const observer = new IntersectionObserver(
+        ([{ isIntersecting: isSectionObserverVisible }]) => handleScrollClass(!isSectionObserverVisible)
+      );
+      observer.observe(scrollableSectionObserverRef.current);
+      return () => observer.disconnect();
+    }
+  }, [scrollableSectionObserverRef]);
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+    DrawerContentStyled,
+    {
+      "data-testid": dataTestId != null ? dataTestId : "drawer-body",
+      style,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ScrollableSectionObserverStyled, { ref: scrollableSectionObserverRef })
+      ]
+    }
+  );
+};
+
+// src/Drawer.styled.ts
+var import_react_core = require("@dt-dds/react-core");
+var import_react5 = require("@emotion/react");
+var import_styled3 = __toESM(require("@emotion/styled"));
+var GlobalStyle = import_react5.css`
+  body {
+    overflow: hidden;
+  }
+`;
+var MainContainerStyled = import_styled3.default.div`
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: ${import_react_core.DRAWER_Z_INDEX};
+`;
+var OverlayStyled = import_styled3.default.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 = import_styled3.default.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
+var import_jsx_runtime62 = require("react/jsx-runtime");
+var animationToMiliseconds = (duration) => parseFloat(duration.replace(/[^\d.]/g, "")) * 1e3;
+var Drawer = ({
+  isVisible,
+  setIsVisible,
+  children,
+  dataTestId
+}) => {
+  const [isTransformed, setIsTransformed] = (0, import_react7.useState)(false);
+  const theme = (0, import_react6.useTheme)();
+  const handleClose = (0, import_react7.useCallback)(() => {
+    setIsTransformed(false);
+    setTimeout(() => {
+      setIsVisible(false);
+    }, animationToMiliseconds(theme.animations.emphasizedDecelerate.timingFunction));
+  }, [setIsVisible, theme.animations.emphasizedDecelerate.timingFunction]);
+  (0, import_react7.useEffect)(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        handleClose();
+      }
+    };
+    setIsTransformed(isVisible);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleClose, isVisible]);
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(DrawerContextProvider, { handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(MainContainerStyled, { children: [
+    isVisible ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_react6.Global, { styles: GlobalStyle }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      OverlayStyled,
+      {
+        "data-testid": "drawer-overlay",
+        isVisible: isTransformed,
+        onClick: handleClose
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      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;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Drawer
+});