@portnet/ui 5.0.0 → 5.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,5 @@
1
1
  "use strict";
2
2
 
3
- require("core-js/modules/es.weak-map.js");
4
3
  require("core-js/modules/esnext.iterator.constructor.js");
5
4
  require("core-js/modules/esnext.iterator.filter.js");
6
5
  require("core-js/modules/esnext.iterator.for-each.js");
@@ -9,45 +8,164 @@ Object.defineProperty(exports, "__esModule", {
9
8
  });
10
9
  exports.default = void 0;
11
10
  require("core-js/modules/web.dom-collections.iterator.js");
11
+ var _react = _interopRequireDefault(require("react"));
12
12
  var _styles = require("@mui/material/styles");
13
13
  var _DateTimePicker = require("@mui/x-date-pickers/DateTimePicker");
14
14
  var _formik = require("formik");
15
15
  var _moment = _interopRequireDefault(require("moment"));
16
- var _propTypes = _interopRequireDefault(require("prop-types"));
17
- var React = _interopRequireWildcard(require("react"));
16
+ var _AdapterDayjs = require("@mui/x-date-pickers/AdapterDayjs");
17
+ var _xDatePickers = require("@mui/x-date-pickers");
18
18
  var _apperance = require("../../config/apperance");
19
- var _StyledMuiTextField = _interopRequireDefault(require("../common/StyledMuiTextField"));
19
+ var _propTypes = _interopRequireDefault(require("prop-types"));
20
20
  var _jsxRuntime = require("react/jsx-runtime");
21
21
  const _excluded = ["id", "className", "sx", "label", "name", "required", "value", "minDate", "maxDate", "inputFormat", "format", "disablePast", "disableFuture", "error", "readOnly", "fullWidth", "disabled", "helperText", "onChange", "onBlur"],
22
22
  _excluded2 = ["id", "className", "sx", "label", "name", "required", "value", "minDate", "maxDate", "inputFormat", "format", "disablePast", "disableFuture", "error", "readOnly", "fullWidth", "disabled", "helperText", "onChange", "onBlur"],
23
- _excluded3 = ["formik", "id", "className", "sx", "label", "name", "required", "value", "minDate", "maxDate", "inputFormat", "format", "disablePast", "disableFuture", "error", "readOnly", "fullWidth", "disabled", "helperText", "onChange", "onBlur"];
24
- function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
23
+ _excluded3 = ["formik", "id", "className", "sx", "label", "name", "required", "value", "minDate", "maxDate", "inputFormat", "format", "disablePast", "disableFuture", "error", "readOnly", "fullWidth", "disabled", "helperText", "onChange", "onBlur"]; // Helper function to get palette from theme or fallback to appearance
25
24
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
26
- function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
27
- function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
28
25
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
29
26
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
30
27
  function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
31
28
  function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
32
29
  function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
33
- const StyledDateMuiTextField = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_StyledMuiTextField.default, _objectSpread({
34
- ref: ref
35
- }, props))))(() => {
30
+ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
31
+ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
32
+ const getPalette = theme => {
33
+ // Check if theme has our custom palette properties
34
+ if (theme && theme.palette && theme.palette.gray && theme.palette.gray.darker) {
35
+ // Theme has our custom structure, now normalize it
36
+ return {
37
+ primary: theme.palette.primary.main || theme.palette.primary,
38
+ secondary: theme.palette.secondary.main || theme.palette.secondary,
39
+ error: theme.palette.error ? theme.palette.error.main || theme.palette.error : _apperance.palette.error,
40
+ warning: theme.palette.warning ? theme.palette.warning.main || theme.palette.warning : _apperance.palette.warning,
41
+ success: theme.palette.success ? theme.palette.success.main || theme.palette.success : _apperance.palette.success,
42
+ info: theme.palette.info ? theme.palette.info.main || theme.palette.info : _apperance.palette.info,
43
+ white: theme.palette.white || _apperance.palette.white,
44
+ dark: theme.palette.dark || _apperance.palette.dark,
45
+ gray: theme.palette.gray,
46
+ blue: theme.palette.blue || _apperance.palette.blue,
47
+ background: theme.palette.background || _apperance.palette.background,
48
+ border: theme.palette.border || _apperance.palette.border,
49
+ shadow: theme.palette.shadow || _apperance.palette.shadow
50
+ };
51
+ }
52
+ // Check if theme object itself has gray (root level)
53
+ if (theme && theme.gray && theme.gray.darker) {
54
+ return {
55
+ primary: theme.primary,
56
+ secondary: theme.secondary,
57
+ error: theme.error || _apperance.palette.error,
58
+ warning: theme.warning || _apperance.palette.warning,
59
+ success: theme.success || _apperance.palette.success,
60
+ info: theme.info || _apperance.palette.info,
61
+ white: theme.white || _apperance.palette.white,
62
+ dark: theme.dark || _apperance.palette.dark,
63
+ gray: theme.gray,
64
+ blue: theme.blue || _apperance.palette.blue,
65
+ background: theme.background || _apperance.palette.background,
66
+ border: theme.border || _apperance.palette.border,
67
+ shadow: theme.shadow || _apperance.palette.shadow
68
+ };
69
+ }
70
+ return _apperance.palette;
71
+ };
72
+
73
+ // Helper function to get DateTimeField styles from theme
74
+ const getDateTimeFieldStyles = theme => {
75
+ if (theme && theme.components && theme.components.PuiDateTimeField) {
76
+ return theme.components.PuiDateTimeField;
77
+ }
78
+ return {
79
+ inputRoot: {
80
+ backgroundColor: _apperance.palette.white,
81
+ border: "2px solid ".concat(_apperance.palette.gray.dark),
82
+ borderRadius: "5px",
83
+ height: "auto",
84
+ lineHeight: "1"
85
+ },
86
+ label: {
87
+ color: _apperance.palette.gray.darker,
88
+ marginBottom: "4px",
89
+ fontSize: "0.8rem"
90
+ },
91
+ disabled: {
92
+ backgroundColor: "#f5f5f5",
93
+ border: "1px solid #cecdd3",
94
+ labelColor: "#97969b"
95
+ }
96
+ };
97
+ };
98
+ const getTextFieldStyles = (theme, required) => {
99
+ var _themePalette$backgro, _palette$background, _dateTimeFieldStyles$, _themePalette$backgro2, _palette$background2, _dateTimeFieldStyles$2, _dateTimeFieldStyles$3;
100
+ const themePalette = getPalette(theme);
101
+ const dateTimeFieldStyles = getDateTimeFieldStyles(theme);
36
102
  return {
37
103
  "&.MuiFormControl-root": {
38
- display: "block",
39
- "& .MuiInputAdornment-root .MuiButtonBase-root": {
40
- padding: "6px",
41
- marginRight: "-8px",
42
- "& .MuiSvgIcon-root": {
43
- width: "16px",
44
- height: "16px"
104
+ "&.required .MuiInputBase-root": {
105
+ backgroundColor: required ? ((_themePalette$backgro = themePalette.background) === null || _themePalette$backgro === void 0 ? void 0 : _themePalette$backgro.required) || ((_palette$background = _apperance.palette.background) === null || _palette$background === void 0 ? void 0 : _palette$background.required) : dateTimeFieldStyles.inputRoot.backgroundColor
106
+ },
107
+ "& .MuiFormLabel-root": {
108
+ zIndex: 0,
109
+ lineSpacing: "-0.03em",
110
+ position: "initial",
111
+ transform: "none",
112
+ fontSize: "".concat(dateTimeFieldStyles.label.fontSize, " !important"),
113
+ fontWeight: "600",
114
+ marginBottom: "".concat(dateTimeFieldStyles.label.marginBottom, " !important"),
115
+ color: "".concat(dateTimeFieldStyles.label.color, " !important"),
116
+ "&.Mui-focused ": {
117
+ color: "".concat(themePalette.primary, " !important")
118
+ },
119
+ "&.Mui-disabled": {
120
+ color: "".concat(((_dateTimeFieldStyles$ = dateTimeFieldStyles.disabled) === null || _dateTimeFieldStyles$ === void 0 ? void 0 : _dateTimeFieldStyles$.labelColor) || "#97969b", " !important")
121
+ },
122
+ "&.Mui-error": {
123
+ color: "".concat(themePalette.error, " !important")
45
124
  }
125
+ },
126
+ "& .MuiInputBase-root": {
127
+ backgroundColor: "".concat(dateTimeFieldStyles.inputRoot.backgroundColor, " !important"),
128
+ border: "".concat(dateTimeFieldStyles.inputRoot.border, " !important"),
129
+ borderRadius: "".concat(dateTimeFieldStyles.inputRoot.borderRadius, " !important"),
130
+ height: "".concat(dateTimeFieldStyles.inputRoot.height, " !important"),
131
+ "&.MuiInputBase-multiline": {
132
+ padding: "8px 0",
133
+ height: "auto !important"
134
+ },
135
+ "&.Mui-focused ": {
136
+ border: "2px solid ".concat(themePalette.primary, " !important")
137
+ },
138
+ "&.Mui-error ": {
139
+ border: "2px solid ".concat(themePalette.error, " !important"),
140
+ backgroundColor: "".concat(((_themePalette$backgro2 = themePalette.background) === null || _themePalette$backgro2 === void 0 ? void 0 : _themePalette$backgro2.error) || ((_palette$background2 = _apperance.palette.background) === null || _palette$background2 === void 0 ? void 0 : _palette$background2.error), " !important")
141
+ },
142
+ "&.Mui-disabled ": {
143
+ backgroundColor: "".concat(((_dateTimeFieldStyles$2 = dateTimeFieldStyles.disabled) === null || _dateTimeFieldStyles$2 === void 0 ? void 0 : _dateTimeFieldStyles$2.backgroundColor) || "#f5f5f5", " !important"),
144
+ border: "".concat(((_dateTimeFieldStyles$3 = dateTimeFieldStyles.disabled) === null || _dateTimeFieldStyles$3 === void 0 ? void 0 : _dateTimeFieldStyles$3.border) || "1px solid #cecdd3", " !important"),
145
+ borderRadius: "".concat(dateTimeFieldStyles.inputRoot.borderRadius, " !important"),
146
+ "& input": {
147
+ color: "".concat(themePalette.gray.darker),
148
+ WebkitTextFillColor: "".concat(themePalette.gray.darker)
149
+ }
150
+ },
151
+ "& .MuiInputBase-input": {
152
+ lineHeight: "".concat(dateTimeFieldStyles.inputRoot.lineHeight, " !important"),
153
+ padding: "1px 6px",
154
+ fontSize: "0.7rem"
155
+ }
156
+ },
157
+ "& .MuiFormHelperText-root": {
158
+ fontWeight: "bold",
159
+ fontSize: ".7rem",
160
+ color: "red"
161
+ },
162
+ "& fieldset": {
163
+ display: "none"
46
164
  }
47
165
  }
48
166
  };
49
- });
50
- const PuiStandardDateTimeField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
167
+ };
168
+ const PuiStandardDateTimeField = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
51
169
  let {
52
170
  id,
53
171
  className,
@@ -72,52 +190,64 @@ const PuiStandardDateTimeField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
72
190
  } = _ref,
73
191
  rest = _objectWithoutProperties(_ref, _excluded);
74
192
  const handleChange = value => {
75
- const formattedValue = format ? value.format(format) : value.toISOString();
76
- onChange(formattedValue);
193
+ if (value) {
194
+ const formattedValue = format ? value.format(format) : value.toISOString();
195
+ onChange(formattedValue);
196
+ } else {
197
+ onChange(null);
198
+ }
77
199
  };
78
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateTimePicker.DateTimePicker, _objectSpread({
79
- ref: ref,
80
- sx: sx,
81
- ampm: false,
82
- label: label,
83
- inputFormat: inputFormat,
84
- value: value,
85
- onChange: handleChange,
86
- disablePast: disablePast,
87
- disableFuture: disableFuture,
88
- disabled: disabled,
89
- maxDate: maxDate,
90
- minDate: minDate,
91
- readOnly: readOnly,
92
- viewRenderers: {
93
- hours: null,
94
- minutes: null,
95
- seconds: null
96
- },
97
- PopperProps: {
98
- sx: {
99
- "& .MuiButtonBase-root.Mui-selected, & .MuiButtonBase-root.Mui-selected:focus, & .MuiButtonBase-root.Mui-selected:hover": {
100
- backgroundColor: _apperance.palette.primary
200
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDatePickers.LocalizationProvider, {
201
+ dateAdapter: _AdapterDayjs.AdapterDayjs,
202
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateTimePicker.DateTimePicker, _objectSpread({
203
+ ref: ref,
204
+ sx: sx,
205
+ label: label,
206
+ inputFormat: inputFormat,
207
+ value: value,
208
+ onChange: handleChange,
209
+ disablePast: disablePast,
210
+ disableFuture: disableFuture,
211
+ disabled: disabled,
212
+ maxDate: maxDate,
213
+ minDate: minDate,
214
+ readOnly: readOnly,
215
+ slotProps: {
216
+ textField: {
217
+ name,
218
+ sx: theme => getTextFieldStyles(theme, required),
219
+ fullWidth,
220
+ required,
221
+ error,
222
+ helperText,
223
+ className: required ? "required" : ""
224
+ },
225
+ popper: {
226
+ sx: theme => {
227
+ const themePalette = getPalette(theme);
228
+ return {
229
+ "& .MuiPaper-root": {
230
+ boxShadow: "none !important",
231
+ border: "1px solid #e0e0e0",
232
+ backgroundColor: "white"
233
+ },
234
+ "& .MuiPickersDay-root.Mui-selected": {
235
+ backgroundColor: "".concat(themePalette.primary, " !important")
236
+ },
237
+ "& .Mui-selected": {
238
+ backgroundColor: "".concat(themePalette.primary, " !important")
239
+ },
240
+ "& .MuiClockNumber-root.Mui-selected": {
241
+ backgroundColor: "".concat(themePalette.primary, " !important")
242
+ }
243
+ };
244
+ }
101
245
  }
102
246
  }
103
- },
104
- renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledDateMuiTextField, _objectSpread(_objectSpread({
105
- id: id,
106
- className: className,
107
- name: name,
108
- required: required,
109
- fullWidth: fullWidth,
110
- onBlur: onBlur,
111
- helperText: helperText
112
- }, params), {}, {
113
- error: params.error || error,
114
- inputProps: {
115
- name
116
- }
117
- }))
118
- }, rest));
247
+ }, rest))
248
+ });
119
249
  });
120
- const PuiFormikDateTimeField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
250
+ const PuiFormikDateTimeField = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
121
251
  let {
122
252
  id,
123
253
  className,
@@ -143,7 +273,7 @@ const PuiFormikDateTimeField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
143
273
  rest = _objectWithoutProperties(_ref2, _excluded2);
144
274
  const [field, meta] = (0, _formik.useField)(name);
145
275
  const formikContext = (0, _formik.useFormikContext)();
146
- const [hasError, setHasError] = React.useState(false);
276
+ const [hasError, setHasError] = _react.default.useState(false);
147
277
  const handleChange = value => {
148
278
  if (value) {
149
279
  formikContext.setFieldValue(name, value);
@@ -157,10 +287,10 @@ const PuiFormikDateTimeField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
157
287
  onBlur(event);
158
288
  field.onBlur(event);
159
289
  };
160
- React.useEffect(() => {
290
+ _react.default.useEffect(() => {
161
291
  setHasError(Boolean(meta) && Boolean(meta.touched) && Boolean(meta.error));
162
292
  }, [meta]);
163
- React.useEffect(() => {
293
+ _react.default.useEffect(() => {
164
294
  if (Boolean(value)) {
165
295
  formikContext.setFieldValue(name, value);
166
296
  }
@@ -174,7 +304,7 @@ const PuiFormikDateTimeField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
174
304
  label: label,
175
305
  name: name,
176
306
  required: required,
177
- value: Boolean(field.value) ? format ? _moment.default.utc(field.value, format) : _moment.default.utc(field.value) : null,
307
+ value: Boolean(field.value) ? format ? (0, _moment.default)(field.value, format) : (0, _moment.default)(field.value) : null,
178
308
  format: format,
179
309
  minDate: minDate,
180
310
  inputFormat: inputFormat,
@@ -189,7 +319,7 @@ const PuiFormikDateTimeField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
189
319
  onBlur: handleBlur
190
320
  }, rest));
191
321
  });
192
- const PuiDateTimeField = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
322
+ const PuiDateTimeField = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
193
323
  let {
194
324
  formik,
195
325
  id,
@@ -214,7 +344,7 @@ const PuiDateTimeField = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
214
344
  onBlur
215
345
  } = _ref3,
216
346
  rest = _objectWithoutProperties(_ref3, _excluded3);
217
- return /*#__PURE__*/React.createElement(formik ? PuiFormikDateTimeField : PuiStandardDateTimeField, _objectSpread({
347
+ return /*#__PURE__*/_react.default.createElement(formik ? PuiFormikDateTimeField : PuiStandardDateTimeField, _objectSpread({
218
348
  ref,
219
349
  id,
220
350
  className,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@portnet/ui",
3
- "version": "5.0.0",
3
+ "version": "5.0.1",
4
4
  "description": "Portnet UI",
5
5
  "keywords": [
6
6
  "react",
@@ -25,7 +25,8 @@
25
25
  "@testing-library/jest-dom": "^5.16.5",
26
26
  "@testing-library/react": "^13.4.0",
27
27
  "@testing-library/user-event": "^13.5.0",
28
- "axios": "^0.27.2",
28
+ "axios": "^1.2.2",
29
+ "dayjs": "^1.11.19",
29
30
  "formik": "^2.2.9",
30
31
  "lodash": "^4.17.21",
31
32
  "moment": "^2.29.4",
@@ -88,8 +89,6 @@
88
89
  "@storybook/react": "^7.6.4",
89
90
  "@storybook/react-webpack5": "^7.6.4",
90
91
  "@storybook/testing-library": "^0.2.2",
91
- "ajv": "^8.17.1",
92
- "ajv-keywords": "^5.1.0",
93
92
  "cross-env": "^7.0.3",
94
93
  "husky": "^4.3.8",
95
94
  "prop-types": "^15.8.1",