@payloadcms/ui 4.0.0-canary.4 → 4.0.0-canary.6

package/dist/elements/Hierarchy/{Drawer/useHierarchyDrawer.js → Modal/useHierarchyModal.js}

@@ -1,57 +1,56 @@
 'use client';
 
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
 import { useModal } from '@faceless-ui/modal';
-import React, { useCallback, useId, useMemo, useRef } from 'react';
+import React, { useCallback, useId, useMemo, useRef, useState } from 'react';
 export * from './types.js';
 import { useConfig } from '../../../providers/Config/index.js';
 import { useEditDepth } from '../../../providers/EditDepth/index.js';
 import { useHierarchy } from '../../../providers/Hierarchy/index.js';
-import { DrawerToggler } from '../../Drawer/index.js';
-import { baseClass, HierarchyDrawer } from './index.js';
-export const formatHierarchyDrawerSlug = ({
+import { DrawerToggler as ModalToggler } from '../../Drawer/index.js';
+import { baseClass, HierarchyModal } from './index.js';
+export const formatHierarchyModalSlug = ({
   depth,
   uuid
-}) => `hierarchy-drawer_${depth}_${uuid}`;
-export const HierarchyDrawerToggler = ({
+}) => `hierarchy-modal_${depth}_${uuid}`;
+export const HierarchyModalToggler = ({
   children,
   className,
   disabled,
-  drawerSlug,
+  modalSlug,
   onClick,
   ...rest
 }) => {
-  return /*#__PURE__*/_jsx(DrawerToggler, {
+  return /*#__PURE__*/_jsx(ModalToggler, {
     className: [className, `${baseClass}__toggler`].filter(Boolean).join(' '),
     disabled: disabled,
     onClick: onClick,
-    slug: drawerSlug,
+    slug: modalSlug,
     ...rest,
     children: children
   });
 };
 /**
- * Hook for using a hierarchy drawer for selecting hierarchy items.
+ * Hook for using a hierarchy modal for selecting hierarchy items.
  *
  * @example
  * ```tsx
- * const [HierarchyDrawer, HierarchyDrawerToggler, { closeDrawer, openDrawer }] = useHierarchyDrawer({
+ * const [HierarchyModal, HierarchyModalToggler, { closeModal, openModal }] = useHierarchyModal({
  *   collectionSlug: 'categories',
  * })
  *
  * return (
  *   <>
- *     <HierarchyDrawer
+ *     <HierarchyModal
  *       onSave={(selections) => console.log(selections)}
  *       hasMany={true}
  *     />
- *     <HierarchyDrawerToggler>Select Categories</HierarchyDrawerToggler>
+ *     <HierarchyModalToggler>Select Categories</HierarchyModalToggler>
  *   </>
  * )
  * ```
  */
-export const useHierarchyDrawer = ({
+export const useHierarchyModal = ({
   disabledIds,
   filterByCollection: filterByCollectionProp,
   hierarchyCollectionSlug,
@@ -81,15 +80,16 @@ export const useHierarchyDrawer = ({
     }
     return allowedCollections !== null ? allowedCollections.map(c => c.slug) : undefined;
   }, [filterByCollectionProp, allowedCollections]);
-  const drawerDepth = useEditDepth();
+  const modalDepth = useEditDepth();
   const uuid = useId();
   const {
     closeModal,
     openModal,
     toggleModal
   } = useModal();
-  const drawerSlug = formatHierarchyDrawerSlug({
-    depth: drawerDepth,
+  const [reopenCount, setReopenCount] = useState(0);
+  const modalSlug = formatHierarchyModalSlug({
+    depth: modalDepth,
     uuid
   });
   // Store modal functions in refs to ensure stable callbacks
@@ -101,48 +101,49 @@ export const useHierarchyDrawer = ({
   openModalRef.current = openModal;
   toggleModalRef.current = toggleModal;
   // Stable callbacks using refs - these will NEVER change
-  const toggleDrawer = useCallback(() => {
-    toggleModalRef.current(drawerSlug);
-  }, [drawerSlug]);
-  const closeDrawer = useCallback(() => {
-    closeModalRef.current(drawerSlug);
-  }, [drawerSlug]);
-  const openDrawer = useCallback(() => {
-    openModalRef.current(drawerSlug);
-  }, [drawerSlug]);
-  const MemoizedDrawer = useMemo(() => {
-    const DrawerComponent = props => /*#__PURE__*/_createElement(HierarchyDrawer, {
+  const toggleHierarchyModal = useCallback(() => {
+    toggleModalRef.current(modalSlug);
+  }, [modalSlug]);
+  const closeHierarchyModal = useCallback(() => {
+    closeModalRef.current(modalSlug);
+  }, [modalSlug]);
+  const openHierarchyModal = useCallback(() => {
+    setReopenCount(count => count + 1);
+    openModalRef.current(modalSlug);
+  }, [modalSlug]);
+  const MemoizedModal = useMemo(() => {
+    const ModalComponent = props => /*#__PURE__*/_jsx(HierarchyModal, {
       ...props,
       baseFilter: baseFilter,
-      closeDrawer: closeDrawer,
+      closeModal: closeHierarchyModal,
       disabledIds: disabledIds,
-      drawerSlug: drawerSlug,
       filterByCollection: filterByCollection,
       hierarchyCollectionSlug: hierarchyCollectionSlug,
       Icon: Icon,
-      key: drawerSlug,
+      modalSlug: modalSlug,
       parentFieldName: parentFieldName,
+      reopenCount: reopenCount,
       useAsTitle: useAsTitle
-    });
-    return DrawerComponent;
-  }, [baseFilter, drawerSlug, closeDrawer, disabledIds, filterByCollection, Icon, parentFieldName, hierarchyCollectionSlug, useAsTitle]);
-  const MemoizedDrawerToggler = useMemo(() => {
-    const TogglerComponent = props_0 => /*#__PURE__*/_jsx(HierarchyDrawerToggler, {
+    }, modalSlug);
+    return ModalComponent;
+  }, [baseFilter, closeHierarchyModal, disabledIds, filterByCollection, Icon, modalSlug, parentFieldName, reopenCount, hierarchyCollectionSlug, useAsTitle]);
+  const MemoizedModalToggler = useMemo(() => {
+    const TogglerComponent = props_0 => /*#__PURE__*/_jsx(HierarchyModalToggler, {
       ...props_0,
-      drawerSlug: drawerSlug
+      modalSlug: modalSlug
     });
     return TogglerComponent;
-  }, [drawerSlug]);
-  const MemoizedDrawerState = useMemo(() => ({
-    closeDrawer,
-    drawerDepth,
-    drawerSlug,
-    // Note: Not tracking isDrawerOpen to prevent re-renders when other modals change state
+  }, [modalSlug]);
+  const MemoizedModalState = useMemo(() => ({
+    closeModal: closeHierarchyModal,
+    modalDepth,
+    modalSlug,
+    // Note: Not tracking isModalOpen to prevent re-renders when other modals change state
     // Consumers needing this can use useModal() directly
-    isDrawerOpen: false,
-    openDrawer,
-    toggleDrawer
-  }), [drawerDepth, drawerSlug, toggleDrawer, closeDrawer, openDrawer]);
-  return [MemoizedDrawer, MemoizedDrawerToggler, MemoizedDrawerState];
+    isModalOpen: false,
+    openModal: openHierarchyModal,
+    toggleModal: toggleHierarchyModal
+  }), [closeHierarchyModal, modalDepth, modalSlug, openHierarchyModal, toggleHierarchyModal]);
+  return [MemoizedModal, MemoizedModalToggler, MemoizedModalState];
 };
-//# sourceMappingURL=useHierarchyDrawer.js.map
+//# sourceMappingURL=useHierarchyModal.js.map

package/dist/elements/Hierarchy/Modal/useHierarchyModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHierarchyModal.js","names":["useModal","React","useCallback","useId","useMemo","useRef","useState","useConfig","useEditDepth","useHierarchy","DrawerToggler","ModalToggler","baseClass","HierarchyModal","formatHierarchyModalSlug","depth","uuid","HierarchyModalToggler","children","className","disabled","modalSlug","onClick","rest","_jsx","filter","Boolean","join","slug","useHierarchyModal","disabledIds","filterByCollection","filterByCollectionProp","hierarchyCollectionSlug","Icon","getEntityConfig","allowedCollections","baseFilter","collectionConfig","collectionSlug","useAsTitle","admin","hierarchyConfig","hierarchy","undefined","parentFieldName","map","c","modalDepth","closeModal","openModal","toggleModal","reopenCount","setReopenCount","closeModalRef","openModalRef","toggleModalRef","current","toggleHierarchyModal","closeHierarchyModal","openHierarchyModal","count","MemoizedModal","ModalComponent","props","MemoizedModalToggler","TogglerComponent","MemoizedModalState","isModalOpen"],"sources":["../../../../src/elements/Hierarchy/Modal/useHierarchyModal.tsx"],"sourcesContent":["'use client'\nimport { useModal } from '@faceless-ui/modal'\nimport React, { useCallback, useId, useMemo, useRef, useState } from 'react'\n\nimport type { HierarchyModalProps, HierarchyModalTogglerProps, UseHierarchyModal } from './types.js'\n\nexport * from './types.js'\n\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useEditDepth } from '../../../providers/EditDepth/index.js'\nimport { useHierarchy } from '../../../providers/Hierarchy/index.js'\nimport { DrawerToggler as ModalToggler } from '../../Drawer/index.js'\nimport { baseClass, HierarchyModal } from './index.js'\n\nexport const formatHierarchyModalSlug = ({\n  depth,\n  uuid,\n}: {\n  depth: number\n  uuid: string\n}): string => `hierarchy-modal_${depth}_${uuid}`\n\nexport const HierarchyModalToggler: React.FC<HierarchyModalTogglerProps> = ({\n  children,\n  className,\n  disabled,\n  modalSlug,\n  onClick,\n  ...rest\n}) => {\n  return (\n    <ModalToggler\n      className={[className, `${baseClass}__toggler`].filter(Boolean).join(' ')}\n      disabled={disabled}\n      onClick={onClick}\n      slug={modalSlug}\n      {...rest}\n    >\n      {children}\n    </ModalToggler>\n  )\n}\n\n/**\n * Hook for using a hierarchy modal for selecting hierarchy items.\n *\n * @example\n * ```tsx\n * const [HierarchyModal, HierarchyModalToggler, { closeModal, openModal }] = useHierarchyModal({\n *   collectionSlug: 'categories',\n * })\n *\n * return (\n *   <>\n *     <HierarchyModal\n *       onSave={(selections) => console.log(selections)}\n *       hasMany={true}\n *     />\n *     <HierarchyModalToggler>Select Categories</HierarchyModalToggler>\n *   </>\n * )\n * ```\n */\nexport const useHierarchyModal: UseHierarchyModal = ({\n  disabledIds,\n  filterByCollection: filterByCollectionProp,\n  hierarchyCollectionSlug,\n  Icon,\n}) => {\n  const { getEntityConfig } = useConfig()\n  const { allowedCollections, baseFilter } = useHierarchy()\n  const collectionConfig = getEntityConfig({ collectionSlug: hierarchyCollectionSlug })\n\n  const useAsTitle = collectionConfig?.admin?.useAsTitle\n  const hierarchyConfig =\n    collectionConfig?.hierarchy && typeof collectionConfig.hierarchy === 'object'\n      ? collectionConfig.hierarchy\n      : undefined\n  const parentFieldName = hierarchyConfig?.parentFieldName\n\n  // Use explicit prop if provided, otherwise fall back to allowedCollections from context\n  // - allowedCollections is null/undefined: no filtering (undefined)\n  // - allowedCollections is []: folder accepts everything, show only unrestricted destinations ([])\n  // - allowedCollections has values: show folders accepting those types\n  // Memoize to prevent new array references on every render\n  const filterByCollection = useMemo(() => {\n    if (filterByCollectionProp !== undefined) {\n      return filterByCollectionProp\n    }\n    return allowedCollections !== null ? allowedCollections.map((c) => c.slug) : undefined\n  }, [filterByCollectionProp, allowedCollections])\n\n  const modalDepth = useEditDepth()\n  const uuid = useId()\n  const { closeModal, openModal, toggleModal } = useModal()\n  const [reopenCount, setReopenCount] = useState(0)\n\n  const modalSlug = formatHierarchyModalSlug({\n    depth: modalDepth,\n    uuid,\n  })\n\n  // Store modal functions in refs to ensure stable callbacks\n  // This prevents re-renders when other modals (like DocumentDrawer) change state\n  const closeModalRef = useRef(closeModal)\n  const openModalRef = useRef(openModal)\n  const toggleModalRef = useRef(toggleModal)\n  closeModalRef.current = closeModal\n  openModalRef.current = openModal\n  toggleModalRef.current = toggleModal\n\n  // Stable callbacks using refs - these will NEVER change\n  const toggleHierarchyModal = useCallback(() => {\n    toggleModalRef.current(modalSlug)\n  }, [modalSlug])\n\n  const closeHierarchyModal = useCallback(() => {\n    closeModalRef.current(modalSlug)\n  }, [modalSlug])\n\n  const openHierarchyModal = useCallback(() => {\n    setReopenCount((count) => count + 1)\n    openModalRef.current(modalSlug)\n  }, [modalSlug])\n\n  const MemoizedModal = useMemo(() => {\n    const ModalComponent: React.FC<HierarchyModalProps> = (props) => (\n      <HierarchyModal\n        key={modalSlug}\n        {...props}\n        baseFilter={baseFilter}\n        closeModal={closeHierarchyModal}\n        disabledIds={disabledIds}\n        filterByCollection={filterByCollection}\n        hierarchyCollectionSlug={hierarchyCollectionSlug}\n        Icon={Icon}\n        modalSlug={modalSlug}\n        parentFieldName={parentFieldName}\n        reopenCount={reopenCount}\n        useAsTitle={useAsTitle}\n      />\n    )\n\n    return ModalComponent\n  }, [\n    baseFilter,\n    closeHierarchyModal,\n    disabledIds,\n    filterByCollection,\n    Icon,\n    modalSlug,\n    parentFieldName,\n    reopenCount,\n    hierarchyCollectionSlug,\n    useAsTitle,\n  ])\n\n  const MemoizedModalToggler = useMemo(() => {\n    const TogglerComponent: React.FC<Omit<HierarchyModalTogglerProps, 'modalSlug'>> = (props) => (\n      <HierarchyModalToggler {...props} modalSlug={modalSlug} />\n    )\n\n    return TogglerComponent\n  }, [modalSlug])\n\n  const MemoizedModalState = useMemo(\n    () => ({\n      closeModal: closeHierarchyModal,\n      modalDepth,\n      modalSlug,\n      // Note: Not tracking isModalOpen to prevent re-renders when other modals change state\n      // Consumers needing this can use useModal() directly\n      isModalOpen: false,\n      openModal: openHierarchyModal,\n      toggleModal: toggleHierarchyModal,\n    }),\n    [closeHierarchyModal, modalDepth, modalSlug, openHierarchyModal, toggleHierarchyModal],\n  )\n\n  return [MemoizedModal, MemoizedModalToggler, MemoizedModalState]\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Hierarchy/MoveMany/index.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 export declare const baseClass = "move-many";
 type MoveManyProps = {
-    /** Current parent ID - drawer will open expanded to this location */
+    /** Current parent ID - modal will open expanded to this location */
     currentParentID?: null | number | string;
     /** The hierarchy collection slug (e.g., 'folders') */
     hierarchySlug: string;
-    /** Icon to display in the hierarchy drawer */
+    /** Icon to display in the hierarchy modal */
     Icon?: React.ReactNode;
     /** When multiple MoveMany components are rendered on the page, this will differentiate them */
     modalPrefix?: string;

package/dist/elements/Hierarchy/MoveMany/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/MoveMany/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAe7D,eAAO,MAAM,SAAS,cAAc,CAAA;AAEpC,KAAK,aAAa,GAAG;IACnB,qEAAqE;IACrE,eAAe,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;IACxC,sDAAsD;IACtD,aAAa,EAAE,MAAM,CAAA;IACrB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,+FAA+F;IAC/F,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,4CAA4C;IAC5C,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,GAAG,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;KAAE,CAAC,CAAA;CACzD,CAAA;AAeD,wBAAgB,QAAQ,CAAC,EACvB,eAAe,EACf,aAAa,EACb,IAAI,EACJ,WAAW,EACX,SAAS,EACT,UAAU,GACX,EAAE,aAAa,qBA4Qf"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/MoveMany/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAe7D,eAAO,MAAM,SAAS,cAAc,CAAA;AAEpC,KAAK,aAAa,GAAG;IACnB,oEAAoE;IACpE,eAAe,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;IACxC,sDAAsD;IACtD,aAAa,EAAE,MAAM,CAAA;IACrB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,+FAA+F;IAC/F,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,4CAA4C;IAC5C,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,GAAG,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;KAAE,CAAC,CAAA;CACzD,CAAA;AAeD,wBAAgB,QAAQ,CAAC,EACvB,eAAe,EACf,aAAa,EACb,IAAI,EACJ,WAAW,EACX,SAAS,EACT,UAAU,GACX,EAAE,aAAa,qBAiQf"}

package/dist/elements/Hierarchy/MoveMany/index.js

@@ -15,7 +15,7 @@ import { requests } from '../../../utilities/api.js';
 import { ConfirmationModal } from '../../ConfirmationModal/index.js';
 import { ListSelectionButton } from '../../ListSelection/index.js';
 import { Translation } from '../../Translation/index.js';
-import { useHierarchyDrawer } from '../Drawer/useHierarchyDrawer.js';
+import { useHierarchyModal } from '../Modal/useHierarchyModal.js';
 export const baseClass = 'move-many';
 /**
  * Gets the parent field name from the hierarchy config.
@@ -87,10 +87,10 @@ export function MoveMany({
     const parentIds = selections[hierarchySlug]?.ids;
     return parentIds?.length ? new Set(parentIds) : undefined;
   }, [selections, hierarchySlug]);
-  const [HierarchyDrawer,, {
-    closeDrawer,
-    openDrawer
-  }] = useHierarchyDrawer({
+  const [HierarchyModal,, {
+    closeModal,
+    openModal: openHierarchyModal
+  }] = useHierarchyModal({
     disabledIds,
     filterByCollection: requiredCollections,
     hierarchyCollectionSlug: hierarchySlug,
@@ -210,7 +210,7 @@ export function MoveMany({
         }));
       }
       if (!hasErrors || totalMoved > 0) {
-        closeDrawer();
+        closeModal();
         onSuccess?.();
       }
     } catch (_err) {
@@ -218,7 +218,7 @@ export function MoveMany({
     } finally {
       setDestination(null);
     }
-  }, [closeDrawer, destination, selections, parentFieldName, locale, api, i18n, t, label, onSuccess]);
+  }, [closeModal, destination, selections, parentFieldName, locale, api, i18n, t, label, onSuccess]);
   if (count === 0 || !canMove) {
     return null;
   }
@@ -226,9 +226,9 @@ export function MoveMany({
     children: [/*#__PURE__*/_jsx(ListSelectionButton, {
       "aria-label": t('general:move'),
       className: `${baseClass}__toggle`,
-      onClick: openDrawer,
+      onClick: openHierarchyModal,
       children: t('general:move')
-    }), /*#__PURE__*/_jsx(HierarchyDrawer, {
+    }), /*#__PURE__*/_jsx(HierarchyModal, {
       hasMany: false,
       initialSelections: currentParentID ? [currentParentID] : null,
       onMoveToRoot: handleMoveToRoot,

package/dist/elements/Hierarchy/MoveMany/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useModal","getTranslation","formatAdminURL","qs","React","useCallback","useMemo","useState","toast","useConfig","useDocumentSelection","useLocale","useTranslation","requests","ConfirmationModal","ListSelectionButton","Translation","useHierarchyDrawer","baseClass","getParentFieldName","hierarchyConfig","config","hierarchy","undefined","parentFieldName","MoveMany","currentParentID","hierarchySlug","Icon","modalPrefix","onSuccess","selections","i18n","t","code","locale","openModal","collections","routes","api","getSelectionsWithMetadata","destination","setDestination","confirmMoveDrawerSlug","requiredCollections","selectionsWithMeta","required","Set","collectionSlug","items","Object","entries","metadata","allowedCollections","slug","add","size","Array","from","disabledIds","parentIds","ids","length","HierarchyDrawer","closeDrawer","openDrawer","filterByCollection","hierarchyCollectionSlug","count","label","totalCount","labels","find","c","collectionLabel","plural","singular","push","join","hierarchyCollectionConfig","canMove","handleDrawerSave","selectionsMap","firstSelection","values","next","value","destinationId","id","destinationTitle","path","title","String","handleMoveToRoot","handleConfirmMove","totalMoved","hasErrors","queryString","stringify","where","in","addQueryPrefix","url","apiRoute","response","patch","body","JSON","headers","language","credentials","json","status","errors","error","message","description","map","movedCount","docs","successKey","success","_err","_jsxs","Fragment","_jsx","className","onClick","hasMany","initialSelections","onMoveToRoot","onSave","showMoveToRoot","elements","1","children","i18nKey","variables","confirmingLabel","heading","modalSlug","onConfirm"],"sources":["../../../../src/elements/Hierarchy/MoveMany/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { formatAdminURL } from 'payload/shared'\nimport * as qs from 'qs-esm'\nimport React, { useCallback, useMemo, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport type { SelectionWithPath } from '../Drawer/types.js'\n\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useDocumentSelection } from '../../../providers/DocumentSelection/index.js'\nimport { useLocale } from '../../../providers/Locale/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { requests } from '../../../utilities/api.js'\nimport { ConfirmationModal } from '../../ConfirmationModal/index.js'\nimport { ListSelectionButton } from '../../ListSelection/index.js'\nimport { Translation } from '../../Translation/index.js'\nimport { useHierarchyDrawer } from '../Drawer/useHierarchyDrawer.js'\n\nexport const baseClass = 'move-many'\n\ntype MoveManyProps = {\n  /** Current parent ID - drawer will open expanded to this location */\n  currentParentID?: null | number | string\n  /** The hierarchy collection slug (e.g., 'folders') */\n  hierarchySlug: string\n  /** Icon to display in the hierarchy drawer */\n  Icon?: React.ReactNode\n  /** When multiple MoveMany components are rendered on the page, this will differentiate them */\n  modalPrefix?: string\n  /** Callback after successful move */\n  onSuccess?: () => void\n  /** Selections grouped by collection slug */\n  selections: Record<string, { ids: (number | string)[] }>\n}\n\n/**\n * Gets the parent field name from the hierarchy config.\n */\nfunction getParentFieldName(\n  hierarchyConfig: ClientCollectionConfig | undefined,\n): string | undefined {\n  const config =\n    hierarchyConfig?.hierarchy && typeof hierarchyConfig.hierarchy === 'object'\n      ? hierarchyConfig.hierarchy\n      : undefined\n  return config?.parentFieldName\n}\n\nexport function MoveMany({\n  currentParentID,\n  hierarchySlug,\n  Icon,\n  modalPrefix,\n  onSuccess,\n  selections,\n}: MoveManyProps) {\n  const { i18n, t } = useTranslation()\n  const { code: locale } = useLocale()\n  const { openModal } = useModal()\n  const {\n    config: {\n      collections,\n      routes: { api },\n    },\n  } = useConfig()\n\n  const { getSelectionsWithMetadata } = useDocumentSelection()\n\n  const [destination, setDestination] = useState<{\n    id: null | number | string\n    title: string\n  } | null>(null)\n\n  const confirmMoveDrawerSlug = `${modalPrefix ? `${modalPrefix}-` : ''}confirm-move-many`\n\n  // Compute required collections from selection metadata\n  // For related items: add their collection slug\n  // For folders: add their allowedCollections values\n  const requiredCollections = useMemo(() => {\n    const selectionsWithMeta = getSelectionsWithMetadata()\n    const required = new Set<string>()\n\n    for (const [collectionSlug, { selections: items }] of Object.entries(selectionsWithMeta)) {\n      if (collectionSlug === hierarchySlug) {\n        // For folders, add their allowedCollections to required set\n        for (const { metadata } of items) {\n          if (metadata.allowedCollections) {\n            for (const slug of metadata.allowedCollections) {\n              required.add(slug)\n            }\n          }\n        }\n      } else {\n        // For related items, add their collection slug\n        required.add(collectionSlug)\n      }\n    }\n\n    return required.size > 0 ? Array.from(required) : undefined\n  }, [getSelectionsWithMetadata, hierarchySlug])\n\n  // Folders being moved cannot be selected as destination (can't move into themselves)\n  const disabledIds = useMemo(() => {\n    const parentIds = selections[hierarchySlug]?.ids\n    return parentIds?.length ? new Set(parentIds) : undefined\n  }, [selections, hierarchySlug])\n\n  const [HierarchyDrawer, , { closeDrawer, openDrawer }] = useHierarchyDrawer({\n    disabledIds,\n    filterByCollection: requiredCollections,\n    hierarchyCollectionSlug: hierarchySlug,\n    Icon,\n  })\n\n  // Calculate total count and label\n  const { count, label } = useMemo(() => {\n    let totalCount = 0\n    const labels: string[] = []\n\n    for (const [collectionSlug, { ids }] of Object.entries(selections)) {\n      const config = collections.find((c) => c.slug === collectionSlug)\n\n      if (config && ids.length > 0) {\n        totalCount += ids.length\n        const collectionLabel = getTranslation(\n          ids.length > 1 ? config.labels.plural : config.labels.singular,\n          i18n,\n        )\n        labels.push(collectionLabel)\n      }\n    }\n\n    return {\n      count: totalCount,\n      label: labels.join(', '),\n    }\n  }, [selections, collections, i18n])\n\n  const hierarchyCollectionConfig = collections.find((c) => c.slug === hierarchySlug)\n  const parentFieldName = getParentFieldName(hierarchyCollectionConfig)\n\n  // Check if hierarchy has a valid parentFieldName\n  const canMove = parentFieldName !== undefined\n\n  const handleDrawerSave = useCallback(\n    ({ selections: selectionsMap }: { selections: Map<number | string, SelectionWithPath> }) => {\n      if (selectionsMap.size === 0) {\n        return\n      }\n\n      const firstSelection = selectionsMap.values().next().value\n      const destinationId = firstSelection?.id\n      const destinationTitle =\n        firstSelection?.path?.[firstSelection.path.length - 1]?.title || String(destinationId)\n\n      setDestination({ id: destinationId, title: destinationTitle })\n      openModal(confirmMoveDrawerSlug)\n    },\n    [openModal, confirmMoveDrawerSlug],\n  )\n\n  const handleMoveToRoot = useCallback(() => {\n    setDestination({ id: null, title: t('hierarchy:noParent') })\n    openModal(confirmMoveDrawerSlug)\n  }, [openModal, confirmMoveDrawerSlug, t])\n\n  const handleConfirmMove = useCallback(async () => {\n    if (destination === null) {\n      return\n    }\n\n    let totalMoved = 0\n    let hasErrors = false\n\n    try {\n      for (const [collectionSlug, { ids }] of Object.entries(selections)) {\n        if (ids.length === 0) {\n          continue\n        }\n\n        const queryString = qs.stringify(\n          {\n            locale,\n            where: { id: { in: ids } },\n          },\n          { addQueryPrefix: true },\n        )\n\n        const url = formatAdminURL({\n          apiRoute: api,\n          path: `/${collectionSlug}${queryString}`,\n        })\n\n        const response = await requests.patch(url, {\n          body: JSON.stringify({ [parentFieldName]: destination.id }),\n          headers: {\n            'Accept-Language': i18n.language,\n            'Content-Type': 'application/json',\n            credentials: 'include',\n          },\n        })\n\n        const json = await response.json()\n\n        if (response.status >= 400) {\n          hasErrors = true\n\n          if (json?.errors?.length > 0) {\n            toast.error(json.message || t('error:unknown'), {\n              description: json.errors\n                .map((error: { message: string }) => error.message)\n                .join('\\n'),\n            })\n          } else {\n            toast.error(json?.message || t('error:unknown'))\n          }\n\n          continue\n        }\n\n        const movedCount = json?.docs?.length || 0\n        totalMoved += movedCount\n\n        if (json?.errors?.length > 0) {\n          hasErrors = true\n          toast.error(json.message, {\n            description: json.errors.map((error: { message: string }) => error.message).join('\\n'),\n          })\n        }\n      }\n\n      if (totalMoved > 0) {\n        const successKey =\n          destination.id === null ? 'hierarchy:itemsMovedToRoot' : 'hierarchy:itemsMovedTo'\n\n        toast.success(\n          t(successKey, {\n            destination: destination.title,\n            title: label,\n          }),\n        )\n      }\n\n      if (!hasErrors || totalMoved > 0) {\n        closeDrawer()\n        onSuccess?.()\n      }\n    } catch (_err) {\n      toast.error(t('error:unknown'))\n    } finally {\n      setDestination(null)\n    }\n  }, [\n    closeDrawer,\n    destination,\n    selections,\n    parentFieldName,\n    locale,\n    api,\n    i18n,\n    t,\n    label,\n    onSuccess,\n  ])\n\n  if (count === 0 || !canMove) {\n    return null\n  }\n\n  return (\n    <React.Fragment>\n      <ListSelectionButton\n        aria-label={t('general:move')}\n        className={`${baseClass}__toggle`}\n        onClick={openDrawer}\n      >\n        {t('general:move')}\n      </ListSelectionButton>\n      <HierarchyDrawer\n        hasMany={false}\n        initialSelections={currentParentID ? [currentParentID] : null}\n        onMoveToRoot={handleMoveToRoot}\n        onSave={handleDrawerSave}\n        showMoveToRoot\n      />\n      <ConfirmationModal\n        body={\n          <p>\n            {destination?.id === null ? (\n              <Translation\n                elements={{\n                  '1': ({ children }) => <strong>{children}</strong>,\n                }}\n                i18nKey=\"hierarchy:moveItemsToRootConfirmation\"\n                t={t}\n                variables={{\n                  count,\n                  label,\n                }}\n              />\n            ) : (\n              <Translation\n                elements={{\n                  '1': ({ children }) => <strong>{children}</strong>,\n                }}\n                i18nKey=\"general:moveConfirm\"\n                t={t}\n                variables={{\n                  count,\n                  destination: destination?.title || '',\n                  label,\n                }}\n              />\n            )}\n          </p>\n        }\n        confirmingLabel={t('general:moving')}\n        heading={t('general:confirmMove')}\n        modalSlug={confirmMoveDrawerSlug}\n        onConfirm={handleConfirmMove}\n      />\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useModal","getTranslation","formatAdminURL","qs","React","useCallback","useMemo","useState","toast","useConfig","useDocumentSelection","useLocale","useTranslation","requests","ConfirmationModal","ListSelectionButton","Translation","useHierarchyModal","baseClass","getParentFieldName","hierarchyConfig","config","hierarchy","undefined","parentFieldName","MoveMany","currentParentID","hierarchySlug","Icon","modalPrefix","onSuccess","selections","i18n","t","code","locale","openModal","collections","routes","api","getSelectionsWithMetadata","destination","setDestination","confirmMoveDrawerSlug","requiredCollections","selectionsWithMeta","required","Set","collectionSlug","items","Object","entries","metadata","allowedCollections","slug","add","size","Array","from","disabledIds","parentIds","ids","length","HierarchyModal","closeModal","openHierarchyModal","filterByCollection","hierarchyCollectionSlug","count","label","totalCount","labels","find","c","collectionLabel","plural","singular","push","join","hierarchyCollectionConfig","canMove","handleDrawerSave","selectionsMap","firstSelection","values","next","value","destinationId","id","destinationTitle","path","title","String","handleMoveToRoot","handleConfirmMove","totalMoved","hasErrors","queryString","stringify","where","in","addQueryPrefix","url","apiRoute","response","patch","body","JSON","headers","language","credentials","json","status","errors","error","message","description","map","movedCount","docs","successKey","success","_err","_jsxs","Fragment","_jsx","className","onClick","hasMany","initialSelections","onMoveToRoot","onSave","showMoveToRoot","elements","1","children","i18nKey","variables","confirmingLabel","heading","modalSlug","onConfirm"],"sources":["../../../../src/elements/Hierarchy/MoveMany/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { formatAdminURL } from 'payload/shared'\nimport * as qs from 'qs-esm'\nimport React, { useCallback, useMemo, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport type { SelectionWithPath } from '../Modal/types.js'\n\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useDocumentSelection } from '../../../providers/DocumentSelection/index.js'\nimport { useLocale } from '../../../providers/Locale/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { requests } from '../../../utilities/api.js'\nimport { ConfirmationModal } from '../../ConfirmationModal/index.js'\nimport { ListSelectionButton } from '../../ListSelection/index.js'\nimport { Translation } from '../../Translation/index.js'\nimport { useHierarchyModal } from '../Modal/useHierarchyModal.js'\n\nexport const baseClass = 'move-many'\n\ntype MoveManyProps = {\n  /** Current parent ID - modal will open expanded to this location */\n  currentParentID?: null | number | string\n  /** The hierarchy collection slug (e.g., 'folders') */\n  hierarchySlug: string\n  /** Icon to display in the hierarchy modal */\n  Icon?: React.ReactNode\n  /** When multiple MoveMany components are rendered on the page, this will differentiate them */\n  modalPrefix?: string\n  /** Callback after successful move */\n  onSuccess?: () => void\n  /** Selections grouped by collection slug */\n  selections: Record<string, { ids: (number | string)[] }>\n}\n\n/**\n * Gets the parent field name from the hierarchy config.\n */\nfunction getParentFieldName(\n  hierarchyConfig: ClientCollectionConfig | undefined,\n): string | undefined {\n  const config =\n    hierarchyConfig?.hierarchy && typeof hierarchyConfig.hierarchy === 'object'\n      ? hierarchyConfig.hierarchy\n      : undefined\n  return config?.parentFieldName\n}\n\nexport function MoveMany({\n  currentParentID,\n  hierarchySlug,\n  Icon,\n  modalPrefix,\n  onSuccess,\n  selections,\n}: MoveManyProps) {\n  const { i18n, t } = useTranslation()\n  const { code: locale } = useLocale()\n  const { openModal } = useModal()\n  const {\n    config: {\n      collections,\n      routes: { api },\n    },\n  } = useConfig()\n\n  const { getSelectionsWithMetadata } = useDocumentSelection()\n\n  const [destination, setDestination] = useState<{\n    id: null | number | string\n    title: string\n  } | null>(null)\n\n  const confirmMoveDrawerSlug = `${modalPrefix ? `${modalPrefix}-` : ''}confirm-move-many`\n\n  // Compute required collections from selection metadata\n  // For related items: add their collection slug\n  // For folders: add their allowedCollections values\n  const requiredCollections = useMemo(() => {\n    const selectionsWithMeta = getSelectionsWithMetadata()\n    const required = new Set<string>()\n\n    for (const [collectionSlug, { selections: items }] of Object.entries(selectionsWithMeta)) {\n      if (collectionSlug === hierarchySlug) {\n        // For folders, add their allowedCollections to required set\n        for (const { metadata } of items) {\n          if (metadata.allowedCollections) {\n            for (const slug of metadata.allowedCollections) {\n              required.add(slug)\n            }\n          }\n        }\n      } else {\n        // For related items, add their collection slug\n        required.add(collectionSlug)\n      }\n    }\n\n    return required.size > 0 ? Array.from(required) : undefined\n  }, [getSelectionsWithMetadata, hierarchySlug])\n\n  // Folders being moved cannot be selected as destination (can't move into themselves)\n  const disabledIds = useMemo(() => {\n    const parentIds = selections[hierarchySlug]?.ids\n    return parentIds?.length ? new Set(parentIds) : undefined\n  }, [selections, hierarchySlug])\n\n  const [HierarchyModal, , { closeModal, openModal: openHierarchyModal }] = useHierarchyModal({\n    disabledIds,\n    filterByCollection: requiredCollections,\n    hierarchyCollectionSlug: hierarchySlug,\n    Icon,\n  })\n\n  // Calculate total count and label\n  const { count, label } = useMemo(() => {\n    let totalCount = 0\n    const labels: string[] = []\n\n    for (const [collectionSlug, { ids }] of Object.entries(selections)) {\n      const config = collections.find((c) => c.slug === collectionSlug)\n\n      if (config && ids.length > 0) {\n        totalCount += ids.length\n        const collectionLabel = getTranslation(\n          ids.length > 1 ? config.labels.plural : config.labels.singular,\n          i18n,\n        )\n        labels.push(collectionLabel)\n      }\n    }\n\n    return {\n      count: totalCount,\n      label: labels.join(', '),\n    }\n  }, [selections, collections, i18n])\n\n  const hierarchyCollectionConfig = collections.find((c) => c.slug === hierarchySlug)\n  const parentFieldName = getParentFieldName(hierarchyCollectionConfig)\n\n  // Check if hierarchy has a valid parentFieldName\n  const canMove = parentFieldName !== undefined\n\n  const handleDrawerSave = useCallback(\n    ({ selections: selectionsMap }: { selections: Map<number | string, SelectionWithPath> }) => {\n      if (selectionsMap.size === 0) {\n        return\n      }\n\n      const firstSelection = selectionsMap.values().next().value\n      const destinationId = firstSelection?.id\n      const destinationTitle =\n        firstSelection?.path?.[firstSelection.path.length - 1]?.title || String(destinationId)\n\n      setDestination({ id: destinationId, title: destinationTitle })\n      openModal(confirmMoveDrawerSlug)\n    },\n    [openModal, confirmMoveDrawerSlug],\n  )\n\n  const handleMoveToRoot = useCallback(() => {\n    setDestination({ id: null, title: t('hierarchy:noParent') })\n    openModal(confirmMoveDrawerSlug)\n  }, [openModal, confirmMoveDrawerSlug, t])\n\n  const handleConfirmMove = useCallback(async () => {\n    if (destination === null) {\n      return\n    }\n\n    let totalMoved = 0\n    let hasErrors = false\n\n    try {\n      for (const [collectionSlug, { ids }] of Object.entries(selections)) {\n        if (ids.length === 0) {\n          continue\n        }\n\n        const queryString = qs.stringify(\n          {\n            locale,\n            where: { id: { in: ids } },\n          },\n          { addQueryPrefix: true },\n        )\n\n        const url = formatAdminURL({\n          apiRoute: api,\n          path: `/${collectionSlug}${queryString}`,\n        })\n\n        const response = await requests.patch(url, {\n          body: JSON.stringify({ [parentFieldName]: destination.id }),\n          headers: {\n            'Accept-Language': i18n.language,\n            'Content-Type': 'application/json',\n            credentials: 'include',\n          },\n        })\n\n        const json = await response.json()\n\n        if (response.status >= 400) {\n          hasErrors = true\n\n          if (json?.errors?.length > 0) {\n            toast.error(json.message || t('error:unknown'), {\n              description: json.errors\n                .map((error: { message: string }) => error.message)\n                .join('\\n'),\n            })\n          } else {\n            toast.error(json?.message || t('error:unknown'))\n          }\n\n          continue\n        }\n\n        const movedCount = json?.docs?.length || 0\n        totalMoved += movedCount\n\n        if (json?.errors?.length > 0) {\n          hasErrors = true\n          toast.error(json.message, {\n            description: json.errors.map((error: { message: string }) => error.message).join('\\n'),\n          })\n        }\n      }\n\n      if (totalMoved > 0) {\n        const successKey =\n          destination.id === null ? 'hierarchy:itemsMovedToRoot' : 'hierarchy:itemsMovedTo'\n\n        toast.success(\n          t(successKey, {\n            destination: destination.title,\n            title: label,\n          }),\n        )\n      }\n\n      if (!hasErrors || totalMoved > 0) {\n        closeModal()\n        onSuccess?.()\n      }\n    } catch (_err) {\n      toast.error(t('error:unknown'))\n    } finally {\n      setDestination(null)\n    }\n  }, [closeModal, destination, selections, parentFieldName, locale, api, i18n, t, label, onSuccess])\n\n  if (count === 0 || !canMove) {\n    return null\n  }\n\n  return (\n    <React.Fragment>\n      <ListSelectionButton\n        aria-label={t('general:move')}\n        className={`${baseClass}__toggle`}\n        onClick={openHierarchyModal}\n      >\n        {t('general:move')}\n      </ListSelectionButton>\n      <HierarchyModal\n        hasMany={false}\n        initialSelections={currentParentID ? [currentParentID] : null}\n        onMoveToRoot={handleMoveToRoot}\n        onSave={handleDrawerSave}\n        showMoveToRoot\n      />\n      <ConfirmationModal\n        body={\n          <p>\n            {destination?.id === null ? (\n              <Translation\n                elements={{\n                  '1': ({ children }) => <strong>{children}</strong>,\n                }}\n                i18nKey=\"hierarchy:moveItemsToRootConfirmation\"\n                t={t}\n                variables={{\n                  count,\n                  label,\n                }}\n              />\n            ) : (\n              <Translation\n                elements={{\n                  '1': ({ children }) => <strong>{children}</strong>,\n                }}\n                i18nKey=\"general:moveConfirm\"\n                t={t}\n                variables={{\n                  count,\n                  destination: destination?.title || '',\n                  label,\n                }}\n              />\n            )}\n          </p>\n        }\n        confirmingLabel={t('general:moving')}\n        heading={t('general:confirmMove')}\n        modalSlug={confirmMoveDrawerSlug}\n        onConfirm={handleConfirmMove}\n      />\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/LivePreview/Toolbar/SizeInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/LivePreview/Toolbar/SizeInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiC,MAAM,OAAO,CAAA;AAKrD,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC3C,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAA;CACjB,CA0FA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/LivePreview/Toolbar/SizeInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiC,MAAM,OAAO,CAAA;AAKrD,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC3C,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAA;CACjB,CA2FA,CAAA"}

package/dist/elements/LivePreview/Toolbar/SizeInput/index.js

@@ -129,6 +129,7 @@ export const PreviewFrameSizeInput = props => {
       onStep: handleStep,
       path: axis === "x" ? "live-preview-width" : "live-preview-height",
       prefix: axis === "x" ? "W" : "H",
+      size: "medium",
       step: 1,
       value: internalState || 0
     });

package/dist/elements/LivePreview/Toolbar/SizeInput/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useEffect","NumberInput","useLivePreviewContext","useTranslation","baseClass","PreviewFrameSizeInput","props","$","axis","breakpoint","measuredDeviceSize","setBreakpoint","setSize","size","zoom","t","internalState","setInternalState","useState","width","height","t0","value","newValue","Number","type","toFixed","handleChange","t1","direction","currentValue","newValue_0","handleStep","t2","t3","t4","t5","e","target","_jsx","ariaLabel","className","min","onChange","onStep","path","prefix","step"],"sources":["../../../../../src/elements/LivePreview/Toolbar/SizeInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect } from 'react'\n\nimport { NumberInput } from '../../../../fields/Number/index.js'\nimport { useLivePreviewContext } from '../../../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'toolbar-input'\n\nexport const PreviewFrameSizeInput: React.FC<{\n  axis?: 'x' | 'y'\n}> = (props) => {\n  const { axis } = props\n\n  const { breakpoint, measuredDeviceSize, setBreakpoint, setSize, size, zoom } =\n    useLivePreviewContext()\n\n  const { t } = useTranslation()\n\n  const [internalState, setInternalState] = React.useState<number>(\n    (axis === 'x' ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0,\n  )\n\n  // when the input is changed manually, we need to set the breakpoint as `custom`\n  // this will then allow us to set an explicit width and height\n  const handleChange = useCallback(\n    (value: string) => {\n      let newValue = Number(value)\n\n      if (newValue < 0) {\n        newValue = 0\n      }\n\n      setInternalState(newValue)\n      setBreakpoint('custom')\n\n      // be sure to set _both_ axis values to so that the other axis doesn't fallback to 0 on initial change\n      // this is because the `responsive` size is '100%' in CSS, and `0` in initial state\n      setSize({\n        type: 'reset',\n        value: {\n          height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,\n          width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom,\n        },\n      })\n    },\n    [axis, setBreakpoint, measuredDeviceSize, setSize, zoom],\n  )\n\n  const handleStep = useCallback(\n    (direction: 'down' | 'up') => {\n      const currentValue = internalState || 0\n      let newValue = direction === 'up' ? currentValue + 1 : currentValue - 1\n\n      if (newValue < 0) {\n        newValue = 0\n      }\n\n      setInternalState(newValue)\n      setBreakpoint('custom')\n\n      setSize({\n        type: 'reset',\n        value: {\n          height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,\n          width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom,\n        },\n      })\n    },\n    [axis, internalState, measuredDeviceSize, setBreakpoint, setSize, zoom],\n  )\n\n  // if the breakpoint is `responsive` then the device's div will have `100%` width and height\n  // so we need to take the measurements provided by `actualDeviceSize` and sync internal state\n  useEffect(() => {\n    if (breakpoint === 'responsive' && measuredDeviceSize) {\n      if (axis === 'x') {\n        setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom)\n      } else {\n        setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom)\n      }\n    }\n\n    if (breakpoint !== 'responsive' && size) {\n      setInternalState(axis === 'x' ? size.width : size.height)\n    }\n  }, [breakpoint, axis, measuredDeviceSize, size, zoom])\n\n  return (\n    <NumberInput\n      ariaLabel={axis === 'x' ? t('upload:width') : t('upload:height')}\n      className={baseClass}\n      min={0}\n      onChange={(e) => handleChange(e.target.value)}\n      onStep={handleStep}\n      path={axis === 'x' ? 'live-preview-width' : 'live-preview-height'}\n      prefix={axis === 'x' ? 'W' : 'H'}\n      step={1}\n      value={internalState || 0}\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,WAAW,EAAEC,SAAS,QAAQ;AAE9C,SAASC,WAAW,QAAQ;AAC5B,SAASC,qBAAqB,QAAQ;AACtC,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,qBAAA,GAERC,KAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EACH;IAAAW;EAAA,IAAiBF,KAAA;EAEjB;IAAAG,UAAA;IAAAC,kBAAA;IAAAC,aAAA;IAAAC,OAAA;IAAAC,IAAA;IAAAC;EAAA,IACEZ,qBAAA;EAEF;IAAAa;EAAA,IAAcZ,cAAA;EAEd,OAAAa,aAAA,EAAAC,gBAAA,IAA0CnB,KAAA,CAAAoB,QAAA,CACxC,CAACV,IAAA,KAAS,MAAME,kBAAA,EAAAS,KAAA,GAA4BT,kBAAA,EAAAU,MAAyB,MAAM;EAAA,IAAAC,EAAA;EAAA,IAAAd,CAAA,QAAAC,IAAA,IAAAD,CAAA,QAAAG,kBAAA,EAAAU,MAAA,IAAAb,CAAA,QAAAG,kBAAA,EAAAS,KAAA,IAAAZ,CAAA,QAAAI,aAAA,IAAAJ,CAAA,QAAAK,OAAA,IAAAL,CAAA,QAAAO,IAAA;IAM3EO,EAAA,GAAAC,KAAA;MACE,IAAAC,QAAA,GAAeC,MAAA,CAAOF,KAAA;MAAA,IAElBC,QAAA,IAAW;QACbA,QAAA,CAAAA,CAAA,CAAAA,CAAA;MAAA;MAGFN,gBAAA,CAAiBM,QAAA;MACjBZ,aAAA,CAAc;MAIdC,OAAA;QAAAa,IAAA,EACQ;QAAAH,KAAA;UAAAF,MAAA,EAEIZ,IAAA,KAAS,MAAMe,QAAA,GAAWC,MAAA,CAAOd,kBAAA,EAAAU,MAAA,CAAAM,OAAA,GAAmC,IAAMZ,IAAA;UAAAK,KAAA,EAC3EX,IAAA,KAAS,MAAMe,QAAA,GAAWC,MAAA,CAAOd,kBAAA,EAAAS,KAAA,CAAAO,OAAA,GAAkC,IAAMZ;QAAA;MAAA,CAEpF;IAAA;IACFP,CAAA,MAAAC,IAAA;IAAAD,CAAA,MAAAG,kBAAA,EAAAU,MAAA;IAAAb,CAAA,MAAAG,kBAAA,EAAAS,KAAA;IAAAZ,CAAA,MAAAI,aAAA;IAAAJ,CAAA,MAAAK,OAAA;IAAAL,CAAA,MAAAO,IAAA;IAAAP,CAAA,MAAAc,EAAA;EAAA;IAAAA,EAAA,GAAAd,CAAA;EAAA;EApBF,MAAAoB,YAAA,GAAqBN,EAqBqC;EAAA,IAAAO,EAAA;EAAA,IAAArB,CAAA,QAAAC,IAAA,IAAAD,CAAA,QAAAS,aAAA,IAAAT,CAAA,QAAAG,kBAAA,EAAAU,MAAA,IAAAb,CAAA,SAAAG,kBAAA,EAAAS,KAAA,IAAAZ,CAAA,SAAAI,aAAA,IAAAJ,CAAA,SAAAK,OAAA,IAAAL,CAAA,SAAAO,IAAA;IAIxDc,EAAA,GAAAC,SAAA;MACE,MAAAC,YAAA,GAAqBd,aAAA,KAAiB;MACtC,IAAAe,UAAA,GAAeF,SAAA,KAAc,OAAOC,YAAA,IAAe,GAAIA,YAAA,IAAe;MAAA,IAElEP,UAAA,IAAW;QACbA,UAAA,CAAAA,CAAA,CAAAA,CAAA;MAAA;MAGFN,gBAAA,CAAiBM,UAAA;MACjBZ,aAAA,CAAc;MAEdC,OAAA;QAAAa,IAAA,EACQ;QAAAH,KAAA;UAAAF,MAAA,EAEIZ,IAAA,KAAS,MAAMe,UAAA,GAAWC,MAAA,CAAOd,kBAAA,EAAAU,MAAA,CAAAM,OAAA,GAAmC,IAAMZ,IAAA;UAAAK,KAAA,EAC3EX,IAAA,KAAS,MAAMe,UAAA,GAAWC,MAAA,CAAOd,kBAAA,EAAAS,KAAA,CAAAO,OAAA,GAAkC,IAAMZ;QAAA;MAAA,CAEpF;IAAA;IACFP,CAAA,MAAAC,IAAA;IAAAD,CAAA,MAAAS,aAAA;IAAAT,CAAA,MAAAG,kBAAA,EAAAU,MAAA;IAAAb,CAAA,OAAAG,kBAAA,EAAAS,KAAA;IAAAZ,CAAA,OAAAI,aAAA;IAAAJ,CAAA,OAAAK,OAAA;IAAAL,CAAA,OAAAO,IAAA;IAAAP,CAAA,OAAAqB,EAAA;EAAA;IAAAA,EAAA,GAAArB,CAAA;EAAA;EAnBF,MAAAyB,UAAA,GAAmBJ,EAoBsD;EAAA,IAAAK,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAA3B,CAAA,SAAAC,IAAA,IAAAD,CAAA,SAAAE,UAAA,IAAAF,CAAA,SAAAG,kBAAA,IAAAH,CAAA,SAAAM,IAAA,IAAAN,CAAA,SAAAO,IAAA;IAK/DmB,EAAA,GAAAA,CAAA;MAAA,IACJxB,UAAA,KAAe,gBAAgBC,kBAAA;QAAA,IAC7BF,IAAA,KAAS;UACXS,gBAAA,CAAiBO,MAAA,CAAOd,kBAAA,CAAAS,KAAA,CAAAO,OAAA,EAAiC,KAAMZ,IAAA;QAAA;UAE/DG,gBAAA,CAAiBO,MAAA,CAAOd,kBAAA,CAAAU,MAAA,CAAAM,OAAA,EAAkC,KAAMZ,IAAA;QAAA;MAAA;MAAA,IAIhEL,UAAA,KAAe,gBAAgBI,IAAA;QACjCI,gBAAA,CAAiBT,IAAA,KAAS,MAAMK,IAAA,CAAAM,KAAA,GAAaN,IAAA,CAAAO,MAAW;MAAA;IAAA;IAEzDc,EAAA,IAACzB,UAAA,EAAYD,IAAA,EAAME,kBAAA,EAAoBG,IAAA,EAAMC,IAAA;IAAKP,CAAA,OAAAC,IAAA;IAAAD,CAAA,OAAAE,UAAA;IAAAF,CAAA,OAAAG,kBAAA;IAAAH,CAAA,OAAAM,IAAA;IAAAN,CAAA,OAAAO,IAAA;IAAAP,CAAA,OAAA0B,EAAA;IAAA1B,CAAA,OAAA2B,EAAA;EAAA;IAAAD,EAAA,GAAA1B,CAAA;IAAA2B,EAAA,GAAA3B,CAAA;EAAA;EAZrDP,SAAA,CAAUiC,EAYV,EAAGC,EAAkD;EAAA,IAAAC,EAAA;EAAA,IAAA5B,CAAA,SAAAC,IAAA,IAAAD,CAAA,SAAAoB,YAAA,IAAApB,CAAA,SAAAyB,UAAA,IAAAzB,CAAA,SAAAS,aAAA,IAAAT,CAAA,SAAAQ,CAAA;IAAA,IAAAqB,EAAA;IAAA,IAAA7B,CAAA,SAAAoB,YAAA;MAOvCS,EAAA,GAAAC,CAAA,IAAOV,YAAA,CAAaU,CAAA,CAAAC,MAAA,CAAAhB,KAAc;MAAAf,CAAA,OAAAoB,YAAA;MAAApB,CAAA,OAAA6B,EAAA;IAAA;MAAAA,EAAA,GAAA7B,CAAA;IAAA;IAJ9C4B,EAAA,GAAAI,IAAA,CAAAtC,WAAA;MAAAuC,SAAA,EACahC,IAAA,KAAS,MAAMO,CAAA,CAAE,kBAAkBA,CAAA,CAAE;MAAA0B,SAAA,EAAArC,SAAA;MAAAsC,GAAA;MAAAC,QAAA,EAGtCP,EAAkC;MAAAQ,MAAA,EACpCZ,UAAA;MAAAa,IAAA,EACFrC,IAAA,KAAS,MAAM,uBAAuB;MAAAsC,MAAA,EACpCtC,IAAA,KAAS,MAAM,MAAM;MAAAuC,IAAA;MAAAzB,KAAA,EAEtBN,aAAA;IAAiB,C;;;;;;;;;;SAT1BmB,E;CAYJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useEffect","NumberInput","useLivePreviewContext","useTranslation","baseClass","PreviewFrameSizeInput","props","$","axis","breakpoint","measuredDeviceSize","setBreakpoint","setSize","size","zoom","t","internalState","setInternalState","useState","width","height","t0","value","newValue","Number","type","toFixed","handleChange","t1","direction","currentValue","newValue_0","handleStep","t2","t3","t4","t5","e","target","_jsx","ariaLabel","className","min","onChange","onStep","path","prefix","step"],"sources":["../../../../../src/elements/LivePreview/Toolbar/SizeInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect } from 'react'\n\nimport { NumberInput } from '../../../../fields/Number/index.js'\nimport { useLivePreviewContext } from '../../../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'toolbar-input'\n\nexport const PreviewFrameSizeInput: React.FC<{\n  axis?: 'x' | 'y'\n}> = (props) => {\n  const { axis } = props\n\n  const { breakpoint, measuredDeviceSize, setBreakpoint, setSize, size, zoom } =\n    useLivePreviewContext()\n\n  const { t } = useTranslation()\n\n  const [internalState, setInternalState] = React.useState<number>(\n    (axis === 'x' ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0,\n  )\n\n  // when the input is changed manually, we need to set the breakpoint as `custom`\n  // this will then allow us to set an explicit width and height\n  const handleChange = useCallback(\n    (value: string) => {\n      let newValue = Number(value)\n\n      if (newValue < 0) {\n        newValue = 0\n      }\n\n      setInternalState(newValue)\n      setBreakpoint('custom')\n\n      // be sure to set _both_ axis values to so that the other axis doesn't fallback to 0 on initial change\n      // this is because the `responsive` size is '100%' in CSS, and `0` in initial state\n      setSize({\n        type: 'reset',\n        value: {\n          height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,\n          width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom,\n        },\n      })\n    },\n    [axis, setBreakpoint, measuredDeviceSize, setSize, zoom],\n  )\n\n  const handleStep = useCallback(\n    (direction: 'down' | 'up') => {\n      const currentValue = internalState || 0\n      let newValue = direction === 'up' ? currentValue + 1 : currentValue - 1\n\n      if (newValue < 0) {\n        newValue = 0\n      }\n\n      setInternalState(newValue)\n      setBreakpoint('custom')\n\n      setSize({\n        type: 'reset',\n        value: {\n          height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,\n          width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom,\n        },\n      })\n    },\n    [axis, internalState, measuredDeviceSize, setBreakpoint, setSize, zoom],\n  )\n\n  // if the breakpoint is `responsive` then the device's div will have `100%` width and height\n  // so we need to take the measurements provided by `actualDeviceSize` and sync internal state\n  useEffect(() => {\n    if (breakpoint === 'responsive' && measuredDeviceSize) {\n      if (axis === 'x') {\n        setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom)\n      } else {\n        setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom)\n      }\n    }\n\n    if (breakpoint !== 'responsive' && size) {\n      setInternalState(axis === 'x' ? size.width : size.height)\n    }\n  }, [breakpoint, axis, measuredDeviceSize, size, zoom])\n\n  return (\n    <NumberInput\n      ariaLabel={axis === 'x' ? t('upload:width') : t('upload:height')}\n      className={baseClass}\n      min={0}\n      onChange={(e) => handleChange(e.target.value)}\n      onStep={handleStep}\n      path={axis === 'x' ? 'live-preview-width' : 'live-preview-height'}\n      prefix={axis === 'x' ? 'W' : 'H'}\n      size=\"medium\"\n      step={1}\n      value={internalState || 0}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/LivePreview/Window/index.css

@@ -1,4 +1,10 @@
 @layer payload-default {
+  .collection-edit:has(.live-preview-window--is-expanded) {
+    .document-fields {
+      width: 0;
+    }
+  }
+
   .live-preview-window {
     background-color: var(--color-bg);
     display: none;

package/dist/elements/Popup/PopupTrigger/index.d.ts

@@ -10,6 +10,7 @@ export type PopupButtonRenderProps = {
 export type PopupTriggerProps = {
     active: boolean;
     button?: React.ReactNode;
+    buttonAriaLabel?: string;
     buttonType: 'custom' | 'default';
     className?: string;
     disabled?: boolean;

package/dist/elements/Popup/PopupTrigger/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,OAAO,CAAA;IACf,eAAe,EAAE,OAAO,CAAA;IACxB,eAAe,EAAE,IAAI,CAAA;IACrB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAChC,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAA;CACtC,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,OAAO,CAAA;IACf,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,UAAU,EAAE,QAAQ,GAAG,SAAS,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAA;IACjE,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,WAAW,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3D,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA6EpD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,OAAO,CAAA;IACf,eAAe,EAAE,OAAO,CAAA;IACxB,eAAe,EAAE,IAAI,CAAA;IACrB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAChC,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAA;CACtC,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,OAAO,CAAA;IACf,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,EAAE,QAAQ,GAAG,SAAS,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAA;IACjE,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,WAAW,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3D,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgFpD,CAAA"}

package/dist/elements/Popup/PopupTrigger/index.js

@@ -8,6 +8,7 @@ export const PopupTrigger = props => {
   const {
     active,
     button,
+    buttonAriaLabel,
     buttonType,
     className,
     disabled,
@@ -40,6 +41,7 @@ export const PopupTrigger = props => {
   }
   if (buttonType === 'custom') {
     return /*#__PURE__*/_jsx("div", {
+      "aria-label": buttonAriaLabel,
       className: classes,
       onClick: handleClick,
       onKeyDown: handleKeyDown,
@@ -49,6 +51,7 @@ export const PopupTrigger = props => {
     });
   }
   return /*#__PURE__*/_jsx("button", {
+    "aria-label": buttonAriaLabel,
     className: classes,
     disabled: disabled,
     onClick: handleClick,

package/dist/elements/Popup/PopupTrigger/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","baseClass","PopupTrigger","props","active","button","buttonType","className","disabled","noBackground","renderButton","setActive","size","classes","filter","Boolean","join","handleClick","handleKeyDown","e","key","preventDefault","_jsx","_Fragment","onClick","onKeyDown","role","tabIndex","type"],"sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'popup-button'\n\nexport type PopupButtonRenderProps = {\n  active: boolean\n  'aria-expanded': boolean\n  'aria-haspopup': true\n  onClick: React.MouseEventHandler\n  onKeyDown: React.KeyboardEventHandler\n}\n\nexport type PopupTriggerProps = {\n  active: boolean\n  button?: React.ReactNode\n  buttonType: 'custom' | 'default'\n  className?: string\n  disabled?: boolean\n  noBackground?: boolean\n  renderButton?: (props: PopupButtonRenderProps) => React.ReactNode\n  setActive: (active: boolean, viaKeyboard?: boolean) => void\n  size?: 'large' | 'medium'\n}\n\nexport const PopupTrigger: React.FC<PopupTriggerProps> = (props) => {\n  const {\n    active,\n    button,\n    buttonType,\n    className,\n    disabled,\n    noBackground,\n    renderButton,\n    setActive,\n    size,\n  } = props\n\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}--${buttonType}`,\n    !noBackground && `${baseClass}--background`,\n    size && `${baseClass}--size-${size}`,\n    disabled && `${baseClass}--disabled`,\n    active && `${baseClass}--active`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const handleClick: React.MouseEventHandler = () => {\n    setActive(!active, false)\n  }\n\n  const handleKeyDown: React.KeyboardEventHandler = (e) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      setActive(!active, true)\n    }\n  }\n\n  // Render prop mode: consumer provides the button, we provide the handlers\n  if (renderButton) {\n    return (\n      <>\n        {renderButton({\n          active,\n          'aria-expanded': active,\n          'aria-haspopup': true,\n          onClick: handleClick,\n          onKeyDown: handleKeyDown,\n        })}\n      </>\n    )\n  }\n\n  if (buttonType === 'custom') {\n    return (\n      <div\n        className={classes}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        role=\"button\"\n        tabIndex={0}\n      >\n        {button}\n      </div>\n    )\n  }\n\n  return (\n    <button\n      className={classes}\n      disabled={disabled}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      tabIndex={0}\n      type=\"button\"\n    >\n      {button}\n    </button>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAsBlB,OAAO,MAAMC,YAAA,GAA6CC,KAAA;EACxD,MAAM;IACJC,MAAM;IACNC,MAAM;IACNC,UAAU;IACVC,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,YAAY;IACZC,SAAS;IACTC;EAAI,CACL,GAAGT,KAAA;EAEJ,MAAMU,OAAA,GAAU,CACdZ,SAAA,EACAM,SAAA,EACA,GAAGN,SAAA,KAAcK,UAAA,EAAY,EAC7B,CAACG,YAAA,IAAgB,GAAGR,SAAA,cAAuB,EAC3CW,IAAA,IAAQ,GAAGX,SAAA,UAAmBW,IAAA,EAAM,EACpCJ,QAAA,IAAY,GAAGP,SAAA,YAAqB,EACpCG,MAAA,IAAU,GAAGH,SAAA,UAAmB,CACjC,CACEa,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,MAAMC,WAAA,GAAuCA,CAAA;IAC3CN,SAAA,CAAU,CAACP,MAAA,EAAQ;EACrB;EAEA,MAAMc,aAAA,GAA6CC,CAAA;IACjD,IAAIA,CAAA,CAAEC,GAAG,KAAK,WAAWD,CAAA,CAAEC,GAAG,KAAK,KAAK;MACtCD,CAAA,CAAEE,cAAc;MAChBV,SAAA,CAAU,CAACP,MAAA,EAAQ;IACrB;EACF;EAEA;EACA,IAAIM,YAAA,EAAc;IAChB,oBACEY,IAAA,CAAAC,SAAA;gBACGb,YAAA,CAAa;QACZN,MAAA;QACA,iBAAiBA,MAAA;QACjB,iBAAiB;QACjBoB,OAAA,EAASP,WAAA;QACTQ,SAAA,EAAWP;MACb;;EAGN;EAEA,IAAIZ,UAAA,KAAe,UAAU;IAC3B,oBACEgB,IAAA,CAAC;MACCf,SAAA,EAAWM,OAAA;MACXW,OAAA,EAASP,WAAA;MACTQ,SAAA,EAAWP,aAAA;MACXQ,IAAA,EAAK;MACLC,QAAA,EAAU;gBAETtB;;EAGP;EAEA,oBACEiB,IAAA,CAAC;IACCf,SAAA,EAAWM,OAAA;IACXL,QAAA,EAAUA,QAAA;IACVgB,OAAA,EAASP,WAAA;IACTQ,SAAA,EAAWP,aAAA;IACXS,QAAA,EAAU;IACVC,IAAA,EAAK;cAEJvB;;AAGP","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","baseClass","PopupTrigger","props","active","button","buttonAriaLabel","buttonType","className","disabled","noBackground","renderButton","setActive","size","classes","filter","Boolean","join","handleClick","handleKeyDown","e","key","preventDefault","_jsx","_Fragment","onClick","onKeyDown","role","tabIndex","type"],"sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'popup-button'\n\nexport type PopupButtonRenderProps = {\n  active: boolean\n  'aria-expanded': boolean\n  'aria-haspopup': true\n  onClick: React.MouseEventHandler\n  onKeyDown: React.KeyboardEventHandler\n}\n\nexport type PopupTriggerProps = {\n  active: boolean\n  button?: React.ReactNode\n  buttonAriaLabel?: string\n  buttonType: 'custom' | 'default'\n  className?: string\n  disabled?: boolean\n  noBackground?: boolean\n  renderButton?: (props: PopupButtonRenderProps) => React.ReactNode\n  setActive: (active: boolean, viaKeyboard?: boolean) => void\n  size?: 'large' | 'medium'\n}\n\nexport const PopupTrigger: React.FC<PopupTriggerProps> = (props) => {\n  const {\n    active,\n    button,\n    buttonAriaLabel,\n    buttonType,\n    className,\n    disabled,\n    noBackground,\n    renderButton,\n    setActive,\n    size,\n  } = props\n\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}--${buttonType}`,\n    !noBackground && `${baseClass}--background`,\n    size && `${baseClass}--size-${size}`,\n    disabled && `${baseClass}--disabled`,\n    active && `${baseClass}--active`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const handleClick: React.MouseEventHandler = () => {\n    setActive(!active, false)\n  }\n\n  const handleKeyDown: React.KeyboardEventHandler = (e) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      setActive(!active, true)\n    }\n  }\n\n  // Render prop mode: consumer provides the button, we provide the handlers\n  if (renderButton) {\n    return (\n      <>\n        {renderButton({\n          active,\n          'aria-expanded': active,\n          'aria-haspopup': true,\n          onClick: handleClick,\n          onKeyDown: handleKeyDown,\n        })}\n      </>\n    )\n  }\n\n  if (buttonType === 'custom') {\n    return (\n      <div\n        aria-label={buttonAriaLabel}\n        className={classes}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        role=\"button\"\n        tabIndex={0}\n      >\n        {button}\n      </div>\n    )\n  }\n\n  return (\n    <button\n      aria-label={buttonAriaLabel}\n      className={classes}\n      disabled={disabled}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      tabIndex={0}\n      type=\"button\"\n    >\n      {button}\n    </button>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAuBlB,OAAO,MAAMC,YAAA,GAA6CC,KAAA;EACxD,MAAM;IACJC,MAAM;IACNC,MAAM;IACNC,eAAe;IACfC,UAAU;IACVC,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,YAAY;IACZC,SAAS;IACTC;EAAI,CACL,GAAGV,KAAA;EAEJ,MAAMW,OAAA,GAAU,CACdb,SAAA,EACAO,SAAA,EACA,GAAGP,SAAA,KAAcM,UAAA,EAAY,EAC7B,CAACG,YAAA,IAAgB,GAAGT,SAAA,cAAuB,EAC3CY,IAAA,IAAQ,GAAGZ,SAAA,UAAmBY,IAAA,EAAM,EACpCJ,QAAA,IAAY,GAAGR,SAAA,YAAqB,EACpCG,MAAA,IAAU,GAAGH,SAAA,UAAmB,CACjC,CACEc,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,MAAMC,WAAA,GAAuCA,CAAA;IAC3CN,SAAA,CAAU,CAACR,MAAA,EAAQ;EACrB;EAEA,MAAMe,aAAA,GAA6CC,CAAA;IACjD,IAAIA,CAAA,CAAEC,GAAG,KAAK,WAAWD,CAAA,CAAEC,GAAG,KAAK,KAAK;MACtCD,CAAA,CAAEE,cAAc;MAChBV,SAAA,CAAU,CAACR,MAAA,EAAQ;IACrB;EACF;EAEA;EACA,IAAIO,YAAA,EAAc;IAChB,oBACEY,IAAA,CAAAC,SAAA;gBACGb,YAAA,CAAa;QACZP,MAAA;QACA,iBAAiBA,MAAA;QACjB,iBAAiB;QACjBqB,OAAA,EAASP,WAAA;QACTQ,SAAA,EAAWP;MACb;;EAGN;EAEA,IAAIZ,UAAA,KAAe,UAAU;IAC3B,oBACEgB,IAAA,CAAC;MACC,cAAYjB,eAAA;MACZE,SAAA,EAAWM,OAAA;MACXW,OAAA,EAASP,WAAA;MACTQ,SAAA,EAAWP,aAAA;MACXQ,IAAA,EAAK;MACLC,QAAA,EAAU;gBAETvB;;EAGP;EAEA,oBACEkB,IAAA,CAAC;IACC,cAAYjB,eAAA;IACZE,SAAA,EAAWM,OAAA;IACXL,QAAA,EAAUA,QAAA;IACVgB,OAAA,EAASP,WAAA;IACTQ,SAAA,EAAWP,aAAA;IACXS,QAAA,EAAU;IACVC,IAAA,EAAK;cAEJxB;;AAGP","ignoreList":[]}

package/dist/elements/Popup/index.d.ts

@@ -6,6 +6,12 @@ export type PopupProps = {
     backgroundColor?: CSSProperties['backgroundColor'];
     boundingRef?: React.RefObject<HTMLElement>;
     button?: React.ReactNode;
+    /**
+     * Accessible label for the trigger button.
+     * Necessary when the button has an icon-only content,
+     * so the button has an accessible name for screen readers.
+     */
+    buttonAriaLabel?: string;
     /**
      * The class name to apply to the button that triggers the popup.
      */

package/dist/elements/Popup/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Popup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,SAAS,MAAM,4BAA4B,CAAA;AAEvD,OAAO,KAAuE,MAAM,OAAO,CAAA;AAK3F,OAAO,aAAa,CAAA;AA4CpB,MAAM,MAAM,UAAU,GAAG;IACvB,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC/B,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACjC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC7C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACzD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QACrB,MAAM,EAAE,OAAO,CAAA;QACf,eAAe,EAAE,OAAO,CAAA;QACxB,eAAe,EAAE,IAAI,CAAA;QACrB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAA;QAChC,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAA;KACtC,KAAK,KAAK,CAAC,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,aAAa,GAAG,OAAO,GAAG,OAAO,CAAA;IACxC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;IACjC;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACjC,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAoftC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Popup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,SAAS,MAAM,4BAA4B,CAAA;AAEvD,OAAO,KAAuE,MAAM,OAAO,CAAA;AAK3F,OAAO,aAAa,CAAA;AA4CpB,MAAM,MAAM,UAAU,GAAG;IACvB,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC/B,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACjC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC7C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACzD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QACrB,MAAM,EAAE,OAAO,CAAA;QACf,eAAe,EAAE,OAAO,CAAA;QACxB,eAAe,EAAE,IAAI,CAAA;QACrB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAA;QAChC,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAA;KACtC,KAAK,KAAK,CAAC,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,aAAa,GAAG,OAAO,GAAG,OAAO,CAAA;IACxC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;IACjC;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACjC,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAsftC,CAAA"}

package/dist/elements/Popup/index.js

@@ -38,6 +38,7 @@ export const Popup = props => {
   const {
     id,
     button,
+    buttonAriaLabel,
     buttonClassName,
     buttonSize,
     buttonType = 'default',
@@ -384,6 +385,7 @@ export const Popup = props => {
   const Trigger = /*#__PURE__*/_jsx(PopupTrigger, {
     active: active,
     button: button,
+    buttonAriaLabel: buttonAriaLabel,
     buttonType: buttonType,
     className: buttonClassName,
     disabled: disabled,