@vuu-ui/vuu-ui-controls 2.1.18 → 2.1.19-beta.1

package/esm/prompt/Prompt.js

@@ -1,140 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,34 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,4 +0,0 @@
-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

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

package/esm/split-button/SplitButton.js

@@ -1,82 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,4 +0,0 @@
-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

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

package/esm/split-button/SplitStateButton.js

@@ -1,29 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,82 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,4 +0,0 @@
-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

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

package/esm/table-search/SearchCell.js

@@ -1,30 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,4 +0,0 @@
-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

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

package/esm/table-search/TableSearch.js

@@ -1,87 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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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"}