npm - @payloadcms/ui - Versions diffs - 4.0.0-canary.0 → 4.0.0-canary.1 - Mend

@payloadcms/ui 4.0.0-canary.0 → 4.0.0-canary.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1021) hide show

package/dist/elements/GroupByControl/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["isFieldDisabled","React","useCallback","useMemo","useRef","CheckIcon","ChevronIcon","TrashIcon","XIcon","useAuth","useListQuery","useTranslation","reduceFieldsToOptions","Button","Popup","PopupList","baseClass","supportedFieldTypes","GroupByControl","collectionSlug","fields","i18n","t","permissions","listQuery","closeRef","groupByRaw","query","groupBy","groupByFieldName","replace","fieldPermissions","collections","reducedFields","filteredFields","filter","field","fieldPath","includes","type","groupByField","find","isActive","Boolean","handleFieldSelect","value","refineListData","startsWith","page","handleClear","current","handleDirectionSelect","directionValue","triggerLabel","label","_jsx","className","horizontalAlign","portalClassName","render","close","_jsxs","buttonStyle","icon","onClick","round","size","closeFieldPopup","ButtonGroup","map","i","active","undefined","renderButton","onKeyDown","direction","verticalAlign","disabled","closeSortPopup","RadioGroup","RadioGroupItem","join","ariaProps","extraButtonProps","id","selected","theme"],"sources":["../../../src/elements/GroupByControl/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, Field, SanitizedCollectionConfig } from 'payload'\n\nimport { isFieldDisabled } from 'payload/shared'\nimport React, { useCallback, useMemo, useRef } from 'react'\n\nimport { CheckIcon } from '../../icons/Check/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { TrashIcon } from '../../icons/Trash/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { reduceFieldsToOptions } from '../../utilities/reduceFieldsToOptions.js'\nimport { Button } from '../Button/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './index.css'\n\nexport type GroupByControlProps = {\n readonly collectionSlug: SanitizedCollectionConfig['slug']\n readonly fields: ClientField[]\n}\n\nconst baseClass = 'group-by-control'\n\n/*\n Supported field types for group by functionality.\n */\nconst supportedFieldTypes: Field['type'][] = [\n 'text',\n 'textarea',\n 'number',\n 'select',\n 'relationship',\n 'date',\n 'checkbox',\n 'radio',\n 'email',\n 'upload',\n]\n\nexport const GroupByControl: React.FC<GroupByControlProps> = ({ collectionSlug, fields }) => {\n const { i18n, t } = useTranslation()\n const { permissions } = useAuth()\n const listQuery = useListQuery()\n const closeRef = useRef<(() => void) \| null>(null)\n\n const groupByRaw = listQuery.query?.groupBy\n const groupByFieldName = groupByRaw?.replace(/^-/, '')\n\n const fieldPermissions = permissions?.collections?.[collectionSlug]?.fields\n\n const reducedFields = useMemo(\n () =>\n reduceFieldsToOptions({\n fieldPermissions,\n fields,\n i18n,\n }),\n [fields, fieldPermissions, i18n],\n )\n\n const filteredFields = useMemo(\n () =>\n reducedFields.filter(\n (field) =>\n !isFieldDisabled(field.field, 'groupBy') &&\n field.fieldPath !== 'id' &&\n supportedFieldTypes.includes(field.field.type),\n ),\n [reducedFields],\n )\n\n const groupByField = reducedFields.find((field) => field.fieldPath === groupByFieldName)\n const isActive = Boolean(groupByFieldName && groupByField)\n\n const handleFieldSelect = useCallback(\n (value: string) => {\n void (async () => {\n if (typeof listQuery.refineListData !== 'function') {\n return\n }\n await listQuery.refineListData({\n groupBy: listQuery.query?.groupBy?.startsWith('-') ? `-${value}` : value,\n page: 1,\n })\n })()\n },\n [listQuery],\n )\n\n const handleClear = useCallback(() => {\n void (async () => {\n if (typeof listQuery.refineListData === 'function') {\n await listQuery.refineListData({ groupBy: '' })\n }\n closeRef.current?.()\n })()\n }, [listQuery])\n\n const handleDirectionSelect = useCallback(\n (value: 'asc' \| 'desc') => {\n void (async () => {\n if (!groupByFieldName \|\| typeof listQuery.refineListData !== 'function') {\n return\n }\n await listQuery.refineListData({\n groupBy: value === 'asc' ? groupByFieldName : `-${groupByFieldName}`,\n page: 1,\n })\n })()\n },\n [groupByFieldName, listQuery],\n )\n\n const directionValue =\n !groupByRaw \|\| typeof groupByRaw !== 'string'\n ? 'asc'\n : groupByRaw.startsWith('-')\n ? 'desc'\n : 'asc'\n\n // Build the trigger button label\n const triggerLabel = isActive\n ? t('general:groupByLabel', { label: groupByField?.label \|\| '' })\n : t('general:groupByLabel', { label: '' })\n\n return (\n <Popup\n className={baseClass}\n horizontalAlign=\"right\"\n portalClassName={`${baseClass}__popup`}\n render={({ close }) => {\n closeRef.current = close\n return (\n <div className={`${baseClass}__content`}>\n <div className={`${baseClass}__header`}>\n <span className={`${baseClass}__title`}>\n {t('general:groupByLabel', { label: '' })}\n </span>\n <div className={`${baseClass}__header-actions`}>\n {isActive && (\n <Button\n aria-label={t('general:clear')}\n buttonStyle=\"ghost\"\n icon={<TrashIcon />}\n onClick={handleClear}\n round\n size=\"medium\"\n />\n )}\n <Button\n aria-label={t('general:close')}\n buttonStyle=\"ghost\"\n icon={<XIcon size={24} />}\n onClick={close}\n round\n size=\"medium\"\n />\n </div>\n </div>\n <div className={`${baseClass}__body`}>\n <div className={`${baseClass}__row`}>\n <label className={`${baseClass}__label`}>{t('general:field')}</label>\n <div className={`${baseClass}__input`} data-popup-prevent-close>\n <Popup\n className={`${baseClass}__select-popup`}\n horizontalAlign=\"right\"\n render={({ close: closeFieldPopup }) => (\n <PopupList.ButtonGroup>\n {filteredFields.map((field, i) => (\n <PopupList.Button\n active={field.fieldPath === groupByFieldName}\n icon={\n field.fieldPath === groupByFieldName ? (\n <CheckIcon size={16} />\n ) : undefined\n }\n key={i}\n onClick={() => {\n handleFieldSelect(field.fieldPath)\n closeFieldPopup()\n }}\n >\n {field.label}\n </PopupList.Button>\n ))}\n </PopupList.ButtonGroup>\n )}\n renderButton={({ active, onClick, onKeyDown }) => (\n <button\n className={`${baseClass}__select-trigger`}\n onClick={onClick}\n onKeyDown={onKeyDown}\n type=\"button\"\n >\n <span className={`${baseClass}__select-value`}>\n {groupByField?.label \|\| t('general:selectValue')}\n </span>\n <ChevronIcon direction={active ? 'up' : 'down'} size={16} />\n </button>\n )}\n size=\"medium\"\n verticalAlign=\"bottom\"\n />\n </div>\n </div>\n <div className={`${baseClass}__row`}>\n <label className={`${baseClass}__label`}>{t('general:sort')}</label>\n <div className={`${baseClass}__input`} data-popup-prevent-close>\n <Popup\n className={`${baseClass}__select-popup`}\n disabled={!groupByFieldName}\n horizontalAlign=\"right\"\n render={({ close: closeSortPopup }) => (\n <PopupList.RadioGroup>\n <PopupList.RadioGroupItem\n active={directionValue === 'desc'}\n onClick={() => {\n handleDirectionSelect('desc')\n closeSortPopup()\n }}\n >\n {t('general:descending')}\n </PopupList.RadioGroupItem>\n <PopupList.RadioGroupItem\n active={directionValue === 'asc'}\n onClick={() => {\n handleDirectionSelect('asc')\n closeSortPopup()\n }}\n >\n {t('general:ascending')}\n </PopupList.RadioGroupItem>\n </PopupList.RadioGroup>\n )}\n renderButton={({ active, onClick, onKeyDown }) => (\n <button\n className={[\n `${baseClass}__select-trigger`,\n !groupByFieldName && `${baseClass}__select-trigger--disabled`,\n ]\n .filter(Boolean)\n .join(' ')}\n disabled={!groupByFieldName}\n onClick={onClick}\n onKeyDown={onKeyDown}\n type=\"button\"\n >\n <span className={`${baseClass}__select-value`}>\n {directionValue === 'desc'\n ? t('general:descending')\n : t('general:ascending')}\n </span>\n <ChevronIcon direction={active ? 'up' : 'down'} size={16} />\n </button>\n )}\n size=\"small\"\n verticalAlign=\"bottom\"\n />\n </div>\n </div>\n </div>\n </div>\n )\n }}\n renderButton={({ active, onClick, onKeyDown, ...ariaProps }) => (\n <Button\n buttonStyle=\"secondary\"\n className={`${baseClass}__trigger`}\n extraButtonProps={{ onKeyDown }}\n icon={<ChevronIcon direction={active ? 'up' : 'down'} size={16} />}\n id=\"toggle-group-by\"\n onClick={onClick}\n selected={active \|\| isActive}\n size=\"medium\"\n {...ariaProps}\n >\n {triggerLabel}\n </Button>\n )}\n size=\"large\"\n theme=\"auto\"\n verticalAlign=\"bottom\"\n />\n )\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"index.js","names":["isFieldDisabled","React","useCallback","useMemo","useRef","ChevronIcon","TrashIcon","XIcon","useAuth","useListQuery","useTranslation","reduceFieldsToOptions","Button","Popup","PopupList","baseClass","supportedFieldTypes","GroupByControl","collectionSlug","fields","i18n","t","permissions","listQuery","closeRef","groupByRaw","query","groupBy","groupByFieldName","replace","fieldPermissions","collections","reducedFields","filteredFields","filter","field","fieldPath","includes","type","groupByField","find","isActive","Boolean","handleFieldSelect","value","refineListData","startsWith","page","handleClear","current","handleDirectionSelect","length","directionValue","triggerLabel","label","_jsx","className","horizontalAlign","portalClassName","render","close","_jsxs","buttonStyle","icon","onClick","round","size","closeFieldPopup","RadioGroup","map","i","RadioGroupItem","active","renderButton","onKeyDown","direction","verticalAlign","disabled","closeSortPopup","join","ariaProps","extraButtonProps","id","selected","theme"],"sources":["../../../src/elements/GroupByControl/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, Field, SanitizedCollectionConfig } from 'payload'\n\nimport { isFieldDisabled } from 'payload/shared'\nimport React, { useCallback, useMemo, useRef } from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { TrashIcon } from '../../icons/Trash/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { reduceFieldsToOptions } from '../../utilities/reduceFieldsToOptions.js'\nimport { Button } from '../Button/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './index.css'\n\nexport type GroupByControlProps = {\n readonly collectionSlug: SanitizedCollectionConfig['slug']\n readonly fields: ClientField[]\n}\n\nconst baseClass = 'group-by-control'\n\n/*\n Supported field types for group by functionality.\n */\nconst supportedFieldTypes: Field['type'][] = [\n 'text',\n 'textarea',\n 'number',\n 'select',\n 'relationship',\n 'date',\n 'checkbox',\n 'radio',\n 'email',\n 'upload',\n]\n\nexport const GroupByControl: React.FC<GroupByControlProps> = ({ collectionSlug, fields }) => {\n const { i18n, t } = useTranslation()\n const { permissions } = useAuth()\n const listQuery = useListQuery()\n const closeRef = useRef<(() => void) \| null>(null)\n\n const groupByRaw = listQuery.query?.groupBy\n const groupByFieldName = groupByRaw?.replace(/^-/, '')\n\n const fieldPermissions = permissions?.collections?.[collectionSlug]?.fields\n\n const reducedFields = useMemo(\n () =>\n reduceFieldsToOptions({\n fieldPermissions,\n fields,\n i18n,\n }),\n [fields, fieldPermissions, i18n],\n )\n\n const filteredFields = useMemo(\n () =>\n reducedFields.filter(\n (field) =>\n !isFieldDisabled(field.field, 'groupBy') &&\n field.fieldPath !== 'id' &&\n supportedFieldTypes.includes(field.field.type),\n ),\n [reducedFields],\n )\n\n const groupByField = reducedFields.find((field) => field.fieldPath === groupByFieldName)\n const isActive = Boolean(groupByFieldName && groupByField)\n\n const handleFieldSelect = useCallback(\n (value: string) => {\n void (async () => {\n if (typeof listQuery.refineListData !== 'function') {\n return\n }\n await listQuery.refineListData({\n groupBy: listQuery.query?.groupBy?.startsWith('-') ? `-${value}` : value,\n page: 1,\n })\n })()\n },\n [listQuery],\n )\n\n const handleClear = useCallback(() => {\n void (async () => {\n if (typeof listQuery.refineListData === 'function') {\n await listQuery.refineListData({ groupBy: '' })\n }\n closeRef.current?.()\n })()\n }, [listQuery])\n\n const handleDirectionSelect = useCallback(\n (value: 'asc' \| 'desc') => {\n void (async () => {\n if (!groupByFieldName \|\| typeof listQuery.refineListData !== 'function') {\n return\n }\n await listQuery.refineListData({\n groupBy: value === 'asc' ? groupByFieldName : `-${groupByFieldName}`,\n page: 1,\n })\n })()\n },\n [groupByFieldName, listQuery],\n )\n\n if (filteredFields.length === 0) {\n return null\n }\n\n const directionValue =\n !groupByRaw \|\| typeof groupByRaw !== 'string'\n ? 'asc'\n : groupByRaw.startsWith('-')\n ? 'desc'\n : 'asc'\n\n // Build the trigger button label\n const triggerLabel = isActive\n ? t('general:groupByLabel', { label: groupByField?.label \|\| '' })\n : t('general:groupByLabel', { label: '' })\n\n return (\n <Popup\n className={baseClass}\n horizontalAlign=\"right\"\n portalClassName={`${baseClass}__popup`}\n render={({ close }) => {\n closeRef.current = close\n return (\n <div className={`${baseClass}__content`}>\n <div className={`${baseClass}__header`}>\n <span className={`${baseClass}__title`}>\n {t('general:groupByLabel', { label: '' })}\n </span>\n <div className={`${baseClass}__header-actions`}>\n {isActive && (\n <Button\n aria-label={t('general:clear')}\n buttonStyle=\"ghost\"\n icon={<TrashIcon />}\n onClick={handleClear}\n round\n size=\"medium\"\n />\n )}\n <Button\n aria-label={t('general:close')}\n buttonStyle=\"ghost\"\n icon={<XIcon size={24} />}\n onClick={close}\n round\n size=\"medium\"\n />\n </div>\n </div>\n <div className={`${baseClass}__body`}>\n <div className={`${baseClass}__row`}>\n <label className={`${baseClass}__label`}>{t('general:field')}</label>\n <div className={`${baseClass}__input`} data-popup-prevent-close>\n <Popup\n className={`${baseClass}__select-popup`}\n horizontalAlign=\"right\"\n render={({ close: closeFieldPopup }) => (\n <PopupList.RadioGroup>\n {filteredFields.map((field, i) => (\n <PopupList.RadioGroupItem\n active={field.fieldPath === groupByFieldName}\n key={i}\n onClick={() => {\n handleFieldSelect(field.fieldPath)\n closeFieldPopup()\n }}\n >\n {field.label}\n </PopupList.RadioGroupItem>\n ))}\n </PopupList.RadioGroup>\n )}\n renderButton={({ active, onClick, onKeyDown }) => (\n <button\n className={`${baseClass}__select-trigger`}\n onClick={onClick}\n onKeyDown={onKeyDown}\n type=\"button\"\n >\n <span className={`${baseClass}__select-value`}>\n {groupByField?.label \|\| t('general:selectValue')}\n </span>\n <ChevronIcon direction={active ? 'up' : 'down'} size={16} />\n </button>\n )}\n size=\"medium\"\n verticalAlign=\"bottom\"\n />\n </div>\n </div>\n <div className={`${baseClass}__row`}>\n <label className={`${baseClass}__label`}>{t('general:sort')}</label>\n <div className={`${baseClass}__input`} data-popup-prevent-close>\n <Popup\n className={`${baseClass}__select-popup`}\n disabled={!groupByFieldName}\n horizontalAlign=\"right\"\n render={({ close: closeSortPopup }) => (\n <PopupList.RadioGroup>\n <PopupList.RadioGroupItem\n active={directionValue === 'desc'}\n onClick={() => {\n handleDirectionSelect('desc')\n closeSortPopup()\n }}\n >\n {t('general:descending')}\n </PopupList.RadioGroupItem>\n <PopupList.RadioGroupItem\n active={directionValue === 'asc'}\n onClick={() => {\n handleDirectionSelect('asc')\n closeSortPopup()\n }}\n >\n {t('general:ascending')}\n </PopupList.RadioGroupItem>\n </PopupList.RadioGroup>\n )}\n renderButton={({ active, onClick, onKeyDown }) => (\n <button\n className={[\n `${baseClass}__select-trigger`,\n !groupByFieldName && `${baseClass}__select-trigger--disabled`,\n ]\n .filter(Boolean)\n .join(' ')}\n disabled={!groupByFieldName}\n onClick={onClick}\n onKeyDown={onKeyDown}\n type=\"button\"\n >\n <span className={`${baseClass}__select-value`}>\n {directionValue === 'desc'\n ? t('general:descending')\n : t('general:ascending')}\n </span>\n <ChevronIcon direction={active ? 'up' : 'down'} size={16} />\n </button>\n )}\n size=\"small\"\n verticalAlign=\"bottom\"\n />\n </div>\n </div>\n </div>\n </div>\n )\n }}\n renderButton={({ active, onClick, onKeyDown, ...ariaProps }) => (\n <Button\n buttonStyle=\"secondary\"\n className={`${baseClass}__trigger`}\n extraButtonProps={{ onKeyDown }}\n icon={<ChevronIcon direction={active ? 'up' : 'down'} size={16} />}\n id=\"toggle-group-by\"\n onClick={onClick}\n selected={active \|\| isActive}\n size=\"medium\"\n {...ariaProps}\n >\n {triggerLabel}\n </Button>\n )}\n size=\"large\"\n theme=\"auto\"\n verticalAlign=\"bottom\"\n />\n )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Hierarchy/Drawer/index.css CHANGED Viewed

@@ -1,26 +1,8 @@
 @layer payload-default {
-  /* Override drawer to be a centered modal instead of side panel */
-  .hierarchy-drawer.drawer {
-    justify-content: center;
-    align-items: center;
-  }
-  .hierarchy-drawer .drawer__blur-bg {
-    background: var(--color-modalbackdrop);
-  }
-  .hierarchy-drawer .drawer__content {
+  .dialog.hierarchy-drawer {
     width: min(900px, calc(100vw - var(--spacer-6)));
     height: min(700px, calc(100vh - var(--spacer-6)));
-    border-radius: var(--radius-large);
-    transform: none;
-    box-shadow: var(--elevation-500-dialog);
-  }
-  .hierarchy-drawer .drawer__close {
-    position: absolute;
-    inset: 0;
-    background: transparent;
+    max-width: calc(100vw - var(--spacer-6));
   }
   .hierarchy-drawer__content {
@@ -40,7 +22,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: var(--spacer-2) var(--gutter-h);
+    padding: var(--spacer-2) var(--spacer-2-5);
     border-bottom: 1px solid var(--color-border);
     flex-shrink: 0;
   }

package/dist/elements/Hierarchy/Drawer/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/Drawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAA;AAC1E,OAAO,KAAK,EAAE,4BAA4B,EAAqB,MAAM,YAAY,CAAA;~~AAYjF~~,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,SAAS,qBAAqB,CAAA;AAE3C,KAAK,2BAA2B,GAAG;IACjC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,yBAAyB,GAAG,IAAI,CAAC,CAAA;IACpE,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;CACrE,GAAG,4BAA4B,CAAA;AAEhC,MAAM,MAAM,yBAAyB,GAAG;IACtC,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;CAC1C,CAAA;AAED,eAAO,MAAM,sBAAsB,GAAmC,iOAiBnE;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,yBAAyB,GAAG,IAAI,CAAC,CAAA;CAAE,GAAG,2BAA2B,sBAwL3F,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CA8FlE,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/Drawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAA;AAC1E,OAAO,KAAK,EAAE,4BAA4B,EAAqB,MAAM,YAAY,CAAA;AAajF,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,SAAS,qBAAqB,CAAA;AAE3C,KAAK,2BAA2B,GAAG;IACjC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,yBAAyB,GAAG,IAAI,CAAC,CAAA;IACpE,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;CACrE,GAAG,4BAA4B,CAAA;AAEhC,MAAM,MAAM,yBAAyB,GAAG;IACtC,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;CAC1C,CAAA;AAED,eAAO,MAAM,sBAAsB,GAAmC,iOAiBnE;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,yBAAyB,GAAG,IAAI,CAAC,CAAA;CAAE,GAAG,2BAA2B,sBAwL3F,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CA8FlE,CAAA"}

package/dist/elements/Hierarchy/Drawer/index.js CHANGED Viewed

@@ -8,8 +8,9 @@ import { TagIcon } from '../../../icons/Tag/index.js';
 import { useConfig } from '../../../providers/Config/index.js';
 import { useHierarchy } from '../../../providers/Hierarchy/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
+import { DialogModal } from '../../Dialog/index.js';
 import { useDocumentDrawer } from '../../DocumentDrawer/index.js';
-import { Drawer, DrawerDepthProvider } from '../../Drawer/index.js';
+import { DrawerDepthProvider } from '../../Drawer/index.js';
 import { DrawerActionHeader } from '../../DrawerActionHeader/index.js';
 import { HierarchyColumnBrowser } from '../ColumnBrowser/index.js';
 import { fetchAncestorPath } from './fetchAncestorPath.js';
@@ -275,9 +276,10 @@ export const HierarchyDrawer = props => {
     ref: drawerContentRef
   }), [handleCreateNew, props]);
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Drawer, {
+    children: [/*#__PURE__*/_jsx(DialogModal, {
       className: baseClass,
-      Header: null,
+      closeOnBlur: true,
+      size: "large",
       slug: drawerSlug,
       children: drawerContent
     }), /*#__PURE__*/_jsx(DrawerDepthProvider, {

package/dist/elements/Hierarchy/Drawer/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["getTranslation","React","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","useEffectEvent","TagIcon","useConfig","useHierarchy","useTranslation","useDocumentDrawer","Drawer","DrawerDepthProvider","DrawerActionHeader","HierarchyColumnBrowser","fetchAncestorPath","baseClass","HierarchyDrawerContent","baseFilter","closeDrawer","columnBrowserRef","disabledIds","filterByCollection","hasMany","hierarchyCollectionSlug","Icon","initialSelections","onCreateNew","onMoveToRoot","onSave","parentFieldName","ref","showMoveToRoot","useAsTitle","i18n","t","config","routes","api","serverURL","getEntityConfig","collectionConfig","collectionSlug","collectionLabel","labels","plural","parentFieldName_internal","hierarchy","initialExpandedPath","setInitialExpandedPath","isLoadingPath","setIsLoadingPath","Boolean","length","hasLoadedPathRef","firstSelection","loadAncestorPath","itemId","path","current","selections","setSelections","map","Map","id","set","selectedIds","Set","keys","ancestorsWithSelections","handleCancel","handleSave","handleSelect","prev","next","has","delete","clear","handleClearAll","selectItem","selectionCount","size","_jsxs","className","_jsx","onCancel","saveLabel","title","label","onClick","type","_Fragment","onSelect","HierarchyDrawer","props","drawerSlug","refreshTree","createParentId","setCreateParentId","drawerContentRef","documentDrawerKey","setDocumentDrawerKey","documentDrawerSlug","DocumentDrawer","closeDocumentDrawer","openDrawer","openDocumentDrawer","handleCreateNew","parentId","setTimeout","handleDocumentSave","doc","undefined","refreshColumn","drawerContent","Header","slug","initialData"],"sources":["../../../../src/elements/Hierarchy/Drawer/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, {\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react'\n\nimport type { HierarchyColumnBrowserRef } from '../ColumnBrowser/index.js'\nimport type { HierarchyDrawerInternalProps, SelectionWithPath } from './types.js'\n\nimport { useEffectEvent } from '../../../hooks/useEffectEvent.js'\nimport { TagIcon } from '../../../icons/Tag/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useHierarchy } from '../../../providers/Hierarchy/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { useDocumentDrawer } from '../../DocumentDrawer/index.js'\nimport { Drawer, DrawerDepthProvider } from '../../Drawer/index.js'\nimport { DrawerActionHeader } from '../../DrawerActionHeader/index.js'\nimport { HierarchyColumnBrowser } from '../ColumnBrowser/index.js'\nimport { fetchAncestorPath } from './fetchAncestorPath.js'\nimport './index.css'\n\nexport const baseClass = 'hierarchy-drawer'\n\ntype HierarchyDrawerContentProps = {\n columnBrowserRef?: React.RefObject<HierarchyColumnBrowserRef \| null>\n onCreateNew?: (params: { parentId: null \| number \| string }) => void\n} & HierarchyDrawerInternalProps\n\nexport type HierarchyDrawerContentRef = {\n selectItem: (id: number \| string) => void\n}\n\nexport const HierarchyDrawerContent = function HierarchyDrawerContent({\n baseFilter,\n closeDrawer,\n columnBrowserRef,\n disabledIds,\n filterByCollection,\n hasMany = false,\n hierarchyCollectionSlug,\n Icon,\n initialSelections,\n onCreateNew,\n onMoveToRoot,\n onSave,\n parentFieldName,\n ref,\n showMoveToRoot,\n useAsTitle,\n}: { ref?: React.RefObject<HierarchyDrawerContentRef \| null> } & HierarchyDrawerContentProps) {\n const { i18n, t } = useTranslation()\n // NOTE: Do NOT use useModal() here - it causes re-renders when any modal state changes\n // Use closeDrawer prop instead which already handles closing the modal\n const {\n config: {\n routes: { api },\n serverURL,\n },\n getEntityConfig,\n } = useConfig()\n\n const collectionConfig = getEntityConfig({ collectionSlug: hierarchyCollectionSlug })\n const collectionLabel = collectionConfig\n ? getTranslation(collectionConfig.labels?.plural \|\| hierarchyCollectionSlug, i18n)\n : hierarchyCollectionSlug\n\n const parentFieldName_internal =\n collectionConfig?.hierarchy && typeof collectionConfig.hierarchy === 'object'\n ? collectionConfig.hierarchy.parentFieldName\n : parentFieldName\n\n const [initialExpandedPath, setInitialExpandedPath] = useState<(number \| string)[] \| undefined>()\n const [isLoadingPath, setIsLoadingPath] = useState(Boolean(initialSelections?.length))\n const hasLoadedPathRef = React.useRef(false)\n const firstSelection = initialSelections?.[0]\n\n const loadAncestorPath = useEffectEvent(async (itemId?: number \| string) => {\n if (!itemId) {\n setIsLoadingPath(false)\n return\n }\n\n try {\n const path = await fetchAncestorPath({\n api,\n collectionSlug: hierarchyCollectionSlug,\n itemId,\n parentFieldName: parentFieldName_internal,\n serverURL,\n })\n setInitialExpandedPath(path)\n } catch {\n // Silently handle fetch errors - will just start at root\n } finally {\n setIsLoadingPath(false)\n }\n })\n\n // Load ancestor path on mount\n useEffect(() => {\n if (hasLoadedPathRef.current) {\n return\n }\n hasLoadedPathRef.current = true\n void loadAncestorPath(firstSelection)\n }, [firstSelection])\n\n const [selections, setSelections] = useState<Map<number \| string, SelectionWithPath>>(() => {\n const map = new Map<number \| string, SelectionWithPath>()\n\n if (initialSelections) {\n for (const id of initialSelections) {\n map.set(id, { id, path: [] })\n }\n }\n\n return map\n })\n\n const selectedIds = useMemo(() => new Set(selections.keys()), [selections])\n\n // For now, ancestorsWithSelections is empty - will be computed when we have path tracking\n const ancestorsWithSelections = useMemo(() => new Set<number \| string>(), [])\n\n const handleCancel = useCallback(() => {\n closeDrawer()\n }, [closeDrawer])\n\n const handleSave = useCallback(() => {\n onSave({ closeDrawer, selections })\n }, [onSave, selections, closeDrawer])\n\n const handleSelect = useCallback(\n ({\n id,\n path,\n }: {\n id: number \| string\n path: Array<{ id: number \| string; title: string }>\n }) => {\n setSelections((prev) => {\n const next = new Map(prev)\n\n if (next.has(id)) {\n next.delete(id)\n } else {\n if (!hasMany) {\n // Single select: clear previous selections\n next.clear()\n }\n next.set(id, { id, path })\n }\n\n return next\n })\n },\n [hasMany],\n )\n\n const handleClearAll = useCallback(() => {\n setSelections(new Map())\n }, [])\n\n // Expose selectItem for programmatic selection (e.g., after creating a new item)\n useImperativeHandle(\n ref,\n () => ({\n selectItem: (id: number \| string) => {\n setSelections((prev) => {\n const next = new Map(prev)\n if (!hasMany) {\n next.clear()\n }\n // Path will be empty for newly created items - could be enhanced later\n next.set(id, { id, path: [] })\n return next\n })\n },\n }),\n [hasMany],\n )\n\n const selectionCount = selections.size\n\n return (\n <div className={`${baseClass}__content`}>\n <DrawerActionHeader\n onCancel={handleCancel}\n onSave={handleSave}\n saveLabel={t('general:select')}\n title={t('general:selectValue', { label: collectionLabel })}\n />\n <div className={`${baseClass}__subheader`}>\n <div className={`${baseClass}__subheader-left`}>\n {Icon \|\| <TagIcon />}\n <h4>{collectionLabel}</h4>\n </div>\n <div className={`${baseClass}__subheader-right`}>\n {showMoveToRoot && onMoveToRoot && (\n <button className={`${baseClass}__move-to-root`} onClick={onMoveToRoot} type=\"button\">\n {t('hierarchy:moveToRoot')}\n </button>\n )}\n {selectionCount > 0 && (\n <>\n <span className={`${baseClass}__selection-info`}>{selectionCount} selected</span>\n <span>—</span>\n <button className={`${baseClass}__clear-all`} onClick={handleClearAll} type=\"button\">\n {t('general:clearAll')}\n </button>\n </>\n )}\n </div>\n </div>\n <div className={`${baseClass}__columns`}>\n <HierarchyColumnBrowser\n ancestorsWithSelections={ancestorsWithSelections}\n baseFilter={baseFilter}\n disabledIds={disabledIds}\n filterByCollection={filterByCollection}\n hierarchyCollectionSlug={hierarchyCollectionSlug}\n initialExpandedPath={initialExpandedPath}\n isLoadingPath={isLoadingPath}\n onCreateNew={onCreateNew}\n onSelect={handleSelect}\n parentFieldName={parentFieldName}\n ref={columnBrowserRef}\n selectedIds={selectedIds}\n useAsTitle={useAsTitle}\n />\n </div>\n </div>\n )\n}\n\nexport const HierarchyDrawer: React.FC<HierarchyDrawerInternalProps> = (props) => {\n const { drawerSlug, hierarchyCollectionSlug, parentFieldName } = props\n\n const { refreshTree } = useHierarchy()\n\n // Get parentFieldName from hierarchy config\n const { getEntityConfig } = useConfig()\n const collectionConfig = getEntityConfig({ collectionSlug: hierarchyCollectionSlug })\n const parentFieldName_internal =\n collectionConfig?.hierarchy && typeof collectionConfig.hierarchy === 'object'\n ? collectionConfig.hierarchy.parentFieldName\n : parentFieldName\n\n // Track which parentId is being used for the document drawer - use state to trigger re-render\n const [createParentId, setCreateParentId] = useState<null \| number \| string>(null)\n\n // Ref to access column browser's refresh function\n const columnBrowserRef = useRef<HierarchyColumnBrowserRef \| null>(null)\n\n // Ref to access drawer content's selectItem function\n const drawerContentRef = useRef<HierarchyDrawerContentRef \| null>(null)\n\n // Key for DocumentDrawer to force remount when parentId changes\n const [documentDrawerKey, setDocumentDrawerKey] = useState(0)\n\n // Stable drawer slug for the document drawer - must not change on remount\n const documentDrawerSlug = `${drawerSlug}-create-doc`\n\n // Document drawer for creating new items - rendered OUTSIDE the Drawer to avoid nested modal issues\n const [DocumentDrawer, , { closeDrawer: closeDocumentDrawer, openDrawer: openDocumentDrawer }] =\n useDocumentDrawer({\n collectionSlug: hierarchyCollectionSlug,\n drawerSlug: documentDrawerSlug,\n })\n\n const handleCreateNew = useCallback(\n ({ parentId }: { parentId: null \| number \| string }) => {\n // Increment key to force DocumentDrawer remount with new initialData\n setDocumentDrawerKey((prev) => prev + 1)\n setCreateParentId(parentId)\n // Use setTimeout to ensure state update triggers re-render before opening drawer\n setTimeout(() => {\n openDocumentDrawer()\n }, 0)\n },\n [openDocumentDrawer],\n )\n\n // Refresh the column, select the new item, and close the document drawer after creation\n const handleDocumentSave = useCallback<\n NonNullable<React.ComponentProps<typeof DocumentDrawer>['onSave']>\n >(\n ({ doc }) => {\n if (columnBrowserRef.current && createParentId !== undefined) {\n void columnBrowserRef.current.refreshColumn(createParentId)\n }\n if (drawerContentRef.current && doc?.id) {\n drawerContentRef.current.selectItem(doc.id)\n }\n refreshTree(hierarchyCollectionSlug)\n closeDocumentDrawer()\n },\n [closeDocumentDrawer, createParentId, hierarchyCollectionSlug, refreshTree],\n )\n\n // Memoize the content - only depends on stable values\n const drawerContent = useMemo(\n () => (\n <HierarchyDrawerContent\n {...props}\n columnBrowserRef={columnBrowserRef}\n onCreateNew={handleCreateNew}\n ref={drawerContentRef}\n />\n ),\n [handleCreateNew, props],\n )\n\n return (\n <>\n <Drawer className={baseClass} Header={null} slug={drawerSlug}>\n {drawerContent}\n </Drawer>\n <DrawerDepthProvider>\n <DocumentDrawer\n initialData={\n createParentId !== null ? { [parentFieldName_internal]: createParentId } : undefined\n }\n key={documentDrawerKey}\n onSave={handleDocumentSave}\n />\n </DrawerDepthProvider>\n </>\n )\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"index.js","names":["getTranslation","React","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","useEffectEvent","TagIcon","useConfig","useHierarchy","useTranslation","DialogModal","useDocumentDrawer","DrawerDepthProvider","DrawerActionHeader","HierarchyColumnBrowser","fetchAncestorPath","baseClass","HierarchyDrawerContent","baseFilter","closeDrawer","columnBrowserRef","disabledIds","filterByCollection","hasMany","hierarchyCollectionSlug","Icon","initialSelections","onCreateNew","onMoveToRoot","onSave","parentFieldName","ref","showMoveToRoot","useAsTitle","i18n","t","config","routes","api","serverURL","getEntityConfig","collectionConfig","collectionSlug","collectionLabel","labels","plural","parentFieldName_internal","hierarchy","initialExpandedPath","setInitialExpandedPath","isLoadingPath","setIsLoadingPath","Boolean","length","hasLoadedPathRef","firstSelection","loadAncestorPath","itemId","path","current","selections","setSelections","map","Map","id","set","selectedIds","Set","keys","ancestorsWithSelections","handleCancel","handleSave","handleSelect","prev","next","has","delete","clear","handleClearAll","selectItem","selectionCount","size","_jsxs","className","_jsx","onCancel","saveLabel","title","label","onClick","type","_Fragment","onSelect","HierarchyDrawer","props","drawerSlug","refreshTree","createParentId","setCreateParentId","drawerContentRef","documentDrawerKey","setDocumentDrawerKey","documentDrawerSlug","DocumentDrawer","closeDocumentDrawer","openDrawer","openDocumentDrawer","handleCreateNew","parentId","setTimeout","handleDocumentSave","doc","undefined","refreshColumn","drawerContent","closeOnBlur","slug","initialData"],"sources":["../../../../src/elements/Hierarchy/Drawer/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, {\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react'\n\nimport type { HierarchyColumnBrowserRef } from '../ColumnBrowser/index.js'\nimport type { HierarchyDrawerInternalProps, SelectionWithPath } from './types.js'\n\nimport { useEffectEvent } from '../../../hooks/useEffectEvent.js'\nimport { TagIcon } from '../../../icons/Tag/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useHierarchy } from '../../../providers/Hierarchy/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { DialogModal } from '../../Dialog/index.js'\nimport { useDocumentDrawer } from '../../DocumentDrawer/index.js'\nimport { DrawerDepthProvider } from '../../Drawer/index.js'\nimport { DrawerActionHeader } from '../../DrawerActionHeader/index.js'\nimport { HierarchyColumnBrowser } from '../ColumnBrowser/index.js'\nimport { fetchAncestorPath } from './fetchAncestorPath.js'\nimport './index.css'\n\nexport const baseClass = 'hierarchy-drawer'\n\ntype HierarchyDrawerContentProps = {\n columnBrowserRef?: React.RefObject<HierarchyColumnBrowserRef \| null>\n onCreateNew?: (params: { parentId: null \| number \| string }) => void\n} & HierarchyDrawerInternalProps\n\nexport type HierarchyDrawerContentRef = {\n selectItem: (id: number \| string) => void\n}\n\nexport const HierarchyDrawerContent = function HierarchyDrawerContent({\n baseFilter,\n closeDrawer,\n columnBrowserRef,\n disabledIds,\n filterByCollection,\n hasMany = false,\n hierarchyCollectionSlug,\n Icon,\n initialSelections,\n onCreateNew,\n onMoveToRoot,\n onSave,\n parentFieldName,\n ref,\n showMoveToRoot,\n useAsTitle,\n}: { ref?: React.RefObject<HierarchyDrawerContentRef \| null> } & HierarchyDrawerContentProps) {\n const { i18n, t } = useTranslation()\n // NOTE: Do NOT use useModal() here - it causes re-renders when any modal state changes\n // Use closeDrawer prop instead which already handles closing the modal\n const {\n config: {\n routes: { api },\n serverURL,\n },\n getEntityConfig,\n } = useConfig()\n\n const collectionConfig = getEntityConfig({ collectionSlug: hierarchyCollectionSlug })\n const collectionLabel = collectionConfig\n ? getTranslation(collectionConfig.labels?.plural \|\| hierarchyCollectionSlug, i18n)\n : hierarchyCollectionSlug\n\n const parentFieldName_internal =\n collectionConfig?.hierarchy && typeof collectionConfig.hierarchy === 'object'\n ? collectionConfig.hierarchy.parentFieldName\n : parentFieldName\n\n const [initialExpandedPath, setInitialExpandedPath] = useState<(number \| string)[] \| undefined>()\n const [isLoadingPath, setIsLoadingPath] = useState(Boolean(initialSelections?.length))\n const hasLoadedPathRef = React.useRef(false)\n const firstSelection = initialSelections?.[0]\n\n const loadAncestorPath = useEffectEvent(async (itemId?: number \| string) => {\n if (!itemId) {\n setIsLoadingPath(false)\n return\n }\n\n try {\n const path = await fetchAncestorPath({\n api,\n collectionSlug: hierarchyCollectionSlug,\n itemId,\n parentFieldName: parentFieldName_internal,\n serverURL,\n })\n setInitialExpandedPath(path)\n } catch {\n // Silently handle fetch errors - will just start at root\n } finally {\n setIsLoadingPath(false)\n }\n })\n\n // Load ancestor path on mount\n useEffect(() => {\n if (hasLoadedPathRef.current) {\n return\n }\n hasLoadedPathRef.current = true\n void loadAncestorPath(firstSelection)\n }, [firstSelection])\n\n const [selections, setSelections] = useState<Map<number \| string, SelectionWithPath>>(() => {\n const map = new Map<number \| string, SelectionWithPath>()\n\n if (initialSelections) {\n for (const id of initialSelections) {\n map.set(id, { id, path: [] })\n }\n }\n\n return map\n })\n\n const selectedIds = useMemo(() => new Set(selections.keys()), [selections])\n\n // For now, ancestorsWithSelections is empty - will be computed when we have path tracking\n const ancestorsWithSelections = useMemo(() => new Set<number \| string>(), [])\n\n const handleCancel = useCallback(() => {\n closeDrawer()\n }, [closeDrawer])\n\n const handleSave = useCallback(() => {\n onSave({ closeDrawer, selections })\n }, [onSave, selections, closeDrawer])\n\n const handleSelect = useCallback(\n ({\n id,\n path,\n }: {\n id: number \| string\n path: Array<{ id: number \| string; title: string }>\n }) => {\n setSelections((prev) => {\n const next = new Map(prev)\n\n if (next.has(id)) {\n next.delete(id)\n } else {\n if (!hasMany) {\n // Single select: clear previous selections\n next.clear()\n }\n next.set(id, { id, path })\n }\n\n return next\n })\n },\n [hasMany],\n )\n\n const handleClearAll = useCallback(() => {\n setSelections(new Map())\n }, [])\n\n // Expose selectItem for programmatic selection (e.g., after creating a new item)\n useImperativeHandle(\n ref,\n () => ({\n selectItem: (id: number \| string) => {\n setSelections((prev) => {\n const next = new Map(prev)\n if (!hasMany) {\n next.clear()\n }\n // Path will be empty for newly created items - could be enhanced later\n next.set(id, { id, path: [] })\n return next\n })\n },\n }),\n [hasMany],\n )\n\n const selectionCount = selections.size\n\n return (\n <div className={`${baseClass}__content`}>\n <DrawerActionHeader\n onCancel={handleCancel}\n onSave={handleSave}\n saveLabel={t('general:select')}\n title={t('general:selectValue', { label: collectionLabel })}\n />\n <div className={`${baseClass}__subheader`}>\n <div className={`${baseClass}__subheader-left`}>\n {Icon \|\| <TagIcon />}\n <h4>{collectionLabel}</h4>\n </div>\n <div className={`${baseClass}__subheader-right`}>\n {showMoveToRoot && onMoveToRoot && (\n <button className={`${baseClass}__move-to-root`} onClick={onMoveToRoot} type=\"button\">\n {t('hierarchy:moveToRoot')}\n </button>\n )}\n {selectionCount > 0 && (\n <>\n <span className={`${baseClass}__selection-info`}>{selectionCount} selected</span>\n <span>—</span>\n <button className={`${baseClass}__clear-all`} onClick={handleClearAll} type=\"button\">\n {t('general:clearAll')}\n </button>\n </>\n )}\n </div>\n </div>\n <div className={`${baseClass}__columns`}>\n <HierarchyColumnBrowser\n ancestorsWithSelections={ancestorsWithSelections}\n baseFilter={baseFilter}\n disabledIds={disabledIds}\n filterByCollection={filterByCollection}\n hierarchyCollectionSlug={hierarchyCollectionSlug}\n initialExpandedPath={initialExpandedPath}\n isLoadingPath={isLoadingPath}\n onCreateNew={onCreateNew}\n onSelect={handleSelect}\n parentFieldName={parentFieldName}\n ref={columnBrowserRef}\n selectedIds={selectedIds}\n useAsTitle={useAsTitle}\n />\n </div>\n </div>\n )\n}\n\nexport const HierarchyDrawer: React.FC<HierarchyDrawerInternalProps> = (props) => {\n const { drawerSlug, hierarchyCollectionSlug, parentFieldName } = props\n\n const { refreshTree } = useHierarchy()\n\n // Get parentFieldName from hierarchy config\n const { getEntityConfig } = useConfig()\n const collectionConfig = getEntityConfig({ collectionSlug: hierarchyCollectionSlug })\n const parentFieldName_internal =\n collectionConfig?.hierarchy && typeof collectionConfig.hierarchy === 'object'\n ? collectionConfig.hierarchy.parentFieldName\n : parentFieldName\n\n // Track which parentId is being used for the document drawer - use state to trigger re-render\n const [createParentId, setCreateParentId] = useState<null \| number \| string>(null)\n\n // Ref to access column browser's refresh function\n const columnBrowserRef = useRef<HierarchyColumnBrowserRef \| null>(null)\n\n // Ref to access drawer content's selectItem function\n const drawerContentRef = useRef<HierarchyDrawerContentRef \| null>(null)\n\n // Key for DocumentDrawer to force remount when parentId changes\n const [documentDrawerKey, setDocumentDrawerKey] = useState(0)\n\n // Stable drawer slug for the document drawer - must not change on remount\n const documentDrawerSlug = `${drawerSlug}-create-doc`\n\n // Document drawer for creating new items - rendered OUTSIDE the Drawer to avoid nested modal issues\n const [DocumentDrawer, , { closeDrawer: closeDocumentDrawer, openDrawer: openDocumentDrawer }] =\n useDocumentDrawer({\n collectionSlug: hierarchyCollectionSlug,\n drawerSlug: documentDrawerSlug,\n })\n\n const handleCreateNew = useCallback(\n ({ parentId }: { parentId: null \| number \| string }) => {\n // Increment key to force DocumentDrawer remount with new initialData\n setDocumentDrawerKey((prev) => prev + 1)\n setCreateParentId(parentId)\n // Use setTimeout to ensure state update triggers re-render before opening drawer\n setTimeout(() => {\n openDocumentDrawer()\n }, 0)\n },\n [openDocumentDrawer],\n )\n\n // Refresh the column, select the new item, and close the document drawer after creation\n const handleDocumentSave = useCallback<\n NonNullable<React.ComponentProps<typeof DocumentDrawer>['onSave']>\n >(\n ({ doc }) => {\n if (columnBrowserRef.current && createParentId !== undefined) {\n void columnBrowserRef.current.refreshColumn(createParentId)\n }\n if (drawerContentRef.current && doc?.id) {\n drawerContentRef.current.selectItem(doc.id)\n }\n refreshTree(hierarchyCollectionSlug)\n closeDocumentDrawer()\n },\n [closeDocumentDrawer, createParentId, hierarchyCollectionSlug, refreshTree],\n )\n\n // Memoize the content - only depends on stable values\n const drawerContent = useMemo(\n () => (\n <HierarchyDrawerContent\n {...props}\n columnBrowserRef={columnBrowserRef}\n onCreateNew={handleCreateNew}\n ref={drawerContentRef}\n />\n ),\n [handleCreateNew, props],\n )\n\n return (\n <>\n <DialogModal className={baseClass} closeOnBlur size=\"large\" slug={drawerSlug}>\n {drawerContent}\n </DialogModal>\n <DrawerDepthProvider>\n <DocumentDrawer\n initialData={\n createParentId !== null ? { [parentFieldName_internal]: createParentId } : undefined\n }\n key={documentDrawerKey}\n onSave={handleDocumentSave}\n />\n </DrawerDepthProvider>\n </>\n )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/LeaveWithoutSaving/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/LeaveWithoutSaving/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAS7D,KAAK,uBAAuB,GAAG;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IACtC,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAA;CAC9C,CAAA;AAID,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,~~CA+ChE~~,CAAA;AAED,eAAO,MAAM,uBAAuB,GAAI,qCAIrC;IACD,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;CACtC,sBAcA,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/LeaveWithoutSaving/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAS7D,KAAK,uBAAuB,GAAG;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IACtC,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAA;CAC9C,CAAA;AAID,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAgDhE,CAAA;AAED,eAAO,MAAM,uBAAuB,GAAI,qCAIrC;IACD,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;CACtC,sBAcA,CAAA"}

package/dist/elements/LeaveWithoutSaving/index.js CHANGED Viewed

@@ -11,14 +11,15 @@ import { useModal } from '../Modal/index.js';
 import { usePreventLeave } from './usePreventLeave.js';
 const leaveWithoutSavingModalSlug = 'leave-without-saving';
 export const LeaveWithoutSaving = t0 => {
-  const $ = _c(17);
+  const $ = _c(21);
   const {
     disablePreventLeave: t1,
+    modalSlug: modalSlugProp,
     onConfirm,
     onPrevent
   } = t0;
   const disablePreventLeave = t1 === undefined ? false : t1;
-  const modalSlug = leaveWithoutSavingModalSlug;
+  const modalSlug = modalSlugProp ?? leaveWithoutSavingModalSlug;
   const {
     closeModal,
     openModal
@@ -33,62 +34,65 @@ export const LeaveWithoutSaving = t0 => {
   const [hasAccepted, setHasAccepted] = React.useState(false);
   const prevent = !disablePreventLeave && Boolean((modified || !isValid) && user);
   let t2;
-  if ($[0] !== onPrevent || $[1] !== openModal) {
+  if ($[0] !== modalSlug || $[1] !== onPrevent || $[2] !== openModal) {
     t2 = () => {
       const activeHref = document.activeElement?.href || null;
       if (onPrevent) {
         onPrevent(activeHref);
       }
-      openModal(leaveWithoutSavingModalSlug);
+      openModal(modalSlug);
     };
-    $[0] = onPrevent;
-    $[1] = openModal;
-    $[2] = t2;
+    $[0] = modalSlug;
+    $[1] = onPrevent;
+    $[2] = openModal;
+    $[3] = t2;
   } else {
-    t2 = $[2];
+    t2 = $[3];
   }
   const handlePrevent = t2;
   let t3;
-  if ($[3] !== closeModal) {
+  if ($[4] !== closeModal || $[5] !== modalSlug) {
     t3 = () => {
-      closeModal(leaveWithoutSavingModalSlug);
+      closeModal(modalSlug);
     };
-    $[3] = closeModal;
-    $[4] = t3;
+    $[4] = closeModal;
+    $[5] = modalSlug;
+    $[6] = t3;
   } else {
-    t3 = $[4];
+    t3 = $[6];
   }
   const handleAccept = t3;
   let t4;
-  if ($[5] !== handleAccept || $[6] !== handlePrevent || $[7] !== hasAccepted || $[8] !== prevent) {
+  if ($[7] !== handleAccept || $[8] !== handlePrevent || $[9] !== hasAccepted || $[10] !== prevent) {
     t4 = {
       hasAccepted,
       onAccept: handleAccept,
       onPrevent: handlePrevent,
       prevent
     };
-    $[5] = handleAccept;
-    $[6] = handlePrevent;
-    $[7] = hasAccepted;
-    $[8] = prevent;
-    $[9] = t4;
+    $[7] = handleAccept;
+    $[8] = handlePrevent;
+    $[9] = hasAccepted;
+    $[10] = prevent;
+    $[11] = t4;
   } else {
-    t4 = $[9];
+    t4 = $[11];
   }
   usePreventLeave(t4);
   let t5;
-  if ($[10] !== closeModal) {
+  if ($[12] !== closeModal || $[13] !== modalSlug) {
     t5 = () => {
-      closeModal(leaveWithoutSavingModalSlug);
+      closeModal(modalSlug);
     };
-    $[10] = closeModal;
-    $[11] = t5;
+    $[12] = closeModal;
+    $[13] = modalSlug;
+    $[14] = t5;
   } else {
-    t5 = $[11];
+    t5 = $[14];
   }
   const onCancel = t5;
   let t6;
-  if ($[12] !== onConfirm) {
+  if ($[15] !== onConfirm) {
     t6 = async () => {
       if (onConfirm) {
         ;
@@ -101,24 +105,25 @@ export const LeaveWithoutSaving = t0 => {
       }
       setHasAccepted(true);
     };
-    $[12] = onConfirm;
-    $[13] = t6;
+    $[15] = onConfirm;
+    $[16] = t6;
   } else {
-    t6 = $[13];
+    t6 = $[16];
   }
   const handleConfirm = t6;
   let t7;
-  if ($[14] !== handleConfirm || $[15] !== onCancel) {
+  if ($[17] !== handleConfirm || $[18] !== modalSlug || $[19] !== onCancel) {
     t7 = _jsx(LeaveWithoutSavingModal, {
-      modalSlug: leaveWithoutSavingModalSlug,
+      modalSlug,
       onCancel,
       onConfirm: handleConfirm
     });
-    $[14] = handleConfirm;
-    $[15] = onCancel;
-    $[16] = t7;
+    $[17] = handleConfirm;
+    $[18] = modalSlug;
+    $[19] = onCancel;
+    $[20] = t7;
   } else {
-    t7 = $[16];
+    t7 = $[20];
   }
   return t7;
 };

package/dist/elements/LeaveWithoutSaving/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["c","_c","React","useCallback","useForm","useFormModified","useAuth","useTranslation","ConfirmationModal","useModal","usePreventLeave","leaveWithoutSavingModalSlug","LeaveWithoutSaving","t0","$","disablePreventLeave","t1","onConfirm","onPrevent","undefined","~~modalSlug","~~closeModal","openModal","modified","isValid","user","hasAccepted","setHasAccepted","useState","prevent","Boolean","t2","activeHref","document","activeElement","href","handlePrevent","t3","handleAccept","t4","onAccept","t5","onCancel","t6","t7","err","console","error","handleConfirm","_jsx","LeaveWithoutSavingModal","t","body","cancelLabel","confirmLabel","heading"],"sources":["../../../src/elements/LeaveWithoutSaving/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback } from 'react'\n\nimport type { OnCancel } from '../ConfirmationModal/index.js'\n\nimport { useForm, useFormModified } from '../../forms/Form/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ConfirmationModal } from '../ConfirmationModal/index.js'\nimport { useModal } from '../Modal/index.js'\nimport { usePreventLeave } from './usePreventLeave.js'\n\ntype LeaveWithoutSavingProps = {\n disablePreventLeave?: boolean\n modalSlug?: string\n onConfirm?: () => Promise<void> \| void\n onPrevent?: (nextHref: null \| string) => void\n}\n\nconst leaveWithoutSavingModalSlug = 'leave-without-saving'\n\nexport const LeaveWithoutSaving: React.FC<LeaveWithoutSavingProps> = ({\n disablePreventLeave = false,\n onConfirm,\n onPrevent,\n}) => {\n const modalSlug = leaveWithoutSavingModalSlug\n const { closeModal, openModal } = useModal()\n const modified = useFormModified()\n const { isValid } = useForm()\n const { user } = useAuth()\n const [hasAccepted, setHasAccepted] = React.useState(false)\n\n const prevent = !disablePreventLeave && Boolean((modified \|\| !isValid) && user)\n\n const handlePrevent = useCallback(() => {\n const activeHref = (document.activeElement as HTMLAnchorElement)?.href \|\| null\n if (onPrevent) {\n onPrevent(activeHref)\n }\n openModal(modalSlug)\n }, [openModal, onPrevent, modalSlug])\n\n const handleAccept = useCallback(() => {\n closeModal(modalSlug)\n }, [closeModal, modalSlug])\n\n usePreventLeave({ hasAccepted, onAccept: handleAccept, onPrevent: handlePrevent, prevent })\n\n const onCancel: OnCancel = useCallback(() => {\n closeModal(modalSlug)\n }, [closeModal, modalSlug])\n\n const handleConfirm = useCallback(async () => {\n if (onConfirm) {\n try {\n await onConfirm()\n } catch (err) {\n // eslint-disable-next-line no-console\n console.error('Error in LeaveWithoutSaving onConfirm:', err)\n }\n }\n setHasAccepted(true)\n }, [onConfirm])\n\n return (\n <LeaveWithoutSavingModal modalSlug={modalSlug} onCancel={onCancel} onConfirm={handleConfirm} />\n )\n}\n\nexport const LeaveWithoutSavingModal = ({\n modalSlug,\n onCancel,\n onConfirm,\n}: {\n modalSlug: string\n onCancel?: OnCancel\n onConfirm: () => Promise<void> \| void\n}) => {\n const { t } = useTranslation()\n\n return (\n <ConfirmationModal\n body={t('general:changesNotSaved')}\n cancelLabel={t('general:stayOnThisPage')}\n confirmLabel={t('general:leaveAnyway')}\n heading={t('general:leaveWithoutSaving')}\n modalSlug={modalSlug}\n onCancel={onCancel}\n onConfirm={onConfirm}\n />\n )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,WAAW,QAAQ;AAInC,SAASC,OAAO,EAAEC,eAAe,QAAQ;AACzC,SAASC,OAAO,QAAQ;AACxB,SAASC,cAAc,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ;AAClC,SAASC,QAAQ,QAAQ;AACzB,SAASC,eAAe,QAAQ;AAShC,MAAMC,2BAAA,GAA8B;AAEpC,OAAO,MAAMC,kBAAA,GAAwDC,EAAA;EAAA,MAAAC,CAAA,GAAAb,EAAA;EAAC;IAAAc,mBAAA,EAAAC,EAAA;IAAAC,SAAA;IAAAC;EAAA,~~IAAAL~~,~~EAIrE~~;~~EAHC~~,MAAAE,mBAAA,GAAAC,EAA2B,~~KAAAG~~,SAAA,~~WAA3BH~~,EAA2B;~~EAI3B~~,~~MAAAI~~,SAAA,~~GAAAT~~,~~2BAAA~~;~~EACA~~;~~IAAAU~~,UAAA;IAAAC;EAAA,~~IAAkCb~~,QAAA;EAClC,~~MAAAc~~,QAAA,~~GAAiBlB~~,eAAA;EACjB;~~IAAAmB~~;EAAA,~~IAAoBpB~~,OAAA;EACpB;~~IAAAqB~~;EAAA,~~IAAiBnB~~,OAAA;EACjB,~~OAAAoB~~,WAAA,EAAAC,cAAA,~~IAAsCzB~~,KAAA,~~CAAA0B~~,QAAA,MAAe;EAErD,MAAAC,OAAA,GAAgB,~~CAACd~~,mBAAA,~~IAAuBe~~,OAAA,CAAQ,CAACP,QAAA,KAAaC,OAAM,KAAMC,IAAA;EAAA,IAAAM,EAAA;EAAA,~~IAAAjB~~,CAAA,~~QAAAI~~,SAAA,~~IAAAJ~~,CAAA,~~QAAAQ~~,SAAA;IAExCS,EAAA,GAAAA,CAAA;MAChC,MAAAC,UAAA,GAAmBC,QAAA,CAAAC,aAAA,EAAAC,IAAA,QAAuD;MAAA,~~IACtEjB~~,SAAA;QACFA,SAAA,~~CAAUc~~,UAAA;MAAA;MAEZV,SAAA,~~CAAAX~~,~~2BAAU~~;IAAA;~~IACZG~~,CAAA,~~MAAAI~~,SAAA;~~IAAAJ~~,CAAA,~~MAAAQ~~,SAAA;~~IAAAR~~,CAAA,~~MAAAiB~~,EAAA;EAAA;IAAAA,EAAA,~~GAAAjB~~,CAAA;EAAA;EANA,~~MAAAsB~~,aAAA,GAAsBL,EAMc;EAAA,IAAAM,EAAA;EAAA,~~IAAAvB~~,CAAA,~~QAAAO~~,UAAA;~~IAEHgB~~,EAAA,GAAAA,CAAA;MAC/BhB,UAAA,~~CAAAV~~,~~2BAAW~~;IAAA;~~IACbG~~,CAAA,~~MAAAO~~,UAAA;~~IAAAP~~,CAAA,~~MAAAuB~~,EAAA;EAAA;IAAAA,EAAA,~~GAAAvB~~,CAAA;EAAA;EAFA,~~MAAAwB~~,YAAA,GAAqBD,EAEK;EAAA,IAAAE,EAAA;EAAA,~~IAAAzB~~,CAAA,~~QAAAwB~~,YAAA,~~IAAAxB~~,CAAA,~~QAAAsB~~,aAAA,~~IAAAtB~~,CAAA,~~QAAAY~~,WAAA,~~IAAAZ~~,CAAA,~~QAAAe~~,OAAA;IAEVU,EAAA;MAAAb,WAAA;MAAAc,QAAA,EAAyBF,YAAA;~~MAAApB~~,SAAA,~~EAAyBkB~~,aAAA;MAAAP;IAAA;~~IAAuBf~~,CAAA,~~MAAAwB~~,YAAA;~~IAAAxB~~,CAAA,~~MAAAsB~~,aAAA;~~IAAAtB~~,CAAA,~~MAAAY~~,WAAA;~~IAAAZ~~,CAAA,~~MAAAe~~,OAAA;~~IAAAf~~,CAAA,~~MAAAyB~~,EAAA;EAAA;IAAAA,EAAA,~~GAAAzB~~,CAAA;EAAA;EAAzFJ,eAAA,~~CAAgB6B~~,EAAyE;EAAA,IAAAE,EAAA;EAAA,~~IAAA3B~~,CAAA,~~SAAAO~~,UAAA;~~IAElDoB~~,EAAA,GAAAA,CAAA;MACrCpB,UAAA,~~CAAAV~~,~~2BAAW~~;IAAA;~~IACbG~~,CAAA,~~OAAAO~~,UAAA;~~IAAAP~~,CAAA,~~OAAA2B~~,EAAA;EAAA;IAAAA,EAAA,~~GAAA3B~~,CAAA;EAAA;EAFA,~~MAAA4B~~,QAAA,GAA2BD,EAED;EAAA,IAAAE,EAAA;EAAA,~~IAAA7B~~,CAAA,~~SAAAG~~,SAAA;~~IAEQ0B~~,EAAA,SAAAA,CAAA;MAAA,~~IAC5B1B~~,SAAA;QAAA;QAAA;UAAA,MAEMA,SAAA;QAAA,~~SAAA2B~~,EAAA;UACCC,KAAA,CAAAA,GAAA,CAAAA,CAAA,CAAAA,EAAA;UAEPC,OAAA,CAAAC,KAAA,CAAc,0CAA0CF,GAAA;QAAA;MAAA;MAG5DlB,cAAA,KAAe;IAAA;~~IACjBb~~,CAAA,~~OAAAG~~,SAAA;~~IAAAH~~,CAAA,~~OAAA6B~~,EAAA;EAAA;IAAAA,EAAA,~~GAAA7B~~,CAAA;EAAA;EAVA,~~MAAAkC~~,aAAA,GAAsBL,EAUR;EAAA,IAAAC,EAAA;EAAA,~~IAAA9B~~,CAAA,~~SAAAkC~~,aAAA,~~IAAAlC~~,CAAA,~~SAAA4B~~,QAAA;IAGZE,EAAA,GAAAK,IAAA,CAAAC,uBAAA;~~MAAA9B~~,SAAA~~,EAAAT,2BAAA~~;~~MAAA+B~~,QAAA;~~MAAAzB~~,SAAA,~~EAA8E+B~~;IAAA,C~~;;;;;;;~~SAA9EJ,E;CAEJ;AAEA,OAAO,MAAMM,uBAAA,~~GAA0BrC~~,EAAA;EAAA,MAAAC,CAAA,GAAAb,EAAA;EAAC;~~IAAAmB~~,SAAA;~~IAAAsB~~,QAAA;~~IAAAzB~~;EAAA,~~IAAAJ~~,EAQvC;EACC;~~IAAAsC~~;EAAA,~~IAAc5C~~,cAAA;EAAA,IAAAS,EAAA;EAAA,IAAAF,CAAA,~~QAAAM~~,SAAA,~~IAAAN~~,CAAA,~~QAAA4B~~,QAAA,~~IAAA5B~~,CAAA,~~QAAAG~~,SAAA,~~IAAAH~~,CAAA,~~QAAAqC~~,CAAA;~~IAGZnC~~,EAAA,~~GAAAiC~~,IAAA,~~CAAAzC~~,iBAAA;~~MAAA4C~~,IAAA,EACQD,CAAA,CAAE;MAAAE,WAAA,EACKF,CAAA,CAAE;MAAAG,YAAA,EACDH,CAAA,CAAE;MAAAI,OAAA,EACPJ,CAAA,CAAE;~~MAAA/B~~,SAAA;~~MAAAsB~~,QAAA;~~MAAAzB~~;IAAA,C;;;;;;;;;~~SAJbD~~,E;CAUJ","ignoreList":[]}
1	+ {"version":3,"file":"index.js","names":["c","_c","React","useCallback","useForm","useFormModified","useAuth","useTranslation","ConfirmationModal","useModal","usePreventLeave","leaveWithoutSavingModalSlug","LeaveWithoutSaving","t0","$","disablePreventLeave","t1","modalSlug","modalSlugProp","onConfirm","onPrevent","undefined","closeModal","openModal","modified","isValid","user","hasAccepted","setHasAccepted","useState","prevent","Boolean","t2","activeHref","document","activeElement","href","handlePrevent","t3","handleAccept","t4","onAccept","t5","onCancel","t6","t7","err","console","error","handleConfirm","_jsx","LeaveWithoutSavingModal","t","body","cancelLabel","confirmLabel","heading"],"sources":["../../../src/elements/LeaveWithoutSaving/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback } from 'react'\n\nimport type { OnCancel } from '../ConfirmationModal/index.js'\n\nimport { useForm, useFormModified } from '../../forms/Form/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ConfirmationModal } from '../ConfirmationModal/index.js'\nimport { useModal } from '../Modal/index.js'\nimport { usePreventLeave } from './usePreventLeave.js'\n\ntype LeaveWithoutSavingProps = {\n disablePreventLeave?: boolean\n modalSlug?: string\n onConfirm?: () => Promise<void> \| void\n onPrevent?: (nextHref: null \| string) => void\n}\n\nconst leaveWithoutSavingModalSlug = 'leave-without-saving'\n\nexport const LeaveWithoutSaving: React.FC<LeaveWithoutSavingProps> = ({\n disablePreventLeave = false,\n modalSlug: modalSlugProp,\n onConfirm,\n onPrevent,\n}) => {\n const modalSlug = modalSlugProp ?? leaveWithoutSavingModalSlug\n const { closeModal, openModal } = useModal()\n const modified = useFormModified()\n const { isValid } = useForm()\n const { user } = useAuth()\n const [hasAccepted, setHasAccepted] = React.useState(false)\n\n const prevent = !disablePreventLeave && Boolean((modified \|\| !isValid) && user)\n\n const handlePrevent = useCallback(() => {\n const activeHref = (document.activeElement as HTMLAnchorElement)?.href \|\| null\n if (onPrevent) {\n onPrevent(activeHref)\n }\n openModal(modalSlug)\n }, [openModal, onPrevent, modalSlug])\n\n const handleAccept = useCallback(() => {\n closeModal(modalSlug)\n }, [closeModal, modalSlug])\n\n usePreventLeave({ hasAccepted, onAccept: handleAccept, onPrevent: handlePrevent, prevent })\n\n const onCancel: OnCancel = useCallback(() => {\n closeModal(modalSlug)\n }, [closeModal, modalSlug])\n\n const handleConfirm = useCallback(async () => {\n if (onConfirm) {\n try {\n await onConfirm()\n } catch (err) {\n // eslint-disable-next-line no-console\n console.error('Error in LeaveWithoutSaving onConfirm:', err)\n }\n }\n setHasAccepted(true)\n }, [onConfirm])\n\n return (\n <LeaveWithoutSavingModal modalSlug={modalSlug} onCancel={onCancel} onConfirm={handleConfirm} />\n )\n}\n\nexport const LeaveWithoutSavingModal = ({\n modalSlug,\n onCancel,\n onConfirm,\n}: {\n modalSlug: string\n onCancel?: OnCancel\n onConfirm: () => Promise<void> \| void\n}) => {\n const { t } = useTranslation()\n\n return (\n <ConfirmationModal\n body={t('general:changesNotSaved')}\n cancelLabel={t('general:stayOnThisPage')}\n confirmLabel={t('general:leaveAnyway')}\n heading={t('general:leaveWithoutSaving')}\n modalSlug={modalSlug}\n onCancel={onCancel}\n onConfirm={onConfirm}\n />\n )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/ListControls/index.css CHANGED Viewed

@@ -6,16 +6,15 @@
     border-bottom: var(--stroke-width-small) solid var(--color-border);
     .pill-selector,
-    .where-builder,
     .sort-complex,
     .group-by-builder {
       margin-top: var(--spacer-2);
     }
+  }
-    .search-bar {
-      min-width: 180px;
-      width: 180px;
-    }
+  .drawer .list-controls {
+    padding-left: var(--spacer-3);
+    padding-right: var(--spacer-3);
   }
   .list-controls__search-row {
@@ -67,7 +66,6 @@
       }
     }
-    .list-controls__toggle-where,
     .list-controls__toggle-sort,
     .list-controls__toggle-group-by {
       flex: 1;

package/dist/elements/ListControls/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/index.tsx"],"names":[],"mappings":"~~AAIA~~,OAAO,KAAgD,MAAM,OAAO,CAAA;AAEpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;~~AAcnD~~,OAAO,aAAa,CAAA;AAIpB;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,~~CAsJpD~~,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAgD,MAAM,OAAO,CAAA;AAEpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAanD,OAAO,aAAa,CAAA;AAIpB;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAwJpD,CAAA"}

package/dist/elements/ListControls/index.js CHANGED Viewed

@@ -3,14 +3,12 @@
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useWindowInfo } from '@faceless-ui/window-info';
-import { validateWhereQuery } from 'payload/shared';
 import React, { Fragment, useEffect, useRef, useState } from 'react';
 import { Popup, PopupList } from '../../elements/Popup/index.js';
 import { ChevronIcon } from '../../icons/Chevron/index.js';
 import { Dots } from '../../icons/Dots/index.js';
 import { useListQuery } from '../../providers/ListQuery/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import { AnimateHeight } from '../AnimateHeight/index.js';
 import { Button } from '../Button/index.js';
 import { ColumnsButton } from '../ColumnsButton/index.js';
 import { GroupByControl } from '../GroupByControl/index.js';
@@ -25,7 +23,7 @@ const baseClass = 'list-controls';
  * the collection's documents.
  */
 export const ListControls = props => {
-  const $ = _c(4);
+  const $ = _c(8);
   const {
     beforeActions,
     collectionConfig,
@@ -35,8 +33,10 @@ export const ListControls = props => {
     enableFilters: t1,
     enableSort: t2,
     hasCreatePermission,
+    isWhereOpen: isWhereOpenFromProps,
     listMenuItems,
     newDocumentURL,
+    onWhereToggle,
     queryPreset: activePreset,
     queryPresetPermissions,
     renderedFilters,
@@ -45,8 +45,10 @@ export const ListControls = props => {
   const enableColumns = t0 === undefined ? true : t0;
   const enableFilters = t1 === undefined ? true : t1;
   const enableSort = t2 === undefined ? false : t2;
+  const isControlled = typeof onWhereToggle === "function";
   const {
     handleSearchChange,
+    hasActiveFilters,
     query
   } = useListQuery();
   const {
@@ -62,8 +64,7 @@ export const ListControls = props => {
     label: ""
   }).split(" ")[0];
   const hasWhereParam = useRef(Boolean(query?.where));
-  const shouldInitializeWhereOpened = validateWhereQuery(query?.where);
-  const [visibleDrawer, setVisibleDrawer] = useState(shouldInitializeWhereOpened ? "where" : undefined);
+  const [visibleDrawer, setVisibleDrawer] = useState(hasActiveFilters ? "where" : undefined);
   let t4;
   if ($[0] !== query?.where) {
     t4 = () => {
@@ -90,6 +91,18 @@ export const ListControls = props => {
     t6 = $[3];
   }
   useEffect(t4, t6);
+  const isWhereOpen = isControlled ? Boolean(isWhereOpenFromProps) : visibleDrawer === "where";
+  let t7;
+  if ($[4] !== isControlled || $[5] !== onWhereToggle || $[6] !== visibleDrawer) {
+    t7 = isControlled ? onWhereToggle : () => setVisibleDrawer(visibleDrawer !== "where" ? "where" : undefined);
+    $[4] = isControlled;
+    $[5] = onWhereToggle;
+    $[6] = visibleDrawer;
+    $[7] = t7;
+  } else {
+    t7 = $[7];
+  }
+  const handleWhereToggle = t7;
   return _jsxs("div", {
     className: baseClass,
     children: [_jsxs("div", {
@@ -117,14 +130,15 @@ export const ListControls = props => {
             "aria-expanded": visibleDrawer === "where"
           },
           icon: _jsx(ChevronIcon, {
-            direction: visibleDrawer === "where" ? "up" : "down",
+            direction: isWhereOpen ? "up" : "down",
             size: 16
           }),
           id: "toggle-list-filters",
-          onClick: () => setVisibleDrawer(visibleDrawer !== "where" ? "where" : undefined),
+          onClick: handleWhereToggle,
+          selected: isWhereOpen || hasActiveFilters,
           size: "medium",
           children: t("general:filters")
-        }), collectionConfig.admin.groupBy && _jsx(GroupByControl, {
+        }), _jsx(GroupByControl, {
           collectionSlug: collectionConfig.slug,
           fields: collectionConfig.fields
         }), enableColumns && _jsx(ColumnsButton, {
@@ -165,14 +179,14 @@ export const ListControls = props => {
           })
         })]
       })]
-    }), _jsx(AnimateHeight, {
+    }), !isControlled && isWhereOpen && _jsx("div", {
       className: `${baseClass}__where`,
-      height: visibleDrawer === "where" ? "auto" : 0,
       id: `${baseClass}-where`,
       children: _jsx(WhereBuilder, {
         collectionPluralLabel: collectionConfig?.labels?.plural,
         collectionSlug: collectionConfig.slug,
         fields: collectionConfig?.fields,
+        onClose: () => setVisibleDrawer(undefined),
         renderedFilters,
         resolvedFilterOptions
       })