kupos-ui-components-lib 7.0.7 → 7.0.9

package/dist/components/FilterBar/ServiceFilter.js

@@ -49,16 +49,40 @@ class ServiceFilter extends React.Component {
         this.setState({ addMargin: window.scrollY > 0 });
     }
     sortFilters(filtersArray) {
+        // Define the desired filter order
+        const FILTER_ORDER = [
+            "special_departure",
+            "time",
+            "tipo",
+            "seat_types",
+            "operator",
+            "train_type",
+            "amenities",
+        ];
+        // Create array with original indices preserved
         let newArr = [];
-        filtersArray.forEach((val) => {
+        filtersArray.forEach((val, originalIndex) => {
             if (val.type === "seat_types") {
-                let newSeatOrder = val.options.sort((a, b) => SEAT_ORDER.indexOf(a.label) - SEAT_ORDER.indexOf(b.label));
-                newArr.push(Object.assign(Object.assign({}, val), { options: newSeatOrder }));
+                // Preserve original option indices before sorting
+                let optionsWithOriginalIndex = val.options.map((opt, optIndex) => (Object.assign(Object.assign({}, opt), { originalOptionIndex: optIndex })));
+                let newSeatOrder = [...optionsWithOriginalIndex].sort((a, b) => SEAT_ORDER.indexOf(a.label) - SEAT_ORDER.indexOf(b.label));
+                newArr.push(Object.assign(Object.assign({}, val), { options: newSeatOrder, originalIndex }));
             }
             else {
-                newArr.push(val);
+                newArr.push(Object.assign(Object.assign({}, val), { originalIndex }));
             }
         });
+        newArr.sort((a, b) => {
+            const indexA = FILTER_ORDER.indexOf(a.type);
+            const indexB = FILTER_ORDER.indexOf(b.type);
+            if (indexA !== -1 && indexB !== -1)
+                return indexA - indexB;
+            if (indexA !== -1)
+                return -1;
+            if (indexB !== -1)
+                return 1;
+            return 0;
+        });
         return newArr;
     }
     clearFilter() {
@@ -203,7 +227,9 @@ class ServiceFilter extends React.Component {
                                 ? val.spText
                                 : val.label;
                     }
-                    return (React.createElement("div", { key: i, onClick: () => onClick(i), style: {
+                    return (React.createElement("div", { key: i, onClick: () => onClick(val.originalOptionIndex !== undefined
+                            ? val.originalOptionIndex
+                            : i), style: {
                             margin: (val === null || val === void 0 ? void 0 : val.active) ? "3px 0" : "0",
                             backgroundColor: val.active
                                 ? this.props.colors.selectedColor
@@ -216,7 +242,7 @@ class ServiceFilter extends React.Component {
                             ? `text-[${this.props.colors.selectedTextColor}]`
                             : ""} ${val.active ? "bold-text" : ""}` },
                         val.icon && this.props.icons && (React.createElement("img", { src: iconKey, alt: val.icon, className: "w-[20px] h-[20px] mr-[10px] " })),
-                        label.charAt(0).toUpperCase() + label.slice(1).toLowerCase()));
+                        React.createElement("span", { className: "capitalize" }, label.toLowerCase())));
                 }))));
     }
     render() {
@@ -236,7 +262,7 @@ class ServiceFilter extends React.Component {
                 React.createElement("div", { className: "text-[13.33px] pb-[10px]" }, sortedFilters === null || sortedFilters === void 0 ? void 0 : sortedFilters.map((val, key) => {
                     var _a;
                     return ((_a = val.options) === null || _a === void 0 ? void 0 : _a.length)
-                        ? this.renderFilterItem(val, (i) => onFilterSelected(key, i), key)
+                        ? this.renderFilterItem(val, (i) => onFilterSelected(val.originalIndex, i), key)
                         : null;
                 }))),
             React.createElement("div", { onClick: this.clearFilter, className: `group text-[13.33px] bold-text items-center cursor-pointer absolute flex justify-center bg-[#eaeaea] pt-[35px] pb-[7px] w-full left-0 z-[1] -bottom-[30px] rounded-b-[10px] transition-all duration-300 ease-in-out ${hasActiveFilters

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -343,6 +343,13 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
     const getNumberOfSeats = () => {
         return serviceItem.seat_types.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
     };
+    // const truncateSeatLabel = (label: string | number): string => {
+    //   if (typeof label !== "string") return String(label);
+    //   if (label.includes("(")) return label;
+    //   const words = label.trim().split(/\s+/);
+    //   if (words.length <= 2) return label;
+    //   return `${words[0]} ${words[1]} ${words[2].charAt(0)}...`;
+    // };
     // Helper function to truncate seat labels with more than 2 words
     const truncateSeatLabel = (label) => {
         if (typeof label !== "string")
@@ -351,10 +358,15 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
         if (label.includes("("))
             return label;
         const words = label.trim().split(/\s+/);
-        if (words.length <= 2)
+        // Helper to truncate a word if it's longer than 5 characters
+        const truncateWord = (word) => word.length > 5 ? word.slice(0, 3) + "..." : word;
+        if (words.length === 1)
             return label;
-        // Take first 2 words + first letter of 3rd word + "..."
-        return `${words[0]} ${words[1]} ${words[2].charAt(0)}...`;
+        if (words.length === 2) {
+            return `${words[0]} ${truncateWord(words[1])}`;
+        }
+        // 3+ words: first word + truncated 2nd word + first letter of 3rd word + "..."
+        return `${words[0]} ${truncateWord(words[1])} ${words[2].charAt(0)}...`;
     };
     const getSeatNames = () => {
         const uniqueSeats = getUniqueSeats();
@@ -551,11 +563,14 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                                         (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dep_time.includes("PM"))
                                         ? null
                                         : DateService.ampmOnly(serviceItem.dep_time))) : (React.createElement("div", { className: "font-[900] bold-text" }, DateService.formatTime(serviceItem.dep_time))),
-                                serviceItem.boarding_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service", style: {
+                                serviceItem.boarding_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px] text-white px-3 py-2 rounded-[7px] whitespace-nowrap z-10 shadow-service", style: {
                                         backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor,
                                         zIndex: 100,
+                                        left: "clamp(80%, 100% - (100vw - 1400px) * 0.05, 100%)",
                                     } },
-                                    React.createElement("div", { className: "tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 \n                 border-t-8 border-b-8 border-r-8 \n                 border-t-transparent border-b-transparent", style: { borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } }),
+                                    React.createElement("div", { className: "tooltip-arrow absolute top-[5px] -left-[8px] w-0 h-0 \n                   border-t-[10px] border-b-[10px] border-r-[10px] \n                   border-t-transparent border-b-transparent", style: {
+                                            borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor,
+                                        } }),
                                     React.createElement("div", { className: "text-center text-[14px] font-normal", style: { fontWeight: 400 } }, renderStages(serviceItem.boarding_stages, 1, busStage, hideBoardingTime((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.api_type) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.apiType))))))),
                             !isCiva && (React.createElement("div", { className: "h-[20px] flex items-center group relative" },
                                 React.createElement("div", { className: "font-[900] bold-text" }, removeArrivalTime
@@ -563,11 +578,12 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                                     : serviceItem.arr_time
                                         ? DateService.formatTime(serviceItem.arr_time)
                                         : null),
-                                serviceItem.dropoff_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service", style: {
+                                serviceItem.dropoff_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px]  text-white px-3 py-2 rounded-[7px] whitespace-nowrap z-10 shadow-service", style: {
                                         backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor,
                                         zIndex: 100,
+                                        left: "clamp(80%, 100% - (100vw - 1400px) * 0.05, 100%)",
                                     } },
-                                    React.createElement("div", { className: "tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 \n                   border-t-8 border-b-8 border-r-8 \n                   border-t-transparent border-b-transparent", style: {
+                                    React.createElement("div", { className: "tooltip-arrow absolute top-[5px] -left-[8px] w-0 h-0 \n                   border-t-[10px] border-b-[10px] border-r-[10px] \n                   border-t-transparent border-b-transparent", style: {
                                             borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor,
                                         } }),
                                     React.createElement("div", { className: "text-center text-[14px] font-normal", style: { fontWeight: 400 } }, renderStages(serviceItem.dropoff_stages, 2, busStage, hideBoardingTime((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.api_type) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.apiType)))))))))),

package/dist/styles.css

@@ -36,6 +36,9 @@
 .top-\[2px\] {
   top: 2px;
 }
+.top-\[5px\] {
+  top: 5px;
+}
 .top-\[15px\] {
   top: 15px;
 }
@@ -81,6 +84,9 @@
 .-left-\[7px\] {
   left: calc(7px * -1);
 }
+.-left-\[8px\] {
+  left: calc(8px * -1);
+}
 .left-1\/2 {
   left: calc(1/2 * 100%);
 }
@@ -517,6 +523,9 @@
 .overflow-y-hidden {
   overflow-y: hidden;
 }
+.rounded-\[7px\] {
+  border-radius: 7px;
+}
 .rounded-\[8px\] {
   border-radius: 8px;
 }
@@ -562,10 +571,18 @@
   border-top-style: var(--tw-border-style);
   border-top-width: 8px;
 }
+.border-t-\[10px\] {
+  border-top-style: var(--tw-border-style);
+  border-top-width: 10px;
+}
 .border-r-8 {
   border-right-style: var(--tw-border-style);
   border-right-width: 8px;
 }
+.border-r-\[10px\] {
+  border-right-style: var(--tw-border-style);
+  border-right-width: 10px;
+}
 .border-b {
   border-bottom-style: var(--tw-border-style);
   border-bottom-width: 1px;
@@ -574,6 +591,10 @@
   border-bottom-style: var(--tw-border-style);
   border-bottom-width: 8px;
 }
+.border-b-\[10px\] {
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 10px;
+}
 .border-l-8 {
   border-left-style: var(--tw-border-style);
   border-left-width: 8px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kupos-ui-components-lib",
-  "version": "7.0.7",
+  "version": "7.0.9",
   "description": "A reusable UI components package",
   "publishConfig": {
     "access": "public"

package/src/components/FilterBar/ServiceFilter.tsx

@@ -76,18 +76,47 @@ class ServiceFilter extends React.Component<
   }
 
   sortFilters(filtersArray: any[]) {
+    // Define the desired filter order
+    const FILTER_ORDER = [
+      "special_departure",
+      "time",
+      "tipo",
+      "seat_types",
+      "operator",
+      "train_type",
+      "amenities",
+    ];
+
+    // Create array with original indices preserved
     let newArr: any[] = [];
-    filtersArray.forEach((val) => {
+    filtersArray.forEach((val, originalIndex) => {
       if (val.type === "seat_types") {
-        let newSeatOrder = val.options.sort(
+        // Preserve original option indices before sorting
+        let optionsWithOriginalIndex = val.options.map(
+          (opt: any, optIndex: number) => ({
+            ...opt,
+            originalOptionIndex: optIndex,
+          })
+        );
+        let newSeatOrder = [...optionsWithOriginalIndex].sort(
           (a: any, b: any) =>
             SEAT_ORDER.indexOf(a.label) - SEAT_ORDER.indexOf(b.label)
         );
-        newArr.push({ ...val, options: newSeatOrder });
+        newArr.push({ ...val, options: newSeatOrder, originalIndex });
       } else {
-        newArr.push(val);
+        newArr.push({ ...val, originalIndex });
       }
     });
+
+    newArr.sort((a, b) => {
+      const indexA = FILTER_ORDER.indexOf(a.type);
+      const indexB = FILTER_ORDER.indexOf(b.type);
+      if (indexA !== -1 && indexB !== -1) return indexA - indexB;
+      if (indexA !== -1) return -1;
+      if (indexB !== -1) return 1;
+      return 0;
+    });
+
     return newArr;
   }
 
@@ -278,7 +307,13 @@ class ServiceFilter extends React.Component<
               return (
                 <div
                   key={i}
-                  onClick={() => onClick(i)}
+                  onClick={() =>
+                    onClick(
+                      val.originalOptionIndex !== undefined
+                        ? val.originalOptionIndex
+                        : i
+                    )
+                  }
                   style={{
                     margin: val?.active ? "3px 0" : "0",
                     backgroundColor: val.active
@@ -304,7 +339,7 @@ class ServiceFilter extends React.Component<
                       className="w-[20px] h-[20px] mr-[10px] "
                     />
                   )}
-                  {label.charAt(0).toUpperCase() + label.slice(1).toLowerCase()}
+                  <span className="capitalize">{label.toLowerCase()}</span>
                 </div>
               );
             })}
@@ -337,7 +372,7 @@ class ServiceFilter extends React.Component<
               val.options?.length
                 ? this.renderFilterItem(
                     val,
-                    (i) => onFilterSelected(key, i),
+                    (i) => onFilterSelected(val.originalIndex, i),
                     key
                   )
                 : null

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -446,15 +446,31 @@ function ServiceItemPB({
     ).length;
   };
 
+  // const truncateSeatLabel = (label: string | number): string => {
+  //   if (typeof label !== "string") return String(label);
+  //   if (label.includes("(")) return label;
+  //   const words = label.trim().split(/\s+/);
+  //   if (words.length <= 2) return label;
+  //   return `${words[0]} ${words[1]} ${words[2].charAt(0)}...`;
+  // };
+
   // Helper function to truncate seat labels with more than 2 words
   const truncateSeatLabel = (label: string | number): string => {
     if (typeof label !== "string") return String(label);
     // Don't truncate if label contains parentheses (e.g., "Cama (180°)")
     if (label.includes("(")) return label;
     const words = label.trim().split(/\s+/);
-    if (words.length <= 2) return label;
-    // Take first 2 words + first letter of 3rd word + "..."
-    return `${words[0]} ${words[1]} ${words[2].charAt(0)}...`;
+
+    // Helper to truncate a word if it's longer than 5 characters
+    const truncateWord = (word: string) =>
+      word.length > 5 ? word.slice(0, 3) + "..." : word;
+
+    if (words.length === 1) return label;
+    if (words.length === 2) {
+      return `${words[0]} ${truncateWord(words[1])}`;
+    }
+    // 3+ words: first word + truncated 2nd word + first letter of 3rd word + "..."
+    return `${words[0]} ${truncateWord(words[1])} ${words[2].charAt(0)}...`;
   };
 
   const getSeatNames = () => {
@@ -907,17 +923,20 @@ function ServiceItemPB({
                       )}
                       {serviceItem.boarding_stages && (
                         <div
-                          className="hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service"
+                          className="hidden group-hover:block absolute -top-[8px] text-white px-3 py-2 rounded-[7px] whitespace-nowrap z-10 shadow-service"
                           style={{
                             backgroundColor: colors?.tooltipColor,
                             zIndex: 100,
+                            left: "clamp(80%, 100% - (100vw - 1400px) * 0.05, 100%)",
                           }}
                         >
                           <div
-                            className="tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 
-                 border-t-8 border-b-8 border-r-8 
-                 border-t-transparent border-b-transparent"
-                            style={{ borderRightColor: colors?.tooltipColor }}
+                            className="tooltip-arrow absolute top-[5px] -left-[8px] w-0 h-0 
+                   border-t-[10px] border-b-[10px] border-r-[10px] 
+                   border-t-transparent border-b-transparent"
+                            style={{
+                              borderRightColor: colors?.tooltipColor,
+                            }}
                           ></div>
                           <div
                             className="text-center text-[14px] font-normal"
@@ -949,15 +968,16 @@ function ServiceItemPB({
                         {/* Dropping stage tooltip */}
                         {serviceItem.dropoff_stages && (
                           <div
-                            className="hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service"
+                            className="hidden group-hover:block absolute -top-[8px]  text-white px-3 py-2 rounded-[7px] whitespace-nowrap z-10 shadow-service"
                             style={{
                               backgroundColor: colors?.tooltipColor,
                               zIndex: 100,
+                              left: "clamp(80%, 100% - (100vw - 1400px) * 0.05, 100%)",
                             }}
                           >
                             <div
-                              className="tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 
-                   border-t-8 border-b-8 border-r-8 
+                              className="tooltip-arrow absolute top-[5px] -left-[8px] w-0 h-0 
+                   border-t-[10px] border-b-[10px] border-r-[10px] 
                    border-t-transparent border-b-transparent"
                               style={{
                                 borderRightColor: colors?.tooltipColor,