@payloadcms/ui 4.0.0-internal.a7ca468 → 4.0.0-internal.af6aad0

package/dist/elements/SelectRow/index.js

@@ -79,8 +79,7 @@ export const SelectRow = t0 => {
       "aria-label": selectRowLabel,
       checked: t3,
       className: t4.join(" "),
-      onToggle: t5,
-      variant: "muted"
+      onToggle: t5
     });
     $[10] = selectRowLabel;
     $[11] = t3;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","CheckboxInput","useAuth","useSelection","Locked","baseClass","SelectRow","t0","$","rowData","selectRowLabel","user","selected","setSelection","t1","id","Symbol","for","_isLocked","_userEditing","documentIsLocked","_jsx","t2","get","t3","Boolean","t4","t5","t6","checked","className","join","onToggle","variant"],"sources":["../../../src/elements/SelectRow/index.tsx"],"sourcesContent":["'use client'\nimport type { User } from 'payload'\n\nimport React from 'react'\n\nimport { CheckboxInput } from '../../fields/Checkbox/Input.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useSelection } from '../../providers/Selection/index.js'\nimport { Locked } from '../Locked/index.js'\nimport './index.css'\n\nconst baseClass = 'select-row'\n\nexport const SelectRow: React.FC<{\n  rowData: {\n    _isLocked?: boolean\n    _userEditing?: User\n    id: number | string\n  }\n  selectRowLabel: string\n}> = ({ rowData, selectRowLabel }) => {\n  const { user } = useAuth()\n  const { selected, setSelection } = useSelection()\n  const { _isLocked, _userEditing } = rowData || {}\n\n  const documentIsLocked = _isLocked && _userEditing\n\n  if (documentIsLocked && _userEditing.id !== user?.id) {\n    return <Locked user={_userEditing} />\n  }\n\n  return (\n    <CheckboxInput\n      aria-label={selectRowLabel}\n      checked={Boolean(selected.get(rowData.id))}\n      className={[baseClass, `${baseClass}__checkbox`].join(' ')}\n      onToggle={() => setSelection(rowData.id)}\n      variant=\"muted\"\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAW;AAElB,SAASC,aAAa,QAAQ;AAC9B,SAASC,OAAO,QAAQ;AACxB,SAASC,YAAY,QAAQ;AAC7B,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,SAAA,GAORC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU,OAAA;IAAAC;EAAA,IAAAH,EAA2B;EAC/B;IAAAI;EAAA,IAAiBT,OAAA;EACjB;IAAAU,QAAA;IAAAC;EAAA,IAAmCV,YAAA;EAAA,IAAAW,EAAA;EAAA,IAAAN,CAAA,QAAAC,OAAA,IAAAD,CAAA,QAAAG,IAAA,EAAAI,EAAA;IAM1BD,EAAA,GAAAE,MAAA,CAAAC,GAAA,8B;;MALT;QAAAC,SAAA;QAAAC;MAAA,IAAoCV,OAAA,MAAY;MAEhD,MAAAW,gBAAA,GAAyBF,SAAA,IAAaC,YAAA;MAAA,IAElCC,gBAAA,IAAoBD,YAAA,CAAAJ,EAAA,KAAoBJ,IAAA,EAAAI,EAAM;QACzCD,EAAA,GAAAO,IAAA,CAAAjB,MAAA;UAAAO,IAAA,EAAcQ;QAAA,C;;;;;;;;;;;;;;;IAMFG,EAAA,GAAAV,QAAA,CAAAW,GAAA,CAAad,OAAA,CAAAM,EAAU;IAAAP,CAAA,MAAAC,OAAA,CAAAM,EAAA;IAAAP,CAAA,MAAAI,QAAA;IAAAJ,CAAA,MAAAc,EAAA;EAAA;IAAAA,EAAA,GAAAd,CAAA;EAAA;EAA/B,MAAAgB,EAAA,GAAAC,OAAA,CAAQH,EAAuB;EAAA,IAAAI,EAAA;EAAA,IAAAlB,CAAA,QAAAQ,MAAA,CAAAC,GAAA;IAC7BS,EAAA,IAAArB,SAAA,EAAY,GAAAA,SAAA,YAAwB;IAACG,CAAA,MAAAkB,EAAA;EAAA;IAAAA,EAAA,GAAAlB,CAAA;EAAA;EAAA,IAAAmB,EAAA;EAAA,IAAAnB,CAAA,QAAAC,OAAA,CAAAM,EAAA,IAAAP,CAAA,QAAAK,YAAA;IACtCc,EAAA,GAAAA,CAAA,KAAMd,YAAA,CAAaJ,OAAA,CAAAM,EAAU;IAAAP,CAAA,MAAAC,OAAA,CAAAM,EAAA;IAAAP,CAAA,MAAAK,YAAA;IAAAL,CAAA,MAAAmB,EAAA;EAAA;IAAAA,EAAA,GAAAnB,CAAA;EAAA;EAAA,IAAAoB,EAAA;EAAA,IAAApB,CAAA,SAAAE,cAAA,IAAAF,CAAA,SAAAgB,EAAA,IAAAhB,CAAA,SAAAmB,EAAA;IAJzCC,EAAA,GAAAP,IAAA,CAAApB,aAAA;MAAA,cACcS,cAAA;MAAAmB,OAAA,EACHL,EAA+B;MAAAM,SAAA,EAC7BJ,EAAqC,CAAAK,IAAA,CAAM;MAAAC,QAAA,EAC5CL,EAA6B;MAAAM,OAAA,EAC/B;IAAA,C;;;;;;;;SALVL,E;CAQJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","CheckboxInput","useAuth","useSelection","Locked","baseClass","SelectRow","t0","$","rowData","selectRowLabel","user","selected","setSelection","t1","id","Symbol","for","_isLocked","_userEditing","documentIsLocked","_jsx","t2","get","t3","Boolean","t4","t5","t6","checked","className","join","onToggle"],"sources":["../../../src/elements/SelectRow/index.tsx"],"sourcesContent":["'use client'\nimport type { User } from 'payload'\n\nimport React from 'react'\n\nimport { CheckboxInput } from '../../fields/Checkbox/Input.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useSelection } from '../../providers/Selection/index.js'\nimport { Locked } from '../Locked/index.js'\nimport './index.css'\n\nconst baseClass = 'select-row'\n\nexport const SelectRow: React.FC<{\n  rowData: {\n    _isLocked?: boolean\n    _userEditing?: User\n    id: number | string\n  }\n  selectRowLabel: string\n}> = ({ rowData, selectRowLabel }) => {\n  const { user } = useAuth()\n  const { selected, setSelection } = useSelection()\n  const { _isLocked, _userEditing } = rowData || {}\n\n  const documentIsLocked = _isLocked && _userEditing\n\n  if (documentIsLocked && _userEditing.id !== user?.id) {\n    return <Locked user={_userEditing} />\n  }\n\n  return (\n    <CheckboxInput\n      aria-label={selectRowLabel}\n      checked={Boolean(selected.get(rowData.id))}\n      className={[baseClass, `${baseClass}__checkbox`].join(' ')}\n      onToggle={() => setSelection(rowData.id)}\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAW;AAElB,SAASC,aAAa,QAAQ;AAC9B,SAASC,OAAO,QAAQ;AACxB,SAASC,YAAY,QAAQ;AAC7B,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,SAAA,GAORC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU,OAAA;IAAAC;EAAA,IAAAH,EAA2B;EAC/B;IAAAI;EAAA,IAAiBT,OAAA;EACjB;IAAAU,QAAA;IAAAC;EAAA,IAAmCV,YAAA;EAAA,IAAAW,EAAA;EAAA,IAAAN,CAAA,QAAAC,OAAA,IAAAD,CAAA,QAAAG,IAAA,EAAAI,EAAA;IAM1BD,EAAA,GAAAE,MAAA,CAAAC,GAAA,8B;;MALT;QAAAC,SAAA;QAAAC;MAAA,IAAoCV,OAAA,MAAY;MAEhD,MAAAW,gBAAA,GAAyBF,SAAA,IAAaC,YAAA;MAAA,IAElCC,gBAAA,IAAoBD,YAAA,CAAAJ,EAAA,KAAoBJ,IAAA,EAAAI,EAAM;QACzCD,EAAA,GAAAO,IAAA,CAAAjB,MAAA;UAAAO,IAAA,EAAcQ;QAAA,C;;;;;;;;;;;;;;;IAMFG,EAAA,GAAAV,QAAA,CAAAW,GAAA,CAAad,OAAA,CAAAM,EAAU;IAAAP,CAAA,MAAAC,OAAA,CAAAM,EAAA;IAAAP,CAAA,MAAAI,QAAA;IAAAJ,CAAA,MAAAc,EAAA;EAAA;IAAAA,EAAA,GAAAd,CAAA;EAAA;EAA/B,MAAAgB,EAAA,GAAAC,OAAA,CAAQH,EAAuB;EAAA,IAAAI,EAAA;EAAA,IAAAlB,CAAA,QAAAQ,MAAA,CAAAC,GAAA;IAC7BS,EAAA,IAAArB,SAAA,EAAY,GAAAA,SAAA,YAAwB;IAACG,CAAA,MAAAkB,EAAA;EAAA;IAAAA,EAAA,GAAAlB,CAAA;EAAA;EAAA,IAAAmB,EAAA;EAAA,IAAAnB,CAAA,QAAAC,OAAA,CAAAM,EAAA,IAAAP,CAAA,QAAAK,YAAA;IACtCc,EAAA,GAAAA,CAAA,KAAMd,YAAA,CAAaJ,OAAA,CAAAM,EAAU;IAAAP,CAAA,MAAAC,OAAA,CAAAM,EAAA;IAAAP,CAAA,MAAAK,YAAA;IAAAL,CAAA,MAAAmB,EAAA;EAAA;IAAAA,EAAA,GAAAnB,CAAA;EAAA;EAAA,IAAAoB,EAAA;EAAA,IAAApB,CAAA,SAAAE,cAAA,IAAAF,CAAA,SAAAgB,EAAA,IAAAhB,CAAA,SAAAmB,EAAA;IAJzCC,EAAA,GAAAP,IAAA,CAAApB,aAAA;MAAA,cACcS,cAAA;MAAAmB,OAAA,EACHL,EAA+B;MAAAM,SAAA,EAC7BJ,EAAqC,CAAAK,IAAA,CAAM;MAAAC,QAAA,EAC5CL;IAA6B,C;;;;;;;;SAJzCC,E;CAOJ","ignoreList":[]}

package/dist/elements/SidebarRow/index.css

@@ -29,7 +29,7 @@
     text-decoration: none;
     color: inherit;
 
-    &:hover {
+    &:hover:not(.sidebar-row--selected) {
       background: var(--color-bg-secondary);
       text-decoration: none;
     }
@@ -38,10 +38,6 @@
   .sidebar-row--selected {
     font-weight: var(--text-body-medium-strong-font-weight);
     background: var(--color-bg-selected);
-
-    &:hover {
-      background: var(--color-bg-selected);
-    }
   }
 
   .sidebar-row__icon {

package/dist/elements/SidebarToggle/index.css

@@ -4,7 +4,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: var(--spacer-1);
+    width: var(--spacer-5);
+    height: var(--spacer-5);
+    padding: 0;
     border: 0;
     border-radius: var(--button-radius);
     background: var(--color-bg);

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/SortHeader/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,UAAU,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;IAC7C,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAC3B,CAAA;AAqBD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwBhD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/SortHeader/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,UAAU,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;IAC7C,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAC3B,CAAA;AAkBD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwBhD,CAAA"}

package/dist/elements/SortHeader/index.js

@@ -3,30 +3,29 @@
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { SortDownIcon } from '../../icons/Sort/index.js';
+import { SortDownIcon, SortUpIcon } from '../../icons/Sort/index.js';
 import { useListQuery } from '../../providers/ListQuery/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import './index.css';
 const baseClass = 'sort-header';
 function useSort() {
-  const $ = _c(7);
+  const $ = _c(8);
   const {
     handleSortChange,
     orderableFieldName,
     query
   } = useListQuery();
   const querySort = Array.isArray(query.sort) ? query.sort[0] : query.sort;
-  const isActive = querySort === orderableFieldName;
+  const isAscending = querySort === orderableFieldName;
+  const isDescending = querySort === `-${orderableFieldName}`;
+  const isActive = isAscending || isDescending;
   let t0;
-  if ($[0] !== handleSortChange || $[1] !== isActive || $[2] !== orderableFieldName) {
+  if ($[0] !== handleSortChange || $[1] !== isAscending || $[2] !== orderableFieldName) {
     t0 = () => {
-      if (isActive) {
-        return;
-      }
-      handleSortChange(orderableFieldName);
+      handleSortChange(isAscending ? `-${orderableFieldName}` : orderableFieldName);
     };
     $[0] = handleSortChange;
-    $[1] = isActive;
+    $[1] = isAscending;
     $[2] = orderableFieldName;
     $[3] = t0;
   } else {
@@ -34,62 +33,66 @@ function useSort() {
   }
   const handleSortPress = t0;
   let t1;
-  if ($[4] !== handleSortPress || $[5] !== isActive) {
+  if ($[4] !== handleSortPress || $[5] !== isActive || $[6] !== isAscending) {
     t1 = {
       handleSortPress,
-      isActive
+      isActive,
+      isAscending
     };
     $[4] = handleSortPress;
     $[5] = isActive;
-    $[6] = t1;
+    $[6] = isAscending;
+    $[7] = t1;
   } else {
-    t1 = $[6];
+    t1 = $[7];
   }
   return t1;
 }
 export const SortHeader = props => {
-  const $ = _c(8);
+  const $ = _c(9);
   const {
     appearance
   } = props;
   const {
     handleSortPress,
-    isActive
+    isActive,
+    isAscending
   } = useSort();
   const {
     t
   } = useTranslation();
   let t0;
-  if ($[0] !== appearance || $[1] !== handleSortPress || $[2] !== isActive || $[3] !== t) {
+  if ($[0] !== appearance || $[1] !== handleSortPress || $[2] !== isActive || $[3] !== isAscending || $[4] !== t) {
     const t1 = t("general:sortByLabelDirection", {
-      direction: t("general:ascending"),
+      direction: isAscending ? t("general:descending") : t("general:ascending"),
       label: "Order"
     });
     const t2 = appearance && `${baseClass}--appearance-${appearance}`;
     const t3 = isActive && `${baseClass}--active`;
     let t4;
-    if ($[5] !== t2 || $[6] !== t3) {
+    if ($[6] !== t2 || $[7] !== t3) {
       t4 = [baseClass, t2, t3].filter(Boolean);
-      $[5] = t2;
-      $[6] = t3;
-      $[7] = t4;
+      $[6] = t2;
+      $[7] = t3;
+      $[8] = t4;
     } else {
-      t4 = $[7];
+      t4 = $[8];
     }
     t0 = _jsx("button", {
       "aria-label": t1,
       className: t4.join(" "),
       onClick: handleSortPress,
       type: "button",
-      children: _jsx(SortDownIcon, {})
+      children: isAscending ? _jsx(SortUpIcon, {}) : _jsx(SortDownIcon, {})
     });
     $[0] = appearance;
     $[1] = handleSortPress;
     $[2] = isActive;
-    $[3] = t;
-    $[4] = t0;
+    $[3] = isAscending;
+    $[4] = t;
+    $[5] = t0;
   } else {
-    t0 = $[4];
+    t0 = $[5];
   }
   return t0;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","SortDownIcon","useListQuery","useTranslation","baseClass","useSort","$","handleSortChange","orderableFieldName","query","querySort","Array","isArray","sort","isActive","t0","handleSortPress","t1","SortHeader","props","appearance","t","direction","label","t2","t3","t4","filter","Boolean","_jsx","className","join","onClick","type","children"],"sources":["../../../src/elements/SortHeader/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { SortDownIcon } from '../../icons/Sort/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.css'\n\nexport type SortHeaderProps = {\n  readonly appearance?: 'condensed' | 'default'\n  readonly disable?: boolean\n}\n\nconst baseClass = 'sort-header'\n\nfunction useSort() {\n  const { handleSortChange, orderableFieldName, query } = useListQuery()\n  const querySort = Array.isArray(query.sort) ? query.sort[0] : query.sort\n  const isActive = querySort === orderableFieldName\n\n  const handleSortPress = () => {\n    // If it's already sorted by the \"_order\" field, do nothing\n    if (isActive) {\n      return\n    }\n    // If NOT sorted by the \"_order\" field, sort by that field.\n    void handleSortChange(orderableFieldName)\n  }\n\n  return { handleSortPress, isActive }\n}\n\nexport const SortHeader: React.FC<SortHeaderProps> = (props) => {\n  const { appearance } = props\n  const { handleSortPress, isActive } = useSort()\n  const { t } = useTranslation()\n\n  return (\n    <button\n      aria-label={t('general:sortByLabelDirection', {\n        direction: t('general:ascending'),\n        label: 'Order',\n      })}\n      className={[\n        baseClass,\n        appearance && `${baseClass}--appearance-${appearance}`,\n        isActive && `${baseClass}--active`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onClick={handleSortPress}\n      type=\"button\"\n    >\n      <SortDownIcon />\n    </button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,MAAW;AAElB,SAASC,YAAY,QAAQ;AAC7B,SAASC,YAAY,QAAQ;AAC7B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAOP,MAAMC,SAAA,GAAY;AAElB,SAAAC,QAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EACE;IAAAQ,gBAAA;IAAAC,kBAAA;IAAAC;EAAA,IAAwDP,YAAA;EACxD,MAAAQ,SAAA,GAAkBC,KAAA,CAAAC,OAAA,CAAcH,KAAA,CAAAI,IAAU,IAAIJ,KAAA,CAAAI,IAAA,MAAgBJ,KAAA,CAAAI,IAAU;EACxE,MAAAC,QAAA,GAAiBJ,SAAA,KAAcF,kBAAA;EAAA,IAAAO,EAAA;EAAA,IAAAT,CAAA,QAAAC,gBAAA,IAAAD,CAAA,QAAAQ,QAAA,IAAAR,CAAA,QAAAE,kBAAA;IAEPO,EAAA,GAAAA,CAAA;MAAA,IAElBD,QAAA;QAAA;MAAA;MAICP,gBAAA,CAAiBC,kBAAA;IAAA;IACxBF,CAAA,MAAAC,gBAAA;IAAAD,CAAA,MAAAQ,QAAA;IAAAR,CAAA,MAAAE,kBAAA;IAAAF,CAAA,MAAAS,EAAA;EAAA;IAAAA,EAAA,GAAAT,CAAA;EAAA;EAPA,MAAAU,eAAA,GAAwBD,EAOxB;EAAA,IAAAE,EAAA;EAAA,IAAAX,CAAA,QAAAU,eAAA,IAAAV,CAAA,QAAAQ,QAAA;IAEOG,EAAA;MAAAD,eAAA;MAAAF;IAAA;IAA4BR,CAAA,MAAAU,eAAA;IAAAV,CAAA,MAAAQ,QAAA;IAAAR,CAAA,MAAAW,EAAA;EAAA;IAAAA,EAAA,GAAAX,CAAA;EAAA;EAAA,OAA5BW,EAA4B;AAAA;AAGrC,OAAO,MAAMC,UAAA,GAAwCC,KAAA;EAAA,MAAAb,CAAA,GAAAP,EAAA;EACnD;IAAAqB;EAAA,IAAuBD,KAAA;EACvB;IAAAH,eAAA;IAAAF;EAAA,IAAsCT,OAAA;EACtC;IAAAgB;EAAA,IAAclB,cAAA;EAAA,IAAAY,EAAA;EAAA,IAAAT,CAAA,QAAAc,UAAA,IAAAd,CAAA,QAAAU,eAAA,IAAAV,CAAA,QAAAQ,QAAA,IAAAR,CAAA,QAAAe,CAAA;IAIE,MAAAJ,EAAA,GAAAI,CAAA,CAAE;MAAAC,SAAA,EACDD,CAAA,CAAE;MAAAE,KAAA,EACN;IAAA,CACT;IAGE,MAAAC,EAAA,GAAAJ,UAAA,IAAc,GAAAhB,SAAA,gBAA4BgB,UAAA,EAAY;IACtD,MAAAK,EAAA,GAAAX,QAAA,IAAY,GAAAV,SAAA,UAAsB;IAAA,IAAAsB,EAAA;IAAA,IAAApB,CAAA,QAAAkB,EAAA,IAAAlB,CAAA,QAAAmB,EAAA;MAHzBC,EAAA,IAAAtB,SAAA,EAEToB,EAAsD,EACtDC,EAAkC,EAAAE,MAAA,CAAAC,OAE1B;MAAAtB,CAAA,MAAAkB,EAAA;MAAAlB,CAAA,MAAAmB,EAAA;MAAAnB,CAAA,MAAAoB,EAAA;IAAA;MAAAA,EAAA,GAAApB,CAAA;IAAA;IAVZS,EAAA,GAAAc,IAAA,CAAC;MAAA,cACaZ,EAGZ;MAAAa,SAAA,EACWJ,EAKD,CAAAK,IAAA,CACF;MAAAC,OAAA,EACChB,eAAA;MAAAiB,IAAA,EACJ;MAAAC,QAAA,EAELL,IAAA,CAAA5B,YAAA,IAAC;IAAA,C;;;;;;;;;SAfHc,E;CAkBJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","SortDownIcon","SortUpIcon","useListQuery","useTranslation","baseClass","useSort","$","handleSortChange","orderableFieldName","query","querySort","Array","isArray","sort","isAscending","isDescending","isActive","t0","handleSortPress","t1","SortHeader","props","appearance","t","direction","label","t2","t3","t4","filter","Boolean","_jsx","className","join","onClick","type","children"],"sources":["../../../src/elements/SortHeader/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { SortDownIcon, SortUpIcon } from '../../icons/Sort/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.css'\n\nexport type SortHeaderProps = {\n  readonly appearance?: 'condensed' | 'default'\n  readonly disable?: boolean\n}\n\nconst baseClass = 'sort-header'\n\nfunction useSort() {\n  const { handleSortChange, orderableFieldName, query } = useListQuery()\n  const querySort = Array.isArray(query.sort) ? query.sort[0] : query.sort\n  const isAscending = querySort === orderableFieldName\n  const isDescending = querySort === `-${orderableFieldName}`\n  const isActive = isAscending || isDescending\n\n  const handleSortPress = () => {\n    void handleSortChange(isAscending ? `-${orderableFieldName}` : orderableFieldName)\n  }\n\n  return { handleSortPress, isActive, isAscending }\n}\n\nexport const SortHeader: React.FC<SortHeaderProps> = (props) => {\n  const { appearance } = props\n  const { handleSortPress, isActive, isAscending } = useSort()\n  const { t } = useTranslation()\n\n  return (\n    <button\n      aria-label={t('general:sortByLabelDirection', {\n        direction: isAscending ? t('general:descending') : t('general:ascending'),\n        label: 'Order',\n      })}\n      className={[\n        baseClass,\n        appearance && `${baseClass}--appearance-${appearance}`,\n        isActive && `${baseClass}--active`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onClick={handleSortPress}\n      type=\"button\"\n    >\n      {isAscending ? <SortUpIcon /> : <SortDownIcon />}\n    </button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,MAAW;AAElB,SAASC,YAAY,EAAEC,UAAU,QAAQ;AACzC,SAASC,YAAY,QAAQ;AAC7B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAOP,MAAMC,SAAA,GAAY;AAElB,SAAAC,QAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EACE;IAAAS,gBAAA;IAAAC,kBAAA;IAAAC;EAAA,IAAwDP,YAAA;EACxD,MAAAQ,SAAA,GAAkBC,KAAA,CAAAC,OAAA,CAAcH,KAAA,CAAAI,IAAU,IAAIJ,KAAA,CAAAI,IAAA,MAAgBJ,KAAA,CAAAI,IAAU;EACxE,MAAAC,WAAA,GAAoBJ,SAAA,KAAcF,kBAAA;EAClC,MAAAO,YAAA,GAAqBL,SAAA,KAAc,IAAIF,kBAAA,EAAoB;EAC3D,MAAAQ,QAAA,GAAiBF,WAAA,IAAeC,YAAA;EAAA,IAAAE,EAAA;EAAA,IAAAX,CAAA,QAAAC,gBAAA,IAAAD,CAAA,QAAAQ,WAAA,IAAAR,CAAA,QAAAE,kBAAA;IAERS,EAAA,GAAAA,CAAA;MACjBV,gBAAA,CAAiBO,WAAA,GAAc,IAAIN,kBAAA,EAAoB,GAAGA,kBAAA;IAAA;IACjEF,CAAA,MAAAC,gBAAA;IAAAD,CAAA,MAAAQ,WAAA;IAAAR,CAAA,MAAAE,kBAAA;IAAAF,CAAA,MAAAW,EAAA;EAAA;IAAAA,EAAA,GAAAX,CAAA;EAAA;EAFA,MAAAY,eAAA,GAAwBD,EAExB;EAAA,IAAAE,EAAA;EAAA,IAAAb,CAAA,QAAAY,eAAA,IAAAZ,CAAA,QAAAU,QAAA,IAAAV,CAAA,QAAAQ,WAAA;IAEOK,EAAA;MAAAD,eAAA;MAAAF,QAAA;MAAAF;IAAA;IAAyCR,CAAA,MAAAY,eAAA;IAAAZ,CAAA,MAAAU,QAAA;IAAAV,CAAA,MAAAQ,WAAA;IAAAR,CAAA,MAAAa,EAAA;EAAA;IAAAA,EAAA,GAAAb,CAAA;EAAA;EAAA,OAAzCa,EAAyC;AAAA;AAGlD,OAAO,MAAMC,UAAA,GAAwCC,KAAA;EAAA,MAAAf,CAAA,GAAAR,EAAA;EACnD;IAAAwB;EAAA,IAAuBD,KAAA;EACvB;IAAAH,eAAA;IAAAF,QAAA;IAAAF;EAAA,IAAmDT,OAAA;EACnD;IAAAkB;EAAA,IAAcpB,cAAA;EAAA,IAAAc,EAAA;EAAA,IAAAX,CAAA,QAAAgB,UAAA,IAAAhB,CAAA,QAAAY,eAAA,IAAAZ,CAAA,QAAAU,QAAA,IAAAV,CAAA,QAAAQ,WAAA,IAAAR,CAAA,QAAAiB,CAAA;IAIE,MAAAJ,EAAA,GAAAI,CAAA,CAAE;MAAAC,SAAA,EACDV,WAAA,GAAcS,CAAA,CAAE,wBAAwBA,CAAA,CAAE;MAAAE,KAAA,EAC9C;IAAA,CACT;IAGE,MAAAC,EAAA,GAAAJ,UAAA,IAAc,GAAAlB,SAAA,gBAA4BkB,UAAA,EAAY;IACtD,MAAAK,EAAA,GAAAX,QAAA,IAAY,GAAAZ,SAAA,UAAsB;IAAA,IAAAwB,EAAA;IAAA,IAAAtB,CAAA,QAAAoB,EAAA,IAAApB,CAAA,QAAAqB,EAAA;MAHzBC,EAAA,IAAAxB,SAAA,EAETsB,EAAsD,EACtDC,EAAkC,EAAAE,MAAA,CAAAC,OAE1B;MAAAxB,CAAA,MAAAoB,EAAA;MAAApB,CAAA,MAAAqB,EAAA;MAAArB,CAAA,MAAAsB,EAAA;IAAA;MAAAA,EAAA,GAAAtB,CAAA;IAAA;IAVZW,EAAA,GAAAc,IAAA,CAAC;MAAA,cACaZ,EAGZ;MAAAa,SAAA,EACWJ,EAKD,CAAAK,IAAA,CACF;MAAAC,OAAA,EACChB,eAAA;MAAAiB,IAAA,EACJ;MAAAC,QAAA,EAEJtB,WAAA,GAAciB,IAAA,CAAA9B,UAAA,IAAC,IAAgB8B,IAAA,CAAA/B,YAAA,IAAC;IAAA,C;;;;;;;;;;SAfnCiB,E;CAkBJ","ignoreList":[]}

package/dist/elements/StepNav/DropTarget/index.css

@@ -0,0 +1,20 @@
+@layer payload-default {
+  /*
+   * Wraps a single crumb without altering the trail's layout - the crumb keeps its own padding, so
+   * this only supplies the hit area and the hover ring.
+   */
+  .step-nav-drop-target {
+    display: inline-flex;
+    min-width: 0;
+    border-radius: var(--radius-medium);
+  }
+
+  .step-nav-drop-target--drop-over {
+    background: color-mix(in srgb, var(--color-border-selected) 12%, transparent);
+    box-shadow: 0 0 0 var(--stroke-width-medium) var(--color-border-selected);
+  }
+
+  .step-nav-drop-target--drop-invalid {
+    cursor: not-allowed;
+  }
+}

package/dist/elements/StepNav/DropTarget/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { HierarchyDropData } from '../../../providers/HierarchyDnd/types.js';
+import './index.css';
+/**
+ * Makes one breadcrumb a hierarchy drop target, which is how documents get moved *out* of a folder:
+ * the trail's root crumb moves them to root and an ancestor crumb moves them up.
+ *
+ * A component rather than an inline hook because `useDroppable` can't be called inside the trail's
+ * render loop. Only rendered for items that carry a `dropTarget`, which in practice means only on the
+ * hierarchy view - so it is always inside the drag context.
+ */
+export declare const StepNavDropTarget: React.FC<{
+    children: React.ReactNode;
+    dropTarget: HierarchyDropData;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/StepNav/DropTarget/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/StepNav/DropTarget/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0CAA0C,CAAA;AAGjF,OAAO,aAAa,CAAA;AAIpB;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,UAAU,EAAE,iBAAiB,CAAA;CAC9B,CAoBA,CAAA"}

package/dist/elements/StepNav/DropTarget/index.js

@@ -0,0 +1,71 @@
+'use client';
+
+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 { useHierarchyDnd } from '../../../providers/HierarchyDnd/index.js';
+import './index.css';
+const baseClass = 'step-nav-drop-target';
+/**
+ * Makes one breadcrumb a hierarchy drop target, which is how documents get moved *out* of a folder:
+ * the trail's root crumb moves them to root and an ancestor crumb moves them up.
+ *
+ * A component rather than an inline hook because `useDroppable` can't be called inside the trail's
+ * render loop. Only rendered for items that carry a `dropTarget`, which in practice means only on the
+ * hierarchy view - so it is always inside the drag context.
+ */
+export const StepNavDropTarget = t0 => {
+  const $ = _c(9);
+  const {
+    children,
+    dropTarget
+  } = t0;
+  const {
+    canDrop
+  } = useHierarchyDnd();
+  const t1 = `step-nav-drop-${dropTarget.hierarchySlug}-${dropTarget.folderId ?? "root"}`;
+  let t2;
+  if ($[0] !== dropTarget || $[1] !== t1) {
+    t2 = {
+      id: t1,
+      data: dropTarget
+    };
+    $[0] = dropTarget;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const {
+    isOver,
+    setNodeRef
+  } = useDroppable(t2);
+  const dropState = isOver ? canDrop(dropTarget) ? "over" : "invalid" : undefined;
+  const t3 = dropState && `${baseClass}--drop-${dropState}`;
+  let t4;
+  if ($[3] !== t3) {
+    t4 = [baseClass, t3].filter(Boolean);
+    $[3] = t3;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  const t5 = t4.join(" ");
+  let t6;
+  if ($[5] !== children || $[6] !== setNodeRef || $[7] !== t5) {
+    t6 = _jsx("span", {
+      className: t5,
+      ref: setNodeRef,
+      children
+    });
+    $[5] = children;
+    $[6] = setNodeRef;
+    $[7] = t5;
+    $[8] = t6;
+  } else {
+    t6 = $[8];
+  }
+  return t6;
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/StepNav/DropTarget/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","useDroppable","React","useHierarchyDnd","baseClass","StepNavDropTarget","t0","$","children","dropTarget","canDrop","t1","hierarchySlug","folderId","t2","id","data","isOver","setNodeRef","dropState","undefined","t3","t4","filter","Boolean","t5","join","t6","_jsx","className","ref"],"sources":["../../../../src/elements/StepNav/DropTarget/index.tsx"],"sourcesContent":["'use client'\n\nimport { useDroppable } from '@dnd-kit/core'\nimport React from 'react'\n\nimport type { HierarchyDropData } from '../../../providers/HierarchyDnd/types.js'\n\nimport { useHierarchyDnd } from '../../../providers/HierarchyDnd/index.js'\nimport './index.css'\n\nconst baseClass = 'step-nav-drop-target'\n\n/**\n * Makes one breadcrumb a hierarchy drop target, which is how documents get moved *out* of a folder:\n * the trail's root crumb moves them to root and an ancestor crumb moves them up.\n *\n * A component rather than an inline hook because `useDroppable` can't be called inside the trail's\n * render loop. Only rendered for items that carry a `dropTarget`, which in practice means only on the\n * hierarchy view - so it is always inside the drag context.\n */\nexport const StepNavDropTarget: React.FC<{\n  children: React.ReactNode\n  dropTarget: HierarchyDropData\n}> = ({ children, dropTarget }) => {\n  const { canDrop } = useHierarchyDnd()\n\n  const { isOver, setNodeRef } = useDroppable({\n    id: `step-nav-drop-${dropTarget.hierarchySlug}-${dropTarget.folderId ?? 'root'}`,\n    data: dropTarget,\n  })\n\n  const dropState = isOver ? (canDrop(dropTarget) ? 'over' : 'invalid') : undefined\n\n  return (\n    <span\n      className={[baseClass, dropState && `${baseClass}--drop-${dropState}`]\n        .filter(Boolean)\n        .join(' ')}\n      ref={setNodeRef}\n    >\n      {children}\n    </span>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,SAASC,YAAY,QAAQ;AAC7B,OAAOC,KAAA,MAAW;AAIlB,SAASC,eAAe,QAAQ;AAChC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB;;;;;;;;AAQA,OAAO,MAAMC,iBAAA,GAGRC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAC;IAAAQ,QAAA;IAAAC;EAAA,IAAAH,EAAwB;EAC5B;IAAAI;EAAA,IAAoBP,eAAA;EAGd,MAAAQ,EAAA,oBAAiBF,UAAA,CAAAG,aAAA,IAA4BH,UAAA,CAAAI,QAAA,IAAuB,QAAQ;EAAA,IAAAC,EAAA;EAAA,IAAAP,CAAA,QAAAE,UAAA,IAAAF,CAAA,QAAAI,EAAA;IADtCG,EAAA;MAAAC,EAAA,EACtCJ,EAA4E;MAAAK,IAAA,EAC1EP;IAAA;IACRF,CAAA,MAAAE,UAAA;IAAAF,CAAA,MAAAI,EAAA;IAAAJ,CAAA,MAAAO,EAAA;EAAA;IAAAA,EAAA,GAAAP,CAAA;EAAA;EAHA;IAAAU,MAAA;IAAAC;EAAA,IAA+BjB,YAAA,CAAaa,EAG5C;EAEA,MAAAK,SAAA,GAAkBF,MAAA,GAAUP,OAAA,CAAQD,UAAA,IAAc,SAAS,YAAAW,SAAa;EAI7C,MAAAC,EAAA,GAAAF,SAAA,IAAa,GAAAf,SAAA,UAAsBe,SAAA,EAAW;EAAA,IAAAG,EAAA;EAAA,IAAAf,CAAA,QAAAc,EAAA;IAA1DC,EAAA,IAAAlB,SAAA,EAAYiB,EAA8C,EAAAE,MAAA,CAAAC,OAC3D;IAAAjB,CAAA,MAAAc,EAAA;IAAAd,CAAA,MAAAe,EAAA;EAAA;IAAAA,EAAA,GAAAf,CAAA;EAAA;EADC,MAAAkB,EAAA,GAAAH,EACD,CAAAI,IAAA,CACF;EAAA,IAAAC,EAAA;EAAA,IAAApB,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAW,UAAA,IAAAX,CAAA,QAAAkB,EAAA;IAHVE,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EACYJ,EAEH;MAAAK,GAAA,EACHZ,UAAA;MAAAV;IAAA,C;;;;;;;;SAJPmB,E;CASJ","ignoreList":[]}

package/dist/elements/StepNav/index.css

@@ -2,15 +2,19 @@
   .step-nav {
     display: flex;
     align-items: center;
+    min-width: 0;
     font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);
     letter-spacing: var(--text-body-medium-letter-spacing);
     color: var(--color-text);
+    -webkit-user-select: none;
+    user-select: none;
 
     &::after {
       content: ' ';
+      flex-shrink: 0;
       position: sticky;
       top: 0;
       right: 0;
@@ -21,6 +25,7 @@
     a {
       display: flex;
       align-items: center;
+      min-width: 0;
       text-decoration: none;
       border-radius: var(--button-radius);
 
@@ -28,33 +33,78 @@
         cursor: pointer;
       }
     }
+  }
 
-    span {
-      max-width: calc(var(--spacer-6) * 4);
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
+  .step-nav__item {
+    max-width: calc(var(--spacer-6) * 4);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
 
-      &:has(.dashboard-breadcrumb-dropdown, .dashboard-breadcrumb-dropdown__editing) {
-        max-width: none;
-        overflow: visible;
-        white-space: normal;
-      }
+  .step-nav__item .btn__content {
+    min-width: 0;
+  }
+
+  .step-nav__item .btn__label {
+    min-width: 0;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .step-nav__item:not(.step-nav__last) {
+    flex-shrink: 0;
+  }
+
+  .step-nav__last {
+    min-width: var(--spacer-5);
+    max-width: none;
+    color: var(--color-text-secondary);
+  }
+
+  .step-nav__item:has(.dashboard-breadcrumb-dropdown, .dashboard-breadcrumb-dropdown__editing) {
+    max-width: none;
+    overflow: visible;
+    white-space: normal;
+  }
+
+  .step-nav__collapsed {
+    flex-shrink: 0;
+  }
+
+  .step-nav__collapsed-toggle {
+    padding: 0 var(--spacer-1);
+    color: var(--color-text);
+  }
+
+  .step-nav__measurer-clip {
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+  }
+
+  .step-nav__measurer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: inline-flex;
+    padding-right: var(--spacer-3);
+
+    .step-nav__item {
+      max-width: none;
     }
   }
 
   .step-nav__separator {
     color: var(--color-text-tertiary);
     width: var(--spacer-2);
+    flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
   }
 
-  .step-nav__last {
-    color: var(--color-text-secondary);
-  }
-
   .step-nav__item:not(.btn),
   .step-nav__item:has(.btn) {
     margin-left: var(--spacer-2);

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/StepNav/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAK7C,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC1D,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAI5C,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IACtB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B,CA2EA,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/StepNav/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAgD,MAAM,OAAO,CAAA;AAEpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAM7C,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAE1D,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAM5C,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IACtB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B,CAmLA,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,UAAU,EAAE,CAAA"}