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

package/esm/prompt/Prompt.js

@@ -0,0 +1,140 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Dialog, DialogHeader, DialogContent, DialogActions, Button } from '@salt-ds/core';
+import cx from 'clsx';
+import { useCallback } from 'react';
+import { Icon } from '../icon-button/Icon.js';
+import { IconButton } from '../icon-button/IconButton.js';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import promptCss from './Prompt.css.js';
+
+const classBase = "vuuPrompt";
+const Prompt = ({
+  children,
+  className,
+  cancelButtonLabel = "Cancel",
+  cancelButtonProps,
+  confirmButtonLabel = "Confirm",
+  confirmButtonProps,
+  customAction = null,
+  disableAccent,
+  icon,
+  initialFocusedItem,
+  onCancel,
+  onClose,
+  onConfirm,
+  onOpenChange,
+  open,
+  showCancelButton = true,
+  showCloseButton = true,
+  showConfirmButton = true,
+  status,
+  title,
+  ...htmlAttributes
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-prompt-next",
+    css: promptCss,
+    window: targetWindow
+  });
+  const close = useCallback(() => {
+    onClose?.();
+    onOpenChange?.(false);
+  }, [onClose, onOpenChange]);
+  const callbackRef = useCallback(
+    (el) => {
+      if (el) {
+        let target = null;
+        if (initialFocusedItem === "confirm" && showConfirmButton) {
+          target = el.querySelector(".vuuPromptConfirmButton");
+        } else if (initialFocusedItem === "cancel" && showCancelButton) {
+          target = el.querySelector(".vuuPromptCancelButton");
+        } else if (initialFocusedItem === "close" && showCloseButton) {
+          target = el.querySelector(".vuuPromptCloseButton");
+        }
+        if (target) {
+          setTimeout(() => {
+            target.focus();
+          }, 200);
+        }
+      }
+    },
+    [initialFocusedItem, showCancelButton, showCloseButton, showConfirmButton]
+  );
+  const handleCancel = useCallback(() => {
+    onCancel?.();
+    close();
+  }, [close, onCancel]);
+  const handleConfirm = useCallback(() => {
+    if (onConfirm?.() !== false) {
+      close();
+    }
+  }, [close, onConfirm]);
+  const actions = showCloseButton ? /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      appearance: "transparent",
+      className: "vuuPromptCloseButton",
+      "data-embedded": true,
+      icon: "close",
+      onClick: close
+    }
+  ) : null;
+  const header = icon ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Icon, { name: icon }),
+    /* @__PURE__ */ jsx("span", { children: title })
+  ] }) : title;
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      ...htmlAttributes,
+      className: cx(classBase, className),
+      onOpenChange,
+      open,
+      ref: callbackRef,
+      status,
+      children: [
+        /* @__PURE__ */ jsx(
+          DialogHeader,
+          {
+            disableAccent,
+            header,
+            actions
+          }
+        ),
+        /* @__PURE__ */ jsx(DialogContent, { children }),
+        /* @__PURE__ */ jsxs(DialogActions, { children: [
+          customAction,
+          showCancelButton ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              appearance: "solid",
+              className: "vuuPromptCancelButton",
+              disabled: cancelButtonProps?.disabled,
+              onClick: handleCancel,
+              ref: cancelButtonProps?.ref,
+              sentiment: "neutral",
+              children: cancelButtonProps?.label ?? cancelButtonLabel
+            }
+          ) : null,
+          showConfirmButton ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              appearance: "solid",
+              className: "vuuPromptConfirmButton",
+              disabled: confirmButtonProps?.disabled,
+              sentiment: "accented",
+              onClick: handleConfirm,
+              ref: confirmButtonProps?.ref,
+              children: confirmButtonProps?.label ?? confirmButtonLabel
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+};
+
+export { Prompt };
+//# sourceMappingURL=Prompt.js.map

package/esm/prompt/Prompt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Prompt.js","sources":["../../../../packages/vuu-ui-controls/src/prompt/Prompt.tsx"],"sourcesContent":["import {\n  Button,\n  Dialog,\n  DialogActions,\n  DialogContent,\n  DialogHeader,\n  DialogHeaderProps,\n  DialogProps,\n} from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport {\n  HTMLAttributes,\n  MouseEventHandler,\n  ReactNode,\n  RefCallback,\n  RefObject,\n  useCallback,\n} from \"react\";\nimport { Icon, IconButton } from \"../icon-button\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport promptCss from \"./Prompt.css\";\n\nconst classBase = \"vuuPrompt\";\n\n/**\n * Allow fine grained configuration of Prompt buttons\n * The ref is provided to facilitate programmatic focus.\n */\nexport interface PromptButtonProps {\n  disabled?: boolean;\n  label?: string;\n  ref?: RefObject<HTMLButtonElement | null>;\n}\n\nexport interface PromptProps\n  extends Pick<DialogProps, \"onOpenChange\" | \"open\" | \"status\">,\n    Pick<DialogHeaderProps, \"disableAccent\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"content\" | \"title\"> {\n  /**\n   * For simple configuration, where just a cancel button label is required.\n   */\n  cancelButtonLabel?: string;\n  /**\n   * Allow fine grained configuration of cancel button\n   */\n  cancelButtonProps?: PromptButtonProps;\n  /**\n   * For simple configuration, where just a confirm button label is required.\n   */\n  confirmButtonLabel?: string;\n  /**\n   * Allow fine grained configuration of confirm button\n   */\n  confirmButtonProps?: PromptButtonProps;\n\n  /**\n   * A custom action will be displayed in Prompt button bar, before cancel/confirm buttons.\n   */\n  customAction?: ReactNode;\n  icon?: string;\n  /**\n   * Set this prop if one of the three built-in buttons should receive initial focus.\n   * Allows user to quickly dismiss/confirm prompt from keyboard. If the prompt content\n   * contains focusable item(s), focus should be controlled by caller.\n   */\n  initialFocusedItem?: \"confirm\" | \"cancel\" | \"close\";\n  onCancel?: () => void;\n  onConfirm?: () => void | false;\n  onClose?: () => void;\n  showCancelButton?: boolean;\n  showCloseButton?: boolean;\n  showConfirmButton?: boolean;\n  title: string;\n}\n\nexport const Prompt = ({\n  children,\n  className,\n  cancelButtonLabel = \"Cancel\",\n  cancelButtonProps,\n  confirmButtonLabel = \"Confirm\",\n  confirmButtonProps,\n  customAction = null,\n  disableAccent,\n  icon,\n  initialFocusedItem,\n  onCancel,\n  onClose,\n  onConfirm,\n  onOpenChange,\n  open,\n  showCancelButton = true,\n  showCloseButton = true,\n  showConfirmButton = true,\n  status,\n  title,\n\n  ...htmlAttributes\n}: PromptProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-prompt-next\",\n    css: promptCss,\n    window: targetWindow,\n  });\n\n  const close = useCallback(() => {\n    onClose?.();\n    onOpenChange?.(false);\n  }, [onClose, onOpenChange]);\n\n  const callbackRef = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      if (el) {\n        let target: HTMLButtonElement | null = null;\n        if (initialFocusedItem === \"confirm\" && showConfirmButton) {\n          target = el.querySelector(\".vuuPromptConfirmButton\");\n        } else if (initialFocusedItem === \"cancel\" && showCancelButton) {\n          target = el.querySelector(\".vuuPromptCancelButton\");\n        } else if (initialFocusedItem === \"close\" && showCloseButton) {\n          target = el.querySelector(\".vuuPromptCloseButton\");\n        }\n\n        if (target) {\n          setTimeout(() => {\n            target.focus();\n          }, 200);\n        }\n      }\n    },\n    [initialFocusedItem, showCancelButton, showCloseButton, showConfirmButton],\n  );\n\n  const handleCancel = useCallback<MouseEventHandler<HTMLButtonElement>>(() => {\n    onCancel?.();\n    close();\n  }, [close, onCancel]);\n\n  const handleConfirm = useCallback<\n    MouseEventHandler<HTMLButtonElement>\n  >(() => {\n    if (onConfirm?.() !== false) {\n      close();\n    }\n  }, [close, onConfirm]);\n\n  const actions = showCloseButton ? (\n    <IconButton\n      appearance=\"transparent\"\n      className=\"vuuPromptCloseButton\"\n      data-embedded\n      icon=\"close\"\n      onClick={close}\n    />\n  ) : null;\n\n  const header = icon ? (\n    <>\n      <Icon name={icon} />\n      <span>{title}</span>\n    </>\n  ) : (\n    title\n  );\n\n  return (\n    <Dialog\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      onOpenChange={onOpenChange}\n      open={open}\n      ref={callbackRef}\n      status={status}\n    >\n      <DialogHeader\n        disableAccent={disableAccent}\n        header={header}\n        actions={actions}\n      />\n      <DialogContent>{children}</DialogContent>\n      <DialogActions>\n        {customAction}\n        {showCancelButton ? (\n          <Button\n            appearance=\"solid\"\n            className=\"vuuPromptCancelButton\"\n            disabled={cancelButtonProps?.disabled}\n            onClick={handleCancel}\n            ref={cancelButtonProps?.ref}\n            sentiment=\"neutral\"\n          >\n            {cancelButtonProps?.label ?? cancelButtonLabel}\n          </Button>\n        ) : null}\n        {showConfirmButton ? (\n          <Button\n            appearance=\"solid\"\n            className=\"vuuPromptConfirmButton\"\n            disabled={confirmButtonProps?.disabled}\n            sentiment=\"accented\"\n            onClick={handleConfirm}\n            ref={confirmButtonProps?.ref}\n          >\n            {confirmButtonProps?.label ?? confirmButtonLabel}\n          </Button>\n        ) : null}\n      </DialogActions>\n    </Dialog>\n  );\n};\n"],"names":[],"mappings":"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"}

package/esm/sortable-list/SortableList.js

@@ -0,0 +1,34 @@
+import { jsx } from 'react/jsx-runtime';
+import { Option, ListBox } from '@salt-ds/core';
+import { useSortable, DragDropProvider } from '@vuu-ui/vuu-utils';
+import { useRef, useCallback } from 'react';
+
+const SortableOption = ({
+  id,
+  index,
+  value,
+  ...optionProps
+}) => {
+  const { ref } = useSortable({ id, index });
+  return /* @__PURE__ */ jsx(Option, { ...optionProps, id, ref, value });
+};
+const SortableList = ({
+  children,
+  onReorderListItems,
+  ...listBoxProps
+}) => {
+  const listRef = useRef(null);
+  const handleDragEnd = useCallback(() => {
+    setTimeout(() => {
+      const listItems = listRef.current?.querySelectorAll(".saltOption");
+      if (listItems) {
+        const items = Array.from(listItems).map(({ id }) => id);
+        onReorderListItems?.(items);
+      }
+    }, 300);
+  }, [onReorderListItems]);
+  return /* @__PURE__ */ jsx(DragDropProvider, { onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx(ListBox, { ...listBoxProps, ref: listRef, children }) });
+};
+
+export { SortableList, SortableOption };
+//# sourceMappingURL=SortableList.js.map

package/esm/sortable-list/SortableList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableList.js","sources":["../../../../packages/vuu-ui-controls/src/sortable-list/SortableList.tsx"],"sourcesContent":["import { ListBox, ListBoxProps, Option, OptionProps } from \"@salt-ds/core\";\nimport { DragDropProvider, useSortable } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useRef } from \"react\";\n\nexport const SortableOption = ({\n  id,\n  index,\n  value,\n  ...optionProps\n}: OptionProps & { id: string; index: number }) => {\n  const { ref } = useSortable({ id, index });\n  return <Option {...optionProps} id={id} ref={ref} value={value} />;\n};\n\nexport const SortableList = ({\n  children,\n  onReorderListItems,\n  ...listBoxProps\n}: ListBoxProps & {\n  onReorderListItems?: (listItems: unknown[]) => void;\n}) => {\n  const listRef = useRef<HTMLDivElement>(null);\n  const handleDragEnd = useCallback(() => {\n    setTimeout(() => {\n      const listItems = listRef.current?.querySelectorAll(\".saltOption\");\n      if (listItems) {\n        const items = Array.from(listItems).map(({ id }) => id);\n        onReorderListItems?.(items);\n      }\n    }, 300);\n  }, [onReorderListItems]);\n\n  return (\n    <DragDropProvider onDragEnd={handleDragEnd}>\n      <ListBox {...listBoxProps} ref={listRef}>\n        {children}\n      </ListBox>\n    </DragDropProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;AAIO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,EAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAmD,KAAA;AACjD,EAAA,MAAM,EAAE,GAAI,EAAA,GAAI,YAAY,EAAE,EAAA,EAAI,OAAO,CAAA;AACzC,EAAA,2BAAQ,MAAQ,EAAA,EAAA,GAAG,WAAa,EAAA,EAAA,EAAQ,KAAU,KAAc,EAAA,CAAA;AAClE;AAEO,MAAM,eAAe,CAAC;AAAA,EAC3B,QAAA;AAAA,EACA,kBAAA;AAAA,EACA,GAAG;AACL,CAEM,KAAA;AACJ,EAAM,MAAA,OAAA,GAAU,OAAuB,IAAI,CAAA;AAC3C,EAAM,MAAA,aAAA,GAAgB,YAAY,MAAM;AACtC,IAAA,UAAA,CAAW,MAAM;AACf,MAAA,MAAM,SAAY,GAAA,OAAA,CAAQ,OAAS,EAAA,gBAAA,CAAiB,aAAa,CAAA;AACjE,MAAA,IAAI,SAAW,EAAA;AACb,QAAM,MAAA,KAAA,GAAQ,KAAM,CAAA,IAAA,CAAK,SAAS,CAAA,CAAE,IAAI,CAAC,EAAE,EAAG,EAAA,KAAM,EAAE,CAAA;AACtD,QAAA,kBAAA,GAAqB,KAAK,CAAA;AAAA;AAC5B,OACC,GAAG,CAAA;AAAA,GACR,EAAG,CAAC,kBAAkB,CAAC,CAAA;AAEvB,EACE,uBAAA,GAAA,CAAC,gBAAiB,EAAA,EAAA,SAAA,EAAW,aAC3B,EAAA,QAAA,kBAAA,GAAA,CAAC,OAAS,EAAA,EAAA,GAAG,YAAc,EAAA,GAAA,EAAK,OAC7B,EAAA,QAAA,EACH,CACF,EAAA,CAAA;AAEJ;;;;"}

package/esm/split-button/SplitButton.css.js

@@ -0,0 +1,4 @@
+var splitButtonCss = ".vuuSplitButton {\n  --saltButton-background: var(--split-background);\n  --saltButton-background-hover: var(--split-background);\n  --vuuPopupMenu-background: var(--split-background);\n  --vuuPopupMenu-iconSize: 20px;\n\n  /** less verbose local refs */\n  --background: var(--vuuSplitButton-background);\n  --foreground: var(--vuuSplitButton-foreground);\n  --background-hover: var(--vuuSplitButton-background-hover);\n  --foreground-hover: var(--vuuSplitButton-foreground-hover);\n\n  --border-radius: var(--vuuSplitButton-borderRadius, var(--salt-palette-corner-weaker));\n  --main-border-radius: var(--border-radius) 0 0 var(--border-radius);\n  --trigger-border-radius: 0 var(--border-radius) var(--border-radius) 0;\n  --trigger-border-style: solid solid solid none;\n\n  align-items: center;\n  border: none;\n  border-radius: var(--border-radius);\n  display: flex;\n\n  .vuuSplitButton-main {\n    border-radius: var(--main-border-radius);\n  }\n  .vuuSplitButton-trigger {\n    border-radius: var(--trigger-border-radius);\n  }\n}\n\n.vuuSplitButton.vuuFocusVisible {\n  .saltButton {\n    outline-style: none;\n  }\n  &.vuuSplitButton-primary {\n    --split-background: var(\n      --background-hover,\n      var(--salt-actionable-bold-background-hover)\n    );\n  }\n  &.vuuSplitButton-secondary {\n    --split-background: var(\n      --background-hover,\n      var(--salt-actionable-subtle-background-hover)\n    );\n  }\n  &.vuuSplitButton-cta {\n    --split-background: var(\n      --background-hover,\n      var(--salt-actionable-accented-bold-background-hover)\n    );\n    .vuuSplitButton-trigger {\n      --vuu-icon-color: var(--salt-actionable-bold-foreground-hover);\n    }\n  }\n}\n\n/** TODO move into theme */\n.vuuFocusVisible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.vuuSplitButton-primary {\n  --split-background: var(\n    --background,\n    var(--salt-actionable-bold-background)\n  );\n  --split-background-active: var(--salt-actionable-bold-background-active);\n  --split-color-active: var(--salt-actionable-bold-foreground-active);\n}\n\n.vuuSplitButton-primary:hover:not(.vuuSplitButton-disabled) {\n  --vuuButton-borderColor: var(--split-background);\n  --saltButton-borderColor: var(--split-background);\n  --split-background: var(\n    --background-hover,\n    var(--salt-actionable-bold-background-hover)\n  );\n  .saltButton {\n    --saltButton-text-color: var(--salt-actionable-bold-foreground-hover);\n  }\n}\n\n.vuuSplitButton-secondary {\n  --saltButton-borderColor: var(--split-background);\n  --split-background: var(\n    --background,\n    var(--salt-actionable-subtle-background)\n  );\n  --split-background-active: var(--salt-actionable-subtle-background-active);\n  --split-color-active: var(--salt-actionable-subtle-foreground-active);\n}\n\n.vuuSplitButton-secondary:hover:not(.vuuSplitButton-disabled) {\n  --vuuButton-borderColor: var(--split-background);\n  --split-background: var(--salt-actionable-subtle-background-hover);\n  .saltButton {\n    --saltButton-text-color: var(--salt-actionable-subtle-foreground-hover);\n  }\n}\n\n.vuuSplitButton-cta {\n  --split-background: var(--background, var(--salt-actionable-accented-bold-background));\n  --split-background-active: var(--salt-actionable-accented-bold-background-active);\n  --split-color-active: var(--salt-actionable-bold-foreground-active);\n}\n.vuuSplitButton-cta:hover:not(.vuuSplitButton-disabled) {\n  --vuuButton-borderColor: var(--split-background);\n  --split-background: var(--salt-actionable-accented-bold-background-hover);\n  --split-color: var(--salt-actionable-bold-foreground-hover);\n  .saltButton {\n    --saltButton-text-color: var(--salt-actionable-bold-foreground-hover);\n    --vuu-icon-color: var(--salt-actionable-bold-foreground-hover);\n  }\n}\n\n.vuuSplitButton:has(\n    .vuuSplitButton-main:active,\n    .vuuSplitButton-main.saltButton-active\n  ) {\n  --split-background: var(--split-background-active);\n  .vuuSplitButton-trigger {\n    --vuu-icon-color: var(--split-color-active);\n  }\n}\n";
+
+export { splitButtonCss as default };
+//# sourceMappingURL=SplitButton.css.js.map

package/esm/split-button/SplitButton.css.js.map

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

package/esm/split-button/SplitButton.js

@@ -0,0 +1,82 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useForkRef, Button } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { ContextMenuProvider } from '@vuu-ui/vuu-context-menu';
+import { PopupMenu } from '@vuu-ui/vuu-popups';
+import cx from 'clsx';
+import { forwardRef } from 'react';
+import { useSplitButton } from './useSplitButton.js';
+import splitButtonCss from './SplitButton.css.js';
+
+const classBase = "vuuSplitButton";
+const SplitButton = forwardRef(
+  function SplitButton2({
+    ButtonProps: ButtonPropsProp,
+    PopupMenuProps: PopupMenuPropsProp,
+    children,
+    className,
+    disabled = false,
+    onClick,
+    segmented = false,
+    variant = "primary",
+    ...htmlAttributes
+  }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "vuu-split-button",
+      css: splitButtonCss,
+      window: targetWindow
+    });
+    const { ButtonProps: ButtonProps2, buttonRef, rootRef, PopupMenuProps: PopupMenuProps2, ...rootProps } = useSplitButton({
+      ButtonProps: ButtonPropsProp,
+      PopupMenuProps: PopupMenuPropsProp,
+      classBase,
+      onClick,
+      segmented
+    });
+    return /* @__PURE__ */ jsx(ContextMenuProvider, { children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...htmlAttributes,
+        ...rootProps,
+        className: cx(classBase, `${classBase}-${variant}`, className, {
+          [`${classBase}-disabled`]: disabled,
+          [`${classBase}-segmented`]: segmented
+        }),
+        ref: useForkRef(forwardedRef, rootRef),
+        "data-showcase-center": true,
+        tabIndex: -1,
+        children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              ...ButtonProps2,
+              appearance: "solid",
+              className: `${classBase}-main`,
+              disabled,
+              ref: buttonRef,
+              sentiment: "neutral",
+              children
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PopupMenu,
+            {
+              ...PopupMenuProps2,
+              appearance: "solid",
+              className: `${classBase}-trigger`,
+              disabled,
+              icon: PopupMenuProps2?.icon ?? "chevron-down",
+              tabIndex: segmented ? 0 : -1,
+              sentiment: "neutral"
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+
+export { SplitButton };
+//# sourceMappingURL=SplitButton.js.map

package/esm/split-button/SplitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitButton.js","sources":["../../../../packages/vuu-ui-controls/src/split-button/SplitButton.tsx"],"sourcesContent":["import { Button, ButtonProps, useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ContextMenuProvider } from \"@vuu-ui/vuu-context-menu\";\nimport { PopupMenu, PopupMenuProps } from \"@vuu-ui/vuu-popups\";\nimport cx from \"clsx\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { useSplitButton } from \"./useSplitButton\";\n\nimport splitButtonCss from \"./SplitButton.css\";\n\nexport interface SplitButtonProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onClick\">,\n    Pick<ButtonProps, \"onClick\"> {\n  ButtonProps?: Partial<Omit<ButtonProps, \"onClick\" | \"variant\">>;\n  PopupMenuProps?: Partial<PopupMenuProps>;\n  disabled?: boolean;\n  segmented?: boolean;\n  variant?: ButtonProps[\"variant\"];\n}\n\nconst classBase = \"vuuSplitButton\";\n\nexport const SplitButton = forwardRef<HTMLDivElement, SplitButtonProps>(\n  function SplitButton(\n    {\n      ButtonProps: ButtonPropsProp,\n      PopupMenuProps: PopupMenuPropsProp,\n      children,\n      className,\n      disabled = false,\n      onClick,\n      segmented = false,\n      variant = \"primary\",\n      ...htmlAttributes\n    },\n    forwardedRef,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-split-button\",\n      css: splitButtonCss,\n      window: targetWindow,\n    });\n\n    const { ButtonProps, buttonRef, rootRef, PopupMenuProps, ...rootProps } =\n      useSplitButton({\n        ButtonProps: ButtonPropsProp,\n        PopupMenuProps: PopupMenuPropsProp,\n        classBase,\n        onClick,\n        segmented,\n      });\n\n    return (\n      <ContextMenuProvider>\n        <div\n          {...htmlAttributes}\n          {...rootProps}\n          className={cx(classBase, `${classBase}-${variant}`, className, {\n            [`${classBase}-disabled`]: disabled,\n            [`${classBase}-segmented`]: segmented,\n          })}\n          ref={useForkRef(forwardedRef, rootRef)}\n          data-showcase-center\n          tabIndex={-1}\n        >\n          <Button\n            {...ButtonProps}\n            appearance=\"solid\"\n            className={`${classBase}-main`}\n            disabled={disabled}\n            ref={buttonRef}\n            sentiment=\"neutral\"\n          >\n            {children}\n          </Button>\n          <PopupMenu\n            {...PopupMenuProps}\n            appearance=\"solid\"\n            className={`${classBase}-trigger`}\n            disabled={disabled}\n            icon={PopupMenuProps?.icon ?? \"chevron-down\"}\n            tabIndex={segmented ? 0 : -1}\n            sentiment=\"neutral\"\n          />\n        </div>\n      </ContextMenuProvider>\n    );\n  },\n);\n"],"names":["SplitButton","ButtonProps","PopupMenuProps"],"mappings":";;;;;;;;;;;AAqBA,MAAM,SAAY,GAAA,gBAAA;AAEX,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASA,YACP,CAAA;AAAA,IACE,WAAa,EAAA,eAAA;AAAA,IACb,cAAgB,EAAA,kBAAA;AAAA,IAChB,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,OAAA;AAAA,IACA,SAAY,GAAA,KAAA;AAAA,IACZ,OAAU,GAAA,SAAA;AAAA,IACV,GAAG;AAAA,KAEL,YACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAA,cAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,WAAAC,EAAAA,YAAAA,EAAa,SAAW,EAAA,OAAA,EAAS,gBAAAC,eAAgB,EAAA,GAAG,SAAU,EAAA,GACpE,cAAe,CAAA;AAAA,MACb,WAAa,EAAA,eAAA;AAAA,MACb,cAAgB,EAAA,kBAAA;AAAA,MAChB,SAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,KACD,CAAA;AAEH,IAAA,2BACG,mBACC,EAAA,EAAA,QAAA,kBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACH,GAAG,SAAA;AAAA,QACJ,SAAA,EAAW,GAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAI,CAAA,EAAA,OAAO,IAAI,SAAW,EAAA;AAAA,UAC7D,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,QAAA;AAAA,UAC3B,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG;AAAA,SAC7B,CAAA;AAAA,QACD,GAAA,EAAK,UAAW,CAAA,YAAA,EAAc,OAAO,CAAA;AAAA,QACrC,sBAAoB,EAAA,IAAA;AAAA,QACpB,QAAU,EAAA,CAAA,CAAA;AAAA,QAEV,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACE,GAAGD,YAAAA;AAAA,cACJ,UAAW,EAAA,OAAA;AAAA,cACX,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA;AAAA,cACvB,QAAA;AAAA,cACA,GAAK,EAAA,SAAA;AAAA,cACL,SAAU,EAAA,SAAA;AAAA,cAET;AAAA;AAAA,WACH;AAAA,0BACA,GAAA;AAAA,YAAC,SAAA;AAAA,YAAA;AAAA,cACE,GAAGC,eAAAA;AAAA,cACJ,UAAW,EAAA,OAAA;AAAA,cACX,SAAA,EAAW,GAAG,SAAS,CAAA,QAAA,CAAA;AAAA,cACvB,QAAA;AAAA,cACA,IAAA,EAAMA,iBAAgB,IAAQ,IAAA,cAAA;AAAA,cAC9B,QAAA,EAAU,YAAY,CAAI,GAAA,CAAA,CAAA;AAAA,cAC1B,SAAU,EAAA;AAAA;AAAA;AACZ;AAAA;AAAA,KAEJ,EAAA,CAAA;AAAA;AAGN;;;;"}

package/esm/split-button/SplitStateButton.css.js

@@ -0,0 +1,4 @@
+var splitStateButtonCss = ".vuuSplitStateButton {\n  --split-state-background: var(--salt-actionable-subtle-background);\n  --split-state-foreground: var(--salt-actionable-subtle-foreground);\n  --vuuSplitButton-background: var(--split-state-background);\n  --vuuSplitButton-foreground: var(--split-state-foreground);\n  --vuuSplitButton-background-hover: var(--split-state-background);\n  --vuuSplitButton-foreground-hover: var(--split-state-foreground);\n\n  .saltButton-primary:active,\n  .saltButton-primary.saltButton-active {\n    --saltButton-background-active: var(--salt-actionable-bold-background);\n    --saltButton-text-color-active: var(--salt-actionable-bold-foreground);\n  }\n}\n\n.vuuSplitStateButton[aria-checked=\"true\"] {\n  --vuuButtonIcon-color: var(--salt-actionable-bold-foreground-active);\n  --saltButton-text-color: var(--salt-actionable-bold-foreground-active);\n  --saltButton-text-color-hover: var(--salt-actionable-bold-foreground-active);\n  --split-state-background: var(--salt-actionable-bold-background-active);\n  --split-state-foreground: var(--salt-actionable-bold-foreground-active);\n  &.focusVisible {\n    --split-state-background: var(--salt-actionable-bold-background-active);\n  }\n}\n\n.vuuSplitStateButton[aria-checked=\"true\"] {\n  .vuuEditableLabel-input {\n    color: var(--salt-actionable-bold-foreground-active);\n  }\n}\n\n.vuuSplitButton-main.saltButton-active + .vuuSplitButton-trigger,\n.vuuSplitButton-main:active + .vuuSplitButton-trigger {\n  --saltButton-background: var(--salt-actionable-bold-background);\n  .vuuIcon {\n    --vuu-icon-color: var(--salt-actionable-bold-foreground);\n  }\n}\n\n/** These two entries are to prevent the 'active' styling when space is pressed whilst editing a label */\n.vuuSplitStateButton:has(.vuuEditableLabel-editing):has(\n    .vuuSplitButton-main:active,\n    .vuuSplitButton-main.saltButton-active\n  ) {\n  --split-background: var(--salt-actionable-subtle-background);\n  .saltButton-primary:active {\n    background: var(--salt-actionable-subtle-background);\n  }\n}\n.vuuSplitStateButton[aria-checked=\"true\"]:has(.vuuEditableLabel-editing):has(\n    .vuuSplitButton-main:active,\n    .vuuSplitButton-main.saltButton-active\n  ) {\n  --split-background: var(--salt-actionable-bold-background-active);\n  .saltButton-primary:active {\n    background: var(--salt-actionable-bold-background-active);\n  }\n}\n\n.vuuSplitStateButton:hover:not(.vuuSplitStateButton-disabled) {\n  .saltButton {\n    border-color: var(--salt-actionable-bold-foreground);\n  }\n}\n";
+
+export { splitStateButtonCss as default };
+//# sourceMappingURL=SplitStateButton.css.js.map

package/esm/split-button/SplitStateButton.css.js.map

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

package/esm/split-button/SplitStateButton.js

@@ -0,0 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
+import { SplitButton } from './SplitButton.js';
+import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { forwardRef } from 'react';
+import splitStateButtonCss from './SplitStateButton.css.js';
+
+const classBase = "vuuSplitStateButton";
+const SplitStateButton = forwardRef(function SplitStateButton2({ className, selected, ...splitButtonProps }, forwardedRef) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-split-state-button",
+    css: splitStateButtonCss,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx(
+    SplitButton,
+    {
+      ...splitButtonProps,
+      "aria-checked": selected,
+      className: cx(classBase, className),
+      ref: forwardedRef
+    }
+  );
+});
+
+export { SplitStateButton };
+//# sourceMappingURL=SplitStateButton.js.map

package/esm/split-button/SplitStateButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitStateButton.js","sources":["../../../../packages/vuu-ui-controls/src/split-button/SplitStateButton.tsx"],"sourcesContent":["import { SplitButton, SplitButtonProps } from \"./SplitButton\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { forwardRef } from \"react\";\n\nimport splitStateButtonCss from \"./SplitStateButton.css\";\n\nconst classBase = \"vuuSplitStateButton\";\n\nexport interface SplitStateButtonProps extends SplitButtonProps {\n  selected: boolean;\n}\n\nexport const SplitStateButton = forwardRef<\n  HTMLDivElement,\n  SplitStateButtonProps\n>(function SplitStateButton(\n  { className, selected, ...splitButtonProps },\n  forwardedRef\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-split-state-button\",\n    css: splitStateButtonCss,\n    window: targetWindow,\n  });\n\n  return (\n    <SplitButton\n      {...splitButtonProps}\n      aria-checked={selected}\n      className={cx(classBase, className)}\n      ref={forwardedRef}\n    />\n  );\n});\n"],"names":["SplitStateButton"],"mappings":";;;;;;;;AAQA,MAAM,SAAY,GAAA,qBAAA;AAML,MAAA,gBAAA,GAAmB,UAG9B,CAAA,SAASA,iBACT,CAAA,EAAE,WAAW,QAAU,EAAA,GAAG,gBAAiB,EAAA,EAC3C,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAA,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACE,GAAG,gBAAA;AAAA,MACJ,cAAc,EAAA,QAAA;AAAA,MACd,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAK,EAAA;AAAA;AAAA,GACP;AAEJ,CAAC;;;;"}

package/esm/split-button/useSplitButton.js

@@ -0,0 +1,82 @@
+import { dispatchMouseEvent } from '@vuu-ui/vuu-utils';
+import { useRef, useCallback } from 'react';
+
+const focusTargetIsEditableLabel = (target) => {
+  if (target.tagName === "INPUT") {
+    return true;
+  }
+  return false;
+};
+const useSplitButton = ({
+  ButtonProps: ButtonPropsProp,
+  PopupMenuProps: PopupMenuProps2,
+  classBase,
+  onClick
+}) => {
+  const buttonRef = useRef(null);
+  const rootRef = useRef(null);
+  const onMenuClose = useCallback((reason) => {
+    if (reason?.type !== "tab-away") {
+      const buttonMain = rootRef.current?.querySelector(
+        ".vuuSplitButton-main"
+      );
+      buttonMain?.focus();
+    }
+  }, []);
+  const menuProps = {
+    ...PopupMenuProps2,
+    anchorElement: rootRef,
+    menuClassName: `${classBase}-menu`,
+    onMenuClose,
+    popupPlacement: "below-full-width"
+  };
+  const handleRootFocus = useCallback((evt) => {
+    const { current: splitButton } = rootRef;
+    if (!splitButton?.classList.contains("vuuFocusVisible")) {
+      splitButton?.classList.add("vuuFocusVisible");
+      if (!focusTargetIsEditableLabel(evt.target)) {
+        requestAnimationFrame(() => {
+          buttonRef.current?.focus();
+        });
+      }
+    }
+  }, []);
+  const handleRootBlur = useCallback((evt) => {
+    const { current: splitButton } = rootRef;
+    const target = evt.relatedTarget;
+    if (!splitButton?.contains(target)) {
+      if (splitButton?.classList.contains("vuuFocusVisible")) {
+        splitButton.classList.remove("vuuFocusVisible");
+      }
+    }
+  }, []);
+  const handleButtonKeyDown = useCallback(
+    (evt) => {
+      if (evt.key === "ArrowDown") {
+        const popupTrigger = rootRef.current?.querySelector(
+          `.${classBase}-trigger`
+        );
+        if (popupTrigger) {
+          dispatchMouseEvent(popupTrigger, "click");
+        }
+      }
+    },
+    [classBase]
+  );
+  const ButtonProps = {
+    ...ButtonPropsProp,
+    onClick,
+    onKeyDown: handleButtonKeyDown
+  };
+  return {
+    ButtonProps,
+    PopupMenuProps: menuProps,
+    buttonRef,
+    rootRef,
+    onBlur: handleRootBlur,
+    onFocus: handleRootFocus
+  };
+};
+
+export { useSplitButton };
+//# sourceMappingURL=useSplitButton.js.map

package/esm/split-button/useSplitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSplitButton.js","sources":["../../../../packages/vuu-ui-controls/src/split-button/useSplitButton.ts"],"sourcesContent":["import { MenuCloseHandler, PopupMenuProps } from \"@vuu-ui/vuu-popups\";\nimport { dispatchMouseEvent } from \"@vuu-ui/vuu-utils\";\nimport {\n  FocusEventHandler,\n  KeyboardEventHandler,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { SplitButtonProps } from \"./SplitButton\";\n\nexport interface SplitButtonHookProps\n  extends Pick<\n    SplitButtonProps,\n    \"PopupMenuProps\" | \"ButtonProps\" | \"onClick\" | \"segmented\"\n  > {\n  classBase: string;\n}\n\nconst focusTargetIsEditableLabel = (target: EventTarget) => {\n  if ((target as HTMLElement).tagName === \"INPUT\") {\n    return true;\n  }\n  return false;\n};\n\nexport const useSplitButton = ({\n  ButtonProps: ButtonPropsProp,\n  PopupMenuProps,\n  classBase,\n  onClick,\n}: // segmented,\nSplitButtonHookProps) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  const onMenuClose = useCallback<MenuCloseHandler>((reason) => {\n    if (reason?.type !== \"tab-away\") {\n      const buttonMain = rootRef.current?.querySelector(\n        \".vuuSplitButton-main\",\n      ) as HTMLElement;\n      buttonMain?.focus();\n    }\n  }, []);\n\n  const menuProps: PopupMenuProps = {\n    ...PopupMenuProps,\n    anchorElement: rootRef,\n    menuClassName: `${classBase}-menu`,\n    onMenuClose,\n    popupPlacement: \"below-full-width\",\n  };\n\n  const handleRootFocus = useCallback<FocusEventHandler>((evt) => {\n    const { current: splitButton } = rootRef;\n    if (!splitButton?.classList.contains(\"vuuFocusVisible\")) {\n      splitButton?.classList.add(\"vuuFocusVisible\");\n      if (!focusTargetIsEditableLabel(evt.target)) {\n        requestAnimationFrame(() => {\n          buttonRef.current?.focus();\n        });\n      }\n    }\n  }, []);\n\n  const handleRootBlur = useCallback<FocusEventHandler>((evt) => {\n    const { current: splitButton } = rootRef;\n    const target = evt.relatedTarget as HTMLElement;\n    if (!splitButton?.contains(target)) {\n      if (splitButton?.classList.contains(\"vuuFocusVisible\")) {\n        splitButton.classList.remove(\"vuuFocusVisible\");\n      }\n    }\n  }, []);\n\n  const handleButtonKeyDown = useCallback<\n    KeyboardEventHandler<HTMLButtonElement>\n  >(\n    (evt) => {\n      if (evt.key === \"ArrowDown\") {\n        const popupTrigger = rootRef.current?.querySelector(\n          `.${classBase}-trigger`,\n        ) as HTMLElement;\n        if (popupTrigger) {\n          dispatchMouseEvent(popupTrigger, \"click\");\n        }\n      }\n    },\n    [classBase],\n  );\n\n  const ButtonProps = {\n    ...ButtonPropsProp,\n    onClick,\n    onKeyDown: handleButtonKeyDown,\n  };\n\n  return {\n    ButtonProps,\n    PopupMenuProps: menuProps,\n    buttonRef,\n    rootRef,\n    onBlur: handleRootBlur,\n    onFocus: handleRootFocus,\n  };\n};\n"],"names":["PopupMenuProps"],"mappings":"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"}

package/esm/table-search/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: -1px;\n  align-items: center;\n  color: var(--background-cell-color);\n  display: flex;\n  padding: 0 8px 0 8px;\n  position: relative;\n  z-index: -1;\n\n  [data-icon]{\n    margin-right: 4px;\n  }\n}\n\n";
+
+export { searchCellCss as default };
+//# sourceMappingURL=SearchCell.css.js.map

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

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

package/esm/table-search/SearchCell.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 { applyHighlighting } from '@vuu-ui/vuu-table';
+import searchCellCss from './SearchCell.css.js';
+
+const classBase = "vuuSearchCell";
+const SearchCell = ({
+  column,
+  dataRow,
+  searchPattern = ""
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-search-cell",
+    css: searchCellCss,
+    window: targetWindow
+  });
+  const valueWithHighlighting = applyHighlighting(
+    column.valueFormatter(dataRow[column.name]),
+    searchPattern
+  );
+  return /* @__PURE__ */ jsxs("div", { className: classBase, tabIndex: -1, children: [
+    /* @__PURE__ */ jsx("span", { "data-icon": "draggable" }),
+    valueWithHighlighting
+  ] });
+};
+
+export { SearchCell };
+//# sourceMappingURL=SearchCell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchCell.js","sources":["../../../../packages/vuu-ui-controls/src/table-search/SearchCell.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { applyHighlighting } from \"@vuu-ui/vuu-table\";\n\nimport searchCellCss from \"./SearchCell.css\";\n\nconst classBase = \"vuuSearchCell\";\n\nexport const SearchCell = ({\n  column,\n  dataRow,\n  searchPattern = \"\",\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 valueWithHighlighting = applyHighlighting(\n    column.valueFormatter(dataRow[column.name]),\n    searchPattern,\n  );\n\n  return (\n    <div className={classBase} tabIndex={-1}>\n      <span data-icon=\"draggable\" />\n      {valueWithHighlighting}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,SAAY,GAAA,eAAA;AAEX,MAAM,aAAa,CAAC;AAAA,EACzB,MAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAgB,GAAA;AAClB,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAA,aAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAID,EAAA,MAAM,qBAAwB,GAAA,iBAAA;AAAA,IAC5B,MAAO,CAAA,cAAA,CAAe,OAAQ,CAAA,MAAA,CAAO,IAAI,CAAC,CAAA;AAAA,IAC1C;AAAA,GACF;AAEA,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;AAAA,GACH,EAAA,CAAA;AAEJ;;;;"}

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

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

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

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

package/esm/table-search/TableSearch.js

@@ -0,0 +1,87 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useControlledTableNavigation, Table } from '@vuu-ui/vuu-table';
+import { registerComponent } from '@vuu-ui/vuu-utils';
+import { Input } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import cx from 'clsx';
+import { useMemo, useCallback } from 'react';
+import { SearchCell } from './SearchCell.js';
+import { useTableSearch } from './useTableSearch.js';
+import instrumentSearchCss from './TableSearch.css.js';
+
+const classBase = "vuuTableSearch";
+const defaultConfig = {
+  rowSeparators: true
+};
+const searchIcon = /* @__PURE__ */ jsx("span", { "data-icon": "search" });
+const TableSearch = ({
+  TableProps: { dataSource: dataSourceProp, ...TableProps2 },
+  autoFocus = false,
+  className,
+  placeHolder,
+  searchColumns,
+  ...htmlAttributes
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-table-search",
+    css: instrumentSearchCss,
+    window: targetWindow
+  });
+  const config = useMemo(
+    () => ({
+      ...defaultConfig,
+      ...TableProps2?.config
+    }),
+    [TableProps2?.config]
+  );
+  const { dataSource, onChange, searchState } = useTableSearch({
+    dataSource: dataSourceProp,
+    searchColumns
+  });
+  const { highlightedIndexRef, onHighlight, onKeyDown, tableRef } = useControlledTableNavigation(-1, dataSource?.size ?? 0);
+  const searchCallbackRef = useCallback((el) => {
+    setTimeout(() => {
+      el?.querySelector("input")?.focus();
+    }, 100);
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: cx(classBase, className), children: [
+    /* @__PURE__ */ jsx("div", { className: `${classBase}-inputField`, children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        inputProps: { onKeyDown },
+        endAdornment: searchIcon,
+        placeholder: placeHolder,
+        ref: autoFocus ? searchCallbackRef : null,
+        value: searchState.searchText,
+        onChange
+      }
+    ) }),
+    dataSource ? /* @__PURE__ */ jsx(
+      Table,
+      {
+        disableFocus: true,
+        id: "instrument-search",
+        rowHeight: 25,
+        highlightedIndex: highlightedIndexRef.current,
+        renderBufferSize: 100,
+        ...TableProps2,
+        className: `${classBase}-list`,
+        config,
+        dataSource,
+        navigationStyle: "row",
+        onHighlight,
+        ref: tableRef,
+        searchPattern: searchState.searchText,
+        showColumnHeaders: false
+      }
+    ) : null
+  ] });
+};
+registerComponent("search-cell", SearchCell, "cell-renderer", {
+  serverDataType: "private"
+});
+
+export { TableSearch };
+//# sourceMappingURL=TableSearch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableSearch.js","sources":["../../../../packages/vuu-ui-controls/src/table-search/TableSearch.tsx"],"sourcesContent":["import {\n  Table,\n  TableProps,\n  useControlledTableNavigation,\n} from \"@vuu-ui/vuu-table\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { Input } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, RefCallback, useCallback, useMemo } from \"react\";\nimport { SearchCell } from \"./SearchCell\";\nimport { useTableSearch } from \"./useTableSearch\";\n\nimport instrumentSearchCss from \"./TableSearch.css\";\n\nconst classBase = \"vuuTableSearch\";\n\nconst defaultConfig = {\n  rowSeparators: true,\n};\n\nexport interface TableSearchProps extends HTMLAttributes<HTMLDivElement> {\n  TableProps: TableProps;\n  autoFocus?: boolean;\n  placeHolder?: string;\n  searchColumns: string[];\n}\n\nconst searchIcon = <span data-icon=\"search\" />;\n\nexport const TableSearch = ({\n  TableProps: { dataSource: dataSourceProp, ...TableProps },\n  autoFocus = false,\n  className,\n  placeHolder,\n  searchColumns,\n  ...htmlAttributes\n}: TableSearchProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-search\",\n    css: instrumentSearchCss,\n    window: targetWindow,\n  });\n\n  const config = useMemo(\n    () => ({\n      ...defaultConfig,\n      ...TableProps?.config,\n    }),\n\n    [TableProps?.config],\n  );\n\n  const { dataSource, onChange, searchState } = useTableSearch({\n    dataSource: dataSourceProp,\n    searchColumns,\n  });\n\n  const { highlightedIndexRef, onHighlight, onKeyDown, tableRef } =\n    useControlledTableNavigation(-1, dataSource?.size ?? 0);\n\n  const searchCallbackRef = useCallback<RefCallback<HTMLElement>>((el) => {\n    setTimeout(() => {\n      el?.querySelector(\"input\")?.focus();\n    }, 100);\n  }, []);\n\n  return (\n    <div {...htmlAttributes} className={cx(classBase, className)}>\n      <div className={`${classBase}-inputField`}>\n        <Input\n          inputProps={{ onKeyDown }}\n          endAdornment={searchIcon}\n          placeholder={placeHolder}\n          ref={autoFocus ? searchCallbackRef : null}\n          value={searchState.searchText}\n          onChange={onChange}\n        />\n      </div>\n\n      {dataSource ? (\n        <Table\n          disableFocus\n          id=\"instrument-search\"\n          rowHeight={25}\n          highlightedIndex={highlightedIndexRef.current}\n          renderBufferSize={100}\n          {...TableProps}\n          className={`${classBase}-list`}\n          config={config}\n          dataSource={dataSource}\n          navigationStyle=\"row\"\n          onHighlight={onHighlight}\n          ref={tableRef}\n          searchPattern={searchState.searchText}\n          showColumnHeaders={false}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nregisterComponent(\"search-cell\", SearchCell, \"cell-renderer\", {\n  serverDataType: \"private\",\n});\n"],"names":["TableProps"],"mappings":"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"}