@dmsi/wedgekit-react 0.0.1277 → 1.0.1

package/package.json

@@ -1,95 +1,29 @@
 {
   "name": "@dmsi/wedgekit-react",
-  "private": false,
-  "version": "0.0.1277",
+  "version": "1.0.1",
   "type": "module",
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "lint": "eslint . --max-warnings 0",
-    "fmt": "prettier --write src/**/*.{ts,tsx,css,json}",
-    "copy:pdf-worker": "shx mkdir -p ../frontend/public/scripts/ && shx cp ../../node_modules/pdfjs-dist/build/pdf.worker.min.mjs ../frontend/public/scripts/pdf.worker.min.mjs",
-    "predev": "npm run copy:pdf-worker",
-    "postbuild": "npm run copy:pdf-worker"
-  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "package.json"
   ],
   "exports": {
-    "./components/*": {
-      "types": "./src/components/*.tsx",
-      "import": "./dist/components/*.js",
-      "require": "./dist/components/*.cjs"
-    },
-    "./components": {
-      "types": "./src/components/index.ts",
-      "import": "./dist/components/index.js",
-      "require": "./dist/components/index.cjs"
-    },
-    "./hooks": {
-      "types": "./src/hooks/index.ts",
-      "import": "./dist/hooks/index.js",
-      "require": "./dist/hooks/index.cjs"
-    },
-    "./types": {
-      "types": "./src/types.ts",
-      "import": "./dist/types.js",
-      "require": "./dist/types.cjs"
+    "./package.json": "./package.json",
+    ".": {
+      "@dmsi/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     },
-    "./utils": {
-      "types": "./src/utils/index.ts",
-      "import": "./dist/utils/index.js",
-      "require": "./dist/utils/index.cjs"
-    },
-    "./static": {
-      "types": "./src/static/index.ts",
-      "import": "./dist/static/index.js",
-      "require": "./dist/static/index.cjs"
-    },
-    "./styles.css": "./dist/index.css",
-    "./fonts.css": "./dist/fonts.css",
-    "./package.json": "./package.json"
-  },
-  "dependencies": {
-    "@dmsi/wedgekit-react": "*",
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/modifiers": "^9.0.0",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@headlessui/react": "^2.2.7",
-    "@js-temporal/polyfill": "^0.5.1",
-    "@mikecousins/react-pdf": "^8.0.1",
-    "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-virtual": "^3.13.12",
-    "clsx": "^2.1.1",
-    "embla-carousel": "^9.0.0-rc01",
-    "embla-carousel-autoplay": "^9.0.0-rc01",
-    "embla-carousel-react": "^9.0.0-rc01",
-    "pdfjs-dist": "^5.4.149",
-    "react-use": "^17.6.0"
+    "./styles": "./dist/styles.css"
   },
   "peerDependencies": {
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
-  },
-  "devDependencies": {
-    "@tailwindcss/postcss": "^4.1.12",
-    "@types/react": "^19.1.12",
-    "@types/react-dom": "^19.1.9",
-    "@typescript-eslint/eslint-plugin": "^8.41.0",
-    "eslint": "^9.34.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
-    "prettier": "^3.6.2",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "shx": "^0.4.0",
-    "tailwindcss": "^4.1.12",
-    "tsup": "^8.5.0",
-    "typescript": "5.9.2"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
-  "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "4.50.0",
-    "lightningcss-linux-x64-gnu": "1.30.1",
-    "lightningcss-linux-x64-musl": "1.30.1"
+  "publishConfig": {
+    "access": "public"
   }
 }

package/dist/chunk-3DJWSTPS.js

@@ -1,134 +0,0 @@
-import {
-  Input
-} from "./chunk-H5SHC4XZ.js";
-import {
-  __objRest,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/Search.tsx
-import {
-  useEffect,
-  useId,
-  useRef,
-  useState
-} from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var Search = (_a) => {
-  var _b = _a, {
-    id,
-    testid,
-    label,
-    error,
-    children,
-    readOnly,
-    renderMenu,
-    onClick,
-    wrapperClassName,
-    removeRoundness,
-    autocompletePadding = false
-  } = _b, props = __objRest(_b, [
-    "id",
-    "testid",
-    "label",
-    "error",
-    "children",
-    "readOnly",
-    "renderMenu",
-    "onClick",
-    "wrapperClassName",
-    "removeRoundness",
-    "autocompletePadding"
-  ]);
-  const inputRef = useRef(null);
-  const inputContainerRef = useRef(null);
-  const preventFocusOnInitialRender = useRef(true);
-  const [show, setShow] = useState(false);
-  const [clearing, setClearing] = useState(false);
-  const uniqueId = useId();
-  const searchMenuName = `search-menu-${uniqueId}`;
-  useEffect(() => {
-    var _a2;
-    if (preventFocusOnInitialRender.current) {
-      preventFocusOnInitialRender.current = false;
-      return;
-    }
-    (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
-  }, [props.value]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Input,
-      __spreadValues({
-        id,
-        testid,
-        variant: "search",
-        inputContainerRef,
-        ref: inputRef,
-        label,
-        wrapperClassName,
-        autocompletePadding,
-        onClick: (e) => {
-          if (props.disabled || readOnly) {
-            return;
-          }
-          if (clearing) {
-            setClearing(false);
-            return;
-          }
-          onClick == null ? void 0 : onClick(e);
-          setShow(!show);
-        },
-        onClear: () => {
-          setClearing(true);
-        },
-        onKeyDown: (e) => {
-          setShow(true);
-          if (["ArrowUp", "ArrowDown"].includes(e.key)) {
-            e.preventDefault();
-            const menu = document.querySelector(
-              `[data-menu="${searchMenuName}"]`
-            );
-            const selectedMenuOption = menu == null ? void 0 : menu.querySelector("[data-selected]");
-            if (selectedMenuOption) {
-              const allMenuOptions = Array.from(
-                (menu == null ? void 0 : menu.querySelectorAll('[role="menuitem"]')) || []
-              );
-              const currentIndex = allMenuOptions.indexOf(selectedMenuOption);
-              let targetOption;
-              if (e.key === "ArrowDown") {
-                targetOption = allMenuOptions[currentIndex + 1] || allMenuOptions[0];
-              } else {
-                targetOption = allMenuOptions[currentIndex - 1] || allMenuOptions[allMenuOptions.length - 1];
-              }
-              targetOption == null ? void 0 : targetOption.focus();
-            } else {
-              const toFocusMenuOption = e.key === "ArrowDown" ? menu == null ? void 0 : menu.querySelector('[role="menuitem"]') : menu == null ? void 0 : menu.querySelector(
-                '[role="menuitem"]:last-child'
-              );
-              toFocusMenuOption == null ? void 0 : toFocusMenuOption.focus();
-            }
-          }
-        },
-        error,
-        readOnly,
-        removeRoundness,
-        focus: renderMenu && show
-      }, props)
-    ),
-    renderMenu ? renderMenu({
-      id: id ? `${id}-menu` : void 0,
-      testid: testid ? `${testid}-menu` : void 0,
-      positionTo: inputContainerRef,
-      show,
-      setShow,
-      topOffset: props.caption ? -16 : null,
-      autoFocusOff: true,
-      menuName: searchMenuName
-    }) : children
-  ] });
-};
-Search.displayName = "Search";
-
-export {
-  Search
-};

package/dist/chunk-3JUIYULW.js

@@ -1,231 +0,0 @@
-import {
-  Label
-} from "./chunk-4UGMSWWA.js";
-import {
-  useMatchesMobile
-} from "./chunk-WVGXD7HT.js";
-import {
-  Caption
-} from "./chunk-VEEZ7VRJ.js";
-import {
-  Paragraph
-} from "./chunk-7MBRCM3M.js";
-import {
-  Icon
-} from "./chunk-NKUETCDA.js";
-import {
-  baseTransition,
-  componentGap,
-  componentPadding,
-  layoutGroupGap
-} from "./chunk-SATCWGO7.js";
-import {
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/MenuOption.tsx
-import clsx from "clsx";
-import {
-  useId,
-  useRef,
-  useState
-} from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var MenuOption = ({
-  id,
-  testid,
-  children,
-  disabled = false,
-  variant = "normal",
-  value,
-  before,
-  after,
-  subMenu,
-  onClick,
-  selected,
-  ref,
-  onSubMenuHover,
-  onSubMenuLeave,
-  onSubMenuEnter,
-  toggleMenu,
-  subMenuLevel = 1,
-  currentSubMenuLevel,
-  closeSubMenuLevel,
-  activeMenu,
-  mobilePositionTo,
-  highlightMatchingText = false,
-  menuValue,
-  onMouseMove,
-  onMouseEnter,
-  onMouseLeave,
-  small = false
-}) => {
-  const uniqueId = useId();
-  const internalRef = useRef(null);
-  const actualRef = ref || internalRef;
-  const menuId = useRef(`menu-${uniqueId}`);
-  const isMobile = useMatchesMobile();
-  const [isSubMenuHovered, setIsSubMenuHovered] = useState(false);
-  const handleMouseEnter = () => {
-    if (subMenu && onSubMenuHover && !disabled) {
-      onSubMenuHover(menuId.current, subMenuLevel);
-    }
-    onMouseEnter == null ? void 0 : onMouseEnter();
-  };
-  const handleMouseLeave = () => {
-    if (subMenu && onSubMenuLeave && !disabled) {
-      onSubMenuLeave(subMenuLevel);
-    }
-    setIsSubMenuHovered(false);
-    onMouseLeave == null ? void 0 : onMouseLeave();
-  };
-  const handleMouseMove = () => {
-    if (subMenu && onMouseMove && !disabled) {
-      onMouseMove();
-    }
-  };
-  const handleSubMenuEnter = () => {
-    if (onSubMenuEnter) {
-      onSubMenuEnter();
-    }
-    setIsSubMenuHovered(true);
-  };
-  const additionalAttributes = {
-    "data-selected": selected || null,
-    "data-submenu-hovered": isSubMenuHovered || null
-  };
-  const svgStyles = clsx(
-    "[&>svg]:shrink-0 [&>svg]:fill-icon-action-primary-normal"
-  );
-  const textLabelStyles = clsx("w-full whitespace-nowrap !leading-6");
-  const normalStyles = variant === "normal" && !disabled && clsx(
-    "bg-transparent text-text-primary-normal",
-    "hover:bg-background-action-secondary-hover",
-    "focus-visible:bg-background-action-secondary-hover",
-    "data-selected:bg-background-action-secondary-hover",
-    "data-submenu-hovered:bg-background-action-secondary-hover",
-    "active:bg-background-action-secondary-active"
-  );
-  const normalDisabledStyles = variant === "normal" && disabled && clsx("text-text-primary-disabled");
-  const actionStyles = variant === "action" && !disabled && clsx(
-    "text-action-400 bg-transparent",
-    "hover:bg-background-action-secondary-hover hover:text-text-action-hover",
-    "focus-visible:bg-background-action-secondary-hover focus-visible:text-text-action-hover",
-    "data-selected:bg-background-action-secondary-active data-selected:text-text-action-active",
-    "data-submenu-hovered:bg-background-action-secondary-active data-submenu-hovered:text-text-action-active",
-    "active:bg-background-action-secondary-active active:text-text-action-active"
-  );
-  const actionDisabledStyles = variant === "action" && disabled && clsx("text-text-action-disabled");
-  const disabledStyles = disabled && clsx("bg-transparent cursor-default pointer-events-none");
-  const processChildren = typeof children === "string" && highlightMatchingText ? highlightMatch(children, menuValue) : children;
-  const renderChildren = typeof children === "object" ? children : variant === "action" ? /* @__PURE__ */ jsx(Label, { padded: true, className: textLabelStyles, children: processChildren }) : !small ? /* @__PURE__ */ jsx(Paragraph, { padded: true, className: textLabelStyles, children: processChildren }) : /* @__PURE__ */ jsx(Caption, { padded: true, className: textLabelStyles, children: processChildren });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      __spreadProps(__spreadValues({
-        id,
-        "data-testid": testid,
-        ref: actualRef,
-        className: clsx(
-          "flex cursor-pointer w-full text-left relative outline-none",
-          svgStyles,
-          small ? layoutGroupGap : componentGap,
-          componentPadding,
-          baseTransition,
-          normalStyles,
-          normalDisabledStyles,
-          actionStyles,
-          actionDisabledStyles,
-          disabledStyles,
-          { "items-center": !small }
-        ),
-        "data-value": value || children,
-        onClick: () => {
-          onClick == null ? void 0 : onClick(menuId.current, value || children);
-          if (subMenu) {
-            toggleMenu(menuId.current, subMenuLevel);
-          }
-        },
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        onMouseMove: handleMouseMove
-      }, additionalAttributes), {
-        tabIndex: -1,
-        role: "menuitem",
-        "aria-haspopup": subMenu ? "menu" : void 0,
-        children: [
-          before && /* @__PURE__ */ jsx("div", { className: clsx("shrink-0", { "items-center flex": !small }), children: before }),
-          renderChildren,
-          renderAfterProp()
-        ]
-      })
-    ),
-    subMenu && /* @__PURE__ */ jsx(
-      "div",
-      {
-        onMouseEnter: handleSubMenuEnter,
-        onMouseLeave: () => {
-          handleMouseLeave();
-          setIsSubMenuHovered(false);
-        },
-        "data-submenu-parent": menuId.current,
-        "data-menu-level": subMenuLevel + 1,
-        children: subMenu({
-          menuId: menuId.current,
-          positionTo: actualRef,
-          mobilePositionTo,
-          position: "right",
-          subMenuLevel,
-          mobileBackMenuOption,
-          mobileHide: isMobile && activeMenu !== menuId.current,
-          autoFocusOff: true
-        })
-      }
-    )
-  ] });
-  function renderAfterProp() {
-    if (after) {
-      return after;
-    }
-    if (subMenu && after !== null) {
-      return /* @__PURE__ */ jsx(Icon, { name: "chevron_right" });
-    }
-  }
-  function mobileBackMenuOption() {
-    if (!isMobile) {
-      return;
-    }
-    return /* @__PURE__ */ jsx(
-      MenuOption,
-      {
-        id: id ? `${id}-back` : void 0,
-        testid: testid ? `${testid}-back` : void 0,
-        onClick: () => {
-          closeSubMenuLevel == null ? void 0 : closeSubMenuLevel(currentSubMenuLevel != null ? currentSubMenuLevel : 0);
-        },
-        variant: "action",
-        before: /* @__PURE__ */ jsx(Icon, { name: "chevron_left" }),
-        children: "Back"
-      }
-    );
-  }
-};
-MenuOption.displayName = "MenuOption";
-function highlightMatch(text, searchValue) {
-  if (!searchValue || !searchValue.trim()) {
-    return text;
-  }
-  const regex = new RegExp(
-    `(${searchValue.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`,
-    "gi"
-  );
-  const parts = text.split(regex);
-  return parts.map(
-    (part, index) => regex.test(part) ? /* @__PURE__ */ jsx("span", { className: "font-bold", children: part }, index) : part
-  );
-}
-
-export {
-  MenuOption
-};

package/dist/chunk-3PIDINTF.js

@@ -1,52 +0,0 @@
-import {
-  ImagePlaceholder
-} from "./chunk-QVWYTQKL.js";
-
-// src/components/ProductImagePreview/Thumbnail.tsx
-import { useState } from "react";
-import { jsx } from "react/jsx-runtime";
-function Thumbnail({
-  width,
-  height,
-  src,
-  alt,
-  isActive,
-  onClick,
-  isPlaceholder = false,
-  onImageError
-}) {
-  const [imageError, setImageError] = useState(false);
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      onClick,
-      className: [
-        "cursor-pointer relative overflow-hidden rounded aspect-square w-full",
-        // base radius, square when no explicit size
-        "focus:outline-none",
-        isActive && !isPlaceholder && "ring-[3px] ring-offset-1 ring-border-action-normal ring-offset-white opacity-70"
-      ].join(" "),
-      style: { maxWidth: width, maxHeight: height, aspectRatio: "1 / 1" },
-      "aria-pressed": isActive && !isPlaceholder ? "true" : "false",
-      children: isPlaceholder ? /* @__PURE__ */ jsx(ImagePlaceholder, { width: 115, height: 115 }) : /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: imageError ? "/placeholder.svg" : src,
-          alt,
-          className: "object-contain w-full h-full select-none",
-          draggable: false,
-          loading: "lazy",
-          onError: () => {
-            onImageError == null ? void 0 : onImageError(src);
-            setImageError(true);
-          }
-        }
-      )
-    }
-  );
-}
-
-export {
-  Thumbnail
-};

package/dist/chunk-3UPUZBP5.js

@@ -1,149 +0,0 @@
-import {
-  GridContext
-} from "./chunk-AJ5M6MVX.js";
-import {
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/MobileDataGrid/GridContextProvider/index.tsx
-import { useCallback, useEffect, useMemo, useReducer, useState } from "react";
-
-// src/components/MobileDataGrid/dataGridReducer.ts
-function dataGridReducer(state, action) {
-  var _a, _b, _c;
-  const { type, payload } = action;
-  let itemIndex = null;
-  if (action.type === "INSERT" && action.pos === "INDEX")
-    itemIndex = action.index;
-  if (action.type === "UPDATE")
-    itemIndex = (_a = action.index) != null ? _a : state.filter(({ id }) => !!id).findIndex(({ id }) => id === action.id);
-  switch (type) {
-    case "SET":
-      return [...payload];
-    case "UPDATE":
-      if (typeof itemIndex !== "number" || itemIndex < 0)
-        throw new Error("action.(id | index) must be provided.");
-      return [
-        ...state.slice(0, itemIndex),
-        __spreadProps(__spreadValues(__spreadValues({}, state[itemIndex]), payload), {
-          meta: __spreadValues(__spreadValues({}, (_b = state[itemIndex].meta) != null ? _b : {}), (_c = payload.meta) != null ? _c : {})
-        }),
-        ...state.slice(itemIndex + 1)
-      ];
-    default:
-      throw new Error("Action type not implemented.");
-  }
-}
-
-// src/components/MobileDataGrid/GridContextProvider/index.tsx
-import { jsx } from "react/jsx-runtime";
-function GridContextProvider(props) {
-  const {
-    initialColumns,
-    id,
-    testid,
-    children,
-    data,
-    numberOfColumnsToShow,
-    primaryKey,
-    getId,
-    onRowSelect
-  } = props;
-  const [columns, dispatch] = useReducer(dataGridReducer, initialColumns);
-  const [selectedRowIds, setSelectedRowIds] = useState([]);
-  const [currentRow, setCurrentRow] = useState(null);
-  const resetColumnVisibility = useCallback(() => {
-    const newColumns = columns.map((column) => {
-      var _a;
-      const initialColumn = initialColumns.find((c) => c.id === column.id);
-      return __spreadProps(__spreadValues({}, column), {
-        meta: __spreadProps(__spreadValues({}, column.meta), {
-          visible: (_a = initialColumn == null ? void 0 : initialColumn.meta) == null ? void 0 : _a.visible
-        })
-      });
-    });
-    dispatch({ type: "SET", payload: newColumns });
-  }, [columns, initialColumns]);
-  const handleRowSelect = useCallback(
-    (item) => {
-      var _a;
-      const rowId = (_a = getId(item)) != null ? _a : "";
-      if (!rowId) return;
-      const nextSelected = selectedRowIds.includes(rowId) ? selectedRowIds.filter((id2) => id2 !== rowId) : [...selectedRowIds, rowId];
-      setSelectedRowIds(nextSelected);
-      if (onRowSelect) onRowSelect(item, nextSelected);
-    },
-    [getId, onRowSelect, selectedRowIds]
-  );
-  const handleRowSelectAll = useCallback(() => {
-    setSelectedRowIds((prev) => {
-      if (prev.length === data.length) {
-        return [];
-      }
-      return data.map(getId).filter((id2) => id2 !== void 0);
-    });
-  }, [data, getId]);
-  const openRowDetail = useCallback((row) => {
-    setCurrentRow(row);
-  }, []);
-  const closeRowDetail = useCallback(() => {
-    setCurrentRow(null);
-  }, []);
-  const visibleColumns = useMemo(() => {
-    const effectiveLimit = typeof numberOfColumnsToShow === "number" ? Math.max(numberOfColumnsToShow - 1, 0) : void 0;
-    if (primaryKey) {
-      const pkColumn = columns.find((col) => col.id === String(primaryKey));
-      const otherColumns = columns.filter(
-        (col) => col.id !== String(primaryKey)
-      );
-      const orderedColumns = pkColumn ? [pkColumn, ...otherColumns] : [...otherColumns];
-      return orderedColumns.filter((x) => {
-        var _a;
-        return ((_a = x.meta) == null ? void 0 : _a.visible) !== false;
-      }).slice(0, effectiveLimit);
-    }
-    return columns.filter((x) => {
-      var _a;
-      return ((_a = x.meta) == null ? void 0 : _a.visible) !== false;
-    }).slice(0, effectiveLimit);
-  }, [columns, numberOfColumnsToShow, primaryKey]);
-  useEffect(() => {
-    setCurrentRow((prev) => {
-      if (!prev) return prev;
-      const prevId = getId(prev);
-      if (prevId === void 0) return prev;
-      const updatedRow = data.find((row) => getId(row) === prevId);
-      return updatedRow != null ? updatedRow : prev;
-    });
-  }, [data, getId]);
-  return /* @__PURE__ */ jsx(
-    GridContext.Provider,
-    {
-      value: {
-        columns,
-        testid,
-        id,
-        data,
-        selectedRowIds,
-        visibleColumns,
-        numberOfColumnsToShow,
-        primaryKey,
-        dispatch,
-        getId,
-        resetColumnVisibility,
-        handleRowSelect,
-        handleRowSelectAll,
-        isRowDetailOpen: !!currentRow,
-        currentRow,
-        openRowDetail,
-        closeRowDetail
-      },
-      children
-    }
-  );
-}
-
-export {
-  GridContextProvider
-};