@helpwave/hightide 0.0.13 → 0.0.16

package/dist/components/user-input/Menu.mjs

@@ -0,0 +1,127 @@
+// src/components/user-input/Menu.tsx
+import { useRef } from "react";
+import clsx from "clsx";
+
+// src/hooks/useOutsideClick.ts
+import { useEffect } from "react";
+var useOutsideClick = (refs, handler) => {
+  useEffect(() => {
+    const listener = (event) => {
+      if (event.target === null) return;
+      if (refs.some((ref) => !ref.current || ref.current.contains(event.target))) {
+        return;
+      }
+      handler();
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [refs, handler]);
+};
+
+// src/hooks/useHoverState.ts
+import { useEffect as useEffect2, useState } from "react";
+var defaultUseHoverStateProps = {
+  closingDelay: 200,
+  isDisabled: false
+};
+var useHoverState = (props = void 0) => {
+  const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
+  const [isHovered, setIsHovered] = useState(false);
+  const [timer, setTimer] = useState();
+  const onMouseEnter = () => {
+    if (isDisabled) {
+      return;
+    }
+    clearTimeout(timer);
+    setIsHovered(true);
+  };
+  const onMouseLeave = () => {
+    if (isDisabled) {
+      return;
+    }
+    setTimer(setTimeout(() => {
+      setIsHovered(false);
+    }, closingDelay));
+  };
+  useEffect2(() => {
+    if (timer) {
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  });
+  useEffect2(() => {
+    if (timer) {
+      clearTimeout(timer);
+    }
+  }, [isDisabled]);
+  return {
+    isHovered,
+    setIsHovered,
+    handlers: { onMouseEnter, onMouseLeave }
+  };
+};
+
+// src/components/user-input/Menu.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var MenuItem = ({
+  children,
+  onClick,
+  alignment = "left",
+  className
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: clsx("block px-3 py-1 bg-menu-background text-menu-text hover:brightness-90", {
+      "text-right": alignment === "right",
+      "text-left": alignment === "left"
+    }, className),
+    onClick,
+    children
+  }
+);
+var Menu = ({
+  trigger,
+  children,
+  alignment = "tl",
+  showOnHover = false,
+  menuClassName = ""
+}) => {
+  const { isHovered: isOpen, setIsHovered: setIsOpen, handlers } = useHoverState({ isDisabled: !showOnHover });
+  const triggerRef = useRef(null);
+  const menuRef = useRef(null);
+  useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative",
+      ...handlers,
+      children: [
+        trigger(() => setIsOpen(!isOpen), triggerRef),
+        isOpen ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: menuRef,
+            onClick: (e) => e.stopPropagation(),
+            className: clsx("absolute top-full mt-1 py-2 w-60 rounded-lg bg-menu-background text-menu-text ring-1 ring-slate-900/5 text-sm leading-6 font-semibold shadow-md z-[1]", {
+              "    top-[8px]": alignment[0] === "t",
+              " bottom-[8px]": alignment[0] === "b",
+              "  left-[-8px]": alignment[1] === "l",
+              " right-[-8px]": alignment[1] === "r"
+            }, menuClassName),
+            children
+          }
+        ) : null
+      ]
+    }
+  );
+};
+export {
+  Menu,
+  MenuItem
+};
+//# sourceMappingURL=Menu.mjs.map

package/dist/components/user-input/Menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/user-input/Menu.tsx","../../../src/hooks/useOutsideClick.ts","../../../src/hooks/useHoverState.ts"],"sourcesContent":["import { useRef, type PropsWithChildren, type ReactNode, type RefObject } from 'react'\nimport clsx from 'clsx'\nimport { useOutsideClick } from '../../hooks/useOutsideClick'\nimport { useHoverState } from '../../hooks/useHoverState'\n\ntype MenuProps<T> = PropsWithChildren<{\n  trigger: (onClick: () => void, ref: RefObject<T>) => ReactNode,\n  /**\n   * @default 'tl'\n   */\n  alignment?: 'tl' | 'tr' | 'bl' | 'br' | '_l' | '_r' | 't_' | 'b_',\n  showOnHover?: boolean,\n  menuClassName?: string,\n}>\n\nexport type MenuItemProps = {\n  onClick?: () => void,\n  alignment?: 'left' | 'right',\n  className?: string,\n}\nconst MenuItem = ({\n  children,\n  onClick,\n  alignment = 'left',\n  className\n}: PropsWithChildren<MenuItemProps>) => (\n  <div\n    className={clsx('block px-3 py-1 bg-menu-background text-menu-text hover:brightness-90', {\n      'text-right': alignment === 'right',\n      'text-left': alignment === 'left',\n    }, className)}\n    onClick={onClick}\n  >\n    {children}\n  </div>\n)\n\n// TODO: it is quite annoying that the type for the ref has to be specified manually, is there some solution around this?\n/**\n * A Menu Component to allow the user to see different functions\n */\nconst Menu = <T extends HTMLElement>({\n  trigger,\n  children,\n  alignment = 'tl',\n  showOnHover = false,\n  menuClassName = '',\n}: MenuProps<T>) => {\n  const { isHovered: isOpen, setIsHovered: setIsOpen, handlers } = useHoverState({ isDisabled: !showOnHover })\n  const triggerRef = useRef<T>(null)\n  const menuRef = useRef<HTMLDivElement>(null)\n  useOutsideClick([triggerRef, menuRef], () => setIsOpen(false))\n\n  return (\n    <div\n      className=\"relative\"\n      {...handlers}\n    >\n      {trigger(() => setIsOpen(!isOpen), triggerRef)}\n      {isOpen ? (\n        <div ref={menuRef} onClick={e => e.stopPropagation()}\n             className={clsx('absolute top-full mt-1 py-2 w-60 rounded-lg bg-menu-background text-menu-text ring-1 ring-slate-900/5 text-sm leading-6 font-semibold shadow-md z-[1]', {\n               '    top-[8px]': alignment[0] === 't',\n               ' bottom-[8px]': alignment[0] === 'b',\n               '  left-[-8px]': alignment[1] === 'l',\n               ' right-[-8px]': alignment[1] === 'r',\n             }, menuClassName)}>\n          {children}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\nexport { Menu, MenuItem }\n","import { useEffect } from 'react'\nimport type { RefObject } from 'react'\n\nexport const useOutsideClick = <Ts extends RefObject<HTMLElement>[]>(refs: Ts, handler: () => void) => {\n  useEffect(() => {\n    const listener = (event: MouseEvent | TouchEvent) => {\n      // returning means not \"not clicking outside\"\n\n      // if no target exists, return\n      if (event.target === null) return\n      // if the target is a ref's element or descendent thereof, return\n      if (refs.some((ref) => !ref.current || ref.current.contains(event.target as Node))) {\n        return\n      }\n\n      handler()\n    }\n    document.addEventListener('mousedown', listener)\n    document.addEventListener('touchstart', listener)\n    return () => {\n      document.removeEventListener('mousedown', listener)\n      document.removeEventListener('touchstart', listener)\n    }\n  }, [refs, handler])\n}\n","import type { Dispatch, SetStateAction } from 'react'\nimport { useEffect, useState } from 'react'\n\ntype UseHoverStateProps = {\n  /**\n   * The delay after which the menu is closed in milliseconds\n   *\n   * default: 200ms\n   */\n  closingDelay: number,\n  /**\n   * Whether the hover state management should be disabled\n   *\n   * default: false\n   */\n  isDisabled: boolean,\n}\n\ntype UseHoverStateReturnType = {\n  /**\n   * Whether the element is hovered\n   */\n  isHovered: boolean,\n  /**\n   * Function to change the current hover status\n   */\n  setIsHovered: Dispatch<SetStateAction<boolean>>,\n  /**\n   * Handlers to pass on to the component that should be hovered\n   */\n  handlers: {\n    onMouseEnter: () => void,\n    onMouseLeave: () => void,\n  },\n}\n\nconst defaultUseHoverStateProps: UseHoverStateProps = {\n  closingDelay: 200,\n  isDisabled: false,\n}\n\n/**\n * @param props See UseHoverStateProps\n *\n * A react hook for managing the hover state of a component. The handlers provided should be\n * forwarded to the component which should be hovered over\n */\nexport const useHoverState = (props: Partial<UseHoverStateProps> | undefined = undefined): UseHoverStateReturnType => {\n  const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props }\n\n  const [isHovered, setIsHovered] = useState(false)\n  const [timer, setTimer] = useState<NodeJS.Timeout>()\n\n  const onMouseEnter = () => {\n    if (isDisabled) {\n      return\n    }\n    clearTimeout(timer)\n    setIsHovered(true)\n  }\n\n  const onMouseLeave = () => {\n    if (isDisabled) {\n      return\n    }\n    setTimer(setTimeout(() => {\n      setIsHovered(false)\n    }, closingDelay))\n  }\n\n  useEffect(() => {\n    if (timer) {\n      return () => {\n        clearTimeout(timer)\n      }\n    }\n  })\n\n  useEffect(() => {\n    if (timer) {\n      clearTimeout(timer)\n    }\n  }, [isDisabled]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return {\n    isHovered, setIsHovered, handlers: { onMouseEnter, onMouseLeave }\n  }\n}\n"],"mappings":"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","names":["useEffect"]}

package/dist/components/user-input/MultiSelect.d.mts

@@ -0,0 +1,43 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { PropsForTranslation } from '../../hooks/useTranslation.mjs';
+import { LabelProps } from './Label.mjs';
+import '../../hooks/useLanguage.mjs';
+
+type MultiSelectTranslation = {
+    select: string;
+    search: string;
+    selected: string;
+};
+type MultiSelectOption<T> = {
+    label: string;
+    value: T;
+    selected: boolean;
+    disabled?: boolean;
+    className?: string;
+};
+type SearchProps<T> = {
+    initialSearch?: string;
+    searchMapping: (value: MultiSelectOption<T>) => string[];
+};
+type MultiSelectProps<T> = {
+    options: MultiSelectOption<T>[];
+    onChange: (options: MultiSelectOption<T>[]) => void;
+    search?: SearchProps<T>;
+    disabled?: boolean;
+    selectedDisplay?: (props: {
+        items: MultiSelectOption<T>[];
+        disabled: boolean;
+    }) => ReactNode;
+    label?: LabelProps;
+    hintText?: string;
+    showDisabledOptions?: boolean;
+    className?: string;
+    triggerClassName?: string;
+};
+/**
+ * A Component for multi selection
+ */
+declare const MultiSelect: <T>({ overwriteTranslation, options, onChange, search, disabled, selectedDisplay, label, hintText, showDisabledOptions, className, triggerClassName, }: PropsForTranslation<MultiSelectTranslation, MultiSelectProps<T>>) => react_jsx_runtime.JSX.Element;
+
+export { MultiSelect, type MultiSelectOption, type MultiSelectProps, type SearchProps };

package/dist/components/user-input/MultiSelect.d.ts

@@ -1,23 +1,26 @@
-import type { ReactNode } from 'react';
-import type { PropsForTranslation } from '../../hooks/useTranslation';
-import type { LabelProps } from './Label';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { PropsForTranslation } from '../../hooks/useTranslation.js';
+import { LabelProps } from './Label.js';
+import '../../hooks/useLanguage.js';
+
 type MultiSelectTranslation = {
     select: string;
     search: string;
     selected: string;
 };
-export type MultiSelectOption<T> = {
+type MultiSelectOption<T> = {
     label: string;
     value: T;
     selected: boolean;
     disabled?: boolean;
     className?: string;
 };
-export type SearchProps<T> = {
+type SearchProps<T> = {
     initialSearch?: string;
     searchMapping: (value: MultiSelectOption<T>) => string[];
 };
-export type MultiSelectProps<T> = {
+type MultiSelectProps<T> = {
     options: MultiSelectOption<T>[];
     onChange: (options: MultiSelectOption<T>[]) => void;
     search?: SearchProps<T>;
@@ -35,5 +38,6 @@ export type MultiSelectProps<T> = {
 /**
  * A Component for multi selection
  */
-export declare const MultiSelect: <T>({ overwriteTranslation, options, onChange, search, disabled, selectedDisplay, label, hintText, showDisabledOptions, className, triggerClassName, }: PropsForTranslation<MultiSelectTranslation, MultiSelectProps<T>>) => import("react/jsx-runtime").JSX.Element;
-export {};
+declare const MultiSelect: <T>({ overwriteTranslation, options, onChange, search, disabled, selectedDisplay, label, hintText, showDisabledOptions, className, triggerClassName, }: PropsForTranslation<MultiSelectTranslation, MultiSelectProps<T>>) => react_jsx_runtime.JSX.Element;
+
+export { MultiSelect, type MultiSelectOption, type MultiSelectProps, type SearchProps };