nurseitaly-components 0.0.6 → 0.0.8

package/dist/basic/Avatar/Avatar.js

@@ -16,7 +16,7 @@ export default function Avatar({ src, className, size = 'large', title, onClick,
         placeholder: usePlaceholder,
     });
     useEffect(() => {
-        !src && setUsePlaceholder(true);
+        setUsePlaceholder(!src);
     }, [src]);
     return (_jsx("div", { className: getClassNames, children: usePlaceholder ? (_jsx(Icon, { name: "account_circle", size: size, filled: true, onClick: onClick })) : (_jsx("img", { src: src, onError: () => {
                 setUsePlaceholder(true);

package/dist/basic/SelectField/SelectFieldTheme.js

@@ -39,6 +39,34 @@ export const selectFieldTheme = (outerTheme, { hasLabel = true, hasAddornments:
                 },
             },
         },
+        MuiSelect: {
+            styleOverrides: {
+                select: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    boxSizing: 'border-box',
+                    minHeight: 'unset!important',
+                    height: hasLabel ? '48px!important' : 'auto',
+                    padding: hasLabel ? '21px 0px 4px!important' : '8px 16px!important',
+                    fontSize: '16px',
+                    fontWeight: '400',
+                    lineHeight: '120%',
+                    letterSpacing: '0px',
+                    fontFamily: 'Work Sans, sans-serif',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    '&.MuiSelect-multiple': {
+                        minHeight: 'unset!important',
+                        height: hasLabel ? '48px!important' : 'auto',
+                        padding: hasLabel ? '21px 0px 4px!important' : '8px 16px!important',
+                    },
+                },
+                icon: {
+                    marginRight: hasAddorments ? '24px' : '0px',
+                },
+            },
+        },
         MuiInputLabel: {
             styleOverrides: {
                 root: {

package/dist/basic/SelectField/SelectMultipleField.d.ts

@@ -8,7 +8,7 @@ export type SelectItem = {
 type DefaultEndAdornmentType = 'close' | 'info';
 type Props<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues> = {
     attr: string;
-    label: string;
+    label?: string;
     createdForm: UseFormReturn<TFieldValues, TContext, TTransformedValues>;
     className?: string;
     disabled?: boolean;

package/dist/basic/SelectField/SelectMultipleField.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access */
-import { FormControl, InputAdornment, InputLabel, MenuItem, Select, } from '@mui/material';
+import { FilledInput, FormControl, InputAdornment, InputLabel, MenuItem, Select, } from '@mui/material';
 import { ThemeProvider, useTheme } from '@mui/material/styles';
 import cx from 'classnames';
 import { useEffect, useState } from 'react';
@@ -52,7 +52,10 @@ export default function SelectMultipleField({ className, attr, label, createdFor
         }
         return _jsx("div", { className: "ds-end-adornments", children: adornments });
     };
-    return (_jsx("div", { className: getClassNames, children: _jsx(Controller, { name: fieldName, control: createdForm.control, render: ({ field }) => (_jsxs(ThemeProvider, { theme: selectFieldTheme(outerTheme), children: [_jsxs(FormControl, { fullWidth: true, variant: "filled", disabled: disabled, children: [_jsx(InputLabel, { shrink: true, sx: {
+    return (_jsx("div", { className: getClassNames, children: _jsx(Controller, { name: fieldName, control: createdForm.control, render: ({ field }) => (_jsxs(ThemeProvider, { theme: selectFieldTheme(outerTheme, {
+                    hasLabel: !!label,
+                    hasAddornments: !!endAdornment,
+                }), children: [_jsxs(FormControl, { fullWidth: true, variant: "filled", disabled: disabled, children: [label && (_jsx(InputLabel, { htmlFor: `${attr}-select`, shrink: true, sx: {
                                     color: disabled
                                         ? '#BEBFC1'
                                         : hasError()
@@ -60,7 +63,7 @@ export default function SelectMultipleField({ className, attr, label, createdFor
                                             : active
                                                 ? '#1C83F4'
                                                 : '#000000',
-                                }, children: `${label}${required ? ' *' : ''}` }), _jsxs(Select, { ...field, value: Array.isArray(field.value) ? field.value : [], multiple: true, fullWidth: true, displayEmpty: true, required: required, disabled: disabled, variant: "filled", color: "primary", onFocus: () => setFocus(true), onBlur: () => setFocus(false), onMouseOver: () => setMouseOver(true), onMouseOut: () => setMouseOver(false), onChange: (event) => {
+                                }, children: `${label}${required ? ' *' : ''}` })), _jsxs(Select, { ...field, id: `${attr}-select`, value: Array.isArray(field.value) ? field.value : [], multiple: true, fullWidth: true, displayEmpty: true, required: required, disabled: disabled, variant: "filled", onFocus: () => setFocus(true), onBlur: () => setFocus(false), onMouseOver: () => setMouseOver(true), onMouseOut: () => setMouseOver(false), onChange: (event) => {
                                     let value = event.target.value;
                                     if (Array.isArray(value) && value.includes('')) {
                                         value = [];
@@ -81,18 +84,18 @@ export default function SelectMultipleField({ className, attr, label, createdFor
                                     // while keeping the smart "flipping" logic active
                                     variant: 'menu',
                                     anchorReference: 'anchorEl',
-                                }, sx: {
-                                    borderColor: disabled
-                                        ? '#BEBFC1'
-                                        : hasError()
-                                            ? '#C6080A!important'
-                                            : active
-                                                ? '#1C83F4!important'
-                                                : '#BEBFC1!important',
-                                    backgroundColor: disabled
-                                        ? '#BEBFC1!important'
-                                        : '#FFFFFF!important',
-                                }, endAdornment: showEndAdornment && (_jsx(InputAdornment, { position: "end", children: getEndAdornmentIcon(field.value) })), children: [_jsx(MenuItem, { value: "", sx: (theme) => ({
+                                }, input: _jsx(FilledInput, { endAdornment: showEndAdornment && (_jsx(InputAdornment, { position: "end", children: getEndAdornmentIcon(field.value) })), sx: {
+                                        borderColor: disabled
+                                            ? '#BEBFC1'
+                                            : hasError()
+                                                ? '#C6080A!important'
+                                                : active
+                                                    ? '#1C83F4!important'
+                                                    : '#BEBFC1!important',
+                                        backgroundColor: disabled
+                                            ? '#BEBFC1!important'
+                                            : '#FFFFFF!important',
+                                    } }), children: [_jsx(MenuItem, { value: "", sx: (theme) => ({
                                             minHeight: theme.spacing(6),
                                         }), children: placeholder || '\u00a0' }), options.map((option, idx) => (_jsx(MenuItem, { value: option.value, children: option.label }, idx.valueOf())))] })] }), title && !hasError() && _jsx("div", { className: "helper", children: title }), hasError() && (_jsx("div", { className: "helper error", children: String(createdForm.formState.errors[attr]?.message) }))] })) }) }));
 }

package/dist/basic/SelectField/styles.scss

@@ -2,6 +2,21 @@
   width: 100%;
   position: relative;
 
+  > .helper {
+    @include helper-small-1;
+    margin-top: 4px;
+
+    &.error {
+      color: var(--text-error);
+    }
+  }
+
+  .ds-end-adornments {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
   .ds-icon {
     cursor: pointer;
   }

package/dist/common/AppForm/AppForm.d.ts

@@ -10,7 +10,6 @@ type Props<TFieldValues extends FieldValues = FieldValues, TContext = any, TTran
     onBlurFunctions?: Record<string, () => void>;
     runtimeOptions?: Record<string, any[]>;
     runtimeLoadOptions?: Record<string, (query: string) => Promise<SelectItem[]>>;
-    twoColumns?: boolean;
 };
-export default function AppForm<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues>({ fields, form, prefix, onChangeFunctions, onBlurFunctions, runtimeOptions, runtimeLoadOptions, twoColumns, }: Props<TFieldValues, TContext, TTransformedValues>): import("react").JSX.Element;
+export default function AppForm<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues>({ fields, form, prefix, onChangeFunctions, onBlurFunctions, runtimeOptions, runtimeLoadOptions, }: Props<TFieldValues, TContext, TTransformedValues>): import("react").JSX.Element;
 export {};

package/dist/common/AppForm/AppForm.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { AsyncSelectField, CheckboxField, DatePickerField, SelectField, SelectMultipleField, SwitchField, TextField, } from '../../basic';
 import FormColorField from './FormColorField';
+import { getFieldFlexStyle, groupFieldsIntoRows } from './groupFieldsIntoRows';
 import './style.scss';
 const convertList = (values, labelAttr, valueAttr) => {
     if (!values)
@@ -11,7 +12,7 @@ const convertList = (values, labelAttr, valueAttr) => {
     });
     return fields;
 };
-export default function AppForm({ fields, form, prefix, onChangeFunctions = {}, onBlurFunctions = {}, runtimeOptions = {}, runtimeLoadOptions = {}, twoColumns = false, }) {
+export default function AppForm({ fields, form, prefix, onChangeFunctions = {}, onBlurFunctions = {}, runtimeOptions = {}, runtimeLoadOptions = {}, }) {
     const getOnChangeFn = (attr) => onChangeFunctions[attr];
     const getOnBlurFn = (attr) => onBlurFunctions[attr];
     const getOptions = (attr) => {
@@ -19,49 +20,50 @@ export default function AppForm({ fields, form, prefix, onChangeFunctions = {},
             return undefined;
         return convertList(runtimeOptions[attr], 'name', 'uid');
     };
-    return (_jsx("div", { className: `app-form-container ${twoColumns ? 'two-columns' : ''}`, children: fields.map((field) => {
-            const name = prefix ? `${prefix}.${field.attr}` : field.attr;
-            const handleChange = getOnChangeFn(field.attr);
-            if (field.type === 'autocomplete') {
-                const loadOptions = runtimeLoadOptions[field.attr];
-                if (!loadOptions)
-                    return null;
-                return (_jsx(AsyncSelectField, { attr: name, label: field.name, createdForm: form, disabled: field.disabled, required: field.required, multiple: field.multiple, freeSolo: field.freeSolo, minQueryLength: field.minQueryLength, loadOptions: loadOptions, placeholder: field.title, noOptionsText: field.translation, onChange: (_attr, value) => handleChange?.(value) }, name));
-            }
-            if (field.type === 'select') {
-                const selectOptions = getOptions(field.attr) || field.options || [];
-                const selectProps = {
-                    attr: name,
-                    label: field.name,
-                    createdForm: form,
-                    options: selectOptions,
-                    disabled: field.disabled,
-                    required: field.required,
-                    onChange: (value) => handleChange?.(value),
-                    showEndAdornment: false,
-                };
-                if (field.multiple) {
-                    return _jsx(SelectMultipleField, { ...selectProps }, name);
-                }
-                return _jsx(SelectField, { ...selectProps }, name);
-            }
-            if (field.type === 'check') {
-                return (_jsx(CheckboxField, { attr: name, label: field.name, createdForm: form, disabled: field.disabled }, name));
-            }
-            if (field.type === 'switch') {
-                return (_jsx(SwitchField, { attr: name, label: field.name, createdForm: form, disabled: field.disabled, onChange: (value) => handleChange?.(value) }, name));
-            }
-            if (field.type === 'datepicker') {
-                const handleBlur = getOnBlurFn(field.attr);
-                return (_jsx(DatePickerField, { attr: name, label: field.size === 'small' ? undefined : field.name, createdForm: form, disabled: field.disabled, required: field.required, onChange: (_attr, value) => handleChange?.(value), onBlur: handleBlur, height: field.size === 'small' ? '32px' : undefined }, name));
-            }
-            if (field.type === 'textarea') {
-                return (_jsx(TextField, { attr: name, label: field.name, createdForm: form, disabled: field.disabled, required: field.required, onChange: (value) => handleChange?.(value), multiline: true, rows: field.rows, height: "100%", infoText: field.infoText, defaultEndAdornments: field.infoText ? ['info'] : ['close'] }, name));
-            }
-            if (field.type === 'color') {
-                return (_jsx(FormColorField, { attr: name, label: field.name, form: form, disabled: field.disabled, tooltipText: field.tooltipText, onChange: (value) => handleChange?.(value) }, name));
+    const renderField = (field) => {
+        const name = prefix ? `${prefix}.${field.attr}` : field.attr;
+        const handleChange = getOnChangeFn(field.attr);
+        if (field.type === 'autocomplete') {
+            const loadOptions = runtimeLoadOptions[field.attr];
+            if (!loadOptions)
+                return null;
+            return (_jsx(AsyncSelectField, { attr: name, label: field.name, createdForm: form, disabled: field.disabled, required: field.required, multiple: field.multiple, freeSolo: field.freeSolo, minQueryLength: field.minQueryLength, loadOptions: loadOptions, placeholder: field.title, noOptionsText: field.translation, onChange: (_attr, value) => handleChange?.(value) }, name));
+        }
+        if (field.type === 'select') {
+            const selectOptions = getOptions(field.attr) || field.options || [];
+            const selectProps = {
+                attr: name,
+                label: field.name,
+                createdForm: form,
+                options: selectOptions,
+                disabled: field.disabled,
+                required: field.required,
+                onChange: (value) => handleChange?.(value),
+                showEndAdornment: false,
+            };
+            if (field.multiple) {
+                return _jsx(SelectMultipleField, { ...selectProps }, name);
             }
+            return _jsx(SelectField, { ...selectProps }, name);
+        }
+        if (field.type === 'check') {
+            return (_jsx(CheckboxField, { attr: name, label: field.name, createdForm: form, disabled: field.disabled }, name));
+        }
+        if (field.type === 'switch') {
+            return (_jsx(SwitchField, { attr: name, label: field.name, createdForm: form, disabled: field.disabled, onChange: (value) => handleChange?.(value) }, name));
+        }
+        if (field.type === 'datepicker') {
             const handleBlur = getOnBlurFn(field.attr);
-            return (_jsx(TextField, { attr: name, label: field.size === 'small' ? undefined : field.name, placeholder: field.size === 'small' ? field.name : undefined, createdForm: form, mask: field.mask, blurMask: field.blurMask, disabled: field.disabled, required: field.required, onChange: (value) => handleChange?.(value), height: field.size === 'small' ? '32px' : undefined, onBlur: handleBlur, infoText: field.infoText, defaultEndAdornments: field.infoText ? ['info'] : ['close'] }, name));
-        }) }));
+            return (_jsx(DatePickerField, { attr: name, label: field.size === 'small' ? undefined : field.name, createdForm: form, disabled: field.disabled, required: field.required, onChange: (_attr, value) => handleChange?.(value), onBlur: handleBlur, height: field.size === 'small' ? '32px' : undefined }, name));
+        }
+        if (field.type === 'textarea') {
+            return (_jsx(TextField, { attr: name, label: field.name, createdForm: form, disabled: field.disabled, required: field.required, onChange: (value) => handleChange?.(value), multiline: true, rows: field.rows, height: "100%", infoText: field.infoText, defaultEndAdornments: field.infoText ? ['info'] : ['close'] }, name));
+        }
+        if (field.type === 'color') {
+            return (_jsx(FormColorField, { attr: name, label: field.name, form: form, disabled: field.disabled, tooltipText: field.tooltipText, onChange: (value) => handleChange?.(value) }, name));
+        }
+        const handleBlur = getOnBlurFn(field.attr);
+        return (_jsx(TextField, { attr: name, label: field.size === 'small' ? undefined : field.name, placeholder: field.size === 'small' ? field.name : undefined, createdForm: form, mask: field.mask, blurMask: field.blurMask, disabled: field.disabled, required: field.required, onChange: (value) => handleChange?.(value), height: field.size === 'small' ? '32px' : undefined, onBlur: handleBlur, infoText: field.infoText, defaultEndAdornments: field.infoText ? ['info'] : ['close'] }, name));
+    };
+    return (_jsx("div", { className: "app-form-container", children: groupFieldsIntoRows(fields).map((row, rowIdx) => (_jsx("div", { className: "app-form-row", children: row.map((field) => (_jsx("div", { className: "app-form-field", style: getFieldFlexStyle(field), children: renderField(field) }, field.attr))) }, rowIdx))) }));
 }

package/dist/common/AppForm/AppFormField.d.ts

@@ -34,4 +34,10 @@ export type AppFormField = {
     display?: DisplayFunction;
     copyToClipboard?: boolean;
     truncate?: number;
+    /** Flex-grow weight when sharing a row with adjacent flex fields. Omit for full-width. */
+    flexGrow?: number;
+    /** Optional flex-basis (default: 0 for even ratio distribution). */
+    flexBasis?: number | string;
+    /** Force a new row before this field (even if it has flexGrow). */
+    breakBefore?: boolean;
 };

package/dist/common/AppForm/AppFormInfo.js

@@ -1,6 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
 import { formatSwitchFieldValue } from './AppFormField';
+import { getFieldFlexStyle, groupFieldsIntoRows } from './groupFieldsIntoRows';
 import './style.scss';
 import { Icon } from '../../basic';
 import UsabilityUtils from '../../functions/UsabilityUtils';
@@ -37,9 +38,7 @@ function getFieldDisplayContent(field, raw, t) {
 }
 export default function AppFormInfo({ fields, data }) {
     const { t } = useTranslation('common');
-    return (_jsx("div", { className: "app-form-info-container", children: fields.map((field, idx) => {
-            return (_jsxs("div", { className: "item", ...(field.title && { title: field.title }), children: [_jsxs("span", { className: "label", children: [field.name, ":"] }), _jsx("span", { className: "value", children: getFieldDisplayContent(field, data[field.attr], t) }), field.copyToClipboard && (_jsx(Icon, { name: "content_copy", size: "small", className: "ds-copy-icon", filled: true, onClick: () => {
-                            UsabilityUtils.copy(data[field.attr]);
-                        } }))] }, idx));
-        }) }));
+    return (_jsx("div", { className: "app-form-info-container", children: groupFieldsIntoRows(fields).map((row, rowIdx) => (_jsx("div", { className: "app-form-row", children: row.map((field, idx) => (_jsx("div", { className: "app-form-field", style: getFieldFlexStyle(field), children: _jsxs("div", { className: "item", ...(field.title && { title: field.title }), children: [_jsxs("span", { className: "label", children: [field.name, ":"] }), _jsx("span", { className: "value", children: getFieldDisplayContent(field, data[field.attr], t) }), field.copyToClipboard && (_jsx(Icon, { name: "content_copy", size: "small", className: "ds-copy-icon", filled: true, onClick: () => {
+                                UsabilityUtils.copy(data[field.attr]);
+                            } }))] }) }, field.attr ?? idx))) }, rowIdx))) }));
 }

package/dist/common/AppForm/groupFieldsIntoRows.d.ts

@@ -0,0 +1,4 @@
+import { CSSProperties } from 'react';
+import { AppFormField } from './AppFormField';
+export declare function groupFieldsIntoRows(fields: AppFormField[]): AppFormField[][];
+export declare function getFieldFlexStyle(field: AppFormField): CSSProperties | undefined;

package/dist/common/AppForm/groupFieldsIntoRows.js

@@ -0,0 +1,30 @@
+export function groupFieldsIntoRows(fields) {
+    const rows = [];
+    let currentRow = [];
+    const flush = () => {
+        if (currentRow.length) {
+            rows.push(currentRow);
+            currentRow = [];
+        }
+    };
+    for (const field of fields) {
+        if (field.breakBefore)
+            flush();
+        if (field.flexGrow != null) {
+            currentRow.push(field);
+        }
+        else {
+            flush();
+            rows.push([field]);
+        }
+    }
+    flush();
+    return rows;
+}
+export function getFieldFlexStyle(field) {
+    if (field.flexGrow == null)
+        return undefined;
+    return {
+        flex: `${field.flexGrow} ${field.flexGrow} ${field.flexBasis ?? 0}`,
+    };
+}

package/dist/common/AppForm/style.scss

@@ -8,10 +8,6 @@
     align-items: center;
     gap: 4px;
 
-    &.full-width {
-      grid-column: 1 / -1;
-    }
-
     .label {
       @include label-medium-2;
       color: var(--text-primary);
@@ -33,11 +29,26 @@
   display: flex;
   flex-direction: column;
   gap: 16px;
+}
+
+.app-form-row {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.app-form-field {
+  min-width: 0;
+
+  &:only-child {
+    flex: 1 1 100%;
+  }
+}
 
-  &.two-columns {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 16px;
+@media (max-width: 768px) {
+  .app-form-row {
+    flex-direction: column;
   }
 }
 

package/dist/common/AppToast/AppToast.js

@@ -20,7 +20,7 @@ export default function AppToast() {
             return;
         dispatch(messageAction(EMPTY_TOAST));
     };
-    const getLoading = () => (_jsxs("div", { className: "d-flex", children: [_jsx(ReactLoading, { type: "spinningBubbles", color: "blue", height: 24, width: 24 }), _jsx("span", { className: "ms-3", children: state.toastLoadingText ?? t('generic.loading') })] }));
+    const getLoading = () => (_jsxs("div", { className: "d-flex", children: [_jsx(ReactLoading, { type: "spinningBubbles", color: "blue", height: 24, width: 24 }), _jsx("span", { className: "ms-3", children: state.toastLoadingText ?? t('generic.loading', { defaultValue: 'Loading...' }) })] }));
     useEffect(() => {
         const closeOnEscape = (e) => {
             if (e.key === 'Escape')

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nurseitaly-components",
   "private": false,
-  "version": "0.0.6",
+  "version": "0.0.8",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {