meticulous-ui 3.4.0 → 3.4.2

package/components/components/Dropdown/Dropdown.jsx

@@ -1,336 +0,0 @@
-import { useEffect, useId, useLayoutEffect, useRef, useState, useMemo, useCallback } from 'react';
-import grey from '../../colors/grey';
-import MenuItem from '../MenuItem/MenuItem';
-import colors from '../../colors/colorMap';
-import blue from '../../colors/blue';
-import Spinner from '../Spinner/Spinner';
-import {
-  Box,
-  PWrapper,
-  ChevronDownWrapper,
-  OptionWrapper,
-  DropdownWrapper,
-  SpinnerWrapper,
-  SearchInput,
-  LoadMoreSentinel,
-  OptionsList,
-  SearchContainer,
-  SearchIcon,
-} from './styles';
-
-const getPixelValue = (value) => {
-  if (typeof value !== 'string') return value;
-  if (value.endsWith('px')) return parseFloat(value);
-  if (value.endsWith('rem')) {
-    const remValue = parseFloat(value);
-    const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
-    return remValue * rootFontSize;
-  }
-  return parseFloat(value);
-};
-
-const Dropdown = ({
-  options,
-  onChange,
-  value,
-  width = '32rem',
-  menuHeight = '32rem',
-  placeholder,
-  theme = 'blue',
-  isLoading,
-  isDisabled,
-  loaderColor,
-  searchable = false,
-  onLoadMore,
-  hasMore = false,
-  isLoadingMore = false,
-  searchPh = 'Search...',
-  ...rest
-}) => {
-  const [isOpen, setOpen] = useState(false);
-  const [isFocused, setIsFocused] = useState(false);
-  const [position, setPosition] = useState('bottom');
-  const [searchQuery, setSearchQuery] = useState('');
-  const [activeIndex, setActiveIndex] = useState(-1);
-
-  const listboxId = useId();
-
-  const containerRef = useRef(null);
-  const menuRef = useRef(null);
-  const searchInputRef = useRef(null);
-  const sentinelRef = useRef(null);
-  const isInitialOpen = useRef(true);
-
-  const toggle = () => !isLoading && !isDisabled && setOpen((prev) => !prev);
-
-  const handleChange = (val) => {
-    if (val !== value) {
-      onChange(val);
-      setOpen(false);
-    }
-  };
-
-  const filteredOptions = useMemo(() => {
-    if (!searchable || !searchQuery.trim()) return options;
-    const q = searchQuery.toLowerCase();
-    return options.filter(({ label }) => label.toLowerCase().includes(q));
-  }, [options, searchQuery, searchable]);
-
-  useEffect(() => {
-    if (isOpen) {
-      const selectedIndex = filteredOptions.findIndex((opt) => opt.value === value);
-
-      if (selectedIndex !== -1 && !filteredOptions[selectedIndex].disabled) {
-        setActiveIndex(selectedIndex);
-      } else {
-        const firstEnabled = filteredOptions.findIndex((opt) => !opt.disabled);
-        setActiveIndex(firstEnabled);
-      }
-    } else {
-      setSearchQuery('');
-      setActiveIndex(-1);
-    }
-  }, [isOpen, searchQuery, filteredOptions, value]);
-
-  useEffect(() => {
-    if (isOpen && activeIndex !== -1 && menuRef.current) {
-      const highlightedElement = menuRef.current.children[activeIndex];
-      if (highlightedElement) {
-        highlightedElement.scrollIntoView({
-          block: 'nearest',
-          behavior: 'auto',
-        });
-      }
-    }
-  }, [activeIndex, isOpen]);
-
-  useEffect(() => {
-    if (isOpen && searchable && searchInputRef.current) {
-      searchInputRef.current.focus();
-    }
-  }, [isOpen, searchable]);
-
-  useEffect(() => {
-    if (!isOpen) isInitialOpen.current = true;
-  }, [isOpen]);
-
-  useEffect(() => {
-    const handleOutsideClick = (event) => {
-      if (containerRef.current && !containerRef.current.contains(event.target)) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener('mousedown', handleOutsideClick);
-    return () => document.removeEventListener('mousedown', handleOutsideClick);
-  }, []);
-
-  useLayoutEffect(() => {
-    if (isOpen && menuRef.current && containerRef.current) {
-      const containerRect = containerRef.current.getBoundingClientRect();
-      const viewportHeight = window.innerHeight;
-      const parsedMenuHeight = getPixelValue(menuHeight);
-      const spaceBelow = viewportHeight - containerRect.bottom;
-      const buffer = 8;
-      setPosition(
-        spaceBelow < parsedMenuHeight + buffer && containerRect.top > spaceBelow ? 'top' : 'bottom'
-      );
-    }
-  }, [isOpen, menuHeight]);
-
-  const getNextEnabledIndex = (currentIndex) => {
-    let next = currentIndex + 1;
-    while (next < filteredOptions.length) {
-      if (!filteredOptions[next].disabled) return next;
-      next++;
-    }
-    return currentIndex;
-  };
-
-  const getPrevEnabledIndex = (currentIndex) => {
-    let prev = currentIndex - 1;
-    while (prev >= 0) {
-      if (!filteredOptions[prev].disabled) return prev;
-      prev--;
-    }
-    return currentIndex;
-  };
-
-  const handleKeyDown = (e) => {
-    if (isLoading || isDisabled) return;
-    if (!isOpen) {
-      if (e.key === ' ' || e.key === 'Enter' || e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-        e.preventDefault();
-        setOpen(true);
-      }
-      return;
-    }
-
-    switch (e.key) {
-      case 'ArrowDown':
-        e.preventDefault();
-        const nextIndex = getNextEnabledIndex(activeIndex);
-
-        if (nextIndex === activeIndex && hasMore && !isLoadingMore) {
-          onLoadMore?.();
-        }
-
-        setActiveIndex(nextIndex);
-        break;
-      case 'ArrowUp':
-        e.preventDefault();
-        setActiveIndex((prev) => getPrevEnabledIndex(prev));
-        break;
-      case 'Enter':
-        e.preventDefault();
-        const selectedOption = filteredOptions[activeIndex];
-        if (selectedOption && !selectedOption.disabled) {
-          handleChange(selectedOption.value);
-        }
-        break;
-      case 'Escape':
-        setOpen(false);
-        break;
-      default:
-        break;
-    }
-  };
-
-  const handleLoadMore = useCallback(() => {
-    if (hasMore && !isLoadingMore && onLoadMore) {
-      onLoadMore();
-    }
-  }, [hasMore, isLoadingMore, onLoadMore]);
-
-  useEffect(() => {
-    const sentinel = sentinelRef.current;
-    if (!sentinel || !onLoadMore || !hasMore) return;
-
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        // Use isIntersecting AND check if it's actually visible
-        if (entry.isIntersecting && !isLoadingMore) {
-          handleLoadMore();
-        }
-      },
-      {
-        root: menuRef.current, // Observe relative to the scrollable container
-        threshold: 0.1,
-        rootMargin: '20px', // Start loading 20px before the user even hits the bottom
-      }
-    );
-
-    observer.observe(sentinel);
-    return () => observer.disconnect();
-  }, [handleLoadMore, onLoadMore, hasMore, isLoadingMore]);
-
-  const {
-    m50: hoverColor,
-    m100: activeColor,
-    m200: selectedColor,
-    m500: border,
-  } = colors[theme] ?? blue;
-
-  const mouseHighlight = (disabled, index) => () => !disabled && setActiveIndex(index);
-
-  const getOptionId = (index) => `${listboxId}-opt-${index}`;
-
-  const renderOption = ({ value: val, label, disabled }, index) => (
-    <MenuItem
-      {...{ value: val, label, isDisabled: disabled }}
-      onSelect={handleChange}
-      onMouseEnter={mouseHighlight(disabled, index)}
-      isSelected={val === value}
-      isHighlighted={index === activeIndex}
-      key={val}
-      id={getOptionId(index)}
-      width={width}
-      {...{ selectedColor, hoverColor, activeColor }}
-    />
-  );
-
-  const changeFocus = (focus) => () => {
-    setIsFocused(focus);
-  };
-
-  const handleBlur = (e) => {
-    setIsFocused(false);
-    if (!containerRef.current?.contains(e.relatedTarget)) {
-      setOpen(false);
-    }
-  };
-
-  const handleSearch = (e) => {
-    setSearchQuery(e.target.value);
-  };
-
-  const onSearchClick = (e) => {
-    e.stopPropagation();
-  };
-
-  return (
-    <DropdownWrapper
-      ref={containerRef}
-      $width={width}
-      {...rest}
-      tabIndex={isDisabled || isLoading ? -1 : 0}
-      onKeyDown={handleKeyDown}
-      $isLoading={isLoading}
-      $isDisabled={isDisabled}
-      role='combobox'
-      aria-expanded={isOpen}
-      aria-haspopup='listbox'
-      aria-controls={listboxId}
-      aria-disabled={isDisabled || undefined}
-      aria-activedescendant={activeIndex !== -1 ? getOptionId(activeIndex) : undefined}
-      onFocus={changeFocus(true)}
-      onBlur={handleBlur}
-    >
-      <Box
-        $width={width}
-        onClick={toggle}
-        $isOpen={isOpen}
-        $border={border}
-        $isFocused={isFocused && !isOpen}
-      >
-        <PWrapper $width={width} color={!!value ? grey.m700 : grey.m500} size='1.92rem'>
-          {value ? options.find(({ value: opt }) => value === opt)?.label : placeholder}
-        </PWrapper>
-        <ChevronDownWrapper color={grey.m500} size={22} $isOpen={isOpen} aria-hidden />
-      </Box>
-      <OptionWrapper $isOpen={isOpen} $width={width} $height={menuHeight} $top={position === 'top'}>
-        {searchable && (
-          <SearchContainer onClick={onSearchClick}>
-            <SearchIcon size={20} color={grey.m600} aria-hidden />
-            <SearchInput
-              ref={searchInputRef}
-              value={searchQuery}
-              onChange={handleSearch}
-              placeholder={searchPh}
-              aria-label={searchPh}
-              aria-controls={listboxId}
-              aria-autocomplete='list'
-              aria-expanded={isOpen}
-              role='combobox'
-              tabIndex={isOpen ? 0 : -1}
-            />
-          </SearchContainer>
-        )}
-        <OptionsList ref={menuRef} role='listbox' id={listboxId} tabIndex={-1}>
-          {filteredOptions.map(renderOption)}
-          {onLoadMore && (
-            <LoadMoreSentinel ref={sentinelRef}>
-              {isLoadingMore && <Spinner size='small' color={loaderColor} />}
-            </LoadMoreSentinel>
-          )}
-        </OptionsList>
-      </OptionWrapper>
-      {isLoading && (
-        <SpinnerWrapper>
-          <Spinner size='small' color={loaderColor} />
-        </SpinnerWrapper>
-      )}
-    </DropdownWrapper>
-  );
-};
-
-export default Dropdown;

package/components/components/Dropdown/constants.js

@@ -1,3 +0,0 @@
-import grey from '../../colors/grey';
-
-export const DEFAULT_BORDER = grey.m500;

package/components/components/Dropdown/index.js

@@ -1,3 +0,0 @@
-import Dropdown from './Dropdown';
-
-export default Dropdown;

package/components/components/Dropdown/styles.js

@@ -1,163 +0,0 @@
-import styled, { css, keyframes } from 'styled-components';
-import grey from '../../colors/grey';
-import P from '../Typography/P';
-import ChevronDown from '../Icons/ChevronDown';
-import Search from '../Icons/Search';
-import { DEFAULT_BORDER } from './constants';
-import white from '../../colors/white';
-
-const rotate = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(180deg);
-  }
-`;
-
-const reverse = keyframes`
-  from {
-    transform: rotate(180deg);
-  }
-  to {
-    transform: rotate(0deg);
-  }
-`;
-
-export const DropdownWrapper = styled.div`
-  max-width: ${({ $width }) => $width};
-  position: relative;
-  outline: none;
-
-  ${({ $isLoading }) =>
-    $isLoading &&
-    css`
-      pointer-events: none;
-      opacity: 0.8;
-    `}
-
-  ${({ $isDisabled }) =>
-    $isDisabled &&
-    css`
-      pointer-events: none;
-      opacity: 0.7;
-    `}
-`;
-
-export const Box = styled.div`
-  height: 3.2rem;
-  width: ${({ $width }) => $width};
-  border-radius: 0.96rem;
-  border: ${({ $isOpen, $isFocused, $border }) =>
-    $isOpen || $isFocused ? `2px solid ${$border}` : `1px solid ${DEFAULT_BORDER}`};
-  padding: 0.64rem 0.96rem 0.64rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-`;
-
-export const PWrapper = styled(P)`
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  max-width: calc(${({ $width }) => $width} - 3.2rem);
-  pointer-events: none;
-`;
-
-export const ChevronDownWrapper = styled(ChevronDown)`
-  animation: ${({ $isOpen }) => ($isOpen ? rotate : reverse)} 0.15s linear;
-  transform: rotate(${({ $isOpen }) => ($isOpen ? 180 : 0)}deg);
-`;
-
-export const OptionWrapper = styled.div`
-  border: 1px solid ${grey.m700};
-  width: calc(${({ $width }) => $width} + 1.6rem);
-  /* Remove overflow: auto from here */
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  z-index: 1000;
-  background-color: ${white};
-  left: 0.24rem;
-  max-height: 0;
-  transition: max-height 0.15s ease-out;
-  opacity: 0;
-  overflow: hidden; /* Keep this hidden so the collapse works */
-
-  ${({ $isOpen }) =>
-    $isOpen &&
-    css`
-      max-height: ${({ $height }) => $height};
-      opacity: 1;
-    `};
-
-  ${({ $top }) =>
-    $top
-      ? css`
-          bottom: 100%;
-          flex-direction: column-reverse; /* Search at bottom if menu opens upward */
-          border-top-right-radius: 0.96rem;
-          border-top-left-radius: 0.96rem;
-          margin-bottom: 0.16rem;
-        `
-      : css`
-          top: 100%;
-          border-bottom-right-radius: 0.96rem;
-          border-bottom-left-radius: 0.96rem;
-          margin-top: 0.16rem;
-        `}
-`;
-
-// Add a new styled component for the scrollable area
-export const OptionsList = styled.div`
-  overflow-y: auto;
-  flex: 1;
-`;
-
-export const SpinnerWrapper = styled.div`
-  position: absolute;
-  top: 1.28rem;
-  right: 1.92rem;
-`;
-
-export const SearchContainer = styled.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid ${grey.m300};
-  background: ${white};
-
-  &:focus-within {
-    border-bottom-color: ${grey.m500};
-  }
-`;
-
-export const SearchInput = styled.input`
-  width: 100%;
-  box-sizing: border-box;
-  border: none;
-  /* Add left padding to make room for the icon */
-  padding: 0.8rem 1.2rem 0.8rem 0;
-  font-size: 1.92rem;
-  color: ${grey.m700};
-  background: transparent;
-  outline: none;
-
-  &::placeholder {
-    color: ${grey.m400};
-  }
-`;
-
-export const SearchIcon = styled(Search)`
-  margin: 0 1.28rem;
-`;
-
-export const LoadMoreSentinel = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1.6rem 0;
-  min-height: 1.6rem;
-  width: 100%;
-`;

package/components/components/Glass/Glass.jsx

@@ -1,7 +0,0 @@
-import { GlassWrapper } from './styles';
-
-const Glass = ({ border = 'none', borderRadius = 0, ...rest }) => (
-  <GlassWrapper $border={border} $borderRadius={borderRadius} {...rest} />
-);
-
-export default Glass;

package/components/components/Glass/index.js

@@ -1,3 +0,0 @@
-import Glass from './Glass';
-
-export default Glass;

package/components/components/Glass/styles.js

@@ -1,71 +0,0 @@
-import styled from 'styled-components';
-
-export const GlassWrapper = styled.div`
-  width: 100%;
-  height: 100%;
-  border-radius: ${({ $borderRadius }) => $borderRadius};
-  position: relative;
-  overflow: hidden;
-  box-sizing: border-box;
-
-  background:
-    radial-gradient(
-      60rem 22rem at 50% 45%,
-      rgba(20, 40, 20, 0.06),
-      rgba(10, 25, 10, 0.02) 50%,
-      transparent 70%
-    ),
-    linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.18) 0%,
-      rgba(255, 255, 255, 0.06) 40%,
-      rgba(255, 255, 255, 0.03) 100%
-    );
-
-  box-shadow:
-    0 3rem 6rem rgba(7, 22, 10, 0.3),
-    0 2px 0 rgba(255, 255, 255, 0.03) inset;
-
-  border: 1px solid rgba(255, 255, 255, 0.25);
-  color: rgba(8, 34, 16, 0.95);
-
-  ::before {
-    content: '';
-    position: absolute;
-    left: -12%;
-    top: -24%;
-    width: 62%;
-    height: 62%;
-    border-radius: 50%;
-    background: radial-gradient(
-      circle,
-      rgba(255, 255, 255, 0.24),
-      rgba(255, 255, 255, 0.06) 40%,
-      transparent 60%
-    );
-    filter: blur(4.6rem);
-    opacity: 0.85;
-    pointer-events: none;
-    transform: translateZ(0);
-  }
-
-  ::after {
-    content: '';
-    position: absolute;
-    right: -6%;
-    bottom: -18%;
-    width: 68%;
-    height: 68%;
-    border-radius: 50%;
-    background: radial-gradient(
-      circle at 30% 40%,
-      rgba(255, 255, 255, 0.08),
-      rgba(255, 255, 255, 0.01) 40%,
-      transparent 70%
-    );
-    filter: blur(5.4rem);
-    opacity: 0.45;
-    pointer-events: none;
-    transform: translateZ(0);
-  }
-`;

package/components/components/Icons/Add/Add.jsx

@@ -1,44 +0,0 @@
-const Add = ({ size = 24, color = 'currentColor', ...props }) => (
-  <svg
-    width={size}
-    height={size}
-    viewBox='0 0 24 24'
-    fill='none'
-    xmlns='http://www.w3.org/2000/svg'
-    {...props}
-  >
-    <title />
-
-    <g>
-      <g data-name='add'>
-        <g>
-          <line
-            fill='none'
-            stroke={color}
-            strokeLinecap='round'
-            strokeLinejoin='round'
-            strokeWidth='2'
-            x1='12'
-            x2='12'
-            y1='19'
-            y2='5'
-          />
-
-          <line
-            fill='none'
-            stroke={color}
-            strokeLinecap='round'
-            strokeLinejoin='round'
-            strokeWidth='2'
-            x1='5'
-            x2='19'
-            y1='12'
-            y2='12'
-          />
-        </g>
-      </g>
-    </g>
-  </svg>
-);
-
-export default Add;

package/components/components/Icons/Add/index.js

@@ -1 +0,0 @@
-export { default } from './Add';

package/components/components/Icons/AddCircle/AddCircle.jsx

@@ -1,23 +0,0 @@
-const AddCircle = ({ size = 24, color = 'currentColor', ...props }) => (
-  <svg
-    width={size}
-    height={size}
-    viewBox='0 0 24 24'
-    fill='none'
-    xmlns='http://www.w3.org/2000/svg'
-    {...props}
-  >
-    <path
-      d='M11 8C11 7.44772 11.4477 7 12 7C12.5523 7 13 7.44772 13 8V11H16C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H13V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V13H8C7.44771 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11H11V8Z'
-      fill={color}
-    />
-    <path
-      fillRule='evenodd'
-      clipRule='evenodd'
-      d='M23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12ZM3.00683 12C3.00683 16.9668 7.03321 20.9932 12 20.9932C16.9668 20.9932 20.9932 16.9668 20.9932 12C20.9932 7.03321 16.9668 3.00683 12 3.00683C7.03321 3.00683 3.00683 7.03321 3.00683 12Z'
-      fill={color}
-    />
-  </svg>
-);
-
-export default AddCircle;

package/components/components/Icons/AddCircle/index.js

@@ -1 +0,0 @@
-export { default } from './AddCircle';

package/components/components/Icons/AddCircleFilled/AddCircleFilled.jsx

@@ -1,19 +0,0 @@
-const AddCircleFilled = ({ size = 24, color = 'currentColor', ...props }) => (
-  <svg
-    width={size}
-    height={size}
-    viewBox='0 0 24 24'
-    fill='none'
-    xmlns='http://www.w3.org/2000/svg'
-    {...props}
-  >
-    <path
-      fillRule='evenodd'
-      clipRule='evenodd'
-      d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM12.75 9C12.75 8.58579 12.4142 8.25 12 8.25C11.5858 8.25 11.25 8.58579 11.25 9L11.25 11.25H9C8.58579 11.25 8.25 11.5858 8.25 12C8.25 12.4142 8.58579 12.75 9 12.75H11.25V15C11.25 15.4142 11.5858 15.75 12 15.75C12.4142 15.75 12.75 15.4142 12.75 15L12.75 12.75H15C15.4142 12.75 15.75 12.4142 15.75 12C15.75 11.5858 15.4142 11.25 15 11.25H12.75V9Z'
-      fill={color}
-    />
-  </svg>
-);
-
-export default AddCircleFilled;

package/components/components/Icons/AddCircleFilled/index.js

@@ -1 +0,0 @@
-export { default } from './AddCircleFilled';