@vuu-ui/vuu-ui-controls 4.0.0-alpha.20 → 4.0.0-alpha.21

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.0-alpha.20",
+  "version": "4.0.0-alpha.21",
   "description": "VUU UI Controls",
   "main": "./src/index.js",
   "author": "heswell",
@@ -11,20 +11,20 @@
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-table-types": "4.0.0-alpha.20"
+    "@vuu-ui/vuu-data-types": "4.0.0-alpha.21",
+    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.21",
+    "@vuu-ui/vuu-table-types": "4.0.0-alpha.21"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-data-react": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-popups": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-table": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-utils": "4.0.0-alpha.20",
-    "@salt-ds/core": "1.67.0",
-    "@salt-ds/icons": "1.16.0",
-    "@salt-ds/styles": "0.2.1",
-    "@salt-ds/window": "0.1.1",
+    "@vuu-ui/vuu-context-menu": "4.0.0-alpha.21",
+    "@vuu-ui/vuu-data-react": "4.0.0-alpha.21",
+    "@vuu-ui/vuu-popups": "4.0.0-alpha.21",
+    "@vuu-ui/vuu-table": "4.0.0-alpha.21",
+    "@vuu-ui/vuu-utils": "4.0.0-alpha.21",
+    "@salt-ds/core": "1.72.0",
+    "@salt-ds/icons": "1.18.3",
+    "@salt-ds/styles": "0.4.1",
+    "@salt-ds/window": "0.1.2",
     "tabbable": "^6.0.0"
   },
   "peerDependencies": {

package/src/drag-drop/Draggable.css.js

@@ -26,14 +26,14 @@ const css = `
 }
 
 .vuuDraggable-dropIndicator {
-  background-color: var(--salt-palette-accent-background);
+  background-color: var(--salt-sentiment-accent-background);
   width: 100%;
   height: 2px;
 }
 
 .vuuDraggable-dropIndicator:before {
   content: "";
-  background-color: var(--salt-palette-accent-background);
+  background-color: var(--salt-sentiment-accent-background);
   border-radius: 3px;
   width: 6px;
   height: 6px;

package/src/expando-input/ExpandoInput.css.js

@@ -31,7 +31,7 @@ const css = `
 }
 
 .vuuExpandoInput-error {
-  border-color: var(--vuu-color-red-50);
+  border-color: var(--salt-color-red-500);
 }
 
 .vuuExpandoInput .saltInput {

package/src/icon-button/ToggleIconButton.css.js

@@ -37,7 +37,7 @@ const css = `
 .vuuTableGroupCell:hover {
   & .vuuToggleIconButton {
     & .vuuIcon:after {
-      --vuu-icon-color: var(--salt-palette-interact-cta-background-hover);
+      --vuu-icon-color: var(--salt-sentiment-accent-background);
     }
   }
 }

package/src/index.js

@@ -14,6 +14,7 @@ export * from "./measured-container/index.js";
 export * from "./overflow-container/index.js";
 export * from "./price-ticker/index.js";
 export * from "./split-button/index.js";
+export * from "./split-pane/index.js";
 export * from "./table-search/index.js";
 export * from "./tabs-next/index.js";
 export * from "./tabstrip/index.js";

package/src/item-picker/ItemPicker.css.js

@@ -35,7 +35,7 @@ const css = `
     }
 
     & .vuuHighlight {
-      color: var(--vuu-color-blue-40);
+      color: var(--salt-color-blue-400);
       text-decoration: underline;
     }
 

package/src/price-ticker/PriceTicker.css.js

@@ -15,15 +15,15 @@ const css = `
 }
 
 .vuuPriceTicker.up1, .vuuPriceTicker.up2 {
-  --vuu-icon-color: var(--vuu-color-green-50);
-  color: var(--vuu-color-green-50);
+  --vuu-icon-color: var(--salt-color-green-500);
+  color: var(--salt-color-green-500);
   animation-duration: 30s;
 }
 
 .vuuPriceTicker.down1, .vuuPriceTicker.down2 {
   --vuu-icon-transform: rotate(180deg);
-  --vuu-icon-color: var(--vuu-color-red-50);
-  color: var(--vuu-color-red-50);
+  --vuu-icon-color: var(--salt-color-red-500);
+  color: var(--salt-color-red-500);
   animation-duration: 30s;
 }
 

package/src/split-pane/SplitPane.css.js

@@ -0,0 +1,82 @@
+const css = `
+.vuuSplitPane {
+  --vuuSplitPane-align: stretch;
+  --vuuSplitPane-direction: row;
+  --vuuSplitPane-gap: 0;
+  --vuuSplitPane-justify: flex-start;
+  --vuuSplitPane-margin: 0;
+  --vuuSplitPane-padding: 0;
+  --vuuSplitPane-splitterSize: 3px;
+  --vuuSplitPane-splitter-background: var(--salt-separable-secondary-borderColor);
+  --vuuSplitPane-splitter-background-active: var(--salt-separable-primary-borderColor);
+  --vuuSplitPane-splitter-grabZone: 4px;
+  align-items: var(--vuuSplitPane-align);
+  box-sizing: border-box;
+  flex-direction: var(--vuuSplitPane-direction);
+  gap: var(--vuuSplitPane-gap);
+  justify-content: var(--vuuSplitPane-justify);
+  margin: var(--vuuSplitPane-margin);
+  min-width: 0;
+  min-height: 0;
+  padding: var(--vuuSplitPane-padding);
+  flex-wrap: nowrap;
+  display: flex;
+  overflow: hidden;
+}
+
+:where(.vuuSplitPane) > :where(:not(.vuuSplitPane-splitter)) {
+  box-sizing: border-box;
+}
+
+:where(.vuuSplitPane-row) > :where(:not(.vuuSplitPane-splitter)) {
+  min-width: 0;
+}
+
+:where(.vuuSplitPane-column) > :where(:not(.vuuSplitPane-splitter)) {
+  min-height: 0;
+}
+
+.vuuSplitPane-splitter {
+  background-color: var(--vuuSplitPane-splitter-background);
+  flex: 0 0 var(--vuuSplitPane-splitterSize);
+  touch-action: none;
+  z-index: 1;
+  outline: none;
+  position: relative;
+}
+
+.vuuSplitPane-splitter:before {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+
+.vuuSplitPane-row > .vuuSplitPane-splitter {
+  cursor: ew-resize;
+}
+
+.vuuSplitPane-row > .vuuSplitPane-splitter:before {
+  left: calc(-1 * var(--vuuSplitPane-splitter-grabZone));
+  right: calc(-1 * var(--vuuSplitPane-splitter-grabZone));
+}
+
+.vuuSplitPane-column > .vuuSplitPane-splitter {
+  cursor: ns-resize;
+}
+
+.vuuSplitPane-column > .vuuSplitPane-splitter:before {
+  bottom: calc(-1 * var(--vuuSplitPane-splitter-grabZone));
+  top: calc(-1 * var(--vuuSplitPane-splitter-grabZone));
+}
+
+.vuuSplitPane-splitter:hover, .vuuSplitPane-splitter-active {
+  --vuuSplitPane-splitter-background: var(--vuuSplitPane-splitter-background-active);
+}
+
+.vuuSplitPane-splitter:focus-visible {
+  outline: var(--salt-focused-outline);
+}
+
+
+`;
+export default css;

package/src/split-pane/SplitPane.js

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { resolveResponsiveValue, useBreakpoint, useForkRef } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { Children, forwardRef } from "react";
+import { Splitter } from "./Splitter.js";
+import { useSplitPane } from "./useSplitPane.js";
+import SplitPane_0 from "./SplitPane.css";
+const classBase = "vuuSplitPane";
+const parseSpacing = (value)=>"number" == typeof value ? `calc(var(--salt-spacing-100) * ${value})` : value;
+const parseAlignment = (value)=>"start" === value || "end" === value ? `flex-${value}` : value;
+const SplitPane_SplitPane = /*#__PURE__*/ forwardRef(function({ align, children, className, direction = "row", gap = 0, justify, margin = 0, onSplitterMoved, padding = 0, splitterSize, style, ...htmlAttributes }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-split-pane",
+        css: SplitPane_0,
+        window: targetWindow
+    });
+    const { matchedBreakpoints } = useBreakpoint();
+    const flexDirection = resolveResponsiveValue(direction, matchedBreakpoints) ?? "row";
+    const flexGap = resolveResponsiveValue(gap, matchedBreakpoints);
+    const flexMargin = resolveResponsiveValue(margin, matchedBreakpoints);
+    const flexPadding = resolveResponsiveValue(padding, matchedBreakpoints);
+    const panes = Children.toArray(children);
+    if (panes.length > 2) throw Error(`[SplitPane] supports a maximum of two children, ${panes.length} were provided`);
+    const { beginResize, endResize, resize, rootRef, splitterPosition } = useSplitPane({
+        direction: flexDirection,
+        onSplitterMoved,
+        paneCount: panes.length
+    });
+    const splitPaneStyle = {
+        ...style,
+        "--vuuSplitPane-align": parseAlignment(align),
+        "--vuuSplitPane-direction": flexDirection,
+        "--vuuSplitPane-gap": parseSpacing(flexGap),
+        "--vuuSplitPane-justify": parseAlignment(justify),
+        "--vuuSplitPane-margin": parseSpacing(flexMargin),
+        "--vuuSplitPane-padding": parseSpacing(flexPadding),
+        "--vuuSplitPane-splitterSize": void 0 === splitterSize ? void 0 : `${splitterSize}px`
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, `${classBase}-${flexDirection}`, className),
+        ref: useForkRef(rootRef, forwardedRef),
+        style: splitPaneStyle,
+        children: [
+            panes[0],
+            2 === panes.length ? /*#__PURE__*/ jsx(Splitter, {
+                direction: flexDirection,
+                onResize: resize,
+                onResizeEnd: endResize,
+                onResizeStart: beginResize,
+                position: splitterPosition
+            }) : null,
+            panes[1]
+        ]
+    });
+});
+export { SplitPane_SplitPane as SplitPane };

package/src/split-pane/Splitter.js

@@ -0,0 +1,82 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useCallback, useRef, useState } from "react";
+const classBase = "vuuSplitPane-splitter";
+const KEYBOARD_STEP = 1;
+const KEYBOARD_STEP_LARGE = 10;
+const Splitter = ({ className, direction, onResize, onResizeEnd, onResizeStart, position, ...htmlAttributes })=>{
+    const startPosRef = useRef(void 0);
+    const [active, setActive] = useState(false);
+    const isColumn = "column" === direction;
+    const getPointerPos = useCallback((e)=>isColumn ? e.clientY : e.clientX, [
+        isColumn
+    ]);
+    const handlePointerDown = useCallback((e)=>{
+        if (0 === e.button && onResizeStart()) {
+            e.preventDefault();
+            e.currentTarget.focus();
+            e.currentTarget.setPointerCapture(e.pointerId);
+            startPosRef.current = getPointerPos(e);
+            setActive(true);
+        }
+    }, [
+        getPointerPos,
+        onResizeStart
+    ]);
+    const handlePointerMove = useCallback((e)=>{
+        if (void 0 !== startPosRef.current) onResize(getPointerPos(e) - startPosRef.current);
+    }, [
+        getPointerPos,
+        onResize
+    ]);
+    const handlePointerEnd = useCallback(()=>{
+        if (void 0 !== startPosRef.current) {
+            startPosRef.current = void 0;
+            setActive(false);
+            onResizeEnd();
+        }
+    }, [
+        onResizeEnd
+    ]);
+    const handleKeyDown = useCallback((e)=>{
+        const step = e.shiftKey ? KEYBOARD_STEP_LARGE : KEYBOARD_STEP;
+        const [decrementKey, incrementKey] = isColumn ? [
+            "ArrowUp",
+            "ArrowDown"
+        ] : [
+            "ArrowLeft",
+            "ArrowRight"
+        ];
+        const distance = e.key === decrementKey ? -step : e.key === incrementKey ? step : "Home" === e.key ? -1 / 0 : "End" === e.key ? 1 / 0 : void 0;
+        if (void 0 !== distance && onResizeStart()) {
+            e.preventDefault();
+            onResize(distance);
+            onResizeEnd();
+        }
+    }, [
+        isColumn,
+        onResize,
+        onResizeEnd,
+        onResizeStart
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        "aria-label": "Resize",
+        ...htmlAttributes,
+        "aria-orientation": isColumn ? "horizontal" : "vertical",
+        "aria-valuemax": 100,
+        "aria-valuemin": 0,
+        "aria-valuenow": position,
+        className: clsx(classBase, className, {
+            [`${classBase}-active`]: active
+        }),
+        onKeyDown: handleKeyDown,
+        onLostPointerCapture: handlePointerEnd,
+        onPointerCancel: handlePointerEnd,
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerEnd,
+        role: "separator",
+        tabIndex: 0
+    });
+};
+export { Splitter };

package/src/split-pane/index.js

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

package/src/split-pane/useSplitPane.js

@@ -0,0 +1,101 @@
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+const parsePx = (value, defaultValue)=>value.endsWith("px") ? parseFloat(value) : defaultValue;
+const measurePane = (el, dimension)=>{
+    const { [dimension]: size } = el.getBoundingClientRect();
+    const style = getComputedStyle(el);
+    return {
+        size,
+        minSize: parsePx(style.getPropertyValue(`min-${dimension}`), 0),
+        maxSize: parsePx(style.getPropertyValue(`max-${dimension}`), 1 / 0)
+    };
+};
+const getPanes = (root)=>{
+    const pane1 = root?.children[0];
+    const pane2 = root?.children[2];
+    if (pane1 && pane2) return [
+        pane1,
+        pane2
+    ];
+};
+const toPercentage = ([size1, size2])=>{
+    const total = size1 + size2;
+    return 0 === total ? 0 : Math.round(size1 / total * 100);
+};
+const useSplitPane = ({ direction, onSplitterMoved, paneCount })=>{
+    const rootRef = useRef(null);
+    const resizeStateRef = useRef(void 0);
+    const [splitterPosition, setSplitterPosition] = useState(void 0);
+    const dimension = "column" === direction ? "height" : "width";
+    const hasSplitter = 2 === paneCount;
+    useLayoutEffect(()=>{
+        const panes = hasSplitter ? getPanes(rootRef.current) : void 0;
+        if (panes) {
+            const [pane1, pane2] = panes;
+            setSplitterPosition(toPercentage([
+                pane1.getBoundingClientRect()[dimension],
+                pane2.getBoundingClientRect()[dimension]
+            ]));
+        }
+    }, [
+        dimension,
+        hasSplitter
+    ]);
+    const beginResize = useCallback(()=>{
+        const panes = getPanes(rootRef.current);
+        if (panes) {
+            const [pane1, pane2] = panes;
+            const measurements = [
+                measurePane(pane1, dimension),
+                measurePane(pane2, dimension)
+            ];
+            resizeStateRef.current = {
+                panes,
+                measurements,
+                sizes: [
+                    measurements[0].size,
+                    measurements[1].size
+                ]
+            };
+            return true;
+        }
+        return false;
+    }, [
+        dimension
+    ]);
+    const resize = useCallback((distance)=>{
+        const resizeState = resizeStateRef.current;
+        if (resizeState) {
+            const { panes: [pane1, pane2], measurements: [m1, m2] } = resizeState;
+            const total = m1.size + m2.size;
+            const lowerBound = Math.max(m1.minSize, total - m2.maxSize);
+            const upperBound = Math.min(m1.maxSize, total - m2.minSize);
+            const size1 = Math.max(lowerBound, Math.min(upperBound, m1.size + distance));
+            const size2 = total - size1;
+            pane1.style.flexBasis = `${size1}px`;
+            pane2.style.flexBasis = `${size2}px`;
+            resizeState.sizes = [
+                size1,
+                size2
+            ];
+        }
+    }, []);
+    const endResize = useCallback(()=>{
+        const resizeState = resizeStateRef.current;
+        if (resizeState) {
+            resizeStateRef.current = void 0;
+            const { measurements, sizes } = resizeState;
+            setSplitterPosition(toPercentage(sizes));
+            if (sizes[0] !== measurements[0].size || sizes[1] !== measurements[1].size) onSplitterMoved?.(sizes);
+        }
+    }, [
+        onSplitterMoved
+    ]);
+    return {
+        beginResize,
+        endResize,
+        resize,
+        rootRef,
+        splitterPosition
+    };
+};
+export { useSplitPane };

package/src/tabstrip/Tab.css.js

@@ -101,7 +101,7 @@ const css = `
 }
 
 .vuuTab.vuuFocusVisible {
-  background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));
+  background: var(--vuuTab-hover-background, var(--salt-navigable-background-hover));
   outline-color: var(--vuuTab-focusVisible-color, var(--salt-focused-outlineColor));
   outline-offset: -1px;
   outline-width: 1px;
@@ -121,7 +121,7 @@ const css = `
 
 .vuuTabstrip-draggingTab .vuuTab-selected:before {
   --tab-before-content: "";
-  --tab-before-background: var(--salt-navigable-indicator-color-active);
+  --tab-before-background: var(--salt-navigable-accent-indicator-active);
   --tab-before-height: var(--tab-thumb-height);
   --tab-before-inset: var(--tab-activationIndicator-inset);
   --tab-before-width: var(--tab-activationIndicator-thumb-width);
@@ -140,7 +140,7 @@ const css = `
 }
 
 .vuuTab:hover:not(.vuuTab-closeHover, .vuuTab-selected) {
-  background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));
+  background: var(--vuuTab-hover-background, var(--salt-navigable-background-hover));
 }
 
 

package/src/tabstrip/Tabstrip.css.js

@@ -52,7 +52,7 @@ const css = `
 
 .vuuTabstrip-overflowMenu-open {
   --saltButton-background: var(--salt-actionable-subtle-background-active);
-  --saltButton-text-color: var(--salt-actionable-subtle-text-color-active);
+  --saltButton-text-color: var(--salt-actionable-subtle-foreground-active);
 }
 
 .vuuTabstrip-overflowMenu-open .saltButton {
@@ -82,7 +82,7 @@ const css = `
   --tabstrip-display: flex;
   --tabstrip-height: 100%;
   --tabstrip-dragging-display: block;
-  --tabs-tab-background: var(--salt-navigable-primary-background-hover);
+  --tabs-tab-background: var(--salt-navigable-background-hover);
   --tabs-tab-before-content: "";
   --tabs-tab-before-background: var(--salt-navigable-indicator-hover);
   --tabs-tab-before-height: var(--tab-activationIndicator-thumb-height);

package/src/toolbar/Toolbar.css.js

@@ -35,7 +35,7 @@ const css = `
 }
 
 .vuuToolbarItem:focus, .vuuToolbarItem:focus-visible {
-  outline-color: var(--vuuToolbarItem-outlineColor, var(--vuu-color-purple-10));
+  outline-color: var(--vuuToolbarItem-outlineColor, var(--vuu-color-purple));
   outline-offset: 0px;
   outline-width: 1px;
   outline-style: dashed;

package/types/context-panel-provider/ContextPanelProvider.d.ts

@@ -9,6 +9,6 @@ export declare const ContextPanelContext: import("react").Context<ContextPanelPr
 export declare const ContextPanelProvider: ({ children, hideContextPanel: hideContextPanelProp, resolveComponent, showContextPanel: showContextPanelProp, }: Partial<ContextPanelProps> & {
     children: ReactNode;
     resolveComponent?: ResolveContextPanelComponent;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare function useContextPanel(): ShowContextPanel;
 export declare function useHideContextPanel(): (() => void) | undefined;

package/types/drag-drop/DragDropProvider.d.ts

@@ -27,7 +27,7 @@ export type MeasuredTarget = {
     right: number;
     top: number;
 };
-export declare const DragDropProvider: ({ children, dragSources: dragSourcesProp, }: DragDropProviderProps) => import("react").JSX.Element;
+export declare const DragDropProvider: ({ children, dragSources: dragSourcesProp, }: DragDropProviderProps) => import("react/jsx-runtime").JSX.Element;
 export interface DragDropProviderResult {
     isDragSource?: boolean;
     isDropTarget?: boolean;

package/types/hover-overlay/HoverOverlay.d.ts

@@ -5,4 +5,4 @@ export interface HoverOverlayProps extends Pick<OverlayProps, "placement" | "onO
     open?: boolean;
     trigger: ReactNode;
 }
-export declare const HoverOverlay: ({ children, open: openProp, onOpenChange, placement, trigger, }: HoverOverlayProps) => import("react").JSX.Element;
+export declare const HoverOverlay: ({ children, open: openProp, onOpenChange, placement, trigger, }: HoverOverlayProps) => import("react/jsx-runtime").JSX.Element;

package/types/icon-button/Icon.d.ts

@@ -3,4 +3,4 @@ export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
     name: string;
     size?: number;
 }
-export declare const Icon: ({ className, name, size, style: styleProp, ...htmlAttributes }: IconProps) => import("react").JSX.Element;
+export declare const Icon: ({ className, name, size, style: styleProp, ...htmlAttributes }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/types/icon-button/ToggleIconButton.d.ts

@@ -2,4 +2,4 @@ import { IconButtonProps } from "./IconButton";
 export interface ToggleIconButtonProps extends Omit<IconButtonProps, "icon"> {
     isExpanded: boolean;
 }
-export declare const ToggleIconButton: ({ className, isExpanded, size, ...props }: ToggleIconButtonProps) => import("react").JSX.Element;
+export declare const ToggleIconButton: ({ className, isExpanded, size, ...props }: ToggleIconButtonProps) => import("react/jsx-runtime").JSX.Element;

package/types/index.d.ts

@@ -20,6 +20,7 @@ export * from "./price-ticker";
 export { Prompt, type PromptProps } from "./prompt/Prompt";
 export { SortableList, SortableOption } from "./sortable-list/SortableList";
 export * from "./split-button";
+export * from "./split-pane";
 export * from "./table-search";
 export * from "./tabs-next";
 export * from "./tabstrip";

package/types/instrument-picker/SearchCell.d.ts

@@ -1,2 +1,2 @@
 import { TableCellRendererProps } from "@vuu-ui/vuu-table-types";
-export declare const SearchCell: ({ column, dataRow }: TableCellRendererProps) => import("react").JSX.Element;
+export declare const SearchCell: ({ column, dataRow }: TableCellRendererProps) => import("react/jsx-runtime").JSX.Element;

package/types/instrument-picker/TablePicker.d.ts

@@ -8,4 +8,4 @@ export interface TablePickerProps extends Omit<HTMLAttributes<HTMLElement>, "onS
     schema: TableSchema;
     searchColumns?: string[];
 }
-export declare const TablePicker: ({ TableProps, onSelect, rowToString, schema, searchColumns, ...htmlAttributes }: TablePickerProps) => import("react").JSX.Element;
+export declare const TablePicker: ({ TableProps, onSelect, rowToString, schema, searchColumns, ...htmlAttributes }: TablePickerProps) => import("react/jsx-runtime").JSX.Element;

package/types/item-picker/useItemPicker.d.ts

@@ -1,4 +1,4 @@
-import { type ChangeEventHandler, type MouseEventHandler } from "react";
+import { type FormEventHandler, type MouseEventHandler } from "react";
 export type SelectedItemsChangeHandler = (newSelectedItems: readonly ItemDescriptor[]) => void;
 /** This is a public description of an Item that can be displayed in the ItemPicker component, defining all the
  * mandatory and option attributes that can be defined by the client. */
@@ -25,7 +25,7 @@ export declare const useItemPicker: ({ allItems, selectedItems, maxSelections, o
     selectedItemsFiltered: readonly ItemDescriptor[];
     availableItemsFiltered: ItemDescriptor[];
     searchText: string;
-    onChangeSearchInput: ChangeEventHandler;
+    onChangeSearchInput: FormEventHandler;
     onAddItemToSelectedList: MouseEventHandler<HTMLButtonElement>;
     onRemoveItemFromSelectedList: MouseEventHandler<HTMLButtonElement>;
     onReorderSelectedItems: (orderedItemNames: string[]) => void;

package/types/price-ticker/PriceTicker.d.ts

@@ -4,4 +4,4 @@ export interface PriceTickerProps extends HTMLAttributes<HTMLDivElement> {
     price?: number;
     showArrow?: boolean;
 }
-export declare const PriceTicker: import("react").MemoExoticComponent<({ className, decimals, price, showArrow, ...htmlAttributes }: PriceTickerProps) => import("react").JSX.Element>;
+export declare const PriceTicker: import("react").MemoExoticComponent<({ className, decimals, price, showArrow, ...htmlAttributes }: PriceTickerProps) => import("react/jsx-runtime").JSX.Element>;

package/types/prompt/Prompt.d.ts

@@ -50,4 +50,4 @@ export interface PromptProps extends Pick<DialogProps, "disableDismiss" | "onOpe
     showConfirmButton?: boolean;
     title: string;
 }
-export declare const Prompt: ({ children, className, cancelButtonLabel, cancelButtonProps, confirmButtonLabel, confirmButtonProps, customAction, disableDismiss, disableAccent, headerTag, icon, initialFocusedItem, onCancel, onClose, onConfirm, onOpenChange, open, showCancelButton, showCloseButton, showConfirmButton, status, title, ...htmlAttributes }: PromptProps) => import("react").JSX.Element;
+export declare const Prompt: ({ children, className, cancelButtonLabel, cancelButtonProps, confirmButtonLabel, confirmButtonProps, customAction, disableDismiss, disableAccent, headerTag, icon, initialFocusedItem, onCancel, onClose, onConfirm, onOpenChange, open, showCancelButton, showCloseButton, showConfirmButton, status, title, ...htmlAttributes }: PromptProps) => import("react/jsx-runtime").JSX.Element;

package/types/sortable-list/SortableList.d.ts

@@ -2,7 +2,7 @@ import { ListBoxProps, OptionProps } from "@salt-ds/core";
 export declare const SortableOption: ({ id, index, value, ...optionProps }: OptionProps & {
     id: string;
     index: number;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const SortableList: ({ children, onReorderListItems, ...listBoxProps }: ListBoxProps & {
     onReorderListItems?: (listItems: unknown[]) => void;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/types/split-button/useSplitButton.d.ts

@@ -27,18 +27,18 @@ export declare const useSplitButton: ({ ButtonProps: ButtonPropsProp, PopupMenuP
         onFocusCapture?: FocusEventHandler<HTMLButtonElement> | undefined;
         onBlur?: FocusEventHandler<HTMLButtonElement> | undefined;
         onBlurCapture?: FocusEventHandler<HTMLButtonElement> | undefined;
-        onChange?: import("react").ChangeEventHandler<HTMLButtonElement, Element> | undefined;
-        onChangeCapture?: import("react").ChangeEventHandler<HTMLButtonElement, Element> | undefined;
+        onChange?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+        onChangeCapture?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
         onBeforeInput?: import("react").InputEventHandler<HTMLButtonElement> | undefined;
-        onBeforeInputCapture?: import("react").InputEventHandler<HTMLButtonElement> | undefined;
-        onInput?: import("react").InputEventHandler<HTMLButtonElement> | undefined;
-        onInputCapture?: import("react").InputEventHandler<HTMLButtonElement> | undefined;
-        onReset?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
-        onResetCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
-        onSubmit?: import("react").SubmitEventHandler<HTMLButtonElement> | undefined;
-        onSubmitCapture?: import("react").SubmitEventHandler<HTMLButtonElement> | undefined;
-        onInvalid?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
-        onInvalidCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+        onBeforeInputCapture?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+        onInput?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+        onInputCapture?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+        onReset?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+        onResetCapture?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+        onSubmit?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+        onSubmitCapture?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+        onInvalid?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+        onInvalidCapture?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
         onLoad?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
         onLoadCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
         onError?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
@@ -277,7 +277,7 @@ export declare const useSplitButton: ({ ButtonProps: ButtonPropsProp, PopupMenuP
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
-        popover?: "" | "auto" | "manual" | "hint" | undefined;
+        popover?: "" | "auto" | "manual" | undefined;
         popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
         popoverTarget?: string | undefined;
         inert?: boolean | undefined;

package/types/split-pane/SplitPane.d.ts

@@ -0,0 +1,44 @@
+import { type FlexAlignment, type FlexContentAlignment, type ResponsiveProp } from "@salt-ds/core";
+import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+import { type SplitPaneDirection, type SplitterMovedHandler } from "./useSplitPane";
+export interface SplitPaneProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Defines the default behavior for how flex items are laid out along the cross axis, default is "stretch".
+     */
+    align?: FlexAlignment | "stretch" | "baseline";
+    /**
+     * Exactly two children, typically Salt `FlexItem` components. A Splitter
+     * will be rendered between them. A single child is also accepted (e.g. when
+     * one pane is conditionally rendered), in which case no Splitter is rendered.
+     */
+    children: ReactElement | [ReactNode, ReactNode];
+    /**
+     * Establishes the main-axis, defining the direction children are placed. Default is "row".
+     */
+    direction?: ResponsiveProp<SplitPaneDirection>;
+    /**
+     * Controls the space between each item and the Splitter, default is 0.
+     */
+    gap?: ResponsiveProp<number | string>;
+    /**
+     * Defines the alignment along the main axis, default is "start".
+     */
+    justify?: FlexContentAlignment;
+    /**
+     * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.
+     */
+    margin?: ResponsiveProp<number | string>;
+    /**
+     * Invoked when user has finished moving the Splitter, receives the new sizes (px) of both panes.
+     */
+    onSplitterMoved?: SplitterMovedHandler;
+    /**
+     * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.
+     */
+    padding?: ResponsiveProp<number | string>;
+    /**
+     * Size (thickness) of the Splitter, in px. Default is 3.
+     */
+    splitterSize?: number;
+}
+export declare const SplitPane: import("react").ForwardRefExoticComponent<SplitPaneProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/split-pane/Splitter.d.ts

@@ -0,0 +1,10 @@
+import { type HTMLAttributes } from "react";
+import type { SplitPaneDirection } from "./useSplitPane";
+export interface SplitterProps extends Omit<HTMLAttributes<HTMLDivElement>, "onResize"> {
+    direction: SplitPaneDirection;
+    onResizeStart: () => boolean;
+    onResize: (distance: number) => void;
+    onResizeEnd: () => void;
+    position?: number;
+}
+export declare const Splitter: ({ className, direction, onResize, onResizeEnd, onResizeStart, position, ...htmlAttributes }: SplitterProps) => import("react/jsx-runtime").JSX.Element;

package/types/split-pane/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./SplitPane";
+export type { SplitPaneDirection, SplitPaneSizes, SplitterMovedHandler, } from "./useSplitPane";

package/types/split-pane/useSplitPane.d.ts

@@ -0,0 +1,18 @@
+export type SplitPaneDirection = "row" | "column";
+/**
+ * Sizes (in px) of the two panes, measured along the main axis.
+ */
+export type SplitPaneSizes = [number, number];
+export type SplitterMovedHandler = (sizes: SplitPaneSizes) => void;
+export interface SplitPaneHookProps {
+    direction: SplitPaneDirection;
+    onSplitterMoved?: SplitterMovedHandler;
+    paneCount: number;
+}
+export declare const useSplitPane: ({ direction, onSplitterMoved, paneCount, }: SplitPaneHookProps) => {
+    beginResize: () => boolean;
+    endResize: () => void;
+    resize: (distance: number) => void;
+    rootRef: import("react").RefObject<HTMLDivElement | null>;
+    splitterPosition: number | undefined;
+};

package/types/table-search/SearchCell.d.ts

@@ -1,2 +1,2 @@
 import { TableCellRendererProps } from "@vuu-ui/vuu-table-types";
-export declare const SearchCell: ({ column, dataRow, searchPattern, }: TableCellRendererProps) => import("react").JSX.Element;
+export declare const SearchCell: ({ column, dataRow, searchPattern, }: TableCellRendererProps) => import("react/jsx-runtime").JSX.Element;

package/types/table-search/TableSearch.d.ts

@@ -6,4 +6,4 @@ export interface TableSearchProps extends HTMLAttributes<HTMLDivElement> {
     placeHolder?: string;
     searchColumns: string[];
 }
-export declare const TableSearch: ({ TableProps: { dataSource: dataSourceProp, ...TableProps }, autoFocus, className, placeHolder, searchColumns, ...htmlAttributes }: TableSearchProps) => import("react").JSX.Element;
+export declare const TableSearch: ({ TableProps: { dataSource: dataSourceProp, ...TableProps }, autoFocus, className, placeHolder, searchColumns, ...htmlAttributes }: TableSearchProps) => import("react/jsx-runtime").JSX.Element;

package/types/tabstrip/TabMenu.d.ts

@@ -20,4 +20,4 @@ export interface TabMenuProps {
      */
     controlledComponentTitle?: string;
 }
-export declare const TabMenu: ({ allowClose, allowRename, controlledComponentId, controlledComponentTitle, location, onMenuAction, onMenuClose, index, }: TabMenuProps) => import("react").JSX.Element;
+export declare const TabMenu: ({ allowClose, allowRename, controlledComponentId, controlledComponentTitle, location, onMenuAction, onMenuClose, index, }: TabMenuProps) => import("react/jsx-runtime").JSX.Element;

package/types/tabstrip/Tabstrip.d.ts

@@ -1,3 +1,2 @@
-import React from "react";
 import type { TabstripProps } from "./TabsTypes";
-export declare const Tabstrip: ({ activeTabIndex: activeTabIndexProp, allowAddTab, allowCloseTab, allowDragDrop, allowRenameTab, animateSelectionThumb, children, className: classNameProp, id: idProp, keyBoardActivation, location, onActiveChange, onAddTab, onCloseTab, onExitEditMode, onMoveTab, orientation, showTabMenuButton, style: styleProp, tabClassName, variant, ...htmlAttributes }: TabstripProps) => React.JSX.Element;
+export declare const Tabstrip: ({ activeTabIndex: activeTabIndexProp, allowAddTab, allowCloseTab, allowDragDrop, allowRenameTab, animateSelectionThumb, children, className: classNameProp, id: idProp, keyBoardActivation, location, onActiveChange, onAddTab, onCloseTab, onExitEditMode, onMoveTab, orientation, showTabMenuButton, style: styleProp, tabClassName, variant, ...htmlAttributes }: TabstripProps) => import("react/jsx-runtime").JSX.Element;

package/types/toolbar/Toolbar.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { OverflowContainerProps } from "../overflow-container";
 import { SelectionStrategy, SpecialKeyMultipleSelection } from "../common-hooks";
 export type ActiveItemChangeHandler = (itemIndex: number[]) => void;
@@ -17,4 +16,4 @@ export interface ToolbarProps extends OverflowContainerProps {
     selectionStrategy?: SelectionStrategy | SpecialKeyMultipleSelection;
     showSeparators?: boolean;
 }
-export declare const Toolbar: ({ activeItemIndex: activeItemIndexProp, alignItems, defaultActiveItemIndex, children, className, id: idProp, onActiveChange, onNavigateOutOfBounds, orientation, selectionStrategy, showSeparators, ...props }: ToolbarProps) => React.JSX.Element;
+export declare const Toolbar: ({ activeItemIndex: activeItemIndexProp, alignItems, defaultActiveItemIndex, children, className, id: idProp, onActiveChange, onNavigateOutOfBounds, orientation, selectionStrategy, showSeparators, ...props }: ToolbarProps) => import("react/jsx-runtime").JSX.Element;

package/types/vuu-date-picker/VuuDatePicker.d.ts

@@ -20,4 +20,4 @@ export interface VuuDatePickerProps extends Omit<DatePickerProps<SingleSelection
      */
     value?: EpochTimestamp | number;
 }
-export declare const VuuDatePicker: ({ className, onSelectionChange, onCommit, preserveFocusOnSelect, selectedDate: selectedDateProp, timeZone, value, ...props }: VuuDatePickerProps) => import("react").JSX.Element;
+export declare const VuuDatePicker: ({ className, onSelectionChange, onCommit, preserveFocusOnSelect, selectedDate: selectedDateProp, timeZone, value, ...props }: VuuDatePickerProps) => import("react/jsx-runtime").JSX.Element;

package/types/vuu-time-picker/VuuTimePicker.d.ts

@@ -5,5 +5,5 @@ type TimePickerInputProps = "defaultValue" | "milliseconds" | "onChange" | "onCo
 export type VuuTimePickerSecondsProps = Pick<TimeInputSecondsProps, TimePickerInputProps> & VuuTimePickerHtmlAttributes;
 export type VuuTimePickerMillisecondsProps = Pick<TimeInputMillisecondsProps, TimePickerInputProps> & VuuTimePickerHtmlAttributes;
 export type VuuTimePickerProps = VuuTimePickerSecondsProps | VuuTimePickerMillisecondsProps;
-export declare const VuuTimePicker: ({ className, defaultValue, milliseconds, onChange, onCommit, value, ...htmlAttributes }: VuuTimePickerProps) => import("react").JSX.Element;
+export declare const VuuTimePicker: ({ className, defaultValue, milliseconds, onChange, onCommit, value, ...htmlAttributes }: VuuTimePickerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/types/vuu-typeahead-input/VuuTypeaheadInput.d.ts

@@ -3,4 +3,4 @@ import { VuuTypeaheadInputHookProps } from "./useVuuTypeaheadInput";
 export interface VuuTypeaheadInputProps extends VuuTypeaheadInputHookProps, Pick<ComboBoxProps, "selectOnTab"> {
     className?: string;
 }
-export declare const VuuTypeaheadInput: ({ allowFreeInput, className, column, freeTextWarning, highlightFirstSuggestion, inputProps: inputPropsProp, minCharacterCountToTriggerSuggestions, onCommit, selectOnTab, table, }: VuuTypeaheadInputProps) => import("react").JSX.Element;
+export declare const VuuTypeaheadInput: ({ allowFreeInput, className, column, freeTextWarning, highlightFirstSuggestion, inputProps: inputPropsProp, minCharacterCountToTriggerSuggestions, onCommit, selectOnTab, table, }: VuuTypeaheadInputProps) => import("react/jsx-runtime").JSX.Element;