@k2b/ui 0.9.1 → 0.11.0

package/dist/browser/layout/AppWorkspace.js

@@ -21,7 +21,7 @@ var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspac
   _tmpl$3 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__main-primary data-workspace-main-region=main>`),
   _tmpl$4 = /*#__PURE__*/_$template(`<section>`),
   _tmpl$5 = /*#__PURE__*/_$template(`<aside>`),
-  _tmpl$6 = /*#__PURE__*/_$template(`<aside><div class=k2b-app-workspace__sidebar-desktop>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__sidebar-desktop>`),
   _tmpl$7 = /*#__PURE__*/_$template(`<script>`),
   _tmpl$8 = /*#__PURE__*/_$template(`<footer>`),
   _tmpl$9 = /*#__PURE__*/_$template(`<span aria-hidden=true><i>`),
@@ -57,7 +57,7 @@ var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspac
 import { Link } from "@k2b/ssr/nav";
 import { children, createContext, createMemo, createSignal, createUniqueId, For, mergeProps, onCleanup, onMount, Show, useContext } from "solid-js";
 import { useUiMessages } from "../intl/messages";
-import { installAppWorkspaceController } from "./app-workspace-controller";
+import { APP_WORKSPACE_SIDEBAR_HIDE_EVENT, installAppWorkspaceController } from "./app-workspace-controller";
 import { APP_WORKSPACE_DETAIL_DEFAULT, APP_WORKSPACE_DETAIL_MAX, APP_WORKSPACE_DETAIL_MIN, APP_WORKSPACE_DRAWER_DEFAULT, APP_WORKSPACE_DRAWER_MAX, APP_WORKSPACE_DRAWER_MIN, APP_WORKSPACE_PANE_DEFAULT, APP_WORKSPACE_PANE_MAX, APP_WORKSPACE_PANE_MIN, APP_WORKSPACE_SIDEBAR_COLLAPSED, APP_WORKSPACE_SIDEBAR_DEFAULT, APP_WORKSPACE_SIDEBAR_MAX, APP_WORKSPACE_SIDEBAR_MIN, appWorkspaceLayoutStyle, appWorkspacePanelVariable } from "./app-workspace-state";
 import { SidebarItemPreview } from "./SidebarItemPreview";
 import { createScrollFade } from "./scroll-fade";
@@ -512,44 +512,72 @@ function AppWorkspaceSidebar(props) {
   const minSize = () => props.minSize ?? (props.collapsible ? APP_WORKSPACE_SIDEBAR_COLLAPSED : APP_WORKSPACE_SIDEBAR_MIN);
   const maxSize = () => props.maxSize ?? APP_WORKSPACE_SIDEBAR_MAX;
   const generatedId = createUniqueId();
-  const domId = `k2b-workspace-sidebar-${generatedId}`;
-  const resolved = children(() => props.children);
+  const domId = () => props.id ?? `k2b-workspace-sidebar-${generatedId}`;
+  // Hidden navigation is not rendered at all, so its labels are neither shown
+  // nor reachable; reading the children lazily keeps them from being created.
+  const resolved = children(() => props.hidden ? undefined : props.children);
   const slots = createMemo(() => flatten(resolved()).filter(sidebarChildSlot));
   const desktop = createMemo(() => slots().find(slot => slot.kind === SIDEBAR_DESKTOP));
+  let aside;
+  onMount(() => {
+    const requestHide = () => props.onHiddenChange?.(true);
+    aside?.addEventListener(APP_WORKSPACE_SIDEBAR_HIDE_EVENT, requestHide);
+    onCleanup(() => aside?.removeEventListener(APP_WORKSPACE_SIDEBAR_HIDE_EVENT, requestHide));
+  });
   return [(() => {
-    var _el$7 = _$getNextElement(_tmpl$6),
-      _el$8 = _el$7.firstChild;
-    _$setAttribute(_el$7, "id", domId);
-    _$insert(_el$8, () => desktop()?.children);
+    var _el$7 = _$getNextElement(_tmpl$5);
+    var _ref$ = aside;
+    typeof _ref$ === "function" ? _$use(_ref$, _el$7) : aside = _el$7;
+    _$insert(_el$7, _$createComponent(Show, {
+      get when() {
+        return !props.hidden;
+      },
+      get children() {
+        var _el$8 = _$getNextElement(_tmpl$6);
+        _$insert(_el$8, () => desktop()?.children);
+        return _el$8;
+      }
+    }));
     _$effect(_p$ => {
-      var _v$39 = `k2b-app-workspace__sidebar ${props.class ?? ""}`,
-        _v$40 = props.label,
-        _v$41 = props.mobile === "stacked" ? "stacked" : undefined,
-        _v$42 = resizable() ? "true" : "false",
-        _v$43 = props.collapsible ? "true" : "false";
-      _v$39 !== _p$.e && _$className(_el$7, _p$.e = _v$39);
-      _v$40 !== _p$.t && _$setAttribute(_el$7, "aria-label", _p$.t = _v$40);
-      _v$41 !== _p$.a && _$setAttribute(_el$7, "data-mobile", _p$.a = _v$41);
-      _v$42 !== _p$.o && _$setAttribute(_el$7, "data-workspace-resizable", _p$.o = _v$42);
-      _v$43 !== _p$.i && _$setAttribute(_el$7, "data-workspace-collapsible", _p$.i = _v$43);
+      var _v$39 = domId(),
+        _v$40 = `k2b-app-workspace__sidebar ${props.class ?? ""}`,
+        _v$41 = props.label,
+        _v$42 = props.hidden || undefined,
+        _v$43 = props.mobile === "stacked" ? "stacked" : undefined,
+        _v$44 = resizable() ? "true" : "false",
+        _v$45 = props.collapsible ? "true" : "false",
+        _v$46 = props.onHiddenChange ? "true" : undefined;
+      _v$39 !== _p$.e && _$setAttribute(_el$7, "id", _p$.e = _v$39);
+      _v$40 !== _p$.t && _$className(_el$7, _p$.t = _v$40);
+      _v$41 !== _p$.a && _$setAttribute(_el$7, "aria-label", _p$.a = _v$41);
+      _v$42 !== _p$.o && _$setProperty(_el$7, "hidden", _p$.o = _v$42);
+      _v$43 !== _p$.i && _$setAttribute(_el$7, "data-mobile", _p$.i = _v$43);
+      _v$44 !== _p$.n && _$setAttribute(_el$7, "data-workspace-resizable", _p$.n = _v$44);
+      _v$45 !== _p$.s && _$setAttribute(_el$7, "data-workspace-collapsible", _p$.s = _v$45);
+      _v$46 !== _p$.h && _$setAttribute(_el$7, "data-workspace-hideable", _p$.h = _v$46);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined,
       o: undefined,
-      i: undefined
+      i: undefined,
+      n: undefined,
+      s: undefined,
+      h: undefined
     });
     return _el$7;
   })(), _$createComponent(Show, {
     get when() {
-      return resizable();
+      return _$memo(() => !!resizable())() && !props.hidden;
     },
     get children() {
       return _$createComponent(ResizeHandle, {
         kind: "sidebar",
         edge: "end",
-        controls: domId,
+        get controls() {
+          return domId();
+        },
         get defaultSize() {
           return defaultSize();
         },
@@ -586,8 +614,8 @@ const AppWorkspaceSidebarBody = props => {
   createScrollFade(() => body, () => props.scrollFade !== false);
   return [(() => {
     var _el$9 = _$getNextElement(_tmpl$2);
-    var _ref$ = body;
-    typeof _ref$ === "function" ? _$use(_ref$, _el$9) : body = _el$9;
+    var _ref$2 = body;
+    typeof _ref$2 === "function" ? _$use(_ref$2, _el$9) : body = _el$9;
     _$spread(_el$9, _$mergeProps({
       get ["class"]() {
         return `k2b-app-workspace__sidebar-body ${props.class ?? ""}`;
@@ -692,10 +720,10 @@ const AppWorkspaceSidebarSection = props => {
             _$setAttribute(_el$15, "aria-controls", id);
             _$insert(_el$15, title, _el$18, _co$);
             _$effect(_p$ => {
-              var _v$44 = open(),
-                _v$45 = open() ? "ti ti-chevron-down" : "ti ti-chevron-right";
-              _v$44 !== _p$.e && _$setAttribute(_el$15, "aria-expanded", _p$.e = _v$44);
-              _v$45 !== _p$.t && _$className(_el$16, _p$.t = _v$45);
+              var _v$47 = open(),
+                _v$48 = open() ? "ti ti-chevron-down" : "ti ti-chevron-right";
+              _v$47 !== _p$.e && _$setAttribute(_el$15, "aria-expanded", _p$.e = _v$47);
+              _v$48 !== _p$.t && _$className(_el$16, _p$.t = _v$48);
               return _p$;
             }, {
               e: undefined,
@@ -994,12 +1022,12 @@ function AppWorkspaceSidebarItem(props) {
               _el$54.$$click = select;
               _$insert(_el$54, content);
               _$effect(_p$ => {
-                var _v$49 = actionSlot()?.disabled,
-                  _v$50 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
-                  _v$51 = label();
-                _v$49 !== _p$.e && _$setProperty(_el$54, "disabled", _p$.e = _v$49);
-                _v$50 !== _p$.t && _$setAttribute(_el$54, "data-visibility", _p$.t = _v$50);
-                _v$51 !== _p$.a && _$setAttribute(_el$54, "aria-label", _p$.a = _v$51);
+                var _v$52 = actionSlot()?.disabled,
+                  _v$53 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
+                  _v$54 = label();
+                _v$52 !== _p$.e && _$setProperty(_el$54, "disabled", _p$.e = _v$52);
+                _v$53 !== _p$.t && _$setAttribute(_el$54, "data-visibility", _p$.t = _v$53);
+                _v$54 !== _p$.a && _$setAttribute(_el$54, "aria-label", _p$.a = _v$54);
                 return _p$;
               }, {
                 e: undefined,
@@ -1015,12 +1043,12 @@ function AppWorkspaceSidebarItem(props) {
             _el$53.$$click = select;
             _$insert(_el$53, content);
             _$effect(_p$ => {
-              var _v$46 = actionSlot()?.href,
-                _v$47 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
-                _v$48 = label();
-              _v$46 !== _p$.e && _$setAttribute(_el$53, "href", _p$.e = _v$46);
-              _v$47 !== _p$.t && _$setAttribute(_el$53, "data-visibility", _p$.t = _v$47);
-              _v$48 !== _p$.a && _$setAttribute(_el$53, "aria-label", _p$.a = _v$48);
+              var _v$49 = actionSlot()?.href,
+                _v$50 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
+                _v$51 = label();
+              _v$49 !== _p$.e && _$setAttribute(_el$53, "href", _p$.e = _v$49);
+              _v$50 !== _p$.t && _$setAttribute(_el$53, "data-visibility", _p$.t = _v$50);
+              _v$51 !== _p$.a && _$setAttribute(_el$53, "aria-label", _p$.a = _v$51);
               return _p$;
             }, {
               e: undefined,
@@ -1267,10 +1295,10 @@ const AppWorkspaceNavTree = props => {
           var _el$55 = _$getNextElement(_tmpl$27),
             _el$56 = _el$55.firstChild;
           _$effect(_p$ => {
-            var _v$52 = usesIconDisclosure() ? "" : undefined,
-              _v$53 = iconClass(rowIcon());
-            _v$52 !== _p$.e && _$setAttribute(_el$55, "data-k2b-nav-tree-toggle", _p$.e = _v$52);
-            _v$53 !== _p$.t && _$className(_el$56, _p$.t = _v$53);
+            var _v$55 = usesIconDisclosure() ? "" : undefined,
+              _v$56 = iconClass(rowIcon());
+            _v$55 !== _p$.e && _$setAttribute(_el$55, "data-k2b-nav-tree-toggle", _p$.e = _v$55);
+            _v$56 !== _p$.t && _$className(_el$56, _p$.t = _v$56);
             return _p$;
           }, {
             e: undefined,
@@ -1291,10 +1319,10 @@ const AppWorkspaceNavTree = props => {
           var _el$59 = _$getNextElement(_tmpl$29);
           _$insert(_el$59, () => item.meta);
           _$effect(_p$ => {
-            var _v$54 = `k2b-app-workspace__sidebar-item-meta ${hasChildren() ? "" : "k2b-app-workspace__nav-tree-leaf-meta"}`,
-              _v$55 = item.metaVisibility === "hover" ? "hover" : undefined;
-            _v$54 !== _p$.e && _$className(_el$59, _p$.e = _v$54);
-            _v$55 !== _p$.t && _$setAttribute(_el$59, "data-visibility", _p$.t = _v$55);
+            var _v$57 = `k2b-app-workspace__sidebar-item-meta ${hasChildren() ? "" : "k2b-app-workspace__nav-tree-leaf-meta"}`,
+              _v$58 = item.metaVisibility === "hover" ? "hover" : undefined;
+            _v$57 !== _p$.e && _$className(_el$59, _p$.e = _v$57);
+            _v$58 !== _p$.t && _$setAttribute(_el$59, "data-visibility", _p$.t = _v$58);
             return _p$;
           }, {
             e: undefined,
@@ -1377,8 +1405,8 @@ const AppWorkspaceNavTree = props => {
         _$addEventListener(_el$62, "dragenter", item.onDragEnter);
         _el$62.$$keydown = onKeyDown;
         _el$62.addEventListener("focus", () => setFocusedId(item.id));
-        var _ref$2 = treeItem;
-        typeof _ref$2 === "function" ? _$use(_ref$2, _el$62) : treeItem = _el$62;
+        var _ref$3 = treeItem;
+        typeof _ref$3 === "function" ? _$use(_ref$3, _el$62) : treeItem = _el$62;
         _$setAttribute(_el$62, "aria-level", depth + 1);
         _$setAttribute(_el$62, "data-k2b-nav-tree-parent-id", parentId);
         _$insert(_el$62, row, _el$65, _co$0);
@@ -1393,16 +1421,16 @@ const AppWorkspaceNavTree = props => {
           }
         }), _el$67, _co$1);
         _$effect(_p$ => {
-          var _v$56 = selected(),
-            _v$57 = hasChildren() ? isExpanded(item.id) : undefined,
-            _v$58 = item.disabled ? "true" : undefined,
-            _v$59 = item.disabled ? -1 : tabStopId() === item.id ? 0 : -1,
-            _v$60 = item.id;
-          _v$56 !== _p$.e && _$setAttribute(_el$62, "aria-selected", _p$.e = _v$56);
-          _v$57 !== _p$.t && _$setAttribute(_el$62, "aria-expanded", _p$.t = _v$57);
-          _v$58 !== _p$.a && _$setAttribute(_el$62, "aria-disabled", _p$.a = _v$58);
-          _v$59 !== _p$.o && _$setAttribute(_el$62, "tabindex", _p$.o = _v$59);
-          _v$60 !== _p$.i && _$setAttribute(_el$62, "data-k2b-nav-tree-id", _p$.i = _v$60);
+          var _v$59 = selected(),
+            _v$60 = hasChildren() ? isExpanded(item.id) : undefined,
+            _v$61 = item.disabled ? "true" : undefined,
+            _v$62 = item.disabled ? -1 : tabStopId() === item.id ? 0 : -1,
+            _v$63 = item.id;
+          _v$59 !== _p$.e && _$setAttribute(_el$62, "aria-selected", _p$.e = _v$59);
+          _v$60 !== _p$.t && _$setAttribute(_el$62, "aria-expanded", _p$.t = _v$60);
+          _v$61 !== _p$.a && _$setAttribute(_el$62, "aria-disabled", _p$.a = _v$61);
+          _v$62 !== _p$.o && _$setAttribute(_el$62, "tabindex", _p$.o = _v$62);
+          _v$63 !== _p$.i && _$setAttribute(_el$62, "data-k2b-nav-tree-id", _p$.i = _v$63);
           return _p$;
         }, {
           e: undefined,
@@ -1418,14 +1446,14 @@ const AppWorkspaceNavTree = props => {
   });
   return (() => {
     var _el$68 = _$getNextElement(_tmpl$33);
-    var _ref$3 = root;
-    typeof _ref$3 === "function" ? _$use(_ref$3, _el$68) : root = _el$68;
+    var _ref$4 = root;
+    typeof _ref$4 === "function" ? _$use(_ref$4, _el$68) : root = _el$68;
     _$insert(_el$68, () => renderItems(roots, 0));
     _$effect(_p$ => {
-      var _v$61 = `k2b-app-workspace__nav-tree ${props.class ?? ""}`,
-        _v$62 = props.ariaLabel;
-      _v$61 !== _p$.e && _$className(_el$68, _p$.e = _v$61);
-      _v$62 !== _p$.t && _$setAttribute(_el$68, "aria-label", _p$.t = _v$62);
+      var _v$64 = `k2b-app-workspace__nav-tree ${props.class ?? ""}`,
+        _v$65 = props.ariaLabel;
+      _v$64 !== _p$.e && _$className(_el$68, _p$.e = _v$64);
+      _v$65 !== _p$.t && _$setAttribute(_el$68, "aria-label", _p$.t = _v$65);
       return _p$;
     }, {
       e: undefined,
@@ -1549,20 +1577,20 @@ const AppWorkspace = props => {
     },
     get children() {
       var _el$77 = _$getNextElement(_tmpl$36);
-      var _ref$4 = root;
-      typeof _ref$4 === "function" ? _$use(_ref$4, _el$77) : root = _el$77;
+      var _ref$5 = root;
+      typeof _ref$5 === "function" ? _$use(_ref$5, _el$77) : root = _el$77;
       _$insert(_el$77, () => props.children);
       _$effect(_p$ => {
-        var _v$63 = `k2b-app-workspace ${props.class ?? ""}`,
-          _v$64 = props.mobileSurface,
-          _v$65 = initialLayoutState()?.sidebarCollapsed === undefined ? undefined : String(initialLayoutState()?.sidebarCollapsed),
-          _v$66 = props.resizable === false ? "false" : "true",
-          _v$67 = appWorkspaceLayoutStyle(initialLayoutState());
-        _v$63 !== _p$.e && _$className(_el$77, _p$.e = _v$63);
-        _v$64 !== _p$.t && _$setAttribute(_el$77, "data-mobile-surface", _p$.t = _v$64);
-        _v$65 !== _p$.a && _$setAttribute(_el$77, "data-sidebar-collapsed", _p$.a = _v$65);
-        _v$66 !== _p$.o && _$setAttribute(_el$77, "data-workspace-resizable", _p$.o = _v$66);
-        _p$.i = _$style(_el$77, _v$67, _p$.i);
+        var _v$66 = `k2b-app-workspace ${props.class ?? ""}`,
+          _v$67 = props.mobileSurface,
+          _v$68 = initialLayoutState()?.sidebarCollapsed === undefined ? undefined : String(initialLayoutState()?.sidebarCollapsed),
+          _v$69 = props.resizable === false ? "false" : "true",
+          _v$70 = appWorkspaceLayoutStyle(initialLayoutState());
+        _v$66 !== _p$.e && _$className(_el$77, _p$.e = _v$66);
+        _v$67 !== _p$.t && _$setAttribute(_el$77, "data-mobile-surface", _p$.t = _v$67);
+        _v$68 !== _p$.a && _$setAttribute(_el$77, "data-sidebar-collapsed", _p$.a = _v$68);
+        _v$69 !== _p$.o && _$setAttribute(_el$77, "data-workspace-resizable", _p$.o = _v$69);
+        _p$.i = _$style(_el$77, _v$70, _p$.i);
         return _p$;
       }, {
         e: undefined,