@amboss/design-system 4.18.0 → 4.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/components/Layout/-constants.d.ts +2 -2
- package/build/cjs/components/Layout/Split/SplitDocked.d.ts +4 -3
- package/build/cjs/components/Layout/Split/SplitDocked.js +1 -1
- package/build/esm/components/Layout/-constants.d.ts +2 -2
- package/build/esm/components/Layout/Split/SplitDocked.d.ts +4 -3
- package/build/esm/components/Layout/Split/SplitDocked.js +1 -1
- package/package.json +1 -1
|
@@ -33,8 +33,8 @@ export declare const LEFT_BAR_BUTTON_INSET: BarButtonInset;
|
|
|
33
33
|
export type TogglableSlotKey = Exclude<SlotKey, typeof Slot.content>;
|
|
34
34
|
/** Slots the app opens/closes, in `PANEL_ORDER`. */
|
|
35
35
|
export declare const TOGGLABLE_SLOTS: TogglableSlotKey[];
|
|
36
|
-
/** Vertical offset for the right panel — set this (e.g.
|
|
37
|
-
* height) and
|
|
36
|
+
/** Vertical offset for the docked right panel and split view — set this (e.g.
|
|
37
|
+
* to a sticky subnav's height) and both track it; defaults to `0` when unset. */
|
|
38
38
|
export declare const SUBNAV_OFFSET_VAR: "--ds-layout-subnav-offset";
|
|
39
39
|
/** Widest `Layout.Content` and `Layout.Split` may grow to *together* while the
|
|
40
40
|
* split is open; past it they stay centred with space either side. Defaults
|
|
@@ -2,8 +2,9 @@ import React from "react";
|
|
|
2
2
|
import type { SplitProps } from "../-types";
|
|
3
3
|
/**
|
|
4
4
|
* Desktop split view. Declares the `splitview` slot and portals its content
|
|
5
|
-
* while visible - the right-hand half of `Layout.Content`'s column.
|
|
6
|
-
*
|
|
7
|
-
*
|
|
5
|
+
* while visible - the right-hand half of `Layout.Content`'s column. Content
|
|
6
|
+
* tracks the `--ds-layout-subnav-offset` var, so an expanded subnav never
|
|
7
|
+
* covers the panel's top edge. `Layout.SplitHeader` / `Layout.SplitFooter`
|
|
8
|
+
* children stick to the panel edges; the remaining content scrolls.
|
|
8
9
|
*/
|
|
9
10
|
export declare const SplitDocked: React.FC<SplitProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"SplitDocked",{enumerable:!0,get:function(){return SplitDocked}});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"SplitDocked",{enumerable:!0,get:function(){return SplitDocked}});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")),_constants=require("../-constants"),_registry=require("../registry"),_useLayout=require("../useLayout"),_PanelContainer=require("../PanelContainer"),StyledSplitSlot=(0,_styled.default)("div",{target:"e1ldbp5v0",label:"StyledSplitSlot"})(({theme})=>({position:"absolute",right:0,left:0,bottom:0,top:`var(${_constants.SUBNAV_OFFSET_VAR}, 0px)`,overflow:"hidden",transition:`top ${theme.variables.animation.navSlide.open.duration} ${theme.variables.animation.navSlide.open.timingFunction}`})),SplitDocked=({children,background,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isVisible}=(0,_useLayout.useLayout)()[_constants.Slot.splitview];return(0,_registry.useDeclarePanel)(_constants.Slot.splitview,{}),(0,_registry.useLayoutPortal)(_constants.Slot.splitview,isVisible?_react.default.createElement(StyledSplitSlot,null,_react.default.createElement(_PanelContainer.PanelContainer,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children)):null)};
|
|
@@ -33,8 +33,8 @@ export declare const LEFT_BAR_BUTTON_INSET: BarButtonInset;
|
|
|
33
33
|
export type TogglableSlotKey = Exclude<SlotKey, typeof Slot.content>;
|
|
34
34
|
/** Slots the app opens/closes, in `PANEL_ORDER`. */
|
|
35
35
|
export declare const TOGGLABLE_SLOTS: TogglableSlotKey[];
|
|
36
|
-
/** Vertical offset for the right panel — set this (e.g.
|
|
37
|
-
* height) and
|
|
36
|
+
/** Vertical offset for the docked right panel and split view — set this (e.g.
|
|
37
|
+
* to a sticky subnav's height) and both track it; defaults to `0` when unset. */
|
|
38
38
|
export declare const SUBNAV_OFFSET_VAR: "--ds-layout-subnav-offset";
|
|
39
39
|
/** Widest `Layout.Content` and `Layout.Split` may grow to *together* while the
|
|
40
40
|
* split is open; past it they stay centred with space either side. Defaults
|
|
@@ -2,8 +2,9 @@ import React from "react";
|
|
|
2
2
|
import type { SplitProps } from "../-types";
|
|
3
3
|
/**
|
|
4
4
|
* Desktop split view. Declares the `splitview` slot and portals its content
|
|
5
|
-
* while visible - the right-hand half of `Layout.Content`'s column.
|
|
6
|
-
*
|
|
7
|
-
*
|
|
5
|
+
* while visible - the right-hand half of `Layout.Content`'s column. Content
|
|
6
|
+
* tracks the `--ds-layout-subnav-offset` var, so an expanded subnav never
|
|
7
|
+
* covers the panel's top edge. `Layout.SplitHeader` / `Layout.SplitFooter`
|
|
8
|
+
* children stick to the panel edges; the remaining content scrolls.
|
|
8
9
|
*/
|
|
9
10
|
export declare const SplitDocked: React.FC<SplitProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import{Slot}from"../-constants";import{useDeclarePanel,useLayoutPortal}from"../registry";import{useLayout}from"../useLayout";import{PanelContainer}from"../PanelContainer";export const SplitDocked=({children,background,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isVisible}=useLayout()[Slot.splitview];return useDeclarePanel(Slot.splitview,{}),useLayoutPortal(Slot.splitview,isVisible?React.createElement(PanelContainer,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children):null)};
|
|
1
|
+
import React from"react";import styled from"@emotion/styled";import{Slot,SUBNAV_OFFSET_VAR}from"../-constants";import{useDeclarePanel,useLayoutPortal}from"../registry";import{useLayout}from"../useLayout";import{PanelContainer}from"../PanelContainer";let StyledSplitSlot=styled("div",{target:"e1ldbp5v0",label:"StyledSplitSlot"})(({theme})=>({position:"absolute",right:0,left:0,bottom:0,top:`var(${SUBNAV_OFFSET_VAR}, 0px)`,overflow:"hidden",transition:`top ${theme.variables.animation.navSlide.open.duration} ${theme.variables.animation.navSlide.open.timingFunction}`}));export const SplitDocked=({children,background,"aria-label":ariaLabel,scrollContainerRef,onScroll,"data-e2e-test-id":dataE2eTestId})=>{let{isVisible}=useLayout()[Slot.splitview];return useDeclarePanel(Slot.splitview,{}),useLayoutPortal(Slot.splitview,isVisible?React.createElement(StyledSplitSlot,null,React.createElement(PanelContainer,{background:background,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,"data-e2e-test-id":dataE2eTestId},children)):null)};
|