@quillsql/react 1.7.4 → 1.7.6

package/src/assets/index.ts

@@ -1,16 +0,0 @@
-export { default as ArrowDownHeadIcon } from "./ArrowDownHeadIcon";
-export { default as ArrowDownRightIcon } from "./ArrowDownRightIcon";
-export { default as ArrowDownIcon } from "./ArrowDownIcon";
-export { default as ArrowRightIcon } from "./ArrowRightIcon";
-export { default as ArrowRightHeadIcon } from "./ArrowRightHeadIcon";
-export { default as ArrowLeftHeadIcon } from "./ArrowLeftHeadIcon";
-export { default as DoubleArrowLeftHeadIcon } from "./DoubleArrowLeftHeadIcon";
-export { default as DoubleArrowRightHeadIcon } from "./DoubleArrowRightHeadIcon";
-export { default as ArrowUpHeadIcon } from "./ArrowUpHeadIcon";
-export { default as ArrowUpIcon } from "./ArrowUpIcon";
-export { default as ArrowUpRightIcon } from "./ArrowUpRightIcon";
-export { default as CalendarIcon } from "./CalendarIcon";
-export { default as ExclamationFilledIcon } from "./ExclamationFilledIcon";
-export { default as LoadingSpinner } from "./LoadingSpinner";
-export { default as SearchIcon } from "./SearchIcon";
-export { default as XCircleIcon } from "./XCircleIcon";

package/src/components/BigModal/BigModal.tsx

@@ -1,108 +0,0 @@
-/* eslint-disable react/display-name */
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-
-import { useOnClickOutside, useOnWindowResize } from '../../hooks';
-
-import { HorizontalPosition } from '../../lib/inputTypes';
-import { mergeRefs } from '../../lib';
-
-export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
-  showModal: boolean;
-  setShowModal:
-    | React.Dispatch<React.SetStateAction<boolean>>
-    | ((nextState: boolean) => void);
-  parentRef?: React.RefObject<HTMLElement>;
-  width?: number;
-  maxHeight?: string;
-  anchorPosition?: HorizontalPosition;
-  children: React.ReactNode;
-  theme: any;
-}
-
-const BigModal = React.forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
-  const {
-    showModal,
-    setShowModal,
-    parentRef,
-    width,
-    maxHeight = '18rem',
-    children,
-    className,
-    theme,
-    ...other
-  } = props;
-  const [modalExceedsWindow, setModalExceedsWindow] = useState(false);
-
-  const modalRef = useRef<HTMLDivElement>(null);
-
-  const checkModalExceedsWindow = useCallback(
-    (modalWidth: number, windowWidth: number): boolean => {
-      if (!parentRef.current) {
-        return false;
-      }
-      const modalBoundingRight =
-        parentRef.current.getBoundingClientRect().left + modalWidth;
-      return windowWidth - modalBoundingRight < 0;
-    },
-    [parentRef]
-  );
-
-  const getAbsoluteSpacing = () => {
-    return modalExceedsWindow ? '0' : '0';
-  };
-
-  useOnClickOutside(modalRef, e => {
-    // Exclude click on trigger button (e.g. Dropdown Button) from outside click handler
-    const isTriggerElem = parentRef
-      ? parentRef.current?.contains(e.target)
-      : false;
-    if (!isTriggerElem) {
-      setShowModal(false);
-    }
-  });
-
-  // Execute only when modal is of absolute size
-  useEffect(() => {
-    if (width) {
-      setModalExceedsWindow(checkModalExceedsWindow(width, window.innerWidth));
-    }
-  }, [checkModalExceedsWindow, parentRef, width]);
-
-  useOnWindowResize(() => {
-    if (width) {
-      setModalExceedsWindow(checkModalExceedsWindow(width, window.innerWidth));
-    }
-  });
-
-  return showModal ? (
-    <div
-      ref={mergeRefs([modalRef, ref])}
-      style={{
-        position: 'absolute',
-        zIndex: 10,
-        overflowY: 'auto',
-        backgroundColor: theme?.backgroundColor || 'white',
-        borderColor: theme?.borderColor || '#E5E7EB',
-        borderTopStyle: 'solid',
-        borderBottomStyle: 'solid',
-        borderLeftStyle: 'solid',
-        borderRightStyle: 'solid',
-        borderTopWidth: 1,
-        borderBottomWidth: 1,
-        borderLeftWidth: 1,
-        borderRightWidth: 1,
-        borderRadius: '0.375rem',
-        boxShadow:
-          '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-      }}
-      {...other}
-    >
-      {children}
-    </div>
-  ) : null;
-});
-
-export default BigModal;

package/src/components/Dropdown/Dropdown.tsx

@@ -1,169 +0,0 @@
-/* eslint-disable react/display-name */
-import React, { useRef, useState } from 'react';
-
-import { HoveredValueContext, SelectedValueContext } from '../../contexts';
-
-import { useInternalState, useSelectOnKeyDown } from '../../hooks';
-
-import { ArrowDownHeadIcon } from '../../assets';
-
-import { mergeRefs } from '../../lib';
-import { constructValueToNameMapping, hasValue } from '../selectUtils';
-import { DropdownItemProps } from './DropdownItem';
-import Modal from '../Modal';
-
-export interface DropdownProps extends React.HTMLAttributes<HTMLDivElement> {
-  value?: string;
-  defaultValue?: string;
-  onValueChange?: (value: string) => void;
-  placeholder?: string;
-  disabled?: boolean;
-  icon?: React.JSXElementConstructor<any>;
-  children: React.ReactElement[] | React.ReactElement;
-  theme: any;
-}
-
-const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
-  (props, ref) => {
-    const {
-      defaultValue,
-      value,
-      onValueChange,
-      placeholder = 'Select...',
-      disabled = false,
-      icon,
-      children,
-      className,
-      theme,
-      ...other
-    } = props;
-    const [selectedValue, setSelectedValue] = useInternalState(
-      defaultValue,
-      value
-    );
-    const [isFocused, setIsFocused] = useState(false);
-
-    const dropdownRef = useRef(null);
-
-    const Icon = icon;
-    const valueToNameMapping = constructValueToNameMapping(children);
-    const optionValues = React.Children.map(
-      children,
-      (child: { props: DropdownItemProps }) => child.props.value
-    );
-
-    const handleValueChange = (value: string) => {
-      setSelectedValue(value);
-      setIsFocused(false);
-      onValueChange?.(value);
-    };
-
-    const [hoveredValue, handleKeyDown] = useSelectOnKeyDown(
-      handleValueChange,
-      optionValues,
-      isFocused,
-      setIsFocused,
-      selectedValue
-    );
-
-    const hasSelection = hasValue(selectedValue);
-
-    return (
-      <div
-        ref={mergeRefs([dropdownRef, ref])}
-        onKeyDown={handleKeyDown}
-        style={{
-          position: 'relative',
-          width: '100%',
-          minWidth: '10rem',
-        }}
-        {...other}
-      >
-        <button
-          style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            width: '100%',
-            outline: 'none',
-            padding: '1.5rem 2rem',
-            borderRadius: '0.375rem',
-            border: '2px solid',
-            boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-            cursor: 'pointer',
-            background: 'white',
-          }}
-          type="button"
-          onClick={() => setIsFocused(!isFocused)}
-          disabled={disabled}
-        >
-          <div
-            style={{
-              display: 'flex',
-              justifyContent: 'start',
-              alignItems: 'center',
-              whiteSpace: 'nowrap',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-            }}
-          >
-            {Icon ? (
-              <Icon
-                style={{
-                  flexShrink: 0,
-                  height: '1.5rem',
-                  width: '1.5rem',
-                  color: theme?.secondaryTextColor || '#6C727F',
-                  marginRight: '1.5rem',
-                }}
-                aria-hidden="true"
-              />
-            ) : null}
-            <p
-              style={{
-                margin: 0,
-                fontSize: '0.875rem',
-                fontWeight: '500',
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-              }}
-            >
-              {selectedValue
-                ? valueToNameMapping.get(selectedValue)
-                : placeholder}
-            </p>
-          </div>
-          <ArrowDownHeadIcon
-            style={{
-              flexShrink: 0,
-              height: '1.5rem',
-              width: '1.5rem',
-              marginRight: '-0.25rem',
-              color: theme?.secondaryTextColor || '#6C727F',
-            }}
-            aria-hidden="true"
-          />
-        </button>
-        <Modal
-          theme={theme}
-          showModal={isFocused}
-          setShowModal={setIsFocused}
-          parentRef={dropdownRef}
-        >
-          <SelectedValueContext.Provider
-            value={{ selectedValue, handleValueChange }}
-          >
-            <HoveredValueContext.Provider value={{ hoveredValue }}>
-              {React.Children.map(children, (child: React.ReactElement) =>
-                React.cloneElement(child)
-              )}
-            </HoveredValueContext.Provider>
-          </SelectedValueContext.Provider>
-        </Modal>
-      </div>
-    );
-  }
-);
-
-export default Dropdown;

package/src/components/Dropdown/DropdownItem.tsx

@@ -1,68 +0,0 @@
-/* eslint-disable react/display-name */
-import React, { useContext } from 'react';
-
-import { HoveredValueContext, SelectedValueContext } from '../../contexts';
-
-export interface DropdownItemProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  value: string;
-  text?: string;
-  icon?: React.ElementType;
-  theme: any;
-  lastItem?: boolean;
-}
-
-const DropdownItem = React.forwardRef<HTMLButtonElement, DropdownItemProps>(
-  (props, ref) => {
-    const { value, text, icon, className, theme, lastItem, ...other } = props;
-    const { selectedValue, handleValueChange } =
-      useContext(SelectedValueContext);
-    const { hoveredValue } = useContext(HoveredValueContext);
-    const isActive = selectedValue === value;
-    const isHovered = hoveredValue === value;
-
-    const Icon = icon ? icon : null;
-    return (
-      <button
-        ref={ref}
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'start',
-          width: '100%',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          padding: '0.75rem 1.25rem',
-          fontSize: '0.875rem',
-          borderStyle: 'solid',
-          borderBottomWidth: lastItem ? '0px' : '1px',
-          borderBottomColor: theme?.borderColor || '#E5E7EB',
-          background: theme?.backgroundColor || 'white',
-          borderTop: 'none',
-          borderRight: 'none',
-          borderLeft: 'none',
-          cursor: 'pointer',
-          color: theme?.primaryTextColor || '#364153',
-        }}
-        type="button"
-        onClick={() => handleValueChange?.(value)}
-        {...other}
-      >
-        <p
-          style={{
-            margin: 0,
-            fontFamily: theme?.fontFamily,
-            color: theme?.primaryTextColor,
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-          }}
-        >
-          {text ?? value}
-        </p>
-      </button>
-    );
-  }
-);
-
-export default DropdownItem;

package/src/components/Dropdown/index.ts

@@ -1,2 +0,0 @@
-export { default as Dropdown } from "./Dropdown";
-export { default as DropdownItem } from "./DropdownItem";

package/src/components/Modal/Modal.tsx

@@ -1,132 +0,0 @@
-/* eslint-disable react/display-name */
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-
-import { useOnClickOutside, useOnWindowResize } from '../../hooks';
-
-import { HorizontalPosition } from '../../lib/inputTypes';
-import { mergeRefs } from '../../lib';
-
-export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
-  showModal: boolean;
-  setShowModal:
-    | React.Dispatch<React.SetStateAction<boolean>>
-    | ((nextState: boolean) => void);
-  parentRef?: React.RefObject<HTMLElement>;
-  width?: number;
-  maxHeight?: string;
-  anchorPosition?: HorizontalPosition;
-  children: React.ReactNode;
-  theme: any;
-}
-
-const Modal = React.forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
-  const {
-    showModal,
-    setShowModal,
-    parentRef,
-    width,
-    maxHeight = '18rem',
-    children,
-    className,
-    theme,
-    ...other
-  } = props;
-  const [modalExceedsWindow, setModalExceedsWindow] = useState(false);
-
-  const modalRef = useRef<HTMLDivElement>(null);
-
-  const checkModalExceedsWindow = useCallback(
-    (modalWidth: number, windowWidth: number): boolean => {
-      if (!parentRef.current) {
-        return false;
-      }
-      const modalBoundingRight =
-        parentRef.current.getBoundingClientRect().left + modalWidth;
-      return windowWidth - modalBoundingRight < 0;
-    },
-    [parentRef]
-  );
-
-  const getAbsoluteSpacing = () => {
-    return modalExceedsWindow ? '0' : '0';
-  };
-
-  useOnClickOutside(modalRef, e => {
-    // Exclude click on trigger button (e.g. Dropdown Button) from outside click handler
-    const isTriggerElem = parentRef
-      ? parentRef.current?.contains(e.target)
-      : false;
-    if (!isTriggerElem) {
-      setShowModal(false);
-    }
-  });
-
-  // Execute only when modal is of absolute size
-  useEffect(() => {
-    if (width) {
-      setModalExceedsWindow(checkModalExceedsWindow(width, window.innerWidth));
-    }
-  }, [checkModalExceedsWindow, parentRef, width]);
-
-  useOnWindowResize(() => {
-    if (width) {
-      setModalExceedsWindow(checkModalExceedsWindow(width, window.innerWidth));
-    }
-  });
-
-  return showModal ? (
-    <div
-      ref={mergeRefs([modalRef, ref])}
-      style={{
-        position: 'absolute',
-        zIndex: 10,
-        overflowY: 'auto',
-        width: width ? width : '100%',
-        left: getAbsoluteSpacing(),
-        right: getAbsoluteSpacing(),
-        maxHeight: maxHeight,
-        backgroundColor: theme?.backgroundColor || 'white',
-        borderColor: theme?.borderColor || '#E5E7EB',
-        // borderTopColor: getColorClassNames(
-        //   DEFAULT_COLOR,
-        //   colorPalette.lightBorder
-        // ).borderColor,
-        // borderBottomColor: getColorClassNames(
-        //   DEFAULT_COLOR,
-        //   colorPalette.lightBorder
-        // ).borderColor,
-        // borderLeftColor: getColorClassNames(
-        //   DEFAULT_COLOR,
-        //   colorPalette.lightBorder
-        // ).borderColor,
-        // borderRightColor: getColorClassNames(
-        //   DEFAULT_COLOR,
-        //   colorPalette.lightBorder
-        // ).borderColor,
-        borderTopStyle: 'solid',
-        borderBottomStyle: 'solid',
-        borderLeftStyle: 'solid',
-        borderRightStyle: 'solid',
-        borderTopWidth: 1,
-        borderBottomWidth: 1,
-        borderLeftWidth: 1,
-        borderRightWidth: 1,
-        marginTop: '0.5rem',
-        marginBottom: '0.5rem',
-        borderRadius: '0.375rem',
-        boxShadow:
-          '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
-        // boxShadow: '0 1px 3px 0 #0000001A, 0 1px 2px 0 #0000000F',
-        // borderTopWidth: '2px',
-        // borderBottomWidth: '2px',
-        // borderLeftWidth: '2px',
-        // borderRightWidth: '2px',
-      }}
-      {...other}
-    >
-      {children}
-    </div>
-  ) : null;
-});
-
-export default Modal;

package/src/components/Modal/index.ts

@@ -1 +0,0 @@
-export { default } from "./Modal";

package/src/components/selectUtils.ts

@@ -1,60 +0,0 @@
-import React from 'react';
-// import { twMerge } from 'tailwind-merge';
-
-export interface SelectItemProps {
-  value: string;
-  text?: string;
-}
-
-export function constructValueToNameMapping(
-  children: React.ReactElement[] | React.ReactElement
-) {
-  const valueToNameMapping = new Map<string, string>();
-  React.Children.map(children, (child: { props: SelectItemProps }) => {
-    valueToNameMapping.set(
-      child.props.value,
-      child.props.text ?? child.props.value
-    );
-  });
-  return valueToNameMapping;
-}
-
-export function getFilteredOptions(
-  searchQuery: string,
-  options: SelectItemProps[]
-): SelectItemProps[] {
-  return searchQuery === ''
-    ? options
-    : options.filter((option: SelectItemProps) => {
-        const optionText = option.text ?? option.value;
-        return optionText.toLowerCase().includes(searchQuery.toLowerCase());
-      });
-}
-
-export const getSelectButtonColors = (
-  hasSelection: boolean,
-  isDisabled: boolean,
-  hasError = false
-) => {
-  return null;
-  // return twMerge(
-  //   isDisabled
-  //     ? getColorClassNames(DEFAULT_COLOR, colorPalette.canvasBackground).bgColor
-  //     : getColorClassNames(WHITE, colorPalette.background).bgColor,
-  //   !isDisabled &&
-  //     getColorClassNames(DEFAULT_COLOR, colorPalette.canvasBackground)
-  //       .hoverBgColor,
-  //   hasSelection
-  //     ? getColorClassNames(DEFAULT_COLOR, colorPalette.darkText).textColor
-  //     : getColorClassNames(DEFAULT_COLOR, colorPalette.text).textColor,
-  //   isDisabled &&
-  //     getColorClassNames(DEFAULT_COLOR, colorPalette.lightText).textColor,
-  //   hasError && colorClassNames[BaseColors.Rose][colorPalette.text].textColor,
-  //   hasError
-  //     ? colorClassNames[BaseColors.Rose][colorPalette.ring].borderColor
-  //     : getColorClassNames(DEFAULT_COLOR, colorPalette.ring).borderColor
-  // );
-};
-
-export const hasValue = (value: string | null | undefined) =>
-  value !== null && value !== undefined && value !== '';

package/src/contexts/BaseColorContext.tsx

@@ -1,5 +0,0 @@
-import { createContext } from 'react';
-
-const BaseColorContext = createContext<string>('blue');
-
-export default BaseColorContext;

package/src/contexts/HoveredValueContext.tsx

@@ -1,12 +0,0 @@
-import { Dispatch, SetStateAction, createContext } from 'react';
-
-export interface HoveredValueContextValue {
-  hoveredValue: any | undefined;
-  setHoveredValue?: Dispatch<SetStateAction<any>>;
-}
-
-const HoveredValueContext = createContext<HoveredValueContextValue>({
-  hoveredValue: undefined,
-});
-
-export default HoveredValueContext;

package/src/contexts/RootStylesContext.tsx

@@ -1,5 +0,0 @@
-import { createContext } from 'react';
-
-const RootStylesContext = createContext<string | undefined>(undefined);
-
-export default RootStylesContext;

package/src/contexts/SelectedValueContext.tsx

@@ -1,13 +0,0 @@
-import { createContext } from 'react';
-
-export interface SelectedValueContextValue {
-  selectedValue: any;
-  handleValueChange: ((value: any) => void) | undefined;
-}
-
-const SelectedValueContext = createContext<SelectedValueContextValue>({
-  selectedValue: undefined,
-  handleValueChange: undefined,
-});
-
-export default SelectedValueContext;

package/src/contexts/index.ts

@@ -1,4 +0,0 @@
-export { default as BaseColorContext } from './BaseColorContext';
-export { default as HoveredValueContext } from './HoveredValueContext';
-export { default as RootStylesContext } from './RootStylesContext';
-export { default as SelectedValueContext } from './SelectedValueContext';

package/src/hooks/index.ts

@@ -1,4 +0,0 @@
-export { default as useInternalState } from "./useInternalState";
-export { default as useOnClickOutside } from "./useOnClickOutside";
-export { default as useOnWindowResize } from "./useOnWindowResize";
-export { default as useSelectOnKeyDown } from "./useSelectOnKeyDown";

package/src/hooks/useInternalState.tsx

@@ -1,18 +0,0 @@
-import { useState } from "react";
-
-const useInternalState = <T,>(defaultValueProp: T, valueProp: T) => {
-  const isControlled = valueProp !== undefined;
-  const [valueState, setValueState] = useState(defaultValueProp);
-
-  const value = isControlled ? valueProp : valueState;
-  const setValue = (nextValue: T) => {
-    if (isControlled) {
-      return;
-    }
-    setValueState(nextValue);
-  };
-
-  return [value, setValue] as [T, React.Dispatch<React.SetStateAction<T>>];
-};
-
-export default useInternalState;

package/src/hooks/useOnClickOutside.tsx

@@ -1,23 +0,0 @@
-import { useEffect } from "react";
-
-const useOnClickOutside = (
-  ref: React.RefObject<HTMLDivElement>,
-  handler: { (event: any): void },
-) => {
-  useEffect(() => {
-    const listener = (event: any) => {
-      if (!ref.current || ref.current.contains(event.target)) {
-        return;
-      }
-      handler(event);
-    };
-    document.addEventListener("mousedown", listener);
-    document.addEventListener("touchstart", listener);
-    return () => {
-      document.removeEventListener("mousedown", listener);
-      document.removeEventListener("touchstart", listener);
-    };
-  }, [ref, handler]);
-};
-
-export default useOnClickOutside;

package/src/hooks/useOnWindowResize.tsx

@@ -1,17 +0,0 @@
-import { useEffect, useState } from "react";
-
-const useOnWindowResize = (handler: { (): void }, initialWindowSize?: number) => {
-  const [windowSize, setWindowSize] = useState<undefined | number>(initialWindowSize);
-  useEffect(() => {
-    const handleResize = () => {
-      setWindowSize(window.innerWidth);
-      handler();
-    };
-    handleResize();
-    window.addEventListener("resize", handleResize);
-
-    return () => window.removeEventListener("resize", handleResize);
-  }, [handler, windowSize]);
-};
-
-export default useOnWindowResize;