sag_components 2.0.0-beta217 → 2.0.0-beta219

package/dist/index.esm.js

@@ -10580,23 +10580,24 @@ const QuarterPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const QuarterPicker = ({
-  availableQuarters,
-  // ["Q1-2024"]
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue,
-  startYear
-}) => {
+const QuarterPicker = _ref => {
+  let {
+    availableQuarters,
+    // ["Q1-2024"]
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue,
+    startYear
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -11038,22 +11039,23 @@ const MonthPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const MonthPicker = ({
-  availableMonths,
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue,
-  startYear
-}) => {
+const MonthPicker = _ref => {
+  let {
+    availableMonths,
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue,
+    startYear
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -24164,21 +24166,22 @@ const DeleteIcon = styled.div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = ({
-  label,
-  hoverColor,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  xIconShow,
-  labelColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownSingle = _ref => {
+  let {
+    label,
+    hoverColor,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    xIconShow,
+    labelColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -24635,25 +24638,26 @@ const IconContainer$2 = styled.div`
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = ({
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  required,
-  disabled,
-  width,
-  height,
-  error,
-  errorMessage,
-  labelColor,
-  xIconShow,
-  checkBoxColor,
-  showLabelOnTop,
-  dropdownHeight
-}) => {
+const QuickFilterDropdownMultiSelection = _ref => {
+  let {
+    label,
+    labelEmptyValue,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    required,
+    disabled,
+    width,
+    height,
+    error,
+    errorMessage,
+    labelColor,
+    xIconShow,
+    checkBoxColor,
+    showLabelOnTop,
+    dropdownHeight
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -36137,9 +36141,9 @@ const ToggleSlider = styled.span`
   }
 `;
 
-/**
- * ToggleSwitch component for on/off states.
- * Supports small/large sizes and disabled state.
+/**
+ * ToggleSwitch component for on/off states.
+ * Supports small/large sizes and disabled state.
  */
 function ToggleSwitch(_ref) {
   let {
@@ -39611,6 +39615,14 @@ styled.div`
     }
   `}
 `;
+const HeroButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+`;
 
 // MessageBox.styles.js
 const ModalOverlay = styled.div`
@@ -40074,6 +40086,38 @@ Dropdown.propTypes = {
   placeholder: PropTypes.string
 };
 
+const HeroIcon = ({
+  width = '12',
+  height = '16',
+  full = false
+}) => full ? /*#__PURE__*/React$1.createElement("svg", {
+  width: width,
+  height: height,
+  viewBox: "0 0 12 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React$1.createElement("path", {
+  d: "M0 1.5V15.2406C0 15.6594 0.340625 16 0.759375 16C0.915625 16 1.06875 15.9531 1.19687 15.8625L6 12.5L10.8031 15.8625C10.9313 15.9531 11.0844 16 11.2406 16C11.6594 16 12 15.6594 12 15.2406V1.5C12 0.671875 11.3281 0 10.5 0H1.5C0.671875 0 0 0.671875 0 1.5Z",
+  fill: "#066768"
+})) : /*#__PURE__*/React$1.createElement("svg", {
+  width: width,
+  height: height,
+  viewBox: "0 0 12 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React$1.createElement("g", {
+  "clip-path": "url(#clip0_2338_96732)"
+}, /*#__PURE__*/React$1.createElement("path", {
+  d: "M0 1.5C0 0.671875 0.671875 0 1.5 0H10.5C11.3281 0 12 0.671875 12 1.5V15.3094C12 15.6906 11.6906 16 11.3094 16C11.1719 16 11.0406 15.9594 10.925 15.8844L6 12.6L1.075 15.8844C0.9625 15.9594 0.828125 16 0.690625 16C0.309375 16 0 15.6906 0 15.3094V1.5ZM1.5 1C1.225 1 1 1.225 1 1.5V14.7312L5.72188 11.5844C5.89062 11.4719 6.10938 11.4719 6.27812 11.5844L11 14.7312V1.5C11 1.225 10.775 1 10.5 1H1.5Z",
+  fill: "#066768"
+})), /*#__PURE__*/React$1.createElement("defs", null, /*#__PURE__*/React$1.createElement("clipPath", {
+  id: "clip0_2338_96732"
+}, /*#__PURE__*/React$1.createElement("rect", {
+  width: "12",
+  height: "16",
+  fill: "white"
+}))));
+
 // combinedShimmerHooks.js - Chrome shimmer effect integrated with your hooks
 
 // Chrome Shimmer Component
@@ -40173,7 +40217,8 @@ const TableBody = /*#__PURE__*/forwardRef(({
   expandedBackgroundColor = "#E6F0F0",
   onDropdownSelected = () => {},
   onCheckboxClick = () => {},
-  onHeaderCheckboxClick = () => {}
+  onHeaderCheckboxClick = () => {},
+  onHeroClick = () => {}
 }, ref) => {
   // MOVE ALL VALIDATION TO THE VERY TOP BEFORE ANY HOOKS
   if (!Array.isArray(data) || !Array.isArray(columns)) {
@@ -40711,6 +40756,23 @@ const TableBody = /*#__PURE__*/forwardRef(({
             console.warn('Error formatting checkbox:', e);
             return String(value || "");
           }
+        case "hero":
+          try {
+            if (value === null || value === undefined) return null;
+            return /*#__PURE__*/React$1.createElement(HeroButton, {
+              onClick: e => {
+                // e.stopPropagation();
+                if (onHeroClick) {
+                  onHeroClick(row, !value);
+                }
+              }
+            }, /*#__PURE__*/React$1.createElement(HeroIcon, {
+              full: Boolean(value)
+            }));
+          } catch (e) {
+            console.warn('Error formatting hero icon:', e);
+            return null;
+          }
         default:
           return String(value || "");
       }
@@ -40944,7 +41006,8 @@ TableBody.propTypes = {
   expandedBackgroundColor: PropTypes.string,
   onDropdownSelected: PropTypes.func,
   onCheckboxClick: PropTypes.func,
-  onHeaderCheckboxClick: PropTypes.func
+  onHeaderCheckboxClick: PropTypes.func,
+  onHeroClick: PropTypes.func
 };
 TableBody.displayName = "TableBody";
 
@@ -44307,6 +44370,7 @@ const Table = props => {
     onCheckboxClick = () => {},
     onHeaderCheckboxClick = () => {},
     headerCheckboxStates = {},
+    onHeroClick = () => {},
     // Accept ref as a regular prop
     ref = null
   } = props;
@@ -44458,7 +44522,8 @@ const Table = props => {
     expandedBackgroundColor: expandedBackgroundColor,
     onDropdownSelected: onDropdownSelected,
     onCheckboxClick: onCheckboxClick,
-    onHeaderCheckboxClick: onHeaderCheckboxClick
+    onHeaderCheckboxClick: onHeaderCheckboxClick,
+    onHeroClick: onHeroClick
   })), data.length === 0 && /*#__PURE__*/React$1.createElement(NoEventsParent, null, /*#__PURE__*/React$1.createElement(NoEventsWrapper, null, showNoDataInSearch ? getNoDataSearchIcon(noDataSearchIcon) : getNoDataIcon(noDataIcon)), /*#__PURE__*/React$1.createElement(NoEventsMessage, null, showNoDataInSearch ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("strong", null, noDataInSearchTitle), /*#__PURE__*/React$1.createElement("br", null), noDataInSearchMessage) : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("strong", null, noEventsTitle), /*#__PURE__*/React$1.createElement("br", null), noEventsSubtitle)), !showNoDataInSearch && showNoEventsButton && /*#__PURE__*/React$1.createElement(Button$1, {
     height: "45px",
     leftIcon: noEventsButtonIcon,
@@ -55026,7 +55091,7 @@ const OverlayDropdown = _ref => {
   const [hoveredText, setHoveredText] = useState(null);
   const [templateDialog, setTemplateDialog] = useState(null);
   const [dropdownPosition, setDropdownPosition] = useState('below');
-  const [lastDefinedGroup, setLastDefinedGroup] = useState(null);
+  const [lastDefinedGroup, setLastDefinedGroup] = useState(data.find(group => group.overlayCode === 'last_defined'));
   const buttonRef = useRef(null);
   const dropdownRef = useRef(null);
   const containerRef = useRef(null);