meticulous-ui 3.3.0 → 3.4.0

package/components/components/Dropdown/Dropdown.jsx

@@ -0,0 +1,336 @@
+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

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

package/components/components/Dropdown/index.js

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

package/components/components/Dropdown/styles.js

@@ -0,0 +1,163 @@
+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

@@ -0,0 +1,7 @@
+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

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

package/components/components/Glass/styles.js

@@ -0,0 +1,71 @@
+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

@@ -0,0 +1,44 @@
+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

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

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

@@ -0,0 +1,23 @@
+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

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

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

@@ -0,0 +1,19 @@
+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

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