@primer/react 38.34.0-rc.9bc993c30 → 38.34.0-rc.ac0faffd6
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 +0 -6
- package/dist/ActionList/Group.js +1 -1
- package/dist/ActionList/List.js +14 -20
- package/dist/AnchoredOverlay/AnchoredOverlay.js +3 -6
- package/dist/Autocomplete/AutocompleteInput.js +7 -10
- package/dist/ButtonGroup/ButtonGroup.js +8 -15
- package/dist/Checkbox/Checkbox.js +9 -16
- package/dist/Dialog/Dialog.js +5 -12
- package/dist/FeatureFlags/DefaultFeatureFlags.js +1 -2
- package/dist/FilteredActionList/FilteredActionList.js +20 -31
- package/dist/FilteredActionList/FilteredActionListInput.d.ts +1 -1
- package/dist/Link/Link.js +33 -33
- package/dist/Overlay/Overlay.js +1 -1
- package/dist/PageHeader/PageHeader.js +21 -30
- package/dist/SegmentedControl/{SegmentedControl-de65527b.css → SegmentedControl-a004561f.css} +2 -2
- package/dist/SegmentedControl/{SegmentedControl-de65527b.css.map → SegmentedControl-a004561f.css.map} +1 -1
- package/dist/SegmentedControl/SegmentedControl.module.css.js +1 -1
- package/dist/SegmentedControl/SegmentedControlButton.js +1 -1
- package/dist/SegmentedControl/SegmentedControlIconButton.js +1 -1
- package/dist/SelectPanel/SelectPanel.js +1 -1
- package/dist/TextInput/TextInput.js +6 -13
- package/dist/TooltipV2/Tooltip.js +11 -18
- package/dist/experimental/Tabs/Tabs.js +2 -3
- package/dist/experimental/Tabs/types.d.ts +3 -10
- package/dist/experimental/Tabs/useTabList.js +10 -18
- package/dist/experimental/UnderlinePanels/UnderlinePanels.js +42 -69
- package/dist/experimental/index.js +5 -5
- package/dist/hooks/useMergedRefs.d.ts +4 -4
- package/dist/hooks/useMergedRefs.js +5 -8
- package/dist/hooks/useProvidedRefOrCreate.d.ts +10 -7
- package/dist/hooks/useProvidedRefOrCreate.js +10 -7
- package/generated/components.json +5 -5
- package/package.json +2 -1
|
@@ -3,16 +3,15 @@ import { useResizeObserver } from "../../hooks/useResizeObserver.js";
|
|
|
3
3
|
import { useId as useId$1 } from "../../hooks/useId.js";
|
|
4
4
|
import { isSlot } from "../../utils/is-slot.js";
|
|
5
5
|
import { invariant } from "../../utils/invariant.js";
|
|
6
|
+
import { createComponent } from "../../utils/create-component.js";
|
|
6
7
|
import { UnderlineItem, UnderlineItemList, UnderlineWrapper } from "../../internal/components/UnderlineTabbedInterface.js";
|
|
7
8
|
import UnderlinePanels_module_css_default from "./UnderlinePanels.module.css.js";
|
|
8
|
-
import { useTab } from "../Tabs/useTab.js";
|
|
9
|
-
import { useTabList } from "../Tabs/useTabList.js";
|
|
10
|
-
import { useTabPanel } from "../Tabs/useTabPanel.js";
|
|
11
|
-
import { Tabs } from "../Tabs/Tabs.js";
|
|
12
9
|
import { clsx } from "clsx";
|
|
13
10
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
14
11
|
import React, { Children, cloneElement, createContext, isValidElement, useContext, useMemo, useRef, useState } from "react";
|
|
12
|
+
import { TabContainerElement } from "@github/tab-container-element";
|
|
15
13
|
//#region src/experimental/UnderlinePanels/UnderlinePanels.tsx
|
|
14
|
+
const TabContainerComponent = createComponent(TabContainerElement, "tab-container");
|
|
16
15
|
const UnderlinePanelsContext = /*#__PURE__*/ createContext({
|
|
17
16
|
iconsVisible: true,
|
|
18
17
|
loadingCounters: void 0
|
|
@@ -22,43 +21,27 @@ const UnderlinePanels = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabel
|
|
|
22
21
|
const wrapperRef = useRef(null);
|
|
23
22
|
const listRef = useRef(null);
|
|
24
23
|
const parentId = useId$1(props.id);
|
|
25
|
-
const [tabs, tabPanels, tabsHaveIcons
|
|
24
|
+
const [tabs, tabPanels, tabsHaveIcons] = useMemo(() => {
|
|
26
25
|
let tabIndex = 0;
|
|
27
26
|
let panelIndex = 0;
|
|
28
27
|
const childrenWithProps = Children.map(children, (child) => {
|
|
29
|
-
if (/*#__PURE__*/ isValidElement(child) && (child.type === Tab || isSlot(child, Tab))) return /*#__PURE__*/ cloneElement(child, {
|
|
30
|
-
if (/*#__PURE__*/ isValidElement(child) && (child.type === Panel || isSlot(child, Panel))) return /*#__PURE__*/ cloneElement(child, {
|
|
28
|
+
if (/*#__PURE__*/ isValidElement(child) && (child.type === Tab || isSlot(child, Tab))) return /*#__PURE__*/ cloneElement(child, { id: `${parentId}-tab-${tabIndex++}` });
|
|
29
|
+
if (/*#__PURE__*/ isValidElement(child) && (child.type === Panel || isSlot(child, Panel))) return /*#__PURE__*/ cloneElement(child, { "aria-labelledby": `${parentId}-tab-${panelIndex++}` });
|
|
31
30
|
return child;
|
|
32
31
|
});
|
|
33
32
|
const tabs = [];
|
|
34
33
|
const tabPanels = [];
|
|
35
|
-
let selectedFromProps;
|
|
36
34
|
for (const child of Children.toArray(childrenWithProps)) {
|
|
37
35
|
if (!/*#__PURE__*/ isValidElement(child)) continue;
|
|
38
|
-
if (child.type === Tab || isSlot(child, Tab))
|
|
39
|
-
|
|
40
|
-
if (ariaSelected === true || ariaSelected === "true") selectedFromProps = `${tabs.length}`;
|
|
41
|
-
tabs.push(child);
|
|
42
|
-
} else if (child.type === Panel || isSlot(child, Panel)) tabPanels.push(child);
|
|
36
|
+
if (child.type === Tab || isSlot(child, Tab)) tabs.push(child);
|
|
37
|
+
else if (child.type === Panel || isSlot(child, Panel)) tabPanels.push(child);
|
|
43
38
|
}
|
|
44
39
|
return [
|
|
45
40
|
tabs,
|
|
46
41
|
tabPanels,
|
|
47
|
-
tabs.some((tab) => /*#__PURE__*/ React.isValidElement(tab) && tab.props.icon)
|
|
48
|
-
selectedFromProps
|
|
42
|
+
tabs.some((tab) => /*#__PURE__*/ React.isValidElement(tab) && tab.props.icon)
|
|
49
43
|
];
|
|
50
|
-
}, [children]);
|
|
51
|
-
const [selectedValue, setSelectedValue] = useState(() => selectedFromProps !== null && selectedFromProps !== void 0 ? selectedFromProps : "0");
|
|
52
|
-
const [prevSelectedFromProps, setPrevSelectedFromProps] = useState(selectedFromProps);
|
|
53
|
-
if (selectedFromProps !== prevSelectedFromProps) {
|
|
54
|
-
setPrevSelectedFromProps(selectedFromProps);
|
|
55
|
-
if (selectedFromProps !== void 0 && selectedFromProps !== selectedValue) setSelectedValue(selectedFromProps);
|
|
56
|
-
}
|
|
57
|
-
const { tabListProps } = useTabList({
|
|
58
|
-
"aria-label": ariaLabel,
|
|
59
|
-
"aria-labelledby": ariaLabelledBy,
|
|
60
|
-
ref: listRef
|
|
61
|
-
});
|
|
44
|
+
}, [children, parentId]);
|
|
62
45
|
const contextValue = useMemo(() => ({
|
|
63
46
|
iconsVisible,
|
|
64
47
|
loadingCounters
|
|
@@ -85,65 +68,55 @@ const UnderlinePanels = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabel
|
|
|
85
68
|
!(tabs.length === tabPanels.length) && invariant(false, `The number of tabs and panels must be equal. Counted ${tabs.length} tabs and ${tabPanels.length} panels.`);
|
|
86
69
|
return /*#__PURE__*/ jsx(UnderlinePanelsContext.Provider, {
|
|
87
70
|
value: contextValue,
|
|
88
|
-
children: /*#__PURE__*/ jsxs(
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
"aria-orientation": tabListProps["aria-orientation"],
|
|
103
|
-
onKeyDown: tabListProps.onKeyDown,
|
|
104
|
-
children: tabs
|
|
105
|
-
})
|
|
106
|
-
}), tabPanels]
|
|
107
|
-
})
|
|
71
|
+
children: /*#__PURE__*/ jsxs(TabContainerComponent, { children: [/*#__PURE__*/ jsx(UnderlineWrapper, {
|
|
72
|
+
ref: wrapperRef,
|
|
73
|
+
slot: "tablist-wrapper",
|
|
74
|
+
"data-icons-visible": iconsVisible,
|
|
75
|
+
className: clsx(className, UnderlinePanels_module_css_default.StyledUnderlineWrapper),
|
|
76
|
+
...props,
|
|
77
|
+
children: /*#__PURE__*/ jsx(UnderlineItemList, {
|
|
78
|
+
ref: listRef,
|
|
79
|
+
"aria-label": ariaLabel,
|
|
80
|
+
"aria-labelledby": ariaLabelledBy,
|
|
81
|
+
role: "tablist",
|
|
82
|
+
children: tabs
|
|
83
|
+
})
|
|
84
|
+
}), tabPanels] })
|
|
108
85
|
});
|
|
109
86
|
};
|
|
110
87
|
UnderlinePanels.displayName = "UnderlinePanels";
|
|
111
|
-
const TabImpl = ({
|
|
88
|
+
const TabImpl = ({ "aria-selected": ariaSelected, onSelect, ...props }) => {
|
|
112
89
|
const { loadingCounters } = useContext(UnderlinePanelsContext);
|
|
113
|
-
const
|
|
114
|
-
|
|
90
|
+
const clickHandler = React.useCallback((event) => {
|
|
91
|
+
if (!event.defaultPrevented && typeof onSelect === "function") onSelect(event);
|
|
92
|
+
}, [onSelect]);
|
|
93
|
+
const keyDownHandler = React.useCallback((event) => {
|
|
94
|
+
if ((event.key === " " || event.key === "Enter") && !event.defaultPrevented && typeof onSelect === "function") onSelect(event);
|
|
95
|
+
}, [onSelect]);
|
|
115
96
|
return /*#__PURE__*/ jsx(UnderlineItem, {
|
|
116
97
|
as: "button",
|
|
117
|
-
|
|
118
|
-
|
|
98
|
+
role: "tab",
|
|
99
|
+
tabIndex: ariaSelected ? 0 : -1,
|
|
100
|
+
"aria-selected": ariaSelected,
|
|
119
101
|
type: "button",
|
|
120
|
-
onClick:
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
tabOnKeyDown === null || tabOnKeyDown === void 0 || tabOnKeyDown(event);
|
|
125
|
-
if ((event.key === " " || event.key === "Enter") && !event.defaultPrevented && typeof onSelect === "function") onSelect(event);
|
|
126
|
-
},
|
|
127
|
-
onMouseDown: tabOnMouseDown,
|
|
128
|
-
onFocus: tabOnFocus,
|
|
129
|
-
loadingCounters
|
|
102
|
+
onClick: clickHandler,
|
|
103
|
+
onKeyDown: keyDownHandler,
|
|
104
|
+
loadingCounters,
|
|
105
|
+
...props
|
|
130
106
|
});
|
|
131
107
|
};
|
|
132
108
|
TabImpl.displayName = "TabImpl";
|
|
133
109
|
TabImpl.displayName = "UnderlinePanels.Tab";
|
|
134
110
|
const Tab = /*#__PURE__*/ React.memo(TabImpl);
|
|
135
111
|
Tab.displayName = "UnderlinePanels.Tab";
|
|
136
|
-
const
|
|
137
|
-
const { tabPanelProps } = useTabPanel({ value: value !== null && value !== void 0 ? value : "" });
|
|
112
|
+
const Panel = ({ children, ...rest }) => {
|
|
138
113
|
return /*#__PURE__*/ jsx("div", {
|
|
139
|
-
|
|
140
|
-
...
|
|
114
|
+
role: "tabpanel",
|
|
115
|
+
...rest,
|
|
141
116
|
children
|
|
142
117
|
});
|
|
143
118
|
};
|
|
144
|
-
|
|
145
|
-
PanelImpl.displayName = "UnderlinePanels.Panel";
|
|
146
|
-
const Panel = PanelImpl;
|
|
119
|
+
Panel.displayName = "Panel";
|
|
147
120
|
Panel.displayName = "UnderlinePanels.Panel";
|
|
148
121
|
var UnderlinePanels_default = Object.assign(UnderlinePanels, {
|
|
149
122
|
Panel,
|
|
@@ -4,15 +4,15 @@ import { Announce } from "../live-region/Announce.js";
|
|
|
4
4
|
import { AriaAlert } from "../live-region/AriaAlert.js";
|
|
5
5
|
import { AriaStatus } from "../live-region/AriaStatus.js";
|
|
6
6
|
import { ButtonBase } from "../Button/ButtonBase.js";
|
|
7
|
-
import { DefaultFeatureFlags } from "../FeatureFlags/DefaultFeatureFlags.js";
|
|
8
|
-
import { FeatureFlags } from "../FeatureFlags/FeatureFlags.js";
|
|
9
|
-
import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
|
|
10
7
|
import { KeybindingHint } from "../KeybindingHint/KeybindingHint.js";
|
|
11
8
|
import { getAccessibleKeybindingHintString } from "../KeybindingHint/utils.js";
|
|
12
9
|
import { Tooltip } from "../TooltipV2/Tooltip.js";
|
|
13
10
|
import { useOverflow } from "../hooks/useOverflow.js";
|
|
14
11
|
import { ScrollableRegion } from "../ScrollableRegion/ScrollableRegion.js";
|
|
15
12
|
import { Dialog } from "../Dialog/Dialog.js";
|
|
13
|
+
import { DefaultFeatureFlags } from "../FeatureFlags/DefaultFeatureFlags.js";
|
|
14
|
+
import { FeatureFlags } from "../FeatureFlags/FeatureFlags.js";
|
|
15
|
+
import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
|
|
16
16
|
import { Stack } from "../Stack/index.js";
|
|
17
17
|
import { SkeletonBox } from "../Skeleton/SkeletonBox.js";
|
|
18
18
|
import { FilteredActionListLoadingTypes } from "../FilteredActionList/constants.js";
|
|
@@ -30,12 +30,12 @@ import { Table } from "../DataTable/index.js";
|
|
|
30
30
|
import { InlineMessage } from "../InlineMessage/InlineMessage.js";
|
|
31
31
|
import { Hidden } from "../Hidden/Hidden.js";
|
|
32
32
|
import { SelectPanel } from "./SelectPanel2/SelectPanel.js";
|
|
33
|
+
import UnderlinePanels_default from "./UnderlinePanels/UnderlinePanels.js";
|
|
34
|
+
import { IssueLabel } from "./IssueLabel/IssueLabel.js";
|
|
33
35
|
import { useTab } from "./Tabs/useTab.js";
|
|
34
36
|
import { useTabList } from "./Tabs/useTabList.js";
|
|
35
37
|
import { useTabPanel } from "./Tabs/useTabPanel.js";
|
|
36
38
|
import { Tabs } from "./Tabs/Tabs.js";
|
|
37
|
-
import UnderlinePanels_default from "./UnderlinePanels/UnderlinePanels.js";
|
|
38
|
-
import { IssueLabel } from "./IssueLabel/IssueLabel.js";
|
|
39
39
|
import { TopicTag } from "../TopicTag/index.js";
|
|
40
40
|
//#region src/experimental/index.ts
|
|
41
41
|
/**
|
|
@@ -17,18 +17,18 @@ import { ForwardedRef, Ref } from "react";
|
|
|
17
17
|
* // React 18
|
|
18
18
|
* const Example = forwardRef<HTMLButtonElement, {}>((props, forwardedRef) => {
|
|
19
19
|
* const ref = useRef<HTMLButtonElement>(null)
|
|
20
|
-
* const
|
|
20
|
+
* const combinedRef = useMergedRefs(forwardedRef, ref)
|
|
21
21
|
*
|
|
22
|
-
* return <button ref={
|
|
22
|
+
* return <button ref={combinedRef} />
|
|
23
23
|
* })
|
|
24
24
|
*
|
|
25
25
|
* @example
|
|
26
26
|
* // React 19
|
|
27
27
|
* const Example = ({ref: externalRef}: {ref?: Ref<HTMLButtonElement>}) => {
|
|
28
28
|
* const ref = useRef<HTMLButtonElement>(null)
|
|
29
|
-
* const
|
|
29
|
+
* const combinedRef = useMergedRefs(externalRef, ref)
|
|
30
30
|
*
|
|
31
|
-
* return <button ref={
|
|
31
|
+
* return <button ref={combinedRef} />
|
|
32
32
|
* }
|
|
33
33
|
*/
|
|
34
34
|
declare function useMergedRefs<T>(refA: Ref$1<T | null>, refB: Ref$1<T | null>): (value: T | null) => (() => void) | undefined;
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import { isExperimentalReactVersion, reactMajorVersion } from "../utils/environment.js";
|
|
2
2
|
import { c } from "react-compiler-runtime";
|
|
3
|
-
import
|
|
3
|
+
import "react";
|
|
4
4
|
//#region src/hooks/useMergedRefs.ts
|
|
5
|
-
var _version$split$;
|
|
6
|
-
const majorReactVersion = parseInt((_version$split$ = version.split(".")[0]) !== null && _version$split$ !== void 0 ? _version$split$ : "18", 10);
|
|
7
5
|
/**
|
|
8
6
|
* Cleanup functions for refs were introduced in React 19. For feature detection,
|
|
9
7
|
* we look to see if current version of React is >= 19 or if it is an
|
|
@@ -28,18 +26,18 @@ const supportsRefCleanup = reactMajorVersion >= 19 || isExperimentalReactVersion
|
|
|
28
26
|
* // React 18
|
|
29
27
|
* const Example = forwardRef<HTMLButtonElement, {}>((props, forwardedRef) => {
|
|
30
28
|
* const ref = useRef<HTMLButtonElement>(null)
|
|
31
|
-
* const
|
|
29
|
+
* const combinedRef = useMergedRefs(forwardedRef, ref)
|
|
32
30
|
*
|
|
33
|
-
* return <button ref={
|
|
31
|
+
* return <button ref={combinedRef} />
|
|
34
32
|
* })
|
|
35
33
|
*
|
|
36
34
|
* @example
|
|
37
35
|
* // React 19
|
|
38
36
|
* const Example = ({ref: externalRef}: {ref?: Ref<HTMLButtonElement>}) => {
|
|
39
37
|
* const ref = useRef<HTMLButtonElement>(null)
|
|
40
|
-
* const
|
|
38
|
+
* const combinedRef = useMergedRefs(externalRef, ref)
|
|
41
39
|
*
|
|
42
|
-
* return <button ref={
|
|
40
|
+
* return <button ref={combinedRef} />
|
|
43
41
|
* }
|
|
44
42
|
*/
|
|
45
43
|
function useMergedRefs(refA, refB) {
|
|
@@ -50,7 +48,6 @@ function useMergedRefs(refA, refB) {
|
|
|
50
48
|
const cleanupA = setRef(refA, value);
|
|
51
49
|
const cleanupB = setRef(refB, value);
|
|
52
50
|
if (!supportsRefCleanup) return;
|
|
53
|
-
if (majorReactVersion <= 18) return;
|
|
54
51
|
return () => {
|
|
55
52
|
if (cleanupA) cleanupA();
|
|
56
53
|
else setRef(refA, null);
|
|
@@ -9,14 +9,17 @@ import React from "react";
|
|
|
9
9
|
* @param providedRef The ref to use - if undefined, will use the ref from a call to React.useRef
|
|
10
10
|
* @type TRef The type of the RefObject which should be created.
|
|
11
11
|
*
|
|
12
|
-
* @
|
|
13
|
-
*
|
|
14
|
-
* {@linkcode useMergedRefs} instead.
|
|
12
|
+
* @deprecated This hook is incompatible with forwarded callback refs. Prefer `useMergedRefs` with an internally
|
|
13
|
+
* created ref instead.
|
|
15
14
|
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
15
|
+
* ```diff
|
|
16
|
+
* - const ref = useProvidedRefOrCreate(forwardedRef as RefObject<...>)
|
|
17
|
+
* + const ref = useRef(null)
|
|
18
|
+
* + const mergedRef = useMergedRefs(forwardedRef, ref)
|
|
19
|
+
*
|
|
20
|
+
* - return <div ref={ref} />
|
|
21
|
+
* + return <div ref={mergedRef} />
|
|
22
|
+
* ```
|
|
20
23
|
*/
|
|
21
24
|
declare function useProvidedRefOrCreate<TRef>(providedRef?: React.RefObject<TRef | null>): React.RefObject<TRef | null>;
|
|
22
25
|
//#endregion
|
|
@@ -8,14 +8,17 @@ import React from "react";
|
|
|
8
8
|
* @param providedRef The ref to use - if undefined, will use the ref from a call to React.useRef
|
|
9
9
|
* @type TRef The type of the RefObject which should be created.
|
|
10
10
|
*
|
|
11
|
-
* @
|
|
12
|
-
*
|
|
13
|
-
* {@linkcode useMergedRefs} instead.
|
|
11
|
+
* @deprecated This hook is incompatible with forwarded callback refs. Prefer `useMergedRefs` with an internally
|
|
12
|
+
* created ref instead.
|
|
14
13
|
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
14
|
+
* ```diff
|
|
15
|
+
* - const ref = useProvidedRefOrCreate(forwardedRef as RefObject<...>)
|
|
16
|
+
* + const ref = useRef(null)
|
|
17
|
+
* + const mergedRef = useMergedRefs(forwardedRef, ref)
|
|
18
|
+
*
|
|
19
|
+
* - return <div ref={ref} />
|
|
20
|
+
* + return <div ref={mergedRef} />
|
|
21
|
+
* ```
|
|
19
22
|
*/
|
|
20
23
|
function useProvidedRefOrCreate(providedRef) {
|
|
21
24
|
const createdRef = React.useRef(null);
|
|
@@ -5060,7 +5060,7 @@
|
|
|
5060
5060
|
},
|
|
5061
5061
|
{
|
|
5062
5062
|
"id": "components-pagelayout-features--pull-request-page",
|
|
5063
|
-
"code": "() => (\n <PageLayout>\n <PageLayout.Header>\n <div className={classes.HeaderStack}>\n <div>\n <Heading as=\"h1\" className={classes.TitleHeading}>\n Input validation styles{' '}\n <Text className={classes.TitleSubdued}>#1831</Text>\n </Heading>\n <div className={classes.StatusRow}>\n <StateLabel status=\"pullOpened\">Open</StateLabel>\n <Text className={classes.StatusMeta}>\n <Link href=\"#\" muted className={classes.BoldMetaLink}>\n mperrotti\n </Link>{' '}\n wants to merge 3 commits into{' '}\n <BranchName href=\"#\">main</BranchName> from{' '}\n <BranchName href=\"#\">mp/validation-styles</BranchName>\n </Text>\n </div>\n </div>\n <TabNav>\n <TabNav.Link href=\"#\" selected>\n Conversation\n </TabNav.Link>\n <TabNav.Link href=\"#\">Commits</TabNav.Link>\n <TabNav.Link href=\"#\">Checks</TabNav.Link>\n <TabNav.Link href=\"#\">Files changed</TabNav.Link>\n </TabNav>\n </div>\n </PageLayout.Header>\n <PageLayout.Content>\n <div className={classes.ContentBox}></div>\n
|
|
5063
|
+
"code": "() => (\n <PageLayout>\n <PageLayout.Header>\n <div className={classes.HeaderStack}>\n <div>\n <Heading as=\"h1\" className={classes.TitleHeading}>\n Input validation styles{' '}\n <Text className={classes.TitleSubdued}>#1831</Text>\n </Heading>\n <div className={classes.StatusRow}>\n <StateLabel status=\"pullOpened\">Open</StateLabel>\n <Text className={classes.StatusMeta}>\n <Link href=\"#\" muted className={classes.BoldMetaLink}>\n mperrotti\n </Link>{' '}\n wants to merge 3 commits into{' '}\n <BranchName href=\"#\">main</BranchName> from{' '}\n <BranchName href=\"#\">mp/validation-styles</BranchName>\n </Text>\n </div>\n </div>\n <TabNav>\n <TabNav.Link href=\"#\" selected>\n Conversation\n </TabNav.Link>\n <TabNav.Link href=\"#\">Commits</TabNav.Link>\n <TabNav.Link href=\"#\">Checks</TabNav.Link>\n <TabNav.Link href=\"#\">Files changed</TabNav.Link>\n </TabNav>\n </div>\n </PageLayout.Header>\n <PageLayout.Content>\n <div className={classes.ContentBox}></div>\n <div className={classes.ScrollBox} tabIndex={0}>\n This box has really long content. If it is too long, it will cause x\n overflow and should show a scrollbar. When this overflows, it should not\n break to overall page layout!\n </div>\n </PageLayout.Content>\n <PageLayout.Pane aria-label=\"Side pane\">\n <div className={classes.PaneStack}>\n <div>\n <Text className={classes.PaneSectionHeading}>Assignees</Text>\n <Text className={classes.PaneMetaText}>\n No one –{' '}\n <Link href=\"#\" muted>\n assign yourself\n </Link>\n </Text>\n </div>\n <div role=\"separator\" className={classes.PaneSeparator}></div>\n <div>\n <Text className={classes.PaneSectionHeading}>Labels</Text>\n <Text className={classes.PaneMetaText}>None yet</Text>\n </div>\n </div>\n </PageLayout.Pane>\n </PageLayout>\n)"
|
|
5064
5064
|
},
|
|
5065
5065
|
{
|
|
5066
5066
|
"id": "components-pagelayout-features--sticky-pane",
|
|
@@ -5068,7 +5068,7 @@
|
|
|
5068
5068
|
},
|
|
5069
5069
|
{
|
|
5070
5070
|
"id": "components-pagelayout-features--nested-scroll-container",
|
|
5071
|
-
"code": "(args) => (\n <div className={classes.NestedScrollContainer}>\n <Placeholder label=\"Above scroll container\" height={120} />\n <div className={classes.OverflowAuto}>\n <PageLayout\n rowGap=\"none\"\n columnGap=\"none\"\n padding=\"none\"\n containerWidth=\"full\"\n >\n <PageLayout.Header padding=\"normal\" divider=\"line\">\n <Placeholder label=\"Header\" height={64} />\n </PageLayout.Header>\n <PageLayout.Content padding=\"normal\" width=\"large\">\n
|
|
5071
|
+
"code": "(args) => (\n <div className={classes.NestedScrollContainer}>\n <Placeholder label=\"Above scroll container\" height={120} />\n <div className={classes.OverflowAuto}>\n <PageLayout\n rowGap=\"none\"\n columnGap=\"none\"\n padding=\"none\"\n containerWidth=\"full\"\n >\n <PageLayout.Header padding=\"normal\" divider=\"line\">\n <Placeholder label=\"Header\" height={64} />\n </PageLayout.Header>\n <PageLayout.Content padding=\"normal\" width=\"large\">\n <div\n className={classes.ContentGrid}\n tabIndex={0}\n role=\"region\"\n aria-label=\"Page content\"\n >\n {Array.from({\n length: args.numParagraphsInContent,\n }).map((_, i) => (\n <p key={i} className={classes.Paragraph}>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at\n enim id lorem tempus egestas a non ipsum. Maecenas imperdiet\n ante quam, at varius lorem molestie vel. Sed at eros consequat,\n varius tellus et, auctor felis. Donec pulvinar lacinia urna nec\n commodo. Phasellus at imperdiet risus. Donec sit amet massa\n purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus\n felis. Ut porttitor auctor tellus in imperdiet. Ut blandit\n tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum\n auctor euismod nisi. Nullam tincidunt est in mi tincidunt\n dictum. Sed consectetur aliquet velit ut ornare.\n </p>\n ))}\n </div>\n </PageLayout.Content>\n <PageLayout.Pane\n position=\"start\"\n padding=\"normal\"\n divider=\"line\"\n sticky\n aria-label=\"Side pane\"\n >\n <div className={classes.ContentGrid}>\n {Array.from({\n length: args.numParagraphsInPane,\n }).map((_, i) => (\n <p key={i} className={classes.Paragraph}>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at\n enim id lorem tempus egestas a non ipsum. Maecenas imperdiet\n ante quam, at varius lorem molestie vel. Sed at eros consequat,\n varius tellus et, auctor felis. Donec pulvinar lacinia urna nec\n commodo. Phasellus at imperdiet risus. Donec sit amet massa\n purus.\n </p>\n ))}\n </div>\n </PageLayout.Pane>\n <PageLayout.Footer padding=\"normal\" divider=\"line\">\n <Placeholder label=\"Footer\" height={64} />\n </PageLayout.Footer>\n </PageLayout>\n </div>\n <Placeholder label=\"Below scroll container\" height={120} />\n </div>\n)"
|
|
5072
5072
|
},
|
|
5073
5073
|
{
|
|
5074
5074
|
"id": "components-pagelayout-features--custom-sticky-header",
|
|
@@ -5080,7 +5080,7 @@
|
|
|
5080
5080
|
},
|
|
5081
5081
|
{
|
|
5082
5082
|
"id": "components-pagelayout-features--scroll-container-within-page-layout-pane",
|
|
5083
|
-
"code": "() => (\n <div className={classes.NestedScrollContainer}>\n <div className={classes.OverflowAuto}>\n <Placeholder label=\"Above inner scroll container\" height={120} />\n <PageLayout\n rowGap=\"none\"\n columnGap=\"none\"\n padding=\"none\"\n containerWidth=\"full\"\n >\n <PageLayout.Pane\n position=\"start\"\n padding=\"normal\"\n divider=\"line\"\n sticky\n aria-label=\"Sticky pane\"\n >\n <div className={classes.OverflowAuto}>\n <PageLayout.Pane padding=\"normal\" aria-label=\"Side pane\">\n <Placeholder label=\"Inner scroll container\" height={800} />\n </PageLayout.Pane>\n </div>\n </PageLayout.Pane>\n <PageLayout.Content padding=\"normal\" width=\"large\">\n
|
|
5083
|
+
"code": "() => (\n <div className={classes.NestedScrollContainer}>\n <div className={classes.OverflowAuto}>\n <Placeholder label=\"Above inner scroll container\" height={120} />\n <PageLayout\n rowGap=\"none\"\n columnGap=\"none\"\n padding=\"none\"\n containerWidth=\"full\"\n >\n <PageLayout.Pane\n position=\"start\"\n padding=\"normal\"\n divider=\"line\"\n sticky\n aria-label=\"Sticky pane\"\n >\n <div className={classes.OverflowAuto}>\n <PageLayout.Pane padding=\"normal\" aria-label=\"Side pane\">\n <Placeholder label=\"Inner scroll container\" height={800} />\n </PageLayout.Pane>\n </div>\n </PageLayout.Pane>\n <PageLayout.Content padding=\"normal\" width=\"large\">\n <div\n className={classes.ContentGrid}\n tabIndex={0}\n role=\"region\"\n aria-label=\"Page content\"\n >\n <Placeholder label=\"Page content\" height={1600} />\n </div>\n </PageLayout.Content>\n </PageLayout>\n <Placeholder label=\"Beneath inner scroll container\" height={120} />\n </div>\n </div>\n)"
|
|
5084
5084
|
},
|
|
5085
5085
|
{
|
|
5086
5086
|
"id": "components-pagelayout-features--custom-pane-widths",
|
|
@@ -8185,11 +8185,11 @@
|
|
|
8185
8185
|
},
|
|
8186
8186
|
{
|
|
8187
8187
|
"id": "components-timeline-features--with-actions",
|
|
8188
|
-
"code": "() => (\n
|
|
8188
|
+
"code": "() => (\n <div\n className={classes.RealisticTimeline}\n onClick={(e) => {\n if ((e.target as HTMLElement).closest('a')) e.preventDefault()\n }}\n >\n <Timeline>\n <Timeline.Item>\n <Timeline.Badge variant=\"done\">\n <Octicon icon={GitMergeIcon} aria-label=\"Merged\" />\n </Timeline.Badge>\n <Timeline.Body>\n <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n Monalisa\n </Link>\n merged via the queue into <BranchName href=\"#\">main</BranchName> with\n commit{' '}\n <Link href=\"#\" className={classes.CommitSha}>\n 01e49tb\n </Link>{' '}\n <Link href=\"#\" className={classes.Timestamp} muted>\n just now\n </Link>\n <div className={classes.ChecksSubline}>28 checks passed</div>\n </Timeline.Body>\n <Timeline.Actions>\n <Button size=\"small\">View details</Button>\n <Button size=\"small\">Revert</Button>\n </Timeline.Actions>\n </Timeline.Item>\n <Timeline.Item>\n <Timeline.Badge>\n <Octicon icon={RepoPushIcon} aria-label=\"Force-push\" />\n </Timeline.Badge>\n <Timeline.Body>\n <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n Monalisa\n </Link>\n force-pushed the <BranchName href=\"#\">main</BranchName> branch from{' '}\n <Link href=\"#\" className={classes.CommitSha}>\n 01e49tb\n </Link>{' '}\n to{' '}\n <Link href=\"#\" className={classes.CommitSha}>\n 02f50uc\n </Link>{' '}\n <Link href=\"#\" className={classes.Timestamp} muted>\n 2 hours ago\n </Link>\n </Timeline.Body>\n <Timeline.Actions>\n <Button size=\"small\">Compare</Button>\n </Timeline.Actions>\n </Timeline.Item>\n <Timeline.Item condensed>\n <Timeline.Badge>\n <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n </Timeline.Badge>\n <Timeline.Body>\n <Link href=\"#\" muted>\n Update README.md\n </Link>\n </Timeline.Body>\n <Timeline.Actions>\n <Label\n className={`${classes.SignatureLabelVerified} ${classes.HideAtNarrow}`}\n >\n Verified\n </Label>\n <Octicon\n icon={CheckIcon}\n className={classes.IconSuccess}\n aria-label=\"All checks passed\"\n />\n <Link href=\"#\" className={classes.ShaLink} muted>\n 3fbdc0\n </Link>\n </Timeline.Actions>\n </Timeline.Item>\n <Timeline.Item condensed>\n <Timeline.Badge>\n <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n </Timeline.Badge>\n <Timeline.Body>\n <Link href=\"#\" muted>\n Initial commit\n </Link>\n </Timeline.Body>\n <Timeline.Actions>\n <Label className={classes.HideAtNarrow}>Unverified</Label>\n <Octicon\n icon={XIcon}\n className={classes.IconDanger}\n aria-label=\"Some checks failed\"\n />\n <Link href=\"#\" className={classes.ShaLink} muted>\n 3fbdc0\n </Link>\n </Timeline.Actions>\n </Timeline.Item>\n <Timeline.Item>\n <Timeline.Badge>\n <Octicon icon={CrossReferenceIcon} aria-label=\"Cross-reference\" />\n </Timeline.Badge>\n <Timeline.Body>\n <Avatar\n src=\"https://avatars.githubusercontent.com/u/92997159?v=4\"\n size={20}\n className={classes.InlineAvatar}\n />\n <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n Monalisa\n </Link>\n mentioned this pull request{' '}\n <Link href=\"#\" className={classes.Timestamp} muted>\n just now\n </Link>\n <div className={classes.CrossReferenceRow}>\n <div className={classes.CrossReferenceTitle}>\n <Link href=\"#\" className={classes.CrossReferenceLink}>\n <span className={classes.CrossReferenceName}>\n Fix positioning of Autocomplete overlay menu\n </span>{' '}\n <span className={classes.CrossReferenceNumber}>\n primer/react#7431\n </span>\n </Link>\n </div>\n <Octicon\n icon={LockIcon}\n size={16}\n className={classes.CrossReferenceMeta}\n aria-label=\"Private\"\n />\n <StateLabel status=\"pullOpened\" size=\"small\">\n Open\n </StateLabel>\n </div>\n <div className={classes.CrossReferenceTaskline}>\n <Octicon icon={TasklistIcon} size={16} />\n 17 tasks\n </div>\n </Timeline.Body>\n </Timeline.Item>\n </Timeline>\n </div>\n)"
|
|
8189
8189
|
},
|
|
8190
8190
|
{
|
|
8191
8191
|
"id": "components-timeline-features--with-avatar",
|
|
8192
|
-
"code": "() => (\n
|
|
8192
|
+
"code": "() => (\n <div\n className={`${classes.RealisticTimeline} ${classes.AvatarGutter}`}\n onClick={(e) => {\n if ((e.target as HTMLElement).closest('a')) e.preventDefault()\n }}\n >\n <Timeline>\n <Timeline.Item>\n <Timeline.Avatar>\n <Avatar\n size={40}\n src=\"https://avatars.githubusercontent.com/u/92997159?v=4\"\n alt=\"\"\n />\n </Timeline.Avatar>\n <Timeline.Badge variant=\"done\">\n <Octicon icon={CheckIcon} aria-label=\"Approved\" />\n </Timeline.Badge>\n <Timeline.Body>\n <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n monalisa\n </Link>\n {'approved these changes '}\n <RelativeTime date={new Date()} format=\"relative\" />\n </Timeline.Body>\n <Timeline.Actions>\n <Button size=\"small\">View reviewed changes</Button>\n </Timeline.Actions>\n </Timeline.Item>\n </Timeline>\n </div>\n)"
|
|
8193
8193
|
}
|
|
8194
8194
|
],
|
|
8195
8195
|
"importPath": "@primer/react",
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/react",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "38.34.0-rc.
|
|
4
|
+
"version": "38.34.0-rc.ac0faffd6",
|
|
5
5
|
"description": "An implementation of GitHub's Primer Design System using React",
|
|
6
6
|
"main": "./dist/index.js",
|
|
7
7
|
"module": "./dist/index.js",
|
|
@@ -77,6 +77,7 @@
|
|
|
77
77
|
"dependencies": {
|
|
78
78
|
"@github/mini-throttle": "^2.1.1",
|
|
79
79
|
"@github/relative-time-element": "^5.0.0",
|
|
80
|
+
"@github/tab-container-element": "^4.8.2",
|
|
80
81
|
"@lit-labs/react": "1.2.1",
|
|
81
82
|
"@oddbird/popover-polyfill": "^0.5.2",
|
|
82
83
|
"@primer/behaviors": "^1.10.3",
|