@amboss/design-system 4.17.0 → 4.18.0

package/build/cjs/components/Layout/-types.d.ts

@@ -265,7 +265,7 @@ export type LayoutValue = {
 };
 /** Forwarded to a panel's underlying scroll container (scroll restoration,
  *  custom scroll handling). Shared by every panel-like slot backed by a
- *  {@link PanelContainer} - `leftPanel`, `rightPanel`, `content`, `splitview`. */
+ *  {@link PanelContainer} - `leftPanel`, `rightPanel`, `splitview`. */
 export type ForwardedScrollProps = {
     scrollContainerRef?: React.Ref<HTMLDivElement>;
     onScroll?: React.UIEventHandler<HTMLDivElement>;
@@ -310,7 +310,10 @@ export type LeftPanelProps = Omit<SidePanelProps, "defaultSize" | "resizable"> &
      *  as on mobile (`role="dialog"`). Ignored by the docked desktop panel. */
     "aria-label": string;
 };
-export type ContentProps = ForwardedScrollProps & {
+export type ContentProps = {
+    children: React.ReactNode;
+};
+export type ContentPanelProps = ForwardedScrollProps & {
     /** Panel content in source order. `<Layout.ContentHeader />` /
      *  `<Layout.ContentFooter />` children stick to the edges; the rest scrolls. */
     children: React.ReactNode;
@@ -450,7 +453,7 @@ export type RightPanelHeaderProps = PanelSlotHeaderProps & {
 export type RightPanelFooterProps = PanelSlotFooterProps;
 /**
  * Title shown in the content header, after `leftSlot`. Visual only — the
- * panel's accessible name comes from `Layout.Content`'s `aria-label`.
+ * panel's accessible name comes from `ContentPanel`'s `aria-label`.
  */
 export type ContentHeaderTitle = PanelHeaderTitle;
 export type ContentHeaderSlotProps = {

package/build/cjs/components/Layout/Content/Content.d.ts

@@ -6,8 +6,6 @@ import type { ContentProps } from "../-types";
  * presentation: in-flow in the `content` slot ({@link ContentDocked}) normally,
  * and the mobile split's sliding base layer ({@link ContentSplitBase}) when a
  * `Layout.Split` is stacked over it - so the split pushes content aside instead
- * of just covering it. Either way the content sits in a {@link ContentPanel},
- * so `Layout.ContentHeader` / `Layout.ContentFooter` children stick to the
- * panel edges; the remaining content scrolls.
+ * of just covering it.
  */
 export declare const Content: React.FC<ContentProps>;

package/build/cjs/components/Layout/Content/Content.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Content",{enumerable:!0,get:function(){return Content}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_registry=require("../registry"),_ContentSplitBase=require("../Split/MobileSplitView/ContentSplitBase"),_useMobileSplitStack=require("../Split/MobileSplitView/useMobileSplitStack"),_useMobileSplitView=require("../Split/MobileSplitView/useMobileSplitView"),_ContentDocked=require("./ContentDocked"),_ContentPanel=require("./ContentPanel"),Content=({children,...panelProps})=>{(0,_registry.useDeclarePanel)(_constants.Slot.content,{collapsible:!1});let enabled=(0,_useMobileSplitView.useMobileSplitViewEnabled)(),{host,isSplitPresent}=(0,_useMobileSplitStack.useMobileSplitStack)(),panel=_react.default.createElement(_ContentPanel.ContentPanel,panelProps,children);return enabled&&isSplitPresent&&null!==host?_react.default.createElement(_ContentSplitBase.ContentSplitBase,null,panel):_react.default.createElement(_ContentDocked.ContentDocked,null,panel)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Content",{enumerable:!0,get:function(){return Content}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_registry=require("../registry"),_ContentSplitBase=require("../Split/MobileSplitView/ContentSplitBase"),_useMobileSplitStack=require("../Split/MobileSplitView/useMobileSplitStack"),_useMobileSplitView=require("../Split/MobileSplitView/useMobileSplitView"),_ContentDocked=require("./ContentDocked"),Content=({children})=>{(0,_registry.useDeclarePanel)(_constants.Slot.content,{collapsible:!1});let enabled=(0,_useMobileSplitView.useMobileSplitViewEnabled)(),{host,isSplitPresent}=(0,_useMobileSplitStack.useMobileSplitStack)();return enabled&&isSplitPresent&&null!==host?_react.default.createElement(_ContentSplitBase.ContentSplitBase,null,children):_react.default.createElement(_ContentDocked.ContentDocked,null,children)};

package/build/cjs/components/Layout/Content/ContentPanel.d.ts

@@ -1,9 +1,7 @@
 import React from "react";
-import type { ContentProps } from "../-types";
+import type { ContentPanelProps } from "../-types";
 /**
- * Frame shared by both `Layout.Content` presentations: the same `Sandwich` every
- * panel scrolls in, so `Layout.ContentHeader` / `Layout.ContentFooter` stick to
- * the edges, without `PanelContainer`'s Container - as with the left panel's
- * layers - so content keeps the layout and stacking it had without one.
+ * Scrollable frame for content headers and footers. Temporarily not mounted by
+ * `Layout.Content` while the accessibility regression in #2043 is unresolved.
  */
-export declare function ContentPanel({ children, background, "aria-label": ariaLabel, scrollContainerRef, onScroll, "data-e2e-test-id": dataE2eTestId, }: ContentProps): React.ReactElement;
+export declare function ContentPanel({ children, background, "aria-label": ariaLabel, scrollContainerRef, onScroll, "data-e2e-test-id": dataE2eTestId, }: ContentPanelProps): React.ReactElement;

package/build/cjs/components/Layout/Content/ContentPanel.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"ContentPanel",{enumerable:!0,get:function(){return ContentPanel}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Sandwich=require("../../Internal/Sandwich/Sandwich"),StyledContentFrame=(0,_styled.default)("div",{target:"e168plsf0",label:"StyledContentFrame"})(({theme,background})=>({height:"100%",backgroundColor:"primary"===background?theme.values.color.background.primary.default:"transparent"})),StyledContentFill=(0,_styled.default)("div",{target:"e168plsf1",label:"StyledContentFill"})({position:"absolute",inset:0});function ContentPanel({children,background="transparent","aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId}){return _react.default.createElement(StyledContentFrame,{background:background,role:ariaLabel?"region":void 0,"aria-label":ariaLabel,"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_Sandwich.Sandwich,{scrollRef:scrollContainerRef,onScroll:onScroll},_react.default.createElement(StyledContentFill,null,children)))}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"ContentPanel",{enumerable:!0,get:function(){return ContentPanel}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Sandwich=require("../../Internal/Sandwich/Sandwich"),StyledContentFrame=(0,_styled.default)("div",{target:"e1spy2ji0",label:"StyledContentFrame"})(({theme,background})=>({height:"100%",backgroundColor:"primary"===background?theme.values.color.background.primary.default:"transparent"})),StyledContentFill=(0,_styled.default)("div",{target:"e1spy2ji1",label:"StyledContentFill"})({position:"absolute",inset:0});function ContentPanel({children,background="transparent","aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId}){return _react.default.createElement(StyledContentFrame,{background:background,role:ariaLabel?"region":void 0,"aria-label":ariaLabel,"data-e2e-test-id":dataE2eTestId},_react.default.createElement(_Sandwich.Sandwich,{scrollRef:scrollContainerRef,onScroll:onScroll},_react.default.createElement(StyledContentFill,null,children)))}

package/build/esm/components/Layout/-types.d.ts

@@ -265,7 +265,7 @@ export type LayoutValue = {
 };
 /** Forwarded to a panel's underlying scroll container (scroll restoration,
  *  custom scroll handling). Shared by every panel-like slot backed by a
- *  {@link PanelContainer} - `leftPanel`, `rightPanel`, `content`, `splitview`. */
+ *  {@link PanelContainer} - `leftPanel`, `rightPanel`, `splitview`. */
 export type ForwardedScrollProps = {
     scrollContainerRef?: React.Ref<HTMLDivElement>;
     onScroll?: React.UIEventHandler<HTMLDivElement>;
@@ -310,7 +310,10 @@ export type LeftPanelProps = Omit<SidePanelProps, "defaultSize" | "resizable"> &
      *  as on mobile (`role="dialog"`). Ignored by the docked desktop panel. */
     "aria-label": string;
 };
-export type ContentProps = ForwardedScrollProps & {
+export type ContentProps = {
+    children: React.ReactNode;
+};
+export type ContentPanelProps = ForwardedScrollProps & {
     /** Panel content in source order. `<Layout.ContentHeader />` /
      *  `<Layout.ContentFooter />` children stick to the edges; the rest scrolls. */
     children: React.ReactNode;
@@ -450,7 +453,7 @@ export type RightPanelHeaderProps = PanelSlotHeaderProps & {
 export type RightPanelFooterProps = PanelSlotFooterProps;
 /**
  * Title shown in the content header, after `leftSlot`. Visual only — the
- * panel's accessible name comes from `Layout.Content`'s `aria-label`.
+ * panel's accessible name comes from `ContentPanel`'s `aria-label`.
  */
 export type ContentHeaderTitle = PanelHeaderTitle;
 export type ContentHeaderSlotProps = {

package/build/esm/components/Layout/Content/Content.d.ts

@@ -6,8 +6,6 @@ import type { ContentProps } from "../-types";
  * presentation: in-flow in the `content` slot ({@link ContentDocked}) normally,
  * and the mobile split's sliding base layer ({@link ContentSplitBase}) when a
  * `Layout.Split` is stacked over it - so the split pushes content aside instead
- * of just covering it. Either way the content sits in a {@link ContentPanel},
- * so `Layout.ContentHeader` / `Layout.ContentFooter` children stick to the
- * panel edges; the remaining content scrolls.
+ * of just covering it.
  */
 export declare const Content: React.FC<ContentProps>;

package/build/esm/components/Layout/Content/Content.js

@@ -1 +1 @@
-import React from"react";import{Slot}from"../-constants";import{useDeclarePanel}from"../registry";import{ContentSplitBase}from"../Split/MobileSplitView/ContentSplitBase";import{useMobileSplitStack}from"../Split/MobileSplitView/useMobileSplitStack";import{useMobileSplitViewEnabled}from"../Split/MobileSplitView/useMobileSplitView";import{ContentDocked}from"./ContentDocked";import{ContentPanel}from"./ContentPanel";export const Content=({children,...panelProps})=>{useDeclarePanel(Slot.content,{collapsible:!1});let enabled=useMobileSplitViewEnabled(),{host,isSplitPresent}=useMobileSplitStack(),panel=React.createElement(ContentPanel,panelProps,children);return enabled&&isSplitPresent&&null!==host?React.createElement(ContentSplitBase,null,panel):React.createElement(ContentDocked,null,panel)};
+import React from"react";import{Slot}from"../-constants";import{useDeclarePanel}from"../registry";import{ContentSplitBase}from"../Split/MobileSplitView/ContentSplitBase";import{useMobileSplitStack}from"../Split/MobileSplitView/useMobileSplitStack";import{useMobileSplitViewEnabled}from"../Split/MobileSplitView/useMobileSplitView";import{ContentDocked}from"./ContentDocked";export const Content=({children})=>{useDeclarePanel(Slot.content,{collapsible:!1});let enabled=useMobileSplitViewEnabled(),{host,isSplitPresent}=useMobileSplitStack();return enabled&&isSplitPresent&&null!==host?React.createElement(ContentSplitBase,null,children):React.createElement(ContentDocked,null,children)};

package/build/esm/components/Layout/Content/ContentPanel.d.ts

@@ -1,9 +1,7 @@
 import React from "react";
-import type { ContentProps } from "../-types";
+import type { ContentPanelProps } from "../-types";
 /**
- * Frame shared by both `Layout.Content` presentations: the same `Sandwich` every
- * panel scrolls in, so `Layout.ContentHeader` / `Layout.ContentFooter` stick to
- * the edges, without `PanelContainer`'s Container - as with the left panel's
- * layers - so content keeps the layout and stacking it had without one.
+ * Scrollable frame for content headers and footers. Temporarily not mounted by
+ * `Layout.Content` while the accessibility regression in #2043 is unresolved.
  */
-export declare function ContentPanel({ children, background, "aria-label": ariaLabel, scrollContainerRef, onScroll, "data-e2e-test-id": dataE2eTestId, }: ContentProps): React.ReactElement;
+export declare function ContentPanel({ children, background, "aria-label": ariaLabel, scrollContainerRef, onScroll, "data-e2e-test-id": dataE2eTestId, }: ContentPanelProps): React.ReactElement;

package/build/esm/components/Layout/Content/ContentPanel.js

@@ -1 +1 @@
-import React from"react";import styled from"@emotion/styled";import{Sandwich}from"../../Internal/Sandwich/Sandwich";let StyledContentFrame=styled("div",{target:"e168plsf0",label:"StyledContentFrame"})(({theme,background})=>({height:"100%",backgroundColor:"primary"===background?theme.values.color.background.primary.default:"transparent"})),StyledContentFill=styled("div",{target:"e168plsf1",label:"StyledContentFill"})({position:"absolute",inset:0});export function ContentPanel({children,background="transparent","aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId}){return React.createElement(StyledContentFrame,{background:background,role:ariaLabel?"region":void 0,"aria-label":ariaLabel,"data-e2e-test-id":dataE2eTestId},React.createElement(Sandwich,{scrollRef:scrollContainerRef,onScroll:onScroll},React.createElement(StyledContentFill,null,children)))}
+import React from"react";import styled from"@emotion/styled";import{Sandwich}from"../../Internal/Sandwich/Sandwich";let StyledContentFrame=styled("div",{target:"e1spy2ji0",label:"StyledContentFrame"})(({theme,background})=>({height:"100%",backgroundColor:"primary"===background?theme.values.color.background.primary.default:"transparent"})),StyledContentFill=styled("div",{target:"e1spy2ji1",label:"StyledContentFill"})({position:"absolute",inset:0});export function ContentPanel({children,background="transparent","aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId}){return React.createElement(StyledContentFrame,{background:background,role:ariaLabel?"region":void 0,"aria-label":ariaLabel,"data-e2e-test-id":dataE2eTestId},React.createElement(Sandwich,{scrollRef:scrollContainerRef,onScroll:onScroll},React.createElement(StyledContentFill,null,children)))}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amboss/design-system",
-  "version": "4.17.0",
+  "version": "4.18.0",
   "description": "the design system for AMBOSS products",
   "author": "AMBOSS",
   "license": "ISC",