@dmsi/wedgekit-react 0.0.550 → 0.0.552

package/src/darkmode.css

@@ -1,278 +0,0 @@
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-text-primary-normal: var(--color-neutral-000);
-
-    --color-text-primary-disabled: var(--color-neutral-400);
-    --color-text-primary-error: var(--color-critical-300);
-
-    --color-text-secondary-normal: var(--color-neutral-300);
-    --color-text-secondary-disabled: var(--color-neutral-400);
-    --color-text-secondary-error: var(--color-critical-300);
-
-    --color-text-success-normal: var(--color-success-200);
-    --color-text-success-disabled: var(--color-neutral-300);
-    --color-text-success-error: var(--color-critical-300);
-
-    --color-text-warning-normal: var(--color-warning-200);
-    --color-text-warning-disabled: var(--color-neutral-300);
-    --color-text-warning-error: var(--color-critical-300);
-
-    --color-text-link-normal: var(--color-link-300);
-    --color-text-link-hover: var(--color-link-400);
-    --color-text-link-active: var(--color-link-200);
-    --color-text-link-disabled: var(--color-neutral-400);
-
-    --color-border-primary-normal: var(--color-neutral-400);
-    --color-border-primary-focus: var(--color-action-300);
-    --color-border-primary-error: var(--color-critical-300);
-
-    --color-icon-primary-normal: var(--color-neutral-300);
-    --color-icon-primary-disabled: var(--color-neutral-400);
-
-    --color-icon-success-normal: var(--color-success-300);
-    --color-icon-success-disabled: var(--color-neutral-400);
-
-    --color-icon-warning-normal: var(--color-warning-300);
-    --color-icon-warning-disabled: var(--color-neutral-400);
-
-    --color-icon-critical-normal: var(--color-critical-300);
-    --color-icon-critical-disabled: var(--color-neutral-400);
-
-    --color-background-primary-normal: var(--color-neutral-600);
-    --color-background-grouped-primary-normal: var(--color-neutral-500);
-    --color-background-secondary-normal: var(--color-neutral-500);
-    --color-background-grouped-secondary-normal: var(--color-neutral-600);
-    --color-background-success-normal: var(--color-success-300);
-    --color-background-warning-normal: var(--color-warning-300);
-    --color-background-critical-normal: var(--color-critical-300);
-
-    --color-text-action-primary-normal: var(--color-action-300);
-    --color-text-action-primary-hover: var(--color-action-400);
-    --color-text-action-primary-active: var(--color-action-200);
-    --color-text-action-primary-disabled: var(--color-neutral-400);
-
-    --color-text-on-action-primary-normal: var(--color-neutral-600);
-    --color-text-on-action-primary-hover: var(--color-neutral-500);
-    --color-text-on-action-primary-active: var(--color-neutral-600);
-    --color-text-on-action-primary-disabled: var(--color-neutral-400);
-
-    --color-text-action-critical-normal: var(--color-critical-300);
-    --color-text-action-critical-hover: var(--color-critical-400);
-    --color-text-action-critical-active: var(--color-critical-200);
-    --color-text-action-critical-disabled: var(--color-neutral-400);
-
-    --color-border-action-normal: var(--color-action-300);
-    --color-border-action-hover: var(--color-action-400);
-    --color-border-action-active: var(--color-action-200);
-    --color-border-action-disabled: var(--color-neutral-450);
-
-    --color-text-critical-normal: var(--color-critical-300);
-    --color-text-critical-disabled: var(--color-neutral-300);
-    --color-text-critical-error: var(--color-critical-300);
-
-    --color-border-action-critical-normal: var(--color-critical-300);
-    --color-border-action-critical-hover: var(--color-critical-400);
-    --color-border-action-critical-active: var(--color-critical-200);
-    --color-border-action-critical-disabled: var(--color-neutral-450);
-
-    --color-icon-action-primary-normal: var(--color-neutral-000);
-    --color-icon-action-primary-hover: var(--color-action-300);
-    --color-icon-action-primary-active: var(--color-action-200);
-    --color-icon-action-primary-disabled: var(--color-neutral-400);
-
-    --color-icon-action-secondary-normal: var(--color-action-300);
-    --color-icon-action-secondary-hover: var(--color-action-400);
-    --color-icon-action-secondary-active: var(--color-action-200);
-    --color-icon-action-secondary-disabled: var(--color-neutral-400);
-
-    --color-icon-on-action-primary-normal: var(--color-neutral-600);
-    --color-icon-on-action-primary-hover: var(--color-neutral-500);
-    --color-icon-on-action-primary-active: var(--color-neutral-600);
-    --color-icon-on-action-primary-disabled: var(--color-neutral-400);
-
-    --color-icon-action-critical-normal: var(--color-critical-300);
-    --color-icon-action-critical-hover: var(--color-critical-400);
-    --color-icon-action-critical-active: var(--color-critical-200);
-    --color-icon-action-critical-disabled: var(--color-neutral-400);
-
-    --color-icon-brand-primary-normal: var(--color-brand-300);
-    --color-icon-brand-primary-hover: var(--color-brand-400);
-    --color-icon-brand-primary-active: var(--color-brand-200);
-    --color-icon-brand-primary-disabled: var(--color-neutral-400);
-
-    --color-background-action-primary-normal: var(--color-action-300);
-    --color-background-action-primary-hover: var(--color-action-400);
-    --color-background-action-primary-active: var(--color-action-200);
-    --color-background-action-primary-disabled: var(--color-neutral-450);
-
-    --color-background-action-secondary-normal: var(--color-neutral-600);
-    --color-background-action-secondary-hover: var(--color-action-500);
-    --color-background-action-secondary-active: var(--color-neutral-600);
-    --color-background-action-secondary-disabled: var(--color-neutral-450);
-
-    --color-background-brand-normal: var(--color-brand-400);
-
-    --color-background-action-critical-primary-normal: var(
-      --color-critical-300
-    );
-    --color-background-action-critical-primary-hover: var(--color-critical-400);
-    --color-background-action-critical-primary-active: var(
-      --color-critical-200
-    );
-    --color-background-action-critical-primary-disabled: var(
-      --color-neutral-450
-    );
-
-    --color-background-action-critical-secondary-normal: var(
-      --color-neutral-600
-    );
-    --color-background-action-critical-secondary-hover: var(
-      --color-critical-500
-    );
-    --color-background-action-critical-secondary-active: var(
-      --color-neutral-600
-    );
-    --color-background-action-critical-secondary-disabled: var(
-      --color-neutral-450
-    );
-  }
-}
-
-[data-theme="dark"] {
-    --color-text-primary-normal: var(--color-neutral-000);
-
-    --color-text-primary-disabled: var(--color-neutral-400);
-    --color-text-primary-error: var(--color-critical-300);
-
-    --color-text-secondary-normal: var(--color-neutral-300);
-    --color-text-secondary-disabled: var(--color-neutral-400);
-    --color-text-secondary-error: var(--color-critical-300);
-
-    --color-text-success-normal: var(--color-success-200);
-    --color-text-success-disabled: var(--color-neutral-300);
-    --color-text-success-error: var(--color-critical-300);
-
-    --color-text-warning-normal: var(--color-warning-200);
-    --color-text-warning-disabled: var(--color-neutral-300);
-    --color-text-warning-error: var(--color-critical-300);
-
-    --color-text-link-normal: var(--color-link-300);
-    --color-text-link-hover: var(--color-link-400);
-    --color-text-link-active: var(--color-link-200);
-    --color-text-link-disabled: var(--color-neutral-400);
-
-    --color-border-primary-normal: var(--color-neutral-400);
-    --color-border-primary-focus: var(--color-action-300);
-    --color-border-primary-error: var(--color-critical-300);
-
-    --color-icon-primary-normal: var(--color-neutral-300);
-    --color-icon-primary-disabled: var(--color-neutral-400);
-
-    --color-icon-success-normal: var(--color-success-300);
-    --color-icon-success-disabled: var(--color-neutral-400);
-
-    --color-icon-warning-normal: var(--color-warning-300);
-    --color-icon-warning-disabled: var(--color-neutral-400);
-
-    --color-icon-critical-normal: var(--color-critical-300);
-    --color-icon-critical-disabled: var(--color-neutral-400);
-
-    --color-background-primary-normal: var(--color-neutral-600);
-    --color-background-grouped-primary-normal: var(--color-neutral-500);
-    --color-background-secondary-normal: var(--color-neutral-500);
-    --color-background-grouped-secondary-normal: var(--color-neutral-600);
-    --color-background-success-normal: var(--color-success-300);
-    --color-background-warning-normal: var(--color-warning-300);
-    --color-background-critical-normal: var(--color-critical-300);
-
-    --color-text-action-primary-normal: var(--color-action-300);
-    --color-text-action-primary-hover: var(--color-action-400);
-    --color-text-action-primary-active: var(--color-action-200);
-    --color-text-action-primary-disabled: var(--color-neutral-400);
-
-    --color-text-on-action-primary-normal: var(--color-neutral-600);
-    --color-text-on-action-primary-hover: var(--color-neutral-500);
-    --color-text-on-action-primary-active: var(--color-neutral-600);
-    --color-text-on-action-primary-disabled: var(--color-neutral-400);
-
-    --color-text-action-critical-normal: var(--color-critical-300);
-    --color-text-action-critical-hover: var(--color-critical-400);
-    --color-text-action-critical-active: var(--color-critical-200);
-    --color-text-action-critical-disabled: var(--color-neutral-400);
-
-    --color-border-action-normal: var(--color-action-300);
-    --color-border-action-hover: var(--color-action-400);
-    --color-border-action-active: var(--color-action-200);
-    --color-border-action-disabled: var(--color-neutral-450);
-
-    --color-text-critical-normal: var(--color-critical-300);
-    --color-text-critical-disabled: var(--color-neutral-300);
-    --color-text-critical-error: var(--color-critical-300);
-
-    --color-border-action-critical-normal: var(--color-critical-300);
-    --color-border-action-critical-hover: var(--color-critical-400);
-    --color-border-action-critical-active: var(--color-critical-200);
-    --color-border-action-critical-disabled: var(--color-neutral-450);
-
-    --color-icon-action-primary-normal: var(--color-neutral-000);
-    --color-icon-action-primary-hover: var(--color-action-300);
-    --color-icon-action-primary-active: var(--color-action-200);
-    --color-icon-action-primary-disabled: var(--color-neutral-400);
-
-    --color-icon-action-secondary-normal: var(--color-action-300);
-    --color-icon-action-secondary-hover: var(--color-action-400);
-    --color-icon-action-secondary-active: var(--color-action-200);
-    --color-icon-action-secondary-disabled: var(--color-neutral-400);
-
-    --color-icon-on-action-primary-normal: var(--color-neutral-600);
-    --color-icon-on-action-primary-hover: var(--color-neutral-500);
-    --color-icon-on-action-primary-active: var(--color-neutral-600);
-    --color-icon-on-action-primary-disabled: var(--color-neutral-400);
-
-    --color-icon-action-critical-normal: var(--color-critical-300);
-    --color-icon-action-critical-hover: var(--color-critical-400);
-    --color-icon-action-critical-active: var(--color-critical-200);
-    --color-icon-action-critical-disabled: var(--color-neutral-400);
-
-    --color-icon-brand-primary-normal: var(--color-brand-300);
-    --color-icon-brand-primary-hover: var(--color-brand-400);
-    --color-icon-brand-primary-active: var(--color-brand-200);
-    --color-icon-brand-primary-disabled: var(--color-neutral-400);
-
-    --color-background-action-primary-normal: var(--color-action-300);
-    --color-background-action-primary-hover: var(--color-action-400);
-    --color-background-action-primary-active: var(--color-action-200);
-    --color-background-action-primary-disabled: var(--color-neutral-450);
-
-    --color-background-action-secondary-normal: var(--color-neutral-600);
-    --color-background-action-secondary-hover: var(--color-action-500);
-    --color-background-action-secondary-active: var(--color-neutral-600);
-    --color-background-action-secondary-disabled: var(--color-neutral-450);
-
-    --color-background-brand-normal: var(--color-brand-400);
-
-    --color-background-action-critical-primary-normal: var(
-      --color-critical-300
-    );
-    --color-background-action-critical-primary-hover: var(--color-critical-400);
-    --color-background-action-critical-primary-active: var(
-      --color-critical-200
-    );
-    --color-background-action-critical-primary-disabled: var(
-      --color-neutral-450
-    );
-
-    --color-background-action-critical-secondary-normal: var(
-      --color-neutral-600
-    );
-    --color-background-action-critical-secondary-hover: var(
-      --color-critical-500
-    );
-    --color-background-action-critical-secondary-active: var(
-      --color-neutral-600
-    );
-    --color-background-action-critical-secondary-disabled: var(
-      --color-neutral-450
-    );
-  }

package/src/fonts.css

@@ -1,23 +0,0 @@
-@font-face {
-  font-family: "Open Sans";
-  src: url("../static/open-sans.woff2") format("woff2");
-  font-weight: 100 900;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Icons";
-  src: url("../static/icons-light[FILL].woff2") format("woff2");
-  /* src: url("../static/icons-light.woff2") format("woff2"); - We needed icons-light with FILL option */
-  font-weight: 300;
-  font-style: normal;
-  font-display: block;
-}
-
-@font-face {
-  font-family: "Icons";
-  src: url("../static/icons-normal[FILL].woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal;
-  font-display: block;
-}

package/src/hooks/index.ts

@@ -1,4 +0,0 @@
-export { useKeydown } from "./useKeydown";
-export { useInfiniteScroll } from "./useInfiniteScroll";
-export { useMatchesMedia, useMatchesMobile } from "./useMatchesMedia";
-export { useTableLayout } from "./useTableLayout";

package/src/hooks/useInfiniteScroll.tsx

@@ -1,40 +0,0 @@
-"use client";
-
-import { useEffect, RefObject } from "react";
-
-export function useInfiniteScroll({
-  containerRef,
-  onLoadMore,
-  isLoading,
-  offset = 50,
-  enabled = true, // ✅ Add this
-}: {
-  containerRef: RefObject<HTMLElement | null>;
-  onLoadMore: () => void;
-  isLoading: boolean;
-  offset?: number;
-  enabled?: boolean; // ✅ Add this
-}) {
-  useEffect(() => {
-    if (!enabled) return; // ✅ Skip logic if not enabled
-
-    const handleScroll = () => {
-      const el = containerRef.current;
-      if (!el || isLoading) return;
-
-      const { scrollTop, scrollHeight, clientHeight } = el;
-      const isNearBottom = scrollTop + clientHeight >= scrollHeight - offset;
-
-      if (isNearBottom) {
-        onLoadMore();
-      }
-    };
-
-    const el = containerRef.current;
-    if (el) el.addEventListener("scroll", handleScroll);
-
-    return () => {
-      if (el) el.removeEventListener("scroll", handleScroll);
-    };
-  }, [containerRef, onLoadMore, isLoading, offset, enabled]); // ✅ include enabled
-}

package/src/hooks/useKeydown.ts

@@ -1,42 +0,0 @@
-import { useEffect } from "react";
-
-type KeyHandler = (event: KeyboardEvent) => void;
-
-export function useKeydown(
-  keys: Record<string, KeyHandler>,
-  isActive?: boolean,
-): void {
-  function handleKeyDown(event: KeyboardEvent): void {
-    if (
-      !Object.keys(keys).includes(event.key) &&
-      !Object.keys(keys).join("").includes("/")
-    )
-      return;
-    Object.entries(keys).forEach(([key, handler]) => {
-      if (event.key !== key && !key.includes("/")) return;
-      // Match single keys or combinations like "Enter/Space"
-      if (
-        key.includes("/") &&
-        key.replace("Space", " ").split("/").includes(event.key)
-      ) {
-        event.preventDefault();
-        handler(event);
-        return;
-      }
-      if (event.key === key) {
-        event.preventDefault();
-        handler(event);
-      }
-    });
-  }
-
-  useEffect(() => {
-    if (!isActive)
-      return document.removeEventListener("keydown", handleKeyDown);
-    document.addEventListener("keydown", handleKeyDown);
-
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [keys, isActive]);
-}

package/src/hooks/useMatchesMedia.ts

@@ -1,18 +0,0 @@
-import { useLayoutEffect, useState } from "react";
-
-export const useMatchesMedia = (query: string) => {
-  const [matches, setMatches] = useState<boolean>();
-
-  useLayoutEffect(() => {
-    const mediaQueryList = window.matchMedia(query);
-    const listener = () => setMatches(mediaQueryList.matches);
-    listener();
-    mediaQueryList.addEventListener("change", listener);
-    return () => mediaQueryList.removeEventListener("change", listener);
-  }, [query]);
-
-  return matches;
-};
-
-export const useMatchesMobile = (): boolean | undefined =>
-  useMatchesMedia("(width < 48rem)");

package/src/hooks/useTableLayout.ts

@@ -1,106 +0,0 @@
-"use client";
-
-import { LocalStoragePrefixVersion, mergeObjectArrays } from "../utils";
-import { ColumnDef } from "@dmsi/wedgekit-react/components";
-import {
-  useState,
-  useEffect,
-  SetStateAction,
-  useCallback,
-  useRef,
-} from "react";
-export type PersistedTableLayout<T> = {
-  columns: ColumnDef<T>[];
-  setColumns: (setter: SetStateAction<ColumnDef<T>[]>) => void;
-  isReady: boolean;
-  getSavedLayout: () => ColumnDef<T>[] | undefined;
-};
-
-// Change prefix to refresh client table layout.
-// It's probably better to discuss about a better key strategy in the future.
-const LocalStoragePrefix = `${LocalStoragePrefixVersion}-tableLayout`;
-
-const getLocalStorageKeyWithPrefix = (key: string) =>
-  `${LocalStoragePrefix}__${key}`;
-
-/**
- *  Custom hook to manage table layout persistence.
- * @template T The type of the objects in the arrays.
- * @param key {string}
- * @param initialColumns {() => Array<ColumnDef<T>>}
- * @param dependencyArr {unknown[]}
- * @returns {{ columns: ColumnDef<T>[]; setColumns: React.Dispatch<React.SetStateAction<ColumnDef<T>[]>> }}
- */
-export function useTableLayout<T>(
-  initialColumns: Array<ColumnDef<T>>,
-  key?: string,
-): PersistedTableLayout<T> {
-  // Use useMemo to ensure initialColumns is stable
-  const [columns, setColumns] = useState<ColumnDef<T>[]>(initialColumns);
-  const [isReady, setIsReady] = useState(false);
-  const renderCountRef = useRef(0);
-
-  const handleSaveLayout = useCallback(
-    (setter: React.SetStateAction<ColumnDef<T>[]>, _internal?: boolean) => {
-      if ((!isReady && !_internal) || !key) return;
-      // get value from passed setter
-      setColumns((prevColumns) => {
-        const newColumns =
-          typeof setter === "function" ? setter(prevColumns) : setter;
-        if (
-          JSON.stringify(newColumns) === JSON.stringify(prevColumns) &&
-          !_internal
-        )
-          return prevColumns;
-        localStorage.setItem(
-          getLocalStorageKeyWithPrefix(`${key}-tableLayout`),
-          JSON.stringify(newColumns),
-        );
-        return newColumns;
-      });
-    },
-    [isReady, key],
-  );
-
-  useEffect(() => {
-    if (!key) return setIsReady(true);
-    if (renderCountRef.current > 1) {
-      throw new Error(
-        `useTableLayout should only be called once per component render cycle.
-        ${renderCountRef.current} Renders detected.
-        Check dependency stability`,
-      );
-    }
-    renderCountRef.current += 1;
-    const savedLayout = localStorage.getItem(
-      getLocalStorageKeyWithPrefix(`${key}-tableLayout`),
-    );
-    if (savedLayout) {
-      handleSaveLayout(
-        mergeObjectArrays<ColumnDef<T>>(
-          initialColumns,
-          JSON.parse(savedLayout),
-        ),
-        true,
-      );
-    }
-    if (!savedLayout) handleSaveLayout(initialColumns, true);
-    setIsReady(true);
-
-    return () => {
-      renderCountRef.current = 0;
-    };
-    // Load the layout from local storage on init
-  }, [handleSaveLayout, initialColumns, key]);
-
-  const getSavedLayout = useCallback(() => {
-    const savedLayout = localStorage.getItem(
-      getLocalStorageKeyWithPrefix(`${key}-tableLayout`),
-    );
-    if (savedLayout) {
-      return JSON.parse(savedLayout) as ColumnDef<T>[];
-    }
-  }, [key]);
-
-  return { columns, setColumns: handleSaveLayout, isReady, getSavedLayout };
-}