Refactor floating panel styling hooks

js/ui/utils/floatingPanelStyles.js

@@ -0,0 +1,140 @@
+const DEFAULT_STATE = {
+  placement: "bottom",
+  alignment: "start",
+  strategy: "fixed",
+  direction: "ltr",
+  mode: "fallback",
+  fallbackTop: null,
+  fallbackLeft: null,
+};
+
+const FALLBACK_TOP_VAR = "--floating-fallback-top";
+const FALLBACK_LEFT_VAR = "--floating-fallback-left";
+
+function toCssPixel(value) {
+  if (Number.isFinite(value)) {
+    return `${value}px`;
+  }
+  if (typeof value === "string" && value.trim() !== "") {
+    return value;
+  }
+  return "auto";
+}
+
+function normalizeDirection(value) {
+  return value === "rtl" ? "rtl" : "ltr";
+}
+
+function ensureDatasetValue(element, key, value) {
+  if (!element) {
+    return;
+  }
+  if (value === undefined || value === null || value === "") {
+    delete element.dataset[key];
+    return;
+  }
+  element.dataset[key] = value;
+}
+
+export function createFloatingPanelStyles(panel) {
+  const safePanel = panel || null;
+  const state = { ...DEFAULT_STATE };
+
+  if (safePanel) {
+    safePanel.dataset.floatingPanel = "true";
+    safePanel.style.setProperty(FALLBACK_TOP_VAR, "auto");
+    safePanel.style.setProperty(FALLBACK_LEFT_VAR, "auto");
+  }
+
+  const api = {
+    element: safePanel,
+    setPlacement(value) {
+      state.placement = typeof value === "string" && value ? value : DEFAULT_STATE.placement;
+      ensureDatasetValue(safePanel, "floatingPlacement", state.placement);
+      return state.placement;
+    },
+    getPlacement() {
+      return state.placement;
+    },
+    setAlignment(value) {
+      state.alignment = typeof value === "string" && value ? value : DEFAULT_STATE.alignment;
+      ensureDatasetValue(safePanel, "floatingAlignment", state.alignment);
+      return state.alignment;
+    },
+    getAlignment() {
+      return state.alignment;
+    },
+    setStrategy(value) {
+      state.strategy = value === "absolute" ? "absolute" : DEFAULT_STATE.strategy;
+      ensureDatasetValue(safePanel, "floatingStrategy", state.strategy);
+      return state.strategy;
+    },
+    getStrategy() {
+      return state.strategy;
+    },
+    setDirection(value) {
+      state.direction = normalizeDirection(value);
+      ensureDatasetValue(safePanel, "floatingDir", state.direction);
+      return state.direction;
+    },
+    getDirection() {
+      return state.direction;
+    },
+    setMode(value) {
+      state.mode = value === "anchor" ? "anchor" : DEFAULT_STATE.mode;
+      ensureDatasetValue(safePanel, "floatingMode", state.mode);
+      return state.mode;
+    },
+    getMode() {
+      return state.mode;
+    },
+    setFallbackPosition({ top, left }) {
+      state.fallbackTop = Number.isFinite(top) ? Number(top) : null;
+      state.fallbackLeft = Number.isFinite(left) ? Number(left) : null;
+      if (safePanel) {
+        safePanel.style.setProperty(FALLBACK_TOP_VAR, toCssPixel(state.fallbackTop));
+        safePanel.style.setProperty(FALLBACK_LEFT_VAR, toCssPixel(state.fallbackLeft));
+      }
+      return { ...api.getFallbackPosition() };
+    },
+    getFallbackPosition() {
+      return {
+        top: state.fallbackTop,
+        left: state.fallbackLeft,
+      };
+    },
+    teardown() {
+      if (!safePanel) {
+        return;
+      }
+      safePanel.style.removeProperty(FALLBACK_TOP_VAR);
+      safePanel.style.removeProperty(FALLBACK_LEFT_VAR);
+      safePanel.style.removeProperty("right");
+      safePanel.style.removeProperty("bottom");
+      safePanel.style.removeProperty("position");
+      delete safePanel.dataset.floatingPanel;
+      delete safePanel.dataset.floatingPlacement;
+      delete safePanel.dataset.floatingAlignment;
+      delete safePanel.dataset.floatingStrategy;
+      delete safePanel.dataset.floatingDir;
+      delete safePanel.dataset.floatingMode;
+      state.placement = DEFAULT_STATE.placement;
+      state.alignment = DEFAULT_STATE.alignment;
+      state.strategy = DEFAULT_STATE.strategy;
+      state.direction = DEFAULT_STATE.direction;
+      state.mode = DEFAULT_STATE.mode;
+      state.fallbackTop = DEFAULT_STATE.fallbackTop;
+      state.fallbackLeft = DEFAULT_STATE.fallbackLeft;
+    },
+  };
+
+  api.setPlacement(state.placement);
+  api.setAlignment(state.alignment);
+  api.setStrategy(state.strategy);
+  api.setDirection(state.direction);
+  api.setMode(state.mode);
+
+  return api;
+}
+
+export default createFloatingPanelStyles;