@mshuja288/aksuicore 0.4.0 → 0.4.1

package/src/patterns/RecordWorkspace.tsx

@@ -21,6 +21,25 @@ function useIsClient() {
   );
 }
 
+/** Hover tooltips only on fine pointers (desktop). Touch / narrow layouts never get them. */
+function useHoverTooltipsEnabled() {
+  return useSyncExternalStore(
+    (onStoreChange) => {
+      if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+        return () => {};
+      }
+      const media = window.matchMedia("(hover: hover) and (pointer: fine)");
+      media.addEventListener("change", onStoreChange);
+      return () => media.removeEventListener("change", onStoreChange);
+    },
+    () =>
+      typeof window !== "undefined" &&
+      typeof window.matchMedia === "function" &&
+      window.matchMedia("(hover: hover) and (pointer: fine)").matches,
+    () => false,
+  );
+}
+
 export type TableColumn<T> = {
   key: string;
   header: string;
@@ -195,6 +214,21 @@ function MoreIcon() {
   );
 }
 
+function ToolsIcon() {
+  return (
+    <svg viewBox="0 0 20 20" aria-hidden="true">
+      <path
+        d="M11.5 3.5h5v5M16.2 3.8 10 10M8.2 5.2H3.8v11h11V12"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
 function DetailList({ lines }: { lines: DetailLine[] }) {
   return (
     <dl className="record-detail-list">
@@ -278,6 +312,7 @@ export function RecordWorkspace<T>({
   const [filters, setFilters] = useState<Record<string, string>>({});
   const [sort, setSort] = useState<SortState | null>(null);
   const [sideOpen, setSideOpen] = useState(false);
+  const [toolsDrawerOpen, setToolsDrawerOpen] = useState(false);
   const [downloadOpen, setDownloadOpen] = useState(false);
   const [columnsOpen, setColumnsOpen] = useState(false);
   const [previewEnabled, setPreviewEnabled] = useState(false);
@@ -285,9 +320,15 @@ export function RecordWorkspace<T>({
   const [tooltip, setTooltip] = useState<TooltipState | null>(null);
   const [pageSize, setPageSize] = useState("15");
   const [page, setPage] = useState(1);
-  const [actionsMenuKey, setActionsMenuKey] = useState<string | number | null>(null);
+  const [actionsMenu, setActionsMenu] = useState<{
+    key: string | number;
+    item: T;
+    x: number;
+    y: number;
+  } | null>(null);
   const actionsMenuRef = useRef<HTMLDivElement | null>(null);
   const isClient = useIsClient();
+  const hoverTooltipsEnabled = useHoverTooltipsEnabled();
 
   useEffect(() => {
     if (isControlled) {
@@ -376,6 +417,7 @@ export function RecordWorkspace<T>({
   );
 
   const hiddenColumnCount = columns.length - visibleColumns.length;
+  const toolsBadgeCount = activeFilterCount + (hiddenColumnCount > 0 ? 1 : 0) + (previewEnabled ? 1 : 0);
   const showAll = pageSize === "all";
   const numericPageSize = showAll ? Math.max(sorted.length, 1) : Number(pageSize);
   const pageCount = showAll ? 1 : Math.max(1, Math.ceil(sorted.length / numericPageSize));
@@ -391,21 +433,42 @@ export function RecordWorkspace<T>({
     key: column.exportKey ?? column.key,
     header: column.header,
   }));
+  const canShowTooltip = hoverTooltipsEnabled && !previewEnabled && actionsMenu === null;
 
   useEffect(() => {
-    if (actionsMenuKey === null) {
+    if (actionsMenu === null) {
       return;
     }
 
     function onPointerDown(event: globalThis.MouseEvent) {
       if (actionsMenuRef.current && !actionsMenuRef.current.contains(event.target as Node)) {
-        setActionsMenuKey(null);
+        setActionsMenu(null);
       }
     }
 
     document.addEventListener("mousedown", onPointerDown);
     return () => document.removeEventListener("mousedown", onPointerDown);
-  }, [actionsMenuKey]);
+  }, [actionsMenu]);
+
+  useEffect(() => {
+    if (!toolsDrawerOpen) {
+      return;
+    }
+
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        setToolsDrawerOpen(false);
+      }
+    }
+
+    document.addEventListener("keydown", onKeyDown);
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [toolsDrawerOpen]);
 
   function requestDownload(format: ExportDownloadFormat) {
     if (!onDownload || downloadBusy) {
@@ -470,6 +533,9 @@ export function RecordWorkspace<T>({
   }
 
   function showTooltip(item: T, event: MouseEvent) {
+    if (!canShowTooltip) {
+      return;
+    }
     const padding = 16;
     const width = 280;
     const x = Math.min(event.clientX + 14, window.innerWidth - width - padding);
@@ -477,6 +543,22 @@ export function RecordWorkspace<T>({
     setTooltip({ x, y, lines: detailLines(item) });
   }
 
+  function openRowActions(item: T, event: MouseEvent<HTMLButtonElement>) {
+    event.stopPropagation();
+    setTooltip(null);
+    const key = rowKey(item);
+    if (actionsMenu?.key === key) {
+      setActionsMenu(null);
+      return;
+    }
+    const rect = event.currentTarget.getBoundingClientRect();
+    const menuWidth = 168;
+    const menuHeight = 148;
+    const x = Math.min(Math.max(8, rect.right - menuWidth), window.innerWidth - menuWidth - 8);
+    const y = Math.min(rect.bottom + 6, window.innerHeight - menuHeight - 8);
+    setActionsMenu({ key, item, x, y });
+  }
+
   const summary =
     sorted.length === 0
       ? "0 records"
@@ -484,6 +566,225 @@ export function RecordWorkspace<T>({
         ? `1–${sorted.length} of ${sorted.length}`
         : `${start + 1}–${Math.min(start + numericPageSize, sorted.length)} of ${sorted.length}`;
 
+  function renderToolsBody({ compactIcons }: { compactIcons: boolean }) {
+    if (compactIcons) {
+      return (
+        <div className="side-rail-icons">
+          <label className="side-rail-icon preview-check-icon" title="Preview">
+            <input
+              type="checkbox"
+              checked={previewEnabled}
+              onChange={(event) => setPreviewEnabledValue(event.target.checked)}
+              aria-label="Preview"
+            />
+            <PreviewIcon />
+          </label>
+          {showAdd ? (
+            <button type="button" className="ghost side-rail-icon" title={addLabel} aria-label={addLabel} onClick={onAdd}>
+              <PlusIcon />
+            </button>
+          ) : null}
+          {showColumns ? (
+            <button
+              type="button"
+              className="ghost side-rail-icon"
+              title="Columns"
+              aria-label="Columns"
+              onClick={() => {
+                setSideOpen(true);
+                setColumnsOpen(true);
+              }}
+            >
+              <ColumnsIcon />
+              {hiddenColumnCount > 0 ? <span className="filter-badge">{hiddenColumnCount}</span> : null}
+            </button>
+          ) : null}
+          {showDownload ? (
+            <button
+              type="button"
+              className="ghost side-rail-icon"
+              title="Download"
+              aria-label="Download"
+              disabled={downloadBusy}
+              onClick={() => {
+                setSideOpen(true);
+                setDownloadOpen(true);
+              }}
+            >
+              <DownloadIcon />
+            </button>
+          ) : null}
+          {showFilters ? (
+            <button
+              type="button"
+              className="ghost side-rail-icon"
+              title="Show filters"
+              aria-label="Show filters"
+              onClick={() => setSideOpen(true)}
+            >
+              <FilterIcon />
+              {activeFilterCount > 0 ? <span className="filter-badge">{activeFilterCount}</span> : null}
+            </button>
+          ) : null}
+          {showFilters ? (
+            <button
+              type="button"
+              className="ghost side-rail-icon"
+              title="Reset filters"
+              aria-label="Reset filters"
+              disabled={activeFilterCount === 0}
+              onClick={clearFilters}
+            >
+              <ResetIcon />
+            </button>
+          ) : null}
+        </div>
+      );
+    }
+
+    return (
+      <div className="side-rail-body">
+        <div className="preview-check">
+          <input
+            type="checkbox"
+            checked={previewEnabled}
+            onChange={(event) => setPreviewEnabledValue(event.target.checked)}
+            aria-label="Preview"
+          />
+          <PreviewIcon />
+          <span aria-hidden="true">Preview</span>
+        </div>
+
+        {showAdd ? (
+          <button
+            type="button"
+            className="side-rail-add"
+            onClick={() => {
+              setToolsDrawerOpen(false);
+              onAdd?.();
+            }}
+          >
+            <PlusIcon />
+            <span>{addLabel}</span>
+          </button>
+        ) : null}
+
+        {showColumns ? (
+          <div className="side-rail-columns">
+            <button
+              type="button"
+              className="ghost side-rail-columns-toggle"
+              aria-expanded={columnsOpen}
+              onClick={() => setColumnsOpen((open) => !open)}
+            >
+              <ColumnsIcon />
+              <span>Columns{hiddenColumnCount > 0 ? ` (${visibleColumns.length}/${columns.length})` : ""}</span>
+            </button>
+            {columnsOpen ? (
+              <div className="side-rail-columns-panel" role="group" aria-label="Visible columns">
+                <div className="side-rail-columns-actions">
+                  <button type="button" className="ghost" onClick={selectAllColumns}>
+                    Select all
+                  </button>
+                  <button type="button" className="ghost" onClick={resetColumns}>
+                    Reset
+                  </button>
+                </div>
+                <div className="side-rail-columns-list">
+                  {columns.map((column) => {
+                    const checked = resolvedVisibleKeys.includes(column.key);
+                    const disableUncheck = checked && resolvedVisibleKeys.length <= 1;
+                    return (
+                      <label key={column.key} className="side-rail-column-option">
+                        <input
+                          type="checkbox"
+                          checked={checked}
+                          disabled={disableUncheck}
+                          onChange={(event) => toggleColumnVisible(column.key, event.target.checked)}
+                        />
+                        <span>{column.header}</span>
+                      </label>
+                    );
+                  })}
+                </div>
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+
+        {showDownload ? (
+          <div className="side-rail-download">
+            <button
+              type="button"
+              className="ghost side-rail-download-toggle"
+              aria-expanded={downloadOpen}
+              disabled={downloadBusy}
+              onClick={() => setDownloadOpen((open) => !open)}
+            >
+              <DownloadIcon />
+              <span>{downloadBusy ? "Downloading…" : "Download"}</span>
+            </button>
+            {downloadOpen ? (
+              <div className="side-rail-download-formats" role="group" aria-label="Download format">
+                {EXPORT_FORMAT_OPTIONS.map((option) => (
+                  <button
+                    key={option.format}
+                    type="button"
+                    className="ghost side-rail-download-format"
+                    disabled={downloadBusy}
+                    onClick={() => requestDownload(option.format)}
+                  >
+                    {option.label}
+                  </button>
+                ))}
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+
+        {showFilters ? (
+          <div className="side-rail-filters">
+            <div className="filter-panel-head">
+              <h3>Filters</h3>
+              <button
+                type="button"
+                className="ghost filter-clear"
+                title="Reset filters"
+                aria-label="Reset filters"
+                disabled={activeFilterCount === 0}
+                onClick={clearFilters}
+              >
+                <ResetIcon />
+                <span>Reset</span>
+              </button>
+            </div>
+            <div className="filter-panel-stack">
+              {filterableColumns.map((column) => (
+                <label key={column.key}>
+                  {column.header}
+                  {column.filterOptions ? (
+                    <Select
+                      value={filters[column.key] ?? ""}
+                      options={[{ value: "", label: column.filterPlaceholder ?? "All" }, ...column.filterOptions]}
+                      onChange={(value) => changeFilter(column.key, value)}
+                      placeholder={column.filterPlaceholder ?? "All"}
+                    />
+                  ) : (
+                    <input
+                      value={filters[column.key] ?? ""}
+                      onChange={(event) => changeFilter(column.key, event.target.value)}
+                      placeholder={`Filter ${column.header.toLowerCase()}`}
+                    />
+                  )}
+                </label>
+              ))}
+            </div>
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+
   function renderRowActions(item: T) {
     const key = rowKey(item);
     const updateAllowed = canUpdate ? canUpdate(item) : Boolean(onUpdate);
@@ -525,69 +826,60 @@ export function RecordWorkspace<T>({
           ) : null}
         </div>
 
-        <div className="row-actions row-actions-mobile" ref={actionsMenuKey === key ? actionsMenuRef : undefined}>
+        <div className="row-actions row-actions-mobile">
           <button
             type="button"
-            className="ghost row-action-menu-trigger"
+            className={actionsMenu?.key === key ? "ghost row-action-menu-trigger open" : "ghost row-action-menu-trigger"}
             aria-haspopup="menu"
-            aria-expanded={actionsMenuKey === key}
+            aria-expanded={actionsMenu?.key === key}
             aria-label="Row actions"
-            onClick={() => setActionsMenuKey((current) => (current === key ? null : key))}
+            onClick={(event) => openRowActions(item, event)}
           >
             <MoreIcon />
           </button>
-          {actionsMenuKey === key ? (
-            <div className="row-action-menu" role="menu">
-              {onView ? (
-                <button
-                  type="button"
-                  role="menuitem"
-                  className="ghost"
-                  onClick={() => {
-                    setActionsMenuKey(null);
-                    onView(item);
-                  }}
-                >
-                  View
-                </button>
-              ) : null}
-              {onUpdate ? (
-                <button
-                  type="button"
-                  role="menuitem"
-                  className="ghost"
-                  disabled={!updateAllowed}
-                  onClick={() => {
-                    setActionsMenuKey(null);
-                    onUpdate(item);
-                  }}
-                >
-                  Update
-                </button>
-              ) : null}
-              {onDelete ? (
-                <button
-                  type="button"
-                  role="menuitem"
-                  className="ghost danger"
-                  disabled={!deleteAllowed}
-                  onClick={() => {
-                    setActionsMenuKey(null);
-                    onDelete(item);
-                  }}
-                >
-                  Delete
-                </button>
-              ) : null}
-            </div>
-          ) : null}
         </div>
       </>
     );
   }
 
+  const actionsMenuItem = actionsMenu?.item;
+  const actionsUpdateAllowed = actionsMenuItem
+    ? canUpdate
+      ? canUpdate(actionsMenuItem)
+      : Boolean(onUpdate)
+    : false;
+  const actionsDeleteAllowed = actionsMenuItem
+    ? canDelete
+      ? canDelete(actionsMenuItem)
+      : Boolean(onDelete)
+    : false;
+
   return (
-    <div className="list-workspace" aria-label={title}>
+    <div className={toolsDrawerOpen ? "list-workspace tools-drawer-open" : "list-workspace"} aria-label={title}>
+      <div className="tools-mobile-bar">
+        <div className="tools-mobile-bar-start">
+          {showAdd ? (
+            <button type="button" className="tools-mobile-add" onClick={onAdd}>
+              <PlusIcon />
+              <span>{addLabel}</span>
+            </button>
+          ) : (
+            <p className="tools-mobile-title">{title}</p>
+          )}
+        </div>
+        <button
+          type="button"
+          className="ghost tools-mobile-toggle"
+          aria-expanded={toolsDrawerOpen}
+          aria-controls="aksui-tools-drawer"
+          onClick={() => setToolsDrawerOpen(true)}
+        >
+          <ToolsIcon />
+          <span>Tools</span>
+          {toolsBadgeCount > 0 ? <span className="filter-badge">{toolsBadgeCount}</span> : null}
+        </button>
+      </div>
+
       <div
         className={["list-body", sideOpen ? "side-open" : "", previewEnabled ? "preview-open" : ""]
           .filter(Boolean)
@@ -651,16 +943,10 @@ export function RecordWorkspace<T>({
                           key={key}
                           className={selected ? "data-row selected" : "data-row"}
                           onMouseEnter={(event) => {
-                            if (!previewEnabled) {
-                              showTooltip(item, event);
-                            }
+                            showTooltip(item, event);
                             focusRecord(item);
                           }}
-                          onMouseMove={(event) => {
-                            if (!previewEnabled) {
-                              showTooltip(item, event);
-                            }
-                          }}
+                          onMouseMove={(event) => showTooltip(item, event)}
                           onMouseLeave={() => setTooltip(null)}
                           onClick={() => focusRecord(item)}
                         >
@@ -704,7 +990,7 @@ export function RecordWorkspace<T>({
               {previewItem ? (
                 <DetailList lines={detailLines(previewItem)} />
               ) : (
-                <p className="preview-empty">Hover or click a row to preview its details here.</p>
+                <p className="preview-empty">Select a row to preview its details here.</p>
               )}
             </div>
           </aside>
@@ -721,219 +1007,99 @@ export function RecordWorkspace<T>({
             <ChevronIcon open={sideOpen} />
             {sideOpen ? <span>Collapse</span> : null}
           </button>
+          {sideOpen ? renderToolsBody({ compactIcons: false }) : renderToolsBody({ compactIcons: true })}
+        </aside>
+      </div>
 
-          {sideOpen ? (
-            <div className="side-rail-body">
-              <div className="preview-check">
-                <input
-                  type="checkbox"
-                  checked={previewEnabled}
-                  onChange={(event) => setPreviewEnabledValue(event.target.checked)}
-                  aria-label="Preview"
-                />
-                <PreviewIcon />
-                <span aria-hidden="true">Preview</span>
-              </div>
-
-              {showAdd ? (
-                <button type="button" className="side-rail-add" onClick={onAdd}>
-                  <PlusIcon />
-                  <span>{addLabel}</span>
-                </button>
-              ) : null}
-
-              {showColumns ? (
-                <div className="side-rail-columns">
-                  <button
-                    type="button"
-                    className="ghost side-rail-columns-toggle"
-                    aria-expanded={columnsOpen}
-                    onClick={() => setColumnsOpen((open) => !open)}
-                  >
-                    <ColumnsIcon />
-                    <span>Columns{hiddenColumnCount > 0 ? ` (${visibleColumns.length}/${columns.length})` : ""}</span>
+      {isClient
+        ? createPortal(
+            <>
+              <button
+                type="button"
+                className={toolsDrawerOpen ? "tools-drawer-backdrop open" : "tools-drawer-backdrop"}
+                aria-label="Close tools"
+                tabIndex={toolsDrawerOpen ? 0 : -1}
+                onClick={() => setToolsDrawerOpen(false)}
+              />
+              <aside
+                id="aksui-tools-drawer"
+                className={toolsDrawerOpen ? "tools-drawer open" : "tools-drawer"}
+                aria-label="Workspace tools"
+                aria-hidden={!toolsDrawerOpen}
+              >
+                <div className="tools-drawer-head">
+                  <div>
+                    <p className="tools-drawer-kicker">Workspace</p>
+                    <h3>Tools</h3>
+                  </div>
+                  <button type="button" className="ghost tools-drawer-close" onClick={() => setToolsDrawerOpen(false)}>
+                    Close
                   </button>
-                  {columnsOpen ? (
-                    <div className="side-rail-columns-panel" role="group" aria-label="Visible columns">
-                      <div className="side-rail-columns-actions">
-                        <button type="button" className="ghost" onClick={selectAllColumns}>
-                          Select all
-                        </button>
-                        <button type="button" className="ghost" onClick={resetColumns}>
-                          Reset
-                        </button>
-                      </div>
-                      <div className="side-rail-columns-list">
-                        {columns.map((column) => {
-                          const checked = resolvedVisibleKeys.includes(column.key);
-                          const disableUncheck = checked && resolvedVisibleKeys.length <= 1;
-                          return (
-                            <label key={column.key} className="side-rail-column-option">
-                              <input
-                                type="checkbox"
-                                checked={checked}
-                                disabled={disableUncheck}
-                                onChange={(event) => toggleColumnVisible(column.key, event.target.checked)}
-                              />
-                              <span>{column.header}</span>
-                            </label>
-                          );
-                        })}
-                      </div>
-                    </div>
-                  ) : null}
                 </div>
-              ) : null}
+                <div className="tools-drawer-body">{renderToolsBody({ compactIcons: false })}</div>
+              </aside>
+            </>,
+            document.body,
+          )
+        : null}
 
-              {showDownload ? (
-                <div className="side-rail-download">
-                  <button
-                    type="button"
-                    className="ghost side-rail-download-toggle"
-                    aria-expanded={downloadOpen}
-                    disabled={downloadBusy}
-                    onClick={() => setDownloadOpen((open) => !open)}
-                  >
-                    <DownloadIcon />
-                    <span>{downloadBusy ? "Downloading…" : "Download"}</span>
-                  </button>
-                  {downloadOpen ? (
-                    <div className="side-rail-download-formats" role="group" aria-label="Download format">
-                      {EXPORT_FORMAT_OPTIONS.map((option) => (
-                        <button
-                          key={option.format}
-                          type="button"
-                          className="ghost side-rail-download-format"
-                          disabled={downloadBusy}
-                          onClick={() => requestDownload(option.format)}
-                        >
-                          {option.label}
-                        </button>
-                      ))}
-                    </div>
-                  ) : null}
-                </div>
-              ) : null}
+      {form}
 
-              {showFilters ? (
-                <div className="side-rail-filters">
-                  <div className="filter-panel-head">
-                    <h3>Filters</h3>
-                    <button
-                      type="button"
-                      className="ghost filter-clear"
-                      title="Reset filters"
-                      aria-label="Reset filters"
-                      disabled={activeFilterCount === 0}
-                      onClick={clearFilters}
-                    >
-                      <ResetIcon />
-                      <span>Reset</span>
-                    </button>
-                  </div>
-                  <div className="filter-panel-stack">
-                    {filterableColumns.map((column) => (
-                      <label key={column.key}>
-                        {column.header}
-                        {column.filterOptions ? (
-                          <Select
-                            value={filters[column.key] ?? ""}
-                            options={[{ value: "", label: column.filterPlaceholder ?? "All" }, ...column.filterOptions]}
-                            onChange={(value) => changeFilter(column.key, value)}
-                            placeholder={column.filterPlaceholder ?? "All"}
-                          />
-                        ) : (
-                          <input
-                            value={filters[column.key] ?? ""}
-                            onChange={(event) => changeFilter(column.key, event.target.value)}
-                            placeholder={`Filter ${column.header.toLowerCase()}`}
-                          />
-                        )}
-                      </label>
-                    ))}
-                  </div>
-                </div>
-              ) : null}
-            </div>
-          ) : (
-            <div className="side-rail-icons">
-              <label className="side-rail-icon preview-check-icon" title="Preview">
-                <input
-                  type="checkbox"
-                  checked={previewEnabled}
-                  onChange={(event) => setPreviewEnabledValue(event.target.checked)}
-                  aria-label="Preview"
-                />
-                <PreviewIcon />
-              </label>
-              {showAdd ? (
-                <button type="button" className="ghost side-rail-icon" title={addLabel} aria-label={addLabel} onClick={onAdd}>
-                  <PlusIcon />
-                </button>
-              ) : null}
-              {showColumns ? (
+      {isClient && actionsMenu && actionsMenuItem
+        ? createPortal(
+            <div
+              ref={actionsMenuRef}
+              className="row-action-menu row-action-menu-portal"
+              role="menu"
+              style={{ left: actionsMenu.x, top: actionsMenu.y }}
+            >
+              {onView ? (
                 <button
                   type="button"
-                  className="ghost side-rail-icon"
-                  title="Columns"
-                  aria-label="Columns"
+                  role="menuitem"
+                  className="ghost"
                   onClick={() => {
-                    setSideOpen(true);
-                    setColumnsOpen(true);
+                    setActionsMenu(null);
+                    onView(actionsMenuItem);
                   }}
                 >
-                  <ColumnsIcon />
-                  {hiddenColumnCount > 0 ? <span className="filter-badge">{hiddenColumnCount}</span> : null}
+                  View
                 </button>
               ) : null}
-              {showDownload ? (
+              {onUpdate ? (
                 <button
                   type="button"
-                  className="ghost side-rail-icon"
-                  title="Download"
-                  aria-label="Download"
-                  aria-expanded={downloadOpen}
-                  disabled={downloadBusy}
+                  role="menuitem"
+                  className="ghost"
+                  disabled={!actionsUpdateAllowed}
                   onClick={() => {
-                    setSideOpen(true);
-                    setDownloadOpen(true);
+                    setActionsMenu(null);
+                    onUpdate(actionsMenuItem);
                   }}
                 >
-                  <DownloadIcon />
-                </button>
-              ) : null}
-              {showFilters ? (
-                <button
-                  type="button"
-                  className="ghost side-rail-icon"
-                  title="Show filters"
-                  aria-label="Show filters"
-                  onClick={() => setSideOpen(true)}
-                >
-                  <FilterIcon />
-                  {activeFilterCount > 0 ? <span className="filter-badge">{activeFilterCount}</span> : null}
+                  Update
                 </button>
               ) : null}
-              {showFilters ? (
+              {onDelete ? (
                 <button
                   type="button"
-                  className="ghost side-rail-icon"
-                  title="Reset filters"
-                  aria-label="Reset filters"
-                  disabled={activeFilterCount === 0}
-                  onClick={clearFilters}
+                  role="menuitem"
+                  className="ghost danger"
+                  disabled={!actionsDeleteAllowed}
+                  onClick={() => {
+                    setActionsMenu(null);
+                    onDelete(actionsMenuItem);
+                  }}
                 >
-                  <ResetIcon />
+                  Delete
                 </button>
               ) : null}
-            </div>
-          )}
-        </aside>
-      </div>
-
-      {form}
+            </div>,
+            document.body,
+          )
+        : null}
 
-      {isClient && tooltip && !previewEnabled
+      {isClient && tooltip && canShowTooltip
         ? createPortal(
             <div className="record-tooltip" style={{ left: tooltip.x, top: tooltip.y }} role="tooltip">
               <p className="record-tooltip-title">{title}</p>