@asdp/ferryui 0.1.22-dev.9417 → 0.1.22-dev.9462

package/dist/index.d.mts

@@ -1316,6 +1316,10 @@ interface ServiceItem {
      * Color code for the service type
      */
     serviceTypeColor: string;
+    /**
+     * Short description of the service
+     */
+    serviceShortDescription: string;
 }
 interface ModalServiceLabels {
     title: string;

package/dist/index.d.ts

@@ -1316,6 +1316,10 @@ interface ServiceItem {
      * Color code for the service type
      */
     serviceTypeColor: string;
+    /**
+     * Short description of the service
+     */
+    serviceShortDescription: string;
 }
 interface ModalServiceLabels {
     title: string;

package/dist/index.js

@@ -6692,14 +6692,26 @@ var useStyles12 = reactComponents.makeStyles({
     display: "flex",
     gap: "1rem",
     marginBottom: "1rem",
-    flexWrap: "wrap",
-    marginTop: "1rem"
+    flexWrap: "nowrap",
+    marginTop: "1rem",
+    overflowX: "auto",
+    width: "100%",
+    paddingBottom: "8px",
+    paddingTop: "4px",
+    alignItems: "center",
+    flexShrink: 0,
+    "&::-webkit-scrollbar": {
+      display: "none"
+    },
+    msOverflowStyle: "none",
+    scrollbarWidth: "none"
   },
   circularButton: {
     borderRadius: reactComponents.tokens.borderRadius3XLarge,
     border: `1px solid ${reactComponents.tokens.colorBrandBackground}`,
     backgroundColor: brandColors["140"],
-    gap: "5px"
+    gap: "5px",
+    flexShrink: 0
   },
   buttonContent: {
     display: "flex",
@@ -6960,7 +6972,8 @@ var ModalSearchHarbor = ({
                     }
                   )
                 ] }),
-                favoriteHarbors.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.buttonContainer, children: favoriteHarbors.map((harbor) => /* @__PURE__ */ jsxRuntime.jsxs(
+                favoriteHarbors.length > 0 && //Make Favorite scroll to vertical
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.buttonContainer, children: favoriteHarbors.map((harbor) => /* @__PURE__ */ jsxRuntime.jsxs(
                   reactComponents.Button,
                   {
                     onClick: () => handleSelect(harbor),
@@ -7497,7 +7510,7 @@ var useStyles14 = reactComponents.makeStyles({
     display: "flex",
     flexDirection: "column",
     gap: "12px",
-    // maxHeight: "400px",
+    maxHeight: "700px",
     overflowY: "auto",
     padding: "2px"
   },
@@ -7694,54 +7707,56 @@ var ModalService = ({
         actionButton: reloadButton,
         imageSrc: emptyImageSrc
       }
-    ) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.serviceList, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.headerRow, children: /* @__PURE__ */ jsxRuntime.jsx(
-        reactComponents.Checkbox,
-        {
-          label: mergedLabels.selectAll,
-          checked: selectedServices.length === services.length,
-          onChange: handleToggleAll
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
-      services.map((service) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: styles.serviceItem,
-          onClick: () => handleToggleService(service.serviceTypeId),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.serviceContent, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.serviceName, children: service.serviceTypeName }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { alignSelf: "flex-start" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-                reactComponents.Badge,
+    ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.serviceList, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.headerRow, children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.Checkbox,
+          {
+            label: mergedLabels.selectAll,
+            checked: selectedServices.length === services.length,
+            onChange: handleToggleAll
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
+        services.map((service) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: styles.serviceItem,
+            onClick: () => handleToggleService(service.serviceTypeId),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.serviceContent, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.serviceName, children: service.serviceShortDescription }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { alignSelf: "flex-start" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  reactComponents.Badge,
+                  {
+                    appearance: "ghost",
+                    style: {
+                      backgroundColor: service.serviceTypeColor,
+                      color: "#ffffff",
+                      border: "none",
+                      padding: "4px 10px",
+                      height: "auto",
+                      borderRadius: "100px"
+                    },
+                    children: service.serviceTypeName
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { className: styles.serviceDescription, children: service.serviceDescription })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                reactComponents.Checkbox,
                 {
-                  appearance: "ghost",
-                  style: {
-                    backgroundColor: service.serviceTypeColor,
-                    color: "#ffffff",
-                    border: "none",
-                    padding: "4px 10px",
-                    height: "auto",
-                    borderRadius: "100px"
-                  },
-                  children: service.serviceTypeCode
+                  checked: selectedServices.includes(service.serviceTypeId),
+                  onChange: () => handleToggleService(service.serviceTypeId),
+                  onClick: (e) => e.stopPropagation()
                 }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { className: styles.serviceDescription, children: service.serviceDescription })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              reactComponents.Checkbox,
-              {
-                checked: selectedServices.includes(service.serviceTypeId),
-                onChange: () => handleToggleService(service.serviceTypeId),
-                onClick: (e) => e.stopPropagation()
-              }
-            )
-          ]
-        },
-        service.serviceTypeId
-      )),
-      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
+              )
+            ]
+          },
+          service.serviceTypeId
+        )),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {})
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.footer, children: /* @__PURE__ */ jsxRuntime.jsx(
         reactComponents.Button,
         {
@@ -7753,7 +7768,7 @@ var ModalService = ({
           children: mergedLabels.saveButton
         }
       ) })
-    ] }) }) })
+    ] }) })
   ] }) }) });
 };