@primer/react 38.2.0-rc.03caca034 → 38.2.0-rc.05fdc4518
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.
Potentially problematic release.
This version of @primer/react might be problematic. Click here for more details.
- package/CHANGELOG.md +20 -0
- package/dist/Button/types.d.ts +0 -1
- package/dist/Button/types.d.ts.map +1 -1
- package/dist/CounterLabel/CounterLabel-8c6e8ee4.css +2 -0
- package/dist/CounterLabel/{CounterLabel-44fb5d16.css.map → CounterLabel-8c6e8ee4.css.map} +1 -1
- package/dist/CounterLabel/CounterLabel.d.ts +4 -0
- package/dist/CounterLabel/CounterLabel.d.ts.map +1 -1
- package/dist/CounterLabel/CounterLabel.js +51 -47
- package/dist/CounterLabel/CounterLabel.module.css.js +1 -1
- package/dist/FeatureFlags/DefaultFeatureFlags.d.ts.map +1 -1
- package/dist/FeatureFlags/DefaultFeatureFlags.js +1 -2
- package/dist/FilteredActionList/FilteredActionList.d.ts +21 -1
- package/dist/FilteredActionList/FilteredActionList.d.ts.map +1 -1
- package/dist/FilteredActionList/FilteredActionList.js +13 -17
- package/dist/FilteredActionList/useAnnouncements.d.ts +1 -1
- package/dist/FilteredActionList/useAnnouncements.d.ts.map +1 -1
- package/dist/FilteredActionList/useAnnouncements.js +12 -17
- package/dist/NavList/NavList.d.ts +1 -0
- package/dist/NavList/NavList.d.ts.map +1 -1
- package/dist/NavList/NavList.js +1 -0
- package/dist/Popover/Popover-a93df39c.css +2 -0
- package/dist/Popover/Popover-a93df39c.css.map +1 -0
- package/dist/Popover/Popover.module.css.js +1 -1
- package/dist/SelectPanel/SelectPanel.d.ts.map +1 -1
- package/dist/SelectPanel/SelectPanel.js +5 -4
- package/dist/Spinner/Spinner.d.ts +3 -1
- package/dist/Spinner/Spinner.d.ts.map +1 -1
- package/dist/Spinner/Spinner.js +79 -49
- package/dist/TextInput/TextInput.d.ts.map +1 -1
- package/dist/TextInput/TextInput.js +13 -7
- package/dist/Token/{Token-942271b0.css → Token-b3c86dc0.css} +2 -2
- package/dist/Token/Token-b3c86dc0.css.map +1 -0
- package/dist/Token/Token.d.ts +1 -0
- package/dist/Token/Token.d.ts.map +1 -1
- package/dist/Token/Token.js +1 -1
- package/dist/Token/Token.module.css.js +1 -1
- package/dist/Token/{TokenBase-57c65c47.css → TokenBase-a805f182.css} +2 -2
- package/dist/Token/TokenBase-a805f182.css.map +1 -0
- package/dist/Token/TokenBase.module.css.js +1 -1
- package/dist/Token/{_RemoveTokenButton-c205593b.css → _RemoveTokenButton-a0d2969b.css} +2 -2
- package/dist/Token/{_RemoveTokenButton-c205593b.css.map → _RemoveTokenButton-a0d2969b.css.map} +1 -1
- package/dist/Token/_RemoveTokenButton.js +2 -2
- package/dist/Token/_RemoveTokenButton.module.css.js +1 -1
- package/generated/components.json +72 -31
- package/package.json +2 -1
- package/dist/CounterLabel/CounterLabel-44fb5d16.css +0 -2
- package/dist/Popover/Popover-3ba3b962.css +0 -2
- package/dist/Popover/Popover-3ba3b962.css.map +0 -1
- package/dist/Token/Token-942271b0.css.map +0 -1
- package/dist/Token/TokenBase-57c65c47.css.map +0 -1
- package/dist/legacy-theme/ts/colors/dark.d.ts +0 -517
- package/dist/legacy-theme/ts/colors/dark.d.ts.map +0 -1
- package/dist/legacy-theme/ts/colors/dark_colorblind.d.ts +0 -517
- package/dist/legacy-theme/ts/colors/dark_colorblind.d.ts.map +0 -1
- package/dist/legacy-theme/ts/colors/dark_dimmed.d.ts +0 -517
- package/dist/legacy-theme/ts/colors/dark_dimmed.d.ts.map +0 -1
- package/dist/legacy-theme/ts/colors/dark_high_contrast.d.ts +0 -517
- package/dist/legacy-theme/ts/colors/dark_high_contrast.d.ts.map +0 -1
- package/dist/legacy-theme/ts/colors/dark_tritanopia.d.ts +0 -517
- package/dist/legacy-theme/ts/colors/dark_tritanopia.d.ts.map +0 -1
- package/dist/legacy-theme/ts/colors/index.d.ts +0 -4638
- package/dist/legacy-theme/ts/colors/index.d.ts.map +0 -1
- package/dist/legacy-theme/ts/colors/light.d.ts +0 -517
- package/dist/legacy-theme/ts/colors/light.d.ts.map +0 -1
- package/dist/legacy-theme/ts/colors/light_colorblind.d.ts +0 -517
- package/dist/legacy-theme/ts/colors/light_colorblind.d.ts.map +0 -1
- package/dist/legacy-theme/ts/colors/light_high_contrast.d.ts +0 -517
- package/dist/legacy-theme/ts/colors/light_high_contrast.d.ts.map +0 -1
- package/dist/legacy-theme/ts/colors/light_tritanopia.d.ts +0 -517
- package/dist/legacy-theme/ts/colors/light_tritanopia.d.ts.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -4,8 +4,18 @@
|
|
|
4
4
|
|
|
5
5
|
### Minor Changes
|
|
6
6
|
|
|
7
|
+
- [#7185](https://github.com/primer/react/pull/7185) [`a05b1f9`](https://github.com/primer/react/commit/a05b1f98fa69153f430a2dbde9272c90a78a8423) Thanks [@lukasoppermann](https://github.com/lukasoppermann)! - CounterLabel: Add variant prop and deprecate scheme prop
|
|
8
|
+
|
|
9
|
+
- [#7165](https://github.com/primer/react/pull/7165) [`f2ba02a`](https://github.com/primer/react/commit/f2ba02a370154dc581c1567f93a4d14075ee5419) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Fixes multiple styling issues in the Token component.
|
|
10
|
+
|
|
11
|
+
- [#7194](https://github.com/primer/react/pull/7194) [`32cdcfc`](https://github.com/primer/react/commit/32cdcfc46ead068197495714364f03261dc438fa) Thanks [@francinelucca](https://github.com/francinelucca)! - feat(NavList): add support for inline and block description
|
|
12
|
+
|
|
7
13
|
- [#7143](https://github.com/primer/react/pull/7143) [`25a5f99`](https://github.com/primer/react/commit/25a5f99a8a624b066baa8e5b9961f96730f78be8) Thanks [@langermank](https://github.com/langermank)! - Adjust styling for button's that have nested keybinding hints
|
|
8
14
|
|
|
15
|
+
- [#7196](https://github.com/primer/react/pull/7196) [`70f5ffe`](https://github.com/primer/react/commit/70f5ffe1c017d034da3f5d00ecf333b9bb6ed95c) Thanks [@TylerJDev](https://github.com/TylerJDev)! - FilteredActionList: Remove `usingRemoveActiveDescendant` feature flag, add private prop
|
|
16
|
+
|
|
17
|
+
- [#7059](https://github.com/primer/react/pull/7059) [`fd3d09e`](https://github.com/primer/react/commit/fd3d09e3ef1a3774fb8c34ed562dcb52cfd3e0ba) Thanks [@jonrohan](https://github.com/jonrohan)! - feat(Spinner): Adds a delay prop to the Spinner component that delays rendering by 1000ms.
|
|
18
|
+
|
|
9
19
|
- [#7149](https://github.com/primer/react/pull/7149) [`5e6e04e`](https://github.com/primer/react/commit/5e6e04e9fe0a6c6b3eef166dbc88d5d695ac02f3) Thanks [@lukasoppermann](https://github.com/lukasoppermann)! - StateLabel: Add size prop and deprecate variant prop to align with APIs in other components.
|
|
10
20
|
|
|
11
21
|
- [#7142](https://github.com/primer/react/pull/7142) [`4f3be9c`](https://github.com/primer/react/commit/4f3be9c657c1a300c50266d90a65bdde9fcb8dc8) Thanks [@TylerJDev](https://github.com/TylerJDev)! - IconButton: Hide tooltip when a popup is open.
|
|
@@ -14,6 +24,16 @@
|
|
|
14
24
|
|
|
15
25
|
- [#7102](https://github.com/primer/react/pull/7102) [`07c9e55`](https://github.com/primer/react/commit/07c9e5573c22c93aed1f1b5768bac755018fb0f5) Thanks [@mperrotti](https://github.com/mperrotti)! - Makes Button and LinkButton 'link' variant respect user underline preference
|
|
16
26
|
|
|
27
|
+
- [#7189](https://github.com/primer/react/pull/7189) [`424cbc5`](https://github.com/primer/react/commit/424cbc591ac3533c3d1d8467df4c1d2ee8c11f96) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Prevent focus reset on date/time input clicks in Safari.
|
|
28
|
+
|
|
29
|
+
- [#7180](https://github.com/primer/react/pull/7180) [`f051a39`](https://github.com/primer/react/commit/f051a39229f55d059d867b59bc468020eda09145) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Feature flags: Remove feature flag `primer_react_use_styled_react_theming`
|
|
30
|
+
|
|
31
|
+
- [#7198](https://github.com/primer/react/pull/7198) [`b1a8acc`](https://github.com/primer/react/commit/b1a8acc9471b569c12e0d1df4278f77e6b86e8b6) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Popover: add missing shadow
|
|
32
|
+
|
|
33
|
+
- [#7188](https://github.com/primer/react/pull/7188) [`9403294`](https://github.com/primer/react/commit/94032941033d328aadf1e7caa141eb8e24604485) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Remove unused `underline` prop from LinkButtonProps.
|
|
34
|
+
|
|
35
|
+
- [#7192](https://github.com/primer/react/pull/7192) [`b78167a`](https://github.com/primer/react/commit/b78167a6cf1489865657de795740279ab6d5a669) Thanks [@TylerJDev](https://github.com/TylerJDev)! - SelectPanel: Remove `usingRemoveActiveDescendant` usage from component
|
|
36
|
+
|
|
17
37
|
## 38.1.0
|
|
18
38
|
|
|
19
39
|
### Minor Changes
|
package/dist/Button/types.d.ts
CHANGED
|
@@ -78,7 +78,6 @@ export type IconButtonProps = ButtonA11yProps & {
|
|
|
78
78
|
keybindingHint?: string;
|
|
79
79
|
} & Omit<ButtonBaseProps, 'aria-label' | 'aria-labelledby'>;
|
|
80
80
|
export type LinkButtonProps = {
|
|
81
|
-
underline?: boolean;
|
|
82
81
|
download?: string;
|
|
83
82
|
href?: string;
|
|
84
83
|
hrefLang?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAA;AAClD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAErD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAA;AAEjF,MAAM,MAAM,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAE/C,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,CAAA;AAE7C,KAAK,eAAe,GAChB;IAAC,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAAC,GACrD;IAAC,YAAY,CAAC,EAAE,SAAS,CAAC;IAAC,iBAAiB,EAAE,MAAM,CAAA;CAAC,CAAA;AAEzD,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAA;IACX;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAK5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAA;AAEjD,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,CAAA;IAE3B;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IAEzF;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IAE7D;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IAE9D;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,IAAI,CAAA;IAEzC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE1B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,GAAG,eAAe,CAAA;AAEnB,MAAM,MAAM,eAAe,GAAG,eAAe,GAAG;IAC9C,IAAI,EAAE,KAAK,CAAC,WAAW,CAAA;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;IACnC,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,GAAG,IAAI,CAAC,eAAe,EAAE,YAAY,GAAG,iBAAiB,CAAC,CAAA;AAG3D,MAAM,MAAM,eAAe,GAAG;IAC5B,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAA;AAClD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAErD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAA;AAEjF,MAAM,MAAM,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAE/C,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,CAAA;AAE7C,KAAK,eAAe,GAChB;IAAC,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAAC,GACrD;IAAC,YAAY,CAAC,EAAE,SAAS,CAAC;IAAC,iBAAiB,EAAE,MAAM,CAAA;CAAC,CAAA;AAEzD,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAA;IACX;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAK5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAA;AAEjD,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,CAAA;IAE3B;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IAEzF;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IAE7D;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IAE9D;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,IAAI,CAAA;IAEzC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE1B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,GAAG,eAAe,CAAA;AAEnB,MAAM,MAAM,eAAe,GAAG,eAAe,GAAG;IAC9C,IAAI,EAAE,KAAK,CAAC,WAAW,CAAA;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;IACnC,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,GAAG,IAAI,CAAC,eAAe,EAAE,YAAY,GAAG,iBAAiB,CAAC,CAAA;AAG3D,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,gBAAgB,CAAC,CAAA;CACjF,CAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.prc-CounterLabel-CounterLabel-ZwXPe{border:var(--borderWidth-thin,.0625rem) solid var(--counter-borderColor,var(--color-counter-border));border-radius:20px;display:inline-block;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600);line-height:1;padding:var(--base-size-2,.125rem) var(--base-size-6,.375rem)}.prc-CounterLabel-CounterLabel-ZwXPe:where([data-variant=primary]){background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-CounterLabel-CounterLabel-ZwXPe:where([data-variant=secondary]){background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle));color:var(--fgColor-default,var(--color-fg-default))}.prc-CounterLabel-CounterLabel-ZwXPe:where(:empty){display:none}
|
|
2
|
+
/*# sourceMappingURL=CounterLabel-8c6e8ee4.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/CounterLabel/CounterLabel.module.css"],"names":[],"mappings":"AAAA,qCAOE,oGAAgE,CAEhE,kBAAmB,CARnB,oBAAqB,CAErB,4CAAsC,CACtC,gDAA6C,CAE7C,aAAc,CAJd,6DAsBF,CAbE,
|
|
1
|
+
{"version":3,"sources":["../src/CounterLabel/CounterLabel.module.css"],"names":[],"mappings":"AAAA,qCAOE,oGAAgE,CAEhE,kBAAmB,CARnB,oBAAqB,CAErB,4CAAsC,CACtC,gDAA6C,CAE7C,aAAc,CAJd,6DAsBF,CAbE,mEAEE,uEAAiD,CADjD,2DAEF,CAEA,qEAEE,yEAA8C,CAD9C,oDAEF,CAEA,mDACE,YACF","file":"CounterLabel-8c6e8ee4.css","sourcesContent":[".CounterLabel {\n display: inline-block;\n padding: var(--base-size-2) var(--base-size-6);\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-semibold);\n /* stylelint-disable-next-line primer/typography */\n line-height: 1;\n border: var(--borderWidth-thin) solid var(--counter-borderColor);\n /* stylelint-disable-next-line primer/borders */\n border-radius: 20px;\n\n &:where([data-variant='primary']) {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-neutral-emphasis);\n }\n\n &:where([data-variant='secondary']) {\n color: var(--fgColor-default);\n background-color: var(--bgColor-neutral-muted);\n }\n\n &:where(:empty) {\n display: none;\n }\n}\n"]}
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
import type { HTMLAttributes } from 'react';
|
|
2
2
|
import type React from 'react';
|
|
3
3
|
export type CounterLabelProps = React.PropsWithChildren<HTMLAttributes<HTMLSpanElement> & {
|
|
4
|
+
/** @deprecated use variant instead */
|
|
4
5
|
scheme?: 'primary' | 'secondary';
|
|
6
|
+
variant?: 'primary' | 'secondary';
|
|
5
7
|
className?: string;
|
|
6
8
|
}>;
|
|
7
9
|
declare const CounterLabel: React.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & {
|
|
10
|
+
/** @deprecated use variant instead */
|
|
8
11
|
scheme?: "primary" | "secondary";
|
|
12
|
+
variant?: "primary" | "secondary";
|
|
9
13
|
className?: string;
|
|
10
14
|
} & {
|
|
11
15
|
children?: React.ReactNode | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CounterLabel.d.ts","sourceRoot":"","sources":["../../src/CounterLabel/CounterLabel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,CACrD,cAAc,CAAC,eAAe,CAAC,GAAG;IAChC,MAAM,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CACF,CAAA;AAED,QAAA,MAAM,YAAY;
|
|
1
|
+
{"version":3,"file":"CounterLabel.d.ts","sourceRoot":"","sources":["../../src/CounterLabel/CounterLabel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,CACrD,cAAc,CAAC,eAAe,CAAC,GAAG;IAChC,sCAAsC;IACtC,MAAM,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IAChC,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CACF,CAAA;AAED,QAAA,MAAM,YAAY;IAPd,sCAAsC;aAC7B,SAAS,GAAG,WAAW;cACtB,SAAS,GAAG,WAAW;gBACrB,MAAM;;;yCA0BrB,CAAA;AAID,eAAe,YAAY,CAAA"}
|
|
@@ -6,14 +6,16 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
|
6
6
|
import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
|
|
7
7
|
|
|
8
8
|
const CounterLabel = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
|
|
9
|
-
const $ = c(
|
|
9
|
+
const $ = c(21);
|
|
10
10
|
let children;
|
|
11
11
|
let className;
|
|
12
12
|
let rest;
|
|
13
|
-
let
|
|
13
|
+
let scheme;
|
|
14
|
+
let variant;
|
|
14
15
|
if ($[0] !== t0) {
|
|
15
16
|
({
|
|
16
|
-
|
|
17
|
+
variant,
|
|
18
|
+
scheme,
|
|
17
19
|
className,
|
|
18
20
|
children,
|
|
19
21
|
...rest
|
|
@@ -22,75 +24,77 @@ const CounterLabel = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
|
|
|
22
24
|
$[1] = children;
|
|
23
25
|
$[2] = className;
|
|
24
26
|
$[3] = rest;
|
|
25
|
-
$[4] =
|
|
27
|
+
$[4] = scheme;
|
|
28
|
+
$[5] = variant;
|
|
26
29
|
} else {
|
|
27
30
|
children = $[1];
|
|
28
31
|
className = $[2];
|
|
29
32
|
rest = $[3];
|
|
30
|
-
|
|
33
|
+
scheme = $[4];
|
|
34
|
+
variant = $[5];
|
|
31
35
|
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
t2 = /*#__PURE__*/jsxs(VisuallyHidden, {
|
|
36
|
+
let t1;
|
|
37
|
+
if ($[6] !== children) {
|
|
38
|
+
t1 = /*#__PURE__*/jsxs(VisuallyHidden, {
|
|
36
39
|
children: ["\xA0(", children, ")"]
|
|
37
40
|
});
|
|
38
|
-
$[
|
|
39
|
-
$[
|
|
41
|
+
$[6] = children;
|
|
42
|
+
$[7] = t1;
|
|
40
43
|
} else {
|
|
41
|
-
|
|
44
|
+
t1 = $[7];
|
|
42
45
|
}
|
|
43
|
-
const label =
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
46
|
+
const label = t1;
|
|
47
|
+
const inferredVariant = variant || scheme || "secondary";
|
|
48
|
+
let t2;
|
|
49
|
+
if ($[8] !== forwardedRef || $[9] !== inferredVariant || $[10] !== rest) {
|
|
50
|
+
t2 = {
|
|
47
51
|
ref: forwardedRef,
|
|
48
52
|
"aria-hidden": "true",
|
|
49
|
-
"data-
|
|
53
|
+
"data-variant": inferredVariant,
|
|
50
54
|
...rest
|
|
51
55
|
};
|
|
52
|
-
$[
|
|
53
|
-
$[
|
|
54
|
-
$[
|
|
55
|
-
$[
|
|
56
|
+
$[8] = forwardedRef;
|
|
57
|
+
$[9] = inferredVariant;
|
|
58
|
+
$[10] = rest;
|
|
59
|
+
$[11] = t2;
|
|
56
60
|
} else {
|
|
57
|
-
|
|
61
|
+
t2 = $[11];
|
|
58
62
|
}
|
|
59
|
-
const counterProps =
|
|
60
|
-
let
|
|
61
|
-
if ($[
|
|
62
|
-
|
|
63
|
-
$[
|
|
64
|
-
$[
|
|
63
|
+
const counterProps = t2;
|
|
64
|
+
let t3;
|
|
65
|
+
if ($[12] !== className) {
|
|
66
|
+
t3 = clsx(className, classes.CounterLabel);
|
|
67
|
+
$[12] = className;
|
|
68
|
+
$[13] = t3;
|
|
65
69
|
} else {
|
|
66
|
-
|
|
70
|
+
t3 = $[13];
|
|
67
71
|
}
|
|
68
|
-
let
|
|
69
|
-
if ($[
|
|
70
|
-
|
|
72
|
+
let t4;
|
|
73
|
+
if ($[14] !== children || $[15] !== counterProps || $[16] !== t3) {
|
|
74
|
+
t4 = /*#__PURE__*/jsx("span", {
|
|
71
75
|
...counterProps,
|
|
72
|
-
className:
|
|
76
|
+
className: t3,
|
|
73
77
|
children: children
|
|
74
78
|
});
|
|
75
|
-
$[
|
|
76
|
-
$[
|
|
77
|
-
$[
|
|
78
|
-
$[
|
|
79
|
+
$[14] = children;
|
|
80
|
+
$[15] = counterProps;
|
|
81
|
+
$[16] = t3;
|
|
82
|
+
$[17] = t4;
|
|
79
83
|
} else {
|
|
80
|
-
|
|
84
|
+
t4 = $[17];
|
|
81
85
|
}
|
|
82
|
-
let
|
|
83
|
-
if ($[
|
|
84
|
-
|
|
85
|
-
children: [
|
|
86
|
+
let t5;
|
|
87
|
+
if ($[18] !== label || $[19] !== t4) {
|
|
88
|
+
t5 = /*#__PURE__*/jsxs(Fragment, {
|
|
89
|
+
children: [t4, label]
|
|
86
90
|
});
|
|
87
|
-
$[
|
|
88
|
-
$[
|
|
89
|
-
$[
|
|
91
|
+
$[18] = label;
|
|
92
|
+
$[19] = t4;
|
|
93
|
+
$[20] = t5;
|
|
90
94
|
} else {
|
|
91
|
-
|
|
95
|
+
t5 = $[20];
|
|
92
96
|
}
|
|
93
|
-
return
|
|
97
|
+
return t5;
|
|
94
98
|
});
|
|
95
99
|
CounterLabel.displayName = 'CounterLabel';
|
|
96
100
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultFeatureFlags.d.ts","sourceRoot":"","sources":["../../src/FeatureFlags/DefaultFeatureFlags.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAA;AAEnD,eAAO,MAAM,mBAAmB,
|
|
1
|
+
{"version":3,"file":"DefaultFeatureFlags.d.ts","sourceRoot":"","sources":["../../src/FeatureFlags/DefaultFeatureFlags.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAA;AAEnD,eAAO,MAAM,mBAAmB,kBAQ9B,CAAA"}
|
|
@@ -7,8 +7,7 @@ const DefaultFeatureFlags = FeatureFlagScope.create({
|
|
|
7
7
|
primer_react_segmented_control_tooltip: false,
|
|
8
8
|
primer_react_select_panel_fullscreen_on_narrow: false,
|
|
9
9
|
primer_react_select_panel_order_selected_at_top: false,
|
|
10
|
-
primer_react_select_panel_remove_active_descendant: false
|
|
11
|
-
primer_react_use_styled_react_theming: false
|
|
10
|
+
primer_react_select_panel_remove_active_descendant: false
|
|
12
11
|
});
|
|
13
12
|
|
|
14
13
|
export { DefaultFeatureFlags };
|
|
@@ -22,8 +22,28 @@ export interface FilteredActionListProps extends Partial<Omit<GroupedListProps,
|
|
|
22
22
|
announcementsEnabled?: boolean;
|
|
23
23
|
fullScreenOnNarrow?: boolean;
|
|
24
24
|
onSelectAllChange?: (checked: boolean) => void;
|
|
25
|
+
/**
|
|
26
|
+
* Private API for use internally only. Adds the ability to switch between
|
|
27
|
+
* `active-descendant` and roving tabindex.
|
|
28
|
+
*
|
|
29
|
+
* By default, FilteredActionList uses `aria-activedescendant` to manage focus.
|
|
30
|
+
*
|
|
31
|
+
* Roving tabindex is an alternative focus management method that moves
|
|
32
|
+
* focus to the list items themselves instead of keeping focus on the input.
|
|
33
|
+
*
|
|
34
|
+
* Improper usage can lead to inaccessible experiences, so this prop should be used with caution.
|
|
35
|
+
*
|
|
36
|
+
* For usage, refer to the documentation:
|
|
37
|
+
*
|
|
38
|
+
* WAI-ARIA `aria-activedescendant`: https://www.w3.org/TR/wai-aria-1.2/#aria-activedescendant
|
|
39
|
+
*
|
|
40
|
+
* Roving Tabindex: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex
|
|
41
|
+
*
|
|
42
|
+
* @default 'active-descendant'
|
|
43
|
+
*/
|
|
44
|
+
_PrivateFocusManagement?: 'roving-tabindex' | 'active-descendant';
|
|
25
45
|
}
|
|
26
|
-
export declare function FilteredActionList({ loading, placeholderText, filterValue: externalFilterValue, loadingType, onFilterChange, onListContainerRefChanged, onInputRefChanged, items, textInputProps, inputRef: providedInputRef, groupMetadata, showItemDividers, message, messageText, className, selectionVariant, announcementsEnabled, fullScreenOnNarrow, onSelectAllChange, ...listProps }: FilteredActionListProps): JSX.Element;
|
|
46
|
+
export declare function FilteredActionList({ loading, placeholderText, filterValue: externalFilterValue, loadingType, onFilterChange, onListContainerRefChanged, onInputRefChanged, items, textInputProps, inputRef: providedInputRef, groupMetadata, showItemDividers, message, messageText, className, selectionVariant, announcementsEnabled, fullScreenOnNarrow, onSelectAllChange, _PrivateFocusManagement, ...listProps }: FilteredActionListProps): JSX.Element;
|
|
27
47
|
export declare namespace FilteredActionList {
|
|
28
48
|
var displayName: string;
|
|
29
49
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilteredActionList.d.ts","sourceRoot":"","sources":["../../src/FilteredActionList/FilteredActionList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAuB,GAAG,EAAC,MAAM,OAAO,CAAA;AACpD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,cAAc,CAAA;AAGhD,OAAO,KAAK,EAAC,gBAAgB,EAAE,aAAa,EAA0B,MAAM,IAAI,CAAA;AAOhF,OAAO,KAAK,EAAC,6BAA6B,EAAC,MAAM,6BAA6B,CAAA;
|
|
1
|
+
{"version":3,"file":"FilteredActionList.d.ts","sourceRoot":"","sources":["../../src/FilteredActionList/FilteredActionList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAuB,GAAG,EAAC,MAAM,OAAO,CAAA;AACpD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,cAAc,CAAA;AAGhD,OAAO,KAAK,EAAC,gBAAgB,EAAE,aAAa,EAA0B,MAAM,IAAI,CAAA;AAOhF,OAAO,KAAK,EAAC,6BAA6B,EAAC,MAAM,6BAA6B,CAAA;AAY9E,MAAM,WAAW,uBAAwB,SAAQ,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,MAAM,aAAa,CAAC,CAAC,EAAE,aAAa;IAClH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,6BAA6B,CAAA;IAC3C,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;IACtF,yBAAyB,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC7D,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACpE,cAAc,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC,CAAA;IAC1D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAC5C,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,WAAW,CAAC,EAAE;QACZ,KAAK,EAAE,MAAM,CAAA;QACb,WAAW,EAAE,MAAM,CAAA;KACpB,CAAA;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9C;;;;;;;;;;;;;;;;;;OAkBG;IACH,uBAAuB,CAAC,EAAE,iBAAiB,GAAG,mBAAmB,CAAA;CAClE;AAED,wBAAgB,kBAAkB,CAAC,EACjC,OAAe,EACf,eAAe,EACf,WAAW,EAAE,mBAAmB,EAChC,WAAwD,EACxD,cAAc,EACd,yBAAyB,EACzB,iBAAiB,EACjB,KAAK,EACL,cAAc,EACd,QAAQ,EAAE,gBAAgB,EAC1B,aAAa,EACb,gBAAgB,EAChB,OAAO,EACP,WAAW,EACX,SAAS,EACT,gBAAgB,EAChB,oBAA2B,EAC3B,kBAAkB,EAClB,iBAAiB,EACjB,uBAA6C,EAC7C,GAAG,SAAS,EACb,EAAE,uBAAuB,GAAG,GAAG,CAAC,OAAO,CAyTvC;yBA/Ue,kBAAkB"}
|
|
@@ -14,7 +14,6 @@ import { isValidElementType } from 'react-is';
|
|
|
14
14
|
import { useAnnouncements } from './useAnnouncements.js';
|
|
15
15
|
import { clsx } from 'clsx';
|
|
16
16
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
17
|
-
import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
|
|
18
17
|
import TextInput from '../TextInput/TextInput.js';
|
|
19
18
|
import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
|
|
20
19
|
import Checkbox from '../Checkbox/Checkbox.js';
|
|
@@ -43,6 +42,7 @@ function FilteredActionList({
|
|
|
43
42
|
announcementsEnabled = true,
|
|
44
43
|
fullScreenOnNarrow,
|
|
45
44
|
onSelectAllChange,
|
|
45
|
+
_PrivateFocusManagement = 'active-descendant',
|
|
46
46
|
...listProps
|
|
47
47
|
}) {
|
|
48
48
|
const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate(externalFilterValue, undefined, '');
|
|
@@ -55,7 +55,7 @@ function FilteredActionList({
|
|
|
55
55
|
const listRef = useRef(null);
|
|
56
56
|
const scrollContainerRef = useRef(null);
|
|
57
57
|
const inputRef = useProvidedRefOrCreate(providedInputRef);
|
|
58
|
-
const
|
|
58
|
+
const usingRovingTabindex = _PrivateFocusManagement === 'roving-tabindex';
|
|
59
59
|
const [listContainerElement, setListContainerElement] = useState(null);
|
|
60
60
|
const activeDescendantRef = useRef();
|
|
61
61
|
const listId = useId();
|
|
@@ -115,8 +115,6 @@ function FilteredActionList({
|
|
|
115
115
|
activeDescendantRef.current.dispatchEvent(activeDescendantEvent);
|
|
116
116
|
}
|
|
117
117
|
}, [activeDescendantRef]);
|
|
118
|
-
|
|
119
|
-
// BEGIN: Todo remove when we remove usingRemoveActiveDescendant
|
|
120
118
|
const listContainerRefCallback = useCallback(node => {
|
|
121
119
|
setListContainerElement(node);
|
|
122
120
|
onListContainerRefChanged === null || onListContainerRefChanged === void 0 ? void 0 : onListContainerRefChanged(node);
|
|
@@ -124,9 +122,7 @@ function FilteredActionList({
|
|
|
124
122
|
useEffect(() => {
|
|
125
123
|
onInputRefChanged === null || onInputRefChanged === void 0 ? void 0 : onInputRefChanged(inputRef);
|
|
126
124
|
}, [inputRef, onInputRefChanged]);
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
useFocusZone(!usingRemoveActiveDescendant ? {
|
|
125
|
+
useFocusZone(!usingRovingTabindex ? {
|
|
130
126
|
containerRef: {
|
|
131
127
|
current: listContainerElement
|
|
132
128
|
},
|
|
@@ -142,7 +138,7 @@ function FilteredActionList({
|
|
|
142
138
|
scrollIntoView(current, scrollContainerRef.current, menuScrollMargins);
|
|
143
139
|
}
|
|
144
140
|
}
|
|
145
|
-
} : undefined, [listContainerElement,
|
|
141
|
+
} : undefined, [listContainerElement, usingRovingTabindex]);
|
|
146
142
|
useEffect(() => {
|
|
147
143
|
if (activeDescendantRef.current && scrollContainerRef.current) {
|
|
148
144
|
scrollIntoView(activeDescendantRef.current, scrollContainerRef.current, {
|
|
@@ -152,7 +148,7 @@ function FilteredActionList({
|
|
|
152
148
|
}
|
|
153
149
|
}, [items, inputRef]);
|
|
154
150
|
useEffect(() => {
|
|
155
|
-
if (
|
|
151
|
+
if (usingRovingTabindex) {
|
|
156
152
|
const inputAndListContainerElement = inputAndListContainerRef.current;
|
|
157
153
|
if (!inputAndListContainerElement) return;
|
|
158
154
|
const list = listRef.current;
|
|
@@ -169,16 +165,16 @@ function FilteredActionList({
|
|
|
169
165
|
inputAndListContainerElement.removeEventListener('focusin', handleFocusIn);
|
|
170
166
|
};
|
|
171
167
|
}
|
|
172
|
-
}, [items, inputRef, listContainerElement,
|
|
168
|
+
}, [items, inputRef, listContainerElement, usingRovingTabindex]); // Re-run when items change to update active indicators
|
|
173
169
|
|
|
174
170
|
useEffect(() => {
|
|
175
|
-
if (
|
|
171
|
+
if (usingRovingTabindex && !loading) {
|
|
176
172
|
setIsInputFocused(inputRef.current && inputRef.current === document.activeElement ? true : false);
|
|
177
173
|
}
|
|
178
|
-
}, [loading, inputRef,
|
|
179
|
-
useAnnouncements(items,
|
|
174
|
+
}, [loading, inputRef, usingRovingTabindex]);
|
|
175
|
+
useAnnouncements(items, usingRovingTabindex ? listRef : {
|
|
180
176
|
current: listContainerElement
|
|
181
|
-
}, inputRef, announcementsEnabled, loading, messageText);
|
|
177
|
+
}, inputRef, announcementsEnabled, loading, messageText, _PrivateFocusManagement);
|
|
182
178
|
useScrollFlash(scrollContainerRef);
|
|
183
179
|
const handleSelectAllChange = useCallback(e_0 => {
|
|
184
180
|
if (onSelectAllChange) {
|
|
@@ -197,7 +193,7 @@ function FilteredActionList({
|
|
|
197
193
|
}
|
|
198
194
|
let firstGroupIndex_0 = 0;
|
|
199
195
|
const actionListContent = /*#__PURE__*/jsx(ActionList, {
|
|
200
|
-
ref:
|
|
196
|
+
ref: usingRovingTabindex ? listRef : listContainerRefCallback,
|
|
201
197
|
showDividers: showItemDividers,
|
|
202
198
|
selectionVariant: selectionVariant,
|
|
203
199
|
...listProps,
|
|
@@ -245,7 +241,7 @@ function FilteredActionList({
|
|
|
245
241
|
});
|
|
246
242
|
|
|
247
243
|
// Use ActionListContainerContext.Provider only for the old behavior (when feature flag is disabled)
|
|
248
|
-
if (
|
|
244
|
+
if (usingRovingTabindex) {
|
|
249
245
|
return /*#__PURE__*/jsx(ActionListContainerContext.Provider, {
|
|
250
246
|
value: {
|
|
251
247
|
container: 'FilteredActionList',
|
|
@@ -278,7 +274,7 @@ function FilteredActionList({
|
|
|
278
274
|
value: filterValue,
|
|
279
275
|
onChange: onInputChange,
|
|
280
276
|
onKeyPress: onInputKeyPress,
|
|
281
|
-
onKeyDown:
|
|
277
|
+
onKeyDown: usingRovingTabindex ? onInputKeyDown : () => {},
|
|
282
278
|
placeholder: placeholderText,
|
|
283
279
|
role: "combobox",
|
|
284
280
|
"aria-expanded": "true",
|
|
@@ -2,5 +2,5 @@ import type { FilteredActionListProps } from './index';
|
|
|
2
2
|
export declare const useAnnouncements: (items: FilteredActionListProps["items"], listContainerRef: React.RefObject<HTMLUListElement>, inputRef: React.RefObject<HTMLInputElement>, enabled?: boolean, loading?: boolean, message?: {
|
|
3
3
|
title: string;
|
|
4
4
|
description: string;
|
|
5
|
-
}) => void;
|
|
5
|
+
}, focusManagement?: "active-descendant" | "roving-tabindex") => void;
|
|
6
6
|
//# sourceMappingURL=useAnnouncements.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAnnouncements.d.ts","sourceRoot":"","sources":["../../src/FilteredActionList/useAnnouncements.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,uBAAuB,EAAC,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"useAnnouncements.d.ts","sourceRoot":"","sources":["../../src/FilteredActionList/useAnnouncements.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,uBAAuB,EAAC,MAAM,SAAS,CAAA;AAmCpD,eAAO,MAAM,gBAAgB,GAC3B,OAAO,uBAAuB,CAAC,OAAO,CAAC,EACvC,kBAAkB,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EACnD,UAAU,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAC3C,UAAS,OAAc,EACvB,UAAS,OAAe,EACxB,UAAU;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAC,EAC9C,kBAAkB,mBAAmB,GAAG,iBAAiB,SA4G1D,CAAA"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { c } from 'react-compiler-runtime';
|
|
2
2
|
import { announce } from '@primer/live-region-element';
|
|
3
3
|
import { useEffect, useRef } from 'react';
|
|
4
|
-
import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
|
|
5
4
|
|
|
6
5
|
// we add a delay so that it does not interrupt default screen reader announcement and queues after it
|
|
7
6
|
const delayMs = 500;
|
|
@@ -13,8 +12,6 @@ const useFirstRender = () => {
|
|
|
13
12
|
// eslint-disable-next-line react-hooks/refs
|
|
14
13
|
return firstRender.current;
|
|
15
14
|
};
|
|
16
|
-
|
|
17
|
-
//TODO remove this when we remove usingRemoveActiveDescendant
|
|
18
15
|
const getItemWithActiveDescendant = (listRef, items) => {
|
|
19
16
|
const listElement = listRef.current;
|
|
20
17
|
const activeItemElement = listElement === null || listElement === void 0 ? void 0 : listElement.querySelector('[data-is-active-descendant]');
|
|
@@ -30,13 +27,11 @@ const getItemWithActiveDescendant = (listRef, items) => {
|
|
|
30
27
|
selected
|
|
31
28
|
};
|
|
32
29
|
};
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
const useAnnouncements = (items, listContainerRef, inputRef, t0, t1, message) => {
|
|
30
|
+
const useAnnouncements = (items, listContainerRef, inputRef, t0, t1, message, focusManagement) => {
|
|
36
31
|
const $ = c(33);
|
|
37
32
|
const enabled = t0 === undefined ? true : t0;
|
|
38
33
|
const loading = t1 === undefined ? false : t1;
|
|
39
|
-
const
|
|
34
|
+
const usingRovingTabindex = focusManagement === "roving-tabindex";
|
|
40
35
|
let t2;
|
|
41
36
|
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
|
|
42
37
|
t2 = document.querySelector("live-region");
|
|
@@ -70,10 +65,10 @@ const useAnnouncements = (items, listContainerRef, inputRef, t0, t1, message) =>
|
|
|
70
65
|
const announce$1 = t4;
|
|
71
66
|
let t5;
|
|
72
67
|
let t6;
|
|
73
|
-
if ($[5] !== announce$1 || $[6] !== inputRef || $[7] !== items || $[8] !== listContainerRef || $[9] !== selectedItems || $[10] !==
|
|
68
|
+
if ($[5] !== announce$1 || $[6] !== inputRef || $[7] !== items || $[8] !== listContainerRef || $[9] !== selectedItems || $[10] !== usingRovingTabindex) {
|
|
74
69
|
t5 = function announceInitialFocus() {
|
|
75
70
|
const focusHandler = () => {
|
|
76
|
-
if (
|
|
71
|
+
if (usingRovingTabindex) {
|
|
77
72
|
const announcementText = `${items.length} item${items.length > 1 ? "s" : ""} available, ${selectedItems} selected.`;
|
|
78
73
|
announce$1(announcementText, {
|
|
79
74
|
delayMs,
|
|
@@ -102,13 +97,13 @@ const useAnnouncements = (items, listContainerRef, inputRef, t0, t1, message) =>
|
|
|
102
97
|
inputElement === null || inputElement === void 0 ? void 0 : inputElement.addEventListener("focus", focusHandler);
|
|
103
98
|
return () => inputElement === null || inputElement === void 0 ? void 0 : inputElement.removeEventListener("focus", focusHandler);
|
|
104
99
|
};
|
|
105
|
-
t6 = [listContainerRef, inputRef, items, liveRegion, announce$1,
|
|
100
|
+
t6 = [listContainerRef, inputRef, items, liveRegion, announce$1, usingRovingTabindex, selectedItems];
|
|
106
101
|
$[5] = announce$1;
|
|
107
102
|
$[6] = inputRef;
|
|
108
103
|
$[7] = items;
|
|
109
104
|
$[8] = listContainerRef;
|
|
110
105
|
$[9] = selectedItems;
|
|
111
|
-
$[10] =
|
|
106
|
+
$[10] = usingRovingTabindex;
|
|
112
107
|
$[11] = t5;
|
|
113
108
|
$[12] = t6;
|
|
114
109
|
} else {
|
|
@@ -118,7 +113,7 @@ const useAnnouncements = (items, listContainerRef, inputRef, t0, t1, message) =>
|
|
|
118
113
|
useEffect(t5, t6);
|
|
119
114
|
const isFirstRender = useFirstRender();
|
|
120
115
|
let t7;
|
|
121
|
-
if ($[13] !== announce$1 || $[14] !== isFirstRender || $[15] !== items || $[16] !== listContainerRef || $[17] !== loading || $[18] !== (message === null || message === void 0 ? void 0 : message.description) || $[19] !== (message === null || message === void 0 ? void 0 : message.title) || $[20] !== selectedItems || $[21] !==
|
|
116
|
+
if ($[13] !== announce$1 || $[14] !== isFirstRender || $[15] !== items || $[16] !== listContainerRef || $[17] !== loading || $[18] !== (message === null || message === void 0 ? void 0 : message.description) || $[19] !== (message === null || message === void 0 ? void 0 : message.title) || $[20] !== selectedItems || $[21] !== usingRovingTabindex) {
|
|
122
117
|
t7 = function announceListUpdates() {
|
|
123
118
|
if (isFirstRender) {
|
|
124
119
|
return;
|
|
@@ -130,7 +125,7 @@ const useAnnouncements = (items, listContainerRef, inputRef, t0, t1, message) =>
|
|
|
130
125
|
});
|
|
131
126
|
return;
|
|
132
127
|
}
|
|
133
|
-
if (
|
|
128
|
+
if (usingRovingTabindex) {
|
|
134
129
|
const announcementText_1 = `${items.length} item${items.length > 1 ? "s" : ""} available, ${selectedItems} selected.`;
|
|
135
130
|
announce$1(announcementText_1, {
|
|
136
131
|
delayMs,
|
|
@@ -163,7 +158,7 @@ const useAnnouncements = (items, listContainerRef, inputRef, t0, t1, message) =>
|
|
|
163
158
|
$[18] = message === null || message === void 0 ? void 0 : message.description;
|
|
164
159
|
$[19] = message === null || message === void 0 ? void 0 : message.title;
|
|
165
160
|
$[20] = selectedItems;
|
|
166
|
-
$[21] =
|
|
161
|
+
$[21] = usingRovingTabindex;
|
|
167
162
|
$[22] = t7;
|
|
168
163
|
} else {
|
|
169
164
|
t7 = $[22];
|
|
@@ -171,8 +166,8 @@ const useAnnouncements = (items, listContainerRef, inputRef, t0, t1, message) =>
|
|
|
171
166
|
const t8 = message === null || message === void 0 ? void 0 : message.title;
|
|
172
167
|
const t9 = message === null || message === void 0 ? void 0 : message.description;
|
|
173
168
|
let t10;
|
|
174
|
-
if ($[23] !== announce$1 || $[24] !== isFirstRender || $[25] !== items || $[26] !== listContainerRef || $[27] !== loading || $[28] !== selectedItems || $[29] !== t8 || $[30] !== t9 || $[31] !==
|
|
175
|
-
t10 = [announce$1, isFirstRender, items, listContainerRef, liveRegion,
|
|
169
|
+
if ($[23] !== announce$1 || $[24] !== isFirstRender || $[25] !== items || $[26] !== listContainerRef || $[27] !== loading || $[28] !== selectedItems || $[29] !== t8 || $[30] !== t9 || $[31] !== usingRovingTabindex) {
|
|
170
|
+
t10 = [announce$1, isFirstRender, items, listContainerRef, liveRegion, usingRovingTabindex, t8, t9, loading, selectedItems];
|
|
176
171
|
$[23] = announce$1;
|
|
177
172
|
$[24] = isFirstRender;
|
|
178
173
|
$[25] = items;
|
|
@@ -181,7 +176,7 @@ const useAnnouncements = (items, listContainerRef, inputRef, t0, t1, message) =>
|
|
|
181
176
|
$[28] = selectedItems;
|
|
182
177
|
$[29] = t8;
|
|
183
178
|
$[30] = t9;
|
|
184
|
-
$[31] =
|
|
179
|
+
$[31] = usingRovingTabindex;
|
|
185
180
|
$[32] = t10;
|
|
186
181
|
} else {
|
|
187
182
|
t10 = $[32];
|
|
@@ -39,6 +39,7 @@ export type NavListGroupExpandProps = {
|
|
|
39
39
|
export declare const GroupExpand: React.ForwardRefExoticComponent<NavListGroupExpandProps & React.RefAttributes<HTMLButtonElement>>;
|
|
40
40
|
export type NavListGroupHeadingProps = ActionListGroupHeadingProps;
|
|
41
41
|
export declare const NavList: React.ForwardRefExoticComponent<Omit<NavListProps, "ref"> & React.RefAttributes<HTMLElement>> & {
|
|
42
|
+
Description: import("../utils/types").FCWithSlotMarker<React.PropsWithChildren<import("..").ActionListDescriptionProps>>;
|
|
42
43
|
Item: PolymorphicForwardRefComponent<"a", NavListItemProps>;
|
|
43
44
|
SubNav: PolymorphicForwardRefComponent<"ul", NavListSubNavProps>;
|
|
44
45
|
LeadingVisual: import("../utils/types").FCWithSlotMarker<React.PropsWithChildren<import("../ActionList/Visuals").VisualProps>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavList.d.ts","sourceRoot":"","sources":["../../src/NavList/NavList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAC3E,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAC/F,OAAO,KAAuB,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,EACV,6BAA6B,EAC7B,sBAAsB,EACtB,4BAA4B,EAC5B,6BAA6B,EAC7B,2BAA2B,EAC5B,MAAM,eAAe,CAAA;AActB,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;AAqB/B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;IAC5F,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAoHD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAkCD,MAAM,MAAM,yBAAyB,GAAG,4BAA4B,CAAA;AASpE,MAAM,MAAM,0BAA0B,GAAG,6BAA6B,CAAA;AAStE,MAAM,MAAM,mBAAmB,GAAG,sBAAsB,CAAA;AAQxD,MAAM,MAAM,0BAA0B,GAAG,6BAA6B,CAAA;AAStE,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,GAAG;IACpE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAqBD,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,cAAc,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IAC9B,aAAa,CAAC,EAAE,IAAI,CAAA;IACpB,cAAc,CAAC,EAAE,6BAA6B,CAAA;IAC9C,0BAA0B,CAAC,EAAE,MAAM,CAAA;CACpC,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAA;AAEtC,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,KAAK,CAAC,SAAS,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,WAAW,mGAgFvB,CAAA;AAKD,MAAM,MAAM,wBAAwB,GAAG,2BAA2B,CAAA;AAqBlE,eAAO,MAAM,OAAO
|
|
1
|
+
{"version":3,"file":"NavList.d.ts","sourceRoot":"","sources":["../../src/NavList/NavList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAC3E,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAC/F,OAAO,KAAuB,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,EACV,6BAA6B,EAC7B,sBAAsB,EACtB,4BAA4B,EAC5B,6BAA6B,EAC7B,2BAA2B,EAC5B,MAAM,eAAe,CAAA;AActB,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;AAqB/B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;IAC5F,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAoHD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAkCD,MAAM,MAAM,yBAAyB,GAAG,4BAA4B,CAAA;AASpE,MAAM,MAAM,0BAA0B,GAAG,6BAA6B,CAAA;AAStE,MAAM,MAAM,mBAAmB,GAAG,sBAAsB,CAAA;AAQxD,MAAM,MAAM,0BAA0B,GAAG,6BAA6B,CAAA;AAStE,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,GAAG;IACpE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAqBD,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,cAAc,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IAC9B,aAAa,CAAC,EAAE,IAAI,CAAA;IACpB,cAAc,CAAC,EAAE,6BAA6B,CAAA;IAC9C,0BAA0B,CAAC,EAAE,MAAM,CAAA;CACpC,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAA;AAEtC,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,KAAK,CAAC,SAAS,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,WAAW,mGAgFvB,CAAA;AAKD,MAAM,MAAM,wBAAwB,GAAG,2BAA2B,CAAA;AAqBlE,eAAO,MAAM,OAAO;;;;;;;;;;;CAWlB,CAAA"}
|
package/dist/NavList/NavList.js
CHANGED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.prc-Popover-Popover-v1ShS{display:none;position:absolute;z-index:100}.prc-Popover-Popover-v1ShS:where([data-open]){display:block}.prc-Popover-Popover-v1ShS:where([data-relative]){position:relative}.prc-Popover-PopoverContent-nMzFS{background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border-radius:var(--borderRadius-medium,.375rem);box-shadow:var(--shadow-floating-small,var(--color-overlay-shadow));margin-left:auto;margin-right:auto;padding:var(--base-size-24,1.5rem);position:relative}.prc-Popover-PopoverContent-nMzFS:after,.prc-Popover-PopoverContent-nMzFS:before{content:"";display:inline-block;left:50%;position:absolute}.prc-Popover-PopoverContent-nMzFS:before{border-bottom-color:transparent;border:var(--base-size-8,.5rem) solid transparent;border-bottom:var(--base-size-8,.5rem) solid var(--borderColor-default,var(--color-border-default));margin-left:-9px;top:calc(var(--base-size-16,1rem)*-1)}.prc-Popover-PopoverContent-nMzFS:after{border:7px solid transparent;border-bottom:7px solid var(--overlay-bgColor,var(--color-canvas-overlay));margin-left:calc(var(--base-size-8,.5rem)*-1);top:-14px}:is(:where([data-caret=bottom]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=bottom-right]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=bottom-left]) .prc-Popover-PopoverContent-nMzFS):after,:is(:where([data-caret=bottom]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=bottom-right]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=bottom-left]) .prc-Popover-PopoverContent-nMzFS):before{border-bottom-color:transparent;top:auto}:is(:where([data-caret=bottom]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=bottom-right]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=bottom-left]) .prc-Popover-PopoverContent-nMzFS):before{border-top-color:var(--borderColor-default,var(--color-border-default));bottom:calc(var(--base-size-16,1rem)*-1)}:is(:where([data-caret=bottom]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=bottom-right]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=bottom-left]) .prc-Popover-PopoverContent-nMzFS):after{border-top-color:var(--overlay-bgColor,var(--color-canvas-overlay));bottom:-14px}:where([data-caret=bottom-right]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=top-right]) .prc-Popover-PopoverContent-nMzFS{margin-right:0;right:-9px}:is(:where([data-caret=top-right]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=bottom-right]) .prc-Popover-PopoverContent-nMzFS):after,:is(:where([data-caret=top-right]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=bottom-right]) .prc-Popover-PopoverContent-nMzFS):before{left:auto;margin-left:0}:is(:where([data-caret=top-right]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=bottom-right]) .prc-Popover-PopoverContent-nMzFS):before{right:20px}:is(:where([data-caret=top-right]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=bottom-right]) .prc-Popover-PopoverContent-nMzFS):after{right:21px}:where([data-caret=bottom-left]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=top-left]) .prc-Popover-PopoverContent-nMzFS{left:-9px;margin-left:0}:is(:where([data-caret=top-left]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=bottom-left]) .prc-Popover-PopoverContent-nMzFS):after,:is(:where([data-caret=top-left]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=bottom-left]) .prc-Popover-PopoverContent-nMzFS):before{left:var(--base-size-24,1.5rem);margin-left:0}:is(:where([data-caret=top-left]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=bottom-left]) .prc-Popover-PopoverContent-nMzFS):after{left:calc(var(--base-size-24,1.5rem) + 1px)}:is(:where([data-caret=right]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=right-top]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=right-bottom]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-top]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-bottom]) .prc-Popover-PopoverContent-nMzFS):after,:is(:where([data-caret=right]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=right-top]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=right-bottom]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-top]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-bottom]) .prc-Popover-PopoverContent-nMzFS):before{border-bottom-color:transparent;left:auto;margin-left:0;top:50%}:is(:where([data-caret=right]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=right-top]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=right-bottom]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-top]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-bottom]) .prc-Popover-PopoverContent-nMzFS):before{margin-top:calc((var(--base-size-8,.5rem) + 1px)*-1)}:is(:where([data-caret=right]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=right-top]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=right-bottom]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-top]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-bottom]) .prc-Popover-PopoverContent-nMzFS):after{margin-top:calc(var(--base-size-8,.5rem)*-1)}:is(:where([data-caret=right]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=right-top]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=right-bottom]) .prc-Popover-PopoverContent-nMzFS):before{border-left-color:var(--borderColor-default,var(--color-border-default));right:calc(var(--base-size-16,1rem)*-1)}:is(:where([data-caret=right]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=right-top]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=right-bottom]) .prc-Popover-PopoverContent-nMzFS):after{border-left-color:var(--overlay-bgColor,var(--color-canvas-overlay));right:-14px}:is(:where([data-caret=left]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-top]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-bottom]) .prc-Popover-PopoverContent-nMzFS):before{border-right-color:var(--borderColor-default,var(--color-border-default));left:calc(var(--base-size-16,1rem)*-1)}:is(:where([data-caret=left]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-top]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-bottom]) .prc-Popover-PopoverContent-nMzFS):after{border-right-color:var(--overlay-bgColor,var(--color-canvas-overlay));left:-14px}:is(:where([data-caret=right-top]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-top]) .prc-Popover-PopoverContent-nMzFS):after,:is(:where([data-caret=right-top]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-top]) .prc-Popover-PopoverContent-nMzFS):before{top:var(--base-size-24,1.5rem)}:is(:where([data-caret=right-bottom]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-bottom]) .prc-Popover-PopoverContent-nMzFS):after,:is(:where([data-caret=right-bottom]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-bottom]) .prc-Popover-PopoverContent-nMzFS):before{top:auto}:is(:where([data-caret=right-bottom]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-bottom]) .prc-Popover-PopoverContent-nMzFS):before{bottom:var(--base-size-16,1rem)}:is(:where([data-caret=right-bottom]) .prc-Popover-PopoverContent-nMzFS,:where([data-caret=left-bottom]) .prc-Popover-PopoverContent-nMzFS):after{bottom:calc(var(--base-size-16,1rem) + 1px)}.prc-Popover-PopoverContent-nMzFS:where([data-width=xsmall]){width:var(--overlay-width-xsmall,12rem)}.prc-Popover-PopoverContent-nMzFS:where([data-width=small]){width:var(--overlay-width-small,20rem)}.prc-Popover-PopoverContent-nMzFS:where([data-width=medium]){width:var(--overlay-width-medium,30rem)}.prc-Popover-PopoverContent-nMzFS:where([data-width=large]){width:var(--overlay-width-large,40rem)}.prc-Popover-PopoverContent-nMzFS:where([data-width=xlarge]){width:var(--overlay-width-xlarge,60rem)}.prc-Popover-PopoverContent-nMzFS:where([data-width=auto]){width:auto}.prc-Popover-PopoverContent-nMzFS:where([data-height=small]){height:var(--overlay-height-small,16rem)}.prc-Popover-PopoverContent-nMzFS:where([data-height=medium]){height:var(--overlay-height-medium,20rem)}.prc-Popover-PopoverContent-nMzFS:where([data-height=large]){height:var(--overlay-height-large,27rem)}.prc-Popover-PopoverContent-nMzFS:where([data-height=xlarge]){height:var(--overlay-height-xlarge,37.5rem)}.prc-Popover-PopoverContent-nMzFS:where([data-height=fit-content]){height:-moz-fit-content;height:fit-content}.prc-Popover-PopoverContent-nMzFS:where([data-height=auto]){height:auto}
|
|
2
|
+
/*# sourceMappingURL=Popover-a93df39c.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Popover/Popover.module.css"],"names":[],"mappings":"AAAA,2BAGE,YAAa,CAFb,iBAAkB,CAClB,WAUF,CAPE,8CACE,aACF,CAEA,kDACE,iBACF,CAGF,kCAKE,mEAAwC,CACxC,gDAAyC,CACzC,mEAAwC,CAHxC,gBAAiB,CADjB,iBAAkB,CADlB,kCAA4B,CAD5B,iBA+OF,CAtOE,iFAKE,UAAW,CADX,oBAAqB,CADrB,QAAS,CADT,iBAIF,CAEA,yCAOE,+BAA4C,CAC5C,iDAA+C,CAA/C,mGAA+C,CAL/C,gBAAiB,CAFjB,qCAQF,CAEA,wCASE,4BAA2C,CAA3C,0EAA2C,CAN3C,6CAA0C,CAD1C,SAQF,CAME,iaAGE,+BAAgC,CADhC,QAEF,CAEA,iNAEE,uEAA4C,CAD5C,wCAEF,CAEA,gNAIE,mEAAwC,CAFxC,YAGF,CAIF,qIAIE,cAAe,CADf,UAkBF,CAfE,iSAEE,SAAU,CACV,aACF,CAEA,iJAEE,UACF,CAEA,gJAEE,UACF,CAIF,mIAGE,SAAU,CACV,aAYF,CAVE,6RAEE,+BAAyB,CACzB,aACF,CAEA,8IAEE,2CACF,CAUA,yxBAKE,+BAAgC,CAFhC,SAAU,CACV,aAAc,CAFd,OAIF,CAEA,6YAEE,oDACF,CAEA,4YACE,4CACF,CAOA,8MAEE,wEAA6C,CAD7C,uCAEF,CAEA,6MAIE,oEAAyC,CAFzC,WAGF,CAOA,2MAEE,yEAA8C,CAD9C,sCAEF,CAEA,0MAIE,qEAA0C,CAF1C,UAGF,CAMA,yRAEE,8BACF,CAMA,qSAEE,QACF,CAEA,mJACE,+BACF,CAEA,kJAEE,2CACF,CAGF,6DACE,uCACF,CAEA,4DACE,sCACF,CAEA,6DACE,uCACF,CAEA,4DACE,sCACF,CAEA,6DACE,uCACF,CAEA,2DACE,UACF,CAEA,6DACE,wCACF,CAEA,8DACE,yCACF,CAEA,6DACE,wCACF,CAEA,8DACE,2CACF,CAEA,mEACE,uBAAmB,CAAnB,kBACF,CAEA,4DACE,WACF","file":"Popover-a93df39c.css","sourcesContent":[".Popover {\n position: absolute;\n z-index: 100;\n display: none;\n\n &:where([data-open]) {\n display: block;\n }\n\n &:where([data-relative]) {\n position: relative;\n }\n}\n\n.PopoverContent {\n position: relative;\n padding: var(--base-size-24);\n margin-right: auto;\n margin-left: auto;\n background-color: var(--overlay-bgColor);\n border-radius: var(--borderRadius-medium);\n box-shadow: var(--shadow-floating-small);\n\n /* Carets */\n &::before,\n &::after {\n position: absolute;\n left: 50%;\n display: inline-block;\n content: '';\n }\n\n &::before {\n top: calc(-1 * var(--base-size-16));\n /* stylelint-disable-next-line primer/spacing */\n margin-left: -9px;\n\n /* TODO: solid? */\n /* stylelint-disable-next-line primer/borders */\n border: var(--base-size-8) solid transparent;\n border-bottom-color: var(--borderColor-default);\n }\n\n &::after {\n /* stylelint-disable-next-line primer/spacing */\n top: -14px;\n margin-left: calc(-1 * var(--base-size-8));\n\n /* // todo: solid */\n /* stylelint-disable-next-line primer/borders */\n border: 7px solid transparent;\n /* stylelint-disable-next-line primer/colors */\n border-bottom-color: var(--overlay-bgColor);\n }\n\n /* Bottom-oriented carets */\n :where([data-caret='bottom']) &,\n :where([data-caret='bottom-right']) &,\n :where([data-caret='bottom-left']) & {\n &::before,\n &::after {\n top: auto;\n border-bottom-color: transparent;\n }\n\n &::before {\n bottom: calc(-1 * var(--base-size-16));\n border-top-color: var(--borderColor-default);\n }\n\n &::after {\n /* stylelint-disable-next-line primer/spacing */\n bottom: -14px;\n /* stylelint-disable-next-line primer/colors */\n border-top-color: var(--overlay-bgColor);\n }\n }\n\n /* Top & Bottom: Right-oriented carets */\n :where([data-caret='top-right']) &,\n :where([data-caret='bottom-right']) & {\n /* stylelint-disable-next-line primer/spacing */\n right: -9px;\n margin-right: 0;\n\n &::before,\n &::after {\n left: auto;\n margin-left: 0;\n }\n\n &::before {\n /* stylelint-disable-next-line primer/spacing */\n right: 20px;\n }\n\n &::after {\n /* stylelint-disable-next-line primer/spacing */\n right: 21px;\n }\n }\n\n /* Top & Bottom: Left-oriented carets */\n :where([data-caret='top-left']) &,\n :where([data-caret='bottom-left']) & {\n /* stylelint-disable-next-line primer/spacing */\n left: -9px;\n margin-left: 0;\n\n &::before,\n &::after {\n left: var(--base-size-24);\n margin-left: 0;\n }\n\n &::after {\n /* stylelint-disable-next-line primer/spacing */\n left: calc(var(--base-size-24) + 1px);\n }\n }\n\n /* Right- & Left-oriented carets */\n :where([data-caret='right']) &,\n :where([data-caret='right-top']) &,\n :where([data-caret='right-bottom']) &,\n :where([data-caret='left']) &,\n :where([data-caret='left-top']) &,\n :where([data-caret='left-bottom']) & {\n &::before,\n &::after {\n top: 50%;\n left: auto;\n margin-left: 0;\n border-bottom-color: transparent;\n }\n\n &::before {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: calc((var(--base-size-8) + 1px) * -1);\n }\n\n &::after {\n margin-top: calc(-1 * var(--base-size-8));\n }\n }\n\n /* Right-oriented carets */\n :where([data-caret='right']) &,\n :where([data-caret='right-top']) &,\n :where([data-caret='right-bottom']) & {\n &::before {\n right: calc(-1 * var(--base-size-16));\n border-left-color: var(--borderColor-default);\n }\n\n &::after {\n /* stylelint-disable-next-line primer/spacing */\n right: -14px;\n /* stylelint-disable-next-line primer/colors */\n border-left-color: var(--overlay-bgColor);\n }\n }\n\n /* Left-oriented carets */\n :where([data-caret='left']) &,\n :where([data-caret='left-top']) &,\n :where([data-caret='left-bottom']) & {\n &::before {\n left: calc(-1 * var(--base-size-16));\n border-right-color: var(--borderColor-default);\n }\n\n &::after {\n /* stylelint-disable-next-line primer/spacing */\n left: -14px;\n /* stylelint-disable-next-line primer/colors */\n border-right-color: var(--overlay-bgColor);\n }\n }\n\n /* Right & Left: Top-oriented carets */\n :where([data-caret='right-top']) &,\n :where([data-caret='left-top']) & {\n &::before,\n &::after {\n top: var(--base-size-24);\n }\n }\n\n /* Right & Left: Bottom-oriented carets */\n :where([data-caret='right-bottom']) &,\n :where([data-caret='left-bottom']) & {\n &::before,\n &::after {\n top: auto;\n }\n\n &::before {\n bottom: var(--base-size-16);\n }\n\n &::after {\n /* stylelint-disable-next-line primer/spacing */\n bottom: calc(var(--base-size-16) + 1px);\n }\n }\n\n &:where([data-width='xsmall']) {\n width: var(--overlay-width-xsmall);\n }\n\n &:where([data-width='small']) {\n width: var(--overlay-width-small);\n }\n\n &:where([data-width='medium']) {\n width: var(--overlay-width-medium);\n }\n\n &:where([data-width='large']) {\n width: var(--overlay-width-large);\n }\n\n &:where([data-width='xlarge']) {\n width: var(--overlay-width-xlarge);\n }\n\n &:where([data-width='auto']) {\n width: auto;\n }\n\n &:where([data-height='small']) {\n height: var(--overlay-height-small);\n }\n\n &:where([data-height='medium']) {\n height: var(--overlay-height-medium);\n }\n\n &:where([data-height='large']) {\n height: var(--overlay-height-large);\n }\n\n &:where([data-height='xlarge']) {\n height: var(--overlay-height-xlarge);\n }\n\n &:where([data-height='fit-content']) {\n height: fit-content;\n }\n\n &:where([data-height='auto']) {\n height: auto;\n }\n}\n"]}
|