@primer/components 0.0.0-202181722217 → 0.0.0-202181723821
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +23 -1
- package/dist/browser.esm.js +665 -619
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +432 -386
- package/dist/browser.umd.js.map +1 -1
- package/lib/ActionList/Divider.js +1 -1
- package/lib/ActionList/Header.js +2 -2
- package/lib/ActionList/Item.js +13 -13
- package/lib/ActionList/List.js +1 -1
- package/lib/AnchoredOverlay/AnchoredOverlay.js +2 -2
- package/lib/Avatar.d.ts +4 -0
- package/lib/AvatarPair.js +1 -1
- package/lib/AvatarStack.js +1 -1
- package/lib/BranchName.js +1 -1
- package/lib/Breadcrumb.js +2 -2
- package/lib/Button/Button.js +1 -1
- package/lib/Button/ButtonClose.js +1 -1
- package/lib/Button/ButtonInvisible.js +1 -1
- package/lib/Button/ButtonTableList.js +1 -1
- package/lib/CircleBadge.js +1 -1
- package/lib/CircleOcticon.js +1 -1
- package/lib/CounterLabel.js +2 -2
- package/lib/Dialog/ConfirmationDialog.js +1 -1
- package/lib/Dialog/Dialog.js +9 -9
- package/lib/Dialog.js +4 -4
- package/lib/Dropdown.js +2 -2
- package/lib/DropdownStyles.js +6 -6
- package/lib/FilterList.js +1 -1
- package/lib/FilteredActionList/FilteredActionList.js +5 -5
- package/lib/Flash.js +1 -1
- package/lib/Label.js +2 -2
- package/lib/Link.js +1 -1
- package/lib/Overlay.d.ts +1 -2
- package/lib/Overlay.js +6 -11
- package/lib/Pagehead.js +1 -1
- package/lib/Pagination/Pagination.js +1 -1
- package/lib/Popover.js +1 -1
- package/lib/ProgressBar.js +1 -1
- package/lib/SelectMenu/SelectMenu.d.ts +11 -327
- package/lib/SelectMenu/SelectMenuDivider.js +1 -1
- package/lib/SelectMenu/SelectMenuFilter.d.ts +1 -1
- package/lib/SelectMenu/SelectMenuFilter.js +1 -1
- package/lib/SelectMenu/SelectMenuFooter.js +1 -1
- package/lib/SelectMenu/SelectMenuHeader.js +2 -2
- package/lib/SelectMenu/SelectMenuItem.js +1 -1
- package/lib/SelectMenu/SelectMenuList.js +1 -1
- package/lib/SelectMenu/SelectMenuLoadingAnimation.js +1 -1
- package/lib/SelectMenu/SelectMenuModal.js +2 -2
- package/lib/SelectMenu/SelectMenuTab.js +1 -1
- package/lib/SelectMenu/SelectMenuTabPanel.js +1 -1
- package/lib/SideNav.js +5 -5
- package/lib/StateLabel.js +1 -1
- package/lib/SubNav.js +1 -1
- package/lib/TabNav.js +2 -2
- package/lib/TextInput.d.ts +6 -6
- package/lib/TextInput.js +21 -16
- package/lib/Timeline.js +16 -19
- package/lib/Tooltip.js +1 -1
- package/lib/UnderlineNav.js +2 -2
- package/lib/hooks/useOverlay.d.ts +1 -2
- package/lib/hooks/useOverlay.js +6 -11
- package/lib/index.d.ts +1 -0
- package/lib/index.js +14 -0
- package/lib/theme-preval.d.ts +12 -6
- package/lib/theme-preval.js +940 -0
- package/lib/utils/ssr.d.ts +1 -0
- package/lib/utils/ssr.js +19 -0
- package/lib/utils/testing.d.ts +1854 -0
- package/lib/utils/uniqueId.js +1 -0
- package/lib-esm/ActionList/Divider.js +1 -1
- package/lib-esm/ActionList/Header.js +2 -2
- package/lib-esm/ActionList/Item.js +14 -14
- package/lib-esm/ActionList/List.js +1 -1
- package/lib-esm/AnchoredOverlay/AnchoredOverlay.js +3 -3
- package/lib-esm/Avatar.d.ts +4 -0
- package/lib-esm/AvatarPair.js +1 -1
- package/lib-esm/AvatarStack.js +1 -1
- package/lib-esm/BranchName.js +1 -1
- package/lib-esm/Breadcrumb.js +2 -2
- package/lib-esm/Button/Button.js +1 -1
- package/lib-esm/Button/ButtonClose.js +1 -1
- package/lib-esm/Button/ButtonInvisible.js +1 -1
- package/lib-esm/Button/ButtonTableList.js +1 -1
- package/lib-esm/CircleBadge.js +1 -1
- package/lib-esm/CircleOcticon.js +1 -1
- package/lib-esm/CounterLabel.js +2 -2
- package/lib-esm/Dialog/ConfirmationDialog.js +1 -1
- package/lib-esm/Dialog/Dialog.js +8 -8
- package/lib-esm/Dialog.js +4 -4
- package/lib-esm/Dropdown.js +2 -2
- package/lib-esm/DropdownStyles.js +6 -6
- package/lib-esm/FilterList.js +1 -1
- package/lib-esm/FilteredActionList/FilteredActionList.js +5 -5
- package/lib-esm/Flash.js +1 -1
- package/lib-esm/Label.js +2 -2
- package/lib-esm/Link.js +1 -1
- package/lib-esm/Overlay.d.ts +1 -2
- package/lib-esm/Overlay.js +6 -9
- package/lib-esm/Pagehead.js +1 -1
- package/lib-esm/Pagination/Pagination.js +1 -1
- package/lib-esm/Popover.js +1 -1
- package/lib-esm/ProgressBar.js +1 -1
- package/lib-esm/SelectMenu/SelectMenu.d.ts +11 -327
- package/lib-esm/SelectMenu/SelectMenuDivider.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuFilter.d.ts +1 -1
- package/lib-esm/SelectMenu/SelectMenuFilter.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuFooter.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuHeader.js +2 -2
- package/lib-esm/SelectMenu/SelectMenuItem.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuList.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuLoadingAnimation.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuModal.js +2 -2
- package/lib-esm/SelectMenu/SelectMenuTab.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuTabPanel.js +1 -1
- package/lib-esm/SideNav.js +5 -5
- package/lib-esm/StateLabel.js +1 -1
- package/lib-esm/SubNav.js +1 -1
- package/lib-esm/TabNav.js +2 -2
- package/lib-esm/TextInput.d.ts +6 -6
- package/lib-esm/TextInput.js +22 -16
- package/lib-esm/Timeline.js +12 -17
- package/lib-esm/Tooltip.js +1 -1
- package/lib-esm/UnderlineNav.js +2 -2
- package/lib-esm/hooks/useOverlay.d.ts +1 -2
- package/lib-esm/hooks/useOverlay.js +6 -11
- package/lib-esm/index.d.ts +1 -0
- package/lib-esm/index.js +2 -1
- package/lib-esm/theme-preval.d.ts +12 -6
- package/lib-esm/theme-preval.js +940 -0
- package/lib-esm/utils/ssr.d.ts +1 -0
- package/lib-esm/utils/ssr.js +1 -0
- package/lib-esm/utils/testing.d.ts +1854 -0
- package/lib-esm/utils/uniqueId.js +1 -0
- package/package.json +5 -6
- package/lib/Autocomplete/Autocomplete.d.ts +0 -36
- package/lib/Autocomplete/Autocomplete.js +0 -55
- package/lib/Autocomplete/AutocompleteContext.d.ts +0 -13
- package/lib/Autocomplete/AutocompleteContext.js +0 -14
- package/lib/Autocomplete/AutocompleteInput.d.ts +0 -9
- package/lib/Autocomplete/AutocompleteInput.js +0 -123
- package/lib/Autocomplete/AutocompleteMenu.d.ts +0 -20
- package/lib/Autocomplete/AutocompleteMenu.js +0 -268
- package/lib/Autocomplete/index.d.ts +0 -2
- package/lib/Autocomplete/index.js +0 -15
- package/lib/Badge/Badge.d.ts +0 -8
- package/lib/Badge/Badge.js +0 -59
- package/lib/Badge/BadgeState.d.ts +0 -13
- package/lib/Badge/BadgeState.js +0 -51
- package/lib/Badge/_badgeStyleUtils.d.ts +0 -3
- package/lib/Badge/_badgeStyleUtils.js +0 -39
- package/lib/TextInputTokens.d.ts +0 -32
- package/lib/TextInputTokens.js +0 -241
- package/lib/TextInputWithTokens.d.ts +0 -41
- package/lib/TextInputWithTokens.js +0 -396
- package/lib/Token/Token.d.ts +0 -7
- package/lib/Token/Token.js +0 -66
- package/lib/Token/TokenBase.d.ts +0 -16
- package/lib/Token/TokenBase.js +0 -76
- package/lib/Token/TokenLabel.d.ts +0 -8
- package/lib/Token/TokenLabel.js +0 -116
- package/lib/Token/TokenProfile.d.ts +0 -7
- package/lib/Token/TokenProfile.js +0 -45
- package/lib/Token/_AddTokenButton.d.ts +0 -3
- package/lib/Token/_AddTokenButton.js +0 -42
- package/lib/Token/_RemoveTokenButton.d.ts +0 -3
- package/lib/Token/_RemoveTokenButton.js +0 -42
- package/lib/Token/_tokenButtonUtils.d.ts +0 -8
- package/lib/Token/_tokenButtonUtils.js +0 -42
- package/lib-esm/Autocomplete/Autocomplete.d.ts +0 -36
- package/lib-esm/Autocomplete/Autocomplete.js +0 -36
- package/lib-esm/Autocomplete/AutocompleteContext.d.ts +0 -13
- package/lib-esm/Autocomplete/AutocompleteContext.js +0 -5
- package/lib-esm/Autocomplete/AutocompleteInput.d.ts +0 -9
- package/lib-esm/Autocomplete/AutocompleteInput.js +0 -104
- package/lib-esm/Autocomplete/AutocompleteMenu.d.ts +0 -20
- package/lib-esm/Autocomplete/AutocompleteMenu.js +0 -244
- package/lib-esm/Autocomplete/index.d.ts +0 -2
- package/lib-esm/Autocomplete/index.js +0 -1
- package/lib-esm/Badge/Badge.d.ts +0 -8
- package/lib-esm/Badge/Badge.js +0 -44
- package/lib-esm/Badge/BadgeState.d.ts +0 -13
- package/lib-esm/Badge/BadgeState.js +0 -40
- package/lib-esm/Badge/_badgeStyleUtils.d.ts +0 -3
- package/lib-esm/Badge/_badgeStyleUtils.js +0 -29
- package/lib-esm/TextInputTokens.d.ts +0 -32
- package/lib-esm/TextInputTokens.js +0 -211
- package/lib-esm/TextInputWithTokens.d.ts +0 -41
- package/lib-esm/TextInputWithTokens.js +0 -361
- package/lib-esm/Token/Token.d.ts +0 -7
- package/lib-esm/Token/Token.js +0 -46
- package/lib-esm/Token/TokenBase.d.ts +0 -16
- package/lib-esm/Token/TokenBase.js +0 -56
- package/lib-esm/Token/TokenLabel.d.ts +0 -8
- package/lib-esm/Token/TokenLabel.js +0 -100
- package/lib-esm/Token/TokenProfile.d.ts +0 -7
- package/lib-esm/Token/TokenProfile.js +0 -28
- package/lib-esm/Token/_AddTokenButton.d.ts +0 -3
- package/lib-esm/Token/_AddTokenButton.js +0 -27
- package/lib-esm/Token/_RemoveTokenButton.d.ts +0 -3
- package/lib-esm/Token/_RemoveTokenButton.js +0 -27
- package/lib-esm/Token/_tokenButtonUtils.d.ts +0 -8
- package/lib-esm/Token/_tokenButtonUtils.js +0 -26
package/lib/utils/uniqueId.js
CHANGED
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.uniqueId = uniqueId;
|
7
|
+
// Note: uniqueId may be unsafe in SSR contexts if it is used create DOM IDs or otherwise cause a hydration warning. Use useSSRSafeId instead.
|
7
8
|
let idSeed = 10000;
|
8
9
|
|
9
10
|
function uniqueId() {
|
@@ -4,7 +4,7 @@ import { get } from '../constants';
|
|
4
4
|
export const StyledDivider = styled.div.withConfig({
|
5
5
|
displayName: "Divider__StyledDivider",
|
6
6
|
componentId: "sc-42656i-0"
|
7
|
-
})(["height:1px;background:", ";margin-top:calc(", " - 1px);margin-bottom:", ";"], get('colors.
|
7
|
+
})(["height:1px;background:", ";margin-top:calc(", " - 1px);margin-bottom:", ";"], get('colors.border.muted'), get('space.2'), get('space.2'));
|
8
8
|
/**
|
9
9
|
* Visually separates `Item`s or `Group`s in an `ActionList`.
|
10
10
|
*/
|
@@ -11,9 +11,9 @@ import sx from '../sx';
|
|
11
11
|
export const StyledHeader = styled.div.withConfig({
|
12
12
|
displayName: "Header__StyledHeader",
|
13
13
|
componentId: "qmofje-0"
|
14
|
-
})(["{}padding:6px ", ";font-size:", ";font-weight:", ";color:", ";", " ", ""], get('space.3'), get('fontSizes.0'), get('fontWeights.bold'), get('colors.
|
14
|
+
})(["{}padding:6px ", ";font-size:", ";font-weight:", ";color:", ";", " ", ""], get('space.3'), get('fontSizes.0'), get('fontWeights.bold'), get('colors.fg.muted'), ({
|
15
15
|
variant
|
16
|
-
}) => variant === 'filled' && css(["background:", ";margin:", " 0;border-top:1px solid ", ";border-bottom:1px solid ", ";&:first-child{margin-top:0;}"], get('colors.
|
16
|
+
}) => variant === 'filled' && css(["background:", ";margin:", " 0;border-top:1px solid ", ";border-bottom:1px solid ", ";&:first-child{margin-top:0;}"], get('colors.canvas.subtle'), get('space.2'), get('colors.neutral.muted'), get('colors.neutral.muted')), sx);
|
17
17
|
/**
|
18
18
|
* Displays the name and description of a `Group`.
|
19
19
|
*/
|
@@ -1,7 +1,7 @@
|
|
1
1
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
2
2
|
|
3
3
|
import { CheckIcon } from '@primer/octicons-react';
|
4
|
-
import React, { useCallback
|
4
|
+
import React, { useCallback } from 'react';
|
5
5
|
import { get } from '../constants';
|
6
6
|
import sx from '../sx';
|
7
7
|
import Truncate from '../Truncate';
|
@@ -10,7 +10,7 @@ import { StyledHeader } from './Header';
|
|
10
10
|
import { StyledDivider } from './Divider';
|
11
11
|
import { useColorSchemeVar, useTheme } from '../ThemeProvider';
|
12
12
|
import { activeDescendantActivatedDirectly, activeDescendantActivatedIndirectly, isActiveDescendantAttribute } from '../behaviors/focusZone';
|
13
|
-
import {
|
13
|
+
import { useSSRSafeId } from '@react-aria/ssr';
|
14
14
|
/**
|
15
15
|
* These colors are not yet in our default theme. Need to remove this once they are added.
|
16
16
|
*/
|
@@ -48,9 +48,9 @@ const customItemThemes = {
|
|
48
48
|
const getItemVariant = (variant = 'default', disabled) => {
|
49
49
|
if (disabled) {
|
50
50
|
return {
|
51
|
-
color: get('colors.
|
52
|
-
iconColor: get('colors.
|
53
|
-
annotationColor: get('colors.
|
51
|
+
color: get('colors.fg.muted'),
|
52
|
+
iconColor: get('colors.fg.muted'),
|
53
|
+
annotationColor: get('colors.fg.muted'),
|
54
54
|
hoverCursor: 'default'
|
55
55
|
};
|
56
56
|
}
|
@@ -58,17 +58,17 @@ const getItemVariant = (variant = 'default', disabled) => {
|
|
58
58
|
switch (variant) {
|
59
59
|
case 'danger':
|
60
60
|
return {
|
61
|
-
color: get('colors.
|
62
|
-
iconColor: get('colors.
|
63
|
-
annotationColor: get('colors.
|
61
|
+
color: get('colors.danger.fg'),
|
62
|
+
iconColor: get('colors.danger.fg'),
|
63
|
+
annotationColor: get('colors.fg.muted'),
|
64
64
|
hoverCursor: 'pointer'
|
65
65
|
};
|
66
66
|
|
67
67
|
default:
|
68
68
|
return {
|
69
69
|
color: 'inherit',
|
70
|
-
iconColor: get('colors.
|
71
|
-
annotationColor: get('colors.
|
70
|
+
iconColor: get('colors.fg.muted'),
|
71
|
+
annotationColor: get('colors.fg.muted'),
|
72
72
|
hoverCursor: 'pointer'
|
73
73
|
};
|
74
74
|
}
|
@@ -95,7 +95,7 @@ const StyledItem = styled.div.withConfig({
|
|
95
95
|
item
|
96
96
|
}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverCursor, StyledDivider, StyledHeader, ({
|
97
97
|
showDivider
|
98
|
-
}) => showDivider ? `1px` : '0', DividedContent, get('colors.
|
98
|
+
}) => showDivider ? `1px` : '0', DividedContent, get('colors.border.muted'), ({
|
99
99
|
showDivider
|
100
100
|
}) => showDivider ? `1px` : '0', DividedContent, DividedContent, DividedContent, DividedContent, isActiveDescendantAttribute, DividedContent, isActiveDescendantAttribute, DividedContent, isActiveDescendantAttribute, activeDescendantActivatedDirectly, ({
|
101
101
|
focusBackground
|
@@ -135,7 +135,7 @@ const TrailingContent = styled(ColoredVisualContainer).withConfig({
|
|
135
135
|
const DescriptionContainer = styled.span.withConfig({
|
136
136
|
displayName: "Item__DescriptionContainer",
|
137
137
|
componentId: "jqpvy8-8"
|
138
|
-
})(["color:", ";font-size:", ";line-height:16px;margin-left:var(--description-container-margin-left);min-width:0;flex-grow:1;flex-basis:var(--description-container-flex-basis);"], get('colors.
|
138
|
+
})(["color:", ";font-size:", ";line-height:16px;margin-left:var(--description-container-margin-left);min-width:0;flex-grow:1;flex-basis:var(--description-container-flex-basis);"], get('colors.fg.muted'), get('fontSizes.0'));
|
139
139
|
const MultiSelectInput = styled.input.withConfig({
|
140
140
|
displayName: "Item__MultiSelectInput",
|
141
141
|
componentId: "jqpvy8-9"
|
@@ -164,8 +164,8 @@ export function Item(itemProps) {
|
|
164
164
|
id,
|
165
165
|
...props
|
166
166
|
} = itemProps;
|
167
|
-
const labelId =
|
168
|
-
const descriptionId =
|
167
|
+
const labelId = useSSRSafeId();
|
168
|
+
const descriptionId = useSSRSafeId();
|
169
169
|
const keyPressHandler = useCallback(event => {
|
170
170
|
if (disabled) {
|
171
171
|
return;
|
@@ -23,7 +23,7 @@ function isGroupedListProps(props) {
|
|
23
23
|
const StyledList = styled.div.withConfig({
|
24
24
|
displayName: "List__StyledList",
|
25
25
|
componentId: "yr2k7d-0"
|
26
|
-
})(["font-size:", ";line-height:20px;&[", "],&:focus-within{--item-hover-bg-override:none;--item-hover-divider-border-color-override:", ";}"], get('fontSizes.1'), hasActiveDescendantAttribute, get('colors.
|
26
|
+
})(["font-size:", ";line-height:20px;&[", "],&:focus-within{--item-hover-bg-override:none;--item-hover-divider-border-color-override:", ";}"], get('fontSizes.1'), hasActiveDescendantAttribute, get('colors.border.muted'));
|
27
27
|
/**
|
28
28
|
* Returns `sx` prop values for `List` children matching the given `List` style variation.
|
29
29
|
* @param variant `List` style variation.
|
@@ -1,11 +1,11 @@
|
|
1
1
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
2
2
|
|
3
|
-
import React, { useCallback, useEffect
|
3
|
+
import React, { useCallback, useEffect } from 'react';
|
4
4
|
import Overlay from '../Overlay';
|
5
5
|
import { useFocusTrap } from '../hooks/useFocusTrap';
|
6
6
|
import { useFocusZone } from '../hooks/useFocusZone';
|
7
7
|
import { useAnchoredPosition, useProvidedRefOrCreate, useRenderForcingRef } from '../hooks';
|
8
|
-
import {
|
8
|
+
import { useSSRSafeId } from '@react-aria/ssr';
|
9
9
|
|
10
10
|
/**
|
11
11
|
* An `AnchoredOverlay` provides an anchor that will open a floating overlay positioned relative to the anchor.
|
@@ -26,7 +26,7 @@ export const AnchoredOverlay = ({
|
|
26
26
|
}) => {
|
27
27
|
const anchorRef = useProvidedRefOrCreate(externalAnchorRef);
|
28
28
|
const [overlayRef, updateOverlayRef] = useRenderForcingRef();
|
29
|
-
const anchorId =
|
29
|
+
const anchorId = useSSRSafeId();
|
30
30
|
const onClickOutside = useCallback(() => onClose === null || onClose === void 0 ? void 0 : onClose('click-outside'), [onClose]);
|
31
31
|
const onEscape = useCallback(() => onClose === null || onClose === void 0 ? void 0 : onClose('escape'), [onClose]);
|
32
32
|
const onAnchorKeyDown = useCallback(event => {
|
package/lib-esm/Avatar.d.ts
CHANGED
@@ -6,6 +6,10 @@ declare const Avatar: import("styled-components").StyledComponent<"img", any, {
|
|
6
6
|
size?: number | undefined;
|
7
7
|
/** Sets the shape of the avatar to a square if true. If false, the avatar will be circular. */
|
8
8
|
square?: boolean | undefined;
|
9
|
+
/** URL of the avatar image. */
|
10
|
+
src: string;
|
11
|
+
/** Provide alt text when the Avatar is used without the user's name next to it. */
|
12
|
+
alt?: string | undefined;
|
9
13
|
} & SystemCommonProps & SxProp, never>;
|
10
14
|
export declare type AvatarProps = ComponentProps<typeof Avatar>;
|
11
15
|
export default Avatar;
|
package/lib-esm/AvatarPair.js
CHANGED
package/lib-esm/AvatarStack.js
CHANGED
@@ -9,7 +9,7 @@ import sx from './sx';
|
|
9
9
|
const AvatarStackWrapper = styled.span.withConfig({
|
10
10
|
displayName: "AvatarStack__AvatarStackWrapper",
|
11
11
|
componentId: "sc-1qgzd2v-0"
|
12
|
-
})(["display:flex;position:relative;height:20px;min-width:", ";.pc-AvatarItem{flex-shrink:0;height:20px;width:20px;box-shadow:0 0 0 1px ", ";margin-left:-11px;position:relative;overflow:hidden;transition:margin 0.2s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,box-shadow 0.1s ease-in-out;&:first-child{margin-left:0;}&:nth-child(n + 4){display:none;}}&.pc-AvatarStack--two{min-width:30px;.pc-AvatarItem{&:nth-child(n + 3){display:none;}}}&.pc-AvatarStack--three-plus{min-width:38px;.pc-AvatarItem{&:nth-child(3){opacity:", "%;margin-left:-17px;}&:nth-child(4){opacity:", "%;margin-left:-17px;}&:nth-child(5){opacity:", "%;margin-left:-17px;}&:nth-child(n + 4){display:block;}&:nth-child(n + 6){opacity:0;visibility:hidden;}}}&.pc-AvatarStack--right{justify-content:flex-end;.pc-AvatarItem{margin-left:0 !important;margin-right:-11px;&:first-child{margin-right:0;}}.pc-AvatarStackBody{flex-direction:row-reverse;&:hover{.pc-AvatarItem{margin-right:", "!important;margin-left:0 !important;&:first-child{margin-right:0 !important;}}}}}&.pc-AvatarStack--three-plus.pc-AvatarStack--right{.pc-AvatarItem{&:nth-child(3){margin-right:-17px;}&:nth-child(4){margin-right:-17px;}&:nth-child(5){margin-right:-17px;}}}.pc-AvatarStackBody:hover{width:auto;.pc-AvatarItem{margin-left:", ";opacity:100%;visibility:visible;box-shadow:0 0 0 4px ", ";&:first-child{margin-left:0;}}}", " ", ";"], props => props.count === 1 ? '20px' : props.count === 2 ? '30px' : '38px', get('colors.
|
12
|
+
})(["display:flex;position:relative;height:20px;min-width:", ";.pc-AvatarItem{flex-shrink:0;height:20px;width:20px;box-shadow:0 0 0 1px ", ";margin-left:-11px;position:relative;overflow:hidden;transition:margin 0.2s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,box-shadow 0.1s ease-in-out;&:first-child{margin-left:0;}&:nth-child(n + 4){display:none;}}&.pc-AvatarStack--two{min-width:30px;.pc-AvatarItem{&:nth-child(n + 3){display:none;}}}&.pc-AvatarStack--three-plus{min-width:38px;.pc-AvatarItem{&:nth-child(3){opacity:", "%;margin-left:-17px;}&:nth-child(4){opacity:", "%;margin-left:-17px;}&:nth-child(5){opacity:", "%;margin-left:-17px;}&:nth-child(n + 4){display:block;}&:nth-child(n + 6){opacity:0;visibility:hidden;}}}&.pc-AvatarStack--right{justify-content:flex-end;.pc-AvatarItem{margin-left:0 !important;margin-right:-11px;&:first-child{margin-right:0;}}.pc-AvatarStackBody{flex-direction:row-reverse;&:hover{.pc-AvatarItem{margin-right:", "!important;margin-left:0 !important;&:first-child{margin-right:0 !important;}}}}}&.pc-AvatarStack--three-plus.pc-AvatarStack--right{.pc-AvatarItem{&:nth-child(3){margin-right:-17px;}&:nth-child(4){margin-right:-17px;}&:nth-child(5){margin-right:-17px;}}}.pc-AvatarStackBody:hover{width:auto;.pc-AvatarItem{margin-left:", ";opacity:100%;visibility:visible;box-shadow:0 0 0 4px ", ";&:first-child{margin-left:0;}}}", " ", ";"], props => props.count === 1 ? '20px' : props.count === 2 ? '30px' : '38px', get('colors.canvas.default'), 100 - 3 * 15, 100 - 4 * 15, 100 - 5 * 15, get('space.1'), get('space.1'), get('colors.canvas.default'), COMMON, sx);
|
13
13
|
|
14
14
|
const transformChildren = children => {
|
15
15
|
return React.Children.map(children, (child, index) => {
|
package/lib-esm/BranchName.js
CHANGED
@@ -4,5 +4,5 @@ import sx from './sx';
|
|
4
4
|
const BranchName = styled.a.withConfig({
|
5
5
|
displayName: "BranchName",
|
6
6
|
componentId: "sc-167ouzm-0"
|
7
|
-
})(["display:inline-block;padding:2px 6px;font-size:", ";font-family:", ";color:", ";background-color:", ";border-radius:", ";", ";", ";"], get('fontSizes.0'), get('fonts.mono'), get('colors.
|
7
|
+
})(["display:inline-block;padding:2px 6px;font-size:", ";font-family:", ";color:", ";background-color:", ";border-radius:", ";", ";", ";"], get('fontSizes.0'), get('fonts.mono'), get('colors.fg.muted'), get('colors.accent.subtle'), get('radii.2'), COMMON, sx);
|
8
8
|
export default BranchName;
|
package/lib-esm/Breadcrumb.js
CHANGED
@@ -11,7 +11,7 @@ const SELECTED_CLASS = 'selected';
|
|
11
11
|
const Wrapper = styled.li.withConfig({
|
12
12
|
displayName: "Breadcrumb__Wrapper",
|
13
13
|
componentId: "c1r3ff-0"
|
14
|
-
})(["display:inline-block;white-space:nowrap;list-style:none;&::after{padding-right:0.5em;padding-left:0.5em;color:", ";font-size:", ";content:'/';}&:first-child{margin-left:0;}&:last-child{&::after{content:none;}}"], get('colors.
|
14
|
+
})(["display:inline-block;white-space:nowrap;list-style:none;&::after{padding-right:0.5em;padding-left:0.5em;color:", ";font-size:", ";content:'/';}&:first-child{margin-left:0;}&:last-child{&::after{content:none;}}"], get('colors.fg.muted'), get('fontSizes.1'));
|
15
15
|
const BreadcrumbBase = styled.nav.withConfig({
|
16
16
|
displayName: "Breadcrumb__BreadcrumbBase",
|
17
17
|
componentId: "c1r3ff-1"
|
@@ -46,7 +46,7 @@ const BreadcrumbItem = styled.a.attrs(props => ({
|
|
46
46
|
})).withConfig({
|
47
47
|
displayName: "Breadcrumb__BreadcrumbItem",
|
48
48
|
componentId: "c1r3ff-2"
|
49
|
-
})(["color:", ";display:inline-block;font-size:", ";text-decoration:none;&:hover{text-decoration:underline;}&.selected{color:", ";pointer-events:none;}", " ", ";"], get('colors.
|
49
|
+
})(["color:", ";display:inline-block;font-size:", ";text-decoration:none;&:hover{text-decoration:underline;}&.selected{color:", ";pointer-events:none;}", " ", ";"], get('colors.accent.fg'), get('fontSizes.1'), get('colors.fg.default'), COMMON, sx);
|
50
50
|
Breadcrumb.displayName = 'Breadcrumb';
|
51
51
|
BreadcrumbItem.displayName = 'Breadcrumb.Item';
|
52
52
|
export default Object.assign(Breadcrumb, {
|
package/lib-esm/Button/Button.js
CHANGED
@@ -5,5 +5,5 @@ import ButtonBase, { buttonSystemProps } from './ButtonBase';
|
|
5
5
|
const Button = styled(ButtonBase).withConfig({
|
6
6
|
displayName: "Button",
|
7
7
|
componentId: "xjtz72-0"
|
8
|
-
})(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ",", "};&:hover{background-color:", ";border-color:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";", ";"], get('colors.btn.text'), get('colors.btn.bg'), get('colors.btn.border'), get('shadows.btn.shadow'), get('shadows.btn.insetShadow'), get('colors.btn.hoverBg'), get('colors.btn.hoverBorder'), get('colors.btn.focusBorder'), get('shadows.btn.focusShadow'), get('colors.btn.selectedBg'), get('shadows.btn.shadowActive'), get('colors.
|
8
|
+
})(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ",", "};&:hover{background-color:", ";border-color:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";", ";"], get('colors.btn.text'), get('colors.btn.bg'), get('colors.btn.border'), get('shadows.btn.shadow'), get('shadows.btn.insetShadow'), get('colors.btn.hoverBg'), get('colors.btn.hoverBorder'), get('colors.btn.focusBorder'), get('shadows.btn.focusShadow'), get('colors.btn.selectedBg'), get('shadows.btn.shadowActive'), get('colors.fg.muted'), get('colors.btn.bg'), get('colors.btn.border'), buttonSystemProps, sx);
|
9
9
|
export default Button;
|
@@ -8,7 +8,7 @@ import sx from '../sx';
|
|
8
8
|
const StyledButton = styled.button.withConfig({
|
9
9
|
displayName: "ButtonClose__StyledButton",
|
10
10
|
componentId: "sc-13mzqph-0"
|
11
|
-
})(["border:none;padding:0;background:transparent;outline:none;cursor:pointer;border-radius:", ";color:", ";&:focus{box-shadow:", ";}&:hover{color:", ";}", ";", ";", ";"], get('radii.2'), get('colors.
|
11
|
+
})(["border:none;padding:0;background:transparent;outline:none;cursor:pointer;border-radius:", ";color:", ";&:focus{box-shadow:", ";}&:hover{color:", ";}", ";", ";", ";"], get('radii.2'), get('colors.fg.muted'), get('shadows.btn.focusShadow'), get('colors.accent.fg'), COMMON, LAYOUT, sx);
|
12
12
|
const ButtonClose = /*#__PURE__*/forwardRef((props, ref) => {
|
13
13
|
return /*#__PURE__*/React.createElement(StyledButton, _extends({
|
14
14
|
ref: ref,
|
@@ -5,5 +5,5 @@ import ButtonBase, { buttonSystemProps } from './ButtonBase';
|
|
5
5
|
const ButtonInvisible = styled(ButtonBase).withConfig({
|
6
6
|
displayName: "ButtonInvisible",
|
7
7
|
componentId: "sc-1195tpn-0"
|
8
|
-
})(["color:", ";background-color:transparent;border:0;border-radius:", ";box-shadow:none;&:disabled{color:", ";}&:focus{box-shadow:", ";}", ";", ""], get('colors.
|
8
|
+
})(["color:", ";background-color:transparent;border:0;border-radius:", ";box-shadow:none;&:disabled{color:", ";}&:focus{box-shadow:", ";}", ";", ""], get('colors.accent.fg'), get('radii.2'), get('colors.fg.muted'), get('shadows.btn.focusShadow'), buttonSystemProps, sx);
|
9
9
|
export default ButtonInvisible;
|
@@ -4,5 +4,5 @@ import sx from '../sx';
|
|
4
4
|
const ButtonTableList = styled.summary.withConfig({
|
5
5
|
displayName: "ButtonTableList",
|
6
6
|
componentId: "sc-1m4q8ia-0"
|
7
|
-
})(["display:inline-block;padding:0;font-size:", ";color:", ";text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;&:hover{text-decoration:underline;}&:disabled{&,&:hover{color:rgba(", ",0.5);cursor:default;}}&:after{display:inline-block;margin-left:", ";width:0;height:0;vertical-align:-2px;content:'';border:4px solid transparent;border-top-color:currentcolor;}", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.
|
7
|
+
})(["display:inline-block;padding:0;font-size:", ";color:", ";text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;&:hover{text-decoration:underline;}&:disabled{&,&:hover{color:rgba(", ",0.5);cursor:default;}}&:after{display:inline-block;margin-left:", ";width:0;height:0;vertical-align:-2px;content:'';border:4px solid transparent;border-top-color:currentcolor;}", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.muted'), get('colors.fg.muted'), get('space.1'), COMMON, TYPOGRAPHY, LAYOUT, sx);
|
8
8
|
export default ButtonTableList;
|
package/lib-esm/CircleBadge.js
CHANGED
@@ -23,7 +23,7 @@ const sizeStyles = ({
|
|
23
23
|
const CircleBadge = styled.div.withConfig({
|
24
24
|
displayName: "CircleBadge",
|
25
25
|
componentId: "sc-1lho816-0"
|
26
|
-
})(["display:", ";align-items:center;justify-content:center;background-color:", ";border-radius:50%;box-shadow:", ";", ";", ";", ";"], props => props.inline ? 'inline-flex' : 'flex', get('colors.
|
26
|
+
})(["display:", ";align-items:center;justify-content:center;background-color:", ";border-radius:50%;box-shadow:", ";", ";", ";", ";"], props => props.inline ? 'inline-flex' : 'flex', get('colors.canvas.default'), get('shadows.shadow.medium'), COMMON, sizeStyles, sx);
|
27
27
|
const CircleBadgeIcon = styled(StyledOcticon).withConfig({
|
28
28
|
displayName: "CircleBadge__CircleBadgeIcon",
|
29
29
|
componentId: "sc-1lho816-1"
|
package/lib-esm/CircleOcticon.js
CHANGED
package/lib-esm/CounterLabel.js
CHANGED
@@ -7,7 +7,7 @@ const colorStyles = ({
|
|
7
7
|
...props
|
8
8
|
}) => {
|
9
9
|
return {
|
10
|
-
color: scheme === 'secondary' ? get('colors.
|
10
|
+
color: scheme === 'secondary' ? get('colors.fg.default')(props) : scheme === 'primary' ? get('colors.fg.onEmphasis')(props) : get('colors.fg.default')(props)
|
11
11
|
};
|
12
12
|
};
|
13
13
|
|
@@ -16,7 +16,7 @@ const bgStyles = ({
|
|
16
16
|
...props
|
17
17
|
}) => {
|
18
18
|
return {
|
19
|
-
backgroundColor: scheme === 'secondary' ? get('colors.
|
19
|
+
backgroundColor: scheme === 'secondary' ? get('colors.neutral.muted')(props) : scheme === 'primary' ? get('colors.neutral.emphasis')(props) : get('colors.neutral.muted')(props)
|
20
20
|
};
|
21
21
|
};
|
22
22
|
|
@@ -41,7 +41,7 @@ ConfirmationHeader.displayName = "ConfirmationHeader";
|
|
41
41
|
const StyledConfirmationBody = styled(Box).withConfig({
|
42
42
|
displayName: "ConfirmationDialog__StyledConfirmationBody",
|
43
43
|
componentId: "sc-1ub32x2-2"
|
44
|
-
})(["font-size:", ";padding:0 ", " ", " ", ";color:", ";flex-grow:1;"], get('fontSizes.1'), get('space.3'), get('space.3'), get('space.3'), get('colors.
|
44
|
+
})(["font-size:", ";padding:0 ", " ", " ", ";color:", ";flex-grow:1;"], get('fontSizes.1'), get('space.3'), get('space.3'), get('space.3'), get('colors.fg.muted'));
|
45
45
|
|
46
46
|
const ConfirmationBody = ({
|
47
47
|
children
|
package/lib-esm/Dialog/Dialog.js
CHANGED
@@ -13,8 +13,8 @@ import { XIcon } from '@primer/octicons-react';
|
|
13
13
|
import { useFocusZone } from '../hooks/useFocusZone';
|
14
14
|
import { FocusKeys } from '../behaviors/focusZone';
|
15
15
|
import Portal from '../Portal';
|
16
|
-
import { uniqueId } from '../utils/uniqueId';
|
17
16
|
import { useCombinedRefs } from '../hooks/useCombinedRefs';
|
17
|
+
import { useSSRSafeId } from '@react-aria/ssr';
|
18
18
|
const ANIMATION_DURATION = '200ms';
|
19
19
|
/**
|
20
20
|
* Props that characterize a button to be rendered into the footer of
|
@@ -39,7 +39,7 @@ const widthMap = {
|
|
39
39
|
const StyledDialog = styled.div.withConfig({
|
40
40
|
displayName: "Dialog__StyledDialog",
|
41
41
|
componentId: "sc-11pkgky-1"
|
42
|
-
})(["display:flex;flex-direction:column;background-color:", ";box-shadow:", ";min-width:296px;max-width:calc(100vw - 64px);max-height:calc(100vh - 64px);width:", ";height:", ";border-radius:12px;opacity:1;animation:overlay--dialog-appear ", " ", ";@keyframes overlay--dialog-appear{0%{opacity:0;transform:scale(0.5);}100%{opacity:1;transform:scale(1);}}", ";", ";", ";"], get('colors.
|
42
|
+
})(["display:flex;flex-direction:column;background-color:", ";box-shadow:", ";min-width:296px;max-width:calc(100vw - 64px);max-height:calc(100vh - 64px);width:", ";height:", ";border-radius:12px;opacity:1;animation:overlay--dialog-appear ", " ", ";@keyframes overlay--dialog-appear{0%{opacity:0;transform:scale(0.5);}100%{opacity:1;transform:scale(1);}}", ";", ";", ";"], get('colors.canvas.overlay'), get('shadows.overlay.shadow'), props => {
|
43
43
|
var _props$width;
|
44
44
|
|
45
45
|
return widthMap[(_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'xlarge'];
|
@@ -114,8 +114,8 @@ const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
|
|
114
114
|
width = 'xlarge',
|
115
115
|
height = 'auto'
|
116
116
|
} = props;
|
117
|
-
const dialogLabelId =
|
118
|
-
const dialogDescriptionId =
|
117
|
+
const dialogLabelId = useSSRSafeId();
|
118
|
+
const dialogDescriptionId = useSSRSafeId();
|
119
119
|
const defaultedProps = { ...props,
|
120
120
|
title,
|
121
121
|
subtitle,
|
@@ -155,7 +155,7 @@ const Header = styled(Box).attrs({
|
|
155
155
|
}).withConfig({
|
156
156
|
displayName: "Dialog__Header",
|
157
157
|
componentId: "sc-11pkgky-2"
|
158
|
-
})(["box-shadow:0 1px 0 ", ";padding:", ";z-index:1;flex-shrink:0;"], get('colors.border.
|
158
|
+
})(["box-shadow:0 1px 0 ", ";padding:", ";z-index:1;flex-shrink:0;"], get('colors.border.default'), get('space.2'));
|
159
159
|
const Title = styled(Box).withConfig({
|
160
160
|
displayName: "Dialog__Title",
|
161
161
|
componentId: "sc-11pkgky-3"
|
@@ -163,7 +163,7 @@ const Title = styled(Box).withConfig({
|
|
163
163
|
const Subtitle = styled(Box).withConfig({
|
164
164
|
displayName: "Dialog__Subtitle",
|
165
165
|
componentId: "sc-11pkgky-4"
|
166
|
-
})(["font-size:", ";margin-top:", ";color:", ";"], get('fontSizes.0'), get('space.1'), get('colors.
|
166
|
+
})(["font-size:", ";margin-top:", ";color:", ";"], get('fontSizes.0'), get('space.1'), get('colors.fg.muted'));
|
167
167
|
const Body = styled(Box).withConfig({
|
168
168
|
displayName: "Dialog__Body",
|
169
169
|
componentId: "sc-11pkgky-5"
|
@@ -173,7 +173,7 @@ const Footer = styled(Box).attrs({
|
|
173
173
|
}).withConfig({
|
174
174
|
displayName: "Dialog__Footer",
|
175
175
|
componentId: "sc-11pkgky-6"
|
176
|
-
})(["box-shadow:0 -1px 0 ", ";padding:", ";display:flex;flex-flow:wrap;justify-content:flex-end;z-index:1;flex-shrink:0;button{margin-left:", ";&:first-child{margin-left:0;}}"], get('colors.border.
|
176
|
+
})(["box-shadow:0 -1px 0 ", ";padding:", ";display:flex;flex-flow:wrap;justify-content:flex-end;z-index:1;flex-shrink:0;button{margin-left:", ";&:first-child{margin-left:0;}}"], get('colors.border.default'), get('space.3'), get('space.1'));
|
177
177
|
const buttonTypes = {
|
178
178
|
normal: Button,
|
179
179
|
primary: ButtonPrimary,
|
@@ -215,7 +215,7 @@ const Buttons = ({
|
|
215
215
|
const DialogCloseButton = styled(Button).withConfig({
|
216
216
|
displayName: "Dialog__DialogCloseButton",
|
217
217
|
componentId: "sc-11pkgky-7"
|
218
|
-
})(["border-radius:4px;background:transparent;border:0;vertical-align:middle;color:", ";padding:", ";align-self:flex-start;line-height:normal;box-shadow:none;"], get('colors.
|
218
|
+
})(["border-radius:4px;background:transparent;border:0;vertical-align:middle;color:", ";padding:", ";align-self:flex-start;line-height:normal;box-shadow:none;"], get('colors.fg.muted'), get('space.2'));
|
219
219
|
|
220
220
|
const CloseButton = ({
|
221
221
|
onClose
|
package/lib-esm/Dialog.js
CHANGED
@@ -15,11 +15,11 @@ const noop = () => null;
|
|
15
15
|
const DialogBase = styled.div.withConfig({
|
16
16
|
displayName: "Dialog__DialogBase",
|
17
17
|
componentId: "sc-1vcjhsg-0"
|
18
|
-
})(["box-shadow:", ";border-radius:", ";position:fixed;top:0;left:50%;transform:translateX(-50%);max-height:80vh;z-index:999;margin:10vh auto;background-color:", ";width:", ";outline:none;@media screen and (max-width:750px){width:100vw;margin:0;border-radius:0;height:100vh;}", ";", ";", ";"], get('shadows.shadow.large'), get('radii.2'), get('colors.
|
18
|
+
})(["box-shadow:", ";border-radius:", ";position:fixed;top:0;left:50%;transform:translateX(-50%);max-height:80vh;z-index:999;margin:10vh auto;background-color:", ";width:", ";outline:none;@media screen and (max-width:750px){width:100vw;margin:0;border-radius:0;height:100vh;}", ";", ";", ";"], get('shadows.shadow.large'), get('radii.2'), get('colors.canvas.default'), props => props.narrow ? '320px' : props.wide ? '640px' : '440px', LAYOUT, COMMON, sx);
|
19
19
|
const DialogHeaderBase = styled(Box).withConfig({
|
20
20
|
displayName: "Dialog__DialogHeaderBase",
|
21
21
|
componentId: "sc-1vcjhsg-1"
|
22
|
-
})(["border-radius:", " ", " 0px 0px;border-bottom:1px solid ", ";display:flex;@media screen and (max-width:750px){border-radius:0px;}", ";"], get('radii.2'), get('radii.2'), get('colors.border.
|
22
|
+
})(["border-radius:", " ", " 0px 0px;border-bottom:1px solid ", ";display:flex;@media screen and (max-width:750px){border-radius:0px;}", ";"], get('radii.2'), get('radii.2'), get('colors.border.default'), sx);
|
23
23
|
|
24
24
|
function DialogHeader({
|
25
25
|
theme,
|
@@ -30,7 +30,7 @@ function DialogHeader({
|
|
30
30
|
if (React.Children.toArray(children).every(ch => typeof ch === 'string')) {
|
31
31
|
children = /*#__PURE__*/React.createElement(Text, {
|
32
32
|
theme: theme,
|
33
|
-
color: "
|
33
|
+
color: "fg.default",
|
34
34
|
fontSize: 1,
|
35
35
|
fontWeight: "bold",
|
36
36
|
fontFamily: "sans-serif"
|
@@ -48,7 +48,7 @@ DialogHeader.displayName = "DialogHeader";
|
|
48
48
|
const Overlay = styled.span.withConfig({
|
49
49
|
displayName: "Dialog__Overlay",
|
50
50
|
componentId: "sc-1vcjhsg-2"
|
51
|
-
})(["&:before{position:fixed;top:0;right:0;bottom:0;left:0;display:block;cursor:default;content:' ';background:transparent;z-index:99;background:", ";}"], get('colors.
|
51
|
+
})(["&:before{position:fixed;top:0;right:0;bottom:0;left:0;display:block;cursor:default;content:' ';background:transparent;z-index:99;background:", ";}"], get('colors.primer.canvas.backdrop'));
|
52
52
|
const Dialog = /*#__PURE__*/forwardRef(({
|
53
53
|
children,
|
54
54
|
onDismiss = noop,
|
package/lib-esm/Dropdown.js
CHANGED
@@ -48,11 +48,11 @@ const DropdownCaret = styled.div.withConfig({
|
|
48
48
|
const DropdownMenu = styled.ul.withConfig({
|
49
49
|
displayName: "Dropdown__DropdownMenu",
|
50
50
|
componentId: "sc-16yoecj-2"
|
51
|
-
})(["background-clip:padding-box;background-color:", ";border:1px solid ", ";border-radius:", ";box-shadow:", ";left:0;list-style:none;margin-top:2px;padding:5px 0 5px 0 !important;position:absolute;top:100%;width:160px;z-index:100;&::before{position:absolute;display:inline-block;content:'';}&::after{position:absolute;display:inline-block;content:'';}&::before{border:8px solid transparent;border-bottom-color:", ";}&::after{border:7px solid transparent;border-bottom-color:", ";}> ul{list-style:none;}", ";", ";", ";"], get('colors.
|
51
|
+
})(["background-clip:padding-box;background-color:", ";border:1px solid ", ";border-radius:", ";box-shadow:", ";left:0;list-style:none;margin-top:2px;padding:5px 0 5px 0 !important;position:absolute;top:100%;width:160px;z-index:100;&::before{position:absolute;display:inline-block;content:'';}&::after{position:absolute;display:inline-block;content:'';}&::before{border:8px solid transparent;border-bottom-color:", ";}&::after{border:7px solid transparent;border-bottom-color:", ";}> ul{list-style:none;}", ";", ";", ";"], get('colors.canvas.overlay'), get('colors.border.default'), get('radii.2'), get('shadows.shadow.large'), get('colors.canvas.overlay'), get('colors.canvas.overlay'), props => props.direction ? getDirectionStyles(props.theme, props.direction) : '', COMMON, sx);
|
52
52
|
const DropdownItem = styled.li.withConfig({
|
53
53
|
displayName: "Dropdown__DropdownItem",
|
54
54
|
componentId: "sc-16yoecj-3"
|
55
|
-
})(["display:block;padding:", " 10px ", " 15px;overflow:hidden;color:", ";text-overflow:ellipsis;white-space:nowrap;a{color:", ";text-decoration:none;display:block;overflow:hidden;color:", ";text-overflow:ellipsis;white-space:nowrap;}&:focus,a:focus{color:", ";text-decoration:none;background-color:", ";}&:hover,&:hover a{color:", ";text-decoration:none;background-color:", ";outline:none;}", ";", ";"], get('space.1'), get('space.1'), get('colors.
|
55
|
+
})(["display:block;padding:", " 10px ", " 15px;overflow:hidden;color:", ";text-overflow:ellipsis;white-space:nowrap;a{color:", ";text-decoration:none;display:block;overflow:hidden;color:", ";text-overflow:ellipsis;white-space:nowrap;}&:focus,a:focus{color:", ";text-decoration:none;background-color:", ";}&:hover,&:hover a{color:", ";text-decoration:none;background-color:", ";outline:none;}", ";", ";"], get('space.1'), get('space.1'), get('colors.fg.default'), get('colors.fg.default'), get('colors.fg.default'), get('colors.fg.onEmphasis'), get('colors.accent.emphasis'), get('colors.fg.onEmphasis'), get('colors.accent.emphasis'), COMMON, sx);
|
56
56
|
DropdownMenu.defaultProps = {
|
57
57
|
direction: 'sw'
|
58
58
|
};
|
@@ -15,7 +15,7 @@ const getDirectionStyles = (theme, direction) => {
|
|
15
15
|
right: -16px;
|
16
16
|
left: auto;
|
17
17
|
border-color: transparent;
|
18
|
-
border-left-color: ${get('colors.border.
|
18
|
+
border-left-color: ${get('colors.border.default')(theme)};
|
19
19
|
}
|
20
20
|
|
21
21
|
&::after {
|
@@ -23,7 +23,7 @@ const getDirectionStyles = (theme, direction) => {
|
|
23
23
|
right: -14px;
|
24
24
|
left: auto;
|
25
25
|
border-color: transparent;
|
26
|
-
border-left-color: ${get('colors.border.
|
26
|
+
border-left-color: ${get('colors.border.default')(theme)};
|
27
27
|
}
|
28
28
|
`,
|
29
29
|
e: `
|
@@ -37,14 +37,14 @@ const getDirectionStyles = (theme, direction) => {
|
|
37
37
|
top: 10px;
|
38
38
|
left: -16px;
|
39
39
|
border-color: transparent;
|
40
|
-
border-right-color: ${get('colors.border.
|
40
|
+
border-right-color: ${get('colors.border.default')(theme)};
|
41
41
|
}
|
42
42
|
|
43
43
|
&::after {
|
44
44
|
top: 11px;
|
45
45
|
left: -14px;
|
46
46
|
border-color: transparent;
|
47
|
-
border-right-color: ${get('colors.border.
|
47
|
+
border-right-color: ${get('colors.border.default')(theme)};
|
48
48
|
}
|
49
49
|
`,
|
50
50
|
ne: `
|
@@ -62,7 +62,7 @@ const getDirectionStyles = (theme, direction) => {
|
|
62
62
|
&::before {
|
63
63
|
bottom: -8px;
|
64
64
|
left: 9px;
|
65
|
-
border-top: 8px solid ${get('colors.border.
|
65
|
+
border-top: 8px solid ${get('colors.border.default')(theme)};
|
66
66
|
border-bottom: 0;
|
67
67
|
border-left: 8px solid transparent;
|
68
68
|
}
|
@@ -70,7 +70,7 @@ const getDirectionStyles = (theme, direction) => {
|
|
70
70
|
&::after {
|
71
71
|
bottom: -7px;
|
72
72
|
left: 10px;
|
73
|
-
border-top: 7px solid ${get('colors.border.
|
73
|
+
border-top: 7px solid ${get('colors.border.default')(theme)};
|
74
74
|
border-right: 7px solid transparent;
|
75
75
|
border-bottom: 0;
|
76
76
|
border-left: 7px solid transparent;
|
package/lib-esm/FilterList.js
CHANGED
@@ -21,7 +21,7 @@ FilterList.displayName = "FilterList";
|
|
21
21
|
const FilterListItemBase = styled.a.withConfig({
|
22
22
|
displayName: "FilterList__FilterListItemBase",
|
23
23
|
componentId: "sc-1l4pxmz-1"
|
24
|
-
})(["position:relative;display:block;padding:", ";margin:", ";overflow:hidden;font-size:", ";color:", ";background-color:", "!important;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border-radius:", ";&:hover{text-decoration:none;background-color:", ";}&:active{color:", ";background-color:", ";}.count{float:right;font-weight:", ";}", ";", ";"], props => props.small ? `${get('space.1')(props)} 10px` : `${get('space.2')(props)} 11px`, props => props.small ? '0 0 2px' : '0 0 5px 0', get('fontSizes.1'), props => props.selected ? get('colors.
|
24
|
+
})(["position:relative;display:block;padding:", ";margin:", ";overflow:hidden;font-size:", ";color:", ";background-color:", "!important;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border-radius:", ";&:hover{text-decoration:none;background-color:", ";}&:active{color:", ";background-color:", ";}.count{float:right;font-weight:", ";}", ";", ";"], props => props.small ? `${get('space.1')(props)} 10px` : `${get('space.2')(props)} 11px`, props => props.small ? '0 0 2px' : '0 0 5px 0', get('fontSizes.1'), props => props.selected ? get('colors.fg.onEmphasis') : get('colors.fg.muted'), props => props.selected ? get('colors.accent.emphasis') : '', get('radii.1'), get('colors.canvas.subtle'), get('colors.fg.onEmphasis'), get('colors.accent.emphasis'), get('fontWeights.bold'), COMMON, sx);
|
25
25
|
|
26
26
|
function FilterListItem({
|
27
27
|
children,
|
@@ -1,17 +1,17 @@
|
|
1
1
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
2
2
|
|
3
|
-
import React, { useCallback, useEffect,
|
3
|
+
import React, { useCallback, useEffect, useRef } from 'react';
|
4
4
|
import TextInput from '../TextInput';
|
5
5
|
import Box from '../Box';
|
6
6
|
import { ActionList } from '../ActionList';
|
7
7
|
import Spinner from '../Spinner';
|
8
8
|
import { useFocusZone } from '../hooks/useFocusZone';
|
9
|
-
import { uniqueId } from '../utils/uniqueId';
|
10
9
|
import { useProvidedStateOrCreate } from '../hooks/useProvidedStateOrCreate';
|
11
10
|
import styled from 'styled-components';
|
12
11
|
import { get } from '../constants';
|
13
12
|
import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate';
|
14
13
|
import useScrollFlash from '../hooks/useScrollFlash';
|
14
|
+
import { useSSRSafeId } from '@react-aria/ssr';
|
15
15
|
|
16
16
|
function scrollIntoViewingArea(child, container, margin = 8, behavior = 'smooth') {
|
17
17
|
const {
|
@@ -44,7 +44,7 @@ function scrollIntoViewingArea(child, container, margin = 8, behavior = 'smooth'
|
|
44
44
|
const StyledHeader = styled.div.withConfig({
|
45
45
|
displayName: "FilteredActionList__StyledHeader",
|
46
46
|
componentId: "yg3jkv-0"
|
47
|
-
})(["box-shadow:0 1px 0 ", ";z-index:1;"], get('colors.border.
|
47
|
+
})(["box-shadow:0 1px 0 ", ";z-index:1;"], get('colors.border.default'));
|
48
48
|
export function FilteredActionList({
|
49
49
|
loading = false,
|
50
50
|
placeholderText,
|
@@ -65,7 +65,7 @@ export function FilteredActionList({
|
|
65
65
|
const listContainerRef = useRef(null);
|
66
66
|
const inputRef = useProvidedRefOrCreate(providedInputRef);
|
67
67
|
const activeDescendantRef = useRef();
|
68
|
-
const listId =
|
68
|
+
const listId = useSSRSafeId();
|
69
69
|
const onInputKeyPress = useCallback(event => {
|
70
70
|
if (event.key === 'Enter' && activeDescendantRef.current) {
|
71
71
|
event.preventDefault();
|
@@ -106,7 +106,7 @@ export function FilteredActionList({
|
|
106
106
|
ref: inputRef,
|
107
107
|
block: true,
|
108
108
|
width: "auto",
|
109
|
-
color: "
|
109
|
+
color: "fg.default",
|
110
110
|
value: filterValue,
|
111
111
|
onChange: onInputChange,
|
112
112
|
onKeyPress: onInputKeyPress,
|
package/lib-esm/Flash.js
CHANGED
@@ -41,7 +41,7 @@ const variants = variant({
|
|
41
41
|
const Flash = styled.div.withConfig({
|
42
42
|
displayName: "Flash",
|
43
43
|
componentId: "sc-4y90bn-0"
|
44
|
-
})(["position:relative;color:", ";padding:", ";border-style:solid;border-width:", ";border-radius:", ";margin-top:", ";p:last-child{margin-bottom:0;}svg{margin-right:", ";}", ";", ";", ";"], get('colors.
|
44
|
+
})(["position:relative;color:", ";padding:", ";border-style:solid;border-width:", ";border-radius:", ";margin-top:", ";p:last-child{margin-bottom:0;}svg{margin-right:", ";}", ";", ";", ";"], get('colors.fg.default'), get('space.3'), props => props.full ? '1px 0px' : '1px', props => props.full ? '0' : get('radii.2'), props => props.full ? '-1px' : '0', get('space.2'), COMMON, variants, sx);
|
45
45
|
Flash.defaultProps = {
|
46
46
|
variant: 'default'
|
47
47
|
};
|
package/lib-esm/Label.js
CHANGED
@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components';
|
|
2
2
|
import { borderColor, variant } from 'styled-system';
|
3
3
|
import { COMMON, get } from './constants';
|
4
4
|
import sx from './sx';
|
5
|
-
const outlineStyles = css(["margin-top:-1px;margin-bottom:-1px;color:", ";border:", " solid ", ";box-shadow:none;", ";", ";background-color:transparent;"], get('colors.
|
5
|
+
const outlineStyles = css(["margin-top:-1px;margin-bottom:-1px;color:", ";border:", " solid ", ";box-shadow:none;", ";", ";background-color:transparent;"], get('colors.fg.muted'), get('borderWidths.1'), get('colors.border.default'), borderColor, COMMON);
|
6
6
|
const sizeVariant = variant({
|
7
7
|
variants: {
|
8
8
|
small: {
|
@@ -31,7 +31,7 @@ const sizeVariant = variant({
|
|
31
31
|
const Label = styled.span.withConfig({
|
32
32
|
displayName: "Label",
|
33
33
|
componentId: "sc-1t3ykp0-0"
|
34
|
-
})(["display:inline-block;font-weight:", ";color:", ";border-radius:", ";&:hover{text-decoration:none;}", " ", " ", " ", " ", ""], get('fontWeights.semibold'), get('colors.
|
34
|
+
})(["display:inline-block;font-weight:", ";color:", ";border-radius:", ";&:hover{text-decoration:none;}", " ", " ", " ", " ", ""], get('fontWeights.semibold'), get('colors.fg.onEmphasis'), get('radii.3'), sizeVariant, COMMON, props => props.dropshadow ? 'box-shadow: inset 0 -1px 0 rgba(27, 31, 35, 0.12)' : '', props => props.outline ? outlineStyles : '', sx);
|
35
35
|
Label.defaultProps = {
|
36
36
|
bg: 'label.primary.border',
|
37
37
|
variant: 'medium'
|
package/lib-esm/Link.js
CHANGED
@@ -11,5 +11,5 @@ const hoverColor = system({
|
|
11
11
|
const Link = styled.a.withConfig({
|
12
12
|
displayName: "Link",
|
13
13
|
componentId: "sc-1brdqhf-0"
|
14
|
-
})(["color:", ";text-decoration:", ";&:hover{text-decoration:", ";", ";}&:is(button){display:inline-block;padding:0;font-size:inherit;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;}", ";", ";", ";"], props => props.muted ? get('colors.
|
14
|
+
})(["color:", ";text-decoration:", ";&:hover{text-decoration:", ";", ";}&:is(button){display:inline-block;padding:0;font-size:inherit;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;}", ";", ";", ";"], props => props.muted ? get('colors.fg.muted')(props) : get('colors.accent.fg')(props), props => props.underline ? 'underline' : 'none', props => props.muted ? 'none' : 'underline', props => props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.accent.fg')(props)}` : '', TYPOGRAPHY, COMMON, sx);
|
15
15
|
export default Link;
|
package/lib-esm/Overlay.d.ts
CHANGED
@@ -4,7 +4,7 @@ import { ComponentProps } from './utils/types';
|
|
4
4
|
import { TouchOrMouseEvent } from './hooks';
|
5
5
|
import { SxProp } from './sx';
|
6
6
|
import { AnchorSide } from './behaviors/anchoredPosition';
|
7
|
-
|
7
|
+
declare type StyledOverlayProps = {
|
8
8
|
width?: keyof typeof widthMap;
|
9
9
|
height?: keyof typeof heightMap;
|
10
10
|
maxHeight?: keyof Omit<typeof heightMap, 'auto' | 'initial'>;
|
@@ -40,7 +40,6 @@ export declare type OverlayProps = {
|
|
40
40
|
top: number;
|
41
41
|
left: number;
|
42
42
|
portalContainerName?: string;
|
43
|
-
preventFocusOnOpen?: boolean;
|
44
43
|
} & Omit<ComponentProps<typeof StyledOverlay>, 'visibility' | keyof SystemPositionProps>;
|
45
44
|
/**
|
46
45
|
* An `Overlay` is a flexible floating surface, used to display transient content such as menus,
|