@amboss/design-system 4.5.1 → 4.6.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/BulkActionsToolbar/BulkActionsToolbar.js +1 -1
- package/build/cjs/components/DataTable/DataTable.d.ts +18 -8
- package/build/cjs/components/DataTable/DataTable.js +1 -1
- package/build/cjs/components/DataTable/DataTableToolbar/DataTableToolbar.d.ts +97 -0
- package/build/cjs/components/DataTable/DataTableToolbar/DataTableToolbar.js +1 -0
- package/build/cjs/components/DataTable/TableCell.js +1 -1
- package/build/cjs/components/DataTable/TableColumnGroups.d.ts +15 -0
- package/build/cjs/components/DataTable/TableColumnGroups.js +1 -0
- package/build/cjs/components/DataTable/header/DataTableHeaderLabel.d.ts +28 -0
- package/build/cjs/components/DataTable/header/DataTableHeaderLabel.js +1 -0
- package/build/cjs/components/DataTable/header/TableHeader.js +1 -1
- package/build/cjs/components/DataTable/index.d.ts +1 -1
- package/build/cjs/components/DataTable/internal/buildColumnSegments.d.ts +18 -0
- package/build/cjs/components/DataTable/internal/buildColumnSegments.js +1 -0
- package/build/cjs/components/DataTable/internal/buildInternalColumns.d.ts +2 -2
- package/build/cjs/components/DataTable/internal/buildInternalColumns.js +1 -1
- package/build/cjs/components/DataTable/internal/getColumnSticky.js +1 -1
- package/build/cjs/components/DataTable/internal/types.d.ts +7 -2
- package/build/cjs/components/DataTable/isDataTableColumnGroup.d.ts +2 -0
- package/build/cjs/components/DataTable/isDataTableColumnGroup.js +1 -0
- package/build/cjs/components/DataTable/types.d.ts +52 -8
- package/build/cjs/components/DataTable/useDataTableSort.d.ts +4 -4
- package/build/cjs/components/DataTable/useDataTableSort.js +1 -1
- package/build/cjs/components/FilterToolbar/FilterToolbar.d.ts +103 -0
- package/build/cjs/components/FilterToolbar/FilterToolbar.js +1 -0
- package/build/cjs/components/Internal/Panel/Panel.d.ts +22 -1
- package/build/cjs/components/Internal/Panel/Panel.js +1 -1
- package/build/cjs/components/Internal/ToolbarItemCount/ToolbarItemCount.d.ts +16 -0
- package/build/cjs/components/Internal/ToolbarItemCount/ToolbarItemCount.js +1 -0
- package/build/cjs/components/Kbd/Kbd.d.ts +118 -0
- package/build/cjs/components/Kbd/Kbd.js +1 -0
- package/build/cjs/components/KbdGroup/KbdGroup.d.ts +7 -0
- package/build/cjs/components/KbdGroup/KbdGroup.js +1 -0
- package/build/cjs/components/Layout/-types.d.ts +6 -1
- package/build/cjs/components/Layout/Layout.js +1 -1
- package/build/cjs/components/Layout/LeftPanel/LeftPanelDocked.js +1 -1
- package/build/cjs/components/Layout/RightPanel/RightPanel.js +1 -1
- package/build/cjs/components/Layout/registry.d.ts +4 -0
- package/build/cjs/components/Layout/registry.js +1 -1
- package/build/cjs/components/Layout/usePanelDockedSlide.d.ts +4 -1
- package/build/cjs/components/Layout/usePanelDockedSlide.js +1 -1
- package/build/cjs/components/Tooltip/BaseTooltip.js +1 -1
- package/build/cjs/components/Tooltip/Tooltip.d.ts +3 -1
- package/build/cjs/components/Tooltip/Tooltip.js +1 -1
- package/build/cjs/index.d.ts +1 -0
- package/build/cjs/index.js +1 -1
- package/build/cjs/shared/useIsMacOs.d.ts +1 -0
- package/build/cjs/shared/useIsMacOs.js +1 -0
- package/build/cjs/web-tokens/_colors.json +26 -0
- package/build/cjs/web-tokens/_sizes.json +10 -0
- package/build/cjs/web-tokens/visualConfig.d.ts +25 -0
- package/build/cjs/web-tokens/visualConfig.js +1 -1
- package/build/esm/components/BulkActionsToolbar/BulkActionsToolbar.js +1 -1
- package/build/esm/components/DataTable/DataTable.d.ts +18 -8
- package/build/esm/components/DataTable/DataTable.js +1 -1
- package/build/esm/components/DataTable/DataTableToolbar/DataTableToolbar.d.ts +97 -0
- package/build/esm/components/DataTable/DataTableToolbar/DataTableToolbar.js +1 -0
- package/build/esm/components/DataTable/TableCell.js +1 -1
- package/build/esm/components/DataTable/TableColumnGroups.d.ts +15 -0
- package/build/esm/components/DataTable/TableColumnGroups.js +1 -0
- package/build/esm/components/DataTable/header/DataTableHeaderLabel.d.ts +28 -0
- package/build/esm/components/DataTable/header/DataTableHeaderLabel.js +1 -0
- package/build/esm/components/DataTable/header/TableHeader.js +1 -1
- package/build/esm/components/DataTable/index.d.ts +1 -1
- package/build/esm/components/DataTable/internal/buildColumnSegments.d.ts +18 -0
- package/build/esm/components/DataTable/internal/buildColumnSegments.js +1 -0
- package/build/esm/components/DataTable/internal/buildInternalColumns.d.ts +2 -2
- package/build/esm/components/DataTable/internal/buildInternalColumns.js +1 -1
- package/build/esm/components/DataTable/internal/getColumnSticky.js +1 -1
- package/build/esm/components/DataTable/internal/types.d.ts +7 -2
- package/build/esm/components/DataTable/isDataTableColumnGroup.d.ts +2 -0
- package/build/esm/components/DataTable/isDataTableColumnGroup.js +1 -0
- package/build/esm/components/DataTable/types.d.ts +52 -8
- package/build/esm/components/DataTable/useDataTableSort.d.ts +4 -4
- package/build/esm/components/DataTable/useDataTableSort.js +1 -1
- package/build/esm/components/FilterToolbar/FilterToolbar.d.ts +103 -0
- package/build/esm/components/FilterToolbar/FilterToolbar.js +1 -0
- package/build/esm/components/Internal/Panel/Panel.d.ts +22 -1
- package/build/esm/components/Internal/Panel/Panel.js +1 -1
- package/build/esm/components/Internal/ToolbarItemCount/ToolbarItemCount.d.ts +16 -0
- package/build/esm/components/Internal/ToolbarItemCount/ToolbarItemCount.js +1 -0
- package/build/esm/components/Kbd/Kbd.d.ts +118 -0
- package/build/esm/components/Kbd/Kbd.js +1 -0
- package/build/esm/components/KbdGroup/KbdGroup.d.ts +7 -0
- package/build/esm/components/KbdGroup/KbdGroup.js +1 -0
- package/build/esm/components/Layout/-types.d.ts +6 -1
- package/build/esm/components/Layout/Layout.js +1 -1
- package/build/esm/components/Layout/LeftPanel/LeftPanelDocked.js +1 -1
- package/build/esm/components/Layout/RightPanel/RightPanel.js +1 -1
- package/build/esm/components/Layout/registry.d.ts +4 -0
- package/build/esm/components/Layout/registry.js +1 -1
- package/build/esm/components/Layout/usePanelDockedSlide.d.ts +4 -1
- package/build/esm/components/Layout/usePanelDockedSlide.js +1 -1
- package/build/esm/components/Tooltip/BaseTooltip.js +1 -1
- package/build/esm/components/Tooltip/Tooltip.d.ts +3 -1
- package/build/esm/components/Tooltip/Tooltip.js +1 -1
- package/build/esm/index.d.ts +1 -0
- package/build/esm/index.js +1 -1
- package/build/esm/shared/useIsMacOs.d.ts +1 -0
- package/build/esm/shared/useIsMacOs.js +1 -0
- package/build/esm/web-tokens/_colors.json +26 -0
- package/build/esm/web-tokens/_sizes.json +10 -0
- package/build/esm/web-tokens/visualConfig.d.ts +25 -0
- package/build/esm/web-tokens/visualConfig.js +1 -1
- package/build/scss/_dark.scss +3 -0
- package/build/scss/_light.scss +3 -0
- package/build/scss/_variables.scss +4 -0
- package/build/scss/subthemes/_inverted.scss +6 -0
- package/package.json +1 -1
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import type { ReactElement } from "react";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import type { ConditionalAccessibleName } from "../../types/a11y";
|
|
4
|
+
import type { SegmentedControlProps } from "../Form/SegmentedControl/SegmentedControl";
|
|
5
|
+
import type { SearchInputProps } from "../Form/SearchInput/SearchInput";
|
|
6
|
+
import type { IconName } from "../Icon/Icon";
|
|
7
|
+
import type { PopupRole } from "../Sheet/Sheet";
|
|
8
|
+
export type FilterToolbarFilter = {
|
|
9
|
+
/** Visible label and accessible name of the trigger button. */
|
|
10
|
+
label: string;
|
|
11
|
+
/** Count shown in the trigger's badge. Pass `null` to hide the badge. */
|
|
12
|
+
count: number | null;
|
|
13
|
+
/** Icon shown on the trigger button, e.g. `"filter"`, `"columns3"`. */
|
|
14
|
+
leftIcon?: IconName;
|
|
15
|
+
/** Whether this filter's popup (e.g. a `FilterDialog` or `Popover`) is open. Wired into the trigger's `aria-expanded`. */
|
|
16
|
+
isOpen: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Id of the popup this trigger controls, wired into `aria-controls` while
|
|
19
|
+
* `isOpen`. Leave it out for `FilterDialog`/`Popover`, since neither
|
|
20
|
+
* exposes an `id`.
|
|
21
|
+
*/
|
|
22
|
+
popupId?: string;
|
|
23
|
+
/**
|
|
24
|
+
* Popup type opened by the trigger. Wired into `aria-haspopup`. Leave it out
|
|
25
|
+
* when the trigger opens no popup, so the button claims none.
|
|
26
|
+
*/
|
|
27
|
+
role?: Extract<PopupRole, "dialog" | "menu" | "listbox">;
|
|
28
|
+
/**
|
|
29
|
+
* Ref to this trigger's button. A `Popover` needs it as its own
|
|
30
|
+
* `externalTriggerRef`, to anchor to the trigger and to manage its click and
|
|
31
|
+
* focus-return behavior. It also writes `aria-expanded`, `aria-haspopup`, and
|
|
32
|
+
* `aria-controls` on the button itself, so keep `isOpen` in sync with the
|
|
33
|
+
* popover and leave `role` and `popupId` out. `FilterDialog` needs no ref: it
|
|
34
|
+
* opens as a modal or sheet, not anchored to the trigger.
|
|
35
|
+
*/
|
|
36
|
+
triggerRef?: React.RefObject<HTMLButtonElement>;
|
|
37
|
+
/**
|
|
38
|
+
* Called when the trigger is clicked, for a popup the consumer opens itself,
|
|
39
|
+
* e.g. a `FilterDialog`. Leave it out with `triggerRef`: a `Popover` adds its
|
|
40
|
+
* own click listener to that button, so a second handler here toggles the
|
|
41
|
+
* open state twice on one click.
|
|
42
|
+
*/
|
|
43
|
+
onClick?: () => void;
|
|
44
|
+
};
|
|
45
|
+
/** The visible content of a filter toolbar, without its accessible name or test id. */
|
|
46
|
+
export type FilterToolbarContentProps = {
|
|
47
|
+
/**
|
|
48
|
+
* Visible item count shown at the start of the row, e.g. `"50 items"`. It is
|
|
49
|
+
* a live region, so a count change is announced without a move of focus.
|
|
50
|
+
* Use it when no other row shows the count.
|
|
51
|
+
*/
|
|
52
|
+
totalItems?: string;
|
|
53
|
+
/**
|
|
54
|
+
* A segmented control rendered at the start of the row, e.g. a year toggle.
|
|
55
|
+
* `label` is required because `FormFieldGroup` always renders a `<legend>`,
|
|
56
|
+
* even when the label is visually hidden. `size` is set by the toolbar, so
|
|
57
|
+
* the row keeps one height.
|
|
58
|
+
*/
|
|
59
|
+
segmentedControlProps?: Omit<SegmentedControlProps, "size"> & {
|
|
60
|
+
label: string;
|
|
61
|
+
};
|
|
62
|
+
/**
|
|
63
|
+
* Filter and column trigger buttons, e.g. "Filter 4", "Columns 9". Each one
|
|
64
|
+
* renders as a `CountButton` whose `aria-expanded`, `aria-haspopup`, and
|
|
65
|
+
* `aria-controls` come from the entry's state. The toolbar does not render or
|
|
66
|
+
* manage the popup (`FilterDialog`, `Popover`) itself.
|
|
67
|
+
*
|
|
68
|
+
* Always wrap in `useMemo` to avoid unnecessary re-renders.
|
|
69
|
+
*/
|
|
70
|
+
filters?: FilterToolbarFilter[];
|
|
71
|
+
/**
|
|
72
|
+
* Search field rendered at the end of the row. Always wrap in `useMemo` to
|
|
73
|
+
* avoid unnecessary re-renders. `slotProps.clearButton.ariaLabel` is
|
|
74
|
+
* required so the icon-only clear button has an accessible name.
|
|
75
|
+
*/
|
|
76
|
+
searchInputProps?: Omit<SearchInputProps, "slotProps"> & {
|
|
77
|
+
slotProps: {
|
|
78
|
+
clearButton: {
|
|
79
|
+
ariaLabel: string;
|
|
80
|
+
};
|
|
81
|
+
};
|
|
82
|
+
};
|
|
83
|
+
};
|
|
84
|
+
export type FilterToolbarProps = FilterToolbarContentProps & {
|
|
85
|
+
"data-e2e-test-id"?: string;
|
|
86
|
+
} & ConditionalAccessibleName;
|
|
87
|
+
/**
|
|
88
|
+
* A row of filter controls: an optional item count, an optional segmented
|
|
89
|
+
* control, any number of count-badged filter triggers, and an optional search
|
|
90
|
+
* field pinned to the end. Use it above a table, a list, a grid, or any other
|
|
91
|
+
* filterable collection. It renders the triggers only — the popups behind
|
|
92
|
+
* them (`FilterDialog`, `Popover`) stay with the consumer; see `filters`.
|
|
93
|
+
*
|
|
94
|
+
* The root is `role="group"`, not `role="toolbar"`: the APG toolbar pattern
|
|
95
|
+
* assumes one arrow-key widget, placed last, but this row has two (the native
|
|
96
|
+
* radio group inside `SegmentedControl`, and the search textbox), and a
|
|
97
|
+
* roving tabindex would break both (WCAG SC 2.1.1). `role="group"` gives the
|
|
98
|
+
* same programmatic grouping with no custom keyboard code, so every control
|
|
99
|
+
* keeps its native behavior.
|
|
100
|
+
*/
|
|
101
|
+
declare function FilterToolbarUI({ totalItems, segmentedControlProps, filters, searchInputProps, "data-e2e-test-id": dataE2eTestId, ...ariaAttributes }: FilterToolbarProps): ReactElement;
|
|
102
|
+
export declare const FilterToolbar: React.MemoExoticComponent<typeof FilterToolbarUI>;
|
|
103
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"FilterToolbar",{enumerable:!0,get:function(){return FilterToolbar}});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")),_breakpointsjson=/*#__PURE__*/_interop_require_default._(require("../../web-tokens/_breakpoints.json")),_Inline=require("../Inline/Inline"),_ToolbarItemCount=require("../Internal/ToolbarItemCount/ToolbarItemCount"),_SegmentedControl=require("../Form/SegmentedControl/SegmentedControl"),_SearchInput=require("../Form/SearchInput/SearchInput"),_CountButton=require("../CountButton/CountButton"),containerMediumSize=_breakpointsjson.default.m.value,toolbarContainerName="filterToolbar",containerBelowMedium=`@container ${toolbarContainerName} (min-width: 0px) and (max-width:${containerMediumSize}px)`,StyledFilterToolbar=(0,_styled.default)("div",{target:"e1pn7li40",label:"StyledFilterToolbar"})(({theme})=>({containerType:"inline-size",containerName:toolbarContainerName,backgroundColor:theme.values.color.background.primary.default,borderTopLeftRadius:"inherit",borderTopRightRadius:"inherit"})),StyledFilterRow=(0,_styled.default)("div",{target:"e1pn7li41",label:"StyledFilterRow"})(({theme})=>({padding:theme.variables.size.spacing.xs,display:"flex",flexWrap:"wrap",alignItems:"center",gap:theme.variables.size.spacing.s,[containerBelowMedium]:{flexDirection:"column",alignItems:"stretch"}})),CustomInline=(0,_styled.default)(_Inline.Inline,{target:"e1pn7li42",label:"CustomInline"})({[containerBelowMedium]:{order:2}}),StyledSearchSlot=(0,_styled.default)("div",{target:"e1pn7li43",label:"StyledSearchSlot"})({display:"flex",flexGrow:1,justifyContent:"flex-end",[containerBelowMedium]:{order:1,flexGrow:0,display:"block"}}),CustomToolbarItemCount=(0,_styled.default)(_ToolbarItemCount.ToolbarItemCount,{target:"e1pn7li44",label:"CustomToolbarItemCount"})(({theme})=>({paddingInline:theme.variables.size.spacing.xxs})),FilterToolbar=_react.default.memo(function({totalItems,segmentedControlProps,filters,searchInputProps,"data-e2e-test-id":dataE2eTestId,...ariaAttributes}){let hasLeadingContent=!!totalItems||!!segmentedControlProps||!!filters?.length;return _react.default.createElement(StyledFilterToolbar,{role:"group","data-ds-id":"FilterToolbar","data-e2e-test-id":dataE2eTestId,...ariaAttributes},_react.default.createElement(StyledFilterRow,null,hasLeadingContent&&_react.default.createElement(CustomInline,{vAlignItems:"center",space:"xs"},totalItems&&_react.default.createElement(CustomToolbarItemCount,null,totalItems),segmentedControlProps&&_react.default.createElement(_SegmentedControl.SegmentedControl,{...segmentedControlProps,size:"s"}),filters?.map(({label,count,leftIcon,isOpen,popupId,role,onClick,triggerRef})=>_react.default.createElement(_CountButton.CountButton,{key:`filter-${label}`,ref:triggerRef,size:"s",leftIcon:leftIcon,count:count,onClick:onClick,"aria-haspopup":role,"aria-expanded":isOpen,"aria-controls":isOpen?popupId:void 0},label))),searchInputProps&&_react.default.createElement(StyledSearchSlot,null,_react.default.createElement(_SearchInput.SearchInput,searchInputProps))))});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import type { LayoutStorage, PanelImperativeHandle } from "react-resizable-panels";
|
|
2
|
+
import type { LayoutStorage, PanelImperativeHandle, PanelProps as ResizablePanelProps } from "react-resizable-panels";
|
|
3
3
|
/** A size: plain number = pixels; unitless string = percentage ("10%"). */
|
|
4
4
|
type Size = number | string;
|
|
5
5
|
export type PanelItem = {
|
|
@@ -19,6 +19,16 @@ export type PanelItem = {
|
|
|
19
19
|
* neighbour. Separators beside it stay usable as long as a resizable panel
|
|
20
20
|
* remains on each of their sides - the drag just passes this panel by. */
|
|
21
21
|
resizable?: boolean;
|
|
22
|
+
/** Hold this panel's width when the window (or the containing group) is
|
|
23
|
+
* resized, rather than its share of the group - so the change lands on the
|
|
24
|
+
* panels without it. Orthogonal to `resizable`, which governs drags only,
|
|
25
|
+
* and to the unit of `defaultSize`: a panel sized in `%` starts at that
|
|
26
|
+
* share and then holds the width it resolved to.
|
|
27
|
+
*
|
|
28
|
+
* Ignored on a panel with no `defaultSize` (nothing was asked for, so there
|
|
29
|
+
* is no width worth holding) and on every panel of a row where no panel is
|
|
30
|
+
* left to absorb the change. */
|
|
31
|
+
lockWidthOnWindowResize?: boolean;
|
|
22
32
|
};
|
|
23
33
|
export type PanelProps = {
|
|
24
34
|
/** Visible panels, left-to-right. Conditionally rendering items toggles a
|
|
@@ -45,6 +55,17 @@ export type PanelProps = {
|
|
|
45
55
|
* it lifts (~300ms). */
|
|
46
56
|
shouldSuppressLayoutCallback?: () => boolean;
|
|
47
57
|
};
|
|
58
|
+
type GroupResizeBehavior = ResizablePanelProps["groupResizeBehavior"];
|
|
59
|
+
/**
|
|
60
|
+
* A panel's `groupResizeBehavior` - what a resize of the GROUP
|
|
61
|
+
* (window/container) holds constant; a separator drag is unaffected either way.
|
|
62
|
+
* `"preserve-relative-size"`, the library's default, keeps a panel's share of
|
|
63
|
+
* the group, so its pixel width scales with the window. A panel that locks its
|
|
64
|
+
* width takes `"preserve-pixel-size"` and the rest absorb the change, which
|
|
65
|
+
* takes at least one panel without the lock - so a row of nothing else stays
|
|
66
|
+
* relative throughout rather than leaving the change nowhere to go.
|
|
67
|
+
*/
|
|
68
|
+
export declare const groupResizeBehaviorFor: (item: PanelItem, panels: PanelItem[]) => GroupResizeBehavior;
|
|
48
69
|
/**
|
|
49
70
|
* Internal resizable panel row — the only wrapper around react-resizable-panels.
|
|
50
71
|
* Renders one Panel per item with that item's `child` in a full-bleed host,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get Panel(){return Panel},get groupResizeBehaviorFor(){return groupResizeBehaviorFor}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});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")),_reactresizablepanels=require("react-resizable-panels"),CustomGroup=(0,_styled.default)(_reactresizablepanels.Group,{target:"e1q4b9dw0",label:"CustomGroup"})({height:"100%",width:"100%"}),StyledPanelChild=(0,_styled.default)("div",{target:"e1q4b9dw1",label:"StyledPanelChild"})({position:"relative",height:"100%",width:"100%"}),NOOP_STORAGE={getItem:()=>null,setItem:()=>{}},isResizable=item=>!1!==item.resizable,locksWidth=item=>!0===item.lockWidthOnWindowResize&&void 0!==item.defaultSize,groupResizeBehaviorFor=(item,panels)=>locksWidth(item)&&panels.some(panel=>!locksWidth(panel))?"preserve-pixel-size":"preserve-relative-size",canSeparatorResize=({panels,index})=>panels.slice(0,index).some(isResizable)&&panels.slice(index).some(isResizable);function Panel({panels,persistenceKey,storage,onResize,onCollapse,panelHandleFor,panelElementFor,shouldSuppressLayoutCallback}){let{defaultLayout,onLayoutChanged:persistSizes}=(0,_reactresizablepanels.useDefaultLayout)({id:persistenceKey??"ds-layout",panelIds:panels.map(p=>p.id),storage:persistenceKey&&storage?storage:NOOP_STORAGE});return _react.default.createElement(CustomGroup,{orientation:"horizontal",defaultLayout:defaultLayout,onLayoutChanged:layout=>{shouldSuppressLayoutCallback?.()||(persistSizes(layout),panels.forEach(({id,collapsible})=>{let pct=layout[id];if("number"==typeof pct){if(collapsible&&pct<.5)return void onCollapse(id);pct>=.5&&onResize(id,`${pct}%`)}}))}},panels.map((item,index)=>{let isSeparatorDisabled=!canSeparatorResize({panels,index});return _react.default.createElement(_react.default.Fragment,{key:item.id},index>0&&_react.default.createElement(_reactresizablepanels.Separator,{disabled:isSeparatorDisabled}),_react.default.createElement(_reactresizablepanels.Panel,{id:item.id,defaultSize:item.defaultSize,collapsible:item.collapsible,disabled:!1===item.resizable,groupResizeBehavior:groupResizeBehaviorFor(item,panels),minSize:item.minSize,maxSize:item.maxSize,panelRef:panelHandleFor?.(item.id),elementRef:panelElementFor?.(item.id)},_react.default.createElement(StyledPanelChild,null,item.child)))}))}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { ReactElement, ReactNode } from "react";
|
|
2
|
+
type ToolbarItemCountProps = {
|
|
3
|
+
/** The count itself, e.g. `"50 items"`. */
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
/** Published on the text, so a toolbar's `aria-labelledby`/`aria-describedby` can point at it. */
|
|
6
|
+
id?: string;
|
|
7
|
+
"data-e2e-test-id"?: string;
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* The live region shown by `BulkActionsToolbar` and `FilterToolbar`, so a
|
|
11
|
+
* count change announces without moving focus. `DataTableToolbar` moves it
|
|
12
|
+
* between the two rows as `isSelectable` changes, so one definition covers
|
|
13
|
+
* both instead of two copies drifting apart.
|
|
14
|
+
*/
|
|
15
|
+
export declare function ToolbarItemCount({ children, id, "data-e2e-test-id": dataE2eTestId, ...rest }: ToolbarItemCountProps): ReactElement;
|
|
16
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"ToolbarItemCount",{enumerable:!0,get:function(){return ToolbarItemCount}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_Text=require("../../Typography/Text/Text");function ToolbarItemCount({children,id,"data-e2e-test-id":dataE2eTestId,...rest}){return _react.default.createElement("div",{...rest,role:"status","aria-atomic":"true","data-e2e-test-id":dataE2eTestId},_react.default.createElement(_Text.Text,{size:"s",color:"secondary",weight:"bold",id:id},children))}
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
/** Every name both key maps must define, so neither can drift from the other. */
|
|
3
|
+
export type KeyName = "cmd" | "meta" | "ctrl" | "alt" | "shift" | "enter" | "esc" | "backspace" | "tab" | "up" | "down" | "left" | "right" | "updown";
|
|
4
|
+
export declare const MAC_OS_KEYS: {
|
|
5
|
+
cmd: {
|
|
6
|
+
label: string;
|
|
7
|
+
spokenLabel: string;
|
|
8
|
+
};
|
|
9
|
+
meta: {
|
|
10
|
+
label: string;
|
|
11
|
+
spokenLabel: string;
|
|
12
|
+
};
|
|
13
|
+
ctrl: {
|
|
14
|
+
label: string;
|
|
15
|
+
spokenLabel: string;
|
|
16
|
+
};
|
|
17
|
+
alt: {
|
|
18
|
+
label: string;
|
|
19
|
+
spokenLabel: string;
|
|
20
|
+
};
|
|
21
|
+
shift: {
|
|
22
|
+
label: string;
|
|
23
|
+
spokenLabel: string;
|
|
24
|
+
};
|
|
25
|
+
enter: {
|
|
26
|
+
label: string;
|
|
27
|
+
spokenLabel: string;
|
|
28
|
+
};
|
|
29
|
+
esc: {
|
|
30
|
+
label: string;
|
|
31
|
+
};
|
|
32
|
+
backspace: {
|
|
33
|
+
label: string;
|
|
34
|
+
spokenLabel: string;
|
|
35
|
+
};
|
|
36
|
+
tab: {
|
|
37
|
+
label: string;
|
|
38
|
+
spokenLabel: string;
|
|
39
|
+
};
|
|
40
|
+
up: {
|
|
41
|
+
label: string;
|
|
42
|
+
spokenLabel: string;
|
|
43
|
+
};
|
|
44
|
+
down: {
|
|
45
|
+
label: string;
|
|
46
|
+
spokenLabel: string;
|
|
47
|
+
};
|
|
48
|
+
left: {
|
|
49
|
+
label: string;
|
|
50
|
+
spokenLabel: string;
|
|
51
|
+
};
|
|
52
|
+
right: {
|
|
53
|
+
label: string;
|
|
54
|
+
spokenLabel: string;
|
|
55
|
+
};
|
|
56
|
+
updown: {
|
|
57
|
+
label: string;
|
|
58
|
+
spokenLabel: string;
|
|
59
|
+
};
|
|
60
|
+
};
|
|
61
|
+
export declare const WINDOWS_KEYS: {
|
|
62
|
+
cmd: {
|
|
63
|
+
label: string;
|
|
64
|
+
};
|
|
65
|
+
meta: {
|
|
66
|
+
label: string;
|
|
67
|
+
};
|
|
68
|
+
ctrl: {
|
|
69
|
+
label: string;
|
|
70
|
+
};
|
|
71
|
+
alt: {
|
|
72
|
+
label: string;
|
|
73
|
+
};
|
|
74
|
+
shift: {
|
|
75
|
+
label: string;
|
|
76
|
+
};
|
|
77
|
+
enter: {
|
|
78
|
+
label: string;
|
|
79
|
+
};
|
|
80
|
+
esc: {
|
|
81
|
+
label: string;
|
|
82
|
+
};
|
|
83
|
+
backspace: {
|
|
84
|
+
label: string;
|
|
85
|
+
};
|
|
86
|
+
tab: {
|
|
87
|
+
label: string;
|
|
88
|
+
};
|
|
89
|
+
up: {
|
|
90
|
+
label: string;
|
|
91
|
+
spokenLabel: string;
|
|
92
|
+
};
|
|
93
|
+
down: {
|
|
94
|
+
label: string;
|
|
95
|
+
spokenLabel: string;
|
|
96
|
+
};
|
|
97
|
+
left: {
|
|
98
|
+
label: string;
|
|
99
|
+
spokenLabel: string;
|
|
100
|
+
};
|
|
101
|
+
right: {
|
|
102
|
+
label: string;
|
|
103
|
+
spokenLabel: string;
|
|
104
|
+
};
|
|
105
|
+
updown: {
|
|
106
|
+
label: string;
|
|
107
|
+
spokenLabel: string;
|
|
108
|
+
};
|
|
109
|
+
};
|
|
110
|
+
export type KbdPlatform = "macOs" | "windows";
|
|
111
|
+
export type KbdProps = {
|
|
112
|
+
/** Semantic key name(s) to display, e.g. `"A"` or `["shift", "cmd"]`. Recognised names (`cmd`, `ctrl`, `alt`, `shift`, `enter`, `esc`, `backspace`, `tab`, `up`, `down`, `left`, `right`, `updown`) render the symbol for the detected platform; any other value is rendered as written, with a single character uppercased. */
|
|
113
|
+
keys: string | string[];
|
|
114
|
+
/** Pins the rendered symbols to one platform instead of detecting the user's. Use for tests, stories, and shortcuts that only exist on one platform. */
|
|
115
|
+
platform?: KbdPlatform;
|
|
116
|
+
"data-e2e-test-id"?: string;
|
|
117
|
+
};
|
|
118
|
+
export declare function Kbd({ keys, platform, "data-e2e-test-id": dataE2eTestId, }: KbdProps): React.ReactElement;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get Kbd(){return Kbd},get MAC_OS_KEYS(){return MAC_OS_KEYS},get WINDOWS_KEYS(){return WINDOWS_KEYS}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});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")),_useIsMacOs=require("../../shared/useIsMacOs"),_ScreenReaderText=require("../Utilities/ScreenReaderText/ScreenReaderText"),MAC_OS_KEYS={cmd:{label:"⌘",spokenLabel:"Command"},meta:{label:"⌘",spokenLabel:"Command"},ctrl:{label:"⌃",spokenLabel:"Control"},alt:{label:"⌥",spokenLabel:"Option"},shift:{label:"⇧",spokenLabel:"Shift"},enter:{label:"↩",spokenLabel:"Enter"},esc:{label:"Esc"},backspace:{label:"⌫",spokenLabel:"Backspace"},tab:{label:"⇥",spokenLabel:"Tab"},up:{label:"↑",spokenLabel:"Up arrow"},down:{label:"↓",spokenLabel:"Down arrow"},left:{label:"←",spokenLabel:"Left arrow"},right:{label:"→",spokenLabel:"Right arrow"},updown:{label:"⇅",spokenLabel:"Up and down arrows"}},WINDOWS_KEYS={cmd:{label:"Ctrl"},meta:{label:"Ctrl"},ctrl:{label:"Ctrl"},alt:{label:"Alt"},shift:{label:"Shift"},enter:{label:"Enter"},esc:{label:"Esc"},backspace:{label:"Backspace"},tab:{label:"Tab"},up:{label:"↑",spokenLabel:"Up arrow"},down:{label:"↓",spokenLabel:"Down arrow"},left:{label:"←",spokenLabel:"Left arrow"},right:{label:"→",spokenLabel:"Right arrow"},updown:{label:"⇅",spokenLabel:"Up and down arrows"}},StyledKbd=(0,_styled.default)("kbd",{target:"e1v9oi190",label:"StyledKbd"})(({theme})=>({display:"inline-flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box",minWidth:theme.variables.size.dimension.kbd.minWidth,padding:theme.variables.size.spacing.xxxs,border:`1px solid ${theme.values.color.kbd.border.default}`,borderRadius:theme.variables.size.borderRadius.xs,backgroundColor:theme.values.color.kbd.background.default,color:theme.values.color.kbd.foreground.default,fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.xxs,fontWeight:theme.variables.weight.normal,lineHeight:1,whiteSpace:"nowrap",cursor:"default",userSelect:"none"})),StyledKbdKeys=(0,_styled.default)("span",{target:"e1v9oi191",label:"StyledKbdKeys"})(({theme,hasSeparators})=>({display:"inline-flex",gap:hasSeparators?theme.variables.size.spacing.xxs:theme.variables.size.spacing.zero})),toDisplayLabel=key=>1===key.length?key.toUpperCase():key,toKeyDisplay=(key,isMacOs)=>{let trimmedKey=key.trim();return(isMacOs?MAC_OS_KEYS:WINDOWS_KEYS)[trimmedKey.toLowerCase()]??{label:toDisplayLabel(trimmedKey)}};function Kbd({keys,platform,"data-e2e-test-id":dataE2eTestId}){let detectedIsMacOs=(0,_useIsMacOs.useIsMacOs)(),isMacOs=platform?"macOs"===platform:detectedIsMacOs,keyDisplays=(Array.isArray(keys)?keys:[keys]).map(key=>toKeyDisplay(key,isMacOs)),spokenKeys=keyDisplays.map(({label,spokenLabel})=>spokenLabel??label).join(" ");return _react.default.createElement(StyledKbd,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Kbd"},_react.default.createElement(StyledKbdKeys,{"aria-hidden":"true",hasSeparators:!isMacOs&&keyDisplays.length>1},keyDisplays.map(({label},index)=>_react.default.createElement(_react.default.Fragment,{key:`${label}-${index}`},index>0&&!isMacOs&&_react.default.createElement("span",null,"+"),_react.default.createElement("span",null,label)))),_react.default.createElement(_ScreenReaderText.ScreenReaderText,{as:"span"},spokenKeys))}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export type KbdGroupProps = {
|
|
3
|
+
/** The `Kbd` elements making up the sequence, in the order they are pressed. */
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
"data-e2e-test-id"?: string;
|
|
6
|
+
};
|
|
7
|
+
export declare function KbdGroup({ children, "data-e2e-test-id": dataE2eTestId, }: KbdGroupProps): React.ReactElement;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"KbdGroup",{enumerable:!0,get:function(){return KbdGroup}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),StyledKbdGroup=(0,/*#__PURE__*/_interop_require_default._(require("@emotion/styled")).default)("span",{target:"e1mlf86z0",label:"StyledKbdGroup"})(({theme})=>({display:"inline-flex",alignItems:"flex-start",gap:theme.variables.size.spacing.xxs}));function KbdGroup({children,"data-e2e-test-id":dataE2eTestId}){return _react.default.createElement(StyledKbdGroup,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"KbdGroup"},children)}
|
|
@@ -289,7 +289,12 @@ export type SidePanelProps = ForwardedScrollProps & {
|
|
|
289
289
|
/** Accessible name; when set, the panel renders as a `region` landmark. */
|
|
290
290
|
"aria-label"?: string;
|
|
291
291
|
collapsible?: boolean;
|
|
292
|
-
/** Number = pixels, unitless string = percent (e.g. `"30%"`).
|
|
292
|
+
/** Number = pixels, unitless string = percent (e.g. `"30%"`).
|
|
293
|
+
*
|
|
294
|
+
* Either unit sets the column's starting width only: a docked side panel
|
|
295
|
+
* then keeps that width when the window resizes, and `Layout.Content` grows
|
|
296
|
+
* and shrinks around it. Drag-resizing is a separate story - see
|
|
297
|
+
* `resizable`. */
|
|
293
298
|
defaultSize?: Size;
|
|
294
299
|
minSize?: Size;
|
|
295
300
|
maxSize?: Size;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get Layout(){return Layout},get PANEL_HOST_DS_ID(){return PANEL_HOST_DS_ID}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Panel=require("../Internal/Panel/Panel"),_LayoutFloat=require("../Internal/LayoutFloat/LayoutFloat"),_useBreakpoints=require("../../shared/useBreakpoints"),_constants=require("./-constants"),_context=require("./context"),_useMobileSplitStack=require("./Split/MobileSplitView/useMobileSplitStack"),_useMobileSplitView=require("./Split/MobileSplitView/useMobileSplitView"),_LayoutProvider=require("./LayoutProvider"),_Content=require("./Content/Content"),_RightPanel=require("./RightPanel/RightPanel"),_RightPanelHeader=require("./RightPanel/RightPanelHeader"),_RightPanelFooter=require("./RightPanel/RightPanelFooter"),_LeftPanel=require("./LeftPanel/LeftPanel"),_LeftPanelHeader=require("./LeftPanel/LeftPanelHeader"),_LeftPanelFooter=require("./LeftPanel/LeftPanelFooter"),_Split=require("./Split/Split"),_SplitHeader=require("./Split/SplitHeader"),_SplitFooter=require("./Split/SplitFooter"),_registry=require("./registry"),_useFloatablePortalTargets=require("./useFloatablePortalTargets"),_LayoutFloatDragProvider=require("../Internal/LayoutFloat/LayoutFloatDragProvider"),_LayoutCssVars=require("./LayoutCssVars"),_useLayout=require("./useLayout"),_useLayoutRules=require("./useLayoutRules"),_rules=require("./rules"),resizableFromState=slotState=>"sidePanel"===slotState.kind?slotState.resizable:void 0,useGlobalCssVariables=slotHosts=>{let leftPanelWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.content),rightPanelWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.rightPanel);(0,_react.useEffect)(()=>{let targets=[[_constants.Slot.leftPanel,leftPanelWidthCssVar],[_constants.Slot.content,contentWidthCssVar],[_constants.Slot.rightPanel,rightPanelWidthCssVar]],observers=[];return targets.forEach(([slot,handle])=>{let node=slotHosts[slot]??null;if(!node)return void handle.set("0px");let publishNodeWidth=()=>handle.set(`${node.getBoundingClientRect().width}px`);if(publishNodeWidth(),"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(publishNodeWidth);observer.observe(node),observers.push(observer)}),()=>observers.forEach(observer=>observer.disconnect())},[leftPanelWidthCssVar,contentWidthCssVar,rightPanelWidthCssVar,slotHosts])},StyledLayout=(0,_styled.default)("div",{target:"e19d8fc30",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelHost=(0,_styled.default)("div",{target:"e19d8fc31",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"}),PANEL_HOST_DS_ID="PanelHost",StyledContentColumn=(0,_styled.default)("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"e19d8fc32",label:"StyledContentColumn"})(({isSplitOpen,theme})=>({display:"flex",height:`calc(100% - ${_constants.PAGE_BOTTOM_BAR_INSET})`,width:"100%",...isSplitOpen&&{maxWidth:theme.variables.layout.split.maxWidth.default,marginInline:"auto",gap:theme.variables.size.spacing.xxs}})),StyledContentColumnHalf=(0,_styled.default)("div",{target:"e19d8fc33",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=(0,_styled.default)("div",{target:"e19d8fc34",label:"StyledMobileSplitStackHost"})({position:"absolute",top:0,left:0,right:0,bottom:_constants.PAGE_BOTTOM_BAR_INSET,overflow:"hidden",pointerEvents:"none"}),isPanelPresent=({slot,declared,present,isShown})=>!!declared[slot]&&(isShown(slot)||present[slot]),defaultSizeFor=(slot,declared,layoutState)=>{if(slot===_constants.Slot.content)return;let declaredSize=declared[slot]?.defaultSize;return void 0!==declaredSize?declaredSize:declared[slot]?.resizable!==!1?layoutState[slot].size:void 0},childFor=(slot,contentColumn,slotHostRefs)=>slot===_constants.Slot.content?contentColumn:_react.default.createElement(StyledPanelHost,{"data-ds-id":PANEL_HOST_DS_ID,ref:slotHostRefs[slot]}),Layout=function({children,persistenceKey,storage,rules=_rules.DEFAULT_LAYOUT_RULES,additionalRulesData}){let[declared,setDeclared]=(0,_react.useState)({}),layout=(0,_useLayout.useLayout)(),{state:layoutState,...panelCallbacks}=layout;(0,_useLayoutRules.useLayoutRules)({layout,declared,rules,additionalData:additionalRulesData});let{dispatch}=(0,_context.useLayoutStore)(),persistence=(0,_context.useLayoutPersistence)(),resolvedKey=persistenceKey??persistence.persistenceKey,resolvedStorage=storage??persistence.storage,{isMobile}=(0,_useBreakpoints.useBreakpoints)(),showMobileSplitStack=(0,_useMobileSplitView.useMobileSplitViewEnabled)(),[mobileSplitStackHost,setMobileSplitStackHost]=(0,_react.useState)(null),[splitCount,setSplitCount]=(0,_react.useState)(0),registerSplit=(0,_react.useCallback)(()=>(setSplitCount(count=>count+1),()=>setSplitCount(count=>count-1)),[]),mobileSplitStack=(0,_react.useMemo)(()=>({host:mobileSplitStackHost,isSplitPresent:splitCount>0,registerSplit}),[mobileSplitStackHost,splitCount,registerSplit]),panelsEnabled=(0,_context.useLayoutPanelsEnabled)(),rightPanelVariant=layoutState[_constants.Slot.rightPanel].variant??declared[_constants.Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!0===panelsEnabled&&!isMobile&&"float"===rightPanelVariant,isShown=slot=>layoutState[slot].visible&&!(slot===_constants.Slot.rightPanel&&(isRightPanelFloating||isMobile)),[present,setPresent]=(0,_react.useState)({}),presence=(0,_react.useMemo)(()=>({setPresent:(slot,isPresent)=>setPresent(prev=>prev[slot]===isPresent?prev:{...prev,[slot]:isPresent})}),[]),panelHandles=(0,_react.useRef)({}),panelElements=(0,_react.useRef)({}),resizeSuppressed=(0,_react.useRef)({}),animationControl=(0,_react.useMemo)(()=>({setHandle:(slot,handle)=>{panelHandles.current[slot]=handle},getHandle:slot=>panelHandles.current[slot]??null,setElement:(slot,element)=>{panelElements.current[slot]=element},getElement:slot=>panelElements.current[slot]??null,setResizeSuppressed:(slot,suppressed)=>{resizeSuppressed.current[slot]=suppressed}}),[]),panelRefCallbacks=(0,_react.useMemo)(()=>{let handleCallbacks=new Map,elementCallbacks=new Map;return{handleFor:id=>{let callback=handleCallbacks.get(id);return callback||(callback=handle=>animationControl.setHandle(id,handle),handleCallbacks.set(id,callback)),callback},elementFor:id=>{let callback=elementCallbacks.get(id);return callback||(callback=element=>animationControl.setElement(id,element),elementCallbacks.set(id,callback)),callback}}},[animationControl]),shouldSuppressLayoutCallback=(0,_react.useCallback)(()=>Object.values(resizeSuppressed.current).some(Boolean),[]),registry=(0,_react.useMemo)(()=>({register:(slot,reg)=>setDeclared(prev=>({...prev,[slot]:reg})),unregister:slot=>setDeclared(prev=>{if(!(slot in prev))return prev;let next={...prev};return delete next[slot],next})}),[]),{portalTargets,slotHosts,slotHostRefs,floatHostRef}=(0,_useFloatablePortalTargets.useFloatablePortalTargets)({slots:_constants.PANEL_ORDER,floatableSlot:_constants.Slot.rightPanel,isFloating:isRightPanelFloating});useGlobalCssVariables(slotHosts);let rowSlots=_constants.PANEL_ORDER.filter(slot=>slot!==_constants.Slot.splitview),declaredSlots=rowSlots.filter(slot=>declared[slot]),reservedSlots=(0,_context.useLayoutReservedSlots)(),hostedSlotCount=rowSlots.filter(slot=>declared[slot]||reservedSlots.includes(slot)).length,soloSlot=declaredSlots[0],isSplitOpen=isPanelPresent({slot:_constants.Slot.splitview,declared,present,isShown})&&isPanelPresent({slot:_constants.Slot.content,declared,present,isShown}),contentColumn=_react.default.createElement(StyledContentColumn,{isSplitOpen:isSplitOpen},_react.default.createElement(StyledContentColumnHalf,{ref:slotHostRefs[_constants.Slot.content]}),isSplitOpen&&_react.default.createElement(StyledContentColumnHalf,{ref:slotHostRefs[_constants.Slot.splitview]})),panelItems=rowSlots.filter(slot=>isPanelPresent({slot,declared,present,isShown})).map(slot=>({id:slot,child:childFor(slot,contentColumn,slotHostRefs),defaultSize:defaultSizeFor(slot,declared,layoutState),minSize:declared[slot]?.minSize??layoutState[slot].minSize,maxSize:declared[slot]?.maxSize??layoutState[slot].maxSize,collapsible:slot!==_constants.Slot.content&&(declared[slot]?.collapsible??!0),resizable:declared[slot]?.resizable??resizableFromState(layoutState[slot])})),soloHost=soloSlot&&isShown(soloSlot)?childFor(soloSlot,contentColumn,slotHostRefs):null,panelGroup=panelItems.length>0?_react.default.createElement(_Panel.Panel,{key:resolvedKey,panels:panelItems,persistenceKey:resolvedKey,storage:resolvedStorage,onResize:(id,size)=>dispatch({type:"resize",slot:id,size}),onCollapse:id=>panelCallbacks[id].hide(),panelHandleFor:panelRefCallbacks.handleFor,panelElementFor:panelRefCallbacks.elementFor,shouldSuppressLayoutCallback:shouldSuppressLayoutCallback}):null;return _react.default.createElement(_registry.PanelRegistryContext.Provider,{value:registry},_react.default.createElement(_registry.PanelDeclarationsContext.Provider,{value:declared},_react.default.createElement(_registry.PanelPresenceContext.Provider,{value:presence},_react.default.createElement(_registry.PanelAnimationContext.Provider,{value:animationControl},_react.default.createElement(_registry.LayoutPortalContext.Provider,{value:portalTargets},_react.default.createElement(_LayoutFloatDragProvider.LayoutFloatDragProvider,null,_react.default.createElement(_useMobileSplitStack.MobileSplitStackContext.Provider,{value:mobileSplitStack},_react.default.createElement(StyledLayout,{"data-ds-id":"Layout"},hostedSlotCount<=1?soloHost:panelGroup,isRightPanelFloating&&layoutState[_constants.Slot.rightPanel].visible&&_react.default.createElement(_LayoutFloat.LayoutFloat,{hostRef:floatHostRef}),children,showMobileSplitStack&&_react.default.createElement(StyledMobileSplitStackHost,{ref:setMobileSplitStackHost})))))))))};Layout.Provider=_LayoutProvider.LayoutProvider,Layout.LeftPanel=_LeftPanel.LeftPanel,Layout.LeftPanelHeader=_LeftPanelHeader.LeftPanelHeader,Layout.LeftPanelFooter=_LeftPanelFooter.LeftPanelFooter,Layout.RightPanel=_RightPanel.RightPanel,Layout.RightPanelHeader=_RightPanelHeader.RightPanelHeader,Layout.RightPanelFooter=_RightPanelFooter.RightPanelFooter,Layout.Content=_Content.Content,Layout.Split=_Split.Split,Layout.SplitHeader=_SplitHeader.SplitHeader,Layout.SplitFooter=_SplitFooter.SplitFooter;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get Layout(){return Layout},get PANEL_HOST_DS_ID(){return PANEL_HOST_DS_ID}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Panel=require("../Internal/Panel/Panel"),_LayoutFloat=require("../Internal/LayoutFloat/LayoutFloat"),_useBreakpoints=require("../../shared/useBreakpoints"),_constants=require("./-constants"),_context=require("./context"),_useMobileSplitStack=require("./Split/MobileSplitView/useMobileSplitStack"),_useMobileSplitView=require("./Split/MobileSplitView/useMobileSplitView"),_LayoutProvider=require("./LayoutProvider"),_Content=require("./Content/Content"),_RightPanel=require("./RightPanel/RightPanel"),_RightPanelHeader=require("./RightPanel/RightPanelHeader"),_RightPanelFooter=require("./RightPanel/RightPanelFooter"),_LeftPanel=require("./LeftPanel/LeftPanel"),_LeftPanelHeader=require("./LeftPanel/LeftPanelHeader"),_LeftPanelFooter=require("./LeftPanel/LeftPanelFooter"),_Split=require("./Split/Split"),_SplitHeader=require("./Split/SplitHeader"),_SplitFooter=require("./Split/SplitFooter"),_registry=require("./registry"),_useFloatablePortalTargets=require("./useFloatablePortalTargets"),_LayoutFloatDragProvider=require("../Internal/LayoutFloat/LayoutFloatDragProvider"),_LayoutCssVars=require("./LayoutCssVars"),_useLayout=require("./useLayout"),_useLayoutRules=require("./useLayoutRules"),_rules=require("./rules"),resizableFromState=slotState=>"sidePanel"===slotState.kind?slotState.resizable:void 0,useGlobalCssVariables=slotHosts=>{let leftPanelWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.leftPanel),contentWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.content),rightPanelWidthCssVar=(0,_LayoutCssVars.useLayoutVar)(_constants.PANEL_WIDTH_VAR.rightPanel);(0,_react.useEffect)(()=>{let targets=[[_constants.Slot.leftPanel,leftPanelWidthCssVar],[_constants.Slot.content,contentWidthCssVar],[_constants.Slot.rightPanel,rightPanelWidthCssVar]],observers=[];return targets.forEach(([slot,handle])=>{let node=slotHosts[slot]??null;if(!node)return void handle.set("0px");let publishNodeWidth=()=>handle.set(`${node.getBoundingClientRect().width}px`);if(publishNodeWidth(),"undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(publishNodeWidth);observer.observe(node),observers.push(observer)}),()=>observers.forEach(observer=>observer.disconnect())},[leftPanelWidthCssVar,contentWidthCssVar,rightPanelWidthCssVar,slotHosts])},StyledLayout=(0,_styled.default)("div",{target:"ec2opau0",label:"StyledLayout"})({position:"relative",height:"100%",width:"100%"}),StyledPanelHost=(0,_styled.default)("div",{target:"ec2opau1",label:"StyledPanelHost"})({position:"relative",height:"100%",width:"100%"}),PANEL_HOST_DS_ID="PanelHost",StyledContentColumn=(0,_styled.default)("div",{shouldForwardProp:prop=>"isSplitOpen"!==prop,target:"ec2opau2",label:"StyledContentColumn"})(({isSplitOpen,theme})=>({display:"flex",height:`calc(100% - ${_constants.PAGE_BOTTOM_BAR_INSET})`,width:"100%",...isSplitOpen&&{maxWidth:theme.variables.layout.split.maxWidth.default,marginInline:"auto",gap:theme.variables.size.spacing.xxs}})),StyledContentColumnHalf=(0,_styled.default)("div",{target:"ec2opau3",label:"StyledContentColumnHalf"})({position:"relative",height:"100%",flex:"1 1 0",minWidth:0}),StyledMobileSplitStackHost=(0,_styled.default)("div",{target:"ec2opau4",label:"StyledMobileSplitStackHost"})({position:"absolute",top:0,left:0,right:0,bottom:_constants.PAGE_BOTTOM_BAR_INSET,overflow:"hidden",pointerEvents:"none"}),isPanelPresent=({slot,declared,present,isShown})=>!!declared[slot]&&(isShown(slot)||present[slot]),defaultSizeFor=({slot,panel,panelState})=>slot===_constants.Slot.content?void 0:panel?.defaultSize!==void 0?panel.defaultSize:panel?.resizable!==!1?panelState.size:void 0,childFor=(slot,contentColumn,slotHostRefs)=>slot===_constants.Slot.content?contentColumn:_react.default.createElement(StyledPanelHost,{"data-ds-id":PANEL_HOST_DS_ID,ref:slotHostRefs[slot]}),Layout=function({children,persistenceKey,storage,rules=_rules.DEFAULT_LAYOUT_RULES,additionalRulesData}){let[declared,setDeclared]=(0,_react.useState)({}),layout=(0,_useLayout.useLayout)(),{state:layoutState,...panelCallbacks}=layout;(0,_useLayoutRules.useLayoutRules)({layout,declared,rules,additionalData:additionalRulesData});let{dispatch}=(0,_context.useLayoutStore)(),persistence=(0,_context.useLayoutPersistence)(),resolvedKey=persistenceKey??persistence.persistenceKey,resolvedStorage=storage??persistence.storage,{isMobile}=(0,_useBreakpoints.useBreakpoints)(),showMobileSplitStack=(0,_useMobileSplitView.useMobileSplitViewEnabled)(),[mobileSplitStackHost,setMobileSplitStackHost]=(0,_react.useState)(null),[splitCount,setSplitCount]=(0,_react.useState)(0),registerSplit=(0,_react.useCallback)(()=>(setSplitCount(count=>count+1),()=>setSplitCount(count=>count-1)),[]),mobileSplitStack=(0,_react.useMemo)(()=>({host:mobileSplitStackHost,isSplitPresent:splitCount>0,registerSplit}),[mobileSplitStackHost,splitCount,registerSplit]),panelsEnabled=(0,_context.useLayoutPanelsEnabled)(),rightPanelVariant=layoutState[_constants.Slot.rightPanel].variant??declared[_constants.Slot.rightPanel]?.variant??"sidebar",isRightPanelFloating=!0===panelsEnabled&&!isMobile&&"float"===rightPanelVariant,isShown=slot=>layoutState[slot].visible&&!(slot===_constants.Slot.rightPanel&&(isRightPanelFloating||isMobile)),[present,setPresent]=(0,_react.useState)({}),presence=(0,_react.useMemo)(()=>({setPresent:(slot,isPresent)=>setPresent(prev=>prev[slot]===isPresent?prev:{...prev,[slot]:isPresent})}),[]),panelHandles=(0,_react.useRef)({}),panelElements=(0,_react.useRef)({}),resizeSuppressed=(0,_react.useRef)({}),animationControl=(0,_react.useMemo)(()=>({setHandle:(slot,handle)=>{panelHandles.current[slot]=handle},getHandle:slot=>panelHandles.current[slot]??null,setElement:(slot,element)=>{panelElements.current[slot]=element},getElement:slot=>panelElements.current[slot]??null,setResizeSuppressed:(slot,suppressed)=>{resizeSuppressed.current[slot]=suppressed}}),[]),panelRefCallbacks=(0,_react.useMemo)(()=>{let handleCallbacks=new Map,elementCallbacks=new Map;return{handleFor:id=>{let callback=handleCallbacks.get(id);return callback||(callback=handle=>animationControl.setHandle(id,handle),handleCallbacks.set(id,callback)),callback},elementFor:id=>{let callback=elementCallbacks.get(id);return callback||(callback=element=>animationControl.setElement(id,element),elementCallbacks.set(id,callback)),callback}}},[animationControl]),shouldSuppressLayoutCallback=(0,_react.useCallback)(()=>Object.values(resizeSuppressed.current).some(Boolean),[]),registry=(0,_react.useMemo)(()=>({register:(slot,reg)=>setDeclared(prev=>({...prev,[slot]:reg})),unregister:slot=>setDeclared(prev=>{if(!(slot in prev))return prev;let next={...prev};return delete next[slot],next})}),[]),{portalTargets,slotHosts,slotHostRefs,floatHostRef}=(0,_useFloatablePortalTargets.useFloatablePortalTargets)({slots:_constants.PANEL_ORDER,floatableSlot:_constants.Slot.rightPanel,isFloating:isRightPanelFloating});useGlobalCssVariables(slotHosts);let rowSlots=_constants.PANEL_ORDER.filter(slot=>slot!==_constants.Slot.splitview),declaredSlots=rowSlots.filter(slot=>declared[slot]),reservedSlots=(0,_context.useLayoutReservedSlots)(),hostedSlotCount=rowSlots.filter(slot=>declared[slot]||reservedSlots.includes(slot)).length,soloSlot=declaredSlots[0],isSplitOpen=isPanelPresent({slot:_constants.Slot.splitview,declared,present,isShown})&&isPanelPresent({slot:_constants.Slot.content,declared,present,isShown}),contentColumn=_react.default.createElement(StyledContentColumn,{isSplitOpen:isSplitOpen},_react.default.createElement(StyledContentColumnHalf,{ref:slotHostRefs[_constants.Slot.content]}),isSplitOpen&&_react.default.createElement(StyledContentColumnHalf,{ref:slotHostRefs[_constants.Slot.splitview]})),panelItems=rowSlots.filter(slot=>isPanelPresent({slot,declared,present,isShown})).map(slot=>{let panel=declared[slot],panelState=layoutState[slot];return{id:slot,child:childFor(slot,contentColumn,slotHostRefs),defaultSize:defaultSizeFor({slot,panel,panelState}),minSize:panel?.minSize??panelState.minSize,maxSize:panel?.maxSize??panelState.maxSize,collapsible:slot!==_constants.Slot.content&&(panel?.collapsible??!0),lockWidthOnWindowResize:panel?.lockWidthOnWindowResize,resizable:panel?.resizable??resizableFromState(panelState)}}),soloHost=soloSlot&&isShown(soloSlot)?childFor(soloSlot,contentColumn,slotHostRefs):null,panelGroup=panelItems.length>0?_react.default.createElement(_Panel.Panel,{key:resolvedKey,panels:panelItems,persistenceKey:resolvedKey,storage:resolvedStorage,onResize:(id,size)=>dispatch({type:"resize",slot:id,size}),onCollapse:id=>panelCallbacks[id].hide(),panelHandleFor:panelRefCallbacks.handleFor,panelElementFor:panelRefCallbacks.elementFor,shouldSuppressLayoutCallback:shouldSuppressLayoutCallback}):null;return _react.default.createElement(_registry.PanelRegistryContext.Provider,{value:registry},_react.default.createElement(_registry.PanelDeclarationsContext.Provider,{value:declared},_react.default.createElement(_registry.PanelPresenceContext.Provider,{value:presence},_react.default.createElement(_registry.PanelAnimationContext.Provider,{value:animationControl},_react.default.createElement(_registry.LayoutPortalContext.Provider,{value:portalTargets},_react.default.createElement(_LayoutFloatDragProvider.LayoutFloatDragProvider,null,_react.default.createElement(_useMobileSplitStack.MobileSplitStackContext.Provider,{value:mobileSplitStack},_react.default.createElement(StyledLayout,{"data-ds-id":"Layout"},hostedSlotCount<=1?soloHost:panelGroup,isRightPanelFloating&&layoutState[_constants.Slot.rightPanel].visible&&_react.default.createElement(_LayoutFloat.LayoutFloat,{hostRef:floatHostRef}),children,showMobileSplitStack&&_react.default.createElement(StyledMobileSplitStackHost,{ref:setMobileSplitStackHost})))))))))};Layout.Provider=_LayoutProvider.LayoutProvider,Layout.LeftPanel=_LeftPanel.LeftPanel,Layout.LeftPanelHeader=_LeftPanelHeader.LeftPanelHeader,Layout.LeftPanelFooter=_LeftPanelFooter.LeftPanelFooter,Layout.RightPanel=_RightPanel.RightPanel,Layout.RightPanelHeader=_RightPanelHeader.RightPanelHeader,Layout.RightPanelFooter=_RightPanelFooter.RightPanelFooter,Layout.Content=_Content.Content,Layout.Split=_Split.Split,Layout.SplitHeader=_SplitHeader.SplitHeader,Layout.SplitFooter=_SplitFooter.SplitFooter;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelDocked",{enumerable:!0,get:function(){return LeftPanelDocked}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_registry=require("../registry"),_usePanelDockedSlide=require("../usePanelDockedSlide"),_PanelSlideBody=require("../PanelSlideBody"),_PanelContainer=require("../PanelContainer"),LeftPanelDocked=({children,"aria-label":ariaLabel,defaultSize,minSize,maxSize,collapsible=!0,resizable,scrollContainerRef,onScroll})=>{let{isMounted,pinnedWidth}=(0,_usePanelDockedSlide.usePanelDockedSlide)({slot:_constants.Slot.leftPanel,defaultSize,minSize,maxSize,collapsible,resizable});return(0,_registry.useLayoutPortal)(_constants.Slot.leftPanel,isMounted?_react.default.createElement(_PanelSlideBody.PanelSlideBody,{anchor:"right",pinnedWidth:pinnedWidth},_react.default.createElement(_PanelContainer.PanelContainer,{showBorderRight:!0,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)):null)};
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LeftPanelDocked",{enumerable:!0,get:function(){return LeftPanelDocked}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_registry=require("../registry"),_usePanelDockedSlide=require("../usePanelDockedSlide"),_PanelSlideBody=require("../PanelSlideBody"),_PanelContainer=require("../PanelContainer"),LeftPanelDocked=({children,"aria-label":ariaLabel,defaultSize,minSize,maxSize,collapsible=!0,resizable,scrollContainerRef,onScroll})=>{let{isMounted,pinnedWidth}=(0,_usePanelDockedSlide.usePanelDockedSlide)({slot:_constants.Slot.leftPanel,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize:!0});return(0,_registry.useLayoutPortal)(_constants.Slot.leftPanel,isMounted?_react.default.createElement(_PanelSlideBody.PanelSlideBody,{anchor:"right",pinnedWidth:pinnedWidth},_react.default.createElement(_PanelContainer.PanelContainer,{showBorderRight:!0,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)):null)};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"RightPanel",{enumerable:!0,get:function(){return RightPanel}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_registry=require("../registry"),_useLayout=require("../useLayout"),_context=require("../context"),_useBreakpoints=require("../../../shared/useBreakpoints"),_RightPanelDocked=require("./RightPanelDocked"),_RightPanelSheet=require("./RightPanelSheet"),RightPanel=({children,defaultSize=378,minSize=328,maxSize="30%",collapsible=!1,resizable,variant="sidebar",onVisibleChange,onVariantChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{state:layoutState,[_constants.Slot.rightPanel]:panel}=(0,_useLayout.useLayout)(),{isVisible,hide}=panel,{isMobile}=(0,_useBreakpoints.useBreakpoints)(),canRender=(0,_context.useCanRenderPanel)();(0,_registry.useDeclarePanel)(_constants.Slot.rightPanel,{defaultSize,minSize,maxSize,collapsible,resizable,variant});let resolvedVariant=layoutState[_constants.Slot.rightPanel].variant??variant;return((0,_registry.useRunCallbackOnValueChange)(isVisible,onVisibleChange),(0,_registry.useRunCallbackOnValueChange)(resolvedVariant,onVariantChange),canRender)?isMobile?_react.default.createElement(_RightPanelSheet.RightPanelSheet,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):_react.default.createElement(_RightPanelDocked.RightPanelDocked,{isVisible:isVisible,variant:resolvedVariant,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):null};
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"RightPanel",{enumerable:!0,get:function(){return RightPanel}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_constants=require("../-constants"),_registry=require("../registry"),_useLayout=require("../useLayout"),_context=require("../context"),_useBreakpoints=require("../../../shared/useBreakpoints"),_RightPanelDocked=require("./RightPanelDocked"),_RightPanelSheet=require("./RightPanelSheet"),RightPanel=({children,defaultSize=378,minSize=328,maxSize="30%",collapsible=!1,resizable,variant="sidebar",onVisibleChange,onVariantChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{state:layoutState,[_constants.Slot.rightPanel]:panel}=(0,_useLayout.useLayout)(),{isVisible,hide}=panel,{isMobile}=(0,_useBreakpoints.useBreakpoints)(),canRender=(0,_context.useCanRenderPanel)();(0,_registry.useDeclarePanel)(_constants.Slot.rightPanel,{defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize:!0,variant});let resolvedVariant=layoutState[_constants.Slot.rightPanel].variant??variant;return((0,_registry.useRunCallbackOnValueChange)(isVisible,onVisibleChange),(0,_registry.useRunCallbackOnValueChange)(resolvedVariant,onVariantChange),canRender)?isMobile?_react.default.createElement(_RightPanelSheet.RightPanelSheet,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):_react.default.createElement(_RightPanelDocked.RightPanelDocked,{isVisible:isVisible,variant:resolvedVariant,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):null};
|
|
@@ -23,6 +23,10 @@ export type PanelReg = {
|
|
|
23
23
|
/** When `false`, the panel is fixed at `defaultSize` and can't be drag-resized
|
|
24
24
|
* (directly or via a neighbour). Defaults to resizable. */
|
|
25
25
|
resizable?: boolean;
|
|
26
|
+
/** Lock this column's width when the window resizes, leaving the change to
|
|
27
|
+
* the columns without it. Declared by the docked side panels, which are
|
|
28
|
+
* sized for their own contents; `content` omits it and absorbs. */
|
|
29
|
+
lockWidthOnWindowResize?: boolean;
|
|
26
30
|
/** Initial presentation from `RightPanel`'s `variant` prop. Read as the
|
|
27
31
|
* fallback wherever the store's variant is still unset. */
|
|
28
32
|
variant?: RightPanelVariant;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get LayoutPortalContext(){return LayoutPortalContext},get PanelAnimationContext(){return PanelAnimationContext},get PanelDeclarationsContext(){return PanelDeclarationsContext},get PanelPresenceContext(){return PanelPresenceContext},get PanelRegistryContext(){return PanelRegistryContext},get useDeclarePanel(){return useDeclarePanel},get useLayoutPortal(){return useLayoutPortal},get usePanelAnimationControl(){return usePanelAnimationControl},get usePanelPresence(){return usePanelPresence},get useRunCallbackOnValueChange(){return useRunCallbackOnValueChange},get useVisibleChange(){return useVisibleChange}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _react=require("react"),_reactdom=require("react-dom"),_constants=require("./-constants"),_context=require("./context"),LayoutPortalContext=(0,_react.createContext)({});function useLayoutPortal(slot,children){let slotNode=(0,_react.useContext)(LayoutPortalContext)[slot]??null;return slotNode?(0,_reactdom.createPortal)(children,slotNode):null}const PanelRegistryContext=(0,_react.createContext)(null);function useDeclarePanel(slot,reg){let registry=(0,_react.useContext)(PanelRegistryContext),declarationEnabled=!0===(0,_context.useLayoutPanelsEnabled)()||slot===_constants.Slot.content,{defaultSize,minSize,maxSize,collapsible,resizable,variant}=reg;(0,_react.useLayoutEffect)(()=>{if(registry&&declarationEnabled)return registry.register(slot,{defaultSize,minSize,maxSize,collapsible,resizable,variant}),()=>registry.unregister(slot)},[registry,declarationEnabled,slot,defaultSize,minSize,maxSize,collapsible,resizable,variant])}const PanelDeclarationsContext=(0,_react.createContext)({}),PanelPresenceContext=(0,_react.createContext)(null);function usePanelPresence(slot,isPresent){let presence=(0,_react.useContext)(PanelPresenceContext);(0,_react.useLayoutEffect)(()=>{if(presence)return presence.setPresent(slot,isPresent),()=>presence.setPresent(slot,!1)},[presence,slot,isPresent])}const PanelAnimationContext=(0,_react.createContext)(null);function usePanelAnimationControl(){return(0,_react.useContext)(PanelAnimationContext)}function useRunCallbackOnValueChange(value,onChange){let prev=(0,_react.useRef)(value);(0,_react.useEffect)(()=>{prev.current!==value&&(prev.current=value,onChange?.(value))},[value,onChange])}function useVisibleChange(visible,onChange){useRunCallbackOnValueChange(visible,onChange)}
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get LayoutPortalContext(){return LayoutPortalContext},get PanelAnimationContext(){return PanelAnimationContext},get PanelDeclarationsContext(){return PanelDeclarationsContext},get PanelPresenceContext(){return PanelPresenceContext},get PanelRegistryContext(){return PanelRegistryContext},get useDeclarePanel(){return useDeclarePanel},get useLayoutPortal(){return useLayoutPortal},get usePanelAnimationControl(){return usePanelAnimationControl},get usePanelPresence(){return usePanelPresence},get useRunCallbackOnValueChange(){return useRunCallbackOnValueChange},get useVisibleChange(){return useVisibleChange}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _react=require("react"),_reactdom=require("react-dom"),_constants=require("./-constants"),_context=require("./context"),LayoutPortalContext=(0,_react.createContext)({});function useLayoutPortal(slot,children){let slotNode=(0,_react.useContext)(LayoutPortalContext)[slot]??null;return slotNode?(0,_reactdom.createPortal)(children,slotNode):null}const PanelRegistryContext=(0,_react.createContext)(null);function useDeclarePanel(slot,reg){let registry=(0,_react.useContext)(PanelRegistryContext),declarationEnabled=!0===(0,_context.useLayoutPanelsEnabled)()||slot===_constants.Slot.content,{defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant}=reg;(0,_react.useLayoutEffect)(()=>{if(registry&&declarationEnabled)return registry.register(slot,{defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant}),()=>registry.unregister(slot)},[registry,declarationEnabled,slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,variant])}const PanelDeclarationsContext=(0,_react.createContext)({}),PanelPresenceContext=(0,_react.createContext)(null);function usePanelPresence(slot,isPresent){let presence=(0,_react.useContext)(PanelPresenceContext);(0,_react.useLayoutEffect)(()=>{if(presence)return presence.setPresent(slot,isPresent),()=>presence.setPresent(slot,!1)},[presence,slot,isPresent])}const PanelAnimationContext=(0,_react.createContext)(null);function usePanelAnimationControl(){return(0,_react.useContext)(PanelAnimationContext)}function useRunCallbackOnValueChange(value,onChange){let prev=(0,_react.useRef)(value);(0,_react.useEffect)(()=>{prev.current!==value&&(prev.current=value,onChange?.(value))},[value,onChange])}function useVisibleChange(visible,onChange){useRunCallbackOnValueChange(visible,onChange)}
|
|
@@ -11,6 +11,9 @@ export type PanelDockedSlideOptions = {
|
|
|
11
11
|
* charge. Doesn't affect the slide - the open/close resize goes through the
|
|
12
12
|
* imperative handle, which a fixed column still honours. */
|
|
13
13
|
resizable?: boolean;
|
|
14
|
+
/** Forwarded to the declaration: lock the column's width when the window
|
|
15
|
+
* resizes. Doesn't affect the slide, which resizes the column outright. */
|
|
16
|
+
lockWidthOnWindowResize?: boolean;
|
|
14
17
|
};
|
|
15
18
|
export type PanelDockedSlide = {
|
|
16
19
|
/** Whether the panel's content should render at all (entering, open, or
|
|
@@ -29,4 +32,4 @@ export type PanelDockedSlide = {
|
|
|
29
32
|
* reduced motion is requested. The mobile modal-drawer lifecycle lives in
|
|
30
33
|
* {@link useExitAnimation} and the Drawer's styled components.
|
|
31
34
|
*/
|
|
32
|
-
export declare function usePanelDockedSlide({ slot, defaultSize, minSize, maxSize, collapsible, resizable, }: PanelDockedSlideOptions): PanelDockedSlide;
|
|
35
|
+
export declare function usePanelDockedSlide({ slot, defaultSize, minSize, maxSize, collapsible, resizable, lockWidthOnWindowResize, }: PanelDockedSlideOptions): PanelDockedSlide;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"usePanelDockedSlide",{enumerable:!0,get:function(){return usePanelDockedSlide}});const _react=require("react"),_react1=require("@emotion/react"),_useWindow=require("../../shared/useWindow"),_prefersReducedMotion=require("../../shared/prefersReducedMotion"),_registry=require("./registry"),_useLayout=require("./useLayout"),parseDurationMs=duration=>{let trimmed=duration.trim();return trimmed.endsWith("ms")?parseFloat(trimmed):trimmed.endsWith("s")?1e3*parseFloat(trimmed):parseFloat(trimmed)||0},resolveSizePx=(size,groupWidthPx)=>{if("number"==typeof size)return size;if("string"!=typeof size)return null;let parsed=parseFloat(size);return Number.isFinite(parsed)?size.trim().endsWith("px")?parsed:null!=groupWidthPx?parsed/100*groupWidthPx:null:null},groupColumnsOf=element=>{let columns=element.closest("[data-group]")?.querySelectorAll("[data-panel]");return columns?Array.from(columns):[element]},isHandleReady=handle=>{try{return handle.isCollapsed(),!0}catch{return!1}};function usePanelDockedSlide({slot,defaultSize,minSize,maxSize,collapsible,resizable}){let{isVisible,state}=(0,_useLayout.useLayout)()[slot],theme=(0,_react1.useTheme)(),window=(0,_useWindow.useWindow)(),animation=(0,_registry.usePanelAnimationControl)(),reducedMotion=(0,_prefersReducedMotion.prefersReducedMotion)(window),[isMounted,setIsMounted]=(0,_react.useState)(isVisible),[phase,setPhase]=(0,_react.useState)("idle"),[pinnedWidth,setPinnedWidth]=(0,_react.useState)(null),[prevVisible,setPrevVisible]=(0,_react.useState)(isVisible);return isVisible!==prevVisible&&(setPrevVisible(isVisible),setPhase(isVisible?"entering":"exiting"),isVisible&&setIsMounted(!0)),(0,_registry.useDeclarePanel)(slot,{defaultSize:"entering"===phase&&collapsible&&!reducedMotion?0:defaultSize,minSize,maxSize,collapsible,resizable}),(0,_registry.usePanelPresence)(slot,isMounted),(0,_react.useLayoutEffect)(()=>{if("idle"===phase)return;let cancelled=!1,frame=0,settleTimer=0,animatedColumns=[];animation?.setResizeSuppressed(slot,!0);let{duration,timingFunction}=theme.variables.animation.navSlide.open,durationMs=parseDurationMs(duration),setColumnTransitions=enabled=>{animatedColumns.forEach(column=>{enabled?column.style.setProperty("transition",`flex-grow ${duration} ${timingFunction}`):column.style.removeProperty("transition")})},targetSize=state.size??defaultSize??minSize,openColumn=(handle,targetPx)=>{handle.isCollapsed()&&handle.expand(),handle.resize(targetPx??targetSize??minSize??"20%")},settle=handle=>{if(setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1),"entering"===phase&&handle)try{handle.getSize().inPixels<1&&openColumn(handle,null)}catch{}setPinnedWidth(null),"exiting"===phase&&setIsMounted(!1),setPhase("idle")},runSlide=(handle,element)=>{animatedColumns=groupColumnsOf(element);let targetPx=resolveSizePx(targetSize,element.closest("[data-group]")?.getBoundingClientRect().width??null);setPinnedWidth("entering"===phase?targetPx:handle.getSize().inPixels),setColumnTransitions(!0),element.getBoundingClientRect();try{"entering"===phase?openColumn(handle,targetPx):handle.collapse()}catch{settle(handle);return}settleTimer=window.setTimeout(()=>settle(handle),durationMs+80)},waitForColumn=attempt=>{if(cancelled)return;let handle=animation?.getHandle(slot)??null,element=animation?.getElement(slot)??null;return handle&&element&&isHandleReady(handle)?void runSlide(handle,element):"exiting"===phase||!animation||attempt>=30?void settle(handle):void(frame=window.requestAnimationFrame(()=>waitForColumn(attempt+1)))};return!collapsible||reducedMotion?settle(animation?.getHandle(slot)??null):waitForColumn(0),()=>{cancelled=!0,window.cancelAnimationFrame(frame),window.clearTimeout(settleTimer),setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1)}},[phase,slot,collapsible,animation,window,theme]),{isMounted,pinnedWidth}}
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"usePanelDockedSlide",{enumerable:!0,get:function(){return usePanelDockedSlide}});const _react=require("react"),_react1=require("@emotion/react"),_useWindow=require("../../shared/useWindow"),_prefersReducedMotion=require("../../shared/prefersReducedMotion"),_registry=require("./registry"),_useLayout=require("./useLayout"),parseDurationMs=duration=>{let trimmed=duration.trim();return trimmed.endsWith("ms")?parseFloat(trimmed):trimmed.endsWith("s")?1e3*parseFloat(trimmed):parseFloat(trimmed)||0},resolveSizePx=(size,groupWidthPx)=>{if("number"==typeof size)return size;if("string"!=typeof size)return null;let parsed=parseFloat(size);return Number.isFinite(parsed)?size.trim().endsWith("px")?parsed:null!=groupWidthPx?parsed/100*groupWidthPx:null:null},groupColumnsOf=element=>{let columns=element.closest("[data-group]")?.querySelectorAll("[data-panel]");return columns?Array.from(columns):[element]},isHandleReady=handle=>{try{return handle.isCollapsed(),!0}catch{return!1}};function usePanelDockedSlide({slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize}){let{isVisible,state}=(0,_useLayout.useLayout)()[slot],theme=(0,_react1.useTheme)(),window=(0,_useWindow.useWindow)(),animation=(0,_registry.usePanelAnimationControl)(),reducedMotion=(0,_prefersReducedMotion.prefersReducedMotion)(window),[isMounted,setIsMounted]=(0,_react.useState)(isVisible),[phase,setPhase]=(0,_react.useState)("idle"),[pinnedWidth,setPinnedWidth]=(0,_react.useState)(null),[prevVisible,setPrevVisible]=(0,_react.useState)(isVisible);return isVisible!==prevVisible&&(setPrevVisible(isVisible),setPhase(isVisible?"entering":"exiting"),isVisible&&setIsMounted(!0)),(0,_registry.useDeclarePanel)(slot,{defaultSize:"entering"===phase&&collapsible&&!reducedMotion?0:defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize}),(0,_registry.usePanelPresence)(slot,isMounted),(0,_react.useLayoutEffect)(()=>{if("idle"===phase)return;let cancelled=!1,frame=0,settleTimer=0,animatedColumns=[];animation?.setResizeSuppressed(slot,!0);let{duration,timingFunction}=theme.variables.animation.navSlide.open,durationMs=parseDurationMs(duration),setColumnTransitions=enabled=>{animatedColumns.forEach(column=>{enabled?column.style.setProperty("transition",`flex-grow ${duration} ${timingFunction}`):column.style.removeProperty("transition")})},targetSize=state.size??defaultSize??minSize,openColumn=(handle,targetPx)=>{handle.isCollapsed()&&handle.expand(),handle.resize(targetPx??targetSize??minSize??"20%")},settle=handle=>{if(setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1),"entering"===phase&&handle)try{handle.getSize().inPixels<1&&openColumn(handle,null)}catch{}setPinnedWidth(null),"exiting"===phase&&setIsMounted(!1),setPhase("idle")},runSlide=(handle,element)=>{animatedColumns=groupColumnsOf(element);let targetPx=resolveSizePx(targetSize,element.closest("[data-group]")?.getBoundingClientRect().width??null);setPinnedWidth("entering"===phase?targetPx:handle.getSize().inPixels),setColumnTransitions(!0),element.getBoundingClientRect();try{"entering"===phase?openColumn(handle,targetPx):handle.collapse()}catch{settle(handle);return}settleTimer=window.setTimeout(()=>settle(handle),durationMs+80)},waitForColumn=attempt=>{if(cancelled)return;let handle=animation?.getHandle(slot)??null,element=animation?.getElement(slot)??null;return handle&&element&&isHandleReady(handle)?void runSlide(handle,element):"exiting"===phase||!animation||attempt>=30?void settle(handle):void(frame=window.requestAnimationFrame(()=>waitForColumn(attempt+1)))};return!collapsible||reducedMotion?settle(animation?.getHandle(slot)??null):waitForColumn(0),()=>{cancelled=!0,window.cancelAnimationFrame(frame),window.clearTimeout(settleTimer),setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1)}},[phase,slot,collapsible,animation,window,theme]),{isMounted,pinnedWidth}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"BaseTooltip",{enumerable:!0,get:function(){return BaseTooltip}});const _interop_require_wildcard=require("@swc/helpers/_/_interop_require_wildcard"),_interactions=require("@react-aria/interactions"),_react=/*#__PURE__*/_interop_require_wildcard._(require("react")),_TooltipContent=require("./TooltipContent");function BaseTooltip({placement="auto",content,children,externalTriggerRef,portalContainer,contentPadding,maxWidth,subTheme,"data-e2e-test-id":dataE2eTestId,onVisibilityChange,privateProps,...ariaAttributes}){let tooltipId=(0,_react.useMemo)(()=>`DSTooltip_${Math.floor(Date.now()*Math.random())}`,[]),{isFocusVisible}=(0,_interactions.useFocusVisible)(),[isVisible,setVisible]=(0,_react.useState)(!1),triggeredByEvent=(0,_react.useRef)(null),isTooltipHovered=(0,_react.useRef)(!1),isTriggerHovered=(0,_react.useRef)(!1),hideTooltipTimeoutId=(0,_react.useRef)(null),showTooltipTimeoutId=(0,_react.useRef)(null),internalTriggerRef=(0,_react.useRef)(null),triggerRef=externalTriggerRef||internalTriggerRef,toggleVisibility=(0,_react.useCallback)(status=>{setVisible(status),onVisibilityChange&&onVisibilityChange(status)},[onVisibilityChange]),handleTriggerPointerEnter=(0,_react.useCallback)(()=>{isTriggerHovered.current=!0,isTooltipHovered.current||(clearTimeout(showTooltipTimeoutId.current),showTooltipTimeoutId.current=setTimeout(()=>{isTriggerHovered.current&&(triggeredByEvent.current="hover",toggleVisibility(!0))},200))},[toggleVisibility]),handleTriggerPointerLeave=(0,_react.useCallback)(()=>{isTriggerHovered.current=!1,clearTimeout(hideTooltipTimeoutId.current),hideTooltipTimeoutId.current=setTimeout(()=>{isTooltipHovered.current||"hover"!==triggeredByEvent.current||isTriggerHovered.current||toggleVisibility(!1)},200)},[toggleVisibility]),handleTriggerFocus=(0,_react.useCallback)(()=>{isFocusVisible&&(triggeredByEvent.current="focus",toggleVisibility(!0))},[isFocusVisible,toggleVisibility]),handleTriggerBlur=(0,_react.useCallback)(()=>{"focus"===triggeredByEvent.current&&toggleVisibility(!1)},[toggleVisibility]),handleTriggerClick=(0,_react.useCallback)(()=>{toggleVisibility(!1)},[toggleVisibility]),handleTriggerKeyDown=(0,_react.useCallback)(evt=>{"Escape"===evt.key&&toggleVisibility(!1)},[toggleVisibility]);(0,_react.useEffect)(()=>()=>{clearTimeout(showTooltipTimeoutId.current),clearTimeout(hideTooltipTimeoutId.current)},[]),(0,_react.useEffect)(()=>{let trigger;if(externalTriggerRef?.current&&!children){let triggerTabIndex=(trigger=externalTriggerRef.current).getAttribute("tabindex");trigger.setAttribute("tabindex",triggerTabIndex??"0"),trigger.addEventListener("pointerenter",handleTriggerPointerEnter),trigger.addEventListener("pointerleave",handleTriggerPointerLeave),trigger.addEventListener("focus",handleTriggerFocus),trigger.addEventListener("blur",handleTriggerBlur),trigger.addEventListener("click",handleTriggerClick),trigger.addEventListener("keydown",handleTriggerKeyDown)}return()=>{trigger&&(trigger.removeEventListener("pointerenter",handleTriggerPointerEnter),trigger.removeEventListener("pointerleave",handleTriggerPointerLeave),trigger.removeEventListener("focus",handleTriggerFocus),trigger.removeEventListener("blur",handleTriggerBlur),trigger.removeEventListener("click",handleTriggerClick),trigger.removeEventListener("keydown",handleTriggerKeyDown))}},[externalTriggerRef,children,handleTriggerPointerEnter,handleTriggerPointerLeave,handleTriggerFocus,handleTriggerBlur,handleTriggerClick,handleTriggerKeyDown]),(0,_react.useEffect)(()=>{if(externalTriggerRef?.current&&!children){let trigger=externalTriggerRef.current;isVisible?trigger.setAttribute("aria-describedby",tooltipId):trigger.removeAttribute("aria-describedby")}},[externalTriggerRef,children,tooltipId,isVisible]);let triggerElm=children?_react.default.cloneElement(children,{ref:triggerRef,...ariaAttributes,...isVisible&&{"aria-describedby":tooltipId},tabIndex:children.props.tabIndex??0,onPointerEnter:handleTriggerPointerEnter,onPointerLeave:handleTriggerPointerLeave,onFocus:evt=>{handleTriggerFocus(),children.props.onFocus&&children.props.onFocus(evt)},onBlur:evt=>{handleTriggerBlur(),children.props.onBlur&&children.props.onBlur(evt)},onClick:evt=>{handleTriggerClick(),children.props.onClick&&children.props.onClick(evt)},onKeyDown:handleTriggerKeyDown}):null,tooltipElm=_react.default.createElement(_TooltipContent.TooltipContent,{dataDSId:"Tooltip",content:content,placement:placement,portalContainer:portalContainer,dataE2eTestId:dataE2eTestId,isVisible:isVisible,tooltipId:tooltipId,triggerRef:triggerRef,
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"BaseTooltip",{enumerable:!0,get:function(){return BaseTooltip}});const _interop_require_wildcard=require("@swc/helpers/_/_interop_require_wildcard"),_interactions=require("@react-aria/interactions"),_react=/*#__PURE__*/_interop_require_wildcard._(require("react")),_TooltipContent=require("./TooltipContent");function BaseTooltip({placement="auto",content,children,externalTriggerRef,portalContainer,contentPadding,maxWidth,subTheme,"data-e2e-test-id":dataE2eTestId,onVisibilityChange,privateProps,...ariaAttributes}){let tooltipId=(0,_react.useMemo)(()=>`DSTooltip_${Math.floor(Date.now()*Math.random())}`,[]),{isFocusVisible}=(0,_interactions.useFocusVisible)(),[isVisible,setVisible]=(0,_react.useState)(!1),triggeredByEvent=(0,_react.useRef)(null),isTooltipHovered=(0,_react.useRef)(!1),isTriggerHovered=(0,_react.useRef)(!1),hideTooltipTimeoutId=(0,_react.useRef)(null),showTooltipTimeoutId=(0,_react.useRef)(null),internalTriggerRef=(0,_react.useRef)(null),triggerRef=externalTriggerRef||internalTriggerRef,toggleVisibility=(0,_react.useCallback)(status=>{setVisible(status),onVisibilityChange&&onVisibilityChange(status)},[onVisibilityChange]),handleTriggerPointerEnter=(0,_react.useCallback)(()=>{isTriggerHovered.current=!0,isTooltipHovered.current||(clearTimeout(showTooltipTimeoutId.current),showTooltipTimeoutId.current=setTimeout(()=>{isTriggerHovered.current&&(triggeredByEvent.current="hover",toggleVisibility(!0))},200))},[toggleVisibility]),handleTriggerPointerLeave=(0,_react.useCallback)(()=>{isTriggerHovered.current=!1,clearTimeout(hideTooltipTimeoutId.current),hideTooltipTimeoutId.current=setTimeout(()=>{isTooltipHovered.current||"hover"!==triggeredByEvent.current||isTriggerHovered.current||toggleVisibility(!1)},200)},[toggleVisibility]),handleTriggerFocus=(0,_react.useCallback)(()=>{isFocusVisible&&(triggeredByEvent.current="focus",toggleVisibility(!0))},[isFocusVisible,toggleVisibility]),handleTriggerBlur=(0,_react.useCallback)(()=>{"focus"===triggeredByEvent.current&&toggleVisibility(!1)},[toggleVisibility]),handleTriggerClick=(0,_react.useCallback)(()=>{toggleVisibility(!1)},[toggleVisibility]),handleTriggerKeyDown=(0,_react.useCallback)(evt=>{"Escape"===evt.key&&toggleVisibility(!1)},[toggleVisibility]);(0,_react.useEffect)(()=>()=>{clearTimeout(showTooltipTimeoutId.current),clearTimeout(hideTooltipTimeoutId.current)},[]),(0,_react.useEffect)(()=>{let trigger;if(externalTriggerRef?.current&&!children){let triggerTabIndex=(trigger=externalTriggerRef.current).getAttribute("tabindex");trigger.setAttribute("tabindex",triggerTabIndex??"0"),trigger.addEventListener("pointerenter",handleTriggerPointerEnter),trigger.addEventListener("pointerleave",handleTriggerPointerLeave),trigger.addEventListener("focus",handleTriggerFocus),trigger.addEventListener("blur",handleTriggerBlur),trigger.addEventListener("click",handleTriggerClick),trigger.addEventListener("keydown",handleTriggerKeyDown)}return()=>{trigger&&(trigger.removeEventListener("pointerenter",handleTriggerPointerEnter),trigger.removeEventListener("pointerleave",handleTriggerPointerLeave),trigger.removeEventListener("focus",handleTriggerFocus),trigger.removeEventListener("blur",handleTriggerBlur),trigger.removeEventListener("click",handleTriggerClick),trigger.removeEventListener("keydown",handleTriggerKeyDown))}},[externalTriggerRef,children,handleTriggerPointerEnter,handleTriggerPointerLeave,handleTriggerFocus,handleTriggerBlur,handleTriggerClick,handleTriggerKeyDown]),(0,_react.useEffect)(()=>{if(externalTriggerRef?.current&&!children){let trigger=externalTriggerRef.current;isVisible?trigger.setAttribute("aria-describedby",tooltipId):trigger.removeAttribute("aria-describedby")}},[externalTriggerRef,children,tooltipId,isVisible]);let triggerElm=children?_react.default.cloneElement(children,{ref:triggerRef,...ariaAttributes,...isVisible&&{"aria-describedby":tooltipId},tabIndex:children.props.tabIndex??0,onPointerEnter:handleTriggerPointerEnter,onPointerLeave:handleTriggerPointerLeave,onFocus:evt=>{handleTriggerFocus(),children.props.onFocus&&children.props.onFocus(evt)},onBlur:evt=>{handleTriggerBlur(),children.props.onBlur&&children.props.onBlur(evt)},onClick:evt=>{handleTriggerClick(),children.props.onClick&&children.props.onClick(evt)},onKeyDown:handleTriggerKeyDown}):null,tooltipElm=_react.default.createElement(_TooltipContent.TooltipContent,{dataDSId:"Tooltip",content:content,placement:placement,portalContainer:portalContainer,dataE2eTestId:dataE2eTestId,isVisible:isVisible,tooltipId:tooltipId,triggerRef:triggerRef,role:"tooltip",contentPadding:contentPadding,maxWidth:maxWidth,subTheme:subTheme,onTooltipPointerEnter:()=>{isTooltipHovered.current=!0},onTooltipPointerLeave:()=>{isTooltipHovered.current=!1,"hover"===triggeredByEvent.current&&toggleVisibility(!1)},privateProps:privateProps});return _react.default.createElement(_react.default.Fragment,null,triggerElm,tooltipElm)}
|
|
@@ -3,5 +3,7 @@ import type { BaseTooltipProps } from "./BaseTooltip";
|
|
|
3
3
|
import type { TooltipConditionalProps } from "./types";
|
|
4
4
|
export type TooltipProps = Omit<BaseTooltipProps, "content" | "contentPadding" | "maxWidth" | "subTheme"> & {
|
|
5
5
|
content: string;
|
|
6
|
+
/** The keyboard shortcut that triggers the same action, shown in a second column beside the content. Pass a `Kbd` for keys pressed together or a `KbdGroup` for a sequence. Hidden below the `m` breakpoint, which has no keyboard. */
|
|
7
|
+
shortcut?: React.ReactElement;
|
|
6
8
|
} & TooltipConditionalProps;
|
|
7
|
-
export declare function Tooltip({ content, ...rest }: TooltipProps): React.ReactElement;
|
|
9
|
+
export declare function Tooltip({ content, shortcut, ...rest }: TooltipProps): React.ReactElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Tooltip",{enumerable:!0,get:function(){return Tooltip}});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Tooltip",{enumerable:!0,get:function(){return Tooltip}});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")),_Text=require("../Typography/Text/Text"),_mediaQueries=require("../../shared/mediaQueries"),_BaseTooltip=require("./BaseTooltip"),StyledTooltipRow=(0,_styled.default)("div",{target:"erivg040",label:"StyledTooltipRow"})(({theme})=>({display:"flex",alignItems:"flex-start",gap:theme.variables.size.spacing.xxs})),StyledKbdColumn=(0,_styled.default)("div",{target:"erivg041",label:"StyledKbdColumn"})(({theme})=>({flexShrink:0,paddingTop:theme.variables.size.spacing.xxxs,...(0,_mediaQueries.mqValue)({display:["none","flex"]})})),CustomText=(0,_styled.default)(_Text.Text,{target:"erivg042",label:"CustomText"})({flex:"1 0 0",minWidth:0});function Tooltip({content,shortcut,...rest}){let contentElm=shortcut?_react.default.createElement(StyledTooltipRow,null,_react.default.createElement(CustomText,{size:"s"},content),_react.default.createElement(StyledKbdColumn,null,shortcut)):_react.default.createElement(_Text.Text,{size:"s"},content);return _react.default.createElement(_BaseTooltip.BaseTooltip,{content:contentElm,subTheme:"inverted",...rest})}
|
package/build/cjs/index.d.ts
CHANGED
|
@@ -42,6 +42,7 @@ export * from "./components/Content/DosageButton";
|
|
|
42
42
|
export * from "./components/Content/ReferenceButton";
|
|
43
43
|
export * from "./components/CountButton/CountButton";
|
|
44
44
|
export * from "./components/DataTable";
|
|
45
|
+
export * from "./components/DataTable/DataTableToolbar/DataTableToolbar";
|
|
45
46
|
export * from "./components/Divider/Divider";
|
|
46
47
|
export * from "./components/DropdownMenu/DropdownMenu";
|
|
47
48
|
export * from "./components/EntityList";
|
package/build/cjs/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get CacheProvider(){return _react.CacheProvider},get ThemeProvider(){return _react.ThemeProvider},get createCache(){return _cache.default},get dark(){return dark},get light(){return light}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _export_star=require("@swc/helpers/_/_export_star"),_interop_require_default=require("@swc/helpers/_/_interop_require_default"),_visualConfig=require("./web-tokens/visualConfig"),_cache=/*#__PURE__*/_interop_require_default._(require("@emotion/cache")),_react=require("@emotion/react");_export_star._(require("./components/AccessCardItem/AccessCardItem"),exports),_export_star._(require("./components/AIButton/AIButton"),exports),_export_star._(require("./components/AIFloatingButton/AIFloatingButton"),exports),_export_star._(require("./components/Avatar/Avatar"),exports),_export_star._(require("./components/AvatarGroup/AvatarGroup"),exports),_export_star._(require("./components/Badge/Badge"),exports),_export_star._(require("./components/BinaryFeedback/BinaryFeedback"),exports),_export_star._(require("./components/Box/Box"),exports),_export_star._(require("./components/BulkActionsToolbar/BulkActionsToolbar"),exports),_export_star._(require("./components/Button/Button"),exports),_export_star._(require("./components/Callout/Callout"),exports),_export_star._(require("./components/Card/Card"),exports),_export_star._(require("./components/Card/CardBox/CardBox"),exports),_export_star._(require("./components/CatalogCard/CatalogCard"),exports),_export_star._(require("./components/ChatMessage"),exports),_export_star._(require("./components/ChatResponse"),exports),_export_star._(require("./components/CheckboxCard/CheckboxCard"),exports),_export_star._(require("./components/Collapsible/Collapsible"),exports),_export_star._(require("./components/ColorIndicator/ColorIndicator"),exports),_export_star._(require("./components/ColorPicker/ColorPicker"),exports),_export_star._(require("./components/Column/Columns"),exports),_export_star._(require("./components/Composite/FilterDialog/FilterDialog"),exports),_export_star._(require("./components/Container"),exports),_export_star._(require("./components/Content/ContentBadge/ContentBadge"),exports),_export_star._(require("./components/Content/ContentBox/ContentBox"),exports),_export_star._(require("./components/Content/ContentCheckbox/ContentCheckbox"),exports),_export_star._(require("./components/Content/ContentFontResizer"),exports),_export_star._(require("./components/Content/ContentHeading/ContentHeading"),exports),_export_star._(require("./components/Content/ContentLink/ContentLink"),exports),_export_star._(require("./components/Content/ContentList"),exports),_export_star._(require("./components/Content/ContentPictogramButton/ContentPictogramButton"),exports),_export_star._(require("./components/Content/ContentTable"),exports),_export_star._(require("./components/Content/ContentTableModal/ContentTableModal"),exports),_export_star._(require("./components/Content/ContentText/ContentText"),exports),_export_star._(require("./components/Content/DosageButton"),exports),_export_star._(require("./components/Content/ReferenceButton"),exports),_export_star._(require("./components/CountButton/CountButton"),exports),_export_star._(require("./components/DataTable"),exports),_export_star._(require("./components/Divider/Divider"),exports),_export_star._(require("./components/DropdownMenu/DropdownMenu"),exports),_export_star._(require("./components/EntityList"),exports),_export_star._(require("./components/EntityTree"),exports),_export_star._(require("./components/Form/Checkbox/Checkbox"),exports),_export_star._(require("./components/Form/Combobox/Combobox"),exports),_export_star._(require("./components/Form/DateInput/DateInput"),exports),_export_star._(require("./components/Form/DatePicker"),exports),_export_star._(require("./components/Form/FormFieldGroup/FormFieldGroup"),exports),_export_star._(require("./components/Form/Input"),exports),_export_star._(require("./components/Form/MaskedInput/MaskedInput"),exports),_export_star._(require("./components/Form/PasswordInput"),exports),_export_star._(require("./components/Form/Radio/Radio"),exports),_export_star._(require("./components/Form/RadioButton/RadioButton"),exports),_export_star._(require("./components/Form/RangeInput/RangeInput"),exports),_export_star._(require("./components/Form/SearchInput/SearchInput"),exports),_export_star._(require("./components/Form/SegmentedControl/SegmentedControl"),exports),_export_star._(require("./components/Form/Select"),exports),_export_star._(require("./components/Form/Textarea/Textarea"),exports),_export_star._(require("./components/Form/Toggle/Toggle"),exports),_export_star._(require("./components/Form/ToggleButton/ToggleButton"),exports),_export_star._(require("./components/Form/ToolbarToggle/ToolbarToggle"),exports),_export_star._(require("./components/Grid/Grid"),exports),_export_star._(require("./components/Icon/Icon"),exports),_export_star._(require("./components/IconTile/IconTile"),exports),_export_star._(require("./components/Image/Image"),exports),_export_star._(require("./components/Inline/Inline"),exports),_export_star._(require("./components/InlineMessage/InlineMessage"),exports),_export_star._(require("./components/InteractiveBox/InteractiveBox"),exports),_export_star._(require("./components/Layout"),exports),_export_star._(require("./components/Lightbox/Lightbox"),exports),_export_star._(require("./components/Link/Link"),exports),_export_star._(require("./components/LoadingSpinner/LoadingSpinner"),exports),_export_star._(require("./components/Logo/Logo"),exports),_export_star._(require("./components/MediaItem"),exports),_export_star._(require("./components/MediaViewerBar/MediaViewerBar"),exports),_export_star._(require("./components/MediaViewerCarousel/MediaViewerCarousel"),exports),_export_star._(require("./components/NavBar"),exports),_export_star._(require("./components/Notification/Notification"),exports),_export_star._(require("./components/Pagination/Pagination"),exports),_export_star._(require("./components/Patterns/ButtonGroup/ButtonGroup"),exports),_export_star._(require("./components/Patterns/EmptyState/EmptyState"),exports),_export_star._(require("./components/Patterns/Modal/Modal"),exports),_export_star._(require("./components/PictogramButton/PictogramButton"),exports),_export_star._(require("./components/Popover/Popover"),exports),_export_star._(require("./components/ProgressBar/ProgressBar"),exports),_export_star._(require("./components/PromptButton/PromptButton"),exports),_export_star._(require("./components/PromptButtonGroup/PromptButtonGroup"),exports),_export_star._(require("./components/PromptInput/PromptInput"),exports),_export_star._(require("./components/QBankRichText/QBankRichText"),exports),_export_star._(require("./components/RadioCard/RadioCard"),exports),_export_star._(require("./components/RangePopover/RangePopover"),exports),_export_star._(require("./components/RoundButton/RoundButton"),exports),_export_star._(require("./components/SearchResult/SearchResult"),exports),_export_star._(require("./components/SegmentedProgressBar/SegmentedProgressBar"),exports),_export_star._(require("./components/Sheet/Sheet"),exports),_export_star._(require("./components/SplashCard/SplashCard"),exports),_export_star._(require("./components/SplashCardMedia/SplashCardMedia"),exports),_export_star._(require("./components/Stack/Stack"),exports),_export_star._(require("./components/StatusIndicator/StatusIndicator"),exports),_export_star._(require("./components/SubThemeProvider/SubThemeProvider"),exports),_export_star._(require("./components/Tabs/Tabs"),exports),_export_star._(require("./components/Tag/Tag"),exports),_export_star._(require("./components/TagGroup/TagGroup"),exports),_export_star._(require("./components/Toast"),exports),_export_star._(require("./components/Toggletip/Toggletip"),exports),_export_star._(require("./components/Tooltip/Tooltip"),exports),_export_star._(require("./components/Tutorialtip/Tutorialtip"),exports),_export_star._(require("./components/Typography/Header"),exports),_export_star._(require("./components/Typography/StyledText/StyledText"),exports),_export_star._(require("./components/Typography/Text"),exports),_export_star._(require("./components/Typography/TextClamped/TextClamped"),exports),_export_star._(require("./components/UserHighlightTooltip/UserHighlightTooltip"),exports),_export_star._(require("./components/Utilities/AnimatedBorder/useAnimatedBorder"),exports),_export_star._(require("./components/Utilities/ContainerQuery/ContainerQuery"),exports),_export_star._(require("./components/Utilities/Expandable/Expandable"),exports),_export_star._(require("./components/Utilities/ScreenReaderText/ScreenReaderText"),exports),_export_star._(require("./shared/useSelectionRange"),exports);const{dark,light}=_visualConfig.ambossVisualConfiguration;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get CacheProvider(){return _react.CacheProvider},get ThemeProvider(){return _react.ThemeProvider},get createCache(){return _cache.default},get dark(){return dark},get light(){return light}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _export_star=require("@swc/helpers/_/_export_star"),_interop_require_default=require("@swc/helpers/_/_interop_require_default"),_visualConfig=require("./web-tokens/visualConfig"),_cache=/*#__PURE__*/_interop_require_default._(require("@emotion/cache")),_react=require("@emotion/react");_export_star._(require("./components/AccessCardItem/AccessCardItem"),exports),_export_star._(require("./components/AIButton/AIButton"),exports),_export_star._(require("./components/AIFloatingButton/AIFloatingButton"),exports),_export_star._(require("./components/Avatar/Avatar"),exports),_export_star._(require("./components/AvatarGroup/AvatarGroup"),exports),_export_star._(require("./components/Badge/Badge"),exports),_export_star._(require("./components/BinaryFeedback/BinaryFeedback"),exports),_export_star._(require("./components/Box/Box"),exports),_export_star._(require("./components/BulkActionsToolbar/BulkActionsToolbar"),exports),_export_star._(require("./components/Button/Button"),exports),_export_star._(require("./components/Callout/Callout"),exports),_export_star._(require("./components/Card/Card"),exports),_export_star._(require("./components/Card/CardBox/CardBox"),exports),_export_star._(require("./components/CatalogCard/CatalogCard"),exports),_export_star._(require("./components/ChatMessage"),exports),_export_star._(require("./components/ChatResponse"),exports),_export_star._(require("./components/CheckboxCard/CheckboxCard"),exports),_export_star._(require("./components/Collapsible/Collapsible"),exports),_export_star._(require("./components/ColorIndicator/ColorIndicator"),exports),_export_star._(require("./components/ColorPicker/ColorPicker"),exports),_export_star._(require("./components/Column/Columns"),exports),_export_star._(require("./components/Composite/FilterDialog/FilterDialog"),exports),_export_star._(require("./components/Container"),exports),_export_star._(require("./components/Content/ContentBadge/ContentBadge"),exports),_export_star._(require("./components/Content/ContentBox/ContentBox"),exports),_export_star._(require("./components/Content/ContentCheckbox/ContentCheckbox"),exports),_export_star._(require("./components/Content/ContentFontResizer"),exports),_export_star._(require("./components/Content/ContentHeading/ContentHeading"),exports),_export_star._(require("./components/Content/ContentLink/ContentLink"),exports),_export_star._(require("./components/Content/ContentList"),exports),_export_star._(require("./components/Content/ContentPictogramButton/ContentPictogramButton"),exports),_export_star._(require("./components/Content/ContentTable"),exports),_export_star._(require("./components/Content/ContentTableModal/ContentTableModal"),exports),_export_star._(require("./components/Content/ContentText/ContentText"),exports),_export_star._(require("./components/Content/DosageButton"),exports),_export_star._(require("./components/Content/ReferenceButton"),exports),_export_star._(require("./components/CountButton/CountButton"),exports),_export_star._(require("./components/DataTable"),exports),_export_star._(require("./components/DataTable/DataTableToolbar/DataTableToolbar"),exports),_export_star._(require("./components/Divider/Divider"),exports),_export_star._(require("./components/DropdownMenu/DropdownMenu"),exports),_export_star._(require("./components/EntityList"),exports),_export_star._(require("./components/EntityTree"),exports),_export_star._(require("./components/Form/Checkbox/Checkbox"),exports),_export_star._(require("./components/Form/Combobox/Combobox"),exports),_export_star._(require("./components/Form/DateInput/DateInput"),exports),_export_star._(require("./components/Form/DatePicker"),exports),_export_star._(require("./components/Form/FormFieldGroup/FormFieldGroup"),exports),_export_star._(require("./components/Form/Input"),exports),_export_star._(require("./components/Form/MaskedInput/MaskedInput"),exports),_export_star._(require("./components/Form/PasswordInput"),exports),_export_star._(require("./components/Form/Radio/Radio"),exports),_export_star._(require("./components/Form/RadioButton/RadioButton"),exports),_export_star._(require("./components/Form/RangeInput/RangeInput"),exports),_export_star._(require("./components/Form/SearchInput/SearchInput"),exports),_export_star._(require("./components/Form/SegmentedControl/SegmentedControl"),exports),_export_star._(require("./components/Form/Select"),exports),_export_star._(require("./components/Form/Textarea/Textarea"),exports),_export_star._(require("./components/Form/Toggle/Toggle"),exports),_export_star._(require("./components/Form/ToggleButton/ToggleButton"),exports),_export_star._(require("./components/Form/ToolbarToggle/ToolbarToggle"),exports),_export_star._(require("./components/Grid/Grid"),exports),_export_star._(require("./components/Icon/Icon"),exports),_export_star._(require("./components/IconTile/IconTile"),exports),_export_star._(require("./components/Image/Image"),exports),_export_star._(require("./components/Inline/Inline"),exports),_export_star._(require("./components/InlineMessage/InlineMessage"),exports),_export_star._(require("./components/InteractiveBox/InteractiveBox"),exports),_export_star._(require("./components/Layout"),exports),_export_star._(require("./components/Lightbox/Lightbox"),exports),_export_star._(require("./components/Link/Link"),exports),_export_star._(require("./components/LoadingSpinner/LoadingSpinner"),exports),_export_star._(require("./components/Logo/Logo"),exports),_export_star._(require("./components/MediaItem"),exports),_export_star._(require("./components/MediaViewerBar/MediaViewerBar"),exports),_export_star._(require("./components/MediaViewerCarousel/MediaViewerCarousel"),exports),_export_star._(require("./components/NavBar"),exports),_export_star._(require("./components/Notification/Notification"),exports),_export_star._(require("./components/Pagination/Pagination"),exports),_export_star._(require("./components/Patterns/ButtonGroup/ButtonGroup"),exports),_export_star._(require("./components/Patterns/EmptyState/EmptyState"),exports),_export_star._(require("./components/Patterns/Modal/Modal"),exports),_export_star._(require("./components/PictogramButton/PictogramButton"),exports),_export_star._(require("./components/Popover/Popover"),exports),_export_star._(require("./components/ProgressBar/ProgressBar"),exports),_export_star._(require("./components/PromptButton/PromptButton"),exports),_export_star._(require("./components/PromptButtonGroup/PromptButtonGroup"),exports),_export_star._(require("./components/PromptInput/PromptInput"),exports),_export_star._(require("./components/QBankRichText/QBankRichText"),exports),_export_star._(require("./components/RadioCard/RadioCard"),exports),_export_star._(require("./components/RangePopover/RangePopover"),exports),_export_star._(require("./components/RoundButton/RoundButton"),exports),_export_star._(require("./components/SearchResult/SearchResult"),exports),_export_star._(require("./components/SegmentedProgressBar/SegmentedProgressBar"),exports),_export_star._(require("./components/Sheet/Sheet"),exports),_export_star._(require("./components/SplashCard/SplashCard"),exports),_export_star._(require("./components/SplashCardMedia/SplashCardMedia"),exports),_export_star._(require("./components/Stack/Stack"),exports),_export_star._(require("./components/StatusIndicator/StatusIndicator"),exports),_export_star._(require("./components/SubThemeProvider/SubThemeProvider"),exports),_export_star._(require("./components/Tabs/Tabs"),exports),_export_star._(require("./components/Tag/Tag"),exports),_export_star._(require("./components/TagGroup/TagGroup"),exports),_export_star._(require("./components/Toast"),exports),_export_star._(require("./components/Toggletip/Toggletip"),exports),_export_star._(require("./components/Tooltip/Tooltip"),exports),_export_star._(require("./components/Tutorialtip/Tutorialtip"),exports),_export_star._(require("./components/Typography/Header"),exports),_export_star._(require("./components/Typography/StyledText/StyledText"),exports),_export_star._(require("./components/Typography/Text"),exports),_export_star._(require("./components/Typography/TextClamped/TextClamped"),exports),_export_star._(require("./components/UserHighlightTooltip/UserHighlightTooltip"),exports),_export_star._(require("./components/Utilities/AnimatedBorder/useAnimatedBorder"),exports),_export_star._(require("./components/Utilities/ContainerQuery/ContainerQuery"),exports),_export_star._(require("./components/Utilities/Expandable/Expandable"),exports),_export_star._(require("./components/Utilities/ScreenReaderText/ScreenReaderText"),exports),_export_star._(require("./shared/useSelectionRange"),exports);const{dark,light}=_visualConfig.ambossVisualConfiguration;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const useIsMacOs: () => boolean;
|