@geops/rvf-mobility-web-component 0.1.117 → 0.1.118

package/package.json

@@ -2,7 +2,7 @@
   "name": "@geops/rvf-mobility-web-component",
   "license": "UNLICENSED",
   "description": "Web components for rvf in the domains of mobility and logistics.",
-  "version": "0.1.117",
+  "version": "0.1.118",
   "homepage": "https://rvf-mobility-web-component.vercel.app/",
   "type": "module",
   "main": "index.js",

package/src/SituationDetails/SituationDetails.tsx

@@ -64,7 +64,9 @@ function SituationDetails({
   useShortMonth?: boolean;
 }) {
   const { locale, t } = useI18n();
-  const [isOpen, setIsOpen] = useState(!canToggle);
+  const [openByPublicationId, setOpenByPublicationId] = useState<
+    Record<string, boolean>
+  >({});
 
   if (!situation) {
     return null;
@@ -227,50 +229,72 @@ function SituationDetails({
                     ? toShortDate(new Date(endTime), false, true, useShortMonth)
                     : undefined;
 
-                  return (
-                    <button
+                  const renderTimeInterval = (
+                    <div
                       className={twMerge(
-                        "flex w-full items-center",
-                        canToggle && "cursor-pointer",
+                        "flex-1 text-left text-sm font-bold text-balance",
+                        timeIntervalClassName,
                       )}
                       key={startTime}
-                      onClick={() => {
-                        setIsOpen(!isOpen);
-                      }}
-                      tabIndex={canToggle ? 0 : -1}
                     >
-                      <div
-                        className={twMerge(
-                          "flex-1 text-left text-sm font-bold text-balance",
-                          timeIntervalClassName,
-                        )}
+                      <span>
+                        {from && to ? `${from} – ${to}` : null}
+                        {from && !to ? t("from", { from }) : null}
+                      </span>
+                      {hasDailyTime && (
+                        <span>{` (${t("daily_from_to", {
+                          from: dailyStartTime,
+                          to: dailyEndTime,
+                        })})`}</span>
+                      )}
+                    </div>
+                  );
+
+                  if (canToggle) {
+                    return (
+                      <button
+                        className={"flex w-full cursor-pointer items-center"}
                         key={startTime}
+                        onClick={() => {
+                          if (canToggle) {
+                            setOpenByPublicationId({
+                              ...openByPublicationId,
+                              [id]: !openByPublicationId[id],
+                            });
+                          }
+                        }}
                       >
-                        <span>
-                          {from && to ? `${from} – ${to}` : null}
-                          {from && !to ? t("from", { from }) : null}
-                        </span>
-                        {hasDailyTime && (
-                          <span>{` (${t("daily_from_to", {
-                            from: dailyStartTime,
-                            to: dailyEndTime,
-                          })})`}</span>
+                        {renderTimeInterval}
+                        {index == 0 && (
+                          <>
+                            {openByPublicationId[id] ? (
+                              <ArrowUp className="text-red" />
+                            ) : (
+                              <ArrowDown className="text-red" />
+                            )}
+                          </>
                         )}
+                      </button>
+                    );
+                  } else {
+                    return (
+                      <div
+                        className={"flex w-full items-center"}
+                        key={startTime}
+                      >
+                        {renderTimeInterval}
                       </div>
-                      {canToggle && index == 0 && (
-                        <>
-                          {isOpen ? (
-                            <ArrowUp className="text-red" />
-                          ) : (
-                            <ArrowDown className="text-red" />
-                          )}
-                        </>
-                      )}
-                    </button>
-                  );
+                    );
+                  }
                 },
               )}
-              <div className={isOpen ? "my-4 flex flex-col gap-4" : "hidden"}>
+              <div
+                className={
+                  !canToggle || openByPublicationId[id]
+                    ? "my-4 flex flex-col gap-4"
+                    : "hidden"
+                }
+              >
                 {textualContent?.description && (
                   <div
                     dangerouslySetInnerHTML={{