@preply/ds-web-lib 11.0.0 → 11.1.0

package/dist/components/Dialog/primitives/DialogFooter.js

@@ -1,38 +1,41 @@
 "use client";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useRef, useLayoutEffect } from "react";
+import { t as require_jsx_runtime } from "../../../jsx-runtime-i4KUlhDu.js";
+import { t as Dialog_module_default } from "../../../Dialog.module-Db2BJAn4.js";
+import { useLayoutEffect, useRef } from "react";
 import { getDatasetProps } from "@preply/ds-web-core";
-import { s as styles } from "../../../Dialog.module-Ba1X7b3N.js";
 import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
-const DialogFooter = ({
-  children,
-  className,
-  dataset,
-  ...props
-}) => {
-  const scrollDetectorRef = useRef(null);
-  const footerRef = useRef(null);
-  const classNames = [styles.footer, className].filter(Boolean).join(" ");
-  const datasetProps = getDatasetProps(dataset, {
-    preplyDsComponent: webComponentNames.DialogFooter
-  });
-  useLayoutEffect(() => {
-    if (!footerRef.current || !scrollDetectorRef.current) return;
-    const observer = new IntersectionObserver(([entry]) => {
-      var _a;
-      (_a = footerRef.current) == null ? void 0 : _a.toggleAttribute("data-sticky", !entry.isIntersecting);
-    }, {
-      root: footerRef.current.closest("[role=dialog]"),
-      rootMargin: `0px 0px -${footerRef.current.offsetHeight}px 0px`
-    });
-    observer.observe(scrollDetectorRef.current);
-    return () => observer.disconnect();
-  }, []);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: styles.scrollEndDetector, ref: scrollDetectorRef }),
-    /* @__PURE__ */ jsx("footer", { className: classNames, ref: footerRef, ...datasetProps, ...props, children })
-  ] });
-};
-export {
-  DialogFooter
+//#region src/components/Dialog/primitives/DialogFooter.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var DialogFooter = ({ children, className, dataset, ...props }) => {
+	const scrollDetectorRef = useRef(null);
+	const footerRef = useRef(null);
+	const classNames = [Dialog_module_default.footer, className].filter(Boolean).join(" ");
+	const datasetProps = getDatasetProps(dataset, { preplyDsComponent: webComponentNames.DialogFooter });
+	/**
+	* Detects if dialog is fully scrolled to the bottom and adds border to the footer
+	*/
+	useLayoutEffect(() => {
+		if (!footerRef.current || !scrollDetectorRef.current) return;
+		const observer = new IntersectionObserver(([entry]) => {
+			var _footerRef$current;
+			(_footerRef$current = footerRef.current) === null || _footerRef$current === void 0 || _footerRef$current.toggleAttribute("data-sticky", !entry.isIntersecting);
+		}, {
+			root: footerRef.current.closest("[role=dialog]"),
+			rootMargin: `0px 0px -${footerRef.current.offsetHeight}px 0px`
+		});
+		observer.observe(scrollDetectorRef.current);
+		return () => observer.disconnect();
+	}, []);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: Dialog_module_default.scrollEndDetector,
+		ref: scrollDetectorRef
+	}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("footer", {
+		className: classNames,
+		ref: footerRef,
+		...datasetProps,
+		...props,
+		children
+	})] });
 };
+//#endregion
+export { DialogFooter };

package/dist/components/Dialog/primitives/DialogRoot.js

@@ -1,315 +1,4 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { useCallback, useState, useEffect } from "react";
-import { getDatasetProps } from "@preply/ds-web-core";
-import { usePortalElement } from "@preply/ds-web-root";
-import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
-import { s as styles } from "../../../Dialog.module-Ba1X7b3N.js";
-import { u as useRenderElement, b as useRefWithInit, E as EMPTY_OBJECT } from "../../../useRenderElement-DtYPTE_y.js";
-import { D as DialogStore, u as useDialogRoot } from "../../../store-BUKWfVf3.js";
-import { u as useDialogRootContext, D as DialogRootContext } from "../../../DialogRootContext-BCXmmJAw.js";
-import { p as popupStateMapping, t as transitionStatusMapping, C as CommonPopupDataAttributes, u as useOpenChangeComplete, a as COMPOSITE_KEYS, I as InternalBackdrop, i as inertValue, F as FloatingFocusManager, b as FloatingPortal, g as getEmptyContext } from "../../../useOpenInteractionType-Cj41-8Yk.js";
-import { u as useEventCallback } from "../../../floating-ui.utils.dom-3OgjGonN.js";
-const stateAttributesMapping$1 = {
-  ...popupStateMapping,
-  ...transitionStatusMapping
-};
-const DialogBackdrop = /* @__PURE__ */ React.forwardRef(function DialogBackdrop2(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    forceRender = false,
-    ...elementProps
-  } = componentProps;
-  const {
-    store
-  } = useDialogRootContext();
-  const open = store.useState("open");
-  const nested = store.useState("nested");
-  const mounted = store.useState("mounted");
-  const transitionStatus = store.useState("transitionStatus");
-  const state = React.useMemo(() => ({
-    open,
-    transitionStatus
-  }), [open, transitionStatus]);
-  return useRenderElement("div", componentProps, {
-    state,
-    ref: [store.context.backdropRef, forwardedRef],
-    stateAttributesMapping: stateAttributesMapping$1,
-    props: [{
-      role: "presentation",
-      hidden: !mounted,
-      style: {
-        userSelect: "none",
-        WebkitUserSelect: "none"
-      }
-    }, elementProps],
-    enabled: forceRender || !nested
-  });
-});
-if (process.env.NODE_ENV !== "production") DialogBackdrop.displayName = "DialogBackdrop";
-let DialogPopupCssVars = /* @__PURE__ */ (function(DialogPopupCssVars2) {
-  DialogPopupCssVars2["nestedDialogs"] = "--nested-dialogs";
-  return DialogPopupCssVars2;
-})({});
-let DialogPopupDataAttributes = (function(DialogPopupDataAttributes2) {
-  DialogPopupDataAttributes2[DialogPopupDataAttributes2["open"] = CommonPopupDataAttributes.open] = "open";
-  DialogPopupDataAttributes2[DialogPopupDataAttributes2["closed"] = CommonPopupDataAttributes.closed] = "closed";
-  DialogPopupDataAttributes2[DialogPopupDataAttributes2["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
-  DialogPopupDataAttributes2[DialogPopupDataAttributes2["endingStyle"] = CommonPopupDataAttributes.endingStyle] = "endingStyle";
-  DialogPopupDataAttributes2["nested"] = "data-nested";
-  DialogPopupDataAttributes2["nestedDialogOpen"] = "data-nested-dialog-open";
-  return DialogPopupDataAttributes2;
-})({});
-const DialogPortalContext = /* @__PURE__ */ React.createContext(void 0);
-if (process.env.NODE_ENV !== "production") DialogPortalContext.displayName = "DialogPortalContext";
-function useDialogPortalContext() {
-  const value = React.useContext(DialogPortalContext);
-  if (value === void 0) {
-    throw new Error("Base UI: <Dialog.Portal> is missing.");
-  }
-  return value;
-}
-const stateAttributesMapping = {
-  ...popupStateMapping,
-  ...transitionStatusMapping,
-  nestedDialogOpen(value) {
-    return value ? {
-      [DialogPopupDataAttributes.nestedDialogOpen]: ""
-    } : null;
-  }
-};
-const DialogPopup = /* @__PURE__ */ React.forwardRef(function DialogPopup2(componentProps, forwardedRef) {
-  const {
-    className,
-    finalFocus,
-    initialFocus,
-    render,
-    ...elementProps
-  } = componentProps;
-  const {
-    store
-  } = useDialogRootContext();
-  const descriptionElementId = store.useState("descriptionElementId");
-  const dismissible = store.useState("dismissible");
-  const floatingRootContext = store.useState("floatingRootContext");
-  const rootPopupProps = store.useState("popupProps");
-  const modal = store.useState("modal");
-  const mounted = store.useState("mounted");
-  const nested = store.useState("nested");
-  const nestedOpenDialogCount = store.useState("nestedOpenDialogCount");
-  const open = store.useState("open");
-  const openMethod = store.useState("openMethod");
-  const titleElementId = store.useState("titleElementId");
-  const transitionStatus = store.useState("transitionStatus");
-  useDialogPortalContext();
-  useOpenChangeComplete({
-    open,
-    ref: store.context.popupRef,
-    onComplete() {
-      var _a, _b;
-      if (open) {
-        (_b = (_a = store.context).openChangeComplete) == null ? void 0 : _b.call(_a, true);
-      }
-    }
-  });
-  const defaultInitialFocus = useEventCallback((interactionType) => {
-    if (interactionType === "touch") {
-      return store.context.popupRef.current;
-    }
-    return true;
-  });
-  const resolvedInitialFocus = initialFocus === void 0 ? defaultInitialFocus : initialFocus;
-  const nestedDialogOpen = nestedOpenDialogCount > 0;
-  const state = React.useMemo(() => ({
-    open,
-    nested,
-    transitionStatus,
-    nestedDialogOpen
-  }), [open, nested, transitionStatus, nestedDialogOpen]);
-  const element = useRenderElement("div", componentProps, {
-    state,
-    props: [rootPopupProps, {
-      "aria-labelledby": titleElementId != null ? titleElementId : void 0,
-      "aria-describedby": descriptionElementId != null ? descriptionElementId : void 0,
-      role: "dialog",
-      tabIndex: -1,
-      hidden: !mounted,
-      onKeyDown(event) {
-        if (COMPOSITE_KEYS.has(event.key)) {
-          event.stopPropagation();
-        }
-      },
-      style: {
-        [DialogPopupCssVars.nestedDialogs]: nestedOpenDialogCount
-      }
-    }, elementProps],
-    ref: [forwardedRef, store.context.popupRef, store.getElementSetter("popupElement")],
-    stateAttributesMapping
-  });
-  return /* @__PURE__ */ jsxs(React.Fragment, {
-    children: [mounted && modal === true && /* @__PURE__ */ jsx(InternalBackdrop, {
-      ref: store.context.internalBackdropRef,
-      inert: inertValue(!open)
-    }), /* @__PURE__ */ jsx(FloatingFocusManager, {
-      context: floatingRootContext,
-      openInteractionType: openMethod,
-      disabled: !mounted,
-      closeOnFocusOut: dismissible,
-      initialFocus: resolvedInitialFocus,
-      returnFocus: finalFocus,
-      modal: modal !== false,
-      restoreFocus: "popup",
-      children: element
-    })]
-  });
-});
-if (process.env.NODE_ENV !== "production") DialogPopup.displayName = "DialogPopup";
-function DialogPortal(props) {
-  const {
-    children,
-    keepMounted = false,
-    container
-  } = props;
-  const {
-    store
-  } = useDialogRootContext();
-  const mounted = store.useState("mounted");
-  const shouldRender = mounted || keepMounted;
-  if (!shouldRender) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(DialogPortalContext.Provider, {
-    value: keepMounted,
-    children: /* @__PURE__ */ jsx(FloatingPortal, {
-      root: container,
-      children
-    })
-  });
-}
-const INITIAL_STATE = {
-  open: false,
-  dismissible: true,
-  nested: false,
-  popupElement: null,
-  triggerElement: null,
-  modal: true,
-  descriptionElementId: void 0,
-  titleElementId: void 0,
-  openMethod: null,
-  mounted: false,
-  transitionStatus: "idle",
-  nestedOpenDialogCount: 0,
-  triggerProps: EMPTY_OBJECT,
-  popupProps: EMPTY_OBJECT,
-  floatingRootContext: getEmptyContext()
-};
-const DialogRoot$1 = function DialogRoot(props) {
-  const {
-    children,
-    open: openProp,
-    defaultOpen: defaultOpenProp = false,
-    onOpenChange,
-    onOpenChangeComplete,
-    dismissible = true,
-    modal = true,
-    actionsRef
-  } = props;
-  const parentDialogRootContext = useDialogRootContext(true);
-  const nested = Boolean(parentDialogRootContext);
-  const store = useRefWithInit(DialogStore.create, INITIAL_STATE).current;
-  store.useControlledProp("open", openProp, defaultOpenProp);
-  store.useSyncedValues({
-    dismissible,
-    nested,
-    modal
-  });
-  store.useContextCallback("openChange", onOpenChange);
-  store.useContextCallback("openChangeComplete", onOpenChangeComplete);
-  useDialogRoot({
-    store,
-    actionsRef,
-    parentContext: parentDialogRootContext == null ? void 0 : parentDialogRootContext.store.context
-  });
-  const contextValue = React.useMemo(() => ({
-    store
-  }), [store]);
-  return /* @__PURE__ */ jsx(DialogRootContext.Provider, {
-    value: contextValue,
-    children
-  });
-};
-if (process.env.NODE_ENV !== "production") DialogRoot$1.displayName = "DialogRoot";
-const DialogRoot2 = ({
-  children,
-  open,
-  onOpen,
-  onClose,
-  overlay = true,
-  size = "md",
-  mobileFullHeight = false,
-  className,
-  dataset,
-  ...props
-}) => {
-  const container = usePortalElement();
-  const respondToHeightChange = useResponsiveFullHeightStyle(open);
-  const onOpenChange = useCallback((open2) => {
-    if (!open2) {
-      onClose == null ? void 0 : onClose();
-    } else {
-      onOpen == null ? void 0 : onOpen();
-    }
-  }, [onClose, onOpen]);
-  const classNames = [styles.dialog, className].filter(Boolean).join(" ");
-  const datasetProps = getDatasetProps(dataset, {
-    preplyDsComponent: webComponentNames.DialogRoot
-  });
-  return /* @__PURE__ */ jsx(DialogRoot$1, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogPortal, { container, children: [
-    overlay && /* @__PURE__ */ jsx(DialogBackdrop, { className: styles.overlay, forceRender: true, "data-testid": "dialog-overlay", "data-preply-ds-component": webComponentNames.DialogOverlay }),
-    /* @__PURE__ */ jsx(DialogPopup, { ref: respondToHeightChange, className: classNames, ...getResponsiveSizeAttributes(size), "data-mobile-full-height": mobileFullHeight ? "" : void 0, ...datasetProps, ...props, children })
-  ] }) });
-};
-function useResponsiveFullHeightStyle(isOpen) {
-  const [el, setEl] = useState(null);
-  const captureRef = useCallback((node) => setEl(node), []);
-  useEffect(() => {
-    if (!isOpen || !el) {
-      return;
-    }
-    const toggleFullHeight = async () => {
-      const animations = el.getAnimations().map((a) => a.finished);
-      await Promise.allSettled(animations);
-      const {
-        y
-      } = el.getBoundingClientRect();
-      el.toggleAttribute("data-no-border-radius", y === 0);
-    };
-    toggleFullHeight();
-    window.addEventListener("resize", toggleFullHeight);
-    const resizeObserver = new ResizeObserver(toggleFullHeight);
-    resizeObserver.observe(el);
-    return () => {
-      window.removeEventListener("resize", toggleFullHeight);
-      resizeObserver.disconnect();
-    };
-  }, [isOpen, el]);
-  return captureRef;
-}
-function getResponsiveSizeAttributes(size) {
-  if (typeof size === "string") return {
-    "data-size": size
-  };
-  const dataAttrs = {};
-  if (typeof size._ === "string") dataAttrs["data-size"] = size._;
-  if (typeof size["narrow-l"] === "string") dataAttrs["data-size-narrow-l"] = size["narrow-l"];
-  if (typeof size["medium-s"] === "string") dataAttrs["data-size-medium-s"] = size["medium-s"];
-  if (typeof size["medium-l"] === "string") dataAttrs["data-size-medium-l"] = size["medium-l"];
-  if (typeof size["wide-s"] === "string") dataAttrs["data-size-wide-s"] = size["wide-s"];
-  if (typeof size["wide-l"] === "string") dataAttrs["data-size-wide-l"] = size["wide-l"];
-  return dataAttrs;
-}
-export {
-  DialogRoot2 as DialogRoot
-};
+import "../../../jsx-runtime-i4KUlhDu.js";
+import "../../../store-sN_eYeZT.js";
+import { t as DialogRoot } from "../../../DialogRoot-B67oJduC.js";
+export { DialogRoot };

package/dist/components/Dialog/primitives/DialogTitle.js

@@ -1,42 +1,3 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { forwardRef } from "react";
-import { getDatasetProps } from "@preply/ds-web-core";
-import { s as styles } from "../../../Dialog.module-Ba1X7b3N.js";
-import { u as useDialogRootContext } from "../../../DialogRootContext-BCXmmJAw.js";
-import { u as useRenderElement } from "../../../useRenderElement-DtYPTE_y.js";
-import { u as useBaseUiId } from "../../../useBaseUiId-DavsGYu9.js";
-const DialogTitle$1 = /* @__PURE__ */ React.forwardRef(function DialogTitle(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    id: idProp,
-    ...elementProps
-  } = componentProps;
-  const {
-    store
-  } = useDialogRootContext();
-  const id = useBaseUiId(idProp);
-  store.useSyncedValueWithCleanup("titleElementId", id);
-  return useRenderElement("h2", componentProps, {
-    ref: forwardedRef,
-    props: [{
-      id
-    }, elementProps]
-  });
-});
-if (process.env.NODE_ENV !== "production") DialogTitle$1.displayName = "DialogTitle";
-const DialogTitle2 = forwardRef(function DialogTitle22({
-  children,
-  className,
-  dataset,
-  ...props
-}, ref) {
-  const classNames = [styles.title, className].filter(Boolean).join(" ");
-  const datasetProps = getDatasetProps(dataset);
-  return /* @__PURE__ */ jsx(DialogTitle$1, { ref, className: classNames, ...datasetProps, ...props, children });
-});
-export {
-  DialogTitle2 as DialogTitle
-};
+import "../../../jsx-runtime-i4KUlhDu.js";
+import { t as DialogTitle } from "../../../DialogTitle-C2Nn2ys-.js";
+export { DialogTitle };

package/dist/components/Divider/Divider.js

@@ -1,14 +1,3 @@
-import { jsx } from "react/jsx-runtime";
-import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
-import '../../assets/Divider.css';const Divider$1 = "Divider__kU514";
-const styles = {
-  Divider: Divider$1,
-  "size-small": "size-small__OdB2p",
-  "size-large": "size-large__4iJ0a"
-};
-const Divider = ({
-  size = "small"
-}) => /* @__PURE__ */ jsx("hr", { className: `${styles.Divider} ${styles[`size-${size}`]}`, "data-preply-ds-component": webComponentNames.Divider });
-export {
-  Divider
-};
+import "../../jsx-runtime-i4KUlhDu.js";
+import { t as Divider } from "../../Divider-DvwDWB9_.js";
+export { Divider };