@obosbbl/grunnmuren-react 2.0.0-canary.27 → 2.0.0-canary.29

package/dist/index.mjs

@@ -286,7 +286,7 @@ const formField = cx('group flex flex-col gap-2');
 const formFieldError = cx('w-fit rounded-sm bg-red-light px-2 py-1 text-sm leading-6 text-red');
 const input = cva({
     base: [
-        'rounded-md py-2.5 text-sm font-normal leading-6 placeholder-[#727070] outline-none ring-1 ring-black',
+        'rounded-md py-2.5 text-base font-normal leading-6 placeholder-[#727070] outline-none ring-1 ring-black',
         // invalid styles
         'group-data-[invalid]:ring-2 group-data-[invalid]:ring-red',
         // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
@@ -299,7 +299,7 @@ const input = cva({
             visible: 'data-[focus-visible]:ring-2 group-data-[invalid]:data-[focus-visible]:ring'
         },
         isGrouped: {
-            false: 'px-3',
+            false: 'bg-white px-3',
             true: 'flex-1 !ring-0'
         }
     },
@@ -309,14 +309,12 @@ const input = cva({
     }
 });
 const inputGroup = cx([
-    'inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-sm ring-1 ring-black focus-within:ring-2',
-    'group-data-[invalid]:ring-2 group-data-[invalid]:ring-red group-data-[invalid]:focus-within:ring',
-    // Make sure icons are the correct size
-    '[&_svg]:text-base'
+    'inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black focus-within:ring-2',
+    'group-data-[invalid]:ring-2 group-data-[invalid]:ring-red group-data-[invalid]:focus-within:ring'
 ]);
 const dropdown = {
-    popover: cx('min-w-[--trigger-width] overflow-auto rounded-md border border-black bg-white shadow data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in data-[exiting]:fade-out'),
-    listbox: cx('text-sm outline-none'),
+    popover: cx('min-w-[--trigger-width] rounded-md bg-white shadow data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in data-[exiting]:fade-out'),
+    listbox: cx('max-h-[25rem] overflow-y-scroll rounded-md border border-black text-sm outline-none'),
     chevronIcon: cx('text-base transition-transform duration-150 group-data-[open]:rotate-180 motion-reduce:transition-none')
 };
 
@@ -330,16 +328,6 @@ function ErrorMessage(props) {
     });
 }
 
-const descriptionClasses = 'text-sm font-light leading-6';
-function Description(props) {
-    const { className, ...restProps } = props;
-    return /*#__PURE__*/ jsx(Text, {
-        ...restProps,
-        className: cx(className, descriptionClasses),
-        slot: "description"
-    });
-}
-
 const defaultClasses$1 = cx([
     'group relative left-0 inline-flex max-w-fit cursor-pointer items-start gap-4 py-2 leading-7'
 ]);
@@ -374,7 +362,7 @@ function Checkbox(props, ref) {
     const id = useId();
     const descriptionId = 'desc' + id;
     const errorMessageId = 'error' + id;
-    const isInvalid = _isInvalid || errorMessage != null;
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsx("div", {
         children: /*#__PURE__*/ jsxs(CheckboxContext.Provider, {
             value: {
@@ -399,7 +387,7 @@ function Checkbox(props, ref) {
                 /*#__PURE__*/ jsx("div", {
                     id: descriptionId,
                     slot: "description",
-                    className: cx('block', descriptionClasses),
+                    className: "description block",
                     children: description
                 }),
                 errorMessage && /*#__PURE__*/ jsx(ErrorMessage, {
@@ -422,6 +410,15 @@ function Label(props) {
     });
 }
 
+function Description(props) {
+    const { className, ...restProps } = props;
+    return /*#__PURE__*/ jsx(Text, {
+        ...restProps,
+        className: cx(className, 'description'),
+        slot: "description"
+    });
+}
+
 /**
  * This component handles renders a custom error message (if provided), otherwise it falls back to the browser's native validation.
  * In other words, this handles controlled and uncontrolled form errors.
@@ -435,7 +432,9 @@ function Label(props) {
 
 function CheckboxGroup(props, ref) {
     const { children, className, description, errorMessage, label, isRequired, isInvalid: _isInvalid, ...restProps } = props;
-    const isInvalid = _isInvalid || errorMessage != null;
+    // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
+    // which will override any built in validation
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsxs(CheckboxGroup$1, {
         ...restProps,
         className: cx(className, 'flex flex-col gap-2'),
@@ -493,7 +492,9 @@ function InputAddonDivider() {
 
 function Combobox(props, ref) {
     const { className, children, description, errorMessage, isLoading, label, isInvalid: _isInvalid, ...restProps } = props;
-    const isInvalid = _isInvalid || errorMessage != null;
+    // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
+    // which will override any built in validation
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsxs(ComboBox, {
         ...restProps,
         className: cx(className, formField),
@@ -534,6 +535,7 @@ function Combobox(props, ref) {
                 className: cx(dropdown.popover, 'min-w-[calc(var(--trigger-width)+26px)]'),
                 crossOffset: -13,
                 children: /*#__PURE__*/ jsx(ListBox, {
+                    className: dropdown.listbox,
                     children: children
                 })
             })
@@ -544,7 +546,9 @@ const _Combobox = /*#__PURE__*/ forwardRef(Combobox);
 
 function RadioGroup(props, ref) {
     const { children, className, description, errorMessage, label, isRequired, isInvalid: _isInvalid, ...restProps } = props;
-    const isInvalid = _isInvalid || errorMessage != null;
+    // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
+    // which will override any built in validation
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsxs(RadioGroup$1, {
         ...restProps,
         className: cx(className, 'flex flex-col gap-2'),
@@ -612,7 +616,9 @@ const _Radio = /*#__PURE__*/ forwardRef(Radio);
 
 function Select(props, ref) {
     const { className, children, description, errorMessage, label, isInvalid: _isInvalid, ...restProps } = props;
-    const isInvalid = _isInvalid || errorMessage != null;
+    // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
+    // which will override any built in validation
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsxs(Select$1, {
         ...restProps,
         className: cx(className, formField),
@@ -646,6 +652,7 @@ function Select(props, ref) {
             /*#__PURE__*/ jsx(Popover, {
                 className: dropdown.popover,
                 children: /*#__PURE__*/ jsx(ListBox, {
+                    className: dropdown.listbox,
                     children: children
                 })
             })
@@ -656,7 +663,7 @@ const _Select = /*#__PURE__*/ forwardRef(Select);
 
 function TextArea(props, ref) {
     const { className, description, errorMessage, label, isInvalid: _isInvalid, rows, ...restProps } = props;
-    const isInvalid = _isInvalid || errorMessage != null;
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsxs(TextField$1, {
         ...restProps,
         className: cx(className, formField),
@@ -696,7 +703,9 @@ const inputVariants$1 = compose(input, cva({
 }));
 function TextField(props, ref) {
     const { className, description, errorMessage, label, leftAddon, isInvalid: _isInvalid, textAlign, rightAddon, withAddonDivider, size, ...restProps } = props;
-    const isInvalid = _isInvalid || errorMessage != null;
+    // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
+    // which will override any built in validation
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsxs(TextField$1, {
         ...restProps,
         className: cx(className, formField),
@@ -759,7 +768,9 @@ const inputVariants = compose(input, cva({
 }));
 function NumberField(props, ref) {
     const { className, description, errorMessage, label, leftAddon, isInvalid: _isInvalid, textAlign, rightAddon, withAddonDivider, size, ...restProps } = props;
-    const isInvalid = _isInvalid || errorMessage != null;
+    // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
+    // which will override any built in validation
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsxs(NumberField$1, {
         ...restProps,
         className: cx(className, formField),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "2.0.0-canary.27",
+  "version": "2.0.0-canary.29",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"
@@ -19,10 +19,10 @@
   ],
   "dependencies": {
     "@obosbbl/grunnmuren-icons-react": "^2.0.0-canary.1",
-    "@react-aria/utils": "^3.23.2",
+    "@react-aria/utils": "^3.24.1",
     "@types/node": "^20.11.19",
     "cva": "1.0.0-beta.1",
-    "react-aria-components": "^1.1.1"
+    "react-aria-components": "^1.2.1"
   },
   "peerDependencies": {
     "react": "^18"