@dartech/arsenal-ui 1.4.74 → 1.4.76

package/index.js

@@ -1,5 +1,13 @@
 import { createTheme, responsiveFontSizes, styled, ThemeProvider } from '@mui/material/styles';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { __rest, __awaiter } from 'tslib';
+import TextField from '@mui/material/TextField';
+import MenuItem from '@mui/material/MenuItem';
+import React, { useRef, useEffect, useState, useCallback, useMemo, createElement, forwardRef, createContext, useContext, memo, useImperativeHandle, Suspense } from 'react';
+import { useController, useWatch, useFormContext, Controller, useFieldArray, useForm } from 'react-hook-form';
+import SvgIcon from '@mui/material/SvgIcon';
+import IconButton from '@mui/material/IconButton';
+import InputAdornment from '@mui/material/InputAdornment';
 import Button from '@mui/material/Button';
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
@@ -8,15 +16,7 @@ import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
-import IconButton from '@mui/material/IconButton';
-import SvgIcon from '@mui/material/SvgIcon';
 import CircularProgress from '@mui/material/CircularProgress';
-import { __rest, __awaiter } from 'tslib';
-import { useController, useWatch, useFormContext, Controller, useFieldArray, useForm } from 'react-hook-form';
-import TextField from '@mui/material/TextField';
-import React, { useRef, useEffect, useState, useCallback, useMemo, createElement, forwardRef, createContext, useContext, memo, useImperativeHandle, Suspense } from 'react';
-import MenuItem from '@mui/material/MenuItem';
-import InputAdornment from '@mui/material/InputAdornment';
 import FormControl from '@mui/material/FormControl';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import FormHelperText from '@mui/material/FormHelperText';
@@ -456,17 +456,13 @@ const ControlDebouncedInput = _a => {
   }));
 };
 
-const PopupIconComponent$2 = () => {
-  return jsx(SvgIcon, Object.assign({
-    sx: {
-      mr: 2
-    }
-  }, {
+const PopupIconComponent$1 = () => {
+  return jsx(SvgIcon, {
     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
@@ -576,7 +572,6 @@ const ControlSelect = _a => {
       })) : null
     }, textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.InputProps),
     SelectProps: {
-      IconComponent: PopupIconComponent$2,
       sx: {
         '& .MuiSelect-select .notranslate::after': textFieldProps.placeholder ? {
           content: `"${textFieldProps.placeholder}"`,
@@ -790,19 +785,10 @@ const useAutocomplete = ({
 };
 var useAutocomplete$1 = useAutocomplete;
 
-var img$7 = "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$7;
-
 /**
  * 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,
@@ -879,7 +865,6 @@ 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",
@@ -913,6 +898,9 @@ const ControlAutocomplete = _a => {
   }, autocompleteProps));
 };
 
+var img$7 = "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$7;
+
 const PopupIconComponent = () => {
   return jsx("img", {
     src: PopupIcon,
@@ -979,6 +967,10 @@ function ControlQueryAutocomplete(_a) {
   const [inputValue, setInputValue] = useState('');
   const [searchValue, setSearchValue] = useState('');
   const [page, setPage] = useState(0);
+  const openPanel = useMemo(() => {
+    if (!options.length) return false;
+    return open;
+  }, [open, options]);
   const {
     data,
     isFetching
@@ -1030,6 +1022,7 @@ function ControlQueryAutocomplete(_a) {
     } else setSearchValue(val);
   }, 500);
   const handleInputChange = useCallback((_, value) => {
+    setOptions([]);
     setInputValue(value);
     debouncedChange(value);
   }, [debouncedChange]);
@@ -1058,7 +1051,7 @@ function ControlQueryAutocomplete(_a) {
     }
   }, [data, options]);
   const handleOpen = () => {
-    if (options.length) setOpen(true);
+    setOpen(true);
   };
   const handleClose = () => {
     setOpen(false);
@@ -1080,7 +1073,7 @@ function ControlQueryAutocomplete(_a) {
     onChange: handleValueChange,
     loading: isFetching,
     clearOnBlur: false,
-    open: open,
+    open: openPanel,
     filterOptions: x => x,
     onOpen: handleOpen,
     onClose: handleClose,
@@ -1597,11 +1590,26 @@ var baseTheme = createTheme(baseThemeOptions);
 
 const inputThemeOptions = {
   components: {
+    // MuiButtonBase: {
+    //   defaultProps: {
+    //     disableElevation: true
+    //   },
+    //   styleOverrides: {
+    //     root: {
+    //       '&.MuiButton-root': {
+    //         // boxShadow: 'none',
+    //         // lineHeight: 1.429    
+    //       },
+    //       '&.MuiButton-root:hover': {
+    //         // boxShadow: 'none',
+    //         backgroundColor: '#D15C3B'
+    //       }
+    //     }
+    //   }
+    // },
     MuiButton: {
-      styleOverrides: {
-        root: {
-          lineHeight: 1.429
-        }
+      defaultProps: {
+        disableElevation: true
       }
     },
     MuiInputBase: {
@@ -1610,7 +1618,8 @@ const inputThemeOptions = {
           color: '#262842',
           borderRadius: baseTheme.spacing(3),
           minWidth: baseTheme.spacing(25),
-          background: baseTheme.palette.background.default
+          background: baseTheme.palette.background.default,
+          paddingRight: baseTheme.spacing(3)
           // height: 40
         },
 
@@ -1626,6 +1635,9 @@ const inputThemeOptions = {
     },
 
     MuiSelect: {
+      defaultProps: {
+        IconComponent: PopupIconComponent$1
+      },
       styleOverrides: {
         nativeInput: {
           padding: 0,
@@ -1670,7 +1682,15 @@ const inputThemeOptions = {
       }
     },
     MuiAutocomplete: {
+      defaultProps: {
+        popupIcon: jsx(PopupIconComponent$1, {})
+      },
       styleOverrides: {
+        root: {
+          '& .MuiOutlinedInput-root .MuiAutocomplete-endAdornment': {
+            right: 12
+          }
+        },
         paper: {
           marginTop: 8,
           borderRadius: 12,
@@ -3642,24 +3662,26 @@ const SortDescIconComponent$1 = () => {
     alt: ""
   });
 };
-const Table = ({
-  columns,
-  rows,
-  rowCount,
-  loading,
-  disableMargin,
-  mode: _mode = 'server',
-  initialPageSize: _initialPageSize = 10,
-  pagination: _pagination = true,
-  onCellClick
-}) => {
+const Table = _a => {
+  var {
+      columns,
+      rows,
+      rowCount,
+      loading,
+      disableMargin,
+      mode = 'server',
+      initialPageSize = 10,
+      pagination = true,
+      onCellClick
+    } = _a,
+    dataGridProps = __rest(_a, ["columns", "rows", "rowCount", "loading", "disableMargin", "mode", "initialPageSize", "pagination", "onCellClick"]);
   const {
     page,
     size,
     onPageChange,
     onSizeChange
   } = useTableQueryPagination$1({
-    mode: _mode
+    mode
   });
   const {
     onColumnHeaderClick,
@@ -3668,12 +3690,12 @@ const Table = ({
   const {
     pageSize,
     handlePageSizeChange
-  } = usePagination$1(_initialPageSize);
+  } = usePagination$1(initialPageSize);
   const tableProps = {
-    sortingMode: _mode,
-    paginationMode: _mode,
-    pageSize: _mode === 'server' ? size : _pagination ? pageSize : rowCount,
-    onPageSizeChange: _mode === 'server' ? onSizeChange : handlePageSizeChange,
+    sortingMode: mode,
+    paginationMode: mode,
+    pageSize: mode === 'server' ? size : pagination ? pageSize : rowCount,
+    onPageSizeChange: mode === 'server' ? onSizeChange : handlePageSizeChange,
     components: {
       BaseTooltip: Tooltip,
       Pagination: TablePagination$1,
@@ -3691,7 +3713,7 @@ const Table = ({
       }
     }
   };
-  if (_mode === 'server') {
+  if (mode === 'server') {
     // tableProps['sortModel'] = [];
     tableProps['onColumnHeaderClick'] = onColumnHeaderClick;
     tableProps['page'] = page;
@@ -3703,8 +3725,8 @@ const Table = ({
   }, {
     children: jsx(StyledDataGrid, Object.assign({
       autoHeight: true,
-      hideFooterPagination: !_pagination,
-      hideFooter: !_pagination,
+      hideFooterPagination: !pagination,
+      hideFooter: !pagination,
       disableSelectionOnClick: true,
       showColumnRightBorder: true,
       showCellRightBorder: true,
@@ -3715,7 +3737,7 @@ const Table = ({
       rowCount: rowCount,
       rowsPerPageOptions: [10, 20, 50, 100],
       onCellClick: onCellClick
-    }, tableProps))
+    }, tableProps, dataGridProps))
   }));
 };
 
@@ -8374,4 +8396,4 @@ const OverflowTip = ({
   }));
 };
 
-export { AlertDialog, BackButton, Breadcrumbs, ContentLayout, ControlAceEditor, ControlArrayInput, ControlAutocomplete, ControlCheckbox, ControlDate, ControlDateTime, ControlDebouncedInput, ControlInput, ControlNumberInput, ControlPeriodInput, ControlPhoneInput, ControlQueryAutocomplete, ControlRadio, ControlSelect, ControlSwitch, ControlTime, CopyButton, CreateDefinition, CreatePropertiesList, CreatePropertiesListContext, CreatePropertyFormFields, DATE_DEFAULT_FORMAT, DATE_TIME_DEFAULT_FORMAT, DEFAULT_DATE_VALIDATION_ERROR_TEXT, DEFAULT_ERROR_TEXT, DEFAULT_REQUIRED_ERROR_TEXT, DefinitionFiller, DefinitionValueView, InfoItem, JsonModalView, JsonPathPicker, JsonView, Loader, MenuIcon, MultiplePropertyFiller, OverflowTip, PropertyFiller, PropertyType, PropertyValueField, RoundingMode, RouteTabs, Sidebar, SimpleTable, Status, StepperView, TIME_DEFAULT_FORMAT, TabPanel, Table, TableAction, TableActionCell, ViewPropertiesList, ViewProperty, capitalize, deepParseJson, defaultDefinitionArrayValue, defaultDefinitionObjectValue, digitsOnly, floatsOnly, formatDefinitionData, formatTableRowValue, getDemPropertyDateFormat, getEntityStarterValue, getJsonStringValue, getMultiplePropertyFillOptions, getSinglePropertyFillOptions, isDateType, isExpression, isPropertyValueEmpty, numberFormat, propertiesArrayToObject, propertiesObjectToArray, removeArrayItem, safeParseJson, sortArrayOfObjects, theme, useDebounce, useToggle, validateJson };
+export { AlertDialog, BackButton, Breadcrumbs, ContentLayout, ControlAceEditor, ControlArrayInput, ControlAutocomplete, ControlCheckbox, ControlDate, ControlDateTime, ControlDebouncedInput, ControlInput, ControlNumberInput, ControlPeriodInput, ControlPhoneInput, ControlQueryAutocomplete, ControlRadio, ControlSelect, ControlSwitch, ControlTime, CopyButton, CreateDefinition, CreatePropertiesList, CreatePropertiesListContext, CreatePropertyFormFields, DATE_DEFAULT_FORMAT, DATE_TIME_DEFAULT_FORMAT, DEFAULT_DATE_VALIDATION_ERROR_TEXT, DEFAULT_ERROR_TEXT, DEFAULT_REQUIRED_ERROR_TEXT, DefinitionFiller, DefinitionValueView, InfoItem, JsonModalView, JsonPathPicker, JsonView, Loader, MenuIcon, MultiplePropertyFiller, OverflowTip, PopupIconComponent$1 as PopupIconComponent, PropertyFiller, PropertyType, PropertyValueField, RoundingMode, RouteTabs, Sidebar, SimpleTable, Status, StepperView, TIME_DEFAULT_FORMAT, TabPanel, Table, TableAction, TableActionCell, ViewPropertiesList, ViewProperty, capitalize, deepParseJson, defaultDefinitionArrayValue, defaultDefinitionObjectValue, digitsOnly, floatsOnly, formatDefinitionData, formatTableRowValue, getDemPropertyDateFormat, getEntityStarterValue, getJsonStringValue, getMultiplePropertyFillOptions, getSinglePropertyFillOptions, isDateType, isExpression, isPropertyValueEmpty, numberFormat, propertiesArrayToObject, propertiesObjectToArray, removeArrayItem, safeParseJson, sortArrayOfObjects, theme, useDebounce, useToggle, validateJson };

package/package.json

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

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

@@ -66,5 +66,9 @@ export type ControlAutocompleteProps = Omit<AutocompleteProps<unknown, boolean,
     startAdornment?: InputProps['startAdornment'];
     endAdornment?: InputProps['endAdornment'];
 };
+/**
+ * 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, startAdornment, endAdornment, ...autocompleteProps }: ControlAutocompleteProps) => JSX.Element;
 export default ControlAutocomplete;

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

@@ -63,6 +63,7 @@ export type ControlSelectProps = TextFieldProps & {
      */
     requiredErrorText?: string;
 };
+export declare const PopupIconComponent: () => JSX.Element;
 /**
  * Material UI `Select` controlled component. Used with react-hook-form
  * @category Forms

package/src/lib/Property/UpsertProperty/PropertyValueField/BooleanValueField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Control } from 'react-hook-form';
 type Props = {
     control: Control<any>;

package/src/lib/Property/UpsertProperty/PropertyValueField/DateTimeValueField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props = {
     name: string;
     label?: string;

package/src/lib/Property/UpsertProperty/PropertyValueField/DateValueField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props = {
     name: string;
     format: string;

package/src/lib/Property/UpsertProperty/PropertyValueField/JsonValueField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props = {
     name: string;
     label?: string;

package/src/lib/Property/UpsertProperty/PropertyValueField/TimeValueField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props = {
     name: string;
     label?: string;

package/src/lib/Property/ViewProperty/PropertyItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PropertyUnion } from '../../../interfaces';
 type PropertyItemProps = {
     property: PropertyUnion;

package/src/lib/Table/DataGrid/Table.d.ts

@@ -1,5 +1,5 @@
 import React, { Ref } from 'react';
-import { GridCellParams, GridColumns, GridFeatureMode, GridRowsProp } from '@mui/x-data-grid';
+import { GridCellParams, GridColumns, GridFeatureMode, GridRowsProp, GridRowParams, GridCallbackDetails } from '@mui/x-data-grid';
 /**
  * This interface is referencing the [[Table]] component props.
  * @category Common UI components
@@ -38,9 +38,10 @@ export interface TableProps {
      * (params: GridCellParams, event: React.MouseEvent) => void;
      * ```
      */
-    onCellClick?: (params: GridCellParams, event: React.MouseEvent) => void;
+    onCellClick?: (params: GridCellParams, event: React.MouseEvent, details: GridCallbackDetails) => void;
+    onRowClick?: (params: GridRowParams, event: React.MouseEvent, details: GridCallbackDetails) => void;
     pagination?: boolean;
     refProp?: Ref<unknown>;
 }
-export declare const Table: ({ columns, rows, rowCount, loading, disableMargin, mode, initialPageSize, pagination, onCellClick, }: TableProps) => JSX.Element;
+export declare const Table: ({ columns, rows, rowCount, loading, disableMargin, mode, initialPageSize, pagination, onCellClick, ...dataGridProps }: TableProps) => JSX.Element;
 export default Table;

package/src/theme/inputThemeOptions.d.ts

@@ -1,10 +1,9 @@
+/// <reference types="react" />
 declare const inputThemeOptions: {
     components: {
         MuiButton: {
-            styleOverrides: {
-                root: {
-                    lineHeight: number;
-                };
+            defaultProps: {
+                disableElevation: boolean;
             };
         };
         MuiInputBase: {
@@ -14,6 +13,7 @@ declare const inputThemeOptions: {
                     borderRadius: string;
                     minWidth: string;
                     background: string;
+                    paddingRight: string;
                 };
                 input: {
                     minWidth: string;
@@ -21,6 +21,9 @@ declare const inputThemeOptions: {
             };
         };
         MuiSelect: {
+            defaultProps: {
+                IconComponent: () => JSX.Element;
+            };
             styleOverrides: {
                 nativeInput: {
                     padding: number;
@@ -65,7 +68,15 @@ declare const inputThemeOptions: {
             };
         };
         MuiAutocomplete: {
+            defaultProps: {
+                popupIcon: JSX.Element;
+            };
             styleOverrides: {
+                root: {
+                    '& .MuiOutlinedInput-root .MuiAutocomplete-endAdornment': {
+                        right: number;
+                    };
+                };
                 paper: {
                     marginTop: number;
                     borderRadius: number;