@k2b/ui 0.38.1 → 0.40.0

package/dist/ssr/layout/app-workspace-controller.js

@@ -66,6 +66,8 @@ const sidebarHideable = root => sidebarElement(root)?.dataset.workspaceHideable
  * stays application state, so the controller only requests the change.
  */
 export const APP_WORKSPACE_SIDEBAR_HIDE_EVENT = "k2b-app-workspace-sidebar-hide";
+/** Asks the owning `AppWorkspace.Sidebar` to show again; its `onHiddenChange` decides. */
+export const APP_WORKSPACE_SIDEBAR_SHOW_EVENT = "k2b-app-workspace-sidebar-show";
 /** Asks the owning Detail to reopen its current available object. */
 export const APP_WORKSPACE_DETAIL_OPEN_EVENT = "k2b-app-workspace-detail-open";
 /** Asks the owning `AppWorkspace.Detail` to close; its `onClose` decides. */
@@ -303,6 +305,12 @@ const overlayTarget = toggle => {
   };
 };
 const overlayRegions = (root, sidebar) => Array.from(root.children).flatMap(child => child instanceof HTMLElement && (child.localName === "solid-island" || child.localName === "solid-client") ? Array.from(child.children) : [child]).filter(child => child instanceof HTMLElement && child !== sidebar && !child.contains(sidebar));
+
+/**
+ * A sidebar button tells whether its sidebar shows: as an open overlay where the sidebar is one, otherwise as a
+ * column that is not hidden.
+ */
+const sidebarShown = (root, sidebar) => sidebarForm(root) === "overlay" ? root.dataset.sidebarOverlay === "open" : !sidebar.hidden;
 export const installAppWorkspaceController = (options = {}) => {
   const eventRoot = options.root ?? document;
   // A document has no owner document; an element root listens on its own.
@@ -311,6 +319,17 @@ export const installAppWorkspaceController = (options = {}) => {
   let overlay = null;
   // A server-rendered head names the sidebar before the sidebar renders; the button learns its real id now.
   for (const toggle of eventRoot.querySelectorAll(TOGGLE_SELECTOR)) overlayTarget(toggle);
+  /** Every sidebar button, the workspace head's and an application's own, states whether its sidebar shows. */
+  const syncSidebarToggles = () => {
+    for (const toggle of eventRoot.querySelectorAll(TOGGLE_SELECTOR)) {
+      const root = workspaceRoot(toggle);
+      const sidebar = root ? sidebarElement(root) : null;
+      if (!root || !sidebar) continue;
+      // The head's button only opens the overlay; an application's button also shows and hides the column.
+      const expanded = String(toggle.closest(".k2b-app-workspace__head") ? root.dataset.sidebarOverlay === "open" : sidebarShown(root, sidebar));
+      if (toggle.getAttribute("aria-expanded") !== expanded) toggle.setAttribute("aria-expanded", expanded);
+    }
+  };
   const openOverlay = target => {
     if (overlay) closeOverlay("none");
     const inerted = overlayRegions(target.root, target.sidebar).filter(region => !region.hasAttribute("inert"));
@@ -320,6 +339,7 @@ export const installAppWorkspaceController = (options = {}) => {
     };
     target.root.dataset.sidebarOverlay = "open";
     target.toggle.setAttribute("aria-expanded", "true");
+    syncSidebarToggles();
     inerted.forEach(region => region.setAttribute("inert", ""));
     // Focus starts on the current destination, so the reader knows where they
     // are: on its own tab stop, or on the tree item around it.
@@ -342,6 +362,8 @@ export const installAppWorkspaceController = (options = {}) => {
     overlay = null;
     delete closing.root.dataset.sidebarOverlay;
     closing.toggle.setAttribute("aria-expanded", "false");
+    // Escape, the scrim or a chosen destination also close it: every sidebar button of the workspace says so.
+    syncSidebarToggles();
     closing.inerted.forEach(region => region.removeAttribute("inert"));
     if (focus === "none") return;
     const active = document.activeElement;
@@ -377,10 +399,27 @@ export const installAppWorkspaceController = (options = {}) => {
     }
     const toggle = target?.closest(TOGGLE_SELECTOR);
     if (toggle) {
+      if (claimedToggleClicks.has(event)) return;
+      const root = workspaceRoot(toggle);
+      const sidebar = root ? sidebarElement(root) : null;
+      // A sidebar the person hid comes back first; where it is an overlay, it then opens.
+      if (root && sidebar?.hidden && sidebarHideable(root)) {
+        claimedToggleClicks.add(event);
+        sidebar.dispatchEvent(new CustomEvent(APP_WORKSPACE_SIDEBAR_SHOW_EVENT));
+        ownerWindow.requestAnimationFrame(() => {
+          const next = !sidebar.hidden && sidebarForm(root) === "overlay" ? overlayTarget(toggle) : null;
+          if (next) openOverlay(next);
+          syncSidebarToggles();
+        });
+        return;
+      }
       const next = overlayTarget(toggle);
-      if (!next || claimedToggleClicks.has(event)) return;
+      if (!next) return;
       claimedToggleClicks.add(event);
       if (overlay?.sidebar === next.sidebar) closeOverlay("button");else if (sidebarForm(next.root) === "overlay") openOverlay(next);
+      // A column: an application's own button hides a sidebar it lets people hide.
+      else if (sidebarHideable(next.root)) next.sidebar.dispatchEvent(new CustomEvent(APP_WORKSPACE_SIDEBAR_HIDE_EVENT));
+      syncSidebarToggles();
       return;
     }
     if (!overlay || !target) return;
@@ -466,7 +505,8 @@ export const installAppWorkspaceController = (options = {}) => {
     for (const root of allRoots()) {
       for (const aside of rootElements(root, detailSelector)) {
         const toggle = detailToggle(aside);
-        if (toggle?.dataset.workspaceDetailReopen !== "true") continue;
+        // The panel decides whether it reopens; its button may be the workspace's own or an application's.
+        if (!toggle || aside.dataset.workspaceDetailReopen !== "true") continue;
         const expanded = !aside.hidden && (!wide?.matches || !detailWaiting(aside) || detailDrawer(aside));
         const value = String(expanded);
         if (toggle.getAttribute("aria-expanded") !== value) toggle.setAttribute("aria-expanded", value);
@@ -581,7 +621,7 @@ export const installAppWorkspaceController = (options = {}) => {
       return;
     }
     const shared = detailToggle(aside);
-    if (shared?.dataset.workspaceDetailReopen === "true" && phone?.matches && phonePage(aside) && !aside.hidden && !aside.contains(control)) {
+    if (shared && aside.dataset.workspaceDetailReopen === "true" && phone?.matches && phonePage(aside) && !aside.hidden && !aside.contains(control)) {
       // WebKit can update matchMedia after resize has already focused the now
       // visible application control. Move into the page before Main becomes inert.
       detailControlFocus = null;
@@ -590,7 +630,7 @@ export const installAppWorkspaceController = (options = {}) => {
     }
     if (detailControlVisible(control)) return;
     detailControlFocus = null;
-    if (shared?.dataset.workspaceDetailReopen !== "true") {
+    if (!shared || aside.dataset.workspaceDetailReopen !== "true") {
       // Selection-only details keep their existing returning-column title target.
       if (control === shared && !aside.hidden && !detailWaiting(aside)) requestTitle(aside);
       return;
@@ -602,6 +642,7 @@ export const installAppWorkspaceController = (options = {}) => {
     });
   };
   const syncHostState = () => {
+    syncSidebarToggles();
     rescueDetailControlFocus();
     if (pendingDetail && !canOpenPendingDetail(pendingDetail.aside)) cancelPendingDetail();
     if (overlay && sidebarForm(overlay.root) !== "overlay") closeOverlay("none");
@@ -1055,7 +1096,7 @@ export const installAppWorkspaceController = (options = {}) => {
       const focused = ownerDocument.activeElement;
       const toggle = detailToggle(aside);
       const returnControl = detailReturnControl(aside);
-      if (toggle?.dataset.workspaceDetailReopen === "true" && returnControl && (aside.contains(focused) || focused === ownerDocument.body && aside.contains(lastFocus.get(root) ?? null))) {
+      if (toggle && aside.dataset.workspaceDetailReopen === "true" && returnControl && (aside.contains(focused) || focused === ownerDocument.body && aside.contains(lastFocus.get(root) ?? null))) {
         returnControl.focus({
           preventScroll: true
         });
@@ -1795,6 +1836,8 @@ export const installAppWorkspaceController = (options = {}) => {
   const layoutNode = node => node instanceof Element && (node.matches(LAYOUT_REGION_SELECTOR) || Boolean(node.querySelector(LAYOUT_REGION_SELECTOR)));
   const mutationObserver = typeof MutationObserver === "undefined" ? null : new MutationObserver(records => {
     if (records.some(record => record.type === "childList" || ["hidden", "aria-controls", "aria-expanded", "data-workspace-detail-drawer"].includes(record.attributeName ?? ""))) syncDetailRequestControls();
+    // A sidebar shown or hidden, or a sidebar button added: the buttons state it.
+    if (records.some(record => record.type === "attributes" && record.attributeName === "hidden" && record.target instanceof Element && record.target.matches(".k2b-app-workspace__sidebar") || [...record.addedNodes].some(node => node instanceof Element && (node.matches(TOGGLE_SELECTOR) || node.querySelector(TOGGLE_SELECTOR))))) syncSidebarToggles();
     syncPhonePages();
     if (pendingTitle && (pendingTitle.aside.hidden || !pendingTitle.aside.isConnected)) cancelTitle();
     if (pendingDetail && (!canOpenPendingDetail(pendingDetail.aside) || !pendingDetail.snapshot.chosen || !pendingDetail.snapshot.item.isConnected)) cancelPendingDetail();
@@ -1850,6 +1893,7 @@ export const installAppWorkspaceController = (options = {}) => {
   syncPhonePages();
   syncObservedRoots();
   syncDetailRequestControls();
+  syncSidebarToggles();
   mutationObserver?.observe(eventRoot, {
     attributes: true,
     attributeOldValue: true,