@tapie-kr/inspire-react/dist/esm/components/atoms/Select/index.js

React Component Collection for INSPIRE

'use client';
/* eslint-disable */
/*
 * INSPIRE : Creative Kit
 * React Component Collection for INSPIRE
 *
 * This file is generated automatically. Do not modify it manually
 * Generated at : 2025. 3. 4. 오후 6:18:13
 * @tapie-kr/inspire-react version: 0.2.15
 *
 * (c) 2025 TAPIE. All rights reserved.
 * MIT License
*/
import { jsxs, jsx } from 'react/jsx-runtime';
import { value, base, baseLarge, dropdown, option } from './styles.css.js';
import { colorVars } from '../../../lib/style/contract/color.css.js';
import { spacingVars } from '../../../lib/style/contract/component.css.js';
import { HStack, VStack } from '../../../node_modules/@cottons-kr/react-foundation/dist/index.esm.js';
import { Icon } from '../../foundations/Icon/index.js';
import { GlyphIcon } from '../../foundations/Icon/icon-set.js';
import { Typography } from '../../foundations/Typography/index.js';
import cn from '../../../_virtual/index.js';
import { motion, AnimatePresence } from 'framer-motion';
import { useRef } from 'react';
import { useClickOutside } from './hooks/use-click-outside.js';
import { useSelectController } from './hooks/use-select-controller.js';
import { SelectSize } from './shared.js';

function Select(props){const{leadingIcon,size=SelectSize.LARGE,...restProps}=props;const{value: value$1,isOpen,isFocused,toggleOpen,handleSelect}=useSelectController(restProps);const isLarge=size===SelectSize.LARGE;const containerRef=useRef(null);const selectedLabel=props.options?.find(option=>option.value===value$1)?.label||props.placeholder;const Label=isLarge?Typography.Base:Typography.Petite;const focusColor=isFocused?colorVars.content.emphasized:colorVars.content.default;useClickOutside(containerRef,()=>{if(isOpen){toggleOpen();}});return jsxs("div",{ref:containerRef,style:{position:"relative",width:"100%"},children:[jsxs(HStack,{fullWidth:true,tag:"div",className:cn(base,isLarge&&baseLarge,props.className),align:"center",gap:isLarge?spacingVars.mini:spacingVars.tiny,tabIndex:0,onClick:toggleOpen,children:[jsxs(HStack,{gap:isLarge?spacingVars.mini:spacingVars.optical,children:[jsx(Icon,{name:leadingIcon,color:focusColor,size:isLarge?24:18}),jsx(Label,{className:value,color:focusColor,children:selectedLabel||props.placeholder})]}),jsx(motion.div,{animate:{rotate:isOpen?180:0},transition:{duration:.3},children:jsx(Icon,{name:GlyphIcon.KEYBOARD_ARROW_UP,color:colorVars.content.default})})]}),jsx(AnimatePresence,{mode:"popLayout",children:isOpen&&jsx(motion.div,{style:{zIndex:1e3,position:"absolute",top:"100%",left:0,width:"100%"},exit:{y:-10,opacity:0,zIndex:1e3},initial:{y:-10,opacity:0,zIndex:1e3},animate:{y:0,opacity:1,zIndex:1e3},children:jsx(VStack,{className:dropdown,children:props.options?.map((option$1,index)=>jsx("div",{className:option,"data-selected":option$1.value===value$1,onMouseUp:()=>handleSelect(option$1.value),children:option$1.label},index))})})})]})}

export { Select };