react-jsonschema-form-extras 1.0.0 → 1.1.0-alpha.183650

package/lib/DraftRte.js

@@ -74,15 +74,15 @@ function mapFromObject(data, mapping, defVal) {
     return agg;
   }, defVal);
 }
-/**
- *
- * @param {*} data
- * @param {*} mapping
- * Mapped object is converted to the object mapping takes
+/**
+ *
+ * @param {*} data
+ * @param {*} mapping
+ * Mapped object is converted to the object mapping takes
  */
 function mapFromSchema(data, mapping) {
-  /* if (isEmpty(data)) {
-    return;
+  /* if (isEmpty(data)) {
+    return;
   } */
   if (!mapping || mapping === null) {
     return data;
@@ -95,11 +95,11 @@ function mapFromSchema(data, mapping) {
   }
 }
 
-/**
- *
- * @param {*} data
- * @param {*} mapping
- * prepare the String to display
+/**
+ *
+ * @param {*} data
+ * @param {*} mapping
+ * prepare the String to display
  */
 function optionToString(fields, separator) {
   return function (option) {
@@ -119,11 +119,11 @@ function optionToString(fields, separator) {
     }, "");
   };
 }
-/**
- *
- * @param {*} data
- * @param {*} mapping
- * maping the label
+/**
+ *
+ * @param {*} data
+ * @param {*} mapping
+ * maping the label
  */
 function mapLabelKey(labelKey) {
   if (Array.isArray(labelKey)) {
@@ -140,10 +140,10 @@ function mapLabelKey(labelKey) {
 var DraftRTE = function (_Component) {
   _inherits(DraftRTE, _Component);
 
-  /**
-   *
-   * @param {*} props
-   * Currently only supports HTML
+  /**
+   *
+   * @param {*} props
+   * Currently only supports HTML
    */
   function DraftRTE(props) {
     _classCallCheck(this, DraftRTE);
@@ -183,24 +183,24 @@ var DraftRTE = function (_Component) {
     };
     return _this;
   }
-  /**
-   * updates formData by calling parent's onChange function with current html content
+  /**
+   * updates formData by calling parent's onChange function with current html content
    */
 
 
-  /**
-   * handles editor's onChange
-   * handles logic to update form data based on props supplied to the component
+  /**
+   * handles editor's onChange
+   * handles logic to update form data based on props supplied to the component
    */
   //will only be executed if debounce is present
 
-  /**
-   * handles the logic to update formData on blur
+  /**
+   * handles the logic to update formData on blur
    */
 
 
-  /**
-   * handles the logic to load the suggestions on the time of focus
+  /**
+   * handles the logic to load the suggestions on the time of focus
    */
 
 
@@ -208,8 +208,8 @@ var DraftRTE = function (_Component) {
     key: "render",
 
 
-    /**
-     * react render function
+    /**
+     * react render function
      */
     value: function render() {
       var _this2 = this;

package/lib/MultiTypeaheadField.js

@@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
 var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
@@ -43,12 +41,12 @@ function defaultSearch(url, query) {
   });
 }
 
-/**
- * MultiTypeaheadField - A custom multi-select dropdown component with search capability.
- * Supports both static options and URL-based options with search functionality.
- * Compatible with react-jsonschema-form
+/**
+ * MultiTypeaheadField - A custom multi-select dropdown component with search capability.
+ * Supports both static options and URL-based options with search functionality.
+ * Compatible with react-jsonschema-form
  */
-// Styled components for MUI v5 - converted from original withStyles
+// Styled components for MUI v5
 var StyledContainer = (0, _styles.styled)("div")({
   position: "relative",
   width: "100%"
@@ -102,9 +100,9 @@ var StyledChipContainer = (0, _styles.styled)("div")({
   gap: "4px",
   alignItems: "center",
   overflow: "hidden",
-  flex: "1 1 auto", // Allow container to grow and shrink as needed
-  minWidth: 0, // Allow shrinking below content size
-  minHeight: "20px", // Reduce minimum height for better alignment
+  flex: "1 1 auto",
+  minWidth: 0,
+  minHeight: "20px",
   paddingTop: "2px",
   paddingBottom: "2px"
 });
@@ -142,10 +140,10 @@ var StyledTextField = (0, _styles.styled)(_material.TextField)({
   "& .MuiOutlinedInput-root": {
     paddingTop: 8,
     paddingBottom: 8,
-    minHeight: 48, // Ensure consistent height
-    alignItems: "center", // Center align for better appearance
-    display: "flex", // Ensure flex display
-    flexWrap: "wrap", // Allow wrapping when needed
+    minHeight: 48,
+    alignItems: "center",
+    display: "flex",
+    flexWrap: "wrap",
     "& .MuiChip-root": {
       marginTop: 2,
       marginBottom: 2
@@ -153,19 +151,19 @@ var StyledTextField = (0, _styles.styled)(_material.TextField)({
     "& .MuiInputBase-input": {
       paddingTop: 6,
       paddingBottom: 6,
-      flex: "1 1 120px", // Allow input to take remaining space with minimum width
-      minWidth: "120px", // Ensure minimum input width
+      flex: "1 1 120px",
+      minWidth: "120px",
       fontFamily: "Mulish",
       fontWeight: 400,
       letterSpacing: "0.15px",
       fontSize: "16px",
       lineHeight: "12px",
-      boxSizing: "border-box", // Ensure consistent box model
-      color: "#003B5C", // Set visible text color for user input
+      boxSizing: "border-box",
+      color: "#003B5C",
       "&::placeholder": {
         color: "#003B5CBF",
-        opacity: 1, // Keep placeholder visible
-        display: "block" // Ensure placeholder is always displayed
+        opacity: 1,
+        display: "block"
       }
     }
   },
@@ -191,10 +189,10 @@ var StyledClearButton = (0, _styles.styled)(_material.IconButton)({
   }
 });
 
-/**
- * MultiTypeaheadField - A custom multi-select dropdown component with search capability.
- * Supports both static options and URL-based options with search functionality.
- * Compatible with react-jsonschema-form and MUI v5
+/**
+ * MultiTypeaheadField - A custom multi-select dropdown component with search capability.
+ * Supports both static options and URL-based options with search functionality.
+ * Compatible with react-jsonschema-form and MUI v5
  */
 function MultiTypeaheadField(props) {
   var _useState = (0, _react.useState)(""),
@@ -217,6 +215,11 @@ function MultiTypeaheadField(props) {
       isOpen = _useState8[0],
       setIsOpen = _useState8[1];
 
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      isTyping = _useState10[0],
+      setIsTyping = _useState10[1];
+
   var containerRef = (0, _react.useRef)(null);
   var inputRef = (0, _react.useRef)(null);
 
@@ -234,7 +237,7 @@ function MultiTypeaheadField(props) {
       queryKey = _multiTypeaheadConfig === undefined ? "query" : _multiTypeaheadConfig,
       optionsPath = multiTypeaheadConfig.optionsPath;
 
-  // Debounced fetch function
+  // Fetch options (debounced)
 
   var fetchOptions = (0, _react.useCallback)(function (query) {
     if (!url || !query.trim()) {
@@ -244,28 +247,47 @@ function MultiTypeaheadField(props) {
 
     setLoading(true);
 
-    // Use custom search function if provided, otherwise use defaultSearch
+    // Use custom search function if provided
     var searchFn = typeof customSearch === "function" ? customSearch : defaultSearch;
 
     searchFn(url, query, queryKey).then(function (data) {
-      // Extract options from response using optionsPath if provided
+      // Extract options from response
       var newOptions = void 0;
       if (optionsPath && typeof optionsPath === "string") {
         newOptions = (0, _selectn2.default)(optionsPath, data);
         newOptions = Array.isArray(newOptions) ? newOptions : [];
       } else {
-        // Always expect data to be an array if no optionsPath specified
+        // Expect data to be an array if no optionsPath specified
         newOptions = Array.isArray(data) ? data : [];
       }
 
-      setOptions(newOptions);
+      // Transform options using valueKeys
+      var valueKeys = multiTypeaheadConfig.valueKeys || ["value"];
+      var transformedOptions = newOptions.map(function (option) {
+        if (typeof option === "string") {
+          return option;
+        }
+        // Always create an object with specified valueKeys
+        var valueObj = {};
+        valueKeys.forEach(function (key) {
+          var value = (0, _selectn2.default)(key, option);
+          if (value !== undefined) {
+            // Use the last part of the key chain instead of the full key
+            var lastKeyPart = key.split(".").pop();
+            valueObj[lastKeyPart] = value;
+          }
+        });
+        return valueObj;
+      });
+
+      setOptions(transformedOptions);
     }).catch(function (error) {
       console.error("Error fetching options:", error);
       setOptions([]);
     }).finally(function () {
       setLoading(false);
     });
-  }, [url, customSearch, queryKey, optionsPath]);
+  }, [url, customSearch, queryKey, optionsPath, multiTypeaheadConfig.valueKeys]);
 
   // Debounce the fetch with useEffect
   (0, _react.useEffect)(function () {
@@ -273,9 +295,19 @@ function MultiTypeaheadField(props) {
       return;
     }
 
+    // When inputValue changes, user is typing
+    if (inputValue.trim()) {
+      setIsTyping(true);
+      setLoading(false);
+    }
+
     var timeoutId = setTimeout(function () {
-      fetchOptions(inputValue);
-    }, 300);
+      if (inputValue.trim()) {
+        setIsTyping(false);
+        setLoading(true);
+        fetchOptions(inputValue);
+      }
+    }, 600);
 
     return function () {
       return clearTimeout(timeoutId);
@@ -285,85 +317,66 @@ function MultiTypeaheadField(props) {
   // Initialize options for static data
   (0, _react.useEffect)(function () {
     if (staticOptions) {
-      setOptions(staticOptions);
+      // Transform static options using valueKeys immediately
+      var valueKeys = multiTypeaheadConfig.valueKeys || ["value"];
+      var transformedOptions = staticOptions.map(function (option) {
+        if (typeof option === "string") {
+          return option;
+        }
+        // Always create an object with specified valueKeys
+        var valueObj = {};
+        valueKeys.forEach(function (key) {
+          var value = (0, _selectn2.default)(key, option);
+          if (value !== undefined) {
+            // Use the last part of the key chain instead of the full key
+            var lastKeyPart = key.split(".").pop();
+            valueObj[lastKeyPart] = value;
+          }
+        });
+        return valueObj;
+      });
+      setOptions(transformedOptions);
     } else if (url) {
       setOptions([]);
     }
-  }, [staticOptions, url]);
+  }, [staticOptions, url, multiTypeaheadConfig.valueKeys]);
 
-  var getOptionLabel = (0, _react.useCallback)(function (option) {
-    var labelTemplate = multiTypeaheadConfig.labelTemplate;
-
-    if (typeof option === "string") {
-      return option;
-    }
-
-    // Always use labelTemplate if provided
-    if (labelTemplate && typeof labelTemplate === "string") {
-      return labelTemplate.replace(/\{([^}]+)\}/g, function (match, path) {
-        var value = (0, _selectn2.default)(path, option);
-        return value != null ? String(value) : "";
-      });
+  // Common template rendering logic
+  var renderTemplate = (0, _react.useCallback)(function (template, obj) {
+    if (!template || typeof template !== "string") {
+      return "";
     }
+    return template.replace(/\{([^}]+)\}/g, function (match, path) {
+      var value = (0, _selectn2.default)(path, obj);
+      return value != null ? String(value) : "";
+    });
+  }, []);
 
-    // Fallback to common label fields
-    return option.label || option.name || option.title || String(option);
-  }, [multiTypeaheadConfig.labelTemplate]);
-
-  var getOptionValue = (0, _react.useCallback)(function (option) {
-    var valueKeys = multiTypeaheadConfig.valueKeys || ["value"];
-
+  // Dropdown label rendering (options are already transformed)
+  var getOptionLabel = (0, _react.useCallback)(function (option) {
     if (typeof option === "string") {
       return option;
     }
 
-    // Always create an object with specified valueKeys
-    var valueObj = {};
-    valueKeys.forEach(function (key) {
-      var value = (0, _selectn2.default)(key, option);
-      if (value !== undefined) {
-        // Use the last part of the key chain instead of the full key
-        var lastKeyPart = key.split(".").pop();
-        valueObj[lastKeyPart] = value;
-      }
-    });
-    return valueObj;
-  }, [multiTypeaheadConfig.valueKeys]);
+    var template = multiTypeaheadConfig.labelTemplate;
+    if (template) {
+      return renderTemplate(template, option);
+    }
+    return "";
+  }, [multiTypeaheadConfig.labelTemplate, renderTemplate]);
 
   var getSelectedOptions = (0, _react.useCallback)(function () {
     var selectedOptions = [];
 
     formData.forEach(function (value) {
-      var option = options.find(function (opt) {
-        var optValue = getOptionValue(opt);
-
-        // Handle object comparison for complex values
-        if ((typeof value === "undefined" ? "undefined" : _typeof(value)) === "object" && (typeof optValue === "undefined" ? "undefined" : _typeof(optValue)) === "object") {
-          return JSON.stringify(optValue) === JSON.stringify(value);
-        }
-
-        // Otherwise do string comparison
-        return String(optValue) === String(value);
-      });
-
-      if (option) {
-        selectedOptions.push(option);
-      } else {
-        // If option not found in current options, create a representation
-        // This ensures selected values persist even when not in current search results
-        if ((typeof value === "undefined" ? "undefined" : _typeof(value)) === "object") {
-          // For object values, create a representation that can be displayed
-          var _label = getOptionLabel(value);
-          selectedOptions.push(_extends({}, value, { _displayLabel: _label }));
-        } else {
-          // For string values, create a simple option object
-          selectedOptions.push({ label: String(value), value: value });
-        }
-      }
+      // For existing formData values, we don't need to find them in current options
+      // since they may not be present in current search results
+      // Just use the formData value directly for chip display
+      selectedOptions.push(value);
     });
 
     return selectedOptions;
-  }, [formData, options, getOptionValue, getOptionLabel]);
+  }, [formData]);
 
   var handleInputChange = (0, _react.useCallback)(function (event) {
     var newValue = event.target.value;
@@ -380,12 +393,11 @@ function MultiTypeaheadField(props) {
   }, []);
 
   var handleOptionClick = (0, _react.useCallback)(function (option) {
-    var selectedOptions = getSelectedOptions();
-    var optionValue = getOptionValue(option);
+    // Option is already transformed, use it directly
+    var optionValue = option;
 
-    // Check if already selected
-    var isSelected = selectedOptions.some(function (selected) {
-      var selectedValue = getOptionValue(selected);
+    // Check if already selected by comparing with formData directly
+    var isSelected = formData.some(function (selectedValue) {
       if ((typeof optionValue === "undefined" ? "undefined" : _typeof(optionValue)) === "object" && (typeof selectedValue === "undefined" ? "undefined" : _typeof(selectedValue)) === "object") {
         return JSON.stringify(optionValue) === JSON.stringify(selectedValue);
       }
@@ -400,7 +412,7 @@ function MultiTypeaheadField(props) {
     // Clear input and close dropdown
     setInputValue("");
     setIsOpen(false);
-  }, [getSelectedOptions, getOptionValue, formData, onChange]);
+  }, [formData, onChange]);
 
   var handleChipDelete = (0, _react.useCallback)(function (indexToDelete) {
     var newValues = formData.filter(function (_, index) {
@@ -440,9 +452,9 @@ function MultiTypeaheadField(props) {
 
   // Remove already selected options from dropdown
   filteredOptions = filteredOptions.filter(function (option) {
-    var optionValue = getOptionValue(option);
-    return !selectedOptions.some(function (selected) {
-      var selectedValue = getOptionValue(selected);
+    // Option is already transformed, use it directly
+    var optionValue = option;
+    return !formData.some(function (selectedValue) {
       if ((typeof optionValue === "undefined" ? "undefined" : _typeof(optionValue)) === "object" && (typeof selectedValue === "undefined" ? "undefined" : _typeof(selectedValue)) === "object") {
         return JSON.stringify(optionValue) === JSON.stringify(selectedValue);
       }
@@ -453,6 +465,10 @@ function MultiTypeaheadField(props) {
   var label = multiTypeaheadConfig.label;
   var placeholder = multiTypeaheadConfig.placeholder || "Select...";
 
+  // Show dropdown only if input is not empty or there are options
+  // Show dropdown only after typing is finished
+  var shouldShowDropdown = isOpen && !isTyping && inputValue.trim();
+
   return _react2.default.createElement(
     _material.ClickAwayListener,
     { onClickAway: handleClickAway },
@@ -474,9 +490,8 @@ function MultiTypeaheadField(props) {
             StyledChipContainer,
             null,
             selectedOptions.map(function (option, index) {
-              // Create a stable key based on the option content
-              var optionValue = getOptionValue(option);
-              var stableKey = (typeof optionValue === "undefined" ? "undefined" : _typeof(optionValue)) === "object" ? JSON.stringify(optionValue) : String(optionValue);
+              // Option is already in transformed format
+              var stableKey = (typeof option === "undefined" ? "undefined" : _typeof(option)) === "object" ? JSON.stringify(option) : String(option);
 
               return _react2.default.createElement(StyledChip, {
                 key: stableKey,
@@ -511,10 +526,10 @@ function MultiTypeaheadField(props) {
           )
         }
       }),
-      isOpen && (filteredOptions.length > 0 || loading && inputValue.trim()) ? _react2.default.createElement(
+      shouldShowDropdown && _react2.default.createElement(
         StyledDropdown,
         null,
-        loading && inputValue.trim() ? _react2.default.createElement(
+        loading ? _react2.default.createElement(
           StyledLoadingContainer,
           null,
           _react2.default.createElement(_material.CircularProgress, { size: 20 }),
@@ -523,7 +538,11 @@ function MultiTypeaheadField(props) {
             { style: { marginLeft: "8px" } },
             "Loading..."
           )
-        ) : filteredOptions.length > 0 ? filteredOptions.map(function (option, index) {
+        ) : filteredOptions.length === 0 ? _react2.default.createElement(
+          StyledNoOptionsContainer,
+          null,
+          "No options available"
+        ) : filteredOptions.map(function (option, index) {
           return _react2.default.createElement(
             StyledOptionItem,
             {
@@ -534,12 +553,8 @@ function MultiTypeaheadField(props) {
             },
             getOptionLabel(option)
           );
-        }) : _react2.default.createElement(
-          StyledNoOptionsContainer,
-          null,
-          "No options available"
-        )
-      ) : null
+        })
+      )
     )
   );
 }

package/lib/TypeaheadField.js

@@ -154,11 +154,11 @@ function mapFromObject(data, mapping, defVal) {
     return agg;
   }, defVal);
 }
-/**
- *
- * @param {*} data
- * @param {*} mapping
- * Mapped object is converted to the object mapping takes
+/**
+ *
+ * @param {*} data
+ * @param {*} mapping
+ * Mapped object is converted to the object mapping takes
  */
 function mapFromSchema(data, mapping) {
   if (isEmpty(data)) {
@@ -223,9 +223,9 @@ function isFunction(functionToCheck) {
   return functionToCheck instanceof Function;
 }
 
-/*
- this is done to prevent an edge case with a typeahead wrapped inside a table that has an item selected & uses a function as a labelKey
- TODO: Need to find a better solution for this
+/*
+ this is done to prevent an edge case with a typeahead wrapped inside a table that has an item selected & uses a function as a labelKey
+ TODO: Need to find a better solution for this
  */
 function transformLabelKey(labelKey, schema, selected) {
   if (isFunction(labelKey) && selected && selected.length > 0 && schema.type === "string" && selected.every(function (x) {

package/lib/css/form-extras.css

@@ -1,10 +1,10 @@
-/*Collapsible header items*/
-.header-elements-wrapper {
-    align-items: center;
-    color: #fff;
-    display: inline-flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    padding-left: 20px;
-    white-space: nowrap;
+/*Collapsible header items*/
+.header-elements-wrapper {
+    align-items: center;
+    color: #fff;
+    display: inline-flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    padding-left: 20px;
+    white-space: nowrap;
   }