onekijs-ui 0.9.2 → 0.15.2

package/src/utils/event.ts

@@ -1,12 +1,12 @@
 import { useEffect } from 'react';
 
 export const useClickOutside = (
-  ref: React.MutableRefObject<HTMLElement> | HTMLElement | null,
-  onClickOutside: (e: MouseEvent) => void,
+  ref: React.MutableRefObject<HTMLElement | null>,
+  onClickOutside: (e: any) => void,
 ): void => {
   useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      const element = ref && !(ref instanceof HTMLElement) ? ref.current : ref;
+    function handleClickOutside(event: any) {
+      const element = ref.current;
       if (element && !element.contains(event.target as Node)) {
         onClickOutside(event);
       }
@@ -20,3 +20,24 @@ export const useClickOutside = (
     };
   }, [ref, onClickOutside]);
 };
+
+export const useFocusOutside = (
+  ref: React.MutableRefObject<HTMLElement | null>,
+  onFocusOutside: (e: FocusEvent) => void,
+): void => {
+  useEffect(() => {
+    function handleFocusOutside(event: FocusEvent) {
+      const element = ref.current;
+      if (element && !element.contains(event.target as Node)) {
+        onFocusOutside(event);
+      }
+    }
+
+    // Bind the event listener
+    document.addEventListener('focusin', handleFocusOutside);
+    return () => {
+      // Unbind the event listener on clean up
+      document.removeEventListener('focusin', handleFocusOutside);
+    };
+  }, [ref, onFocusOutside]);
+};

package/src/utils/formatter.ts

@@ -1,6 +1,6 @@
-import { AnonymousObject, get } from 'onekijs-core';
-import { Formatter } from '../styles/typings';
-import { hexToRgb } from './color';
+import { AnonymousObject, get } from 'onekijs-framework';
+import { ColorPropertyTheme, Formatter } from '../styles/typings';
+import { applyOpacity } from './color';
 
 export const booleanFormatter: Formatter<boolean> = (value): '0' | '1' => (value ? '1' : '0');
 
@@ -12,20 +12,17 @@ export const themeFormatter = (category: string): Formatter<string | number> =>
 
 export const colorFormatter = (key: string, opacityKey?: string): Formatter<string> => {
   return (value, theme) => {
-    if (Object.keys(theme.kind).includes(value)) {
-      value = theme.kind[value];
+    if (Object.keys(theme.colors).includes(value)) {
+      value = theme.colors[value as ColorPropertyTheme];
     }
     let result = '';
-    value = get(theme, `colors.${value}`, String(value));
+    value = get(theme, `palette.colors.${value}`, String(value));
     if (opacityKey) {
       result = `--${opacityKey}: 1;`;
     }
     result = `${result}${key}: ${value}`;
     if (opacityKey) {
-      const rgb = hexToRgb(value);
-      if (rgb) {
-        result = `${result};${key}: rgba(${rgb.r},${rgb.g},${rgb.b},var(--${opacityKey}))`;
-      }
+      result = `${result};${key}: ${applyOpacity(value, `var(--${opacityKey})`)}`;
     }
     result += ';';
 

package/src/utils/popper.ts

@@ -7,7 +7,7 @@ const refWidth = (type: string): Partial<Modifier<string, Record<string, unknown
     phase: 'beforeWrite',
     requires: ['computeStyles'],
     fn: ({ state }) => {
-      state.styles.popper.width = `${state.rects.reference.width}px`;
+      (state.styles.popper as any)[type] = `${state.rects.reference.width}px`;
     },
     effect: ({ state }) => {
       (state.elements.popper.style as any)[type] = `${state.elements.reference.getBoundingClientRect().width}px`;

package/src/utils/size.ts

@@ -0,0 +1,12 @@
+import { GridSize } from '../components/grid/typings';
+
+export const calcSize = (size: string, fn: (size: number) => number): string => {
+  const sizeNumber = parseFloat(size);
+  const unit = size.substr(`${sizeNumber}`.length);
+  const nextNumber = fn(sizeNumber);
+  return `${nextNumber}${unit}`;
+};
+
+export const gridSize = (size: GridSize): string => {
+  return `${(100 / 12) * size}%`;
+};

package/src/utils/style.ts

@@ -1,8 +1,8 @@
 /* eslint-disable prettier/prettier */
-import { AnonymousObject, lcfirst, toKebabCase } from 'onekijs-core';
+import { AnonymousObject, lcfirst, toKebabCase } from 'onekijs-framework';
+import { CSSProperties } from 'react';
 import { css, FlattenInterpolation, ThemeProps } from 'styled-components';
 import { CssProperty, Formatter, Theme } from '../styles/typings';
-import { themeFormatter } from './formatter';
 
 const formatValue = <T>(value: T, theme: Theme, formatter?: Formatter<T>): string => {
   if (formatter) {
@@ -167,13 +167,6 @@ export const preflight = (): FlattenInterpolation<ThemeProps<any>> => {
       border-style: solid;
       border-width: 0;
     }
-    ${toCss('font-family', themeFormatter('font.families'), 'sans', {})}
-    button, input, optgroup, select, textarea {
-      font-family: inherit;
-      font-size: 100%;
-      margin: 0;
-      line-height: 1.15;
-    }
   `;
 };
 
@@ -183,3 +176,7 @@ export const addClassname = (classname: string, existing?: string, after = true)
   }
   return classname;
 };
+
+export const addStyle = (style: CSSProperties, existing?: CSSProperties): CSSProperties => {
+  return Object.assign({}, existing, style);
+};

package/src/vendor/reactVirtual.d.ts

@@ -0,0 +1,76 @@
+type ScrollAlignment = 'start' | 'center' | 'end' | 'auto';
+
+interface ScrollToOptions {
+  align: ScrollAlignment;
+}
+
+interface ScrollToOffsetOptions extends ScrollToOptions {}
+interface ScrollToIndexOptions extends ScrollToOptions {}
+
+type Key = number | string;
+
+export type VirtualItem = {
+  key: Key;
+  index: number;
+  start: number;
+  end: number;
+  size: number;
+  measureRef: (el: HTMLElement | null) => void;
+};
+
+export interface Range {
+  start: number;
+  end: number;
+  overscan: number;
+  size: number;
+}
+
+declare function defaultRangeExtractor(range: Range): number[];
+
+interface Rect {
+  width: number;
+  height: number;
+}
+
+interface ScrollOptions<T> {
+  parentRef: React.RefObject<T>;
+  windowRef?: React.RefObject<Window>;
+  horizontal?: boolean;
+  useObserver?: (ref: React.RefObject<T>, initialRect?: Rect) => Rect;
+  useWindowObserver?: (ref: React.RefObject<Window>, initialRect?: Rect) => Rect;
+  initialRect?: Rect;
+}
+
+declare function useDefaultScroll<T>(
+  options: ScrollOptions<T>,
+): {
+  outerSize: number;
+  scrollOffset: number;
+  scrollToFn: (offset: number, reason: ScrollReason) => void;
+};
+
+type ScrollReason = 'ToIndex' | 'ToOffset' | 'SizeChanged';
+
+export interface Options<T> extends ScrollOptions<T> {
+  size: number;
+  estimateSize?: (index: number) => number;
+  overscan?: number;
+  scrollToFn?: (offset: number, defaultScrollToFn?: (offset: number) => void) => void;
+  paddingStart?: number;
+  paddingEnd?: number;
+  keyExtractor?: (index: number) => Key;
+  rangeExtractor?: (range: Range) => number[];
+  useScroll?: typeof useDefaultScroll;
+}
+
+declare function useVirtual<T>(
+  options: Options<T>,
+): {
+  virtualItems: VirtualItem[];
+  totalSize: number;
+  scrollToOffset: (index: number, options?: ScrollToOffsetOptions) => void;
+  scrollToIndex: (index: number, options?: ScrollToIndexOptions) => void;
+  measure: () => void;
+};
+
+export { defaultRangeExtractor, useVirtual, useDefaultScroll };

package/src/vendor/reactVirtual.js

@@ -0,0 +1,463 @@
+import React from 'react';
+import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
+import useRect from './useRect';
+
+const defaultEstimateSize = () => 50;
+
+const defaultKeyExtractor = (index) => index;
+
+const defaultMeasureSize = (el, horizontal) => {
+  const key = horizontal ? 'offsetWidth' : 'offsetHeight';
+
+  return el[key];
+};
+
+export const defaultRangeExtractor = (range) => {
+  const start = Math.max(range.start - range.overscan, 0);
+  const end = Math.min(range.end + range.overscan, range.size - 1);
+
+  const arr = [];
+
+  for (let i = start; i <= end; i++) {
+    arr.push(i);
+  }
+
+  return arr;
+};
+
+export const useElementScroll = ({ parentRef, horizontal, useObserver, initialRect }) => {
+  const scrollKey = horizontal ? 'scrollLeft' : 'scrollTop';
+  const [scrollOffset, setScrollOffset] = React.useState(0);
+  const [element, setElement] = React.useState(parentRef.current);
+
+  useIsomorphicLayoutEffect(() => {
+    setElement(parentRef.current);
+  });
+
+  useIsomorphicLayoutEffect(() => {
+    if (!element) {
+      setScrollOffset(0);
+
+      return;
+    }
+
+    const onScroll = () => {
+      setScrollOffset(element[scrollKey]);
+    };
+
+    onScroll();
+
+    element.addEventListener('scroll', onScroll, {
+      capture: false,
+      passive: true,
+    });
+
+    return () => {
+      element.removeEventListener('scroll', onScroll);
+    };
+  }, [element, scrollKey]);
+
+  const scrollToFn = React.useCallback(
+    (offset) => {
+      if (parentRef.current) {
+        parentRef.current[scrollKey] = offset;
+      }
+    },
+    [parentRef, scrollKey],
+  );
+
+  const useMeasureParent = useObserver || useRect;
+
+  const sizeKey = horizontal ? 'width' : 'height';
+
+  const { [sizeKey]: outerSize } = useMeasureParent(parentRef, initialRect);
+
+  return {
+    outerSize,
+    scrollOffset,
+    scrollToFn,
+  };
+};
+
+const useWindowRect = (windowRef, initialRect = { width: 0, height: 0 }) => {
+  const [rect, setRect] = React.useState(initialRect);
+  const [element, setElement] = React.useState(windowRef.current);
+
+  useIsomorphicLayoutEffect(() => {
+    setElement(windowRef.current);
+  });
+
+  useIsomorphicLayoutEffect(() => {
+    if (!element) {
+      return;
+    }
+
+    function resizeHandler() {
+      const next = {
+        width: element.innerWidth,
+        height: element.innerHeight,
+      };
+
+      setRect((prev) => (prev.height !== next.height || prev.width !== next.width ? next : prev));
+    }
+    resizeHandler();
+
+    element.addEventListener('resize', resizeHandler);
+
+    return () => {
+      element.removeEventListener('resize', resizeHandler);
+    };
+  }, [element]);
+
+  return rect;
+};
+
+export const useWindowScroll = ({ windowRef, parentRef, horizontal, useWindowObserver, initialRect }) => {
+  const [scrollOffset, setScrollOffset] = React.useState(0);
+  const [element, setElement] = React.useState(windowRef.current);
+
+  const parentOffsetRef = React.useRef(0);
+
+  const rectKey = horizontal ? 'left' : 'top';
+  const scrollKey = horizontal ? 'scrollX' : 'scrollY';
+
+  useIsomorphicLayoutEffect(() => {
+    setElement(windowRef.current);
+  });
+
+  useIsomorphicLayoutEffect(() => {
+    if (!element) {
+      parentOffsetRef.current = 0;
+      setScrollOffset(0);
+
+      return;
+    }
+
+    if (parentRef.current) {
+      parentOffsetRef.current = element[scrollKey] + parentRef.current.getBoundingClientRect()[rectKey];
+    }
+
+    const onScroll = () => {
+      const offset = element[scrollKey] - parentOffsetRef.current;
+      setScrollOffset(offset);
+    };
+
+    onScroll();
+
+    element.addEventListener('scroll', onScroll, {
+      capture: false,
+      passive: true,
+    });
+
+    return () => {
+      element.removeEventListener('scroll', onScroll);
+    };
+  }, [element, scrollKey, rectKey, parentRef]);
+
+  const scrollToFn = React.useCallback(
+    (offset, reason) => {
+      if (windowRef.current) {
+        const delta = ['ToIndex', 'SizeChanged'].includes(reason) ? parentOffsetRef.current : 0;
+
+        windowRef.current.scrollTo({ [rectKey]: offset + delta });
+      }
+    },
+    [windowRef, rectKey],
+  );
+
+  const useMeasureParent = useWindowObserver || useWindowRect;
+
+  const sizeKey = horizontal ? 'width' : 'height';
+
+  const { [sizeKey]: outerSize } = useMeasureParent(windowRef, initialRect);
+
+  return {
+    outerSize,
+    scrollOffset,
+    scrollToFn,
+  };
+};
+
+export const useDefaultScroll = (props) => {
+  const { parentRef, windowRef } = props;
+
+  const useWindow = windowRef !== undefined;
+
+  const emptyRef = React.useRef(null);
+
+  const elementRes = useElementScroll({
+    ...props,
+    parentRef: useWindow ? emptyRef : parentRef,
+  });
+
+  const windowRes = useWindowScroll({
+    ...props,
+    windowRef: useWindow ? windowRef : emptyRef,
+  });
+
+  return useWindow ? windowRes : elementRes;
+};
+
+export function useVirtual({
+  size = 0,
+  estimateSize = defaultEstimateSize,
+  overscan = 1,
+  paddingStart = 0,
+  paddingEnd = 0,
+  parentRef,
+  windowRef,
+  horizontal,
+  scrollToFn,
+  useObserver,
+  useWindowObserver,
+  initialRect,
+  keyExtractor = defaultKeyExtractor,
+  measureSize = defaultMeasureSize,
+  rangeExtractor = defaultRangeExtractor,
+  useScroll = useDefaultScroll,
+}) {
+  const latestRef = React.useRef({
+    scrollOffset: 0,
+    measurements: [],
+  });
+
+  const { outerSize, scrollOffset, scrollToFn: defaultScrollToFn } = useScroll({
+    windowRef,
+    parentRef,
+    horizontal,
+    useObserver,
+    useWindowObserver,
+    initialRect,
+  });
+
+  const scrollOffsetWithAdjustmentsRef = React.useRef(scrollOffset);
+  if (latestRef.current.scrollOffset !== scrollOffset) {
+    scrollOffsetWithAdjustmentsRef.current = scrollOffset;
+  }
+
+  latestRef.current.outerSize = outerSize;
+  latestRef.current.scrollOffset = scrollOffset;
+
+  const scrollTo = React.useCallback(
+    (offset, reason) => {
+      const resolvedScrollToFn = scrollToFn || ((offset) => defaultScrollToFn(offset, reason));
+      resolvedScrollToFn(offset, defaultScrollToFn);
+    },
+    [scrollToFn, defaultScrollToFn],
+  );
+
+  const [measuredCache, setMeasuredCache] = React.useState({});
+
+  const measure = React.useCallback(() => setMeasuredCache({}), []);
+
+  const pendingMeasuredCacheIndexesRef = React.useRef([]);
+
+  const measurements = React.useMemo(() => {
+    const min =
+      pendingMeasuredCacheIndexesRef.current.length > 0 ? Math.min(...pendingMeasuredCacheIndexesRef.current) : 0;
+    pendingMeasuredCacheIndexesRef.current = [];
+
+    const measurements = latestRef.current.measurements.slice(0, min);
+
+    for (let i = min; i < size; i++) {
+      const key = keyExtractor(i);
+      const measuredSize = measuredCache[key];
+      const start = measurements[i - 1] ? measurements[i - 1].end : paddingStart;
+      const size = typeof measuredSize === 'number' ? measuredSize : estimateSize(i);
+      const end = start + size;
+      measurements[i] = { index: i, start, size, end, key };
+    }
+    return measurements;
+  }, [estimateSize, measuredCache, paddingStart, size, keyExtractor]);
+
+  const totalSize = (measurements[size - 1]?.end || 0) + paddingEnd;
+
+  latestRef.current.measurements = measurements;
+  latestRef.current.totalSize = totalSize;
+
+  const { start, end } = calculateRange(latestRef.current);
+
+  const idRef = React.useRef({});
+
+  const indexes = React.useMemo(
+    () =>
+      rangeExtractor({
+        start,
+        end,
+        overscan,
+        size: measurements.length,
+      }),
+    [start, end, overscan, measurements.length, rangeExtractor],
+  );
+
+  const measureSizeRef = React.useRef(measureSize);
+  measureSizeRef.current = measureSize;
+
+  const virtualItems = React.useMemo(() => {
+    const virtualItems = [];
+
+    for (let k = 0, len = indexes.length; k < len; k++) {
+      const i = indexes[k];
+      const measurement = measurements[i];
+
+      const item = {
+        ...measurement,
+        measureRef: (el) => {
+          if (el) {
+            if (el.id) {
+              idRef.current[el.id] = {
+                item,
+                index: i,
+              };
+            }
+            const measuredSize = measureSizeRef.current(el, horizontal);
+
+            if (measuredSize !== item.size) {
+              const { scrollOffset } = latestRef.current;
+              if (item.start < scrollOffset && item.end < scrollOffset) {
+                const delta = measuredSize - item.size;
+                scrollOffsetWithAdjustmentsRef.current += delta;
+                defaultScrollToFn(scrollOffsetWithAdjustmentsRef.current, 'SizeChanged');
+              }
+
+              pendingMeasuredCacheIndexesRef.current.push(i);
+
+              setMeasuredCache((old) => ({
+                ...old,
+                [item.key]: measuredSize,
+              }));
+            }
+          }
+        },
+      };
+
+      virtualItems.push(item);
+    }
+
+    return virtualItems;
+  }, [indexes, defaultScrollToFn, horizontal, measurements]);
+
+  const mountedRef = React.useRef(false);
+
+  useIsomorphicLayoutEffect(() => {
+    if (mountedRef.current) {
+      setMeasuredCache({});
+    }
+    mountedRef.current = true;
+  }, [estimateSize]);
+
+  const scrollToOffset = React.useCallback(
+    (toOffset, { align = 'start' } = {}, reason = 'ToOffset') => {
+      const { scrollOffset, outerSize } = latestRef.current;
+
+      if (align === 'auto') {
+        if (toOffset <= scrollOffset) {
+          align = 'start';
+        } else if (toOffset >= scrollOffset + outerSize) {
+          align = 'end';
+        } else {
+          align = 'start';
+        }
+      }
+
+      if (align === 'start') {
+        scrollTo(toOffset, reason);
+      } else if (align === 'end') {
+        scrollTo(toOffset - outerSize, reason);
+      } else if (align === 'center') {
+        scrollTo(toOffset - outerSize / 2, reason);
+      }
+    },
+    [scrollTo],
+  );
+
+  const tryScrollToIndex = React.useCallback(
+    (index, { align = 'auto', ...rest } = {}) => {
+      const { measurements, scrollOffset, outerSize } = latestRef.current;
+
+      const measurement = measurements[Math.max(0, Math.min(index, size - 1))];
+
+      if (!measurement) {
+        return;
+      }
+
+      if (align === 'auto') {
+        if (measurement.end >= scrollOffset + outerSize) {
+          align = 'end';
+        } else if (measurement.start <= scrollOffset) {
+          align = 'start';
+        } else {
+          return;
+        }
+      }
+
+      const toOffset =
+        align === 'center'
+          ? measurement.start + measurement.size / 2
+          : align === 'end'
+          ? measurement.end
+          : measurement.start;
+
+      scrollToOffset(toOffset, { align, ...rest }, 'ToIndex');
+    },
+    [scrollToOffset, size],
+  );
+
+  const scrollToIndex = React.useCallback(
+    (...args) => {
+      // We do a double request here because of
+      // dynamic sizes which can cause offset shift
+      // and end up in the wrong spot. Unfortunately,
+      // we can't know about those dynamic sizes until
+      // we try and render them. So double down!
+      tryScrollToIndex(...args);
+      requestAnimationFrame(() => {
+        tryScrollToIndex(...args);
+      });
+    },
+    [tryScrollToIndex],
+  );
+
+  return {
+    virtualItems,
+    totalSize,
+    scrollToOffset,
+    scrollToIndex,
+    measure,
+  };
+}
+
+const findNearestBinarySearch = (low, high, getCurrentValue, value) => {
+  while (low <= high) {
+    let middle = ((low + high) / 2) | 0;
+    let currentValue = getCurrentValue(middle);
+
+    if (currentValue < value) {
+      low = middle + 1;
+    } else if (currentValue > value) {
+      high = middle - 1;
+    } else {
+      return middle;
+    }
+  }
+
+  if (low > 0) {
+    return low - 1;
+  } else {
+    return 0;
+  }
+};
+
+function calculateRange({ measurements, outerSize, scrollOffset }) {
+  const size = measurements.length - 1;
+  const getOffset = (index) => measurements[index].start;
+
+  let start = findNearestBinarySearch(0, size, getOffset, scrollOffset);
+  let end = start;
+
+  while (end < size && measurements[end].end < scrollOffset + outerSize) {
+    end++;
+  }
+
+  return { start, end };
+}

package/src/vendor/useIsomorphicLayoutEffect.js

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;