@koine/react 2.0.0-beta.8 → 2.0.0-beta.80

package/createUseMediaQueryWidth.cjs.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var utils = require('@koine/utils');
+var useIsomorphicLayoutEffect = require('./useIsomorphicLayoutEffect.cjs.js');
+
+let createUseMediaQueryWidth = (customBreakpoints) => {
+    const queryResolvers = utils.getMediaQueryWidthResolvers(customBreakpoints);
+    return function useMediaQueryWidth(media, serverValue) {
+        const definition = media.substring(1);
+        let [rule, ruleBreakpoint] = definition.split("-");
+        if (utils.isUndefined(ruleBreakpoint)) {
+            ruleBreakpoint = rule;
+        }
+        if (utils.isUndefined(rule)) {
+            rule = "min";
+        }
+        const [br1, br2] = ruleBreakpoint.split("_");
+        const query = queryResolvers[rule](br1, br2);
+        const [matches, setMatches] = react.useState(utils.isUndefined(serverValue) ? null : serverValue);
+        useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+            const mq = window.matchMedia(query);
+            const handleChange = (event) => {
+                setMatches(event.matches);
+            };
+            setMatches(mq.matches);
+            if (!mq.addEventListener) {
+                mq.addListener(handleChange);
+                return () => {
+                    mq.removeListener(handleChange);
+                };
+            }
+            mq.addEventListener("change", handleChange);
+            return () => {
+                mq.removeEventListener("change", handleChange);
+            };
+        }, [query]);
+        return matches;
+    };
+};
+
+exports.createUseMediaQueryWidth = createUseMediaQueryWidth;
+exports["default"] = createUseMediaQueryWidth;

package/createUseMediaQueryWidth.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './createUseMediaQueryWidth.cjs.js';
+export { _default as default } from './createUseMediaQueryWidth.cjs.default.js';

package/createUseMediaQueryWidth.d.ts

@@ -0,0 +1,6 @@
+import { type GetMediaQueryWidthResolversBreakpoints } from "@koine/utils";
+type _MediaQuerWidthDefExplicit<TBreakpoint extends string> = `min-${TBreakpoint}` | `max-${TBreakpoint}` | `up-${TBreakpoint}` | `down-${TBreakpoint}` | `between-${TBreakpoint}_${TBreakpoint}` | `only-${TBreakpoint}`;
+export type MediaQuerWidthDef<TBreakpoint extends string> = `${TBreakpoint}` | _MediaQuerWidthDefExplicit<TBreakpoint>;
+export type MediaQueryWidth<TBreakpoint extends string> = `@${MediaQuerWidthDef<TBreakpoint>}`;
+export declare let createUseMediaQueryWidth: <TBreakpointsConfig extends GetMediaQueryWidthResolversBreakpoints>(customBreakpoints: TBreakpointsConfig) => <TBreakpoints extends Extract<keyof TBreakpointsConfig, string>>(media: `@${TBreakpoints}` | `@min-${TBreakpoints}` | `@max-${TBreakpoints}` | `@up-${TBreakpoints}` | `@down-${TBreakpoints}` | `@between-${TBreakpoints}_${TBreakpoints}` | `@only-${TBreakpoints}`, serverValue?: null | boolean) => boolean | null;
+export default createUseMediaQueryWidth;

package/createUseMediaQueryWidth.esm.js

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import { getMediaQueryWidthResolvers, isUndefined } from '@koine/utils';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.esm.js';
+
+let createUseMediaQueryWidth = (customBreakpoints) => {
+    const queryResolvers = getMediaQueryWidthResolvers(customBreakpoints);
+    return function useMediaQueryWidth(media, serverValue) {
+        const definition = media.substring(1);
+        let [rule, ruleBreakpoint] = definition.split("-");
+        if (isUndefined(ruleBreakpoint)) {
+            ruleBreakpoint = rule;
+        }
+        if (isUndefined(rule)) {
+            rule = "min";
+        }
+        const [br1, br2] = ruleBreakpoint.split("_");
+        const query = queryResolvers[rule](br1, br2);
+        const [matches, setMatches] = useState(isUndefined(serverValue) ? null : serverValue);
+        useIsomorphicLayoutEffect(() => {
+            const mq = window.matchMedia(query);
+            const handleChange = (event) => {
+                setMatches(event.matches);
+            };
+            setMatches(mq.matches);
+            if (!mq.addEventListener) {
+                mq.addListener(handleChange);
+                return () => {
+                    mq.removeListener(handleChange);
+                };
+            }
+            mq.addEventListener("change", handleChange);
+            return () => {
+                mq.removeEventListener("change", handleChange);
+            };
+        }, [query]);
+        return matches;
+    };
+};
+
+export { createUseMediaQueryWidth, createUseMediaQueryWidth as default };

package/extendComponent.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./extendComponent";
+export { default } from "./extendComponent";

package/extendComponent.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./extendComponent.cjs.js').default;

package/extendComponent.cjs.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+let extendComponent = (component, defaultProps) => {
+    const NewComponent = (props) => react.createElement(component, props);
+    return Object.assign(NewComponent, {
+        ...defaultProps,
+        defaultProps,
+    });
+};
+
+exports["default"] = extendComponent;
+exports.extendComponent = extendComponent;

package/extendComponent.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './extendComponent.cjs.js';
+export { _default as default } from './extendComponent.cjs.default.js';

package/{helpers/extend-component.d.ts → extendComponent.d.ts}

@@ -1,6 +1,5 @@
-import React from "react";
 export type ExtendableComponent<Props = any> = React.ForwardRefExoticComponent<Props> | React.ExoticComponent<Props> | React.FC<Props> | ((props: Props) => JSX.Element);
-export declare const extendComponent: <Component extends ExtendableComponent<any>, DefaultProps extends {}>(component: Component, defaultProps: DefaultProps) => ((props: React.ComponentProps<Component>) => React.FunctionComponentElement<any>) & DefaultProps & {
+export declare let extendComponent: <Component extends ExtendableComponent<any>, DefaultProps extends {}>(component: Component, defaultProps: DefaultProps) => ((props: import("react").ComponentProps<Component>) => import("react").FunctionComponentElement<any>) & DefaultProps & {
     defaultProps: DefaultProps;
 };
 export interface OverridableComponents {
@@ -10,17 +9,6 @@ export interface OverridableComponents {
         motionable?: boolean;
     };
 }
-/**
- * Type to define a component that has overridable components.
- *
- * Each of them can define its:
- * - `type`: either as a native HTMLElement (the props for that element will be
- * automatically inferred) or as a custom React component
- * - `props`: any additional custom props
- * - `motionable`: if that component has a possible implementation with `framer-motion`,
- * in that case we remove some HTMLAttributes props which collides with
- * `MotionProps` from framer.
- */
 export type WithComponents<Props, Components extends OverridableComponents> = Props & {
     [Name in keyof Components]: NonNullable<Components[Name]["type"] extends keyof JSX.IntrinsicElements ? React.ElementType<Components[Name]["motionable"] extends true ? Omit<React.ComponentPropsWithoutRef<Components[Name]["type"]>, HtmlAttributesCollidingWithMotionProps> & Components[Name]["props"] : React.ComponentPropsWithoutRef<Components[Name]["type"]> & Components[Name]["props"]> : Components[Name]["type"]>;
 };

package/extendComponent.esm.js

@@ -0,0 +1,11 @@
+import { createElement } from 'react';
+
+let extendComponent = (component, defaultProps) => {
+    const NewComponent = (props) => createElement(component, props);
+    return Object.assign(NewComponent, {
+        ...defaultProps,
+        defaultProps,
+    });
+};
+
+export { extendComponent as default, extendComponent };

package/forms/antispam.d.ts

@@ -0,0 +1,27 @@
+import { type ObjectShape } from "@kuus/yup";
+export declare let encodeForm: <T extends ObjectShape = {}>(validationRules: T) => {
+    encodedSchema: import("@kuus/yup").ObjectSchema<{
+        [x: string]: T[keyof T] extends import("@kuus/yup").ISchema<any, any, any, any> ? T[keyof T]["__outputType"] : T[keyof T] extends {
+            readonly key: string;
+            readonly isContext: boolean;
+            readonly isValue: boolean;
+            readonly isSibling: boolean;
+            readonly path: any;
+            readonly getter: (data: unknown) => unknown;
+            readonly map?: ((value: unknown) => infer T_1) | undefined;
+            readonly __isYupRef: boolean;
+            getValue(value: any, parent?: {} | undefined, context?: {} | undefined): infer T_1;
+            cast(value: any, options?: {
+                parent?: {} | undefined;
+                context?: {} | undefined;
+            } | undefined): infer T_1;
+            resolve(): any;
+            describe(): import("@kuus/yup").SchemaRefDescription;
+            toString(): string;
+        } ? T_1 : unknown;
+    }, import("@kuus/yup").AnyObject, {
+        [x: string]: T[keyof T] extends import("@kuus/yup").ISchema<any, import("@kuus/yup").AnyObject, any, any> ? T[keyof T]["__default"] : undefined;
+    }, "">;
+    encodedNames: Record<keyof T, string>;
+};
+export declare let decodeForm: <ReturnAs extends Record<string, unknown> = {}, FormData_1 extends Record<string, unknown> = {}>(formData: FormData_1) => ReturnAs;

package/forms.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./forms";

package/forms.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./forms.cjs.js').default;

package/forms.cjs.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var yup = require('@kuus/yup');
+var utils = require('@koine/utils');
+
+let encodeForm = (validationRules) => {
+    const encoded = {};
+    const encodedNames = {};
+    for (const name in validationRules) {
+        if (!name.startsWith("_")) {
+            const encodedName = utils.encode(name);
+            encoded[encodedName] = validationRules[name];
+            encodedNames[name] = encodedName;
+        }
+    }
+    const encodedSchema = yup.object(encoded).required();
+    return { encodedSchema, encodedNames };
+};
+let decodeForm = (formData) => {
+    const json = {};
+    for (const encodedName in formData) {
+        const decodedName = utils.decode(encodedName);
+        if (encodedName.startsWith("_")) {
+            json[encodedName.substring(1)] = formData[encodedName];
+        }
+        else if (!utils.isUndefined(formData[encodedName]) &&
+            formData[decodedName] === "") {
+            json[decodedName] = formData[encodedName];
+        }
+    }
+    return json;
+};
+
+exports.decodeForm = decodeForm;
+exports.encodeForm = encodeForm;

package/forms.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './forms.cjs.js';
+export { _default as default } from './forms.cjs.default.js';

package/forms.d.ts

@@ -0,0 +1 @@
+export * from "./forms/antispam";

package/forms.esm.js

@@ -0,0 +1,32 @@
+import { object } from '@kuus/yup';
+import { encode, decode, isUndefined } from '@koine/utils';
+
+let 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;
+        }
+    }
+    const encodedSchema = object(encoded).required();
+    return { encodedSchema, encodedNames };
+};
+let decodeForm = (formData) => {
+    const json = {};
+    for (const encodedName in formData) {
+        const decodedName = decode(encodedName);
+        if (encodedName.startsWith("_")) {
+            json[encodedName.substring(1)] = formData[encodedName];
+        }
+        else if (!isUndefined(formData[encodedName]) &&
+            formData[decodedName] === "") {
+            json[decodedName] = formData[encodedName];
+        }
+    }
+    return json;
+};
+
+export { decodeForm, encodeForm };

package/index.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./index";

package/index.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./index.cjs.js').default;

package/index.cjs.js

@@ -0,0 +1,63 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var classed = require('./classed.cjs.js');
+var createUseMediaQueryWidth = require('./createUseMediaQueryWidth.cjs.js');
+var extendComponent = require('./extendComponent.cjs.js');
+var FaviconTags = require('./FaviconTags.cjs.js');
+var mergeRefs = require('./mergeRefs.cjs.js');
+var Meta = require('./Meta.cjs.js');
+var NoJs = require('./NoJs.cjs.js');
+var useAsyncFn = require('./useAsyncFn.cjs.js');
+var useFirstMountState = require('./useFirstMountState.cjs.js');
+var useFixedOffset = require('./useFixedOffset.cjs.js');
+var useFocus = require('./useFocus.cjs.js');
+var useInterval = require('./useInterval.cjs.js');
+var useIsomorphicLayoutEffect = require('./useIsomorphicLayoutEffect.cjs.js');
+var useKeyUp = require('./useKeyUp.cjs.js');
+var useMeasure = require('./useMeasure.cjs.js');
+var useMountedState = require('./useMountedState.cjs.js');
+var useNavigateAway = require('./useNavigateAway.cjs.js');
+var usePrevious = require('./usePrevious.cjs.js');
+var usePreviousRef = require('./usePreviousRef.cjs.js');
+var useScrollPosition = require('./useScrollPosition.cjs.js');
+var useScrollThreshold = require('./useScrollThreshold.cjs.js');
+var useSmoothScroll = require('./useSmoothScroll.cjs.js');
+var useSpinDelay = require('./useSpinDelay.cjs.js');
+var useTraceUpdate = require('./useTraceUpdate.cjs.js');
+var useUpdateEffect = require('./useUpdateEffect.cjs.js');
+var useWindowSize = require('./useWindowSize.cjs.js');
+require('react');
+require('@koine/utils');
+require('react/jsx-runtime');
+require('@koine/dom');
+
+
+
+exports.classed = classed.classed;
+exports.createUseMediaQueryWidth = createUseMediaQueryWidth.createUseMediaQueryWidth;
+exports.extendComponent = extendComponent.extendComponent;
+exports.FaviconTags = FaviconTags.FaviconTags;
+exports.mergeRefs = mergeRefs.mergeRefs;
+exports.Meta = Meta.Meta;
+exports.NoJs = NoJs.NoJs;
+exports.useAsyncFn = useAsyncFn.useAsyncFn;
+exports.useFirstMountState = useFirstMountState.useFirstMountState;
+exports.useFixedOffset = useFixedOffset.useFixedOffset;
+exports.useFocus = useFocus.useFocus;
+exports.useInterval = useInterval.useInterval;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect.useIsomorphicLayoutEffect;
+exports.useKeyUp = useKeyUp.useKeyUp;
+exports.useMeasure = useMeasure.useMeasure;
+exports.useMountedState = useMountedState.useMountedState;
+exports.useNavigateAway = useNavigateAway.useNavigateAway;
+exports.usePrevious = usePrevious.usePrevious;
+exports.usePreviousRef = usePreviousRef.usePreviousRef;
+exports.useScrollPosition = useScrollPosition.useScrollPosition;
+exports.useScrollThreshold = useScrollThreshold.useScrollThreshold;
+exports.useSmoothScroll = useSmoothScroll.useSmoothScroll;
+exports.useSpinDelay = useSpinDelay.useSpinDelay;
+exports.useTraceUpdate = useTraceUpdate.useTraceUpdate;
+exports.useUpdateEffect = useUpdateEffect.useUpdateEffect;
+exports.useWindowSize = useWindowSize.useWindowSize;

package/index.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './index.cjs.js';
+export { _default as default } from './index.cjs.default.js';

package/index.d.ts

@@ -1 +1,28 @@
-export * from "./shared";
+export { classed } from "./classed";
+export { createUseMediaQueryWidth, type MediaQuerWidthDef, type MediaQueryWidth, } from "./createUseMediaQueryWidth";
+export { type ExtendableComponent, type OverridableComponents, type WithComponents, extendComponent, } from "./extendComponent";
+export { FaviconTags, type FaviconTagsProps } from "./FaviconTags";
+export { mergeRefs } from "./mergeRefs";
+export { Meta, type MetaProps } from "./Meta";
+export { NoJs, type NoJsProps } from "./NoJs";
+export type { Polymorphic } from "./Polymorphic";
+export { useAsyncFn, type UseAsyncFnReturn, type UseAsyncState, } from "./useAsyncFn";
+export { useFirstMountState } from "./useFirstMountState";
+export { useFixedOffset } from "./useFixedOffset";
+export { useFocus } from "./useFocus";
+export { useInterval } from "./useInterval";
+export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
+export { useKeyUp } from "./useKeyUp";
+export { useMeasure, type UseMeasureOptions, type UseMeasureReturn, } from "./useMeasure";
+export { useMountedState } from "./useMountedState";
+export { useNavigateAway, type UseNavigateAwayHandler, } from "./useNavigateAway";
+export { usePrevious } from "./usePrevious";
+export { usePreviousRef } from "./usePreviousRef";
+export { useScrollPosition } from "./useScrollPosition";
+export { useScrollThreshold } from "./useScrollThreshold";
+export { useSmoothScroll } from "./useSmoothScroll";
+export { useSpinDelay } from "./useSpinDelay";
+export { useTraceUpdate } from "./useTraceUpdate";
+export { useUpdateEffect } from "./useUpdateEffect";
+export { useWindowSize } from "./useWindowSize";
+export type { KoineComponentProps, KoineComponent } from "./types";

package/index.esm.js

@@ -0,0 +1,30 @@
+export { classed } from './classed.esm.js';
+export { createUseMediaQueryWidth } from './createUseMediaQueryWidth.esm.js';
+export { extendComponent } from './extendComponent.esm.js';
+export { FaviconTags } from './FaviconTags.esm.js';
+export { mergeRefs } from './mergeRefs.esm.js';
+export { Meta } from './Meta.esm.js';
+export { NoJs } from './NoJs.esm.js';
+export { useAsyncFn } from './useAsyncFn.esm.js';
+export { useFirstMountState } from './useFirstMountState.esm.js';
+export { useFixedOffset } from './useFixedOffset.esm.js';
+export { useFocus } from './useFocus.esm.js';
+export { useInterval } from './useInterval.esm.js';
+export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.esm.js';
+export { useKeyUp } from './useKeyUp.esm.js';
+export { useMeasure } from './useMeasure.esm.js';
+export { useMountedState } from './useMountedState.esm.js';
+export { useNavigateAway } from './useNavigateAway.esm.js';
+export { usePrevious } from './usePrevious.esm.js';
+export { usePreviousRef } from './usePreviousRef.esm.js';
+export { useScrollPosition } from './useScrollPosition.esm.js';
+export { useScrollThreshold } from './useScrollThreshold.esm.js';
+export { useSmoothScroll } from './useSmoothScroll.esm.js';
+export { useSpinDelay } from './useSpinDelay.esm.js';
+export { useTraceUpdate } from './useTraceUpdate.esm.js';
+export { useUpdateEffect } from './useUpdateEffect.esm.js';
+export { useWindowSize } from './useWindowSize.esm.js';
+import 'react';
+import '@koine/utils';
+import 'react/jsx-runtime';
+import '@koine/dom';

package/mergeRefs.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./mergeRefs";
+export { default } from "./mergeRefs";

package/mergeRefs.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./mergeRefs.cjs.js').default;

package/mergeRefs.cjs.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+let mergeRefs = (refs) => {
+    return (value) => {
+        refs.forEach((ref) => {
+            if (typeof ref === "function") {
+                ref(value);
+            }
+            else if (ref != null) {
+                ref.current = value;
+            }
+        });
+    };
+};
+
+exports["default"] = mergeRefs;
+exports.mergeRefs = mergeRefs;

package/mergeRefs.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './mergeRefs.cjs.js';
+export { _default as default } from './mergeRefs.cjs.default.js';

package/mergeRefs.d.ts

@@ -0,0 +1,2 @@
+export declare let mergeRefs: <T = Element>(refs: (import("react").MutableRefObject<T> | import("react").LegacyRef<T>)[]) => (instance: T | null) => void;
+export default mergeRefs;

package/mergeRefs.esm.js

@@ -0,0 +1,14 @@
+let mergeRefs = (refs) => {
+    return (value) => {
+        refs.forEach((ref) => {
+            if (typeof ref === "function") {
+                ref(value);
+            }
+            else if (ref != null) {
+                ref.current = value;
+            }
+        });
+    };
+};
+
+export { mergeRefs as default, mergeRefs };