@primer/react 38.0.0-rc.5 → 38.0.0-rc.7
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/CHANGELOG.md +53 -0
- package/dist/ActionBar/ActionBar.d.ts +15 -1
- package/dist/ActionBar/ActionBar.d.ts.map +1 -1
- package/dist/ActionBar/ActionBar.js +381 -217
- package/dist/ActionBar/index.d.ts +1 -1
- package/dist/ActionList/Description.d.ts +4 -3
- package/dist/ActionList/Description.d.ts.map +1 -1
- package/dist/ActionList/Description.js +5 -5
- package/dist/ActionList/Divider.d.ts +5 -4
- package/dist/ActionList/Divider.d.ts.map +1 -1
- package/dist/ActionList/Divider.js +6 -7
- package/dist/ActionList/Group.d.ts +4 -5
- package/dist/ActionList/Group.d.ts.map +1 -1
- package/dist/ActionList/Group.js +9 -16
- package/dist/ActionList/Heading.d.ts +3 -2
- package/dist/ActionList/Heading.d.ts.map +1 -1
- package/dist/ActionList/Heading.js +1 -0
- package/dist/ActionList/Item.d.ts +5 -2
- package/dist/ActionList/Item.d.ts.map +1 -1
- package/dist/ActionList/Item.js +4 -8
- package/dist/ActionList/LinkItem.d.ts +1 -1
- package/dist/ActionList/LinkItem.d.ts.map +1 -1
- package/dist/ActionList/LinkItem.js +1 -2
- package/dist/ActionList/List.d.ts +1 -1
- package/dist/ActionList/List.d.ts.map +1 -1
- package/dist/ActionList/List.js +1 -3
- package/dist/ActionList/TrailingAction.d.ts +1 -0
- package/dist/ActionList/TrailingAction.d.ts.map +1 -1
- package/dist/ActionList/TrailingAction.js +3 -0
- package/dist/ActionList/Visuals.d.ts +4 -4
- package/dist/ActionList/Visuals.d.ts.map +1 -1
- package/dist/ActionList/Visuals.js +3 -3
- package/dist/ActionList/index.d.ts +12 -9
- package/dist/ActionList/index.d.ts.map +1 -1
- package/dist/ActionList/shared.d.ts +2 -3
- package/dist/ActionList/shared.d.ts.map +1 -1
- package/dist/ActionMenu/ActionMenu.d.ts +6 -5
- package/dist/ActionMenu/ActionMenu.d.ts.map +1 -1
- package/dist/ActionMenu/ActionMenu.js +11 -6
- package/dist/Autocomplete/Autocomplete.d.ts +6 -4
- package/dist/Autocomplete/Autocomplete.d.ts.map +1 -1
- package/dist/Autocomplete/Autocomplete.js +1 -0
- package/dist/Autocomplete/AutocompleteInput.js +1 -0
- package/dist/Autocomplete/AutocompleteMenu.d.ts +1 -0
- package/dist/Autocomplete/AutocompleteMenu.d.ts.map +1 -1
- package/dist/Autocomplete/AutocompleteMenu.js +1 -0
- package/dist/Autocomplete/AutocompleteOverlay.d.ts +1 -0
- package/dist/Autocomplete/AutocompleteOverlay.d.ts.map +1 -1
- package/dist/Autocomplete/AutocompleteOverlay.js +1 -0
- package/dist/AvatarStack/AvatarStack.d.ts.map +1 -1
- package/dist/AvatarStack/AvatarStack.js +1 -3
- package/dist/BranchName/BranchName.d.ts +9 -10
- package/dist/BranchName/BranchName.d.ts.map +1 -1
- package/dist/BranchName/BranchName.js +1 -8
- package/dist/Button/Button.d.ts +1 -5
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +2 -85
- package/dist/Button/ButtonBase.d.ts.map +1 -1
- package/dist/Button/ButtonBase.js +8 -93
- package/dist/Button/IconButton.d.ts.map +1 -1
- package/dist/Button/IconButton.js +0 -16
- package/dist/Button/LinkButton.d.ts +1 -1
- package/dist/Button/LinkButton.d.ts.map +1 -1
- package/dist/Button/types.d.ts +1 -3
- package/dist/Button/types.d.ts.map +1 -1
- package/dist/Checkbox/Checkbox.d.ts +3 -1
- package/dist/Checkbox/Checkbox.d.ts.map +1 -1
- package/dist/Checkbox/Checkbox.js +1 -0
- package/dist/CheckboxGroup/CheckboxGroup.d.ts +8 -7
- package/dist/CheckboxGroup/CheckboxGroup.d.ts.map +1 -1
- package/dist/CheckboxGroup/CheckboxGroup.js +4 -2
- package/dist/ConfirmationDialog/ConfirmationDialog-87ccf595.css +2 -0
- package/dist/ConfirmationDialog/ConfirmationDialog-87ccf595.css.map +1 -0
- package/dist/ConfirmationDialog/ConfirmationDialog.d.ts.map +1 -1
- package/dist/ConfirmationDialog/ConfirmationDialog.js +4 -1
- package/dist/ConfirmationDialog/ConfirmationDialog.module.css.js +1 -1
- package/dist/DataTable/Table.d.ts +3 -3
- package/dist/DataTable/Table.d.ts.map +1 -1
- package/dist/DataTable/Table.js +24 -19
- package/dist/FeatureFlags/DefaultFeatureFlags.d.ts.map +1 -1
- package/dist/FeatureFlags/DefaultFeatureFlags.js +2 -1
- package/dist/FilteredActionList/FilteredActionList-f6c2dc7a.css +2 -0
- package/dist/FilteredActionList/FilteredActionList-f6c2dc7a.css.map +1 -0
- package/dist/FilteredActionList/FilteredActionList.d.ts.map +1 -1
- package/dist/FilteredActionList/FilteredActionList.js +2 -7
- package/dist/FilteredActionList/FilteredActionList.module.css.js +2 -2
- package/dist/FilteredActionList/types.d.ts +5 -2
- package/dist/FilteredActionList/types.d.ts.map +1 -1
- package/dist/FormControl/FormControl.d.ts +8 -36
- package/dist/FormControl/FormControl.d.ts.map +1 -1
- package/dist/FormControl/FormControl.js +64 -66
- package/dist/FormControl/FormControlCaption.d.ts +6 -4
- package/dist/FormControl/FormControlCaption.d.ts.map +1 -1
- package/dist/FormControl/FormControlCaption.js +9 -13
- package/dist/FormControl/FormControlLabel.d.ts +3 -3
- package/dist/FormControl/FormControlLabel.d.ts.map +1 -1
- package/dist/FormControl/FormControlLabel.js +25 -31
- package/dist/FormControl/FormControlLeadingVisual-e217df71.css +2 -0
- package/dist/FormControl/FormControlLeadingVisual-e217df71.css.map +1 -0
- package/dist/FormControl/FormControlLeadingVisual.d.ts +2 -2
- package/dist/FormControl/FormControlLeadingVisual.d.ts.map +1 -1
- package/dist/FormControl/FormControlLeadingVisual.js +10 -17
- package/dist/FormControl/FormControlLeadingVisual.module.css.js +5 -0
- package/dist/FormControl/_FormControlContext.js +1 -1
- package/dist/FormControl/_FormControlValidation.d.ts +3 -3
- package/dist/FormControl/_FormControlValidation.d.ts.map +1 -1
- package/dist/FormControl/_FormControlValidation.js +7 -9
- package/dist/FormControl/index.d.ts +4 -0
- package/dist/FormControl/index.d.ts.map +1 -1
- package/dist/KeybindingHint/components/Chord-d4edcc89.css +2 -0
- package/dist/KeybindingHint/components/Chord-d4edcc89.css.map +1 -0
- package/dist/KeybindingHint/components/Chord.module.css.js +1 -1
- package/dist/LabelGroup/LabelGroup-7d19205a.css +2 -0
- package/dist/LabelGroup/LabelGroup-7d19205a.css.map +1 -0
- package/dist/LabelGroup/LabelGroup.d.ts.map +1 -1
- package/dist/LabelGroup/LabelGroup.js +14 -27
- package/dist/LabelGroup/LabelGroup.module.css.js +2 -2
- package/dist/NavList/NavList.d.ts +3 -3
- package/dist/NavList/NavList.d.ts.map +1 -1
- package/dist/NavList/NavList.js +2 -1
- package/dist/Octicon/Octicon.d.ts +7 -6
- package/dist/Octicon/Octicon.d.ts.map +1 -1
- package/dist/Octicon/Octicon.js +4 -23
- package/dist/Overlay/Overlay.d.ts.map +1 -1
- package/dist/Overlay/Overlay.js +63 -85
- package/dist/PageHeader/PageHeader.d.ts +3 -3
- package/dist/PageHeader/PageHeader.d.ts.map +1 -1
- package/dist/PageHeader/PageHeader.js +5 -2
- package/dist/PageLayout/{PageLayout-8a294e74.css → PageLayout-a276fa3b.css} +2 -2
- package/dist/PageLayout/PageLayout-a276fa3b.css.map +1 -0
- package/dist/PageLayout/PageLayout.d.ts +14 -58
- package/dist/PageLayout/PageLayout.d.ts.map +1 -1
- package/dist/PageLayout/PageLayout.js +216 -245
- package/dist/PageLayout/PageLayout.module.css.js +2 -2
- package/dist/Radio/Radio.d.ts +3 -1
- package/dist/Radio/Radio.d.ts.map +1 -1
- package/dist/Radio/Radio.js +1 -0
- package/dist/RadioGroup/RadioGroup.d.ts +6 -5
- package/dist/RadioGroup/RadioGroup.d.ts.map +1 -1
- package/dist/RadioGroup/RadioGroup.js +1 -0
- package/dist/SegmentedControl/SegmentedControl.d.ts +3 -2
- package/dist/SegmentedControl/SegmentedControl.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControl.js +11 -14
- package/dist/SegmentedControl/SegmentedControlButton.d.ts +2 -1
- package/dist/SegmentedControl/SegmentedControlButton.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControlButton.js +1 -0
- package/dist/SegmentedControl/SegmentedControlIconButton.d.ts +2 -1
- package/dist/SegmentedControl/SegmentedControlIconButton.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControlIconButton.js +1 -0
- package/dist/Select/Select.d.ts +1 -0
- package/dist/Select/Select.d.ts.map +1 -1
- package/dist/Select/Select.js +1 -0
- package/dist/SelectPanel/SelectPanel.d.ts +2 -1
- package/dist/SelectPanel/SelectPanel.d.ts.map +1 -1
- package/dist/SelectPanel/SelectPanel.js +1 -0
- package/dist/Skeleton/SkeletonBox.d.ts.map +1 -1
- package/dist/Skeleton/SkeletonBox.js +26 -20
- package/dist/SkeletonAvatar/SkeletonAvatar.d.ts.map +1 -1
- package/dist/SkeletonAvatar/SkeletonAvatar.js +53 -62
- package/dist/StateLabel/{StateLabel-aaa1d148.css → StateLabel-b586b0bc.css} +2 -2
- package/dist/StateLabel/StateLabel-b586b0bc.css.map +1 -0
- package/dist/StateLabel/StateLabel.d.ts.map +1 -1
- package/dist/StateLabel/StateLabel.js +28 -39
- package/dist/StateLabel/StateLabel.module.css.js +1 -1
- package/dist/SubNav/SubNav.d.ts +4 -1
- package/dist/SubNav/SubNav.d.ts.map +1 -1
- package/dist/SubNav/SubNav.js +3 -1
- package/dist/Text/Text.d.ts +16 -8
- package/dist/Text/Text.d.ts.map +1 -1
- package/dist/Text/Text.js +34 -31
- package/dist/TextInput/TextInput.d.ts +3 -2
- package/dist/TextInput/TextInput.d.ts.map +1 -1
- package/dist/TextInput/TextInput.js +2 -3
- package/dist/TextInput/index.d.ts +1 -0
- package/dist/TextInput/index.d.ts.map +1 -1
- package/dist/TextInputWithTokens/TextInputWithTokens.d.ts +3 -1
- package/dist/TextInputWithTokens/TextInputWithTokens.d.ts.map +1 -1
- package/dist/TextInputWithTokens/TextInputWithTokens.js +205 -211
- package/dist/Textarea/Textarea.d.ts +5 -4
- package/dist/Textarea/Textarea.d.ts.map +1 -1
- package/dist/Textarea/Textarea.js +40 -45
- package/dist/Tooltip/Tooltip-fffa9948.css +2 -0
- package/dist/Tooltip/Tooltip-fffa9948.css.map +1 -0
- package/dist/Tooltip/Tooltip.d.ts +6 -8
- package/dist/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/Tooltip/Tooltip.js +44 -118
- package/dist/Tooltip/Tooltip.module.css.js +5 -0
- package/dist/TooltipV2/Tooltip.d.ts +3 -16
- package/dist/TooltipV2/Tooltip.d.ts.map +1 -1
- package/dist/TooltipV2/Tooltip.js +1 -0
- package/dist/TreeView/TreeView.d.ts +4 -1
- package/dist/TreeView/TreeView.d.ts.map +1 -1
- package/dist/TreeView/TreeView.js +42 -9
- package/dist/Truncate/Truncate.d.ts +2 -2
- package/dist/Truncate/Truncate.d.ts.map +1 -1
- package/dist/UnderlineNav/UnderlineNav-4344d9b0.css +2 -0
- package/dist/UnderlineNav/UnderlineNav-4344d9b0.css.map +1 -0
- package/dist/UnderlineNav/UnderlineNav.d.ts +0 -1
- package/dist/UnderlineNav/UnderlineNav.d.ts.map +1 -1
- package/dist/UnderlineNav/UnderlineNav.js +45 -17
- package/dist/UnderlineNav/UnderlineNav.module.css.js +2 -2
- package/dist/UnderlineNav/UnderlineNavContext.d.ts +0 -2
- package/dist/UnderlineNav/UnderlineNavContext.d.ts.map +1 -1
- package/dist/UnderlineNav/UnderlineNavContext.js +0 -1
- package/dist/UnderlineNav/styles.d.ts +1 -23
- package/dist/UnderlineNav/styles.d.ts.map +1 -1
- package/dist/UnderlineNav/styles.js +4 -59
- package/dist/constants.js +3 -3
- package/dist/deprecated/ActionList/Divider-7c6b656a.css +2 -0
- package/dist/deprecated/ActionList/Divider-7c6b656a.css.map +1 -0
- package/dist/deprecated/ActionList/Divider.d.ts +1 -2
- package/dist/deprecated/ActionList/Divider.d.ts.map +1 -1
- package/dist/deprecated/ActionList/Divider.js +6 -12
- package/dist/deprecated/ActionList/Divider.module.css.js +5 -0
- package/dist/deprecated/ActionList/Group.d.ts +1 -2
- package/dist/deprecated/ActionList/Group.d.ts.map +1 -1
- package/dist/deprecated/ActionList/Group.js +1 -8
- package/dist/deprecated/ActionList/Header-493b1d76.css +2 -0
- package/dist/deprecated/ActionList/Header-493b1d76.css.map +1 -0
- package/dist/deprecated/ActionList/Header.d.ts +2 -6
- package/dist/deprecated/ActionList/Header.d.ts.map +1 -1
- package/dist/deprecated/ActionList/Header.js +46 -37
- package/dist/deprecated/ActionList/Header.module.css.js +5 -0
- package/dist/deprecated/ActionList/Item-cf87f98a.css +3 -0
- package/dist/deprecated/ActionList/Item-cf87f98a.css.map +1 -0
- package/dist/deprecated/ActionList/Item.d.ts +1 -5
- package/dist/deprecated/ActionList/Item.d.ts.map +1 -1
- package/dist/deprecated/ActionList/Item.js +182 -271
- package/dist/deprecated/ActionList/Item.module.css.js +5 -0
- package/dist/deprecated/ActionList/List-1ec9d6d9.css +2 -0
- package/dist/deprecated/ActionList/List-1ec9d6d9.css.map +1 -0
- package/dist/deprecated/ActionList/List.d.ts +1 -0
- package/dist/deprecated/ActionList/List.d.ts.map +1 -1
- package/dist/deprecated/ActionList/List.js +92 -82
- package/dist/deprecated/ActionList/List.module.css.js +5 -0
- package/dist/deprecated/UnderlineNav/UnderlineNav-0c1e0dff.css +2 -0
- package/dist/deprecated/UnderlineNav/UnderlineNav-0c1e0dff.css.map +1 -0
- package/dist/deprecated/UnderlineNav/UnderlineNav.d.ts +6 -8
- package/dist/deprecated/UnderlineNav/UnderlineNav.d.ts.map +1 -1
- package/dist/deprecated/UnderlineNav/UnderlineNav.js +90 -49
- package/dist/deprecated/UnderlineNav/UnderlineNav.module.css.js +5 -0
- package/dist/experimental/SelectPanel2/SelectPanel.d.ts +11 -7
- package/dist/experimental/SelectPanel2/SelectPanel.d.ts.map +1 -1
- package/dist/experimental/SelectPanel2/SelectPanel.js +6 -1
- package/dist/experimental/UnderlinePanels/UnderlinePanels.d.ts +6 -6
- package/dist/experimental/UnderlinePanels/UnderlinePanels.d.ts.map +1 -1
- package/dist/experimental/UnderlinePanels/UnderlinePanels.js +8 -4
- package/dist/hooks/useSlots.d.ts.map +1 -1
- package/dist/hooks/useSlots.js +3 -2
- package/dist/hooks/useSyncedState.js +1 -1
- package/dist/index.d.ts +5 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -1
- package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.d.ts +6 -7
- package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.d.ts.map +1 -1
- package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.js +7 -9
- package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.d.ts +4 -4
- package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.d.ts.map +1 -1
- package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.js +1 -0
- package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.d.ts +2 -1
- package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.d.ts.map +1 -1
- package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.js +1 -0
- package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.d.ts +3 -3
- package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.d.ts.map +1 -1
- package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.js +2 -3
- package/dist/internal/components/InputLabel.d.ts +2 -3
- package/dist/internal/components/InputLabel.d.ts.map +1 -1
- package/dist/internal/components/InputLabel.js +29 -36
- package/dist/internal/components/InputValidation.d.ts +1 -2
- package/dist/internal/components/InputValidation.d.ts.map +1 -1
- package/dist/internal/components/TextInputInnerAction.d.ts +16 -2
- package/dist/internal/components/TextInputInnerAction.d.ts.map +1 -1
- package/dist/internal/components/TextInputInnerAction.js +46 -60
- package/dist/internal/components/TextInputWrapper.d.ts +10 -32
- package/dist/internal/components/TextInputWrapper.d.ts.map +1 -1
- package/dist/internal/components/TextInputWrapper.js +87 -58
- package/dist/internal/components/UnstyledTextInput.d.ts +1 -2
- package/dist/internal/components/UnstyledTextInput.d.ts.map +1 -1
- package/dist/internal/components/UnstyledTextInput.js +1 -3
- package/dist/internal/components/ValidationAnimationContainer-04125429.css +2 -0
- package/dist/internal/components/ValidationAnimationContainer-04125429.css.map +1 -0
- package/dist/internal/components/ValidationAnimationContainer.d.ts.map +1 -1
- package/dist/internal/components/ValidationAnimationContainer.js +4 -9
- package/dist/internal/components/ValidationAnimationContainer.module.css.js +5 -0
- package/dist/utils/form-story-helpers.d.ts.map +1 -1
- package/dist/utils/is-slot.d.ts +6 -0
- package/dist/utils/is-slot.d.ts.map +1 -0
- package/dist/utils/is-slot.js +15 -0
- package/dist/utils/polymorphic.d.ts +2 -1
- package/dist/utils/polymorphic.d.ts.map +1 -1
- package/dist/utils/types/Slots.d.ts +7 -0
- package/dist/utils/types/Slots.d.ts.map +1 -0
- package/dist/utils/types/index.d.ts +1 -0
- package/dist/utils/types/index.d.ts.map +1 -1
- package/generated/components.json +21 -119
- package/package.json +2 -1
- package/dist/Button/styles.d.ts +0 -431
- package/dist/Button/styles.d.ts.map +0 -1
- package/dist/Button/styles.js +0 -5
- package/dist/ConfirmationDialog/ConfirmationDialog-de0401ff.css +0 -2
- package/dist/ConfirmationDialog/ConfirmationDialog-de0401ff.css.map +0 -1
- package/dist/FilteredActionList/FilteredActionList-e1eb1b75.css +0 -2
- package/dist/FilteredActionList/FilteredActionList-e1eb1b75.css.map +0 -1
- package/dist/KeybindingHint/components/Chord-81099645.css +0 -2
- package/dist/KeybindingHint/components/Chord-81099645.css.map +0 -1
- package/dist/LabelGroup/LabelGroup-eda75c0f.css +0 -2
- package/dist/LabelGroup/LabelGroup-eda75c0f.css.map +0 -1
- package/dist/PageLayout/PageLayout-8a294e74.css.map +0 -1
- package/dist/StateLabel/StateLabel-aaa1d148.css.map +0 -1
- package/dist/UnderlineNav/UnderlineNav-78db938f.css +0 -2
- package/dist/UnderlineNav/UnderlineNav-78db938f.css.map +0 -1
- package/dist/internal/components/BoxWithFallback.d.ts +0 -6
- package/dist/internal/components/BoxWithFallback.d.ts.map +0 -1
- package/dist/internal/components/BoxWithFallback.js +0 -70
- package/dist/internal/utils/getGlobalFocusStyles.d.ts +0 -4
- package/dist/internal/utils/getGlobalFocusStyles.d.ts.map +0 -1
- package/dist/internal/utils/getGlobalFocusStyles.js +0 -7
- package/dist/internal/utils/sharedCheckboxAndRadioStyles.d.ts +0 -2
- package/dist/internal/utils/sharedCheckboxAndRadioStyles.d.ts.map +0 -1
- package/dist/utils/defaultSxProp.d.ts +0 -3
- package/dist/utils/defaultSxProp.d.ts.map +0 -1
- package/dist/utils/defaultSxProp.js +0 -3
- package/dist/utils/includeSystemProps.d.ts +0 -7
- package/dist/utils/includeSystemProps.d.ts.map +0 -1
- package/dist/utils/includeSystemProps.js +0 -14
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/KeybindingHint/components/Chord.module.css"],"names":[],"mappings":"AAAA,4BAEE,6CAAqC,CAOrC,iDAA0C,CAJ1C,eAAgB,CAJhB,mBAAoB,CASpB,4CAAsC,CAPtC,8CAA2C,CAC3C,QAAU,CAIV,sBAAuB,CAIvB,gBAAiB,CALjB,eAAgB,CAIhB,iCAA2B,CAL3B,uBAOF,CAEA,kCACE,iDAAsC,CAEtC,mEAAwC,CADxC,gDAEF,CAEA,sCACE,kDAGF,CAEA,2EAHE,wBAAyB,CADzB,2DAQF,CAJA,qCACE,oFAGF,CAEA,iCACE,gDAAwC,CACxC,cAAe,CAEf,oCAA+B,CAC/B,kCAA8B,CAF9B,kCAGF,CAEA,wEACE,gDAAyC,CACzC,4CAA+C,CAE/C,gBAAiB,CACjB,qCAA8B,CAF9B,iCAGF","file":"Chord-d4edcc89.css","sourcesContent":[".Chord {\n display: inline-flex;\n border: var(--borderWidth-thin) solid;\n font-weight: var(--base-text-weight-normal);\n gap: 0.5ch;\n box-shadow: none;\n vertical-align: baseline;\n overflow: hidden;\n justify-content: center;\n border-radius: var(--borderRadius-default);\n font-size: var(--text-body-size-small);\n padding: var(--base-size-4);\n line-height: 10px; /* stylelint-disable-line primer/typography */\n}\n\n.ChordNormal {\n background: var(--bgColor-transparent);\n color: var(--fgColor-muted);\n border-color: var(--borderColor-default);\n}\n\n.ChordOnEmphasis {\n background: var(--counter-bgColor-emphasis);\n color: var(--fgColor-onEmphasis);\n border-color: transparent;\n}\n\n.ChordOnPrimary {\n background: var(--button-primary-bgColor-active);\n color: var(--fgColor-onEmphasis);\n border-color: transparent;\n}\n\n.ChordSmall {\n border-radius: var(--borderRadius-small);\n font-size: 11px; /* stylelint-disable-line primer/typography */\n padding: var(--base-size-2);\n line-height: var(--base-size-8); /* stylelint-disable-line primer/typography */\n min-width: var(--base-size-16);\n}\n\n.ChordNormal:not(.ChordSmall) {\n border-radius: var(--borderRadius-medium);\n font-size: var(--text-body-size-small, 0.75rem);\n padding: var(--base-size-4);\n line-height: 10px; /* stylelint-disable-line primer/typography */\n min-width: var(--base-size-20);\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import './Chord-
|
|
1
|
+
import './Chord-d4edcc89.css';
|
|
2
2
|
|
|
3
3
|
var classes = {"Chord":"prc-components-Chord-vlqS5","ChordNormal":"prc-components-ChordNormal-6rvP6","ChordOnEmphasis":"prc-components-ChordOnEmphasis-XDov-","ChordOnPrimary":"prc-components-ChordOnPrimary--7rmy","ChordSmall":"prc-components-ChordSmall-nDiio"};
|
|
4
4
|
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.prc-LabelGroup-Container-0bBKg{display:flex;flex-wrap:nowrap;gap:var(--base-size-4,.25rem);line-height:1;max-width:100%;overflow:hidden}.prc-LabelGroup-Container-0bBKg:where([data-overflow=inline]){flex-wrap:wrap}.prc-LabelGroup-Container-0bBKg:where([data-list]){list-style-type:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.prc-LabelGroup-ItemWrapper-ETvGq{align-items:center;display:flex;min-height:28px}.prc-LabelGroup-ItemWrapper--hidden-HzoA1{order:9999;pointer-events:none;visibility:hidden}.prc-LabelGroup-OverlayContainer-pt4uv{align-items:flex-start;display:flex}.prc-LabelGroup-OverlayInner-qvwGT{display:flex;flex-wrap:wrap;gap:var(--base-size-4,.25rem)}.prc-LabelGroup-CloseButton-GyJi3{flex-shrink:0}
|
|
2
|
+
/*# sourceMappingURL=LabelGroup-7d19205a.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/LabelGroup/LabelGroup.module.css"],"names":[],"mappings":"AAAA,gCACE,YAAa,CACb,gBAAiB,CACjB,6BAAuB,CAEvB,aAAc,CACd,cAAe,CACf,eAYF,CAVE,8DACE,cACF,CAEA,mDAIE,oBAAqB,CADrB,kBAAmB,CADnB,oBAAqB,CADrB,sBAIF,CAGF,kCAEE,kBAAmB,CADnB,YAAa,CAOb,eACF,CAEA,0CACE,UAAW,CACX,mBAAoB,CACpB,iBACF,CAEA,uCACE,sBAAuB,CACvB,YACF,CAEA,mCACE,YAAa,CACb,cAAe,CACf,6BACF,CAEA,kCACE,aACF","file":"LabelGroup-7d19205a.css","sourcesContent":[".Container {\n display: flex;\n flex-wrap: nowrap;\n gap: var(--base-size-4);\n /* stylelint-disable-next-line primer/typography */\n line-height: 1;\n max-width: 100%;\n overflow: hidden;\n\n &:where([data-overflow='inline']) {\n flex-wrap: wrap;\n }\n\n &:where([data-list]) {\n padding-inline-start: 0;\n margin-block-start: 0;\n margin-block-end: 0;\n list-style-type: none;\n }\n}\n\n.ItemWrapper {\n display: flex;\n align-items: center;\n /* This min-height matches the height of the expand/collapse button.\n Without it, the labels/tokens will do a slight layout shift when expanded.\n This is because the height of the first row will match the token sizes,\n but the height of the second row will be the height of the collapse button.\n */\n min-height: 28px;\n}\n\n.ItemWrapper--hidden {\n order: 9999;\n pointer-events: none;\n visibility: hidden;\n}\n\n.OverlayContainer {\n align-items: flex-start;\n display: flex;\n}\n\n.OverlayInner {\n display: flex;\n flex-wrap: wrap;\n gap: var(--base-size-4);\n}\n\n.CloseButton {\n flex-shrink: 0;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LabelGroup.d.ts","sourceRoot":"","sources":["../../src/LabelGroup/LabelGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"LabelGroup.d.ts","sourceRoot":"","sources":["../../src/LabelGroup/LabelGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,MAAM,MAAM,eAAe,GAAG;IAC5B,2DAA2D;IAC3D,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,4LAA4L;IAC5L,aAAa,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACpC,4MAA4M;IAC5M,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AA2FD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAAC,CA0OlE,CAAA;AAID,eAAe,UAAU,CAAA"}
|
|
@@ -1,26 +1,16 @@
|
|
|
1
1
|
import { c } from 'react-compiler-runtime';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import styled from 'styled-components';
|
|
4
3
|
import { XIcon } from '@primer/octicons-react';
|
|
5
4
|
import { getFocusableChild } from '@primer/behaviors/utils';
|
|
6
|
-
import { get } from '../constants.js';
|
|
7
5
|
import VisuallyHidden from '../_VisuallyHidden.js';
|
|
8
6
|
import { IconButton } from '../Button/IconButton.js';
|
|
9
7
|
import { ButtonComponent } from '../Button/Button.js';
|
|
10
|
-
import {
|
|
8
|
+
import { clsx } from 'clsx';
|
|
9
|
+
import theme from '../theme.js';
|
|
11
10
|
import classes from './LabelGroup.module.css.js';
|
|
12
11
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
13
12
|
import { AnchoredOverlay } from '../AnchoredOverlay/AnchoredOverlay.js';
|
|
14
13
|
|
|
15
|
-
const StyledLabelGroupContainer = styled.div.withConfig({
|
|
16
|
-
displayName: "LabelGroup__StyledLabelGroupContainer",
|
|
17
|
-
componentId: "sc-6tqg8q-0"
|
|
18
|
-
})(["display:flex;flex-wrap:nowrap;gap:", ";line-height:1;max-width:100%;overflow:hidden;&[data-overflow='inline']{flex-wrap:wrap;}&[data-list]{padding-inline-start:0;margin-block-start:0;margin-block-end:0;list-style-type:none;}"], get('space.1'));
|
|
19
|
-
const ItemWrapper = styled.div.withConfig({
|
|
20
|
-
displayName: "LabelGroup__ItemWrapper",
|
|
21
|
-
componentId: "sc-6tqg8q-1"
|
|
22
|
-
})(["display:flex;align-items:center;min-height:28px;&.ItemWrapper--hidden{order:9999;pointer-events:none;visibility:hidden;}"]);
|
|
23
|
-
|
|
24
14
|
// Calculates the width of the overlay to cover the labels/tokens and the expand button.
|
|
25
15
|
const getOverlayWidth = (buttonClientRect, containerRef, overlayPaddingPx) => {
|
|
26
16
|
var _containerRef$current;
|
|
@@ -146,7 +136,7 @@ const LabelGroup = ({
|
|
|
146
136
|
children,
|
|
147
137
|
visibleChildCount,
|
|
148
138
|
overflowStyle = 'overlay',
|
|
149
|
-
as = 'ul',
|
|
139
|
+
as: Component = 'ul',
|
|
150
140
|
className
|
|
151
141
|
}) => {
|
|
152
142
|
const containerRef = React.useRef(null);
|
|
@@ -165,10 +155,7 @@ const LabelGroup = ({
|
|
|
165
155
|
bottom: 0,
|
|
166
156
|
toJSON: () => undefined
|
|
167
157
|
});
|
|
168
|
-
const
|
|
169
|
-
theme
|
|
170
|
-
} = useTheme();
|
|
171
|
-
const overlayPaddingPx = parseInt(get('space.2')(theme), 10);
|
|
158
|
+
const overlayPaddingPx = parseInt(theme.space[2], 10);
|
|
172
159
|
const hiddenItemIds = Object.keys(visibilityMap).filter(key => !visibilityMap[key]);
|
|
173
160
|
|
|
174
161
|
// `overlayWidth` is only needed when we render an overlay
|
|
@@ -296,22 +283,23 @@ const LabelGroup = ({
|
|
|
296
283
|
}
|
|
297
284
|
}
|
|
298
285
|
}, [overflowStyle, isOverflowShown]);
|
|
299
|
-
const isList =
|
|
286
|
+
const isList = Component === 'ul' || Component === 'ol';
|
|
300
287
|
const ToggleWrapper = isList ? 'li' : React.Fragment;
|
|
288
|
+
const ItemWrapperComponent = isList ? 'li' : 'span';
|
|
301
289
|
|
|
302
290
|
// If truncation is enabled, we need to render based on truncation logic.
|
|
303
|
-
return visibleChildCount ? /*#__PURE__*/jsxs(
|
|
291
|
+
return visibleChildCount ? /*#__PURE__*/jsxs(Component, {
|
|
304
292
|
ref: containerRef,
|
|
305
293
|
"data-overflow": overflowStyle === 'inline' && isOverflowShown ? 'inline' : undefined,
|
|
306
294
|
"data-list": isList || undefined,
|
|
307
|
-
className: className,
|
|
308
|
-
|
|
309
|
-
children: [React.Children.map(children, (child_0, index) => /*#__PURE__*/jsx(ItemWrapper
|
|
295
|
+
className: clsx(className, classes.Container),
|
|
296
|
+
children: [React.Children.map(children, (child_0, index) => /*#__PURE__*/jsx(ItemWrapperComponent
|
|
310
297
|
// data-index is used as an identifier we can use in the IntersectionObserver
|
|
311
298
|
, {
|
|
312
299
|
"data-index": index,
|
|
313
|
-
className:
|
|
314
|
-
|
|
300
|
+
className: clsx(classes.ItemWrapper, {
|
|
301
|
+
[classes['ItemWrapper--hidden']]: hiddenItemIds.includes(index.toString())
|
|
302
|
+
}),
|
|
315
303
|
children: child_0
|
|
316
304
|
}, index)), /*#__PURE__*/jsx(ToggleWrapper, {
|
|
317
305
|
children: overflowStyle === 'inline' ? /*#__PURE__*/jsx(InlineToggle, {
|
|
@@ -334,11 +322,10 @@ const LabelGroup = ({
|
|
|
334
322
|
children: children
|
|
335
323
|
})
|
|
336
324
|
})]
|
|
337
|
-
}) : /*#__PURE__*/jsx(
|
|
325
|
+
}) : /*#__PURE__*/jsx(Component, {
|
|
338
326
|
"data-overflow": "inline",
|
|
339
327
|
"data-list": isList || undefined,
|
|
340
|
-
|
|
341
|
-
className: className,
|
|
328
|
+
className: clsx(className, classes.Container),
|
|
342
329
|
children: isList ? React.Children.map(children, (child_1, index_0) => {
|
|
343
330
|
return /*#__PURE__*/jsx("li", {
|
|
344
331
|
children: child_1
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import './LabelGroup-
|
|
1
|
+
import './LabelGroup-7d19205a.css';
|
|
2
2
|
|
|
3
|
-
var classes = {"OverlayContainer":"prc-LabelGroup-OverlayContainer-pt4uv","OverlayInner":"prc-LabelGroup-OverlayInner-qvwGT","CloseButton":"prc-LabelGroup-CloseButton-GyJi3"};
|
|
3
|
+
var classes = {"Container":"prc-LabelGroup-Container-0bBKg","ItemWrapper":"prc-LabelGroup-ItemWrapper-ETvGq","ItemWrapper--hidden":"prc-LabelGroup-ItemWrapper--hidden-HzoA1","OverlayContainer":"prc-LabelGroup-OverlayContainer-pt4uv","OverlayInner":"prc-LabelGroup-OverlayInner-qvwGT","CloseButton":"prc-LabelGroup-CloseButton-GyJi3"};
|
|
4
4
|
|
|
5
5
|
export { classes as default };
|
|
@@ -41,10 +41,10 @@ export type NavListGroupHeadingProps = ActionListGroupHeadingProps;
|
|
|
41
41
|
export declare const NavList: React.ForwardRefExoticComponent<Omit<NavListProps, "ref"> & React.RefAttributes<HTMLElement>> & {
|
|
42
42
|
Item: PolymorphicForwardRefComponent<"a", NavListItemProps>;
|
|
43
43
|
SubNav: PolymorphicForwardRefComponent<"ul", NavListSubNavProps>;
|
|
44
|
-
LeadingVisual:
|
|
45
|
-
TrailingVisual:
|
|
44
|
+
LeadingVisual: import("../utils/types").FCWithSlotMarker<React.PropsWithChildren<import("../ActionList/Visuals").VisualProps>>;
|
|
45
|
+
TrailingVisual: import("../utils/types").FCWithSlotMarker<React.PropsWithChildren<import("../ActionList/Visuals").VisualProps>>;
|
|
46
46
|
TrailingAction: PolymorphicForwardRefComponent<"button" | "a", ActionListTrailingActionProps>;
|
|
47
|
-
Divider:
|
|
47
|
+
Divider: import("../utils/types").FCWithSlotMarker<React.PropsWithChildren<ActionListDividerProps>>;
|
|
48
48
|
Group: React.FC<NavListGroupProps>;
|
|
49
49
|
GroupExpand: React.ForwardRefExoticComponent<NavListGroupExpandProps & React.RefAttributes<HTMLButtonElement>>;
|
|
50
50
|
GroupHeading: React.FC<ActionListGroupHeadingProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavList.d.ts","sourceRoot":"","sources":["../../src/NavList/NavList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAC3E,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAC/F,OAAO,KAAuB,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,EACV,6BAA6B,EAC7B,sBAAsB,EACtB,4BAA4B,EAC5B,6BAA6B,EAC7B,2BAA2B,EAC5B,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"NavList.d.ts","sourceRoot":"","sources":["../../src/NavList/NavList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAC3E,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAC/F,OAAO,KAAuB,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,EACV,6BAA6B,EAC7B,sBAAsB,EACtB,4BAA4B,EAC5B,6BAA6B,EAC7B,2BAA2B,EAC5B,MAAM,eAAe,CAAA;AActB,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;AAqB/B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;IAC5F,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AA+GD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAkCD,MAAM,MAAM,yBAAyB,GAAG,4BAA4B,CAAA;AASpE,MAAM,MAAM,0BAA0B,GAAG,6BAA6B,CAAA;AAStE,MAAM,MAAM,mBAAmB,GAAG,sBAAsB,CAAA;AAQxD,MAAM,MAAM,0BAA0B,GAAG,6BAA6B,CAAA;AAStE,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,GAAG;IACpE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAqBD,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,cAAc,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IAC9B,aAAa,CAAC,EAAE,IAAI,CAAA;IACpB,cAAc,CAAC,EAAE,6BAA6B,CAAA;IAC9C,0BAA0B,CAAC,EAAE,MAAM,CAAA;CACpC,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAA;AAEtC,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,KAAK,CAAC,SAAS,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,WAAW,mGAgFvB,CAAA;AAKD,MAAM,MAAM,wBAAwB,GAAG,2BAA2B,CAAA;AAqBlE,eAAO,MAAM,OAAO;;;;;;;;;;CAUlB,CAAA"}
|
package/dist/NavList/NavList.js
CHANGED
|
@@ -10,6 +10,7 @@ import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
|
|
|
10
10
|
import classes from '../ActionList/ActionList.module.css.js';
|
|
11
11
|
import navListClasses from './NavList.module.css.js';
|
|
12
12
|
import { flushSync } from 'react-dom';
|
|
13
|
+
import { isSlot } from '../utils/is-slot.js';
|
|
13
14
|
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
14
15
|
|
|
15
16
|
const Root = /*#__PURE__*/React.forwardRef((t0, ref) => {
|
|
@@ -695,7 +696,7 @@ const NavList = Object.assign(Root, {
|
|
|
695
696
|
GroupHeading
|
|
696
697
|
});
|
|
697
698
|
function _temp(child) {
|
|
698
|
-
return /*#__PURE__*/isValidElement(child) && child.type === SubNav;
|
|
699
|
+
return /*#__PURE__*/isValidElement(child) && (child.type === SubNav || isSlot(child, SubNav));
|
|
699
700
|
}
|
|
700
701
|
function _temp2(child_0) {
|
|
701
702
|
return /*#__PURE__*/isValidElement(child_0) ? child_0.type !== SubNav && child_0.type !== TrailingAction : true;
|
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
import type { IconProps } from '@primer/octicons-react';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import type { SxProp } from '../sx';
|
|
4
|
-
import type { ComponentProps } from '../utils/types';
|
|
5
3
|
/**
|
|
6
4
|
* @deprecated Use the icon component directly from `@primer/octicons-react` instead
|
|
7
5
|
*/
|
|
8
|
-
|
|
6
|
+
export type OcticonProps = {
|
|
9
7
|
icon: React.ElementType;
|
|
10
|
-
|
|
11
|
-
} & IconProps
|
|
8
|
+
as?: React.ElementType;
|
|
9
|
+
} & IconProps;
|
|
12
10
|
/**
|
|
13
11
|
* @deprecated Use the icon component directly from `@primer/octicons-react` instead
|
|
14
12
|
*/
|
|
15
|
-
|
|
13
|
+
declare const Octicon: React.ForwardRefExoticComponent<{
|
|
14
|
+
icon: React.ElementType;
|
|
15
|
+
as?: React.ElementType;
|
|
16
|
+
} & IconProps & React.RefAttributes<SVGSVGElement>>;
|
|
16
17
|
export default Octicon;
|
|
17
18
|
//# sourceMappingURL=Octicon.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Octicon.d.ts","sourceRoot":"","sources":["../../src/Octicon/Octicon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AACrD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,
|
|
1
|
+
{"version":3,"file":"Octicon.d.ts","sourceRoot":"","sources":["../../src/Octicon/Octicon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AACrD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IAAC,IAAI,EAAE,KAAK,CAAC,WAAW,CAAC;IAAC,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CAAC,GAAG,SAAS,CAAA;AAExF;;GAEG;AACH,QAAA,MAAM,OAAO;UALqB,KAAK,CAAC,WAAW;SAAO,KAAK,CAAC,WAAW;mDAQzE,CAAA;AAEF,eAAe,OAAO,CAAA"}
|
package/dist/Octicon/Octicon.js
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { c } from 'react-compiler-runtime';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import styled from 'styled-components';
|
|
4
|
-
import sx from '../sx.js';
|
|
5
3
|
import { jsx } from 'react/jsx-runtime';
|
|
6
4
|
|
|
7
|
-
|
|
5
|
+
/**
|
|
6
|
+
* @deprecated Use the icon component directly from `@primer/octicons-react` instead
|
|
7
|
+
*/
|
|
8
|
+
const Octicon = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
8
9
|
const $ = c(7);
|
|
9
10
|
let IconComponent;
|
|
10
11
|
let rest;
|
|
@@ -36,24 +37,4 @@ const Icon = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
36
37
|
return t0;
|
|
37
38
|
});
|
|
38
39
|
|
|
39
|
-
/**
|
|
40
|
-
* @deprecated Use the icon component directly from `@primer/octicons-react` instead
|
|
41
|
-
*/
|
|
42
|
-
const Octicon = styled(Icon).withConfig({
|
|
43
|
-
shouldForwardProp(prop) {
|
|
44
|
-
return prop !== 'sx';
|
|
45
|
-
}
|
|
46
|
-
}).withConfig({
|
|
47
|
-
displayName: "Octicon",
|
|
48
|
-
componentId: "sc-9kayk9-0"
|
|
49
|
-
})(["", ""], ({
|
|
50
|
-
color,
|
|
51
|
-
sx: sxProp
|
|
52
|
-
}) => sx({
|
|
53
|
-
sx: {
|
|
54
|
-
color,
|
|
55
|
-
...sxProp
|
|
56
|
-
}
|
|
57
|
-
}));
|
|
58
|
-
|
|
59
40
|
export { Octicon as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../src/Overlay/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,qBAAqB,EAAe,MAAM,OAAO,CAAA;AAC9D,OAAO,KAA0B,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../src/Overlay/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,qBAAqB,EAAe,MAAM,OAAO,CAAA;AAC9D,OAAO,KAA0B,MAAM,OAAO,CAAA;AAE9C,OAAO,KAAK,EAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,gBAAgB,CAAA;AACnD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,UAAU,CAAA;AAI/C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,mBAAmB,CAAA;AACjD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAM/F,KAAK,kBAAkB,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAA;IAC7B,MAAM,CAAC,EAAE,MAAM,OAAO,SAAS,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC,OAAO,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC,CAAA;IAC5D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC,OAAO,QAAQ,EAAE,MAAM,CAAC,CAAA;IAC9C,UAAU,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IACjC,QAAQ,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAA;IACnD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;;;;CASrB,CAAA;AAGD,QAAA,MAAM,QAAQ;;;;;;;CAOb,CAAA;AAiBD,KAAK,gBAAgB,GAAG;IACtB,UAAU,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IACjC,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAA;IAC1C,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IAChC,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;IAClC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;IACpC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;IACtC,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iBAAiB,CAAC,EAAE,YAAY,CAAA;CACjC,CAAA;AAED,KAAK,eAAe,GAAG,KAAK,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,CAAA;AAElE;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,EA8CnB,8BAA8B,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;AAE3D,KAAK,cAAc,GAAG;IACpB,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAA;IAChD,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC9C,cAAc,EAAE,CAAC,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAC9C,QAAQ,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAA;IACpC,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;CAC7C,CAAA;AAED,KAAK,oBAAoB,GAAG,KAAK,CAAC,eAAe,EAAE,cAAc,CAAC,CAAA;AAElE;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,OAAO,EAiFR,8BAA8B,CAAC,KAAK,EAAE,oBAAoB,CAAC,CAAA;AAEhE,MAAM,MAAM,YAAY,GAAG,qBAAqB,CAAC,OAAO,OAAO,CAAC,CAAA;AAEhE,eAAe,OAAO,CAAA"}
|
package/dist/Overlay/Overlay.js
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { c } from 'react-compiler-runtime';
|
|
2
2
|
import React, { useRef, useEffect } from 'react';
|
|
3
3
|
import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
|
|
4
|
-
import { get } from '../constants.js';
|
|
5
4
|
import { Portal } from '../Portal/Portal.js';
|
|
6
5
|
import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
|
|
7
|
-
import { useTheme } from '../ThemeProvider.js';
|
|
8
6
|
import classes from './Overlay.module.css.js';
|
|
9
7
|
import { clsx } from 'clsx';
|
|
8
|
+
import theme from '../theme.js';
|
|
10
9
|
import { jsx } from 'react/jsx-runtime';
|
|
11
10
|
import { useOverlay } from '../hooks/useOverlay.js';
|
|
12
11
|
import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
|
|
@@ -116,7 +115,7 @@ const BaseOverlay = /*#__PURE__*/React.forwardRef(({
|
|
|
116
115
|
|
|
117
116
|
*/
|
|
118
117
|
const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
|
|
119
|
-
const $ = c(
|
|
118
|
+
const $ = c(45);
|
|
120
119
|
let anchorSide;
|
|
121
120
|
let ignoreClickRefs;
|
|
122
121
|
let initialFocusRef;
|
|
@@ -198,30 +197,11 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
|
|
|
198
197
|
const width = t5 === undefined ? "auto" : t5;
|
|
199
198
|
const overlayRef = useRef(null);
|
|
200
199
|
useRefObjectAsForwardedRef(forwardedRef, overlayRef);
|
|
201
|
-
const
|
|
202
|
-
|
|
203
|
-
} = useTheme();
|
|
200
|
+
const slideAnimationDistance = parseInt(theme.space[2], 10);
|
|
201
|
+
const slideAnimationEasing = theme.animation.easeOutCubic;
|
|
204
202
|
let t6;
|
|
205
|
-
if ($[18] !==
|
|
206
|
-
t6 =
|
|
207
|
-
$[18] = theme;
|
|
208
|
-
$[19] = t6;
|
|
209
|
-
} else {
|
|
210
|
-
t6 = $[19];
|
|
211
|
-
}
|
|
212
|
-
const slideAnimationDistance = parseInt(t6);
|
|
213
|
-
let t7;
|
|
214
|
-
if ($[20] !== theme) {
|
|
215
|
-
t7 = get("animation.easeOutCubic")(theme);
|
|
216
|
-
$[20] = theme;
|
|
217
|
-
$[21] = t7;
|
|
218
|
-
} else {
|
|
219
|
-
t7 = $[21];
|
|
220
|
-
}
|
|
221
|
-
const slideAnimationEasing = t7;
|
|
222
|
-
let t8;
|
|
223
|
-
if ($[22] !== ignoreClickRefs || $[23] !== initialFocusRef || $[24] !== onClickOutside || $[25] !== onEscape || $[26] !== preventFocusOnOpen || $[27] !== returnFocusRef) {
|
|
224
|
-
t8 = {
|
|
203
|
+
if ($[18] !== ignoreClickRefs || $[19] !== initialFocusRef || $[20] !== onClickOutside || $[21] !== onEscape || $[22] !== preventFocusOnOpen || $[23] !== returnFocusRef) {
|
|
204
|
+
t6 = {
|
|
225
205
|
overlayRef,
|
|
226
206
|
returnFocusRef,
|
|
227
207
|
onEscape,
|
|
@@ -230,39 +210,39 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
|
|
|
230
210
|
initialFocusRef,
|
|
231
211
|
preventFocusOnOpen
|
|
232
212
|
};
|
|
233
|
-
$[
|
|
234
|
-
$[
|
|
235
|
-
$[
|
|
236
|
-
$[
|
|
237
|
-
$[
|
|
238
|
-
$[
|
|
239
|
-
$[
|
|
213
|
+
$[18] = ignoreClickRefs;
|
|
214
|
+
$[19] = initialFocusRef;
|
|
215
|
+
$[20] = onClickOutside;
|
|
216
|
+
$[21] = onEscape;
|
|
217
|
+
$[22] = preventFocusOnOpen;
|
|
218
|
+
$[23] = returnFocusRef;
|
|
219
|
+
$[24] = t6;
|
|
240
220
|
} else {
|
|
241
|
-
|
|
221
|
+
t6 = $[24];
|
|
242
222
|
}
|
|
243
|
-
useOverlay(
|
|
244
|
-
let
|
|
245
|
-
let
|
|
246
|
-
if ($[
|
|
247
|
-
|
|
223
|
+
useOverlay(t6);
|
|
224
|
+
let t7;
|
|
225
|
+
let t8;
|
|
226
|
+
if ($[25] !== height) {
|
|
227
|
+
t7 = () => {
|
|
248
228
|
var _overlayRef$current;
|
|
249
229
|
if (height === "initial" && (_overlayRef$current = overlayRef.current) !== null && _overlayRef$current !== void 0 && _overlayRef$current.clientHeight) {
|
|
250
230
|
overlayRef.current.style.height = `${overlayRef.current.clientHeight}px`;
|
|
251
231
|
}
|
|
252
232
|
};
|
|
253
|
-
|
|
254
|
-
$[
|
|
255
|
-
$[
|
|
256
|
-
$[
|
|
233
|
+
t8 = [height];
|
|
234
|
+
$[25] = height;
|
|
235
|
+
$[26] = t7;
|
|
236
|
+
$[27] = t8;
|
|
257
237
|
} else {
|
|
258
|
-
|
|
259
|
-
|
|
238
|
+
t7 = $[26];
|
|
239
|
+
t8 = $[27];
|
|
260
240
|
}
|
|
261
|
-
useEffect(
|
|
262
|
-
let
|
|
263
|
-
let
|
|
264
|
-
if ($[
|
|
265
|
-
|
|
241
|
+
useEffect(t7, t8);
|
|
242
|
+
let t10;
|
|
243
|
+
let t9;
|
|
244
|
+
if ($[28] !== anchorSide || $[29] !== visibility) {
|
|
245
|
+
t9 = () => {
|
|
266
246
|
var _overlayRef$current2;
|
|
267
247
|
const {
|
|
268
248
|
x,
|
|
@@ -278,27 +258,25 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
|
|
|
278
258
|
easing: slideAnimationEasing
|
|
279
259
|
});
|
|
280
260
|
};
|
|
281
|
-
|
|
282
|
-
$[
|
|
283
|
-
$[
|
|
284
|
-
$[
|
|
285
|
-
$[
|
|
286
|
-
$[36] = t11;
|
|
287
|
-
$[37] = t12;
|
|
261
|
+
t10 = [anchorSide, slideAnimationDistance, slideAnimationEasing, visibility];
|
|
262
|
+
$[28] = anchorSide;
|
|
263
|
+
$[29] = visibility;
|
|
264
|
+
$[30] = t10;
|
|
265
|
+
$[31] = t9;
|
|
288
266
|
} else {
|
|
289
|
-
|
|
290
|
-
|
|
267
|
+
t10 = $[30];
|
|
268
|
+
t9 = $[31];
|
|
291
269
|
}
|
|
292
|
-
useIsomorphicLayoutEffect(
|
|
270
|
+
useIsomorphicLayoutEffect(t9, t10);
|
|
293
271
|
const leftPosition = left === undefined && right === undefined ? 0 : left;
|
|
294
272
|
const overflowEnabled = useFeatureFlag("primer_react_overlay_overflow");
|
|
295
|
-
const
|
|
296
|
-
let
|
|
297
|
-
if ($[
|
|
298
|
-
|
|
273
|
+
const t11 = overflowEnabled || !preventOverflow ? true : undefined;
|
|
274
|
+
let t12;
|
|
275
|
+
if ($[32] !== height || $[33] !== leftPosition || $[34] !== props || $[35] !== responsiveVariant || $[36] !== right || $[37] !== role || $[38] !== t11 || $[39] !== visibility || $[40] !== width) {
|
|
276
|
+
t12 = /*#__PURE__*/jsx(BaseOverlay, {
|
|
299
277
|
role: role,
|
|
300
278
|
width: width,
|
|
301
|
-
"data-reflow-container":
|
|
279
|
+
"data-reflow-container": t11,
|
|
302
280
|
ref: overlayRef,
|
|
303
281
|
left: leftPosition,
|
|
304
282
|
right: right,
|
|
@@ -307,32 +285,32 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
|
|
|
307
285
|
"data-responsive": responsiveVariant,
|
|
308
286
|
...props
|
|
309
287
|
});
|
|
310
|
-
$[
|
|
311
|
-
$[
|
|
312
|
-
$[
|
|
313
|
-
$[
|
|
314
|
-
$[
|
|
315
|
-
$[
|
|
316
|
-
$[
|
|
317
|
-
$[
|
|
318
|
-
$[
|
|
319
|
-
$[
|
|
288
|
+
$[32] = height;
|
|
289
|
+
$[33] = leftPosition;
|
|
290
|
+
$[34] = props;
|
|
291
|
+
$[35] = responsiveVariant;
|
|
292
|
+
$[36] = right;
|
|
293
|
+
$[37] = role;
|
|
294
|
+
$[38] = t11;
|
|
295
|
+
$[39] = visibility;
|
|
296
|
+
$[40] = width;
|
|
297
|
+
$[41] = t12;
|
|
320
298
|
} else {
|
|
321
|
-
|
|
299
|
+
t12 = $[41];
|
|
322
300
|
}
|
|
323
|
-
let
|
|
324
|
-
if ($[
|
|
325
|
-
|
|
301
|
+
let t13;
|
|
302
|
+
if ($[42] !== portalContainerName || $[43] !== t12) {
|
|
303
|
+
t13 = /*#__PURE__*/jsx(Portal, {
|
|
326
304
|
containerName: portalContainerName,
|
|
327
|
-
children:
|
|
305
|
+
children: t12
|
|
328
306
|
});
|
|
329
|
-
$[
|
|
330
|
-
$[
|
|
331
|
-
$[
|
|
307
|
+
$[42] = portalContainerName;
|
|
308
|
+
$[43] = t12;
|
|
309
|
+
$[44] = t13;
|
|
332
310
|
} else {
|
|
333
|
-
|
|
311
|
+
t13 = $[44];
|
|
334
312
|
}
|
|
335
|
-
return
|
|
313
|
+
return t13;
|
|
336
314
|
});
|
|
337
315
|
|
|
338
316
|
export { BaseOverlay, Overlay as default, heightMap };
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import type { ResponsiveValue } from '../hooks/useResponsiveValue';
|
|
3
3
|
import type { LinkProps as BaseLinkProps } from '../Link';
|
|
4
4
|
import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
|
|
5
|
-
import type { AriaRole } from '../utils/types';
|
|
5
|
+
import type { AriaRole, FCWithSlotMarker } from '../utils/types';
|
|
6
6
|
export type ChildrenPropTypes = {
|
|
7
7
|
className?: string;
|
|
8
8
|
hidden?: boolean | ResponsiveValue<boolean>;
|
|
@@ -31,12 +31,12 @@ export type NavigationProps = {
|
|
|
31
31
|
'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
|
|
32
32
|
} & ChildrenPropTypes;
|
|
33
33
|
export declare const PageHeader: PolymorphicForwardRefComponent<"div", PageHeaderProps> & {
|
|
34
|
-
ContextArea:
|
|
34
|
+
ContextArea: FCWithSlotMarker<React.PropsWithChildren<ChildrenPropTypes>>;
|
|
35
35
|
ParentLink: PolymorphicForwardRefComponent<"a", ParentLinkProps>;
|
|
36
36
|
ContextBar: React.FC<React.PropsWithChildren<ChildrenPropTypes>>;
|
|
37
37
|
TitleArea: PolymorphicForwardRefComponent<"div", TitleAreaProps>;
|
|
38
38
|
ContextAreaActions: React.FC<React.PropsWithChildren<ChildrenPropTypes>>;
|
|
39
|
-
LeadingAction:
|
|
39
|
+
LeadingAction: FCWithSlotMarker<React.PropsWithChildren<ChildrenPropTypes>>;
|
|
40
40
|
Breadcrumbs: React.FC<React.PropsWithChildren<ChildrenPropTypes>>;
|
|
41
41
|
LeadingVisual: React.FC<React.PropsWithChildren<ChildrenPropTypes>>;
|
|
42
42
|
Title: React.FC<React.PropsWithChildren<TitleProps>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../src/PageHeader/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,6BAA6B,CAAA;AAIhE,OAAO,KAAK,EAAC,SAAS,IAAI,aAAa,EAAC,MAAM,SAAS,CAAA;AAGvD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAI/F,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,gBAAgB,CAAA;
|
|
1
|
+
{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../src/PageHeader/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,6BAA6B,CAAA;AAIhE,OAAO,KAAK,EAAC,SAAS,IAAI,aAAa,EAAC,MAAM,SAAS,CAAA;AAGvD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAI/F,OAAO,KAAK,EAAC,QAAQ,EAAE,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AAO9D,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC,OAAO,CAAC,CAAA;CAC5C,CAAA;AAkBD,MAAM,MAAM,eAAe,GAAG;IAC5B,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,QAAQ,GAAG,KAAK,CAAA;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AA0FD,KAAK,SAAS,GAAG,IAAI,CACnB,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG,aAAa,EAC7D,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,gBAAgB,GAAG,IAAI,CAC1G,GAAG;IACF,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;CAClD,CAAA;AACD,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,GAAG,SAAS,CAAC,CAAA;AAuDpF,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,eAAe,CAAC,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;CAC7F,GAAG,iBAAiB,CAAA;AAsErB,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC7C,GAAG,iBAAiB,CAAA;AAiDrB,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAA;AAmBrE,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;IAClB,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD,iBAAiB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;CAC5D,GAAG,iBAAiB,CAAA;AAsFrB,eAAO,MAAM,UAAU;;;;;;;;;;;;+CA3GiC,YAAY;;;CA0HlE,CAAA"}
|
|
@@ -6,6 +6,7 @@ import { areAllValuesTheSame, haveRegularAndWideSameValue } from '../utils/getBr
|
|
|
6
6
|
import { warning } from '../utils/warning.js';
|
|
7
7
|
import { clsx } from 'clsx';
|
|
8
8
|
import classes from './PageHeader.module.css.js';
|
|
9
|
+
import { isSlot } from '../utils/is-slot.js';
|
|
9
10
|
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
10
11
|
import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate.js';
|
|
11
12
|
import Heading from '../Heading/Heading.js';
|
|
@@ -58,10 +59,10 @@ const Root = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
|
|
|
58
59
|
return;
|
|
59
60
|
}
|
|
60
61
|
for (const child_0 of React.Children.toArray(children)) {
|
|
61
|
-
if (/*#__PURE__*/React.isValidElement(child_0) && child_0.type === ContextArea) {
|
|
62
|
+
if (/*#__PURE__*/React.isValidElement(child_0) && (child_0.type === ContextArea || isSlot(child_0, ContextArea))) {
|
|
62
63
|
hasContextArea = true;
|
|
63
64
|
}
|
|
64
|
-
if (/*#__PURE__*/React.isValidElement(child_0) && child_0.type === LeadingAction) {
|
|
65
|
+
if (/*#__PURE__*/React.isValidElement(child_0) && (child_0.type === LeadingAction || isSlot(child_0, LeadingAction))) {
|
|
65
66
|
hasLeadingAction = true;
|
|
66
67
|
}
|
|
67
68
|
}
|
|
@@ -155,6 +156,7 @@ const ContextArea = t0 => {
|
|
|
155
156
|
}
|
|
156
157
|
return t4;
|
|
157
158
|
};
|
|
159
|
+
ContextArea.__SLOT__ = Symbol('PageHeader.ContextArea');
|
|
158
160
|
// PageHeader.ParentLink : Only visible on narrow viewports by default to let users navigate up in the hierarchy.
|
|
159
161
|
const ParentLink = /*#__PURE__*/React.forwardRef((t0, ref) => {
|
|
160
162
|
const $ = c(15);
|
|
@@ -415,6 +417,7 @@ const LeadingAction = t0 => {
|
|
|
415
417
|
}
|
|
416
418
|
return t4;
|
|
417
419
|
};
|
|
420
|
+
LeadingAction.__SLOT__ = Symbol('PageHeader.LeadingAction');
|
|
418
421
|
|
|
419
422
|
// This is reserved for only breadcrumbs.
|
|
420
423
|
const Breadcrumbs = t0 => {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
body[data-page-layout-dragging=true]{cursor:col-resize}body[data-page-layout-dragging=true] *{-webkit-user-select:none;user-select:none}.prc-PageLayout-PageLayoutRoot-1zlEO{--region-order-header:0;--region-order-pane-start:1;--region-order-content:2;--region-order-pane-end:3;--region-order-footer:4;--spacing-none:0;--spacing-condensed:var(--base-size-16,1rem);--spacing-normal:var(--base-size-16,1rem)}@media screen and (min-width:1012px){.prc-PageLayout-PageLayoutRoot-1zlEO{--spacing-normal:var(--base-size-24,1.5rem)}}.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-width-small:100%;--pane-width-medium:100%;--pane-width-large:100%;--pane-max-width-diff:511px}@media screen and (min-width:768px){.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-width-small:240px;--pane-width-medium:256px;--pane-width-large:256px}}@media screen and (min-width:1012px){.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-width-small:256px;--pane-width-medium:296px;--pane-width-large:320px}}@media screen and (min-width:1280px){.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-max-width-diff:959px}}.prc-PageLayout-PageLayoutRoot-1zlEO{--spacing:0;--spacing-row:0;--spacing-column:0;--spacing-divider:0;--offset-header:0;--pane-width:0;--pane-min-width:0;--pane-max-width:0;--pane-width-custom:0;--pane-width-size:0;padding:var(--spacing)}.prc-PageLayout-PageLayoutWrapper-s2ao4{display:flex;flex-wrap:wrap;margin-left:auto;margin-right:auto}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=medium]){max-width:768px}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=large]){max-width:1012px}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=full]){max-width:100%}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=xlarge]){max-width:1280px}.prc-PageLayout-PageLayoutContent-jzDMn{display:flex;flex:1 1 100%;flex-wrap:wrap;max-width:100%}.prc-PageLayout-HorizontalDivider-CYLp5{margin-left:calc(var(--spacing-divider)*-1);margin-right:calc(var(--spacing-divider)*-1)}.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant=none]){display:none}.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;height:1px}.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant=filled]){background-color:var(--bgColor-inset,var(--color-canvas-inset));box-shadow:inset 0 -1px 0 0 var(--borderColor-default,var(--color-border-default)),inset 0 1px 0 0 var(--borderColor-default,var(--color-border-default));display:block;height:var(--base-size-8,.5rem)}@media screen and (min-width:768px){.prc-PageLayout-HorizontalDivider-CYLp5{margin-left:0!important;margin-right:0!important}}.prc-PageLayout-VerticalDivider-4A4Qm{height:100%;position:relative}.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant=none]){display:none}.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;width:1px}.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant=filled]){background-color:var(--bgColor-inset,var(--color-canvas-inset));box-shadow:inset -1px 0 0 0 var(--borderColor-default,var(--color-border-default)),inset 1px 0 0 0 var(--borderColor-default,var(--color-border-default));display:block;width:var(--base-size-8,.5rem)}.prc-PageLayout-Header-mQXK1{margin-bottom:var(--spacing);width:100%}.prc-PageLayout-HeaderContent-dVIQb{padding:var(--spacing)}.prc-PageLayout-HeaderHorizontalDivider-bofyb{margin-top:var(--spacing)}.prc-PageLayout-ContentWrapper-b-QRo{display:flex;flex-basis:0;flex-direction:column;flex-grow:1;flex-shrink:1;min-width:1px;order:var(--region-order-content)}.prc-PageLayout-ContentWrapper-b-QRo:where([data-is-hidden=true]){display:none}.prc-PageLayout-Content--F7-I{flex-grow:1;margin-left:auto;margin-right:auto;padding:var(--spacing);width:100%}.prc-PageLayout-Content--F7-I:where([data-width=medium]){max-width:768px}.prc-PageLayout-Content--F7-I:where([data-width=large]){max-width:1012px}.prc-PageLayout-Content--F7-I:where([data-width=full]){max-width:100%}.prc-PageLayout-Content--F7-I:where([data-width=xlarge]){max-width:1280px}.prc-PageLayout-PaneWrapper-nGO0U{display:flex;margin-left:0;margin-right:0;width:100%}.prc-PageLayout-PaneWrapper-nGO0U:where([data-is-hidden=true]){display:none}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=end]){flex-direction:column;margin-top:var(--spacing-row);order:var(--region-order-pane-end)}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=start]){flex-direction:column-reverse;margin-bottom:var(--spacing-row);order:var(--region-order-pane-start)}@media screen and (min-width:768px){.prc-PageLayout-PaneWrapper-nGO0U{margin-bottom:0!important;margin-top:0!important;width:auto}.prc-PageLayout-PaneWrapper-nGO0U:where([data-sticky]){max-height:100vh;position:sticky;top:var(--offset-header)}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=end]){flex-direction:row-reverse;margin-left:var(--spacing-column)}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=start]){flex-direction:row;margin-right:var(--spacing-column)}}.prc-PageLayout-PaneVerticalDivider-1c9vy:where([data-position=start]){margin-left:var(--spacing)}.prc-PageLayout-PaneVerticalDivider-1c9vy:where([data-position=end]){margin-right:var(--spacing)}.prc-PageLayout-Pane-Vl5LI{padding:var(--spacing);width:var(--pane-width-size)}@media screen and (min-width:768px){.prc-PageLayout-Pane-Vl5LI{overflow:auto}}.prc-PageLayout-Pane-Vl5LI:where([data-resizable]){width:100%}@media screen and (min-width:768px){.prc-PageLayout-Pane-Vl5LI:where([data-resizable]){width:clamp(var(--pane-min-width),var(--pane-width),var(--pane-max-width))}}.prc-PageLayout-PaneHorizontalDivider-4exOb:where([data-position=start]){margin-top:var(--spacing)}.prc-PageLayout-PaneHorizontalDivider-4exOb:where([data-position=end]){margin-bottom:var(--spacing)}.prc-PageLayout-FooterWrapper-WZwgZ{margin-top:var(--spacing);order:var(--region-order-footer);width:100%}.prc-PageLayout-FooterHorizontalDivider-sNLmj{margin-bottom:var(--spacing)}.prc-PageLayout-FooterContent-UFWGW{padding:var(--spacing)}
|
|
2
|
-
/*# sourceMappingURL=PageLayout-
|
|
1
|
+
body[data-page-layout-dragging=true]{cursor:col-resize}body[data-page-layout-dragging=true] *{-webkit-user-select:none;user-select:none}.prc-PageLayout-PageLayoutRoot-1zlEO{--region-order-header:0;--region-order-pane-start:1;--region-order-content:2;--region-order-pane-end:3;--region-order-footer:4;--spacing-none:0;--spacing-condensed:var(--base-size-16,1rem);--spacing-normal:var(--base-size-16,1rem)}@media screen and (min-width:1012px){.prc-PageLayout-PageLayoutRoot-1zlEO{--spacing-normal:var(--base-size-24,1.5rem)}}.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-width-small:100%;--pane-width-medium:100%;--pane-width-large:100%;--pane-max-width-diff:511px}@media screen and (min-width:768px){.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-width-small:240px;--pane-width-medium:256px;--pane-width-large:256px}}@media screen and (min-width:1012px){.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-width-small:256px;--pane-width-medium:296px;--pane-width-large:320px}}@media screen and (min-width:1280px){.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-max-width-diff:959px}}.prc-PageLayout-PageLayoutRoot-1zlEO{--spacing:0;--spacing-row:0;--spacing-column:0;--spacing-divider:0;--offset-header:0;--pane-width:0;--pane-min-width:0;--pane-max-width:0;--pane-width-custom:0;--pane-width-size:0;padding:var(--spacing)}.prc-PageLayout-PageLayoutWrapper-s2ao4{display:flex;flex-wrap:wrap;margin-left:auto;margin-right:auto}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=medium]){max-width:768px}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=large]){max-width:1012px}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=full]){max-width:100%}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=xlarge]){max-width:1280px}.prc-PageLayout-PageLayoutContent-jzDMn{display:flex;flex:1 1 100%;flex-wrap:wrap;max-width:100%}.prc-PageLayout-HorizontalDivider-CYLp5{margin-left:calc(var(--spacing-divider)*-1);margin-right:calc(var(--spacing-divider)*-1)}.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant=none]){display:none}.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;height:1px}.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant=filled]){background-color:var(--bgColor-inset,var(--color-canvas-inset));box-shadow:inset 0 -1px 0 0 var(--borderColor-default,var(--color-border-default)),inset 0 1px 0 0 var(--borderColor-default,var(--color-border-default));display:block;height:var(--base-size-8,.5rem)}@media screen and (min-width:768px){.prc-PageLayout-HorizontalDivider-CYLp5{margin-left:0!important;margin-right:0!important}}.prc-PageLayout-VerticalDivider-4A4Qm{height:100%;position:relative}.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant=none]){display:none}.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;width:1px}.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant=filled]){background-color:var(--bgColor-inset,var(--color-canvas-inset));box-shadow:inset -1px 0 0 0 var(--borderColor-default,var(--color-border-default)),inset 1px 0 0 0 var(--borderColor-default,var(--color-border-default));display:block;width:var(--base-size-8,.5rem)}.prc-PageLayout-Header-mQXK1{margin-bottom:var(--spacing);width:100%}.prc-PageLayout-HeaderContent-dVIQb{padding:var(--spacing)}.prc-PageLayout-HeaderHorizontalDivider-bofyb{margin-top:var(--spacing)}.prc-PageLayout-ContentWrapper-b-QRo{display:flex;flex-basis:0;flex-direction:column;flex-grow:1;flex-shrink:1;min-width:1px;order:var(--region-order-content)}.prc-PageLayout-ContentWrapper-b-QRo:where([data-is-hidden=true]){display:none}.prc-PageLayout-Content--F7-I{flex-grow:1;margin-left:auto;margin-right:auto;padding:var(--spacing);width:100%}.prc-PageLayout-Content--F7-I:where([data-width=medium]){max-width:768px}.prc-PageLayout-Content--F7-I:where([data-width=large]){max-width:1012px}.prc-PageLayout-Content--F7-I:where([data-width=full]){max-width:100%}.prc-PageLayout-Content--F7-I:where([data-width=xlarge]){max-width:1280px}.prc-PageLayout-PaneWrapper-nGO0U{display:flex;margin-left:0;margin-right:0;width:100%}.prc-PageLayout-PaneWrapper-nGO0U:where([data-is-hidden=true]){display:none}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=end]){flex-direction:column;margin-top:var(--spacing-row);order:var(--region-order-pane-end)}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=start]){flex-direction:column-reverse;margin-bottom:var(--spacing-row);order:var(--region-order-pane-start)}@media screen and (min-width:768px){.prc-PageLayout-PaneWrapper-nGO0U{margin-bottom:0!important;margin-top:0!important;width:auto}.prc-PageLayout-PaneWrapper-nGO0U:where([data-sticky]){max-height:100vh;position:sticky;top:var(--offset-header)}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=end]){flex-direction:row-reverse;margin-left:var(--spacing-column)}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=start]){flex-direction:row;margin-right:var(--spacing-column)}}.prc-PageLayout-PaneVerticalDivider-1c9vy:where([data-position=start]){margin-left:var(--spacing)}.prc-PageLayout-PaneVerticalDivider-1c9vy:where([data-position=end]){margin-right:var(--spacing)}.prc-PageLayout-Pane-Vl5LI{padding:var(--spacing);width:var(--pane-width-size)}@media screen and (min-width:768px){.prc-PageLayout-Pane-Vl5LI{overflow:auto}}.prc-PageLayout-Pane-Vl5LI:where([data-resizable]){width:100%}@media screen and (min-width:768px){.prc-PageLayout-Pane-Vl5LI:where([data-resizable]){width:clamp(var(--pane-min-width),var(--pane-width),var(--pane-max-width))}}.prc-PageLayout-PaneHorizontalDivider-4exOb:where([data-position=start]){margin-top:var(--spacing)}.prc-PageLayout-PaneHorizontalDivider-4exOb:where([data-position=end]){margin-bottom:var(--spacing)}.prc-PageLayout-FooterWrapper-WZwgZ{margin-top:var(--spacing);order:var(--region-order-footer);width:100%}.prc-PageLayout-FooterHorizontalDivider-sNLmj{margin-bottom:var(--spacing)}.prc-PageLayout-FooterContent-UFWGW{padding:var(--spacing)}.prc-PageLayout-DraggableHandle-zPw82{background-color:transparent;cursor:col-resize;inset:0 -2px;position:absolute;transition-delay:.1s}.prc-PageLayout-DraggableHandle-zPw82:hover{background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle))}.prc-PageLayout-DraggableHandle-zPw82[data-dragging=true],.prc-PageLayout-DraggableHandle-zPw82[data-dragging=true]:hover{background-color:var(--bgColor-accent-emphasis,var(--color-accent-emphasis))}
|
|
2
|
+
/*# sourceMappingURL=PageLayout-a276fa3b.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/PageLayout/PageLayout.module.css"],"names":[],"mappings":"AAEA,qCACE,iBACF,CAIA,uCACE,wBAAiB,CAAjB,gBACF,CAEA,qCAEE,uBAAwB,CACxB,2BAA4B,CAC5B,wBAAyB,CACzB,yBAA0B,CAC1B,uBAAwB,CAGxB,gBAAiB,CACjB,4CAAwC,CACxC,yCA0CF,CAxCE,qCAbF,qCAcI,2CAuCJ,CAtCE,CAfF,qCAkBE,uBAAwB,CACxB,wBAAyB,CACzB,uBAAwB,CACxB,2BAgCF,CA9BE,oCAvBF,qCAwBI,wBAAyB,CACzB,yBAA0B,CAC1B,wBA2BJ,CA1BE,CAEA,qCA7BF,qCA8BI,wBAAyB,CACzB,yBAA0B,CAC1B,wBAqBJ,CApBE,CAEA,qCAnCF,qCAoCI,2BAiBJ,CAhBE,CArCF,qCAwCE,WAAY,CACZ,eAAgB,CAChB,kBAAmB,CACnB,mBAAoB,CACpB,iBAAkB,CAClB,cAAe,CACf,kBAAmB,CACnB,kBAAmB,CACnB,qBAAsB,CACtB,mBAAoB,CAGpB,sBACF,CAEA,wCACE,YAAa,CAGb,cAAe,CADf,gBAAiB,CADjB,iBAmBF,CAfE,mEACE,eACF,CAEA,kEACE,gBACF,CAEA,iEACE,cACF,CAEA,mEACE,gBACF,CAGF,wCACE,YAAa,CACb,aAAc,CACd,cAAe,CACf,cACF,CAEA,wCAIE,2CAA8C,CAF9C,4CA6BF,CAzBE,mEACE,YACF,CAEA,mEAIE,uEAA4C,CAH5C,aAAc,CACd,UAGF,CAEA,qEAGE,+DAAsC,CACtC,yJAG4C,CAN5C,aAAc,CACd,+BAMF,CAEA,oCA3BF,wCA6BI,uBAAyB,CADzB,wBAGJ,CADE,CAGF,sCAEE,WAAY,CADZ,iBAuBF,CApBE,iEACE,YACF,CAEA,iEAIE,uEAA4C,CAH5C,aAAc,CACd,SAGF,CAEA,mEAGE,+DAAsC,CACtC,yJAG4C,CAN5C,aAAc,CACd,8BAMF,CAGF,6BAGE,4BAA6B,CAF7B,UAGF,CAEA,oCAEE,sBACF,CAEA,8CAEE,yBACF,CAEA,qCACE,YAAa,CAUb,YAAa,CANb,qBAAsB,CAOtB,WAAY,CACZ,aAAc,CATd,aAAc,CAEd,iCAYF,CAHE,kEACE,YACF,CAGF,8BAOE,WAAY,CADZ,gBAAiB,CADjB,iBAAkB,CADlB,sBAAuB,CAHvB,UAuBF,CAfE,yDACE,eACF,CAEA,wDACE,gBACF,CAEA,uDACE,cACF,CAEA,yDACE,gBACF,CAGF,kCACE,YAAa,CAGb,aAAc,CADd,cAAe,CADf,UA8CF,CA1CE,+DACE,YACF,CAEA,6DAGE,qBAAsB,CADtB,6BAA8B,CAE9B,kCACF,CAEA,+DAGE,6BAA8B,CAD9B,gCAAiC,CAEjC,oCACF,CAEA,oCAxBF,kCA2BI,yBAA2B,CAD3B,sBAAwB,CADxB,UAuBJ,CAnBI,uDAIE,gBAAiB,CAHjB,eAAgB,CAEhB,wBAEF,CAEA,6DAGE,0BAA2B,CAD3B,iCAEF,CAEA,+DAGE,kBAAmB,CADnB,kCAEF,CACF,CAIA,uEAEE,0BACF,CAEA,qEAEE,2BACF,CAGF,2BAGE,sBAAuB,CAFvB,4BAeF,CAXE,oCALF,2BAMI,aAUJ,CATE,CAEA,mDACE,UAKF,CAHE,oCAHF,mDAII,0EAEJ,CADE,CAKF,yEAEE,yBACF,CAEA,uEAEE,4BACF,CAGF,oCAKE,yBAA0B,CAH1B,gCAAiC,CADjC,UAKF,CAEA,8CAEE,4BACF,CAEA,oCAEE,sBACF,CAEA,sCAIE,4BAA6B,CAD7B,iBAAkB,CADlB,YAAa,CADb,iBAAkB,CAIlB,oBACF,CAEA,4CACE,yEACF,CAMA,0HACE,4EACF","file":"PageLayout-a276fa3b.css","sourcesContent":["/* Maintain resize cursor while dragging */\n/* stylelint-disable-next-line selector-no-qualifying-type */\nbody[data-page-layout-dragging='true'] {\n cursor: col-resize;\n}\n\n/* Disable text selection while dragging */\n/* stylelint-disable-next-line selector-no-qualifying-type */\nbody[data-page-layout-dragging='true'] * {\n user-select: none;\n}\n\n.PageLayoutRoot {\n /* Region Order */\n --region-order-header: 0;\n --region-order-pane-start: 1;\n --region-order-content: 2;\n --region-order-pane-end: 3;\n --region-order-footer: 4;\n\n /* Spacing Values */\n --spacing-none: 0;\n --spacing-condensed: var(--base-size-16);\n --spacing-normal: var(--base-size-16);\n\n @media screen and (min-width: 1012px) {\n --spacing-normal: var(--base-size-24);\n }\n\n /* Pane Width Values */\n --pane-width-small: 100%;\n --pane-width-medium: 100%;\n --pane-width-large: 100%;\n --pane-max-width-diff: 511px;\n\n @media screen and (min-width: 768px) {\n --pane-width-small: 240px;\n --pane-width-medium: 256px;\n --pane-width-large: 256px;\n }\n\n @media screen and (min-width: 1012px) {\n --pane-width-small: 256px;\n --pane-width-medium: 296px;\n --pane-width-large: 320px;\n }\n\n @media screen and (min-width: 1280px) {\n --pane-max-width-diff: 959px;\n }\n\n /* These following CSS variables are dynamic values that get overridden by styles passed in via props. */\n --spacing: 0;\n --spacing-row: 0;\n --spacing-column: 0;\n --spacing-divider: 0;\n --offset-header: 0;\n --pane-width: 0;\n --pane-min-width: 0;\n --pane-max-width: 0;\n --pane-width-custom: 0;\n --pane-width-size: 0;\n\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n}\n\n.PageLayoutWrapper {\n display: flex;\n margin-right: auto;\n margin-left: auto;\n flex-wrap: wrap;\n\n &:where([data-width='medium']) {\n max-width: 768px;\n }\n\n &:where([data-width='large']) {\n max-width: 1012px;\n }\n\n &:where([data-width='full']) {\n max-width: 100%;\n }\n\n &:where([data-width='xlarge']) {\n max-width: 1280px;\n }\n}\n\n.PageLayoutContent {\n display: flex;\n flex: 1 1 100%;\n flex-wrap: wrap;\n max-width: 100%;\n}\n\n.HorizontalDivider {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: calc(-1 * var(--spacing-divider));\n /* stylelint-disable-next-line primer/spacing */\n margin-left: calc(-1 * var(--spacing-divider));\n\n &:where([data-variant='none']) {\n display: none;\n }\n\n &:where([data-variant='line']) {\n display: block;\n height: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant='filled']) {\n display: block;\n height: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset 0 -1px 0 0 var(--borderColor-default),\n inset 0 1px 0 0 var(--borderColor-default);\n }\n\n @media screen and (min-width: 768px) {\n margin-right: 0 !important;\n margin-left: 0 !important;\n }\n}\n\n.VerticalDivider {\n position: relative;\n height: 100%;\n\n &:where([data-variant='none']) {\n display: none;\n }\n\n &:where([data-variant='line']) {\n display: block;\n width: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant='filled']) {\n display: block;\n width: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset -1px 0 0 0 var(--borderColor-default),\n inset 1px 0 0 0 var(--borderColor-default);\n }\n}\n\n.Header {\n width: 100%;\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n}\n\n.HeaderContent {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n}\n\n.HeaderHorizontalDivider {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n}\n\n.ContentWrapper {\n display: flex;\n\n /* Hack to prevent overflowing content from pushing the pane region to the next line */\n min-width: 1px;\n flex-direction: column;\n order: var(--region-order-content);\n\n /* Set flex-basis to 0% to allow flex-grow to control the width of the content region.\n Without this, the content region could wrap onto a different line\n than the pane region on wide viewports if its contents are too wide. */\n flex-basis: 0;\n flex-grow: 1;\n flex-shrink: 1;\n\n &:where([data-is-hidden='true']) {\n display: none;\n }\n}\n\n.Content {\n width: 100%;\n\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n margin-right: auto;\n margin-left: auto;\n flex-grow: 1;\n\n &:where([data-width='medium']) {\n max-width: 768px;\n }\n\n &:where([data-width='large']) {\n max-width: 1012px;\n }\n\n &:where([data-width='full']) {\n max-width: 100%;\n }\n\n &:where([data-width='xlarge']) {\n max-width: 1280px;\n }\n}\n\n.PaneWrapper {\n display: flex;\n width: 100%;\n margin-right: 0;\n margin-left: 0;\n\n &:where([data-is-hidden='true']) {\n display: none;\n }\n\n &:where([data-position='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing-row);\n flex-direction: column;\n order: var(--region-order-pane-end);\n }\n\n &:where([data-position='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing-row);\n flex-direction: column-reverse;\n order: var(--region-order-pane-start);\n }\n\n @media screen and (min-width: 768px) {\n width: auto;\n margin-top: 0 !important;\n margin-bottom: 0 !important;\n\n &:where([data-sticky]) {\n position: sticky;\n /* stylelint-disable-next-line primer/spacing */\n top: var(--offset-header);\n max-height: 100vh;\n }\n\n &:where([data-position='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing-column);\n flex-direction: row-reverse;\n }\n\n &:where([data-position='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing-column);\n flex-direction: row;\n }\n }\n}\n\n.PaneVerticalDivider {\n &:where([data-position='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing);\n }\n\n &:where([data-position='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing);\n }\n}\n\n.Pane {\n width: var(--pane-width-size);\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n\n @media screen and (min-width: 768px) {\n overflow: auto;\n }\n\n &:where([data-resizable]) {\n width: 100%;\n\n @media screen and (min-width: 768px) {\n width: clamp(var(--pane-min-width), var(--pane-width), var(--pane-max-width));\n }\n }\n}\n\n.PaneHorizontalDivider {\n &:where([data-position='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n }\n\n &:where([data-position='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n }\n}\n\n.FooterWrapper {\n width: 100%;\n order: var(--region-order-footer);\n\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n}\n\n.FooterHorizontalDivider {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n}\n\n.FooterContent {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n}\n\n.DraggableHandle {\n position: absolute;\n inset: 0 -2px;\n cursor: col-resize;\n background-color: transparent;\n transition-delay: 0.1s;\n}\n\n.DraggableHandle:hover {\n background-color: var(--bgColor-neutral-muted);\n}\n\n.DraggableHandle[data-dragging='true'] {\n background-color: var(--bgColor-accent-emphasis);\n}\n\n.DraggableHandle[data-dragging='true']:hover {\n background-color: var(--bgColor-accent-emphasis);\n}\n"]}
|