@koine/react 1.0.13 → 1.0.16

package/Details/Details.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type WithComponents, type Simplify } from "../helpers";
-export declare type OwnProps = React.ComponentProps<"details"> & {
+export declare type OwnProps = React.ComponentPropsWithoutRef<"details"> & {
     open?: boolean;
     onChange?: () => any;
     summary: null | React.ReactNode;
@@ -16,7 +16,7 @@ export declare type OwnProps = React.ComponentProps<"details"> & {
 export declare type Components = {
     Root: {
         type: "details";
-        props: React.PropsWithChildren<{}>;
+        props: {};
     };
     Summary: {
         type: "summary";
@@ -47,9 +47,7 @@ export declare type ComponentsProps = {
 export declare type Props = Simplify<WithComponents<OwnProps, Components>>;
 export declare type DetailsProps = Props;
 export declare type KoineDetailsProps = Props;
-export declare const Root: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "key" | keyof import("react").DetailsHTMLAttributes<HTMLDetailsElement>> & {
-    children?: import("react").ReactNode;
-}>;
+export declare const Root: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "key" | keyof import("react").DetailsHTMLAttributes<HTMLDetailsElement>>>;
 export declare const Summary: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "key" | keyof import("react").HTMLAttributes<HTMLElement>> & {
     $open: OwnProps["open"];
 } & Pick<OwnProps, "onChange"> & {
@@ -67,10 +65,8 @@ export declare const Content: import("react").ElementType<Omit<Pick<import("reac
 } & Pick<OwnProps, "onChange"> & {
     children?: import("react").ReactNode;
 }>;
-export declare const KoineDetails: ((props: Pick<Simplify<WithComponents<OwnProps, Components>>, "key" | "summary" | keyof import("react").DetailsHTMLAttributes<HTMLDetailsElement> | "ariaExpand" | "ariaCollapse" | "recalc" | keyof Components> & import("react").RefAttributes<HTMLDivElement>) => import("react").FunctionComponentElement<any>) & {
-    Root: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "key" | keyof import("react").DetailsHTMLAttributes<HTMLDetailsElement>> & {
-        children?: import("react").ReactNode;
-    }>;
+export declare const KoineDetails: ((props: Simplify<WithComponents<OwnProps, Components>> & import("react").RefAttributes<HTMLDetailsElement>) => import("react").FunctionComponentElement<any>) & {
+    Root: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "key" | keyof import("react").DetailsHTMLAttributes<HTMLDetailsElement>>>;
     Summary: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "key" | keyof import("react").HTMLAttributes<HTMLElement>> & {
         $open: OwnProps["open"];
     } & Pick<OwnProps, "onChange"> & {
@@ -90,9 +86,7 @@ export declare const KoineDetails: ((props: Pick<Simplify<WithComponents<OwnProp
     }>;
 } & {
     defaultProps: {
-        Root: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "key" | keyof import("react").DetailsHTMLAttributes<HTMLDetailsElement>> & {
-            children?: import("react").ReactNode;
-        }>;
+        Root: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "key" | keyof import("react").DetailsHTMLAttributes<HTMLDetailsElement>>>;
         Summary: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "key" | keyof import("react").HTMLAttributes<HTMLElement>> & {
             $open: OwnProps["open"];
         } & Pick<OwnProps, "onChange"> & {

package/hooks/useScrollPosition.d.ts

@@ -11,5 +11,5 @@ declare type ElementRef = React.MutableRefObject<HTMLElement | undefined>;
  * - reused internal helper functions
  * - compacted object arguments in functions as plain argument list to improve compression
  */
-export declare const useScrollPosition: (effect: (currentPosition: Position, prevPosition: Position) => void, deps?: import("react").DependencyList, element?: ElementRef | undefined, useWindow?: boolean | undefined, wait?: number | undefined, boundingElement?: ElementRef | undefined) => void;
+export declare const useScrollPosition: (effect: (currentPosition: Position, prevPosition: Position) => void, deps?: import("react").DependencyList, element?: ElementRef, useWindow?: boolean, wait?: number, boundingElement?: ElementRef) => void;
 export {};

package/node/Alert/Alert.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Alert = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var AlertRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  font-size: 12px;\n  ", "\n"], ["\n  font-size: 12px;\n  ", "\n"])), function (p) { return (p.$danger ? "color: var(--danger)" : ""); });
+var AlertInner = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  padding: 1em;\n  background-color: rgba(0, 0, 0, 0.05);\n  /* border: 1px solid var(--grey700); */\n  /* background: pink; */\n  /* color: red; */\n"], ["\n  padding: 1em;\n  background-color: rgba(0, 0, 0, 0.05);\n  /* border: 1px solid var(--grey700); */\n  /* background: pink; */\n  /* color: red; */\n"])));
+var Alert = function (_a) {
+    var $danger = _a.$danger, children = _a.children, props = tslib_1.__rest(_a, ["$danger", "children"]);
+    return ((0, jsx_runtime_1.jsx)(AlertRoot, tslib_1.__assign({ "$danger": $danger }, props, { children: (0, jsx_runtime_1.jsx)(AlertInner, { children: children }) })));
+};
+exports.Alert = Alert;
+var templateObject_1, templateObject_2;

package/node/Alert/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Alert"), exports);

package/node/Animations/Reveal.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Reveal = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var framer_motion_1 = require("framer-motion");
+var useReveal_1 = require("./useReveal");
+var Reveal = function (_a) {
+    var children = _a.children, direction = _a.direction, offsetStartY = _a.offsetStartY, offsetEndY = _a.offsetEndY, offsetStartX = _a.offsetStartX, props = tslib_1.__rest(_a, ["children", "direction", "offsetStartY", "offsetEndY", "offsetStartX"]);
+    var effectOptions = { direction: direction, offsetStartY: offsetStartY, offsetEndY: offsetEndY, offsetStartX: offsetStartX };
+    var prefersReducedMotion = (0, framer_motion_1.useReducedMotion)();
+    var _b = (0, useReveal_1.useReveal)(effectOptions), ref = _b.ref, startY = _b.startY, endY = _b.endY, startX = _b.startX;
+    var scrollYProgress = (0, framer_motion_1.useViewportScroll)().scrollYProgress;
+    var xRange = (0, framer_motion_1.useTransform)(scrollYProgress, [startY, endY], [startX, 0]);
+    var opacityRange = (0, framer_motion_1.useTransform)(scrollYProgress, [startY, endY], [0, 1]);
+    var x = (0, framer_motion_1.useSpring)(xRange, { stiffness: 400, damping: 90 });
+    var opacity = (0, framer_motion_1.useSpring)(opacityRange);
+    // console.log("start, end", startY, endY)
+    return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, tslib_1.__assign({}, props, { ref: ref, style: prefersReducedMotion ? {} : { x: x, opacity: opacity } }, { children: children })));
+};
+exports.Reveal = Reveal;

package/node/Animations/Underline.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UnderlineSkewed = void 0;
+var tslib_1 = require("tslib");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var framer_motion_1 = require("framer-motion");
+exports.UnderlineSkewed = (0, styled_components_1.default)(framer_motion_1.m.i)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: block;\n  position: absolute;\n  top: 50%;\n  left: 15%;\n  right: 15%;\n  height: 20px;\n  margin-top: -10px;\n  z-index: 0;\n  pointer-events: none;\n  background: var(--accent400);\n  transform: skewY(-5deg);\n"], ["\n  display: block;\n  position: absolute;\n  top: 50%;\n  left: 15%;\n  right: 15%;\n  height: 20px;\n  margin-top: -10px;\n  z-index: 0;\n  pointer-events: none;\n  background: var(--accent400);\n  transform: skewY(-5deg);\n"])));
+var templateObject_1;

package/node/Animations/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Reveal"), exports);
+tslib_1.__exportStar(require("./Underline"), exports);
+tslib_1.__exportStar(require("./useReveal"), exports);

package/node/Animations/useReveal.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useReveal = void 0;
+var react_1 = require("react");
+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 = (0, react_1.useRef)(null);
+    var _f = (0, react_1.useState)(0), startY = _f[0], setStartY = _f[1];
+    var _g = (0, react_1.useState)(0), endY = _g[0], setEndY = _g[1];
+    var _h = (0, react_1.useState)(0), startX = _h[0], setStartX = _h[1];
+    (0, react_1.useEffect)(function () {
+        if (!ref.current) {
+            return;
+        }
+        var rect = ref.current.getBoundingClientRect();
+        // scroll position from top of the window
+        var scrollTop = window.scrollY || document.documentElement.scrollTop;
+        var elementHeight = rect.height;
+        // rect.top is the distance from the currently visible viewport to the top
+        // of the given element
+        // so distanceTop is the distance between the top edge of the window and the
+        // top edge of the given element
+        var elementTop = rect.top;
+        var distanceTop = elementTop + scrollTop;
+        var offsetTop = offsetStartY ? elementHeight * offsetStartY : 0;
+        var offsetBottom = offsetEndY ? elementHeight * offsetEndY : offsetTop;
+        // the distance of the element from the top divided by the full height
+        // of the window gives back the start position of the given element in
+        // a scale from 0 to 1
+        var startY = (distanceTop + offsetTop) / document.body.clientHeight;
+        // same for the end, we just add the given element height to the first value
+        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;
+        }
+        // addMarker(startY + "px");
+        // addMarker(endY + "px");
+        // console.log("start", startY, "end", endY, "startX", startX)
+        setStartY(startY);
+        setEndY(endY);
+        setStartX(startX);
+        // addMarker(startY * 100 + "%", "blue", "fixed");
+        // addMarker(endY * 100 + "%", "blue", "fixed");
+    }, [
+        setStartY,
+        setEndY,
+        setStartX,
+        offsetStartY,
+        offsetEndY,
+        offsetStartX,
+        direction,
+    ]);
+    return { ref: ref, startY: startY, endY: endY, startX: startX };
+}
+exports.useReveal = useReveal;
+// function addMarker(top: string, color = "red", position = "absolute") {
+//   const div = document.createElement("div");
+//   div.setAttribute(
+//     "style",
+//     `
+//     position: ${position};
+//     top: ${top};
+//     left: 0;
+//     right: 0;
+//     height: 1px;
+//     background: ${color};
+//   `
+//   );
+//   document.body.appendChild(div);
+// }

package/node/Autocomplete/AutocompleteDownshift.js

@@ -0,0 +1,161 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Autocomplete = void 0;
+// TODO: remove, just use mui version...
+exports.Autocomplete = null;
+// import {
+//   forwardRef,
+//   useCallback,
+//   useState,
+//   ForwardedRef,
+//   ReactNode,
+//   ComponentPropsWithRef,
+//   CSSProperties,
+// } from "react";
+// import { useCombobox } from "downshift";
+// import { SetRequired } from "@koine/utils";
+// // import debounce from "lodash.debounce";
+// import {
+//   AutocompleteRoot,
+//   AutocompleteLabel,
+//   AutocompleteInputWrap,
+//   AutocompleteInput,
+//   AutocompleteInputArrow,
+//   AutocompleteMenu,
+//   AutocompleteMenuItem,
+// } from "./components";
+// import { defaultOptionsFilterFn, triggerOnChange } from "../Forms/helpers";
+// import { InputProgress } from "../Forms/styles";
+// export type AutocompleteOption = Option;
+// export type AutocompleteValue = null | AutocompleteOption;
+// export type AutocompleteProps = SetRequired<
+//   Omit<ComponentPropsWithRef<"input">, "onSelect">,
+//   "onChange" | "name"
+// > & {
+//   freeSolo?: boolean;
+//   onSelect?: (option?: AutocompleteValue) => any;
+//   options?: AutocompleteOption[];
+//   loadOptions: (query?: string) => Promise<AutocompleteOption[]>;
+//   label?: string | ReactNode;
+//   className?: string;
+//   style?: CSSProperties;
+//   $ref: ForwardedRef<HTMLInputElement>;
+// };
+// export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
+//   function Autocomplete(
+//     {
+//       freeSolo,
+//       onSelect,
+//       options = [],
+//       label,
+//       name,
+//       value,
+//       onChange,
+//       loadOptions,
+//       className,
+//       style,
+//       $ref,
+//       ...props
+//     },
+//     ref
+//   ) {
+//     const [items, setItems] = useState(options);
+//     const [loading, setLoading] = useState(false);
+//     const triggerChange = useCallback(
+//       (selectedItem?: AutocompleteValue, inputValue?: string) => {
+//         const value = freeSolo ? inputValue : selectedItem?.value;
+//         triggerOnChange(onChange, name, value || "");
+//         if (onSelect) onSelect(selectedItem);
+//       },
+//       [onChange, onSelect, name, freeSolo]
+//     );
+//     const handleInputValueChange = useCallback(
+//       async ({ inputValue }) => {
+//         if (inputValue) {
+//           if (loadOptions) {
+//             setLoading(true);
+//             try {
+//               const newOptions = await loadOptions(inputValue);
+//               setItems(newOptions);
+//             } catch (e) {}
+//             setLoading(false);
+//           } else {
+//             setItems(defaultOptionsFilterFn(options, inputValue));
+//           }
+//         } else {
+//           setItems(options);
+//           // clear like behaviour
+//           triggerChange({ value: "", label: "" });
+//         }
+//       },
+//       [loadOptions, triggerChange]
+//     );
+//     const {
+//       isOpen,
+//       // selectedItem,
+//       getToggleButtonProps,
+//       getLabelProps,
+//       getMenuProps,
+//       getInputProps,
+//       getComboboxProps,
+//       highlightedIndex,
+//       getItemProps,
+//       openMenu,
+//     } = useCombobox<null | AutocompleteOption>({
+//       id: `Autocomplete-${name}`,
+//       items,
+//       // initialInputValue: value,
+//       onSelectedItemChange: ({ selectedItem, inputValue }) => {
+//         triggerChange(selectedItem, inputValue);
+//       },
+//       // itemToString: (item) => (item ? item.label || item.value : ""),
+//       onInputValueChange: handleInputValueChange,
+//     });
+//     // const debouncedInputValueChangeHandler = useCallback(
+//     //   debounce(handleInputValueChange, 200),
+//     //   [handleInputValueChange]
+//     // );
+//     return (
+//       <AutocompleteRoot className={className} style={style}>
+//         {label && (
+//           <AutocompleteLabel {...getLabelProps()}>{label}</AutocompleteLabel>
+//         )}
+//         <AutocompleteInputWrap {...getComboboxProps()}>
+//           <AutocompleteInput
+//             {...getInputProps({
+//               onFocus: openMenu,
+//               onClick: openMenu,
+//               ref: $ref || ref,
+//               // itemRef: ref,
+//             })}
+//             {...props}
+//           />
+//           {!!items.length && (
+//             <AutocompleteInputArrow
+//               {...getToggleButtonProps()}
+//               aria-label={"toggle menu"}
+//             />
+//           )}
+//           {loading && <InputProgress />}
+//         </AutocompleteInputWrap>
+//         <AutocompleteMenu {...getMenuProps()}>
+//           {isOpen &&
+//             items
+//               // .filter(item => !inputValue || item.includes(inputValue))
+//               .map(
+//                 (item, index) =>
+//                   item && (
+//                     <AutocompleteMenuItem
+//                       $active={highlightedIndex === index}
+//                       key={`${item.value}${index}`}
+//                       {...getItemProps({ item, index })}
+//                     >
+//                       {item.label}
+//                     </AutocompleteMenuItem>
+//                   )
+//               )}
+//         </AutocompleteMenu>
+//       </AutocompleteRoot>
+//     );
+//   }
+// );