@primer/react 38.0.0-rc.3 → 38.0.0-rc.4

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.
Files changed (143) hide show
  1. package/CHANGELOG.md +66 -0
  2. package/dist/ActionBar/ActionBar.d.ts.map +1 -1
  3. package/dist/ActionBar/ActionBar.js +6 -2
  4. package/dist/ActionList/Description.d.ts.map +1 -1
  5. package/dist/ActionList/Description.js +0 -1
  6. package/dist/ActionList/Visuals.js +2 -2
  7. package/dist/Autocomplete/AutocompleteMenu.js +2 -2
  8. package/dist/BaseStyles.d.ts +1 -2
  9. package/dist/BaseStyles.d.ts.map +1 -1
  10. package/dist/BaseStyles.js +1 -3
  11. package/dist/Breadcrumbs/Breadcrumbs.d.ts.map +1 -1
  12. package/dist/Breadcrumbs/Breadcrumbs.js +34 -48
  13. package/dist/Button/ButtonBase.js +6 -6
  14. package/dist/Button/LinkButton.d.ts +3 -3
  15. package/dist/Button/LinkButton.d.ts.map +1 -1
  16. package/dist/Button/LinkButton.js +0 -3
  17. package/dist/Button/index.d.ts +1 -0
  18. package/dist/Button/index.d.ts.map +1 -1
  19. package/dist/ButtonGroup/ButtonGroup.d.ts +2 -3
  20. package/dist/ButtonGroup/ButtonGroup.d.ts.map +1 -1
  21. package/dist/ButtonGroup/ButtonGroup.js +41 -36
  22. package/dist/Checkbox/Checkbox.d.ts +1 -2
  23. package/dist/Checkbox/Checkbox.d.ts.map +1 -1
  24. package/dist/Checkbox/Checkbox.js +48 -79
  25. package/dist/CheckboxGroup/CheckboxGroup.d.ts +2 -3
  26. package/dist/CheckboxGroup/CheckboxGroup.d.ts.map +1 -1
  27. package/dist/CounterLabel/CounterLabel.d.ts +2 -3
  28. package/dist/CounterLabel/CounterLabel.d.ts.map +1 -1
  29. package/dist/CounterLabel/CounterLabel.js +1 -3
  30. package/dist/FilteredActionList/FilteredActionList-e1eb1b75.css +2 -0
  31. package/dist/FilteredActionList/FilteredActionList-e1eb1b75.css.map +1 -0
  32. package/dist/FilteredActionList/FilteredActionList.d.ts +2 -3
  33. package/dist/FilteredActionList/FilteredActionList.d.ts.map +1 -1
  34. package/dist/FilteredActionList/FilteredActionList.js +10 -9
  35. package/dist/FilteredActionList/FilteredActionList.module.css.js +2 -2
  36. package/dist/FilteredActionList/FilteredActionListLoaders-a46a8ea4.css +2 -0
  37. package/dist/FilteredActionList/FilteredActionListLoaders-a46a8ea4.css.map +1 -0
  38. package/dist/FilteredActionList/FilteredActionListLoaders.d.ts.map +1 -1
  39. package/dist/FilteredActionList/FilteredActionListLoaders.js +12 -29
  40. package/dist/FilteredActionList/FilteredActionListLoaders.module.css.js +2 -2
  41. package/dist/Flash/Flash.d.ts +1 -2
  42. package/dist/Flash/Flash.d.ts.map +1 -1
  43. package/dist/Flash/Flash.js +38 -45
  44. package/dist/Header/Header.d.ts +3 -4
  45. package/dist/Header/Header.d.ts.map +1 -1
  46. package/dist/Header/Header.js +10 -13
  47. package/dist/InlineMessage/InlineMessage.d.ts +1 -2
  48. package/dist/InlineMessage/InlineMessage.d.ts.map +1 -1
  49. package/dist/InlineMessage/InlineMessage.js +49 -65
  50. package/dist/PageHeader/PageHeader.d.ts +5 -5
  51. package/dist/PageHeader/PageHeader.d.ts.map +1 -1
  52. package/dist/PageHeader/PageHeader.js +330 -507
  53. package/dist/Pagehead/Pagehead.d.ts +2 -3
  54. package/dist/Pagehead/Pagehead.d.ts.map +1 -1
  55. package/dist/Pagehead/Pagehead.js +2 -2
  56. package/dist/ProgressBar/{ProgressBar-181186d4.css → ProgressBar-d27aca1d.css} +2 -2
  57. package/dist/ProgressBar/ProgressBar-d27aca1d.css.map +1 -0
  58. package/dist/ProgressBar/ProgressBar.d.ts +4 -9
  59. package/dist/ProgressBar/ProgressBar.d.ts.map +1 -1
  60. package/dist/ProgressBar/ProgressBar.js +9 -14
  61. package/dist/ProgressBar/ProgressBar.module.css.js +1 -1
  62. package/dist/ProgressBar/index.d.ts +2 -2
  63. package/dist/Radio/Radio.d.ts +1 -2
  64. package/dist/Radio/Radio.d.ts.map +1 -1
  65. package/dist/Radio/Radio.js +1 -3
  66. package/dist/RadioGroup/RadioGroup.d.ts +3 -4
  67. package/dist/RadioGroup/RadioGroup.d.ts.map +1 -1
  68. package/dist/RadioGroup/index.d.ts +1 -0
  69. package/dist/RadioGroup/index.d.ts.map +1 -1
  70. package/dist/RelativeTime/RelativeTime.d.ts +1 -3
  71. package/dist/RelativeTime/RelativeTime.d.ts.map +1 -1
  72. package/dist/Spinner/Spinner.d.ts +4 -5
  73. package/dist/Spinner/Spinner.d.ts.map +1 -1
  74. package/dist/Spinner/Spinner.js +49 -81
  75. package/dist/Timeline/Timeline.d.ts +11 -18
  76. package/dist/Timeline/Timeline.d.ts.map +1 -1
  77. package/dist/Timeline/Timeline.js +5 -6
  78. package/dist/ToggleSwitch/ToggleSwitch.d.ts +4 -0
  79. package/dist/ToggleSwitch/ToggleSwitch.d.ts.map +1 -1
  80. package/dist/ToggleSwitch/ToggleSwitch.js +195 -182
  81. package/dist/TreeView/TreeView-bdf34914.css +2 -0
  82. package/dist/TreeView/TreeView-bdf34914.css.map +1 -0
  83. package/dist/TreeView/TreeView.d.ts +15 -0
  84. package/dist/TreeView/TreeView.d.ts.map +1 -1
  85. package/dist/TreeView/TreeView.js +241 -10
  86. package/dist/TreeView/TreeView.module.css.js +2 -2
  87. package/dist/Truncate/Truncate.d.ts +1 -2
  88. package/dist/Truncate/Truncate.d.ts.map +1 -1
  89. package/dist/Truncate/Truncate.js +2 -6
  90. package/dist/UnderlineNav/UnderlineNav-78db938f.css +2 -0
  91. package/dist/UnderlineNav/UnderlineNav-78db938f.css.map +1 -0
  92. package/dist/UnderlineNav/UnderlineNav.d.ts +0 -3
  93. package/dist/UnderlineNav/UnderlineNav.d.ts.map +1 -1
  94. package/dist/UnderlineNav/UnderlineNav.js +8 -25
  95. package/dist/UnderlineNav/UnderlineNav.module.css.js +5 -0
  96. package/dist/UnderlineNav/UnderlineNavItem-b65e8fd3.css +2 -0
  97. package/dist/UnderlineNav/UnderlineNavItem-b65e8fd3.css.map +1 -0
  98. package/dist/UnderlineNav/UnderlineNavItem.d.ts +1 -2
  99. package/dist/UnderlineNav/UnderlineNavItem.d.ts.map +1 -1
  100. package/dist/UnderlineNav/UnderlineNavItem.js +49 -69
  101. package/dist/UnderlineNav/UnderlineNavItem.module.css.js +5 -0
  102. package/dist/UnderlineNav/styles.d.ts +1 -1
  103. package/dist/UnderlineNav/styles.js +1 -1
  104. package/dist/deprecated/FilteredSearch/FilteredSearch-d30f5bbc.css +2 -0
  105. package/dist/deprecated/FilteredSearch/FilteredSearch-d30f5bbc.css.map +1 -0
  106. package/dist/deprecated/FilteredSearch/FilteredSearch.d.ts +3 -4
  107. package/dist/deprecated/FilteredSearch/FilteredSearch.d.ts.map +1 -1
  108. package/dist/deprecated/FilteredSearch/FilteredSearch.js +48 -7
  109. package/dist/deprecated/FilteredSearch/FilteredSearch.module.css.js +5 -0
  110. package/dist/deprecated/index.d.ts +0 -2
  111. package/dist/deprecated/index.d.ts.map +1 -1
  112. package/dist/deprecated/index.js +0 -1
  113. package/dist/experimental/SelectPanel2/SelectPanel.js +2 -2
  114. package/dist/experimental/index.d.ts +2 -3
  115. package/dist/experimental/index.d.ts.map +1 -1
  116. package/dist/experimental/index.js +1 -2
  117. package/dist/index.d.ts +3 -4
  118. package/dist/index.d.ts.map +1 -1
  119. package/dist/index.js +0 -1
  120. package/dist/internal/components/TextInputInnerVisualSlot.js +2 -2
  121. package/dist/utils/create-component.d.ts +1 -3
  122. package/dist/utils/create-component.d.ts.map +1 -1
  123. package/dist/utils/create-component.js +3 -8
  124. package/generated/components.json +35 -242
  125. package/package.json +1 -1
  126. package/dist/DropdownStyles.d.ts +0 -4
  127. package/dist/DropdownStyles.d.ts.map +0 -1
  128. package/dist/FilteredActionList/FilteredActionList-96b126d7.css +0 -2
  129. package/dist/FilteredActionList/FilteredActionList-96b126d7.css.map +0 -1
  130. package/dist/FilteredActionList/FilteredActionListLoaders-6f14c45b.css +0 -2
  131. package/dist/FilteredActionList/FilteredActionListLoaders-6f14c45b.css.map +0 -1
  132. package/dist/PointerBox/PointerBox.d.ts +0 -28
  133. package/dist/PointerBox/PointerBox.d.ts.map +0 -1
  134. package/dist/PointerBox/PointerBox.js +0 -65
  135. package/dist/PointerBox/index.d.ts +0 -3
  136. package/dist/PointerBox/index.d.ts.map +0 -1
  137. package/dist/ProgressBar/ProgressBar-181186d4.css.map +0 -1
  138. package/dist/TreeView/TreeView-cd08cabc.css +0 -2
  139. package/dist/TreeView/TreeView-cd08cabc.css.map +0 -1
  140. package/dist/internal/components/Caret-e686f04c.css +0 -2
  141. package/dist/internal/components/Caret-e686f04c.css.map +0 -1
  142. package/dist/internal/components/Caret.js +0 -87
  143. package/dist/internal/components/Caret.module.css.js +0 -5
@@ -1,2 +0,0 @@
1
- .prc-FilteredActionList-LoadingSkeleton-x9WXt{border-radius:4px}
2
- /*# sourceMappingURL=FilteredActionListLoaders-6f14c45b.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/FilteredActionList/FilteredActionListLoaders.module.css"],"names":[],"mappings":"AAAA,8CAEE,iBACF","file":"FilteredActionListLoaders-6f14c45b.css","sourcesContent":[".LoadingSkeleton {\n /* stylelint-disable-next-line primer/borders */\n border-radius: 4px;\n}\n"]}
@@ -1,28 +0,0 @@
1
- import React from 'react';
2
- import type { BoxProps } from '../Box';
3
- import type { CaretProps } from '../internal/components/Caret';
4
- import type { SxProp } from '../sx';
5
- type MutatedSxProps = {
6
- sx?: {
7
- bg?: string;
8
- backgroundColor?: string;
9
- borderColor?: string;
10
- };
11
- } & SxProp;
12
- /**
13
- * @deprecated PointerBox is deprecated and will be removed in a future major release.
14
- * Consider using Overlay or Position + Box with a caret instead.
15
- */
16
- export type PointerBoxProps = {
17
- caret?: CaretProps['location'];
18
- bg?: CaretProps['bg'];
19
- borderColor?: CaretProps['borderColor'];
20
- border?: CaretProps['borderWidth'];
21
- } & BoxProps & MutatedSxProps;
22
- /**
23
- * @deprecated PointerBox is deprecated and will be removed in a future major release.
24
- * Consider using Overlay or Position + Box with a caret instead.
25
- */
26
- declare function PointerBox(props: PointerBoxProps): React.JSX.Element;
27
- export default PointerBox;
28
- //# sourceMappingURL=PointerBox.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PointerBox.d.ts","sourceRoot":"","sources":["../../src/PointerBox/PointerBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,QAAQ,CAAA;AAEpC,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,8BAA8B,CAAA;AAG5D,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAGjC,KAAK,cAAc,GAAG;IACpB,EAAE,CAAC,EAAE;QACH,EAAE,CAAC,EAAE,MAAM,CAAA;QACX,eAAe,CAAC,EAAE,MAAM,CAAA;QACxB,WAAW,CAAC,EAAE,MAAM,CAAA;KACrB,CAAA;CACF,GAAG,MAAM,CAAA;AAEV;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAA;IAC9B,EAAE,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAA;IACrB,WAAW,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,CAAA;IACvC,MAAM,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,CAAA;CACnC,GAAG,QAAQ,GACV,cAAc,CAAA;AAEhB;;;GAGG;AACH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,qBAoCzC;AAED,eAAe,UAAU,CAAA"}
@@ -1,65 +0,0 @@
1
- import React from 'react';
2
- import { ThemeContext } from 'styled-components';
3
- import Caret from '../internal/components/Caret.js';
4
- import { get } from '../constants.js';
5
- import { jsxs, jsx } from 'react/jsx-runtime';
6
- import Box from '../Box/Box.js';
7
-
8
- /**
9
- * @deprecated PointerBox is deprecated and will be removed in a future major release.
10
- * Consider using Overlay or Position + Box with a caret instead.
11
- */
12
- function PointerBox(props) {
13
- // don't destructure these, just grab them
14
- const themeContext = React.useContext(ThemeContext);
15
- const {
16
- bg,
17
- border,
18
- borderColor,
19
- theme: themeProp,
20
- sx
21
- } = props;
22
- const {
23
- caret,
24
- children,
25
- ...boxProps
26
- } = props;
27
- const {
28
- bg: sxBg,
29
- backgroundColor,
30
- ...sxRest
31
- } = sx || {};
32
- const theme = themeProp || themeContext;
33
- const customBackground = bg || sxBg || backgroundColor;
34
- const caretProps = {
35
- bg: bg || (sx === null || sx === void 0 ? void 0 : sx.bg) || (sx === null || sx === void 0 ? void 0 : sx.backgroundColor),
36
- borderColor: borderColor || (sx === null || sx === void 0 ? void 0 : sx.borderColor),
37
- borderWidth: border,
38
- location: caret,
39
- theme
40
- };
41
- const defaultBoxProps = {
42
- borderWidth: '1px',
43
- borderStyle: 'solid',
44
- borderColor: 'border.default',
45
- borderRadius: 2
46
- };
47
- return /*#__PURE__*/jsxs(Box, {
48
- ...defaultBoxProps,
49
- ...boxProps,
50
- sx: {
51
- ...sxRest,
52
- '--custom-bg': get(`colors.${customBackground}`)({
53
- theme
54
- }),
55
- backgroundImage: customBackground ? `linear-gradient(var(--custom-bg), var(--custom-bg)), linear-gradient(${theme.colors.canvas.default}, ${theme.colors.canvas.default})` : undefined,
56
- position: 'relative'
57
- },
58
- children: [children, /*#__PURE__*/jsx(Caret, {
59
- ...caretProps
60
- })]
61
- });
62
- }
63
- PointerBox.displayName = "PointerBox";
64
-
65
- export { PointerBox as default };
@@ -1,3 +0,0 @@
1
- export { default } from './PointerBox';
2
- export type { PointerBoxProps } from './PointerBox';
3
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/PointerBox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,cAAc,CAAA;AACpC,YAAY,EAAC,eAAe,EAAC,MAAM,cAAc,CAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/ProgressBar/ProgressBar.module.css"],"names":[],"mappings":"AAAA,yCACE,GACE,kBACF,CAEA,GACE,eACF,CACF,CAEA,uCAEE,kBAAkB,CAClB,eAAe,CAIf,mCAAoC,CAFpC,2BAaF,CATE,8CACE,2DAIE,qBAAsB,CACtB,kCAAmC,CAFnC,4CAAuB,CAFvB,8DAAqE,CACrE,cAIF,CACF,CAGF,4CAIE,iDAAkD,CAClD,gDAAwC,CAJxC,YAAa,CAKb,OAAQ,CACR,sDAAuD,CACvD,mBAAoB,CANpB,eAuBF,CAfE,kFACE,mBACF,CAEA,oFACE,UACF,CAEA,kFACE,UACF,CAEA,kFACE,WACF","file":"ProgressBar-181186d4.css","sourcesContent":["@keyframes shimmer {\n from {\n mask-position: 200%;\n }\n\n to {\n mask-position: 0%;\n }\n}\n\n.ProgressBarItem {\n /* these are passed from the component */\n --progress-width: ;\n --progress-bg: ;\n\n width: var(--progress-width);\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--progress-bg);\n\n @media (prefers-reduced-motion: no-preference) {\n &[data-animated='true'] {\n mask-image: linear-gradient(75deg, #000 30%, rgba(0, 0, 0, 0.65) 80%);\n mask-size: 200%;\n animation-name: shimmer;\n animation-duration: 1s;\n animation-iteration-count: infinite;\n }\n }\n}\n\n.ProgressBarContainer {\n display: flex;\n overflow: hidden;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--progressBar-track-bgColor);\n border-radius: var(--borderRadius-small);\n gap: 2px;\n outline: solid 1px var(--progressBar-track-borderColor);\n outline-offset: -1px;\n\n &:where([data-progress-display='inline']) {\n display: inline-flex;\n }\n\n &:where([data-progress-bar-size='default']) {\n height: 8px;\n }\n\n &:where([data-progress-bar-size='small']) {\n height: 5px;\n }\n\n &:where([data-progress-bar-size='large']) {\n height: 10px;\n }\n}\n"]}
@@ -1,2 +0,0 @@
1
- .prc-TreeView-TreeViewRootUlStyles-eZtxW{list-style:none;margin:0;padding:0}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItem-ShJr0{outline:none}:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItem-ShJr0):focus-visible>div,:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItem-ShJr0).focus-visible>div{box-shadow:var(--boxShadow-thick,inset 0 0 0 .125rem) var(--fgColor-accent,var(--color-accent-fg))}@media (forced-colors:active){:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItem-ShJr0):focus-visible>div,:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItem-ShJr0).focus-visible>div{outline:2px solid HighlightText;outline-offset:-2}}[data-has-leading-action]:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItem-ShJr0){--has-leading-action:1}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemContainer--2Rkn{--level:1;--toggle-width:1rem;--min-item-height:2rem;border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-default,var(--color-fg-default));cursor:pointer;display:grid;font-size:var(--text-body-size-medium,.875rem);grid-template-areas:"spacer leadingAction toggle content";grid-template-columns:var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr;position:relative;width:100%;--leading-action-width:calc(var(--has-leading-action, 0)*1.5rem);--spacer-width:calc((var(--level) - 1)*(var(--toggle-width)/2))}:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemContainer--2Rkn):hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}@media (forced-colors:active){:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemContainer--2Rkn):hover{outline:2px solid transparent;outline-offset:-2px}}@media (pointer:coarse){.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemContainer--2Rkn{--toggle-width:1.5rem;--min-item-height:2.75rem}}:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemContainer--2Rkn):has(.prc-TreeView-TreeViewItemSkeleton-fqk59):hover{background-color:transparent;cursor:default}@media (forced-colors:active){:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemContainer--2Rkn):has(.prc-TreeView-TreeViewItemSkeleton-fqk59):hover{outline:none}}.prc-TreeView-TreeViewRootUlStyles-eZtxW:where([data-omit-spacer=true]) .prc-TreeView-TreeViewItemContainer--2Rkn{grid-template-columns:0 0 0 1fr}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItem-ShJr0[aria-current=true]>.prc-TreeView-TreeViewItemContainer--2Rkn{background-color:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItem-ShJr0[aria-current=true]>.prc-TreeView-TreeViewItemContainer--2Rkn):after{background-color:var(--fgColor-accent,var(--color-accent-fg));border-radius:var(--borderRadius-medium,.375rem);content:"";height:1.5rem;left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - var(--base-size-12,.75rem));width:.25rem}@media (forced-colors:active){:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItem-ShJr0[aria-current=true]>.prc-TreeView-TreeViewItemContainer--2Rkn):after{background-color:HighlightText}}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemToggle-gWUdE{align-items:flex-start;color:var(--fgColor-muted,var(--color-fg-muted));display:flex;grid-area:toggle;height:100%;justify-content:center;padding-top:calc(var(--min-item-height)/2 - var(--base-size-12,.75rem)/2)}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemToggleHover-nEgP-:hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemToggleEnd-t-AEB{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemContent-f0r0b{display:flex;gap:var(--stack-gap-condensed,.5rem);grid-area:content;height:100%;line-height:var(--custom-line-height,var(--text-body-lineHeight-medium,1.4285));padding:0 var(--base-size-8,.5rem);padding-bottom:calc((var(--min-item-height) - var(--custom-line-height, 1.3rem))/2);padding-top:calc((var(--min-item-height) - var(--custom-line-height, 1.3rem))/2)}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemContentText-smZM-{flex:1 1 auto;width:0}.prc-TreeView-TreeViewRootUlStyles-eZtxW:where([data-truncate-text=true]) .prc-TreeView-TreeViewItemContentText-smZM-{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prc-TreeView-TreeViewRootUlStyles-eZtxW:where([data-truncate-text=false]) .prc-TreeView-TreeViewItemContentText-smZM-{word-break:break-word}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemVisual-dRlGq{align-items:center;color:var(--fgColor-muted,var(--color-fg-muted));display:flex;height:var(--custom-line-height,1.3rem)}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemLeadingAction-VXx8I{color:var(--fgColor-muted,var(--color-fg-muted));display:flex;grid-area:leadingAction}:is(.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemLeadingAction-VXx8I)>button{flex-shrink:1}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemLevelLine-KPSSL{border-color:var(--borderColor-muted,var(--color-border-muted));border-right:var(--borderWidth-thin,.0625rem) solid;height:100%;width:100%}@media (hover:hover){.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewItemLevelLine-KPSSL{border-color:transparent}.prc-TreeView-TreeViewRootUlStyles-eZtxW:focus-within .prc-TreeView-TreeViewItemLevelLine-KPSSL,.prc-TreeView-TreeViewRootUlStyles-eZtxW:hover .prc-TreeView-TreeViewItemLevelLine-KPSSL{border-color:var(--borderColor-muted,var(--color-border-muted))}}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewDirectoryIcon-PHbeP{color:var(--treeViewItem-leadingVisual-iconColor-rest,var(--color-tree-view-item-directory-fill));display:grid}.prc-TreeView-TreeViewRootUlStyles-eZtxW .prc-TreeView-TreeViewVisuallyHidden-4-mPv{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.prc-TreeView-TreeViewSkeletonItemContainerStyle-EB7p0{align-items:center;column-gap:.5rem;display:flex;height:2rem}@media (pointer:coarse){.prc-TreeView-TreeViewSkeletonItemContainerStyle-EB7p0{height:2.75rem}}.prc-TreeView-TreeViewSkeletonItemContainerStyle-EB7p0:nth-of-type(5n+1){--tree-item-loading-width:67%}.prc-TreeView-TreeViewSkeletonItemContainerStyle-EB7p0:nth-of-type(5n+2){--tree-item-loading-width:47%}.prc-TreeView-TreeViewSkeletonItemContainerStyle-EB7p0:nth-of-type(5n+3){--tree-item-loading-width:73%}.prc-TreeView-TreeViewSkeletonItemContainerStyle-EB7p0:nth-of-type(5n+4){--tree-item-loading-width:64%}.prc-TreeView-TreeViewSkeletonItemContainerStyle-EB7p0:nth-of-type(5n+5){--tree-item-loading-width:50%}.prc-TreeView-TreeItemSkeletonTextStyles-wnBY9{width:var(--tree-item-loading-width,67%)}
2
- /*# sourceMappingURL=TreeView-cd08cabc.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/TreeView/TreeView.module.css"],"names":[],"mappings":"AAAA,yCAGE,eAAgB,CADhB,QAAS,CADT,SAqOF,CApNE,0EACE,YAgBF,CAdE,kMAEE,kGAOF,CALE,8BAJF,kMAKI,+BAAgC,CAEhC,iBAEJ,CADE,CAGF,wGACE,sBACF,CAGF,mFACE,SAAU,CACV,mBAAoB,CACpB,sBAAuB,CAQvB,gDAAyC,CAFzC,oDAA6B,CAC7B,cAAe,CAJf,YAAa,CAEb,8CAAuC,CAKvC,yDAA0D,CAD1D,6FAA8F,CAP9F,iBAAkB,CAElB,UAAW,CAQX,gEAAmE,CACnE,+DAwBF,CAtBE,8FACE,wGAMF,CAJE,8BAHF,8FAII,6BAA8B,CAC9B,mBAEJ,CADE,CAGF,wBA3BF,mFA4BI,qBAAsB,CACtB,yBAWJ,CAVE,CAEA,4IAEE,4BAA6B,CAD7B,cAMF,CAHE,8BAJF,4IAKI,YAEJ,CADE,CAIJ,kHACE,+BACF,CAEA,uIACE,8GAwBF,CApBE,kJAaE,6DAAuC,CACvC,gDAAyC,CARzC,UAAW,CADX,aAAc,CAFd,sCAAmC,CAFnC,iBAAkB,CAClB,0CAAoC,CAEpC,YAeF,CAHE,8BAhBF,kJAiBI,8BAEJ,CADE,CAIJ,gFAWE,sBAAuB,CAHvB,gDAA2B,CAP3B,YAAa,CAQb,gBAAiB,CAPjB,WAAY,CAQZ,sBAAuB,CAHvB,yEAKF,CAEA,2FACE,wGACF,CAEA,mFAEE,4DAAqD,CADrD,yDAEF,CAEA,iFACE,YAAa,CAWb,oCAA+B,CAD/B,iBAAkB,CATlB,WAAY,CAQZ,+EAAkF,CAPlF,kCAA6B,CAM7B,mFAAsF,CAFtF,gFAMF,CAEA,qFACE,aAAc,CACd,OACF,CAEA,sHACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAEA,uHAEE,qBACF,CAEA,gFAOE,kBAAmB,CADnB,gDAA2B,CAL3B,YAAa,CAIb,uCAGF,CAEA,uFAEE,gDAA2B,CAD3B,YAAa,CAEb,uBAKF,CAHE,mGACE,aACF,CAGF,mFAQE,+DAAsC,CACtC,mDAA2C,CAP3C,WAAY,CADZ,UASF,CAQA,qBACE,mFACE,wBACF,CAEA,yLAEE,+DACF,CACF,CAEA,mFAEE,iGAAuD,CADvD,YAEF,CAEA,oFAGE,UAAW,CAGX,WAAY,CACZ,eAAgB,CAHhB,SAAU,CAHV,iBAAkB,CAClB,SAAU,CAMV,kBAAsB,CAEtB,cAAe,CADf,kBAEF,CAGF,uDAEE,kBAAmB,CACnB,gBAAkB,CAFlB,YAAa,CAGb,WAyBF,CAvBE,wBANF,uDAOI,cAsBJ,CArBE,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAGF,+CACE,wCACF","file":"TreeView-cd08cabc.css","sourcesContent":[".TreeViewRootUlStyles {\n padding: 0;\n margin: 0;\n list-style: none;\n\n /*\n * WARNING: This is a performance optimization.\n *\n * We define styles for the tree items at the root level of the tree\n * to avoid recomputing the styles for each item when the tree updates.\n * We're sacrificing maintainability for performance because TreeView\n * needs to be performant enough to handle large trees (thousands of items).\n *\n * This is intended to be a temporary solution until we can improve the\n * performance of our styling patterns.\n *\n * Do NOT copy this pattern without understanding the tradeoffs.\n */\n .TreeViewItem {\n outline: none;\n\n &:focus-visible > div,\n &:global(.focus-visible) > div {\n box-shadow: var(--boxShadow-thick) var(--fgColor-accent);\n\n @media (forced-colors: active) {\n outline: 2px solid HighlightText;\n /* stylelint-disable-next-line declaration-property-value-no-unknown */\n outline-offset: -2;\n }\n }\n\n &[data-has-leading-action] {\n --has-leading-action: 1;\n }\n }\n\n .TreeViewItemContainer {\n --level: 1;\n --toggle-width: 1rem;\n --min-item-height: 2rem;\n\n position: relative;\n display: grid;\n width: 100%;\n font-size: var(--text-body-size-medium);\n color: var(--fgColor-default);\n cursor: pointer;\n border-radius: var(--borderRadius-medium);\n grid-template-columns: var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr;\n grid-template-areas: 'spacer leadingAction toggle content';\n\n --leading-action-width: calc(var(--has-leading-action, 0) * 1.5rem);\n --spacer-width: calc(calc(var(--level) - 1) * (var(--toggle-width) / 2));\n\n &:hover {\n background-color: var(--control-transparent-bgColor-hover);\n\n @media (forced-colors: active) {\n outline: 2px solid transparent;\n outline-offset: -2px;\n }\n }\n\n @media (pointer: coarse) {\n --toggle-width: 1.5rem;\n --min-item-height: 2.75rem;\n }\n\n &:has(.TreeViewItemSkeleton):hover {\n cursor: default;\n background-color: transparent;\n\n @media (forced-colors: active) {\n outline: none;\n }\n }\n }\n\n &:where([data-omit-spacer='true']) .TreeViewItemContainer {\n grid-template-columns: 0 0 0 1fr;\n }\n\n .TreeViewItem[aria-current='true'] > .TreeViewItemContainer {\n background-color: var(--control-transparent-bgColor-selected);\n\n /* Current item indicator */\n /* stylelint-disable-next-line selector-max-specificity */\n &::after {\n position: absolute;\n top: calc(50% - var(--base-size-12));\n left: calc(-1 * var(--base-size-8));\n width: 0.25rem;\n height: 1.5rem;\n content: '';\n\n /*\n * Use fgColor accent for consistency across all themes. Using the \"correct\" variable,\n * --bgColor-accent-emphasis, causes vrt failures for dark high contrast mode\n */\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--fgColor-accent);\n border-radius: var(--borderRadius-medium);\n\n @media (forced-colors: active) {\n background-color: HighlightText;\n }\n }\n }\n\n .TreeViewItemToggle {\n display: flex;\n height: 100%;\n\n /* The toggle should appear vertically centered for single-line items, but remain at the top for items that wrap\n across more lines. */\n /* stylelint-disable-next-line primer/spacing */\n padding-top: calc(var(--min-item-height) / 2 - var(--base-size-12) / 2);\n color: var(--fgColor-muted);\n grid-area: toggle;\n justify-content: center;\n align-items: flex-start;\n }\n\n .TreeViewItemToggleHover:hover {\n background-color: var(--control-transparent-bgColor-hover);\n }\n\n .TreeViewItemToggleEnd {\n border-top-left-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n\n .TreeViewItemContent {\n display: flex;\n height: 100%;\n padding: 0 var(--base-size-8);\n\n /* The dynamic top and bottom padding to maintain the minimum item height for single line items */\n /* stylelint-disable-next-line primer/spacing */\n padding-top: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);\n /* stylelint-disable-next-line primer/spacing */\n padding-bottom: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);\n line-height: var(--custom-line-height, var(--text-body-lineHeight-medium, 1.4285));\n grid-area: content;\n gap: var(--stack-gap-condensed);\n }\n\n .TreeViewItemContentText {\n flex: 1 1 auto;\n width: 0;\n }\n\n &:where([data-truncate-text='true']) .TreeViewItemContentText {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &:where([data-truncate-text='false']) .TreeViewItemContentText {\n /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */\n word-break: break-word;\n }\n\n .TreeViewItemVisual {\n display: flex;\n\n /* The visual icons should appear vertically centered for single-line items, but remain at the top for items that wrap\n across more lines. */\n height: var(--custom-line-height, 1.3rem);\n color: var(--fgColor-muted);\n align-items: center;\n }\n\n .TreeViewItemLeadingAction {\n display: flex;\n color: var(--fgColor-muted);\n grid-area: leadingAction;\n\n & > button {\n flex-shrink: 1;\n }\n }\n\n .TreeViewItemLevelLine {\n width: 100%;\n height: 100%;\n\n /*\n * On devices without hover, the nesting indicator lines\n * appear at all times.\n */\n border-color: var(--borderColor-muted);\n border-right: var(--borderWidth-thin) solid;\n }\n\n /*\n * On devices with :hover support, the nesting indicator lines\n * fade in when the user mouses over the entire component,\n * or when there's focus inside the component. This makes\n * sure the component remains simple when not in use.\n */\n @media (hover: hover) {\n .TreeViewItemLevelLine {\n border-color: transparent;\n }\n\n &:hover .TreeViewItemLevelLine,\n &:focus-within .TreeViewItemLevelLine {\n border-color: var(--borderColor-muted);\n }\n }\n\n .TreeViewDirectoryIcon {\n display: grid;\n color: var(--treeViewItem-leadingVisual-iconColor-rest);\n }\n\n .TreeViewVisuallyHidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n /* stylelint-disable-next-line primer/spacing */\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n}\n\n.TreeViewSkeletonItemContainerStyle {\n display: flex;\n align-items: center;\n column-gap: 0.5rem;\n height: 2rem;\n\n @media (pointer: coarse) {\n height: 2.75rem;\n }\n\n &:nth-of-type(5n + 1) {\n --tree-item-loading-width: 67%;\n }\n\n &:nth-of-type(5n + 2) {\n --tree-item-loading-width: 47%;\n }\n\n &:nth-of-type(5n + 3) {\n --tree-item-loading-width: 73%;\n }\n\n &:nth-of-type(5n + 4) {\n --tree-item-loading-width: 64%;\n }\n\n &:nth-of-type(5n + 5) {\n --tree-item-loading-width: 50%;\n }\n}\n\n.TreeItemSkeletonTextStyles {\n width: var(--tree-item-loading-width, 67%);\n}\n"]}
@@ -1,2 +0,0 @@
1
- .prc-components-Caret-PNu-B{pointer-events:none;position:absolute}.prc-components-CaretTriangle-Iu0GY{fill:var(--caret-bg,var(--bgColor-default,var(--color-canvas-default)))}.prc-components-CaretBorder-o3vP2{fill:none;stroke:var(--caret-border-color,var(--borderColor-default,var(--color-border-default)));stroke-width:var(--caret-border-width,var(--borderWidth-thin,.0625rem))}
2
- /*# sourceMappingURL=Caret-e686f04c.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/internal/components/Caret.module.css"],"names":[],"mappings":"AAAA,4BACE,mBAAoB,CACpB,iBACF,CAEA,oCAEE,uEACF,CAEA,kCACE,SAAU,CAEV,uFAA6D,CAC7D,uEACF","file":"Caret-e686f04c.css","sourcesContent":[".Caret {\n pointer-events: none;\n position: absolute;\n}\n\n.CaretTriangle {\n /* stylelint-disable-next-line primer/colors */\n fill: var(--caret-bg, var(--bgColor-default));\n}\n\n.CaretBorder {\n fill: none;\n /* stylelint-disable-next-line primer/colors */\n stroke: var(--caret-border-color, var(--borderColor-default));\n stroke-width: var(--caret-border-width, var(--borderWidth-thin));\n}\n"]}
@@ -1,87 +0,0 @@
1
- import classes from './Caret.module.css.js';
2
- import { jsx, jsxs } from 'react/jsx-runtime';
3
-
4
- const oppositeEdge = {
5
- top: 'Bottom',
6
- right: 'Left',
7
- bottom: 'Top',
8
- left: 'Right'
9
- };
10
- const perpendicularEdge = {
11
- top: 'Left',
12
- right: 'Top',
13
- bottom: 'Left',
14
- left: 'Top'
15
- };
16
- function getEdgeAlign(location) {
17
- const [edge, align] = location.split('-');
18
- return [edge, align];
19
- }
20
- function getPosition(edge, align, spacing) {
21
- const opposite = oppositeEdge[edge].toLowerCase();
22
- const perp = perpendicularEdge[edge].toLowerCase();
23
- return {
24
- [opposite]: '100%',
25
- [align || perp]: align ? spacing : '50%'
26
- };
27
- }
28
- function Caret(props) {
29
- const {
30
- bg,
31
- borderColor,
32
- borderWidth,
33
- size = 8,
34
- location = 'bottom'
35
- } = props;
36
- const [edge, align] = getEdgeAlign(location);
37
- const perp = perpendicularEdge[edge];
38
-
39
- // note: these arrays represent points in the form [x, y]
40
- const a = [-size, 0];
41
- const b = [0, size];
42
- const c = [size, 0];
43
-
44
- // spaces are optional in path `d` attribute, and points are
45
- // represented in the form `x,y` -- which is what the arrays above
46
- // become when stringified!
47
- const triangle = `M${a}L${b}L${c}L${a}Z`;
48
- const line = `M${a}L${b}L${c}`;
49
- const transform = {
50
- top: `translate(${[size, size * 2]}) rotate(180)`,
51
- right: `translate(${[0, size]}) rotate(-90)`,
52
- bottom: `translate(${[size, 0]})`,
53
- left: `translate(${[size * 2, size]}) rotate(90)`
54
- }[edge];
55
- return /*#__PURE__*/jsx("svg", {
56
- className: classes.Caret,
57
- width: size * 2,
58
- height: size * 2,
59
- style: {
60
- ...getPosition(edge, align, size),
61
- // if align is set (top|right|bottom|left),
62
- // then we don't need an offset margin
63
- [`margin${perp}`]: align ? null : -size,
64
- ...{
65
- '--caret-bg': bg,
66
- '--caret-border-color': borderColor,
67
- '--caret-border-width': borderWidth
68
- }
69
- },
70
- role: "presentation",
71
- children: /*#__PURE__*/jsxs("g", {
72
- className: classes.CaretGroup,
73
- transform: transform,
74
- children: [/*#__PURE__*/jsx("path", {
75
- d: triangle,
76
- className: classes.CaretTriangle
77
- }), /*#__PURE__*/jsx("path", {
78
- d: line,
79
- className: classes.CaretBorder
80
- })]
81
- })
82
- });
83
- }
84
- Caret.displayName = "Caret";
85
- Caret.locations = ['top', 'top-left', 'top-right', 'right', 'right-top', 'right-bottom', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-top', 'left-bottom'];
86
-
87
- export { Caret as default };
@@ -1,5 +0,0 @@
1
- import './Caret-e686f04c.css';
2
-
3
- var classes = {"Caret":"prc-components-Caret-PNu-B","CaretTriangle":"prc-components-CaretTriangle-Iu0GY","CaretBorder":"prc-components-CaretBorder-o3vP2"};
4
-
5
- export { classes as default };