@primer/react 38.1.0-rc.8e0fa8938 → 38.1.0-rc.91131f047
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 +6 -0
- package/dist/ActionBar/ActionBar.d.ts.map +1 -1
- package/dist/ActionBar/ActionBar.js +7 -9
- package/dist/AnchoredOverlay/AnchoredOverlay.d.ts.map +1 -1
- package/dist/AnchoredOverlay/AnchoredOverlay.js +13 -1
- package/dist/experimental/Tabs/Tabs.d.ts +127 -0
- package/dist/experimental/Tabs/Tabs.d.ts.map +1 -0
- package/dist/experimental/Tabs/Tabs.js +317 -0
- package/dist/experimental/Tabs/index.d.ts +3 -0
- package/dist/experimental/Tabs/index.d.ts.map +1 -0
- package/dist/experimental/index.d.ts +1 -0
- package/dist/experimental/index.d.ts.map +1 -1
- package/dist/experimental/index.js +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -10,6 +10,8 @@
|
|
|
10
10
|
|
|
11
11
|
- [#7063](https://github.com/primer/react/pull/7063) [`247c66a`](https://github.com/primer/react/commit/247c66a3c297afba73c6e9e3842cc15ff8a845c1) Thanks [@francinelucca](https://github.com/francinelucca)! - Feat: popover implement click outside
|
|
12
12
|
|
|
13
|
+
- [#7123](https://github.com/primer/react/pull/7123) [`01b16db`](https://github.com/primer/react/commit/01b16dbe6bf7984bcd282ba5d640d2f6b19b887f) Thanks [@adierkens](https://github.com/adierkens)! - Adds an experimental `Tabs` utility component & associated hooks
|
|
14
|
+
|
|
13
15
|
- [#7109](https://github.com/primer/react/pull/7109) [`34e7108`](https://github.com/primer/react/commit/34e71089ea7668d7b0ab4572f125d13b998e8754) Thanks [@adierkens](https://github.com/adierkens)! - Add support to ActionList for 'tablist' and 'tab' roles
|
|
14
16
|
|
|
15
17
|
- [#7112](https://github.com/primer/react/pull/7112) [`7160709`](https://github.com/primer/react/commit/71607096f1ed60455313d3e1e26ce803f985307c) Thanks [@hectahertz](https://github.com/hectahertz)! - PageHeader: Remove useResponsiveValue hook from TitleArea variant prop
|
|
@@ -24,8 +26,12 @@
|
|
|
24
26
|
|
|
25
27
|
- [#7060](https://github.com/primer/react/pull/7060) [`3468793`](https://github.com/primer/react/commit/3468793e15269d6d9f226ee7844921e44bfc4622) Thanks [@francinelucca](https://github.com/francinelucca)! - @primer/react: chore(Dialog): allow direct children
|
|
26
28
|
|
|
29
|
+
- [#7115](https://github.com/primer/react/pull/7115) [`21cefb9`](https://github.com/primer/react/commit/21cefb96c1ed7d00d6b16f29ea5d358c6502d160) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ActionBar: IconButton no longer adds it's own `data-testid`
|
|
30
|
+
|
|
27
31
|
- [#7061](https://github.com/primer/react/pull/7061) [`e58e102`](https://github.com/primer/react/commit/e58e1027d7f3cdae5223c08d83f7b86918db370b) Thanks [@francinelucca](https://github.com/francinelucca)! - PageLayout: update wrapper dimensions to match PageLayout's root element
|
|
28
32
|
|
|
33
|
+
- [#7130](https://github.com/primer/react/pull/7130) [`57ffdbc`](https://github.com/primer/react/commit/57ffdbce7fa2bedd762b7e4d6dcea1d916e0da9c) Thanks [@joshblack](https://github.com/joshblack)! - Update the `AnchoredOverlay` component so that the `ref` value is not overridden when spreading props
|
|
34
|
+
|
|
29
35
|
- [#7097](https://github.com/primer/react/pull/7097) [`12fad7a`](https://github.com/primer/react/commit/12fad7af4d9d31898dfff5d3419987100b398d9e) Thanks [@francinelucca](https://github.com/francinelucca)! - chore: fix UnderlineWrapper html structure
|
|
30
36
|
|
|
31
37
|
- [#7101](https://github.com/primer/react/pull/7101) [`9382e52`](https://github.com/primer/react/commit/9382e529a8a4a0204ce0c412a0c8840cfbfe9f2c) Thanks [@hectahertz](https://github.com/hectahertz)! - Remove use of useResponsiveValue hook - PageLayout
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../src/ActionBar/ActionBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAE7E,OAAO,EAAa,KAAK,mBAAmB,EAAC,MAAM,eAAe,CAAA;AAOlE,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,WAAW,CAAA;AAoD9C,KAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAExC,KAAK,SAAS,GACV;IACE,wDAAwD;IACxD,YAAY,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IAChD,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAC9B,GACD;IACE,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;CAC3D,CAAA;AAEL,KAAK,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAA;AAEpC,MAAM,MAAM,cAAc,GAAG;IAC3B;;;SAGK;IACL,IAAI,CAAC,EAAE,IAAI,CAAA;IAEX,gCAAgC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAEzB;;;SAGK;IACL,KAAK,CAAC,EAAE,OAAO,CAAA;IAEf,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;OAGG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAA;CACf,GAAG,SAAS,CAAA;AAEb,MAAM,MAAM,wBAAwB,GAAG;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAC,GAAG,eAAe,CAAA;AAE7E,MAAM,MAAM,sBAAsB,GAC9B,CAAC;IACC;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,wBAAwB,CAAC,MAAM,CAAC,CAAA;IAChD;;OAEG;IACH,cAAc,CAAC,EAAE,wBAAwB,CAAC,MAAM,CAAC,GAAG,MAAM,CAAA;IAC1D;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAA;IACzC;;;OAGG;IACH,KAAK,CAAC,EAAE,sBAAsB,EAAE,CAAA;CACjC,GAAG,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC,GACzC;IACE,IAAI,EAAE,SAAS,CAAA;CAChB,CAAA;AAEL,MAAM,MAAM,kBAAkB,GAAG;IAC/B,2CAA2C;IAC3C,YAAY,EAAE,MAAM,CAAA;IACpB,+BAA+B;IAC/B,IAAI,EAAE,wBAAwB,CAAC,MAAM,CAAC,CAAA;IACtC,KAAK,EAAE,sBAAsB,EAAE,CAAA;IAC/B;;;OAGG;IACH,YAAY,CAAC,EAAE,wBAAwB,CAAC,MAAM,CAAC,GAAG,MAAM,CAAA;CACzD,GAAG,eAAe,CAAA;AAgInB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAgNvE,CAAA;AAED,eAAO,MAAM,mBAAmB,
|
|
1
|
+
{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../src/ActionBar/ActionBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAE7E,OAAO,EAAa,KAAK,mBAAmB,EAAC,MAAM,eAAe,CAAA;AAOlE,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,WAAW,CAAA;AAoD9C,KAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAExC,KAAK,SAAS,GACV;IACE,wDAAwD;IACxD,YAAY,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IAChD,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAC9B,GACD;IACE,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;CAC3D,CAAA;AAEL,KAAK,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAA;AAEpC,MAAM,MAAM,cAAc,GAAG;IAC3B;;;SAGK;IACL,IAAI,CAAC,EAAE,IAAI,CAAA;IAEX,gCAAgC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAEzB;;;SAGK;IACL,KAAK,CAAC,EAAE,OAAO,CAAA;IAEf,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;OAGG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAA;CACf,GAAG,SAAS,CAAA;AAEb,MAAM,MAAM,wBAAwB,GAAG;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAC,GAAG,eAAe,CAAA;AAE7E,MAAM,MAAM,sBAAsB,GAC9B,CAAC;IACC;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,wBAAwB,CAAC,MAAM,CAAC,CAAA;IAChD;;OAEG;IACH,cAAc,CAAC,EAAE,wBAAwB,CAAC,MAAM,CAAC,GAAG,MAAM,CAAA;IAC1D;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAA;IACzC;;;OAGG;IACH,KAAK,CAAC,EAAE,sBAAsB,EAAE,CAAA;CACjC,GAAG,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC,GACzC;IACE,IAAI,EAAE,SAAS,CAAA;CAChB,CAAA;AAEL,MAAM,MAAM,kBAAkB,GAAG;IAC/B,2CAA2C;IAC3C,YAAY,EAAE,MAAM,CAAA;IACpB,+BAA+B;IAC/B,IAAI,EAAE,wBAAwB,CAAC,MAAM,CAAC,CAAA;IACtC,KAAK,EAAE,sBAAsB,EAAE,CAAA;IAC/B;;;OAGG;IACH,YAAY,CAAC,EAAE,wBAAwB,CAAC,MAAM,CAAC,GAAG,MAAM,CAAA;CACzD,GAAG,eAAe,CAAA;AAgInB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAgNvE,CAAA;AAED,eAAO,MAAM,mBAAmB,0FAqD/B,CAAA;AAMD,eAAO,MAAM,cAAc;;iCA6BzB,CAAA;AAEF,eAAO,MAAM,aAAa;IAtbxB,2CAA2C;kBAC7B,MAAM;IACpB,+BAA+B;UACzB,wBAAwB,CAAC,MAAM,CAAC;WAC/B,sBAAsB,EAAE;IAC/B;;;OAGG;mBACY,wBAAwB,CAAC,MAAM,CAAC,GAAG,MAAM;;;;;;;;;;;wGAydzD,CAAA;AAED,eAAO,MAAM,eAAe,gCAoB3B,CAAA"}
|
|
@@ -479,7 +479,7 @@ const ActionBar = props => {
|
|
|
479
479
|
return t20;
|
|
480
480
|
};
|
|
481
481
|
const ActionBarIconButton = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
|
|
482
|
-
const $ = c(
|
|
482
|
+
const $ = c(27);
|
|
483
483
|
let disabled;
|
|
484
484
|
let onClick;
|
|
485
485
|
let props;
|
|
@@ -581,24 +581,22 @@ const ActionBarIconButton = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
|
|
|
581
581
|
return null;
|
|
582
582
|
}
|
|
583
583
|
let t5;
|
|
584
|
-
if ($[22] !== clickHandler || $[23] !== disabled || $[24] !==
|
|
584
|
+
if ($[22] !== clickHandler || $[23] !== disabled || $[24] !== props || $[25] !== size) {
|
|
585
585
|
t5 = /*#__PURE__*/jsx(IconButton, {
|
|
586
586
|
"aria-disabled": disabled,
|
|
587
587
|
ref: ref,
|
|
588
588
|
size: size,
|
|
589
589
|
onClick: clickHandler,
|
|
590
590
|
...props,
|
|
591
|
-
variant: "invisible"
|
|
592
|
-
"data-testid": id
|
|
591
|
+
variant: "invisible"
|
|
593
592
|
});
|
|
594
593
|
$[22] = clickHandler;
|
|
595
594
|
$[23] = disabled;
|
|
596
|
-
$[24] =
|
|
597
|
-
$[25] =
|
|
598
|
-
$[26] =
|
|
599
|
-
$[27] = t5;
|
|
595
|
+
$[24] = props;
|
|
596
|
+
$[25] = size;
|
|
597
|
+
$[26] = t5;
|
|
600
598
|
} else {
|
|
601
|
-
t5 = $[
|
|
599
|
+
t5 = $[26];
|
|
602
600
|
}
|
|
603
601
|
return t5;
|
|
604
602
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnchoredOverlay.d.ts","sourceRoot":"","sources":["../../src/AnchoredOverlay/AnchoredOverlay.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"AnchoredOverlay.d.ts","sourceRoot":"","sources":["../../src/AnchoredOverlay/AnchoredOverlay.tsx"],"names":[],"mappings":"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"}
|
|
@@ -124,7 +124,6 @@ const AnchoredOverlay = ({
|
|
|
124
124
|
onClickOutside: onClickOutside,
|
|
125
125
|
ignoreClickRefs: [anchorRef],
|
|
126
126
|
onEscape: onEscape,
|
|
127
|
-
ref: updateOverlayRef,
|
|
128
127
|
role: "none",
|
|
129
128
|
visibility: position_0 ? 'visible' : 'hidden',
|
|
130
129
|
height: height,
|
|
@@ -137,6 +136,12 @@ const AnchoredOverlay = ({
|
|
|
137
136
|
className: className,
|
|
138
137
|
preventOverflow: preventOverflow,
|
|
139
138
|
...overlayProps,
|
|
139
|
+
ref: node => {
|
|
140
|
+
if (overlayProps !== null && overlayProps !== void 0 && overlayProps.ref) {
|
|
141
|
+
assignRef(overlayProps.ref, node);
|
|
142
|
+
}
|
|
143
|
+
updateOverlayRef(node);
|
|
144
|
+
},
|
|
140
145
|
children: [showXIcon ? /*#__PURE__*/jsx("div", {
|
|
141
146
|
className: classes.ResponsiveCloseButtonContainer,
|
|
142
147
|
children: /*#__PURE__*/jsx(IconButton, {
|
|
@@ -160,6 +165,13 @@ const AnchoredOverlay = ({
|
|
|
160
165
|
}) : null]
|
|
161
166
|
});
|
|
162
167
|
};
|
|
168
|
+
function assignRef(ref, value) {
|
|
169
|
+
if (typeof ref === 'function') {
|
|
170
|
+
ref(value);
|
|
171
|
+
} else if (ref) {
|
|
172
|
+
ref.current = value;
|
|
173
|
+
}
|
|
174
|
+
}
|
|
163
175
|
AnchoredOverlay.displayName = 'AnchoredOverlay';
|
|
164
176
|
|
|
165
177
|
export { AnchoredOverlay };
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
import React, { type AriaAttributes, type PropsWithChildren } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Props to be used when the Tabs component's state is controlled by the parent
|
|
4
|
+
*/
|
|
5
|
+
type ControlledTabsProps = {
|
|
6
|
+
/**
|
|
7
|
+
* Specify the selected tab
|
|
8
|
+
*/
|
|
9
|
+
value: string;
|
|
10
|
+
/**
|
|
11
|
+
* `defaultValue` can only be used in the uncontrolled variant of the component
|
|
12
|
+
* If you need to use `defaultValue`, please switch to the uncontrolled variant by removing the `value` prop.
|
|
13
|
+
*/
|
|
14
|
+
defaultValue?: never;
|
|
15
|
+
/**
|
|
16
|
+
* Provide an optional callback that is called when the selected tab changes
|
|
17
|
+
*/
|
|
18
|
+
onValueChange: ({ value }: {
|
|
19
|
+
value: string;
|
|
20
|
+
}) => void;
|
|
21
|
+
};
|
|
22
|
+
/**
|
|
23
|
+
* Props to be used when the Tabs component is managing its own state
|
|
24
|
+
*/
|
|
25
|
+
type UncontrolledTabsProps = {
|
|
26
|
+
/**
|
|
27
|
+
* Specify the default selected tab
|
|
28
|
+
*/
|
|
29
|
+
defaultValue: string;
|
|
30
|
+
/**
|
|
31
|
+
* `value` can only be used in the controlled variant of the component
|
|
32
|
+
* If you need to use `value`, please switch to the controlled variant by removing the `defaultValue` prop.
|
|
33
|
+
*/
|
|
34
|
+
value?: never;
|
|
35
|
+
/**
|
|
36
|
+
* Provide an optional callback that is called when the selected tab changes
|
|
37
|
+
*/
|
|
38
|
+
onValueChange?: ({ value }: {
|
|
39
|
+
value: string;
|
|
40
|
+
}) => void;
|
|
41
|
+
};
|
|
42
|
+
type TabsProps = PropsWithChildren<ControlledTabsProps | UncontrolledTabsProps>;
|
|
43
|
+
/**
|
|
44
|
+
* The Tabs component provides the base structure for a tabbed interface, without providing any formal requirement on DOM structure or styling.
|
|
45
|
+
* It manages the state of the selected tab, handles tab ordering/selection and provides context to its child components to ensure an accessible experience.
|
|
46
|
+
*
|
|
47
|
+
* This is intended to be used in conjunction with the `useTab`, `useTabList`, and `useTabPanel` hooks to build a fully accessible tabs component.
|
|
48
|
+
* The `Tab`, `TabList`, and `TabPanel` components are provided for convenience to showcase the API & implementation.
|
|
49
|
+
*/
|
|
50
|
+
declare function Tabs(props: TabsProps): React.JSX.Element;
|
|
51
|
+
type Label = {
|
|
52
|
+
'aria-label': string;
|
|
53
|
+
};
|
|
54
|
+
type LabelledBy = {
|
|
55
|
+
'aria-labelledby': string;
|
|
56
|
+
};
|
|
57
|
+
type Labelled = Label | LabelledBy;
|
|
58
|
+
type TabListProps = Labelled & React.HTMLAttributes<HTMLElement>;
|
|
59
|
+
declare function useTabList<T extends HTMLElement>(props: TabListProps & {
|
|
60
|
+
/** Optional ref to use for the tablist. If none is provided, one will be generated automatically */
|
|
61
|
+
ref?: React.RefObject<T>;
|
|
62
|
+
}): {
|
|
63
|
+
/** Props to be spread onto the tablist element */
|
|
64
|
+
tabListProps: {
|
|
65
|
+
onKeyDown: React.KeyboardEventHandler<T>;
|
|
66
|
+
'aria-orientation': AriaAttributes['aria-orientation'];
|
|
67
|
+
'aria-label': AriaAttributes['aria-label'];
|
|
68
|
+
'aria-labelledby': AriaAttributes['aria-labelledby'];
|
|
69
|
+
ref: React.RefObject<T>;
|
|
70
|
+
role: 'tablist';
|
|
71
|
+
};
|
|
72
|
+
};
|
|
73
|
+
declare function TabList({ children, ...rest }: TabListProps): React.JSX.Element;
|
|
74
|
+
type TabProps = React.ComponentPropsWithoutRef<'button'> & {
|
|
75
|
+
/**
|
|
76
|
+
* Specify whether the tab is disabled
|
|
77
|
+
*/
|
|
78
|
+
disabled?: boolean;
|
|
79
|
+
/**
|
|
80
|
+
* Provide a value that uniquely identifies the tab. This should mirror the
|
|
81
|
+
* value provided to the corresponding TabPanel
|
|
82
|
+
*/
|
|
83
|
+
value: string;
|
|
84
|
+
};
|
|
85
|
+
/**
|
|
86
|
+
* A custom hook that provides the props needed for a tab component.
|
|
87
|
+
* The props returned should be spread onto the component (typically a button) with the `role=tab`, under a `tablist`.
|
|
88
|
+
*/
|
|
89
|
+
declare function useTab<T extends HTMLElement>(props: Pick<TabProps, 'disabled' | 'value'>): {
|
|
90
|
+
/** Props to be spread onto the tab component */
|
|
91
|
+
tabProps: Pick<React.HTMLProps<T>, 'aria-controls' | 'aria-disabled' | 'aria-selected' | 'id' | 'tabIndex' | 'onKeyDown' | 'onMouseDown' | 'onFocus'> & {
|
|
92
|
+
role: 'tab';
|
|
93
|
+
};
|
|
94
|
+
};
|
|
95
|
+
declare const Tab: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
96
|
+
/**
|
|
97
|
+
* Specify whether the tab is disabled
|
|
98
|
+
*/
|
|
99
|
+
disabled?: boolean;
|
|
100
|
+
/**
|
|
101
|
+
* Provide a value that uniquely identifies the tab. This should mirror the
|
|
102
|
+
* value provided to the corresponding TabPanel
|
|
103
|
+
*/
|
|
104
|
+
value: string;
|
|
105
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
106
|
+
type TabPanelProps = {
|
|
107
|
+
/**
|
|
108
|
+
* Provide a value that uniquely identifies the tab panel. This should mirror
|
|
109
|
+
* the value set for the corresponding tab
|
|
110
|
+
*/
|
|
111
|
+
value: string;
|
|
112
|
+
};
|
|
113
|
+
/** Utility hook for tab panels */
|
|
114
|
+
declare function useTabPanel<T extends HTMLElement>(props: TabPanelProps): {
|
|
115
|
+
/** Props to be spread onto the tabpanel component */
|
|
116
|
+
tabPanelProps: Pick<React.HTMLProps<T>, 'aria-labelledby' | 'id' | 'hidden'> & {
|
|
117
|
+
/**
|
|
118
|
+
* An identifier to aid in styling when this panel is selected & active
|
|
119
|
+
*/
|
|
120
|
+
'data-selected': string | undefined;
|
|
121
|
+
role: 'tabpanel';
|
|
122
|
+
};
|
|
123
|
+
};
|
|
124
|
+
declare function TabPanel({ children, value, ...rest }: React.HTMLAttributes<HTMLDivElement> & TabPanelProps): React.JSX.Element;
|
|
125
|
+
export { Tabs, TabList, Tab, TabPanel, useTab, useTabList, useTabPanel };
|
|
126
|
+
export type { TabsProps, TabListProps, TabProps, TabPanelProps };
|
|
127
|
+
//# sourceMappingURL=Tabs.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/experimental/Tabs/Tabs.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,317 @@
|
|
|
1
|
+
import { c } from 'react-compiler-runtime';
|
|
2
|
+
import React, { useId, createContext, useContext } from 'react';
|
|
3
|
+
import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect.js';
|
|
4
|
+
import { useControllableState } from '../../hooks/useControllableState.js';
|
|
5
|
+
import { jsx } from 'react/jsx-runtime';
|
|
6
|
+
import { useProvidedRefOrCreate } from '../../hooks/useProvidedRefOrCreate.js';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* The Tabs component provides the base structure for a tabbed interface, without providing any formal requirement on DOM structure or styling.
|
|
10
|
+
* It manages the state of the selected tab, handles tab ordering/selection and provides context to its child components to ensure an accessible experience.
|
|
11
|
+
*
|
|
12
|
+
* This is intended to be used in conjunction with the `useTab`, `useTabList`, and `useTabPanel` hooks to build a fully accessible tabs component.
|
|
13
|
+
* The `Tab`, `TabList`, and `TabPanel` components are provided for convenience to showcase the API & implementation.
|
|
14
|
+
*/
|
|
15
|
+
function Tabs(props) {
|
|
16
|
+
var _props$defaultValue;
|
|
17
|
+
const $ = c(13);
|
|
18
|
+
const {
|
|
19
|
+
children,
|
|
20
|
+
onValueChange
|
|
21
|
+
} = props;
|
|
22
|
+
const groupId = useId();
|
|
23
|
+
const t0 = (_props$defaultValue = props.defaultValue) !== null && _props$defaultValue !== void 0 ? _props$defaultValue : props.value;
|
|
24
|
+
let t1;
|
|
25
|
+
if ($[0] !== props.value || $[1] !== t0) {
|
|
26
|
+
t1 = {
|
|
27
|
+
name: "tab-selection",
|
|
28
|
+
defaultValue: t0,
|
|
29
|
+
value: props.value
|
|
30
|
+
};
|
|
31
|
+
$[0] = props.value;
|
|
32
|
+
$[1] = t0;
|
|
33
|
+
$[2] = t1;
|
|
34
|
+
} else {
|
|
35
|
+
t1 = $[2];
|
|
36
|
+
}
|
|
37
|
+
const [selectedValue, setSelectedValue] = useControllableState(t1);
|
|
38
|
+
const savedOnValueChange = React.useRef(onValueChange);
|
|
39
|
+
let t2;
|
|
40
|
+
if ($[3] !== groupId || $[4] !== selectedValue || $[5] !== setSelectedValue) {
|
|
41
|
+
t2 = {
|
|
42
|
+
groupId,
|
|
43
|
+
selectedValue,
|
|
44
|
+
selectTab(value) {
|
|
45
|
+
var _savedOnValueChange$c;
|
|
46
|
+
setSelectedValue(value);
|
|
47
|
+
(_savedOnValueChange$c = savedOnValueChange.current) === null || _savedOnValueChange$c === void 0 ? void 0 : _savedOnValueChange$c.call(savedOnValueChange, {
|
|
48
|
+
value
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
$[3] = groupId;
|
|
53
|
+
$[4] = selectedValue;
|
|
54
|
+
$[5] = setSelectedValue;
|
|
55
|
+
$[6] = t2;
|
|
56
|
+
} else {
|
|
57
|
+
t2 = $[6];
|
|
58
|
+
}
|
|
59
|
+
const contextValue = t2;
|
|
60
|
+
let t3;
|
|
61
|
+
let t4;
|
|
62
|
+
if ($[7] !== onValueChange) {
|
|
63
|
+
t3 = () => {
|
|
64
|
+
savedOnValueChange.current = onValueChange;
|
|
65
|
+
};
|
|
66
|
+
t4 = [onValueChange];
|
|
67
|
+
$[7] = onValueChange;
|
|
68
|
+
$[8] = t3;
|
|
69
|
+
$[9] = t4;
|
|
70
|
+
} else {
|
|
71
|
+
t3 = $[8];
|
|
72
|
+
t4 = $[9];
|
|
73
|
+
}
|
|
74
|
+
useIsomorphicLayoutEffect(t3, t4);
|
|
75
|
+
let t5;
|
|
76
|
+
if ($[10] !== children || $[11] !== contextValue) {
|
|
77
|
+
t5 = /*#__PURE__*/jsx(TabsContext.Provider, {
|
|
78
|
+
value: contextValue,
|
|
79
|
+
children: children
|
|
80
|
+
});
|
|
81
|
+
$[10] = children;
|
|
82
|
+
$[11] = contextValue;
|
|
83
|
+
$[12] = t5;
|
|
84
|
+
} else {
|
|
85
|
+
t5 = $[12];
|
|
86
|
+
}
|
|
87
|
+
return t5;
|
|
88
|
+
}
|
|
89
|
+
function useTabList(props) {
|
|
90
|
+
const $ = c(9);
|
|
91
|
+
const {
|
|
92
|
+
"aria-label": ariaLabel,
|
|
93
|
+
"aria-labelledby": ariaLabelledby,
|
|
94
|
+
"aria-orientation": ariaOrientation
|
|
95
|
+
} = props;
|
|
96
|
+
const ref = useProvidedRefOrCreate(props.ref);
|
|
97
|
+
let t0;
|
|
98
|
+
if ($[0] !== ariaOrientation || $[1] !== ref) {
|
|
99
|
+
t0 = event => {
|
|
100
|
+
const {
|
|
101
|
+
current: tablist
|
|
102
|
+
} = ref;
|
|
103
|
+
if (tablist === null) {
|
|
104
|
+
return;
|
|
105
|
+
}
|
|
106
|
+
const tabs = getFocusableTabs(tablist);
|
|
107
|
+
const isVertical = ariaOrientation === "vertical";
|
|
108
|
+
const nextKey = isVertical ? "ArrowDown" : "ArrowRight";
|
|
109
|
+
const prevKey = isVertical ? "ArrowUp" : "ArrowLeft";
|
|
110
|
+
if (event.key === nextKey || event.key === prevKey || event.key === "Home" || event.key === "End") {
|
|
111
|
+
event.preventDefault();
|
|
112
|
+
event.stopPropagation();
|
|
113
|
+
}
|
|
114
|
+
if (event.key === nextKey) {
|
|
115
|
+
const selectedTabIndex = tabs.findIndex(_temp);
|
|
116
|
+
if (selectedTabIndex === -1) {
|
|
117
|
+
return;
|
|
118
|
+
}
|
|
119
|
+
const nextTabIndex = (selectedTabIndex + 1) % tabs.length;
|
|
120
|
+
tabs[nextTabIndex].focus();
|
|
121
|
+
} else {
|
|
122
|
+
if (event.key === prevKey) {
|
|
123
|
+
const selectedTabIndex_0 = tabs.findIndex(_temp2);
|
|
124
|
+
if (selectedTabIndex_0 === -1) {
|
|
125
|
+
return;
|
|
126
|
+
}
|
|
127
|
+
const nextTabIndex_0 = (tabs.length + selectedTabIndex_0 - 1) % tabs.length;
|
|
128
|
+
tabs[nextTabIndex_0].focus();
|
|
129
|
+
} else {
|
|
130
|
+
if (event.key === "Home") {
|
|
131
|
+
if (tabs[0]) {
|
|
132
|
+
tabs[0].focus();
|
|
133
|
+
}
|
|
134
|
+
} else {
|
|
135
|
+
if (event.key === "End") {
|
|
136
|
+
if (tabs.length > 0) {
|
|
137
|
+
tabs[tabs.length - 1].focus();
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
};
|
|
144
|
+
$[0] = ariaOrientation;
|
|
145
|
+
$[1] = ref;
|
|
146
|
+
$[2] = t0;
|
|
147
|
+
} else {
|
|
148
|
+
t0 = $[2];
|
|
149
|
+
}
|
|
150
|
+
const onKeyDown = t0;
|
|
151
|
+
const t1 = ariaOrientation !== null && ariaOrientation !== void 0 ? ariaOrientation : "horizontal";
|
|
152
|
+
let t2;
|
|
153
|
+
if ($[3] !== ariaLabel || $[4] !== ariaLabelledby || $[5] !== onKeyDown || $[6] !== ref || $[7] !== t1) {
|
|
154
|
+
t2 = {
|
|
155
|
+
tabListProps: {
|
|
156
|
+
ref,
|
|
157
|
+
"aria-label": ariaLabel,
|
|
158
|
+
"aria-labelledby": ariaLabelledby,
|
|
159
|
+
"aria-orientation": t1,
|
|
160
|
+
role: "tablist",
|
|
161
|
+
onKeyDown
|
|
162
|
+
}
|
|
163
|
+
};
|
|
164
|
+
$[3] = ariaLabel;
|
|
165
|
+
$[4] = ariaLabelledby;
|
|
166
|
+
$[5] = onKeyDown;
|
|
167
|
+
$[6] = ref;
|
|
168
|
+
$[7] = t1;
|
|
169
|
+
$[8] = t2;
|
|
170
|
+
} else {
|
|
171
|
+
t2 = $[8];
|
|
172
|
+
}
|
|
173
|
+
return t2;
|
|
174
|
+
}
|
|
175
|
+
function _temp2(tab_0) {
|
|
176
|
+
return tab_0.getAttribute("aria-selected") === "true";
|
|
177
|
+
}
|
|
178
|
+
function _temp(tab) {
|
|
179
|
+
return tab.getAttribute("aria-selected") === "true";
|
|
180
|
+
}
|
|
181
|
+
function getFocusableTabs(tablist) {
|
|
182
|
+
return Array.from(tablist.querySelectorAll('[role="tab"]:not([aria-disabled])'));
|
|
183
|
+
}
|
|
184
|
+
/**
|
|
185
|
+
* A custom hook that provides the props needed for a tab component.
|
|
186
|
+
* The props returned should be spread onto the component (typically a button) with the `role=tab`, under a `tablist`.
|
|
187
|
+
*/
|
|
188
|
+
function useTab(props) {
|
|
189
|
+
const $ = c(21);
|
|
190
|
+
const {
|
|
191
|
+
disabled,
|
|
192
|
+
value
|
|
193
|
+
} = props;
|
|
194
|
+
const tabs = useTabs();
|
|
195
|
+
const selected = tabs.selectedValue === value;
|
|
196
|
+
const id = `${tabs.groupId}-tab-${value}`;
|
|
197
|
+
const panelId = `${tabs.groupId}-panel-${value}`;
|
|
198
|
+
let t0;
|
|
199
|
+
if ($[0] !== tabs || $[1] !== value) {
|
|
200
|
+
t0 = function onKeyDown(event) {
|
|
201
|
+
if (event.key === " " || event.key === "Enter") {
|
|
202
|
+
tabs.selectTab(value);
|
|
203
|
+
}
|
|
204
|
+
};
|
|
205
|
+
$[0] = tabs;
|
|
206
|
+
$[1] = value;
|
|
207
|
+
$[2] = t0;
|
|
208
|
+
} else {
|
|
209
|
+
t0 = $[2];
|
|
210
|
+
}
|
|
211
|
+
const onKeyDown = t0;
|
|
212
|
+
let t1;
|
|
213
|
+
if ($[3] !== disabled || $[4] !== tabs || $[5] !== value) {
|
|
214
|
+
t1 = function onMouseDown(event_0) {
|
|
215
|
+
if (!disabled && event_0.button === 0 && event_0.ctrlKey === false) {
|
|
216
|
+
tabs.selectTab(value);
|
|
217
|
+
} else {
|
|
218
|
+
event_0.preventDefault();
|
|
219
|
+
}
|
|
220
|
+
};
|
|
221
|
+
$[3] = disabled;
|
|
222
|
+
$[4] = tabs;
|
|
223
|
+
$[5] = value;
|
|
224
|
+
$[6] = t1;
|
|
225
|
+
} else {
|
|
226
|
+
t1 = $[6];
|
|
227
|
+
}
|
|
228
|
+
const onMouseDown = t1;
|
|
229
|
+
let t2;
|
|
230
|
+
if ($[7] !== disabled || $[8] !== selected || $[9] !== tabs || $[10] !== value) {
|
|
231
|
+
t2 = function onFocus() {
|
|
232
|
+
if (!selected && !disabled) {
|
|
233
|
+
tabs.selectTab(value);
|
|
234
|
+
}
|
|
235
|
+
};
|
|
236
|
+
$[7] = disabled;
|
|
237
|
+
$[8] = selected;
|
|
238
|
+
$[9] = tabs;
|
|
239
|
+
$[10] = value;
|
|
240
|
+
$[11] = t2;
|
|
241
|
+
} else {
|
|
242
|
+
t2 = $[11];
|
|
243
|
+
}
|
|
244
|
+
const onFocus = t2;
|
|
245
|
+
const t3 = disabled ? true : undefined;
|
|
246
|
+
const t4 = selected ? 0 : -1;
|
|
247
|
+
let t5;
|
|
248
|
+
if ($[12] !== id || $[13] !== onFocus || $[14] !== onKeyDown || $[15] !== onMouseDown || $[16] !== panelId || $[17] !== selected || $[18] !== t3 || $[19] !== t4) {
|
|
249
|
+
t5 = {
|
|
250
|
+
tabProps: {
|
|
251
|
+
"aria-disabled": t3,
|
|
252
|
+
"aria-controls": panelId,
|
|
253
|
+
"aria-selected": selected,
|
|
254
|
+
onKeyDown,
|
|
255
|
+
onMouseDown,
|
|
256
|
+
onFocus,
|
|
257
|
+
id,
|
|
258
|
+
role: "tab",
|
|
259
|
+
tabIndex: t4
|
|
260
|
+
}
|
|
261
|
+
};
|
|
262
|
+
$[12] = id;
|
|
263
|
+
$[13] = onFocus;
|
|
264
|
+
$[14] = onKeyDown;
|
|
265
|
+
$[15] = onMouseDown;
|
|
266
|
+
$[16] = panelId;
|
|
267
|
+
$[17] = selected;
|
|
268
|
+
$[18] = t3;
|
|
269
|
+
$[19] = t4;
|
|
270
|
+
$[20] = t5;
|
|
271
|
+
} else {
|
|
272
|
+
t5 = $[20];
|
|
273
|
+
}
|
|
274
|
+
return t5;
|
|
275
|
+
}
|
|
276
|
+
/** Utility hook for tab panels */
|
|
277
|
+
function useTabPanel(props) {
|
|
278
|
+
const $ = c(5);
|
|
279
|
+
const {
|
|
280
|
+
value
|
|
281
|
+
} = props;
|
|
282
|
+
const tabs = useTabs();
|
|
283
|
+
const id = `${tabs.groupId}-panel-${value}`;
|
|
284
|
+
const tabId = `${tabs.groupId}-tab-${value}`;
|
|
285
|
+
const t0 = tabs.selectedValue === value ? "" : undefined;
|
|
286
|
+
const t1 = tabs.selectedValue !== value;
|
|
287
|
+
let t2;
|
|
288
|
+
if ($[0] !== id || $[1] !== t0 || $[2] !== t1 || $[3] !== tabId) {
|
|
289
|
+
t2 = {
|
|
290
|
+
tabPanelProps: {
|
|
291
|
+
"aria-labelledby": tabId,
|
|
292
|
+
"data-selected": t0,
|
|
293
|
+
id,
|
|
294
|
+
hidden: t1,
|
|
295
|
+
role: "tabpanel"
|
|
296
|
+
}
|
|
297
|
+
};
|
|
298
|
+
$[0] = id;
|
|
299
|
+
$[1] = t0;
|
|
300
|
+
$[2] = t1;
|
|
301
|
+
$[3] = tabId;
|
|
302
|
+
$[4] = t2;
|
|
303
|
+
} else {
|
|
304
|
+
t2 = $[4];
|
|
305
|
+
}
|
|
306
|
+
return t2;
|
|
307
|
+
}
|
|
308
|
+
const TabsContext = /*#__PURE__*/createContext(null);
|
|
309
|
+
function useTabs() {
|
|
310
|
+
const context = useContext(TabsContext);
|
|
311
|
+
if (context) {
|
|
312
|
+
return context;
|
|
313
|
+
}
|
|
314
|
+
throw new Error("Component must be used within a <Tabs> component");
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
export { Tabs, useTab, useTabList, useTabPanel };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/experimental/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAC,MAAM,QAAQ,CAAA;AAC5D,YAAY,EAAC,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAC,MAAM,QAAQ,CAAA"}
|
|
@@ -45,4 +45,5 @@ export type { FilteredActionListProps } from '../FilteredActionList';
|
|
|
45
45
|
export { IssueLabel } from './IssueLabel';
|
|
46
46
|
export type { IssueLabelProps } from './IssueLabel';
|
|
47
47
|
export * from '../KeybindingHint';
|
|
48
|
+
export * from './Tabs';
|
|
48
49
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/experimental/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/experimental/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -29,3 +29,4 @@ export { useOverflow } from '../hooks/useOverflow.js';
|
|
|
29
29
|
export { useSlots } from '../hooks/useSlots.js';
|
|
30
30
|
export { SelectPanel } from './SelectPanel2/SelectPanel.js';
|
|
31
31
|
export { KeybindingHint, getAccessibleKeybindingHintString } from '../KeybindingHint/KeybindingHint.js';
|
|
32
|
+
export { Tabs, useTab, useTabList, useTabPanel } from './Tabs/Tabs.js';
|
package/package.json
CHANGED