@koine/react 2.0.0-alpha.4 → 2.0.0-beta.10

package/Forms/Toggle/useToggle.mjs

@@ -1,5 +1,4 @@
-import { __assign, __rest } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useMemo } from "react";
 import { useWatch } from "react-hook-form";
 import { InputInvisible } from "../styles";
@@ -31,27 +30,21 @@ import { InputInvisible } from "../styles";
  *
  * To enable this mode either pass the props `valueTrue` and `valueFalse` or
  * an array of options with the shape of `Option`
- */
-export function useToggle(props, ref) {
-    var name = props.name, control = props.control, register = props.register, label = props.label, options = props.options, propValue = props.value, restProps = __rest(props, ["name", "control", "register", "label", "options", "value"]);
-    var id = restProps.id, valueTrue = restProps.valueTrue, valueFalse = restProps.valueFalse, 
-    // defaultChecked,
+ */ export function useToggle(props, ref) {
+    const { name, control, register, label, options, value: propValue, ...restProps } = props;
+    let { id, valueTrue, valueFalse, // defaultChecked,
     // defaultValue,
     // eslint-disable-next-line prefer-const
-    remainingInputProps = __rest(restProps, ["id", "valueTrue", "valueFalse"]);
+    ...remainingInputProps } = restProps;
     // use options data convention to pass on the true/false values
     if (options) {
-        valueTrue = options
-            .filter(function (opt) { return opt.value === "true"; })[0]
-            .label.toString();
-        valueFalse = options
-            .filter(function (opt) { return opt.value === "false"; })[0]
-            .label.toString();
+        valueTrue = options.filter((opt)=>opt.value === "true")[0].label.toString();
+        valueFalse = options.filter((opt)=>opt.value === "false")[0].label.toString();
     }
-    id = "switch-".concat(name);
-    var idTrue = "".concat(id, "-true");
-    var idFalse = "".concat(id, "-false");
-    var isRadio = !!(valueTrue && valueFalse);
+    id = `switch-${name}`;
+    const idTrue = `${id}-true`;
+    const idFalse = `${id}-false`;
+    const isRadio = !!(valueTrue && valueFalse);
     // // manage default values for both toggle modes
     // defaultChecked = isUndefined(defaultChecked) ? false : defaultChecked;
     // // TODO: maybe throw an error if the defaultValue that arrives here is not
@@ -62,10 +55,9 @@ export function useToggle(props, ref) {
     //     : valueFalse;
     // get the value either from the uncontrolled watched input or from the given
     // prop to control the component
-    var value = useWatch({
-        name: name,
-        control: control,
-        // defaultValue: isRadio ? defaultValue : defaultChecked,
+    let value = useWatch({
+        name,
+        control
     });
     if (propValue) {
         value = propValue;
@@ -74,60 +66,85 @@ export function useToggle(props, ref) {
     // a `register` function, then check if we have a `control` object or just
     // rely on the `name` prop and `ref`, they probably would be passed alongside
     // an `onChange` prop that is spreaded on the inputs
-    var inputProps = useMemo(function () {
-        return register
-            ? register(name)
-            : control
-                ? control.register(name)
-                : {
-                    name: name,
-                    ref: ref,
-                };
-    }, [register, control, name, ref]);
+    const inputProps = useMemo(()=>{
+        return register ? register(name) : control ? control.register(name) : {
+            name,
+            ref
+        };
+    }, [
+        register,
+        control,
+        name,
+        ref
+    ]);
     /**
-     * Accessibility.
-     *
-     * Fake the spacebar keyboard behaviour on the radio mode of the checkbox.
-     * Without this *only* the arrow keys would change the checkbox state
-     */
-    var handleKeyDown = useCallback(function (event) {
+   * Accessibility.
+   *
+   * Fake the spacebar keyboard behaviour on the radio mode of the checkbox.
+   * Without this *only* the arrow keys would change the checkbox state
+   */ const handleKeyDown = useCallback((event)=>{
         if (event.key === " ") {
             event.preventDefault();
             event.stopPropagation();
-            var firstInput = event.target;
-            var next = firstInput.nextElementSibling;
-            var prev = firstInput.previousElementSibling;
-            var secondInput = (next === null || next === void 0 ? void 0 : next.tagName) === "INPUT" ? next : prev;
-            var target = firstInput;
+            const firstInput = event.target;
+            const next = firstInput.nextElementSibling;
+            const prev = firstInput.previousElementSibling;
+            const secondInput = next?.tagName === "INPUT" ? next : prev;
+            let target = firstInput;
             if (firstInput.checked) {
                 target = secondInput;
-            }
-            else {
+            } else {
                 if (!secondInput.checked) {
-                    target =
-                        firstInput.value === valueTrue ? firstInput : secondInput;
+                    target = firstInput.value === valueTrue ? firstInput : secondInput;
                 }
             }
-            if (target)
-                target.click();
+            if (target) target.click();
         }
-    }, [valueTrue]);
+    }, [
+        valueTrue
+    ]);
     // collect all the return values that are dependent on the current value
     // of the input
-    var valueDependentProps = useMemo(function () { return ({
-        rootProps: {
-            htmlFor: isRadio
-                ? !value || value === valueFalse
-                    ? idTrue
-                    : idFalse
-                : id,
-        },
-        label: label ? label : value,
-        value: value,
-    }); }, [value, valueFalse, isRadio, id, idTrue, idFalse, label]);
-    var Inputs = useMemo(function () {
-        return isRadio ? (_jsxs(_Fragment, { children: [_jsx(InputInvisible, __assign({ id: idFalse }, inputProps, remainingInputProps, { onKeyDown: handleKeyDown, type: "radio", value: valueFalse })), _jsx(InputInvisible, __assign({ id: idTrue }, inputProps, remainingInputProps, { onKeyDown: handleKeyDown, type: "radio", value: valueTrue }))] })) : (_jsx(InputInvisible, __assign({ id: id, type: "checkbox" }, inputProps, remainingInputProps)));
-    }, [
+    const valueDependentProps = useMemo(()=>({
+            rootProps: {
+                htmlFor: isRadio ? !value || value === valueFalse ? idTrue : idFalse : id
+            },
+            label: label ? label : value,
+            value
+        }), [
+        value,
+        valueFalse,
+        isRadio,
+        id,
+        idTrue,
+        idFalse,
+        label
+    ]);
+    const Inputs = useMemo(()=>isRadio ? /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsx(InputInvisible, {
+                    id: idFalse,
+                    ...inputProps,
+                    ...remainingInputProps,
+                    onKeyDown: handleKeyDown,
+                    type: "radio",
+                    value: valueFalse
+                }),
+                /*#__PURE__*/ _jsx(InputInvisible, {
+                    id: idTrue,
+                    ...inputProps,
+                    ...remainingInputProps,
+                    onKeyDown: handleKeyDown,
+                    type: "radio",
+                    value: valueTrue
+                })
+            ]
+        }) : /*#__PURE__*/ _jsx(InputInvisible, {
+            id: id,
+            type: "checkbox",
+            ...inputProps,
+            ...remainingInputProps
+        }), [
         inputProps,
         remainingInputProps,
         handleKeyDown,
@@ -136,10 +153,11 @@ export function useToggle(props, ref) {
         idTrue,
         valueFalse,
         valueTrue,
-        id,
-        // defaultChecked,
-        // defaultValue,
+        id
     ]);
     // console.log("useToggle: render", value);
-    return __assign(__assign({}, valueDependentProps), { Inputs: Inputs });
+    return {
+        ...valueDependentProps,
+        Inputs
+    };
 }

package/Forms/antispam.js

@@ -1,61 +1,55 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.decodeForm = exports.encodeForm = void 0;
-var tslib_1 = require("tslib");
-var yup_1 = require("@kuus/yup");
-var encode_1 = tslib_1.__importDefault(require("@koine/utils/encode"));
-var decode_1 = tslib_1.__importDefault(require("@koine/utils/decode"));
-var isUndefined_1 = tslib_1.__importDefault(require("@koine/utils/isUndefined"));
-/**
- * Encode form
- *
- * Takes a record of yup validations and outputs a `yup` schema with encoded
- * names (antispam technique) and a record of the encoded/decoded input `name`s.
- *
- * We skip the names prefixed wth an underscore which are considered programmatic
- * form data not created by user input.
- *
- * FIXME: types https://github.com/jquense/yup/issues/1700
- */
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    encodeForm: function() {
+        return encodeForm;
+    },
+    decodeForm: function() {
+        return decodeForm;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _yup = require("@kuus/yup");
+const _decode = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/decode"));
+const _encode = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/encode"));
+const _isUndefined = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/isUndefined"));
 function encodeForm(validationRules) {
-    var encoded = {};
-    var encodedNames = {};
-    for (var name_1 in validationRules) {
-        if (!name_1.startsWith("_")) {
-            var encodedName = (0, encode_1.default)(name_1);
-            encoded[encodedName] = validationRules[name_1];
-            encodedNames[name_1] = encodedName;
+    const encoded = {};
+    const encodedNames = {};
+    for(const name in validationRules){
+        if (!name.startsWith("_")) {
+            const encodedName = (0, _encode.default)(name);
+            encoded[encodedName] = validationRules[name];
+            encodedNames[name] = encodedName;
         }
     }
     // we need `.required()` to correctly infer the type @see
     // https://github.com/jquense/yup/issues/946
-    var encodedSchema = (0, yup_1.object)(encoded).required();
-    return { encodedSchema: encodedSchema, encodedNames: encodedNames };
+    const encodedSchema = (0, _yup.object)(encoded).required();
+    return {
+        encodedSchema,
+        encodedNames
+    };
 }
-exports.encodeForm = encodeForm;
-/**
- * Decode form data
- *
- * This function is meant to be used inside an api endpoint to gather an encoded
- * form submit data and transform it to the decoded desired json data.
- *
- * Here too we skip encoding/decoding process for names prefixed wth an underscore
- * which are considered programmatic form data not created by user input.
- */
 function decodeForm(formData) {
-    var json = {};
-    for (var encodedName in formData) {
-        var decodedName = (0, decode_1.default)(encodedName);
+    const json = {};
+    for(const encodedName in formData){
+        const decodedName = (0, _decode.default)(encodedName);
         // always add underscore prefixed names as they are treated as internal
         // private inputs outside of the honeypot system, normalise them here removing
         // the underscore prefix
         if (encodedName.startsWith("_")) {
             // @ts-expect-error nevermind
             json[encodedName.substring(1)] = formData[encodedName];
-        }
-        // if the decoded `name` is empty and the encoded `name` is defined honeypot passed
-        else if (!(0, isUndefined_1.default)(formData[encodedName]) &&
-            formData[decodedName] === "") {
+        } else if (!(0, _isUndefined.default)(formData[encodedName]) && formData[decodedName] === "") {
             // @ts-expect-error nevermind
             json[decodedName] = formData[encodedName];
         }
@@ -63,4 +57,3 @@ function decodeForm(formData) {
     // console.log(formData, decoded, json);
     return json;
 }
-exports.decodeForm = decodeForm;

package/Forms/antispam.mjs

@@ -1,6 +1,6 @@
 import { object } from "@kuus/yup";
-import encode from "@koine/utils/encode";
 import decode from "@koine/utils/decode";
+import encode from "@koine/utils/encode";
 import isUndefined from "@koine/utils/isUndefined";
 /**
  * Encode form
@@ -12,21 +12,23 @@ import isUndefined from "@koine/utils/isUndefined";
  * form data not created by user input.
  *
  * FIXME: types https://github.com/jquense/yup/issues/1700
- */
-export function encodeForm(validationRules) {
-    var encoded = {};
-    var encodedNames = {};
-    for (var name_1 in validationRules) {
-        if (!name_1.startsWith("_")) {
-            var encodedName = encode(name_1);
-            encoded[encodedName] = validationRules[name_1];
-            encodedNames[name_1] = encodedName;
+ */ export function encodeForm(validationRules) {
+    const encoded = {};
+    const encodedNames = {};
+    for(const name in validationRules){
+        if (!name.startsWith("_")) {
+            const encodedName = encode(name);
+            encoded[encodedName] = validationRules[name];
+            encodedNames[name] = encodedName;
         }
     }
     // we need `.required()` to correctly infer the type @see
     // https://github.com/jquense/yup/issues/946
-    var encodedSchema = object(encoded).required();
-    return { encodedSchema: encodedSchema, encodedNames: encodedNames };
+    const encodedSchema = object(encoded).required();
+    return {
+        encodedSchema,
+        encodedNames
+    };
 }
 /**
  * Decode form data
@@ -36,21 +38,17 @@ export function encodeForm(validationRules) {
  *
  * Here too we skip encoding/decoding process for names prefixed wth an underscore
  * which are considered programmatic form data not created by user input.
- */
-export function decodeForm(formData) {
-    var json = {};
-    for (var encodedName in formData) {
-        var decodedName = decode(encodedName);
+ */ export function decodeForm(formData) {
+    const json = {};
+    for(const encodedName in formData){
+        const decodedName = decode(encodedName);
         // always add underscore prefixed names as they are treated as internal
         // private inputs outside of the honeypot system, normalise them here removing
         // the underscore prefix
         if (encodedName.startsWith("_")) {
             // @ts-expect-error nevermind
             json[encodedName.substring(1)] = formData[encodedName];
-        }
-        // if the decoded `name` is empty and the encoded `name` is defined honeypot passed
-        else if (!isUndefined(formData[encodedName]) &&
-            formData[decodedName] === "") {
+        } else if (!isUndefined(formData[encodedName]) && formData[decodedName] === "") {
             // @ts-expect-error nevermind
             json[decodedName] = formData[encodedName];
         }

package/Forms/helpers.js

@@ -1,43 +1,60 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.triggerChange = exports.triggerOnChange = exports.defaultOptionsFilterFn = exports.normaliseOptions = void 0;
-var tslib_1 = require("tslib");
-var isString_1 = tslib_1.__importDefault(require("@koine/utils/isString"));
-var matchSorter_1 = tslib_1.__importDefault(require("@koine/utils/matchSorter"));
-var normaliseOptions = function (options) {
-    if (options === void 0) { options = []; }
-    return options.map(function (option) {
-        return (0, isString_1.default)(option)
-            ? {
-                label: option,
-                value: option,
-            }
-            : option;
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    normaliseOptions: function() {
+        return normaliseOptions;
+    },
+    defaultOptionsFilterFn: function() {
+        return defaultOptionsFilterFn;
+    },
+    triggerOnChange: function() {
+        return triggerOnChange;
+    },
+    triggerChange: function() {
+        return triggerChange;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _isString = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/isString"));
+const _matchSorter = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/matchSorter"));
+const normaliseOptions = (options = [])=>{
+    return options.map((option)=>{
+        return (0, _isString.default)(option) ? {
+            label: option,
+            value: option
+        } : option;
     });
 };
-exports.normaliseOptions = normaliseOptions;
 function defaultOptionsFilterFn(options, inputValue) {
     if (!inputValue) {
         return options;
     }
-    return (0, matchSorter_1.default)(options, inputValue, { keys: ["value", "label"] });
+    return (0, _matchSorter.default)(options, inputValue, {
+        keys: [
+            "value",
+            "label"
+        ]
+    });
 }
-exports.defaultOptionsFilterFn = defaultOptionsFilterFn;
-/**
- * We are faking the native input `onChange` event
- */
 function triggerOnChange(onChange, name, value) {
     // @ts-expect-error nevermind
-    if (onChange)
-        onChange({ target: { name: name, value: value } });
+    if (onChange) onChange({
+        target: {
+            name,
+            value
+        }
+    });
 }
-exports.triggerOnChange = triggerOnChange;
-/**
- * @see https://hustle.bizongo.in/simulate-react-on-change-on-controlled-components-baa336920e04
- * @deprecated
- */
 function triggerChange(input, value) {
-    var obj = window.Object;
+    const obj = window.Object;
     if (!obj) {
         if (process.env["NODE_ENV"] !== "production") {
             console.warn("[@koine/react:Forms:triggerChange] window.Object does not exists, bailing.");
@@ -45,10 +62,11 @@ function triggerChange(input, value) {
         return;
     }
     // @ts-expect-error nevermind
-    var nativeInputValueSetter = obj.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
+    const nativeInputValueSetter = obj.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
     // @ts-expect-error nevermind
     nativeInputValueSetter.call(input, value);
-    var inputEvent = new Event("input", { bubbles: true });
+    const inputEvent = new Event("input", {
+        bubbles: true
+    });
     input.dispatchEvent(inputEvent);
 }
-exports.triggerChange = triggerChange;

package/Forms/helpers.mjs

@@ -1,36 +1,40 @@
 import isString from "@koine/utils/isString";
 import matchSorter from "@koine/utils/matchSorter";
-export var normaliseOptions = function (options) {
-    if (options === void 0) { options = []; }
-    return options.map(function (option) {
-        return isString(option)
-            ? {
-                label: option,
-                value: option,
-            }
-            : option;
+export const normaliseOptions = (options = [])=>{
+    return options.map((option)=>{
+        return isString(option) ? {
+            label: option,
+            value: option
+        } : option;
     });
 };
 export function defaultOptionsFilterFn(options, inputValue) {
     if (!inputValue) {
         return options;
     }
-    return matchSorter(options, inputValue, { keys: ["value", "label"] });
+    return matchSorter(options, inputValue, {
+        keys: [
+            "value",
+            "label"
+        ]
+    });
 }
 /**
  * We are faking the native input `onChange` event
- */
-export function triggerOnChange(onChange, name, value) {
+ */ export function triggerOnChange(onChange, name, value) {
     // @ts-expect-error nevermind
-    if (onChange)
-        onChange({ target: { name: name, value: value } });
+    if (onChange) onChange({
+        target: {
+            name,
+            value
+        }
+    });
 }
 /**
  * @see https://hustle.bizongo.in/simulate-react-on-change-on-controlled-components-baa336920e04
  * @deprecated
- */
-export function triggerChange(input, value) {
-    var obj = window.Object;
+ */ export function triggerChange(input, value) {
+    const obj = window.Object;
     if (!obj) {
         if (process.env["NODE_ENV"] !== "production") {
             console.warn("[@koine/react:Forms:triggerChange] window.Object does not exists, bailing.");
@@ -38,9 +42,11 @@ export function triggerChange(input, value) {
         return;
     }
     // @ts-expect-error nevermind
-    var nativeInputValueSetter = obj.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
+    const nativeInputValueSetter = obj.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
     // @ts-expect-error nevermind
     nativeInputValueSetter.call(input, value);
-    var inputEvent = new Event("input", { bubbles: true });
+    const inputEvent = new Event("input", {
+        bubbles: true
+    });
     input.dispatchEvent(inputEvent);
 }

package/Forms/index.js

@@ -1,19 +1,19 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./antispam"), exports);
-tslib_1.__exportStar(require("./Checkbox"), exports);
-tslib_1.__exportStar(require("./Input"), exports);
-tslib_1.__exportStar(require("./InputGroup"), exports);
-tslib_1.__exportStar(require("./Feedback"), exports);
-tslib_1.__exportStar(require("./Field"), exports);
-tslib_1.__exportStar(require("./InputGroup"), exports);
-tslib_1.__exportStar(require("./Label"), exports);
-tslib_1.__exportStar(require("./Password"), exports);
-tslib_1.__exportStar(require("./Radio"), exports);
-// export * from "./Select";
-tslib_1.__exportStar(require("./Switch"), exports);
-tslib_1.__exportStar(require("./Textarea"), exports);
-tslib_1.__exportStar(require("./Toggle"), exports);
-tslib_1.__exportStar(require("./helpers"), exports);
-tslib_1.__exportStar(require("./styles"), exports);
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./antispam"), exports);
+_export_star._(require("./Checkbox"), exports);
+_export_star._(require("./Input"), exports);
+_export_star._(require("./InputGroup"), exports);
+_export_star._(require("./Feedback"), exports);
+_export_star._(require("./Field"), exports);
+_export_star._(require("./Label"), exports);
+_export_star._(require("./Password"), exports);
+_export_star._(require("./Radio"), exports);
+_export_star._(require("./Switch"), exports);
+_export_star._(require("./Textarea"), exports);
+_export_star._(require("./Toggle"), exports);
+_export_star._(require("./helpers"), exports);
+_export_star._(require("./styles"), exports);

package/Forms/styles.d.ts

@@ -1,10 +1,6 @@
-export declare const InputInvisible: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
-export declare const InputHoneypot: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
-    type: "text";
-    autoComplete: "new-password";
-    tabIndex: -1;
-}, "tabIndex" | "type" | "autoComplete">;
-export declare const InputProgress: import("styled-components").StyledComponent<(p: any) => import("react/jsx-runtime").JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export declare const InputInvisible: any;
+export declare const InputHoneypot: any;
+export declare const InputProgress: any;
 /**
  * Remove the default light blue background on autofilled inputs. To be used as
  * a function that outputs a CSS string.