@razorpay/blade 10.2.1 → 10.3.0

package/build/components/index.production.web.js

@@ -14762,33 +14762,55 @@ var SelectorSupportText = function SelectorSupportText(_ref) {
   });
 };
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+function assignRef(ref, value) {
+  if (ref == null) return;
+  if (typeof ref === 'function') {
+    ref(value);
+    return;
+  }
+  try {
+    ref.current = value;
+  } catch (error) {
+    throwBladeError({
+      moduleName: 'useMergeRefs',
+      message: "Cannot assign value '".concat(value, "' to ref '").concat(ref, "'")
+    });
+  }
+}
+function mergeRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+  return function (node) {
+    refs.forEach(function (ref) {
+      assignRef(ref, node);
+    });
+  };
+}
+
 /**
- * A hook which only exposes the properties of html input element via imparative hook
+ * Merged two or more refs into a single ref callback.
+ *
+ * Usage:
+ * ```ts
+ * const internalRef = React.useRef()
+ * const ref = useMergeRefs(incomingRef, internalRef);
+ * ```
+ *
  *
- * It avoids exposing other native properties of HTMLElement
- * like `style` `classList` to avoid unintended usage of refs.
+ * Taken from ChakraUI:
+ * https://github.com/chakra-ui/chakra-ui/blob/f3c4a492e5636d2745b438d10794fa4e7999b6de/packages/hooks/use-merge-refs/src/index.ts#L31
  */
-var useBladeInnerRef = function useBladeInnerRef(targetRef, handlers) {
-  var innerRef = React__default.useRef(null);
-  React__default.useImperativeHandle(targetRef, function () {
-    var element = innerRef.current;
-    return {
-      focus: function focus(opts) {
-        var _element$focus;
-        return handlers !== null && handlers !== void 0 && handlers.onFocus ? handlers.onFocus(opts) : element === null || element === void 0 ? void 0 : (_element$focus = element.focus) === null || _element$focus === void 0 ? void 0 : _element$focus.call(element, opts);
-      },
-      scrollIntoView: function scrollIntoView(opts) {
-        var _element$scrollIntoVi;
-        return element === null || element === void 0 ? void 0 : (_element$scrollIntoVi = element.scrollIntoView) === null || _element$scrollIntoVi === void 0 ? void 0 : _element$scrollIntoVi.call(element, opts);
-      },
-      getBoundingClientRect: function getBoundingClientRect() {
-        return element === null || element === void 0 ? void 0 : element.getBoundingClientRect();
-      },
-      clientHeight: element.clientHeight
-    };
-  }, [innerRef, handlers]);
-  return innerRef;
-};
+function useMergeRefs() {
+  for (var _len2 = arguments.length, refs = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    refs[_key2] = arguments[_key2];
+  }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useMemo(function () {
+    return mergeRefs.apply(void 0, refs);
+  }, refs);
+}
 
 function ownKeys$1n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$1m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1n(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -14843,7 +14865,10 @@ var _SelectorInput = function _SelectorInput(_ref3, ref) {
     hoverTokens = _ref3.hoverTokens,
     tabIndex = _ref3.tabIndex,
     accessibilityLabel = _ref3.accessibilityLabel;
-  var inputRef = useBladeInnerRef(ref);
+  // merging both refs because inputProps.ref needs to have access to indeterminate state
+  // to be able to set the mixed value via setMixed() function
+  // TODO: replace with a generic `mergeRefs()` util if we do this in other places
+  var mergedRef = useMergeRefs(ref, inputProps.ref);
   return /*#__PURE__*/jsx(StyledInput, _objectSpread$1m(_objectSpread$1m(_objectSpread$1m({
     id: id,
     isChecked: isChecked,
@@ -14854,13 +14879,7 @@ var _SelectorInput = function _SelectorInput(_ref3, ref) {
   }, inputProps), makeAccessible({
     label: accessibilityLabel
   })), {}, {
-    // merging both refs because inputProps.ref needs to have access to indeterminate state
-    // to be able to set the mixed value via setMixed() function
-    // TODO: replace with a generic `mergeRefs()` util if we do this in other places
-    ref: function ref(value) {
-      inputProps.ref.current = value;
-      inputRef.current = value;
-    }
+    ref: mergedRef
   }));
 };
 var SelectorInput = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_SelectorInput), {
@@ -20901,7 +20920,8 @@ var _TextInput = function _TextInput(_ref2, ref) {
     autoCapitalize = _ref2.autoCapitalize,
     testID = _ref2.testID,
     styledProps = _objectWithoutProperties$1(_ref2, _excluded$h);
-  var textInputRef = useBladeInnerRef(ref);
+  var textInputRef = React__default.useRef(null);
+  var mergedRef = useMergeRefs(ref, textInputRef);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     shouldShowClearButton = _useState2[0],
@@ -20944,7 +20964,7 @@ var _TextInput = function _TextInput(_ref2, ref) {
   return /*#__PURE__*/jsx(BaseInput, _objectSpread$I(_objectSpread$I({
     id: "textinput",
     componentName: MetaConstants.TextInput,
-    ref: textInputRef,
+    ref: mergedRef,
     label: label,
     accessibilityLabel: accessibilityLabel,
     hideLabelText: !Boolean(label),
@@ -21046,7 +21066,6 @@ var _PasswordInput = function _PasswordInput(_ref, ref) {
     autoCompleteSuggestionType = _ref.autoCompleteSuggestionType,
     testID = _ref.testID,
     styledProps = _objectWithoutProperties$1(_ref, _excluded$g);
-  var inputRef = useBladeInnerRef(ref);
   var _React$useState = React__default.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isRevealed = _React$useState2[0],
@@ -21081,7 +21100,7 @@ var _PasswordInput = function _PasswordInput(_ref, ref) {
     }) : null;
   };
   return /*#__PURE__*/jsx(BaseInput, _objectSpread$H({
-    ref: inputRef,
+    ref: ref,
     componentName: MetaConstants.PasswordInput,
     id: "password-field",
     label: label,
@@ -21157,7 +21176,8 @@ var _TextArea = function _TextArea(_ref, ref) {
     numberOfLines = _ref$numberOfLines === void 0 ? 2 : _ref$numberOfLines,
     testID = _ref.testID,
     styledProps = _objectWithoutProperties$1(_ref, _excluded$f);
-  var inputRef = useBladeInnerRef(ref);
+  var inputRef = React__default.useRef(null);
+  var mergedRef = useMergeRefs(ref, inputRef);
   var _React$useState = React__default.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     shouldShowClearButton = _React$useState2[0],
@@ -21200,7 +21220,7 @@ var _TextArea = function _TextArea(_ref, ref) {
     id: "textarea",
     componentName: MetaConstants.TextArea,
     autoFocus: autoFocus,
-    ref: inputRef,
+    ref: mergedRef,
     label: label,
     accessibilityLabel: accessibilityLabel,
     hideLabelText: !Boolean(label),
@@ -21629,12 +21649,6 @@ var _SelectInput = function _SelectInput(props, ref) {
     setIsControlled = _useDropdown.setIsControlled,
     selectionType = _useDropdown.selectionType,
     selectedIndices = _useDropdown.selectedIndices;
-  var inputRef = useBladeInnerRef(ref, {
-    onFocus: function onFocus(opts) {
-      var _triggererRef$current;
-      (_triggererRef$current = triggererRef.current) === null || _triggererRef$current === void 0 ? void 0 : _triggererRef$current.focus(opts);
-    }
-  });
   var icon = props.icon;
     props.onChange;
     props.defaultValue;
@@ -21725,7 +21739,11 @@ var _SelectInput = function _SelectInput(props, ref) {
     position: "relative",
     children: [!isReactNative$4() ? /*#__PURE__*/jsx(VisuallyHidden, {
       children: /*#__PURE__*/jsx("input", {
-        ref: inputRef,
+        onFocus: function onFocus() {
+          var _triggererRef$current;
+          (_triggererRef$current = triggererRef.current) === null || _triggererRef$current === void 0 ? void 0 : _triggererRef$current.focus();
+        },
+        ref: ref,
         tabIndex: -1,
         required: props.isRequired,
         name: props.name,