@primer/react 38.21.0-rc.d8c47bc46 → 38.21.0
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 +25 -0
- package/dist/ActionBar/ActionBar.d.ts.map +1 -1
- package/dist/ActionBar/ActionBar.js +4 -1
- package/dist/ActionList/ActionList-53389912.css +2 -0
- package/dist/ActionList/ActionList-53389912.css.map +1 -0
- package/dist/ActionList/ActionList.module.css.js +1 -1
- package/dist/ActionList/Group.d.ts.map +1 -1
- package/dist/ActionList/Group.js +1 -0
- package/dist/ActionList/Heading.d.ts.map +1 -1
- package/dist/ActionList/Heading.js +1 -0
- package/dist/ActionList/Item.d.ts.map +1 -1
- package/dist/ActionList/Item.js +5 -3
- package/dist/ActionList/List.d.ts.map +1 -1
- package/dist/ActionList/List.js +56 -31
- package/dist/ActionList/TrailingAction.d.ts.map +1 -1
- package/dist/ActionList/TrailingAction.js +1 -0
- package/dist/ActionList/Visuals.d.ts.map +1 -1
- package/dist/ActionList/Visuals.js +2 -0
- package/dist/AnchoredOverlay/AnchoredOverlay.d.ts +5 -0
- package/dist/AnchoredOverlay/AnchoredOverlay.d.ts.map +1 -1
- package/dist/AnchoredOverlay/AnchoredOverlay.js +27 -12
- package/dist/AvatarStack/AvatarStack.d.ts.map +1 -1
- package/dist/AvatarStack/AvatarStack.js +2 -0
- package/dist/Banner/Banner.d.ts.map +1 -1
- package/dist/Banner/Banner.js +8 -0
- package/dist/BaseStyles.d.ts.map +1 -1
- package/dist/BaseStyles.js +1 -0
- package/dist/Button/ButtonBase.d.ts.map +1 -1
- package/dist/Button/ButtonBase.js +1 -0
- package/dist/Button/LinkButton.js +1 -0
- package/dist/Card/Card-cec366f8.css +2 -0
- package/dist/Card/Card-cec366f8.css.map +1 -0
- package/dist/Card/Card.d.ts +10 -0
- package/dist/Card/Card.d.ts.map +1 -1
- package/dist/Card/Card.js +117 -103
- package/dist/Card/Card.module.css.js +1 -1
- package/dist/Card/index.d.ts +1 -0
- package/dist/Card/index.d.ts.map +1 -1
- package/dist/DataTable/Pagination.d.ts.map +1 -1
- package/dist/DataTable/Pagination.js +7 -0
- package/dist/DataTable/Table.d.ts.map +1 -1
- package/dist/DataTable/Table.js +16 -2
- package/dist/DataTable/storybook/data.d.ts.map +1 -1
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +3 -0
- package/dist/FilteredActionList/FilteredActionList.d.ts.map +1 -1
- package/dist/FilteredActionList/FilteredActionList.js +8 -1
- package/dist/FilteredActionList/FilteredActionListLoaders.js +2 -0
- package/dist/LabelGroup/LabelGroup.d.ts.map +1 -1
- package/dist/LabelGroup/LabelGroup.js +7 -2
- package/dist/Link/Link.d.ts.map +1 -1
- package/dist/Link/Link.js +1 -0
- package/dist/Pagination/Pagination.d.ts +1 -0
- package/dist/Pagination/Pagination.d.ts.map +1 -1
- package/dist/Pagination/Pagination.js +9 -1
- package/dist/Portal/Portal.d.ts.map +1 -1
- package/dist/Portal/Portal.js +3 -0
- package/dist/SelectPanel/SelectPanel.d.ts.map +1 -1
- package/dist/SelectPanel/SelectPanel.js +19 -1
- package/dist/SelectPanel/SelectPanelMessage.d.ts.map +1 -1
- package/dist/SelectPanel/SelectPanelMessage.js +6 -1
- package/dist/TextInput/TextInput.d.ts.map +1 -1
- package/dist/TextInput/TextInput.js +6 -2
- package/dist/TextInputWithTokens/TextInputWithTokens.d.ts.map +1 -1
- package/dist/TextInputWithTokens/TextInputWithTokens.js +8 -1
- package/dist/TooltipV2/Tooltip.d.ts.map +1 -1
- package/dist/TooltipV2/Tooltip.js +3 -4
- package/dist/TreeView/TreeView.d.ts.map +1 -1
- package/dist/deprecated/utils/create-slots.d.ts.map +1 -1
- package/dist/experimental/SelectPanel2/SelectPanel.d.ts.map +1 -1
- package/dist/experimental/SelectPanel2/SelectPanel.js +4 -1
- package/dist/experimental/UnderlinePanels/UnderlinePanels.d.ts.map +1 -1
- package/dist/experimental/UnderlinePanels/UnderlinePanels.js +2 -0
- package/dist/hooks/useAnchoredPosition.js +1 -1
- package/dist/hooks/useFocusTrap.d.ts.map +1 -1
- package/dist/hooks/useFocusTrap.js +2 -0
- package/dist/hooks/useOnEscapePress.js +1 -1
- package/dist/internal/components/TextInputInnerAction.js +1 -0
- package/dist/internal/components/TextInputInnerVisualSlot.d.ts +4 -0
- package/dist/internal/components/TextInputInnerVisualSlot.d.ts.map +1 -1
- package/dist/internal/components/TextInputInnerVisualSlot.js +66 -50
- package/dist/internal/components/TextInputWrapper.d.ts.map +1 -1
- package/dist/internal/components/TextInputWrapper.js +1 -0
- package/dist/utils/StressTest.d.ts.map +1 -1
- package/generated/components.json +19 -13
- package/package.json +2 -2
- package/dist/ActionList/ActionList-e35e912e.css +0 -2
- package/dist/ActionList/ActionList-e35e912e.css.map +0 -1
- package/dist/Card/Card-65d85331.css +0 -2
- package/dist/Card/Card-65d85331.css.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/TooltipV2/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiD,KAAK,yBAAyB,EAAC,MAAM,OAAO,CAAA;AAS3G,OAAO,EAAoD,KAAK,mBAAmB,EAAC,MAAM,mBAAmB,CAAA;AAG7G,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,gBAAgB,CAAA;AAE9C,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,CAAA;AAChF,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACjD,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,OAAO,GAAG,aAAa,CAAA;IAC9B,cAAc,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAA;IACjF;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IACnC;;;;;;;;OAQG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAA;CACjC,CAAC,GACA,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAiEnC,eAAO,MAAM,cAAc;gBAAoC,MAAM;EAAM,CAAA;AAI3E,eAAO,MAAM,OAAO,EAAE,yBAAyB,CAC7C,KAAK,CAAC,eAAe,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CACvE,GACC,
|
|
1
|
+
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/TooltipV2/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiD,KAAK,yBAAyB,EAAC,MAAM,OAAO,CAAA;AAS3G,OAAO,EAAoD,KAAK,mBAAmB,EAAC,MAAM,mBAAmB,CAAA;AAG7G,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,gBAAgB,CAAA;AAE9C,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,CAAA;AAChF,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACjD,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,OAAO,GAAG,aAAa,CAAA;IAC9B,cAAc,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAA;IACjF;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IACnC;;;;;;;;OAQG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAA;CACjC,CAAC,GACA,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAiEnC,eAAO,MAAM,cAAc;gBAAoC,MAAM;EAAM,CAAA;AAI3E,eAAO,MAAM,OAAO,EAAE,yBAAyB,CAC7C,KAAK,CAAC,eAAe,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CACvE,GACC,UAkSD,CAAA"}
|
|
@@ -203,10 +203,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
|
|
|
203
203
|
return /*#__PURE__*/jsx(TooltipContext.Provider, {
|
|
204
204
|
value: value,
|
|
205
205
|
children: /*#__PURE__*/jsxs(Fragment, {
|
|
206
|
-
children: [/*#__PURE__*/React.isValidElement(child) &&
|
|
207
|
-
/*#__PURE__*/
|
|
208
|
-
// eslint-disable-next-line react-hooks/refs
|
|
209
|
-
React.cloneElement(child, {
|
|
206
|
+
children: [/*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.cloneElement(child, {
|
|
210
207
|
// @ts-expect-error it needs a non nullable ref
|
|
211
208
|
ref: triggerRef,
|
|
212
209
|
// If it is a type description, we use tooltip to describe the trigger
|
|
@@ -275,6 +272,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
|
|
|
275
272
|
className: clsx(className, classes.Tooltip),
|
|
276
273
|
ref: tooltipElRef,
|
|
277
274
|
"data-direction": calculatedDirection,
|
|
275
|
+
"data-component": "Tooltip",
|
|
278
276
|
...rest,
|
|
279
277
|
// Only need tooltip role if the tooltip is a description for supplementary information
|
|
280
278
|
role: type === 'description' ? 'tooltip' : undefined
|
|
@@ -297,6 +295,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
|
|
|
297
295
|
}), /*#__PURE__*/jsx("span", {
|
|
298
296
|
className: clsx(classes.KeybindingHintContainer, text && classes.HasTextBefore, keybindingHints.length > 1 && classes.HasMultipleHints),
|
|
299
297
|
"aria-hidden": true,
|
|
298
|
+
"data-component": "Tooltip.KeybindingHintContainer",
|
|
300
299
|
children: keybindingHints.map((hint, i) => /*#__PURE__*/jsxs(React.Fragment, {
|
|
301
300
|
children: [i > 0 && ' or ', /*#__PURE__*/jsx(KeybindingHint, {
|
|
302
301
|
keys: hint,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../src/TreeView/TreeView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,IAAI,EACV,MAAM,wBAAwB,CAAA;AAE/B,OAAO,KAA+B,MAAM,OAAO,CAAA;AAsBnD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AA4CpD,MAAM,MAAM,aAAa,GAAG;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD,iBAAiB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;IAC3D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,IAAI,EAAE,IAAI,CAAA;IACV,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAgHD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD,iBAAiB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;IAC3D,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;IACzB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IAC5F,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,wBAAwB,EAAE,CAAA;CAC9C,CAAA;AA0QD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;AAEnE,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;
|
|
1
|
+
{"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../src/TreeView/TreeView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,IAAI,EACV,MAAM,wBAAwB,CAAA;AAE/B,OAAO,KAA+B,MAAM,OAAO,CAAA;AAsBnD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AA4CpD,MAAM,MAAM,aAAa,GAAG;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD,iBAAiB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;IAC3D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,IAAI,EAAE,IAAI,CAAA;IACV,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAgHD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD,iBAAiB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;IAC3D,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;IACzB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IAC5F,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,wBAAwB,EAAE,CAAA;CAC9C,CAAA;AA0QD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;AAEnE,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AA4MD,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE;QAAC,UAAU,EAAE,OAAO,CAAA;KAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;IAG/E,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAqED,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,wBAAwB,EAAE,CAAA;IACjC,YAAY,EAAE,MAAM,CAAA;CACrB,CAAA;AA0ED,MAAM,MAAM,yBAAyB,GAAG;IACtC,KAAK,EAAE,wBAAwB,EAAE,CAAA;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAwED,MAAM,MAAM,wBAAwB,GAAG;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB,CAAA;AA4CD,eAAO,MAAM,QAAQ;;;;;;;;CAQnB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create-slots.d.ts","sourceRoot":"","sources":["../../../src/deprecated/utils/create-slots.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB;;;;;;;GAOG;AACH,QAAA,MAAM,WAAW,GAAI,SAAS,SAAS,MAAM,EAAE,WAAW,SAAS,EAAE;;;kBA0BvD,CAAC,KAAK,KAxBf,GAAG,mCAwBmB,KAAK,KAAK,CAAC,SAAS;;
|
|
1
|
+
{"version":3,"file":"create-slots.d.ts","sourceRoot":"","sources":["../../../src/deprecated/utils/create-slots.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB;;;;;;;GAOG;AACH,QAAA,MAAM,WAAW,GAAI,SAAS,SAAS,MAAM,EAAE,WAAW,SAAS,EAAE;;;kBA0BvD,CAAC,KAAK,KAxBf,GAAG,mCAwBmB,KAAK,KAAK,CAAC,SAAS;;WA+C/B,CAAC,SAAS;QAAC,IAAI,EAAE,SAAS,CAAC;QAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;KAAC;CAazG,CAAA;AAED,eAAe,WAAW,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectPanel.d.ts","sourceRoot":"","sources":["../../../src/experimental/SelectPanel2/SelectPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAGvE,OAAO,KAAK,EAAC,WAAW,EAAE,cAAc,EAAmB,SAAS,EAAE,aAAa,EAAC,MAAM,aAAa,CAAA;AAevG,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,uBAAuB,CAAA;AAMvD,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAA;AAInE,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AACvD,OAAO,KAAK,EAAC,gBAAgB,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAA;AA2BvE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,eAAe,CAAC,UAAU,GAAG,OAAO,EAAE,aAAa,GAAG,cAAc,CAAC,CAAA;IACtG,gBAAgB,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAA;IACpD,EAAE,CAAC,EAAE,MAAM,CAAA;IAEX,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;IACrD,wBAAwB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;IAEpD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,gBAAgB,CAAC,EAAE,SAAS,GAAG,CAAC,MAAM,IAAI,CAAC,CAAA;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;IAG7D,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;IAC7B,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,QAAQ,CAAC,CAAA;IAExD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;
|
|
1
|
+
{"version":3,"file":"SelectPanel.d.ts","sourceRoot":"","sources":["../../../src/experimental/SelectPanel2/SelectPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAGvE,OAAO,KAAK,EAAC,WAAW,EAAE,cAAc,EAAmB,SAAS,EAAE,aAAa,EAAC,MAAM,aAAa,CAAA;AAevG,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,uBAAuB,CAAA;AAMvD,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAA;AAInE,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AACvD,OAAO,KAAK,EAAC,gBAAgB,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAA;AA2BvE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,eAAe,CAAC,UAAU,GAAG,OAAO,EAAE,aAAa,GAAG,cAAc,CAAC,CAAA;IACtG,gBAAgB,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAA;IACpD,EAAE,CAAC,EAAE,MAAM,CAAA;IAEX,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;IACrD,wBAAwB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;IAEpD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,gBAAgB,CAAC,EAAE,SAAS,GAAG,CAAC,MAAM,IAAI,CAAC,CAAA;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;IAG7D,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;IAC7B,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,QAAQ,CAAC,CAAA;IAExD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAydD,MAAM,MAAM,+BAA+B,GAAG;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,GAAG,CACxE,CAAC;IAAC,OAAO,EAAE,QAAQ,CAAA;CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC,GAC7D,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAC,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,GACxC,CAAC;IAAC,OAAO,EAAE,UAAU,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAC,GAAG,aAAa,CAAC,CACvD,CAAA;AAwBD,MAAM,MAAM,uBAAuB,GAAG;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,GAAG,CAChE;IACE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,SAAS,GAAG,OAAO,GAAG,OAAO,CAAA;CACvC,GACD;IACE,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,OAAO,EAAE,SAAS,GAAG,OAAO,CAAA;CAC7B,CACJ,CAAA;AAqCD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;iBAtRoE,MAAM,IAAI;;;;;;;;;4BA6NxC,KAAK,CAAC,iBAAiB;;;CAiEnF,CAAA"}
|
|
@@ -185,7 +185,9 @@ const Panel = ({
|
|
|
185
185
|
side: 'outside-bottom',
|
|
186
186
|
align: 'start',
|
|
187
187
|
...anchoredPositionSettings
|
|
188
|
-
},
|
|
188
|
+
},
|
|
189
|
+
// eslint-disable-next-line react-hooks/refs
|
|
190
|
+
[internalOpen, anchorRef.current, dialogRef.current]);
|
|
189
191
|
|
|
190
192
|
/*
|
|
191
193
|
We want to cancel and close the panel when user clicks outside.
|
|
@@ -267,6 +269,7 @@ const SelectPanelButton = /*#__PURE__*/React.forwardRef((props, anchorRef) => {
|
|
|
267
269
|
useEffect(() => {
|
|
268
270
|
const label = document.querySelector(`[for='${inputProps.id}']`);
|
|
269
271
|
if (label !== null && label !== void 0 && label.textContent) {
|
|
272
|
+
// eslint-disable-next-line react-hooks/set-state-in-effect
|
|
270
273
|
setLabelText(label.textContent);
|
|
271
274
|
}
|
|
272
275
|
}, [inputProps.id]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UnderlinePanels.d.ts","sourceRoot":"","sources":["../../../src/experimental/UnderlinePanels/UnderlinePanels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAMZ,KAAK,EAAE,EACP,KAAK,iBAAiB,EAGvB,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAerD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AAEvD,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;IAC3D;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG,iBAAiB,CAAC;IACvC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACxG;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAA;CACrB,CAAC,CAAA;AAEF,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;;;;;
|
|
1
|
+
{"version":3,"file":"UnderlinePanels.d.ts","sourceRoot":"","sources":["../../../src/experimental/UnderlinePanels/UnderlinePanels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAMZ,KAAK,EAAE,EACP,KAAK,iBAAiB,EAGvB,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAerD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AAEvD,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;IAC3D;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG,iBAAiB,CAAC;IACvC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACxG;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAA;CACrB,CAAC,CAAA;AAEF,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;;;;;AA+J7D,wBAA2D"}
|
|
@@ -56,6 +56,8 @@ const UnderlinePanels = ({
|
|
|
56
56
|
return /*#__PURE__*/isValidElement(child_0) && (child_0.type === Tab || isSlot(child_0, Tab));
|
|
57
57
|
});
|
|
58
58
|
const newTabPanels = Children.toArray(childrenWithProps).filter(child_1 => /*#__PURE__*/isValidElement(child_1) && (child_1.type === Panel || isSlot(child_1, Panel)));
|
|
59
|
+
|
|
60
|
+
// eslint-disable-next-line react-hooks/set-state-in-effect
|
|
59
61
|
setTabs(newTabs);
|
|
60
62
|
setTabPanels(newTabPanels);
|
|
61
63
|
}, [children, parentId, loadingCounters, iconsVisible]);
|
|
@@ -87,7 +87,7 @@ function useAnchoredPosition(settings, dependencies = []) {
|
|
|
87
87
|
}
|
|
88
88
|
setPrevHeight((_floatingElementRef$c5 = floatingElementRef.current) === null || _floatingElementRef$c5 === void 0 ? void 0 : _floatingElementRef$c5.clientHeight);
|
|
89
89
|
},
|
|
90
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
90
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps, react-hooks/use-memo
|
|
91
91
|
[floatingElementRef, anchorElementRef, ...dependencies]);
|
|
92
92
|
useIsomorphicLayoutEffect(() => {
|
|
93
93
|
savedOnPositionChange.current = settings === null || settings === void 0 ? void 0 : settings.onPositionChange;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAElD;;;OAGG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAErD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAE/B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACpD;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAC1B,QAAQ,CAAC,EAAE,qBAAqB,EAChC,YAAY,GAAE,KAAK,CAAC,cAAmB,GACtC;IAAC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAAC,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAAC,
|
|
1
|
+
{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAElD;;;OAGG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAErD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAE/B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACpD;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAC1B,QAAQ,CAAC,EAAE,qBAAqB,EAChC,YAAY,GAAE,KAAK,CAAC,cAAmB,GACtC;IAAC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAAC,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAAC,CA4D3G"}
|
|
@@ -18,6 +18,7 @@ function useFocusTrap(settings, dependencies = []) {
|
|
|
18
18
|
|
|
19
19
|
// If we are enabling a focus trap and haven't already stored the previously focused element
|
|
20
20
|
// go ahead an do that so we can restore later when the trap is disabled.
|
|
21
|
+
// eslint-disable-next-line react-hooks/refs
|
|
21
22
|
if (!previousFocusedElement.current && !disabled) {
|
|
22
23
|
previousFocusedElement.current = document.activeElement;
|
|
23
24
|
}
|
|
@@ -58,6 +59,7 @@ function useFocusTrap(settings, dependencies = []) {
|
|
|
58
59
|
setOutsideClicked(true);
|
|
59
60
|
if (settings !== null && settings !== void 0 && settings.allowOutsideClick) {
|
|
60
61
|
var _abortController$curr2;
|
|
62
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
61
63
|
if (settings.returnFocusRef) settings.returnFocusRef = undefined;
|
|
62
64
|
settings.restoreFocusOnCleanUp = false;
|
|
63
65
|
(_abortController$curr2 = abortController.current) === null || _abortController$curr2 === void 0 ? void 0 : _abortController$curr2.abort();
|
|
@@ -46,7 +46,7 @@ let handlerId = 0;
|
|
|
46
46
|
* memoized. See `React.useCallback` for more info on memoization.
|
|
47
47
|
*/
|
|
48
48
|
const useOnEscapePress = (onEscape, callbackDependencies = [onEscape]) => {
|
|
49
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
49
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps, react-hooks/use-memo
|
|
50
50
|
const escapeCallback = useCallback(onEscape, callbackDependencies);
|
|
51
51
|
const handler = useCallback(event => {
|
|
52
52
|
if (event.key === 'Escape') escapeCallback(event);
|
|
@@ -134,6 +134,7 @@ const TextInputAction = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
|
|
|
134
134
|
var _tooltipDirection;
|
|
135
135
|
t7 = /*#__PURE__*/jsx("span", {
|
|
136
136
|
className: t6,
|
|
137
|
+
"data-component": "TextInput.Action",
|
|
137
138
|
children: icon && !children && ariaLabel ? /*#__PURE__*/jsx(IconButton, {
|
|
138
139
|
...accessibleLabel,
|
|
139
140
|
tooltipDirection: (_tooltipDirection = tooltipDirection) !== null && _tooltipDirection !== void 0 ? _tooltipDirection : "s",
|
|
@@ -9,6 +9,10 @@ declare const TextInputInnerVisualSlot: React.FC<React.PropsWithChildren<{
|
|
|
9
9
|
visualPosition: 'leading' | 'trailing';
|
|
10
10
|
/** Used to provide a reference for usage with `aria-describedby` */
|
|
11
11
|
id?: string;
|
|
12
|
+
/**
|
|
13
|
+
* A prefix to use for the `data-component` attribute
|
|
14
|
+
*/
|
|
15
|
+
componentPrefix?: string;
|
|
12
16
|
}>>;
|
|
13
17
|
export default TextInputInnerVisualSlot;
|
|
14
18
|
//# sourceMappingURL=TextInputInnerVisualSlot.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInputInnerVisualSlot.d.ts","sourceRoot":"","sources":["../../../src/internal/components/TextInputInnerVisualSlot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAC,4BAA4B,EAAC,MAAM,iBAAiB,CAAA;AAIjE,QAAA,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CACtC,KAAK,CAAC,iBAAiB,CAAC;IACtB,qEAAqE;IACrE,mBAAmB,EAAE,OAAO,CAAA;IAC5B,gDAAgD;IAChD,oBAAoB,EAAE,4BAA4B,CAAC,SAAS,CAAC,CAAA;IAC7D,kDAAkD;IAClD,cAAc,EAAE,SAAS,GAAG,UAAU,CAAA;IACtC,oEAAoE;IACpE,EAAE,CAAC,EAAE,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"TextInputInnerVisualSlot.d.ts","sourceRoot":"","sources":["../../../src/internal/components/TextInputInnerVisualSlot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAC,4BAA4B,EAAC,MAAM,iBAAiB,CAAA;AAIjE,QAAA,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CACtC,KAAK,CAAC,iBAAiB,CAAC;IACtB,qEAAqE;IACrE,mBAAmB,EAAE,OAAO,CAAA;IAC5B,gDAAgD;IAChD,oBAAoB,EAAE,4BAA4B,CAAC,SAAS,CAAC,CAAA;IAC7D,kDAAkD;IAClD,cAAc,EAAE,SAAS,GAAG,UAAU,CAAA;IACtC,oEAAoE;IACpE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB,CAAC,CAyCH,CAAA;AAED,eAAe,wBAAwB,CAAA"}
|
|
@@ -5,92 +5,108 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
5
5
|
import Spinner from '../../Spinner/Spinner.js';
|
|
6
6
|
|
|
7
7
|
const TextInputInnerVisualSlot = t0 => {
|
|
8
|
-
const $ = c(
|
|
8
|
+
const $ = c(21);
|
|
9
9
|
const {
|
|
10
10
|
children,
|
|
11
11
|
hasLoadingIndicator,
|
|
12
12
|
showLoadingIndicator,
|
|
13
13
|
visualPosition,
|
|
14
|
-
id
|
|
14
|
+
id,
|
|
15
|
+
componentPrefix: t1
|
|
15
16
|
} = t0;
|
|
17
|
+
const componentPrefix = t1 === undefined ? "TextInput" : t1;
|
|
16
18
|
const isLeading = visualPosition === "leading";
|
|
17
19
|
if (!children && !hasLoadingIndicator || isLeading && !children && !showLoadingIndicator) {
|
|
18
20
|
return null;
|
|
19
21
|
}
|
|
20
22
|
if (!hasLoadingIndicator) {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
23
|
+
const t2 = isLeading ? `${componentPrefix}.LeadingVisual` : `${componentPrefix}.TrailingVisual`;
|
|
24
|
+
let t3;
|
|
25
|
+
if ($[0] !== children || $[1] !== id || $[2] !== t2) {
|
|
26
|
+
t3 = /*#__PURE__*/jsx("span", {
|
|
24
27
|
className: "TextInput-icon",
|
|
25
28
|
id: id,
|
|
26
29
|
"aria-hidden": "true",
|
|
30
|
+
"data-component": t2,
|
|
27
31
|
children: children
|
|
28
32
|
});
|
|
29
33
|
$[0] = children;
|
|
30
34
|
$[1] = id;
|
|
31
|
-
$[2] =
|
|
35
|
+
$[2] = t2;
|
|
36
|
+
$[3] = t3;
|
|
32
37
|
} else {
|
|
33
|
-
|
|
38
|
+
t3 = $[3];
|
|
34
39
|
}
|
|
35
|
-
return
|
|
40
|
+
return t3;
|
|
36
41
|
}
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
42
|
+
const t2 = isLeading ? `${componentPrefix}.LeadingVisual` : `${componentPrefix}.TrailingVisual`;
|
|
43
|
+
let t3;
|
|
44
|
+
if ($[4] !== children || $[5] !== showLoadingIndicator) {
|
|
45
|
+
t3 = children && /*#__PURE__*/jsx("div", {
|
|
40
46
|
className: clsx(showLoadingIndicator ? styles.SpinnerHidden : styles.SpinnerVisible),
|
|
41
47
|
children: children
|
|
42
48
|
});
|
|
43
|
-
$[
|
|
44
|
-
$[
|
|
45
|
-
$[
|
|
49
|
+
$[4] = children;
|
|
50
|
+
$[5] = showLoadingIndicator;
|
|
51
|
+
$[6] = t3;
|
|
46
52
|
} else {
|
|
47
|
-
|
|
53
|
+
t3 = $[6];
|
|
48
54
|
}
|
|
49
|
-
const
|
|
50
|
-
const
|
|
51
|
-
const
|
|
52
|
-
let
|
|
53
|
-
if ($[
|
|
54
|
-
|
|
55
|
-
$[
|
|
56
|
-
$[
|
|
57
|
-
$[
|
|
58
|
-
$[
|
|
55
|
+
const t4 = showLoadingIndicator ? styles.SpinnerVisible : styles.SpinnerHidden;
|
|
56
|
+
const t5 = children && styles.Spinner;
|
|
57
|
+
const t6 = children && isLeading && styles.SpinnerLeading;
|
|
58
|
+
let t7;
|
|
59
|
+
if ($[7] !== t4 || $[8] !== t5 || $[9] !== t6) {
|
|
60
|
+
t7 = clsx(t4, t5, t6);
|
|
61
|
+
$[7] = t4;
|
|
62
|
+
$[8] = t5;
|
|
63
|
+
$[9] = t6;
|
|
64
|
+
$[10] = t7;
|
|
59
65
|
} else {
|
|
60
|
-
|
|
66
|
+
t7 = $[10];
|
|
61
67
|
}
|
|
62
|
-
const
|
|
63
|
-
let
|
|
64
|
-
if ($[
|
|
65
|
-
|
|
68
|
+
const t8 = children ? undefined : "small";
|
|
69
|
+
let t9;
|
|
70
|
+
if ($[11] !== t7 || $[12] !== t8) {
|
|
71
|
+
t9 = /*#__PURE__*/jsx(Spinner, {
|
|
66
72
|
srText: null,
|
|
67
|
-
className:
|
|
68
|
-
size:
|
|
73
|
+
className: t7,
|
|
74
|
+
size: t8
|
|
75
|
+
});
|
|
76
|
+
$[11] = t7;
|
|
77
|
+
$[12] = t8;
|
|
78
|
+
$[13] = t9;
|
|
79
|
+
} else {
|
|
80
|
+
t9 = $[13];
|
|
81
|
+
}
|
|
82
|
+
let t10;
|
|
83
|
+
if ($[14] !== id || $[15] !== t3 || $[16] !== t9) {
|
|
84
|
+
t10 = /*#__PURE__*/jsxs("div", {
|
|
85
|
+
className: styles.Box,
|
|
86
|
+
id: id,
|
|
87
|
+
children: [t3, t9]
|
|
69
88
|
});
|
|
70
|
-
$[
|
|
71
|
-
$[
|
|
72
|
-
$[
|
|
89
|
+
$[14] = id;
|
|
90
|
+
$[15] = t3;
|
|
91
|
+
$[16] = t9;
|
|
92
|
+
$[17] = t10;
|
|
73
93
|
} else {
|
|
74
|
-
|
|
94
|
+
t10 = $[17];
|
|
75
95
|
}
|
|
76
|
-
let
|
|
77
|
-
if ($[
|
|
78
|
-
|
|
96
|
+
let t11;
|
|
97
|
+
if ($[18] !== t10 || $[19] !== t2) {
|
|
98
|
+
t11 = /*#__PURE__*/jsx("span", {
|
|
79
99
|
className: "TextInput-icon",
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
id: id,
|
|
83
|
-
children: [t1, t7]
|
|
84
|
-
})
|
|
100
|
+
"data-component": t2,
|
|
101
|
+
children: t10
|
|
85
102
|
});
|
|
86
|
-
$[
|
|
87
|
-
$[
|
|
88
|
-
$[
|
|
89
|
-
$[16] = t8;
|
|
103
|
+
$[18] = t10;
|
|
104
|
+
$[19] = t2;
|
|
105
|
+
$[20] = t11;
|
|
90
106
|
} else {
|
|
91
|
-
|
|
107
|
+
t11 = $[20];
|
|
92
108
|
}
|
|
93
|
-
return
|
|
109
|
+
return t11;
|
|
94
110
|
};
|
|
95
111
|
|
|
96
112
|
export { TextInputInnerVisualSlot as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInputWrapper.d.ts","sourceRoot":"","sources":["../../../src/internal/components/TextInputWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,KAAK,cAAc,EAAC,MAAM,OAAO,CAAA;AAChD,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,wCAAwC,CAAA;AAKhF,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAEzD,KAAK,+BAA+B,GAAG;IACrC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC,0CAA0C;IAC1C,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,iEAAiE;IACjE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC3B,CAAA;AAOD,eAAO,MAAM,oBAAoB;uBAJZ,OAAO;wBACN,OAAO;
|
|
1
|
+
{"version":3,"file":"TextInputWrapper.d.ts","sourceRoot":"","sources":["../../../src/internal/components/TextInputWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,KAAK,cAAc,EAAC,MAAM,OAAO,CAAA;AAChD,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,wCAAwC,CAAA;AAKhF,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAEzD,KAAK,+BAA+B,GAAG;IACrC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC,0CAA0C;IAC1C,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,iEAAiE;IACjE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC3B,CAAA;AAOD,eAAO,MAAM,oBAAoB;uBAJZ,OAAO;wBACN,OAAO;uEAoD5B,CAAA;AAGD,eAAO,MAAM,gBAAgB;uBAxDR,OAAO;wBACN,OAAO;kHAoE3B,CAAA;AAEF,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAA;AAChF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAA;AACxE,eAAe,gBAAgB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StressTest.d.ts","sourceRoot":"","sources":["../../src/utils/StressTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,MAAM,WAAW,eAAe;IAC9B,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;CAC7E;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,
|
|
1
|
+
{"version":3,"file":"StressTest.d.ts","sourceRoot":"","sources":["../../src/utils/StressTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,MAAM,WAAW,eAAe;IAC9B,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;CAC7E;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0HhD,CAAA"}
|
|
@@ -1031,7 +1031,7 @@
|
|
|
1031
1031
|
},
|
|
1032
1032
|
{
|
|
1033
1033
|
"id": "components-autocomplete-features--in-a-dialog",
|
|
1034
|
-
"code": "() => {\n const outerContainerRef = useRef<HTMLDivElement>(null)\n const [mounted, setMounted] = useState(false)\n const [isDialogOpen, setIsDialogOpen] = useState(false)\n useEffect(() => {\n if (outerContainerRef.current instanceof HTMLElement) {\n registerPortalRoot(outerContainerRef.current, 'outerContainer')\n
|
|
1034
|
+
"code": "() => {\n const outerContainerRef = useRef<HTMLDivElement>(null)\n const [mounted, setMounted] = useState(false)\n const [isDialogOpen, setIsDialogOpen] = useState(false)\n useEffect(() => {\n if (outerContainerRef.current instanceof HTMLElement) {\n registerPortalRoot(outerContainerRef.current, 'outerContainer')\n setMounted(true)\n }\n }, [isDialogOpen])\n return (\n <>\n <Button onClick={() => setIsDialogOpen(true)}>Show dialog</Button>\n <Dialog\n aria-label=\"Dialog with autocomplete\"\n id=\"dialog-with-autocomplete\"\n isOpen={isDialogOpen}\n onDismiss={() => setIsDialogOpen(false)}\n >\n <div ref={outerContainerRef}>\n <form className={classes.FormPadding}>\n {mounted ? (\n <FormControl>\n <FormControl.Label id=\"autocompleteLabel\">\n Default label\n </FormControl.Label>\n <Autocomplete>\n <Autocomplete.Input data-testid=\"autocompleteInput\" />\n <Autocomplete.Overlay portalContainerName=\"outerContainer\">\n <Autocomplete.Menu\n items={items}\n selectedItemIds={[]}\n aria-labelledby=\"autocompleteLabel\"\n />\n </Autocomplete.Overlay>\n </Autocomplete>\n </FormControl>\n ) : null}\n </form>\n </div>\n </Dialog>\n <p>\n The Autocomplete.Overlay is portalled to a div inside the Dialog to\n ensure it appears above the dialog in the stacking context.\n </p>\n </>\n )\n}"
|
|
1035
1035
|
}
|
|
1036
1036
|
],
|
|
1037
1037
|
"importPath": "@primer/react",
|
|
@@ -1174,7 +1174,7 @@
|
|
|
1174
1174
|
},
|
|
1175
1175
|
{
|
|
1176
1176
|
"id": "components-avatar-features--square",
|
|
1177
|
-
"code": "() => (\n <Avatar\n square\n alt=\"primer\"\n src=\"https://avatars.githubusercontent.com/
|
|
1177
|
+
"code": "() => (\n <Avatar\n square\n alt=\"primer\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n)"
|
|
1178
1178
|
},
|
|
1179
1179
|
{
|
|
1180
1180
|
"id": "components-avatar-features--size",
|
|
@@ -1224,35 +1224,35 @@
|
|
|
1224
1224
|
"stories": [
|
|
1225
1225
|
{
|
|
1226
1226
|
"id": "components-avatarstack-features--align-left",
|
|
1227
|
-
"code": "() => (\n <AvatarStack>\n <Avatar\n alt=\"Primer logo\"\n src=\"https://avatars.githubusercontent.com/
|
|
1227
|
+
"code": "() => (\n <AvatarStack>\n <Avatar\n alt=\"Primer logo\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n <Avatar\n alt=\"GitHub logo\"\n src=\"https://avatars.githubusercontent.com/github\"\n />\n <Avatar alt=\"Atom logo\" src=\"https://avatars.githubusercontent.com/atom\" />\n <Avatar\n alt=\"GitHub Desktop logo\"\n src=\"https://avatars.githubusercontent.com/u/13171334?v=4\"\n />\n </AvatarStack>\n)"
|
|
1228
1228
|
},
|
|
1229
1229
|
{
|
|
1230
1230
|
"id": "components-avatarstack-features--align-right",
|
|
1231
|
-
"code": "() => (\n <AvatarStack alignRight>\n <Avatar\n alt=\"Primer logo\"\n src=\"https://avatars.githubusercontent.com/
|
|
1231
|
+
"code": "() => (\n <AvatarStack alignRight>\n <Avatar\n alt=\"Primer logo\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n <Avatar\n alt=\"GitHub logo\"\n src=\"https://avatars.githubusercontent.com/github\"\n />\n <Avatar alt=\"Atom logo\" src=\"https://avatars.githubusercontent.com/atom\" />\n <Avatar\n alt=\"GitHub Desktop logo\"\n src=\"https://avatars.githubusercontent.com/u/13171334?v=4\"\n />\n </AvatarStack>\n)"
|
|
1232
1232
|
},
|
|
1233
1233
|
{
|
|
1234
1234
|
"id": "components-avatarstack-features--disable-expand-on-hover",
|
|
1235
|
-
"code": "() => (\n <AvatarStack disableExpand>\n <Avatar\n alt=\"Primer logo\"\n src=\"https://avatars.githubusercontent.com/
|
|
1235
|
+
"code": "() => (\n <AvatarStack disableExpand>\n <Avatar\n alt=\"Primer logo\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n <Avatar\n alt=\"GitHub logo\"\n src=\"https://avatars.githubusercontent.com/github\"\n />\n <Avatar alt=\"Atom logo\" src=\"https://avatars.githubusercontent.com/atom\" />\n <Avatar\n alt=\"GitHub Desktop logo\"\n src=\"https://avatars.githubusercontent.com/u/13171334?v=4\"\n />\n </AvatarStack>\n)"
|
|
1236
1236
|
},
|
|
1237
1237
|
{
|
|
1238
1238
|
"id": "components-avatarstack-features--custom-size-on-parent",
|
|
1239
|
-
"code": "() => (\n <AvatarStack size={32}>\n <Avatar\n alt=\"Primer logo\"\n src=\"https://avatars.githubusercontent.com/
|
|
1239
|
+
"code": "() => (\n <AvatarStack size={32}>\n <Avatar\n alt=\"Primer logo\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n <Avatar\n alt=\"GitHub logo\"\n src=\"https://avatars.githubusercontent.com/github\"\n />\n <Avatar alt=\"Atom logo\" src=\"https://avatars.githubusercontent.com/atom\" />\n <Avatar\n alt=\"GitHub Desktop logo\"\n src=\"https://avatars.githubusercontent.com/u/13171334?v=4\"\n />\n </AvatarStack>\n)"
|
|
1240
1240
|
},
|
|
1241
1241
|
{
|
|
1242
1242
|
"id": "components-avatarstack-features--custom-size-on-parent-responsive",
|
|
1243
|
-
"code": "() => (\n <AvatarStack\n size={{\n narrow: 32,\n regular: 48,\n wide: 64,\n }}\n >\n <Avatar\n alt=\"Primer logo\"\n src=\"https://avatars.githubusercontent.com/
|
|
1243
|
+
"code": "() => (\n <AvatarStack\n size={{\n narrow: 32,\n regular: 48,\n wide: 64,\n }}\n >\n <Avatar\n alt=\"Primer logo\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n <Avatar\n alt=\"GitHub logo\"\n src=\"https://avatars.githubusercontent.com/github\"\n />\n <Avatar alt=\"Atom logo\" src=\"https://avatars.githubusercontent.com/atom\" />\n <Avatar\n alt=\"GitHub Desktop logo\"\n src=\"https://avatars.githubusercontent.com/u/13171334?v=4\"\n />\n </AvatarStack>\n)"
|
|
1244
1244
|
},
|
|
1245
1245
|
{
|
|
1246
1246
|
"id": "components-avatarstack-features--custom-size-on-children",
|
|
1247
|
-
"code": "() => (\n <AvatarStack>\n <Avatar\n size={20}\n alt=\"Primer logo\"\n src=\"https://avatars.githubusercontent.com/
|
|
1247
|
+
"code": "() => (\n <AvatarStack>\n <Avatar\n size={20}\n alt=\"Primer logo\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n <Avatar\n size={32}\n alt=\"GitHub logo\"\n src=\"https://avatars.githubusercontent.com/github\"\n />\n <Avatar\n size={48}\n alt=\"Atom logo\"\n src=\"https://avatars.githubusercontent.com/atom\"\n />\n <Avatar\n size={64}\n alt=\"GitHub Desktop logo\"\n src=\"https://avatars.githubusercontent.com/u/13171334?v=4\"\n />\n </AvatarStack>\n)"
|
|
1248
1248
|
},
|
|
1249
1249
|
{
|
|
1250
1250
|
"id": "components-avatarstack-features--custom-size-on-children-responsive",
|
|
1251
|
-
"code": "() => (\n <AvatarStack>\n <Avatar\n size={{\n narrow: 16,\n regular: 32,\n wide: 48,\n }}\n alt=\"Primer logo\"\n src=\"https://avatars.githubusercontent.com/
|
|
1251
|
+
"code": "() => (\n <AvatarStack>\n <Avatar\n size={{\n narrow: 16,\n regular: 32,\n wide: 48,\n }}\n alt=\"Primer logo\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n <Avatar\n size={{\n narrow: 32,\n regular: 48,\n wide: 64,\n }}\n alt=\"GitHub logo\"\n src=\"https://avatars.githubusercontent.com/github\"\n />\n <Avatar\n size={{\n narrow: 48,\n regular: 64,\n wide: 96,\n }}\n alt=\"Atom logo\"\n src=\"https://avatars.githubusercontent.com/atom\"\n />\n <Avatar\n size={{\n narrow: 64,\n regular: 96,\n wide: 120,\n }}\n alt=\"GitHub Desktop logo\"\n src=\"https://avatars.githubusercontent.com/u/13171334?v=4\"\n />\n </AvatarStack>\n)"
|
|
1252
1252
|
},
|
|
1253
1253
|
{
|
|
1254
1254
|
"id": "components-avatarstack-features--with-single-avatar",
|
|
1255
|
-
"code": "() => (\n <AvatarStack>\n <Avatar\n alt=\"Primer logo\"\n src=\"https://avatars.githubusercontent.com/
|
|
1255
|
+
"code": "() => (\n <AvatarStack>\n <Avatar\n alt=\"Primer logo\"\n src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n />\n </AvatarStack>\n)"
|
|
1256
1256
|
}
|
|
1257
1257
|
],
|
|
1258
1258
|
"importPath": "@primer/react",
|
|
@@ -2144,6 +2144,12 @@
|
|
|
2144
2144
|
"type": "'none' | 'condensed' | 'normal'",
|
|
2145
2145
|
"defaultValue": "'normal'",
|
|
2146
2146
|
"description": "Controls the internal padding of the Card."
|
|
2147
|
+
},
|
|
2148
|
+
{
|
|
2149
|
+
"name": "borderRadius",
|
|
2150
|
+
"type": "'medium' | 'large'",
|
|
2151
|
+
"defaultValue": "'large'",
|
|
2152
|
+
"description": "Controls the border radius of the Card."
|
|
2147
2153
|
}
|
|
2148
2154
|
],
|
|
2149
2155
|
"subcomponents": [
|
|
@@ -3369,7 +3375,7 @@
|
|
|
3369
3375
|
},
|
|
3370
3376
|
{
|
|
3371
3377
|
"id": "components-formcontrol-features--with-custom-input",
|
|
3372
|
-
"code": "() => {\n const [value, setValue] = React.useState('mona lisa')\n const [validationResult, setValidationResult] = React.useState('')\n const doesValueContainSpaces = (inputValue: string) => /\\s/g.test(inputValue)\n const handleInputChange = (e: {\n currentTarget: {\n value: React.SetStateAction<string>\n }\n }) => {\n setValue(e.currentTarget.value)\n }\n React.useEffect(() => {\n if (doesValueContainSpaces(value)) {\n setValidationResult('noSpaces')\n } else if (value) {\n setValidationResult('validName')\n }\n }, [value])\n return (\n <div className={classes.GridContainer}>\n <FormControl>\n <FormControl.Label htmlFor=\"custom-input\">\n GitHub handle\n </FormControl.Label>\n <CustomTextInput\n id=\"custom-input\"\n aria-describedby=\"custom-input-validation custom-input-caption\"\n aria-invalid={validationResult === 'noSpaces'}\n onChange={handleInputChange}\n />\n {validationResult === 'noSpaces' && (\n <FormControl.Validation id=\"custom-input-validation\" variant=\"error\">\n GitHub handles cannot contain spaces\n </FormControl.Validation>\n )}\n {validationResult === 'validName' && (\n <FormControl.Validation\n id=\"custom-input-validation\"\n variant=\"success\"\n >\n Valid name\n </FormControl.Validation>\n )}\n <FormControl.Caption id=\"custom-input-caption\">\n With or without "@". For example "monalisa" or\n "@monalisa"\n </FormControl.Caption>\n </FormControl>\n\n <CheckboxGroup>\n <CheckboxGroup.Label>Checkboxes</CheckboxGroup.Label>\n <FormControl layout=\"horizontal\">\n <CustomCheckboxInput\n id=\"custom-checkbox-one\"\n aria-describedby=\"custom-checkbox-one-caption\"\n value=\"checkOne\"\n />\n <FormControl.Label htmlFor=\"custom-checkbox-one\">\n Checkbox one\n </FormControl.Label>\n <FormControl.Caption id=\"custom-checkbox-one-caption\">\n Hint text for checkbox one\n </FormControl.Caption>\n </FormControl>\n <FormControl layout=\"horizontal\">\n <CustomCheckboxInput\n id=\"custom-checkbox-two\"\n aria-describedby=\"custom-checkbox-two-caption\"\n value=\"checkTwo\"\n />\n <FormControl.Label htmlFor=\"custom-checkbox-two\">\n Checkbox two\n </FormControl.Label>\n <FormControl.Caption id=\"custom-checkbox-two-caption\">\n Hint text for checkbox two\n </FormControl.Caption>\n </FormControl>\n </CheckboxGroup>\n </div>\n )\n}"
|
|
3378
|
+
"code": "() => {\n const [value, setValue] = React.useState('mona lisa')\n const [validationResult, setValidationResult] = React.useState('')\n const doesValueContainSpaces = (inputValue: string) => /\\s/g.test(inputValue)\n const handleInputChange = (e: {\n currentTarget: {\n value: React.SetStateAction<string>\n }\n }) => {\n setValue(e.currentTarget.value)\n }\n React.useEffect(() => {\n if (doesValueContainSpaces(value)) {\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setValidationResult('noSpaces')\n } else if (value) {\n setValidationResult('validName')\n }\n }, [value])\n return (\n <div className={classes.GridContainer}>\n <FormControl>\n <FormControl.Label htmlFor=\"custom-input\">\n GitHub handle\n </FormControl.Label>\n <CustomTextInput\n id=\"custom-input\"\n aria-describedby=\"custom-input-validation custom-input-caption\"\n aria-invalid={validationResult === 'noSpaces'}\n onChange={handleInputChange}\n />\n {validationResult === 'noSpaces' && (\n <FormControl.Validation id=\"custom-input-validation\" variant=\"error\">\n GitHub handles cannot contain spaces\n </FormControl.Validation>\n )}\n {validationResult === 'validName' && (\n <FormControl.Validation\n id=\"custom-input-validation\"\n variant=\"success\"\n >\n Valid name\n </FormControl.Validation>\n )}\n <FormControl.Caption id=\"custom-input-caption\">\n With or without "@". For example "monalisa" or\n "@monalisa"\n </FormControl.Caption>\n </FormControl>\n\n <CheckboxGroup>\n <CheckboxGroup.Label>Checkboxes</CheckboxGroup.Label>\n <FormControl layout=\"horizontal\">\n <CustomCheckboxInput\n id=\"custom-checkbox-one\"\n aria-describedby=\"custom-checkbox-one-caption\"\n value=\"checkOne\"\n />\n <FormControl.Label htmlFor=\"custom-checkbox-one\">\n Checkbox one\n </FormControl.Label>\n <FormControl.Caption id=\"custom-checkbox-one-caption\">\n Hint text for checkbox one\n </FormControl.Caption>\n </FormControl>\n <FormControl layout=\"horizontal\">\n <CustomCheckboxInput\n id=\"custom-checkbox-two\"\n aria-describedby=\"custom-checkbox-two-caption\"\n value=\"checkTwo\"\n />\n <FormControl.Label htmlFor=\"custom-checkbox-two\">\n Checkbox two\n </FormControl.Label>\n <FormControl.Caption id=\"custom-checkbox-two-caption\">\n Hint text for checkbox two\n </FormControl.Caption>\n </FormControl>\n </CheckboxGroup>\n </div>\n )\n}"
|
|
3373
3379
|
},
|
|
3374
3380
|
{
|
|
3375
3381
|
"id": "components-formcontrol-features--with-checkbox-and-radio-inputs",
|
|
@@ -3381,7 +3387,7 @@
|
|
|
3381
3387
|
},
|
|
3382
3388
|
{
|
|
3383
3389
|
"id": "components-formcontrol-features--validation-example",
|
|
3384
|
-
"code": "() => {\n const [value, setValue] = React.useState('mona lisa')\n const [validationResult, setValidationResult] = React.useState('')\n const doesValueContainSpaces = (inputValue: string) => /\\s/g.test(inputValue)\n const handleInputChange = (e: {\n currentTarget: {\n value: React.SetStateAction<string>\n }\n }) => {\n setValue(e.currentTarget.value)\n }\n React.useEffect(() => {\n if (doesValueContainSpaces(value)) {\n setValidationResult('noSpaces')\n } else if (value) {\n setValidationResult('validName')\n }\n }, [value])\n return (\n <FormControl>\n <FormControl.Label>GitHub handle</FormControl.Label>\n <TextInput block value={value} onChange={handleInputChange} />\n {validationResult === 'noSpaces' && (\n <FormControl.Validation variant=\"error\">\n GitHub handles cannot contain spaces\n </FormControl.Validation>\n )}\n {validationResult === 'validName' && (\n <FormControl.Validation variant=\"success\">\n Valid name\n </FormControl.Validation>\n )}\n <FormControl.Caption>\n With or without "@". For example "monalisa" or\n "@monalisa"\n </FormControl.Caption>\n </FormControl>\n )\n}"
|
|
3390
|
+
"code": "() => {\n const [value, setValue] = React.useState('mona lisa')\n const [validationResult, setValidationResult] = React.useState('')\n const doesValueContainSpaces = (inputValue: string) => /\\s/g.test(inputValue)\n const handleInputChange = (e: {\n currentTarget: {\n value: React.SetStateAction<string>\n }\n }) => {\n setValue(e.currentTarget.value)\n }\n React.useEffect(() => {\n if (doesValueContainSpaces(value)) {\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setValidationResult('noSpaces')\n } else if (value) {\n setValidationResult('validName')\n }\n }, [value])\n return (\n <FormControl>\n <FormControl.Label>GitHub handle</FormControl.Label>\n <TextInput block value={value} onChange={handleInputChange} />\n {validationResult === 'noSpaces' && (\n <FormControl.Validation variant=\"error\">\n GitHub handles cannot contain spaces\n </FormControl.Validation>\n )}\n {validationResult === 'validName' && (\n <FormControl.Validation variant=\"success\">\n Valid name\n </FormControl.Validation>\n )}\n <FormControl.Caption>\n With or without "@". For example "monalisa" or\n "@monalisa"\n </FormControl.Caption>\n </FormControl>\n )\n}"
|
|
3385
3391
|
},
|
|
3386
3392
|
{
|
|
3387
3393
|
"id": "components-formcontrol-features--with-select-panel",
|
|
@@ -9154,7 +9160,7 @@
|
|
|
9154
9160
|
},
|
|
9155
9161
|
{
|
|
9156
9162
|
"id": "deprecated-components-selectpanel-examples--with-filter-buttons",
|
|
9157
|
-
"code": "() => {\n const [selectedFilter, setSelectedFilter] = React.useState<\n 'branches' | 'tags'\n >('branches')\n\n /* Selection */\n const [savedInitialRef, setSavedInitialRef] = React.useState(data.ref)\n const [selectedRef, setSelectedRef] = React.useState(savedInitialRef)\n const onSubmit = () => {\n setSavedInitialRef(selectedRef)\n data.ref = selectedRef // pretending to persist changes\n\n // eslint-disable-next-line no-console\n console.log('form submitted')\n }\n const onCancel = () => {\n setSelectedRef(savedInitialRef)\n }\n\n /* Filter */\n const [query, setQuery] = React.useState('')\n const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = (\n event,\n ) => {\n const query = event.currentTarget.value\n setQuery(query)\n }\n const [filteredRefs, setFilteredRefs] = React.useState(data.branches)\n const setSearchResults = (\n query: string,\n selectedFilter: 'branches' | 'tags',\n ) => {\n if (query === '') setFilteredRefs(data[selectedFilter])\n else {\n setFilteredRefs(\n data[selectedFilter]\n .map((item) => {\n if (item.name.toLowerCase().startsWith(query))\n return {\n priority: 1,\n item,\n }\n else if (item.name.toLowerCase().includes(query))\n return {\n priority: 2,\n item,\n }\n else\n return {\n priority: -1,\n item,\n }\n })\n .filter((result) => result.priority > 0)\n .map((result) => result.item),\n )\n }\n }\n React.useEffect(\n function updateSearchResults() {\n setSearchResults(query, selectedFilter)\n },\n [query, selectedFilter],\n )\n const sortingFn = (ref: { id: string }) => {\n if (ref.id === savedInitialRef) return -1\n else return 1\n }\n const itemsToShow = query\n ? filteredRefs\n : data[selectedFilter].sort(sortingFn)\n return (\n <>\n <h1>With Filter Buttons {savedInitialRef}</h1>\n\n <SelectPanel\n title=\"Switch branches/tags\"\n onSubmit={onSubmit}\n onCancel={onCancel}\n >\n <SelectPanel.Button\n leadingVisual={GitBranchIcon}\n trailingVisual={TriangleDownIcon}\n >\n {savedInitialRef}\n </SelectPanel.Button>\n\n <SelectPanel.Header>\n <SelectPanel.SearchInput onChange={onSearchInputChange} />\n\n <div id=\"filters\" className={classes.FilterButtons}>\n <Button\n variant=\"invisible\"\n style={{\n fontWeight:\n selectedFilter === 'branches'\n ? 'var(--base-text-weight-medium)'\n : 'var(--base-text-weight-normal)',\n color: 'var(--fgColor-default)',\n }}\n onClick={() => setSelectedFilter('branches')}\n count={20}\n >\n Branches\n </Button>\n <Button\n variant=\"invisible\"\n style={{\n fontWeight:\n selectedFilter === 'tags'\n ? 'var(--base-text-weight-medium)'\n : 'var(--base-text-weight-normal)',\n color: 'var(--fgColor-default)',\n }}\n onClick={() => setSelectedFilter('tags')}\n count={8}\n >\n Tags\n </Button>\n </div>\n </SelectPanel.Header>\n\n {itemsToShow.length === 0 ? (\n <SelectPanel.Message\n variant=\"empty\"\n title={`No labels found for \"${query}\"`}\n >\n Try a different search term\n </SelectPanel.Message>\n ) : (\n <ActionList>\n {itemsToShow.map((item) => (\n <ActionList.Item\n key={item.id}\n selected={selectedRef === item.id}\n onSelect={() => setSelectedRef(item.id)}\n >\n {item.name}\n <ActionList.TrailingVisual>\n {item.trailingInfo}\n </ActionList.TrailingVisual>\n </ActionList.Item>\n ))}\n </ActionList>\n )}\n\n <SelectPanel.Footer>\n <SelectPanel.SecondaryAction\n variant=\"link\"\n href={`/${selectedFilter}`}\n >\n View all {selectedFilter}\n </SelectPanel.SecondaryAction>\n </SelectPanel.Footer>\n </SelectPanel>\n </>\n )\n}"
|
|
9163
|
+
"code": "() => {\n const [selectedFilter, setSelectedFilter] = React.useState<\n 'branches' | 'tags'\n >('branches')\n\n /* Selection */\n const [savedInitialRef, setSavedInitialRef] = React.useState(data.ref)\n const [selectedRef, setSelectedRef] = React.useState(savedInitialRef)\n const onSubmit = () => {\n setSavedInitialRef(selectedRef)\n data.ref = selectedRef // pretending to persist changes\n\n // eslint-disable-next-line no-console\n console.log('form submitted')\n }\n const onCancel = () => {\n setSelectedRef(savedInitialRef)\n }\n\n /* Filter */\n const [query, setQuery] = React.useState('')\n const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = (\n event,\n ) => {\n const query = event.currentTarget.value\n setQuery(query)\n }\n const [filteredRefs, setFilteredRefs] = React.useState(data.branches)\n const setSearchResults = (\n query: string,\n selectedFilter: 'branches' | 'tags',\n ) => {\n if (query === '') setFilteredRefs(data[selectedFilter])\n else {\n setFilteredRefs(\n data[selectedFilter]\n .map((item) => {\n if (item.name.toLowerCase().startsWith(query))\n return {\n priority: 1,\n item,\n }\n else if (item.name.toLowerCase().includes(query))\n return {\n priority: 2,\n item,\n }\n else\n return {\n priority: -1,\n item,\n }\n })\n .filter((result) => result.priority > 0)\n .map((result) => result.item),\n )\n }\n }\n React.useEffect(\n function updateSearchResults() {\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setSearchResults(query, selectedFilter)\n },\n [query, selectedFilter],\n )\n const sortingFn = (ref: { id: string }) => {\n if (ref.id === savedInitialRef) return -1\n else return 1\n }\n const itemsToShow = query\n ? filteredRefs\n : data[selectedFilter].sort(sortingFn)\n return (\n <>\n <h1>With Filter Buttons {savedInitialRef}</h1>\n\n <SelectPanel\n title=\"Switch branches/tags\"\n onSubmit={onSubmit}\n onCancel={onCancel}\n >\n <SelectPanel.Button\n leadingVisual={GitBranchIcon}\n trailingVisual={TriangleDownIcon}\n >\n {savedInitialRef}\n </SelectPanel.Button>\n\n <SelectPanel.Header>\n <SelectPanel.SearchInput onChange={onSearchInputChange} />\n\n <div id=\"filters\" className={classes.FilterButtons}>\n <Button\n variant=\"invisible\"\n style={{\n fontWeight:\n selectedFilter === 'branches'\n ? 'var(--base-text-weight-medium)'\n : 'var(--base-text-weight-normal)',\n color: 'var(--fgColor-default)',\n }}\n onClick={() => setSelectedFilter('branches')}\n count={20}\n >\n Branches\n </Button>\n <Button\n variant=\"invisible\"\n style={{\n fontWeight:\n selectedFilter === 'tags'\n ? 'var(--base-text-weight-medium)'\n : 'var(--base-text-weight-normal)',\n color: 'var(--fgColor-default)',\n }}\n onClick={() => setSelectedFilter('tags')}\n count={8}\n >\n Tags\n </Button>\n </div>\n </SelectPanel.Header>\n\n {itemsToShow.length === 0 ? (\n <SelectPanel.Message\n variant=\"empty\"\n title={`No labels found for \"${query}\"`}\n >\n Try a different search term\n </SelectPanel.Message>\n ) : (\n <ActionList>\n {itemsToShow.map((item) => (\n <ActionList.Item\n key={item.id}\n selected={selectedRef === item.id}\n onSelect={() => setSelectedRef(item.id)}\n >\n {item.name}\n <ActionList.TrailingVisual>\n {item.trailingInfo}\n </ActionList.TrailingVisual>\n </ActionList.Item>\n ))}\n </ActionList>\n )}\n\n <SelectPanel.Footer>\n <SelectPanel.SecondaryAction\n variant=\"link\"\n href={`/${selectedFilter}`}\n >\n View all {selectedFilter}\n </SelectPanel.SecondaryAction>\n </SelectPanel.Footer>\n </SelectPanel>\n </>\n )\n}"
|
|
9158
9164
|
}
|
|
9159
9165
|
],
|
|
9160
9166
|
"importPath": "@primer/react/experimental",
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/react",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "38.21.0
|
|
4
|
+
"version": "38.21.0",
|
|
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",
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
"@oddbird/popover-polyfill": "^0.5.2",
|
|
82
82
|
"@primer/behaviors": "^1.10.2",
|
|
83
83
|
"@primer/live-region-element": "^0.7.1",
|
|
84
|
-
"@primer/octicons-react": "^19.
|
|
84
|
+
"@primer/octicons-react": "^19.24.1",
|
|
85
85
|
"@primer/primitives": "10.x || 11.x",
|
|
86
86
|
"@tanstack/react-virtual": "^3.13.18",
|
|
87
87
|
"clsx": "^2.1.1",
|