@ceed/cds 1.35.0 → 1.36.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Select/Select.d.ts +9 -1
- package/dist/components/inputs/Select.md +78 -25
- package/dist/index.browser.js +1 -1
- package/dist/index.browser.js.map +3 -3
- package/dist/index.cjs +17 -3
- package/dist/index.js +17 -3
- package/framer/index.js +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -3290,11 +3290,22 @@ function Select(props) {
|
|
|
3290
3290
|
disabled,
|
|
3291
3291
|
required,
|
|
3292
3292
|
onChange,
|
|
3293
|
+
// NOTE: id 를 FormControl 에 넘겨 htmlFor/labelId(`${id}-label`)를 결정론적으로 만든다.
|
|
3294
|
+
// Joy FormControl context 가 FormLabel(id) ↔ Select button(aria-labelledby)을 자동 결선하므로,
|
|
3295
|
+
// 외부에서 useId 로 라벨/버튼 ARIA 를 수동 결합할 필요가 없다.
|
|
3296
|
+
id,
|
|
3297
|
+
slotProps,
|
|
3293
3298
|
// NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
|
|
3294
3299
|
sx,
|
|
3295
3300
|
className,
|
|
3296
3301
|
...innerProps
|
|
3297
3302
|
} = props;
|
|
3303
|
+
const {
|
|
3304
|
+
formControl: formControlProps,
|
|
3305
|
+
formLabel: formLabelProps,
|
|
3306
|
+
formHelperText: formHelperTextProps,
|
|
3307
|
+
...joySlotProps
|
|
3308
|
+
} = slotProps ?? {};
|
|
3298
3309
|
const options = (0, import_react23.useMemo)(
|
|
3299
3310
|
() => props.options.map((option) => {
|
|
3300
3311
|
if (option.hasOwnProperty("value") && option.hasOwnProperty("label")) {
|
|
@@ -3335,6 +3346,7 @@ function Select(props) {
|
|
|
3335
3346
|
disabled,
|
|
3336
3347
|
size,
|
|
3337
3348
|
color: error ? "danger" : color,
|
|
3349
|
+
slotProps: joySlotProps,
|
|
3338
3350
|
onChange: handleChange,
|
|
3339
3351
|
renderValue: (selected) => {
|
|
3340
3352
|
if (!selected) return null;
|
|
@@ -3354,12 +3366,14 @@ function Select(props) {
|
|
|
3354
3366
|
size,
|
|
3355
3367
|
color,
|
|
3356
3368
|
error,
|
|
3369
|
+
id,
|
|
3357
3370
|
sx,
|
|
3358
|
-
className
|
|
3371
|
+
className,
|
|
3372
|
+
...formControlProps
|
|
3359
3373
|
},
|
|
3360
|
-
label && /* @__PURE__ */ import_react23.default.createElement(FormLabel_default,
|
|
3374
|
+
label && /* @__PURE__ */ import_react23.default.createElement(FormLabel_default, { ...formLabelProps }, label),
|
|
3361
3375
|
select,
|
|
3362
|
-
helperText && /* @__PURE__ */ import_react23.default.createElement(FormHelperText_default,
|
|
3376
|
+
helperText && /* @__PURE__ */ import_react23.default.createElement(FormHelperText_default, { ...formHelperTextProps }, helperText)
|
|
3363
3377
|
);
|
|
3364
3378
|
}
|
|
3365
3379
|
Select.displayName = "Select";
|
package/dist/index.js
CHANGED
|
@@ -3175,11 +3175,22 @@ function Select(props) {
|
|
|
3175
3175
|
disabled,
|
|
3176
3176
|
required,
|
|
3177
3177
|
onChange,
|
|
3178
|
+
// NOTE: id 를 FormControl 에 넘겨 htmlFor/labelId(`${id}-label`)를 결정론적으로 만든다.
|
|
3179
|
+
// Joy FormControl context 가 FormLabel(id) ↔ Select button(aria-labelledby)을 자동 결선하므로,
|
|
3180
|
+
// 외부에서 useId 로 라벨/버튼 ARIA 를 수동 결합할 필요가 없다.
|
|
3181
|
+
id,
|
|
3182
|
+
slotProps,
|
|
3178
3183
|
// NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
|
|
3179
3184
|
sx,
|
|
3180
3185
|
className,
|
|
3181
3186
|
...innerProps
|
|
3182
3187
|
} = props;
|
|
3188
|
+
const {
|
|
3189
|
+
formControl: formControlProps,
|
|
3190
|
+
formLabel: formLabelProps,
|
|
3191
|
+
formHelperText: formHelperTextProps,
|
|
3192
|
+
...joySlotProps
|
|
3193
|
+
} = slotProps ?? {};
|
|
3183
3194
|
const options = useMemo8(
|
|
3184
3195
|
() => props.options.map((option) => {
|
|
3185
3196
|
if (option.hasOwnProperty("value") && option.hasOwnProperty("label")) {
|
|
@@ -3220,6 +3231,7 @@ function Select(props) {
|
|
|
3220
3231
|
disabled,
|
|
3221
3232
|
size,
|
|
3222
3233
|
color: error ? "danger" : color,
|
|
3234
|
+
slotProps: joySlotProps,
|
|
3223
3235
|
onChange: handleChange,
|
|
3224
3236
|
renderValue: (selected) => {
|
|
3225
3237
|
if (!selected) return null;
|
|
@@ -3239,12 +3251,14 @@ function Select(props) {
|
|
|
3239
3251
|
size,
|
|
3240
3252
|
color,
|
|
3241
3253
|
error,
|
|
3254
|
+
id,
|
|
3242
3255
|
sx,
|
|
3243
|
-
className
|
|
3256
|
+
className,
|
|
3257
|
+
...formControlProps
|
|
3244
3258
|
},
|
|
3245
|
-
label && /* @__PURE__ */ React21.createElement(FormLabel_default,
|
|
3259
|
+
label && /* @__PURE__ */ React21.createElement(FormLabel_default, { ...formLabelProps }, label),
|
|
3246
3260
|
select,
|
|
3247
|
-
helperText && /* @__PURE__ */ React21.createElement(FormHelperText_default,
|
|
3261
|
+
helperText && /* @__PURE__ */ React21.createElement(FormHelperText_default, { ...formHelperTextProps }, helperText)
|
|
3248
3262
|
);
|
|
3249
3263
|
}
|
|
3250
3264
|
Select.displayName = "Select";
|