sag_components 2.0.0-beta274 → 2.0.0-beta276

package/dist/index.d.ts

@@ -1578,29 +1578,29 @@ declare function ModalDrawer({ open, height, onClose, children, widthPercent }:
     widthPercent?: number;
 }): react_jsx_runtime.JSX.Element;
 
-declare function OverlayDropdown({ data, value, onSelectClick, disabled, isDarkerBackground, required, selectedColor, hoverColor, dropdownMaxHeight, width, minWidth, height, label, labelEmptyValue, showLabelOnTop, placeHolder, labelColor, placeHolderColor, margin, dropdownWidth, editableDigitalCoupon, ...props }: {
+declare function OverlayDropdown({ data, value, onSelectClick, label, labelEmptyValue, showLabelOnTop, labelColor, placeHolder, placeHolderColor, required, disabled, isDarkerBackground, editableDigitalCoupon, selectedColor, hoverColor, width, minWidth, dropdownWidth, dropdownMaxHeight, height, margin, ...props }: {
     [x: string]: any;
     data?: any[];
     value: any;
     onSelectClick: any;
+    label: any;
+    labelEmptyValue: any;
+    showLabelOnTop: any;
+    labelColor: any;
+    placeHolder: any;
+    placeHolderColor: any;
+    required?: boolean;
     disabled?: boolean;
     isDarkerBackground?: boolean;
-    required?: boolean;
+    editableDigitalCoupon?: boolean;
     selectedColor?: string;
     hoverColor?: string;
-    dropdownMaxHeight?: string;
     width?: string;
     minWidth?: string;
+    dropdownWidth?: string;
+    dropdownMaxHeight?: string;
     height?: string;
-    label: any;
-    labelEmptyValue: any;
-    showLabelOnTop: any;
-    placeHolder: any;
-    labelColor: any;
-    placeHolderColor: any;
     margin?: string;
-    dropdownWidth?: string;
-    editableDigitalCoupon?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
 declare function MessageBox({ isOpen, isDisabled, onClose, onConfirm, title, primaryText, secondaryText, width, height, color, hoverColor, opacity, secondaryColor, seperateSectionBorder, children, tooltipContent, }: {

package/dist/index.esm.js

@@ -9292,7 +9292,6 @@ const Label$7 = styled.label`
   return props.isFocused || props.hasValue ? '0px' : `${height / 2 - 4}px`;
 }};
   left: ${props => props.isFocused || props.hasValue ? '23px' : '10px'};
-  font-family: Poppins;  
   transform: translateY(-50%);
   transition: ${props => props.showLabelOnTop ? 'top 0.3s ease, font-size 0.3s ease, color 0.3s ease' : ''} ;
   display: flex;
@@ -10581,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('');
@@ -11039,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('');
@@ -24165,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("");
@@ -24540,7 +24542,6 @@ const OptionsContainer$1 = styled.div`
   width: 100%;  
   background-color: #fff;  
   display: ${props => props.showoptions && props.filteredoptions?.length > 0 ? 'block' : 'none'};  
-
 `;
 const OptionsSubContainer = styled.ul`
   list-style: none;
@@ -24552,7 +24553,6 @@ const OptionsSubContainer = styled.ul`
   left: 0;
   z-index: 101;
   width: calc(100% - 23px);
-  font-family: Poppins; 
   border-radius: 4px; 
   background-color: #fff;  
   display: ${props => props.showoptions && props.filteredoptions?.length > 0 ? 'block' : 'none'};
@@ -24563,13 +24563,10 @@ const OptionsSubContainer = styled.ul`
 const OptionItem = styled.li`  
   display: flex;
   align-items: center;
-  gap: 8px;
   padding: 10px;
   cursor: pointer;
   color: #212121;
-  font-family: Poppins;
   font-size: 14px;
-  font-style: normal;
   font-weight: 400;
   transition: background-color 0.3s;
 
@@ -24584,7 +24581,6 @@ const ErrorMessage$1 = styled.div`
 `;
 const SelectedOptionsContainer = styled.div`
   display: flex;
-  flex-direction: row;
   align-items: center;
   gap: 4px;
   flex-wrap: nowrap;
@@ -24633,28 +24629,30 @@ const SelectedOptionCount = styled.div`
 const IconContainer$2 = styled.div`  
   display: flex;  
   padding: 2px;
-  cursor:  pointer;  
+  margin-right: 8px;
+  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('');
@@ -35683,7 +35681,7 @@ const Label$3 = styled.label`
   if (props.multiline) {
     return props.isFocused || props.hasValue ? '0px' : '20px';
   }
-  return props.isFocused || props.hasValue ? '0px' : props.size === 'medium' ? '27px' : '17px';
+  return props.isFocused || props.hasValue ? '0px' : props.size === 'medium' ? '50%' : '17px';
 }};
   left: ${props => {
   if (props.multiline) {
@@ -35691,7 +35689,6 @@ const Label$3 = styled.label`
   }
   return props.isFocused || props.hasValue ? '23px' : props.leftIcon && props.leftIcon !== 'none' ? '42px' : '16px';
 }};
-  font-family: Poppins;  
   transform: translateY(-50%);
   transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;
   display: flex;
@@ -36171,9 +36168,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 {
@@ -37415,8 +37412,8 @@ const ColumnContent = styled.div`
     min-height: 20px;
 `;
 const ColumnCheckbox = styled.input`
-    width: 16px;
-    height: 16px;
+    width: 18px;
+    height: 18px;
     cursor: pointer;
     margin: 0;
 `;
@@ -40400,6 +40397,7 @@ const Radio = styled.input`
 `;
 const Actions$1 = styled.div`
   display: flex;
+  align-items: center;
   justify-content: space-between;
   padding-top: 12px;
 `;
@@ -41305,14 +41303,7 @@ const TableHeader = ({
     onChange: e => handleHeaderCheckboxClick(column.key, e),
     "data-column": column.key,
     style: {
-      width: '18px',
-      height: '18px',
-      marginLeft: '10px',
-      cursor: 'pointer',
-      accentColor: '#066768',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
+      accentColor: '#066768'
     }
   }), column.title && /*#__PURE__*/React$1.createElement(ColumnLabel, null, column.title), (column.filter || column.sort) && /*#__PURE__*/React$1.createElement(ColumnActions, null, column.sort && /*#__PURE__*/React$1.createElement(IconButton, {
     ref: el => iconRefs.current[`sort-${column.key}`] = el,
@@ -42070,6 +42061,18 @@ styled.div`
     }
   `}
 `;
+const CheckboxInput = styled.input`
+  width: 18px;
+  height: 18px;
+  margin: 0;
+  accent-color: ${props => props.buttonColor || '#066768'};
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
 const HeroButton = styled.button`
   display: flex;
   align-items: center;
@@ -42713,6 +42716,7 @@ const TableBody = /*#__PURE__*/forwardRef(({
   onDropdownSelected = () => {},
   onCheckboxClick = () => {},
   onHeaderCheckboxClick = () => {},
+  disableCheckboxTooltipText = "",
   onHeroClick = () => {},
   onEditableClick = () => {},
   isEditMode = false,
@@ -43116,12 +43120,12 @@ const TableBody = /*#__PURE__*/forwardRef(({
                 hoverTextColor: "#B1B1B1",
                 hoverBackgroundColor: "#E6F0F0",
                 hoverBorderColor: "#D9D9D9",
+                disabled: true,
                 disabledTextColor: "#B1B1B1",
-                disabledBackgroundColor: focusedRowIndex === rowIndex ? "#D1E7E7" : hoveredRowIndex === rowIndex ? "#E6F0F0" : "#FFF",
                 disabledBorderColor: "#D9D9D9",
+                disabledBackgroundColor: focusedRowIndex === rowIndex ? "#D1E7E7" : hoveredRowIndex === rowIndex ? "#E6F0F0" : "#FFF",
                 width: "100px",
-                height: "32px",
-                disabled: true
+                height: "32px"
               }));
             } else if (lowerValue === "draft") {
               return /*#__PURE__*/React$1.createElement(ButtonWrapper, {
@@ -43343,24 +43347,15 @@ const TableBody = /*#__PURE__*/forwardRef(({
             return /*#__PURE__*/React$1.createElement("div", {
               style: {
                 display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                width: "100%",
-                height: "100%"
+                alignItems: "center"
               }
-            }, /*#__PURE__*/React$1.createElement("input", {
+            }, /*#__PURE__*/React$1.createElement(CheckboxInput, {
               type: "checkbox",
               checked: isChecked,
               disabled: isDisabled,
+              buttonColor: buttonColor,
               onChange: e => handleCheckboxClick(row, column.key, e),
-              onClick: e => e.stopPropagation(),
-              style: {
-                width: "18px",
-                height: "18px",
-                cursor: isDisabled ? "not-allowed" : "pointer",
-                accentColor: buttonColor,
-                opacity: isDisabled ? 0.5 : 1
-              }
+              onClick: e => e.stopPropagation()
             }));
           } catch (e) {
             console.warn('Error formatting checkbox:', e);
@@ -46990,6 +46985,7 @@ const Table = props => {
     onCheckboxClick = () => {},
     onHeaderCheckboxClick = () => {},
     headerCheckboxStates = {},
+    disableCheckboxTooltipText = "",
     onHeroClick = () => {},
     dotIndicatorColor = '#34D399',
     onEditableClick = () => {},
@@ -47134,6 +47130,7 @@ const Table = props => {
     onDropdownSelected: onDropdownSelected,
     onCheckboxClick: onCheckboxClick,
     onHeaderCheckboxClick: onHeaderCheckboxClick,
+    disableCheckboxTooltipText: disableCheckboxTooltipText,
     onHeroClick: onHeroClick,
     onEditableClick: onEditableClick,
     isEditMode: isEditMode,
@@ -57762,27 +57759,32 @@ OverlayTemplateDialog.propTypes = {
 // Main Component
 const OverlayDropdown = _ref => {
   let {
+    // Data / selection
     data = [],
     value,
     onSelectClick,
+    // Label / placeholder
+    label,
+    labelEmptyValue,
+    showLabelOnTop,
+    labelColor,
+    placeHolder,
+    placeHolderColor,
+    // Behavior
+    required = false,
     disabled = false,
     isDarkerBackground = false,
-    required = false,
+    editableDigitalCoupon = false,
+    // Appearance
     selectedColor = "#066768",
     hoverColor = "#E6F0F0",
-    dropdownMaxHeight = "600px",
+    // Sizing
     width = "100%",
     minWidth = "unset",
+    dropdownWidth = "100%",
+    dropdownMaxHeight = "600px",
     height = "auto",
-    label,
-    labelEmptyValue,
-    showLabelOnTop,
-    placeHolder,
-    labelColor,
-    placeHolderColor,
     margin = "8px",
-    dropdownWidth = "100%",
-    editableDigitalCoupon = false,
     ...props
   } = _ref;
   const [open, setOpen] = useState(false);