@dmsi/wedgekit-react 0.0.1277 → 1.0.1

package/dist/components/Toast.js

@@ -1,243 +0,0 @@
-"use client";
-import {
-  Heading3
-} from "../chunk-GOGNV5TF.js";
-import {
-  Button
-} from "../chunk-J4IMVWT5.js";
-import "../chunk-SBRRNFOP.js";
-import {
-  Paragraph
-} from "../chunk-7MBRCM3M.js";
-import {
-  Icon
-} from "../chunk-NKUETCDA.js";
-import {
-  componentGap,
-  componentPadding,
-  layoutGroupGap
-} from "../chunk-SATCWGO7.js";
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "../chunk-ORMEWXMH.js";
-
-// src/components/Toast.tsx
-import clsx from "clsx";
-import { useEffect, useRef, useState } from "react";
-import { createRoot } from "react-dom/client";
-import { jsx, jsxs } from "react/jsx-runtime";
-var variants = {
-  success: {
-    className: "border-success-400",
-    icon: /* @__PURE__ */ jsx("span", { className: "text-icon-success-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "check_circle", size: 24 }) })
-  },
-  warning: {
-    className: "border-warning-400",
-    icon: /* @__PURE__ */ jsx("span", { className: "text-icon-warning-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "warning", size: 24 }) })
-  },
-  error: {
-    className: "border-critical-400",
-    icon: /* @__PURE__ */ jsx("span", { className: "text-icon-critical-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "error", size: 24 }) })
-  },
-  info: {
-    className: "border-action-400",
-    icon: /* @__PURE__ */ jsx("span", { className: "text-icon-on-action-secondary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "info", size: 24 }) })
-  }
-};
-var slideInFromBottomAnimation = (element, displayDuration = 8e3, inDuration = 50, outDuration = 50) => {
-  const totalDuration = inDuration + displayDuration + outDuration;
-  const rect = element.getBoundingClientRect();
-  const slideDistance = window.innerHeight - rect.bottom + 16;
-  return element.animate(
-    [
-      {
-        opacity: 0,
-        transform: `translateY(${slideDistance}px)`,
-        offset: 0
-      },
-      {
-        opacity: 1,
-        transform: "translateY(0)",
-        offset: inDuration / totalDuration
-      },
-      {
-        opacity: 1,
-        transform: "translateY(0)",
-        offset: (inDuration + displayDuration) / totalDuration
-      },
-      {
-        opacity: 0,
-        transform: `translateY(${slideDistance}px)`,
-        offset: 1
-      }
-    ],
-    {
-      duration: totalDuration,
-      easing: "cubic-bezier(0.4, 0, 0.2, 1)",
-      fill: "both"
-    }
-  );
-};
-var TOAST_ROOT_ID = "toast-root";
-function getToastRoot() {
-  let root = document.getElementById(TOAST_ROOT_ID);
-  if (!root) {
-    root = document.createElement("div");
-    root.id = TOAST_ROOT_ID;
-    root.className = "fixed bottom-6 right-6 z-50 flex flex-col items-end gap-4 pointer-events-none";
-    document.body.appendChild(root);
-  }
-  return root;
-}
-var Toast = (_a) => {
-  var _b = _a, {
-    id,
-    testid,
-    variant = "success",
-    title,
-    message,
-    show = false,
-    showToast = false,
-    onClose: onClose,
-    viewButtonLink,
-    showViewButton = false
-  } = _b, props = __objRest(_b, [
-    "id",
-    "testid",
-    "variant",
-    "title",
-    "message",
-    "show",
-    "showToast",
-    // deprecated
-    "onClose",
-    "viewButtonLink",
-    "showViewButton"
-  ]);
-  var _a2;
-  const toastElementRef = useRef(null);
-  const animationRef = useRef(null);
-  const [isHovered, setIsHovered] = useState(false);
-  useEffect(() => {
-    if (show && !showToast) {
-      if (toastElementRef.current) {
-        const animation = slideInFromBottomAnimation(toastElementRef.current);
-        animationRef.current = animation;
-        animation.onfinish = () => {
-          onClose == null ? void 0 : onClose();
-        };
-      }
-      return () => {
-        if (animationRef.current) {
-          animationRef.current.cancel();
-        }
-      };
-    }
-  }, [show, showToast, onClose]);
-  useEffect(() => {
-    if (animationRef.current) {
-      if (isHovered) {
-        animationRef.current.pause();
-      } else {
-        animationRef.current.play();
-      }
-    }
-  }, [isHovered]);
-  useEffect(() => {
-    const handleAnimationEnd = () => {
-      if (!isHovered) {
-        onClose == null ? void 0 : onClose();
-      }
-    };
-    if (animationRef.current) {
-      animationRef.current.addEventListener("finish", handleAnimationEnd);
-      return () => {
-        if (animationRef.current) {
-          animationRef.current.removeEventListener(
-            "finish",
-            handleAnimationEnd
-          );
-        }
-      };
-    }
-  }, [isHovered, onClose]);
-  const handleMouseEnter = () => setIsHovered(true);
-  const handleMouseLeave = () => {
-    setIsHovered(false);
-    if (animationRef.current && animationRef.current.playState === "paused") {
-      animationRef.current.play();
-    }
-  };
-  const { className, icon: iconElement } = (_a2 = variants[variant]) != null ? _a2 : variants.success;
-  if (!show) return null;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    __spreadProps(__spreadValues({
-      id,
-      "data-testid": testid,
-      ref: toastElementRef,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      className: clsx(
-        "flex items-start border-2 rounded-sm bg-white shadow-md cursor-pointer pointer-events-auto transition-all duration-300 ease-in-out w-fit",
-        componentPadding,
-        layoutGroupGap,
-        className
-      )
-    }, props), {
-      style: props.style,
-      children: [
-        iconElement,
-        /* @__PURE__ */ jsxs("div", { className: clsx("flex items-center", layoutGroupGap), children: [
-          /* @__PURE__ */ jsxs("div", { className: clsx("flex flex-col w-68", componentGap), children: [
-            title && /* @__PURE__ */ jsx(Heading3, { testid: testid ? `${testid}-title` : void 0, id: id ? `${id}-title` : void 0, children: title }),
-            message && /* @__PURE__ */ jsx(Paragraph, { testid: testid ? `${testid}-message` : void 0, id: id ? `${id}-message` : void 0, children: message })
-          ] }),
-          showViewButton && /* @__PURE__ */ jsx(
-            Button,
-            {
-              id: id ? `${id}-view-button` : void 0,
-              testid: testid ? `${testid}-view-button` : void 0,
-              variant: "tertiary",
-              href: viewButtonLink,
-              children: "View"
-            }
-          )
-        ] })
-      ]
-    })
-  );
-};
-Toast.displayName = "Toast";
-function createToast(config) {
-  const toastRoot = getToastRoot();
-  const toastContainer = document.createElement("div");
-  toastRoot.appendChild(toastContainer);
-  const root = createRoot(toastContainer);
-  const handleClose = () => {
-    root.unmount();
-    toastContainer.remove();
-  };
-  root.render(
-    /* @__PURE__ */ jsx(
-      Toast,
-      {
-        id: config.id,
-        testid: config.testid,
-        show: true,
-        onClose: handleClose,
-        variant: config.variant,
-        title: config.title,
-        message: config.message,
-        showViewButton: config.showViewButton,
-        viewButtonLink: config.viewButtonLink
-      }
-    )
-  );
-}
-export {
-  Toast,
-  createToast
-};

package/dist/components/Tooltip.cjs

@@ -1,337 +0,0 @@
-"use strict";
-"use client";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/components/Tooltip.tsx
-var Tooltip_exports = {};
-__export(Tooltip_exports, {
-  Tooltip: () => Tooltip
-});
-module.exports = __toCommonJS(Tooltip_exports);
-var import_clsx2 = __toESM(require("clsx"), 1);
-var import_react6 = require("react");
-var import_react_dom = require("react-dom");
-
-// src/classNames.ts
-var import_clsx = __toESM(require("clsx"), 1);
-var typography = {
-  display1: (0, import_clsx.default)(
-    "font-sans font-semibold",
-    "text-display-1-mobile desktop:text-display-1-desktop compact:text-display-1-desktop-compact",
-    "leading-display-1-mobile desktop:leading-display-1-desktop"
-  ),
-  display2: (0, import_clsx.default)(
-    "font-sans font-bold",
-    "text-display-2-mobile desktop:text-display-2-desktop compact:text-display-2-desktop-compact",
-    "leading-display-2-mobile desktop:leading-display-2-desktop"
-  ),
-  heading1: (0, import_clsx.default)(
-    "font-sans font-semibold",
-    "text-heading-1-mobile desktop:text-heading-1-desktop compact:text-heading-1-desktop-compact",
-    "leading-heading-1-mobile desktop:leading-heading-1-desktop"
-  ),
-  heading2: (0, import_clsx.default)(
-    "font-sans font-normal",
-    "text-heading-2-mobile desktop:text-heading-2-desktop compact:text-heading-2-desktop-compact",
-    "leading-heading-2-mobile desktop:leading-heading-2-desktop"
-  ),
-  heading3: (0, import_clsx.default)(
-    "font-sans font-semibold",
-    "text-heading-3-mobile desktop:text-heading-3-desktop compact:text-heading-3-desktop-compact",
-    "leading-heading-3-mobile desktop:leading-heading-3-desktop"
-  ),
-  subheader: (0, import_clsx.default)(
-    "font-sans font-semibold",
-    "text-subheader-mobile desktop:text-subheader-desktop compact:text-subheader-desktop-compact",
-    "leading-subheader-mobile desktop:leading-subheader-desktop"
-  ),
-  link: (0, import_clsx.default)(
-    "font-sans font-normal",
-    "text-link-mobile desktop:text-link-desktop compact:text-link-desktop-compact",
-    "leading-link-mobile desktop:leading-link-desktop"
-  ),
-  buttonLabel: (0, import_clsx.default)(
-    "font-sans font-semibold",
-    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
-    "leading-label-mobile desktop:leading-label-desktop"
-  ),
-  label: (0, import_clsx.default)(
-    "font-sans font-semibold",
-    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
-    "leading-label-mobile desktop:leading-label-desktop"
-  ),
-  paragraph: (0, import_clsx.default)(
-    "font-sans font-normal",
-    "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
-    "leading-paragraph-mobile desktop:leading-paragraph-desktop"
-  ),
-  caption: (0, import_clsx.default)(
-    "font-sans font-normal",
-    "text-caption-mobile desktop:text-caption-desktop compact:text-caption-desktop-compact",
-    "leading-caption-mobile desktop:leading-caption-desktop"
-  ),
-  breadcrumb: (0, import_clsx.default)(
-    "font-sans font-normal",
-    "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
-    "leading-mobile-breadcrumb desktop:leading-desktop-breadcrumb"
-  )
-};
-var baseTransition = (0, import_clsx.default)(
-  "transition-colors duration-100 ease-in-out"
-);
-var componentGap = (0, import_clsx.default)(
-  "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap"
-);
-var paddingUsingComponentGap = (0, import_clsx.default)(
-  "p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap"
-);
-var paddingXUsingLayoutGroupGap = (0, import_clsx.default)(
-  "px-mobile-layout-group-gap desktop:px-desktop-layout-group-gap compact:px-desktop-compact-layout-group-gap"
-);
-var paddingYUsingLayoutGroupGap = (0, import_clsx.default)(
-  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
-);
-var componentPadding = (0, import_clsx.default)(
-  "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
-);
-var componentPaddingBottom = (0, import_clsx.default)(
-  "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding"
-);
-var componentPaddingX = (0, import_clsx.default)(
-  "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding"
-);
-var componentPaddingY = (0, import_clsx.default)(
-  "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding"
-);
-var componentPaddingXUsingComponentGap = (0, import_clsx.default)(
-  "px-mobile-component-gap desktop:px-desktop-component-gap compact:px-desktop-compact-component-gap"
-);
-var componentPaddingYUsingComponentGap = (0, import_clsx.default)(
-  "py-mobile-component-gap desktop:py-desktop-component-gap compact:py-desktop-compact-component-gap"
-);
-var componentPaddingYUsingComponentGap2xMobile = (0, import_clsx.default)(
-  "py-[calc(var(--spacing-mobile-component-gap)_+_8px)] desktop:py-desktop-component-gap compact:py-desktop-compact-component-gap"
-);
-var componentPaddingMinusBorder = (0, import_clsx.default)(
-  "p-[calc(var(--spacing-mobile-component-padding)_-_1px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_1px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_1px)]"
-);
-var componentPaddingMinus2pxBorder = (0, import_clsx.default)(
-  "p-[calc(var(--spacing-mobile-component-padding)_-_2px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_2px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_2px)]"
-);
-var componentPaddingMinusBorderDesktop = (0, import_clsx.default)(
-  "p-[calc(var(--spacing-desktop-component-padding)_-_1px)]"
-);
-var layoutPaddding = (0, import_clsx.default)(
-  "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding"
-);
-var layoutPaddingBottom = (0, import_clsx.default)(
-  "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding"
-);
-var layoutPaddingY = (0, import_clsx.default)(
-  "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
-);
-var layoutPaddingX = (0, import_clsx.default)(
-  "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding"
-);
-var containerPaddingX = (0, import_clsx.default)(
-  "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
-);
-var containerPaddingY = (0, import_clsx.default)(
-  "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding"
-);
-var layoutGroupGapPaddingY = (0, import_clsx.default)(
-  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
-);
-var layoutGroupGap = (0, import_clsx.default)(
-  "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-desktop-compact-layout-group-gap"
-);
-var layoutGap = (0, import_clsx.default)(
-  "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap"
-);
-var gapUsingContainerPadding = (0, import_clsx.default)(
-  "gap-mobile-container-padding desktop:gap-desktop-container-padding compact:gap-desktop-compact-container-padding"
-);
-
-// src/hooks/useKeydown.ts
-var import_react = require("react");
-
-// src/hooks/useInfiniteScroll.tsx
-var import_react2 = require("react");
-
-// src/hooks/useMatchesMedia.ts
-var import_react3 = require("react");
-var useMatchesMedia = (query) => {
-  const [matches, setMatches] = (0, import_react3.useState)();
-  (0, import_react3.useLayoutEffect)(() => {
-    const mediaQueryList = window.matchMedia(query);
-    const listener = () => setMatches(mediaQueryList.matches);
-    listener();
-    mediaQueryList.addEventListener("change", listener);
-    return () => mediaQueryList.removeEventListener("change", listener);
-  }, [query]);
-  return matches;
-};
-var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
-
-// src/hooks/useTableLayout/useTableLayout.ts
-var import_react4 = require("react");
-
-// src/utils/index.ts
-var LocalStoragePrefixVersion = `dmsi-acc-v1.1.5`;
-
-// src/hooks/useTableLayout/storage.ts
-var STORAGE_PREFIX = `${LocalStoragePrefixVersion}-tablePrefs`;
-var LEGACY_STORAGE_PREFIX = `${LocalStoragePrefixVersion}-tableLayout`;
-
-// src/hooks/useEditCell.tsx
-var import_react5 = require("react");
-
-// src/components/Tooltip.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var Tooltip = ({
-  id,
-  testid,
-  message,
-  position = "top",
-  children,
-  showOnTruncation = false,
-  offset = 8,
-  keepHidden = false
-}) => {
-  const ref = (0, import_react6.useRef)(null);
-  const tooltipRef = (0, import_react6.useRef)(null);
-  const [tooltipPosition, setTooltipPosition] = (0, import_react6.useState)({ top: 0, left: 0 });
-  const [isVisible, setIsVisible] = (0, import_react6.useState)(false);
-  const [removeOpacity, setRemoveOpacity] = (0, import_react6.useState)(false);
-  const updatePosition = () => {
-    if (!ref.current || !tooltipRef.current) return;
-    const rect = ref.current.getBoundingClientRect();
-    const tooltipRect = tooltipRef.current.getBoundingClientRect();
-    let top = 0;
-    let left = 0;
-    switch (position) {
-      case "top":
-        top = rect.top - tooltipRect.height - offset;
-        left = rect.left + rect.width / 2 - tooltipRect.width / 2;
-        break;
-      case "bottom":
-        top = rect.bottom + offset;
-        left = rect.left + rect.width / 2 - tooltipRect.width / 2;
-        break;
-      case "left":
-        top = rect.top + rect.height / 2 - tooltipRect.height / 2;
-        left = rect.left - tooltipRect.width - offset;
-        break;
-      case "right":
-        top = rect.top + rect.height / 2 - tooltipRect.height / 2;
-        left = rect.right + offset;
-        break;
-    }
-    setTooltipPosition({ top, left });
-    requestAnimationFrame(() => {
-      setRemoveOpacity(true);
-    });
-  };
-  const handleMouseEnter = () => {
-    if (!showOnTruncation || checkForTextTruncation()) {
-      setIsVisible(true);
-    }
-  };
-  const handleMouseLeave = () => {
-    setIsVisible(false);
-    setRemoveOpacity(false);
-  };
-  (0, import_react6.useEffect)(() => {
-    if (isVisible && tooltipRef.current) {
-      requestAnimationFrame(() => {
-        updatePosition();
-      });
-    }
-  }, [isVisible]);
-  (0, import_react6.useEffect)(() => {
-    if (isVisible) {
-      window.addEventListener("resize", updatePosition);
-      return () => window.removeEventListener("resize", updatePosition);
-    }
-  }, [isVisible]);
-  const isMobile = useMatchesMobile();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "div",
-    {
-      id,
-      "data-testid": testid,
-      ref,
-      className: "relative inline-grid grid-cols-[auto_1fr] items-center cursor-pointer",
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      children: [
-        children,
-        !keepHidden && isVisible && !isMobile && typeof document !== "undefined" && (0, import_react_dom.createPortal)(
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "div",
-            {
-              id: id ? `${id}-message` : void 0,
-              "data-testid": testid ? `${testid}-message` : void 0,
-              ref: tooltipRef,
-              style: {
-                position: "fixed",
-                top: `${tooltipPosition.top}px`,
-                left: `${tooltipPosition.left}px`,
-                zIndex: 9999
-              },
-              className: (0, import_clsx2.default)(
-                typography.caption,
-                "bg-neutral-500 text-neutral-100 rounded whitespace-nowrap shadow-2 pointer-events-none transition-opacity duration-100 ease-in-out",
-                componentPadding,
-                !removeOpacity && "opacity-0"
-              ),
-              children: message
-            }
-          ),
-          document.body
-        )
-      ]
-    }
-  );
-  function checkForTextTruncation() {
-    if (showOnTruncation && ref.current) {
-      const element = ref.current.querySelector("p, a");
-      if (element) {
-        const isTruncated = element.scrollWidth > element.clientWidth;
-        return isTruncated;
-      }
-    }
-    return false;
-  }
-};
-Tooltip.displayName = "Tooltip";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Tooltip
-});

package/dist/components/Tooltip.js

@@ -1,14 +0,0 @@
-"use client";
-import {
-  Tooltip
-} from "../chunk-QG6NWMGA.js";
-import "../chunk-ZRFXUER3.js";
-import "../chunk-WVGXD7HT.js";
-import "../chunk-VXWSAIB5.js";
-import "../chunk-TBZ243DS.js";
-import "../chunk-5UH6QUFB.js";
-import "../chunk-SATCWGO7.js";
-import "../chunk-ORMEWXMH.js";
-export {
-  Tooltip
-};