@amboss/design-system 4.2.3-canary.0 → 4.2.3
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/ChatResponse/ChatResponse.js +1 -1
- package/build/cjs/components/CheckboxCard/CheckboxCard.js +1 -1
- package/build/cjs/components/Content/ContentBox/ContentBox.js +1 -1
- package/build/cjs/components/Content/ContentCheckbox/ContentCheckbox.js +1 -1
- package/build/cjs/components/Content/ContentList/ContentList.js +1 -1
- package/build/cjs/components/Content/DosageButton/DosageButton.js +1 -1
- package/build/cjs/components/Form/Checkbox/Checkbox.js +1 -1
- package/build/cjs/components/Form/Combobox/MultiSelect.js +1 -1
- package/build/cjs/components/Form/Combobox/SingleSelect.js +1 -1
- package/build/cjs/components/Form/Radio/Radio.js +1 -1
- package/build/cjs/components/Form/RadioButton/RadioButton.js +1 -1
- package/build/cjs/components/Form/RangeInput/RangeInput.js +1 -1
- package/build/cjs/components/Form/SegmentedControl/SegmentedControlOption.js +1 -1
- package/build/cjs/components/Form/Select/SelectWithCustomTrigger.js +1 -1
- package/build/cjs/components/Image/Image.js +1 -1
- package/build/cjs/components/Internal/LayoutFloat/LayoutFloat.d.ts +5 -3
- package/build/cjs/components/Internal/LayoutFloat/LayoutFloat.js +1 -1
- package/build/cjs/components/Internal/LayoutFloat/LayoutFloatDragHandle.d.ts +31 -0
- package/build/cjs/components/Internal/LayoutFloat/LayoutFloatDragHandle.js +1 -0
- package/build/cjs/components/Internal/LayoutFloat/LayoutFloatDragHandleGuard.d.ts +10 -0
- package/build/cjs/components/Internal/LayoutFloat/LayoutFloatDragHandleGuard.js +1 -0
- package/build/cjs/components/Internal/LayoutFloat/LayoutFloatDragProvider.d.ts +10 -0
- package/build/cjs/components/Internal/LayoutFloat/LayoutFloatDragProvider.js +1 -0
- package/build/cjs/components/Internal/LayoutFloat/useLayoutFloatDrag.d.ts +16 -0
- package/build/cjs/components/Internal/LayoutFloat/useLayoutFloatDrag.js +1 -0
- package/build/cjs/components/Internal/LayoutFloat/useLayoutFloatDragHandleContext.d.ts +22 -0
- package/build/cjs/components/Internal/LayoutFloat/useLayoutFloatDragHandleContext.js +1 -0
- package/build/cjs/components/Internal/Panel/Panel.d.ts +4 -0
- package/build/cjs/components/Internal/Panel/Panel.js +1 -1
- package/build/cjs/components/Internal/Sandwich/Sandwich.js +1 -1
- package/build/cjs/components/Internal/Sandwich/SandwichHeader.d.ts +1 -0
- package/build/cjs/components/Internal/Sandwich/SandwichHeader.js +1 -1
- package/build/cjs/components/Layout/-types.d.ts +96 -48
- package/build/cjs/components/Layout/Content/Content.d.ts +6 -2
- package/build/cjs/components/Layout/Content/Content.js +1 -1
- package/build/cjs/components/Layout/Content/ContentDocked.d.ts +12 -0
- package/build/cjs/components/Layout/Content/ContentDocked.js +1 -0
- package/build/cjs/components/Layout/Layout.js +1 -1
- package/build/cjs/components/Layout/RightPanel/RightPanel.d.ts +10 -8
- package/build/cjs/components/Layout/RightPanel/RightPanel.js +1 -1
- package/build/cjs/components/Layout/RightPanel/RightPanelDocked.d.ts +19 -0
- package/build/cjs/components/Layout/RightPanel/RightPanelDocked.js +1 -0
- package/build/cjs/components/Layout/RightPanel/RightPanelHeader.d.ts +14 -10
- package/build/cjs/components/Layout/RightPanel/RightPanelHeader.js +1 -1
- package/build/cjs/components/Layout/RightPanel/RightPanelSheet.d.ts +18 -0
- package/build/cjs/components/Layout/RightPanel/RightPanelSheet.js +1 -0
- package/build/cjs/components/Layout/Split/MobileSplitView/ContentSplitBase.d.ts +13 -0
- package/build/cjs/components/Layout/Split/MobileSplitView/ContentSplitBase.js +1 -0
- package/build/cjs/components/Layout/Split/MobileSplitView/MobileSplitView.d.ts +11 -0
- package/build/cjs/components/Layout/Split/MobileSplitView/MobileSplitView.js +1 -0
- package/build/cjs/components/Layout/Split/MobileSplitView/StyledMobileSplitSlideLayer.d.ts +20 -0
- package/build/cjs/components/Layout/Split/MobileSplitView/StyledMobileSplitSlideLayer.js +1 -0
- package/build/cjs/components/Layout/Split/MobileSplitView/useMobileSplitStack.d.ts +20 -0
- package/build/cjs/components/Layout/Split/MobileSplitView/useMobileSplitStack.js +1 -0
- package/build/cjs/components/Layout/Split/MobileSplitView/useMobileSplitView.d.ts +27 -0
- package/build/cjs/components/Layout/Split/MobileSplitView/useMobileSplitView.js +1 -0
- package/build/cjs/components/Layout/Split/Split.d.ts +5 -4
- package/build/cjs/components/Layout/Split/Split.js +1 -1
- package/build/cjs/components/Layout/Split/SplitDocked.d.ts +9 -0
- package/build/cjs/components/Layout/Split/SplitDocked.js +1 -0
- package/build/cjs/components/Layout/index.d.ts +1 -0
- package/build/cjs/components/Layout/index.js +1 -1
- package/build/cjs/components/Layout/reducer.js +1 -1
- package/build/cjs/components/Layout/registry.d.ts +9 -1
- package/build/cjs/components/Layout/registry.js +1 -1
- package/build/cjs/components/Layout/useFloatablePortalTargets.js +1 -1
- package/build/cjs/components/Layout/useLayout.js +1 -1
- package/build/cjs/components/Layout/usePanelDockedSlide.js +1 -1
- package/build/cjs/components/Portal/Portal.js +1 -1
- package/build/cjs/components/PromptInput/PromptTextArea.js +1 -1
- package/build/cjs/components/PromptInput/useAutocompleteListPosition.js +1 -1
- package/build/cjs/components/RadioCard/RadioCard.js +1 -1
- package/build/cjs/components/SearchResult/SearchResult.d.ts +3 -0
- package/build/cjs/components/SearchResult/SearchResult.js +1 -1
- package/build/cjs/components/Sheet/Sheet.js +1 -1
- package/build/cjs/components/Toggletip/BasePopover.js +1 -1
- package/build/cjs/components/Tooltip/BaseTooltip.d.ts +7 -4
- package/build/cjs/components/Tooltip/Tooltip.d.ts +1 -1
- package/build/cjs/components/Tooltip/Tooltip.js +1 -1
- package/build/cjs/components/Tooltip/TooltipContent.js +1 -1
- package/build/cjs/components/Typography/Text/Text.d.ts +1 -1
- package/build/cjs/components/Typography/Text/Text.js +1 -1
- package/build/cjs/components/Utilities/Expandable/Expandable.js +1 -1
- package/build/cjs/components/Utilities/FloatingPosition/useFloatingPosition.js +1 -1
- package/build/cjs/components/VirtualScrollList/VirtualScrollList.js +1 -1
- package/build/cjs/shared/popupMenu/usePopupMenu.js +1 -1
- package/build/cjs/shared/useAutoPosition.js +1 -1
- package/build/cjs/shared/useBreakpoints.js +1 -1
- package/build/cjs/shared/useDragTransform.d.ts +39 -0
- package/build/cjs/shared/useDragTransform.js +1 -0
- package/build/cjs/web-tokens/_sizes.json +61 -51
- package/build/cjs/web-tokens/layout-vars.d.ts +2 -0
- package/build/cjs/web-tokens/layout-vars.js +1 -1
- package/build/cjs/web-tokens/layout-vars.ts +2 -0
- package/build/cjs/web-tokens/visualConfig.d.ts +9 -0
- package/build/cjs/web-tokens/visualConfig.js +1 -1
- package/build/esm/components/ChatResponse/ChatResponse.js +1 -1
- package/build/esm/components/CheckboxCard/CheckboxCard.js +1 -1
- package/build/esm/components/Content/ContentBox/ContentBox.js +1 -1
- package/build/esm/components/Content/ContentCheckbox/ContentCheckbox.js +1 -1
- package/build/esm/components/Content/ContentList/ContentList.js +1 -1
- package/build/esm/components/Content/DosageButton/DosageButton.js +1 -1
- package/build/esm/components/Form/Checkbox/Checkbox.js +1 -1
- package/build/esm/components/Form/Combobox/MultiSelect.js +1 -1
- package/build/esm/components/Form/Combobox/SingleSelect.js +1 -1
- package/build/esm/components/Form/Radio/Radio.js +1 -1
- package/build/esm/components/Form/RadioButton/RadioButton.js +1 -1
- package/build/esm/components/Form/RangeInput/RangeInput.js +1 -1
- package/build/esm/components/Form/SegmentedControl/SegmentedControlOption.js +1 -1
- package/build/esm/components/Form/Select/SelectWithCustomTrigger.js +1 -1
- package/build/esm/components/Image/Image.js +1 -1
- package/build/esm/components/Internal/LayoutFloat/LayoutFloat.d.ts +5 -3
- package/build/esm/components/Internal/LayoutFloat/LayoutFloat.js +1 -1
- package/build/esm/components/Internal/LayoutFloat/LayoutFloatDragHandle.d.ts +31 -0
- package/build/esm/components/Internal/LayoutFloat/LayoutFloatDragHandle.js +1 -0
- package/build/esm/components/Internal/LayoutFloat/LayoutFloatDragHandleGuard.d.ts +10 -0
- package/build/esm/components/Internal/LayoutFloat/LayoutFloatDragHandleGuard.js +1 -0
- package/build/esm/components/Internal/LayoutFloat/LayoutFloatDragProvider.d.ts +10 -0
- package/build/esm/components/Internal/LayoutFloat/LayoutFloatDragProvider.js +1 -0
- package/build/esm/components/Internal/LayoutFloat/useLayoutFloatDrag.d.ts +16 -0
- package/build/esm/components/Internal/LayoutFloat/useLayoutFloatDrag.js +1 -0
- package/build/esm/components/Internal/LayoutFloat/useLayoutFloatDragHandleContext.d.ts +22 -0
- package/build/esm/components/Internal/LayoutFloat/useLayoutFloatDragHandleContext.js +1 -0
- package/build/esm/components/Internal/Panel/Panel.d.ts +4 -0
- package/build/esm/components/Internal/Panel/Panel.js +1 -1
- package/build/esm/components/Internal/Sandwich/Sandwich.js +1 -1
- package/build/esm/components/Internal/Sandwich/SandwichHeader.d.ts +1 -0
- package/build/esm/components/Internal/Sandwich/SandwichHeader.js +1 -1
- package/build/esm/components/Layout/-types.d.ts +96 -48
- package/build/esm/components/Layout/Content/Content.d.ts +6 -2
- package/build/esm/components/Layout/Content/Content.js +1 -1
- package/build/esm/components/Layout/Content/ContentDocked.d.ts +12 -0
- package/build/esm/components/Layout/Content/ContentDocked.js +1 -0
- package/build/esm/components/Layout/Layout.js +1 -1
- package/build/esm/components/Layout/RightPanel/RightPanel.d.ts +10 -8
- package/build/esm/components/Layout/RightPanel/RightPanel.js +1 -1
- package/build/esm/components/Layout/RightPanel/RightPanelDocked.d.ts +19 -0
- package/build/esm/components/Layout/RightPanel/RightPanelDocked.js +1 -0
- package/build/esm/components/Layout/RightPanel/RightPanelHeader.d.ts +14 -10
- package/build/esm/components/Layout/RightPanel/RightPanelHeader.js +1 -1
- package/build/esm/components/Layout/RightPanel/RightPanelSheet.d.ts +18 -0
- package/build/esm/components/Layout/RightPanel/RightPanelSheet.js +1 -0
- package/build/esm/components/Layout/Split/MobileSplitView/ContentSplitBase.d.ts +13 -0
- package/build/esm/components/Layout/Split/MobileSplitView/ContentSplitBase.js +1 -0
- package/build/esm/components/Layout/Split/MobileSplitView/MobileSplitView.d.ts +11 -0
- package/build/esm/components/Layout/Split/MobileSplitView/MobileSplitView.js +1 -0
- package/build/esm/components/Layout/Split/MobileSplitView/StyledMobileSplitSlideLayer.d.ts +20 -0
- package/build/esm/components/Layout/Split/MobileSplitView/StyledMobileSplitSlideLayer.js +1 -0
- package/build/esm/components/Layout/Split/MobileSplitView/useMobileSplitStack.d.ts +20 -0
- package/build/esm/components/Layout/Split/MobileSplitView/useMobileSplitStack.js +1 -0
- package/build/esm/components/Layout/Split/MobileSplitView/useMobileSplitView.d.ts +27 -0
- package/build/esm/components/Layout/Split/MobileSplitView/useMobileSplitView.js +1 -0
- package/build/esm/components/Layout/Split/Split.d.ts +5 -4
- package/build/esm/components/Layout/Split/Split.js +1 -1
- package/build/esm/components/Layout/Split/SplitDocked.d.ts +9 -0
- package/build/esm/components/Layout/Split/SplitDocked.js +1 -0
- package/build/esm/components/Layout/index.d.ts +1 -0
- package/build/esm/components/Layout/index.js +1 -1
- package/build/esm/components/Layout/reducer.js +1 -1
- package/build/esm/components/Layout/registry.d.ts +9 -1
- package/build/esm/components/Layout/registry.js +1 -1
- package/build/esm/components/Layout/useFloatablePortalTargets.js +1 -1
- package/build/esm/components/Layout/useLayout.js +1 -1
- package/build/esm/components/Layout/usePanelDockedSlide.js +1 -1
- package/build/esm/components/Portal/Portal.js +1 -1
- package/build/esm/components/PromptInput/PromptTextArea.js +1 -1
- package/build/esm/components/PromptInput/useAutocompleteListPosition.js +1 -1
- package/build/esm/components/RadioCard/RadioCard.js +1 -1
- package/build/esm/components/SearchResult/SearchResult.d.ts +3 -0
- package/build/esm/components/SearchResult/SearchResult.js +1 -1
- package/build/esm/components/Sheet/Sheet.js +1 -1
- package/build/esm/components/Toggletip/BasePopover.js +1 -1
- package/build/esm/components/Tooltip/BaseTooltip.d.ts +7 -4
- package/build/esm/components/Tooltip/Tooltip.d.ts +1 -1
- package/build/esm/components/Tooltip/Tooltip.js +1 -1
- package/build/esm/components/Tooltip/TooltipContent.js +1 -1
- package/build/esm/components/Typography/Text/Text.d.ts +1 -1
- package/build/esm/components/Typography/Text/Text.js +1 -1
- package/build/esm/components/Utilities/Expandable/Expandable.js +1 -1
- package/build/esm/components/Utilities/FloatingPosition/useFloatingPosition.js +1 -1
- package/build/esm/components/VirtualScrollList/VirtualScrollList.js +1 -1
- package/build/esm/shared/popupMenu/usePopupMenu.js +1 -1
- package/build/esm/shared/useAutoPosition.js +1 -1
- package/build/esm/shared/useBreakpoints.js +1 -1
- package/build/esm/shared/useDragTransform.d.ts +39 -0
- package/build/esm/shared/useDragTransform.js +1 -0
- package/build/esm/web-tokens/_sizes.json +61 -51
- package/build/esm/web-tokens/layout-vars.d.ts +2 -0
- package/build/esm/web-tokens/layout-vars.js +1 -1
- package/build/esm/web-tokens/layout-vars.ts +2 -0
- package/build/esm/web-tokens/visualConfig.d.ts +9 -0
- package/build/esm/web-tokens/visualConfig.js +1 -1
- package/build/scss/_layout.scss +4 -0
- package/build/scss/_variables.scss +1 -0
- package/package.json +1 -3
- package/build/cjs/shared/useIsomorphicLayoutEffect.d.ts +0 -9
- package/build/cjs/shared/useIsomorphicLayoutEffect.js +0 -1
- package/build/esm/shared/useIsomorphicLayoutEffect.d.ts +0 -9
- package/build/esm/shared/useIsomorphicLayoutEffect.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import styled from"@emotion/styled";import{Slot,SUBNAV_OFFSET_VAR}from"../-constants";import{useDeclarePanel,useLayoutPortal,useRunCallbackOnValueChange}from"../registry";import{useLayout}from"../useLayout";import{useCanRenderPanel}from"../context";import{useBreakpoints}from"../../../shared/useBreakpoints";import{PanelContainer}from"../PanelContainer";import{Sheet,SHEET_MAX_HEIGHT}from"../../Sheet/Sheet";let StyledSheetPanelShell=styled("div",{target:"e12v2el90",label:"StyledSheetPanelShell"})({height:SHEET_MAX_HEIGHT},"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvTGF5b3V0L1JpZ2h0UGFuZWwvUmlnaHRQYW5lbC50c3giLCJzb3VyY2VzIjpbInNyYy9jb21wb25lbnRzL0xheW91dC9SaWdodFBhbmVsL1JpZ2h0UGFuZWwudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgU2xvdCwgU1VCTkFWX09GRlNFVF9WQVIgfSBmcm9tIFwiLi4vLWNvbnN0YW50c1wiO1xuaW1wb3J0IHtcbiAgdXNlRGVjbGFyZVBhbmVsLFxuICB1c2VMYXlvdXRQb3J0YWwsXG4gIHVzZVJ1bkNhbGxiYWNrT25WYWx1ZUNoYW5nZSxcbn0gZnJvbSBcIi4uL3JlZ2lzdHJ5XCI7XG5pbXBvcnQgeyB1c2VMYXlvdXQgfSBmcm9tIFwiLi4vdXNlTGF5b3V0XCI7XG5pbXBvcnQgeyB1c2VDYW5SZW5kZXJQYW5lbCB9IGZyb20gXCIuLi9jb250ZXh0XCI7XG5pbXBvcnQgeyB1c2VCcmVha3BvaW50cyB9IGZyb20gXCIuLi8uLi8uLi9zaGFyZWQvdXNlQnJlYWtwb2ludHNcIjtcbmltcG9ydCB7IFBhbmVsQ29udGFpbmVyIH0gZnJvbSBcIi4uL1BhbmVsQ29udGFpbmVyXCI7XG5pbXBvcnQgeyBTaGVldCwgU0hFRVRfTUFYX0hFSUdIVCB9IGZyb20gXCIuLi8uLi9TaGVldC9TaGVldFwiO1xuaW1wb3J0IHR5cGUgeyBSaWdodFBhbmVsUHJvcHMgfSBmcm9tIFwiLi4vLXR5cGVzXCI7XG5cbi8vIEdpdmVzIHRoZSBwYW5lbCBzaGVsbCBhIGRlZmluaXRlIGhlaWdodCBpbnNpZGUgdGhlIFNoZWV0ICh3aGljaCBvbmx5IGNhcHNcbi8vIGl0cyBjb250ZW50IGF0IFNIRUVUX01BWF9IRUlHSFQpLiBXaXRoIHRoZSBoZWlnaHQgYm91bmRlZCwgdGhlIFNhbmR3aWNoXG4vLyBpbnNpZGUgUGFuZWxDb250YWluZXIgc2Nyb2xscyBpdHMgYm9keSByZWdpb24gaXRzZWxmLCBzb1xuLy8gYExheW91dC5SaWdodFBhbmVsSGVhZGVyYCAvIGBMYXlvdXQuUmlnaHRQYW5lbEZvb3RlcmAgc3RpY2sgdG8gdGhlIHNoZWV0XG4vLyBlZGdlcyBleGFjdGx5IGFzIHRoZXkgZG8gaW4gdGhlIGRvY2tlZCBwYW5lbC5cbmNvbnN0IFN0eWxlZFNoZWV0UGFuZWxTaGVsbCA9IHN0eWxlZC5kaXYoe1xuICBoZWlnaHQ6IFNIRUVUX01BWF9IRUlHSFQsXG59KTtcblxuLy8gQnVpbHQtaW4gc2xvdDogb2Zmc2V0cyB0aGUgcGFuZWwgY29udGVudCBieSB0aGUgc3VibmF2LW9mZnNldCB2YXIgKDAgd2hlblxuLy8gdW5zZXQpLCB0cmFuc2l0aW9uZWQgd2l0aCB0aGUgdGhlbWUncyBgbmF2U2xpZGVgIHRpbWluZyDigJQgc28gdGhlIHJpZ2h0IHBhbmVsXG4vLyB0cmFja3MgYSBzdGlja3kgc3VibmF2IHdpdGggbm8gd2lyaW5nIG9uIHRoZSBjb25zdW1lcidzIHNpZGUuXG5jb25zdCBTdHlsZWRSaWdodFBhbmVsU2xvdCA9IHN0eWxlZC5kaXYoKHsgdGhlbWUgfSkgPT4gKHtcbiAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgbGVmdDogMCxcbiAgcmlnaHQ6IDAsXG4gIGJvdHRvbTogMCxcbiAgdG9wOiBgdmFyKCR7U1VCTkFWX09GRlNFVF9WQVJ9LCAwcHgpYCxcbiAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG4gIHRyYW5zaXRpb246IGB0b3AgJHt0aGVtZS52YXJpYWJsZXMuYW5pbWF0aW9uLm5hdlNsaWRlLm9wZW4uZHVyYXRpb259ICR7dGhlbWUudmFyaWFibGVzLmFuaW1hdGlvbi5uYXZTbGlkZS5vcGVuLnRpbWluZ0Z1bmN0aW9ufWAsXG59KSk7XG5cbi8qKlxuICogUmlnaHQgc2lkZSBwYW5lbC4gRGVjbGFyZXMgdGhlIGByaWdodFBhbmVsYCBzbG90IGFuZCBwb3J0YWxzIGl0cyBjb250ZW50IGludG9cbiAqIHRoZSBHcm91cCdzIGhvc3Qgd2hpbGUgdmlzaWJsZS4gUmVuZGVycyBpbi1mbG93IChhIHJlc2l6YWJsZSBjb2x1bW4pIG9uXG4gKiBkZXNrdG9wIC0gdGhlIG9mZmNhbnZhcyBvdmVybGF5IGlzIGRlZmVycmVkIC0gYW5kIGFzIGEgYm90dG9tIHNoZWV0IGJlbG93XG4gKiB0aGUgbW9iaWxlIGJyZWFrcG9pbnQgKGBTaGVldGAgcG9ydGFscyBpdHNlbGYsIHNvIHRoZSBsYXlvdXQgcG9ydGFsIGlzXG4gKiBieXBhc3NlZCB0aGVyZTsgY29udGVudCByZW1vdW50cyBvbiBhIGJyZWFrcG9pbnQgY3Jvc3MpLiBEb2NrZWQgY29udGVudCBpc1xuICogd3JhcHBlZCBpbiBhIHNsb3QgdGhhdCB0cmFja3MgdGhlIGAtLWRzLWxheW91dC1zdWJuYXYtb2Zmc2V0YCB2YXIuXG4gKiBgTGF5b3V0LlJpZ2h0UGFuZWxIZWFkZXJgIC8gYExheW91dC5SaWdodFBhbmVsRm9vdGVyYCBjaGlsZHJlbiBzdGljayB0byB0aGVcbiAqIHBhbmVsIGVkZ2VzOyB0aGUgcmVtYWluaW5nIGNvbnRlbnQgc2Nyb2xscy5cbiAqL1xuZXhwb3J0IGNvbnN0IFJpZ2h0UGFuZWw6IFJlYWN0LkZDPFJpZ2h0UGFuZWxQcm9wcz4gPSAoe1xuICBjaGlsZHJlbixcbiAgZGVmYXVsdFNpemUgPSAzNzgsXG4gIG1pblNpemUgPSAzMjgsXG4gIG1heFNpemUgPSBcIjMwJVwiLFxuICBjb2xsYXBzaWJsZSA9IGZhbHNlLFxuICBvblZpc2libGVDaGFuZ2UsXG4gIG9uVmFyaWFudENoYW5nZSxcbiAgXCJhcmlhLWxhYmVsXCI6IGFyaWFMYWJlbCxcbiAgc2Nyb2xsQ29udGFpbmVyUmVmLFxuICBvblNjcm9sbCxcbn0pID0+IHtcbiAgY29uc3QgeyBpc1Zpc2libGUsIGhpZGUsIHN0YXRlIH0gPSB1c2VMYXlvdXQoKVtTbG90LnJpZ2h0UGFuZWxdO1xuICBjb25zdCB7IGlzTW9iaWxlIH0gPSB1c2VCcmVha3BvaW50cygpO1xuICBjb25zdCBjYW5SZW5kZXIgPSB1c2VDYW5SZW5kZXJQYW5lbCgpO1xuICB1c2VEZWNsYXJlUGFuZWwoU2xvdC5yaWdodFBhbmVsLCB7XG4gICAgZGVmYXVsdFNpemUsXG4gICAgbWluU2l6ZSxcbiAgICBtYXhTaXplLFxuICAgIGNvbGxhcHNpYmxlLFxuICB9KTtcbiAgdXNlUnVuQ2FsbGJhY2tPblZhbHVlQ2hhbmdlKGlzVmlzaWJsZSwgb25WaXNpYmxlQ2hhbmdlKTtcbiAgdXNlUnVuQ2FsbGJhY2tPblZhbHVlQ2hhbmdlKHN0YXRlLnZhcmlhbnQsIG9uVmFyaWFudENoYW5nZSk7XG4gIGNvbnN0IGRvY2tlZFBhbmVsID0gdXNlTGF5b3V0UG9ydGFsKFxuICAgIFNsb3QucmlnaHRQYW5lbCxcbiAgICBjYW5SZW5kZXIgJiYgaXNWaXNpYmxlICYmICFpc01vYmlsZSA/IChcbiAgICAgIDxTdHlsZWRSaWdodFBhbmVsU2xvdD5cbiAgICAgICAgPFBhbmVsQ29udGFpbmVyXG4gICAgICAgICAgYXJpYS1sYWJlbD17YXJpYUxhYmVsfVxuICAgICAgICAgIHNjcm9sbENvbnRhaW5lclJlZj17c2Nyb2xsQ29udGFpbmVyUmVmfVxuICAgICAgICAgIG9uU2Nyb2xsPXtvblNjcm9sbH1cbiAgICAgICAgICAvLyBUaGUgbGVmdCBib3JkZXIgc2VwYXJhdGVzIHRoZSBkb2NrZWQgY29sdW1uIGZyb20gdGhlIGNvbnRlbnQ7IHRoZVxuICAgICAgICAgIC8vIGZsb2F0aW5nIHdpbmRvdyBoYXMgaXRzIG93biBib3JkZXIsIHNvIGRyb3AgaXQgdGhlcmUuXG4gICAgICAgICAgc2hvd0JvcmRlckxlZnQ9e3N0YXRlLnZhcmlhbnQgIT09IFwiZmxvYXRcIn1cbiAgICAgICAgPlxuICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgPC9QYW5lbENvbnRhaW5lcj5cbiAgICAgIDwvU3R5bGVkUmlnaHRQYW5lbFNsb3Q+XG4gICAgKSA6IG51bGxcbiAgKTtcbiAgaWYgKCFjYW5SZW5kZXIpIHJldHVybiBudWxsO1xuICBpZiAoaXNNb2JpbGUpIHtcbiAgICByZXR1cm4gKFxuICAgICAgLy8gSW5pdGlhbCBmb2N1cyBpcyBzdXBwcmVzc2VkIHNvIG9wZW5pbmcgdGhlIHNoZWV0IG5ldmVyIHBvcHMgdGhlXG4gICAgICAvLyBvbi1zY3JlZW4ga2V5Ym9hcmQuXG4gICAgICA8U2hlZXRcbiAgICAgICAgaXNWaXNpYmxlPXtpc1Zpc2libGV9XG4gICAgICAgIG9uQ2xvc2U9e2hpZGV9XG4gICAgICAgIGhhc0JhY2tkcm9wXG4gICAgICAgIGRpc21pc3NPbk91dHNpZGVDbGlja1xuICAgICAgICBkaXNhYmxlSW5pdGlhbEZvY3VzXG4gICAgICA+XG4gICAgICAgIDxTdHlsZWRTaGVldFBhbmVsU2hlbGw+XG4gICAgICAgICAgPFBhbmVsQ29udGFpbmVyXG4gICAgICAgICAgICBhcmlhLWxhYmVsPXthcmlhTGFiZWx9XG4gICAgICAgICAgICBzY3JvbGxDb250YWluZXJSZWY9e3Njcm9sbENvbnRhaW5lclJlZn1cbiAgICAgICAgICAgIG9uU2Nyb2xsPXtvblNjcm9sbH1cbiAgICAgICAgICA+XG4gICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgICAgPC9QYW5lbENvbnRhaW5lcj5cbiAgICAgICAgPC9TdHlsZWRTaGVldFBhbmVsU2hlbGw+XG4gICAgICA8L1NoZWV0PlxuICAgICk7XG4gIH1cbiAgcmV0dXJuIGRvY2tlZFBhbmVsO1xufTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQjhCIn0= */"),StyledRightPanelSlot=styled("div",{target:"e12v2el91",label:"StyledRightPanelSlot"})(({theme})=>({position:"absolute",left:0,right:0,bottom:0,top:`var(${SUBNAV_OFFSET_VAR}, 0px)`,overflow:"hidden",transition:`top ${theme.variables.animation.navSlide.open.duration} ${theme.variables.animation.navSlide.open.timingFunction}`}),"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvTGF5b3V0L1JpZ2h0UGFuZWwvUmlnaHRQYW5lbC50c3giLCJzb3VyY2VzIjpbInNyYy9jb21wb25lbnRzL0xheW91dC9SaWdodFBhbmVsL1JpZ2h0UGFuZWwudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgU2xvdCwgU1VCTkFWX09GRlNFVF9WQVIgfSBmcm9tIFwiLi4vLWNvbnN0YW50c1wiO1xuaW1wb3J0IHtcbiAgdXNlRGVjbGFyZVBhbmVsLFxuICB1c2VMYXlvdXRQb3J0YWwsXG4gIHVzZVJ1bkNhbGxiYWNrT25WYWx1ZUNoYW5nZSxcbn0gZnJvbSBcIi4uL3JlZ2lzdHJ5XCI7XG5pbXBvcnQgeyB1c2VMYXlvdXQgfSBmcm9tIFwiLi4vdXNlTGF5b3V0XCI7XG5pbXBvcnQgeyB1c2VDYW5SZW5kZXJQYW5lbCB9IGZyb20gXCIuLi9jb250ZXh0XCI7XG5pbXBvcnQgeyB1c2VCcmVha3BvaW50cyB9IGZyb20gXCIuLi8uLi8uLi9zaGFyZWQvdXNlQnJlYWtwb2ludHNcIjtcbmltcG9ydCB7IFBhbmVsQ29udGFpbmVyIH0gZnJvbSBcIi4uL1BhbmVsQ29udGFpbmVyXCI7XG5pbXBvcnQgeyBTaGVldCwgU0hFRVRfTUFYX0hFSUdIVCB9IGZyb20gXCIuLi8uLi9TaGVldC9TaGVldFwiO1xuaW1wb3J0IHR5cGUgeyBSaWdodFBhbmVsUHJvcHMgfSBmcm9tIFwiLi4vLXR5cGVzXCI7XG5cbi8vIEdpdmVzIHRoZSBwYW5lbCBzaGVsbCBhIGRlZmluaXRlIGhlaWdodCBpbnNpZGUgdGhlIFNoZWV0ICh3aGljaCBvbmx5IGNhcHNcbi8vIGl0cyBjb250ZW50IGF0IFNIRUVUX01BWF9IRUlHSFQpLiBXaXRoIHRoZSBoZWlnaHQgYm91bmRlZCwgdGhlIFNhbmR3aWNoXG4vLyBpbnNpZGUgUGFuZWxDb250YWluZXIgc2Nyb2xscyBpdHMgYm9keSByZWdpb24gaXRzZWxmLCBzb1xuLy8gYExheW91dC5SaWdodFBhbmVsSGVhZGVyYCAvIGBMYXlvdXQuUmlnaHRQYW5lbEZvb3RlcmAgc3RpY2sgdG8gdGhlIHNoZWV0XG4vLyBlZGdlcyBleGFjdGx5IGFzIHRoZXkgZG8gaW4gdGhlIGRvY2tlZCBwYW5lbC5cbmNvbnN0IFN0eWxlZFNoZWV0UGFuZWxTaGVsbCA9IHN0eWxlZC5kaXYoe1xuICBoZWlnaHQ6IFNIRUVUX01BWF9IRUlHSFQsXG59KTtcblxuLy8gQnVpbHQtaW4gc2xvdDogb2Zmc2V0cyB0aGUgcGFuZWwgY29udGVudCBieSB0aGUgc3VibmF2LW9mZnNldCB2YXIgKDAgd2hlblxuLy8gdW5zZXQpLCB0cmFuc2l0aW9uZWQgd2l0aCB0aGUgdGhlbWUncyBgbmF2U2xpZGVgIHRpbWluZyDigJQgc28gdGhlIHJpZ2h0IHBhbmVsXG4vLyB0cmFja3MgYSBzdGlja3kgc3VibmF2IHdpdGggbm8gd2lyaW5nIG9uIHRoZSBjb25zdW1lcidzIHNpZGUuXG5jb25zdCBTdHlsZWRSaWdodFBhbmVsU2xvdCA9IHN0eWxlZC5kaXYoKHsgdGhlbWUgfSkgPT4gKHtcbiAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgbGVmdDogMCxcbiAgcmlnaHQ6IDAsXG4gIGJvdHRvbTogMCxcbiAgdG9wOiBgdmFyKCR7U1VCTkFWX09GRlNFVF9WQVJ9LCAwcHgpYCxcbiAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG4gIHRyYW5zaXRpb246IGB0b3AgJHt0aGVtZS52YXJpYWJsZXMuYW5pbWF0aW9uLm5hdlNsaWRlLm9wZW4uZHVyYXRpb259ICR7dGhlbWUudmFyaWFibGVzLmFuaW1hdGlvbi5uYXZTbGlkZS5vcGVuLnRpbWluZ0Z1bmN0aW9ufWAsXG59KSk7XG5cbi8qKlxuICogUmlnaHQgc2lkZSBwYW5lbC4gRGVjbGFyZXMgdGhlIGByaWdodFBhbmVsYCBzbG90IGFuZCBwb3J0YWxzIGl0cyBjb250ZW50IGludG9cbiAqIHRoZSBHcm91cCdzIGhvc3Qgd2hpbGUgdmlzaWJsZS4gUmVuZGVycyBpbi1mbG93IChhIHJlc2l6YWJsZSBjb2x1bW4pIG9uXG4gKiBkZXNrdG9wIC0gdGhlIG9mZmNhbnZhcyBvdmVybGF5IGlzIGRlZmVycmVkIC0gYW5kIGFzIGEgYm90dG9tIHNoZWV0IGJlbG93XG4gKiB0aGUgbW9iaWxlIGJyZWFrcG9pbnQgKGBTaGVldGAgcG9ydGFscyBpdHNlbGYsIHNvIHRoZSBsYXlvdXQgcG9ydGFsIGlzXG4gKiBieXBhc3NlZCB0aGVyZTsgY29udGVudCByZW1vdW50cyBvbiBhIGJyZWFrcG9pbnQgY3Jvc3MpLiBEb2NrZWQgY29udGVudCBpc1xuICogd3JhcHBlZCBpbiBhIHNsb3QgdGhhdCB0cmFja3MgdGhlIGAtLWRzLWxheW91dC1zdWJuYXYtb2Zmc2V0YCB2YXIuXG4gKiBgTGF5b3V0LlJpZ2h0UGFuZWxIZWFkZXJgIC8gYExheW91dC5SaWdodFBhbmVsRm9vdGVyYCBjaGlsZHJlbiBzdGljayB0byB0aGVcbiAqIHBhbmVsIGVkZ2VzOyB0aGUgcmVtYWluaW5nIGNvbnRlbnQgc2Nyb2xscy5cbiAqL1xuZXhwb3J0IGNvbnN0IFJpZ2h0UGFuZWw6IFJlYWN0LkZDPFJpZ2h0UGFuZWxQcm9wcz4gPSAoe1xuICBjaGlsZHJlbixcbiAgZGVmYXVsdFNpemUgPSAzNzgsXG4gIG1pblNpemUgPSAzMjgsXG4gIG1heFNpemUgPSBcIjMwJVwiLFxuICBjb2xsYXBzaWJsZSA9IGZhbHNlLFxuICBvblZpc2libGVDaGFuZ2UsXG4gIG9uVmFyaWFudENoYW5nZSxcbiAgXCJhcmlhLWxhYmVsXCI6IGFyaWFMYWJlbCxcbiAgc2Nyb2xsQ29udGFpbmVyUmVmLFxuICBvblNjcm9sbCxcbn0pID0+IHtcbiAgY29uc3QgeyBpc1Zpc2libGUsIGhpZGUsIHN0YXRlIH0gPSB1c2VMYXlvdXQoKVtTbG90LnJpZ2h0UGFuZWxdO1xuICBjb25zdCB7IGlzTW9iaWxlIH0gPSB1c2VCcmVha3BvaW50cygpO1xuICBjb25zdCBjYW5SZW5kZXIgPSB1c2VDYW5SZW5kZXJQYW5lbCgpO1xuICB1c2VEZWNsYXJlUGFuZWwoU2xvdC5yaWdodFBhbmVsLCB7XG4gICAgZGVmYXVsdFNpemUsXG4gICAgbWluU2l6ZSxcbiAgICBtYXhTaXplLFxuICAgIGNvbGxhcHNpYmxlLFxuICB9KTtcbiAgdXNlUnVuQ2FsbGJhY2tPblZhbHVlQ2hhbmdlKGlzVmlzaWJsZSwgb25WaXNpYmxlQ2hhbmdlKTtcbiAgdXNlUnVuQ2FsbGJhY2tPblZhbHVlQ2hhbmdlKHN0YXRlLnZhcmlhbnQsIG9uVmFyaWFudENoYW5nZSk7XG4gIGNvbnN0IGRvY2tlZFBhbmVsID0gdXNlTGF5b3V0UG9ydGFsKFxuICAgIFNsb3QucmlnaHRQYW5lbCxcbiAgICBjYW5SZW5kZXIgJiYgaXNWaXNpYmxlICYmICFpc01vYmlsZSA/IChcbiAgICAgIDxTdHlsZWRSaWdodFBhbmVsU2xvdD5cbiAgICAgICAgPFBhbmVsQ29udGFpbmVyXG4gICAgICAgICAgYXJpYS1sYWJlbD17YXJpYUxhYmVsfVxuICAgICAgICAgIHNjcm9sbENvbnRhaW5lclJlZj17c2Nyb2xsQ29udGFpbmVyUmVmfVxuICAgICAgICAgIG9uU2Nyb2xsPXtvblNjcm9sbH1cbiAgICAgICAgICAvLyBUaGUgbGVmdCBib3JkZXIgc2VwYXJhdGVzIHRoZSBkb2NrZWQgY29sdW1uIGZyb20gdGhlIGNvbnRlbnQ7IHRoZVxuICAgICAgICAgIC8vIGZsb2F0aW5nIHdpbmRvdyBoYXMgaXRzIG93biBib3JkZXIsIHNvIGRyb3AgaXQgdGhlcmUuXG4gICAgICAgICAgc2hvd0JvcmRlckxlZnQ9e3N0YXRlLnZhcmlhbnQgIT09IFwiZmxvYXRcIn1cbiAgICAgICAgPlxuICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgPC9QYW5lbENvbnRhaW5lcj5cbiAgICAgIDwvU3R5bGVkUmlnaHRQYW5lbFNsb3Q+XG4gICAgKSA6IG51bGxcbiAgKTtcbiAgaWYgKCFjYW5SZW5kZXIpIHJldHVybiBudWxsO1xuICBpZiAoaXNNb2JpbGUpIHtcbiAgICByZXR1cm4gKFxuICAgICAgLy8gSW5pdGlhbCBmb2N1cyBpcyBzdXBwcmVzc2VkIHNvIG9wZW5pbmcgdGhlIHNoZWV0IG5ldmVyIHBvcHMgdGhlXG4gICAgICAvLyBvbi1zY3JlZW4ga2V5Ym9hcmQuXG4gICAgICA8U2hlZXRcbiAgICAgICAgaXNWaXNpYmxlPXtpc1Zpc2libGV9XG4gICAgICAgIG9uQ2xvc2U9e2hpZGV9XG4gICAgICAgIGhhc0JhY2tkcm9wXG4gICAgICAgIGRpc21pc3NPbk91dHNpZGVDbGlja1xuICAgICAgICBkaXNhYmxlSW5pdGlhbEZvY3VzXG4gICAgICA+XG4gICAgICAgIDxTdHlsZWRTaGVldFBhbmVsU2hlbGw+XG4gICAgICAgICAgPFBhbmVsQ29udGFpbmVyXG4gICAgICAgICAgICBhcmlhLWxhYmVsPXthcmlhTGFiZWx9XG4gICAgICAgICAgICBzY3JvbGxDb250YWluZXJSZWY9e3Njcm9sbENvbnRhaW5lclJlZn1cbiAgICAgICAgICAgIG9uU2Nyb2xsPXtvblNjcm9sbH1cbiAgICAgICAgICA+XG4gICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgICAgPC9QYW5lbENvbnRhaW5lcj5cbiAgICAgICAgPC9TdHlsZWRTaGVldFBhbmVsU2hlbGw+XG4gICAgICA8L1NoZWV0PlxuICAgICk7XG4gIH1cbiAgcmV0dXJuIGRvY2tlZFBhbmVsO1xufTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyQjZCIn0= */");export const RightPanel=({children,defaultSize=378,minSize=328,maxSize="30%",collapsible=!1,onVisibleChange,onVariantChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{isVisible,hide,state}=useLayout()[Slot.rightPanel],{isMobile}=useBreakpoints(),canRender=useCanRenderPanel();useDeclarePanel(Slot.rightPanel,{defaultSize,minSize,maxSize,collapsible}),useRunCallbackOnValueChange(isVisible,onVisibleChange),useRunCallbackOnValueChange(state.variant,onVariantChange);let dockedPanel=useLayoutPortal(Slot.rightPanel,canRender&&isVisible&&!isMobile?React.createElement(StyledRightPanelSlot,null,React.createElement(PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,showBorderLeft:"float"!==state.variant},children)):null);return canRender?isMobile?React.createElement(Sheet,{isVisible:isVisible,onClose:hide,hasBackdrop:!0,dismissOnOutsideClick:!0,disableInitialFocus:!0},React.createElement(StyledSheetPanelShell,null,React.createElement(PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children))):dockedPanel:null};
|
|
1
|
+
import React from"react";import{Slot}from"../-constants";import{useDeclarePanel,useRunCallbackOnValueChange}from"../registry";import{useLayout}from"../useLayout";import{useCanRenderPanel}from"../context";import{useBreakpoints}from"../../../shared/useBreakpoints";import{RightPanelDocked}from"./RightPanelDocked";import{RightPanelSheet}from"./RightPanelSheet";export const RightPanel=({children,defaultSize=378,minSize=328,maxSize="30%",collapsible=!1,variant="sidebar",onVisibleChange,onVariantChange,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>{let{state:layoutState,[Slot.rightPanel]:panel}=useLayout(),{isVisible,hide}=panel,{isMobile}=useBreakpoints(),canRender=useCanRenderPanel();useDeclarePanel(Slot.rightPanel,{defaultSize,minSize,maxSize,collapsible,variant});let resolvedVariant=layoutState[Slot.rightPanel].variant??variant;return(useRunCallbackOnValueChange(isVisible,onVisibleChange),useRunCallbackOnValueChange(resolvedVariant,onVariantChange),canRender)?isMobile?React.createElement(RightPanelSheet,{isVisible:isVisible,hide:hide,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):React.createElement(RightPanelDocked,{isVisible:isVisible,variant:resolvedVariant,"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children):null};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { RightPanelVariant } from "../-types";
|
|
3
|
+
export type RightPanelDockedProps = {
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
isVisible: boolean;
|
|
6
|
+
/** Docked column vs. minimized floating window - only the border differs here. */
|
|
7
|
+
variant: RightPanelVariant;
|
|
8
|
+
"aria-label": string;
|
|
9
|
+
scrollContainerRef?: React.Ref<HTMLDivElement>;
|
|
10
|
+
onScroll?: React.UIEventHandler<HTMLDivElement>;
|
|
11
|
+
};
|
|
12
|
+
/**
|
|
13
|
+
* Docked (desktop) right panel. Portals its content into the `rightPanel` slot's
|
|
14
|
+
* host - an in-flow, resizable column - while the panel is visible. Content lives
|
|
15
|
+
* in a {@link PanelContainer} so `Layout.RightPanelHeader` /
|
|
16
|
+
* `Layout.RightPanelFooter` children stick to the edges. The mobile presentation
|
|
17
|
+
* is {@link RightPanelSheet}; `RightPanel` picks between the two by breakpoint.
|
|
18
|
+
*/
|
|
19
|
+
export declare const RightPanelDocked: React.FC<RightPanelDockedProps>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import React from"react";import styled from"@emotion/styled";import{Slot,SUBNAV_OFFSET_VAR}from"../-constants";import{useLayoutPortal}from"../registry";import{PanelContainer}from"../PanelContainer";let StyledRightPanelSlot=styled("div",{target:"eq48lip0",label:"StyledRightPanelSlot"})(({theme})=>({position:"absolute",left:0,right:0,bottom:0,top:`var(${SUBNAV_OFFSET_VAR}, 0px)`,overflow:"hidden",transition:`top ${theme.variables.animation.navSlide.open.duration} ${theme.variables.animation.navSlide.open.timingFunction}`}),"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvTGF5b3V0L1JpZ2h0UGFuZWwvUmlnaHRQYW5lbERvY2tlZC50c3giLCJzb3VyY2VzIjpbInNyYy9jb21wb25lbnRzL0xheW91dC9SaWdodFBhbmVsL1JpZ2h0UGFuZWxEb2NrZWQudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgU2xvdCwgU1VCTkFWX09GRlNFVF9WQVIgfSBmcm9tIFwiLi4vLWNvbnN0YW50c1wiO1xuaW1wb3J0IHsgdXNlTGF5b3V0UG9ydGFsIH0gZnJvbSBcIi4uL3JlZ2lzdHJ5XCI7XG5pbXBvcnQgeyBQYW5lbENvbnRhaW5lciB9IGZyb20gXCIuLi9QYW5lbENvbnRhaW5lclwiO1xuaW1wb3J0IHR5cGUgeyBSaWdodFBhbmVsVmFyaWFudCB9IGZyb20gXCIuLi8tdHlwZXNcIjtcblxuLy8gQnVpbHQtaW4gc2xvdDogb2Zmc2V0cyB0aGUgcGFuZWwgY29udGVudCBieSB0aGUgc3VibmF2LW9mZnNldCB2YXIgKDAgd2hlblxuLy8gdW5zZXQpLCB0cmFuc2l0aW9uZWQgd2l0aCB0aGUgdGhlbWUncyBgbmF2U2xpZGVgIHRpbWluZyDigJQgc28gdGhlIHJpZ2h0IHBhbmVsXG4vLyB0cmFja3MgYSBzdGlja3kgc3VibmF2IHdpdGggbm8gd2lyaW5nIG9uIHRoZSBjb25zdW1lcidzIHNpZGUuXG5jb25zdCBTdHlsZWRSaWdodFBhbmVsU2xvdCA9IHN0eWxlZC5kaXYoKHsgdGhlbWUgfSkgPT4gKHtcbiAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgbGVmdDogMCxcbiAgcmlnaHQ6IDAsXG4gIGJvdHRvbTogMCxcbiAgdG9wOiBgdmFyKCR7U1VCTkFWX09GRlNFVF9WQVJ9LCAwcHgpYCxcbiAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG4gIHRyYW5zaXRpb246IGB0b3AgJHt0aGVtZS52YXJpYWJsZXMuYW5pbWF0aW9uLm5hdlNsaWRlLm9wZW4uZHVyYXRpb259ICR7dGhlbWUudmFyaWFibGVzLmFuaW1hdGlvbi5uYXZTbGlkZS5vcGVuLnRpbWluZ0Z1bmN0aW9ufWAsXG59KSk7XG5cbmV4cG9ydCB0eXBlIFJpZ2h0UGFuZWxEb2NrZWRQcm9wcyA9IHtcbiAgY2hpbGRyZW46IFJlYWN0LlJlYWN0Tm9kZTtcbiAgaXNWaXNpYmxlOiBib29sZWFuO1xuICAvKiogRG9ja2VkIGNvbHVtbiB2cy4gbWluaW1pemVkIGZsb2F0aW5nIHdpbmRvdyAtIG9ubHkgdGhlIGJvcmRlciBkaWZmZXJzIGhlcmUuICovXG4gIHZhcmlhbnQ6IFJpZ2h0UGFuZWxWYXJpYW50O1xuICBcImFyaWEtbGFiZWxcIjogc3RyaW5nO1xuICBzY3JvbGxDb250YWluZXJSZWY/OiBSZWFjdC5SZWY8SFRNTERpdkVsZW1lbnQ+O1xuICBvblNjcm9sbD86IFJlYWN0LlVJRXZlbnRIYW5kbGVyPEhUTUxEaXZFbGVtZW50Pjtcbn07XG5cbi8qKlxuICogRG9ja2VkIChkZXNrdG9wKSByaWdodCBwYW5lbC4gUG9ydGFscyBpdHMgY29udGVudCBpbnRvIHRoZSBgcmlnaHRQYW5lbGAgc2xvdCdzXG4gKiBob3N0IC0gYW4gaW4tZmxvdywgcmVzaXphYmxlIGNvbHVtbiAtIHdoaWxlIHRoZSBwYW5lbCBpcyB2aXNpYmxlLiBDb250ZW50IGxpdmVzXG4gKiBpbiBhIHtAbGluayBQYW5lbENvbnRhaW5lcn0gc28gYExheW91dC5SaWdodFBhbmVsSGVhZGVyYCAvXG4gKiBgTGF5b3V0LlJpZ2h0UGFuZWxGb290ZXJgIGNoaWxkcmVuIHN0aWNrIHRvIHRoZSBlZGdlcy4gVGhlIG1vYmlsZSBwcmVzZW50YXRpb25cbiAqIGlzIHtAbGluayBSaWdodFBhbmVsU2hlZXR9OyBgUmlnaHRQYW5lbGAgcGlja3MgYmV0d2VlbiB0aGUgdHdvIGJ5IGJyZWFrcG9pbnQuXG4gKi9cbmV4cG9ydCBjb25zdCBSaWdodFBhbmVsRG9ja2VkOiBSZWFjdC5GQzxSaWdodFBhbmVsRG9ja2VkUHJvcHM+ID0gKHtcbiAgY2hpbGRyZW4sXG4gIGlzVmlzaWJsZSxcbiAgdmFyaWFudCxcbiAgXCJhcmlhLWxhYmVsXCI6IGFyaWFMYWJlbCxcbiAgc2Nyb2xsQ29udGFpbmVyUmVmLFxuICBvblNjcm9sbCxcbn0pID0+XG4gIHVzZUxheW91dFBvcnRhbChcbiAgICBTbG90LnJpZ2h0UGFuZWwsXG4gICAgaXNWaXNpYmxlID8gKFxuICAgICAgPFN0eWxlZFJpZ2h0UGFuZWxTbG90PlxuICAgICAgICA8UGFuZWxDb250YWluZXJcbiAgICAgICAgICBhcmlhLWxhYmVsPXthcmlhTGFiZWx9XG4gICAgICAgICAgc2Nyb2xsQ29udGFpbmVyUmVmPXtzY3JvbGxDb250YWluZXJSZWZ9XG4gICAgICAgICAgb25TY3JvbGw9e29uU2Nyb2xsfVxuICAgICAgICAgIC8vIFRoZSBsZWZ0IGJvcmRlciBzZXBhcmF0ZXMgdGhlIGRvY2tlZCBjb2x1bW4gZnJvbSB0aGUgY29udGVudDsgdGhlXG4gICAgICAgICAgLy8gZmxvYXRpbmcgd2luZG93IGhhcyBpdHMgb3duIGJvcmRlciwgc28gZHJvcCBpdCB0aGVyZS5cbiAgICAgICAgICBzaG93Qm9yZGVyTGVmdD17dmFyaWFudCAhPT0gXCJmbG9hdFwifVxuICAgICAgICA+XG4gICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICA8L1BhbmVsQ29udGFpbmVyPlxuICAgICAgPC9TdHlsZWRSaWdodFBhbmVsU2xvdD5cbiAgICApIDogbnVsbFxuICApO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVU2QiJ9 */");export const RightPanelDocked=({children,isVisible,variant,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>useLayoutPortal(Slot.rightPanel,isVisible?React.createElement(StyledRightPanelSlot,null,React.createElement(PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll,showBorderLeft:"float"!==variant},children)):null);
|
|
@@ -1,15 +1,19 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import type { RightPanelHeaderProps } from "../-types";
|
|
3
3
|
/**
|
|
4
|
-
* Optional sticky header for `Layout.RightPanel` - place it among the
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* into the
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
4
|
+
* Optional sticky header for `Layout.RightPanel` - place it among the panel's
|
|
5
|
+
* children; it sticks to the top while the rest of the content scrolls. Renders
|
|
6
|
+
* the `title` block after `leftSlot` and buttons at the header end (after
|
|
7
|
+
* `rightSlot`): a close button that hides the panel, plus a variant toggle
|
|
8
|
+
* that minimizes the panel into the float / docks it back - shown
|
|
9
|
+
* only when `slotProps.variantButton` is supplied, which is what opts the panel
|
|
10
|
+
* into floating at all. While floating (desktop only - the
|
|
11
|
+
* mobile sheet never mounts the float), the whole header becomes a
|
|
12
|
+
* `LayoutFloatDragHandle`; `leftSlot`, `rightSlot`, and the built-in buttons
|
|
13
|
+
* are each wrapped in `LayoutFloatDragHandle.Guard` so their own click/arrow-key
|
|
14
|
+
* behavior keeps working even though a drag can start on them. On mobile
|
|
15
|
+
* viewports the panel renders as a bottom sheet where dock/float has no meaning
|
|
16
|
+
* and the sheet brings its own dismiss affordances, so the variant toggle is
|
|
17
|
+
* omitted there too.
|
|
14
18
|
*/
|
|
15
19
|
export declare function RightPanelHeader({ leftSlot, rightSlot, title, slotProps, "data-e2e-test-id": dataE2eTestId, }: RightPanelHeaderProps): React.ReactElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import{Slot}from"../-constants";import{useLayout}from"../useLayout";import{useBreakpoints}from"../../../shared/useBreakpoints";import{Sandwich}from"../../Internal/Sandwich/Sandwich";import{PanelHeader}from"../../Internal/PanelHeader/PanelHeader";import{PictogramButton}from"../../PictogramButton/PictogramButton";export function RightPanelHeader({leftSlot,rightSlot,title,slotProps,"data-e2e-test-id":dataE2eTestId}){let{hide,setVariant,state}=useLayout()[Slot.rightPanel],{isMobile}=useBreakpoints(),isFloating="float"===state.variant;return React.createElement(Sandwich.Header,{"data-e2e-test-id":dataE2eTestId},React.createElement(PanelHeader,{leftSlot:leftSlot,title:title,rightSlot:React.createElement(React.Fragment,null,rightSlot,!isMobile&&React.createElement(
|
|
1
|
+
import React from"react";import{Slot}from"../-constants";import{useLayout}from"../useLayout";import{useBreakpoints}from"../../../shared/useBreakpoints";import{Sandwich}from"../../Internal/Sandwich/Sandwich";import{PanelHeader}from"../../Internal/PanelHeader/PanelHeader";import{PictogramButton}from"../../PictogramButton/PictogramButton";import{Inline}from"../../Inline/Inline";import{LayoutFloatDragHandle}from"../../Internal/LayoutFloat/LayoutFloatDragHandle";export function RightPanelHeader({leftSlot,rightSlot,title,slotProps,"data-e2e-test-id":dataE2eTestId}){let{hide,setVariant,state}=useLayout()[Slot.rightPanel],{isMobile}=useBreakpoints(),isFloating="float"===state.variant,variantButtonSlotProps=slotProps.variantButton;return React.createElement(Sandwich.Header,{"data-e2e-test-id":dataE2eTestId},React.createElement(LayoutFloatDragHandle,{isDraggable:isFloating,"aria-label":slotProps.dragHandle?.["aria-label"]},React.createElement(PanelHeader,{leftSlot:React.createElement(LayoutFloatDragHandle.Guard,null,leftSlot),title:title,rightSlot:React.createElement(React.Fragment,null,React.createElement(LayoutFloatDragHandle.Guard,null,rightSlot),!isMobile&&React.createElement(LayoutFloatDragHandle.Guard,null,React.createElement(Inline,{space:"xxs",vAlignItems:"center",noWrap:!0},variantButtonSlotProps&&React.createElement(PictogramButton,{icon:isFloating?"open-sidebar-right":"minimize",size:"s",variant:"tertiary","aria-label":isFloating?variantButtonSlotProps.dockLabel:variantButtonSlotProps.minimizeLabel,onClick:()=>setVariant(isFloating?"sidebar":"float")}),React.createElement(PictogramButton,{icon:"x",size:"s",variant:"tertiary","aria-label":slotProps.closeButton["aria-label"],onClick:hide}))))})))}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export type RightPanelSheetProps = {
|
|
3
|
+
children: React.ReactNode;
|
|
4
|
+
isVisible: boolean;
|
|
5
|
+
hide: () => void;
|
|
6
|
+
"aria-label": string;
|
|
7
|
+
scrollContainerRef?: React.Ref<HTMLDivElement>;
|
|
8
|
+
onScroll?: React.UIEventHandler<HTMLDivElement>;
|
|
9
|
+
};
|
|
10
|
+
/**
|
|
11
|
+
* Mobile right panel. Renders its content as a bottom {@link Sheet} instead of an
|
|
12
|
+
* in-flow column - the Sheet portals itself, so the layout portal is bypassed
|
|
13
|
+
* here. Visibility is the shared `rightPanel` layout state, so `useLayout()`
|
|
14
|
+
* drives it identically to the docked desktop panel; outside-click / backdrop
|
|
15
|
+
* dismissal routes back through `hide`. Initial focus is suppressed so opening
|
|
16
|
+
* the sheet never pops the on-screen keyboard.
|
|
17
|
+
*/
|
|
18
|
+
export declare const RightPanelSheet: React.FC<RightPanelSheetProps>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import React from"react";import styled from"@emotion/styled";import{PanelContainer}from"../PanelContainer";import{Sheet,SHEET_MAX_HEIGHT}from"../../Sheet/Sheet";let StyledSheetPanelShell=styled("div",{target:"e1wbhy260",label:"StyledSheetPanelShell"})({height:SHEET_MAX_HEIGHT},"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvTGF5b3V0L1JpZ2h0UGFuZWwvUmlnaHRQYW5lbFNoZWV0LnRzeCIsInNvdXJjZXMiOlsic3JjL2NvbXBvbmVudHMvTGF5b3V0L1JpZ2h0UGFuZWwvUmlnaHRQYW5lbFNoZWV0LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IFBhbmVsQ29udGFpbmVyIH0gZnJvbSBcIi4uL1BhbmVsQ29udGFpbmVyXCI7XG5pbXBvcnQgeyBTaGVldCwgU0hFRVRfTUFYX0hFSUdIVCB9IGZyb20gXCIuLi8uLi9TaGVldC9TaGVldFwiO1xuXG4vLyBHaXZlcyB0aGUgcGFuZWwgc2hlbGwgYSBkZWZpbml0ZSBoZWlnaHQgaW5zaWRlIHRoZSBTaGVldCAod2hpY2ggb25seSBjYXBzXG4vLyBpdHMgY29udGVudCBhdCBTSEVFVF9NQVhfSEVJR0hUKS4gV2l0aCB0aGUgaGVpZ2h0IGJvdW5kZWQsIHRoZSBTYW5kd2ljaFxuLy8gaW5zaWRlIFBhbmVsQ29udGFpbmVyIHNjcm9sbHMgaXRzIGJvZHkgcmVnaW9uIGl0c2VsZiwgc29cbi8vIGBMYXlvdXQuUmlnaHRQYW5lbEhlYWRlcmAgLyBgTGF5b3V0LlJpZ2h0UGFuZWxGb290ZXJgIHN0aWNrIHRvIHRoZSBzaGVldFxuLy8gZWRnZXMgZXhhY3RseSBhcyB0aGV5IGRvIGluIHRoZSBkb2NrZWQgcGFuZWwuXG5jb25zdCBTdHlsZWRTaGVldFBhbmVsU2hlbGwgPSBzdHlsZWQuZGl2KHtcbiAgaGVpZ2h0OiBTSEVFVF9NQVhfSEVJR0hULFxufSk7XG5cbmV4cG9ydCB0eXBlIFJpZ2h0UGFuZWxTaGVldFByb3BzID0ge1xuICBjaGlsZHJlbjogUmVhY3QuUmVhY3ROb2RlO1xuICBpc1Zpc2libGU6IGJvb2xlYW47XG4gIGhpZGU6ICgpID0+IHZvaWQ7XG4gIFwiYXJpYS1sYWJlbFwiOiBzdHJpbmc7XG4gIHNjcm9sbENvbnRhaW5lclJlZj86IFJlYWN0LlJlZjxIVE1MRGl2RWxlbWVudD47XG4gIG9uU2Nyb2xsPzogUmVhY3QuVUlFdmVudEhhbmRsZXI8SFRNTERpdkVsZW1lbnQ+O1xufTtcblxuLyoqXG4gKiBNb2JpbGUgcmlnaHQgcGFuZWwuIFJlbmRlcnMgaXRzIGNvbnRlbnQgYXMgYSBib3R0b20ge0BsaW5rIFNoZWV0fSBpbnN0ZWFkIG9mIGFuXG4gKiBpbi1mbG93IGNvbHVtbiAtIHRoZSBTaGVldCBwb3J0YWxzIGl0c2VsZiwgc28gdGhlIGxheW91dCBwb3J0YWwgaXMgYnlwYXNzZWRcbiAqIGhlcmUuIFZpc2liaWxpdHkgaXMgdGhlIHNoYXJlZCBgcmlnaHRQYW5lbGAgbGF5b3V0IHN0YXRlLCBzbyBgdXNlTGF5b3V0KClgXG4gKiBkcml2ZXMgaXQgaWRlbnRpY2FsbHkgdG8gdGhlIGRvY2tlZCBkZXNrdG9wIHBhbmVsOyBvdXRzaWRlLWNsaWNrIC8gYmFja2Ryb3BcbiAqIGRpc21pc3NhbCByb3V0ZXMgYmFjayB0aHJvdWdoIGBoaWRlYC4gSW5pdGlhbCBmb2N1cyBpcyBzdXBwcmVzc2VkIHNvIG9wZW5pbmdcbiAqIHRoZSBzaGVldCBuZXZlciBwb3BzIHRoZSBvbi1zY3JlZW4ga2V5Ym9hcmQuXG4gKi9cbmV4cG9ydCBjb25zdCBSaWdodFBhbmVsU2hlZXQ6IFJlYWN0LkZDPFJpZ2h0UGFuZWxTaGVldFByb3BzPiA9ICh7XG4gIGNoaWxkcmVuLFxuICBpc1Zpc2libGUsXG4gIGhpZGUsXG4gIFwiYXJpYS1sYWJlbFwiOiBhcmlhTGFiZWwsXG4gIHNjcm9sbENvbnRhaW5lclJlZixcbiAgb25TY3JvbGwsXG59KSA9PiAoXG4gIDxTaGVldFxuICAgIGlzVmlzaWJsZT17aXNWaXNpYmxlfVxuICAgIG9uQ2xvc2U9e2hpZGV9XG4gICAgaGFzQmFja2Ryb3BcbiAgICBkaXNtaXNzT25PdXRzaWRlQ2xpY2tcbiAgICBkaXNhYmxlSW5pdGlhbEZvY3VzXG4gID5cbiAgICA8U3R5bGVkU2hlZXRQYW5lbFNoZWxsPlxuICAgICAgPFBhbmVsQ29udGFpbmVyXG4gICAgICAgIGFyaWEtbGFiZWw9e2FyaWFMYWJlbH1cbiAgICAgICAgc2Nyb2xsQ29udGFpbmVyUmVmPXtzY3JvbGxDb250YWluZXJSZWZ9XG4gICAgICAgIG9uU2Nyb2xsPXtvblNjcm9sbH1cbiAgICAgID5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9QYW5lbENvbnRhaW5lcj5cbiAgICA8L1N0eWxlZFNoZWV0UGFuZWxTaGVsbD5cbiAgPC9TaGVldD5cbik7XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVThCIn0= */");export const RightPanelSheet=({children,isVisible,hide,"aria-label":ariaLabel,scrollContainerRef,onScroll})=>React.createElement(Sheet,{isVisible:isVisible,onClose:hide,hasBackdrop:!0,dismissOnOutsideClick:!0,disableInitialFocus:!0},React.createElement(StyledSheetPanelShell,null,React.createElement(PanelContainer,{"aria-label":ariaLabel,scrollContainerRef:scrollContainerRef,onScroll:onScroll},children)));
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export type ContentSplitBaseProps = {
|
|
3
|
+
children: React.ReactNode;
|
|
4
|
+
};
|
|
5
|
+
/**
|
|
6
|
+
* Base layer of the mobile split stack - the presentation `Layout.Content` takes
|
|
7
|
+
* while a `Layout.Split` is stacked over it. Portals into the layout-root stack
|
|
8
|
+
* host and wraps in a sliding layer, so content and the split view share one
|
|
9
|
+
* containing block and slide against each other regardless of where their
|
|
10
|
+
* markers sit in the tree. The overlay layer is {@link MobileSplitView}; the
|
|
11
|
+
* in-flow presentation is {@link ContentDocked}.
|
|
12
|
+
*/
|
|
13
|
+
export declare const ContentSplitBase: React.FC<ContentSplitBaseProps>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import React from"react";import{createPortal}from"react-dom";import{StyledMobileSplitSlideLayer}from"./StyledMobileSplitSlideLayer";import{useMobileSplitStack}from"./useMobileSplitStack";import{contentOffsetFor,useMobileSplitView}from"./useMobileSplitView";export const ContentSplitBase=({children})=>{let{isSplitViewActive}=useMobileSplitView(),{host}=useMobileSplitStack();return host?createPortal(React.createElement(StyledMobileSplitSlideLayer,{layer:"base",offset:contentOffsetFor(isSplitViewActive)},children),host):null};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { MobileSplitViewProps } from "../../-types";
|
|
3
|
+
/**
|
|
4
|
+
* Mobile presentation of `Layout.Split`: a full-area layer that slides in over
|
|
5
|
+
* the base `content` view and back out, without unmounting. Registers its
|
|
6
|
+
* presence so `content` knows to join the sliding stack, and portals into the
|
|
7
|
+
* layout-root stack host so the two views share one containing block regardless
|
|
8
|
+
* of the marker's depth. Whether it's in front is the `splitview` slot's
|
|
9
|
+
* visibility. Renders nothing on desktop.
|
|
10
|
+
*/
|
|
11
|
+
export declare const MobileSplitView: React.FC<MobileSplitViewProps>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import React,{useLayoutEffect}from"react";import{createPortal}from"react-dom";import{PanelContainer}from"../../PanelContainer";import{StyledMobileSplitSlideLayer}from"./StyledMobileSplitSlideLayer";import{useMobileSplitStack}from"./useMobileSplitStack";import{splitViewOffsetFor,useMobileSplitView,useMobileSplitViewEnabled}from"./useMobileSplitView";export const MobileSplitView=({children,"aria-label":ariaLabel})=>{let enabled=useMobileSplitViewEnabled(),{isSplitViewActive}=useMobileSplitView(),{host,registerSplit}=useMobileSplitStack();return(useLayoutEffect(()=>{if(enabled)return registerSplit()},[enabled,registerSplit]),enabled&&host)?createPortal(React.createElement(StyledMobileSplitSlideLayer,{layer:"overlay",offset:splitViewOffsetFor(isSplitViewActive)},React.createElement(PanelContainer,{"aria-label":ariaLabel},children)),host):null};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { MobileSplitViewOffset } from "./useMobileSplitView";
|
|
2
|
+
declare const LAYER_Z_INDEX: {
|
|
3
|
+
readonly base: 1;
|
|
4
|
+
readonly overlay: 2;
|
|
5
|
+
};
|
|
6
|
+
export type MobileSplitLayer = keyof typeof LAYER_Z_INDEX;
|
|
7
|
+
/**
|
|
8
|
+
* One layer of the two-view mobile split. Slides to `offset` - -1 (parked to the
|
|
9
|
+
* left), 0 (in view), 1 (parked to the right) - so switching pushes the outgoing
|
|
10
|
+
* view toward the side it rests on while the incoming one slides in from the
|
|
11
|
+
* opposite edge, like a Drawer.
|
|
12
|
+
*/
|
|
13
|
+
export declare const StyledMobileSplitSlideLayer: import("@emotion/styled").StyledComponent<{
|
|
14
|
+
theme?: import("@emotion/react").Theme;
|
|
15
|
+
as?: React.ElementType;
|
|
16
|
+
} & {
|
|
17
|
+
offset: MobileSplitViewOffset;
|
|
18
|
+
layer: MobileSplitLayer;
|
|
19
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
20
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import styled from"@emotion/styled";let OFFSET_TRANSFORM={[-1]:"translateX(-100%)",0:"translateX(0)",1:"translateX(100%)"},LAYER_Z_INDEX={base:1,overlay:2};export const StyledMobileSplitSlideLayer=styled("div",{shouldForwardProp:prop=>"offset"!==prop&&"layer"!==prop,target:"e187cevn0",label:"StyledMobileSplitSlideLayer"})(({theme,offset,layer})=>{let{duration,timingFunction}=theme.variables.animation.navSlide.open;return{position:"absolute",inset:0,zIndex:LAYER_Z_INDEX[layer],transform:OFFSET_TRANSFORM[offset],transition:`transform ${duration} ${timingFunction}`,pointerEvents:0===offset?"auto":"none","@media (prefers-reduced-motion: reduce)":{transition:"none"}}},"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvTGF5b3V0L1NwbGl0L01vYmlsZVNwbGl0Vmlldy9TdHlsZWRNb2JpbGVTcGxpdFNsaWRlTGF5ZXIudHN4Iiwic291cmNlcyI6WyJzcmMvY29tcG9uZW50cy9MYXlvdXQvU3BsaXQvTW9iaWxlU3BsaXRWaWV3L1N0eWxlZE1vYmlsZVNwbGl0U2xpZGVMYXllci50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgdHlwZSB7IE1vYmlsZVNwbGl0Vmlld09mZnNldCB9IGZyb20gXCIuL3VzZU1vYmlsZVNwbGl0Vmlld1wiO1xuXG5jb25zdCBPRkZTRVRfVFJBTlNGT1JNOiBSZWNvcmQ8TW9iaWxlU3BsaXRWaWV3T2Zmc2V0LCBzdHJpbmc+ID0ge1xuICBbLTFdOiBcInRyYW5zbGF0ZVgoLTEwMCUpXCIsXG4gIDA6IFwidHJhbnNsYXRlWCgwKVwiLFxuICAxOiBcInRyYW5zbGF0ZVgoMTAwJSlcIixcbn07XG5cbi8vIFRoZSBzcGxpdCB2aWV3IChgb3ZlcmxheWApIHN0YWNrcyBhYm92ZSB0aGUgYmFzZSBgY29udGVudGAgdmlldyAoYGJhc2VgKS5cbmNvbnN0IExBWUVSX1pfSU5ERVggPSB7IGJhc2U6IDEsIG92ZXJsYXk6IDIgfSBhcyBjb25zdDtcbmV4cG9ydCB0eXBlIE1vYmlsZVNwbGl0TGF5ZXIgPSBrZXlvZiB0eXBlb2YgTEFZRVJfWl9JTkRFWDtcblxuLyoqXG4gKiBPbmUgbGF5ZXIgb2YgdGhlIHR3by12aWV3IG1vYmlsZSBzcGxpdC4gU2xpZGVzIHRvIGBvZmZzZXRgIC0gLTEgKHBhcmtlZCB0byB0aGVcbiAqIGxlZnQpLCAwIChpbiB2aWV3KSwgMSAocGFya2VkIHRvIHRoZSByaWdodCkgLSBzbyBzd2l0Y2hpbmcgcHVzaGVzIHRoZSBvdXRnb2luZ1xuICogdmlldyB0b3dhcmQgdGhlIHNpZGUgaXQgcmVzdHMgb24gd2hpbGUgdGhlIGluY29taW5nIG9uZSBzbGlkZXMgaW4gZnJvbSB0aGVcbiAqIG9wcG9zaXRlIGVkZ2UsIGxpa2UgYSBEcmF3ZXIuXG4gKi9cbmV4cG9ydCBjb25zdCBTdHlsZWRNb2JpbGVTcGxpdFNsaWRlTGF5ZXIgPSBzdHlsZWQoXCJkaXZcIiwge1xuICBzaG91bGRGb3J3YXJkUHJvcDogKHByb3ApID0+IHByb3AgIT09IFwib2Zmc2V0XCIgJiYgcHJvcCAhPT0gXCJsYXllclwiLFxufSk8eyBvZmZzZXQ6IE1vYmlsZVNwbGl0Vmlld09mZnNldDsgbGF5ZXI6IE1vYmlsZVNwbGl0TGF5ZXIgfT4oXG4gICh7IHRoZW1lLCBvZmZzZXQsIGxheWVyIH0pID0+IHtcbiAgICBjb25zdCB7IGR1cmF0aW9uLCB0aW1pbmdGdW5jdGlvbiB9ID1cbiAgICAgIHRoZW1lLnZhcmlhYmxlcy5hbmltYXRpb24ubmF2U2xpZGUub3BlbjtcbiAgICByZXR1cm4ge1xuICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgIGluc2V0OiAwLFxuICAgICAgekluZGV4OiBMQVlFUl9aX0lOREVYW2xheWVyXSxcbiAgICAgIHRyYW5zZm9ybTogT0ZGU0VUX1RSQU5TRk9STVtvZmZzZXRdLFxuICAgICAgdHJhbnNpdGlvbjogYHRyYW5zZm9ybSAke2R1cmF0aW9ufSAke3RpbWluZ0Z1bmN0aW9ufWAsXG4gICAgICBwb2ludGVyRXZlbnRzOiBvZmZzZXQgPT09IDAgPyBcImF1dG9cIiA6IFwibm9uZVwiLFxuICAgICAgXCJAbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSlcIjogeyB0cmFuc2l0aW9uOiBcIm5vbmVcIiB9LFxuICAgIH07XG4gIH1cbik7XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUIyQyJ9 */");
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export type MobileSplitStackValue = {
|
|
2
|
+
/** The full-area DOM node at the layout root that hosts the mobile split
|
|
3
|
+
* stack. `null` until it mounts (and on desktop, where it isn't rendered). */
|
|
4
|
+
host: HTMLElement | null;
|
|
5
|
+
/** True while a mobile split view is mounted, so `content` knows to join the
|
|
6
|
+
* sliding stack (vs. staying in-flow). */
|
|
7
|
+
isSplitPresent: boolean;
|
|
8
|
+
/** Register a mounted split view; returns its unregister cleanup. */
|
|
9
|
+
registerSplit: () => () => void;
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* Everything the two-view mobile split shares, scoped to one `<Layout>`: the
|
|
13
|
+
* stack host to portal into and whether a split view is present. `content` and
|
|
14
|
+
* the split view read this to slide against each other inside one containing
|
|
15
|
+
* block, regardless of where their markers sit in the tree. *Which* view is in
|
|
16
|
+
* front isn't stored here - it derives from the `splitview` slot's visibility
|
|
17
|
+
* (see {@link useMobileSplitView}).
|
|
18
|
+
*/
|
|
19
|
+
export declare const MobileSplitStackContext: React.Context<MobileSplitStackValue>;
|
|
20
|
+
export declare const useMobileSplitStack: () => MobileSplitStackValue;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{createContext,useContext}from"react";export const MobileSplitStackContext=createContext(null);export const useMobileSplitStack=()=>{let context=useContext(MobileSplitStackContext);if(!context)throw Error("useMobileSplitStack must be used within a <Layout>.");return context};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/** Whether the mobile split stack applies to the current viewport: below the
|
|
2
|
+
* mobile breakpoint with panels enabled. */
|
|
3
|
+
export declare function useMobileSplitViewEnabled(): boolean;
|
|
4
|
+
/** A view's horizontal rest position in the mobile stack: `-1` (parked off the
|
|
5
|
+
* left edge), `0` (in view), `1` (parked off the right edge). */
|
|
6
|
+
export type MobileSplitViewOffset = -1 | 0 | 1;
|
|
7
|
+
/** The base `content` view parks off the left edge while the split view is in
|
|
8
|
+
* front; otherwise it's in view. */
|
|
9
|
+
export declare const contentOffsetFor: (isSplitViewActive: boolean) => MobileSplitViewOffset;
|
|
10
|
+
/** The split view rests off the right edge until it's brought to the front. */
|
|
11
|
+
export declare const splitViewOffsetFor: (isSplitViewActive: boolean) => MobileSplitViewOffset;
|
|
12
|
+
export type MobileSplitViewValue = {
|
|
13
|
+
/** Whether the split view is in front of the base content view. */
|
|
14
|
+
isSplitViewActive: boolean;
|
|
15
|
+
/** Bring the split view to the front. */
|
|
16
|
+
showSplitView: () => void;
|
|
17
|
+
/** Return to the base content view. */
|
|
18
|
+
showContent: () => void;
|
|
19
|
+
};
|
|
20
|
+
/**
|
|
21
|
+
* Mobile control for the two-view split: read whether the split view is in front
|
|
22
|
+
* and switch between it and the base `content` view - wire your own button to
|
|
23
|
+
* `showSplitView` / `showContent`. Backed by the `splitview` slot's visibility
|
|
24
|
+
* (the same state the desktop column tracks), so the two presentations never
|
|
25
|
+
* disagree; on desktop this just shows/hides the column.
|
|
26
|
+
*/
|
|
27
|
+
export declare function useMobileSplitView(): MobileSplitViewValue;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{useBreakpoints}from"../../../../shared/useBreakpoints";import{Slot}from"../../-constants";import{useCanRenderPanel}from"../../context";import{useLayout}from"../../useLayout";export function useMobileSplitViewEnabled(){let{isMobile}=useBreakpoints(),canRenderPanel=useCanRenderPanel();return isMobile&&canRenderPanel}export const contentOffsetFor=isSplitViewActive=>isSplitViewActive?-1:0;export const splitViewOffsetFor=isSplitViewActive=>+!isSplitViewActive;export function useMobileSplitView(){let{isVisible,show,hide}=useLayout()[Slot.splitview];return{isSplitViewActive:isVisible,showSplitView:show,showContent:hide}}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import type { SplitProps } from "../-types";
|
|
3
3
|
/**
|
|
4
|
-
* Split view panel.
|
|
5
|
-
*
|
|
6
|
-
* `
|
|
7
|
-
*
|
|
4
|
+
* Split view panel. Picks its presentation by breakpoint: an in-flow resizable
|
|
5
|
+
* column on desktop ({@link SplitDocked}) and a full-area {@link MobileSplitView}
|
|
6
|
+
* that slides over `content` on mobile. Both are driven by the same state - the
|
|
7
|
+
* `splitview` slot's visibility (`useLayout().splitview` / `useMobileSplitView`)
|
|
8
|
+
* - so showing or hiding the split behaves identically on either breakpoint.
|
|
8
9
|
*/
|
|
9
10
|
export declare const Split: React.FC<SplitProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import{
|
|
1
|
+
import React from"react";import{useBreakpoints}from"../../../shared/useBreakpoints";import{useCanRenderPanel}from"../context";import{MobileSplitView}from"./MobileSplitView/MobileSplitView";import{SplitDocked}from"./SplitDocked";export const Split=({children,"aria-label":ariaLabel,defaultSize,minSize,maxSize,resizable})=>{let{isMobile}=useBreakpoints();return useCanRenderPanel()?isMobile?React.createElement(MobileSplitView,{"aria-label":ariaLabel},children):React.createElement(SplitDocked,{"aria-label":ariaLabel,defaultSize:defaultSize,minSize:minSize,maxSize:maxSize,resizable:resizable},children):null};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { SplitProps } from "../-types";
|
|
3
|
+
/**
|
|
4
|
+
* Desktop split view. Declares the `splitview` slot and portals its content
|
|
5
|
+
* while visible - an in-flow resizable column beside `content`.
|
|
6
|
+
* `Layout.SplitHeader` / `Layout.SplitFooter` children stick to the panel
|
|
7
|
+
* edges; the remaining content scrolls.
|
|
8
|
+
*/
|
|
9
|
+
export declare const SplitDocked: React.FC<SplitProps>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import React from"react";import{Slot}from"../-constants";import{useDeclarePanel,useLayoutPortal}from"../registry";import{useLayout}from"../useLayout";import{PanelContainer}from"../PanelContainer";export const SplitDocked=({children,"aria-label":ariaLabel,defaultSize,minSize,maxSize,resizable})=>{let{isVisible}=useLayout()[Slot.splitview],canResize=!1!==resizable;return useDeclarePanel(Slot.splitview,{defaultSize,minSize,maxSize,collapsible:canResize,resizable:canResize}),useLayoutPortal(Slot.splitview,isVisible?React.createElement(PanelContainer,{"aria-label":ariaLabel,showBorderLeft:!0},children):null)};
|
|
@@ -3,6 +3,7 @@ export { Layout } from "./Layout";
|
|
|
3
3
|
export { LayoutProvider } from "./LayoutProvider";
|
|
4
4
|
export { useLayoutVar } from "./LayoutCssVars";
|
|
5
5
|
export { useLayout } from "./useLayout";
|
|
6
|
+
export { useMobileSplitView, type MobileSplitViewValue, } from "./Split/MobileSplitView/useMobileSplitView";
|
|
6
7
|
export { useAutoScrollToBottom } from "./useAutoScrollToBottom";
|
|
7
8
|
export { createLayoutStore } from "./store";
|
|
8
9
|
export { createInitialState, layoutReducer } from "./reducer";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export{SUBNAV_OFFSET_VAR,PANEL_WIDTH_VAR}from"./-constants";export{Layout}from"./Layout";export{LayoutProvider}from"./LayoutProvider";export{useLayoutVar}from"./LayoutCssVars";export{useLayout}from"./useLayout";export{useAutoScrollToBottom}from"./useAutoScrollToBottom";export{createLayoutStore}from"./store";export{createInitialState,layoutReducer}from"./reducer";export*from"./-types";
|
|
1
|
+
export{SUBNAV_OFFSET_VAR,PANEL_WIDTH_VAR}from"./-constants";export{Layout}from"./Layout";export{LayoutProvider}from"./LayoutProvider";export{useLayoutVar}from"./LayoutCssVars";export{useLayout}from"./useLayout";export{useMobileSplitView}from"./Split/MobileSplitView/useMobileSplitView";export{useAutoScrollToBottom}from"./useAutoScrollToBottom";export{createLayoutStore}from"./store";export{createInitialState,layoutReducer}from"./reducer";export*from"./-types";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
function
|
|
1
|
+
function sidePanelFields(config={}){return{kind:"sidePanel",visible:config.defaultVisible??!0,collapsible:config.collapsible??!0,size:config.defaultSize,minSize:config.minSize,maxSize:config.maxSize}}function panelState(config={}){return{kind:"panel",visible:config.defaultVisible??!0,size:config.defaultSize,minSize:config.minSize,maxSize:config.maxSize}}export function createInitialState(config={}){return{leftPanel:sidePanelFields(config.leftPanel),rightPanel:{...sidePanelFields({defaultVisible:!1,...config.rightPanel}),variant:config.rightPanel?.variant},content:panelState(config.content),splitview:panelState({defaultVisible:!1,...config.splitview})}}export const layoutReducer=(state,action,initial)=>{switch(action.type){case"setVisible":{let slot=state[action.slot];if(slot.visible===action.visible)return state;return{...state,[action.slot]:{...slot,visible:action.visible}}}case"setVariant":{let panel=state[action.panel];if(panel.variant===action.variant)return state;return{...state,[action.panel]:{...panel,variant:action.variant}}}case"resize":{let slot=state[action.slot];if(slot.size===action.size)return state;return{...state,[action.slot]:{...slot,size:action.size}}}case"reset":if(!initial)return state;if(!action.slot)return initial;if(state[action.slot]===initial[action.slot])return state;return{...state,[action.slot]:initial[action.slot]};default:return state}};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type ReactNode } from "react";
|
|
2
2
|
import type { PanelImperativeHandle } from "react-resizable-panels";
|
|
3
|
-
import type { Size, SlotKey } from "./-types";
|
|
3
|
+
import type { RightPanelVariant, Size, SlotKey } from "./-types";
|
|
4
4
|
export type PortalTargets = Partial<Record<SlotKey, HTMLElement | null>>;
|
|
5
5
|
export declare const LayoutPortalContext: React.Context<Partial<Record<"content" | "leftPanel" | "splitview" | "rightPanel", HTMLElement>>>;
|
|
6
6
|
/**
|
|
@@ -20,6 +20,12 @@ export type PanelReg = {
|
|
|
20
20
|
minSize?: Size;
|
|
21
21
|
maxSize?: Size;
|
|
22
22
|
collapsible?: boolean;
|
|
23
|
+
/** When `false`, the panel is fixed at `defaultSize` and can't be drag-resized
|
|
24
|
+
* (directly or via a neighbour). Defaults to resizable. */
|
|
25
|
+
resizable?: boolean;
|
|
26
|
+
/** Initial presentation from `RightPanel`'s `variant` prop. Read as the
|
|
27
|
+
* fallback wherever the store's variant is still unset. */
|
|
28
|
+
variant?: RightPanelVariant;
|
|
23
29
|
};
|
|
24
30
|
export type PanelRegistry = {
|
|
25
31
|
register: (slot: SlotKey, reg: PanelReg) => void;
|
|
@@ -28,6 +34,8 @@ export type PanelRegistry = {
|
|
|
28
34
|
export declare const PanelRegistryContext: React.Context<PanelRegistry>;
|
|
29
35
|
/** Register this slot as a panel for the marker's lifetime. */
|
|
30
36
|
export declare function useDeclarePanel(slot: SlotKey, reg: PanelReg): void;
|
|
37
|
+
export type PanelDeclarations = Partial<Record<SlotKey, PanelReg>>;
|
|
38
|
+
export declare const PanelDeclarationsContext: React.Context<Partial<Record<"content" | "leftPanel" | "splitview" | "rightPanel", PanelReg>>>;
|
|
31
39
|
/**
|
|
32
40
|
* Keeps an animating-out panel in the resizable row while its exit plays - the
|
|
33
41
|
* Group would otherwise drop the column the instant it's hidden. The panel
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{createContext,useContext,useEffect,useRef}from"react";import{createPortal}from"react-dom";import{
|
|
1
|
+
import{createContext,useContext,useEffect,useLayoutEffect,useRef}from"react";import{createPortal}from"react-dom";import{Slot}from"./-constants";import{useLayoutPanelsEnabled}from"./context";export const LayoutPortalContext=createContext({});export function useLayoutPortal(slot,children){let slotNode=useContext(LayoutPortalContext)[slot]??null;return slotNode?createPortal(children,slotNode):null}export const PanelRegistryContext=createContext(null);export function useDeclarePanel(slot,reg){let registry=useContext(PanelRegistryContext),declarationEnabled=!0===useLayoutPanelsEnabled()||slot===Slot.content,{defaultSize,minSize,maxSize,collapsible,resizable,variant}=reg;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])}export const PanelDeclarationsContext=createContext({});export const PanelPresenceContext=createContext(null);export function usePanelPresence(slot,isPresent){let presence=useContext(PanelPresenceContext);useLayoutEffect(()=>{if(presence)return presence.setPresent(slot,isPresent),()=>presence.setPresent(slot,!1)},[presence,slot,isPresent])}export const PanelAnimationContext=createContext(null);export function usePanelAnimationControl(){return useContext(PanelAnimationContext)}export function useRunCallbackOnValueChange(value,onChange){let prev=useRef(value);useEffect(()=>{prev.current!==value&&(prev.current=value,onChange?.(value))},[value,onChange])}export function useVisibleChange(visible,onChange){useRunCallbackOnValueChange(visible,onChange)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useMemo,useState}from"react";import{
|
|
1
|
+
import{useLayoutEffect,useMemo,useState}from"react";import{useDocument}from"../../shared/useDocument";let usePortalContainerRefs=keys=>{let[elements,setElements]=useState({});return[elements,useMemo(()=>{let map={};return keys.forEach(key=>{map[key]=el=>setElements(prev=>prev[key]===el?prev:{...prev,[key]:el})}),map},[keys])]},useReparentingPortalNode=hostNode=>{let document=useDocument(),[portalNode]=useState(()=>{if(!document)return null;let node=document.createElement("div");return node.style.height="100%",node.style.width="100%",node.style.position="relative",node});return useLayoutEffect(()=>{portalNode&&hostNode&&portalNode.parentElement!==hostNode&&hostNode.appendChild(portalNode)},[portalNode,hostNode]),portalNode};export const useFloatablePortalTargets=({slots,floatableSlot,isFloating})=>{let[slotHosts,slotHostRefs]=usePortalContainerRefs(slots),[floatHost,setFloatHost]=useState(null),carrier=useReparentingPortalNode(isFloating?floatHost:slotHosts[floatableSlot]??null);return{portalTargets:useMemo(()=>carrier?{...slotHosts,[floatableSlot]:carrier}:slotHosts,[slotHosts,floatableSlot,carrier]),slotHosts,slotHostRefs,floatHostRef:setFloatHost}};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useLayoutSelector,useLayoutStore}from"./context";let selectAll=state=>state;function
|
|
1
|
+
import{useContext}from"react";import{useLayoutSelector,useLayoutStore}from"./context";import{PanelDeclarationsContext}from"./registry";let selectAll=state=>state;function panelHandleActions({slot,visible,dispatch}){return{isVisible:visible,show:()=>dispatch({type:"setVisible",slot,visible:!0}),hide:()=>dispatch({type:"setVisible",slot,visible:!1}),resize:size=>dispatch({type:"resize",slot,size}),reset:()=>dispatch({type:"reset",slot})}}export function useLayout(){let store=useLayoutStore(),state=useLayoutSelector(selectAll),declared=useContext(PanelDeclarationsContext),{dispatch}=store;return{state,leftPanel:{state:state.leftPanel,...panelHandleActions({slot:"leftPanel",visible:state.leftPanel.visible,dispatch})},rightPanel:{state:{...state.rightPanel,variant:state.rightPanel.variant??declared.rightPanel?.variant??"sidebar"},setVariant:variant=>dispatch({type:"setVariant",panel:"rightPanel",variant}),...panelHandleActions({slot:"rightPanel",visible:state.rightPanel.visible,dispatch})},content:{state:state.content,...panelHandleActions({slot:"content",visible:state.content.visible,dispatch})},splitview:{state:state.splitview,...panelHandleActions({slot:"splitview",visible:state.splitview.visible,dispatch})}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useState}from"react";import{useTheme}from"@emotion/react";import{
|
|
1
|
+
import{useLayoutEffect,useState}from"react";import{useTheme}from"@emotion/react";import{useWindow}from"../../shared/useWindow";import{prefersReducedMotion}from"../../shared/prefersReducedMotion";import{useDeclarePanel,usePanelAnimationControl,usePanelPresence}from"./registry";import{useLayout}from"./useLayout";let 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}};export function usePanelDockedSlide({slot,defaultSize,minSize,maxSize,collapsible}){let{isVisible,state}=useLayout()[slot],theme=useTheme(),window=useWindow(),animation=usePanelAnimationControl(),reducedMotion=prefersReducedMotion(window),[isMounted,setIsMounted]=useState(isVisible),[phase,setPhase]=useState("idle"),[pinnedWidth,setPinnedWidth]=useState(null),[prevVisible,setPrevVisible]=useState(isVisible);return isVisible!==prevVisible&&(setPrevVisible(isVisible),setPhase(isVisible?"entering":"exiting"),isVisible&&setIsMounted(!0)),useDeclarePanel(slot,{defaultSize:"entering"===phase&&collapsible&&!reducedMotion?0:defaultSize,minSize,maxSize,collapsible}),usePanelPresence(slot,isMounted),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
|
-
import{useContext,useMemo
|
|
1
|
+
import{useContext,useMemo}from"react";import ReactDOM from"react-dom";import{useTheme}from"@emotion/react";import{useDocument}from"../../shared/useDocument";import{DialogContext}from"../Patterns/Dialog/DialogContext";import{PopoverContext}from"../Patterns/Popover/PopoverContext";export const AMBOSS_DS_PORTAL="amboss-ds-portal";export const AMBOSS_DS_FLOAT_PORTAL="amboss-ds-float-portal";export function usePortalChildZIndex(zIndex){let theme=useTheme();return useContext(DialogContext)?theme.variables.zIndex.modal+zIndex:zIndex}export function usePortalContainerElement(portalContainer){let isWithinModal=useContext(DialogContext),{isWithinPopover,portalContainer:popoverContainer}=useContext(PopoverContext),document=useDocument(),defaultContainer=useMemo(()=>void 0===document?null:isWithinModal?document.querySelector(".amboss-ds-portal")||document.body:isWithinPopover&&popoverContainer||document.body,[isWithinModal,isWithinPopover,popoverContainer,document]);return portalContainer||defaultContainer}export function Portal({children,portalContainer}){let container=usePortalContainerElement(portalContainer);return container&&ReactDOM.createPortal(children,container)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{forwardRef}from"react";import styled from"@emotion/styled";import{getInputTextPlaceholder}from"../../shared/mixins/TextInput/getInputTextPlaceholder";import{ScreenReaderText}from"../Utilities/ScreenReaderText/ScreenReaderText";import{getAutocompleteListId}from"./AutocompleteList";export const getPaddingHorizontal=(theme,size)=>"s"===size?theme.variables.size.spacing.s:theme.variables.size.spacing.m;export const getPaddingVertical=(theme,size)=>"s"===size?theme.variables.size.spacing.xs:theme.variables.size.spacing.m;let StyledTextAreaContainer=styled("label",{target:"e1xzggns0",label:"StyledTextAreaContainer"})(({theme,maxTextAreaHeight,hasLeftIcon,size})=>{let paddingTop=getPaddingVertical(theme,size),paddingBottom=getPaddingVertical(theme,size),iconTextGap="s"===size?`calc(${theme.variables.size.spacing.xs} - ${theme.variables.size.spacing.xxxs})`:theme.variables.size.spacing.xs,basePaddingHorizontal=getPaddingHorizontal(theme,size),paddingRight=`calc(${basePaddingHorizontal} + ${theme.variables.size.dimension.icon.m} + ${iconTextGap})`,paddingLeft=hasLeftIcon?`calc(${basePaddingHorizontal} + ${theme.variables.size.dimension.icon[size]} + ${iconTextGap})`:basePaddingHorizontal;return{display:"grid",verticalAlign:"top",alignItems:"stretch",width:"100%",borderRadius:"inherit",position:"relative",fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.m,lineHeight:theme.variables.size.lineHeight.xl,"&::after":{content:"attr(data-value) ' '",boxSizing:"border-box",fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.m,gridArea:"1 / 1",whiteSpace:"pre-wrap",visibility:"hidden",maxHeight:maxTextAreaHeight},textarea:{all:"unset",resize:"none",gridArea:"1 / 1",cursor:"text",color:theme.values.color.text.primary.default,...getInputTextPlaceholder({theme})},"textarea::placeholder":{whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden"},"&::after, textarea":{minWidth:"0",overflowWrap:"break-word",padding:`${paddingTop} ${paddingRight} ${paddingBottom} ${paddingLeft}`}}},"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvUHJvbXB0SW5wdXQvUHJvbXB0VGV4dEFyZWEudHN4Iiwic291cmNlcyI6WyJzcmMvY29tcG9uZW50cy9Qcm9tcHRJbnB1dC9Qcm9tcHRUZXh0QXJlYS50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBSZWZPYmplY3QsIFRleHRhcmVhSFRNTEF0dHJpYnV0ZXMgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgdHlwZSB7IFRoZW1lIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB0eXBlIHsgUHJvcGVydHkgfSBmcm9tIFwiY3NzdHlwZVwiO1xuaW1wb3J0IHR5cGUgeyBQcm9tcHRJbnB1dFNpemVzIH0gZnJvbSBcInNyYy90eXBlc1wiO1xuaW1wb3J0IHsgZ2V0SW5wdXRUZXh0UGxhY2Vob2xkZXIgfSBmcm9tIFwiLi4vLi4vc2hhcmVkL21peGlucy9UZXh0SW5wdXQvZ2V0SW5wdXRUZXh0UGxhY2Vob2xkZXJcIjtcbmltcG9ydCB7IFNjcmVlblJlYWRlclRleHQgfSBmcm9tIFwiLi4vVXRpbGl0aWVzL1NjcmVlblJlYWRlclRleHQvU2NyZWVuUmVhZGVyVGV4dFwiO1xuaW1wb3J0IHsgZ2V0QXV0b2NvbXBsZXRlTGlzdElkIH0gZnJvbSBcIi4vQXV0b2NvbXBsZXRlTGlzdFwiO1xuaW1wb3J0IHR5cGUgeyBGbGF0dGVuZWRMaXN0SXRlbSB9IGZyb20gXCIuL0NhdGVnb3J5TGlzdFwiO1xuXG5leHBvcnQgY29uc3QgZ2V0UGFkZGluZ0hvcml6b250YWwgPSAoXG4gIHRoZW1lOiBUaGVtZSxcbiAgc2l6ZTogUHJvbXB0SW5wdXRTaXplc1xuKTogc3RyaW5nID0+IHtcbiAgaWYgKHNpemUgPT09IFwic1wiKSByZXR1cm4gdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy5zO1xuICByZXR1cm4gdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy5tO1xufTtcbmV4cG9ydCBjb25zdCBnZXRQYWRkaW5nVmVydGljYWwgPSAoXG4gIHRoZW1lOiBUaGVtZSxcbiAgc2l6ZTogUHJvbXB0SW5wdXRTaXplc1xuKTogc3RyaW5nID0+IHtcbiAgaWYgKHNpemUgPT09IFwic1wiKSByZXR1cm4gdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy54cztcbiAgcmV0dXJuIHRoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcubTtcbn07XG5cbmV4cG9ydCB0eXBlIFByb21wdFRleHRBcmVhUHJvcHMgPVxuICBUZXh0YXJlYUhUTUxBdHRyaWJ1dGVzPEhUTUxUZXh0QXJlYUVsZW1lbnQ+ICYge1xuICAgIGRhdGFFMmVUZXN0SWQ/OiBzdHJpbmc7XG4gICAgbGFiZWw6IHN0cmluZztcbiAgICBuYW1lOiBzdHJpbmc7XG4gICAgdmFsdWU6IHN0cmluZztcbiAgICBtYXhUZXh0QXJlYUhlaWdodD86IFByb3BlcnR5LkhlaWdodDtcbiAgICBzZWxlY3RlZExpc3RJdGVtPzogRmxhdHRlbmVkTGlzdEl0ZW07XG4gICAgaXNBdXRvY29tcGxldGVMaXN0T3Blbj86IGJvb2xlYW47XG4gICAgaGFzTGVmdEljb24/OiBib29sZWFuO1xuICAgIHJvd3M/OiBudW1iZXI7XG4gICAgc2l6ZTogUHJvbXB0SW5wdXRTaXplcztcbiAgfTtcblxudHlwZSBTdHlsZWRUZXh0QXJlYUNvbnRhaW5lclByb3BzID0gUGljazxcbiAgUHJvbXB0VGV4dEFyZWFQcm9wcyxcbiAgXCJtYXhUZXh0QXJlYUhlaWdodFwiIHwgXCJoYXNMZWZ0SWNvblwiIHwgXCJzaXplXCJcbj47XG5cbi8vIFRleHRhcmVhIGF1dG8gZ3JvdyBpbXBsZW1lbnRlZCBhY2NvcmRpbmcgdG8gaHR0cHM6Ly9jc3MtdHJpY2tzLmNvbS90aGUtY2xlYW5lc3QtdHJpY2stZm9yLWF1dG9ncm93aW5nLXRleHRhcmVhcy9cblxuY29uc3QgU3R5bGVkVGV4dEFyZWFDb250YWluZXIgPSBzdHlsZWQubGFiZWw8U3R5bGVkVGV4dEFyZWFDb250YWluZXJQcm9wcz4oXG4gICh7IHRoZW1lLCBtYXhUZXh0QXJlYUhlaWdodCwgaGFzTGVmdEljb24sIHNpemUgfSkgPT4ge1xuICAgIGNvbnN0IHBhZGRpbmdUb3AgPSBnZXRQYWRkaW5nVmVydGljYWwodGhlbWUsIHNpemUpO1xuICAgIGNvbnN0IHBhZGRpbmdCb3R0b20gPSBnZXRQYWRkaW5nVmVydGljYWwodGhlbWUsIHNpemUpO1xuICAgIGNvbnN0IGljb25UZXh0R2FwID1cbiAgICAgIHNpemUgPT09IFwic1wiXG4gICAgICAgID8gYGNhbGMoJHt0aGVtZS52YXJpYWJsZXMuc2l6ZS5zcGFjaW5nLnhzfSAtICR7dGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy54eHhzfSlgXG4gICAgICAgIDogdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy54cztcbiAgICBjb25zdCBiYXNlUGFkZGluZ0hvcml6b250YWwgPSBnZXRQYWRkaW5nSG9yaXpvbnRhbCh0aGVtZSwgc2l6ZSk7XG4gICAgY29uc3QgcGFkZGluZ1JpZ2h0ID0gYGNhbGMoJHtiYXNlUGFkZGluZ0hvcml6b250YWx9ICsgJHt0aGVtZS52YXJpYWJsZXMuc2l6ZS5kaW1lbnNpb24uaWNvbi5tfSArICR7aWNvblRleHRHYXB9KWA7XG4gICAgY29uc3QgcGFkZGluZ0xlZnQgPSBoYXNMZWZ0SWNvblxuICAgICAgPyBgY2FsYygke2Jhc2VQYWRkaW5nSG9yaXpvbnRhbH0gKyAke3RoZW1lLnZhcmlhYmxlcy5zaXplLmRpbWVuc2lvbi5pY29uW3NpemVdfSArICR7aWNvblRleHRHYXB9KWBcbiAgICAgIDogYmFzZVBhZGRpbmdIb3Jpem9udGFsO1xuXG4gICAgcmV0dXJuIHtcbiAgICAgIGRpc3BsYXk6IFwiZ3JpZFwiLFxuICAgICAgdmVydGljYWxBbGlnbjogXCJ0b3BcIixcbiAgICAgIGFsaWduSXRlbXM6IFwic3RyZXRjaFwiLFxuICAgICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgICAgYm9yZGVyUmFkaXVzOiBcImluaGVyaXRcIixcbiAgICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgICBmb250RmFtaWx5OiB0aGVtZS52YXJpYWJsZXMuZm9udEZhbWlseS5sYXRvLFxuICAgICAgZm9udFNpemU6IHRoZW1lLnZhcmlhYmxlcy5zaXplLmZvbnQubSxcbiAgICAgIGxpbmVIZWlnaHQ6IHRoZW1lLnZhcmlhYmxlcy5zaXplLmxpbmVIZWlnaHQueGwsXG5cbiAgICAgIC8vIFRleHRhcmVhIGdyb3dzIGR1ZSB0byA6OmFmdGVyIGdyb3dzXG4gICAgICAvLyBpZiB5b3UgbmVlZCB0byBtYW5pcHVsYXRlIHdpdGggc2l6ZSBvZiB0ZXh0YXJlYSwgeW91IG5lZWQgdG8gbWFuaXB1bGF0ZSB3aXRoIDo6YWZ0ZXIgYWxzb1xuICAgICAgXCImOjphZnRlclwiOiB7XG4gICAgICAgIGNvbnRlbnQ6IFwiYXR0cihkYXRhLXZhbHVlKSAnICdcIiwgLy8gdGhlIGVtcHR5IHNwYWNlIHByZXZlbnRzIHRleHRhcmVhIGp1bXAgb24gZ3Jvd1xuICAgICAgICBib3hTaXppbmc6IFwiYm9yZGVyLWJveFwiLFxuICAgICAgICBmb250RmFtaWx5OiB0aGVtZS52YXJpYWJsZXMuZm9udEZhbWlseS5sYXRvLFxuICAgICAgICBmb250U2l6ZTogdGhlbWUudmFyaWFibGVzLnNpemUuZm9udC5tLFxuICAgICAgICBncmlkQXJlYTogXCIxIC8gMVwiLFxuICAgICAgICB3aGl0ZVNwYWNlOiBcInByZS13cmFwXCIsXG4gICAgICAgIHZpc2liaWxpdHk6IFwiaGlkZGVuXCIsXG4gICAgICAgIG1heEhlaWdodDogbWF4VGV4dEFyZWFIZWlnaHQsXG4gICAgICB9LFxuXG4gICAgICB0ZXh0YXJlYToge1xuICAgICAgICBhbGw6IFwidW5zZXRcIixcbiAgICAgICAgcmVzaXplOiBcIm5vbmVcIixcbiAgICAgICAgZ3JpZEFyZWE6IFwiMSAvIDFcIixcbiAgICAgICAgY3Vyc29yOiBcInRleHRcIixcbiAgICAgICAgY29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci50ZXh0LnByaW1hcnkuZGVmYXVsdCxcbiAgICAgICAgLi4uZ2V0SW5wdXRUZXh0UGxhY2Vob2xkZXIoeyB0aGVtZSB9KSxcbiAgICAgIH0sXG4gICAgICBcInRleHRhcmVhOjpwbGFjZWhvbGRlclwiOiB7XG4gICAgICAgIHdoaXRlU3BhY2U6IFwibm93cmFwXCIsXG4gICAgICAgIHRleHRPdmVyZmxvdzogXCJlbGxpcHNpc1wiLFxuICAgICAgICBvdmVyZmxvdzogXCJoaWRkZW5cIixcbiAgICAgIH0sXG5cbiAgICAgIFwiJjo6YWZ0ZXIsIHRleHRhcmVhXCI6IHtcbiAgICAgICAgLy8gbWluV2lkdGggY29tZXMgdG9nZXRoZXIgd2l0aCBvdmVyZmxvd1dyYXAgdG8gYWNoaWV2ZSBicmVhay13b3JkXG4gICAgICAgIC8vIGl0IHNob3VsZCBiZSBhcHBsaWVkIGZvciA6OmFmdGVyIGFuZCB0ZXh0YXJlYVxuICAgICAgICBtaW5XaWR0aDogXCIwXCIsXG4gICAgICAgIG92ZXJmbG93V3JhcDogXCJicmVhay13b3JkXCIsXG4gICAgICAgIHBhZGRpbmc6IGAke3BhZGRpbmdUb3B9ICR7cGFkZGluZ1JpZ2h0fSAke3BhZGRpbmdCb3R0b219ICR7cGFkZGluZ0xlZnR9YCxcbiAgICAgIH0sXG4gICAgfTtcbiAgfVxuKTtcblxuZXhwb3J0IGNvbnN0IFByb21wdFRleHRBcmVhID0gZm9yd2FyZFJlZihcbiAgKFxuICAgIHtcbiAgICAgIGRhdGFFMmVUZXN0SWQsXG4gICAgICBsYWJlbCxcbiAgICAgIG5hbWUsXG4gICAgICB2YWx1ZSxcbiAgICAgIHBsYWNlaG9sZGVyLFxuICAgICAgbWF4VGV4dEFyZWFIZWlnaHQgPSBcIjIwMHB4XCIsXG4gICAgICBzZWxlY3RlZExpc3RJdGVtLFxuICAgICAgaXNBdXRvY29tcGxldGVMaXN0T3BlbixcbiAgICAgIGhhc0xlZnRJY29uLFxuICAgICAgcm93cyA9IDEsXG4gICAgICBzaXplLFxuICAgICAgb25DaGFuZ2UsXG4gICAgICByb2xlLFxuICAgICAgLi4ucmVzdFxuICAgIH06IFByb21wdFRleHRBcmVhUHJvcHMsXG4gICAgcmVmOiBSZWZPYmplY3Q8SFRNTFRleHRBcmVhRWxlbWVudD5cbiAgKSA9PiAoXG4gICAgPFN0eWxlZFRleHRBcmVhQ29udGFpbmVyXG4gICAgICBtYXhUZXh0QXJlYUhlaWdodD17bWF4VGV4dEFyZWFIZWlnaHR9XG4gICAgICBoYXNMZWZ0SWNvbj17aGFzTGVmdEljb259XG4gICAgICBzaXplPXtzaXplfVxuICAgICAgZGF0YS12YWx1ZT17dmFsdWV9XG4gICAgPlxuICAgICAgPFNjcmVlblJlYWRlclRleHQ+e2xhYmVsfTwvU2NyZWVuUmVhZGVyVGV4dD5cbiAgICAgIDx0ZXh0YXJlYVxuICAgICAgICB7Li4ucmVzdH1cbiAgICAgICAgZGF0YS1lMmUtdGVzdC1pZD17ZGF0YUUyZVRlc3RJZH1cbiAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgIG5hbWU9e25hbWV9XG4gICAgICAgIHZhbHVlPXt2YWx1ZX1cbiAgICAgICAgcGxhY2Vob2xkZXI9e3BsYWNlaG9sZGVyfVxuICAgICAgICBvbkNoYW5nZT17b25DaGFuZ2V9XG4gICAgICAgIHJvd3M9e3Jvd3N9XG4gICAgICAgIHJvbGU9e3JvbGUgPz8gXCJjb21ib2JveFwifVxuICAgICAgICBhcmlhLWF1dG9jb21wbGV0ZT1cImxpc3RcIlxuICAgICAgICBhcmlhLWNvbnRyb2xzPXtcbiAgICAgICAgICBpc0F1dG9jb21wbGV0ZUxpc3RPcGVuID8gZ2V0QXV0b2NvbXBsZXRlTGlzdElkKG5hbWUpIDogXCJcIlxuICAgICAgICB9XG4gICAgICAgIGFyaWEtYWN0aXZlZGVzY2VuZGFudD17c2VsZWN0ZWRMaXN0SXRlbSA/IHNlbGVjdGVkTGlzdEl0ZW0uaWQgOiBcIlwifVxuICAgICAgICBhcmlhLWV4cGFuZGVkPXtpc0F1dG9jb21wbGV0ZUxpc3RPcGVufVxuICAgICAgLz5cbiAgICA8L1N0eWxlZFRleHRBcmVhQ29udGFpbmVyPlxuICApXG4pO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStDZ0MifQ== */");export const PromptTextArea=forwardRef(({dataE2eTestId,label,name,value,placeholder,maxTextAreaHeight="200px",selectedListItem,isAutocompleteListOpen,hasLeftIcon,rows=1,size,onChange,role,...rest},ref)=>React.createElement(StyledTextAreaContainer,{maxTextAreaHeight:maxTextAreaHeight,hasLeftIcon:hasLeftIcon,size:size,"data-value":value},React.createElement(ScreenReaderText,null,label),React.createElement("textarea",{...rest,"data-e2e-test-id":dataE2eTestId,ref:ref,name:name,value:value,placeholder:placeholder,onChange:onChange,rows:rows,role:role??"combobox","aria-autocomplete":"list","aria-controls":isAutocompleteListOpen?getAutocompleteListId(name):"","aria-activedescendant":selectedListItem?selectedListItem.id:"","aria-expanded":isAutocompleteListOpen})));
|
|
1
|
+
import React,{forwardRef,useEffect}from"react";import styled from"@emotion/styled";import{getInputTextPlaceholder}from"../../shared/mixins/TextInput/getInputTextPlaceholder";import{ScreenReaderText}from"../Utilities/ScreenReaderText/ScreenReaderText";import{getAutocompleteListId}from"./AutocompleteList";export const getPaddingHorizontal=(theme,size)=>"s"===size?theme.variables.size.spacing.s:theme.variables.size.spacing.m;export const getPaddingVertical=(theme,size)=>"s"===size?theme.variables.size.spacing.xs:theme.variables.size.spacing.m;let StyledTextAreaContainer=styled("label",{target:"e1584yv0",label:"StyledTextAreaContainer"})(({theme,maxTextAreaHeight,hasLeftIcon,size})=>{let paddingTop=getPaddingVertical(theme,size),paddingBottom=getPaddingVertical(theme,size),iconTextGap="s"===size?`calc(${theme.variables.size.spacing.xs} - ${theme.variables.size.spacing.xxxs})`:theme.variables.size.spacing.xs,basePaddingHorizontal=getPaddingHorizontal(theme,size),paddingRight=`calc(${basePaddingHorizontal} + ${theme.variables.size.dimension.icon.m} + ${iconTextGap})`,paddingLeft=hasLeftIcon?`calc(${basePaddingHorizontal} + ${theme.variables.size.dimension.icon[size]} + ${iconTextGap})`:basePaddingHorizontal;return{display:"grid",verticalAlign:"top",alignItems:"stretch",width:"100%",borderRadius:"inherit",position:"relative",fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.m,lineHeight:theme.variables.size.lineHeight.xl,"&::after":{content:"attr(data-value) ' '",boxSizing:"border-box",fontFamily:theme.variables.fontFamily.lato,fontSize:theme.variables.size.font.m,gridArea:"1 / 1",whiteSpace:"pre-wrap",visibility:"hidden",maxHeight:maxTextAreaHeight},textarea:{all:"unset",resize:"none",gridArea:"1 / 1",cursor:"text",color:theme.values.color.text.primary.default,...getInputTextPlaceholder({theme})},"textarea::placeholder":{whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden"},"&::after, textarea":{minWidth:"0",overflowWrap:"break-word",padding:`${paddingTop} ${paddingRight} ${paddingBottom} ${paddingLeft}`}}},"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvUHJvbXB0SW5wdXQvUHJvbXB0VGV4dEFyZWEudHN4Iiwic291cmNlcyI6WyJzcmMvY29tcG9uZW50cy9Qcm9tcHRJbnB1dC9Qcm9tcHRUZXh0QXJlYS50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBSZWZPYmplY3QsIFRleHRhcmVhSFRNTEF0dHJpYnV0ZXMgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmLCB1c2VFZmZlY3QgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB0eXBlIHsgVGhlbWUgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHR5cGUgeyBQcm9wZXJ0eSB9IGZyb20gXCJjc3N0eXBlXCI7XG5pbXBvcnQgdHlwZSB7IFByb21wdElucHV0U2l6ZXMgfSBmcm9tIFwic3JjL3R5cGVzXCI7XG5pbXBvcnQgeyBnZXRJbnB1dFRleHRQbGFjZWhvbGRlciB9IGZyb20gXCIuLi8uLi9zaGFyZWQvbWl4aW5zL1RleHRJbnB1dC9nZXRJbnB1dFRleHRQbGFjZWhvbGRlclwiO1xuaW1wb3J0IHsgU2NyZWVuUmVhZGVyVGV4dCB9IGZyb20gXCIuLi9VdGlsaXRpZXMvU2NyZWVuUmVhZGVyVGV4dC9TY3JlZW5SZWFkZXJUZXh0XCI7XG5pbXBvcnQgeyBnZXRBdXRvY29tcGxldGVMaXN0SWQgfSBmcm9tIFwiLi9BdXRvY29tcGxldGVMaXN0XCI7XG5pbXBvcnQgdHlwZSB7IEZsYXR0ZW5lZExpc3RJdGVtIH0gZnJvbSBcIi4vQ2F0ZWdvcnlMaXN0XCI7XG5cbmV4cG9ydCBjb25zdCBnZXRQYWRkaW5nSG9yaXpvbnRhbCA9IChcbiAgdGhlbWU6IFRoZW1lLFxuICBzaXplOiBQcm9tcHRJbnB1dFNpemVzXG4pOiBzdHJpbmcgPT4ge1xuICBpZiAoc2l6ZSA9PT0gXCJzXCIpIHJldHVybiB0aGVtZS52YXJpYWJsZXMuc2l6ZS5zcGFjaW5nLnM7XG4gIHJldHVybiB0aGVtZS52YXJpYWJsZXMuc2l6ZS5zcGFjaW5nLm07XG59O1xuZXhwb3J0IGNvbnN0IGdldFBhZGRpbmdWZXJ0aWNhbCA9IChcbiAgdGhlbWU6IFRoZW1lLFxuICBzaXplOiBQcm9tcHRJbnB1dFNpemVzXG4pOiBzdHJpbmcgPT4ge1xuICBpZiAoc2l6ZSA9PT0gXCJzXCIpIHJldHVybiB0aGVtZS52YXJpYWJsZXMuc2l6ZS5zcGFjaW5nLnhzO1xuICByZXR1cm4gdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy5tO1xufTtcblxuZXhwb3J0IHR5cGUgUHJvbXB0VGV4dEFyZWFQcm9wcyA9XG4gIFRleHRhcmVhSFRNTEF0dHJpYnV0ZXM8SFRNTFRleHRBcmVhRWxlbWVudD4gJiB7XG4gICAgZGF0YUUyZVRlc3RJZD86IHN0cmluZztcbiAgICBsYWJlbDogc3RyaW5nO1xuICAgIG5hbWU6IHN0cmluZztcbiAgICB2YWx1ZTogc3RyaW5nO1xuICAgIG1heFRleHRBcmVhSGVpZ2h0PzogUHJvcGVydHkuSGVpZ2h0O1xuICAgIHNlbGVjdGVkTGlzdEl0ZW0/OiBGbGF0dGVuZWRMaXN0SXRlbTtcbiAgICBpc0F1dG9jb21wbGV0ZUxpc3RPcGVuPzogYm9vbGVhbjtcbiAgICBoYXNMZWZ0SWNvbj86IGJvb2xlYW47XG4gICAgcm93cz86IG51bWJlcjtcbiAgICBzaXplOiBQcm9tcHRJbnB1dFNpemVzO1xuICB9O1xuXG50eXBlIFN0eWxlZFRleHRBcmVhQ29udGFpbmVyUHJvcHMgPSBQaWNrPFxuICBQcm9tcHRUZXh0QXJlYVByb3BzLFxuICBcIm1heFRleHRBcmVhSGVpZ2h0XCIgfCBcImhhc0xlZnRJY29uXCIgfCBcInNpemVcIlxuPjtcblxuLy8gVGV4dGFyZWEgYXV0byBncm93IGltcGxlbWVudGVkIGFjY29yZGluZyB0byBodHRwczovL2Nzcy10cmlja3MuY29tL3RoZS1jbGVhbmVzdC10cmljay1mb3ItYXV0b2dyb3dpbmctdGV4dGFyZWFzL1xuXG5jb25zdCBTdHlsZWRUZXh0QXJlYUNvbnRhaW5lciA9IHN0eWxlZC5sYWJlbDxTdHlsZWRUZXh0QXJlYUNvbnRhaW5lclByb3BzPihcbiAgKHsgdGhlbWUsIG1heFRleHRBcmVhSGVpZ2h0LCBoYXNMZWZ0SWNvbiwgc2l6ZSB9KSA9PiB7XG4gICAgY29uc3QgcGFkZGluZ1RvcCA9IGdldFBhZGRpbmdWZXJ0aWNhbCh0aGVtZSwgc2l6ZSk7XG4gICAgY29uc3QgcGFkZGluZ0JvdHRvbSA9IGdldFBhZGRpbmdWZXJ0aWNhbCh0aGVtZSwgc2l6ZSk7XG4gICAgY29uc3QgaWNvblRleHRHYXAgPVxuICAgICAgc2l6ZSA9PT0gXCJzXCJcbiAgICAgICAgPyBgY2FsYygke3RoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcueHN9IC0gJHt0aGVtZS52YXJpYWJsZXMuc2l6ZS5zcGFjaW5nLnh4eHN9KWBcbiAgICAgICAgOiB0aGVtZS52YXJpYWJsZXMuc2l6ZS5zcGFjaW5nLnhzO1xuICAgIGNvbnN0IGJhc2VQYWRkaW5nSG9yaXpvbnRhbCA9IGdldFBhZGRpbmdIb3Jpem9udGFsKHRoZW1lLCBzaXplKTtcbiAgICBjb25zdCBwYWRkaW5nUmlnaHQgPSBgY2FsYygke2Jhc2VQYWRkaW5nSG9yaXpvbnRhbH0gKyAke3RoZW1lLnZhcmlhYmxlcy5zaXplLmRpbWVuc2lvbi5pY29uLm19ICsgJHtpY29uVGV4dEdhcH0pYDtcbiAgICBjb25zdCBwYWRkaW5nTGVmdCA9IGhhc0xlZnRJY29uXG4gICAgICA/IGBjYWxjKCR7YmFzZVBhZGRpbmdIb3Jpem9udGFsfSArICR7dGhlbWUudmFyaWFibGVzLnNpemUuZGltZW5zaW9uLmljb25bc2l6ZV19ICsgJHtpY29uVGV4dEdhcH0pYFxuICAgICAgOiBiYXNlUGFkZGluZ0hvcml6b250YWw7XG5cbiAgICByZXR1cm4ge1xuICAgICAgZGlzcGxheTogXCJncmlkXCIsXG4gICAgICB2ZXJ0aWNhbEFsaWduOiBcInRvcFwiLFxuICAgICAgYWxpZ25JdGVtczogXCJzdHJldGNoXCIsXG4gICAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgICBib3JkZXJSYWRpdXM6IFwiaW5oZXJpdFwiLFxuICAgICAgcG9zaXRpb246IFwicmVsYXRpdmVcIixcbiAgICAgIGZvbnRGYW1pbHk6IHRoZW1lLnZhcmlhYmxlcy5mb250RmFtaWx5LmxhdG8sXG4gICAgICBmb250U2l6ZTogdGhlbWUudmFyaWFibGVzLnNpemUuZm9udC5tLFxuICAgICAgbGluZUhlaWdodDogdGhlbWUudmFyaWFibGVzLnNpemUubGluZUhlaWdodC54bCxcblxuICAgICAgLy8gVGV4dGFyZWEgZ3Jvd3MgZHVlIHRvIDo6YWZ0ZXIgZ3Jvd3NcbiAgICAgIC8vIGlmIHlvdSBuZWVkIHRvIG1hbmlwdWxhdGUgd2l0aCBzaXplIG9mIHRleHRhcmVhLCB5b3UgbmVlZCB0byBtYW5pcHVsYXRlIHdpdGggOjphZnRlciBhbHNvXG4gICAgICBcIiY6OmFmdGVyXCI6IHtcbiAgICAgICAgY29udGVudDogXCJhdHRyKGRhdGEtdmFsdWUpICcgJ1wiLCAvLyB0aGUgZW1wdHkgc3BhY2UgcHJldmVudHMgdGV4dGFyZWEganVtcCBvbiBncm93XG4gICAgICAgIGJveFNpemluZzogXCJib3JkZXItYm94XCIsXG4gICAgICAgIGZvbnRGYW1pbHk6IHRoZW1lLnZhcmlhYmxlcy5mb250RmFtaWx5LmxhdG8sXG4gICAgICAgIGZvbnRTaXplOiB0aGVtZS52YXJpYWJsZXMuc2l6ZS5mb250Lm0sXG4gICAgICAgIGdyaWRBcmVhOiBcIjEgLyAxXCIsXG4gICAgICAgIHdoaXRlU3BhY2U6IFwicHJlLXdyYXBcIixcbiAgICAgICAgdmlzaWJpbGl0eTogXCJoaWRkZW5cIixcbiAgICAgICAgbWF4SGVpZ2h0OiBtYXhUZXh0QXJlYUhlaWdodCxcbiAgICAgIH0sXG5cbiAgICAgIHRleHRhcmVhOiB7XG4gICAgICAgIGFsbDogXCJ1bnNldFwiLFxuICAgICAgICByZXNpemU6IFwibm9uZVwiLFxuICAgICAgICBncmlkQXJlYTogXCIxIC8gMVwiLFxuICAgICAgICBjdXJzb3I6IFwidGV4dFwiLFxuICAgICAgICBjb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLnRleHQucHJpbWFyeS5kZWZhdWx0LFxuICAgICAgICAuLi5nZXRJbnB1dFRleHRQbGFjZWhvbGRlcih7IHRoZW1lIH0pLFxuICAgICAgfSxcbiAgICAgIFwidGV4dGFyZWE6OnBsYWNlaG9sZGVyXCI6IHtcbiAgICAgICAgd2hpdGVTcGFjZTogXCJub3dyYXBcIixcbiAgICAgICAgdGV4dE92ZXJmbG93OiBcImVsbGlwc2lzXCIsXG4gICAgICAgIG92ZXJmbG93OiBcImhpZGRlblwiLFxuICAgICAgfSxcblxuICAgICAgXCImOjphZnRlciwgdGV4dGFyZWFcIjoge1xuICAgICAgICAvLyBtaW5XaWR0aCBjb21lcyB0b2dldGhlciB3aXRoIG92ZXJmbG93V3JhcCB0byBhY2hpZXZlIGJyZWFrLXdvcmRcbiAgICAgICAgLy8gaXQgc2hvdWxkIGJlIGFwcGxpZWQgZm9yIDo6YWZ0ZXIgYW5kIHRleHRhcmVhXG4gICAgICAgIG1pbldpZHRoOiBcIjBcIixcbiAgICAgICAgb3ZlcmZsb3dXcmFwOiBcImJyZWFrLXdvcmRcIixcbiAgICAgICAgcGFkZGluZzogYCR7cGFkZGluZ1RvcH0gJHtwYWRkaW5nUmlnaHR9ICR7cGFkZGluZ0JvdHRvbX0gJHtwYWRkaW5nTGVmdH1gLFxuICAgICAgfSxcbiAgICB9O1xuICB9XG4pO1xuXG5leHBvcnQgY29uc3QgUHJvbXB0VGV4dEFyZWEgPSBmb3J3YXJkUmVmKFxuICAoXG4gICAge1xuICAgICAgZGF0YUUyZVRlc3RJZCxcbiAgICAgIGxhYmVsLFxuICAgICAgbmFtZSxcbiAgICAgIHZhbHVlLFxuICAgICAgcGxhY2Vob2xkZXIsXG4gICAgICBtYXhUZXh0QXJlYUhlaWdodCA9IFwiMjAwcHhcIixcbiAgICAgIHNlbGVjdGVkTGlzdEl0ZW0sXG4gICAgICBpc0F1dG9jb21wbGV0ZUxpc3RPcGVuLFxuICAgICAgaGFzTGVmdEljb24sXG4gICAgICByb3dzID0gMSxcbiAgICAgIHNpemUsXG4gICAgICBvbkNoYW5nZSxcbiAgICAgIHJvbGUsXG4gICAgICAuLi5yZXN0XG4gICAgfTogUHJvbXB0VGV4dEFyZWFQcm9wcyxcbiAgICByZWY6IFJlZk9iamVjdDxIVE1MVGV4dEFyZWFFbGVtZW50PlxuICApID0+IHtcbiAgICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgICAgY29uc3QgdGV4dEFyZWEgPSByZWYuY3VycmVudDtcblxuICAgICAgLy8gU2V0IHRoZSB2YWx1ZSBvZiB0aGUgOjphZnRlciBwc2V1ZG8gZWxlbWVudCBzbyB0aGF0IHRoZSBUZXh0QXJlYSByZXNpemVzIGFjY29yZGluZ2x5IGFzIHRoZSBncmlkIHN0cmV0Y2hlcy5cbiAgICAgICh0ZXh0QXJlYS5wYXJlbnROb2RlIGFzIEhUTUxFbGVtZW50KS5kYXRhc2V0LnZhbHVlID0gdmFsdWU7XG4gICAgfSwgW3ZhbHVlLCByZWZdKTtcblxuICAgIHJldHVybiAoXG4gICAgICA8U3R5bGVkVGV4dEFyZWFDb250YWluZXJcbiAgICAgICAgbWF4VGV4dEFyZWFIZWlnaHQ9e21heFRleHRBcmVhSGVpZ2h0fVxuICAgICAgICBoYXNMZWZ0SWNvbj17aGFzTGVmdEljb259XG4gICAgICAgIHNpemU9e3NpemV9XG4gICAgICA+XG4gICAgICAgIDxTY3JlZW5SZWFkZXJUZXh0PntsYWJlbH08L1NjcmVlblJlYWRlclRleHQ+XG4gICAgICAgIDx0ZXh0YXJlYVxuICAgICAgICAgIHsuLi5yZXN0fVxuICAgICAgICAgIGRhdGEtZTJlLXRlc3QtaWQ9e2RhdGFFMmVUZXN0SWR9XG4gICAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgICAgbmFtZT17bmFtZX1cbiAgICAgICAgICB2YWx1ZT17dmFsdWV9XG4gICAgICAgICAgcGxhY2Vob2xkZXI9e3BsYWNlaG9sZGVyfVxuICAgICAgICAgIG9uQ2hhbmdlPXtvbkNoYW5nZX1cbiAgICAgICAgICByb3dzPXtyb3dzfVxuICAgICAgICAgIHJvbGU9e3JvbGUgPz8gXCJjb21ib2JveFwifVxuICAgICAgICAgIGFyaWEtYXV0b2NvbXBsZXRlPVwibGlzdFwiXG4gICAgICAgICAgYXJpYS1jb250cm9scz17XG4gICAgICAgICAgICBpc0F1dG9jb21wbGV0ZUxpc3RPcGVuID8gZ2V0QXV0b2NvbXBsZXRlTGlzdElkKG5hbWUpIDogXCJcIlxuICAgICAgICAgIH1cbiAgICAgICAgICBhcmlhLWFjdGl2ZWRlc2NlbmRhbnQ9e3NlbGVjdGVkTGlzdEl0ZW0gPyBzZWxlY3RlZExpc3RJdGVtLmlkIDogXCJcIn1cbiAgICAgICAgICBhcmlhLWV4cGFuZGVkPXtpc0F1dG9jb21wbGV0ZUxpc3RPcGVufVxuICAgICAgICAvPlxuICAgICAgPC9TdHlsZWRUZXh0QXJlYUNvbnRhaW5lcj5cbiAgICApO1xuICB9XG4pO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStDZ0MifQ== */");export const PromptTextArea=forwardRef(({dataE2eTestId,label,name,value,placeholder,maxTextAreaHeight="200px",selectedListItem,isAutocompleteListOpen,hasLeftIcon,rows=1,size,onChange,role,...rest},ref)=>(useEffect(()=>{ref.current.parentNode.dataset.value=value},[value,ref]),React.createElement(StyledTextAreaContainer,{maxTextAreaHeight:maxTextAreaHeight,hasLeftIcon:hasLeftIcon,size:size},React.createElement(ScreenReaderText,null,label),React.createElement("textarea",{...rest,"data-e2e-test-id":dataE2eTestId,ref:ref,name:name,value:value,placeholder:placeholder,onChange:onChange,rows:rows,role:role??"combobox","aria-autocomplete":"list","aria-controls":isAutocompleteListOpen?getAutocompleteListId(name):"","aria-activedescendant":selectedListItem?selectedListItem.id:"","aria-expanded":isAutocompleteListOpen}))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useState,useCallback}from"react";import{useTheme}from"@emotion/react";import{
|
|
1
|
+
import{useState,useCallback,useLayoutEffect}from"react";import{useTheme}from"@emotion/react";import{getAutocompleteListStyle}from"./getAutocompleteListStyle";import{useWindow}from"../../shared/useWindow";import{useDocument}from"../../shared/useDocument";export function useAutocompleteListPosition({triggerRef,menuRef,isOpen}){let document=useDocument(),window=useWindow(),theme=useTheme(),[listStyle,setListStyle]=useState({left:0,top:0,width:0}),calculateStyle=useCallback(()=>{triggerRef.current&&menuRef.current&&setListStyle(getAutocompleteListStyle({theme,triggerRef,menuRef,document,window}))},[theme,triggerRef,menuRef,document,window]);return useLayoutEffect(()=>{let handleScrollEvent=evt=>{menuRef.current&&menuRef.current.contains(evt.target)||calculateStyle()};return isOpen&&(calculateStyle(),window.addEventListener("resize",calculateStyle),window.addEventListener("scroll",handleScrollEvent,!0)),()=>{window.removeEventListener("resize",calculateStyle),window.removeEventListener("scroll",handleScrollEvent,!0)}},[isOpen,calculateStyle,window,menuRef]),{listStyle,calculateStyle}}
|