@dmsi/wedgekit-react 0.0.573 → 0.0.575

package/dist/components/MobileDataGrid/MobileDataGridHeader.css

@@ -3044,39 +3044,6 @@
       background-color: var(--color-background-grouped-secondary-normal);
     }
   }
-  .read-only\:resize-none {
-    &:read-only {
-      resize: none;
-    }
-  }
-  .read-only\:appearance-none {
-    &:read-only {
-      appearance: none;
-    }
-  }
-  .read-only\:border-transparent {
-    &:read-only {
-      border-color: transparent;
-    }
-  }
-  .read-only\:bg-transparent {
-    &:read-only {
-      background-color: transparent;
-    }
-  }
-  .read-only\:outline-none {
-    &:read-only {
-      --tw-outline-style: none;
-      outline-style: none;
-    }
-  }
-  .read-only\:not-disabled\:pl-0 {
-    &:read-only {
-      &:not(*:disabled) {
-        padding-left: calc(var(--spacing) * 0);
-      }
-    }
-  }
   .focus-within\:\!z-10 {
     &:focus-within {
       z-index: 10 !important;
@@ -3325,11 +3292,6 @@
       border-color: var(--color-border-action-hover);
     }
   }
-  .focus\:border-transparent {
-    &:focus {
-      border-color: transparent;
-    }
-  }
   .focus\:bg-background-action-critical-primary-hover {
     &:focus {
       background-color: var(--color-background-action-critical-primary-hover);
@@ -3382,11 +3344,6 @@
       outline-offset: calc(2px * -1);
     }
   }
-  .focus\:outline-border-primary-focus {
-    &:focus {
-      outline-color: var(--color-border-primary-focus);
-    }
-  }
   .focus\:outline-neutral-300 {
     &:focus {
       outline-color: var(--color-neutral-300);
@@ -3600,11 +3557,6 @@
       border-color: var(--color-border-action-disabled);
     }
   }
-  .disabled\:border-border-primary-normal {
-    &:disabled {
-      border-color: var(--color-border-primary-normal);
-    }
-  }
   .disabled\:border-transparent {
     &:disabled {
       border-color: transparent;
@@ -3635,11 +3587,6 @@
       background-color: var(--color-background-action-primary-disabled);
     }
   }
-  .disabled\:bg-background-action-secondary-disabled {
-    &:disabled {
-      background-color: var(--color-background-action-secondary-disabled);
-    }
-  }
   .disabled\:bg-neutral-200 {
     &:disabled {
       background-color: var(--color-neutral-200);
@@ -3756,6 +3703,27 @@
       outline-style: none;
     }
   }
+  .has-\[textarea\:not\(\:disabled\)\:read-only\]\:border-transparent {
+    &:has(*:is(textarea:not(:disabled):read-only)) {
+      border-color: transparent;
+    }
+  }
+  .has-\[textarea\:not\(\:disabled\)\:read-only\]\:bg-transparent {
+    &:has(*:is(textarea:not(:disabled):read-only)) {
+      background-color: transparent;
+    }
+  }
+  .has-\[textarea\:not\(\:disabled\)\:read-only\]\:pl-0 {
+    &:has(*:is(textarea:not(:disabled):read-only)) {
+      padding-left: calc(var(--spacing) * 0);
+    }
+  }
+  .has-\[textarea\:not\(\:disabled\)\:read-only\]\:outline-none {
+    &:has(*:is(textarea:not(:disabled):read-only)) {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
   .data-active\:border-transparent {
     &[data-active] {
       border-color: transparent;
@@ -3781,28 +3749,6 @@
       border-color: var(--color-border-primary-normal);
     }
   }
-  .data-error\:not-focus\:outline-1 {
-    &[data-error] {
-      &:not(*:focus) {
-        outline-style: var(--tw-outline-style);
-        outline-width: 1px;
-      }
-    }
-  }
-  .data-error\:not-focus\:outline-border-primary-error {
-    &[data-error] {
-      &:not(*:focus) {
-        outline-color: var(--color-border-primary-error);
-      }
-    }
-  }
-  .data-error\:not-disabled\:border-transparent {
-    &[data-error] {
-      &:not(*:disabled) {
-        border-color: transparent;
-      }
-    }
-  }
   .data-selected\:border-transparent {
     &[data-selected] {
       border-color: transparent;

package/dist/components/MobileDataGrid/MobileDataGridHeader.js

@@ -1,6 +1,6 @@
 import {
   MobileDataGridHeader
-} from "../../chunk-3JQPFWKR.js";
+} from "../../chunk-LXMIQ7RM.js";
 import "../../chunk-CJ7V4X6B.js";
 import "../../chunk-M7INAUAJ.js";
 import "../../chunk-7ZCXZDJD.js";
@@ -18,7 +18,7 @@ import "../../chunk-AJ5M6MVX.js";
 import "../../chunk-M4FM3B3R.js";
 import "../../chunk-AT4AWD6B.js";
 import "../../chunk-EWGHVZL5.js";
-import "../../chunk-I5BV7UPG.js";
+import "../../chunk-UF5XGCSF.js";
 import "../../chunk-63WMDTVQ.js";
 import "../../chunk-L3BXRDLP.js";
 import "../../chunk-34VEVX5H.js";
@@ -35,12 +35,12 @@ import "../../chunk-UAMI54FE.js";
 import "../../chunk-6MGHIYMP.js";
 import "../../chunk-75USUR3I.js";
 import "../../chunk-BWPNXY7T.js";
-import "../../chunk-DWKS5ZXG.js";
+import "../../chunk-KBHNJ5G7.js";
 import "../../chunk-BU5QGYOC.js";
 import "../../chunk-BQAIQNYO.js";
 import "../../chunk-GTJADN2C.js";
-import "../../chunk-BKBJOF4J.js";
-import "../../chunk-NWTVBVBC.js";
+import "../../chunk-FHXCCVOG.js";
+import "../../chunk-7T5RGDCN.js";
 import "../../chunk-HXGJVYGQ.js";
 import "../../chunk-WVUIIBRR.js";
 import "../../chunk-M7WHWZ2J.js";

package/dist/components/MobileDataGrid/index.cjs

@@ -2429,7 +2429,7 @@ var Input = (_a) => {
       }
       return;
     }
-    if ((variant === "percentage" || variant === "uom") && e.target.type === "number") {
+    if (variant === "uom" && e.target.type === "number") {
       const numeric = Number(rawValue);
       if (!isNaN(numeric) && maxNumber != null && numeric > maxNumber) {
         const clamped = maxNumber;
@@ -2476,7 +2476,7 @@ var Input = (_a) => {
         });
         onChange(syntheticEvent);
       }
-    } else if (variant === "uom" || variant === "percentage") {
+    } else if (variant === "uom") {
       const formattedValue = formatDecimalValue(e.target.value, decimals);
       e.target.value = formattedValue;
     }

package/dist/components/MobileDataGrid/index.css

@@ -3044,39 +3044,6 @@
       background-color: var(--color-background-grouped-secondary-normal);
     }
   }
-  .read-only\:resize-none {
-    &:read-only {
-      resize: none;
-    }
-  }
-  .read-only\:appearance-none {
-    &:read-only {
-      appearance: none;
-    }
-  }
-  .read-only\:border-transparent {
-    &:read-only {
-      border-color: transparent;
-    }
-  }
-  .read-only\:bg-transparent {
-    &:read-only {
-      background-color: transparent;
-    }
-  }
-  .read-only\:outline-none {
-    &:read-only {
-      --tw-outline-style: none;
-      outline-style: none;
-    }
-  }
-  .read-only\:not-disabled\:pl-0 {
-    &:read-only {
-      &:not(*:disabled) {
-        padding-left: calc(var(--spacing) * 0);
-      }
-    }
-  }
   .focus-within\:\!z-10 {
     &:focus-within {
       z-index: 10 !important;
@@ -3325,11 +3292,6 @@
       border-color: var(--color-border-action-hover);
     }
   }
-  .focus\:border-transparent {
-    &:focus {
-      border-color: transparent;
-    }
-  }
   .focus\:bg-background-action-critical-primary-hover {
     &:focus {
       background-color: var(--color-background-action-critical-primary-hover);
@@ -3382,11 +3344,6 @@
       outline-offset: calc(2px * -1);
     }
   }
-  .focus\:outline-border-primary-focus {
-    &:focus {
-      outline-color: var(--color-border-primary-focus);
-    }
-  }
   .focus\:outline-neutral-300 {
     &:focus {
       outline-color: var(--color-neutral-300);
@@ -3600,11 +3557,6 @@
       border-color: var(--color-border-action-disabled);
     }
   }
-  .disabled\:border-border-primary-normal {
-    &:disabled {
-      border-color: var(--color-border-primary-normal);
-    }
-  }
   .disabled\:border-transparent {
     &:disabled {
       border-color: transparent;
@@ -3635,11 +3587,6 @@
       background-color: var(--color-background-action-primary-disabled);
     }
   }
-  .disabled\:bg-background-action-secondary-disabled {
-    &:disabled {
-      background-color: var(--color-background-action-secondary-disabled);
-    }
-  }
   .disabled\:bg-neutral-200 {
     &:disabled {
       background-color: var(--color-neutral-200);
@@ -3756,6 +3703,27 @@
       outline-style: none;
     }
   }
+  .has-\[textarea\:not\(\:disabled\)\:read-only\]\:border-transparent {
+    &:has(*:is(textarea:not(:disabled):read-only)) {
+      border-color: transparent;
+    }
+  }
+  .has-\[textarea\:not\(\:disabled\)\:read-only\]\:bg-transparent {
+    &:has(*:is(textarea:not(:disabled):read-only)) {
+      background-color: transparent;
+    }
+  }
+  .has-\[textarea\:not\(\:disabled\)\:read-only\]\:pl-0 {
+    &:has(*:is(textarea:not(:disabled):read-only)) {
+      padding-left: calc(var(--spacing) * 0);
+    }
+  }
+  .has-\[textarea\:not\(\:disabled\)\:read-only\]\:outline-none {
+    &:has(*:is(textarea:not(:disabled):read-only)) {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
   .data-active\:border-transparent {
     &[data-active] {
       border-color: transparent;
@@ -3781,28 +3749,6 @@
       border-color: var(--color-border-primary-normal);
     }
   }
-  .data-error\:not-focus\:outline-1 {
-    &[data-error] {
-      &:not(*:focus) {
-        outline-style: var(--tw-outline-style);
-        outline-width: 1px;
-      }
-    }
-  }
-  .data-error\:not-focus\:outline-border-primary-error {
-    &[data-error] {
-      &:not(*:focus) {
-        outline-color: var(--color-border-primary-error);
-      }
-    }
-  }
-  .data-error\:not-disabled\:border-transparent {
-    &[data-error] {
-      &:not(*:disabled) {
-        border-color: transparent;
-      }
-    }
-  }
   .data-selected\:border-transparent {
     &[data-selected] {
       border-color: transparent;

package/dist/components/MobileDataGrid/index.js

@@ -1,6 +1,6 @@
 import {
   MobileDataGrid
-} from "../../chunk-3JQPFWKR.js";
+} from "../../chunk-LXMIQ7RM.js";
 import "../../chunk-CJ7V4X6B.js";
 import "../../chunk-M7INAUAJ.js";
 import "../../chunk-7ZCXZDJD.js";
@@ -18,7 +18,7 @@ import "../../chunk-AJ5M6MVX.js";
 import "../../chunk-M4FM3B3R.js";
 import "../../chunk-AT4AWD6B.js";
 import "../../chunk-EWGHVZL5.js";
-import "../../chunk-I5BV7UPG.js";
+import "../../chunk-UF5XGCSF.js";
 import "../../chunk-63WMDTVQ.js";
 import "../../chunk-L3BXRDLP.js";
 import "../../chunk-34VEVX5H.js";
@@ -35,12 +35,12 @@ import "../../chunk-UAMI54FE.js";
 import "../../chunk-6MGHIYMP.js";
 import "../../chunk-75USUR3I.js";
 import "../../chunk-BWPNXY7T.js";
-import "../../chunk-DWKS5ZXG.js";
+import "../../chunk-KBHNJ5G7.js";
 import "../../chunk-BU5QGYOC.js";
 import "../../chunk-BQAIQNYO.js";
 import "../../chunk-GTJADN2C.js";
-import "../../chunk-BKBJOF4J.js";
-import "../../chunk-NWTVBVBC.js";
+import "../../chunk-FHXCCVOG.js";
+import "../../chunk-7T5RGDCN.js";
 import "../../chunk-HXGJVYGQ.js";
 import "../../chunk-WVUIIBRR.js";
 import "../../chunk-M7WHWZ2J.js";

package/dist/components/Password.cjs

@@ -742,7 +742,7 @@ var Input = (_a) => {
       }
       return;
     }
-    if ((variant === "percentage" || variant === "uom") && e.target.type === "number") {
+    if (variant === "uom" && e.target.type === "number") {
       const numeric = Number(rawValue);
       if (!isNaN(numeric) && maxNumber != null && numeric > maxNumber) {
         const clamped = maxNumber;
@@ -789,7 +789,7 @@ var Input = (_a) => {
         });
         onChange(syntheticEvent);
       }
-    } else if (variant === "uom" || variant === "percentage") {
+    } else if (variant === "uom") {
       const formattedValue = formatDecimalValue(e.target.value, decimals);
       e.target.value = formattedValue;
     }

package/dist/components/Password.js

@@ -4,7 +4,7 @@ import {
 } from "../chunk-MDB26F6T.js";
 import {
   InputBase
-} from "../chunk-NWTVBVBC.js";
+} from "../chunk-7T5RGDCN.js";
 import "../chunk-HXGJVYGQ.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-WMPWWFUJ.js";

package/dist/components/Search.cjs

@@ -742,7 +742,7 @@ var Input = (_a) => {
       }
       return;
     }
-    if ((variant === "percentage" || variant === "uom") && e.target.type === "number") {
+    if (variant === "uom" && e.target.type === "number") {
       const numeric = Number(rawValue);
       if (!isNaN(numeric) && maxNumber != null && numeric > maxNumber) {
         const clamped = maxNumber;
@@ -789,7 +789,7 @@ var Input = (_a) => {
         });
         onChange(syntheticEvent);
       }
-    } else if (variant === "uom" || variant === "percentage") {
+    } else if (variant === "uom") {
       const formattedValue = formatDecimalValue(e.target.value, decimals);
       e.target.value = formattedValue;
     }

package/dist/components/Search.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   Search
-} from "../chunk-BKBJOF4J.js";
-import "../chunk-NWTVBVBC.js";
+} from "../chunk-FHXCCVOG.js";
+import "../chunk-7T5RGDCN.js";
 import "../chunk-HXGJVYGQ.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-WMPWWFUJ.js";

package/dist/components/Select.cjs

@@ -742,7 +742,7 @@ var Input = (_a) => {
       }
       return;
     }
-    if ((variant === "percentage" || variant === "uom") && e.target.type === "number") {
+    if (variant === "uom" && e.target.type === "number") {
       const numeric = Number(rawValue);
       if (!isNaN(numeric) && maxNumber != null && numeric > maxNumber) {
         const clamped = maxNumber;
@@ -789,7 +789,7 @@ var Input = (_a) => {
         });
         onChange(syntheticEvent);
       }
-    } else if (variant === "uom" || variant === "percentage") {
+    } else if (variant === "uom") {
       const formattedValue = formatDecimalValue(e.target.value, decimals);
       e.target.value = formattedValue;
     }

package/dist/components/Select.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   Select
-} from "../chunk-I5BV7UPG.js";
-import "../chunk-NWTVBVBC.js";
+} from "../chunk-UF5XGCSF.js";
+import "../chunk-7T5RGDCN.js";
 import "../chunk-HXGJVYGQ.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-WMPWWFUJ.js";

package/dist/components/Stepper.cjs

@@ -915,7 +915,7 @@ var Input = (_a) => {
       }
       return;
     }
-    if ((variant === "percentage" || variant === "uom") && e.target.type === "number") {
+    if (variant === "uom" && e.target.type === "number") {
       const numeric = Number(rawValue);
       if (!isNaN(numeric) && maxNumber != null && numeric > maxNumber) {
         const clamped = maxNumber;
@@ -962,7 +962,7 @@ var Input = (_a) => {
         });
         onChange(syntheticEvent);
       }
-    } else if (variant === "uom" || variant === "percentage") {
+    } else if (variant === "uom") {
       const formattedValue = formatDecimalValue(e.target.value, decimals);
       e.target.value = formattedValue;
     }

package/dist/components/Stepper.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   InputBase
-} from "../chunk-NWTVBVBC.js";
+} from "../chunk-7T5RGDCN.js";
 import "../chunk-HXGJVYGQ.js";
 import "../chunk-5UH6QUFB.js";
 import {

package/dist/components/Textarea.cjs

@@ -64,6 +64,7 @@ __export(Textarea_exports, {
 });
 module.exports = __toCommonJS(Textarea_exports);
 var import_clsx2 = __toESM(require("clsx"), 1);
+var import_react = require("react");
 
 // src/classNames.ts
 var import_clsx = __toESM(require("clsx"), 1);
@@ -210,21 +211,21 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var textareaBaseClass = (0, import_clsx2.default)(
   "w-full min-h-19",
   "rounded-base border border-border-primary-normal bg-background-primary-normal caret-text-action-normal",
-  "outline-transparent outline-2",
+  "outline-transparent outline-2 -outline-offset-2",
   componentPaddingMinusBorder,
   baseTransition
 );
 var textareaInvalidClass = (0, import_clsx2.default)(
-  "data-error:not-disabled:border-transparent data-error:not-focus:outline-border-primary-error data-error:not-focus:outline-1"
+  "has-[[data-error]]:border-transparent has-[[data-error]]:not-focus-within:outline-border-primary-error has-[[data-error]]:not-focus-within:outline-1"
 );
 var textareaFocusClass = (0, import_clsx2.default)(
-  "focus:border-transparent focus:outline-border-primary-focus"
+  "has-[[data-focus]]:border-transparent has-[[data-focus]]:outline-border-primary-focus focus-within:border-transparent focus-within:outline-border-primary-focus"
 );
 var textareaDisabledClass = (0, import_clsx2.default)(
-  "disabled:bg-background-action-secondary-disabled disabled:border-border-primary-normal"
+  "has-disabled:bg-background-action-secondary-disabled"
 );
 var textareaReadOnlyClass = (0, import_clsx2.default)(
-  "read-only:outline-none read-only:bg-transparent read-only:border-transparent read-only:appearance-none read-only:resize-none read-only:not-disabled:pl-0"
+  "has-[textarea:not(:disabled):read-only]:outline-none has-[textarea:not(:disabled):read-only]:bg-transparent has-[textarea:not(:disabled):read-only]:border-transparent has-[textarea:not(:disabled):read-only]:pl-0"
 );
 var Textarea = (_a) => {
   var _b = _a, {
@@ -232,16 +233,33 @@ var Textarea = (_a) => {
     testid,
     label,
     error,
-    caption
+    caption,
+    selectOnFocus
   } = _b, props = __objRest(_b, [
     "id",
     "testid",
     "label",
     "error",
-    "caption"
+    "caption",
+    "selectOnFocus"
   ]);
+  const [focus, setFocus] = (0, import_react.useState)(false);
+  const textareaRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const textarea = textareaRef.current;
+    const focusHandler = () => {
+      textarea == null ? void 0 : textarea.select();
+    };
+    if (selectOnFocus) {
+      textarea == null ? void 0 : textarea.addEventListener("focus", focusHandler);
+      return () => {
+        textarea == null ? void 0 : textarea.removeEventListener("focus", focusHandler);
+      };
+    }
+  }, [selectOnFocus]);
   const attributes = {
-    "data-error": error || null
+    "data-error": error && !focus || null,
+    "data-focus": focus || null
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "label",
@@ -271,6 +289,7 @@ var Textarea = (_a) => {
           __spreadProps(__spreadValues(__spreadValues({}, props), attributes), {
             id,
             "data-testid": testid,
+            ref: textareaRef,
             className: (0, import_clsx2.default)(
               "disabled:text-text-primary-disabled",
               typography.paragraph,
@@ -279,10 +298,27 @@ var Textarea = (_a) => {
               textareaFocusClass,
               textareaDisabledClass,
               textareaReadOnlyClass
-            )
+            ),
+            onFocus: (e) => {
+              var _a2;
+              (_a2 = props.onFocus) == null ? void 0 : _a2.call(props, e);
+              setFocus(true);
+            },
+            onBlur: (e) => {
+              var _a2;
+              (_a2 = props.onBlur) == null ? void 0 : _a2.call(props, e);
+              setFocus(false);
+            }
           })
         ),
-        caption && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: id ? `${id}-caption` : void 0, "data-testid": testid ? `${testid}-caption` : void 0, children: caption })
+        caption && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            id: id ? `${id}-caption` : void 0,
+            "data-testid": testid ? `${testid}-caption` : void 0,
+            children: caption
+          }
+        )
       ]
     }
   );