@mpen/react-basic-inputs 0.1.11 → 0.2.1

package/dist/react-basic-inputs.umd.cjs

@@ -0,0 +1,291 @@
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["@mpen/react-basic-inputs"] = {}, global.jsxRuntime, global.React));
+})(this, function(exports2, jsxRuntime, React) {
+  "use strict";var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+  const NOOP = Object.freeze(() => {
+  });
+  function identity(x) {
+    return x;
+  }
+  let useEventHandler;
+  if (typeof window !== "undefined") {
+    useEventHandler = (callback) => {
+      React.useDebugValue(callback);
+      const latestRef = React.useRef(useEvent_shouldNotBeInvokedBeforeMount);
+      React.useInsertionEffect(() => {
+        latestRef.current = callback;
+      }, [callback]);
+      const stableRef = React.useRef(null);
+      if (!stableRef.current) {
+        stableRef.current = function() {
+          return latestRef.current.apply(this, arguments);
+        };
+      }
+      return stableRef.current;
+    };
+  } else {
+    useEventHandler = NOOP;
+  }
+  function useEvent(handler) {
+    return useEventHandler(handler);
+  }
+  function useEvent_shouldNotBeInvokedBeforeMount() {
+    throw new Error("INVALID_USE_EVENT_INVOCATION: the callback from useEvent cannot be invoked before the component has mounted.");
+  }
+  function useFirstMountState() {
+    var isFirst = React.useRef(true);
+    if (isFirst.current) {
+      isFirst.current = false;
+      return true;
+    }
+    return isFirst.current;
+  }
+  var useUpdateEffect = function(effect, deps) {
+    var isFirstMount = useFirstMountState();
+    React.useEffect(function() {
+      if (!isFirstMount) {
+        return effect();
+      }
+    }, deps);
+  };
+  function resolveValue(val, ...args) {
+    return typeof val === "function" ? val(...args) : val;
+  }
+  function defaultMakeKey(opt, idx) {
+    if (opt.key != null) {
+      return resolveValue(opt.key, opt, idx);
+    } else if (typeof opt.value === "string" || typeof opt.value === "number") {
+      return opt.value;
+    }
+    return idx;
+  }
+  class KeyFixer {
+    constructor() {
+      __publicField(this, "usedKeys", /* @__PURE__ */ new Map());
+    }
+    fix(opt, idx) {
+      let fixedKey = defaultMakeKey(opt, idx);
+      for (; ; ) {
+        let suffix = this.usedKeys.get(fixedKey);
+        if (suffix === void 0) {
+          this.usedKeys.set(fixedKey, 1);
+          break;
+        }
+        this.usedKeys.set(fixedKey, ++suffix);
+        fixedKey = `${fixedKey}(${suffix})`;
+      }
+      return fixedKey;
+    }
+  }
+  const defaultMakeInvalidValueOption = (value) => ({
+    value,
+    text: String(value),
+    disabled: true,
+    key: INVALID_OPTION_KEY
+  });
+  const PLACEHOLDER_KEY = "3c9369b7-0a5e-46ea-93c2-e8b9fec67fdb";
+  const INVALID_OPTION_KEY = "1a53f789-77f5-4ce6-a829-b00e563f1ee8";
+  function Select({
+    options,
+    value,
+    invalidValueOption = defaultMakeInvalidValueOption,
+    onChange,
+    placeholder,
+    ...selectAttrs
+  }) {
+    const isNotSelected = value == null;
+    const isValid = React.useMemo(() => value != null && options.some((o) => o.value == value), [options, value]);
+    const extraOption = React.useMemo(() => {
+      if (value == null || !invalidValueOption)
+        return null;
+      return invalidValueOption(value);
+    }, [invalidValueOption, value]);
+    const fixedOptions = React.useMemo(() => {
+      if (isValid)
+        return options;
+      const fixedOptions2 = [...options];
+      if (isNotSelected) {
+        if (placeholder != null) {
+          fixedOptions2.unshift({ text: placeholder, hidden: true, value: null, key: PLACEHOLDER_KEY });
+        }
+      } else if (extraOption) {
+        fixedOptions2.push(extraOption);
+      }
+      return fixedOptions2;
+    }, [isValid, options, isNotSelected, extraOption, placeholder]);
+    const handleChange = useEvent((ev) => {
+      const idx = ev.target.selectedIndex;
+      const opt = fixedOptions[idx];
+      onChange == null ? void 0 : onChange({
+        value: opt.value,
+        // option: opt,
+        // event: ev,
+        index: idx,
+        type: "change",
+        timeStamp: ev.timeStamp,
+        target: ev.target
+      });
+    });
+    const ref = React.useRef(null);
+    const refreshSelectedIndex = React.useCallback(() => {
+      if (!ref.current)
+        return;
+      if (ref.current.selectedIndex < 0 || fixedOptions[ref.current.selectedIndex].value != value) {
+        ref.current.selectedIndex = fixedOptions.findIndex((opt) => opt.value == value);
+      }
+    }, [fixedOptions, value]);
+    const setRef = (el) => {
+      ref.current = el;
+      refreshSelectedIndex();
+    };
+    useUpdateEffect(() => {
+      refreshSelectedIndex();
+    }, [refreshSelectedIndex]);
+    const fixer = new KeyFixer();
+    return /* @__PURE__ */ jsxRuntime.jsx("select", { ...selectAttrs, onChange: handleChange, ref: setRef, children: fixedOptions.map((opt, idx) => {
+      const { value: value2, text, key, ...optAttrs } = opt;
+      const fixedKey = fixer.fix(opt, idx);
+      return /* @__PURE__ */ React.createElement("option", { ...optAttrs, key: fixedKey, value: fixedKey }, opt.text);
+    }) });
+  }
+  function collapseWhitespace(str) {
+    if (!str)
+      return "";
+    return String(str).replace(/\s+/gu, " ").trim();
+  }
+  const Input = React.forwardRef(function Input2({ value = "", onChange, onInput, onBlur, formatOnChange = identity, ...otherProps }, ref) {
+    const [currentValue, setCurrentValue] = React.useState(value);
+    const lastValue = React.useRef(value);
+    const modified = React.useRef(false);
+    useUpdateEffect(() => {
+      setCurrentValue(value);
+      modified.current = false;
+      lastValue.current = value;
+    }, [value]);
+    const props = {
+      type: "text",
+      ...otherProps,
+      value: currentValue,
+      onChange: (ev) => {
+        setCurrentValue(ev.target.value);
+      },
+      // TODO: fire a change event onPaste ?
+      // formatOnPaste?
+      onInput: (ev) => {
+        modified.current = true;
+        onInput == null ? void 0 : onInput(ev);
+      },
+      onBlur: (ev) => {
+        const formattedValue = formatOnChange(currentValue);
+        if (modified.current) {
+          if (formattedValue !== lastValue.current) {
+            onChange == null ? void 0 : onChange({
+              type: "change",
+              value: formattedValue,
+              timeStamp: ev.timeStamp,
+              target: ev.target
+            });
+            lastValue.current = formattedValue;
+          }
+          if (formattedValue !== ev.target.value) {
+            setCurrentValue(formattedValue);
+          }
+        }
+        onBlur == null ? void 0 : onBlur(ev);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx("input", { ...props, ref });
+  });
+  function TextInput({ formatOnChange = collapseWhitespace, ...otherProps }) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Input, { formatOnChange, ...otherProps, type: "text" });
+  }
+  const TextArea = React.forwardRef(function TextArea2({
+    onInput,
+    style,
+    initialHeight = "auto",
+    ...rest
+  }, fwdRef) {
+    const ref = React.useRef(null);
+    const [height, setHeight] = React.useState(initialHeight);
+    const adjustHeight = React.useCallback(() => {
+      const textarea = ref.current;
+      if (!textarea)
+        return;
+      textarea.style.height = initialHeight;
+      const newHeight = `${textarea.scrollHeight}px`;
+      setHeight(newHeight);
+      textarea.style.height = newHeight;
+    }, [initialHeight]);
+    React.useImperativeHandle(fwdRef, () => ({
+      element: ref.current,
+      adjustHeight
+    }), [adjustHeight]);
+    const input = useEventHandler((ev) => {
+      adjustHeight();
+      onInput == null ? void 0 : onInput(ev);
+    });
+    React.useLayoutEffect(() => {
+      adjustHeight();
+      const textarea = ref.current;
+      if (!textarea)
+        return;
+      const resizeObserver = new ResizeObserver((_entries) => {
+        adjustHeight();
+      });
+      resizeObserver.observe(textarea);
+      return () => {
+        resizeObserver.unobserve(textarea);
+      };
+    }, [adjustHeight]);
+    return /* @__PURE__ */ jsxRuntime.jsx("textarea", { ...rest, style: {
+      overflow: "hidden",
+      // these 2 styles aren't needed if the caller sets them in CSS.
+      resize: "none",
+      ...style,
+      height
+    }, onInput: input, ref });
+  });
+  function RadioMenu(menu) {
+    const defaultId = React.useId();
+    const name = menu.name ?? defaultId;
+    const eq = menu.valueEquals ?? Object.is;
+    const fixedOptions = menu.options ?? [];
+    const fixer = new KeyFixer();
+    const onChange = useEventHandler((ev) => {
+      const selectedIndex = Number(ev.target.value);
+      const selectedOption = fixedOptions[selectedIndex];
+      if (selectedOption != null && menu.onChange != null) {
+        menu.onChange({
+          value: selectedOption.value,
+          index: selectedIndex,
+          type: "change",
+          timeStamp: ev.timeStamp,
+          target: ev.target
+        });
+      }
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: menu.className, children: fixedOptions.map((opt, idx) => {
+      const { value, text, key, itemClassName, labelClassName, inputClassName, textClassName, ...rest } = opt;
+      const fixedKey = fixer.fix(opt, idx);
+      if (menu.value !== void 0) {
+        rest.checked = eq(value, menu.value);
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx("li", { className: itemClassName, "aria-disabled": rest.disabled, children: /* @__PURE__ */ jsxRuntime.jsxs("label", { className: labelClassName, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("input", { ...rest, className: inputClassName, value: idx, onChange, name, type: "radio" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: textClassName, children: text })
+      ] }) }, fixedKey);
+    }) });
+  }
+  exports2.Input = Input;
+  exports2.RadioMenu = RadioMenu;
+  exports2.Select = Select;
+  exports2.TextArea = TextArea;
+  exports2.TextInput = TextInput;
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+});

package/package.json

@@ -1,61 +1,46 @@
 {
   "name": "@mpen/react-basic-inputs",
-  "version": "0.1.11",
-  "packageManager": "yarn@3.5.0",
+  "private": false,
+  "version": "0.2.1",
+  "type": "module",
+  "files": ["dist"],
+  "main": "./dist/react-basic-inputs.umd.cjs",
+  "module": "./dist/react-basic-inputs.js",
   "exports": {
     ".": {
-      "import": "./dist/bundle.mjs",
-      "require": "./dist/bundle.cjs",
-      "types": "./dist/bundle.d.ts"
+      "import": "./dist/react-basic-inputs.js",
+      "require": "./dist/react-basic-inputs.umd.cjs",
+      "types": "./dist/react-basic-inputs.d.ts"
     }
   },
-  "type": "module",
-  "files": [
-    "./dist"
-  ],
   "scripts": {
-    "dev:build": "rollup -cw",
-    "dev:serve": "serve -l tcp://0.0.0.0:8080",
-    "dev": "run-p \"dev:**\"",
-    "serve": "bun run --hot dev/serve.ts",
-    "bundle:clean": "rimraf -g \"dist/*\"",
-    "bundle:build": "rollup -c",
-    "bundle": "run-s bundle:clean bundle:build",
-    "patch": "npm version patch && VER=$(jq -r '.version' package.json) && hg ci -m \"Publish v$VER\" && hg tag \"v$VER\"",
-    "release": "run-s bundle patch && npm publish --access=public && hg push"
+    "dev": "bun run --bun vite",
+    "build": "bun run --bun tsc && bun run --bun vite build",
+    "lint": "bun run --bun eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "bun run --bun vite preview",
+    "_prepublishOnly": "bun run --bun build",
+    "publish": "npm publish --access=public"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.4",
-    "@rollup/plugin-node-resolve": "^15.2.1",
-    "@rollup/plugin-replace": "^5.0.2",
-    "@rollup/plugin-terser": "^0.4.3",
-    "@rollup/plugin-typescript": "^11.1.3",
-    "@types/eslint": "^8",
-    "@types/jest": "^29.5.0",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^5.57.1",
-    "@typescript-eslint/parser": "^5.57.1",
-    "eslint": "^8.38.0",
-    "eslint-plugin-react": "^7.32.2",
+    "@types/bun": "^1.1.2",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "jest": "^29.5.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
     "npm-run-all": "^4.1.5",
-    "react": ">=17 <19",
-    "react-dom": ">=17 <19",
-    "react-use": "^17.4.0",
-    "rimraf": "^5.0.0",
-    "rollup": "^3.20.2",
-    "serve": "^14.2.0",
-    "ts-jest": "^29.1.0",
-    "tslib": "^2.5.0",
-    "typescript": "^5.3.3"
-  },
-  "peerDependencies": {
-    "react": ">=17 <19",
-    "react-dom": ">=17 <19"
-  },
-  "dependencies": {
-    "classcat": "^5.0.4"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-use": "^17.5.0",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0",
+    "vite-plugin-dts": "^3.9.1"
   }
 }