sag_components 2.0.0-beta136 → 2.0.0-beta138

package/dist/index.js

@@ -24324,24 +24324,23 @@ const IconContainer$2 = styled__default["default"].div`
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = _ref => {
-  let {
-    label,
-    labelEmptyValue,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    required,
-    disabled,
-    width,
-    error,
-    errorMessage,
-    labelColor,
-    xIconShow,
-    checkBoxColor,
-    showLabelOnTop
-  } = _ref;
+const QuickFilterDropdownMultiSelection = ({
+  label,
+  labelEmptyValue,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  required,
+  disabled,
+  width,
+  error,
+  errorMessage,
+  labelColor,
+  xIconShow,
+  checkBoxColor,
+  showLabelOnTop
+}) => {
   const [isFocused, setIsFocused] = React$1.useState(false);
   const [showOptions, setShowOptions] = React$1.useState(false);
   const [inputValue, setInputValue] = React$1.useState('');
@@ -36869,7 +36868,7 @@ const TruncatedText$1 = styled__default["default"].span`
   text-overflow: ellipsis;
   font-size: 14px;
 `;
-const Checkmark$1 = styled__default["default"].span`
+const Checkmark = styled__default["default"].span`
   color: ${props => props.color};
   margin-left: 8px;
   font-weight: bold;
@@ -36968,7 +36967,7 @@ const SortPop = props => {
     onClick: () => {
       handleChange(item);
     }
-  }, /*#__PURE__*/React__default["default"].createElement(TruncatedText$1, null, item.label), item.value === value && /*#__PURE__*/React__default["default"].createElement(Checkmark$1, {
+  }, /*#__PURE__*/React__default["default"].createElement(TruncatedText$1, null, item.label), item.value === value && /*#__PURE__*/React__default["default"].createElement(Checkmark, {
     color: color
   }, "\u2713")))), /*#__PURE__*/React__default["default"].createElement(ButtonWrapper$1, null, /*#__PURE__*/React__default["default"].createElement(ResetButton, {
     onClick: handleReset,
@@ -52385,7 +52384,7 @@ const CardsContainer = styled__default["default"].div`
 const StatusCard = styled__default["default"].div`
   position: relative;
   background-color: white;
-  border-bottom: 3px solid ${props => props.isSelected ? props.borderColor : '#E0E0E0'};
+  border-bottom: ${props => props.isSelected ? `3px solid ${props.borderColor}` : 'none'};
   border-radius: 12px;
   padding: 12px 16px;
   flex-grow: 1;
@@ -52397,6 +52396,27 @@ const CardHeader = styled__default["default"].div`
   align-items: center;
   margin-bottom: 10px;
 `;
+const CheckmarkContainer = styled__default["default"].div`
+  width: 17px;
+  height: 17px;
+  border: 2px solid #212121;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  color: white;
+  transition: background-color .15s ease, border-color .15s ease;
+  pointer-events: none;
+
+  &.checked {
+    background-color: #066768;
+    border-color: #066768;
+  }
+
+  svg { display: none; }
+  &.checked svg { display: block; }
+`;
 const Circle = styled__default["default"].div`
   width: 16px;
   height: 16px;
@@ -52408,10 +52428,8 @@ const CardTitle = styled__default["default"].h3`
   margin: 0;
   font-size: 18px;
   font-weight: 500;
-  color: ${props => props.isSelected ? props.color : '#666666'};
-  transition: color 0.2s ease-in-out;
 `;
-const Checkmark = styled__default["default"].input`
+styled__default["default"].input`
   width: 16px;
   height: 16px;
   accent-color: #066768;
@@ -52425,102 +52443,68 @@ const CardContent = styled__default["default"].div`
   flex-direction: column;
   align-items: flex-start;
 `;
-const StatusCount = styled__default["default"].h4`
+const StatusCount = styled__default["default"].span`
   font-size: 32px;
   font-weight: 500;
-  color: ${props => props.isSelected ? props.color : '#999999'};
   line-height: 1;
-  margin: 0;
-  transition: color 0.2s ease-in-out;
 `;
 
 const EventStatusCards = _ref => {
   let {
-    statusData = [],
-    onStatusToggle = () => {},
-    disabled = false,
+    data = [],
+    onCardToggle = () => {},
     width = "100%"
   } = _ref;
-  // Default data structure if no data provided
-  const defaultStatusData = [{
-    status: "Pending",
-    count: 0,
-    checked: true,
-    color: "#F5C9A7"
-  }, {
-    status: "Received",
-    count: 0,
-    checked: true,
-    color: "#B9D5D5"
-  }, {
-    status: "Approved",
-    count: 0,
-    checked: true,
-    color: "#BEDDC3"
-  }, {
-    status: "Cancelled",
-    count: 0,
-    checked: true,
-    color: "#EBA6AF"
-  }];
-  const displayData = statusData.length > 0 ? statusData : defaultStatusData;
+  // local mirror so UI updates immediately even if parent is slow/not controlling
+  const [items, setItems] = React$1.useState(data);
+  React$1.useEffect(() => setItems(data), [data]);
   const handleCardClick = status => {
-    if (disabled) return;
-    const updatedData = displayData.map(item => item.status === status ? {
-      ...item,
-      checked: !item.checked
-    } : item);
-    const clickedItem = displayData.find(item => item.status === status);
-    onStatusToggle(updatedData, status, !clickedItem.checked);
+    setItems(prev => {
+      const clicked = prev.find(i => i.status === status);
+      const nextChecked = clicked ? !clicked.checked : true;
+      const next = prev.map(i => i.status === status ? {
+        ...i,
+        checked: nextChecked
+      } : i);
+      onCardToggle(next, status, nextChecked);
+      return next;
+    });
   };
   return /*#__PURE__*/React__default["default"].createElement(CardsContainer, {
     width: width,
     className: "EventStatusCardsContainer"
-  }, displayData.map(item => {
-    const {
+  }, items.map(_ref2 => {
+    let {
       status,
       count,
       checked,
       color
-    } = item;
+    } = _ref2;
     return /*#__PURE__*/React__default["default"].createElement(StatusCard, {
       key: status,
       className: `StatusCard StatusCard-${status}`,
       isSelected: checked,
       borderColor: color,
-      disabled: disabled,
-      onClick: () => handleCardClick(status),
-      "data-testid": `status-card-${status.toLowerCase()}`
+      onClick: () => handleCardClick(status)
     }, /*#__PURE__*/React__default["default"].createElement(CardHeader, null, /*#__PURE__*/React__default["default"].createElement(Circle, {
       color: color
-    }), /*#__PURE__*/React__default["default"].createElement(CardTitle, {
-      isSelected: checked,
-      color: color
-    }, status), /*#__PURE__*/React__default["default"].createElement(Checkmark, {
-      type: "checkbox",
-      checked: checked,
-      readOnly: true
-    })), /*#__PURE__*/React__default["default"].createElement(CardContent, null, /*#__PURE__*/React__default["default"].createElement(StatusCount, {
+    }), /*#__PURE__*/React__default["default"].createElement(CardTitle, null, status), /*#__PURE__*/React__default["default"].createElement(CheckmarkContainer, {
+      className: checked ? "checked" : ""
+    }, checked && /*#__PURE__*/React__default["default"].createElement("svg", {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 20 20",
+      fill: "currentColor"
+    }, /*#__PURE__*/React__default["default"].createElement("path", {
+      fillRule: "evenodd",
+      d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+      clipRule: "evenodd"
+    })))), /*#__PURE__*/React__default["default"].createElement(CardContent, null, /*#__PURE__*/React__default["default"].createElement(StatusCount, {
       isSelected: checked,
       color: color
     }, count)));
   }));
 };
-EventStatusCards.propTypes = {
-  /** Array of status objects with count, checked state, and color information */
-  statusData: PropTypes.arrayOf(PropTypes.shape({
-    status: PropTypes.oneOf(["Pending", "Received", "Approved", "Cancelled"]).isRequired,
-    count: PropTypes.number.isRequired,
-    checked: PropTypes.bool.isRequired,
-    color: PropTypes.string.isRequired
-  })),
-  /** Callback function when status selection changes */
-  onStatusToggle: PropTypes.func,
-  /** Whether the cards are disabled */
-  disabled: PropTypes.bool,
-  /** Width of the entire cards container */
-  width: PropTypes.string
-};
 
 exports.AreaChart = AreaChart;
 exports.BannerEventBoxList = BannerEventBoxList;