@dmsi/wedgekit-react 0.0.573 → 0.0.575

package/dist/components/Textarea.js

@@ -13,25 +13,26 @@ import {
 
 // src/components/Textarea.tsx
 import clsx from "clsx";
+import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var textareaBaseClass = clsx(
   "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 = clsx(
-  "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 = clsx(
-  "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 = clsx(
-  "disabled:bg-background-action-secondary-disabled disabled:border-border-primary-normal"
+  "has-disabled:bg-background-action-secondary-disabled"
 );
 var textareaReadOnlyClass = clsx(
-  "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, {
@@ -39,16 +40,33 @@ var Textarea = (_a) => {
     testid,
     label,
     error,
-    caption
+    caption,
+    selectOnFocus
   } = _b, props = __objRest(_b, [
     "id",
     "testid",
     "label",
     "error",
-    "caption"
+    "caption",
+    "selectOnFocus"
   ]);
+  const [focus, setFocus] = useState(false);
+  const textareaRef = useRef(null);
+  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__ */ jsxs(
     "label",
@@ -78,6 +96,7 @@ var Textarea = (_a) => {
           __spreadProps(__spreadValues(__spreadValues({}, props), attributes), {
             id,
             "data-testid": testid,
+            ref: textareaRef,
             className: clsx(
               "disabled:text-text-primary-disabled",
               typography.paragraph,
@@ -86,10 +105,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__ */ jsx("div", { id: id ? `${id}-caption` : void 0, "data-testid": testid ? `${testid}-caption` : void 0, children: caption })
+        caption && /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: id ? `${id}-caption` : void 0,
+            "data-testid": testid ? `${testid}-caption` : void 0,
+            children: caption
+          }
+        )
       ]
     }
   );

package/dist/components/Time.cjs

@@ -741,7 +741,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;
@@ -788,7 +788,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/Time.js

@@ -1,6 +1,6 @@
 import {
   InputBase
-} from "../chunk-NWTVBVBC.js";
+} from "../chunk-7T5RGDCN.js";
 import "../chunk-HXGJVYGQ.js";
 import {
   findDocumentRoot

package/dist/components/index.cjs

@@ -2030,7 +2030,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;
@@ -2077,7 +2077,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/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/index.js

@@ -2,7 +2,7 @@ import {
   DataGrid,
   DateInput,
   MobileDataGrid
-} from "../chunk-3JQPFWKR.js";
+} from "../chunk-LXMIQ7RM.js";
 import "../chunk-CJ7V4X6B.js";
 import "../chunk-M7INAUAJ.js";
 import "../chunk-7ZCXZDJD.js";
@@ -26,7 +26,7 @@ import "../chunk-AT4AWD6B.js";
 import "../chunk-EWGHVZL5.js";
 import {
   Select
-} from "../chunk-I5BV7UPG.js";
+} from "../chunk-UF5XGCSF.js";
 import {
   SimpleTable
 } from "../chunk-63WMDTVQ.js";
@@ -64,7 +64,7 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-DWKS5ZXG.js";
+} from "../chunk-KBHNJ5G7.js";
 import {
   Menu
 } from "../chunk-BU5QGYOC.js";
@@ -74,10 +74,10 @@ import {
 } from "../chunk-GTJADN2C.js";
 import {
   Search
-} from "../chunk-BKBJOF4J.js";
+} from "../chunk-FHXCCVOG.js";
 import {
   Input
-} from "../chunk-NWTVBVBC.js";
+} from "../chunk-7T5RGDCN.js";
 import {
   Label
 } from "../chunk-HXGJVYGQ.js";

package/dist/index.css

@@ -3022,39 +3022,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;
@@ -3303,11 +3270,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);
@@ -3360,11 +3322,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);
@@ -3578,11 +3535,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;
@@ -3613,11 +3565,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);
@@ -3734,6 +3681,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;
@@ -3759,28 +3727,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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.573",
+  "version": "0.0.575",
   "type": "module",
   "scripts": {
     "build": "tsup",