@idds/react 1.1.89 → 1.1.91

package/dist/index.es.js

@@ -3769,7 +3769,8 @@ function SelectDropdown({
   searchValue,
   onSearchChange,
   disabled = false,
-  showPreviewValue = true
+  showPreviewValue = true,
+  searchable = true
 }) {
   const [isOpen, setIsOpen] = useState(false);
   const [internalSearchTerm, setInternalSearchTerm] = useState("");
@@ -3844,7 +3845,7 @@ function SelectDropdown({
     const found = options.find((o) => o.value === singleSelected);
     triggerLabel = found ? found.label : placeholder;
   }
-  const filteredOptions = onSearch ? options : options.filter(
+  const filteredOptions = onSearch ? options : !searchable ? options : options.filter(
     (o) => o.label.toLowerCase().includes(searchTerm.toLowerCase())
   );
   const handleSearchChange = (e) => {
@@ -3994,7 +3995,7 @@ function SelectDropdown({
               // ← tinggi popup dapat diatur
             },
             children: [
-              /* @__PURE__ */ jsx("div", { className: "ina-select-dropdown__search", children: /* @__PURE__ */ jsx(
+              searchable && /* @__PURE__ */ jsx("div", { className: "ina-select-dropdown__search", children: /* @__PURE__ */ jsx(
                 "input",
                 {
                   type: "text",
@@ -7632,17 +7633,18 @@ function YearPicker({
         let bottom = void 0;
         let maxHeight = "400px";
         if (spaceBelow < panelRect.height && spaceAbove > spaceBelow) {
-          bottom = triggerRect.height + 4;
+          bottom = viewportHeight - triggerRect.top + 4;
           top = void 0;
           maxHeight = `${Math.min(spaceAbove - 10, 400)}px`;
         } else {
-          top = triggerRect.height + 4;
+          top = triggerRect.bottom + 4;
           bottom = void 0;
           maxHeight = `${Math.min(spaceBelow - 10, 400)}px`;
         }
         const maxWidth = `${Math.min(panelWidthValue, viewportWidth - 16)}px`;
         setPanelStyle({
-          position: "absolute",
+          position: "fixed",
+          // Use fixed to escape DatePicker panel stacking context
           top: top !== void 0 ? `${top}px` : void 0,
           bottom: bottom !== void 0 ? `${bottom}px` : void 0,
           left: left !== void 0 ? `${left}px` : void 0,
@@ -7987,17 +7989,18 @@ function MonthPicker({
         let bottom = void 0;
         let maxHeight = "300px";
         if (spaceBelow < panelRect.height && spaceAbove > spaceBelow) {
-          bottom = triggerRect.height + 4;
+          bottom = viewportHeight - triggerRect.top + 4;
           top = void 0;
           maxHeight = `${Math.min(spaceAbove - 10, 300)}px`;
         } else {
-          top = triggerRect.height + 4;
+          top = triggerRect.bottom + 4;
           bottom = void 0;
           maxHeight = `${Math.min(spaceBelow - 10, 300)}px`;
         }
         const maxWidth = `${Math.min(panelWidthValue, viewportWidth - 16)}px`;
         setPanelStyle({
-          position: "absolute",
+          position: "fixed",
+          // Use fixed to escape DatePicker panel stacking context
           top: top !== void 0 ? `${top}px` : void 0,
           bottom: bottom !== void 0 ? `${bottom}px` : void 0,
           left: left !== void 0 ? `${left}px` : void 0,
@@ -8256,6 +8259,7 @@ function DatePicker({
   const [hoveredDate, setHoveredDate] = useState(null);
   const [useRightPositioning, setUseRightPositioning] = useState(false);
   const [validatedTriggerWidth, setValidatedTriggerWidth] = useState(triggerWidth);
+  const [tempStartDate, setTempStartDate] = useState(null);
   const containerRef = useRef(null);
   const triggerRef = useRef(null);
   const panelRef = useRef(null);
@@ -8279,6 +8283,7 @@ function DatePicker({
       if (((_a = event.detail) == null ? void 0 : _a.exclude) !== containerRef.current && isOpen) {
         setIsOpen(false);
         setHoveredDate(null);
+        setTempStartDate(null);
       }
     };
     document.addEventListener(
@@ -8300,6 +8305,8 @@ function DatePicker({
       }
       setIsOpen(false);
       setHoveredDate(null);
+      setTempStartDate(null);
+      setTempStartDate(null);
     };
     if (isOpen) {
       document.addEventListener("mousedown", handleClickOutside, true);
@@ -8537,6 +8544,7 @@ function DatePicker({
       onChange("");
     } else if (mode === "range") {
       onChange(["", ""]);
+      setTempStartDate(null);
     } else {
       onChange([]);
     }
@@ -8548,11 +8556,10 @@ function DatePicker({
       onChange(formattedDate);
     } else if (mode === "range") {
       const currentSelected = selectedDates;
-      if (currentSelected.length === 0) {
-        const formattedDate = formatDate(date, dateFormat);
-        onChange([formattedDate, ""]);
-      } else if (currentSelected.length === 1) {
-        const startDate = currentSelected[0];
+      if (currentSelected.length === 0 && !tempStartDate) {
+        setTempStartDate(date);
+      } else if (currentSelected.length === 1 || tempStartDate) {
+        const startDate = tempStartDate || currentSelected[0];
         const endDate = date;
         const [start, end] = startDate <= endDate ? [startDate, endDate] : [endDate, startDate];
         const formattedStart = formatDate(start, dateFormat);
@@ -8561,10 +8568,10 @@ function DatePicker({
           formattedStart,
           formattedEnd
         ]);
+        setTempStartDate(null);
         setIsOpen(false);
       } else {
-        const formattedDate = formatDate(date, dateFormat);
-        onChange([formattedDate, ""]);
+        setTempStartDate(date);
       }
     } else if (mode === "multiple") {
       const currentSelected = selectedDates;
@@ -8719,6 +8726,9 @@ function DatePicker({
     if (mode === "single") {
       return selectedDates.length > 0 && isSameDate(date, selectedDates[0]);
     } else if (mode === "range") {
+      if (tempStartDate && isSameDate(date, tempStartDate)) {
+        return true;
+      }
       if (selectedDates.length === 1) {
         return isSameDate(date, selectedDates[0]);
       } else if (selectedDates.length === 2) {
@@ -8740,10 +8750,12 @@ function DatePicker({
   };
   const isHoveredForRange = (date) => {
     if (!date || !hoveredDate) return false;
-    if (mode === "range" && selectedDates.length === 1) {
-      const startDate = selectedDates[0];
-      const [start, end] = startDate <= hoveredDate ? [startDate, hoveredDate] : [hoveredDate, startDate];
-      return date > start && date < end;
+    if (mode === "range") {
+      const startDate = tempStartDate || (selectedDates.length > 0 ? selectedDates[0] : null);
+      if (startDate) {
+        const [start, end] = startDate <= hoveredDate ? [startDate, hoveredDate] : [hoveredDate, startDate];
+        return date > start && date < end;
+      }
     }
     return false;
   };
@@ -8766,15 +8778,17 @@ function DatePicker({
   };
   const getHoverRangePosition = (date) => {
     if (!date || !hoveredDate) return "none";
-    if (mode === "range" && selectedDates.length === 1) {
-      const startDate = selectedDates[0];
-      const [start, end] = startDate <= hoveredDate ? [startDate, hoveredDate] : [hoveredDate, startDate];
-      if (isSameDate(date, start) && isSameDate(date, end)) {
-        return "single";
+    if (mode === "range") {
+      const startDate = tempStartDate || (selectedDates.length > 0 ? selectedDates[0] : null);
+      if (startDate) {
+        const [start, end] = startDate <= hoveredDate ? [startDate, hoveredDate] : [hoveredDate, startDate];
+        if (isSameDate(date, start) && isSameDate(date, end)) {
+          return "single";
+        }
+        if (isSameDate(date, start)) return "start";
+        if (isSameDate(date, end)) return "end";
+        if (date > start && date < end) return "middle";
       }
-      if (isSameDate(date, start)) return "start";
-      if (isSameDate(date, end)) return "end";
-      if (date > start && date < end) return "middle";
     }
     return "none";
   };
@@ -9511,17 +9525,17 @@ const predefinedBrands = [
   "default"
 ];
 const defaultPrimaryColors = {
-  "--ina-primary-25": "#eff4ff",
-  "--ina-primary-50": "#d1dfff",
-  "--ina-primary-100": "#b2ccff",
-  "--ina-primary-200": "#83adff",
-  "--ina-primary-300": "#528aff",
-  "--ina-primary-400": "#3b82f6",
-  "--ina-primary-500": "#2871ff",
-  "--ina-primary-600": "#155eef",
-  "--ina-primary-700": "#004eeb",
-  "--ina-primary-800": "#0040c1",
-  "--ina-primary-900": "#01359e"
+  "--ina-primary-25": "#a3a3a3",
+  "--ina-primary-50": "#737373",
+  "--ina-primary-100": "#525252",
+  "--ina-primary-200": "#404040",
+  "--ina-primary-300": "#141414",
+  "--ina-primary-400": "#141414",
+  "--ina-primary-500": "#141414",
+  "--ina-primary-600": "#141414",
+  "--ina-primary-700": "#141414",
+  "--ina-primary-800": "#141414",
+  "--ina-primary-900": "#141414"
 };
 let currentTheme = {
   name: "default"