@swan-io/lake 15.1.2 → 15.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "15.1.2",
+  "version": "15.3.0",
   "engines": {
     "node": ">22.12.0"
   },
@@ -44,8 +44,8 @@
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@types/react-native": "^0.72.8",
-    "react": "^19.2.6",
-    "react-dom": "^19.2.6",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "react-native-web": "^0.21.2",
     "type-fest": "^5.6.0"
   }

package/src/components/Accordion.js

@@ -41,5 +41,5 @@ const styles = StyleSheet.create({
 export const Accordion = ({ children, trigger, style, contentContainerStyle }) => {
     const id = useId();
     const [isOpen, { toggle }] = useDisclosure(false);
-    return (_jsxs(View, { children: [_jsxs(Pressable, { "aria-controls": id, "aria-expanded": isOpen, onPress: toggle, style: [styles.trigger, style], children: [_jsx(Icon, { name: "chevron-right-filled", size: 12, color: colors.gray[500], style: [styles.arrow, isOpen && styles.arrowOpen] }), _jsx(Space, { width: 20 }), typeof trigger === "string" ? (_jsx(LakeText, { variant: "smallMedium", color: colors.gray[900], children: trigger })) : (trigger)] }), _jsx(View, { "aria-labelledby": id, "aria-hidden": !isOpen, role: "region", style: [styles.contentContainer, isOpen && styles.contentContainerDisplayed], children: _jsx(View, { style: styles.contentInner, children: _jsx(View, { style: [styles.content, contentContainerStyle], children: children }) }) })] }));
+    return (_jsxs(View, { children: [_jsxs(Pressable, { "aria-controls": id, role: "button", "aria-expanded": isOpen, onPress: toggle, style: [styles.trigger, style], children: [_jsx(Icon, { name: "chevron-right-filled", size: 12, color: colors.gray[500], style: [styles.arrow, isOpen && styles.arrowOpen] }), _jsx(Space, { width: 20 }), typeof trigger === "string" ? (_jsx(LakeText, { variant: "smallMedium", color: colors.gray[900], children: trigger })) : (trigger)] }), _jsx(View, { "aria-labelledby": id, "aria-hidden": !isOpen, role: "region", style: [styles.contentContainer, isOpen && styles.contentContainerDisplayed], children: _jsx(View, { style: styles.contentInner, children: _jsx(View, { style: [styles.content, contentContainerStyle], children: children }) }) })] }));
 };

package/src/components/Cells.js

@@ -93,7 +93,7 @@ const styles = StyleSheet.create({
         paddingLeft: spacings[8],
     },
 });
-export const Cell = ({ children, align = "left", direction = "row", fadeOn, style, contentContainerStyle, }) => (_jsx(View, { style: [styles.cell, style], children: _jsx(View, { style: [
+export const Cell = ({ children, align = "left", direction = "row", fadeOn, style, contentContainerStyle, }) => (_jsx(View, { role: "cell", style: [styles.cell, style], children: _jsx(View, { style: [
             styles.cellContentContainer,
             directionStyles[direction],
             alignItemsStyles[direction === "row" ? "center" : align],

package/src/components/LakeSlider.d.ts

@@ -1,5 +1,6 @@
 import { ViewProps } from "react-native";
 type Props = {
+    id?: string;
     min: number;
     max: number;
     value: number;
@@ -8,5 +9,5 @@ type Props = {
     style?: ViewProps["style"];
     onChange: (value: number) => void;
 };
-export declare const LakeSlider: ({ min, max, value, step, disabled, style, onChange }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const LakeSlider: ({ id, min, max, value, step, disabled, style, onChange, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/LakeSlider.js

@@ -8,7 +8,7 @@ const styles = StyleSheet.create({
         zIndex: 1,
     },
 });
-export const LakeSlider = ({ min, max, value, step, disabled = false, style, onChange }) => (_jsx(View, { style: [styles.container, style], children: _jsx("input", { type: "range", min: min, max: max, value: value, step: step, disabled: disabled, onChange: useCallback((event) => onChange(Number(event.target.value)), [onChange]), style: {
+export const LakeSlider = ({ id, min, max, value, step, disabled = false, style, onChange, }) => (_jsx(View, { style: [styles.container, style], children: _jsx("input", { id: id, type: "range", min: min, max: max, value: value, step: step, disabled: disabled, onChange: useCallback((event) => onChange(Number(event.target.value)), [onChange]), style: {
             backgroundSize: `${((value - min) / (max - min)) * 100}% 100%`,
             ...(disabled ? commonStyles.disabled : {}),
         } }) }));

package/src/components/MultiSelect.js

@@ -197,7 +197,7 @@ export const MultiSelect = ({ color = "gray", disabled = false, emptyResultText,
     }, [filteredItems]);
     const ListHeaderComponent = useMemo(() => (_jsxs(Box, { direction: "row", alignItems: "center", style: styles.filterContainer, children: [_jsx(TextInput, { autoComplete: "off", inputMode: "search", multiline: false, rows: 1, onChangeText: filterValue => setFilter(filterValue), placeholder: filterPlaceholder, value: filter, onFocus: setFilterFocused.on, onBlur: setFilterFocused.off, style: [styles.filterInput, filterFocused && styles.filterFocused] }), _jsx(Icon, { name: "search-filled", color: colors[color].primary, size: 20, style: styles.searchIcon })] })), [filter, filterFocused, setFilterFocused, filterPlaceholder, color]);
     const ListEmptyComponent = useMemo(() => (_jsxs(Box, { justifyContent: "center", alignItems: "center", style: styles.emptyList, children: [_jsx(Icon, { name: "clipboard-search-regular", size: 24, color: colors.gray.primary }), isNotNullishOrEmpty(emptyResultText) && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 8 }), _jsx(Text, { style: styles.emptyListText, children: emptyResultText })] }))] })), [emptyResultText]);
-    return (_jsxs(View, { style: style, children: [_jsxs(Pressable, { id: id, ref: inputRef, "aria-haspopup": "listbox", "aria-expanded": visible, disabled: disabled, onPress: open, style: ({ hovered, focused }) => [
+    return (_jsxs(View, { style: style, children: [_jsxs(Pressable, { id: id, ref: inputRef, role: "button", "aria-haspopup": "listbox", "aria-expanded": visible, disabled: disabled, onPress: open, style: ({ hovered, focused }) => [
                     styles.base,
                     hovered && styles.hovered,
                     (focused || visible) && styles.focused,

package/src/components/PlainListView.js

@@ -98,7 +98,7 @@ const Row = ({ id, item, index, rowHeight, columns, extraInfo, isActive, isHover
         onHoverStart: () => onMouseEnter(id),
         onHoverEnd: () => onMouseLeave(),
     });
-    return (_jsx(View, { ref: containerRef, style: [
+    return (_jsx(View, { ref: containerRef, role: "row", style: [
             styles.segment,
             large && styles.segmentLarge,
             styles.row,
@@ -172,10 +172,10 @@ export const PlainListView = ({ data: originalData, keyExtractor, rowHeight, gro
                 minHeight: totalHeight + (isLoading ? loading.count * rowHeight : 0),
             },
         ] })), [isLoading, loading === null || loading === void 0 ? void 0 : loading.count, rowHeight, totalHeight, withoutScroll]);
-    return (_jsx(ResponsiveContainer, { style: withoutScroll ? (isEmpty ? commonStyles.fill : undefined) : styles.root, breakpoint: breakpoint, children: ({ large }) => {
+    return (_jsx(ResponsiveContainer, { role: "table", style: withoutScroll ? (isEmpty ? commonStyles.fill : undefined) : styles.root, breakpoint: breakpoint, children: ({ large }) => {
             const displayColumns = large ? columns : smallColumns;
             return (_jsx(_Fragment, { children: cloneElement(listWrapper, {
-                    children: (_jsxs(_Fragment, { children: [!isEmpty && large ? (_jsx(View, { style: [
+                    children: (_jsxs(_Fragment, { children: [!isEmpty && large ? (_jsx(View, { role: "row", style: [
                                     styles.segment,
                                     styles.segmentLarge,
                                     styles.header,
@@ -200,7 +200,7 @@ export const PlainListView = ({ data: originalData, keyExtractor, rowHeight, gro
                                                         paddingTop: groupHeaderHeight / 4,
                                                         top: stickyOffset + (large ? headerHeight : 0),
                                                     },
-                                                ], children: _jsx(LakeHeading, { level: 3, variant: "h3", children: groupName }) })) : null, items.map((item, index) => {
+                                                ], children: _jsx(LakeHeading, { level: "none", variant: "h3", children: groupName }) })) : null, items.map((item, index) => {
                                                 const key = keyExtractor(item, index);
                                                 const isActive = activeRowId === key;
                                                 const isHovered = isNotNullish(getRowLink) && hoveredRow === key;

package/src/components/TabView.js

@@ -406,7 +406,7 @@ export const TabView = ({ tabs, otherLabel, hideIfSingleItem = true, sticky = fa
     if (tabs.length <= 1 && hideIfSingleItem) {
         return null;
     }
-    return (_jsxs(Box, { alignItems: "center", direction: "row", role: "tablist", ref: containerRef, style: [styles.container, sticky && styles.sticky, { paddingHorizontal: padding }], children: [_jsxs(View, { style: styles.placeholder, "aria-hidden": true, ref: placeholderRef, onLayout: onLayout, children: [tabs.map(tab => {
+    return (_jsxs(Box, { alignItems: "center", direction: "row", role: "navigation", ref: containerRef, style: [styles.container, sticky && styles.sticky, { paddingHorizontal: padding }], children: [_jsxs(View, { style: styles.placeholder, "aria-hidden": true, ref: placeholderRef, onLayout: onLayout, children: [tabs.map(tab => {
                         const { label, icon, count, endElement } = tab;
                         const tabId = getTabId(tab);
                         return (_jsxs(Fragment, { children: [_jsxs(TabViewLink, { ref: ref => {

package/src/components/TilePlaceholder.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { StyleSheet, View } from "react-native";
 import { colors, radii } from "../constants/design";
+import { Space } from "./Space";
 import { Tile, TileGrid } from "./Tile";
 const styles = StyleSheet.create({
     placeholderTitle: {
@@ -42,7 +43,7 @@ const styles = StyleSheet.create({
     },
 });
 export const TilePlaceholder = () => {
-    return (_jsx(Tile, { title: _jsx(View, { style: styles.placeholderTitle }), children: _jsxs(View, { style: styles.content, children: [_jsx(View, { style: styles.placeholderText }), _jsx(View, { style: styles.placeholderText }), _jsx(View, { style: styles.placeholderText }), _jsx(View, { style: styles.placeholderText })] }) }));
+    return (_jsxs(Tile, { children: [_jsx(View, { style: styles.placeholderTitle }), _jsx(Space, { height: 24 }), _jsxs(View, { style: styles.content, children: [_jsx(View, { style: styles.placeholderText }), _jsx(View, { style: styles.placeholderText }), _jsx(View, { style: styles.placeholderText }), _jsx(View, { style: styles.placeholderText })] })] }));
 };
 export const TileGridPlaceholder = ({ numberOfItems = 2, withTabs = true, }) => {
     return (_jsx(View, { style: withTabs && styles.withTabs, children: _jsx(TileGrid, { children: useMemo(() => Array(numberOfItems)

package/src/components/VirtualizedList.js

@@ -393,7 +393,7 @@ export const VirtualizedList = ({ variant, data, stickedToStartColumns, columns,
         }
     }, [onEndReached, data.length]);
     const header = useMemo(() => {
-        return (_jsxs(View, { style: [styles.headerRow, { height: headerHeight }], children: [Option.fromNullable(stickedToStartColumns)
+        return (_jsxs(View, { role: "row", style: [styles.headerRow, { height: headerHeight }], children: [Option.fromNullable(stickedToStartColumns)
                     .map(columns => (_jsx(View, { style: [
                         styles.cellsContainer,
                         styles.stickedToStartColumnGroup,
@@ -481,7 +481,7 @@ export const VirtualizedList = ({ variant, data, stickedToStartColumns, columns,
             .getOr(false)) {
         return (_jsx(ScrollView, { style: styles.container, contentContainerStyle: styles.emptyListContentContainer, children: renderEmptyList() }));
     }
-    return (_jsxs(ScrollView, { ref: scrollViewRef, both: true, style: [styles.container, { marginHorizontal }], onScroll: onScroll, scrollEventThrottle: 32, contentContainerStyle: [
+    return (_jsxs(ScrollView, { ref: scrollViewRef, role: "table", both: true, style: [styles.container, { marginHorizontal }], onScroll: onScroll, scrollEventThrottle: 32, contentContainerStyle: [
             styles.contentContainer,
             {
                 height: containerContainerHeight,
@@ -512,6 +512,7 @@ const RawVirtualizedRow = ({ viewId, rowHeight, absoluteIndex, variant, stickedT
     const rootElement = getRowLink != null ? (((_a = getRowLink({ item, index: absoluteIndex, extraInfo })) !== null && _a !== void 0 ? _a : _jsx(View, {}))) : (_jsx(View, {}));
     return cloneElement(rootElement, {
         ref: elementRef,
+        role: "row",
         style: [
             styles.row,
             {