pne-ui 4.0.18 → 4.0.20

package/cjs/component/PneField.d.ts

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+import { FormControlProps, SxProps } from '@mui/material';
+import { Theme } from '@mui/material/styles';
+export interface PneFieldProps extends Omit<FormControlProps, 'children' | 'disabled' | 'error' | 'fullWidth' | 'required'> {
+    children: ReactNode;
+    disabled?: boolean;
+    error?: boolean;
+    fullWidth?: boolean;
+    helperText?: ReactNode;
+    helperTextSx?: SxProps<Theme>;
+    htmlFor?: string;
+    id?: string;
+    label?: ReactNode;
+    labelSx?: SxProps<Theme>;
+    required?: boolean;
+}
+declare const PneField: React.ForwardRefExoticComponent<Omit<PneFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default PneField;

package/cjs/component/PneField.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const material_1 = require("@mui/material");
+const PneField = (0, react_1.forwardRef)((props, ref) => {
+    const { children, disabled = false, error = false, fullWidth = true, helperText, helperTextSx, htmlFor, id, label, labelSx, required = false, sx, ...rest } = props;
+    const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
+    return react_1.default.createElement(material_1.FormControl, { disabled: disabled, error: error, fullWidth: fullWidth, id: id, required: required, ref: ref, sx: [
+            {
+                gap: '4px',
+            },
+            ...(Array.isArray(sx) ? sx : [sx]),
+        ], ...rest },
+        label
+            ? react_1.default.createElement(material_1.FormLabel, { htmlFor: htmlFor, required: required, sx: [
+                    {
+                        color: error ? 'error.main' : 'text.secondary',
+                        fontSize: '0.875rem',
+                        lineHeight: '20px',
+                        '&.Mui-focused': {
+                            color: error ? 'error.main' : 'text.secondary',
+                        },
+                        '& .MuiFormLabel-asterisk': {
+                            color: 'error.main',
+                        },
+                    },
+                    ...(Array.isArray(labelSx) ? labelSx : [labelSx]),
+                ] }, label)
+            : null,
+        children,
+        helperText
+            ? react_1.default.createElement(material_1.FormHelperText, { id: helperTextId, sx: [
+                    {
+                        mx: 0,
+                    },
+                    ...(Array.isArray(helperTextSx) ? helperTextSx : [helperTextSx]),
+                ] }, helperText)
+            : null);
+});
+exports.default = PneField;
+//# sourceMappingURL=PneField.js.map

package/cjs/component/PneField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PneField.js","sourceRoot":"","sources":["../../src/component/PneField.tsx"],"names":[],"mappings":";;;AAAA,uDAAkD;AAClD,4CAA+F;AAkB/F,MAAM,QAAQ,GAAG,IAAA,kBAAU,EAAgC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACtE,MAAM,EACF,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,KAAK,EACb,SAAS,GAAG,IAAI,EAChB,UAAU,EACV,YAAY,EACZ,OAAO,EACP,EAAE,EACF,KAAK,EACL,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,EAAE,EACF,GAAG,IAAI,EACV,GAAG,KAAK,CAAA;IAET,MAAM,YAAY,GAAG,UAAU,IAAI,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,CAAA;IAEvE,OAAO,8BAAC,sBAAW,IACf,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,EAAE,EAAE;YACA;gBACI,GAAG,EAAE,KAAK;aACb;YACD,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;SACrC,KACG,IAAI;QAEP,KAAK;YACF,CAAC,CAAC,8BAAC,oBAAS,IACR,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE;oBACA;wBACI,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB;wBAC9C,QAAQ,EAAE,UAAU;wBACpB,UAAU,EAAE,MAAM;wBAClB,eAAe,EAAE;4BACb,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB;yBACjD;wBACD,0BAA0B,EAAE;4BACxB,KAAK,EAAE,YAAY;yBACtB;qBACJ;oBACD,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;iBACpD,IAEA,KAAK,CACE;YACZ,CAAC,CAAC,IAAI;QACT,QAAQ;QACR,UAAU;YACP,CAAC,CAAC,8BAAC,yBAAc,IACb,EAAE,EAAE,YAAY,EAChB,EAAE,EAAE;oBACA;wBACI,EAAE,EAAE,CAAC;qBACR;oBACD,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;iBACnE,IAEA,UAAU,CACE;YACjB,CAAC,CAAC,IAAI,CACA,CAAA;AAClB,CAAC,CAAC,CAAA;AAEF,kBAAe,QAAQ,CAAA"}

package/cjs/component/PneSwitch.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
 import { SwitchProps } from '@mui/material';
+export type PneSwitchSize = NonNullable<SwitchProps['size']>;
+export type PneSwitchProps = SwitchProps;
 declare const PneSwitch: React.ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default PneSwitch;

package/cjs/component/PneSwitch.js

@@ -3,12 +3,169 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
 const PneSwitch = (0, react_1.forwardRef)((props, ref) => {
-    const { sx, size = 'small', ...rest } = props;
+    const { sx, size = 'medium', ...rest } = props;
     const _sx = [
+        switchSxBySize[size],
         ...(Array.isArray(sx) ? sx : [sx]),
     ];
     return react_1.default.createElement(material_1.Switch, { sx: _sx, size: size, ...rest, ref: ref });
 });
+const createSwitchSx = (config) => theme => {
+    const trackFeedbackColor = (0, styles_1.alpha)(theme.palette.primary.main, 0.1);
+    return {
+        width: config.rootWidth,
+        height: config.rootHeight,
+        padding: 0,
+        overflow: 'visible',
+        '&:hover .MuiSwitch-track::before, & .MuiSwitch-switchBase:hover + .MuiSwitch-track::before': {
+            boxShadow: `0 0 0 2px ${trackFeedbackColor}`,
+            opacity: 1,
+            transform: 'scale(1)',
+        },
+        '&:active .MuiSwitch-track::before, & .MuiSwitch-switchBase:active + .MuiSwitch-track::before': {
+            boxShadow: `0 0 0 ${config.pressedOutlineWidth}px ${trackFeedbackColor}`,
+            opacity: 1,
+            transform: 'scale(1)',
+            transitionDuration: '80ms',
+        },
+        '& .MuiSwitch-switchBase': {
+            top: config.trackTop,
+            left: config.trackLeft,
+            padding: `${config.thumbPadding}px`,
+            color: '#fff',
+            '&.Mui-checked': {
+                transform: `translateX(${config.checkedShift}px)`,
+                color: '#fff',
+                '& + .MuiSwitch-track': {
+                    backgroundColor: 'primary.main',
+                    opacity: 1,
+                },
+            },
+            '&:hover + .MuiSwitch-track': {
+                backgroundColor: '#5E7594',
+                opacity: 1,
+            },
+            '&.Mui-checked:hover + .MuiSwitch-track': {
+                backgroundColor: 'primary.dark',
+                opacity: 1,
+            },
+            '&.Mui-disabled': {
+                color: '#fff',
+                opacity: 1,
+                '& .MuiSwitch-thumb': {
+                    backgroundColor: '#fff',
+                },
+                '& + .MuiSwitch-track': {
+                    backgroundColor: '#E6E6E6',
+                    opacity: 1,
+                },
+                '& + .MuiSwitch-track::before': {
+                    boxShadow: 'none',
+                    opacity: 0,
+                    transform: 'scale(1)',
+                },
+            },
+            '&.Mui-checked.Mui-disabled + .MuiSwitch-track': {
+                backgroundColor: '#E6E6E6',
+                opacity: 1,
+            },
+            '&.Mui-checked.Mui-disabled .MuiSwitch-thumb': {
+                backgroundColor: '#fff',
+            },
+            '&.Mui-checked.Mui-disabled': {
+                color: '#fff',
+                opacity: 1,
+                '& + .MuiSwitch-track': {
+                    backgroundColor: '#E6E6E6',
+                    opacity: 1,
+                },
+                '& + .MuiSwitch-track::before': {
+                    boxShadow: 'none',
+                    opacity: 0,
+                    transform: 'scale(1)',
+                },
+            },
+            '&.Mui-disabled:hover + .MuiSwitch-track': {
+                backgroundColor: '#E6E6E6',
+                opacity: 1,
+            },
+            '&.Mui-checked.Mui-disabled:hover + .MuiSwitch-track': {
+                backgroundColor: '#E6E6E6',
+                opacity: 1,
+            },
+            '&.Mui-focusVisible:not(.Mui-disabled) + .MuiSwitch-track::before': {
+                boxShadow: `0 0 0 ${config.focusOutlineWidth}px ${trackFeedbackColor}`,
+                opacity: 1,
+                transform: 'scale(1)',
+            },
+        },
+        '&:active .MuiSwitch-switchBase.Mui-focusVisible:not(.Mui-disabled) + .MuiSwitch-track::before, & .MuiSwitch-switchBase.Mui-focusVisible:not(.Mui-disabled):active + .MuiSwitch-track::before': {
+            boxShadow: `0 0 0 ${config.pressedOutlineWidth}px ${trackFeedbackColor}`,
+            opacity: 1,
+            transform: 'scale(1)',
+            transitionDuration: '80ms',
+        },
+        '& .MuiSwitch-thumb': {
+            width: config.thumbSize,
+            height: config.thumbSize,
+            borderRadius: '50%',
+            boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.2)',
+        },
+        '& .MuiSwitch-track': {
+            position: 'absolute',
+            top: config.trackTop,
+            left: config.trackLeft,
+            width: config.trackWidth,
+            height: config.trackHeight,
+            borderRadius: 40,
+            backgroundColor: '#809EAE',
+            opacity: 1,
+            overflow: 'visible',
+            '&::before': {
+                borderRadius: 'inherit',
+                boxShadow: 'none',
+                boxSizing: 'border-box',
+                content: '""',
+                inset: 0,
+                opacity: 0,
+                pointerEvents: 'none',
+                position: 'absolute',
+                transform: 'scale(1)',
+                transformOrigin: 'center',
+                transition: 'box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1)',
+            },
+        },
+    };
+};
+const switchSxBySize = {
+    small: createSwitchSx({
+        rootWidth: 40,
+        rootHeight: 24,
+        trackLeft: 8,
+        trackTop: 4,
+        trackWidth: 24,
+        trackHeight: 16,
+        thumbSize: 12,
+        thumbPadding: 2,
+        checkedShift: 8,
+        focusOutlineWidth: 2,
+        pressedOutlineWidth: 4,
+    }),
+    medium: createSwitchSx({
+        rootWidth: 58,
+        rootHeight: 32,
+        trackLeft: 12,
+        trackTop: 5,
+        trackWidth: 34,
+        trackHeight: 22,
+        thumbSize: 16,
+        thumbPadding: 3,
+        checkedShift: 12,
+        focusOutlineWidth: 4,
+        pressedOutlineWidth: 6,
+    }),
+};
 exports.default = PneSwitch;
 //# sourceMappingURL=PneSwitch.js.map

package/cjs/component/PneSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"PneSwitch.js","sourceRoot":"","sources":["../../src/component/PneSwitch.tsx"],"names":[],"mappings":";;;AAAA,uDAA4C;AAC5C,4CAA0D;AAE1D,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAC,CACzB,KAAkB,EAClB,GAA2B,EAC7B,EAAE;IACA,MAAM,EACF,EAAE,EACF,IAAI,GAAG,OAAO,EACd,GAAG,IAAI,EACV,GAAG,KAAK,CAAA;IAET,MAAM,GAAG,GAAY;QACjB,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;KACrC,CAAA;IAED,OAAO,8BAAC,iBAAM,IAAC,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,KAAM,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,CAAA;AAC7D,CAAC,CAAC,CAAA;AAEF,kBAAe,SAAS,CAAA"}
+{"version":3,"file":"PneSwitch.js","sourceRoot":"","sources":["../../src/component/PneSwitch.tsx"],"names":[],"mappings":"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"}

package/cjs/component/dropdown/PneSelect.d.ts

@@ -2,10 +2,11 @@ import React, { ReactNode } from 'react';
 import { SelectProps, SelectVariants } from '@mui/material';
 import { PneDropdownChoice } from '../../common/paynet/dropdown';
 import { SelectOption } from '../../common/pne/type';
-export interface IProps<T extends PneDropdownChoice> extends Omit<SelectProps<T>, 'children' | 'onChange' | 'variant'> {
+export interface IProps<T extends PneDropdownChoice> extends Omit<SelectProps<T>, 'children' | 'onChange' | 'placeholder' | 'variant'> {
     options: readonly T[];
     onChange: (option: T) => void;
     getOptionLabel?: (option: SelectOption) => ReactNode;
+    placeholder?: ReactNode;
     variant?: SelectVariants;
     disableMenuItem?: (option: SelectOption) => boolean;
 }

package/cjs/component/dropdown/PneSelect.js

@@ -6,20 +6,55 @@ const material_1 = require("@mui/material");
 const type_1 = require("../../common/pne/type");
 const type_2 = require("../../common/paynet/type");
 const PneSelect = (0, react_1.forwardRef)((props, ref) => {
-    const { options, onChange, size = 'small', getOptionLabel = createDefaultOptionLabel, variant = 'outlined', disableMenuItem, label, disabled, error, required, sx, ...rest } = props;
+    const { options, onChange, size = 'small', getOptionLabel = createDefaultOptionLabel, variant = 'outlined', disableMenuItem, label, disabled, error, required, sx, displayEmpty, placeholder, renderValue, ...rest } = props;
+    const labelId = (0, react_1.useId)();
+    const hasLabel = label !== undefined && label !== null && label !== '';
+    const mappedOptions = options.map(mapChoiceToSelectOption);
     const handleChange = (event) => {
         const value = event.target.value;
         onChange((0, type_1.ensure)(options.find(opt => mapChoiceToSelectOption(opt).value === value)));
     };
     const optionsPresent = options?.length > 0;
+    const shouldRenderPlaceholder = placeholder !== undefined && placeholder !== null;
+    const renderSelectedValue = (selected) => {
+        if (isEmptyValue(selected)) {
+            return react_1.default.createElement(material_1.Box, { component: 'span', sx: { color: 'text.secondary' } }, placeholder);
+        }
+        if (Array.isArray(selected)) {
+            return selected.map((value, index) => react_1.default.createElement(react_1.default.Fragment, { key: String(value) },
+                index > 0 ? ', ' : null,
+                renderSingleSelectedValue(value, mappedOptions, getOptionLabel)));
+        }
+        return renderSingleSelectedValue(selected, mappedOptions, getOptionLabel);
+    };
     return react_1.default.createElement(material_1.FormControl, { size: size, variant: variant, disabled: disabled, error: error, required: required, sx: sx, fullWidth: true },
-        react_1.default.createElement(material_1.InputLabel, { id: "select-label" }, label),
-        react_1.default.createElement(material_1.Select, { ref: ref, labelId: "select-label", onChange: handleChange, size: size, variant: variant, label: label, ...rest }, optionsPresent ? options.map(mapChoiceToSelectOption).map(option => react_1.default.createElement(material_1.MenuItem, { disabled: disableMenuItem ? disableMenuItem(option) : false, key: option.value, value: option.value }, getOptionLabel(option))) : null));
+        hasLabel ? react_1.default.createElement(material_1.InputLabel, { id: labelId }, label) : null,
+        react_1.default.createElement(material_1.Select, { ref: ref, displayEmpty: displayEmpty ?? shouldRenderPlaceholder, labelId: hasLabel ? labelId : undefined, onChange: handleChange, size: size, variant: variant, label: hasLabel ? label : undefined, renderValue: renderValue ?? (shouldRenderPlaceholder ? renderSelectedValue : undefined), ...rest }, optionsPresent ? mappedOptions.map(option => react_1.default.createElement(material_1.MenuItem, { disabled: disableMenuItem ? disableMenuItem(option) : false, key: option.value, value: option.value }, getOptionLabel(option))) : null));
 });
 exports.default = PneSelect;
 const createDefaultOptionLabel = (option) => {
     return option.label;
 };
+const isEmptyValue = (value) => {
+    return value === '' || value === undefined || value === null
+        || (Array.isArray(value) && value.length === 0);
+};
+const renderSingleSelectedValue = (value, options, getOptionLabel) => {
+    const option = options.find(option => option.value === value);
+    if (option) {
+        return getOptionLabel(option);
+    }
+    if (typeof value === 'string' || typeof value === 'number') {
+        return value;
+    }
+    if ((0, type_2.isIAutoCompleteChoice)(value)) {
+        return value.displayName;
+    }
+    if ((0, type_2.isAbstractEntity)(value)) {
+        return value.displayName;
+    }
+    return '';
+};
 const mapChoiceToSelectOption = (choice) => {
     if (typeof choice === 'string') {
         return {

package/cjs/component/dropdown/PneSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"PneSelect.js","sourceRoot":"","sources":["../../../src/component/dropdown/PneSelect.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PneSelect.js","sourceRoot":"","sources":["../../../src/component/dropdown/PneSelect.tsx"],"names":[],"mappings":"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"}

package/cjs/exports/inputs.d.ts

@@ -1,4 +1,6 @@
 export { default as PneTextField } from '../component/PneTextField';
+export { default as PneField } from '../component/PneField';
+export type { PneFieldProps } from '../component/PneField';
 export { default as PneAutocomplete } from '../component/dropdown/PneAutocomplete';
 export { default as PneAsyncAutocomplete } from '../component/dropdown/PneAsyncAutocomplete';
 export type { PneAsyncAutocompleteProps } from '../component/dropdown/PneAsyncAutocomplete';
@@ -8,3 +10,4 @@ export { PneCheckbox } from '../component/PneCheckbox';
 export { PneLabeledCheckbox } from '../component/PneLabeledCheckbox';
 export { PneHighContrastLabeledCheckbox } from '../component/PneHighContrastLabeledCheckbox';
 export { default as PneSwitch } from '../component/PneSwitch';
+export type { PneSwitchProps, PneSwitchSize } from '../component/PneSwitch';

package/cjs/exports/inputs.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PneSwitch = exports.PneHighContrastLabeledCheckbox = exports.PneLabeledCheckbox = exports.PneCheckbox = exports.PneSelect = exports.PneAsyncAutocomplete = exports.PneAutocomplete = exports.PneTextField = void 0;
+exports.PneSwitch = exports.PneHighContrastLabeledCheckbox = exports.PneLabeledCheckbox = exports.PneCheckbox = exports.PneSelect = exports.PneAsyncAutocomplete = exports.PneAutocomplete = exports.PneField = exports.PneTextField = void 0;
 const tslib_1 = require("tslib");
 var PneTextField_1 = require("../component/PneTextField");
 Object.defineProperty(exports, "PneTextField", { enumerable: true, get: function () { return tslib_1.__importDefault(PneTextField_1).default; } });
+var PneField_1 = require("../component/PneField");
+Object.defineProperty(exports, "PneField", { enumerable: true, get: function () { return tslib_1.__importDefault(PneField_1).default; } });
 var PneAutocomplete_1 = require("../component/dropdown/PneAutocomplete");
 Object.defineProperty(exports, "PneAutocomplete", { enumerable: true, get: function () { return tslib_1.__importDefault(PneAutocomplete_1).default; } });
 var PneAsyncAutocomplete_1 = require("../component/dropdown/PneAsyncAutocomplete");

package/cjs/exports/inputs.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputs.js","sourceRoot":"","sources":["../../src/exports/inputs.ts"],"names":[],"mappings":";;;;AAAA,0DAAmE;AAA1D,qIAAA,OAAO,OAAgB;AAChC,yEAAkF;AAAzE,2IAAA,OAAO,OAAmB;AACnC,mFAA4F;AAAnF,qJAAA,OAAO,OAAwB;AAExC,6DAAsE;AAA7D,+HAAA,OAAO,OAAa;AAG7B,wDAAsD;AAA7C,0GAAA,WAAW,OAAA;AACpB,sEAAoE;AAA3D,wHAAA,kBAAkB,OAAA;AAC3B,8FAA4F;AAAnF,gJAAA,8BAA8B,OAAA;AACvC,oDAA6D;AAApD,+HAAA,OAAO,OAAa"}
+{"version":3,"file":"inputs.js","sourceRoot":"","sources":["../../src/exports/inputs.ts"],"names":[],"mappings":";;;;AAAA,0DAAmE;AAA1D,qIAAA,OAAO,OAAgB;AAChC,kDAA2D;AAAlD,6HAAA,OAAO,OAAY;AAE5B,yEAAkF;AAAzE,2IAAA,OAAO,OAAmB;AACnC,mFAA4F;AAAnF,qJAAA,OAAO,OAAwB;AAExC,6DAAsE;AAA7D,+HAAA,OAAO,OAAa;AAG7B,wDAAsD;AAA7C,0GAAA,WAAW,OAAA;AACpB,sEAAoE;AAA3D,wHAAA,kBAAkB,OAAA;AAC3B,8FAA4F;AAAnF,gJAAA,8BAA8B,OAAA;AACvC,oDAA6D;AAApD,+HAAA,OAAO,OAAa"}

package/esm/component/PneField.d.ts

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+import { FormControlProps, SxProps } from '@mui/material';
+import { Theme } from '@mui/material/styles';
+export interface PneFieldProps extends Omit<FormControlProps, 'children' | 'disabled' | 'error' | 'fullWidth' | 'required'> {
+    children: ReactNode;
+    disabled?: boolean;
+    error?: boolean;
+    fullWidth?: boolean;
+    helperText?: ReactNode;
+    helperTextSx?: SxProps<Theme>;
+    htmlFor?: string;
+    id?: string;
+    label?: ReactNode;
+    labelSx?: SxProps<Theme>;
+    required?: boolean;
+}
+declare const PneField: React.ForwardRefExoticComponent<Omit<PneFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default PneField;

package/esm/component/PneField.js

@@ -0,0 +1,39 @@
+import React, { forwardRef } from 'react';
+import { FormControl, FormHelperText, FormLabel } from '@mui/material';
+const PneField = forwardRef((props, ref) => {
+    const { children, disabled = false, error = false, fullWidth = true, helperText, helperTextSx, htmlFor, id, label, labelSx, required = false, sx, ...rest } = props;
+    const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
+    return React.createElement(FormControl, { disabled: disabled, error: error, fullWidth: fullWidth, id: id, required: required, ref: ref, sx: [
+            {
+                gap: '4px',
+            },
+            ...(Array.isArray(sx) ? sx : [sx]),
+        ], ...rest },
+        label
+            ? React.createElement(FormLabel, { htmlFor: htmlFor, required: required, sx: [
+                    {
+                        color: error ? 'error.main' : 'text.secondary',
+                        fontSize: '0.875rem',
+                        lineHeight: '20px',
+                        '&.Mui-focused': {
+                            color: error ? 'error.main' : 'text.secondary',
+                        },
+                        '& .MuiFormLabel-asterisk': {
+                            color: 'error.main',
+                        },
+                    },
+                    ...(Array.isArray(labelSx) ? labelSx : [labelSx]),
+                ] }, label)
+            : null,
+        children,
+        helperText
+            ? React.createElement(FormHelperText, { id: helperTextId, sx: [
+                    {
+                        mx: 0,
+                    },
+                    ...(Array.isArray(helperTextSx) ? helperTextSx : [helperTextSx]),
+                ] }, helperText)
+            : null);
+});
+export default PneField;
+//# sourceMappingURL=PneField.js.map

package/esm/component/PneField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PneField.js","sourceRoot":"","sources":["../../src/component/PneField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAY,UAAU,EAAC,MAAM,OAAO,CAAA;AAClD,OAAO,EAAC,WAAW,EAAoB,cAAc,EAAE,SAAS,EAAU,MAAM,eAAe,CAAA;AAkB/F,MAAM,QAAQ,GAAG,UAAU,CAAgC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACtE,MAAM,EACF,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,KAAK,EACb,SAAS,GAAG,IAAI,EAChB,UAAU,EACV,YAAY,EACZ,OAAO,EACP,EAAE,EACF,KAAK,EACL,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,EAAE,EACF,GAAG,IAAI,EACV,GAAG,KAAK,CAAA;IAET,MAAM,YAAY,GAAG,UAAU,IAAI,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,CAAA;IAEvE,OAAO,oBAAC,WAAW,IACf,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,EAAE,EAAE;YACA;gBACI,GAAG,EAAE,KAAK;aACb;YACD,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;SACrC,KACG,IAAI;QAEP,KAAK;YACF,CAAC,CAAC,oBAAC,SAAS,IACR,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE;oBACA;wBACI,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB;wBAC9C,QAAQ,EAAE,UAAU;wBACpB,UAAU,EAAE,MAAM;wBAClB,eAAe,EAAE;4BACb,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB;yBACjD;wBACD,0BAA0B,EAAE;4BACxB,KAAK,EAAE,YAAY;yBACtB;qBACJ;oBACD,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;iBACpD,IAEA,KAAK,CACE;YACZ,CAAC,CAAC,IAAI;QACT,QAAQ;QACR,UAAU;YACP,CAAC,CAAC,oBAAC,cAAc,IACb,EAAE,EAAE,YAAY,EAChB,EAAE,EAAE;oBACA;wBACI,EAAE,EAAE,CAAC;qBACR;oBACD,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;iBACnE,IAEA,UAAU,CACE;YACjB,CAAC,CAAC,IAAI,CACA,CAAA;AAClB,CAAC,CAAC,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/esm/component/PneSwitch.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
 import { SwitchProps } from '@mui/material';
+export type PneSwitchSize = NonNullable<SwitchProps['size']>;
+export type PneSwitchProps = SwitchProps;
 declare const PneSwitch: React.ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default PneSwitch;

package/esm/component/PneSwitch.js

@@ -1,11 +1,168 @@
 import React, { forwardRef } from 'react';
 import { Switch } from '@mui/material';
+import { alpha } from '@mui/material/styles';
 const PneSwitch = forwardRef((props, ref) => {
-    const { sx, size = 'small', ...rest } = props;
+    const { sx, size = 'medium', ...rest } = props;
     const _sx = [
+        switchSxBySize[size],
         ...(Array.isArray(sx) ? sx : [sx]),
     ];
     return React.createElement(Switch, { sx: _sx, size: size, ...rest, ref: ref });
 });
+const createSwitchSx = (config) => theme => {
+    const trackFeedbackColor = alpha(theme.palette.primary.main, 0.1);
+    return {
+        width: config.rootWidth,
+        height: config.rootHeight,
+        padding: 0,
+        overflow: 'visible',
+        '&:hover .MuiSwitch-track::before, & .MuiSwitch-switchBase:hover + .MuiSwitch-track::before': {
+            boxShadow: `0 0 0 2px ${trackFeedbackColor}`,
+            opacity: 1,
+            transform: 'scale(1)',
+        },
+        '&:active .MuiSwitch-track::before, & .MuiSwitch-switchBase:active + .MuiSwitch-track::before': {
+            boxShadow: `0 0 0 ${config.pressedOutlineWidth}px ${trackFeedbackColor}`,
+            opacity: 1,
+            transform: 'scale(1)',
+            transitionDuration: '80ms',
+        },
+        '& .MuiSwitch-switchBase': {
+            top: config.trackTop,
+            left: config.trackLeft,
+            padding: `${config.thumbPadding}px`,
+            color: '#fff',
+            '&.Mui-checked': {
+                transform: `translateX(${config.checkedShift}px)`,
+                color: '#fff',
+                '& + .MuiSwitch-track': {
+                    backgroundColor: 'primary.main',
+                    opacity: 1,
+                },
+            },
+            '&:hover + .MuiSwitch-track': {
+                backgroundColor: '#5E7594',
+                opacity: 1,
+            },
+            '&.Mui-checked:hover + .MuiSwitch-track': {
+                backgroundColor: 'primary.dark',
+                opacity: 1,
+            },
+            '&.Mui-disabled': {
+                color: '#fff',
+                opacity: 1,
+                '& .MuiSwitch-thumb': {
+                    backgroundColor: '#fff',
+                },
+                '& + .MuiSwitch-track': {
+                    backgroundColor: '#E6E6E6',
+                    opacity: 1,
+                },
+                '& + .MuiSwitch-track::before': {
+                    boxShadow: 'none',
+                    opacity: 0,
+                    transform: 'scale(1)',
+                },
+            },
+            '&.Mui-checked.Mui-disabled + .MuiSwitch-track': {
+                backgroundColor: '#E6E6E6',
+                opacity: 1,
+            },
+            '&.Mui-checked.Mui-disabled .MuiSwitch-thumb': {
+                backgroundColor: '#fff',
+            },
+            '&.Mui-checked.Mui-disabled': {
+                color: '#fff',
+                opacity: 1,
+                '& + .MuiSwitch-track': {
+                    backgroundColor: '#E6E6E6',
+                    opacity: 1,
+                },
+                '& + .MuiSwitch-track::before': {
+                    boxShadow: 'none',
+                    opacity: 0,
+                    transform: 'scale(1)',
+                },
+            },
+            '&.Mui-disabled:hover + .MuiSwitch-track': {
+                backgroundColor: '#E6E6E6',
+                opacity: 1,
+            },
+            '&.Mui-checked.Mui-disabled:hover + .MuiSwitch-track': {
+                backgroundColor: '#E6E6E6',
+                opacity: 1,
+            },
+            '&.Mui-focusVisible:not(.Mui-disabled) + .MuiSwitch-track::before': {
+                boxShadow: `0 0 0 ${config.focusOutlineWidth}px ${trackFeedbackColor}`,
+                opacity: 1,
+                transform: 'scale(1)',
+            },
+        },
+        '&:active .MuiSwitch-switchBase.Mui-focusVisible:not(.Mui-disabled) + .MuiSwitch-track::before, & .MuiSwitch-switchBase.Mui-focusVisible:not(.Mui-disabled):active + .MuiSwitch-track::before': {
+            boxShadow: `0 0 0 ${config.pressedOutlineWidth}px ${trackFeedbackColor}`,
+            opacity: 1,
+            transform: 'scale(1)',
+            transitionDuration: '80ms',
+        },
+        '& .MuiSwitch-thumb': {
+            width: config.thumbSize,
+            height: config.thumbSize,
+            borderRadius: '50%',
+            boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.2)',
+        },
+        '& .MuiSwitch-track': {
+            position: 'absolute',
+            top: config.trackTop,
+            left: config.trackLeft,
+            width: config.trackWidth,
+            height: config.trackHeight,
+            borderRadius: 40,
+            backgroundColor: '#809EAE',
+            opacity: 1,
+            overflow: 'visible',
+            '&::before': {
+                borderRadius: 'inherit',
+                boxShadow: 'none',
+                boxSizing: 'border-box',
+                content: '""',
+                inset: 0,
+                opacity: 0,
+                pointerEvents: 'none',
+                position: 'absolute',
+                transform: 'scale(1)',
+                transformOrigin: 'center',
+                transition: 'box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1)',
+            },
+        },
+    };
+};
+const switchSxBySize = {
+    small: createSwitchSx({
+        rootWidth: 40,
+        rootHeight: 24,
+        trackLeft: 8,
+        trackTop: 4,
+        trackWidth: 24,
+        trackHeight: 16,
+        thumbSize: 12,
+        thumbPadding: 2,
+        checkedShift: 8,
+        focusOutlineWidth: 2,
+        pressedOutlineWidth: 4,
+    }),
+    medium: createSwitchSx({
+        rootWidth: 58,
+        rootHeight: 32,
+        trackLeft: 12,
+        trackTop: 5,
+        trackWidth: 34,
+        trackHeight: 22,
+        thumbSize: 16,
+        thumbPadding: 3,
+        checkedShift: 12,
+        focusOutlineWidth: 4,
+        pressedOutlineWidth: 6,
+    }),
+};
 export default PneSwitch;
 //# sourceMappingURL=PneSwitch.js.map

package/esm/component/PneSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"PneSwitch.js","sourceRoot":"","sources":["../../src/component/PneSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,UAAU,EAAM,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAC,MAAM,EAAuB,MAAM,eAAe,CAAA;AAE1D,MAAM,SAAS,GAAG,UAAU,CAAC,CACzB,KAAkB,EAClB,GAA2B,EAC7B,EAAE;IACA,MAAM,EACF,EAAE,EACF,IAAI,GAAG,OAAO,EACd,GAAG,IAAI,EACV,GAAG,KAAK,CAAA;IAET,MAAM,GAAG,GAAY;QACjB,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;KACrC,CAAA;IAED,OAAO,oBAAC,MAAM,IAAC,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,KAAM,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,CAAA;AAC7D,CAAC,CAAC,CAAA;AAEF,eAAe,SAAS,CAAA"}
+{"version":3,"file":"PneSwitch.js","sourceRoot":"","sources":["../../src/component/PneSwitch.tsx"],"names":[],"mappings":"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"}

package/esm/component/dropdown/PneSelect.d.ts

@@ -2,10 +2,11 @@ import React, { ReactNode } from 'react';
 import { SelectProps, SelectVariants } from '@mui/material';
 import { PneDropdownChoice } from '../../common/paynet/dropdown';
 import { SelectOption } from '../../common/pne/type';
-export interface IProps<T extends PneDropdownChoice> extends Omit<SelectProps<T>, 'children' | 'onChange' | 'variant'> {
+export interface IProps<T extends PneDropdownChoice> extends Omit<SelectProps<T>, 'children' | 'onChange' | 'placeholder' | 'variant'> {
     options: readonly T[];
     onChange: (option: T) => void;
     getOptionLabel?: (option: SelectOption) => ReactNode;
+    placeholder?: ReactNode;
     variant?: SelectVariants;
     disableMenuItem?: (option: SelectOption) => boolean;
 }

package/esm/component/dropdown/PneSelect.js

@@ -1,22 +1,57 @@
-import React, { forwardRef } from 'react';
-import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
+import React, { forwardRef, useId } from 'react';
+import { Box, FormControl, InputLabel, MenuItem, Select } from '@mui/material';
 import { assertObject, ensure, exhaustiveCheck } from '../../common/pne/type';
 import { isAbstractEntity, isIAutoCompleteChoice } from '../../common/paynet/type';
 const PneSelect = forwardRef((props, ref) => {
-    const { options, onChange, size = 'small', getOptionLabel = createDefaultOptionLabel, variant = 'outlined', disableMenuItem, label, disabled, error, required, sx, ...rest } = props;
+    const { options, onChange, size = 'small', getOptionLabel = createDefaultOptionLabel, variant = 'outlined', disableMenuItem, label, disabled, error, required, sx, displayEmpty, placeholder, renderValue, ...rest } = props;
+    const labelId = useId();
+    const hasLabel = label !== undefined && label !== null && label !== '';
+    const mappedOptions = options.map(mapChoiceToSelectOption);
     const handleChange = (event) => {
         const value = event.target.value;
         onChange(ensure(options.find(opt => mapChoiceToSelectOption(opt).value === value)));
     };
     const optionsPresent = options?.length > 0;
+    const shouldRenderPlaceholder = placeholder !== undefined && placeholder !== null;
+    const renderSelectedValue = (selected) => {
+        if (isEmptyValue(selected)) {
+            return React.createElement(Box, { component: 'span', sx: { color: 'text.secondary' } }, placeholder);
+        }
+        if (Array.isArray(selected)) {
+            return selected.map((value, index) => React.createElement(React.Fragment, { key: String(value) },
+                index > 0 ? ', ' : null,
+                renderSingleSelectedValue(value, mappedOptions, getOptionLabel)));
+        }
+        return renderSingleSelectedValue(selected, mappedOptions, getOptionLabel);
+    };
     return React.createElement(FormControl, { size: size, variant: variant, disabled: disabled, error: error, required: required, sx: sx, fullWidth: true },
-        React.createElement(InputLabel, { id: "select-label" }, label),
-        React.createElement(Select, { ref: ref, labelId: "select-label", onChange: handleChange, size: size, variant: variant, label: label, ...rest }, optionsPresent ? options.map(mapChoiceToSelectOption).map(option => React.createElement(MenuItem, { disabled: disableMenuItem ? disableMenuItem(option) : false, key: option.value, value: option.value }, getOptionLabel(option))) : null));
+        hasLabel ? React.createElement(InputLabel, { id: labelId }, label) : null,
+        React.createElement(Select, { ref: ref, displayEmpty: displayEmpty ?? shouldRenderPlaceholder, labelId: hasLabel ? labelId : undefined, onChange: handleChange, size: size, variant: variant, label: hasLabel ? label : undefined, renderValue: renderValue ?? (shouldRenderPlaceholder ? renderSelectedValue : undefined), ...rest }, optionsPresent ? mappedOptions.map(option => React.createElement(MenuItem, { disabled: disableMenuItem ? disableMenuItem(option) : false, key: option.value, value: option.value }, getOptionLabel(option))) : null));
 });
 export default PneSelect;
 const createDefaultOptionLabel = (option) => {
     return option.label;
 };
+const isEmptyValue = (value) => {
+    return value === '' || value === undefined || value === null
+        || (Array.isArray(value) && value.length === 0);
+};
+const renderSingleSelectedValue = (value, options, getOptionLabel) => {
+    const option = options.find(option => option.value === value);
+    if (option) {
+        return getOptionLabel(option);
+    }
+    if (typeof value === 'string' || typeof value === 'number') {
+        return value;
+    }
+    if (isIAutoCompleteChoice(value)) {
+        return value.displayName;
+    }
+    if (isAbstractEntity(value)) {
+        return value.displayName;
+    }
+    return '';
+};
 const mapChoiceToSelectOption = (choice) => {
     if (typeof choice === 'string') {
         return {

package/esm/component/dropdown/PneSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"PneSelect.js","sourceRoot":"","sources":["../../../src/component/dropdown/PneSelect.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PneSelect.js","sourceRoot":"","sources":["../../../src/component/dropdown/PneSelect.tsx"],"names":[],"mappings":"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"}

package/esm/exports/inputs.d.ts

@@ -1,4 +1,6 @@
 export { default as PneTextField } from '../component/PneTextField';
+export { default as PneField } from '../component/PneField';
+export type { PneFieldProps } from '../component/PneField';
 export { default as PneAutocomplete } from '../component/dropdown/PneAutocomplete';
 export { default as PneAsyncAutocomplete } from '../component/dropdown/PneAsyncAutocomplete';
 export type { PneAsyncAutocompleteProps } from '../component/dropdown/PneAsyncAutocomplete';
@@ -8,3 +10,4 @@ export { PneCheckbox } from '../component/PneCheckbox';
 export { PneLabeledCheckbox } from '../component/PneLabeledCheckbox';
 export { PneHighContrastLabeledCheckbox } from '../component/PneHighContrastLabeledCheckbox';
 export { default as PneSwitch } from '../component/PneSwitch';
+export type { PneSwitchProps, PneSwitchSize } from '../component/PneSwitch';

package/esm/exports/inputs.js

@@ -1,4 +1,5 @@
 export { default as PneTextField } from '../component/PneTextField';
+export { default as PneField } from '../component/PneField';
 export { default as PneAutocomplete } from '../component/dropdown/PneAutocomplete';
 export { default as PneAsyncAutocomplete } from '../component/dropdown/PneAsyncAutocomplete';
 export { default as PneSelect } from '../component/dropdown/PneSelect';

package/esm/exports/inputs.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputs.js","sourceRoot":"","sources":["../../src/exports/inputs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACnE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,uCAAuC,CAAA;AAClF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,4CAA4C,CAAA;AAE5F,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iCAAiC,CAAA;AAGtE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAA;AACpE,OAAO,EAAE,8BAA8B,EAAE,MAAM,6CAA6C,CAAA;AAC5F,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAA"}
+{"version":3,"file":"inputs.js","sourceRoot":"","sources":["../../src/exports/inputs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACnE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,uCAAuC,CAAA;AAClF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,4CAA4C,CAAA;AAE5F,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iCAAiC,CAAA;AAGtE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAA;AACpE,OAAO,EAAE,8BAA8B,EAAE,MAAM,6CAA6C,CAAA;AAC5F,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pne-ui",
-    "version": "4.0.18",
+    "version": "4.0.20",
     "description": "",
     "repository": {
         "type": "git",