grep-components 2.24.0 → 2.25.0-GREPF-2906.1

package/dist/components/GrepSelect/index.d.ts

@@ -6,10 +6,15 @@ export interface SelectItem {
     disabled?: boolean;
     lang?: string;
 }
+export interface ErrorOptions {
+    text: string;
+    color?: string;
+}
 export type GrepSelectProps = SelectProps & {
     label: string;
     outlined?: boolean;
     helperText?: string;
+    errorOptions?: ErrorOptions;
     errorMessage?: string;
     selectItems: SelectItem[];
     unselectOption?: boolean;

package/dist/components/GrepTable/index.d.ts

@@ -3,6 +3,7 @@ import { TableProps } from '@mui/material/Table';
 import { TableCellProps } from '@mui/material/TableCell';
 import GrepTableRow from './components/grep-table-row';
 import { DropdownMenuItem } from '../DropdownMenu';
+import { SxProps, Theme } from '@mui/material/styles';
 export interface TableColumn<T> extends Pick<TableCellProps, 'padding' | 'sx'> {
     label?: string | JSX.Element;
     width?: number | string;
@@ -44,6 +45,7 @@ export interface GrepTableProps<T> extends Pick<TableProps, 'size' | 'stickyHead
      * @deprecated No longer in use.
      */
     rowHeight?: number;
+    tableHeaderSx?: SxProps<Theme>;
     rowStyle?: React.CSSProperties | ((data: T, index: number) => React.CSSProperties);
     disableSelectOnClick?: boolean;
     underlineOnFocus?: boolean;
@@ -58,7 +60,7 @@ export declare const useStyles: (params: StyleProps, muiStyleOverridesParams?: {
     ownerState?: Record<string, unknown> | undefined;
 } | undefined) => {
     classes: Record<"body" | "header" | "table", string>;
-    theme: import("@mui/material").Theme;
+    theme: Theme;
     css: import("tss-react").Css;
     cx: import("tss-react").Cx;
 };
@@ -69,6 +71,6 @@ export declare const useStyles: (params: StyleProps, muiStyleOverridesParams?: {
  * @todo enhance page handling
  *
  */
-export declare const GrepTable: <T>({ placeholderText, dropdownItems, isRowDisabled, pagination, outlined, columns, header, data, onSelectedRowChange, sortBy, sortDirection, onSortBy, onRowClick, size, caption, stickyHeader, padding, disableSelectOnClick, menuButtonLabel, underlineOnFocus, rowTabIndex, rowStyle, rowsPerPageOptions, ...props }: GrepTableProps<T>) => JSX.Element;
+export declare const GrepTable: <T>({ placeholderText, dropdownItems, isRowDisabled, pagination, outlined, columns, header, data, onSelectedRowChange, sortBy, sortDirection, onSortBy, onRowClick, size, caption, stickyHeader, padding, disableSelectOnClick, menuButtonLabel, underlineOnFocus, rowTabIndex, tableHeaderSx, rowStyle, rowsPerPageOptions, ...props }: GrepTableProps<T>) => JSX.Element;
 export { GrepTableRow };
 export default GrepTable;

package/dist/index.js

@@ -2152,7 +2152,7 @@ const getElementIndex = (el) => Number(el.getAttribute('data-index') || -1);
  * @todo enhance page handling
  *
  */
-const GrepTable = ({ placeholderText, dropdownItems, isRowDisabled, pagination, outlined, columns, header, data, onSelectedRowChange, sortBy, sortDirection, onSortBy, onRowClick, size, caption, stickyHeader, padding, disableSelectOnClick = false, menuButtonLabel, underlineOnFocus, rowTabIndex, rowStyle, rowsPerPageOptions = [5, 10, 25, 50], ...props }) => {
+const GrepTable = ({ placeholderText, dropdownItems, isRowDisabled, pagination, outlined, columns, header, data, onSelectedRowChange, sortBy, sortDirection, onSortBy, onRowClick, size, caption, stickyHeader, padding, disableSelectOnClick = false, menuButtonLabel, underlineOnFocus, rowTabIndex, tableHeaderSx, rowStyle, rowsPerPageOptions = [5, 10, 25, 50], ...props }) => {
     const [rowsPerPage, setRowsPerPage] = React__default.useState(props.rowsPerPage || 10);
     const [menuAnchor, setMenuAnchor] = React__default.useState(null);
     const [currentPage, _setCurrentPage] = React__default.useState(0);
@@ -2336,7 +2336,7 @@ const GrepTable = ({ placeholderText, dropdownItems, isRowDisabled, pagination,
     return (React__default.createElement(TableContainer, { sx: props.style },
         React__default.createElement(Table, { className: classes.table, size: size, stickyHeader: stickyHeader, padding: padding },
             caption && React__default.createElement("caption", null, caption),
-            React__default.createElement(TableHeader, { className: classes.header, columns: columns, sortBy: sortBy, sortDirection: sortDirection, onSortBy: onSortBy, dropdownItems: dropdownItems }),
+            React__default.createElement(TableHeader, { className: classes.header, columns: columns, sortBy: sortBy, sortDirection: sortDirection, onSortBy: onSortBy, dropdownItems: dropdownItems, sx: tableHeaderSx }),
             React__default.createElement(TableBody, { ref: tableRef, className: classes.body, onKeyDown: onKey }, data.length ? (rows.map(_renderRow)) : (React__default.createElement(GrepTablePlaceholder, { padding: padding, columns: columns, text: placeholderText }))),
             React__default.createElement(TableFooter, null, pagination && (React__default.createElement(TableRow, null,
                 React__default.createElement(GrepTablePagination, { page: currentPage, count: data.length, rowsPerPage: rowsPerPage, onPageChange: _handlePageChange, rowsPerPageOptions: rowsPerPageOptions, onRowsPerPageChange: _handleChangeRowsPerPage, labelRowsPerPage: '', labelDisplayedRows: ({ from, to, count }) => `Viser ${from}-${to} av ${count}` }))))),
@@ -2613,10 +2613,36 @@ const GrepSelect = (props) => {
     React.useEffect(() => {
         setLabelWidth(inputLabel.current.offsetWidth);
     }, []);
-    const { unselectOption = true, errorMessage, selectItems, helperText, fullWidth, outlined, disabled, required, label, labelProps, inputProps, value, size, id, useCheckedSelect, ...rest } = props;
-    const error = errorMessage ? errorMessage.length > 0 : false;
+    const { unselectOption = true, errorOptions, selectItems, helperText, fullWidth, outlined, disabled, required, label, labelProps, inputProps, value, size, id, useCheckedSelect, ...rest } = props;
+    const error = errorOptions?.text ? errorOptions?.text.length > 0 : false;
     const selected = value;
-    return (React.createElement(FormControl, { variant: outlined ? 'outlined' : 'standard', className: props.className, fullWidth: fullWidth, required: required, style: props.style, error: error, size: size, disabled: disabled },
+    const errorColor = errorOptions?.color
+        ? {
+            '& .MuiFormLabel-root.Mui-error': {
+                color: errorOptions?.color,
+            },
+            '& .MuiInputBase-root.Mui-error': {
+                ':after': {
+                    borderBottomColor: errorOptions?.color,
+                },
+                ':before': {
+                    borderBottomColor: errorOptions?.color,
+                },
+            },
+            '& .MuiFormHelperText-root.Mui-error': {
+                color: errorOptions?.color,
+            },
+            '& .MuiFormLabel-asterisk.Mui-error': {
+                color: errorOptions?.color,
+            },
+            '& .MuiOutlinedInput-root.Mui-error': {
+                '& fieldset': {
+                    borderColor: errorOptions?.color,
+                },
+            },
+        }
+        : null;
+    return (React.createElement(FormControl, { variant: outlined ? 'outlined' : 'standard', className: props.className, fullWidth: fullWidth, required: required, style: props.style, error: error, size: size, disabled: disabled, sx: errorColor },
         React.createElement(InputLabel, { htmlFor: id, ref: inputLabel, style: {
                 minWidth: 'max-content',
                 overflow: 'visible',
@@ -2639,7 +2665,7 @@ const GrepSelect = (props) => {
             selectItems.map(({ label, value, disabled, lang }, i) => (React.createElement(MenuItem$1, { key: i, value: value, disabled: disabled, lang: lang },
                 useCheckedSelect && (React.createElement(Checkbox, { checked: selected?.indexOf(value) > -1 })),
                 React.createElement(ListItemText, { sx: { margin: '0px', span: { lineHeight: '1.4375em' } }, primary: label ? label : value }))))),
-        React.createElement(FormHelperText, null, errorMessage || helperText)));
+        React.createElement(FormHelperText, null, errorOptions?.text || helperText)));
 };
 
 const defaultOptions$2 = {