@vuu-ui/vuu-ui-controls 0.8.97 → 0.8.98

package/cjs/index.js

@@ -22,16 +22,13 @@ var DragDropState = require('./drag-drop/DragDropState.js');
 var useDragDrop = require('./drag-drop/useDragDrop.js');
 var dropTargetUtils = require('./drag-drop/drop-target-utils.js');
 var useGlobalDragDrop = require('./drag-drop/useGlobalDragDrop.js');
-var DatePopup = require('./date-popup/DatePopup.js');
-var DropdownBase = require('./dropdown-base/DropdownBase.js');
-var useDropdownBase = require('./dropdown-base/useDropdownBase.js');
 var useEditableText = require('./editable/useEditableText.js');
 var EditableLabel = require('./editable-label/EditableLabel.js');
 var ExpandoInput = require('./expando-input/ExpandoInput.js');
 var Icon = require('./icon-button/Icon.js');
 var IconButton = require('./icon-button/IconButton.js');
 var TablePicker = require('./instrument-picker/TablePicker.js');
-var InstrumentSearch = require('./instrument-search/InstrumentSearch.js');
+var TableSearch = require('./table-search/TableSearch.js');
 var keyUtils = require('./list/common-hooks/keyUtils.js');
 var useCollapsibleGroups = require('./list/common-hooks/useCollapsibleGroups.js');
 var listDomUtils = require('./list/common-hooks/list-dom-utils.js');
@@ -126,9 +123,6 @@ exports.measureElementSizeAndPosition = dropTargetUtils.measureElementSizeAndPos
 exports.mutateDropTargetsSwitchDropTargetPosition = dropTargetUtils.mutateDropTargetsSwitchDropTargetPosition;
 exports.removeDraggedItem = dropTargetUtils.removeDraggedItem;
 exports.useGlobalDragDrop = useGlobalDragDrop.useGlobalDragDrop;
-exports.DatePopup = DatePopup.DatePopup;
-exports.DropdownBase = DropdownBase.DropdownBase;
-exports.useDropdownBase = useDropdownBase.useDropdownBase;
 exports.WarnCommit = useEditableText.WarnCommit;
 exports.useEditableText = useEditableText.useEditableText;
 exports.EditableLabel = EditableLabel.EditableLabel;
@@ -137,7 +131,7 @@ exports.ExpandoInput = ExpandoInput.ExpandoInput;
 exports.Icon = Icon.Icon;
 exports.IconButton = IconButton.IconButton;
 exports.TablePicker = TablePicker.TablePicker;
-exports.InstrumentSearch = InstrumentSearch.InstrumentSearch;
+exports.TableSearch = TableSearch.TableSearch;
 exports.ArrowDown = keyUtils.ArrowDown;
 exports.ArrowLeft = keyUtils.ArrowLeft;
 exports.ArrowRight = keyUtils.ArrowRight;

package/cjs/index.js.map

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

package/cjs/{instrument-search → table-search}/SearchCell.js

@@ -3,7 +3,6 @@
 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";
@@ -25,9 +24,6 @@ const SearchCell = ({
     value
   ] });
 };
-vuuUtils.registerComponent("search-cell", SearchCell, "cell-renderer", {
-  serverDataType: "private"
-});
 
 exports.SearchCell = SearchCell;
 //# sourceMappingURL=SearchCell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchCell.js","sources":["../../src/table-search/SearchCell.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\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"],"names":["useWindow","useComponentCssInjection","searchCellCss","jsxs","jsx"],"mappings":";;;;;;;AAMA,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;;;;"}

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

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

package/cjs/table-search/TableSearch.css.js.map

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

package/cjs/{instrument-search/InstrumentSearch.js → table-search/TableSearch.js}

@@ -9,13 +9,10 @@ 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');
+var useTableSearch = require('./useTableSearch.js');
+var TableSearch$1 = require('./TableSearch.css.js');
 
-const classBase = "vuuInstrumentSearch";
-if (typeof SearchCell.SearchCell !== "function") {
-  console.warn("Instrument Search: SearchCell module not loaded ");
-}
+const classBase = "vuuTableSearch";
 const defaultTableConfig = {
   columns: [
     { name: "bbg", hidden: true },
@@ -33,7 +30,7 @@ const defaultTableConfig = {
   rowSeparators: true
 };
 const searchIcon = /* @__PURE__ */ jsxRuntime.jsx("span", { "data-icon": "search" });
-const InstrumentSearch = ({
+const TableSearch = ({
   TableProps: TableProps2,
   autoFocus = false,
   className,
@@ -44,11 +41,11 @@ const InstrumentSearch = ({
 }) => {
   const targetWindow = window.useWindow();
   styles.useComponentCssInjection({
-    testId: "vuu-instrument-search",
-    css: InstrumentSearch$1,
+    testId: "vuu-table-search",
+    css: TableSearch$1,
     window: targetWindow
   });
-  const { dataSource, onChange, searchState } = useInstrumentSearch.useInstrumentSearch({
+  const { dataSource, onChange, searchState } = useTableSearch.useTableSearch({
     dataSource: dataSourceProp,
     searchColumns
   });
@@ -90,7 +87,10 @@ const InstrumentSearch = ({
     ) : null
   ] });
 };
-vuuUtils.registerComponent?.("InstrumentSearch", InstrumentSearch, "view");
+vuuUtils.registerComponent("search-cell", SearchCell.SearchCell, "cell-renderer", {
+  serverDataType: "private"
+});
+vuuUtils.registerComponent?.("TableSearch", TableSearch, "view");
 
-exports.InstrumentSearch = InstrumentSearch;
-//# sourceMappingURL=InstrumentSearch.js.map
+exports.TableSearch = TableSearch;
+//# sourceMappingURL=TableSearch.js.map

package/cjs/table-search/TableSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSearch.js","sources":["../../src/table-search/TableSearch.tsx"],"sourcesContent":["import { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport {\n  Table,\n  TableProps,\n  useControlledTableNavigation,\n} from \"@vuu-ui/vuu-table\";\nimport { TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\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 { useTableSearch } from \"./useTableSearch\";\n\nimport instrumentSearchCss from \"./TableSearch.css\";\n\nconst classBase = \"vuuTableSearch\";\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 TableSearchProps 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 TableSearch = ({\n  TableProps,\n  autoFocus = false,\n  className,\n  dataSource: dataSourceProp,\n  placeHolder,\n  searchColumns,\n  ...htmlAttributes\n}: TableSearchProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-search\",\n    css: instrumentSearchCss,\n    window: targetWindow,\n  });\n\n  const { dataSource, onChange, searchState } = useTableSearch({\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(\"search-cell\", SearchCell, \"cell-renderer\", {\n  serverDataType: \"private\",\n});\n\nregisterComponent?.(\"TableSearch\", TableSearch, \"view\");\n"],"names":["jsx","TableProps","useWindow","useComponentCssInjection","instrumentSearchCss","useTableSearch","useControlledTableNavigation","useCallback","jsxs","Input","Table","registerComponent","SearchCell"],"mappings":"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"}

package/cjs/{instrument-search/useInstrumentSearch.js → table-search/useTableSearch.js}

@@ -2,9 +2,9 @@
 
 var React = require('react');
 
-const useInstrumentSearch = ({
+const useTableSearch = ({
   dataSource,
-  searchColumns = ["description"]
+  searchColumns
 }) => {
   const [searchState, setSearchState] = React.useState({ searchText: "", filter: "" });
   const baseFilterPattern = React.useMemo(
@@ -35,5 +35,5 @@ const useInstrumentSearch = ({
   };
 };
 
-exports.useInstrumentSearch = useInstrumentSearch;
-//# sourceMappingURL=useInstrumentSearch.js.map
+exports.useTableSearch = useTableSearch;
+//# sourceMappingURL=useTableSearch.js.map

package/cjs/table-search/useTableSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableSearch.js","sources":["../../src/table-search/useTableSearch.ts"],"sourcesContent":["import { FormEventHandler, useCallback, useMemo, useState } from \"react\";\nimport { TableSearchProps } from \"./TableSearch\";\n\nexport interface TableSearchHookProps\n  extends Pick<TableSearchProps, \"dataSource\" | \"searchColumns\"> {\n  label?: string;\n}\n\nexport const useTableSearch = ({\n  dataSource,\n  searchColumns,\n}: TableSearchHookProps) => {\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,iBAAiB,CAAC;AAAA,EAC7B,UAAA;AAAA,EACA,aAAA;AACF,CAA4B,KAAA;AAC1B,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/esm/index.js

@@ -20,16 +20,13 @@ export { DragDropState } from './drag-drop/DragDropState.js';
 export { useDragDrop } from './drag-drop/useDragDrop.js';
 export { NOT_HIDDEN, NOT_OVERFLOWED, cloneElement, constrainRect, dimensions, dropTargetsDebugString, getIndexOfDraggedItem, getItemById, getItemParentContainer, getNextDropTarget, getScrollableContainer, isContainerScrollable, measureDropTargets, measureElementSizeAndPosition, mutateDropTargetsSwitchDropTargetPosition, removeDraggedItem } from './drag-drop/drop-target-utils.js';
 export { useGlobalDragDrop } from './drag-drop/useGlobalDragDrop.js';
-export { DatePopup } from './date-popup/DatePopup.js';
-export { DropdownBase } from './dropdown-base/DropdownBase.js';
-export { useDropdownBase } from './dropdown-base/useDropdownBase.js';
 export { WarnCommit, useEditableText } from './editable/useEditableText.js';
 export { EditableLabel, NullEditAPI } from './editable-label/EditableLabel.js';
 export { ExpandoInput } from './expando-input/ExpandoInput.js';
 export { Icon } from './icon-button/Icon.js';
 export { IconButton } from './icon-button/IconButton.js';
 export { TablePicker } from './instrument-picker/TablePicker.js';
-export { InstrumentSearch } from './instrument-search/InstrumentSearch.js';
+export { TableSearch } from './table-search/TableSearch.js';
 export { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Escape, Home, PageDown, PageUp, Space, isCharacterKey, isNavigationKey } from './list/common-hooks/keyUtils.js';
 export { useCollapsibleGroups } from './list/common-hooks/useCollapsibleGroups.js';
 export { closestListItemId, closestListItemIndex, listItemElement, listItemId, listItemIndex } from './list/common-hooks/list-dom-utils.js';

package/esm/index.js.map

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

package/esm/{instrument-search → table-search}/SearchCell.js

@@ -1,7 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
-import { registerComponent } from '@vuu-ui/vuu-utils';
 import searchCellCss from './SearchCell.css.js';
 
 const classBase = "vuuSearchCell";
@@ -23,9 +22,6 @@ const SearchCell = ({
     value
   ] });
 };
-registerComponent("search-cell", SearchCell, "cell-renderer", {
-  serverDataType: "private"
-});
 
 export { SearchCell };
 //# sourceMappingURL=SearchCell.js.map

package/esm/table-search/SearchCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchCell.js","sources":["../../src/table-search/SearchCell.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\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"],"names":[],"mappings":";;;;;AAMA,MAAM,SAAY,GAAA,eAAA,CAAA;AAGX,MAAM,aAAa,CAAC;AAAA,EACzB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAA,aAAA;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,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,SAAA,EAAW,UAAU,CACnC,CAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,MAAA,EAAA,EAAK,aAAU,WAAY,EAAA,CAAA;AAAA,IAC3B,KAAA;AAAA,GACH,EAAA,CAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,4 @@
+var instrumentSearchCss = ".vuuTableSearch {\n  height: 100%;\n  padding: var(--vuuTableSearch-padding, 12px);\n  display: flex;\n  flex-direction: column;\n}\n\n.vuuTableSearch-inputField {\n  --vuu-icon-size: 16px;\n  flex: 0 0 40px;\n  padding: 0 12px;\n}\n.vuuTableSearch-list {\n  --vuuMeasuredContainer-flex: 1 1 1px;\n  background-color: var(--salt-container-primary-background);\n  flex: 1 1 auto;\n}\n\n.vuuTableSearch .vuuTableCell {\n  padding: 0;\n}\n";
+
+export { instrumentSearchCss as default };
+//# sourceMappingURL=TableSearch.css.js.map

package/esm/table-search/TableSearch.css.js.map

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

package/esm/{instrument-search/InstrumentSearch.js → table-search/TableSearch.js}

@@ -7,13 +7,10 @@ import { useWindow } from '@salt-ds/window';
 import cx from 'clsx';
 import { useCallback } from 'react';
 import { SearchCell } from './SearchCell.js';
-import { useInstrumentSearch } from './useInstrumentSearch.js';
-import instrumentSearchCss from './InstrumentSearch.css.js';
+import { useTableSearch } from './useTableSearch.js';
+import instrumentSearchCss from './TableSearch.css.js';
 
-const classBase = "vuuInstrumentSearch";
-if (typeof SearchCell !== "function") {
-  console.warn("Instrument Search: SearchCell module not loaded ");
-}
+const classBase = "vuuTableSearch";
 const defaultTableConfig = {
   columns: [
     { name: "bbg", hidden: true },
@@ -31,7 +28,7 @@ const defaultTableConfig = {
   rowSeparators: true
 };
 const searchIcon = /* @__PURE__ */ jsx("span", { "data-icon": "search" });
-const InstrumentSearch = ({
+const TableSearch = ({
   TableProps: TableProps2,
   autoFocus = false,
   className,
@@ -42,11 +39,11 @@ const InstrumentSearch = ({
 }) => {
   const targetWindow = useWindow();
   useComponentCssInjection({
-    testId: "vuu-instrument-search",
+    testId: "vuu-table-search",
     css: instrumentSearchCss,
     window: targetWindow
   });
-  const { dataSource, onChange, searchState } = useInstrumentSearch({
+  const { dataSource, onChange, searchState } = useTableSearch({
     dataSource: dataSourceProp,
     searchColumns
   });
@@ -88,7 +85,10 @@ const InstrumentSearch = ({
     ) : null
   ] });
 };
-registerComponent?.("InstrumentSearch", InstrumentSearch, "view");
+registerComponent("search-cell", SearchCell, "cell-renderer", {
+  serverDataType: "private"
+});
+registerComponent?.("TableSearch", TableSearch, "view");
 
-export { InstrumentSearch };
-//# sourceMappingURL=InstrumentSearch.js.map
+export { TableSearch };
+//# sourceMappingURL=TableSearch.js.map

package/esm/table-search/TableSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSearch.js","sources":["../../src/table-search/TableSearch.tsx"],"sourcesContent":["import { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport {\n  Table,\n  TableProps,\n  useControlledTableNavigation,\n} from \"@vuu-ui/vuu-table\";\nimport { TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\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 { useTableSearch } from \"./useTableSearch\";\n\nimport instrumentSearchCss from \"./TableSearch.css\";\n\nconst classBase = \"vuuTableSearch\";\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 TableSearchProps 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 TableSearch = ({\n  TableProps,\n  autoFocus = false,\n  className,\n  dataSource: dataSourceProp,\n  placeHolder,\n  searchColumns,\n  ...htmlAttributes\n}: TableSearchProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-search\",\n    css: instrumentSearchCss,\n    window: targetWindow,\n  });\n\n  const { dataSource, onChange, searchState } = useTableSearch({\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(\"search-cell\", SearchCell, \"cell-renderer\", {\n  serverDataType: \"private\",\n});\n\nregisterComponent?.(\"TableSearch\", TableSearch, \"view\");\n"],"names":["TableProps"],"mappings":"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"}

package/esm/{instrument-search/useInstrumentSearch.js → table-search/useTableSearch.js}

@@ -1,8 +1,8 @@
 import { useState, useMemo, useCallback } from 'react';
 
-const useInstrumentSearch = ({
+const useTableSearch = ({
   dataSource,
-  searchColumns = ["description"]
+  searchColumns
 }) => {
   const [searchState, setSearchState] = useState({ searchText: "", filter: "" });
   const baseFilterPattern = useMemo(
@@ -33,5 +33,5 @@ const useInstrumentSearch = ({
   };
 };
 
-export { useInstrumentSearch };
-//# sourceMappingURL=useInstrumentSearch.js.map
+export { useTableSearch };
+//# sourceMappingURL=useTableSearch.js.map

package/esm/table-search/useTableSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableSearch.js","sources":["../../src/table-search/useTableSearch.ts"],"sourcesContent":["import { FormEventHandler, useCallback, useMemo, useState } from \"react\";\nimport { TableSearchProps } from \"./TableSearch\";\n\nexport interface TableSearchHookProps\n  extends Pick<TableSearchProps, \"dataSource\" | \"searchColumns\"> {\n  label?: string;\n}\n\nexport const useTableSearch = ({\n  dataSource,\n  searchColumns,\n}: TableSearchHookProps) => {\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":[],"mappings":";;AAQO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,UAAA;AAAA,EACA,aAAA;AACF,CAA4B,KAAA;AAC1B,EAAM,MAAA,CAAC,WAAa,EAAA,cAAc,CAAI,GAAA,QAAA,CAGnC,EAAE,UAAY,EAAA,EAAA,EAAI,MAAQ,EAAA,EAAA,EAAI,CAAA,CAAA;AAEjC,EAAA,MAAM,iBAAoB,GAAA,OAAA;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,GAAA,WAAA;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/package.json

@@ -1,17 +1,17 @@
 {
-  "version": "0.8.97",
+  "version": "0.8.98",
   "description": "VUU UI Controls",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "0.8.97",
-    "@vuu-ui/vuu-table-types": "0.8.97"
+    "@vuu-ui/vuu-data-types": "0.8.98",
+    "@vuu-ui/vuu-table-types": "0.8.98"
   },
   "dependencies": {
-    "@vuu-ui/vuu-layout": "0.8.97",
-    "@vuu-ui/vuu-popups": "0.8.97",
-    "@vuu-ui/vuu-table": "0.8.97",
-    "@vuu-ui/vuu-utils": "0.8.97",
+    "@vuu-ui/vuu-layout": "0.8.98",
+    "@vuu-ui/vuu-popups": "0.8.98",
+    "@vuu-ui/vuu-table": "0.8.98",
+    "@vuu-ui/vuu-utils": "0.8.98",
     "@floating-ui/react": "^0.26.5",
     "@salt-ds/core": "1.34.0",
     "@salt-ds/icons": "1.12.1",

package/types/index.d.ts

@@ -5,15 +5,13 @@ export * from "./cycle-state-button";
 export * from "./date-input";
 export * from "./date-picker";
 export * from "./drag-drop";
-export * from "./date-popup";
 export * from "./drag-drop";
-export * from "./dropdown-base";
 export * from "./editable";
 export * from "./editable-label";
 export * from "./expando-input";
 export * from "./icon-button";
 export * from "./instrument-picker";
-export * from "./instrument-search";
+export * from "./table-search";
 export * from "./list";
 export * from "./measured-container";
 export * from "./overflow-container";

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

@@ -0,0 +1,11 @@
+import { DataSource } from "@vuu-ui/vuu-data-types";
+import { TableProps } from "@vuu-ui/vuu-table";
+import { HTMLAttributes } from "react";
+export interface TableSearchProps extends HTMLAttributes<HTMLDivElement> {
+    TableProps?: Partial<TableProps>;
+    autoFocus?: boolean;
+    dataSource: DataSource;
+    placeHolder?: string;
+    searchColumns: string[];
+}
+export declare const TableSearch: ({ TableProps, autoFocus, className, dataSource: dataSourceProp, placeHolder, searchColumns, ...htmlAttributes }: TableSearchProps) => JSX.Element;

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

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

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

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

package/types/utils/deprecated-types.d.ts

@@ -0,0 +1,2 @@
+export type CloseReason = "blur" | "Escape" | "click-away" | "select" | "script" | "Tab" | "toggle";
+export type OpenChangeHandler = <T extends boolean>(open: T, closeReason?: T extends false ? CloseReason : never) => void;

package/types/utils/index.d.ts

@@ -2,3 +2,4 @@ export * from "./escapeRegExp";
 export * from "./isOverflowElement";
 export * from "./isPlainObject";
 export * from "./forwardCallbackProps";
+export * from "./deprecated-types";

package/cjs/date-popup/DatePopup.js

@@ -1,88 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var date = require('@internationalized/date');
-var core = require('@salt-ds/core');
-var cx = require('clsx');
-var React = require('react');
-var Calendar = require('../calendar/Calendar.js');
-require('../calendar/internal/CalendarContext.js');
-require('../calendar/internal/utils.js');
-require('../calendar/useSelection.js');
-var DropdownBase = require('../dropdown-base/DropdownBase.js');
-require('../common-hooks/collectionProvider.js');
-require('../common-hooks/use-resize-observer.js');
-require('@vuu-ui/vuu-utils');
-require('@salt-ds/styles');
-require('@salt-ds/window');
-var IconButton = require('../icon-button/IconButton.js');
-var useDatePopup = require('./useDatePopup.js');
-
-const classBase = "vuuDatePopup";
-const tz = date.getLocalTimeZone();
-const today = date.today(tz);
-const DatePopup = React.forwardRef(
-  function DatePopup2({
-    selectedDate,
-    onChange,
-    onPopupClose,
-    onPopupOpen,
-    selectionVariant,
-    "data-embedded": dataEmbedded,
-    ...htmlAttributes
-  }, forwardedRef) {
-    const {
-      calendarRef,
-      date,
-      isOpen,
-      onSelectedDateChange,
-      onVisibleMonthChange,
-      handleOpenChange,
-      triggererRef,
-      visibleMonth
-    } = useDatePopup.useDatePopup({
-      onChange,
-      onPopupClose,
-      onPopupOpen,
-      selectedDate: selectedDate || today,
-      selectionVariant
-    });
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      DropdownBase.DropdownBase,
-      {
-        ...htmlAttributes,
-        className: classBase,
-        isOpen,
-        placement: "below",
-        onOpenChange: handleOpenChange,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            IconButton.IconButton,
-            {
-              "data-embedded": dataEmbedded,
-              icon: "date",
-              ref: core.useForkRef(forwardedRef, triggererRef),
-              variant: "secondary",
-              className: cx({ "saltButton-active": isOpen })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Calendar.Calendar,
-            {
-              visibleMonth,
-              ref: calendarRef,
-              selectedDate: date,
-              selectionVariant: "default",
-              onSelectedDateChange,
-              onVisibleMonthChange,
-              className: `${classBase}-calendar`
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-
-exports.DatePopup = DatePopup;
-//# sourceMappingURL=DatePopup.js.map

package/cjs/date-popup/DatePopup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DatePopup.js","sources":["../../src/date-popup/DatePopup.tsx"],"sourcesContent":["import {\n  DateValue,\n  getLocalTimeZone,\n  today as getTodayDate,\n} from \"@internationalized/date\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { Calendar, CalendarProps } from \"../calendar\";\nimport { DropdownBase, DropdownCloseHandler } from \"../dropdown-base\";\nimport { IconButton } from \"../icon-button\";\nimport { useDatePopup } from \"./useDatePopup\";\n\nconst classBase = \"vuuDatePopup\";\n\nexport interface DatePopupProps\n  extends Pick<CalendarProps, \"selectionVariant\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"onKeyDown\"> {\n  \"data-embedded\"?: boolean;\n  selectedDate?: DateValue;\n  onPopupClose?: DropdownCloseHandler;\n  onPopupOpen?: () => void;\n  onChange: (date: DateValue) => void;\n}\n\nconst tz = getLocalTimeZone();\nconst today = getTodayDate(tz);\n\nexport const DatePopup = forwardRef<HTMLButtonElement, DatePopupProps>(\n  function DatePopup(\n    {\n      selectedDate,\n      onChange,\n      onPopupClose,\n      onPopupOpen,\n      selectionVariant,\n      \"data-embedded\": dataEmbedded,\n      ...htmlAttributes\n    },\n    forwardedRef\n  ) {\n    const {\n      calendarRef,\n      date,\n      isOpen,\n      onSelectedDateChange,\n      onVisibleMonthChange,\n      handleOpenChange,\n      triggererRef,\n      visibleMonth,\n    } = useDatePopup({\n      onChange,\n      onPopupClose,\n      onPopupOpen,\n      selectedDate: selectedDate || today,\n      selectionVariant,\n    });\n\n    return (\n      <DropdownBase\n        {...htmlAttributes}\n        className={classBase}\n        isOpen={isOpen}\n        placement=\"below\"\n        onOpenChange={handleOpenChange}\n      >\n        <IconButton\n          data-embedded={dataEmbedded}\n          icon=\"date\"\n          ref={useForkRef(forwardedRef, triggererRef)}\n          variant=\"secondary\"\n          className={cx({ \"saltButton-active\": isOpen })}\n        />\n        <Calendar\n          visibleMonth={visibleMonth}\n          ref={calendarRef}\n          selectedDate={date}\n          selectionVariant=\"default\"\n          onSelectedDateChange={onSelectedDateChange}\n          onVisibleMonthChange={onVisibleMonthChange}\n          className={`${classBase}-calendar`}\n        />\n      </DropdownBase>\n    );\n  }\n);\n"],"names":["getLocalTimeZone","getTodayDate","forwardRef","DatePopup","useDatePopup","jsxs","DropdownBase","jsx","IconButton","useForkRef","Calendar"],"mappings":";;;;;;;;;;;;;;;;;;;;AAaA,MAAM,SAAY,GAAA,cAAA,CAAA;AAYlB,MAAM,KAAKA,qBAAiB,EAAA,CAAA;AAC5B,MAAM,KAAA,GAAQC,WAAa,EAAE,CAAA,CAAA;AAEtB,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UACP,CAAA;AAAA,IACE,YAAA;AAAA,IACA,QAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,gBAAA;AAAA,IACA,eAAiB,EAAA,YAAA;AAAA,IACjB,GAAG,cAAA;AAAA,KAEL,YACA,EAAA;AACA,IAAM,MAAA;AAAA,MACJ,WAAA;AAAA,MACA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,oBAAA;AAAA,MACA,oBAAA;AAAA,MACA,gBAAA;AAAA,MACA,YAAA;AAAA,MACA,YAAA;AAAA,QACEC,yBAAa,CAAA;AAAA,MACf,QAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,MACA,cAAc,YAAgB,IAAA,KAAA;AAAA,MAC9B,gBAAA;AAAA,KACD,CAAA,CAAA;AAED,IACE,uBAAAC,eAAA;AAAA,MAACC,yBAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACJ,SAAW,EAAA,SAAA;AAAA,QACX,MAAA;AAAA,QACA,SAAU,EAAA,OAAA;AAAA,QACV,YAAc,EAAA,gBAAA;AAAA,QAEd,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAACC,qBAAA;AAAA,YAAA;AAAA,cACC,eAAe,EAAA,YAAA;AAAA,cACf,IAAK,EAAA,MAAA;AAAA,cACL,GAAA,EAAKC,eAAW,CAAA,YAAA,EAAc,YAAY,CAAA;AAAA,cAC1C,OAAQ,EAAA,WAAA;AAAA,cACR,SAAW,EAAA,EAAA,CAAG,EAAE,mBAAA,EAAqB,QAAQ,CAAA;AAAA,aAAA;AAAA,WAC/C;AAAA,0BACAF,cAAA;AAAA,YAACG,iBAAA;AAAA,YAAA;AAAA,cACC,YAAA;AAAA,cACA,GAAK,EAAA,WAAA;AAAA,cACL,YAAc,EAAA,IAAA;AAAA,cACd,gBAAiB,EAAA,SAAA;AAAA,cACjB,oBAAA;AAAA,cACA,oBAAA;AAAA,cACA,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA;AAAA,aAAA;AAAA,WACzB;AAAA,SAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF;;;;"}

package/cjs/date-popup/useDatePopup.js

@@ -1,77 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-const SELECTED_DAY = ".saltCalendarDay-selected:not(.saltCalendarDay-outOfRange)";
-const useDatePopup = ({
-  onChange,
-  onPopupClose,
-  onPopupOpen,
-  selectedDate
-}) => {
-  const [date, setDate] = React.useState(selectedDate);
-  const [, forceUpdate] = React.useState({});
-  const [isOpen, setIsOpen] = React.useState(false);
-  const triggererRef = React.useRef(null);
-  const calendarRef = React.useRef(null);
-  const visibleMonthRef = React.useRef(selectedDate);
-  const setVisibleMonth = React.useMemo(() => {
-    const setValue = (v) => {
-      if (v.toString() !== visibleMonthRef.current.toString()) {
-        visibleMonthRef.current = v;
-        forceUpdate({});
-      }
-    };
-    setValue(selectedDate);
-    return setValue;
-  }, [selectedDate]);
-  const handleOpenChange = React.useCallback(
-    (open, reason) => {
-      setIsOpen(open);
-      if (open) {
-        onPopupOpen?.();
-        requestAnimationFrame(() => {
-          const el = calendarRef.current?.querySelector(
-            SELECTED_DAY
-          );
-          el?.focus();
-        });
-      } else {
-        if (reason !== "Tab") {
-          triggererRef.current?.focus();
-        }
-        onPopupClose?.(reason);
-      }
-    },
-    [onPopupClose, onPopupOpen]
-  );
-  const handleDateSelection = React.useCallback(
-    (e, date2) => {
-      setDate(date2);
-      console.log(date2.toString());
-      visibleMonthRef.current = date2;
-      handleOpenChange(false, "select");
-      onChange(date2);
-    },
-    [handleOpenChange, onChange]
-  );
-  const handleVisibleMonthChange = React.useCallback(
-    (e, date2) => {
-      setVisibleMonth(date2);
-    },
-    [setVisibleMonth]
-  );
-  return {
-    calendarRef,
-    date,
-    handleOpenChange,
-    isOpen,
-    onSelectedDateChange: handleDateSelection,
-    onVisibleMonthChange: handleVisibleMonthChange,
-    triggererRef,
-    visibleMonth: visibleMonthRef.current
-  };
-};
-
-exports.useDatePopup = useDatePopup;
-//# sourceMappingURL=useDatePopup.js.map

package/cjs/date-popup/useDatePopup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDatePopup.js","sources":["../../src/date-popup/useDatePopup.ts"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from \"react\";\nimport { OpenChangeHandler } from \"../dropdown-base\";\nimport { DateValue } from \"@internationalized/date\";\nimport { DatePopupProps } from \"./DatePopup\";\n\nconst SELECTED_DAY =\n  \".saltCalendarDay-selected:not(.saltCalendarDay-outOfRange)\";\n\ntype WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };\n\nexport interface DatePopupHookProps\n  extends Pick<DatePopupProps, \"onPopupClose\" | \"onPopupOpen\">,\n    WithRequired<DatePopupProps, \"onChange\" | \"selectedDate\"> {}\n\nexport const useDatePopup = ({\n  onChange,\n  onPopupClose,\n  onPopupOpen,\n  selectedDate,\n}: // selectionVariant,\nDatePopupHookProps) => {\n  const [date, setDate] = useState<DateValue>(selectedDate);\n  const [, forceUpdate] = useState({});\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const triggererRef = useRef<HTMLButtonElement>(null);\n  const calendarRef = useRef<HTMLDivElement>(null);\n\n  const visibleMonthRef = useRef<DateValue>(selectedDate);\n  const setVisibleMonth = useMemo(() => {\n    const setValue = (v: DateValue) => {\n      if (v.toString() !== visibleMonthRef.current.toString()) {\n        visibleMonthRef.current = v;\n        forceUpdate({});\n      }\n    };\n    setValue(selectedDate);\n    return setValue;\n  }, [selectedDate]);\n\n  const handleOpenChange = useCallback<OpenChangeHandler>(\n    (open, reason) => {\n      setIsOpen(open);\n      if (open) {\n        onPopupOpen?.();\n        requestAnimationFrame(() => {\n          const el = calendarRef.current?.querySelector(\n            SELECTED_DAY\n          ) as HTMLElement;\n          el?.focus();\n        });\n      } else {\n        if (reason !== \"Tab\") {\n          triggererRef.current?.focus();\n        }\n        onPopupClose?.(reason);\n      }\n    },\n    [onPopupClose, onPopupOpen]\n  );\n\n  const handleDateSelection = useCallback(\n    (e, date) => {\n      setDate(date);\n      console.log(date.toString());\n      visibleMonthRef.current = date;\n      handleOpenChange(false, \"select\");\n      onChange(date);\n    },\n    [handleOpenChange, onChange]\n  );\n\n  const handleVisibleMonthChange = useCallback(\n    (e, date) => {\n      setVisibleMonth(date);\n    },\n    [setVisibleMonth]\n  );\n\n  return {\n    calendarRef,\n    date,\n    handleOpenChange: handleOpenChange,\n    isOpen,\n    onSelectedDateChange: handleDateSelection,\n    onVisibleMonthChange: handleVisibleMonthChange,\n    triggererRef,\n    visibleMonth: visibleMonthRef.current,\n  };\n};\n"],"names":["useState","useRef","useMemo","useCallback","date"],"mappings":"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"}

package/cjs/dropdown-base/DropdownBase.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var dropdownBaseCss = ".vuuDropdown {\n  --saltIcon-margin: 2px 0 0 8px;\n  --saltButton-height: var(--vuuDropdown-height);\n  --saltButton-width : var(--vuuDropdown-width);\n\n  line-height: 0;\n  position: relative;\n\n}\n\n.vuuDropdownButton.saltButton-secondary {\n  --saltButton-background: var(--salt-editable-background);\n  --saltButton-color: var(--salt-editable-foreground);\n  --saltButton-borderStyle: solid;\n  --saltButton-borderColor: var(--salt-editable-borderColor);\n  --saltButton-borderWidth: 1px;\n}\n\n.vuuDropdown-fullWidth {\n  width: 100%;\n}\n\n.vuuDropdown-popup {\n  background: var(--salt-container-primary-background);\n  z-index: calc(var(--salt-zIndex-flyover) - 1);\n}\n\n.vuuDropdown-popup-component {\n  --vuuList-borderStyle: none;\n}\n";
-
-module.exports = dropdownBaseCss;
-//# sourceMappingURL=DropdownBase.css.js.map

package/cjs/dropdown-base/DropdownBase.css.js.map

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