sag_components 2.0.0-beta196 → 2.0.0-beta198

package/dist/index.esm.js

@@ -10579,23 +10579,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('');
@@ -11037,22 +11038,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('');
@@ -34874,17 +34876,18 @@ css`
  * • onApply(start,end) — callback, both numbers (inclusive)
  * • onCancel()         — callback
  */
-const WeeksCalendar = ({
-  year,
-  defaultStartWeek = null,
-  defaultEndWeek = null,
-  backgroundColor = "#066768",
-  hoverBackgroundColor = "#E6F0F0",
-  allowedWeekRange = null,
-  // New prop for range restriction
-  onApply,
-  onCancel
-}) => {
+const WeeksCalendar = _ref => {
+  let {
+    year,
+    defaultStartWeek = null,
+    defaultEndWeek = null,
+    backgroundColor = "#066768",
+    hoverBackgroundColor = "#E6F0F0",
+    allowedWeekRange = null,
+    // New prop for range restriction
+    onApply,
+    onCancel
+  } = _ref;
   // state -------------------------------------------------
   const [startWeek, setStartWeek] = useState(defaultStartWeek);
   const [endWeek, setEndWeek] = useState(defaultEndWeek);
@@ -35023,28 +35026,22 @@ const StyledInput$1 = styled.input`
   box-sizing: border-box;
   color: ${props => props.disabled ? '#888' : (props.isFocused || props.value ? props.textColor : '#757575') || '#333'};
   cursor: ${props => props.disabled ? 'not-allowed' : 'text'};
-  
-  &:disabled {
-    background-color: #f5f5f5;
-    cursor: not-allowed;
-  }
 `;
 const StyledLabel = styled.label`
   font-size: 14px;
+  /* width: ${props => props.isFocused || props.hasValue ? 'auto' : '150px'}; */
   color: ${props => props.disabled ? '#888' : (props.isFocused || props.hasValue ? props.borderColorFocus : '#757575') || '#333'};
   position: absolute;
   top: ${props => props.isFocused || props.hasValue ? '0px' : '50%'};
   left: 15px;
   background-color: ${props => props.isFocused || props.hasValue ? 'white' : 'transparent'};
   transform: translateY(-50%);
-  transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;
+  transition: top 0.3s ease, font-size 0.3s ease;
   display: flex;
   font-weight: 400;
   align-items: center;
   box-sizing: border-box;
-  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
-  padding: 0 4px;
-  z-index: 1;
+  cursor: pointer;
 `;
 const RequiredIndicator = styled.span`
   color: red;
@@ -35060,13 +35057,9 @@ const OptionsContainer = styled.div`
   z-index: 999;
   ${props => props.showAbove ? `
     bottom: 100%;
-    margin-bottom: 4px;
   ` : `
     top: 100%;
-    margin-top: 4px;
   `}
-  left: 0;
-  right: 0;
 `;
 const InputContainer$1 = styled.div`
   display: flex;       
@@ -35079,22 +35072,20 @@ const InputContainer$1 = styled.div`
   width: 100%;
   height: 100%;    
   box-sizing: border-box;
-  background-color: ${props => props.disabled ? '#f5f5f5' : 'transparent'};    
-  border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1'};
+  background-color: transparent;    
+  border:  1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1'};
   font-weight: 400;
   font-size: 14px;
   border-radius: 12px;
   outline: none;
   color: ${props => props.disabled ? '#888' : '#212121'};
-  position: relative;
-  transition: border-color 0.3s ease, background-color 0.3s ease;
    
   &:hover {
     border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.borderColorFocus || '#212121'};
     cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
   }
 
-  &:focus-within {  
+  &:focus {  
     border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.borderColorFocus || '#212121'}; 
   }
 `;
@@ -35104,11 +35095,6 @@ const CalendarDiv = styled.div`
   right: 10px;
   display: flex;
   align-items: center;
-  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
-  
-  svg {
-    transition: fill 0.3s ease;
-  }
 `;
 
 // src/components/WeeksPicker/WeeksPicker.jsx
@@ -40092,6 +40078,13 @@ const TableBody = /*#__PURE__*/forwardRef(({
   onCheckboxClick = () => {},
   onHeaderCheckboxClick = () => {}
 }, ref) => {
+  // MOVE ALL VALIDATION TO THE VERY TOP BEFORE ANY HOOKS
+  if (!Array.isArray(data) || !Array.isArray(columns)) {
+    console.warn("TableBody: Invalid data or columns prop");
+    return null;
+  }
+
+  // NOW ALL THE HOOKS CAN BE CALLED SAFELY
   const [hoveredRowIndex, setHoveredRowIndex] = useState(null);
   const [focusedRowIndex, setFocusedRowIndex] = useState(null);
   const [isCommentModalOpen, setIsCommentModalOpen] = useState(false);
@@ -40104,12 +40097,6 @@ const TableBody = /*#__PURE__*/forwardRef(({
   const [hasUserInteracted, setHasUserInteracted] = useState(false);
   const [hasInitialValue, setHasInitialValue] = useState(false);
 
-  // Early return for invalid data
-  if (!Array.isArray(data) || !Array.isArray(columns)) {
-    console.warn("TableBody: Invalid data or columns prop");
-    return null;
-  }
-
   // Expose methods to parent component via ref
   useImperativeHandle(ref, () => ({
     clearFocus: () => {
@@ -40682,7 +40669,7 @@ const TableBody = /*#__PURE__*/forwardRef(({
     };
   }, []);
 
-  // Return null if no data
+  // HANDLE SPECIAL CASE: EMPTY DATA AFTER ALL HOOKS
   if (data.length === 0) {
     return /*#__PURE__*/React$1.createElement(StyledTableBody, {
       ref: ref
@@ -54556,10 +54543,11 @@ const DropdownList = styled.ul`
       `}
 `;
 const SectionDiv = styled.div`
-  ${({
-  $showBorder,
-  margin
-}) => {
+  ${_ref => {
+  let {
+    $showBorder,
+    margin
+  } = _ref;
   switch ($showBorder) {
     case 'Template Offer':
       return css`border-top: 1px solid #e6e2e2ff;
@@ -54744,15 +54732,16 @@ function validateField(value, param) {
   if (param.type === 'percent' && Number(value) > 100) return 'Max 100%';
   return null;
 }
-const OverlayTemplateDialog = ({
-  open,
-  onClose,
-  onApply,
-  template,
-  params,
-  buttonColor = '#1db6ab',
-  buttonHoverColor = '#066768'
-}) => {
+const OverlayTemplateDialog = _ref => {
+  let {
+    open,
+    onClose,
+    onApply,
+    template,
+    params,
+    buttonColor = '#1db6ab',
+    buttonHoverColor = '#066768'
+  } = _ref;
   const [fields, setFields] = useState(() => params.map(() => ''));
   const [touched, setTouched] = useState(() => params.map(() => false));
   if (!open) return null;