@pega/cosmos-react-core 9.0.0-build.9.8 → 9.0.0

package/lib/components/ExpandCollapse/ExpandCollapseButton.d.ts

@@ -0,0 +1,32 @@
+import type { NoChildrenProp, WithAttributes, HeadingTag } from '../../types';
+import type { ButtonProps } from '../Button';
+import type { CountProps } from '../Badges/Count';
+export type ExpandCollapseButtonProps = WithAttributes<'button', NoChildrenProp & Pick<ButtonProps, 'compact'> & {
+    /** Indicates whether the content is expanded. */
+    expanded: boolean;
+    /** Callback function triggered when the button is toggled. */
+    onToggle: () => void;
+    /**
+     * Label for the button. Can be a string or an object containing text and a heading tag.
+     */
+    label?: string | {
+        text: string;
+        headingTag: HeadingTag;
+    };
+    /**
+     * If true, only the icon is displayed. Tooltip will always show "Expand" or "Collapse".
+     * @default false
+     */
+    iconOnly?: boolean;
+    /** Optional count to display next to the label. Only available when iconOnly is false. */
+    count?: CountProps['children'] | CountProps;
+}>;
+export declare const StyledExpandCollapseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement> & import("../../types").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
+}, {
+    $iconOnly?: boolean;
+    $headingTag?: HeadingTag;
+}>> & string & Omit<import("../../types").ForwardRefForwardPropsComponent<ButtonProps>, keyof import("react").Component<any, {}, any>>;
+declare const _default: import("react").ForwardRefExoticComponent<Omit<ExpandCollapseButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export default _default;
+//# sourceMappingURL=ExpandCollapseButton.d.ts.map

package/lib/components/ExpandCollapse/ExpandCollapseButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandCollapseButton.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/ExpandCollapseButton.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAc,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM1F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAM7C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAIlD,MAAM,MAAM,yBAAyB,GAAG,cAAc,CACpD,QAAQ,EACR,cAAc,GACZ,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG;IAC7B,iDAAiD;IACjD,QAAQ,EAAE,OAAO,CAAC;IAElB,8DAA8D;IAC9D,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,UAAU,CAAA;KAAE,CAAC;IAE1D;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0FAA0F;IAC1F,KAAK,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,GAAG,UAAU,CAAC;CAC7C,CACJ,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;gBACzB,OAAO;kBACL,UAAU;sIAyBxB,CAAC;;AAIH,wBA+EG"}

package/lib/components/ExpandCollapse/ExpandCollapseButton.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { defaultThemeProp } from '../../theme';
+import { useDirection, useI18n, useUID } from '../../hooks';
+import HiddenText from '../HiddenText';
+import { calculateFontSize } from '../../styles';
+import Button from '../Button';
+import Flex from '../Flex';
+import Icon, { StyledIcon, registerIcon } from '../Icon';
+import * as caretRightIcon from '../Icon/icons/caret-right.icon';
+import Text from '../Text';
+import Count from '../Badges/Count';
+registerIcon(caretRightIcon);
+export const StyledExpandCollapseButton = styled(Button)(({ $iconOnly, $headingTag, theme }) => {
+    const { rtl } = useDirection();
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    ${!$iconOnly &&
+        css `
+      font-size: ${fontSize[theme.components.text[$headingTag ?? 'primary']['font-size']]};
+    `}
+
+    ${StyledIcon} {
+      transition: transform ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
+    }
+
+    &[aria-expanded='true'] ${StyledIcon} {
+      transform: rotate(90deg);
+    }
+
+    &[aria-expanded='false'] ${StyledIcon} {
+      transform: rotate(${rtl ? 180 : 0}deg);
+    }
+  `;
+});
+StyledExpandCollapseButton.defaultProps = defaultThemeProp;
+export default forwardRef(function ExpandCollapseButton({ expanded, onToggle, label, iconOnly = false, count, compact, 'aria-labelledby': labelledBy, ...restProps }, ref) {
+    const t = useI18n();
+    const hiddenTextId = useUID();
+    const toggleText = expanded ? t('collapse') : t('expand');
+    let ariaLabel;
+    let ariaLabelledBy;
+    if (labelledBy && !label) {
+        ariaLabelledBy = `${hiddenTextId} ${labelledBy}`;
+    }
+    else if (iconOnly) {
+        if (label) {
+            const labelText = typeof label === 'string' ? label : label.text;
+            ariaLabel = `${toggleText} - ${labelText}`;
+        }
+        else {
+            ariaLabel = toggleText;
+        }
+    }
+    const tooltipText = iconOnly ? toggleText : undefined;
+    let renderedLabel;
+    let headingTag;
+    if (iconOnly || !label) {
+        renderedLabel = null;
+    }
+    else if (typeof label === 'string') {
+        renderedLabel = _jsx("span", { children: label });
+    }
+    else {
+        renderedLabel = _jsx(Text, { variant: label.headingTag, children: label.text });
+        headingTag = label.headingTag;
+    }
+    let renderedCount;
+    if (iconOnly || count === undefined) {
+        renderedCount = null;
+    }
+    else if (typeof count === 'number' || count === null) {
+        renderedCount = _jsx(Count, { children: count });
+    }
+    else {
+        renderedCount = _jsx(Count, { ...count });
+    }
+    return (_jsxs(StyledExpandCollapseButton, { ...restProps, ref: ref, onClick: onToggle, "aria-expanded": expanded, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, label: tooltipText, icon: iconOnly, compact: compact, variant: iconOnly ? 'simple' : 'text', "$iconOnly": iconOnly, "$headingTag": headingTag, children: [labelledBy && !label && _jsx(HiddenText, { id: hiddenTextId, children: `${toggleText} - ` }), _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, as: 'span', children: [_jsx(Icon, { name: 'caret-right', size: !iconOnly ? 'font-size' : undefined }), renderedLabel, renderedCount] })] }));
+});
+//# sourceMappingURL=ExpandCollapseButton.js.map

package/lib/components/ExpandCollapse/ExpandCollapseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandCollapseButton.js","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/ExpandCollapseButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { NoChildrenProp, RefElement, WithAttributes, HeadingTag } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport HiddenText from '../HiddenText';\nimport { calculateFontSize, type FontSize } from '../../styles';\nimport Button from '../Button';\nimport type { ButtonProps } from '../Button';\nimport Flex from '../Flex';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Text from '../Text';\nimport Count from '../Badges/Count';\nimport type { CountProps } from '../Badges/Count';\n\nregisterIcon(caretRightIcon);\n\nexport type ExpandCollapseButtonProps = WithAttributes<\n  'button',\n  NoChildrenProp &\n    Pick<ButtonProps, 'compact'> & {\n      /** Indicates whether the content is expanded. */\n      expanded: boolean;\n\n      /** Callback function triggered when the button is toggled. */\n      onToggle: () => void;\n\n      /**\n       * Label for the button. Can be a string or an object containing text and a heading tag.\n       */\n      label?: string | { text: string; headingTag: HeadingTag };\n\n      /**\n       * If true, only the icon is displayed. Tooltip will always show \"Expand\" or \"Collapse\".\n       * @default false\n       */\n      iconOnly?: boolean;\n\n      /** Optional count to display next to the label. Only available when iconOnly is false. */\n      count?: CountProps['children'] | CountProps;\n    }\n>;\n\nexport const StyledExpandCollapseButton = styled(Button)<{\n  $iconOnly?: boolean;\n  $headingTag?: HeadingTag;\n}>(({ $iconOnly, $headingTag, theme }) => {\n  const { rtl } = useDirection();\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    ${!$iconOnly &&\n    css`\n      font-size: ${fontSize[\n        theme.components.text[$headingTag ?? 'primary']['font-size'] as FontSize\n      ]};\n    `}\n\n    ${StyledIcon} {\n      transition: transform ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n    }\n\n    &[aria-expanded='true'] ${StyledIcon} {\n      transform: rotate(90deg);\n    }\n\n    &[aria-expanded='false'] ${StyledIcon} {\n      transform: rotate(${rtl ? 180 : 0}deg);\n    }\n  `;\n});\n\nStyledExpandCollapseButton.defaultProps = defaultThemeProp;\n\nexport default forwardRef<\n  RefElement<ExpandCollapseButtonProps>,\n  PropsWithoutRef<ExpandCollapseButtonProps>\n>(function ExpandCollapseButton(\n  {\n    expanded,\n    onToggle,\n    label,\n    iconOnly = false,\n    count,\n    compact,\n    'aria-labelledby': labelledBy,\n    ...restProps\n  },\n  ref\n) {\n  const t = useI18n();\n  const hiddenTextId = useUID();\n  const toggleText = expanded ? t('collapse') : t('expand');\n\n  let ariaLabel: string | undefined;\n  let ariaLabelledBy: string | undefined;\n\n  if (labelledBy && !label) {\n    ariaLabelledBy = `${hiddenTextId} ${labelledBy}`;\n  } else if (iconOnly) {\n    if (label) {\n      const labelText = typeof label === 'string' ? label : label.text;\n      ariaLabel = `${toggleText} - ${labelText}`;\n    } else {\n      ariaLabel = toggleText;\n    }\n  }\n\n  const tooltipText = iconOnly ? toggleText : undefined;\n\n  let renderedLabel: ReactNode;\n  let headingTag: HeadingTag | undefined;\n  if (iconOnly || !label) {\n    renderedLabel = null;\n  } else if (typeof label === 'string') {\n    renderedLabel = <span>{label}</span>;\n  } else {\n    renderedLabel = <Text variant={label.headingTag}>{label.text}</Text>;\n    headingTag = label.headingTag;\n  }\n\n  let renderedCount: ReactNode;\n  if (iconOnly || count === undefined) {\n    renderedCount = null;\n  } else if (typeof count === 'number' || count === null) {\n    renderedCount = <Count>{count}</Count>;\n  } else {\n    renderedCount = <Count {...count} />;\n  }\n\n  return (\n    <StyledExpandCollapseButton\n      {...restProps}\n      ref={ref}\n      onClick={onToggle}\n      aria-expanded={expanded}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      label={tooltipText}\n      icon={iconOnly}\n      compact={compact}\n      variant={iconOnly ? 'simple' : 'text'}\n      $iconOnly={iconOnly}\n      $headingTag={headingTag}\n    >\n      {labelledBy && !label && <HiddenText id={hiddenTextId}>{`${toggleText} - `}</HiddenText>}\n      <Flex container={{ alignItems: 'center', gap: 1 }} as='span'>\n        <Icon name='caret-right' size={!iconOnly ? 'font-size' : undefined} />\n        {renderedLabel}\n        {renderedCount}\n      </Flex>\n    </StyledExpandCollapseButton>\n  );\n});\n"]}

package/lib/components/ExpandCollapse/index.d.ts

@@ -1,3 +1,5 @@
 export { default } from './ExpandCollapse';
 export type { ExpandCollapseProps } from './ExpandCollapse';
+export { default as ExpandCollapseButton, StyledExpandCollapseButton } from './ExpandCollapseButton';
+export type { ExpandCollapseButtonProps } from './ExpandCollapseButton';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EACL,OAAO,IAAI,oBAAoB,EAC/B,0BAA0B,EAC3B,MAAM,wBAAwB,CAAC;AAChC,YAAY,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC"}

package/lib/components/ExpandCollapse/index.js

@@ -1,2 +1,3 @@
 export { default } from './ExpandCollapse';
+export { default as ExpandCollapseButton, StyledExpandCollapseButton } from './ExpandCollapseButton';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { default } from './ExpandCollapse';\nexport type { ExpandCollapseProps } from './ExpandCollapse';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,OAAO,EACL,OAAO,IAAI,oBAAoB,EAC/B,0BAA0B,EAC3B,MAAM,wBAAwB,CAAC","sourcesContent":["export { default } from './ExpandCollapse';\nexport type { ExpandCollapseProps } from './ExpandCollapse';\nexport {\n  default as ExpandCollapseButton,\n  StyledExpandCollapseButton\n} from './ExpandCollapseButton';\nexport type { ExpandCollapseButtonProps } from './ExpandCollapseButton';\n"]}