@vuu-ui/vuu-ui-controls 0.0.26

package/cjs/instrument-picker/InstrumentPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InstrumentPicker.js","sources":["../../src/instrument-picker/InstrumentPicker.tsx"],"sourcesContent":["import { DataSourceRowObject, TableSchema } from \"@vuu-ui/vuu-data-types\";\nimport { Table, TableProps } from \"@vuu-ui/vuu-table\";\nimport { ColumnMap, useId } from \"@vuu-ui/vuu-utils\";\nimport { Input } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ForwardedRef, forwardRef, HTMLAttributes, useMemo } from \"react\";\nimport { DropdownBase, OpenChangeHandler } from \"../dropdown\";\nimport { SearchCell } from \"./SearchCell\";\nimport { useInstrumentPicker } from \"./useInstrumentPicker\";\n\nimport instrumentPickerCss from \"./InstrumentPicker.css\";\n\nconst classBase = \"vuuInstrumentPicker\";\n\nif (typeof SearchCell !== \"function\") {\n  console.warn(\"Instrument Picker: SearchCell module not loaded \");\n}\n\nexport interface InstrumentPickerProps\n  extends Omit<HTMLAttributes<HTMLElement>, \"onSelect\">,\n    Pick<TableProps, \"onSelect\"> {\n  TableProps: Pick<TableProps, \"config\" | \"dataSource\">;\n  columnMap: ColumnMap;\n  disabled?: boolean;\n  /**\n   * Used to form the display value to render in input following selection. If\n   * not provided, default will be the values from rendered columns.\n   *\n   * @param row DataSourceRow\n   * @returns string\n   */\n  itemToString?: (row: DataSourceRowObject) => string;\n  onClose?: () => void;\n  onOpenChange?: OpenChangeHandler;\n  schema: TableSchema;\n  searchColumns: string[];\n  width?: number;\n}\n\nexport const InstrumentPicker = forwardRef(function InstrumentPicker(\n  {\n    TableProps: { dataSource, ...TableProps },\n    className,\n    columnMap,\n    disabled,\n    id: idProp,\n    itemToString,\n    onOpenChange: onOpenChangeProp,\n    onSelect,\n    schema,\n    searchColumns,\n    width,\n    ...htmlAttributes\n  }: InstrumentPickerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-instrument-picker\",\n    css: instrumentPickerCss,\n    window: targetWindow,\n  });\n\n  const id = useId(idProp);\n\n  const {\n    highlightedIndex,\n    inputProps,\n    isOpen,\n    onOpenChange,\n    tableHandlers,\n    tableRef,\n    value,\n  } = useInstrumentPicker({\n    columnMap,\n    columns: TableProps.config.columns,\n    dataSource,\n    itemToString,\n    onOpenChange: onOpenChangeProp,\n    onSelect,\n    searchColumns,\n  });\n\n  const endAdornment = useMemo(() => <span data-icon=\"chevron-down\" />, []);\n\n  const tableProps = {\n    ...TableProps,\n    config: {\n      ...TableProps.config,\n      zebraStripes: false,\n    },\n  };\n\n  return (\n    <DropdownBase\n      {...htmlAttributes}\n      fullWidth\n      id={id}\n      isOpen={isOpen}\n      onOpenChange={onOpenChange}\n      openOnFocus\n      placement=\"below-full-width\"\n      ref={forwardedRef}\n      width={width}\n    >\n      <Input\n        {...inputProps}\n        disabled={disabled}\n        endAdornment={endAdornment}\n        value={value}\n      />\n\n      <Table\n        rowHeight={25}\n        renderBufferSize={100}\n        {...tableProps}\n        {...tableHandlers}\n        className={`${classBase}-list`}\n        height={200}\n        highlightedIndex={highlightedIndex}\n        dataSource={dataSource}\n        navigationStyle=\"row\"\n        ref={tableRef}\n        showColumnHeaders={false}\n      />\n    </DropdownBase>\n  );\n});\n"],"names":["SearchCell","forwardRef","InstrumentPicker","TableProps","useWindow","useComponentCssInjection","instrumentPickerCss","useId","useInstrumentPicker","useMemo","jsx","jsxs","DropdownBase","Input","Table"],"mappings":";;;;;;;;;;;;;;;;;;AAaA,MAAM,SAAY,GAAA,qBAAA,CAAA;AAElB,IAAI,OAAOA,0BAAe,UAAY,EAAA;AACpC,EAAA,OAAA,CAAQ,KAAK,kDAAkD,CAAA,CAAA;AACjE,CAAA;AAuBa,MAAA,gBAAA,GAAmBC,gBAAW,CAAA,SAASC,iBAClD,CAAA;AAAA,EACE,UAAY,EAAA,EAAE,UAAY,EAAA,GAAGC,WAAW,EAAA;AAAA,EACxC,SAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,EAAI,EAAA,MAAA;AAAA,EACJ,YAAA;AAAA,EACA,YAAc,EAAA,gBAAA;AAAA,EACd,QAAA;AAAA,EACA,MAAA;AAAA,EACA,aAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,kBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAA,GAAKC,eAAM,MAAM,CAAA,CAAA;AAEvB,EAAM,MAAA;AAAA,IACJ,gBAAA;AAAA,IACA,UAAA;AAAA,IACA,MAAA;AAAA,IACA,YAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,MACEC,uCAAoB,CAAA;AAAA,IACtB,SAAA;AAAA,IACA,OAAA,EAASL,YAAW,MAAO,CAAA,OAAA;AAAA,IAC3B,UAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAc,EAAA,gBAAA;AAAA,IACd,QAAA;AAAA,IACA,aAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,YAAA,GAAeM,cAAQ,sBAAMC,cAAA,CAAC,UAAK,WAAU,EAAA,cAAA,EAAe,CAAI,EAAA,EAAE,CAAA,CAAA;AAExE,EAAA,MAAM,UAAa,GAAA;AAAA,IACjB,GAAGP,WAAAA;AAAA,IACH,MAAQ,EAAA;AAAA,MACN,GAAGA,WAAW,CAAA,MAAA;AAAA,MACd,YAAc,EAAA,KAAA;AAAA,KAChB;AAAA,GACF,CAAA;AAEA,EACE,uBAAAQ,eAAA;AAAA,IAACC,yBAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAS,EAAA,IAAA;AAAA,MACT,EAAA;AAAA,MACA,MAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAW,EAAA,IAAA;AAAA,MACX,SAAU,EAAA,kBAAA;AAAA,MACV,GAAK,EAAA,YAAA;AAAA,MACL,KAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAF,cAAA;AAAA,UAACG,UAAA;AAAA,UAAA;AAAA,YACE,GAAG,UAAA;AAAA,YACJ,QAAA;AAAA,YACA,YAAA;AAAA,YACA,KAAA;AAAA,WAAA;AAAA,SACF;AAAA,wBAEAH,cAAA;AAAA,UAACI,cAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAA,EAAA;AAAA,YACX,gBAAkB,EAAA,GAAA;AAAA,YACjB,GAAG,UAAA;AAAA,YACH,GAAG,aAAA;AAAA,YACJ,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA;AAAA,YACvB,MAAQ,EAAA,GAAA;AAAA,YACR,gBAAA;AAAA,YACA,UAAA;AAAA,YACA,eAAgB,EAAA,KAAA;AAAA,YAChB,GAAK,EAAA,QAAA;AAAA,YACL,iBAAmB,EAAA,KAAA;AAAA,WAAA;AAAA,SACrB;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAC;;;;"}

package/cjs/instrument-picker/SearchCell.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var searchCellCss = "\n.vuuSearchCell {\n  --vuu-icon-left: 0;\n  --vuu-icon-size: 16px;\n  --vuu-icon-top: 0px;\n  align-items: center;\n  color: var(--background-cell-color);\n  display: flex;\n  gap: 4px;\n  padding: 0 8px 0 8px;\n  position: relative;\n  z-index: -1;\n}\n\n";
+
+module.exports = searchCellCss;
+//# sourceMappingURL=SearchCell.css.js.map

package/cjs/instrument-picker/SearchCell.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchCell.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/instrument-picker/SearchCell.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var SearchCell$1 = require('./SearchCell.css.js');
+
+const classBase = "vuuSearchCell";
+const SearchCell = ({
+  column,
+  columnMap,
+  row
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-search-cell",
+    css: SearchCell$1,
+    window: targetWindow
+  });
+  const key = columnMap[column.name];
+  const value = row[key];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classBase, tabIndex: -1, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "data-icon": "draggable" }),
+    value
+  ] });
+};
+vuuUtils.registerComponent("search-cell", SearchCell, "cell-renderer", {
+  serverDataType: "private"
+});
+
+exports.SearchCell = SearchCell;
+//# sourceMappingURL=SearchCell.js.map

package/cjs/instrument-picker/SearchCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchCell.js","sources":["../../src/instrument-picker/SearchCell.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\n\nimport searchCellCss from \"./SearchCell.css\";\n\nconst classBase = \"vuuSearchCell\";\n\n// export to avoid tree shaking, component is not consumed directly\nexport const SearchCell = ({\n  column,\n  columnMap,\n  row,\n}: TableCellRendererProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-search-cell\",\n    css: searchCellCss,\n    window: targetWindow,\n  });\n\n  //TODO what about click handling\n\n  const key = columnMap[column.name];\n  const value = row[key];\n\n  return (\n    <div className={classBase} tabIndex={-1}>\n      <span data-icon=\"draggable\" />\n      {value}\n    </div>\n  );\n};\n\nregisterComponent(\"search-cell\", SearchCell, \"cell-renderer\", {\n  serverDataType: \"private\",\n});\n"],"names":["useWindow","useComponentCssInjection","searchCellCss","jsxs","jsx","registerComponent"],"mappings":";;;;;;;;AAOA,MAAM,SAAY,GAAA,eAAA,CAAA;AAGX,MAAM,aAAa,CAAC;AAAA,EACzB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAID,EAAM,MAAA,GAAA,GAAM,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACjC,EAAM,MAAA,KAAA,GAAQ,IAAI,GAAG,CAAA,CAAA;AAErB,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,SAAA,EAAW,UAAU,CACnC,CAAA,EAAA,QAAA,EAAA;AAAA,oBAACC,cAAA,CAAA,MAAA,EAAA,EAAK,aAAU,WAAY,EAAA,CAAA;AAAA,IAC3B,KAAA;AAAA,GACH,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEAC,0BAAkB,CAAA,aAAA,EAAe,YAAY,eAAiB,EAAA;AAAA,EAC5D,cAAgB,EAAA,SAAA;AAClB,CAAC,CAAA;;;;"}

package/cjs/instrument-picker/useInstrumentPicker.js

@@ -0,0 +1,87 @@
+'use strict';
+
+var vuuTable = require('@vuu-ui/vuu-table');
+var React = require('react');
+require('../common-hooks/collectionProvider.js');
+var useControlled = require('../common-hooks/useControlled.js');
+require('../common-hooks/use-resize-observer.js');
+
+const defaultItemToString = (row) => Object.values(row.data).join(" ");
+const useInstrumentPicker = ({
+  dataSource,
+  defaultIsOpen,
+  isOpen: isOpenProp,
+  itemToString = defaultItemToString,
+  onOpenChange,
+  onSelect,
+  searchColumns
+}) => {
+  const [value, setValue] = React.useState("");
+  const [isOpen, setIsOpen] = useControlled.useControlled({
+    controlled: isOpenProp,
+    default: defaultIsOpen ?? false,
+    name: "useDropdownList"
+  });
+  const { highlightedIndexRef, onKeyDown, tableRef } = vuuTable.useControlledTableNavigation(-1, dataSource.size);
+  const baseFilterPattern = React.useMemo(
+    // TODO make this contains once server supports it
+    () => searchColumns.map((col) => `${col} starts "__VALUE__"`).join(" or "),
+    [searchColumns]
+  );
+  const handleOpenChange = React.useCallback(
+    (open, closeReason) => {
+      setIsOpen(open);
+      onOpenChange?.(open, closeReason);
+    },
+    [onOpenChange, setIsOpen]
+  );
+  const handleInputChange = React.useCallback(
+    (evt) => {
+      const { value: value2 } = evt.target;
+      setValue(value2);
+      if (value2 && value2.trim().length) {
+        const filter = baseFilterPattern.replaceAll("__VALUE__", value2);
+        dataSource.filter = {
+          filter
+        };
+      } else {
+        dataSource.filter = {
+          filter: ""
+        };
+      }
+      setIsOpen(true);
+    },
+    [baseFilterPattern, dataSource, setIsOpen]
+  );
+  const handleSelectRow = React.useCallback(
+    (row) => {
+      const value2 = row === null ? "" : itemToString(row);
+      setValue(value2);
+      onSelect?.(row);
+      handleOpenChange?.(false, "select");
+    },
+    [handleOpenChange, itemToString, onSelect]
+  );
+  const inputProps = {
+    inputProps: {
+      autoComplete: "off",
+      onKeyDown
+    },
+    onChange: handleInputChange
+  };
+  const tableHandlers = {
+    onSelect: handleSelectRow
+  };
+  return {
+    highlightedIndex: highlightedIndexRef.current,
+    inputProps,
+    isOpen,
+    onOpenChange: handleOpenChange,
+    tableHandlers,
+    tableRef,
+    value
+  };
+};
+
+exports.useInstrumentPicker = useInstrumentPicker;
+//# sourceMappingURL=useInstrumentPicker.js.map

package/cjs/instrument-picker/useInstrumentPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInstrumentPicker.js","sources":["../../src/instrument-picker/useInstrumentPicker.ts"],"sourcesContent":["import { DataSource, DataSourceRowObject } from \"@vuu-ui/vuu-data-types\";\nimport {\n  ColumnDescriptor,\n  TableRowSelectHandler,\n} from \"@vuu-ui/vuu-table-types\";\nimport { useControlledTableNavigation } from \"@vuu-ui/vuu-table\";\nimport { ChangeEvent, useCallback, useMemo, useState } from \"react\";\nimport { useControlled } from \"../common-hooks\";\nimport { OpenChangeHandler } from \"../dropdown\";\nimport { InstrumentPickerProps } from \"./InstrumentPicker\";\n\nexport interface InstrumentPickerHookProps\n  extends Pick<\n    InstrumentPickerProps,\n    \"columnMap\" | \"itemToString\" | \"onOpenChange\" | \"onSelect\" | \"searchColumns\"\n  > {\n  columns: ColumnDescriptor[];\n  dataSource: DataSource;\n  defaultIsOpen?: boolean;\n  isOpen?: boolean;\n}\n\nconst defaultItemToString = (row: DataSourceRowObject) =>\n  Object.values(row.data).join(\" \");\n\nexport const useInstrumentPicker = ({\n  dataSource,\n  defaultIsOpen,\n  isOpen: isOpenProp,\n  itemToString = defaultItemToString,\n  onOpenChange,\n  onSelect,\n  searchColumns,\n}: InstrumentPickerHookProps) => {\n  const [value, setValue] = useState(\"\");\n  const [isOpen, setIsOpen] = useControlled<boolean>({\n    controlled: isOpenProp,\n    default: defaultIsOpen ?? false,\n    name: \"useDropdownList\",\n  });\n\n  const { highlightedIndexRef, onKeyDown, tableRef } =\n    useControlledTableNavigation(-1, dataSource.size);\n\n  const baseFilterPattern = useMemo(\n    // TODO make this contains once server supports it\n    () => searchColumns.map((col) => `${col} starts \"__VALUE__\"`).join(\" or \"),\n    [searchColumns]\n  );\n\n  const handleOpenChange = useCallback<OpenChangeHandler>(\n    (open, closeReason) => {\n      setIsOpen(open);\n      onOpenChange?.(open, closeReason);\n    },\n    [onOpenChange, setIsOpen]\n  );\n\n  const handleInputChange = useCallback(\n    (evt: ChangeEvent<HTMLInputElement>) => {\n      const { value } = evt.target;\n      setValue(value);\n\n      if (value && value.trim().length) {\n        const filter = baseFilterPattern.replaceAll(\"__VALUE__\", value);\n        dataSource.filter = {\n          filter,\n        };\n      } else {\n        dataSource.filter = {\n          filter: \"\",\n        };\n      }\n\n      setIsOpen(true);\n    },\n    [baseFilterPattern, dataSource, setIsOpen]\n  );\n\n  const handleSelectRow = useCallback<TableRowSelectHandler>(\n    (row) => {\n      const value = row === null ? \"\" : itemToString(row);\n      setValue(value);\n      onSelect?.(row);\n      handleOpenChange?.(false, \"select\");\n    },\n    [handleOpenChange, itemToString, onSelect]\n  );\n\n  const inputProps = {\n    inputProps: {\n      autoComplete: \"off\",\n      onKeyDown,\n    },\n    onChange: handleInputChange,\n  };\n  const tableHandlers = {\n    onSelect: handleSelectRow,\n  };\n\n  return {\n    highlightedIndex: highlightedIndexRef.current,\n    inputProps,\n    isOpen,\n    onOpenChange: handleOpenChange,\n    tableHandlers,\n    tableRef,\n    value,\n  };\n};\n"],"names":["useState","useControlled","useControlledTableNavigation","useMemo","useCallback","value"],"mappings":"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"}

package/cjs/instrument-search/InstrumentSearch.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var instrumentSearchCss = ".vuuInstrumentSearch {\n    height: 100%;\n    padding: var(--vuuInstrumentSearch-padding, 12px);\n    display: flex;\n    flex-direction: column;\n}\n\n.vuuInstrumentSearch-inputField {\n    --vuu-icon-size: 16px;\n    flex: 0 0 40px;\n    padding: 0 12px;\n}\n.vuuInstrumentSearch-list {\n    --vuuMeasuredContainer-flex: 1 1 1px;\n    background-color: var(--salt-container-primary-background);\n    flex: 1 1 auto;\n}\n\n.vuuInstrumentSearch .vuuTableCell {\n    padding: 0;\n}\n";
+
+module.exports = instrumentSearchCss;
+//# sourceMappingURL=InstrumentSearch.css.js.map

package/cjs/instrument-search/InstrumentSearch.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InstrumentSearch.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/instrument-search/InstrumentSearch.js

@@ -0,0 +1,96 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuLayout = require('@vuu-ui/vuu-layout');
+var vuuTable = require('@vuu-ui/vuu-table');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var cx = require('clsx');
+var React = require('react');
+var SearchCell = require('./SearchCell.js');
+var useInstrumentSearch = require('./useInstrumentSearch.js');
+var InstrumentSearch$1 = require('./InstrumentSearch.css.js');
+
+const classBase = "vuuInstrumentSearch";
+if (typeof SearchCell.SearchCell !== "function") {
+  console.warn("Instrument Search: SearchCell module not loaded ");
+}
+const defaultTableConfig = {
+  columns: [
+    { name: "bbg", hidden: true },
+    {
+      name: "description",
+      width: 200,
+      type: {
+        name: "string",
+        renderer: {
+          name: "search-cell"
+        }
+      }
+    }
+  ],
+  rowSeparators: true
+};
+const searchIcon = /* @__PURE__ */ jsxRuntime.jsx("span", { "data-icon": "search" });
+const InstrumentSearch = ({
+  TableProps: TableProps2,
+  autoFocus = false,
+  className,
+  dataSource: dataSourceProp,
+  placeHolder,
+  searchColumns,
+  ...htmlAttributes
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-instrument-search",
+    css: InstrumentSearch$1,
+    window: targetWindow
+  });
+  const { dataSource, onChange, searchState } = useInstrumentSearch.useInstrumentSearch({
+    dataSource: dataSourceProp,
+    searchColumns
+  });
+  const { highlightedIndexRef, onHighlight, onKeyDown, tableRef } = vuuTable.useControlledTableNavigation(-1, dataSource?.size ?? 0);
+  const searchCallbackRef = React.useCallback((el) => {
+    setTimeout(() => {
+      el?.querySelector("input")?.focus();
+    }, 100);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: cx(classBase, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-inputField`, children: /* @__PURE__ */ jsxRuntime.jsx(
+      core.Input,
+      {
+        inputProps: { onKeyDown },
+        endAdornment: searchIcon,
+        placeholder: placeHolder,
+        ref: autoFocus ? searchCallbackRef : null,
+        value: searchState.searchText,
+        onChange
+      }
+    ) }),
+    dataSource ? /* @__PURE__ */ jsxRuntime.jsx(
+      vuuTable.Table,
+      {
+        disableFocus: true,
+        id: "instrument-search",
+        rowHeight: 25,
+        config: defaultTableConfig,
+        highlightedIndex: highlightedIndexRef.current,
+        renderBufferSize: 100,
+        ...TableProps2,
+        className: `${classBase}-list`,
+        dataSource,
+        navigationStyle: "row",
+        onHighlight,
+        ref: tableRef,
+        showColumnHeaders: false
+      }
+    ) : null
+  ] });
+};
+vuuLayout.registerComponent?.("InstrumentSearch", InstrumentSearch, "view");
+
+exports.InstrumentSearch = InstrumentSearch;
+//# sourceMappingURL=InstrumentSearch.js.map

package/cjs/instrument-search/InstrumentSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InstrumentSearch.js","sources":["../../src/instrument-search/InstrumentSearch.tsx"],"sourcesContent":["import { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport { registerComponent } from \"@vuu-ui/vuu-layout\";\nimport {\n  Table,\n  TableProps,\n  useControlledTableNavigation,\n} from \"@vuu-ui/vuu-table\";\nimport { Input } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, RefCallback, useCallback } from \"react\";\nimport { SearchCell } from \"./SearchCell\";\nimport { useInstrumentSearch } from \"./useInstrumentSearch\";\n\nimport instrumentSearchCss from \"./InstrumentSearch.css\";\n\nconst classBase = \"vuuInstrumentSearch\";\n\nif (typeof SearchCell !== \"function\") {\n  console.warn(\"Instrument Search: SearchCell module not loaded \");\n}\n\nconst defaultTableConfig: TableConfig = {\n  columns: [\n    { name: \"bbg\", hidden: true },\n    {\n      name: \"description\",\n      width: 200,\n      type: {\n        name: \"string\",\n        renderer: {\n          name: \"search-cell\",\n        },\n      },\n    },\n  ],\n  rowSeparators: true,\n};\n\nexport interface InstrumentSearchProps extends HTMLAttributes<HTMLDivElement> {\n  TableProps?: Partial<TableProps>;\n  autoFocus?: boolean;\n  dataSource: DataSource;\n  placeHolder?: string;\n  searchColumns?: string[];\n}\n\nconst searchIcon = <span data-icon=\"search\" />;\n\nexport const InstrumentSearch = ({\n  TableProps,\n  autoFocus = false,\n  className,\n  dataSource: dataSourceProp,\n  placeHolder,\n  searchColumns,\n  ...htmlAttributes\n}: InstrumentSearchProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-instrument-search\",\n    css: instrumentSearchCss,\n    window: targetWindow,\n  });\n\n  const { dataSource, onChange, searchState } = useInstrumentSearch({\n    dataSource: dataSourceProp,\n    searchColumns,\n  });\n\n  const { highlightedIndexRef, onHighlight, onKeyDown, tableRef } =\n    useControlledTableNavigation(-1, dataSource?.size ?? 0);\n\n  const searchCallbackRef = useCallback<RefCallback<HTMLElement>>((el) => {\n    setTimeout(() => {\n      el?.querySelector(\"input\")?.focus();\n    }, 100);\n  }, []);\n\n  return (\n    <div {...htmlAttributes} className={cx(classBase, className)}>\n      <div className={`${classBase}-inputField`}>\n        <Input\n          inputProps={{ onKeyDown }}\n          endAdornment={searchIcon}\n          placeholder={placeHolder}\n          ref={autoFocus ? searchCallbackRef : null}\n          value={searchState.searchText}\n          onChange={onChange}\n        />\n      </div>\n\n      {dataSource ? (\n        <Table\n          disableFocus\n          id=\"instrument-search\"\n          rowHeight={25}\n          config={defaultTableConfig}\n          highlightedIndex={highlightedIndexRef.current}\n          renderBufferSize={100}\n          {...TableProps}\n          className={`${classBase}-list`}\n          dataSource={dataSource}\n          navigationStyle=\"row\"\n          onHighlight={onHighlight}\n          ref={tableRef}\n          showColumnHeaders={false}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nregisterComponent?.(\"InstrumentSearch\", InstrumentSearch, \"view\");\n"],"names":["SearchCell","jsx","TableProps","useWindow","useComponentCssInjection","instrumentSearchCss","useInstrumentSearch","useControlledTableNavigation","useCallback","jsxs","Input","Table","registerComponent"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAM,SAAY,GAAA,qBAAA,CAAA;AAElB,IAAI,OAAOA,0BAAe,UAAY,EAAA;AACpC,EAAA,OAAA,CAAQ,KAAK,kDAAkD,CAAA,CAAA;AACjE,CAAA;AAEA,MAAM,kBAAkC,GAAA;AAAA,EACtC,OAAS,EAAA;AAAA,IACP,EAAE,IAAA,EAAM,KAAO,EAAA,MAAA,EAAQ,IAAK,EAAA;AAAA,IAC5B;AAAA,MACE,IAAM,EAAA,aAAA;AAAA,MACN,KAAO,EAAA,GAAA;AAAA,MACP,IAAM,EAAA;AAAA,QACJ,IAAM,EAAA,QAAA;AAAA,QACN,QAAU,EAAA;AAAA,UACR,IAAM,EAAA,aAAA;AAAA,SACR;AAAA,OACF;AAAA,KACF;AAAA,GACF;AAAA,EACA,aAAe,EAAA,IAAA;AACjB,CAAA,CAAA;AAUA,MAAM,UAAa,mBAAAC,cAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,QAAS,EAAA,CAAA,CAAA;AAErC,MAAM,mBAAmB,CAAC;AAAA,EAC/B,UAAAC,EAAAA,WAAAA;AAAA,EACA,SAAY,GAAA,KAAA;AAAA,EACZ,SAAA;AAAA,EACA,UAAY,EAAA,cAAA;AAAA,EACZ,WAAA;AAAA,EACA,aAAA;AAAA,EACA,GAAG,cAAA;AACL,CAA6B,KAAA;AAC3B,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,kBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,UAAA,EAAY,QAAU,EAAA,WAAA,KAAgBC,uCAAoB,CAAA;AAAA,IAChE,UAAY,EAAA,cAAA;AAAA,IACZ,aAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,mBAAqB,EAAA,WAAA,EAAa,SAAW,EAAA,QAAA,KACnDC,qCAA6B,CAAA,CAAA,CAAA,EAAI,UAAY,EAAA,IAAA,IAAQ,CAAC,CAAA,CAAA;AAExD,EAAM,MAAA,iBAAA,GAAoBC,iBAAsC,CAAA,CAAC,EAAO,KAAA;AACtE,IAAA,UAAA,CAAW,MAAM;AACf,MAAI,EAAA,EAAA,aAAA,CAAc,OAAO,CAAA,EAAG,KAAM,EAAA,CAAA;AAAA,OACjC,GAAG,CAAA,CAAA;AAAA,GACR,EAAG,EAAE,CAAA,CAAA;AAEL,EACE,uBAAAC,eAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CACzD,EAAA,QAAA,EAAA;AAAA,oBAAAR,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAC1B,WAAA,CAAA,EAAA,QAAA,kBAAAA,cAAA;AAAA,MAACS,UAAA;AAAA,MAAA;AAAA,QACC,UAAA,EAAY,EAAE,SAAU,EAAA;AAAA,QACxB,YAAc,EAAA,UAAA;AAAA,QACd,WAAa,EAAA,WAAA;AAAA,QACb,GAAA,EAAK,YAAY,iBAAoB,GAAA,IAAA;AAAA,QACrC,OAAO,WAAY,CAAA,UAAA;AAAA,QACnB,QAAA;AAAA,OAAA;AAAA,KAEJ,EAAA,CAAA;AAAA,IAEC,UACC,mBAAAT,cAAA;AAAA,MAACU,cAAA;AAAA,MAAA;AAAA,QACC,YAAY,EAAA,IAAA;AAAA,QACZ,EAAG,EAAA,mBAAA;AAAA,QACH,SAAW,EAAA,EAAA;AAAA,QACX,MAAQ,EAAA,kBAAA;AAAA,QACR,kBAAkB,mBAAoB,CAAA,OAAA;AAAA,QACtC,gBAAkB,EAAA,GAAA;AAAA,QACjB,GAAGT,WAAAA;AAAA,QACJ,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA;AAAA,QACvB,UAAA;AAAA,QACA,eAAgB,EAAA,KAAA;AAAA,QAChB,WAAA;AAAA,QACA,GAAK,EAAA,QAAA;AAAA,QACL,iBAAmB,EAAA,KAAA;AAAA,OAAA;AAAA,KAEnB,GAAA,IAAA;AAAA,GACN,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEAU,2BAAoB,GAAA,kBAAA,EAAoB,kBAAkB,MAAM,CAAA;;;;"}

package/cjs/instrument-search/SearchCell.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var searchCellCss = "\n.vuuSearchCell {\n  --vuu-icon-left: 0;\n  --vuu-icon-size: 16px;\n  --vuu-icon-top: 0px;\n  align-items: center;\n  color: var(--background-cell-color);\n  display: flex;\n  gap: 4px;\n  padding: 0 8px 0 8px;\n  position: relative;\n  z-index: -1;\n}\n\n";
+
+module.exports = searchCellCss;
+//# sourceMappingURL=SearchCell.css.js.map

package/cjs/instrument-search/SearchCell.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchCell.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/instrument-search/SearchCell.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var SearchCell$1 = require('./SearchCell.css.js');
+
+const classBase = "vuuSearchCell";
+const SearchCell = ({
+  column,
+  columnMap,
+  row
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-search-cell",
+    css: SearchCell$1,
+    window: targetWindow
+  });
+  const key = columnMap[column.name];
+  const value = row[key];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classBase, tabIndex: -1, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "data-icon": "draggable" }),
+    value
+  ] });
+};
+vuuUtils.registerComponent("search-cell", SearchCell, "cell-renderer", {
+  serverDataType: "private"
+});
+
+exports.SearchCell = SearchCell;
+//# sourceMappingURL=SearchCell.js.map

package/cjs/instrument-search/SearchCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchCell.js","sources":["../../src/instrument-search/SearchCell.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\n\nimport searchCellCss from \"./SearchCell.css\";\n\nconst classBase = \"vuuSearchCell\";\n\n// export to avoid tree shaking, component is not consumed directly\nexport const SearchCell = ({\n  column,\n  columnMap,\n  row,\n}: TableCellRendererProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-search-cell\",\n    css: searchCellCss,\n    window: targetWindow,\n  });\n\n  //TODO what about click handling\n\n  const key = columnMap[column.name];\n  const value = row[key];\n\n  return (\n    <div className={classBase} tabIndex={-1}>\n      <span data-icon=\"draggable\" />\n      {value}\n    </div>\n  );\n};\n\nregisterComponent(\"search-cell\", SearchCell, \"cell-renderer\", {\n  serverDataType: \"private\",\n});\n"],"names":["useWindow","useComponentCssInjection","searchCellCss","jsxs","jsx","registerComponent"],"mappings":";;;;;;;;AAOA,MAAM,SAAY,GAAA,eAAA,CAAA;AAGX,MAAM,aAAa,CAAC;AAAA,EACzB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAID,EAAM,MAAA,GAAA,GAAM,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AACjC,EAAM,MAAA,KAAA,GAAQ,IAAI,GAAG,CAAA,CAAA;AAErB,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,SAAA,EAAW,UAAU,CACnC,CAAA,EAAA,QAAA,EAAA;AAAA,oBAACC,cAAA,CAAA,MAAA,EAAA,EAAK,aAAU,WAAY,EAAA,CAAA;AAAA,IAC3B,KAAA;AAAA,GACH,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEAC,0BAAkB,CAAA,aAAA,EAAe,YAAY,eAAiB,EAAA;AAAA,EAC5D,cAAgB,EAAA,SAAA;AAClB,CAAC,CAAA;;;;"}

package/cjs/instrument-search/useInstrumentSearch.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var React = require('react');
+
+const useInstrumentSearch = ({
+  dataSource,
+  searchColumns = ["description"]
+}) => {
+  const [searchState, setSearchState] = React.useState({ searchText: "", filter: "" });
+  const baseFilterPattern = React.useMemo(
+    // TODO make this contains once server supports it
+    () => searchColumns.map((col) => `${col} starts "__VALUE__"`).join(" or "),
+    [searchColumns]
+  );
+  const handleChange = React.useCallback(
+    (evt) => {
+      const { value } = evt.target;
+      const filter = baseFilterPattern.replaceAll("__VALUE__", value);
+      setSearchState({
+        searchText: value,
+        filter
+      });
+      if (dataSource) {
+        dataSource.filter = {
+          filter
+        };
+      }
+    },
+    [baseFilterPattern, dataSource]
+  );
+  return {
+    dataSource,
+    onChange: handleChange,
+    searchState
+  };
+};
+
+exports.useInstrumentSearch = useInstrumentSearch;
+//# sourceMappingURL=useInstrumentSearch.js.map

package/cjs/instrument-search/useInstrumentSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInstrumentSearch.js","sources":["../../src/instrument-search/useInstrumentSearch.ts"],"sourcesContent":["import { FormEventHandler, useCallback, useMemo, useState } from \"react\";\nimport { InstrumentSearchProps } from \"./InstrumentSearch\";\n\nexport interface InstrumentSearchHookProps\n  extends Pick<InstrumentSearchProps, \"dataSource\" | \"searchColumns\"> {\n  label?: string;\n}\n\nexport const useInstrumentSearch = ({\n  dataSource,\n  searchColumns = [\"description\"],\n}: InstrumentSearchHookProps) => {\n  const [searchState, setSearchState] = useState<{\n    searchText: string;\n    filter: string;\n  }>({ searchText: \"\", filter: \"\" });\n\n  const baseFilterPattern = useMemo(\n    // TODO make this contains once server supports it\n    () => searchColumns.map((col) => `${col} starts \"__VALUE__\"`).join(\" or \"),\n    [searchColumns]\n  );\n\n  const handleChange = useCallback<FormEventHandler>(\n    (evt) => {\n      const { value } = evt.target as HTMLInputElement;\n      const filter = baseFilterPattern.replaceAll(\"__VALUE__\", value);\n      setSearchState({\n        searchText: value,\n        filter,\n      });\n      if (dataSource) {\n        dataSource.filter = {\n          filter,\n        };\n      }\n    },\n    [baseFilterPattern, dataSource]\n  );\n\n  return {\n    dataSource,\n    onChange: handleChange,\n    searchState,\n  };\n};\n"],"names":["useState","useMemo","useCallback"],"mappings":";;;;AAQO,MAAM,sBAAsB,CAAC;AAAA,EAClC,UAAA;AAAA,EACA,aAAA,GAAgB,CAAC,aAAa,CAAA;AAChC,CAAiC,KAAA;AAC/B,EAAM,MAAA,CAAC,WAAa,EAAA,cAAc,CAAI,GAAAA,cAAA,CAGnC,EAAE,UAAY,EAAA,EAAA,EAAI,MAAQ,EAAA,EAAA,EAAI,CAAA,CAAA;AAEjC,EAAA,MAAM,iBAAoB,GAAAC,aAAA;AAAA;AAAA,IAExB,MAAM,aAAc,CAAA,GAAA,CAAI,CAAC,GAAA,KAAQ,GAAG,GAAG,CAAA,mBAAA,CAAqB,CAAE,CAAA,IAAA,CAAK,MAAM,CAAA;AAAA,IACzE,CAAC,aAAa,CAAA;AAAA,GAChB,CAAA;AAEA,EAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,IACnB,CAAC,GAAQ,KAAA;AACP,MAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA,CAAA;AACtB,MAAA,MAAM,MAAS,GAAA,iBAAA,CAAkB,UAAW,CAAA,WAAA,EAAa,KAAK,CAAA,CAAA;AAC9D,MAAe,cAAA,CAAA;AAAA,QACb,UAAY,EAAA,KAAA;AAAA,QACZ,MAAA;AAAA,OACD,CAAA,CAAA;AACD,MAAA,IAAI,UAAY,EAAA;AACd,QAAA,UAAA,CAAW,MAAS,GAAA;AAAA,UAClB,MAAA;AAAA,SACF,CAAA;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,mBAAmB,UAAU,CAAA;AAAA,GAChC,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,UAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,WAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/cjs/list/CheckboxIcon.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var checkboxIconCss = ".vuuCheckboxIcon {\n  --vuu-icon-size: 12px;\n  --vuu-icon-left: -1px;\n  --vuu-icon-top: -1px;\n  --vuu-icon-svg: var(--vuu-svg-tick);\n  background: var(--salt-editable-primary-background);\n  border-style: solid;\n  border-color: var(\n    --vuuCheckboxIcon-borderColor,\n    var(--salt-selectable-borderColor)\n  );\n  border-radius: var(--vuuCheckboxIcon-borderRadius, 3px);\n  border-width: 1px;\n  display: inline-block;\n  height: var(--vuuCheckboxIcon-size, 12px);\n  position: relative;\n  width: var(--vuuCheckboxIcon-size, 12px);\n}\n\n.vuuCheckboxIcon-checked-enabled {\n  background-color: var(\n    --vuuCheckboxIcon-background-checked-enabled,\n    var(--vuu-color-purple-10)\n  );\n  border-color: var(\n    --vuuCheckboxIcon-borderColor-checked-enabled,\n    var(--vuu-color-purple-10)\n  );\n}\n\n.vuuCheckboxIcon-checked-disabled {\n  background-color: var(\n    --vuuCheckboxIcon-background-checked-disabled,\n    var(--vuu-color-gray-35)\n  );\n  border-color: var(\n    --vuuCheckboxIcon-borderColor-checked-disabled,\n    var(--vuu-color-gray-35)\n  );\n}\n\n.vuuCheckboxIcon-checked-enabled::after,\n.vuuCheckboxIcon-checked-disabled::after {\n  content: \"\";\n  background-color: white;\n  left: var(--vuu-icon-left, auto);\n  height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));\n  -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size)\n    var(--vuu-icon-size);\n  mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size)\n    var(--vuu-icon-size);\n  mask-repeat: no-repeat;\n  -webkit-mask-repeat: no-repeat;\n  position: absolute;\n  top: var(--vuu-icon-top, auto);\n  width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));\n}\n\n.vuuCheckboxIcon-checked-disabled::after {\n  background-color: var(\n    --vuuCheckboxIcon-tick-checked-disabled,\n    var(--vuu-color-gray-30)\n  );\n}\n";
+
+module.exports = checkboxIconCss;
+//# sourceMappingURL=CheckboxIcon.css.js.map

package/cjs/list/CheckboxIcon.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxIcon.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/list/CheckboxIcon.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('clsx');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var CheckboxIcon$1 = require('./CheckboxIcon.css.js');
+
+const classBase = "vuuCheckboxIcon";
+const CheckboxIcon = ({
+  checked = false,
+  disabled = false,
+  ...htmlAttributes
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-checkbox-icon",
+    css: CheckboxIcon$1,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ...htmlAttributes,
+      className: cx(classBase, {
+        [`${classBase}-checked-${disabled ? "disabled" : "enabled"}`]: checked
+      })
+    }
+  );
+};
+
+exports.CheckboxIcon = CheckboxIcon;
+//# sourceMappingURL=CheckboxIcon.js.map

package/cjs/list/CheckboxIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxIcon.js","sources":["../../src/list/CheckboxIcon.tsx"],"sourcesContent":["import { HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport checkboxIconCss from \"./CheckboxIcon.css\";\n\nconst classBase = \"vuuCheckboxIcon\";\n\nexport interface CheckboxIconProps extends HTMLAttributes<HTMLSpanElement> {\n  checked?: boolean;\n  disabled?: boolean;\n}\nexport const CheckboxIcon = ({\n  checked = false,\n  disabled = false,\n  ...htmlAttributes\n}: CheckboxIconProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-checkbox-icon\",\n    css: checkboxIconCss,\n    window: targetWindow,\n  });\n\n  return (\n    <span\n      {...htmlAttributes}\n      className={cx(classBase, {\n        [`${classBase}-checked-${disabled ? \"disabled\" : \"enabled\"}`]: checked,\n      })}\n    />\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","checkboxIconCss","jsx"],"mappings":";;;;;;;;AAOA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAMX,MAAM,eAAe,CAAC;AAAA,EAC3B,OAAU,GAAA,KAAA;AAAA,EACV,QAAW,GAAA,KAAA;AAAA,EACX,GAAG,cAAA;AACL,CAAyB,KAAA;AACvB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,GAAG,SAAW,EAAA;AAAA,QACvB,CAAC,GAAG,SAAS,CAAA,SAAA,EAAY,WAAW,UAAa,GAAA,SAAS,EAAE,GAAG,OAAA;AAAA,OAChE,CAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ;;;;"}

package/cjs/list/ChevronIcon.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var chevronIconCss = ".vuuChevronIcon {\n    --vuu-icon-size: 14px;\n    --vuu-icon-left: -1px;\n    --vuu-icon-top: -1px;\n    height: var(--vuuChevronIcon-size, 14px);\n    position: relative;\n    width: var(--vuuChevronIcon-size, 14px);\n    cursor: pointer;\n}\n\n.vuuChevronIcon:after {\n    content: \"\";\n    background-color: #777C94;\n    left: var(--vuu-icon-left, auto);\n    height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));\n    -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n    mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n    mask-repeat: no-repeat;\n    -webkit-mask-repeat: no-repeat;\n    position: absolute;\n    top: var(--vuu-icon-top, auto);\n    width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));\n}\n\n.vuuChevronIcon.up {\n  --vuu-icon-svg: var(--vuu-svg-chevron-up);\n}\n\n.vuuChevronIcon.down {\n  --vuu-icon-svg: var(--vuu-svg-chevron-down);\n}\n\n.vuuChevronIcon.left {\n  --vuu-icon-svg: var(--vuu-svg-chevron-left);\n}\n\n.vuuChevronIcon.right {\n  --vuu-icon-svg: var(--vuu-svg-chevron-right);\n}\n";
+
+module.exports = chevronIconCss;
+//# sourceMappingURL=ChevronIcon.css.js.map

package/cjs/list/ChevronIcon.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChevronIcon.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/list/ChevronIcon.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('clsx');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var ChevronIcon$1 = require('./ChevronIcon.css.js');
+
+const classBase = "vuuChevronIcon";
+const ChevronIcon = (props) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-checron-icon",
+    css: ChevronIcon$1,
+    window: targetWindow
+  });
+  const { direction, ...htmlAttributes } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...htmlAttributes, className: cx(classBase, direction) });
+};
+
+exports.ChevronIcon = ChevronIcon;
+//# sourceMappingURL=ChevronIcon.js.map

package/cjs/list/ChevronIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChevronIcon.js","sources":["../../src/list/ChevronIcon.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes } from \"react\";\n\nimport chevronIconCss from \"./ChevronIcon.css\";\n\nconst classBase = \"vuuChevronIcon\";\n\ntype Direction = \"up\" | \"down\" | \"left\" | \"right\";\n\ninterface ChevronProps extends HTMLAttributes<HTMLSpanElement> {\n  direction: Direction;\n}\n\nexport const ChevronIcon = (props: ChevronProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-checron-icon\",\n    css: chevronIconCss,\n    window: targetWindow,\n  });\n\n  const { direction, ...htmlAttributes } = props;\n  return <span {...htmlAttributes} className={cx(classBase, direction)} />;\n};\n"],"names":["useWindow","useComponentCssInjection","chevronIconCss","jsx"],"mappings":";;;;;;;;AAOA,MAAM,SAAY,GAAA,gBAAA,CAAA;AAQL,MAAA,WAAA,GAAc,CAAC,KAAwB,KAAA;AAClD,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,cAAA,EAAmB,GAAA,KAAA,CAAA;AACzC,EAAO,uBAAAC,cAAA,CAAC,UAAM,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAG,EAAA,CAAA,CAAA;AACxE;;;;"}

package/cjs/list/Highlighter.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var highlighterCss = ".saltHighlighter-highlight {\n  font-weight: var(--salt-text-fontWeight-strong); /* TODO: Check with design */\n}\n";
+
+module.exports = highlighterCss;
+//# sourceMappingURL=Highlighter.css.js.map

package/cjs/list/Highlighter.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Highlighter.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/list/Highlighter.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var escapeRegExp = require('../utils/escapeRegExp.js');
+var Highlighter$1 = require('./Highlighter.css.js');
+
+const withBaseName = core.makePrefixer("saltHighlighter");
+const Highlighter = (props) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-highlighter",
+    css: Highlighter$1,
+    window: targetWindow
+  });
+  const { matchPattern, text = "" } = props;
+  const matchRegex = typeof matchPattern === "string" ? new RegExp(`(${escapeRegExp.escapeRegExp(matchPattern)})`, "gi") : matchPattern;
+  if (matchRegex === void 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: text });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { children: text.split(matchRegex).map(
+    (part, index) => part.match(matchRegex) ? /* @__PURE__ */ jsxRuntime.jsx(
+      "strong",
+      {
+        className: withBaseName("highlight"),
+        children: part
+      },
+      `${index}-${part}`
+    ) : part
+  ) });
+};
+
+exports.Highlighter = Highlighter;
+//# sourceMappingURL=Highlighter.js.map

package/cjs/list/Highlighter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Highlighter.js","sources":["../../src/list/Highlighter.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ReactElement } from \"react\";\nimport { escapeRegExp } from \"../utils\";\n\nimport highlighterCss from \"./Highlighter.css\";\n\nconst withBaseName = makePrefixer(\"saltHighlighter\");\n\nexport interface HighlighterProps {\n  matchPattern?: RegExp | string;\n  text?: string;\n}\n\nexport const Highlighter = (\n  props: HighlighterProps\n): ReactElement<HighlighterProps> => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-highlighter\",\n    css: highlighterCss,\n    window: targetWindow,\n  });\n\n  const { matchPattern, text = \"\" } = props;\n\n  const matchRegex =\n    typeof matchPattern === \"string\"\n      ? new RegExp(`(${escapeRegExp(matchPattern)})`, \"gi\")\n      : matchPattern;\n\n  if (matchRegex === undefined) {\n    return <>{text}</>;\n  }\n  return (\n    <span>\n      {text.split(matchRegex).map((part, index) =>\n        part.match(matchRegex) ? (\n          <strong\n            className={withBaseName(\"highlight\")}\n            key={`${index}-${part}`}\n          >\n            {part}\n          </strong>\n        ) : (\n          part\n        )\n      )}\n    </span>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","highlighterCss","escapeRegExp","jsx"],"mappings":";;;;;;;;;AAQA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA,CAAA;AAOtC,MAAA,WAAA,GAAc,CACzB,KACmC,KAAA;AACnC,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,YAAA,EAAc,IAAO,GAAA,EAAA,EAAO,GAAA,KAAA,CAAA;AAEpC,EAAA,MAAM,UACJ,GAAA,OAAO,YAAiB,KAAA,QAAA,GACpB,IAAI,MAAA,CAAO,CAAI,CAAA,EAAAC,yBAAA,CAAa,YAAY,CAAC,CAAK,CAAA,CAAA,EAAA,IAAI,CAClD,GAAA,YAAA,CAAA;AAEN,EAAA,IAAI,eAAe,KAAW,CAAA,EAAA;AAC5B,IAAA,6DAAU,QAAK,EAAA,IAAA,EAAA,CAAA,CAAA;AAAA,GACjB;AACA,EAAA,uBACGC,cAAA,CAAA,MAAA,EAAA,EACE,QAAK,EAAA,IAAA,CAAA,KAAA,CAAM,UAAU,CAAE,CAAA,GAAA;AAAA,IAAI,CAAC,IAAM,EAAA,KAAA,KACjC,IAAK,CAAA,KAAA,CAAM,UAAU,CACnB,mBAAAA,cAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,QAGlC,QAAA,EAAA,IAAA;AAAA,OAAA;AAAA,MAFI,CAAA,EAAG,KAAK,CAAA,CAAA,EAAI,IAAI,CAAA,CAAA;AAAA,KAKvB,GAAA,IAAA;AAAA,GAGN,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/cjs/list/List.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var listCss = ".vuuList {\n  --list-background: var(--salt-container-primary-background);\n  --list-borderStyle: var(--vuuList-borderStyle,var(--salt-container-borderStyle));\n  --list-borderWidth: var(--salt-size-border);\n  --list-height: auto;\n  --list-item-height: var(--salt-size-stackable);\n  --list-item-gap: 0px;\n  --list-maxHeight: 100%;\n  --vuuDraggable-display: block;\n  --vuuDraggable-spacer-height: 0;\n  --vuuDraggable-spacer-width: 100%;\n  --vuuDraggable-transitionProp: height;\n  --vuuMeasuredContainer-height: var(--computed-list-height);\n\n  background: var(--list-background);\n  height: var(--saltList-height, var(--list-height));\n  max-height: var(--list-maxHeight);\n  outline: none;\n  position: relative;\n  user-select: none;\n  width: var(--saltList-width, auto);\n  padding: 0 1px;\n}\n\n.vuuDraggable-list-item {\n  --vuuList-item-background: var(--salt-selectable-background-hover);\n}\n\n.vuuList-contentSized {\n  box-sizing: content-box;\n}\n\n.vuuList-borderless {\n  --list-borderStyle: none;\n}\n\n/* virtualised list */\n.vuuList-viewport {\n  height: var(--computed-list-height, var(--measured-px-height));\n  overflow: auto;\n}\n\n.vuuListHeader {\n  --saltList-item-background: var(--list-item-header-background);\n  color: var(--list-item-header-color);\n  font-weight: 600;\n}\n\n.vuuListHeader[data-sticky=\"true\"] {\n  --saltList-item-background: var(--list-background);\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.vuuList-collapsible .vuuListItemHeader:after {\n  border-width: var(--checkbox-borderWidth);\n  border-color: var(--checkbox-borderColor);\n  content: var(--list-item-header-twisty-content);\n  -webkit-mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;\n  mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;\n  background: var(--list-item-header-twisty-color);\n  height: 12px;\n  left: var(--list-item-header-twisty-left);\n  right: var(--list-item-header-twisty-right);\n  margin-top: -8px;\n  position: absolute;\n  top: var(--list-item-header-twisty-top);\n  transition: transform 0.3s;\n  width: 12px;\n}\n.vuuListItemHeader[aria-expanded=\"false\"]:after {\n  transform: rotate(-90deg);\n}\n\n/* Selection */\n\n.vuuList-scrollingContentContainer {\n  box-sizing: inherit;\n  position: relative;\n}\n\n.vuuList-virtualized .vuuListItem {\n  line-height: 30px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  will-change: transform;\n}\n.vuuList.saltFocusVisible:after {\n  inset: 2px;\n}\n";
+
+module.exports = listCss;
+//# sourceMappingURL=List.css.js.map

package/cjs/list/List.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}