react-animated-select 0.5.6 → 0.6.0

package/demo/package.json

@@ -1,35 +0,0 @@
-{
-  "name": "demo",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "predeploy": "npm run build",
-    "deploy": "gh-pages -d dist",
-    "lint": "eslint .",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^7.1.0",
-    "@fortawesome/free-solid-svg-icons": "^7.1.0",
-    "@fortawesome/react-fontawesome": "^3.1.1",
-    "framer-motion": "^12.29.0",
-    "react": "^19.2.3",
-    "react-animated-select": "^0.4.0",
-    "react-dom": "^19.2.3",
-    "vite": "^7.3.1"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.39.1",
-    "@types/react": "^19.2.5",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
-    "eslint": "^9.39.1",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
-    "gh-pages": "^6.3.0",
-    "globals": "^16.5.0"
-  }
-}

package/demo/public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/demo/src/App.tsx

@@ -1,437 +0,0 @@
-import {JSX, useEffect, useRef, useState} from 'react'
-import {Select, Option, OptGroup} from 'react-animated-select'
-import SlideDown from './slideDown'
-import {motion, useInView} from 'framer-motion'
-import {shake, clearShake} from './shake'
-
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
-import {faTrashCan} from '@fortawesome/free-solid-svg-icons'
-
-import './rac.css'
-function App() {
-  const [loading, setLoading] = useState<boolean>(false)
-  const [error, setError] = useState<boolean>(false)
-  const [disabled, setDisabled] = useState<boolean>(false)
-
-  type Primitive = string | number | boolean | undefined
-
-  type ObjectOption = {
-      id?: string | number
-      name?: string
-      value?: string | number
-      label?: string
-      disabled?: boolean
-  }
-
-  type SelectOption = Primitive | ObjectOption
-
-  const [options, setOptions] = useState<SelectOption[]>(['Option 1', true, false, undefined, console.log, {name: 'Option 6', disabled: true}, 'Option 7', {name: 'Option 8'}, {disabled: true}, {name: 'Option 10', id: 2, group: 2}, 'Option 11', 'Option 12', 'Option 13', 'Option 14', 'Option 15'])
-
-  const [value, setValue] = useState<Primitive>()
-  const [placeholder, setPlaceholder] = useState<string>('Choose option')
-  const [emptyText, setEmptyText] = useState<string>('No options')
-  const [loadingText, setLoadingText] = useState<string>('Loading')
-  const [errorText, setErrorText] = useState<string>('Failed to load')
-  const [disabledText, setDisabledText] = useState<string>('Disabled')
-  const [duration, setDuration] = useState<number>(300)
-  const [easing, setEasing] = useState<string>('ease-out')
-  const [offset, setOffset] = useState<number>(2)
-  const [animateOpacity, setAnimateOpacity] = useState<boolean>(true)
-  const [alwaysOpen, setAlwaysOpen] = useState<boolean>(false)
-  const [hasMore, setHasMore] = useState<boolean>(false)
-  const [loadButton, setLoadButton] = useState<boolean>(false)
-  const [loadButtonText, setLoadButtonText] = useState<string>('Load more')
-  const [loadMoreText, setLoadMoreText] = useState<string>('Loading')
-  const [loadOffset, setLoadOffset] = useState<number>(100)
-  const [loadAhead, setLoadAhead] = useState<number>(3)
-  const [gropValue, setGroupValue] = useState<string>('')
-  const [group, setGroup] = useState<boolean>(false)
-  const [multiple, setMultiple] = useState<boolean>(false)
-
-  type SettingItem = {
-    label: string
-    state: number | boolean
-    default?: number
-    min?: number
-    max?: number
-    step?: number
-    unit?: string
-    setState: (value: number | boolean) => void
-  }
-
-  const ranges: SettingItem[] = [
-    {label: 'duration', default: 300, min: 0, max: 1000, step: 50, unit: 'ms', state: duration, setState: setDuration},
-    {label: 'offset', default: 3, min: 0, max: 25, step: 1, unit: 'px', state: offset, setState: setOffset},
-    {label: 'loadAhead', default: 3, min: 0, max: 15, step: 1, unit: 'options', state: loadAhead, setState: setLoadAhead},
-    {label: 'loadOffset', default: 100, min: 0, max: 1000, step: 50, unit: 'px', state: loadOffset, setState: setLoadOffset}
-  ]
-
-  const renderRanges: JSX.Element[] = ranges.map((item) => (
-    <label
-      className='rac-range-label'
-      key={item.label}
-    >
-      <span
-        className='rac-prop-span'
-      >
-        {item.label}: {item.state ?? item.default}{item.unit}
-      </span>
-      <input
-        className='rac-range-input'
-        type='range'
-        min={item.min}
-        max={item.max}
-        step={item.step}
-        value={item.state ?? item.default}
-        onChange={(e) => item.setState(Number(e.target.value))}
-      />
-    </label>
-  ))
-
-  const settings: SettingItem[] = [
-    {label: 'multiple', state: multiple, setState: setMultiple},
-    {label: 'loading', state: loading, setState: setLoading},
-    {label: 'disabled', state: disabled, setState: setDisabled},
-    {label: 'error', state: error, setState: setError},
-    {label: 'alwaysOpen', state: alwaysOpen, setState: setAlwaysOpen},
-    {label: 'animateOpacity', state: animateOpacity, setState: setAnimateOpacity},
-    {label: 'hasMore', state: hasMore, setState: setHasMore},
-    {label: 'loadButton', state: loadButton, setState: setLoadButton}
-  ]
-
-  const renderSettings: JSX.Element[] = settings.map((item) => (
-    <label
-      key={item.label}
-      className='rac-checkbox-wrapper'
-    >
-      <input
-        className='rac-demo-checkbox'
-        type='checkbox'
-        checked={item.state}
-        onChange={(e) => item.setState(e.target.checked)}
-      />
-      {item.label}
-    </label>
-  ))
-
-  type TextSettingItem = {
-    label: string
-    value: string | undefined
-    setValue: (value: string) => void
-  }
-
-  const textSettings: TextSettingItem[] = [
-    {label: 'placeholder', value: placeholder, setValue: setPlaceholder},
-    {label: 'emptyText', value: emptyText, setValue: setEmptyText},
-    {label: 'loadingText', value: loadingText, setValue: setLoadingText},
-    {label: 'errorText', value: errorText, setValue: setErrorText},
-    {label: 'disabledText', value: disabledText, setValue: setDisabledText},
-    {label: 'loadButtonText', value: loadButtonText, setValue: setLoadButtonText},
-    {label: 'loadMoreText', value: loadMoreText, setValue: setLoadMoreText}
-  ]
-
-  const renderTextSettings: JSX.Element[] = textSettings.map((item) => (
-    <label
-      key={item.label}
-      className='rac-prop-label'
-    >
-      <span
-        className='rac-prop-span'
-      >
-        {item.label}
-      </span>
-      <input
-        className='rac-prop-value'
-        placeholder={item.label}
-        type='text'
-        value={item.value}
-        onChange={(e) => item.setValue(e.target.value)}
-      />
-    </label>
-  ))
-
-  const [inputValue, setInputValue] = useState('')
-  const [disabledOption, setDisabledOption] = useState<boolean>(false)
-
-  const buttonRef = useRef<HTMLInputElement>(null)
-
-  const addOption = (disabled: boolean) => {
-    !inputValue && shake(buttonRef.current)
-    const newOption = {name: inputValue, disabled: disabled, group: gropValue}
-
-    setOptions((prev) => [newOption, ...prev])
-    setInputValue('')
-    setGroupValue('')
-  }
-
-
-  const removeOption = (index: number) => {
-    setOptions((prev) => prev.filter((_, i) => i !== index))
-  }
-
-  const renderOptionValue = (value: SelectOption): string => {
-    if (typeof value === 'string') return value
-    if (typeof value === 'number') return String(value)
-    if (typeof value === 'boolean') return value ? 'true' : 'false'
-    if (typeof value === 'function') return value.toString()
-    if (value === undefined) return 'undefined'
-    if (value === null) return 'null'
-
-    if (typeof value === 'object') {
-      if ('name' in value && typeof value.name === 'string') {
-        return value.name
-      }
-
-      return JSON.stringify(value)
-    }
-
-    return String(value)
-  }
-  
-  const ref = useRef(null)
-  const visible = useInView(ref, {amount: 0.1, margin: '100px 0px 50px 0px'})
-
-  const renderOptionList = options.map((element, index) =>
-    <motion.div
-      key={index}
-      tabIndex={0}
-      className='rac-option-demo'
-      style={{ 
-          willChange: 'transform, opacity, height',
-          backfaceVisibility: 'hidden',
-          transform: 'translateZ(0)'
-      }}
-      ref={ref}
-      layoutId={String(index)}
-      layout={visible}
-      viewport={{once: false, amount: 0.1, margin: '0px 0px 0px 0px'}}
-      initial={{opacity: 0, scale: 0.9}}
-      whileInView={{opacity: 1, scale: 1}}
-      transition={{
-          layout: { 
-              type: 'spring', 
-              stiffness: 300, 
-              damping: 30
-          },
-          default: { 
-              duration: 0.3, 
-              ease: 'easeInOut'
-          },
-          opacity: {duration: 0.3}
-      }}
-      exit={{opacity: 0, scale: 0.8, transition: {duration: 0.3}}}
-    >
-      <span>
-        {renderOptionValue(element)}
-      </span>
-      <button
-        onClick={() => removeOption(index)}
-        className='rac-delete-demo-option'
-      >
-        <FontAwesomeIcon
-          icon={faTrashCan}
-          className='rac-delete-button-icon'
-        />
-      </button>
-    </motion.div>
-  )
-
-  const [demolist, setDemolist] = useState<boolean>(false)
-
-  const [showAdded, setShowAdded] = useState(false)
-  const timeoutRef = useRef<number | null>(null)
-
-  const handleAdd = () => {
-    setShowAdded(true)
-
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current)
-    }
-
-    timeoutRef.current = setTimeout(() => {
-      setShowAdded(false)
-      timeoutRef.current = null
-    }, 3000)
-  }
-
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current) clearTimeout(timeoutRef.current)
-    }
-  }, [])
-
-  return (
-    <div
-        className='rac-main'
-    >
-      <h1
-        className='rac-lead-title'
-      >
-        react-animated-select demo
-      </h1>
-        <div
-          className='rac-groups'
-        >
-          <div
-            className='rac-props'
-          >
-            <h2
-              className='rac-props-title'
-            >
-              Select states
-            </h2>
-            {renderSettings}
-            {renderRanges}
-                <label
-                  className='rac-prop-label'
-                >
-                  <span
-                    className='rac-prop-span'
-                  >
-                    easing
-                  </span>
-                  <input
-                    type='text'
-                    className='rac-prop-value'
-                    value={easing}
-                    onChange={e => setEasing(e.target.value)}
-                  />
-                </label>
-          </div>
-          <div
-            className='rac-visual'
-          >
-            <div
-              className='rac-texts'
-            >
-              <h2
-                className='rac-placeholders-title'
-              >
-                State placeholders
-              </h2>
-              <div
-                className='rac-placeholders-list'
-              >
-                {renderTextSettings}
-              </div>
-            </div>
-          </div>
-          <div
-            className='rac-select-wrapper'
-          >
-            <h3
-              className='rac-select-overview-title'
-            >
-              react-animated-select overview
-            </h3>
-            <Select
-              multiple={multiple}
-              hasMore={hasMore}
-              loadButton={loadButton}
-              loadButtonText={loadButtonText}
-              loadMoreText={loadMoreText}
-              loadOffset={loadOffset}
-              loadAhead={loadAhead}
-              className='rac-demo-select'
-              loading={loading}
-              error={error}
-              disabled={disabled}
-              options={options}
-              value={value}
-              placeholder={placeholder}
-              emptyText={emptyText}
-              loadingText={loadingText}
-              errorText={errorText}
-              disabledText={disabledText}
-              duration={duration}
-              offset={offset}
-              animateOpacity={animateOpacity}
-              alwaysOpen={alwaysOpen}
-              onChange={setValue}
-            />
-              <h3
-                className='rac-option-title'
-              >
-                Add option
-              </h3>
-              <div
-                className='rac-form-group'
-              >
-                <input
-                  className='rac-add-option'
-                  type='text'
-                  value={inputValue}
-                  onChange={(e) => setInputValue(e.target.value)}
-                  placeholder='name'
-                />
-                <label
-                  className='rac-checkbox-wrapper'
-                >
-                  <input
-                    type='checkbox'
-                    className='rac-demo-checkbox'
-                    checked={disabledOption}
-                    onChange={(e) => setDisabledOption(e.target.checked)}
-                  />
-                  <span
-                    className='rac-disabled-title'
-                  >
-                    Disabled
-                  </span>
-                </label>
-                <input
-                  className='rac-add-option'
-                  type='text'
-                  value={gropValue}
-                  placeholder='group'
-                  onChange={(e) => setGroupValue(e.target.value)}
-                />
-                <button
-                  ref={buttonRef}
-                  onClick={() => {
-                    addOption(disabledOption)
-                    handleAdd()
-                  }}
-                  className='rac-add-option-button'
-                >
-                  Add
-                </button>
-                <SlideDown
-                  visibility={showAdded}
-                >
-                  <span
-                    className='rac-added-option'
-                    // style={{color: inputValue ? '#35bb61' : 'red'}}
-                    style={{color: '#35bb61'}}
-                  >
-                    Added!
-                    {/* {inputValue ? 'Added!' : 'You created an empty option'} */}
-                  </span>
-                </SlideDown>
-              </div>
-              <button
-                onClick={() => setDemolist(!demolist)}
-                className='rac-option-list-button'
-              >
-                <span
-                  key={String(demolist)}
-                  className='rac-fade-text'
-                >
-                  {demolist ? 'Hide options' : 'Show options'}
-                </span>
-              </button>
-              <SlideDown
-                visibility={demolist}
-              >
-                <div
-                  className='rac-demo-option-list'
-                >
-                  {renderOptionList}
-                </div>
-              </SlideDown>
-            </div>
-          </div>
-</div>
-    )
-}
-export default App

package/demo/src/main.jsx

@@ -1,9 +0,0 @@
-import {StrictMode} from 'react'
-import {createRoot} from 'react-dom/client'
-import App from './App.tsx'
-
-createRoot(document.getElementById('root')).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)