@swan-io/lake 18.0.3 → 18.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "18.0.3",
+  "version": "18.1.0",
   "engines": {
     "node": ">22.12.0"
   },

package/src/components/BottomPanel.js

@@ -106,5 +106,5 @@ export const BottomPanel = ({ visible, onPressClose, children, returnFocus = tru
                                     if (onPressClose != null) {
                                         onPressClose();
                                     }
-                                }, style: styles.trap, children: [_jsx(View, { style: styles.modal, children: children }), onPressClose != null ? (_jsx(Pressable, { onPress: onPressClose, style: styles.pressableOverlay })) : null] }) }) })) : null }) })] }));
+                                }, style: styles.trap, children: [_jsx(View, { style: styles.modal, children: children }), onPressClose != null ? (_jsx(Pressable, { onPress: onPressClose, style: styles.pressableOverlay, tabIndex: -1, "aria-hidden": true })) : null] }) }) })) : null }) })] }));
 };

package/src/components/Breadcrumbs.d.ts

@@ -14,5 +14,8 @@ type Props = {
 };
 export declare const BreadcrumbsRoot: ({ rootLevelCrumbs, children }: Props) => import("react").JSX.Element;
 export declare const useCrumb: (crumb?: Crumb) => void;
-export declare const Breadcrumbs: () => import("react").JSX.Element;
+type BreadcrumbsProps = {
+    ariaLabel?: string;
+};
+export declare const Breadcrumbs: ({ ariaLabel }: BreadcrumbsProps) => import("react").JSX.Element;
 export {};

package/src/components/Breadcrumbs.js

@@ -340,7 +340,7 @@ const arrangeArray = (array) => {
         end: array.slice(-2),
     };
 };
-export const Breadcrumbs = () => {
+export const Breadcrumbs = ({ ariaLabel = "Breadcrumb" }) => {
     const crumbs = useBreadcrumbs();
     const cleanCrumbs = useMemo(() => {
         const hasCrumb = (value) => isNotNullish(value.crumb);
@@ -358,5 +358,5 @@ export const Breadcrumbs = () => {
             isRootCrumb,
         })));
     }, [cleanCrumbs]);
-    return (_jsxs(View, { role: "navigation", style: styles.container, children: [start.map(({ id, crumb, isFirst, isLast, isRootCrumb }) => (_jsx(BreadcrumbsItem, { crumb: crumb, isFirstItem: isFirst, isLastItem: isLast, shouldAnimate: !previousCrumbs.has(id) && !isRootCrumb }, id))), collapsed.length > 0 ? _jsx(BreadcrumbsDropdownItems, { crumbs: collapsed }) : null, end.map(({ id, crumb, isLast, isRootCrumb }) => (_jsx(BreadcrumbsItem, { crumb: crumb, isLastItem: isLast, shouldAnimate: !previousCrumbs.has(id) && !isRootCrumb }, id)))] }));
+    return (_jsxs(View, { role: "navigation", "aria-label": ariaLabel, style: styles.container, children: [start.map(({ id, crumb, isFirst, isLast, isRootCrumb }) => (_jsx(BreadcrumbsItem, { crumb: crumb, isFirstItem: isFirst, isLastItem: isLast, shouldAnimate: !previousCrumbs.has(id) && !isRootCrumb }, id))), collapsed.length > 0 ? _jsx(BreadcrumbsDropdownItems, { crumbs: collapsed }) : null, end.map(({ id, crumb, isLast, isRootCrumb }) => (_jsx(BreadcrumbsItem, { crumb: crumb, isLastItem: isLast, shouldAnimate: !previousCrumbs.has(id) && !isRootCrumb }, id)))] }));
 };

package/src/components/LakeButton.js

@@ -220,7 +220,7 @@ export const LakeButton = memo(({ ref, ariaControls, ariaExpanded, ariaLabel, ch
                             isSmall ? styles.textSmall : styles.text,
                             shouldHideContents && styles.hidden,
                             { color: textColor },
-                        ], children: children })) : (_jsx(Box, { alignItems: "center", direction: "row", justifyContent: "center", style: [vertical && styles.vertical, shouldHideContents && styles.hidden], children: children })), hasIconEnd && (_jsxs(_Fragment, { children: [isNotNullish(children) && _jsx(Space, { height: spaceHeight, width: spaceWidth }), _jsx(Icon, { color: textColor, name: icon, size: iconSize, style: shouldHideContents && styles.hidden })] })), loading && (_jsx(View, { style: styles.loaderContainer, children: _jsx(ActivityIndicator, { color: isPrimary ? colors[color].contrast : colors[color].primary, size: iconSize }) })), isPrimary && _jsx(View, { style: [styles.hiddenView, pressed && styles.pressed] }), match(progressAnimation)
+                        ], children: children })) : (_jsx(Box, { alignItems: "center", direction: "row", justifyContent: "center", style: [vertical && styles.vertical, shouldHideContents && styles.hidden], children: children })), hasIconEnd && (_jsxs(_Fragment, { children: [isNotNullish(children) && _jsx(Space, { height: spaceHeight, width: spaceWidth }), _jsx(Icon, { color: textColor, name: icon, size: iconSize, style: shouldHideContents && styles.hidden })] })), loading && (_jsx(View, { style: styles.loaderContainer, children: _jsx(ActivityIndicator, { "aria-hidden": true, color: isPrimary ? colors[color].contrast : colors[color].primary, size: iconSize }) })), isPrimary && _jsx(View, { style: [styles.hiddenView, pressed && styles.pressed] }), match(progressAnimation)
                         .with(Option.P.Some(P.select()), ({ startTime, now, duration }) => (_jsxs(View, { style: styles.loaderContainer, children: [_jsx(View, { style: [
                                     styles.loaderContainerProgress,
                                     { transform: `scaleX(${((now - startTime) / duration) * 100}%)` },

package/src/components/LakeLabel.d.ts

@@ -12,9 +12,10 @@ type Props = {
     help?: ReactNode;
     render: (id: string) => ReactNode;
     actions?: ReactNode;
+    actionsAlign?: "content" | "labelAndContent";
     readOnly?: boolean;
     style?: StyleProp<ViewStyle>;
     description?: string;
 };
-export declare const LakeLabel: ({ label, optionalLabel, description, extra, readOnly, color, readOnlyColor, type, help, render, actions, style, }: Props) => import("react").JSX.Element;
+export declare const LakeLabel: ({ label, optionalLabel, description, extra, readOnly, color, readOnlyColor, type, help, render, actions, actionsAlign, style, }: Props) => import("react").JSX.Element;
 export {};

package/src/components/LakeLabel.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useId, useRef } from "react";
+import { useCallback, useId } from "react";
 import { StyleSheet, unstable_createElement, View, } from "react-native";
 import { match } from "ts-pattern";
 import { commonStyles } from "../constants/commonStyles";
@@ -21,26 +21,33 @@ const styles = StyleSheet.create({
     optionalLabel: {
         fontStyle: "italic",
     },
+    content: {
+        alignSelf: "stretch",
+        justifyContent: "flex-end",
+    },
+    topActions: {
+        // matches LakeTextInput height, so actions are centered on the input, not on its error line
+        minHeight: 40,
+        justifyContent: "center",
+    },
 });
 const Label = (props) => {
     return unstable_createElement("label", props);
 };
 const defaultLabelType = "formSmall";
-export const LakeLabel = ({ label, optionalLabel, description, extra, readOnly = false, color = "current", readOnlyColor = colors[color].primary, type = defaultLabelType, help, render, actions, style, }) => {
+export const LakeLabel = ({ label, optionalLabel, description, extra, readOnly = false, color = "current", readOnlyColor = colors[color].primary, type = defaultLabelType, help, render, actions, actionsAlign = "labelAndContent", style, }) => {
     const id = useId();
-    const containerRef = useRef(null);
+    const isFormLabel = type === "form" || type === "formSmall" || type === "radioGroup";
     const onClick = useCallback((event) => {
         event.preventDefault();
-        if (containerRef.current != null) {
-            const container = containerRef.current;
-            const target = container.querySelector(`[id="${id}"]`);
-            target === null || target === void 0 ? void 0 : target.focus();
-        }
+        const target = document.getElementById(id);
+        target === null || target === void 0 ? void 0 : target.focus();
     }, [id]);
-    return (_jsxs(Box, { style: [styles.container, style], direction: "row", alignItems: "center", justifyContent: "spaceBetween", children: [_jsxs(View, { style: commonStyles.fill, ref: containerRef, children: [_jsxs(Box, { direction: "row", justifyContent: "spaceBetween", alignItems: "center", children: [_jsxs(Box, { direction: "row", alignItems: "center", shrink: 1, children: [type === "form" || type === "formSmall" || type === "radioGroup" ? (_jsxs(Box, { shrink: 1, children: [_jsxs(Label, { onClick: onClick, htmlFor: id, style: [styles.label, readOnly && { color: readOnlyColor }], children: [label, optionalLabel != null && (_jsx(LakeText, { color: colors.gray[400], style: styles.optionalLabel, children: ` - ${optionalLabel}` }))] }), description != null && (_jsxs(_Fragment, { children: [_jsx(LakeText, { variant: "smallRegular", children: description }), _jsx(Space, { height: 8 })] }))] })) : (_jsxs(LakeText, { variant: "medium", color: readOnlyColor, id: id, children: [label, optionalLabel != null && (_jsx(LakeText, { color: colors.gray[400], style: styles.optionalLabel, children: ` - ${optionalLabel}` }))] })), isNotNullish(extra) && extra()] }), isNotNullish(help) && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 16 }), help] }))] }), _jsx(Space, { height: match(type)
+    const renderActions = () => isNotNullish(actions) && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 16 }), actionsAlign === "content" && isFormLabel ? (_jsx(View, { style: styles.topActions, children: actions })) : (actions)] }));
+    return (_jsxs(Box, { style: [styles.container, style], direction: "row", alignItems: "center", children: [_jsxs(View, { style: commonStyles.fill, children: [_jsxs(Box, { direction: "row", justifyContent: "spaceBetween", alignItems: "center", children: [_jsxs(Box, { direction: "row", alignItems: "center", shrink: 1, children: [isFormLabel ? (_jsxs(Box, { shrink: 1, children: [_jsxs(Label, { onClick: onClick, htmlFor: id, style: [styles.label, readOnly && { color: readOnlyColor }], children: [label, optionalLabel != null && (_jsx(LakeText, { color: colors.gray[400], style: styles.optionalLabel, children: ` - ${optionalLabel}` }))] }), description != null && (_jsxs(_Fragment, { children: [_jsx(LakeText, { variant: "smallRegular", children: description }), _jsx(Space, { height: 8 })] }))] })) : (_jsxs(LakeText, { variant: "medium", color: readOnlyColor, children: [label, optionalLabel != null && (_jsx(LakeText, { color: colors.gray[400], style: styles.optionalLabel, children: ` - ${optionalLabel}` }))] })), isNotNullish(extra) && extra()] }), isNotNullish(help) && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 16 }), help] }))] }), _jsx(Space, { height: match(type)
                             .returnType()
                             .with("formSmall", "viewSmall", () => 4)
                             .with("form", "view", () => 8)
                             .with("radioGroup", () => 12)
-                            .exhaustive() }), _jsx(View, { "aria-labelledby": type === "view" || type === "viewSmall" ? id : undefined, children: render(id) })] }), isNotNullish(actions) && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 16 }), actions] }))] }));
+                            .exhaustive() }), _jsxs(Box, { direction: "row", alignItems: isFormLabel ? "start" : "center", children: [_jsx(View, { style: [commonStyles.fill, styles.content], children: render(id) }), actionsAlign === "content" && renderActions()] })] }), actionsAlign === "labelAndContent" && renderActions()] }));
 };

package/src/components/LakeTextInput.js

@@ -164,11 +164,11 @@ maxCharCount, help, warning = false, info, renderEnd, ...props }) => {
                                     hasError && styles.error,
                                     valid && styles.valid,
                                     stylesFromProps,
-                                ], ref: containerRef, children: [isNotNullish(icon) && (_jsx(Icon, { name: icon, size: 20, color: colors.current.primary, style: styles.icon })), _jsx(TextInput, { "aria-expanded": ariaExpanded, "aria-controls": ariaControls, inputMode: inputMode, ...props, defaultValue: defaultValue, value: isNullish(defaultValue) ? (value !== null && value !== void 0 ? value : "") : value, onFocus: onFocus, onBlur: onBlur, readOnly: !isInteractive, onChange: onChange, multiline: multiline, ref: mergedRef, style: [
+                                ], ref: containerRef, children: [isNotNullish(icon) && (_jsx(Icon, { name: icon, size: 20, color: colors.current.primary, style: styles.icon })), _jsx(TextInput, { "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-busy": validating, inputMode: inputMode, ...props, defaultValue: defaultValue, value: isNullish(defaultValue) ? (value !== null && value !== void 0 ? value : "") : value, onFocus: onFocus, onBlur: onBlur, readOnly: !isInteractive, onChange: onChange, multiline: multiline, ref: mergedRef, style: [
                                             styles.input,
                                             multiline && styles.multilineInput,
                                             readOnly && hasError && styles.readOnlyError,
                                             disabled && styles.disabled,
                                             readOnly && styles.readOnly,
-                                        ] }), isNotNullish(renderEnd) && _jsx(View, { style: styles.endComponents, children: renderEnd() }), validating && (_jsx(ActivityIndicator, { size: "small", style: styles.endIcon, color: colors.current[500] })), !validating && hasError && (_jsx(Icon, { name: "warning-regular", size: 20, color: colors.negative[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), !validating && warning && !hasError && (_jsx(Icon, { name: "warning-regular", size: 20, color: colors.warning[500], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), !validating && info && !hasError && (_jsx(Icon, { name: "info-regular", size: 20, color: colors.shakespear[500], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), !validating && !hasError && valid && (_jsx(Icon, { name: "checkmark-filled", size: 20, color: colors.positive[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] }))] }), isNotNullish(units) && isNotNullish(onUnitChange) ? (_jsx(Box, { children: _jsx(LakeSelect, { value: unit, onValueChange: onUnitChange, items: units.map(value => ({ name: value, value })), disabled: disabled, style: [styles.unit, (disabled || readOnly) && styles.unitDisabled], mode: "borderless", hideErrors: true }) })) : isNotNullish(unit) ? (_jsx(LakeText, { color: colors.gray[900], style: [styles.unit, (disabled || readOnly) && styles.unitDisabled], children: unit })) : null] }), children] }), !hideErrors && (_jsxs(Box, { direction: "row", style: styles.errorContainer, children: [isNotNullish(error) ? (_jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], children: error })) : (_jsx(LakeText, { variant: "smallRegular", color: colors.gray[500], children: help !== null && help !== void 0 ? help : " " })), isNotNullish(info) && (_jsx(LakeText, { variant: "smallRegular", color: colors.shakespear[500], children: info })), isNotNullish(maxCharCount) && (_jsxs(_Fragment, { children: [_jsx(Fill, { minWidth: 4 }), _jsxs(LakeText, { variant: "smallRegular", color: charCount > maxCharCount ? colors.negative[500] : colors.gray[400], style: styles.descriptionLimitation, children: [charCount, " / ", maxCharCount] })] }))] }))] }));
+                                        ] }), isNotNullish(renderEnd) && _jsx(View, { style: styles.endComponents, children: renderEnd() }), validating && (_jsx(ActivityIndicator, { "aria-hidden": true, size: "small", style: styles.endIcon, color: colors.current[500] })), !validating && hasError && (_jsx(Icon, { name: "warning-regular", size: 20, color: colors.negative[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), !validating && warning && !hasError && (_jsx(Icon, { name: "warning-regular", size: 20, color: colors.warning[500], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), !validating && info && !hasError && (_jsx(Icon, { name: "info-regular", size: 20, color: colors.shakespear[500], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), !validating && !hasError && valid && (_jsx(Icon, { name: "checkmark-filled", size: 20, color: colors.positive[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] }))] }), isNotNullish(units) && isNotNullish(onUnitChange) ? (_jsx(Box, { children: _jsx(LakeSelect, { value: unit, onValueChange: onUnitChange, items: units.map(value => ({ name: value, value })), disabled: disabled, style: [styles.unit, (disabled || readOnly) && styles.unitDisabled], mode: "borderless", hideErrors: true }) })) : isNotNullish(unit) ? (_jsx(LakeText, { color: colors.gray[900], style: [styles.unit, (disabled || readOnly) && styles.unitDisabled], children: unit })) : null] }), children] }), !hideErrors && (_jsxs(Box, { direction: "row", style: styles.errorContainer, children: [isNotNullish(error) ? (_jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], children: error })) : (_jsx(LakeText, { variant: "smallRegular", color: colors.gray[500], children: help !== null && help !== void 0 ? help : " " })), isNotNullish(info) && (_jsx(LakeText, { variant: "smallRegular", color: colors.shakespear[500], children: info })), isNotNullish(maxCharCount) && (_jsxs(_Fragment, { children: [_jsx(Fill, { minWidth: 4 }), _jsxs(LakeText, { variant: "smallRegular", color: charCount > maxCharCount ? colors.negative[500] : colors.gray[400], style: styles.descriptionLimitation, children: [charCount, " / ", maxCharCount] })] }))] }))] }));
 };

package/src/components/LoadingView.d.ts

@@ -5,6 +5,7 @@ type Props = {
     color?: string;
     delay?: number;
     style?: StyleProp<ViewStyle>;
+    ariaLabel?: string;
 };
-export declare const LoadingView: ({ ref, color, delay, style, }: Props) => import("react").JSX.Element;
+export declare const LoadingView: ({ ref, color, delay, style, ariaLabel, }: Props) => import("react").JSX.Element;
 export {};

package/src/components/LoadingView.js

@@ -20,4 +20,4 @@ const styles = StyleSheet.create({
     },
 });
 const isDev = process.env.NODE_ENV === "development";
-export const LoadingView = ({ ref, color = colors.gray[400], delay = isDev ? 0 : 1000, style, }) => (_jsx(View, { ref: ref, style: [styles.base, style], children: _jsx(ActivityIndicator, { size: "small", color: color, style: [styles.indicator, delay > 0 && { animationDelay: delay.toString() + "ms" }] }) }));
+export const LoadingView = ({ ref, color = colors.gray[400], delay = isDev ? 0 : 1000, style, ariaLabel, }) => (_jsx(View, { ref: ref, style: [styles.base, style], children: _jsx(ActivityIndicator, { "aria-label": ariaLabel, "aria-hidden": true, size: "small", color: color, style: [styles.indicator, delay > 0 && { animationDelay: delay.toString() + "ms" }] }) }));

package/src/components/Popover.js

@@ -109,7 +109,7 @@ export const Popover = memo(({ children, id, label, placement, verticalPlacement
     if (mode === "BottomPanel") {
         return (_jsx(BottomPanel, { visible: visible, onPressClose: onDismiss, returnFocus: false, children: typeof children === "function" ? children({ mode: "panel" }) : children }));
     }
-    return (_jsxs(Portal, { container: rootElement, children: [visible && underlay ? (_jsx(Pressable, { ref: underlayRef, style: styles.underlay, onPress: onPressUnderlay, "aria-label": "Close" })) : null, _jsx(TransitionView, { style: styles.container, ...animation, children: position.isSome() ? (_jsx(View, { style: position.get().rootStyle, children: _jsx(View, { style: [
+    return (_jsxs(Portal, { container: rootElement, children: [visible && underlay ? (_jsx(Pressable, { ref: underlayRef, style: styles.underlay, onPress: onPressUnderlay, tabIndex: -1, "aria-hidden": true })) : null, _jsx(TransitionView, { style: styles.container, ...animation, children: position.isSome() ? (_jsx(View, { style: position.get().rootStyle, children: _jsx(View, { style: [
                             styles.popoverContainer,
                             position.get().style,
                             {

package/src/components/QuickActions.js

@@ -39,10 +39,10 @@ const styles = StyleSheet.create({
     },
 });
 export const QuickActions = ({ actions }) => {
-    return (_jsx(View, { style: styles.container, children: actions.map((action, index) => { var _a, _b; return (_jsx(LakeTooltip, { content: action.tooltipText, placement: "right", containerStyle: styles.actionContainer, disabled: action.tooltipDisabled === true || isNullishOrEmpty(action.tooltipText), children: _jsxs(Pressable, { onPress: action.onPress, style: [styles.action, action.disabled === true && styles.disabled], disabled: action.isLoading === true || action.disabled === true, children: [_jsx(View, { style: [
+    return (_jsx(View, { style: styles.container, children: actions.map((action, index) => { var _a, _b; return (_jsx(LakeTooltip, { content: action.tooltipText, placement: "right", containerStyle: styles.actionContainer, disabled: action.tooltipDisabled === true || isNullishOrEmpty(action.tooltipText), children: _jsxs(Pressable, { onPress: action.onPress, style: [styles.action, action.disabled === true && styles.disabled], disabled: action.isLoading === true || action.disabled === true, "aria-busy": action.isLoading === true, children: [_jsx(View, { style: [
                             styles.icon,
                             action.backgroundColor != null
                                 ? { backgroundColor: action.backgroundColor, borderColor: action.backgroundColor }
                                 : null,
-                        ], children: action.isLoading === true ? (_jsx(ActivityIndicator, { color: (_a = action.color) !== null && _a !== void 0 ? _a : colors.gray[300], size: 16 })) : (_jsx(Icon, { name: action.icon, size: 16, color: (_b = action.color) !== null && _b !== void 0 ? _b : colors.gray[300] })) }), _jsx(Space, { height: 8 }), _jsx(LakeText, { variant: "smallRegular", align: "center", style: styles.label, children: action.label })] }, index) }, index)); }) }));
+                        ], children: action.isLoading === true ? (_jsx(ActivityIndicator, { "aria-hidden": true, color: (_a = action.color) !== null && _a !== void 0 ? _a : colors.gray[300], size: 16 })) : (_jsx(Icon, { name: action.icon, size: 16, color: (_b = action.color) !== null && _b !== void 0 ? _b : colors.gray[300] })) }), _jsx(Space, { height: 8 }), _jsx(LakeText, { variant: "smallRegular", align: "center", style: styles.label, children: action.label })] }, index) }, index)); }) }));
 };