@primer/react 38.36.0 → 38.37.0-rc.05923388d
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/dist/ActionList/Item.js +5 -4
- package/dist/AnchoredOverlay/AnchoredOverlay.js +5 -3
- package/dist/FeatureFlags/DefaultFeatureFlags.js +2 -1
- package/dist/Flash/Flash.d.ts +6 -0
- package/dist/Flash/Flash.js +6 -0
- package/dist/InlineMessage/InlineMessage.js +11 -10
- package/dist/LabelGroup/LabelGroup.js +6 -4
- package/dist/SegmentedControl/SegmentedControl-4ef72733.css +2 -0
- package/dist/SegmentedControl/SegmentedControl-4ef72733.css.map +1 -0
- package/dist/SegmentedControl/SegmentedControl.js +9 -5
- package/dist/SegmentedControl/SegmentedControl.module.css.js +1 -1
- package/dist/Textarea/{TextArea-53e27580.css → TextArea-2dc51d35.css} +2 -2
- package/dist/Textarea/TextArea-2dc51d35.css.map +1 -0
- package/dist/Textarea/TextArea.module.css.js +1 -1
- package/dist/Textarea/Textarea.d.ts +8 -0
- package/dist/Textarea/Textarea.js +128 -121
- package/dist/deprecated/index.d.ts +2 -1
- package/dist/deprecated/index.js +2 -1
- package/dist/experimental/Tabs/Tabs.js +33 -19
- package/dist/experimental/Tabs/types.d.ts +6 -0
- package/dist/experimental/Tabs/useTab.js +6 -1
- package/dist/experimental/Tabs/useTabList.js +29 -22
- package/dist/experimental/UnderlinePanels/UnderlinePanels.d.ts +38 -1
- package/dist/experimental/UnderlinePanels/UnderlinePanels.js +69 -18
- package/dist/hooks/useFocusTrap.js +9 -7
- package/dist/hooks/useFocusZone.js +16 -14
- package/dist/hooks/useMenuInitialFocus.js +4 -3
- package/generated/components.json +70 -11
- package/package.json +7 -7
- package/dist/SegmentedControl/SegmentedControl-de65527b.css +0 -2
- package/dist/SegmentedControl/SegmentedControl-de65527b.css.map +0 -1
- package/dist/Textarea/TextArea-53e27580.css.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @primer/react
|
|
2
2
|
|
|
3
|
+
## 38.37.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#8306](https://github.com/primer/react/pull/8306) [`a3afd7b`](https://github.com/primer/react/commit/a3afd7baf05ea6c4a272a40ccb636f20a48f87dc) Thanks [@llastflowers](https://github.com/llastflowers)! - Deprecate the `Flash` component and move to `@primer/react/deprecated`
|
|
8
|
+
|
|
9
|
+
- [#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
|
|
10
|
+
|
|
11
|
+
- [#8233](https://github.com/primer/react/pull/8233) [`80a68cf`](https://github.com/primer/react/commit/80a68cf05226323ad8cbc0531f244d60ea6747e3) Thanks [@rickyzhangca](https://github.com/rickyzhangca)! - UnderlinePanels: add controlled `value`/`defaultValue`/`onChange` and `activationMode` props, keyed to a per-`Tab`/`Panel` `value`, for data-driven tabs. Behind the `primer_react_underline_panels_controlled` feature flag; the existing `aria-selected`/`onSelect` API is unchanged.
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [#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
|
|
16
|
+
|
|
3
17
|
## 38.36.0
|
|
4
18
|
|
|
5
19
|
### 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")
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
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;
|
|
@@ -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)
|
|
240
|
-
|
|
241
|
-
|
|
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) {
|
|
@@ -8,7 +8,8 @@ const DefaultFeatureFlags = FeatureFlagScope.create({
|
|
|
8
8
|
primer_react_action_list_group_heading_trailing_action: false,
|
|
9
9
|
primer_react_action_list_item_gap: false,
|
|
10
10
|
primer_react_timeline_list_semantics: false,
|
|
11
|
-
primer_react_merged_forwarded_refs: false
|
|
11
|
+
primer_react_merged_forwarded_refs: false,
|
|
12
|
+
primer_react_underline_panels_controlled: false
|
|
12
13
|
});
|
|
13
14
|
//#endregion
|
|
14
15
|
export { DefaultFeatureFlags };
|
package/dist/Flash/Flash.d.ts
CHANGED
|
@@ -2,11 +2,17 @@ import { ForwardRefComponent } from "../utils/polymorphic.js";
|
|
|
2
2
|
import React from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Flash/Flash.d.ts
|
|
5
|
+
/**
|
|
6
|
+
* @deprecated Use `Banner` instead. If migration is not yet possible, import `Flash` from `@primer/react/deprecated`.
|
|
7
|
+
*/
|
|
5
8
|
type FlashProps = React.ComponentPropsWithoutRef<'div'> & {
|
|
6
9
|
className?: string;
|
|
7
10
|
variant?: 'default' | 'warning' | 'success' | 'danger';
|
|
8
11
|
full?: boolean;
|
|
9
12
|
};
|
|
13
|
+
/**
|
|
14
|
+
* @deprecated Use `Banner` instead. If migration is not yet possible, import `Flash` from `@primer/react/deprecated`.
|
|
15
|
+
*/
|
|
10
16
|
declare const Flash: ForwardRefComponent<"div", FlashProps>;
|
|
11
17
|
//#endregion
|
|
12
18
|
export { FlashProps, Flash as default };
|
package/dist/Flash/Flash.js
CHANGED
|
@@ -4,6 +4,12 @@ import { clsx } from "clsx";
|
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
5
|
import React from "react";
|
|
6
6
|
//#region src/Flash/Flash.tsx
|
|
7
|
+
/**
|
|
8
|
+
* @deprecated Use `Banner` instead. If migration is not yet possible, import `Flash` from `@primer/react/deprecated`.
|
|
9
|
+
*/
|
|
10
|
+
/**
|
|
11
|
+
* @deprecated Use `Banner` instead. If migration is not yet possible, import `Flash` from `@primer/react/deprecated`.
|
|
12
|
+
*/
|
|
7
13
|
const Flash = /*#__PURE__*/ React.forwardRef(function Flash(t0, ref) {
|
|
8
14
|
const $ = c(15);
|
|
9
15
|
let className;
|
|
@@ -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)
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
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")) {
|
|
@@ -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)
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
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";
|
|
@@ -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 */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/SegmentedControl/SegmentedControl.module.css.js"],"names":[],"mappings":"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","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"]}
|
|
@@ -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)
|
|
239
|
-
|
|
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)))
|
|
242
|
-
|
|
243
|
-
|
|
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
|
}
|
|
@@ -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-
|
|
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 */
|
|
@@ -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"]}
|
|
@@ -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
|
*/
|
|
@@ -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(
|
|
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] =
|
|
41
|
-
$[2] =
|
|
42
|
-
$[3] =
|
|
43
|
-
$[4] =
|
|
44
|
-
$[5] =
|
|
45
|
-
$[6] =
|
|
46
|
-
$[7] =
|
|
47
|
-
$[8] =
|
|
48
|
-
$[9] =
|
|
49
|
-
$[10] =
|
|
50
|
-
$[11] =
|
|
51
|
-
$[12] =
|
|
52
|
-
$[13] =
|
|
53
|
-
$[14] =
|
|
54
|
-
$[15] =
|
|
55
|
-
$[16] =
|
|
56
|
-
$[17] =
|
|
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
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
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 ($[
|
|
86
|
+
if ($[19] !== defaultValue) {
|
|
84
87
|
t4 = () => defaultValue !== void 0 ? String(defaultValue).length : 0;
|
|
85
|
-
$[
|
|
86
|
-
$[
|
|
87
|
-
} else t4 = $[
|
|
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 ($[
|
|
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 ($[
|
|
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
|
-
$[
|
|
103
|
-
$[
|
|
104
|
-
$[
|
|
105
|
-
$[
|
|
106
|
-
} else t6 = $[
|
|
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 =
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
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
|
-
$[
|
|
118
|
-
$[
|
|
119
|
-
$[
|
|
120
|
-
$[
|
|
121
|
-
} else
|
|
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 ($[
|
|
132
|
-
t10 =
|
|
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":
|
|
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:
|
|
150
|
+
style: t9,
|
|
146
151
|
...rest,
|
|
147
|
-
"aria-describedby":
|
|
152
|
+
"aria-describedby": t10
|
|
148
153
|
});
|
|
149
|
-
$[
|
|
150
|
-
$[
|
|
151
|
-
$[
|
|
152
|
-
$[
|
|
153
|
-
$[
|
|
154
|
-
$[
|
|
155
|
-
$[
|
|
156
|
-
$[
|
|
157
|
-
$[
|
|
158
|
-
$[
|
|
159
|
-
$[
|
|
160
|
-
$[
|
|
161
|
-
$[
|
|
162
|
-
$[
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
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:
|
|
178
|
+
children: t11
|
|
173
179
|
});
|
|
174
|
-
$[
|
|
175
|
-
$[
|
|
176
|
-
$[
|
|
177
|
-
$[
|
|
178
|
-
$[
|
|
179
|
-
$[
|
|
180
|
-
$[
|
|
181
|
-
} else
|
|
182
|
-
t5 = /*#__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
|
-
$[
|
|
207
|
-
$[
|
|
208
|
-
$[
|
|
209
|
-
$[
|
|
210
|
-
$[
|
|
211
|
-
$[
|
|
212
|
-
$[
|
|
213
|
-
$[
|
|
214
|
-
$[
|
|
215
|
-
$[
|
|
216
|
-
$[
|
|
217
|
-
$[
|
|
218
|
-
$[
|
|
219
|
-
$[
|
|
220
|
-
$[
|
|
221
|
-
$[
|
|
222
|
-
$[
|
|
223
|
-
$[
|
|
224
|
-
$[
|
|
225
|
-
$[
|
|
226
|
-
$[
|
|
227
|
-
$[
|
|
228
|
-
$[
|
|
229
|
-
|
|
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";
|
|
@@ -3,6 +3,7 @@ import { ItemProps } from "./ActionList/Item.js";
|
|
|
3
3
|
import { GroupedListProps, ItemInput, ListProps } from "./ActionList/List.js";
|
|
4
4
|
import { ActionList } from "./ActionList/index.js";
|
|
5
5
|
import Octicon, { OcticonProps } from "../Octicon/Octicon.js";
|
|
6
|
+
import Flash, { FlashProps } from "../Flash/Flash.js";
|
|
6
7
|
import { ActionMenu, ActionMenuProps } from "./ActionMenu.js";
|
|
7
8
|
import FilteredSearch, { FilteredSearchProps } from "./FilteredSearch/FilteredSearch.js";
|
|
8
9
|
import _default$2, { UnderlineNavLinkProps, UnderlineNavProps } from "./UnderlineNav/UnderlineNav.js";
|
|
@@ -10,4 +11,4 @@ import _default, { DialogHeaderProps, DialogProps } from "./DialogV1/Dialog.js";
|
|
|
10
11
|
import Pagehead, { PageheadProps } from "../Pagehead/Pagehead.js";
|
|
11
12
|
import _default$1, { TabNavLinkProps, TabNavProps } from "../TabNav/TabNav.js";
|
|
12
13
|
import Tooltip, { TooltipProps } from "../Tooltip/Tooltip.js";
|
|
13
|
-
export { ActionList, type GroupProps as ActionListGroupProps, type GroupedListProps as ActionListGroupedListProps, type ItemInput as ActionListItemInput, type ItemProps as ActionListItemProps, type ListProps as ActionListProps, ActionMenu, type ActionMenuProps, _default as Dialog, type DialogHeaderProps, type DialogProps, FilteredSearch, type FilteredSearchProps, Octicon, type OcticonProps, Pagehead, type PageheadProps, _default$1 as TabNav, type TabNavLinkProps, type TabNavProps, Tooltip, type TooltipProps, _default$2 as UnderlineNav, type UnderlineNavLinkProps, type UnderlineNavProps };
|
|
14
|
+
export { ActionList, type GroupProps as ActionListGroupProps, type GroupedListProps as ActionListGroupedListProps, type ItemInput as ActionListItemInput, type ItemProps as ActionListItemProps, type ListProps as ActionListProps, ActionMenu, type ActionMenuProps, _default as Dialog, type DialogHeaderProps, type DialogProps, FilteredSearch, type FilteredSearchProps, Flash, type FlashProps, Octicon, type OcticonProps, Pagehead, type PageheadProps, _default$1 as TabNav, type TabNavLinkProps, type TabNavProps, Tooltip, type TooltipProps, _default$2 as UnderlineNav, type UnderlineNavLinkProps, type UnderlineNavProps };
|
package/dist/deprecated/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import Octicon from "../Octicon/Octicon.js";
|
|
3
|
+
import Flash from "../Flash/Flash.js";
|
|
3
4
|
import { ActionList } from "./ActionList/index.js";
|
|
4
5
|
import { ActionMenu } from "./ActionMenu.js";
|
|
5
6
|
import FilteredSearch from "./FilteredSearch/FilteredSearch.js";
|
|
@@ -17,4 +18,4 @@ import Tooltip from "../Tooltip/Tooltip.js";
|
|
|
17
18
|
* example: import {FormGroup} from '@primer/react/deprecated
|
|
18
19
|
*/
|
|
19
20
|
//#endregion
|
|
20
|
-
export { ActionList, ActionMenu, Dialog_default as Dialog, FilteredSearch, Octicon, Pagehead, TabNav_default as TabNav, Tooltip, UnderlineNav_default as UnderlineNav };
|
|
21
|
+
export { ActionList, ActionMenu, Dialog_default as Dialog, FilteredSearch, Flash, Octicon, Pagehead, TabNav_default as TabNav, Tooltip, UnderlineNav_default as UnderlineNav };
|