@vuu-ui/vuu-ui-controls 2.1.19-beta.2 → 2.1.19-beta.3

package/esm/hover-overlay/HoverOverlay.js

@@ -0,0 +1,94 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Overlay, OverlayTrigger, OverlayPanel, OverlayPanelContent } from '@salt-ds/core';
+import { useState, useRef, useCallback, useEffect } from 'react';
+
+const HoverOverlay = ({
+  children,
+  open: openProp = false,
+  onOpenChange,
+  placement = "right",
+  trigger
+}) => {
+  const [open, _setOpen] = useState(openProp);
+  const isOpen = useRef(false);
+  const showHandle = useRef(void 0);
+  const hideHandle = useRef(void 0);
+  const setOpen = useCallback(
+    (open2) => {
+      if (open2 !== isOpen.current) {
+        isOpen.current = open2;
+        _setOpen(open2);
+        onOpenChange?.(open2);
+      }
+    },
+    [onOpenChange]
+  );
+  useEffect(() => {
+    if (openProp !== isOpen.current) {
+      setOpen(openProp);
+    }
+  }, [openProp, setOpen]);
+  const handleOverlayMouseEnter = useCallback(() => {
+    if (hideHandle.current) {
+      clearTimeout(hideHandle.current);
+      hideHandle.current = void 0;
+    }
+  }, []);
+  const handleOverlayMouseLeave = useCallback(() => {
+    hideHandle.current = setTimeout(() => {
+      setOpen(false);
+      hideHandle.current = void 0;
+    }, 300);
+  }, [setOpen]);
+  const handleMouseEnter = useCallback(() => {
+    showHandle.current = setTimeout(() => {
+      setOpen(true);
+      showHandle.current = void 0;
+    }, 400);
+    if (hideHandle.current) {
+      clearTimeout(hideHandle.current);
+      hideHandle.current = void 0;
+    }
+  }, [setOpen]);
+  const handleMouseLeave = useCallback(() => {
+    if (showHandle.current) {
+      clearTimeout(showHandle.current);
+      showHandle.current = void 0;
+    } else if (isOpen.current) {
+      hideHandle.current = setTimeout(() => {
+        setOpen(false);
+        hideHandle.current = void 0;
+      }, 300);
+    }
+  }, [setOpen]);
+  const handleClick = useCallback(() => {
+    if (showHandle.current) {
+      clearTimeout(showHandle.current);
+      showHandle.current = void 0;
+    } else if (isOpen.current) {
+      setOpen(false);
+    }
+  }, [setOpen]);
+  return /* @__PURE__ */ jsxs(Overlay, { placement, onOpenChange, open, children: [
+    /* @__PURE__ */ jsx(OverlayTrigger, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        onClick: handleClick,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children: trigger
+      }
+    ) }),
+    /* @__PURE__ */ jsx(OverlayPanel, { children: /* @__PURE__ */ jsx(
+      OverlayPanelContent,
+      {
+        onMouseEnter: handleOverlayMouseEnter,
+        onMouseLeave: handleOverlayMouseLeave,
+        children
+      }
+    ) })
+  ] });
+};
+
+export { HoverOverlay };
+//# sourceMappingURL=HoverOverlay.js.map

package/esm/hover-overlay/HoverOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverOverlay.js","sources":["../../../../packages/vuu-ui-controls/src/hover-overlay/HoverOverlay.tsx"],"sourcesContent":["import {\n  Overlay,\n  OverlayPanel,\n  OverlayPanelContent,\n  OverlayProps,\n  OverlayTrigger,\n} from \"@salt-ds/core\";\nimport { ReactNode, useCallback, useEffect, useRef, useState } from \"react\";\n\nexport interface HoverOverlayProps\n  extends Pick<OverlayProps, \"placement\" | \"onOpenChange\"> {\n  children: ReactNode;\n  open?: boolean;\n  trigger: ReactNode;\n}\n\nexport const HoverOverlay = ({\n  children,\n  open: openProp = false,\n  onOpenChange,\n  placement = \"right\",\n  trigger,\n}: HoverOverlayProps) => {\n  const [open, _setOpen] = useState(openProp);\n  const isOpen = useRef(false);\n  const showHandle = useRef<ReturnType<typeof setTimeout>>(undefined);\n  const hideHandle = useRef<ReturnType<typeof setTimeout>>(undefined);\n\n  const setOpen = useCallback(\n    (open: boolean) => {\n      if (open !== isOpen.current) {\n        isOpen.current = open;\n        _setOpen(open);\n        onOpenChange?.(open);\n      }\n    },\n    [onOpenChange],\n  );\n\n  useEffect(() => {\n    if (openProp !== isOpen.current) {\n      setOpen(openProp);\n    }\n  }, [openProp, setOpen]);\n\n  const handleOverlayMouseEnter = useCallback(() => {\n    if (hideHandle.current) {\n      clearTimeout(hideHandle.current);\n      hideHandle.current = undefined;\n    }\n  }, []);\n\n  const handleOverlayMouseLeave = useCallback(() => {\n    hideHandle.current = setTimeout(() => {\n      setOpen(false);\n      hideHandle.current = undefined;\n    }, 300);\n  }, [setOpen]);\n\n  const handleMouseEnter = useCallback(() => {\n    showHandle.current = setTimeout(() => {\n      setOpen(true);\n      showHandle.current = undefined;\n    }, 400);\n    if (hideHandle.current) {\n      clearTimeout(hideHandle.current);\n      hideHandle.current = undefined;\n    }\n  }, [setOpen]);\n\n  const handleMouseLeave = useCallback(() => {\n    if (showHandle.current) {\n      clearTimeout(showHandle.current);\n      showHandle.current = undefined;\n    } else if (isOpen.current) {\n      hideHandle.current = setTimeout(() => {\n        setOpen(false);\n        hideHandle.current = undefined;\n      }, 300);\n    }\n  }, [setOpen]);\n\n  const handleClick = useCallback(() => {\n    if (showHandle.current) {\n      clearTimeout(showHandle.current);\n      showHandle.current = undefined;\n    } else if (isOpen.current) {\n      setOpen(false);\n    }\n  }, [setOpen]);\n\n  return (\n    <Overlay placement={placement} onOpenChange={onOpenChange} open={open}>\n      <OverlayTrigger>\n        <div\n          onClick={handleClick}\n          onMouseEnter={handleMouseEnter}\n          onMouseLeave={handleMouseLeave}\n        >\n          {trigger}\n        </div>\n      </OverlayTrigger>\n      <OverlayPanel>\n        <OverlayPanelContent\n          onMouseEnter={handleOverlayMouseEnter}\n          onMouseLeave={handleOverlayMouseLeave}\n        >\n          {children}\n        </OverlayPanelContent>\n      </OverlayPanel>\n    </Overlay>\n  );\n};\n"],"names":["open"],"mappings":"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"}

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":["../../../../packages/vuu-ui-controls/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;AAOX,MAAM,OAAO,CAAC;AAAA,EACnB,SAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,GAAG;AACL,CAAiB,KAAA;AACf,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,UAAA;AAAA,IACR,GAAK,EAAA,OAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,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;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;AAAA;AAAA,GACF;AAEJ;;;;"}

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

@@ -0,0 +1,4 @@
+var iconButtonCss = ".vuuIconButton.saltButton {\n  --saltButton-padding: 0;\n  --saltButton-minWidth: var(--salt-size-base);\n  width: var(--saltButton-width, calc(var(--salt-size-base) + var(--salt-size-fixed-400)));\n}\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":["../../../../packages/vuu-ui-controls/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;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;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAA,aAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,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;AAAA;AAGN;;;;"}

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

@@ -0,0 +1,4 @@
+var toggleIconCss = ".vuuToggleIconButton {\n  &.saltButton {\n    &:active {\n      --saltButton-background-active: transparent;\n    }\n    &:hover {\n      --saltButton-background-hover: transparent;\n    }\n    .vuuIcon {\n      --vuu-icon-height: 18px;\n      --vuu-icon-left: -3px;\n      --vuu-icon-width: 18px;\n      &:after {\n        transition: transform 0.1s linear;\n      }\n      &[data-icon=\"triangle-down\"]:after {\n        --vuu-icon-left: -1px;\n        --vuu-icon-top: -3px;\n      }\n    }\n    border: none;\n    border-radius: 0;\n    height: 18px;\n    left: 0;\n    min-width: 18px;\n    padding: 0;\n    width: 18px;\n  }\n}\n\n.vuuTableGroupCell:hover {\n  .vuuToggleIconButton {\n    .vuuIcon:after {\n      --vuu-icon-color: var(--salt-palette-interact-cta-background-hover);\n    }\n  }\n}\n";
+
+export { toggleIconCss as default };
+//# sourceMappingURL=ToggleIconButton.css.js.map

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

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

package/esm/icon-button/ToggleIconButton.js

@@ -0,0 +1,37 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import cx from 'clsx';
+import { IconButton } from './IconButton.js';
+import toggleIconCss from './ToggleIconButton.css.js';
+
+const classBase = "vuuToggleIconButton";
+const ToggleIconButton = ({
+  className,
+  isExpanded,
+  size = 7,
+  ...props
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-toggle-icon-button",
+    css: toggleIconCss,
+    window: targetWindow
+  });
+  const icon = isExpanded ? "triangle-down" : "triangle-right";
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      ...props,
+      appearance: "transparent",
+      className: cx(classBase, className),
+      "data-embedded": true,
+      icon,
+      sentiment: "neutral",
+      size
+    }
+  );
+};
+
+export { ToggleIconButton };
+//# sourceMappingURL=ToggleIconButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleIconButton.js","sources":["../../../../packages/vuu-ui-controls/src/icon-button/ToggleIconButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { IconButton, IconButtonProps } from \"./IconButton\";\n\nimport toggleIconCss from \"./ToggleIconButton.css\";\n\nconst classBase = \"vuuToggleIconButton\";\n\nexport interface ToggleIconButtonProps extends Omit<IconButtonProps, \"icon\"> {\n  isExpanded: boolean;\n}\n\nexport const ToggleIconButton = ({\n  className,\n  isExpanded,\n  size = 7,\n  ...props\n}: ToggleIconButtonProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-toggle-icon-button\",\n    css: toggleIconCss,\n    window: targetWindow,\n  });\n\n  const icon = isExpanded ? \"triangle-down\" : \"triangle-right\";\n  return (\n    <IconButton\n      {...props}\n      appearance=\"transparent\"\n      className={cx(classBase, className)}\n      data-embedded\n      icon={icon}\n      sentiment=\"neutral\"\n      size={size}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAOA,MAAM,SAAY,GAAA,qBAAA;AAMX,MAAM,mBAAmB,CAAC;AAAA,EAC/B,SAAA;AAAA,EACA,UAAA;AAAA,EACA,IAAO,GAAA,CAAA;AAAA,EACP,GAAG;AACL,CAA6B,KAAA;AAC3B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAA,aAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,IAAA,GAAO,aAAa,eAAkB,GAAA,gBAAA;AAC5C,EACE,uBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,UAAW,EAAA,aAAA;AAAA,MACX,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,eAAa,EAAA,IAAA;AAAA,MACb,IAAA;AAAA,MACA,SAAU,EAAA,SAAA;AAAA,MACV;AAAA;AAAA,GACF;AAEJ;;;;"}

package/esm/index.js

@@ -0,0 +1,59 @@
+export { Calendar } from './calendar/Calendar.js';
+export { useCalendarDay } from './calendar/useCalendarDay.js';
+export { useCalendar } from './calendar/useCalendar.js';
+export { isRangeOrOffsetSelectionValue, isRangeOrOffsetSelectionWithStartDate, useSelectionCalendar, useSelectionDay } from './calendar/useSelection.js';
+export { ColumnPicker } from './column-picker/ColumnPicker.js';
+export { ColumnSearch } from './column-picker/ColumnSearch.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 { ContextPanelProvider, useContextPanel, useHideContextPanel } from './context-panel-provider/ContextPanelProvider.js';
+export { CycleStateButton } from './cycle-state-button/CycleStateButton.js';
+export { DateInput } from './date-input/DateInput.js';
+export { DatePicker } from './date-picker/DatePicker.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 { useEditableText } from './editable/useEditableText.js';
+export { EditableLabel, NullEditAPI } from './editable-label/EditableLabel.js';
+export { ExpandoInput } from './expando-input/ExpandoInput.js';
+export { HoverOverlay } from './hover-overlay/HoverOverlay.js';
+export { Icon } from './icon-button/Icon.js';
+export { IconButton } from './icon-button/IconButton.js';
+export { ToggleIconButton } from './icon-button/ToggleIconButton.js';
+export { TablePicker } from './instrument-picker/TablePicker.js';
+export { MeasuredContainer } from './measured-container/MeasuredContainer.js';
+export { reduceSizeHeight, useMeasuredContainer } from './measured-container/useMeasuredContainer.js';
+export { ModalProvider, useModal } from './modal-provider/ModalProvider.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 { Prompt } from './prompt/Prompt.js';
+export { SortableList, SortableOption } from './sortable-list/SortableList.js';
+export { SplitButton } from './split-button/SplitButton.js';
+export { SplitStateButton } from './split-button/SplitStateButton.js';
+export { TableSearch } from './table-search/TableSearch.js';
+export { TabNext } from './tabs-next/TabNext.js';
+export { TabListNext } from './tabs-next/TabListNext.js';
+export { TabsNext } from './tabs-next/TabsNext.js';
+export { TabNextPanel } from './tabs-next/TabNextPanel.js';
+export { TabBar } from './tabs-next/TabBar.js';
+export { TabNextTrigger } from './tabs-next/TabNextTrigger.js';
+export { TabNextAction } from './tabs-next/TabNextAction.js';
+export { Tabstrip } from './tabstrip/Tabstrip.js';
+export { Tab } from './tabstrip/Tab.js';
+export { getIndexOfEditedItem, getIndexOfSelectedTab } from './tabstrip/tabstrip-dom-utils.js';
+export { TimeInput } from './time-input/TimeInput.js';
+export { Toolbar } from './toolbar/Toolbar.js';
+export { escapeRegExp } from './utils/escapeRegExp.js';
+export { isOverflowElement } from './utils/isOverflowElement.js';
+export { isPlainObject } from './utils/isPlainObject.js';
+export { forwardCallbackProps } from './utils/forwardCallbackProps.js';
+export { VuuDatePicker } from './vuu-date-picker/VuuDatePicker.js';
+export { VuuInput } from './vuu-input/VuuInput.js';
+export { VuuTimePicker } from './vuu-time-picker/VuuTimePicker.js';
+export { VuuTypeaheadInput } from './vuu-typeahead-input/VuuTypeaheadInput.js';
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

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

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

@@ -0,0 +1,4 @@
+var tablePickerCss = ".vuuTablePicker {\n  border-radius: 6px;\n  height: var(--salt-size-base);\n  padding: 1px;\n  box-sizing: content-box;\n}\n\n.vuuTablePicker-floating-table {\n  border: solid 1px var(--salt-container-secondary-borderColor);\n  border-radius: 4px;\n  overflow: auto;\n  padding: var(--salt-spacing-100) 0;\n  z-index: var(--salt-zIndex-popout);\n}\n\n[data-floating-ui-portal] [data-floating-ui-portal] .vuuTablePicker-floating-table {\n  z-index: calc(var(--salt-zIndex-modal) + var(--salt-zIndex-popout));\n}\n";
+
+export { tablePickerCss as default };
+//# sourceMappingURL=TablePicker.css.js.map

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

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

package/esm/instrument-picker/TablePicker.js

@@ -0,0 +1,128 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Table } from '@vuu-ui/vuu-table';
+import { useFloatingComponent, useIdMemo, Input } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import cx from 'clsx';
+import { forwardRef, useMemo } from 'react';
+import { IconButton } from '../icon-button/IconButton.js';
+import tablePickerCss from './TablePicker.css.js';
+import { useTablePicker } from './useTablePicker.js';
+
+const classBase = "vuuTablePicker";
+const FloatingTable = forwardRef(
+  function FloatingTable2({ children, className, collapsed, open, ...props }, forwardedRef) {
+    const { Component: FloatingComponent } = useFloatingComponent();
+    return /* @__PURE__ */ jsx(
+      FloatingComponent,
+      {
+        className: cx(
+          `${classBase}-floating-table`,
+          {
+            [`${classBase}-collapsed`]: collapsed
+          },
+          className
+        ),
+        role: "listbox",
+        open,
+        ...props,
+        ref: forwardedRef,
+        children
+      }
+    );
+  }
+);
+const TablePicker = ({
+  TableProps,
+  onSelect,
+  rowToString,
+  schema,
+  searchColumns,
+  ...htmlAttributes
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-table-picker",
+    css: tablePickerCss,
+    window: targetWindow
+  });
+  const tableId = useIdMemo();
+  const {
+    containerRef,
+    dataSource,
+    highlightedIndex,
+    floatingUIProps: { x, y, strategy, floating, reference },
+    inputProps,
+    interactionPropGetters: { getFloatingProps, getReferenceProps },
+    onKeyDown,
+    open,
+    tableConfig,
+    tableHandlers,
+    tableRef,
+    value,
+    width
+  } = useTablePicker({
+    TableProps,
+    rowToString,
+    onSelect,
+    schema,
+    searchColumns
+  });
+  const endAdornment = useMemo(
+    () => /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        ...getReferenceProps(),
+        appearance: "transparent",
+        "data-embedded": true,
+        ref: reference,
+        icon: "chevron-down",
+        onKeyDown,
+        sentiment: "neutral"
+      }
+    ),
+    [getReferenceProps, onKeyDown, reference]
+  );
+  return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: classBase, ref: containerRef, children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        ...inputProps,
+        bordered: true,
+        endAdornment,
+        value
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FloatingTable,
+      {
+        ...getFloatingProps(),
+        collapsed: !open,
+        id: tableId,
+        open,
+        left: x + 3,
+        position: strategy,
+        ref: floating,
+        top: y + 3,
+        children: /* @__PURE__ */ jsx(
+          Table,
+          {
+            ...tableHandlers,
+            config: tableConfig,
+            dataSource,
+            highlightedIndex,
+            maxViewportRowLimit: 10,
+            navigationStyle: "row",
+            ref: tableRef,
+            selectionModel: "single",
+            showColumnHeaders: false,
+            width: width - 3
+          }
+        )
+      }
+    )
+  ] });
+};
+
+export { TablePicker };
+//# sourceMappingURL=TablePicker.js.map

package/esm/instrument-picker/TablePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TablePicker.js","sources":["../../../../packages/vuu-ui-controls/src/instrument-picker/TablePicker.tsx"],"sourcesContent":["import type { TableSchema } from \"@vuu-ui/vuu-data-types\";\nimport { Table, type TableProps } from \"@vuu-ui/vuu-table\";\nimport {\n  Input,\n  useFloatingComponent,\n  useIdMemo,\n  type FloatingComponentProps,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { forwardRef, useMemo, type HTMLAttributes } from \"react\";\nimport { IconButton } from \"../icon-button\";\nimport tablePickerCss from \"./TablePicker.css\";\nimport { useTablePicker } from \"./useTablePicker\";\nimport { DataRow } from \"@vuu-ui/vuu-table-types\";\n\nconst classBase = \"vuuTablePicker\";\n\ninterface FloatingTableProps extends FloatingComponentProps {\n  collapsed?: boolean;\n}\n\nexport interface TablePickerProps\n  extends Omit<HTMLAttributes<HTMLElement>, \"onSelect\">,\n    Pick<TableProps, \"onSelect\"> {\n  TableProps?: Pick<TableProps, \"config\">;\n  rowToString?: (dataRow: DataRow) => string;\n  schema: TableSchema;\n  searchColumns?: string[];\n}\n\nconst FloatingTable = forwardRef<HTMLDivElement, FloatingTableProps>(\n  function FloatingTable(\n    { children, className, collapsed, open, ...props },\n    forwardedRef,\n  ) {\n    const { Component: FloatingComponent } = useFloatingComponent();\n    return (\n      <FloatingComponent\n        className={cx(\n          `${classBase}-floating-table`,\n          {\n            [`${classBase}-collapsed`]: collapsed,\n          },\n          className,\n        )}\n        role=\"listbox\"\n        open={open}\n        {...props}\n        ref={forwardedRef}\n      >\n        {children}\n      </FloatingComponent>\n    );\n  },\n);\n\nexport const TablePicker = ({\n  TableProps,\n  onSelect,\n  rowToString,\n  schema,\n  searchColumns,\n  ...htmlAttributes\n}: TablePickerProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-picker\",\n    css: tablePickerCss,\n    window: targetWindow,\n  });\n\n  const tableId = useIdMemo();\n\n  const {\n    containerRef,\n    dataSource,\n    highlightedIndex,\n    floatingUIProps: { x, y, strategy, floating, reference },\n    inputProps,\n    interactionPropGetters: { getFloatingProps, getReferenceProps },\n    onKeyDown,\n    open,\n    tableConfig,\n    tableHandlers,\n    tableRef,\n    value,\n    width,\n  } = useTablePicker({\n    TableProps,\n    rowToString,\n    onSelect,\n    schema,\n    searchColumns,\n  });\n\n  const endAdornment = useMemo(\n    () => (\n      <IconButton\n        {...getReferenceProps()}\n        appearance=\"transparent\"\n        data-embedded\n        ref={reference}\n        icon=\"chevron-down\"\n        onKeyDown={onKeyDown}\n        sentiment=\"neutral\"\n      />\n    ),\n    [getReferenceProps, onKeyDown, reference],\n  );\n\n  return (\n    <div {...htmlAttributes} className={classBase} ref={containerRef}>\n      <Input\n        {...inputProps}\n        bordered\n        endAdornment={endAdornment}\n        value={value}\n      />\n      <FloatingTable\n        {...getFloatingProps()}\n        collapsed={!open}\n        id={tableId}\n        open={open}\n        left={x + 3}\n        position={strategy}\n        ref={floating}\n        top={y + 3}\n      >\n        <Table\n          {...tableHandlers}\n          config={tableConfig}\n          dataSource={dataSource}\n          highlightedIndex={highlightedIndex}\n          maxViewportRowLimit={10}\n          navigationStyle=\"row\"\n          ref={tableRef}\n          selectionModel=\"single\"\n          showColumnHeaders={false}\n          width={width - 3}\n        />\n      </FloatingTable>\n    </div>\n  );\n};\n"],"names":["FloatingTable"],"mappings":"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"}

package/esm/instrument-picker/useTablePicker.js

@@ -0,0 +1,148 @@
+import { size, flip, useInteractions, useDismiss, useClick } from '@floating-ui/react';
+import { useFloatingUI } from '@salt-ds/core';
+import { useState, useRef, useCallback, useMemo } from 'react';
+import { useData, isStringColumn, toColumnName } from '@vuu-ui/vuu-utils';
+import { useControlledTableNavigation, isNavigationKey, isRowSelectionKey } from '@vuu-ui/vuu-table';
+
+const defaultRowToString = (dataRow) => Object.values(dataRow).join(" ");
+const useTablePicker = ({
+  TableProps,
+  onSelect,
+  rowToString = defaultRowToString,
+  schema,
+  searchColumns = schema.columns.filter(isStringColumn).map(toColumnName)
+}) => {
+  const { VuuDataSource } = useData();
+  const [value, setValue] = useState("");
+  const [open, setOpen] = useState(false);
+  const widthRef = useRef(-1);
+  const tableColumns = TableProps?.config.columns;
+  const containerRef = useCallback((el) => {
+    widthRef.current = el?.clientWidth ?? -1;
+  }, []);
+  const dataSource = useMemo(() => {
+    const columns = tableColumns ?? schema.columns;
+    return new VuuDataSource({
+      columns: columns.map((c) => c.name),
+      table: schema.table
+    });
+  }, [tableColumns, VuuDataSource, schema]);
+  const navigation = 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 { context, elements, ...floatingUIProps } = useFloatingUI({
+    open,
+    onOpenChange: setOpen,
+    placement: "bottom-end",
+    strategy: "fixed",
+    middleware: [
+      size({
+        apply({ rects, elements: elements2, availableHeight }) {
+          Object.assign(elements2.floating.style, {
+            minWidth: `${rects.reference.width}px`,
+            maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`
+          });
+        }
+      }),
+      flip({ fallbackStrategy: "initialPlacement" })
+    ]
+  });
+  const interactionPropGetters = useInteractions([
+    useDismiss(context),
+    useClick(context, { keyboardHandlers: false, toggle: false })
+  ]);
+  const handleInputChange = useCallback(
+    (evt) => {
+      const { value: value2 } = evt.target;
+      setValue(value2);
+      console.log(`input changed ${value2}`);
+      if (value2 && value2.trim().length) {
+        const filter = baseFilterPattern.replaceAll("__VALUE__", value2);
+        dataSource.filter = {
+          filter
+        };
+      } else {
+        dataSource.filter = {
+          filter: ""
+        };
+      }
+    },
+    [baseFilterPattern, dataSource]
+  );
+  const handleSelectRow = useCallback(
+    (dataRow) => {
+      const value2 = dataRow === null ? "" : rowToString(dataRow);
+      setValue(value2);
+      onSelect?.(dataRow);
+      requestAnimationFrame(() => {
+        setOpen(false);
+      });
+    },
+    [onSelect, rowToString]
+  );
+  const handleKeyDown = useCallback(
+    (evt) => {
+      if (open) {
+        if (isNavigationKey(evt.key, "row") || isRowSelectionKey(evt.key)) {
+          navigation.onKeyDown(evt);
+        }
+      } else {
+        if (evt.key === "ArrowDown" || evt.key === "Enter") {
+          setOpen(true);
+        }
+      }
+    },
+    [navigation, open]
+  );
+  const inputProps = {
+    inputProps: {
+      autoComplete: "off",
+      onKeyDown: handleKeyDown
+    },
+    onChange: handleInputChange
+  };
+  const tableHandlers = {
+    onSelect: handleSelectRow
+  };
+  const tableConfig = useMemo(() => {
+    const config = TableProps?.config;
+    if (config) {
+      const {
+        columns = schema.columns,
+        columnLayout = "fit",
+        ...rest
+      } = config;
+      return {
+        columns,
+        columnLayout,
+        ...rest
+      };
+    } else {
+      return {
+        columnLayout: "fit",
+        columns: schema.columns
+      };
+    }
+  }, [TableProps, schema]);
+  return {
+    containerRef,
+    dataSource,
+    highlightedIndex: navigation.highlightedIndexRef.current,
+    floatingUIProps,
+    inputProps,
+    interactionPropGetters,
+    onKeyDown: handleKeyDown,
+    open,
+    tableConfig,
+    tableHandlers,
+    tableRef: navigation.tableRef,
+    value,
+    width: widthRef.current
+  };
+};
+
+export { useTablePicker };
+//# sourceMappingURL=useTablePicker.js.map

package/esm/instrument-picker/useTablePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTablePicker.js","sources":["../../../../packages/vuu-ui-controls/src/instrument-picker/useTablePicker.ts"],"sourcesContent":["import {\n  flip,\n  size,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { useFloatingUI } from \"@salt-ds/core\";\nimport {\n  ChangeEvent,\n  KeyboardEventHandler,\n  RefCallback,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type {\n  DataRow,\n  TableConfig,\n  TableRowSelectHandler,\n} from \"@vuu-ui/vuu-table-types\";\nimport { isStringColumn, toColumnName, useData } from \"@vuu-ui/vuu-utils\";\nimport type { TablePickerProps } from \"./TablePicker\";\nimport {\n  isNavigationKey,\n  isRowSelectionKey,\n  useControlledTableNavigation,\n} from \"@vuu-ui/vuu-table\";\n\nexport interface TablePickerHookProps\n  extends Pick<\n    TablePickerProps,\n    \"TableProps\" | \"onSelect\" | \"rowToString\" | \"schema\" | \"searchColumns\"\n  > {\n  defaultIsOpen?: boolean;\n  isOpen?: boolean;\n}\n\nconst defaultRowToString = (dataRow: DataRow) =>\n  Object.values(dataRow).join(\" \");\n\nexport const useTablePicker = ({\n  TableProps,\n  onSelect,\n  rowToString = defaultRowToString,\n  schema,\n  searchColumns = schema.columns.filter(isStringColumn).map(toColumnName),\n}: TablePickerHookProps) => {\n  const { VuuDataSource } = useData();\n  const [value, setValue] = useState(\"\");\n  const [open, setOpen] = useState(false);\n\n  const widthRef = useRef(-1);\n\n  const tableColumns = TableProps?.config.columns;\n\n  const containerRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    widthRef.current = el?.clientWidth ?? -1;\n  }, []);\n\n  const dataSource = useMemo(() => {\n    const columns = tableColumns ?? schema.columns;\n\n    return new VuuDataSource({\n      columns: columns.map((c) => c.name),\n      table: schema.table,\n    });\n  }, [tableColumns, VuuDataSource, schema]);\n\n  const navigation = 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 { context, elements, ...floatingUIProps } = useFloatingUI({\n    open,\n    onOpenChange: setOpen,\n    placement: \"bottom-end\",\n    strategy: \"fixed\",\n    middleware: [\n      size({\n        apply({ rects, elements, availableHeight }) {\n          Object.assign(elements.floating.style, {\n            minWidth: `${rects.reference.width}px`,\n            maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`,\n          });\n        },\n      }),\n      flip({ fallbackStrategy: \"initialPlacement\" }),\n    ],\n  });\n\n  const interactionPropGetters = useInteractions([\n    useDismiss(context),\n    useClick(context, { keyboardHandlers: false, toggle: false }),\n  ]);\n\n  const handleInputChange = useCallback(\n    (evt: ChangeEvent<HTMLInputElement>) => {\n      const { value } = evt.target;\n      setValue(value);\n\n      console.log(`input changed ${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    [baseFilterPattern, dataSource],\n  );\n\n  const handleSelectRow = useCallback<TableRowSelectHandler>(\n    (dataRow) => {\n      const value = dataRow === null ? \"\" : rowToString(dataRow);\n      setValue(value);\n      onSelect?.(dataRow);\n      // TODO do we need to include a reason ?\n      requestAnimationFrame(() => {\n        setOpen(false);\n      });\n    },\n    [onSelect, rowToString],\n  );\n\n  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLElement>>(\n    (evt) => {\n      if (open) {\n        if (isNavigationKey(evt.key, \"row\") || isRowSelectionKey(evt.key)) {\n          navigation.onKeyDown(evt);\n        }\n      } else {\n        if (evt.key === \"ArrowDown\" || evt.key === \"Enter\") {\n          setOpen(true);\n        }\n      }\n    },\n    [navigation, open],\n  );\n\n  const inputProps = {\n    inputProps: {\n      autoComplete: \"off\",\n      onKeyDown: handleKeyDown,\n    },\n    onChange: handleInputChange,\n  };\n  const tableHandlers = {\n    onSelect: handleSelectRow,\n  };\n\n  const tableConfig = useMemo<TableConfig>(() => {\n    const config = TableProps?.config;\n    if (config) {\n      const {\n        columns = schema.columns,\n        columnLayout = \"fit\",\n        ...rest\n      } = config;\n      return {\n        columns,\n        columnLayout,\n        ...rest,\n      };\n    } else {\n      return {\n        columnLayout: \"fit\",\n        columns: schema.columns,\n      };\n    }\n  }, [TableProps, schema]);\n\n  return {\n    containerRef,\n    dataSource,\n    highlightedIndex: navigation.highlightedIndexRef.current,\n    floatingUIProps,\n    inputProps,\n    interactionPropGetters,\n    onKeyDown: handleKeyDown,\n    open,\n    tableConfig,\n    tableHandlers,\n    tableRef: navigation.tableRef,\n    value,\n    width: widthRef.current,\n  };\n};\n"],"names":["elements","value"],"mappings":"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"}

package/esm/measured-container/MeasuredContainer.css.js

@@ -0,0 +1,4 @@
+var measuredContainerCss = "\n.vuuMeasuredContainer {\n    flex: var(--vuuMeasuredContainer-flex, none);\n    height: var(--vuuMeasuredContainer-height, var(--measured-css-height));\n    min-height: 0;\n    width: var(--measured-css-width);\n  \n}";
+
+export { measuredContainerCss as default };
+//# sourceMappingURL=MeasuredContainer.css.js.map