@dmsi/wedgekit-react 0.0.26 → 0.0.27

package/dist/components/NavigationTab.cjs

@@ -208,7 +208,8 @@ var Button = (_a) => {
     children,
     iconOnly = false,
     colorClassName,
-    href
+    href,
+    id
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -221,7 +222,8 @@ var Button = (_a) => {
     "children",
     "iconOnly",
     "colorClassName",
-    "href"
+    "href",
+    "id"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx2.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -311,6 +313,7 @@ var Button = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       type: Element === "button" ? "button" : void 0,
       className: buttonClasses
     }, props), {
@@ -318,7 +321,7 @@ var Button = (_a) => {
       href,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: labelClasses, children }),
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })
@@ -362,6 +365,7 @@ function Icon(_a) {
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var NavigationTab = (_a) => {
   var _b = _a, {
+    id,
     label,
     onClick,
     selected = false,
@@ -369,6 +373,7 @@ var NavigationTab = (_a) => {
     disabled = false,
     href
   } = _b, props = __objRest(_b, [
+    "id",
     "label",
     "onClick",
     "selected",
@@ -411,6 +416,7 @@ var NavigationTab = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Button,
     __spreadProps(__spreadValues({
+      id,
       variant: "tertiary-critical",
       colorClassName: textClassName,
       className: (0, import_clsx4.default)(

package/dist/components/NavigationTab.js

@@ -1,7 +1,7 @@
 import {
   NavigationTab
-} from "../chunk-VELXLFMJ.js";
-import "../chunk-T6HZARR7.js";
+} from "../chunk-SAMX4YGM.js";
+import "../chunk-MZJS2ZAU.js";
 import "../chunk-IGQVA7SC.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/NavigationTabs.cjs

@@ -213,7 +213,8 @@ var Button = (_a) => {
     children,
     iconOnly = false,
     colorClassName,
-    href
+    href,
+    id
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -226,7 +227,8 @@ var Button = (_a) => {
     "children",
     "iconOnly",
     "colorClassName",
-    "href"
+    "href",
+    "id"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx2.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -316,6 +318,7 @@ var Button = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       type: Element === "button" ? "button" : void 0,
       className: buttonClasses
     }, props), {
@@ -323,7 +326,7 @@ var Button = (_a) => {
       href,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: labelClasses, children }),
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })
@@ -367,6 +370,7 @@ function Icon(_a) {
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var NavigationTab = (_a) => {
   var _b = _a, {
+    id,
     label,
     onClick,
     selected = false,
@@ -374,6 +378,7 @@ var NavigationTab = (_a) => {
     disabled = false,
     href
   } = _b, props = __objRest(_b, [
+    "id",
     "label",
     "onClick",
     "selected",
@@ -416,6 +421,7 @@ var NavigationTab = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Button,
     __spreadProps(__spreadValues({
+      id,
       variant: "tertiary-critical",
       colorClassName: textClassName,
       className: (0, import_clsx4.default)(
@@ -443,19 +449,20 @@ NavigationTab.displayName = "NavigationTab";
 // src/components/NavigationTabs.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var NavigationTabs = ({
+  id,
   tabs,
   onTabChange,
   colorPrimitives = "dmsi"
 }) => {
   var _a, _b, _c;
   const [selectedTab, setSelectedTab] = (0, import_react.useState)((_a = tabs[0]) == null ? void 0 : _a.id);
-  const handleTabClick = (id) => {
-    setSelectedTab(id);
-    onTabChange == null ? void 0 : onTabChange(id);
+  const handleTabClick = (id2) => {
+    setSelectedTab(id2);
+    onTabChange == null ? void 0 : onTabChange(id2);
   };
   const selectedContent = (_b = tabs.find((tab) => tab.id === selectedTab)) == null ? void 0 : _b.content;
   const selectedTabHasHref = (_c = tabs.find((tab) => tab.id === selectedTab)) == null ? void 0 : _c.href;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { id, children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "div",
       {
@@ -466,6 +473,7 @@ var NavigationTabs = ({
         children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           NavigationTab,
           {
+            id: id ? `${id}-tab-${tab.id}` : void 0,
             label: tab.label,
             selected: selectedTab === tab.id,
             onClick: () => handleTabClick(tab.id),

package/dist/components/NavigationTabs.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   NavigationTab
-} from "../chunk-VELXLFMJ.js";
-import "../chunk-T6HZARR7.js";
+} from "../chunk-SAMX4YGM.js";
+import "../chunk-MZJS2ZAU.js";
 import "../chunk-IGQVA7SC.js";
 import {
   componentGap
@@ -14,19 +14,20 @@ import clsx from "clsx";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var NavigationTabs = ({
+  id,
   tabs,
   onTabChange,
   colorPrimitives = "dmsi"
 }) => {
   var _a, _b, _c;
   const [selectedTab, setSelectedTab] = useState((_a = tabs[0]) == null ? void 0 : _a.id);
-  const handleTabClick = (id) => {
-    setSelectedTab(id);
-    onTabChange == null ? void 0 : onTabChange(id);
+  const handleTabClick = (id2) => {
+    setSelectedTab(id2);
+    onTabChange == null ? void 0 : onTabChange(id2);
   };
   const selectedContent = (_b = tabs.find((tab) => tab.id === selectedTab)) == null ? void 0 : _b.content;
   const selectedTabHasHref = (_c = tabs.find((tab) => tab.id === selectedTab)) == null ? void 0 : _c.href;
-  return /* @__PURE__ */ jsxs("div", { children: [
+  return /* @__PURE__ */ jsxs("div", { id, children: [
     /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
       "div",
       {
@@ -37,6 +38,7 @@ var NavigationTabs = ({
         children: tabs.map((tab) => /* @__PURE__ */ jsx(
           NavigationTab,
           {
+            id: id ? `${id}-tab-${tab.id}` : void 0,
             label: tab.label,
             selected: selectedTab === tab.id,
             onClick: () => handleTabClick(tab.id),

package/dist/components/NestedMenu.cjs

@@ -236,18 +236,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_runtime2.jsx)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       className: (0, import_clsx3.default)(
         typography.label,
         align === "left" && "text-left",
@@ -277,7 +280,8 @@ var Paragraph = (_a) => {
     tall,
     addOverflow,
     children,
-    as = "p"
+    as = "p",
+    id
   } = _b, props = __objRest(_b, [
     "className",
     "color",
@@ -286,12 +290,15 @@ var Paragraph = (_a) => {
     "tall",
     "addOverflow",
     "children",
-    "as"
+    "as",
+    "id"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Element,
-    __spreadProps(__spreadValues({}, props), {
+    __spreadProps(__spreadValues({
+      id
+    }, props), {
       className: (0, import_clsx4.default)(
         typography.paragraph,
         className,
@@ -338,6 +345,7 @@ var useMatchesMobile = () => {
 // src/components/MenuOption.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var MenuOption = ({
+  id,
   children,
   disabled = false,
   variant = "normal",
@@ -409,6 +417,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",
@@ -449,7 +458,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
+        })
       }
     )
   ] });
@@ -468,6 +485,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);
         },
@@ -483,7 +501,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/NestedMenu.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 {
   Icon
 } from "../chunk-IGQVA7SC.js";

package/dist/components/Notification.cjs

@@ -210,7 +210,8 @@ var Button = (_a) => {
     children,
     iconOnly = false,
     colorClassName,
-    href
+    href,
+    id
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -223,7 +224,8 @@ var Button = (_a) => {
     "children",
     "iconOnly",
     "colorClassName",
-    "href"
+    "href",
+    "id"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx2.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -313,6 +315,7 @@ var Button = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       type: Element === "button" ? "button" : void 0,
       className: buttonClasses
     }, props), {
@@ -320,7 +323,7 @@ var Button = (_a) => {
       href,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: labelClasses, children }),
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })
@@ -340,7 +343,8 @@ var Paragraph = (_a) => {
     tall,
     addOverflow,
     children,
-    as = "p"
+    as = "p",
+    id
   } = _b, props = __objRest(_b, [
     "className",
     "color",
@@ -349,12 +353,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,
@@ -384,20 +391,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_runtime3.jsx)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       className: (0, import_clsx4.default)(
         typography[variant],
         className,
@@ -471,38 +481,70 @@ var useFlexClassNames = ({ items, justify, grow }) => (0, import_clsx6.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_runtime5.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,
@@ -550,7 +592,7 @@ var Stack = ({
         rounded && "rounded"
       ),
       children
-    }
+    })
   );
 };
 
@@ -576,6 +618,7 @@ var variants = {
 };
 var Notification = (_a) => {
   var _b = _a, {
+    id,
     variant = "success",
     title,
     message,
@@ -586,6 +629,7 @@ var Notification = (_a) => {
     enableDisclaimer = false,
     card = false
   } = _b, props = __objRest(_b, [
+    "id",
     "variant",
     "title",
     "message",
@@ -603,6 +647,7 @@ var Notification = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     __spreadProps(__spreadValues({
+      id,
       className: (0, import_clsx7.default)(
         "flex gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap justify-between items-center border-2 rounded-sm w-full p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding bg-white max-w-240",
         className,
@@ -632,6 +677,7 @@ var Notification = (_a) => {
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           Button,
           {
+            id: id ? `${id}-close-button` : void 0,
             iconOnly: true,
             variant: "tertiary",
             onClick: () => setVisible(false),

package/dist/components/Notification.js

@@ -1,16 +1,16 @@
 "use client";
 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";
@@ -45,6 +45,7 @@ var variants = {
 };
 var Notification = (_a) => {
   var _b = _a, {
+    id,
     variant = "success",
     title,
     message,
@@ -55,6 +56,7 @@ var Notification = (_a) => {
     enableDisclaimer = false,
     card = false
   } = _b, props = __objRest(_b, [
+    "id",
     "variant",
     "title",
     "message",
@@ -72,6 +74,7 @@ var Notification = (_a) => {
   return /* @__PURE__ */ jsxs(
     "div",
     __spreadProps(__spreadValues({
+      id,
       className: clsx(
         "flex gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap justify-between items-center border-2 rounded-sm w-full p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding bg-white max-w-240",
         className,
@@ -101,6 +104,7 @@ var Notification = (_a) => {
         /* @__PURE__ */ jsx(
           Button,
           {
+            id: id ? `${id}-close-button` : void 0,
             iconOnly: true,
             variant: "tertiary",
             onClick: () => setVisible(false),