@pega/cosmos-react-core 4.0.0-dev.2.0 → 4.0.0-dev.21.0

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -20,15 +20,14 @@ const StyledSeparator = styled(Icon)(({ theme }) => {
     color: ${color};
   `;
 });
-export const StyledBreadcrumbs = styled.div(({ theme, oneItemRemaining }) => css `
+export const StyledBreadcrumbs = styled.div(({ theme, oneItemRemaining, fixedLength }) => css `
     white-space: nowrap;
     overflow: visible;
-    visibility: hidden;
+    visibility: ${fixedLength ? undefined : 'hidden'};
 
     ${StyledIcon} {
       width: 1em;
       height: 1em;
-      flex-shrink: 0;
     }
 
     ${StyledLink},
@@ -60,46 +59,56 @@ const StyledEllipsizedButton = styled(Button)(getEllipsisStyles);
 StyledEllipsizedButton.defaultProps = defaultThemeProp;
 const StyledEllipsizedText = styled(Text)(getEllipsisStyles);
 StyledEllipsizedText.defaultProps = defaultThemeProp;
-const Breadcrumbs = forwardRef(({ path, ...restProps }, ref) => {
+const Breadcrumbs = forwardRef(({ path, leafOnly = false, ...restProps }, ref) => {
     const [breadcrumbsEl, setBreadcrumbsEl] = useElement();
-    const [numMenuItems, setNumMenuItems] = useState(0);
+    const [numMenuItems, setNumMenuItems] = useState(leafOnly ? Math.max(path.length - 1, 0) : 0);
     const minInlineWidth = useRef(0);
     const breadcrumbRef = useConsolidatedRef(setBreadcrumbsEl, ref);
-    const debouncedResize = debounce((entries) => {
-        if (entries[0].contentRect.width > minInlineWidth.current) {
-            setNumMenuItems(curr => {
-                if (curr === 0)
-                    return curr;
-                return curr - 1;
-            });
+    // Update menu based on length
+    useEffect(() => {
+        if (leafOnly) {
+            setNumMenuItems(Math.max(path.length - 1, 0));
         }
-    }, 100);
-    const resizeObserver = new ResizeObserver(debouncedResize);
-    const intersectionObserver = new IntersectionObserver(entries => {
-        if (entries[0].intersectionRatio < 1 && numMenuItems < path.length - 1) {
-            if (entries[0].rootBounds)
-                minInlineWidth.current = entries[0].rootBounds.width + 1;
-            setNumMenuItems(curr => {
-                if (curr === path.length - 1)
-                    return curr;
-                return curr + 1;
-            });
+        else {
+            setNumMenuItems(0);
         }
-        else if (breadcrumbsEl)
-            breadcrumbsEl.style.visibility = 'visible';
-    }, { root: breadcrumbsEl, threshold: 1 });
+    }, [path, leafOnly]);
+    // Manage Observers
     useEffect(() => {
-        if (breadcrumbsEl && breadcrumbsEl.lastChild) {
+        const debouncedResize = debounce((entries) => {
+            if (entries[0].contentRect.width > minInlineWidth.current) {
+                setNumMenuItems(curr => {
+                    if (curr === 0)
+                        return curr;
+                    return curr - 1;
+                });
+            }
+        }, 100);
+        const resizeObserver = new ResizeObserver(debouncedResize);
+        const intersectionObserver = new IntersectionObserver(entries => {
+            if (entries[0].intersectionRatio < 1 && numMenuItems < path.length - 1) {
+                if (entries[0].rootBounds)
+                    minInlineWidth.current = entries[0].rootBounds.width + 1;
+                setNumMenuItems(curr => {
+                    if (curr === path.length - 1)
+                        return curr;
+                    return curr + 1;
+                });
+            }
+            else if (breadcrumbsEl)
+                breadcrumbsEl.style.visibility = 'visible';
+        }, { root: breadcrumbsEl, threshold: 1 });
+        if (!leafOnly && breadcrumbsEl && breadcrumbsEl.lastChild) {
             intersectionObserver.observe(breadcrumbsEl.lastChild);
             resizeObserver.observe(breadcrumbsEl);
-            return () => {
-                intersectionObserver.disconnect();
-                resizeObserver.disconnect();
-            };
         }
-    }, [breadcrumbsEl, numMenuItems]);
+        return () => {
+            intersectionObserver.disconnect();
+            resizeObserver.disconnect();
+        };
+    }, [breadcrumbsEl, numMenuItems, leafOnly]);
     const { end } = useDirection();
-    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) => {
+    return (_jsxs(Flex, { ...restProps, container: { gap: 0.5, alignItems: 'center' }, as: StyledBreadcrumbs, oneItemRemaining: numMenuItems === path.length - 1, fixedLength: leafOnly, 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 (href)

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  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"]}
+{"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  /**\n   * Renders only the leaf node outside the menu list.\n   * @default false\n   * Note: Disables variable length on resize.\n   */\n  leafOnly?: boolean;\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; fixedLength: boolean }>(\n  ({ theme, oneItemRemaining, fixedLength }) => css`\n    white-space: nowrap;\n    overflow: visible;\n    visibility: ${fixedLength ? undefined : 'hidden'};\n\n    ${StyledIcon} {\n      width: 1em;\n      height: 1em;\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  (\n    { path, leafOnly = false, ...restProps }: PropsWithoutRef<BreadcrumbsProps>,\n    ref: BreadcrumbsProps['ref']\n  ) => {\n    const [breadcrumbsEl, setBreadcrumbsEl] = useElement<HTMLDivElement>();\n    const [numMenuItems, setNumMenuItems] = useState(leafOnly ? Math.max(path.length - 1, 0) : 0);\n    const minInlineWidth = useRef(0);\n\n    const breadcrumbRef = useConsolidatedRef(setBreadcrumbsEl, ref);\n\n    // Update menu based on length\n    useEffect(() => {\n      if (leafOnly) {\n        setNumMenuItems(Math.max(path.length - 1, 0));\n      } else {\n        setNumMenuItems(0);\n      }\n    }, [path, leafOnly]);\n\n    // Manage Observers\n    useEffect(() => {\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      if (!leafOnly && breadcrumbsEl && breadcrumbsEl.lastChild) {\n        intersectionObserver.observe(breadcrumbsEl.lastChild as Element);\n        resizeObserver.observe(breadcrumbsEl);\n      }\n\n      return () => {\n        intersectionObserver.disconnect();\n        resizeObserver.disconnect();\n      };\n    }, [breadcrumbsEl, numMenuItems, leafOnly]);\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        fixedLength={leafOnly}\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/Breadcrumbs/index.d.ts

@@ -1,4 +1,3 @@
-export { default } from './Breadcrumbs';
-export { BreadcrumbsProps } from './Breadcrumbs';
-export { StyledBreadcrumbs } from './Breadcrumbs';
+export { default, StyledBreadcrumbs } from './Breadcrumbs';
+export type { BreadcrumbsProps } from './Breadcrumbs';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Breadcrumbs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAC3D,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

package/lib/components/Breadcrumbs/index.js

@@ -1,3 +1,2 @@
-export { default } from './Breadcrumbs';
-export { StyledBreadcrumbs } from './Breadcrumbs';
+export { default, StyledBreadcrumbs } from './Breadcrumbs';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { default } from './Breadcrumbs';\nexport { BreadcrumbsProps } from './Breadcrumbs';\nexport { StyledBreadcrumbs } from './Breadcrumbs';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { default, StyledBreadcrumbs } from './Breadcrumbs';\nexport type { BreadcrumbsProps } from './Breadcrumbs';\n"]}

package/lib/components/Button/BareButton.d.ts

@@ -13,7 +13,7 @@ export interface BareButtonProps extends BaseProps {
     href?: ButtonProps['href'];
     /**
      * Controls the behavior of a Button within a Form.
-     * @default "button"
+     * @default 'button'
      */
     type?: ButtonProps['type'];
     /** Ref forwarded to the wrapping element. */

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

@@ -1 +1 @@
-{"version":3,"file":"BareButton.js","sourceRoot":"","sources":["../../../src/components/Button/BareButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,MAAM,EAMN,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAuBjD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;;2BASlB,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;CAE3D,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CACE,EACE,IAAI,GAAG,QAAQ,EACf,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,GAAG,SAAS,EACoC,EAClD,GAA2B,EAC3B,EAAE;IACF,MAAM,cAAc,GAAG,MAAM,EAAc,CAAC;IAC5C,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC;QACrC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,gBAAgB,IACf,GAAG,EAAE,SAAS,EACd,EAAE,EAAE,IAAI,CAAC,CAAC,CAAE,GAAW,CAAC,CAAC,CAAC,SAAS,EACnC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAC7B,QAAQ,EAAE,QAAQ,KACd,SAAS,EACb,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,CAAC,CAAoD,EAAE,EAAE;YACnE,SAAS,CAAC,WAA6C,EAAE,CAAC,CAAC,CAAC,CAAC;YAC9D,CAAC,CAAC,OAAO,EAAE,CAAC;YACZ,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC;QAC7B,CAAC,EACD,SAAS,EAAE,CAAC,CAAoD,EAAE,EAAE;YAClE,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,gBAAgB,CAAC;YACvF,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC;YAEnC,IAAI,WAAW,IAAI,SAAS,CAAC,OAAO,KAAK,QAAQ,CAAC,aAAa,EAAE;gBAC/D,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;aAC5B;YAED,OAAQ,SAAS,CAAC,SAA2C,EAAE,CAAC,CAAC,CAAC,CAAC;QACrE,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import {\n  forwardRef,\n  useRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  MouseEvent,\n  MouseEventHandler,\n  useEffect\n} from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { useConsolidatedRef } from '../../hooks';\n\nimport { ButtonProps } from './Button';\n\nexport interface BareButtonProps extends BaseProps {\n  /** Text or content for the Button. */\n  children: ButtonProps['children'];\n  /**\n   * Determines if the Button will be disabled.\n   * @default false\n   */\n  disabled?: ButtonProps['disabled'];\n  /** A location to navigate to. Passing an href will render a Link styled as a Button. */\n  href?: ButtonProps['href'];\n  /**\n   * Controls the behavior of a Button within a Form.\n   * @default \"button\"\n   */\n  type?: ButtonProps['type'];\n  /** Ref forwarded to the wrapping element. */\n  ref?: ButtonProps['ref'];\n}\n\nexport const StyledBareButton = styled.button`\n  background: none;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  user-select: none;\n  color: inherit;\n\n  & + & {\n    margin-inline-start: ${props => props.theme.base.spacing};\n  }\n`;\n\nStyledBareButton.defaultProps = defaultThemeProp;\n\nconst BareButton: FunctionComponent<BareButtonProps & ForwardProps> = forwardRef(\n  (\n    {\n      type = 'button',\n      disabled = false,\n      href,\n      ...restProps\n    }: PropsWithoutRef<BareButtonProps> & ForwardProps,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    const mouseDownEvent = useRef<MouseEvent>();\n    const buttonRef = useConsolidatedRef(ref);\n\n    useEffect(() => {\n      return () => {\n        mouseDownEvent.current = undefined;\n      };\n    }, []);\n\n    return (\n      <StyledBareButton\n        ref={buttonRef}\n        as={href ? ('a' as any) : undefined}\n        type={href ? undefined : type}\n        disabled={disabled}\n        {...restProps}\n        href={href}\n        onMouseDown={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          (restProps.onMouseDown as MouseEventHandler | undefined)?.(e);\n          e.persist();\n          mouseDownEvent.current = e;\n        }}\n        onMouseUp={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          const shouldFocus = mouseDownEvent.current && !mouseDownEvent.current.defaultPrevented;\n          mouseDownEvent.current = undefined;\n\n          if (shouldFocus && buttonRef.current !== document.activeElement) {\n            buttonRef.current?.focus();\n          }\n\n          return (restProps.onMouseUp as MouseEventHandler | undefined)?.(e);\n        }}\n      />\n    );\n  }\n);\n\nexport default BareButton;\n"]}
+{"version":3,"file":"BareButton.js","sourceRoot":"","sources":["../../../src/components/Button/BareButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,MAAM,EAMN,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAuBjD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;;2BASlB,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;CAE3D,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CACE,EACE,IAAI,GAAG,QAAQ,EACf,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,GAAG,SAAS,EACoC,EAClD,GAA2B,EAC3B,EAAE;IACF,MAAM,cAAc,GAAG,MAAM,EAAc,CAAC;IAC5C,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC;QACrC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,gBAAgB,IACf,GAAG,EAAE,SAAS,EACd,EAAE,EAAE,IAAI,CAAC,CAAC,CAAE,GAAW,CAAC,CAAC,CAAC,SAAS,EACnC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAC7B,QAAQ,EAAE,QAAQ,KACd,SAAS,EACb,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,CAAC,CAAoD,EAAE,EAAE;YACnE,SAAS,CAAC,WAA6C,EAAE,CAAC,CAAC,CAAC,CAAC;YAC9D,CAAC,CAAC,OAAO,EAAE,CAAC;YACZ,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC;QAC7B,CAAC,EACD,SAAS,EAAE,CAAC,CAAoD,EAAE,EAAE;YAClE,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,gBAAgB,CAAC;YACvF,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC;YAEnC,IAAI,WAAW,IAAI,SAAS,CAAC,OAAO,KAAK,QAAQ,CAAC,aAAa,EAAE;gBAC/D,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;aAC5B;YAED,OAAQ,SAAS,CAAC,SAA2C,EAAE,CAAC,CAAC,CAAC,CAAC;QACrE,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import {\n  forwardRef,\n  useRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  MouseEvent,\n  MouseEventHandler,\n  useEffect\n} from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { useConsolidatedRef } from '../../hooks';\n\nimport { ButtonProps } from './Button';\n\nexport interface BareButtonProps extends BaseProps {\n  /** Text or content for the Button. */\n  children: ButtonProps['children'];\n  /**\n   * Determines if the Button will be disabled.\n   * @default false\n   */\n  disabled?: ButtonProps['disabled'];\n  /** A location to navigate to. Passing an href will render a Link styled as a Button. */\n  href?: ButtonProps['href'];\n  /**\n   * Controls the behavior of a Button within a Form.\n   * @default 'button'\n   */\n  type?: ButtonProps['type'];\n  /** Ref forwarded to the wrapping element. */\n  ref?: ButtonProps['ref'];\n}\n\nexport const StyledBareButton = styled.button`\n  background: none;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  user-select: none;\n  color: inherit;\n\n  & + & {\n    margin-inline-start: ${props => props.theme.base.spacing};\n  }\n`;\n\nStyledBareButton.defaultProps = defaultThemeProp;\n\nconst BareButton: FunctionComponent<BareButtonProps & ForwardProps> = forwardRef(\n  (\n    {\n      type = 'button',\n      disabled = false,\n      href,\n      ...restProps\n    }: PropsWithoutRef<BareButtonProps> & ForwardProps,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    const mouseDownEvent = useRef<MouseEvent>();\n    const buttonRef = useConsolidatedRef(ref);\n\n    useEffect(() => {\n      return () => {\n        mouseDownEvent.current = undefined;\n      };\n    }, []);\n\n    return (\n      <StyledBareButton\n        ref={buttonRef}\n        as={href ? ('a' as any) : undefined}\n        type={href ? undefined : type}\n        disabled={disabled}\n        {...restProps}\n        href={href}\n        onMouseDown={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          (restProps.onMouseDown as MouseEventHandler | undefined)?.(e);\n          e.persist();\n          mouseDownEvent.current = e;\n        }}\n        onMouseUp={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          const shouldFocus = mouseDownEvent.current && !mouseDownEvent.current.defaultPrevented;\n          mouseDownEvent.current = undefined;\n\n          if (shouldFocus && buttonRef.current !== document.activeElement) {\n            buttonRef.current?.focus();\n          }\n\n          return (restProps.onMouseUp as MouseEventHandler | undefined)?.(e);\n        }}\n      />\n    );\n  }\n);\n\nexport default BareButton;\n"]}

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

@@ -1,4 +1,5 @@
 import { FunctionComponent, ReactNode, Ref } from 'react';
+import { DefaultTheme } from 'styled-components';
 import { BaseProps, ForwardProps, PropsWithDefaults, AsProp } from '../../types';
 export interface ButtonProps extends BaseProps, AsProp {
     /** Text or content for the Button. */
@@ -12,12 +13,12 @@ export interface ButtonProps extends BaseProps, AsProp {
     href?: string;
     /**
      * Controls the styling of the Button.
-     * @default "secondary"
+     * @default 'secondary'
      */
     variant?: 'primary' | 'secondary' | 'simple' | 'link' | 'text';
     /**
      * Controls the behavior of a Button within a Form.
-     * @default "button"
+     * @default 'button'
      */
     type?: 'button' | 'reset' | 'submit';
     /**
@@ -30,13 +31,9 @@ export interface ButtonProps extends BaseProps, AsProp {
      * @default false
      */
     compact?: boolean;
-    /**
-     * The label text will be used inside a Tooltip.
-     */
+    /** The label text will be used inside a Tooltip. */
     label?: string;
-    /**
-     * The aria label text will be inserted as the aria-label on the Button.
-     */
+    /** The aria label text will be inserted as the aria-label on the Button. */
     'aria-label'?: string;
     /**
      * Optionally renders an indeterminate progress indicator in a button.
@@ -46,8 +43,9 @@ export interface ButtonProps extends BaseProps, AsProp {
     /** Ref forwarded to the wrapping element. */
     ref?: Ref<HTMLButtonElement>;
 }
-declare type ButtonPropsWithDefaults = PropsWithDefaults<ButtonProps, 'variant' | 'type' | 'disabled' | 'icon' | 'loading'>;
-export declare const StyledButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, ButtonPropsWithDefaults, never>;
+type ButtonPropsWithDefaults = PropsWithDefaults<ButtonProps, 'variant' | 'type' | 'disabled' | 'icon' | 'loading'>;
+export declare const StyledButton: import("styled-components").StyledComponent<"button", DefaultTheme, ButtonPropsWithDefaults, never>;
+export declare const StyledButtonLink: import("styled-components").StyledComponent<"a", DefaultTheme, ButtonPropsWithDefaults, never>;
 declare const Button: FunctionComponent<ButtonProps & ForwardProps>;
 export default Button;
 //# sourceMappingURL=Button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,iBAAiB,EACjB,SAAS,EAET,GAAG,EAGJ,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAWjF,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,MAAM;IACpD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC/D;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IACrC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,aAAK,uBAAuB,GAAG,iBAAiB,CAC9C,WAAW,EACX,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CACrD,CAAC;AAEF,eAAO,MAAM,YAAY,iIA2NxB,CAAC;AAIF,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAwEzD,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,iBAAiB,EACjB,SAAS,EAET,GAAG,EAGJ,MAAM,OAAO,CAAC;AACf,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG9D,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAWjF,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,MAAM;IACpD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC/D;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IACrC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,KAAK,uBAAuB,GAAG,iBAAiB,CAC9C,WAAW,EACX,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CACrD,CAAC;AAgDF,eAAO,MAAM,YAAY,qGA0LxB,CAAC;AAIF,eAAO,MAAM,gBAAgB,gGA6C5B,CAAC;AAIF,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CA2EzD,CAAC;AAEF,eAAe,MAAM,CAAC"}