@julo-ui/input - npm Package Compare versions

Comparing version 0.0.12 to 0.0.13

dist/components/input-group/index.js

@@ -37,3 +37,4 @@ "use strict";
   invalid: "data-input-invalid",
-  focus: "data-input-focus"
+  focus: "data-input-focus",
+  readonly: "data-input-readonly"
 };
@@ -53,10 +54,9 @@ function useListenInput({ groupRef, inputRef }) {
         if (record.type === "attributes") {
-          const isInvalid = record.target.getAttribute(
-            "aria-invalid"
-          );
-          const disabled = record.target.getAttribute(
-            "disabled"
-          );
+          const element = record.target;
+          const isInvalid = element.getAttribute("aria-invalid");
+          const disabled = element.getAttribute("disabled");
+          const readOnly = element.getAttribute("aria-readonly");
           syncGroupAttribute(attributes.invalid, Boolean(isInvalid));
           syncGroupAttribute(attributes.disabled, Boolean(disabled !== null));
+          syncGroupAttribute(attributes.readonly, Boolean(readOnly));
         }
@@ -83,2 +83,6 @@ });
       );
+      syncGroupAttribute(
+        attributes.readonly,
+        Boolean(input.getAttribute("aria-readonly"))
+      );
     }
@@ -113,19 +117,39 @@ () => {
 var inputGroupWithElementCx = import_react2.css`
-  border: 1px solid var(--colors-neutrals-40);
+  position: relative;
   border-radius: 0.5rem;
 
-  &[data-input-disabled='true'] {
-    border-color: var(--colors-neutrals-50);
-    background-color: var(--colors-neutrals-30);
-    * {
-      background-color: transparent;
-    }
-  }
+  &::after {
+    content: '';
+    position: absolute;
 
-  &[data-input-invalid='true'] {
-    border-color: var(--colors-red-30);
+    user-select: none;
+    pointer-events: none;
+
+    border: 1px solid var(--colors-neutrals-40);
+    border-radius: inherit;
+
+    width: 100%;
+    height: 100%;
+
+    transition: all ease 0.2s;
   }
 
-  &[data-input-focus='true'] {
-    border-color: var(--colors-primary-20);
+  &[data-input-readonly='false'] {
+    &[data-input-invalid='true']::after {
+      border-color: var(--colors-red-30);
+    }
+
+    &[data-input-disabled='true'] {
+      &::after {
+        border-color: var(--colors-neutrals-50);
+      }
+      background-color: var(--colors-neutrals-30);
+      * {
+        background-color: transparent;
+      }
+    }
+
+    &[data-input-focus='true']::after {
+      border-color: var(--colors-primary-20);
+    }
   }
@@ -166,10 +190,2 @@ `;
   ...!isOnlyElement && {
-    ...leftAddon && {
-      borderTopLeftRadius: "0",
-      borderBottomLeftRadius: "0"
-    },
-    ...rightAddon && {
-      borderTopRightRadius: "0",
-      borderBottomRightRadius: "0"
-    },
     ...leftElement && {
@@ -181,2 +197,10 @@ paddingLeft: "3rem"
     }
+  },
+  ...(leftAddon || leftElement && isOnlyElement) && {
+    borderTopLeftRadius: "0",
+    borderBottomLeftRadius: "0"
+  },
+  ...(rightAddon || rightElement && isOnlyElement) && {
+    borderTopRightRadius: "0",
+    borderBottomRightRadius: "0"
   }
@@ -227,5 +251,3 @@ });
       return (0, import_react3.cloneElement)(child, {
-        ...!isAddonExist && {
-          ref: (0, import_dom_utils.mergeRefs)(inputRef, child.ref)
-        },
+        ref: (0, import_dom_utils.mergeRefs)(inputRef, child.ref),
         sx: inputElementSx({
@@ -232,0 +254,0 @@ leftAddon,

dist/components/input-group/InputGroup.js

@@ -35,3 +35,4 @@ "use strict";
   invalid: "data-input-invalid",
-  focus: "data-input-focus"
+  focus: "data-input-focus",
+  readonly: "data-input-readonly"
 };
@@ -51,10 +52,9 @@ function useListenInput({ groupRef, inputRef }) {
         if (record.type === "attributes") {
-          const isInvalid = record.target.getAttribute(
-            "aria-invalid"
-          );
-          const disabled = record.target.getAttribute(
-            "disabled"
-          );
+          const element = record.target;
+          const isInvalid = element.getAttribute("aria-invalid");
+          const disabled = element.getAttribute("disabled");
+          const readOnly = element.getAttribute("aria-readonly");
           syncGroupAttribute(attributes.invalid, Boolean(isInvalid));
           syncGroupAttribute(attributes.disabled, Boolean(disabled !== null));
+          syncGroupAttribute(attributes.readonly, Boolean(readOnly));
         }
@@ -81,2 +81,6 @@ });
       );
+      syncGroupAttribute(
+        attributes.readonly,
+        Boolean(input.getAttribute("aria-readonly"))
+      );
     }
@@ -111,19 +115,39 @@ () => {
 var inputGroupWithElementCx = import_react2.css`
-  border: 1px solid var(--colors-neutrals-40);
+  position: relative;
   border-radius: 0.5rem;
 
-  &[data-input-disabled='true'] {
-    border-color: var(--colors-neutrals-50);
-    background-color: var(--colors-neutrals-30);
-    * {
-      background-color: transparent;
-    }
-  }
+  &::after {
+    content: '';
+    position: absolute;
 
-  &[data-input-invalid='true'] {
-    border-color: var(--colors-red-30);
+    user-select: none;
+    pointer-events: none;
+
+    border: 1px solid var(--colors-neutrals-40);
+    border-radius: inherit;
+
+    width: 100%;
+    height: 100%;
+
+    transition: all ease 0.2s;
   }
 
-  &[data-input-focus='true'] {
-    border-color: var(--colors-primary-20);
+  &[data-input-readonly='false'] {
+    &[data-input-invalid='true']::after {
+      border-color: var(--colors-red-30);
+    }
+
+    &[data-input-disabled='true'] {
+      &::after {
+        border-color: var(--colors-neutrals-50);
+      }
+      background-color: var(--colors-neutrals-30);
+      * {
+        background-color: transparent;
+      }
+    }
+
+    &[data-input-focus='true']::after {
+      border-color: var(--colors-primary-20);
+    }
   }
@@ -164,10 +188,2 @@ `;
   ...!isOnlyElement && {
-    ...leftAddon && {
-      borderTopLeftRadius: "0",
-      borderBottomLeftRadius: "0"
-    },
-    ...rightAddon && {
-      borderTopRightRadius: "0",
-      borderBottomRightRadius: "0"
-    },
     ...leftElement && {
@@ -179,2 +195,10 @@ paddingLeft: "3rem"
     }
+  },
+  ...(leftAddon || leftElement && isOnlyElement) && {
+    borderTopLeftRadius: "0",
+    borderBottomLeftRadius: "0"
+  },
+  ...(rightAddon || rightElement && isOnlyElement) && {
+    borderTopRightRadius: "0",
+    borderBottomRightRadius: "0"
   }
@@ -225,5 +249,3 @@ });
       return (0, import_react3.cloneElement)(child, {
-        ...!isAddonExist && {
-          ref: (0, import_dom_utils.mergeRefs)(inputRef, child.ref)
-        },
+        ref: (0, import_dom_utils.mergeRefs)(inputRef, child.ref),
         sx: inputElementSx({
@@ -230,0 +252,0 @@ leftAddon,

dist/components/input-group/styles.js

@@ -46,19 +46,39 @@ "use strict";
 var inputGroupWithElementCx = import_react.css`
-  border: 1px solid var(--colors-neutrals-40);
+  position: relative;
   border-radius: 0.5rem;
 
-  &[data-input-disabled='true'] {
-    border-color: var(--colors-neutrals-50);
-    background-color: var(--colors-neutrals-30);
-    * {
-      background-color: transparent;
-    }
-  }
+  &::after {
+    content: '';
+    position: absolute;
 
-  &[data-input-invalid='true'] {
-    border-color: var(--colors-red-30);
+    user-select: none;
+    pointer-events: none;
+
+    border: 1px solid var(--colors-neutrals-40);
+    border-radius: inherit;
+
+    width: 100%;
+    height: 100%;
+
+    transition: all ease 0.2s;
   }
 
-  &[data-input-focus='true'] {
-    border-color: var(--colors-primary-20);
+  &[data-input-readonly='false'] {
+    &[data-input-invalid='true']::after {
+      border-color: var(--colors-red-30);
+    }
+
+    &[data-input-disabled='true'] {
+      &::after {
+        border-color: var(--colors-neutrals-50);
+      }
+      background-color: var(--colors-neutrals-30);
+      * {
+        background-color: transparent;
+      }
+    }
+
+    &[data-input-focus='true']::after {
+      border-color: var(--colors-primary-20);
+    }
   }
@@ -99,10 +119,2 @@ `;
   ...!isOnlyElement && {
-    ...leftAddon && {
-      borderTopLeftRadius: "0",
-      borderBottomLeftRadius: "0"
-    },
-    ...rightAddon && {
-      borderTopRightRadius: "0",
-      borderBottomRightRadius: "0"
-    },
     ...leftElement && {
@@ -114,2 +126,10 @@ paddingLeft: "3rem"
     }
+  },
+  ...(leftAddon || leftElement && isOnlyElement) && {
+    borderTopLeftRadius: "0",
+    borderBottomLeftRadius: "0"
+  },
+  ...(rightAddon || rightElement && isOnlyElement) && {
+    borderTopRightRadius: "0",
+    borderBottomRightRadius: "0"
   }
@@ -116,0 +136,0 @@ });

dist/components/input-group/usecase/use-handle-children.js

@@ -46,19 +46,39 @@ "use strict";
 var inputGroupWithElementCx = import_react.css`
-  border: 1px solid var(--colors-neutrals-40);
+  position: relative;
   border-radius: 0.5rem;
 
-  &[data-input-disabled='true'] {
-    border-color: var(--colors-neutrals-50);
-    background-color: var(--colors-neutrals-30);
-    * {
-      background-color: transparent;
-    }
-  }
+  &::after {
+    content: '';
+    position: absolute;
 
-  &[data-input-invalid='true'] {
-    border-color: var(--colors-red-30);
+    user-select: none;
+    pointer-events: none;
+
+    border: 1px solid var(--colors-neutrals-40);
+    border-radius: inherit;
+
+    width: 100%;
+    height: 100%;
+
+    transition: all ease 0.2s;
   }
 
-  &[data-input-focus='true'] {
-    border-color: var(--colors-primary-20);
+  &[data-input-readonly='false'] {
+    &[data-input-invalid='true']::after {
+      border-color: var(--colors-red-30);
+    }
+
+    &[data-input-disabled='true'] {
+      &::after {
+        border-color: var(--colors-neutrals-50);
+      }
+      background-color: var(--colors-neutrals-30);
+      * {
+        background-color: transparent;
+      }
+    }
+
+    &[data-input-focus='true']::after {
+      border-color: var(--colors-primary-20);
+    }
   }
@@ -99,10 +119,2 @@ `;
   ...!isOnlyElement && {
-    ...leftAddon && {
-      borderTopLeftRadius: "0",
-      borderBottomLeftRadius: "0"
-    },
-    ...rightAddon && {
-      borderTopRightRadius: "0",
-      borderBottomRightRadius: "0"
-    },
     ...leftElement && {
@@ -114,2 +126,10 @@ paddingLeft: "3rem"
     }
+  },
+  ...(leftAddon || leftElement && isOnlyElement) && {
+    borderTopLeftRadius: "0",
+    borderBottomLeftRadius: "0"
+  },
+  ...(rightAddon || rightElement && isOnlyElement) && {
+    borderTopRightRadius: "0",
+    borderBottomRightRadius: "0"
   }
@@ -160,5 +180,3 @@ });
       return (0, import_react2.cloneElement)(child, {
-        ...!isAddonExist && {
-          ref: (0, import_dom_utils.mergeRefs)(inputRef, child.ref)
-        },
+        ref: (0, import_dom_utils.mergeRefs)(inputRef, child.ref),
         sx: inputElementSx({
@@ -165,0 +183,0 @@ leftAddon,

dist/components/input-group/usecase/use-listen-input.js

@@ -30,3 +30,4 @@ "use strict";
   invalid: "data-input-invalid",
-  focus: "data-input-focus"
+  focus: "data-input-focus",
+  readonly: "data-input-readonly"
 };
@@ -46,10 +47,9 @@ function useListenInput({ groupRef, inputRef }) {
         if (record.type === "attributes") {
-          const isInvalid = record.target.getAttribute(
-            "aria-invalid"
-          );
-          const disabled = record.target.getAttribute(
-            "disabled"
-          );
+          const element = record.target;
+          const isInvalid = element.getAttribute("aria-invalid");
+          const disabled = element.getAttribute("disabled");
+          const readOnly = element.getAttribute("aria-readonly");
           syncGroupAttribute(attributes.invalid, Boolean(isInvalid));
           syncGroupAttribute(attributes.disabled, Boolean(disabled !== null));
+          syncGroupAttribute(attributes.readonly, Boolean(readOnly));
         }
@@ -76,2 +76,6 @@ });
       );
+      syncGroupAttribute(
+        attributes.readonly,
+        Boolean(input.getAttribute("aria-readonly"))
+      );
     }
@@ -78,0 +82,0 @@ () => {

dist/index.js

@@ -116,3 +116,4 @@ "use strict";
   invalid: "data-input-invalid",
-  focus: "data-input-focus"
+  focus: "data-input-focus",
+  readonly: "data-input-readonly"
 };
@@ -132,10 +133,9 @@ function useListenInput({ groupRef, inputRef }) {
         if (record.type === "attributes") {
-          const isInvalid = record.target.getAttribute(
-            "aria-invalid"
-          );
-          const disabled = record.target.getAttribute(
-            "disabled"
-          );
+          const element = record.target;
+          const isInvalid = element.getAttribute("aria-invalid");
+          const disabled = element.getAttribute("disabled");
+          const readOnly = element.getAttribute("aria-readonly");
           syncGroupAttribute(attributes.invalid, Boolean(isInvalid));
           syncGroupAttribute(attributes.disabled, Boolean(disabled !== null));
+          syncGroupAttribute(attributes.readonly, Boolean(readOnly));
         }
@@ -162,2 +162,6 @@ });
       );
+      syncGroupAttribute(
+        attributes.readonly,
+        Boolean(input.getAttribute("aria-readonly"))
+      );
     }
@@ -192,19 +196,39 @@ () => {
 var inputGroupWithElementCx = import_react3.css`
-  border: 1px solid var(--colors-neutrals-40);
+  position: relative;
   border-radius: 0.5rem;
 
-  &[data-input-disabled='true'] {
-    border-color: var(--colors-neutrals-50);
-    background-color: var(--colors-neutrals-30);
-    * {
-      background-color: transparent;
-    }
-  }
+  &::after {
+    content: '';
+    position: absolute;
 
-  &[data-input-invalid='true'] {
-    border-color: var(--colors-red-30);
+    user-select: none;
+    pointer-events: none;
+
+    border: 1px solid var(--colors-neutrals-40);
+    border-radius: inherit;
+
+    width: 100%;
+    height: 100%;
+
+    transition: all ease 0.2s;
   }
 
-  &[data-input-focus='true'] {
-    border-color: var(--colors-primary-20);
+  &[data-input-readonly='false'] {
+    &[data-input-invalid='true']::after {
+      border-color: var(--colors-red-30);
+    }
+
+    &[data-input-disabled='true'] {
+      &::after {
+        border-color: var(--colors-neutrals-50);
+      }
+      background-color: var(--colors-neutrals-30);
+      * {
+        background-color: transparent;
+      }
+    }
+
+    &[data-input-focus='true']::after {
+      border-color: var(--colors-primary-20);
+    }
   }
@@ -245,10 +269,2 @@ `;
   ...!isOnlyElement && {
-    ...leftAddon && {
-      borderTopLeftRadius: "0",
-      borderBottomLeftRadius: "0"
-    },
-    ...rightAddon && {
-      borderTopRightRadius: "0",
-      borderBottomRightRadius: "0"
-    },
     ...leftElement && {
@@ -260,2 +276,10 @@ paddingLeft: "3rem"
     }
+  },
+  ...(leftAddon || leftElement && isOnlyElement) && {
+    borderTopLeftRadius: "0",
+    borderBottomLeftRadius: "0"
+  },
+  ...(rightAddon || rightElement && isOnlyElement) && {
+    borderTopRightRadius: "0",
+    borderBottomRightRadius: "0"
   }
@@ -306,5 +330,3 @@ });
       return (0, import_react4.cloneElement)(child, {
-        ...!isAddonExist && {
-          ref: (0, import_dom_utils.mergeRefs)(inputRef, child.ref)
-        },
+        ref: (0, import_dom_utils.mergeRefs)(inputRef, child.ref),
         sx: inputElementSx({
@@ -311,0 +333,0 @@ leftAddon,

package.json

 {
   "name": "@julo-ui/input",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "A React Component for Input Text Field",
@@ -29,3 +29,3 @@ "keywords": [
     "@emotion/react": "^11.10.6",
-    "@julo-ui/form-control": "^0.0.12",
+    "@julo-ui/form-control": "^0.0.13",
     "@julo-ui/typography": "1.0.11",
@@ -32,0 +32,0 @@ "@julo-ui/dom-utils": "0.0.3"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

105312

increased by3.41%

Lines of code

3172

increased by3.26%

Dependency changes

• + Added@julo-ui/form-control@0.0.13(transitive)

• - Removed@julo-ui/form-control@0.0.12(transitive)

• Updated@julo-ui/form-control@^0.0.13