@preply/ds-web-lib 10.0.0 → 11.1.0

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

@@ -1,18 +1,25 @@
-import { jsx } from "react/jsx-runtime";
+"use client";
+import { t as require_jsx_runtime } from "../../../jsx-runtime-i4KUlhDu.js";
+import { t as Dialog_module_default } from "../../../Dialog.module-Db2BJAn4.js";
+import { t as useBreakpointMatch } from "../../../useBreakpointMatch-D9a3CTNK.js";
 import { forwardRef } from "react";
-import { s as styles } from "../../../Dialog.module-Ba1X7b3N.js";
-import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
 import { getDatasetProps } from "@preply/ds-web-core";
-const DialogButtonStack = forwardRef(function DialogButtonStack2({
-  children,
-  className,
-  dataset,
-  ...props
-}, ref) {
-  const classNames = [styles.buttonStack, className].filter(Boolean).join(" ");
-  const datasetProps = getDatasetProps(dataset);
-  return /* @__PURE__ */ jsx("div", { ref, className: classNames, "data-preply-ds-component": webComponentNames.DialogButtonStack, ...datasetProps, ...props, children });
+import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
+//#region src/components/Dialog/primitives/DialogButtonStack.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var DialogButtonStack = forwardRef(function DialogButtonStack({ children, className, dataset, ...props }, ref) {
+	const classNames = [Dialog_module_default.buttonStack, className].filter(Boolean).join(" ");
+	const datasetProps = getDatasetProps(dataset);
+	const horiZontalLayout = useBreakpointMatch("narrow-l");
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		ref,
+		className: classNames,
+		"data-preply-ds-component": webComponentNames.DialogButtonStack,
+		"data-horizontal-layout": horiZontalLayout ? "" : void 0,
+		...datasetProps,
+		...props,
+		children
+	});
 });
-export {
-  DialogButtonStack
-};
+//#endregion
+export { DialogButtonStack };

package/dist/components/Dialog/primitives/DialogCloseButton.d.ts

@@ -29,5 +29,5 @@ export type DialogCloseButtonProps = {
  */
 export declare const DialogCloseButton: React.ForwardRefExoticComponent<DialogCloseButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export type DialogDefaultCloseButtonProps = IconButtonProps;
-export declare const DialogDefaultCloseButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DialogDefaultCloseButton: React.ForwardRefExoticComponent<Omit<import('../../private/ButtonBase/ButtonBase').ButtonBaseProps, "children" | "preplyDsComponent" | "fullWidth" | "wrap" | "isIconButton"> & React.RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=DialogCloseButton.d.ts.map

package/dist/components/Dialog/primitives/DialogCloseButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialogCloseButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Dialog/primitives/DialogCloseButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAc,YAAY,EAAE,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAc,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAI1E,MAAM,MAAM,sBAAsB,GAAG;IACjC,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,iBAAiB,kGAS7B,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG,eAAe,CAAC;AAE5D,eAAO,MAAM,wBAAwB,2FAenC,CAAC"}
+{"version":3,"file":"DialogCloseButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Dialog/primitives/DialogCloseButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAc,YAAY,EAAE,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAc,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAI1E,MAAM,MAAM,sBAAsB,GAAG;IACjC,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,iBAAiB,kGAS7B,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG,eAAe,CAAC;AAE5D,eAAO,MAAM,wBAAwB,yNAgBnC,CAAC"}

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

@@ -1,93 +1,4 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { forwardRef } from "react";
-import { useIntl } from "react-intl";
-import { IconButton } from "../../IconButton/IconButton.js";
-import { genericAriaLabels } from "../../../utils/shared-strings.js";
-import { s as styles } from "../../../Dialog.module-Ba1X7b3N.js";
-import { u as useEventCallback, c as createChangeEventDetails } from "../../../floating-ui.utils.dom-BvMNldxo.js";
-import { u as useButton } from "../../../useButton-fjQ0ak8m.js";
-import { m as mergeProps, u as useRenderElement } from "../../../useRenderElement-BSthtPOr.js";
-import { u as useDialogRootContext } from "../../../DialogRootContext-BCXmmJAw.js";
-function useDialogClose(params) {
-  const {
-    open,
-    setOpen,
-    disabled,
-    nativeButton
-  } = params;
-  const handleClick = useEventCallback((event) => {
-    if (open) {
-      setOpen(false, createChangeEventDetails("close-press", event.nativeEvent));
-    }
-  });
-  const {
-    getButtonProps,
-    buttonRef
-  } = useButton({
-    disabled,
-    native: nativeButton
-  });
-  const getRootProps = (externalProps) => mergeProps({
-    onClick: handleClick
-  }, externalProps, getButtonProps);
-  return {
-    getRootProps,
-    ref: buttonRef
-  };
-}
-const DialogClose = /* @__PURE__ */ React.forwardRef(function DialogClose2(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    disabled = false,
-    nativeButton = true,
-    ...elementProps
-  } = componentProps;
-  const {
-    store
-  } = useDialogRootContext();
-  const open = store.useState("open");
-  const {
-    getRootProps,
-    ref
-  } = useDialogClose({
-    disabled,
-    open,
-    setOpen: store.setOpen,
-    nativeButton
-  });
-  const state = React.useMemo(() => ({
-    disabled
-  }), [disabled]);
-  return useRenderElement("button", componentProps, {
-    state,
-    ref: [forwardedRef, ref],
-    props: [elementProps, getRootProps]
-  });
-});
-if (process.env.NODE_ENV !== "production") DialogClose.displayName = "DialogClose";
-const SvgTokyoUiClose = ({
-  title,
-  titleId,
-  ...props
-}, ref) => /* @__PURE__ */ React.createElement("svg", { "data-preply-ds-component": "SvgTokyoUIIcon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ref, "aria-labelledby": titleId, ...props }, title ? /* @__PURE__ */ React.createElement("title", { id: titleId }, title) : null, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", d: "M7.044 5.63 5.63 7.044l4.95 4.95-4.95 4.95 1.414 1.414 4.95-4.95 4.95 4.95 1.414-1.414-4.95-4.95 4.95-4.95-1.414-1.414-4.95 4.95-4.95-4.95Z", clipRule: "evenodd" }));
-const ForwardRef = forwardRef(SvgTokyoUiClose);
-const DialogCloseButton = forwardRef(function DialogCloseButton2({
-  children,
-  className
-}, ref) {
-  const classNames = [styles.close, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("div", { className: classNames, children: /* @__PURE__ */ jsx(DialogClose, { ref, render: children != null ? children : /* @__PURE__ */ jsx(DialogDefaultCloseButton, {}) }) });
-});
-const DialogDefaultCloseButton = forwardRef(function DefaultCloseButton(props, ref) {
-  const {
-    formatMessage
-  } = useIntl();
-  return /* @__PURE__ */ jsx(IconButton, { ref, size: "small", variant: "ghost", assistiveText: formatMessage(genericAriaLabels.close), svg: ForwardRef, ...props });
-});
-export {
-  DialogCloseButton,
-  DialogDefaultCloseButton
-};
+import "../../../render-icon-Ch3b2dE0.js";
+import "../../../jsx-runtime-i4KUlhDu.js";
+import { n as DialogDefaultCloseButton, t as DialogCloseButton } from "../../../DialogCloseButton-DjDd9Mid.js";
+export { DialogCloseButton, DialogDefaultCloseButton };

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

@@ -1,43 +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-BSthtPOr.js";
-import { u as useBaseUiId } from "../../../useBaseUiId-DavsGYu9.js";
-const DialogDescription$1 = /* @__PURE__ */ React.forwardRef(function DialogDescription(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    id: idProp,
-    ...elementProps
-  } = componentProps;
-  const {
-    store
-  } = useDialogRootContext();
-  const id = useBaseUiId(idProp);
-  store.useSyncedValueWithCleanup("descriptionElementId", id);
-  return useRenderElement("p", componentProps, {
-    ref: forwardedRef,
-    props: [{
-      id
-    }, elementProps]
-  });
-});
-if (process.env.NODE_ENV !== "production") DialogDescription$1.displayName = "DialogDescription";
-const DialogDescription2 = forwardRef(function DialogDescription22({
-  children,
-  className,
-  dataset,
-  ...props
-}, ref) {
-  if (!children) return null;
-  const classNames = [styles.description, className].filter(Boolean).join(" ");
-  const datasetProps = getDatasetProps(dataset);
-  return /* @__PURE__ */ jsx(DialogDescription$1, { ref, className: classNames, ...datasetProps, ...props, children });
-});
-export {
-  DialogDescription2 as DialogDescription
-};
+import "../../../jsx-runtime-i4KUlhDu.js";
+import { t as DialogDescription } from "../../../DialogDescription-8zw9t6pm.js";
+export { DialogDescription };

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 };