@primer/react 38.41.0 → 38.42.0-rc.29d77833a
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/DataTable/DataTable.d.ts +27 -2
- package/dist/DataTable/DataTable.js +119 -72
- package/dist/DataTable/{Table-50e68700.css → Table-6ee6a868.css} +2 -2
- package/dist/DataTable/Table-6ee6a868.css.map +1 -0
- package/dist/DataTable/Table.d.ts +76 -1
- package/dist/DataTable/Table.js +214 -15
- package/dist/DataTable/Table.module.css.js +3 -1
- package/dist/DataTable/index.d.ts +5 -3
- package/dist/DataTable/index.js +3 -1
- package/dist/DataTable/row.d.ts +3 -2
- package/dist/DataTable/useTable.js +185 -61
- package/dist/FormControl/FormControl.js +55 -80
- package/dist/Overlay/Overlay.d.ts +2 -0
- package/dist/Overlay/Overlay.js +4 -2
- package/dist/Textarea/Textarea.d.ts +2 -2
- package/dist/experimental/index.d.ts +3 -3
- package/dist/hooks/useOpenAndCloseFocus.d.ts +3 -1
- package/dist/hooks/useOpenAndCloseFocus.js +28 -16
- package/dist/hooks/useOverlay.d.ts +3 -1
- package/dist/hooks/useOverlay.js +24 -22
- package/dist/internal/components/TextInputWrapper.d.ts +3 -0
- package/generated/components.json +142 -4
- package/generated/hooks.json +12 -0
- package/package.json +2 -2
- package/dist/DataTable/Table-50e68700.css.map +0 -1
|
@@ -24,7 +24,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
|
24
24
|
import { clsx } from "clsx";
|
|
25
25
|
var FormControl_default = Object.assign(/* @__PURE__ */ React.forwardRef((t0, ref) => {
|
|
26
26
|
var _slots$validation, _slots$label;
|
|
27
|
-
const $ = c(
|
|
27
|
+
const $ = c(23);
|
|
28
28
|
const { children, disabled: disabledProp, layout: t1, id: idProp, required, className, style } = t0;
|
|
29
29
|
const layout = t1 === void 0 ? "vertical" : t1;
|
|
30
30
|
let t2;
|
|
@@ -78,87 +78,65 @@ var FormControl_default = Object.assign(/* @__PURE__ */ React.forwardRef((t0, re
|
|
|
78
78
|
warning(isRadioInput && childrenWithoutSlots.find(_temp), "An individual radio cannot be a required field.");
|
|
79
79
|
} else warning(!!slots.leadingVisual, "A leading visual is only rendered for a checkbox or radio form control. If you want to render a leading visual inside of your input, check if your input supports a leading visual.");
|
|
80
80
|
const isLabelHidden = (_slots$label = slots.label) === null || _slots$label === void 0 ? void 0 : _slots$label.props.visuallyHidden;
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
required: required && !isRadioInput,
|
|
85
|
-
"aria-describedby": captionId
|
|
86
|
-
}) : null;
|
|
87
|
-
let t5;
|
|
88
|
-
if ($[4] !== childrenWithoutSlots) {
|
|
89
|
-
t5 = childrenWithoutSlots.filter(_temp2);
|
|
90
|
-
$[4] = childrenWithoutSlots;
|
|
91
|
-
$[5] = t5;
|
|
92
|
-
} else t5 = $[5];
|
|
93
|
-
let t6;
|
|
94
|
-
if ($[6] !== t4 || $[7] !== t5) {
|
|
95
|
-
t6 = /* @__PURE__ */ jsxs("div", {
|
|
96
|
-
className: FormControl_module_css_default.ControlChoiceInputs,
|
|
97
|
-
children: [t4, t5]
|
|
98
|
-
});
|
|
99
|
-
$[6] = t4;
|
|
100
|
-
$[7] = t5;
|
|
101
|
-
$[8] = t6;
|
|
102
|
-
} else t6 = $[8];
|
|
103
|
-
let t7;
|
|
104
|
-
if ($[9] !== disabled || $[10] !== slots.caption || $[11] !== slots.leadingVisual) {
|
|
105
|
-
t7 = slots.leadingVisual ? /* @__PURE__ */ jsx("div", {
|
|
81
|
+
let t4;
|
|
82
|
+
if ($[4] !== disabled || $[5] !== slots.caption || $[6] !== slots.leadingVisual) {
|
|
83
|
+
t4 = slots.leadingVisual ? /* @__PURE__ */ jsx("div", {
|
|
106
84
|
className: FormControl_module_css_default.LeadingVisual,
|
|
107
85
|
"data-disabled": disabled ? "" : void 0,
|
|
108
86
|
"data-has-caption": slots.caption ? "" : void 0,
|
|
109
87
|
children: slots.leadingVisual
|
|
110
88
|
}) : null;
|
|
111
|
-
$[
|
|
112
|
-
$[
|
|
113
|
-
$[
|
|
114
|
-
$[
|
|
115
|
-
} else
|
|
116
|
-
let
|
|
117
|
-
if ($[
|
|
118
|
-
|
|
89
|
+
$[4] = disabled;
|
|
90
|
+
$[5] = slots.caption;
|
|
91
|
+
$[6] = slots.leadingVisual;
|
|
92
|
+
$[7] = t4;
|
|
93
|
+
} else t4 = $[7];
|
|
94
|
+
let t5;
|
|
95
|
+
if ($[8] !== slots.caption || $[9] !== slots.label) {
|
|
96
|
+
t5 = /* @__PURE__ */ jsxs("div", {
|
|
119
97
|
className: FormControl_module_css_default.LabelContainer,
|
|
120
98
|
children: [slots.label, slots.caption]
|
|
121
99
|
});
|
|
122
|
-
$[
|
|
123
|
-
$[
|
|
124
|
-
$[
|
|
125
|
-
} else
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
100
|
+
$[8] = slots.caption;
|
|
101
|
+
$[9] = slots.label;
|
|
102
|
+
$[10] = t5;
|
|
103
|
+
} else t5 = $[10];
|
|
104
|
+
const InputChildren = /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
105
|
+
/* @__PURE__ */ jsxs("div", {
|
|
106
|
+
className: FormControl_module_css_default.ControlChoiceInputs,
|
|
107
|
+
children: [/*#__PURE__*/ React.isValidElement(InputComponent) ? /*#__PURE__*/ React.cloneElement(InputComponent, {
|
|
108
|
+
id,
|
|
109
|
+
disabled,
|
|
110
|
+
required: required && !isRadioInput,
|
|
111
|
+
"aria-describedby": captionId
|
|
112
|
+
}) : null, childrenWithoutSlots.filter((child_1) => /*#__PURE__*/ React.isValidElement(child_1) && !expectedInputComponents.some((inputComponent_0) => child_1.type === inputComponent_0 || isSlot(child_1, inputComponent_0)))]
|
|
113
|
+
}),
|
|
114
|
+
t4,
|
|
115
|
+
t5
|
|
116
|
+
] });
|
|
139
117
|
const T0 = FormControlContextProvider;
|
|
140
|
-
const
|
|
141
|
-
let
|
|
142
|
-
if ($[
|
|
143
|
-
|
|
118
|
+
const t6 = !isSelectPanelInput;
|
|
119
|
+
let t7;
|
|
120
|
+
if ($[11] !== captionId || $[12] !== disabled || $[13] !== id || $[14] !== labelId || $[15] !== required || $[16] !== t6 || $[17] !== validationMessageId) {
|
|
121
|
+
t7 = {
|
|
144
122
|
captionId,
|
|
145
123
|
disabled,
|
|
146
124
|
id,
|
|
147
125
|
required,
|
|
148
126
|
validationMessageId,
|
|
149
|
-
isReferenced:
|
|
127
|
+
isReferenced: t6,
|
|
150
128
|
labelId
|
|
151
129
|
};
|
|
152
|
-
$[
|
|
153
|
-
$[
|
|
154
|
-
$[
|
|
155
|
-
$[
|
|
156
|
-
$[
|
|
157
|
-
$[
|
|
158
|
-
$[
|
|
159
|
-
$[
|
|
160
|
-
} else
|
|
161
|
-
const
|
|
130
|
+
$[11] = captionId;
|
|
131
|
+
$[12] = disabled;
|
|
132
|
+
$[13] = id;
|
|
133
|
+
$[14] = labelId;
|
|
134
|
+
$[15] = required;
|
|
135
|
+
$[16] = t6;
|
|
136
|
+
$[17] = validationMessageId;
|
|
137
|
+
$[18] = t7;
|
|
138
|
+
} else t7 = $[18];
|
|
139
|
+
const t8 = isChoiceInput || layout === "horizontal" ? /* @__PURE__ */ jsx("div", {
|
|
162
140
|
ref,
|
|
163
141
|
"data-has-leading-visual": slots.leadingVisual ? "" : void 0,
|
|
164
142
|
className: clsx(className, FormControl_module_css_default.ControlHorizontalLayout),
|
|
@@ -188,18 +166,18 @@ var FormControl_default = Object.assign(/* @__PURE__ */ React.forwardRef((t0, re
|
|
|
188
166
|
slots.caption
|
|
189
167
|
]
|
|
190
168
|
});
|
|
191
|
-
let
|
|
192
|
-
if ($[
|
|
193
|
-
|
|
194
|
-
value:
|
|
195
|
-
children:
|
|
169
|
+
let t9;
|
|
170
|
+
if ($[19] !== T0 || $[20] !== t7 || $[21] !== t8) {
|
|
171
|
+
t9 = /* @__PURE__ */ jsx(T0, {
|
|
172
|
+
value: t7,
|
|
173
|
+
children: t8
|
|
196
174
|
});
|
|
197
|
-
$[
|
|
198
|
-
$[
|
|
199
|
-
$[
|
|
200
|
-
$[
|
|
201
|
-
} else
|
|
202
|
-
return
|
|
175
|
+
$[19] = T0;
|
|
176
|
+
$[20] = t7;
|
|
177
|
+
$[21] = t8;
|
|
178
|
+
$[22] = t9;
|
|
179
|
+
} else t9 = $[22];
|
|
180
|
+
return t9;
|
|
203
181
|
}), {
|
|
204
182
|
__SLOT__: Symbol("FormControl"),
|
|
205
183
|
Caption: FormControlCaption,
|
|
@@ -211,8 +189,5 @@ function _temp(child_0) {
|
|
|
211
189
|
var _child_0$props;
|
|
212
190
|
return /*#__PURE__*/ React.isValidElement(child_0) && ((_child_0$props = child_0.props) === null || _child_0$props === void 0 ? void 0 : _child_0$props.required);
|
|
213
191
|
}
|
|
214
|
-
function _temp2(child_1) {
|
|
215
|
-
return /*#__PURE__*/ React.isValidElement(child_1) && ![Checkbox, Radio].some((inputComponent_0) => child_1.type === inputComponent_0 || isSlot(child_1, inputComponent_0));
|
|
216
|
-
}
|
|
217
192
|
//#endregion
|
|
218
193
|
export { FormControl_default as default };
|
|
@@ -54,6 +54,7 @@ type ContainerProps = {
|
|
|
54
54
|
portalContainerName?: string;
|
|
55
55
|
preventOverflow?: boolean;
|
|
56
56
|
preventFocusOnOpen?: boolean;
|
|
57
|
+
preventFocusOnClose?: boolean;
|
|
57
58
|
returnFocusRef: React.RefObject<HTMLElement | null>;
|
|
58
59
|
};
|
|
59
60
|
type internalOverlayProps = Merge<OwnOverlayProps, ContainerProps>;
|
|
@@ -68,6 +69,7 @@ type internalOverlayProps = Merge<OwnOverlayProps, ContainerProps>;
|
|
|
68
69
|
* @param portalContainerName Optional. The name of the portal container to render the Overlay into.
|
|
69
70
|
* @param preventOverflow Optional. The Overlay width will be adjusted responsively if there is not enough space to display the Overlay. If `preventOverflow` is `true`, the width of the `Overlay` will not be adjusted.
|
|
70
71
|
* @param preventFocusOnOpen Optional. If 'true', focus will not be applied when the component is first mounted, even if initialFocusRef prop is given.
|
|
72
|
+
* @param preventFocusOnClose Optional. If true, focus will not be returned when the component is unmounted. Consumers must manage focus themselves.
|
|
71
73
|
* @param returnFocusRef Required. Ref for the element to focus when the `Overlay` is closed.
|
|
72
74
|
* @param right Optional. Horizontal right position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
|
|
73
75
|
* @param width Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xlarge` corresponds to `640px`, `xxlarge` corresponds to `960px`.
|
package/dist/Overlay/Overlay.js
CHANGED
|
@@ -76,12 +76,13 @@ const BaseOverlay = /*#__PURE__*/ React.forwardRef(({ visibility, height, width,
|
|
|
76
76
|
* @param portalContainerName Optional. The name of the portal container to render the Overlay into.
|
|
77
77
|
* @param preventOverflow Optional. The Overlay width will be adjusted responsively if there is not enough space to display the Overlay. If `preventOverflow` is `true`, the width of the `Overlay` will not be adjusted.
|
|
78
78
|
* @param preventFocusOnOpen Optional. If 'true', focus will not be applied when the component is first mounted, even if initialFocusRef prop is given.
|
|
79
|
+
* @param preventFocusOnClose Optional. If true, focus will not be returned when the component is unmounted. Consumers must manage focus themselves.
|
|
79
80
|
* @param returnFocusRef Required. Ref for the element to focus when the `Overlay` is closed.
|
|
80
81
|
* @param right Optional. Horizontal right position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
|
|
81
82
|
* @param width Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xlarge` corresponds to `640px`, `xxlarge` corresponds to `960px`.
|
|
82
83
|
|
|
83
84
|
*/
|
|
84
|
-
const Overlay = /*#__PURE__*/ React.forwardRef(({ anchorSide, _PrivateDisablePortal, height = "auto", ignoreClickRefs, initialFocusRef, left, onClickOutside, onEscape, portalContainerName, preventOverflow = true, preventFocusOnOpen, returnFocusRef, right, role = "none", visibility = "visible", width = "auto", responsiveVariant, ...props }, forwardedRef) => {
|
|
85
|
+
const Overlay = /*#__PURE__*/ React.forwardRef(({ anchorSide, _PrivateDisablePortal, height = "auto", ignoreClickRefs, initialFocusRef, left, onClickOutside, onEscape, portalContainerName, preventOverflow = true, preventFocusOnOpen, preventFocusOnClose, returnFocusRef, right, role = "none", visibility = "visible", width = "auto", responsiveVariant, ...props }, forwardedRef) => {
|
|
85
86
|
const overlayRef = useRef(null);
|
|
86
87
|
const mergedOverlayRef = useMergedRefs(forwardedRef, overlayRef);
|
|
87
88
|
const slideAnimationDistance = 8;
|
|
@@ -94,7 +95,8 @@ const Overlay = /*#__PURE__*/ React.forwardRef(({ anchorSide, _PrivateDisablePor
|
|
|
94
95
|
ignoreClickRefs,
|
|
95
96
|
onClickOutside,
|
|
96
97
|
initialFocusRef,
|
|
97
|
-
preventFocusOnOpen
|
|
98
|
+
preventFocusOnOpen,
|
|
99
|
+
preventFocusOnClose
|
|
98
100
|
});
|
|
99
101
|
useEffect(() => {
|
|
100
102
|
var _overlayRef$current;
|
|
@@ -25,7 +25,7 @@ type TextareaProps = {
|
|
|
25
25
|
*/
|
|
26
26
|
autoSize?: boolean;
|
|
27
27
|
/**
|
|
28
|
-
*
|
|
28
|
+
* @deprecated Omit this prop to use the default background.
|
|
29
29
|
*/
|
|
30
30
|
contrast?: boolean;
|
|
31
31
|
/**
|
|
@@ -76,7 +76,7 @@ declare const Textarea: React.ForwardRefExoticComponent<{
|
|
|
76
76
|
*/
|
|
77
77
|
autoSize?: boolean;
|
|
78
78
|
/**
|
|
79
|
-
*
|
|
79
|
+
* @deprecated Omit this prop to use the default background.
|
|
80
80
|
*/
|
|
81
81
|
contrast?: boolean;
|
|
82
82
|
/**
|
|
@@ -15,7 +15,7 @@ import { FilteredActionListProps } from "../FilteredActionList/FilteredActionLis
|
|
|
15
15
|
import { FilteredActionListInputProps } from "../FilteredActionList/FilteredActionListInput.js";
|
|
16
16
|
import { FilteredActionList } from "../FilteredActionList/index.js";
|
|
17
17
|
import { ObjectPaths } from "../DataTable/utils.js";
|
|
18
|
-
import { DataTableData, DataTableRowGroup, UniqueRow } from "../DataTable/row.js";
|
|
18
|
+
import { DataTableData, DataTableRowGroup, DataTableRowId, UniqueRow } from "../DataTable/row.js";
|
|
19
19
|
import { CellAlignment, Column, ColumnWidth, createColumnHelper } from "../DataTable/column.js";
|
|
20
20
|
import { ActionBarButtonProps, ActionBarMenuItemProps, ActionBarMenuProps, ActionBarProps } from "../ActionBar/ActionBar.js";
|
|
21
21
|
import { ActionBar } from "../ActionBar/index.js";
|
|
@@ -28,7 +28,7 @@ import { Blankslate as BlankslateContainer } from "../Blankslate/index.js";
|
|
|
28
28
|
import { CardActionProps as ActionProps, CardDescriptionProps as DescriptionProps, CardHeadingProps as HeadingProps, CardIconProps as IconProps, CardImageProps as ImageProps, CardMetadataProps as MetadataProps, CardProps } from "../Card/Card.js";
|
|
29
29
|
import { Card } from "../Card/index.js";
|
|
30
30
|
import { DataTable, DataTableProps } from "../DataTable/DataTable.js";
|
|
31
|
-
import { TableActionsProps, TableBodyProps, TableCellProps, TableContainerProps, TableHeadProps, TableHeaderProps, TableProps, TableRowProps, TableSubtitleProps, TableTitleProps } from "../DataTable/Table.js";
|
|
31
|
+
import { TableActionsProps, TableBodyProps, TableCellProps, TableContainerProps, TableHeadProps, TableHeaderProps, TableProps, TableRowProps, TableRowSelectionProps, TableSelectionHeaderProps, TableSubtitleProps, TableTitleProps } from "../DataTable/Table.js";
|
|
32
32
|
import { TableGroupProps } from "../DataTable/TableGroup.js";
|
|
33
33
|
import { Table } from "../DataTable/index.js";
|
|
34
34
|
import { InlineMessage, InlineMessageProps } from "../InlineMessage/InlineMessage.js";
|
|
@@ -51,4 +51,4 @@ import { useTabPanel } from "./Tabs/useTabPanel.js";
|
|
|
51
51
|
import { TopicTagProps } from "../TopicTag/TopicTag.js";
|
|
52
52
|
import { TopicTagGroupProps } from "../TopicTag/TopicTagGroup.js";
|
|
53
53
|
import { TopicTag } from "../TopicTag/index.js";
|
|
54
|
-
export { ActionBar, type ActionBarButtonProps, type ActionBarMenuItemProps, type ActionBarMenuProps, type ActionBarProps, Announce, type AnnounceProps, AriaAlert, type AriaAlertProps, AriaStatus, type AriaStatusProps, BlankslateContainer as Blankslate, type BlankslateProps, ButtonBase, type ButtonBaseProps, Card, type ActionProps as CardActionProps, type DescriptionProps as CardDescriptionProps, type HeadingProps as CardHeadingProps, type IconProps as CardIconProps, type ImageProps as CardImageProps, type MetadataProps as CardMetadataProps, type CardProps, type CellAlignment, type Column, type ColumnWidth, DataTable, type DataTableData, type DataTableProps, type DataTableRowGroup, DefaultFeatureFlags, Dialog, type DialogButtonProps, type DialogHeaderProps, type DialogHeight, type DialogProps, type DialogWidth, FeatureFlags, type FeatureFlagsProps, FilteredActionList, type FilteredActionListInputProps, FilteredActionListLoadingTypes, type FilteredActionListProps, Hidden, type HiddenProps, InlineMessage, type InlineMessageProps, IssueLabel, type IssueLabelProps, KeybindingHint, type KeybindingHintProps, NavList, type NavListDividerProps, type NavListGroupProps, type NavListItemProps, type NavListLeadingVisualProps, type NavListProps, type NavListSubNavProps, type NavListTrailingVisualProps, type ObjectPaths, PageHeader, type ActionsProps as PageHeaderActionsProps, type PageHeaderProps, type TitleProps as PageHeaderTitleProps, ScrollableRegion, type ScrollableRegionProps, SelectPanel, type SelectPanelMessageProps, type SelectPanelProps, type SelectPanelSecondaryActionProps, SkeletonAvatar, type SkeletonAvatarProps, SkeletonBox, type SkeletonBoxProps, SkeletonText, type SkeletonTextProps, SlotConfig, Stack, type StackItemProps, type StackProps, type TabListProps, type TabPanelProps, type TabProps, Table, type TableActionsProps, type TableBodyProps, type TableCellProps, type TableContainerProps, type TableGroupProps, type TableHeadProps, type TableHeaderProps, type TableProps, type TableRowProps, type TableSubtitleProps, type TableTitleProps, Tabs, type TabsProps, type TitleProps, Tooltip, type TooltipProps, TopicTag, type TopicTagGroupProps, type TopicTagProps, _default as UnderlinePanels, type PanelProps as UnderlinePanelsPanelProps, type UnderlinePanelsProps, type TabProps$1 as UnderlinePanelsTabProps, type UniqueRow, createColumnHelper, getAccessibleKeybindingHintString, useFeatureFlag, useOverflow, useSlots, useTab, useTabList, useTabPanel };
|
|
54
|
+
export { ActionBar, type ActionBarButtonProps, type ActionBarMenuItemProps, type ActionBarMenuProps, type ActionBarProps, Announce, type AnnounceProps, AriaAlert, type AriaAlertProps, AriaStatus, type AriaStatusProps, BlankslateContainer as Blankslate, type BlankslateProps, ButtonBase, type ButtonBaseProps, Card, type ActionProps as CardActionProps, type DescriptionProps as CardDescriptionProps, type HeadingProps as CardHeadingProps, type IconProps as CardIconProps, type ImageProps as CardImageProps, type MetadataProps as CardMetadataProps, type CardProps, type CellAlignment, type Column, type ColumnWidth, DataTable, type DataTableData, type DataTableProps, type DataTableRowGroup, type DataTableRowId, DefaultFeatureFlags, Dialog, type DialogButtonProps, type DialogHeaderProps, type DialogHeight, type DialogProps, type DialogWidth, FeatureFlags, type FeatureFlagsProps, FilteredActionList, type FilteredActionListInputProps, FilteredActionListLoadingTypes, type FilteredActionListProps, Hidden, type HiddenProps, InlineMessage, type InlineMessageProps, IssueLabel, type IssueLabelProps, KeybindingHint, type KeybindingHintProps, NavList, type NavListDividerProps, type NavListGroupProps, type NavListItemProps, type NavListLeadingVisualProps, type NavListProps, type NavListSubNavProps, type NavListTrailingVisualProps, type ObjectPaths, PageHeader, type ActionsProps as PageHeaderActionsProps, type PageHeaderProps, type TitleProps as PageHeaderTitleProps, ScrollableRegion, type ScrollableRegionProps, SelectPanel, type SelectPanelMessageProps, type SelectPanelProps, type SelectPanelSecondaryActionProps, SkeletonAvatar, type SkeletonAvatarProps, SkeletonBox, type SkeletonBoxProps, SkeletonText, type SkeletonTextProps, SlotConfig, Stack, type StackItemProps, type StackProps, type TabListProps, type TabPanelProps, type TabProps, Table, type TableActionsProps, type TableBodyProps, type TableCellProps, type TableContainerProps, type TableGroupProps, type TableHeadProps, type TableHeaderProps, type TableProps, type TableRowProps, type TableRowSelectionProps, type TableSelectionHeaderProps, type TableSubtitleProps, type TableTitleProps, Tabs, type TabsProps, type TitleProps, Tooltip, type TooltipProps, TopicTag, type TopicTagGroupProps, type TopicTagProps, _default as UnderlinePanels, type PanelProps as UnderlinePanelsPanelProps, type UnderlinePanelsProps, type TabProps$1 as UnderlinePanelsTabProps, type UniqueRow, createColumnHelper, getAccessibleKeybindingHintString, useFeatureFlag, useOverflow, useSlots, useTab, useTabList, useTabPanel };
|
|
@@ -6,12 +6,14 @@ type UseOpenAndCloseFocusSettings = {
|
|
|
6
6
|
containerRef: React.RefObject<HTMLElement | null>;
|
|
7
7
|
returnFocusRef: React.RefObject<HTMLElement | null>;
|
|
8
8
|
preventFocusOnOpen?: boolean;
|
|
9
|
+
preventFocusOnClose?: boolean;
|
|
9
10
|
};
|
|
10
11
|
declare function useOpenAndCloseFocus({
|
|
11
12
|
initialFocusRef,
|
|
12
13
|
returnFocusRef,
|
|
13
14
|
containerRef,
|
|
14
|
-
preventFocusOnOpen
|
|
15
|
+
preventFocusOnOpen,
|
|
16
|
+
preventFocusOnClose
|
|
15
17
|
}: UseOpenAndCloseFocusSettings): void;
|
|
16
18
|
//#endregion
|
|
17
19
|
export { UseOpenAndCloseFocusSettings, useOpenAndCloseFocus };
|
|
@@ -1,14 +1,24 @@
|
|
|
1
1
|
import { c } from "../utils/react-compiler-runtime.js";
|
|
2
|
+
import { useEffectCallback } from "../internal/hooks/useEffectCallback.js";
|
|
2
3
|
import { useEffect } from "react";
|
|
3
4
|
import { iterateFocusableElements } from "@primer/behaviors/utils";
|
|
4
5
|
//#region src/hooks/useOpenAndCloseFocus.ts
|
|
5
6
|
function useOpenAndCloseFocus(t0) {
|
|
6
|
-
const $ = c(
|
|
7
|
-
const { initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen } = t0;
|
|
7
|
+
const $ = c(9);
|
|
8
|
+
const { initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen, preventFocusOnClose } = t0;
|
|
8
9
|
let t1;
|
|
10
|
+
if ($[0] !== preventFocusOnClose) {
|
|
11
|
+
t1 = (element) => {
|
|
12
|
+
if (!preventFocusOnClose) element === null || element === void 0 || element.focus();
|
|
13
|
+
};
|
|
14
|
+
$[0] = preventFocusOnClose;
|
|
15
|
+
$[1] = t1;
|
|
16
|
+
} else t1 = $[1];
|
|
17
|
+
const restoreFocus = useEffectCallback(t1);
|
|
9
18
|
let t2;
|
|
10
|
-
|
|
11
|
-
|
|
19
|
+
let t3;
|
|
20
|
+
if ($[2] !== containerRef || $[3] !== initialFocusRef || $[4] !== preventFocusOnOpen || $[5] !== restoreFocus || $[6] !== returnFocusRef) {
|
|
21
|
+
t2 = () => {
|
|
12
22
|
if (!preventFocusOnOpen) {
|
|
13
23
|
if (initialFocusRef && initialFocusRef.current) initialFocusRef.current.focus();
|
|
14
24
|
else if (containerRef.current) {
|
|
@@ -18,26 +28,28 @@ function useOpenAndCloseFocus(t0) {
|
|
|
18
28
|
}
|
|
19
29
|
const returnFocusRefCurrent = returnFocusRef.current;
|
|
20
30
|
return function() {
|
|
21
|
-
returnFocusRefCurrent
|
|
31
|
+
restoreFocus(returnFocusRefCurrent);
|
|
22
32
|
};
|
|
23
33
|
};
|
|
24
|
-
|
|
34
|
+
t3 = [
|
|
25
35
|
initialFocusRef,
|
|
26
36
|
returnFocusRef,
|
|
27
37
|
containerRef,
|
|
28
|
-
preventFocusOnOpen
|
|
38
|
+
preventFocusOnOpen,
|
|
39
|
+
restoreFocus
|
|
29
40
|
];
|
|
30
|
-
$[
|
|
31
|
-
$[
|
|
32
|
-
$[
|
|
33
|
-
$[
|
|
34
|
-
$[
|
|
35
|
-
$[
|
|
41
|
+
$[2] = containerRef;
|
|
42
|
+
$[3] = initialFocusRef;
|
|
43
|
+
$[4] = preventFocusOnOpen;
|
|
44
|
+
$[5] = restoreFocus;
|
|
45
|
+
$[6] = returnFocusRef;
|
|
46
|
+
$[7] = t2;
|
|
47
|
+
$[8] = t3;
|
|
36
48
|
} else {
|
|
37
|
-
|
|
38
|
-
|
|
49
|
+
t2 = $[7];
|
|
50
|
+
t3 = $[8];
|
|
39
51
|
}
|
|
40
|
-
useEffect(
|
|
52
|
+
useEffect(t2, t3);
|
|
41
53
|
}
|
|
42
54
|
//#endregion
|
|
43
55
|
export { useOpenAndCloseFocus };
|
|
@@ -9,6 +9,7 @@ type UseOverlaySettings = {
|
|
|
9
9
|
onClickOutside: (e: TouchOrMouseEvent) => void;
|
|
10
10
|
overlayRef?: React.RefObject<HTMLDivElement | null>;
|
|
11
11
|
preventFocusOnOpen?: boolean;
|
|
12
|
+
preventFocusOnClose?: boolean;
|
|
12
13
|
};
|
|
13
14
|
type OverlayReturnProps = {
|
|
14
15
|
ref: React.RefObject<HTMLDivElement | null>;
|
|
@@ -20,7 +21,8 @@ declare const useOverlay: ({
|
|
|
20
21
|
onEscape,
|
|
21
22
|
ignoreClickRefs,
|
|
22
23
|
onClickOutside,
|
|
23
|
-
preventFocusOnOpen
|
|
24
|
+
preventFocusOnOpen,
|
|
25
|
+
preventFocusOnClose
|
|
24
26
|
}: UseOverlaySettings) => OverlayReturnProps;
|
|
25
27
|
//#endregion
|
|
26
28
|
export { OverlayReturnProps, UseOverlaySettings, useOverlay };
|
package/dist/hooks/useOverlay.js
CHANGED
|
@@ -5,53 +5,55 @@ import { useOnEscapePress } from "./useOnEscapePress.js";
|
|
|
5
5
|
import { useOpenAndCloseFocus } from "./useOpenAndCloseFocus.js";
|
|
6
6
|
//#region src/hooks/useOverlay.tsx
|
|
7
7
|
const useOverlay = (t0) => {
|
|
8
|
-
const $ = c(
|
|
9
|
-
const { overlayRef: _overlayRef, returnFocusRef, initialFocusRef, onEscape, ignoreClickRefs, onClickOutside, preventFocusOnOpen } = t0;
|
|
8
|
+
const $ = c(14);
|
|
9
|
+
const { overlayRef: _overlayRef, returnFocusRef, initialFocusRef, onEscape, ignoreClickRefs, onClickOutside, preventFocusOnOpen, preventFocusOnClose } = t0;
|
|
10
10
|
const overlayRef = useProvidedRefOrCreate(_overlayRef);
|
|
11
11
|
let t1;
|
|
12
|
-
if ($[0] !== initialFocusRef || $[1] !== overlayRef || $[2] !==
|
|
12
|
+
if ($[0] !== initialFocusRef || $[1] !== overlayRef || $[2] !== preventFocusOnClose || $[3] !== preventFocusOnOpen || $[4] !== returnFocusRef) {
|
|
13
13
|
t1 = {
|
|
14
14
|
containerRef: overlayRef,
|
|
15
15
|
returnFocusRef,
|
|
16
16
|
initialFocusRef,
|
|
17
|
-
preventFocusOnOpen
|
|
17
|
+
preventFocusOnOpen,
|
|
18
|
+
preventFocusOnClose
|
|
18
19
|
};
|
|
19
20
|
$[0] = initialFocusRef;
|
|
20
21
|
$[1] = overlayRef;
|
|
21
|
-
$[2] =
|
|
22
|
-
$[3] =
|
|
23
|
-
$[4] =
|
|
24
|
-
|
|
22
|
+
$[2] = preventFocusOnClose;
|
|
23
|
+
$[3] = preventFocusOnOpen;
|
|
24
|
+
$[4] = returnFocusRef;
|
|
25
|
+
$[5] = t1;
|
|
26
|
+
} else t1 = $[5];
|
|
25
27
|
useOpenAndCloseFocus(t1);
|
|
26
28
|
let t2;
|
|
27
|
-
if ($[
|
|
29
|
+
if ($[6] !== ignoreClickRefs || $[7] !== onClickOutside || $[8] !== overlayRef) {
|
|
28
30
|
t2 = {
|
|
29
31
|
containerRef: overlayRef,
|
|
30
32
|
ignoreClickRefs,
|
|
31
33
|
onClickOutside
|
|
32
34
|
};
|
|
33
|
-
$[
|
|
34
|
-
$[
|
|
35
|
-
$[
|
|
36
|
-
$[
|
|
37
|
-
} else t2 = $[
|
|
35
|
+
$[6] = ignoreClickRefs;
|
|
36
|
+
$[7] = onClickOutside;
|
|
37
|
+
$[8] = overlayRef;
|
|
38
|
+
$[9] = t2;
|
|
39
|
+
} else t2 = $[9];
|
|
38
40
|
useOnOutsideClick(t2);
|
|
39
41
|
let t3;
|
|
40
|
-
if ($[
|
|
42
|
+
if ($[10] !== onEscape) {
|
|
41
43
|
t3 = (event) => {
|
|
42
44
|
onEscape(event);
|
|
43
45
|
event.preventDefault();
|
|
44
46
|
};
|
|
45
|
-
$[
|
|
46
|
-
$[
|
|
47
|
-
} else t3 = $[
|
|
47
|
+
$[10] = onEscape;
|
|
48
|
+
$[11] = t3;
|
|
49
|
+
} else t3 = $[11];
|
|
48
50
|
useOnEscapePress(t3);
|
|
49
51
|
let t4;
|
|
50
|
-
if ($[
|
|
52
|
+
if ($[12] !== overlayRef) {
|
|
51
53
|
t4 = { ref: overlayRef };
|
|
52
|
-
$[
|
|
53
|
-
$[
|
|
54
|
-
} else t4 = $[
|
|
54
|
+
$[12] = overlayRef;
|
|
55
|
+
$[13] = t4;
|
|
56
|
+
} else t4 = $[13];
|
|
55
57
|
return t4;
|
|
56
58
|
};
|
|
57
59
|
//#endregion
|
|
@@ -5,6 +5,9 @@ import React, { ComponentProps } from "react";
|
|
|
5
5
|
type TextInputSizes = 'small' | 'medium' | 'large';
|
|
6
6
|
type StyledTextInputBaseWrapperProps = {
|
|
7
7
|
block?: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* @deprecated Omit this prop to use the default background.
|
|
10
|
+
*/
|
|
8
11
|
contrast?: boolean;
|
|
9
12
|
disabled?: boolean;
|
|
10
13
|
hasTrailingAction?: boolean;
|