@primer/react 38.36.0 → 38.37.0-rc.0b6dd7e38

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 (22) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/ActionList/Item.js +5 -4
  3. package/dist/AnchoredOverlay/AnchoredOverlay.js +5 -3
  4. package/dist/InlineMessage/InlineMessage.js +11 -10
  5. package/dist/LabelGroup/LabelGroup.js +6 -4
  6. package/dist/SegmentedControl/SegmentedControl-4ef72733.css +2 -0
  7. package/dist/SegmentedControl/SegmentedControl-4ef72733.css.map +1 -0
  8. package/dist/SegmentedControl/SegmentedControl.js +9 -5
  9. package/dist/SegmentedControl/SegmentedControl.module.css.js +1 -1
  10. package/dist/Textarea/{TextArea-53e27580.css → TextArea-2dc51d35.css} +2 -2
  11. package/dist/Textarea/TextArea-2dc51d35.css.map +1 -0
  12. package/dist/Textarea/TextArea.module.css.js +1 -1
  13. package/dist/Textarea/Textarea.d.ts +8 -0
  14. package/dist/Textarea/Textarea.js +128 -121
  15. package/dist/hooks/useFocusTrap.js +9 -7
  16. package/dist/hooks/useFocusZone.js +16 -14
  17. package/dist/hooks/useMenuInitialFocus.js +4 -3
  18. package/generated/components.json +6 -0
  19. package/package.json +7 -7
  20. package/dist/SegmentedControl/SegmentedControl-de65527b.css +0 -2
  21. package/dist/SegmentedControl/SegmentedControl-de65527b.css.map +0 -1
  22. package/dist/Textarea/TextArea-53e27580.css.map +0 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # @primer/react
2
2
 
3
+ ## 38.37.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#8295](https://github.com/primer/react/pull/8295) [`bfebb8a`](https://github.com/primer/react/commit/bfebb8a538e6f068a457722b154799876bda3ab4) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Textarea: Add an `autoSize` option that allows the field to grow with its content
8
+
9
+ ### Patch Changes
10
+
11
+ - [#8304](https://github.com/primer/react/pull/8304) [`88feb65`](https://github.com/primer/react/commit/88feb658c13fec154da1a8aa199250514f4fdba3) Thanks [@iansan5653](https://github.com/iansan5653)! - Animate `SegmentedControl` when switching between items
12
+
3
13
  ## 38.36.0
4
14
 
5
15
  ### Minor Changes
package/dist/ActionList/Item.js CHANGED
@@ -251,10 +251,11 @@ const UnwrappedItem = (t0, forwardedRef) => {
251
251
  const onSelect = t9;
252
252
  const selectionVariant = groupSelectionVariant ? groupSelectionVariant : listSelectionVariant;
253
253
  let inferredItemRole;
254
- if (container === "ActionMenu") if (selectionVariant === "single") inferredItemRole = "menuitemradio";
255
- else if (selectionVariant === "multiple") inferredItemRole = "menuitemcheckbox";
256
- else inferredItemRole = "menuitem";
257
- else if (listRole === "listbox") {
254
+ if (container === "ActionMenu") {
255
+ if (selectionVariant === "single") inferredItemRole = "menuitemradio";
256
+ else if (selectionVariant === "multiple") inferredItemRole = "menuitemcheckbox";
257
+ else inferredItemRole = "menuitem";
258
+ } else if (listRole === "listbox") {
258
259
  if (selectionVariant !== void 0 && !role) inferredItemRole = "option";
259
260
  } else if (listRole === "tablist") inferredItemRole = "tab";
260
261
  const itemRole = role || inferredItemRole;
package/dist/AnchoredOverlay/AnchoredOverlay.js CHANGED
@@ -236,9 +236,11 @@ function getDefaultPosition(anchorElement, overlayElement, fallbackWidth) {
236
236
  const overflowsX = overlayRect.right > vw || overlayRect.left < 0;
237
237
  const overflowsY = overlayRect.bottom > vh || overlayRect.top < 0;
238
238
  let suggestedSide;
239
- if (overflowsX && overflowsY) if (spaceLeft >= overlayWidth + margin) suggestedSide = "outside-left";
240
- else if (spaceRight >= overlayWidth + margin) suggestedSide = "outside-right";
241
- else suggestedSide = "outside-bottom";
239
+ if (overflowsX && overflowsY) {
240
+ if (spaceLeft >= overlayWidth + margin) suggestedSide = "outside-left";
241
+ else if (spaceRight >= overlayWidth + margin) suggestedSide = "outside-right";
242
+ else suggestedSide = "outside-bottom";
243
+ }
242
244
  let leftOffset;
243
245
  let rightOffset;
244
246
  if (spaceLeft < overlayWidth + margin && spaceRight < overlayWidth + margin) {
package/dist/InlineMessage/InlineMessage.js CHANGED
@@ -57,16 +57,17 @@ function InlineMessage(t0) {
57
57
  }
58
58
  const size = t1 === void 0 ? "medium" : t1;
59
59
  let icon;
60
- if (LeadingVisual !== void 0) if (typeof LeadingVisual !== "string" && isValidElementType(LeadingVisual)) {
61
- let t2;
62
- if ($[7] !== LeadingVisual) {
63
- t2 = /*#__PURE__*/ jsx(LeadingVisual, { className: InlineMessage_module_css_default.InlineMessageIcon });
64
- $[7] = LeadingVisual;
65
- $[8] = t2;
66
- } else t2 = $[8];
67
- icon = t2;
68
- } else icon = LeadingVisual;
69
- else if (variant) icon = size === "small" ? smallIcons[variant] : icons[variant];
60
+ if (LeadingVisual !== void 0) {
61
+ if (typeof LeadingVisual !== "string" && isValidElementType(LeadingVisual)) {
62
+ let t2;
63
+ if ($[7] !== LeadingVisual) {
64
+ t2 = /*#__PURE__*/ jsx(LeadingVisual, { className: InlineMessage_module_css_default.InlineMessageIcon });
65
+ $[7] = LeadingVisual;
66
+ $[8] = t2;
67
+ } else t2 = $[8];
68
+ icon = t2;
69
+ } else icon = LeadingVisual;
70
+ } else if (variant) icon = size === "small" ? smallIcons[variant] : icons[variant];
70
71
  else {
71
72
  let t2;
72
73
  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
package/dist/LabelGroup/LabelGroup.js CHANGED
@@ -181,10 +181,12 @@ const LabelGroup = ({ children, visibleChildCount, overflowStyle = "overlay", as
181
181
  if (overflowStyle === "overlay") return;
182
182
  const firstHiddenChildDOM = document.querySelector(`[data-index="${firstHiddenIndexRef.current}"]`);
183
183
  const focusableChild = firstHiddenChildDOM ? getFocusableChild(firstHiddenChildDOM) : null;
184
- if (isOverflowShown) if (focusableChild) focusableChild.focus();
185
- else {
186
- var _collapseButtonRef$cu;
187
- (_collapseButtonRef$cu = collapseButtonRef.current) === null || _collapseButtonRef$cu === void 0 || _collapseButtonRef$cu.focus();
184
+ if (isOverflowShown) {
185
+ if (focusableChild) focusableChild.focus();
186
+ else {
187
+ var _collapseButtonRef$cu;
188
+ (_collapseButtonRef$cu = collapseButtonRef.current) === null || _collapseButtonRef$cu === void 0 || _collapseButtonRef$cu.focus();
189
+ }
188
190
  }
189
191
  }, [overflowStyle, isOverflowShown]);
190
192
  const isList = Component === "ul" || Component === "ol";
package/dist/SegmentedControl/SegmentedControl-4ef72733.css ADDED
@@ -0,0 +1,2 @@
1
+ .prc-SegmentedControl-SegmentedControl-lqIXp{--segmented-control-icon-width:32px;--segmented-control-outer-radius:var(--borderRadius-medium,0.375rem);background-color:var(--controlTrack-bgColor-rest,#e6eaef);border:var(--borderWidth-thin,.0625rem) solid var(--controlTrack-borderColor-rest,transparent);border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;font-size:var(--text-body-size-medium,.875rem);height:32px;margin:0;padding:0;position:relative}@supports (anchor-name:--value){.prc-SegmentedControl-SegmentedControl-lqIXp:before{position-anchor:--segmented-control-current-item;background-color:var(--controlKnob-bgColor-rest,#fff);border:var(--borderWidth-thin,.0625rem) solid var(--controlKnob-borderColor-rest,#d1d9e0);border-radius:var(--segmented-control-outer-radius);content:"";inset:anchor(top) anchor(right) anchor(bottom) anchor(left);position:absolute}@media (prefers-reduced-motion:no-preference){.prc-SegmentedControl-SegmentedControl-lqIXp:before{transition:inset var(--base-duration-200,[ object Object ]) var(--base-easing-easeInOut,.6,0,.2,1)}}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-narrow=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-narrow=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-wide=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=true]:not([data-full-width-wide=true]),.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-wide=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-narrow=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-narrow=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-regular=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-regular=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-wide=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-wide=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-size=small]){font-size:var(--text-body-size-small,.75rem);height:28px}.prc-SegmentedControl-DropdownContainer-ZaPMn{display:none}.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant=dropdown]{display:block}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-narrow=dropdown]{display:block}}@media (min-width:48rem){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-regular=dropdown]{display:block}}@media (min-width:87.5rem){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-wide=dropdown]{display:block}}.prc-SegmentedControl-Item-tSCQh{display:block;flex-grow:1;margin-bottom:-1px;margin-top:-1px;position:relative}.prc-SegmentedControl-Item-tSCQh:not(:last-child){margin-right:1px}.prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:var(--borderColor-default,#d1d9e0);bottom:var(--base-size-8,.5rem);content:"";position:absolute;right:calc(var(--base-size-2,.125rem)*-1);top:var(--base-size-8,.5rem);width:1px}.prc-SegmentedControl-Item-tSCQh:not(:last-child):has(+[data-selected]):after,.prc-SegmentedControl-Item-tSCQh:not(:last-child):where([data-selected]):after{background-color:transparent}.prc-SegmentedControl-Item-tSCQh:first-child{margin-left:-1px}.prc-SegmentedControl-Item-tSCQh:last-child{margin-right:-1px}.prc-SegmentedControl-Item-tSCQh .prc-SegmentedControl-Counter-GmZOI{align-items:center;display:flex;margin-inline-start:var(--base-size-8,.5rem)}.prc-SegmentedControl-Button-E48xz{--segmented-control-button-inner-padding:12px;--segmented-control-button-bg-inset:4px;background-color:transparent;border-color:transparent;border-radius:var(--segmented-control-outer-radius);border-width:0;color:currentColor;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:var(--base-text-weight-normal,400);height:100%;padding:var(--segmented-control-button-bg-inset);width:100%}.prc-SegmentedControl-Button-E48xz svg{fill:var(--fgColor-muted,#59636e);color:var(--fgColor-muted,#59636e)}.prc-SegmentedControl-Button-E48xz:focus:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,#0969da);outline-offset:-1px}.prc-SegmentedControl-Button-E48xz:focus:not(:disabled):not(:focus-visible){outline:1px solid transparent}.prc-SegmentedControl-Button-E48xz:focus-visible:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,#0969da);outline-offset:-1px}.prc-SegmentedControl-Button-E48xz:focus:focus-visible:not(:last-child):after{width:0}.prc-SegmentedControl-Button-E48xz[aria-disabled=true]:not([aria-pressed=true]){background-color:transparent;color:var(--fgColor-disabled,#818b98);cursor:not-allowed}.prc-SegmentedControl-Button-E48xz[aria-disabled=true]:not([aria-pressed=true]) svg{fill:var(--fgColor-disabled,#818b98);color:var(--fgColor-disabled,#818b98)}@media (pointer:coarse){.prc-SegmentedControl-Button-E48xz:before{content:"";left:0;min-height:44px;position:absolute;right:0;top:50%;transform:translateY(-50%)}}.prc-SegmentedControl-IconButton-tlzDE{width:var(--segmented-control-icon-width,32px)}.prc-SegmentedControl-Content-1COlk{align-items:center;background-color:transparent;border-color:transparent;border-radius:calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset)/2);border-style:solid;border-width:var(--borderWidth-thin,.0625rem);display:flex;height:100%;justify-content:center;padding-left:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));padding-right:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));transition:background-color var(--base-duration-200,[ object Object ]) var(--base-easing-easeInOut,.6,0,.2,1)}.prc-SegmentedControl-Button-E48xz[aria-pressed=true]{font-weight:var(--base-text-weight-semibold,600);padding:0}.prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{padding-left:var(--segmented-control-button-inner-padding);padding-right:var(--segmented-control-button-inner-padding);anchor-name:--segmented-control-current-item}@supports not (anchor-name:--value){.prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--controlKnob-bgColor-rest,#fff);border-color:var(--controlKnob-borderColor-rest,#d1d9e0);border-radius:var(--segmented-control-outer-radius)}}.prc-SegmentedControl-Button-E48xz:not([aria-pressed=true],[aria-disabled=true]):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-hover,#e0e6eb)}.prc-SegmentedControl-Button-E48xz:not([aria-pressed=true],[aria-disabled=true]):active .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-active,#dae0e7)}.prc-SegmentedControl-Text-7S2y2:after{content:attr(data-text);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none;visibility:hidden}.prc-SegmentedControl-LeadingIcon-74n5s{margin-right:var(--base-size-4,.25rem)}
2
+ /*# sourceMappingURL=SegmentedControl-4ef72733.css.map */
package/dist/SegmentedControl/SegmentedControl-4ef72733.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/SegmentedControl/SegmentedControl.module.css.js"],"names":[],"mappings":"AAAA,6CAEE,mCAAoC,CACpC,oEAA4D,CAS5D,yDAAkD,CAClD,8FAAuF,CACvF,gDAAyC,CATzC,mBAAoB,CAMpB,8CAAuC,CAHvC,WAAY,CAEZ,QAAS,CADT,SAAU,CAMV,iBAsIF,CApIE,gCACE,oDACE,gDAAiD,CAIjD,qDAAiD,CACjD,yFAAyE,CAEzE,mDAAoD,CANpD,UAAW,CAEX,2DAA4D,CAD5D,iBAUF,CAHE,8CAVF,oDAWI,kGAEJ,CADE,CAEJ,CAGA,mEACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,oEACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CAEA,wCACE,0EACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,2EACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAEA,yBACE,2EACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,4EACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAEA,2BACE,wEACE,YAAa,CACb,UAAW,CAEX,mCACF,CASA,qLACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAQA,2KACE,YACF,CAEA,wCAKE,yLACE,YACF,CACF,CAEA,yBAKE,2LACE,YACF,CACF,CAEA,2BAKE,qLACE,YACF,CACF,CAEA,sEAGE,4CAAsC,CADtC,WAEF,CAGF,8CACE,YAwBF,CArBE,qEACE,aACF,CAEA,wCACE,4EACE,aACF,CACF,CAEA,yBACE,6EACE,aACF,CACF,CAEA,2BACE,0EACE,aACF,CACF,CAGF,iCAEE,aAAc,CAKd,WAAY,CADZ,kBAAmB,CAFnB,eAAgB,CAHhB,iBA6CF,CArCE,kDAEE,gBAkBF,CAhBE,wDAQE,mDAA4C,CAJ5C,+BAA0B,CAE1B,UAAW,CALX,iBAAkB,CAElB,yCAAoC,CADpC,4BAAuB,CAGvB,SAIF,CAGA,6JAEE,4BACF,CAGF,6CAEE,gBACF,CAEA,4CAEE,iBACF,CAEA,qEAGE,kBAAmB,CADnB,YAAa,CADb,4CAGF,CAGF,mCAEE,6CAA8C,CAC9C,uCAAwC,CAWxC,4BAA6B,CAC7B,wBAAyB,CAGzB,mDAAoD,CAFpD,cAAe,CAJf,kBAAmB,CACnB,cAAe,CAJf,mBAAoB,CACpB,iBAAkB,CAClB,8CAA2C,CAL3C,WAAY,CAEZ,gDAAiD,CAHjD,UAmEF,CApDE,uCACE,iCAA0B,CAC1B,kCACF,CAGA,wDAGE,eAAgB,CAFhB,sEAAuD,CACvD,mBAOF,CAHE,4EACE,6BACF,CAIF,gEAGE,eAAgB,CAFhB,sEAAuD,CACvD,mBAEF,CAGA,8EAEE,OACF,CAEA,gFAGE,4BAA6B,CAD7B,qCAA8B,CAD9B,kBAQF,CAJE,oFACE,oCAA6B,CAC7B,qCACF,CAGF,wBACE,0CAME,UAAW,CAFX,MAAO,CACP,eAAgB,CAJhB,iBAAkB,CAElB,OAAQ,CADR,OAAQ,CAKR,0BACF,CACF,CAGF,uCACE,8CACF,CAEA,oCAmBE,kBAAmB,CATnB,4BAA6B,CAH7B,wBAAyB,CAWzB,sGAAyG,CAVzG,kBAAmB,CACnB,6CAAqC,CARrC,YAAa,CACb,WAAY,CAkBZ,sBAAuB,CAdvB,2GAA4G,CAF5G,4GAA6G,CAO7G,6GAUF,CAEA,sDAEE,gDAA6C,CAD7C,SAiBF,CAdE,0FAIE,0DAA2D,CAF3D,2DAA4D,CAG5D,4CAQF,CANE,oCAPF,0FAQI,qDAAiD,CACjD,wDAAiD,CAEjD,mDAEJ,CADE,CAKF,2HACE,0DACF,CAEA,4HACE,2DACF,CAGF,uCAOE,uBAAwB,CANxB,aAAc,CAGd,gDAA6C,CAF7C,QAAS,CACT,eAAgB,CAEhB,mBAAoB,CAGpB,wBAAiB,CAAjB,gBAAiB,CAFjB,iBAGF,CAEA,wCACE,sCACF","file":"SegmentedControl-4ef72733.css","sourcesContent":[".SegmentedControl {\n /* TODO: use primitive `control.medium.size` when it is available instead of '32px' */\n --segmented-control-icon-width: 32px;\n --segmented-control-outer-radius: var(--borderRadius-medium);\n\n display: inline-flex;\n\n /* TODO: use primitive `control.{small|medium}.size` when it is available */\n height: 32px;\n padding: 0;\n margin: 0;\n font-size: var(--text-body-size-medium);\n background-color: var(--controlTrack-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent);\n border-radius: var(--borderRadius-medium);\n position: relative;\n\n @supports (anchor-name: --value) {\n &::before {\n position-anchor: --segmented-control-current-item;\n content: '';\n position: absolute;\n inset: anchor(top) anchor(right) anchor(bottom) anchor(left);\n background-color: var(--controlKnob-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n\n @media (prefers-reduced-motion: no-preference) {\n transition: inset var(--base-duration-200) var(--base-easing-easeInOut);\n }\n }\n }\n\n /* Responsive full-width */\n &[data-full-width='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n\n @media (--viewportRange-narrow) {\n &[data-full-width-narrow='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-narrow='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-full-width-regular='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-regular='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-full-width-wide='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-wide='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n\n &[data-full-width-regular='true']:not([data-full-width-wide='true']) {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n /* Hide when dropdown variant is active */\n &[data-variant='dropdown'] {\n display: none;\n }\n\n /* Handle hideLabels variant - hide button text */\n &[data-variant='hideLabels'] .Text {\n display: none;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: none;\n }\n\n &[data-variant-narrow='hideLabels'] .Text {\n display: none;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: none;\n }\n\n &[data-variant-regular='hideLabels'] .Text {\n display: none;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: none;\n }\n\n &[data-variant-wide='hideLabels'] .Text {\n display: none;\n }\n }\n\n &:where([data-size='small']) {\n /* TODO: use primitive `control.{small|medium}.size` when it is available */\n height: 28px;\n font-size: var(--text-body-size-small);\n }\n}\n\n.DropdownContainer {\n display: none;\n\n /* Show when dropdown variant is active */\n &[data-variant='dropdown'] {\n display: block;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: block;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: block;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: block;\n }\n }\n}\n\n.Item {\n position: relative;\n display: block;\n /* stylelint-disable-next-line primer/spacing */\n margin-top: -1px;\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: -1px;\n flex-grow: 1;\n\n &:not(:last-child) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: 1px;\n\n &::after {\n position: absolute;\n top: var(--base-size-8);\n right: calc(-1 * var(--base-size-2));\n bottom: var(--base-size-8);\n width: 1px;\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n &:has(+ [data-selected])::after,\n &:where([data-selected])::after {\n background-color: transparent;\n }\n }\n\n &:first-child {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: -1px;\n }\n\n &:last-child {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: -1px;\n }\n\n .Counter {\n margin-inline-start: var(--base-size-8);\n display: flex;\n align-items: center;\n }\n}\n\n.Button {\n /* TODO: use primitive `primer.control.medium.paddingInline.normal` when it is available */\n --segmented-control-button-inner-padding: 12px;\n --segmented-control-button-bg-inset: 4px;\n\n width: 100%;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--segmented-control-button-bg-inset);\n font-family: inherit;\n font-size: inherit;\n font-weight: var(--base-text-weight-normal);\n color: currentColor;\n cursor: pointer;\n background-color: transparent;\n border-color: transparent;\n border-width: 0;\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n\n & svg {\n fill: var(--fgColor-muted);\n color: var(--fgColor-muted);\n }\n\n /* fallback :focus state */\n &:focus:not(:disabled) {\n outline: var(--base-size-2) solid var(--fgColor-accent);\n outline-offset: -1px;\n box-shadow: none;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n }\n }\n\n /* default focus state */\n &:focus-visible:not(:disabled) {\n outline: var(--base-size-2) solid var(--fgColor-accent);\n outline-offset: -1px;\n box-shadow: none;\n }\n\n /* stylelint-disable-next-line selector-max-specificity */\n &:focus:focus-visible:not(:last-child)::after {\n /* fixes an issue where the focus outline shows over the pseudo-element */\n width: 0;\n }\n\n &[aria-disabled='true']:not([aria-pressed='true']) {\n cursor: not-allowed;\n color: var(--fgColor-disabled);\n background-color: transparent;\n\n & svg {\n fill: var(--fgColor-disabled);\n color: var(--fgColor-disabled);\n }\n }\n\n @media (pointer: coarse) {\n &::before {\n position: absolute;\n top: 50%;\n right: 0;\n left: 0;\n min-height: 44px;\n content: '';\n transform: translateY(-50%);\n }\n }\n}\n\n.IconButton {\n width: var(--segmented-control-icon-width, 32px);\n}\n\n.Content {\n display: flex;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n padding-right: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n /* stylelint-disable-next-line primer/spacing */\n padding-left: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n border-color: transparent;\n border-style: solid;\n border-width: var(--borderWidth-thin);\n background-color: transparent;\n transition: background-color var(--base-duration-200) var(--base-easing-easeInOut);\n\n /*\n innerRadius = outerRadius - distance/2\n https://stackoverflow.com/questions/2932146/math-problem-determine-the-corner-radius-of-an-inner-border-based-on-outer-corn\n */\n /* stylelint-disable-next-line primer/borders */\n border-radius: calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset) / 2);\n align-items: center;\n justify-content: center;\n}\n\n.Button[aria-pressed='true'] {\n padding: 0;\n font-weight: var(--base-text-weight-semibold);\n\n .Content {\n /* stylelint-disable-next-line primer/spacing */\n padding-right: var(--segmented-control-button-inner-padding);\n /* stylelint-disable-next-line primer/spacing */\n padding-left: var(--segmented-control-button-inner-padding);\n anchor-name: --segmented-control-current-item;\n\n @supports not (anchor-name: --value) {\n background-color: var(--controlKnob-bgColor-rest);\n border-color: var(--controlKnob-borderColor-rest);\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n }\n }\n}\n\n.Button:not([aria-pressed='true'], [aria-disabled='true']) {\n &:hover .Content {\n background-color: var(--controlTrack-bgColor-hover);\n }\n\n &:active .Content {\n background-color: var(--controlTrack-bgColor-active);\n }\n}\n\n.Text::after {\n display: block;\n height: 0;\n overflow: hidden;\n font-weight: var(--base-text-weight-semibold);\n pointer-events: none;\n visibility: hidden;\n content: attr(data-text);\n user-select: none;\n}\n\n.LeadingIcon {\n margin-right: var(--base-size-4);\n}\n"]}
package/dist/SegmentedControl/SegmentedControl.js CHANGED
@@ -235,12 +235,16 @@ function _temp4(childArg) {
235
235
  if (/*#__PURE__*/ React.isValidElement(childArg) && (childArg.type === SegmentedControlButton || isSlot(childArg, SegmentedControlButton))) {
236
236
  var _childArg$props$leadi;
237
237
  const leadingVisual = (_childArg$props$leadi = childArg.props.leadingVisual) !== null && _childArg$props$leadi !== void 0 ? _childArg$props$leadi : childArg.props.leadingIcon;
238
- if (leadingVisual) if (isElement(leadingVisual)) return leadingVisual;
239
- else return /*#__PURE__*/ jsx(leadingVisual, {});
238
+ if (leadingVisual) {
239
+ if (isElement(leadingVisual)) return leadingVisual;
240
+ else return /*#__PURE__*/ jsx(leadingVisual, {});
241
+ }
240
242
  }
241
- if (/*#__PURE__*/ React.isValidElement(childArg) && (childArg.type === SegmentedControlIconButton || isSlot(childArg, SegmentedControlIconButton))) if (isElement(childArg.props.icon)) {} else {
242
- const Icon = childArg.props.icon;
243
- return /*#__PURE__*/ jsx(Icon, {});
243
+ if (/*#__PURE__*/ React.isValidElement(childArg) && (childArg.type === SegmentedControlIconButton || isSlot(childArg, SegmentedControlIconButton))) {
244
+ if (isElement(childArg.props.icon)) {} else {
245
+ const Icon = childArg.props.icon;
246
+ return /*#__PURE__*/ jsx(Icon, {});
247
+ }
244
248
  }
245
249
  return null;
246
250
  }
package/dist/SegmentedControl/SegmentedControl.module.css.js CHANGED
@@ -1,4 +1,4 @@
1
- import "./SegmentedControl-de65527b.css";
1
+ import "./SegmentedControl-4ef72733.css";
2
2
  //#region src/SegmentedControl/SegmentedControl.module.css.js
3
3
  var SegmentedControl_module_css_default = {
4
4
  "SegmentedControl": "prc-SegmentedControl-SegmentedControl-lqIXp",
package/dist/Textarea/{TextArea-53e27580.css → TextArea-2dc51d35.css} RENAMED
@@ -1,2 +1,2 @@
1
- .prc-Textarea-TextArea-snlco{appearance:none;background-color:transparent;border:0;color:inherit;font-family:inherit;font-size:inherit;resize:both;width:100%}.prc-Textarea-TextArea-snlco:focus{outline:0}.prc-Textarea-TextArea-snlco[data-resize=none]{resize:none}.prc-Textarea-TextArea-snlco[data-resize=both]{resize:both}.prc-Textarea-TextArea-snlco[data-resize=horizontal]{resize:horizontal}.prc-Textarea-TextArea-snlco[data-resize=vertical]{resize:vertical}.prc-Textarea-TextArea-snlco:disabled{resize:none}.prc-Textarea-CharacterCounter-qnOXd{align-items:center;color:var(--fgColor-muted,#59636e);display:flex;gap:var(--control-xsmall-gap,.25rem)}.prc-Textarea-CharacterCounter--error-eewrs{color:var(--fgColor-danger,#d1242f)}
2
- /*# sourceMappingURL=TextArea-53e27580.css.map */
1
+ .prc-Textarea-TextArea-snlco{appearance:none;background-color:transparent;border:0;color:inherit;font-family:inherit;font-size:inherit;resize:both;width:100%}.prc-Textarea-TextArea-snlco:focus{outline:0}.prc-Textarea-TextArea-snlco[data-resize=none]{resize:none}.prc-Textarea-TextArea-snlco[data-resize=both]{resize:both}.prc-Textarea-TextArea-snlco[data-resize=horizontal]{resize:horizontal}.prc-Textarea-TextArea-snlco[data-resize=vertical]{resize:vertical}.prc-Textarea-TextArea-snlco[data-auto-size=true]{field-sizing:content}.prc-Textarea-TextArea-snlco:disabled{resize:none}.prc-Textarea-CharacterCounter-qnOXd{align-items:center;color:var(--fgColor-muted,#59636e);display:flex;gap:var(--control-xsmall-gap,.25rem)}.prc-Textarea-CharacterCounter--error-eewrs{color:var(--fgColor-danger,#d1242f)}
2
+ /*# sourceMappingURL=TextArea-2dc51d35.css.map */
package/dist/Textarea/TextArea-2dc51d35.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/Textarea/TextArea.module.css.js"],"names":[],"mappings":"AAAA,6BAQE,eAAgB,CAFhB,4BAA6B,CAC7B,QAAS,CAHT,aAAc,CAFd,mBAAoB,CACpB,iBAAkB,CAElB,WAAY,CAJZ,UAQF,CAEA,mCACE,SACF,CAEA,+CACE,WACF,CAEA,+CACE,WACF,CAEA,qDACE,iBACF,CAEA,mDACE,eACF,CAEA,kDACE,oBACF,CAEA,sCACE,WACF,CAEA,qCAEE,kBAAmB,CAEnB,kCAA2B,CAH3B,YAAa,CAEb,oCAEF,CAEA,4CACE,mCACF","file":"TextArea-2dc51d35.css","sourcesContent":[".TextArea {\n width: 100%;\n font-family: inherit;\n font-size: inherit;\n color: inherit;\n resize: both;\n background-color: transparent;\n border: 0;\n appearance: none;\n}\n\n.TextArea:focus {\n outline: 0;\n}\n\n.TextArea[data-resize='none'] {\n resize: none;\n}\n\n.TextArea[data-resize='both'] {\n resize: both;\n}\n\n.TextArea[data-resize='horizontal'] {\n resize: horizontal;\n}\n\n.TextArea[data-resize='vertical'] {\n resize: vertical;\n}\n\n.TextArea[data-auto-size='true'] {\n field-sizing: content;\n}\n\n.TextArea:disabled {\n resize: none;\n}\n\n.CharacterCounter {\n display: flex;\n align-items: center;\n gap: var(--control-xsmall-gap);\n color: var(--fgColor-muted);\n}\n\n.CharacterCounter--error {\n color: var(--fgColor-danger);\n}\n"]}
package/dist/Textarea/TextArea.module.css.js CHANGED
@@ -1,4 +1,4 @@
1
- import "./TextArea-53e27580.css";
1
+ import "./TextArea-2dc51d35.css";
2
2
  //#region src/Textarea/TextArea.module.css.js
3
3
  var TextArea_module_css_default = {
4
4
  "TextArea": "prc-Textarea-TextArea-snlco",
package/dist/Textarea/Textarea.d.ts CHANGED
@@ -20,6 +20,10 @@ type TextareaProps = {
20
20
  * Allows resizing of the textarea
21
21
  */
22
22
  resize?: 'none' | 'both' | 'horizontal' | 'vertical';
23
+ /**
24
+ * Allows the textarea to grow to fit its content
25
+ */
26
+ autoSize?: boolean;
23
27
  /**
24
28
  * apply a high contrast color to background
25
29
  */
@@ -67,6 +71,10 @@ declare const Textarea: React.ForwardRefExoticComponent<{
67
71
  * Allows resizing of the textarea
68
72
  */
69
73
  resize?: "none" | "both" | "horizontal" | "vertical";
74
+ /**
75
+ * Allows the textarea to grow to fit its content
76
+ */
77
+ autoSize?: boolean;
70
78
  /**
71
79
  * apply a high contrast color to background
72
80
  */
package/dist/Textarea/Textarea.js CHANGED
@@ -16,7 +16,8 @@ const DEFAULT_TEXTAREA_RESIZE = "both";
16
16
  * This component accepts all native HTML <textarea> attributes as props.
17
17
  */
18
18
  const Textarea = /*#__PURE__*/ React.forwardRef((t0, ref) => {
19
- const $ = c(76);
19
+ const $ = c(79);
20
+ let autoSize;
20
21
  let block;
21
22
  let characterLimit;
22
23
  let className;
@@ -35,43 +36,45 @@ const Textarea = /*#__PURE__*/ React.forwardRef((t0, ref) => {
35
36
  let validationStatus;
36
37
  let value;
37
38
  if ($[0] !== t0) {
38
- ({value, disabled, required, validationStatus, rows: t1, cols: t2, resize: t3, block, contrast, className, minHeight, maxHeight, style, characterLimit, onChange, defaultValue, ...rest} = t0);
39
+ ({value, disabled, required, validationStatus, rows: t1, cols: t2, resize: t3, autoSize, block, contrast, className, minHeight, maxHeight, style, characterLimit, onChange, defaultValue, ...rest} = t0);
39
40
  $[0] = t0;
40
- $[1] = block;
41
- $[2] = characterLimit;
42
- $[3] = className;
43
- $[4] = contrast;
44
- $[5] = defaultValue;
45
- $[6] = disabled;
46
- $[7] = maxHeight;
47
- $[8] = minHeight;
48
- $[9] = onChange;
49
- $[10] = required;
50
- $[11] = rest;
51
- $[12] = style;
52
- $[13] = t1;
53
- $[14] = t2;
54
- $[15] = t3;
55
- $[16] = validationStatus;
56
- $[17] = value;
41
+ $[1] = autoSize;
42
+ $[2] = block;
43
+ $[3] = characterLimit;
44
+ $[4] = className;
45
+ $[5] = contrast;
46
+ $[6] = defaultValue;
47
+ $[7] = disabled;
48
+ $[8] = maxHeight;
49
+ $[9] = minHeight;
50
+ $[10] = onChange;
51
+ $[11] = required;
52
+ $[12] = rest;
53
+ $[13] = style;
54
+ $[14] = t1;
55
+ $[15] = t2;
56
+ $[16] = t3;
57
+ $[17] = validationStatus;
58
+ $[18] = value;
57
59
  } else {
58
- block = $[1];
59
- characterLimit = $[2];
60
- className = $[3];
61
- contrast = $[4];
62
- defaultValue = $[5];
63
- disabled = $[6];
64
- maxHeight = $[7];
65
- minHeight = $[8];
66
- onChange = $[9];
67
- required = $[10];
68
- rest = $[11];
69
- style = $[12];
70
- t1 = $[13];
71
- t2 = $[14];
72
- t3 = $[15];
73
- validationStatus = $[16];
74
- value = $[17];
60
+ autoSize = $[1];
61
+ block = $[2];
62
+ characterLimit = $[3];
63
+ className = $[4];
64
+ contrast = $[5];
65
+ defaultValue = $[6];
66
+ disabled = $[7];
67
+ maxHeight = $[8];
68
+ minHeight = $[9];
69
+ onChange = $[10];
70
+ required = $[11];
71
+ rest = $[12];
72
+ style = $[13];
73
+ t1 = $[14];
74
+ t2 = $[15];
75
+ t3 = $[16];
76
+ validationStatus = $[17];
77
+ value = $[18];
75
78
  }
76
79
  const rows = t1 === void 0 ? 7 : t1;
77
80
  const cols = t2 === void 0 ? 30 : t2;
@@ -80,106 +83,109 @@ const Textarea = /*#__PURE__*/ React.forwardRef((t0, ref) => {
80
83
  const characterCountStaticMessageId = useId();
81
84
  const isControlled = value !== void 0;
82
85
  let t4;
83
- if ($[18] !== defaultValue) {
86
+ if ($[19] !== defaultValue) {
84
87
  t4 = () => defaultValue !== void 0 ? String(defaultValue).length : 0;
85
- $[18] = defaultValue;
86
- $[19] = t4;
87
- } else t4 = $[19];
88
+ $[19] = defaultValue;
89
+ $[20] = t4;
90
+ } else t4 = $[20];
88
91
  const [uncontrolledLength, setUncontrolledLength] = useState(t4);
89
92
  const currentLength = isControlled ? String(value).length : uncontrolledLength;
90
93
  let t5;
91
- if ($[20] !== block || $[21] !== characterCountId || $[22] !== characterCountStaticMessageId || $[23] !== characterLimit || $[24] !== className || $[25] !== cols || $[26] !== contrast || $[27] !== currentLength || $[28] !== defaultValue || $[29] !== disabled || $[30] !== isControlled || $[31] !== maxHeight || $[32] !== minHeight || $[33] !== onChange || $[34] !== ref || $[35] !== required || $[36] !== resize || $[37] !== rest || $[38] !== rows || $[39] !== style || $[40] !== validationStatus || $[41] !== value) {
94
+ if ($[21] !== autoSize || $[22] !== block || $[23] !== characterCountId || $[24] !== characterCountStaticMessageId || $[25] !== characterLimit || $[26] !== className || $[27] !== cols || $[28] !== contrast || $[29] !== currentLength || $[30] !== defaultValue || $[31] !== disabled || $[32] !== isControlled || $[33] !== maxHeight || $[34] !== minHeight || $[35] !== onChange || $[36] !== ref || $[37] !== required || $[38] !== resize || $[39] !== rest || $[40] !== rows || $[41] !== style || $[42] !== validationStatus || $[43] !== value) {
92
95
  var _counter$isOverLimit;
93
96
  const counter = characterLimit ? getCharacterCountState(currentLength, characterLimit) : void 0;
94
97
  const isOverLimit = (_counter$isOverLimit = counter === null || counter === void 0 ? void 0 : counter.isOverLimit) !== null && _counter$isOverLimit !== void 0 ? _counter$isOverLimit : false;
95
98
  let t6;
96
- if ($[43] !== characterLimit || $[44] !== isControlled || $[45] !== onChange) {
99
+ if ($[45] !== characterLimit || $[46] !== isControlled || $[47] !== onChange) {
97
100
  t6 = (e) => {
98
101
  var _onChange;
99
102
  if (characterLimit && !isControlled) setUncontrolledLength(e.target.value.length);
100
103
  (_onChange = onChange) === null || _onChange === void 0 || _onChange(e);
101
104
  };
102
- $[43] = characterLimit;
103
- $[44] = isControlled;
104
- $[45] = onChange;
105
- $[46] = t6;
106
- } else t6 = $[46];
105
+ $[45] = characterLimit;
106
+ $[46] = isControlled;
107
+ $[47] = onChange;
108
+ $[48] = t6;
109
+ } else t6 = $[48];
107
110
  const handleTextareaChange = t6;
108
111
  const isValid = isOverLimit ? "error" : validationStatus;
109
- const t7 = isValid === "error" ? "true" : "false";
110
- let t8;
111
- if ($[47] !== maxHeight || $[48] !== minHeight || $[49] !== style) {
112
- t8 = {
112
+ const t7 = autoSize || void 0;
113
+ const t8 = isValid === "error" ? "true" : "false";
114
+ let t9;
115
+ if ($[49] !== maxHeight || $[50] !== minHeight || $[51] !== style) {
116
+ t9 = {
113
117
  minHeight,
114
118
  maxHeight,
115
119
  ...style
116
120
  };
117
- $[47] = maxHeight;
118
- $[48] = minHeight;
119
- $[49] = style;
120
- $[50] = t8;
121
- } else t8 = $[50];
122
- let t9;
123
- if ($[51] !== characterCountStaticMessageId || $[52] !== characterLimit || $[53] !== rest) {
124
- t9 = characterLimit ? [characterCountStaticMessageId, rest["aria-describedby"]].filter(Boolean).join(" ") || void 0 : rest["aria-describedby"];
125
- $[51] = characterCountStaticMessageId;
126
- $[52] = characterLimit;
127
- $[53] = rest;
128
- $[54] = t9;
129
- } else t9 = $[54];
121
+ $[49] = maxHeight;
122
+ $[50] = minHeight;
123
+ $[51] = style;
124
+ $[52] = t9;
125
+ } else t9 = $[52];
130
126
  let t10;
131
- if ($[55] !== cols || $[56] !== defaultValue || $[57] !== disabled || $[58] !== handleTextareaChange || $[59] !== ref || $[60] !== required || $[61] !== resize || $[62] !== rest || $[63] !== rows || $[64] !== t7 || $[65] !== t8 || $[66] !== t9 || $[67] !== value) {
132
- t10 = /*#__PURE__*/ jsx("textarea", {
127
+ if ($[53] !== characterCountStaticMessageId || $[54] !== characterLimit || $[55] !== rest) {
128
+ t10 = characterLimit ? [characterCountStaticMessageId, rest["aria-describedby"]].filter(Boolean).join(" ") || void 0 : rest["aria-describedby"];
129
+ $[53] = characterCountStaticMessageId;
130
+ $[54] = characterLimit;
131
+ $[55] = rest;
132
+ $[56] = t10;
133
+ } else t10 = $[56];
134
+ let t11;
135
+ if ($[57] !== cols || $[58] !== defaultValue || $[59] !== disabled || $[60] !== handleTextareaChange || $[61] !== ref || $[62] !== required || $[63] !== resize || $[64] !== rest || $[65] !== rows || $[66] !== t10 || $[67] !== t7 || $[68] !== t8 || $[69] !== t9 || $[70] !== value) {
136
+ t11 = /*#__PURE__*/ jsx("textarea", {
133
137
  value,
134
138
  defaultValue,
135
139
  "data-component": "Textarea",
136
140
  "data-resize": resize,
141
+ "data-auto-size": t7,
137
142
  "aria-required": required,
138
- "aria-invalid": t7,
143
+ "aria-invalid": t8,
139
144
  ref,
140
145
  disabled,
141
146
  rows,
142
147
  cols,
143
148
  className: TextArea_module_css_default.TextArea,
144
149
  onChange: handleTextareaChange,
145
- style: t8,
150
+ style: t9,
146
151
  ...rest,
147
- "aria-describedby": t9
152
+ "aria-describedby": t10
148
153
  });
149
- $[55] = cols;
150
- $[56] = defaultValue;
151
- $[57] = disabled;
152
- $[58] = handleTextareaChange;
153
- $[59] = ref;
154
- $[60] = required;
155
- $[61] = resize;
156
- $[62] = rest;
157
- $[63] = rows;
158
- $[64] = t7;
159
- $[65] = t8;
160
- $[66] = t9;
161
- $[67] = value;
162
- $[68] = t10;
163
- } else t10 = $[68];
164
- let t11;
165
- if ($[69] !== block || $[70] !== className || $[71] !== contrast || $[72] !== disabled || $[73] !== isValid || $[74] !== t10) {
166
- t11 = /*#__PURE__*/ jsx(TextInputBaseWrapper, {
154
+ $[57] = cols;
155
+ $[58] = defaultValue;
156
+ $[59] = disabled;
157
+ $[60] = handleTextareaChange;
158
+ $[61] = ref;
159
+ $[62] = required;
160
+ $[63] = resize;
161
+ $[64] = rest;
162
+ $[65] = rows;
163
+ $[66] = t10;
164
+ $[67] = t7;
165
+ $[68] = t8;
166
+ $[69] = t9;
167
+ $[70] = value;
168
+ $[71] = t11;
169
+ } else t11 = $[71];
170
+ let t12;
171
+ if ($[72] !== block || $[73] !== className || $[74] !== contrast || $[75] !== disabled || $[76] !== isValid || $[77] !== t11) {
172
+ t12 = /*#__PURE__*/ jsx(TextInputBaseWrapper, {
167
173
  validationStatus: isValid,
168
174
  disabled,
169
175
  block,
170
176
  contrast,
171
177
  className,
172
- children: t10
178
+ children: t11
173
179
  });
174
- $[69] = block;
175
- $[70] = className;
176
- $[71] = contrast;
177
- $[72] = disabled;
178
- $[73] = isValid;
179
- $[74] = t10;
180
- $[75] = t11;
181
- } else t11 = $[75];
182
- t5 = /*#__PURE__*/ jsxs(Fragment, { children: [t11, characterLimit && /*#__PURE__*/ jsxs(Fragment, { children: [
180
+ $[72] = block;
181
+ $[73] = className;
182
+ $[74] = contrast;
183
+ $[75] = disabled;
184
+ $[76] = isValid;
185
+ $[77] = t11;
186
+ $[78] = t12;
187
+ } else t12 = $[78];
188
+ t5 = /*#__PURE__*/ jsxs(Fragment, { children: [t12, characterLimit && /*#__PURE__*/ jsxs(Fragment, { children: [
183
189
  /*#__PURE__*/ jsx(AriaStatus, {
184
190
  announceOnShow: false,
185
191
  delayMs: 500,
@@ -203,30 +209,31 @@ const Textarea = /*#__PURE__*/ React.forwardRef((t0, ref) => {
203
209
  children: [isOverLimit && /*#__PURE__*/ jsx(AlertFillIcon, { size: 16 }), counter === null || counter === void 0 ? void 0 : counter.message]
204
210
  })
205
211
  ] })] });
206
- $[20] = block;
207
- $[21] = characterCountId;
208
- $[22] = characterCountStaticMessageId;
209
- $[23] = characterLimit;
210
- $[24] = className;
211
- $[25] = cols;
212
- $[26] = contrast;
213
- $[27] = currentLength;
214
- $[28] = defaultValue;
215
- $[29] = disabled;
216
- $[30] = isControlled;
217
- $[31] = maxHeight;
218
- $[32] = minHeight;
219
- $[33] = onChange;
220
- $[34] = ref;
221
- $[35] = required;
222
- $[36] = resize;
223
- $[37] = rest;
224
- $[38] = rows;
225
- $[39] = style;
226
- $[40] = validationStatus;
227
- $[41] = value;
228
- $[42] = t5;
229
- } else t5 = $[42];
212
+ $[21] = autoSize;
213
+ $[22] = block;
214
+ $[23] = characterCountId;
215
+ $[24] = characterCountStaticMessageId;
216
+ $[25] = characterLimit;
217
+ $[26] = className;
218
+ $[27] = cols;
219
+ $[28] = contrast;
220
+ $[29] = currentLength;
221
+ $[30] = defaultValue;
222
+ $[31] = disabled;
223
+ $[32] = isControlled;
224
+ $[33] = maxHeight;
225
+ $[34] = minHeight;
226
+ $[35] = onChange;
227
+ $[36] = ref;
228
+ $[37] = required;
229
+ $[38] = resize;
230
+ $[39] = rest;
231
+ $[40] = rows;
232
+ $[41] = style;
233
+ $[42] = validationStatus;
234
+ $[43] = value;
235
+ $[44] = t5;
236
+ } else t5 = $[44];
230
237
  return t5;
231
238
  });
232
239
  Textarea.displayName = "Textarea";
package/dist/hooks/useFocusTrap.js CHANGED
@@ -27,13 +27,15 @@ function useFocusTrap(settings, dependencies = []) {
27
27
  }
28
28
  }
29
29
  React.useEffect(() => {
30
- if (containerRef.current instanceof HTMLElement) if (!disabled) {
31
- var _initialFocusRef$curr;
32
- abortController.current = focusTrap(containerRef.current, (_initialFocusRef$curr = initialFocusRef.current) !== null && _initialFocusRef$curr !== void 0 ? _initialFocusRef$curr : void 0);
33
- return () => {
34
- disableTrap();
35
- };
36
- } else disableTrap();
30
+ if (containerRef.current instanceof HTMLElement) {
31
+ if (!disabled) {
32
+ var _initialFocusRef$curr;
33
+ abortController.current = focusTrap(containerRef.current, (_initialFocusRef$curr = initialFocusRef.current) !== null && _initialFocusRef$curr !== void 0 ? _initialFocusRef$curr : void 0);
34
+ return () => {
35
+ disableTrap();
36
+ };
37
+ } else disableTrap();
38
+ }
37
39
  }, [
38
40
  containerRef,
39
41
  initialFocusRef,
package/dist/hooks/useFocusZone.js CHANGED
@@ -10,20 +10,22 @@ function useFocusZone(settings = {}, dependencies = []) {
10
10
  const disabled = settings.disabled;
11
11
  const abortController = React.useRef();
12
12
  useEffect(() => {
13
- if (containerRef.current instanceof HTMLElement && (!useActiveDescendant || activeDescendantControlRef.current instanceof HTMLElement)) if (!disabled) {
14
- var _activeDescendantCont;
15
- const vanillaSettings = {
16
- ...settings,
17
- activeDescendantControl: (_activeDescendantCont = activeDescendantControlRef.current) !== null && _activeDescendantCont !== void 0 ? _activeDescendantCont : void 0
18
- };
19
- abortController.current = focusZone(containerRef.current, vanillaSettings);
20
- return () => {
21
- var _abortController$curr;
22
- (_abortController$curr = abortController.current) === null || _abortController$curr === void 0 || _abortController$curr.abort();
23
- };
24
- } else {
25
- var _abortController$curr2;
26
- (_abortController$curr2 = abortController.current) === null || _abortController$curr2 === void 0 || _abortController$curr2.abort();
13
+ if (containerRef.current instanceof HTMLElement && (!useActiveDescendant || activeDescendantControlRef.current instanceof HTMLElement)) {
14
+ if (!disabled) {
15
+ var _activeDescendantCont;
16
+ const vanillaSettings = {
17
+ ...settings,
18
+ activeDescendantControl: (_activeDescendantCont = activeDescendantControlRef.current) !== null && _activeDescendantCont !== void 0 ? _activeDescendantCont : void 0
19
+ };
20
+ abortController.current = focusZone(containerRef.current, vanillaSettings);
21
+ return () => {
22
+ var _abortController$curr;
23
+ (_abortController$curr = abortController.current) === null || _abortController$curr === void 0 || _abortController$curr.abort();
24
+ };
25
+ } else {
26
+ var _abortController$curr2;
27
+ (_abortController$curr2 = abortController.current) === null || _abortController$curr2 === void 0 || _abortController$curr2.abort();
28
+ }
27
29
  }
28
30
  }, [disabled, ...dependencies]);
29
31
  return {
package/dist/hooks/useMenuInitialFocus.js CHANGED
@@ -43,9 +43,10 @@ const useMenuInitialFocus = (open, containerRef, anchorRef) => {
43
43
  t2 = function moveFocusOnOpen() {
44
44
  if (!open || !(containerRef !== null && containerRef !== void 0 && containerRef.current)) return;
45
45
  const iterable = iterateFocusableElements(containerRef.current);
46
- if (openingGesture === "mouse-click") if (anchorRef !== null && anchorRef !== void 0 && anchorRef.current) anchorRef.current.focus();
47
- else throw new Error("For focus management, please attach anchorRef");
48
- else if (openingGesture && [
46
+ if (openingGesture === "mouse-click") {
47
+ if (anchorRef !== null && anchorRef !== void 0 && anchorRef.current) anchorRef.current.focus();
48
+ else throw new Error("For focus management, please attach anchorRef");
49
+ } else if (openingGesture && [
49
50
  "ArrowDown",
50
51
  "Space",
51
52
  "Enter"
package/generated/components.json CHANGED
@@ -8119,6 +8119,12 @@
8119
8119
  "defaultValue": "'both'",
8120
8120
  "description": "Changes the resize behavior"
8121
8121
  },
8122
+ {
8123
+ "name": "autoSize",
8124
+ "type": "boolean",
8125
+ "defaultValue": "false",
8126
+ "description": "Allows the textarea to grow to fit its content"
8127
+ },
8122
8128
  {
8123
8129
  "name": "characterLimit",
8124
8130
  "type": "number",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@primer/react",
3
3
  "type": "module",
4
- "version": "38.36.0",
4
+ "version": "38.37.0-rc.0b6dd7e38",
5
5
  "description": "An implementation of GitHub's Primer Design System using React",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.js",
@@ -108,12 +108,12 @@
108
108
  "@primer/doc-gen": "^0.0.1",
109
109
  "@primer/react-compiler-check": "^0.0.0",
110
110
  "@rolldown/plugin-babel": "^0.2.3",
111
- "@storybook/addon-a11y": "10.5.5",
112
- "@storybook/addon-docs": "10.5.5",
113
- "@storybook/addon-links": "10.5.5",
111
+ "@storybook/addon-a11y": "10.5.7",
112
+ "@storybook/addon-docs": "10.5.7",
113
+ "@storybook/addon-links": "10.5.7",
114
114
  "@storybook/addon-mcp": "^0.7.0",
115
115
  "@storybook/icons": "^2.1.0",
116
- "@storybook/react-vite": "10.5.5",
116
+ "@storybook/react-vite": "10.5.7",
117
117
  "@testing-library/dom": "^10.4.0",
118
118
  "@testing-library/jest-dom": "^6.4.5",
119
119
  "@testing-library/react": "^16.3.0",
@@ -166,11 +166,11 @@
166
166
  "react-is": "18.3.1",
167
167
  "recast": "0.23.7",
168
168
  "rimraf": "5.0.5",
169
- "rolldown": "^1.2.2",
169
+ "rolldown": "^1.2.3",
170
170
  "rolldown-plugin-dts": "^0.26.0",
171
171
  "rolldown-plugin-import-css": "^0.0.0",
172
172
  "rolldown-plugin-preserve-directives": "^0.0.0",
173
- "storybook": "10.5.5",
173
+ "storybook": "10.5.7",
174
174
  "terser": "5.36.0",
175
175
  "ts-toolbelt": "9.6.0",
176
176
  "tsx": "4.20.3",
package/dist/SegmentedControl/SegmentedControl-de65527b.css DELETED
@@ -1,2 +0,0 @@
1
- .prc-SegmentedControl-SegmentedControl-lqIXp{--segmented-control-icon-width:32px;background-color:var(--controlTrack-bgColor-rest,#e6eaef);border:var(--borderWidth-thin,.0625rem) solid var(--controlTrack-borderColor-rest,transparent);border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;font-size:var(--text-body-size-medium,.875rem);height:32px;margin:0;padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-narrow=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-narrow=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-wide=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=true]:not([data-full-width-wide=true]),.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-wide=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-narrow=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-narrow=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-regular=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-regular=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-wide=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-wide=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-size=small]){font-size:var(--text-body-size-small,.75rem);height:28px}.prc-SegmentedControl-DropdownContainer-ZaPMn{display:none}.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant=dropdown]{display:block}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-narrow=dropdown]{display:block}}@media (min-width:48rem){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-regular=dropdown]{display:block}}@media (min-width:87.5rem){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-wide=dropdown]{display:block}}.prc-SegmentedControl-Item-tSCQh{display:block;flex-grow:1;margin-bottom:-1px;margin-top:-1px;position:relative}.prc-SegmentedControl-Item-tSCQh:not(:last-child){margin-right:1px}.prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:var(--borderColor-default,#d1d9e0);bottom:var(--base-size-8,.5rem);content:"";position:absolute;right:calc(var(--base-size-2,.125rem)*-1);top:var(--base-size-8,.5rem);width:1px}.prc-SegmentedControl-Item-tSCQh:not(:last-child):has(+[data-selected]):after,.prc-SegmentedControl-Item-tSCQh:not(:last-child):where([data-selected]):after{background-color:transparent}.prc-SegmentedControl-Item-tSCQh:first-child{margin-left:-1px}.prc-SegmentedControl-Item-tSCQh:last-child{margin-right:-1px}.prc-SegmentedControl-Item-tSCQh .prc-SegmentedControl-Counter-GmZOI{align-items:center;display:flex;margin-inline-start:var(--base-size-8,.5rem)}.prc-SegmentedControl-Button-E48xz{--segmented-control-button-inner-padding:12px;--segmented-control-button-bg-inset:4px;--segmented-control-outer-radius:var(--borderRadius-medium,0.375rem);background-color:transparent;border-color:transparent;border-radius:var(--segmented-control-outer-radius);border-width:0;color:currentColor;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:var(--base-text-weight-normal,400);height:100%;padding:var(--segmented-control-button-bg-inset);width:100%}.prc-SegmentedControl-Button-E48xz svg{fill:var(--fgColor-muted,#59636e);color:var(--fgColor-muted,#59636e)}.prc-SegmentedControl-Button-E48xz:focus:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,#0969da);outline-offset:-1px}.prc-SegmentedControl-Button-E48xz:focus:not(:disabled):not(:focus-visible){outline:1px solid transparent}.prc-SegmentedControl-Button-E48xz:focus-visible:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,#0969da);outline-offset:-1px}.prc-SegmentedControl-Button-E48xz:focus:focus-visible:not(:last-child):after{width:0}.prc-SegmentedControl-Button-E48xz[aria-disabled=true]:not([aria-pressed=true]){background-color:transparent;color:var(--fgColor-disabled,#818b98);cursor:not-allowed}.prc-SegmentedControl-Button-E48xz[aria-disabled=true]:not([aria-pressed=true]) svg{fill:var(--fgColor-disabled,#818b98);color:var(--fgColor-disabled,#818b98)}@media (pointer:coarse){.prc-SegmentedControl-Button-E48xz:before{content:"";left:0;min-height:44px;position:absolute;right:0;top:50%;transform:translateY(-50%)}}.prc-SegmentedControl-IconButton-tlzDE{width:var(--segmented-control-icon-width,32px)}.prc-SegmentedControl-Content-1COlk{align-items:center;border-color:transparent;border-radius:calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset)/2);border-style:solid;border-width:var(--borderWidth-thin,.0625rem);display:flex;height:100%;justify-content:center;padding-left:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));padding-right:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset))}.prc-SegmentedControl-Button-E48xz[aria-pressed=true]{font-weight:var(--base-text-weight-semibold,600);padding:0}.prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--controlKnob-bgColor-rest,#fff);border-color:var(--controlKnob-borderColor-rest,#d1d9e0);border-radius:var(--segmented-control-outer-radius);padding-left:var(--segmented-control-button-inner-padding);padding-right:var(--segmented-control-button-inner-padding)}.prc-SegmentedControl-Button-E48xz:not([aria-pressed=true],[aria-disabled=true]):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-hover,#e0e6eb)}.prc-SegmentedControl-Button-E48xz:not([aria-pressed=true],[aria-disabled=true]):active .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-active,#dae0e7)}.prc-SegmentedControl-Text-7S2y2:after{content:attr(data-text);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none;visibility:hidden}.prc-SegmentedControl-LeadingIcon-74n5s{margin-right:var(--base-size-4,.25rem)}
2
- /*# sourceMappingURL=SegmentedControl-de65527b.css.map */
package/dist/SegmentedControl/SegmentedControl-de65527b.css.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/SegmentedControl/SegmentedControl.module.css.js"],"names":[],"mappings":"AAAA,6CAEE,mCAAoC,CASpC,yDAAkD,CAClD,8FAAuF,CACvF,gDAAyC,CATzC,mBAAoB,CAMpB,8CAAuC,CAHvC,WAAY,CAEZ,QAAS,CADT,SA0HF,CAlHE,mEACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,oEACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CAEA,wCACE,0EACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,2EACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAEA,yBACE,2EACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,4EACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAEA,2BACE,wEACE,YAAa,CACb,UAAW,CAEX,mCACF,CASA,qLACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAQA,2KACE,YACF,CAEA,wCAKE,yLACE,YACF,CACF,CAEA,yBAKE,2LACE,YACF,CACF,CAEA,2BAKE,qLACE,YACF,CACF,CAEA,sEAGE,4CAAsC,CADtC,WAEF,CAGF,8CACE,YAwBF,CArBE,qEACE,aACF,CAEA,wCACE,4EACE,aACF,CACF,CAEA,yBACE,6EACE,aACF,CACF,CAEA,2BACE,0EACE,aACF,CACF,CAGF,iCAEE,aAAc,CAKd,WAAY,CADZ,kBAAmB,CAFnB,eAAgB,CAHhB,iBA6CF,CArCE,kDAEE,gBAkBF,CAhBE,wDAQE,mDAA4C,CAJ5C,+BAA0B,CAE1B,UAAW,CALX,iBAAkB,CAElB,yCAAoC,CADpC,4BAAuB,CAGvB,SAIF,CAGA,6JAEE,4BACF,CAGF,6CAEE,gBACF,CAEA,4CAEE,iBACF,CAEA,qEAGE,kBAAmB,CADnB,YAAa,CADb,4CAGF,CAGF,mCAEE,6CAA8C,CAC9C,uCAAwC,CACxC,oEAA4D,CAW5D,4BAA6B,CAC7B,wBAAyB,CAGzB,mDAAoD,CAFpD,cAAe,CAJf,kBAAmB,CACnB,cAAe,CAJf,mBAAoB,CACpB,iBAAkB,CAClB,8CAA2C,CAL3C,WAAY,CAEZ,gDAAiD,CAHjD,UAmEF,CApDE,uCACE,iCAA0B,CAC1B,kCACF,CAGA,wDAGE,eAAgB,CAFhB,sEAAuD,CACvD,mBAOF,CAHE,4EACE,6BACF,CAIF,gEAGE,eAAgB,CAFhB,sEAAuD,CACvD,mBAEF,CAGA,8EAEE,OACF,CAEA,gFAGE,4BAA6B,CAD7B,qCAA8B,CAD9B,kBAQF,CAJE,oFACE,oCAA6B,CAC7B,qCACF,CAGF,wBACE,0CAME,UAAW,CAFX,MAAO,CACP,eAAgB,CAJhB,iBAAkB,CAElB,OAAQ,CADR,OAAQ,CAKR,0BACF,CACF,CAGF,uCACE,8CACF,CAEA,oCAiBE,kBAAmB,CAVnB,wBAAyB,CASzB,sGAAyG,CARzG,kBAAmB,CACnB,6CAAqC,CARrC,YAAa,CACb,WAAY,CAgBZ,sBAAuB,CAZvB,2GAA4G,CAF5G,4GAeF,CAEA,sDAEE,gDAA6C,CAD7C,SAaF,CAVE,0FAKE,qDAAiD,CACjD,wDAAiD,CAEjD,mDAAoD,CAJpD,0DAA2D,CAF3D,2DAOF,CAIA,2HACE,0DACF,CAEA,4HACE,2DACF,CAGF,uCAOE,uBAAwB,CANxB,aAAc,CAGd,gDAA6C,CAF7C,QAAS,CACT,eAAgB,CAEhB,mBAAoB,CAGpB,wBAAiB,CAAjB,gBAAiB,CAFjB,iBAGF,CAEA,wCACE,sCACF","file":"SegmentedControl-de65527b.css","sourcesContent":[".SegmentedControl {\n /* TODO: use primitive `control.medium.size` when it is available instead of '32px' */\n --segmented-control-icon-width: 32px;\n\n display: inline-flex;\n\n /* TODO: use primitive `control.{small|medium}.size` when it is available */\n height: 32px;\n padding: 0;\n margin: 0;\n font-size: var(--text-body-size-medium);\n background-color: var(--controlTrack-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent);\n border-radius: var(--borderRadius-medium);\n\n /* Responsive full-width */\n &[data-full-width='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n\n @media (--viewportRange-narrow) {\n &[data-full-width-narrow='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-narrow='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-full-width-regular='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-regular='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-full-width-wide='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-wide='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n\n &[data-full-width-regular='true']:not([data-full-width-wide='true']) {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n /* Hide when dropdown variant is active */\n &[data-variant='dropdown'] {\n display: none;\n }\n\n /* Handle hideLabels variant - hide button text */\n &[data-variant='hideLabels'] .Text {\n display: none;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: none;\n }\n\n &[data-variant-narrow='hideLabels'] .Text {\n display: none;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: none;\n }\n\n &[data-variant-regular='hideLabels'] .Text {\n display: none;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: none;\n }\n\n &[data-variant-wide='hideLabels'] .Text {\n display: none;\n }\n }\n\n &:where([data-size='small']) {\n /* TODO: use primitive `control.{small|medium}.size` when it is available */\n height: 28px;\n font-size: var(--text-body-size-small);\n }\n}\n\n.DropdownContainer {\n display: none;\n\n /* Show when dropdown variant is active */\n &[data-variant='dropdown'] {\n display: block;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: block;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: block;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: block;\n }\n }\n}\n\n.Item {\n position: relative;\n display: block;\n /* stylelint-disable-next-line primer/spacing */\n margin-top: -1px;\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: -1px;\n flex-grow: 1;\n\n &:not(:last-child) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: 1px;\n\n &::after {\n position: absolute;\n top: var(--base-size-8);\n right: calc(-1 * var(--base-size-2));\n bottom: var(--base-size-8);\n width: 1px;\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n &:has(+ [data-selected])::after,\n &:where([data-selected])::after {\n background-color: transparent;\n }\n }\n\n &:first-child {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: -1px;\n }\n\n &:last-child {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: -1px;\n }\n\n .Counter {\n margin-inline-start: var(--base-size-8);\n display: flex;\n align-items: center;\n }\n}\n\n.Button {\n /* TODO: use primitive `primer.control.medium.paddingInline.normal` when it is available */\n --segmented-control-button-inner-padding: 12px;\n --segmented-control-button-bg-inset: 4px;\n --segmented-control-outer-radius: var(--borderRadius-medium);\n\n width: 100%;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--segmented-control-button-bg-inset);\n font-family: inherit;\n font-size: inherit;\n font-weight: var(--base-text-weight-normal);\n color: currentColor;\n cursor: pointer;\n background-color: transparent;\n border-color: transparent;\n border-width: 0;\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n\n & svg {\n fill: var(--fgColor-muted);\n color: var(--fgColor-muted);\n }\n\n /* fallback :focus state */\n &:focus:not(:disabled) {\n outline: var(--base-size-2) solid var(--fgColor-accent);\n outline-offset: -1px;\n box-shadow: none;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n }\n }\n\n /* default focus state */\n &:focus-visible:not(:disabled) {\n outline: var(--base-size-2) solid var(--fgColor-accent);\n outline-offset: -1px;\n box-shadow: none;\n }\n\n /* stylelint-disable-next-line selector-max-specificity */\n &:focus:focus-visible:not(:last-child)::after {\n /* fixes an issue where the focus outline shows over the pseudo-element */\n width: 0;\n }\n\n &[aria-disabled='true']:not([aria-pressed='true']) {\n cursor: not-allowed;\n color: var(--fgColor-disabled);\n background-color: transparent;\n\n & svg {\n fill: var(--fgColor-disabled);\n color: var(--fgColor-disabled);\n }\n }\n\n @media (pointer: coarse) {\n &::before {\n position: absolute;\n top: 50%;\n right: 0;\n left: 0;\n min-height: 44px;\n content: '';\n transform: translateY(-50%);\n }\n }\n}\n\n.IconButton {\n width: var(--segmented-control-icon-width, 32px);\n}\n\n.Content {\n display: flex;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n padding-right: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n /* stylelint-disable-next-line primer/spacing */\n padding-left: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n border-color: transparent;\n border-style: solid;\n border-width: var(--borderWidth-thin);\n\n /*\n innerRadius = outerRadius - distance/2\n https://stackoverflow.com/questions/2932146/math-problem-determine-the-corner-radius-of-an-inner-border-based-on-outer-corn\n */\n /* stylelint-disable-next-line primer/borders */\n border-radius: calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset) / 2);\n align-items: center;\n justify-content: center;\n}\n\n.Button[aria-pressed='true'] {\n padding: 0;\n font-weight: var(--base-text-weight-semibold);\n\n .Content {\n /* stylelint-disable-next-line primer/spacing */\n padding-right: var(--segmented-control-button-inner-padding);\n /* stylelint-disable-next-line primer/spacing */\n padding-left: var(--segmented-control-button-inner-padding);\n background-color: var(--controlKnob-bgColor-rest);\n border-color: var(--controlKnob-borderColor-rest);\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n }\n}\n\n.Button:not([aria-pressed='true'], [aria-disabled='true']) {\n &:hover .Content {\n background-color: var(--controlTrack-bgColor-hover);\n }\n\n &:active .Content {\n background-color: var(--controlTrack-bgColor-active);\n }\n}\n\n.Text::after {\n display: block;\n height: 0;\n overflow: hidden;\n font-weight: var(--base-text-weight-semibold);\n pointer-events: none;\n visibility: hidden;\n content: attr(data-text);\n user-select: none;\n}\n\n.LeadingIcon {\n margin-right: var(--base-size-4);\n}\n"]}
package/dist/Textarea/TextArea-53e27580.css.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/Textarea/TextArea.module.css.js"],"names":[],"mappings":"AAAA,6BAQE,eAAgB,CAFhB,4BAA6B,CAC7B,QAAS,CAHT,aAAc,CAFd,mBAAoB,CACpB,iBAAkB,CAElB,WAAY,CAJZ,UAQF,CAEA,mCACE,SACF,CAEA,+CACE,WACF,CAEA,+CACE,WACF,CAEA,qDACE,iBACF,CAEA,mDACE,eACF,CAEA,sCACE,WACF,CAEA,qCAEE,kBAAmB,CAEnB,kCAA2B,CAH3B,YAAa,CAEb,oCAEF,CAEA,4CACE,mCACF","file":"TextArea-53e27580.css","sourcesContent":[".TextArea {\n width: 100%;\n font-family: inherit;\n font-size: inherit;\n color: inherit;\n resize: both;\n background-color: transparent;\n border: 0;\n appearance: none;\n}\n\n.TextArea:focus {\n outline: 0;\n}\n\n.TextArea[data-resize='none'] {\n resize: none;\n}\n\n.TextArea[data-resize='both'] {\n resize: both;\n}\n\n.TextArea[data-resize='horizontal'] {\n resize: horizontal;\n}\n\n.TextArea[data-resize='vertical'] {\n resize: vertical;\n}\n\n.TextArea:disabled {\n resize: none;\n}\n\n.CharacterCounter {\n display: flex;\n align-items: center;\n gap: var(--control-xsmall-gap);\n color: var(--fgColor-muted);\n}\n\n.CharacterCounter--error {\n color: var(--fgColor-danger);\n}\n"]}