react-animated-select 0.5.6 → 0.6.0

package/src/options.jsx

@@ -1,222 +0,0 @@
-import {CSSTransition} from 'react-transition-group'
-import {useRef, useState, useEffect, useCallback, memo, useLayoutEffect} from 'react'
-import {createPortal} from 'react-dom'
-
-function Options({
-  visibility,
-  children,
-  selectRef,
-  onAnimationDone,
-  unmount = true,
-  duration,
-  easing,
-  offset,
-  animateOpacity,
-  style,
-  className
-}) {
-  
-  const nodeRef = useRef(null)
-  const [selectHeight, setSelectHeight] = useState(0)
-
-  const [coords, setCoords] = useState({top: 0, left: 0, width: 0})
-
-  const coordsRef = useRef(coords)
-  
-  useEffect(() => {
-    coordsRef.current = coords
-  }, [coords])
-
-  const updateCoords = useCallback(() => {
-    if (selectRef?.current) {
-      const rect = selectRef.current.getBoundingClientRect()
-      const windowHeight = window.innerHeight
-
-      const dropdownHeight = nodeRef.current?.scrollHeight || 250
-      
-      const spaceBelow = windowHeight - rect.bottom
-      const showUpward = spaceBelow < dropdownHeight && rect.top > spaceBelow
-
-      setCoords({
-        top: rect.top,
-        bottom: rect.bottom,
-        left: rect.left,
-        width: rect.width,
-        isUpward: showUpward
-      })
-    }
-  }, [selectRef])
-
-  useEffect(() => {
-    if (visibility) {
-      updateCoords()
-      
-      window.addEventListener('scroll', updateCoords, true)
-      window.addEventListener('resize', updateCoords)
-      
-      return () => {
-        window.removeEventListener('scroll', updateCoords, true)
-        window.removeEventListener('resize', updateCoords)
-      }
-    }
-  }, [visibility, updateCoords])
-
-  const transitionString = `height var(--rac-duration) ${easing}${animateOpacity ? `, opacity var(--rac-duration) ${easing}` : ''}`;
-
-  useLayoutEffect(() => {
-    if (!selectRef?.current) return
-    
-    const updateHeight = () => setSelectHeight(selectRef.current.offsetHeight)
-    updateHeight()
-
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (let entry of entries) {
-        setSelectHeight(entry.target.offsetHeight)
-
-        if (visibility && nodeRef.current && selectRef.current) {
-            const rect = selectRef.current.getBoundingClientRect()
-            const { isUpward } = coordsRef.current
-
-            nodeRef.current.style.width = `${rect.width}px`
-            nodeRef.current.style.left = `${rect.left}px`
-
-            if (isUpward) {
-                nodeRef.current.style.bottom = `${window.innerHeight - rect.top + offset}px`
-            } else {
-                nodeRef.current.style.top = `${rect.bottom + offset}px`
-            }
-        }
-      }
-    })
-
-    resizeObserver.observe(selectRef.current)
-    return () => resizeObserver.disconnect()
-  }, [selectRef, visibility, offset])
-
-  const baseStyles = {
-    position: 'fixed',
-    '--rac-duration': `${duration}ms`,
-    '--rac-easing': easing,
-    left: `${coords.left}px`,
-    width: `${coords.width}px`,
-    overflow: 'hidden',
-    zIndex: '2147483647',
-    height: visibility ? 'auto' : '0px',
-    opacity: animateOpacity ? (visibility ? 1 : 0) : 1,
-    pointerEvents: visibility ? 'all' : 'none',
-    visibility: selectHeight ? 'visible' : 'hidden',
-    boxSizing: 'border-box',
-    transformOrigin: coords.isUpward ? 'bottom' : 'top',
-    
-    ...(coords.isUpward ? {
-      bottom: `${window.innerHeight - coords.top + offset}px`,
-      top: 'auto'
-    } : {
-      top: `${coords.bottom + offset}px`,
-      bottom: 'auto'
-    }),
-    ...Object.fromEntries(
-      Object.entries(style || {}).map(([key, value]) => [
-        key.startsWith('--') ? key : `--rac-${key.replace(/([A-Z])/g, '-$1').toLowerCase()}`,
-        value
-      ])
-    )
-  }
-
-  const handleEnter = useCallback(() => {
-    const el = nodeRef.current
-    if (!el) return
-    
-    el.style.height = '0px'
-    if (animateOpacity) el.style.opacity = '0'
-    el.style.transition = ''
-  }, [animateOpacity])
-
-  const handleEntering = useCallback(() => {
-    const el = nodeRef.current
-    if (!el) return
-    
-    el.style.transition = transitionString
-    el.style.height = `${el.scrollHeight}px`
-    if (animateOpacity) el.style.opacity = '1'
-  }, [transitionString, animateOpacity])
-
-  const handleEntered = useCallback(() => {
-    const el = nodeRef.current
-    if (!el) return
-    
-    el.style.height = 'auto'
-    el.style.transition = ''
-    if (onAnimationDone) onAnimationDone()
-  }, [onAnimationDone])
-
-  const handleExit = useCallback(() => {
-    const el = nodeRef.current
-    if (!el) return
-    
-    el.style.height = `${el.scrollHeight}px`
-    if (animateOpacity) el.style.opacity = '1'
-    
-    el.offsetHeight
-    el.style.transition = transitionString
-  }, [transitionString, animateOpacity])
-
-  const handleExiting = useCallback(() => {
-    const el = nodeRef.current
-    if (!el) return
-    
-    el.style.height = '0px'
-    if (animateOpacity) el.style.opacity = '0'
-  }, [animateOpacity])
-
-  const handleExited = useCallback(() => {
-    const el = nodeRef.current
-    if (!el) return
-    el.style.transition = ''
-  }, [])
-
-  return createPortal(
-    <CSSTransition
-      in={visibility}
-      timeout={duration}
-      classNames='rac-options'
-      unmountOnExit={unmount}
-      nodeRef={nodeRef}
-      onEnter={handleEnter}
-      onEntering={handleEntering}
-      onEntered={handleEntered}
-      onExit={handleExit}
-      onExiting={handleExiting}
-      onExited={handleExited}
-    >
-      <div
-        ref={nodeRef}
-        className={`rac-options ${className || ''}`}
-        style={{
-            ...baseStyles,
-            '--rac-duration': `${duration}ms`,
-            '--rac-duration-fast': 'calc(var(--rac-duration) * 0.5)',
-            '--rac-duration-base': 'var(--rac-duration)',
-            '--rac-duration-slow': 'calc(var(--rac-duration) * 1.3)',
-
-        }}
-        onMouseDown={(e) => {
-          e.preventDefault()
-        }}
-      >
-        {children}
-      </div>
-    </CSSTransition>, document.body
-  )
-}
-
-export default memo(Options, (prev, next) => {
-  return prev.visibility === next.visibility &&
-         prev.duration === next.duration &&
-         prev.easing === next.easing &&
-         prev.offset === next.offset &&
-         prev.animateOpacity === next.animateOpacity &&
-         prev.selectRef === next.selectRef &&
-         prev.children === next.children &&
-         JSON.stringify(prev.style) === JSON.stringify(next.style)
-})

package/src/select.css

@@ -1,367 +0,0 @@
-@media (prefers-reduced-motion: reduce) {
-  .rac-select {
-    --rac-duration: 1ms;
-  }
-}
-
-:root {
-    --rac-base-red: #e7000b;
-    --rac-base-green: #4caf50;
-    --rac-base-yellow: #ffc107;
-
-    --rac-select-background: color-mix(in srgb, Canvas 98%, CanvasText 2%);
-    --rac-select-color: CanvasText;
-    --rac-select-border: 2px solid color-mix(in srgb, Canvas 98%, CanvasText 2%);
-    --rac-select-border-error: 2px solid color-mix(in srgb, var(--rac-base-red), CanvasText 15%);
-    --rac-select-height: 2em;
-    --rac-select-padding: 0em 0.5em;
-    --rac-disabled-opacity: 0.75;
-
-    --rac-title-anim-shift: 4px;
-    --rac-title-anim-entry-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
-    --rac-title-font-size: 1em;
-
-    --rac-dots-height: 3px;
-    --rac-dots-width: 3px;
-    --rac-dots-color: currentColor;
-    --rac-dots-gap: 3px;
-    --rac-dots-padding-left: 0.25em;
-    --rac-dots-align: end;
-    --rac-dots-animation-duration: 1.4s;
-    --rac-dots-animation-delay-1: 0s;
-    --rac-dots-animation-delay-2: 0.2s;
-    --rac-dots-animation-delay-3: 0.4s;
-
-    --rac-arrow-height: 1em;
-    --rac-arrow-width: 1em;
-    --rac-arrow-padding: 1px 0 2px;
-
-    --rac-cancel-height: 0.9em;
-    --rac-cancel-width: 0.9em;
-
-    --rac-scroll-color: color-mix(in srgb, CanvasText 10%, Canvas);
-    --rac-scroll-track: color-mix(in srgb, CanvasText 5%, Canvas);
-    --rac-scroll-padding-top: 0.5em;
-    --rac-scroll-padding-bottom: 0.5em;
-
-    --rac-option-hover: color-mix(in srgb, CanvasText 6%, Canvas);
-    --rac-option-highlight: color-mix(in srgb, CanvasText 10%, Canvas);
-    --rac-option-selected: color-mix(in srgb, CanvasText 14%, Canvas);
-
-    --rac-list-background: color-mix(in srgb, Canvas 98%, CanvasText 2%);
-    --rac-list-color: CanvasText;
-    --rac-list-max-height: 250px;
-
-    --rac-option-padding: 0.5em;
-    --rac-option-min-height: 1em;
-    --rac-disabled-option-color: color-mix(in srgb, GrayText, CanvasText 20%);
-    --rac-invalid-option-color: color-mix(in srgb, var(--rac-base-red), CanvasText 10%);
-    --rac-true-option-color: color-mix(in srgb, var(--rac-base-green), CanvasText 10%);
-    --rac-false-option-color: color-mix(in srgb, var(--rac-base-red), CanvasText 10%);
-    --rac-warning-option-color: color-mix(in srgb, var(--rac-base-yellow), CanvasText 10%);
-    
-    --rac-group-header-font-size: 1.25em;
-    --rac-group-header-font-weight: bold;
-    --rac-group-header-min-height: 1em;
-    --rac-group-header-padding: 0.5em;
-    --rac-group-arrow-height: 1em;
-    --rac-group-arrow-width: 1em;
-    --rac-group-arrow-padding: 1px 0 2px;
-    --rac-disabled-group-color: color-mix(in srgb, GrayText, CanvasText 20%);
-
-    --rac-multiple-selected-border: 0.1em solid gray;
-    --rac-multiple-selected-radius: 5px;
-    --rac-checkbox-border: 1px solid gray;
-    --rac-multiple-selected-padding: 0em 0.25em;
-    --rac-multiple-selected-margin: 0.25em 0.25em;
-    --rac-multiple-selected-gap: 0.5em 0;
-    --rac-checkbox-margin-right: 0.20em;
-    --rac-multiple-selected-min-height: 1.5em;
-    --rac-checkbox-size: var(--rac-option-min-height);
-
-    --rac-options-z-index: 1;
-}
-
-.rac-select {
-    background: var(--rac-select-background);
-    padding: var(--rac-select-padding);
-    border: var(--rac-select-border);
-    color: var(--rac-select-color);
-
-    min-height: var(--rac-select-height);
-    interpolate-size: allow-keywords;
-    transition:
-        border-color var(--rac-duration-base) ease, 
-        height var(--rac-duration-base) ease;
-    justify-content: space-between;
-    box-sizing: border-box;
-    cursor: pointer;
-    display: flex;
-}
-
-.rac-loading-style,
-.rac-disabled-style {
-    opacity: var(--rac-disabled-opacity);
-    transition:
-        border-color var(--rac-duration-base),
-        filter var(--rac-duration-base),
-        opacity var(--rac-duration-base);
-    cursor: wait;
-}
-
-.rac-disabled-style {
-    cursor: not-allowed;
-}
-
-.rac-error-style {
-    border: var(--rac-select-border-error);
-    cursor: help;
-}
-
-.rac-select-title-wrapper {
-    transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.rac-select-title {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: var(--rac-multiple-selected-gap);
-}
-
-.rac-title-text {
-    margin: 0.5em 0em;
-    display: block;
-    animation: rac-fade-in var(--rac-duration-base) var(--rac-title-anim-entry-ease);
-    height: 100%;
-    align-content: center;
-    font-size: var(--rac-title-font-size);
-}
-
-@keyframes rac-fade-in {
-    from {
-        opacity: 0;
-        transform: translateY(var(--rac-title-anim-shift));
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.rac-loading-dots {
-    display: inline-flex;
-    gap: var(--rac-dots-gap);
-    padding-left: var(--rac-dots-padding-left);
-    align-items: var(--rac-dots-align);
-}
-
-.rac-loading-dots i {
-    width: var(--rac-dots-height);
-    height: var(--rac-dots-width);
-    background: var(--rac-dots-color);
-    border-radius: 50%;
-    animation: blink var(--rac-dots-animation-duration) infinite both;
-}
-
-.rac-loading-dots i:nth-child(1) {animation-delay: var(--rac-dots-animation-delay-1);}
-.rac-loading-dots i:nth-child(2) {animation-delay: var(--rac-dots-animation-delay-2);}
-.rac-loading-dots i:nth-child(3) {animation-delay: var(--rac-dots-animation-delay-3);}
-
-@keyframes blink {
-  0%   {opacity: .2;}
-  20%  {opacity: 1;}
-  100% {opacity: .2;}
-}
-
-.rac-select-buttons {
-    display: flex;
-    align-items: center;
-}
-
-.rac-select-cancel {
-    height: var(--rac-cancel-height);
-    width: var(--rac-cancel-width);
-
-    transition:
-        opacity var(--rac-duration-fast),
-        border-color var(--rac-duration-fast);
-}
-
-.rac-select-arrow-wrapper {
-    display: block;
-    height: var(--rac-arrow-height);
-    width: var(--rac-arrow-width);
-    padding: var(--rac-arrow-padding);
-
-    will-change: transform;
-    transition:
-        transform var(--rac-duration-base) cubic-bezier(.4,0,.2,1),
-        padding var(--rac-duration-fast);
-    transform-origin: 50% 50%;
-    transform: translateZ(0);
-}
-
-.rac-select-arrow-wrapper.--open {
-    transform: rotate(180deg);
-}
-
-.rac-select-arrow, 
-.rac-select-cancel {
-    object-fit: contain;
-}
-
-.rac-select-list {
-    background-color: var(--rac-list-background);
-    color: var(--rac-list-color);
-    max-height: var(--rac-list-max-height);
-    overflow-y: auto;
-    scrollbar-color: var(--rac-scroll-color) var(--rac-scroll-track);
-    scrollbar-width: thin;
-    scrollbar-gutter: stable;
-    scroll-behavior: smooth;
-    scroll-padding-top: var(--rac-scroll-padding-top);
-    scroll-padding-bottom: var(--rac-scroll-padding-bottom);
-    z-index: 1;
-    transition:
-        border-color var(--rac-duration-fast),
-        background-color var(--rac-duration-fast),
-        opacity var(--rac-duration-base);
-}
-
-.rac-select-option {
-    transition: background-color var(--rac-duration-fast) cubic-bezier(0.4,0,0.2,1);
-    min-height: var(--rac-option-min-height);
-    padding: var(--rac-option-padding);
-    justify-content: space-between;
-    align-items: center;
-    display: flex;
-    cursor: pointer;
-}
-
-.rac-select-option:not(.rac-disabled-option):not(.rac-group-option):hover {
-    background-color: var(--rac-option-hover);
-}
-
-.rac-select-option.rac-highlighted {
-    background-color: var(--rac-option-highlight);
-}
-
-.rac-select-option.rac-selected {
-    background-color: var(--rac-option-selected);
-}
-
-.rac-select-option.rac-selected.rac-highlighted {
-    background-color: var(--rac-option-selected);
-}
-
-.rac-option-title {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    text-wrap: wrap;
-}
-
-.rac-disabled-option {
-    cursor: not-allowed;
-    color: var(--rac-disabled-option-color);
-}
-
-.rac-invalid-option {
-    color: var(--rac-invalid-option-color);
-}
-
-.rac-true-option {
-    color: var(--rac-true-option-color);
-}
-
-.rac-false-option {
-    color: var(--rac-false-option-color);
-}
-
-.rac-loading-option {
-    cursor: wait;
-}
-
-.rac-group-header {
-    cursor: pointer;
-    min-height: var(--rac-group-header-min-height);
-    padding: var(--rac-group-header-padding);
-    transition: background-color var(--rac-duration-fast) cubic-bezier(0.4,0,0.2,1);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-weight: var(--rac-group-header-font-weight);
-    font-size: var(--rac-group-header-font-size);
-}
-
-.rac-group-arrow-wrapper {
-    display: block;
-    height: var(--rac-group-arrow-height);
-    width: var(--rac-group-arrow-width);
-    padding: var(--rac-group-arrow-padding);
-
-    will-change: transform;
-    transition:
-        transform var(--rac-duration-base) cubic-bezier(.4,0,.2,1),
-        padding var(--rac-duration-fast);
-    transform-origin: 50% 50%;
-    transform: translateZ(0);
-}
-
-.rac-group-arrow-wrapper.--open {
-    transform: rotate(180deg);
-}
-
-.rac-disabled-group {
-    cursor: not-allowed;
-    color: var(--rac-disabled-group-color);
-}
-
-.rac-select-selected {
-    display: flex;
-    align-items: center;
-}
-
-.rac-multiple-selected-option {
-    border: var(--rac-multiple-selected-border);
-    border-radius: var(--rac-multiple-selected-radius);
-    min-height: var(--rac-multiple-selected-min-height);
-    transition: background-color var(--rac-duration-fast) cubic-bezier(0.4,0,0.2,1);
-
-    display: inline-flex;
-    align-items: center;
-    vertical-align: middle;
-    line-height: normal;
-    padding: var(--rac-multiple-selected-padding);
-    margin: var(--rac-multiple-selected-margin);
-    white-space: nowrap;
-}
-
-.rac-multiple-selected-option:hover {
-    background-color: color-mix(in srgb, CanvasText 6%, Canvas);
-}
-
-.rac-checkbox {
-    min-height: var(--rac-option-min-height);
-    min-width: var(--rac-option-min-height);
-    border: var(--rac-checkbox-border);
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    height: 100%;
-    margin-right: var(--rac-checkbox-margin-right);
-}
-
-.rac-checkmark {
-    color: var(--rac-base-green);
-    opacity: 0;
-    max-width: 0;
-    max-height: 0;
-    transition: opacity var(--rac-duration-base), max-height var(--rac-duration-base), max-width var(--rac-duration-base);
-}
-
-.rac-checkmark.--checked {
-    opacity: 1;
-    max-height: var(--rac-option-min-height);
-    max-width: var(--rac-option-min-height);
-}