@tapie-kr/inspire-react/dist/cjs/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
*/
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var styles_css = require('./styles.css.js');
var color_css = require('../../../lib/style/contract/color.css.js');
var component_css = require('../../../lib/style/contract/component.css.js');
var index_esm = require('../../../node_modules/@cottons-kr/react-foundation/dist/index.esm.js');
var index$2 = require('../../foundations/Icon/index.js');
var iconSet = require('../../foundations/Icon/icon-set.js');
var index = require('../../foundations/Typography/index.js');
var index$1 = require('../../../_virtual/index.js');
var framerMotion = require('framer-motion');
var React = require('react');
var useClickOutside = require('./hooks/use-click-outside.js');
var useSelectController = require('./hooks/use-select-controller.js');
var shared = require('./shared.js');

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

exports.Select = Select;