@vef-framework/components 1.0.122 → 1.0.124

package/esm/vef-tree-select/index.js

@@ -0,0 +1,90 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useOptionFilter } from '@vef-framework/hooks';
+import { styles } from '@vef-framework/shared';
+import { TreeSelect } from 'antd';
+import { memo, forwardRef } from 'react';
+import '../internal/index.js';
+import VefLoadingPlaceholder from '../vef-loading-placeholder/index.js';
+import { useChangeHandler } from './hooks/use-change-handler.js';
+import { useDataOptions } from './hooks/use-data-options.js';
+import { useTreeSelectInstance } from './hooks/use-tree-select-instance.js';
+import { convertBasicSizeToUiSize } from '../internal/utils.js';
+
+"use strict";
+const listHeight = 280;
+const loadingPlaceholder = /* @__PURE__ */ jsx("div", { css: { height: listHeight / 2 }, children: /* @__PURE__ */ jsx(VefLoadingPlaceholder, {}) });
+const treeLineOptions = { showLeafIcon: false };
+function VefTreeSelectBase({
+  defaultValue,
+  value,
+  size,
+  clearable,
+  disabled,
+  placeholder,
+  variant,
+  maxCount,
+  onClear,
+  onBlur,
+  onFocus,
+  onChange,
+  onSelect,
+  onDeselect,
+  multiple = false,
+  filterable = true,
+  filterFromRemote = false,
+  ...restProps
+}, ref) {
+  const {
+    normalizedOptions,
+    isLoading
+  } = useDataOptions({
+    value,
+    multiple,
+    onChange,
+    filterable,
+    filterFromRemote,
+    ...restProps
+  });
+  const filterTreeNode = useOptionFilter(filterable, false);
+  const handleChange = useChangeHandler(onChange, normalizedOptions);
+  const treeSelectRef = useTreeSelectInstance(ref, normalizedOptions);
+  return /* @__PURE__ */ jsx(
+    TreeSelect,
+    {
+      ref: treeSelectRef,
+      virtual: true,
+      allowClear: clearable,
+      css: styles.fullWidth,
+      defaultValue,
+      disabled,
+      filterTreeNode,
+      listHeight,
+      loading: isLoading,
+      maxCount,
+      maxTagCount: multiple ? "responsive" : void 0,
+      multiple,
+      notFoundContent: isLoading ? loadingPlaceholder : void 0,
+      placeholder,
+      showSearch: filterable,
+      size: convertBasicSizeToUiSize(size),
+      treeCheckable: multiple,
+      treeData: normalizedOptions,
+      treeLine: treeLineOptions,
+      value,
+      variant,
+      onBlur,
+      onChange: handleChange,
+      onClear,
+      onDeselect,
+      onFocus,
+      onSelect
+    }
+  );
+}
+const VefTreeSelect = memo(
+  forwardRef(VefTreeSelectBase)
+);
+VefTreeSelect.displayName = "VefTreeSelect";
+
+export { VefTreeSelect as default };

package/esm/vef-tree-select/props.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

package/esm/vef-virtual-grid/index.js

@@ -0,0 +1,117 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useGapSizeNormalizer } from '@vef-framework/hooks';
+import { isArray, isNumber } from '@vef-framework/shared';
+import { useMemo, memo, useRef, Fragment, createElement } from 'react';
+import VefAutoSizer from '../vef-auto-sizer/index.js';
+import VefScrollArea from '../vef-scroll-area/index.js';
+
+"use strict";
+const viewportStyle = {
+  willChange: "transform"
+};
+const containerStyle = css`
+  position: relative;
+  width: var(--vef-virtual-grid-width);
+  height: var(--vef-virtual-grid-height);
+`;
+const virtualItemStyle = css`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: var(--vef-virtual-grid-item-width);
+  height: var(--vef-virtual-grid-item-height);
+  transform: translateX(var(--vef-virtual-grid-item-x)) translateY(var(--vef-virtual-grid-item-y));
+`;
+function VefVirtualGridBase({
+  className,
+  style,
+  items,
+  renderItem,
+  itemClassName,
+  itemStyle,
+  rowHeight,
+  columnWidth,
+  gap,
+  ...restProps
+}) {
+  const GridItem = useMemo(() => memo(renderItem), [renderItem]);
+  const viewportRef = useRef(null);
+  const normalizeGapSize = useGapSizeNormalizer();
+  const [rowGap, columnGap] = useMemo(() => {
+    if (isArray(gap)) {
+      return [normalizeGapSize(gap[0]), normalizeGapSize(gap[1])];
+    }
+    if (gap) {
+      const normalizedGap = normalizeGapSize(gap);
+      return [normalizedGap, normalizedGap];
+    }
+    return [0, 0];
+  }, [gap, normalizeGapSize]);
+  const rowVirtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => viewportRef.current,
+    estimateSize: isNumber(rowHeight) ? () => rowHeight : rowHeight,
+    overscan: 2,
+    gap: rowGap
+  });
+  const columnVirtualizer = useVirtualizer({
+    horizontal: true,
+    count: items[0]?.length ?? 0,
+    getScrollElement: () => viewportRef.current,
+    estimateSize: isNumber(columnWidth) ? () => columnWidth : columnWidth,
+    overscan: 2,
+    gap: columnGap
+  });
+  const containerSizeStyle = useMemo(() => ({
+    "--vef-virtual-grid-height": `${rowVirtualizer.getTotalSize()}px`,
+    "--vef-virtual-grid-width": `${columnVirtualizer.getTotalSize()}px`
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), [rowVirtualizer.getTotalSize(), columnVirtualizer.getTotalSize()]);
+  const getVirtualGridNode = (height, width) => /* @__PURE__ */ jsx(
+    VefScrollArea,
+    {
+      className,
+      height,
+      scrollbarSize: "small",
+      style,
+      viewportRef,
+      viewportStyle,
+      width,
+      children: /* @__PURE__ */ jsx("div", { css: containerStyle, style: containerSizeStyle, children: rowVirtualizer.getVirtualItems().map((row) => /* @__PURE__ */ jsx(Fragment, { children: columnVirtualizer.getVirtualItems().map((item) => {
+        const itemData = items[row.index][item.index];
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: itemClassName,
+            css: virtualItemStyle,
+            style: {
+              ...itemStyle,
+              "--vef-virtual-grid-item-width": `${item.size}px`,
+              "--vef-virtual-grid-item-height": `${row.size}px`,
+              "--vef-virtual-grid-item-x": `${item.start}px`,
+              "--vef-virtual-grid-item-y": `${row.start}px`
+            },
+            children: itemData && createElement(GridItem, {
+              item: itemData,
+              rowIndex: row.index,
+              columnIndex: item.index
+            })
+          },
+          item.key
+        );
+      }) }, row.key)) })
+    }
+  );
+  if (!restProps.autoSize) {
+    const { height, width } = restProps;
+    return getVirtualGridNode(height, width);
+  }
+  return /* @__PURE__ */ jsx(VefAutoSizer, { children: ({ height, width }) => getVirtualGridNode(height, width) });
+}
+const VefVirtualGrid = memo(VefVirtualGridBase);
+VefVirtualGrid.displayName = "VefVirtualGrid";
+
+export { VefVirtualGrid as default };

package/esm/vef-virtual-grid/props.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

package/esm/vef-virtual-list/index.js

@@ -0,0 +1,230 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useNormalizedGapSize } from '@vef-framework/hooks';
+import { isFunction } from '@vef-framework/shared';
+import { useMemo, memo, useRef, createElement } from 'react';
+import VefAutoSizer from '../vef-auto-sizer/index.js';
+import VefScrollArea from '../vef-scroll-area/index.js';
+
+"use strict";
+const viewportStyle = {
+  willChange: "transform"
+};
+const containerStyle = css`
+  position: relative;
+  width: var(--vef-virtual-list-width, auto);
+  height: var(--vef-virtual-list-height, auto);
+`;
+const virtualItemStyle = css`
+  position: absolute;
+  top: var(--vef-virtual-list-item-top, 0);
+  left: var(--vef-virtual-list-item-left, 0);
+  width: var(--vef-virtual-list-item-width, auto);
+  height: var(--vef-virtual-list-item-height, auto);
+  transform: translateX(var(--vef-virtual-list-item-x, 0)) translateY(var(--vef-virtual-list-item-y, 0));
+`;
+const frameStyle = css`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  transform: translateY(var(--vef-virtual-list-frame-y, 0)); 
+`;
+function VefVirtualListBase({
+  className,
+  style,
+  items,
+  renderItem,
+  itemClassName,
+  itemStyle,
+  itemSize,
+  autoItemSize = false,
+  gap = 0,
+  lanes = 1,
+  itemKey,
+  ...restProps
+}) {
+  const ListItem = useMemo(() => memo(renderItem), [renderItem]);
+  const itemKeyToUse = useMemo(() => {
+    if (isFunction(itemKey)) {
+      return (index) => itemKey({
+        index,
+        item: items[index]
+      });
+    }
+  }, [itemKey, items]);
+  const itemSizeToUse = useMemo(() => {
+    if (isFunction(itemSize)) {
+      return (index) => itemSize({
+        index,
+        item: items[index]
+      });
+    }
+    return () => itemSize;
+  }, [itemSize, items]);
+  const normalizedGap = useNormalizedGapSize(gap);
+  const viewportRef = useRef(null);
+  const { orientation } = restProps;
+  const virtualizer = useVirtualizer({
+    horizontal: orientation === "horizontal",
+    count: items.length,
+    getScrollElement: () => viewportRef.current,
+    estimateSize: itemSizeToUse,
+    overscan: 2,
+    getItemKey: itemKeyToUse,
+    gap: normalizedGap,
+    lanes
+  });
+  const virtualItems = virtualizer.getVirtualItems();
+  const baseCrossSize = 100 / lanes;
+  const containerSizeStyle = useMemo(() => {
+    if (orientation === "horizontal") {
+      return {
+        "--vef-virtual-list-width": `${virtualizer.getTotalSize()}px`,
+        "--vef-virtual-list-height": "100%"
+      };
+    }
+    return {
+      "--vef-virtual-list-height": `${virtualizer.getTotalSize()}px`,
+      "--vef-virtual-list-width": "100%"
+    };
+  }, [orientation, virtualizer.getTotalSize()]);
+  const mergedViewportStyle = useMemo(() => {
+    if (autoItemSize && orientation !== "horizontal") {
+      return {
+        ...viewportStyle,
+        contain: "strict"
+      };
+    }
+    return viewportStyle;
+  }, [autoItemSize, orientation]);
+  const getVirtualListNode = (height, width) => {
+    if (autoItemSize) {
+      return /* @__PURE__ */ jsx(
+        VefScrollArea,
+        {
+          className,
+          height,
+          scrollbarSize: "small",
+          style,
+          viewportRef,
+          viewportStyle: mergedViewportStyle,
+          width,
+          children: /* @__PURE__ */ jsx("div", { css: containerStyle, style: containerSizeStyle, children: orientation === "horizontal" ? virtualItems.map(
+            ({
+              index,
+              key,
+              start
+            }) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: itemClassName,
+                css: virtualItemStyle,
+                style: {
+                  "--vef-virtual-list-item-top": 0,
+                  "--vef-virtual-list-item-left": 0,
+                  "--vef-virtual-list-item-width": "auto",
+                  "--vef-virtual-list-item-height": "100%",
+                  "--vef-virtual-list-item-x": `${start}px`,
+                  "--vef-virtual-list-item-y": 0
+                },
+                children: createElement(ListItem, {
+                  index,
+                  item: items[index]
+                })
+              },
+              key
+            )
+          ) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              css: frameStyle,
+              style: {
+                "--vef-virtual-list-frame-y": `${virtualItems[0]?.start ?? 0}px`
+              },
+              children: virtualItems.map(
+                ({ index, key }) => /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ref: virtualizer.measureElement,
+                    className: itemClassName,
+                    "data-index": index,
+                    style: itemStyle,
+                    children: createElement(ListItem, {
+                      index,
+                      item: items[index]
+                    })
+                  },
+                  key
+                )
+              )
+            }
+          ) })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      VefScrollArea,
+      {
+        className,
+        height,
+        scrollbarSize: "small",
+        style,
+        viewportRef,
+        viewportStyle: mergedViewportStyle,
+        width,
+        children: /* @__PURE__ */ jsx("div", { css: containerStyle, style: containerSizeStyle, children: virtualItems.map(
+          ({
+            index,
+            key,
+            size,
+            start,
+            lane
+          }) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: itemClassName,
+              css: virtualItemStyle,
+              style: orientation === "horizontal" ? {
+                "--vef-virtual-list-item-top": lane === 0 ? 0 : `${lane * baseCrossSize}%`,
+                "--vef-virtual-list-item-left": 0,
+                "--vef-virtual-list-item-width": `${size}px`,
+                "--vef-virtual-list-item-height": `${baseCrossSize}%`,
+                "--vef-virtual-list-item-x": `${start}px`,
+                "--vef-virtual-list-item-y": 0
+              } : {
+                "--vef-virtual-list-item-top": 0,
+                "--vef-virtual-list-item-left": lane === 0 ? 0 : `${lane * baseCrossSize}%`,
+                "--vef-virtual-list-item-width": `${baseCrossSize}%`,
+                "--vef-virtual-list-item-height": `${size}px`,
+                "--vef-virtual-list-item-x": 0,
+                "--vef-virtual-list-item-y": `${start}px`
+              },
+              children: createElement(ListItem, {
+                index,
+                item: items[index]
+              })
+            },
+            key
+          )
+        ) })
+      }
+    );
+  };
+  if (!restProps.autoSize) {
+    if (restProps.orientation === "horizontal") {
+      return getVirtualListNode("100%", restProps.width);
+    }
+    return getVirtualListNode(restProps.height, "100%");
+  }
+  if (restProps.orientation === "horizontal") {
+    return /* @__PURE__ */ jsx(VefAutoSizer, { disableHeight: true, children: ({ width }) => getVirtualListNode("100%", width) });
+  }
+  return /* @__PURE__ */ jsx(VefAutoSizer, { disableWidth: true, children: ({ height }) => getVirtualListNode(height, "100%") });
+}
+const VefVirtualList = memo(VefVirtualListBase);
+VefVirtualList.displayName = "VefVirtualList";
+
+export { VefVirtualList as default };

package/esm/vef-virtual-list/props.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@vef-framework/components",
   "type": "module",
-  "version": "1.0.122",
+  "version": "1.0.124",
   "private": false,
-  "packageManager": "pnpm@9.15.0",
   "description": "Components fundamental to the VEF framework",
   "author": "Venus",
   "keywords": [
@@ -15,11 +14,11 @@
   "exports": {
     ".": {
       "types": "./types/index.d.ts",
-      "import": "./es/index.js",
-      "require": "./lib/index.cjs"
+      "import": "./esm/index.js",
+      "require": "./cjs/index.cjs"
     }
   },
-  "main": "es/index.js",
+  "main": "cjs/index.cjs",
   "types": "types/index.d.ts",
   "files": [
     "*"
@@ -31,13 +30,13 @@
     "@emotion/cache": "11.14.0",
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.0",
-    "antd": "5.24.3",
+    "antd": "5.24.4",
     "tslib": "2.8.1",
     "use-sync-external-store": "^1.4.0",
     "@ant-design/icons": "5.6.1",
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-yaml": "^6.1.2",
-    "@codemirror/language": "^6.10.8",
+    "@codemirror/language": "^6.11.0",
     "@codemirror/lint": "^6.8.4",
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.36.4",
@@ -53,23 +52,23 @@
     "@patternfly/react-topology": "^6.1.0",
     "@radix-ui/react-scroll-area": "1.2.3",
     "@tanstack/react-table": "^8.21.2",
-    "@tanstack/react-virtual": "3.13.2",
+    "@tanstack/react-virtual": "3.13.4",
     "@uiw/codemirror-extensions-langs": "^4.23.10",
     "@uiw/codemirror-theme-material": "^4.23.10",
     "@uiw/react-codemirror": "^4.23.10",
-    "@vef-framework/core": "1.0.122",
-    "@vef-framework/hooks": "1.0.122",
-    "@vef-framework/shared": "1.0.122",
+    "@vef-framework/core": "1.0.124",
+    "@vef-framework/hooks": "1.0.124",
+    "@vef-framework/shared": "1.0.124",
     "@xyflow/react": "^12.4.4",
     "clsx": "2.1.1",
     "codemirror-json-schema": "^0.8.0",
     "codemirror-json5": "^1.0.3",
     "dayjs": "1.11.13",
     "handsontable": "^15.1.0",
-    "lucide-react": "0.479.0",
+    "lucide-react": "0.482.0",
     "modern-normalize": "^3.0.1",
     "monaco-editor": "^0.52.2",
-    "motion": "12.4.10",
+    "motion": "12.5.0",
     "polished": "4.3.1",
     "react-container-query": "0.13.0",
     "react-error-boundary": "4.1.2",
@@ -79,6 +78,8 @@
   "publishConfig": {
     "access": "public"
   },
+  "module": "esm/index.js",
+  "packageManager": "pnpm@10.6.3",
   "peerDependencies": {
     "react": "18.3.1",
     "react-dom": "18.3.1"