@vuu-ui/vuu-ui-controls 4.0.0-alpha.3 → 4.0.0-alpha.31

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/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/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);