@primer/react 38.30.0-rc.a2f58220f → 38.30.0-rc.a4950797a
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 +24 -1
- package/dist/ActionBar/ActionBar.d.ts.map +1 -1
- package/dist/ActionBar/ActionBar.js +96 -4
- package/dist/ActionBar/index.d.ts +21 -1
- package/dist/ActionBar/index.d.ts.map +1 -1
- package/dist/ActionBar/index.js +2 -1
- package/dist/SelectPanel/SelectPanel.d.ts +2 -2
- package/dist/SelectPanel/SelectPanel.d.ts.map +1 -1
- package/dist/SelectPanel/SelectPanel.js +4 -1
- package/dist/UnderlineNav/UnderlineNav-47547980.css +2 -0
- package/dist/UnderlineNav/UnderlineNav-47547980.css.map +1 -0
- package/dist/UnderlineNav/UnderlineNav.d.ts +1 -2
- package/dist/UnderlineNav/UnderlineNav.d.ts.map +1 -1
- package/dist/UnderlineNav/UnderlineNav.js +91 -331
- package/dist/UnderlineNav/UnderlineNav.module.css.js +2 -2
- package/dist/UnderlineNav/UnderlineNavContext.d.ts +1 -11
- package/dist/UnderlineNav/UnderlineNavContext.d.ts.map +1 -1
- package/dist/UnderlineNav/UnderlineNavContext.js +1 -4
- package/dist/UnderlineNav/UnderlineNavItem-402cd41c.css +2 -0
- package/dist/UnderlineNav/UnderlineNavItem-402cd41c.css.map +1 -0
- package/dist/UnderlineNav/UnderlineNavItem.d.ts +1 -44
- package/dist/UnderlineNav/UnderlineNavItem.d.ts.map +1 -1
- package/dist/UnderlineNav/UnderlineNavItem.js +33 -38
- package/dist/UnderlineNav/UnderlineNavItem.module.css.js +1 -1
- package/dist/UnderlineNav/UnderlineNavItemsRegistry.d.ts +51 -0
- package/dist/UnderlineNav/UnderlineNavItemsRegistry.d.ts.map +1 -0
- package/dist/UnderlineNav/UnderlineNavItemsRegistry.js +8 -0
- package/dist/UnderlineNav/index.d.ts +1 -1
- package/dist/UnderlineNav/index.d.ts.map +1 -1
- package/dist/UnderlineNav/utils.d.ts +2 -0
- package/dist/UnderlineNav/utils.d.ts.map +1 -1
- package/dist/UnderlineNav/utils.js +2 -1
- package/dist/experimental/UnderlinePanels/UnderlinePanels-162f9aed.css +2 -0
- package/dist/experimental/UnderlinePanels/UnderlinePanels-162f9aed.css.map +1 -0
- package/dist/experimental/UnderlinePanels/UnderlinePanels.d.ts.map +1 -1
- package/dist/experimental/UnderlinePanels/UnderlinePanels.js +8 -11
- package/dist/experimental/UnderlinePanels/UnderlinePanels.module.css.js +1 -1
- package/dist/internal/components/UnderlineTabbedInterface-1745a3d6.css +2 -0
- package/dist/internal/components/UnderlineTabbedInterface-1745a3d6.css.map +1 -0
- package/dist/internal/components/UnderlineTabbedInterface.d.ts +0 -1
- package/dist/internal/components/UnderlineTabbedInterface.d.ts.map +1 -1
- package/dist/internal/components/UnderlineTabbedInterface.js +66 -60
- package/dist/internal/components/UnderlineTabbedInterface.module.css.js +1 -1
- package/generated/components.json +30 -2
- package/package.json +1 -1
- package/dist/UnderlineNav/UnderlineNav-4344d9b0.css +0 -2
- package/dist/UnderlineNav/UnderlineNav-4344d9b0.css.map +0 -1
- package/dist/UnderlineNav/UnderlineNavItem-b65e8fd3.css +0 -2
- package/dist/UnderlineNav/UnderlineNavItem-b65e8fd3.css.map +0 -1
- package/dist/UnderlineNav/styles.d.ts +0 -16
- package/dist/UnderlineNav/styles.d.ts.map +0 -1
- package/dist/UnderlineNav/styles.js +0 -19
- package/dist/UnderlineNav/types.d.ts +0 -10
- package/dist/UnderlineNav/types.d.ts.map +0 -1
- package/dist/experimental/UnderlinePanels/UnderlinePanels-e4b325b9.css +0 -2
- package/dist/experimental/UnderlinePanels/UnderlinePanels-e4b325b9.css.map +0 -1
- package/dist/internal/components/UnderlineTabbedInterface-4197ee28.css +0 -2
- package/dist/internal/components/UnderlineTabbedInterface-4197ee28.css.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
### Minor Changes
|
|
6
6
|
|
|
7
|
+
- [#8048](https://github.com/primer/react/pull/8048) [`0add561`](https://github.com/primer/react/commit/0add5615720d17d69c77b014786c5e17e4337bb0) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - ActionBar: Add `ActionBar.Button` for rendering text buttons that overflow into the menu, alongside the existing `ActionBar.IconButton`
|
|
8
|
+
|
|
7
9
|
- [#8031](https://github.com/primer/react/pull/8031) [`cb79351`](https://github.com/primer/react/commit/cb79351f29b9a1aea7bacf890eca97a5c9d97590) Thanks [@janmaarten-a11y](https://github.com/janmaarten-a11y)! - Add a `NavList.Heading` slot that names the navigation region. It renders an `h2`
|
|
8
10
|
by default (configurable to `h3` via `as`), supports a `visuallyHidden` variant,
|
|
9
11
|
labels the `nav` landmark via `aria-labelledby`, and makes `NavList.Group`
|
|
@@ -24,6 +26,10 @@
|
|
|
24
26
|
SkeletonText
|
|
25
27
|
Spinner
|
|
26
28
|
|
|
29
|
+
- [#8026](https://github.com/primer/react/pull/8026) [`73a45df`](https://github.com/primer/react/commit/73a45dfe11c3a297e4f2f8317caa4a535a70ce80) Thanks [@TylerJDev](https://github.com/TylerJDev)! - SelectPanel: Add `cssAnchorPositioningSettings` prop to customize CSS anchor positioning behavior
|
|
30
|
+
|
|
31
|
+
- [#7506](https://github.com/primer/react/pull/7506) [`e58907c`](https://github.com/primer/react/commit/e58907c5559f5ef8133a1d98a05e2e4a6c1ca6cb) Thanks [@iansan5653](https://github.com/iansan5653)! - Refactors `UnderlineNav` overflow handling to use CSS-based overflow detection instead of JavaScript width measurements, eliminating layout shift (CLS) issues and improving performance. The overflow menu is now implemented with `ActionMenu`, and item registration uses a descendant registry instead of the `React.Children` API. Consumer-facing changes: items can now be wrapped in fragments or wrapper components; the current item may appear in the overflow menu when the viewport is narrow; and the overflow menu button is right-aligned.
|
|
32
|
+
|
|
27
33
|
### Patch Changes
|
|
28
34
|
|
|
29
35
|
- [#8021](https://github.com/primer/react/pull/8021) [`6131a94`](https://github.com/primer/react/commit/6131a9424b5bd5bb98b7ae05771d8187fe2f58cd) Thanks [@mattcosta7](https://github.com/mattcosta7)! - Announce, AriaStatus, AriaAlert: Avoid an extra React render on every content change (e.g. per keystroke when tied to an input)
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type ActionListItemProps } from '../ActionList';
|
|
3
|
-
import type { IconButtonProps } from '../Button';
|
|
3
|
+
import type { ButtonProps, IconButtonProps } from '../Button';
|
|
4
4
|
type Size = 'small' | 'medium' | 'large';
|
|
5
5
|
type A11yProps = {
|
|
6
6
|
/** When provided, a label is added to the action bar */
|
|
@@ -38,6 +38,9 @@ export type ActionBarProps = {
|
|
|
38
38
|
export type ActionBarIconButtonProps = {
|
|
39
39
|
disabled?: boolean;
|
|
40
40
|
} & IconButtonProps;
|
|
41
|
+
export type ActionBarButtonProps = {
|
|
42
|
+
disabled?: boolean;
|
|
43
|
+
} & ButtonProps;
|
|
41
44
|
export type ActionBarMenuItemProps = ({
|
|
42
45
|
/**
|
|
43
46
|
* Type of menu item to be rendered in the menu (action | group).
|
|
@@ -91,6 +94,26 @@ export type ActionBarMenuProps = {
|
|
|
91
94
|
} & IconButtonProps;
|
|
92
95
|
export declare const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>>;
|
|
93
96
|
export declare const ActionBarIconButton: React.ForwardRefExoticComponent<ActionBarIconButtonProps & React.RefAttributes<unknown>>;
|
|
97
|
+
export declare const ActionBarButton: React.ForwardRefExoticComponent<{
|
|
98
|
+
disabled?: boolean;
|
|
99
|
+
} & {
|
|
100
|
+
alignContent?: import("../Button/types").AlignContent;
|
|
101
|
+
icon?: React.FunctionComponent<import("@primer/octicons-react").IconProps> | React.ElementType | React.ReactElement<any> | null;
|
|
102
|
+
leadingVisual?: React.ElementType | React.ReactElement<any> | null;
|
|
103
|
+
trailingVisual?: React.ElementType | React.ReactElement<any> | null;
|
|
104
|
+
trailingAction?: React.ElementType | null;
|
|
105
|
+
children?: React.ReactNode;
|
|
106
|
+
count?: number | string;
|
|
107
|
+
} & {
|
|
108
|
+
variant?: import("../Button/types").VariantType;
|
|
109
|
+
size?: import("../Button/types").Size;
|
|
110
|
+
disabled?: boolean;
|
|
111
|
+
block?: boolean;
|
|
112
|
+
loading?: boolean;
|
|
113
|
+
loadingAnnouncement?: string;
|
|
114
|
+
inactive?: boolean;
|
|
115
|
+
labelWrap?: boolean;
|
|
116
|
+
} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<unknown>>;
|
|
94
117
|
export declare const ActionBarGroup: React.ForwardRefExoticComponent<{
|
|
95
118
|
children?: React.ReactNode | undefined;
|
|
96
119
|
} & React.RefAttributes<unknown>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../src/ActionBar/ActionBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiF,MAAM,OAAO,CAAA;AAErG,OAAO,EAAa,KAAK,mBAAmB,EAAC,MAAM,eAAe,CAAA;AAElE,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,WAAW,CAAA;
|
|
1
|
+
{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../src/ActionBar/ActionBar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,6 +3,7 @@ import React, { forwardRef, useRef, useState, useMemo, useCallback, useContext,
|
|
|
3
3
|
import { KebabHorizontalIcon } from '@primer/octicons-react';
|
|
4
4
|
import { ActionList } from '../ActionList/index.js';
|
|
5
5
|
import { IconButton } from '../Button/IconButton.js';
|
|
6
|
+
import { ButtonComponent } from '../Button/Button.js';
|
|
6
7
|
import { useFocusZone } from '../hooks/useFocusZone.js';
|
|
7
8
|
import styles from './ActionBar.module.css.js';
|
|
8
9
|
import { clsx } from 'clsx';
|
|
@@ -359,6 +360,97 @@ const ActionBarIconButton = /*#__PURE__*/forwardRef(({
|
|
|
359
360
|
"data-overflowing": dataOverflowingAttr
|
|
360
361
|
});
|
|
361
362
|
});
|
|
363
|
+
const ActionBarButton = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
|
|
364
|
+
const $ = c(19);
|
|
365
|
+
let disabled;
|
|
366
|
+
let onClick;
|
|
367
|
+
let props;
|
|
368
|
+
if ($[0] !== t0) {
|
|
369
|
+
({
|
|
370
|
+
disabled,
|
|
371
|
+
onClick,
|
|
372
|
+
...props
|
|
373
|
+
} = t0);
|
|
374
|
+
$[0] = t0;
|
|
375
|
+
$[1] = disabled;
|
|
376
|
+
$[2] = onClick;
|
|
377
|
+
$[3] = props;
|
|
378
|
+
} else {
|
|
379
|
+
disabled = $[1];
|
|
380
|
+
onClick = $[2];
|
|
381
|
+
props = $[3];
|
|
382
|
+
}
|
|
383
|
+
const ref = useRef(null);
|
|
384
|
+
const mergedRef = useMergedRefs(forwardedRef, ref);
|
|
385
|
+
const {
|
|
386
|
+
size
|
|
387
|
+
} = React.useContext(ActionBarContext);
|
|
388
|
+
const {
|
|
389
|
+
children,
|
|
390
|
+
leadingVisual
|
|
391
|
+
} = props;
|
|
392
|
+
const t1 = typeof leadingVisual === "function" ? leadingVisual : undefined;
|
|
393
|
+
const t2 = !!disabled;
|
|
394
|
+
const t3 = onClick;
|
|
395
|
+
let t4;
|
|
396
|
+
if ($[4] !== children || $[5] !== t1 || $[6] !== t2 || $[7] !== t3) {
|
|
397
|
+
t4 = {
|
|
398
|
+
type: "action",
|
|
399
|
+
label: children,
|
|
400
|
+
icon: t1,
|
|
401
|
+
disabled: t2,
|
|
402
|
+
onClick: t3
|
|
403
|
+
};
|
|
404
|
+
$[4] = children;
|
|
405
|
+
$[5] = t1;
|
|
406
|
+
$[6] = t2;
|
|
407
|
+
$[7] = t3;
|
|
408
|
+
$[8] = t4;
|
|
409
|
+
} else {
|
|
410
|
+
t4 = $[8];
|
|
411
|
+
}
|
|
412
|
+
const {
|
|
413
|
+
dataOverflowingAttr
|
|
414
|
+
} = useActionBarItem(ref, t4);
|
|
415
|
+
let t5;
|
|
416
|
+
if ($[9] !== disabled || $[10] !== onClick) {
|
|
417
|
+
t5 = event => {
|
|
418
|
+
var _onClick;
|
|
419
|
+
if (disabled) {
|
|
420
|
+
return;
|
|
421
|
+
}
|
|
422
|
+
(_onClick = onClick) === null || _onClick === void 0 ? void 0 : _onClick(event);
|
|
423
|
+
};
|
|
424
|
+
$[9] = disabled;
|
|
425
|
+
$[10] = onClick;
|
|
426
|
+
$[11] = t5;
|
|
427
|
+
} else {
|
|
428
|
+
t5 = $[11];
|
|
429
|
+
}
|
|
430
|
+
const clickHandler = t5;
|
|
431
|
+
let t6;
|
|
432
|
+
if ($[12] !== clickHandler || $[13] !== dataOverflowingAttr || $[14] !== disabled || $[15] !== mergedRef || $[16] !== props || $[17] !== size) {
|
|
433
|
+
t6 = /*#__PURE__*/jsx(ButtonComponent, {
|
|
434
|
+
"aria-disabled": disabled,
|
|
435
|
+
ref: mergedRef,
|
|
436
|
+
size: size,
|
|
437
|
+
onClick: clickHandler,
|
|
438
|
+
...props,
|
|
439
|
+
variant: "invisible",
|
|
440
|
+
"data-overflowing": dataOverflowingAttr
|
|
441
|
+
});
|
|
442
|
+
$[12] = clickHandler;
|
|
443
|
+
$[13] = dataOverflowingAttr;
|
|
444
|
+
$[14] = disabled;
|
|
445
|
+
$[15] = mergedRef;
|
|
446
|
+
$[16] = props;
|
|
447
|
+
$[17] = size;
|
|
448
|
+
$[18] = t6;
|
|
449
|
+
} else {
|
|
450
|
+
t6 = $[18];
|
|
451
|
+
}
|
|
452
|
+
return t6;
|
|
453
|
+
});
|
|
362
454
|
const ActionBarGroupContext = /*#__PURE__*/React.createContext(null);
|
|
363
455
|
const ActionBarGroup = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
|
|
364
456
|
const $ = c(10);
|
|
@@ -611,10 +703,10 @@ function _temp4(t0) {
|
|
|
611
703
|
typeof onClick === "function" && onClick(event);
|
|
612
704
|
},
|
|
613
705
|
disabled: disabled,
|
|
614
|
-
children: [/*#__PURE__*/jsx(ActionList.LeadingVisual, {
|
|
706
|
+
children: [Icon ? /*#__PURE__*/jsx(ActionList.LeadingVisual, {
|
|
615
707
|
children: /*#__PURE__*/jsx(Icon, {})
|
|
616
|
-
}), label]
|
|
617
|
-
},
|
|
708
|
+
}) : null, label]
|
|
709
|
+
}, id);
|
|
618
710
|
}
|
|
619
711
|
if (menuItem.type === "menu") {
|
|
620
712
|
const menuItems = menuItem.items;
|
|
@@ -645,4 +737,4 @@ function _temp7(item, index) {
|
|
|
645
737
|
return renderMenuItem(item, index);
|
|
646
738
|
}
|
|
647
739
|
|
|
648
|
-
export { ActionBar, ActionBarGroup, ActionBarIconButton, ActionBarMenu, VerticalDivider };
|
|
740
|
+
export { ActionBar, ActionBarButton, ActionBarGroup, ActionBarIconButton, ActionBarMenu, VerticalDivider };
|
|
@@ -1,6 +1,26 @@
|
|
|
1
|
-
export type { ActionBarProps, ActionBarMenuProps, ActionBarMenuItemProps } from './ActionBar';
|
|
1
|
+
export type { ActionBarProps, ActionBarButtonProps, ActionBarMenuProps, ActionBarMenuItemProps } from './ActionBar';
|
|
2
2
|
declare const ActionBar: import("react").FC<import("react").PropsWithChildren<import("./ActionBar").ActionBarProps>> & {
|
|
3
3
|
IconButton: import("react").ForwardRefExoticComponent<import("./ActionBar").ActionBarIconButtonProps & import("react").RefAttributes<unknown>>;
|
|
4
|
+
Button: import("react").ForwardRefExoticComponent<{
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
} & {
|
|
7
|
+
alignContent?: import("../Button/types").AlignContent;
|
|
8
|
+
icon?: React.FunctionComponent<import("@primer/octicons-react").IconProps> | React.ElementType | React.ReactElement<any> | null;
|
|
9
|
+
leadingVisual?: React.ElementType | React.ReactElement<any> | null;
|
|
10
|
+
trailingVisual?: React.ElementType | React.ReactElement<any> | null;
|
|
11
|
+
trailingAction?: React.ElementType | null;
|
|
12
|
+
children?: React.ReactNode;
|
|
13
|
+
count?: number | string;
|
|
14
|
+
} & {
|
|
15
|
+
variant?: import("../Button/types").VariantType;
|
|
16
|
+
size?: import("../Button/types").Size;
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
block?: boolean;
|
|
19
|
+
loading?: boolean;
|
|
20
|
+
loadingAnnouncement?: string;
|
|
21
|
+
inactive?: boolean;
|
|
22
|
+
labelWrap?: boolean;
|
|
23
|
+
} & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<unknown>>;
|
|
4
24
|
Divider: () => import("react").JSX.Element;
|
|
5
25
|
Group: import("react").ForwardRefExoticComponent<{
|
|
6
26
|
children?: import("react").ReactNode | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ActionBar/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ActionBar/index.ts"],"names":[],"mappings":"AAQA,YAAY,EAAC,cAAc,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,sBAAsB,EAAC,MAAM,aAAa,CAAA;AAEjH,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMb,CAAA;AAEF,eAAe,SAAS,CAAA;AACxB,OAAO,EAAC,SAAS,EAAC,CAAA"}
|
package/dist/ActionBar/index.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { ActionBar as ActionBar$1, ActionBarMenu, ActionBarGroup, VerticalDivider, ActionBarIconButton } from './ActionBar.js';
|
|
1
|
+
import { ActionBar as ActionBar$1, ActionBarMenu, ActionBarGroup, VerticalDivider, ActionBarButton, ActionBarIconButton } from './ActionBar.js';
|
|
2
2
|
|
|
3
3
|
const ActionBar = Object.assign(ActionBar$1, {
|
|
4
4
|
IconButton: ActionBarIconButton,
|
|
5
|
+
Button: ActionBarButton,
|
|
5
6
|
Divider: VerticalDivider,
|
|
6
7
|
Group: ActionBarGroup,
|
|
7
8
|
Menu: ActionBarMenu
|
|
@@ -63,8 +63,8 @@ type SelectPanelVariantProps = {
|
|
|
63
63
|
variant: 'modal';
|
|
64
64
|
onCancel: () => void;
|
|
65
65
|
};
|
|
66
|
-
export type SelectPanelProps = SelectPanelBaseProps & Omit<FilteredActionListProps, 'selectionVariant' | 'variant' | 'message'> & Pick<AnchoredOverlayProps, 'open' | 'height' | 'width' | 'align' | 'displayInViewport'> & AnchoredOverlayWrapperAnchorProps & (SelectPanelSingleSelection | SelectPanelMultiSelection) & SelectPanelVariantProps;
|
|
67
|
-
declare function Panel({ open, onOpenChange, renderAnchor, anchorRef: externalAnchorRef, placeholder, placeholderText, inputLabel, selected, title, subtitle, onSelectedChange, filterValue: externalFilterValue, onFilterChange: externalOnFilterChange, items, footer, textInputProps, overlayProps, loading, initialLoadingType, className, height, width, id, message, notice, onCancel, variant, secondaryAction, showSelectedOptionsFirst, disableFullscreenOnNarrow, align, showSelectAll, focusPrependedElements, virtualized, displayInViewport, ...listProps }: SelectPanelProps): JSX.Element;
|
|
66
|
+
export type SelectPanelProps = SelectPanelBaseProps & Omit<FilteredActionListProps, 'selectionVariant' | 'variant' | 'message'> & Pick<AnchoredOverlayProps, 'open' | 'height' | 'width' | 'align' | 'displayInViewport' | 'cssAnchorPositioningSettings'> & AnchoredOverlayWrapperAnchorProps & (SelectPanelSingleSelection | SelectPanelMultiSelection) & SelectPanelVariantProps;
|
|
67
|
+
declare function Panel({ open, onOpenChange, renderAnchor, anchorRef: externalAnchorRef, placeholder, placeholderText, inputLabel, selected, title, subtitle, onSelectedChange, filterValue: externalFilterValue, onFilterChange: externalOnFilterChange, items, footer, textInputProps, overlayProps, loading, initialLoadingType, className, height, width, id, message, notice, onCancel, variant, secondaryAction, showSelectedOptionsFirst, disableFullscreenOnNarrow, align, showSelectAll, focusPrependedElements, virtualized, displayInViewport, cssAnchorPositioningSettings, ...listProps }: SelectPanelProps): JSX.Element;
|
|
68
68
|
declare const SecondaryButton: React.FC<ButtonProps>;
|
|
69
69
|
declare const SecondaryLink: React.FC<LinkButtonProps & ButtonProps>;
|
|
70
70
|
export declare const SelectPanel: typeof Panel & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectPanel.d.ts","sourceRoot":"","sources":["../../src/SelectPanel/SelectPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsC,KAAK,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAC1F,OAAO,KAAK,EAAE,EAAoD,KAAK,GAAG,EAAC,MAAM,OAAO,CAAA;AACxF,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,oBAAoB,CAAA;AAE5D,OAAO,KAAK,EAAC,iCAAiC,EAAC,MAAM,oCAAoC,CAAA;AACzF,OAAO,KAAK,EAAC,uBAAuB,EAAC,MAAM,uBAAuB,CAAA;AAGlE,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,YAAY,CAAA;AAE5C,OAAO,KAAK,EAAY,SAAS,EAAC,MAAM,IAAI,CAAA;AAiB5C,OAAO,KAAK,EAAC,WAAW,EAAE,eAAe,EAAC,MAAM,iBAAiB,CAAA;AAkCjE,UAAU,0BAA0B;IAClC,QAAQ,EAAE,SAAS,GAAG,SAAS,CAAA;IAC/B,gBAAgB,EAAE,CAAC,QAAQ,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAA;CAC5D;AAED,UAAU,yBAAyB;IACjC,QAAQ,EAAE,SAAS,EAAE,CAAA;IACrB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,IAAI,CAAA;CAClD;AAED,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,UAAU,CAAA;AACvD,MAAM,MAAM,0BAA0B,GAClC,KAAK,CAAC,YAAY,CAAC,OAAO,eAAe,CAAC,GAC1C,KAAK,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,CAAA;AAE5C,UAAU,oBAAoB;IAG5B,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IAExC,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IAC3C,YAAY,EAAE,CACZ,IAAI,EAAE,OAAO,EACb,OAAO,EAAE,cAAc,GAAG,kBAAkB,GAAG,eAAe,GAAG,QAAQ,GAAG,WAAW,GAAG,QAAQ,KAC/F,IAAI,CAAA;IACT,eAAe,CAAC,EAAE,0BAA0B,CAAA;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAA;IACpC,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE;QAEP,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;QACtC,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAA;KACtC,CAAA;IACD,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,MAAM,CAAA;QAEb,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;QACtC,OAAO,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,CAAA;QACtC,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAA;QAErC,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;KACjC,CAAA;IACD;;OAEG;IAEH,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IACzC,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAClC;;;;;OAKG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAA;IACnC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAA;CACjC;AAGD,KAAK,uBAAuB,GAAG;IAAC,OAAO,CAAC,EAAE,UAAU,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CAAC,GAAG;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;CAAC,CAAA;AAEvH,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,IAAI,CAAC,uBAAuB,EAAE,kBAAkB,GAAG,SAAS,GAAG,SAAS,CAAC,GACzE,IAAI,
|
|
1
|
+
{"version":3,"file":"SelectPanel.d.ts","sourceRoot":"","sources":["../../src/SelectPanel/SelectPanel.tsx"],"names":[],"mappings":"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"}
|
|
@@ -115,6 +115,7 @@ function Panel({
|
|
|
115
115
|
focusPrependedElements,
|
|
116
116
|
virtualized,
|
|
117
117
|
displayInViewport,
|
|
118
|
+
cssAnchorPositioningSettings,
|
|
118
119
|
...listProps
|
|
119
120
|
}) {
|
|
120
121
|
var _listProps$groupMetad;
|
|
@@ -708,9 +709,11 @@ function Panel({
|
|
|
708
709
|
closeButtonProps: closeButtonProps,
|
|
709
710
|
displayInViewport: displayInViewport
|
|
710
711
|
// Modal variant is positioned manually so native CSS anchor positioning must not be used
|
|
712
|
+
// Other cssAnchorPositioningSettings (e.g. fallbackStrategy) may be passed in and are forwarded here
|
|
711
713
|
,
|
|
712
714
|
cssAnchorPositioningSettings: {
|
|
713
|
-
|
|
715
|
+
...cssAnchorPositioningSettings,
|
|
716
|
+
disable: variant === 'modal' || (cssAnchorPositioningSettings === null || cssAnchorPositioningSettings === void 0 ? void 0 : cssAnchorPositioningSettings.disable)
|
|
714
717
|
},
|
|
715
718
|
children: /*#__PURE__*/jsxs("div", {
|
|
716
719
|
className: classes.Wrapper,
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.prc-UnderlineNav-UnderlineWrapper-GWONT{animation:prc-UnderlineNav-detect-overflow-6HuSH linear;animation-timeline:scroll(self block);--UnderlineNav_moreButton-visibility:hidden;--UnderlineNav_icons-display:inline}.prc-UnderlineNav-UnderlineWrapper-GWONT[data-hide-icons=true]{--UnderlineNav_icons-display:none}.prc-UnderlineNav-UnderlineWrapper-GWONT[data-has-overflow=true]{--UnderlineNav_moreButton-visibility:visible}@keyframes prc-UnderlineNav-detect-overflow-6HuSH{0%,to{--UnderlineNav_moreButton-visibility:visible;--UnderlineNav_icons-display:none}}.prc-UnderlineNav-ItemsList-oj8gN [data-component=icon]{display:var(--UnderlineNav_icons-display)}.prc-UnderlineNav-MoreButtonContainer-Dnrq6{align-items:center;display:flex;visibility:var(--UnderlineNav_moreButton-visibility)}.prc-UnderlineNav-OverflowMenuItem-7SG7M [aria-current]{position:relative}.prc-UnderlineNav-OverflowMenuItem-7SG7M [aria-current] .prc-UnderlineNav-OverflowMenuItemLabel-F80v6{font-weight:var(--base-text-weight-semibold,600)}.prc-UnderlineNav-OverflowMenuItem-7SG7M [aria-current]:after{background:var(--underlineNav-borderColor-active,#fd8c73);content:"";inset:var(--base-size-2,.125rem) auto var(--base-size-2,.125rem) 0;position:absolute;width:var(--base-size-2,.125rem)}.prc-UnderlineNav-MoreButtonDivider-dN0a-{border-left:var(--borderWidth-thin,.0625rem) solid var(--borderColor-muted,#d1d9e0b3);display:inline-block;height:var(--base-size-24,1.5rem);margin-inline:var(--base-size-4,.25rem);width:0}.prc-UnderlineNav-MoreButton-Y8soj{font-weight:var(--base-text-weight-normal,400);margin:0;position:relative}.prc-UnderlineNav-MoreButton-Y8soj>[data-component=trailingVisual]{margin-left:0}.prc-UnderlineNav-MoreButton-Y8soj[data-current=true]{font-weight:var(--base-text-weight-semibold,600)}.prc-UnderlineNav-MoreButton-Y8soj[data-current=true]:after{background-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active,#fd8c73));content:"";height:2px;inset:auto 0 0;margin-bottom:calc((var(--base-size-8,.5rem) + var(--borderWidth-thin,.0625rem))*-1);pointer-events:none;position:absolute}@media (forced-colors:active){.prc-UnderlineNav-MoreButton-Y8soj[data-current=true]:after{background-color:LinkText}}
|
|
2
|
+
/*# sourceMappingURL=UnderlineNav-47547980.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/UnderlineNav/UnderlineNav.module.css.js"],"names":[],"mappings":"AAAA,yCAIE,uDAAiC,CACjC,qCAAsC,CAEtC,2CAA4C,CAC5C,mCASF,CAPE,+DACE,iCACF,CAEA,iEACE,4CACF,CAGF,kDACE,MAEE,4CAA6C,CAC7C,iCACF,CACF,CAEA,wDACE,yCACF,CAEA,4CAGE,kBAAmB,CAFnB,YAAa,CACb,oDAEF,CAEA,wDACE,iBAcF,CAZE,sGACE,gDACF,CAEA,8DAME,yDAAkD,CALlD,UAAW,CAGX,kEAAmD,CADnD,iBAAkB,CADlB,gCAKF,CAGF,0CAEE,qFAAmE,CADnE,oBAAqB,CAIrB,iCAA2B,CAD3B,uCAAiC,CADjC,OAGF,CAEA,mCAEE,8CAA2C,CAD3C,QAAS,CAET,iBA6BF,CA3BE,mEACE,aACF,CAIA,sDACE,gDAmBF,CAjBE,4DAUE,iGAAoG,CAFpG,UAAW,CAFX,UAAW,CAJX,cAAe,CAGf,oFAAwE,CAExE,mBAAoB,CANpB,iBAeF,CAJE,8BAZF,4DAcI,yBAEJ,CADE","file":"UnderlineNav-47547980.css","sourcesContent":[".UnderlineWrapper {\n /* Progressive enhancement: Detect overflow using scroll-based animations.\n The idiomatic way would be a scroll-state container query but browser support\n is slightly better for animations. */\n animation: detect-overflow linear;\n animation-timeline: scroll(self block);\n\n --UnderlineNav_moreButton-visibility: hidden;\n --UnderlineNav_icons-display: inline;\n\n &[data-hide-icons='true'] {\n --UnderlineNav_icons-display: none;\n }\n\n &[data-has-overflow='true'] {\n --UnderlineNav_moreButton-visibility: visible;\n }\n}\n\n@keyframes detect-overflow {\n 0%,\n 100% {\n --UnderlineNav_moreButton-visibility: visible;\n --UnderlineNav_icons-display: none;\n }\n}\n\n.ItemsList [data-component='icon'] {\n display: var(--UnderlineNav_icons-display);\n}\n\n.MoreButtonContainer {\n display: flex;\n visibility: var(--UnderlineNav_moreButton-visibility);\n align-items: center;\n}\n\n.OverflowMenuItem [aria-current] {\n position: relative;\n\n .OverflowMenuItemLabel {\n font-weight: var(--base-text-weight-semibold);\n }\n\n &::after {\n content: '';\n width: var(--base-size-2);\n position: absolute;\n inset: var(--base-size-2) auto var(--base-size-2) 0;\n /* stylelint-disable-next-line primer/colors */\n background: var(--underlineNav-borderColor-active);\n }\n}\n\n.MoreButtonDivider {\n display: inline-block;\n border-left: var(--borderWidth-thin) solid var(--borderColor-muted);\n width: 0;\n margin-inline: var(--base-size-4);\n height: var(--base-size-24);\n}\n\n.MoreButton {\n margin: 0; /* reset Safari extra margin */\n font-weight: var(--base-text-weight-normal);\n position: relative;\n\n & > [data-component='trailingVisual'] {\n margin-left: 0;\n }\n\n /* When the current item has overflowed into the menu, style the overflow\n anchor so it looks like the current item (semibold text + active underline). */\n &[data-current='true'] {\n font-weight: var(--base-text-weight-semibold);\n\n &::after {\n position: absolute;\n inset: auto 0 0;\n /* Pull down same amount as the item-level decoration, plus the border width of the button */\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: calc(-1 * (var(--base-size-8) + var(--borderWidth-thin)));\n height: 2px;\n pointer-events: none;\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--underlineNav-borderColor-active, var(--color-primer-border-active, #fd8c73));\n\n @media (forced-colors: active) {\n /* Support for Windows Forced Color Mode https://learn.microsoft.com/en-us/fluent-ui/web-components/design-system/high-contrast */\n background-color: LinkText;\n }\n }\n }\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import type React from 'react';
|
|
2
2
|
export type UnderlineNavProps = {
|
|
3
3
|
children: React.ReactNode;
|
|
4
4
|
'aria-label'?: React.AriaAttributes['aria-label'];
|
|
@@ -15,6 +15,5 @@ export type UnderlineNavProps = {
|
|
|
15
15
|
*/
|
|
16
16
|
variant?: 'inset' | 'flush';
|
|
17
17
|
};
|
|
18
|
-
export declare const MORE_BTN_WIDTH = 86;
|
|
19
18
|
export declare const UnderlineNav: React.ForwardRefExoticComponent<UnderlineNavProps & React.RefAttributes<unknown>>;
|
|
20
19
|
//# sourceMappingURL=UnderlineNav.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UnderlineNav.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/UnderlineNav.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"UnderlineNav.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/UnderlineNav.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAgB9B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,YAAY,mFAsIxB,CAAA"}
|