@ruya.sa/ui 3.71.3

package/dist/providers/LivePreview/context.d.ts

@@ -0,0 +1,79 @@
+import type { LivePreviewConfig, LivePreviewURLType } from '@ruya.sa/payload';
+import type { Dispatch } from 'react';
+import type React from 'react';
+import type { usePopupWindow } from '../../hooks/usePopupWindow.js';
+import type { SizeReducerAction } from './sizeReducer.js';
+export interface LivePreviewContextType {
+    appIsReady: boolean;
+    breakpoint: LivePreviewConfig['breakpoints'][number]['name'];
+    breakpoints: LivePreviewConfig['breakpoints'];
+    iframeRef: React.RefObject<HTMLIFrameElement | null>;
+    isLivePreviewEnabled: boolean;
+    isLivePreviewing: boolean;
+    isPopupOpen: boolean;
+    isPreviewEnabled: boolean;
+    listeningForMessages?: boolean;
+    /**
+     * The URL that has finished loading in the iframe or popup.
+     * For example, if you set the `url`, it will begin to load into the iframe,
+     * but `loadedURL` will not be set until the iframe's `onLoad` event fires.
+     */
+    loadedURL?: string;
+    measuredDeviceSize: {
+        height: number;
+        width: number;
+    };
+    openPopupWindow: ReturnType<typeof usePopupWindow>['openPopupWindow'];
+    popupRef?: React.RefObject<null | Window>;
+    previewURL?: string;
+    previewWindowType: 'iframe' | 'popup';
+    setAppIsReady: (appIsReady: boolean) => void;
+    setBreakpoint: (breakpoint: LivePreviewConfig['breakpoints'][number]['name']) => void;
+    setHeight: (height: number) => void;
+    setIsLivePreviewing: (isLivePreviewing: boolean) => void;
+    setLoadedURL: (loadedURL: string) => void;
+    setMeasuredDeviceSize: (size: {
+        height: number;
+        width: number;
+    }) => void;
+    setPreviewURL: (url: string) => void;
+    setPreviewWindowType: (previewWindowType: 'iframe' | 'popup') => void;
+    setSize: Dispatch<SizeReducerAction>;
+    setToolbarPosition: (position: {
+        x: number;
+        y: number;
+    }) => void;
+    /**
+     * Sets the URL of the preview (either iframe or popup).
+     * Will trigger a reload of the window.
+     */
+    setURL: (url: string) => void;
+    setWidth: (width: number) => void;
+    setZoom: (zoom: number) => void;
+    size: {
+        height: number;
+        width: number;
+    };
+    toolbarPosition: {
+        x: number;
+        y: number;
+    };
+    /**
+     * The live preview url property can be either a string or a function that returns a string.
+     * It is important to know which one it is, so that we can opt in/out of certain behaviors, e.g. calling the server to get the URL.
+     */
+    typeofLivePreviewURL?: 'function' | 'string';
+    url: LivePreviewURLType;
+    zoom: number;
+}
+export declare const LivePreviewContext: React.Context<LivePreviewContextType>;
+export declare const useLivePreviewContext: () => LivePreviewContextType;
+/**
+ * Hook to access live preview context values. Separated to prevent breaking changes. In the future this hook can be removed in favour of just using the LivePreview one.
+ */
+export declare const usePreviewURL: () => {
+    isPreviewEnabled: boolean;
+    previewURL: string;
+    setPreviewURL: (url: string) => void;
+};
+//# sourceMappingURL=context.d.ts.map

package/dist/providers/LivePreview/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/providers/LivePreview/context.ts"],"names":[],"mappings":"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"}

package/dist/providers/LivePreview/context.js

@@ -0,0 +1,62 @@
+'use client';
+
+import { createContext, use } from 'react';
+export const LivePreviewContext = createContext({
+  appIsReady: false,
+  breakpoint: undefined,
+  breakpoints: undefined,
+  iframeRef: undefined,
+  isLivePreviewEnabled: undefined,
+  isLivePreviewing: false,
+  isPopupOpen: false,
+  isPreviewEnabled: undefined,
+  measuredDeviceSize: {
+    height: 0,
+    width: 0
+  },
+  openPopupWindow: () => {},
+  popupRef: undefined,
+  previewURL: undefined,
+  previewWindowType: 'iframe',
+  setAppIsReady: () => {},
+  setBreakpoint: () => {},
+  setHeight: () => {},
+  setIsLivePreviewing: () => {},
+  setLoadedURL: () => {},
+  setMeasuredDeviceSize: () => {},
+  setPreviewURL: () => {},
+  setPreviewWindowType: () => {},
+  setSize: () => {},
+  setToolbarPosition: () => {},
+  setURL: () => {},
+  setWidth: () => {},
+  setZoom: () => {},
+  size: {
+    height: 0,
+    width: 0
+  },
+  toolbarPosition: {
+    x: 0,
+    y: 0
+  },
+  typeofLivePreviewURL: undefined,
+  url: undefined,
+  zoom: 1
+});
+export const useLivePreviewContext = () => use(LivePreviewContext);
+/**
+ * Hook to access live preview context values. Separated to prevent breaking changes. In the future this hook can be removed in favour of just using the LivePreview one.
+ */
+export const usePreviewURL = () => {
+  const {
+    isPreviewEnabled,
+    previewURL,
+    setPreviewURL
+  } = use(LivePreviewContext);
+  return {
+    isPreviewEnabled,
+    previewURL,
+    setPreviewURL
+  };
+};
+//# sourceMappingURL=context.js.map

package/dist/providers/LivePreview/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":["createContext","use","LivePreviewContext","appIsReady","breakpoint","undefined","breakpoints","iframeRef","isLivePreviewEnabled","isLivePreviewing","isPopupOpen","isPreviewEnabled","measuredDeviceSize","height","width","openPopupWindow","popupRef","previewURL","previewWindowType","setAppIsReady","setBreakpoint","setHeight","setIsLivePreviewing","setLoadedURL","setMeasuredDeviceSize","setPreviewURL","setPreviewWindowType","setSize","setToolbarPosition","setURL","setWidth","setZoom","size","toolbarPosition","x","y","typeofLivePreviewURL","url","zoom","useLivePreviewContext","usePreviewURL"],"sources":["../../../src/providers/LivePreview/context.ts"],"sourcesContent":["'use client'\nimport type { LivePreviewConfig, LivePreviewURLType } from '@ruya.sa/payload'\nimport type { Dispatch } from 'react'\nimport type React from 'react'\n\nimport { createContext, use } from 'react'\n\nimport type { usePopupWindow } from '../../hooks/usePopupWindow.js'\nimport type { SizeReducerAction } from './sizeReducer.js'\n\nexport interface LivePreviewContextType {\n  appIsReady: boolean\n  breakpoint: LivePreviewConfig['breakpoints'][number]['name']\n  breakpoints: LivePreviewConfig['breakpoints']\n  iframeRef: React.RefObject<HTMLIFrameElement | null>\n  isLivePreviewEnabled: boolean\n  isLivePreviewing: boolean\n  isPopupOpen: boolean\n  isPreviewEnabled: boolean\n  listeningForMessages?: boolean\n  /**\n   * The URL that has finished loading in the iframe or popup.\n   * For example, if you set the `url`, it will begin to load into the iframe,\n   * but `loadedURL` will not be set until the iframe's `onLoad` event fires.\n   */\n  loadedURL?: string\n  measuredDeviceSize: {\n    height: number\n    width: number\n  }\n  openPopupWindow: ReturnType<typeof usePopupWindow>['openPopupWindow']\n  popupRef?: React.RefObject<null | Window>\n  previewURL?: string\n  previewWindowType: 'iframe' | 'popup'\n  setAppIsReady: (appIsReady: boolean) => void\n  setBreakpoint: (breakpoint: LivePreviewConfig['breakpoints'][number]['name']) => void\n  setHeight: (height: number) => void\n  setIsLivePreviewing: (isLivePreviewing: boolean) => void\n  setLoadedURL: (loadedURL: string) => void\n  setMeasuredDeviceSize: (size: { height: number; width: number }) => void\n  setPreviewURL: (url: string) => void\n  setPreviewWindowType: (previewWindowType: 'iframe' | 'popup') => void\n  setSize: Dispatch<SizeReducerAction>\n  setToolbarPosition: (position: { x: number; y: number }) => void\n\n  /**\n   * Sets the URL of the preview (either iframe or popup).\n   * Will trigger a reload of the window.\n   */\n  setURL: (url: string) => void\n  setWidth: (width: number) => void\n  setZoom: (zoom: number) => void\n  size: {\n    height: number\n    width: number\n  }\n  toolbarPosition: {\n    x: number\n    y: number\n  }\n  /**\n   * The live preview url property can be either a string or a function that returns a string.\n   * It is important to know which one it is, so that we can opt in/out of certain behaviors, e.g. calling the server to get the URL.\n   */\n  typeofLivePreviewURL?: 'function' | 'string'\n  url: LivePreviewURLType\n  zoom: number\n}\n\nexport const LivePreviewContext = createContext<LivePreviewContextType>({\n  appIsReady: false,\n  breakpoint: undefined,\n  breakpoints: undefined,\n  iframeRef: undefined,\n  isLivePreviewEnabled: undefined,\n  isLivePreviewing: false,\n  isPopupOpen: false,\n  isPreviewEnabled: undefined,\n  measuredDeviceSize: {\n    height: 0,\n    width: 0,\n  },\n  openPopupWindow: () => {},\n  popupRef: undefined,\n  previewURL: undefined,\n  previewWindowType: 'iframe',\n  setAppIsReady: () => {},\n  setBreakpoint: () => {},\n  setHeight: () => {},\n  setIsLivePreviewing: () => {},\n  setLoadedURL: () => {},\n  setMeasuredDeviceSize: () => {},\n  setPreviewURL: () => {},\n  setPreviewWindowType: () => {},\n  setSize: () => {},\n  setToolbarPosition: () => {},\n  setURL: () => {},\n  setWidth: () => {},\n  setZoom: () => {},\n  size: {\n    height: 0,\n    width: 0,\n  },\n  toolbarPosition: {\n    x: 0,\n    y: 0,\n  },\n  typeofLivePreviewURL: undefined,\n  url: undefined,\n  zoom: 1,\n})\n\nexport const useLivePreviewContext = () => use(LivePreviewContext)\n\n/**\n * Hook to access live preview context values. Separated to prevent breaking changes. In the future this hook can be removed in favour of just using the LivePreview one.\n */\nexport const usePreviewURL = () => {\n  const { isPreviewEnabled, previewURL, setPreviewURL } = use(LivePreviewContext)\n\n  return { isPreviewEnabled, previewURL, setPreviewURL }\n}\n"],"mappings":"AAAA;;AAKA,SAASA,aAAa,EAAEC,GAAG,QAAQ;AAgEnC,OAAO,MAAMC,kBAAA,GAAqBF,aAAA,CAAsC;EACtEG,UAAA,EAAY;EACZC,UAAA,EAAYC,SAAA;EACZC,WAAA,EAAaD,SAAA;EACbE,SAAA,EAAWF,SAAA;EACXG,oBAAA,EAAsBH,SAAA;EACtBI,gBAAA,EAAkB;EAClBC,WAAA,EAAa;EACbC,gBAAA,EAAkBN,SAAA;EAClBO,kBAAA,EAAoB;IAClBC,MAAA,EAAQ;IACRC,KAAA,EAAO;EACT;EACAC,eAAA,EAAiBA,CAAA,MAAO;EACxBC,QAAA,EAAUX,SAAA;EACVY,UAAA,EAAYZ,SAAA;EACZa,iBAAA,EAAmB;EACnBC,aAAA,EAAeA,CAAA,MAAO;EACtBC,aAAA,EAAeA,CAAA,MAAO;EACtBC,SAAA,EAAWA,CAAA,MAAO;EAClBC,mBAAA,EAAqBA,CAAA,MAAO;EAC5BC,YAAA,EAAcA,CAAA,MAAO;EACrBC,qBAAA,EAAuBA,CAAA,MAAO;EAC9BC,aAAA,EAAeA,CAAA,MAAO;EACtBC,oBAAA,EAAsBA,CAAA,MAAO;EAC7BC,OAAA,EAASA,CAAA,MAAO;EAChBC,kBAAA,EAAoBA,CAAA,MAAO;EAC3BC,MAAA,EAAQA,CAAA,MAAO;EACfC,QAAA,EAAUA,CAAA,MAAO;EACjBC,OAAA,EAASA,CAAA,MAAO;EAChBC,IAAA,EAAM;IACJnB,MAAA,EAAQ;IACRC,KAAA,EAAO;EACT;EACAmB,eAAA,EAAiB;IACfC,CAAA,EAAG;IACHC,CAAA,EAAG;EACL;EACAC,oBAAA,EAAsB/B,SAAA;EACtBgC,GAAA,EAAKhC,SAAA;EACLiC,IAAA,EAAM;AACR;AAEA,OAAO,MAAMC,qBAAA,GAAwBA,CAAA,KAAMtC,GAAA,CAAIC,kBAAA;AAE/C;;;AAGA,OAAO,MAAMsC,aAAA,GAAgBA,CAAA;EAC3B,MAAM;IAAE7B,gBAAgB;IAAEM,UAAU;IAAEQ;EAAa,CAAE,GAAGxB,GAAA,CAAIC,kBAAA;EAE5D,OAAO;IAAES,gBAAA;IAAkBM,UAAA;IAAYQ;EAAc;AACvD","ignoreList":[]}

package/dist/providers/LivePreview/index.d.ts

@@ -0,0 +1,24 @@
+import type { LivePreviewConfig } from '@ruya.sa/payload';
+import React from 'react';
+import type { LivePreviewContextType } from './context.js';
+export type LivePreviewProviderProps = {
+    appIsReady?: boolean;
+    breakpoints?: LivePreviewConfig['breakpoints'];
+    children: React.ReactNode;
+    deviceSize?: {
+        height: number;
+        width: number;
+    };
+    isLivePreviewEnabled?: boolean;
+    isLivePreviewing: boolean;
+    /**
+     * This specifically relates to `admin.preview` function in the config instead of live preview.
+     */
+    isPreviewEnabled?: boolean;
+    /**
+     * This specifically relates to `admin.preview` function in the config instead of live preview.
+     */
+    previewURL?: string;
+} & Pick<LivePreviewContextType, 'typeofLivePreviewURL' | 'url'>;
+export declare const LivePreviewProvider: React.FC<LivePreviewProviderProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/providers/LivePreview/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/LivePreview/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAyB,iBAAiB,EAAsB,MAAM,kBAAkB,CAAA;AAGpG,OAAO,KAA4D,MAAM,OAAO,CAAA;AAEhF,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAA;AAU1D,MAAM,MAAM,wBAAwB,GAAG;IACrC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAA;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,UAAU,CAAC,EAAE;QACX,MAAM,EAAE,MAAM,CAAA;QACd,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;IACD,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,gBAAgB,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,GAAG,IAAI,CAAC,sBAAsB,EAAE,sBAAsB,GAAG,KAAK,CAAC,CAAA;AAEhE,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAiQlE,CAAA"}

package/dist/providers/LivePreview/index.js

@@ -0,0 +1,222 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DndContext } from '@dnd-kit/core';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { usePopupWindow } from '../../hooks/usePopupWindow.js';
+import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
+import { usePreferences } from '../../providers/Preferences/index.js';
+import { formatAbsoluteURL } from '../../utilities/formatAbsoluteURL.js';
+import { customCollisionDetection } from './collisionDetection.js';
+import { LivePreviewContext } from './context.js';
+import { sizeReducer } from './sizeReducer.js';
+export const LivePreviewProvider = ({
+  breakpoints: incomingBreakpoints,
+  children,
+  isLivePreviewEnabled,
+  isLivePreviewing: incomingIsLivePreviewing,
+  isPreviewEnabled,
+  previewURL: previewURLFromProps,
+  typeofLivePreviewURL,
+  url: urlFromProps
+}) => {
+  const [previewWindowType, setPreviewWindowType] = useState('iframe');
+  const [isLivePreviewing, setIsLivePreviewing] = useState(incomingIsLivePreviewing);
+  const breakpoints = useMemo(() => [...(incomingBreakpoints || []), {
+    name: 'responsive',
+    height: '100%',
+    label: 'Responsive',
+    width: '100%'
+  }], [incomingBreakpoints]);
+  const [url, setURL] = useState('');
+  const [previewURL, setPreviewURL] = useState(previewURLFromProps);
+  const {
+    isPopupOpen,
+    openPopupWindow,
+    popupRef
+  } = usePopupWindow({
+    eventType: 'payload-live-preview',
+    url
+  });
+  const [appIsReady, setAppIsReady] = useState(false);
+  const [listeningForMessages, setListeningForMessages] = useState(false);
+  const {
+    collectionSlug,
+    globalSlug
+  } = useDocumentInfo();
+  const isFirstRender = useRef(true);
+  const {
+    setPreference
+  } = usePreferences();
+  const iframeRef = React.useRef(null);
+  const [loadedURL, setLoadedURL] = useState();
+  const [zoom, setZoom] = useState(1);
+  const [position, setPosition] = useState({
+    x: 0,
+    y: 0
+  });
+  const [size, setSize] = React.useReducer(sizeReducer, {
+    height: 0,
+    width: 0
+  });
+  const [measuredDeviceSize, setMeasuredDeviceSize] = useState({
+    height: 0,
+    width: 0
+  });
+  const [breakpoint, setBreakpoint] = React.useState('responsive');
+  /**
+  * A "middleware" callback fn that does some additional work before `setURL`.
+  * This is what we provide through context, bc it:
+  *  - ensures the URL is absolute
+  *  - resets `appIsReady` to `false` while the new URL is loading
+  */
+  const setLivePreviewURL = useCallback(_incomingURL => {
+    let incomingURL;
+    if (typeof _incomingURL === 'string') {
+      incomingURL = formatAbsoluteURL(_incomingURL);
+    }
+    if (!incomingURL) {
+      setIsLivePreviewing(false);
+    }
+    if (incomingURL !== url) {
+      setAppIsReady(false);
+      setURL(incomingURL);
+    }
+  }, [url]);
+  /**
+  * `url` needs to be relative to the window, which cannot be done on initial render.
+  */
+  useEffect(() => {
+    if (typeof urlFromProps === 'string') {
+      setURL(formatAbsoluteURL(urlFromProps));
+    }
+  }, [urlFromProps]);
+  // The toolbar needs to freely drag and drop around the page
+  const handleDragEnd = ev => {
+    // only update position if the toolbar is completely within the preview area
+    // otherwise reset it back to the previous position
+    // TODO: reset to the nearest edge of the preview area
+    if (ev.over && ev.over.id === 'live-preview-area') {
+      const newPos = {
+        x: position.x + ev.delta.x,
+        y: position.y + ev.delta.y
+      };
+      setPosition(newPos);
+    } else {
+      // reset
+    }
+  };
+  const setWidth = useCallback(width => {
+    setSize({
+      type: 'width',
+      value: width
+    });
+  }, [setSize]);
+  const setHeight = useCallback(height => {
+    setSize({
+      type: 'height',
+      value: height
+    });
+  }, [setSize]);
+  // explicitly set new width and height when as new breakpoints are selected
+  // exclude `custom` breakpoint as it is handled by the `setWidth` and `setHeight` directly
+  useEffect(() => {
+    const foundBreakpoint = breakpoints?.find(bp => bp.name === breakpoint);
+    if (foundBreakpoint && breakpoint !== 'responsive' && breakpoint !== 'custom' && typeof foundBreakpoint?.width === 'number' && typeof foundBreakpoint?.height === 'number') {
+      setSize({
+        type: 'reset',
+        value: {
+          height: foundBreakpoint.height,
+          width: foundBreakpoint.width
+        }
+      });
+    }
+  }, [breakpoint, breakpoints]);
+  /**
+  * Receive the `ready` message from the popup window
+  * This indicates that the app is ready to receive `window.postMessage` events
+  * This is also the only cross-origin way of detecting when a popup window has loaded
+  * Unlike iframe elements which have an `onLoad` handler, there is no way to access `window.open` on popups
+  */
+  useEffect(() => {
+    const handleMessage = event => {
+      if (url?.startsWith(event.origin) && event.data && typeof event.data === 'object' && event.data.type === 'payload-live-preview') {
+        if (event.data.ready) {
+          setAppIsReady(true);
+        }
+      }
+    };
+    window.addEventListener('message', handleMessage);
+    setListeningForMessages(true);
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, [url, listeningForMessages]);
+  const handleWindowChange = useCallback(type => {
+    setAppIsReady(false);
+    setPreviewWindowType(type);
+    if (type === 'popup') {
+      openPopupWindow();
+    }
+  }, [openPopupWindow]);
+  // when the user closes the popup window, switch back to the iframe
+  // the `usePopupWindow` reports the `isPopupOpen` state for us to use here
+  useEffect(() => {
+    const newPreviewWindowType = isPopupOpen ? 'popup' : 'iframe';
+    if (newPreviewWindowType !== previewWindowType) {
+      handleWindowChange('iframe');
+    }
+  }, [previewWindowType, isPopupOpen, handleWindowChange]);
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    void setPreference(collectionSlug ? `collection-${collectionSlug}` : `global-${globalSlug}`, {
+      editViewType: isLivePreviewing ? 'live-preview' : 'default'
+    }, true);
+  }, [isLivePreviewing, setPreference, collectionSlug, globalSlug]);
+  return /*#__PURE__*/_jsx(LivePreviewContext, {
+    value: {
+      appIsReady,
+      breakpoint,
+      breakpoints,
+      iframeRef,
+      isLivePreviewEnabled,
+      isLivePreviewing,
+      isPopupOpen,
+      isPreviewEnabled,
+      listeningForMessages,
+      loadedURL,
+      measuredDeviceSize,
+      openPopupWindow,
+      popupRef,
+      previewURL,
+      previewWindowType,
+      setAppIsReady,
+      setBreakpoint,
+      setHeight,
+      setIsLivePreviewing,
+      setLoadedURL,
+      setMeasuredDeviceSize,
+      setPreviewURL,
+      setPreviewWindowType: handleWindowChange,
+      setSize,
+      setToolbarPosition: setPosition,
+      setURL: setLivePreviewURL,
+      setWidth,
+      setZoom,
+      size,
+      toolbarPosition: position,
+      typeofLivePreviewURL,
+      url,
+      zoom
+    },
+    children: /*#__PURE__*/_jsx(DndContext, {
+      collisionDetection: customCollisionDetection,
+      onDragEnd: handleDragEnd,
+      children: children
+    })
+  });
+};
+//# sourceMappingURL=index.js.map

package/dist/providers/LivePreview/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["DndContext","React","useCallback","useEffect","useMemo","useRef","useState","usePopupWindow","useDocumentInfo","usePreferences","formatAbsoluteURL","customCollisionDetection","LivePreviewContext","sizeReducer","LivePreviewProvider","breakpoints","incomingBreakpoints","children","isLivePreviewEnabled","isLivePreviewing","incomingIsLivePreviewing","isPreviewEnabled","previewURL","previewURLFromProps","typeofLivePreviewURL","url","urlFromProps","previewWindowType","setPreviewWindowType","setIsLivePreviewing","name","height","label","width","setURL","setPreviewURL","isPopupOpen","openPopupWindow","popupRef","eventType","appIsReady","setAppIsReady","listeningForMessages","setListeningForMessages","collectionSlug","globalSlug","isFirstRender","setPreference","iframeRef","loadedURL","setLoadedURL","zoom","setZoom","position","setPosition","x","y","size","setSize","useReducer","measuredDeviceSize","setMeasuredDeviceSize","breakpoint","setBreakpoint","setLivePreviewURL","_incomingURL","incomingURL","handleDragEnd","ev","over","id","newPos","delta","setWidth","type","value","setHeight","foundBreakpoint","find","bp","handleMessage","event","startsWith","origin","data","ready","window","addEventListener","removeEventListener","handleWindowChange","newPreviewWindowType","current","editViewType","_jsx","setToolbarPosition","toolbarPosition","collisionDetection","onDragEnd"],"sources":["../../../src/providers/LivePreview/index.tsx"],"sourcesContent":["'use client'\nimport type { CollectionPreferences, LivePreviewConfig, LivePreviewURLType } from '@ruya.sa/payload'\n\nimport { DndContext } from '@dnd-kit/core'\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nimport type { LivePreviewContextType } from './context.js'\n\nimport { usePopupWindow } from '../../hooks/usePopupWindow.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { formatAbsoluteURL } from '../../utilities/formatAbsoluteURL.js'\nimport { customCollisionDetection } from './collisionDetection.js'\nimport { LivePreviewContext } from './context.js'\nimport { sizeReducer } from './sizeReducer.js'\n\nexport type LivePreviewProviderProps = {\n  appIsReady?: boolean\n  breakpoints?: LivePreviewConfig['breakpoints']\n  children: React.ReactNode\n  deviceSize?: {\n    height: number\n    width: number\n  }\n  isLivePreviewEnabled?: boolean\n  isLivePreviewing: boolean\n  /**\n   * This specifically relates to `admin.preview` function in the config instead of live preview.\n   */\n  isPreviewEnabled?: boolean\n  /**\n   * This specifically relates to `admin.preview` function in the config instead of live preview.\n   */\n  previewURL?: string\n} & Pick<LivePreviewContextType, 'typeofLivePreviewURL' | 'url'>\n\nexport const LivePreviewProvider: React.FC<LivePreviewProviderProps> = ({\n  breakpoints: incomingBreakpoints,\n  children,\n  isLivePreviewEnabled,\n  isLivePreviewing: incomingIsLivePreviewing,\n  isPreviewEnabled,\n  previewURL: previewURLFromProps,\n  typeofLivePreviewURL,\n  url: urlFromProps,\n}) => {\n  const [previewWindowType, setPreviewWindowType] = useState<'iframe' | 'popup'>('iframe')\n  const [isLivePreviewing, setIsLivePreviewing] = useState(incomingIsLivePreviewing)\n\n  const breakpoints: LivePreviewConfig['breakpoints'] = useMemo(\n    () => [\n      ...(incomingBreakpoints || []),\n      {\n        name: 'responsive',\n        height: '100%',\n        label: 'Responsive',\n        width: '100%',\n      },\n    ],\n    [incomingBreakpoints],\n  )\n\n  const [url, setURL] = useState<string>('')\n  const [previewURL, setPreviewURL] = useState<string>(previewURLFromProps)\n\n  const { isPopupOpen, openPopupWindow, popupRef } = usePopupWindow({\n    eventType: 'payload-live-preview',\n    url,\n  })\n\n  const [appIsReady, setAppIsReady] = useState(false)\n  const [listeningForMessages, setListeningForMessages] = useState(false)\n\n  const { collectionSlug, globalSlug } = useDocumentInfo()\n\n  const isFirstRender = useRef(true)\n\n  const { setPreference } = usePreferences()\n\n  const iframeRef = React.useRef<HTMLIFrameElement>(null)\n\n  const [loadedURL, setLoadedURL] = useState<string>()\n\n  const [zoom, setZoom] = useState(1)\n\n  const [position, setPosition] = useState({ x: 0, y: 0 })\n\n  const [size, setSize] = React.useReducer(sizeReducer, { height: 0, width: 0 })\n\n  const [measuredDeviceSize, setMeasuredDeviceSize] = useState({\n    height: 0,\n    width: 0,\n  })\n\n  const [breakpoint, setBreakpoint] =\n    React.useState<LivePreviewConfig['breakpoints'][0]['name']>('responsive')\n\n  /**\n   * A \"middleware\" callback fn that does some additional work before `setURL`.\n   * This is what we provide through context, bc it:\n   *  - ensures the URL is absolute\n   *  - resets `appIsReady` to `false` while the new URL is loading\n   */\n  const setLivePreviewURL = useCallback<LivePreviewContextType['setURL']>(\n    (_incomingURL) => {\n      let incomingURL: LivePreviewURLType\n\n      if (typeof _incomingURL === 'string') {\n        incomingURL = formatAbsoluteURL(_incomingURL)\n      }\n\n      if (!incomingURL) {\n        setIsLivePreviewing(false)\n      }\n\n      if (incomingURL !== url) {\n        setAppIsReady(false)\n        setURL(incomingURL)\n      }\n    },\n    [url],\n  )\n\n  /**\n   * `url` needs to be relative to the window, which cannot be done on initial render.\n   */\n  useEffect(() => {\n    if (typeof urlFromProps === 'string') {\n      setURL(formatAbsoluteURL(urlFromProps))\n    }\n  }, [urlFromProps])\n\n  // The toolbar needs to freely drag and drop around the page\n  const handleDragEnd = (ev) => {\n    // only update position if the toolbar is completely within the preview area\n    // otherwise reset it back to the previous position\n    // TODO: reset to the nearest edge of the preview area\n    if (ev.over && ev.over.id === 'live-preview-area') {\n      const newPos = {\n        x: position.x + ev.delta.x,\n        y: position.y + ev.delta.y,\n      }\n\n      setPosition(newPos)\n    } else {\n      // reset\n    }\n  }\n\n  const setWidth = useCallback(\n    (width) => {\n      setSize({ type: 'width', value: width })\n    },\n    [setSize],\n  )\n\n  const setHeight = useCallback(\n    (height) => {\n      setSize({ type: 'height', value: height })\n    },\n    [setSize],\n  )\n\n  // explicitly set new width and height when as new breakpoints are selected\n  // exclude `custom` breakpoint as it is handled by the `setWidth` and `setHeight` directly\n  useEffect(() => {\n    const foundBreakpoint = breakpoints?.find((bp) => bp.name === breakpoint)\n\n    if (\n      foundBreakpoint &&\n      breakpoint !== 'responsive' &&\n      breakpoint !== 'custom' &&\n      typeof foundBreakpoint?.width === 'number' &&\n      typeof foundBreakpoint?.height === 'number'\n    ) {\n      setSize({\n        type: 'reset',\n        value: {\n          height: foundBreakpoint.height,\n          width: foundBreakpoint.width,\n        },\n      })\n    }\n  }, [breakpoint, breakpoints])\n\n  /**\n   * Receive the `ready` message from the popup window\n   * This indicates that the app is ready to receive `window.postMessage` events\n   * This is also the only cross-origin way of detecting when a popup window has loaded\n   * Unlike iframe elements which have an `onLoad` handler, there is no way to access `window.open` on popups\n   */\n  useEffect(() => {\n    const handleMessage = (event: MessageEvent) => {\n      if (\n        url?.startsWith(event.origin) &&\n        event.data &&\n        typeof event.data === 'object' &&\n        event.data.type === 'payload-live-preview'\n      ) {\n        if (event.data.ready) {\n          setAppIsReady(true)\n        }\n      }\n    }\n\n    window.addEventListener('message', handleMessage)\n\n    setListeningForMessages(true)\n\n    return () => {\n      window.removeEventListener('message', handleMessage)\n    }\n  }, [url, listeningForMessages])\n\n  const handleWindowChange = useCallback(\n    (type: 'iframe' | 'popup') => {\n      setAppIsReady(false)\n      setPreviewWindowType(type)\n      if (type === 'popup') {\n        openPopupWindow()\n      }\n    },\n    [openPopupWindow],\n  )\n\n  // when the user closes the popup window, switch back to the iframe\n  // the `usePopupWindow` reports the `isPopupOpen` state for us to use here\n  useEffect(() => {\n    const newPreviewWindowType = isPopupOpen ? 'popup' : 'iframe'\n\n    if (newPreviewWindowType !== previewWindowType) {\n      handleWindowChange('iframe')\n    }\n  }, [previewWindowType, isPopupOpen, handleWindowChange])\n\n  useEffect(() => {\n    if (isFirstRender.current) {\n      isFirstRender.current = false\n      return\n    }\n\n    void setPreference<CollectionPreferences>(\n      collectionSlug ? `collection-${collectionSlug}` : `global-${globalSlug}`,\n      {\n        editViewType: isLivePreviewing ? 'live-preview' : 'default',\n      },\n      true,\n    )\n  }, [isLivePreviewing, setPreference, collectionSlug, globalSlug])\n\n  return (\n    <LivePreviewContext\n      value={{\n        appIsReady,\n        breakpoint,\n        breakpoints,\n        iframeRef,\n        isLivePreviewEnabled,\n        isLivePreviewing,\n        isPopupOpen,\n        isPreviewEnabled,\n        listeningForMessages,\n        loadedURL,\n        measuredDeviceSize,\n        openPopupWindow,\n        popupRef,\n        previewURL,\n        previewWindowType,\n        setAppIsReady,\n        setBreakpoint,\n        setHeight,\n        setIsLivePreviewing,\n        setLoadedURL,\n        setMeasuredDeviceSize,\n        setPreviewURL,\n        setPreviewWindowType: handleWindowChange,\n        setSize,\n        setToolbarPosition: setPosition,\n        setURL: setLivePreviewURL,\n        setWidth,\n        setZoom,\n        size,\n        toolbarPosition: position,\n        typeofLivePreviewURL,\n        url,\n        zoom,\n      }}\n    >\n      <DndContext collisionDetection={customCollisionDetection} onDragEnd={handleDragEnd}>\n        {children}\n      </DndContext>\n    </LivePreviewContext>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,SAASA,UAAU,QAAQ;AAC3B,OAAOC,KAAA,IAASC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ;AAIzE,SAASC,cAAc,QAAQ;AAC/B,SAASC,eAAe,QAAQ;AAChC,SAASC,cAAc,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ;AAClC,SAASC,wBAAwB,QAAQ;AACzC,SAASC,kBAAkB,QAAQ;AACnC,SAASC,WAAW,QAAQ;AAsB5B,OAAO,MAAMC,mBAAA,GAA0DA,CAAC;EACtEC,WAAA,EAAaC,mBAAmB;EAChCC,QAAQ;EACRC,oBAAoB;EACpBC,gBAAA,EAAkBC,wBAAwB;EAC1CC,gBAAgB;EAChBC,UAAA,EAAYC,mBAAmB;EAC/BC,oBAAoB;EACpBC,GAAA,EAAKC;AAAY,CAClB;EACC,MAAM,CAACC,iBAAA,EAAmBC,oBAAA,CAAqB,GAAGtB,QAAA,CAA6B;EAC/E,MAAM,CAACa,gBAAA,EAAkBU,mBAAA,CAAoB,GAAGvB,QAAA,CAASc,wBAAA;EAEzD,MAAML,WAAA,GAAgDX,OAAA,CACpD,MAAM,C,IACAY,mBAAA,IAAuB,EAAE,GAC7B;IACEc,IAAA,EAAM;IACNC,MAAA,EAAQ;IACRC,KAAA,EAAO;IACPC,KAAA,EAAO;EACT,EACD,EACD,CAACjB,mBAAA,CAAoB;EAGvB,MAAM,CAACS,GAAA,EAAKS,MAAA,CAAO,GAAG5B,QAAA,CAAiB;EACvC,MAAM,CAACgB,UAAA,EAAYa,aAAA,CAAc,GAAG7B,QAAA,CAAiBiB,mBAAA;EAErD,MAAM;IAAEa,WAAW;IAAEC,eAAe;IAAEC;EAAQ,CAAE,GAAG/B,cAAA,CAAe;IAChEgC,SAAA,EAAW;IACXd;EACF;EAEA,MAAM,CAACe,UAAA,EAAYC,aAAA,CAAc,GAAGnC,QAAA,CAAS;EAC7C,MAAM,CAACoC,oBAAA,EAAsBC,uBAAA,CAAwB,GAAGrC,QAAA,CAAS;EAEjE,MAAM;IAAEsC,cAAc;IAAEC;EAAU,CAAE,GAAGrC,eAAA;EAEvC,MAAMsC,aAAA,GAAgBzC,MAAA,CAAO;EAE7B,MAAM;IAAE0C;EAAa,CAAE,GAAGtC,cAAA;EAE1B,MAAMuC,SAAA,GAAY/C,KAAA,CAAMI,MAAM,CAAoB;EAElD,MAAM,CAAC4C,SAAA,EAAWC,YAAA,CAAa,GAAG5C,QAAA;EAElC,MAAM,CAAC6C,IAAA,EAAMC,OAAA,CAAQ,GAAG9C,QAAA,CAAS;EAEjC,MAAM,CAAC+C,QAAA,EAAUC,WAAA,CAAY,GAAGhD,QAAA,CAAS;IAAEiD,CAAA,EAAG;IAAGC,CAAA,EAAG;EAAE;EAEtD,MAAM,CAACC,IAAA,EAAMC,OAAA,CAAQ,GAAGzD,KAAA,CAAM0D,UAAU,CAAC9C,WAAA,EAAa;IAAEkB,MAAA,EAAQ;IAAGE,KAAA,EAAO;EAAE;EAE5E,MAAM,CAAC2B,kBAAA,EAAoBC,qBAAA,CAAsB,GAAGvD,QAAA,CAAS;IAC3DyB,MAAA,EAAQ;IACRE,KAAA,EAAO;EACT;EAEA,MAAM,CAAC6B,UAAA,EAAYC,aAAA,CAAc,GAC/B9D,KAAA,CAAMK,QAAQ,CAA8C;EAE9D;;;;;;EAMA,MAAM0D,iBAAA,GAAoB9D,WAAA,CACvB+D,YAAA;IACC,IAAIC,WAAA;IAEJ,IAAI,OAAOD,YAAA,KAAiB,UAAU;MACpCC,WAAA,GAAcxD,iBAAA,CAAkBuD,YAAA;IAClC;IAEA,IAAI,CAACC,WAAA,EAAa;MAChBrC,mBAAA,CAAoB;IACtB;IAEA,IAAIqC,WAAA,KAAgBzC,GAAA,EAAK;MACvBgB,aAAA,CAAc;MACdP,MAAA,CAAOgC,WAAA;IACT;EACF,GACA,CAACzC,GAAA,CAAI;EAGP;;;EAGAtB,SAAA,CAAU;IACR,IAAI,OAAOuB,YAAA,KAAiB,UAAU;MACpCQ,MAAA,CAAOxB,iBAAA,CAAkBgB,YAAA;IAC3B;EACF,GAAG,CAACA,YAAA,CAAa;EAEjB;EACA,MAAMyC,aAAA,GAAiBC,EAAA;IACrB;IACA;IACA;IACA,IAAIA,EAAA,CAAGC,IAAI,IAAID,EAAA,CAAGC,IAAI,CAACC,EAAE,KAAK,qBAAqB;MACjD,MAAMC,MAAA,GAAS;QACbhB,CAAA,EAAGF,QAAA,CAASE,CAAC,GAAGa,EAAA,CAAGI,KAAK,CAACjB,CAAC;QAC1BC,CAAA,EAAGH,QAAA,CAASG,CAAC,GAAGY,EAAA,CAAGI,KAAK,CAAChB;MAC3B;MAEAF,WAAA,CAAYiB,MAAA;IACd,OAAO;MACL;IAAA;EAEJ;EAEA,MAAME,QAAA,GAAWvE,WAAA,CACd+B,KAAA;IACCyB,OAAA,CAAQ;MAAEgB,IAAA,EAAM;MAASC,KAAA,EAAO1C;IAAM;EACxC,GACA,CAACyB,OAAA,CAAQ;EAGX,MAAMkB,SAAA,GAAY1E,WAAA,CACf6B,MAAA;IACC2B,OAAA,CAAQ;MAAEgB,IAAA,EAAM;MAAUC,KAAA,EAAO5C;IAAO;EAC1C,GACA,CAAC2B,OAAA,CAAQ;EAGX;EACA;EACAvD,SAAA,CAAU;IACR,MAAM0E,eAAA,GAAkB9D,WAAA,EAAa+D,IAAA,CAAMC,EAAA,IAAOA,EAAA,CAAGjD,IAAI,KAAKgC,UAAA;IAE9D,IACEe,eAAA,IACAf,UAAA,KAAe,gBACfA,UAAA,KAAe,YACf,OAAOe,eAAA,EAAiB5C,KAAA,KAAU,YAClC,OAAO4C,eAAA,EAAiB9C,MAAA,KAAW,UACnC;MACA2B,OAAA,CAAQ;QACNgB,IAAA,EAAM;QACNC,KAAA,EAAO;UACL5C,MAAA,EAAQ8C,eAAA,CAAgB9C,MAAM;UAC9BE,KAAA,EAAO4C,eAAA,CAAgB5C;QACzB;MACF;IACF;EACF,GAAG,CAAC6B,UAAA,EAAY/C,WAAA,CAAY;EAE5B;;;;;;EAMAZ,SAAA,CAAU;IACR,MAAM6E,aAAA,GAAiBC,KAAA;MACrB,IACExD,GAAA,EAAKyD,UAAA,CAAWD,KAAA,CAAME,MAAM,KAC5BF,KAAA,CAAMG,IAAI,IACV,OAAOH,KAAA,CAAMG,IAAI,KAAK,YACtBH,KAAA,CAAMG,IAAI,CAACV,IAAI,KAAK,wBACpB;QACA,IAAIO,KAAA,CAAMG,IAAI,CAACC,KAAK,EAAE;UACpB5C,aAAA,CAAc;QAChB;MACF;IACF;IAEA6C,MAAA,CAAOC,gBAAgB,CAAC,WAAWP,aAAA;IAEnCrC,uBAAA,CAAwB;IAExB,OAAO;MACL2C,MAAA,CAAOE,mBAAmB,CAAC,WAAWR,aAAA;IACxC;EACF,GAAG,CAACvD,GAAA,EAAKiB,oBAAA,CAAqB;EAE9B,MAAM+C,kBAAA,GAAqBvF,WAAA,CACxBwE,IAAA;IACCjC,aAAA,CAAc;IACdb,oBAAA,CAAqB8C,IAAA;IACrB,IAAIA,IAAA,KAAS,SAAS;MACpBrC,eAAA;IACF;EACF,GACA,CAACA,eAAA,CAAgB;EAGnB;EACA;EACAlC,SAAA,CAAU;IACR,MAAMuF,oBAAA,GAAuBtD,WAAA,GAAc,UAAU;IAErD,IAAIsD,oBAAA,KAAyB/D,iBAAA,EAAmB;MAC9C8D,kBAAA,CAAmB;IACrB;EACF,GAAG,CAAC9D,iBAAA,EAAmBS,WAAA,EAAaqD,kBAAA,CAAmB;EAEvDtF,SAAA,CAAU;IACR,IAAI2C,aAAA,CAAc6C,OAAO,EAAE;MACzB7C,aAAA,CAAc6C,OAAO,GAAG;MACxB;IACF;IAEA,KAAK5C,aAAA,CACHH,cAAA,GAAiB,cAAcA,cAAA,EAAgB,GAAG,UAAUC,UAAA,EAAY,EACxE;MACE+C,YAAA,EAAczE,gBAAA,GAAmB,iBAAiB;IACpD,GACA;EAEJ,GAAG,CAACA,gBAAA,EAAkB4B,aAAA,EAAeH,cAAA,EAAgBC,UAAA,CAAW;EAEhE,oBACEgD,IAAA,CAACjF,kBAAA;IACC+D,KAAA,EAAO;MACLnC,UAAA;MACAsB,UAAA;MACA/C,WAAA;MACAiC,SAAA;MACA9B,oBAAA;MACAC,gBAAA;MACAiB,WAAA;MACAf,gBAAA;MACAqB,oBAAA;MACAO,SAAA;MACAW,kBAAA;MACAvB,eAAA;MACAC,QAAA;MACAhB,UAAA;MACAK,iBAAA;MACAc,aAAA;MACAsB,aAAA;MACAa,SAAA;MACA/C,mBAAA;MACAqB,YAAA;MACAW,qBAAA;MACA1B,aAAA;MACAP,oBAAA,EAAsB6D,kBAAA;MACtB/B,OAAA;MACAoC,kBAAA,EAAoBxC,WAAA;MACpBpB,MAAA,EAAQ8B,iBAAA;MACRS,QAAA;MACArB,OAAA;MACAK,IAAA;MACAsC,eAAA,EAAiB1C,QAAA;MACjB7B,oBAAA;MACAC,GAAA;MACA0B;IACF;cAEA,aAAA0C,IAAA,CAAC7F,UAAA;MAAWgG,kBAAA,EAAoBrF,wBAAA;MAA0BsF,SAAA,EAAW9B,aAAA;gBAClElD;;;AAIT","ignoreList":[]}

package/dist/providers/LivePreview/index.scss

@@ -0,0 +1,68 @@
+@import '../../scss/styles';
+
+@layer payload-default {
+  .live-preview {
+    width: 100%;
+    display: flex;
+    --gradient: linear-gradient(to left, rgba(0, 0, 0, 0.04) 0%, transparent 100%);
+
+    [dir='rtl'] & {
+      flex-direction: row-reverse;
+    }
+
+    &--popup-open {
+      .live-preview {
+        &__edit {
+          padding-right: var(--gutter-h);
+        }
+      }
+    }
+
+    &__main {
+      width: 40%;
+      display: flex;
+      flex-direction: column;
+      min-height: 100%;
+      position: relative;
+
+      &--popup-open {
+        width: 100%;
+      }
+
+      &::after {
+        content: ' ';
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: calc(var(--base) * 2);
+        height: 100%;
+        background: var(--gradient);
+        pointer-events: none;
+        z-index: -1;
+      }
+    }
+
+    @include mid-break {
+      flex-direction: column;
+
+      &__main {
+        min-height: initial;
+        width: 100%;
+
+        &::after {
+          display: none;
+        }
+      }
+
+      &__form {
+        display: block;
+      }
+    }
+  }
+
+  html[data-theme='dark'] {
+    .live-preview {
+      --gradient: linear-gradient(to left, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
+    }
+  }
+}

package/dist/providers/LivePreview/sizeReducer.d.ts

@@ -0,0 +1,20 @@
+type SizeReducerState = {
+    height: number;
+    width: number;
+};
+export type SizeReducerAction = {
+    type: 'height' | 'width';
+    value: number;
+} | {
+    type: 'reset';
+    value: {
+        height: number;
+        width: number;
+    };
+};
+export declare const sizeReducer: (state: SizeReducerState, action: SizeReducerAction) => {
+    height: number;
+    width: number;
+};
+export {};
+//# sourceMappingURL=sizeReducer.d.ts.map

package/dist/providers/LivePreview/sizeReducer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizeReducer.d.ts","sourceRoot":"","sources":["../../../src/providers/LivePreview/sizeReducer.ts"],"names":[],"mappings":"AAWA,KAAK,gBAAgB,GAAG;IACtB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,iBAAiB,GACzB;IACE,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAA;IACxB,KAAK,EAAE,MAAM,CAAA;CACd,GACD;IACE,IAAI,EAAE,OAAO,CAAA;IACb,KAAK,EAAE;QACL,MAAM,EAAE,MAAM,CAAA;QACd,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;CACF,CAAA;AAEL,eAAO,MAAM,WAAW,UAAW,gBAAgB,UAAU,iBAAiB;;WAhBrE,MAAM;CAyBd,CAAA"}

package/dist/providers/LivePreview/sizeReducer.js

@@ -0,0 +1,30 @@
+// export const sizeReducer: (state, action) => {
+//   switch (action.type) {
+//     case 'width':
+//       return { ...state, width: action.value }
+//     case 'height':
+//       return { ...state, height: action.value }
+//     default:
+//       return { ...state, ...(action?.value || {}) }
+//   }
+// },
+export const sizeReducer = (state, action) => {
+  switch (action.type) {
+    case 'height':
+      return {
+        ...state,
+        height: action.value
+      };
+    case 'width':
+      return {
+        ...state,
+        width: action.value
+      };
+    default:
+      return {
+        ...state,
+        ...(action?.value || {})
+      };
+  }
+};
+//# sourceMappingURL=sizeReducer.js.map

package/dist/providers/LivePreview/sizeReducer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizeReducer.js","names":["sizeReducer","state","action","type","height","value","width"],"sources":["../../../src/providers/LivePreview/sizeReducer.ts"],"sourcesContent":["// export const sizeReducer: (state, action) => {\n//   switch (action.type) {\n//     case 'width':\n//       return { ...state, width: action.value }\n//     case 'height':\n//       return { ...state, height: action.value }\n//     default:\n//       return { ...state, ...(action?.value || {}) }\n//   }\n// },\n\ntype SizeReducerState = {\n  height: number\n  width: number\n}\n\nexport type SizeReducerAction =\n  | {\n      type: 'height' | 'width'\n      value: number\n    }\n  | {\n      type: 'reset'\n      value: {\n        height: number\n        width: number\n      }\n    }\n\nexport const sizeReducer = (state: SizeReducerState, action: SizeReducerAction) => {\n  switch (action.type) {\n    case 'height':\n      return { ...state, height: action.value }\n    case 'width':\n      return { ...state, width: action.value }\n    default:\n      return { ...state, ...(action?.value || {}) }\n  }\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAoBA,OAAO,MAAMA,WAAA,GAAcA,CAACC,KAAA,EAAyBC,MAAA;EACnD,QAAQA,MAAA,CAAOC,IAAI;IACjB,KAAK;MACH,OAAO;QAAE,GAAGF,KAAK;QAAEG,MAAA,EAAQF,MAAA,CAAOG;MAAM;IAC1C,KAAK;MACH,OAAO;QAAE,GAAGJ,KAAK;QAAEK,KAAA,EAAOJ,MAAA,CAAOG;MAAM;IACzC;MACE,OAAO;QAAE,GAAGJ,KAAK;QAAE,IAAIC,MAAA,EAAQG,KAAA,IAAS,CAAC,CAAC;MAAE;EAChD;AACF","ignoreList":[]}

package/dist/providers/Locale/index.d.ts

@@ -0,0 +1,20 @@
+import type { Locale } from '@ruya.sa/payload';
+import React from 'react';
+export declare const LocaleLoadingContext: React.Context<{
+    localeIsLoading: boolean;
+    setLocaleIsLoading: (_: boolean) => any;
+}>;
+export declare const LocaleProvider: React.FC<{
+    children?: React.ReactNode;
+    locale?: Locale['code'];
+}>;
+export declare const useLocaleLoading: () => {
+    localeIsLoading: boolean;
+    setLocaleIsLoading: (_: boolean) => any;
+};
+/**
+ * TODO: V4
+ * The return type of the `useLocale` hook will change in v4. It will return `null | Locale` instead of `false | {} | Locale`.
+ */
+export declare const useLocale: () => Locale;
+//# sourceMappingURL=index.d.ts.map

package/dist/providers/Locale/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/Locale/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAI9C,OAAO,KAA0D,MAAM,OAAO,CAAA;AAQ9E,eAAO,MAAM,oBAAoB;;4BAEP,OAAO;EAC/B,CAAA;AAcF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAA;CAAE,CA4F5F,CAAA;AAED,eAAO,MAAM,gBAAgB;;4BA7GH,OAAO;CA6G8B,CAAA;AAE/D;;;GAGG;AACH,eAAO,MAAM,SAAS,QAAO,MAA4B,CAAA"}