@xqmsg/ui-core 0.23.1-rc.1 → 0.23.1-rc.2

package/src/components/toolbar/components/actions/sort/index.tsx

@@ -1,49 +1,49 @@
-import React, { useRef, useState } from 'react';
-import { Box, Flex, useOutsideClick } from '@chakra-ui/react';
-import { ChevronDown, TableOutline } from '../../../../icons';
-import { Dropdown } from '../../dropdown';
-import { FieldOption, FieldOptions } from '../../../../input/InputTypes';
-
-export interface SortProps {
-  onSelectItem: (option: FieldOption) => void;
-  sortOptions: FieldOptions;
-}
-
-/**
- * A functional React component utilized to render the `Sort` component
- */
-export const Sort: React.FC<SortProps> = ({ onSelectItem, sortOptions }) => {
-  const dropdownMenuRef = useRef<HTMLDivElement>(null);
-  const [showDropdown, setShowDropdown] = useState(false);
-  const [optionIndex, setOptionIndex] = useState<number | null>(null);
-
-  useOutsideClick({
-    ref: dropdownMenuRef,
-    handler: () => setShowDropdown(false),
-  });
-
-  return (
-    <Box onClick={() => setShowDropdown(!showDropdown)} position="relative">
-      <Flex
-        alignItems="center"
-        cursor="pointer"
-        onClick={() => setShowDropdown(!showDropdown)}
-      >
-        <TableOutline boxSize="16px" />
-        <Box ml="2px">
-          <ChevronDown boxSize="12px" />
-        </Box>
-        {showDropdown && (
-          <Dropdown
-            onSelectItem={onSelectItem}
-            options={sortOptions}
-            position="top"
-            dropdownRef={dropdownMenuRef}
-            optionIndex={optionIndex}
-            setOptionIndex={setOptionIndex}
-          />
-        )}
-      </Flex>
-    </Box>
-  );
-};
+import React, { useRef, useState } from 'react';
+import { Box, Flex, useOutsideClick } from '@chakra-ui/react';
+import { ChevronDown, TableOutline } from '../../../../icons';
+import { Dropdown } from '../../dropdown';
+import { FieldOption, FieldOptions } from '../../../../input/InputTypes';
+
+export interface SortProps {
+  onSelectItem: (option: FieldOption) => void;
+  sortOptions: FieldOptions;
+}
+
+/**
+ * A functional React component utilized to render the `Sort` component
+ */
+export const Sort: React.FC<SortProps> = ({ onSelectItem, sortOptions }) => {
+  const dropdownMenuRef = useRef<HTMLDivElement>(null);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [optionIndex, setOptionIndex] = useState<number | null>(null);
+
+  useOutsideClick({
+    ref: dropdownMenuRef,
+    handler: () => setShowDropdown(false),
+  });
+
+  return (
+    <Box onClick={() => setShowDropdown(!showDropdown)} position="relative">
+      <Flex
+        alignItems="center"
+        cursor="pointer"
+        onClick={() => setShowDropdown(!showDropdown)}
+      >
+        <TableOutline boxSize="16px" />
+        <Box ml="2px">
+          <ChevronDown boxSize="12px" />
+        </Box>
+        {showDropdown && (
+          <Dropdown
+            onSelectItem={onSelectItem}
+            options={sortOptions}
+            position="top"
+            dropdownRef={dropdownMenuRef}
+            optionIndex={optionIndex}
+            setOptionIndex={setOptionIndex}
+          />
+        )}
+      </Flex>
+    </Box>
+  );
+};

package/src/components/toolbar/components/breadcrumbs/index.tsx

@@ -1,63 +1,63 @@
-import React, { useMemo, useCallback } from 'react';
-import { Box, Flex, useMediaQuery } from '@chakra-ui/react';
-import { ToolbarBreadcrumbItem } from './item';
-import { ToolbarLabelAndHandler } from '../..';
-import { ChevronRight } from '../../../../components/icons';
-
-export interface ToolbarBreadcrumbsProps {
-  pageList: ToolbarLabelAndHandler[];
-  currentPage: string;
-}
-
-/**
- * A functional React component utilized to render the `ToolbarBreadcrumbs` component
- */
-export const ToolbarBreadcrumbs: React.FC<ToolbarBreadcrumbsProps> = ({
-  pageList,
-  currentPage,
-}) => {
-  const [breakpoint400] = useMediaQuery('(max-width: 400px)');
-
-  const filteredPageList = useMemo(() => {
-    if (breakpoint400)
-      return pageList.filter(page => page.label === currentPage);
-
-    const sliceIndex = pageList.findIndex(page => page.label === currentPage);
-    return pageList.slice(0, sliceIndex + 1);
-  }, [breakpoint400, currentPage, pageList]);
-
-  const getPageType = useCallback(
-    (index: number) => {
-      switch (index) {
-        case filteredPageList.length - 1:
-          return 'current';
-        case filteredPageList.length - 2:
-          return 'previous';
-        case 0:
-          return 'initial';
-        default:
-          return 'other';
-      }
-    },
-    [filteredPageList]
-  );
-
-  return (
-    <Flex height="26px">
-      {filteredPageList.map((page, i) => (
-        <Flex alignItems="center" key={i}>
-          <ToolbarBreadcrumbItem
-            page={getPageType(i)}
-            pageLabel={page.label}
-            onClick={page.handler}
-          />
-          {i !== filteredPageList.length - 1 && (
-            <Box mx="8px">
-              <ChevronRight boxSize="16px" />
-            </Box>
-          )}
-        </Flex>
-      ))}
-    </Flex>
-  );
-};
+import React, { useMemo, useCallback } from 'react';
+import { Box, Flex, useMediaQuery } from '@chakra-ui/react';
+import { ToolbarBreadcrumbItem } from './item';
+import { ToolbarLabelAndHandler } from '../..';
+import { ChevronRight } from '../../../../components/icons';
+
+export interface ToolbarBreadcrumbsProps {
+  pageList: ToolbarLabelAndHandler[];
+  currentPage: string;
+}
+
+/**
+ * A functional React component utilized to render the `ToolbarBreadcrumbs` component
+ */
+export const ToolbarBreadcrumbs: React.FC<ToolbarBreadcrumbsProps> = ({
+  pageList,
+  currentPage,
+}) => {
+  const [breakpoint400] = useMediaQuery('(max-width: 400px)');
+
+  const filteredPageList = useMemo(() => {
+    if (breakpoint400)
+      return pageList.filter(page => page.label === currentPage);
+
+    const sliceIndex = pageList.findIndex(page => page.label === currentPage);
+    return pageList.slice(0, sliceIndex + 1);
+  }, [breakpoint400, currentPage, pageList]);
+
+  const getPageType = useCallback(
+    (index: number) => {
+      switch (index) {
+        case filteredPageList.length - 1:
+          return 'current';
+        case filteredPageList.length - 2:
+          return 'previous';
+        case 0:
+          return 'initial';
+        default:
+          return 'other';
+      }
+    },
+    [filteredPageList]
+  );
+
+  return (
+    <Flex height="26px">
+      {filteredPageList.map((page, i) => (
+        <Flex alignItems="center" key={i}>
+          <ToolbarBreadcrumbItem
+            page={getPageType(i)}
+            pageLabel={page.label}
+            onClick={page.handler}
+          />
+          {i !== filteredPageList.length - 1 && (
+            <Box mx="8px">
+              <ChevronRight boxSize="16px" />
+            </Box>
+          )}
+        </Flex>
+      ))}
+    </Flex>
+  );
+};

package/src/components/toolbar/components/breadcrumbs/item/index.tsx

@@ -1,72 +1,72 @@
-import React, { useMemo } from 'react';
-import { Box, useMediaQuery } from '@chakra-ui/react';
-import colors from '../../../../../theme/foundations/colors';
-
-export interface ToolbarBreadcrumbItemProps {
-  pageLabel: string;
-  page: 'current' | 'previous' | 'initial' | 'other';
-  onClick: () => void;
-}
-
-/**
- * A functional React component utilized to render the `ToolbarBreadcrumbItem` component
- */
-export const ToolbarBreadcrumbItem: React.FC<ToolbarBreadcrumbItemProps> = ({
-  page,
-  pageLabel,
-  onClick,
-}) => {
-  const [breakpoint400] = useMediaQuery('(max-width: 400px)');
-  const [breakpoint600] = useMediaQuery('(max-width: 600px)');
-  const [breakpoint800] = useMediaQuery('(max-width: 800px)');
-  const [breakpoint1512] = useMediaQuery('(max-width: 1512px)');
-
-  const getPageLabel = useMemo(() => {
-    if (breakpoint400) {
-      if (page === 'current') {
-        return pageLabel;
-      }
-    }
-
-    if (breakpoint600) {
-      if (page === 'current' || page === 'previous') {
-        return pageLabel;
-      }
-
-      return '...';
-    }
-
-    if (breakpoint800 || breakpoint1512) {
-      if (page !== 'other') {
-        return pageLabel;
-      }
-
-      return '...';
-    }
-
-    return pageLabel;
-  }, [
-    breakpoint1512,
-    breakpoint400,
-    breakpoint600,
-    breakpoint800,
-    page,
-    pageLabel,
-  ]);
-
-  return (
-    <Box
-      color={
-        page === 'current'
-          ? colors.label.primary.light
-          : colors.label.secondary.light
-      }
-      fontSize="13px"
-      letterSpacing="0.02em"
-      onClick={onClick}
-      cursor="pointer"
-    >
-      {getPageLabel}
-    </Box>
-  );
-};
+import React, { useMemo } from 'react';
+import { Box, useMediaQuery } from '@chakra-ui/react';
+import colors from '../../../../../theme/foundations/colors';
+
+export interface ToolbarBreadcrumbItemProps {
+  pageLabel: string;
+  page: 'current' | 'previous' | 'initial' | 'other';
+  onClick: () => void;
+}
+
+/**
+ * A functional React component utilized to render the `ToolbarBreadcrumbItem` component
+ */
+export const ToolbarBreadcrumbItem: React.FC<ToolbarBreadcrumbItemProps> = ({
+  page,
+  pageLabel,
+  onClick,
+}) => {
+  const [breakpoint400] = useMediaQuery('(max-width: 400px)');
+  const [breakpoint600] = useMediaQuery('(max-width: 600px)');
+  const [breakpoint800] = useMediaQuery('(max-width: 800px)');
+  const [breakpoint1512] = useMediaQuery('(max-width: 1512px)');
+
+  const getPageLabel = useMemo(() => {
+    if (breakpoint400) {
+      if (page === 'current') {
+        return pageLabel;
+      }
+    }
+
+    if (breakpoint600) {
+      if (page === 'current' || page === 'previous') {
+        return pageLabel;
+      }
+
+      return '...';
+    }
+
+    if (breakpoint800 || breakpoint1512) {
+      if (page !== 'other') {
+        return pageLabel;
+      }
+
+      return '...';
+    }
+
+    return pageLabel;
+  }, [
+    breakpoint1512,
+    breakpoint400,
+    breakpoint600,
+    breakpoint800,
+    page,
+    pageLabel,
+  ]);
+
+  return (
+    <Box
+      color={
+        page === 'current'
+          ? colors.label.primary.light
+          : colors.label.secondary.light
+      }
+      fontSize="13px"
+      letterSpacing="0.02em"
+      onClick={onClick}
+      cursor="pointer"
+    >
+      {getPageLabel}
+    </Box>
+  );
+};

package/src/components/toolbar/components/dropdown/index.tsx

@@ -1,107 +1,107 @@
-import React, { RefObject, useMemo } from 'react';
-import { Box, Flex } from '@chakra-ui/react';
-import colors from '../../../../theme/foundations/colors';
-import { FieldOption, FieldOptions } from '../../../input/InputTypes';
-import { Checkmark } from '../../../icons';
-
-export interface DropdownProps {
-  onSelectItem: (option: FieldOption) => void;
-  options: FieldOptions;
-  dropdownRef: RefObject<HTMLDivElement>;
-  position: 'top' | 'bottom';
-  optionIndex: number | null;
-  setOptionIndex: React.Dispatch<React.SetStateAction<number | null>>;
-}
-
-/**
- * A functional React component utilized to render the `Dropdown` component
- */
-export const Dropdown: React.FC<DropdownProps> = ({
-  onSelectItem,
-  options,
-  dropdownRef,
-  position,
-  optionIndex,
-  setOptionIndex,
-}) => {
-  const DropdownContent = useMemo(() => {
-    return options.map((option, idx) => (
-      <Box key={idx}>
-        {option.value === 'section_header' &&
-          options[idx + 1] &&
-          options[idx + 1].value !== 'section_header' && (
-            <Box
-              color={colors.label.secondary.light}
-              fontSize="13px"
-              width="fit-content"
-              fontWeight="bold"
-              px="8px"
-              pl="26px"
-              whiteSpace="nowrap"
-            >
-              {idx > 0 && (
-                <Box
-                  width="100%"
-                  my="3px"
-                  borderTop="2px solid"
-                  borderColor={colors.border.default}
-                />
-              )}
-              {option.label}
-            </Box>
-          )}
-        {option.value !== 'section_header' && (
-          <Flex
-            alignItems="center"
-            cursor="pointer"
-            onClick={() => {
-              setOptionIndex(idx);
-              onSelectItem(option);
-            }}
-            key={option.value}
-            fontSize="13px"
-            px="8px"
-            py="4px"
-            width="100%"
-            color={colors.label.primary.light}
-            whiteSpace="nowrap"
-            id={option.value}
-          >
-            <Box mr="8px" width="12px">
-              {optionIndex === idx && <Checkmark boxSize="12px" />}
-            </Box>
-
-            {option.label}
-          </Flex>
-        )}
-      </Box>
-    ));
-  }, [onSelectItem, optionIndex, options, setOptionIndex]);
-
-  return (
-    <Flex
-      flexDirection="column"
-      ref={dropdownRef}
-      scrollMargin="15px"
-      backdropFilter="auto"
-      backdropBlur="64px"
-      borderRadius="4px"
-      bg={colors.fill.light.tertiary}
-      mt="3px"
-      maxH="240px"
-      overflowY="auto"
-      px="8px"
-      py="4px"
-      position="absolute"
-      top={position === 'top' ? 26 : undefined}
-      bottom={position === 'bottom' ? 30 : undefined}
-      right={0}
-      width="fit-content"
-      minWidth="100%"
-      zIndex={100}
-      tabIndex={-2000}
-    >
-      {DropdownContent}
-    </Flex>
-  );
-};
+import React, { RefObject, useMemo } from 'react';
+import { Box, Flex } from '@chakra-ui/react';
+import colors from '../../../../theme/foundations/colors';
+import { FieldOption, FieldOptions } from '../../../input/InputTypes';
+import { Checkmark } from '../../../icons';
+
+export interface DropdownProps {
+  onSelectItem: (option: FieldOption) => void;
+  options: FieldOptions;
+  dropdownRef: RefObject<HTMLDivElement>;
+  position: 'top' | 'bottom';
+  optionIndex: number | null;
+  setOptionIndex: React.Dispatch<React.SetStateAction<number | null>>;
+}
+
+/**
+ * A functional React component utilized to render the `Dropdown` component
+ */
+export const Dropdown: React.FC<DropdownProps> = ({
+  onSelectItem,
+  options,
+  dropdownRef,
+  position,
+  optionIndex,
+  setOptionIndex,
+}) => {
+  const DropdownContent = useMemo(() => {
+    return options.map((option, idx) => (
+      <Box key={idx}>
+        {option.value === 'section_header' &&
+          options[idx + 1] &&
+          options[idx + 1].value !== 'section_header' && (
+            <Box
+              color={colors.label.secondary.light}
+              fontSize="13px"
+              width="fit-content"
+              fontWeight="bold"
+              px="8px"
+              pl="26px"
+              whiteSpace="nowrap"
+            >
+              {idx > 0 && (
+                <Box
+                  width="100%"
+                  my="3px"
+                  borderTop="2px solid"
+                  borderColor={colors.border.default}
+                />
+              )}
+              {option.label}
+            </Box>
+          )}
+        {option.value !== 'section_header' && (
+          <Flex
+            alignItems="center"
+            cursor="pointer"
+            onClick={() => {
+              setOptionIndex(idx);
+              onSelectItem(option);
+            }}
+            key={option.value}
+            fontSize="13px"
+            px="8px"
+            py="4px"
+            width="100%"
+            color={colors.label.primary.light}
+            whiteSpace="nowrap"
+            id={option.value}
+          >
+            <Box mr="8px" width="12px">
+              {optionIndex === idx && <Checkmark boxSize="12px" />}
+            </Box>
+
+            {option.label}
+          </Flex>
+        )}
+      </Box>
+    ));
+  }, [onSelectItem, optionIndex, options, setOptionIndex]);
+
+  return (
+    <Flex
+      flexDirection="column"
+      ref={dropdownRef}
+      scrollMargin="15px"
+      backdropFilter="auto"
+      backdropBlur="64px"
+      borderRadius="4px"
+      bg={colors.fill.light.tertiary}
+      mt="3px"
+      maxH="240px"
+      overflowY="auto"
+      px="8px"
+      py="4px"
+      position="absolute"
+      top={position === 'top' ? 26 : undefined}
+      bottom={position === 'bottom' ? 30 : undefined}
+      right={0}
+      width="fit-content"
+      minWidth="100%"
+      zIndex={100}
+      tabIndex={-2000}
+    >
+      {DropdownContent}
+    </Flex>
+  );
+};

package/src/components/toolbar/components/navigation/components/button/left/index.tsx

@@ -1,28 +1,28 @@
-import React from 'react';
-import { Box } from '@chakra-ui/react';
-import { ReactComponent as LeftArrow } from './left-arrow.svg';
-
-export interface LeftArrowButtonProps {
-  onClick: () => void;
-  disabled: boolean;
-}
-
-/**
- * A functional React component utilized to render the `LeftArrowButton` component
- */
-export const LeftArrowButton: React.FC<LeftArrowButtonProps> = ({
-  onClick,
-  disabled,
-}) => {
-  return (
-    <Box
-      onClick={() => {
-        if (!disabled) return onClick();
-      }}
-      cursor={disabled ? 'not-allowed' : 'pointer'}
-      transform="scaleX(-1)"
-    >
-      <LeftArrow stroke={disabled ? '#3C3C43' : 'black'} />
-    </Box>
-  );
-};
+import React from 'react';
+import { Box } from '@chakra-ui/react';
+import { ReactComponent as LeftArrow } from './left-arrow.svg';
+
+export interface LeftArrowButtonProps {
+  onClick: () => void;
+  disabled: boolean;
+}
+
+/**
+ * A functional React component utilized to render the `LeftArrowButton` component
+ */
+export const LeftArrowButton: React.FC<LeftArrowButtonProps> = ({
+  onClick,
+  disabled,
+}) => {
+  return (
+    <Box
+      onClick={() => {
+        if (!disabled) return onClick();
+      }}
+      cursor={disabled ? 'not-allowed' : 'pointer'}
+      transform="scaleX(-1)"
+    >
+      <LeftArrow stroke={disabled ? '#3C3C43' : 'black'} />
+    </Box>
+  );
+};

package/src/components/toolbar/components/navigation/components/button/left/left-arrow.svg

@@ -1,3 +1,3 @@
-<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.125 13.25L0.875 7L7.125 0.75" stroke="current" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.125 13.25L0.875 7L7.125 0.75" stroke="current" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>