@amboss/design-system 4.9.4-canary.2 → 4.9.4

package/build/esm/components/Layout/BottomBar/LayoutBottomBar.d.ts

@@ -1,9 +0,0 @@
-import { type ReactElement, type ReactNode } from "react";
-import type { ConditionalAccessibleName } from "../../../types/a11y";
-export type LayoutBottomBarProps = ConditionalAccessibleName & {
-    /** Layout.BottomBarItem declarations for the page's actions. */
-    children: ReactNode;
-    /** Identifier applied to the action group. */
-    "data-e2e-test-id"?: string;
-};
-export declare function LayoutBottomBar({ children, "data-e2e-test-id": dataE2eTestId, ...accessibleName }: LayoutBottomBarProps): ReactElement | null;

package/build/esm/components/Layout/BottomBar/LayoutBottomBar.js

@@ -1 +0,0 @@
-import React,{useLayoutEffect}from"react";import{useTheme}from"@emotion/react";import{LayoutPortal}from"../LayoutPortal";import{useLayoutVar}from"../LayoutCssVars";import{BOTTOM_BAR_HEIGHT_VAR,RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR}from"../-constants";import{useLayout}from"../useLayout";import{getBottomBarLayout}from"./getBottomBarLayout";import{StyledLayoutBottomBar}from"./StyledLayoutBottomBar";import{StyledLayoutBottomBarSection}from"./StyledLayoutBottomBarSection";let useGlobalCssVariables=(rowCount,hasRightPanel)=>{let rowHeight=useTheme().variables.layout.bottomBar.contentHeight.default,bottomBarHeightCssVar=useLayoutVar(BOTTOM_BAR_HEIGHT_VAR),rightPanelBottomBarHeightCssVar=useLayoutVar(RIGHT_PANEL_BOTTOM_BAR_HEIGHT_VAR);useLayoutEffect(()=>{if(!rowCount){bottomBarHeightCssVar.remove(),rightPanelBottomBarHeightCssVar.remove();return}bottomBarHeightCssVar.set(`calc(${rowCount} * ${rowHeight} + env(safe-area-inset-bottom))`),rightPanelBottomBarHeightCssVar.set(hasRightPanel?`var(${BOTTOM_BAR_HEIGHT_VAR})`:"0px")},[rowCount,rowHeight,hasRightPanel,bottomBarHeightCssVar,rightPanelBottomBarHeightCssVar])};export function LayoutBottomBar({children,"data-e2e-test-id":dataE2eTestId,...accessibleName}){let{leftPanel,content,splitview,rightPanel}=useLayout(),{sections,cells,rowCount,hasRightPanel}=getBottomBarLayout(children,{leftPanel,content,splitview,rightPanel});return(useGlobalCssVariables(rowCount,hasRightPanel),sections.length)?React.createElement(LayoutPortal,null,React.createElement(StyledLayoutBottomBar,{...accessibleName,role:"group",hasRightPanel:hasRightPanel,cells:cells,hasSplitColumns:"column"===content.presentation&&"column"===splitview.presentation,"data-ds-id":"LayoutBottomBar","data-e2e-test-id":dataE2eTestId},sections.map(section=>React.createElement(StyledLayoutBottomBarSection,{key:section.region,"data-e2e-test-id":section["data-e2e-test-id"],columnIndex:section.columnIndex,rowIndex:section.rowIndex,fullWidth:"full"===section.placement},section.children)))):null}

package/build/esm/components/Layout/BottomBar/LayoutBottomBarItem.d.ts

@@ -1,14 +0,0 @@
-import type { FC, ReactNode } from "react";
-import type { SlotKey } from "../-types";
-export type LayoutBottomBarFallback = "hide" | "remaining" | "full";
-export type LayoutBottomBarItemProps = {
-    /** Layout region whose column the item follows. */
-    region: SlotKey;
-    /** Placement when the region has no column. Defaults to hiding the item. */
-    fallback?: LayoutBottomBarFallback;
-    /** Actions supplied and styled by the consumer. */
-    children: ReactNode;
-    /** Identifier applied to the item's action container. */
-    "data-e2e-test-id"?: string;
-};
-export declare const LayoutBottomBarItem: FC<LayoutBottomBarItemProps>;

package/build/esm/components/Layout/BottomBar/LayoutBottomBarItem.js

@@ -1 +0,0 @@
-export const LayoutBottomBarItem=()=>null;

package/build/esm/components/Layout/BottomBar/StyledLayoutBottomBar.d.ts

@@ -1,11 +0,0 @@
-import type { BottomBarCell } from "./getBottomBarLayout";
-type StyledLayoutBottomBarProps = {
-    hasRightPanel: boolean;
-    hasSplitColumns: boolean;
-    cells: BottomBarCell[];
-};
-export declare const StyledLayoutBottomBar: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & StyledLayoutBottomBarProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export {};

package/build/esm/components/Layout/BottomBar/StyledLayoutBottomBar.js

@@ -1 +0,0 @@
-import styled from"@emotion/styled";import{getBottomBarOuterSpaceStyles}from"./getBottomBarOuterSpaceStyles";import{LAYOUT_REGIONS_READY_VAR,PAGE_BOTTOM_BAR_INSET,PANEL_WIDTH_VAR,PANEL_START_VAR}from"../-constants";let getRegionStart=region=>`var(${PANEL_START_VAR[region]}, 0px)`,getRegionWidth=region=>`var(${PANEL_WIDTH_VAR[region]}, 0px)`,getBottomBarCellWidth=cell=>{switch(cell.kind){case"leading-gap":return getRegionStart(cell.region);case"trailing-gap":return`max(0px, calc(100% - ${getRegionStart(cell.region)} - ${getRegionWidth(cell.region)}))`;case"column-gap":return`max(0px, calc(${getRegionStart(cell.region)} - ${getRegionStart(cell.previousRegion)} - ${getRegionWidth(cell.previousRegion)}))`;case"flexible-gap":return"minmax(0, 1fr)";default:{let{region,placement,fallback}=cell.section;if("remaining"===placement)return"max-content";if(cell.flexible)return"minmax(0, 1fr)";let columnWidth=cell.fillLeadingSpace?`calc(${getRegionWidth(region)} + ${getRegionStart(region)})`:getRegionWidth(region);return"remaining"===fallback?`minmax(max-content, ${columnWidth})`:columnWidth}}};export const StyledLayoutBottomBar=styled("div",{target:"e7hwo8w0",label:"StyledLayoutBottomBar"})(({theme,hasRightPanel,cells})=>({display:"grid",gridTemplateColumns:cells.map(getBottomBarCellWidth).join(" ")||"minmax(0, 1fr)",gridAutoRows:theme.variables.layout.bottomBar.contentHeight.default,alignContent:"start",bottom:0,boxShadow:theme.values.elevation[2],boxSizing:"border-box",height:PAGE_BOTTOM_BAR_INSET,left:0,opacity:`var(${LAYOUT_REGIONS_READY_VAR}, 0)`,paddingBottom:"env(safe-area-inset-bottom)",position:"absolute",right:hasRightPanel?0:`calc(${getRegionWidth("rightPanel")} + min(${getRegionWidth("rightPanel")}, ${theme.variables.size.spacing.xxs}))`,zIndex:theme.variables.zIndex.dropdown}),getBottomBarOuterSpaceStyles);

package/build/esm/components/Layout/BottomBar/StyledLayoutBottomBarSection.d.ts

@@ -1,10 +0,0 @@
-type StyledLayoutBottomBarSectionProps = {
-    columnIndex?: number;
-    rowIndex: number;
-    fullWidth: boolean;
-};
-export declare const StyledLayoutBottomBarSection: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & StyledLayoutBottomBarSectionProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export {};

package/build/esm/components/Layout/BottomBar/StyledLayoutBottomBarSection.js

@@ -1 +0,0 @@
-import styled from"@emotion/styled";export const StyledLayoutBottomBarSection=styled("div",{target:"e4dy5fk0",label:"StyledLayoutBottomBarSection"})(({columnIndex,rowIndex,fullWidth})=>({gridColumn:fullWidth?"1 / -1":(columnIndex??0)+1,gridRow:rowIndex+1,alignItems:"center",boxSizing:"border-box",display:"flex",minWidth:0,whiteSpace:"nowrap"}));

package/build/esm/components/Layout/BottomBar/getBottomBarLayout.d.ts

@@ -1,39 +0,0 @@
-import { type ReactNode } from "react";
-import type { LayoutValue, SlotKey } from "../-types";
-import { type LayoutBottomBarItemProps, type LayoutBottomBarFallback } from "./LayoutBottomBarItem";
-type BottomBarLayout = Pick<LayoutValue, SlotKey>;
-type BottomBarItemMode = "column" | LayoutBottomBarFallback;
-type VisibleSection = LayoutBottomBarItemProps & {
-    placement: Exclude<BottomBarItemMode, "hide">;
-    fallback: LayoutBottomBarFallback;
-};
-type SharedSection = VisibleSection & {
-    placement: "column" | "remaining";
-};
-type ArrangedSection = VisibleSection & {
-    columnIndex?: number;
-    rowIndex: number;
-};
-export type BottomBarCell = {
-    kind: "section";
-    section: SharedSection;
-    flexible: boolean;
-    fillLeadingSpace: boolean;
-} | {
-    kind: "leading-gap" | "trailing-gap";
-    region: SlotKey;
-} | {
-    kind: "column-gap";
-    region: SlotKey;
-    previousRegion: SlotKey;
-} | {
-    kind: "flexible-gap";
-};
-type BottomBarArrangement = {
-    cells: BottomBarCell[];
-    sections: ArrangedSection[];
-    rowCount: number;
-    hasRightPanel: boolean;
-};
-export declare const getBottomBarLayout: (children: ReactNode, layout: BottomBarLayout) => BottomBarArrangement;
-export {};

package/build/esm/components/Layout/BottomBar/getBottomBarLayout.js

@@ -1 +0,0 @@
-import{Children,isValidElement}from"react";import{PANEL_ORDER}from"../-constants";import{LayoutBottomBarItem}from"./LayoutBottomBarItem";let getBottomBarItemMode=({region,fallback,layout})=>{let handle=layout[region];return"column"===handle.presentation?"column":("leftPanel"!==region||"sidebar"!==layout.leftPanel.state.variant)&&("rightPanel"!==region||"sidebar"!==layout.rightPanel.state.variant)||handle.isVisible||null===handle.animation?fallback:"column"},getVisibleSections=(children,layout)=>Children.toArray(children).flatMap(child=>{if(!isValidElement(child)||child.type!==LayoutBottomBarItem||null==child.props.children||!1===child.props.children)return[];let{region,fallback="hide"}=child.props,placement=getBottomBarItemMode({region,fallback,layout});return"hide"===placement?[]:[{...child.props,placement,fallback}]}),shouldPreserveSplitColumnWidth=sections=>{let hasLeftFallback=sections.some(({region,fallback})=>"leftPanel"===region&&"remaining"===fallback),hasContentColumn=sections.some(({region,placement})=>"content"===region&&"column"===placement),hasSplitColumn=sections.some(({region,placement})=>"splitview"===region&&"column"===placement),hasRightFallback=sections.some(({region,fallback})=>"rightPanel"===region&&"remaining"===fallback);return hasLeftFallback&&hasContentColumn&&hasSplitColumn&&!hasRightFallback},getSharedRowCells=(sections,layout)=>{if(!sections.length)return[];let firstSection=sections[0],lastSection=sections[sections.length-1],hasRemainingActions=sections.some(({fallback})=>"remaining"===fallback),preserveSplitColumn=shouldPreserveSplitColumnWidth(sections),fillLeadingSpace="column"===firstSection.placement&&("content"===firstSection.region||"splitview"===firstSection.region)&&"column"!==layout.leftPanel.presentation,flexibleColumns={leftPanel:!1,content:hasRemainingActions,splitview:hasRemainingActions&&!preserveSplitColumn,rightPanel:!1},hasFlexibleColumn=sections.some(({region,placement})=>"column"===placement&&flexibleColumns[region]),needsFlexibleGap=hasRemainingActions&&!hasFlexibleColumn,rightActions=sections.find(({region})=>"rightPanel"===region);return[..."column"!==firstSection.placement||fillLeadingSpace?[]:[{kind:"leading-gap",region:firstSection.region}],...sections.flatMap((section,index)=>{let previousSection=sections[index-1];return[..."column"===section.placement&&previousSection?.placement==="column"?[{kind:"column-gap",region:section.region,previousRegion:previousSection.region}]:[],...needsFlexibleGap&&section===rightActions?[{kind:"flexible-gap"}]:[],{kind:"section",section,flexible:flexibleColumns[section.region],fillLeadingSpace:section===firstSection&&fillLeadingSpace&&!hasRemainingActions}]}),...!hasRemainingActions||preserveSplitColumn?[{kind:"trailing-gap",region:lastSection.region}]:[],...needsFlexibleGap&&!rightActions?[{kind:"flexible-gap"}]:[]]};export const getBottomBarLayout=(children,layout)=>{let sections=getVisibleSections(children,layout),sharedSections=PANEL_ORDER.flatMap(region=>sections.filter(section=>section.region===region&&"full"!==section.placement)),fullWidthSections=sections.filter(({placement})=>"full"===placement),sharedRowCount=+!!sharedSections.length,cells=getSharedRowCells(sharedSections,layout);return{cells,sections:[...cells.flatMap((cell,column)=>"section"===cell.kind?[{...cell.section,columnIndex:column,rowIndex:0}]:[]),...fullWidthSections.map((section,row)=>({...section,rowIndex:sharedRowCount+row}))],rowCount:sharedRowCount+fullWidthSections.length,hasRightPanel:sections.some(({region})=>"rightPanel"===region)}};

package/build/esm/components/Layout/BottomBar/getBottomBarOuterSpaceStyles.d.ts

@@ -1,14 +0,0 @@
-import type { CSSObject, Theme } from "@emotion/react";
-import type { BottomBarCell } from "./getBottomBarLayout";
-type BottomBarOuterSpaceStylesOptions = {
-    theme: Theme;
-    hasRightPanel: boolean;
-    hasSplitColumns: boolean;
-    cells: BottomBarCell[];
-};
-/**
- * Fills the side margins left by the content/split max-width in the first row.
- * Region gaps stay transparent; action sizing and placement are unaffected.
- */
-export declare const getBottomBarOuterSpaceStyles: ({ theme, hasRightPanel, hasSplitColumns, cells, }: BottomBarOuterSpaceStylesOptions) => CSSObject;
-export {};

package/build/esm/components/Layout/BottomBar/getBottomBarOuterSpaceStyles.js

@@ -1 +0,0 @@
-import{PANEL_START_VAR,PANEL_WIDTH_VAR}from"../-constants";let getRegionEnd=region=>`calc(var(${PANEL_START_VAR[region]}, 0px) + var(${PANEL_WIDTH_VAR[region]}, 0px))`,hasColumnActions=(cells,region)=>cells.some(cell=>"section"===cell.kind&&cell.section.region===region&&"column"===cell.section.placement);export const getBottomBarOuterSpaceStyles=({theme,hasRightPanel,hasSplitColumns,cells})=>{let leftPanelEnd=getRegionEnd("leftPanel"),splitEnd=getRegionEnd("splitview"),rightPanelWidth=`var(${PANEL_WIDTH_VAR.rightPanel}, 0px)`,rightPanelGap=`min(${rightPanelWidth}, ${theme.variables.size.spacing.xxs})`,contentAreaEnd=hasRightPanel?`calc(100% - ${rightPanelWidth} - ${rightPanelGap})`:"100%";return{"&::before, &::after":{position:"absolute",top:0,height:theme.variables.layout.bottomBar.contentHeight.default,backgroundColor:theme.values.color.background.primary.default,pointerEvents:"none",zIndex:-1},"&::before":{content:hasSplitColumns&&hasColumnActions(cells,"content")?'""':"none",left:leftPanelEnd,width:`max(0px, calc(var(${PANEL_START_VAR.content}, 0px) - ${leftPanelEnd}))`},"&::after":{content:hasSplitColumns&&hasColumnActions(cells,"splitview")?'""':"none",left:splitEnd,width:`max(0px, calc(${contentAreaEnd} - ${splitEnd}))`}}};

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

@@ -1,7 +0,0 @@
-import type { ReactNode } from "react";
-type LayoutPortalProps = {
-    /** Content rendered at the nearest Layout root. */
-    children: ReactNode;
-};
-export declare function LayoutPortal({ children }: LayoutPortalProps): ReactNode;
-export {};

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

@@ -1 +0,0 @@
-import{useLayoutPortal}from"./registry";export function LayoutPortal({children}){return useLayoutPortal("root",children)}

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

@@ -1,12 +0,0 @@
-import type { SlotKey, PanelAnimation } from "./-types";
-type Animations = Partial<Record<SlotKey, PanelAnimation | null>>;
-type PanelAnimationsStore = {
-    getSnapshot: () => Animations;
-    subscribe: (listener: () => void) => () => void;
-    set: (slot: SlotKey, animation: PanelAnimation | null) => void;
-};
-export declare const PanelAnimationsProvider: React.Provider<PanelAnimationsStore | null>;
-export declare const usePanelAnimationsStore: () => PanelAnimationsStore | null;
-export declare const createPanelAnimationsStore: () => PanelAnimationsStore;
-export declare const usePanelAnimations: () => Animations;
-export {};

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

@@ -1 +0,0 @@
-import{createContext,useContext,useSyncExternalStore}from"react";let EMPTY={},NOOP_SUBSCRIBE=()=>()=>{},Context=createContext(null);export const PanelAnimationsProvider=Context.Provider;export const usePanelAnimationsStore=()=>useContext(Context);export const createPanelAnimationsStore=()=>{let snapshot={},listeners=new Set;return{getSnapshot:()=>snapshot,subscribe:listener=>(listeners.add(listener),()=>{listeners.delete(listener)}),set:(slot,animation)=>{(snapshot[slot]??null)!==animation&&(snapshot={...snapshot,[slot]:animation},listeners.forEach(listener=>listener()))}}};export const usePanelAnimations=()=>{let store=usePanelAnimationsStore();return useSyncExternalStore(store?.subscribe??NOOP_SUBSCRIBE,store?.getSnapshot??(()=>EMPTY),()=>EMPTY)};