@broberg/app-shell 0.11.0 → 0.12.0

package/dist/preact.d.cts

@@ -16,10 +16,23 @@ interface NavItem<Icon = unknown> {
      * it is on the current path.
      */
     children?: NavItem<Icon>[];
+    /** F092.20 — a status marker before the label; "working" = a run in progress. */
+    marker?: "working";
+    /** F092.20 — shows a pin icon after the label. */
+    pinned?: boolean;
+}
+interface NavSection<Icon = unknown> {
+    /** A sub-heading inside one group, e.g. "I dag" / "I går". */
+    label: string;
+    items: NavItem<Icon>[];
 }
 interface NavGroup<Icon = unknown> {
     label: string;
     items: NavItem<Icon>[];
+    /** F092.20 — "plain": the group label in normal text (not uppercase/mono). */
+    variant?: "default" | "plain";
+    /** F092.20 — sub-headed lists inside this group, shown after `items`. */
+    sections?: NavSection<Icon>[];
 }
 /**
  * Is this item the current page? Exact match for "/", otherwise the path is the
@@ -236,6 +249,8 @@ declare const TEXT: {
         readonly openMenu: "Åbn menu";
         readonly closeMenu: "Luk menu";
         readonly home: "Forside";
+        readonly working: "Arbejder";
+        readonly pinned: "Fastgjort";
         readonly language: "Sprog";
         readonly zoom: "Zoom";
         readonly zoomOut: "Zoom ud";
@@ -307,6 +322,8 @@ declare const TEXT: {
         readonly openMenu: "Open menu";
         readonly closeMenu: "Close menu";
         readonly home: "Home";
+        readonly working: "Working";
+        readonly pinned: "Pinned";
         readonly language: "Language";
         readonly zoom: "Zoom";
         readonly zoomOut: "Zoom out";
@@ -689,4 +706,4 @@ interface ConfirmDialogProps {
 }
 declare function ConfirmDialog(p: ConfirmDialogProps): JSX.Element | null;
 
-export { AVATAR_MAX_BYTES, AVATAR_TYPES, type AccountAdapter, AccountError, AccountPage, type AccountPageProps, type AccountProfile, type AnalyticsAdapter, type AnalyticsData, type AnalyticsDay, AnalyticsError, AnalyticsPage, type AnalyticsPageProps, AppShell, type AppShellProps, Avatar, ConfirmDialog, type ConfirmDialogProps, type Lang, type NavGroup, type NavItem, type Navigate, NotificationBell, type NotificationBellProps, type NotificationSource, PageHeader, type PageTab, PageTabs, type PreactNavGroup, type PreactNavItem, type ShellUser, Sidebar, type SidebarProps, TEXT, type TenantAdapter, TenantLoadError, type TenantMembershipRow, TenantSwitcher, type TenantSwitcherProps, TopBar, type TopBarProps, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuSection, accountErrorKind, activeNavLabel, analyticsErrorKind, badgeLabel, changePct, checkAvatarFile, copenhagenDay, createFetchAccountAdapter, createFetchAnalyticsAdapter, createFetchNotificationSource, createFetchTenantAdapter, createMemoryNotificationSource, defaultReauthHref, fillDays, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };
+export { AVATAR_MAX_BYTES, AVATAR_TYPES, type AccountAdapter, AccountError, AccountPage, type AccountPageProps, type AccountProfile, type AnalyticsAdapter, type AnalyticsData, type AnalyticsDay, AnalyticsError, AnalyticsPage, type AnalyticsPageProps, AppShell, type AppShellProps, Avatar, ConfirmDialog, type ConfirmDialogProps, type Lang, type NavGroup, type NavItem, type NavSection, type Navigate, NotificationBell, type NotificationBellProps, type NotificationSource, PageHeader, type PageTab, PageTabs, type PreactNavGroup, type PreactNavItem, type ShellUser, Sidebar, type SidebarProps, TEXT, type TenantAdapter, TenantLoadError, type TenantMembershipRow, TenantSwitcher, type TenantSwitcherProps, TopBar, type TopBarProps, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuSection, accountErrorKind, activeNavLabel, analyticsErrorKind, badgeLabel, changePct, checkAvatarFile, copenhagenDay, createFetchAccountAdapter, createFetchAnalyticsAdapter, createFetchNotificationSource, createFetchTenantAdapter, createMemoryNotificationSource, defaultReauthHref, fillDays, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };

package/dist/preact.d.ts

@@ -16,10 +16,23 @@ interface NavItem<Icon = unknown> {
      * it is on the current path.
      */
     children?: NavItem<Icon>[];
+    /** F092.20 — a status marker before the label; "working" = a run in progress. */
+    marker?: "working";
+    /** F092.20 — shows a pin icon after the label. */
+    pinned?: boolean;
+}
+interface NavSection<Icon = unknown> {
+    /** A sub-heading inside one group, e.g. "I dag" / "I går". */
+    label: string;
+    items: NavItem<Icon>[];
 }
 interface NavGroup<Icon = unknown> {
     label: string;
     items: NavItem<Icon>[];
+    /** F092.20 — "plain": the group label in normal text (not uppercase/mono). */
+    variant?: "default" | "plain";
+    /** F092.20 — sub-headed lists inside this group, shown after `items`. */
+    sections?: NavSection<Icon>[];
 }
 /**
  * Is this item the current page? Exact match for "/", otherwise the path is the
@@ -236,6 +249,8 @@ declare const TEXT: {
         readonly openMenu: "Åbn menu";
         readonly closeMenu: "Luk menu";
         readonly home: "Forside";
+        readonly working: "Arbejder";
+        readonly pinned: "Fastgjort";
         readonly language: "Sprog";
         readonly zoom: "Zoom";
         readonly zoomOut: "Zoom ud";
@@ -307,6 +322,8 @@ declare const TEXT: {
         readonly openMenu: "Open menu";
         readonly closeMenu: "Close menu";
         readonly home: "Home";
+        readonly working: "Working";
+        readonly pinned: "Pinned";
         readonly language: "Language";
         readonly zoom: "Zoom";
         readonly zoomOut: "Zoom out";
@@ -689,4 +706,4 @@ interface ConfirmDialogProps {
 }
 declare function ConfirmDialog(p: ConfirmDialogProps): JSX.Element | null;
 
-export { AVATAR_MAX_BYTES, AVATAR_TYPES, type AccountAdapter, AccountError, AccountPage, type AccountPageProps, type AccountProfile, type AnalyticsAdapter, type AnalyticsData, type AnalyticsDay, AnalyticsError, AnalyticsPage, type AnalyticsPageProps, AppShell, type AppShellProps, Avatar, ConfirmDialog, type ConfirmDialogProps, type Lang, type NavGroup, type NavItem, type Navigate, NotificationBell, type NotificationBellProps, type NotificationSource, PageHeader, type PageTab, PageTabs, type PreactNavGroup, type PreactNavItem, type ShellUser, Sidebar, type SidebarProps, TEXT, type TenantAdapter, TenantLoadError, type TenantMembershipRow, TenantSwitcher, type TenantSwitcherProps, TopBar, type TopBarProps, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuSection, accountErrorKind, activeNavLabel, analyticsErrorKind, badgeLabel, changePct, checkAvatarFile, copenhagenDay, createFetchAccountAdapter, createFetchAnalyticsAdapter, createFetchNotificationSource, createFetchTenantAdapter, createMemoryNotificationSource, defaultReauthHref, fillDays, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };
+export { AVATAR_MAX_BYTES, AVATAR_TYPES, type AccountAdapter, AccountError, AccountPage, type AccountPageProps, type AccountProfile, type AnalyticsAdapter, type AnalyticsData, type AnalyticsDay, AnalyticsError, AnalyticsPage, type AnalyticsPageProps, AppShell, type AppShellProps, Avatar, ConfirmDialog, type ConfirmDialogProps, type Lang, type NavGroup, type NavItem, type NavSection, type Navigate, NotificationBell, type NotificationBellProps, type NotificationSource, PageHeader, type PageTab, PageTabs, type PreactNavGroup, type PreactNavItem, type ShellUser, Sidebar, type SidebarProps, TEXT, type TenantAdapter, TenantLoadError, type TenantMembershipRow, TenantSwitcher, type TenantSwitcherProps, TopBar, type TopBarProps, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuSection, accountErrorKind, activeNavLabel, analyticsErrorKind, badgeLabel, changePct, checkAvatarFile, copenhagenDay, createFetchAccountAdapter, createFetchAnalyticsAdapter, createFetchNotificationSource, createFetchTenantAdapter, createMemoryNotificationSource, defaultReauthHref, fillDays, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };

package/dist/preact.js

@@ -304,6 +304,8 @@ var TEXT = {
     openMenu: "\xC5bn menu",
     closeMenu: "Luk menu",
     home: "Forside",
+    working: "Arbejder",
+    pinned: "Fastgjort",
     language: "Sprog",
     zoom: "Zoom",
     zoomOut: "Zoom ud",
@@ -375,6 +377,8 @@ var TEXT = {
     openMenu: "Open menu",
     closeMenu: "Close menu",
     home: "Home",
+    working: "Working",
+    pinned: "Pinned",
     language: "Language",
     zoom: "Zoom",
     zoomOut: "Zoom out",
@@ -493,6 +497,10 @@ var IconLogOut = () => svg(/* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx("path", { d: "m16 17 5-5-5-5" }),
   /* @__PURE__ */ jsx("path", { d: "M21 12H9" })
 ] }), 14);
+var IconPin = () => svg(/* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M12 17v5" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" })
+] }), 12);
 var IconUser = () => svg(/* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx("circle", { cx: "12", cy: "8", r: "4" }),
   /* @__PURE__ */ jsx("path", { d: "M4 21a8 8 0 0 1 16 0" })
@@ -568,7 +576,9 @@ function Sidebar(p) {
         children: [
           active && !sub ? /* @__PURE__ */ jsx("span", { class: "bas-item__bar" }) : null,
           it.icon ? /* @__PURE__ */ jsx("span", { class: "bas-item__icon", children: it.icon }) : null,
+          it.marker === "working" ? /* @__PURE__ */ jsx("span", { class: "bas-item__marker", "data-testid": `sidebar-item-${it.id}-marker`, role: "img", "aria-label": TEXT[p.lang].working }) : null,
           /* @__PURE__ */ jsx("span", { class: "bas-item__label", children: it.label }),
+          it.pinned ? /* @__PURE__ */ jsx("span", { class: "bas-item__pin", "data-testid": `sidebar-item-${it.id}-pinned`, role: "img", "aria-label": TEXT[p.lang].pinned, children: /* @__PURE__ */ jsx(IconPin, {}) }) : null,
           badge ? /* @__PURE__ */ jsx("span", { class: "bas-item__count", "data-testid": `sidebar-badge-${it.id}`, children: badge }) : null
         ]
       },
@@ -654,12 +664,16 @@ function Sidebar(p) {
           /* @__PURE__ */ jsx("nav", { class: "bas-sidebar__nav", children: p.groups.map((g) => {
             const open = railed || !folded.has(g.label);
             const slug = g.label.toLowerCase().replace(/[^a-z0-9]+/g, "-");
-            return /* @__PURE__ */ jsxs("div", { class: "bas-group", children: [
+            return /* @__PURE__ */ jsxs("div", { class: "bas-group" + (g.variant === "plain" ? " bas-group--plain" : ""), children: [
               /* @__PURE__ */ jsxs("button", { type: "button", class: "bas-group__label", "data-testid": `sidebar-group-${slug}`, "aria-expanded": open, onClick: () => toggleGroup(g.label), children: [
                 /* @__PURE__ */ jsx(IconChevron, { open }),
                 /* @__PURE__ */ jsx("span", { children: g.label })
               ] }),
-              open ? g.items.map(item) : null
+              open ? g.items.map(item) : null,
+              open ? g.sections?.map((sec) => /* @__PURE__ */ jsxs("div", { class: "bas-section", "data-testid": `sidebar-section-${slug}-${sec.label.toLowerCase().replace(/[^a-z0-9æøå]+/g, "-")}`, children: [
+                /* @__PURE__ */ jsx("div", { class: "bas-section__label", children: sec.label }),
+                sec.items.map(item)
+              ] }, sec.label)) : null
             ] }, g.label);
           }) }),
           p.footer?.length ? /* @__PURE__ */ jsx("div", { class: "bas-sidebar__foot", children: p.footer.map(item) }) : null,
@@ -845,6 +859,33 @@ function Segmented(props) {
 }
 function Dropdown(props) {
   const [state, setState] = useState({ open: false, highlighted: -1 });
+  const btnRef = useRef(null);
+  const listRef = useRef(null);
+  const [pos, setPos] = useState(void 0);
+  useLayoutEffect(() => {
+    if (!state.open || !btnRef.current) return setPos(void 0);
+    const r = btnRef.current.getBoundingClientRect();
+    const vw = window.innerWidth, vh = window.innerHeight, m = 8;
+    const h = listRef.current?.offsetHeight ?? 0;
+    const width = Math.min(Math.max(r.width, 160), vw - 2 * m);
+    const left = Math.max(m, Math.min(r.right - width, vw - width - m));
+    const below = r.bottom + 4;
+    const top = below + h <= vh - m || r.top - 4 - h < m ? Math.min(below, vh - m - h) : r.top - 4 - h;
+    setPos({ position: "fixed", left: `${left}px`, top: `${Math.max(m, top)}px`, width: `${width}px` });
+  }, [state.open]);
+  useEffect(() => {
+    if (!state.open) return;
+    const close = (e) => {
+      if (e.target instanceof Node && listRef.current?.contains(e.target)) return;
+      setState((st) => ({ ...st, open: false }));
+    };
+    window.addEventListener("scroll", close, true);
+    window.addEventListener("resize", close);
+    return () => {
+      window.removeEventListener("scroll", close, true);
+      window.removeEventListener("resize", close);
+    };
+  }, [state.open]);
   const current = Math.max(0, props.options.findIndex(([v]) => v === props.value));
   const choose = (i) => {
     setState({ open: false, highlighted: i });
@@ -865,6 +906,7 @@ function Dropdown(props) {
     /* @__PURE__ */ jsxs(
       "button",
       {
+        ref: btnRef,
         type: "button",
         class: "bas-dd__btn",
         "data-testid": props.testid,
@@ -880,7 +922,7 @@ function Dropdown(props) {
         ]
       }
     ),
-    state.open ? /* @__PURE__ */ jsx("ul", { class: "bas-dd__list", role: "listbox", "aria-label": props.label, "data-testid": `${props.testid}-list`, children: props.options.map(([v, label], i) => /* @__PURE__ */ jsxs(
+    state.open ? /* @__PURE__ */ jsx("ul", { ref: listRef, class: "bas-dd__list", style: pos ?? { position: "fixed", visibility: "hidden" }, role: "listbox", "aria-label": props.label, "data-testid": `${props.testid}-list`, children: props.options.map(([v, label], i) => /* @__PURE__ */ jsxs(
       "li",
       {
         id: optId(v),