@portnet/ui 5.0.9 → 5.0.11

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.
Files changed (8) hide show
  1. package/dist/components/buttons/PuiButton.js +12 -16
  2. package/dist/components/common/StyledMuiTextField.js +22 -37
  3. package/dist/components/inputs/PuiSelect.js +23 -37
  4. package/dist/components/others/PuiSection.js +67 -35
  5. package/dist/components/table/PuiTable.js +132 -10
  6. package/dist/components/typography/PuiMainTitle.js +46 -78
  7. package/dist/hooks/useAxios.js +3 -6
  8. package/package.json +5 -8
package/dist/components/buttons/PuiButton.js CHANGED
@@ -71,29 +71,25 @@ const getButtonStyles = theme => {
71
71
  if (theme && theme.components && theme.components.PuiButton) {
72
72
  return theme.components.PuiButton;
73
73
  }
74
- return {
75
- height: "25px",
76
- borderRadius: "4px",
77
- borderWidth: "2px",
78
- fontFamily: "inherit",
79
- fontWeight: "500",
80
- tertiaryBorderColor: _apperance.palette.gray.dark,
81
- boxShadow: "0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)"
82
- };
74
+ return {};
83
75
  };
84
76
  const BaseMuiButton = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_StyledMuiButton.default, _objectSpread({
85
77
  ref: ref
86
78
  }, props))))(props => {
87
79
  const buttonStyles = getButtonStyles(props.theme);
88
80
  return {
89
- "&.MuiButton-root": {
90
- height: buttonStyles.height || "37px",
91
- borderRadius: buttonStyles.borderRadius || "10px",
92
- fontFamily: buttonStyles.fontFamily || "inherit",
93
- fontWeight: buttonStyles.fontWeight || "500",
94
- boxShadow: buttonStyles.boxShadow !== undefined && buttonStyles.boxShadow !== "none" ? buttonStyles.boxShadow : buttonStyles.boxShadow === "none" ? "none" : "0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)",
81
+ "&.MuiButton-root": _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, buttonStyles.height && {
82
+ height: buttonStyles.height
83
+ }), buttonStyles.borderRadius && {
84
+ borderRadius: buttonStyles.borderRadius
85
+ }), buttonStyles.fontFamily && {
86
+ fontFamily: buttonStyles.fontFamily
87
+ }), buttonStyles.fontWeight && {
88
+ fontWeight: buttonStyles.fontWeight
89
+ }), {}, {
90
+ boxShadow: buttonStyles.boxShadow !== undefined ? buttonStyles.boxShadow : "0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)",
95
91
  textTransform: "none"
96
- }
92
+ })
97
93
  };
98
94
  });
99
95
  const PrimaryButton = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseMuiButton, _objectSpread({
package/dist/components/common/StyledMuiTextField.js CHANGED
@@ -73,26 +73,7 @@ const getTextFieldStyles = theme => {
73
73
  if (theme && theme.components && theme.components.PuiTextField) {
74
74
  return theme.components.PuiTextField;
75
75
  }
76
- return {
77
- inputRoot: {
78
- backgroundColor: _apperance.palette.white,
79
- border: "2px solid ".concat(_apperance.palette.gray.dark),
80
- borderRadius: "5px",
81
- height: "auto",
82
- lineHeight: "1"
83
- },
84
- label: {
85
- color: _apperance.palette.gray.darker,
86
- marginBottom: "4px",
87
- fontSize: "0.8rem"
88
- },
89
- disabled: {
90
- backgroundColor: "#f5f5f5",
91
- // Light grey background for disabled
92
- border: "1px solid #cecdd3",
93
- labelColor: "#97969b"
94
- }
95
- };
76
+ return {};
96
77
  };
97
78
  const StyledMuiTextField = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((_ref, ref) => {
98
79
  let {
@@ -123,7 +104,7 @@ const StyledMuiTextField = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((_r
123
104
  ref: ref
124
105
  }, rest));
125
106
  }))(props => {
126
- var _themePalette$backgro, _textFieldStyles$disa, _themePalette$backgro2, _textFieldStyles$disa2, _textFieldStyles$disa3;
107
+ var _themePalette$backgro, _textFieldStyles$labe, _textFieldStyles$labe2, _textFieldStyles$labe3, _textFieldStyles$disa, _textFieldStyles$inpu, _textFieldStyles$inpu2, _textFieldStyles$inpu3, _textFieldStyles$inpu4, _themePalette$backgro2, _textFieldStyles$disa2, _textFieldStyles$disa3, _textFieldStyles$inpu5, _textFieldStyles$inpu6;
127
108
  const themePalette = getPalette(props.theme);
128
109
  const textFieldStyles = getTextFieldStyles(props.theme);
129
110
  return {
@@ -136,25 +117,27 @@ const StyledMuiTextField = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((_r
136
117
  lineSpacing: "-0.03em",
137
118
  position: "initial",
138
119
  transform: "none",
139
- fontSize: "".concat(textFieldStyles.label.fontSize, " !important"),
120
+ fontSize: ((_textFieldStyles$labe = textFieldStyles.label) === null || _textFieldStyles$labe === void 0 ? void 0 : _textFieldStyles$labe.fontSize) || "0.8rem",
140
121
  fontWeight: "600",
141
- marginBottom: "".concat(textFieldStyles.label.marginBottom, " !important"),
142
- color: "".concat(textFieldStyles.label.color, " !important"),
122
+ marginBottom: ((_textFieldStyles$labe2 = textFieldStyles.label) === null || _textFieldStyles$labe2 === void 0 ? void 0 : _textFieldStyles$labe2.marginBottom) || "4px",
123
+ color: ((_textFieldStyles$labe3 = textFieldStyles.label) === null || _textFieldStyles$labe3 === void 0 ? void 0 : _textFieldStyles$labe3.color) || _apperance.palette.gray.darker,
143
124
  "&.Mui-focused ": {
144
125
  color: "".concat(themePalette.primary, " !important")
145
126
  },
146
127
  "&.Mui-disabled": {
147
- color: "".concat(((_textFieldStyles$disa = textFieldStyles.disabled) === null || _textFieldStyles$disa === void 0 ? void 0 : _textFieldStyles$disa.labelColor) || "#97969b", " !important")
128
+ color: "".concat(((_textFieldStyles$disa = textFieldStyles.disabled) === null || _textFieldStyles$disa === void 0 ? void 0 : _textFieldStyles$disa.labelColor) || _apperance.palette.gray.darker, " !important")
148
129
  },
149
130
  "&.Mui-error": {
150
131
  color: "".concat(themePalette.error, " !important")
151
132
  }
152
133
  },
153
- "& .MuiInputBase-root": {
154
- backgroundColor: "".concat(textFieldStyles.inputRoot.backgroundColor, " !important"),
155
- border: "".concat(textFieldStyles.inputRoot.border, " !important"),
156
- borderRadius: "".concat(textFieldStyles.inputRoot.borderRadius, " !important"),
157
- height: "".concat(textFieldStyles.inputRoot.height, " !important"),
134
+ "& .MuiInputBase-root": _objectSpread(_objectSpread({
135
+ backgroundColor: "".concat(((_textFieldStyles$inpu = textFieldStyles.inputRoot) === null || _textFieldStyles$inpu === void 0 ? void 0 : _textFieldStyles$inpu.backgroundColor) || _apperance.palette.white, " !important"),
136
+ border: ((_textFieldStyles$inpu2 = textFieldStyles.inputRoot) === null || _textFieldStyles$inpu2 === void 0 ? void 0 : _textFieldStyles$inpu2.border) || "2px solid ".concat(_apperance.palette.gray.dark),
137
+ borderRadius: ((_textFieldStyles$inpu3 = textFieldStyles.inputRoot) === null || _textFieldStyles$inpu3 === void 0 ? void 0 : _textFieldStyles$inpu3.borderRadius) || "5px"
138
+ }, ((_textFieldStyles$inpu4 = textFieldStyles.inputRoot) === null || _textFieldStyles$inpu4 === void 0 ? void 0 : _textFieldStyles$inpu4.height) && {
139
+ height: textFieldStyles.inputRoot.height
140
+ }), {}, {
158
141
  "&.MuiInputBase-multiline": {
159
142
  padding: "8px 0",
160
143
  height: "auto !important"
@@ -166,21 +149,23 @@ const StyledMuiTextField = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((_r
166
149
  border: "2px solid ".concat(themePalette.error, " !important"),
167
150
  backgroundColor: "".concat(((_themePalette$backgro2 = themePalette.background) === null || _themePalette$backgro2 === void 0 ? void 0 : _themePalette$backgro2.error) || _apperance.palette.background.error, " !important")
168
151
  },
169
- "&.Mui-disabled ": {
170
- backgroundColor: "".concat(((_textFieldStyles$disa2 = textFieldStyles.disabled) === null || _textFieldStyles$disa2 === void 0 ? void 0 : _textFieldStyles$disa2.backgroundColor) || "#f5f5f5", " !important"),
171
- border: "".concat(((_textFieldStyles$disa3 = textFieldStyles.disabled) === null || _textFieldStyles$disa3 === void 0 ? void 0 : _textFieldStyles$disa3.border) || "1px solid #cecdd3", " !important"),
172
- borderRadius: "".concat(textFieldStyles.inputRoot.borderRadius, " !important"),
152
+ "&.Mui-disabled ": _objectSpread(_objectSpread({
153
+ backgroundColor: ((_textFieldStyles$disa2 = textFieldStyles.disabled) === null || _textFieldStyles$disa2 === void 0 ? void 0 : _textFieldStyles$disa2.backgroundColor) || _apperance.palette.secondary
154
+ }, ((_textFieldStyles$disa3 = textFieldStyles.disabled) === null || _textFieldStyles$disa3 === void 0 ? void 0 : _textFieldStyles$disa3.border) && {
155
+ border: textFieldStyles.disabled.border
156
+ }), {}, {
157
+ borderRadius: ((_textFieldStyles$inpu5 = textFieldStyles.inputRoot) === null || _textFieldStyles$inpu5 === void 0 ? void 0 : _textFieldStyles$inpu5.borderRadius) || "5px",
173
158
  "& input": {
174
159
  color: "".concat(themePalette.gray.darker),
175
160
  WebkitTextFillColor: "".concat(themePalette.gray.darker)
176
161
  }
177
- },
162
+ }),
178
163
  "& .MuiInputBase-input": {
179
- lineHeight: "".concat(textFieldStyles.inputRoot.lineHeight, " !important"),
164
+ lineHeight: ((_textFieldStyles$inpu6 = textFieldStyles.inputRoot) === null || _textFieldStyles$inpu6 === void 0 ? void 0 : _textFieldStyles$inpu6.lineHeight) || "1",
180
165
  padding: "1px 6px",
181
166
  fontSize: "0.7rem"
182
167
  }
183
- },
168
+ }),
184
169
  "& .MuiFormHelperText-root": {
185
170
  fontWeight: "bold",
186
171
  fontSize: ".7rem",
package/dist/components/inputs/PuiSelect.js CHANGED
@@ -79,38 +79,20 @@ const getSelectStyles = theme => {
79
79
  if (theme && theme.components && theme.components.PuiSelect) {
80
80
  return theme.components.PuiSelect;
81
81
  }
82
- return {
83
- inputRoot: {
84
- backgroundColor: "#fafafa",
85
- border: "1px solid #cecdd3",
86
- borderRadius: "5px",
87
- height: "33px",
88
- lineHeight: "2em"
89
- },
90
- label: {
91
- color: "#97969b",
92
- marginBottom: "13px",
93
- fontSize: "0.9rem"
94
- },
95
- disabled: {
96
- backgroundColor: "#f5f5f5",
97
- border: "1px solid #cecdd3",
98
- labelColor: "#97969b"
99
- }
100
- };
82
+ return {};
101
83
  };
102
84
  const StyledMuiFormControl = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControl, _objectSpread(_objectSpread({}, props), {}, {
103
85
  ref: ref
104
86
  }))))(props => {
105
- var _themePalette$backgro, _selectStyles$disable, _themePalette$backgro2, _selectStyles$disable2, _selectStyles$disable3;
87
+ var _selectStyles$inputRo, _selectStyles$inputRo2, _themePalette$backgro, _selectStyles$label, _selectStyles$label2, _selectStyles$label3, _selectStyles$disable, _selectStyles$inputRo3, _selectStyles$inputRo4, _selectStyles$inputRo5, _selectStyles$inputRo6, _themePalette$backgro2, _selectStyles$disable2, _selectStyles$disable3, _selectStyles$inputRo7;
106
88
  const themePalette = getPalette(props.theme);
107
89
  const selectStyles = getSelectStyles(props.theme);
108
90
  return {
109
91
  "&.MuiFormControl-root": {
110
92
  "& .MuiSelect-select": {
111
93
  minHeight: "auto",
112
- height: selectStyles.inputRoot.height || "1.4375em",
113
- lineHeight: selectStyles.inputRoot.lineHeight || "1",
94
+ height: ((_selectStyles$inputRo = selectStyles.inputRoot) === null || _selectStyles$inputRo === void 0 ? void 0 : _selectStyles$inputRo.height) || "1.4375em",
95
+ lineHeight: ((_selectStyles$inputRo2 = selectStyles.inputRoot) === null || _selectStyles$inputRo2 === void 0 ? void 0 : _selectStyles$inputRo2.lineHeight) || "1",
114
96
  display: "flex",
115
97
  alignItems: "center"
116
98
  },
@@ -122,26 +104,28 @@ const StyledMuiFormControl = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((
122
104
  lineSpacing: "-0.03em",
123
105
  position: "initial",
124
106
  transform: "none",
125
- fontSize: "".concat(selectStyles.label.fontSize, " !important"),
107
+ fontSize: ((_selectStyles$label = selectStyles.label) === null || _selectStyles$label === void 0 ? void 0 : _selectStyles$label.fontSize) || "0.8rem",
126
108
  fontWeight: "600",
127
- marginBottom: "".concat(selectStyles.label.marginBottom, " !important"),
128
- color: "".concat(selectStyles.label.color, " !important"),
109
+ marginBottom: ((_selectStyles$label2 = selectStyles.label) === null || _selectStyles$label2 === void 0 ? void 0 : _selectStyles$label2.marginBottom) || "4px",
110
+ color: ((_selectStyles$label3 = selectStyles.label) === null || _selectStyles$label3 === void 0 ? void 0 : _selectStyles$label3.color) || _apperance.palette.gray.darker,
129
111
  "&.Mui-focused ": {
130
112
  lineHeight: "1.4375em",
131
113
  color: "".concat(themePalette.primary, " !important")
132
114
  },
133
115
  "&.Mui-disabled": {
134
- color: "".concat(((_selectStyles$disable = selectStyles.disabled) === null || _selectStyles$disable === void 0 ? void 0 : _selectStyles$disable.labelColor) || "#97969b", " !important")
116
+ color: "".concat(((_selectStyles$disable = selectStyles.disabled) === null || _selectStyles$disable === void 0 ? void 0 : _selectStyles$disable.labelColor) || _apperance.palette.gray.darker, " !important")
135
117
  },
136
118
  "&.Mui-error": {
137
119
  color: "".concat(themePalette.error, " !important")
138
120
  }
139
121
  },
140
- "& .MuiInputBase-root": {
141
- backgroundColor: "".concat(selectStyles.inputRoot.backgroundColor, " !important"),
142
- border: "".concat(selectStyles.inputRoot.border, " !important"),
143
- borderRadius: "".concat(selectStyles.inputRoot.borderRadius, " !important"),
144
- height: selectStyles.inputRoot.height || "auto",
122
+ "& .MuiInputBase-root": _objectSpread(_objectSpread({
123
+ backgroundColor: "".concat(((_selectStyles$inputRo3 = selectStyles.inputRoot) === null || _selectStyles$inputRo3 === void 0 ? void 0 : _selectStyles$inputRo3.backgroundColor) || _apperance.palette.white, " !important"),
124
+ border: ((_selectStyles$inputRo4 = selectStyles.inputRoot) === null || _selectStyles$inputRo4 === void 0 ? void 0 : _selectStyles$inputRo4.border) || "2px solid ".concat(_apperance.palette.gray.dark),
125
+ borderRadius: ((_selectStyles$inputRo5 = selectStyles.inputRoot) === null || _selectStyles$inputRo5 === void 0 ? void 0 : _selectStyles$inputRo5.borderRadius) || "5px"
126
+ }, ((_selectStyles$inputRo6 = selectStyles.inputRoot) === null || _selectStyles$inputRo6 === void 0 ? void 0 : _selectStyles$inputRo6.height) && {
127
+ height: selectStyles.inputRoot.height
128
+ }), {}, {
145
129
  "&.Mui-focused ": {
146
130
  border: "2px solid ".concat(themePalette.primary, " !important")
147
131
  },
@@ -149,15 +133,17 @@ const StyledMuiFormControl = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((
149
133
  border: "2px solid ".concat(themePalette.error, " !important"),
150
134
  backgroundColor: "".concat(((_themePalette$backgro2 = themePalette.background) === null || _themePalette$backgro2 === void 0 ? void 0 : _themePalette$backgro2.error) || _apperance.palette.background.error, " !important")
151
135
  },
152
- "&.Mui-disabled ": {
153
- backgroundColor: "".concat(((_selectStyles$disable2 = selectStyles.disabled) === null || _selectStyles$disable2 === void 0 ? void 0 : _selectStyles$disable2.backgroundColor) || "#f5f5f5", " !important"),
154
- border: "".concat(((_selectStyles$disable3 = selectStyles.disabled) === null || _selectStyles$disable3 === void 0 ? void 0 : _selectStyles$disable3.border) || "1px solid #cecdd3", " !important"),
155
- borderRadius: "".concat(selectStyles.inputRoot.borderRadius, " !important"),
136
+ "&.Mui-disabled ": _objectSpread(_objectSpread({
137
+ backgroundColor: "".concat(((_selectStyles$disable2 = selectStyles.disabled) === null || _selectStyles$disable2 === void 0 ? void 0 : _selectStyles$disable2.backgroundColor) || _apperance.palette.secondary, " !important")
138
+ }, ((_selectStyles$disable3 = selectStyles.disabled) === null || _selectStyles$disable3 === void 0 ? void 0 : _selectStyles$disable3.border) && {
139
+ border: selectStyles.disabled.border
140
+ }), {}, {
141
+ borderRadius: ((_selectStyles$inputRo7 = selectStyles.inputRoot) === null || _selectStyles$inputRo7 === void 0 ? void 0 : _selectStyles$inputRo7.borderRadius) || "5px",
156
142
  "& .MuiSelect-select": {
157
143
  color: "".concat(themePalette.gray.darker),
158
144
  WebkitTextFillColor: "".concat(themePalette.gray.darker)
159
145
  }
160
- },
146
+ }),
161
147
  "& .MuiInputBase-input": {
162
148
  padding: "1px 6px",
163
149
  fontSize: "0.7rem"
@@ -165,7 +151,7 @@ const StyledMuiFormControl = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((
165
151
  "& .MuiSvgIcon-root": {
166
152
  marginRight: "2px"
167
153
  }
168
- },
154
+ }),
169
155
  "& .MuiFormHelperText-root": {
170
156
  fontWeight: "bold",
171
157
  fontSize: ".7rem",
package/dist/components/others/PuiSection.js CHANGED
@@ -68,37 +68,30 @@ const getPuiSectionStyles = theme => {
68
68
  if (theme && theme.components && theme.components.PuiSection) {
69
69
  return theme.components.PuiSection;
70
70
  }
71
- return {
72
- backgroundColor: _apperance.palette.gray.light,
73
- border: "2px solid ".concat(_apperance.palette.gray.dark),
74
- borderRadius: "5px",
75
- boxShadow: "0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)",
76
- titleColor: _apperance.palette.primary,
77
- titleFontFamily: "'Poppins', sans-serif",
78
- titleFontWeight: "400",
79
- titleFontSize: "1.1rem",
80
- titlePosition: "16px"
81
- };
71
+ return {};
82
72
  };
83
73
  const StyledMuiPaper = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, _objectSpread({
84
74
  ref: ref
85
75
  }, props))))(props => {
76
+ const themePalette = getPalette(props.theme);
86
77
  const sectionStyles = getPuiSectionStyles(props.theme);
87
78
  return {
88
- "&.MuiPaper-root": {
89
- backgroundColor: "".concat(sectionStyles.backgroundColor, " !important"),
90
- border: "".concat(sectionStyles.border, " !important"),
91
- borderRadius: "".concat(sectionStyles.borderRadius, " !important"),
92
- boxShadow: "".concat(sectionStyles.boxShadow, " !important"),
79
+ "&.MuiPaper-root": _objectSpread(_objectSpread({
80
+ backgroundColor: sectionStyles.backgroundColor || themePalette.gray.light,
81
+ border: sectionStyles.border || "2px solid ".concat(themePalette.gray.dark),
82
+ borderRadius: sectionStyles.borderRadius || "5px"
83
+ }, sectionStyles.boxShadow && {
84
+ boxShadow: sectionStyles.boxShadow
85
+ }), {}, {
93
86
  position: "relative"
94
- }
87
+ })
95
88
  };
96
89
  });
97
90
  const PuiSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
98
91
  let {
99
92
  id,
100
93
  className,
101
- sx,
94
+ sx: _sx,
102
95
  title,
103
96
  titleVariant,
104
97
  children
@@ -106,37 +99,76 @@ const PuiSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
106
99
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledMuiPaper, {
107
100
  id: id,
108
101
  className: className,
109
- sx: _objectSpread({
110
- paddingX: 3,
111
- paddingY: 2,
112
- paddingTop: title ? 6 : 2
113
- }, sx),
102
+ sx: theme => {
103
+ const sectionStyles = getPuiSectionStyles(theme);
104
+ const isInsideMode = sectionStyles.titlePosition !== undefined;
105
+ return _objectSpread({
106
+ paddingX: isInsideMode ? 3 : 2,
107
+ paddingY: isInsideMode ? 2 : 2,
108
+ paddingTop: isInsideMode && title ? 6 : 2
109
+ }, _sx);
110
+ },
114
111
  ref: ref,
115
112
  elevation: 1,
116
- children: [Boolean(title) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
113
+ children: [Boolean(title) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
117
114
  sx: theme => {
118
115
  const sectionStyles = getPuiSectionStyles(theme);
116
+ const isInsideMode = sectionStyles.titlePosition !== undefined;
117
+ if (isInsideMode) {
118
+ return {
119
+ position: "absolute",
120
+ top: sectionStyles.titlePosition || "16px",
121
+ left: "24px"
122
+ };
123
+ }
119
124
  return {
120
125
  position: "absolute",
121
- top: sectionStyles.titlePosition || "16px",
122
- left: "24px"
126
+ top: "-1px",
127
+ left: "30px",
128
+ transform: "translate(0,-50%)"
123
129
  };
124
130
  },
125
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
126
- variant: titleVariant,
131
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
127
132
  sx: theme => {
133
+ const themePalette = getPalette(theme);
128
134
  const sectionStyles = getPuiSectionStyles(theme);
135
+ const isInsideMode = sectionStyles.titlePosition !== undefined;
136
+ if (isInsideMode) {
137
+ return {
138
+ display: "none"
139
+ };
140
+ }
129
141
  return {
130
- textAlign: "left",
131
- fontWeight: sectionStyles.titleFontWeight || "400",
132
- fontFamily: sectionStyles.titleFontFamily || "'Poppins', sans-serif",
133
- color: sectionStyles.titleColor || "#202224",
134
- fontSize: sectionStyles.titleFontSize || "1.1rem",
135
- lineHeight: "1.5"
142
+ transform: "translateY(-50%)",
143
+ top: "50%",
144
+ zIndex: "-1",
145
+ position: "absolute",
146
+ width: "100%",
147
+ height: "4px",
148
+ backgroundColor: sectionStyles.backgroundColor || themePalette.gray.light
136
149
  };
150
+ }
151
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
152
+ variant: titleVariant,
153
+ sx: theme => {
154
+ const themePalette = getPalette(theme);
155
+ const sectionStyles = getPuiSectionStyles(theme);
156
+ const isInsideMode = sectionStyles.titlePosition !== undefined;
157
+ return _objectSpread(_objectSpread({
158
+ textAlign: isInsideMode ? "left" : "center",
159
+ paddingX: isInsideMode ? 0 : 1,
160
+ fontWeight: sectionStyles.titleFontWeight || "600",
161
+ lineSpacing: "-0.03em",
162
+ color: sectionStyles.titleColor || themePalette.primary,
163
+ fontSize: sectionStyles.titleFontSize || "1.2rem"
164
+ }, sectionStyles.titleFontFamily && {
165
+ fontFamily: sectionStyles.titleFontFamily
166
+ }), isInsideMode && {
167
+ lineHeight: "1.5"
168
+ });
137
169
  },
138
170
  children: title
139
- })
171
+ })]
140
172
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
141
173
  children: children
142
174
  })]
package/dist/components/table/PuiTable.js CHANGED
@@ -32,7 +32,10 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
32
32
  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; }
33
33
  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; }
34
34
  function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
35
- 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); } // Helper function to get palette from theme or fallback to appearance
35
+ 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); }
36
+ const isCustomTheme = theme => Boolean(theme && (theme.palette && theme.palette.gray && theme.palette.gray.darker || theme.gray && theme.gray.darker));
37
+
38
+ // Helper function to get palette from theme or fallback to appearance
36
39
  const getPalette = theme => {
37
40
  // Check if theme has our custom palette properties
38
41
  if (theme && theme.palette && theme.palette.gray && theme.palette.gray.darker) {
@@ -98,8 +101,126 @@ const StyledMuiTable = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props,
98
101
  ref: ref
99
102
  }, props))))(props => {
100
103
  var _themePalette$shadow, _palette$shadow;
101
- const themePalette = getPalette(props.theme);
102
- const tableStyles = getPuiTableStyles(props.theme);
104
+ const theme = props.theme;
105
+ const useTheme = isCustomTheme(theme);
106
+ if (!useTheme) {
107
+ return {
108
+ "&.MuiDataGrid-root": {
109
+ fontSize: ".8em",
110
+ "& .tableActionColumn": {
111
+ "& .MuiDataGrid-columnHeaderTitle": {
112
+ justifyContent: "center",
113
+ display: "flex"
114
+ },
115
+ "& .MuiDataGrid-columnHeaderTitleContainer": {
116
+ justifyContent: "center"
117
+ }
118
+ },
119
+ "&.elevate": {
120
+ boxShadow: "0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)"
121
+ },
122
+ backgroundColor: _apperance.palette.gray.light,
123
+ border: "2px solid ".concat(_apperance.palette.gray.dark),
124
+ "& .MuiPaginationItem-root": {
125
+ "&.Mui-selected": {
126
+ color: _apperance.palette.white,
127
+ backgroundColor: _apperance.palette.primary
128
+ }
129
+ },
130
+ "&.table-loading .MuiDataGrid-virtualScroller, &.table-loading .MuiDataGrid-footerContainer": {
131
+ filter: "blur(1px)",
132
+ "&::before": {
133
+ content: "''",
134
+ width: "100%",
135
+ height: "100%",
136
+ backgroundColor: _apperance.palette.white,
137
+ position: "absolute",
138
+ zIndex: 1,
139
+ display: "block",
140
+ opacity: 0
141
+ }
142
+ },
143
+ "&.table-stripped .MuiDataGrid-row": {
144
+ "&:nth-of-type(even)": {
145
+ backgroundColor: _apperance.palette.gray.light
146
+ }
147
+ },
148
+ "& .MuiLinearProgress-root": {
149
+ zIndex: 1,
150
+ backgroundColor: _apperance.palette.info,
151
+ "& .MuiLinearProgress-bar": {
152
+ backgroundColor: _apperance.palette.primary
153
+ }
154
+ },
155
+ "& .MuiDataGrid-columnHeaders": {
156
+ "& .MuiDataGrid-columnHeader": {
157
+ "& .MuiDataGrid-columnHeaderTitle": {
158
+ display: "flex",
159
+ alignItems: "center",
160
+ fontWeight: "600",
161
+ color: _apperance.palette.primary,
162
+ whiteSpace: "normal",
163
+ lineHeight: "1.2em"
164
+ },
165
+ "&:focus-within": {
166
+ outline: "none"
167
+ },
168
+ "&:last-of-type .MuiDataGrid-columnSeparator": {
169
+ display: "none"
170
+ }
171
+ },
172
+ "& .MuiDataGrid-columnSeparator": {
173
+ color: _apperance.palette.gray.dark
174
+ }
175
+ },
176
+ "& .MuiDataGrid-cell": {
177
+ paddingTop: "2px",
178
+ paddingBottom: "2px",
179
+ whiteSpace: "normal",
180
+ textOverflow: "ellipsis",
181
+ overflow: "hidden",
182
+ maxHeight: "none",
183
+ minWidth: 'maxWidth',
184
+ wordBreak: "break-word",
185
+ "&.tableAction": {
186
+ justifyContent: "center",
187
+ position: "relative",
188
+ overflow: "initial !important"
189
+ },
190
+ "&:focus-within": {
191
+ outline: "none"
192
+ }
193
+ },
194
+ "& .MuiDataGrid-row": {
195
+ maxHeight: "none !important",
196
+ "&:nth-of-type(odd)": {
197
+ backgroundColor: "#ffffff"
198
+ },
199
+ "&:nth-of-type(even)": {
200
+ backgroundColor: "#F6F9FF"
201
+ },
202
+ "&:hover": {
203
+ backgroundColor: "#95C7FC"
204
+ }
205
+ },
206
+ "& .MuiDataGrid-virtualScrollerContent": {
207
+ "& .MuiDataGrid-row": {
208
+ maxHeight: "none !important"
209
+ }
210
+ },
211
+ "& .MuiDataGrid-virtualScroller": {
212
+ backgroundColor: _apperance.palette.white
213
+ },
214
+ "& .MuiDataGrid-footerContainer": {
215
+ backgroundColor: _apperance.palette.white,
216
+ height: "28px",
217
+ minHeight: "28px"
218
+ }
219
+ }
220
+ };
221
+ }
222
+ const themePalette = getPalette(theme);
223
+ const tableStyles = getPuiTableStyles(theme);
103
224
  return {
104
225
  "&.MuiDataGrid-root": {
105
226
  fontSize: ".8em",
@@ -361,7 +482,7 @@ const PuiTable = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
361
482
  let {
362
483
  id,
363
484
  className,
364
- sx,
485
+ sx: _sx,
365
486
  elevate,
366
487
  rows,
367
488
  rowCount,
@@ -439,9 +560,9 @@ const PuiTable = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
439
560
  const {
440
561
  data
441
562
  } = params;
442
- return /*#__PURE__*/React.cloneElement(rowDetailPanel, {
563
+ return rowDetailPanel ? /*#__PURE__*/React.cloneElement(rowDetailPanel, {
443
564
  rowData: data
444
- });
565
+ }) : null;
445
566
  };
446
567
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
447
568
  style: {
@@ -455,15 +576,16 @@ const PuiTable = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
455
576
  LoadingOverlay: _material.LinearProgress,
456
577
  Pagination: TablePagination
457
578
  },
458
- className: "".concat(className, " ").concat(stripped ? "table-stripped" : "", " ").concat(loading ? "table-loading" : "", " ").concat(elevate ? "elevate" : ""),
459
- sx: {
579
+ className: "".concat(className || "", " ").concat(stripped ? "table-stripped" : "", " ").concat(loading ? "table-loading" : "", " ").concat(elevate ? "elevate" : ""),
580
+ sx: theme => _objectSpread({
460
581
  ["& .".concat(_xDataGrid.gridClasses.cell)]: {
461
- py: 1
582
+ py: isCustomTheme(theme) ? 1 : 0.5
462
583
  }
463
- },
584
+ }, _sx || {}),
464
585
  autoHeight: true,
465
586
  headerHeight: 60,
466
587
  footerHeight: 40,
588
+ rowHeight: 40,
467
589
  rows: rows,
468
590
  rowCount: rowCount,
469
591
  columns: appColumns,
package/dist/components/typography/PuiMainTitle.js CHANGED
@@ -64,38 +64,12 @@ const getPalette = theme => {
64
64
  return _apperance.palette;
65
65
  };
66
66
 
67
- // Helper function to get PuiMainTitle color from theme
68
- const getPuiMainTitleColor = theme => {
69
- if (theme && theme.components && theme.components.PuiMainTitle && theme.components.PuiMainTitle.color) {
70
- return theme.components.PuiMainTitle.color;
67
+ // Helper function to get PuiMainTitle styles from theme
68
+ const getPuiMainTitleStyles = theme => {
69
+ if (theme && theme.components && theme.components.PuiMainTitle) {
70
+ return theme.components.PuiMainTitle;
71
71
  }
72
- // Fall back to primary color
73
- const themePalette = getPalette(theme);
74
- return themePalette.primary;
75
- };
76
-
77
- // Helper function to get PuiMainTitle font family from theme
78
- const getPuiMainTitleFontFamily = theme => {
79
- if (theme && theme.components && theme.components.PuiMainTitle && theme.components.PuiMainTitle.fontFamily) {
80
- return theme.components.PuiMainTitle.fontFamily;
81
- }
82
- return "'Poppins', sans-serif";
83
- };
84
-
85
- // Helper function to get PuiMainTitle font weight from theme
86
- const getPuiMainTitleFontWeight = theme => {
87
- if (theme && theme.components && theme.components.PuiMainTitle && theme.components.PuiMainTitle.fontWeight) {
88
- return theme.components.PuiMainTitle.fontWeight;
89
- }
90
- return "bold";
91
- };
92
-
93
- // Helper function to check if icon should be shown
94
- const getPuiMainTitleShowIcon = theme => {
95
- if (theme && theme.components && theme.components.PuiMainTitle && typeof theme.components.PuiMainTitle.showIcon !== 'undefined') {
96
- return theme.components.PuiMainTitle.showIcon;
97
- }
98
- return true;
72
+ return {};
99
73
  };
100
74
  const PuiMainTitle = _ref => {
101
75
  let {
@@ -107,66 +81,60 @@ const PuiMainTitle = _ref => {
107
81
  title
108
82
  } = _ref;
109
83
  const theme = (0, _styles.useTheme)();
110
- const mainTitleColor = getPuiMainTitleColor(theme);
111
- const mainTitleFontFamily = getPuiMainTitleFontFamily(theme);
112
- const mainTitleFontWeight = getPuiMainTitleFontWeight(theme);
113
- const showIcon = getPuiMainTitleShowIcon(theme);
114
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
84
+ const themePalette = getPalette(theme);
85
+ const mainTitleStyles = getPuiMainTitleStyles(theme);
86
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
115
87
  id: id,
116
88
  className: className,
117
89
  sx: _objectSpread({
118
90
  display: "flex",
119
- flexDirection: "column",
120
- marginBottom: 3.5
91
+ alignItems: "center",
92
+ marginBottom: mainTitleStyles.color ? 3.5 : 2
121
93
  }, sx),
122
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
123
- sx: {
124
- display: "flex",
125
- alignItems: "center"
126
- },
127
- children: [Boolean(icon) && showIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
128
- children: /*#__PURE__*/React.cloneElement(icon, {
129
- sx: {
130
- marginRight: 1,
131
- fontSize: "2.4em",
132
- color: mainTitleColor
133
- }
94
+ children: [Boolean(icon) && mainTitleStyles.showIcon !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
95
+ children: /*#__PURE__*/React.cloneElement(icon, {
96
+ sx: {
97
+ marginRight: 1,
98
+ fontSize: "2.4em",
99
+ color: mainTitleStyles.color || themePalette.primary
100
+ }
101
+ })
102
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
103
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
104
+ sx: _objectSpread({
105
+ color: mainTitleStyles.color || themePalette.primary,
106
+ fontSize: "1.8rem",
107
+ fontWeight: mainTitleStyles.fontWeight || "bold"
108
+ }, mainTitleStyles.fontFamily && {
109
+ fontFamily: mainTitleStyles.fontFamily,
110
+ marginBottom: 0.5
111
+ }),
112
+ variant: "h1",
113
+ children: title
114
+ }), Boolean(trace) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
115
+ sx: _objectSpread({
116
+ color: mainTitleStyles.color || themePalette.primary,
117
+ fontSize: ".8rem",
118
+ fontWeight: mainTitleStyles.fontWeight || "bold"
119
+ }, mainTitleStyles.fontFamily && {
120
+ fontFamily: mainTitleStyles.fontFamily
121
+ }),
122
+ variant: "h2",
123
+ children: trace.map((element, index) => {
124
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
125
+ component: "span",
126
+ children: "".concat(element).concat(index + 1 !== trace.length ? " > " : "")
127
+ }, index);
134
128
  })
135
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
136
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
137
- sx: {
138
- color: mainTitleColor,
139
- fontSize: "1.8rem",
140
- fontWeight: mainTitleFontWeight,
141
- fontFamily: mainTitleFontFamily,
142
- marginBottom: 0.5
143
- },
144
- variant: "h1",
145
- children: title
146
- }), Boolean(trace) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
147
- sx: {
148
- color: mainTitleColor,
149
- fontSize: ".8rem",
150
- fontWeight: mainTitleFontWeight,
151
- fontFamily: mainTitleFontFamily
152
- },
153
- variant: "h2",
154
- children: trace.map((element, index) => {
155
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
156
- component: "span",
157
- children: "".concat(element).concat(index + 1 !== trace.length ? " > " : "")
158
- }, index);
159
- })
160
- })]
161
129
  })]
162
- })
130
+ })]
163
131
  });
164
132
  };
165
133
  PuiMainTitle.propTypes = {
166
134
  id: _propTypes.default.string,
167
135
  className: _propTypes.default.string,
168
136
  sx: _propTypes.default.object,
169
- icon: _propTypes.default.element,
137
+ icon: _propTypes.default.element.isRequired,
170
138
  trace: _propTypes.default.arrayOf(_propTypes.default.string),
171
139
  title: _propTypes.default.string.isRequired
172
140
  };
package/dist/hooks/useAxios.js CHANGED
@@ -1,18 +1,15 @@
1
1
  "use strict";
2
2
 
3
- require("core-js/modules/es.weak-map.js");
4
- require("core-js/modules/web.dom-collections.iterator.js");
5
3
  Object.defineProperty(exports, "__esModule", {
6
4
  value: true
7
5
  });
8
6
  exports.default = void 0;
9
- var axiosImport = _interopRequireWildcard(require("axios"));
10
- 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); }
11
- const axios = axiosImport.default || axiosImport;
7
+ var _axios = _interopRequireDefault(require("axios"));
8
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
12
9
  const useAxios = function useAxios(token) {
13
10
  let secret = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
14
11
  let baseURL = arguments.length > 2 ? arguments[2] : undefined;
15
- const axiosInstance = axios.create({
12
+ const axiosInstance = _axios.default.create({
16
13
  baseURL: baseURL,
17
14
  headers: {
18
15
  Authorization: secret ? token : "Bearer ".concat(token)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@portnet/ui",
3
- "version": "5.0.9",
3
+ "version": "5.0.11",
4
4
  "description": "Portnet UI",
5
5
  "keywords": [
6
6
  "react",
@@ -25,9 +25,12 @@
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": "^1.13.2",
28
29
  "formik": "^2.2.9",
29
30
  "lodash": "^4.17.21",
30
- "moment": "^2.29.4",
31
+ "moment": "^2.30.1",
32
+ "react": "^18.2.0",
33
+ "react-dom": "^18.2.0",
31
34
  "react-scripts": "^5.0.1",
32
35
  "react-transition-group": "^4.4.5",
33
36
  "styled-components": "^6.1.3",
@@ -71,13 +74,7 @@
71
74
  "last 1 safari version"
72
75
  ]
73
76
  },
74
- "peerDependencies": {
75
- "react": "^18.2.0",
76
- "react-dom": "^18.2.0",
77
- "axios": "^1.2.2"
78
- },
79
77
  "devDependencies": {
80
- "axios": "^1.2.2",
81
78
  "@babel/cli": "^7.19.3",
82
79
  "@babel/core": "^7.20.5",
83
80
  "@babel/preset-env": "^7.20.2",