@x15ventures/x15-ui-library 3.16.1 → 3.18.0

package/dist/esm/components/design/sidePanel/SidePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.js","names":["React","useCallback","useEffect","useRef","useState","Icon","SidePanel","id","panelLabel","size","position","positionRefNode","animation","icons","onClose","onOpen","isOpen","allowOverflow","isFloating","customCssClass","customControlButtonCssClass","children","isOpenState","setIsOpenState","panelElement","TOGGLE_TEXT","panelCloseButton","TogglePanelOpenState","newStateIsOpen","getIconCssClass","closed","open","PanelCloseButton","createElement","ref","className","title","type","onClick","icon","panelCssClass","getParentNode","current","document","body","parentNode","classList","add","remove","tabIndex"],"sources":["../../../../../src/components/design/sidePanel/SidePanel.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  ReactNode, useCallback, useEffect, useRef, useState\n} from 'react';\nimport { GenericFunction } from '../../../interfaces';\nimport { Icon } from '../icons/basicIcon/Icon';\n\nimport './sidePanel.scss';\n\nexport interface SidePanelInterface {\n  id: string;\n  panelLabel?: string;\n  size?: 's' | 'm' | 'l';\n  position?: 'left' | 'right' | 'top' | 'bottom';\n  positionRefNode?: HTMLElement | React.RefObject<HTMLElement>;\n  animation?: 'none' | 'slide';\n  icons?: {\n    open: string;\n    closed: string;\n  }\n  onClose?: GenericFunction;\n  onOpen?: GenericFunction;\n  isOpen?: boolean;\n  allowOverflow?: boolean;\n  isFloating?: boolean;\n  customCssClass?: string;\n  customControlButtonCssClass?: string;\n  children: ReactNode;\n}\n\nexport const SidePanel: React.FC<SidePanelInterface> = (\n  {\n    id,\n    panelLabel = 'side panel',\n    size = 'm',\n    position = 'right',\n    positionRefNode,\n    animation = 'slide',\n    icons,\n    onClose = () => {},\n    onOpen = () => {},\n    isOpen = false,\n    allowOverflow = false,\n    isFloating = true,\n    customCssClass,\n    customControlButtonCssClass = '',\n    children\n  }\n) => {\n  const [isOpenState, setIsOpenState] = useState(isOpen);\n  const panelElement = useRef<HTMLDivElement>(null);\n\n  const TOGGLE_TEXT = `Open and close ${ panelLabel }`;\n  const panelCloseButton = useRef(null);\n\n  const TogglePanelOpenState = useCallback(() => {\n    const newStateIsOpen = !isOpenState;\n    setIsOpenState(newStateIsOpen);\n    if (newStateIsOpen) {\n      onOpen();\n    } else {\n      onClose();\n    }\n  }, [isOpenState, onClose, onOpen]);\n\n  const getIconCssClass = () => {\n    if (icons) {\n      return isOpenState ? icons.closed : icons.open;\n    }\n\n    if (isOpenState) {\n      return 'close';\n    }\n\n    switch (position) {\n    case 'left':\n      return 'chevronRightSelect';\n    case 'top':\n      return 'chevronDownSelect';\n    case 'bottom':\n      return 'chevronUpSelect';\n    default:\n      return 'chevronLeftSelect';\n    }\n  };\n\n  const PanelCloseButton: React.FC = () => (\n    <button\n      ref={ panelCloseButton }\n      className={ `sidePanelClose ${ customControlButtonCssClass }` }\n      title={ TOGGLE_TEXT }\n      type=\"button\"\n      onClick={ () => TogglePanelOpenState() }\n    >\n      <Icon icon={ getIconCssClass() } />\n      <span className=\"sr-only\">Open and close panel</span>\n    </button>\n  );\n\n  const panelCssClass = useCallback(() =>\n    `sidePanel \n    ${ isOpenState ? 'isOpen' : '' }\n    ${ allowOverflow ? 'allowOverflow' : '' }\n    ${ isFloating ? 'isFloating' : '' }\n    sidePanelSize_${ size }\n    sidePanelPosition_${ position }\n    sidePanelAnimation_${ animation }\n    ${ customCssClass || '' }`,\n  [isOpenState, isFloating, size, position, animation, customCssClass]);\n\n  useEffect(() => {\n    setIsOpenState(isOpen);\n  }, [isOpen]);\n\n  const getParentNode = () => {\n    if (positionRefNode) {\n      if ('current' in positionRefNode) {\n        return positionRefNode.current ? positionRefNode.current : document.body;\n      }\n      return positionRefNode;\n    }\n    return document.body;\n  };\n\n  useEffect(() => {\n    const parentNode = getParentNode();\n\n    parentNode.classList.add('withSidePanels');\n    if (isOpenState) {\n      parentNode.classList.add(`sidePanel_${ size }_${ position }`);\n    } else {\n      parentNode.classList.remove(`sidePanel_${ size }_${ position }`);\n    }\n    return () =>{\n      parentNode.classList.remove(`sidePanel_${ size }_${ position }`);\n    };\n  }, [animation, isOpenState, position, size]);\n\n  return (\n    <div ref={ panelElement } title={ panelLabel } id={ id } className={ panelCssClass() }>\n      { animation === 'slide' && <PanelCloseButton /> }\n      { /* eslint-disable-next-line jsxA11y/no-noninteractive-tabindex */ }\n      <div className=\"sidePanelContent\" tabIndex={ 0 }>\n        { children }\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SidePanel.js","names":["React","useCallback","useEffect","useRef","useState","renderIcon","SidePanel","id","panelLabel","size","position","positionRefNode","animation","icons","onClose","onOpen","isOpen","allowOverflow","isFloating","customCssClass","customControlButtonCssClass","children","isOpenState","setIsOpenState","panelElement","TOGGLE_TEXT","panelCloseButton","TogglePanelOpenState","newStateIsOpen","getToggleIcon","closed","open","PanelCloseButton","createElement","ref","className","title","type","onClick","panelCssClass","getParentNode","current","document","body","parentNode","classList","add","remove","tabIndex"],"sources":["../../../../../src/components/design/sidePanel/SidePanel.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  ReactNode, useCallback, useEffect, useRef, useState\n} from 'react';\nimport { GenericFunction } from '../../../interfaces';\nimport { IconSource, renderIcon } from '../../../helpers/iconHelpers';\n\nimport './sidePanel.scss';\n\nexport interface SidePanelInterface {\n  id: string;\n  panelLabel?: string;\n  size?: 's' | 'm' | 'l';\n  position?: 'left' | 'right' | 'top' | 'bottom';\n  positionRefNode?: HTMLElement | React.RefObject<HTMLElement>;\n  animation?: 'none' | 'slide';\n  icons?: {\n    open: IconSource;\n    closed: IconSource;\n  }\n  onClose?: GenericFunction;\n  onOpen?: GenericFunction;\n  isOpen?: boolean;\n  allowOverflow?: boolean;\n  isFloating?: boolean;\n  customCssClass?: string;\n  customControlButtonCssClass?: string;\n  children: ReactNode;\n}\n\nexport const SidePanel: React.FC<SidePanelInterface> = (\n  {\n    id,\n    panelLabel = 'side panel',\n    size = 'm',\n    position = 'right',\n    positionRefNode,\n    animation = 'slide',\n    icons,\n    onClose = () => {},\n    onOpen = () => {},\n    isOpen = false,\n    allowOverflow = false,\n    isFloating = true,\n    customCssClass,\n    customControlButtonCssClass = '',\n    children\n  }\n) => {\n  const [isOpenState, setIsOpenState] = useState(isOpen);\n  const panelElement = useRef<HTMLDivElement>(null);\n\n  const TOGGLE_TEXT = `Open and close ${ panelLabel }`;\n  const panelCloseButton = useRef(null);\n\n  const TogglePanelOpenState = useCallback(() => {\n    const newStateIsOpen = !isOpenState;\n    setIsOpenState(newStateIsOpen);\n    if (newStateIsOpen) {\n      onOpen();\n    } else {\n      onClose();\n    }\n  }, [isOpenState, onClose, onOpen]);\n\n  const getToggleIcon = (): IconSource => {\n    if (icons) {\n      return isOpenState ? icons.closed : icons.open;\n    }\n\n    if (isOpenState) {\n      return 'close';\n    }\n\n    switch (position) {\n    case 'left':\n      return 'chevronRightSelect';\n    case 'top':\n      return 'chevronDownSelect';\n    case 'bottom':\n      return 'chevronUpSelect';\n    default:\n      return 'chevronLeftSelect';\n    }\n  };\n\n  const PanelCloseButton: React.FC = () => (\n    <button\n      ref={ panelCloseButton }\n      className={ `sidePanelClose ${ customControlButtonCssClass }` }\n      title={ TOGGLE_TEXT }\n      type=\"button\"\n      onClick={ () => TogglePanelOpenState() }\n    >\n      { renderIcon(getToggleIcon()) }\n      <span className=\"sr-only\">Open and close panel</span>\n    </button>\n  );\n\n  const panelCssClass = useCallback(() =>\n    `sidePanel \n    ${ isOpenState ? 'isOpen' : '' }\n    ${ allowOverflow ? 'allowOverflow' : '' }\n    ${ isFloating ? 'isFloating' : '' }\n    sidePanelSize_${ size }\n    sidePanelPosition_${ position }\n    sidePanelAnimation_${ animation }\n    ${ customCssClass || '' }`,\n  [isOpenState, isFloating, size, position, animation, customCssClass]);\n\n  useEffect(() => {\n    setIsOpenState(isOpen);\n  }, [isOpen]);\n\n  const getParentNode = () => {\n    if (positionRefNode) {\n      if ('current' in positionRefNode) {\n        return positionRefNode.current ? positionRefNode.current : document.body;\n      }\n      return positionRefNode;\n    }\n    return document.body;\n  };\n\n  useEffect(() => {\n    const parentNode = getParentNode();\n\n    parentNode.classList.add('withSidePanels');\n    if (isOpenState) {\n      parentNode.classList.add(`sidePanel_${ size }_${ position }`);\n    } else {\n      parentNode.classList.remove(`sidePanel_${ size }_${ position }`);\n    }\n    return () =>{\n      parentNode.classList.remove(`sidePanel_${ size }_${ position }`);\n    };\n  }, [animation, isOpenState, position, size]);\n\n  return (\n    <div ref={ panelElement } title={ panelLabel } id={ id } className={ panelCssClass() }>\n      { animation === 'slide' && <PanelCloseButton /> }\n      { /* eslint-disable-next-line jsxA11y/no-noninteractive-tabindex */ }\n      <div className=\"sidePanelContent\" tabIndex={ 0 }>\n        { children }\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/design/statusIndicators/statusIconLabel/StatusIconLabel.js

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { dateToShortReadableDateTime } from '../../../../helpers/dateHelpers';
-import { Icon } from '../../icons/basicIcon/Icon';
+import { renderIcon } from '../../../../helpers/iconHelpers';
 import './statusIconLabel.css';
 export const StatusIconLabel = ({
   description,
@@ -23,20 +23,15 @@ export const StatusIconLabel = ({
     defCon3: 'fire',
     success: 'info'
   };
-  const StatusIcon = () => {
-    if (customIcon) {
-      return /*#__PURE__*/React.createElement(Icon, customIcon);
-    }
-    return /*#__PURE__*/React.createElement(Icon, {
-      icon: iconMap[indicator]
-    });
-  };
+  const statusIcon = renderIcon(customIcon, {
+    fallback: iconMap[indicator]
+  });
   return /*#__PURE__*/React.createElement("span", {
     className: `statusIconLabel ${indicator} ${customCssClass}`,
     title: `${status} ${description ? ': ' + description : ''}${dueAt ? '. Due at ' + formattedDueDateTime : ''}`
-  }, iconPosition === 'left' && /*#__PURE__*/React.createElement(StatusIcon, null), /*#__PURE__*/React.createElement("span", {
+  }, iconPosition === 'left' && statusIcon, /*#__PURE__*/React.createElement("span", {
     className: hideLabel ? 'sr-only' : ''
-  }, label), iconPosition !== 'left' && /*#__PURE__*/React.createElement(StatusIcon, null));
+  }, label), iconPosition !== 'left' && statusIcon);
 };
 export default StatusIconLabel;
 //# sourceMappingURL=StatusIconLabel.js.map

package/dist/esm/components/design/statusIndicators/statusIconLabel/StatusIconLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIconLabel.js","names":["React","dateToShortReadableDateTime","Icon","StatusIconLabel","description","status","label","hideLabel","indicator","dueAt","customIcon","customCssClass","iconPosition","formattedDueDateTime","iconMap","info","alert","warn","defCon3","success","StatusIcon","createElement","icon","className","title"],"sources":["../../../../../../src/components/design/statusIndicators/statusIconLabel/StatusIconLabel.tsx"],"sourcesContent":["'use client';\n\nimport React, { ReactNode } from 'react';\nimport { StatusInterface } from '../statusIndicators.interface';\nimport { dateToShortReadableDateTime } from '../../../../helpers/dateHelpers';\nimport { Icon, IconProps } from '../../icons/basicIcon/Icon';\n\nimport './statusIconLabel.scss';\n\nexport interface StatusIconLabelInterface extends Omit<StatusInterface, 'onClick'> {\n  customIcon?: IconProps;\n  iconPosition?: 'left' | 'right';\n  label: string | ReactNode;\n  hideLabel?: boolean;\n  customCssClass?: string;\n}\n\nexport const StatusIconLabel: React.FC<StatusIconLabelInterface> = (\n  {\n    description,\n    status,\n    label,\n    hideLabel = false,\n    indicator = 'info',\n    dueAt,\n    customIcon,\n    customCssClass = '',\n    iconPosition = 'left'\n  }\n) => {\n  const formattedDueDateTime = dueAt ? dateToShortReadableDateTime(dueAt) : 'TBD';\n\n  const iconMap: { [index: string]: string } = {\n    info: 'info',\n    alert: 'notification',\n    warn: 'warning',\n    defCon3: 'fire',\n    success: 'info'\n  };\n\n  const StatusIcon = () => {\n    if (customIcon) {\n      return <Icon { ...customIcon } />;\n    }\n    return <Icon icon={ iconMap[indicator] } />;\n  };\n\n  return (\n    <span\n      className={ `statusIconLabel ${ indicator } ${ customCssClass }` }\n      title={ `${ status } ${ description ? ': ' + description : '' }${ dueAt ? '. Due at ' + formattedDueDateTime : '' }` }\n    >\n      {\n        iconPosition === 'left' &&\n        <StatusIcon />\n      }\n      <span className={ hideLabel ? 'sr-only' : '' }>{ label }</span>\n      {\n        iconPosition !== 'left' &&\n        <StatusIcon />\n      }\n    </span>\n  );\n};\n\nexport default StatusIconLabel;\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,MAAqB,OAAO;AAExC,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,IAAI,QAAmB,4BAA4B;AAE5D,OAAO,wBAAwB;AAU/B,OAAO,MAAMC,eAAmD,GAAGA,CACjE;EACEC,WAAW;EACXC,MAAM;EACNC,KAAK;EACLC,SAAS,GAAG,KAAK;EACjBC,SAAS,GAAG,MAAM;EAClBC,KAAK;EACLC,UAAU;EACVC,cAAc,GAAG,EAAE;EACnBC,YAAY,GAAG;AACjB,CAAC,KACE;EACH,MAAMC,oBAAoB,GAAGJ,KAAK,GAAGR,2BAA2B,CAACQ,KAAK,CAAC,GAAG,KAAK;EAE/E,MAAMK,OAAoC,GAAG;IAC3CC,IAAI,EAAE,MAAM;IACZC,KAAK,EAAE,cAAc;IACrBC,IAAI,EAAE,SAAS;IACfC,OAAO,EAAE,MAAM;IACfC,OAAO,EAAE;EACX,CAAC;EAED,MAAMC,UAAU,GAAGA,CAAA,KAAM;IACvB,IAAIV,UAAU,EAAE;MACd,oBAAOV,KAAA,CAAAqB,aAAA,CAACnB,IAAI,EAAMQ,UAAc,CAAC;IACnC;IACA,oBAAOV,KAAA,CAAAqB,aAAA,CAACnB,IAAI;MAACoB,IAAI,EAAGR,OAAO,CAACN,SAAS;IAAG,CAAE,CAAC;EAC7C,CAAC;EAED,oBACER,KAAA,CAAAqB,aAAA;IACEE,SAAS,EAAG,mBAAoBf,SAAS,IAAMG,cAAc,EAAK;IAClEa,KAAK,EAAG,GAAInB,MAAM,IAAMD,WAAW,GAAG,IAAI,GAAGA,WAAW,GAAG,EAAE,GAAKK,KAAK,GAAG,WAAW,GAAGI,oBAAoB,GAAG,EAAE;EAAK,GAGpHD,YAAY,KAAK,MAAM,iBACvBZ,KAAA,CAAAqB,aAAA,CAACD,UAAU,MAAE,CAAC,eAEhBpB,KAAA,CAAAqB,aAAA;IAAME,SAAS,EAAGhB,SAAS,GAAG,SAAS,GAAG;EAAI,GAAGD,KAAa,CAAC,EAE7DM,YAAY,KAAK,MAAM,iBACvBZ,KAAA,CAAAqB,aAAA,CAACD,UAAU,MAAE,CAEX,CAAC;AAEX,CAAC;AAED,eAAejB,eAAe","ignoreList":[]}
+{"version":3,"file":"StatusIconLabel.js","names":["React","dateToShortReadableDateTime","renderIcon","StatusIconLabel","description","status","label","hideLabel","indicator","dueAt","customIcon","customCssClass","iconPosition","formattedDueDateTime","iconMap","info","alert","warn","defCon3","success","statusIcon","fallback","createElement","className","title"],"sources":["../../../../../../src/components/design/statusIndicators/statusIconLabel/StatusIconLabel.tsx"],"sourcesContent":["'use client';\n\nimport React, { ReactNode } from 'react';\nimport { StatusInterface } from '../statusIndicators.interface';\nimport { dateToShortReadableDateTime } from '../../../../helpers/dateHelpers';\nimport { IconSource, renderIcon } from '../../../../helpers/iconHelpers';\n\nimport './statusIconLabel.scss';\n\nexport interface StatusIconLabelInterface extends Omit<StatusInterface, 'onClick'> {\n  customIcon?: IconSource;\n  iconPosition?: 'left' | 'right';\n  label: string | ReactNode;\n  hideLabel?: boolean;\n  customCssClass?: string;\n}\n\nexport const StatusIconLabel: React.FC<StatusIconLabelInterface> = (\n  {\n    description,\n    status,\n    label,\n    hideLabel = false,\n    indicator = 'info',\n    dueAt,\n    customIcon,\n    customCssClass = '',\n    iconPosition = 'left'\n  }\n) => {\n  const formattedDueDateTime = dueAt ? dateToShortReadableDateTime(dueAt) : 'TBD';\n\n  const iconMap: { [index: string]: string } = {\n    info: 'info',\n    alert: 'notification',\n    warn: 'warning',\n    defCon3: 'fire',\n    success: 'info'\n  };\n\n  const statusIcon = renderIcon(customIcon, { fallback: iconMap[indicator] });\n\n  return (\n    <span\n      className={ `statusIconLabel ${ indicator } ${ customCssClass }` }\n      title={ `${ status } ${ description ? ': ' + description : '' }${ dueAt ? '. Due at ' + formattedDueDateTime : '' }` }\n    >\n      { iconPosition === 'left' && statusIcon }\n      <span className={ hideLabel ? 'sr-only' : '' }>{ label }</span>\n      { iconPosition !== 'left' && statusIcon }\n    </span>\n  );\n};\n\nexport default StatusIconLabel;\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,MAAqB,OAAO;AAExC,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAAqBC,UAAU,QAAQ,iCAAiC;AAExE,OAAO,wBAAwB;AAU/B,OAAO,MAAMC,eAAmD,GAAGA,CACjE;EACEC,WAAW;EACXC,MAAM;EACNC,KAAK;EACLC,SAAS,GAAG,KAAK;EACjBC,SAAS,GAAG,MAAM;EAClBC,KAAK;EACLC,UAAU;EACVC,cAAc,GAAG,EAAE;EACnBC,YAAY,GAAG;AACjB,CAAC,KACE;EACH,MAAMC,oBAAoB,GAAGJ,KAAK,GAAGR,2BAA2B,CAACQ,KAAK,CAAC,GAAG,KAAK;EAE/E,MAAMK,OAAoC,GAAG;IAC3CC,IAAI,EAAE,MAAM;IACZC,KAAK,EAAE,cAAc;IACrBC,IAAI,EAAE,SAAS;IACfC,OAAO,EAAE,MAAM;IACfC,OAAO,EAAE;EACX,CAAC;EAED,MAAMC,UAAU,GAAGlB,UAAU,CAACQ,UAAU,EAAE;IAAEW,QAAQ,EAAEP,OAAO,CAACN,SAAS;EAAE,CAAC,CAAC;EAE3E,oBACER,KAAA,CAAAsB,aAAA;IACEC,SAAS,EAAG,mBAAoBf,SAAS,IAAMG,cAAc,EAAK;IAClEa,KAAK,EAAG,GAAInB,MAAM,IAAMD,WAAW,GAAG,IAAI,GAAGA,WAAW,GAAG,EAAE,GAAKK,KAAK,GAAG,WAAW,GAAGI,oBAAoB,GAAG,EAAE;EAAK,GAEpHD,YAAY,KAAK,MAAM,IAAIQ,UAAU,eACvCpB,KAAA,CAAAsB,aAAA;IAAMC,SAAS,EAAGhB,SAAS,GAAG,SAAS,GAAG;EAAI,GAAGD,KAAa,CAAC,EAC7DM,YAAY,KAAK,MAAM,IAAIQ,UACzB,CAAC;AAEX,CAAC;AAED,eAAejB,eAAe","ignoreList":[]}

package/dist/esm/components/design/tabs/Tabs.js

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState } from 'react';
-import Icon from '../icons/basicIcon/Icon';
+import { renderIcon } from '../../../helpers/iconHelpers';
 import NotificationIcon from '../icons/notificationIcon/NotificationIcon';
 import './tabs.css';
 export const Tabs = ({
@@ -43,7 +43,7 @@ export const Tabs = ({
       type: "button",
       onClick: () => setActiveTab(index),
       className: `button tabControl ${notificationIcon ? 'withNotification' : ''} ${index === activeTab ? 'active' : ''}`
-    }, leftIcon && /*#__PURE__*/React.createElement(Icon, leftIcon), text, rightIcon && /*#__PURE__*/React.createElement(Icon, rightIcon), notificationIcon && /*#__PURE__*/React.createElement(NotificationIcon, notificationIcon));
+    }, renderIcon(leftIcon), text, renderIcon(rightIcon), notificationIcon && /*#__PURE__*/React.createElement(NotificationIcon, notificationIcon));
   })), /*#__PURE__*/React.createElement("div", {
     className: "tabPanels"
   }, tabs.map((tab, index) => {

package/dist/esm/components/design/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":["React","useState","Icon","NotificationIcon","Tabs","tabs","activeTabIndex","activeTab","setActiveTab","getIds","id","controlId","panelId","createElement","className","role","map","tab","index","control","text","leftIcon","rightIcon","notificationIcon","key","tabIndex","type","onClick","content"],"sources":["../../../../../src/components/design/tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState } from 'react';\nimport Icon, { IconProps } from '../icons/basicIcon/Icon';\nimport NotificationIcon, { NotificationIconProps } from '../icons/notificationIcon/NotificationIcon';\n\nimport './tabs.scss';\n\ninterface TabProps {\n  id: string;\n  control: {\n    text: string;\n    leftIcon?: IconProps;\n    rightIcon?: IconProps;\n    notificationIcon?: NotificationIconProps;\n  },\n  content: React.ReactNode | React.ReactElement\n}\n\ninterface TabsProps {\n  tabs: TabProps[];\n  activeTabIndex?: number;\n}\n\nexport const Tabs: React.FC<TabsProps> = (\n  {\n    tabs,\n    activeTabIndex = 0\n  }\n) => {\n  const [activeTab, setActiveTab] = useState(activeTabIndex);\n\n  const getIds = (id: string) => ({\n    controlId: `tabControl_${ id }`,\n    panelId: `tabPanel_${ id }`\n  });\n\n  return (\n    <div className=\"tabGroup\">\n      <div className=\"tabControls\" role=\"tablist\">\n        {\n          tabs.map((tab, index) => {\n            const { id, control } = tab;\n            const {\n              text, leftIcon, rightIcon, notificationIcon\n            } = control;\n\n            const { controlId, panelId } = getIds(id);\n\n            return (\n              <button key={ controlId }\n                role=\"tab\"\n                id={ controlId }\n                aria-controls={ panelId }\n                aria-selected={ index === activeTab }\n                tabIndex={ index === activeTab ? 0 : -1 }\n                type=\"button\"\n                onClick={ () => setActiveTab(index) }\n                className={ `button tabControl ${ notificationIcon ? 'withNotification' : '' } ${ index === activeTab ? 'active' : '' }` }\n              >\n                {\n                  leftIcon && <Icon { ...leftIcon } />\n                }\n\n                { text }\n\n                {\n                  rightIcon && <Icon { ...rightIcon } />\n                }\n\n                {\n                  notificationIcon && <NotificationIcon { ...notificationIcon } />\n                }\n              </button>\n            );\n          })\n        }\n      </div>\n\n      <div className=\"tabPanels\">\n        {\n          tabs.map((tab, index) => {\n            const { id, content } = tab;\n\n            const { controlId, panelId } = getIds(id);\n\n            return (\n              <div key={ panelId }\n                aria-labelledby={ controlId }\n                role=\"tabpanel\"\n                tabIndex={ index === activeTab ? 0 : -1 }\n                id={ panelId }\n                className={ `tabPanel ${ index === activeTab ? 'active' : '' }` }\n              >\n                { content }\n              </div>\n            );\n          })\n        }\n      </div>\n    </div>\n  );\n};\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,OAAOC,IAAI,MAAqB,yBAAyB;AACzD,OAAOC,gBAAgB,MAAiC,4CAA4C;AAEpG,OAAO,aAAa;AAkBpB,OAAO,MAAMC,IAAyB,GAAGA,CACvC;EACEC,IAAI;EACJC,cAAc,GAAG;AACnB,CAAC,KACE;EACH,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGP,QAAQ,CAACK,cAAc,CAAC;EAE1D,MAAMG,MAAM,GAAIC,EAAU,KAAM;IAC9BC,SAAS,EAAE,cAAeD,EAAE,EAAG;IAC/BE,OAAO,EAAE,YAAaF,EAAE;EAC1B,CAAC,CAAC;EAEF,oBACEV,KAAA,CAAAa,aAAA;IAAKC,SAAS,EAAC;EAAU,gBACvBd,KAAA,CAAAa,aAAA;IAAKC,SAAS,EAAC,aAAa;IAACC,IAAI,EAAC;EAAS,GAEvCV,IAAI,CAACW,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,KAAK;IACvB,MAAM;MAAER,EAAE;MAAES;IAAQ,CAAC,GAAGF,GAAG;IAC3B,MAAM;MACJG,IAAI;MAAEC,QAAQ;MAAEC,SAAS;MAAEC;IAC7B,CAAC,GAAGJ,OAAO;IAEX,MAAM;MAAER,SAAS;MAAEC;IAAQ,CAAC,GAAGH,MAAM,CAACC,EAAE,CAAC;IAEzC,oBACEV,KAAA,CAAAa,aAAA;MAAQW,GAAG,EAAGb,SAAW;MACvBI,IAAI,EAAC,KAAK;MACVL,EAAE,EAAGC,SAAW;MAChB,iBAAgBC,OAAS;MACzB,iBAAgBM,KAAK,KAAKX,SAAW;MACrCkB,QAAQ,EAAGP,KAAK,KAAKX,SAAS,GAAG,CAAC,GAAG,CAAC,CAAG;MACzCmB,IAAI,EAAC,QAAQ;MACbC,OAAO,EAAGA,CAAA,KAAMnB,YAAY,CAACU,KAAK,CAAG;MACrCJ,SAAS,EAAG,qBAAsBS,gBAAgB,GAAG,kBAAkB,GAAG,EAAE,IAAML,KAAK,KAAKX,SAAS,GAAG,QAAQ,GAAG,EAAE;IAAK,GAGxHc,QAAQ,iBAAIrB,KAAA,CAAAa,aAAA,CAACX,IAAI,EAAMmB,QAAY,CAAC,EAGpCD,IAAI,EAGJE,SAAS,iBAAItB,KAAA,CAAAa,aAAA,CAACX,IAAI,EAAMoB,SAAa,CAAC,EAItCC,gBAAgB,iBAAIvB,KAAA,CAAAa,aAAA,CAACV,gBAAgB,EAAMoB,gBAAoB,CAE3D,CAAC;EAEb,CAAC,CAEA,CAAC,eAENvB,KAAA,CAAAa,aAAA;IAAKC,SAAS,EAAC;EAAW,GAEtBT,IAAI,CAACW,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,KAAK;IACvB,MAAM;MAAER,EAAE;MAAEkB;IAAQ,CAAC,GAAGX,GAAG;IAE3B,MAAM;MAAEN,SAAS;MAAEC;IAAQ,CAAC,GAAGH,MAAM,CAACC,EAAE,CAAC;IAEzC,oBACEV,KAAA,CAAAa,aAAA;MAAKW,GAAG,EAAGZ,OAAS;MAClB,mBAAkBD,SAAW;MAC7BI,IAAI,EAAC,UAAU;MACfU,QAAQ,EAAGP,KAAK,KAAKX,SAAS,GAAG,CAAC,GAAG,CAAC,CAAG;MACzCG,EAAE,EAAGE,OAAS;MACdE,SAAS,EAAG,YAAaI,KAAK,KAAKX,SAAS,GAAG,QAAQ,GAAG,EAAE;IAAK,GAE/DqB,OACC,CAAC;EAEV,CAAC,CAEA,CACF,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"file":"Tabs.js","names":["React","useState","renderIcon","NotificationIcon","Tabs","tabs","activeTabIndex","activeTab","setActiveTab","getIds","id","controlId","panelId","createElement","className","role","map","tab","index","control","text","leftIcon","rightIcon","notificationIcon","key","tabIndex","type","onClick","content"],"sources":["../../../../../src/components/design/tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState } from 'react';\nimport { IconSource, renderIcon } from '../../../helpers/iconHelpers';\nimport NotificationIcon, { NotificationIconProps } from '../icons/notificationIcon/NotificationIcon';\n\nimport './tabs.scss';\n\ninterface TabProps {\n  id: string;\n  control: {\n    text: string;\n    leftIcon?: IconSource;\n    rightIcon?: IconSource;\n    notificationIcon?: NotificationIconProps;\n  },\n  content: React.ReactNode | React.ReactElement\n}\n\ninterface TabsProps {\n  tabs: TabProps[];\n  activeTabIndex?: number;\n}\n\nexport const Tabs: React.FC<TabsProps> = (\n  {\n    tabs,\n    activeTabIndex = 0\n  }\n) => {\n  const [activeTab, setActiveTab] = useState(activeTabIndex);\n\n  const getIds = (id: string) => ({\n    controlId: `tabControl_${ id }`,\n    panelId: `tabPanel_${ id }`\n  });\n\n  return (\n    <div className=\"tabGroup\">\n      <div className=\"tabControls\" role=\"tablist\">\n        {\n          tabs.map((tab, index) => {\n            const { id, control } = tab;\n            const {\n              text, leftIcon, rightIcon, notificationIcon\n            } = control;\n\n            const { controlId, panelId } = getIds(id);\n\n            return (\n              <button key={ controlId }\n                role=\"tab\"\n                id={ controlId }\n                aria-controls={ panelId }\n                aria-selected={ index === activeTab }\n                tabIndex={ index === activeTab ? 0 : -1 }\n                type=\"button\"\n                onClick={ () => setActiveTab(index) }\n                className={ `button tabControl ${ notificationIcon ? 'withNotification' : '' } ${ index === activeTab ? 'active' : '' }` }\n              >\n                { renderIcon(leftIcon) }\n\n                { text }\n\n                { renderIcon(rightIcon) }\n\n                {\n                  notificationIcon && <NotificationIcon { ...notificationIcon } />\n                }\n              </button>\n            );\n          })\n        }\n      </div>\n\n      <div className=\"tabPanels\">\n        {\n          tabs.map((tab, index) => {\n            const { id, content } = tab;\n\n            const { controlId, panelId } = getIds(id);\n\n            return (\n              <div key={ panelId }\n                aria-labelledby={ controlId }\n                role=\"tabpanel\"\n                tabIndex={ index === activeTab ? 0 : -1 }\n                id={ panelId }\n                className={ `tabPanel ${ index === activeTab ? 'active' : '' }` }\n              >\n                { content }\n              </div>\n            );\n          })\n        }\n      </div>\n    </div>\n  );\n};\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAAqBC,UAAU,QAAQ,8BAA8B;AACrE,OAAOC,gBAAgB,MAAiC,4CAA4C;AAEpG,OAAO,aAAa;AAkBpB,OAAO,MAAMC,IAAyB,GAAGA,CACvC;EACEC,IAAI;EACJC,cAAc,GAAG;AACnB,CAAC,KACE;EACH,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGP,QAAQ,CAACK,cAAc,CAAC;EAE1D,MAAMG,MAAM,GAAIC,EAAU,KAAM;IAC9BC,SAAS,EAAE,cAAeD,EAAE,EAAG;IAC/BE,OAAO,EAAE,YAAaF,EAAE;EAC1B,CAAC,CAAC;EAEF,oBACEV,KAAA,CAAAa,aAAA;IAAKC,SAAS,EAAC;EAAU,gBACvBd,KAAA,CAAAa,aAAA;IAAKC,SAAS,EAAC,aAAa;IAACC,IAAI,EAAC;EAAS,GAEvCV,IAAI,CAACW,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,KAAK;IACvB,MAAM;MAAER,EAAE;MAAES;IAAQ,CAAC,GAAGF,GAAG;IAC3B,MAAM;MACJG,IAAI;MAAEC,QAAQ;MAAEC,SAAS;MAAEC;IAC7B,CAAC,GAAGJ,OAAO;IAEX,MAAM;MAAER,SAAS;MAAEC;IAAQ,CAAC,GAAGH,MAAM,CAACC,EAAE,CAAC;IAEzC,oBACEV,KAAA,CAAAa,aAAA;MAAQW,GAAG,EAAGb,SAAW;MACvBI,IAAI,EAAC,KAAK;MACVL,EAAE,EAAGC,SAAW;MAChB,iBAAgBC,OAAS;MACzB,iBAAgBM,KAAK,KAAKX,SAAW;MACrCkB,QAAQ,EAAGP,KAAK,KAAKX,SAAS,GAAG,CAAC,GAAG,CAAC,CAAG;MACzCmB,IAAI,EAAC,QAAQ;MACbC,OAAO,EAAGA,CAAA,KAAMnB,YAAY,CAACU,KAAK,CAAG;MACrCJ,SAAS,EAAG,qBAAsBS,gBAAgB,GAAG,kBAAkB,GAAG,EAAE,IAAML,KAAK,KAAKX,SAAS,GAAG,QAAQ,GAAG,EAAE;IAAK,GAExHL,UAAU,CAACmB,QAAQ,CAAC,EAEpBD,IAAI,EAEJlB,UAAU,CAACoB,SAAS,CAAC,EAGrBC,gBAAgB,iBAAIvB,KAAA,CAAAa,aAAA,CAACV,gBAAgB,EAAMoB,gBAAoB,CAE3D,CAAC;EAEb,CAAC,CAEA,CAAC,eAENvB,KAAA,CAAAa,aAAA;IAAKC,SAAS,EAAC;EAAW,GAEtBT,IAAI,CAACW,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,KAAK;IACvB,MAAM;MAAER,EAAE;MAAEkB;IAAQ,CAAC,GAAGX,GAAG;IAE3B,MAAM;MAAEN,SAAS;MAAEC;IAAQ,CAAC,GAAGH,MAAM,CAACC,EAAE,CAAC;IAEzC,oBACEV,KAAA,CAAAa,aAAA;MAAKW,GAAG,EAAGZ,OAAS;MAClB,mBAAkBD,SAAW;MAC7BI,IAAI,EAAC,UAAU;MACfU,QAAQ,EAAGP,KAAK,KAAKX,SAAS,GAAG,CAAC,GAAG,CAAC,CAAG;MACzCG,EAAE,EAAGE,OAAS;MACdE,SAAS,EAAG,YAAaI,KAAK,KAAKX,SAAS,GAAG,QAAQ,GAAG,EAAE;IAAK,GAE/DqB,OACC,CAAC;EAEV,CAAC,CAEA,CACF,CAAC;AAEV,CAAC","ignoreList":[]}

package/dist/esm/components/design/themeLoader/ThemeLoader.js

@@ -4,7 +4,7 @@ import React, { useContext, useEffect, useRef, useMemo } from 'react';
 import libraryThemes from '../../../autoGenerated/libraryThemes';
 import { AppContext } from '../../../contextProviders/appContext/AppContextProvider';
 import { CURRENT_DOMAIN } from '../../../constants/appEnvironment';
-import { LIBRARY_CDN_DEV_BASE_URL, LIBRARY_CDN_PROD_BASE_URL, LIBRARY_VERSION } from '../../../constants';
+import { LIBRARY_CDN_DEV_BASE_URL, LIBRARY_CDN_PROD_BASE_URL, LIBRARY_VERSION } from '../../../constants/libraryCDN';
 const themes = libraryThemes || {};
 export const ThemeLoader = ({
   useMin = false,

package/dist/esm/components/design/themeLoader/ThemeLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeLoader.js","names":["React","useContext","useEffect","useRef","useMemo","libraryThemes","AppContext","CURRENT_DOMAIN","LIBRARY_CDN_DEV_BASE_URL","LIBRARY_CDN_PROD_BASE_URL","LIBRARY_VERSION","themes","ThemeLoader","useMin","forceProd","forceCacheBusting","userTheme","useLatest","baseCssLink","themeCssLink","appContextProvider","appTheme","appContext","theme","activeTheme","publicLibraryDomain","env","process","NODE_ENV","isProduction","isDevelopment","cdnBaseUrl","getThemeCss","console","warn","buildPath","dev","min","versioned","cssFile","css","cacheBuster","Date","getTime","libraryDomain","baseCss","themeCss","current","href","createElement","Fragment","ref","rel","as"],"sources":["../../../../../src/components/design/themeLoader/ThemeLoader.tsx"],"sourcesContent":["'use client';\n\nimport React, { useContext, useEffect, useRef, useMemo } from 'react';\n\nimport libraryThemes from '../../../autoGenerated/libraryThemes';\nimport { AppContext } from '../../../contextProviders/appContext/AppContextProvider';\nimport { CURRENT_DOMAIN } from '../../../constants/appEnvironment';\nimport { LIBRARY_CDN_DEV_BASE_URL, LIBRARY_CDN_PROD_BASE_URL, LIBRARY_VERSION } from '../../../constants';\n\nexport type ThemeStructure = {\n  buildPath: string;\n  dev: {\n    css: string;\n    map: string;\n  };\n  min: {\n    css: string;\n    map: string;\n  };\n  versioned: {\n    css: string;\n    map: string;\n  };\n};\n\ntype AvailableThemes = {\n  [themeName: string]: ThemeStructure;\n};\n\ntype themeLoaderProps = {\n  useMin?: boolean,\n  forceProd?: boolean,\n  forceCacheBusting?: boolean,\n  userTheme?: string;\n  useLatest?: boolean;\n};\n\nconst themes: AvailableThemes = libraryThemes || {};\n\nexport const ThemeLoader: React.FC<themeLoaderProps> = (\n  {\n    useMin = false,\n    forceProd = false,\n    forceCacheBusting = false,\n    userTheme,\n    useLatest = true,\n  }\n) => {\n  const baseCssLink = useRef<HTMLLinkElement>(null);\n  const themeCssLink = useRef<HTMLLinkElement>(null);\n\n  const appContextProvider = useContext(AppContext);\n  const appTheme = appContextProvider?.appContext?.theme;\n\n  const activeTheme = userTheme || appTheme;\n  const publicLibraryDomain = appContextProvider?.appContext?.publicLibraryDomain || '';\n\n  const env = process.env.NODE_ENV;\n  const isProduction = env === 'production' || env === 'prod';\n  const isDevelopment = env === 'development' || env === 'dev';\n\n  const cdnBaseUrl = `${ isProduction ? LIBRARY_CDN_PROD_BASE_URL : LIBRARY_CDN_DEV_BASE_URL }/${ useLatest ? 'latest' : LIBRARY_VERSION }`;\n\n  const getThemeCss = (theme: string | undefined) => {\n    if (!theme || !themes[theme]) {\n      console.warn(`Theme \"${ theme }\" not found. Using default variables instead.`);\n      return null;\n    }\n\n    const {\n      buildPath, dev, min, versioned\n    } = themes[theme];\n\n    const cssFile = () => {\n      if (forceProd) {\n        return versioned.css;\n      }\n\n      if (isProduction) {\n        return useMin ? versioned.css : min.css;\n      }\n\n      if (isDevelopment) {\n        return useMin ? min.css : dev.css;\n      }\n\n      return dev.css;\n    };\n\n    const cacheBuster = CURRENT_DOMAIN === 'localhost' || forceCacheBusting ? `?v=${ new Date().getTime() }` : '';\n    const libraryDomain = publicLibraryDomain !== '' ? `${ publicLibraryDomain }` : cdnBaseUrl;\n\n    return `${ libraryDomain }/${ buildPath }/${ cssFile() }${ cacheBuster }`;\n  };\n\n  const baseCss = useMemo(() => getThemeCss('base'), [activeTheme, useMin, forceProd, forceCacheBusting]);\n  const themeCss = useMemo(() => getThemeCss(activeTheme), [activeTheme, useMin, forceProd, forceCacheBusting]);\n\n  useEffect(() => {\n    if (baseCss && baseCssLink.current) {\n      baseCssLink.current.href = baseCss;\n    }\n    if (themeCss && themeCssLink.current) {\n      themeCssLink.current.href = themeCss;\n    }\n  }, [activeTheme]);\n\n  return (\n    <>\n      <link ref={ baseCssLink } rel=\"stylesheet\" as=\"style\" />\n      <link ref={ themeCssLink } rel=\"stylesheet\" as=\"style\" />\n    </>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ThemeLoader.js","names":["React","useContext","useEffect","useRef","useMemo","libraryThemes","AppContext","CURRENT_DOMAIN","LIBRARY_CDN_DEV_BASE_URL","LIBRARY_CDN_PROD_BASE_URL","LIBRARY_VERSION","themes","ThemeLoader","useMin","forceProd","forceCacheBusting","userTheme","useLatest","baseCssLink","themeCssLink","appContextProvider","appTheme","appContext","theme","activeTheme","publicLibraryDomain","env","process","NODE_ENV","isProduction","isDevelopment","cdnBaseUrl","getThemeCss","console","warn","buildPath","dev","min","versioned","cssFile","css","cacheBuster","Date","getTime","libraryDomain","baseCss","themeCss","current","href","createElement","Fragment","ref","rel","as"],"sources":["../../../../../src/components/design/themeLoader/ThemeLoader.tsx"],"sourcesContent":["'use client';\n\nimport React, { useContext, useEffect, useRef, useMemo } from 'react';\n\nimport libraryThemes from '../../../autoGenerated/libraryThemes';\nimport { AppContext } from '../../../contextProviders/appContext/AppContextProvider';\nimport { CURRENT_DOMAIN } from '../../../constants/appEnvironment';\nimport { LIBRARY_CDN_DEV_BASE_URL, LIBRARY_CDN_PROD_BASE_URL, LIBRARY_VERSION } from '../../../constants/libraryCDN';\n\nexport type ThemeStructure = {\n  buildPath: string;\n  dev: {\n    css: string;\n    map: string;\n  };\n  min: {\n    css: string;\n    map: string;\n  };\n  versioned: {\n    css: string;\n    map: string;\n  };\n};\n\ntype AvailableThemes = {\n  [themeName: string]: ThemeStructure;\n};\n\ntype themeLoaderProps = {\n  useMin?: boolean,\n  forceProd?: boolean,\n  forceCacheBusting?: boolean,\n  userTheme?: string;\n  useLatest?: boolean;\n};\n\nconst themes: AvailableThemes = libraryThemes || {};\n\nexport const ThemeLoader: React.FC<themeLoaderProps> = (\n  {\n    useMin = false,\n    forceProd = false,\n    forceCacheBusting = false,\n    userTheme,\n    useLatest = true,\n  }\n) => {\n  const baseCssLink = useRef<HTMLLinkElement>(null);\n  const themeCssLink = useRef<HTMLLinkElement>(null);\n\n  const appContextProvider = useContext(AppContext);\n  const appTheme = appContextProvider?.appContext?.theme;\n\n  const activeTheme = userTheme || appTheme;\n  const publicLibraryDomain = appContextProvider?.appContext?.publicLibraryDomain || '';\n\n  const env = process.env.NODE_ENV;\n  const isProduction = env === 'production' || env === 'prod';\n  const isDevelopment = env === 'development' || env === 'dev';\n\n  const cdnBaseUrl = `${ isProduction ? LIBRARY_CDN_PROD_BASE_URL : LIBRARY_CDN_DEV_BASE_URL }/${ useLatest ? 'latest' : LIBRARY_VERSION }`;\n\n  const getThemeCss = (theme: string | undefined) => {\n    if (!theme || !themes[theme]) {\n      console.warn(`Theme \"${ theme }\" not found. Using default variables instead.`);\n      return null;\n    }\n\n    const {\n      buildPath, dev, min, versioned\n    } = themes[theme];\n\n    const cssFile = () => {\n      if (forceProd) {\n        return versioned.css;\n      }\n\n      if (isProduction) {\n        return useMin ? versioned.css : min.css;\n      }\n\n      if (isDevelopment) {\n        return useMin ? min.css : dev.css;\n      }\n\n      return dev.css;\n    };\n\n    const cacheBuster = CURRENT_DOMAIN === 'localhost' || forceCacheBusting ? `?v=${ new Date().getTime() }` : '';\n    const libraryDomain = publicLibraryDomain !== '' ? `${ publicLibraryDomain }` : cdnBaseUrl;\n\n    return `${ libraryDomain }/${ buildPath }/${ cssFile() }${ cacheBuster }`;\n  };\n\n  const baseCss = useMemo(() => getThemeCss('base'), [activeTheme, useMin, forceProd, forceCacheBusting]);\n  const themeCss = useMemo(() => getThemeCss(activeTheme), [activeTheme, useMin, forceProd, forceCacheBusting]);\n\n  useEffect(() => {\n    if (baseCss && baseCssLink.current) {\n      baseCssLink.current.href = baseCss;\n    }\n    if (themeCss && themeCssLink.current) {\n      themeCssLink.current.href = themeCss;\n    }\n  }, [activeTheme]);\n\n  return (\n    <>\n      <link ref={ baseCssLink } rel=\"stylesheet\" as=\"style\" />\n      <link ref={ themeCssLink } rel=\"stylesheet\" as=\"style\" />\n    </>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -3,12 +3,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { useOnClickOutside } from '../../../hooks/ClickOutside';
-import { Icon } from '../icons/basicIcon/Icon';
+import { renderIcon } from '../../../helpers/iconHelpers';
 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;
 
@@ -34,7 +37,6 @@ export const Tooltip = props => {
   const triggerElement = useRef(null);
   const contentElement = useRef(null);
   const hoverTimer = useRef(null);
-  const iconIsElement = /*#__PURE__*/React.isValidElement(icon);
 
   // Hover is handled in css by default. It is only taken over by js when a delay is requested.
   const hasHoverDelay = typeof hoverDelay === 'number' && hoverDelay > 0;
@@ -81,7 +83,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 +105,37 @@ 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 = renderIcon(icon);
+  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",
@@ -118,9 +151,7 @@ export const Tooltip = props => {
       'aria-describedby': `${triggerId}_content`
     } : {}, triggerStyle === 'icon' ? {
       'aria-label': typeof label === 'string' ? label : undefined
-    } : {}), triggerStyle === 'icon' && (iconIsElement ? icon : /*#__PURE__*/React.createElement(Icon, {
-      icon: icon.toString()
-    })), triggerStyle === 'text' && /*#__PURE__*/React.createElement("span", {
+    } : {}), triggerStyle === 'icon' && triggerIcon, triggerStyle === 'text' && /*#__PURE__*/React.createElement("span", {
       className: "labelText"
     }, label)), /*#__PURE__*/React.createElement("div", _extends({
       ref: contentElement,
@@ -141,9 +172,7 @@ export const Tooltip = props => {
     id: triggerId
   } : {}, triggerStyle === 'icon' ? {
     'aria-label': typeof label === 'string' ? label : undefined
-  } : {}), triggerStyle === 'icon' && (iconIsElement ? icon : /*#__PURE__*/React.createElement(Icon, {
-    icon: icon.toString()
-  })), triggerStyle === 'text' && /*#__PURE__*/React.createElement("span", {
+  } : {}), triggerStyle === 'icon' && triggerIcon, triggerStyle === 'text' && /*#__PURE__*/React.createElement("span", {
     className: "labelText"
   }, label)), /*#__PURE__*/React.createElement("span", _extends({
     "aria-hidden": true,

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["_extends","React","useState","useRef","useEffect","useCallback","useOnClickOutside","Icon","useOnEdgeProximityDetect","Tooltip","props","triggerId","triggerStyle","icon","customCssClass","containsBlockElements","children","label","showPointer","hoverDelay","visualIndicators","underline","colouredText","undefined","isOpen","setIsOpen","isHovered","setIsHovered","tooltipElement","triggerElement","contentElement","hoverTimer","iconIsElement","isValidElement","hasHoverDelay","isVisible","clearHoverTimer","current","clearTimeout","handleMouseEnter","setTimeout","handleMouseLeave","dismiss","handleTriggerClick","hoverHandlers","onMouseEnter","onMouseLeave","triggerRef","wrapperRef","contentRef","requiresRecalc","handleSpecialKeyPresses","event","key","keyCode","wrapper","addEventListener","removeEventListener","createElement","role","ref","className","type","onClick","toString","id"],"sources":["../../../../../src/components/design/tooltip/Tooltip.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState, useRef, useEffect, useCallback, ReactNode, ReactElement } from 'react';\nimport { useOnClickOutside } from '../../../hooks/ClickOutside';\nimport { Icon } from '../icons/basicIcon/Icon';\nimport { useOnEdgeProximityDetect } from '../../../hooks/EdgeProximityDetect';\nimport './tooltip.scss';\n\n// Define the props for Tooltip\nexport type TooltipProps =\n   {\n      triggerId?: string;\n      icon?: ReactElement | string;\n      customCssClass?: string;\n      children: ReactNode;\n      containsBlockElements?: boolean;\n      triggerStyle?: 'icon';\n      label?: string | ReactNode;\n      showPointer?: boolean;\n      hoverDelay?: number;\n    }\n  | {\n      triggerId?: string;\n      icon?: ReactElement | string;\n      customCssClass?: string;\n      children: ReactNode;\n      containsBlockElements?: boolean;\n      triggerStyle: 'text';\n      label?: string | ReactNode;\n      showPointer?: boolean;\n      hoverDelay?: number;\n      visualIndicators?: { underline?: boolean; colouredText?: boolean };\n    };\n\nexport const Tooltip: React.FC<TooltipProps> = (props) => {\n  const {\n    triggerId,\n    triggerStyle = 'icon',\n    icon = 'info',\n    customCssClass,\n    containsBlockElements = false,\n    children,\n    label = 'Toggle tooltip open state',\n    showPointer = true,\n    hoverDelay,\n    // visualIndicators will be handled below\n  } = props as any;\n\n  // Only use visualIndicators if triggerStyle is 'text'\n  const visualIndicators =\n    triggerStyle === 'text'\n      ? (props as { visualIndicators?: { underline?: boolean; colouredText?: boolean } }).visualIndicators ?? { underline: true, colouredText: true }\n      : undefined;\n  const [isOpen, setIsOpen] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const tooltipElement = useRef<HTMLDivElement | HTMLSpanElement>(null);\n  const triggerElement = useRef<HTMLButtonElement>(null);\n  const contentElement = useRef<HTMLDivElement | HTMLSpanElement>(null);\n  const hoverTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const iconIsElement = React.isValidElement(icon);\n\n  // Hover is handled in css by default. It is only taken over by js when a delay is requested.\n  const hasHoverDelay = typeof hoverDelay === 'number' && hoverDelay > 0;\n  const isVisible = isOpen || isHovered;\n\n  const clearHoverTimer = useCallback(() => {\n    if (hoverTimer.current) {\n      clearTimeout(hoverTimer.current);\n      hoverTimer.current = null;\n    }\n  }, []);\n\n  const handleMouseEnter = useCallback(() => {\n    clearHoverTimer();\n    hoverTimer.current = setTimeout(() => setIsHovered(true), hoverDelay);\n  }, [clearHoverTimer, hoverDelay]);\n\n  const handleMouseLeave = useCallback(() => {\n    clearHoverTimer();\n    setIsHovered(false);\n  }, [clearHoverTimer]);\n\n  // Single dismissal path, so every close route clears both the click and hover state\n  const dismiss = useCallback(() => {\n    clearHoverTimer();\n    setIsHovered(false);\n    setIsOpen(false);\n  }, [clearHoverTimer]);\n\n  const handleTriggerClick = useCallback(() => {\n    if (isVisible) {\n      dismiss();\n      return;\n    }\n    clearHoverTimer();\n    setIsOpen(true);\n  }, [isVisible, dismiss, clearHoverTimer]);\n\n  // Releasing the delay detaches the mouse handlers, so reset any hover state they left behind\n  useEffect(() => {\n    if (!hasHoverDelay) {\n      clearHoverTimer();\n      setIsHovered(false);\n    }\n  }, [hasHoverDelay, clearHoverTimer]);\n\n  useEffect(() => clearHoverTimer, [clearHoverTimer]);\n\n  const hoverHandlers = hasHoverDelay\n    ? { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }\n    : {};\n\n  useOnClickOutside(tooltipElement, dismiss);\n\n  useOnEdgeProximityDetect({\n    triggerRef: triggerElement,\n    wrapperRef: tooltipElement,\n    contentRef: contentElement,\n    requiresRecalc: isVisible,\n  });\n\n  // Handle special key presses\n  const handleSpecialKeyPresses = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === 'Escape' || event.keyCode === 27) {\n        dismiss();\n      }\n    },\n    [dismiss],\n  );\n\n  useEffect(() => {\n    const wrapper = tooltipElement.current;\n    if (!wrapper) {\n      return undefined;\n    }\n    wrapper.addEventListener('keydown', handleSpecialKeyPresses as EventListener);\n    return () => wrapper.removeEventListener('keydown', handleSpecialKeyPresses as EventListener);\n  }, [handleSpecialKeyPresses]);\n\n  if (containsBlockElements) {\n    return (\n      <div\n        role=\"tooltip\"\n        ref={ tooltipElement as React.RefObject<HTMLDivElement> }\n        className={ `tooltip tooltip_block ${ isVisible ? 'isOpen' : '' } ${ hasHoverDelay ? 'hoverDelayed' : '' } ${ triggerStyle === 'text' ? 'textDisplay' : '' } ${ customCssClass || '' }` }\n        { ...hoverHandlers }\n      >\n        <button\n          ref={ triggerElement }\n          type=\"button\"\n          onClick={ handleTriggerClick }\n          className={ `button ${ triggerStyle === 'text' ? 'text_only' : 'icon_only' } ${ triggerStyle === 'text' && !visualIndicators?.underline ? 'underline_off' : '' } ${ triggerStyle === 'text' && !visualIndicators?.colouredText ? 'colouredText_off' : '' }` }\n          { ...(triggerId ? { 'id': triggerId, 'aria-describedby': `${ triggerId }_content` } : {}) }\n          { ...(triggerStyle === 'icon' ? { 'aria-label': typeof label === 'string' ? label : undefined } : {}) }\n        >\n          { triggerStyle === 'icon' && (iconIsElement ? icon : <Icon icon={ icon.toString() } />) }\n          { triggerStyle === 'text' && <span className=\"labelText\">{ label }</span> }\n        </button>\n        <div\n          ref={ contentElement as React.RefObject<HTMLDivElement> }\n          className={ `content ${ showPointer ? 'showPointer' : '' }` }\n          { ...(triggerId ? { id: `${ triggerId }_content` } : {}) }\n        >\n          { children }\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <span\n      ref={ tooltipElement as React.RefObject<HTMLSpanElement> }\n      className={ `tooltip ${ isVisible ? 'isOpen' : '' } ${ hasHoverDelay ? 'hoverDelayed' : '' } ${ triggerStyle === 'text' ? 'textDisplay' : '' } ${ customCssClass || '' }` }\n      { ...hoverHandlers }\n    >\n      <button\n        ref={ triggerElement }\n        type=\"button\"\n        onClick={ handleTriggerClick }\n        className={ `button ${ triggerStyle === 'text' ? 'text_only' : 'icon_only' } ${ triggerStyle === 'text' && !visualIndicators?.underline ? 'underline_off' : '' } ${ triggerStyle === 'text' && !visualIndicators?.colouredText ? 'colouredText_off' : '' }` }\n        { ...(triggerId ? { id: triggerId } : {}) }\n        { ...(triggerStyle === 'icon' ? { 'aria-label': typeof label === 'string' ? label : undefined } : {}) }\n      >\n        { triggerStyle === 'icon' && (iconIsElement ? icon : <Icon icon={ icon.toString() } />) }\n        { triggerStyle === 'text' && <span className=\"labelText\">{ label }</span> }\n      </button>\n      <span\n        aria-hidden\n        role=\"presentation\"\n        ref={ contentElement as React.RefObject<HTMLSpanElement> }\n        className={ `content ${ showPointer ? 'showPointer' : '' }` }\n        { ...(triggerId ? { id: `${ triggerId }_content` } : {}) }\n      >\n        { children }\n      </span>\n    </span>\n  );\n};\n\nexport default Tooltip;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Tooltip.js","names":["_extends","React","useState","useRef","useEffect","useCallback","useOnClickOutside","renderIcon","useOnEdgeProximityDetect","useOnInteractiveHostFocus","getTooltipContentId","triggerId","Tooltip","props","triggerStyle","icon","customCssClass","containsBlockElements","children","label","showPointer","hoverDelay","passiveTrigger","visualIndicators","underline","colouredText","undefined","isOpen","setIsOpen","isHovered","setIsHovered","tooltipElement","triggerElement","contentElement","hoverTimer","hasHoverDelay","isVisible","clearHoverTimer","current","clearTimeout","handleMouseEnter","setTimeout","handleMouseLeave","dismiss","handleTriggerClick","hoverHandlers","onMouseEnter","onMouseLeave","triggerRef","wrapperRef","contentRef","requiresRecalc","handleSpecialKeyPresses","event","key","keyCode","wrapper","addEventListener","removeEventListener","isDismissed","enabled","triggerIcon","createElement","ref","className","role","id","type","onClick"],"sources":["../../../../../src/components/design/tooltip/Tooltip.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState, useRef, useEffect, useCallback, ReactNode } from 'react';\nimport { useOnClickOutside } from '../../../hooks/ClickOutside';\nimport { IconSource, renderIcon } from '../../../helpers/iconHelpers';\nimport { useOnEdgeProximityDetect } from '../../../hooks/EdgeProximityDetect';\nimport { useOnInteractiveHostFocus } from '../../../hooks/InteractiveHostFocus';\nimport './tooltip.scss';\n\n// Define the props for Tooltip\nexport type TooltipProps =\n   {\n      triggerId?: string;\n      icon?: IconSource;\n      customCssClass?: string;\n      children: ReactNode;\n      containsBlockElements?: boolean;\n      triggerStyle?: 'icon';\n      label?: string | ReactNode;\n      showPointer?: boolean;\n      hoverDelay?: number;\n      passiveTrigger?: false;\n    }\n  | {\n      /**\n       * Renders a non-focusable trigger for use inside another interactive element (e.g. a button).\n       */\n      passiveTrigger: true;\n      triggerId: string;\n      icon?: IconSource;\n      customCssClass?: string;\n      children: ReactNode;\n      showPointer?: boolean;\n    }\n  | {\n      triggerId?: string;\n      icon?: IconSource;\n      customCssClass?: string;\n      children: ReactNode;\n      containsBlockElements?: boolean;\n      triggerStyle: 'text';\n      label?: string | ReactNode;\n      showPointer?: boolean;\n      hoverDelay?: number;\n      visualIndicators?: { underline?: boolean; colouredText?: boolean };\n      passiveTrigger?: false;\n    };\n\nexport const getTooltipContentId = (triggerId: string) => `${ triggerId }_content`;\n\nexport const Tooltip: React.FC<TooltipProps> = (props) => {\n  const {\n    triggerId,\n    triggerStyle = 'icon',\n    icon = 'info',\n    customCssClass,\n    containsBlockElements = false,\n    children,\n    label = 'Toggle tooltip open state',\n    showPointer = true,\n    hoverDelay,\n    passiveTrigger = false,\n    // visualIndicators will be handled below\n  } = props as any;\n\n  // Only use visualIndicators if triggerStyle is 'text'\n  const visualIndicators =\n    triggerStyle === 'text'\n      ? (props as { visualIndicators?: { underline?: boolean; colouredText?: boolean } }).visualIndicators ?? { underline: true, colouredText: true }\n      : undefined;\n  const [isOpen, setIsOpen] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const tooltipElement = useRef<HTMLDivElement | HTMLSpanElement>(null);\n  const triggerElement = useRef<HTMLButtonElement | HTMLSpanElement>(null);\n  const contentElement = useRef<HTMLDivElement | HTMLSpanElement>(null);\n  const hoverTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  // Hover is handled in css by default. It is only taken over by js when a delay is requested.\n  const hasHoverDelay = typeof hoverDelay === 'number' && hoverDelay > 0;\n  const isVisible = isOpen || isHovered;\n\n  const clearHoverTimer = useCallback(() => {\n    if (hoverTimer.current) {\n      clearTimeout(hoverTimer.current);\n      hoverTimer.current = null;\n    }\n  }, []);\n\n  const handleMouseEnter = useCallback(() => {\n    clearHoverTimer();\n    hoverTimer.current = setTimeout(() => setIsHovered(true), hoverDelay);\n  }, [clearHoverTimer, hoverDelay]);\n\n  const handleMouseLeave = useCallback(() => {\n    clearHoverTimer();\n    setIsHovered(false);\n  }, [clearHoverTimer]);\n\n  // Single dismissal path, so every close route clears both the click and hover state\n  const dismiss = useCallback(() => {\n    clearHoverTimer();\n    setIsHovered(false);\n    setIsOpen(false);\n  }, [clearHoverTimer]);\n\n  const handleTriggerClick = useCallback(() => {\n    if (isVisible) {\n      dismiss();\n      return;\n    }\n    clearHoverTimer();\n    setIsOpen(true);\n  }, [isVisible, dismiss, clearHoverTimer]);\n\n  // Releasing the delay detaches the mouse handlers, so reset any hover state they left behind\n  useEffect(() => {\n    if (!hasHoverDelay) {\n      clearHoverTimer();\n      setIsHovered(false);\n    }\n  }, [hasHoverDelay, clearHoverTimer]);\n\n  useEffect(() => clearHoverTimer, [clearHoverTimer]);\n\n  const hoverHandlers = hasHoverDelay\n    ? { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }\n    : {};\n\n  // Passive mode closes on host blur; focusin on the host would otherwise count as \"outside\".\n  useOnClickOutside(tooltipElement, () => {\n    if (!passiveTrigger) {\n      dismiss();\n    }\n  });\n\n  useOnEdgeProximityDetect({\n    triggerRef: triggerElement,\n    wrapperRef: tooltipElement,\n    contentRef: contentElement,\n    requiresRecalc: isVisible,\n  });\n\n  // Handle special key presses\n  const handleSpecialKeyPresses = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === 'Escape' || event.keyCode === 27) {\n        dismiss();\n      }\n    },\n    [dismiss],\n  );\n\n  useEffect(() => {\n    const wrapper = tooltipElement.current;\n    if (!wrapper || passiveTrigger) {\n      return undefined;\n    }\n    wrapper.addEventListener('keydown', handleSpecialKeyPresses as EventListener);\n    return () => wrapper.removeEventListener('keydown', handleSpecialKeyPresses as EventListener);\n  }, [handleSpecialKeyPresses, passiveTrigger]);\n\n  // Passive triggers can't take focus, so open/close follows focus of the interactive host instead.\n  const { isDismissed } = useOnInteractiveHostFocus({\n    wrapperRef: tooltipElement,\n    setIsOpen,\n    enabled: passiveTrigger,\n  });\n\n  const triggerIcon = renderIcon(icon);\n\n  if (passiveTrigger) {\n    return (\n      <span\n        ref={ tooltipElement as React.RefObject<HTMLSpanElement> }\n        className={ `tooltip passive ${ isOpen ? 'isOpen' : '' } ${ isDismissed ? 'isDismissed' : '' } ${ customCssClass || '' }` }\n      >\n        <span\n          ref={ triggerElement as React.RefObject<HTMLSpanElement> }\n          className=\"icon_only\"\n          aria-hidden=\"true\"\n        >\n          { triggerIcon }\n        </span>\n        <span\n          role=\"tooltip\"\n          ref={ contentElement as React.RefObject<HTMLSpanElement> }\n          className={ `content ${ showPointer ? 'showPointer' : '' }` }\n          id={ getTooltipContentId(triggerId) }\n        >\n          { children }\n        </span>\n      </span>\n    );\n  }\n\n  if (containsBlockElements) {\n    return (\n      <div\n        role=\"tooltip\"\n        ref={ tooltipElement as React.RefObject<HTMLDivElement> }\n        className={ `tooltip tooltip_block ${ isVisible ? 'isOpen' : '' } ${ hasHoverDelay ? 'hoverDelayed' : '' } ${ triggerStyle === 'text' ? 'textDisplay' : '' } ${ customCssClass || '' }` }\n        { ...hoverHandlers }\n      >\n        <button\n          ref={ triggerElement as React.RefObject<HTMLButtonElement> }\n          type=\"button\"\n          onClick={ handleTriggerClick }\n          className={ `button ${ triggerStyle === 'text' ? 'text_only' : 'icon_only' } ${ triggerStyle === 'text' && !visualIndicators?.underline ? 'underline_off' : '' } ${ triggerStyle === 'text' && !visualIndicators?.colouredText ? 'colouredText_off' : '' }` }\n          { ...(triggerId ? { 'id': triggerId, 'aria-describedby': `${ triggerId }_content` } : {}) }\n          { ...(triggerStyle === 'icon' ? { 'aria-label': typeof label === 'string' ? label : undefined } : {}) }\n        >\n          { triggerStyle === 'icon' && triggerIcon }\n          { triggerStyle === 'text' && <span className=\"labelText\">{ label }</span> }\n        </button>\n        <div\n          ref={ contentElement as React.RefObject<HTMLDivElement> }\n          className={ `content ${ showPointer ? 'showPointer' : '' }` }\n          { ...(triggerId ? { id: `${ triggerId }_content` } : {}) }\n        >\n          { children }\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <span\n      ref={ tooltipElement as React.RefObject<HTMLSpanElement> }\n      className={ `tooltip ${ isVisible ? 'isOpen' : '' } ${ hasHoverDelay ? 'hoverDelayed' : '' } ${ triggerStyle === 'text' ? 'textDisplay' : '' } ${ customCssClass || '' }` }\n      { ...hoverHandlers }\n    >\n      <button\n        ref={ triggerElement as React.RefObject<HTMLButtonElement> }\n        type=\"button\"\n        onClick={ handleTriggerClick }\n        className={ `button ${ triggerStyle === 'text' ? 'text_only' : 'icon_only' } ${ triggerStyle === 'text' && !visualIndicators?.underline ? 'underline_off' : '' } ${ triggerStyle === 'text' && !visualIndicators?.colouredText ? 'colouredText_off' : '' }` }\n        { ...(triggerId ? { id: triggerId } : {}) }\n        { ...(triggerStyle === 'icon' ? { 'aria-label': typeof label === 'string' ? label : undefined } : {}) }\n      >\n        { triggerStyle === 'icon' && triggerIcon }\n        { triggerStyle === 'text' && <span className=\"labelText\">{ label }</span> }\n      </button>\n      <span\n        aria-hidden\n        role=\"presentation\"\n        ref={ contentElement as React.RefObject<HTMLSpanElement> }\n        className={ `content ${ showPointer ? 'showPointer' : '' }` }\n        { ...(triggerId ? { id: `${ triggerId }_content` } : {}) }\n      >\n        { children }\n      </span>\n    </span>\n  );\n};\n\nexport default Tooltip;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,3 +1,3 @@
-export { Tooltip } from './Tooltip';
+export { Tooltip, getTooltipContentId } from './Tooltip';
 export { EllipsisTooltip } from './ellipsisTooltip/EllipsisTooltip';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/design/tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Tooltip","EllipsisTooltip"],"sources":["../../../../../src/components/design/tooltip/index.ts"],"sourcesContent":["export { Tooltip } from './Tooltip';\nexport type { TooltipProps } from './Tooltip';\n\nexport { EllipsisTooltip } from './ellipsisTooltip/EllipsisTooltip';\nexport type { EllipsisTooltipProps } from './ellipsisTooltip/EllipsisTooltip';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,WAAW;AAGnC,SAASC,eAAe,QAAQ,mCAAmC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["Tooltip","getTooltipContentId","EllipsisTooltip"],"sources":["../../../../../src/components/design/tooltip/index.ts"],"sourcesContent":["export { Tooltip, getTooltipContentId } from './Tooltip';\nexport type { TooltipProps } from './Tooltip';\n\nexport { EllipsisTooltip } from './ellipsisTooltip/EllipsisTooltip';\nexport type { EllipsisTooltipProps } from './ellipsisTooltip/EllipsisTooltip';\n"],"mappings":"AAAA,SAASA,OAAO,EAAEC,mBAAmB,QAAQ,WAAW;AAGxD,SAASC,eAAe,QAAQ,mCAAmC","ignoreList":[]}

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

@@ -6,7 +6,8 @@
   height: 1em;
   margin: var(--tooltipMargin, 0 5px);
 }
-.tooltip > button.icon_only {
+.tooltip > button.icon_only,
+.tooltip > span.icon_only {
   background: none;
   border: none;
   border-radius: 100%;
@@ -20,12 +21,15 @@
   left: 0;
   top: -2px;
 }
-.tooltip > button.icon_only:hover {
+.tooltip > button.icon_only:hover,
+.tooltip > span.icon_only:hover {
   border: none;
   background: none;
 }
 .tooltip > button.icon_only .icon,
-.tooltip > button.icon_only svg[data-icon] {
+.tooltip > button.icon_only svg[data-icon],
+.tooltip > span.icon_only .icon,
+.tooltip > span.icon_only svg[data-icon] {
   text-align: center;
   height: var(--tooltipIconSize, 22px);
   width: var(--tooltipIconSize, 22px);
@@ -34,26 +38,30 @@
   align-items: center;
   justify-content: center;
 }
-.tooltip > button.icon_only svg[data-icon] {
+.tooltip > button.icon_only svg[data-icon],
+.tooltip > span.icon_only svg[data-icon] {
   height: var(--tooltipSvgIconSize, 22px);
   width: var(--tooltipSvgIconSize, 22px);
   line-height: var(--tooltipSvgIconSize, 22px);
 }
-.tooltip > button.icon_only .icon {
+.tooltip > button.icon_only .icon,
+.tooltip > span.icon_only .icon {
   color: var(--tooltipIconFgColor, #222);
   background: var(--tooltipIconBg, #c2d0d9);
   border-radius: 100%;
   border: var(--tooltipIconBorder, none);
   line-height: normal;
 }
-.tooltip > button.icon_only .icon.icon-info:before {
+.tooltip > button.icon_only .icon.icon-info:before,
+.tooltip > span.icon_only .icon.icon-info:before {
   content: "i";
   color: var(--tooltipIconFgColor, #222);
   font-style: normal;
   font-size: calc(var(--tooltipIconSize, 22px) - 4px);
   font-weight: bold;
 }
-.tooltip > button.icon_only svg[data-icon] {
+.tooltip > button.icon_only svg[data-icon],
+.tooltip > span.icon_only svg[data-icon] {
   color: var(--tooltipIconBg, #c2d0d9);
 }
 .tooltip > button.text_only {
@@ -96,6 +104,9 @@
 .tooltip:not(.hoverDelayed):hover .content, .tooltip.isOpen .content {
   display: block;
 }
+.tooltip.isDismissed .content {
+  display: none;
+}
 .tooltip.measuring .content {
   opacity: 1;
   display: block;

package/dist/esm/components/form/buttons/SimpleButton.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo, forwardRef } from 'react';
-import { Icon } from '../../design/icons/basicIcon/Icon';
+import { renderIcon } from '../../../helpers/iconHelpers';
 import { generateButtonClass } from './button.helpers';
 export const SimpleButton = /*#__PURE__*/forwardRef(({
   buttonType = 'button',
@@ -45,9 +45,9 @@ export const SimpleButton = /*#__PURE__*/forwardRef(({
     disabled: disabled
   }, disabled && {
     'aria-describedby': disabledMessageId
-  }), leftIcon && /*#__PURE__*/React.createElement(Icon, leftIcon), /*#__PURE__*/React.createElement("span", {
+  }), renderIcon(leftIcon), /*#__PURE__*/React.createElement("span", {
     className: `${hideLabel ? 'sr-only' : 'labelText'}`
-  }, label), children, rightIcon && /*#__PURE__*/React.createElement(Icon, rightIcon)), disabled && /*#__PURE__*/React.createElement("span", {
+  }, label), children, renderIcon(rightIcon)), disabled && /*#__PURE__*/React.createElement("span", {
     id: disabledMessageId,
     className: "sr-only"
   }, disabledMessage));

package/dist/esm/components/form/buttons/SimpleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleButton.js","names":["_extends","React","useMemo","forwardRef","Icon","generateButtonClass","SimpleButton","buttonType","leftIcon","rightIcon","hideLabel","label","title","id","cssClass","disabled","disabledMessage","onClickHandler","buttonStyle","children","ref","buttonCssClass","disabledMessageId","buttonHoverTitle","createElement","Fragment","className","type","onClick","Button"],"sources":["../../../../../src/components/form/buttons/SimpleButton.tsx"],"sourcesContent":["'use client';\n\nimport React, { useMemo, forwardRef } from 'react';\nimport { ButtonProps } from './button.interface';\nimport { Icon } from '../../design/icons/basicIcon/Icon';\nimport { generateButtonClass } from './button.helpers';\n\nexport const SimpleButton = forwardRef<HTMLButtonElement, ButtonProps>((\n  {\n    buttonType = 'button',\n    leftIcon,\n    rightIcon,\n    hideLabel = false,\n    label = 'A button',\n    title,\n    id = 'buttonIdRequired',\n    cssClass = 'button primary',\n    disabled = false,\n    disabledMessage = 'This button has been disabled temporarily. There is likely an issue elsewhere on your form that needs to be resolved first.',\n    onClickHandler = () => { },\n    buttonStyle,\n    children\n  },\n  ref\n) => {\n  \n  const buttonCssClass = useMemo(() => {\n    return generateButtonClass({ cssClass, buttonStyle, hideLabel });\n  }, [cssClass, buttonStyle, hideLabel]);\n\n  const disabledMessageId = `${ id }-disabledMessage`;\n\n  const buttonHoverTitle = () => {\n    if (title) {\n      return title;\n    }\n    if (hideLabel && typeof label === 'string') {\n      return label;\n    }\n  };\n\n  return (\n    <>\n      <button\n        ref={ ref }\n        id={ id }\n        title={ buttonHoverTitle() }\n        className={ buttonCssClass }\n        type={ buttonType }\n        onClick={ onClickHandler }\n        disabled={ disabled }\n        { ...(disabled && { 'aria-describedby': disabledMessageId }) }\n      >\n        { leftIcon && <Icon { ...leftIcon } /> }\n\n        <span className={ `${ hideLabel ? 'sr-only' : 'labelText' }` }>{ label }</span>\n\n        { children }\n\n        { rightIcon && <Icon { ...rightIcon } /> }\n      </button>\n      {\n        disabled && (\n          <span id={ disabledMessageId } className=\"sr-only\">\n            {\n              disabledMessage\n            }\n          </span>\n        )\n      }\n    </>\n  );\n});\n\nexport default SimpleButton;\n\nexport { SimpleButton as Button };"],"mappings":"AAAA,YAAY;;AAAC,OAAAA,QAAA;AAEb,OAAOC,KAAK,IAAIC,OAAO,EAAEC,UAAU,QAAQ,OAAO;AAElD,SAASC,IAAI,QAAQ,mCAAmC;AACxD,SAASC,mBAAmB,QAAQ,kBAAkB;AAEtD,OAAO,MAAMC,YAAY,gBAAGH,UAAU,CAAiC,CACrE;EACEI,UAAU,GAAG,QAAQ;EACrBC,QAAQ;EACRC,SAAS;EACTC,SAAS,GAAG,KAAK;EACjBC,KAAK,GAAG,UAAU;EAClBC,KAAK;EACLC,EAAE,GAAG,kBAAkB;EACvBC,QAAQ,GAAG,gBAAgB;EAC3BC,QAAQ,GAAG,KAAK;EAChBC,eAAe,GAAG,6HAA6H;EAC/IC,cAAc,GAAGA,CAAA,KAAM,CAAE,CAAC;EAC1BC,WAAW;EACXC;AACF,CAAC,EACDC,GAAG,KACA;EAEH,MAAMC,cAAc,GAAGnB,OAAO,CAAC,MAAM;IACnC,OAAOG,mBAAmB,CAAC;MAAES,QAAQ;MAAEI,WAAW;MAAER;IAAU,CAAC,CAAC;EAClE,CAAC,EAAE,CAACI,QAAQ,EAAEI,WAAW,EAAER,SAAS,CAAC,CAAC;EAEtC,MAAMY,iBAAiB,GAAG,GAAIT,EAAE,kBAAmB;EAEnD,MAAMU,gBAAgB,GAAGA,CAAA,KAAM;IAC7B,IAAIX,KAAK,EAAE;MACT,OAAOA,KAAK;IACd;IACA,IAAIF,SAAS,IAAI,OAAOC,KAAK,KAAK,QAAQ,EAAE;MAC1C,OAAOA,KAAK;IACd;EACF,CAAC;EAED,oBACEV,KAAA,CAAAuB,aAAA,CAAAvB,KAAA,CAAAwB,QAAA,qBACExB,KAAA,CAAAuB,aAAA,WAAAxB,QAAA;IACEoB,GAAG,EAAGA,GAAK;IACXP,EAAE,EAAGA,EAAI;IACTD,KAAK,EAAGW,gBAAgB,CAAC,CAAG;IAC5BG,SAAS,EAAGL,cAAgB;IAC5BM,IAAI,EAAGpB,UAAY;IACnBqB,OAAO,EAAGX,cAAgB;IAC1BF,QAAQ,EAAGA;EAAU,GACfA,QAAQ,IAAI;IAAE,kBAAkB,EAAEO;EAAkB,CAAC,GAEzDd,QAAQ,iBAAIP,KAAA,CAAAuB,aAAA,CAACpB,IAAI,EAAMI,QAAY,CAAC,eAEtCP,KAAA,CAAAuB,aAAA;IAAME,SAAS,EAAG,GAAIhB,SAAS,GAAG,SAAS,GAAG,WAAW;EAAK,GAAGC,KAAa,CAAC,EAE7EQ,QAAQ,EAERV,SAAS,iBAAIR,KAAA,CAAAuB,aAAA,CAACpB,IAAI,EAAMK,SAAa,CACjC,CAAC,EAEPM,QAAQ,iBACNd,KAAA,CAAAuB,aAAA;IAAMX,EAAE,EAAGS,iBAAmB;IAACI,SAAS,EAAC;EAAS,GAE9CV,eAEE,CAGV,CAAC;AAEP,CAAC,CAAC;AAEF,eAAeV,YAAY;AAE3B,SAASA,YAAY,IAAIuB,MAAM","ignoreList":[]}
+{"version":3,"file":"SimpleButton.js","names":["_extends","React","useMemo","forwardRef","renderIcon","generateButtonClass","SimpleButton","buttonType","leftIcon","rightIcon","hideLabel","label","title","id","cssClass","disabled","disabledMessage","onClickHandler","buttonStyle","children","ref","buttonCssClass","disabledMessageId","buttonHoverTitle","createElement","Fragment","className","type","onClick","Button"],"sources":["../../../../../src/components/form/buttons/SimpleButton.tsx"],"sourcesContent":["'use client';\n\nimport React, { useMemo, forwardRef } from 'react';\nimport { ButtonProps } from './button.interface';\nimport { renderIcon } from '../../../helpers/iconHelpers';\nimport { generateButtonClass } from './button.helpers';\n\nexport const SimpleButton = forwardRef<HTMLButtonElement, ButtonProps>((\n  {\n    buttonType = 'button',\n    leftIcon,\n    rightIcon,\n    hideLabel = false,\n    label = 'A button',\n    title,\n    id = 'buttonIdRequired',\n    cssClass = 'button primary',\n    disabled = false,\n    disabledMessage = 'This button has been disabled temporarily. There is likely an issue elsewhere on your form that needs to be resolved first.',\n    onClickHandler = () => { },\n    buttonStyle,\n    children\n  },\n  ref\n) => {\n  \n  const buttonCssClass = useMemo(() => {\n    return generateButtonClass({ cssClass, buttonStyle, hideLabel });\n  }, [cssClass, buttonStyle, hideLabel]);\n\n  const disabledMessageId = `${ id }-disabledMessage`;\n\n  const buttonHoverTitle = () => {\n    if (title) {\n      return title;\n    }\n    if (hideLabel && typeof label === 'string') {\n      return label;\n    }\n  };\n\n  return (\n    <>\n      <button\n        ref={ ref }\n        id={ id }\n        title={ buttonHoverTitle() }\n        className={ buttonCssClass }\n        type={ buttonType }\n        onClick={ onClickHandler }\n        disabled={ disabled }\n        { ...(disabled && { 'aria-describedby': disabledMessageId }) }\n      >\n        { renderIcon(leftIcon) }\n\n        <span className={ `${ hideLabel ? 'sr-only' : 'labelText' }` }>{ label }</span>\n\n        { children }\n\n        { renderIcon(rightIcon) }\n      </button>\n      {\n        disabled && (\n          <span id={ disabledMessageId } className=\"sr-only\">\n            {\n              disabledMessage\n            }\n          </span>\n        )\n      }\n    </>\n  );\n});\n\nexport default SimpleButton;\n\nexport { SimpleButton as Button };"],"mappings":"AAAA,YAAY;;AAAC,OAAAA,QAAA;AAEb,OAAOC,KAAK,IAAIC,OAAO,EAAEC,UAAU,QAAQ,OAAO;AAElD,SAASC,UAAU,QAAQ,8BAA8B;AACzD,SAASC,mBAAmB,QAAQ,kBAAkB;AAEtD,OAAO,MAAMC,YAAY,gBAAGH,UAAU,CAAiC,CACrE;EACEI,UAAU,GAAG,QAAQ;EACrBC,QAAQ;EACRC,SAAS;EACTC,SAAS,GAAG,KAAK;EACjBC,KAAK,GAAG,UAAU;EAClBC,KAAK;EACLC,EAAE,GAAG,kBAAkB;EACvBC,QAAQ,GAAG,gBAAgB;EAC3BC,QAAQ,GAAG,KAAK;EAChBC,eAAe,GAAG,6HAA6H;EAC/IC,cAAc,GAAGA,CAAA,KAAM,CAAE,CAAC;EAC1BC,WAAW;EACXC;AACF,CAAC,EACDC,GAAG,KACA;EAEH,MAAMC,cAAc,GAAGnB,OAAO,CAAC,MAAM;IACnC,OAAOG,mBAAmB,CAAC;MAAES,QAAQ;MAAEI,WAAW;MAAER;IAAU,CAAC,CAAC;EAClE,CAAC,EAAE,CAACI,QAAQ,EAAEI,WAAW,EAAER,SAAS,CAAC,CAAC;EAEtC,MAAMY,iBAAiB,GAAG,GAAIT,EAAE,kBAAmB;EAEnD,MAAMU,gBAAgB,GAAGA,CAAA,KAAM;IAC7B,IAAIX,KAAK,EAAE;MACT,OAAOA,KAAK;IACd;IACA,IAAIF,SAAS,IAAI,OAAOC,KAAK,KAAK,QAAQ,EAAE;MAC1C,OAAOA,KAAK;IACd;EACF,CAAC;EAED,oBACEV,KAAA,CAAAuB,aAAA,CAAAvB,KAAA,CAAAwB,QAAA,qBACExB,KAAA,CAAAuB,aAAA,WAAAxB,QAAA;IACEoB,GAAG,EAAGA,GAAK;IACXP,EAAE,EAAGA,EAAI;IACTD,KAAK,EAAGW,gBAAgB,CAAC,CAAG;IAC5BG,SAAS,EAAGL,cAAgB;IAC5BM,IAAI,EAAGpB,UAAY;IACnBqB,OAAO,EAAGX,cAAgB;IAC1BF,QAAQ,EAAGA;EAAU,GACfA,QAAQ,IAAI;IAAE,kBAAkB,EAAEO;EAAkB,CAAC,GAEzDlB,UAAU,CAACI,QAAQ,CAAC,eAEtBP,KAAA,CAAAuB,aAAA;IAAME,SAAS,EAAG,GAAIhB,SAAS,GAAG,SAAS,GAAG,WAAW;EAAK,GAAGC,KAAa,CAAC,EAE7EQ,QAAQ,EAERf,UAAU,CAACK,SAAS,CAChB,CAAC,EAEPM,QAAQ,iBACNd,KAAA,CAAAuB,aAAA;IAAMX,EAAE,EAAGS,iBAAmB;IAACI,SAAS,EAAC;EAAS,GAE9CV,eAEE,CAGV,CAAC;AAEP,CAAC,CAAC;AAEF,eAAeV,YAAY;AAE3B,SAASA,YAAY,IAAIuB,MAAM","ignoreList":[]}

package/dist/esm/components/form/buttons/button.interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.interface.js","names":[],"sources":["../../../../../src/components/form/buttons/button.interface.ts"],"sourcesContent":["import { ReactElement, ReactNode, RefObject } from 'react';\nimport { IconProps } from '../../design/icons/basicIcon/Icon';\nimport { GenericFunction } from '../../../interfaces/generic.interface';\nimport { ButtonClassCombination } from './buttonVariations';\n\nexport interface ButtonStyles {\n  color?: 'primary' | 'secondary' | 'tertiary';\n  variant?: 'solid' | 'outline' | 'text-only' | 'icon-only';\n  size?: 'default' | 'compact';\n}\n\nexport interface ButtonProps {\n  label: string | ReactNode;\n  id: string;\n  title?: string;\n  cssClass?: string | ButtonClassCombination;\n  onClickHandler?: GenericFunction;\n  buttonType?: 'button' | 'submit' | 'reset';\n  buttonStyle?: ButtonStyles;\n  leftIcon?: IconProps;\n  rightIcon?: IconProps;\n  hideLabel?: boolean;\n  children?: ReactNode | ReactElement;\n  disabled?: boolean;\n  disabledMessage?: string;\n  ref?: RefObject<HTMLButtonElement>;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"button.interface.js","names":[],"sources":["../../../../../src/components/form/buttons/button.interface.ts"],"sourcesContent":["import { ReactElement, ReactNode, RefObject } from 'react';\nimport { IconSource } from '../../../helpers/iconHelpers';\nimport { GenericFunction } from '../../../interfaces/generic.interface';\nimport { ButtonClassCombination } from './buttonVariations';\n\nexport interface ButtonStyles {\n  color?: 'primary' | 'secondary' | 'tertiary';\n  variant?: 'solid' | 'outline' | 'text-only' | 'icon-only';\n  size?: 'default' | 'compact';\n}\n\nexport interface ButtonProps {\n  label: string | ReactNode;\n  id: string;\n  title?: string;\n  cssClass?: string | ButtonClassCombination;\n  onClickHandler?: GenericFunction;\n  buttonType?: 'button' | 'submit' | 'reset';\n  buttonStyle?: ButtonStyles;\n  leftIcon?: IconSource;\n  rightIcon?: IconSource;\n  hideLabel?: boolean;\n  children?: ReactNode | ReactElement;\n  disabled?: boolean;\n  disabledMessage?: string;\n  ref?: RefObject<HTMLButtonElement>;\n}\n"],"mappings":"","ignoreList":[]}

package/dist/esm/components/form/formFields/formFieldWrapper/formFieldProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"formFieldProps.js","names":[],"sources":["../../../../../../src/components/form/formFields/formFieldWrapper/formFieldProps.ts"],"sourcesContent":["/* eslint-disable no-unused-vars */\n\nimport {\n  ChangeEvent,\n  ChangeEventHandler,\n  FormEventHandler,\n  KeyboardEvent,\n  ReactElement,\n  ReactEventHandler,\n  ReactNode,\n} from 'react';\n\nimport type {\n  InputHTMLAttributes,\n  SelectHTMLAttributes,\n  TextareaHTMLAttributes,\n} from 'react';\n\nimport {\n  FieldValues,\n  Message,\n  UseFormReturn,\n  Validate,\n  ValidationRule\n} from 'react-hook-form';\nimport { GenericFunction } from '../../../../interfaces';\nimport { KeyboardEventHandler } from '../../../../interfaces/generic.interface';\n\n/**\n * Custom content props for additional elements around the label or field.\n */\nexport interface CustomContentProps {\n  /** Element or text to display before the label. */\n  preLabel?: ReactElement | string;\n  /** Element or text to display after the label. */\n  postLabel?: ReactElement | string;\n  /** Element or text to display before the field. */\n  preField?: ReactElement | string;\n  /** Element or text to display after the field. */\n  postField?: ReactElement | string;\n}\n\n/**\n * Props for the label element.\n */\nexport interface LabelProps {\n  /** Text or element for the label. */\n  text: string | ReactNode | ReactElement;\n  /** The ID of the input the label is associated with. */\n  inputId?: string;\n  /** The ID of the label element. */\n  labelId?: string;\n  /** Whether to hide the label visually. */\n  hide?: boolean;\n  /** Position of the label relative to the field. */\n  position?: 'inset' | 'left' | 'right' | string;\n  /** Tooltip for the label. */\n  labelTooltip?: {\n    /** Text for the tooltip. */\n    text: string;\n    /** Optional icon for the tooltip. */\n    icon?: ReactElement | string;\n  };\n  /** Screen reader instructions for the label. */\n  srInstruction?: string;\n  /** Whether the field is required. */\n  isRequired?: boolean;\n  /** Custom content for the label. */\n  customContent?: CustomContentProps;\n}\n\n/**\n * Type for a single select option.\n */\nexport type SelectOptionObjectType = {\n  /** Label of the option. */\n  label: string;\n  /** Value of the option. */\n  value: string | number | boolean;\n};\n\n/**\n * Type for select options, which can be an object or string.\n */\nexport type SelectOptionType = SelectOptionObjectType | string;\n\n/**\n * Type for a single combobox (autocomplete) option.\n */\nexport type ComboboxOptionObjectType = {\n  /** Label of the option. */\n  label: string;\n  /** Value of the option. */\n  value: string | number | boolean;\n  /** Additional data associated with the option. */\n  data?: Record<string, unknown>;\n};\n\nexport type ComboboxOption = ComboboxOptionObjectType | string;\n\n// Everything we want to *override* with our own definitions in FieldProps\nexport type OverriddenKeys =\n  | 'type'\n  | 'id'\n  | 'name'\n  | 'placeholder'\n  | 'defaultValue'\n  | 'onChange'\n  | 'onBlur'\n  | 'onInput'\n  | 'onKeyDown'\n  | 'disabled'\n  | 'readOnly'\n  | 'min'\n  | 'max';\n\n// All the native props we want to mix in, minus the ones we override\nexport type NativeFieldProps =\n  & Omit<InputHTMLAttributes<HTMLInputElement>, OverriddenKeys>\n  & Omit<SelectHTMLAttributes<HTMLSelectElement>, OverriddenKeys>\n  & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, OverriddenKeys>;\n\n/**\n * Props for the field element.\n */\nexport interface FieldProps extends NativeFieldProps {\n  /** The type of the input field. */\n  type: string;\n  /** The ID of the input field. */\n  id: string;\n  /** The name of the input field. */\n  name: string;\n  /** Placeholder text for the input field. */\n  placeholder?: string;\n  /** Default value for the input field. */\n  defaultValue?: string | number | readonly string[];\n  /** Handler for the change event. */\n  onChange?: ChangeEventHandler | ((\n    event: ChangeEvent<HTMLInputElement> | KeyboardEvent<HTMLSelectElement> | KeyboardEvent<HTMLTextAreaElement>\n  ) => void | GenericFunction);\n  /** Handler for the blur event. */\n  onBlur?: GenericFunction;\n  /** Handler for the input event. */\n  onInput?: FormEventHandler<\n    HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\n  >;\n  /** Handler for the keydown event. */\n  onKeyDown?: KeyboardEventHandler | ((\n    event: KeyboardEvent<HTMLInputElement> | KeyboardEvent<HTMLSelectElement> | KeyboardEvent<HTMLTextAreaElement>\n  ) => void | GenericFunction);\n  /** Handler for marking the field as touched. */\n  onTouched?: GenericFunction;\n  /** Whether to include an empty option in a dropdown. */\n  includeEmptyOption?: boolean;\n  /** Label for the empty option. */\n  emptyOptionLabel?: string;\n  /** Options for a dropdown field. */\n  options?: SelectOptionType[] | ComboboxOption[];\n  /** Auto-complete behaviour for the field. */\n  autoComplete?: string;\n  /** Whether the field allows editing and interaction. Note: Setting this to true makes it invisible to screen reader users. */\n  disabled?: boolean;\n  /** Setting to true prevents editing and interaction whilst still making the value visible to screen reader users.  */\n  readonly?: boolean;\n  /** Minimum value or length. */\n  min?: string | number;\n  /** Maximum value or length. */\n  max?: string | number;\n  /**\n   * Whether to enforce grapheme-aware max-length handling (used by textarea).\n   * Uses `field.maxLength` (native field prop) as the source for the UI/input limit.\n   * Keep `field.maxLength` and `validation.maxLength` aligned to avoid mixed UX/validation behaviour.\n   */\n  enforceMaxLength?: boolean;\n}\n\n/**\n * Validation rules for fields.\n */\nexport type CustomValidate<TFieldValue> = (\n  value: TFieldValue,\n  formValues?: unknown\n) => boolean | string | Promise<boolean | string>;\n\n/**\n * Props for validation rules.\n */\n\nexport type MinMaxRule<T> = T extends boolean\n  ? ValidationRule<boolean>\n  : ValidationRule<number | string>;\n\nexport interface ValidationProps<\n  TFieldValue = unknown | string | boolean,\n  TFormValues = unknown\n> {\n  /** Whether the field is required. */\n  required?: Message | ValidationRule<boolean>;\n  /** Minimum value or length. */\n  min?: MinMaxRule<TFieldValue>;\n  /** Maximum value or length. */\n  max?: MinMaxRule<TFieldValue>;\n  /**\n   * Maximum length validation rule.\n   * Used for validation outcome/messages, while textarea UI/input limiting is driven by `field.maxLength`.\n   * If both are provided, keep them equal.\n   */\n  maxLength?: ValidationRule<number>;\n  /** Minimum length of the field. */\n  minLength?: ValidationRule<number>;\n  /** Regex pattern for validation. */\n  pattern?: ValidationRule<RegExp>;\n  /** Custom validation logic. */\n  validate?: CustomValidate<TFieldValue> | Record<string, CustomValidate<TFieldValue>> | Validate<TFieldValue, TFormValues>;\n}\n\nexport type ValidationKey = keyof ValidationProps<unknown, unknown>; // Restrict to known keys\n\n/**\n * Custom CSS classes for the field components.\n */\nexport interface CustomFieldCssClassesProps {\n  /** CSS class for the label. */\n  label?: string;\n  /** CSS class for the input field. */\n  input?: string;\n  /** CSS class for the wrapper. */\n  wrapper?: string;\n}\n\n/**\n * Props for a form field component.\n */\nexport interface FormFieldProps {\n  /** Props for the label. */\n  label: LabelProps;\n  /** Props for the field. */\n  field: FieldProps;\n  /** Layout style of the form field. */\n  layout?: 'stacked' | 'horizontal' | string;\n  /** Validation rules for the field. */\n  validation?: ValidationProps;\n  /** Whether to show a spinner. */\n  showSpinner?: boolean;\n  /** Custom CSS classes for the field. */\n  customCssClasses?: CustomFieldCssClassesProps;\n  /** Custom content for the field. */\n  customContent?: CustomContentProps;\n  /** Override the default nesting of the input inside the label. */\n  separateLabelAndField?: boolean;\n  /** An existing form context to use when React context cannot reach this field, e.g. across a Next.js client boundary. */\n  formContext?: UseFormReturn<FieldValues, any, FieldValues>;\n}\n\nexport type TextareaFieldProps = Omit<FieldProps, 'onSelect'> & {\n  onSelect?: ReactEventHandler<HTMLTextAreaElement>;\n};\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"formFieldProps.js","names":[],"sources":["../../../../../../src/components/form/formFields/formFieldWrapper/formFieldProps.ts"],"sourcesContent":["/* eslint-disable no-unused-vars */\n\nimport {\n  ChangeEvent,\n  ChangeEventHandler,\n  FormEventHandler,\n  KeyboardEvent,\n  ReactElement,\n  ReactEventHandler,\n  ReactNode,\n} from 'react';\n\nimport type {\n  InputHTMLAttributes,\n  SelectHTMLAttributes,\n  TextareaHTMLAttributes,\n} from 'react';\n\nimport {\n  FieldValues,\n  Message,\n  UseFormReturn,\n  Validate,\n  ValidationRule\n} from 'react-hook-form';\nimport { GenericFunction } from '../../../../interfaces';\nimport { KeyboardEventHandler } from '../../../../interfaces/generic.interface';\nimport { IconSource } from '../../../../helpers/iconHelpers';\n\n/**\n * Custom content props for additional elements around the label or field.\n */\nexport interface CustomContentProps {\n  /** Element or text to display before the label. */\n  preLabel?: ReactElement | string;\n  /** Element or text to display after the label. */\n  postLabel?: ReactElement | string;\n  /** Element or text to display before the field. */\n  preField?: ReactElement | string;\n  /** Element or text to display after the field. */\n  postField?: ReactElement | string;\n}\n\n/**\n * Props for the label element.\n */\nexport interface LabelProps {\n  /** Text or element for the label. */\n  text: string | ReactNode | ReactElement;\n  /** The ID of the input the label is associated with. */\n  inputId?: string;\n  /** The ID of the label element. */\n  labelId?: string;\n  /** Whether to hide the label visually. */\n  hide?: boolean;\n  /** Position of the label relative to the field. */\n  position?: 'inset' | 'left' | 'right' | string;\n  /** Tooltip for the label. */\n  labelTooltip?: {\n    /** Text for the tooltip. */\n    text: string;\n    /** Optional icon for the tooltip. */\n    icon?: IconSource;\n  };\n  /** Screen reader instructions for the label. */\n  srInstruction?: string;\n  /** Whether the field is required. */\n  isRequired?: boolean;\n  /** Custom content for the label. */\n  customContent?: CustomContentProps;\n}\n\n/**\n * Type for a single select option.\n */\nexport type SelectOptionObjectType = {\n  /** Label of the option. */\n  label: string;\n  /** Value of the option. */\n  value: string | number | boolean;\n};\n\n/**\n * Type for select options, which can be an object or string.\n */\nexport type SelectOptionType = SelectOptionObjectType | string;\n\n/**\n * Type for a single combobox (autocomplete) option.\n */\nexport type ComboboxOptionObjectType = {\n  /** Label of the option. */\n  label: string;\n  /** Value of the option. */\n  value: string | number | boolean;\n  /** Additional data associated with the option. */\n  data?: Record<string, unknown>;\n};\n\nexport type ComboboxOption = ComboboxOptionObjectType | string;\n\n// Everything we want to *override* with our own definitions in FieldProps\nexport type OverriddenKeys =\n  | 'type'\n  | 'id'\n  | 'name'\n  | 'placeholder'\n  | 'defaultValue'\n  | 'onChange'\n  | 'onBlur'\n  | 'onInput'\n  | 'onKeyDown'\n  | 'disabled'\n  | 'readOnly'\n  | 'min'\n  | 'max';\n\n// All the native props we want to mix in, minus the ones we override\nexport type NativeFieldProps =\n  & Omit<InputHTMLAttributes<HTMLInputElement>, OverriddenKeys>\n  & Omit<SelectHTMLAttributes<HTMLSelectElement>, OverriddenKeys>\n  & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, OverriddenKeys>;\n\n/**\n * Props for the field element.\n */\nexport interface FieldProps extends NativeFieldProps {\n  /** The type of the input field. */\n  type: string;\n  /** The ID of the input field. */\n  id: string;\n  /** The name of the input field. */\n  name: string;\n  /** Placeholder text for the input field. */\n  placeholder?: string;\n  /** Default value for the input field. */\n  defaultValue?: string | number | readonly string[];\n  /** Handler for the change event. */\n  onChange?: ChangeEventHandler | ((\n    event: ChangeEvent<HTMLInputElement> | KeyboardEvent<HTMLSelectElement> | KeyboardEvent<HTMLTextAreaElement>\n  ) => void | GenericFunction);\n  /** Handler for the blur event. */\n  onBlur?: GenericFunction;\n  /** Handler for the input event. */\n  onInput?: FormEventHandler<\n    HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\n  >;\n  /** Handler for the keydown event. */\n  onKeyDown?: KeyboardEventHandler | ((\n    event: KeyboardEvent<HTMLInputElement> | KeyboardEvent<HTMLSelectElement> | KeyboardEvent<HTMLTextAreaElement>\n  ) => void | GenericFunction);\n  /** Handler for marking the field as touched. */\n  onTouched?: GenericFunction;\n  /** Whether to include an empty option in a dropdown. */\n  includeEmptyOption?: boolean;\n  /** Label for the empty option. */\n  emptyOptionLabel?: string;\n  /** Options for a dropdown field. */\n  options?: SelectOptionType[] | ComboboxOption[];\n  /** Auto-complete behaviour for the field. */\n  autoComplete?: string;\n  /** Whether the field allows editing and interaction. Note: Setting this to true makes it invisible to screen reader users. */\n  disabled?: boolean;\n  /** Setting to true prevents editing and interaction whilst still making the value visible to screen reader users.  */\n  readonly?: boolean;\n  /** Minimum value or length. */\n  min?: string | number;\n  /** Maximum value or length. */\n  max?: string | number;\n  /**\n   * Whether to enforce grapheme-aware max-length handling (used by textarea).\n   * Uses `field.maxLength` (native field prop) as the source for the UI/input limit.\n   * Keep `field.maxLength` and `validation.maxLength` aligned to avoid mixed UX/validation behaviour.\n   */\n  enforceMaxLength?: boolean;\n}\n\n/**\n * Validation rules for fields.\n */\nexport type CustomValidate<TFieldValue> = (\n  value: TFieldValue,\n  formValues?: unknown\n) => boolean | string | Promise<boolean | string>;\n\n/**\n * Props for validation rules.\n */\n\nexport type MinMaxRule<T> = T extends boolean\n  ? ValidationRule<boolean>\n  : ValidationRule<number | string>;\n\nexport interface ValidationProps<\n  TFieldValue = unknown | string | boolean,\n  TFormValues = unknown\n> {\n  /** Whether the field is required. */\n  required?: Message | ValidationRule<boolean>;\n  /** Minimum value or length. */\n  min?: MinMaxRule<TFieldValue>;\n  /** Maximum value or length. */\n  max?: MinMaxRule<TFieldValue>;\n  /**\n   * Maximum length validation rule.\n   * Used for validation outcome/messages, while textarea UI/input limiting is driven by `field.maxLength`.\n   * If both are provided, keep them equal.\n   */\n  maxLength?: ValidationRule<number>;\n  /** Minimum length of the field. */\n  minLength?: ValidationRule<number>;\n  /** Regex pattern for validation. */\n  pattern?: ValidationRule<RegExp>;\n  /** Custom validation logic. */\n  validate?: CustomValidate<TFieldValue> | Record<string, CustomValidate<TFieldValue>> | Validate<TFieldValue, TFormValues>;\n}\n\nexport type ValidationKey = keyof ValidationProps<unknown, unknown>; // Restrict to known keys\n\n/**\n * Custom CSS classes for the field components.\n */\nexport interface CustomFieldCssClassesProps {\n  /** CSS class for the label. */\n  label?: string;\n  /** CSS class for the input field. */\n  input?: string;\n  /** CSS class for the wrapper. */\n  wrapper?: string;\n}\n\n/**\n * Props for a form field component.\n */\nexport interface FormFieldProps {\n  /** Props for the label. */\n  label: LabelProps;\n  /** Props for the field. */\n  field: FieldProps;\n  /** Layout style of the form field. */\n  layout?: 'stacked' | 'horizontal' | string;\n  /** Validation rules for the field. */\n  validation?: ValidationProps;\n  /** Whether to show a spinner. */\n  showSpinner?: boolean;\n  /** Custom CSS classes for the field. */\n  customCssClasses?: CustomFieldCssClassesProps;\n  /** Custom content for the field. */\n  customContent?: CustomContentProps;\n  /** Override the default nesting of the input inside the label. */\n  separateLabelAndField?: boolean;\n  /** An existing form context to use when React context cannot reach this field, e.g. across a Next.js client boundary. */\n  formContext?: UseFormReturn<FieldValues, any, FieldValues>;\n}\n\nexport type TextareaFieldProps = Omit<FieldProps, 'onSelect'> & {\n  onSelect?: ReactEventHandler<HTMLTextAreaElement>;\n};\n"],"mappings":"","ignoreList":[]}