@koine/react 2.0.0-beta.21 → 2.0.0-beta.23

package/typings.d.ts

@@ -1,99 +1,6 @@
-import "styled-components";
-
-// import type {} from "styled-components/cssprop"; // for `css` prop
-
-/**
- * Styled components utility types
- */
-type Theme = import("./styles/theme").Theme;
-
-declare module "styled-components" {
-  // extends the global DefaultTheme with our ThemeType.
-  export interface DefaultTheme extends Theme {
-    maxWidth: number;
-  }
-}
-
 /**
  * Types specifically related to `@koine/react` exposed on the global unique
  * namespace `Koine`. Most of the types here should be prefixed by `React`, e.g.
  * `ReactSomeFeature` accessible anywhere from `Koine.ReactSomeFeature`
  */
 declare namespace Koine {}
-
-/**
- * React Polymorphic components type utilities
- *
- * @resources
- * - [Polymorphic types from Radix UI in Wanda System](https://github.com/wonderflow-bv/wanda/blob/main/packages/react-components/src/types/polymorphic/index.ts)
- * - [TypeScript + React: Typing Generic forwardRefs](https://fettblog.eu/typescript-react-generic-forward-refs/)
- * - [React with Typescript -- Generics while using React.forwardRef](https://stackoverflow.com/a/58473012/1938970)
- * - [How to write a generic that extracts the prop types of the component that passed in](https://stackoverflow.com/a/57846897/1938970)
- * - [React TS Generic component to pass generic props to children](https://stackoverflow.com/a/68442669/1938970)
- * - [About custom ref prop](https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509)
- * - [forwardRef performance](https://github.com/facebook/react/issues/13456)
- * - [React docs: Exposing DOM Refs to Parent Components](https://github.com/facebook/react/issues/13456)
- */
-declare namespace Polymorphic {
-  type AsProp<TComponent extends React.ElementType> = {
-    as?: TComponent;
-  };
-
-  type ComponentTypes =
-    | React.ComponentClass<any>
-    | React.FunctionComponent<any>
-    | keyof JSX.IntrinsicElements;
-
-  type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2;
-
-  type ForwardRefExoticComponent<TComponent, TOwnProps> =
-    React.ForwardRefExoticComponent<
-      Merge<
-        TComponent extends React.ElementType
-          ? React.ComponentPropsWithRef<TComponent>
-          : never,
-        TOwnProps & { as?: TComponent }
-      >
-    >;
-
-  type InferProps<TComponent extends ComponentTypes> =
-    TComponent extends React.ComponentClass<infer Props>
-      ? Props
-      : TComponent extends React.FunctionComponent<infer Props>
-      ? Props
-      : TComponent extends React.ForwardRefExoticComponent<infer Props>
-      ? Props
-      : TComponent extends keyof JSX.IntrinsicElements
-      ? React.ComponentPropsWithoutRef<TComponent>
-      : never;
-
-  type Ref<TComponent extends React.ElementType> =
-    React.ComponentPropsWithRef<TComponent>["ref"];
-
-  type Props<
-    TComponent extends React.ElementType,
-    TProps = {}
-  > = /* Omit< */ InferProps<TComponent> /* , keyof Props> */ &
-    AsProp<TComponent> &
-    TProps;
-
-  type PropsWithRef<TComponent extends React.ElementType, TProps = {}> = Props<
-    TComponent,
-    TProps
-  > & {
-    ref?: Ref<TComponent>;
-  };
-
-  interface ComponentForwarded<TComponent, TProps = {}>
-    extends ForwardRefExoticComponent<TComponent, TProps> {
-    <As = TComponent>(
-      props: As extends ""
-        ? { as: keyof JSX.IntrinsicElements }
-        : As extends React.ComponentType<infer P>
-        ? Merge<P, TProps & { as: As }>
-        : As extends keyof JSX.IntrinsicElements
-        ? Merge<JSX.IntrinsicElements[As], TProps & { as: As }>
-        : never
-    ): React.ReactElement | null;
-  }
-}

package/useDateLocale.d.ts

@@ -1,2 +1,3 @@
-export declare function useDateLocale(locale?: string, defaultLocale?: string): globalThis.Locale | undefined;
+import type { Locale } from "date-fns";
+export declare function useDateLocale(locale?: string, defaultLocale?: string): Locale | undefined;
 export default useDateLocale;

package/useDateLocale.js

@@ -10,11 +10,11 @@ export function useDateLocale(locale, defaultLocale) {
             var localeToSet;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4, import("date-fns/locale/en-US/index.js")];
+                    case 0: return [4, import("date-fns/locale/en-US")];
                     case 1:
                         localeToSet = _a.sent();
                         setCurrent(locale || current);
-                        setData(localeToSet.default);
+                        setData(localeToSet.enUS);
                         return [2];
                 }
             });

package/useFixedOffset.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare function useFixedOffset(selector?: string): import("react").MutableRefObject<number>;
 export default useFixedOffset;

package/useFocus.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const useFocus: () => (import("react").RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | (() => void))[];
 export default useFocus;

package/useReveal.d.ts

@@ -0,0 +1,12 @@
+export type UseRevealOptions = {
+    direction?: "left" | "right";
+    offsetStartY?: number;
+    offsetEndY?: number;
+    offsetStartX?: number | "all";
+};
+export declare function useReveal<T extends HTMLElement = HTMLDivElement>({ direction, offsetStartY, offsetEndY, offsetStartX, }: UseRevealOptions): {
+    ref: import("react").RefObject<T>;
+    startY: number;
+    endY: number;
+    startX: number;
+};

package/useReveal.js

@@ -0,0 +1,43 @@
+import { __read } from "tslib";
+import { useEffect, useRef, useState } from "react";
+export function useReveal(_a) {
+    var _b = _a.direction, direction = _b === void 0 ? "left" : _b, _c = _a.offsetStartY, offsetStartY = _c === void 0 ? -2 : _c, _d = _a.offsetEndY, offsetEndY = _d === void 0 ? 0 : _d, _e = _a.offsetStartX, offsetStartX = _e === void 0 ? "all" : _e;
+    var ref = useRef(null);
+    var _f = __read(useState(0), 2), startY = _f[0], setStartY = _f[1];
+    var _g = __read(useState(0), 2), endY = _g[0], setEndY = _g[1];
+    var _h = __read(useState(0), 2), startX = _h[0], setStartX = _h[1];
+    useEffect(function () {
+        if (!ref.current) {
+            return;
+        }
+        var rect = ref.current.getBoundingClientRect();
+        var scrollTop = window.scrollY || document.documentElement.scrollTop;
+        var elementHeight = rect.height;
+        var elementTop = rect.top;
+        var distanceTop = elementTop + scrollTop;
+        var offsetTop = offsetStartY ? elementHeight * offsetStartY : 0;
+        var offsetBottom = offsetEndY ? elementHeight * offsetEndY : offsetTop;
+        var startY = (distanceTop + offsetTop) / document.body.clientHeight;
+        var endY = (distanceTop + elementHeight + offsetBottom) / document.body.clientHeight;
+        var startX;
+        if (offsetStartX === "all") {
+            startX = direction === "left" ? -rect.right : rect.left;
+        }
+        else {
+            startX = rect.width * offsetStartX;
+            startX = direction === "left" ? -startX : startX;
+        }
+        setStartY(startY);
+        setEndY(endY);
+        setStartX(startX);
+    }, [
+        setStartY,
+        setEndY,
+        setStartX,
+        offsetStartY,
+        offsetEndY,
+        offsetStartX,
+        direction,
+    ]);
+    return { ref: ref, startY: startY, endY: endY, startX: startX };
+}

package/useScrollPosition.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Position = {
     x: number;
     y: number;

package/useScrollTo.js

@@ -1,14 +1,11 @@
-import { __read } from "tslib";
 import { isBrowser } from "@koine/utils";
-import useHeader from "./Header/useHeader.js";
 export function useScrollTo(id, offset) {
     if (id === void 0) { id = ""; }
     if (offset === void 0) { offset = 0; }
-    var _a = __read(useHeader(), 3), headerHeight = _a[2];
     if (!isBrowser) {
         return;
     }
-    var headerOffset = headerHeight || 0;
+    var headerOffset = 0;
     var element = document.getElementById(id);
     var top = 0;
     if (element && element.offsetParent) {