@yourdash/uikit 1.0.15 → 1.0.17

package/components/heading/heading.module.scss

@@ -8,6 +8,8 @@
 .component {
   display: inline-block;
   text-align: center;
+  margin: 0;
+  line-height: 1;
 }
 
 .h1component {

package/components/separator/separator.module.scss

@@ -8,7 +8,6 @@
 .component {
   display: flex;
   border: var(#{$theme}#{$border});
-  border-bottom: none;
   border-radius: var(#{$theme}#{$radius});
 }
 
@@ -16,6 +15,7 @@
   width: 0;
   height: calc(100% - calc(var(#{$theme}#{$gap})) * 2);
   margin: var(#{$theme}#{$gap});
+  border-left: none;
 
   &.disableMargin {
     height: 100%;
@@ -28,6 +28,7 @@
   width: calc(100% - calc(var(#{$theme}#{$gap})) * 2);
   height: 0;
   margin: var(#{$theme}#{$gap});
+  border-bottom: none;
 
   &.disableMargin {
     width: 100%;

package/components/textInput/textInput.tsx

@@ -1,64 +1,78 @@
-/*
- * Copyright ©2024 Ewsgit<https://ewsgit.uk> and YourDash<https://yourdash.ewsgit.uk> contributors.
- * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
- */
-
-import clippy from "@yourdash/shared/web/helpers/clippy.ts";
-import Icon from "../icon/icon.tsx";
-import { UKIconType } from "../icon/iconDictionary.ts";
-import styles from "./textInput.module.scss";
-import React, { useEffect, useRef, useState } from "react";
-
-const TextInputComponent: React.FC<{
-  getValue?: React.Dispatch<React.SetStateAction<string>>;
-  onSubmit?: (value: string) => void;
-  placeholder: string;
-  icon?: UKIconType;
-  defaultValue?: string;
-  value?: string;
-  accessibleName: string;
-  className?: string;
-  type?: string;
-}> = (props) => {
-  const ref = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (!ref.current) return;
-
-    if (props.value) ref.current.value = props.value;
-  }, [props.value]);
-
-  useEffect(() => {
-    if (!ref.current) return;
-
-    ref.current.onchange = () => {
-      if (!ref.current) return;
-      if (!props.getValue) return;
-
-      props.getValue(ref.current.value);
-    };
-  }, []);
-
-  return (
-    <div className={clippy(styles.component, props.className)}>
-      {props.icon && (
-        <Icon
-          className={styles.icon}
-          icon={props.icon}
-        />
-      )}
-      <input
-        ref={ref}
-        type={props.type || "text"}
-        aria-label={props.accessibleName}
-        defaultValue={props.defaultValue}
-        className={clippy(styles.input, !props.icon && styles.noIcon)}
-        placeholder={props.placeholder}
-      />
-    </div>
-  );
-};
-
-const TextInput = TextInputComponent;
-
-export default TextInput;
+/*
+ * Copyright ©2024 Ewsgit<https://ewsgit.uk> and YourDash<https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
+ */
+
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
+import Icon from "../icon/icon.tsx";
+import { UKIconType } from "../icon/iconDictionary.ts";
+import styles from "./textInput.module.scss";
+import React, { useEffect, useRef, useState } from "react";
+
+const TextInputComponent: React.FC<{
+  getValue?: React.Dispatch<React.SetStateAction<string>>;
+  getLiveValue?: React.Dispatch<React.SetStateAction<string>>;
+  onSubmit?: (value: string) => void;
+  placeholder: string;
+  icon?: UKIconType;
+  defaultValue?: string;
+  value?: string;
+  accessibleName: string;
+  className?: string;
+  type?: string;
+}> = (props) => {
+  const ref = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    if (props.value) ref.current.value = props.value;
+  }, [props.value]);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    ref.current.onchange = () => {
+      if (!ref.current) return;
+      if (!props.getValue) return;
+
+      props.getValue(ref.current.value);
+    };
+
+    ref.current.onkeyup = (event) => {
+      if (!ref.current) return;
+      if (!props.onSubmit) return;
+
+      if (props.getLiveValue) {
+        props.getLiveValue(ref.current.value);
+      }
+
+      if (event.key === "Enter") {
+        props.onSubmit(ref.current.value);
+      }
+    };
+  }, []);
+
+  return (
+    <div className={clippy(styles.component, props.className)}>
+      {props.icon && (
+        <Icon
+          className={styles.icon}
+          icon={props.icon}
+        />
+      )}
+      <input
+        ref={ref}
+        type={props.type || "text"}
+        aria-label={props.accessibleName}
+        defaultValue={props.defaultValue}
+        className={clippy(styles.input, !props.icon && styles.noIcon)}
+        placeholder={props.placeholder}
+      />
+    </div>
+  );
+};
+
+const TextInput = TextInputComponent;
+
+export default TextInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yourdash/uikit",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "license": "MIT",
   "type": "module",
   "engines": {