react-animated-select 0.5.2 → 0.6.0

package/demo/src/shake.js

@@ -1,11 +0,0 @@
-export const shake = (el) => {
-  if (!el) return
-
-  el.classList.remove('--animated-error')
-  void el.offsetWidth
-  el.classList.add('--animated-error')
-}
-
-export const clearShake = (el) => {
-  el?.classList.remove('--animated-error')
-}

package/demo/src/slideDown.jsx

@@ -1,35 +0,0 @@
-import {CSSTransition} from 'react-transition-group'
-import {useRef} from 'react'
-
-function SlideDown({visibility, children, duration = 300}) {
-    const nodeRef = useRef(null)
-
-    return(
-        <CSSTransition
-            in={visibility}
-            timeout={300}
-            classNames='slideDown'
-            unmountOnExit
-            nodeRef={nodeRef}
-            onEnter={() => (nodeRef.current.style.height = '0px')}
-            onEntering={() => (nodeRef.current.style.height = nodeRef.current.scrollHeight + 'px')}
-            onEntered={() => (nodeRef.current.style.height = 'auto')}
-            onExit={() => (nodeRef.current.style.height = nodeRef.current.scrollHeight + 'px')}
-            onExiting={() => (nodeRef.current.style.height = '0px')}
-        >
-            <div
-                ref={nodeRef}
-                style={{
-                    overflow: 'hidden',
-                    transition: `height ${duration}ms ease`
-                }}
-                className='slideDown-enter-done'
-                tabIndex={-1}
-            >
-                {children}
-            </div>
-        </CSSTransition>
-    )
-}
-
-export default SlideDown

package/demo/vite.config.js

@@ -1,7 +0,0 @@
-import {defineConfig} from 'vite'
-import react from '@vitejs/plugin-react'
-
-export default defineConfig({
-  plugins: [react()],
-  base: '/react-animated-select/',
-})

package/src/animated.jsx

@@ -1,80 +0,0 @@
-import {useRef} from 'react'
-import {CSSTransition} from 'react-transition-group'
-
-const Animated = ({children, duration, widthMode = false, ...props}) => {
-    const nodeRef = useRef(null)
-    return (
-        <CSSTransition
-            nodeRef={nodeRef}
-            timeout={duration}
-            classNames='rac-slide-left'
-            {...props}
-            onEnter={() => {
-        const el = nodeRef.current
-        if (widthMode) {
-          el.style.width = '0px'
-        } else {
-          el.style.height = '0px'
-          el.style.transform = 'translateY(-10px)'
-        }
-        el.style.opacity = '0'
-            }}
-            onEntering={() => {
-                const el = nodeRef.current
-                el.offsetHeight 
-                if (widthMode) {
-                    el.style.width = el.scrollWidth + 'px'
-                } else {
-                el.style.height = el.scrollHeight + 'px'
-                el.style.transform = 'translateY(0)'
-                }
-                el.style.opacity = '1'
-            }}
-            onEntered={() => {
-                const el = nodeRef.current
-                el.style.width = widthMode ? 'auto' : ''
-                el.style.height = widthMode ? '' : 'auto'
-                el.style.opacity = '1'
-                el.style.transform = ''
-            }}
-            onExit={() => {
-                const el = nodeRef.current
-                if (widthMode) {
-                    el.style.width = el.offsetWidth + 'px'
-                } else {
-                    el.style.height = el.offsetHeight + 'px'
-                    el.style.position = 'absolute'
-                }
-                el.style.opacity = '1'
-            }}
-            onExiting={() => {
-                const el = nodeRef.current
-                if (widthMode) {
-                    el.style.width = '0px'
-                } else {
-                    el.style.height = '0px'
-                    el.style.transform = 'translateY(10px)'
-                }
-                    el.style.opacity = '0'
-            }}
-            >
-            <div 
-                ref={nodeRef} 
-                style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    height: '100%',
-                    overflow: 'hidden',
-                    whiteSpace: 'nowrap',
-                    transition: `all ${duration}ms ease`,
-                    top: 0,
-                    left: 0
-                }}
-            >
-                {children}
-            </div>
-        </CSSTransition>
-    )
-}
-
-export default Animated

package/src/getText.jsx

@@ -1,11 +0,0 @@
-import React from 'react'
-
-const getText = (children) => {
-    if (!children) return ''
-    if (typeof children === 'string' || typeof children === 'number') return String(children)
-    if (Array.isArray(children)) return children.map(getText).join(' ').replace(/\s+/g, ' ').trim()
-    if (React.isValidElement(children)) return getText(children.props.children)
-    return ''
-}
-
-export default getText

package/src/icons.jsx

@@ -1,43 +0,0 @@
-export const XMarkIcon = ({className = '', ...props}) => (
-  <svg
-    className={className}
-    role='button'
-    aria-label='Clear selection'
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 320 512"
-    width="1em"
-    height="1em"
-    fill="currentColor"
-    {...props}
-  >
-    <path d="M310.6 361.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L160 301.3 54.6 406.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L114.7 256 9.4 150.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 210.7 265.4 105.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L205.3 256l105.3 105.4z"/>
-  </svg>
-)
-
-export const ArrowUpIcon = ({className = '', ...props}) => (
-    <svg
-      className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 448 512"
-      width="1em"
-      height="1em"
-      fill="currentColor"
-      {...props}
-    >
-      <path d="M34.9 289.5l175.9-175.8c9.4-9.4 24.6-9.4 33.9 0L420.1 289.5c15.1 15.1 4.4 41-17 41H51.9c-21.4 0-32.1-25.9-17-41z"/>
-    </svg>
-)
-
-export const CheckmarkIcon = ({className = '', ...props}) => (
-  <svg
-    className={className}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    width="1em"
-    height="1em"
-    fill="currentColor"
-    {...props}
-  >
-    <path d="M20.285 6.708a1 1 0 0 0-1.414-1.416l-9.192 9.192-4.243-4.244a1 1 0 1 0-1.414 1.416l5 5a1 1 0 0 0 1.414 0l9.849-9.948z"/>
-  </svg>
-)

package/src/index.js

@@ -1,5 +0,0 @@
-export {default as Select} from './select'
-export {default as Option} from './option'
-export {default as OptGroup} from './optgroup'
-
-import './select.css'

package/src/makeId.jsx

@@ -1,21 +0,0 @@
-// if user does not provide a unique identifier, a unique ID is generated based on value, filtering out unwanted characters
-export const makeId = (str, fallback = 'invalid-option', seed = '') => {
-    const safeSeed = seed ? seed.replace(/:/g, '') : ''
-    
-    if (typeof str !== 'string' || !str.trim()) {
-        return safeSeed ? `${fallback}-${safeSeed}` : `${fallback}-${Math.random().toString(36).slice(2, 8)}`
-    }
-
-    const cleaned = str
-        .normalize('NFKD')
-        .replace(/[\u0300-\u036f]/g, '')
-        .replace(/\s+/g, '-')
-        .replace(/[^\p{L}\p{N}-]+/gu, '')
-        .toLowerCase()
-
-    if (!cleaned) {
-        return safeSeed ? `${fallback}-${safeSeed}` : `${fallback}-${Math.random().toString(36).slice(2, 8)}`
-    }
-
-    return cleaned || `${fallback}-${Math.random().toString(36).slice(2, 8)}`
-}

package/src/optgroup.jsx

@@ -1,36 +0,0 @@
-import {useContext, useEffect, useMemo, createContext} from 'react'
-import {SelectContext} from './selectContext'
-import {makeId} from './makeId'
-
-export const GroupContext = createContext(null)
-
-export default function OptGroup({children, name, label, value, id, emptyGroupText = 'Empty group'}) {
-    const ctx = useContext(SelectContext)
-
-    const groupName = useMemo(() => {
-        const val = name ?? label ?? value ?? id
-        return (val !== undefined && val !== null && val !== '') ? String(val) : emptyGroupText
-    }, [name, label, value, id, emptyGroupText])
-
-    const groupId = useMemo(() => `group-marker-${makeId(groupName)}`, [groupName])
-
-    useEffect(() => {
-        if (!ctx) return
-
-        const groupMarker = {
-            id: groupId,
-            group: groupName,
-            isGroupMarker: true,
-            disabled: true
-        }
-
-        ctx.registerOption(groupMarker)
-        return () => ctx.unregisterOption(groupId)
-    }, [ctx.registerOption, ctx.unregisterOption, groupId, groupName])
-
-    return (
-        <GroupContext.Provider value={groupName}>
-            {children}
-        </GroupContext.Provider>
-    )
-}

package/src/option.jsx

@@ -1,50 +0,0 @@
-import {useEffect, useContext, useMemo, useId} from 'react'
-import {SelectContext} from './selectContext'
-import {GroupContext} from './optgroup'
-import getText from './getText'
-
-export default function Option({value, id, className, children, disabled, group: manualGroup}) {
-    const ctx = useContext(SelectContext)
-    const contextGroup = useContext(GroupContext)
-    
-    const registerOption = ctx?.registerOption;
-    const unregisterOption = ctx?.unregisterOption;
-
-    const uniqueId = useId()
-    const stableId = useMemo(() => {
-        return id ? String(id) : uniqueId.replace(/:/g, '')
-    }, [id, uniqueId])
-
-    useEffect(() => {
-        if (!registerOption) return
-
-        const textFallback = getText(children)
-        const hasJsx = children !== undefined && children !== null
-        let finalLabel = ''
-
-        if (textFallback) {
-            finalLabel = textFallback
-        } else if (id !== undefined && id !== null && id !== '') {
-            finalLabel = String(id)
-        } else if (value !== undefined && value !== null && value !== '') {
-            finalLabel = String(value)
-        }
-
-        const option = {
-            id: stableId,
-            value: value !== undefined ? value : textFallback,
-            label: finalLabel,
-            jsx: children,
-            hasJsx,
-            className,
-            disabled: !!disabled,
-            group: manualGroup || contextGroup || null 
-        }
-
-        registerOption(option)
-        return () => unregisterOption(stableId)
-        
-    }, [stableId, value, children, className, disabled, manualGroup, contextGroup, registerOption, unregisterOption])
-
-    return null
-}

package/src/options.jsx

@@ -1,197 +0,0 @@
-import {CSSTransition} from 'react-transition-group'
-import {useRef, useState, useEffect, useCallback, memo} 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 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}` : ''}`;
-
-  useEffect(() => {
-    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)
-    })
-    resizeObserver.observe(selectRef.current)
-    return () => resizeObserver.disconnect()
-  }, [selectRef])
-
-  const baseStyles = {
-    position: 'fixed',
-    '--rac-duration': `${duration}ms`,
-    '--rac-easing': easing,
-    left: `${coords.left}px`,
-    width: `${coords.width}px`,
-    overflow: 'hidden',
-    zIndex: '1',
-    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)
-})