@dmsi/wedgekit-react 0.0.26 → 0.0.28

package/dist/{chunk-OISE6NMA.js → chunk-QV2EFOYF.js}

@@ -1,6 +1,6 @@
 import {
   Label
-} from "./chunk-S7R37IUP.js";
+} from "./chunk-S5K22XTH.js";
 import {
   Icon
 } from "./chunk-IGQVA7SC.js";
@@ -62,6 +62,7 @@ function formatCurrencyDisplay(value) {
 import { jsx, jsxs } from "react/jsx-runtime";
 var InputBase = (_a) => {
   var _b = _a, {
+    id,
     before,
     after,
     type,
@@ -78,6 +79,7 @@ var InputBase = (_a) => {
     wrapperClassName,
     focus
   } = _b, props = __objRest(_b, [
+    "id",
     "before",
     "after",
     "type",
@@ -99,6 +101,7 @@ var InputBase = (_a) => {
     "data-focus": focus || null
   };
   const inputRef = useRef(null);
+  const inputId = `${id}-input`;
   useEffect(() => {
     var _a2;
     const input = inputRef.current;
@@ -139,6 +142,8 @@ var InputBase = (_a) => {
   return /* @__PURE__ */ jsxs(
     "label",
     {
+      id,
+      htmlFor: inputId,
       ref: inputContainerRef,
       className: clsx(
         "w-full flex flex-col",
@@ -152,6 +157,7 @@ var InputBase = (_a) => {
           /* @__PURE__ */ jsx(
             Label,
             {
+              id: id ? `${id}-label` : void 0,
               className: clsx(
                 props.disabled || props.readOnly ? "cursor-default" : "cursor-pointer"
               ),
@@ -188,7 +194,7 @@ var InputBase = (_a) => {
                   type,
                   required
                 }, props), attributes), {
-                  id: props.id,
+                  id: inputId,
                   className: clsx(
                     "flex-1 outline-none w-full max-w-full min-h-6 min-w-0",
                     "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
@@ -206,7 +212,7 @@ var InputBase = (_a) => {
             ]
           }
         ),
-        caption
+        caption && /* @__PURE__ */ jsx("div", { id: id ? `${id}-caption` : void 0, children: caption })
       ]
     }
   );
@@ -220,7 +226,8 @@ var Input = (_a) => {
     value: propValue,
     onChange,
     onBlur,
-    onClear
+    onClear,
+    id
   } = _b, props = __objRest(_b, [
     "variant",
     "decimals",
@@ -229,7 +236,8 @@ var Input = (_a) => {
     "value",
     "onChange",
     "onBlur",
-    "onClear"
+    "onClear",
+    "id"
   ]);
   const [internalValue, setInternalValue] = useState("");
   const [displayValue, setDisplayValue] = useState("");
@@ -255,7 +263,9 @@ var Input = (_a) => {
   }, [propValue, decimals, variant]);
   const getInputProps = () => {
     var _a2;
-    const baseProps = __spreadProps(__spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals)), {
+    const baseProps = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
+      id
+    }), getDecimalPlaceholder(decimals)), {
       value: propValue
     });
     switch (variant) {
@@ -302,6 +312,7 @@ var Input = (_a) => {
         return hasValue && !props.readOnly ? /* @__PURE__ */ jsx(
           Icon,
           {
+            id: id ? `${id}-clear-button` : void 0,
             name: "close",
             onClick: handleSearchReset,
             className: "cursor-pointer absolute right-2 bottom-2/4 translate-y-2/4"

package/dist/{chunk-YZQNTOIF.js → chunk-QZGUMB7T.js}

@@ -5,10 +5,15 @@ import {
 
 // src/components/Tooltip.tsx
 import clsx from "clsx";
-import { useEffect, useRef, useState } from "react";
+import {
+  useEffect,
+  useRef,
+  useState
+} from "react";
 import { createPortal } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Tooltip = ({
+  id,
   message,
   position = "top",
   children,
@@ -17,7 +22,6 @@ var Tooltip = ({
 }) => {
   const ref = useRef(null);
   const tooltipRef = useRef(null);
-  const [isTruncated, setIsTruncated] = useState(false);
   const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
   const [isVisible, setIsVisible] = useState(false);
   const [removeOpacity, setRemoveOpacity] = useState(false);
@@ -75,6 +79,7 @@ var Tooltip = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      id,
       ref,
       className: "relative inline-grid grid-cols-[auto_1fr] items-center",
       onMouseEnter: handleMouseEnter,
@@ -85,6 +90,7 @@ var Tooltip = ({
           /* @__PURE__ */ jsx(
             "div",
             {
+              id: id ? `${id}-message` : void 0,
               ref: tooltipRef,
               style: {
                 position: "fixed",
@@ -110,9 +116,8 @@ var Tooltip = ({
     if (showOnTruncation && ref.current) {
       const paragraph = ref.current.querySelector("p");
       if (paragraph) {
-        const isTruncated2 = paragraph.scrollWidth > paragraph.clientWidth;
-        setIsTruncated(isTruncated2);
-        return isTruncated2;
+        const isTruncated = paragraph.scrollWidth > paragraph.clientWidth;
+        return isTruncated;
       }
     }
     return false;

package/dist/{chunk-S7R37IUP.js → chunk-S5K22XTH.js}

@@ -17,18 +17,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__ */ jsx(
     Element,
     __spreadProps(__spreadValues({
+      id,
       className: clsx(
         typography.label,
         align === "left" && "text-left",

package/dist/{chunk-GCPJH5R6.js → chunk-S5KPS4IQ.js}

@@ -1,15 +1,15 @@
 import {
   Menu
-} from "./chunk-L4UM372R.js";
+} from "./chunk-VC3R5EUH.js";
 import {
   useSubMenuSystem
 } from "./chunk-Z4UCFUF7.js";
 import {
   MenuOption
-} from "./chunk-YDREJNAS.js";
+} from "./chunk-PDDZ5PMY.js";
 import {
   Search
-} from "./chunk-TWP6YSFO.js";
+} from "./chunk-SKHSGGO3.js";
 import {
   CSS
 } from "./chunk-WVUIIBRR.js";
@@ -39,6 +39,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var DataGridCell = memo(
   (_a) => {
     var _b = _a, {
+      id,
       type = "default",
       component = "static",
       children,
@@ -54,6 +55,7 @@ var DataGridCell = memo(
       center,
       width
     } = _b, props = __objRest(_b, [
+      "id",
       "type",
       "component",
       "children",
@@ -135,6 +137,7 @@ var DataGridCell = memo(
     return /* @__PURE__ */ jsx(
       Element,
       __spreadProps(__spreadValues({
+        id,
         className: clsx("flex", !width && "flex-1"),
         style: { width }
       }, props), {
@@ -162,11 +165,13 @@ function DraggableCellHeader(_a) {
   var _b = _a, {
     header,
     children,
-    locked = false
+    locked = false,
+    id
   } = _b, props = __objRest(_b, [
     "header",
     "children",
-    "locked"
+    "locked",
+    "id"
   ]);
   var _a2;
   const { attributes, isDragging, listeners, setNodeRef, transform, node } = useSortable({
@@ -204,6 +209,7 @@ function DraggableCellHeader(_a) {
   return /* @__PURE__ */ jsxs(
     DataGridCell,
     __spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues({
+      id,
       locked,
       type: "header",
       component: "header",
@@ -219,6 +225,7 @@ function DraggableCellHeader(_a) {
         header.column.getCanFilter() && /* @__PURE__ */ jsx(
           Menu,
           {
+            id: id ? `${id}-menu` : void 0,
             ref: menuRootRef,
             positionTo: node,
             show: showMenu,
@@ -226,12 +233,16 @@ function DraggableCellHeader(_a) {
             mobileHide,
             children: /* @__PURE__ */ jsx(
               MenuOption,
-              __spreadProps(__spreadValues({}, subMenuListeners), {
+              __spreadProps(__spreadValues({
+                id: id ? `${id}-filter-option` : void 0
+              }, subMenuListeners), {
                 subMenu: (_b2) => {
                   var _c = _b2, { menuId, subMenuLevel } = _c, props2 = __objRest(_c, ["menuId", "subMenuLevel"]);
                   return /* @__PURE__ */ jsxs(
                     Menu,
-                    __spreadProps(__spreadValues({}, props2), {
+                    __spreadProps(__spreadValues({
+                      id: id ? `${id}-filter-submenu` : void 0
+                    }, props2), {
                       show: isMenuActive(menuId, subMenuLevel),
                       ref: (el) => {
                         registerSubMenu(menuId, el);
@@ -240,6 +251,7 @@ function DraggableCellHeader(_a) {
                         /* @__PURE__ */ jsx("div", { className: clsx(paddingUsingComponentGap), children: /* @__PURE__ */ jsx(
                           Search,
                           {
+                            id: id ? `${id}-filter-search` : void 0,
                             onChange: (event) => {
                               setFilter(event.target.value);
                             },
@@ -254,6 +266,7 @@ function DraggableCellHeader(_a) {
                         /* @__PURE__ */ jsx(
                           MenuOption,
                           {
+                            id: id ? `${id}-filter-contains` : void 0,
                             onClick: handleFilterFnChange,
                             before: menuOptionIcon("includesString"),
                             children: "Contains"
@@ -262,6 +275,7 @@ function DraggableCellHeader(_a) {
                         /* @__PURE__ */ jsx(
                           MenuOption,
                           {
+                            id: id ? `${id}-filter-startswith` : void 0,
                             onClick: handleFilterFnChange,
                             before: menuOptionIcon("startsWith"),
                             children: "Starts with"
@@ -270,6 +284,7 @@ function DraggableCellHeader(_a) {
                         /* @__PURE__ */ jsx(
                           MenuOption,
                           {
+                            id: id ? `${id}-filter-endswith` : void 0,
                             onClick: handleFilterFnChange,
                             before: menuOptionIcon("endsWith"),
                             children: "Ends with"

package/dist/{chunk-VELXLFMJ.js → chunk-SAMX4YGM.js}

@@ -1,6 +1,6 @@
 import {
   Button
-} from "./chunk-T6HZARR7.js";
+} from "./chunk-MZJS2ZAU.js";
 import {
   Icon
 } from "./chunk-IGQVA7SC.js";
@@ -15,6 +15,7 @@ import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 var NavigationTab = (_a) => {
   var _b = _a, {
+    id,
     label,
     onClick,
     selected = false,
@@ -22,6 +23,7 @@ var NavigationTab = (_a) => {
     disabled = false,
     href
   } = _b, props = __objRest(_b, [
+    "id",
     "label",
     "onClick",
     "selected",
@@ -64,6 +66,7 @@ var NavigationTab = (_a) => {
   return /* @__PURE__ */ jsx(
     Button,
     __spreadProps(__spreadValues({
+      id,
       variant: "tertiary-critical",
       colorClassName: textClassName,
       className: clsx(

package/dist/{chunk-TWP6YSFO.js → chunk-SKHSGGO3.js}

@@ -1,6 +1,6 @@
 import {
   Input
-} from "./chunk-OISE6NMA.js";
+} from "./chunk-QV2EFOYF.js";
 import {
   __objRest,
   __spreadValues
@@ -16,23 +16,23 @@ import {
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var Search = (_a) => {
   var _b = _a, {
+    id,
     label,
     error,
     children,
     readOnly,
     renderMenu,
     onClick,
-    className,
     wrapperClassName,
     removeRoundness
   } = _b, props = __objRest(_b, [
+    "id",
     "label",
     "error",
     "children",
     "readOnly",
     "renderMenu",
     "onClick",
-    "className",
     "wrapperClassName",
     "removeRoundness"
   ]);
@@ -55,6 +55,7 @@ var Search = (_a) => {
     /* @__PURE__ */ jsx(
       Input,
       __spreadValues({
+        id,
         variant: "search",
         inputContainerRef,
         ref: inputRef,
@@ -78,10 +79,14 @@ var Search = (_a) => {
           setShow(true);
           if (["ArrowUp", "ArrowDown"].includes(e.key)) {
             e.preventDefault();
-            const menu = document.querySelector(`[data-menu="${searchMenuName}"]`);
+            const menu = document.querySelector(
+              `[data-menu="${searchMenuName}"]`
+            );
             const selectedMenuOption = menu == null ? void 0 : menu.querySelector("[data-selected]");
             if (selectedMenuOption) {
-              const allMenuOptions = Array.from((menu == null ? void 0 : menu.querySelectorAll('[role="menuitem"]')) || []);
+              const allMenuOptions = Array.from(
+                (menu == null ? void 0 : menu.querySelectorAll('[role="menuitem"]')) || []
+              );
               const currentIndex = allMenuOptions.indexOf(selectedMenuOption);
               let targetOption;
               if (e.key === "ArrowDown") {
@@ -91,7 +96,9 @@ var Search = (_a) => {
               }
               targetOption == null ? void 0 : targetOption.focus();
             } else {
-              const toFocusMenuOption = e.key === "ArrowDown" ? menu == null ? void 0 : menu.querySelector('[role="menuitem"]') : menu == null ? void 0 : menu.querySelector('[role="menuitem"]:last-child');
+              const toFocusMenuOption = e.key === "ArrowDown" ? menu == null ? void 0 : menu.querySelector('[role="menuitem"]') : menu == null ? void 0 : menu.querySelector(
+                '[role="menuitem"]:last-child'
+              );
               toFocusMenuOption == null ? void 0 : toFocusMenuOption.focus();
             }
           }
@@ -103,6 +110,7 @@ var Search = (_a) => {
       }, props)
     ),
     renderMenu ? renderMenu({
+      id: `${id}-menu`,
       positionTo: inputContainerRef,
       show,
       setShow,

package/dist/chunk-TVDFTRGL.js

@@ -0,0 +1,57 @@
+import {
+  Heading2
+} from "./chunk-J6LETUNM.js";
+import {
+  Button
+} from "./chunk-MZJS2ZAU.js";
+import {
+  Icon
+} from "./chunk-IGQVA7SC.js";
+import {
+  layoutGroupGap,
+  layoutPaddding
+} from "./chunk-RDLEIAQU.js";
+
+// src/components/ModalHeader.tsx
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ModalHeader = ({
+  title,
+  hideCloseIcon,
+  headerIcon,
+  onClose,
+  id
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id,
+      className: clsx(
+        "flex justify-between items-center",
+        layoutPaddding,
+        layoutGroupGap
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: clsx("flex items-center", layoutGroupGap), children: [
+          headerIcon,
+          title && /* @__PURE__ */ jsx(Heading2, { id: id ? `${id}-title` : void 0, as: "p", children: title })
+        ] }),
+        !hideCloseIcon && /* @__PURE__ */ jsx(
+          Button,
+          {
+            id: id ? `${id}-close-button` : void 0,
+            iconOnly: true,
+            variant: "tertiary",
+            onClick: onClose,
+            leftIcon: /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 24 }) })
+          }
+        )
+      ]
+    }
+  );
+};
+ModalHeader.displayName = "ModalHeader";
+
+export {
+  ModalHeader
+};

package/dist/{chunk-N32PXOA5.js → chunk-UT7XCBZF.js}

@@ -1,6 +1,6 @@
 import {
   Paragraph
-} from "./chunk-UIQ733QP.js";
+} from "./chunk-VG4EPHJA.js";
 import {
   Icon
 } from "./chunk-IGQVA7SC.js";
@@ -25,7 +25,8 @@ var Checkbox = (_a) => {
     checked,
     onChange,
     indeterminate,
-    paragraphClassName
+    paragraphClassName,
+    id
   } = _b, props = __objRest(_b, [
     "label",
     "error",
@@ -34,7 +35,8 @@ var Checkbox = (_a) => {
     "checked",
     "onChange",
     "indeterminate",
-    "paragraphClassName"
+    "paragraphClassName",
+    "id"
   ]);
   const selected = indeterminate || checked;
   const normalClassName = clsx(
@@ -62,6 +64,8 @@ var Checkbox = (_a) => {
   return /* @__PURE__ */ jsxs(
     "label",
     {
+      id,
+      htmlFor: `${id}-input`,
       className: clsx(
         "flex items-center",
         componentGap,
@@ -73,12 +77,12 @@ var Checkbox = (_a) => {
           /* @__PURE__ */ jsx(
             "input",
             __spreadValues({
+              id: id ? `${id}-input` : void 0,
               type: "checkbox",
               className: "sr-only peer",
               disabled,
               checked: selected,
               onChange: handleOnChange,
-              id: props.id,
               "data-indeterminate": indeterminate
             }, props)
           ),
@@ -104,6 +108,7 @@ var Checkbox = (_a) => {
         label && /* @__PURE__ */ jsx(
           Paragraph,
           {
+            id: id ? `${id}-label` : void 0,
             as: "span",
             padded: true,
             className: clsx(

package/dist/{chunk-L4UM372R.js → chunk-VC3R5EUH.js}

@@ -24,6 +24,7 @@ import { createPortal } from "react-dom";
 import { jsxs } from "react/jsx-runtime";
 var Menu = (_a) => {
   var _b = _a, {
+    id,
     children,
     className,
     ref,
@@ -40,6 +41,7 @@ var Menu = (_a) => {
     autoFocusOff,
     menuName
   } = _b, props = __objRest(_b, [
+    "id",
     "children",
     "className",
     "ref",
@@ -119,6 +121,7 @@ var Menu = (_a) => {
     /* @__PURE__ */ jsxs(
       "div",
       __spreadProps(__spreadValues({
+        id,
         ref: setRefs,
         className: clsx(
           "shadow-4 rounded-base bg-background-grouped-primary-normal overflow-x-hidden overflow-y-auto flex flex-col outline-0",

package/dist/{chunk-UIQ733QP.js → chunk-VG4EPHJA.js}

@@ -20,7 +20,8 @@ var Paragraph = (_a) => {
     tall,
     addOverflow,
     children,
-    as = "p"
+    as = "p",
+    id
   } = _b, props = __objRest(_b, [
     "className",
     "color",
@@ -29,12 +30,15 @@ var Paragraph = (_a) => {
     "tall",
     "addOverflow",
     "children",
-    "as"
+    "as",
+    "id"
   ]);
   const Element = as;
   return /* @__PURE__ */ jsx(
     Element,
-    __spreadProps(__spreadValues({}, props), {
+    __spreadProps(__spreadValues({
+      id
+    }, props), {
       className: clsx(
         typography.paragraph,
         className,

package/dist/components/Breadcrumbs.cjs

@@ -306,25 +306,35 @@ function Icon(_a) {
 
 // src/components/Breadcrumbs.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var Breadcrumb = ({ href, children, onClick }) => {
+var Breadcrumb = ({
+  href,
+  children,
+  onClick,
+  id
+}) => {
   const linkPadding = (0, import_clsx4.default)(
     "!text-text-link-normal  whitespace-nowrap",
     "py-[calc(var(--spacing-mobile-component-padding)_+_3px)]",
     "desktop:py-[calc(var(--spacing-desktop-component-padding)_+_3px)]",
     "compact:py-[calc(var(--spacing-desktop-compact-component-padding)_+_3px)]"
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Link, { className: linkPadding, href, onClick, children }) }, href);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { id, className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Link,
+    {
+      id: id ? `${id}-link` : void 0,
+      className: linkPadding,
+      href,
+      onClick,
+      children
+    }
+  ) }, href);
 };
-var Chevron = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "chevron_right", size: 16 }) });
-var Breadcrumbs = ({
-  asCardStyle,
-  crumbs
-}) => {
+var Chevron = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "flex items-center", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "chevron_right", size: 16 }) });
+var Breadcrumbs = ({ asCardStyle, id, crumbs }) => {
   const scrollableElement = import_react.default.useRef(null);
   const [isOverflow, setIsOverflow] = (0, import_react.useState)(false);
   (0, import_react.useLayoutEffect)(() => {
     var _a, _b, _c;
-    console.log(scrollableElement.current);
     (_c = scrollableElement.current) == null ? void 0 : _c.scrollTo({
       left: (_b = (_a = scrollableElement.current) == null ? void 0 : _a.scrollWidth) != null ? _b : 0,
       behavior: "instant"
@@ -340,6 +350,7 @@ var Breadcrumbs = ({
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "nav",
     {
+      id,
       className: (0, import_clsx4.default)(
         "relative select-none flex items-center  max-w-full w-full",
         {
@@ -361,6 +372,7 @@ var Breadcrumbs = ({
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "ol",
           {
+            id: id ? `${id}-list` : void 0,
             className: "flex items-center overflow-x-scroll",
             style: { scrollbarWidth: "none" },
             onScroll: updateOverflow,
@@ -371,7 +383,15 @@ var Breadcrumbs = ({
               const { href, children, onClick } = crumb;
               return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react.default.Fragment, { children: [
                 index > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Chevron, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Breadcrumb, { href, onClick, children })
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  Breadcrumb,
+                  {
+                    href,
+                    onClick,
+                    id: id ? `${id}-crumb-${index}` : void 0,
+                    children
+                  }
+                )
               ] }, index);
             })
           }