@vuu-ui/vuu-ui-controls 3.0.0 → 3.1.0-beta.2

package/src/prompt/Prompt.js

@@ -0,0 +1,136 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogActions, DialogContent, DialogHeader } from "@salt-ds/core";
+import clsx from "clsx";
+import { useCallback } from "react";
+import { Icon, IconButton } from "../icon-button/index.js";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import Prompt from "./Prompt.css";
+const classBase = "vuuPrompt";
+const getHeader = (title, icon, headerTag)=>{
+    if (icon && headerTag) return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Icon, {
+                name: icon
+            }),
+            /*#__PURE__*/ jsx("span", {
+                children: title
+            }),
+            headerTag
+        ]
+    });
+    if (icon) return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Icon, {
+                name: icon
+            }),
+            /*#__PURE__*/ jsx("span", {
+                children: title
+            })
+        ]
+    });
+    if (headerTag) return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                children: title
+            }),
+            headerTag
+        ]
+    });
+    return title;
+};
+const Prompt_Prompt = ({ children, className, cancelButtonLabel = "Cancel", cancelButtonProps, confirmButtonLabel = "Confirm", confirmButtonProps, customAction = null, disableDismiss, disableAccent, headerTag, icon, initialFocusedItem, onCancel, onClose, onConfirm, onOpenChange, open, showCancelButton = true, showCloseButton = true, showConfirmButton = true, status, title, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-prompt-next",
+        css: Prompt,
+        window: targetWindow
+    });
+    const close = useCallback(()=>{
+        onClose?.();
+        onOpenChange?.(false);
+    }, [
+        onClose,
+        onOpenChange
+    ]);
+    const callbackRef = useCallback((el)=>{
+        if (el) {
+            let target = null;
+            if ("confirm" === initialFocusedItem && showConfirmButton) target = el.querySelector(".vuuPromptConfirmButton");
+            else if ("cancel" === initialFocusedItem && showCancelButton) target = el.querySelector(".vuuPromptCancelButton");
+            else if ("close" === initialFocusedItem && showCloseButton) target = el.querySelector(".vuuPromptCloseButton");
+            if (target) setTimeout(()=>{
+                target.focus();
+            }, 200);
+        }
+    }, [
+        initialFocusedItem,
+        showCancelButton,
+        showCloseButton,
+        showConfirmButton
+    ]);
+    const handleCancel = useCallback(()=>{
+        onCancel?.();
+        close();
+    }, [
+        close,
+        onCancel
+    ]);
+    const handleConfirm = useCallback(()=>{
+        if (onConfirm?.() !== false) close();
+    }, [
+        close,
+        onConfirm
+    ]);
+    const actions = showCloseButton ? /*#__PURE__*/ jsx(IconButton, {
+        appearance: "transparent",
+        className: "vuuPromptCloseButton",
+        "data-embedded": true,
+        icon: "close",
+        onClick: close
+    }) : null;
+    const header = getHeader(title, icon, headerTag);
+    return /*#__PURE__*/ jsxs(Dialog, {
+        ...htmlAttributes,
+        className: clsx(classBase, className),
+        disableDismiss: disableDismiss,
+        onOpenChange: onOpenChange,
+        open: open,
+        ref: callbackRef,
+        status: status,
+        children: [
+            /*#__PURE__*/ jsx(DialogHeader, {
+                disableAccent: disableAccent,
+                header: header,
+                actions: actions
+            }),
+            /*#__PURE__*/ jsx(DialogContent, {
+                children: children
+            }),
+            /*#__PURE__*/ jsxs(DialogActions, {
+                children: [
+                    customAction,
+                    showCancelButton ? /*#__PURE__*/ jsx(Button, {
+                        appearance: "solid",
+                        className: "vuuPromptCancelButton",
+                        disabled: cancelButtonProps?.disabled,
+                        onClick: handleCancel,
+                        ref: cancelButtonProps?.ref,
+                        sentiment: "neutral",
+                        children: cancelButtonProps?.label ?? cancelButtonLabel
+                    }) : null,
+                    showConfirmButton ? /*#__PURE__*/ jsx(Button, {
+                        appearance: "solid",
+                        className: "vuuPromptConfirmButton",
+                        disabled: confirmButtonProps?.disabled,
+                        sentiment: "accented",
+                        onClick: handleConfirm,
+                        ref: confirmButtonProps?.ref,
+                        children: confirmButtonProps?.label ?? confirmButtonLabel
+                    }) : null
+                ]
+            })
+        ]
+    });
+};
+export { Prompt_Prompt as Prompt };

package/src/sortable-list/SortableList.js

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import { ListBox, Option } from "@salt-ds/core";
+import { DragDropProvider, useSortable } from "@vuu-ui/vuu-utils";
+import { useCallback, useRef } from "react";
+const SortableOption = ({ id, index, value, ...optionProps })=>{
+    const { ref } = useSortable({
+        id,
+        index
+    });
+    return /*#__PURE__*/ jsx(Option, {
+        ...optionProps,
+        id: id,
+        ref: ref,
+        value: value
+    });
+};
+const SortableList = ({ children, onReorderListItems, ...listBoxProps })=>{
+    const listRef = useRef(null);
+    const handleDragEnd = useCallback(()=>{
+        setTimeout(()=>{
+            const listItems = listRef.current?.querySelectorAll(".saltOption");
+            if (listItems) {
+                const items = Array.from(listItems).map(({ id })=>id);
+                onReorderListItems?.(items);
+            }
+        }, 300);
+    }, [
+        onReorderListItems
+    ]);
+    return /*#__PURE__*/ jsx(DragDropProvider, {
+        onDragEnd: handleDragEnd,
+        children: /*#__PURE__*/ jsx(ListBox, {
+            ...listBoxProps,
+            ref: listRef,
+            children: children
+        })
+    });
+};
+export { SortableList, SortableOption };

package/src/split-button/SplitButton.css.js

@@ -0,0 +1,117 @@
+const css = `
+.vuuSplitButton {
+  --saltButton-background: var(--split-background);
+  --saltButton-background-hover: var(--split-background);
+  --vuuPopupMenu-background: var(--split-background);
+  --vuuPopupMenu-iconSize: 20px;
+  --background: var(--vuuSplitButton-background);
+  --foreground: var(--vuuSplitButton-foreground);
+  --background-hover: var(--vuuSplitButton-background-hover);
+  --foreground-hover: var(--vuuSplitButton-foreground-hover);
+  --border-radius: var(--vuuSplitButton-borderRadius, var(--salt-palette-corner-weaker));
+  --main-border-radius: var(--border-radius) 0 0 var(--border-radius);
+  --trigger-border-radius: 0 var(--border-radius) var(--border-radius) 0;
+  --trigger-border-style: solid solid solid none;
+  border-radius: var(--border-radius);
+  border: none;
+  align-items: center;
+  display: flex;
+
+  & .vuuSplitButton-main {
+    border-radius: var(--main-border-radius);
+  }
+
+  & .vuuSplitButton-trigger {
+    border-radius: var(--trigger-border-radius);
+  }
+}
+
+.vuuSplitButton.vuuFocusVisible {
+  & .saltButton {
+    outline-style: none;
+  }
+
+  &.vuuSplitButton-primary {
+    --split-background: var(--background-hover, var(--salt-actionable-bold-background-hover));
+  }
+
+  &.vuuSplitButton-secondary {
+    --split-background: var(--background-hover, var(--salt-actionable-subtle-background-hover));
+  }
+
+  &.vuuSplitButton-cta {
+    --split-background: var(--background-hover, var(--salt-actionable-accented-bold-background-hover));
+
+    & .vuuSplitButton-trigger {
+      --vuu-icon-color: var(--salt-actionable-bold-foreground-hover);
+    }
+  }
+}
+
+.vuuFocusVisible {
+  outline-style: var(--salt-focused-outlineStyle);
+  outline-width: var(--salt-focused-outlineWidth);
+  outline-color: var(--salt-focused-outlineColor);
+  outline-offset: var(--salt-focused-outlineOffset);
+}
+
+.vuuSplitButton-primary {
+  --split-background: var(--background, var(--salt-actionable-bold-background));
+  --split-background-active: var(--salt-actionable-bold-background-active);
+  --split-color-active: var(--salt-actionable-bold-foreground-active);
+}
+
+.vuuSplitButton-primary:hover:not(.vuuSplitButton-disabled) {
+  --vuuButton-borderColor: var(--split-background);
+  --saltButton-borderColor: var(--split-background);
+  --split-background: var(--background-hover, var(--salt-actionable-bold-background-hover));
+
+  & .saltButton {
+    --saltButton-text-color: var(--salt-actionable-bold-foreground-hover);
+  }
+}
+
+.vuuSplitButton-secondary {
+  --saltButton-borderColor: var(--split-background);
+  --split-background: var(--background, var(--salt-actionable-subtle-background));
+  --split-background-active: var(--salt-actionable-subtle-background-active);
+  --split-color-active: var(--salt-actionable-subtle-foreground-active);
+}
+
+.vuuSplitButton-secondary:hover:not(.vuuSplitButton-disabled) {
+  --vuuButton-borderColor: var(--split-background);
+  --split-background: var(--salt-actionable-subtle-background-hover);
+
+  & .saltButton {
+    --saltButton-text-color: var(--salt-actionable-subtle-foreground-hover);
+  }
+}
+
+.vuuSplitButton-cta {
+  --split-background: var(--background, var(--salt-actionable-accented-bold-background));
+  --split-background-active: var(--salt-actionable-accented-bold-background-active);
+  --split-color-active: var(--salt-actionable-bold-foreground-active);
+}
+
+.vuuSplitButton-cta:hover:not(.vuuSplitButton-disabled) {
+  --vuuButton-borderColor: var(--split-background);
+  --split-background: var(--salt-actionable-accented-bold-background-hover);
+  --split-color: var(--salt-actionable-bold-foreground-hover);
+
+  & .saltButton {
+    --saltButton-text-color: var(--salt-actionable-bold-foreground-hover);
+    --vuu-icon-color: var(--salt-actionable-bold-foreground-hover);
+  }
+}
+
+.vuuSplitButton:has(.vuuSplitButton-main:active, .vuuSplitButton-main.saltButton-active) {
+  --split-background: var(--split-background-active);
+
+  & .vuuSplitButton-trigger {
+    --vuu-icon-color: var(--split-color-active);
+  }
+}
+
+
+`;
+export default css;

package/src/split-button/SplitButton.js

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, useForkRef } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { ContextMenuProvider } from "@vuu-ui/vuu-context-menu";
+import { PopupMenu } from "@vuu-ui/vuu-popups";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { useSplitButton } from "./useSplitButton.js";
+import SplitButton_0 from "./SplitButton.css";
+const classBase = "vuuSplitButton";
+const SplitButton_SplitButton = /*#__PURE__*/ forwardRef(function({ ButtonProps: ButtonPropsProp, PopupMenuProps: PopupMenuPropsProp, children, className, disabled = false, onClick, segmented = false, variant = "primary", ...htmlAttributes }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-split-button",
+        css: SplitButton_0,
+        window: targetWindow
+    });
+    const { ButtonProps, buttonRef, rootRef, PopupMenuProps, ...rootProps } = useSplitButton({
+        ButtonProps: ButtonPropsProp,
+        PopupMenuProps: PopupMenuPropsProp,
+        classBase: classBase,
+        onClick,
+        segmented
+    });
+    return /*#__PURE__*/ jsx(ContextMenuProvider, {
+        children: /*#__PURE__*/ jsxs("div", {
+            ...htmlAttributes,
+            ...rootProps,
+            className: clsx(classBase, `${classBase}-${variant}`, className, {
+                [`${classBase}-disabled`]: disabled,
+                [`${classBase}-segmented`]: segmented
+            }),
+            ref: useForkRef(forwardedRef, rootRef),
+            "data-showcase-center": true,
+            tabIndex: -1,
+            children: [
+                /*#__PURE__*/ jsx(Button, {
+                    ...ButtonProps,
+                    appearance: "solid",
+                    className: `${classBase}-main`,
+                    disabled: disabled,
+                    ref: buttonRef,
+                    sentiment: "neutral",
+                    children: children
+                }),
+                /*#__PURE__*/ jsx(PopupMenu, {
+                    ...PopupMenuProps,
+                    appearance: "solid",
+                    className: `${classBase}-trigger`,
+                    disabled: disabled,
+                    icon: PopupMenuProps?.icon ?? "chevron-down",
+                    tabIndex: segmented ? 0 : -1,
+                    sentiment: "neutral"
+                })
+            ]
+        })
+    });
+});
+export { SplitButton_SplitButton as SplitButton };

package/src/split-button/SplitStateButton.css.js

@@ -0,0 +1,66 @@
+const css = `
+.vuuSplitStateButton {
+  --split-state-background: var(--salt-actionable-subtle-background);
+  --split-state-foreground: var(--salt-actionable-subtle-foreground);
+  --vuuSplitButton-background: var(--split-state-background);
+  --vuuSplitButton-foreground: var(--split-state-foreground);
+  --vuuSplitButton-background-hover: var(--split-state-background);
+  --vuuSplitButton-foreground-hover: var(--split-state-foreground);
+
+  & .saltButton-primary:active, & .saltButton-primary.saltButton-active {
+    --saltButton-background-active: var(--salt-actionable-bold-background);
+    --saltButton-text-color-active: var(--salt-actionable-bold-foreground);
+  }
+}
+
+.vuuSplitStateButton[aria-checked="true"] {
+  --vuuButtonIcon-color: var(--salt-actionable-bold-foreground-active);
+  --saltButton-text-color: var(--salt-actionable-bold-foreground-active);
+  --saltButton-text-color-hover: var(--salt-actionable-bold-foreground-active);
+  --split-state-background: var(--salt-actionable-bold-background-active);
+  --split-state-foreground: var(--salt-actionable-bold-foreground-active);
+
+  &.focusVisible {
+    --split-state-background: var(--salt-actionable-bold-background-active);
+  }
+}
+
+.vuuSplitStateButton[aria-checked="true"] {
+  & .vuuEditableLabel-input {
+    color: var(--salt-actionable-bold-foreground-active);
+  }
+}
+
+.vuuSplitButton-main.saltButton-active + .vuuSplitButton-trigger, .vuuSplitButton-main:active + .vuuSplitButton-trigger {
+  --saltButton-background: var(--salt-actionable-bold-background);
+
+  & .vuuIcon {
+    --vuu-icon-color: var(--salt-actionable-bold-foreground);
+  }
+}
+
+.vuuSplitStateButton:has(.vuuEditableLabel-editing):has(.vuuSplitButton-main:active, .vuuSplitButton-main.saltButton-active) {
+  --split-background: var(--salt-actionable-subtle-background);
+
+  & .saltButton-primary:active {
+    background: var(--salt-actionable-subtle-background);
+  }
+}
+
+.vuuSplitStateButton[aria-checked="true"]:has(.vuuEditableLabel-editing):has(.vuuSplitButton-main:active, .vuuSplitButton-main.saltButton-active) {
+  --split-background: var(--salt-actionable-bold-background-active);
+
+  & .saltButton-primary:active {
+    background: var(--salt-actionable-bold-background-active);
+  }
+}
+
+.vuuSplitStateButton:hover:not(.vuuSplitStateButton-disabled) {
+  & .saltButton {
+    border-color: var(--salt-actionable-bold-foreground);
+  }
+}
+
+
+`;
+export default css;

package/src/split-button/SplitStateButton.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { SplitButton } from "./SplitButton.js";
+import clsx from "clsx";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { forwardRef } from "react";
+import SplitStateButton_0 from "./SplitStateButton.css";
+const classBase = "vuuSplitStateButton";
+const SplitStateButton_SplitStateButton = /*#__PURE__*/ forwardRef(function({ className, selected, ...splitButtonProps }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-split-state-button",
+        css: SplitStateButton_0,
+        window: targetWindow
+    });
+    return /*#__PURE__*/ jsx(SplitButton, {
+        ...splitButtonProps,
+        "aria-checked": selected,
+        className: clsx(classBase, className),
+        ref: forwardedRef
+    });
+});
+export { SplitStateButton_SplitStateButton as SplitStateButton };

package/src/split-button/index.js

@@ -0,0 +1,2 @@
+export * from "./SplitButton.js";
+export * from "./SplitStateButton.js";

package/src/split-button/useSplitButton.js

@@ -0,0 +1,61 @@
+import { dispatchMouseEvent } from "@vuu-ui/vuu-utils";
+import { useCallback, useRef } from "react";
+const focusTargetIsEditableLabel = (target)=>{
+    if ("INPUT" === target.tagName) return true;
+    return false;
+};
+const useSplitButton = ({ ButtonProps: ButtonPropsProp, PopupMenuProps, classBase, onClick })=>{
+    const buttonRef = useRef(null);
+    const rootRef = useRef(null);
+    const onMenuClose = useCallback((reason)=>{
+        if (reason?.type !== "tab-away") {
+            const buttonMain = rootRef.current?.querySelector(".vuuSplitButton-main");
+            buttonMain?.focus();
+        }
+    }, []);
+    const menuProps = {
+        ...PopupMenuProps,
+        anchorElement: rootRef,
+        menuClassName: `${classBase}-menu`,
+        onMenuClose,
+        popupPlacement: "below-full-width"
+    };
+    const handleRootFocus = useCallback((evt)=>{
+        const { current: splitButton } = rootRef;
+        if (!splitButton?.classList.contains("vuuFocusVisible")) {
+            splitButton?.classList.add("vuuFocusVisible");
+            if (!focusTargetIsEditableLabel(evt.target)) requestAnimationFrame(()=>{
+                buttonRef.current?.focus();
+            });
+        }
+    }, []);
+    const handleRootBlur = useCallback((evt)=>{
+        const { current: splitButton } = rootRef;
+        const target = evt.relatedTarget;
+        if (!splitButton?.contains(target)) {
+            if (splitButton?.classList.contains("vuuFocusVisible")) splitButton.classList.remove("vuuFocusVisible");
+        }
+    }, []);
+    const handleButtonKeyDown = useCallback((evt)=>{
+        if ("ArrowDown" === evt.key) {
+            const popupTrigger = rootRef.current?.querySelector(`.${classBase}-trigger`);
+            if (popupTrigger) dispatchMouseEvent(popupTrigger, "click");
+        }
+    }, [
+        classBase
+    ]);
+    const ButtonProps = {
+        ...ButtonPropsProp,
+        onClick,
+        onKeyDown: handleButtonKeyDown
+    };
+    return {
+        ButtonProps,
+        PopupMenuProps: menuProps,
+        buttonRef,
+        rootRef,
+        onBlur: handleRootBlur,
+        onFocus: handleRootFocus
+    };
+};
+export { useSplitButton };

package/src/table-search/SearchCell.css.js

@@ -0,0 +1,20 @@
+const css = `
+.vuuSearchCell {
+  --vuu-icon-left: 0;
+  --vuu-icon-size: 16px;
+  --vuu-icon-top: -1px;
+  color: var(--background-cell-color);
+  z-index: -1;
+  align-items: center;
+  padding: 0 8px;
+  display: flex;
+  position: relative;
+
+  & [data-icon] {
+    margin-right: 4px;
+  }
+}
+
+
+`;
+export default css;

package/src/table-search/SearchCell.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { applyHighlighting } from "@vuu-ui/vuu-table";
+import SearchCell from "./SearchCell.css";
+const classBase = "vuuSearchCell";
+const SearchCell_SearchCell = ({ column, dataRow, searchPattern = "" })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-search-cell",
+        css: SearchCell,
+        window: targetWindow
+    });
+    const valueWithHighlighting = applyHighlighting(column.valueFormatter(dataRow[column.name]), searchPattern);
+    return /*#__PURE__*/ jsxs("div", {
+        className: classBase,
+        tabIndex: -1,
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                "data-icon": "draggable"
+            }),
+            valueWithHighlighting
+        ]
+    });
+};
+export { SearchCell_SearchCell as SearchCell };

package/src/table-search/TableSearch.css.js

@@ -0,0 +1,27 @@
+const css = `
+.vuuTableSearch {
+  height: 100%;
+  padding: var(--vuuTableSearch-padding, 12px);
+  flex-direction: column;
+  display: flex;
+}
+
+.vuuTableSearch-inputField {
+  --vuu-icon-size: 16px;
+  flex: 0 0 40px;
+  padding: 0 12px;
+}
+
+.vuuTableSearch-list {
+  --vuuMeasuredContainer-flex: 1 1 1px;
+  background-color: var(--salt-container-primary-background);
+  flex: auto;
+}
+
+.vuuTableSearch .vuuTableCell {
+  padding: 0;
+}
+
+
+`;
+export default css;

package/src/table-search/TableSearch.js

@@ -0,0 +1,81 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Table, useControlledTableNavigation } from "@vuu-ui/vuu-table";
+import { registerComponent } from "@vuu-ui/vuu-utils";
+import { Input } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { useCallback, useMemo } from "react";
+import { SearchCell } from "./SearchCell.js";
+import { useTableSearch } from "./useTableSearch.js";
+import TableSearch from "./TableSearch.css";
+const classBase = "vuuTableSearch";
+const defaultConfig = {
+    rowSeparators: true
+};
+const searchIcon = /*#__PURE__*/ jsx("span", {
+    "data-icon": "search"
+});
+const TableSearch_TableSearch = ({ TableProps: { dataSource: dataSourceProp, ...TableProps }, autoFocus = false, className, placeHolder, searchColumns, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-table-search",
+        css: TableSearch,
+        window: targetWindow
+    });
+    const config = useMemo(()=>({
+            ...defaultConfig,
+            ...TableProps?.config
+        }), [
+        TableProps?.config
+    ]);
+    const { dataSource, onChange, searchState } = useTableSearch({
+        dataSource: dataSourceProp,
+        searchColumns
+    });
+    const { highlightedIndexRef, onHighlight, onKeyDown, tableRef } = useControlledTableNavigation(-1, dataSource?.size ?? 0);
+    const searchCallbackRef = useCallback((el)=>{
+        setTimeout(()=>{
+            el?.querySelector("input")?.focus();
+        }, 100);
+    }, []);
+    return /*#__PURE__*/ jsxs("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, className),
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-inputField`,
+                children: /*#__PURE__*/ jsx(Input, {
+                    inputProps: {
+                        onKeyDown
+                    },
+                    endAdornment: searchIcon,
+                    placeholder: placeHolder,
+                    ref: autoFocus ? searchCallbackRef : null,
+                    value: searchState.searchText,
+                    onChange: onChange
+                })
+            }),
+            dataSource ? /*#__PURE__*/ jsx(Table, {
+                disableFocus: true,
+                id: "instrument-search",
+                rowHeight: 25,
+                highlightedIndex: highlightedIndexRef.current,
+                renderBufferSize: 100,
+                ...TableProps,
+                className: `${classBase}-list`,
+                config: config,
+                dataSource: dataSource,
+                navigationStyle: "row",
+                onHighlight: onHighlight,
+                ref: tableRef,
+                searchPattern: searchState.searchText,
+                showColumnHeaders: false
+            }) : null
+        ]
+    });
+};
+registerComponent("search-cell", SearchCell, "cell-renderer", {
+    serverDataType: "private"
+});
+export { TableSearch_TableSearch as TableSearch };

package/src/table-search/index.js

@@ -0,0 +1 @@
+export * from "./TableSearch.js";