@koine/react 2.0.0-beta.14 → 2.0.0-beta.16

package/createUseMediaQueryWidth.js

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

package/css/index.d.ts

@@ -1,2 +1 @@
-export * from "../shared";
-export { KoineDialog } from "../Dialog/css/bare";
+export { KoineDialog } from "../Dialog/css/bare.js";

package/css/index.js

@@ -0,0 +1 @@
+export { KoineDialog } from "../Dialog/css/bare.js";

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

@@ -10,17 +10,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.js

@@ -0,0 +1,9 @@
+import { __assign } from "tslib";
+import { createElement } from "react";
+export var extendComponent = function (component, defaultProps) {
+    var NewComponent = function (props) {
+        return createElement(component, props);
+    };
+    return Object.assign(NewComponent, __assign(__assign({}, defaultProps), { defaultProps: defaultProps }));
+};
+export default extendComponent;

package/index.d.ts

@@ -1 +1,25 @@
-export * from "./shared";
+export { classed } from "./classed.js";
+export { createUseMediaQueryWidth, type MediaQuerWidthDef, type MediaQueryWidth, } from "./createUseMediaQueryWidth.js";
+export { type ExtendableComponent, type OverridableComponents, type WithComponents, extendComponent, } from "./extendComponent.js";
+export { mergeRefs } from "./mergeRefs.js";
+export { useAsyncFn, type UseAsyncFnReturn, type UseAsyncState, } from "./useAsyncFn.js";
+export { useDateLocale } from "./useDateLocale.js";
+export { useFirstMountState } from "./useFirstMountState.js";
+export { useFixedOffset } from "./useFixedOffset.js";
+export { useFocus } from "./useFocus.js";
+export { useInterval } from "./useInterval.js";
+export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
+export { useKeyUp } from "./useKeyUp.js";
+export { useMeasure, type UseMeasureOptions, type UseMeasureReturn, } from "./useMeasure.js";
+export { useMountedState } from "./useMountedState.js";
+export { useNavigateAway, type UseNavigateAwayHandler, } from "./useNavigateAway.js";
+export { usePrevious } from "./usePrevious.js";
+export { usePreviousRef } from "./usePreviousRef.js";
+export { useScrollPosition } from "./useScrollPosition.js";
+export { useScrollThreshold } from "./useScrollThreshold.js";
+export { useSmoothScroll } from "./useSmoothScroll.js";
+export { useSpinDelay } from "./useSpinDelay.js";
+export { useTraceUpdate } from "./useTraceUpdate.js";
+export { useUpdateEffect } from "./useUpdateEffect.js";
+export { useWindowSize } from "./useWindowSize.js";
+export type { Translate, Option } from "./types.js";

package/index.js

@@ -0,0 +1,24 @@
+export { classed } from "./classed.js";
+export { createUseMediaQueryWidth, } from "./createUseMediaQueryWidth.js";
+export { extendComponent, } from "./extendComponent.js";
+export { mergeRefs } from "./mergeRefs.js";
+export { useAsyncFn, } from "./useAsyncFn.js";
+export { useDateLocale } from "./useDateLocale.js";
+export { useFirstMountState } from "./useFirstMountState.js";
+export { useFixedOffset } from "./useFixedOffset.js";
+export { useFocus } from "./useFocus.js";
+export { useInterval } from "./useInterval.js";
+export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
+export { useKeyUp } from "./useKeyUp.js";
+export { useMeasure, } from "./useMeasure.js";
+export { useMountedState } from "./useMountedState.js";
+export { useNavigateAway, } from "./useNavigateAway.js";
+export { usePrevious } from "./usePrevious.js";
+export { usePreviousRef } from "./usePreviousRef.js";
+export { useScrollPosition } from "./useScrollPosition.js";
+export { useScrollThreshold } from "./useScrollThreshold.js";
+export { useSmoothScroll } from "./useSmoothScroll.js";
+export { useSpinDelay } from "./useSpinDelay.js";
+export { useTraceUpdate } from "./useTraceUpdate.js";
+export { useUpdateEffect } from "./useUpdateEffect.js";
+export { useWindowSize } from "./useWindowSize.js";

package/m/MotionProvider.d.ts

@@ -2,37 +2,5 @@
 import { type LazyProps } from "framer-motion";
 export type MotionProviderFeatures = LazyProps["features"];
 export type MotionProviderProps = LazyProps & React.PropsWithChildren<{}>;
-/**
- * `<LazyMotion />` provider wrapper from `framer-motion`
- *
- * @see https://www.framer.com/docs/guide-reduce-bundle-size/
- *
- * About the difference between `lite` and `max`
- * @see https://www.framer.com/docs/guide-reduce-bundle-size/#available-features
- *
- * @example
- *
- * `lite` version:
- * ```tsx
- * import { MotionProvider } from "@koine/react/m";
- *
- * const features = () => import("@koine/react/m/lite").then((m) => m.default);
- *
- * <MotionProvider features={features}>
- *   <App />
- * </MotionProvider>
- * ```
- *
- * ### `max` version
- * ```tsx
- * import { MotionProvider } from "@koine/react/m";
- *
- * const features = () => import("@koine/react/m/max").then((m) => m.default);
- *
- * <MotionProvider features={features}>
- *   <App />
- * </MotionProvider>
- * ```
- */
 export declare const MotionProvider: ({ features, children }: MotionProviderProps) => import("react/jsx-runtime").JSX.Element;
 export default MotionProvider;

package/m/MotionProvider.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LazyMotion } from "framer-motion";
+export var MotionProvider = function (_a) {
+    var features = _a.features, children = _a.children;
+    return _jsx(LazyMotion, { features: features, children: children });
+};
+export default MotionProvider;

package/m/index.d.ts

@@ -1,6 +1 @@
-/**
- * @file
- *
- * In this file we only have exports related to `framer-motion`
- */
-export * from "./MotionProvider";
+export * from "./MotionProvider.js";

package/m/index.js

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

package/{helpers/mergeRefs.mjs → mergeRefs.js}

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