@dmsi/wedgekit-react 0.0.25 → 0.0.27

package/dist/components/MenuOption.cjs

@@ -201,18 +201,21 @@ var Label = (_a) => {
     padded,
     className,
     color,
-    align
+    align,
+    id
   } = _b, props = __objRest(_b, [
     "as",
     "padded",
     "className",
     "color",
-    "align"
+    "align",
+    "id"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       className: (0, import_clsx2.default)(
         typography.label,
         align === "left" && "text-left",
@@ -242,7 +245,8 @@ var Paragraph = (_a) => {
     tall,
     addOverflow,
     children,
-    as = "p"
+    as = "p",
+    id
   } = _b, props = __objRest(_b, [
     "className",
     "color",
@@ -251,12 +255,15 @@ var Paragraph = (_a) => {
     "tall",
     "addOverflow",
     "children",
-    "as"
+    "as",
+    "id"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Element,
-    __spreadProps(__spreadValues({}, props), {
+    __spreadProps(__spreadValues({
+      id
+    }, props), {
       className: (0, import_clsx3.default)(
         typography.paragraph,
         className,
@@ -335,6 +342,7 @@ var useMatchesMobile = () => {
 // src/components/MenuOption.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var MenuOption = ({
+  id,
   children,
   disabled = false,
   variant = "normal",
@@ -406,6 +414,7 @@ var MenuOption = ({
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "div",
       __spreadProps(__spreadValues({
+        id,
         ref: actualRef,
         className: (0, import_clsx5.default)(
           "flex items-center cursor-pointer w-full text-left relative outline-none",
@@ -446,7 +455,15 @@ var MenuOption = ({
         onMouseLeave: handleMouseLeave,
         "data-submenu-parent": menuId.current,
         "data-menu-level": subMenuLevel + 1,
-        children: subMenu({ menuId: menuId.current, positionTo: actualRef, mobilePositionTo, position: "right", subMenuLevel, mobileBackMenuOption, mobileHide: isMobile && activeMenu !== menuId.current })
+        children: subMenu({
+          menuId: menuId.current,
+          positionTo: actualRef,
+          mobilePositionTo,
+          position: "right",
+          subMenuLevel,
+          mobileBackMenuOption,
+          mobileHide: isMobile && activeMenu !== menuId.current
+        })
       }
     )
   ] });
@@ -465,6 +482,7 @@ var MenuOption = ({
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       MenuOption,
       {
+        id: id ? `${id}-back` : void 0,
         onClick: () => {
           closeSubMenuLevel == null ? void 0 : closeSubMenuLevel(currentSubMenuLevel != null ? currentSubMenuLevel : 0);
         },
@@ -480,7 +498,10 @@ function highlightMatch(text, searchValue) {
   if (!searchValue || !searchValue.trim()) {
     return text;
   }
-  const regex = new RegExp(`(${searchValue.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi");
+  const regex = new RegExp(
+    `(${searchValue.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`,
+    "gi"
+  );
   const parts = text.split(regex);
   return parts.map(
     (part, index) => regex.test(part) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "font-bold", children: part }, index) : part

package/dist/components/MenuOption.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   MenuOption
-} from "../chunk-YDREJNAS.js";
+} from "../chunk-PDDZ5PMY.js";
 import "../chunk-SEKKGFM6.js";
-import "../chunk-S7R37IUP.js";
-import "../chunk-UIQ733QP.js";
+import "../chunk-S5K22XTH.js";
+import "../chunk-VG4EPHJA.js";
 import "../chunk-IGQVA7SC.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/MobileDataGrid.cjs

@@ -114,38 +114,70 @@ var useFlexClassNames = ({ items, justify, grow }) => (0, import_clsx2.default)(
   justify === "between" && "justify-between",
   justify === "around" && "justify-around"
 );
-var Stack = ({
-  children,
-  items,
-  justify,
-  grow,
-  padding,
-  paddingX,
-  horizontal,
-  horizontalMobile,
-  elevation = 0,
-  rounded,
-  centered,
-  width,
-  maxWidth,
-  minWidth,
-  height,
-  maxHeight,
-  borderColor,
-  backgroundColor,
-  sizing = "none",
-  overflowY = "inherit",
-  overflowX = "inherit",
-  flexShrink,
-  flexGrow,
-  position,
-  top,
-  left
-}) => {
+var Stack = (_a) => {
+  var _b = _a, {
+    children,
+    items,
+    justify,
+    grow,
+    padding,
+    paddingX,
+    horizontal,
+    horizontalMobile,
+    elevation = 0,
+    rounded,
+    centered,
+    width,
+    maxWidth,
+    minWidth,
+    height,
+    maxHeight,
+    borderColor,
+    backgroundColor,
+    sizing = "none",
+    overflowY = "inherit",
+    overflowX = "inherit",
+    flexShrink,
+    flexGrow,
+    position,
+    top,
+    left,
+    id
+  } = _b, props = __objRest(_b, [
+    "children",
+    "items",
+    "justify",
+    "grow",
+    "padding",
+    "paddingX",
+    "horizontal",
+    "horizontalMobile",
+    "elevation",
+    "rounded",
+    "centered",
+    "width",
+    "maxWidth",
+    "minWidth",
+    "height",
+    "maxHeight",
+    "borderColor",
+    "backgroundColor",
+    "sizing",
+    "overflowY",
+    "overflowX",
+    "flexShrink",
+    "flexGrow",
+    "position",
+    "top",
+    "left",
+    "id"
+  ]);
   const flexClassNames = useFlexClassNames({ items, justify, grow });
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
-    {
+    __spreadProps(__spreadValues({
+      id
+    }, props), {
       style: {
         height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
         maxHeight: maxHeight !== void 0 ? `${maxHeight}px` : void 0,
@@ -193,7 +225,7 @@ var Stack = ({
         rounded && "rounded"
       ),
       children
-    }
+    })
   );
 };
 
@@ -341,7 +373,8 @@ var Button = (_a) => {
     children,
     iconOnly = false,
     colorClassName,
-    href
+    href,
+    id
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -354,7 +387,8 @@ var Button = (_a) => {
     "children",
     "iconOnly",
     "colorClassName",
-    "href"
+    "href",
+    "id"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx4.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -444,6 +478,7 @@ var Button = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       type: Element === "button" ? "button" : void 0,
       className: buttonClasses
     }, props), {
@@ -451,7 +486,7 @@ var Button = (_a) => {
       href,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: labelClasses, children }),
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })
@@ -463,9 +498,10 @@ Button.displayName = "Button";
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function Theme({
   theme,
-  children
+  children,
+  id
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "contents", "data-theme": theme, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { id, className: "contents", "data-theme": theme, children });
 }
 
 // src/components/Heading.tsx
@@ -478,20 +514,23 @@ var Heading = (_a) => {
     as,
     color,
     align,
-    variant = "heading1"
+    variant = "heading1",
+    id
   } = _b, props = __objRest(_b, [
     "className",
     "children",
     "as",
     "color",
     "align",
-    "variant"
+    "variant",
+    "id"
   ]);
   const defaultElement = variant === "heading1" ? "h1" : variant === "heading2" ? "h2" : "h3";
   const Element = as != null ? as : defaultElement;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       className: (0, import_clsx5.default)(
         typography[variant],
         className,
@@ -527,7 +566,8 @@ var Paragraph = (_a) => {
     tall,
     addOverflow,
     children,
-    as = "p"
+    as = "p",
+    id
   } = _b, props = __objRest(_b, [
     "className",
     "color",
@@ -536,12 +576,15 @@ var Paragraph = (_a) => {
     "tall",
     "addOverflow",
     "children",
-    "as"
+    "as",
+    "id"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     Element,
-    __spreadProps(__spreadValues({}, props), {
+    __spreadProps(__spreadValues({
+      id
+    }, props), {
       className: (0, import_clsx6.default)(
         typography.paragraph,
         className,
@@ -569,11 +612,13 @@ function MobileDataGrid({
   header,
   getId,
   renderLink,
-  renderChevron
+  renderChevron,
+  id
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
+      id,
       className: (0, import_clsx7.default)(
         "rounded",
         "overflow-hidden",
@@ -582,10 +627,17 @@ function MobileDataGrid({
         "overflow-y-scroll scrollbar-thin"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MobileDataGridHeader, { header }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          MobileDataGridHeader,
+          {
+            id: id ? `${id}-header` : void 0,
+            header
+          }
+        ),
         data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           MobileDataGridCard,
           {
+            id: id ? `${id}-card-${getId(item)}` : void 0,
             data: item,
             columns,
             renderLink,
@@ -597,8 +649,8 @@ function MobileDataGrid({
     }
   );
 }
-function MobileDataGridHeader({ header }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "sticky top-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Theme, { theme: "brand", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+function MobileDataGridHeader({ header, id }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { id, className: "sticky top-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Theme, { theme: "brand", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     Stack,
     {
       horizontal: true,
@@ -615,9 +667,10 @@ function MobileDataGridCard({
   data,
   columns,
   renderLink,
-  renderChevron
+  renderChevron,
+  id
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { id, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Stack, { sizing: "component", padding: true, children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Stack, { horizontal: true, horizontalMobile: true, items: "center", justify: "between", children: [
         renderLink && renderLink(data),
@@ -625,6 +678,7 @@ function MobileDataGridCard({
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             Button,
             {
+              id: id ? `${id}-docs-button` : void 0,
               iconOnly: true,
               variant: "tertiary",
               onClick: () => console.log("Edit", data.id),
@@ -634,6 +688,7 @@ function MobileDataGridCard({
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             Button,
             {
+              id: id ? `${id}-swap-button` : void 0,
               iconOnly: true,
               variant: "tertiary",
               onClick: () => console.log("Edit", data.id),

package/dist/components/MobileDataGrid.js

@@ -1,18 +1,18 @@
 import {
   Theme
-} from "../chunk-I2UVVKQI.js";
+} from "../chunk-CHTO7PW4.js";
 import {
   Stack
-} from "../chunk-U42SKNR6.js";
+} from "../chunk-57WRM337.js";
 import {
   Heading3
-} from "../chunk-TJ44JJCB.js";
+} from "../chunk-J6LETUNM.js";
 import {
   Button
-} from "../chunk-T6HZARR7.js";
+} from "../chunk-MZJS2ZAU.js";
 import {
   Paragraph
-} from "../chunk-UIQ733QP.js";
+} from "../chunk-VG4EPHJA.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";
@@ -28,11 +28,13 @@ function MobileDataGrid({
   header,
   getId,
   renderLink,
-  renderChevron
+  renderChevron,
+  id
 }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      id,
       className: clsx(
         "rounded",
         "overflow-hidden",
@@ -41,10 +43,17 @@ function MobileDataGrid({
         "overflow-y-scroll scrollbar-thin"
       ),
       children: [
-        /* @__PURE__ */ jsx(MobileDataGridHeader, { header }),
+        /* @__PURE__ */ jsx(
+          MobileDataGridHeader,
+          {
+            id: id ? `${id}-header` : void 0,
+            header
+          }
+        ),
         data.map((item) => /* @__PURE__ */ jsx(
           MobileDataGridCard,
           {
+            id: id ? `${id}-card-${getId(item)}` : void 0,
             data: item,
             columns,
             renderLink,
@@ -56,8 +65,8 @@ function MobileDataGrid({
     }
   );
 }
-function MobileDataGridHeader({ header }) {
-  return /* @__PURE__ */ jsx("div", { className: "sticky top-0", children: /* @__PURE__ */ jsx(Theme, { theme: "brand", children: /* @__PURE__ */ jsx(
+function MobileDataGridHeader({ header, id }) {
+  return /* @__PURE__ */ jsx("div", { id, className: "sticky top-0", children: /* @__PURE__ */ jsx(Theme, { theme: "brand", children: /* @__PURE__ */ jsx(
     Stack,
     {
       horizontal: true,
@@ -74,9 +83,10 @@ function MobileDataGridCard({
   data,
   columns,
   renderLink,
-  renderChevron
+  renderChevron,
+  id
 }) {
-  return /* @__PURE__ */ jsxs("div", { children: [
+  return /* @__PURE__ */ jsxs("div", { id, children: [
     /* @__PURE__ */ jsxs(Stack, { sizing: "component", padding: true, children: [
       /* @__PURE__ */ jsxs(Stack, { horizontal: true, horizontalMobile: true, items: "center", justify: "between", children: [
         renderLink && renderLink(data),
@@ -84,6 +94,7 @@ function MobileDataGridCard({
           /* @__PURE__ */ jsx(
             Button,
             {
+              id: id ? `${id}-docs-button` : void 0,
               iconOnly: true,
               variant: "tertiary",
               onClick: () => console.log("Edit", data.id),
@@ -93,6 +104,7 @@ function MobileDataGridCard({
           /* @__PURE__ */ jsx(
             Button,
             {
+              id: id ? `${id}-swap-button` : void 0,
               iconOnly: true,
               variant: "tertiary",
               onClick: () => console.log("Edit", data.id),