@amboss/design-system 4.0.0-next.4 → 4.0.0-next.6
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/AvatarGroup/AvatarGroup.d.ts +1 -1
- package/build/cjs/components/AvatarGroup/AvatarGroup.js +1 -1
- package/build/cjs/components/BinaryFeedback/-types.d.ts +1 -1
- package/build/cjs/components/BulkActionsToolbar/BulkActionsToolbar.d.ts +1 -1
- package/build/cjs/components/CatalogCard/CatalogCard.js +1 -1
- package/build/cjs/components/ColorPicker/ColorPicker.d.ts +1 -1
- package/build/cjs/components/ColorPicker/ColorPickerDropdown.d.ts +1 -1
- package/build/cjs/components/Content/ContentPictogramButton/ContentPictogramButton.d.ts +1 -1
- package/build/cjs/components/Content/ContentTableModal/ContentTableModal.d.ts +1 -1
- package/build/cjs/components/EntityList/BaseEntityList.js +1 -1
- package/build/cjs/components/EntityList/VirtualizedEntityList.d.ts +3 -2
- package/build/cjs/components/EntityList/roles.d.ts +9 -0
- package/build/cjs/components/EntityList/roles.js +1 -0
- package/build/cjs/components/EntityList/types.d.ts +24 -7
- package/build/cjs/components/Form/SegmentedControl/-types.d.ts +3 -3
- package/build/cjs/components/Icon/Icon.d.ts +2 -2
- package/build/cjs/components/Icon/Icon.js +1 -1
- package/build/cjs/components/IconTile/IconTile.d.ts +1 -1
- package/build/cjs/components/Image/Image.d.ts +13 -21
- package/build/cjs/components/Image/Image.js +1 -1
- package/build/cjs/components/Internal/BaseTag/BaseTag.d.ts +1 -1
- package/build/cjs/components/Internal/Panel/Panel.d.ts +36 -0
- package/build/cjs/components/Internal/Panel/Panel.js +1 -0
- package/build/cjs/components/Internal/Panel/index.d.ts +2 -0
- package/build/cjs/components/Internal/Panel/index.js +1 -0
- package/build/cjs/components/Internal/Sandwich/-types.d.ts +36 -0
- package/build/cjs/components/Internal/Sandwich/-types.js +1 -0
- package/build/cjs/components/Internal/Sandwich/Sandwich.d.ts +23 -0
- package/build/cjs/components/Internal/Sandwich/Sandwich.js +1 -0
- package/build/cjs/components/Internal/Sandwich/SandwichBody.d.ts +3 -0
- package/build/cjs/components/Internal/Sandwich/SandwichBody.js +1 -0
- package/build/cjs/components/Internal/Sandwich/SandwichFooter.d.ts +3 -0
- package/build/cjs/components/Internal/Sandwich/SandwichFooter.js +1 -0
- package/build/cjs/components/Internal/Sandwich/SandwichHeader.d.ts +3 -0
- package/build/cjs/components/Internal/Sandwich/SandwichHeader.js +1 -0
- package/build/cjs/components/Internal/Sandwich/useSandwichContext.d.ts +12 -0
- package/build/cjs/components/Internal/Sandwich/useSandwichContext.js +1 -0
- package/build/cjs/components/Layout/-constants.d.ts +30 -0
- package/build/cjs/components/Layout/-constants.js +1 -0
- package/build/cjs/components/Layout/-types.d.ts +214 -0
- package/build/cjs/components/Layout/-types.js +1 -0
- package/build/cjs/components/Layout/Content.d.ts +7 -0
- package/build/cjs/components/Layout/Content.js +1 -0
- package/build/cjs/components/Layout/Layout.d.ts +17 -0
- package/build/cjs/components/Layout/Layout.js +1 -0
- package/build/cjs/components/Layout/LayoutProvider.d.ts +15 -0
- package/build/cjs/components/Layout/LayoutProvider.js +1 -0
- package/build/cjs/components/Layout/LayoutVars.d.ts +18 -0
- package/build/cjs/components/Layout/LayoutVars.js +1 -0
- package/build/cjs/components/Layout/RightPanel.d.ts +9 -0
- package/build/cjs/components/Layout/RightPanel.js +1 -0
- package/build/cjs/components/Layout/RightPanelContainer.d.ts +3 -0
- package/build/cjs/components/Layout/RightPanelContainer.js +1 -0
- package/build/cjs/components/Layout/Sidebar.d.ts +8 -0
- package/build/cjs/components/Layout/Sidebar.js +1 -0
- package/build/cjs/components/Layout/Split.d.ts +7 -0
- package/build/cjs/components/Layout/Split.js +1 -0
- package/build/cjs/components/Layout/context.d.ts +22 -0
- package/build/cjs/components/Layout/context.js +1 -0
- package/build/cjs/components/Layout/index.d.ts +9 -0
- package/build/cjs/components/Layout/index.js +1 -0
- package/build/cjs/components/Layout/reducer.d.ts +5 -0
- package/build/cjs/components/Layout/reducer.js +1 -0
- package/build/cjs/components/Layout/registry.d.ts +31 -0
- package/build/cjs/components/Layout/registry.js +1 -0
- package/build/cjs/components/Layout/store.d.ts +10 -0
- package/build/cjs/components/Layout/store.js +1 -0
- package/build/cjs/components/Layout/useLayout.d.ts +7 -0
- package/build/cjs/components/Layout/useLayout.js +1 -0
- package/build/cjs/components/Layout/usePanelRefs.d.ts +19 -0
- package/build/cjs/components/Layout/usePanelRefs.js +1 -0
- package/build/cjs/components/Layout/usePortalContainerRefs.d.ts +20 -0
- package/build/cjs/components/Layout/usePortalContainerRefs.js +1 -0
- package/build/cjs/components/Layout/varStore.d.ts +17 -0
- package/build/cjs/components/Layout/varStore.js +1 -0
- package/build/cjs/components/Lightbox/Lightbox.d.ts +1 -1
- package/build/cjs/components/NavBar/NavBarPrimaryNav.d.ts +4 -2
- package/build/cjs/components/NavBar/NavBarPrimaryNav.js +1 -1
- package/build/cjs/components/NavBar/NavBarSearchInput.d.ts +3 -2
- package/build/cjs/components/NavBar/NavBarSearchInput.js +1 -1
- package/build/cjs/components/NavBar/NavBarSecondaryNav.d.ts +5 -2
- package/build/cjs/components/NavBar/NavBarSecondaryNav.js +1 -1
- package/build/cjs/components/NavBar/NavBarSubMenuContainer.js +1 -1
- package/build/cjs/components/NavBar/constants.d.ts +1 -0
- package/build/cjs/components/NavBar/constants.js +1 -1
- package/build/cjs/components/Pagination/-types.d.ts +1 -1
- package/build/cjs/components/Patterns/EmptyState/EmptyState.d.ts +1 -1
- package/build/cjs/components/PictogramButton/PictogramButton.d.ts +14 -5
- package/build/cjs/components/PictogramButton/PictogramButton.js +1 -1
- package/build/cjs/components/ProgressBar/ProgressBar.d.ts +1 -1
- package/build/cjs/components/PromptInput/CategoryList.js +1 -1
- package/build/cjs/components/PromptInput/PromptTextArea.d.ts +1 -1
- package/build/cjs/components/SplashCardMedia/SplashCardMedia.d.ts +2 -2
- package/build/cjs/components/SplashCardMedia/SplashCardMedia.js +1 -1
- package/build/cjs/components/Typography/Header/Header.d.ts +1 -1
- package/build/cjs/index.d.ts +1 -0
- package/build/cjs/index.js +1 -1
- package/build/cjs/types/a11y.d.ts +10 -8
- package/build/cjs/types/index.d.ts +15 -1
- package/build/cjs/types/index.js +1 -1
- package/build/cjs/types/type-helpers.d.ts +39 -0
- package/build/cjs/types/type-helpers.js +1 -0
- package/build/esm/components/AvatarGroup/AvatarGroup.d.ts +1 -1
- package/build/esm/components/AvatarGroup/AvatarGroup.js +1 -1
- package/build/esm/components/BinaryFeedback/-types.d.ts +1 -1
- package/build/esm/components/BulkActionsToolbar/BulkActionsToolbar.d.ts +1 -1
- package/build/esm/components/CatalogCard/CatalogCard.js +1 -1
- package/build/esm/components/ColorPicker/ColorPicker.d.ts +1 -1
- package/build/esm/components/ColorPicker/ColorPickerDropdown.d.ts +1 -1
- package/build/esm/components/Content/ContentPictogramButton/ContentPictogramButton.d.ts +1 -1
- package/build/esm/components/Content/ContentTableModal/ContentTableModal.d.ts +1 -1
- package/build/esm/components/EntityList/BaseEntityList.js +1 -1
- package/build/esm/components/EntityList/VirtualizedEntityList.d.ts +3 -2
- package/build/esm/components/EntityList/roles.d.ts +9 -0
- package/build/esm/components/EntityList/roles.js +1 -0
- package/build/esm/components/EntityList/types.d.ts +24 -7
- package/build/esm/components/Form/SegmentedControl/-types.d.ts +3 -3
- package/build/esm/components/Icon/Icon.d.ts +2 -2
- package/build/esm/components/Icon/Icon.js +1 -1
- package/build/esm/components/IconTile/IconTile.d.ts +1 -1
- package/build/esm/components/Image/Image.d.ts +13 -21
- package/build/esm/components/Image/Image.js +1 -1
- package/build/esm/components/Internal/BaseTag/BaseTag.d.ts +1 -1
- package/build/esm/components/Internal/Panel/Panel.d.ts +36 -0
- package/build/esm/components/Internal/Panel/Panel.js +1 -0
- package/build/esm/components/Internal/Panel/index.d.ts +2 -0
- package/build/esm/components/Internal/Panel/index.js +1 -0
- package/build/esm/components/Internal/Sandwich/-types.d.ts +36 -0
- package/build/esm/components/Internal/Sandwich/-types.js +1 -0
- package/build/esm/components/Internal/Sandwich/Sandwich.d.ts +23 -0
- package/build/esm/components/Internal/Sandwich/Sandwich.js +1 -0
- package/build/esm/components/Internal/Sandwich/SandwichBody.d.ts +3 -0
- package/build/esm/components/Internal/Sandwich/SandwichBody.js +1 -0
- package/build/esm/components/Internal/Sandwich/SandwichFooter.d.ts +3 -0
- package/build/esm/components/Internal/Sandwich/SandwichFooter.js +1 -0
- package/build/esm/components/Internal/Sandwich/SandwichHeader.d.ts +3 -0
- package/build/esm/components/Internal/Sandwich/SandwichHeader.js +1 -0
- package/build/esm/components/Internal/Sandwich/useSandwichContext.d.ts +12 -0
- package/build/esm/components/Internal/Sandwich/useSandwichContext.js +1 -0
- package/build/esm/components/Layout/-constants.d.ts +30 -0
- package/build/esm/components/Layout/-constants.js +1 -0
- package/build/esm/components/Layout/-types.d.ts +214 -0
- package/build/esm/components/Layout/-types.js +1 -0
- package/build/esm/components/Layout/Content.d.ts +7 -0
- package/build/esm/components/Layout/Content.js +1 -0
- package/build/esm/components/Layout/Layout.d.ts +17 -0
- package/build/esm/components/Layout/Layout.js +1 -0
- package/build/esm/components/Layout/LayoutProvider.d.ts +15 -0
- package/build/esm/components/Layout/LayoutProvider.js +1 -0
- package/build/esm/components/Layout/LayoutVars.d.ts +18 -0
- package/build/esm/components/Layout/LayoutVars.js +1 -0
- package/build/esm/components/Layout/RightPanel.d.ts +9 -0
- package/build/esm/components/Layout/RightPanel.js +1 -0
- package/build/esm/components/Layout/RightPanelContainer.d.ts +3 -0
- package/build/esm/components/Layout/RightPanelContainer.js +1 -0
- package/build/esm/components/Layout/Sidebar.d.ts +8 -0
- package/build/esm/components/Layout/Sidebar.js +1 -0
- package/build/esm/components/Layout/Split.d.ts +7 -0
- package/build/esm/components/Layout/Split.js +1 -0
- package/build/esm/components/Layout/context.d.ts +22 -0
- package/build/esm/components/Layout/context.js +1 -0
- package/build/esm/components/Layout/index.d.ts +9 -0
- package/build/esm/components/Layout/index.js +1 -0
- package/build/esm/components/Layout/reducer.d.ts +5 -0
- package/build/esm/components/Layout/reducer.js +1 -0
- package/build/esm/components/Layout/registry.d.ts +31 -0
- package/build/esm/components/Layout/registry.js +1 -0
- package/build/esm/components/Layout/store.d.ts +10 -0
- package/build/esm/components/Layout/store.js +1 -0
- package/build/esm/components/Layout/useLayout.d.ts +7 -0
- package/build/esm/components/Layout/useLayout.js +1 -0
- package/build/esm/components/Layout/usePanelRefs.d.ts +19 -0
- package/build/esm/components/Layout/usePanelRefs.js +1 -0
- package/build/esm/components/Layout/usePortalContainerRefs.d.ts +20 -0
- package/build/esm/components/Layout/usePortalContainerRefs.js +1 -0
- package/build/esm/components/Layout/varStore.d.ts +17 -0
- package/build/esm/components/Layout/varStore.js +1 -0
- package/build/esm/components/Lightbox/Lightbox.d.ts +1 -1
- package/build/esm/components/NavBar/NavBarPrimaryNav.d.ts +4 -2
- package/build/esm/components/NavBar/NavBarPrimaryNav.js +1 -1
- package/build/esm/components/NavBar/NavBarSearchInput.d.ts +3 -2
- package/build/esm/components/NavBar/NavBarSearchInput.js +1 -1
- package/build/esm/components/NavBar/NavBarSecondaryNav.d.ts +5 -2
- package/build/esm/components/NavBar/NavBarSecondaryNav.js +1 -1
- package/build/esm/components/NavBar/NavBarSubMenuContainer.js +1 -1
- package/build/esm/components/NavBar/constants.d.ts +1 -0
- package/build/esm/components/NavBar/constants.js +1 -1
- package/build/esm/components/Pagination/-types.d.ts +1 -1
- package/build/esm/components/Patterns/EmptyState/EmptyState.d.ts +1 -1
- package/build/esm/components/PictogramButton/PictogramButton.d.ts +14 -5
- package/build/esm/components/PictogramButton/PictogramButton.js +1 -1
- package/build/esm/components/ProgressBar/ProgressBar.d.ts +1 -1
- package/build/esm/components/PromptInput/CategoryList.js +1 -1
- package/build/esm/components/PromptInput/PromptTextArea.d.ts +1 -1
- package/build/esm/components/SplashCardMedia/SplashCardMedia.d.ts +2 -2
- package/build/esm/components/SplashCardMedia/SplashCardMedia.js +1 -1
- package/build/esm/components/Typography/Header/Header.d.ts +1 -1
- package/build/esm/index.d.ts +1 -0
- package/build/esm/index.js +1 -1
- package/build/esm/types/a11y.d.ts +10 -8
- package/build/esm/types/index.d.ts +15 -1
- package/build/esm/types/index.js +1 -1
- package/build/esm/types/type-helpers.d.ts +39 -0
- package/build/esm/types/type-helpers.js +1 -0
- package/package.json +4 -2
- package/build/cjs/components/Content/ContentTableModal/ContentTableModal.mocks.d.ts +0 -3
- package/build/cjs/components/Content/ContentTableModal/ContentTableModal.mocks.js +0 -1
- package/build/cjs/components/EntityTree/treeListData.mock.d.ts +0 -3
- package/build/cjs/components/EntityTree/treeListData.mock.js +0 -1
- package/build/cjs/components/MediaViewerCarousel/MediaViewerCarousel.mocks.d.ts +0 -2
- package/build/cjs/components/MediaViewerCarousel/MediaViewerCarousel.mocks.js +0 -1
- package/build/esm/components/Content/ContentTableModal/ContentTableModal.mocks.d.ts +0 -3
- package/build/esm/components/Content/ContentTableModal/ContentTableModal.mocks.js +0 -1
- package/build/esm/components/EntityTree/treeListData.mock.d.ts +0 -3
- package/build/esm/components/EntityTree/treeListData.mock.js +0 -1
- package/build/esm/components/MediaViewerCarousel/MediaViewerCarousel.mocks.d.ts +0 -2
- package/build/esm/components/MediaViewerCarousel/MediaViewerCarousel.mocks.js +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { HTMLAttributes } from "react";
|
|
2
2
|
import React from "react";
|
|
3
|
-
import type { ConditionalIconAccessibleProps } from "
|
|
3
|
+
import type { ConditionalIconAccessibleProps } from "../../types/a11y";
|
|
4
4
|
import type { IconsVariations, IconsColors, IconSizes, MQ } from "../../types";
|
|
5
5
|
import icons from "../../web-tokens/assets/icons.json";
|
|
6
6
|
import icons16 from "../../web-tokens/assets/icons16.json";
|
|
@@ -21,4 +21,4 @@ export type IconProps = {
|
|
|
21
21
|
"data-e2e-test-id"?: string;
|
|
22
22
|
"data-testid"?: string;
|
|
23
23
|
} & Omit<HTMLAttributes<HTMLDivElement>, "color" | "aria-label" | "aria-labelledby" | "role"> & ConditionalIconAccessibleProps;
|
|
24
|
-
export declare const Icon: (
|
|
24
|
+
export declare const Icon: (props: IconProps) => React.ReactElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import icons from"../../web-tokens/assets/icons.json";import icons16 from"../../web-tokens/assets/icons16.json";import{useHover}from"../../shared/useHover";import{useResponsiveStyles}from"../../shared/mediaQueries";let handleColor=(theme,color)=>"inherit"===color?"inherit":theme.values.color.icon[color].default,handleVariant=(theme,variant)=>{switch(variant){case"inherit":return"inherit";case"primary":return theme.values.color.icon.accent.default;case"secondary":return theme.values.color.icon.primary.default;default:return theme.values.color.icon[variant].default}},StyledIcon=styled("div",{shouldForwardProp:prop=>isPropValid(prop)&&"color"!==prop,target:"
|
|
1
|
+
import React from"react";import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import icons from"../../web-tokens/assets/icons.json";import icons16 from"../../web-tokens/assets/icons16.json";import{useHover}from"../../shared/useHover";import{useResponsiveStyles}from"../../shared/mediaQueries";let hasIcon16=name=>name in icons16,handleColor=(theme,color)=>"inherit"===color?"inherit":theme.values.color.icon[color].default,handleVariant=(theme,variant)=>{switch(variant){case"inherit":return"inherit";case"primary":return theme.values.color.icon.accent.default;case"secondary":return theme.values.color.icon.primary.default;default:return theme.values.color.icon[variant].default}},StyledIcon=styled("div",{shouldForwardProp:prop=>isPropValid(prop)&&"color"!==prop,target:"e3zhdes0",label:"StyledIcon"})(({theme,variant,isHoverable,parentRef,parentIsHovered,size,as,color})=>({...useResponsiveStyles({width:[size,theme.variables.size.dimension.icon],height:[size,theme.variables.size.dimension.icon]}),"& > svg":{...useResponsiveStyles({width:[size,theme.variables.size.dimension.icon],height:[size,theme.variables.size.dimension.icon]})},color:variant?handleVariant(theme,variant):handleColor(theme,color),..."span"===as&&{verticalAlign:"middle"},...(parentIsHovered||isHoverable)&&{cursor:"pointer"},...parentRef&&{opacity:parentIsHovered?1:.6},...isHoverable&&{opacity:theme.variables.opacity.hover,":hover":{opacity:theme.variables.opacity.visible}}}),"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvSWNvbi9JY29uLnRzeCIsInNvdXJjZXMiOlsic3JjL2NvbXBvbmVudHMvSWNvbi9JY29uLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IEhUTUxBdHRyaWJ1dGVzIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCBpc1Byb3BWYWxpZCBmcm9tIFwiQGVtb3Rpb24vaXMtcHJvcC12YWxpZFwiO1xuaW1wb3J0IHR5cGUgeyBUaGVtZSB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHR5cGUgeyBDb25kaXRpb25hbEljb25BY2Nlc3NpYmxlUHJvcHMgfSBmcm9tIFwic3JjL3R5cGVzL2ExMXlcIjtcbmltcG9ydCB0eXBlIHsgSWNvbnNWYXJpYXRpb25zLCBJY29uc0NvbG9ycywgSWNvblNpemVzLCBNUSB9IGZyb20gXCIuLi8uLi90eXBlc1wiO1xuaW1wb3J0IGljb25zIGZyb20gXCIuLi8uLi93ZWItdG9rZW5zL2Fzc2V0cy9pY29ucy5qc29uXCI7XG5pbXBvcnQgaWNvbnMxNiBmcm9tIFwiLi4vLi4vd2ViLXRva2Vucy9hc3NldHMvaWNvbnMxNi5qc29uXCI7XG5pbXBvcnQgeyB1c2VIb3ZlciB9IGZyb20gXCIuLi8uLi9zaGFyZWQvdXNlSG92ZXJcIjtcbmltcG9ydCB7IHVzZVJlc3BvbnNpdmVTdHlsZXMgfSBmcm9tIFwiLi4vLi4vc2hhcmVkL21lZGlhUXVlcmllc1wiO1xuXG4vLyBOYXJyb3dzIGFuIGFyYml0cmFyeSBpY29uIG5hbWUgdG8gdGhlIHNtYWxsLWljb24gc2V0LCBzbyB0aGUgYHNpemUgPT09IFwic1wiYFxuLy8gbG9va3VwIGtlZXBzIGBpY29uczE2YCdzIGtleSB0eXBpbmcgaW5zdGVhZCBvZiBhc3NlcnRpbmcgbWVtYmVyc2hpcC5cbmNvbnN0IGhhc0ljb24xNiA9IChuYW1lOiBJY29uTmFtZSk6IG5hbWUgaXMgSWNvbk5hbWUgJiBJY29uTmFtZTE2ID0+XG4gIG5hbWUgaW4gaWNvbnMxNjtcblxuY29uc3QgaGFuZGxlQ29sb3IgPSAodGhlbWU6IFRoZW1lLCBjb2xvcjogSWNvbnNDb2xvcnMpID0+IHtcbiAgc3dpdGNoIChjb2xvcikge1xuICAgIGNhc2UgXCJpbmhlcml0XCI6XG4gICAgICByZXR1cm4gXCJpbmhlcml0XCI7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiB0aGVtZS52YWx1ZXMuY29sb3IuaWNvbltjb2xvcl0uZGVmYXVsdDtcbiAgfVxufTtcblxuY29uc3QgaGFuZGxlVmFyaWFudCA9ICh0aGVtZTogVGhlbWUsIHZhcmlhbnQ6IEljb25zVmFyaWF0aW9ucykgPT4ge1xuICBzd2l0Y2ggKHZhcmlhbnQpIHtcbiAgICBjYXNlIFwiaW5oZXJpdFwiOlxuICAgICAgcmV0dXJuIFwiaW5oZXJpdFwiO1xuICAgIGNhc2UgXCJwcmltYXJ5XCI6XG4gICAgICByZXR1cm4gdGhlbWUudmFsdWVzLmNvbG9yLmljb24uYWNjZW50LmRlZmF1bHQ7XG4gICAgY2FzZSBcInNlY29uZGFyeVwiOlxuICAgICAgcmV0dXJuIHRoZW1lLnZhbHVlcy5jb2xvci5pY29uLnByaW1hcnkuZGVmYXVsdDtcbiAgICBkZWZhdWx0OlxuICAgICAgcmV0dXJuIHRoZW1lLnZhbHVlcy5jb2xvci5pY29uW3ZhcmlhbnRdLmRlZmF1bHQ7XG4gIH1cbn07XG5cbmNvbnN0IFN0eWxlZEljb24gPSBzdHlsZWQoXCJkaXZcIiwge1xuICBzaG91bGRGb3J3YXJkUHJvcDogKHByb3ApID0+IGlzUHJvcFZhbGlkKHByb3ApICYmIHByb3AgIT09IFwiY29sb3JcIixcbn0pPFxuICBQYXJ0aWFsPE9taXQ8SWNvblByb3BzLCBcImFyaWEtbGFiZWxcIiB8IFwiYXJpYS1sYWJlbGxlZGJ5XCIgfCBcInJvbGVcIj4+ICYge1xuICAgIGlzSG92ZXJhYmxlOiBib29sZWFuO1xuICAgIHBhcmVudFJlZjogUmVhY3QuTXV0YWJsZVJlZk9iamVjdDxhbnk+O1xuICAgIHBhcmVudElzSG92ZXJlZDogYm9vbGVhbjtcbiAgfVxuPihcbiAgKHtcbiAgICB0aGVtZSxcbiAgICB2YXJpYW50LFxuICAgIGlzSG92ZXJhYmxlLFxuICAgIHBhcmVudFJlZixcbiAgICBwYXJlbnRJc0hvdmVyZWQsXG4gICAgc2l6ZSxcbiAgICBhcyxcbiAgICBjb2xvcixcbiAgfSkgPT4gKHtcbiAgICAuLi51c2VSZXNwb25zaXZlU3R5bGVzKHtcbiAgICAgIHdpZHRoOiBbc2l6ZSwgdGhlbWUudmFyaWFibGVzLnNpemUuZGltZW5zaW9uLmljb25dLFxuICAgICAgaGVpZ2h0OiBbc2l6ZSwgdGhlbWUudmFyaWFibGVzLnNpemUuZGltZW5zaW9uLmljb25dLFxuICAgIH0pLFxuICAgIFwiJiA+IHN2Z1wiOiB7XG4gICAgICAuLi51c2VSZXNwb25zaXZlU3R5bGVzKHtcbiAgICAgICAgd2lkdGg6IFtzaXplLCB0aGVtZS52YXJpYWJsZXMuc2l6ZS5kaW1lbnNpb24uaWNvbl0sXG4gICAgICAgIGhlaWdodDogW3NpemUsIHRoZW1lLnZhcmlhYmxlcy5zaXplLmRpbWVuc2lvbi5pY29uXSxcbiAgICAgIH0pLFxuICAgIH0sXG4gICAgLy8gdmFyaWFudCBwcm9wIGlzIGRlcHJlY2F0ZWRcbiAgICBjb2xvcjogdmFyaWFudCA/IGhhbmRsZVZhcmlhbnQodGhlbWUsIHZhcmlhbnQpIDogaGFuZGxlQ29sb3IodGhlbWUsIGNvbG9yKSxcbiAgICAuLi4oYXMgPT09IFwic3BhblwiICYmIHtcbiAgICAgIHZlcnRpY2FsQWxpZ246IFwibWlkZGxlXCIsXG4gICAgfSksXG4gICAgLi4uKChwYXJlbnRJc0hvdmVyZWQgfHwgaXNIb3ZlcmFibGUpICYmIHtcbiAgICAgIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gICAgfSksXG4gICAgLi4uKHBhcmVudFJlZiAmJiB7XG4gICAgICBvcGFjaXR5OiBwYXJlbnRJc0hvdmVyZWQgPyAxIDogMC42LFxuICAgIH0pLFxuICAgIC4uLihpc0hvdmVyYWJsZSAmJiB7XG4gICAgICBvcGFjaXR5OiB0aGVtZS52YXJpYWJsZXMub3BhY2l0eS5ob3ZlcixcbiAgICAgIFwiOmhvdmVyXCI6IHtcbiAgICAgICAgb3BhY2l0eTogdGhlbWUudmFyaWFibGVzLm9wYWNpdHkudmlzaWJsZSxcbiAgICAgIH0sXG4gICAgfSksXG4gIH0pXG4pO1xuXG5leHBvcnQgdHlwZSBJY29uTmFtZSA9IGtleW9mIHR5cGVvZiBpY29ucztcbmV4cG9ydCB0eXBlIEljb25OYW1lMTYgPSBrZXlvZiB0eXBlb2YgaWNvbnMxNjtcblxuZXhwb3J0IHR5cGUgSWNvblByb3BzID0ge1xuICAvKiogSWNvbiBuYW1lICovXG4gIG5hbWU6IEljb25OYW1lO1xuICAvKiogc2V0IHRvIHRydWUgdG8gbWFrZSB0aGUgaWNvbiBob3ZlcmFibGUsIHBhc3MgYSBwYXJlbnQncyByZWYgdG8gbWFrZSB0aGUgaWNvbiBtYXRjaCB0aGUgcGFyZW50IGhvdmVyICovXG4gIGhvdmVyYWJsZT86IGJvb2xlYW4gfCBSZWFjdC5NdXRhYmxlUmVmT2JqZWN0PGFueT47XG4gIC8qKiBzZXQgdG8gdHJ1ZSB0byBoYXZlIGFuIGlubGluZSBpY29uIHdyYXBwZWQgaW4gYSBzcGFuIGluc3RlYWQgb2YgZGl2ICovXG4gIGlubGluZT86IGJvb2xlYW47XG4gIC8qKiBAZGVwcmVjYXRlZCB2YXJpYW50LCBwbGVhc2UgdXNlIFwiY29sb3JcIiBwcm9wIGluc3RlYWQgKi9cbiAgdmFyaWFudD86IEljb25zVmFyaWF0aW9ucztcbiAgLyoqIEljb24gY29sb3IgY2FuIGluaGVyaXQgcGFyZW50IHN0eWxlLiAqL1xuICBjb2xvcj86IEljb25zQ29sb3JzO1xuICBzaXplPzogSWNvblNpemVzIHwgTVE8SWNvblNpemVzPjtcbiAgXCJkYXRhLWUyZS10ZXN0LWlkXCI/OiBzdHJpbmc7XG4gIFwiZGF0YS10ZXN0aWRcIj86IHN0cmluZztcbn0gJiBPbWl0PFxuICBIVE1MQXR0cmlidXRlczxIVE1MRGl2RWxlbWVudD4sXG4gIFwiY29sb3JcIiB8IFwiYXJpYS1sYWJlbFwiIHwgXCJhcmlhLWxhYmVsbGVkYnlcIiB8IFwicm9sZVwiXG4+ICZcbiAgQ29uZGl0aW9uYWxJY29uQWNjZXNzaWJsZVByb3BzO1xuXG4vKiBlc2xpbnQtZGlzYWJsZSByZWFjdC9qc3gtcHJvcHMtbm8tc3ByZWFkaW5nICovXG5leHBvcnQgY29uc3QgSWNvbiA9IChwcm9wczogSWNvblByb3BzKTogUmVhY3QuUmVhY3RFbGVtZW50ID0+IHtcbiAgY29uc3Qge1xuICAgIG5hbWUsXG4gICAgaG92ZXJhYmxlID0gZmFsc2UsXG4gICAgaW5saW5lID0gZmFsc2UsXG4gICAgc2l6ZSA9IFwibVwiLFxuICAgIGNvbG9yID0gXCJpbmhlcml0XCIsXG4gICAgdmFyaWFudCxcbiAgICBcImRhdGEtZTJlLXRlc3QtaWRcIjogZGF0YUUyZVRlc3RJZCxcbiAgICBcImRhdGEtdGVzdGlkXCI6IGRhdGFUZXN0SWQsXG4gICAgXCJhcmlhLWxhYmVsXCI6IGFyaWFMYWJlbCxcbiAgICBcImFyaWEtbGFiZWxsZWRieVwiOiBhcmlhTGFiZWxsZWRCeSxcbiAgICByb2xlLFxuICAgIC4uLnJlc3RcbiAgfSA9IHByb3BzO1xuICBjb25zdCBpc0hvdmVyYWJsZSA9IHR5cGVvZiBob3ZlcmFibGUgPT09IFwiYm9vbGVhblwiICYmIGhvdmVyYWJsZTtcbiAgY29uc3QgcGFyZW50UmVmID0gdHlwZW9mIGhvdmVyYWJsZSAhPT0gXCJib29sZWFuXCIgJiYgaG92ZXJhYmxlO1xuICBjb25zdCBwYXJlbnRJc0hvdmVyZWQgPSB1c2VIb3ZlcihwYXJlbnRSZWYpO1xuICBjb25zdCBhcyA9IGlubGluZSA/IFwic3BhblwiIDogXCJkaXZcIjtcbiAgY29uc3QgaGFzQWNjZXNzaWJsZU5hbWUgPSBCb29sZWFuKGFyaWFMYWJlbCB8fCBhcmlhTGFiZWxsZWRCeSk7XG5cbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkSWNvblxuICAgICAgYXM9e2FzfVxuICAgICAgZGF0YS1lMmUtdGVzdC1pZD17ZGF0YUUyZVRlc3RJZH1cbiAgICAgIGRhdGEtdGVzdGlkPXtkYXRhVGVzdElkfVxuICAgICAgZGF0YS1kcy1pZD1cIkljb25cIlxuICAgICAgZGF0YS12YXJpYW50PXtjb2xvcn1cbiAgICAgIHZhcmlhbnQ9e3ZhcmlhbnR9XG4gICAgICBjb2xvcj17Y29sb3J9XG4gICAgICBpc0hvdmVyYWJsZT17aXNIb3ZlcmFibGV9XG4gICAgICBwYXJlbnRSZWY9e3BhcmVudFJlZn1cbiAgICAgIHBhcmVudElzSG92ZXJlZD17cGFyZW50SXNIb3ZlcmVkfVxuICAgICAgc2l6ZT17c2l6ZX1cbiAgICAgIGRhbmdlcm91c2x5U2V0SW5uZXJIVE1MPXt7XG4gICAgICAgIF9faHRtbDogc2l6ZSA9PT0gXCJzXCIgJiYgaGFzSWNvbjE2KG5hbWUpID8gaWNvbnMxNltuYW1lXSA6IGljb25zW25hbWVdLFxuICAgICAgfX1cbiAgICAgIHsuLi5yZXN0fVxuICAgICAgYXJpYS1oaWRkZW49e2hhc0FjY2Vzc2libGVOYW1lID8gdW5kZWZpbmVkIDogXCJ0cnVlXCJ9XG4gICAgICByb2xlPXtyb2xlfVxuICAgICAgYXJpYS1sYWJlbD17YXJpYUxhYmVsfVxuICAgICAgYXJpYS1sYWJlbGxlZGJ5PXthcmlhTGFiZWxsZWRCeX1cbiAgICAvPlxuICApO1xufTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1Q21CIn0= */");export const Icon=props=>{let{name,hoverable=!1,inline=!1,size="m",color="inherit",variant,"data-e2e-test-id":dataE2eTestId,"data-testid":dataTestId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,role,...rest}=props,isHoverable="boolean"==typeof hoverable&&hoverable,parentRef="boolean"!=typeof hoverable&&hoverable,parentIsHovered=useHover(parentRef),hasAccessibleName=!!(ariaLabel||ariaLabelledBy);return React.createElement(StyledIcon,{as:inline?"span":"div","data-e2e-test-id":dataE2eTestId,"data-testid":dataTestId,"data-ds-id":"Icon","data-variant":color,variant:variant,color:color,isHoverable:isHoverable,parentRef:parentRef,parentIsHovered:parentIsHovered,size:size,dangerouslySetInnerHTML:{__html:"s"===size&&hasIcon16(name)?icons16[name]:icons[name]},...rest,"aria-hidden":hasAccessibleName?void 0:"true",role:role,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy})};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import type { ConditionalIconAccessibleProps } from "
|
|
2
|
+
import type { ConditionalIconAccessibleProps } from "../../types/a11y";
|
|
3
3
|
import type { IconName } from "../Icon/Icon";
|
|
4
4
|
type IconTileColor = "green" | "blue" | "yellow" | "brand" | "purple" | "red" | "gray";
|
|
5
5
|
export type IconTileProps = {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import type { ImgHTMLAttributes, SourceHTMLAttributes } from "react";
|
|
2
2
|
import React from "react";
|
|
3
3
|
import type { Property } from "csstype";
|
|
4
|
-
import type { MQ, BorderRadius } from "../../types";
|
|
5
|
-
|
|
4
|
+
import type { MQ, BorderRadius, ForbiddenProp, MissingProps } from "../../types";
|
|
5
|
+
type ImageBaseProps = Omit<ImgHTMLAttributes<HTMLImageElement>, "alt"> & {
|
|
6
6
|
/** Src for a placeholder image to be shown while loading the original image */
|
|
7
7
|
placeholderSrc?: string;
|
|
8
8
|
/** Src for a fallback image if original image cannot be loaded */
|
|
@@ -17,24 +17,16 @@ export type ImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, "alt"> & {
|
|
|
17
17
|
position?: Property.ObjectPosition | MQ<Property.ObjectPosition>;
|
|
18
18
|
borderRadius?: BorderRadius | MQ<BorderRadius>;
|
|
19
19
|
"data-e2e-test-id"?: string;
|
|
20
|
-
/** Accessible description of image. For decorative images provide an empty string */
|
|
21
|
-
alt: string;
|
|
22
20
|
};
|
|
23
|
-
export
|
|
24
|
-
/**
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
/** Lazy load image */
|
|
31
|
-
lazy?: boolean;
|
|
32
|
-
/** Maps to object-fit css */
|
|
33
|
-
fit?: Property.ObjectFit | MQ<Property.ObjectFit>;
|
|
34
|
-
/** Maps to object-position css */
|
|
35
|
-
position?: Property.ObjectPosition | MQ<Property.ObjectPosition>;
|
|
36
|
-
borderRadius?: BorderRadius | MQ<BorderRadius>;
|
|
37
|
-
"data-e2e-test-id"?: string;
|
|
38
|
-
/** Accessible description of image. For decorative images provide an empty string */
|
|
21
|
+
export type ImageA11y = {
|
|
22
|
+
/** Marks a purely decorative image. Renders `alt=""` and forbids `alt`. */
|
|
23
|
+
isDecorative: true;
|
|
24
|
+
alt?: ForbiddenProp<"Fix: A decorative image takes no `alt`; remove it or drop `isDecorative`.">;
|
|
25
|
+
} | {
|
|
26
|
+
isDecorative?: false;
|
|
27
|
+
/** Accessible description of the image. */
|
|
39
28
|
alt: string;
|
|
40
|
-
}
|
|
29
|
+
} | MissingProps<"Fix: Image needs an `alt` description. For a purely decorative image, pass `isDecorative` instead.">;
|
|
30
|
+
export type ImageProps = ImageBaseProps & ImageA11y;
|
|
31
|
+
export declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
|
|
32
|
+
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{useEffect,useState,forwardRef}from"react";import styled from"@emotion/styled";import{useResponsiveValue,useResponsiveStyles}from"../../shared/mediaQueries";let StyledImg=styled("img",{target:"
|
|
1
|
+
import React,{useEffect,useState,forwardRef}from"react";import styled from"@emotion/styled";import{useResponsiveValue,useResponsiveStyles}from"../../shared/mediaQueries";import{asValidProps}from"../../types";let StyledImg=styled("img",{target:"e19rs9970",label:"StyledImg"})(({theme,borderRadius})=>useResponsiveStyles({borderRadius:[borderRadius,theme.variables.size.borderRadius]}),({fit,position})=>useResponsiveValue({objectFit:fit,objectPosition:position}),"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvSW1hZ2UvSW1hZ2UudHN4Iiwic291cmNlcyI6WyJzcmMvY29tcG9uZW50cy9JbWFnZS9JbWFnZS50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUge1xuICBJbWdIVE1MQXR0cmlidXRlcyxcbiAgU291cmNlSFRNTEF0dHJpYnV0ZXMsXG4gIFJlZk9iamVjdCxcbiAgUmVhY3RFbGVtZW50LFxuICBSZWFjdEV2ZW50SGFuZGxlcixcbn0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgUmVhY3QsIHsgdXNlRWZmZWN0LCB1c2VTdGF0ZSwgZm9yd2FyZFJlZiB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHR5cGUgeyBQcm9wZXJ0eSB9IGZyb20gXCJjc3N0eXBlXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7XG4gIHVzZVJlc3BvbnNpdmVWYWx1ZSxcbiAgdXNlUmVzcG9uc2l2ZVN0eWxlcyxcbn0gZnJvbSBcIi4uLy4uL3NoYXJlZC9tZWRpYVF1ZXJpZXNcIjtcbmltcG9ydCB0eXBlIHtcbiAgTVEsXG4gIEJvcmRlclJhZGl1cyxcbiAgRm9yYmlkZGVuUHJvcCxcbiAgTWlzc2luZ1Byb3BzLFxufSBmcm9tIFwiLi4vLi4vdHlwZXNcIjtcbmltcG9ydCB7IGFzVmFsaWRQcm9wcyB9IGZyb20gXCIuLi8uLi90eXBlc1wiO1xuXG50eXBlIEltYWdlQmFzZVByb3BzID0gT21pdDxJbWdIVE1MQXR0cmlidXRlczxIVE1MSW1hZ2VFbGVtZW50PiwgXCJhbHRcIj4gJiB7XG4gIC8qKiBTcmMgZm9yIGEgcGxhY2Vob2xkZXIgaW1hZ2UgdG8gYmUgc2hvd24gd2hpbGUgbG9hZGluZyB0aGUgb3JpZ2luYWwgaW1hZ2UgKi9cbiAgcGxhY2Vob2xkZXJTcmM/OiBzdHJpbmc7XG4gIC8qKiBTcmMgZm9yIGEgZmFsbGJhY2sgaW1hZ2UgaWYgb3JpZ2luYWwgaW1hZ2UgY2Fubm90IGJlIGxvYWRlZCAqL1xuICBmYWxsYmFja1NyYz86IHN0cmluZztcbiAgLyoqIFByb3ZpZGUgcHJvcHMgZm9yIHNvdXJjZSBlbGVtZW50cyB0byBkZWZpbmUgbXVsdGlwbGUgc3Jjc2V0cyAqL1xuICBzb3VyY2VzPzogU291cmNlSFRNTEF0dHJpYnV0ZXM8SFRNTFNvdXJjZUVsZW1lbnQ+W107XG4gIC8qKiBMYXp5IGxvYWQgaW1hZ2UgKi9cbiAgbGF6eT86IGJvb2xlYW47XG4gIC8qKiBNYXBzIHRvIG9iamVjdC1maXQgY3NzICovXG4gIGZpdD86IFByb3BlcnR5Lk9iamVjdEZpdCB8IE1RPFByb3BlcnR5Lk9iamVjdEZpdD47XG4gIC8qKiBNYXBzIHRvIG9iamVjdC1wb3NpdGlvbiBjc3MgKi9cbiAgcG9zaXRpb24/OiBQcm9wZXJ0eS5PYmplY3RQb3NpdGlvbiB8IE1RPFByb3BlcnR5Lk9iamVjdFBvc2l0aW9uPjtcbiAgYm9yZGVyUmFkaXVzPzogQm9yZGVyUmFkaXVzIHwgTVE8Qm9yZGVyUmFkaXVzPjtcbiAgXCJkYXRhLWUyZS10ZXN0LWlkXCI/OiBzdHJpbmc7XG59O1xuXG5leHBvcnQgdHlwZSBJbWFnZUExMXkgPVxuICB8IHtcbiAgICAgIC8qKiBNYXJrcyBhIHB1cmVseSBkZWNvcmF0aXZlIGltYWdlLiBSZW5kZXJzIGBhbHQ9XCJcImAgYW5kIGZvcmJpZHMgYGFsdGAuICovXG4gICAgICBpc0RlY29yYXRpdmU6IHRydWU7XG4gICAgICBhbHQ/OiBGb3JiaWRkZW5Qcm9wPFwiRml4OiBBIGRlY29yYXRpdmUgaW1hZ2UgdGFrZXMgbm8gYGFsdGA7IHJlbW92ZSBpdCBvciBkcm9wIGBpc0RlY29yYXRpdmVgLlwiPjtcbiAgICB9XG4gIHwge1xuICAgICAgaXNEZWNvcmF0aXZlPzogZmFsc2U7XG4gICAgICAvKiogQWNjZXNzaWJsZSBkZXNjcmlwdGlvbiBvZiB0aGUgaW1hZ2UuICovXG4gICAgICBhbHQ6IHN0cmluZztcbiAgICB9XG4gIHwgTWlzc2luZ1Byb3BzPFwiRml4OiBJbWFnZSBuZWVkcyBhbiBgYWx0YCBkZXNjcmlwdGlvbi4gRm9yIGEgcHVyZWx5IGRlY29yYXRpdmUgaW1hZ2UsIHBhc3MgYGlzRGVjb3JhdGl2ZWAgaW5zdGVhZC5cIj47XG5cbmV4cG9ydCB0eXBlIEltYWdlUHJvcHMgPSBJbWFnZUJhc2VQcm9wcyAmIEltYWdlQTExeTtcblxudHlwZSBTdHlsZWRJbWdQcm9wcyA9IFBpY2s8SW1hZ2VQcm9wcywgXCJmaXRcIiB8IFwicG9zaXRpb25cIiB8IFwiYm9yZGVyUmFkaXVzXCI+O1xuXG5jb25zdCBTdHlsZWRJbWcgPSBzdHlsZWQuaW1nPFN0eWxlZEltZ1Byb3BzPihcbiAgKHsgdGhlbWUsIGJvcmRlclJhZGl1cyB9KSA9PlxuICAgIHVzZVJlc3BvbnNpdmVTdHlsZXMoe1xuICAgICAgYm9yZGVyUmFkaXVzOiBbYm9yZGVyUmFkaXVzLCB0aGVtZS52YXJpYWJsZXMuc2l6ZS5ib3JkZXJSYWRpdXNdLFxuICAgIH0pLFxuICAoeyBmaXQsIHBvc2l0aW9uIH0pID0+XG4gICAgdXNlUmVzcG9uc2l2ZVZhbHVlKHtcbiAgICAgIG9iamVjdEZpdDogZml0LFxuICAgICAgb2JqZWN0UG9zaXRpb246IHBvc2l0aW9uLFxuICAgIH0pXG4pO1xuXG4vKiBlc2xpbnQtZGlzYWJsZSByZWFjdC9qc3gtcHJvcHMtbm8tc3ByZWFkaW5nICovXG5leHBvcnQgY29uc3QgSW1hZ2UgPSBmb3J3YXJkUmVmKFxuICAocHJvcHM6IEltYWdlUHJvcHMsIHJlZjogUmVmT2JqZWN0PEhUTUxJbWFnZUVsZW1lbnQ+KTogUmVhY3RFbGVtZW50ID0+IHtcbiAgICBjb25zdCB7XG4gICAgICBwbGFjZWhvbGRlclNyYyxcbiAgICAgIGZhbGxiYWNrU3JjLFxuICAgICAgc291cmNlcyA9IFtdLFxuICAgICAgbGF6eSA9IGZhbHNlLFxuICAgICAgXCJkYXRhLWUyZS10ZXN0LWlkXCI6IGRhdGFFMmVUZXN0SWQsXG4gICAgICBzcmMsXG4gICAgICBmaXQsXG4gICAgICBwb3NpdGlvbixcbiAgICAgIGJvcmRlclJhZGl1cyxcbiAgICAgIG9uRXJyb3IsXG4gICAgICBpc0RlY29yYXRpdmUsXG4gICAgICBhbHQsXG4gICAgICAuLi5yZXN0XG4gICAgfSA9IGFzVmFsaWRQcm9wcyhwcm9wcyk7XG4gICAgLy8gQSBkZWNvcmF0aXZlIGltYWdlIHJlbmRlcnMgYW4gZW1wdHkgYGFsdGAgc28gYXNzaXN0aXZlIHRlY2ggc2tpcHMgaXQuXG4gICAgY29uc3QgYWx0VGV4dCA9IGlzRGVjb3JhdGl2ZSA/IFwiXCIgOiBhbHQ7XG4gICAgY29uc3QgW2ltZ1NyYywgc2V0SW1nU3JjXSA9IHVzZVN0YXRlKHBsYWNlaG9sZGVyU3JjIHx8IHNyYyk7XG4gICAgY29uc3Qgc291cmNlRWxtcyA9IHNvdXJjZXMubWFwKChzb3VyY2VQcm9wcykgPT4gKFxuICAgICAgPHNvdXJjZSB7Li4uc291cmNlUHJvcHN9IC8+XG4gICAgKSk7XG5cbiAgICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgICAgaWYgKHBsYWNlaG9sZGVyU3JjKSB7XG4gICAgICAgIGNvbnN0IGltZyA9IG5ldyB3aW5kb3cuSW1hZ2UoKTtcblxuICAgICAgICBpbWcuc3JjID0gc3JjO1xuICAgICAgICBpbWcub25sb2FkID0gKCkgPT4ge1xuICAgICAgICAgIC8vIG9yaWdpbmFsIGltYWdlIGxvYWRlZFxuICAgICAgICAgIHNldEltZ1NyYyhzcmMpO1xuICAgICAgICB9O1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgc2V0SW1nU3JjKHNyYyk7XG4gICAgICB9XG4gICAgfSwgW3BsYWNlaG9sZGVyU3JjLCBzcmNdKTtcblxuICAgIGNvbnN0IGhhbmRsZUVycm9yOiBSZWFjdEV2ZW50SGFuZGxlcjxIVE1MSW1hZ2VFbGVtZW50PiA9IChhcmdzKSA9PiB7XG4gICAgICBpZiAoZmFsbGJhY2tTcmMpIHtcbiAgICAgICAgc2V0SW1nU3JjKGZhbGxiYWNrU3JjKTtcbiAgICAgIH1cbiAgICAgIGlmIChvbkVycm9yKSB7XG4gICAgICAgIG9uRXJyb3IoYXJncyk7XG4gICAgICB9XG4gICAgfTtcblxuICAgIGNvbnN0IGltZ1Byb3BzID0ge1xuICAgICAgLi4ucmVzdCxcbiAgICAgIC4uLihsYXp5ICYmIHtcbiAgICAgICAgbG9hZGluZzogXCJsYXp5XCIgYXMgY29uc3QsXG4gICAgICB9KSxcbiAgICAgIGFsdDogYWx0VGV4dCxcbiAgICAgIGZpdCxcbiAgICAgIHBvc2l0aW9uLFxuICAgICAgYm9yZGVyUmFkaXVzLFxuICAgIH07XG5cbiAgICByZXR1cm4gKFxuICAgICAgPHBpY3R1cmUgZGF0YS1lMmUtdGVzdC1pZD17ZGF0YUUyZVRlc3RJZH0gZGF0YS1kcy1pZD1cIkltYWdlXCI+XG4gICAgICAgIHtzb3VyY2VFbG1zfVxuICAgICAgICA8U3R5bGVkSW1nIHsuLi5pbWdQcm9wc30gc3JjPXtpbWdTcmN9IG9uRXJyb3I9e2hhbmRsZUVycm9yfSByZWY9e3JlZn0gLz5cbiAgICAgIDwvcGljdHVyZT5cbiAgICApO1xuICB9XG4pO1xuLyogZXNsaW50LWVuYWJsZSByZWFjdC9qc3gtcHJvcHMtbm8tc3ByZWFkaW5nICovXG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0RrQiJ9 */");export const Image=forwardRef((props,ref)=>{let{placeholderSrc,fallbackSrc,sources=[],lazy=!1,"data-e2e-test-id":dataE2eTestId,src,fit,position,borderRadius,onError,isDecorative,alt,...rest}=asValidProps(props),[imgSrc,setImgSrc]=useState(placeholderSrc||src),sourceElms=sources.map(sourceProps=>React.createElement("source",sourceProps));useEffect(()=>{if(placeholderSrc){let img=new window.Image;img.src=src,img.onload=()=>{setImgSrc(src)}}else setImgSrc(src)},[placeholderSrc,src]);let imgProps={...rest,...lazy&&{loading:"lazy"},alt:isDecorative?"":alt,fit,position,borderRadius};return React.createElement("picture",{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"Image"},sourceElms,React.createElement(StyledImg,{...imgProps,src:imgSrc,onError:args=>{fallbackSrc&&setImgSrc(fallbackSrc),onError&&onError(args)},ref:ref}))});
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { LayoutStorage } from "react-resizable-panels";
|
|
3
|
+
/** A size: plain number = pixels; unitless string = percentage ("10%"). */
|
|
4
|
+
type Size = number | string;
|
|
5
|
+
export type PanelItem = {
|
|
6
|
+
/** Stable id — used by react-resizable-panels to track the panel and persist
|
|
7
|
+
* its size, and passed back to `hostFor`/`onResize`/`onCollapse`. */
|
|
8
|
+
id: string;
|
|
9
|
+
defaultSize?: Size;
|
|
10
|
+
minSize?: Size;
|
|
11
|
+
maxSize?: Size;
|
|
12
|
+
/** Allow drag-to-collapse; collapsing fires `onCollapse(id)`. */
|
|
13
|
+
collapsible?: boolean;
|
|
14
|
+
};
|
|
15
|
+
export type PanelProps = {
|
|
16
|
+
/** Visible panels, left-to-right. Conditionally rendering items toggles a
|
|
17
|
+
* panel WITHOUT remounting the others (no `key` on the group). */
|
|
18
|
+
panels: PanelItem[];
|
|
19
|
+
/** Persist sizes (keyed by `persistenceKey` + the current panel-id set). */
|
|
20
|
+
persistenceKey?: string;
|
|
21
|
+
storage?: LayoutStorage;
|
|
22
|
+
/** Ref callback for a panel's content host `<div>` (consumer portals into it). */
|
|
23
|
+
hostFor: (id: string) => (el: HTMLElement | null) => void;
|
|
24
|
+
/** Reports a settled drag-resize (size as a "%" string). */
|
|
25
|
+
onResize: (id: string, size: string) => void;
|
|
26
|
+
/** Reports a drag past `minSize` on a collapsible panel. */
|
|
27
|
+
onCollapse: (id: string) => void;
|
|
28
|
+
};
|
|
29
|
+
/**
|
|
30
|
+
* Internal resizable panel row — the only wrapper around react-resizable-panels.
|
|
31
|
+
* Renders one Panel per item with a content host `<div>` (ref'd back via
|
|
32
|
+
* `hostFor`), persists sizes, and reports drag-resize / drag-to-collapse. The
|
|
33
|
+
* public `Layout` component is the intended consumer.
|
|
34
|
+
*/
|
|
35
|
+
export declare function Panel({ panels, persistenceKey, storage, hostFor, onResize, onCollapse, }: PanelProps): React.ReactElement;
|
|
36
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import React from"react";import styled from"@emotion/styled";import{Group,Panel as ResizablePanel,Separator,useDefaultLayout}from"react-resizable-panels";let CustomGroup=styled(Group,{target:"e8gmbta0",label:"CustomGroup"})({height:"100%",width:"100%"},"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvSW50ZXJuYWwvUGFuZWwvUGFuZWwudHN4Iiwic291cmNlcyI6WyJzcmMvY29tcG9uZW50cy9JbnRlcm5hbC9QYW5lbC9QYW5lbC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQge1xuICBHcm91cCxcbiAgUGFuZWwgYXMgUmVzaXphYmxlUGFuZWwsXG4gIFNlcGFyYXRvcixcbiAgdXNlRGVmYXVsdExheW91dCxcbn0gZnJvbSBcInJlYWN0LXJlc2l6YWJsZS1wYW5lbHNcIjtcbmltcG9ydCB0eXBlIHsgTGF5b3V0U3RvcmFnZSB9IGZyb20gXCJyZWFjdC1yZXNpemFibGUtcGFuZWxzXCI7XG5cbi8qKiBBIHNpemU6IHBsYWluIG51bWJlciA9IHBpeGVsczsgdW5pdGxlc3Mgc3RyaW5nID0gcGVyY2VudGFnZSAoXCIxMCVcIikuICovXG50eXBlIFNpemUgPSBudW1iZXIgfCBzdHJpbmc7XG5cbmNvbnN0IEN1c3RvbUdyb3VwID0gc3R5bGVkKEdyb3VwKSh7IGhlaWdodDogXCIxMDAlXCIsIHdpZHRoOiBcIjEwMCVcIiB9KTtcblxuLy8gSG9zdCBub2RlIOKAlCBjb250ZW50IGlzIHBvcnRhbGVkIGluIGJ5IHRoZSBjb25zdW1lci4gYHJlbGF0aXZlYCBzb1xuLy8gYWJzb2x1dGVseS1wb3NpdGlvbmVkIGNvbnRlbnQgcmVmbG93cyB3aXRoIHRoZSBwYW5lbC5cbmNvbnN0IFN0eWxlZFBvcnRhbENvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICBoZWlnaHQ6IFwiMTAwJVwiLFxuICB3aWR0aDogXCIxMDAlXCIsXG59KTtcblxuZXhwb3J0IHR5cGUgUGFuZWxJdGVtID0ge1xuICAvKiogU3RhYmxlIGlkIOKAlCB1c2VkIGJ5IHJlYWN0LXJlc2l6YWJsZS1wYW5lbHMgdG8gdHJhY2sgdGhlIHBhbmVsIGFuZCBwZXJzaXN0XG4gICAqICBpdHMgc2l6ZSwgYW5kIHBhc3NlZCBiYWNrIHRvIGBob3N0Rm9yYC9gb25SZXNpemVgL2BvbkNvbGxhcHNlYC4gKi9cbiAgaWQ6IHN0cmluZztcbiAgZGVmYXVsdFNpemU/OiBTaXplO1xuICBtaW5TaXplPzogU2l6ZTtcbiAgbWF4U2l6ZT86IFNpemU7XG4gIC8qKiBBbGxvdyBkcmFnLXRvLWNvbGxhcHNlOyBjb2xsYXBzaW5nIGZpcmVzIGBvbkNvbGxhcHNlKGlkKWAuICovXG4gIGNvbGxhcHNpYmxlPzogYm9vbGVhbjtcbn07XG5cbmV4cG9ydCB0eXBlIFBhbmVsUHJvcHMgPSB7XG4gIC8qKiBWaXNpYmxlIHBhbmVscywgbGVmdC10by1yaWdodC4gQ29uZGl0aW9uYWxseSByZW5kZXJpbmcgaXRlbXMgdG9nZ2xlcyBhXG4gICAqICBwYW5lbCBXSVRIT1VUIHJlbW91bnRpbmcgdGhlIG90aGVycyAobm8gYGtleWAgb24gdGhlIGdyb3VwKS4gKi9cbiAgcGFuZWxzOiBQYW5lbEl0ZW1bXTtcbiAgLyoqIFBlcnNpc3Qgc2l6ZXMgKGtleWVkIGJ5IGBwZXJzaXN0ZW5jZUtleWAgKyB0aGUgY3VycmVudCBwYW5lbC1pZCBzZXQpLiAqL1xuICBwZXJzaXN0ZW5jZUtleT86IHN0cmluZztcbiAgc3RvcmFnZT86IExheW91dFN0b3JhZ2U7XG4gIC8qKiBSZWYgY2FsbGJhY2sgZm9yIGEgcGFuZWwncyBjb250ZW50IGhvc3QgYDxkaXY+YCAoY29uc3VtZXIgcG9ydGFscyBpbnRvIGl0KS4gKi9cbiAgaG9zdEZvcjogKGlkOiBzdHJpbmcpID0+IChlbDogSFRNTEVsZW1lbnQgfCBudWxsKSA9PiB2b2lkO1xuICAvKiogUmVwb3J0cyBhIHNldHRsZWQgZHJhZy1yZXNpemUgKHNpemUgYXMgYSBcIiVcIiBzdHJpbmcpLiAqL1xuICBvblJlc2l6ZTogKGlkOiBzdHJpbmcsIHNpemU6IHN0cmluZykgPT4gdm9pZDtcbiAgLyoqIFJlcG9ydHMgYSBkcmFnIHBhc3QgYG1pblNpemVgIG9uIGEgY29sbGFwc2libGUgcGFuZWwuICovXG4gIG9uQ29sbGFwc2U6IChpZDogc3RyaW5nKSA9PiB2b2lkO1xufTtcblxuLy8gZmxleEdyb3cgYXQvYmVsb3cgdGhpcyBpcyB0cmVhdGVkIGFzIGEgZHJhZy10by1jb2xsYXBzZSBnZXN0dXJlLlxuY29uc3QgQ09MTEFQU0VfRVBTSUxPTiA9IDAuNTtcblxuLy8gcmVhY3QtcmVzaXphYmxlLXBhbmVscyBwZXJzaXN0cyBub3RoaW5nIHdoZW4gZ2l2ZW4gYSBuby1vcCBzdG9yYWdlLlxuY29uc3QgTk9PUF9TVE9SQUdFOiBMYXlvdXRTdG9yYWdlID0geyBnZXRJdGVtOiAoKSA9PiBudWxsLCBzZXRJdGVtOiAoKSA9PiB7fSB9O1xuXG4vKipcbiAqIFN0b3JhZ2UgZm9yIHNpemUgcGVyc2lzdGVuY2U6IHJlYWwgb25seSB3aGVuIEJPVEggYSBgcGVyc2lzdGVuY2VLZXlgIGFuZCBhXG4gKiBgc3RvcmFnZWAgYXJlIHByb3ZpZGVkLiBObyBpbXBsaWNpdCBgd2luZG93LmxvY2FsU3RvcmFnZWAgZmFsbGJhY2sg4oCUXG4gKiBwZXJzaXN0ZW5jZSBpcyBzdHJpY3RseSBvcHQtaW4uXG4gKi9cbmZ1bmN0aW9uIHJlc29sdmVTaXplU3RvcmFnZShcbiAgcGVyc2lzdGVuY2VLZXk6IHN0cmluZyB8IHVuZGVmaW5lZCxcbiAgc3RvcmFnZTogTGF5b3V0U3RvcmFnZSB8IHVuZGVmaW5lZFxuKTogTGF5b3V0U3RvcmFnZSB7XG4gIGlmICghcGVyc2lzdGVuY2VLZXkgfHwgIXN0b3JhZ2UpIHJldHVybiBOT09QX1NUT1JBR0U7XG4gIHJldHVybiBzdG9yYWdlO1xufVxuXG4vKipcbiAqIEludGVybmFsIHJlc2l6YWJsZSBwYW5lbCByb3cg4oCUIHRoZSBvbmx5IHdyYXBwZXIgYXJvdW5kIHJlYWN0LXJlc2l6YWJsZS1wYW5lbHMuXG4gKiBSZW5kZXJzIG9uZSBQYW5lbCBwZXIgaXRlbSB3aXRoIGEgY29udGVudCBob3N0IGA8ZGl2PmAgKHJlZidkIGJhY2sgdmlhXG4gKiBgaG9zdEZvcmApLCBwZXJzaXN0cyBzaXplcywgYW5kIHJlcG9ydHMgZHJhZy1yZXNpemUgLyBkcmFnLXRvLWNvbGxhcHNlLiBUaGVcbiAqIHB1YmxpYyBgTGF5b3V0YCBjb21wb25lbnQgaXMgdGhlIGludGVuZGVkIGNvbnN1bWVyLlxuICovXG5leHBvcnQgZnVuY3Rpb24gUGFuZWwoe1xuICBwYW5lbHMsXG4gIHBlcnNpc3RlbmNlS2V5LFxuICBzdG9yYWdlLFxuICBob3N0Rm9yLFxuICBvblJlc2l6ZSxcbiAgb25Db2xsYXBzZSxcbn06IFBhbmVsUHJvcHMpOiBSZWFjdC5SZWFjdEVsZW1lbnQge1xuICBjb25zdCB7IGRlZmF1bHRMYXlvdXQsIG9uTGF5b3V0Q2hhbmdlZDogcGVyc2lzdFNpemVzIH0gPSB1c2VEZWZhdWx0TGF5b3V0KHtcbiAgICBpZDogcGVyc2lzdGVuY2VLZXkgPz8gXCJkcy1sYXlvdXRcIixcbiAgICBwYW5lbElkczogcGFuZWxzLm1hcCgocCkgPT4gcC5pZCksXG4gICAgc3RvcmFnZTogcmVzb2x2ZVNpemVTdG9yYWdlKHBlcnNpc3RlbmNlS2V5LCBzdG9yYWdlKSxcbiAgfSk7XG5cbiAgcmV0dXJuIChcbiAgICA8Q3VzdG9tR3JvdXBcbiAgICAgIG9yaWVudGF0aW9uPVwiaG9yaXpvbnRhbFwiXG4gICAgICBkZWZhdWx0TGF5b3V0PXtkZWZhdWx0TGF5b3V0fVxuICAgICAgb25MYXlvdXRDaGFuZ2VkPXsobGF5b3V0KSA9PiB7XG4gICAgICAgIHBlcnNpc3RTaXplcyhsYXlvdXQpOyAvLyBsaWJyYXJ5IHNhdmVzIHRoZSBzaXplc1xuICAgICAgICBwYW5lbHMuZm9yRWFjaCgoeyBpZCwgY29sbGFwc2libGUgfSkgPT4ge1xuICAgICAgICAgIGNvbnN0IHBjdCA9IGxheW91dFtpZF07XG4gICAgICAgICAgaWYgKHR5cGVvZiBwY3QgIT09IFwibnVtYmVyXCIpIHJldHVybjtcbiAgICAgICAgICBpZiAoY29sbGFwc2libGUgJiYgcGN0IDwgQ09MTEFQU0VfRVBTSUxPTikge1xuICAgICAgICAgICAgb25Db2xsYXBzZShpZCk7XG4gICAgICAgICAgICByZXR1cm47XG4gICAgICAgICAgfVxuICAgICAgICAgIGlmIChwY3QgPj0gQ09MTEFQU0VfRVBTSUxPTikgb25SZXNpemUoaWQsIGAke3BjdH0lYCk7XG4gICAgICAgIH0pO1xuICAgICAgfX1cbiAgICA+XG4gICAgICB7cGFuZWxzLm1hcCgoaXRlbSwgaW5kZXgpID0+IChcbiAgICAgICAgPFJlYWN0LkZyYWdtZW50IGtleT17aXRlbS5pZH0+XG4gICAgICAgICAge2luZGV4ID4gMCAmJiA8U2VwYXJhdG9yIC8+fVxuICAgICAgICAgIDxSZXNpemFibGVQYW5lbFxuICAgICAgICAgICAgaWQ9e2l0ZW0uaWR9XG4gICAgICAgICAgICBkZWZhdWx0U2l6ZT17aXRlbS5kZWZhdWx0U2l6ZX1cbiAgICAgICAgICAgIGNvbGxhcHNpYmxlPXtpdGVtLmNvbGxhcHNpYmxlfVxuICAgICAgICAgICAgbWluU2l6ZT17aXRlbS5taW5TaXplfVxuICAgICAgICAgICAgbWF4U2l6ZT17aXRlbS5tYXhTaXplfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxTdHlsZWRQb3J0YWxDb250YWluZXIgcmVmPXtob3N0Rm9yKGl0ZW0uaWQpfSAvPlxuICAgICAgICAgIDwvUmVzaXphYmxlUGFuZWw+XG4gICAgICAgIDwvUmVhY3QuRnJhZ21lbnQ+XG4gICAgICApKX1cbiAgICA8L0N1c3RvbUdyb3VwPlxuICApO1xufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWFvQiJ9 */"),StyledPortalContainer=styled("div",{target:"e8gmbta1",label:"StyledPortalContainer"})({position:"relative",height:"100%",width:"100%"},"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvSW50ZXJuYWwvUGFuZWwvUGFuZWwudHN4Iiwic291cmNlcyI6WyJzcmMvY29tcG9uZW50cy9JbnRlcm5hbC9QYW5lbC9QYW5lbC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQge1xuICBHcm91cCxcbiAgUGFuZWwgYXMgUmVzaXphYmxlUGFuZWwsXG4gIFNlcGFyYXRvcixcbiAgdXNlRGVmYXVsdExheW91dCxcbn0gZnJvbSBcInJlYWN0LXJlc2l6YWJsZS1wYW5lbHNcIjtcbmltcG9ydCB0eXBlIHsgTGF5b3V0U3RvcmFnZSB9IGZyb20gXCJyZWFjdC1yZXNpemFibGUtcGFuZWxzXCI7XG5cbi8qKiBBIHNpemU6IHBsYWluIG51bWJlciA9IHBpeGVsczsgdW5pdGxlc3Mgc3RyaW5nID0gcGVyY2VudGFnZSAoXCIxMCVcIikuICovXG50eXBlIFNpemUgPSBudW1iZXIgfCBzdHJpbmc7XG5cbmNvbnN0IEN1c3RvbUdyb3VwID0gc3R5bGVkKEdyb3VwKSh7IGhlaWdodDogXCIxMDAlXCIsIHdpZHRoOiBcIjEwMCVcIiB9KTtcblxuLy8gSG9zdCBub2RlIOKAlCBjb250ZW50IGlzIHBvcnRhbGVkIGluIGJ5IHRoZSBjb25zdW1lci4gYHJlbGF0aXZlYCBzb1xuLy8gYWJzb2x1dGVseS1wb3NpdGlvbmVkIGNvbnRlbnQgcmVmbG93cyB3aXRoIHRoZSBwYW5lbC5cbmNvbnN0IFN0eWxlZFBvcnRhbENvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICBoZWlnaHQ6IFwiMTAwJVwiLFxuICB3aWR0aDogXCIxMDAlXCIsXG59KTtcblxuZXhwb3J0IHR5cGUgUGFuZWxJdGVtID0ge1xuICAvKiogU3RhYmxlIGlkIOKAlCB1c2VkIGJ5IHJlYWN0LXJlc2l6YWJsZS1wYW5lbHMgdG8gdHJhY2sgdGhlIHBhbmVsIGFuZCBwZXJzaXN0XG4gICAqICBpdHMgc2l6ZSwgYW5kIHBhc3NlZCBiYWNrIHRvIGBob3N0Rm9yYC9gb25SZXNpemVgL2BvbkNvbGxhcHNlYC4gKi9cbiAgaWQ6IHN0cmluZztcbiAgZGVmYXVsdFNpemU/OiBTaXplO1xuICBtaW5TaXplPzogU2l6ZTtcbiAgbWF4U2l6ZT86IFNpemU7XG4gIC8qKiBBbGxvdyBkcmFnLXRvLWNvbGxhcHNlOyBjb2xsYXBzaW5nIGZpcmVzIGBvbkNvbGxhcHNlKGlkKWAuICovXG4gIGNvbGxhcHNpYmxlPzogYm9vbGVhbjtcbn07XG5cbmV4cG9ydCB0eXBlIFBhbmVsUHJvcHMgPSB7XG4gIC8qKiBWaXNpYmxlIHBhbmVscywgbGVmdC10by1yaWdodC4gQ29uZGl0aW9uYWxseSByZW5kZXJpbmcgaXRlbXMgdG9nZ2xlcyBhXG4gICAqICBwYW5lbCBXSVRIT1VUIHJlbW91bnRpbmcgdGhlIG90aGVycyAobm8gYGtleWAgb24gdGhlIGdyb3VwKS4gKi9cbiAgcGFuZWxzOiBQYW5lbEl0ZW1bXTtcbiAgLyoqIFBlcnNpc3Qgc2l6ZXMgKGtleWVkIGJ5IGBwZXJzaXN0ZW5jZUtleWAgKyB0aGUgY3VycmVudCBwYW5lbC1pZCBzZXQpLiAqL1xuICBwZXJzaXN0ZW5jZUtleT86IHN0cmluZztcbiAgc3RvcmFnZT86IExheW91dFN0b3JhZ2U7XG4gIC8qKiBSZWYgY2FsbGJhY2sgZm9yIGEgcGFuZWwncyBjb250ZW50IGhvc3QgYDxkaXY+YCAoY29uc3VtZXIgcG9ydGFscyBpbnRvIGl0KS4gKi9cbiAgaG9zdEZvcjogKGlkOiBzdHJpbmcpID0+IChlbDogSFRNTEVsZW1lbnQgfCBudWxsKSA9PiB2b2lkO1xuICAvKiogUmVwb3J0cyBhIHNldHRsZWQgZHJhZy1yZXNpemUgKHNpemUgYXMgYSBcIiVcIiBzdHJpbmcpLiAqL1xuICBvblJlc2l6ZTogKGlkOiBzdHJpbmcsIHNpemU6IHN0cmluZykgPT4gdm9pZDtcbiAgLyoqIFJlcG9ydHMgYSBkcmFnIHBhc3QgYG1pblNpemVgIG9uIGEgY29sbGFwc2libGUgcGFuZWwuICovXG4gIG9uQ29sbGFwc2U6IChpZDogc3RyaW5nKSA9PiB2b2lkO1xufTtcblxuLy8gZmxleEdyb3cgYXQvYmVsb3cgdGhpcyBpcyB0cmVhdGVkIGFzIGEgZHJhZy10by1jb2xsYXBzZSBnZXN0dXJlLlxuY29uc3QgQ09MTEFQU0VfRVBTSUxPTiA9IDAuNTtcblxuLy8gcmVhY3QtcmVzaXphYmxlLXBhbmVscyBwZXJzaXN0cyBub3RoaW5nIHdoZW4gZ2l2ZW4gYSBuby1vcCBzdG9yYWdlLlxuY29uc3QgTk9PUF9TVE9SQUdFOiBMYXlvdXRTdG9yYWdlID0geyBnZXRJdGVtOiAoKSA9PiBudWxsLCBzZXRJdGVtOiAoKSA9PiB7fSB9O1xuXG4vKipcbiAqIFN0b3JhZ2UgZm9yIHNpemUgcGVyc2lzdGVuY2U6IHJlYWwgb25seSB3aGVuIEJPVEggYSBgcGVyc2lzdGVuY2VLZXlgIGFuZCBhXG4gKiBgc3RvcmFnZWAgYXJlIHByb3ZpZGVkLiBObyBpbXBsaWNpdCBgd2luZG93LmxvY2FsU3RvcmFnZWAgZmFsbGJhY2sg4oCUXG4gKiBwZXJzaXN0ZW5jZSBpcyBzdHJpY3RseSBvcHQtaW4uXG4gKi9cbmZ1bmN0aW9uIHJlc29sdmVTaXplU3RvcmFnZShcbiAgcGVyc2lzdGVuY2VLZXk6IHN0cmluZyB8IHVuZGVmaW5lZCxcbiAgc3RvcmFnZTogTGF5b3V0U3RvcmFnZSB8IHVuZGVmaW5lZFxuKTogTGF5b3V0U3RvcmFnZSB7XG4gIGlmICghcGVyc2lzdGVuY2VLZXkgfHwgIXN0b3JhZ2UpIHJldHVybiBOT09QX1NUT1JBR0U7XG4gIHJldHVybiBzdG9yYWdlO1xufVxuXG4vKipcbiAqIEludGVybmFsIHJlc2l6YWJsZSBwYW5lbCByb3cg4oCUIHRoZSBvbmx5IHdyYXBwZXIgYXJvdW5kIHJlYWN0LXJlc2l6YWJsZS1wYW5lbHMuXG4gKiBSZW5kZXJzIG9uZSBQYW5lbCBwZXIgaXRlbSB3aXRoIGEgY29udGVudCBob3N0IGA8ZGl2PmAgKHJlZidkIGJhY2sgdmlhXG4gKiBgaG9zdEZvcmApLCBwZXJzaXN0cyBzaXplcywgYW5kIHJlcG9ydHMgZHJhZy1yZXNpemUgLyBkcmFnLXRvLWNvbGxhcHNlLiBUaGVcbiAqIHB1YmxpYyBgTGF5b3V0YCBjb21wb25lbnQgaXMgdGhlIGludGVuZGVkIGNvbnN1bWVyLlxuICovXG5leHBvcnQgZnVuY3Rpb24gUGFuZWwoe1xuICBwYW5lbHMsXG4gIHBlcnNpc3RlbmNlS2V5LFxuICBzdG9yYWdlLFxuICBob3N0Rm9yLFxuICBvblJlc2l6ZSxcbiAgb25Db2xsYXBzZSxcbn06IFBhbmVsUHJvcHMpOiBSZWFjdC5SZWFjdEVsZW1lbnQge1xuICBjb25zdCB7IGRlZmF1bHRMYXlvdXQsIG9uTGF5b3V0Q2hhbmdlZDogcGVyc2lzdFNpemVzIH0gPSB1c2VEZWZhdWx0TGF5b3V0KHtcbiAgICBpZDogcGVyc2lzdGVuY2VLZXkgPz8gXCJkcy1sYXlvdXRcIixcbiAgICBwYW5lbElkczogcGFuZWxzLm1hcCgocCkgPT4gcC5pZCksXG4gICAgc3RvcmFnZTogcmVzb2x2ZVNpemVTdG9yYWdlKHBlcnNpc3RlbmNlS2V5LCBzdG9yYWdlKSxcbiAgfSk7XG5cbiAgcmV0dXJuIChcbiAgICA8Q3VzdG9tR3JvdXBcbiAgICAgIG9yaWVudGF0aW9uPVwiaG9yaXpvbnRhbFwiXG4gICAgICBkZWZhdWx0TGF5b3V0PXtkZWZhdWx0TGF5b3V0fVxuICAgICAgb25MYXlvdXRDaGFuZ2VkPXsobGF5b3V0KSA9PiB7XG4gICAgICAgIHBlcnNpc3RTaXplcyhsYXlvdXQpOyAvLyBsaWJyYXJ5IHNhdmVzIHRoZSBzaXplc1xuICAgICAgICBwYW5lbHMuZm9yRWFjaCgoeyBpZCwgY29sbGFwc2libGUgfSkgPT4ge1xuICAgICAgICAgIGNvbnN0IHBjdCA9IGxheW91dFtpZF07XG4gICAgICAgICAgaWYgKHR5cGVvZiBwY3QgIT09IFwibnVtYmVyXCIpIHJldHVybjtcbiAgICAgICAgICBpZiAoY29sbGFwc2libGUgJiYgcGN0IDwgQ09MTEFQU0VfRVBTSUxPTikge1xuICAgICAgICAgICAgb25Db2xsYXBzZShpZCk7XG4gICAgICAgICAgICByZXR1cm47XG4gICAgICAgICAgfVxuICAgICAgICAgIGlmIChwY3QgPj0gQ09MTEFQU0VfRVBTSUxPTikgb25SZXNpemUoaWQsIGAke3BjdH0lYCk7XG4gICAgICAgIH0pO1xuICAgICAgfX1cbiAgICA+XG4gICAgICB7cGFuZWxzLm1hcCgoaXRlbSwgaW5kZXgpID0+IChcbiAgICAgICAgPFJlYWN0LkZyYWdtZW50IGtleT17aXRlbS5pZH0+XG4gICAgICAgICAge2luZGV4ID4gMCAmJiA8U2VwYXJhdG9yIC8+fVxuICAgICAgICAgIDxSZXNpemFibGVQYW5lbFxuICAgICAgICAgICAgaWQ9e2l0ZW0uaWR9XG4gICAgICAgICAgICBkZWZhdWx0U2l6ZT17aXRlbS5kZWZhdWx0U2l6ZX1cbiAgICAgICAgICAgIGNvbGxhcHNpYmxlPXtpdGVtLmNvbGxhcHNpYmxlfVxuICAgICAgICAgICAgbWluU2l6ZT17aXRlbS5taW5TaXplfVxuICAgICAgICAgICAgbWF4U2l6ZT17aXRlbS5tYXhTaXplfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxTdHlsZWRQb3J0YWxDb250YWluZXIgcmVmPXtob3N0Rm9yKGl0ZW0uaWQpfSAvPlxuICAgICAgICAgIDwvUmVzaXphYmxlUGFuZWw+XG4gICAgICAgIDwvUmVhY3QuRnJhZ21lbnQ+XG4gICAgICApKX1cbiAgICA8L0N1c3RvbUdyb3VwPlxuICApO1xufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCOEIifQ== */"),NOOP_STORAGE={getItem:()=>null,setItem:()=>{}};export function Panel({panels,persistenceKey,storage,hostFor,onResize,onCollapse}){let{defaultLayout,onLayoutChanged:persistSizes}=useDefaultLayout({id:persistenceKey??"ds-layout",panelIds:panels.map(p=>p.id),storage:persistenceKey&&storage?storage:NOOP_STORAGE});return React.createElement(CustomGroup,{orientation:"horizontal",defaultLayout:defaultLayout,onLayoutChanged:layout=>{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)=>React.createElement(React.Fragment,{key:item.id},index>0&&React.createElement(Separator,null),React.createElement(ResizablePanel,{id:item.id,defaultSize:item.defaultSize,collapsible:item.collapsible,minSize:item.minSize,maxSize:item.maxSize},React.createElement(StyledPortalContainer,{ref:hostFor(item.id)})))))}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{Panel}from"./Panel";
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import type React from "react";
|
|
2
|
+
export type SandwichProps = {
|
|
3
|
+
children: React.ReactNode;
|
|
4
|
+
"data-e2e-test-id"?: string;
|
|
5
|
+
/** Override the root's `data-ds-id` (e.g. when a wrapper component owns the node). */
|
|
6
|
+
"data-ds-id"?: string;
|
|
7
|
+
} & React.HTMLAttributes<HTMLDivElement>;
|
|
8
|
+
/**
|
|
9
|
+
* Separator visibility:
|
|
10
|
+
* - `auto`: show only while the content is scrolled away from the edge (default).
|
|
11
|
+
* - `always`: always visible.
|
|
12
|
+
* - `never`: never visible.
|
|
13
|
+
*/
|
|
14
|
+
export type SandwichSeparator = "auto" | "always" | "never";
|
|
15
|
+
export type SandwichHeaderProps = {
|
|
16
|
+
children: React.ReactNode;
|
|
17
|
+
showSeparator?: SandwichSeparator;
|
|
18
|
+
};
|
|
19
|
+
export type SandwichFooterProps = {
|
|
20
|
+
children: React.ReactNode;
|
|
21
|
+
showSeparator?: SandwichSeparator;
|
|
22
|
+
};
|
|
23
|
+
export type SandwichBodyProps = {
|
|
24
|
+
children: React.ReactNode;
|
|
25
|
+
/** Forwarded scroll handler; fires after the internal edge measurement. */
|
|
26
|
+
onScroll?: React.UIEventHandler<HTMLDivElement>;
|
|
27
|
+
/** Forwarded to the scroll container element (e.g. for scroll restoration). */
|
|
28
|
+
scrollRef?: React.Ref<HTMLDivElement>;
|
|
29
|
+
};
|
|
30
|
+
/** Scroll-edge visibility published by `Body`, consumed by `Header` / `Footer`. */
|
|
31
|
+
export type SandwichEdges = {
|
|
32
|
+
/** Start of the scroll content is visible (not scrolled down). */
|
|
33
|
+
atTop: boolean;
|
|
34
|
+
/** End of the scroll content is visible (scrolled to bottom). */
|
|
35
|
+
atBottom: boolean;
|
|
36
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { SandwichProps } from "./-types";
|
|
3
|
+
import { SandwichBody } from "./SandwichBody";
|
|
4
|
+
import { SandwichHeader } from "./SandwichHeader";
|
|
5
|
+
import { SandwichFooter } from "./SandwichFooter";
|
|
6
|
+
/**
|
|
7
|
+
* Internal compound component: a scrollable middle region (`Sandwich.Body`)
|
|
8
|
+
* flanked by a sticky `Sandwich.Header` / `Sandwich.Footer` that reveal a border
|
|
9
|
+
* only while content is scrolled under them. Edge state is shared through
|
|
10
|
+
* context (see `useSandwichContext.tsx`).
|
|
11
|
+
*/
|
|
12
|
+
declare function SandwichRoot({ children, ...rest }: SandwichProps): React.ReactElement;
|
|
13
|
+
/**
|
|
14
|
+
* Compound export: `Sandwich` with `.Header`, `.Body`, `.Footer` attached.
|
|
15
|
+
* Object.assign keeps the static sub-components typed on the root
|
|
16
|
+
* (function-declaration statics don't type-check).
|
|
17
|
+
*/
|
|
18
|
+
export declare const Sandwich: typeof SandwichRoot & {
|
|
19
|
+
Header: typeof SandwichHeader;
|
|
20
|
+
Body: typeof SandwichBody;
|
|
21
|
+
Footer: typeof SandwichFooter;
|
|
22
|
+
};
|
|
23
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import React,{useCallback,useMemo,useState}from"react";import styled from"@emotion/styled";import{SandwichProvider}from"./useSandwichContext";import{SandwichBody}from"./SandwichBody";import{SandwichHeader}from"./SandwichHeader";import{SandwichFooter}from"./SandwichFooter";let StyledRoot=styled("div",{target:"e164s6zy0",label:"StyledRoot"})({display:"flex",flexDirection:"column",minHeight:0,height:"100%",width:"100%"},"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvSW50ZXJuYWwvU2FuZHdpY2gvU2FuZHdpY2gudHN4Iiwic291cmNlcyI6WyJzcmMvY29tcG9uZW50cy9JbnRlcm5hbC9TYW5kd2ljaC9TYW5kd2ljaC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IHVzZUNhbGxiYWNrLCB1c2VNZW1vLCB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgdHlwZSB7IFNhbmR3aWNoRWRnZXMsIFNhbmR3aWNoUHJvcHMgfSBmcm9tIFwiLi8tdHlwZXNcIjtcbmltcG9ydCB7IFNhbmR3aWNoUHJvdmlkZXIgfSBmcm9tIFwiLi91c2VTYW5kd2ljaENvbnRleHRcIjtcbmltcG9ydCB7IFNhbmR3aWNoQm9keSB9IGZyb20gXCIuL1NhbmR3aWNoQm9keVwiO1xuaW1wb3J0IHsgU2FuZHdpY2hIZWFkZXIgfSBmcm9tIFwiLi9TYW5kd2ljaEhlYWRlclwiO1xuaW1wb3J0IHsgU2FuZHdpY2hGb290ZXIgfSBmcm9tIFwiLi9TYW5kd2ljaEZvb3RlclwiO1xuXG4vLyBDb2x1bW4gbGF5b3V0OiBoZWFkZXIvZm9vdGVyIHNpdCBhYm92ZS9iZWxvdyBhIHNpbmdsZSBzY3JvbGwgcmVnaW9uLiBUaGVcbi8vIHJvb3QgaXRzZWxmIGRvZXMgbm90IHNjcm9sbCDigJQgYEJvZHlgIG93bnMgdGhlIG92ZXJmbG93LlxuY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZC5kaXYoe1xuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgZmxleERpcmVjdGlvbjogXCJjb2x1bW5cIixcbiAgbWluSGVpZ2h0OiAwLFxuICBoZWlnaHQ6IFwiMTAwJVwiLFxuICB3aWR0aDogXCIxMDAlXCIsXG59KTtcblxuLyoqXG4gKiBJbnRlcm5hbCBjb21wb3VuZCBjb21wb25lbnQ6IGEgc2Nyb2xsYWJsZSBtaWRkbGUgcmVnaW9uIChgU2FuZHdpY2guQm9keWApXG4gKiBmbGFua2VkIGJ5IGEgc3RpY2t5IGBTYW5kd2ljaC5IZWFkZXJgIC8gYFNhbmR3aWNoLkZvb3RlcmAgdGhhdCByZXZlYWwgYSBib3JkZXJcbiAqIG9ubHkgd2hpbGUgY29udGVudCBpcyBzY3JvbGxlZCB1bmRlciB0aGVtLiBFZGdlIHN0YXRlIGlzIHNoYXJlZCB0aHJvdWdoXG4gKiBjb250ZXh0IChzZWUgYHVzZVNhbmR3aWNoQ29udGV4dC50c3hgKS5cbiAqL1xuZnVuY3Rpb24gU2FuZHdpY2hSb290KHtcbiAgY2hpbGRyZW4sXG4gIC4uLnJlc3Rcbn06IFNhbmR3aWNoUHJvcHMpOiBSZWFjdC5SZWFjdEVsZW1lbnQge1xuICAvLyBEZWZhdWx0OiBldmVyeXRoaW5nIHZpc2libGUgKG5vIHNjcm9sbGluZyBuZWVkZWQpIOKGkiBubyBib3JkZXJzLlxuICBjb25zdCBbZWRnZXMsIHNldEVkZ2VzU3RhdGVdID0gdXNlU3RhdGU8U2FuZHdpY2hFZGdlcz4oe1xuICAgIGF0VG9wOiB0cnVlLFxuICAgIGF0Qm90dG9tOiB0cnVlLFxuICB9KTtcblxuICBjb25zdCBzZXRFZGdlcyA9IHVzZUNhbGxiYWNrKChuZXh0OiBQYXJ0aWFsPFNhbmR3aWNoRWRnZXM+KSA9PiB7XG4gICAgc2V0RWRnZXNTdGF0ZSgocHJldikgPT4ge1xuICAgICAgY29uc3QgbWVyZ2VkID0geyAuLi5wcmV2LCAuLi5uZXh0IH07XG4gICAgICBpZiAobWVyZ2VkLmF0VG9wID09PSBwcmV2LmF0VG9wICYmIG1lcmdlZC5hdEJvdHRvbSA9PT0gcHJldi5hdEJvdHRvbSkge1xuICAgICAgICByZXR1cm4gcHJldjtcbiAgICAgIH1cbiAgICAgIHJldHVybiBtZXJnZWQ7XG4gICAgfSk7XG4gIH0sIFtdKTtcblxuICBjb25zdCB2YWx1ZSA9IHVzZU1lbW8oKCkgPT4gKHsgLi4uZWRnZXMsIHNldEVkZ2VzIH0pLCBbZWRnZXMsIHNldEVkZ2VzXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8U2FuZHdpY2hQcm92aWRlciB2YWx1ZT17dmFsdWV9PlxuICAgICAgPFN0eWxlZFJvb3QgZGF0YS1kcy1pZD1cIlNhbmR3aWNoXCIgey4uLnJlc3R9PlxuICAgICAgICB7Y2hpbGRyZW59XG4gICAgICA8L1N0eWxlZFJvb3Q+XG4gICAgPC9TYW5kd2ljaFByb3ZpZGVyPlxuICApO1xufVxuXG4vKipcbiAqIENvbXBvdW5kIGV4cG9ydDogYFNhbmR3aWNoYCB3aXRoIGAuSGVhZGVyYCwgYC5Cb2R5YCwgYC5Gb290ZXJgIGF0dGFjaGVkLlxuICogT2JqZWN0LmFzc2lnbiBrZWVwcyB0aGUgc3RhdGljIHN1Yi1jb21wb25lbnRzIHR5cGVkIG9uIHRoZSByb290XG4gKiAoZnVuY3Rpb24tZGVjbGFyYXRpb24gc3RhdGljcyBkb24ndCB0eXBlLWNoZWNrKS5cbiAqL1xuZXhwb3J0IGNvbnN0IFNhbmR3aWNoID0gT2JqZWN0LmFzc2lnbihTYW5kd2ljaFJvb3QsIHtcbiAgSGVhZGVyOiBTYW5kd2ljaEhlYWRlcixcbiAgQm9keTogU2FuZHdpY2hCb2R5LFxuICBGb290ZXI6IFNhbmR3aWNoRm9vdGVyLFxufSk7XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVW1CIn0= */");export const Sandwich=Object.assign(function({children,...rest}){let[edges,setEdgesState]=useState({atTop:!0,atBottom:!0}),setEdges=useCallback(next=>{setEdgesState(prev=>{let merged={...prev,...next};return merged.atTop===prev.atTop&&merged.atBottom===prev.atBottom?prev:merged})},[]),value=useMemo(()=>({...edges,setEdges}),[edges,setEdges]);return React.createElement(SandwichProvider,{value:value},React.createElement(StyledRoot,{"data-ds-id":"Sandwich",...rest},children))},{Header:SandwichHeader,Body:SandwichBody,Footer:SandwichFooter});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import React,{useCallback,useEffect,useLayoutEffect,useRef}from"react";import styled from"@emotion/styled";import{useSandwichContext}from"./useSandwichContext";let StyledBody=styled("div",{target:"eog7fee0",label:"StyledBody"})({flex:"1 1 auto",minHeight:0,overflowY:"auto",position:"relative"},"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvSW50ZXJuYWwvU2FuZHdpY2gvU2FuZHdpY2hCb2R5LnRzeCIsInNvdXJjZXMiOlsic3JjL2NvbXBvbmVudHMvSW50ZXJuYWwvU2FuZHdpY2gvU2FuZHdpY2hCb2R5LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCwgdXNlTGF5b3V0RWZmZWN0LCB1c2VSZWYgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHR5cGUgeyBTYW5kd2ljaEJvZHlQcm9wcyB9IGZyb20gXCIuLy10eXBlc1wiO1xuaW1wb3J0IHsgdXNlU2FuZHdpY2hDb250ZXh0IH0gZnJvbSBcIi4vdXNlU2FuZHdpY2hDb250ZXh0XCI7XG5cbmNvbnN0IFN0eWxlZEJvZHkgPSBzdHlsZWQuZGl2KHtcbiAgZmxleDogXCIxIDEgYXV0b1wiLFxuICBtaW5IZWlnaHQ6IDAsXG4gIG92ZXJmbG93WTogXCJhdXRvXCIsXG4gIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG59KTtcblxuLy8gcHggdG9sZXJhbmNlIOKAlCBzdWItcGl4ZWwgcm91bmRpbmcgc2hvdWxkbid0IGxlYXZlIGEgZGl2aWRlciBzdHVjayBvbi5cbmNvbnN0IEVER0VfVEhSRVNIT0xEID0gMTtcblxuZXhwb3J0IGZ1bmN0aW9uIFNhbmR3aWNoQm9keSh7XG4gIGNoaWxkcmVuLFxuICBvblNjcm9sbCxcbiAgc2Nyb2xsUmVmLFxufTogU2FuZHdpY2hCb2R5UHJvcHMpOiBSZWFjdC5SZWFjdEVsZW1lbnQge1xuICBjb25zdCB7IHNldEVkZ2VzIH0gPSB1c2VTYW5kd2ljaENvbnRleHQoKTtcbiAgY29uc3QgY29udGFpbmVyUmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50IHwgbnVsbD4obnVsbCk7XG4gIGNvbnN0IGNvbnRlbnRSZWYgPSB1c2VSZWY8SFRNTERpdkVsZW1lbnQgfCBudWxsPihudWxsKTtcblxuICAvLyBLZWVwIHRoZSBpbnRlcm5hbCByZWYgKHVzZWQgZm9yIG1lYXN1cmluZykgd2hpbGUgYWxzbyBmb3J3YXJkaW5nIHRoZSBub2RlIHRvXG4gIC8vIHRoZSBjb25zdW1lcidzIGBzY3JvbGxSZWZgIOKAlCBhIGNhbGxiYWNrIHJlZiBoYW5kbGVzIGJvdGggZm9ybXMuXG4gIGNvbnN0IHNldENvbnRhaW5lclJlZiA9IHVzZUNhbGxiYWNrKFxuICAgIChub2RlOiBIVE1MRGl2RWxlbWVudCB8IG51bGwpID0+IHtcbiAgICAgIGNvbnRhaW5lclJlZi5jdXJyZW50ID0gbm9kZTtcbiAgICAgIGlmICh0eXBlb2Ygc2Nyb2xsUmVmID09PSBcImZ1bmN0aW9uXCIpIHtcbiAgICAgICAgc2Nyb2xsUmVmKG5vZGUpO1xuICAgICAgfSBlbHNlIGlmIChzY3JvbGxSZWYpIHtcbiAgICAgICAgY29uc3QgbXV0YWJsZVJlZiA9XG4gICAgICAgICAgc2Nyb2xsUmVmIGFzIFJlYWN0Lk11dGFibGVSZWZPYmplY3Q8SFRNTERpdkVsZW1lbnQgfCBudWxsPjtcbiAgICAgICAgbXV0YWJsZVJlZi5jdXJyZW50ID0gbm9kZTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtzY3JvbGxSZWZdXG4gICk7XG5cbiAgY29uc3QgcmVjYWxjdWxhdGVFZGdlcyA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICBjb25zdCBlbCA9IGNvbnRhaW5lclJlZi5jdXJyZW50O1xuICAgIGlmICghZWwpIHJldHVybjtcbiAgICBjb25zdCB7IHNjcm9sbFRvcCwgc2Nyb2xsSGVpZ2h0LCBjbGllbnRIZWlnaHQgfSA9IGVsO1xuICAgIHNldEVkZ2VzKHtcbiAgICAgIGF0VG9wOiBzY3JvbGxUb3AgPD0gRURHRV9USFJFU0hPTEQsXG4gICAgICBhdEJvdHRvbTogc2Nyb2xsVG9wICsgY2xpZW50SGVpZ2h0ID49IHNjcm9sbEhlaWdodCAtIEVER0VfVEhSRVNIT0xELFxuICAgIH0pO1xuICB9LCBbc2V0RWRnZXNdKTtcblxuICBjb25zdCBoYW5kbGVTY3JvbGwgPSB1c2VDYWxsYmFjayhcbiAgICAoZXZlbnQ6IFJlYWN0LlVJRXZlbnQ8SFRNTERpdkVsZW1lbnQ+KSA9PiB7XG4gICAgICByZWNhbGN1bGF0ZUVkZ2VzKCk7XG4gICAgICBvblNjcm9sbD8uKGV2ZW50KTtcbiAgICB9LFxuICAgIFtyZWNhbGN1bGF0ZUVkZ2VzLCBvblNjcm9sbF1cbiAgKTtcblxuICAvLyBSZS1tZWFzdXJlIGFmdGVyIGV2ZXJ5IHJlbmRlciAobW91bnQgKyBjb250ZW50IGNoYW5nZXMgdmlhIFJlYWN0KS5cbiAgdXNlTGF5b3V0RWZmZWN0KHJlY2FsY3VsYXRlRWRnZXMpO1xuXG4gIC8vIFJlLW1lYXN1cmUgb24gc2l6ZSBjaGFuZ2VzIHRoYXQgRE9OJ1QgdHJpZ2dlciBhIFJlYWN0IHJlbmRlcjogdGhlIGNvbnRlbnRcbiAgLy8gZ3Jvd2luZy9zaHJpbmtpbmcgKGltYWdlIGxvYWQsIGFjY29yZGlvbiBleHBhbmQsIHRleHQgcmVmbG93KSBhbmQgdGhlXG4gIC8vIHZpZXdwb3J0IGl0c2VsZiByZXNpemluZy4gT2JzZXJ2ZSBib3RoIG5vZGVzLlxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmICh0eXBlb2YgUmVzaXplT2JzZXJ2ZXIgPT09IFwidW5kZWZpbmVkXCIpIHJldHVybiB1bmRlZmluZWQ7XG4gICAgY29uc3Qgb2JzZXJ2ZXIgPSBuZXcgUmVzaXplT2JzZXJ2ZXIoKCkgPT4gcmVjYWxjdWxhdGVFZGdlcygpKTtcbiAgICBpZiAoY29udGFpbmVyUmVmLmN1cnJlbnQpIG9ic2VydmVyLm9ic2VydmUoY29udGFpbmVyUmVmLmN1cnJlbnQpO1xuICAgIGlmIChjb250ZW50UmVmLmN1cnJlbnQpIG9ic2VydmVyLm9ic2VydmUoY29udGVudFJlZi5jdXJyZW50KTtcbiAgICByZXR1cm4gKCkgPT4gb2JzZXJ2ZXIuZGlzY29ubmVjdCgpO1xuICB9LCBbcmVjYWxjdWxhdGVFZGdlc10pO1xuXG4gIHJldHVybiAoXG4gICAgLy8gdGFiSW5kZXggbWFrZXMgdGhlIHNjcm9sbCByZWdpb24ga2V5Ym9hcmQtYWNjZXNzaWJsZSAoYTExeTogc2Nyb2xsYWJsZVxuICAgIC8vIHJlZ2lvbnMgbXVzdCBiZSBmb2N1c2FibGUgc28ga2V5Ym9hcmQgdXNlcnMgY2FuIHNjcm9sbCB0aGVtKS5cbiAgICA8U3R5bGVkQm9keSByZWY9e3NldENvbnRhaW5lclJlZn0gb25TY3JvbGw9e2hhbmRsZVNjcm9sbH0gdGFiSW5kZXg9ezB9PlxuICAgICAgPGRpdiByZWY9e2NvbnRlbnRSZWZ9PntjaGlsZHJlbn08L2Rpdj5cbiAgICA8L1N0eWxlZEJvZHk+XG4gICk7XG59XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS21CIn0= */");export function SandwichBody({children,onScroll,scrollRef}){let{setEdges}=useSandwichContext(),containerRef=useRef(null),contentRef=useRef(null),setContainerRef=useCallback(node=>{containerRef.current=node,"function"==typeof scrollRef?scrollRef(node):scrollRef&&(scrollRef.current=node)},[scrollRef]),recalculateEdges=useCallback(()=>{let el=containerRef.current;if(!el)return;let{scrollTop,scrollHeight,clientHeight}=el;setEdges({atTop:scrollTop<=1,atBottom:scrollTop+clientHeight>=scrollHeight-1})},[setEdges]),handleScroll=useCallback(event=>{recalculateEdges(),onScroll?.(event)},[recalculateEdges,onScroll]);return useLayoutEffect(recalculateEdges),useEffect(()=>{if("undefined"==typeof ResizeObserver)return;let observer=new ResizeObserver(()=>recalculateEdges());return containerRef.current&&observer.observe(containerRef.current),contentRef.current&&observer.observe(contentRef.current),()=>observer.disconnect()},[recalculateEdges]),React.createElement(StyledBody,{ref:setContainerRef,onScroll:handleScroll,tabIndex:0},React.createElement("div",{ref:contentRef},children))}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import React from"react";import styled from"@emotion/styled";import{useSandwichContext}from"./useSandwichContext";let StyledFooter=styled("div",{shouldForwardProp:prop=>"showBorder"!==prop,target:"esecync0",label:"StyledFooter"})(({theme,showBorder})=>({position:"sticky",bottom:0,flex:"0 0 auto",zIndex:1,borderTopWidth:1,borderTopStyle:"solid",borderTopColor:showBorder?theme.values.color.border.secondary.default:"transparent",transition:"border-color 0.15s ease"}),"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvSW50ZXJuYWwvU2FuZHdpY2gvU2FuZHdpY2hGb290ZXIudHN4Iiwic291cmNlcyI6WyJzcmMvY29tcG9uZW50cy9JbnRlcm5hbC9TYW5kd2ljaC9TYW5kd2ljaEZvb3Rlci50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgdHlwZSB7IFNhbmR3aWNoRm9vdGVyUHJvcHMgfSBmcm9tIFwiLi8tdHlwZXNcIjtcbmltcG9ydCB7IHVzZVNhbmR3aWNoQ29udGV4dCB9IGZyb20gXCIuL3VzZVNhbmR3aWNoQ29udGV4dFwiO1xuXG5jb25zdCBCT1JERVJfV0lEVEggPSAxO1xuXG5jb25zdCBTdHlsZWRGb290ZXIgPSBzdHlsZWQoXCJkaXZcIiwge1xuICBzaG91bGRGb3J3YXJkUHJvcDogKHByb3ApID0+IHByb3AgIT09IFwic2hvd0JvcmRlclwiLFxufSk8eyBzaG93Qm9yZGVyOiBib29sZWFuIH0+KCh7IHRoZW1lLCBzaG93Qm9yZGVyIH0pID0+ICh7XG4gIHBvc2l0aW9uOiBcInN0aWNreVwiLFxuICBib3R0b206IDAsXG4gIGZsZXg6IFwiMCAwIGF1dG9cIixcbiAgekluZGV4OiAxLFxuICAvLyBSZXNlcnZlIHRoZSBib3JkZXIgYm94IGF0IGFsbCB0aW1lczsgb25seSB0aGUgY29sb3IgdG9nZ2xlcyBzbyB0aGUgZGl2aWRlclxuICAvLyBhcHBlYXJzIHdpdGhvdXQgc2hpZnRpbmcgbGF5b3V0LlxuICBib3JkZXJUb3BXaWR0aDogQk9SREVSX1dJRFRILFxuICBib3JkZXJUb3BTdHlsZTogXCJzb2xpZFwiLFxuICBib3JkZXJUb3BDb2xvcjogc2hvd0JvcmRlclxuICAgID8gdGhlbWUudmFsdWVzLmNvbG9yLmJvcmRlci5zZWNvbmRhcnkuZGVmYXVsdFxuICAgIDogXCJ0cmFuc3BhcmVudFwiLFxuICB0cmFuc2l0aW9uOiBcImJvcmRlci1jb2xvciAwLjE1cyBlYXNlXCIsXG59KSk7XG5cbmV4cG9ydCBmdW5jdGlvbiBTYW5kd2ljaEZvb3Rlcih7XG4gIGNoaWxkcmVuLFxuICBzaG93U2VwYXJhdG9yID0gXCJhdXRvXCIsXG59OiBTYW5kd2ljaEZvb3RlclByb3BzKTogUmVhY3QuUmVhY3RFbGVtZW50IHtcbiAgY29uc3QgeyBhdEJvdHRvbSB9ID0gdXNlU2FuZHdpY2hDb250ZXh0KCk7XG4gIC8vIERpdmlkZXIgd2hpbGUgY29udGVudCByZW1haW5zIGJlbG93IHRoZSBmb2xkIChvciBwZXIgYHNob3dTZXBhcmF0b3JgKS5cbiAgY29uc3Qgc2hvd0JvcmRlciA9XG4gICAgc2hvd1NlcGFyYXRvciA9PT0gXCJhbHdheXNcIiB8fCAoc2hvd1NlcGFyYXRvciA9PT0gXCJhdXRvXCIgJiYgIWF0Qm90dG9tKTtcbiAgcmV0dXJuIDxTdHlsZWRGb290ZXIgc2hvd0JvcmRlcj17c2hvd0JvcmRlcn0+e2NoaWxkcmVufTwvU3R5bGVkRm9vdGVyPjtcbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPcUIifQ== */");export function SandwichFooter({children,showSeparator="auto"}){let{atBottom}=useSandwichContext();return React.createElement(StyledFooter,{showBorder:"always"===showSeparator||"auto"===showSeparator&&!atBottom},children)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import React from"react";import styled from"@emotion/styled";import{useSandwichContext}from"./useSandwichContext";let StyledHeader=styled("div",{shouldForwardProp:prop=>"showBorder"!==prop,target:"erdgd190",label:"StyledHeader"})(({theme,showBorder})=>({position:"sticky",top:0,flex:"0 0 auto",zIndex:1,borderBottomWidth:1,borderBottomStyle:"solid",borderBottomColor:showBorder?theme.values.color.border.secondary.default:"transparent",transition:"border-color 0.15s ease"}),"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvSW50ZXJuYWwvU2FuZHdpY2gvU2FuZHdpY2hIZWFkZXIudHN4Iiwic291cmNlcyI6WyJzcmMvY29tcG9uZW50cy9JbnRlcm5hbC9TYW5kd2ljaC9TYW5kd2ljaEhlYWRlci50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgdHlwZSB7IFNhbmR3aWNoSGVhZGVyUHJvcHMgfSBmcm9tIFwiLi8tdHlwZXNcIjtcbmltcG9ydCB7IHVzZVNhbmR3aWNoQ29udGV4dCB9IGZyb20gXCIuL3VzZVNhbmR3aWNoQ29udGV4dFwiO1xuXG5jb25zdCBCT1JERVJfV0lEVEggPSAxO1xuXG5jb25zdCBTdHlsZWRIZWFkZXIgPSBzdHlsZWQoXCJkaXZcIiwge1xuICBzaG91bGRGb3J3YXJkUHJvcDogKHByb3ApID0+IHByb3AgIT09IFwic2hvd0JvcmRlclwiLFxufSk8eyBzaG93Qm9yZGVyOiBib29sZWFuIH0+KCh7IHRoZW1lLCBzaG93Qm9yZGVyIH0pID0+ICh7XG4gIHBvc2l0aW9uOiBcInN0aWNreVwiLFxuICB0b3A6IDAsXG4gIGZsZXg6IFwiMCAwIGF1dG9cIixcbiAgekluZGV4OiAxLFxuICAvLyBSZXNlcnZlIHRoZSBib3JkZXIgYm94IGF0IGFsbCB0aW1lczsgb25seSB0aGUgY29sb3IgdG9nZ2xlcyBzbyB0aGUgZGl2aWRlclxuICAvLyBhcHBlYXJzIHdpdGhvdXQgc2hpZnRpbmcgbGF5b3V0LlxuICBib3JkZXJCb3R0b21XaWR0aDogQk9SREVSX1dJRFRILFxuICBib3JkZXJCb3R0b21TdHlsZTogXCJzb2xpZFwiLFxuICBib3JkZXJCb3R0b21Db2xvcjogc2hvd0JvcmRlclxuICAgID8gdGhlbWUudmFsdWVzLmNvbG9yLmJvcmRlci5zZWNvbmRhcnkuZGVmYXVsdFxuICAgIDogXCJ0cmFuc3BhcmVudFwiLFxuICB0cmFuc2l0aW9uOiBcImJvcmRlci1jb2xvciAwLjE1cyBlYXNlXCIsXG59KSk7XG5cbmV4cG9ydCBmdW5jdGlvbiBTYW5kd2ljaEhlYWRlcih7XG4gIGNoaWxkcmVuLFxuICBzaG93U2VwYXJhdG9yID0gXCJhdXRvXCIsXG59OiBTYW5kd2ljaEhlYWRlclByb3BzKTogUmVhY3QuUmVhY3RFbGVtZW50IHtcbiAgY29uc3QgeyBhdFRvcCB9ID0gdXNlU2FuZHdpY2hDb250ZXh0KCk7XG4gIC8vIERpdmlkZXIgb25jZSB0aGUgc3RhcnQgb2YgdGhlIGNvbnRlbnQgaXMgc2Nyb2xsZWQgYXdheSAob3IgcGVyIGBzaG93U2VwYXJhdG9yYCkuXG4gIGNvbnN0IHNob3dCb3JkZXIgPVxuICAgIHNob3dTZXBhcmF0b3IgPT09IFwiYWx3YXlzXCIgfHwgKHNob3dTZXBhcmF0b3IgPT09IFwiYXV0b1wiICYmICFhdFRvcCk7XG4gIHJldHVybiA8U3R5bGVkSGVhZGVyIHNob3dCb3JkZXI9e3Nob3dCb3JkZXJ9PntjaGlsZHJlbn08L1N0eWxlZEhlYWRlcj47XG59XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBT3FCIn0= */");export function SandwichHeader({children,showSeparator="auto"}){let{atTop}=useSandwichContext();return React.createElement(StyledHeader,{showBorder:"always"===showSeparator||"auto"===showSeparator&&!atTop},children)}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { SandwichEdges } from "./-types";
|
|
2
|
+
/**
|
|
3
|
+
* Context decouples the parts: `Body` reports edge visibility via `setEdges`,
|
|
4
|
+
* `Header` / `Footer` read `atTop` / `atBottom`. The link is the context, not
|
|
5
|
+
* child order, so the parts may be authored in any order.
|
|
6
|
+
*/
|
|
7
|
+
export type SandwichContextValue = SandwichEdges & {
|
|
8
|
+
setEdges: (edges: Partial<SandwichEdges>) => void;
|
|
9
|
+
};
|
|
10
|
+
export declare const SandwichProvider: React.Provider<SandwichContextValue>;
|
|
11
|
+
/** Read the Sandwich context, or throw if used outside `<Sandwich>`. */
|
|
12
|
+
export declare function useSandwichContext(): SandwichContextValue;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{createContext,useContext}from"react";let SandwichContext=createContext(null);export const SandwichProvider=SandwichContext.Provider;export function useSandwichContext(){let ctx=useContext(SandwichContext);if(!ctx)throw Error("Sandwich.Header / Sandwich.Footer / Sandwich.Body must be used within <Sandwich>.");return ctx}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Slot keys — the single source of truth. The key *types* (`SlotKey`,
|
|
3
|
+
* `SidePanelKey`, `PanelKey`) are derived from these const values below and
|
|
4
|
+
* re-exported by `-types.ts`, so the literals are written exactly once.
|
|
5
|
+
*/
|
|
6
|
+
/** Slot keys as named constants — reference these instead of bare literals. */
|
|
7
|
+
export declare const Slot: {
|
|
8
|
+
readonly sidebar: "sidebar";
|
|
9
|
+
readonly content: "content";
|
|
10
|
+
readonly splitview: "splitview";
|
|
11
|
+
readonly rightPanel: "rightPanel";
|
|
12
|
+
};
|
|
13
|
+
/** Side panels (open/close), left + right. */
|
|
14
|
+
export declare const SIDE_PANELS: readonly ["sidebar", "rightPanel"];
|
|
15
|
+
/** Flex panels — content is always shown; splitview toggles. */
|
|
16
|
+
export declare const PANELS: readonly ["content", "splitview"];
|
|
17
|
+
/** Left-to-right panel order in the resizable row (the full slot set). */
|
|
18
|
+
export declare const PANEL_ORDER: readonly ["sidebar", "content", "splitview", "rightPanel"];
|
|
19
|
+
export type SlotKey = (typeof PANEL_ORDER)[number];
|
|
20
|
+
export type SidePanelKey = (typeof SIDE_PANELS)[number];
|
|
21
|
+
export type PanelKey = (typeof PANELS)[number];
|
|
22
|
+
/** Slide-animation timing. Injected on `:root` by `Layout.Provider` (`SlideVars`)
|
|
23
|
+
* from the theme's `navSlide` token; read by animated layout surfaces. */
|
|
24
|
+
export declare const SLIDE_VAR: {
|
|
25
|
+
readonly duration: "--ds-layout-slide-duration";
|
|
26
|
+
readonly easing: "--ds-layout-slide-easing";
|
|
27
|
+
};
|
|
28
|
+
/** Vertical offset for the right panel — set this (e.g. to a sticky subnav's
|
|
29
|
+
* height) and the panel tracks it; defaults to `0` when unset. */
|
|
30
|
+
export declare const SUBNAV_OFFSET_VAR = "--ds-layout-subnav-offset";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export const Slot={sidebar:"sidebar",content:"content",splitview:"splitview",rightPanel:"rightPanel"};export const SIDE_PANELS=[Slot.sidebar,Slot.rightPanel];export const PANELS=[Slot.content,Slot.splitview];export const PANEL_ORDER=[Slot.sidebar,Slot.content,Slot.splitview,Slot.rightPanel];export const SLIDE_VAR={duration:"--ds-layout-slide-duration",easing:"--ds-layout-slide-easing"};export const SUBNAV_OFFSET_VAR="--ds-layout-subnav-offset";
|
|
@@ -0,0 +1,214 @@
|
|
|
1
|
+
import type React from "react";
|
|
2
|
+
import type { PanelKey, SidePanelKey, SlotKey } from "./-constants";
|
|
3
|
+
import type { IconProps } from "../Icon/Icon";
|
|
4
|
+
/**
|
|
5
|
+
* Surface = compound components (`Layout.Sidebar` / `Layout.RightPanel` /
|
|
6
|
+
* `Layout.Content` / `Layout.Split`) + one control hook
|
|
7
|
+
* (`useLayout()`). The manager owns the open/collapsed/size state; components
|
|
8
|
+
* render per that state. State engine is replaceable (see `LayoutStore`).
|
|
9
|
+
*
|
|
10
|
+
* Slots (max 4 panels, max 3 visible at once — budget enforcement deferred):
|
|
11
|
+
* sidebar | content | splitview | rightPanel
|
|
12
|
+
*/
|
|
13
|
+
/** A size: plain number = pixels; unitless string = percentage ("10%"). */
|
|
14
|
+
export type Size = number | string;
|
|
15
|
+
/**
|
|
16
|
+
* - `sidebar` — in-flow resizable panel.
|
|
17
|
+
* - `offcanvas` — detached desktop overlay. ⚠️ **RESERVED — not implemented yet.**
|
|
18
|
+
* Currently treated like `sidebar` (renders in-flow); the overlay
|
|
19
|
+
* implementation lands in a later commit.
|
|
20
|
+
*/
|
|
21
|
+
export type Variant = "sidebar" | "offcanvas";
|
|
22
|
+
export type { PanelKey, SidePanelKey, SlotKey };
|
|
23
|
+
export type SidePanelState = {
|
|
24
|
+
kind: "sidePanel";
|
|
25
|
+
/** Shown vs hidden. */
|
|
26
|
+
visible: boolean;
|
|
27
|
+
/** Whether it can collapse at all. */
|
|
28
|
+
collapsible: boolean;
|
|
29
|
+
/** Render style. */
|
|
30
|
+
variant: Variant;
|
|
31
|
+
/** Current size (px number or "%" string). */
|
|
32
|
+
size?: Size;
|
|
33
|
+
/** Constraint from config (component prop overrides). */
|
|
34
|
+
minSize?: Size;
|
|
35
|
+
maxSize?: Size;
|
|
36
|
+
};
|
|
37
|
+
export type PanelState = {
|
|
38
|
+
kind: "panel";
|
|
39
|
+
/** content is always visible; splitview is toggleable. */
|
|
40
|
+
visible: boolean;
|
|
41
|
+
size?: Size;
|
|
42
|
+
/** Constraint from config (component prop overrides). */
|
|
43
|
+
minSize?: Size;
|
|
44
|
+
maxSize?: Size;
|
|
45
|
+
};
|
|
46
|
+
export type LayoutState = {
|
|
47
|
+
sidebar: SidePanelState;
|
|
48
|
+
rightPanel: SidePanelState;
|
|
49
|
+
content: PanelState;
|
|
50
|
+
splitview: PanelState;
|
|
51
|
+
};
|
|
52
|
+
export type SidePanelConfig = {
|
|
53
|
+
defaultVisible?: boolean;
|
|
54
|
+
collapsible?: boolean;
|
|
55
|
+
variant?: Variant;
|
|
56
|
+
defaultSize?: Size;
|
|
57
|
+
minSize?: Size;
|
|
58
|
+
maxSize?: Size;
|
|
59
|
+
};
|
|
60
|
+
export type PanelConfig = {
|
|
61
|
+
defaultVisible?: boolean;
|
|
62
|
+
defaultSize?: Size;
|
|
63
|
+
minSize?: Size;
|
|
64
|
+
maxSize?: Size;
|
|
65
|
+
};
|
|
66
|
+
export type LayoutConfig = {
|
|
67
|
+
sidebar?: SidePanelConfig;
|
|
68
|
+
rightPanel?: SidePanelConfig;
|
|
69
|
+
content?: PanelConfig;
|
|
70
|
+
splitview?: PanelConfig;
|
|
71
|
+
};
|
|
72
|
+
export type LayoutAction = {
|
|
73
|
+
type: "setVisible";
|
|
74
|
+
slot: SlotKey;
|
|
75
|
+
visible: boolean;
|
|
76
|
+
} | {
|
|
77
|
+
type: "setVariant";
|
|
78
|
+
panel: SidePanelKey;
|
|
79
|
+
variant: Variant;
|
|
80
|
+
} | {
|
|
81
|
+
type: "resize";
|
|
82
|
+
slot: SlotKey;
|
|
83
|
+
size: Size;
|
|
84
|
+
}
|
|
85
|
+
/** Restore one slot (or all, if omitted) to its config-default state.
|
|
86
|
+
* Page panels default hidden, so this also hides them — handy on unmount. */
|
|
87
|
+
| {
|
|
88
|
+
type: "reset";
|
|
89
|
+
slot?: SlotKey;
|
|
90
|
+
};
|
|
91
|
+
export type LayoutReducer = (state: LayoutState, action: LayoutAction,
|
|
92
|
+
/** Config-default state, used by the `reset` action. */
|
|
93
|
+
initial?: LayoutState) => LayoutState;
|
|
94
|
+
/**
|
|
95
|
+
* Replaceable state engine. Matches `useSyncExternalStore` + zustand/redux
|
|
96
|
+
* conventions. The manager depends only on this interface, so a zustand-backed
|
|
97
|
+
* store can be injected via `<LayoutProvider store={…}>`.
|
|
98
|
+
*/
|
|
99
|
+
export type LayoutStore = {
|
|
100
|
+
getState: () => LayoutState;
|
|
101
|
+
dispatch: (action: LayoutAction) => void;
|
|
102
|
+
subscribe: (listener: () => void) => () => void;
|
|
103
|
+
};
|
|
104
|
+
export type LayoutStorage = {
|
|
105
|
+
getItem: (key: string) => string | null;
|
|
106
|
+
setItem: (key: string, value: string) => void;
|
|
107
|
+
};
|
|
108
|
+
export type SidePanelHandle = {
|
|
109
|
+
state: SidePanelState;
|
|
110
|
+
isVisible: boolean;
|
|
111
|
+
show: () => void;
|
|
112
|
+
hide: () => void;
|
|
113
|
+
resize: (size: Size) => void;
|
|
114
|
+
setVariant: (variant: Variant) => void;
|
|
115
|
+
/** Restore this slot to its config default (hides it for page panels). */
|
|
116
|
+
reset: () => void;
|
|
117
|
+
};
|
|
118
|
+
export type PanelHandle = {
|
|
119
|
+
state: PanelState;
|
|
120
|
+
isVisible: boolean;
|
|
121
|
+
show: () => void;
|
|
122
|
+
hide: () => void;
|
|
123
|
+
resize: (size: Size) => void;
|
|
124
|
+
/** Restore this slot to its config default (hides it for page panels). */
|
|
125
|
+
reset: () => void;
|
|
126
|
+
};
|
|
127
|
+
export type LayoutValue = {
|
|
128
|
+
state: LayoutState;
|
|
129
|
+
sidebar: SidePanelHandle;
|
|
130
|
+
rightPanel: SidePanelHandle;
|
|
131
|
+
content: PanelHandle;
|
|
132
|
+
splitview: PanelHandle;
|
|
133
|
+
};
|
|
134
|
+
export type SidePanelProps = {
|
|
135
|
+
children: React.ReactNode;
|
|
136
|
+
variant?: Variant;
|
|
137
|
+
collapsible?: boolean;
|
|
138
|
+
defaultSize?: Size;
|
|
139
|
+
minSize?: Size;
|
|
140
|
+
maxSize?: Size;
|
|
141
|
+
/** Called whenever the panel's visibility changes, with the new value. */
|
|
142
|
+
onVisibleChange?: (visible: boolean) => void;
|
|
143
|
+
};
|
|
144
|
+
export type ContentProps = {
|
|
145
|
+
children: React.ReactNode;
|
|
146
|
+
minSize?: Size;
|
|
147
|
+
maxSize?: Size;
|
|
148
|
+
};
|
|
149
|
+
export type SplitProps = {
|
|
150
|
+
children: React.ReactNode;
|
|
151
|
+
defaultSize?: Size;
|
|
152
|
+
minSize?: Size;
|
|
153
|
+
maxSize?: Size;
|
|
154
|
+
};
|
|
155
|
+
export type LayoutProviderProps = {
|
|
156
|
+
children: React.ReactNode;
|
|
157
|
+
config?: LayoutConfig;
|
|
158
|
+
store?: LayoutStore;
|
|
159
|
+
/** Persistence config for the whole layout namespace. The Provider does NOT
|
|
160
|
+
* read these — it publishes them to the nested `<Layout>` (which owns
|
|
161
|
+
* persistence). Kept here so consumers configure everything in one place. */
|
|
162
|
+
persistenceKey?: string;
|
|
163
|
+
storage?: LayoutStorage;
|
|
164
|
+
};
|
|
165
|
+
export type LayoutProps = {
|
|
166
|
+
children: React.ReactNode;
|
|
167
|
+
/** Persist panel SIZES (via react-resizable-panels), keyed by this. Open/
|
|
168
|
+
* visible/variant ("intent") persistence is separate and deferred. Falls
|
|
169
|
+
* back to the values on `Layout.Provider` when omitted. */
|
|
170
|
+
persistenceKey?: string;
|
|
171
|
+
storage?: LayoutStorage;
|
|
172
|
+
};
|
|
173
|
+
/**
|
|
174
|
+
* Title shown in the panel header. `label` always provides the panel's
|
|
175
|
+
* accessible name (even when the title block is visually hidden).
|
|
176
|
+
*/
|
|
177
|
+
export type RightPanelContainerTitle = {
|
|
178
|
+
/** Visible label and the panel's accessible name. */
|
|
179
|
+
label: string;
|
|
180
|
+
/** Optional leading icon. */
|
|
181
|
+
icon?: IconProps;
|
|
182
|
+
/** Show the visible label+icon block. Default `true`. When `false` the block
|
|
183
|
+
* is hidden but `label` is still exposed as the accessible name. */
|
|
184
|
+
isVisible?: boolean;
|
|
185
|
+
};
|
|
186
|
+
export type RightPanelContainerSlotProps = {
|
|
187
|
+
/** Header slots around the title. */
|
|
188
|
+
header?: {
|
|
189
|
+
/** Rendered at the header start, before the title. */
|
|
190
|
+
leftSlot?: React.ReactNode;
|
|
191
|
+
/** Rendered at the header end, after the title and before the close button. */
|
|
192
|
+
rightSlot?: React.ReactNode;
|
|
193
|
+
};
|
|
194
|
+
/** Sticky footer content. Footer is omitted entirely when not provided. */
|
|
195
|
+
footer?: React.ReactNode;
|
|
196
|
+
/** Props for the always-rendered close button. */
|
|
197
|
+
closeButton: {
|
|
198
|
+
"aria-label": string;
|
|
199
|
+
};
|
|
200
|
+
};
|
|
201
|
+
export type RightPanelContainerProps = {
|
|
202
|
+
title: RightPanelContainerTitle;
|
|
203
|
+
/** Scrollable body content. */
|
|
204
|
+
children: React.ReactNode;
|
|
205
|
+
/** Called when the (always rendered) close button is clicked. */
|
|
206
|
+
onClose?: () => void;
|
|
207
|
+
slotProps: RightPanelContainerSlotProps;
|
|
208
|
+
/** Forwarded to the scrollable body element (scroll restoration etc.). */
|
|
209
|
+
scrollContainerRef?: React.Ref<HTMLDivElement>;
|
|
210
|
+
/** Forwarded to the scrollable body's scroll handler. */
|
|
211
|
+
onScroll?: React.UIEventHandler<HTMLDivElement>;
|
|
212
|
+
"data-e2e-test-id"?: string;
|
|
213
|
+
};
|
|
214
|
+
export type RightPanelProps = SidePanelProps & Omit<RightPanelContainerProps, "data-e2e-test-id">;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{};
|