@sikka/hawa 0.2.16-beta → 0.2.18-beta

package/src/hooks/useFocusWithin.ts

@@ -1,80 +0,0 @@
-// useFocusWithin hook detects if any element within has focus, it works the same way as :focus-within CSS selector:
-
-import { useRef, useState, useEffect } from "react"
-
-// Define options for the useFocusWithin hook, which includes onFocus and onBlur callbacks.
-export interface UseFocusWithinOptions {
-  onFocus?(event: FocusEvent): void
-  onBlur?(event: FocusEvent): void
-}
-
-// Function to check if the event's related target is contained within the current target.
-function containsRelatedTarget(event: FocusEvent) {
-  if (
-    event.currentTarget instanceof HTMLElement &&
-    event.relatedTarget instanceof HTMLElement
-  ) {
-    return event.currentTarget.contains(event.relatedTarget)
-  }
-
-  return false
-}
-
-// Custom React hook for handling focus events within an element.
-export function useFocusWithin<T extends HTMLElement = any>({
-  onBlur,
-  onFocus,
-}: UseFocusWithinOptions = {}): {
-  ref: React.MutableRefObject<T>
-  focused: boolean
-} {
-  // Create a ref to hold the target element.
-  const ref = useRef<T>()
-
-  // State to track if the element is focused.
-  const [focused, _setFocused] = useState(false)
-
-  // Create a ref to store the focused state.
-  const focusedRef = useRef(false)
-
-  // Function to set the focused state and update the ref.
-  const setFocused = (value: boolean) => {
-    _setFocused(value)
-    focusedRef.current = value
-  }
-
-  // Handle focus-in event: when the element gains focus.
-  const handleFocusIn = (event: FocusEvent) => {
-    if (!focusedRef.current) {
-      setFocused(true)
-      onFocus?.(event) // Call the onFocus callback if provided.
-    }
-  }
-
-  // Handle focus-out event: when the element loses focus.
-  const handleFocusOut = (event: FocusEvent) => {
-    if (focusedRef.current && !containsRelatedTarget(event)) {
-      setFocused(false)
-      onBlur?.(event) // Call the onBlur callback if provided.
-    }
-  }
-
-  // Attach event listeners for focusin and focusout events.
-  useEffect(() => {
-    if (ref.current) {
-      ref.current.addEventListener("focusin", handleFocusIn)
-      ref.current.addEventListener("focusout", handleFocusOut)
-
-      // Clean up event listeners when the component unmounts.
-      return () => {
-        ref.current?.removeEventListener("focusin", handleFocusIn)
-        ref.current?.removeEventListener("focusout", handleFocusOut)
-      }
-    }
-
-    return undefined
-  }, [handleFocusIn, handleFocusOut])
-
-  // Return the ref and focused state.
-  return { ref, focused }
-}

package/src/hooks/useFullscreen.ts

@@ -1,123 +0,0 @@
-import { useCallback, useRef, useState, useEffect } from "react"
-
-function getFullscreenElement(): HTMLElement | null {
-  const _document = window.document as any
-
-  const fullscreenElement =
-    _document.fullscreenElement ||
-    _document.webkitFullscreenElement ||
-    _document.mozFullScreenElement ||
-    _document.msFullscreenElement
-
-  return fullscreenElement
-}
-
-async function exitFullscreen() {
-  const _document = window.document as any
-
-  if (typeof _document.exitFullscreen === "function")
-    return _document.exitFullscreen()
-  if (typeof _document.msExitFullscreen === "function")
-    return _document.msExitFullscreen()
-  if (typeof _document.webkitExitFullscreen === "function")
-    return _document.webkitExitFullscreen()
-  if (typeof _document.mozCancelFullScreen === "function")
-    return _document.mozCancelFullScreen()
-
-  return null
-}
-
-async function enterFullScreen(element: HTMLElement) {
-  const _element = element as any
-
-  return (
-    _element.requestFullscreen?.() ||
-    _element.msRequestFullscreen?.() ||
-    _element.webkitEnterFullscreen?.() ||
-    _element.webkitRequestFullscreen?.() ||
-    _element.mozRequestFullscreen?.()
-  )
-}
-
-const prefixes = ["", "webkit", "moz", "ms"]
-
-function addEvents(
-  element: HTMLElement,
-  {
-    onFullScreen,
-    onError,
-  }: { onFullScreen: (event: Event) => void; onError: (event: Event) => void }
-) {
-  prefixes.forEach((prefix) => {
-    element.addEventListener(`${prefix}fullscreenchange`, onFullScreen)
-    element.addEventListener(`${prefix}fullscreenerror`, onError)
-  })
-
-  return () => {
-    prefixes.forEach((prefix) => {
-      element.removeEventListener(`${prefix}fullscreenchange`, onFullScreen)
-      element.removeEventListener(`${prefix}fullscreenerror`, onError)
-    })
-  }
-}
-
-export function useFullscreen<T extends HTMLElement = any>() {
-  const [fullscreen, setFullscreen] = useState<boolean>(false)
-
-  const _ref = useRef<T>()
-
-  const handleFullscreenChange = useCallback(
-    (event: Event) => {
-      setFullscreen(event.target === getFullscreenElement())
-    },
-    [setFullscreen]
-  )
-
-  const handleFullscreenError = useCallback(
-    (event: Event) => {
-      setFullscreen(false)
-      // eslint-disable-next-line no-console
-      console.error(
-        `[@mantine/hooks] use-fullscreen: Error attempting full-screen mode method: ${event} (${event.target})`
-      )
-    },
-    [setFullscreen]
-  )
-
-  const toggle = useCallback(async () => {
-    if (!getFullscreenElement()) {
-      await enterFullScreen(_ref.current)
-    } else {
-      await exitFullscreen()
-    }
-  }, [])
-
-  const ref = useCallback((element: T | null) => {
-    if (element === null) {
-      _ref.current = window.document.documentElement as T
-    } else {
-      _ref.current = element
-    }
-  }, [])
-
-  useEffect(() => {
-    if (!_ref.current && window.document) {
-      _ref.current = window.document.documentElement as T
-      return addEvents(_ref.current, {
-        onFullScreen: handleFullscreenChange,
-        onError: handleFullscreenError,
-      })
-    }
-
-    if (_ref.current) {
-      return addEvents(_ref.current, {
-        onFullScreen: handleFullscreenChange,
-        onError: handleFullscreenError,
-      })
-    }
-
-    return undefined
-  }, [])
-
-  return { ref, toggle, fullscreen } as const
-}

package/src/hooks/useHover.ts

@@ -1,25 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-
-function useHover() {
-  const [value, setValue] = useState(false);
-  const ref = useRef(null);
-  const handleMouseOver = () => setValue(true);
-  const handleMouseOut = () => setValue(false);
-  useEffect(
-    () => {
-      const node = ref.current;
-      if (node) {
-        node.addEventListener("mouseover", handleMouseOver);
-        node.addEventListener("mouseout", handleMouseOut);
-        return () => {
-          node.removeEventListener("mouseover", handleMouseOver);
-          node.removeEventListener("mouseout", handleMouseOut);
-        };
-      }
-    },
-    [ref.current] // Recall only if ref changes
-  );
-  return [ref, value];
-}
-
-export default useHover;

package/src/hooks/useMediaQuery.ts

@@ -1,65 +0,0 @@
-import { useState, useEffect, useRef } from "react"
-
-export interface UseMediaQueryOptions {
-  getInitialValueInEffect: boolean
-}
-
-type MediaQueryCallback = (event: { matches: boolean; media: string }) => void
-
-/**
- * Older versions of Safari (shipped withCatalina and before) do not support addEventListener on matchMedia
- * https://stackoverflow.com/questions/56466261/matchmedia-addlistener-marked-as-deprecated-addeventlistener-equivalent
- * */
-function attachMediaListener(
-  query: MediaQueryList,
-  callback: MediaQueryCallback
-) {
-  try {
-    query.addEventListener("change", callback)
-    return () => query.removeEventListener("change", callback)
-  } catch (e) {
-    query.addListener(callback)
-    return () => query.removeListener(callback)
-  }
-}
-
-function getInitialValue(query: string, initialValue?: boolean) {
-  if (typeof initialValue === "boolean") {
-    return initialValue
-  }
-
-  if (typeof window !== "undefined" && "matchMedia" in window) {
-    return window.matchMedia(query).matches
-  }
-
-  return false
-}
-
-export function useMediaQuery(
-  query: string,
-  initialValue?: boolean,
-  { getInitialValueInEffect }: UseMediaQueryOptions = {
-    getInitialValueInEffect: true,
-  }
-) {
-  const [matches, setMatches] = useState(
-    getInitialValueInEffect
-      ? initialValue
-      : getInitialValue(query, initialValue)
-  )
-  const queryRef = useRef<MediaQueryList>()
-
-  useEffect(() => {
-    if ("matchMedia" in window) {
-      queryRef.current = window.matchMedia(query)
-      setMatches(queryRef.current.matches)
-      return attachMediaListener(queryRef.current, (event) =>
-        setMatches(event.matches)
-      )
-    }
-
-    return undefined
-  }, [query])
-
-  return matches
-}

package/src/hooks/useScrollPosition.ts

@@ -1,30 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-
-function useScrollPosition(ref) {
-  const [scrollPosition, setScrollPosition] = useState(0);
-  // const savedRef = useRef();
-
-  // useEffect(() => {
-  //   savedRef.current = ref;
-  // }, [ref]);
-
-  useEffect(() => {
-    function handleScroll() {
-      setScrollPosition(ref.current.scrollTop);
-    }
-
-    if (ref.current) {
-      ref.current.addEventListener("scroll", handleScroll);
-    }
-
-    return () => {
-      if (ref.current) {
-        ref.current.removeEventListener("scroll", handleScroll);
-      }
-    };
-  }, [ref]);
-
-  return scrollPosition;
-}
-
-export default useScrollPosition;

package/src/hooks/useTable.ts

@@ -1,159 +0,0 @@
-// useTable.js
-import React, { useState, useEffect } from "react"
-
-const calculateRange = (data, rowsPerPage) => {
-  const range = []
-  const num = Math.ceil(data?.length / rowsPerPage)
-  let i = 1
-  for (let i = 1; i <= num; i++) {
-    range.push(i)
-  }
-  return range
-}
-
-const sliceData = (data, page, rowsPerPage) => {
-  return data?.slice((page - 1) * rowsPerPage, page * rowsPerPage)
-}
-
-// useTable.js
-const sortData = (data, sortColumn, sortDirection) => {
-  if (sortColumn !== null) {
-    return data?.sort((a, b) => {
-      const aValue = a[sortColumn].value
-      const bValue = b[sortColumn].value
-
-      // Handle non-string values by using simple comparison
-      if (typeof aValue === "string" && typeof bValue === "string") {
-        if (sortDirection === "asc") {
-          return aValue.localeCompare(bValue)
-        } else {
-          return bValue.localeCompare(aValue)
-        }
-      } else {
-        if (sortDirection === "asc") {
-          return aValue - bValue
-        } else {
-          return bValue - aValue
-        }
-      }
-    })
-  }
-  return data
-}
-
-const useTable = (data, page, rowsPerPage, sortColumn, sortDirection) => {
-  const [tableRange, setTableRange] = useState([])
-  const [slice, setSlice] = useState([])
-
-  useEffect(() => {
-    if (data) {
-      const range = calculateRange(data, rowsPerPage)
-      setTableRange([...range])
-
-      const sortedData = sortData(data, sortColumn, sortDirection)
-      const slicedData = sliceData(sortedData, page, rowsPerPage)
-      setSlice([...slicedData])
-    }
-  }, [data, setTableRange, page, rowsPerPage, sortColumn, sortDirection])
-
-  return { slice, range: tableRange }
-}
-
-export default useTable
-
-// import React, { useState, useEffect } from "react"
-
-// const calculateRange = (data, rowsPerPage) => {
-//   const range = []
-//   const num = Math.ceil(data?.length / rowsPerPage)
-//   let i = 1
-//   for (let i = 1; i <= num; i++) {
-//     range.push(i)
-//   }
-//   return range
-// }
-
-// const sliceData = (data, page, rowsPerPage) => {
-//   return data?.slice((page - 1) * rowsPerPage, page * rowsPerPage)
-// }
-
-// const sortData = (data, sortColumn, sortDirection) => {
-//   if (sortColumn !== null) {
-//     return data?.sort((a, b) => {
-//       const aValue = a[sortColumn].value
-//       const bValue = b[sortColumn].value
-
-//       if (sortDirection === "asc") {
-//         return aValue.localeCompare(bValue)
-//       } else {
-//         return bValue.localeCompare(aValue)
-//       }
-//     })
-//   }
-//   return data
-// }
-
-// const useTable = (data, page, rowsPerPage, sortColumn, sortDirection) => {
-//   const [tableRange, setTableRange] = useState([])
-//   const [slice, setSlice] = useState([])
-
-//   useEffect(() => {
-//     if (data) {
-//       const range = calculateRange(data, rowsPerPage)
-//       setTableRange([...range])
-
-//       const sortedData = sortData(data, sortColumn, sortDirection)
-//       const slicedData = sliceData(sortedData, page, rowsPerPage)
-//       setSlice([...slicedData])
-//     }
-//   }, [data, setTableRange, page, rowsPerPage, sortColumn, sortDirection])
-
-//   return { slice, range: tableRange }
-// }
-
-// export default useTable
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-
-// import React, { useState, useEffect } from "react"
-
-// const calculateRange = (data, rowsPerPage) => {
-//   const range = []
-//   const num = Math.ceil(data?.length / rowsPerPage)
-//   let i = 1
-//   for (let i = 1; i <= num; i++) {
-//     range.push(i)
-//   }
-//   return range
-// }
-
-// const sliceData = (data, page, rowsPerPage) => {
-//   return data?.slice((page - 1) * rowsPerPage, page * rowsPerPage)
-// }
-
-// const useTable = (data, page, rowsPerPage) => {
-//   const [tableRange, setTableRange] = useState([])
-//   const [slice, setSlice] = useState([])
-
-//   useEffect(() => {
-//     if (data) {
-//       const range = calculateRange(data, rowsPerPage)
-//       setTableRange([...range])
-
-//       const slice = sliceData(data, page, rowsPerPage)
-//       setSlice([...slice])
-//     }
-//   }, [data, setTableRange, page, setSlice, rowsPerPage])
-
-//   return { slice, range: tableRange }
-// }
-
-// export default useTable

package/src/hooks/useTabs.ts

@@ -1,37 +0,0 @@
-import { useEffect, useState } from "react"
-
-function useTabs(initialTab = "") {
-  const [activeTab, setActiveTab] = useState(initialTab)
-
-  // Listen to hash changes in the URL
-  useEffect(() => {
-    const handleHashChange = () => {
-      const hash = window.location.hash.substring(1)
-      setActiveTab(hash || initialTab)
-    }
-
-    window.addEventListener("hashchange", handleHashChange)
-
-    // Initialize the tab based on the initial hash
-    handleHashChange()
-
-    return () => {
-      // Remove the event listener when the component unmounts
-      window.removeEventListener("hashchange", handleHashChange)
-    }
-  }, [initialTab])
-
-  const handleTabChange = (index) => {
-    setActiveTab(index)
-
-    // Update the URL hash when the tab changes
-    window.location.hash = index
-  }
-
-  return {
-    activeTab,
-    handleTabChange,
-  }
-}
-
-export { useTabs }

package/src/hooks/useToast.ts

@@ -1,182 +0,0 @@
-// Inspired by react-hot-toast library
-import * as React from "react"
-
-import type { ToastActionElement, ToastProps } from "../elements/Toast"
-
-const TOAST_LIMIT = 5
-const TOAST_REMOVE_DELAY = 100000
-
-type ToasterToast = ToastProps & {
-  id: string
-  title?: React.ReactNode
-  description?: React.ReactNode
-  severity?: "info" | "warning" | "error" | "success" | "none"
-  action?: ToastActionElement
-}
-
-const actionTypes = {
-  ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
-  DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST",
-} as const
-
-let count = 0
-
-function genId() {
-  count = (count + 1) % Number.MAX_VALUE
-  return count.toString()
-}
-
-type ActionType = typeof actionTypes
-
-type Action =
-  | {
-      type: ActionType["ADD_TOAST"]
-      toast: ToasterToast
-    }
-  | {
-      type: ActionType["UPDATE_TOAST"]
-      toast: Partial<ToasterToast>
-    }
-  | {
-      type: ActionType["DISMISS_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
-  | {
-      type: ActionType["REMOVE_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
-
-interface State {
-  toasts: ToasterToast[]
-}
-
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
-
-const addToRemoveQueue = (toastId: string) => {
-  if (toastTimeouts.has(toastId)) {
-    return
-  }
-
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId)
-    dispatch({
-      type: "REMOVE_TOAST",
-      toastId: toastId,
-    })
-  }, TOAST_REMOVE_DELAY)
-
-  toastTimeouts.set(toastId, timeout)
-}
-
-export const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case "ADD_TOAST":
-      return {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      }
-
-    case "UPDATE_TOAST":
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === action.toast.id ? { ...t, ...action.toast } : t
-        ),
-      }
-
-    case "DISMISS_TOAST": {
-      const { toastId } = action
-
-      // ! Side effects ! - This could be extracted into a dismissToast() action,
-      // but I'll keep it here for simplicity
-      if (toastId) {
-        addToRemoveQueue(toastId)
-      } else {
-        state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id)
-        })
-      }
-
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === toastId || toastId === undefined ? { ...t, open: false } : t
-        ),
-      }
-    }
-    case "REMOVE_TOAST":
-      if (action.toastId === undefined) {
-        return { ...state, toasts: [] }
-      }
-      return {
-        ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      }
-  }
-}
-
-const listeners: Array<(state: State) => void> = []
-
-let memoryState: State = { toasts: [] }
-
-function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action)
-  listeners.forEach((listener) => {
-    listener(memoryState)
-  })
-}
-
-type Toast = Omit<ToasterToast, "id">
-
-function toast({ ...props }: Toast) {
-  const id = genId()
-
-  const update = (props: ToasterToast) =>
-    dispatch({
-      type: "UPDATE_TOAST",
-      toast: { ...props, id },
-    })
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
-
-  dispatch({
-    type: "ADD_TOAST",
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) dismiss()
-      },
-    },
-  })
-
-  return {
-    id: id,
-    dismiss,
-    update,
-  }
-}
-
-function useToast() {
-  const [state, setState] = React.useState<State>(memoryState)
-
-  React.useEffect(() => {
-    listeners.push(setState)
-    return () => {
-      const index = listeners.indexOf(setState)
-      if (index > -1) {
-        listeners.splice(index, 1)
-      }
-    }
-  }, [state])
-
-  return {
-    ...state,
-    toast,
-    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  }
-}
-
-export { useToast, toast }