sag_components 2.0.0-beta195 → 2.0.0-beta196

package/dist/index.d.ts

@@ -1282,7 +1282,7 @@ declare function ModalWithOverlay(props: any): react_jsx_runtime.JSX.Element;
 
 declare function DropdownNew(props: any): react_jsx_runtime.JSX.Element;
 
-declare function WeeksPicker({ label, disabled, borderColor, borderColorFocus, textColor, hoverColor, required, placeholder, borderRadius, year, width, height, withMarginBottom, onChange, selectedValue, }: {
+declare function WeeksPicker({ label, disabled, borderColor, borderColorFocus, textColor, hoverColor, required, placeholder, borderRadius, year, width, height, withMarginBottom, onChange, selectedValue, allowedWeekRange, restrictToRange, }: {
     label: any;
     disabled: any;
     borderColor: any;
@@ -1298,6 +1298,8 @@ declare function WeeksPicker({ label, disabled, borderColor, borderColorFocus, t
     withMarginBottom?: boolean;
     onChange: any;
     selectedValue: any;
+    allowedWeekRange?: any;
+    restrictToRange?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
 declare function Input({ label, labelEmptyValue, size, selectedValue, placeHolder, onChange, onClick, onBlur, required, disabled, isDarkerBackground, width, height, error, errorMessage, labelColor, leftIcon, rightIcon, password, leftIconOnClick, rightIconOnClick, multiline, rows, maxLength, }: {

package/dist/index.esm.js

@@ -12252,13 +12252,16 @@ const Td$1 = styled.td`
 `;
 const Tr = styled.tr`
   border-bottom: 1px solid #f3f4f6;
-  ${({
-  enableHover,
-  selectHoverColor
-}) => enableHover && `&:hover {
+  ${_ref => {
+  let {
+    enableHover,
+    selectHoverColor
+  } = _ref;
+  return enableHover && `&:hover {
       background-color: ${selectHoverColor};
       cursor: pointer;
-    }`}
+    }`;
+}}
 `;
 const InfoText = styled.div`
   font-weight: 400;
@@ -34719,6 +34722,8 @@ const ModalWithOverlay = props => {
   }, children)));
 };
 
+// src/components/WeeksPicker/WeeksCalendar.styles.js
+
 /* ──────────────────────────────────────────
    COLORS  – map to your design-system tokens
    Change only here if the palette shifts
@@ -34730,7 +34735,9 @@ const c = {
   primary: "#016672",
   // apply / highlight
   primaryLight: "#d1e7ea",
-  border: "#e0e0e0"
+  border: "#e0e0e0",
+  disabled: "#f5f5f5",
+  disabledText: "#bdbdbd"
 };
 
 /* ───────────────────────── wrapper */
@@ -34770,34 +34777,56 @@ const WeekCell = styled.div`
   text-align: center;
   cursor: pointer;
   color: ${c.textSecondary};
-  transition: background 0.15s ease;
-      border-radius: 4px;
+  transition: background 0.15s ease, opacity 0.15s ease, color 0.15s ease;
+  border-radius: 4px;
 
+  /* Disabled state - highest priority */
   ${({
-  $selected
-}) => $selected && css`
+  $disabled
+}) => $disabled && css`
+      opacity: 0.3;
+      cursor: not-allowed;
+      background: ${c.disabled} !important;
+      color: ${c.disabledText} !important;
+      
+      &:hover {
+        background: ${c.disabled} !important;
+        color: ${c.disabledText} !important;
+      }
+    `}
 
+  /* Selected state - only if not disabled */
+  ${({
+  $selected,
+  $disabled
+}) => $selected && !$disabled && css`
       background: ${c.primary};
       color: #FFFFFF;
     `}
 
-  /* highlight range interior lighter */
+  /* Range middle highlighting - only if not disabled */
   ${({
-  $isRangeMiddle
-}) => $isRangeMiddle && css`
+  $isRangeMiddle,
+  $disabled
+}) => $isRangeMiddle && !$disabled && css`
       background: ${c.primaryLight};
       border-radius: 0px;
       color: ${c.text};
     `}
 
-  &:hover {
-    background: ${c.primaryLight};
-    color: ${c.text};
-  }
+  /* Hover state - only if not disabled */
+  ${({
+  $disabled
+}) => !$disabled && css`
+      &:hover {
+        background: ${c.primaryLight};
+        color: ${c.text};
+      }
+    `}
+
+  /* Typography */
   text-align: center;
   font-feature-settings: "liga" off;
-
-  /* Content/P3 Regular */
   font-family: Poppins;
   font-size: 12px;
   font-style: normal;
@@ -34830,15 +34859,20 @@ css`
   }
 `;
 
+// src/components/WeeksPicker/WeeksCalendar.jsx
+
 /**
  * WeeksCalendar
  * -------------
  * Props
- * • year               – four-digit year (required)
- * • defaultStartWeek   – number | null
- * • defaultEndWeek     – number | null
- * • onApply(start,end) – callback, both numbers (inclusive)
- * • onCancel()         – callback
+ * • year               — four-digit year (required)
+ * • defaultStartWeek   — number | null
+ * • defaultEndWeek     — number | null
+ * • backgroundColor    — string (default: "#066768")
+ * • hoverBackgroundColor — string (default: "#E6F0F0")
+ * • allowedWeekRange   — { startWeek: number, endWeek: number } | null
+ * • onApply(start,end) — callback, both numbers (inclusive)
+ * • onCancel()         — callback
  */
 const WeeksCalendar = ({
   year,
@@ -34846,6 +34880,8 @@ const WeeksCalendar = ({
   defaultEndWeek = null,
   backgroundColor = "#066768",
   hoverBackgroundColor = "#E6F0F0",
+  allowedWeekRange = null,
+  // New prop for range restriction
   onApply,
   onCancel
 }) => {
@@ -34863,14 +34899,29 @@ const WeeksCalendar = ({
   const hasSelection = startWeek !== null;
   const isRange = hasSelection && endWeek !== null && endWeek !== startWeek;
   const weeks = useMemo(() => [...Array(53)].map((_, i) => i + 1), []);
+
+  // Check if a week is disabled based on allowed range
+  const isWeekDisabled = week => {
+    if (!allowedWeekRange) return false;
+    const {
+      startWeek: allowedStart,
+      endWeek: allowedEnd
+    } = allowedWeekRange;
+    return week < allowedStart || week > allowedEnd;
+  };
   const handleCellClick = week => {
-    // first click → start
+    // Don't allow selection of disabled weeks
+    if (isWeekDisabled(week)) {
+      return;
+    }
 
+    // first click → start
     if (!hasSelection) {
       setStartWeek(week);
       setEndWeek(null);
       return;
     }
+
     // second click → decide range or single
     if (hasSelection && endWeek === null) {
       // second click on same cell turns it to single selection
@@ -34883,6 +34934,7 @@ const WeeksCalendar = ({
       setStartWeek(week < startWeek ? week : startWeek);
       return;
     }
+
     // any later click resets selection and starts over
     setStartWeek(week);
     setEndWeek(null);
@@ -34898,11 +34950,14 @@ const WeeksCalendar = ({
     columns: 6
   }, weeks.map(wk => {
     const selected = wk === startWeek || isRange && wk >= startWeek && wk <= endWeek;
+    const disabled = isWeekDisabled(wk);
+    const isRangeMiddle = selected && wk !== startWeek && wk !== endWeek;
     return /*#__PURE__*/React$1.createElement(WeekCell, {
       key: wk,
       "data-week": wk,
       $selected: selected,
-      $isRangeMiddle: selected && wk !== startWeek && wk !== endWeek,
+      $isRangeMiddle: isRangeMiddle,
+      $disabled: disabled,
       onClick: () => handleCellClick(wk)
     }, wk);
   })), /*#__PURE__*/React$1.createElement(Footer, null, /*#__PURE__*/React$1.createElement(Button$1, {
@@ -34936,6 +34991,12 @@ WeeksCalendar.propTypes = {
   year: PropTypes.number.isRequired,
   defaultStartWeek: PropTypes.number,
   defaultEndWeek: PropTypes.number,
+  backgroundColor: PropTypes.string,
+  hoverBackgroundColor: PropTypes.string,
+  allowedWeekRange: PropTypes.shape({
+    startWeek: PropTypes.number.isRequired,
+    endWeek: PropTypes.number.isRequired
+  }),
   onApply: PropTypes.func.isRequired,
   onCancel: PropTypes.func
 };
@@ -34962,22 +35023,28 @@ 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;
+  transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;
   display: flex;
   font-weight: 400;
   align-items: center;
   box-sizing: border-box;
-  cursor: pointer;
+  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+  padding: 0 4px;
+  z-index: 1;
 `;
 const RequiredIndicator = styled.span`
   color: red;
@@ -34993,9 +35060,13 @@ 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;       
@@ -35008,20 +35079,22 @@ const InputContainer$1 = styled.div`
   width: 100%;
   height: 100%;    
   box-sizing: border-box;
-  background-color: transparent;    
-  border:  1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1'};
+  background-color: ${props => props.disabled ? '#f5f5f5' : '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 {  
+  &:focus-within {  
     border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.borderColorFocus || '#212121'}; 
   }
 `;
@@ -35031,6 +35104,11 @@ 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
@@ -35050,7 +35128,11 @@ const WeeksPicker = _ref => {
     height,
     withMarginBottom = true,
     onChange,
-    selectedValue
+    selectedValue,
+    // New props for range restriction
+    allowedWeekRange = null,
+    // { startWeek: number, endWeek: number } or null
+    restrictToRange = false // boolean to enable/disable restriction
   } = _ref;
   const [value, setValue] = useState("");
   const inputRef = useRef(null);
@@ -35093,6 +35175,18 @@ const WeeksPicker = _ref => {
     };
   };
 
+  // Validate if selected weeks are within allowed range
+  const validateWeekSelection = (startWeek, endWeek) => {
+    if (!restrictToRange || !allowedWeekRange) {
+      return true;
+    }
+    const {
+      startWeek: allowedStart,
+      endWeek: allowedEnd
+    } = allowedWeekRange;
+    return startWeek >= allowedStart && endWeek <= allowedEnd && startWeek <= endWeek;
+  };
+
   // Get current parsed weeks from value
   const {
     startWeek: currentStartWeek,
@@ -35133,15 +35227,43 @@ const WeeksPicker = _ref => {
       }
     }
   }, [isOpen]);
+
+  // Validate and clear invalid selections when allowedWeekRange changes
+  useEffect(() => {
+    if (restrictToRange && allowedWeekRange && value) {
+      const {
+        startWeek,
+        endWeek
+      } = parseValueToWeeks(value);
+      if (startWeek && endWeek && !validateWeekSelection(startWeek, endWeek)) {
+        // Clear invalid selection
+        setValue("");
+        onChange("");
+      }
+    }
+  }, [allowedWeekRange, restrictToRange]);
   const handleToggle = () => {
     setIsOpen(!isOpen);
   };
   const onChangeEvent = e => {
-    onChange(e.target.value);
-    setValue(e.target.value);
+    const newValue = e.target.value;
+
+    // If restriction is enabled, validate the manual input
+    if (restrictToRange && allowedWeekRange && newValue) {
+      const {
+        startWeek,
+        endWeek
+      } = parseValueToWeeks(newValue);
+      if (startWeek && endWeek && !validateWeekSelection(startWeek, endWeek)) {
+        // Don't update if selection is outside allowed range
+        return;
+      }
+    }
+    onChange(newValue);
+    setValue(newValue);
   };
   useEffect(() => {
-    if (selectedValue) {
+    if (selectedValue !== undefined) {
       setValue(selectedValue);
     }
   }, [selectedValue]);
@@ -35216,8 +35338,17 @@ const WeeksPicker = _ref => {
     defaultStartWeek: currentStartWeek,
     defaultEndWeek: currentEndWeek,
     backgroundColor: borderColorFocus,
-    hoverBackgroundColor: hoverColor,
+    hoverBackgroundColor: hoverColor
+    // Pass restriction parameters to WeeksCalendar
+    ,
+    allowedWeekRange: restrictToRange ? allowedWeekRange : null,
     onApply: (start, end) => {
+      // Validate selection before applying
+      if (restrictToRange && allowedWeekRange && !validateWeekSelection(start, end)) {
+        // Show error or prevent selection
+        console.warn('Selected weeks are outside the allowed range');
+        return;
+      }
       const tempValue = end === start ? `Week ${start}` : `Weeks ${start} - ${end}`;
       onChange(tempValue);
       setValue(tempValue);