@carbon/react 1.113.0-rc.0 → 1.114.0-rc.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/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +926 -926
- package/es/components/DatePicker/DatePicker.d.ts +10 -0
- package/es/components/DatePicker/DatePicker.js +6 -5
- package/es/components/DatePicker/next/components/Calendar.d.ts +40 -0
- package/es/components/DatePicker/next/components/Calendar.js +181 -0
- package/es/components/DatePicker/next/components/DatePicker.d.ts +86 -0
- package/es/components/DatePicker/next/components/DatePicker.js +147 -0
- package/es/components/DatePicker/next/components/DatePickerInput.d.ts +143 -0
- package/es/components/DatePicker/next/components/DatePickerInput.js +124 -0
- package/es/components/DatePicker/next/components/DatePickerSkeleton.d.ts +22 -0
- package/es/components/DatePicker/next/components/DatePickerSkeleton.js +32 -0
- package/es/components/DatePicker/next/hooks/useDatePicker.d.ts +144 -0
- package/es/components/DatePicker/next/hooks/useDatePicker.js +286 -0
- package/es/components/DatePicker/next/index.d.ts +12 -0
- package/es/components/DatePicker/next/index.js +19 -0
- package/es/components/FeatureFlags/index.d.ts +58 -0
- package/es/components/FeatureFlags/index.js +4 -2
- package/es/components/MultiSelect/FilterableMultiSelect.d.ts +1 -2
- package/es/components/MultiSelect/FilterableMultiSelect.js +2 -3
- package/es/index.d.ts +1 -0
- package/es/index.js +2 -1
- package/es/internal/checkForOverflow.d.ts +5 -0
- package/es/internal/useFocus.d.ts +23 -0
- package/es/internal/usePrefersReducedMotion.d.ts +11 -0
- package/es/internal/useSidePanelPresence.d.ts +21 -0
- package/lib/components/DatePicker/DatePicker.d.ts +10 -0
- package/lib/components/DatePicker/DatePicker.js +6 -5
- package/lib/components/DatePicker/next/components/Calendar.d.ts +40 -0
- package/lib/components/DatePicker/next/components/Calendar.js +184 -0
- package/lib/components/DatePicker/next/components/DatePicker.d.ts +86 -0
- package/lib/components/DatePicker/next/components/DatePicker.js +150 -0
- package/lib/components/DatePicker/next/components/DatePickerInput.d.ts +143 -0
- package/lib/components/DatePicker/next/components/DatePickerInput.js +127 -0
- package/lib/components/DatePicker/next/components/DatePickerSkeleton.d.ts +22 -0
- package/lib/components/DatePicker/next/components/DatePickerSkeleton.js +41 -0
- package/lib/components/DatePicker/next/hooks/useDatePicker.d.ts +144 -0
- package/lib/components/DatePicker/next/hooks/useDatePicker.js +286 -0
- package/lib/components/DatePicker/next/index.d.ts +12 -0
- package/lib/components/DatePicker/next/index.js +27 -0
- package/lib/components/FeatureFlags/index.d.ts +58 -0
- package/lib/components/FeatureFlags/index.js +3 -1
- package/lib/components/MultiSelect/FilterableMultiSelect.d.ts +1 -2
- package/lib/components/MultiSelect/FilterableMultiSelect.js +2 -3
- package/lib/index.d.ts +1 -0
- package/lib/index.js +29 -22
- package/lib/internal/checkForOverflow.d.ts +5 -0
- package/lib/internal/useFocus.d.ts +23 -0
- package/lib/internal/usePrefersReducedMotion.d.ts +11 -0
- package/lib/internal/useSidePanelPresence.d.ts +21 -0
- package/package.json +11 -11
- package/scss/components/action-set/_action-set.scss +9 -0
- package/scss/components/action-set/_index.scss +9 -0
- package/scss/components/resizer/_index.scss +9 -0
- package/scss/components/resizer/_resizer.scss +9 -0
- package/scss/components/side-panel/_index.scss +9 -0
- package/scss/components/side-panel/_side-panel.scss +9 -0
- package/scss/components/truncated-text/_index.scss +9 -0
- package/scss/components/truncated-text/_truncated-text.scss +9 -0
- package/telemetry.yml +41 -1
|
@@ -0,0 +1,286 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2016, 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
let react = require("react");
|
|
9
|
+
let _carbon_utilities_date_picker = require("@carbon/utilities/date-picker");
|
|
10
|
+
//#region src/components/DatePicker/next/hooks/useDatePicker.ts
|
|
11
|
+
/**
|
|
12
|
+
* Copyright IBM Corp. 2026
|
|
13
|
+
*
|
|
14
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
15
|
+
* LICENSE file in the root directory of this source tree.
|
|
16
|
+
*/
|
|
17
|
+
/**
|
|
18
|
+
* React hook for managing date picker state using the shared state machine
|
|
19
|
+
* Maintains 100% backwards compatibility with Carbon React v11 API
|
|
20
|
+
*
|
|
21
|
+
* @param {UseDatePickerConfig} config - Configuration options
|
|
22
|
+
* @returns {UseDatePickerReturn} Hook return object with state and handlers
|
|
23
|
+
*/
|
|
24
|
+
function useDatePicker(config = {}) {
|
|
25
|
+
const { datePickerType = "single", value = "", minDate = null, maxDate = null, dateFormat = "m/d/Y", closeOnSelect = true, disabled = false, readOnly = false, onChange, onOpen, onClose } = config;
|
|
26
|
+
const startInputRef = (0, react.useRef)(null);
|
|
27
|
+
const endInputRef = (0, react.useRef)(null);
|
|
28
|
+
const calendarRef = (0, react.useRef)(null);
|
|
29
|
+
const exitSentinelRef = (0, react.useRef)(null);
|
|
30
|
+
const machineRef = (0, react.useRef)(null);
|
|
31
|
+
const suppressOpenOnFocusRef = (0, react.useRef)(false);
|
|
32
|
+
const [context, setContext] = (0, react.useState)(() => {
|
|
33
|
+
const machine = new _carbon_utilities_date_picker.DatePickerStateMachine({
|
|
34
|
+
mode: datePickerType,
|
|
35
|
+
value,
|
|
36
|
+
minDate: (0, _carbon_utilities_date_picker.parseDateToPlainDate)(minDate),
|
|
37
|
+
maxDate: (0, _carbon_utilities_date_picker.parseDateToPlainDate)(maxDate),
|
|
38
|
+
dateFormat,
|
|
39
|
+
isDisabled: disabled,
|
|
40
|
+
isReadonly: readOnly
|
|
41
|
+
});
|
|
42
|
+
machineRef.current = machine;
|
|
43
|
+
return machine.getContext();
|
|
44
|
+
});
|
|
45
|
+
const [state, setState] = (0, react.useState)(() => {
|
|
46
|
+
return machineRef.current?.getState() || _carbon_utilities_date_picker.DatePickerState.IDLE;
|
|
47
|
+
});
|
|
48
|
+
(0, react.useEffect)(() => {
|
|
49
|
+
const machine = machineRef.current;
|
|
50
|
+
if (!machine) return;
|
|
51
|
+
let wasCalendarOpen = machine.getContext().isOpen;
|
|
52
|
+
return machine.subscribe((transition) => {
|
|
53
|
+
setContext(transition.context);
|
|
54
|
+
setState(transition.to);
|
|
55
|
+
if (transition.to === _carbon_utilities_date_picker.DatePickerState.CALENDAR_OPEN && onOpen) onOpen();
|
|
56
|
+
if (wasCalendarOpen && !transition.context.isOpen && onClose) onClose();
|
|
57
|
+
wasCalendarOpen = transition.context.isOpen;
|
|
58
|
+
});
|
|
59
|
+
}, [onOpen, onClose]);
|
|
60
|
+
(0, react.useEffect)(() => {
|
|
61
|
+
if (!context.shouldRestoreFocus) return;
|
|
62
|
+
const targetRef = context.restoreFocusTo === "to" ? endInputRef : startInputRef;
|
|
63
|
+
const timeoutId = window.setTimeout(() => {
|
|
64
|
+
suppressOpenOnFocusRef.current = true;
|
|
65
|
+
targetRef.current?.focus();
|
|
66
|
+
machineRef.current?.updateContext({
|
|
67
|
+
shouldRestoreFocus: false,
|
|
68
|
+
restoreFocusTo: null
|
|
69
|
+
});
|
|
70
|
+
setContext(machineRef.current.getContext());
|
|
71
|
+
queueMicrotask(() => {
|
|
72
|
+
suppressOpenOnFocusRef.current = false;
|
|
73
|
+
});
|
|
74
|
+
}, 0);
|
|
75
|
+
return () => {
|
|
76
|
+
window.clearTimeout(timeoutId);
|
|
77
|
+
};
|
|
78
|
+
}, [context.shouldRestoreFocus, context.restoreFocusTo]);
|
|
79
|
+
const prevDatesRef = (0, react.useRef)("");
|
|
80
|
+
(0, react.useEffect)(() => {
|
|
81
|
+
if (!onChange) return;
|
|
82
|
+
const dates = [];
|
|
83
|
+
if (context.startDate) {
|
|
84
|
+
const date = (0, _carbon_utilities_date_picker.plainDateToDate)(context.startDate);
|
|
85
|
+
if (date) dates.push(date);
|
|
86
|
+
}
|
|
87
|
+
if (context.endDate) {
|
|
88
|
+
const date = (0, _carbon_utilities_date_picker.plainDateToDate)(context.endDate);
|
|
89
|
+
if (date) dates.push(date);
|
|
90
|
+
}
|
|
91
|
+
const datesKey = dates.map((d) => d.toISOString()).join(",");
|
|
92
|
+
if (dates.length > 0 && datesKey !== prevDatesRef.current) {
|
|
93
|
+
prevDatesRef.current = datesKey;
|
|
94
|
+
onChange(dates);
|
|
95
|
+
}
|
|
96
|
+
}, [
|
|
97
|
+
context.startDate,
|
|
98
|
+
context.endDate,
|
|
99
|
+
onChange
|
|
100
|
+
]);
|
|
101
|
+
(0, react.useEffect)(() => {
|
|
102
|
+
const machine = machineRef.current;
|
|
103
|
+
if (!machine) return;
|
|
104
|
+
if (disabled !== context.isDisabled) machine.send(disabled ? _carbon_utilities_date_picker.DatePickerEvent.DISABLE : _carbon_utilities_date_picker.DatePickerEvent.ENABLE);
|
|
105
|
+
if (readOnly !== context.isReadonly) machine.send(readOnly ? _carbon_utilities_date_picker.DatePickerEvent.SET_READONLY : _carbon_utilities_date_picker.DatePickerEvent.UNSET_READONLY);
|
|
106
|
+
const newMinDate = (0, _carbon_utilities_date_picker.parseDateToPlainDate)(minDate);
|
|
107
|
+
const newMaxDate = (0, _carbon_utilities_date_picker.parseDateToPlainDate)(maxDate);
|
|
108
|
+
if (newMinDate) machine.send(_carbon_utilities_date_picker.DatePickerEvent.SET_MIN_DATE, { date: newMinDate });
|
|
109
|
+
if (newMaxDate) machine.send(_carbon_utilities_date_picker.DatePickerEvent.SET_MAX_DATE, { date: newMaxDate });
|
|
110
|
+
}, [
|
|
111
|
+
disabled,
|
|
112
|
+
readOnly,
|
|
113
|
+
minDate,
|
|
114
|
+
maxDate,
|
|
115
|
+
context.isDisabled,
|
|
116
|
+
context.isReadonly
|
|
117
|
+
]);
|
|
118
|
+
const send = (0, react.useCallback)((eventType, payload) => {
|
|
119
|
+
machineRef.current?.send(eventType, payload);
|
|
120
|
+
}, []);
|
|
121
|
+
const openCalendar = (0, react.useCallback)(() => {
|
|
122
|
+
send(_carbon_utilities_date_picker.DatePickerEvent.CALENDAR_ICON_CLICK);
|
|
123
|
+
}, [send]);
|
|
124
|
+
const closeCalendar = (0, react.useCallback)(() => {
|
|
125
|
+
send(_carbon_utilities_date_picker.DatePickerEvent.CALENDAR_CLOSE);
|
|
126
|
+
}, [send]);
|
|
127
|
+
const selectDate = (0, react.useCallback)((date) => {
|
|
128
|
+
if (datePickerType === "range") if (!context.startDate || context.endDate) send(_carbon_utilities_date_picker.DatePickerEvent.RANGE_START_SELECT, { date });
|
|
129
|
+
else {
|
|
130
|
+
send(_carbon_utilities_date_picker.DatePickerEvent.RANGE_END_SELECT, { date });
|
|
131
|
+
if (closeOnSelect) send(_carbon_utilities_date_picker.DatePickerEvent.CALENDAR_CLOSE);
|
|
132
|
+
}
|
|
133
|
+
else {
|
|
134
|
+
send(_carbon_utilities_date_picker.DatePickerEvent.DATE_SELECT, { date });
|
|
135
|
+
if (closeOnSelect) send(_carbon_utilities_date_picker.DatePickerEvent.CALENDAR_CLOSE);
|
|
136
|
+
}
|
|
137
|
+
}, [
|
|
138
|
+
closeOnSelect,
|
|
139
|
+
datePickerType,
|
|
140
|
+
context.startDate,
|
|
141
|
+
context.endDate,
|
|
142
|
+
send
|
|
143
|
+
]);
|
|
144
|
+
const handleInputFocus = (0, react.useCallback)((inputType = "from") => {
|
|
145
|
+
send(_carbon_utilities_date_picker.DatePickerEvent.INPUT_FOCUS, { inputType });
|
|
146
|
+
if (suppressOpenOnFocusRef.current) return;
|
|
147
|
+
send(_carbon_utilities_date_picker.DatePickerEvent.CALENDAR_OPEN);
|
|
148
|
+
}, [send]);
|
|
149
|
+
const handleInputBlur = (0, react.useCallback)(() => {
|
|
150
|
+
send(_carbon_utilities_date_picker.DatePickerEvent.INPUT_BLUR);
|
|
151
|
+
}, [send]);
|
|
152
|
+
const handleInputChange = (0, react.useCallback)((value, inputType = "from") => {
|
|
153
|
+
send(_carbon_utilities_date_picker.DatePickerEvent.VALUE_CHANGE, {
|
|
154
|
+
value,
|
|
155
|
+
inputType
|
|
156
|
+
});
|
|
157
|
+
}, [send]);
|
|
158
|
+
(0, react.useEffect)(() => {
|
|
159
|
+
if (!context.isOpen) return;
|
|
160
|
+
const handler = new _carbon_utilities_date_picker.ClickOutsideHandler({
|
|
161
|
+
isOpen: context.isOpen,
|
|
162
|
+
/**
|
|
163
|
+
* Check if a node is contained within the date picker elements
|
|
164
|
+
* @param {Node} node - The node to check
|
|
165
|
+
* @returns {boolean} True if the node is within the date picker
|
|
166
|
+
*/
|
|
167
|
+
containsNode: (node) => {
|
|
168
|
+
const calendarEl = calendarRef.current;
|
|
169
|
+
const startInputEl = startInputRef.current;
|
|
170
|
+
const endInputEl = endInputRef.current;
|
|
171
|
+
return (calendarEl?.contains(node) ?? false) || (startInputEl?.contains(node) ?? false) || (endInputEl?.contains(node) ?? false);
|
|
172
|
+
},
|
|
173
|
+
/**
|
|
174
|
+
* Handle clicks outside the date picker
|
|
175
|
+
*/
|
|
176
|
+
onOutsideClick: () => send(_carbon_utilities_date_picker.DatePickerEvent.OUTSIDE_CLICK),
|
|
177
|
+
useCapture: true,
|
|
178
|
+
attachDelay: 0
|
|
179
|
+
});
|
|
180
|
+
handler.attach();
|
|
181
|
+
return () => {
|
|
182
|
+
handler.detach();
|
|
183
|
+
};
|
|
184
|
+
}, [context.isOpen, send]);
|
|
185
|
+
(0, react.useEffect)(() => {
|
|
186
|
+
/**
|
|
187
|
+
* Handle keyboard events for calendar navigation
|
|
188
|
+
*
|
|
189
|
+
* @param {KeyboardEvent} event - Keyboard event
|
|
190
|
+
*/
|
|
191
|
+
const handleKeyDown = (event) => {
|
|
192
|
+
const { key } = event;
|
|
193
|
+
const target = event.target;
|
|
194
|
+
const calendarEl = calendarRef.current;
|
|
195
|
+
const startInputEl = startInputRef.current;
|
|
196
|
+
const endInputEl = endInputRef.current;
|
|
197
|
+
const isFocusInCalendar = calendarEl && (calendarEl.contains(target) || target === calendarEl || target.classList?.contains("cds--date-picker__calendar"));
|
|
198
|
+
const isFocusInInput = target === startInputEl || target === endInputEl || startInputEl && startInputEl.contains(target) || endInputEl && endInputEl.contains(target);
|
|
199
|
+
if (key === "Escape" && context.isOpen) {
|
|
200
|
+
event.preventDefault();
|
|
201
|
+
send(_carbon_utilities_date_picker.DatePickerEvent.ESCAPE_KEY);
|
|
202
|
+
return;
|
|
203
|
+
}
|
|
204
|
+
if (key === "Tab") {
|
|
205
|
+
if (isFocusInInput && !event.shiftKey) {
|
|
206
|
+
event.preventDefault();
|
|
207
|
+
if (calendarEl) calendarEl.querySelector(".cds--date-picker__calendar")?.focus();
|
|
208
|
+
return;
|
|
209
|
+
}
|
|
210
|
+
if (isFocusInCalendar && event.shiftKey) {
|
|
211
|
+
event.preventDefault();
|
|
212
|
+
if (datePickerType === "range" && context.lastFocusedInput === "to" && endInputEl) endInputEl.focus();
|
|
213
|
+
else if (startInputEl) startInputEl.focus();
|
|
214
|
+
return;
|
|
215
|
+
}
|
|
216
|
+
if (isFocusInCalendar && !event.shiftKey) {
|
|
217
|
+
send(_carbon_utilities_date_picker.DatePickerEvent.TAB_KEY);
|
|
218
|
+
if (exitSentinelRef.current) exitSentinelRef.current.tabIndex = 0;
|
|
219
|
+
return;
|
|
220
|
+
}
|
|
221
|
+
return;
|
|
222
|
+
}
|
|
223
|
+
if (!context.isOpen) return;
|
|
224
|
+
if (!isFocusInCalendar || isFocusInInput) return;
|
|
225
|
+
const mappedEvent = (0, _carbon_utilities_date_picker.mapKeyboardToStateMachineEvent)({
|
|
226
|
+
key,
|
|
227
|
+
shiftKey: event.shiftKey,
|
|
228
|
+
mode: datePickerType,
|
|
229
|
+
state,
|
|
230
|
+
focusedDate: context.focusedDate
|
|
231
|
+
});
|
|
232
|
+
if (mappedEvent) {
|
|
233
|
+
if (mappedEvent.preventDefault) event.preventDefault();
|
|
234
|
+
if (mappedEvent.eventType) send(mappedEvent.eventType, mappedEvent.payload);
|
|
235
|
+
return;
|
|
236
|
+
}
|
|
237
|
+
};
|
|
238
|
+
document.addEventListener("keydown", handleKeyDown);
|
|
239
|
+
return () => {
|
|
240
|
+
document.removeEventListener("keydown", handleKeyDown);
|
|
241
|
+
};
|
|
242
|
+
}, [
|
|
243
|
+
context.isOpen,
|
|
244
|
+
context.focusedDate,
|
|
245
|
+
context.lastFocusedInput,
|
|
246
|
+
state,
|
|
247
|
+
datePickerType,
|
|
248
|
+
send
|
|
249
|
+
]);
|
|
250
|
+
/**
|
|
251
|
+
* Called when the browser delivers focus to the exit sentinel.
|
|
252
|
+
* Closes the calendar (state machine already received TAB_KEY in _handleKeyDown)
|
|
253
|
+
* and immediately restores tabindex="-1" so future Tab presses skip the sentinel.
|
|
254
|
+
*
|
|
255
|
+
* TODO (carbon monorepo migration): replace this hand-rolled sentinel with the
|
|
256
|
+
* upstream Carbon wrapFocus utility, which implements the same start/end sentinel
|
|
257
|
+
* pattern for focus trapping and exit.
|
|
258
|
+
* Upstream location: packages/react/src/internal/wrapFocus.ts (wrapFocus /
|
|
259
|
+
* wrapFocusWithoutSentinels exports). Note that wrapFocus is designed to trap
|
|
260
|
+
* focus inside a container (modal pattern) rather than release it; the exit-only
|
|
261
|
+
* direction we need maps to the endTrapNode path in that utility.
|
|
262
|
+
*/
|
|
263
|
+
const handleExitSentinelFocus = (0, react.useCallback)(() => {
|
|
264
|
+
if (exitSentinelRef.current) exitSentinelRef.current.tabIndex = -1;
|
|
265
|
+
if (context.isOpen) send(_carbon_utilities_date_picker.DatePickerEvent.TAB_KEY);
|
|
266
|
+
}, [context.isOpen, send]);
|
|
267
|
+
return {
|
|
268
|
+
context,
|
|
269
|
+
state,
|
|
270
|
+
isOpen: context.isOpen,
|
|
271
|
+
send,
|
|
272
|
+
openCalendar,
|
|
273
|
+
closeCalendar,
|
|
274
|
+
selectDate,
|
|
275
|
+
handleInputFocus,
|
|
276
|
+
handleInputBlur,
|
|
277
|
+
handleInputChange,
|
|
278
|
+
startInputRef,
|
|
279
|
+
endInputRef,
|
|
280
|
+
calendarRef,
|
|
281
|
+
exitSentinelRef,
|
|
282
|
+
handleExitSentinelFocus
|
|
283
|
+
};
|
|
284
|
+
}
|
|
285
|
+
//#endregion
|
|
286
|
+
exports.useDatePicker = useDatePicker;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
export { DatePicker } from './components/DatePicker';
|
|
8
|
+
export { DatePickerInput } from './components/DatePickerInput';
|
|
9
|
+
export { DatePickerSkeleton } from './components/DatePickerSkeleton';
|
|
10
|
+
export type { DatePickerProps } from './components/DatePicker';
|
|
11
|
+
export type { DatePickerInputProps } from './components/DatePickerInput';
|
|
12
|
+
export type { DatePickerSkeletonProps } from './components/DatePickerSkeleton';
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2016, 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
|
|
9
|
+
const require_DatePicker = require("./components/DatePicker.js");
|
|
10
|
+
const require_DatePickerInput = require("./components/DatePickerInput.js");
|
|
11
|
+
const require_DatePickerSkeleton = require("./components/DatePickerSkeleton.js");
|
|
12
|
+
//#region src/components/DatePicker/next/index.tsx
|
|
13
|
+
var next_exports = /* @__PURE__ */ require_runtime.__exportAll({
|
|
14
|
+
DatePicker: () => require_DatePicker.DatePicker,
|
|
15
|
+
DatePickerInput: () => require_DatePickerInput.DatePickerInput,
|
|
16
|
+
DatePickerSkeleton: () => require_DatePickerSkeleton.DatePickerSkeleton
|
|
17
|
+
});
|
|
18
|
+
//#endregion
|
|
19
|
+
exports.DatePicker = require_DatePicker.DatePicker;
|
|
20
|
+
exports.DatePickerInput = require_DatePickerInput.DatePickerInput;
|
|
21
|
+
exports.DatePickerSkeleton = require_DatePickerSkeleton.DatePickerSkeleton;
|
|
22
|
+
Object.defineProperty(exports, "next_exports", {
|
|
23
|
+
enumerable: true,
|
|
24
|
+
get: function() {
|
|
25
|
+
return next_exports;
|
|
26
|
+
}
|
|
27
|
+
});
|
|
@@ -8,17 +8,75 @@ import PropTypes from 'prop-types';
|
|
|
8
8
|
import { type ReactNode } from 'react';
|
|
9
9
|
export interface FeatureFlagsProps {
|
|
10
10
|
children?: ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* Provide the feature flags to enable or disable in the current React tree.
|
|
13
|
+
*
|
|
14
|
+
* @deprecated Use the individual boolean props instead. Run the
|
|
15
|
+
* `featureflag-deprecate-flags-prop` codemod to migrate:
|
|
16
|
+
* `npx @carbon/upgrade migrate featureflag-deprecate-flags-prop --write`
|
|
17
|
+
*/
|
|
11
18
|
flags?: Record<string, boolean>;
|
|
19
|
+
/**
|
|
20
|
+
* Enable the features and functionality for the v12 Release.
|
|
21
|
+
*
|
|
22
|
+
* Enabling this turns on every `enableV12*` flag at once, as well as
|
|
23
|
+
* `enableFocusWrapWithoutSentinels`.
|
|
24
|
+
*/
|
|
12
25
|
enableV12Release?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Enable rendering of default icons in the tile components.
|
|
28
|
+
*
|
|
29
|
+
* Becomes the default behavior in v12.
|
|
30
|
+
*/
|
|
13
31
|
enableV12TileDefaultIcons?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Enable rendering of radio icons in the `RadioTile` component.
|
|
34
|
+
*
|
|
35
|
+
* Becomes the default behavior in v12.
|
|
36
|
+
*/
|
|
14
37
|
enableV12TileRadioIcons?: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* Enable the use of the v12 `OverflowMenu` leveraging the `Menu`
|
|
40
|
+
* subcomponents.
|
|
41
|
+
*
|
|
42
|
+
* Becomes the default behavior in v12.
|
|
43
|
+
*/
|
|
15
44
|
enableV12Overflowmenu?: boolean;
|
|
45
|
+
/**
|
|
46
|
+
* Enable the new `TreeView` controllable API.
|
|
47
|
+
*/
|
|
16
48
|
enableTreeviewControllable?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* Enable the new focus wrap behavior that doesn't use sentinel nodes.
|
|
51
|
+
*
|
|
52
|
+
* @deprecated Use `enableFocusWrapWithoutSentinels` instead.
|
|
53
|
+
*/
|
|
17
54
|
enableExperimentalFocusWrapWithoutSentinels?: boolean;
|
|
55
|
+
/**
|
|
56
|
+
* Enable the new focus wrap behavior that doesn't use sentinel nodes.
|
|
57
|
+
*/
|
|
18
58
|
enableFocusWrapWithoutSentinels?: boolean;
|
|
59
|
+
/**
|
|
60
|
+
* Enable components to utilize the native `dialog` element.
|
|
61
|
+
*/
|
|
19
62
|
enableDialogElement?: boolean;
|
|
63
|
+
/**
|
|
64
|
+
* Enable dynamic setting of floating styles for components like `Popover`,
|
|
65
|
+
* `Tooltip`, etc.
|
|
66
|
+
*
|
|
67
|
+
* Becomes the default behavior in v12.
|
|
68
|
+
*/
|
|
20
69
|
enableV12DynamicFloatingStyles?: boolean;
|
|
70
|
+
/**
|
|
71
|
+
* Enable enhanced functionality for the `FileUploader` component, including
|
|
72
|
+
* richer callback data and expanded trigger events for `onChange` and
|
|
73
|
+
* `onDelete`.
|
|
74
|
+
*/
|
|
21
75
|
enableEnhancedFileUploader?: boolean;
|
|
76
|
+
/**
|
|
77
|
+
* Enable components to remain unmounted in closed state and mount in open
|
|
78
|
+
* state.
|
|
79
|
+
*/
|
|
22
80
|
enablePresence?: boolean;
|
|
23
81
|
}
|
|
24
82
|
/**
|
|
@@ -111,7 +111,9 @@ FeatureFlags.propTypes = {
|
|
|
111
111
|
* FeatureFlagContext
|
|
112
112
|
*/
|
|
113
113
|
const useFeatureFlag = (flag) => {
|
|
114
|
-
|
|
114
|
+
const enabled = (0, react.useContext)(FeatureFlagContext).enabled(flag);
|
|
115
|
+
if (process.env.NODE_ENV !== "production") (0, _carbon_feature_flags.notifyAvailableFlag)(flag, enabled);
|
|
116
|
+
return enabled;
|
|
115
117
|
};
|
|
116
118
|
/**
|
|
117
119
|
* Access all feature flag information for the given FeatureFlagContext
|
|
@@ -125,8 +125,7 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
|
|
|
125
125
|
selectedItems: ItemType[];
|
|
126
126
|
}): void;
|
|
127
127
|
/**
|
|
128
|
-
*
|
|
129
|
-
* to communicate to the currently typed input.
|
|
128
|
+
* Called whenever the input value changes.
|
|
130
129
|
*/
|
|
131
130
|
onInputValueChange?: UseComboboxProps<ItemType>['onInputValueChange'];
|
|
132
131
|
/**
|
|
@@ -263,6 +263,7 @@ const FilterableMultiSelect = (0, react.forwardRef)(function FilterableMultiSele
|
|
|
263
263
|
menuId,
|
|
264
264
|
inputId,
|
|
265
265
|
inputValue,
|
|
266
|
+
onInputValueChange,
|
|
266
267
|
stateReducer,
|
|
267
268
|
isItemDisabled: require_isItemDisabled.isItemDisabled
|
|
268
269
|
});
|
|
@@ -298,7 +299,6 @@ const FilterableMultiSelect = (0, react.forwardRef)(function FilterableMultiSele
|
|
|
298
299
|
highlightedIndex: controlledSelectedItems.length > 0 ? 0 : -1
|
|
299
300
|
};
|
|
300
301
|
case InputChange:
|
|
301
|
-
if (onInputValueChange) onInputValueChange(changes);
|
|
302
302
|
setInputValue(changes.inputValue ?? "");
|
|
303
303
|
setIsOpen(true);
|
|
304
304
|
return {
|
|
@@ -692,8 +692,7 @@ FilterableMultiSelect.propTypes = {
|
|
|
692
692
|
*/
|
|
693
693
|
onChange: prop_types.default.func,
|
|
694
694
|
/**
|
|
695
|
-
*
|
|
696
|
-
* the currently typed input.
|
|
695
|
+
* Called whenever the input value changes.
|
|
697
696
|
*/
|
|
698
697
|
onInputValueChange: prop_types.default.func,
|
|
699
698
|
/**
|
package/lib/index.d.ts
CHANGED
|
@@ -29,6 +29,7 @@ export * from './components/DataTable';
|
|
|
29
29
|
export * from './components/DataTableSkeleton';
|
|
30
30
|
export * from './components/DatePicker';
|
|
31
31
|
export * from './components/DatePickerInput';
|
|
32
|
+
export * as preview__DatePicker from './components/DatePicker/next';
|
|
32
33
|
export * from './components/Dropdown';
|
|
33
34
|
export * from './components/ErrorBoundary';
|
|
34
35
|
export * from './components/ExpandableSearch';
|
package/lib/index.js
CHANGED
|
@@ -100,6 +100,7 @@ const require_DataTableSkeleton = require("./components/DataTableSkeleton/DataTa
|
|
|
100
100
|
const require_DatePickerInput = require("./components/DatePickerInput/DatePickerInput.js");
|
|
101
101
|
const require_DatePicker = require("./components/DatePicker/DatePicker.js");
|
|
102
102
|
const require_DatePicker_Skeleton = require("./components/DatePicker/DatePicker.Skeleton.js");
|
|
103
|
+
const require_index$13 = require("./components/DatePicker/next/index.js");
|
|
103
104
|
const require_Dropdown = require("./components/Dropdown/Dropdown.js");
|
|
104
105
|
const require_Dropdown_Skeleton = require("./components/Dropdown/Dropdown.Skeleton.js");
|
|
105
106
|
const require_ErrorBoundaryContext = require("./components/ErrorBoundary/ErrorBoundaryContext.js");
|
|
@@ -120,9 +121,9 @@ const require_Row = require("./components/Grid/Row.js");
|
|
|
120
121
|
const require_Column = require("./components/Grid/Column.js");
|
|
121
122
|
const require_ColumnHang = require("./components/Grid/ColumnHang.js");
|
|
122
123
|
const require_Icon_Skeleton = require("./components/Icon/Icon.Skeleton.js");
|
|
123
|
-
const require_index$
|
|
124
|
+
const require_index$14 = require("./components/IdPrefix/index.js");
|
|
124
125
|
const require_ListItem = require("./components/ListItem/ListItem.js");
|
|
125
|
-
const require_index$
|
|
126
|
+
const require_index$15 = require("./components/MenuButton/index.js");
|
|
126
127
|
const require_ModalPresence = require("./components/Modal/ModalPresence.js");
|
|
127
128
|
const require_Modal = require("./components/Modal/Modal.js");
|
|
128
129
|
const require_ModalWrapper = require("./components/ModalWrapper/ModalWrapper.js");
|
|
@@ -137,7 +138,7 @@ const require_DismissibleTag = require("./components/Tag/DismissibleTag.js");
|
|
|
137
138
|
const require_OperationalTag = require("./components/Tag/OperationalTag.js");
|
|
138
139
|
const require_SelectableTag = require("./components/Tag/SelectableTag.js");
|
|
139
140
|
const require_Tag_Skeleton = require("./components/Tag/Tag.Skeleton.js");
|
|
140
|
-
const require_index$
|
|
141
|
+
const require_index$16 = require("./components/PageHeader/index.js");
|
|
141
142
|
const require_Select = require("./components/Select/Select.js");
|
|
142
143
|
const require_Select_Skeleton = require("./components/Select/Select.Skeleton.js");
|
|
143
144
|
const require_SelectItem = require("./components/SelectItem/SelectItem.js");
|
|
@@ -232,18 +233,18 @@ const require_FluidNumberInput_Skeleton = require("./components/FluidNumberInput
|
|
|
232
233
|
const require_FluidTimePickerSelect = require("./components/FluidTimePickerSelect/FluidTimePickerSelect.js");
|
|
233
234
|
const require_FluidTimePicker = require("./components/FluidTimePicker/FluidTimePicker.js");
|
|
234
235
|
const require_FluidTimePicker_Skeleton = require("./components/FluidTimePicker/FluidTimePicker.Skeleton.js");
|
|
235
|
-
const require_index$
|
|
236
|
+
const require_index$17 = require("./components/OverflowMenuV2/index.js");
|
|
236
237
|
const require_Pagination$1 = require("./components/Pagination/experimental/Pagination.js");
|
|
237
238
|
const require_PageSelector = require("./components/Pagination/experimental/PageSelector.js");
|
|
238
239
|
const require_ProgressBar = require("./components/ProgressBar/ProgressBar.js");
|
|
239
|
-
const require_index$
|
|
240
|
-
const require_index$
|
|
240
|
+
const require_index$18 = require("./components/IconIndicator/index.js");
|
|
241
|
+
const require_index$19 = require("./components/ShapeIndicator/index.js");
|
|
241
242
|
const require_ChatButton = require("./components/ChatButton/ChatButton.js");
|
|
242
243
|
const require_ChatButton_Skeleton = require("./components/ChatButton/ChatButton.Skeleton.js");
|
|
243
244
|
const require_AISkeletonPlaceholder = require("./components/AISkeleton/AISkeletonPlaceholder.js");
|
|
244
245
|
const require_AISkeletonIcon = require("./components/AISkeleton/AISkeletonIcon.js");
|
|
245
246
|
const require_AISkeletonText = require("./components/AISkeleton/AISkeletonText.js");
|
|
246
|
-
const require_index$
|
|
247
|
+
const require_index$20 = require("./components/Theme/index.js");
|
|
247
248
|
//#region src/index.ts
|
|
248
249
|
/**
|
|
249
250
|
* Copyright IBM Corp. 2016, 2025
|
|
@@ -346,7 +347,7 @@ exports.FormContext = require_FormContext.FormContext;
|
|
|
346
347
|
exports.FormGroup = require_FormGroup.default;
|
|
347
348
|
exports.FormItem = require_FormItem.default;
|
|
348
349
|
exports.FormLabel = require_FormLabel.default;
|
|
349
|
-
exports.GlobalTheme = require_index$
|
|
350
|
+
exports.GlobalTheme = require_index$20.GlobalTheme;
|
|
350
351
|
exports.Grid = require_Grid.Grid;
|
|
351
352
|
exports.GridSettings = require_GridContext.GridSettings;
|
|
352
353
|
exports.HStack = require_HStack.HStack;
|
|
@@ -367,7 +368,7 @@ exports.IconButtonKinds = require_index$2.IconButtonKinds;
|
|
|
367
368
|
exports.IconSkeleton = require_Icon_Skeleton.IconSkeleton;
|
|
368
369
|
exports.IconSwitch = require_IconSwitch.default;
|
|
369
370
|
exports.IconTab = require_Tabs.IconTab;
|
|
370
|
-
exports.IdPrefix = require_index$
|
|
371
|
+
exports.IdPrefix = require_index$14.IdPrefix;
|
|
371
372
|
exports.InlineCheckbox = require_InlineCheckbox.default;
|
|
372
373
|
exports.InlineLoading = require_InlineLoading.default;
|
|
373
374
|
exports.InlineNotification = require_Notification.InlineNotification;
|
|
@@ -376,7 +377,7 @@ exports.Link = require_Link.default;
|
|
|
376
377
|
exports.ListItem = require_ListItem.default;
|
|
377
378
|
exports.Loading = require_Loading.default;
|
|
378
379
|
exports.Menu = require_Menu.Menu;
|
|
379
|
-
exports.MenuButton = require_index$
|
|
380
|
+
exports.MenuButton = require_index$15.MenuButton;
|
|
380
381
|
exports.MenuItem = require_MenuItem.MenuItem;
|
|
381
382
|
exports.MenuItemDivider = require_MenuItem.MenuItemDivider;
|
|
382
383
|
exports.MenuItemGroup = require_MenuItem.MenuItemGroup;
|
|
@@ -493,8 +494,8 @@ exports.TextArea = require_TextArea.default;
|
|
|
493
494
|
exports.TextAreaSkeleton = require_TextArea_Skeleton.TextAreaSkeleton;
|
|
494
495
|
exports.TextInput = require_TextInput.default;
|
|
495
496
|
exports.TextInputSkeleton = require_TextInput_Skeleton.TextInputSkeleton;
|
|
496
|
-
exports.Theme = require_index$
|
|
497
|
-
exports.ThemeContext = require_index$
|
|
497
|
+
exports.Theme = require_index$20.Theme;
|
|
498
|
+
exports.ThemeContext = require_index$20.ThemeContext;
|
|
498
499
|
exports.Tile = require_Tile.Tile;
|
|
499
500
|
exports.TileAboveTheFoldContent = require_Tile.TileAboveTheFoldContent;
|
|
500
501
|
exports.TileBelowTheFoldContent = require_Tile.TileBelowTheFoldContent;
|
|
@@ -518,7 +519,7 @@ exports.VStack = require_VStack.VStack;
|
|
|
518
519
|
exports.preview_FeatureFlags = require_index.FeatureFlags;
|
|
519
520
|
exports.preview_Layout = require_index$6.Layout;
|
|
520
521
|
exports.preview_LayoutDirection = require_LayoutDirection.LayoutDirection;
|
|
521
|
-
exports.preview_OverflowMenuV2 = require_index$
|
|
522
|
+
exports.preview_OverflowMenuV2 = require_index$17.OverflowMenuV2;
|
|
522
523
|
exports.preview_PageSelector = require_PageSelector.default;
|
|
523
524
|
exports.preview_Pagination = require_Pagination$1.default;
|
|
524
525
|
exports.preview_Text = require_Text.Text;
|
|
@@ -528,6 +529,12 @@ exports.preview__AiSkeletonPlaceholder = require_AISkeletonPlaceholder.default;
|
|
|
528
529
|
exports.preview__AiSkeletonText = require_AISkeletonText.default;
|
|
529
530
|
exports.preview__ChatButton = require_ChatButton.default;
|
|
530
531
|
exports.preview__ChatButtonSkeleton = require_ChatButton_Skeleton.default;
|
|
532
|
+
Object.defineProperty(exports, "preview__DatePicker", {
|
|
533
|
+
enumerable: true,
|
|
534
|
+
get: function() {
|
|
535
|
+
return require_index$13.next_exports;
|
|
536
|
+
}
|
|
537
|
+
});
|
|
531
538
|
Object.defineProperty(exports, "preview__Dialog", {
|
|
532
539
|
enumerable: true,
|
|
533
540
|
get: function() {
|
|
@@ -556,14 +563,14 @@ exports.preview__FluidTextInputSkeleton = require_FluidTextInput_Skeleton.defaul
|
|
|
556
563
|
exports.preview__FluidTimePicker = require_FluidTimePicker.default;
|
|
557
564
|
exports.preview__FluidTimePickerSelect = require_FluidTimePickerSelect.default;
|
|
558
565
|
exports.preview__FluidTimePickerSkeleton = require_FluidTimePicker_Skeleton.default;
|
|
559
|
-
exports.preview__IconIndicator = require_index$
|
|
566
|
+
exports.preview__IconIndicator = require_index$18.IconIndicator;
|
|
560
567
|
Object.defineProperty(exports, "preview__PageHeader", {
|
|
561
568
|
enumerable: true,
|
|
562
569
|
get: function() {
|
|
563
|
-
return require_index$
|
|
570
|
+
return require_index$16.PageHeader_exports;
|
|
564
571
|
}
|
|
565
572
|
});
|
|
566
|
-
exports.preview__ShapeIndicator = require_index$
|
|
573
|
+
exports.preview__ShapeIndicator = require_index$19.ShapeIndicator;
|
|
567
574
|
exports.preview__Slug = require_index$4.AILabel;
|
|
568
575
|
exports.preview__SlugActions = require_index$4.AILabelActions;
|
|
569
576
|
exports.preview__SlugContent = require_index$4.AILabelContent;
|
|
@@ -573,7 +580,7 @@ exports.preview_useLayoutDirection = require_useLayoutDirection.useLayoutDirecti
|
|
|
573
580
|
exports.unstable_FeatureFlags = require_index.FeatureFlags;
|
|
574
581
|
exports.unstable_Layout = require_index$6.Layout;
|
|
575
582
|
exports.unstable_LayoutDirection = require_LayoutDirection.LayoutDirection;
|
|
576
|
-
exports.unstable_OverflowMenuV2 = require_index$
|
|
583
|
+
exports.unstable_OverflowMenuV2 = require_index$17.OverflowMenuV2;
|
|
577
584
|
exports.unstable_PageSelector = require_PageSelector.default;
|
|
578
585
|
exports.unstable_Pagination = require_Pagination$1.default;
|
|
579
586
|
exports.unstable_Text = require_Text.Text;
|
|
@@ -605,14 +612,14 @@ exports.unstable__FluidTextInputSkeleton = require_FluidTextInput_Skeleton.defau
|
|
|
605
612
|
exports.unstable__FluidTimePicker = require_FluidTimePicker.default;
|
|
606
613
|
exports.unstable__FluidTimePickerSelect = require_FluidTimePickerSelect.default;
|
|
607
614
|
exports.unstable__FluidTimePickerSkeleton = require_FluidTimePicker_Skeleton.default;
|
|
608
|
-
exports.unstable__IconIndicator = require_index$
|
|
615
|
+
exports.unstable__IconIndicator = require_index$18.IconIndicator;
|
|
609
616
|
Object.defineProperty(exports, "unstable__PageHeader", {
|
|
610
617
|
enumerable: true,
|
|
611
618
|
get: function() {
|
|
612
|
-
return require_index$
|
|
619
|
+
return require_index$16.PageHeader_exports;
|
|
613
620
|
}
|
|
614
621
|
});
|
|
615
|
-
exports.unstable__ShapeIndicator = require_index$
|
|
622
|
+
exports.unstable__ShapeIndicator = require_index$19.ShapeIndicator;
|
|
616
623
|
exports.unstable__Slug = require_index$4.AILabel;
|
|
617
624
|
exports.unstable__SlugActions = require_index$4.AILabelActions;
|
|
618
625
|
exports.unstable__SlugContent = require_index$4.AILabelContent;
|
|
@@ -624,9 +631,9 @@ exports.useFeatureFlag = require_index.useFeatureFlag;
|
|
|
624
631
|
exports.useFeatureFlags = require_index.useFeatureFlags;
|
|
625
632
|
exports.useIdPrefix = require_useIdPrefix.useIdPrefix;
|
|
626
633
|
exports.useLayer = require_index$8.useLayer;
|
|
627
|
-
exports.usePrefersDarkScheme = require_index$
|
|
634
|
+
exports.usePrefersDarkScheme = require_index$20.usePrefersDarkScheme;
|
|
628
635
|
exports.usePrefix = require_usePrefix.usePrefix;
|
|
629
|
-
exports.useTheme = require_index$
|
|
636
|
+
exports.useTheme = require_index$20.useTheme;
|
|
630
637
|
exports.validateNumberSeparators = require_NumberInput.validateNumberSeparators;
|
|
631
638
|
exports.withComposedModalPresence = require_ComposedModalPresence.withComposedModalPresence;
|
|
632
639
|
exports.withModalPresence = require_ModalPresence.withModalPresence;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2021, 2025
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import { RefObject } from 'react';
|
|
8
|
+
/**
|
|
9
|
+
* Returns the first element matching `selector` within `container`, or null.
|
|
10
|
+
TO DO: This hook will be removed https://github.com/carbon-design-system/ibm-products/issues/7731
|
|
11
|
+
*/
|
|
12
|
+
export declare const getSpecificElement: (container: HTMLElement | null, selector: string) => HTMLElement | null;
|
|
13
|
+
/**
|
|
14
|
+
* Provides focus-trap helpers for a panel/modal container.
|
|
15
|
+
*
|
|
16
|
+
* - `firstElement` – the first tabbable element inside the container.
|
|
17
|
+
* - `keyDownListener` – an `onKeyDown` handler that cycles focus between the
|
|
18
|
+
* first and last tabbable elements (Tab / Shift+Tab wrap-around).
|
|
19
|
+
*/
|
|
20
|
+
export declare const useFocus: (ref: RefObject<HTMLElement | null>) => {
|
|
21
|
+
firstElement: HTMLElement | null;
|
|
22
|
+
keyDownListener: (event: React.KeyboardEvent | KeyboardEvent) => void;
|
|
23
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2021, 2025
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
/**
|
|
8
|
+
* Returns `true` when the user has requested reduced motion via the
|
|
9
|
+
* `prefers-reduced-motion: reduce` media query.
|
|
10
|
+
*/
|
|
11
|
+
export declare const usePrefersReducedMotion: () => boolean;
|