@algolia/satellite 1.7.0 → 1.8.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 (58) hide show
  1. package/dist/cjs/Actions/Button/PolymorphicButton.js +2 -2
  2. package/dist/cjs/Actions/Button/PolymorphicIconButton.js +2 -2
  3. package/dist/cjs/Actions/Button/types.d.ts +2 -2
  4. package/dist/cjs/Fields/AutoComplete/AutoComplete.js +4 -4
  5. package/dist/cjs/Fields/DatePicker/components/Calendar.js +1 -4
  6. package/dist/cjs/Fields/Field/Field.js +11 -1
  7. package/dist/cjs/Fields/Field/FieldContext.d.ts +1 -0
  8. package/dist/cjs/Fields/Field/useField.d.ts +2 -1
  9. package/dist/cjs/Fields/Field/useField.js +7 -2
  10. package/dist/cjs/Fields/Form/stories/ExtraErrors.js +6 -19
  11. package/dist/cjs/Fields/Form/stories/MultiStep.js +13 -35
  12. package/dist/cjs/Fields/Form/stories/ValidationStrategies.js +13 -30
  13. package/dist/cjs/Fields/RangeSlider/RangeSlider.js +7 -8
  14. package/dist/cjs/Indicators/ScrollIndicator/ScrollIndicator.js +1 -2
  15. package/dist/cjs/Layout/Tables/DataTable/DataTable.d.ts +1 -1
  16. package/dist/cjs/Layout/Tables/DataTable/components/Body.d.ts +1 -1
  17. package/dist/cjs/Layout/Tables/DataTable/components/Header.d.ts +1 -1
  18. package/dist/cjs/Layout/Tables/DataTable/components/HeaderCell.d.ts +1 -1
  19. package/dist/cjs/Layout/Tables/DataTable/utils.d.ts +1 -1
  20. package/dist/cjs/Navigation/Stepper/Step.js +8 -7
  21. package/dist/cjs/Navigation/Stepper/Stepper.d.ts +6 -0
  22. package/dist/cjs/Navigation/Stepper/Stepper.js +9 -3
  23. package/dist/cjs/Navigation/Stepper/StepperContext.d.ts +2 -1
  24. package/dist/cjs/Overlay/Dropdown/DropdownContext.d.ts +1 -1
  25. package/dist/cjs/Overlay/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroupContext.d.ts +1 -1
  26. package/dist/cjs/Overlay/MenuButton/components/collapsible/CollapsibleItemsGroupContext.d.ts +1 -1
  27. package/dist/cjs/styles/helpers/makePurgeCssExtractor.js +3 -3
  28. package/dist/cjs/utils/useTriggerInputChange.js +4 -3
  29. package/dist/esm/Actions/Button/PolymorphicButton.js +2 -2
  30. package/dist/esm/Actions/Button/PolymorphicIconButton.js +2 -2
  31. package/dist/esm/Actions/Button/types.d.ts +2 -2
  32. package/dist/esm/Fields/AutoComplete/AutoComplete.js +4 -4
  33. package/dist/esm/Fields/DatePicker/components/Calendar.js +1 -4
  34. package/dist/esm/Fields/Field/Field.js +11 -1
  35. package/dist/esm/Fields/Field/FieldContext.d.ts +1 -0
  36. package/dist/esm/Fields/Field/useField.d.ts +2 -1
  37. package/dist/esm/Fields/Field/useField.js +7 -2
  38. package/dist/esm/Fields/Form/stories/ExtraErrors.js +6 -19
  39. package/dist/esm/Fields/Form/stories/MultiStep.js +13 -35
  40. package/dist/esm/Fields/Form/stories/ValidationStrategies.js +13 -30
  41. package/dist/esm/Fields/RangeSlider/RangeSlider.js +8 -9
  42. package/dist/esm/Indicators/ScrollIndicator/ScrollIndicator.js +1 -2
  43. package/dist/esm/Layout/Tables/DataTable/DataTable.d.ts +1 -1
  44. package/dist/esm/Layout/Tables/DataTable/components/Body.d.ts +1 -1
  45. package/dist/esm/Layout/Tables/DataTable/components/Header.d.ts +1 -1
  46. package/dist/esm/Layout/Tables/DataTable/components/HeaderCell.d.ts +1 -1
  47. package/dist/esm/Layout/Tables/DataTable/utils.d.ts +1 -1
  48. package/dist/esm/Navigation/Stepper/Step.js +8 -7
  49. package/dist/esm/Navigation/Stepper/Stepper.d.ts +6 -0
  50. package/dist/esm/Navigation/Stepper/Stepper.js +9 -3
  51. package/dist/esm/Navigation/Stepper/StepperContext.d.ts +2 -1
  52. package/dist/esm/Overlay/Dropdown/DropdownContext.d.ts +1 -1
  53. package/dist/esm/Overlay/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroupContext.d.ts +1 -1
  54. package/dist/esm/Overlay/MenuButton/components/collapsible/CollapsibleItemsGroupContext.d.ts +1 -1
  55. package/dist/esm/styles/helpers/makePurgeCssExtractor.js +3 -3
  56. package/dist/esm/utils/useTriggerInputChange.js +4 -3
  57. package/dist/satellite.min.css +1 -1
  58. package/package.json +19 -19
@@ -2,7 +2,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
2
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
3
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
4
4
  var _excluded = ["className", "index", "icon", "label", "name", "completed", "disabled"];
5
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29;
5
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31;
6
6
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
7
7
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
8
8
  import cx from "clsx";
@@ -56,6 +56,7 @@ export var Step = function Step(_ref) {
56
56
  var activeLocale = typeof locale.activeStep === "function" ? locale.activeStep(stepName) : locale.activeStep;
57
57
  var completedLocale = typeof locale.completedStep === "function" ? locale.completedStep(stepName) : locale.completedStep;
58
58
  var incompletedLocale = typeof locale.incompletedStep === "function" ? locale.incompletedStep(stepName) : locale.incompletedStep;
59
+ var isVertical = context.orientation === "vertical";
59
60
  var Icon = CustomIcon;
60
61
  if (completed) {
61
62
  Icon = CheckIconInternal;
@@ -71,7 +72,7 @@ export var Step = function Step(_ref) {
71
72
  "aria-label": disabled ? disabledLocale : active ? activeLocale : completed ? completedLocale : incompletedLocale,
72
73
  "aria-current": active ? "step" : undefined,
73
74
  disabled: disabled,
74
- tabIndex: index === context.activeStep ? 0 : -1,
75
+ tabIndex: index === context.focusedStep ? 0 : -1,
75
76
  "data-step-idx": index,
76
77
  onClick: function onClick() {
77
78
  var _context$onStepChange;
@@ -89,20 +90,20 @@ export var Step = function Step(_ref) {
89
90
  }
90
91
  },
91
92
  children: [context.connectors && /*#__PURE__*/_jsx("span", {
92
- className: cx(stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["absolute -z-10 border-l h-full group-last/step:hidden"]))), completed ? stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["border-green-600"]))) : stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["border-grey-200"]))), CONNECTOR_SIZE_CLASSNAMES[context.size])
93
+ className: cx(stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["absolute -z-10 group-last/step:hidden"]))), isVertical ? stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["border-l h-full"]))) : stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["border-t w-4 -right-px translate-x-full"]))), completed ? stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["border-green-600"]))) : stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["border-grey-200"]))), isVertical && CONNECTOR_SIZE_CLASSNAMES[context.size])
93
94
  }), /*#__PURE__*/_jsx("span", {
94
- className: cx(stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["rounded-full flex items-center justify-center shrink-0 text-sm"]))), !active && !completed && stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["bg-grey-100"]))), !active && !completed && !disabled && stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["group-hover/button:bg-white"]))), active && !completed && stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["bg-grey-800 text-white"]))), completed && stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["bg-green-600 text-white"]))), ICON_SIZE_CLASSNAMES[context.size]),
95
+ className: cx(stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["rounded-full flex items-center justify-center shrink-0 text-sm"]))), !active && !completed && stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["bg-grey-100"]))), !active && !completed && !disabled && stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["group-hover/button:bg-white"]))), active && !completed && stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["bg-grey-800 text-white"]))), completed && stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["bg-green-600 text-white"]))), ICON_SIZE_CLASSNAMES[context.size]),
95
96
  children: Icon ? /*#__PURE__*/_jsx(Icon, {
96
97
  width: ICON_SIZE[context.size],
97
98
  height: ICON_SIZE[context.size]
98
99
  }) : index + 1
99
100
  }), /*#__PURE__*/_jsxs("div", {
100
- className: cx(disabled && stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["text-grey-300"])))),
101
+ className: cx(disabled && stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["text-grey-300"])))),
101
102
  children: [!!label && /*#__PURE__*/_jsx("div", {
102
- className: stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["text-sm line-clamp-1"]))),
103
+ className: stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["text-sm line-clamp-1"]))),
103
104
  children: label
104
105
  }), /*#__PURE__*/_jsx("div", {
105
- className: cx(stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["text-base line-clamp-2"]))), (completed || active) && stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["text-grey-900"]))), context.size === "small" && stl(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["text-sm"])))),
106
+ className: cx(stl(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["text-base line-clamp-2"]))), (completed || active) && stl(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["text-grey-900"]))), context.size === "small" && stl(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["text-sm"])))),
106
107
  children: name
107
108
  })]
108
109
  })]
@@ -7,6 +7,7 @@ export declare type StepperLocale = {
7
7
  completedStep?: string | ((stepName: string) => string);
8
8
  };
9
9
  export declare type StepperSizes = "small" | "default" | "large";
10
+ export declare type StepperOrientation = "horizontal" | "vertical";
10
11
  export interface StepperProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
11
12
  /**
12
13
  * Defines the steps of the Stepper.
@@ -27,6 +28,11 @@ export interface StepperProps extends Omit<HTMLAttributes<HTMLDivElement>, "chil
27
28
  * @default "default"
28
29
  */
29
30
  size?: StepperSizes;
31
+ /**
32
+ * Defines the orientation of the Stepper.
33
+ * @default "vertical"
34
+ */
35
+ orientation?: StepperOrientation;
30
36
  /**
31
37
  * Defines whether the connectors should be displayed.
32
38
  * @default true
@@ -2,8 +2,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
2
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
4
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
5
- var _templateObject;
6
- var _excluded = ["steps", "activeStep", "onStepChange", "size", "connectors", "locale", "className"];
5
+ var _templateObject, _templateObject2, _templateObject3;
6
+ var _excluded = ["steps", "activeStep", "onStepChange", "size", "orientation", "connectors", "locale", "className"];
7
7
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
8
8
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
9
9
  import cx from "clsx";
@@ -34,6 +34,8 @@ export var Stepper = function Stepper(_ref) {
34
34
  _onStepChange = _ref.onStepChange,
35
35
  _ref$size = _ref.size,
36
36
  size = _ref$size === void 0 ? "default" : _ref$size,
37
+ _ref$orientation = _ref.orientation,
38
+ orientation = _ref$orientation === void 0 ? "vertical" : _ref$orientation,
37
39
  _ref$connectors = _ref.connectors,
38
40
  connectors = _ref$connectors === void 0 ? true : _ref$connectors,
39
41
  propsLocale = _ref.locale,
@@ -80,6 +82,7 @@ export var Stepper = function Stepper(_ref) {
80
82
  activeStep: activeStep,
81
83
  focusedStep: focusedStep,
82
84
  size: size,
85
+ orientation: orientation,
83
86
  connectors: connectors,
84
87
  locale: locale,
85
88
  onStepChange: function onStepChange(index) {
@@ -96,11 +99,14 @@ export var Stepper = function Stepper(_ref) {
96
99
  className: cx(className),
97
100
  children: /*#__PURE__*/_jsx("ol", {
98
101
  role: "presentation",
99
- className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex flex-col isolate"]))),
102
+ className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex isolate"]))), orientation === "vertical" ? stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex-col"]))) : stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["gap-0"])))),
100
103
  ref: containerRef,
101
104
  onFocus: function onFocus() {
102
105
  setFocusedStep(activeStep);
103
106
  },
107
+ onBlur: function onBlur() {
108
+ setFocusedStep(activeStep);
109
+ },
104
110
  onKeyDown: function onKeyDown(event) {
105
111
  switch (event.key) {
106
112
  case "ArrowLeft":
@@ -1,9 +1,10 @@
1
1
  /// <reference types="react" />
2
- import type { StepperLocale, StepperSizes } from "./Stepper";
2
+ import type { StepperLocale, StepperOrientation, StepperSizes } from "./Stepper";
3
3
  export declare type StepperContextType = {
4
4
  activeStep: number;
5
5
  focusedStep: number;
6
6
  size: StepperSizes;
7
+ orientation: StepperOrientation;
7
8
  connectors: boolean;
8
9
  locale: StepperLocale;
9
10
  onStepChange?: (index: number) => void;
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  export interface DropdownContextInterface {
3
- showMenu(show: boolean): void;
3
+ showMenu: (show: boolean) => void;
4
4
  }
5
5
  export declare const DropdownContext: import("react").Context<DropdownContextInterface | null>;
6
6
  export declare const useDropdownContext: () => DropdownContextInterface;
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  export interface DropdownCollapsibleItemsGroupContextInterface {
3
3
  expandedItems: readonly string[];
4
- onItemClick(name: string): void;
4
+ onItemClick: (name: string) => void;
5
5
  }
6
6
  export declare const DropdownCollapsibleItemsGroupContext: import("react").Context<DropdownCollapsibleItemsGroupContextInterface | null>;
7
7
  /** @deprecated */
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  export interface CollapsibleItemsGroupContextInterface {
3
3
  expandedItems: readonly string[];
4
- onItemClick(name: string): void;
4
+ onItemClick: (name: string) => void;
5
5
  }
6
6
  export declare const CollapsibleItemsGroupContext: import("react").Context<CollapsibleItemsGroupContextInterface | null>;
7
7
  export declare const useCollapsibleItemsGroup: () => CollapsibleItemsGroupContextInterface;
@@ -1,6 +1,6 @@
1
- function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
2
- function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
3
- function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
1
+ function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
2
+ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
3
+ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
4
4
  import _prefixTailwindClassName from "./prefixTailwindClassName";
5
5
  // @ts-check
6
6
  var prefixTailwindClassName = _prefixTailwindClassName;
@@ -5,15 +5,16 @@ import { useCallback } from "react";
5
5
  */
6
6
  export var useTriggerInputChange = function useTriggerInputChange(inputRef) {
7
7
  var triggerInputChange = useCallback(function (value) {
8
+ var _Object$getOwnPropert;
8
9
  var input = inputRef.current;
9
10
  if (!input) return;
10
11
 
11
- // @ts-ignore
12
- var nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set;
12
+ // eslint-disable-next-line @typescript-eslint/unbound-method
13
+ var nativeInputValueSetter = (_Object$getOwnPropert = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")) === null || _Object$getOwnPropert === void 0 ? void 0 : _Object$getOwnPropert.set;
13
14
  var ev2 = new Event("input", {
14
15
  bubbles: true
15
16
  });
16
- nativeInputValueSetter.call(input, value);
17
+ nativeInputValueSetter === null || nativeInputValueSetter === void 0 || nativeInputValueSetter.call(input, value);
17
18
  input.dispatchEvent(ev2);
18
19
  }, [inputRef]);
19
20
  return triggerInputChange;