@arbor-education/design-system.components 0.0.7 → 0.1.0

package/src/components/formField/inputs/dropdown/items/dropdownMultiLineItem/dropdownMultiLineItem.scss

@@ -1,52 +0,0 @@
-
-.ds-dropdown-item-multiline {
-  display: inline-flex;
-  padding: var(--form-dropdown-multi-line-form-drop-item-multi-base-spacing-padding);
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  gap: var(--form-dropdown-multi-line-spacing-gap-vertical);
-
-  &.ds-dropdown-item {
-    &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 3px var(--color-brand-500);
-      background: var(--button-medium-secondary-default-color-background);
-    }
-  }
-
-  h4 {
-    margin: 0;
-  }
-
-  &--header {
-    align-self: stretch;
-    font-family: var(--type-body-bold-family);
-    font-size: var(--type-body-bold-size);
-    font-style: normal;
-    font-weight: var(--type-body-bold-weight);
-    line-height: 150%;
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  &--content {
-    align-self: stretch;
-    font-family: var(--type-body-p-family);
-    font-size: var(--type-body-p-size);
-    font-style: normal;
-    font-weight: var(--type-body-p-weight);
-    line-height: 150%;
-  }
-
-  &--check-icon {
-    position: absolute;
-    right: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 12px;
-    height: 12px;
-  }
-}

package/src/components/formField/inputs/dropdown/wrapper/DropdownWrapper.tsx

@@ -1,248 +0,0 @@
-import React, {
-  type SelectHTMLAttributes,
-  useState,
-  type ReactNode,
-  cloneElement,
-  useEffect,
-  useRef,
-  useContext,
-} from 'react';
-import { DropdownButton } from 'Components/formField/inputs/dropdown/buttons/dropdownButton/DropdownButton';
-import { PopupParentContext } from 'Utils/PopupParentContext';
-import { createPortal } from 'react-dom';
-import { getFloatingElementPosition, type FloatingElementPosition } from 'Utils/getFloatingElementPosition';
-import useResizeObserver from '@react-hook/resize-observer';
-import { useComponentDidMount } from 'Utils/hooks/useComponentDidMount';
-
-export type DropdownItemBaseProps = {
-  value: string;
-  selected?: boolean;
-  onSelection?: (value: string) => void;
-} & React.HTMLAttributes<HTMLDivElement>;
-
-export type DropdownWrapperProps = {
-  placeholder?: string;
-  multiple?: boolean;
-  disabled?: boolean;
-  errorText?: string;
-  children: ReactNode;
-  onSelectionChange: (value: string[]) => void;
-  dropdownWidth?: string;
-} & SelectHTMLAttributes<HTMLSelectElement>;
-
-export const DropdownWrapper = (props: DropdownWrapperProps) => {
-  const {
-    placeholder,
-    disabled,
-    errorText,
-    multiple,
-    children,
-    onSelectionChange,
-    dropdownWidth = '200px',
-  } = props;
-
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-  const [selected, setSelected] = useState<string[]>([]);
-  const [focusedIndex, setFocusedIndex] = useState<number>(-1);
-  const dropdownFieldRef = useRef<HTMLButtonElement>(null);
-  const dropdownContentsRef = useRef<HTMLDivElement>(null);
-  const [dropdownPosition, setDropdownPosition] = useState<FloatingElementPosition | null>(null);
-
-  useComponentDidMount(() => {
-    const clickListener = (e: MouseEvent) => {
-      // Listen for clicks outside the dropdown and close the dropdown
-      if (
-        !(
-          dropdownFieldRef.current?.contains(e.target as Node)
-          || dropdownContentsRef.current?.contains(e.target as Node)
-        )
-      ) {
-        setDropdownOpen(false);
-      }
-    };
-
-    document.addEventListener('click', clickListener);
-    return () => {
-      document.removeEventListener('click', clickListener);
-    };
-  });
-
-  const repositionDropdown = () => {
-    if (dropdownFieldRef.current && dropdownContentsRef.current) {
-      setDropdownPosition(
-        getFloatingElementPosition(
-          dropdownFieldRef.current,
-          dropdownContentsRef.current,
-          {
-            offset: 4,
-            allowHorizontal: false,
-          },
-        ),
-      );
-    };
-  };
-
-  useResizeObserver(dropdownFieldRef.current, () => {
-    if (dropdownOpen) {
-      repositionDropdown();
-    }
-  });
-
-  useEffect(() => {
-    const onScroll: EventListener = (e) => {
-      if (dropdownContentsRef.current?.contains(e.target as Node)) {
-        // Don't reposition on scrolls inside the dropdown contents, so that
-        // dropdowns can scroll internally without affecting anything
-        return;
-      }
-      repositionDropdown();
-    };
-    const onResize: EventListener = () => {
-      repositionDropdown();
-    };
-
-    if (dropdownOpen) {
-      // While dropdown was closed, the screen may have been resized, scrolled, and so
-      // positioning twice helps us ensure that the position is accurate.
-      repositionDropdown();
-      setTimeout(() => {
-        repositionDropdown();
-      });
-
-      document.addEventListener('scroll', onScroll, true);
-      window.addEventListener('resize', onResize);
-    }
-    else {
-      document.removeEventListener('scroll', onScroll, true);
-      window.removeEventListener('resize', onResize);
-    }
-  }, [dropdownOpen]);
-
-  const popupParentRef = useContext(PopupParentContext);
-
-  const toggleDropdown = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (!disabled) {
-      setDropdownOpen(!dropdownOpen);
-    }
-  };
-
-  const handleItemClick = (value: string) => {
-    if (!multiple) {
-      setSelected([value]);
-      setDropdownOpen(false);
-    }
-    else {
-      setSelected(prev =>
-        prev.includes(value) ? prev.filter(sel => sel !== value) : [...prev, value],
-      );
-    }
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (!dropdownOpen) {
-      if (e.key === 'ArrowDown' || e.key === 'Enter') {
-        e.preventDefault();
-        setDropdownOpen(true);
-        setFocusedIndex(0);
-      }
-      return;
-    }
-
-    const items = React.Children.toArray(children).filter(child =>
-      React.isValidElement<DropdownItemBaseProps>(child),
-    );
-
-    switch (e.key) {
-      case 'ArrowDown':
-        e.preventDefault();
-        setFocusedIndex(prev => (prev + 1) % items.length);
-        break;
-      case 'ArrowUp':
-        e.preventDefault();
-        setFocusedIndex(prev => (prev - 1 + items.length) % items.length);
-        break;
-      case 'Enter':
-        e.preventDefault();
-        if (focusedIndex >= 0 && focusedIndex < items.length) {
-          const item = items[focusedIndex] as React.ReactElement<DropdownItemBaseProps>;
-          handleItemClick(item.props.value);
-        }
-        break;
-      case 'Escape':
-        e.preventDefault();
-        setDropdownOpen(false);
-        break;
-      default:
-        break;
-    }
-  };
-
-  useEffect(() => {
-    onSelectionChange(selected);
-  }, [selected]);
-
-  return (
-    <div
-      className="ds-dropdown-wrapper"
-      onKeyDown={handleKeyDown}
-      role="combobox"
-      aria-expanded={dropdownOpen}
-      aria-haspopup="listbox"
-      aria-disabled={disabled}
-    >
-
-      <DropdownButton
-        label={placeholder ?? ''}
-        disabled={disabled}
-        error={!!errorText}
-        pressed={dropdownOpen}
-        onClick={toggleDropdown}
-        ref={dropdownFieldRef}
-      />
-
-      {dropdownOpen && popupParentRef.current && createPortal(
-        <div
-          role="listbox"
-          id="dropdownList"
-          className="ds-dropdown-wrapper--items"
-          aria-activedescendant={
-            focusedIndex >= 0 ? `dropdown-item-${focusedIndex}` : undefined
-          }
-          ref={dropdownContentsRef}
-          style={{
-            ...(dropdownWidth
-              ? { minWidth: `min(100vw, ${dropdownWidth})` }
-              : {}
-            ),
-            ...(dropdownPosition !== null && typeof dropdownPosition !== 'undefined'
-              ? {
-                  left: `${dropdownPosition.x}px`,
-                  ...(dropdownPosition.position === 'top'
-                    ? { bottom: dropdownPosition.bottom }
-                    : { top: `${dropdownPosition.y}px` }
-                  ),
-                  maxWidth: dropdownPosition.maxWidth,
-                  maxHeight: dropdownPosition.maxHeight,
-                  width: dropdownPosition.fixedElementWidth,
-                }
-              : {}),
-          }}
-        >
-          {React.Children.map(children, (child, index) => {
-            if (React.isValidElement<DropdownItemBaseProps>(child)) {
-              return cloneElement(child, {
-                selected: selected.includes(child.props.value),
-                onSelection: handleItemClick,
-                id: `dropdown-item-${index}`,
-              });
-            }
-            return child;
-          })}
-        </div>,
-        popupParentRef.current,
-      )}
-    </div>
-  );
-};

package/src/components/formField/inputs/dropdown/wrapper/dropdownWrapper.scss

@@ -1,37 +0,0 @@
-
-.ds-dropdown-wrapper {
-  color: var(--color-grey-600, #595959);
-
-  /* typography/body/p1-regular */
-  font-family: var(--type-body-p-family, Inter);
-  font-size: var(--type-body-p-size, 13px);
-  font-style: normal;
-  font-weight: var(--type-body-p-weight, 400);
-  line-height: 150%;
-
-
-  &--items {
-    padding: var(--form-dropdown-spacing-vertical) var(--form-dropdown-spacing-horizontal);
-    box-shadow: 0 4px 12px 0 rgb(32 32 32 / 8%);
-    border-radius: var(--banner-radius);
-    background-color: var(--form-dropdown-color-background);
-    
-    h3 {
-      margin: 0;
-    }
-
-    &--header {
-      color: var(--form-dropdown-form-drop-item-title-color-text);
-      font-size: var(--type-body-bold-size);
-      font-style: normal;
-      font-weight: var(--type-body-bold-weight);
-      line-height: 150%;
-      display: flex;
-      padding: var(--spacing-xsmall) var(--spacing-small) var(--spacing-medium) var(--spacing-small);
-      align-items: center;
-      gap: 8px;
-      align-self: stretch;
-      border-bottom: 1px solid var(--page-base-color-border);
-    }
-  }
-}