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

package/cjs/prompt/Prompt.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var promptCss = ".vuuPrompt {\n    min-height: var(--vuuPrompt-minHeight, 257px);\n    min-width: var(--vuuPrompt-minWidth,380px);\n\n    .saltDialogHeader {\n        .vuuIcon {\n            width: 24px;\n            --vuu-icon-size: 20px;\n        }\n    }\n\n    .saltDialogActions {\n        align-items: center;\n    }\n\n}\n\n.vuuPrompt.saltDialog-warning {\n    --salt-status-warning-borderColor: var(--vuu-color-yellow-20);   \n    --variant-color: var(--vuu-color-yellow-20);\n\n    border-radius: 4px !important;\n    min-height: var(--vuuPrompt-minHeight, 150px);\n    min-width: var(--vuuPrompt-minWidth, 280px);\n    padding-top:0 !important;\n\n    .saltDialogHeader {\n        background-color: var(--variant-color);\n        padding-left: var(--salt-spacing-100);\n        padding-bottom: var(--salt-spacing-100);\n        padding-right: var(--salt-spacing-100);\n\n        .saltDialogHeader-header {\n            align-items: end;\n            display: flex;\n            gap: var(--salt-spacing-100);\n        }\n    }\n\n    .saltDialogContent {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n    } \n}\n\n";
+var promptCss = ".vuuPrompt {\n    min-height: var(--vuuPrompt-minHeight, 257px);\n    min-width: var(--vuuPrompt-minWidth,380px);\n\n    .saltDialogHeader {\n\n        .saltDialogHeader-header {\n            align-items: center;\n            display: flex;\n            gap: var(--salt-spacing-100);\n        }\n        .vuuIcon {\n            --vuu-icon-color: var(--vuuPrompt-icon-color);\n            --vuu-icon-size: var(--vuuPrompt-icon-size, 24px);\n        }\n    }\n\n    .saltDialogActions {\n        align-items: center;\n        .vuuIcon {\n            --vuu-icon-size: var(--vuuPrompt-close-size, 20px);\n            width: 20px;\n        }\n    }\n\n}\n\n.vuuPrompt.saltDialog-warning {\n\n    border-radius: 4px !important;\n    padding-top:0 !important;\n\n    .saltDialogHeader {\n        padding-left: var(--salt-spacing-100);\n        padding-bottom: var(--salt-spacing-100);\n        padding-right: var(--salt-spacing-100);\n\n    }\n\n    .saltDialogContent {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n    } \n}\n\n";
 
 module.exports = promptCss;
 //# sourceMappingURL=Prompt.css.js.map

package/cjs/prompt/Prompt.js

@@ -11,6 +11,26 @@ var window = require('@salt-ds/window');
 var Prompt$1 = require('./Prompt.css.js');
 
 const classBase = "vuuPrompt";
+const getHeader = (title, icon, headerTag) => {
+  if (icon && headerTag) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: title }),
+      headerTag
+    ] });
+  } else if (icon) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: title })
+    ] });
+  } else if (headerTag) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: title }),
+      headerTag
+    ] });
+  }
+  return title;
+};
 const Prompt = ({
   children,
   className,
@@ -20,6 +40,7 @@ const Prompt = ({
   confirmButtonProps,
   customAction = null,
   disableAccent,
+  headerTag,
   icon,
   initialFocusedItem,
   onCancel,
@@ -83,10 +104,7 @@ const Prompt = ({
       onClick: close
     }
   ) : null;
-  const header = icon ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { children: title })
-  ] }) : title;
+  const header = getHeader(title, icon, headerTag);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     core.Dialog,
     {

package/cjs/prompt/Prompt.js.map

@@ -1 +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":["useWindow","useComponentCssInjection","promptCss","useCallback","jsx","IconButton","jsxs","Fragment","Icon","Dialog","DialogHeader","DialogContent","DialogActions","Button"],"mappings":"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"}
+{"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\nconst getHeader = (\n  title: string,\n  icon?: string,\n  headerTag?: ReactNode,\n): ReactNode => {\n  if (icon && headerTag) {\n    return (\n      <>\n        <Icon name={icon} />\n        <span>{title}</span>\n        {headerTag}\n      </>\n    );\n  } else if (icon) {\n    return (\n      <>\n        <Icon name={icon} />\n        <span>{title}</span>\n      </>\n    );\n  } else if (headerTag) {\n    return (\n      <>\n        <span>{title}</span>\n        {headerTag}\n      </>\n    );\n  }\n\n  return title;\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\n  /**\n   * Intended to allow for the display of a status tag or badge in the header. It will be displayed inline\n   * after the title. A small component is expected.\n   */\n  headerTag?: ReactNode;\n\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  headerTag,\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 = getHeader(title, icon, headerTag);\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":["jsxs","Fragment","jsx","Icon","useWindow","useComponentCssInjection","promptCss","useCallback","IconButton","Dialog","DialogHeader","DialogContent","DialogActions","Button"],"mappings":"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"}

package/esm/prompt/Prompt.css.js

@@ -1,4 +1,4 @@
-var promptCss = ".vuuPrompt {\n    min-height: var(--vuuPrompt-minHeight, 257px);\n    min-width: var(--vuuPrompt-minWidth,380px);\n\n    .saltDialogHeader {\n        .vuuIcon {\n            width: 24px;\n            --vuu-icon-size: 20px;\n        }\n    }\n\n    .saltDialogActions {\n        align-items: center;\n    }\n\n}\n\n.vuuPrompt.saltDialog-warning {\n    --salt-status-warning-borderColor: var(--vuu-color-yellow-20);   \n    --variant-color: var(--vuu-color-yellow-20);\n\n    border-radius: 4px !important;\n    min-height: var(--vuuPrompt-minHeight, 150px);\n    min-width: var(--vuuPrompt-minWidth, 280px);\n    padding-top:0 !important;\n\n    .saltDialogHeader {\n        background-color: var(--variant-color);\n        padding-left: var(--salt-spacing-100);\n        padding-bottom: var(--salt-spacing-100);\n        padding-right: var(--salt-spacing-100);\n\n        .saltDialogHeader-header {\n            align-items: end;\n            display: flex;\n            gap: var(--salt-spacing-100);\n        }\n    }\n\n    .saltDialogContent {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n    } \n}\n\n";
+var promptCss = ".vuuPrompt {\n    min-height: var(--vuuPrompt-minHeight, 257px);\n    min-width: var(--vuuPrompt-minWidth,380px);\n\n    .saltDialogHeader {\n\n        .saltDialogHeader-header {\n            align-items: center;\n            display: flex;\n            gap: var(--salt-spacing-100);\n        }\n        .vuuIcon {\n            --vuu-icon-color: var(--vuuPrompt-icon-color);\n            --vuu-icon-size: var(--vuuPrompt-icon-size, 24px);\n        }\n    }\n\n    .saltDialogActions {\n        align-items: center;\n        .vuuIcon {\n            --vuu-icon-size: var(--vuuPrompt-close-size, 20px);\n            width: 20px;\n        }\n    }\n\n}\n\n.vuuPrompt.saltDialog-warning {\n\n    border-radius: 4px !important;\n    padding-top:0 !important;\n\n    .saltDialogHeader {\n        padding-left: var(--salt-spacing-100);\n        padding-bottom: var(--salt-spacing-100);\n        padding-right: var(--salt-spacing-100);\n\n    }\n\n    .saltDialogContent {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n    } \n}\n\n";
 
 export { promptCss as default };
 //# sourceMappingURL=Prompt.css.js.map

package/esm/prompt/Prompt.js

@@ -9,6 +9,26 @@ import { useWindow } from '@salt-ds/window';
 import promptCss from './Prompt.css.js';
 
 const classBase = "vuuPrompt";
+const getHeader = (title, icon, headerTag) => {
+  if (icon && headerTag) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Icon, { name: icon }),
+      /* @__PURE__ */ jsx("span", { children: title }),
+      headerTag
+    ] });
+  } else if (icon) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Icon, { name: icon }),
+      /* @__PURE__ */ jsx("span", { children: title })
+    ] });
+  } else if (headerTag) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { children: title }),
+      headerTag
+    ] });
+  }
+  return title;
+};
 const Prompt = ({
   children,
   className,
@@ -18,6 +38,7 @@ const Prompt = ({
   confirmButtonProps,
   customAction = null,
   disableAccent,
+  headerTag,
   icon,
   initialFocusedItem,
   onCancel,
@@ -81,10 +102,7 @@ const Prompt = ({
       onClick: close
     }
   ) : null;
-  const header = icon ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Icon, { name: icon }),
-    /* @__PURE__ */ jsx("span", { children: title })
-  ] }) : title;
+  const header = getHeader(title, icon, headerTag);
   return /* @__PURE__ */ jsxs(
     Dialog,
     {

package/esm/prompt/Prompt.js.map

@@ -1 +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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"}
+{"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\nconst getHeader = (\n  title: string,\n  icon?: string,\n  headerTag?: ReactNode,\n): ReactNode => {\n  if (icon && headerTag) {\n    return (\n      <>\n        <Icon name={icon} />\n        <span>{title}</span>\n        {headerTag}\n      </>\n    );\n  } else if (icon) {\n    return (\n      <>\n        <Icon name={icon} />\n        <span>{title}</span>\n      </>\n    );\n  } else if (headerTag) {\n    return (\n      <>\n        <span>{title}</span>\n        {headerTag}\n      </>\n    );\n  }\n\n  return title;\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\n  /**\n   * Intended to allow for the display of a status tag or badge in the header. It will be displayed inline\n   * after the title. A small component is expected.\n   */\n  headerTag?: ReactNode;\n\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  headerTag,\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 = getHeader(title, icon, headerTag);\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/package.json

@@ -1,20 +1,20 @@
 {
-  "version": "2.1.19-beta.3",
+  "version": "2.1.19",
   "description": "VUU UI Controls",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "2.1.19-beta.3",
-    "@vuu-ui/vuu-protocol-types": "2.1.19-beta.3",
-    "@vuu-ui/vuu-table-types": "2.1.19-beta.3"
+    "@vuu-ui/vuu-data-types": "2.1.19",
+    "@vuu-ui/vuu-protocol-types": "2.1.19",
+    "@vuu-ui/vuu-table-types": "2.1.19"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "2.1.19-beta.3",
-    "@vuu-ui/vuu-data-react": "2.1.19-beta.3",
-    "@vuu-ui/vuu-layout": "2.1.19-beta.3",
-    "@vuu-ui/vuu-popups": "2.1.19-beta.3",
-    "@vuu-ui/vuu-table": "2.1.19-beta.3",
-    "@vuu-ui/vuu-utils": "2.1.19-beta.3",
+    "@vuu-ui/vuu-context-menu": "2.1.19",
+    "@vuu-ui/vuu-data-react": "2.1.19",
+    "@vuu-ui/vuu-layout": "2.1.19",
+    "@vuu-ui/vuu-popups": "2.1.19",
+    "@vuu-ui/vuu-table": "2.1.19",
+    "@vuu-ui/vuu-utils": "2.1.19",
     "@salt-ds/core": "1.54.1",
     "@salt-ds/icons": "1.16.0",
     "@salt-ds/styles": "0.2.1",

package/types/prompt/Prompt.d.ts

@@ -30,6 +30,11 @@ export interface PromptProps extends Pick<DialogProps, "onOpenChange" | "open" |
      * A custom action will be displayed in Prompt button bar, before cancel/confirm buttons.
      */
     customAction?: ReactNode;
+    /**
+     * Intended to allow for the display of a status tag or badge in the header. It will be displayed inline
+     * after the title. A small component is expected.
+     */
+    headerTag?: ReactNode;
     icon?: string;
     /**
      * Set this prop if one of the three built-in buttons should receive initial focus.
@@ -45,4 +50,4 @@ export interface PromptProps extends Pick<DialogProps, "onOpenChange" | "open" |
     showConfirmButton?: boolean;
     title: string;
 }
-export declare const Prompt: ({ children, className, cancelButtonLabel, cancelButtonProps, confirmButtonLabel, confirmButtonProps, customAction, disableAccent, icon, initialFocusedItem, onCancel, onClose, onConfirm, onOpenChange, open, showCancelButton, showCloseButton, showConfirmButton, status, title, ...htmlAttributes }: PromptProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Prompt: ({ children, className, cancelButtonLabel, cancelButtonProps, confirmButtonLabel, confirmButtonProps, customAction, disableAccent, headerTag, icon, initialFocusedItem, onCancel, onClose, onConfirm, onOpenChange, open, showCancelButton, showCloseButton, showConfirmButton, status, title, ...htmlAttributes }: PromptProps) => import("react/jsx-runtime").JSX.Element;