@yahoo/uds 3.175.10 → 3.175.11
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/client/BottomSheet/BottomSheet.cjs +21 -1
- package/dist/components/client/BottomSheet/BottomSheet.js +21 -1
- package/dist/components/client/BottomSheet/BottomSheetHandle.cjs +17 -7
- package/dist/components/client/BottomSheet/BottomSheetHandle.d.cts +3 -1
- package/dist/components/client/BottomSheet/BottomSheetHandle.d.ts +3 -1
- package/dist/components/client/BottomSheet/BottomSheetHandle.js +17 -7
- package/dist/components/client/Popover/UDSPopoverConfigProvider.d.cts +1 -1
- package/dist/components/client/Popover/UDSPopoverConfigProvider.d.ts +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/uds/generated/componentData.cjs +2739 -2726
- package/dist/uds/generated/componentData.js +2739 -2726
- package/dist/uds/generated/tailwindPurge.cjs +32 -28
- package/dist/uds/generated/tailwindPurge.js +32 -28
- package/generated/componentData.json +3379 -3359
- package/generated/tailwindPurge.ts +3 -3
- package/package.json +1 -1
|
@@ -10,8 +10,8 @@ import { VariantConfig } from "../types/ComponentConfig.cjs";
|
|
|
10
10
|
* @returns A Record of layer names to their properties, or null if no properties are found
|
|
11
11
|
*/
|
|
12
12
|
declare function getConfigVariantProperties(variant?: VariantConfig): {
|
|
13
|
-
[x: string]: Readonly<Record<string, SelectedConfigurableProperty<"
|
|
14
|
-
root: Readonly<Record<string, SelectedConfigurableProperty<"
|
|
13
|
+
[x: string]: Readonly<Record<string, SelectedConfigurableProperty<"color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "opacity" | "fillOpacity" | "fontWeight" | "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[])[]>>>;
|
|
14
|
+
root: Readonly<Record<string, SelectedConfigurableProperty<"color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "opacity" | "fillOpacity" | "fontWeight" | "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
15
|
} | null;
|
|
16
16
|
//#endregion
|
|
17
17
|
export { getConfigVariantProperties };
|
|
@@ -10,8 +10,8 @@ import { VariantConfig } from "../types/ComponentConfig.js";
|
|
|
10
10
|
* @returns A Record of layer names to their properties, or null if no properties are found
|
|
11
11
|
*/
|
|
12
12
|
declare function getConfigVariantProperties(variant?: VariantConfig): {
|
|
13
|
-
[x: string]: Readonly<Record<string, SelectedConfigurableProperty<"
|
|
14
|
-
root: Readonly<Record<string, SelectedConfigurableProperty<"
|
|
13
|
+
[x: string]: Readonly<Record<string, SelectedConfigurableProperty<"color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "opacity" | "fillOpacity" | "fontWeight" | "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[])[]>>>;
|
|
14
|
+
root: Readonly<Record<string, SelectedConfigurableProperty<"color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "opacity" | "fillOpacity" | "fontWeight" | "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
15
|
} | null;
|
|
16
16
|
//#endregion
|
|
17
17
|
export { getConfigVariantProperties };
|
|
@@ -49,6 +49,7 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
|
|
|
49
49
|
const forceZeroMarginsRef = (0, react.useRef)(false);
|
|
50
50
|
forceZeroMarginsRef.current = keyboardHeightPx > 0;
|
|
51
51
|
const sheetRef = (0, react.useRef)(null);
|
|
52
|
+
const handleContainerRef = (0, react.useRef)(null);
|
|
52
53
|
const maxSnapPxRef = (0, react.useRef)(0);
|
|
53
54
|
const sheetHeightRef = (0, react.useRef)(void 0);
|
|
54
55
|
const wasOpenRef = (0, react.useRef)(false);
|
|
@@ -142,6 +143,13 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
|
|
|
142
143
|
const scrollLocked = !isAtMaxSnapPoint;
|
|
143
144
|
const internalContextValue = (0, react.useMemo)(() => ({ scrollLocked }), [scrollLocked]);
|
|
144
145
|
const shouldHideEdgeBordersAtMaxSnap = fullWidthAtMaxSnap && resolvedSnapPoints.length >= 2 && isAtMaxSnapPoint;
|
|
146
|
+
const handleHandleIndicatorClick = (0, react.useCallback)(() => {
|
|
147
|
+
emitSnapPointChange(isAtMaxSnapPoint ? 0 : resolvedSnapPoints.length - 1);
|
|
148
|
+
}, [
|
|
149
|
+
emitSnapPointChange,
|
|
150
|
+
isAtMaxSnapPoint,
|
|
151
|
+
resolvedSnapPoints.length
|
|
152
|
+
]);
|
|
145
153
|
const handleHandleIndicatorKeyDown = (0, react.useCallback)((event) => {
|
|
146
154
|
if (!shouldShowHandleIndicator || resolvedSnapPoints.length <= 1) return;
|
|
147
155
|
if (event.key === "ArrowUp") {
|
|
@@ -201,6 +209,14 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
|
|
|
201
209
|
animateOpacity: true
|
|
202
210
|
}) : false;
|
|
203
211
|
const hideOnInteractOutside = modal && dismissible ? (event) => !require_utils_isFocusEnteringOwnFrame.isFocusEnteringOwnFrame(event, sheetRef.current) : false;
|
|
212
|
+
const autoFocusOnShow = (0, react.useCallback)((element) => {
|
|
213
|
+
const sheet = sheetRef.current;
|
|
214
|
+
if (!sheet || !element || !handleContainerRef.current?.contains(element)) return true;
|
|
215
|
+
if (sheet.ownerDocument.activeElement !== sheet) queueMicrotask(() => {
|
|
216
|
+
if (sheet.isConnected && sheet.ownerDocument.activeElement !== sheet) sheet.focus({ preventScroll: true });
|
|
217
|
+
});
|
|
218
|
+
return false;
|
|
219
|
+
}, []);
|
|
204
220
|
const isElevationBackgroundColor = configBackgroundColor[variant].startsWith("elevation-");
|
|
205
221
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ariakit_react.Dialog, {
|
|
206
222
|
ref: sheetRef,
|
|
@@ -209,6 +225,7 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
|
|
|
209
225
|
unmountOnHide: true,
|
|
210
226
|
hideOnEscape: dismissible ? hideOnEscape : false,
|
|
211
227
|
hideOnInteractOutside,
|
|
228
|
+
autoFocusOnShow,
|
|
212
229
|
onClose,
|
|
213
230
|
"aria-label": ariaLabel,
|
|
214
231
|
"aria-labelledby": ariaLabelledBy,
|
|
@@ -218,7 +235,7 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
|
|
|
218
235
|
portalElement,
|
|
219
236
|
preventBodyScroll: preventBodyScroll ?? (modal ? void 0 : false),
|
|
220
237
|
"data-testid": "bottom-sheet",
|
|
221
|
-
className: require_styles_styler.cx("fixed overflow-hidden inset-x-0 bottom-0 z-50", keyboardHeightPx > 0 ? void 0 : "bottom-0", scrollLocked ? "[will-change:transform] touch-none" : "[will-change:transform]", "[transform:translate3d(0,var(--uds-bottomsheet-hidden-translate),0)]", "data-[enter]:[transform:translate3d(0,var(--uds-bottomsheet-visible-translate),0)]", "transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]", "motion-reduce:transition-none", sheetClassName, rootVariantClass),
|
|
238
|
+
className: require_styles_styler.cx("fixed overflow-hidden inset-x-0 bottom-0 z-50", "outline-none", keyboardHeightPx > 0 ? void 0 : "bottom-0", scrollLocked ? "[will-change:transform] touch-none" : "[will-change:transform]", "[transform:translate3d(0,var(--uds-bottomsheet-hidden-translate),0)]", "data-[enter]:[transform:translate3d(0,var(--uds-bottomsheet-visible-translate),0)]", "transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]", "motion-reduce:transition-none", sheetClassName, rootVariantClass),
|
|
222
239
|
style: {
|
|
223
240
|
height: sheetHeightRef.current,
|
|
224
241
|
maxHeight: maxHeightPx ? `${maxHeightPx}px` : void 0,
|
|
@@ -239,10 +256,13 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
|
|
|
239
256
|
onPointerUp,
|
|
240
257
|
onPointerCancel,
|
|
241
258
|
children: [shouldShowHandleIndicator && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
|
|
259
|
+
ref: handleContainerRef,
|
|
242
260
|
display: "block",
|
|
243
261
|
position: "absolute",
|
|
244
262
|
className: require_styles_styler.cx("inset-x-0 top-[-4px] z-[1] touch-pan-y"),
|
|
245
263
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_BottomSheet_BottomSheetHandle.BottomSheetHandle, {
|
|
264
|
+
interactive: resolvedSnapPoints.length > 1,
|
|
265
|
+
onClick: handleHandleIndicatorClick,
|
|
246
266
|
onKeyDown: handleHandleIndicatorKeyDown,
|
|
247
267
|
ariaLabel: "Resize sheet",
|
|
248
268
|
className: slotProps?.handleIndicator?.className,
|
|
@@ -48,6 +48,7 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
|
|
|
48
48
|
const forceZeroMarginsRef = useRef(false);
|
|
49
49
|
forceZeroMarginsRef.current = keyboardHeightPx > 0;
|
|
50
50
|
const sheetRef = useRef(null);
|
|
51
|
+
const handleContainerRef = useRef(null);
|
|
51
52
|
const maxSnapPxRef = useRef(0);
|
|
52
53
|
const sheetHeightRef = useRef(void 0);
|
|
53
54
|
const wasOpenRef = useRef(false);
|
|
@@ -141,6 +142,13 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
|
|
|
141
142
|
const scrollLocked = !isAtMaxSnapPoint;
|
|
142
143
|
const internalContextValue = useMemo(() => ({ scrollLocked }), [scrollLocked]);
|
|
143
144
|
const shouldHideEdgeBordersAtMaxSnap = fullWidthAtMaxSnap && resolvedSnapPoints.length >= 2 && isAtMaxSnapPoint;
|
|
145
|
+
const handleHandleIndicatorClick = useCallback(() => {
|
|
146
|
+
emitSnapPointChange(isAtMaxSnapPoint ? 0 : resolvedSnapPoints.length - 1);
|
|
147
|
+
}, [
|
|
148
|
+
emitSnapPointChange,
|
|
149
|
+
isAtMaxSnapPoint,
|
|
150
|
+
resolvedSnapPoints.length
|
|
151
|
+
]);
|
|
144
152
|
const handleHandleIndicatorKeyDown = useCallback((event) => {
|
|
145
153
|
if (!shouldShowHandleIndicator || resolvedSnapPoints.length <= 1) return;
|
|
146
154
|
if (event.key === "ArrowUp") {
|
|
@@ -200,6 +208,14 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
|
|
|
200
208
|
animateOpacity: true
|
|
201
209
|
}) : false;
|
|
202
210
|
const hideOnInteractOutside = modal && dismissible ? (event) => !isFocusEnteringOwnFrame(event, sheetRef.current) : false;
|
|
211
|
+
const autoFocusOnShow = useCallback((element) => {
|
|
212
|
+
const sheet = sheetRef.current;
|
|
213
|
+
if (!sheet || !element || !handleContainerRef.current?.contains(element)) return true;
|
|
214
|
+
if (sheet.ownerDocument.activeElement !== sheet) queueMicrotask(() => {
|
|
215
|
+
if (sheet.isConnected && sheet.ownerDocument.activeElement !== sheet) sheet.focus({ preventScroll: true });
|
|
216
|
+
});
|
|
217
|
+
return false;
|
|
218
|
+
}, []);
|
|
203
219
|
const isElevationBackgroundColor = configBackgroundColor[variant].startsWith("elevation-");
|
|
204
220
|
return /* @__PURE__ */ jsxs(Dialog, {
|
|
205
221
|
ref: sheetRef,
|
|
@@ -208,6 +224,7 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
|
|
|
208
224
|
unmountOnHide: true,
|
|
209
225
|
hideOnEscape: dismissible ? hideOnEscape : false,
|
|
210
226
|
hideOnInteractOutside,
|
|
227
|
+
autoFocusOnShow,
|
|
211
228
|
onClose,
|
|
212
229
|
"aria-label": ariaLabel,
|
|
213
230
|
"aria-labelledby": ariaLabelledBy,
|
|
@@ -217,7 +234,7 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
|
|
|
217
234
|
portalElement,
|
|
218
235
|
preventBodyScroll: preventBodyScroll ?? (modal ? void 0 : false),
|
|
219
236
|
"data-testid": "bottom-sheet",
|
|
220
|
-
className: cx("fixed overflow-hidden inset-x-0 bottom-0 z-50", keyboardHeightPx > 0 ? void 0 : "bottom-0", scrollLocked ? "[will-change:transform] touch-none" : "[will-change:transform]", "[transform:translate3d(0,var(--uds-bottomsheet-hidden-translate),0)]", "data-[enter]:[transform:translate3d(0,var(--uds-bottomsheet-visible-translate),0)]", "transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]", "motion-reduce:transition-none", sheetClassName, rootVariantClass),
|
|
237
|
+
className: cx("fixed overflow-hidden inset-x-0 bottom-0 z-50", "outline-none", keyboardHeightPx > 0 ? void 0 : "bottom-0", scrollLocked ? "[will-change:transform] touch-none" : "[will-change:transform]", "[transform:translate3d(0,var(--uds-bottomsheet-hidden-translate),0)]", "data-[enter]:[transform:translate3d(0,var(--uds-bottomsheet-visible-translate),0)]", "transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]", "motion-reduce:transition-none", sheetClassName, rootVariantClass),
|
|
221
238
|
style: {
|
|
222
239
|
height: sheetHeightRef.current,
|
|
223
240
|
maxHeight: maxHeightPx ? `${maxHeightPx}px` : void 0,
|
|
@@ -238,10 +255,13 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
|
|
|
238
255
|
onPointerUp,
|
|
239
256
|
onPointerCancel,
|
|
240
257
|
children: [shouldShowHandleIndicator && /* @__PURE__ */ jsx(Box, {
|
|
258
|
+
ref: handleContainerRef,
|
|
241
259
|
display: "block",
|
|
242
260
|
position: "absolute",
|
|
243
261
|
className: cx("inset-x-0 top-[-4px] z-[1] touch-pan-y"),
|
|
244
262
|
children: /* @__PURE__ */ jsx(BottomSheetHandle, {
|
|
263
|
+
interactive: resolvedSnapPoints.length > 1,
|
|
264
|
+
onClick: handleHandleIndicatorClick,
|
|
245
265
|
onKeyDown: handleHandleIndicatorKeyDown,
|
|
246
266
|
ariaLabel: "Resize sheet",
|
|
247
267
|
className: slotProps?.handleIndicator?.className,
|
|
@@ -2,23 +2,33 @@
|
|
|
2
2
|
"use client";
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
4
4
|
const require_styles_styler = require("../../../styles/styler.cjs");
|
|
5
|
+
const require_components_client_Pressable = require("../Pressable.cjs");
|
|
5
6
|
const require_components_Box = require("../../Box.cjs");
|
|
6
7
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
7
8
|
//#region src/components/client/BottomSheet/BottomSheetHandle.tsx
|
|
8
|
-
function BottomSheetHandle({ className, onKeyDown, ariaLabel, variant = "default" }) {
|
|
9
|
+
function BottomSheetHandle({ className, interactive = true, onClick, onKeyDown, ariaLabel, variant = "default" }) {
|
|
9
10
|
const handleIndicatorVariantClass = require_styles_styler.getStyles({ bottomsheetVariantHandleIndicator: variant });
|
|
11
|
+
const handleClassName = require_styles_styler.cx("relative", "h-5 w-16", "[touch-action:pan-y]");
|
|
12
|
+
const indicatorClassName = require_styles_styler.cx("absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", "h-1 w-8 rounded-full", handleIndicatorVariantClass);
|
|
10
13
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
|
|
11
14
|
display: "flex",
|
|
12
15
|
justifyContent: "center",
|
|
13
16
|
className: require_styles_styler.cx(className),
|
|
14
17
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
|
|
18
|
+
display: "block",
|
|
19
|
+
className: handleClassName,
|
|
20
|
+
children: interactive ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Pressable.Pressable, {
|
|
21
|
+
type: "button",
|
|
20
22
|
display: "block",
|
|
21
|
-
|
|
23
|
+
"aria-label": ariaLabel ?? "Resize sheet",
|
|
24
|
+
onClick,
|
|
25
|
+
onKeyDown,
|
|
26
|
+
className: require_styles_styler.cx(indicatorClassName, "uds-ring outline-none", "before:absolute before:-inset-x-4 before:-inset-y-2 before:content-['']")
|
|
27
|
+
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
|
|
28
|
+
as: "span",
|
|
29
|
+
display: "block",
|
|
30
|
+
"aria-hidden": "true",
|
|
31
|
+
className: indicatorClassName
|
|
22
32
|
})
|
|
23
33
|
})
|
|
24
34
|
});
|
|
@@ -3,11 +3,13 @@ import { BottomSheetVariant } from "../../../types/dist/index.cjs";
|
|
|
3
3
|
//#region src/components/client/BottomSheet/BottomSheetHandle.d.ts
|
|
4
4
|
interface BottomSheetHandleProps {
|
|
5
5
|
className?: string;
|
|
6
|
+
interactive?: boolean;
|
|
7
|
+
onClick?: () => void;
|
|
6
8
|
onKeyDown?: (event: React.KeyboardEvent) => void;
|
|
7
9
|
ariaLabel?: string;
|
|
8
10
|
variant?: BottomSheetVariant;
|
|
9
11
|
}
|
|
10
|
-
declare function BottomSheetHandle({ className, onKeyDown, ariaLabel, variant }: BottomSheetHandleProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
declare function BottomSheetHandle({ className, interactive, onClick, onKeyDown, ariaLabel, variant }: BottomSheetHandleProps): import("react/jsx-runtime").JSX.Element;
|
|
11
13
|
declare namespace BottomSheetHandle {
|
|
12
14
|
var displayName: string;
|
|
13
15
|
}
|
|
@@ -4,11 +4,13 @@ import { BottomSheetVariant } from "../../../types/dist/index.js";
|
|
|
4
4
|
//#region src/components/client/BottomSheet/BottomSheetHandle.d.ts
|
|
5
5
|
interface BottomSheetHandleProps {
|
|
6
6
|
className?: string;
|
|
7
|
+
interactive?: boolean;
|
|
8
|
+
onClick?: () => void;
|
|
7
9
|
onKeyDown?: (event: React.KeyboardEvent) => void;
|
|
8
10
|
ariaLabel?: string;
|
|
9
11
|
variant?: BottomSheetVariant;
|
|
10
12
|
}
|
|
11
|
-
declare function BottomSheetHandle({ className, onKeyDown, ariaLabel, variant }: BottomSheetHandleProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
declare function BottomSheetHandle({ className, interactive, onClick, onKeyDown, ariaLabel, variant }: BottomSheetHandleProps): import("react/jsx-runtime").JSX.Element;
|
|
12
14
|
declare namespace BottomSheetHandle {
|
|
13
15
|
var displayName: string;
|
|
14
16
|
}
|
|
@@ -1,23 +1,33 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
2
|
"use client";
|
|
3
3
|
import { cx, getStyles } from "../../../styles/styler.js";
|
|
4
|
+
import { Pressable } from "../Pressable.js";
|
|
4
5
|
import { Box } from "../../Box.js";
|
|
5
6
|
import { jsx } from "react/jsx-runtime";
|
|
6
7
|
//#region src/components/client/BottomSheet/BottomSheetHandle.tsx
|
|
7
|
-
function BottomSheetHandle({ className, onKeyDown, ariaLabel, variant = "default" }) {
|
|
8
|
+
function BottomSheetHandle({ className, interactive = true, onClick, onKeyDown, ariaLabel, variant = "default" }) {
|
|
8
9
|
const handleIndicatorVariantClass = getStyles({ bottomsheetVariantHandleIndicator: variant });
|
|
10
|
+
const handleClassName = cx("relative", "h-5 w-16", "[touch-action:pan-y]");
|
|
11
|
+
const indicatorClassName = cx("absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", "h-1 w-8 rounded-full", handleIndicatorVariantClass);
|
|
9
12
|
return /* @__PURE__ */ jsx(Box, {
|
|
10
13
|
display: "flex",
|
|
11
14
|
justifyContent: "center",
|
|
12
15
|
className: cx(className),
|
|
13
16
|
children: /* @__PURE__ */ jsx(Box, {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
children: /* @__PURE__ */ jsx(Box, {
|
|
17
|
+
display: "block",
|
|
18
|
+
className: handleClassName,
|
|
19
|
+
children: interactive ? /* @__PURE__ */ jsx(Pressable, {
|
|
20
|
+
type: "button",
|
|
19
21
|
display: "block",
|
|
20
|
-
|
|
22
|
+
"aria-label": ariaLabel ?? "Resize sheet",
|
|
23
|
+
onClick,
|
|
24
|
+
onKeyDown,
|
|
25
|
+
className: cx(indicatorClassName, "uds-ring outline-none", "before:absolute before:-inset-x-4 before:-inset-y-2 before:content-['']")
|
|
26
|
+
}) : /* @__PURE__ */ jsx(Box, {
|
|
27
|
+
as: "span",
|
|
28
|
+
display: "block",
|
|
29
|
+
"aria-hidden": "true",
|
|
30
|
+
className: indicatorClassName
|
|
21
31
|
})
|
|
22
32
|
})
|
|
23
33
|
});
|
|
@@ -24,7 +24,7 @@ declare function usePopoverConfig(sizeProp?: PopoverSize | undefined, variantPro
|
|
|
24
24
|
gap: SpacingAlias;
|
|
25
25
|
dismissButtonSpacing: SpacingAlias;
|
|
26
26
|
dismissIconSize: number;
|
|
27
|
-
ariaKitPlacement: ("
|
|
27
|
+
ariaKitPlacement: ("bottom-start" | "bottom-end" | "top-start" | "top-end" | ("bottom" | "left" | "right" | "top") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
|
|
28
28
|
animationDuration: number;
|
|
29
29
|
};
|
|
30
30
|
//#endregion
|
|
@@ -25,7 +25,7 @@ declare function usePopoverConfig(sizeProp?: PopoverSize | undefined, variantPro
|
|
|
25
25
|
gap: SpacingAlias;
|
|
26
26
|
dismissButtonSpacing: SpacingAlias;
|
|
27
27
|
dismissIconSize: number;
|
|
28
|
-
ariaKitPlacement: ("
|
|
28
|
+
ariaKitPlacement: ("bottom-start" | "bottom-end" | "top-start" | "top-end" | ("bottom" | "left" | "right" | "top") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
|
|
29
29
|
animationDuration: number;
|
|
30
30
|
};
|
|
31
31
|
//#endregion
|
|
@@ -6,8 +6,8 @@ import { UniversalTokensConfig } from "../packages/config/dist/index.cjs";
|
|
|
6
6
|
declare function getShadowStyles({ config, shadowType }: {
|
|
7
7
|
config: UniversalTokensConfig;
|
|
8
8
|
shadowType: ShadowType;
|
|
9
|
-
}): Record<".uds-
|
|
10
|
-
readonly [x: string]: "var(--uds-
|
|
9
|
+
}): Record<".uds-drop-shadow-none" | ".uds-drop-shadow-xs" | ".uds-drop-shadow-sm" | ".uds-drop-shadow-md" | ".uds-drop-shadow-lg" | ".uds-drop-shadow-xl" | ".uds-drop-shadow-2xl" | ".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" | ".uds-inset-shadow-none" | ".uds-inset-shadow-xs" | ".uds-inset-shadow-sm" | ".uds-inset-shadow-md" | ".uds-inset-shadow-lg" | ".uds-inset-shadow-xl" | ".uds-inset-shadow-2xl" | ".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", {
|
|
10
|
+
readonly [x: string]: "var(--uds-drop-shadow-none)" | "var(--uds-drop-shadow-xs)" | "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-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-inset-shadow-none)" | "var(--uds-inset-shadow-xs)" | "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-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, 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)";
|
|
11
11
|
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)";
|
|
12
12
|
}>;
|
|
13
13
|
//#endregion
|
|
@@ -6,8 +6,8 @@ import { UniversalTokensConfig } from "../packages/config/dist/index.js";
|
|
|
6
6
|
declare function getShadowStyles({ config, shadowType }: {
|
|
7
7
|
config: UniversalTokensConfig;
|
|
8
8
|
shadowType: ShadowType;
|
|
9
|
-
}): Record<".uds-
|
|
10
|
-
readonly [x: string]: "var(--uds-
|
|
9
|
+
}): Record<".uds-drop-shadow-none" | ".uds-drop-shadow-xs" | ".uds-drop-shadow-sm" | ".uds-drop-shadow-md" | ".uds-drop-shadow-lg" | ".uds-drop-shadow-xl" | ".uds-drop-shadow-2xl" | ".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" | ".uds-inset-shadow-none" | ".uds-inset-shadow-xs" | ".uds-inset-shadow-sm" | ".uds-inset-shadow-md" | ".uds-inset-shadow-lg" | ".uds-inset-shadow-xl" | ".uds-inset-shadow-2xl" | ".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", {
|
|
10
|
+
readonly [x: string]: "var(--uds-drop-shadow-none)" | "var(--uds-drop-shadow-xs)" | "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-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-inset-shadow-none)" | "var(--uds-inset-shadow-xs)" | "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-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, 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)";
|
|
11
11
|
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)";
|
|
12
12
|
}>;
|
|
13
13
|
//#endregion
|