@payloadcms/ui 4.0.0-internal.5f0cd13 → 4.0.0-internal.688c4d0

package/dist/elements/ListControls/index.js

@@ -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
       })

package/dist/elements/ListControls/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useWindowInfo","validateWhereQuery","React","Fragment","useEffect","useRef","useState","Popup","PopupList","ChevronIcon","Dots","useListQuery","useTranslation","AnimateHeight","Button","ColumnsButton","GroupByControl","QueryPresetBar","ListSearchFilter","WhereBuilder","baseClass","ListControls","props","$","beforeActions","collectionConfig","collectionSlug","disableQueryPresets","enableColumns","t0","enableFilters","t1","enableSort","t2","hasCreatePermission","listMenuItems","newDocumentURL","queryPreset","activePreset","queryPresetPermissions","renderedFilters","resolvedFilterOptions","undefined","handleSearchChange","query","t","breakpoints","t3","s","smallBreak","searchLabelTranslated","label","split","hasWhereParam","Boolean","where","shouldInitializeWhereOpened","visibleDrawer","setVisibleDrawer","t4","current","t5","t6","_jsxs","className","children","_jsx","onSearchChange","searchQueryParam","search","enableQueryPresets","buttonStyle","extraButtonProps","icon","direction","size","onClick","admin","groupBy","slug","fields","el","id","to","Array","isArray","length","button","ariaLabel","horizontalAlign","verticalAlign","ButtonGroup","map","_temp","height","collectionPluralLabel","labels","plural","item","i"],"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\n\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { validateWhereQuery } from 'payload/shared'\nimport React, { Fragment, useEffect, useRef, useState } from 'react'\n\nimport type { ListControlsProps } from './types.js'\n\nimport { Popup, PopupList } from '../../elements/Popup/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { Dots } from '../../icons/Dots/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { AnimateHeight } from '../AnimateHeight/index.js'\nimport { Button } from '../Button/index.js'\nimport { ColumnsButton } from '../ColumnsButton/index.js'\nimport { GroupByControl } from '../GroupByControl/index.js'\nimport { QueryPresetBar } from '../QueryPresets/QueryPresetBar/index.js'\nimport { ListSearchFilter } from '../Search/ListSearchFilter/index.js'\nimport { WhereBuilder } from '../WhereBuilder/index.js'\nimport './index.css'\n\nconst baseClass = 'list-controls'\n\n/**\n * The ListControls component is used to render the controls (search, filter, where)\n * for a collection's list view. You can find those directly above the table which lists\n * the collection's documents.\n */\nexport const ListControls: React.FC<ListControlsProps> = (props) => {\n  const {\n    beforeActions,\n    collectionConfig,\n    collectionSlug,\n    disableQueryPresets,\n    enableColumns = true,\n    enableFilters = true,\n    enableSort = false,\n    hasCreatePermission,\n    listMenuItems,\n    newDocumentURL,\n    queryPreset: activePreset,\n    queryPresetPermissions,\n    renderedFilters,\n    resolvedFilterOptions,\n  } = props\n\n  const { handleSearchChange, query } = useListQuery()\n\n  const { t } = useTranslation()\n\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n\n  // Simplified placeholder - just \"Search\" instead of \"Search by X, Y, Z\"\n  const searchLabelTranslated = t('general:searchBy', { label: '' }).split(' ')[0]\n\n  const hasWhereParam = useRef(Boolean(query?.where))\n\n  const shouldInitializeWhereOpened = validateWhereQuery(query?.where)\n\n  const [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'sort' | 'where'>(\n    shouldInitializeWhereOpened ? 'where' : undefined,\n  )\n\n  useEffect(() => {\n    if (hasWhereParam.current && !query?.where) {\n      hasWhereParam.current = false\n    } else if (query?.where) {\n      hasWhereParam.current = true\n    }\n  }, [setVisibleDrawer, query?.where])\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__search-row`}>\n        <div className={`${baseClass}__left`}>\n          <ListSearchFilter\n            key={collectionSlug}\n            label={searchLabelTranslated}\n            onSearchChange={handleSearchChange}\n            searchQueryParam={query?.search}\n          />\n          {collectionConfig?.enableQueryPresets && !disableQueryPresets && (\n            <QueryPresetBar\n              activePreset={activePreset}\n              collectionSlug={collectionSlug}\n              queryPresetPermissions={queryPresetPermissions}\n            />\n          )}\n        </div>\n        <div className={`${baseClass}__spacer`} />\n        <div className={`${baseClass}__actions`}>\n          {!smallBreak && beforeActions}\n          {enableFilters && (\n            <Button\n              buttonStyle=\"secondary\"\n              className={`${baseClass}__toggle-where`}\n              extraButtonProps={{\n                'aria-controls': `${baseClass}-where`,\n                'aria-expanded': visibleDrawer === 'where',\n              }}\n              icon={<ChevronIcon direction={visibleDrawer === 'where' ? 'up' : 'down'} size={16} />}\n              id=\"toggle-list-filters\"\n              onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)}\n              size=\"medium\"\n            >\n              {t('general:filters')}\n            </Button>\n          )}\n          {collectionConfig.admin.groupBy && (\n            <GroupByControl\n              collectionSlug={collectionConfig.slug}\n              fields={collectionConfig.fields}\n            />\n          )}\n          {enableColumns && <ColumnsButton collectionSlug={collectionConfig.slug} />}\n          {enableSort && (\n            <Button\n              buttonStyle=\"secondary\"\n              className={`${baseClass}__toggle-sort`}\n              extraButtonProps={{\n                'aria-controls': `${baseClass}-sort`,\n                'aria-expanded': visibleDrawer === 'sort',\n              }}\n              icon={<ChevronIcon size={16} />}\n              id=\"toggle-list-sort\"\n              onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}\n              size=\"medium\"\n            >\n              {t('general:sort')}\n            </Button>\n          )}\n          {hasCreatePermission && newDocumentURL && (\n            <Button\n              buttonStyle=\"primary\"\n              className={`${baseClass}__create-new`}\n              el=\"link\"\n              id=\"create-new-doc\"\n              size=\"medium\"\n              to={newDocumentURL}\n            >\n              {t('general:createNew')}\n            </Button>\n          )}\n          {listMenuItems && Array.isArray(listMenuItems) && listMenuItems.length > 0 && (\n            <Popup\n              button={<Dots ariaLabel={t('general:moreOptions')} />}\n              className={`${baseClass}__popup`}\n              horizontalAlign=\"right\"\n              id=\"list-menu\"\n              size=\"medium\"\n              verticalAlign=\"bottom\"\n            >\n              <PopupList.ButtonGroup>\n                {listMenuItems.map((item, i) => (\n                  <Fragment key={`list-menu-item-${i}`}>{item}</Fragment>\n                ))}\n              </PopupList.ButtonGroup>\n            </Popup>\n          )}\n        </div>\n      </div>\n      <AnimateHeight\n        className={`${baseClass}__where`}\n        height={visibleDrawer === 'where' ? 'auto' : 0}\n        id={`${baseClass}-where`}\n      >\n        <WhereBuilder\n          collectionPluralLabel={collectionConfig?.labels?.plural}\n          collectionSlug={collectionConfig.slug}\n          fields={collectionConfig?.fields}\n          renderedFilters={renderedFilters}\n          resolvedFilterOptions={resolvedFilterOptions}\n        />\n      </AnimateHeight>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","useWindowInfo","React","Fragment","useEffect","useRef","useState","Popup","PopupList","ChevronIcon","Dots","useListQuery","useTranslation","Button","ColumnsButton","GroupByControl","QueryPresetBar","ListSearchFilter","WhereBuilder","baseClass","ListControls","props","$","beforeActions","collectionConfig","collectionSlug","disableQueryPresets","enableColumns","t0","enableFilters","t1","enableSort","t2","hasCreatePermission","isWhereOpen","isWhereOpenFromProps","listMenuItems","newDocumentURL","onWhereToggle","queryPreset","activePreset","queryPresetPermissions","renderedFilters","resolvedFilterOptions","undefined","isControlled","handleSearchChange","hasActiveFilters","query","t","breakpoints","t3","s","smallBreak","searchLabelTranslated","label","split","hasWhereParam","Boolean","where","visibleDrawer","setVisibleDrawer","t4","current","t5","t6","t7","handleWhereToggle","_jsxs","className","children","_jsx","onSearchChange","searchQueryParam","search","enableQueryPresets","buttonStyle","extraButtonProps","icon","direction","size","onClick","selected","slug","fields","el","id","to","Array","isArray","length","button","ariaLabel","horizontalAlign","verticalAlign","ButtonGroup","map","_temp","collectionPluralLabel","labels","plural","onClose","item","i"],"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\n\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport React, { Fragment, useEffect, useRef, useState } from 'react'\n\nimport type { ListControlsProps } from './types.js'\n\nimport { Popup, PopupList } from '../../elements/Popup/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { Dots } from '../../icons/Dots/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { ColumnsButton } from '../ColumnsButton/index.js'\nimport { GroupByControl } from '../GroupByControl/index.js'\nimport { QueryPresetBar } from '../QueryPresets/QueryPresetBar/index.js'\nimport { ListSearchFilter } from '../Search/ListSearchFilter/index.js'\nimport { WhereBuilder } from '../WhereBuilder/index.js'\nimport './index.css'\n\nconst baseClass = 'list-controls'\n\n/**\n * The ListControls component is used to render the controls (search, filter, where)\n * for a collection's list view. You can find those directly above the table which lists\n * the collection's documents.\n */\nexport const ListControls: React.FC<ListControlsProps> = (props) => {\n  const {\n    beforeActions,\n    collectionConfig,\n    collectionSlug,\n    disableQueryPresets,\n    enableColumns = true,\n    enableFilters = true,\n    enableSort = false,\n    hasCreatePermission,\n    isWhereOpen: isWhereOpenFromProps,\n    listMenuItems,\n    newDocumentURL,\n    onWhereToggle,\n    queryPreset: activePreset,\n    queryPresetPermissions,\n    renderedFilters,\n    resolvedFilterOptions,\n  } = props\n\n  const isControlled = typeof onWhereToggle === 'function'\n\n  const { handleSearchChange, hasActiveFilters, query } = useListQuery()\n\n  const { t } = useTranslation()\n\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n\n  // Simplified placeholder - just \"Search\" instead of \"Search by X, Y, Z\"\n  const searchLabelTranslated = t('general:searchBy', { label: '' }).split(' ')[0]\n\n  const hasWhereParam = useRef(Boolean(query?.where))\n\n  const [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'sort' | 'where'>(\n    hasActiveFilters ? 'where' : undefined,\n  )\n\n  useEffect(() => {\n    if (hasWhereParam.current && !query?.where) {\n      hasWhereParam.current = false\n    } else if (query?.where) {\n      hasWhereParam.current = true\n    }\n  }, [setVisibleDrawer, query?.where])\n\n  const isWhereOpen = isControlled ? Boolean(isWhereOpenFromProps) : visibleDrawer === 'where'\n  const handleWhereToggle = isControlled\n    ? onWhereToggle\n    : () => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__search-row`}>\n        <div className={`${baseClass}__left`}>\n          <ListSearchFilter\n            key={collectionSlug}\n            label={searchLabelTranslated}\n            onSearchChange={handleSearchChange}\n            searchQueryParam={query?.search}\n          />\n          {collectionConfig?.enableQueryPresets && !disableQueryPresets && (\n            <QueryPresetBar\n              activePreset={activePreset}\n              collectionSlug={collectionSlug}\n              queryPresetPermissions={queryPresetPermissions}\n            />\n          )}\n        </div>\n        <div className={`${baseClass}__spacer`} />\n        <div className={`${baseClass}__actions`}>\n          {!smallBreak && beforeActions}\n          {enableFilters && (\n            <Button\n              buttonStyle=\"secondary\"\n              className={`${baseClass}__toggle-where`}\n              extraButtonProps={{\n                'aria-controls': `${baseClass}-where`,\n                'aria-expanded': visibleDrawer === 'where',\n              }}\n              icon={<ChevronIcon direction={isWhereOpen ? 'up' : 'down'} size={16} />}\n              id=\"toggle-list-filters\"\n              onClick={handleWhereToggle}\n              selected={isWhereOpen || hasActiveFilters}\n              size=\"medium\"\n            >\n              {t('general:filters')}\n            </Button>\n          )}\n          <GroupByControl collectionSlug={collectionConfig.slug} fields={collectionConfig.fields} />\n          {enableColumns && <ColumnsButton collectionSlug={collectionConfig.slug} />}\n          {enableSort && (\n            <Button\n              buttonStyle=\"secondary\"\n              className={`${baseClass}__toggle-sort`}\n              extraButtonProps={{\n                'aria-controls': `${baseClass}-sort`,\n                'aria-expanded': visibleDrawer === 'sort',\n              }}\n              icon={<ChevronIcon size={16} />}\n              id=\"toggle-list-sort\"\n              onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}\n              size=\"medium\"\n            >\n              {t('general:sort')}\n            </Button>\n          )}\n          {hasCreatePermission && newDocumentURL && (\n            <Button\n              buttonStyle=\"primary\"\n              className={`${baseClass}__create-new`}\n              el=\"link\"\n              id=\"create-new-doc\"\n              size=\"medium\"\n              to={newDocumentURL}\n            >\n              {t('general:createNew')}\n            </Button>\n          )}\n          {listMenuItems && Array.isArray(listMenuItems) && listMenuItems.length > 0 && (\n            <Popup\n              button={<Dots ariaLabel={t('general:moreOptions')} />}\n              className={`${baseClass}__popup`}\n              horizontalAlign=\"right\"\n              id=\"list-menu\"\n              size=\"medium\"\n              verticalAlign=\"bottom\"\n            >\n              <PopupList.ButtonGroup>\n                {listMenuItems.map((item, i) => (\n                  <Fragment key={`list-menu-item-${i}`}>{item}</Fragment>\n                ))}\n              </PopupList.ButtonGroup>\n            </Popup>\n          )}\n        </div>\n      </div>\n      {!isControlled && isWhereOpen && (\n        <div className={`${baseClass}__where`} id={`${baseClass}-where`}>\n          <WhereBuilder\n            collectionPluralLabel={collectionConfig?.labels?.plural}\n            collectionSlug={collectionConfig.slug}\n            fields={collectionConfig?.fields}\n            onClose={() => setVisibleDrawer(undefined)}\n            renderedFilters={renderedFilters}\n            resolvedFilterOptions={resolvedFilterOptions}\n          />\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/ListControls/types.d.ts

@@ -21,8 +21,10 @@ export type ListControlsProps = {
     readonly handleSortChange?: (sort: string) => void;
     readonly handleWhereChange?: (where: Where) => void;
     readonly hasCreatePermission?: boolean;
+    readonly isWhereOpen?: boolean;
     readonly listMenuItems?: React.ReactNode[];
     readonly newDocumentURL?: string;
+    readonly onWhereToggle?: () => void;
     readonly queryPreset?: QueryPreset;
     readonly queryPresetPermissions?: SanitizedCollectionPermission;
     readonly renderedFilters?: Map<string, React.ReactNode>;

package/dist/elements/ListControls/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,sBAAsB,EACtB,WAAW,EACX,qBAAqB,EACrB,6BAA6B,EAC7B,KAAK,EACN,MAAM,SAAS,CAAA;AAEhB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC1C,QAAQ,CAAC,gBAAgB,EAAE,sBAAsB,CAAA;IACjD,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B;;;OAGG;IACH,QAAQ,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IACpC;;;OAGG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAA;IAClC,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACtD,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAClD,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IACnD,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC1C,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,CAAA;IAChC,QAAQ,CAAC,WAAW,CAAC,EAAE,WAAW,CAAA;IAClC,QAAQ,CAAC,sBAAsB,CAAC,EAAE,6BAA6B,CAAA;IAC/D,QAAQ,CAAC,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;IACvD,QAAQ,CAAC,qBAAqB,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAA;CACpE,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,sBAAsB,EACtB,WAAW,EACX,qBAAqB,EACrB,6BAA6B,EAC7B,KAAK,EACN,MAAM,SAAS,CAAA;AAEhB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC1C,QAAQ,CAAC,gBAAgB,EAAE,sBAAsB,CAAA;IACjD,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B;;;OAGG;IACH,QAAQ,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IACpC;;;OAGG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAA;IAClC,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACtD,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAClD,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IACnD,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC1C,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,CAAA;IAChC,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IACnC,QAAQ,CAAC,WAAW,CAAC,EAAE,WAAW,CAAA;IAClC,QAAQ,CAAC,sBAAsB,CAAC,EAAE,6BAA6B,CAAA;IAC/D,QAAQ,CAAC,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;IACvD,QAAQ,CAAC,qBAAqB,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAA;CACpE,CAAA"}

package/dist/elements/ListControls/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/ListControls/types.ts"],"sourcesContent":["import type {\n  ClientCollectionConfig,\n  QueryPreset,\n  ResolvedFilterOptions,\n  SanitizedCollectionPermission,\n  Where,\n} from 'payload'\n\nexport type ListControlsProps = {\n  readonly beforeActions?: React.ReactNode[]\n  readonly collectionConfig: ClientCollectionConfig\n  readonly collectionSlug: string\n  /**\n   * @deprecated\n   * These are now handled by the `ListSelection` component\n   */\n  readonly disableBulkDelete?: boolean\n  /**\n   * @deprecated\n   * These are now handled by the `ListSelection` component\n   */\n  readonly disableBulkEdit?: boolean\n  readonly disableQueryPresets?: boolean\n  readonly enableColumns?: boolean\n  readonly enableFilters?: boolean\n  readonly enableSort?: boolean\n  readonly handleSearchChange?: (search: string) => void\n  readonly handleSortChange?: (sort: string) => void\n  readonly handleWhereChange?: (where: Where) => void\n  readonly hasCreatePermission?: boolean\n  readonly listMenuItems?: React.ReactNode[]\n  readonly newDocumentURL?: string\n  readonly queryPreset?: QueryPreset\n  readonly queryPresetPermissions?: SanitizedCollectionPermission\n  readonly renderedFilters?: Map<string, React.ReactNode>\n  readonly resolvedFilterOptions?: Map<string, ResolvedFilterOptions>\n}\n"],"mappings":"AAQA","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/ListControls/types.ts"],"sourcesContent":["import type {\n  ClientCollectionConfig,\n  QueryPreset,\n  ResolvedFilterOptions,\n  SanitizedCollectionPermission,\n  Where,\n} from 'payload'\n\nexport type ListControlsProps = {\n  readonly beforeActions?: React.ReactNode[]\n  readonly collectionConfig: ClientCollectionConfig\n  readonly collectionSlug: string\n  /**\n   * @deprecated\n   * These are now handled by the `ListSelection` component\n   */\n  readonly disableBulkDelete?: boolean\n  /**\n   * @deprecated\n   * These are now handled by the `ListSelection` component\n   */\n  readonly disableBulkEdit?: boolean\n  readonly disableQueryPresets?: boolean\n  readonly enableColumns?: boolean\n  readonly enableFilters?: boolean\n  readonly enableSort?: boolean\n  readonly handleSearchChange?: (search: string) => void\n  readonly handleSortChange?: (sort: string) => void\n  readonly handleWhereChange?: (where: Where) => void\n  readonly hasCreatePermission?: boolean\n  readonly isWhereOpen?: boolean\n  readonly listMenuItems?: React.ReactNode[]\n  readonly newDocumentURL?: string\n  readonly onWhereToggle?: () => void\n  readonly queryPreset?: QueryPreset\n  readonly queryPresetPermissions?: SanitizedCollectionPermission\n  readonly renderedFilters?: Map<string, React.ReactNode>\n  readonly resolvedFilterOptions?: Map<string, ResolvedFilterOptions>\n}\n"],"mappings":"AAQA","ignoreList":[]}

package/dist/elements/ListDrawer/DrawerContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../src/elements/ListDrawer/DrawerContent.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAG/D,OAAO,KAAK,EACV,eAAe,EAGhB,MAAM,YAAY,CAAA;AAUnB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA4LvD,CAAA"}
+{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../src/elements/ListDrawer/DrawerContent.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAG/D,OAAO,KAAK,EACV,eAAe,EAGhB,MAAM,YAAY,CAAA;AAUnB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA6LvD,CAAA"}

package/dist/elements/ListDrawer/DrawerContent.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useModal } from '@faceless-ui/modal';
 import { hoistQueryParamsToAnd } from 'payload/shared';
 import React, { useCallback, useEffect, useState } from 'react';
@@ -162,9 +162,6 @@ export const ListDrawerContent = ({
       slug: selectedOption.value || incomingCollectionSlug
     });
   }, [getEntityConfig, refresh, selectedOption.value]);
-  if (isLoading) {
-    return /*#__PURE__*/_jsx(LoadingOverlay, {});
-  }
   return /*#__PURE__*/_jsxs(ListDrawerContextProvider, {
     allowCreate: allowCreate,
     createNewDrawerSlug: documentDrawerSlug,
@@ -177,8 +174,17 @@ export const ListDrawerContent = ({
     refresh: refreshSelf,
     selectedOption: selectedOption,
     setSelectedOption: setMySelectedOption,
-    children: [ListView, /*#__PURE__*/_jsx(DocumentDrawer, {
-      onSave: onCreateNew
+    children: [!isLoading && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "drawer__fade-in",
+        children: ListView
+      }), /*#__PURE__*/_jsx(DocumentDrawer, {
+        onSave: onCreateNew
+      })]
+    }), /*#__PURE__*/_jsx(LoadingOverlay, {
+      animationDuration: "200ms",
+      overlayType: "drawer",
+      show: isLoading
     })]
   });
 };

package/dist/elements/ListDrawer/DrawerContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerContent.js","names":["useModal","hoistQueryParamsToAnd","React","useCallback","useEffect","useState","useDocumentDrawer","useEffectEvent","useConfig","useServerFunctions","ListDrawerContextProvider","LoadingOverlay","ListDrawerContent","allowCreate","collectionSlugs","disableQueryPresets","drawerSlug","enableRowSelections","filterOptions","onBulkSelect","onSelect","overrideEntityVisibility","selectedCollection","collectionSlugFromProps","closeModal","isModalOpen","serverFunction","ListView","setListView","undefined","isLoading","setIsLoading","config","collections","getEntityConfig","isOpen","enabledCollections","filter","slug","includes","selectedOption","setSelectedOption","initialSelection","found","collectionSlug","label","labels","value","DocumentDrawer","DocumentDrawerToggler","documentDrawerSlug","updateSelectedOption","refresh","query","newQuery","where","filterOption","result","name","args","disableBulkDelete","disableBulkEdit","List","_err","console","error","onCreateNew","doc","docID","id","onQueryChange","setMySelectedOption","incomingSelection","refreshSelf","incomingCollectionSlug","_jsx","_jsxs","createNewDrawerSlug","onSave"],"sources":["../../../src/elements/ListDrawer/DrawerContent.tsx"],"sourcesContent":["'use client'\nimport type { CollectionSlug, ListQuery } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { hoistQueryParamsToAnd } from 'payload/shared'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { ListDrawerContextProps, ListDrawerContextType } from '../ListDrawer/Provider.js'\nimport type {\n  ListDrawerProps,\n  RenderListServerFnArgs,\n  RenderListServerFnReturnType,\n} from './types.js'\n\nimport { useDocumentDrawer } from '../../elements/DocumentDrawer/index.js'\nimport { useEffectEvent } from '../../hooks/useEffectEvent.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useServerFunctions } from '../../providers/ServerFunctions/index.js'\nimport { ListDrawerContextProvider } from '../ListDrawer/Provider.js'\nimport { LoadingOverlay } from '../Loading/index.js'\nimport { type Option } from '../ReactSelect/index.js'\n\nexport const ListDrawerContent: React.FC<ListDrawerProps> = ({\n  allowCreate = true,\n  collectionSlugs,\n  disableQueryPresets,\n  drawerSlug,\n  enableRowSelections,\n  filterOptions,\n  onBulkSelect,\n  onSelect,\n  overrideEntityVisibility = true,\n  selectedCollection: collectionSlugFromProps,\n}) => {\n  const { closeModal, isModalOpen } = useModal()\n\n  const { serverFunction } = useServerFunctions()\n  const [ListView, setListView] = useState<React.ReactNode>(undefined)\n  const [isLoading, setIsLoading] = useState(true)\n\n  const {\n    config: { collections },\n    getEntityConfig,\n  } = useConfig()\n\n  const isOpen = isModalOpen(drawerSlug)\n\n  const enabledCollections = collections.filter(({ slug }) => {\n    return collectionSlugs.includes(slug)\n  })\n\n  const [selectedOption, setSelectedOption] = useState<Option<string>>(() => {\n    const initialSelection = collectionSlugFromProps || enabledCollections[0]?.slug\n    const found = getEntityConfig({ collectionSlug: initialSelection })\n\n    return found\n      ? {\n          label: found.labels,\n          value: found.slug,\n        }\n      : undefined\n  })\n\n  const [DocumentDrawer, DocumentDrawerToggler, { drawerSlug: documentDrawerSlug }] =\n    useDocumentDrawer({\n      collectionSlug: selectedOption.value,\n    })\n\n  const updateSelectedOption = useEffectEvent((collectionSlug: CollectionSlug) => {\n    if (collectionSlug && collectionSlug !== selectedOption?.value) {\n      setSelectedOption({\n        label: getEntityConfig({ collectionSlug })?.labels,\n        value: collectionSlug,\n      })\n    }\n  })\n\n  useEffect(() => {\n    updateSelectedOption(collectionSlugFromProps)\n  }, [collectionSlugFromProps])\n\n  /**\n   * This performs a full server round trip to get the list view for the selected collection.\n   * On the server, the data is freshly queried for the list view and all components are fully rendered.\n   * This work includes building column state, rendering custom components, etc.\n   */\n  const refresh = useCallback(\n    async ({ slug, query }: { query?: ListQuery; slug: string }) => {\n      try {\n        const newQuery: ListQuery = { ...(query || {}), where: { ...(query?.where || {}) } }\n\n        const filterOption = filterOptions?.[slug]\n\n        if (filterOptions && typeof filterOption !== 'boolean') {\n          newQuery.where = hoistQueryParamsToAnd(newQuery.where, filterOption)\n        }\n\n        if (slug) {\n          const result: RenderListServerFnReturnType = (await serverFunction({\n            name: 'render-list',\n            args: {\n              collectionSlug: slug,\n              disableBulkDelete: true,\n              disableBulkEdit: true,\n              disableQueryPresets,\n              drawerSlug,\n              enableRowSelections,\n              overrideEntityVisibility,\n              query: newQuery,\n            } satisfies RenderListServerFnArgs,\n          })) as RenderListServerFnReturnType\n\n          setListView(result?.List || null)\n        } else {\n          setListView(null)\n        }\n        setIsLoading(false)\n      } catch (_err) {\n        console.error('Error rendering List View: ', _err) // eslint-disable-line no-console\n\n        if (isOpen) {\n          closeModal(drawerSlug)\n        }\n      }\n    },\n    [\n      serverFunction,\n      closeModal,\n      drawerSlug,\n      isOpen,\n      enableRowSelections,\n      filterOptions,\n      overrideEntityVisibility,\n      disableQueryPresets,\n    ],\n  )\n\n  useEffect(() => {\n    if (!ListView) {\n      void refresh({ slug: selectedOption?.value })\n    }\n  }, [refresh, ListView, selectedOption.value])\n\n  const onCreateNew = useCallback(\n    ({ doc }) => {\n      if (typeof onSelect === 'function') {\n        onSelect({\n          collectionSlug: selectedOption?.value,\n          doc,\n          docID: doc.id,\n        })\n      }\n\n      closeModal(documentDrawerSlug)\n      closeModal(drawerSlug)\n    },\n    [closeModal, documentDrawerSlug, drawerSlug, onSelect, selectedOption.value],\n  )\n\n  const onQueryChange: ListDrawerContextProps['onQueryChange'] = useCallback(\n    (query) => {\n      void refresh({ slug: selectedOption?.value, query })\n    },\n    [refresh, selectedOption.value],\n  )\n\n  const setMySelectedOption: ListDrawerContextProps['setSelectedOption'] = useCallback(\n    (incomingSelection) => {\n      setSelectedOption(incomingSelection)\n      void refresh({ slug: incomingSelection?.value })\n    },\n    [refresh],\n  )\n\n  const refreshSelf: ListDrawerContextType['refresh'] = useCallback(\n    async (incomingCollectionSlug) => {\n      if (incomingCollectionSlug) {\n        setSelectedOption({\n          label: getEntityConfig({ collectionSlug: incomingCollectionSlug })?.labels,\n          value: incomingCollectionSlug,\n        })\n      }\n\n      await refresh({ slug: selectedOption.value || incomingCollectionSlug })\n    },\n    [getEntityConfig, refresh, selectedOption.value],\n  )\n\n  if (isLoading) {\n    return <LoadingOverlay />\n  }\n\n  return (\n    <ListDrawerContextProvider\n      allowCreate={allowCreate}\n      createNewDrawerSlug={documentDrawerSlug}\n      DocumentDrawerToggler={DocumentDrawerToggler}\n      drawerSlug={drawerSlug}\n      enabledCollections={collectionSlugs}\n      onBulkSelect={onBulkSelect}\n      onQueryChange={onQueryChange}\n      onSelect={onSelect}\n      refresh={refreshSelf}\n      selectedOption={selectedOption}\n      setSelectedOption={setMySelectedOption}\n    >\n      {ListView}\n      <DocumentDrawer onSave={onCreateNew} />\n    </ListDrawerContextProvider>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DrawerContent.js","names":["useModal","hoistQueryParamsToAnd","React","useCallback","useEffect","useState","useDocumentDrawer","useEffectEvent","useConfig","useServerFunctions","ListDrawerContextProvider","LoadingOverlay","ListDrawerContent","allowCreate","collectionSlugs","disableQueryPresets","drawerSlug","enableRowSelections","filterOptions","onBulkSelect","onSelect","overrideEntityVisibility","selectedCollection","collectionSlugFromProps","closeModal","isModalOpen","serverFunction","ListView","setListView","undefined","isLoading","setIsLoading","config","collections","getEntityConfig","isOpen","enabledCollections","filter","slug","includes","selectedOption","setSelectedOption","initialSelection","found","collectionSlug","label","labels","value","DocumentDrawer","DocumentDrawerToggler","documentDrawerSlug","updateSelectedOption","refresh","query","newQuery","where","filterOption","result","name","args","disableBulkDelete","disableBulkEdit","List","_err","console","error","onCreateNew","doc","docID","id","onQueryChange","setMySelectedOption","incomingSelection","refreshSelf","incomingCollectionSlug","_jsxs","createNewDrawerSlug","_Fragment","_jsx","className","onSave","animationDuration","overlayType","show"],"sources":["../../../src/elements/ListDrawer/DrawerContent.tsx"],"sourcesContent":["'use client'\nimport type { CollectionSlug, ListQuery } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { hoistQueryParamsToAnd } from 'payload/shared'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { ListDrawerContextProps, ListDrawerContextType } from '../ListDrawer/Provider.js'\nimport type {\n  ListDrawerProps,\n  RenderListServerFnArgs,\n  RenderListServerFnReturnType,\n} from './types.js'\n\nimport { useDocumentDrawer } from '../../elements/DocumentDrawer/index.js'\nimport { useEffectEvent } from '../../hooks/useEffectEvent.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useServerFunctions } from '../../providers/ServerFunctions/index.js'\nimport { ListDrawerContextProvider } from '../ListDrawer/Provider.js'\nimport { LoadingOverlay } from '../Loading/index.js'\nimport { type Option } from '../ReactSelect/index.js'\n\nexport const ListDrawerContent: React.FC<ListDrawerProps> = ({\n  allowCreate = true,\n  collectionSlugs,\n  disableQueryPresets,\n  drawerSlug,\n  enableRowSelections,\n  filterOptions,\n  onBulkSelect,\n  onSelect,\n  overrideEntityVisibility = true,\n  selectedCollection: collectionSlugFromProps,\n}) => {\n  const { closeModal, isModalOpen } = useModal()\n\n  const { serverFunction } = useServerFunctions()\n  const [ListView, setListView] = useState<React.ReactNode>(undefined)\n  const [isLoading, setIsLoading] = useState(true)\n\n  const {\n    config: { collections },\n    getEntityConfig,\n  } = useConfig()\n\n  const isOpen = isModalOpen(drawerSlug)\n\n  const enabledCollections = collections.filter(({ slug }) => {\n    return collectionSlugs.includes(slug)\n  })\n\n  const [selectedOption, setSelectedOption] = useState<Option<string>>(() => {\n    const initialSelection = collectionSlugFromProps || enabledCollections[0]?.slug\n    const found = getEntityConfig({ collectionSlug: initialSelection })\n\n    return found\n      ? {\n          label: found.labels,\n          value: found.slug,\n        }\n      : undefined\n  })\n\n  const [DocumentDrawer, DocumentDrawerToggler, { drawerSlug: documentDrawerSlug }] =\n    useDocumentDrawer({\n      collectionSlug: selectedOption.value,\n    })\n\n  const updateSelectedOption = useEffectEvent((collectionSlug: CollectionSlug) => {\n    if (collectionSlug && collectionSlug !== selectedOption?.value) {\n      setSelectedOption({\n        label: getEntityConfig({ collectionSlug })?.labels,\n        value: collectionSlug,\n      })\n    }\n  })\n\n  useEffect(() => {\n    updateSelectedOption(collectionSlugFromProps)\n  }, [collectionSlugFromProps])\n\n  /**\n   * This performs a full server round trip to get the list view for the selected collection.\n   * On the server, the data is freshly queried for the list view and all components are fully rendered.\n   * This work includes building column state, rendering custom components, etc.\n   */\n  const refresh = useCallback(\n    async ({ slug, query }: { query?: ListQuery; slug: string }) => {\n      try {\n        const newQuery: ListQuery = { ...(query || {}), where: { ...(query?.where || {}) } }\n\n        const filterOption = filterOptions?.[slug]\n\n        if (filterOptions && typeof filterOption !== 'boolean') {\n          newQuery.where = hoistQueryParamsToAnd(newQuery.where, filterOption)\n        }\n\n        if (slug) {\n          const result: RenderListServerFnReturnType = (await serverFunction({\n            name: 'render-list',\n            args: {\n              collectionSlug: slug,\n              disableBulkDelete: true,\n              disableBulkEdit: true,\n              disableQueryPresets,\n              drawerSlug,\n              enableRowSelections,\n              overrideEntityVisibility,\n              query: newQuery,\n            } satisfies RenderListServerFnArgs,\n          })) as RenderListServerFnReturnType\n\n          setListView(result?.List || null)\n        } else {\n          setListView(null)\n        }\n        setIsLoading(false)\n      } catch (_err) {\n        console.error('Error rendering List View: ', _err) // eslint-disable-line no-console\n\n        if (isOpen) {\n          closeModal(drawerSlug)\n        }\n      }\n    },\n    [\n      serverFunction,\n      closeModal,\n      drawerSlug,\n      isOpen,\n      enableRowSelections,\n      filterOptions,\n      overrideEntityVisibility,\n      disableQueryPresets,\n    ],\n  )\n\n  useEffect(() => {\n    if (!ListView) {\n      void refresh({ slug: selectedOption?.value })\n    }\n  }, [refresh, ListView, selectedOption.value])\n\n  const onCreateNew = useCallback(\n    ({ doc }) => {\n      if (typeof onSelect === 'function') {\n        onSelect({\n          collectionSlug: selectedOption?.value,\n          doc,\n          docID: doc.id,\n        })\n      }\n\n      closeModal(documentDrawerSlug)\n      closeModal(drawerSlug)\n    },\n    [closeModal, documentDrawerSlug, drawerSlug, onSelect, selectedOption.value],\n  )\n\n  const onQueryChange: ListDrawerContextProps['onQueryChange'] = useCallback(\n    (query) => {\n      void refresh({ slug: selectedOption?.value, query })\n    },\n    [refresh, selectedOption.value],\n  )\n\n  const setMySelectedOption: ListDrawerContextProps['setSelectedOption'] = useCallback(\n    (incomingSelection) => {\n      setSelectedOption(incomingSelection)\n      void refresh({ slug: incomingSelection?.value })\n    },\n    [refresh],\n  )\n\n  const refreshSelf: ListDrawerContextType['refresh'] = useCallback(\n    async (incomingCollectionSlug) => {\n      if (incomingCollectionSlug) {\n        setSelectedOption({\n          label: getEntityConfig({ collectionSlug: incomingCollectionSlug })?.labels,\n          value: incomingCollectionSlug,\n        })\n      }\n\n      await refresh({ slug: selectedOption.value || incomingCollectionSlug })\n    },\n    [getEntityConfig, refresh, selectedOption.value],\n  )\n\n  return (\n    <ListDrawerContextProvider\n      allowCreate={allowCreate}\n      createNewDrawerSlug={documentDrawerSlug}\n      DocumentDrawerToggler={DocumentDrawerToggler}\n      drawerSlug={drawerSlug}\n      enabledCollections={collectionSlugs}\n      onBulkSelect={onBulkSelect}\n      onQueryChange={onQueryChange}\n      onSelect={onSelect}\n      refresh={refreshSelf}\n      selectedOption={selectedOption}\n      setSelectedOption={setMySelectedOption}\n    >\n      {!isLoading && (\n        <>\n          <div className=\"drawer__fade-in\">{ListView}</div>\n          <DocumentDrawer onSave={onCreateNew} />\n        </>\n      )}\n      <LoadingOverlay animationDuration=\"200ms\" overlayType=\"drawer\" show={isLoading} />\n    </ListDrawerContextProvider>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/ListSelection/index.css

@@ -2,7 +2,7 @@
   .list-selection {
     display: flex;
     margin-left: auto;
-    color: var(--theme-elevation-500);
+    color: var(--color-text-secondary);
     gap: var(--spacer-1);
     align-items: center;
   }

package/dist/elements/LivePreview/ToolbarArea/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare const ToolbarArea: React.FC<{
     children: React.ReactNode;
 }>;

package/dist/elements/LivePreview/ToolbarArea/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/LivePreview/ToolbarArea/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAYA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/LivePreview/ToolbarArea/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAYA,CAAA"}

package/dist/elements/LivePreview/ToolbarArea/index.js

@@ -4,7 +4,7 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useDroppable } from '@dnd-kit/core';
 import React from 'react';
-import './index.scss';
+import './index.css';
 const baseClass = 'toolbar-area';
 export const ToolbarArea = props => {
   const $ = _c(4);

package/dist/elements/LivePreview/ToolbarArea/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useDroppable","React","baseClass","ToolbarArea","props","$","children","t0","Symbol","for","id","setNodeRef","t1","_jsx","className","ref"],"sources":["../../../../src/elements/LivePreview/ToolbarArea/index.tsx"],"sourcesContent":["'use client'\nimport { useDroppable } from '@dnd-kit/core'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'toolbar-area'\n\nexport const ToolbarArea: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const { setNodeRef } = useDroppable({\n    id: 'live-preview-area',\n  })\n\n  return (\n    <div className={baseClass} ref={setNodeRef}>\n      {children}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,YAAY,QAAQ;AAC7B,OAAOC,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,WAAA,GAERC,KAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EACH;IAAAO;EAAA,IAAqBF,KAAA;EAAA,IAAAG,EAAA;EAAA,IAAAF,CAAA,QAAAG,MAAA,CAAAC,GAAA;IAEeF,EAAA;MAAAG,EAAA,EAC9B;IAAA;IACNL,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAFA;IAAAM;EAAA,IAAuBX,YAAA,CAAaO,EAEpC;EAAA,IAAAK,EAAA;EAAA,IAAAP,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAM,UAAA;IAGEC,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EAAAZ,SAAA;MAAAa,GAAA,EAA+BJ,UAAA;MAAAL;IAAA,C;;;;;;;SAAhCM,E;CAIJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","useDroppable","React","baseClass","ToolbarArea","props","$","children","t0","Symbol","for","id","setNodeRef","t1","_jsx","className","ref"],"sources":["../../../../src/elements/LivePreview/ToolbarArea/index.tsx"],"sourcesContent":["'use client'\nimport { useDroppable } from '@dnd-kit/core'\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'toolbar-area'\n\nexport const ToolbarArea: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const { setNodeRef } = useDroppable({\n    id: 'live-preview-area',\n  })\n\n  return (\n    <div className={baseClass} ref={setNodeRef}>\n      {children}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,YAAY,QAAQ;AAC7B,OAAOC,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,WAAA,GAERC,KAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EACH;IAAAO;EAAA,IAAqBF,KAAA;EAAA,IAAAG,EAAA;EAAA,IAAAF,CAAA,QAAAG,MAAA,CAAAC,GAAA;IAEeF,EAAA;MAAAG,EAAA,EAC9B;IAAA;IACNL,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAFA;IAAAM;EAAA,IAAuBX,YAAA,CAAaO,EAEpC;EAAA,IAAAK,EAAA;EAAA,IAAAP,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAM,UAAA;IAGEC,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EAAAZ,SAAA;MAAAa,GAAA,EAA+BJ,UAAA;MAAAL;IAAA,C;;;;;;;SAAhCM,E;CAIJ","ignoreList":[]}

package/dist/elements/LoadMoreRow/index.css

@@ -0,0 +1,34 @@
+@layer payload-default {
+  .load-more-row {
+    display: flex;
+    align-items: center;
+    gap: var(--stroke-width-medium);
+  }
+
+  .load-more-row__text {
+    margin: 0;
+    color: var(--color-text-secondary);
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-1);
+  }
+
+  .load-more-row__button.btn {
+    background-color: transparent;
+    padding: 0;
+    color: var(--color-text);
+    font-size: inherit;
+    text-decoration: underline;
+  }
+
+  .load-more-row__button.btn:hover:not(.btn--disabled) {
+    color: var(--color-text-secondary);
+    background-color: transparent;
+  }
+
+  .load-more-row__button.btn:active:not(.btn--disabled) {
+    color: var(--color-text);
+    background-color: transparent;
+  }
+}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export type LoadMoreRowProps = {
     className?: string;
     currentCount: number;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/LoadMoreRow/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,MAAM,CAAA;IACpB,OAAO,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gFAAgF;IAChF,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAyClD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/LoadMoreRow/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,MAAM,CAAA;IACpB,OAAO,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gFAAgF;IAChF,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsClD,CAAA"}

package/dist/elements/LoadMoreRow/index.js

@@ -5,8 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React from 'react';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Button } from '../Button/index.js';
-import { TreeConnector } from '../Hierarchy/Tree/TreeConnector.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'load-more-row';
 export const LoadMoreRow = t0 => {
   const $ = _c(12);
@@ -42,20 +41,17 @@ export const LoadMoreRow = t0 => {
     } else {
       t3 = $[11];
     }
-    t2 = _jsxs("div", {
+    t2 = _jsx("div", {
       className: t3.join(" "),
       style,
-      children: [_jsx("div", {
-        className: `${baseClass}__connector`,
-        children: _jsx(TreeConnector, {})
-      }), _jsx("p", {
+      children: _jsx("p", {
         className: `${baseClass}__text`,
         children: hasMore ? _jsxs(_Fragment, {
           children: ["Showing ", currentCount, " of ", totalDocs, " \u2014 ", loadMoreButton || defaultButton]
         }) : _jsxs(_Fragment, {
           children: ["Showing ", totalDocs, " of ", totalDocs]
         })
-      })]
+      })
     });
     $[0] = className;
     $[1] = currentCount;

package/dist/elements/LoadMoreRow/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useTranslation","Button","TreeConnector","baseClass","LoadMoreRow","t0","$","className","currentCount","hasMore","isLoading","t1","loadMoreButton","onLoadMore","style","totalDocs","undefined","t","t2","defaultButton","_jsx","buttonStyle","disabled","margin","onClick","children","t3","filter","Boolean","_jsxs","join","_Fragment"],"sources":["../../../src/elements/LoadMoreRow/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { TreeConnector } from '../Hierarchy/Tree/TreeConnector.js'\nimport './index.scss'\n\nconst baseClass = 'load-more-row'\n\nexport type LoadMoreRowProps = {\n  className?: string\n  currentCount: number\n  hasMore: boolean\n  isLoading?: boolean\n  /** Custom button element - if provided, onLoadMore and isLoading are ignored */\n  loadMoreButton?: React.ReactNode\n  onLoadMore?: () => void\n  style?: React.CSSProperties\n  totalDocs: number\n}\n\nexport const LoadMoreRow: React.FC<LoadMoreRowProps> = ({\n  className,\n  currentCount,\n  hasMore,\n  isLoading = false,\n  loadMoreButton,\n  onLoadMore,\n  style,\n  totalDocs,\n}) => {\n  const { t } = useTranslation()\n  const defaultButton = onLoadMore && (\n    <Button\n      buttonStyle=\"ghost\"\n      className={`${baseClass}__button`}\n      disabled={isLoading}\n      margin={false}\n      onClick={onLoadMore}\n    >\n      {isLoading ? t('general:loading') : t('general:loadMore')}\n    </Button>\n  )\n\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')} style={style}>\n      <div className={`${baseClass}__connector`}>\n        <TreeConnector />\n      </div>\n      <p className={`${baseClass}__text`}>\n        {hasMore ? (\n          <>\n            Showing {currentCount} of {totalDocs} — {loadMoreButton || defaultButton}\n          </>\n        ) : (\n          <>\n            Showing {totalDocs} of {totalDocs}\n          </>\n        )}\n      </p>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,aAAa,QAAQ;AAC9B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAclB,OAAO,MAAMC,WAAA,GAA0CC,EAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EAAC;IAAAS,SAAA;IAAAC,YAAA;IAAAC,OAAA;IAAAC,SAAA,EAAAC,EAAA;IAAAC,cAAA;IAAAC,UAAA;IAAAC,KAAA;IAAAC;EAAA,IAAAV,EASvD;EALC,MAAAK,SAAA,GAAAC,EAAiB,KAAAK,SAAA,WAAjBL,EAAiB;EAMjB;IAAAM;EAAA,IAAcjB,cAAA;EAAA,IAAAkB,EAAA;EAAA,IAAAZ,CAAA,QAAAC,SAAA,IAAAD,CAAA,QAAAE,YAAA,IAAAF,CAAA,QAAAG,OAAA,IAAAH,CAAA,QAAAI,SAAA,IAAAJ,CAAA,QAAAM,cAAA,IAAAN,CAAA,QAAAO,UAAA,IAAAP,CAAA,QAAAQ,KAAA,IAAAR,CAAA,QAAAW,CAAA,IAAAX,CAAA,QAAAS,SAAA;IACd,MAAAI,aAAA,GAAsBN,UAAA,IACpBO,IAAA,CAAAnB,MAAA;MAAAoB,WAAA,EACc;MAAAd,SAAA,EACD,GAAAJ,SAAA,UAAsB;MAAAmB,QAAA,EACvBZ,SAAA;MAAAa,MAAA;MAAAC,OAAA,EAEDX,UAAA;MAAAY,QAAA,EAERf,SAAA,GAAYO,CAAA,CAAE,qBAAqBA,CAAA,CAAE;IAAA,C;;;MAKxBS,EAAA,IAAAvB,SAAA,EAAYI,SAAA,EAAAoB,MAAA,CAAAC,OAAkB;MAAAtB,CAAA,OAAAC,SAAA;MAAAD,CAAA,OAAAoB,EAAA;IAAA;MAAAA,EAAA,GAAApB,CAAA;IAAA;IAA9CY,EAAA,GAAAW,KAAA,CAAC;MAAAtB,SAAA,EAAemB,EAA8B,CAAAI,IAAA,CAAc;MAAAhB,KAAA;MAAAW,QAAA,GAC1DL,IAAA,CAAC;QAAAb,SAAA,EAAe,GAAAJ,SAAA,aAAyB;QAAAsB,QAAA,EACvCL,IAAA,CAAAlB,aAAA,IAAC;MAAA,C,GAEHkB,IAAA,CAAC;QAAAb,SAAA,EAAa,GAAAJ,SAAA,QAAoB;QAAAsB,QAAA,EAC/BhB,OAAA,GACCoB,KAAA,CAAAE,SAAA;UAAAN,QAAA,GAAE,YACSjB,YAAA,EAAa,QAAKO,SAAA,EAAU,YAAIH,cAAA,IAAkBO,aAAA;QAAA,C,IAG7DU,KAAA,CAAAE,SAAA;UAAAN,QAAA,GAAE,YACSV,SAAA,EAAU,QAAKA,SAAA;QAAA,C;;;;;;;;;;;;;;;;SAXhCG,E;CAiBJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useTranslation","Button","baseClass","LoadMoreRow","t0","$","className","currentCount","hasMore","isLoading","t1","loadMoreButton","onLoadMore","style","totalDocs","undefined","t","t2","defaultButton","_jsx","buttonStyle","disabled","margin","onClick","children","t3","filter","Boolean","join","_jsxs","_Fragment"],"sources":["../../../src/elements/LoadMoreRow/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.css'\n\nconst baseClass = 'load-more-row'\n\nexport type LoadMoreRowProps = {\n  className?: string\n  currentCount: number\n  hasMore: boolean\n  isLoading?: boolean\n  /** Custom button element - if provided, onLoadMore and isLoading are ignored */\n  loadMoreButton?: React.ReactNode\n  onLoadMore?: () => void\n  style?: React.CSSProperties\n  totalDocs: number\n}\n\nexport const LoadMoreRow: React.FC<LoadMoreRowProps> = ({\n  className,\n  currentCount,\n  hasMore,\n  isLoading = false,\n  loadMoreButton,\n  onLoadMore,\n  style,\n  totalDocs,\n}) => {\n  const { t } = useTranslation()\n  const defaultButton = onLoadMore && (\n    <Button\n      buttonStyle=\"ghost\"\n      className={`${baseClass}__button`}\n      disabled={isLoading}\n      margin={false}\n      onClick={onLoadMore}\n    >\n      {isLoading ? t('general:loading') : t('general:loadMore')}\n    </Button>\n  )\n\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')} style={style}>\n      <p className={`${baseClass}__text`}>\n        {hasMore ? (\n          <>\n            Showing {currentCount} of {totalDocs} — {loadMoreButton || defaultButton}\n          </>\n        ) : (\n          <>\n            Showing {totalDocs} of {totalDocs}\n          </>\n        )}\n      </p>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAclB,OAAO,MAAMC,WAAA,GAA0CC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAC;IAAAQ,SAAA;IAAAC,YAAA;IAAAC,OAAA;IAAAC,SAAA,EAAAC,EAAA;IAAAC,cAAA;IAAAC,UAAA;IAAAC,KAAA;IAAAC;EAAA,IAAAV,EASvD;EALC,MAAAK,SAAA,GAAAC,EAAiB,KAAAK,SAAA,WAAjBL,EAAiB;EAMjB;IAAAM;EAAA,IAAchB,cAAA;EAAA,IAAAiB,EAAA;EAAA,IAAAZ,CAAA,QAAAC,SAAA,IAAAD,CAAA,QAAAE,YAAA,IAAAF,CAAA,QAAAG,OAAA,IAAAH,CAAA,QAAAI,SAAA,IAAAJ,CAAA,QAAAM,cAAA,IAAAN,CAAA,QAAAO,UAAA,IAAAP,CAAA,QAAAQ,KAAA,IAAAR,CAAA,QAAAW,CAAA,IAAAX,CAAA,QAAAS,SAAA;IACd,MAAAI,aAAA,GAAsBN,UAAA,IACpBO,IAAA,CAAAlB,MAAA;MAAAmB,WAAA,EACc;MAAAd,SAAA,EACD,GAAAJ,SAAA,UAAsB;MAAAmB,QAAA,EACvBZ,SAAA;MAAAa,MAAA;MAAAC,OAAA,EAEDX,UAAA;MAAAY,QAAA,EAERf,SAAA,GAAYO,CAAA,CAAE,qBAAqBA,CAAA,CAAE;IAAA,C;;;MAKxBS,EAAA,IAAAvB,SAAA,EAAYI,SAAA,EAAAoB,MAAA,CAAAC,OAAkB;MAAAtB,CAAA,OAAAC,SAAA;MAAAD,CAAA,OAAAoB,EAAA;IAAA;MAAAA,EAAA,GAAApB,CAAA;IAAA;IAA9CY,EAAA,GAAAE,IAAA,CAAC;MAAAb,SAAA,EAAemB,EAA8B,CAAAG,IAAA,CAAc;MAAAf,KAAA;MAAAW,QAAA,EAC1DL,IAAA,CAAC;QAAAb,SAAA,EAAa,GAAAJ,SAAA,QAAoB;QAAAsB,QAAA,EAC/BhB,OAAA,GACCqB,KAAA,CAAAC,SAAA;UAAAN,QAAA,GAAE,YACSjB,YAAA,EAAa,QAAKO,SAAA,EAAU,YAAIH,cAAA,IAAkBO,aAAA;QAAA,C,IAG7DW,KAAA,CAAAC,SAAA;UAAAN,QAAA,GAAE,YACSV,SAAA,EAAU,QAAKA,SAAA;QAAA,C;;;;;;;;;;;;;;;;SARhCG,E;CAcJ","ignoreList":[]}

package/dist/elements/Loading/index.css

@@ -28,90 +28,44 @@
     animation: fade-out ease;
   }
 
-  .loading-overlay::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+  /*
+   * Drawer variant: the overlay is just a calm, opaque backdrop shown while the
+   * drawer loads. It appears instantly (no fade-in ramp); the graceful reveal is
+   * handled by the content fading in once it's ready (.drawer__fade-in). The
+   * spinner is held back so quick (nested) drawer loads never flash it.
+   */
+  .loading-overlay--drawer::after {
+    opacity: 1;
     background-color: var(--color-bg);
-    opacity: 0.85;
-    z-index: -1;
-  }
-
-  .loading-overlay__bars {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-    gap: 7px;
-    align-items: center;
   }
 
-  .loading-overlay__bar {
-    width: 2px;
-    background-color: currentColor;
-    height: 15px;
-
-    &:nth-child(1) {
-      transform: translateY(0);
-      animation: animate-bar--odd 1.25s infinite;
-    }
-
-    &:nth-child(2) {
-      transform: translateY(-2px);
-      animation: animate-bar--even 1.25s infinite;
-    }
-
-    &:nth-child(3) {
-      transform: translateY(0);
-      animation: animate-bar--odd 1.25s infinite;
-    }
-
-    &:nth-child(4) {
-      transform: translateY(-2px);
-      animation: animate-bar--even 1.25s infinite;
-    }
-
-    &:nth-child(5) {
-      transform: translateY(0);
-      animation: animate-bar--odd 1.25s infinite;
-    }
+  .loading-overlay--drawer.loading-overlay--entering {
+    animation: none;
+    opacity: 1;
   }
 
-  .loading-overlay__text {
-    margin-top: var(--spacer-3);
-    text-transform: uppercase;
-    font-family: var(--text-body-medium-font-family);
-    font-size: var(--text-body-medium-font-size);
-    letter-spacing: 3px;
+  .loading-overlay--drawer .spinner {
+    opacity: 0;
+    animation: fade-in 200ms ease 450ms forwards;
   }
 
-  @keyframes animate-bar--even {
-    0% {
-      transform: translateY(2px);
-    }
-
-    50% {
-      transform: translateY(-2px);
-    }
-
-    100% {
-      transform: translateY(2px);
+  @media (prefers-reduced-motion: reduce) {
+    .loading-overlay--drawer .spinner {
+      animation: none;
+      opacity: 1;
     }
   }
 
-  @keyframes animate-bar--odd {
-    0% {
-      transform: translateY(-2px);
-    }
-
-    50% {
-      transform: translateY(2px);
-    }
-
-    100% {
-      transform: translateY(-2px);
-    }
+  .loading-overlay::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--color-bg);
+    opacity: 0.85;
+    z-index: -1;
   }
 
   @keyframes fade-in {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Loading/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAA;AAKjF,OAAO,aAAa,CAAA;AAIpB,KAAK,mBAAmB,GAAG;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAgCxD,CAAA;AAED,MAAM,MAAM,4BAA4B,GAAG;IACzC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,OAAO,CAAA;IACb,IAAI,CAAC,EAAE,mBAAmB,CAAA;CAC3B,CAAA;AACD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CA0BvE,CAAA;AAED,MAAM,MAAM,6BAA6B,GAAG;IAC1C,MAAM,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAA;IACvC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,mBAAmB,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CA0B5E,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Loading/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAA;AAMjF,OAAO,aAAa,CAAA;AAIpB,KAAK,mBAAmB,GAAG;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAqBxD,CAAA;AAED,MAAM,MAAM,4BAA4B,GAAG;IACzC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,OAAO,CAAA;IACb,IAAI,CAAC,EAAE,mBAAmB,CAAA;CAC3B,CAAA;AACD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CA0BvE,CAAA;AAED,MAAM,MAAM,6BAA6B,GAAG;IAC1C,MAAM,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAA;IACvC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,mBAAmB,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CA0B5E,CAAA"}