sliftutils 0.55.0 → 0.56.0

package/index.d.ts

@@ -231,7 +231,32 @@ declare module "sliftutils/render-utils/Input" {
 
 declare module "sliftutils/render-utils/InputLabel" {
     import preact from "preact";
-    import { InputProps } from "./Input";
+    type InputProps = (preact.JSX.HTMLAttributes<HTMLInputElement> & {
+        /** ONLY throttles onChangeValue */
+        throttle?: number;
+        flavor?: "large" | "small" | "none";
+        focusOnMount?: boolean;
+        textarea?: boolean;
+        /** Update on key stroke, not on blur (just does onInput = onChange, as onInput already does this) */
+        hot?: boolean;
+        /** Updates arrow keys with modifier behavior to use larger numbers, instead of decimals. */
+        integer?: boolean;
+        /** Only works with number/integer */
+        reverseArrowKeyDirection?: boolean;
+        inputRef?: (x: HTMLInputElement | null) => void;
+        /** Don't blur on enter key */
+        noEnterKeyBlur?: boolean;
+        noFocusSelect?: boolean;
+        inputKey?: string;
+        fillWidth?: boolean;
+        autocompleteValues?: string[];
+        /** Forces the input to update when focused. Usually we hold updates, to prevent the user's
+         *      typing to be interrupted by background updates.
+         *      NOTE: "hot" is usually required when using this.
+         */
+        forceInputValueUpdatesWhenFocused?: boolean;
+        onChangeValue?: (value: string) => void;
+    });
     export type InputLabelProps = Omit<InputProps, "label" | "title"> & {
         label?: preact.ComponentChild;
         number?: boolean;
@@ -266,6 +291,7 @@ declare module "sliftutils/render-utils/InputLabel" {
     }> {
         render(): preact.JSX.Element;
     }
+    export {};
 
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sliftutils",
-    "version": "0.55.0",
+    "version": "0.56.0",
     "main": "index.js",
     "license": "MIT",
     "files": [

package/render-utils/Input.tsx

@@ -9,6 +9,7 @@ import { throttleFunction } from "socket-function/src/misc";
 //  This is useful for inputs which you want to run an action on, such as "add new item",
 //      as it allows you to remove a local state value to cache the value, by just
 //      doing the add on "onChangeValue".
+// IMPORTANT! InputProps is in both InputLabel.tsx and Input.tsx, so the types export correctly
 export type InputProps = (
     preact.JSX.HTMLAttributes<HTMLInputElement>
     & {

package/render-utils/InputLabel.d.ts

@@ -1,5 +1,30 @@
 import preact from "preact";
-import { InputProps } from "./Input";
+type InputProps = (preact.JSX.HTMLAttributes<HTMLInputElement> & {
+    /** ONLY throttles onChangeValue */
+    throttle?: number;
+    flavor?: "large" | "small" | "none";
+    focusOnMount?: boolean;
+    textarea?: boolean;
+    /** Update on key stroke, not on blur (just does onInput = onChange, as onInput already does this) */
+    hot?: boolean;
+    /** Updates arrow keys with modifier behavior to use larger numbers, instead of decimals. */
+    integer?: boolean;
+    /** Only works with number/integer */
+    reverseArrowKeyDirection?: boolean;
+    inputRef?: (x: HTMLInputElement | null) => void;
+    /** Don't blur on enter key */
+    noEnterKeyBlur?: boolean;
+    noFocusSelect?: boolean;
+    inputKey?: string;
+    fillWidth?: boolean;
+    autocompleteValues?: string[];
+    /** Forces the input to update when focused. Usually we hold updates, to prevent the user's
+     *      typing to be interrupted by background updates.
+     *      NOTE: "hot" is usually required when using this.
+     */
+    forceInputValueUpdatesWhenFocused?: boolean;
+    onChangeValue?: (value: string) => void;
+});
 export type InputLabelProps = Omit<InputProps, "label" | "title"> & {
     label?: preact.ComponentChild;
     number?: boolean;
@@ -34,3 +59,4 @@ export declare class InputLabelURL extends preact.Component<InputLabelProps & {
 }> {
     render(): preact.JSX.Element;
 }
+export {};

package/render-utils/InputLabel.tsx

@@ -1,10 +1,50 @@
 import preact from "preact";
-import { Input, InputProps } from "./Input";
+import { Input } from "./Input";
 import { css } from "typesafecss";
 import { lazy } from "socket-function/src/caching";
 import { observer } from "./observer";
 import { observable } from "mobx";
 
+// IMPORTANT! InputProps is in both InputLabel.tsx and Input.tsx, so the types export correctly
+type InputProps = (
+    preact.JSX.HTMLAttributes<HTMLInputElement>
+    & {
+        /** ONLY throttles onChangeValue */
+        throttle?: number;
+
+        flavor?: "large" | "small" | "none";
+        focusOnMount?: boolean;
+        textarea?: boolean;
+        /** Update on key stroke, not on blur (just does onInput = onChange, as onInput already does this) */
+        hot?: boolean;
+        /** Updates arrow keys with modifier behavior to use larger numbers, instead of decimals. */
+        integer?: boolean;
+
+        /** Only works with number/integer */
+        reverseArrowKeyDirection?: boolean;
+
+        inputRef?: (x: HTMLInputElement | null) => void;
+        /** Don't blur on enter key */
+        noEnterKeyBlur?: boolean;
+        noFocusSelect?: boolean;
+        inputKey?: string;
+        fillWidth?: boolean;
+
+
+        autocompleteValues?: string[];
+
+        /** Forces the input to update when focused. Usually we hold updates, to prevent the user's
+         *      typing to be interrupted by background updates.
+         *      NOTE: "hot" is usually required when using this.
+         */
+        forceInputValueUpdatesWhenFocused?: boolean;
+
+        // NOTE: We trigger onChange (and onChangeValue) whenever
+        //      e.ctrlKey && (e.code.startsWith("Key") || e.code === "Enter") || e.code === "Enter" && e.shiftKey
+        //  This is because ctrl usually means a hotkey, and hotkeys usually want committed values.
+        onChangeValue?: (value: string) => void;
+    }
+)
 
 export type InputLabelProps = Omit<InputProps, "label" | "title"> & {
     label?: preact.ComponentChild;