@ktnpm_devops/react-component 0.7.0 → 0.8.0

package/dist/index26.cjs

@@ -2,11 +2,134 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const clsx = require("./index48.cjs");
-const Input_module = require("./index63.cjs");
-const Input = react.forwardRef(
-  ({ className, type = "text", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("input", { ref, type, className: clsx.clsx(Input_module.default.root, className), ...props })
-);
-Input.displayName = "Input";
-exports.Input = Input;
+const clsx = require("./index50.cjs");
+const useClickOutside = require("./index4.cjs");
+const useEscapeKey = require("./index5.cjs");
+const constants = require("./index54.cjs");
+const FilterDropdown_module = require("./index58.cjs");
+const Chip = require("./index17.cjs");
+const FilterDropdown = ({
+  label,
+  mode,
+  options = [],
+  selected,
+  onToggle,
+  onClear,
+  value = "",
+  onChange,
+  placeholder,
+  clearLabel = "Limpiar",
+  className
+}) => {
+  const [isOpen, setIsOpen] = react.useState(false);
+  const containerRef = react.useRef(null);
+  const [draft, setDraft] = react.useState(value);
+  const lastCommitted = react.useRef(value);
+  react.useEffect(() => {
+    if (isOpen) {
+      setDraft(value);
+      lastCommitted.current = value;
+    }
+  }, [isOpen, value]);
+  const commitDraft = react.useCallback(() => {
+    if (draft !== lastCommitted.current) {
+      lastCommitted.current = draft;
+      onChange == null ? void 0 : onChange(draft);
+    }
+  }, [draft, onChange]);
+  const close = react.useCallback(() => {
+    if (mode === "text") commitDraft();
+    setIsOpen(false);
+  }, [mode, commitDraft]);
+  const cancel = react.useCallback(() => {
+    setDraft(lastCommitted.current);
+    setIsOpen(false);
+  }, []);
+  useClickOutside.useClickOutside(containerRef, close);
+  useEscapeKey.useEscapeKey(cancel, isOpen);
+  const selectedSet = react.useMemo(
+    () => selected instanceof Set ? selected : new Set(selected ?? []),
+    [selected]
+  );
+  const count = mode === "multi" ? selectedSet.size : value ? 1 : 0;
+  const hasSelection = count > 0;
+  const clearText = () => {
+    setDraft("");
+    lastCommitted.current = "";
+    (onClear ?? (() => onChange == null ? void 0 : onChange("")))();
+  };
+  const clearHandler = mode === "multi" ? onClear : clearText;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: clsx.clsx(FilterDropdown_module.default.root, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: FilterDropdown_module.default.trigger,
+        "aria-haspopup": "true",
+        "aria-expanded": isOpen,
+        onClick: () => setIsOpen((open) => !open),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: FilterDropdown_module.default.triggerContent, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: clsx.clsx(FilterDropdown_module.default.chevron, isOpen && FilterDropdown_module.default.chevronOpen),
+              width: constants.ICON_SIZE.MD,
+              height: constants.ICON_SIZE.MD,
+              viewBox: constants.SVG_VIEWBOX,
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: constants.SVG_STROKE_WIDTH,
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" })
+            }
+          ),
+          label,
+          count > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: FilterDropdown_module.default.badge, children: count })
+        ] })
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: FilterDropdown_module.default.pop, children: [
+      mode === "multi" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: FilterDropdown_module.default.chips, children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+        Chip.Chip,
+        {
+          value: option.value,
+          size: "sm",
+          selected: selectedSet.has(option.value),
+          onToggle,
+          children: option.label
+        },
+        option.value
+      )) }) : /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          className: FilterDropdown_module.default.input,
+          value: draft,
+          placeholder,
+          "aria-label": label,
+          onChange: (event) => setDraft(event.target.value),
+          onKeyDown: (event) => {
+            if (event.key === "Enter") {
+              event.preventDefault();
+              close();
+            }
+          },
+          onBlur: (event) => {
+            var _a;
+            if (!((_a = containerRef.current) == null ? void 0 : _a.contains(event.relatedTarget))) commitDraft();
+          }
+        }
+      ),
+      hasSelection && clearHandler && /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: FilterDropdown_module.default.clear, onClick: clearHandler, children: [
+        clearLabel,
+        " ",
+        label.toLowerCase()
+      ] })
+    ] })
+  ] });
+};
+FilterDropdown.displayName = "FilterDropdown";
+exports.FilterDropdown = FilterDropdown;
 //# sourceMappingURL=index26.cjs.map

package/dist/index26.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index26.cjs","sources":["../src/primitives/Input/Input.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport styles from './Input.module.css';\n\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type = 'text', ...props }, ref) => (\n    <input ref={ref} type={type} className={clsx(styles.root, className)} {...props} />\n  ),\n);\n\nInput.displayName = 'Input';\n"],"names":["forwardRef","jsx","clsx","styles"],"mappings":";;;;;;AAMO,MAAM,QAAQA,MAAAA;AAAAA,EACnB,CAAC,EAAE,WAAW,OAAO,QAAQ,GAAG,SAAS,QACvCC,2BAAAA,IAAC,WAAM,KAAU,MAAY,WAAWC,UAAKC,aAAAA,QAAO,MAAM,SAAS,GAAI,GAAG,MAAA,CAAO;AAErF;AAEA,MAAM,cAAc;;"}
+{"version":3,"file":"index26.cjs","sources":["../src/composites/FilterDropdown/FilterDropdown.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { Chip } from '../../primitives/Chip';\nimport { useClickOutside } from '../../hooks/useClickOutside';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport { ICON_SIZE, SVG_VIEWBOX, SVG_STROKE_WIDTH } from '../../constants';\nimport type { FilterDropdownProps } from './FilterDropdown.types';\nimport styles from './FilterDropdown.module.css';\n\nexport const FilterDropdown = ({\n  label,\n  mode,\n  options = [],\n  selected,\n  onToggle,\n  onClear,\n  value = '',\n  onChange,\n  placeholder,\n  clearLabel = 'Limpiar',\n  className,\n}: FilterDropdownProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // Text mode keeps a draft that is only committed on Enter / blur / close.\n  const [draft, setDraft] = useState(value);\n  const lastCommitted = useRef(value);\n  useEffect(() => {\n    if (isOpen) {\n      setDraft(value);\n      lastCommitted.current = value;\n    }\n  }, [isOpen, value]);\n\n  const commitDraft = useCallback(() => {\n    if (draft !== lastCommitted.current) {\n      lastCommitted.current = draft;\n      onChange?.(draft);\n    }\n  }, [draft, onChange]);\n\n  const close = useCallback(() => {\n    if (mode === 'text') commitDraft();\n    setIsOpen(false);\n  }, [mode, commitDraft]);\n\n  const cancel = useCallback(() => {\n    setDraft(lastCommitted.current);\n    setIsOpen(false);\n  }, []);\n\n  useClickOutside(containerRef, close);\n  useEscapeKey(cancel, isOpen);\n\n  const selectedSet = useMemo(\n    () => (selected instanceof Set ? selected : new Set(selected ?? [])),\n    [selected],\n  );\n\n  const count = mode === 'multi' ? selectedSet.size : value ? 1 : 0;\n  const hasSelection = count > 0;\n\n  const clearText = () => {\n    setDraft('');\n    lastCommitted.current = '';\n    (onClear ?? (() => onChange?.('')))();\n  };\n  const clearHandler = mode === 'multi' ? onClear : clearText;\n\n  return (\n    <div ref={containerRef} className={clsx(styles.root, className)}>\n      <button\n        type=\"button\"\n        className={styles.trigger}\n        aria-haspopup=\"true\"\n        aria-expanded={isOpen}\n        onClick={() => setIsOpen((open) => !open)}\n      >\n        <div className={styles.triggerContent}>\n          <svg\n            className={clsx(styles.chevron, isOpen && styles.chevronOpen)}\n            width={ICON_SIZE.MD}\n            height={ICON_SIZE.MD}\n            viewBox={SVG_VIEWBOX}\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth={SVG_STROKE_WIDTH}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"6 9 12 15 18 9\" />\n          </svg>\n          {label}\n          {count > 0 && <span className={styles.badge}>{count}</span>}\n        </div>\n      </button>\n\n      {isOpen && (\n        <div className={styles.pop}>\n          {mode === 'multi' ? (\n            <div className={styles.chips}>\n              {options.map((option) => (\n                <Chip\n                  key={option.value}\n                  value={option.value}\n                  size=\"sm\"\n                  selected={selectedSet.has(option.value)}\n                  onToggle={onToggle}\n                >\n                  {option.label}\n                </Chip>\n              ))}\n            </div>\n          ) : (\n            <input\n              type=\"text\"\n              className={styles.input}\n              value={draft}\n              placeholder={placeholder}\n              aria-label={label}\n              onChange={(event) => setDraft(event.target.value)}\n              onKeyDown={(event) => {\n                if (event.key === 'Enter') {\n                  event.preventDefault();\n                  close();\n                }\n              }}\n              onBlur={(event) => {\n                if (!containerRef.current?.contains(event.relatedTarget as Node)) commitDraft();\n              }}\n            />\n          )}\n          {hasSelection && clearHandler && (\n            <button type=\"button\" className={styles.clear} onClick={clearHandler}>\n              {clearLabel} {label.toLowerCase()}\n            </button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nFilterDropdown.displayName = 'FilterDropdown';\n"],"names":["useState","useRef","useEffect","useCallback","useClickOutside","useEscapeKey","useMemo","jsxs","clsx","styles","jsx","ICON_SIZE","SVG_VIEWBOX","SVG_STROKE_WIDTH","Chip"],"mappings":"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"}

package/dist/index26.js

@@ -1,12 +1,135 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { clsx } from "./index48.js";
-import styles from "./index63.js";
-const Input = forwardRef(
-  ({ className, type = "text", ...props }, ref) => /* @__PURE__ */ jsx("input", { ref, type, className: clsx(styles.root, className), ...props })
-);
-Input.displayName = "Input";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { clsx } from "./index50.js";
+import { useClickOutside } from "./index4.js";
+import { useEscapeKey } from "./index5.js";
+import { SVG_STROKE_WIDTH, SVG_VIEWBOX, ICON_SIZE } from "./index54.js";
+import styles from "./index58.js";
+import { Chip } from "./index17.js";
+const FilterDropdown = ({
+  label,
+  mode,
+  options = [],
+  selected,
+  onToggle,
+  onClear,
+  value = "",
+  onChange,
+  placeholder,
+  clearLabel = "Limpiar",
+  className
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef(null);
+  const [draft, setDraft] = useState(value);
+  const lastCommitted = useRef(value);
+  useEffect(() => {
+    if (isOpen) {
+      setDraft(value);
+      lastCommitted.current = value;
+    }
+  }, [isOpen, value]);
+  const commitDraft = useCallback(() => {
+    if (draft !== lastCommitted.current) {
+      lastCommitted.current = draft;
+      onChange == null ? void 0 : onChange(draft);
+    }
+  }, [draft, onChange]);
+  const close = useCallback(() => {
+    if (mode === "text") commitDraft();
+    setIsOpen(false);
+  }, [mode, commitDraft]);
+  const cancel = useCallback(() => {
+    setDraft(lastCommitted.current);
+    setIsOpen(false);
+  }, []);
+  useClickOutside(containerRef, close);
+  useEscapeKey(cancel, isOpen);
+  const selectedSet = useMemo(
+    () => selected instanceof Set ? selected : new Set(selected ?? []),
+    [selected]
+  );
+  const count = mode === "multi" ? selectedSet.size : value ? 1 : 0;
+  const hasSelection = count > 0;
+  const clearText = () => {
+    setDraft("");
+    lastCommitted.current = "";
+    (onClear ?? (() => onChange == null ? void 0 : onChange("")))();
+  };
+  const clearHandler = mode === "multi" ? onClear : clearText;
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: clsx(styles.root, className), children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: styles.trigger,
+        "aria-haspopup": "true",
+        "aria-expanded": isOpen,
+        onClick: () => setIsOpen((open) => !open),
+        children: /* @__PURE__ */ jsxs("div", { className: styles.triggerContent, children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: clsx(styles.chevron, isOpen && styles.chevronOpen),
+              width: ICON_SIZE.MD,
+              height: ICON_SIZE.MD,
+              viewBox: SVG_VIEWBOX,
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: SVG_STROKE_WIDTH,
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+            }
+          ),
+          label,
+          count > 0 && /* @__PURE__ */ jsx("span", { className: styles.badge, children: count })
+        ] })
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs("div", { className: styles.pop, children: [
+      mode === "multi" ? /* @__PURE__ */ jsx("div", { className: styles.chips, children: options.map((option) => /* @__PURE__ */ jsx(
+        Chip,
+        {
+          value: option.value,
+          size: "sm",
+          selected: selectedSet.has(option.value),
+          onToggle,
+          children: option.label
+        },
+        option.value
+      )) }) : /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          className: styles.input,
+          value: draft,
+          placeholder,
+          "aria-label": label,
+          onChange: (event) => setDraft(event.target.value),
+          onKeyDown: (event) => {
+            if (event.key === "Enter") {
+              event.preventDefault();
+              close();
+            }
+          },
+          onBlur: (event) => {
+            var _a;
+            if (!((_a = containerRef.current) == null ? void 0 : _a.contains(event.relatedTarget))) commitDraft();
+          }
+        }
+      ),
+      hasSelection && clearHandler && /* @__PURE__ */ jsxs("button", { type: "button", className: styles.clear, onClick: clearHandler, children: [
+        clearLabel,
+        " ",
+        label.toLowerCase()
+      ] })
+    ] })
+  ] });
+};
+FilterDropdown.displayName = "FilterDropdown";
 export {
-  Input
+  FilterDropdown
 };
 //# sourceMappingURL=index26.js.map

package/dist/index26.js.map

@@ -1 +1 @@
-{"version":3,"file":"index26.js","sources":["../src/primitives/Input/Input.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport styles from './Input.module.css';\n\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type = 'text', ...props }, ref) => (\n    <input ref={ref} type={type} className={clsx(styles.root, className)} {...props} />\n  ),\n);\n\nInput.displayName = 'Input';\n"],"names":[],"mappings":";;;;AAMO,MAAM,QAAQ;AAAA,EACnB,CAAC,EAAE,WAAW,OAAO,QAAQ,GAAG,SAAS,QACvC,oBAAC,WAAM,KAAU,MAAY,WAAW,KAAK,OAAO,MAAM,SAAS,GAAI,GAAG,MAAA,CAAO;AAErF;AAEA,MAAM,cAAc;"}
+{"version":3,"file":"index26.js","sources":["../src/composites/FilterDropdown/FilterDropdown.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { Chip } from '../../primitives/Chip';\nimport { useClickOutside } from '../../hooks/useClickOutside';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport { ICON_SIZE, SVG_VIEWBOX, SVG_STROKE_WIDTH } from '../../constants';\nimport type { FilterDropdownProps } from './FilterDropdown.types';\nimport styles from './FilterDropdown.module.css';\n\nexport const FilterDropdown = ({\n  label,\n  mode,\n  options = [],\n  selected,\n  onToggle,\n  onClear,\n  value = '',\n  onChange,\n  placeholder,\n  clearLabel = 'Limpiar',\n  className,\n}: FilterDropdownProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // Text mode keeps a draft that is only committed on Enter / blur / close.\n  const [draft, setDraft] = useState(value);\n  const lastCommitted = useRef(value);\n  useEffect(() => {\n    if (isOpen) {\n      setDraft(value);\n      lastCommitted.current = value;\n    }\n  }, [isOpen, value]);\n\n  const commitDraft = useCallback(() => {\n    if (draft !== lastCommitted.current) {\n      lastCommitted.current = draft;\n      onChange?.(draft);\n    }\n  }, [draft, onChange]);\n\n  const close = useCallback(() => {\n    if (mode === 'text') commitDraft();\n    setIsOpen(false);\n  }, [mode, commitDraft]);\n\n  const cancel = useCallback(() => {\n    setDraft(lastCommitted.current);\n    setIsOpen(false);\n  }, []);\n\n  useClickOutside(containerRef, close);\n  useEscapeKey(cancel, isOpen);\n\n  const selectedSet = useMemo(\n    () => (selected instanceof Set ? selected : new Set(selected ?? [])),\n    [selected],\n  );\n\n  const count = mode === 'multi' ? selectedSet.size : value ? 1 : 0;\n  const hasSelection = count > 0;\n\n  const clearText = () => {\n    setDraft('');\n    lastCommitted.current = '';\n    (onClear ?? (() => onChange?.('')))();\n  };\n  const clearHandler = mode === 'multi' ? onClear : clearText;\n\n  return (\n    <div ref={containerRef} className={clsx(styles.root, className)}>\n      <button\n        type=\"button\"\n        className={styles.trigger}\n        aria-haspopup=\"true\"\n        aria-expanded={isOpen}\n        onClick={() => setIsOpen((open) => !open)}\n      >\n        <div className={styles.triggerContent}>\n          <svg\n            className={clsx(styles.chevron, isOpen && styles.chevronOpen)}\n            width={ICON_SIZE.MD}\n            height={ICON_SIZE.MD}\n            viewBox={SVG_VIEWBOX}\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth={SVG_STROKE_WIDTH}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"6 9 12 15 18 9\" />\n          </svg>\n          {label}\n          {count > 0 && <span className={styles.badge}>{count}</span>}\n        </div>\n      </button>\n\n      {isOpen && (\n        <div className={styles.pop}>\n          {mode === 'multi' ? (\n            <div className={styles.chips}>\n              {options.map((option) => (\n                <Chip\n                  key={option.value}\n                  value={option.value}\n                  size=\"sm\"\n                  selected={selectedSet.has(option.value)}\n                  onToggle={onToggle}\n                >\n                  {option.label}\n                </Chip>\n              ))}\n            </div>\n          ) : (\n            <input\n              type=\"text\"\n              className={styles.input}\n              value={draft}\n              placeholder={placeholder}\n              aria-label={label}\n              onChange={(event) => setDraft(event.target.value)}\n              onKeyDown={(event) => {\n                if (event.key === 'Enter') {\n                  event.preventDefault();\n                  close();\n                }\n              }}\n              onBlur={(event) => {\n                if (!containerRef.current?.contains(event.relatedTarget as Node)) commitDraft();\n              }}\n            />\n          )}\n          {hasSelection && clearHandler && (\n            <button type=\"button\" className={styles.clear} onClick={clearHandler}>\n              {clearLabel} {label.toLowerCase()}\n            </button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nFilterDropdown.displayName = 'FilterDropdown';\n"],"names":[],"mappings":"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"}

package/dist/index27.cjs

@@ -2,134 +2,80 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const clsx = require("./index48.cjs");
-const constants = require("./index54.cjs");
-const LiveExplorerTable_module = require("./index72.cjs");
-const SKELETON_ROWS = 5;
-const FULL_PERCENT = 100;
-const LiveExplorerTable = ({
-  rows,
-  columns,
-  sortState = null,
-  onSortChange,
-  isLoading = false,
-  hasMore = false,
-  isFetchingNext = false,
-  onLoadMore,
-  onColumnResize,
-  onRowClick,
-  selectedRowKey = null,
-  scrollToSelectedRow = false,
-  maxHeight,
-  className
-}) => {
-  const selectedRef = react.useRef(null);
-  react.useEffect(() => {
-    if (scrollToSelectedRow && selectedRef.current) {
-      selectedRef.current.scrollIntoView({ block: "nearest", behavior: "smooth" });
-    }
-  }, [scrollToSelectedRow, selectedRowKey]);
-  const handleSort = react.useCallback(
-    (columnKey) => {
-      if (!onSortChange) return;
-      const newDirection = (sortState == null ? void 0 : sortState.column) === columnKey && sortState.direction === "asc" ? "desc" : "asc";
-      onSortChange({ column: columnKey, direction: newDirection });
-    },
-    [onSortChange, sortState]
-  );
-  const handleResizeStart = react.useCallback(
-    (columnKey, startX, startWidth) => {
-      if (!onColumnResize) return;
-      const col = columns.find((c) => c.key === columnKey);
-      const minW = (col == null ? void 0 : col.minWidth) ?? constants.MIN_COLUMN_WIDTH;
-      const onMouseMove = (e) => {
-        const newWidth = Math.max(minW, startWidth + e.clientX - startX);
-        onColumnResize(columnKey, newWidth);
-      };
-      const onMouseUp = () => {
-        document.removeEventListener("mousemove", onMouseMove);
-        document.removeEventListener("mouseup", onMouseUp);
-        document.body.style.cursor = "";
-        document.body.style.userSelect = "";
-      };
-      document.addEventListener("mousemove", onMouseMove);
-      document.addEventListener("mouseup", onMouseUp);
-      document.body.style.cursor = "col-resize";
-      document.body.style.userSelect = "none";
-    },
-    [onColumnResize, columns]
-  );
-  const getSortAria = (key) => {
-    if ((sortState == null ? void 0 : sortState.column) !== key) return "none";
-    return sortState.direction === "asc" ? "ascending" : "descending";
-  };
-  const renderCell = (col, row) => {
-    const value = row[col.key];
-    if (col.render) return col.render(value, row);
-    return String(value ?? "");
-  };
-  const containerStyle = maxHeight ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(LiveExplorerTable_module.default.root, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: LiveExplorerTable_module.default.tableContainer, style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: LiveExplorerTable_module.default.table, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "th",
-        {
-          scope: "col",
-          className: clsx.clsx(LiveExplorerTable_module.default.th, { [LiveExplorerTable_module.default.sortable]: col.sortable }),
-          style: col.width ? { width: `${col.width}px` } : void 0,
-          "aria-sort": col.sortable ? getSortAria(col.key) : void 0,
-          onClick: col.sortable ? () => handleSort(col.key) : void 0,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: LiveExplorerTable_module.default.thContent, children: [
-              col.label,
-              col.sortable && (sortState == null ? void 0 : sortState.column) === col.key && /* @__PURE__ */ jsxRuntime.jsx("span", { className: LiveExplorerTable_module.default.sortIndicator, "aria-hidden": "true", children: sortState.direction === "asc" ? "▲" : "▼" })
-            ] }),
-            onColumnResize && /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
+const clsx = require("./index50.cjs");
+const HeatmapMatrix_module = require("./index92.cjs");
+function activateOnKey(event, action) {
+  if (event.key === "Enter" || event.key === " ") {
+    event.preventDefault();
+    action();
+  }
+}
+const HeatmapMatrix = react.forwardRef(
+  ({
+    columns,
+    rows,
+    cornerLabel,
+    getCell,
+    onRowHeaderClick,
+    onCellClick,
+    maxHeight,
+    className,
+    style,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: clsx.clsx(HeatmapMatrix_module.default.wrap, className),
+      style: { maxHeight, ...style },
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: HeatmapMatrix_module.default.root, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: HeatmapMatrix_module.default.corner, "aria-hidden": cornerLabel == null, children: cornerLabel }),
+          columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: HeatmapMatrix_module.default.colh, title: col.title, children: col.label }, col.key))
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.map((row) => {
+          const rowInteractive = Boolean(onRowHeaderClick);
+          return /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "th",
               {
-                className: LiveExplorerTable_module.default.resizeHandle,
-                role: "separator",
-                "aria-orientation": "vertical",
-                onMouseDown: (e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  const th = e.target.closest("th");
-                  handleResizeStart(col.key, e.clientX, (th == null ? void 0 : th.offsetWidth) ?? FULL_PERCENT);
-                }
+                scope: "row",
+                className: clsx.clsx(HeatmapMatrix_module.default.rowh, rowInteractive && HeatmapMatrix_module.default.clickable),
+                role: rowInteractive ? "button" : void 0,
+                tabIndex: rowInteractive ? 0 : void 0,
+                onClick: rowInteractive ? () => onRowHeaderClick == null ? void 0 : onRowHeaderClick(row.key) : void 0,
+                onKeyDown: rowInteractive ? (event) => activateOnKey(event, () => onRowHeaderClick == null ? void 0 : onRowHeaderClick(row.key)) : void 0,
+                children: row.label
               }
-            )
-          ]
-        },
-        col.key
-      )) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: isLoading && rows.length === 0 ? Array.from({ length: SKELETON_ROWS }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: LiveExplorerTable_module.default.skeletonRow, children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: LiveExplorerTable_module.default.skeleton }) }, col.key)) }, `skeleton-${i}`)) : rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(
-        "tr",
-        {
-          ref: row.id === selectedRowKey ? selectedRef : void 0,
-          className: clsx.clsx(LiveExplorerTable_module.default.row, {
-            [LiveExplorerTable_module.default.rowSelected]: row.id === selectedRowKey,
-            [LiveExplorerTable_module.default.rowClickable]: !!onRowClick
-          }),
-          "aria-selected": row.id === selectedRowKey || void 0,
-          onClick: onRowClick ? () => onRowClick(row) : void 0,
-          children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: LiveExplorerTable_module.default.td, children: renderCell(col, row) }, col.key))
-        },
-        row.id
-      )) })
-    ] }) }),
-    rows.length === 0 && !isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: LiveExplorerTable_module.default.empty, children: "No data available" }),
-    hasMore && onLoadMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: LiveExplorerTable_module.default.loadMore, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        className: LiveExplorerTable_module.default.loadMoreButton,
-        onClick: onLoadMore,
-        disabled: isFetchingNext,
-        children: isFetchingNext ? "Loading..." : "Load more"
-      }
-    ) })
-  ] });
-};
-LiveExplorerTable.displayName = "LiveExplorerTable";
-exports.LiveExplorerTable = LiveExplorerTable;
+            ),
+            columns.map((col) => {
+              const cell = getCell(row.key, col.key);
+              const cellInteractive = Boolean(onCellClick);
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "td",
+                {
+                  title: cell.title,
+                  className: clsx.clsx(
+                    HeatmapMatrix_module.default.cell,
+                    cell.state && HeatmapMatrix_module.default[cell.state],
+                    cellInteractive && HeatmapMatrix_module.default.clickable
+                  ),
+                  role: cellInteractive ? "button" : void 0,
+                  tabIndex: cellInteractive ? 0 : void 0,
+                  onClick: cellInteractive ? () => onCellClick == null ? void 0 : onCellClick(row.key, col.key) : void 0,
+                  onKeyDown: cellInteractive ? (event) => activateOnKey(event, () => onCellClick == null ? void 0 : onCellClick(row.key, col.key)) : void 0,
+                  children: cell.value
+                },
+                col.key
+              );
+            })
+          ] }, row.key);
+        }) })
+      ] })
+    }
+  )
+);
+HeatmapMatrix.displayName = "HeatmapMatrix";
+exports.HeatmapMatrix = HeatmapMatrix;
 //# sourceMappingURL=index27.cjs.map

package/dist/index27.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index27.cjs","sources":["../src/data/LiveExplorerTable/LiveExplorerTable.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport clsx from 'clsx';\nimport { MIN_COLUMN_WIDTH } from '../../constants';\nimport type {\n  LiveExplorerTableProps,\n  LiveExplorerRow,\n} from './LiveExplorerTable.types';\nimport styles from './LiveExplorerTable.module.css';\n\nconst SKELETON_ROWS = 5;\nconst FULL_PERCENT = 100;\n\nexport const LiveExplorerTable = ({\n  rows,\n  columns,\n  sortState = null,\n  onSortChange,\n  isLoading = false,\n  hasMore = false,\n  isFetchingNext = false,\n  onLoadMore,\n  onColumnResize,\n  onRowClick,\n  selectedRowKey = null,\n  scrollToSelectedRow = false,\n  maxHeight,\n  className,\n}: LiveExplorerTableProps) => {\n  const selectedRef = useRef<HTMLTableRowElement>(null);\n\n  useEffect(() => {\n    if (scrollToSelectedRow && selectedRef.current) {\n      selectedRef.current.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n    }\n  }, [scrollToSelectedRow, selectedRowKey]);\n\n  const handleSort = useCallback(\n    (columnKey: string) => {\n      if (!onSortChange) return;\n      const newDirection: 'asc' | 'desc' =\n        sortState?.column === columnKey && sortState.direction === 'asc' ? 'desc' : 'asc';\n      onSortChange({ column: columnKey, direction: newDirection });\n    },\n    [onSortChange, sortState],\n  );\n\n  const handleResizeStart = useCallback(\n    (columnKey: string, startX: number, startWidth: number) => {\n      if (!onColumnResize) return;\n      const col = columns.find((c) => c.key === columnKey);\n      const minW = col?.minWidth ?? MIN_COLUMN_WIDTH;\n\n      const onMouseMove = (e: MouseEvent) => {\n        const newWidth = Math.max(minW, startWidth + e.clientX - startX);\n        onColumnResize(columnKey, newWidth);\n      };\n\n      const onMouseUp = () => {\n        document.removeEventListener('mousemove', onMouseMove);\n        document.removeEventListener('mouseup', onMouseUp);\n        document.body.style.cursor = '';\n        document.body.style.userSelect = '';\n      };\n\n      document.addEventListener('mousemove', onMouseMove);\n      document.addEventListener('mouseup', onMouseUp);\n      document.body.style.cursor = 'col-resize';\n      document.body.style.userSelect = 'none';\n    },\n    [onColumnResize, columns],\n  );\n\n  const getSortAria = (key: string): 'ascending' | 'descending' | 'none' => {\n    if (sortState?.column !== key) return 'none';\n    return sortState.direction === 'asc' ? 'ascending' : 'descending';\n  };\n\n  const renderCell = (col: (typeof columns)[number], row: LiveExplorerRow) => {\n    const value = row[col.key];\n    if (col.render) return col.render(value, row);\n    return String(value ?? '');\n  };\n\n  const containerStyle = maxHeight\n    ? { maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight }\n    : undefined;\n\n  return (\n    <div className={clsx(styles.root, className)}>\n      <div className={styles.tableContainer} style={containerStyle}>\n        <table className={styles.table}>\n          <thead>\n            <tr>\n              {columns.map((col) => (\n                <th\n                  key={col.key}\n                  scope=\"col\"\n                  className={clsx(styles.th, { [styles.sortable]: col.sortable })}\n                  style={col.width ? { width: `${col.width}px` } : undefined}\n                  aria-sort={col.sortable ? getSortAria(col.key) : undefined}\n                  onClick={col.sortable ? () => handleSort(col.key) : undefined}\n                >\n                  <span className={styles.thContent}>\n                    {col.label}\n                    {col.sortable && sortState?.column === col.key && (\n                      <span className={styles.sortIndicator} aria-hidden=\"true\">\n                        {sortState.direction === 'asc' ? '▲' : '▼'}\n                      </span>\n                    )}\n                  </span>\n                  {onColumnResize && (\n                    <span\n                      className={styles.resizeHandle}\n                      role=\"separator\"\n                      aria-orientation=\"vertical\"\n                      onMouseDown={(e) => {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        const th = (e.target as HTMLElement).closest('th');\n                        handleResizeStart(col.key, e.clientX, th?.offsetWidth ?? FULL_PERCENT);\n                      }}\n                    />\n                  )}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {isLoading && rows.length === 0\n              ? Array.from({ length: SKELETON_ROWS }, (_, i) => (\n                  <tr key={`skeleton-${i}`} className={styles.skeletonRow}>\n                    {columns.map((col) => (\n                      <td key={col.key}>\n                        <div className={styles.skeleton} />\n                      </td>\n                    ))}\n                  </tr>\n                ))\n              : rows.map((row) => (\n                  <tr\n                    key={row.id}\n                    ref={row.id === selectedRowKey ? selectedRef : undefined}\n                    className={clsx(styles.row, {\n                      [styles.rowSelected]: row.id === selectedRowKey,\n                      [styles.rowClickable]: !!onRowClick,\n                    })}\n                    aria-selected={row.id === selectedRowKey || undefined}\n                    onClick={onRowClick ? () => onRowClick(row) : undefined}\n                  >\n                    {columns.map((col) => (\n                      <td key={col.key} className={styles.td}>\n                        {renderCell(col, row)}\n                      </td>\n                    ))}\n                  </tr>\n                ))}\n          </tbody>\n        </table>\n      </div>\n\n      {rows.length === 0 && !isLoading && (\n        <div className={styles.empty}>No data available</div>\n      )}\n\n      {hasMore && onLoadMore && (\n        <div className={styles.loadMore}>\n          <button\n            type=\"button\"\n            className={styles.loadMoreButton}\n            onClick={onLoadMore}\n            disabled={isFetchingNext}\n          >\n            {isFetchingNext ? 'Loading...' : 'Load more'}\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n\nLiveExplorerTable.displayName = 'LiveExplorerTable';\n"],"names":["useRef","useEffect","useCallback","MIN_COLUMN_WIDTH","clsx","styles","jsx","jsxs"],"mappings":"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"}
+{"version":3,"file":"index27.cjs","sources":["../src/data/HeatmapMatrix/HeatmapMatrix.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { HeatmapMatrixProps } from './HeatmapMatrix.types';\nimport styles from './HeatmapMatrix.module.css';\n\nfunction activateOnKey(event: React.KeyboardEvent, action: () => void) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    action();\n  }\n}\n\nexport const HeatmapMatrix = forwardRef<HTMLDivElement, HeatmapMatrixProps>(\n  (\n    {\n      columns,\n      rows,\n      cornerLabel,\n      getCell,\n      onRowHeaderClick,\n      onCellClick,\n      maxHeight,\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) => (\n    <div\n      ref={ref}\n      className={clsx(styles.wrap, className)}\n      style={{ maxHeight, ...style }}\n      {...props}\n    >\n      <table className={styles.root}>\n        <thead>\n          <tr>\n            <th scope=\"col\" className={styles.corner} aria-hidden={cornerLabel == null}>\n              {cornerLabel}\n            </th>\n            {columns.map((col) => (\n              <th key={col.key} scope=\"col\" className={styles.colh} title={col.title}>\n                {col.label}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {rows.map((row) => {\n            const rowInteractive = Boolean(onRowHeaderClick);\n            return (\n              <tr key={row.key}>\n                <th\n                  scope=\"row\"\n                  className={clsx(styles.rowh, rowInteractive && styles.clickable)}\n                  role={rowInteractive ? 'button' : undefined}\n                  tabIndex={rowInteractive ? 0 : undefined}\n                  onClick={rowInteractive ? () => onRowHeaderClick?.(row.key) : undefined}\n                  onKeyDown={\n                    rowInteractive\n                      ? (event) => activateOnKey(event, () => onRowHeaderClick?.(row.key))\n                      : undefined\n                  }\n                >\n                  {row.label}\n                </th>\n                {columns.map((col) => {\n                  const cell = getCell(row.key, col.key);\n                  const cellInteractive = Boolean(onCellClick);\n                  return (\n                    <td\n                      key={col.key}\n                      title={cell.title}\n                      className={clsx(\n                        styles.cell,\n                        cell.state && styles[cell.state],\n                        cellInteractive && styles.clickable,\n                      )}\n                      role={cellInteractive ? 'button' : undefined}\n                      tabIndex={cellInteractive ? 0 : undefined}\n                      onClick={cellInteractive ? () => onCellClick?.(row.key, col.key) : undefined}\n                      onKeyDown={\n                        cellInteractive\n                          ? (event) => activateOnKey(event, () => onCellClick?.(row.key, col.key))\n                          : undefined\n                      }\n                    >\n                      {cell.value}\n                    </td>\n                  );\n                })}\n              </tr>\n            );\n          })}\n        </tbody>\n      </table>\n    </div>\n  ),\n);\n\nHeatmapMatrix.displayName = 'HeatmapMatrix';\n"],"names":["forwardRef","jsx","clsx","styles","jsxs"],"mappings":";;;;;;AAKA,SAAS,cAAc,OAA4B,QAAoB;AACrE,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,UAAM,eAAA;AACN,WAAA;AAAA,EACF;AACF;AAEO,MAAM,gBAAgBA,MAAAA;AAAAA,EAC3B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QAEAC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAWC,KAAAA,KAAKC,6BAAO,MAAM,SAAS;AAAA,MACtC,OAAO,EAAE,WAAW,GAAG,MAAA;AAAA,MACtB,GAAG;AAAA,MAEJ,UAAAC,2BAAAA,KAAC,SAAA,EAAM,WAAWD,qBAAAA,QAAO,MACvB,UAAA;AAAA,QAAAF,2BAAAA,IAAC,SAAA,EACC,0CAAC,MAAA,EACC,UAAA;AAAA,UAAAA,2BAAAA,IAAC,MAAA,EAAG,OAAM,OAAM,WAAWE,qBAAAA,QAAO,QAAQ,eAAa,eAAe,MACnE,UAAA,YAAA,CACH;AAAA,UACC,QAAQ,IAAI,CAAC,QACZF,2BAAAA,IAAC,MAAA,EAAiB,OAAM,OAAM,WAAWE,qBAAAA,QAAO,MAAM,OAAO,IAAI,OAC9D,cAAI,MAAA,GADE,IAAI,GAEb,CACD;AAAA,QAAA,EAAA,CACH,EAAA,CACF;AAAA,QACAF,2BAAAA,IAAC,SAAA,EACE,UAAA,KAAK,IAAI,CAAC,QAAQ;AACjB,gBAAM,iBAAiB,QAAQ,gBAAgB;AAC/C,iDACG,MAAA,EACC,UAAA;AAAA,YAAAA,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAM;AAAA,gBACN,WAAWC,KAAAA,KAAKC,qBAAAA,QAAO,MAAM,kBAAkBA,qBAAAA,QAAO,SAAS;AAAA,gBAC/D,MAAM,iBAAiB,WAAW;AAAA,gBAClC,UAAU,iBAAiB,IAAI;AAAA,gBAC/B,SAAS,iBAAiB,MAAM,qDAAmB,IAAI,OAAO;AAAA,gBAC9D,WACE,iBACI,CAAC,UAAU,cAAc,OAAO,MAAM,qDAAmB,IAAI,IAAI,IACjE;AAAA,gBAGL,UAAA,IAAI;AAAA,cAAA;AAAA,YAAA;AAAA,YAEN,QAAQ,IAAI,CAAC,QAAQ;AACpB,oBAAM,OAAO,QAAQ,IAAI,KAAK,IAAI,GAAG;AACrC,oBAAM,kBAAkB,QAAQ,WAAW;AAC3C,qBACEF,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,OAAO,KAAK;AAAA,kBACZ,WAAWC,KAAAA;AAAAA,oBACTC,qBAAAA,QAAO;AAAA,oBACP,KAAK,SAASA,6BAAO,KAAK,KAAK;AAAA,oBAC/B,mBAAmBA,qBAAAA,QAAO;AAAA,kBAAA;AAAA,kBAE5B,MAAM,kBAAkB,WAAW;AAAA,kBACnC,UAAU,kBAAkB,IAAI;AAAA,kBAChC,SAAS,kBAAkB,MAAM,2CAAc,IAAI,KAAK,IAAI,OAAO;AAAA,kBACnE,WACE,kBACI,CAAC,UAAU,cAAc,OAAO,MAAM,2CAAc,IAAI,KAAK,IAAI,IAAI,IACrE;AAAA,kBAGL,UAAA,KAAK;AAAA,gBAAA;AAAA,gBAhBD,IAAI;AAAA,cAAA;AAAA,YAmBf,CAAC;AAAA,UAAA,EAAA,GAvCM,IAAI,GAwCb;AAAA,QAEJ,CAAC,EAAA,CACH;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,cAAc,cAAc;;"}