@dartech/arsenal-ui 1.4.26 → 1.4.28

package/index.js

@@ -415,6 +415,18 @@ const ControlDebouncedInput = _a => {
   }));
 };
 
+const PopupIconComponent$2 = () => {
+  return jsx(SvgIcon, Object.assign({
+    sx: {
+      mr: 2
+    }
+  }, {
+    children: jsx("path", {
+      d: "M4.22032 8.46991C4.36094 8.32946 4.55157 8.25057 4.75032 8.25057C4.94907 8.25057 5.13969 8.32946 5.28032 8.46991L12.0003 15.1899L18.7203 8.46991C18.789 8.39622 18.8718 8.33712 18.9638 8.29613C19.0558 8.25514 19.1551 8.23309 19.2558 8.23132C19.3565 8.22954 19.4565 8.24807 19.5499 8.28579C19.6433 8.32351 19.7281 8.37965 19.7994 8.45087C19.8706 8.52209 19.9267 8.60692 19.9644 8.70031C20.0022 8.7937 20.0207 8.89373 20.0189 8.99443C20.0171 9.09513 19.9951 9.19445 19.9541 9.28645C19.9131 9.37845 19.854 9.46125 19.7803 9.52991L12.5303 16.7799C12.3897 16.9204 12.1991 16.9992 12.0003 16.9992C11.8016 16.9992 11.6109 16.9204 11.4703 16.7799L4.22032 9.52991C4.07987 9.38928 4.00098 9.19866 4.00098 8.99991C4.00098 8.80116 4.07987 8.61054 4.22032 8.46991Z",
+      fill: "#8B8C9E"
+    })
+  }));
+};
 /**
  * Material UI `Select` controlled component. Used with react-hook-form
  * @category Forms
@@ -502,7 +514,7 @@ const ControlSelect = _a => {
       endAdornment: !required && value ? jsx(InputAdornment, Object.assign({
         position: "end",
         sx: {
-          mr: 2
+          mr: 0
         }
       }, {
         children: jsx(IconButton, Object.assign({
@@ -518,7 +530,10 @@ const ControlSelect = _a => {
           }))
         }))
       })) : null
-    }, textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.InputProps)
+    }, textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.InputProps),
+    SelectProps: {
+      IconComponent: PopupIconComponent$2
+    }
   }, {
     children: options.map((option, index) => jsx(MenuItem, Object.assign({
       value: getValue(option)
@@ -709,10 +724,19 @@ const useAutocomplete = ({
 };
 var useAutocomplete$1 = useAutocomplete;
 
+var img$4 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.22032 8.46991C4.36094 8.32946 4.55157 8.25057 4.75032 8.25057C4.94907 8.25057 5.13969 8.32946 5.28032 8.46991L12.0003 15.1899L18.7203 8.46991C18.789 8.39622 18.8718 8.33712 18.9638 8.29613C19.0558 8.25514 19.1551 8.23309 19.2558 8.23132C19.3565 8.22954 19.4565 8.24807 19.5499 8.28579C19.6433 8.32351 19.7281 8.37965 19.7994 8.45087C19.8706 8.52209 19.9267 8.60692 19.9644 8.70031C20.0022 8.7937 20.0207 8.89373 20.0189 8.99443C20.0171 9.09513 19.9951 9.19445 19.9541 9.28645C19.9131 9.37845 19.854 9.46125 19.7803 9.52991L12.5303 16.7799C12.3897 16.9204 12.1991 16.9992 12.0003 16.9992C11.8016 16.9992 11.6109 16.9204 11.4703 16.7799L4.22032 9.52991C4.07987 9.38928 4.00098 9.19866 4.00098 8.99991C4.00098 8.80116 4.07987 8.61054 4.22032 8.46991Z' fill='%238B8C9E'/%3e%3c/svg%3e";
+  var PopupIcon = img$4;
+
 /**
  * Material UI `Autocomplete` controlled component. Used with react-hook-form
  * @category Forms
  */
+const PopupIconComponent$1 = () => {
+  return jsx("img", {
+    src: PopupIcon,
+    alt: ""
+  });
+};
 const ControlAutocomplete = _a => {
   var {
       control,
@@ -769,7 +793,7 @@ const ControlAutocomplete = _a => {
     setLocalValue(value);
   };
   useEffect(() => {
-    if (typeof value === 'string' && valueKey && useStringValue && !localValue && options.length && !!options[0] && typeof options[0] === 'object') {
+    if (typeof value === 'string' && valueKey && useStringValue && localValue === undefined && options.length && !!options[0] && typeof options[0] === 'object') {
       setLocalValue(options.find(el => _get(el, valueKey) === value));
     }
   }, [localValue, options, useStringValue, value, valueKey]);
@@ -787,6 +811,7 @@ const ControlAutocomplete = _a => {
     filterSelectedOptions: multiple,
     onChange: customOnChange ? customOnChange : handleChange,
     renderOption: renderOption,
+    popupIcon: jsx(PopupIconComponent$1, {}),
     renderInput: params => {
       return jsx(TextField, Object.assign({}, params, {
         variant: "outlined",
@@ -809,6 +834,12 @@ const ControlAutocomplete = _a => {
   }, autocompleteProps));
 };
 
+const PopupIconComponent = () => {
+  return jsx("img", {
+    src: PopupIcon,
+    alt: ""
+  });
+};
 function ControlQueryAutocomplete(_a) {
   var {
       name,
@@ -954,6 +985,7 @@ function ControlQueryAutocomplete(_a) {
       onScroll: handleOnScroll
     },
     renderOption: renderOption,
+    popupIcon: jsx(PopupIconComponent, {}),
     renderInput: params => jsx(TextField, Object.assign({}, params, {
       label: required ? jsxs(Fragment, {
         children: [label, " ", jsx("span", {
@@ -2660,6 +2692,11 @@ const ControlPhoneInput = _a => {
             children: "*"
           })]
         }) : label,
+        sx: {
+          '.MuiInputLabel-root span': {
+            color: '#D6331F'
+          }
+        },
         inputMode: "numeric",
         InputProps: {
           startAdornment: jsx(InputAdornment, Object.assign({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dartech/arsenal-ui",
-  "version": "1.4.26",
+  "version": "1.4.28",
   "author": "DAR",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/lib/Forms/ControlAutocomplete/ControlAutocomplete.d.ts

@@ -63,9 +63,5 @@ export type ControlAutocompleteProps = Omit<AutocompleteProps<unknown, boolean,
     useStringValue?: boolean;
     requiredErrorText?: string;
 };
-/**
- * Material UI `Autocomplete` controlled component. Used with react-hook-form
- * @category Forms
- */
 export declare const ControlAutocomplete: ({ control, validate, name, label, required, defaultValue, disabled, hideErrorMessage, onChange: customOnChange, labelKey, valueKey, options, multiple, textFieldProps, disableCloseOnSelect, useStringValue, requiredErrorText, ...autocompleteProps }: ControlAutocompleteProps) => JSX.Element;
 export default ControlAutocomplete;