@portnet/ui 0.1.55 → 0.1.56

package/dist/components/inputs/PuiDateTimeField.js

@@ -23,6 +23,7 @@ var _PuiButton = _interopRequireDefault(require("../buttons/PuiButton"));
 var _StyledMuiTextField = _interopRequireDefault(require("../common/StyledMuiTextField"));
 var _PuiDialog = _interopRequireDefault(require("../others/PuiDialog"));
 var _PuiTextField = _interopRequireDefault(require("./PuiTextField"));
+var _DateTimePickerField = _interopRequireDefault(require("../others/DateTimePickerField"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["id", "className", "sx", "label", "name", "required", "value", "minDate", "maxDate", "inputFormat", "format", "disablePast", "disableFuture", "error", "readOnly", "fullWidth", "disabled", "helperText", "onChange", "onBlur"],
   _excluded2 = ["id", "className", "sx", "label", "name", "required", "value", "minDate", "maxDate", "inputFormat", "format", "disablePast", "disableFuture", "error", "readOnly", "fullWidth", "disabled", "helperText", "onChange", "onBlur"],
@@ -288,9 +289,9 @@ const PuiFormikDateTimeField = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PuiStandardDateTimeField, _objectSpread({
-    id: id,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateTimePickerField.default, _objectSpread({
     ref: ref,
+    id: id,
     className: className,
     sx: sx,
     label: label,

package/dist/components/others/DateTimePickerField.js

@@ -0,0 +1,261 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.parse-int.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.regexp.test.js");
+require("core-js/modules/esnext.iterator.map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _AccessTime = _interopRequireDefault(require("@mui/icons-material/AccessTime"));
+var _CalendarMonth = _interopRequireDefault(require("@mui/icons-material/CalendarMonth"));
+var _material = require("@mui/material");
+var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
+var _reactDatepicker = _interopRequireWildcard(require("@trendmicro/react-datepicker"));
+var _formik = require("formik");
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+var _react = _interopRequireWildcard(require("react"));
+var _PuiButton = _interopRequireDefault(require("../buttons/PuiButton"));
+var _StyledMuiTextField = _interopRequireDefault(require("../common/StyledMuiTextField"));
+require("./custom-datepicker.css");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const dateTimeRegex = /^(Mon|Tue|Wed|Thu|Fri|Sat|Sun)\s(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\s\d{2}\s\d{4}\s\d{2}:\d{2}:\d{2}\sGMT[+-]\d{4}\s\(UTC[+-]\d{2}:\d{2}\)$/;
+const DATE_TIME_FORMATS = {
+  LONG: "YYYY-MM-DD HH:mm:ss",
+  SHORT: "YYYY-MM-DD HH:mm"
+};
+const DateTimePickerField = _ref => {
+  let {
+    label,
+    name,
+    format = "YYYY-MM-DD HH:mm",
+    onChange,
+    minDate,
+    maxDate,
+    value,
+    required = true,
+    error = false,
+    helperText = null,
+    fullWidth = true
+  } = _ref;
+  const [field] = (0, _formik.useField)(name);
+  const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+  const [timeAnchorEl, setTimeAnchorEl] = (0, _react.useState)(null);
+  const [selectedDate, setSelectedDate] = (0, _react.useState)(null);
+  const [selectedTime, setSelectedTime] = (0, _react.useState)(null);
+  const openDatePopover = Boolean(anchorEl);
+  const openTimePopover = Boolean(timeAnchorEl);
+  const hasInitialized = (0, _react.useRef)(false);
+  const [canUpdate, setCanUpdate] = (0, _react.useState)(true);
+  (0, _react.useEffect)(() => {
+    const initialize = () => {
+      const initialValue = value || (field === null || field === void 0 ? void 0 : field.value);
+      setSelectedDate(initialValue ? (0, _momentTimezone.default)(initialValue).format("YYYY-MM-DD") : "");
+      setSelectedTime(initialValue ? (0, _momentTimezone.default)(initialValue).format("HH:mm") : "");
+      hasInitialized.current = true;
+    };
+    if (canUpdate && !hasInitialized.current && (value || field !== null && field !== void 0 && field.value)) {
+      initialize();
+    }
+    return () => {
+      hasInitialized.current = false;
+    };
+  }, [value, field === null || field === void 0 ? void 0 : field.value]);
+  const handleDateTimeClick = event => setAnchorEl(event.currentTarget);
+  const handleTimeClick = event => setTimeAnchorEl(event.currentTarget);
+  const handleDateChange = date => setSelectedDate((0, _momentTimezone.default)(date).format("YYYY-MM-DD"));
+  const handleTimeChange = time => setSelectedTime(time);
+  const handleDateClose = () => {
+    const combinedDateTime = "".concat(selectedDate, " ").concat(selectedTime);
+    console.log("🚀 ~ handleDateClose ~ combinedDateTime:", combinedDateTime);
+    const unixTimestamp = _momentTimezone.default.utc(combinedDateTime, "YYYY-MM-DD HH:mm").subtract(1, "hours");
+    console.log("🚀 ~ handleDateClose ~ unixTimestamp:", unixTimestamp);
+    setCanUpdate(false);
+    if (onChange) onChange(unixTimestamp);
+    setAnchorEl(null);
+  };
+  const handleTimeClose = () => setTimeAnchorEl(null);
+  const convertDateTimeFormat = dateStr => {
+    const regex = /^\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}(:\d{2})?$/;
+    if (!regex.test(dateStr)) {
+      return null;
+    }
+    try {
+      const [datePart, timePart] = dateStr.split(" ");
+      const [year, month, day] = datePart.split("-");
+      return "".concat(day, "/").concat(month, "/").concat(year, " ").concat(timePart);
+    } catch (error) {
+      return null;
+    }
+  };
+  const renderTimeSelectors = () => {
+    const timeParts = selectedTime === null || selectedTime === void 0 ? void 0 : selectedTime.split(":");
+    const hours = timeParts === null || timeParts === void 0 ? void 0 : timeParts[0];
+    const minutes = timeParts === null || timeParts === void 0 ? void 0 : timeParts[1];
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      style: {
+        display: "flex",
+        gap: 4
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Select, {
+        value: hours,
+        onChange: e => handleTimeChange("".concat(e.target.value, ":").concat(minutes)),
+        style: {
+          width: "55px",
+          fontSize: 11.5
+        },
+        children: [...Array(24).keys()].map(hour => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+          style: {
+            fontSize: 11.5
+          },
+          value: String(hour).padStart(2, "0"),
+          children: String(hour).padStart(2, "0")
+        }, hour))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Select, {
+        value: minutes,
+        onChange: e => handleTimeChange("".concat(hours, ":").concat(e.target.value)),
+        style: {
+          width: "55px",
+          fontSize: 11.5
+        },
+        children: [...Array(60).keys()].map(minute => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+          style: {
+            fontSize: 11.5
+          },
+          value: String(minute).padStart(2, "0"),
+          children: String(minute).padStart(2, "0")
+        }, minute))
+      })]
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_StyledMuiTextField.default, {
+      name: name,
+      label: label,
+      value: convertDateTimeFormat(selectedDate + " " + selectedTime),
+      fullWidth: fullWidth,
+      onClick: handleDateTimeClick,
+      readOnly: true,
+      error: error,
+      helperText: helperText,
+      required: required,
+      InputProps: {
+        endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputAdornment.default, {
+          position: "end",
+          style: {
+            marginLeft: -10,
+            marginTop: "-0.1px"
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CalendarMonth.default, {
+            fontSize: "small"
+          })
+        })
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Popover, {
+      open: openDatePopover,
+      anchorEl: anchorEl,
+      onClose: handleDateClose,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      },
+      style: {
+        width: "310px"
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        style: {
+          padding: 16
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-around"
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDatepicker.DateInput, {
+            value: selectedDate,
+            onChange: date => handleDateChange(date)
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
+            value: selectedTime,
+            onChange: event => {
+              const inputValue = event.target.value;
+              if (/^[0-9:]*$/.test(inputValue)) setSelectedTime(inputValue);
+            },
+            onBlur: () => {
+              const [hour, minute] = selectedTime === null || selectedTime === void 0 ? void 0 : selectedTime.split(":").map(val => parseInt(val, 10) || 0);
+              const validatedHour = String(Math.min(23, hour)).padStart(2, "0");
+              const validatedMinute = String(Math.min(59, minute)).padStart(2, "0");
+              setSelectedTime("".concat(validatedHour, ":").concat(validatedMinute));
+            },
+            sx: {
+              "& .MuiInputBase-root": {
+                width: "100%",
+                fontSize: 12.5
+              },
+              "& .MuiOutlinedInput-input": {
+                padding: "4px",
+                height: "23.5px"
+              }
+            },
+            InputProps: {
+              startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputAdornment.default, {
+                onClick: handleTimeClick,
+                position: "start",
+                style: {
+                  marginLeft: -10,
+                  cursor: "pointer"
+                },
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AccessTime.default, {
+                  fontSize: "small"
+                })
+              })
+            }
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDatepicker.default, {
+          date: selectedDate,
+          onSelect: date => handleDateChange(date),
+          minDate: minDate,
+          maxDate: maxDate
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          sx: {
+            textAlign: "right",
+            padding: 1
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
+            onClick: handleDateClose,
+            children: "Choisir"
+          })
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Popover, {
+      open: openTimePopover,
+      anchorEl: timeAnchorEl,
+      onClose: handleTimeClose,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      },
+      style: {
+        marginTop: 16,
+        marginLeft: -4
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        style: {
+          padding: 4,
+          display: "flex",
+          justifyContent: "center",
+          width: "120px",
+          height: "25px"
+        },
+        children: renderTimeSelectors()
+      })
+    })]
+  });
+};
+var _default = exports.default = DateTimePickerField;

package/dist/components/others/custom-datepicker.css

@@ -0,0 +1,227 @@
+.datepicker---date-picker-container---1kNBY {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  line-height: 20px;
+  border: none;
+  border-radius: 0;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  padding: 0 5px;
+  position: relative;
+  display: inline-block;
+}
+.datepicker---date-picker-container---1kNBY *,
+.datepicker---date-picker-container---1kNBY *:before,
+.datepicker---date-picker-container---1kNBY *:after {
+  -webkit-box-sizing: inherit;
+  -moz-box-sizing: inherit;
+  box-sizing: inherit;
+}
+.datepicker---date-picker-container---1kNBY .react-datepicker__header {
+  text-align: center;
+  background-color: #fff;
+  border: none;
+  position: relative;
+  padding: 0;
+}
+.datepicker---date-picker-container---1kNBY .react-datepicker__month {
+  margin: 0;
+  text-align: center;
+}
+.datepicker---date-picker-container---1kNBY .react-datepicker__current-month {
+  color: #222;
+  font-family: "Roboto", sans-serif !important;
+  font-weight: bold;
+  font-size: 13px;
+  height: 20px;
+  margin: 8px 0;
+}
+.datepicker---date-picker-container---1kNBY .react-datepicker__navigation {
+  background: none;
+  line-height: 20px;
+  text-align: center;
+  cursor: pointer;
+  position: absolute;
+  top: 3px;
+  padding: 5px;
+  border: none;
+  z-index: 1;
+  outline: 0;
+  width: 30px;
+  height: 30px;
+  background-color: transparent;
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+.datepicker---date-picker-container---1kNBY
+  .react-datepicker__navigation:hover {
+  border-radius: 3px;
+  background-color: #eee;
+}
+.datepicker---date-picker-container---1kNBY
+  .react-datepicker__navigation--previous {
+  left: 8px;
+  background-image: url(data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgVHJlbmQgTWljcm8gU3R5bGUgUG9ydGFsIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiPg0KICA8dGl0bGU+YW5nbGUtbGVmdDwvdGl0bGU+DQogIDxwYXRoIGZpbGw9InJnYigzNCwzNCwzNCkiIGQ9Ik05LjUwMSAxMi41MDZsLTQuNDk5LTQuNTA2IDQuNDg4LTQuNDk0IDEgMS0zLjQ5IDMuNDk0IDMuNTAxIDMuNTA2eiI+PC9wYXRoPg0KPC9zdmc+);
+}
+.datepicker---date-picker-container---1kNBY
+  .react-datepicker__navigation--next {
+  right: 8px;
+  background-image: url(data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgVHJlbmQgTWljcm8gU3R5bGUgUG9ydGFsIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiPg0KICA8dGl0bGU+YW5nbGUtcmlnaHQ8L3RpdGxlPg0KICA8cGF0aCBmaWxsPSJyZ2IoMzQsMzQsMzQpIiBkPSJNNi41MDEgMTIuNWwtMS0xIDMuNTAxLTMuNTA2LTMuNDktMy40OTQgMS0xIDQuNDg4IDQuNDk0eiI+PC9wYXRoPg0KPC9zdmc+);
+}
+.datepicker---date-picker-container---1kNBY .react-datepicker__day,
+.datepicker---date-picker-container---1kNBY .react-datepicker__day-name {
+  color: #222;
+  display: inline-block;
+  text-align: center;
+  width: 30px;
+  line-height: 20px;
+  border: 0;
+  padding: 5px;
+  margin: 2px;
+}
+.datepicker---date-picker-container---1kNBY .react-datepicker__day {
+  cursor: pointer;
+  font-size: 13px;
+  font-family: "Roboto", sans-serif !important;
+}
+.datepicker---date-picker-container---1kNBY .react-datepicker__day:hover {
+  background: #eee;
+  cursor: pointer;
+  border-radius: 50%;
+}
+.datepicker---date-picker-container---1kNBY
+  .react-datepicker__day.react-datepicker__day--disabled,
+.datepicker---date-picker-container---1kNBY
+  .react-datepicker__day:hover.react-datepicker__day--disabled {
+  background: inherit;
+  cursor: default;
+  color: #bbb;
+}
+.datepicker---date-picker-container---1kNBY .react-datepicker__day-name {
+  padding-top: 9px;
+  font-size: 12px;
+  font-weight: bold;
+  font-family: "Roboto", sans-serif !important;
+}
+.datepicker---date-picker-container---1kNBY .react-datepicker__day-names {
+  white-space: nowrap;
+}
+.datepicker---date-picker-container---1kNBY
+  .react-datepicker__day--outside-month {
+  color: #bbb;
+}
+.datepicker---date-picker-container---1kNBY .react-datepicker__day--today {
+  color: #888 !important;
+}
+
+.datepicker---date-picker-container---1kNBY
+  .react-datepicker__day--today.react-datepicker__day--selected {
+  color: #fff !important;
+}
+
+.datepicker---date-picker-container---1kNBY .react-datepicker__day--selected {
+  color: #fff;
+  font-weight: bold;
+  font-family: "Roboto", sans-serif !important;
+  background-color: #232f66 !important;
+  border-radius: 50%;
+}
+.datepicker---date-picker-container---1kNBY
+  .react-datepicker__day--selected:hover {
+  background-color: #232f66 !important;
+}
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .datepicker---date-input---1vOyn > input {
+    height: 32px;
+  }
+}
+.datepicker---date-input-container---2zD9B {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  line-height: 20px;
+  position: relative;
+}
+.datepicker---date-input-container---2zD9B *,
+.datepicker---date-input-container---2zD9B *:before,
+.datepicker---date-input-container---2zD9B *:after {
+  -webkit-box-sizing: inherit;
+  -moz-box-sizing: inherit;
+  box-sizing: inherit;
+}
+.datepicker---date-input---1vOyn {
+  width: 120px;
+}
+.datepicker---date-input---1vOyn > input {
+  display: block;
+  width: 100%;
+  height: auto;
+  line-height: inherit;
+  padding: 5px 12px;
+  padding-left: 30px;
+  font-size: 13px;
+  font-family: "Roboto", sans-serif !important;
+  color: #222;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  outline: none;
+}
+.datepicker---date-input---1vOyn > input:focus {
+  border-color: #232f66 !important;
+}
+.datepicker---date-input-icon---1UeQu {
+  position: absolute;
+  left: 9px;
+  top: 8px;
+  color: #666;
+  width: 14px;
+  height: 14px;
+}
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .datepicker---time-input---2ICRB > input {
+    height: 32px;
+  }
+}
+.datepicker---time-input-container---s4Ikh {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  line-height: 20px;
+  position: relative;
+}
+.datepicker---time-input-container---s4Ikh *,
+.datepicker---time-input-container---s4Ikh *:before,
+.datepicker---time-input-container---s4Ikh *:after {
+  -webkit-box-sizing: inherit;
+  -moz-box-sizing: inherit;
+  box-sizing: inherit;
+}
+.datepicker---time-input---2ICRB {
+  width: 120px;
+}
+.datepicker---time-input---2ICRB > input {
+  display: block;
+  width: 100%;
+  height: auto;
+  line-height: inherit;
+  padding: 5px 12px;
+  padding-left: 30px;
+  font-size: 13px;
+  font-family: "Roboto", sans-serif !important;
+  color: #222;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  outline: none;
+}
+.datepicker---time-input---2ICRB > input:focus {
+  border-color: #232f66 !important;
+}
+.datepicker---time-input-icon---3TeZ8 {
+  position: absolute;
+  left: 9px;
+  top: 8px;
+  color: #666;
+  width: 14px;
+  height: 14px;
+}

package/dist/components/ui/pages/general/PuiSearchPage.js

@@ -30,8 +30,26 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 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; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-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); }
-const PuiSearchPage = _ref => {
+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); } // Container for search form and actions
+const PuiStandardSearchPageContainer = _ref => {
+  let {
+    actions,
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PuiGrid.default, {
+    container: true,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiGrid.default, {
+      item: true,
+      xs: 12,
+      children: children
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiGrid.default, {
+      item: true,
+      xs: 12,
+      children: actions
+    })]
+  });
+};
+const PuiSearchPage = _ref2 => {
   let {
     formik,
     formikProps,
@@ -47,21 +65,14 @@ const PuiSearchPage = _ref => {
     onRetour,
     onReset,
     onSubmit,
+    children: _children,
     additionalActions,
     collapsibleSearchSection = true // Collapsible by default
-  } = _ref;
+  } = _ref2;
   const [isSearchSectionExpanded, setSearchSectionExpanded] = (0, _react.useState)(false);
   const toggleSearchSection = () => {
     setSearchSectionExpanded(prev => !prev);
   };
-
-  // Extract columns from tableProps
-  const {
-    columns
-  } = tableProps || [];
-  const alwaysVisibleFields = columns.slice(0, 3); // First row fields
-  const expandableFields = columns.slice(3); // Second row fields
-
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PuiDefaultPage.default, {
     title: title,
     titleIcon: titleIcon,
@@ -82,7 +93,7 @@ const PuiSearchPage = _ref => {
         },
         children: [collapsibleSearchSection && (isSearchSectionExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandLess.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {})), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           style: {
-            marginLeft: "8px"
+            marginLeft: collapsibleSearchSection ? "8px" : "0px"
           },
           children: "Param\xE8tres de recherche"
         })]
@@ -90,76 +101,95 @@ const PuiSearchPage = _ref => {
       sx: {
         marginBottom: 2
       },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_formik.Formik, _objectSpread(_objectSpread({
-        initialValues: formikProps.initialValues
+      children: isSearchSectionExpanded && (formik ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_formik.Formik, _objectSpread(_objectSpread({
+        initialValues: {}
       }, formikProps), {}, {
-        children: _ref2 => {
+        children: _ref3 => {
           let {
             resetForm,
             submitForm
-          } = _ref2;
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PuiFormikForm.default, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_PuiGrid.default, {
-              container: true,
-              spacing: 2,
-              children: [alwaysVisibleFields.map((column, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiGrid.default, {
-                item: true,
-                xs: 12,
-                sm: 4,
-                children: column.renderCell ? column.renderCell({
-                  row: {}
-                }) // Render fields
-                : column.headerName
-              }, index)), isSearchSectionExpanded && expandableFields.map((column, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiGrid.default, {
-                item: true,
-                xs: 12,
-                sm: 4,
-                children: column.renderCell ? column.renderCell({
-                  row: {}
-                }) : column.headerName
-              }, index))]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PuiGrid.default, {
-              container: true,
-              justifyContent: "end",
-              spacing: 2,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiGrid.default, {
-                item: true,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
-                  startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiIcon.default, {
-                    type: "effacer",
-                    size: "small"
-                  }),
-                  onClick: resetForm,
-                  color: "tertiary",
-                  children: "Effacer"
-                })
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiGrid.default, {
-                item: true,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
-                  startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiIcon.default, {
-                    type: "rechercher",
-                    size: "small"
-                  }),
-                  onClick: submitForm,
-                  loadingPosition: "start",
-                  children: "Rechercher"
-                })
-              }), additionalActions && additionalActions.map((actionItem, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiGrid.default, {
-                item: true,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
-                  startIcon: actionItem.icon,
-                  onClick: actionItem.action,
-                  children: actionItem.name
-                })
-              }, index))]
-            })]
+          } = _ref3;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiFormikForm.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PuiStandardSearchPageContainer, {
+              actions: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PuiGrid.default, {
+                container: true,
+                justifyContent: "end",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiGrid.default, {
+                  item: true,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
+                    startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiIcon.default, {
+                      type: "effacer",
+                      size: "small"
+                    }),
+                    onClick: resetForm,
+                    color: "tertiary",
+                    children: "Effacer"
+                  })
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiGrid.default, {
+                  item: true,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
+                    startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiIcon.default, {
+                      type: "rechercher",
+                      size: "small"
+                    }),
+                    onClick: submitForm,
+                    loadingPosition: "start",
+                    children: "Rechercher"
+                  })
+                }), additionalActions && additionalActions.map((actionItem, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiGrid.default, {
+                  item: true,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
+                    startIcon: actionItem.icon,
+                    onClick: actionItem.action,
+                    children: actionItem.name
+                  })
+                }, index))]
+              }),
+              children: _children
+            })
           });
         }
+      })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(PuiStandardSearchPageContainer, {
+        actions: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PuiGrid.default, {
+          container: true,
+          justifyContent: "end",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiGrid.default, {
+            item: true,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
+              startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiIcon.default, {
+                type: "effacer",
+                size: "small"
+              }),
+              onClick: onReset,
+              color: "tertiary",
+              children: "Effacer"
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiGrid.default, {
+            item: true,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
+              startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiIcon.default, {
+                type: "rechercher",
+                size: "small"
+              }),
+              onClick: onSubmit,
+              loadingPosition: "start",
+              children: "Rechercher"
+            })
+          }), additionalActions && additionalActions.map((actionItem, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiGrid.default, {
+            item: true,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
+              startIcon: actionItem.icon,
+              onClick: actionItem.action,
+              children: actionItem.name
+            })
+          }, index))]
+        }),
+        children: _children
       }))
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiTable.default, _objectSpread(_objectSpread({
       paginationMode: "server"
     }, tableProps), {}, {
-      pinnedColumns: tableProps.pinnedColumns
+      pinnedColumns: tableProps.pinnedColumns // Added pinnedColumns
     }))]
   });
 };
@@ -167,19 +197,14 @@ PuiSearchPage.propTypes = {
   formik: _propTypes.default.bool,
   formikProps: _propTypes.default.object,
   title: _propTypes.default.string.isRequired,
-  titleIcon: _propTypes.default.element,
+  titleIcon: _propTypes.default.element.isRequired,
   trace: _propTypes.default.arrayOf(_propTypes.default.string),
   navActions: _propTypes.default.element,
   topNav: _propTypes.default.bool,
   bottomNav: _propTypes.default.bool,
   loading: _propTypes.default.bool,
   tableProps: _propTypes.default.shape({
-    columns: _propTypes.default.arrayOf(_propTypes.default.shape({
-      field: _propTypes.default.string.isRequired,
-      headerName: _propTypes.default.string.isRequired,
-      renderCell: _propTypes.default.func
-    })).isRequired,
-    pinnedColumns: _propTypes.default.object
+    pinnedColumns: _propTypes.default.object // Added pinnedColumns prop type
   }),
   retour: _propTypes.default.bool,
   onRetour: _propTypes.default.func,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portnet/ui",
-  "version": "0.1.55",
+  "version": "0.1.56",
   "description": "Portnet UI",
   "keywords": [
     "react",