@deephaven/jsapi-components 0.70.1-alpha-picker-table.35 → 0.70.1-alpha-ui-picker-formatting.9

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export { default as useDebouncedViewportSearch } from './useDebouncedViewportSea
 export * from './useDebouncedViewportSelectionFilter';
 export * from './useFilterConditionFactories';
 export * from './useFilteredItemsWithDefaultValue';
+export * from './useFormatter';
 export * from './useGetItemIndexByValue';
 export * from './useGetItemPosition';
 export { default as useInitializeViewportData } from './useInitializeViewportData';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACnF,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AACrF,cAAc,uCAAuC,CAAC;AACtD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,oCAAoC,CAAC;AACnD,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACnF,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AACzF,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,YAAY,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAC7E,YAAY,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC/D,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACnF,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AACrF,cAAc,uCAAuC,CAAC;AACtD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,oCAAoC,CAAC;AACnD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACnF,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AACzF,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,YAAY,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAC7E,YAAY,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC/D,cAAc,qBAAqB,CAAC"}

package/dist/index.js

@@ -11,6 +11,7 @@ export { default as useDebouncedViewportSearch } from "./useDebouncedViewportSea
 export * from "./useDebouncedViewportSelectionFilter.js";
 export * from "./useFilterConditionFactories.js";
 export * from "./useFilteredItemsWithDefaultValue.js";
+export * from "./useFormatter.js";
 export * from "./useGetItemIndexByValue.js";
 export * from "./useGetItemPosition.js";
 export { default as useInitializeViewportData } from "./useInitializeViewportData.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","TableInput","useBroadcastChannel","useBroadcastLoginListener","useDebouncedViewportSearch","useInitializeViewportData","useSelectDistinctTable","useSetPaddedViewportCallback","useTable","useTableColumn","useTableListener","useTableClose","useTableSize","useTableUtils","useViewportData"],"sources":["../src/index.ts"],"sourcesContent":["export * from './HookTestUtils';\nexport { default as TableInput } from './TableInput';\nexport * from './RefreshTokenBootstrap';\nexport * from './RefreshTokenUtils';\nexport * from './spectrum';\nexport * from './TableDropdown';\nexport { default as useBroadcastChannel } from './useBroadcastChannel';\nexport { default as useBroadcastLoginListener } from './useBroadcastLoginListener';\nexport * from './useCheckIfExistsValue';\nexport { default as useDebouncedViewportSearch } from './useDebouncedViewportSearch';\nexport * from './useDebouncedViewportSelectionFilter';\nexport * from './useFilterConditionFactories';\nexport * from './useFilteredItemsWithDefaultValue';\nexport * from './useGetItemIndexByValue';\nexport * from './useGetItemPosition';\nexport { default as useInitializeViewportData } from './useInitializeViewportData';\nexport * from './useSearchableViewportData';\nexport * from './useNotNullOrEmptyFilter';\nexport * from './usePickerWithSelectedValues';\nexport { default as useSelectDistinctTable } from './useSelectDistinctTable';\nexport { default as useSetPaddedViewportCallback } from './useSetPaddedViewportCallback';\nexport * from './useShowOnlyEmptyFilter';\nexport { default as useTable } from './useTable';\nexport { default as useTableColumn } from './useTableColumn';\nexport { default as useTableListener } from './useTableListener';\nexport { default as useTableClose } from './useTableClose';\nexport { default as useTableSize } from './useTableSize';\nexport { default as useTableUtils } from './useTableUtils';\nexport * from './useValueFilter';\nexport { default as useViewportData } from './useViewportData';\nexport type { UseSelectDistinctTableResult } from './useSelectDistinctTable';\nexport type { UseViewportDataResult } from './useViewportData';\nexport * from './useViewportFilter';\n"],"mappings":";SACSA,OAAO,IAAIC,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,SAKrBD,OAAO,IAAIE,mBAAmB;AAAA,SAC9BF,OAAO,IAAIG,yBAAyB;AAAA;AAAA,SAEpCH,OAAO,IAAII,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAMrCJ,OAAO,IAAIK,yBAAyB;AAAA;AAAA;AAAA;AAAA,SAIpCL,OAAO,IAAIM,sBAAsB;AAAA,SACjCN,OAAO,IAAIO,4BAA4B;AAAA;AAAA,SAEvCP,OAAO,IAAIQ,QAAQ;AAAA,SACnBR,OAAO,IAAIS,cAAc;AAAA,SACzBT,OAAO,IAAIU,gBAAgB;AAAA,SAC3BV,OAAO,IAAIW,aAAa;AAAA,SACxBX,OAAO,IAAIY,YAAY;AAAA,SACvBZ,OAAO,IAAIa,aAAa;AAAA;AAAA,SAExBb,OAAO,IAAIc,eAAe;AAAA"}
+{"version":3,"file":"index.js","names":["default","TableInput","useBroadcastChannel","useBroadcastLoginListener","useDebouncedViewportSearch","useInitializeViewportData","useSelectDistinctTable","useSetPaddedViewportCallback","useTable","useTableColumn","useTableListener","useTableClose","useTableSize","useTableUtils","useViewportData"],"sources":["../src/index.ts"],"sourcesContent":["export * from './HookTestUtils';\nexport { default as TableInput } from './TableInput';\nexport * from './RefreshTokenBootstrap';\nexport * from './RefreshTokenUtils';\nexport * from './spectrum';\nexport * from './TableDropdown';\nexport { default as useBroadcastChannel } from './useBroadcastChannel';\nexport { default as useBroadcastLoginListener } from './useBroadcastLoginListener';\nexport * from './useCheckIfExistsValue';\nexport { default as useDebouncedViewportSearch } from './useDebouncedViewportSearch';\nexport * from './useDebouncedViewportSelectionFilter';\nexport * from './useFilterConditionFactories';\nexport * from './useFilteredItemsWithDefaultValue';\nexport * from './useFormatter';\nexport * from './useGetItemIndexByValue';\nexport * from './useGetItemPosition';\nexport { default as useInitializeViewportData } from './useInitializeViewportData';\nexport * from './useSearchableViewportData';\nexport * from './useNotNullOrEmptyFilter';\nexport * from './usePickerWithSelectedValues';\nexport { default as useSelectDistinctTable } from './useSelectDistinctTable';\nexport { default as useSetPaddedViewportCallback } from './useSetPaddedViewportCallback';\nexport * from './useShowOnlyEmptyFilter';\nexport { default as useTable } from './useTable';\nexport { default as useTableColumn } from './useTableColumn';\nexport { default as useTableListener } from './useTableListener';\nexport { default as useTableClose } from './useTableClose';\nexport { default as useTableSize } from './useTableSize';\nexport { default as useTableUtils } from './useTableUtils';\nexport * from './useValueFilter';\nexport { default as useViewportData } from './useViewportData';\nexport type { UseSelectDistinctTableResult } from './useSelectDistinctTable';\nexport type { UseViewportDataResult } from './useViewportData';\nexport * from './useViewportFilter';\n"],"mappings":";SACSA,OAAO,IAAIC,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,SAKrBD,OAAO,IAAIE,mBAAmB;AAAA,SAC9BF,OAAO,IAAIG,yBAAyB;AAAA;AAAA,SAEpCH,OAAO,IAAII,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAOrCJ,OAAO,IAAIK,yBAAyB;AAAA;AAAA;AAAA;AAAA,SAIpCL,OAAO,IAAIM,sBAAsB;AAAA,SACjCN,OAAO,IAAIO,4BAA4B;AAAA;AAAA,SAEvCP,OAAO,IAAIQ,QAAQ;AAAA,SACnBR,OAAO,IAAIS,cAAc;AAAA,SACzBT,OAAO,IAAIU,gBAAgB;AAAA,SAC3BV,OAAO,IAAIW,aAAa;AAAA,SACxBX,OAAO,IAAIY,YAAY;AAAA,SACvBZ,OAAO,IAAIa,aAAa;AAAA;AAAA,SAExBb,OAAO,IAAIc,eAAe;AAAA"}

package/dist/spectrum/Picker/Picker.d.ts

@@ -1,11 +1,13 @@
 /// <reference types="react" />
 import { PickerProps as PickerPropsBase } from '@deephaven/components';
-import { dh } from '@deephaven/jsapi-types';
+import { dh as DhType } from '@deephaven/jsapi-types';
+import { Settings } from '@deephaven/jsapi-utils';
 export interface PickerProps extends Omit<PickerPropsBase, 'children'> {
-    table: dh.Table;
+    table: DhType.Table;
     keyColumn?: string;
     labelColumn?: string;
+    settings?: Settings;
 }
-export declare function Picker({ table, keyColumn: keyColumnName, labelColumn: labelColumnName, selectedKey, ...props }: PickerProps): JSX.Element;
+export declare function Picker({ table, keyColumn: keyColumnName, labelColumn: labelColumnName, selectedKey, settings, ...props }: PickerProps): JSX.Element;
 export default Picker;
 //# sourceMappingURL=Picker.d.ts.map

package/dist/spectrum/Picker/Picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../../src/spectrum/Picker/Picker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,WAAW,IAAI,eAAe,EAC/B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAQ5C,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC;IACpE,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC;IAEhB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,SAAS,EAAE,aAAa,EACxB,WAAW,EAAE,eAAe,EAC5B,WAAW,EACX,GAAG,KAAK,EACT,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA8D3B;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../../src/spectrum/Picker/Picker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,WAAW,IAAI,eAAe,EAC/B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAYlD,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC;IACpE,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC;IAEpB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,WAAW,CAAC,EAAE,MAAM,CAAC;IAIrB,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,SAAS,EAAE,aAAa,EACxB,WAAW,EAAE,eAAe,EAC5B,WAAW,EACX,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA6E3B;AAED,eAAe,MAAM,CAAC"}

package/dist/spectrum/Picker/Picker.js

@@ -1,4 +1,4 @@
-var _excluded = ["table", "keyColumn", "labelColumn", "selectedKey"];
+var _excluded = ["table", "keyColumn", "labelColumn", "selectedKey", "settings"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -9,26 +9,34 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { Picker as PickerBase } from '@deephaven/components';
+import Log from '@deephaven/log';
 import { PICKER_ITEM_HEIGHT, PICKER_TOP_OFFSET } from '@deephaven/utils';
 import { useCallback, useEffect, useMemo } from 'react';
+import useFormatter from "../../useFormatter.js";
 import useGetItemIndexByValue from "../../useGetItemIndexByValue.js";
 import { useViewportData } from "../../useViewportData.js";
 import { getPickerKeyColumn } from "./PickerUtils.js";
 import { usePickerItemRowDeserializer } from "./usePickerItemRowDeserializer.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+var log = Log.module('jsapi-components.Picker');
 export function Picker(_ref) {
   var {
       table,
       keyColumn: keyColumnName,
       labelColumn: labelColumnName,
-      selectedKey
+      selectedKey,
+      settings
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
+  var {
+    getFormattedString: formatValue
+  } = useFormatter(settings);
   var keyColumn = useMemo(() => getPickerKeyColumn(table, keyColumnName), [keyColumnName, table]);
   var deserializeRow = usePickerItemRowDeserializer({
     table,
     keyColumnName,
-    labelColumnName
+    labelColumnName,
+    formatValue
   });
   var getItemIndexByValue = useGetItemIndexByValue({
     table,
@@ -56,11 +64,18 @@ export function Picker(_ref) {
   // Set viewport to include the selected item so that its data will load and
   // the real `key` will be available to show the selection in the UI.
   function setViewportFromSelectedKey() {
+    var isCanceled = false;
     getItemIndexByValue().then(index => {
-      if (index != null) {
-        setViewport(index);
+      if (index == null || isCanceled) {
+        return;
       }
+      setViewport(index);
+    }).catch(err => {
+      log.error('Error setting viewport from selected key', err);
     });
+    return () => {
+      isCanceled = true;
+    };
   }, [getItemIndexByValue, setViewport]);
   return /*#__PURE__*/_jsx(PickerBase
   // eslint-disable-next-line react/jsx-props-no-spreading

package/dist/spectrum/Picker/Picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"Picker.js","names":["Picker","PickerBase","PICKER_ITEM_HEIGHT","PICKER_TOP_OFFSET","useCallback","useEffect","useMemo","useGetItemIndexByValue","useViewportData","getPickerKeyColumn","usePickerItemRowDeserializer","jsx","_jsx","_ref","table","keyColumn","keyColumnName","labelColumn","labelColumnName","selectedKey","props","_objectWithoutProperties","_excluded","deserializeRow","getItemIndexByValue","columnName","name","value","getInitialScrollPosition","_asyncToGenerator","index","viewportData","onScroll","setViewport","reuseItemsOnTableResize","itemHeight","setViewportFromSelectedKey","then","_objectSpread","children","items"],"sources":["../../../src/spectrum/Picker/Picker.tsx"],"sourcesContent":["import {\n  NormalizedPickerItemData,\n  Picker as PickerBase,\n  PickerProps as PickerPropsBase,\n} from '@deephaven/components';\nimport { dh } from '@deephaven/jsapi-types';\nimport { PICKER_ITEM_HEIGHT, PICKER_TOP_OFFSET } from '@deephaven/utils';\nimport { useCallback, useEffect, useMemo } from 'react';\nimport useGetItemIndexByValue from '../../useGetItemIndexByValue';\nimport { useViewportData } from '../../useViewportData';\nimport { getPickerKeyColumn } from './PickerUtils';\nimport { usePickerItemRowDeserializer } from './usePickerItemRowDeserializer';\n\nexport interface PickerProps extends Omit<PickerPropsBase, 'children'> {\n  table: dh.Table;\n  /* The column of values to use as item keys. Defaults to the first column. */\n  keyColumn?: string;\n  /* The column of values to display as primary text. Defaults to the `keyColumn` value. */\n  labelColumn?: string;\n}\n\nexport function Picker({\n  table,\n  keyColumn: keyColumnName,\n  labelColumn: labelColumnName,\n  selectedKey,\n  ...props\n}: PickerProps): JSX.Element {\n  const keyColumn = useMemo(\n    () => getPickerKeyColumn(table, keyColumnName),\n    [keyColumnName, table]\n  );\n\n  const deserializeRow = usePickerItemRowDeserializer({\n    table,\n    keyColumnName,\n    labelColumnName,\n  });\n\n  const getItemIndexByValue = useGetItemIndexByValue({\n    table,\n    columnName: keyColumn.name,\n    value: selectedKey,\n  });\n\n  const getInitialScrollPosition = useCallback(async () => {\n    const index = await getItemIndexByValue();\n\n    if (index == null) {\n      return null;\n    }\n\n    return index * PICKER_ITEM_HEIGHT + PICKER_TOP_OFFSET;\n  }, [getItemIndexByValue]);\n\n  const { viewportData, onScroll, setViewport } = useViewportData<\n    NormalizedPickerItemData,\n    dh.Table\n  >({\n    reuseItemsOnTableResize: true,\n    table,\n    itemHeight: PICKER_ITEM_HEIGHT,\n    deserializeRow,\n  });\n\n  useEffect(\n    // Set viewport to include the selected item so that its data will load and\n    // the real `key` will be available to show the selection in the UI.\n    function setViewportFromSelectedKey() {\n      getItemIndexByValue().then(index => {\n        if (index != null) {\n          setViewport(index);\n        }\n      });\n    },\n    [getItemIndexByValue, setViewport]\n  );\n\n  return (\n    <PickerBase\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...props}\n      getInitialScrollPosition={getInitialScrollPosition}\n      selectedKey={selectedKey}\n      onScroll={onScroll}\n    >\n      {viewportData.items}\n    </PickerBase>\n  );\n}\n\nexport default Picker;\n"],"mappings":";;;;;;;;;;AAAA,SAEEA,MAAM,IAAIC,UAAU,QAEf,uBAAuB;AAE9B,SAASC,kBAAkB,EAAEC,iBAAiB,QAAQ,kBAAkB;AACxE,SAASC,WAAW,EAAEC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AAAC,OACjDC,sBAAsB;AAAA,SACpBC,eAAe;AAAA,SACfC,kBAAkB;AAAA,SAClBC,4BAA4B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAUrC,OAAO,SAASZ,MAAMA,CAAAa,IAAA,EAMO;EAAA,IANN;MACrBC,KAAK;MACLC,SAAS,EAAEC,aAAa;MACxBC,WAAW,EAAEC,eAAe;MAC5BC;IAEW,CAAC,GAAAN,IAAA;IADTO,KAAK,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA;EAER,IAAMP,SAAS,GAAGT,OAAO,CACvB,MAAMG,kBAAkB,CAACK,KAAK,EAAEE,aAAa,CAAC,EAC9C,CAACA,aAAa,EAAEF,KAAK,CACvB,CAAC;EAED,IAAMS,cAAc,GAAGb,4BAA4B,CAAC;IAClDI,KAAK;IACLE,aAAa;IACbE;EACF,CAAC,CAAC;EAEF,IAAMM,mBAAmB,GAAGjB,sBAAsB,CAAC;IACjDO,KAAK;IACLW,UAAU,EAAEV,SAAS,CAACW,IAAI;IAC1BC,KAAK,EAAER;EACT,CAAC,CAAC;EAEF,IAAMS,wBAAwB,GAAGxB,WAAW,eAAAyB,iBAAA,CAAC,aAAY;IACvD,IAAMC,KAAK,SAASN,mBAAmB,CAAC,CAAC;IAEzC,IAAIM,KAAK,IAAI,IAAI,EAAE;MACjB,OAAO,IAAI;IACb;IAEA,OAAOA,KAAK,GAAG5B,kBAAkB,GAAGC,iBAAiB;EACvD,CAAC,GAAE,CAACqB,mBAAmB,CAAC,CAAC;EAEzB,IAAM;IAAEO,YAAY;IAAEC,QAAQ;IAAEC;EAAY,CAAC,GAAGzB,eAAe,CAG7D;IACA0B,uBAAuB,EAAE,IAAI;IAC7BpB,KAAK;IACLqB,UAAU,EAAEjC,kBAAkB;IAC9BqB;EACF,CAAC,CAAC;EAEFlB,SAAS;EACP;EACA;EACA,SAAS+B,0BAA0BA,CAAA,EAAG;IACpCZ,mBAAmB,CAAC,CAAC,CAACa,IAAI,CAACP,KAAK,IAAI;MAClC,IAAIA,KAAK,IAAI,IAAI,EAAE;QACjBG,WAAW,CAACH,KAAK,CAAC;MACpB;IACF,CAAC,CAAC;EACJ,CAAC,EACD,CAACN,mBAAmB,EAAES,WAAW,CACnC,CAAC;EAED,oBACErB,IAAA,CAACX;EACC;EAAA,EAAAqC,aAAA,CAAAA,aAAA,KACIlB,KAAK;IACTQ,wBAAwB,EAAEA,wBAAyB;IACnDT,WAAW,EAAEA,WAAY;IACzBa,QAAQ,EAAEA,QAAS;IAAAO,QAAA,EAElBR,YAAY,CAACS;EAAK,EACT,CAAC;AAEjB;AAEA,eAAexC,MAAM"}
+{"version":3,"file":"Picker.js","names":["Picker","PickerBase","Log","PICKER_ITEM_HEIGHT","PICKER_TOP_OFFSET","useCallback","useEffect","useMemo","useFormatter","useGetItemIndexByValue","useViewportData","getPickerKeyColumn","usePickerItemRowDeserializer","jsx","_jsx","log","module","_ref","table","keyColumn","keyColumnName","labelColumn","labelColumnName","selectedKey","settings","props","_objectWithoutProperties","_excluded","getFormattedString","formatValue","deserializeRow","getItemIndexByValue","columnName","name","value","getInitialScrollPosition","_asyncToGenerator","index","viewportData","onScroll","setViewport","reuseItemsOnTableResize","itemHeight","setViewportFromSelectedKey","isCanceled","then","catch","err","error","_objectSpread","children","items"],"sources":["../../../src/spectrum/Picker/Picker.tsx"],"sourcesContent":["import {\n  NormalizedPickerItemData,\n  Picker as PickerBase,\n  PickerProps as PickerPropsBase,\n} from '@deephaven/components';\nimport { dh as DhType } from '@deephaven/jsapi-types';\nimport { Settings } from '@deephaven/jsapi-utils';\nimport Log from '@deephaven/log';\nimport { PICKER_ITEM_HEIGHT, PICKER_TOP_OFFSET } from '@deephaven/utils';\nimport { useCallback, useEffect, useMemo } from 'react';\nimport useFormatter from '../../useFormatter';\nimport useGetItemIndexByValue from '../../useGetItemIndexByValue';\nimport { useViewportData } from '../../useViewportData';\nimport { getPickerKeyColumn } from './PickerUtils';\nimport { usePickerItemRowDeserializer } from './usePickerItemRowDeserializer';\n\nconst log = Log.module('jsapi-components.Picker');\n\nexport interface PickerProps extends Omit<PickerPropsBase, 'children'> {\n  table: DhType.Table;\n  /* The column of values to use as item keys. Defaults to the first column. */\n  keyColumn?: string;\n  /* The column of values to display as primary text. Defaults to the `keyColumn` value. */\n  labelColumn?: string;\n\n  // TODO #1890 : descriptionColumn, iconColumn\n\n  settings?: Settings;\n}\n\nexport function Picker({\n  table,\n  keyColumn: keyColumnName,\n  labelColumn: labelColumnName,\n  selectedKey,\n  settings,\n  ...props\n}: PickerProps): JSX.Element {\n  const { getFormattedString: formatValue } = useFormatter(settings);\n\n  const keyColumn = useMemo(\n    () => getPickerKeyColumn(table, keyColumnName),\n    [keyColumnName, table]\n  );\n\n  const deserializeRow = usePickerItemRowDeserializer({\n    table,\n    keyColumnName,\n    labelColumnName,\n    formatValue,\n  });\n\n  const getItemIndexByValue = useGetItemIndexByValue({\n    table,\n    columnName: keyColumn.name,\n    value: selectedKey,\n  });\n\n  const getInitialScrollPosition = useCallback(async () => {\n    const index = await getItemIndexByValue();\n\n    if (index == null) {\n      return null;\n    }\n\n    return index * PICKER_ITEM_HEIGHT + PICKER_TOP_OFFSET;\n  }, [getItemIndexByValue]);\n\n  const { viewportData, onScroll, setViewport } = useViewportData<\n    NormalizedPickerItemData,\n    DhType.Table\n  >({\n    reuseItemsOnTableResize: true,\n    table,\n    itemHeight: PICKER_ITEM_HEIGHT,\n    deserializeRow,\n  });\n\n  useEffect(\n    // Set viewport to include the selected item so that its data will load and\n    // the real `key` will be available to show the selection in the UI.\n    function setViewportFromSelectedKey() {\n      let isCanceled = false;\n\n      getItemIndexByValue()\n        .then(index => {\n          if (index == null || isCanceled) {\n            return;\n          }\n\n          setViewport(index);\n        })\n        .catch(err => {\n          log.error('Error setting viewport from selected key', err);\n        });\n\n      return () => {\n        isCanceled = true;\n      };\n    },\n    [getItemIndexByValue, setViewport]\n  );\n\n  return (\n    <PickerBase\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...props}\n      getInitialScrollPosition={getInitialScrollPosition}\n      selectedKey={selectedKey}\n      onScroll={onScroll}\n    >\n      {viewportData.items}\n    </PickerBase>\n  );\n}\n\nexport default Picker;\n"],"mappings":";;;;;;;;;;AAAA,SAEEA,MAAM,IAAIC,UAAU,QAEf,uBAAuB;AAG9B,OAAOC,GAAG,MAAM,gBAAgB;AAChC,SAASC,kBAAkB,EAAEC,iBAAiB,QAAQ,kBAAkB;AACxE,SAASC,WAAW,EAAEC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AAAC,OACjDC,YAAY;AAAA,OACZC,sBAAsB;AAAA,SACpBC,eAAe;AAAA,SACfC,kBAAkB;AAAA,SAClBC,4BAA4B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAErC,IAAMC,GAAG,GAAGb,GAAG,CAACc,MAAM,CAAC,yBAAyB,CAAC;AAcjD,OAAO,SAAShB,MAAMA,CAAAiB,IAAA,EAOO;EAAA,IAPN;MACrBC,KAAK;MACLC,SAAS,EAAEC,aAAa;MACxBC,WAAW,EAAEC,eAAe;MAC5BC,WAAW;MACXC;IAEW,CAAC,GAAAP,IAAA;IADTQ,KAAK,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA;EAER,IAAM;IAAEC,kBAAkB,EAAEC;EAAY,CAAC,GAAGrB,YAAY,CAACgB,QAAQ,CAAC;EAElE,IAAML,SAAS,GAAGZ,OAAO,CACvB,MAAMI,kBAAkB,CAACO,KAAK,EAAEE,aAAa,CAAC,EAC9C,CAACA,aAAa,EAAEF,KAAK,CACvB,CAAC;EAED,IAAMY,cAAc,GAAGlB,4BAA4B,CAAC;IAClDM,KAAK;IACLE,aAAa;IACbE,eAAe;IACfO;EACF,CAAC,CAAC;EAEF,IAAME,mBAAmB,GAAGtB,sBAAsB,CAAC;IACjDS,KAAK;IACLc,UAAU,EAAEb,SAAS,CAACc,IAAI;IAC1BC,KAAK,EAAEX;EACT,CAAC,CAAC;EAEF,IAAMY,wBAAwB,GAAG9B,WAAW,eAAA+B,iBAAA,CAAC,aAAY;IACvD,IAAMC,KAAK,SAASN,mBAAmB,CAAC,CAAC;IAEzC,IAAIM,KAAK,IAAI,IAAI,EAAE;MACjB,OAAO,IAAI;IACb;IAEA,OAAOA,KAAK,GAAGlC,kBAAkB,GAAGC,iBAAiB;EACvD,CAAC,GAAE,CAAC2B,mBAAmB,CAAC,CAAC;EAEzB,IAAM;IAAEO,YAAY;IAAEC,QAAQ;IAAEC;EAAY,CAAC,GAAG9B,eAAe,CAG7D;IACA+B,uBAAuB,EAAE,IAAI;IAC7BvB,KAAK;IACLwB,UAAU,EAAEvC,kBAAkB;IAC9B2B;EACF,CAAC,CAAC;EAEFxB,SAAS;EACP;EACA;EACA,SAASqC,0BAA0BA,CAAA,EAAG;IACpC,IAAIC,UAAU,GAAG,KAAK;IAEtBb,mBAAmB,CAAC,CAAC,CAClBc,IAAI,CAACR,KAAK,IAAI;MACb,IAAIA,KAAK,IAAI,IAAI,IAAIO,UAAU,EAAE;QAC/B;MACF;MAEAJ,WAAW,CAACH,KAAK,CAAC;IACpB,CAAC,CAAC,CACDS,KAAK,CAACC,GAAG,IAAI;MACZhC,GAAG,CAACiC,KAAK,CAAC,0CAA0C,EAAED,GAAG,CAAC;IAC5D,CAAC,CAAC;IAEJ,OAAO,MAAM;MACXH,UAAU,GAAG,IAAI;IACnB,CAAC;EACH,CAAC,EACD,CAACb,mBAAmB,EAAES,WAAW,CACnC,CAAC;EAED,oBACE1B,IAAA,CAACb;EACC;EAAA,EAAAgD,aAAA,CAAAA,aAAA,KACIxB,KAAK;IACTU,wBAAwB,EAAEA,wBAAyB;IACnDZ,WAAW,EAAEA,WAAY;IACzBgB,QAAQ,EAAEA,QAAS;IAAAW,QAAA,EAElBZ,YAAY,CAACa;EAAK,EACT,CAAC;AAEjB;AAEA,eAAenD,MAAM"}

package/dist/spectrum/Picker/usePickerItemRowDeserializer.d.ts

@@ -6,13 +6,15 @@ import { dh } from '@deephaven/jsapi-types';
  * @param table The table to get the key and label columns from
  * @param keyColumnName The name of the column to use for key data
  * @param labelColumnName The name of the column to use for label data
+ * @param formatValue Optional function to format the label value
  * @returns A function that deserializes a row into a normalized picker item
  * data object
  */
-export declare function usePickerItemRowDeserializer({ table, keyColumnName, labelColumnName, }: {
+export declare function usePickerItemRowDeserializer({ table, keyColumnName, labelColumnName, formatValue, }: {
     table: dh.Table;
     keyColumnName?: string;
     labelColumnName?: string;
+    formatValue?: (value: unknown, columnType: string) => string;
 }): (row: dh.Row) => NormalizedPickerItemData;
 export default usePickerItemRowDeserializer;
 //# sourceMappingURL=usePickerItemRowDeserializer.d.ts.map

package/dist/spectrum/Picker/usePickerItemRowDeserializer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePickerItemRowDeserializer.d.ts","sourceRoot":"","sources":["../../../src/spectrum/Picker/usePickerItemRowDeserializer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAgB5C;;;;;;;;GAQG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,KAAK,EACL,aAAa,EACb,eAAe,GAChB,EAAE;IACD,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,KAAK,wBAAwB,CAyB5C;AAED,eAAe,4BAA4B,CAAC"}
+{"version":3,"file":"usePickerItemRowDeserializer.d.ts","sourceRoot":"","sources":["../../../src/spectrum/Picker/usePickerItemRowDeserializer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAmB5C;;;;;;;;;GASG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,KAAK,EACL,aAAa,EACb,eAAe,EACf,WAAgC,GACjC,EAAE;IACD,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;CAC9D,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,KAAK,wBAAwB,CAyB5C;AAED,eAAe,4BAA4B,CAAC"}

package/dist/spectrum/Picker/usePickerItemRowDeserializer.js

@@ -1,11 +1,12 @@
 import { useCallback, useMemo } from 'react';
 import { getPickerKeyColumn, getPickerLabelColumn } from "./PickerUtils.js";
-function formatValue(value) {
+function defaultFormatKey(value) {
   if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
     return value;
   }
-
-  // TODO: #1889 Add better support for different data types.
+  return String(value);
+}
+function defaultFormatValue(value, _columnType) {
   return String(value);
 }
 
@@ -15,6 +16,7 @@ function formatValue(value) {
  * @param table The table to get the key and label columns from
  * @param keyColumnName The name of the column to use for key data
  * @param labelColumnName The name of the column to use for label data
+ * @param formatValue Optional function to format the label value
  * @returns A function that deserializes a row into a normalized picker item
  * data object
  */
@@ -22,18 +24,19 @@ export function usePickerItemRowDeserializer(_ref) {
   var {
     table,
     keyColumnName,
-    labelColumnName
+    labelColumnName,
+    formatValue = defaultFormatValue
   } = _ref;
   var keyColumn = useMemo(() => getPickerKeyColumn(table, keyColumnName), [keyColumnName, table]);
   var labelColumn = useMemo(() => getPickerLabelColumn(table, keyColumn, labelColumnName), [keyColumn, labelColumnName, table]);
   var deserializeRow = useCallback(row => {
-    var key = formatValue(row.get(keyColumn));
-    var content = formatValue(row.get(labelColumn));
+    var key = defaultFormatKey(row.get(keyColumn));
+    var content = formatValue(row.get(labelColumn), labelColumn.type);
     return {
       key,
       content
     };
-  }, [keyColumn, labelColumn]);
+  }, [formatValue, keyColumn, labelColumn]);
   return deserializeRow;
 }
 export default usePickerItemRowDeserializer;

package/dist/spectrum/Picker/usePickerItemRowDeserializer.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePickerItemRowDeserializer.js","names":["useCallback","useMemo","getPickerKeyColumn","getPickerLabelColumn","formatValue","value","String","usePickerItemRowDeserializer","_ref","table","keyColumnName","labelColumnName","keyColumn","labelColumn","deserializeRow","row","key","get","content"],"sources":["../../../src/spectrum/Picker/usePickerItemRowDeserializer.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\nimport { NormalizedPickerItemData } from '@deephaven/components';\nimport { dh } from '@deephaven/jsapi-types';\nimport { getPickerKeyColumn, getPickerLabelColumn } from './PickerUtils';\n\nfunction formatValue(value: unknown): string | number | boolean {\n  if (\n    typeof value === 'string' ||\n    typeof value === 'number' ||\n    typeof value === 'boolean'\n  ) {\n    return value;\n  }\n\n  // TODO: #1889 Add better support for different data types.\n  return String(value);\n}\n\n/**\n * Returns a function that deserializes a row into a normalized picker item data\n * object.\n * @param table The table to get the key and label columns from\n * @param keyColumnName The name of the column to use for key data\n * @param labelColumnName The name of the column to use for label data\n * @returns A function that deserializes a row into a normalized picker item\n * data object\n */\nexport function usePickerItemRowDeserializer({\n  table,\n  keyColumnName,\n  labelColumnName,\n}: {\n  table: dh.Table;\n  keyColumnName?: string;\n  labelColumnName?: string;\n}): (row: dh.Row) => NormalizedPickerItemData {\n  const keyColumn = useMemo(\n    () => getPickerKeyColumn(table, keyColumnName),\n    [keyColumnName, table]\n  );\n\n  const labelColumn = useMemo(\n    () => getPickerLabelColumn(table, keyColumn, labelColumnName),\n    [keyColumn, labelColumnName, table]\n  );\n\n  const deserializeRow = useCallback(\n    (row: dh.Row): NormalizedPickerItemData => {\n      const key = formatValue(row.get(keyColumn));\n      const content = formatValue(row.get(labelColumn));\n\n      return {\n        key,\n        content,\n      };\n    },\n    [keyColumn, labelColumn]\n  );\n\n  return deserializeRow;\n}\n\nexport default usePickerItemRowDeserializer;\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAAC,SAGpCC,kBAAkB,EAAEC,oBAAoB;AAEjD,SAASC,WAAWA,CAACC,KAAc,EAA6B;EAC9D,IACE,OAAOA,KAAK,KAAK,QAAQ,IACzB,OAAOA,KAAK,KAAK,QAAQ,IACzB,OAAOA,KAAK,KAAK,SAAS,EAC1B;IACA,OAAOA,KAAK;EACd;;EAEA;EACA,OAAOC,MAAM,CAACD,KAAK,CAAC;AACtB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASE,4BAA4BA,CAAAC,IAAA,EAQE;EAAA,IARD;IAC3CC,KAAK;IACLC,aAAa;IACbC;EAKF,CAAC,GAAAH,IAAA;EACC,IAAMI,SAAS,GAAGX,OAAO,CACvB,MAAMC,kBAAkB,CAACO,KAAK,EAAEC,aAAa,CAAC,EAC9C,CAACA,aAAa,EAAED,KAAK,CACvB,CAAC;EAED,IAAMI,WAAW,GAAGZ,OAAO,CACzB,MAAME,oBAAoB,CAACM,KAAK,EAAEG,SAAS,EAAED,eAAe,CAAC,EAC7D,CAACC,SAAS,EAAED,eAAe,EAAEF,KAAK,CACpC,CAAC;EAED,IAAMK,cAAc,GAAGd,WAAW,CAC/Be,GAAW,IAA+B;IACzC,IAAMC,GAAG,GAAGZ,WAAW,CAACW,GAAG,CAACE,GAAG,CAACL,SAAS,CAAC,CAAC;IAC3C,IAAMM,OAAO,GAAGd,WAAW,CAACW,GAAG,CAACE,GAAG,CAACJ,WAAW,CAAC,CAAC;IAEjD,OAAO;MACLG,GAAG;MACHE;IACF,CAAC;EACH,CAAC,EACD,CAACN,SAAS,EAAEC,WAAW,CACzB,CAAC;EAED,OAAOC,cAAc;AACvB;AAEA,eAAeP,4BAA4B"}
+{"version":3,"file":"usePickerItemRowDeserializer.js","names":["useCallback","useMemo","getPickerKeyColumn","getPickerLabelColumn","defaultFormatKey","value","String","defaultFormatValue","_columnType","usePickerItemRowDeserializer","_ref","table","keyColumnName","labelColumnName","formatValue","keyColumn","labelColumn","deserializeRow","row","key","get","content","type"],"sources":["../../../src/spectrum/Picker/usePickerItemRowDeserializer.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\nimport { NormalizedPickerItemData } from '@deephaven/components';\nimport { dh } from '@deephaven/jsapi-types';\nimport { getPickerKeyColumn, getPickerLabelColumn } from './PickerUtils';\n\nfunction defaultFormatKey(value: unknown): string | number | boolean {\n  if (\n    typeof value === 'string' ||\n    typeof value === 'number' ||\n    typeof value === 'boolean'\n  ) {\n    return value;\n  }\n\n  return String(value);\n}\n\nfunction defaultFormatValue(value: unknown, _columnType: string): string {\n  return String(value);\n}\n\n/**\n * Returns a function that deserializes a row into a normalized picker item data\n * object.\n * @param table The table to get the key and label columns from\n * @param keyColumnName The name of the column to use for key data\n * @param labelColumnName The name of the column to use for label data\n * @param formatValue Optional function to format the label value\n * @returns A function that deserializes a row into a normalized picker item\n * data object\n */\nexport function usePickerItemRowDeserializer({\n  table,\n  keyColumnName,\n  labelColumnName,\n  formatValue = defaultFormatValue,\n}: {\n  table: dh.Table;\n  keyColumnName?: string;\n  labelColumnName?: string;\n  formatValue?: (value: unknown, columnType: string) => string;\n}): (row: dh.Row) => NormalizedPickerItemData {\n  const keyColumn = useMemo(\n    () => getPickerKeyColumn(table, keyColumnName),\n    [keyColumnName, table]\n  );\n\n  const labelColumn = useMemo(\n    () => getPickerLabelColumn(table, keyColumn, labelColumnName),\n    [keyColumn, labelColumnName, table]\n  );\n\n  const deserializeRow = useCallback(\n    (row: dh.Row): NormalizedPickerItemData => {\n      const key = defaultFormatKey(row.get(keyColumn));\n      const content = formatValue(row.get(labelColumn), labelColumn.type);\n\n      return {\n        key,\n        content,\n      };\n    },\n    [formatValue, keyColumn, labelColumn]\n  );\n\n  return deserializeRow;\n}\n\nexport default usePickerItemRowDeserializer;\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAAC,SAGpCC,kBAAkB,EAAEC,oBAAoB;AAEjD,SAASC,gBAAgBA,CAACC,KAAc,EAA6B;EACnE,IACE,OAAOA,KAAK,KAAK,QAAQ,IACzB,OAAOA,KAAK,KAAK,QAAQ,IACzB,OAAOA,KAAK,KAAK,SAAS,EAC1B;IACA,OAAOA,KAAK;EACd;EAEA,OAAOC,MAAM,CAACD,KAAK,CAAC;AACtB;AAEA,SAASE,kBAAkBA,CAACF,KAAc,EAAEG,WAAmB,EAAU;EACvE,OAAOF,MAAM,CAACD,KAAK,CAAC;AACtB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASI,4BAA4BA,CAAAC,IAAA,EAUE;EAAA,IAVD;IAC3CC,KAAK;IACLC,aAAa;IACbC,eAAe;IACfC,WAAW,GAAGP;EAMhB,CAAC,GAAAG,IAAA;EACC,IAAMK,SAAS,GAAGd,OAAO,CACvB,MAAMC,kBAAkB,CAACS,KAAK,EAAEC,aAAa,CAAC,EAC9C,CAACA,aAAa,EAAED,KAAK,CACvB,CAAC;EAED,IAAMK,WAAW,GAAGf,OAAO,CACzB,MAAME,oBAAoB,CAACQ,KAAK,EAAEI,SAAS,EAAEF,eAAe,CAAC,EAC7D,CAACE,SAAS,EAAEF,eAAe,EAAEF,KAAK,CACpC,CAAC;EAED,IAAMM,cAAc,GAAGjB,WAAW,CAC/BkB,GAAW,IAA+B;IACzC,IAAMC,GAAG,GAAGf,gBAAgB,CAACc,GAAG,CAACE,GAAG,CAACL,SAAS,CAAC,CAAC;IAChD,IAAMM,OAAO,GAAGP,WAAW,CAACI,GAAG,CAACE,GAAG,CAACJ,WAAW,CAAC,EAAEA,WAAW,CAACM,IAAI,CAAC;IAEnE,OAAO;MACLH,GAAG;MACHE;IACF,CAAC;EACH,CAAC,EACD,CAACP,WAAW,EAAEC,SAAS,EAAEC,WAAW,CACtC,CAAC;EAED,OAAOC,cAAc;AACvB;AAEA,eAAeR,4BAA4B"}

package/dist/useFormatter.d.ts

@@ -0,0 +1,13 @@
+import { Formatter, Settings } from '@deephaven/jsapi-utils';
+export type UseFormatterResult = Pick<Formatter, 'getColumnFormat' | 'getColumnFormatMapForType' | 'getColumnTypeFormatter' | 'getFormattedString' | 'timeZone'>;
+/**
+ * Returns a subset of members of a `Formatter` instance. The `Formatter` will be
+ * constructed based on the given options or fallback to the configuration found
+ * in the current `FormatSettingsContext`. Members that are functions are bound
+ * to the `Formatter` instance, so they are safe to destructure. Static methods
+ * can still be accessed statically from the `Formatter` class.
+ * @param settings Optional settings to use when constructing the `Formatter`
+ */
+export declare function useFormatter(settings?: Settings): UseFormatterResult;
+export default useFormatter;
+//# sourceMappingURL=useFormatter.d.ts.map

package/dist/useFormatter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormatter.d.ts","sourceRoot":"","sources":["../src/useFormatter.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAkB,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAI7E,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,SAAS,EACP,iBAAiB,GACjB,2BAA2B,GAC3B,wBAAwB,GACxB,oBAAoB,GACpB,UAAU,CACb,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,QAAQ,CAAC,EAAE,QAAQ,GAAG,kBAAkB,CAgDpE;AAED,eAAe,YAAY,CAAC"}

package/dist/useFormatter.js

@@ -0,0 +1,46 @@
+import { useApi } from '@deephaven/jsapi-bootstrap';
+import { Formatter, FormatterUtils } from '@deephaven/jsapi-utils';
+import { bindAllMethods } from '@deephaven/utils';
+import { useMemo } from 'react';
+/**
+ * Returns a subset of members of a `Formatter` instance. The `Formatter` will be
+ * constructed based on the given options or fallback to the configuration found
+ * in the current `FormatSettingsContext`. Members that are functions are bound
+ * to the `Formatter` instance, so they are safe to destructure. Static methods
+ * can still be accessed statically from the `Formatter` class.
+ * @param settings Optional settings to use when constructing the `Formatter`
+ */
+export function useFormatter(settings) {
+  var dh = useApi();
+  var formatter = useMemo(() => {
+    var columnRules = FormatterUtils.getColumnFormats(settings);
+    var dateTimeOptions = FormatterUtils.getDateTimeFormatterOptions(settings);
+    var {
+      defaultDecimalFormatOptions,
+      defaultIntegerFormatOptions,
+      truncateNumbersWithPound,
+      showEmptyStrings,
+      showNullStrings
+    } = settings !== null && settings !== void 0 ? settings : {};
+    var instance = new Formatter(dh, columnRules, dateTimeOptions, defaultDecimalFormatOptions, defaultIntegerFormatOptions, truncateNumbersWithPound, showEmptyStrings, showNullStrings);
+
+    // Bind all methods so we can destructure them
+    bindAllMethods(instance);
+    return instance;
+  }, [dh, settings]);
+  var {
+    getColumnFormat,
+    getColumnFormatMapForType,
+    getColumnTypeFormatter,
+    getFormattedString
+  } = formatter;
+  return {
+    getColumnFormat,
+    getColumnFormatMapForType,
+    getColumnTypeFormatter,
+    getFormattedString,
+    timeZone: formatter.timeZone
+  };
+}
+export default useFormatter;
+//# sourceMappingURL=useFormatter.js.map

package/dist/useFormatter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormatter.js","names":["useApi","Formatter","FormatterUtils","bindAllMethods","useMemo","useFormatter","settings","dh","formatter","columnRules","getColumnFormats","dateTimeOptions","getDateTimeFormatterOptions","defaultDecimalFormatOptions","defaultIntegerFormatOptions","truncateNumbersWithPound","showEmptyStrings","showNullStrings","instance","getColumnFormat","getColumnFormatMapForType","getColumnTypeFormatter","getFormattedString","timeZone"],"sources":["../src/useFormatter.ts"],"sourcesContent":["import { useApi } from '@deephaven/jsapi-bootstrap';\nimport { Formatter, FormatterUtils, Settings } from '@deephaven/jsapi-utils';\nimport { bindAllMethods } from '@deephaven/utils';\nimport { useMemo } from 'react';\n\nexport type UseFormatterResult = Pick<\n  Formatter,\n  | 'getColumnFormat'\n  | 'getColumnFormatMapForType'\n  | 'getColumnTypeFormatter'\n  | 'getFormattedString'\n  | 'timeZone'\n>;\n\n/**\n * Returns a subset of members of a `Formatter` instance. The `Formatter` will be\n * constructed based on the given options or fallback to the configuration found\n * in the current `FormatSettingsContext`. Members that are functions are bound\n * to the `Formatter` instance, so they are safe to destructure. Static methods\n * can still be accessed statically from the `Formatter` class.\n * @param settings Optional settings to use when constructing the `Formatter`\n */\nexport function useFormatter(settings?: Settings): UseFormatterResult {\n  const dh = useApi();\n\n  const formatter = useMemo(() => {\n    const columnRules = FormatterUtils.getColumnFormats(settings);\n\n    const dateTimeOptions =\n      FormatterUtils.getDateTimeFormatterOptions(settings);\n\n    const {\n      defaultDecimalFormatOptions,\n      defaultIntegerFormatOptions,\n      truncateNumbersWithPound,\n      showEmptyStrings,\n      showNullStrings,\n    } = settings ?? {};\n\n    const instance = new Formatter(\n      dh,\n      columnRules,\n      dateTimeOptions,\n      defaultDecimalFormatOptions,\n      defaultIntegerFormatOptions,\n      truncateNumbersWithPound,\n      showEmptyStrings,\n      showNullStrings\n    );\n\n    // Bind all methods so we can destructure them\n    bindAllMethods(instance);\n\n    return instance;\n  }, [dh, settings]);\n\n  const {\n    getColumnFormat,\n    getColumnFormatMapForType,\n    getColumnTypeFormatter,\n    getFormattedString,\n  } = formatter;\n\n  return {\n    getColumnFormat,\n    getColumnFormatMapForType,\n    getColumnTypeFormatter,\n    getFormattedString,\n    timeZone: formatter.timeZone,\n  };\n}\n\nexport default useFormatter;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,4BAA4B;AACnD,SAASC,SAAS,EAAEC,cAAc,QAAkB,wBAAwB;AAC5E,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,OAAO,QAAQ,OAAO;AAW/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,YAAYA,CAACC,QAAmB,EAAsB;EACpE,IAAMC,EAAE,GAAGP,MAAM,CAAC,CAAC;EAEnB,IAAMQ,SAAS,GAAGJ,OAAO,CAAC,MAAM;IAC9B,IAAMK,WAAW,GAAGP,cAAc,CAACQ,gBAAgB,CAACJ,QAAQ,CAAC;IAE7D,IAAMK,eAAe,GACnBT,cAAc,CAACU,2BAA2B,CAACN,QAAQ,CAAC;IAEtD,IAAM;MACJO,2BAA2B;MAC3BC,2BAA2B;MAC3BC,wBAAwB;MACxBC,gBAAgB;MAChBC;IACF,CAAC,GAAGX,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,CAAC,CAAC;IAElB,IAAMY,QAAQ,GAAG,IAAIjB,SAAS,CAC5BM,EAAE,EACFE,WAAW,EACXE,eAAe,EACfE,2BAA2B,EAC3BC,2BAA2B,EAC3BC,wBAAwB,EACxBC,gBAAgB,EAChBC,eACF,CAAC;;IAED;IACAd,cAAc,CAACe,QAAQ,CAAC;IAExB,OAAOA,QAAQ;EACjB,CAAC,EAAE,CAACX,EAAE,EAAED,QAAQ,CAAC,CAAC;EAElB,IAAM;IACJa,eAAe;IACfC,yBAAyB;IACzBC,sBAAsB;IACtBC;EACF,CAAC,GAAGd,SAAS;EAEb,OAAO;IACLW,eAAe;IACfC,yBAAyB;IACzBC,sBAAsB;IACtBC,kBAAkB;IAClBC,QAAQ,EAAEf,SAAS,CAACe;EACtB,CAAC;AACH;AAEA,eAAelB,YAAY"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/jsapi-components",
-  "version": "0.70.1-alpha-picker-table.35+79b80350",
+  "version": "0.70.1-alpha-ui-picker-formatting.9+ae7106c8",
   "description": "Deephaven JSAPI Components",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
@@ -22,13 +22,13 @@
     "build:sass": "sass --embed-sources --load-path=../../node_modules ./src:./dist"
   },
   "dependencies": {
-    "@deephaven/components": "^0.70.1-alpha-picker-table.35+79b80350",
-    "@deephaven/jsapi-bootstrap": "^0.70.1-alpha-picker-table.35+79b80350",
+    "@deephaven/components": "^0.70.1-alpha-ui-picker-formatting.9+ae7106c8",
+    "@deephaven/jsapi-bootstrap": "^0.70.1-alpha-ui-picker-formatting.9+ae7106c8",
     "@deephaven/jsapi-types": "1.0.0-dev0.33.1",
-    "@deephaven/jsapi-utils": "^0.70.1-alpha-picker-table.35+79b80350",
-    "@deephaven/log": "^0.70.1-alpha-picker-table.35+79b80350",
-    "@deephaven/react-hooks": "^0.70.1-alpha-picker-table.35+79b80350",
-    "@deephaven/utils": "^0.70.1-alpha-picker-table.35+79b80350",
+    "@deephaven/jsapi-utils": "^0.70.1-alpha-ui-picker-formatting.9+ae7106c8",
+    "@deephaven/log": "^0.70.1-alpha-ui-picker-formatting.9+ae7106c8",
+    "@deephaven/react-hooks": "^0.70.1-alpha-ui-picker-formatting.9+ae7106c8",
+    "@deephaven/utils": "^0.70.1-alpha-ui-picker-formatting.9+ae7106c8",
     "@types/js-cookie": "^3.0.3",
     "classnames": "^2.3.2",
     "js-cookie": "^3.0.5",
@@ -36,7 +36,7 @@
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@deephaven/jsapi-shim": "^0.70.1-alpha-picker-table.35+79b80350",
+    "@deephaven/jsapi-shim": "^0.70.1-alpha-ui-picker-formatting.9+ae7106c8",
     "react-test-renderer": "^17.0.2"
   },
   "peerDependencies": {
@@ -51,5 +51,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "79b8035064f6733a37186a6b11d91bb9bfaa7e3c"
+  "gitHead": "ae7106c893002a77ce6fd5a314bf2ef6bd92542d"
 }