@true-engineering/true-react-common-ui-kit 1.12.1 → 2.0.0

package/src/hooks/use-dropdown.ts

@@ -1,85 +1,85 @@
-import { DependencyList, useEffect } from 'react';
-import usePopper, { VirtualElement } from 'react-overlays/usePopper';
-
-import { IDropdownWithPopperOptions } from '../types';
-import { getScrollParent, minWidthModifier } from '../helpers';
-
-export const useDropdown = ({
-  isOpen,
-  onDropdownClose,
-  referenceElement,
-  dropdownElement,
-  options,
-  dependenciesForPositionUpdating = [],
-}: {
-  isOpen: boolean;
-  referenceElement: VirtualElement | null | undefined;
-  dropdownElement: HTMLElement | null | undefined;
-  options?: IDropdownWithPopperOptions;
-  dependenciesForPositionUpdating?: DependencyList;
-  onDropdownClose(event: Event): void;
-}): ReturnType<typeof usePopper> | undefined => {
-  const {
-    shouldUsePopper = false,
-    shouldRenderInBody = false,
-    shouldHideOnScroll = false,
-    scrollParent = 'document',
-    canBeFlipped = false,
-    modifiers = [],
-    placement = 'bottom-start',
-    flipOptions,
-  } = options ?? {};
-
-  useEffect(() => {
-    if (!shouldHideOnScroll || !isOpen) {
-      return;
-    }
-
-    const scrollParentEl =
-      scrollParent === 'auto'
-        ? getScrollParent(referenceElement as Element)
-        : scrollParent === 'document'
-        ? document
-        : scrollParent;
-    scrollParentEl.addEventListener('scroll', onDropdownClose);
-
-    return () => {
-      scrollParentEl.removeEventListener('scroll', onDropdownClose);
-    };
-  }, [shouldHideOnScroll, isOpen]);
-
-  let popperData: ReturnType<typeof usePopper> | undefined;
-  if (shouldUsePopper) {
-    popperData = usePopper(referenceElement, dropdownElement, {
-      enabled: isOpen,
-      placement,
-      modifiers: [
-        ...(shouldRenderInBody ? [minWidthModifier] : []),
-        {
-          name: 'offset',
-          options: {
-            offset: [0, 6],
-          },
-        },
-        {
-          name: 'flip',
-          options: {
-            fallbackPlacements: canBeFlipped
-              ? ['bottom-start', 'top-start']
-              : ['bottom-start'],
-            ...flipOptions,
-          },
-        },
-        ...modifiers,
-      ],
-    });
-  }
-
-  useEffect(() => {
-    if (dependenciesForPositionUpdating.length !== 0) {
-      popperData?.update();
-    }
-  }, dependenciesForPositionUpdating);
-
-  return popperData;
-};
+import { DependencyList, useEffect } from 'react';
+import usePopper, { VirtualElement } from 'react-overlays/usePopper';
+
+import { IDropdownWithPopperOptions } from '../types';
+import { getScrollParent, minWidthModifier } from '../helpers';
+
+export const useDropdown = ({
+  isOpen,
+  onDropdownClose,
+  referenceElement,
+  dropdownElement,
+  options,
+  dependenciesForPositionUpdating = [],
+}: {
+  isOpen: boolean;
+  referenceElement: VirtualElement | null | undefined;
+  dropdownElement: HTMLElement | null | undefined;
+  options?: IDropdownWithPopperOptions;
+  dependenciesForPositionUpdating?: DependencyList;
+  onDropdownClose(event: Event): void;
+}): ReturnType<typeof usePopper> | undefined => {
+  const {
+    shouldUsePopper = false,
+    shouldRenderInBody = false,
+    shouldHideOnScroll = false,
+    scrollParent = 'document',
+    canBeFlipped = false,
+    modifiers = [],
+    placement = 'bottom-start',
+    flipOptions,
+  } = options ?? {};
+
+  useEffect(() => {
+    if (!shouldHideOnScroll || !isOpen) {
+      return;
+    }
+
+    const scrollParentEl =
+      scrollParent === 'auto'
+        ? getScrollParent(referenceElement as Element)
+        : scrollParent === 'document'
+        ? document
+        : scrollParent;
+    scrollParentEl.addEventListener('scroll', onDropdownClose);
+
+    return () => {
+      scrollParentEl.removeEventListener('scroll', onDropdownClose);
+    };
+  }, [shouldHideOnScroll, isOpen]);
+
+  let popperData: ReturnType<typeof usePopper> | undefined;
+  if (shouldUsePopper) {
+    popperData = usePopper(referenceElement, dropdownElement, {
+      enabled: isOpen,
+      placement,
+      modifiers: [
+        ...(shouldRenderInBody ? [minWidthModifier] : []),
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 6],
+          },
+        },
+        {
+          name: 'flip',
+          options: {
+            fallbackPlacements: canBeFlipped
+              ? ['bottom-start', 'top-start']
+              : ['bottom-start'],
+            ...flipOptions,
+          },
+        },
+        ...modifiers,
+      ],
+    });
+  }
+
+  useEffect(() => {
+    if (dependenciesForPositionUpdating.length !== 0) {
+      popperData?.update();
+    }
+  }, dependenciesForPositionUpdating);
+
+  return popperData;
+};

package/src/hooks/use-is-mounted.ts

@@ -1,15 +1,15 @@
-import { useCallback, useEffect, useRef } from 'react';
-
-export const useIsMounted = (): (() => boolean) => {
-  const isMounted = useRef(false);
-
-  useEffect(() => {
-    isMounted.current = true;
-
-    return () => {
-      isMounted.current = false;
-    };
-  }, []);
-
-  return useCallback(() => isMounted.current, []);
-};
+import { useCallback, useEffect, useRef } from 'react';
+
+export const useIsMounted = (): (() => boolean) => {
+  const isMounted = useRef(false);
+
+  useEffect(() => {
+    isMounted.current = true;
+
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  return useCallback(() => isMounted.current, []);
+};

package/src/hooks/use-on-click-outside.ts

@@ -1,92 +1,92 @@
-import { RefObject, useEffect } from 'react';
-
-export const checkElementParentsClassNames = (
-  element: HTMLElement,
-  className: string,
-): boolean => {
-  if (element.classList.contains(className)) {
-    return true;
-  }
-
-  if (element === document.body) {
-    return false;
-  }
-
-  if (element.parentElement) {
-    return checkElementParentsClassNames(element.parentElement, className);
-  }
-
-  return false;
-};
-
-export const isElementOneOfParents = (
-  element: HTMLElement,
-  elToSearch: HTMLElement,
-): boolean => {
-  if (element === elToSearch) {
-    return true;
-  }
-
-  if (element === document.body) {
-    return false;
-  }
-
-  if (element.parentElement) {
-    return isElementOneOfParents(element.parentElement, elToSearch);
-  }
-
-  return false;
-};
-
-export function useOnClickOutsideWithRef<
-  Elem extends HTMLElement,
-  IgnoreElem extends HTMLElement,
->(
-  ref: RefObject<Elem>,
-  handler: (event: MouseEvent | TouchEvent) => void,
-  ignoreRef?: RefObject<IgnoreElem>,
-): void {
-  useOnClickOutside(ref, handler, undefined, ignoreRef);
-}
-
-export function useOnClickOutside<
-  Elem extends HTMLElement,
-  IgnoreElem extends HTMLElement,
->(
-  ref: RefObject<Elem>,
-  handler: (event: MouseEvent | TouchEvent) => void,
-  ignoreClassName?: string,
-  ignoreRef?: RefObject<IgnoreElem>,
-): void {
-  useEffect(() => {
-    const listener = (event: MouseEvent | TouchEvent) => {
-      // Do nothing if clicking ref's element or descendent elements
-      if (!ref.current || ref.current.contains(event.target as HTMLElement)) {
-        return;
-      }
-
-      if (
-        (ignoreClassName !== undefined &&
-          checkElementParentsClassNames(
-            event.target as HTMLElement,
-            ignoreClassName,
-          )) ||
-        (ignoreRef !== undefined &&
-          ignoreRef.current !== null &&
-          isElementOneOfParents(event.target as HTMLElement, ignoreRef.current))
-      ) {
-        return;
-      }
-
-      handler(event);
-    };
-
-    document.addEventListener('mousedown', listener);
-    document.addEventListener('touchstart', listener);
-
-    return () => {
-      document.removeEventListener('mousedown', listener);
-      document.removeEventListener('touchstart', listener);
-    };
-  }, [ref, handler, ignoreClassName]);
-}
+import { RefObject, useEffect } from 'react';
+
+export const checkElementParentsClassNames = (
+  element: HTMLElement,
+  className: string,
+): boolean => {
+  if (element.classList.contains(className)) {
+    return true;
+  }
+
+  if (element === document.body) {
+    return false;
+  }
+
+  if (element.parentElement) {
+    return checkElementParentsClassNames(element.parentElement, className);
+  }
+
+  return false;
+};
+
+export const isElementOneOfParents = (
+  element: HTMLElement,
+  elToSearch: HTMLElement,
+): boolean => {
+  if (element === elToSearch) {
+    return true;
+  }
+
+  if (element === document.body) {
+    return false;
+  }
+
+  if (element.parentElement) {
+    return isElementOneOfParents(element.parentElement, elToSearch);
+  }
+
+  return false;
+};
+
+export function useOnClickOutsideWithRef<
+  Elem extends HTMLElement,
+  IgnoreElem extends HTMLElement,
+>(
+  ref: RefObject<Elem>,
+  handler: (event: MouseEvent | TouchEvent) => void,
+  ignoreRef?: RefObject<IgnoreElem>,
+): void {
+  useOnClickOutside(ref, handler, undefined, ignoreRef);
+}
+
+export function useOnClickOutside<
+  Elem extends HTMLElement,
+  IgnoreElem extends HTMLElement,
+>(
+  ref: RefObject<Elem>,
+  handler: (event: MouseEvent | TouchEvent) => void,
+  ignoreClassName?: string,
+  ignoreRef?: RefObject<IgnoreElem>,
+): void {
+  useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      // Do nothing if clicking ref's element or descendent elements
+      if (!ref.current || ref.current.contains(event.target as HTMLElement)) {
+        return;
+      }
+
+      if (
+        (ignoreClassName !== undefined &&
+          checkElementParentsClassNames(
+            event.target as HTMLElement,
+            ignoreClassName,
+          )) ||
+        (ignoreRef !== undefined &&
+          ignoreRef.current !== null &&
+          isElementOneOfParents(event.target as HTMLElement, ignoreRef.current))
+      ) {
+        return;
+      }
+
+      handler(event);
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, handler, ignoreClassName]);
+}

package/src/hooks/use-theme.ts

@@ -1,36 +1,36 @@
-import { createContext, useContext, useMemo } from 'react';
-import { createUseStyles, Styles } from 'react-jss';
-import merge from 'lodash-es/merge';
-
-import { ComponentName, UiKitTheme } from '../types';
-import { commonTheme } from '../theme';
-
-export const ThemeContext = createContext<{
-  theme: UiKitTheme;
-}>({ theme: commonTheme });
-
-export const useTheme = <StyleSheet>(
-  componentName: ComponentName,
-  styles: StyleSheet,
-  tweakStyles?: Partial<Record<keyof StyleSheet, any>>,
-  options?: Record<string, unknown>,
-): {
-  classes: Record<keyof StyleSheet, string>;
-  componentStyles: StyleSheet;
-} => {
-  const { theme } = useContext(ThemeContext);
-  const { components } = theme;
-
-  const newStyles = useMemo(
-    () => merge({}, styles, components?.[componentName] ?? {}, tweakStyles),
-    [styles, components?.[componentName], tweakStyles],
-  );
-
-  return {
-    classes: createUseStyles(newStyles as Styles)(options) as Record<
-      keyof StyleSheet,
-      string
-    >,
-    componentStyles: newStyles,
-  };
-};
+import { createContext, useContext, useMemo } from 'react';
+import { createUseStyles, Styles } from 'react-jss';
+import merge from 'lodash-es/merge';
+
+import { ComponentName, UiKitTheme } from '../types';
+import { commonTheme } from '../theme';
+
+export const ThemeContext = createContext<{
+  theme: UiKitTheme;
+}>({ theme: commonTheme });
+
+export const useTheme = <StyleSheet>(
+  componentName: ComponentName,
+  styles: StyleSheet,
+  tweakStyles?: Partial<Record<keyof StyleSheet, any>>,
+  options?: Record<string, unknown>,
+): {
+  classes: Record<keyof StyleSheet, string>;
+  componentStyles: StyleSheet;
+} => {
+  const { theme } = useContext(ThemeContext);
+  const { components } = theme;
+
+  const newStyles = useMemo(
+    () => merge({}, styles, components?.[componentName] ?? {}, tweakStyles),
+    [styles, components?.[componentName], tweakStyles],
+  );
+
+  return {
+    classes: createUseStyles(newStyles as Styles)(options) as Record<
+      keyof StyleSheet,
+      string
+    >,
+    componentStyles: newStyles,
+  };
+};

package/src/hooks/use-tweak-styles.ts

@@ -1,14 +1,14 @@
-import { useMemo } from 'react';
-import merge from 'lodash-es/merge';
-import { Styles } from 'react-jss';
-
-export const useTweakStyles = <StyleSheet>(
-  componentStyles: StyleSheet = {} as StyleSheet,
-  tweakStyles: Partial<Record<keyof StyleSheet, any>> | undefined,
-  className: keyof StyleSheet,
-): Styles =>
-  useMemo(
-    () =>
-      merge({}, componentStyles[className], tweakStyles?.[className]) as Styles,
-    [tweakStyles?.[className]],
-  );
+import { useMemo } from 'react';
+import merge from 'lodash-es/merge';
+import { Styles } from 'react-jss';
+
+export const useTweakStyles = <StyleSheet>(
+  componentStyles: StyleSheet = {} as StyleSheet,
+  tweakStyles: Partial<Record<keyof StyleSheet, any>> | undefined,
+  className: keyof StyleSheet,
+): Styles =>
+  useMemo(
+    () =>
+      merge({}, componentStyles[className], tweakStyles?.[className]) as Styles,
+    [tweakStyles?.[className]],
+  );

package/src/index.ts

@@ -1,6 +1,6 @@
-export { commonTheme } from './theme';
-export * from './components';
-export * from './hooks';
-export * from './types';
-export * from './helpers';
-export * from './helpers/snippets';
+export { commonTheme } from './theme';
+export * from './components';
+export * from './hooks';
+export * from './types';
+export * from './helpers';
+export * from './helpers/snippets';