@bifrostui/react 2.0.0-alpha.31 → 2.0.0-alpha.33

package/es/ScrollView/__tests__/fixtures/A11yDemos.js

@@ -17,24 +17,26 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import ScrollView from "../../ScrollView";
 const BasicScrollViewDemo = () => {
-  return /* @__PURE__ */ React.createElement(ScrollView, { scrollY: true, style: { height: "300px", width: "100%" } }, Array.from({ length: 50 }, (_, index) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(ScrollView, { scrollY: true, style: { height: "300px", width: "100%" }, children: Array.from({ length: 50 }, (_, index) => /* @__PURE__ */ jsxs(
     "div",
     {
-      key: index,
-      style: { padding: "10px", borderBottom: "1px solid #eee" }
+      style: { padding: "10px", borderBottom: "1px solid #eee" },
+      children: [
+        "Item ",
+        index + 1
+      ]
     },
-    "Item ",
-    index + 1
-  )));
+    index
+  )) });
 };
 const HorizontalScrollViewDemo = () => {
-  return /* @__PURE__ */ React.createElement(ScrollView, { scrollX: true, style: { width: "300px" } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", width: "max-content" } }, Array.from({ length: 20 }, (_, index) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(ScrollView, { scrollX: true, style: { width: "300px" }, children: /* @__PURE__ */ jsx("div", { style: { display: "flex", width: "max-content" }, children: Array.from({ length: 20 }, (_, index) => /* @__PURE__ */ jsxs(
     "div",
     {
-      key: index,
       style: {
         minWidth: "100px",
         height: "80px",
@@ -44,11 +46,14 @@ const HorizontalScrollViewDemo = () => {
         display: "flex",
         alignItems: "center",
         justifyContent: "center"
-      }
+      },
+      children: [
+        "Item ",
+        index + 1
+      ]
     },
-    "Item ",
-    index + 1
-  ))));
+    index
+  )) }) });
 };
 const ScrollEventsDemo = () => {
   const [scrollInfo, setScrollInfo] = React.useState({
@@ -70,40 +75,56 @@ const ScrollEventsDemo = () => {
   const handleScrollToLower = () => {
     setScrollInfo((prev) => __spreadProps(__spreadValues({}, prev), { atTop: false, atBottom: true }));
   };
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      "data-testid": "scroll-info",
-      style: {
-        marginBottom: "10px",
-        padding: "10px",
-        backgroundColor: "#f9f9f9"
-      }
-    },
-    /* @__PURE__ */ React.createElement("p", null, "Scroll Top: ", scrollInfo.scrollTop),
-    /* @__PURE__ */ React.createElement("p", null, "At Top: ", scrollInfo.atTop ? "Yes" : "No"),
-    /* @__PURE__ */ React.createElement("p", null, "At Bottom: ", scrollInfo.atBottom ? "Yes" : "No")
-  ), /* @__PURE__ */ React.createElement(
-    ScrollView,
-    {
-      scrollY: true,
-      style: { height: "200px", width: "100%" },
-      onScroll: handleScroll,
-      onScrollToUpper: handleScrollToUpper,
-      onScrollToLower: handleScrollToLower,
-      upperThreshold: 30,
-      lowerThreshold: 30
-    },
-    Array.from({ length: 30 }, (_, index) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
       "div",
       {
-        key: index,
-        style: { padding: "15px", borderBottom: "1px solid #ddd" }
-      },
-      "Scroll Item ",
-      index + 1
-    ))
-  ));
+        "data-testid": "scroll-info",
+        style: {
+          marginBottom: "10px",
+          padding: "10px",
+          backgroundColor: "#f9f9f9"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("p", { children: [
+            "Scroll Top: ",
+            scrollInfo.scrollTop
+          ] }),
+          /* @__PURE__ */ jsxs("p", { children: [
+            "At Top: ",
+            scrollInfo.atTop ? "Yes" : "No"
+          ] }),
+          /* @__PURE__ */ jsxs("p", { children: [
+            "At Bottom: ",
+            scrollInfo.atBottom ? "Yes" : "No"
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ScrollView,
+      {
+        scrollY: true,
+        style: { height: "200px", width: "100%" },
+        onScroll: handleScroll,
+        onScrollToUpper: handleScrollToUpper,
+        onScrollToLower: handleScrollToLower,
+        upperThreshold: 30,
+        lowerThreshold: 30,
+        children: Array.from({ length: 30 }, (_, index) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: { padding: "15px", borderBottom: "1px solid #ddd" },
+            children: [
+              "Scroll Item ",
+              index + 1
+            ]
+          },
+          index
+        ))
+      }
+    )
+  ] });
 };
 const ControlledScrollDemo = () => {
   const [scrollTop, setScrollTop] = React.useState(0);
@@ -116,72 +137,79 @@ const ControlledScrollDemo = () => {
     setScrollTop(0);
     setScrollIntoView(elementId);
   };
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      style: {
-        marginBottom: "10px",
-        padding: "10px",
-        backgroundColor: "#f5f5f5"
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: () => scrollToPosition(0),
-        style: { marginRight: "5px" }
-      },
-      "Top"
-    ),
-    /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: () => scrollToPosition(200),
-        style: { marginRight: "5px" }
-      },
-      "200px"
-    ),
-    /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: () => scrollToElement("item-10"),
-        style: { marginRight: "5px" }
-      },
-      "Item 10"
-    ),
-    /* @__PURE__ */ React.createElement("button", { type: "button", onClick: () => scrollToElement("item-20") }, "Item 20")
-  ), /* @__PURE__ */ React.createElement(
-    ScrollView,
-    {
-      scrollY: true,
-      style: { height: "250px", width: "100%" },
-      scrollTop,
-      scrollIntoView,
-      scrollWithAnimation: true
-    },
-    Array.from({ length: 30 }, (_, index) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
       "div",
       {
-        key: index,
-        id: `item-${index + 1}`,
         style: {
-          padding: "20px",
-          borderBottom: "1px solid #ccc",
-          backgroundColor: (index + 1) % 10 === 0 ? "#e6f3ff" : "white"
-        }
-      },
-      "Item ",
-      index + 1,
-      " ",
-      (index + 1) % 10 === 0 && "(Highlighted)"
-    ))
-  ));
+          marginBottom: "10px",
+          padding: "10px",
+          backgroundColor: "#f5f5f5"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => scrollToPosition(0),
+              style: { marginRight: "5px" },
+              children: "Top"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => scrollToPosition(200),
+              style: { marginRight: "5px" },
+              children: "200px"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => scrollToElement("item-10"),
+              style: { marginRight: "5px" },
+              children: "Item 10"
+            }
+          ),
+          /* @__PURE__ */ jsx("button", { type: "button", onClick: () => scrollToElement("item-20"), children: "Item 20" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ScrollView,
+      {
+        scrollY: true,
+        style: { height: "250px", width: "100%" },
+        scrollTop,
+        scrollIntoView,
+        scrollWithAnimation: true,
+        children: Array.from({ length: 30 }, (_, index) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            id: `item-${index + 1}`,
+            style: {
+              padding: "20px",
+              borderBottom: "1px solid #ccc",
+              backgroundColor: (index + 1) % 10 === 0 ? "#e6f3ff" : "white"
+            },
+            children: [
+              "Item ",
+              index + 1,
+              " ",
+              (index + 1) % 10 === 0 && "(Highlighted)"
+            ]
+          },
+          index
+        ))
+      }
+    )
+  ] });
 };
 const BidirectionalScrollDemo = () => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     ScrollView,
     {
       scrollX: true,
@@ -191,39 +219,41 @@ const BidirectionalScrollDemo = () => {
         height: "200px",
         border: "1px solid #ddd",
         borderRadius: "4px"
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        style: {
-          width: "600px",
-          height: "400px",
-          backgroundImage: "linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%)",
-          backgroundSize: "20px 20px",
-          backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
-          position: "relative"
-        }
       },
-      /* @__PURE__ */ React.createElement(
+      children: /* @__PURE__ */ jsx(
         "div",
         {
           style: {
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
-            padding: "20px",
-            backgroundColor: "white",
-            border: "2px solid #007acc",
-            borderRadius: "8px",
-            boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
-          }
-        },
-        /* @__PURE__ */ React.createElement("h3", { style: { margin: "0 0 10px 0", color: "#007acc" } }, "Scroll in both directions!"),
-        /* @__PURE__ */ React.createElement("p", { style: { margin: 0, color: "#666" } }, "This content area is larger than the viewport")
+            width: "600px",
+            height: "400px",
+            backgroundImage: "linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%)",
+            backgroundSize: "20px 20px",
+            backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
+            position: "relative"
+          },
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                padding: "20px",
+                backgroundColor: "white",
+                border: "2px solid #007acc",
+                borderRadius: "8px",
+                boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
+              },
+              children: [
+                /* @__PURE__ */ jsx("h3", { style: { margin: "0 0 10px 0", color: "#007acc" }, children: "Scroll in both directions!" }),
+                /* @__PURE__ */ jsx("p", { style: { margin: 0, color: "#666" }, children: "This content area is larger than the viewport" })
+              ]
+            }
+          )
+        }
       )
-    )
+    }
   );
 };
 const ThresholdTestDemo = () => {
@@ -234,44 +264,51 @@ const ThresholdTestDemo = () => {
       `${(/* @__PURE__ */ new Date()).toLocaleTimeString()}: ${event}`
     ]);
   };
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      "data-testid": "threshold-events",
-      style: {
-        marginBottom: "10px",
-        padding: "10px",
-        backgroundColor: "#f0f8ff",
-        minHeight: "80px"
-      }
-    },
-    /* @__PURE__ */ React.createElement("strong", null, "Threshold Events:"),
-    thresholdEvents.map((event, index) => /* @__PURE__ */ React.createElement("div", { key: index, style: { fontSize: "12px", color: "#666" } }, event))
-  ), /* @__PURE__ */ React.createElement(
-    ScrollView,
-    {
-      scrollY: true,
-      style: { height: "150px", width: "100%" },
-      upperThreshold: 20,
-      lowerThreshold: 20,
-      onScrollToUpper: () => addEvent("Reached upper threshold (20px)"),
-      onScrollToLower: () => addEvent("Reached lower threshold (20px)")
-    },
-    Array.from({ length: 20 }, (_, index) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
       "div",
       {
-        key: index,
+        "data-testid": "threshold-events",
         style: {
-          padding: "12px",
-          borderBottom: "1px solid #eee",
-          backgroundColor: index === 0 || index === 19 ? "#fff3cd" : "white"
-        }
-      },
-      index === 0 && "First Item (Top Threshold Test)",
-      index === 19 && "Last Item (Bottom Threshold Test)",
-      index !== 0 && index !== 19 && `Item ${index + 1}`
-    ))
-  ));
+          marginBottom: "10px",
+          padding: "10px",
+          backgroundColor: "#f0f8ff",
+          minHeight: "80px"
+        },
+        children: [
+          /* @__PURE__ */ jsx("strong", { children: "Threshold Events:" }),
+          thresholdEvents.map((event, index) => /* @__PURE__ */ jsx("div", { style: { fontSize: "12px", color: "#666" }, children: event }, index))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ScrollView,
+      {
+        scrollY: true,
+        style: { height: "150px", width: "100%" },
+        upperThreshold: 20,
+        lowerThreshold: 20,
+        onScrollToUpper: () => addEvent("Reached upper threshold (20px)"),
+        onScrollToLower: () => addEvent("Reached lower threshold (20px)"),
+        children: Array.from({ length: 20 }, (_, index) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: "12px",
+              borderBottom: "1px solid #eee",
+              backgroundColor: index === 0 || index === 19 ? "#fff3cd" : "white"
+            },
+            children: [
+              index === 0 && "First Item (Top Threshold Test)",
+              index === 19 && "Last Item (Bottom Threshold Test)",
+              index !== 0 && index !== 19 && `Item ${index + 1}`
+            ]
+          },
+          index
+        ))
+      }
+    )
+  ] });
 };
 export {
   BasicScrollViewDemo,

package/es/Select/Select.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { SelectProps } from './Select.types';
 import './index.less';
-declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Select;

package/es/Select/Select.js

@@ -49,6 +49,7 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
+import { jsx, jsxs } from "react/jsx-runtime";
 import { CaretDownIcon, CaretUpIcon } from "@bifrostui/icons";
 import {
   getStylesAndLocation,
@@ -181,100 +182,108 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
       };
     }
   }, []);
-  const defaultIcon = isOpen ? /* @__PURE__ */ React.createElement(CaretUpIcon, { className: `${prefixCls}-selector-icon`, color: "neutral" }) : /* @__PURE__ */ React.createElement(CaretDownIcon, { className: `${prefixCls}-selector-icon`, color: "neutral" });
+  const defaultIcon = isOpen ? /* @__PURE__ */ jsx(CaretUpIcon, { className: `${prefixCls}-selector-icon`, color: "neutral" }) : /* @__PURE__ */ jsx(CaretDownIcon, { className: `${prefixCls}-selector-icon`, color: "neutral" });
   const renderOptions = () => {
     var _a2;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       Fade,
       {
         in: isOpen,
         timeout: {
           enter: 167,
           exit: 167
-        }
-      },
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: clsx(
-            `${prefixCls}-option-container`,
-            ...((_a2 = className == null ? void 0 : className.split(/\s+/)) == null ? void 0 : _a2.map((cls) => `${cls}-option-container`)) || [],
-            `${prefixCls}-option-container-${placement}`,
-            {
-              [`${prefixCls}-option-container-hide`]: !isOpen
-            }
-          ),
-          ref: optionContainerRef,
-          style: optionStyle
         },
-        /* @__PURE__ */ React.createElement(
-          Slide,
+        children: /* @__PURE__ */ jsx(
+          "div",
           {
-            in: isOpen,
-            direction: placement === "bottom" ? "down" : "up",
-            timeout: {
-              enter: 167,
-              exit: 167
-            }
-          },
-          /* @__PURE__ */ React.createElement(
-            "div",
-            {
-              className: clsx(`${prefixCls}-option-main`),
-              ref: optionMainRef,
-              role: "listbox",
-              "aria-label": "option list"
-            },
-            children
-          )
+            className: clsx(
+              `${prefixCls}-option-container`,
+              ...((_a2 = className == null ? void 0 : className.split(/\s+/)) == null ? void 0 : _a2.map((cls) => `${cls}-option-container`)) || [],
+              `${prefixCls}-option-container-${placement}`,
+              {
+                [`${prefixCls}-option-container-hide`]: !isOpen
+              }
+            ),
+            ref: optionContainerRef,
+            style: optionStyle,
+            children: /* @__PURE__ */ jsx(
+              Slide,
+              {
+                in: isOpen,
+                direction: placement === "bottom" ? "down" : "up",
+                timeout: {
+                  enter: 167,
+                  exit: 167
+                },
+                children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: clsx(`${prefixCls}-option-main`),
+                    ref: optionMainRef,
+                    role: "listbox",
+                    "aria-label": "option list",
+                    children
+                  }
+                )
+              }
+            )
+          }
         )
-      )
+      }
     );
   };
-  return /* @__PURE__ */ React.createElement(BuiSelectContext.Provider, { value: selectContext }, /* @__PURE__ */ React.createElement(
-    "div",
-    __spreadProps(__spreadValues({
-      className: clsx(prefixCls, className, {
-        [`${prefixCls}-disabled`]: disabled,
-        [`${prefixCls}-active`]: isOpen
-      }),
-      ref: rootRef,
-      role: "combobox",
-      "aria-expanded": isOpen,
-      "aria-haspopup": "listbox",
-      "aria-label": others["aria-label"] || "Select",
-      tabIndex: disabled ? -1 : 0
-    }, others), {
-      onClick: handleSelectClick
-    }),
-    /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-selector-container` }, /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-selector` }, renderValue || placeholder), /* @__PURE__ */ React.createElement(
-      "input",
+  return /* @__PURE__ */ jsxs(BuiSelectContext.Provider, { value: selectContext, children: [
+    /* @__PURE__ */ jsx(
+      "div",
       __spreadProps(__spreadValues({
-        name,
-        readOnly: true,
-        ref: inputRef,
-        value: selectValue,
-        "aria-hidden": "true",
-        tabIndex: -1
-      }, inputProps), {
-        className: clsx(`${prefixCls}-input`, {
-          [inputProps == null ? void 0 : inputProps.className]: inputProps == null ? void 0 : inputProps.className
-        })
+        className: clsx(prefixCls, className, {
+          [`${prefixCls}-disabled`]: disabled,
+          [`${prefixCls}-active`]: isOpen
+        }),
+        ref: rootRef,
+        role: "combobox",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        "aria-label": others["aria-label"] || "Select",
+        tabIndex: disabled ? -1 : 0
+      }, others), {
+        onClick: handleSelectClick,
+        children: /* @__PURE__ */ jsxs("div", { className: `${prefixCls}-selector-container`, children: [
+          /* @__PURE__ */ jsx("div", { className: `${prefixCls}-selector`, children: renderValue || placeholder }),
+          /* @__PURE__ */ jsx(
+            "input",
+            __spreadProps(__spreadValues({
+              name,
+              readOnly: true,
+              ref: inputRef,
+              value: selectValue,
+              "aria-hidden": "true",
+              tabIndex: -1
+            }, inputProps), {
+              className: clsx(`${prefixCls}-input`, {
+                [inputProps == null ? void 0 : inputProps.className]: inputProps == null ? void 0 : inputProps.className
+              })
+            })
+          ),
+          icon || defaultIcon
+        ] })
       })
-    ), icon || defaultIcon)
-  ), /* @__PURE__ */ React.createElement(Portal, { onMounted: updateOptionStyle }, renderOptions()), /* @__PURE__ */ React.createElement(
-    Backdrop,
-    __spreadProps(__spreadValues({
-      open: isOpen,
-      invisible: true,
-      onTouchStart: handleBackdropClick,
-      onClick: handleBackdropClick
-    }, BackdropProps), {
-      className: clsx(`${prefixCls}-backdrop`, {
-        [BackdropProps == null ? void 0 : BackdropProps.className]: BackdropProps == null ? void 0 : BackdropProps.className
+    ),
+    /* @__PURE__ */ jsx(Portal, { onMounted: updateOptionStyle, children: renderOptions() }),
+    /* @__PURE__ */ jsx(
+      Backdrop,
+      __spreadProps(__spreadValues({
+        open: isOpen,
+        invisible: true,
+        onTouchStart: handleBackdropClick,
+        onClick: handleBackdropClick
+      }, BackdropProps), {
+        className: clsx(`${prefixCls}-backdrop`, {
+          [BackdropProps == null ? void 0 : BackdropProps.className]: BackdropProps == null ? void 0 : BackdropProps.className
+        })
       })
-    })
-  ));
+    )
+  ] });
 });
 Select.displayName = "BuiSelect";
 var Select_default = Select;

package/es/Select/SelectOption.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { SelectOptionProps } from './Select.types';
 import './index.less';
-declare const SelectOption: React.ForwardRefExoticComponent<Omit<SelectOptionProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectOption: React.ForwardRefExoticComponent<Omit<SelectOptionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SelectOption;