@x15ventures/x15-ui-library 3.16.1 → 3.17.0

package/dist/esm/autoGenerated/libraryThemes.json

@@ -10,8 +10,8 @@
       "map": "index.min.css.map"
     },
     "versioned": {
-      "css": "base.min.3.16.1.css",
-      "map": "base.min.3.16.1.css.map"
+      "css": "base.min.3.17.0.css",
+      "map": "base.min.3.17.0.css.map"
     }
   },
   "cba": {
@@ -25,8 +25,8 @@
       "map": "cba.min.css.map"
     },
     "versioned": {
-      "css": "cba.min.3.16.1.css",
-      "map": "cba.min.3.16.1.css.map"
+      "css": "cba.min.3.17.0.css",
+      "map": "cba.min.3.17.0.css.map"
     }
   },
   "creditSavvy": {
@@ -40,8 +40,8 @@
       "map": "creditSavvy.min.css.map"
     },
     "versioned": {
-      "css": "creditSavvy.min.3.16.1.css",
-      "map": "creditSavvy.min.3.16.1.css.map"
+      "css": "creditSavvy.min.3.17.0.css",
+      "map": "creditSavvy.min.3.17.0.css.map"
     }
   },
   "doshii": {
@@ -55,8 +55,8 @@
       "map": "doshii.min.css.map"
     },
     "versioned": {
-      "css": "doshii.min.3.16.1.css",
-      "map": "doshii.min.3.16.1.css.map"
+      "css": "doshii.min.3.17.0.css",
+      "map": "doshii.min.3.17.0.css.map"
     }
   },
   "homeIn": {
@@ -70,8 +70,8 @@
       "map": "homeIn.min.css.map"
     },
     "versioned": {
-      "css": "homeIn.min.3.16.1.css",
-      "map": "homeIn.min.3.16.1.css.map"
+      "css": "homeIn.min.3.17.0.css",
+      "map": "homeIn.min.3.17.0.css.map"
     }
   },
   "x15Core": {
@@ -85,8 +85,8 @@
       "map": "x15Core.min.css.map"
     },
     "versioned": {
-      "css": "x15Core.min.3.16.1.css",
-      "map": "x15Core.min.3.16.1.css.map"
+      "css": "x15Core.min.3.17.0.css",
+      "map": "x15Core.min.3.17.0.css.map"
     }
   }
 }

package/dist/esm/components/design/dialog/Dialog.js

@@ -64,7 +64,9 @@ export const Dialog = ({
     } else {
       HandleClose();
     }
-  }, [customCssClasses, createOverlay, open, isOpen, HandleOpen, HandleClose, dialogHeaderElement]);
+    // customCssClasses is intentionally excluded: it isn't read here, and including it (as a
+    // fresh object reference on every parent render) re-ran this effect and stole focus on each keystroke.
+  }, [createOverlay, open, isOpen, HandleOpen, HandleClose, dialogHeaderElement]);
   const DialogCloseButton = () => /*#__PURE__*/React.createElement("button", {
     ref: dialogCloseButton,
     className: "dialogClose",

package/dist/esm/components/design/dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","names":["React","useCallback","useEffect","useRef","useState","useMemo","xmarkLarge","SvgIcon","EllipsisTooltip","useDialogOverlay","useFocusTrap","Dialog","id","size","position","animation","scrollBehaviour","onClose","open","overlay","header","footer","children","screenReaderInstruction","customCssClasses","showFocusOutline","isOpen","setIsOpen","dialogElement","dialogHeaderElement","TOGGLE_TEXT","dialogCloseButton","createOverlay","removeOverlay","HandleClose","dialogCssClass","dialog","HandleOpen","dialogOverlay","showOverlay","current","focus","DialogCloseButton","createElement","ref","className","title","type","onClick","svgDefinition","role","tabIndex","lineClamp","tooltipProps","customCssClass","content"],"sources":["../../../../../src/components/design/dialog/Dialog.tsx"],"sourcesContent":["/* eslint-disable jsxA11y/no-noninteractive-tabindex */\n'use client';\n\nimport React, { ReactNode, useCallback, useEffect, useRef, useState, useMemo } from 'react';\nimport { xmarkLarge } from '@x15ventures/x15-ui-library-icons/iconDefinitions/index';\nimport { SvgIcon } from '@x15ventures/x15-ui-library-icons/svgIcon/SvgIcon';\nimport { EllipsisTooltip } from '../tooltip';\nimport { GenericFunction } from '../../../interfaces';\nimport { useDialogOverlay } from '../../../hooks/DialogOverlay';\nimport { useFocusTrap } from '../../../hooks/FocusTrap';\n\nimport './dialog.scss';\n\nexport interface DialogInterface {\n  id: string;\n  size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'dynamic';\n  position?: 'left' | 'right' | 'top' | 'bottom' | 'center' | 'topleft' | 'topright' | 'bottomleft' | 'bottomright';\n  animation?: 'none' | 'grow' | 'reveal';\n  scrollBehaviour?: 'contentOnly' | 'contentAndFooter' | 'all';\n  onClose: GenericFunction;\n  open?: boolean;\n  overlay?: {\n    parentNode?: HTMLElement;\n    customCssClass?: string;\n  };\n  header: string | ReactNode;\n  footer?: string | ReactNode;\n  children: ReactNode;\n  screenReaderInstruction?: string;\n  showFocusOutline?: boolean;\n  customCssClasses?: {\n    dialog?: string;\n    content?: string;\n    header?: string;\n    footer?: string;\n  };\n}\n\nexport const Dialog: React.FC<DialogInterface> = ({\n  id,\n  size = 'm',\n  position = 'center',\n  animation = 'none',\n  scrollBehaviour = 'contentOnly',\n  onClose = () => {},\n  open = false,\n  overlay,\n  header,\n  footer,\n  children,\n  screenReaderInstruction = `The following content is in a dialog. \n      You can press the Tab key to navigate through the elements, and press Escape to close the dialog.`,\n  customCssClasses,\n  showFocusOutline = false,\n}) => {\n  const [isOpen, setIsOpen] = useState<boolean>(open);\n  const dialogElement = useRef<HTMLDivElement>(null);\n  const dialogHeaderElement = useRef<HTMLDivElement>(null);\n\n  const TOGGLE_TEXT = 'Open and close dialog';\n  const dialogCloseButton = useRef(null);\n\n  const { createOverlay, removeOverlay } = useDialogOverlay(overlay || {});\n  useFocusTrap(dialogElement, () => HandleClose());\n\n  const dialogCssClass = useMemo(() => {\n    return `dialog \n    ${ isOpen || open ? 'isOpen' : '' }\n    dialogSize_${ size }\n    dialogPosition_${ position }\n    dialogAnimation_${ animation }\n    dialogScrollBehaviour_${ scrollBehaviour }\n    ${ size === 'dynamic' ? 'dialogSize_dynamic' : '' }\n    ${ customCssClasses?.dialog || '' }\n    ${ showFocusOutline ? 'showFocusOutline' : '' }`;\n  }, [open, isOpen, size, position, animation, scrollBehaviour, customCssClasses, showFocusOutline]);\n\n  const HandleClose = useCallback(() => {\n    setIsOpen(false);\n    removeOverlay();\n    onClose();\n  }, [onClose, removeOverlay]);\n\n  const HandleOpen = useCallback(() => {\n    const dialogOverlay = createOverlay();\n    dialogOverlay.showOverlay();\n  }, [createOverlay]);\n\n  useEffect(() => {\n    if (open || isOpen) {\n      if (dialogHeaderElement.current) {\n        dialogHeaderElement.current.focus();\n      }\n      HandleOpen();\n    } else {\n      HandleClose();\n    }\n  }, [customCssClasses, createOverlay, open, isOpen, HandleOpen, HandleClose, dialogHeaderElement]);\n\n  const DialogCloseButton: React.FC = () => (\n    <button\n      ref={ dialogCloseButton }\n      className=\"dialogClose\"\n      title={ TOGGLE_TEXT }\n      type=\"button\"\n      onClick={ () => HandleClose() }\n    >\n      <SvgIcon svgDefinition={ xmarkLarge } />\n      <span className=\"sr-only\">Close dialog</span>\n    </button>\n  );\n\n  return (\n    <div\n      className={ dialogCssClass }\n      role=\"dialog\"\n      aria-labelledby={ `dialogHeader_${ id }` }\n      tabIndex={ 0 }\n      aria-describedby={ `dialogSRInstruction_${ id }` }\n      aria-modal=\"true\"\n      ref={ dialogElement }\n    >\n      <div className=\"dialogFullScroller\">\n        <div\n          ref={ dialogHeaderElement }\n          id={ `dialogHeader_${ id }` }\n          className={ `dialogHeader ${ customCssClasses?.header || '' }` }\n          tabIndex={ 0 }\n        >\n          <span id={ `dialogSRInstruction_${ id }` } className=\"sr-only\">\n            { screenReaderInstruction }\n          </span>\n          <div className=\"dialogHeaderTextWrapper\">\n            <EllipsisTooltip \n              lineClamp={ 2 } \n              tooltipProps={ { \n                customCssClass: 'shiftDown large dialogEllipsisTooltip'\n              } }\n            >\n              { typeof header === 'string' ? <span className=\"dialogHeaderText\">{ header }</span> : header }\n            </EllipsisTooltip>\n          </div>\n          <DialogCloseButton />\n        </div>\n\n        <div className=\"dialogContentAndFooterScroller\">\n          <section className={ `dialogContent ${ customCssClasses?.content || '' }` } tabIndex={ 0 }>\n            { children }\n          </section>\n\n          {\n            footer && (\n              <div className={ `dialogFooter ${ customCssClasses?.footer || '' }` } tabIndex={ 0 }>\n                { typeof footer === 'string' ? <span className=\"dialogFooterText\">{ footer }</span> : footer }\n              </div>\n            )\n          }\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Dialog.js","names":["React","useCallback","useEffect","useRef","useState","useMemo","xmarkLarge","SvgIcon","EllipsisTooltip","useDialogOverlay","useFocusTrap","Dialog","id","size","position","animation","scrollBehaviour","onClose","open","overlay","header","footer","children","screenReaderInstruction","customCssClasses","showFocusOutline","isOpen","setIsOpen","dialogElement","dialogHeaderElement","TOGGLE_TEXT","dialogCloseButton","createOverlay","removeOverlay","HandleClose","dialogCssClass","dialog","HandleOpen","dialogOverlay","showOverlay","current","focus","DialogCloseButton","createElement","ref","className","title","type","onClick","svgDefinition","role","tabIndex","lineClamp","tooltipProps","customCssClass","content"],"sources":["../../../../../src/components/design/dialog/Dialog.tsx"],"sourcesContent":["/* eslint-disable jsxA11y/no-noninteractive-tabindex */\n'use client';\n\nimport React, { ReactNode, useCallback, useEffect, useRef, useState, useMemo } from 'react';\nimport { xmarkLarge } from '@x15ventures/x15-ui-library-icons/iconDefinitions/index';\nimport { SvgIcon } from '@x15ventures/x15-ui-library-icons/svgIcon/SvgIcon';\nimport { EllipsisTooltip } from '../tooltip';\nimport { GenericFunction } from '../../../interfaces';\nimport { useDialogOverlay } from '../../../hooks/DialogOverlay';\nimport { useFocusTrap } from '../../../hooks/FocusTrap';\n\nimport './dialog.scss';\n\nexport interface DialogInterface {\n  id: string;\n  size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'dynamic';\n  position?: 'left' | 'right' | 'top' | 'bottom' | 'center' | 'topleft' | 'topright' | 'bottomleft' | 'bottomright';\n  animation?: 'none' | 'grow' | 'reveal';\n  scrollBehaviour?: 'contentOnly' | 'contentAndFooter' | 'all';\n  onClose: GenericFunction;\n  open?: boolean;\n  overlay?: {\n    parentNode?: HTMLElement;\n    customCssClass?: string;\n  };\n  header: string | ReactNode;\n  footer?: string | ReactNode;\n  children: ReactNode;\n  screenReaderInstruction?: string;\n  showFocusOutline?: boolean;\n  customCssClasses?: {\n    dialog?: string;\n    content?: string;\n    header?: string;\n    footer?: string;\n  };\n}\n\nexport const Dialog: React.FC<DialogInterface> = ({\n  id,\n  size = 'm',\n  position = 'center',\n  animation = 'none',\n  scrollBehaviour = 'contentOnly',\n  onClose = () => {},\n  open = false,\n  overlay,\n  header,\n  footer,\n  children,\n  screenReaderInstruction = `The following content is in a dialog. \n      You can press the Tab key to navigate through the elements, and press Escape to close the dialog.`,\n  customCssClasses,\n  showFocusOutline = false,\n}) => {\n  const [isOpen, setIsOpen] = useState<boolean>(open);\n  const dialogElement = useRef<HTMLDivElement>(null);\n  const dialogHeaderElement = useRef<HTMLDivElement>(null);\n\n  const TOGGLE_TEXT = 'Open and close dialog';\n  const dialogCloseButton = useRef(null);\n\n  const { createOverlay, removeOverlay } = useDialogOverlay(overlay || {});\n  useFocusTrap(dialogElement, () => HandleClose());\n\n  const dialogCssClass = useMemo(() => {\n    return `dialog \n    ${ isOpen || open ? 'isOpen' : '' }\n    dialogSize_${ size }\n    dialogPosition_${ position }\n    dialogAnimation_${ animation }\n    dialogScrollBehaviour_${ scrollBehaviour }\n    ${ size === 'dynamic' ? 'dialogSize_dynamic' : '' }\n    ${ customCssClasses?.dialog || '' }\n    ${ showFocusOutline ? 'showFocusOutline' : '' }`;\n  }, [open, isOpen, size, position, animation, scrollBehaviour, customCssClasses, showFocusOutline]);\n\n  const HandleClose = useCallback(() => {\n    setIsOpen(false);\n    removeOverlay();\n    onClose();\n  }, [onClose, removeOverlay]);\n\n  const HandleOpen = useCallback(() => {\n    const dialogOverlay = createOverlay();\n    dialogOverlay.showOverlay();\n  }, [createOverlay]);\n\n  useEffect(() => {\n    if (open || isOpen) {\n      if (dialogHeaderElement.current) {\n        dialogHeaderElement.current.focus();\n      }\n      HandleOpen();\n    } else {\n      HandleClose();\n    }\n    // customCssClasses is intentionally excluded: it isn't read here, and including it (as a\n    // fresh object reference on every parent render) re-ran this effect and stole focus on each keystroke.\n  }, [createOverlay, open, isOpen, HandleOpen, HandleClose, dialogHeaderElement]);\n\n  const DialogCloseButton: React.FC = () => (\n    <button\n      ref={ dialogCloseButton }\n      className=\"dialogClose\"\n      title={ TOGGLE_TEXT }\n      type=\"button\"\n      onClick={ () => HandleClose() }\n    >\n      <SvgIcon svgDefinition={ xmarkLarge } />\n      <span className=\"sr-only\">Close dialog</span>\n    </button>\n  );\n\n  return (\n    <div\n      className={ dialogCssClass }\n      role=\"dialog\"\n      aria-labelledby={ `dialogHeader_${ id }` }\n      tabIndex={ 0 }\n      aria-describedby={ `dialogSRInstruction_${ id }` }\n      aria-modal=\"true\"\n      ref={ dialogElement }\n    >\n      <div className=\"dialogFullScroller\">\n        <div\n          ref={ dialogHeaderElement }\n          id={ `dialogHeader_${ id }` }\n          className={ `dialogHeader ${ customCssClasses?.header || '' }` }\n          tabIndex={ 0 }\n        >\n          <span id={ `dialogSRInstruction_${ id }` } className=\"sr-only\">\n            { screenReaderInstruction }\n          </span>\n          <div className=\"dialogHeaderTextWrapper\">\n            <EllipsisTooltip \n              lineClamp={ 2 } \n              tooltipProps={ { \n                customCssClass: 'shiftDown large dialogEllipsisTooltip'\n              } }\n            >\n              { typeof header === 'string' ? <span className=\"dialogHeaderText\">{ header }</span> : header }\n            </EllipsisTooltip>\n          </div>\n          <DialogCloseButton />\n        </div>\n\n        <div className=\"dialogContentAndFooterScroller\">\n          <section className={ `dialogContent ${ customCssClasses?.content || '' }` } tabIndex={ 0 }>\n            { children }\n          </section>\n\n          {\n            footer && (\n              <div className={ `dialogFooter ${ customCssClasses?.footer || '' }` } tabIndex={ 0 }>\n                { typeof footer === 'string' ? <span className=\"dialogFooterText\">{ footer }</span> : footer }\n              </div>\n            )\n          }\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/design/dialog/dialog.css

@@ -129,6 +129,11 @@
   justify-content: flex-start;
   min-height: var(--dialogFooterHeight, 50px);
 }
+.dialog .dialogFooter .actionButtons {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
 .dialog .dialogFullScroller {
   flex: 1;
   box-sizing: border-box;

package/dist/esm/components/design/progressIndicators/circularProgressIndicator/CircularProgressIndicator.js

@@ -0,0 +1,81 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { Tooltip } from '../../tooltip/Tooltip';
+import './circularProgressIndicator.css';
+export const CircularProgressIndicator = ({
+  name,
+  progress,
+  description = '',
+  statusMessage = '',
+  icon = null,
+  hideLabel = false,
+  id,
+  mode = 'default',
+  onClickHandler,
+  size = 'default'
+}) => {
+  const clampedProgress = Math.min(100, Math.max(0, progress));
+  const progressCopy = `${clampedProgress}% complete`;
+  const progressSummary = `${progressCopy}${description ? ` ${description}` : ''}`;
+  const hasStatus = mode !== 'default';
+  const statusTooltipId = `${id}_status`;
+  const isActionable = typeof onClickHandler === 'function';
+  const getTitle = () => {
+    if (statusMessage) {
+      return statusMessage;
+    }
+    return progressSummary;
+  };
+  const modeIconsMap = {
+    default: '',
+    warning: 'warning',
+    error: 'notification',
+    success: 'checkmark'
+  };
+  const progressIndicatorContent = /*#__PURE__*/React.createElement("span", {
+    className: "progressIndicator"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "glowRing"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "progressRing"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "actionIcon"
+  }, icon, /*#__PURE__*/React.createElement("span", {
+    className: `labelText ${hideLabel || size === 'xsmall' ? 'sr-only' : ''}`
+  }, name)), hasStatus && /*#__PURE__*/React.createElement("span", {
+    className: "statusIndicator"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    passiveTrigger: true,
+    triggerId: statusTooltipId,
+    customCssClass: "statusIcon",
+    icon: modeIconsMap[mode]
+  }, getTitle())));
+  const sharedProps = {
+    className: `circularProgressIndicator ${mode}Mode ${size}`,
+    id,
+    style: {
+      '--progress': `${clampedProgress}%`
+    },
+    title: hasStatus ? '' : getTitle(),
+    'aria-label': progressSummary,
+    ...(hasStatus ? {
+      'aria-describedby': statusTooltipId + '_content'
+    } : {})
+  };
+  if (isActionable) {
+    return /*#__PURE__*/React.createElement("button", _extends({}, sharedProps, {
+      type: "button",
+      onClick: onClickHandler
+    }), progressIndicatorContent);
+  }
+  return /*#__PURE__*/React.createElement("div", _extends({}, sharedProps, {
+    role: "progressbar",
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    "aria-valuenow": clampedProgress
+  }), progressIndicatorContent);
+};
+export default CircularProgressIndicator;
+//# sourceMappingURL=CircularProgressIndicator.js.map

package/dist/esm/components/design/progressIndicators/circularProgressIndicator/CircularProgressIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgressIndicator.js","names":["_extends","React","Tooltip","CircularProgressIndicator","name","progress","description","statusMessage","icon","hideLabel","id","mode","onClickHandler","size","clampedProgress","Math","min","max","progressCopy","progressSummary","hasStatus","statusTooltipId","isActionable","getTitle","modeIconsMap","default","warning","error","success","progressIndicatorContent","createElement","className","passiveTrigger","triggerId","customCssClass","sharedProps","style","title","type","onClick","role"],"sources":["../../../../../../src/components/design/progressIndicators/circularProgressIndicator/CircularProgressIndicator.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { Tooltip } from '../../tooltip/Tooltip';\n\nimport './circularProgressIndicator.scss';\n\nexport interface CircularProgressIndicatorProps {\n  name: string;\n  progress: number; // 0 - 100\n  description?: string;\n  statusMessage?: string;\n  icon?: React.ReactNode;\n  hideLabel?: boolean;\n  id: string;\n  onClickHandler?: () => void;\n  mode?: 'default' | 'warning' | 'error' | 'success';\n  size?: 'xsmall' | 'small' | 'default' | 'large' | 'xlarge';\n}\n\nexport const CircularProgressIndicator: React.FC<CircularProgressIndicatorProps> = (\n  {\n    name,\n    progress,\n    description = '',\n    statusMessage = '',\n    icon = null,\n    hideLabel = false,\n    id,\n    mode = 'default',\n    onClickHandler,\n    size = 'default',\n  }\n) => {\n  const clampedProgress = Math.min(100, Math.max(0, progress));\n  const progressCopy = `${ clampedProgress }% complete`;\n  const progressSummary = `${ progressCopy }${ description ? ` ${ description }` : '' }`;\n  const hasStatus = mode !== 'default';\n  const statusTooltipId = `${ id }_status`;\n  const isActionable = typeof onClickHandler === 'function';\n  \n  const getTitle = () => {\n    if (statusMessage) {\n      return statusMessage;\n    }\n    return progressSummary;\n  };\n\n  const modeIconsMap = {\n    default: '',\n    warning: 'warning',\n    error: 'notification',\n    success: 'checkmark',\n  };\n\n  const progressIndicatorContent = (\n    <span className=\"progressIndicator\">\n      <span className=\"glowRing\" />\n      <span className=\"progressRing\" />\n      <span className=\"actionIcon\">\n        { icon }\n        <span className={ `labelText ${ hideLabel || size === 'xsmall' ? 'sr-only' : '' }` }>{ name }</span>\n      </span>\n\n      { hasStatus &&\n        <span className=\"statusIndicator\">\n          <Tooltip\n            passiveTrigger\n            triggerId={ statusTooltipId }\n            customCssClass=\"statusIcon\"\n            icon={ modeIconsMap[mode] }\n          >\n            { getTitle() }\n          </Tooltip>\n        </span>\n      }\n    </span>\n  );\n\n  const sharedProps = {\n    className: `circularProgressIndicator ${ mode }Mode ${ size }`,\n    id,\n    style: {\n      '--progress': `${ clampedProgress }%`,\n    } as React.CSSProperties,\n    title: hasStatus ? '' : getTitle(),\n    'aria-label': progressSummary,\n    ...(hasStatus ? { 'aria-describedby': statusTooltipId + '_content' } : {}),\n  };\n\n  if (isActionable) {\n    return (\n      <button\n        { ...sharedProps }\n        type=\"button\"\n        onClick={ onClickHandler }\n      >\n        { progressIndicatorContent }\n      </button>\n    );\n  }\n\n  return (\n    <div\n      { ...sharedProps }\n      role=\"progressbar\"\n      aria-valuemin={ 0 }\n      aria-valuemax={ 100 }\n      aria-valuenow={ clampedProgress }\n    >\n      { progressIndicatorContent }\n    </div>\n  );\n};\n\nexport default CircularProgressIndicator;"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/design/progressIndicators/circularProgressIndicator/circularProgressIndicator.css

@@ -0,0 +1,301 @@
+.circularProgressIndicator {
+  --progress: 0%; /* Overwrite the progress value to set the progress (0% to 100%) */
+  --progressIndicatorSize: 100px;
+  --progressIndicatorBgColor: #f0f0f0;
+  --glowRingThickness: 5%;
+  --progressRingSize: 90%;
+  --progressRingThickness: 10%;
+  --glowRingColor: #ec008c;
+  --glowRingColorHighlight: #fff;
+  --glowRingColorShade: #B02568;
+  --errorColor: #ff0000;
+  --errorColorShade: #cc0000;
+  --warnColor: #ffcc00;
+  --warnColorShade: #ff9900;
+  --successColor: #009900;
+  --successColorShade: #006600;
+  --progressRingColor: #ec008c;
+  --progressRingColorHighlight: #fff;
+  --progressRingColorShade: #B02568;
+  --progressStartAngle: -45deg;
+  border: 0;
+  background: transparent;
+}
+.circularProgressIndicator.xsmall {
+  --progressIndicatorSize: 40px;
+  --glowRingThickness: 5px;
+}
+.circularProgressIndicator.xsmall .statusIndicator {
+  width: 16px;
+  height: 16px;
+  top: 5%;
+  right: 5%;
+  border: none;
+}
+.circularProgressIndicator.xsmall .statusIndicator .statusIcon .icon {
+  font-size: 11px;
+}
+.circularProgressIndicator.xsmall .statusIndicator .statusIcon .icon.icon-warning {
+  position: relative;
+  top: -1px;
+}
+.circularProgressIndicator.small {
+  --progressIndicatorSize: 75px;
+}
+.circularProgressIndicator.small .actionIcon .labelText {
+  font-size: 11px;
+}
+.circularProgressIndicator.small .statusIndicator {
+  width: 18px;
+  height: 18px;
+  top: 5%;
+  right: 5%;
+  border-width: 1px;
+}
+.circularProgressIndicator.small .statusIndicator .statusIcon .icon {
+  font-size: 14px;
+}
+.circularProgressIndicator.small .statusIndicator .statusIcon .icon.icon-warning {
+  position: relative;
+  top: -1px;
+}
+.circularProgressIndicator.large {
+  --progressIndicatorSize: 150px;
+}
+.circularProgressIndicator.large .actionIcon .icon {
+  height: 30px;
+  font-size: 20px;
+}
+.circularProgressIndicator.large .actionIcon .labelText {
+  font-size: 16px;
+}
+.circularProgressIndicator.large .actionIcon .iconSvg {
+  height: 50px;
+  width: 50px;
+}
+.circularProgressIndicator.large .actionIcon .iconSvg path {
+  stroke-width: 1px;
+}
+.circularProgressIndicator.large .statusIndicator {
+  width: 30px;
+  height: 30px;
+}
+.circularProgressIndicator.large .statusIndicator .statusIcon .icon {
+  font-size: 16px;
+}
+.circularProgressIndicator.large .statusIndicator .statusIcon .icon.icon-warning {
+  position: relative;
+  top: -1px;
+}
+.circularProgressIndicator.xlarge {
+  --progressIndicatorSize: 200px;
+}
+.circularProgressIndicator.xlarge .actionIcon .icon {
+  height: 40px;
+  font-size: 30px;
+}
+.circularProgressIndicator.xlarge .actionIcon .labelText {
+  font-size: 16px;
+}
+.circularProgressIndicator.xlarge .actionIcon .iconSvg {
+  height: 75px;
+  width: 75px;
+}
+.circularProgressIndicator.xlarge .actionIcon .iconSvg path {
+  stroke-width: 1px;
+}
+.circularProgressIndicator.xlarge .statusIndicator {
+  width: 40px;
+  height: 40px;
+}
+.circularProgressIndicator.xlarge .statusIndicator .statusIcon .icon {
+  font-size: 18px;
+}
+.circularProgressIndicator.xlarge .statusIndicator .statusIcon .icon.icon-warning {
+  position: relative;
+  top: -1px;
+}
+.circularProgressIndicator.errorMode {
+  --glowRingColor: var(--errorColor);
+  --glowRingColorHighlight: var(--errorColor);
+  --glowRingColorShade: var(--errorColorShade);
+  --progressRingColor: var(--errorColor);
+  --progressRingColorShade: var(--errorColorShade);
+}
+.circularProgressIndicator.errorMode .statusIndicator {
+  color: var(--errorColor);
+  border-color: var(--errorColorShade);
+}
+.circularProgressIndicator.errorMode .statusIndicator .icon {
+  color: var(--errorColor);
+}
+.circularProgressIndicator.warningMode {
+  --glowRingColor: var(--warnColor);
+  --glowRingColorHighlight: var(--warnColor);
+  --glowRingColorShade: var(--warnColorShade);
+  --progressRingColor: var(--warnColor);
+  --progressRingColorShade: var(--warnColorShade);
+}
+.circularProgressIndicator.warningMode .statusIndicator {
+  color: var(--warnColorShade);
+  border-color: var(--warnColorShade);
+}
+.circularProgressIndicator.warningMode .statusIndicator .icon {
+  color: var(--warnColorShade);
+}
+.circularProgressIndicator.successMode {
+  --glowRingColor: var(--successColor);
+  --glowRingColorHighlight: var(--successColor);
+  --glowRingColorShade: var(--successColorShade);
+  --progressRingColor: var(--successColor);
+  --progressRingColorShade: var(--successColorShade);
+}
+.circularProgressIndicator.successMode .statusIndicator {
+  color: var(--successColorShade);
+  border-color: var(--successColorShade);
+}
+.circularProgressIndicator.successMode .statusIndicator .icon {
+  color: var(--successColorShade);
+}
+.circularProgressIndicator .progressIndicator {
+  display: block;
+  position: relative;
+  width: var(--progressIndicatorSize);
+  height: var(--progressIndicatorSize);
+}
+.circularProgressIndicator .progressIndicator .glowRing {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  border-radius: 50%;
+  top: 0;
+  left: 0;
+  background-image: conic-gradient(from var(--progressStartAngle), var(--glowRingColorHighlight) 0%, var(--glowRingColor) 20%, var(--glowRingColorShade) 50%, var(--glowRingColor) 80%, var(--glowRingColorHighlight) 95%);
+  box-shadow: 0 0 10px 0 var(--glowRingColor);
+}
+.circularProgressIndicator .progressIndicator .glowRing:before {
+  content: "";
+  position: absolute;
+  top: calc(var(--glowRingThickness) / 2);
+  left: calc(var(--glowRingThickness) / 2);
+  width: calc(100% - var(--glowRingThickness));
+  height: calc(100% - var(--glowRingThickness));
+  border-radius: 50%;
+  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
+  background-color: var(--progressIndicatorBgColor);
+}
+.circularProgressIndicator .progressRing {
+  width: var(--progressRingSize);
+  height: var(--progressRingSize);
+  border-radius: 50%;
+  background-image: conic-gradient(from var(--progressStartAngle), var(--progressRingColorHighlight) 0%, var(--progressRingColor) 30%, var(--progressRingColorShade) 50%, var(--progressRingColor) 80%, var(--progressRingColorHighlight) 95%);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.circularProgressIndicator .progressRing:before, .circularProgressIndicator .progressRing:after {
+  content: "";
+  position: absolute;
+  border-radius: 50%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.circularProgressIndicator .progressRing {
+  /* Mask the progress ring to show only the progress portion */
+}
+.circularProgressIndicator .progressRing:before {
+  width: calc(var(--progressRingSize) + var(--progressRingThickness) + 2px);
+  height: calc(var(--progressRingSize) + var(--progressRingThickness) + 2px);
+  border: 1px solid #fff;
+  z-index: 1;
+  /* This css is correct. Ignore VSCode warning. */
+  background-image: conic-gradient(from var(--progressStartAngle), transparent 0 calc(var(--progress) - 0.2%), var(--progressIndicatorBgColor) calc(var(--progress) + 0.2%));
+}
+.circularProgressIndicator .progressRing:after {
+  z-index: 2;
+  width: calc(var(--progressRingSize) - var(--progressRingThickness));
+  height: calc(var(--progressRingSize) - var(--progressRingThickness));
+  background-color: var(--progressIndicatorBgColor);
+  box-shadow: inset 1px 1px 10px 1px rgba(0, 0, 0, 0.15), inset -2px -2px 5px 1px rgba(0, 0, 0, 0.15);
+}
+.circularProgressIndicator .actionIcon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 50%;
+  height: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  justify-content: center;
+}
+.circularProgressIndicator .actionIcon .icon {
+  height: 24px;
+  font-size: 24px;
+  line-height: 1;
+}
+.circularProgressIndicator .actionIcon .labelText {
+  font-size: 13px;
+  line-height: 1;
+}
+.circularProgressIndicator .actionIcon .iconSvg {
+  fill: none;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  height: 24px;
+}
+.circularProgressIndicator .actionIcon .iconSvg .svgIconColor_1 {
+  stroke: #000;
+}
+.circularProgressIndicator .actionIcon .iconSvg .svgIconColor_2 {
+  stroke: #000;
+}
+.circularProgressIndicator .actionIcon .iconSvg .svgIconFill_1 {
+  fill: var(--progressRingColor);
+}
+.circularProgressIndicator .statusIndicator {
+  position: absolute;
+  top: 9%;
+  right: 9%;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid;
+  font-size: 20px;
+  font-weight: bold;
+  background: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+.circularProgressIndicator .statusIndicator .tooltip {
+  margin: 0;
+  width: 100%;
+}
+.circularProgressIndicator .statusIndicator .tooltip > span.icon_only { /* Non-button passive tooltip version */
+  left: 0;
+  top: 0;
+  min-width: auto;
+  min-height: auto;
+  width: 100%;
+  height: 100%;
+}
+.circularProgressIndicator .statusIndicator .tooltip > span.icon_only .icon,
+.circularProgressIndicator .statusIndicator .tooltip > span.icon_only .svgIcon {
+  width: 100%;
+  height: 100%;
+}
+.circularProgressIndicator .statusIndicator .statusIcon .icon {
+  font-size: 14px;
+  background: none;
+}
+.circularProgressIndicator .statusIndicator .statusIcon .icon.icon-warning {
+  position: relative;
+  top: -1px;
+}

package/dist/esm/components/design/tooltip/Tooltip.js

@@ -5,10 +5,12 @@ import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { useOnClickOutside } from '../../../hooks/ClickOutside';
 import { Icon } from '../icons/basicIcon/Icon';
 import { useOnEdgeProximityDetect } from '../../../hooks/EdgeProximityDetect';
+import { useOnInteractiveHostFocus } from '../../../hooks/InteractiveHostFocus';
 import './tooltip.css';
 
 // Define the props for Tooltip
 
+export const getTooltipContentId = triggerId => `${triggerId}_content`;
 export const Tooltip = props => {
   const {
     triggerId,
@@ -19,7 +21,8 @@ export const Tooltip = props => {
     children,
     label = 'Toggle tooltip open state',
     showPointer = true,
-    hoverDelay
+    hoverDelay,
+    passiveTrigger = false
     // visualIndicators will be handled below
   } = props;
 
@@ -81,7 +84,13 @@ export const Tooltip = props => {
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
   } : {};
-  useOnClickOutside(tooltipElement, dismiss);
+
+  // Passive mode closes on host blur; focusin on the host would otherwise count as "outside".
+  useOnClickOutside(tooltipElement, () => {
+    if (!passiveTrigger) {
+      dismiss();
+    }
+  });
   useOnEdgeProximityDetect({
     triggerRef: triggerElement,
     wrapperRef: tooltipElement,
@@ -97,12 +106,39 @@ export const Tooltip = props => {
   }, [dismiss]);
   useEffect(() => {
     const wrapper = tooltipElement.current;
-    if (!wrapper) {
+    if (!wrapper || passiveTrigger) {
       return undefined;
     }
     wrapper.addEventListener('keydown', handleSpecialKeyPresses);
     return () => wrapper.removeEventListener('keydown', handleSpecialKeyPresses);
-  }, [handleSpecialKeyPresses]);
+  }, [handleSpecialKeyPresses, passiveTrigger]);
+
+  // Passive triggers can't take focus, so open/close follows focus of the interactive host instead.
+  const {
+    isDismissed
+  } = useOnInteractiveHostFocus({
+    wrapperRef: tooltipElement,
+    setIsOpen,
+    enabled: passiveTrigger
+  });
+  const triggerIcon = iconIsElement ? icon : /*#__PURE__*/React.createElement(Icon, {
+    icon: icon.toString()
+  });
+  if (passiveTrigger) {
+    return /*#__PURE__*/React.createElement("span", {
+      ref: tooltipElement,
+      className: `tooltip passive ${isOpen ? 'isOpen' : ''} ${isDismissed ? 'isDismissed' : ''} ${customCssClass || ''}`
+    }, /*#__PURE__*/React.createElement("span", {
+      ref: triggerElement,
+      className: "icon_only",
+      "aria-hidden": "true"
+    }, triggerIcon), /*#__PURE__*/React.createElement("span", {
+      role: "tooltip",
+      ref: contentElement,
+      className: `content ${showPointer ? 'showPointer' : ''}`,
+      id: getTooltipContentId(triggerId)
+    }, children));
+  }
   if (containsBlockElements) {
     return /*#__PURE__*/React.createElement("div", _extends({
       role: "tooltip",