@dmsi/wedgekit-react 0.0.26 → 0.0.28

package/dist/components/DataGridCell.cjs

@@ -293,18 +293,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",
@@ -359,6 +362,7 @@ function formatCurrencyDisplay(value) {
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var InputBase = (_a) => {
   var _b = _a, {
+    id,
     before,
     after,
     type,
@@ -375,6 +379,7 @@ var InputBase = (_a) => {
     wrapperClassName,
     focus
   } = _b, props = __objRest(_b, [
+    "id",
     "before",
     "after",
     "type",
@@ -396,6 +401,7 @@ var InputBase = (_a) => {
     "data-focus": focus || null
   };
   const inputRef = (0, import_react2.useRef)(null);
+  const inputId = `${id}-input`;
   (0, import_react2.useEffect)(() => {
     var _a2;
     const input = inputRef.current;
@@ -436,6 +442,8 @@ var InputBase = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "label",
     {
+      id,
+      htmlFor: inputId,
       ref: inputContainerRef,
       className: (0, import_clsx4.default)(
         "w-full flex flex-col",
@@ -449,6 +457,7 @@ var InputBase = (_a) => {
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             Label,
             {
+              id: id ? `${id}-label` : void 0,
               className: (0, import_clsx4.default)(
                 props.disabled || props.readOnly ? "cursor-default" : "cursor-pointer"
               ),
@@ -485,7 +494,7 @@ var InputBase = (_a) => {
                   type,
                   required
                 }, props), attributes), {
-                  id: props.id,
+                  id: inputId,
                   className: (0, import_clsx4.default)(
                     "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",
@@ -503,7 +512,7 @@ var InputBase = (_a) => {
             ]
           }
         ),
-        caption
+        caption && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: id ? `${id}-caption` : void 0, children: caption })
       ]
     }
   );
@@ -517,7 +526,8 @@ var Input = (_a) => {
     value: propValue,
     onChange,
     onBlur,
-    onClear
+    onClear,
+    id
   } = _b, props = __objRest(_b, [
     "variant",
     "decimals",
@@ -526,7 +536,8 @@ var Input = (_a) => {
     "value",
     "onChange",
     "onBlur",
-    "onClear"
+    "onClear",
+    "id"
   ]);
   const [internalValue, setInternalValue] = (0, import_react2.useState)("");
   const [displayValue, setDisplayValue] = (0, import_react2.useState)("");
@@ -552,7 +563,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) {
@@ -599,6 +612,7 @@ var Input = (_a) => {
         return hasValue && !props.readOnly ? /* @__PURE__ */ (0, import_jsx_runtime3.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"
@@ -730,23 +744,23 @@ Percentage.displayName = "Percentage";
 var import_jsx_runtime4 = require("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"
   ]);
@@ -769,6 +783,7 @@ var Search = (_a) => {
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       Input,
       __spreadValues({
+        id,
         variant: "search",
         inputContainerRef,
         ref: inputRef,
@@ -792,10 +807,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") {
@@ -805,7 +824,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();
             }
           }
@@ -817,6 +838,7 @@ var Search = (_a) => {
       }, props)
     ),
     renderMenu ? renderMenu({
+      id: `${id}-menu`,
       positionTo: inputContainerRef,
       show,
       setShow,
@@ -1174,6 +1196,7 @@ function findDocumentRoot(element) {
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var Menu = (_a) => {
   var _b = _a, {
+    id,
     children,
     className,
     ref,
@@ -1190,6 +1213,7 @@ var Menu = (_a) => {
     autoFocusOff,
     menuName
   } = _b, props = __objRest(_b, [
+    "id",
     "children",
     "className",
     "ref",
@@ -1269,6 +1293,7 @@ var Menu = (_a) => {
     /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "div",
       __spreadProps(__spreadValues({
+        id,
         ref: setRefs,
         className: (0, import_clsx5.default)(
           "shadow-4 rounded-base bg-background-grouped-primary-normal overflow-x-hidden overflow-y-auto flex flex-col outline-0",
@@ -1414,7 +1439,8 @@ var Paragraph = (_a) => {
     tall,
     addOverflow,
     children,
-    as = "p"
+    as = "p",
+    id
   } = _b, props = __objRest(_b, [
     "className",
     "color",
@@ -1423,12 +1449,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,
@@ -1451,6 +1480,7 @@ Paragraph.displayName = "Paragraph";
 // src/components/MenuOption.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var MenuOption = ({
+  id,
   children,
   disabled = false,
   variant = "normal",
@@ -1522,6 +1552,7 @@ var MenuOption = ({
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
       __spreadProps(__spreadValues({
+        id,
         ref: actualRef,
         className: (0, import_clsx7.default)(
           "flex items-center cursor-pointer w-full text-left relative outline-none",
@@ -1562,7 +1593,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
+        })
       }
     )
   ] });
@@ -1581,6 +1620,7 @@ var MenuOption = ({
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       MenuOption,
       {
+        id: id ? `${id}-back` : void 0,
         onClick: () => {
           closeSubMenuLevel == null ? void 0 : closeSubMenuLevel(currentSubMenuLevel != null ? currentSubMenuLevel : 0);
         },
@@ -1596,7 +1636,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_runtime7.jsx)("span", { className: "font-bold", children: part }, index) : part
@@ -1608,6 +1651,7 @@ var import_jsx_runtime8 = require("react/jsx-runtime");
 var DataGridCell = (0, import_react8.memo)(
   (_a) => {
     var _b = _a, {
+      id,
       type = "default",
       component = "static",
       children,
@@ -1623,6 +1667,7 @@ var DataGridCell = (0, import_react8.memo)(
       center,
       width
     } = _b, props = __objRest(_b, [
+      "id",
       "type",
       "component",
       "children",
@@ -1704,6 +1749,7 @@ var DataGridCell = (0, import_react8.memo)(
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       Element,
       __spreadProps(__spreadValues({
+        id,
         className: (0, import_clsx8.default)("flex", !width && "flex-1"),
         style: { width }
       }, props), {
@@ -1731,11 +1777,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 } = (0, import_sortable.useSortable)({
@@ -1773,6 +1821,7 @@ function DraggableCellHeader(_a) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     DataGridCell,
     __spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues({
+      id,
       locked,
       type: "header",
       component: "header",
@@ -1788,6 +1837,7 @@ function DraggableCellHeader(_a) {
         header.column.getCanFilter() && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           Menu,
           {
+            id: id ? `${id}-menu` : void 0,
             ref: menuRootRef,
             positionTo: node,
             show: showMenu,
@@ -1795,12 +1845,16 @@ function DraggableCellHeader(_a) {
             mobileHide,
             children: /* @__PURE__ */ (0, import_jsx_runtime8.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__ */ (0, import_jsx_runtime8.jsxs)(
                     Menu,
-                    __spreadProps(__spreadValues({}, props2), {
+                    __spreadProps(__spreadValues({
+                      id: id ? `${id}-filter-submenu` : void 0
+                    }, props2), {
                       show: isMenuActive(menuId, subMenuLevel),
                       ref: (el) => {
                         registerSubMenu(menuId, el);
@@ -1809,6 +1863,7 @@ function DraggableCellHeader(_a) {
                         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: (0, import_clsx8.default)(paddingUsingComponentGap), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                           Search,
                           {
+                            id: id ? `${id}-filter-search` : void 0,
                             onChange: (event) => {
                               setFilter(event.target.value);
                             },
@@ -1823,6 +1878,7 @@ function DraggableCellHeader(_a) {
                         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                           MenuOption,
                           {
+                            id: id ? `${id}-filter-contains` : void 0,
                             onClick: handleFilterFnChange,
                             before: menuOptionIcon("includesString"),
                             children: "Contains"
@@ -1831,6 +1887,7 @@ function DraggableCellHeader(_a) {
                         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                           MenuOption,
                           {
+                            id: id ? `${id}-filter-startswith` : void 0,
                             onClick: handleFilterFnChange,
                             before: menuOptionIcon("startsWith"),
                             children: "Starts with"
@@ -1839,6 +1896,7 @@ function DraggableCellHeader(_a) {
                         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                           MenuOption,
                           {
+                            id: id ? `${id}-filter-endswith` : void 0,
                             onClick: handleFilterFnChange,
                             before: menuOptionIcon("endsWith"),
                             children: "Ends with"

package/dist/components/DataGridCell.js

@@ -3,17 +3,17 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-GCPJH5R6.js";
-import "../chunk-L4UM372R.js";
+} from "../chunk-S5KPS4IQ.js";
+import "../chunk-VC3R5EUH.js";
 import "../chunk-Z4UCFUF7.js";
-import "../chunk-YDREJNAS.js";
+import "../chunk-PDDZ5PMY.js";
 import "../chunk-SEKKGFM6.js";
-import "../chunk-TWP6YSFO.js";
+import "../chunk-SKHSGGO3.js";
 import "../chunk-WVUIIBRR.js";
 import "../chunk-4T7F5BZZ.js";
-import "../chunk-OISE6NMA.js";
-import "../chunk-S7R37IUP.js";
-import "../chunk-UIQ733QP.js";
+import "../chunk-QV2EFOYF.js";
+import "../chunk-S5K22XTH.js";
+import "../chunk-VG4EPHJA.js";
 import "../chunk-IGQVA7SC.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";