@vuu-ui/vuu-ui-controls 4.0.0-alpha.22 → 4.0.0-alpha.24

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.0-alpha.22",
+  "version": "4.0.0-alpha.24",
   "description": "VUU UI Controls",
   "main": "./src/index.js",
   "author": "heswell",
@@ -10,17 +10,17 @@
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "4.0.0-alpha.22",
-    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.22",
-    "@vuu-ui/vuu-table-types": "4.0.0-alpha.22"
+    "@vuu-ui/vuu-data-types": "4.0.0-alpha.24",
+    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.24",
+    "@vuu-ui/vuu-table-types": "4.0.0-alpha.24"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "4.0.0-alpha.22",
-    "@vuu-ui/vuu-data-react": "4.0.0-alpha.22",
-    "@vuu-ui/vuu-layout": "4.0.0-alpha.22",
-    "@vuu-ui/vuu-popups": "4.0.0-alpha.22",
-    "@vuu-ui/vuu-table": "4.0.0-alpha.22",
-    "@vuu-ui/vuu-utils": "4.0.0-alpha.22",
+    "@vuu-ui/vuu-context-menu": "4.0.0-alpha.24",
+    "@vuu-ui/vuu-data-react": "4.0.0-alpha.24",
+    "@vuu-ui/vuu-layout": "4.0.0-alpha.24",
+    "@vuu-ui/vuu-popups": "4.0.0-alpha.24",
+    "@vuu-ui/vuu-table": "4.0.0-alpha.24",
+    "@vuu-ui/vuu-utils": "4.0.0-alpha.24",
     "@salt-ds/core": "1.72.0",
     "@salt-ds/icons": "1.18.3",
     "@salt-ds/styles": "0.4.1",

package/src/drag-drop/useDragDrop.js

@@ -292,6 +292,7 @@ const useDragDrop = ({ allowDragDrop, containerRef, draggableClassName, getDragP
             scrollableContainerRef.current = scrollableContainer;
             const containerRect = scrollableContainer.getBoundingClientRect();
             const draggableRect = dragElement.getBoundingClientRect();
+            const dragElementStyle = getComputedStyle(dragElement);
             const dragDropState = dragDropStateRef.current = new DragDropState(mousePosition, dragElement);
             setDragBoundaries(containerRect, draggableRect);
             beginDrag(dragElement);
@@ -303,7 +304,12 @@ const useDragDrop = ({ allowDragDrop, containerRef, draggableClassName, getDragP
                     onDropped: terminateDrag,
                     onTransitionEnd: terminateDrag,
                     ref: dragDropState.setDraggable,
-                    style: constrainRect(draggableRect, containerRect),
+                    style: {
+                        ...constrainRect(draggableRect, containerRect),
+                        backgroundColor: dragElementStyle.backgroundColor,
+                        color: dragElementStyle.color,
+                        font: dragElementStyle.font
+                    },
                     wrapperClassName: draggableClassName
                 }),
                 draggedItemIndex: parseInt(index)

package/src/instrument-picker/TablePicker.css.js

@@ -7,6 +7,7 @@ const css = `
 }
 
 .vuuTablePicker-floating-table {
+  background: var(--salt-container-primary-background);
   border: solid 1px var(--salt-container-secondary-borderColor);
   padding: var(--salt-spacing-100) 0;
   z-index: var(--salt-zIndex-popout);

package/src/prompt/Prompt.css.js

@@ -1,5 +1,6 @@
 const css = `
 .vuuPrompt {
+  max-width: var(--vuuPrompt-maxWidth);
   min-height: var(--vuuPrompt-minHeight, 257px);
   min-width: var(--vuuPrompt-minWidth, 380px);
 

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

@@ -3,8 +3,10 @@ const css = `
   --vuu-icon-left: 0;
   --vuu-icon-size: 16px;
   --vuu-icon-top: -1px;
-  color: var(--background-cell-color);
-  z-index: -1;
+  color: inherit;
+  cursor: grab;
+  -webkit-user-select: none;
+  user-select: none;
   align-items: center;
   padding: 0 8px;
   display: flex;

package/src/table-search/SearchCell.js

@@ -2,6 +2,7 @@ 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 { Icon } from "../icon-button/index.js";
 import SearchCell from "./SearchCell.css";
 const classBase = "vuuSearchCell";
 const SearchCell_SearchCell = ({ column, dataRow, searchPattern = "" })=>{
@@ -16,8 +17,8 @@ const SearchCell_SearchCell = ({ column, dataRow, searchPattern = "" })=>{
         className: classBase,
         tabIndex: -1,
         children: [
-            /*#__PURE__*/ jsx("span", {
-                "data-icon": "draggable"
+            /*#__PURE__*/ jsx(Icon, {
+                name: "draggable"
             }),
             valueWithHighlighting
         ]

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

@@ -1,6 +1,10 @@
 const css = `
 .vuuTableSearch {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
   height: 100%;
+  min-height: 0;
   padding: var(--vuuTableSearch-padding, 12px);
   flex-direction: column;
   display: flex;

package/src/table-search/TableSearch.js

@@ -16,7 +16,7 @@ const defaultConfig = {
 const searchIcon = /*#__PURE__*/ jsx("span", {
     "data-icon": "search"
 });
-const TableSearch_TableSearch = ({ TableProps: { dataSource: dataSourceProp, ...TableProps }, autoFocus = false, className, placeHolder, searchColumns, ...htmlAttributes })=>{
+const TableSearch_TableSearch = ({ TableProps: { dataSource: dataSourceProp, ...TableProps }, autoFocus = false, baseFilter, className, placeHolder, searchColumns, ...htmlAttributes })=>{
     const targetWindow = useWindow();
     useComponentCssInjection({
         testId: "vuu-table-search",
@@ -30,6 +30,7 @@ const TableSearch_TableSearch = ({ TableProps: { dataSource: dataSourceProp, ...
         TableProps?.config
     ]);
     const { dataSource, onChange, searchState } = useTableSearch({
+        baseFilter,
         dataSource: dataSourceProp,
         searchColumns
     });
@@ -46,6 +47,7 @@ const TableSearch_TableSearch = ({ TableProps: { dataSource: dataSourceProp, ...
             /*#__PURE__*/ jsx("div", {
                 className: `${classBase}-inputField`,
                 children: /*#__PURE__*/ jsx(Input, {
+                    bordered: true,
                     inputProps: {
                         onKeyDown
                     },

package/src/table-search/useTableSearch.js

@@ -1,5 +1,5 @@
-import { useCallback, useMemo, useState } from "react";
-const useTableSearch = ({ dataSource, searchColumns })=>{
+import { useCallback, useEffect, useMemo, useState } from "react";
+const useTableSearch = ({ baseFilter = "", dataSource, searchColumns })=>{
     const [searchState, setSearchState] = useState({
         searchText: "",
         filter: ""
@@ -14,12 +14,20 @@ const useTableSearch = ({ dataSource, searchColumns })=>{
             searchText: value,
             filter
         });
-        if (dataSource) dataSource.filter = {
-            filter
+    }, [
+        baseFilterPattern
+    ]);
+    useEffect(()=>{
+        dataSource.filter = {
+            filter: [
+                baseFilter,
+                searchState.filter
+            ].filter(Boolean).map((filter)=>`(${filter})`).join(" and ")
         };
     }, [
-        baseFilterPattern,
-        dataSource
+        baseFilter,
+        dataSource,
+        searchState.filter
     ]);
     return {
         dataSource,

package/types/prompt/Prompt.d.ts

@@ -1,5 +1,5 @@
-import { DialogHeaderProps, DialogProps } from "@salt-ds/core";
-import { HTMLAttributes, ReactNode, RefObject } from "react";
+import { type DialogHeaderProps, type DialogProps } from "@salt-ds/core";
+import { type HTMLAttributes, type ReactNode, type RefObject } from "react";
 /**
  * Allow fine grained configuration of Prompt buttons
  * The ref is provided to facilitate programmatic focus.

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

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

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

@@ -1,11 +1,11 @@
 import { FormEventHandler } from "react";
 import { TableSearchProps } from "./TableSearch";
 import { DataSource } from "@vuu-ui/vuu-data-types";
-export interface TableSearchHookProps extends Pick<TableSearchProps, "searchColumns"> {
+export interface TableSearchHookProps extends Pick<TableSearchProps, "searchColumns" | "baseFilter"> {
     dataSource: DataSource;
     label?: string;
 }
-export declare const useTableSearch: ({ dataSource, searchColumns, }: TableSearchHookProps) => {
+export declare const useTableSearch: ({ baseFilter, dataSource, searchColumns, }: TableSearchHookProps) => {
     dataSource: DataSource;
     onChange: FormEventHandler;
     searchState: {