@dmsi/wedgekit-react 0.0.25 → 0.0.27

package/dist/components/Search.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   Search
-} from "../chunk-TWP6YSFO.js";
-import "../chunk-OISE6NMA.js";
-import "../chunk-S7R37IUP.js";
+} from "../chunk-SKHSGGO3.js";
+import "../chunk-QV2EFOYF.js";
+import "../chunk-S5K22XTH.js";
 import "../chunk-IGQVA7SC.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/Select.cjs

@@ -204,18 +204,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",
@@ -302,6 +305,7 @@ function formatCurrencyDisplay(value) {
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var InputBase = (_a) => {
   var _b = _a, {
+    id,
     before,
     after,
     type,
@@ -318,6 +322,7 @@ var InputBase = (_a) => {
     wrapperClassName,
     focus
   } = _b, props = __objRest(_b, [
+    "id",
     "before",
     "after",
     "type",
@@ -339,6 +344,7 @@ var InputBase = (_a) => {
     "data-focus": focus || null
   };
   const inputRef = (0, import_react.useRef)(null);
+  const inputId = `${id}-input`;
   (0, import_react.useEffect)(() => {
     var _a2;
     const input = inputRef.current;
@@ -379,6 +385,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",
@@ -392,6 +400,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"
               ),
@@ -428,7 +437,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",
@@ -446,7 +455,7 @@ var InputBase = (_a) => {
             ]
           }
         ),
-        caption
+        caption && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: id ? `${id}-caption` : void 0, children: caption })
       ]
     }
   );
@@ -460,7 +469,8 @@ var Input = (_a) => {
     value: propValue,
     onChange,
     onBlur,
-    onClear
+    onClear,
+    id
   } = _b, props = __objRest(_b, [
     "variant",
     "decimals",
@@ -469,7 +479,8 @@ var Input = (_a) => {
     "value",
     "onChange",
     "onBlur",
-    "onClear"
+    "onClear",
+    "id"
   ]);
   const [internalValue, setInternalValue] = (0, import_react.useState)("");
   const [displayValue, setDisplayValue] = (0, import_react.useState)("");
@@ -495,7 +506,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) {
@@ -542,6 +555,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"
@@ -674,6 +688,7 @@ var import_clsx5 = __toESM(require("clsx"), 1);
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var Select = (_a) => {
   var _b = _a, {
+    id,
     label,
     error,
     children,
@@ -686,6 +701,7 @@ var Select = (_a) => {
     displayValue,
     value
   } = _b, props = __objRest(_b, [
+    "id",
     "label",
     "error",
     "children",
@@ -714,6 +730,7 @@ var Select = (_a) => {
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       InputBase,
       __spreadProps(__spreadValues({
+        id,
         inputContainerRef,
         ref: inputRef,
         label,
@@ -753,6 +770,7 @@ var Select = (_a) => {
       })
     ),
     renderMenu ? renderMenu({
+      id: `${id}-menu`,
       positionTo: inputContainerRef,
       show,
       setShow,

package/dist/components/Select.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   Select
-} from "../chunk-KDEPZ6I7.js";
-import "../chunk-OISE6NMA.js";
-import "../chunk-S7R37IUP.js";
+} from "../chunk-2S2Z3L56.js";
+import "../chunk-QV2EFOYF.js";
+import "../chunk-S5K22XTH.js";
 import "../chunk-IGQVA7SC.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/SideMenu.cjs

@@ -35,10 +35,15 @@ __export(SideMenu_exports, {
 module.exports = __toCommonJS(SideMenu_exports);
 var import_clsx = __toESM(require("clsx"), 1);
 var import_jsx_runtime = require("react/jsx-runtime");
-var SideMenu = ({ children, cardStyle = false }) => {
+var SideMenu = ({
+  children,
+  cardStyle = false,
+  id
+}) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
+      id,
       className: (0, import_clsx.default)(
         "flex flex-col",
         cardStyle && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding rounded shadow-4 bg-background-primary-normal"

package/dist/components/SideMenu.js

@@ -3,10 +3,15 @@ import "../chunk-ORMEWXMH.js";
 // src/components/SideMenu.tsx
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
-var SideMenu = ({ children, cardStyle = false }) => {
+var SideMenu = ({
+  children,
+  cardStyle = false,
+  id
+}) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
+      id,
       className: clsx(
         "flex flex-col",
         cardStyle && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding rounded shadow-4 bg-background-primary-normal"

package/dist/components/SideMenuGroup.cjs

@@ -203,18 +203,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",
@@ -250,38 +253,70 @@ var useFlexClassNames = ({ items, justify, grow }) => (0, import_clsx3.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,
@@ -329,7 +364,7 @@ var Stack = ({
         rounded && "rounded"
       ),
       children
-    }
+    })
   );
 };
 
@@ -368,6 +403,7 @@ function Icon(_a) {
 // src/components/SideMenuGroup.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var SideMenuGroup = ({
+  id,
   label,
   groupIndentLevel = 1,
   collapsed = false,
@@ -389,6 +425,7 @@ var SideMenuGroup = ({
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "div",
       __spreadProps(__spreadValues({
+        id,
         className: (0, import_clsx5.default)(
           "group/sm-group flex rounded cursor-pointer",
           "bg-transparent",
@@ -399,26 +436,36 @@ var SideMenuGroup = ({
         ),
         onClick: toggleCollapse
       }, additionalAttr), {
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Stack, { horizontal: true, items: "center", sizing: "component", padding: true, children: [
-          groupIndentLevel === 2 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "pl-6" }),
-          groupIndentLevel === 3 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "pl-13" }),
-          groupIndentLevel === 4 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "pl-20" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            Icon,
-            {
-              name: "keyboard_arrow_down",
-              className: (0, import_clsx5.default)(
-                "transition duration-100 ease-in-out",
-                "pointer-events-none",
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          Stack,
+          {
+            id: id ? `${id}-stack` : void 0,
+            horizontal: true,
+            items: "center",
+            sizing: "component",
+            padding: true,
+            children: [
+              groupIndentLevel === 2 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "pl-6" }),
+              groupIndentLevel === 3 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "pl-13" }),
+              groupIndentLevel === 4 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "pl-20" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                Icon,
                 {
-                  "rotate-180": !internalCollapsed
+                  name: "keyboard_arrow_down",
+                  className: (0, import_clsx5.default)(
+                    "transition duration-100 ease-in-out",
+                    "pointer-events-none",
+                    {
+                      "rotate-180": !internalCollapsed
+                    }
+                  ),
+                  size: 24
                 }
               ),
-              size: 24
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Label, { padded: true, children: label })
-        ] })
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Label, { id: id ? `${id}-label` : void 0, padded: true, children: label })
+            ]
+          }
+        )
       })
     ),
     !internalCollapsed && children

package/dist/components/SideMenuGroup.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   Stack
-} from "../chunk-U42SKNR6.js";
+} from "../chunk-57WRM337.js";
 import {
   Label
-} from "../chunk-S7R37IUP.js";
+} from "../chunk-S5K22XTH.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";
@@ -21,6 +21,7 @@ import clsx from "clsx";
 import { useEffect, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var SideMenuGroup = ({
+  id,
   label,
   groupIndentLevel = 1,
   collapsed = false,
@@ -42,6 +43,7 @@ var SideMenuGroup = ({
     /* @__PURE__ */ jsx(
       "div",
       __spreadProps(__spreadValues({
+        id,
         className: clsx(
           "group/sm-group flex rounded cursor-pointer",
           "bg-transparent",
@@ -52,26 +54,36 @@ var SideMenuGroup = ({
         ),
         onClick: toggleCollapse
       }, additionalAttr), {
-        children: /* @__PURE__ */ jsxs(Stack, { horizontal: true, items: "center", sizing: "component", padding: true, children: [
-          groupIndentLevel === 2 && /* @__PURE__ */ jsx("div", { className: "pl-6" }),
-          groupIndentLevel === 3 && /* @__PURE__ */ jsx("div", { className: "pl-13" }),
-          groupIndentLevel === 4 && /* @__PURE__ */ jsx("div", { className: "pl-20" }),
-          /* @__PURE__ */ jsx(
-            Icon,
-            {
-              name: "keyboard_arrow_down",
-              className: clsx(
-                "transition duration-100 ease-in-out",
-                "pointer-events-none",
+        children: /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            id: id ? `${id}-stack` : void 0,
+            horizontal: true,
+            items: "center",
+            sizing: "component",
+            padding: true,
+            children: [
+              groupIndentLevel === 2 && /* @__PURE__ */ jsx("div", { className: "pl-6" }),
+              groupIndentLevel === 3 && /* @__PURE__ */ jsx("div", { className: "pl-13" }),
+              groupIndentLevel === 4 && /* @__PURE__ */ jsx("div", { className: "pl-20" }),
+              /* @__PURE__ */ jsx(
+                Icon,
                 {
-                  "rotate-180": !internalCollapsed
+                  name: "keyboard_arrow_down",
+                  className: clsx(
+                    "transition duration-100 ease-in-out",
+                    "pointer-events-none",
+                    {
+                      "rotate-180": !internalCollapsed
+                    }
+                  ),
+                  size: 24
                 }
               ),
-              size: 24
-            }
-          ),
-          /* @__PURE__ */ jsx(Label, { padded: true, children: label })
-        ] })
+              /* @__PURE__ */ jsx(Label, { id: id ? `${id}-label` : void 0, padded: true, children: label })
+            ]
+          }
+        )
       })
     ),
     !internalCollapsed && children