@kimdw-rtk/ui 0.1.16 → 0.1.17

package/dist/components/Select/Select.cjs

@@ -11,15 +11,33 @@ var SelectOptionList = require('./SelectOptionList.cjs');
 var SelectTrigger = require('./SelectTrigger.cjs');
 var sx = require('../../styles/sx.cjs');
 
+const getDefaultSelectedLabel = (children, value) => {
+    if (!value) {
+        return undefined;
+    }
+    for (const child of react.Children.toArray(children)) {
+        if (!react.isValidElement(child)) {
+            continue;
+        }
+        if (child.props.value === value) {
+            return child.props.children;
+        }
+    }
+    return undefined;
+};
 const Select = react.forwardRef(({ children, className, style, name, defaultValue, width = '100%', size = 'md', sx: propSx, variant = 'outlined', onChange, ...props }, ref) => {
     const containerRef = react.useRef(null);
     const targetRef = utils.useCombinedRefs(ref, containerRef);
     const [state, dispatch] = react.useReducer(SelectContext.selectReducer, {
         isActive: false,
+        selected: defaultValue,
         containerRef,
         defaultValue,
         items: new Map(),
     });
+    const selected = state.selected ?? defaultValue;
+    const selectedLabel = state.items.get(selected || '') ??
+        getDefaultSelectedLabel(children, selected);
     react.useEffect(() => {
         const container = containerRef.current;
         if (!container) {
@@ -43,7 +61,7 @@ const Select = react.forwardRef(({ children, className, style, name, defaultValu
         onChange(state.selected);
         //eslint-disable-next-line
     }, [state.selected]);
-    return (jsxRuntime.jsx(SelectContext.SelectContext.Provider, { value: { state, dispatch }, children: jsxRuntime.jsxs("div", { ref: targetRef, className: clsx.clsx(Select_css.select({ size }), className, sx.sx(propSx)), style: { ...style, width }, ...props, children: [jsxRuntime.jsx(SelectTrigger.default, { variant: variant, children: state.selected !== null && state.items.get(state.selected || '') }), jsxRuntime.jsx(SelectOptionList.default, { children: children }), jsxRuntime.jsx("input", { name: name, type: "hidden", value: state.selected || '' })] }) }));
+    return (jsxRuntime.jsx(SelectContext.SelectContext.Provider, { value: { state, dispatch }, children: jsxRuntime.jsxs("div", { ref: targetRef, className: clsx.clsx(Select_css.select({ size }), className, sx.sx(propSx)), style: { ...style, width }, ...props, children: [jsxRuntime.jsx(SelectTrigger.default, { variant: variant, children: selectedLabel }), jsxRuntime.jsx(SelectOptionList.default, { children: children }), jsxRuntime.jsx("input", { name: name, type: "hidden", value: selected || '' })] }) }));
 });
 Select.displayName = 'Select';
 

package/dist/components/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AAGlC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAE5C,UAAU,WACR,SAAQ,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,MAAM,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC;IACrE,GAAG,CAAC,EAAE,SAAS,CAAC;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC,SAAS,CAAC,CAAC;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAChD;AAED,eAAO,MAAM,MAAM,qHA0ElB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,SAAS,EAAE,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQL,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AAGlC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAE5C,UAAU,WACR,SAAQ,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,MAAM,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC;IACrE,GAAG,CAAC,EAAE,SAAS,CAAC;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC,SAAS,CAAC,CAAC;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAChD;AAuBD,eAAO,MAAM,MAAM,qHA6ElB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,SAAS,EAAE,CAAC"}

package/dist/components/Select/Select.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useRef, useReducer, useEffect } from 'react';
+import { forwardRef, useRef, useReducer, useEffect, Children, isValidElement } from 'react';
 import { useCombinedRefs } from '@kimdw-rtk/utils';
 import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
 import { select } from './Select.css.vanilla.js';
@@ -11,15 +11,33 @@ import SelectOptionList from './SelectOptionList.js';
 import SelectTrigger from './SelectTrigger.js';
 import { sx } from '../../styles/sx.js';
 
+const getDefaultSelectedLabel = (children, value) => {
+    if (!value) {
+        return undefined;
+    }
+    for (const child of Children.toArray(children)) {
+        if (!isValidElement(child)) {
+            continue;
+        }
+        if (child.props.value === value) {
+            return child.props.children;
+        }
+    }
+    return undefined;
+};
 const Select = forwardRef(({ children, className, style, name, defaultValue, width = '100%', size = 'md', sx: propSx, variant = 'outlined', onChange, ...props }, ref) => {
     const containerRef = useRef(null);
     const targetRef = useCombinedRefs(ref, containerRef);
     const [state, dispatch] = useReducer(selectReducer, {
         isActive: false,
+        selected: defaultValue,
         containerRef,
         defaultValue,
         items: new Map(),
     });
+    const selected = state.selected ?? defaultValue;
+    const selectedLabel = state.items.get(selected || '') ??
+        getDefaultSelectedLabel(children, selected);
     useEffect(() => {
         const container = containerRef.current;
         if (!container) {
@@ -43,7 +61,7 @@ const Select = forwardRef(({ children, className, style, name, defaultValue, wid
         onChange(state.selected);
         //eslint-disable-next-line
     }, [state.selected]);
-    return (jsx(SelectContext.Provider, { value: { state, dispatch }, children: jsxs("div", { ref: targetRef, className: clsx(select({ size }), className, sx(propSx)), style: { ...style, width }, ...props, children: [jsx(SelectTrigger, { variant: variant, children: state.selected !== null && state.items.get(state.selected || '') }), jsx(SelectOptionList, { children: children }), jsx("input", { name: name, type: "hidden", value: state.selected || '' })] }) }));
+    return (jsx(SelectContext.Provider, { value: { state, dispatch }, children: jsxs("div", { ref: targetRef, className: clsx(select({ size }), className, sx(propSx)), style: { ...style, width }, ...props, children: [jsx(SelectTrigger, { variant: variant, children: selectedLabel }), jsx(SelectOptionList, { children: children }), jsx("input", { name: name, type: "hidden", value: selected || '' })] }) }));
 });
 Select.displayName = 'Select';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kimdw-rtk/ui",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "private": false,
   "type": "module",
   "imports": {