@carbon/react 1.85.0-rc.0 → 1.85.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.
Files changed (38) hide show
  1. package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +942 -872
  2. package/es/components/DatePicker/DatePicker.d.ts +1 -1
  3. package/es/components/DatePicker/DatePicker.js +2 -2
  4. package/es/components/DatePicker/plugins/appendToPlugin.d.ts +12 -0
  5. package/es/components/DatePicker/plugins/appendToPlugin.js +9 -12
  6. package/es/components/Menu/Menu.js +7 -2
  7. package/es/components/Menu/MenuItem.js +13 -2
  8. package/es/components/MultiSelect/FilterableMultiSelect.js +1 -1
  9. package/es/components/MultiSelect/filter.d.ts +10 -0
  10. package/es/components/MultiSelect/filter.js +21 -0
  11. package/es/components/Slider/Slider.d.ts +59 -198
  12. package/es/components/Slider/Slider.js +68 -120
  13. package/es/components/Tabs/usePressable.d.ts +19 -0
  14. package/es/components/Tabs/usePressable.js +19 -33
  15. package/es/components/Tooltip/Tooltip.d.ts +2 -2
  16. package/es/components/Tooltip/Tooltip.js +2 -2
  17. package/es/components/TreeView/TreeNode.d.ts +22 -0
  18. package/es/components/TreeView/TreeNode.js +116 -9
  19. package/lib/components/DatePicker/DatePicker.d.ts +1 -1
  20. package/lib/components/DatePicker/DatePicker.js +1 -1
  21. package/lib/components/DatePicker/plugins/appendToPlugin.d.ts +12 -0
  22. package/lib/components/DatePicker/plugins/appendToPlugin.js +9 -12
  23. package/lib/components/Menu/Menu.js +7 -2
  24. package/lib/components/Menu/MenuItem.js +13 -2
  25. package/lib/components/MultiSelect/FilterableMultiSelect.js +1 -1
  26. package/lib/components/MultiSelect/filter.d.ts +10 -0
  27. package/lib/components/MultiSelect/filter.js +25 -0
  28. package/lib/components/Slider/Slider.d.ts +59 -198
  29. package/lib/components/Slider/Slider.js +67 -119
  30. package/lib/components/Tabs/usePressable.d.ts +19 -0
  31. package/lib/components/Tabs/usePressable.js +19 -33
  32. package/lib/components/Tooltip/Tooltip.d.ts +2 -2
  33. package/lib/components/Tooltip/Tooltip.js +2 -2
  34. package/lib/components/TreeView/TreeNode.d.ts +22 -0
  35. package/lib/components/TreeView/TreeNode.js +115 -8
  36. package/package.json +6 -6
  37. package/es/components/ComboBox/tools/filter.js +0 -18
  38. package/lib/components/ComboBox/tools/filter.js +0 -22
package/es/components/DatePicker/DatePicker.d.ts CHANGED
@@ -29,7 +29,7 @@ export interface DatePickerProps {
29
29
  /**
30
30
  * The DOM element the flatpickr should be inserted into `<body>` by default.
31
31
  */
32
- appendTo?: object;
32
+ appendTo?: HTMLElement;
33
33
  /**
34
34
  * The child nodes.
35
35
  */
package/es/components/DatePicker/DatePicker.js CHANGED
@@ -12,7 +12,7 @@ import cx from 'classnames';
12
12
  import flatpickr from 'flatpickr';
13
13
  import l10n from 'flatpickr/dist/l10n/index';
14
14
  import DatePickerInput from '../DatePickerInput/DatePickerInput.js';
15
- import carbonFlatpickrAppendToPlugin from './plugins/appendToPlugin.js';
15
+ import { appendToPlugin } from './plugins/appendToPlugin.js';
16
16
  import carbonFlatpickrFixEventsPlugin from './plugins/fixEventsPlugin.js';
17
17
  import carbonFlatpickrRangePlugin from './plugins/rangePlugin.js';
18
18
  import deprecate from '../../prop-types/deprecate.js';
@@ -340,7 +340,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
340
340
  parseDate: parseDate,
341
341
  plugins: [datePickerType === 'range' ? carbonFlatpickrRangePlugin({
342
342
  input: endInputField.current
343
- }) : () => {}, appendTo ? carbonFlatpickrAppendToPlugin({
343
+ }) : () => {}, appendTo ? appendToPlugin({
344
344
  appendTo
345
345
  }) : () => {}, carbonFlatpickrMonthSelectPlugin({
346
346
  selectorFlatpickrMonthYearContainer: '.flatpickr-current-month',
package/es/components/DatePicker/plugins/appendToPlugin.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ /**
2
+ * Copyright IBM Corp. 2019, 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 type { Plugin } from 'flatpickr/dist/types/options';
8
+ interface AppendToPluginConfig {
9
+ appendTo: HTMLElement;
10
+ }
11
+ export declare const appendToPlugin: (config: AppendToPluginConfig) => Plugin;
12
+ export {};
package/es/components/DatePicker/plugins/appendToPlugin.js CHANGED
@@ -5,13 +5,9 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- /**
9
- * @param {object} config Plugin configuration.
10
- * @returns {Plugin} A Flatpickr plugin to put adjust the position of calendar dropdown.
11
- */
12
- var carbonFlatpickrAppendToPlugin = config => fp => {
8
+ const appendToPlugin = config => fp => {
13
9
  /**
14
- * Adjusts the floating menu position after Flatpicker sets it.
10
+ * Adjusts the floating menu position after Flatpickr sets it.
15
11
  */
16
12
  const handlePreCalendarPosition = () => {
17
13
  Promise.resolve().then(() => {
@@ -20,9 +16,10 @@ var carbonFlatpickrAppendToPlugin = config => fp => {
20
16
  config: fpConfig,
21
17
  _positionElement: positionElement
22
18
  } = fp;
23
- const {
24
- appendTo
25
- } = fpConfig;
19
+ const appendTo = fpConfig.appendTo;
20
+ if (!appendTo) {
21
+ throw new Error('[appendToPlugin] Missing `appendTo` element.');
22
+ }
26
23
  const {
27
24
  left: containerLeft,
28
25
  top: containerTop
@@ -31,8 +28,8 @@ var carbonFlatpickrAppendToPlugin = config => fp => {
31
28
  left: refLeft,
32
29
  bottom: refBottom
33
30
  } = positionElement.getBoundingClientRect();
34
- if ((appendTo !== appendTo.ownerDocument.body || containerLeft !== 0 || containerTop !== 0) && appendTo.ownerDocument.defaultView.getComputedStyle(appendTo).getPropertyValue('position') === 'static') {
35
- throw new Error('Floating menu container must not have `position:static`.');
31
+ if ((appendTo !== appendTo.ownerDocument.body || containerLeft !== 0 || containerTop !== 0) && appendTo.ownerDocument.defaultView?.getComputedStyle(appendTo).getPropertyValue('position') === 'static') {
32
+ throw new Error('Floating menu container must not have `position: static`.');
36
33
  }
37
34
  // `2` for negative margin on calendar dropdown
38
35
  calendarContainer.style.top = `${refBottom - containerTop + 2}px`;
@@ -53,4 +50,4 @@ var carbonFlatpickrAppendToPlugin = config => fp => {
53
50
  };
54
51
  };
55
52
 
56
- export { carbonFlatpickrAppendToPlugin as default };
53
+ export { appendToPlugin };
package/es/components/Menu/Menu.js CHANGED
@@ -244,8 +244,13 @@ const Menu = /*#__PURE__*/forwardRef(function Menu({
244
244
  return [fitValue(ranges.x, 'x') ?? -1, fitValue(ranges.y, 'y') ?? -1];
245
245
  }
246
246
  useEffect(() => {
247
- if (open && focusableItems.length > 0) {
248
- focusItem();
247
+ if (open) {
248
+ const raf = requestAnimationFrame(() => {
249
+ if (focusableItems.length > 0) {
250
+ focusItem();
251
+ }
252
+ });
253
+ return () => cancelAnimationFrame(raf);
249
254
  }
250
255
  // eslint-disable-next-line react-hooks/exhaustive-deps
251
256
  }, [open, focusableItems]);
package/es/components/Menu/MenuItem.js CHANGED
@@ -107,7 +107,11 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem({
107
107
  function handleKeyDown(e) {
108
108
  if (hasChildren && match(e, ArrowRight)) {
109
109
  openSubmenu();
110
+ requestAnimationFrame(() => {
111
+ refs.floating.current?.focus();
112
+ });
110
113
  e.stopPropagation();
114
+ e.preventDefault();
111
115
  }
112
116
  pendingKeyboardClick.current = keyboardClickEvent(e);
113
117
  if (rest.onKeyDown) {
@@ -124,11 +128,18 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem({
124
128
  [`${prefix}--menu-item--disabled`]: isDisabled,
125
129
  [`${prefix}--menu-item--danger`]: isDanger
126
130
  });
127
-
131
+ const [isFocusable, setIsFocusable] = useState(false);
128
132
  // on first render, register this menuitem in the context's state
129
133
  // (used for keyboard navigation)
130
134
  useEffect(() => {
131
135
  registerItem();
136
+
137
+ // Detects if this is the first focusable item
138
+ const currentItems = context.state.items;
139
+ if (!disabled && menuItem.current && currentItems.length === 0) {
140
+ setIsFocusable(true);
141
+ }
142
+
132
143
  // eslint-disable-next-line react-hooks/exhaustive-deps
133
144
  }, []);
134
145
 
@@ -167,7 +178,7 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem({
167
178
  }, rest, {
168
179
  ref: ref,
169
180
  className: classNames,
170
- tabIndex: -1,
181
+ tabIndex: isFocusable ? 0 : -1,
171
182
  "aria-disabled": isDisabled ?? undefined,
172
183
  "aria-haspopup": hasChildren ?? undefined,
173
184
  "aria-expanded": hasChildren ? submenuOpen : undefined,
package/es/components/MultiSelect/FilterableMultiSelect.js CHANGED
@@ -12,7 +12,7 @@ import Downshift, { useCombobox, useMultipleSelection } from 'downshift';
12
12
  import isEqual from 'react-fast-compare';
13
13
  import PropTypes from 'prop-types';
14
14
  import React, { forwardRef, useContext, useRef, useState, useLayoutEffect, useMemo, useEffect, cloneElement } from 'react';
15
- import { defaultFilterItems } from '../ComboBox/tools/filter.js';
15
+ import { defaultFilterItems } from './filter.js';
16
16
  import { sortingPropTypes } from './MultiSelectPropTypes.js';
17
17
  import ListBox from '../ListBox/index.js';
18
18
  import ListBoxSelection from '../ListBox/next/ListBoxSelection.js';
package/es/components/MultiSelect/filter.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 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
+ export declare const defaultFilterItems: <ItemType>(items: ItemType[], { itemToString, inputValue, }: {
8
+ itemToString: (item: ItemType | null) => string;
9
+ inputValue: string | null;
10
+ }) => ItemType[];
package/es/components/MultiSelect/filter.js ADDED
@@ -0,0 +1,21 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2023
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
+ // TODO [@carbon-design-system/monorepo-reviewers]: This file was in the
9
+ // `ComboBox` directory before but it wasn't used there. Now it's used in
10
+ // `FilterableMultiSelect`. Is that expected?
11
+
12
+ const defaultFilterItems = (items, {
13
+ itemToString,
14
+ inputValue
15
+ }) => {
16
+ if (!inputValue) return items;
17
+ const normalizedInput = inputValue.toLowerCase();
18
+ return items.filter(item => itemToString(item).toLowerCase().includes(normalizedInput));
19
+ };
20
+
21
+ export { defaultFilterItems };
package/es/components/Slider/Slider.d.ts CHANGED
@@ -4,8 +4,7 @@
4
4
  * This source code is licensed under the Apache-2.0 license found in the
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
- import React, { type KeyboardEventHandler, PureComponent, ReactNode } from 'react';
8
- import PropTypes from 'prop-types';
7
+ import React, { PureComponent, ReactNode, type ChangeEvent, type FocusEvent, type InputHTMLAttributes, type KeyboardEvent, type KeyboardEventHandler, type MouseEvent, type RefObject, type TouchEvent } from 'react';
9
8
  import { TranslateWithId } from '../../types/common';
10
9
  declare const translationIds: {
11
10
  readonly autoCorrectAnnouncement: "carbon.slider.auto-correct-announcement";
@@ -14,15 +13,12 @@ declare const translationIds: {
14
13
  * Message ids that will be passed to translateWithId().
15
14
  */
16
15
  type TranslationKey = (typeof translationIds)[keyof typeof translationIds];
17
- /**
18
- * Distinguish two handles by lower and upper positions.
19
- */
20
16
  declare enum HandlePosition {
21
17
  LOWER = "lower",
22
18
  UPPER = "upper"
23
19
  }
24
20
  type ExcludedAttributes = 'onChange' | 'onBlur';
25
- export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes>, TranslateWithId<TranslationKey, {
21
+ export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes>, TranslateWithId<TranslationKey, {
26
22
  correctedValue?: string;
27
23
  }> {
28
24
  /**
@@ -116,14 +112,13 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
116
112
  }) => void;
117
113
  /**
118
114
  * The callback to get notified of change in value.
119
- * `({ value: number, valueUpper?: number }) => void`
120
115
  */
121
116
  onChange?: (data: {
122
117
  value: SliderProps['value'];
123
118
  valueUpper: SliderProps['unstable_valueUpper'];
124
119
  }) => void;
125
120
  /**
126
- * Provide an optional function to be called when a key is pressed in the number input. When there are two handles, you can obtain the relevant handle position by using `event.target.dataset.handlePosition`.
121
+ * Provide an optional function to be called when a key is pressed in the number input.
127
122
  */
128
123
  onInputKeyUp?: KeyboardEventHandler<HTMLInputElement>;
129
124
  /**
@@ -166,7 +161,7 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
166
161
  /**
167
162
  * Provide the text that is displayed when the control is in warning state
168
163
  */
169
- warnText?: React.ReactNode;
164
+ warnText?: ReactNode;
170
165
  }
171
166
  interface CalcLeftPercentProps {
172
167
  clientX?: number;
@@ -174,146 +169,8 @@ interface CalcLeftPercentProps {
174
169
  range?: number;
175
170
  }
176
171
  declare class Slider extends PureComponent<SliderProps> {
177
- static propTypes: {
178
- /**
179
- * The `ariaLabel` for the `<input>`.
180
- */
181
- ariaLabelInput: PropTypes.Requireable<string>;
182
- /**
183
- * The child nodes.
184
- */
185
- children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
186
- /**
187
- * The CSS class name for the slider.
188
- */
189
- className: PropTypes.Requireable<string>;
190
- /**
191
- * `true` to disable this slider.
192
- */
193
- disabled: PropTypes.Requireable<boolean>;
194
- /**
195
- * The callback to format the label associated with the minimum/maximum value.
196
- */
197
- formatLabel: PropTypes.Requireable<(...args: any[]) => any>;
198
- /**
199
- * `true` to hide the number input box.
200
- */
201
- hideTextInput: PropTypes.Requireable<boolean>;
202
- /**
203
- * The ID of the `<input>`.
204
- */
205
- id: PropTypes.Requireable<string>;
206
- /**
207
- * The `type` attribute of the `<input>`.
208
- */
209
- inputType: PropTypes.Requireable<string>;
210
- /**
211
- * `Specify whether the Slider is currently invalid
212
- */
213
- invalid: PropTypes.Requireable<boolean>;
214
- /**
215
- * Provide the text that is displayed when the Slider is in an invalid state
216
- */
217
- invalidText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
218
- /**
219
- * The label for the slider.
220
- */
221
- labelText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
222
- /**
223
- * Specify whether you want the underlying label to be visually hidden
224
- */
225
- hideLabel: PropTypes.Requireable<boolean>;
226
- /**
227
- * `true` to use the light version.
228
- */
229
- light: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
230
- /**
231
- * The maximum value.
232
- */
233
- max: PropTypes.Validator<number>;
234
- /**
235
- * The label associated with the maximum value.
236
- */
237
- maxLabel: PropTypes.Requireable<string>;
238
- /**
239
- * The minimum value.
240
- */
241
- min: PropTypes.Validator<number>;
242
- /**
243
- * The label associated with the minimum value.
244
- */
245
- minLabel: PropTypes.Requireable<string>;
246
- /**
247
- * The `name` attribute of the `<input>`.
248
- */
249
- name: PropTypes.Requireable<string>;
250
- /**
251
- * Provide an optional function to be called when the input element
252
- * loses focus
253
- */
254
- onBlur: PropTypes.Requireable<(...args: any[]) => any>;
255
- /**
256
- * The callback to get notified of change in value.
257
- */
258
- onChange: PropTypes.Requireable<(...args: any[]) => any>;
259
- /**
260
- * Provide an optional function to be called when a key is pressed in the number input
261
- */
262
- onInputKeyUp: PropTypes.Requireable<(...args: any[]) => any>;
263
- /**
264
- * The callback to get notified of value on handle release.
265
- */
266
- onRelease: PropTypes.Requireable<(...args: any[]) => any>;
267
- /**
268
- * Whether the slider should be read-only
269
- */
270
- readOnly: PropTypes.Requireable<boolean>;
271
- /**
272
- * `true` to specify if the control is required.
273
- */
274
- required: PropTypes.Requireable<boolean>;
275
- /**
276
- * A value determining how much the value should increase/decrease by moving the thumb by mouse. If a value other than 1 is provided and the input is *not* hidden, the new step requirement should be added to a visible label. Values outside the `step` increment will be considered invalid.
277
- */
278
- step: PropTypes.Requireable<number>;
279
- /**
280
- * A value determining how much the value should increase/decrease by Shift+arrow keys,
281
- * which will be `(max - min) / stepMultiplier`.
282
- */
283
- stepMultiplier: PropTypes.Requireable<number>;
284
- /**
285
- * Supply a method to translate internal strings with your i18n tool of
286
- * choice. Translation keys are available on the `translationIds` field for
287
- * this component.
288
- */
289
- translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
290
- /**
291
- * The `ariaLabel` for the upper bound `<input>` when there are two handles.
292
- */
293
- unstable_ariaLabelInputUpper: PropTypes.Requireable<string>;
294
- /**
295
- * The `name` attribute of the upper bound `<input>` when there are two handles.
296
- */
297
- unstable_nameUpper: PropTypes.Requireable<string>;
298
- /**
299
- * The upper bound when there are two handles.
300
- */
301
- unstable_valueUpper: PropTypes.Requireable<number>;
302
- /**
303
- * The value of the slider. When there are two handles, value is the lower
304
- * bound.
305
- */
306
- value: PropTypes.Validator<number>;
307
- /**
308
- * `Specify whether the Slider is in a warn state
309
- */
310
- warn: PropTypes.Requireable<boolean>;
311
- /**
312
- * Provide the text that is displayed when the Slider is in a warn state
313
- */
314
- warnText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
315
- };
316
172
  static contextType: React.Context<any>;
173
+ static translationIds: "carbon.slider.auto-correct-announcement"[];
317
174
  state: {
318
175
  value: number;
319
176
  valueUpper: number | undefined;
@@ -322,14 +179,14 @@ declare class Slider extends PureComponent<SliderProps> {
322
179
  needsOnRelease: boolean;
323
180
  isValid: boolean;
324
181
  isValidUpper: boolean;
325
- activeHandle: null;
182
+ activeHandle: undefined;
326
183
  correctedValue: null;
327
184
  correctedPosition: null;
328
185
  isRtl: boolean;
329
186
  };
330
- thumbRef: React.RefObject<HTMLDivElement | null>;
331
- thumbRefUpper: React.RefObject<HTMLDivElement | null>;
332
- filledTrackRef: React.RefObject<HTMLDivElement | null>;
187
+ thumbRef: RefObject<HTMLDivElement | null>;
188
+ thumbRefUpper: RefObject<HTMLDivElement | null>;
189
+ filledTrackRef: RefObject<HTMLDivElement | null>;
333
190
  element: HTMLDivElement | null;
334
191
  inputId: string;
335
192
  track: HTMLDivElement | null | undefined;
@@ -355,16 +212,15 @@ declare class Slider extends PureComponent<SliderProps> {
355
212
  * @returns The value rounded to the precision determined by the step.
356
213
  */
357
214
  nearestStepValue(value?: number): number;
215
+ handleDrag: (event: Event) => void;
358
216
  /**
359
217
  * Sets up "drag" event handlers and calls `this.onDrag` in case dragging
360
218
  * started on somewhere other than the thumb without a corresponding "move"
361
219
  * event.
362
- *
363
- * @param {Event} evt The event.
364
220
  */
365
- onDragStart: (evt: any) => void;
221
+ onDragStart: (evt: MouseEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>) => void;
366
222
  /**
367
- * Unregisters "drag" and "drag stop" event handlers and calls sets the flag
223
+ * Removes "drag" and "drag stop" event handlers and calls sets the flag
368
224
  * indicating that the `onRelease` callback should be called.
369
225
  */
370
226
  onDragStop: () => void;
@@ -372,40 +228,33 @@ declare class Slider extends PureComponent<SliderProps> {
372
228
  * Handles a "drag" event by recalculating the value/thumb and setting state
373
229
  * accordingly.
374
230
  *
375
- * @param {Event} evt The event.
376
- * @param activeHandle
377
- * The first drag event call, we may have an explicit activeHandle value,
378
- * which is to be used before state is used.
231
+ * @param evt The event.
232
+ * @param activeHandle The first drag event call, we may have an explicit
233
+ * activeHandle value, which is to be used before state is used.
379
234
  */
380
- _onDrag: (evt: any, activeHandle?: HandlePosition | null) => void;
235
+ _onDrag: (evt: globalThis.MouseEvent | globalThis.TouchEvent, activeHandle?: HandlePosition) => void;
381
236
  /**
382
237
  * Throttles calls to `this._onDrag` by limiting events to being processed at
383
238
  * most once every `EVENT_THROTTLE` milliseconds.
384
239
  */
385
- onDrag: import("es-toolkit/compat").DebouncedFunc<(evt: any, activeHandle?: HandlePosition | null) => void>;
240
+ onDrag: import("es-toolkit/compat").DebouncedFunc<(evt: globalThis.MouseEvent | globalThis.TouchEvent, activeHandle?: HandlePosition) => void>;
386
241
  /**
387
242
  * Handles a `keydown` event by recalculating the value/thumb and setting
388
243
  * state accordingly.
389
- *
390
- * @param {Event} evt The event.
391
244
  */
392
- onKeyDown: (evt: any) => void;
245
+ onKeyDown: (evt: KeyboardEvent<HTMLDivElement>) => void;
393
246
  /**
394
247
  * Provides the two-way binding for the input field of the Slider. It also
395
248
  * Handles a change to the input field by recalculating the value/thumb and
396
249
  * setting state accordingly.
397
- *
398
- * @param {Event} evt The event.
399
250
  */
400
- onChange: (evt: any) => void;
251
+ onChange: (evt: ChangeEvent<HTMLInputElement>) => void;
401
252
  /**
402
253
  * Checks for validity of input value after clicking out of the input. It also
403
254
  * Handles state change to isValid state.
404
- *
405
- * @param {Event} evt The event.
406
255
  */
407
- onBlur: (evt: React.FocusEvent<HTMLInputElement>) => void;
408
- onInputKeyDown: (evt: any) => void;
256
+ onBlur: (evt: FocusEvent<HTMLInputElement>) => void;
257
+ onInputKeyDown: (evt: KeyboardEvent<HTMLInputElement>) => void;
409
258
  processNewInputValue: (input: HTMLInputElement) => void;
410
259
  calcLeftPercent: ({ clientX, value, range }: CalcLeftPercentProps) => number;
411
260
  /**
@@ -434,7 +283,7 @@ declare class Slider extends PureComponent<SliderProps> {
434
283
  value: number | undefined;
435
284
  left: number;
436
285
  };
437
- calcDistanceToHandle: (handle: HandlePosition, clientX: any) => number;
286
+ calcDistanceToHandle: (handle: HandlePosition, clientX: number) => number;
438
287
  /**
439
288
  * Calculates a new slider value based on the current value, a change delta,
440
289
  * and a step.
@@ -452,41 +301,53 @@ declare class Slider extends PureComponent<SliderProps> {
452
301
  * Guards against setting either lower or upper values beyond its counterpart.
453
302
  */
454
303
  setValueLeftForHandle: (handle: HandlePosition, { value: newValue, left: newLeft }: {
455
- value: any;
456
- left: any;
304
+ value: number;
305
+ left: number;
457
306
  }) => void;
458
- setValueForHandle: (handle: HandlePosition, value: any) => void;
459
- isValidValueForPosition: ({ handle, value: newValue, min, max }: {
460
- handle: any;
461
- value: any;
462
- min: any;
463
- max: any;
307
+ setValueForHandle: (handle: HandlePosition, value: number | string) => void;
308
+ isValidValueForPosition: ({ handle, value: newValue, min, max, }: {
309
+ handle: HandlePosition;
310
+ value: number;
311
+ min: number;
312
+ max: number;
464
313
  }) => boolean;
465
- isValidValue: ({ value, min, max }: {
466
- value: any;
467
- min: any;
468
- max: any;
314
+ isValidValue: ({ value, min, max, }: {
315
+ value: number;
316
+ min: number;
317
+ max: number;
469
318
  }) => boolean;
470
- getAdjustedValueForPosition: ({ handle, value: newValue, min, max }: {
471
- handle: any;
472
- value: any;
473
- min: any;
474
- max: any;
475
- }) => any;
476
- getAdjustedValue: ({ value, min, max }: {
477
- value: any;
478
- min: any;
479
- max: any;
480
- }) => any;
319
+ getAdjustedValueForPosition: ({ handle, value: newValue, min, max, }: {
320
+ handle: HandlePosition;
321
+ value: number;
322
+ min: number;
323
+ max: number;
324
+ }) => number;
325
+ getAdjustedValue: ({ value, min, max, }: {
326
+ value: number;
327
+ min: number;
328
+ max: number;
329
+ }) => number;
481
330
  /**
482
331
  * Get the bounding rect for the requested handles' DOM element.
483
332
  *
484
333
  * If the bounding rect is not available, a new, empty DOMRect is returned.
485
334
  */
486
335
  getHandleBoundingRect: (handle: HandlePosition) => DOMRect;
487
- getClientXFromEvent(event: MouseEvent | TouchEvent): any;
336
+ getClientXFromEvent(event: globalThis.MouseEvent | globalThis.TouchEvent): number | undefined;
488
337
  hasTwoHandles(): boolean;
489
- static getDerivedStateFromProps(props: any, state: any): {} | null;
338
+ static getDerivedStateFromProps(props: SliderProps, state: Slider['state']): Partial<{
339
+ value: number;
340
+ valueUpper: number | undefined;
341
+ left: number;
342
+ leftUpper: number;
343
+ needsOnRelease: boolean;
344
+ isValid: boolean;
345
+ isValidUpper: boolean;
346
+ activeHandle: undefined;
347
+ correctedValue: null;
348
+ correctedPosition: null;
349
+ isRtl: boolean;
350
+ }> | null;
490
351
  render(): import("react/jsx-runtime").JSX.Element;
491
352
  }
492
353
  export default Slider;