@payloadcms/ui 4.0.0-internal.011fd46 → 4.0.0-internal.016994f

package/dist/elements/GroupBy/Popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.js","names":["c","_c","React","useCallback","ChevronIcon","TrashIcon","XIcon","useTranslation","Button","Popup","PopupList","baseClass","GroupByPopup","t0","$","close","filteredFields","groupByField","groupByFieldName","isActive","onChange","value","t","directionValue","startsWith","t1","fieldPath","handleFieldSelect","t2","handleClear","t3","direction","handleDirectionSelect","t4","label","t5","t6","closeFieldPopup","_jsx","RadioGroup","children","map","field","i","RadioGroupItem","active","onClick","t7","onKeyDown","_jsxs","className","type","size","t8","closeSortPopup","t9","active_0","onClick_0","onKeyDown_0","filter","Boolean","join","disabled","buttonStyle","icon","round","horizontalAlign","render","verticalAlign"],"sources":["../../../src/elements/GroupBy/Popup.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback } from 'react'\n\nimport type { ReducedField } from '../WhereBuilder/types.js'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { TrashIcon } from '../../icons/Trash/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './Popup.css'\n\nexport type GroupByPopupProps = {\n  /** Closes the parent popup. */\n  readonly close: () => void\n  /** The selectable, permission-filtered fields. */\n  readonly filteredFields: ReducedField[]\n  /** The currently selected field, if any. */\n  readonly groupByField?: ReducedField\n  /** The selected field path with any leading `-` stripped. */\n  readonly groupByFieldName?: string\n  /** Whether a field is currently selected. */\n  readonly isActive: boolean\n  /** Called with the next `groupBy` value (prefixed with `-` for descending). */\n  readonly onChange: (groupBy: string) => void\n  /** The current `groupBy` value (prefixed with `-` for descending). */\n  readonly value: string\n}\n\nconst baseClass = 'group-by-control'\n\nexport const GroupByPopup: React.FC<GroupByPopupProps> = ({\n  close,\n  filteredFields,\n  groupByField,\n  groupByFieldName,\n  isActive,\n  onChange,\n  value,\n}) => {\n  const { t } = useTranslation()\n\n  const directionValue =\n    !value || typeof value !== 'string' ? 'asc' : value.startsWith('-') ? 'desc' : 'asc'\n\n  const handleFieldSelect = useCallback(\n    (fieldPath: string) => {\n      onChange(value?.startsWith('-') ? `-${fieldPath}` : fieldPath)\n    },\n    [onChange, value],\n  )\n\n  const handleClear = useCallback(() => {\n    onChange('')\n    close()\n  }, [onChange, close])\n\n  const handleDirectionSelect = useCallback(\n    (direction: 'asc' | 'desc') => {\n      if (!groupByFieldName) {\n        return\n      }\n      onChange(direction === 'asc' ? groupByFieldName : `-${groupByFieldName}`)\n    },\n    [groupByFieldName, onChange],\n  )\n\n  return (\n    <div className={`${baseClass}__content`}>\n      <div className={`${baseClass}__header`}>\n        <span className={`${baseClass}__title`}>{t('general:groupByLabel', { label: '' })}</span>\n        <div className={`${baseClass}__header-actions`}>\n          {isActive && (\n            <Button\n              aria-label={t('general:clear')}\n              buttonStyle=\"ghost\"\n              icon={<TrashIcon />}\n              onClick={handleClear}\n              round\n              size=\"medium\"\n            />\n          )}\n          <Button\n            aria-label={t('general:close')}\n            buttonStyle=\"ghost\"\n            icon={<XIcon size={24} />}\n            onClick={close}\n            round\n            size=\"medium\"\n          />\n        </div>\n      </div>\n      <div className={`${baseClass}__body`}>\n        <div className={`${baseClass}__row`}>\n          <label className={`${baseClass}__label`}>{t('general:field')}</label>\n          <div className={`${baseClass}__input`} data-popup-prevent-close>\n            <Popup\n              className={`${baseClass}__select-popup`}\n              horizontalAlign=\"right\"\n              render={({ close: closeFieldPopup }) => (\n                <PopupList.RadioGroup>\n                  {filteredFields.map((field, i) => (\n                    <PopupList.RadioGroupItem\n                      active={field.fieldPath === groupByFieldName}\n                      key={i}\n                      onClick={() => {\n                        handleFieldSelect(field.fieldPath)\n                        closeFieldPopup()\n                      }}\n                    >\n                      {field.label}\n                    </PopupList.RadioGroupItem>\n                  ))}\n                </PopupList.RadioGroup>\n              )}\n              renderButton={({ active, onClick, onKeyDown }) => (\n                <button\n                  className={`${baseClass}__select-trigger`}\n                  onClick={onClick}\n                  onKeyDown={onKeyDown}\n                  type=\"button\"\n                >\n                  <span className={`${baseClass}__select-value`}>\n                    {groupByField?.label || t('general:selectValue')}\n                  </span>\n                  <ChevronIcon direction={active ? 'up' : 'down'} size={16} />\n                </button>\n              )}\n              size=\"medium\"\n              verticalAlign=\"bottom\"\n            />\n          </div>\n        </div>\n        <div className={`${baseClass}__row`}>\n          <label className={`${baseClass}__label`}>{t('general:sort')}</label>\n          <div className={`${baseClass}__input`} data-popup-prevent-close>\n            <Popup\n              className={`${baseClass}__select-popup`}\n              disabled={!groupByFieldName}\n              horizontalAlign=\"right\"\n              render={({ close: closeSortPopup }) => (\n                <PopupList.RadioGroup>\n                  <PopupList.RadioGroupItem\n                    active={directionValue === 'desc'}\n                    onClick={() => {\n                      handleDirectionSelect('desc')\n                      closeSortPopup()\n                    }}\n                  >\n                    {t('general:descending')}\n                  </PopupList.RadioGroupItem>\n                  <PopupList.RadioGroupItem\n                    active={directionValue === 'asc'}\n                    onClick={() => {\n                      handleDirectionSelect('asc')\n                      closeSortPopup()\n                    }}\n                  >\n                    {t('general:ascending')}\n                  </PopupList.RadioGroupItem>\n                </PopupList.RadioGroup>\n              )}\n              renderButton={({ active, onClick, onKeyDown }) => (\n                <button\n                  className={[\n                    `${baseClass}__select-trigger`,\n                    !groupByFieldName && `${baseClass}__select-trigger--disabled`,\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                  disabled={!groupByFieldName}\n                  onClick={onClick}\n                  onKeyDown={onKeyDown}\n                  type=\"button\"\n                >\n                  <span className={`${baseClass}__select-value`}>\n                    {directionValue === 'desc' ? t('general:descending') : t('general:ascending')}\n                  </span>\n                  <ChevronIcon direction={active ? 'up' : 'down'} size={16} />\n                </button>\n              )}\n              size=\"small\"\n              verticalAlign=\"bottom\"\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Popup.js","names":["c","_c","React","useCallback","ChevronIcon","TrashIcon","XIcon","useTranslation","Button","Popup","PopupList","baseClass","GroupByPopup","t0","$","close","filteredFields","groupByField","groupByFieldName","isActive","onChange","value","t","directionValue","startsWith","t1","fieldPath","handleFieldSelect","t2","handleClear","t3","direction","handleDirectionSelect","t4","label","t5","t6","closeFieldPopup","_jsx","RadioGroup","children","map","field","i","RadioGroupItem","active","onClick","t7","onKeyDown","_jsxs","className","type","size","t8","closeSortPopup","t9","active_0","onClick_0","onKeyDown_0","filter","Boolean","join","disabled","buttonStyle","icon","round","horizontalAlign","render","verticalAlign"],"sources":["../../../src/elements/GroupBy/Popup.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback } from 'react'\n\nimport type { ReducedField } from '../WhereBuilder/types.js'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { TrashIcon } from '../../icons/Trash/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './Popup.css'\n\nexport type GroupByPopupProps = {\n  /** Closes the parent popup. */\n  readonly close: () => void\n  /** The selectable, permission-filtered fields. */\n  readonly filteredFields: ReducedField[]\n  /** The currently selected field, if any. */\n  readonly groupByField?: ReducedField\n  /** The selected field path with any leading `-` stripped. */\n  readonly groupByFieldName?: string\n  /** Whether a field is currently selected. */\n  readonly isActive: boolean\n  /** Called with the next `groupBy` value (prefixed with `-` for descending). */\n  readonly onChange: (groupBy: string) => void\n  /** The current `groupBy` value (prefixed with `-` for descending). */\n  readonly value: string\n}\n\nconst baseClass = 'group-by-control'\n\nexport const GroupByPopup: React.FC<GroupByPopupProps> = ({\n  close,\n  filteredFields,\n  groupByField,\n  groupByFieldName,\n  isActive,\n  onChange,\n  value,\n}) => {\n  const { t } = useTranslation()\n\n  const directionValue =\n    !value || typeof value !== 'string' ? 'asc' : value.startsWith('-') ? 'desc' : 'asc'\n\n  const handleFieldSelect = useCallback(\n    (fieldPath: string) => {\n      onChange(value?.startsWith('-') ? `-${fieldPath}` : fieldPath)\n    },\n    [onChange, value],\n  )\n\n  const handleClear = useCallback(() => {\n    onChange('')\n    close()\n  }, [onChange, close])\n\n  const handleDirectionSelect = useCallback(\n    (direction: 'asc' | 'desc') => {\n      if (!groupByFieldName) {\n        return\n      }\n      onChange(direction === 'asc' ? groupByFieldName : `-${groupByFieldName}`)\n    },\n    [groupByFieldName, onChange],\n  )\n\n  return (\n    <div className={`${baseClass}__content`}>\n      <div className={`${baseClass}__header`}>\n        <span className={`${baseClass}__title`}>{t('general:groupByLabel', { label: '' })}</span>\n        <div className={`${baseClass}__header-actions`}>\n          {isActive && (\n            <Button\n              aria-label={t('general:clear')}\n              buttonStyle=\"ghost\"\n              icon={<TrashIcon />}\n              onClick={handleClear}\n              round\n              size=\"medium\"\n            />\n          )}\n          <Button\n            aria-label={t('general:close')}\n            buttonStyle=\"ghost\"\n            icon={<XIcon size={24} />}\n            onClick={close}\n            round\n            size=\"medium\"\n          />\n        </div>\n      </div>\n      <div className={`${baseClass}__body`}>\n        <div className={`${baseClass}__row`}>\n          <label className={`${baseClass}__label`}>{t('general:field')}</label>\n          <div className={`${baseClass}__input`} data-popup-prevent-close>\n            <Popup\n              className={`${baseClass}__select-popup`}\n              horizontalAlign=\"right\"\n              render={({ close: closeFieldPopup }) => (\n                <PopupList.RadioGroup>\n                  {filteredFields.map((field, i) => (\n                    <PopupList.RadioGroupItem\n                      active={field.fieldPath === groupByFieldName}\n                      key={i}\n                      onClick={() => {\n                        handleFieldSelect(field.fieldPath)\n                        closeFieldPopup()\n                      }}\n                    >\n                      {field.label}\n                    </PopupList.RadioGroupItem>\n                  ))}\n                </PopupList.RadioGroup>\n              )}\n              renderButton={({ active, onClick, onKeyDown }) => (\n                <button\n                  className={`${baseClass}__select-trigger`}\n                  onClick={onClick}\n                  onKeyDown={onKeyDown}\n                  type=\"button\"\n                >\n                  <span className={`${baseClass}__select-value`}>\n                    {groupByField?.label || t('general:selectValue')}\n                  </span>\n                  <ChevronIcon direction={active ? 'up' : 'down'} size={16} />\n                </button>\n              )}\n              verticalAlign=\"bottom\"\n            />\n          </div>\n        </div>\n        <div className={`${baseClass}__row`}>\n          <label className={`${baseClass}__label`}>{t('general:sort')}</label>\n          <div className={`${baseClass}__input`} data-popup-prevent-close>\n            <Popup\n              className={`${baseClass}__select-popup`}\n              disabled={!groupByFieldName}\n              horizontalAlign=\"right\"\n              render={({ close: closeSortPopup }) => (\n                <PopupList.RadioGroup>\n                  <PopupList.RadioGroupItem\n                    active={directionValue === 'desc'}\n                    onClick={() => {\n                      handleDirectionSelect('desc')\n                      closeSortPopup()\n                    }}\n                  >\n                    {t('general:descending')}\n                  </PopupList.RadioGroupItem>\n                  <PopupList.RadioGroupItem\n                    active={directionValue === 'asc'}\n                    onClick={() => {\n                      handleDirectionSelect('asc')\n                      closeSortPopup()\n                    }}\n                  >\n                    {t('general:ascending')}\n                  </PopupList.RadioGroupItem>\n                </PopupList.RadioGroup>\n              )}\n              renderButton={({ active, onClick, onKeyDown }) => (\n                <button\n                  className={[\n                    `${baseClass}__select-trigger`,\n                    !groupByFieldName && `${baseClass}__select-trigger--disabled`,\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                  disabled={!groupByFieldName}\n                  onClick={onClick}\n                  onKeyDown={onKeyDown}\n                  type=\"button\"\n                >\n                  <span className={`${baseClass}__select-value`}>\n                    {directionValue === 'desc' ? t('general:descending') : t('general:ascending')}\n                  </span>\n                  <ChevronIcon direction={active ? 'up' : 'down'} size={16} />\n                </button>\n              )}\n              size=\"small\"\n              verticalAlign=\"bottom\"\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,WAAW,QAAQ;AAInC,SAASC,WAAW,QAAQ;AAC5B,SAASC,SAAS,QAAQ;AAC1B,SAASC,KAAK,QAAQ;AACtB,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,KAAK,EAAEC,SAAS,QAAQ;AACjC,OAAO;AAmBP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,YAAA,GAA4CC,EAAA;EAAA,MAAAC,CAAA,GAAAb,EAAA;EAAC;IAAAc,KAAA;IAAAC,cAAA;IAAAC,YAAA;IAAAC,gBAAA;IAAAC,QAAA;IAAAC,QAAA;IAAAC;EAAA,IAAAR,EAQzD;EACC;IAAAS;EAAA,IAAcf,cAAA;EAEd,MAAAgB,cAAA,GACE,CAACF,KAAA,IAAS,OAAOA,KAAA,KAAU,WAAW,QAAQA,KAAA,CAAAG,UAAA,CAAiB,OAAO,SAAS;EAAA,IAAAC,EAAA;EAAA,IAAAX,CAAA,QAAAM,QAAA,IAAAN,CAAA,QAAAO,KAAA;IAG/EI,EAAA,GAAAC,SAAA;MACEN,QAAA,CAASC,KAAA,EAAAG,UAAA,CAAkB,OAAO,IAAIE,SAAA,EAAW,GAAGA,SAAA;IAAA;IACtDZ,CAAA,MAAAM,QAAA;IAAAN,CAAA,MAAAO,KAAA;IAAAP,CAAA,MAAAW,EAAA;EAAA;IAAAA,EAAA,GAAAX,CAAA;EAAA;EAHF,MAAAa,iBAAA,GAA0BF,EAIP;EAAA,IAAAG,EAAA;EAAA,IAAAd,CAAA,QAAAC,KAAA,IAAAD,CAAA,QAAAM,QAAA;IAGaQ,EAAA,GAAAA,CAAA;MAC9BR,QAAA,CAAS;MACTL,KAAA;IAAA;IACFD,CAAA,MAAAC,KAAA;IAAAD,CAAA,MAAAM,QAAA;IAAAN,CAAA,MAAAc,EAAA;EAAA;IAAAA,EAAA,GAAAd,CAAA;EAAA;EAHA,MAAAe,WAAA,GAAoBD,EAGA;EAAA,IAAAE,EAAA;EAAA,IAAAhB,CAAA,QAAAI,gBAAA,IAAAJ,CAAA,QAAAM,QAAA;IAGlBU,EAAA,GAAAC,SAAA;MAAA,KACOb,gBAAA;QAAA;MAAA;MAGLE,QAAA,CAASW,SAAA,KAAc,QAAQb,gBAAA,GAAmB,IAAIA,gBAAA,EAAkB;IAAA;IAC1EJ,CAAA,MAAAI,gBAAA;IAAAJ,CAAA,MAAAM,QAAA;IAAAN,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EANF,MAAAkB,qBAAA,GAA8BF,EAOA;EAAA,IAAAG,EAAA;EAAA,IAAAnB,CAAA,QAAAC,KAAA,IAAAD,CAAA,SAAAS,cAAA,IAAAT,CAAA,SAAAE,cAAA,IAAAF,CAAA,SAAAG,YAAA,EAAAiB,KAAA,IAAApB,CAAA,SAAAI,gBAAA,IAAAJ,CAAA,SAAAe,WAAA,IAAAf,CAAA,SAAAkB,qBAAA,IAAAlB,CAAA,SAAAa,iBAAA,IAAAb,CAAA,SAAAK,QAAA,IAAAL,CAAA,SAAAQ,CAAA;IAAA,IAAAa,EAAA;IAAA,IAAArB,CAAA,SAAAE,cAAA,IAAAF,CAAA,SAAAI,gBAAA,IAAAJ,CAAA,SAAAa,iBAAA;MAmCVQ,EAAA,GAAAC,EAAA;QAAC;UAAArB,KAAA,EAAAsB;QAAA,IAAAD,EAA0B;QAAA,OACjCE,IAAA,CAAA5B,SAAA,CAAA6B,UAAA;UAAAC,QAAA,EACGxB,cAAA,CAAAyB,GAAA,EAAAC,KAAA,EAAAC,CAAA,KACCL,IAAA,CAAA5B,SAAA,CAAAkC,cAAA;YAAAC,MAAA,EACUH,KAAA,CAAAhB,SAAA,KAAoBR,gBAAA;YAAA4B,OAAA,EAAAA,CAAA;cAG1BnB,iBAAA,CAAkBe,KAAA,CAAAhB,SAAe;cACjCW,eAAA;YAAA;YAAAG,QAAA,EAGDE,KAAA,CAAAR;UAAA,GANIS,CAAA;QAAA,C;;;;;;;;;;;MAWCP,EAAA,GAAAW,EAAA;QAAC;UAAAF,MAAA;UAAAC,OAAA;UAAAE;QAAA,IAAAD,EAA8B;QAAA,OAC3CE,KAAA,CAAC;UAAAC,SAAA,EACY,GAAAvC,SAAA,kBAA8B;UAAAmC,OAAA;UAAAE,SAAA;UAAAG,IAAA,EAGpC;UAAAX,QAAA,GAELF,IAAA,CAAC;YAAAY,SAAA,EAAgB,GAAAvC,SAAA,gBAA4B;YAAA6B,QAAA,EAC1CvB,YAAA,EAAAiB,KAAA,IAAuBZ,CAAA,CAAE;UAAA,C,GAE5BgB,IAAA,CAAAlC,WAAA;YAAA2B,SAAA,EAAwBc,MAAA,GAAS,OAAO;YAAAO,IAAA;UAAA,C;;;;;;;;;;;MAcpCL,EAAA,GAAAM,EAAA;QAAC;UAAAtC,KAAA,EAAAuC;QAAA,IAAAD,EAAyB;QAAA,OAChCJ,KAAA,CAAAvC,SAAA,CAAA6B,UAAA;UAAAC,QAAA,GACEF,IAAA,CAAA5B,SAAA,CAAAkC,cAAA;YAAAC,MAAA,EACUtB,cAAA,KAAmB;YAAAuB,OAAA,EAAAA,CAAA;cAEzBd,qBAAA,CAAsB;cACtBsB,cAAA;YAAA;YAAAd,QAAA,EAGDlB,CAAA,CAAE;UAAA,C,GAELgB,IAAA,CAAA5B,SAAA,CAAAkC,cAAA;YAAAC,MAAA,EACUtB,cAAA,KAAmB;YAAAuB,OAAA,EAAAA,CAAA;cAEzBd,qBAAA,CAAsB;cACtBsB,cAAA;YAAA;YAAAd,QAAA,EAGDlB,CAAA,CAAE;UAAA,C;;;;;;;;;;;;MAIK+B,EAAA,GAAAE,EAAA;QAAC;UAAAV,MAAA,EAAAW,QAAA;UAAAV,OAAA,EAAAW,SAAA;UAAAT,SAAA,EAAAU;QAAA,IAAAH,EAA8B;QAAA,OAC3CN,KAAA,CAAC;UAAAC,SAAA,EACY,CACT,GAAAvC,SAAA,kBAA8B,EAC9B,CAACO,gBAAA,IAAoB,GAAAP,SAAA,4BAAwC,EAAAgD,MAAA,CAAAC,OAErD,EAAAC,IAAA,CACF;UAAAC,QAAA,GACG5C,gBAAA;UAAA4B,OAAA,EACFA,SAAA;UAAAE,SAAA,EACEA,WAAA;UAAAG,IAAA,EACN;UAAAX,QAAA,GAELF,IAAA,CAAC;YAAAY,SAAA,EAAgB,GAAAvC,SAAA,gBAA4B;YAAA6B,QAAA,EAC1CjB,cAAA,KAAmB,SAASD,CAAA,CAAE,wBAAwBA,CAAA,CAAE;UAAA,C,GAE3DgB,IAAA,CAAAlC,WAAA;YAAA2B,SAAA,EAAwBc,QAAA,GAAS,OAAO;YAAAO,IAAA;UAAA,C;;;;;;;;;;IA7GtDnB,EAAA,GAAAgB,KAAA,CAAC;MAAAC,SAAA,EAAe,GAAAvC,SAAA,WAAuB;MAAA6B,QAAA,GACrCS,KAAA,CAAC;QAAAC,SAAA,EAAe,GAAAvC,SAAA,UAAsB;QAAA6B,QAAA,GACpCF,IAAA,CAAC;UAAAY,SAAA,EAAgB,GAAAvC,SAAA,SAAqB;UAAA6B,QAAA,EAAGlB,CAAA,CAAE;YAAAY,KAAA,EAAiC;UAAA,CAAG;QAAA,C,GAC/Ee,KAAA,CAAC;UAAAC,SAAA,EAAe,GAAAvC,SAAA,kBAA8B;UAAA6B,QAAA,GAC3CrB,QAAA,IACCmB,IAAA,CAAA9B,MAAA;YAAA,cACcc,CAAA,CAAE;YAAAyC,WAAA,EACF;YAAAC,IAAA,EACN1B,IAAA,CAAAjC,SAAA,IAAC;YAAAyC,OAAA,EACEjB,WAAA;YAAAoC,KAAA;YAAAb,IAAA,EAEJ;UAAA,C,GAGTd,IAAA,CAAA9B,MAAA;YAAA,cACcc,CAAA,CAAE;YAAAyC,WAAA,EACF;YAAAC,IAAA,EACN1B,IAAA,CAAAhC,KAAA;cAAA8C,IAAA;YAAA,C;qBACGrC,KAAA;YAAAkD,KAAA;YAAAb,IAAA,EAEJ;UAAA,C;;UAIXH,KAAA,CAAC;QAAAC,SAAA,EAAe,GAAAvC,SAAA,QAAoB;QAAA6B,QAAA,GAClCS,KAAA,CAAC;UAAAC,SAAA,EAAe,GAAAvC,SAAA,OAAmB;UAAA6B,QAAA,GACjCF,IAAA,CAAC;YAAAY,SAAA,EAAiB,GAAAvC,SAAA,SAAqB;YAAA6B,QAAA,EAAGlB,CAAA,CAAE;UAAA,C,GAC5CgB,IAAA,CAAC;YAAAY,SAAA,EAAe,GAAAvC,SAAA,SAAqB;YAAA;YAAA6B,QAAA,EACnCF,IAAA,CAAA7B,KAAA;cAAAyC,SAAA,EACa,GAAAvC,SAAA,gBAA4B;cAAAuD,eAAA,EACvB;cAAAC,MAAA,EACRhC,E;4BAgBMC,E;6BAaA;YAAA,C;;YAIpBa,KAAA,CAAC;UAAAC,SAAA,EAAe,GAAAvC,SAAA,OAAmB;UAAA6B,QAAA,GACjCF,IAAA,CAAC;YAAAY,SAAA,EAAiB,GAAAvC,SAAA,SAAqB;YAAA6B,QAAA,EAAGlB,CAAA,CAAE;UAAA,C,GAC5CgB,IAAA,CAAC;YAAAY,SAAA,EAAe,GAAAvC,SAAA,SAAqB;YAAA;YAAA6B,QAAA,EACnCF,IAAA,CAAA7B,KAAA;cAAAyC,SAAA,EACa,GAAAvC,SAAA,gBAA4B;cAAAmD,QAAA,GAC5B5C,gBAAA;cAAAgD,eAAA,EACK;cAAAC,MAAA,EACRpB,E;4BAsBMM,E;oBAmBT;cAAAe,aAAA,EACS;YAAA,C;;;;;;;;;;;;;;;;;;;SAjHxBnC,E;CAwHJ","ignoreList":[]}

package/dist/elements/HTMLDiff/diff/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/HTMLDiff/diff/index.ts"],"names":[],"mappings":"AAmCA,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;QACnB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAC,CAAA;IACF;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B;AAWD,qBAAa,QAAQ;IACnB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAgB;IACvC,OAAO,CAAC,iBAAiB,CAAmB;IAC5C,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAqB;IACtD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAe;IACzC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAe;IACzC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAkB;IAChD,OAAO,CAAC,kBAAkB,CAAC,CAAkB;IAC7C,OAAO,CAAC,cAAc,CAAC,CAAQ;gBAG7B,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,EACf,EACE,UAKC,EACD,cAAqB,EACrB,WAAkB,EAClB,cAAkB,EAClB,mBAA2B,GAC5B,GAAE,eAAoB;IA4CzB,OAAO,CAAC,uBAAuB;IA8B/B,OAAO,CAAC,uBAAuB;IAmC/B,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,kBAAkB;IAwD1B,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,0BAA0B;IAelC,OAAO,CAAC,WAAW;IAcnB;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IA+D3B,OAAO,CAAC,gBAAgB;IAoDxB,OAAO,CAAC,qBAAqB;IA0B7B;;;;;OAKG;IACH,OAAO,CAAC,mBAAmB;IAiC3B;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IASf,qBAAqB,IAAI,MAAM,EAAE;IAkEjC,iBAAiB,IAAI,MAAM;CA6HnC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/HTMLDiff/diff/index.ts"],"names":[],"mappings":"AAmCA,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;QACnB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAC,CAAA;IACF;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B;AAWD,qBAAa,QAAQ;IACnB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAgB;IACvC,OAAO,CAAC,iBAAiB,CAAmB;IAC5C,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAqB;IACtD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAe;IACzC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAe;IACzC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAkB;IAChD,OAAO,CAAC,kBAAkB,CAAC,CAAkB;IAC7C,OAAO,CAAC,cAAc,CAAC,CAAQ;IAE/B,YACE,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,EACf,EACE,UAKC,EACD,cAAqB,EACrB,WAAkB,EAClB,cAAkB,EAClB,mBAA2B,GAC5B,GAAE,eAAoB,EAyCxB;IAGD,OAAO,CAAC,uBAAuB;IA8B/B,OAAO,CAAC,uBAAuB;IAmC/B,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,kBAAkB;IAwD1B,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,0BAA0B;IAelC,OAAO,CAAC,WAAW;IAcnB;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IA+D3B,OAAO,CAAC,gBAAgB;IAoDxB,OAAO,CAAC,qBAAqB;IA0B7B;;;;;OAKG;IACH,OAAO,CAAC,mBAAmB;IAiC3B;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IASf,qBAAqB,IAAI,MAAM,EAAE,CAgEvC;IAEM,iBAAiB,IAAI,MAAM,CA4HjC;CACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/HTMLDiff/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AACrB,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAIlE,eAAO,MAAM,qBAAqB,GAAI,yDAKnC;IACD,QAAQ,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC,MAAM,EAAE,MAAM,CAAA;IACd,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B,KAAG;IACF,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,EAAE,EAAE,KAAK,CAAC,SAAS,CAAA;CA4BpB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/HTMLDiff/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AACrB,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAIlE,eAAO,MAAM,qBAAqB,4DAK/B;IACD,QAAQ,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC,MAAM,EAAE,MAAM,CAAA;IACd,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B,KAAG;IACF,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,EAAE,EAAE,KAAK,CAAC,SAAS,CAAA;CA4BpB,CAAA"}

package/dist/elements/Hierarchy/ColumnBrowser/Column/index.css

@@ -5,7 +5,7 @@
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
-    border-right: 1px solid var(--color-border);
+    border-right: var(--stroke-width-small) solid var(--color-border);
     height: 100%;
     background: var(--color-bg);
   }
@@ -16,13 +16,19 @@
     justify-content: space-between;
     gap: var(--spacer-2);
     padding: var(--spacer-1) var(--spacer-3);
+    /*
+     * Lines the add button's trailing edge up with the chevron below it: the items list is inset
+     * by --spacer-1 and each row adds --spacer-1 of margin plus --spacer-1 of padding.
+     */
+    padding-inline-end: var(--spacer-2-5);
     flex-shrink: 0;
-    margin-bottom: var(--spacer-2);
-    border-bottom: 1px solid var(--color-border);
+    margin-bottom: var(--spacer-1);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
   }
 
   .hierarchy-column__add-button {
     flex-shrink: 0;
+    color: var(--color-text-secondary);
   }
 
   .hierarchy-column__header-checkbox {
@@ -33,7 +39,6 @@
     display: flex;
     align-items: center;
     gap: var(--spacer-2);
-    font-weight: 500;
     color: var(--color-text);
     white-space: nowrap;
     overflow: hidden;
@@ -45,8 +50,25 @@
     display: flex;
     flex-direction: column;
     overflow-y: auto;
-    margin: 0 var(--spacer-2);
+    margin: 0 var(--spacer-1);
     gap: var(--spacer-1);
+    /* Keeps the last row - usually the load-more count - off the column's bottom edge when scrolled */
+    padding-block-end: var(--spacer-3);
+  }
+
+  .hierarchy-column__items--selectable-background {
+    cursor: pointer;
+  }
+
+  .hierarchy-column__empty {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacer-3);
+    text-align: center;
+    text-wrap: balance;
+    color: var(--color-text-secondary);
   }
 
   .hierarchy-column__loading {
@@ -57,6 +79,8 @@
   }
 
   .hierarchy-column__load-more {
-    padding: var(--spacer-1) var(--spacer-2) var(--spacer-1) var(--spacer-2-5);
+    padding-block: var(--spacer-1);
+    padding-inline-start: var(--spacer-2-5);
+    padding-inline-end: var(--spacer-2);
   }
 }

package/dist/elements/Hierarchy/ColumnBrowser/Column/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/Hierarchy/ColumnBrowser/Column/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAQ9C,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA2FxC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/Hierarchy/ColumnBrowser/Column/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAQ9C,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAiIxC,CAAA"}

package/dist/elements/Hierarchy/ColumnBrowser/Column/index.js

@@ -12,15 +12,16 @@ import { ColumnItem } from '../ColumnItem/index.js';
 import './index.css';
 const baseClass = 'hierarchy-column';
 export const Column = t0 => {
-  const $ = _c(37);
+  const $ = _c(50);
   const {
-    ancestorsWithSelections,
     canCreate,
     collectionLabel,
+    collectionLabelPlural,
     disabled,
     disabledIds,
     expandedId,
     filterByCollection,
+    hasMany,
     hasNextPage,
     isLoading,
     items,
@@ -28,9 +29,13 @@ export const Column = t0 => {
     onExpand,
     onLoadMore,
     onSelect,
+    onSelectParent,
     parentId,
     parentTitle,
     pathToColumn,
+    revealedId,
+    revealToken,
+    selectedDescendantCounts,
     selectedIds,
     totalDocs
   } = t0;
@@ -38,10 +43,13 @@ export const Column = t0 => {
     t
   } = useTranslation();
   let t1;
-  if ($[0] !== ancestorsWithSelections || $[1] !== canCreate || $[2] !== collectionLabel || $[3] !== disabled || $[4] !== disabledIds || $[5] !== expandedId || $[6] !== filterByCollection || $[7] !== hasNextPage || $[8] !== isLoading || $[9] !== items || $[10] !== onCreateNew || $[11] !== onExpand || $[12] !== onLoadMore || $[13] !== onSelect || $[14] !== parentId || $[15] !== parentTitle || $[16] !== pathToColumn || $[17] !== selectedIds || $[18] !== t || $[19] !== totalDocs) {
+  if ($[0] !== canCreate || $[1] !== collectionLabel || $[2] !== collectionLabelPlural || $[3] !== disabled || $[4] !== disabledIds || $[5] !== expandedId || $[6] !== filterByCollection || $[7] !== hasMany || $[8] !== hasNextPage || $[9] !== isLoading || $[10] !== items || $[11] !== onCreateNew || $[12] !== onExpand || $[13] !== onLoadMore || $[14] !== onSelect || $[15] !== onSelectParent || $[16] !== parentId || $[17] !== parentTitle || $[18] !== pathToColumn || $[19] !== revealToken || $[20] !== revealedId || $[21] !== selectedDescendantCounts || $[22] !== selectedIds || $[23] !== t || $[24] !== totalDocs) {
     const headerTitle = parentTitle || (parentId === null ? t("general:all") : "");
+    const newItemLabel = `New ${collectionLabel}`;
+    const isEmpty = !disabled && !isLoading && items.length === 0;
+    const emptyLabel = parentId === null ? `No ${collectionLabelPlural}` : `No other ${collectionLabelPlural}`;
     let t2;
-    if ($[21] !== items || $[22] !== onSelect || $[23] !== pathToColumn) {
+    if ($[26] !== items || $[27] !== onSelect || $[28] !== pathToColumn) {
       t2 = t3 => {
         const {
           id
@@ -56,80 +64,117 @@ export const Column = t0 => {
           path: fullPath
         });
       };
-      $[21] = items;
-      $[22] = onSelect;
-      $[23] = pathToColumn;
-      $[24] = t2;
+      $[26] = items;
+      $[27] = onSelect;
+      $[28] = pathToColumn;
+      $[29] = t2;
     } else {
-      t2 = $[24];
+      t2 = $[29];
     }
     const handleSelect = t2;
     let t3;
-    if ($[25] !== onCreateNew || $[26] !== parentId) {
+    if ($[30] !== onCreateNew || $[31] !== parentId) {
       t3 = () => {
         onCreateNew({
           parentId
         });
       };
-      $[25] = onCreateNew;
-      $[26] = parentId;
-      $[27] = t3;
+      $[30] = onCreateNew;
+      $[31] = parentId;
+      $[32] = t3;
     } else {
-      t3 = $[27];
+      t3 = $[32];
     }
     const handleCreateNew = t3;
     let t4;
-    if ($[28] !== ancestorsWithSelections || $[29] !== disabled || $[30] !== disabledIds || $[31] !== expandedId || $[32] !== filterByCollection || $[33] !== handleSelect || $[34] !== onExpand || $[35] !== selectedIds) {
-      t4 = item_0 => _jsx(ColumnItem, {
+    if ($[33] !== onSelectParent || $[34] !== parentId) {
+      t4 = event => {
+        if (!onSelectParent || parentId === null || event.target !== event.currentTarget) {
+          return;
+        }
+        onSelectParent({
+          id: parentId
+        });
+      };
+      $[33] = onSelectParent;
+      $[34] = parentId;
+      $[35] = t4;
+    } else {
+      t4 = $[35];
+    }
+    const handleBackgroundClick = t4;
+    const t5 = _jsxs("div", {
+      className: `${baseClass}__header`,
+      children: [_jsx("span", {
+        className: `${baseClass}__header-title`,
+        children: headerTitle
+      }), canCreate && _jsx(Button, {
+        "aria-label": newItemLabel,
+        buttonStyle: "ghost",
+        className: `${baseClass}__add-button`,
+        disabled,
+        icon: _jsx(PlusIcon, {
+          size: 24
+        }),
+        margin: false,
+        onClick: handleCreateNew,
+        size: "medium",
+        tooltip: newItemLabel
+      })]
+    });
+    const t6 = onSelectParent && parentId !== null && `${baseClass}__items--selectable-background`;
+    let t7;
+    if ($[36] !== t6) {
+      t7 = [`${baseClass}__items`, t6].filter(Boolean);
+      $[36] = t6;
+      $[37] = t7;
+    } else {
+      t7 = $[37];
+    }
+    let t8;
+    if ($[38] !== disabled || $[39] !== disabledIds || $[40] !== expandedId || $[41] !== filterByCollection || $[42] !== handleSelect || $[43] !== hasMany || $[44] !== onExpand || $[45] !== revealToken || $[46] !== revealedId || $[47] !== selectedDescendantCounts || $[48] !== selectedIds) {
+      t8 = item_0 => _jsx(ColumnItem, {
         disabled: Boolean(disabled || disabledIds?.has(item_0.id)),
         filterByCollection,
-        hasSelectedDescendants: ancestorsWithSelections.has(item_0.id),
+        hasMany,
         isExpanded: expandedId === item_0.id,
         isSelected: selectedIds.has(item_0.id),
         item: item_0,
         onExpand,
-        onSelect: handleSelect
+        onSelect: handleSelect,
+        revealToken: revealedId === item_0.id ? revealToken : undefined,
+        selectedDescendantCount: selectedDescendantCounts.get(item_0.id) ?? 0
       }, String(item_0.id));
-      $[28] = ancestorsWithSelections;
-      $[29] = disabled;
-      $[30] = disabledIds;
-      $[31] = expandedId;
-      $[32] = filterByCollection;
-      $[33] = handleSelect;
-      $[34] = onExpand;
-      $[35] = selectedIds;
-      $[36] = t4;
+      $[38] = disabled;
+      $[39] = disabledIds;
+      $[40] = expandedId;
+      $[41] = filterByCollection;
+      $[42] = handleSelect;
+      $[43] = hasMany;
+      $[44] = onExpand;
+      $[45] = revealToken;
+      $[46] = revealedId;
+      $[47] = selectedDescendantCounts;
+      $[48] = selectedIds;
+      $[49] = t8;
     } else {
-      t4 = $[36];
+      t8 = $[49];
     }
     t1 = _jsxs("div", {
       className: baseClass,
-      children: [_jsxs("div", {
-        className: `${baseClass}__header`,
-        children: [_jsx("span", {
-          className: `${baseClass}__header-title`,
-          children: headerTitle
-        }), canCreate && _jsxs(Button, {
-          buttonStyle: "ghost",
-          className: `${baseClass}__add-button`,
-          disabled,
-          icon: _jsx(PlusIcon, {
-            size: 16
-          }),
-          iconPosition: "left",
-          margin: false,
-          onClick: handleCreateNew,
-          size: "medium",
-          children: ["New ", collectionLabel]
-        })]
-      }), _jsxs("div", {
-        className: `${baseClass}__items`,
-        children: [items.map(t4), isLoading && _jsx("div", {
+      children: [t5, _jsxs("div", {
+        className: t7.join(" "),
+        onClick: handleBackgroundClick,
+        role: "presentation",
+        children: [items.map(t8), isLoading && _jsx("div", {
           className: `${baseClass}__loading`,
           children: _jsx(Spinner, {
             loadingText: null,
             size: "sm"
           })
+        }), isEmpty && _jsx("div", {
+          className: `${baseClass}__empty`,
+          children: emptyLabel
         }), !disabled && !isLoading && totalDocs > 0 && _jsx(LoadMoreRow, {
           className: `${baseClass}__load-more`,
           currentCount: items.length,
@@ -139,29 +184,34 @@ export const Column = t0 => {
         })]
       })]
     });
-    $[0] = ancestorsWithSelections;
-    $[1] = canCreate;
-    $[2] = collectionLabel;
+    $[0] = canCreate;
+    $[1] = collectionLabel;
+    $[2] = collectionLabelPlural;
     $[3] = disabled;
     $[4] = disabledIds;
     $[5] = expandedId;
     $[6] = filterByCollection;
-    $[7] = hasNextPage;
-    $[8] = isLoading;
-    $[9] = items;
-    $[10] = onCreateNew;
-    $[11] = onExpand;
-    $[12] = onLoadMore;
-    $[13] = onSelect;
-    $[14] = parentId;
-    $[15] = parentTitle;
-    $[16] = pathToColumn;
-    $[17] = selectedIds;
-    $[18] = t;
-    $[19] = totalDocs;
-    $[20] = t1;
+    $[7] = hasMany;
+    $[8] = hasNextPage;
+    $[9] = isLoading;
+    $[10] = items;
+    $[11] = onCreateNew;
+    $[12] = onExpand;
+    $[13] = onLoadMore;
+    $[14] = onSelect;
+    $[15] = onSelectParent;
+    $[16] = parentId;
+    $[17] = parentTitle;
+    $[18] = pathToColumn;
+    $[19] = revealToken;
+    $[20] = revealedId;
+    $[21] = selectedDescendantCounts;
+    $[22] = selectedIds;
+    $[23] = t;
+    $[24] = totalDocs;
+    $[25] = t1;
   } else {
-    t1 = $[20];
+    t1 = $[25];
   }
   return t1;
 };

package/dist/elements/Hierarchy/ColumnBrowser/Column/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useCallback","PlusIcon","useTranslation","Button","LoadMoreRow","Spinner","ColumnItem","baseClass","Column","t0","$","ancestorsWithSelections","canCreate","collectionLabel","disabled","disabledIds","expandedId","filterByCollection","hasNextPage","isLoading","items","onCreateNew","onExpand","onLoadMore","onSelect","parentId","parentTitle","pathToColumn","selectedIds","totalDocs","t","t1","headerTitle","t2","t3","id","item","find","i","fullPath","title","path","handleSelect","handleCreateNew","t4","item_0","_jsx","Boolean","has","hasSelectedDescendants","isExpanded","isSelected","String","_jsxs","className","children","buttonStyle","icon","size","margin","onClick","map","loadingText","currentCount","length","hasMore"],"sources":["../../../../../src/elements/Hierarchy/ColumnBrowser/Column/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback } from 'react'\n\nimport type { ColumnProps } from '../types.js'\n\nimport { PlusIcon } from '../../../../icons/Plus/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { Button } from '../../../Button/index.js'\nimport { LoadMoreRow } from '../../../LoadMoreRow/index.js'\nimport { Spinner } from '../../../Spinner/index.js'\nimport { ColumnItem } from '../ColumnItem/index.js'\nimport './index.css'\n\nconst baseClass = 'hierarchy-column'\n\nexport const Column: React.FC<ColumnProps> = ({\n  ancestorsWithSelections,\n  canCreate,\n  collectionLabel,\n  disabled,\n  disabledIds,\n  expandedId,\n  filterByCollection,\n  hasNextPage,\n  isLoading,\n  items,\n  onCreateNew,\n  onExpand,\n  onLoadMore,\n  onSelect,\n  parentId,\n  parentTitle,\n  pathToColumn,\n  selectedIds,\n  totalDocs,\n}) => {\n  const { t } = useTranslation()\n\n  const headerTitle = parentTitle || (parentId === null ? t('general:all') : '')\n\n  const handleSelect = useCallback(\n    ({ id }: { id: number | string }) => {\n      const item = items.find((i) => i.id === id)\n      const fullPath = item ? [...pathToColumn, { id: item.id, title: item.title }] : pathToColumn\n      onSelect({ id, path: fullPath })\n    },\n    [items, onSelect, pathToColumn],\n  )\n\n  const handleCreateNew = useCallback(() => {\n    onCreateNew({ parentId })\n  }, [onCreateNew, parentId])\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__header`}>\n        <span className={`${baseClass}__header-title`}>{headerTitle}</span>\n        {canCreate && (\n          <Button\n            buttonStyle=\"ghost\"\n            className={`${baseClass}__add-button`}\n            disabled={disabled}\n            icon={<PlusIcon size={16} />}\n            iconPosition=\"left\"\n            margin={false}\n            onClick={handleCreateNew}\n            size=\"medium\"\n          >\n            New {collectionLabel}\n          </Button>\n        )}\n      </div>\n\n      <div className={`${baseClass}__items`}>\n        {items.map((item) => (\n          <ColumnItem\n            disabled={Boolean(disabled || disabledIds?.has(item.id))}\n            filterByCollection={filterByCollection}\n            hasSelectedDescendants={ancestorsWithSelections.has(item.id)}\n            isExpanded={expandedId === item.id}\n            isSelected={selectedIds.has(item.id)}\n            item={item}\n            key={String(item.id)}\n            onExpand={onExpand}\n            onSelect={handleSelect}\n          />\n        ))}\n\n        {isLoading && (\n          <div className={`${baseClass}__loading`}>\n            <Spinner loadingText={null} size=\"sm\" />\n          </div>\n        )}\n\n        {!disabled && !isLoading && totalDocs > 0 && (\n          <LoadMoreRow\n            className={`${baseClass}__load-more`}\n            currentCount={items.length}\n            hasMore={hasNextPage}\n            onLoadMore={onLoadMore}\n            totalDocs={totalDocs}\n          />\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useCallback","PlusIcon","useTranslation","Button","LoadMoreRow","Spinner","ColumnItem","baseClass","Column","t0","$","canCreate","collectionLabel","collectionLabelPlural","disabled","disabledIds","expandedId","filterByCollection","hasMany","hasNextPage","isLoading","items","onCreateNew","onExpand","onLoadMore","onSelect","onSelectParent","parentId","parentTitle","pathToColumn","revealedId","revealToken","selectedDescendantCounts","selectedIds","totalDocs","t","t1","headerTitle","newItemLabel","isEmpty","length","emptyLabel","t2","t3","id","item","find","i","fullPath","title","path","handleSelect","handleCreateNew","t4","event","target","currentTarget","handleBackgroundClick","t5","_jsxs","className","children","_jsx","buttonStyle","icon","size","tooltip","t6","t7","filter","Boolean","t8","item_0","has","isExpanded","isSelected","undefined","selectedDescendantCount","get","String","join","onClick","role","map","loadingText","currentCount","hasMore"],"sources":["../../../../../src/elements/Hierarchy/ColumnBrowser/Column/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback } from 'react'\n\nimport type { ColumnProps } from '../types.js'\n\nimport { PlusIcon } from '../../../../icons/Plus/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { Button } from '../../../Button/index.js'\nimport { LoadMoreRow } from '../../../LoadMoreRow/index.js'\nimport { Spinner } from '../../../Spinner/index.js'\nimport { ColumnItem } from '../ColumnItem/index.js'\nimport './index.css'\n\nconst baseClass = 'hierarchy-column'\n\nexport const Column: React.FC<ColumnProps> = ({\n  canCreate,\n  collectionLabel,\n  collectionLabelPlural,\n  disabled,\n  disabledIds,\n  expandedId,\n  filterByCollection,\n  hasMany,\n  hasNextPage,\n  isLoading,\n  items,\n  onCreateNew,\n  onExpand,\n  onLoadMore,\n  onSelect,\n  onSelectParent,\n  parentId,\n  parentTitle,\n  pathToColumn,\n  revealedId,\n  revealToken,\n  selectedDescendantCounts,\n  selectedIds,\n  totalDocs,\n}) => {\n  const { t } = useTranslation()\n\n  const headerTitle = parentTitle || (parentId === null ? t('general:all') : '')\n  const newItemLabel = `New ${collectionLabel}`\n  const isEmpty = !disabled && !isLoading && items.length === 0\n\n  // TODO: replace with translation keys once the hierarchy strings are finalized. The closest\n  // existing string, `version:noRowsFound`, belongs to the version-diff tables.\n  const emptyLabel =\n    parentId === null ? `No ${collectionLabelPlural}` : `No other ${collectionLabelPlural}`\n\n  const handleSelect = useCallback(\n    ({ id }: { id: number | string }) => {\n      const item = items.find((i) => i.id === id)\n      const fullPath = item ? [...pathToColumn, { id: item.id, title: item.title }] : pathToColumn\n      onSelect({ id, path: fullPath })\n    },\n    [items, onSelect, pathToColumn],\n  )\n\n  const handleCreateNew = useCallback(() => {\n    onCreateNew({ parentId })\n  }, [onCreateNew, parentId])\n\n  // Single-select only: clicking the empty space below the rows (not a row itself) makes this\n  // column's own folder the current destination, mirroring a click on the row that opened it.\n  const handleBackgroundClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      if (!onSelectParent || parentId === null || event.target !== event.currentTarget) {\n        return\n      }\n      onSelectParent({ id: parentId })\n    },\n    [onSelectParent, parentId],\n  )\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__header`}>\n        <span className={`${baseClass}__header-title`}>{headerTitle}</span>\n        {canCreate && (\n          <Button\n            aria-label={newItemLabel}\n            buttonStyle=\"ghost\"\n            className={`${baseClass}__add-button`}\n            disabled={disabled}\n            icon={<PlusIcon size={24} />}\n            margin={false}\n            onClick={handleCreateNew}\n            size=\"medium\"\n            tooltip={newItemLabel}\n          />\n        )}\n      </div>\n\n      <div\n        className={[\n          `${baseClass}__items`,\n          onSelectParent && parentId !== null && `${baseClass}__items--selectable-background`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        onClick={handleBackgroundClick}\n        // Mouse-only shortcut on a plain container: keyboard users reach the same selection by\n        // activating the folder's own row, so this adds no semantics of its own.\n        role=\"presentation\"\n      >\n        {items.map((item) => (\n          <ColumnItem\n            disabled={Boolean(disabled || disabledIds?.has(item.id))}\n            filterByCollection={filterByCollection}\n            hasMany={hasMany}\n            isExpanded={expandedId === item.id}\n            isSelected={selectedIds.has(item.id)}\n            item={item}\n            key={String(item.id)}\n            onExpand={onExpand}\n            onSelect={handleSelect}\n            revealToken={revealedId === item.id ? revealToken : undefined}\n            selectedDescendantCount={selectedDescendantCounts.get(item.id) ?? 0}\n          />\n        ))}\n\n        {isLoading && (\n          <div className={`${baseClass}__loading`}>\n            <Spinner loadingText={null} size=\"sm\" />\n          </div>\n        )}\n\n        {isEmpty && <div className={`${baseClass}__empty`}>{emptyLabel}</div>}\n\n        {!disabled && !isLoading && totalDocs > 0 && (\n          <LoadMoreRow\n            className={`${baseClass}__load-more`}\n            currentCount={items.length}\n            hasMore={hasNextPage}\n            onLoadMore={onLoadMore}\n            totalDocs={totalDocs}\n          />\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Hierarchy/ColumnBrowser/ColumnItem/index.css

@@ -1,13 +1,16 @@
 @layer payload-default {
   .hierarchy-column-item {
+    position: relative;
     display: flex;
     align-items: center;
     padding: var(--spacer-1) var(--spacer-2);
-    cursor: pointer;
-    transition: background-color 80ms ease;
+    padding-inline-end: var(--spacer-1);
     user-select: none;
     gap: var(--spacer-2-5);
     border-radius: var(--button-radius);
+    margin-inline: var(--spacer-1);
+    outline: var(--stroke-width-small) solid transparent;
+    outline-offset: calc(var(--stroke-width-small) * -1);
 
     &:first-child {
       margin-top: var(--spacer-1);
@@ -20,23 +23,54 @@
     &:hover {
       background-color: var(--color-bg-hover);
     }
+
+    &:has(.hierarchy-column-item__select:focus-visible) {
+      outline: var(--accessibility-outline);
+      outline-offset: var(--accessibility-outline-offset);
+    }
   }
 
-  .hierarchy-column-item--expanded {
-    background-color: var(--color-bg-tertiary);
+  /*
+   * Row-wide click target for the row's primary action, sitting under the checkbox and chevron.
+   * It is the topmost element across the row, so its cursor is the one the pointer shows.
+   */
+  .hierarchy-column-item__select {
+    position: absolute;
+    inset: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    border-radius: inherit;
+    cursor: pointer;
 
-    &:hover {
-      background-color: var(--color-bg-tertiary);
+    &:focus-visible {
+      outline: none;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
     }
   }
 
-  .hierarchy-column-item--selected {
-    background-color: var(--color-bg-selected);
+  /* Shares the hover fill, so pointing at a row previews how an open folder reads */
+  .hierarchy-column-item--expanded {
+    background-color: var(--color-bg-hover);
+  }
 
-    &:hover {
-      background-color: var(--color-bg-selected);
-    }
+  /*
+   * Only single-select rows carry a selected style. There is no checkbox in that mode, so the fill
+   * and ring are the only signal. In multi-select the checkbox already says what is picked, and
+   * filling those rows as well drowns out the `--expanded` fill that marks the current path.
+   *
+   * The ring is an inset outline rather than a border so the row's height does not shift when it
+   * becomes selected.
+   */
+  .hierarchy-column-item--selected:not(.hierarchy-column-item--multi-select) {
+    background-color: var(--color-bg-selected);
+    outline-color: var(--color-border-selected);
 
+    /* Selection outranks hover - the fill holds while the pointer is over the row */
+    &:hover,
     &.hierarchy-column-item--expanded {
       background-color: var(--color-bg-selected);
     }
@@ -55,20 +89,33 @@
     }
   }
 
+  /*
+   * Raised above the select overlay so it takes its own clicks - in multi-select the checkbox is
+   * the only thing that toggles selection, while the overlay behind it opens children.
+   */
   .hierarchy-column-item__checkbox {
+    position: relative;
+    z-index: 1;
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
+    cursor: pointer;
 
     input[type='checkbox'] {
       width: 100%;
       height: 100%;
       margin: 0;
+      cursor: inherit;
+
+      &:disabled {
+        cursor: not-allowed;
+      }
     }
   }
 
   .hierarchy-column-item__title {
+    position: relative;
     flex: 1;
     min-width: 0;
     overflow: hidden;
@@ -76,21 +123,59 @@
     white-space: nowrap;
     color: var(--color-text);
     font-weight: 500;
+    pointer-events: none;
   }
 
-  .hierarchy-column-item__descendant-indicator {
-    width: var(--spacer-1);
-    height: var(--spacer-1);
-    border-radius: 50%;
-    background-color: var(--color-bg-success);
+  /* Keeps the count badge tucked against the chevron rather than at the row's wider gap */
+  .hierarchy-column-item__trail {
     flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-1);
+  }
+
+  /* Count of selected items nested under a row, so a collapsed branch still reads as having picks */
+  .hierarchy-column-item__descendant-count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--spacer-3);
+    min-width: var(--spacer-3);
+    padding-inline: var(--spacer-1);
+    border-radius: var(--radius-medium);
+    background-color: var(--color-bg-tertiary);
+    color: var(--color-text);
+    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);
+    pointer-events: none;
   }
 
   .hierarchy-column-item__chevron {
+    position: relative;
+    z-index: 1;
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
+    width: var(--spacer-4);
+    height: var(--spacer-4);
+    padding: 0;
+    border: none;
+    background: transparent;
+    border-radius: var(--radius-small);
     color: var(--color-icon-tertiary);
+    cursor: pointer;
+
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+      outline-offset: var(--accessibility-outline-offset);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
   }
 }