@yahoo/uds 3.172.0 → 3.173.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/automated-config/dist/utils/getConfigVariantProperties.d.cts +2 -2
- package/dist/automated-config/dist/utils/getConfigVariantProperties.d.ts +2 -2
- package/dist/components/Link.cjs +3 -3
- package/dist/components/Link.js +3 -3
- package/dist/components/client/BottomSheet/useBottomSheetStore.cjs +1 -1
- package/dist/components/client/BottomSheet/useBottomSheetStore.js +1 -1
- package/dist/components/client/Input/Input.cjs +4 -2
- package/dist/components/client/Input/Input.js +4 -2
- package/dist/components/client/Menu/Menu.ItemCheckbox.cjs +7 -6
- package/dist/components/client/Menu/Menu.ItemCheckbox.js +7 -6
- package/dist/components/client/Select/Select.cjs +6 -2
- package/dist/components/client/Select/Select.d.cts +1 -1
- package/dist/components/client/Select/Select.d.ts +1 -1
- package/dist/components/client/Select/Select.js +6 -2
- package/dist/components/client/Select/SelectItem.cjs +4 -4
- package/dist/components/client/Select/SelectItem.js +5 -5
- package/dist/components/client/Select/SelectTrigger.cjs +2 -1
- package/dist/components/client/Select/SelectTrigger.js +2 -1
- package/dist/components/client/Select/selectContext.d.cts +1 -0
- package/dist/components/client/Select/selectContext.d.ts +1 -0
- package/dist/components/client/Select/selectFieldStyles.cjs +1 -1
- package/dist/components/client/Select/selectFieldStyles.js +1 -1
- package/dist/tailwind-internal/dist/utils/getShadowStyles.d.cts +2 -2
- package/dist/tailwind-internal/dist/utils/getShadowStyles.d.ts +2 -2
- package/dist/types/dist/index.d.cts +4 -0
- package/dist/types/dist/index.d.ts +4 -0
- package/dist/uds/generated/componentData.cjs +443 -446
- package/dist/uds/generated/componentData.js +443 -446
- package/dist/uds/generated/tailwindPurge.cjs +6 -6
- package/dist/uds/generated/tailwindPurge.js +6 -6
- package/dist/uds/package.cjs +1 -1
- package/dist/uds/package.js +1 -1
- package/generated/componentData.json +722 -725
- package/generated/tailwindPurge.ts +1 -1
- package/package.json +2 -2
|
@@ -11,8 +11,8 @@ import { VariantConfig } from "../types/ComponentConfig.cjs";
|
|
|
11
11
|
* @returns A Record of layer names to their properties, or null if no properties are found
|
|
12
12
|
*/
|
|
13
13
|
declare function getConfigVariantProperties(variant?: VariantConfig): {
|
|
14
|
-
[x: string]: Readonly<Record<string, SelectedConfigurableProperty<"
|
|
15
|
-
root: Readonly<Record<string, SelectedConfigurableProperty<"
|
|
14
|
+
[x: string]: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "opacity" | "fillOpacity" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
|
|
15
|
+
root: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "opacity" | "fillOpacity" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
|
|
16
16
|
} | null; //#endregion
|
|
17
17
|
//#endregion
|
|
18
18
|
export { getConfigVariantProperties };
|
|
@@ -11,8 +11,8 @@ import { VariantConfig } from "../types/ComponentConfig.js";
|
|
|
11
11
|
* @returns A Record of layer names to their properties, or null if no properties are found
|
|
12
12
|
*/
|
|
13
13
|
declare function getConfigVariantProperties(variant?: VariantConfig): {
|
|
14
|
-
[x: string]: Readonly<Record<string, SelectedConfigurableProperty<"
|
|
15
|
-
root: Readonly<Record<string, SelectedConfigurableProperty<"
|
|
14
|
+
[x: string]: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "opacity" | "fillOpacity" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
|
|
15
|
+
root: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "opacity" | "fillOpacity" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
|
|
16
16
|
} | null; //#endregion
|
|
17
17
|
//#endregion
|
|
18
18
|
export { getConfigVariantProperties };
|
package/dist/components/Link.cjs
CHANGED
|
@@ -85,10 +85,10 @@ const Link = (0, react.forwardRef)(function Input({ variant = "primary", textVar
|
|
|
85
85
|
"data-testid": "start-icon",
|
|
86
86
|
...startIconSlotProps
|
|
87
87
|
}),
|
|
88
|
-
|
|
89
|
-
...slotProps
|
|
88
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
89
|
+
...slotProps?.text,
|
|
90
90
|
children
|
|
91
|
-
})
|
|
91
|
+
}),
|
|
92
92
|
endIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
|
|
93
93
|
className: require_styles_styler.cx(iconEndStyles, endIconClassName),
|
|
94
94
|
icon: endIcon,
|
package/dist/components/Link.js
CHANGED
|
@@ -83,10 +83,10 @@ const Link = forwardRef(function Input({ variant = "primary", textVariant, start
|
|
|
83
83
|
"data-testid": "start-icon",
|
|
84
84
|
...startIconSlotProps
|
|
85
85
|
}),
|
|
86
|
-
|
|
87
|
-
...slotProps
|
|
86
|
+
/* @__PURE__ */ jsx("span", {
|
|
87
|
+
...slotProps?.text,
|
|
88
88
|
children
|
|
89
|
-
})
|
|
89
|
+
}),
|
|
90
90
|
endIcon && /* @__PURE__ */ jsx(IconSlot, {
|
|
91
91
|
className: cx(iconEndStyles, endIconClassName),
|
|
92
92
|
icon: endIcon,
|
|
@@ -19,7 +19,7 @@ const useBottomSheetStore = ({ animated = true, defaultOpen = false, open: openP
|
|
|
19
19
|
open: openProp,
|
|
20
20
|
defaultOpen
|
|
21
21
|
});
|
|
22
|
-
const isOpen = (0, _ariakit_react.useStoreState)(bottomSheetInternal,
|
|
22
|
+
const isOpen = (0, _ariakit_react.useStoreState)(bottomSheetInternal, "open");
|
|
23
23
|
return {
|
|
24
24
|
open: bottomSheetInternal.show,
|
|
25
25
|
close: bottomSheetInternal.hide,
|
|
@@ -17,7 +17,7 @@ const useBottomSheetStore = ({ animated = true, defaultOpen = false, open: openP
|
|
|
17
17
|
open: openProp,
|
|
18
18
|
defaultOpen
|
|
19
19
|
});
|
|
20
|
-
const isOpen = useStoreState(bottomSheetInternal,
|
|
20
|
+
const isOpen = useStoreState(bottomSheetInternal, "open");
|
|
21
21
|
return {
|
|
22
22
|
open: bottomSheetInternal.show,
|
|
23
23
|
close: bottomSheetInternal.hide,
|
|
@@ -20,6 +20,7 @@ function setNativeInputValue(input, next) {
|
|
|
20
20
|
(Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set)?.call(input, next);
|
|
21
21
|
input.dispatchEvent(new Event("input", { bubbles: true }));
|
|
22
22
|
}
|
|
23
|
+
const MIN_WIDTH_DEFAULT = 200;
|
|
23
24
|
const HelpTextContent = (0, react.memo)(function HelpTextContentOriginal({ helpText, helperTextIcon, spacingStart, spacingTop, size, isFilled, helperTextSlotProps, ...rest }) {
|
|
24
25
|
if (!helpText) return null;
|
|
25
26
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
|
|
@@ -87,7 +88,7 @@ const EndIcon = (0, react.memo)(function EndIcon({ icon, className, iconProps })
|
|
|
87
88
|
*
|
|
88
89
|
* @related [Checkbox](https://uds.build/docs/components/checkbox), [Radio](https://uds.build/docs/components/radio).
|
|
89
90
|
**/
|
|
90
|
-
const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, width: containerWidth = "full", defaultValue, value: valueProp, required, readOnly, disabled, reduceMotion: forceReduceMotion, onChange, onBlur, onFocus, formatOnBlur, parseOnFocus, slotProps, style, className, ...otherProps }, forwardedRef) {
|
|
91
|
+
const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, width: containerWidth = "full", minWidth = MIN_WIDTH_DEFAULT, defaultValue, value: valueProp, required, readOnly, disabled, reduceMotion: forceReduceMotion, onChange, onBlur, onFocus, formatOnBlur, parseOnFocus, slotProps, style, className, ...otherProps }, forwardedRef) {
|
|
91
92
|
const generatedId = (0, react.useId)();
|
|
92
93
|
const uid = id ?? `uds-input-${generatedId}`;
|
|
93
94
|
const helpTextId = `uds-input-${uid}-help-text`;
|
|
@@ -147,7 +148,7 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
|
|
|
147
148
|
inputSizeInputWrapperDynamic: size,
|
|
148
149
|
inputVariantInputWrapper: "default",
|
|
149
150
|
inputVariantValueInputWrapper: !value ? "empty" : "filled"
|
|
150
|
-
}), "
|
|
151
|
+
}), "uds-ring-shadow", "uds-ring-within", inputWrapperClassName),
|
|
151
152
|
input: require_styles_styler.getStyles({
|
|
152
153
|
inputSizeInput: size,
|
|
153
154
|
inputVariantInput: "default",
|
|
@@ -198,6 +199,7 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
|
|
|
198
199
|
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
|
|
199
200
|
position: "relative",
|
|
200
201
|
alignItems: "center",
|
|
202
|
+
style: { minWidth: `${minWidth}px` },
|
|
201
203
|
...inputWrapperProps,
|
|
202
204
|
className: classNames.inputWrapper,
|
|
203
205
|
children: [
|
|
@@ -17,6 +17,7 @@ function setNativeInputValue(input, next) {
|
|
|
17
17
|
(Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set)?.call(input, next);
|
|
18
18
|
input.dispatchEvent(new Event("input", { bubbles: true }));
|
|
19
19
|
}
|
|
20
|
+
const MIN_WIDTH_DEFAULT = 200;
|
|
20
21
|
const HelpTextContent = memo(function HelpTextContentOriginal({ helpText, helperTextIcon, spacingStart, spacingTop, size, isFilled, helperTextSlotProps, ...rest }) {
|
|
21
22
|
if (!helpText) return null;
|
|
22
23
|
return /* @__PURE__ */ jsx(Box, {
|
|
@@ -84,7 +85,7 @@ const EndIcon = memo(function EndIcon({ icon, className, iconProps }) {
|
|
|
84
85
|
*
|
|
85
86
|
* @related [Checkbox](https://uds.build/docs/components/checkbox), [Radio](https://uds.build/docs/components/radio).
|
|
86
87
|
**/
|
|
87
|
-
const Input = forwardRef(function Input({ id, label, type = "text", size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, width: containerWidth = "full", defaultValue, value: valueProp, required, readOnly, disabled, reduceMotion: forceReduceMotion, onChange, onBlur, onFocus, formatOnBlur, parseOnFocus, slotProps, style, className, ...otherProps }, forwardedRef) {
|
|
88
|
+
const Input = forwardRef(function Input({ id, label, type = "text", size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, width: containerWidth = "full", minWidth = MIN_WIDTH_DEFAULT, defaultValue, value: valueProp, required, readOnly, disabled, reduceMotion: forceReduceMotion, onChange, onBlur, onFocus, formatOnBlur, parseOnFocus, slotProps, style, className, ...otherProps }, forwardedRef) {
|
|
88
89
|
const generatedId = useId();
|
|
89
90
|
const uid = id ?? `uds-input-${generatedId}`;
|
|
90
91
|
const helpTextId = `uds-input-${uid}-help-text`;
|
|
@@ -144,7 +145,7 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
|
|
|
144
145
|
inputSizeInputWrapperDynamic: size,
|
|
145
146
|
inputVariantInputWrapper: "default",
|
|
146
147
|
inputVariantValueInputWrapper: !value ? "empty" : "filled"
|
|
147
|
-
}), "
|
|
148
|
+
}), "uds-ring-shadow", "uds-ring-within", inputWrapperClassName),
|
|
148
149
|
input: getStyles({
|
|
149
150
|
inputSizeInput: size,
|
|
150
151
|
inputVariantInput: "default",
|
|
@@ -195,6 +196,7 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
|
|
|
195
196
|
/* @__PURE__ */ jsxs(Box, {
|
|
196
197
|
position: "relative",
|
|
197
198
|
alignItems: "center",
|
|
199
|
+
style: { minWidth: `${minWidth}px` },
|
|
198
200
|
...inputWrapperProps,
|
|
199
201
|
className: classNames.inputWrapper,
|
|
200
202
|
children: [
|
|
@@ -57,7 +57,8 @@ const MenuItemCheckbox = (0, react.forwardRef)(function MenuItemCheckbox({ name,
|
|
|
57
57
|
const itemName = name;
|
|
58
58
|
const hasInitialized = (0, react.useRef)(false);
|
|
59
59
|
const context = (0, _ariakit_react_menu.useMenuContext)();
|
|
60
|
-
const
|
|
60
|
+
const items = (0, _ariakit_react.useStoreState)(context, "items");
|
|
61
|
+
const values = (0, _ariakit_react.useStoreState)(context, "values");
|
|
61
62
|
(0, react.useEffect)(() => {
|
|
62
63
|
if (!hasInitialized.current && defaultChecked !== void 0 && context) {
|
|
63
64
|
context.setValues((prev) => ({
|
|
@@ -73,15 +74,15 @@ const MenuItemCheckbox = (0, react.forwardRef)(function MenuItemCheckbox({ name,
|
|
|
73
74
|
]);
|
|
74
75
|
const isChecked = (0, react.useMemo)(() => {
|
|
75
76
|
if (checked !== void 0) return checked;
|
|
76
|
-
if (
|
|
77
|
-
const item =
|
|
77
|
+
if (items?.length) {
|
|
78
|
+
const item = items.find((item) => item.element?.name === itemName);
|
|
78
79
|
if (item?.element) return item.element.checked;
|
|
79
80
|
}
|
|
80
|
-
const storeValue =
|
|
81
|
+
const storeValue = values?.[itemName];
|
|
81
82
|
return typeof storeValue === "boolean" ? storeValue : defaultChecked ?? false;
|
|
82
83
|
}, [
|
|
83
|
-
|
|
84
|
-
|
|
84
|
+
items,
|
|
85
|
+
values,
|
|
85
86
|
itemName,
|
|
86
87
|
checked,
|
|
87
88
|
defaultChecked
|
|
@@ -55,7 +55,8 @@ const MenuItemCheckbox = forwardRef(function MenuItemCheckbox({ name, endIcon =
|
|
|
55
55
|
const itemName = name;
|
|
56
56
|
const hasInitialized = useRef(false);
|
|
57
57
|
const context = useMenuContext();
|
|
58
|
-
const
|
|
58
|
+
const items = useStoreState(context, "items");
|
|
59
|
+
const values = useStoreState(context, "values");
|
|
59
60
|
useEffect(() => {
|
|
60
61
|
if (!hasInitialized.current && defaultChecked !== void 0 && context) {
|
|
61
62
|
context.setValues((prev) => ({
|
|
@@ -71,15 +72,15 @@ const MenuItemCheckbox = forwardRef(function MenuItemCheckbox({ name, endIcon =
|
|
|
71
72
|
]);
|
|
72
73
|
const isChecked = useMemo(() => {
|
|
73
74
|
if (checked !== void 0) return checked;
|
|
74
|
-
if (
|
|
75
|
-
const item =
|
|
75
|
+
if (items?.length) {
|
|
76
|
+
const item = items.find((item) => item.element?.name === itemName);
|
|
76
77
|
if (item?.element) return item.element.checked;
|
|
77
78
|
}
|
|
78
|
-
const storeValue =
|
|
79
|
+
const storeValue = values?.[itemName];
|
|
79
80
|
return typeof storeValue === "boolean" ? storeValue : defaultChecked ?? false;
|
|
80
81
|
}, [
|
|
81
|
-
|
|
82
|
-
|
|
82
|
+
items,
|
|
83
|
+
values,
|
|
83
84
|
itemName,
|
|
84
85
|
checked,
|
|
85
86
|
defaultChecked
|
|
@@ -17,7 +17,8 @@ let lodash_isFunction_js = require("lodash/isFunction.js");
|
|
|
17
17
|
lodash_isFunction_js = require_runtime.__toESM(lodash_isFunction_js);
|
|
18
18
|
let _ariakit_react = require("@ariakit/react");
|
|
19
19
|
//#region src/components/client/Select/Select.tsx
|
|
20
|
-
const
|
|
20
|
+
const MIN_WIDTH_DEFAULT = 200;
|
|
21
|
+
const SelectRoot = (0, react.forwardRef)(function SelectRoot({ children, label, helpText, helperTextIcon, placeholder, name, size = "md", disabled, required, hasError, readOnly, width = "full", minWidth = MIN_WIDTH_DEFAULT, reduceMotion: forceReduceMotion, startIcon, endIcon, className, style, slotProps }, ref) {
|
|
21
22
|
const value = (0, _ariakit_react.useStoreState)((0, _ariakit_react.useSelectContext)(), "value");
|
|
22
23
|
const hasValue = value != null && value !== "";
|
|
23
24
|
const hasHelpText = Boolean(helpText || helperTextIcon);
|
|
@@ -31,6 +32,7 @@ const SelectRoot = (0, react.forwardRef)(function SelectRoot({ children, label,
|
|
|
31
32
|
required,
|
|
32
33
|
hasError,
|
|
33
34
|
width,
|
|
35
|
+
minWidth,
|
|
34
36
|
reduceMotion: forceReduceMotion,
|
|
35
37
|
uid,
|
|
36
38
|
helpTextId,
|
|
@@ -42,6 +44,7 @@ const SelectRoot = (0, react.forwardRef)(function SelectRoot({ children, label,
|
|
|
42
44
|
required,
|
|
43
45
|
hasError,
|
|
44
46
|
width,
|
|
47
|
+
minWidth,
|
|
45
48
|
forceReduceMotion,
|
|
46
49
|
uid,
|
|
47
50
|
helpTextId
|
|
@@ -119,7 +122,7 @@ SelectRoot.displayName = "SelectRoot";
|
|
|
119
122
|
* </Select>
|
|
120
123
|
* ```
|
|
121
124
|
*/
|
|
122
|
-
const Select = (0, react.forwardRef)(function Select({ children, label, helpText, helperTextIcon, placeholder, name, size, disabled, required, hasError, readOnly, width, reduceMotion, startIcon, endIcon, className, style, slotProps, defaultValue = "", value, setValue: setValueProp, onChange, open: openProp, defaultOpen, setOpen: setOpenProp, ...providerProps }, ref) {
|
|
125
|
+
const Select = (0, react.forwardRef)(function Select({ children, label, helpText, helperTextIcon, placeholder, name, size, disabled, required, hasError, readOnly, width, minWidth, reduceMotion, startIcon, endIcon, className, style, slotProps, defaultValue = "", value, setValue: setValueProp, onChange, open: openProp, defaultOpen, setOpen: setOpenProp, ...providerProps }, ref) {
|
|
123
126
|
const setValue = setValueProp ?? onChange;
|
|
124
127
|
const isOpenControlled = openProp !== void 0;
|
|
125
128
|
const [uncontrolledOpen, setUncontrolledOpen] = (0, react.useState)(defaultOpen ?? false);
|
|
@@ -163,6 +166,7 @@ const Select = (0, react.forwardRef)(function Select({ children, label, helpText
|
|
|
163
166
|
hasError,
|
|
164
167
|
readOnly,
|
|
165
168
|
width,
|
|
169
|
+
minWidth,
|
|
166
170
|
reduceMotion,
|
|
167
171
|
startIcon,
|
|
168
172
|
endIcon,
|
|
@@ -9,7 +9,7 @@ import { SelectProviderProps } from "@ariakit/react";
|
|
|
9
9
|
type DataAttributes = {
|
|
10
10
|
[name: `data-${string}`]: string;
|
|
11
11
|
};
|
|
12
|
-
interface SelectProps extends Pick<UniversalSelectProps, 'label' | 'disabled' | 'required' | 'helpText' | 'helperTextIcon' | 'hasError' | 'size' | 'startIcon' | 'endIcon' | 'reduceMotion' | 'readOnly' | 'width'>, Omit<SelectProviderProps, 'children' | 'setValue'> {
|
|
12
|
+
interface SelectProps extends Pick<UniversalSelectProps, 'label' | 'disabled' | 'required' | 'helpText' | 'helperTextIcon' | 'hasError' | 'size' | 'startIcon' | 'endIcon' | 'reduceMotion' | 'readOnly' | 'width' | 'minWidth'>, Omit<SelectProviderProps, 'children' | 'setValue'> {
|
|
13
13
|
children?: React.ReactNode;
|
|
14
14
|
/** Placeholder text shown when no value is selected. */
|
|
15
15
|
placeholder?: string;
|
|
@@ -10,7 +10,7 @@ import { SelectProviderProps } from "@ariakit/react";
|
|
|
10
10
|
type DataAttributes = {
|
|
11
11
|
[name: `data-${string}`]: string;
|
|
12
12
|
};
|
|
13
|
-
interface SelectProps extends Pick<UniversalSelectProps, 'label' | 'disabled' | 'required' | 'helpText' | 'helperTextIcon' | 'hasError' | 'size' | 'startIcon' | 'endIcon' | 'reduceMotion' | 'readOnly' | 'width'>, Omit<SelectProviderProps, 'children' | 'setValue'> {
|
|
13
|
+
interface SelectProps extends Pick<UniversalSelectProps, 'label' | 'disabled' | 'required' | 'helpText' | 'helperTextIcon' | 'hasError' | 'size' | 'startIcon' | 'endIcon' | 'reduceMotion' | 'readOnly' | 'width' | 'minWidth'>, Omit<SelectProviderProps, 'children' | 'setValue'> {
|
|
14
14
|
children?: React.ReactNode;
|
|
15
15
|
/** Placeholder text shown when no value is selected. */
|
|
16
16
|
placeholder?: string;
|
|
@@ -14,7 +14,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
14
14
|
import { isFunction } from "lodash-es";
|
|
15
15
|
import { SelectProvider, useSelectContext, useStoreState } from "@ariakit/react";
|
|
16
16
|
//#region src/components/client/Select/Select.tsx
|
|
17
|
-
const
|
|
17
|
+
const MIN_WIDTH_DEFAULT = 200;
|
|
18
|
+
const SelectRoot = forwardRef(function SelectRoot({ children, label, helpText, helperTextIcon, placeholder, name, size = "md", disabled, required, hasError, readOnly, width = "full", minWidth = MIN_WIDTH_DEFAULT, reduceMotion: forceReduceMotion, startIcon, endIcon, className, style, slotProps }, ref) {
|
|
18
19
|
const value = useStoreState(useSelectContext(), "value");
|
|
19
20
|
const hasValue = value != null && value !== "";
|
|
20
21
|
const hasHelpText = Boolean(helpText || helperTextIcon);
|
|
@@ -28,6 +29,7 @@ const SelectRoot = forwardRef(function SelectRoot({ children, label, helpText, h
|
|
|
28
29
|
required,
|
|
29
30
|
hasError,
|
|
30
31
|
width,
|
|
32
|
+
minWidth,
|
|
31
33
|
reduceMotion: forceReduceMotion,
|
|
32
34
|
uid,
|
|
33
35
|
helpTextId,
|
|
@@ -39,6 +41,7 @@ const SelectRoot = forwardRef(function SelectRoot({ children, label, helpText, h
|
|
|
39
41
|
required,
|
|
40
42
|
hasError,
|
|
41
43
|
width,
|
|
44
|
+
minWidth,
|
|
42
45
|
forceReduceMotion,
|
|
43
46
|
uid,
|
|
44
47
|
helpTextId
|
|
@@ -116,7 +119,7 @@ SelectRoot.displayName = "SelectRoot";
|
|
|
116
119
|
* </Select>
|
|
117
120
|
* ```
|
|
118
121
|
*/
|
|
119
|
-
const Select = forwardRef(function Select({ children, label, helpText, helperTextIcon, placeholder, name, size, disabled, required, hasError, readOnly, width, reduceMotion, startIcon, endIcon, className, style, slotProps, defaultValue = "", value, setValue: setValueProp, onChange, open: openProp, defaultOpen, setOpen: setOpenProp, ...providerProps }, ref) {
|
|
122
|
+
const Select = forwardRef(function Select({ children, label, helpText, helperTextIcon, placeholder, name, size, disabled, required, hasError, readOnly, width, minWidth, reduceMotion, startIcon, endIcon, className, style, slotProps, defaultValue = "", value, setValue: setValueProp, onChange, open: openProp, defaultOpen, setOpen: setOpenProp, ...providerProps }, ref) {
|
|
120
123
|
const setValue = setValueProp ?? onChange;
|
|
121
124
|
const isOpenControlled = openProp !== void 0;
|
|
122
125
|
const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? false);
|
|
@@ -160,6 +163,7 @@ const Select = forwardRef(function Select({ children, label, helpText, helperTex
|
|
|
160
163
|
hasError,
|
|
161
164
|
readOnly,
|
|
162
165
|
width,
|
|
166
|
+
minWidth,
|
|
163
167
|
reduceMotion,
|
|
164
168
|
startIcon,
|
|
165
169
|
endIcon,
|
|
@@ -34,7 +34,7 @@ const buildSelectItemClasses = ({ disabled, className }) => {
|
|
|
34
34
|
* @componentType Client component
|
|
35
35
|
*/
|
|
36
36
|
const SelectItem = (0, react.forwardRef)(function SelectItem({ children, className, slotProps, disabled, value, startIcon, ...props }, ref) {
|
|
37
|
-
const isSelected = (0, _ariakit_react.useStoreState)((0, _ariakit_react.useSelectContext)(), "value") === value;
|
|
37
|
+
const isSelected = (0, _ariakit_react.useStoreState)((0, _ariakit_react.useSelectContext)(), ["value"], (state) => state?.value === value);
|
|
38
38
|
const { startIconSize, endIconSize } = require_components_client_Select_UDSSelectItemConfigProvider.useSelectItemConfig();
|
|
39
39
|
const { className: rootClassName, ...rootSlotProps } = slotProps?.root ?? {};
|
|
40
40
|
const { className: textClassName, ...textSlotProps } = slotProps?.text ?? {};
|
|
@@ -146,10 +146,10 @@ const SelectItem = (0, react.forwardRef)(function SelectItem({ children, classNa
|
|
|
146
146
|
...textSlotProps,
|
|
147
147
|
children
|
|
148
148
|
})]
|
|
149
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, {
|
|
149
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.SelectItemSelected, { children: (selected) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, {
|
|
150
150
|
initial: false,
|
|
151
151
|
mode: "popLayout",
|
|
152
|
-
children:
|
|
152
|
+
children: selected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
|
|
153
153
|
variants: iconAnimationVariants,
|
|
154
154
|
initial: "hidden",
|
|
155
155
|
animate: "visible",
|
|
@@ -166,7 +166,7 @@ const SelectItem = (0, react.forwardRef)(function SelectItem({ children, classNa
|
|
|
166
166
|
}
|
|
167
167
|
})
|
|
168
168
|
})
|
|
169
|
-
})]
|
|
169
|
+
}) })]
|
|
170
170
|
});
|
|
171
171
|
});
|
|
172
172
|
SelectItem.displayName = "SelectItem";
|
|
@@ -8,7 +8,7 @@ import { useSelectItemConfig } from "./UDSSelectItemConfigProvider.js";
|
|
|
8
8
|
import { Check } from "@yahoo/uds-icons";
|
|
9
9
|
import { forwardRef, useMemo } from "react";
|
|
10
10
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
-
import { SelectItem as SelectItem$1, useSelectContext, useStoreState } from "@ariakit/react";
|
|
11
|
+
import { SelectItem as SelectItem$1, SelectItemSelected, useSelectContext, useStoreState } from "@ariakit/react";
|
|
12
12
|
import { AnimatePresence, m } from "motion/react";
|
|
13
13
|
//#region src/components/client/Select/SelectItem.tsx
|
|
14
14
|
const ITEM_CLASS_NAME = "uds-select-item";
|
|
@@ -32,7 +32,7 @@ const buildSelectItemClasses = ({ disabled, className }) => {
|
|
|
32
32
|
* @componentType Client component
|
|
33
33
|
*/
|
|
34
34
|
const SelectItem = forwardRef(function SelectItem({ children, className, slotProps, disabled, value, startIcon, ...props }, ref) {
|
|
35
|
-
const isSelected = useStoreState(useSelectContext(), "value") === value;
|
|
35
|
+
const isSelected = useStoreState(useSelectContext(), ["value"], (state) => state?.value === value);
|
|
36
36
|
const { startIconSize, endIconSize } = useSelectItemConfig();
|
|
37
37
|
const { className: rootClassName, ...rootSlotProps } = slotProps?.root ?? {};
|
|
38
38
|
const { className: textClassName, ...textSlotProps } = slotProps?.text ?? {};
|
|
@@ -144,10 +144,10 @@ const SelectItem = forwardRef(function SelectItem({ children, className, slotPro
|
|
|
144
144
|
...textSlotProps,
|
|
145
145
|
children
|
|
146
146
|
})]
|
|
147
|
-
}), /* @__PURE__ */ jsx(AnimatePresence, {
|
|
147
|
+
}), /* @__PURE__ */ jsx(SelectItemSelected, { children: (selected) => /* @__PURE__ */ jsx(AnimatePresence, {
|
|
148
148
|
initial: false,
|
|
149
149
|
mode: "popLayout",
|
|
150
|
-
children:
|
|
150
|
+
children: selected && /* @__PURE__ */ jsx(m.span, {
|
|
151
151
|
variants: iconAnimationVariants,
|
|
152
152
|
initial: "hidden",
|
|
153
153
|
animate: "visible",
|
|
@@ -164,7 +164,7 @@ const SelectItem = forwardRef(function SelectItem({ children, className, slotPro
|
|
|
164
164
|
}
|
|
165
165
|
})
|
|
166
166
|
})
|
|
167
|
-
})]
|
|
167
|
+
}) })]
|
|
168
168
|
});
|
|
169
169
|
});
|
|
170
170
|
SelectItem.displayName = "SelectItem";
|
|
@@ -41,7 +41,7 @@ const EndIcon = (0, react.memo)(function EndIcon({ icon, className, iconProps })
|
|
|
41
41
|
});
|
|
42
42
|
EndIcon.displayName = "EndIcon";
|
|
43
43
|
const SelectTrigger = (0, react.forwardRef)(function SelectTrigger({ placeholder, startIcon, endIcon, slotProps, className, disabled: disabledProp, name, onClick: triggerPassthroughOnClick, onPointerDown: triggerPassthroughOnPointerDown, ...triggerPassthroughProps }, ref) {
|
|
44
|
-
const { size, disabled, readOnly, required, hasError, uid, helpTextId, reduceMotion, triggerWrapperRef } = require_components_client_Select_selectContext.useSelectFieldContext();
|
|
44
|
+
const { size, disabled, readOnly, required, hasError, uid, helpTextId, reduceMotion, minWidth, triggerWrapperRef } = require_components_client_Select_selectContext.useSelectFieldContext();
|
|
45
45
|
const select = (0, _ariakit_react.useSelectContext)();
|
|
46
46
|
const value = (0, _ariakit_react.useStoreState)(select, "value");
|
|
47
47
|
const open = (0, _ariakit_react.useStoreState)(select, "open");
|
|
@@ -73,6 +73,7 @@ const SelectTrigger = (0, react.forwardRef)(function SelectTrigger({ placeholder
|
|
|
73
73
|
display: "flex",
|
|
74
74
|
alignItems: "center",
|
|
75
75
|
width: "full",
|
|
76
|
+
style: { minWidth: `${minWidth}px` },
|
|
76
77
|
...triggerWrapperProps,
|
|
77
78
|
className: require_components_client_Select_selectFieldStyles.getSelectTriggerWrapperClassName(size, hasValue, triggerWrapperClassName),
|
|
78
79
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ariakit_react.Select, {
|
|
@@ -39,7 +39,7 @@ const EndIcon = memo(function EndIcon({ icon, className, iconProps }) {
|
|
|
39
39
|
});
|
|
40
40
|
EndIcon.displayName = "EndIcon";
|
|
41
41
|
const SelectTrigger = forwardRef(function SelectTrigger({ placeholder, startIcon, endIcon, slotProps, className, disabled: disabledProp, name, onClick: triggerPassthroughOnClick, onPointerDown: triggerPassthroughOnPointerDown, ...triggerPassthroughProps }, ref) {
|
|
42
|
-
const { size, disabled, readOnly, required, hasError, uid, helpTextId, reduceMotion, triggerWrapperRef } = useSelectFieldContext();
|
|
42
|
+
const { size, disabled, readOnly, required, hasError, uid, helpTextId, reduceMotion, minWidth, triggerWrapperRef } = useSelectFieldContext();
|
|
43
43
|
const select = useSelectContext();
|
|
44
44
|
const value = useStoreState(select, "value");
|
|
45
45
|
const open = useStoreState(select, "open");
|
|
@@ -71,6 +71,7 @@ const SelectTrigger = forwardRef(function SelectTrigger({ placeholder, startIcon
|
|
|
71
71
|
display: "flex",
|
|
72
72
|
alignItems: "center",
|
|
73
73
|
width: "full",
|
|
74
|
+
style: { minWidth: `${minWidth}px` },
|
|
74
75
|
...triggerWrapperProps,
|
|
75
76
|
className: getSelectTriggerWrapperClassName(size, hasValue, triggerWrapperClassName),
|
|
76
77
|
children: /* @__PURE__ */ jsxs(Select, {
|
|
@@ -11,6 +11,7 @@ type SelectFieldContextValue = {
|
|
|
11
11
|
required?: boolean;
|
|
12
12
|
hasError?: boolean;
|
|
13
13
|
width?: UniversalBoxProps['width'];
|
|
14
|
+
minWidth: number;
|
|
14
15
|
reduceMotion?: boolean;
|
|
15
16
|
uid: string;
|
|
16
17
|
helpTextId?: string; /** Outer field wrapper; used to anchor SelectContent width and gutter. */
|
|
@@ -12,6 +12,7 @@ type SelectFieldContextValue = {
|
|
|
12
12
|
required?: boolean;
|
|
13
13
|
hasError?: boolean;
|
|
14
14
|
width?: UniversalBoxProps['width'];
|
|
15
|
+
minWidth: number;
|
|
15
16
|
reduceMotion?: boolean;
|
|
16
17
|
uid: string;
|
|
17
18
|
helpTextId?: string; /** Outer field wrapper; used to anchor SelectContent width and gutter. */
|
|
@@ -32,7 +32,7 @@ function getSelectTriggerWrapperClassName(size, hasValue, className) {
|
|
|
32
32
|
inputSizeInputWrapperDynamic: size,
|
|
33
33
|
inputVariantInputWrapper: "default",
|
|
34
34
|
inputVariantValueInputWrapper: !hasValue ? "empty" : "filled"
|
|
35
|
-
}), "flex", "w-full", "items-center", "
|
|
35
|
+
}), "flex", "w-full", "items-center", "uds-ring-shadow", "uds-ring-within", SELECT_FIELD_TRIGGER_CLASS, className);
|
|
36
36
|
}
|
|
37
37
|
function getSelectTriggerClassName({ size, hasValue, disabled, className }) {
|
|
38
38
|
return require_styles_styler.getStyles({
|
|
@@ -31,7 +31,7 @@ function getSelectTriggerWrapperClassName(size, hasValue, className) {
|
|
|
31
31
|
inputSizeInputWrapperDynamic: size,
|
|
32
32
|
inputVariantInputWrapper: "default",
|
|
33
33
|
inputVariantValueInputWrapper: !hasValue ? "empty" : "filled"
|
|
34
|
-
}), "flex", "w-full", "items-center", "
|
|
34
|
+
}), "flex", "w-full", "items-center", "uds-ring-shadow", "uds-ring-within", SELECT_FIELD_TRIGGER_CLASS, className);
|
|
35
35
|
}
|
|
36
36
|
function getSelectTriggerClassName({ size, hasValue, disabled, className }) {
|
|
37
37
|
return getStyles({
|
|
@@ -10,8 +10,8 @@ declare function getShadowStyles({
|
|
|
10
10
|
}: {
|
|
11
11
|
config: UniversalTokensConfig;
|
|
12
12
|
shadowType: ShadowType;
|
|
13
|
-
}): Record<".uds-inset-shadow-
|
|
14
|
-
readonly [x: string]: "var(--uds-inset-shadow-
|
|
13
|
+
}): Record<".uds-inset-shadow-sm" | ".uds-inset-shadow-md" | ".uds-inset-shadow-lg" | ".uds-inset-shadow-xl" | ".uds-inset-shadow-2xl" | ".uds-inset-shadow-none" | ".uds-inset-shadow-xs" | ".uds-inset-shadow-elevation-0" | ".uds-inset-shadow-elevation-1" | ".uds-inset-shadow-elevation-2" | ".uds-inset-shadow-elevation-3" | ".uds-inset-shadow-elevation-4" | ".uds-inset-shadow-elevation-5" | ".uds-drop-shadow-sm" | ".uds-drop-shadow-md" | ".uds-drop-shadow-lg" | ".uds-drop-shadow-xl" | ".uds-drop-shadow-2xl" | ".uds-drop-shadow-none" | ".uds-drop-shadow-xs" | ".uds-drop-shadow-elevation-0" | ".uds-drop-shadow-elevation-1" | ".uds-drop-shadow-elevation-2" | ".uds-drop-shadow-elevation-3" | ".uds-drop-shadow-elevation-4" | ".uds-drop-shadow-elevation-5", {
|
|
14
|
+
readonly [x: string]: "var(--uds-inset-shadow-sm)" | "var(--uds-inset-shadow-md)" | "var(--uds-inset-shadow-lg)" | "var(--uds-inset-shadow-xl)" | "var(--uds-inset-shadow-2xl)" | "var(--uds-inset-shadow-none)" | "var(--uds-inset-shadow-xs)" | "var(--uds-inset-shadow-elevation-0)" | "var(--uds-inset-shadow-elevation-1)" | "var(--uds-inset-shadow-elevation-2)" | "var(--uds-inset-shadow-elevation-3)" | "var(--uds-inset-shadow-elevation-4)" | "var(--uds-inset-shadow-elevation-5)" | "var(--uds-drop-shadow-sm)" | "var(--uds-drop-shadow-md)" | "var(--uds-drop-shadow-lg)" | "var(--uds-drop-shadow-xl)" | "var(--uds-drop-shadow-2xl)" | "var(--uds-drop-shadow-none)" | "var(--uds-drop-shadow-xs)" | "var(--uds-drop-shadow-elevation-0)" | "var(--uds-drop-shadow-elevation-1)" | "var(--uds-drop-shadow-elevation-2)" | "var(--uds-drop-shadow-elevation-3)" | "var(--uds-drop-shadow-elevation-4)" | "var(--uds-drop-shadow-elevation-5)" | "var(--uds-drop-shadow, 0 0 transparent), var(--uds-inset-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent)";
|
|
15
15
|
readonly boxShadow: "var(--uds-drop-shadow, 0 0 transparent), var(--uds-inset-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent)";
|
|
16
16
|
}>; //#endregion
|
|
17
17
|
//#endregion
|
|
@@ -10,8 +10,8 @@ declare function getShadowStyles({
|
|
|
10
10
|
}: {
|
|
11
11
|
config: UniversalTokensConfig;
|
|
12
12
|
shadowType: ShadowType;
|
|
13
|
-
}): Record<".uds-inset-shadow-
|
|
14
|
-
readonly [x: string]: "var(--uds-inset-shadow-
|
|
13
|
+
}): Record<".uds-inset-shadow-sm" | ".uds-inset-shadow-md" | ".uds-inset-shadow-lg" | ".uds-inset-shadow-xl" | ".uds-inset-shadow-2xl" | ".uds-inset-shadow-none" | ".uds-inset-shadow-xs" | ".uds-inset-shadow-elevation-0" | ".uds-inset-shadow-elevation-1" | ".uds-inset-shadow-elevation-2" | ".uds-inset-shadow-elevation-3" | ".uds-inset-shadow-elevation-4" | ".uds-inset-shadow-elevation-5" | ".uds-drop-shadow-sm" | ".uds-drop-shadow-md" | ".uds-drop-shadow-lg" | ".uds-drop-shadow-xl" | ".uds-drop-shadow-2xl" | ".uds-drop-shadow-none" | ".uds-drop-shadow-xs" | ".uds-drop-shadow-elevation-0" | ".uds-drop-shadow-elevation-1" | ".uds-drop-shadow-elevation-2" | ".uds-drop-shadow-elevation-3" | ".uds-drop-shadow-elevation-4" | ".uds-drop-shadow-elevation-5", {
|
|
14
|
+
readonly [x: string]: "var(--uds-inset-shadow-sm)" | "var(--uds-inset-shadow-md)" | "var(--uds-inset-shadow-lg)" | "var(--uds-inset-shadow-xl)" | "var(--uds-inset-shadow-2xl)" | "var(--uds-inset-shadow-none)" | "var(--uds-inset-shadow-xs)" | "var(--uds-inset-shadow-elevation-0)" | "var(--uds-inset-shadow-elevation-1)" | "var(--uds-inset-shadow-elevation-2)" | "var(--uds-inset-shadow-elevation-3)" | "var(--uds-inset-shadow-elevation-4)" | "var(--uds-inset-shadow-elevation-5)" | "var(--uds-drop-shadow-sm)" | "var(--uds-drop-shadow-md)" | "var(--uds-drop-shadow-lg)" | "var(--uds-drop-shadow-xl)" | "var(--uds-drop-shadow-2xl)" | "var(--uds-drop-shadow-none)" | "var(--uds-drop-shadow-xs)" | "var(--uds-drop-shadow-elevation-0)" | "var(--uds-drop-shadow-elevation-1)" | "var(--uds-drop-shadow-elevation-2)" | "var(--uds-drop-shadow-elevation-3)" | "var(--uds-drop-shadow-elevation-4)" | "var(--uds-drop-shadow-elevation-5)" | "var(--uds-drop-shadow, 0 0 transparent), var(--uds-inset-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent)";
|
|
15
15
|
readonly boxShadow: "var(--uds-drop-shadow, 0 0 transparent), var(--uds-inset-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent)";
|
|
16
16
|
}>; //#endregion
|
|
17
17
|
//#endregion
|
|
@@ -589,6 +589,8 @@ interface UniversalInputProps<IconSlotType = UniversalIconSlot> {
|
|
|
589
589
|
readOnly?: boolean;
|
|
590
590
|
/** The width of the input container. @default 'full' */
|
|
591
591
|
width?: UniversalBoxProps['width'];
|
|
592
|
+
/** Minimum width of the input in pixels. @default 200 */
|
|
593
|
+
minWidth?: number;
|
|
592
594
|
}
|
|
593
595
|
type SelectSize = InputSize;
|
|
594
596
|
interface UniversalSelectProps<IconSlotType = UniversalIconSlot> {
|
|
@@ -616,6 +618,8 @@ interface UniversalSelectProps<IconSlotType = UniversalIconSlot> {
|
|
|
616
618
|
readOnly?: boolean;
|
|
617
619
|
/** The width of the select container. @default 'full' */
|
|
618
620
|
width?: UniversalBoxProps['width'];
|
|
621
|
+
/** Minimum width of the select in pixels. @default 200 */
|
|
622
|
+
minWidth?: number;
|
|
619
623
|
}
|
|
620
624
|
interface SelectOption {
|
|
621
625
|
/** The value submitted in forms and returned by onChange. */
|
|
@@ -589,6 +589,8 @@ interface UniversalInputProps<IconSlotType = UniversalIconSlot> {
|
|
|
589
589
|
readOnly?: boolean;
|
|
590
590
|
/** The width of the input container. @default 'full' */
|
|
591
591
|
width?: UniversalBoxProps['width'];
|
|
592
|
+
/** Minimum width of the input in pixels. @default 200 */
|
|
593
|
+
minWidth?: number;
|
|
592
594
|
}
|
|
593
595
|
type SelectSize = InputSize;
|
|
594
596
|
interface UniversalSelectProps<IconSlotType = UniversalIconSlot> {
|
|
@@ -616,6 +618,8 @@ interface UniversalSelectProps<IconSlotType = UniversalIconSlot> {
|
|
|
616
618
|
readOnly?: boolean;
|
|
617
619
|
/** The width of the select container. @default 'full' */
|
|
618
620
|
width?: UniversalBoxProps['width'];
|
|
621
|
+
/** Minimum width of the select in pixels. @default 200 */
|
|
622
|
+
minWidth?: number;
|
|
619
623
|
}
|
|
620
624
|
interface SelectOption {
|
|
621
625
|
/** The value submitted in forms and returned by onChange. */
|