@payloadcms/ui 4.0.0-internal.016994f → 4.0.0-internal.0731f09

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

@@ -1,16 +1,13 @@
 @layer payload-default {
   .hierarchy-column-item {
-    position: relative;
     display: flex;
     align-items: center;
     padding: var(--spacer-1) var(--spacer-2);
-    padding-inline-end: var(--spacer-1);
+    cursor: pointer;
     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);
@@ -23,54 +20,23 @@
     &:hover {
       background-color: var(--color-bg-hover);
     }
-
-    &:has(.hierarchy-column-item__select:focus-visible) {
-      outline: var(--accessibility-outline);
-      outline-offset: var(--accessibility-outline-offset);
-    }
   }
 
-  /*
-   * 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;
-
-    &:focus-visible {
-      outline: none;
-    }
+  .hierarchy-column-item--expanded {
+    background-color: var(--color-bg-tertiary);
 
-    &:disabled {
-      cursor: not-allowed;
+    &:hover {
+      background-color: var(--color-bg-tertiary);
     }
   }
 
-  /* 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);
-  }
-
-  /*
-   * 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) {
+  .hierarchy-column-item--selected {
     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,
+    &:hover {
+      background-color: var(--color-bg-selected);
+    }
+
     &.hierarchy-column-item--expanded {
       background-color: var(--color-bg-selected);
     }
@@ -89,33 +55,20 @@
     }
   }
 
-  /*
-   * 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;
@@ -123,59 +76,21 @@
     white-space: nowrap;
     color: var(--color-text);
     font-weight: 500;
-    pointer-events: none;
   }
 
-  /* Keeps the count badge tucked against the chevron rather than at the row's wider gap */
-  .hierarchy-column-item__trail {
+  .hierarchy-column-item__descendant-indicator {
+    width: var(--spacer-1);
+    height: var(--spacer-1);
+    border-radius: 50%;
+    background-color: var(--color-bg-success);
     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;
-    }
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/Hierarchy/ColumnBrowser/ColumnItem/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkD,MAAM,OAAO,CAAA;AAEtE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAKlD,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAiIhD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/Hierarchy/ColumnBrowser/ColumnItem/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAE1D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAKlD,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwGhD,CAAA"}

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

@@ -1,122 +1,182 @@
 'use client';
 
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useId, useMemo } from 'react';
 import { CheckboxInput } from '../../../../fields/Checkbox/Input.js';
 import { ChevronIcon } from '../../../../icons/Chevron/index.js';
 import { isSuperset } from '../../../../utilities/isSuperset.js';
 import './index.css';
 const baseClass = 'hierarchy-column-item';
-export const ColumnItem = ({
-  disabled,
-  filterByCollection,
-  hasMany,
-  isExpanded,
-  isSelected,
-  item,
-  onExpand,
-  onSelect,
-  revealToken,
-  selectedDescendantCount
-}) => {
+export const ColumnItem = t0 => {
+  const $ = _c(33);
+  const {
+    disabled,
+    filterByCollection,
+    hasSelectedDescendants,
+    isExpanded,
+    isSelected,
+    item,
+    onExpand,
+    onSelect
+  } = t0;
   const {
     id,
     allowedCollections,
     hasChildren,
     title
   } = item;
-  const rowRef = useRef(null);
-  const rowActionRef = useRef(null);
-  const checkboxRef = useRef(null);
-  // Disable selection if:
-  // 1. This item is in the disabledIds set (e.g., being moved)
-  // 2. Folder doesn't allow ALL required collections
-  const isDisabled = useMemo(() => {
+  const titleId = useId();
+  let t1;
+  bb0: {
     if (disabled) {
-      return true;
+      t1 = true;
+      break bb0;
     }
-    if (!filterByCollection || filterByCollection.length === 0) {
-      return false;
+    if (filterByCollection === undefined) {
+      t1 = false;
+      break bb0;
     }
-    return !isSuperset(allowedCollections, filterByCollection);
-  }, [allowedCollections, disabled, filterByCollection]);
-  useEffect(() => {
-    if (revealToken === undefined) {
-      return;
+    let t2;
+    if ($[0] !== allowedCollections || $[1] !== filterByCollection) {
+      t2 = isSuperset(allowedCollections, filterByCollection);
+      $[0] = allowedCollections;
+      $[1] = filterByCollection;
+      $[2] = t2;
+    } else {
+      t2 = $[2];
     }
-    rowRef.current?.scrollIntoView({
-      behavior: 'instant',
-      block: 'nearest',
-      inline: 'nearest'
-    });
-    // Focus whichever control owns selection for this mode
-    const target = hasMany ? checkboxRef.current : rowActionRef.current;
-    target?.focus({
-      preventScroll: true
-    });
-  }, [hasMany, revealToken]);
-  const handleSelect = useCallback(() => {
-    onSelect({
-      id
-    });
-    // Single-select mirrors the macOS column view: picking a folder also makes it the open one,
-    // which collapses any columns deeper than it.
-    if (!hasMany && hasChildren) {
-      onExpand({
+    t1 = !t2;
+  }
+  const isDisabled = t1;
+  let t2;
+  if ($[3] !== id || $[4] !== isDisabled || $[5] !== onSelect) {
+    t2 = e => {
+      e.stopPropagation();
+      if (isDisabled) {
+        return;
+      }
+      onSelect({
         id
       });
-    }
-  }, [hasChildren, hasMany, id, onExpand, onSelect]);
-  const handleExpand = useCallback(() => {
-    onExpand({
-      id
-    });
-  }, [id, onExpand]);
-  return /*#__PURE__*/_jsxs("div", {
-    className: [baseClass, hasMany && `${baseClass}--multi-select`, isExpanded && `${baseClass}--expanded`, isSelected && `${baseClass}--selected`, isDisabled && `${baseClass}--disabled`].filter(Boolean).join(' '),
-    ref: rowRef,
-    children: [(!hasMany || hasChildren) && /*#__PURE__*/_jsx("button", {
-      "aria-hidden": hasMany ? 'true' : undefined,
-      "aria-label": title,
-      "aria-pressed": hasMany ? undefined : isSelected,
-      className: `${baseClass}__select`,
-      disabled: isDisabled,
-      onClick: hasMany ? handleExpand : handleSelect,
-      ref: rowActionRef,
-      tabIndex: hasMany ? -1 : undefined,
-      type: "button"
-    }), hasMany && /*#__PURE__*/_jsx("div", {
-      className: `${baseClass}__checkbox`,
-      children: /*#__PURE__*/_jsx(CheckboxInput, {
-        "aria-label": title,
-        checked: isSelected,
-        inputRef: checkboxRef,
-        onToggle: handleSelect,
-        readOnly: isDisabled
-      })
-    }), /*#__PURE__*/_jsx("span", {
-      className: `${baseClass}__title`,
-      title: title,
-      children: title
-    }), (hasMany && selectedDescendantCount > 0 || hasChildren) && /*#__PURE__*/_jsxs("div", {
-      className: `${baseClass}__trail`,
-      children: [hasMany && selectedDescendantCount > 0 && /*#__PURE__*/_jsx("span", {
-        className: `${baseClass}__descendant-count`,
-        children: selectedDescendantCount
-      }), hasChildren && /*#__PURE__*/_jsx("button", {
-        "aria-expanded": isExpanded,
-        // TODO: replace with a translation key once the hierarchy strings are finalized
-        "aria-label": `Open ${title}`,
+    };
+    $[3] = id;
+    $[4] = isDisabled;
+    $[5] = onSelect;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  const handleCheckboxToggle = t2;
+  let t3;
+  if ($[7] !== hasChildren || $[8] !== id || $[9] !== onExpand) {
+    t3 = e_0 => {
+      if (e_0.target.closest(`.${baseClass}__checkbox`)) {
+        return;
+      }
+      if (hasChildren) {
+        onExpand({
+          id
+        });
+      }
+    };
+    $[7] = hasChildren;
+    $[8] = id;
+    $[9] = onExpand;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  const handleRowClick = t3;
+  let t4;
+  if ($[11] !== hasChildren || $[12] !== id || $[13] !== onExpand) {
+    t4 = e_1 => {
+      if (e_1.key === "Enter" || e_1.key === " ") {
+        e_1.preventDefault();
+        if (hasChildren) {
+          onExpand({
+            id
+          });
+        }
+      }
+    };
+    $[11] = hasChildren;
+    $[12] = id;
+    $[13] = onExpand;
+    $[14] = t4;
+  } else {
+    t4 = $[14];
+  }
+  const handleKeyDown = t4;
+  const t5 = isSelected ? "location" : undefined;
+  const t6 = isDisabled || undefined;
+  const t7 = isExpanded && `${baseClass}--expanded`;
+  const t8 = isSelected && `${baseClass}--selected`;
+  const t9 = isDisabled && `${baseClass}--disabled`;
+  let t10;
+  if ($[15] !== t7 || $[16] !== t8 || $[17] !== t9) {
+    t10 = [baseClass, t7, t8, t9].filter(Boolean);
+    $[15] = t7;
+    $[16] = t8;
+    $[17] = t9;
+    $[18] = t10;
+  } else {
+    t10 = $[18];
+  }
+  const t11 = t10.join(" ");
+  const t12 = isDisabled ? undefined : handleRowClick;
+  const t13 = isDisabled ? undefined : handleKeyDown;
+  const t14 = isDisabled ? -1 : 0;
+  let t15;
+  if ($[19] !== handleCheckboxToggle || $[20] !== hasChildren || $[21] !== hasSelectedDescendants || $[22] !== isDisabled || $[23] !== isSelected || $[24] !== t11 || $[25] !== t12 || $[26] !== t13 || $[27] !== t14 || $[28] !== t5 || $[29] !== t6 || $[30] !== title || $[31] !== titleId) {
+    t15 = _jsxs("div", {
+      "aria-current": t5,
+      "aria-disabled": t6,
+      className: t11,
+      onClick: t12,
+      onKeyDown: t13,
+      role: "button",
+      tabIndex: t14,
+      children: [_jsx("div", {
+        className: `${baseClass}__checkbox`,
+        children: _jsx(CheckboxInput, {
+          "aria-labelledby": titleId,
+          checked: isSelected,
+          onToggle: handleCheckboxToggle,
+          readOnly: isDisabled,
+          variant: "muted"
+        })
+      }), _jsx("span", {
+        className: `${baseClass}__title`,
+        id: titleId,
+        title,
+        children: title
+      }), hasSelectedDescendants && !isSelected && _jsx("span", {
+        className: `${baseClass}__descendant-indicator`
+      }), hasChildren && _jsx("span", {
         className: `${baseClass}__chevron`,
-        disabled: isDisabled,
-        onClick: handleExpand,
-        type: "button",
-        children: /*#__PURE__*/_jsx(ChevronIcon, {
-          direction: "right",
-          size: 16
+        children: _jsx(ChevronIcon, {
+          direction: "right"
         })
       })]
-    })]
-  });
+    });
+    $[19] = handleCheckboxToggle;
+    $[20] = hasChildren;
+    $[21] = hasSelectedDescendants;
+    $[22] = isDisabled;
+    $[23] = isSelected;
+    $[24] = t11;
+    $[25] = t12;
+    $[26] = t13;
+    $[27] = t14;
+    $[28] = t5;
+    $[29] = t6;
+    $[30] = title;
+    $[31] = titleId;
+    $[32] = t15;
+  } else {
+    t15 = $[32];
+  }
+  return t15;
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useMemo","useRef","CheckboxInput","ChevronIcon","isSuperset","baseClass","ColumnItem","disabled","filterByCollection","hasMany","isExpanded","isSelected","item","onExpand","onSelect","revealToken","selectedDescendantCount","id","allowedCollections","hasChildren","title","rowRef","rowActionRef","checkboxRef","isDisabled","length","undefined","current","scrollIntoView","behavior","block","inline","target","focus","preventScroll","handleSelect","handleExpand","_jsxs","className","filter","Boolean","join","ref","_jsx","onClick","tabIndex","type","checked","inputRef","onToggle","readOnly","direction","size"],"sources":["../../../../../src/elements/Hierarchy/ColumnBrowser/ColumnItem/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react'\n\nimport type { ColumnItemProps } from '../types.js'\n\nimport { CheckboxInput } from '../../../../fields/Checkbox/Input.js'\nimport { ChevronIcon } from '../../../../icons/Chevron/index.js'\nimport { isSuperset } from '../../../../utilities/isSuperset.js'\nimport './index.css'\n\nconst baseClass = 'hierarchy-column-item'\n\nexport const ColumnItem: React.FC<ColumnItemProps> = ({\n  disabled,\n  filterByCollection,\n  hasMany,\n  isExpanded,\n  isSelected,\n  item,\n  onExpand,\n  onSelect,\n  revealToken,\n  selectedDescendantCount,\n}) => {\n  const { id, allowedCollections, hasChildren, title } = item\n  const rowRef = useRef<HTMLDivElement>(null)\n  const rowActionRef = useRef<HTMLButtonElement>(null)\n  const checkboxRef = useRef<HTMLInputElement>(null)\n\n  // Disable selection if:\n  // 1. This item is in the disabledIds set (e.g., being moved)\n  // 2. Folder doesn't allow ALL required collections\n  const isDisabled = useMemo(() => {\n    if (disabled) {\n      return true\n    }\n    if (!filterByCollection || filterByCollection.length === 0) {\n      return false\n    }\n    return !isSuperset(allowedCollections, filterByCollection)\n  }, [allowedCollections, disabled, filterByCollection])\n\n  useEffect(() => {\n    if (revealToken === undefined) {\n      return\n    }\n\n    rowRef.current?.scrollIntoView({ behavior: 'instant', block: 'nearest', inline: 'nearest' })\n\n    // Focus whichever control owns selection for this mode\n    const target = hasMany ? checkboxRef.current : rowActionRef.current\n    target?.focus({ preventScroll: true })\n  }, [hasMany, revealToken])\n\n  const handleSelect = useCallback(() => {\n    onSelect({ id })\n\n    // Single-select mirrors the macOS column view: picking a folder also makes it the open one,\n    // which collapses any columns deeper than it.\n    if (!hasMany && hasChildren) {\n      onExpand({ id })\n    }\n  }, [hasChildren, hasMany, id, onExpand, onSelect])\n\n  const handleExpand = useCallback(() => {\n    onExpand({ id })\n  }, [id, onExpand])\n\n  return (\n    <div\n      className={[\n        baseClass,\n        hasMany && `${baseClass}--multi-select`,\n        isExpanded && `${baseClass}--expanded`,\n        isSelected && `${baseClass}--selected`,\n        isDisabled && `${baseClass}--disabled`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      ref={rowRef}\n    >\n      {/*\n        Full-bleed overlay carrying the row's primary action. Single-select picks the row; in\n        multi-select the checkbox owns selection, so the row body opens children instead - and a\n        row with none gets no overlay at all. The chevron and checkbox are the controls exposed to\n        assistive tech in multi-select, so the overlay is hidden from it to avoid announcing the\n        same action twice.\n      */}\n      {(!hasMany || hasChildren) && (\n        <button\n          aria-hidden={hasMany ? 'true' : undefined}\n          aria-label={title}\n          aria-pressed={hasMany ? undefined : isSelected}\n          className={`${baseClass}__select`}\n          disabled={isDisabled}\n          onClick={hasMany ? handleExpand : handleSelect}\n          ref={rowActionRef}\n          tabIndex={hasMany ? -1 : undefined}\n          type=\"button\"\n        />\n      )}\n\n      {hasMany && (\n        <div className={`${baseClass}__checkbox`}>\n          <CheckboxInput\n            aria-label={title}\n            checked={isSelected}\n            inputRef={checkboxRef}\n            onToggle={handleSelect}\n            readOnly={isDisabled}\n          />\n        </div>\n      )}\n\n      <span className={`${baseClass}__title`} title={title}>\n        {title}\n      </span>\n\n      {((hasMany && selectedDescendantCount > 0) || hasChildren) && (\n        <div className={`${baseClass}__trail`}>\n          {hasMany && selectedDescendantCount > 0 && (\n            <span className={`${baseClass}__descendant-count`}>{selectedDescendantCount}</span>\n          )}\n\n          {hasChildren && (\n            <button\n              aria-expanded={isExpanded}\n              // TODO: replace with a translation key once the hierarchy strings are finalized\n              aria-label={`Open ${title}`}\n              className={`${baseClass}__chevron`}\n              disabled={isDisabled}\n              onClick={handleExpand}\n              type=\"button\"\n            >\n              <ChevronIcon direction=\"right\" size={16} />\n            </button>\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useId","useMemo","CheckboxInput","ChevronIcon","isSuperset","baseClass","ColumnItem","t0","$","disabled","filterByCollection","hasSelectedDescendants","isExpanded","isSelected","item","onExpand","onSelect","id","allowedCollections","hasChildren","title","titleId","t1","bb0","undefined","t2","isDisabled","e","stopPropagation","handleCheckboxToggle","t3","e_0","target","closest","handleRowClick","t4","e_1","key","preventDefault","handleKeyDown","t5","t6","t7","t8","t9","t10","filter","Boolean","t11","join","t12","t13","t14","t15","_jsxs","className","onClick","onKeyDown","role","tabIndex","children","_jsx","checked","onToggle","readOnly","variant","direction"],"sources":["../../../../../src/elements/Hierarchy/ColumnBrowser/ColumnItem/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useId, useMemo } from 'react'\n\nimport type { ColumnItemProps } from '../types.js'\n\nimport { CheckboxInput } from '../../../../fields/Checkbox/Input.js'\nimport { ChevronIcon } from '../../../../icons/Chevron/index.js'\nimport { isSuperset } from '../../../../utilities/isSuperset.js'\nimport './index.css'\n\nconst baseClass = 'hierarchy-column-item'\n\nexport const ColumnItem: React.FC<ColumnItemProps> = ({\n  disabled,\n  filterByCollection,\n  hasSelectedDescendants,\n  isExpanded,\n  isSelected,\n  item,\n  onExpand,\n  onSelect,\n}) => {\n  const { id, allowedCollections, hasChildren, title } = item\n  const titleId = useId()\n\n  // Disable selection if:\n  // 1. This item is in the disabledIds set (e.g., being moved)\n  // 2. Folder doesn't allow ALL required collections\n  const isDisabled = useMemo(() => {\n    if (disabled) {\n      return true\n    }\n    if (filterByCollection === undefined) {\n      return false\n    }\n    return !isSuperset(allowedCollections, filterByCollection)\n  }, [allowedCollections, disabled, filterByCollection])\n\n  const handleCheckboxToggle = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      e.stopPropagation()\n      if (isDisabled) {\n        return\n      }\n      onSelect({ id })\n    },\n    [id, isDisabled, onSelect],\n  )\n\n  const handleRowClick = useCallback(\n    (e: React.MouseEvent) => {\n      // Don't expand when clicking the checkbox\n      if ((e.target as HTMLElement).closest(`.${baseClass}__checkbox`)) {\n        return\n      }\n      if (hasChildren) {\n        onExpand({ id })\n      }\n    },\n    [hasChildren, id, onExpand],\n  )\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        if (hasChildren) {\n          onExpand({ id })\n        }\n      }\n    },\n    [hasChildren, id, onExpand],\n  )\n\n  return (\n    <div\n      aria-current={isSelected ? 'location' : undefined}\n      aria-disabled={isDisabled || undefined}\n      className={[\n        baseClass,\n        isExpanded && `${baseClass}--expanded`,\n        isSelected && `${baseClass}--selected`,\n        isDisabled && `${baseClass}--disabled`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onClick={isDisabled ? undefined : handleRowClick}\n      onKeyDown={isDisabled ? undefined : handleKeyDown}\n      role=\"button\"\n      tabIndex={isDisabled ? -1 : 0}\n    >\n      <div className={`${baseClass}__checkbox`}>\n        <CheckboxInput\n          aria-labelledby={titleId}\n          checked={isSelected}\n          onToggle={handleCheckboxToggle}\n          readOnly={isDisabled}\n          variant=\"muted\"\n        />\n      </div>\n\n      <span className={`${baseClass}__title`} id={titleId} title={title}>\n        {title}\n      </span>\n\n      {hasSelectedDescendants && !isSelected && (\n        <span className={`${baseClass}__descendant-indicator`} />\n      )}\n\n      {hasChildren && (\n        <span className={`${baseClass}__chevron`}>\n          <ChevronIcon direction=\"right\" />\n        </span>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { HierarchyColumnBrowserProps, HierarchyColumnBrowserRef } from './types.js';
 import './index.css';
-export declare const HierarchyColumnBrowser: ({ baseFilter, disabledIds, filterByCollection, hasMany, hierarchyCollectionSlug, initialExpandedPath, isLoadingPath, onCreateNew, onSelect, parentFieldName, ref, selectedDescendantCounts, selectedIds, useAsTitle, }: {
+export declare const HierarchyColumnBrowser: ({ ancestorsWithSelections, baseFilter, disabledIds, filterByCollection, hierarchyCollectionSlug, initialExpandedPath, isLoadingPath, onCreateNew, onSelect, parentFieldName, ref, selectedIds, useAsTitle, }: {
     ref?: React.RefObject<HierarchyColumnBrowserRef | null>;
 } & HierarchyColumnBrowserProps) => React.JSX.Element;
 export type { ColumnItemData, HierarchyColumnBrowserProps, HierarchyColumnBrowserRef, PathSegment, } from './types.js';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/ColumnBrowser/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAwE,MAAM,OAAO,CAAA;AAE5F,OAAO,KAAK,EAGV,2BAA2B,EAC3B,yBAAyB,EAE1B,MAAM,YAAY,CAAA;AASnB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,sBAAsB,2NAehC;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,yBAAyB,GAAG,IAAI,CAAC,CAAA;CAAE,GAAG,2BAA2B,sBAihB3F,CAAA;AAED,YAAY,EACV,cAAc,EACd,2BAA2B,EAC3B,yBAAyB,EACzB,WAAW,GACZ,MAAM,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/ColumnBrowser/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAwE,MAAM,OAAO,CAAA;AAE5F,OAAO,KAAK,EAGV,2BAA2B,EAC3B,yBAAyB,EAC1B,MAAM,YAAY,CAAA;AAQnB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,sBAAsB,iNAchC;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,yBAAyB,GAAG,IAAI,CAAC,CAAA;CAAE,GAAG,2BAA2B,sBA8a3F,CAAA;AAED,YAAY,EACV,cAAc,EACd,2BAA2B,EAC3B,yBAAyB,EACzB,WAAW,GACZ,MAAM,YAAY,CAAA"}