@vuu-ui/vuu-ui-controls 0.0.26

package/esm/expando-input/ExpandoInput.js

@@ -0,0 +1,51 @@
+import { jsx } from 'react/jsx-runtime';
+import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { forwardRef } from 'react';
+import { VuuInput } from '../vuu-input/VuuInput.js';
+import expandoInputCss from './ExpandoInput.css.js';
+
+const classBase = "vuuExpandoInput";
+const noop = () => void 0;
+const ExpandoInput = forwardRef(function ExpandoInput2({
+  className: classNameProp,
+  errorMessage,
+  value,
+  inputProps,
+  onCommit = noop,
+  ...props
+}, forwardedRef) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-expando-input",
+    css: expandoInputCss,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(classBase, classNameProp, {
+        [`${classBase}-error`]: errorMessage
+      }),
+      "data-text": value,
+      children: /* @__PURE__ */ jsx(
+        VuuInput,
+        {
+          ...props,
+          errorMessage,
+          inputProps: { ...inputProps, className: `${classBase}-input` },
+          onCommit,
+          ref: forwardedRef,
+          style: { padding: 0 },
+          textAlign: "left",
+          value,
+          variant: "secondary"
+        }
+      )
+    }
+  );
+});
+
+export { ExpandoInput };
+//# sourceMappingURL=ExpandoInput.js.map

package/esm/expando-input/ExpandoInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandoInput.js","sources":["../../src/expando-input/ExpandoInput.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ForwardedRef, forwardRef } from \"react\";\nimport { VuuInput, VuuInputProps } from \"../vuu-input\";\n\nimport expandoInputCss from \"./ExpandoInput.css\";\n\nconst classBase = \"vuuExpandoInput\";\n\nconst noop = () => undefined;\n\nexport interface ExpandoInputProps extends Omit<VuuInputProps, \"onCommit\"> {\n  onCommit?: VuuInputProps[\"onCommit\"];\n}\n\nexport const ExpandoInput = forwardRef(function ExpandoInput(\n  {\n    className: classNameProp,\n    errorMessage,\n    value,\n    inputProps,\n    onCommit = noop,\n    ...props\n  }: ExpandoInputProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-expando-input\",\n    css: expandoInputCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      className={cx(classBase, classNameProp, {\n        [`${classBase}-error`]: errorMessage,\n      })}\n      data-text={value}\n    >\n      <VuuInput\n        {...props}\n        errorMessage={errorMessage}\n        inputProps={{ ...inputProps, className: `${classBase}-input` }}\n        onCommit={onCommit}\n        ref={forwardedRef}\n        style={{ padding: 0 }}\n        textAlign=\"left\"\n        value={value}\n        variant=\"secondary\"\n      />\n    </div>\n  );\n});\n"],"names":["ExpandoInput"],"mappings":";;;;;;;;AAQA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAElB,MAAM,OAAO,MAAM,KAAA,CAAA,CAAA;AAMN,MAAA,YAAA,GAAe,UAAW,CAAA,SAASA,aAC9C,CAAA;AAAA,EACE,SAAW,EAAA,aAAA;AAAA,EACX,YAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAW,GAAA,IAAA;AAAA,EACX,GAAG,KAAA;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,eAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,QACtC,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,YAAA;AAAA,OACzB,CAAA;AAAA,MACD,WAAW,EAAA,KAAA;AAAA,MAEX,QAAA,kBAAA,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACE,GAAG,KAAA;AAAA,UACJ,YAAA;AAAA,UACA,YAAY,EAAE,GAAG,YAAY,SAAW,EAAA,CAAA,EAAG,SAAS,CAAS,MAAA,CAAA,EAAA;AAAA,UAC7D,QAAA;AAAA,UACA,GAAK,EAAA,YAAA;AAAA,UACL,KAAA,EAAO,EAAE,OAAA,EAAS,CAAE,EAAA;AAAA,UACpB,SAAU,EAAA,MAAA;AAAA,UACV,KAAA;AAAA,UACA,OAAQ,EAAA,WAAA;AAAA,SAAA;AAAA,OACV;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAC;;;;"}

package/esm/icon-button/Icon.css.js

@@ -0,0 +1,4 @@
+var iconCss = ".vuuIcon {\n    --vuu-icon-left: 0;\n}";
+
+export { iconCss as default };
+//# sourceMappingURL=Icon.css.js.map

package/esm/icon-button/Icon.css.js.map

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

package/esm/icon-button/Icon.js

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import iconCss from './Icon.css.js';
+
+const classBase = "vuuIcon";
+const Icon = ({
+  className,
+  name,
+  size,
+  style: styleProp,
+  ...htmlAttributes
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-icon",
+    css: iconCss,
+    window: targetWindow
+  });
+  const style = typeof size === "number" ? { ...styleProp, "--vuu-icon-size": `${size}px` } : styleProp;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...htmlAttributes,
+      className: cx(classBase, className),
+      "data-icon": name,
+      role: "img",
+      style
+    }
+  );
+};
+
+export { Icon };
+//# sourceMappingURL=Icon.js.map

package/esm/icon-button/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sources":["../../src/icon-button/Icon.tsx"],"sourcesContent":["import { HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport iconCss from \"./Icon.css\";\n\nconst classBase = \"vuuIcon\";\n\nexport interface IconProps extends HTMLAttributes<HTMLSpanElement> {\n  name: string;\n  size?: number;\n}\n\nexport const Icon = ({\n  className,\n  name,\n  size,\n  style: styleProp,\n  ...htmlAttributes\n}: IconProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-icon\",\n    css: iconCss,\n    window: targetWindow,\n  });\n\n  const style =\n    typeof size === \"number\"\n      ? { ...styleProp, \"--vuu-icon-size\": `${size}px` }\n      : styleProp;\n  return (\n    <span\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      data-icon={name}\n      role=\"img\"\n      style={style}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,SAAY,GAAA,SAAA,CAAA;AAOX,MAAM,OAAO,CAAC;AAAA,EACnB,SAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,GAAG,cAAA;AACL,CAAiB,KAAA;AACf,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,UAAA;AAAA,IACR,GAAK,EAAA,OAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,KAAA,GACJ,OAAO,IAAA,KAAS,QACZ,GAAA,EAAE,GAAG,SAAA,EAAW,iBAAmB,EAAA,CAAA,EAAG,IAAI,CAAA,EAAA,CAAA,EAC1C,GAAA,SAAA,CAAA;AACN,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,WAAW,EAAA,IAAA;AAAA,MACX,IAAK,EAAA,KAAA;AAAA,MACL,KAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

package/esm/icon-button/IconButton.css.js

@@ -0,0 +1,4 @@
+var iconButtonCss = ".vuuIconButton{\n    --saltButton-padding: var(--salt-size-unit);\n    --saltButton-minWidth: var(--salt-size-base);\n}";
+
+export { iconButtonCss as default };
+//# sourceMappingURL=IconButton.css.js.map

package/esm/icon-button/IconButton.css.js.map

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

package/esm/icon-button/IconButton.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import cx from 'clsx';
+import { Button } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { Icon } from './Icon.js';
+import { forwardRef } from 'react';
+import iconButtonCss from './IconButton.css.js';
+
+const classBase = "vuuIconButton";
+const IconButton = forwardRef(
+  function IconButton2({ "aria-label": ariaLabel, className, icon, size, ...buttonProps }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "vuu-icon-button",
+      css: iconButtonCss,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx(Button, { ...buttonProps, className: cx(classBase, className), ref, children: /* @__PURE__ */ jsx(Icon, { "aria-label": ariaLabel, name: icon, size }) });
+  }
+);
+
+export { IconButton };
+//# sourceMappingURL=IconButton.js.map

package/esm/icon-button/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","sources":["../../src/icon-button/IconButton.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { Button, ButtonProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { Icon } from \"./Icon\";\nimport { forwardRef } from \"react\";\n\nimport iconButtonCss from \"./IconButton.css\";\n\nconst classBase = \"vuuIconButton\";\n\nexport interface IconButtonProps extends Omit<ButtonProps, \"children\"> {\n  icon: string;\n  size?: number;\n}\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  function IconButton(\n    { \"aria-label\": ariaLabel, className, icon, size, ...buttonProps },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-icon-button\",\n      css: iconButtonCss,\n      window: targetWindow,\n    });\n\n    return (\n      <Button {...buttonProps} className={cx(classBase, className)} ref={ref}>\n        <Icon aria-label={ariaLabel} name={icon} size={size} />\n      </Button>\n    );\n  }\n);\n"],"names":["IconButton"],"mappings":";;;;;;;;;AASA,MAAM,SAAY,GAAA,eAAA,CAAA;AAOX,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WACP,CAAA,EAAE,YAAc,EAAA,SAAA,EAAW,SAAW,EAAA,IAAA,EAAM,IAAM,EAAA,GAAG,WAAY,EAAA,EACjE,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAA,aAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,2BACG,MAAQ,EAAA,EAAA,GAAG,WAAa,EAAA,SAAA,EAAW,GAAG,SAAW,EAAA,SAAS,CAAG,EAAA,GAAA,EAC5D,8BAAC,IAAK,EAAA,EAAA,YAAA,EAAY,WAAW,IAAM,EAAA,IAAA,EAAM,MAAY,CACvD,EAAA,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/esm/index.js

@@ -0,0 +1,73 @@
+export { Calendar } from './calendar/Calendar.js';
+export { useCalendarDay } from './calendar/useCalendarDay.js';
+export { useCalendar } from './calendar/useCalendar.js';
+export { useSelectionCalendar, useSelectionDay } from './calendar/useSelection.js';
+export { ComboBox } from './combo-box/ComboBox.js';
+export { CollectionContext, CollectionProvider, useCollection } from './common-hooks/collectionProvider.js';
+export { itemToString } from './common-hooks/itemToString.js';
+export { useCollectionItems } from './common-hooks/useCollectionItems.js';
+export { useControlled } from './common-hooks/useControlled.js';
+export { HeightOnly, WidthHeight, WidthOnly, useResizeObserver } from './common-hooks/use-resize-observer.js';
+export { allowMultipleSelection, deselectionIsAllowed, getFirstSelectedItem, hasSelection, isMultiSelection, isSingleSelection, selectionIsDisallowed } from './common-hooks/selectionTypes.js';
+export { useStateRef } from './common-hooks/useStateRef.js';
+export { CycleStateButton } from './cycle-state-button/CycleStateButton.js';
+export { DateInput } from './date-input/DateInput.js';
+export { DateRangeInput } from './date-input/DateRangeInput.js';
+export { BWD, FWD } from './drag-drop/dragDropTypes.js';
+export { DragDropProvider, useDragDropProvider } from './drag-drop/DragDropProvider.js';
+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/DropdownBase.js';
+export { DropdownButton } from './dropdown/DropdownButton.js';
+export { Dropdown } from './dropdown/Dropdown.js';
+export { useDropdownBase } from './dropdown/useDropdownBase.js';
+export { buildValidationChecker } from './editable/editable-utils.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 { Checkbox } from './inputs/Checkbox.js';
+export { RadioButton } from './inputs/RadioButton.js';
+export { InstrumentPicker } from './instrument-picker/InstrumentPicker.js';
+export { InstrumentSearch } from './instrument-search/InstrumentSearch.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';
+export { useImperativeScrollingAPI } from './list/common-hooks/useImperativeScrollingAPI.js';
+export { LIST_FOCUS_VISIBLE, useKeyboardNavigation } from './list/common-hooks/useKeyboardNavigation.js';
+export { CHECKBOX, GROUP_SELECTION_CASCADE, GROUP_SELECTION_NONE, GROUP_SELECTION_SINGLE, groupSelectionEnabled, useSelection } from './common-hooks/useSelection.js';
+export { useTypeahead } from './list/common-hooks/useTypeahead.js';
+export { useViewportTracking } from './list/common-hooks/useViewportTracking.js';
+export { childIsGroup, childItems, countChildItems, getChildLabel, getChildNodes, isDisabled, isFocusable, isGroupNode, isHeader, isParentPath, replaceCollectionItem, sourceItemHasProp, sourceItems } from './list/common-hooks/utils/collection-item-utils.js';
+export { getDefaultFilter, getDefaultFilterRegex } from './list/common-hooks/utils/filter-utils.js';
+export { isSelected } from './list/common-hooks/utils/isSelected.js';
+export { Highlighter } from './list/Highlighter.js';
+export { ListItem, ListItemProxy } from './list/ListItem.js';
+export { List } from './list/List.js';
+export { ListItemHeader } from './list/ListItemHeader.js';
+export { ListItemGroup } from './list/ListItemGroup.js';
+export { useList } from './list/useList.js';
+export { CheckboxIcon } from './list/CheckboxIcon.js';
+export { RadioIcon } from './list/RadioIcon.js';
+export { MeasuredContainer } from './measured-container/MeasuredContainer.js';
+export { useMeasuredContainer } from './measured-container/useMeasuredContainer.js';
+export { OverflowContainer } from './overflow-container/OverflowContainer.js';
+export { NO_WRAPPED_ITEMS, applyOverflowClassToWrappedItems, correctForWrappedHighPriorityItems, correctForWrappedOverflowIndicator, getElementsMarkedAsWrapped, getNonWrappedAndWrappedItems, highPriorityItemsHaveWrappedButShouldNotHave, markElementAsWrapped, overflowIndicatorHasWrappedButShouldNotHave, removeOverflowIndicatorIfNoLongerNeeded, sortByScreenOrder, switchWrappedItemIntoView, unmarkItemsWhichAreNoLongerWrapped } from './overflow-container/overflow-utils.js';
+export { PriceTicker } from './price-ticker/PriceTicker.js';
+export { SplitButton } from './split-button/SplitButton.js';
+export { SplitStateButton } from './split-button/SplitStateButton.js';
+export { Tabstrip } from './tabstrip/Tabstrip.js';
+export { Tab } from './tabstrip/Tab.js';
+export { getIndexOfEditedItem, getIndexOfSelectedTab } from './tabstrip/tabstrip-dom-utils.js';
+export { Toolbar } from './toolbar/Toolbar.js';
+export { Tree, TreeNode } from './tree/Tree.js';
+export { useItemsWithIds } from './tree/use-items-with-ids.js';
+export { escapeRegExp } from './utils/escapeRegExp.js';
+export { isOverflowElement } from './utils/isOverflowElement.js';
+export { forwardCallbackProps } from './utils/forwardCallbackProps.js';
+export { VuuInput } from './vuu-input/VuuInput.js';
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

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

package/esm/inputs/Checkbox.css.js

@@ -0,0 +1,4 @@
+var checkboxCss = ".vuuCheckbox {\n  --vuuCheckboxIcon-background-checked-enabled: var(--vuu-color-purple-10);\n  display: flex;\n  height: 24px;\n  align-items: center;\n  gap: 6px;\n  color: var(--light-text-primary, #15171B);\n  font-family: Nunito Sans A-Variant, serif;\n  font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;\n  font-size: 12px;\n  font-weight: 400;\n  cursor: pointer;\n}";
+
+export { checkboxCss as default };
+//# sourceMappingURL=Checkbox.css.js.map

package/esm/inputs/Checkbox.css.js.map

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

package/esm/inputs/Checkbox.js

@@ -0,0 +1,30 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { CheckboxIcon } from '../list/CheckboxIcon.js';
+import checkboxCss from './Checkbox.css.js';
+
+const Checkbox = (props) => {
+  const { onToggle, checked, label } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-checkbox",
+    css: checkboxCss,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "vuuCheckbox",
+      onClick: onToggle,
+      onKeyUp: (e) => e.key === " " && onToggle(),
+      children: [
+        /* @__PURE__ */ jsx(CheckboxIcon, { tabIndex: 0, checked }),
+        label
+      ]
+    }
+  );
+};
+
+export { Checkbox };
+//# sourceMappingURL=Checkbox.js.map

package/esm/inputs/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../src/inputs/Checkbox.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport { CheckboxIcon } from \"../list/CheckboxIcon\";\n\nimport checkboxCss from \"./Checkbox.css\";\n\ntype CheckboxProps = {\n  onToggle: () => void;\n  className?: string;\n  checked: boolean;\n  label: string;\n};\n\nexport const Checkbox = (props: CheckboxProps): JSX.Element => {\n  const { onToggle, checked, label } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-checkbox\",\n    css: checkboxCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      className=\"vuuCheckbox\"\n      onClick={onToggle}\n      onKeyUp={(e) => e.key === \" \" && onToggle()}\n    >\n      <CheckboxIcon tabIndex={0} checked={checked} />\n      {label}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAca,MAAA,QAAA,GAAW,CAAC,KAAsC,KAAA;AAC7D,EAAA,MAAM,EAAE,QAAA,EAAU,OAAS,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AACrC,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAA,WAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,aAAA;AAAA,MACV,OAAS,EAAA,QAAA;AAAA,MACT,SAAS,CAAC,CAAA,KAAM,CAAE,CAAA,GAAA,KAAQ,OAAO,QAAS,EAAA;AAAA,MAE1C,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,YAAA,EAAA,EAAa,QAAU,EAAA,CAAA,EAAG,OAAkB,EAAA,CAAA;AAAA,QAC5C,KAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ;;;;"}

package/esm/inputs/RadioButton.css.js

@@ -0,0 +1,4 @@
+var radioButtonCss = ".vuuRadioButton {\n  display: flex;\n  height: 24px;\n  align-items: center;\n  gap: 6px;\n  color: var(--light-text-primary, #15171B);\n  font-family: Nunito Sans A-Variant, sans-serif;\n  font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;\n  font-size: 12px;\n  font-weight: 400;\n  cursor: pointer;\n}\n\n.radio {\n  position: relative;\n  height: 12px;\n}\n\ninput[type=\"radio\"] {\n\tposition: absolute;\n  appearance: none;\n\twidth: 100%;\n  height: 100%;\n  border-radius: 50%;\n  margin: 0;\n  top: 0;\n}";
+
+export { radioButtonCss as default };
+//# sourceMappingURL=RadioButton.css.js.map

package/esm/inputs/RadioButton.css.js.map

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

package/esm/inputs/RadioButton.js

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import '../list/common-hooks/keyUtils.js';
+import 'react';
+import '../common-hooks/collectionProvider.js';
+import '@salt-ds/core';
+import '../common-hooks/use-resize-observer.js';
+import '@vuu-ui/vuu-utils';
+import '../list/Highlighter.js';
+import '../list/ListItem.js';
+import '../list/List.js';
+import '../drag-drop/DragDropProvider.js';
+import '../drag-drop/Draggable.js';
+import 'clsx';
+import { RadioIcon } from '../list/RadioIcon.js';
+import radioButtonCss from './RadioButton.css.js';
+
+const RadioButton = (props) => {
+  const { onClick, checked, label, groupName } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-radio-button",
+    css: radioButtonCss,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "vuuRadioButton", onClick, children: [
+    /* @__PURE__ */ jsxs("div", { className: "radio", children: [
+      /* @__PURE__ */ jsx("input", { type: "radio", name: groupName }),
+      /* @__PURE__ */ jsx(RadioIcon, { checked })
+    ] }),
+    label
+  ] });
+};
+
+export { RadioButton };
+//# sourceMappingURL=RadioButton.js.map

package/esm/inputs/RadioButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.js","sources":["../../src/inputs/RadioButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { RadioIcon } from \"../list\";\n\nimport radioButtonCss from \"./RadioButton.css\";\n\ntype RadioButtonProps = {\n  onClick: () => void;\n  checked: boolean;\n  label: string;\n  groupName: string;\n};\n\nexport const RadioButton = (props: RadioButtonProps): JSX.Element => {\n  const { onClick, checked, label, groupName } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-radio-button\",\n    css: radioButtonCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div className=\"vuuRadioButton\" onClick={onClick}>\n      <div className=\"radio\">\n        <input type=\"radio\" name={groupName} />\n        <RadioIcon checked={checked} />\n      </div>\n      {label}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAaa,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AACnE,EAAA,MAAM,EAAE,OAAA,EAAS,OAAS,EAAA,KAAA,EAAO,WAAc,GAAA,KAAA,CAAA;AAC/C,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAA,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,gBAAA,EAAiB,OAC9B,EAAA,QAAA,EAAA;AAAA,oBAAC,IAAA,CAAA,KAAA,EAAA,EAAI,WAAU,OACb,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,OAAM,EAAA,EAAA,IAAA,EAAK,OAAQ,EAAA,IAAA,EAAM,SAAW,EAAA,CAAA;AAAA,sBACrC,GAAA,CAAC,aAAU,OAAkB,EAAA,CAAA;AAAA,KAC/B,EAAA,CAAA;AAAA,IACC,KAAA;AAAA,GACH,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/esm/instrument-picker/InstrumentPicker.css.js

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

package/esm/instrument-picker/InstrumentPicker.css.js.map

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

package/esm/instrument-picker/InstrumentPicker.js

@@ -0,0 +1,111 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Table } from '@vuu-ui/vuu-table';
+import { useId } from '@vuu-ui/vuu-utils';
+import { Input } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { forwardRef, useMemo } from 'react';
+import { DropdownBase } from '../dropdown/DropdownBase.js';
+import '../dropdown/DropdownButton.js';
+import '../dropdown/Dropdown.js';
+import '../common-hooks/collectionProvider.js';
+import '../common-hooks/use-resize-observer.js';
+import { SearchCell } from './SearchCell.js';
+import { useInstrumentPicker } from './useInstrumentPicker.js';
+import instrumentPickerCss from './InstrumentPicker.css.js';
+
+const classBase = "vuuInstrumentPicker";
+if (typeof SearchCell !== "function") {
+  console.warn("Instrument Picker: SearchCell module not loaded ");
+}
+const InstrumentPicker = forwardRef(function InstrumentPicker2({
+  TableProps: { dataSource, ...TableProps2 },
+  className,
+  columnMap,
+  disabled,
+  id: idProp,
+  itemToString,
+  onOpenChange: onOpenChangeProp,
+  onSelect,
+  schema,
+  searchColumns,
+  width,
+  ...htmlAttributes
+}, forwardedRef) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-instrument-picker",
+    css: instrumentPickerCss,
+    window: targetWindow
+  });
+  const id = useId(idProp);
+  const {
+    highlightedIndex,
+    inputProps,
+    isOpen,
+    onOpenChange,
+    tableHandlers,
+    tableRef,
+    value
+  } = useInstrumentPicker({
+    columnMap,
+    columns: TableProps2.config.columns,
+    dataSource,
+    itemToString,
+    onOpenChange: onOpenChangeProp,
+    onSelect,
+    searchColumns
+  });
+  const endAdornment = useMemo(() => /* @__PURE__ */ jsx("span", { "data-icon": "chevron-down" }), []);
+  const tableProps = {
+    ...TableProps2,
+    config: {
+      ...TableProps2.config,
+      zebraStripes: false
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    DropdownBase,
+    {
+      ...htmlAttributes,
+      fullWidth: true,
+      id,
+      isOpen,
+      onOpenChange,
+      openOnFocus: true,
+      placement: "below-full-width",
+      ref: forwardedRef,
+      width,
+      children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            ...inputProps,
+            disabled,
+            endAdornment,
+            value
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Table,
+          {
+            rowHeight: 25,
+            renderBufferSize: 100,
+            ...tableProps,
+            ...tableHandlers,
+            className: `${classBase}-list`,
+            height: 200,
+            highlightedIndex,
+            dataSource,
+            navigationStyle: "row",
+            ref: tableRef,
+            showColumnHeaders: false
+          }
+        )
+      ]
+    }
+  );
+});
+
+export { InstrumentPicker };
+//# sourceMappingURL=InstrumentPicker.js.map

package/esm/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":["InstrumentPicker","TableProps"],"mappings":";;;;;;;;;;;;;;;;AAaA,MAAM,SAAY,GAAA,qBAAA,CAAA;AAElB,IAAI,OAAO,eAAe,UAAY,EAAA;AACpC,EAAA,OAAA,CAAQ,KAAK,kDAAkD,CAAA,CAAA;AACjE,CAAA;AAuBa,MAAA,gBAAA,GAAmB,UAAW,CAAA,SAASA,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,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAA,mBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAA,GAAK,MAAM,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,MACE,mBAAoB,CAAA;AAAA,IACtB,SAAA;AAAA,IACA,OAAA,EAASA,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,GAAe,QAAQ,sBAAM,GAAA,CAAC,UAAK,WAAU,EAAA,cAAA,EAAe,CAAI,EAAA,EAAE,CAAA,CAAA;AAExE,EAAA,MAAM,UAAa,GAAA;AAAA,IACjB,GAAGA,WAAAA;AAAA,IACH,MAAQ,EAAA;AAAA,MACN,GAAGA,WAAW,CAAA,MAAA;AAAA,MACd,YAAc,EAAA,KAAA;AAAA,KAChB;AAAA,GACF,CAAA;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,YAAA;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,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACE,GAAG,UAAA;AAAA,YACJ,QAAA;AAAA,YACA,YAAA;AAAA,YACA,KAAA;AAAA,WAAA;AAAA,SACF;AAAA,wBAEA,GAAA;AAAA,UAAC,KAAA;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/esm/instrument-picker/SearchCell.css.js

@@ -0,0 +1,4 @@
+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";
+
+export { searchCellCss as default };
+//# sourceMappingURL=SearchCell.css.js.map

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

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

package/esm/instrument-picker/SearchCell.js

@@ -0,0 +1,31 @@
+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";
+const SearchCell = ({
+  column,
+  columnMap,
+  row
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-search-cell",
+    css: searchCellCss,
+    window: targetWindow
+  });
+  const key = columnMap[column.name];
+  const value = row[key];
+  return /* @__PURE__ */ jsxs("div", { className: classBase, tabIndex: -1, children: [
+    /* @__PURE__ */ jsx("span", { "data-icon": "draggable" }),
+    value
+  ] });
+};
+registerComponent("search-cell", SearchCell, "cell-renderer", {
+  serverDataType: "private"
+});
+
+export { SearchCell };
+//# sourceMappingURL=SearchCell.js.map

package/esm/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":[],"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,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,EAAA;AAEA,iBAAkB,CAAA,aAAA,EAAe,YAAY,eAAiB,EAAA;AAAA,EAC5D,cAAgB,EAAA,SAAA;AAClB,CAAC,CAAA;;;;"}

package/esm/instrument-picker/useInstrumentPicker.js

@@ -0,0 +1,85 @@
+import { useControlledTableNavigation } from '@vuu-ui/vuu-table';
+import { useState, useMemo, useCallback } from 'react';
+import '../common-hooks/collectionProvider.js';
+import { useControlled } from '../common-hooks/useControlled.js';
+import '../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] = useState("");
+  const [isOpen, setIsOpen] = useControlled({
+    controlled: isOpenProp,
+    default: defaultIsOpen ?? false,
+    name: "useDropdownList"
+  });
+  const { highlightedIndexRef, onKeyDown, tableRef } = useControlledTableNavigation(-1, dataSource.size);
+  const baseFilterPattern = useMemo(
+    // TODO make this contains once server supports it
+    () => searchColumns.map((col) => `${col} starts "__VALUE__"`).join(" or "),
+    [searchColumns]
+  );
+  const handleOpenChange = useCallback(
+    (open, closeReason) => {
+      setIsOpen(open);
+      onOpenChange?.(open, closeReason);
+    },
+    [onOpenChange, setIsOpen]
+  );
+  const handleInputChange = 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 = 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
+  };
+};
+
+export { useInstrumentPicker };
+//# sourceMappingURL=useInstrumentPicker.js.map

package/esm/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":["value"],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+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";
+
+export { instrumentSearchCss as default };
+//# sourceMappingURL=InstrumentSearch.css.js.map

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

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