sag_components 2.0.0-beta136 → 2.0.0-beta138

package/dist/index.d.ts

@@ -1508,25 +1508,11 @@ declare function ToasterMessageBox({ color, messageText, linkText, duration, wid
     onClose?: () => void;
 }): react_jsx_runtime.JSX.Element;
 
-declare function EventStatusCards({ statusData, onStatusToggle, disabled, width, }: {
-    statusData?: any[];
-    onStatusToggle?: () => void;
-    disabled?: boolean;
+declare function EventStatusCards({ data, onCardToggle, width, }: {
+    data?: any[];
+    onCardToggle?: () => void;
     width?: string;
-}): react_jsx_runtime.JSX.Element;
-declare namespace EventStatusCards {
-    namespace propTypes {
-        const statusData: PropTypes.Requireable<PropTypes.InferProps<{
-            status: PropTypes.Validator<string>;
-            count: PropTypes.Validator<number>;
-            checked: PropTypes.Validator<boolean>;
-            color: PropTypes.Validator<string>;
-        }>[]>;
-        const onStatusToggle: PropTypes.Requireable<(...args: any[]) => any>;
-        const disabled: PropTypes.Requireable<boolean>;
-        const width: PropTypes.Requireable<string>;
-    }
-}
+}): react_jsx_runtime.JSX.Element;
 
 declare function RangePicker({ label, onChange, borderRadius, required, width, height, placeholder, disabled, borderColor, borderColorFocus, textColor, selectedValue, }: {
     label: any;

package/dist/index.esm.js

@@ -24314,24 +24314,23 @@ const IconContainer$2 = styled.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] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -36859,7 +36858,7 @@ const TruncatedText$1 = styled.span`
   text-overflow: ellipsis;
   font-size: 14px;
 `;
-const Checkmark$1 = styled.span`
+const Checkmark = styled.span`
   color: ${props => props.color};
   margin-left: 8px;
   font-weight: bold;
@@ -36958,7 +36957,7 @@ const SortPop = props => {
     onClick: () => {
       handleChange(item);
     }
-  }, /*#__PURE__*/React$1.createElement(TruncatedText$1, null, item.label), item.value === value && /*#__PURE__*/React$1.createElement(Checkmark$1, {
+  }, /*#__PURE__*/React$1.createElement(TruncatedText$1, null, item.label), item.value === value && /*#__PURE__*/React$1.createElement(Checkmark, {
     color: color
   }, "\u2713")))), /*#__PURE__*/React$1.createElement(ButtonWrapper$1, null, /*#__PURE__*/React$1.createElement(ResetButton, {
     onClick: handleReset,
@@ -52375,7 +52374,7 @@ const CardsContainer = styled.div`
 const StatusCard = styled.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;
@@ -52387,6 +52386,27 @@ const CardHeader = styled.div`
   align-items: center;
   margin-bottom: 10px;
 `;
+const CheckmarkContainer = styled.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.div`
   width: 16px;
   height: 16px;
@@ -52398,10 +52418,8 @@ const CardTitle = styled.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.input`
+styled.input`
   width: 16px;
   height: 16px;
   accent-color: #066768;
@@ -52415,102 +52433,68 @@ const CardContent = styled.div`
   flex-direction: column;
   align-items: flex-start;
 `;
-const StatusCount = styled.h4`
+const StatusCount = styled.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] = useState(data);
+  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$1.createElement(CardsContainer, {
     width: width,
     className: "EventStatusCardsContainer"
-  }, displayData.map(item => {
-    const {
+  }, items.map(_ref2 => {
+    let {
       status,
       count,
       checked,
       color
-    } = item;
+    } = _ref2;
     return /*#__PURE__*/React$1.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$1.createElement(CardHeader, null, /*#__PURE__*/React$1.createElement(Circle, {
       color: color
-    }), /*#__PURE__*/React$1.createElement(CardTitle, {
-      isSelected: checked,
-      color: color
-    }, status), /*#__PURE__*/React$1.createElement(Checkmark, {
-      type: "checkbox",
-      checked: checked,
-      readOnly: true
-    })), /*#__PURE__*/React$1.createElement(CardContent, null, /*#__PURE__*/React$1.createElement(StatusCount, {
+    }), /*#__PURE__*/React$1.createElement(CardTitle, null, status), /*#__PURE__*/React$1.createElement(CheckmarkContainer, {
+      className: checked ? "checked" : ""
+    }, checked && /*#__PURE__*/React$1.createElement("svg", {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 20 20",
+      fill: "currentColor"
+    }, /*#__PURE__*/React$1.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$1.createElement(CardContent, null, /*#__PURE__*/React$1.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
-};
 
 export { AreaChart, BannerEventBoxList, BarChart, BarChartTwoRows, BarChartWithAreaChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, BrushChart, BubbleChart, Build, Button$1 as Button, CollapseData, CollapseHeader, ContainerTable, DialogOverlay$1 as DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, DownloadProgress, DropdownNew, EventDetailsCard, EventList, EventStatusCards, Execute, FilterPanel, FilterPop, Heatmap, IconButton$1 as IconButton, Input$2 as Input, InsightsCarousel, ItemManagerPanel, LinkButton, LinnerDataBox, MarketShareDescription, MenuRoute, MessageBox, ModalDrawer, ModalWithOverlay, OneColumnContainer, OverlayDropdown, PerformanceAnalyticsLegend, PieChart, PopupCharts, QuickFilter, RangePicker, RangePop, ReportTable, SearchInput, SingleBarLineCharts, SortPop, TabMenu, Table, ToasterMessageBox, ToggleSwitch, Tooltip$2 as Tooltip, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts, Track, TwoBarCharts, WeeksPicker };
 //# sourceMappingURL=index.esm.js.map