@midas-ds/layout 0.0.21 → 0.0.23

package/header/mobile-menu/MobileMenu.d.ts

@@ -1,9 +1,8 @@
-import { ReactNode } from 'react';
-export interface MobileMenuProps {
-    children?: ReactNode;
+import { ModalOverlayProps } from 'react-aria-components';
+export interface MobileMenuProps extends ModalOverlayProps {
+    /**
+     * A visible title for the menu
+     */
     title?: string;
-    isDrawerOpen?: boolean;
-    defaultDrawerOpen?: boolean;
-    onDrawerOpenChange?: (isDrawerOpen: boolean) => void;
 }
-export declare const MobileMenu: ({ children, title, isDrawerOpen: isDrawerOpenProp, defaultDrawerOpen, onDrawerOpenChange, }: MobileMenuProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const MobileMenu: ({ children, className, title, ...rest }: MobileMenuProps) => import("react/jsx-runtime").JSX.Element | null;

package/index.d.ts

@@ -3,4 +3,5 @@ export * from './layout';
 export * from './main';
 export * from './navigation';
 export * from './panel';
+export * from './sidebar';
 export * from './navbar';

package/index.js

@@ -1,37 +1,37 @@
-import { H as s, a as o, b as t, M as n } from "./chunks/Header-T5EUvNY7.js";
-import { L as r, a as l } from "./chunks/LayoutContent-DhVL-boV.js";
-import { M as m } from "./chunks/Main-Ce4U9_ce.js";
-import { N as p, a as d, b as f, c as u, d as C, e as M } from "./chunks/NavigationSubMenu-C-M26YYp.js";
-import { C as v, D as b, a as g, b as D, c as H, P as c, d as L, e as y, f as A, u as S } from "./chunks/Panel-C-B48gnt.js";
-import { C as B, P as I } from "./chunks/PanelContext-D6WQ7_yb.js";
-import { N as T } from "./chunks/Navbar-wOOCcsru.js";
-import { M as j } from "./chunks/MobileMenuContext-Coj0sJ0N.js";
+import { H as o, a as t, b as r, M as n } from "./chunks/Header-B1Nk3vII.js";
+import { L as i, a as x } from "./chunks/LayoutContent-CvlzZxeo.js";
+import { M as m } from "./chunks/Main-Dt0CIYBE.js";
+import { N as b, a as d, b as f, c as p, d as M, e as N } from "./chunks/NavigationSubMenu-G-WkaNZA.js";
+import { P as v, a as g, b as H, c as S, u as c } from "./chunks/PanelRegion-zsKP1Rye.js";
+import { S as L } from "./chunks/Sidebar-BFIjN5q6.js";
+import { S as A } from "./chunks/SidebarContext-CoDRKR2m.js";
+import { N as B } from "./chunks/Navbar-Do2dFMRr.js";
+import { M as R } from "./chunks/MobileMenuContext-Coj0sJ0N.js";
+import { P as h, a as j, b as q } from "./chunks/PanelTitle-xkONCSrW.js";
 export {
-  v as CollapsePanel,
-  B as CollapsePanelContext,
-  b as DismissPanel,
-  g as DismissPanelContext,
-  D as DismissPanelOutlet,
-  H as DismissPanelProvider,
-  s as Header,
-  o as HeaderAction,
-  t as HeaderActions,
-  r as Layout,
-  l as LayoutContent,
+  o as Header,
+  t as HeaderAction,
+  r as HeaderActions,
+  i as Layout,
+  x as LayoutContent,
   m as Main,
   n as MobileMenu,
-  j as MobileMenuContext,
-  T as Navbar,
-  p as Navigation,
+  R as MobileMenuContext,
+  B as Navbar,
+  b as Navigation,
   d as NavigationHeader,
   f as NavigationItem,
-  u as NavigationLink,
-  C as NavigationSection,
-  M as NavigationSubMenu,
-  c as Panel,
-  L as PanelBody,
-  I as PanelContext,
-  y as PanelHeader,
-  A as PanelTitle,
-  S as useDismissPanels
+  p as NavigationLink,
+  M as NavigationSection,
+  N as NavigationSubMenu,
+  v as Panel,
+  h as PanelBody,
+  g as PanelContext,
+  j as PanelHeader,
+  H as PanelProvider,
+  S as PanelRegion,
+  q as PanelTitle,
+  L as Sidebar,
+  A as SidebarContext,
+  c as usePanels
 };

package/layout/index.js

@@ -1,4 +1,4 @@
-import { L as t, a as L } from "../chunks/LayoutContent-DhVL-boV.js";
+import { L as t, a as L } from "../chunks/LayoutContent-CvlzZxeo.js";
 export {
   t as Layout,
   L as LayoutContent

package/main/index.js

@@ -1,4 +1,4 @@
-import { M as r } from "../chunks/Main-Ce4U9_ce.js";
+import { M as r } from "../chunks/Main-Dt0CIYBE.js";
 export {
   r as Main
 };

package/navbar/index.js

@@ -1,4 +1,4 @@
-import { N as o } from "../chunks/Navbar-wOOCcsru.js";
+import { N as o } from "../chunks/Navbar-Do2dFMRr.js";
 export {
   o as Navbar
 };

package/navigation/index.js

@@ -1,4 +1,4 @@
-import { N as n, a as o, b as t, c as e, d as N, e as g } from "../chunks/NavigationSubMenu-C-M26YYp.js";
+import { N as n, a as o, b as t, c as e, d as N, e as g } from "../chunks/NavigationSubMenu-G-WkaNZA.js";
 export {
   n as Navigation,
   o as NavigationHeader,

package/navigation/navigation-header/NavigationHeader.d.ts

@@ -1,3 +1,2 @@
 import { TextProps } from '../../../../components/src/index.ts';
-export type NavigationHeaderProps = TextProps;
-export declare const NavigationHeader: ({ className, ...rest }: NavigationHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NavigationHeader: ({ className, ...rest }: TextProps) => import("react/jsx-runtime").JSX.Element;

package/navigation/navigation-section/NavigationSection.d.ts

@@ -1,6 +1,6 @@
-import { DetailedHTMLProps, HTMLAttributes } from 'react';
 import { CollectionProps } from '@react-aria/collections';
-export interface NavigationSectionProps<T extends object> extends CollectionProps<T>, Pick<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, 'className'> {
+export interface NavigationSectionProps<T extends object> extends CollectionProps<T> {
     title?: string;
+    className?: string;
 }
 export declare const NavigationSection: <T extends object>({ className, title, ...rest }: NavigationSectionProps<T>) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -14,7 +14,7 @@
   "description": "Midas Layout components",
   "homepage": "https://designsystem.migrationsverket.se/",
   "license": "CC0-1.0",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "module": "./index.js",
   "type": "module",
   "main": "./index.js",
@@ -36,6 +36,6 @@
     "./*": "./*/index.js"
   },
   "dependencies": {
-    "@midas-ds/components": "17.10.0"
+    "@midas-ds/components": "17.10.1"
   }
 }

package/panel/Panel.d.ts

@@ -1,12 +1,12 @@
-import { Key } from 'react-aria-components';
-import { CollapseTriggerProps } from './collapse-panel';
-import { DismissTriggerProps } from './dismiss-panel';
 import { PanelBodyProps } from './panel-body';
 import { PanelTitleProps } from './panel-title';
-export type PanelVariant = 'collapse' | 'dismiss' | undefined;
-export type PanelTriggerProps<T extends PanelVariant> = T extends 'collapse' ? CollapseTriggerProps : T extends 'dismiss' ? DismissTriggerProps : never;
-export type PanelProps<T extends PanelVariant> = PanelBodyProps & Pick<PanelTitleProps, 'title'> & PanelTriggerProps<T> & {
-    variant?: T;
-    id: Key;
-};
-export declare const Panel: <T extends PanelVariant>({ variant, ...rest }: PanelProps<T>) => import("react/jsx-runtime").JSX.Element;
+export interface PanelProps extends PanelBodyProps, Pick<PanelTitleProps, 'title'> {
+    id: string;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    onExited?: () => void;
+    promoting?: boolean;
+    onPromotionEnd?: () => void;
+}
+export declare const Panel: (props: PanelProps) => import("react/jsx-runtime").JSX.Element | null;

package/panel/Panel.stories.d.ts

@@ -2,15 +2,13 @@ import { StoryObj } from '@storybook/react-vite';
 import { Panel } from '.';
 type Story = StoryObj<typeof Panel>;
 declare const _default: {
-    component: <T extends import('./Panel').PanelVariant>({ variant, ...rest }: import('./Panel').PanelProps<T>) => import("react/jsx-runtime").JSX.Element;
+    component: (props: import('./Panel').PanelProps) => import("react/jsx-runtime").JSX.Element | null;
     title: string;
     tags: string[];
     args: {
-        isCollapsed: false;
         isOpen: false;
         title: string;
     };
 };
 export default _default;
-export declare const Collapse: Story;
-export declare const Dismiss: Story;
+export declare const Primary: Story;

package/panel/PanelContext.d.ts

@@ -1,3 +1,12 @@
-import { PanelProps, PanelVariant } from '.';
-export type PanelContextValue<T extends PanelVariant> = Pick<PanelProps<T>, 'variant'>;
-export declare const PanelContext: import('react').Context<PanelContextValue<PanelVariant>>;
+import { PanelProps } from './Panel';
+export interface PanelItem extends PanelProps {
+    promoting?: boolean;
+}
+export interface PanelContextValue {
+    panels: PanelItem[];
+    addPanel: (panel: Omit<PanelItem, 'isOpen' | 'defaultOpen'>) => void;
+    closePanel: (id: string) => void;
+    removePanel: (id: string) => void;
+    resetPromoting: (id: string) => void;
+}
+export declare const PanelContext: import('react').Context<PanelContextValue>;

package/panel/PanelProvider.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { PanelItem } from './PanelContext';
+export type PanelBehavior = 'bring-to-front' | 'pop-to';
+export interface PanelProviderProps {
+    children: ReactNode;
+    defaultPanels?: PanelItem[];
+    panelBehavior?: PanelBehavior;
+}
+export declare const PanelProvider: ({ children, defaultPanels, panelBehavior, }: PanelProviderProps) => import("react/jsx-runtime").JSX.Element;

package/panel/PanelRegion.d.ts

@@ -0,0 +1,3 @@
+import { DetailedHTMLProps, HTMLAttributes } from 'react';
+export type PanelRegionProps = DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+export declare const PanelRegion: ({ children, className, ...rest }: PanelRegionProps) => import("react/jsx-runtime").JSX.Element;

package/panel/index.d.ts

@@ -1,7 +1,8 @@
-export * from './Panel';
-export * from './PanelContext';
-export * from './collapse-panel';
-export * from './dismiss-panel';
 export * from './panel-body';
 export * from './panel-header';
 export * from './panel-title';
+export * from './Panel';
+export * from './PanelContext';
+export * from './PanelProvider';
+export * from './PanelRegion';
+export * from './usePanels';

package/panel/index.js

@@ -1,16 +1,12 @@
-import { C as e, D as l, a as n, b as P, c as i, P as o, d as t, e as m, f as r, u as C } from "../chunks/Panel-C-B48gnt.js";
-import { C as x, P as d } from "../chunks/PanelContext-D6WQ7_yb.js";
+import { P, a as n, b as s, c as l, u as o } from "../chunks/PanelRegion-zsKP1Rye.js";
+import { P as t, a as d, b as i } from "../chunks/PanelTitle-xkONCSrW.js";
 export {
-  e as CollapsePanel,
-  x as CollapsePanelContext,
-  l as DismissPanel,
-  n as DismissPanelContext,
-  P as DismissPanelOutlet,
-  i as DismissPanelProvider,
-  o as Panel,
+  P as Panel,
   t as PanelBody,
-  d as PanelContext,
-  m as PanelHeader,
-  r as PanelTitle,
-  C as useDismissPanels
+  n as PanelContext,
+  d as PanelHeader,
+  s as PanelProvider,
+  l as PanelRegion,
+  i as PanelTitle,
+  o as usePanels
 };

package/panel/intl/translations.json.d.ts

@@ -1,12 +1,8 @@
 declare const _default: {
   "en": {
-    "expandSidebar": "Expand sidebar",
-    "collapseSidebar": "Collapse sidebar",
     "closePanel": "Close panel"
   },
   "sv": {
-    "expandSidebar": "Expandera sidopanel",
-    "collapseSidebar": "Minimera sidopanel",
     "closePanel": "Stäng panel"
   }
 }

package/panel/panel-body/PanelBody.d.ts

@@ -1,3 +1,3 @@
-import { HTMLAttributes } from 'react';
-export type PanelBodyProps = HTMLAttributes<HTMLDivElement>;
-export declare const PanelBody: import('react').ForwardRefExoticComponent<PanelBodyProps & import('react').RefAttributes<HTMLDivElement>>;
+import { DetailedHTMLProps, HTMLAttributes } from 'react';
+export type PanelBodyProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+export declare const PanelBody: import('react').ForwardRefExoticComponent<Omit<PanelBodyProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/panel/usePanels.d.ts

@@ -0,0 +1 @@
+export declare const usePanels: () => import('./PanelContext').PanelContextValue;

package/sidebar/Sidebar.d.ts

@@ -0,0 +1,7 @@
+import { PanelBodyProps, PanelTitleProps } from '../panel';
+export interface SidebarProps extends PanelBodyProps, Pick<PanelTitleProps, 'title'> {
+    isCollapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapseChange?: (isCollapsed: boolean) => void;
+}
+export declare const Sidebar: ({ children, className, title, ...props }: SidebarProps) => import("react/jsx-runtime").JSX.Element | null;

package/sidebar/SidebarContext.d.ts

@@ -0,0 +1,3 @@
+import { SidebarProps } from './Sidebar';
+export type SidebarContextValue = Pick<SidebarProps, 'isCollapsed'>;
+export declare const SidebarContext: import('react').Context<SidebarContextValue | undefined>;

package/sidebar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Sidebar';
+export * from './SidebarContext';

package/sidebar/index.js

@@ -0,0 +1,6 @@
+import { S as o } from "../chunks/Sidebar-BFIjN5q6.js";
+import { S as t } from "../chunks/SidebarContext-CoDRKR2m.js";
+export {
+  o as Sidebar,
+  t as SidebarContext
+};

package/sidebar/intl/translations.json.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+  "en": {
+    "expandSidebar": "Expand sidebar",
+    "collapseSidebar": "Collapse sidebar"
+  },
+  "sv": {
+    "expandSidebar": "Expandera sidopanel",
+    "collapseSidebar": "Minimera sidopanel"
+  }
+}
+;
+
+export default _default;

package/assets/Panel.css

@@ -1 +0,0 @@
-._collapsePanel_5za0f_1{width:15rem;transition:width var(--midas-transition-duration-fast) ease-out}._collapsePanel_5za0f_1._collapsed_5za0f_5{width:80px}@media(max-width:640px){._collapsePanel_5za0f_1{display:none}}._panelHeader_5za0f_14{gap:0}._panelTitle_5za0f_18{font-size:var(--midas-typography-font-size-20);display:block}._panelBody_aouaw_1{background-color:var(--midas-background-base);box-sizing:border-box;padding:1rem}._panelHeader_11qv1_1{align-items:center;display:flex;justify-content:space-between}._panelTitle_w7y4m_1{display:block}._dismissPanel_11141_1{position:absolute!important;top:0;right:0;width:320px;height:100%;overflow:hidden}._dismissPanel_11141_1[data-promoting]{animation:_promote_11141_1 var(--midas-transition-duration-fast) ease-out}@media(prefers-reduced-motion:reduce){._dismissPanel_11141_1[data-promoting]{animation-duration:1ms}}._dismissPanel_11141_1[data-entering]{animation:_slide-horizontally_11141_1 var(--midas-transition-duration-fast)}._dismissPanel_11141_1[data-exiting]{animation:_slide-horizontally_11141_1 var(--midas-transition-duration-fast) reverse ease-in}@media(prefers-reduced-motion:reduce){._dismissPanel_11141_1[data-entering],._dismissPanel_11141_1[data-exiting]{animation-duration:1ms}}@media not (min-width:800px){._dismissPanel_11141_1{bottom:0;width:100%;height:25%;left:0;top:unset}._dismissPanel_11141_1[data-entering]{animation:_slide-vertically_11141_1 var(--midas-transition-duration-fast)}._dismissPanel_11141_1[data-exiting]{animation:_slide-vertically_11141_1 var(--midas-transition-duration-fast) reverse ease-in}}._panelTitle_11141_54{font-size:var(--midas-typography-font-size-20);display:block}@keyframes _promote_11141_1{0%{opacity:.7;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes _slide-horizontally_11141_1{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes _slide-vertically_11141_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}

package/chunks/Header-T5EUvNY7.js

@@ -1,98 +0,0 @@
-'use client';
-import { jsx as e, jsxs as l, Fragment as v } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import { composeRenderProps as d, ModalOverlay as b, Modal as y, Dialog as M } from "react-aria-components";
-import { Button as h, DialogTrigger as w, Text as N, LogoContext as g, clsx as x } from "@midas-ds/components";
-import { useControlledState as A } from "@react-stately/utils";
-import { u as m } from "./useIsMobileDevice-D0iMVFPx.js";
-import { M as D } from "./MobileMenuContext-Coj0sJ0N.js";
-import { c as O } from "./createLucideIcon-CP-mMPfa.js";
-import '../assets/Header.css';const H = "_headerActions_1rka5_1", P = {
-  headerActions: H
-}, Q = ({ className: r, ...a }) => /* @__PURE__ */ e(
-  "div",
-  {
-    className: `${r} ${P.headerActions}`,
-    ...a
-  }
-), $ = "_label_1191f_1", k = {
-  label: $
-}, j = f(
-  ({ children: r, icon: a, ...s }, n) => (!r && !s["aria-label"] && process.env.NODE_ENV !== "production" && console.warn(
-    "Please provide an 'aria-label' for HeaderAction components that doesnt have a visible label (children)"
-  ), /* @__PURE__ */ e(
-    h,
-    {
-      ref: n,
-      size: "medium",
-      variant: "tertiary",
-      ...s,
-      children: d(r, (o) => /* @__PURE__ */ l(v, { children: [
-        a,
-        typeof o < "u" && /* @__PURE__ */ e("span", { className: k.label, children: o })
-      ] }))
-    }
-  ))
-);
-j.displayName = "HeaderAction";
-const C = [
-  ["path", { d: "M4 5h16", key: "1tepv9" }],
-  ["path", { d: "M4 12h16", key: "1lakjw" }],
-  ["path", { d: "M4 19h16", key: "1djgab" }]
-], I = O("menu", C), z = "_overlay_12sw8_1", E = "_drawer_12sw8_19", L = "_header_12sw8_44", i = {
-  overlay: z,
-  drawer: E,
-  header: L
-}, U = ({
-  children: r,
-  title: a,
-  isDrawerOpen: s,
-  defaultDrawerOpen: n = !1,
-  onDrawerOpenChange: o
-}) => {
-  const p = m(), [_, c] = A(
-    s,
-    n,
-    o
-  ), u = () => c((t) => !t);
-  return p ? /* @__PURE__ */ e(D.Provider, { value: {}, children: /* @__PURE__ */ l(w, { children: [
-    /* @__PURE__ */ e(
-      h,
-      {
-        icon: I,
-        variant: "icon",
-        onPress: u
-      }
-    ),
-    /* @__PURE__ */ e(
-      b,
-      {
-        className: i.overlay,
-        isDismissable: !0,
-        isOpen: _,
-        onOpenChange: c,
-        children: d(r, (t) => /* @__PURE__ */ e(y, { className: i.drawer, children: /* @__PURE__ */ l(M, { children: [
-          a && /* @__PURE__ */ e(N, { className: i.header, children: a }),
-          t
-        ] }) }))
-      }
-    )
-  ] }) }) : null;
-}, R = "_header_105ne_1", T = {
-  header: R
-}, W = ({ className: r, ...a }) => {
-  const s = m();
-  return /* @__PURE__ */ e(g.Provider, { value: { size: s ? "x-small" : "large" }, children: /* @__PURE__ */ e(
-    "header",
-    {
-      className: x(r, T.header),
-      ...a
-    }
-  ) });
-};
-export {
-  W as H,
-  U as M,
-  j as a,
-  Q as b
-};

package/chunks/LayoutContent-DhVL-boV.js

@@ -1,22 +0,0 @@
-import { jsx as n } from "react/jsx-runtime";
-import '../assets/LayoutContent.css';const a = "_layout_4r2tn_1", s = {
-  layout: a
-}, u = ({ className: t, ...o }) => /* @__PURE__ */ n(
-  "div",
-  {
-    className: `${t ?? ""} ${s.layout}`,
-    ...o
-  }
-), y = "_layoutContent_yqjxz_1", l = {
-  layoutContent: y
-}, c = ({ className: t, ...o }) => /* @__PURE__ */ n(
-  "div",
-  {
-    className: `${t ?? ""} ${l.layoutContent}`,
-    ...o
-  }
-);
-export {
-  u as L,
-  c as a
-};

package/chunks/Main-Ce4U9_ce.js

@@ -1,13 +0,0 @@
-import { jsx as i } from "react/jsx-runtime";
-import '../assets/Main.css';const o = "_main_vtpiw_1", s = {
-  main: o
-}, t = ({ className: n, ...a }) => /* @__PURE__ */ i(
-  "main",
-  {
-    className: [n, s.main].filter(Boolean).join(" "),
-    ...a
-  }
-);
-export {
-  t as M
-};

package/chunks/Navbar-wOOCcsru.js

@@ -1,13 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import '../assets/Navbar.css';const s = "_navbar_18aqo_1", n = {
-  navbar: s
-}, b = ({ className: a, ...o }) => /* @__PURE__ */ r(
-  "footer",
-  {
-    className: `${a ?? ""} ${n.navbar}`,
-    ...o
-  }
-);
-export {
-  b as N
-};