@pega/cosmos-react-core 3.0.0-dev.9.1 → 3.0.0-rc.3

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -1,19 +1,26 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, Fragment, useEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
+import { rgba } from 'polished';
 import { useElement, useConsolidatedRef, useDirection } from '../../hooks';
 import { defaultThemeProp } from '../../theme';
-import { debounce } from '../../utils';
-import Button from '../Button';
+import { debounce, tryCatch } from '../../utils';
+import Button, { StyledButton } from '../Button';
 import Flex from '../Flex';
-import Link from '../Link';
+import Link, { StyledLink } from '../Link';
 import Icon, { StyledIcon, registerIcon } from '../Icon';
 import * as caretLeftIcon from '../Icon/icons/caret-left.icon';
 import * as caretRightIcon from '../Icon/icons/caret-right.icon';
 import MenuButton from '../MenuButton';
-import Text from '../Text';
+import Text, { StyledText } from '../Text';
 registerIcon(caretLeftIcon, caretRightIcon);
-export const StyledBreadcrumbs = styled.div(({ oneItemRemaining }) => css `
+const StyledSeparator = styled(Icon)(({ theme }) => {
+    const color = tryCatch(() => rgba(theme.base.palette['foreground-color'], theme.base.transparency['transparent-2']));
+    return css `
+    color: ${color};
+  `;
+});
+export const StyledBreadcrumbs = styled.div(({ theme, oneItemRemaining }) => css `
     white-space: nowrap;
     overflow: visible;
     visibility: hidden;
@@ -24,6 +31,12 @@ export const StyledBreadcrumbs = styled.div(({ oneItemRemaining }) => css `
       flex-shrink: 0;
     }
 
+    ${StyledLink},
+    ${StyledButton},
+    ${StyledText} {
+      max-width: ${theme.base['content-width'].md};
+    }
+
     ${oneItemRemaining &&
     css `
       & > :last-child {
@@ -33,6 +46,20 @@ export const StyledBreadcrumbs = styled.div(({ oneItemRemaining }) => css `
     `}
   `);
 StyledBreadcrumbs.defaultProps = defaultThemeProp;
+const getEllipsisStyles = ({ theme }) => {
+    return css `
+    min-width: ${theme.base['content-width'].xs};
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  `;
+};
+const StyledEllipsizedLink = styled(Link)(getEllipsisStyles);
+StyledEllipsizedLink.defaultProps = defaultThemeProp;
+const StyledEllipsizedButton = styled(Button)(getEllipsisStyles);
+StyledEllipsizedButton.defaultProps = defaultThemeProp;
+const StyledEllipsizedText = styled(Text)(getEllipsisStyles);
+StyledEllipsizedText.defaultProps = defaultThemeProp;
 const Breadcrumbs = forwardRef(({ path, ...restProps }, ref) => {
     const [breadcrumbsEl, setBreadcrumbsEl] = useElement();
     const [numMenuItems, setNumMenuItems] = useState(0);
@@ -72,18 +99,22 @@ const Breadcrumbs = forwardRef(({ path, ...restProps }, ref) => {
         }
     }, [breadcrumbsEl, numMenuItems]);
     const { end } = useDirection();
-    return (_jsxs(Flex, { ...restProps, container: { gap: 1, alignItems: 'center' }, as: StyledBreadcrumbs, oneItemRemaining: numMenuItems === path.length - 1, ref: breadcrumbRef, children: [numMenuItems > 0 && (_jsxs(_Fragment, { children: [_jsx(MenuButton, { text: 'Links', iconOnly: true, variant: 'link', icon: 'folder-hierarchy-solid', menu: { items: path.slice(0, numMenuItems).reverse() } }), _jsx(Icon, { name: `caret-${end}` })] })), path.slice(numMenuItems).map((crumb, index) => {
-                const { id, primary, visual, ...restCrumbProps } = crumb;
+    return (_jsxs(Flex, { ...restProps, container: { gap: 0.5, alignItems: 'center' }, as: StyledBreadcrumbs, oneItemRemaining: numMenuItems === path.length - 1, ref: breadcrumbRef, children: [numMenuItems > 0 && (_jsxs(_Fragment, { children: [_jsx(MenuButton, { text: 'Links', iconOnly: true, variant: 'link', icon: 'folder-hierarchy-solid', menu: { items: path.slice(0, numMenuItems).reverse() } }), _jsx(StyledSeparator, { name: `caret-${end}` })] })), path.slice(numMenuItems).map((crumb, index) => {
+                const { id, primary, visual, href, onClick, ...restCrumbProps } = crumb;
                 let Comp;
-                if (crumb.href)
-                    Comp = (_jsxs(Link, { href: crumb.href, ...restCrumbProps, children: [visual, " ", primary] }, id));
-                else if (crumb.onClick)
-                    Comp = (_jsxs(Button, { variant: 'link', ...restCrumbProps, children: [visual, " ", primary] }, id));
+                if (href)
+                    Comp = (_jsxs(Link, { href: href, as: primary.length > 60 ? StyledEllipsizedLink : undefined, onClick: (e) => {
+                            onClick?.(id, e);
+                        }, ...restCrumbProps, children: [visual, " ", primary] }, id));
+                else if (onClick)
+                    Comp = (_jsxs(Button, { variant: 'link', as: primary.length > 60 ? StyledEllipsizedButton : undefined, onClick: (e) => {
+                            onClick(id, e);
+                        }, ...restCrumbProps, children: [visual, " ", primary] }, id));
                 else
-                    Comp = (_jsxs(Text, { ...restCrumbProps, children: [visual, " ", primary] }, id));
+                    Comp = (_jsxs(Text, { as: primary.length > 60 ? StyledEllipsizedText : undefined, ...restCrumbProps, children: [visual, " ", primary] }, id));
                 if (index === path.slice(numMenuItems).length - 1)
                     return Comp;
-                return (_jsxs(Fragment, { children: [Comp, _jsx(Icon, { name: `caret-${end}` })] }, id));
+                return (_jsxs(Fragment, { children: [Comp, _jsx(StyledSeparator, { name: `caret-${end}` })] }, id));
             })] }));
 });
 export default Breadcrumbs;

package/lib/components/Breadcrumbs/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  Fragment,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useElement, useConsolidatedRef, useDirection } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { debounce } from '../../utils';\nimport Button from '../Button';\nimport Flex from '../Flex';\nimport Link from '../Link';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport MenuButton from '../MenuButton';\nimport Text from '../Text';\nimport { MenuItemProps } from '../Menu';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nexport interface BreadcrumbsProps extends BaseProps, NoChildrenProp {\n  /** A set of actions representing the chronological hierarchy of pages or locations leading to the current view. */\n  path: MenuItemProps[];\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledBreadcrumbs = styled.div<{ oneItemRemaining: boolean }>(\n  ({ oneItemRemaining }) => css`\n    white-space: nowrap;\n    overflow: visible;\n    visibility: hidden;\n\n    ${StyledIcon} {\n      width: 1em;\n      height: 1em;\n      flex-shrink: 0;\n    }\n\n    ${oneItemRemaining &&\n    css`\n      & > :last-child {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n    `}\n  `\n);\n\nStyledBreadcrumbs.defaultProps = defaultThemeProp;\n\nconst Breadcrumbs: FunctionComponent<BreadcrumbsProps & ForwardProps> = forwardRef(\n  ({ path, ...restProps }: PropsWithoutRef<BreadcrumbsProps>, ref: BreadcrumbsProps['ref']) => {\n    const [breadcrumbsEl, setBreadcrumbsEl] = useElement<HTMLDivElement>();\n    const [numMenuItems, setNumMenuItems] = useState(0);\n    const minInlineWidth = useRef(0);\n\n    const breadcrumbRef = useConsolidatedRef(setBreadcrumbsEl, ref);\n\n    const debouncedResize = debounce((entries: ResizeObserverEntry[]) => {\n      if (entries[0].contentRect.width > minInlineWidth.current) {\n        setNumMenuItems(curr => {\n          if (curr === 0) return curr;\n          return curr - 1;\n        });\n      }\n    }, 100);\n\n    const resizeObserver = new ResizeObserver(debouncedResize);\n\n    const intersectionObserver = new IntersectionObserver(\n      entries => {\n        if (entries[0].intersectionRatio < 1 && numMenuItems < path.length - 1) {\n          if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n          setNumMenuItems(curr => {\n            if (curr === path.length - 1) return curr;\n            return curr + 1;\n          });\n        } else if (breadcrumbsEl) breadcrumbsEl.style.visibility = 'visible';\n      },\n      { root: breadcrumbsEl, threshold: 1 }\n    );\n\n    useEffect(() => {\n      if (breadcrumbsEl && breadcrumbsEl.lastChild) {\n        intersectionObserver.observe(breadcrumbsEl.lastChild as Element);\n        resizeObserver.observe(breadcrumbsEl);\n\n        return () => {\n          intersectionObserver.disconnect();\n          resizeObserver.disconnect();\n        };\n      }\n    }, [breadcrumbsEl, numMenuItems]);\n\n    const { end } = useDirection();\n\n    return (\n      <Flex\n        {...restProps}\n        container={{ gap: 1, alignItems: 'center' }}\n        as={StyledBreadcrumbs}\n        oneItemRemaining={numMenuItems === path.length - 1}\n        ref={breadcrumbRef}\n      >\n        {numMenuItems > 0 && (\n          <>\n            <MenuButton\n              text='Links'\n              iconOnly\n              variant='link'\n              icon='folder-hierarchy-solid'\n              menu={{ items: path.slice(0, numMenuItems).reverse() }}\n            />\n            <Icon name={`caret-${end}`} />\n          </>\n        )}\n        {path.slice(numMenuItems).map((crumb, index) => {\n          const { id, primary, visual, ...restCrumbProps } = crumb;\n          let Comp;\n          if (crumb.href)\n            Comp = (\n              <Link key={id} href={crumb.href} {...restCrumbProps}>\n                {visual} {primary}\n              </Link>\n            );\n          else if (crumb.onClick)\n            Comp = (\n              <Button key={id} variant='link' {...restCrumbProps}>\n                {visual} {primary}\n              </Button>\n            );\n          else\n            Comp = (\n              <Text key={id} {...restCrumbProps}>\n                {visual} {primary}\n              </Text>\n            );\n\n          if (index === path.slice(numMenuItems).length - 1) return Comp;\n\n          return (\n            <Fragment key={id}>\n              {Comp}\n              <Icon name={`caret-${end}`} />\n            </Fragment>\n          );\n        })}\n      </Flex>\n    );\n  }\n);\n\nexport default Breadcrumbs;\n"]}
+{"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  Fragment,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useEffect,\n  useRef,\n  useState,\n  MouseEvent\n} from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { useElement, useConsolidatedRef, useDirection } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { debounce, tryCatch } from '../../utils';\nimport Button, { StyledButton } from '../Button';\nimport Flex from '../Flex';\nimport Link, { StyledLink } from '../Link';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport MenuButton from '../MenuButton';\nimport Text, { StyledText } from '../Text';\nimport { MenuItemProps } from '../Menu';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nexport interface BreadcrumbsProps extends BaseProps, NoChildrenProp {\n  /** A set of actions representing the chronological hierarchy of pages or locations leading to the current view. */\n  path: MenuItemProps[];\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledSeparator: typeof Icon = styled(Icon)(({ theme }) => {\n  const color = tryCatch(() =>\n    rgba(theme.base.palette['foreground-color'], theme.base.transparency['transparent-2'])\n  );\n\n  return css`\n    color: ${color};\n  `;\n});\n\nexport const StyledBreadcrumbs = styled.div<{ oneItemRemaining: boolean }>(\n  ({ theme, oneItemRemaining }) => css`\n    white-space: nowrap;\n    overflow: visible;\n    visibility: hidden;\n\n    ${StyledIcon} {\n      width: 1em;\n      height: 1em;\n      flex-shrink: 0;\n    }\n\n    ${StyledLink},\n    ${StyledButton},\n    ${StyledText} {\n      max-width: ${theme.base['content-width'].md};\n    }\n\n    ${oneItemRemaining &&\n    css`\n      & > :last-child {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n    `}\n  `\n);\n\nStyledBreadcrumbs.defaultProps = defaultThemeProp;\n\nconst getEllipsisStyles = ({ theme }: { theme: DefaultTheme }) => {\n  return css`\n    min-width: ${theme.base['content-width'].xs};\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  `;\n};\n\nconst StyledEllipsizedLink = styled(Link)(getEllipsisStyles);\n\nStyledEllipsizedLink.defaultProps = defaultThemeProp;\n\nconst StyledEllipsizedButton = styled(Button)(getEllipsisStyles);\n\nStyledEllipsizedButton.defaultProps = defaultThemeProp;\n\nconst StyledEllipsizedText = styled(Text)(getEllipsisStyles);\n\nStyledEllipsizedText.defaultProps = defaultThemeProp;\n\nconst Breadcrumbs: FunctionComponent<BreadcrumbsProps & ForwardProps> = forwardRef(\n  ({ path, ...restProps }: PropsWithoutRef<BreadcrumbsProps>, ref: BreadcrumbsProps['ref']) => {\n    const [breadcrumbsEl, setBreadcrumbsEl] = useElement<HTMLDivElement>();\n    const [numMenuItems, setNumMenuItems] = useState(0);\n    const minInlineWidth = useRef(0);\n\n    const breadcrumbRef = useConsolidatedRef(setBreadcrumbsEl, ref);\n\n    const debouncedResize = debounce((entries: ResizeObserverEntry[]) => {\n      if (entries[0].contentRect.width > minInlineWidth.current) {\n        setNumMenuItems(curr => {\n          if (curr === 0) return curr;\n          return curr - 1;\n        });\n      }\n    }, 100);\n\n    const resizeObserver = new ResizeObserver(debouncedResize);\n\n    const intersectionObserver = new IntersectionObserver(\n      entries => {\n        if (entries[0].intersectionRatio < 1 && numMenuItems < path.length - 1) {\n          if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n          setNumMenuItems(curr => {\n            if (curr === path.length - 1) return curr;\n            return curr + 1;\n          });\n        } else if (breadcrumbsEl) breadcrumbsEl.style.visibility = 'visible';\n      },\n      { root: breadcrumbsEl, threshold: 1 }\n    );\n\n    useEffect(() => {\n      if (breadcrumbsEl && breadcrumbsEl.lastChild) {\n        intersectionObserver.observe(breadcrumbsEl.lastChild as Element);\n        resizeObserver.observe(breadcrumbsEl);\n\n        return () => {\n          intersectionObserver.disconnect();\n          resizeObserver.disconnect();\n        };\n      }\n    }, [breadcrumbsEl, numMenuItems]);\n\n    const { end } = useDirection();\n\n    return (\n      <Flex\n        {...restProps}\n        container={{ gap: 0.5, alignItems: 'center' }}\n        as={StyledBreadcrumbs}\n        oneItemRemaining={numMenuItems === path.length - 1}\n        ref={breadcrumbRef}\n      >\n        {numMenuItems > 0 && (\n          <>\n            <MenuButton\n              text='Links'\n              iconOnly\n              variant='link'\n              icon='folder-hierarchy-solid'\n              menu={{ items: path.slice(0, numMenuItems).reverse() }}\n            />\n            <StyledSeparator name={`caret-${end}`} />\n          </>\n        )}\n        {path.slice(numMenuItems).map((crumb, index) => {\n          const { id, primary, visual, href, onClick, ...restCrumbProps } = crumb;\n          let Comp;\n          if (href)\n            Comp = (\n              <Link\n                key={id}\n                href={href}\n                as={primary.length > 60 ? StyledEllipsizedLink : undefined}\n                onClick={(e: MouseEvent<HTMLAnchorElement>) => {\n                  onClick?.(id, e);\n                }}\n                {...restCrumbProps}\n              >\n                {visual} {primary}\n              </Link>\n            );\n          else if (onClick)\n            Comp = (\n              <Button\n                key={id}\n                variant='link'\n                as={primary.length > 60 ? StyledEllipsizedButton : undefined}\n                onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                  onClick(id, e);\n                }}\n                {...restCrumbProps}\n              >\n                {visual} {primary}\n              </Button>\n            );\n          else\n            Comp = (\n              <Text\n                key={id}\n                as={primary.length > 60 ? StyledEllipsizedText : undefined}\n                {...restCrumbProps}\n              >\n                {visual} {primary}\n              </Text>\n            );\n\n          if (index === path.slice(numMenuItems).length - 1) return Comp;\n\n          return (\n            <Fragment key={id}>\n              {Comp}\n              <StyledSeparator name={`caret-${end}`} />\n            </Fragment>\n          );\n        })}\n      </Flex>\n    );\n  }\n);\n\nexport default Breadcrumbs;\n"]}

package/lib/components/Button/BareRoleButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BareRoleButton.d.ts","sourceRoot":"","sources":["../../../src/components/Button/BareRoleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,GAAG,EAAE,UAAU,EAAE,aAAa,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGjG,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEtD,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAClD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACvD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,oBAAoB,yGAAe,CAAC;AAEjD,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAiCzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"BareRoleButton.d.ts","sourceRoot":"","sources":["../../../src/components/Button/BareRoleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,GAAG,EAAE,UAAU,EAAE,aAAa,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGjG,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEtD,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAClD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACvD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,oBAAoB,yGAEhC,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAiCzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/Button/BareRoleButton.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled from 'styled-components';
-export const StyledBareRoleButton = styled.div ``;
+export const StyledBareRoleButton = styled.div `
+  cursor: pointer;
+`;
 const BareRoleButton = forwardRef(({ children, onClick, onKeyDown, ...restProps }, ref) => {
     return (_jsx(StyledBareRoleButton, { ...restProps, tabIndex: 0, role: 'button', onKeyDown: (e) => {
             if ((e.key === ' ' || e.key === 'Enter') && e.target === e.currentTarget) {

package/lib/components/Button/BareRoleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BareRoleButton.js","sourceRoot":"","sources":["../../../src/components/Button/BareRoleButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAgE,MAAM,OAAO,CAAC;AACjG,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAWvC,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEjD,MAAM,cAAc,GAA0D,UAAU,CACtF,CACE,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,SAAS,EAAuB,EACnE,GAA+B,EAC/B,EAAE;IACF,OAAO,CACL,KAAC,oBAAoB,OACf,SAAS,EACb,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAC,CAAgC,EAAE,EAAE;YAC9C,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa,EAAE;gBACvE,CAAC,CAAC,aAAgC,CAAC,KAAK,EAAE,CAAC;aAC7C;YAED,OAAO,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC;QACxB,CAAC,EACD,OAAO,EAAE,CAAC,CAA6B,EAAE,EAAE;YACzC,IACE,CAAC,CAAC,MAAM,YAAY,OAAO;gBAC3B,mEAAmE;gBACnE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,2CAA2C,CAAC,KAAK,CAAC,CAAC,aAAa;gBAEjF,OAAO;YAET,OAAO,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QACtB,CAAC,EACD,GAAG,EAAE,GAAG,YAEP,QAAQ,GACY,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { forwardRef, Ref, MouseEvent, KeyboardEvent, ReactNode, FunctionComponent } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\n\nexport interface BareRoleButtonProps extends BaseProps {\n  children: ReactNode;\n  onClick?: (e: MouseEvent<HTMLDivElement>) => void;\n  onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledBareRoleButton = styled.div``;\n\nconst BareRoleButton: FunctionComponent<BareRoleButtonProps & ForwardProps> = forwardRef(\n  (\n    { children, onClick, onKeyDown, ...restProps }: BareRoleButtonProps,\n    ref: BareRoleButtonProps['ref']\n  ) => {\n    return (\n      <StyledBareRoleButton\n        {...restProps}\n        tabIndex={0}\n        role='button'\n        onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {\n          if ((e.key === ' ' || e.key === 'Enter') && e.target === e.currentTarget) {\n            (e.currentTarget as HTMLDivElement).click();\n          }\n\n          return onKeyDown?.(e);\n        }}\n        onClick={(e: MouseEvent<HTMLDivElement>) => {\n          if (\n            e.target instanceof Element &&\n            // Ignore clicks on other interactive elements within this element.\n            e.target.closest(\"button, a, [role='button'], [role='link']\") !== e.currentTarget\n          )\n            return;\n\n          return onClick?.(e);\n        }}\n        ref={ref}\n      >\n        {children}\n      </StyledBareRoleButton>\n    );\n  }\n);\n\nexport default BareRoleButton;\n"]}
+{"version":3,"file":"BareRoleButton.js","sourceRoot":"","sources":["../../../src/components/Button/BareRoleButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAgE,MAAM,OAAO,CAAC;AACjG,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAWvC,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE7C,CAAC;AAEF,MAAM,cAAc,GAA0D,UAAU,CACtF,CACE,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,SAAS,EAAuB,EACnE,GAA+B,EAC/B,EAAE;IACF,OAAO,CACL,KAAC,oBAAoB,OACf,SAAS,EACb,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAC,CAAgC,EAAE,EAAE;YAC9C,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa,EAAE;gBACvE,CAAC,CAAC,aAAgC,CAAC,KAAK,EAAE,CAAC;aAC7C;YAED,OAAO,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC;QACxB,CAAC,EACD,OAAO,EAAE,CAAC,CAA6B,EAAE,EAAE;YACzC,IACE,CAAC,CAAC,MAAM,YAAY,OAAO;gBAC3B,mEAAmE;gBACnE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,2CAA2C,CAAC,KAAK,CAAC,CAAC,aAAa;gBAEjF,OAAO;YAET,OAAO,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QACtB,CAAC,EACD,GAAG,EAAE,GAAG,YAEP,QAAQ,GACY,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { forwardRef, Ref, MouseEvent, KeyboardEvent, ReactNode, FunctionComponent } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\n\nexport interface BareRoleButtonProps extends BaseProps {\n  children: ReactNode;\n  onClick?: (e: MouseEvent<HTMLDivElement>) => void;\n  onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledBareRoleButton = styled.div`\n  cursor: pointer;\n`;\n\nconst BareRoleButton: FunctionComponent<BareRoleButtonProps & ForwardProps> = forwardRef(\n  (\n    { children, onClick, onKeyDown, ...restProps }: BareRoleButtonProps,\n    ref: BareRoleButtonProps['ref']\n  ) => {\n    return (\n      <StyledBareRoleButton\n        {...restProps}\n        tabIndex={0}\n        role='button'\n        onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {\n          if ((e.key === ' ' || e.key === 'Enter') && e.target === e.currentTarget) {\n            (e.currentTarget as HTMLDivElement).click();\n          }\n\n          return onKeyDown?.(e);\n        }}\n        onClick={(e: MouseEvent<HTMLDivElement>) => {\n          if (\n            e.target instanceof Element &&\n            // Ignore clicks on other interactive elements within this element.\n            e.target.closest(\"button, a, [role='button'], [role='link']\") !== e.currentTarget\n          )\n            return;\n\n          return onClick?.(e);\n        }}\n        ref={ref}\n      >\n        {children}\n      </StyledBareRoleButton>\n    );\n  }\n);\n\nexport default BareRoleButton;\n"]}

package/lib/components/Checkbox/Checkbox.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { ChangeEvent, FC } from 'react';
 import { FormControlProps } from '../FormControl';
 import { RadioCheckProps } from '../RadioCheck';
 import { ForwardProps, NoChildrenProp } from '../../types';
@@ -27,6 +27,8 @@ export interface CheckboxProps extends NoChildrenProp {
     indeterminate?: RadioCheckProps['indeterminate'];
     /** Set visual state based on a validation state. */
     status?: FormControlProps['status'];
+    /** Callback invoked when this particular checkbox changes selection. */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 declare const CB: FC<CheckboxProps & ForwardProps>;
 export default CB;

package/lib/components/Checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAmB,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,yEAAyE;IACzE,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACrC,oEAAoE;IACpE,cAAc,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IACnD;;;OAGG;IACH,aAAa,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IACjD,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;CACrC;AAGD,QAAA,MAAM,EAAE,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CAIxC,CAAC;AAKF,eAAe,EAAE,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,EAAE,EAAmB,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,yEAAyE;IACzE,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACrC,oEAAoE;IACpE,cAAc,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IACnD;;;OAGG;IACH,aAAa,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IACjD,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACvD;AAGD,QAAA,MAAM,EAAE,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CAIxC,CAAC;AAKF,eAAe,EAAE,CAAC"}

package/lib/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAO,MAAM,OAAO,CAAC;AAG5C,OAAO,UAA+B,MAAM,eAAe,CAAC;AA8B5D,0FAA0F;AAC1F,MAAM,EAAE,GAAqC,UAAU,CACrD,CAAC,KAAoB,EAAE,GAA0B,EAAE,EAAE,CAAC,CACpD,KAAC,UAAU,OAAK,KAAK,EAAE,IAAI,EAAC,UAAU,EAAC,GAAG,EAAE,GAAG,GAAI,CACpD,CACF,CAAC;AAEF,oCAAoC;AACpC,EAAE,CAAC,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC;AAE1C,eAAe,EAAE,CAAC","sourcesContent":["import { FC, forwardRef, Ref } from 'react';\n\nimport { FormControlProps } from '../FormControl';\nimport RadioCheck, { RadioCheckProps } from '../RadioCheck';\nimport { ForwardProps, NoChildrenProp } from '../../types';\n\nexport interface CheckboxProps extends NoChildrenProp {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Sets checked prop via onChange when using as controlled component. */\n  checked?: RadioCheckProps['checked'];\n  /** Initialize checked prop when using as uncontrolled component. */\n  defaultChecked?: RadioCheckProps['defaultChecked'];\n  /**\n   * Sets Checkbox to an an [indeterminate state](https://css-tricks.com/almanac/selectors/i/indeterminate/#indeterminate-checkboxes).\n   * @default false\n   */\n  indeterminate?: RadioCheckProps['indeterminate'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n}\n\n// Odd issue with SB doc prop table not being generated when called Checkbox...so using CB\nconst CB: FC<CheckboxProps & ForwardProps> = forwardRef(\n  (props: CheckboxProps, ref: Ref<HTMLInputElement>) => (\n    <RadioCheck {...props} type='checkbox' ref={ref} />\n  )\n);\n\n// Adding here for doc purposes only\nCB.defaultProps = RadioCheck.defaultProps;\n\nexport default CB;\n"]}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAmB,UAAU,EAAO,MAAM,OAAO,CAAC;AAGzD,OAAO,UAA+B,MAAM,eAAe,CAAC;AAgC5D,0FAA0F;AAC1F,MAAM,EAAE,GAAqC,UAAU,CACrD,CAAC,KAAoB,EAAE,GAA0B,EAAE,EAAE,CAAC,CACpD,KAAC,UAAU,OAAK,KAAK,EAAE,IAAI,EAAC,UAAU,EAAC,GAAG,EAAE,GAAG,GAAI,CACpD,CACF,CAAC;AAEF,oCAAoC;AACpC,EAAE,CAAC,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC;AAE1C,eAAe,EAAE,CAAC","sourcesContent":["import { ChangeEvent, FC, forwardRef, Ref } from 'react';\n\nimport { FormControlProps } from '../FormControl';\nimport RadioCheck, { RadioCheckProps } from '../RadioCheck';\nimport { ForwardProps, NoChildrenProp } from '../../types';\n\nexport interface CheckboxProps extends NoChildrenProp {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Sets checked prop via onChange when using as controlled component. */\n  checked?: RadioCheckProps['checked'];\n  /** Initialize checked prop when using as uncontrolled component. */\n  defaultChecked?: RadioCheckProps['defaultChecked'];\n  /**\n   * Sets Checkbox to an an [indeterminate state](https://css-tricks.com/almanac/selectors/i/indeterminate/#indeterminate-checkboxes).\n   * @default false\n   */\n  indeterminate?: RadioCheckProps['indeterminate'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Callback invoked when this particular checkbox changes selection. */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n}\n\n// Odd issue with SB doc prop table not being generated when called Checkbox...so using CB\nconst CB: FC<CheckboxProps & ForwardProps> = forwardRef(\n  (props: CheckboxProps, ref: Ref<HTMLInputElement>) => (\n    <RadioCheck {...props} type='checkbox' ref={ref} />\n  )\n);\n\n// Adding here for doc purposes only\nCB.defaultProps = RadioCheck.defaultProps;\n\nexport default CB;\n"]}

package/lib/components/ColorPicker/ColorPicker.d.ts

@@ -42,6 +42,8 @@ export interface ColorPickerProps extends BaseProps, NoChildrenProp {
     name?: FormControlProps['name'];
     /** Layout field elements inline in a row. */
     inline?: FormFieldProps['inline'];
+    /** Button when clicked will show additional information on the color picker */
+    additionalInfo?: FormFieldProps['additionalInfo'];
     /** onChange event handler that gets called on change of value. */
     onChange?: ColorChangeHandler;
     /** onBeforeClose of the color picker */

package/lib/components/ColorPicker/ColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAEF,GAAG,EAGH,iBAAiB,EAElB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAgB,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE/D,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAqB,MAAM,aAAa,CAAC;AACzF,OAAkB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAKrE,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,yCAAyC;IACzC,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACjC;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,6CAA6C;IAC7C,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,wCAAwC;IACxC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,+FAA+F;IAC/F,OAAO,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AA0ED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CAuHpD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAEF,GAAG,EAGH,iBAAiB,EAElB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAgB,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE/D,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAqB,MAAM,aAAa,CAAC;AACzF,OAAkB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAKrE,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,yCAAyC;IACzC,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACjC;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,6CAA6C;IAC7C,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC,+EAA+E;IAC/E,cAAc,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAClD,kEAAkE;IAClE,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,wCAAwC;IACxC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,+FAA+F;IAC/F,OAAO,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AA0ED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CAwHpD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/ColorPicker/ColorPicker.js

@@ -107,7 +107,7 @@ const ColorPicker = forwardRef((props, ref) => {
             popoverEl?.focus();
         }
     }, [showPopOver]);
-    return (_jsx(FormField, { inline: inline, container: inline ? { justify: 'between' } : undefined, as: StyledColorPicker, id: id, label: label, labelHidden: labelHidden, swatchOnly: swatchOnly, info: info, disabled: disabled, status: status, required: required, children: _jsxs(Flex, { container: { alignItems: 'center' }, item: swatchOnly ? { alignSelf: 'start' } : undefined, as: StyledFormControl, disabled: disabled, status: status, required: required, readOnly: readOnly, onClick: readOnly ? undefined : () => setShowPopOver(true), children: [_jsx("input", { ...restProps, id: id, type: readOnly ? undefined : 'color', ref: inputRef, defaultValue: value, disabled: disabled, required: required, readOnly: readOnly, onClick: e => {
+    return (_jsx(FormField, { inline: inline, container: inline ? { justify: 'between' } : undefined, as: StyledColorPicker, id: id, label: label, labelHidden: labelHidden, swatchOnly: swatchOnly, info: info, disabled: disabled, status: status, required: required, ...restProps, children: _jsxs(Flex, { container: { alignItems: 'center' }, item: swatchOnly ? { alignSelf: 'start' } : undefined, as: StyledFormControl, disabled: disabled, status: status, required: required, readOnly: readOnly, onClick: readOnly ? undefined : () => setShowPopOver(true), children: [_jsx("input", { ...restProps, id: id, type: readOnly ? undefined : 'color', ref: inputRef, defaultValue: value, disabled: disabled, required: required, readOnly: readOnly, onClick: e => {
                         e.preventDefault();
                         if (readOnly)
                             e.preventDefault();

package/lib/components/ColorPicker/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  forwardRef,\n  Ref,\n  useState,\n  PropsWithoutRef,\n  MouseEventHandler,\n  useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\nimport { ChromePicker, ColorChangeHandler } from 'react-color';\n\nimport { BaseProps, ForwardProps, NoChildrenProp, PropsWithDefaults } from '../../types';\nimport FormField, { FormFieldProps } from '../FormField';\nimport { defaultThemeProp } from '../../theme';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport Flex from '../Flex';\nimport { useConsolidatedRef, useUID, useElement, useOuterEvent } from '../../hooks';\nimport Popover from '../Popover';\n\nexport interface ColorPickerProps extends BaseProps, NoChildrenProp {\n  /** label for the color picker control */\n  label: FormControlProps['label'];\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not passed, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /**\n   * Color picker value in hex\n   * @default \"#000000\"\n   */\n  value?: FormControlProps['value'];\n  /**\n   * Show color swatch without hex value display.\n   * @default false\n   */\n  swatchOnly?: boolean;\n  /**\n   * Enables alpha slider.\n   * @default false\n   */\n  alpha?: boolean;\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. */\n  disabled?: FormControlProps['disabled'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Layout field elements inline in a row. */\n  inline?: FormFieldProps['inline'];\n  /** onChange event handler that gets called on change of value. */\n  onChange?: ColorChangeHandler;\n  /** onBeforeClose of the color picker */\n  onBeforeClose?: () => void;\n  /** Called when the underlying input element is clicked. This should be rarely if ever used. */\n  onClick?: MouseEventHandler<HTMLInputElement>;\n  /** Ref placed on the input element. */\n  ref?: Ref<HTMLInputElement>;\n}\n\ntype ColorPickerPropsWithDefaults = PropsWithDefaults<ColorPickerProps, 'value' | 'swatchOnly'>;\n\nconst StyledColorPicker = styled.div<Pick<ColorPickerPropsWithDefaults, 'swatchOnly'>>(\n  ({ theme, swatchOnly }) => {\n    const size = theme.components.input.height;\n    const borderWidth = theme.components['form-control']['border-width'];\n\n    return css`\n      ${StyledFormControl} {\n        overflow: hidden;\n        text-transform: uppercase;\n        ${!swatchOnly &&\n        css`\n          min-width: 8rem;\n        `}\n\n        ${!swatchOnly &&\n        css`\n          padding-inline-end: ${theme.base.spacing};\n        `}\n\n        &:focus-within {\n          box-shadow: ${theme.base.shadow.focus};\n          border: none;\n        }\n\n        & > input {\n          ${hideVisually}\n\n          & + div {\n            height: calc(${size} - (2 * ${borderWidth}));\n\n            ${swatchOnly\n              ? css`\n                  width: calc(${size} - (2 * ${borderWidth}));\n                `\n              : css`\n                  min-width: calc(${size} - ${borderWidth});\n                  margin-inline-end: ${theme.base.spacing};\n                  border-inline-end: ${borderWidth} solid\n                    ${theme.components['form-control']['border-color']};\n                `}\n          }\n\n          &:focus + div {\n            width: ${size};\n            height: ${size};\n          }\n        }\n\n        & input {\n          height: 2rem !important;\n          min-height: 2rem;\n          color: #000000 !important;\n          background-color: #ffffff !important;\n          font-size: 0.8125rem !important;\n          font-family: ${theme.base['font-family']};\n\n          & + label {\n            font-weight: 600;\n            color: rgba(0, 0, 0, 0.6) !important;\n            font-size: 0.8125rem !important;\n            font-family: ${theme.base['font-family']};\n          }\n        }\n      }\n    `;\n  }\n);\n\nStyledColorPicker.defaultProps = defaultThemeProp;\n\nconst ColorPicker: FC<ColorPickerProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ColorPickerProps>, ref: ColorPickerProps['ref']) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      value = '#000000',\n      label,\n      info,\n      disabled,\n      status,\n      required,\n      readOnly,\n      labelHidden,\n      swatchOnly = false,\n      alpha = false,\n      inline,\n      onClick,\n      onChange,\n      onBeforeClose,\n      ...restProps\n    } = props;\n\n    const inputRef = useConsolidatedRef(ref);\n    const maskedSwatchRef = useConsolidatedRef<HTMLDivElement>();\n    const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n    const [showPopOver, setShowPopOver] = useState(false);\n\n    const hidePopover = () => {\n      if (showPopOver) {\n        onBeforeClose?.();\n      }\n\n      setShowPopOver(false);\n    };\n\n    const closePopover = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        hidePopover();\n      }\n    };\n\n    useOuterEvent('mousedown', [popoverEl], hidePopover);\n\n    useEffect(() => {\n      document.addEventListener('keydown', closePopover);\n      popoverEl?.addEventListener('keydown', closePopover);\n      return () => {\n        document.removeEventListener('keydown', closePopover);\n        popoverEl?.removeEventListener('keydown', closePopover);\n      };\n    }, [popoverEl]);\n\n    useEffect(() => {\n      if (showPopOver) {\n        popoverEl?.focus();\n      }\n    }, [showPopOver]);\n\n    return (\n      <FormField\n        inline={inline}\n        container={inline ? { justify: 'between' } : undefined}\n        as={StyledColorPicker}\n        id={id}\n        label={label}\n        labelHidden={labelHidden}\n        swatchOnly={swatchOnly}\n        info={info}\n        disabled={disabled}\n        status={status}\n        required={required}\n      >\n        <Flex\n          container={{ alignItems: 'center' }}\n          item={swatchOnly ? { alignSelf: 'start' } : undefined}\n          as={StyledFormControl}\n          disabled={disabled}\n          status={status}\n          required={required}\n          readOnly={readOnly}\n          onClick={readOnly ? undefined : () => setShowPopOver(true)}\n        >\n          <input\n            {...restProps}\n            id={id}\n            type={readOnly ? undefined : 'color'}\n            ref={inputRef}\n            defaultValue={value}\n            disabled={disabled}\n            required={required}\n            readOnly={readOnly}\n            onClick={e => {\n              e.preventDefault();\n              if (readOnly) e.preventDefault();\n            }}\n          />\n          <div style={{ backgroundColor: value }} ref={maskedSwatchRef} />\n          {!swatchOnly && value}\n          <Popover\n            placement='bottom-start'\n            style={{ zIndex: '3000' }}\n            show={showPopOver}\n            ref={setPopoverEl}\n            groupId='popover'\n            target={maskedSwatchRef.current}\n          >\n            <ChromePicker\n              disableAlpha={!alpha}\n              color={value}\n              onChange={(color, e) => {\n                onChange?.(color, e);\n              }}\n            />\n          </Popover>\n        </Flex>\n      </FormField>\n    );\n  }\n);\n\nexport default ColorPicker;\n"]}
+{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,UAAU,EAEV,QAAQ,EAGR,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,YAAY,EAAsB,MAAM,aAAa,CAAC;AAG/D,OAAO,SAA6B,MAAM,cAAc,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAoB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACrE,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACpF,OAAO,OAAO,MAAM,YAAY,CAAC;AAuDjC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAClC,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE;IACxB,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC;IAC3C,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC,CAAC;IAErE,OAAO,GAAG,CAAA;QACN,iBAAiB;;;UAGf,CAAC,UAAU;QACb,GAAG,CAAA;;SAEF;;UAEC,CAAC,UAAU;QACb,GAAG,CAAA;gCACqB,KAAK,CAAC,IAAI,CAAC,OAAO;SACzC;;;wBAGe,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;;;YAKnC,YAAY;;;2BAGG,IAAI,WAAW,WAAW;;cAEvC,UAAU;QACV,CAAC,CAAC,GAAG,CAAA;gCACa,IAAI,WAAW,WAAW;iBACzC;QACH,CAAC,CAAC,GAAG,CAAA;oCACiB,IAAI,MAAM,WAAW;uCAClB,KAAK,CAAC,IAAI,CAAC,OAAO;uCAClB,WAAW;sBAC5B,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;iBACrD;;;;qBAII,IAAI;sBACH,IAAI;;;;;;;;;;yBAUD,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC;;;;;;2BAMvB,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC;;;;KAI/C,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,WAAW,GAAwC,UAAU,CACjE,CAAC,KAAwC,EAAE,GAA4B,EAAE,EAAE;IACzE,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EACJ,EAAE,GAAG,GAAG,EACR,KAAK,GAAG,SAAS,EACjB,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,UAAU,GAAG,KAAK,EAClB,KAAK,GAAG,KAAK,EACb,MAAM,EACN,OAAO,EACP,QAAQ,EACR,aAAa,EACb,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACzC,MAAM,eAAe,GAAG,kBAAkB,EAAkB,CAAC;IAC7D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,CAAc,IAAI,CAAC,CAAC;IAChE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,WAAW,EAAE;YACf,aAAa,EAAE,EAAE,CAAC;SACnB;QAED,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,CAAgB,EAAE,EAAE;QACxC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;YACtB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,WAAW,EAAE,CAAC;SACf;IACH,CAAC,CAAC;IAEF,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,CAAC,EAAE,WAAW,CAAC,CAAC;IAErD,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;QACnD,SAAS,EAAE,gBAAgB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;QACrD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;YACtD,SAAS,EAAE,mBAAmB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;QAC1D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,EAAE;YACf,SAAS,EAAE,KAAK,EAAE,CAAC;SACpB;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,KAAC,SAAS,IACR,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,SAAS,EACtD,EAAE,EAAE,iBAAiB,EACrB,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,KACd,SAAS,YAEb,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EACnC,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,SAAS,EACrD,EAAE,EAAE,iBAAiB,EACrB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,aAE1D,mBACM,SAAS,EACb,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EACpC,GAAG,EAAE,QAAQ,EACb,YAAY,EAAE,KAAK,EACnB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,CAAC,EAAE;wBACX,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,IAAI,QAAQ;4BAAE,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnC,CAAC,GACD,EACF,cAAK,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,eAAe,GAAI,EAC/D,CAAC,UAAU,IAAI,KAAK,EACrB,KAAC,OAAO,IACN,SAAS,EAAC,cAAc,EACxB,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EACzB,IAAI,EAAE,WAAW,EACjB,GAAG,EAAE,YAAY,EACjB,OAAO,EAAC,SAAS,EACjB,MAAM,EAAE,eAAe,CAAC,OAAO,YAE/B,KAAC,YAAY,IACX,YAAY,EAAE,CAAC,KAAK,EACpB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;4BACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;wBACvB,CAAC,GACD,GACM,IACL,GACG,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import {\n  FC,\n  forwardRef,\n  Ref,\n  useState,\n  PropsWithoutRef,\n  MouseEventHandler,\n  useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\nimport { ChromePicker, ColorChangeHandler } from 'react-color';\n\nimport { BaseProps, ForwardProps, NoChildrenProp, PropsWithDefaults } from '../../types';\nimport FormField, { FormFieldProps } from '../FormField';\nimport { defaultThemeProp } from '../../theme';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport Flex from '../Flex';\nimport { useConsolidatedRef, useUID, useElement, useOuterEvent } from '../../hooks';\nimport Popover from '../Popover';\n\nexport interface ColorPickerProps extends BaseProps, NoChildrenProp {\n  /** label for the color picker control */\n  label: FormControlProps['label'];\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not passed, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /**\n   * Color picker value in hex\n   * @default \"#000000\"\n   */\n  value?: FormControlProps['value'];\n  /**\n   * Show color swatch without hex value display.\n   * @default false\n   */\n  swatchOnly?: boolean;\n  /**\n   * Enables alpha slider.\n   * @default false\n   */\n  alpha?: boolean;\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. */\n  disabled?: FormControlProps['disabled'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Layout field elements inline in a row. */\n  inline?: FormFieldProps['inline'];\n  /** Button when clicked will show additional information on the color picker */\n  additionalInfo?: FormFieldProps['additionalInfo'];\n  /** onChange event handler that gets called on change of value. */\n  onChange?: ColorChangeHandler;\n  /** onBeforeClose of the color picker */\n  onBeforeClose?: () => void;\n  /** Called when the underlying input element is clicked. This should be rarely if ever used. */\n  onClick?: MouseEventHandler<HTMLInputElement>;\n  /** Ref placed on the input element. */\n  ref?: Ref<HTMLInputElement>;\n}\n\ntype ColorPickerPropsWithDefaults = PropsWithDefaults<ColorPickerProps, 'value' | 'swatchOnly'>;\n\nconst StyledColorPicker = styled.div<Pick<ColorPickerPropsWithDefaults, 'swatchOnly'>>(\n  ({ theme, swatchOnly }) => {\n    const size = theme.components.input.height;\n    const borderWidth = theme.components['form-control']['border-width'];\n\n    return css`\n      ${StyledFormControl} {\n        overflow: hidden;\n        text-transform: uppercase;\n        ${!swatchOnly &&\n        css`\n          min-width: 8rem;\n        `}\n\n        ${!swatchOnly &&\n        css`\n          padding-inline-end: ${theme.base.spacing};\n        `}\n\n        &:focus-within {\n          box-shadow: ${theme.base.shadow.focus};\n          border: none;\n        }\n\n        & > input {\n          ${hideVisually}\n\n          & + div {\n            height: calc(${size} - (2 * ${borderWidth}));\n\n            ${swatchOnly\n              ? css`\n                  width: calc(${size} - (2 * ${borderWidth}));\n                `\n              : css`\n                  min-width: calc(${size} - ${borderWidth});\n                  margin-inline-end: ${theme.base.spacing};\n                  border-inline-end: ${borderWidth} solid\n                    ${theme.components['form-control']['border-color']};\n                `}\n          }\n\n          &:focus + div {\n            width: ${size};\n            height: ${size};\n          }\n        }\n\n        & input {\n          height: 2rem !important;\n          min-height: 2rem;\n          color: #000000 !important;\n          background-color: #ffffff !important;\n          font-size: 0.8125rem !important;\n          font-family: ${theme.base['font-family']};\n\n          & + label {\n            font-weight: 600;\n            color: rgba(0, 0, 0, 0.6) !important;\n            font-size: 0.8125rem !important;\n            font-family: ${theme.base['font-family']};\n          }\n        }\n      }\n    `;\n  }\n);\n\nStyledColorPicker.defaultProps = defaultThemeProp;\n\nconst ColorPicker: FC<ColorPickerProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ColorPickerProps>, ref: ColorPickerProps['ref']) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      value = '#000000',\n      label,\n      info,\n      disabled,\n      status,\n      required,\n      readOnly,\n      labelHidden,\n      swatchOnly = false,\n      alpha = false,\n      inline,\n      onClick,\n      onChange,\n      onBeforeClose,\n      ...restProps\n    } = props;\n\n    const inputRef = useConsolidatedRef(ref);\n    const maskedSwatchRef = useConsolidatedRef<HTMLDivElement>();\n    const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n    const [showPopOver, setShowPopOver] = useState(false);\n\n    const hidePopover = () => {\n      if (showPopOver) {\n        onBeforeClose?.();\n      }\n\n      setShowPopOver(false);\n    };\n\n    const closePopover = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        hidePopover();\n      }\n    };\n\n    useOuterEvent('mousedown', [popoverEl], hidePopover);\n\n    useEffect(() => {\n      document.addEventListener('keydown', closePopover);\n      popoverEl?.addEventListener('keydown', closePopover);\n      return () => {\n        document.removeEventListener('keydown', closePopover);\n        popoverEl?.removeEventListener('keydown', closePopover);\n      };\n    }, [popoverEl]);\n\n    useEffect(() => {\n      if (showPopOver) {\n        popoverEl?.focus();\n      }\n    }, [showPopOver]);\n\n    return (\n      <FormField\n        inline={inline}\n        container={inline ? { justify: 'between' } : undefined}\n        as={StyledColorPicker}\n        id={id}\n        label={label}\n        labelHidden={labelHidden}\n        swatchOnly={swatchOnly}\n        info={info}\n        disabled={disabled}\n        status={status}\n        required={required}\n        {...restProps}\n      >\n        <Flex\n          container={{ alignItems: 'center' }}\n          item={swatchOnly ? { alignSelf: 'start' } : undefined}\n          as={StyledFormControl}\n          disabled={disabled}\n          status={status}\n          required={required}\n          readOnly={readOnly}\n          onClick={readOnly ? undefined : () => setShowPopOver(true)}\n        >\n          <input\n            {...restProps}\n            id={id}\n            type={readOnly ? undefined : 'color'}\n            ref={inputRef}\n            defaultValue={value}\n            disabled={disabled}\n            required={required}\n            readOnly={readOnly}\n            onClick={e => {\n              e.preventDefault();\n              if (readOnly) e.preventDefault();\n            }}\n          />\n          <div style={{ backgroundColor: value }} ref={maskedSwatchRef} />\n          {!swatchOnly && value}\n          <Popover\n            placement='bottom-start'\n            style={{ zIndex: '3000' }}\n            show={showPopOver}\n            ref={setPopoverEl}\n            groupId='popover'\n            target={maskedSwatchRef.current}\n          >\n            <ChromePicker\n              disableAlpha={!alpha}\n              color={value}\n              onChange={(color, e) => {\n                onChange?.(color, e);\n              }}\n            />\n          </Popover>\n        </Flex>\n      </FormField>\n    );\n  }\n);\n\nexport default ColorPicker;\n"]}

package/lib/components/ComboBox/ComboBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAY3C,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAO7C,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAgN7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAoB3C,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAO7C,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA6S7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/ComboBox/ComboBox.js

@@ -3,7 +3,7 @@ import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'r
 import Icon, { registerIcon } from '../Icon';
 import * as caretDownIcon from '../Icon/icons/caret-down.icon';
 import * as caretUpIcon from '../Icon/icons/caret-up.icon';
-import { useConsolidatedRef, useFocusWithin, useI18n, useUID, useElement } from '../../hooks';
+import { useConsolidatedRef, useFocusWithin, useI18n, useUID, useElement, useDirection } from '../../hooks';
 import Popover from '../Popover';
 import FormField from '../FormField';
 import { StyledFormControl } from '../FormControl';
@@ -12,24 +12,38 @@ import Button from '../Button';
 import { navigatorIsAvailable } from '../../utils';
 import menuHelpers from '../Menu/helpers';
 import { sameWidth } from '../Popover/modifiers';
+import VisuallyHiddenText from '../VisuallyHiddenText';
 import ComboBoxInput from './ComboBoxInput';
 import { StyledComboBox } from './ComboBox.styles';
 registerIcon(caretDownIcon, caretUpIcon);
 const isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');
 const ComboBox = forwardRef((props, ref) => {
     const uid = useUID();
-    const { value, required, id = uid, label, labelHidden, info, status, readOnly, disabled, mode = 'single-select', selected, onChange, actions, onFocus, onBlur, onDropdownButtonClick: onDropdownButtonClickProp, onClick, menu, ...restProps } = props;
+    const { additionalInfo, value, required, id = uid, label, labelHidden, info, status, readOnly, disabled, mode = 'single-select', selected, onChange, actions, onFocus, onBlur, onResolveSuggestion, onDropdownButtonClick: onDropdownButtonClickProp, onClick, onKeyDown, menu, ...restProps } = props;
+    const [pauseMenuDescendantEvaluation, setPauseMenuDescendantEvaluation] = useState(true);
+    const [pauseSelectedDescendantEvaluation, setPauseSelectedDescendantEvaluation] = useState(false);
     const t = useI18n();
+    const listId = `${id}-list`;
     const inputRef = useRef(null);
     const [open, setOpen] = useState(false);
     const menuRef = useRef(null);
     const menuComponentId = `${id}-listbox`;
+    const { start } = useDirection();
     // Force a re-render to make sure useFocusWithin has valid elements to set listeners on.
     const [, setContainerEl] = useElement();
     const containerRef = useConsolidatedRef(ref, setContainerEl);
+    const toggleMenuDescendantsActive = useCallback((bool) => {
+        setPauseMenuDescendantEvaluation(!bool);
+        setPauseSelectedDescendantEvaluation(bool);
+    }, []);
+    const toggleSelectedDescendantsActive = useCallback((bool) => {
+        setPauseSelectedDescendantEvaluation(!bool);
+        setPauseMenuDescendantEvaluation(bool);
+    }, []);
     const focus = useFocusWithin([containerRef], focused => {
         if (!focused) {
             setOpen(false);
+            toggleMenuDescendantsActive(false);
             onBlur?.(selected?.items);
         }
         else {
@@ -44,28 +58,39 @@ const ComboBox = forwardRef((props, ref) => {
     const onInputKeyDown = useCallback((e) => {
         if (!menu || readOnly)
             return;
+        if (onKeyDown?.(e) === false) {
+            return;
+        }
         switch (e.key) {
             case 'ArrowUp':
                 if (e.altKey) {
                     e.preventDefault();
-                    if (open)
+                    if (open) {
                         setOpen(false);
+                        toggleMenuDescendantsActive(false);
+                    }
                 }
                 break;
             case 'ArrowDown':
                 e.preventDefault();
-                if (!open)
+                if (!open) {
                     setOpen(true);
+                    toggleMenuDescendantsActive(true);
+                }
                 break;
             case 'Escape':
-                e.preventDefault();
-                if (open)
-                    e.stopPropagation();
+            case 'Tab':
+                if (e.key === 'Escape') {
+                    e.preventDefault();
+                    if (open)
+                        e.stopPropagation();
+                }
                 setOpen(false);
+                toggleMenuDescendantsActive(false);
                 break;
             default:
         }
-    }, [open, readOnly, menu, value]);
+    }, [open, readOnly, menu, value, onKeyDown]);
     const onDropdownButtonClick = useCallback(() => {
         onDropdownButtonClickProp?.(!open);
         setOpen(!open);
@@ -76,21 +101,36 @@ const ComboBox = forwardRef((props, ref) => {
                 inputRef.current?.focus();
             }, disabled: disabled, tabIndex: '-1', children: _jsx(Icon, { name: open ? 'caret-up' : 'caret-down' }) })) : null;
     }, [onDropdownButtonClick, onChange, readOnly, open, disabled]);
+    const ariaDescribedBy = useMemo(() => {
+        let idString = `${id}-inputDescription`;
+        if (info) {
+            idString = idString.concat(` ${id}-info`);
+        }
+        if (onChange) {
+            idString = idString.concat(` ${id}-searchDescription`);
+        }
+        if (mode === 'multi-select') {
+            idString = idString.concat(` ${id}-multiselectDescription`);
+        }
+        return idString;
+    }, [info, id, mode, onChange]);
     const onInputClick = useCallback((e) => {
         if (readOnly)
             return;
         setOpen(true);
+        toggleMenuDescendantsActive(true);
         onClick?.(e);
     }, [readOnly, onClick]);
     useEffect(() => {
         if (focus && menu && value && value.length > 0) {
             setOpen(true);
+            toggleMenuDescendantsActive(true);
         }
     }, [menu, value, focus]);
     // Workaround for the following error from jsx-ast-utils, fixed in version 3.5.0.
     // The prop value with an expression type of JSXFragment could not be resolved. Please file issue to get this fixed immediately.
     const inputActions = (_jsxs(_Fragment, { children: [dropdownButton, actions] }));
-    const Comp = (_jsxs(StyledComboBox, { ref: containerRef, as: StyledFormControl, id: `${id}-combobox`, children: [_jsx(ComboBoxInput, { ref: inputRef, role: 'combobox', "aria-haspopup": 'listbox', "aria-expanded": !readOnly && !disabled && open, "aria-autocomplete": 'list', "aria-describedby": info ? `${id}-inputDescription ${id}-info` : `${id}-inputDescription`, selected: selected?.items, spellCheck: false, ...{
+    const Comp = (_jsxs(StyledComboBox, { ref: containerRef, as: StyledFormControl, id: `${id}-combobox`, role: 'combobox', "aria-haspopup": 'listbox', "aria-expanded": !readOnly && !disabled && open, "aria-owns": open && menu !== undefined && !pauseMenuDescendantEvaluation ? listId : undefined, children: [_jsx(ComboBoxInput, { ref: inputRef, role: 'searchbox', "aria-autocomplete": 'list', "aria-controls": open && menu !== undefined && !pauseMenuDescendantEvaluation ? listId : undefined, "aria-describedby": ariaDescribedBy, selected: selected?.items, spellCheck: false, ...{
                     id,
                     readOnly,
                     disabled,
@@ -98,7 +138,11 @@ const ComboBox = forwardRef((props, ref) => {
                     value,
                     mode,
                     status
-                }, actions: inputActions, onRemove: selected?.onRemove, onClick: onInputClick, onKeyDown: onInputKeyDown, required: required, ...restProps }), _jsx("span", { id: `${id}-inputDescription`, hidden: true, children: `${t('combobox_open_close')} ` && onChange ? t('combobox_search_instructions') : '' }), _jsx(Popover, { show: open && menu !== undefined, target: containerRef.current, placement: 'bottom-start', modifiers: [
+                }, actions: inputActions, onRemove: selected?.onRemove, onClick: onInputClick, onKeyDown: onInputKeyDown, required: required, pauseDescendantEvaluation: pauseSelectedDescendantEvaluation, onSelectedFocus: () => {
+                    toggleSelectedDescendantsActive(true);
+                }, onSelectedBlur: () => {
+                    toggleSelectedDescendantsActive(false);
+                }, ...restProps }), _jsx(Popover, { show: open && menu !== undefined, target: containerRef.current, placement: 'bottom-start', modifiers: [
                     {
                         name: 'flip',
                         options: {
@@ -106,17 +150,28 @@ const ComboBox = forwardRef((props, ref) => {
                         }
                     },
                     sameWidth
-                ], strategy: isMobile ? 'absolute' : 'fixed', onMouseDown: (e) => e.preventDefault(), children: menu && (_jsx(Menu, { ref: menuRef, id: menuComponentId, role: 'listbox', mode: mode, ...menu, items: menu.items, focusControlEl: inputRef.current || undefined, onItemClick: (itemId, e) => {
+                ], strategy: isMobile ? 'absolute' : 'fixed', onMouseDown: (e) => e.preventDefault(), children: menu && (_jsx(Menu, { ref: menuRef, listId: listId, id: menuComponentId, role: 'listbox', mode: mode, ...menu, items: menu.items, focusControlEl: inputRef.current || undefined, onItemClick: (itemId, e) => {
                         if (mode === 'single-select') {
                             setOpen(false);
+                            toggleMenuDescendantsActive(true);
                         }
                         menu.onItemClick?.(itemId, e);
                         const clickedItem = menuHelpers.getItem(menu.items, itemId);
                         if (clickedItem?.primary && !clickedItem?.selected) {
                             selected?.onNew?.(clickedItem?.primary);
                         }
-                    }, arrowNavigationUnsupported: true })) })] }));
-    return label ? (_jsx(FormField, { ...{ label, labelHidden, id, info, status, required, disabled }, children: Comp })) : (Comp);
+                    }, "aria-label": t('menu_option_list'), pauseDescendantEvaluation: pauseMenuDescendantEvaluation, arrowNavigationUnsupported: true })) })] }));
+    return (_jsxs(_Fragment, { children: [label ? (_jsx(FormField, { ...{
+                    label,
+                    labelHidden,
+                    id,
+                    info,
+                    status,
+                    required,
+                    disabled,
+                    onResolveSuggestion,
+                    additionalInfo
+                }, children: Comp })) : (Comp), _jsx(VisuallyHiddenText, { id: `${id}-inputDescription`, "aria-hidden": true, children: `${t('combobox_open_close')} ` }), _jsx(VisuallyHiddenText, { id: `${id}-searchDescription`, "aria-hidden": true, children: t('combobox_search_instructions') }), _jsx(VisuallyHiddenText, { id: `${id}-multiselectDescription`, "aria-hidden": true, children: t('multiselect_instructions', [start]) })] }));
 });
 export default ComboBox;
 //# sourceMappingURL=ComboBox.js.map

package/lib/components/ComboBox/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  KeyboardEvent as ReactKeyboardEvent,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\n\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretDownIcon from '../Icon/icons/caret-down.icon';\nimport * as caretUpIcon from '../Icon/icons/caret-up.icon';\nimport { ForwardProps } from '../../types';\nimport { useConsolidatedRef, useFocusWithin, useI18n, useUID, useElement } from '../../hooks';\nimport Popover from '../Popover';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport Menu, { MenuProps } from '../Menu';\nimport Button from '../Button';\nimport { navigatorIsAvailable } from '../../utils';\nimport menuHelpers from '../Menu/helpers';\nimport { sameWidth } from '../Popover/modifiers';\n\nimport ComboBoxInput from './ComboBoxInput';\nimport ComboBoxProps from './ComboBox.types';\nimport { StyledComboBox } from './ComboBox.styles';\n\nregisterIcon(caretDownIcon, caretUpIcon);\n\nconst isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');\n\nconst ComboBox: FunctionComponent<ComboBoxProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ComboBoxProps>, ref: Ref<HTMLDivElement>) => {\n    const uid = useUID();\n    const {\n      value,\n      required,\n      id = uid,\n      label,\n      labelHidden,\n      info,\n      status,\n      readOnly,\n      disabled,\n      mode = 'single-select',\n      selected,\n      onChange,\n      actions,\n      onFocus,\n      onBlur,\n      onDropdownButtonClick: onDropdownButtonClickProp,\n      onClick,\n      menu,\n      ...restProps\n    } = props;\n\n    const t = useI18n();\n    const inputRef = useRef<HTMLInputElement>(null);\n    const [open, setOpen] = useState(false);\n    const menuRef: MenuProps['ref'] = useRef(null);\n    const menuComponentId = `${id}-listbox`;\n\n    // Force a re-render to make sure useFocusWithin has valid elements to set listeners on.\n    const [, setContainerEl] = useElement();\n    const containerRef = useConsolidatedRef<HTMLDivElement>(ref, setContainerEl);\n\n    const focus = useFocusWithin([containerRef], focused => {\n      if (!focused) {\n        setOpen(false);\n        onBlur?.(selected?.items);\n      } else {\n        onFocus?.(selected?.items);\n        if (isMobile) {\n          setTimeout(() => {\n            containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n          }, 150); // delay it to let keyboard expand first\n        }\n      }\n    });\n\n    const onInputKeyDown = useCallback(\n      (e: ReactKeyboardEvent<HTMLInputElement>) => {\n        if (!menu || readOnly) return;\n        switch (e.key) {\n          case 'ArrowUp':\n            if (e.altKey) {\n              e.preventDefault();\n              if (open) setOpen(false);\n            }\n            break;\n          case 'ArrowDown':\n            e.preventDefault();\n            if (!open) setOpen(true);\n            break;\n          case 'Escape':\n            e.preventDefault();\n            if (open) e.stopPropagation();\n            setOpen(false);\n            break;\n          default:\n        }\n      },\n      [open, readOnly, menu, value]\n    );\n\n    const onDropdownButtonClick = useCallback(() => {\n      onDropdownButtonClickProp?.(!open);\n      setOpen(!open);\n    }, [open, onDropdownButtonClickProp]);\n\n    const dropdownButton = useMemo(() => {\n      return (menu?.items?.length || onDropdownButtonClickProp || !onChange) && !readOnly ? (\n        <Button\n          aria-label={t(\n            open ? 'combobox_close_list_button_a11y' : 'combobox_open_list_button_a11y'\n          )}\n          icon\n          variant='simple'\n          onClick={onDropdownButtonClick}\n          onMouseDown={(e: MouseEvent) => {\n            e.preventDefault();\n            inputRef.current?.focus();\n          }}\n          disabled={disabled}\n          tabIndex='-1'\n        >\n          <Icon name={open ? 'caret-up' : 'caret-down'} />\n        </Button>\n      ) : null;\n    }, [onDropdownButtonClick, onChange, readOnly, open, disabled]);\n\n    const onInputClick = useCallback(\n      (e: MouseEvent) => {\n        if (readOnly) return;\n        setOpen(true);\n        onClick?.(e);\n      },\n      [readOnly, onClick]\n    );\n\n    useEffect(() => {\n      if (focus && menu && value && value.length > 0) {\n        setOpen(true);\n      }\n    }, [menu, value, focus]);\n\n    // Workaround for the following error from jsx-ast-utils, fixed in version 3.5.0.\n    // The prop value with an expression type of JSXFragment could not be resolved. Please file issue to get this fixed immediately.\n    const inputActions = (\n      <>\n        {dropdownButton}\n        {actions}\n      </>\n    );\n\n    const Comp = (\n      <StyledComboBox ref={containerRef} as={StyledFormControl} id={`${id}-combobox`}>\n        <ComboBoxInput\n          ref={inputRef}\n          role='combobox'\n          aria-haspopup='listbox'\n          aria-expanded={!readOnly && !disabled && open}\n          aria-autocomplete='list'\n          aria-describedby={info ? `${id}-inputDescription ${id}-info` : `${id}-inputDescription`}\n          selected={selected?.items}\n          spellCheck={false}\n          {...{\n            id,\n            readOnly,\n            disabled,\n            onChange,\n            value,\n            mode,\n            status\n          }}\n          actions={inputActions}\n          onRemove={selected?.onRemove}\n          onClick={onInputClick}\n          onKeyDown={onInputKeyDown}\n          required={required}\n          {...restProps}\n        />\n\n        <span id={`${id}-inputDescription`} hidden>\n          {`${t('combobox_open_close')} ` && onChange ? t('combobox_search_instructions') : ''}\n        </span>\n\n        <Popover\n          show={open && menu !== undefined}\n          target={containerRef.current}\n          placement='bottom-start'\n          modifiers={[\n            {\n              name: 'flip',\n              options: {\n                fallbackPlacements: ['top-start']\n              }\n            },\n            sameWidth\n          ]}\n          strategy={isMobile ? 'absolute' : 'fixed'}\n          onMouseDown={(e: MouseEvent) => e.preventDefault()}\n        >\n          {menu && (\n            <Menu\n              ref={menuRef}\n              id={menuComponentId}\n              role='listbox'\n              mode={mode}\n              {...menu}\n              items={menu.items}\n              focusControlEl={inputRef.current || undefined}\n              onItemClick={(itemId, e) => {\n                if (mode === 'single-select') {\n                  setOpen(false);\n                }\n                menu.onItemClick?.(itemId, e);\n\n                const clickedItem = menuHelpers.getItem(menu.items, itemId);\n\n                if (clickedItem?.primary && !clickedItem?.selected) {\n                  selected?.onNew?.(clickedItem?.primary);\n                }\n              }}\n              arrowNavigationUnsupported\n            />\n          )}\n        </Popover>\n      </StyledComboBox>\n    );\n\n    return label ? (\n      <FormField {...{ label, labelHidden, id, info, status, required, disabled }}>\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default ComboBox;\n"]}
+{"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  KeyboardEvent as ReactKeyboardEvent,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\n\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretDownIcon from '../Icon/icons/caret-down.icon';\nimport * as caretUpIcon from '../Icon/icons/caret-up.icon';\nimport { ForwardProps } from '../../types';\nimport {\n  useConsolidatedRef,\n  useFocusWithin,\n  useI18n,\n  useUID,\n  useElement,\n  useDirection\n} from '../../hooks';\nimport Popover from '../Popover';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport Menu, { MenuProps } from '../Menu';\nimport Button from '../Button';\nimport { navigatorIsAvailable } from '../../utils';\nimport menuHelpers from '../Menu/helpers';\nimport { sameWidth } from '../Popover/modifiers';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport ComboBoxInput from './ComboBoxInput';\nimport ComboBoxProps from './ComboBox.types';\nimport { StyledComboBox } from './ComboBox.styles';\n\nregisterIcon(caretDownIcon, caretUpIcon);\n\nconst isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');\n\nconst ComboBox: FunctionComponent<ComboBoxProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ComboBoxProps>, ref: Ref<HTMLDivElement>) => {\n    const uid = useUID();\n    const {\n      additionalInfo,\n      value,\n      required,\n      id = uid,\n      label,\n      labelHidden,\n      info,\n      status,\n      readOnly,\n      disabled,\n      mode = 'single-select',\n      selected,\n      onChange,\n      actions,\n      onFocus,\n      onBlur,\n      onResolveSuggestion,\n      onDropdownButtonClick: onDropdownButtonClickProp,\n      onClick,\n      onKeyDown,\n      menu,\n      ...restProps\n    } = props;\n    const [pauseMenuDescendantEvaluation, setPauseMenuDescendantEvaluation] = useState(true);\n    const [pauseSelectedDescendantEvaluation, setPauseSelectedDescendantEvaluation] =\n      useState(false);\n    const t = useI18n();\n    const listId = `${id}-list`;\n    const inputRef = useRef<HTMLInputElement>(null);\n    const [open, setOpen] = useState(false);\n    const menuRef: MenuProps['ref'] = useRef(null);\n    const menuComponentId = `${id}-listbox`;\n    const { start } = useDirection();\n\n    // Force a re-render to make sure useFocusWithin has valid elements to set listeners on.\n    const [, setContainerEl] = useElement();\n    const containerRef = useConsolidatedRef<HTMLDivElement>(ref, setContainerEl);\n\n    const toggleMenuDescendantsActive = useCallback((bool: boolean) => {\n      setPauseMenuDescendantEvaluation(!bool);\n      setPauseSelectedDescendantEvaluation(bool);\n    }, []);\n\n    const toggleSelectedDescendantsActive = useCallback((bool: boolean) => {\n      setPauseSelectedDescendantEvaluation(!bool);\n      setPauseMenuDescendantEvaluation(bool);\n    }, []);\n\n    const focus = useFocusWithin([containerRef], focused => {\n      if (!focused) {\n        setOpen(false);\n        toggleMenuDescendantsActive(false);\n        onBlur?.(selected?.items);\n      } else {\n        onFocus?.(selected?.items);\n        if (isMobile) {\n          setTimeout(() => {\n            containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n          }, 150); // delay it to let keyboard expand first\n        }\n      }\n    });\n\n    const onInputKeyDown = useCallback(\n      (e: ReactKeyboardEvent<HTMLInputElement>) => {\n        if (!menu || readOnly) return;\n        if (onKeyDown?.(e) === false) {\n          return;\n        }\n\n        switch (e.key) {\n          case 'ArrowUp':\n            if (e.altKey) {\n              e.preventDefault();\n              if (open) {\n                setOpen(false);\n                toggleMenuDescendantsActive(false);\n              }\n            }\n            break;\n          case 'ArrowDown':\n            e.preventDefault();\n            if (!open) {\n              setOpen(true);\n              toggleMenuDescendantsActive(true);\n            }\n            break;\n          case 'Escape':\n          case 'Tab':\n            if (e.key === 'Escape') {\n              e.preventDefault();\n              if (open) e.stopPropagation();\n            }\n            setOpen(false);\n            toggleMenuDescendantsActive(false);\n            break;\n          default:\n        }\n      },\n      [open, readOnly, menu, value, onKeyDown]\n    );\n\n    const onDropdownButtonClick = useCallback(() => {\n      onDropdownButtonClickProp?.(!open);\n      setOpen(!open);\n    }, [open, onDropdownButtonClickProp]);\n\n    const dropdownButton = useMemo(() => {\n      return (menu?.items?.length || onDropdownButtonClickProp || !onChange) && !readOnly ? (\n        <Button\n          aria-label={t(\n            open ? 'combobox_close_list_button_a11y' : 'combobox_open_list_button_a11y'\n          )}\n          icon\n          variant='simple'\n          onClick={onDropdownButtonClick}\n          onMouseDown={(e: MouseEvent) => {\n            e.preventDefault();\n            inputRef.current?.focus();\n          }}\n          disabled={disabled}\n          tabIndex='-1'\n        >\n          <Icon name={open ? 'caret-up' : 'caret-down'} />\n        </Button>\n      ) : null;\n    }, [onDropdownButtonClick, onChange, readOnly, open, disabled]);\n\n    const ariaDescribedBy = useMemo(() => {\n      let idString = `${id}-inputDescription`;\n\n      if (info) {\n        idString = idString.concat(` ${id}-info`);\n      }\n      if (onChange) {\n        idString = idString.concat(` ${id}-searchDescription`);\n      }\n      if (mode === 'multi-select') {\n        idString = idString.concat(` ${id}-multiselectDescription`);\n      }\n\n      return idString;\n    }, [info, id, mode, onChange]);\n\n    const onInputClick = useCallback(\n      (e: MouseEvent) => {\n        if (readOnly) return;\n        setOpen(true);\n        toggleMenuDescendantsActive(true);\n        onClick?.(e);\n      },\n      [readOnly, onClick]\n    );\n\n    useEffect(() => {\n      if (focus && menu && value && value.length > 0) {\n        setOpen(true);\n        toggleMenuDescendantsActive(true);\n      }\n    }, [menu, value, focus]);\n\n    // Workaround for the following error from jsx-ast-utils, fixed in version 3.5.0.\n    // The prop value with an expression type of JSXFragment could not be resolved. Please file issue to get this fixed immediately.\n    const inputActions = (\n      <>\n        {dropdownButton}\n        {actions}\n      </>\n    );\n\n    const Comp = (\n      <StyledComboBox\n        ref={containerRef}\n        as={StyledFormControl}\n        id={`${id}-combobox`}\n        role='combobox'\n        aria-haspopup='listbox'\n        aria-expanded={!readOnly && !disabled && open}\n        aria-owns={\n          open && menu !== undefined && !pauseMenuDescendantEvaluation ? listId : undefined\n        }\n      >\n        <ComboBoxInput\n          ref={inputRef}\n          role='searchbox'\n          aria-autocomplete='list'\n          aria-controls={\n            open && menu !== undefined && !pauseMenuDescendantEvaluation ? listId : undefined\n          }\n          aria-describedby={ariaDescribedBy}\n          selected={selected?.items}\n          spellCheck={false}\n          {...{\n            id,\n            readOnly,\n            disabled,\n            onChange,\n            value,\n            mode,\n            status\n          }}\n          actions={inputActions}\n          onRemove={selected?.onRemove}\n          onClick={onInputClick}\n          onKeyDown={onInputKeyDown}\n          required={required}\n          pauseDescendantEvaluation={pauseSelectedDescendantEvaluation}\n          onSelectedFocus={() => {\n            toggleSelectedDescendantsActive(true);\n          }}\n          onSelectedBlur={() => {\n            toggleSelectedDescendantsActive(false);\n          }}\n          {...restProps}\n        />\n\n        <Popover\n          show={open && menu !== undefined}\n          target={containerRef.current}\n          placement='bottom-start'\n          modifiers={[\n            {\n              name: 'flip',\n              options: {\n                fallbackPlacements: ['top-start']\n              }\n            },\n            sameWidth\n          ]}\n          strategy={isMobile ? 'absolute' : 'fixed'}\n          onMouseDown={(e: MouseEvent) => e.preventDefault()}\n        >\n          {menu && (\n            <Menu\n              ref={menuRef}\n              listId={listId}\n              id={menuComponentId}\n              role='listbox'\n              mode={mode}\n              {...menu}\n              items={menu.items}\n              focusControlEl={inputRef.current || undefined}\n              onItemClick={(itemId, e) => {\n                if (mode === 'single-select') {\n                  setOpen(false);\n                  toggleMenuDescendantsActive(true);\n                }\n                menu.onItemClick?.(itemId, e);\n\n                const clickedItem = menuHelpers.getItem(menu.items, itemId);\n\n                if (clickedItem?.primary && !clickedItem?.selected) {\n                  selected?.onNew?.(clickedItem?.primary);\n                }\n              }}\n              aria-label={t('menu_option_list')}\n              pauseDescendantEvaluation={pauseMenuDescendantEvaluation}\n              arrowNavigationUnsupported\n            />\n          )}\n        </Popover>\n      </StyledComboBox>\n    );\n\n    return (\n      <>\n        {label ? (\n          <FormField\n            {...{\n              label,\n              labelHidden,\n              id,\n              info,\n              status,\n              required,\n              disabled,\n              onResolveSuggestion,\n              additionalInfo\n            }}\n          >\n            {Comp}\n          </FormField>\n        ) : (\n          Comp\n        )}\n        <VisuallyHiddenText id={`${id}-inputDescription`} aria-hidden>\n          {`${t('combobox_open_close')} `}\n        </VisuallyHiddenText>\n        <VisuallyHiddenText id={`${id}-searchDescription`} aria-hidden>\n          {t('combobox_search_instructions')}\n        </VisuallyHiddenText>\n        <VisuallyHiddenText id={`${id}-multiselectDescription`} aria-hidden>\n          {t('multiselect_instructions', [start])}\n        </VisuallyHiddenText>\n      </>\n    );\n  }\n);\n\nexport default ComboBox;\n"]}

package/lib/components/ComboBox/ComboBox.styles.d.ts

@@ -1,3 +1,5 @@
 export declare const StyledSelectInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledComboBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../..").OmitStrict<import("../FormControl").FormControlProps, never> & Required<Pick<import("../FormControl").FormControlProps, never>>, never>;
+export declare const StyledComboBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../..").OmitStrict<import("../FormControl").FormControlProps, never> & Required<Pick<import("../FormControl").FormControlProps, never>> & {
+    hasSuggestion?: boolean | undefined;
+}, never>;
 //# sourceMappingURL=ComboBox.styles.d.ts.map

package/lib/components/ComboBox/ComboBox.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,iBAAiB,yGAmD5B,CAAC;AAIH,eAAO,MAAM,cAAc,sPASzB,CAAC"}
+{"version":3,"file":"ComboBox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,iBAAiB,yGAmD5B,CAAC;AAIH,eAAO,MAAM,cAAc;;SASzB,CAAC"}