@amboss/design-system 4.6.7-canary.0 → 4.7.0

package/build/esm/components/Layout/LeftPanel/LeftBarLayers.d.ts

@@ -1,45 +0,0 @@
-import React from "react";
-import type { CSSObject, Theme } from "@emotion/react";
-import type { ForwardedScrollProps } from "../-types";
-/**
- * The box the layers live in: one surface, one divider, and a clip. Shared by
- * the two presentations that carry a left bar - the in-row column and the offcanvas
- * overlay - which differ only in how they are positioned and sized.
- *
- * The surface is painted here, once and constantly, so nothing new appears
- * mid-collapse: were each layer to paint its own, fading the panel's would only
- * uncover the left bar's, identical and full-width, and the dissolve would reveal
- * nothing.
- *
- * The divider is overlaid on the trailing edge rather than declared as a border,
- * so it costs the box no width - the left bar's leading column and the header's
- * trailing button are placed against the full width, and a border would put them
- * half a pixel out.
- */
-export declare const getLeftBarColumnStyles: (theme: Theme) => CSSObject;
-/**
- * Where the box's top edge sits: below a sticky subnav, by the offset the subnav
- * publishes, and at the host's top when no subnav is mounted. The edge moves
- * with the subnav, so the transition is the one the subnav slides with, and
- * the two travel as one. `RightPanelDocked` tracks the same var the same way,
- * so the two side panels stay level.
- */
-export declare const LEFT_BAR_TOP_INSET: string;
-export declare const getLeftBarTopTransition: (theme: Theme) => string;
-export type LeftBarLayersProps = ForwardedScrollProps & {
-    children: React.ReactNode;
-    isVisible: boolean;
-    /** Width the panel's content holds on to while the box is narrower. */
-    openWidth: string;
-    /** Accessible name for the left bar's open button. */
-    toggleButtonLabel: string;
-    "aria-label"?: string;
-};
-/**
- * The left bar and the panel, stacked in one box. Whichever of the two is showing,
- * the box's width alone does the animating: content and footer hold `openWidth`
- * and are clipped as it narrows, so nothing in them moves, while the header is
- * left to narrow with the box - which walks its trailing control down into the
- * left bar.
- */
-export declare const LeftBarLayers: React.FC<LeftBarLayersProps>;

package/build/esm/components/Layout/LeftPanel/LeftBarLayers.js

@@ -1 +0,0 @@
-import React,{useEffect,useMemo,useRef,useState}from"react";import styled from"@emotion/styled";import{useDocument}from"../../../shared/useDocument";import{getLeftPanelFadeStyles}from"../../../shared/mixins";import{SUBNAV_OFFSET_VAR}from"../-constants";import{Sandwich}from"../../Internal/Sandwich/Sandwich";import{useLeftPanelId}from"../useLeftPanelId";import{LeftPanelCollapseProvider}from"./useLeftPanelCollapseContext";import{LeftBarProvider}from"./useLeftBarContext";import{LeftBarToggle}from"./LeftBarToggle";export const getLeftBarColumnStyles=theme=>({overflow:"hidden",backgroundColor:theme.values.color.background.primary.default,"&::after":{content:'""',position:"absolute",top:0,bottom:0,right:0,width:1,backgroundColor:theme.values.color.border.secondary.default}});export const LEFT_BAR_TOP_INSET=`var(${SUBNAV_OFFSET_VAR}, 0px)`;export const getLeftBarTopTransition=theme=>{let{duration,timingFunction}=theme.variables.animation.navSlide.open;return`top ${duration} ${timingFunction}`};let StyledLeftBarLayer=styled("div",{target:"e1oedn8k0",label:"StyledLeftBarLayer"})(({isPanelOpen})=>({position:"absolute",inset:0,display:"flex",flexDirection:"column",visibility:isPanelOpen?"hidden":"visible"})),StyledNavBarSlot=styled("div",{target:"e1oedn8k1",label:"StyledNavBarSlot"})({flex:"1 1 auto",minHeight:0}),StyledPanelLayer=styled("div",{target:"e1oedn8k2",label:"StyledPanelLayer"})(({theme,isPanelOpen})=>{let{duration}=theme.variables.animation.navSlide.collapse;return{position:"absolute",inset:0,overflow:"hidden",visibility:isPanelOpen?"visible":"hidden",transition:isPanelOpen?"none":`visibility 0s linear ${duration}`,"@media (prefers-reduced-motion: reduce)":{transition:"none"}}}),StyledFadingContent=styled("div",{target:"e1oedn8k3",label:"StyledFadingContent"})(({theme,isFaded,pinnedContentWidth})=>({display:"flex",flexDirection:"column",flex:"1 0 auto",minWidth:pinnedContentWidth,...getLeftPanelFadeStyles({theme,isFaded})})),handOverFocus=({document,from,to})=>{from&&to&&from.contains(document.activeElement)&&to.focus()};export const LeftBarLayers=({children,isVisible,openWidth,toggleButtonLabel,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let leftPanelId=useLeftPanelId(),document=useDocument(),leftBarLayerRef=useRef(null),panelLayerRef=useRef(null),toggleRef=useRef(null),[leftBarSlotNode,setLeftBarSlotNode]=useState(null),leftBarSlot=useMemo(()=>({slotNode:leftBarSlotNode}),[leftBarSlotNode]),isContentFaded=!isVisible,collapseState=useMemo(()=>({isContentFaded,pinnedContentWidth:openWidth}),[isContentFaded,openWidth]),wasVisible=useRef(isVisible);return useEffect(()=>{isVisible!==wasVisible.current&&(wasVisible.current=isVisible,handOverFocus({document,from:isVisible?leftBarLayerRef.current:panelLayerRef.current,to:isVisible?panelLayerRef.current:toggleRef.current}))},[isVisible,document]),React.createElement(LeftBarProvider,{value:leftBarSlot},React.createElement(StyledLeftBarLayer,{isPanelOpen:isVisible,ref:leftBarLayerRef},React.createElement(LeftBarToggle,{"aria-label":toggleButtonLabel,buttonRef:toggleRef}),React.createElement(StyledNavBarSlot,{ref:setLeftBarSlotNode})),React.createElement(StyledPanelLayer,{ref:panelLayerRef,isPanelOpen:isVisible,id:leftPanelId,tabIndex:-1,role:ariaLabel?"region":void 0,"aria-label":ariaLabel},React.createElement(Sandwich,{hideScrollbar:!0,scrollRef:scrollContainerRef,onScroll:onScroll},React.createElement(LeftPanelCollapseProvider,{value:collapseState},React.createElement(StyledFadingContent,{isFaded:isContentFaded,pinnedContentWidth:openWidth},children)))))};

package/build/esm/components/Layout/LeftPanel/LeftBarToggle.d.ts

@@ -1,15 +0,0 @@
-import React from "react";
-export type LeftBarToggleProps = {
-    /** Accessible name for the button, which is icon-only. */
-    "aria-label"?: string;
-    /** Handed out so the layer above can put focus here when the panel closes -
-     *  this is the control that replaces the one the panel is taking away. */
-    buttonRef?: React.Ref<HTMLButtonElement>;
-};
-/**
- * The one control the left bar always carries: the button that opens the panel
- * back up. It belongs to the bar rather than to `Layout.LeftNavBar` - which only
- * adds content beneath it - because a panel that authored no nav bar would
- * otherwise close to a strip with no way back out of it.
- */
-export declare function LeftBarToggle({ "aria-label": ariaLabel, buttonRef, }: LeftBarToggleProps): React.ReactElement;

package/build/esm/components/Layout/LeftPanel/LeftBarToggle.js

@@ -1 +0,0 @@
-import React from"react";import{Box}from"../../Box/Box";import{PictogramButton}from"../../PictogramButton/PictogramButton";import{Slot}from"../-constants";import{useLayout}from"../useLayout";import{useLeftPanelId}from"../useLeftPanelId";export function LeftBarToggle({"aria-label":ariaLabel,buttonRef}){let{show,isVisible}=useLayout()[Slot.leftPanel],leftPanelId=useLeftPanelId();return React.createElement(Box,{space:"s",vSpace:"xs"},React.createElement(PictogramButton,{ref:buttonRef,icon:"open-sidebar-left",size:"s",onClick:show,"aria-label":ariaLabel,"aria-controls":leftPanelId,"aria-expanded":isVisible}))}

package/build/esm/components/Layout/LeftPanel/LeftPanelOffcanvas.d.ts

@@ -1,29 +0,0 @@
-import React from "react";
-import type { ForwardedScrollProps } from "../-types";
-export type LeftPanelOffcanvasProps = ForwardedScrollProps & {
-    children: React.ReactNode;
-    /** Accessible name for the left bar's open button. */
-    toggleButtonLabel: string;
-    isVisible: boolean;
-    hide: () => void;
-    openWidth: string;
-    "aria-label"?: string;
-};
-/**
- * Left panel as a non-modal overlay: a drawer without the dialog. Used when the
- * docked budget has no column left but the panel should stay reachable - it
- * opens over the row instead of taking a column from it, and instead of being
- * hidden outright. The left bar stays on screen throughout; only the mobile drawer
- * gives it up.
- *
- * Deliberately not a {@link Drawer}: a Drawer traps focus, claims `aria-modal`
- * and covers the viewport with a click-catching layer. Here the page behind
- * stays live and usable, so the panel is a plain `region` (named by
- * `aria-label`) that happens to be layered - nothing about it is modal.
- *
- * It still dismisses like something laid over the page, because that is what it
- * is: Escape and a click beyond its edge both close it back to its left bar. Only
- * while it is open - closed, it is just the left bar, and the left bar is not something
- * to dismiss.
- */
-export declare const LeftPanelOffcanvas: React.FC<LeftPanelOffcanvasProps>;

package/build/esm/components/Layout/LeftPanel/LeftPanelOffcanvas.js

@@ -1 +0,0 @@
-import React,{useRef}from"react";import styled from"@emotion/styled";import{useTheme}from"@emotion/react";import{LEFT_BAR_TOP_INSET,LeftBarLayers,getLeftBarColumnStyles,getLeftBarTopTransition}from"./LeftBarLayers";import{PAGE_BOTTOM_BAR_INSET,Slot}from"../-constants";import{useDeclarePanel}from"../registry";import{useOnEscapePress}from"../../../shared/useOnEscapePress";import{useOutsideClick}from"../../../shared/useOutsideClick";let getOffcanvasBoxStyles=(theme,{isVisible,leftBarWidth,openWidth})=>({position:"absolute",left:0,top:LEFT_BAR_TOP_INSET,bottom:PAGE_BOTTOM_BAR_INSET,zIndex:1,width:isVisible?openWidth:leftBarWidth}),StyledOffcanvasShadow=styled("div",{target:"exeyzov0",label:"StyledOffcanvasShadow"})(({theme,...box})=>{let{duration,timingFunction}=theme.variables.animation.navSlide.collapse;return{...getOffcanvasBoxStyles(theme,box),pointerEvents:"none",boxShadow:theme.values.elevation[2],opacity:box.isVisible?theme.variables.opacity.visible:theme.variables.opacity.hidden,transition:[`width ${duration} ${timingFunction}`,`opacity ${duration} ${timingFunction}`,getLeftBarTopTransition(theme)].join(", "),"@media (prefers-reduced-motion: reduce)":{transition:"none"}}}),StyledOffcanvasColumn=styled("div",{target:"exeyzov1",label:"StyledOffcanvasColumn"})(({theme,...box})=>{let{duration,timingFunction}=theme.variables.animation.navSlide.collapse;return{...getOffcanvasBoxStyles(theme,box),transition:[`width ${duration} ${timingFunction}`,getLeftBarTopTransition(theme)].join(", "),"@media (prefers-reduced-motion: reduce)":{transition:"none"},...getLeftBarColumnStyles(theme)}});export const LeftPanelOffcanvas=({children,toggleButtonLabel,isVisible,hide,openWidth,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let theme=useTheme();useDeclarePanel(Slot.leftPanel,{});let columnRef=useRef(null);useOnEscapePress(event=>{isVisible&&(event.preventDefault(),hide())},[isVisible,hide]),useOutsideClick(columnRef,hide,isVisible);let box={isVisible,leftBarWidth:theme.variables.size.dimension.leftNavBar.width,openWidth};return React.createElement(React.Fragment,null,React.createElement(StyledOffcanvasShadow,{...box,"aria-hidden":!0}),React.createElement(StyledOffcanvasColumn,{...box,ref:columnRef},React.createElement(LeftBarLayers,{isVisible:isVisible,toggleButtonLabel:toggleButtonLabel,openWidth:openWidth,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)))};

package/build/esm/components/Layout/LeftPanel/useLeftBarContext.d.ts

@@ -1,11 +0,0 @@
-export type LeftBarSlot = {
-    /** Static host the left bar's content portals into. Null until the layer
-     *  behind the panel has mounted, and never provided at all by the
-     *  presentations that carry no left bar - which is how `Layout.LeftNavBar`
-     *  knows to render nothing on mobile, where the drawer shows the panel's own
-     *  content alone. */
-    slotNode: HTMLElement | null;
-};
-export declare const LeftBarProvider: React.Provider<LeftBarSlot>;
-/** The left bar slot behind the left panel, if this presentation has one. */
-export declare function useLeftBarContext(): LeftBarSlot;

package/build/esm/components/Layout/LeftPanel/useLeftBarContext.js

@@ -1 +0,0 @@
-import{createContext,useContext}from"react";let LeftBarContext=createContext({slotNode:null});export const LeftBarProvider=LeftBarContext.Provider;export function useLeftBarContext(){return useContext(LeftBarContext)}

package/build/esm/components/Layout/LeftPanel/useLeftPanelCollapseContext.d.ts

@@ -1,11 +0,0 @@
-/** How the left panel's parts have to behave while its column narrows to a left bar. */
-export type LeftPanelCollapseState = {
-    /** The content is dissolving into the left bar beneath it. */
-    isContentFaded: boolean;
-    /** Width the content holds on to while the column narrows around it, clipped
-     *  at the column's edge so nothing inside reflows on the way down. */
-    pinnedContentWidth?: string;
-};
-export declare const LeftPanelCollapseProvider: React.Provider<LeftPanelCollapseState>;
-/** How the left panel's parts have to behave while its column narrows. */
-export declare function useLeftPanelCollapseContext(): LeftPanelCollapseState;

package/build/esm/components/Layout/LeftPanel/useLeftPanelCollapseContext.js

@@ -1 +0,0 @@
-import{createContext,useContext}from"react";let LeftPanelCollapseContext=createContext({isContentFaded:!1});export const LeftPanelCollapseProvider=LeftPanelCollapseContext.Provider;export function useLeftPanelCollapseContext(){return useContext(LeftPanelCollapseContext)}

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

@@ -1,6 +0,0 @@
-/** DOM id of the rendered left panel, generated once per `Layout`. Lets a
- *  control living OUTSIDE the panel - the nav left bar's open button - point
- *  `aria-controls` at it without the two components knowing each other. Empty
- *  outside a `Layout`, where there is no panel to reference. */
-export declare const LeftPanelIdContext: React.Context<string>;
-export declare const useLeftPanelId: () => string;

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

@@ -1 +0,0 @@
-import{createContext,useContext}from"react";export const LeftPanelIdContext=createContext("");export const useLeftPanelId=()=>useContext(LeftPanelIdContext);

package/build/esm/shared/mixins/getLeftPanelFadeStyles.d.ts

@@ -1,19 +0,0 @@
-import type { CSSObject, Theme } from "@emotion/react";
-type PanelContentFadeOptions = {
-    theme: Theme;
-    /** Whether the content is currently faded out. */
-    isFaded: boolean;
-};
-/**
- * Fades a docked panel's content out across its collapse, and back in at once
- * when it reopens - the panel covers the left bar the instant it is shown, so
- * there is nothing to reveal on the way in.
- *
- * Runs on the column's own slide timing, so the two move together.
- *
- * Applied per part rather than to the whole panel: a control at the header's
- * trailing edge travels down onto the left bar's own and has to stay solid the
- * whole way, so it is left out.
- */
-export declare function getLeftPanelFadeStyles({ theme, isFaded, }: PanelContentFadeOptions): CSSObject;
-export {};

package/build/esm/shared/mixins/getLeftPanelFadeStyles.js

@@ -1 +0,0 @@
-export function getLeftPanelFadeStyles({theme,isFaded}){let{duration,timingFunction}=theme.variables.animation.navSlide.collapse;return{opacity:isFaded?theme.variables.opacity.hidden:theme.variables.opacity.visible,transition:isFaded?`opacity ${duration} ${timingFunction}`:"none","@media (prefers-reduced-motion: reduce)":{transition:"none"}}}