@qoretechnologies/reqore 0.44.0 → 0.45.0

package/src/helpers/colors.ts

@@ -1,335 +0,0 @@
-import { cloneDeep, merge, reduce } from 'lodash';
-import { darken, getLuminance, lighten, mix, readableColor, transparentize } from 'polished';
-import {
-  TReqoreEffectColor,
-  TReqoreEffectColorList,
-  TReqoreEffectGradientColors,
-  TReqoreEffectGradientColorsObject,
-  TReqoreHexColor,
-  TReqoreMultiTypeColor,
-  TReqoreRgbaColor,
-} from '../components/Effect';
-import { Colors } from '../constants/colors';
-import { DEFAULT_INTENTS, IReqoreTheme, TReqoreIntent } from '../constants/theme';
-
-export const getReadableColor: (
-  theme: Partial<IReqoreTheme>,
-  ifLight?: TReqoreHexColor,
-  ifDark?: TReqoreHexColor,
-  dimmed?: boolean,
-  fallback?: TReqoreHexColor
-) => TReqoreHexColor = (theme, ifLight, ifDark, dimmed, fallback) => {
-  if (theme.text?.color) {
-    return theme.text.dim
-      ? dimmed
-        ? changeDarkness(theme.text.color, 0.05)
-        : theme.text.color
-      : theme.text.color;
-  }
-
-  const shouldDim = theme.text?.dim && dimmed;
-  const from = fallback || theme.main!;
-
-  return getReadableColorFrom(from, shouldDim, ifLight, ifDark);
-};
-
-export const getReadableColorFrom = (
-  from: TReqoreHexColor,
-  dim?: boolean,
-  ifLight?: TReqoreHexColor,
-  ifDark?: TReqoreHexColor
-): TReqoreHexColor => {
-  const returnIfLight = ifLight || lighten(dim ? 0.05 : 0, Colors.DARK);
-  const returnIfDark = ifDark || darken(dim ? 0.05 : 0, Colors.LIGHT);
-  const fixedColor = hexAToRGBA(from);
-
-  return readableColor(fixedColor, returnIfLight, returnIfDark, false) as TReqoreHexColor;
-};
-
-export const percentToHexAlpha = (p: number) => {
-  const percent = Math.max(0, Math.min(100, p)); // bound percent from 0 to 100
-  const intValue = Math.round((percent / 100) * 255); // map percent to nearest integer (0 - 255)
-  const hexValue = intValue.toString(16); // get hexadecimal representation
-
-  return hexValue.padStart(2, '0').toUpperCase(); // format with leading 0 and upper case characters
-};
-
-export const hexAToRGBA = (hex: TReqoreMultiTypeColor): TReqoreRgbaColor => {
-  // Check if this color is already in rgba format
-  if (hex.startsWith('rgb')) {
-    return hex as TReqoreRgbaColor;
-  }
-
-  const _hex = hex.length === 4 ? hex + hex.slice(1, 4) : hex;
-
-  const r = parseInt(_hex.slice(1, 3), 16);
-  const g = parseInt(_hex.slice(3, 5), 16);
-  const b = parseInt(_hex.slice(5, 7), 16);
-  const a = parseInt(_hex.slice(7, 9) || 'ff', 16) / 255;
-
-  return `rgba(${r}, ${g}, ${b}, ${a.toFixed(2)})`;
-};
-
-export const RGBAToHexA = (rgba, forceRemoveAlpha = false): TReqoreHexColor => {
-  if (isValidSixCharHex(rgba)) {
-    return rgba as TReqoreHexColor;
-  }
-
-  return ('#' +
-    rgba
-      .replace(/^rgba?\(|\s+|\)$/g, '') // Get's rgba / rgb string values
-      .split(',') // splits them at ","
-      .filter((_string, index) => !forceRemoveAlpha || index !== 3)
-      .map((string) => parseFloat(string)) // Converts them to numbers
-      .map((number, index) => (index === 3 ? Math.round(number * 255) : number)) // Converts alpha to 255 number
-      .map((number) => number.toString(16)) // Converts numbers to hex
-      .map((string) => (string.length === 1 ? '0' + string : string)) // Adds 0 when length of one number is 1
-      .join('')) as TReqoreHexColor; // Puts the array to togehter to a string
-};
-
-export const shouldDarken = (mainColor: TReqoreMultiTypeColor): boolean => {
-  return getLuminance(hexAToRGBA(mainColor)) > 0.2;
-};
-
-export const getMainColor: (theme: IReqoreTheme, component: string) => TReqoreHexColor = (
-  theme,
-  component
-) => theme[component]?.main || theme.main;
-
-//export const changeBasedOnContrast = (color: string, lightness?: number): string =>
-
-export const changeLightness = (color: TReqoreHexColor, lightness?: number): TReqoreHexColor => {
-  const fixedColor = hexAToRGBA(color);
-
-  return lightness
-    ? shouldDarken(fixedColor)
-      ? (darken(lightness, fixedColor) as TReqoreHexColor)
-      : (lighten(lightness, fixedColor) as TReqoreHexColor)
-    : color;
-};
-
-export const changeDarkness = (color: TReqoreHexColor, lightness?: number): TReqoreHexColor => {
-  const fixedColor = hexAToRGBA(color);
-
-  return lightness
-    ? shouldDarken(fixedColor)
-      ? (lighten(lightness, fixedColor) as TReqoreHexColor)
-      : (darken(lightness, fixedColor) as TReqoreHexColor)
-    : color;
-};
-
-export const getColorByBgColor = (bgColor) => {
-  if (!bgColor) {
-    return '';
-  }
-  return parseInt(bgColor.replace('#', ''), 16) > 0xffffff / 2 ? '#000000' : '#ffffff';
-};
-
-export const isValidSixCharHex = (hex: string): boolean => {
-  return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8})$/.test(hex);
-};
-
-export const buildTheme = (theme: IReqoreTheme): IReqoreTheme => {
-  const newTheme: IReqoreTheme = cloneDeep(theme);
-
-  // Check if the main color is a valid hex color
-  if (!isValidSixCharHex(newTheme.main)) {
-    newTheme.main = '#333333';
-  }
-
-  // Add the original theme main color to the theme
-  newTheme.originalMain = newTheme.main;
-
-  if (!newTheme.notifications?.info) {
-    newTheme.notifications.info = newTheme.intents.info || DEFAULT_INTENTS.info;
-  }
-
-  if (!newTheme.notifications?.success) {
-    newTheme.notifications.success = newTheme.intents.success || DEFAULT_INTENTS.success;
-  }
-
-  if (!newTheme.notifications?.pending) {
-    newTheme.notifications.pending = newTheme.intents.pending || DEFAULT_INTENTS.pending;
-  }
-
-  if (!newTheme.notifications?.warning) {
-    newTheme.notifications.warning = newTheme.intents.warning || DEFAULT_INTENTS.warning;
-  }
-
-  if (!newTheme.notifications?.danger) {
-    newTheme.notifications.danger = newTheme.intents.danger || DEFAULT_INTENTS.danger;
-  }
-
-  if (!newTheme.notifications?.muted) {
-    newTheme.notifications.muted = `${newTheme.intents.muted || DEFAULT_INTENTS.muted}30`;
-  }
-
-  return newTheme;
-};
-
-export const mergeThemes = (element: string, theme: IReqoreTheme, customTheme: any) => {
-  const clonedTheme = cloneDeep(theme);
-
-  if (!customTheme) {
-    return clonedTheme;
-  }
-
-  if (element === 'main') {
-    merge(clonedTheme, {
-      main: customTheme.main,
-      originalMain: clonedTheme.main,
-      text: customTheme.text,
-    });
-  } else {
-    merge(clonedTheme, { [element]: customTheme, text: customTheme.text });
-  }
-
-  return clonedTheme;
-};
-
-export const getNotificationIntent = (theme: IReqoreTheme, intent?: TReqoreIntent) => {
-  if (intent) {
-    return theme.notifications[intent];
-  }
-
-  return changeLightness(theme.main, 0.1);
-};
-
-export const getMainBackgroundColor = (theme: IReqoreTheme): TReqoreHexColor =>
-  changeLightness(theme.main, 0.02);
-
-export const getColorFromMaybeString = (
-  theme: IReqoreTheme,
-  color: TReqoreEffectColor
-): TReqoreHexColor => {
-  if (!color) {
-    return undefined;
-  }
-
-  const [providedColor, shading, multiplier = 1, alpha = 1]: TReqoreEffectColorList = color.split(
-    ':'
-  ) as TReqoreEffectColorList;
-
-  if (providedColor === 'transparent') {
-    return theme.originalMain;
-  }
-
-  // First we need to get the actual color
-  let _color: TReqoreHexColor;
-
-  if (!providedColor || providedColor === 'main') {
-    _color = theme.main;
-  }
-
-  if (theme.intents[providedColor]) {
-    _color = theme.intents[providedColor];
-  }
-
-  if (isValidSixCharHex(providedColor)) {
-    _color = providedColor as TReqoreHexColor;
-  }
-
-  if (shading) {
-    if (shading === 'lighten') {
-      _color = lighten(0.033 * multiplier, _color) as TReqoreHexColor;
-    } else if (shading === 'darken') {
-      _color = darken(0.033 * multiplier, _color) as TReqoreHexColor;
-    }
-  }
-
-  if (_color && _color.length === 7 && alpha < 1) {
-    _color = RGBAToHexA(transparentize(1 - alpha, _color));
-  }
-
-  return _color;
-};
-
-export const createEffectGradient = (
-  theme: IReqoreTheme,
-  colors: TReqoreEffectGradientColors,
-  lighten: number = 0,
-  minimal?: boolean,
-  active?: boolean
-): string => {
-  let _colors: TReqoreEffectGradientColorsObject;
-  // Check if the colors are valid
-  if (!colors) {
-    throw new Error('You need to provide colors');
-  }
-
-  if (typeof colors === 'string') {
-    _colors = buildGradientColorsFromString(theme, colors);
-  } else {
-    _colors = colors;
-  }
-
-  return reduce(
-    _colors,
-    (colorsString, color, percentage) => {
-      return `${colorsString}, ${
-        minimal
-          ? active
-            ? theme.originalMain
-            : changeLightness(theme.originalMain, lighten)
-          : changeLightness(getColorFromMaybeString(theme, color), lighten)
-      } ${percentage}%`;
-    },
-    ''
-  );
-};
-
-export const buildGradientColorsFromString = (
-  theme: IReqoreTheme,
-  color: 'main' | TReqoreHexColor | TReqoreIntent
-): TReqoreEffectGradientColorsObject => {
-  if (!color) {
-    throw new Error('You need to provide a color or intent');
-  }
-
-  const colorFrom: TReqoreHexColor = getColorFromMaybeString(theme, `${color}:lighten:1`);
-  const colorTo: TReqoreHexColor = getColorFromMaybeString(theme, `${color}`);
-
-  return {
-    0: colorFrom,
-    100: colorTo,
-  };
-};
-
-export const getNthGradientColor = (
-  theme: IReqoreTheme,
-  colors?: TReqoreEffectGradientColors,
-  nth: number = 1
-): TReqoreHexColor | undefined => {
-  const _colors =
-    typeof colors === 'string' ? buildGradientColorsFromString(theme, colors) : colors;
-
-  if (_colors) {
-    return getColorFromMaybeString(theme, Object.values(_colors)[nth - 1]);
-  }
-
-  return undefined;
-};
-
-export const getGradientMix = (
-  theme: IReqoreTheme,
-  colors: TReqoreEffectGradientColors,
-  fallback?: TReqoreHexColor
-): TReqoreHexColor | undefined => {
-  const _colors =
-    typeof colors === 'string' ? buildGradientColorsFromString(theme, colors) : colors;
-
-  if (colors && Object.keys(colors).length === 2) {
-    const gradientColor1: TReqoreHexColor = getNthGradientColor(theme, _colors);
-    const gradientColor2: TReqoreHexColor = getNthGradientColor(theme, _colors, 2);
-
-    return RGBAToHexA(
-      mix(
-        0.5,
-        gradientColor1 === '#00000000' ? theme.main : gradientColor1,
-        gradientColor2 === '#00000000' ? theme.main : gradientColor2
-      ) as TReqoreHexColor
-    );
-  }
-
-  return fallback;
-};

package/src/helpers/time.ts

@@ -1,21 +0,0 @@
-/**
- * If the time is larger than one day, update once a day. If the time is larger than one hour,
-update once an hour. Otherwise update every 5 seconds.
- * @param {number} time - the time in milliseconds since the epoch
- * @returns The interval ID.
- */
-export const getTimeAgoIntervalDelay = (time: number): number => {
-  // If the time is larger than one day
-  if (Date.now() - time > 60000 * 60 * 24) {
-    // update once a day
-    return 60000 * 60 * 24;
-  }
-  // If the time is larger than one hour
-  if (Date.now() - time > 60000 * 60) {
-    // update once an hour
-    return 60000 * 60;
-  }
-
-  // Otherwise update every 5 seconds
-  return 5000;
-};

package/src/helpers/utils.ts

@@ -1,152 +0,0 @@
-import {
-  isArray,
-  isBoolean,
-  isFunction,
-  isNull,
-  isNumber,
-  isObject,
-  isString,
-  isUndefined,
-} from 'lodash';
-import { IReqorePanelAction } from '../components/Panel';
-import { NUMBER_TO_SIZE, SIZES, SIZE_TO_NUMBER, TSizes } from '../constants/sizes';
-
-export const sleep = async (ms: number) => await new Promise((r) => setTimeout(r, ms));
-
-export const getTypeFromValue = (item: any): string => {
-  if (isBoolean(item)) {
-    return 'boolean';
-  }
-
-  if (isString(item)) {
-    return 'string';
-  }
-
-  if (isNumber(item)) {
-    return 'number';
-  }
-
-  if (isArray(item)) {
-    return 'array';
-  }
-
-  if (isObject(item)) {
-    return 'object';
-  }
-
-  if (isFunction(item)) {
-    return 'function';
-  }
-
-  if (isNull(item) || isUndefined(item)) {
-    return 'null';
-  }
-
-  return 'null';
-};
-
-export const getLineCount = (value: string | null): number => {
-  try {
-    return value?.match(/[^\n]*\n[^\n]*/gi)?.length ?? 0;
-  } catch (e) {
-    return 0;
-  }
-};
-
-// A function that takes list of objects and transforms it
-// to a CSV string
-export const convertToCSV = (objArray: any[]): string => {
-  const header = Object.keys(objArray[0]).join(',');
-  const rows = objArray.map((obj) =>
-    Object.values(obj)
-      .map((value) => JSON.stringify(value))
-      .join(',')
-  );
-
-  return [header, ...rows].join('\n');
-};
-
-export const calculateStringSizeInPixels = (value: string = '', fontSize: number): number => {
-  const widths = [
-    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-    0.2796875, 0.2765625, 0.3546875, 0.5546875, 0.5546875, 0.8890625, 0.665625, 0.190625, 0.3328125,
-    0.3328125, 0.3890625, 0.5828125, 0.2765625, 0.3328125, 0.2765625, 0.3015625, 0.5546875,
-    0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875,
-    0.5546875, 0.2765625, 0.2765625, 0.584375, 0.5828125, 0.584375, 0.5546875, 1.0140625, 0.665625,
-    0.665625, 0.721875, 0.721875, 0.665625, 0.609375, 0.7765625, 0.721875, 0.2765625, 0.5, 0.665625,
-    0.5546875, 0.8328125, 0.721875, 0.7765625, 0.665625, 0.7765625, 0.721875, 0.665625, 0.609375,
-    0.721875, 0.665625, 0.94375, 0.665625, 0.665625, 0.609375, 0.2765625, 0.3546875, 0.2765625,
-    0.4765625, 0.5546875, 0.3328125, 0.5546875, 0.5546875, 0.5, 0.5546875, 0.5546875, 0.2765625,
-    0.5546875, 0.5546875, 0.221875, 0.240625, 0.5, 0.221875, 0.8328125, 0.5546875, 0.5546875,
-    0.5546875, 0.5546875, 0.3328125, 0.5, 0.2765625, 0.5546875, 0.5, 0.721875, 0.5, 0.5, 0.5,
-    0.3546875, 0.259375, 0.353125, 0.5890625,
-  ];
-  const avg = 0.5279276315789471;
-
-  /* It's calculating the width of a string in pixels. */
-  return (
-    Array.from(value).reduce((acc, cur) => acc + (widths[cur.charCodeAt(0)] ?? avg), 0) *
-    (fontSize * 1.35)
-  );
-};
-
-export const isStringSize = (value: TSizes | string | number) => {
-  return SIZES.includes(value as TSizes);
-};
-
-export const getOneLessSize = (size: TSizes): TSizes => {
-  // Get the initial sizes number
-  const initialSizeNumber: number = SIZE_TO_NUMBER[size];
-  // Reduce the size number by one
-  const oneLessSizeNumber: number = initialSizeNumber - 1 === 0 ? 1 : initialSizeNumber - 1;
-  // Get the size name from the number
-  return NUMBER_TO_SIZE[oneLessSizeNumber];
-};
-
-export const getOneHigherSize = (size: TSizes): TSizes => {
-  // Get the initial sizes number
-  const initialSizeNumber: number = SIZE_TO_NUMBER[size];
-  // Reduce the size number by one
-  const oneHigherSizeNumber: number = initialSizeNumber + 1 === 6 ? 5 : initialSizeNumber + 1;
-  // Get the size name from the number
-  return NUMBER_TO_SIZE[oneHigherSizeNumber];
-};
-
-export const isActionShown = (action: IReqorePanelAction) => action.show !== false;
-
-export const alignToFlexAlign = (
-  align: 'left' | 'right' | 'center'
-): 'flex-start' | 'center' | 'flex-end' => {
-  switch (align) {
-    case 'left':
-      return 'flex-start';
-    case 'right':
-      return 'flex-end';
-    case 'center':
-      return 'center';
-    default:
-      return 'flex-start';
-  }
-};
-
-export function decycle(obj, stack = []) {
-  if (!obj || typeof obj !== 'object') return obj;
-
-  if (stack.includes(obj)) return null;
-
-  const s = stack.concat([obj]);
-
-  return Array.isArray(obj)
-    ? obj.map((x) => decycle(x, s))
-    : Object.fromEntries(Object.entries(obj).map(([k, v]) => [k, decycle(v, s)]));
-}
-
-export const stringifyAndDecycleObject = (obj: any): string => {
-  return JSON.stringify(decycle(obj), (_key, value) => {
-    if (typeof value === 'function') {
-      return value.toString();
-    }
-
-    return value;
-  });
-};

package/src/hooks/useAutoFocus.ts

@@ -1,106 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react';
-import { useUnmount, useUpdateEffect } from 'react-use';
-
-export type TReqoreAutoFocusType = 'auto' | 'keypress';
-
-export interface IReqoreAutoFocusRules {
-  type: TReqoreAutoFocusType;
-  viewportOnly?: boolean;
-  viewport?: HTMLElement;
-  viewportMargin?: string;
-  shortcut?: 'letters' | 'numbers' | string | ('letters' | 'numbers' | string)[];
-  clearOnFocus?: boolean;
-  doNotInsertShortcut?: boolean;
-}
-
-export const useAutoFocus = (
-  element: HTMLInputElement | HTMLTextAreaElement,
-  rules?: IReqoreAutoFocusRules,
-  onChange?: (event: any) => void
-) => {
-  const isInViewport = useRef<boolean>(false);
-  const observer = useRef<IntersectionObserver>(null);
-
-  const focus = useCallback(() => {
-    if (!rules.viewportOnly || isInViewport.current) {
-      if (rules.clearOnFocus) {
-        onChange?.({ target: { value: '' } } as any);
-      }
-
-      element.setSelectionRange(-1, -1);
-      element.focus();
-    }
-  }, [element, rules, isInViewport.current]);
-
-  const handleKeyDown = (e: KeyboardEvent) => {
-    // Check if this event came from another html input
-    if (
-      e.target &&
-      ((e.target as HTMLElement).tagName === 'INPUT' ||
-        (e.target as HTMLElement).tagName === 'TEXTAREA')
-    ) {
-      return;
-    }
-
-    const shortcut = Array.isArray(rules?.shortcut) ? rules?.shortcut : [rules?.shortcut];
-
-    if (shortcut.includes('letters') && e.key.length === 1 && e.key.match(/[a-z]/i)) {
-      focus();
-    }
-
-    if (shortcut.includes('numbers') && e.key.length === 1 && e.key.match(/[0-9]/i)) {
-      focus();
-    }
-
-    if (shortcut.includes(e.key)) {
-      focus();
-    }
-  };
-
-  useUpdateEffect(() => {
-    if (element && rules) {
-      if (rules.viewportOnly) {
-        observer.current = new IntersectionObserver(
-          (entries: IntersectionObserverEntry[]) => {
-            entries.forEach((entry) => {
-              if (entry.isIntersecting) {
-                isInViewport.current = true;
-              } else {
-                isInViewport.current = false;
-              }
-              // If the focus type is auto, we focus the element now if its in the viewport
-              // and set the observer to null so it doesn't run again
-              if (rules.type === 'auto' && isInViewport.current) {
-                element.focus();
-                observer.current?.disconnect();
-                observer.current = null;
-              }
-            });
-          },
-          {
-            root: rules?.viewport,
-            rootMargin: rules?.viewportMargin,
-            threshold: 0.8,
-          }
-        );
-
-        observer.current.observe(element);
-      } else if (rules.type === 'auto') {
-        focus();
-      }
-    }
-  }, [element]);
-
-  useUnmount(() => {
-    observer.current?.disconnect();
-  });
-
-  useEffect(() => {
-    if (element && rules && rules.type === 'keypress') {
-      window.addEventListener(rules.doNotInsertShortcut ? 'keyup' : 'keydown', handleKeyDown);
-    }
-
-    return () =>
-      window.removeEventListener(rules?.doNotInsertShortcut ? 'keyup' : 'keydown', handleKeyDown);
-  }, [element, rules]);
-};

package/src/hooks/useCloneThroughFragments.ts

@@ -1,39 +0,0 @@
-import React, { useCallback } from 'react';
-
-export const useCloneThroughFragments = (
-  propsMapper: (
-    props: Record<string | number, any>,
-    reactIndex: number,
-    realIndex: number
-  ) => Record<string | number, any>,
-  deps?: any[]
-) => {
-  let realIndex = 0;
-
-  const clone = useCallback((children: React.ReactNode): React.ReactNode => {
-    return React.Children.map(children, (child, reactIndex) => {
-      if (child && React.isValidElement(child)) {
-        if (child.type === React.Fragment) {
-          return clone(child.props.children);
-        }
-
-        const props = propsMapper(child.props, reactIndex, realIndex);
-
-        /*
-         * Because of the way React.Children.map works, we have to
-         * manually decrement the index for every child that is `null`
-         * because react maps through null children and returns them in `Count`
-         * We filter these children out in the `realChildCount` variable,
-         * but the index is still incremented
-         * */
-        realIndex = realIndex + 1;
-
-        return React.cloneElement(child, props);
-      }
-
-      return child;
-    });
-  }, deps);
-
-  return { clone };
-};

package/src/hooks/useCombinedRefs.ts

@@ -1,26 +0,0 @@
-import React from 'react';
-
-/**
- * It takes a list of refs and returns a single ref that can be used to reference the same underlying
- * DOM element
- * @param refs - An array of refs to combine.
- * @returns A ref object.
- */
-export function useCombinedRefs<T = any>(...refs) {
-  const [_innerRef, setInnerRef] = React.useState(null);
-  const targetRef = React.useRef<T>();
-
-  React.useEffect(() => {
-    [...refs, setInnerRef].forEach((ref) => {
-      if (!ref) return;
-
-      if (typeof ref === 'function') {
-        ref(targetRef.current);
-      } else {
-        ref.current = targetRef.current;
-      }
-    });
-  }, [refs]);
-
-  return { _innerRef, targetRef };
-}

package/src/hooks/useLatestZIndex.ts

@@ -1,13 +0,0 @@
-import { useMemo } from 'react';
-import { useReqoreProperty } from './useReqoreContext';
-
-const useLatestZIndex = (): number => {
-  const getAndIncreaseZIndex = useReqoreProperty('getAndIncreaseZIndex');
-  const latestZIndex = useReqoreProperty('latestZIndex');
-
-  const zIndex = useMemo(() => getAndIncreaseZIndex(), [latestZIndex]);
-
-  return zIndex;
-};
-
-export default useLatestZIndex;