@uncinc/uncinc-react-kitchen-sink 2.4.0 → 2.4.2

package/dist/hooks/useClickOutside.ts

@@ -1,38 +0,0 @@
-import { MutableRefObject, useEffect } from 'react';
-
-interface UseClickOutsideOptions {
-  refs: MutableRefObject<HTMLElement>[] | MutableRefObject<HTMLElement>;
-  unless?: boolean | ((e: globalThis.MouseEvent) => boolean);
-  onClick: (e: globalThis.MouseEvent) => void;
-}
-
-export default function useClickOutside({
-  refs,
-  unless = false,
-  onClick,
-}: UseClickOutsideOptions) {
-  const refsAsArray = Array.isArray(refs) ? refs : [refs];
-
-  useEffect(() => {
-    function handleOutsideClick(e: globalThis.MouseEvent) {
-      const allRefsHaveCurrent = refsAsArray.every((ref) => !!ref.current);
-      const shouldNotExecute = typeof unless === 'function' ? unless(e) : unless;
-
-      if (!allRefsHaveCurrent || shouldNotExecute) {
-        return;
-      }
-
-      const isOutsideClick = refsAsArray.every((ref) => !ref.current.contains(e.target as Node));
-
-      if (isOutsideClick) {
-        onClick(e);
-      }
-    }
-
-    document.addEventListener('mousedown', handleOutsideClick);
-
-    return () => {
-      document.removeEventListener('mousedown', handleOutsideClick);
-    };
-  }, [unless, onClick, refs]);
-}

package/dist/hooks/useDialog.ts

@@ -1,29 +0,0 @@
-import React from 'react';
-
-import Dialog from '../components/Dialog';
-import useBoolean from './useBoolean';
-
-export default function useDialog() {
-  const {
-    value: dialogIsOpen,
-    setTrue: openDialog,
-    setFalse: closeDialog,
-  } = useBoolean();
-
-  const DialogComponent = ({ children, ...props }) => React.createElement(
-    Dialog,
-    {
-      ...props,
-      isOpen: dialogIsOpen,
-      closeFunction: closeDialog,
-    },
-    children,
-  );
-
-  return {
-    dialogIsOpen,
-    openDialog,
-    closeDialog,
-    DialogComponent,
-  } as const;
-}

package/dist/hooks/useEscape.ts

@@ -1,26 +0,0 @@
-import { useEffect } from 'react';
-
-interface UseEscapeOption {
-  unless?: boolean | ((e: KeyboardEvent) => boolean);
-  onPress: (e: KeyboardEvent) => void;
-}
-
-export default function useEscape({ unless, onPress }: UseEscapeOption) {
-  useEffect(() => {
-    function handleOnPress(e: KeyboardEvent) {
-      const shouldNotExecute = typeof unless === 'function' ? unless(e) : unless;
-
-      if (shouldNotExecute || e.key !== 'Escape') {
-        return;
-      }
-
-      onPress(e);
-    }
-
-    document.addEventListener('keyup', handleOnPress);
-
-    return () => {
-      document.removeEventListener('keyup', handleOnPress);
-    };
-  }, [unless]);
-}

package/dist/hooks/useTrapFocus.ts

@@ -1,80 +0,0 @@
-import { RefObject, useEffect } from 'react';
-
-export interface UseTrapFocusOptions<T extends HTMLElement> {
-  ref: RefObject<T>;
-  isActive?: boolean;
-}
-
-/**
- * Helper to trap focus within a certain component,
- * which is useful for canvas menu lists or modals
- */
-export default function useTrapFocus<T extends HTMLElement>(
-  options: UseTrapFocusOptions<T>,
-) {
-  const {
-    ref,
-    isActive = false,
-  } = options;
-
-  useEffect(() => {
-    function onKeyDown(e: KeyboardEvent) {
-      if (ref.current && isActive) {
-        const { first, last } = getFocusableElements(ref.current);
-        const isTabPressed = e.key === 'Tab';
-
-        if (!isTabPressed) {
-          return;
-        }
-
-        if (e.shiftKey && document.activeElement === first) {
-          if (last) last.focus();
-          e.preventDefault();
-          return;
-        }
-
-        if (!e.shiftKey && document.activeElement === last) {
-          if (first) first.focus();
-          e.preventDefault();
-        }
-      }
-    }
-
-    if (ref.current) {
-      ref.current.addEventListener('keydown', onKeyDown);
-    }
-
-    return () => {
-      if (ref.current) {
-        ref.current.removeEventListener('keydown', onKeyDown);
-      }
-    };
-  }, [ref, isActive]);
-
-  function getFocusableElements(element: Element) {
-    const focusableElementTags = [
-      'a[href]',
-      'area[href]',
-      'button',
-      'input',
-      'textarea',
-      'select',
-      'details',
-      '[tabindex]:not([tabindex="-1"])',
-    ];
-
-    const focusableElements = [
-      ...element.querySelectorAll(focusableElementTags.join(', ')),
-    ].filter(
-      (el) => !el.hasAttribute('disabled') && !el.hasAttribute('aria-hidden'),
-    ) as HTMLElement[];
-
-    return {
-      focusableElements,
-      first: focusableElements.length ? focusableElements[0] : null,
-      last: focusableElements.length
-        ? focusableElements[focusableElements.length - 1]
-        : null,
-    } as const;
-  }
-}