npm - @pega/cosmos-react-core - Versions diffs - 9.0.0-build.9.9 → 9.0.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1414) hide show

package/lib/components/Tabs/Tabs.styles.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import styled, { css } from 'styled-components';
+import { transparentize } from 'polished';
 import Icon from '../Icon';
 import MenuButton from '../MenuButton';
 import { defaultThemeProp } from '../../theme';
@@ -23,40 +24,137 @@ export const StylesAllTabsButtonWrapper = styled.div(({ theme }) => css `
   `);
 StylesAllTabsButtonWrapper.defaultProps = defaultThemeProp;
 export const StyledTabs = styled.div(({ theme, hasScrollBar, level }) => {
+    const { detached: tabsDetached } = theme.components.tabs;
+    const { spacing } = theme.base;
+    const color = theme.components.button.color;
+    const secondary = theme.base.palette['secondary-background'];
+    const interactive = theme.base.palette.interactive;
+    const shouldShowBackground = tabsDetached || (level && level > 1);
+    let verticalBackground = 'transparent';
+    if (shouldShowBackground) {
+        verticalBackground = tabsDetached ? secondary : transparentize(0.75, interactive);
+    }
+    const horizontalBackground = shouldShowBackground
+        ? theme.base.palette['primary-background']
+        : 'transparent';
+    const indicatorTransition = css `
+    transition-property: transform, width, height;
+    transition-duration: max(${theme.base.animation.speed}, 1ms);
+    transition-timing-function: ${theme.base.animation.timing.ease};
+  `;
     return css `
     position: relative;
+    &::before {
+      content: '';
+      position: absolute;
+      ${indicatorTransition};
+      pointer-events: none;
+      z-index: 0;
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      ${indicatorTransition};
+      pointer-events: none;
+      z-index: 2;
+    }
+    &[aria-orientation='horizontal']::before {
+      inset-block-start: 0;
+      inset-block-end: 0;
+      inset-inline-start: 0;
+      width: var(--indicator-width);
+      transform: translateX(var(--indicator-left));
+      background: ${horizontalBackground};
+    }
+    &[aria-orientation='horizontal']::after {
+      inset-block-end: 0;
+      inset-inline-start: calc(1.5 * ${spacing});
+      width: calc(var(--indicator-width) - 3 * ${spacing});
+      height: 0.125rem;
+      background: ${color};
+      transform: translateX(var(--indicator-left));
+    }
+    &[aria-orientation='vertical']::before {
+      inset-block-start: 0;
+      height: var(--indicator-height);
+      transform: translateY(var(--indicator-top));
+      background: ${verticalBackground};
+      ${!tabsDetached &&
+        css `
+        inset-inline-start: 0;
+        width: 100%;
+      `}
+      ${tabsDetached &&
+        css `
+        inset-inline-start: calc(2 * ${spacing});
+        inset-inline-end: calc(2 * ${spacing});
+        border-radius: calc(0.5 * ${theme.base['border-radius']});
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+      `}
+    }
+    &[aria-orientation='vertical']::after {
+      width: 0.25rem;
+      background: ${interactive};
+      transform: translateY(var(--indicator-top));
+      ${!tabsDetached &&
+        css `
+        inset-block-start: 0;
+        height: var(--indicator-height);
+        inset-inline-end: 0;
+      `}
+      ${tabsDetached &&
+        css `
+        inset-block-start: 0.0625rem;
+        height: calc(var(--indicator-height) - 0.125rem);
+        inset-inline-start: calc(2 * ${spacing});
+      `}
+    }
     ${theme.components.tabs.detached &&
         css `
       ${StyledTab} + ${StyledTab} {
         margin-inline-start: calc(2 * ${theme.base.spacing});
       }
       &[aria-orientation='horizontal'] {
         background-color: ${theme.base.palette['secondary-background']};
         border-radius: var(--border-radius, ${theme.base['border-radius']});
         border-end-end-radius: 0;
         border-end-start-radius: 0;
         > ${StyledTab} {
           background-color: ${theme.base.palette['secondary-background']};
           &[aria-selected='true'] {
             background-color: ${theme.base.palette['primary-background']};
           }
           ${!hasScrollBar &&
             css `
-            :first-child {
-              border-top-left-radius: var(--border-radius, ${theme.base['border-radius']});
+            &:first-child {
+              border-start-start-radius: var(--border-radius, ${theme.base['border-radius']});
             }
           `}
           ${hasScrollBar &&
             css `
-            :last-child {
-              border-top-right-radius: var(--border-radius, ${theme.base['border-radius']});
+            &:last-child {
+              border-start-end-radius: var(--border-radius, ${theme.base['border-radius']});
             }
           `}
         }
       }
     `}
     &[aria-orientation='horizontal'] {
       height: max-content;
       overflow: auto;
@@ -67,11 +165,18 @@ export const StyledTabs = styled.div(({ theme, hasScrollBar, level }) => {
               100% - ${theme.base['hit-area']['mouse-min']} -
                 ${level > 1 ? '0px' : `calc(0.5 * ${theme.base.spacing}) - 0.0625rem `}
             );
-            ${StyledTab} {
-              border-block-end: ${theme.components.tabs.detached
+            border-block-end: ${theme.components.tabs.detached
             ? 'none'
             : `0.0625rem solid ${theme.base.palette['border-line']}`};
+            @media (pointer: coarse) {
+              max-width: calc(
+                100% - ${theme.base['hit-area']['finger-min']} -
+                  ${level > 1 ? '0px' : `calc(0.5 * ${theme.base.spacing}) - 0.0625rem `}
+              );
+            }
+            ${StyledTab} {
               height: calc(${theme.base['hit-area']['mouse-min']} + 0.0625rem);
               @media (pointer: coarse) {
@@ -80,6 +185,7 @@ export const StyledTabs = styled.div(({ theme, hasScrollBar, level }) => {
               &:disabled {
                 opacity: 1;
                 > * {
                   opacity: ${theme.base['disabled-opacity']};
                 }
@@ -115,9 +221,11 @@ export const StyledTabs = styled.div(({ theme, hasScrollBar, level }) => {
         ${StylesAllTabsButtonWrapper} + & {
           padding-inline-start: calc(0.25 * ${theme.base.spacing});
         }
         ${StyledTab} + ${StyledTab} {
           margin-inline-start: 0;
         }
         ${hasScrollBar &&
             css `
           border: none;
@@ -157,14 +265,14 @@ export const StyledAllTabsWrapper = styled.div(({ theme, level }) => css `
     ${level > 1 &&
     css `
       background-color: ${theme.base.palette['secondary-background']};
+      border-start-start-radius: var(--border-radius, ${theme.base['border-radius']});
+      border-start-end-radius: var(--border-radius, ${theme.base['border-radius']});
       ${!theme.components.tabs.detached &&
         css `
         border-inline: 0.0625rem solid ${theme.base.palette['border-line']};
         border-block-start: 0.0625rem solid ${theme.base.palette['border-line']};
-        border-start-start-radius: calc(0.5rem * 0.5);
-        border-start-end-radius: calc(0.5rem * 0.5);
       `}
       ${StylesAllTabsButtonWrapper}, ${StyledTab} {
         border-block-end: none;
         border-inline-end: none;
@@ -174,7 +282,14 @@ export const StyledAllTabsWrapper = styled.div(({ theme, level }) => css `
     css `
       background-color: ${theme.base.palette['primary-background']};
       border: 0.0625rem solid ${theme.base.palette['border-line']};
+      border-start-start-radius: var(--border-radius, ${theme.base['border-radius']});
+      border-start-end-radius: var(--border-radius, ${theme.base['border-radius']});
       border-block-end: none;
+      ${StyledTabs}[aria-orientation='horizontal'] {
+        border-start-start-radius: 0;
+      }
       ${StylesAllTabsButtonWrapper} {
         border-radius: 0;
       }

package/lib/components/Tabs/Tabs.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.styles.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\nimport { defaultThemeProp } from '../../theme';\n\nimport { StyledTab } from './Tab';\n\nexport const StylesAllTabsButtonWrapper = styled.div(\n ({ theme }) => css`\n border-block-end: ${theme.components.tabs.detached\n ? 'none'\n : `0.0625rem solid ${theme.base.palette['border-line']}`};\n border-inline-end: ${theme.components.tabs.detached\n ? 'none'\n : `0.0625rem solid ${theme.base.palette['border-line']}`};\n height: calc(${theme.base['hit-area']['mouse-min']} + 0.0625rem);\n\n ${theme.components.tabs.detached &&\n css`\n padding: 0;\n `};\n\n @media (pointer: coarse) {\n height: calc(${theme.base['hit-area']['finger-min']} + 0.0625rem);\n }\n `\n);\n\nStylesAllTabsButtonWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledTabs = styled.div<{\n hasScrollBar: boolean;\n level: number;\n}>(({ theme, hasScrollBar, level }) => {\n return css`\n position: relative;\n\n ${theme.components.tabs.detached &&\n css`\n ${StyledTab} + ${StyledTab} {\n margin-inline-start: calc(2 * ${theme.base.spacing});\n }\n &[aria-orientation='horizontal'] {\n background-color: ${theme.base.palette['secondary-background']};\n border-radius: var(--border-radius, ${theme.base['border-radius']});\n border-end-end-radius: 0;\n border-end-start-radius: 0;\n > ${StyledTab} {\n background-color: ${theme.base.palette['secondary-background']};\n &[aria-selected='true'] {\n background-color: ${theme.base.palette['primary-background']};\n }\n ${!hasScrollBar &&\n css`\n :first-child {\n border-top-left-radius: var(--border-radius, ${theme.base['border-radius']});\n }\n `}\n ${hasScrollBar &&\n css`\n :last-child {\n border-top-right-radius: var(--border-radius, ${theme.base['border-radius']});\n }\n `}\n }\n }\n `}\n\n &[aria-orientation='horizontal'] {\n height: max-content;\n overflow: auto;\n\n ${hasScrollBar\n ? css`\n max-width: calc(\n 100% - ${theme.base['hit-area']['mouse-min']} -\n ${level > 1 ? '0px' : `calc(0.5 * ${theme.base.spacing}) - 0.0625rem `}\n );\n\n ${StyledTab} {\n border-block-end: ${theme.components.tabs.detached\n ? 'none'\n : `0.0625rem solid ${theme.base.palette['border-line']}`};\n height: calc(${theme.base['hit-area']['mouse-min']} + 0.0625rem);\n\n @media (pointer: coarse) {\n height: calc(${theme.base['hit-area']['finger-min']} + 0.0625rem);\n }\n\n &:disabled {\n opacity: 1;\n > * {\n opacity: ${theme.base['disabled-opacity']};\n }\n }\n }\n `\n : css`\n border-block-end: ${theme.components.tabs.detached\n ? 'none'\n : `0.0625rem solid ${theme.base.palette['border-line']}`};\n ${level > 1 &&\n css`\n background-color: ${theme.base.palette['secondary-background']};\n border: ${theme.components.tabs.detached\n ? 'none'\n : `0.0625rem solid ${theme.base.palette['border-line']}`};\n border-block-end: none;\n border-radius: 0;\n border-start-start-radius: ${theme.components.tabs.detached\n ? `var(--border-radius, ${theme.base['border-radius']})`\n : 'calc(0.5rem * 0.5)'};\n border-start-end-radius: ${theme.components.tabs.detached\n ? `var(--border-radius, ${theme.base['border-radius']})`\n : 'calc(0.5rem * 0.5)'};\n `}\n `}\n ${theme.components.tabs.detached &&\n css`\n padding-block: 0;\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-block-end: none;\n\n ${StylesAllTabsButtonWrapper} + & {\n padding-inline-start: calc(0.25 * ${theme.base.spacing});\n }\n ${StyledTab} + ${StyledTab} {\n margin-inline-start: 0;\n }\n ${hasScrollBar &&\n css`\n border: none;\n border-inline-start: none;\n max-width: calc(100% - ${theme.base['hit-area']['mouse-min']});\n\n @media (pointer: coarse) {\n max-width: calc(100% - ${theme.base['hit-area']['finger-min']});\n }\n `}\n `}\n }\n\n &:has(:focus-visible) {\n &[aria-orientation='vertical'] {\n box-shadow: ${theme.base.shadow['focus-group-inset']};\n }\n\n &[aria-orientation='horizontal'] {\n box-shadow: ${theme.base.shadow['focus-group']};\n }\n }\n `;\n});\n\nStyledTabs.defaultProps = defaultThemeProp;\n\nexport const StyledAllTabsButton = styled(MenuButton)`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n`;\n\nStyledAllTabsButton.defaultProps = defaultThemeProp;\n\nexport const StyledErrorIcon = styled(Icon)(\n ({ theme }) => css`\n color: ${theme.base.palette.urgent};\n `\n);\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nexport const StyledAllTabsWrapper = styled.div<{\n level: number;\n}>(\n ({ theme, level }) => css`\n ${level > 1 &&\n css`\n background-color: ${theme.base.palette['secondary-background']};\n ${!theme.components.tabs.detached &&\n css`\n border-inline: 0.0625rem solid ${theme.base.palette['border-line']};\n border-block-start: 0.0625rem solid ${theme.base.palette['border-line']};\n border-start-start-radius: calc(0.5rem * 0.5);\n border-start-end-radius: calc(0.5rem * 0.5);\n `}\n\n ${StylesAllTabsButtonWrapper}, ${StyledTab} {\n border-block-end: none;\n border-inline-end: none;\n }\n `}\n ${theme.components.tabs.detached &&\n css`\n background-color: ${theme.base.palette['primary-background']};\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-block-end: none;\n ${StylesAllTabsButtonWrapper} {\n border-radius: 0;\n }\n `}\n `\n);\n\nStyledAllTabsWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledSeparator = styled.span<{ transparent: boolean }>(\n ({ theme, transparent }) => css`\n align-self: center;\n height: 1em;\n min-width: 0.0625rem;\n background-color: ${transparent ? 'transparent' : theme.base.palette['border-line']};\n `\n);\n\nStyledSeparator.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"Tabs.styles.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\nimport { defaultThemeProp } from '../../theme';\n\nimport { StyledTab } from './Tab';\n\nexport const StylesAllTabsButtonWrapper = styled.div(\n ({ theme }) => css`\n border-block-end: ${theme.components.tabs.detached\n ? 'none'\n : `0.0625rem solid ${theme.base.palette['border-line']}`};\n border-inline-end: ${theme.components.tabs.detached\n ? 'none'\n : `0.0625rem solid ${theme.base.palette['border-line']}`};\n height: calc(${theme.base['hit-area']['mouse-min']} + 0.0625rem);\n\n ${theme.components.tabs.detached &&\n css`\n padding: 0;\n `};\n\n @media (pointer: coarse) {\n height: calc(${theme.base['hit-area']['finger-min']} + 0.0625rem);\n }\n `\n);\n\nStylesAllTabsButtonWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledTabs = styled.div<{\n hasScrollBar: boolean;\n level: number;\n}>(({ theme, hasScrollBar, level }) => {\n const { detached: tabsDetached } = theme.components.tabs;\n const { spacing } = theme.base;\n const color = theme.components.button.color;\n const secondary = theme.base.palette['secondary-background'];\n const interactive = theme.base.palette.interactive;\n\n const shouldShowBackground = tabsDetached \|\| (level && level > 1);\n\n let verticalBackground = 'transparent';\n if (shouldShowBackground) {\n verticalBackground = tabsDetached ? secondary : transparentize(0.75, interactive);\n }\n\n const horizontalBackground = shouldShowBackground\n ? theme.base.palette['primary-background']\n : 'transparent';\n\n const indicatorTransition = css`\n transition-property: transform, width, height;\n transition-duration: max(${theme.base.animation.speed}, 1ms);\n transition-timing-function: ${theme.base.animation.timing.ease};\n `;\n\n return css`\n position: relative;\n\n &::before {\n content: '';\n position: absolute;\n ${indicatorTransition};\n pointer-events: none;\n z-index: 0;\n }\n\n &::after {\n content: '';\n position: absolute;\n ${indicatorTransition};\n pointer-events: none;\n z-index: 2;\n }\n\n &[aria-orientation='horizontal']::before {\n inset-block-start: 0;\n inset-block-end: 0;\n inset-inline-start: 0;\n width: var(--indicator-width);\n transform: translateX(var(--indicator-left));\n background: ${horizontalBackground};\n }\n\n &[aria-orientation='horizontal']::after {\n inset-block-end: 0;\n inset-inline-start: calc(1.5 * ${spacing});\n width: calc(var(--indicator-width) - 3 * ${spacing});\n height: 0.125rem;\n background: ${color};\n transform: translateX(var(--indicator-left));\n }\n\n &[aria-orientation='vertical']::before {\n inset-block-start: 0;\n height: var(--indicator-height);\n transform: translateY(var(--indicator-top));\n background: ${verticalBackground};\n\n ${!tabsDetached &&\n css`\n inset-inline-start: 0;\n width: 100%;\n `}\n\n ${tabsDetached &&\n css`\n inset-inline-start: calc(2 * ${spacing});\n inset-inline-end: calc(2 * ${spacing});\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n `}\n }\n\n &[aria-orientation='vertical']::after {\n width: 0.25rem;\n background: ${interactive};\n transform: translateY(var(--indicator-top));\n\n ${!tabsDetached &&\n css`\n inset-block-start: 0;\n height: var(--indicator-height);\n inset-inline-end: 0;\n `}\n\n ${tabsDetached &&\n css`\n inset-block-start: 0.0625rem;\n height: calc(var(--indicator-height) - 0.125rem);\n inset-inline-start: calc(2 * ${spacing});\n `}\n }\n\n ${theme.components.tabs.detached &&\n css`\n ${StyledTab} + ${StyledTab} {\n margin-inline-start: calc(2 * ${theme.base.spacing});\n }\n\n &[aria-orientation='horizontal'] {\n background-color: ${theme.base.palette['secondary-background']};\n border-radius: var(--border-radius, ${theme.base['border-radius']});\n border-end-end-radius: 0;\n border-end-start-radius: 0;\n\n > ${StyledTab} {\n background-color: ${theme.base.palette['secondary-background']};\n\n &[aria-selected='true'] {\n background-color: ${theme.base.palette['primary-background']};\n }\n\n ${!hasScrollBar &&\n css`\n &:first-child {\n border-start-start-radius: var(--border-radius, ${theme.base['border-radius']});\n }\n `}\n ${hasScrollBar &&\n css`\n &:last-child {\n border-start-end-radius: var(--border-radius, ${theme.base['border-radius']});\n }\n `}\n }\n }\n `}\n &[aria-orientation='horizontal'] {\n height: max-content;\n overflow: auto;\n\n ${hasScrollBar\n ? css`\n max-width: calc(\n 100% - ${theme.base['hit-area']['mouse-min']} -\n ${level > 1 ? '0px' : `calc(0.5 * ${theme.base.spacing}) - 0.0625rem `}\n );\n border-block-end: ${theme.components.tabs.detached\n ? 'none'\n : `0.0625rem solid ${theme.base.palette['border-line']}`};\n\n @media (pointer: coarse) {\n max-width: calc(\n 100% - ${theme.base['hit-area']['finger-min']} -\n ${level > 1 ? '0px' : `calc(0.5 * ${theme.base.spacing}) - 0.0625rem `}\n );\n }\n\n ${StyledTab} {\n height: calc(${theme.base['hit-area']['mouse-min']} + 0.0625rem);\n\n @media (pointer: coarse) {\n height: calc(${theme.base['hit-area']['finger-min']} + 0.0625rem);\n }\n\n &:disabled {\n opacity: 1;\n\n > * {\n opacity: ${theme.base['disabled-opacity']};\n }\n }\n }\n `\n : css`\n border-block-end: ${theme.components.tabs.detached\n ? 'none'\n : `0.0625rem solid ${theme.base.palette['border-line']}`};\n ${level > 1 &&\n css`\n background-color: ${theme.base.palette['secondary-background']};\n border: ${theme.components.tabs.detached\n ? 'none'\n : `0.0625rem solid ${theme.base.palette['border-line']}`};\n border-block-end: none;\n border-radius: 0;\n border-start-start-radius: ${theme.components.tabs.detached\n ? `var(--border-radius, ${theme.base['border-radius']})`\n : 'calc(0.5rem * 0.5)'};\n border-start-end-radius: ${theme.components.tabs.detached\n ? `var(--border-radius, ${theme.base['border-radius']})`\n : 'calc(0.5rem * 0.5)'};\n `}\n `}\n ${theme.components.tabs.detached &&\n css`\n padding-block: 0;\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-block-end: none;\n\n ${StylesAllTabsButtonWrapper} + & {\n padding-inline-start: calc(0.25 * ${theme.base.spacing});\n }\n\n ${StyledTab} + ${StyledTab} {\n margin-inline-start: 0;\n }\n\n ${hasScrollBar &&\n css`\n border: none;\n border-inline-start: none;\n max-width: calc(100% - ${theme.base['hit-area']['mouse-min']});\n\n @media (pointer: coarse) {\n max-width: calc(100% - ${theme.base['hit-area']['finger-min']});\n }\n `}\n `}\n }\n\n &:has(:focus-visible) {\n &[aria-orientation='vertical'] {\n box-shadow: ${theme.base.shadow['focus-group-inset']};\n }\n\n &[aria-orientation='horizontal'] {\n box-shadow: ${theme.base.shadow['focus-group']};\n }\n }\n `;\n});\n\nStyledTabs.defaultProps = defaultThemeProp;\n\nexport const StyledAllTabsButton = styled(MenuButton)`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n`;\n\nStyledAllTabsButton.defaultProps = defaultThemeProp;\n\nexport const StyledErrorIcon = styled(Icon)(\n ({ theme }) => css`\n color: ${theme.base.palette.urgent};\n `\n);\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nexport const StyledAllTabsWrapper = styled.div<{\n level: number;\n}>(\n ({ theme, level }) => css`\n ${level > 1 &&\n css`\n background-color: ${theme.base.palette['secondary-background']};\n border-start-start-radius: var(--border-radius, ${theme.base['border-radius']});\n border-start-end-radius: var(--border-radius, ${theme.base['border-radius']});\n\n ${!theme.components.tabs.detached &&\n css`\n border-inline: 0.0625rem solid ${theme.base.palette['border-line']};\n border-block-start: 0.0625rem solid ${theme.base.palette['border-line']};\n `}\n ${StylesAllTabsButtonWrapper}, ${StyledTab} {\n border-block-end: none;\n border-inline-end: none;\n }\n `}\n ${theme.components.tabs.detached &&\n css`\n background-color: ${theme.base.palette['primary-background']};\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-start-start-radius: var(--border-radius, ${theme.base['border-radius']});\n border-start-end-radius: var(--border-radius, ${theme.base['border-radius']});\n border-block-end: none;\n\n ${StyledTabs}[aria-orientation='horizontal'] {\n border-start-start-radius: 0;\n }\n\n ${StylesAllTabsButtonWrapper} {\n border-radius: 0;\n }\n `}\n `\n);\n\nStyledAllTabsWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledSeparator = styled.span<{ transparent: boolean }>(\n ({ theme, transparent }) => css`\n align-self: center;\n height: 1em;\n min-width: 0.0625rem;\n background-color: ${transparent ? 'transparent' : theme.base.palette['border-line']};\n `\n);\n\nStyledSeparator.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Text/Text.d.ts CHANGED Viewed

@@ -14,7 +14,7 @@ export interface TextProps extends BaseProps, AsProp {
     ref?: Ref<HTMLSpanElement | HTMLHeadingElement>;
 }
 type TextPropsWithDefaults = PropsWithDefaults<TextProps, 'variant'>;
-export declare const StyledText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, TextPropsWithDefaults, never>;
+export declare const StyledText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, TextPropsWithDefaults>> & string;
 declare const Text: ForwardRefForwardPropsComponent<TextProps>;
 export default Text;
 //# sourceMappingURL=Text.d.ts.map

package/lib/components/Text/Text.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAmB,MAAM,OAAO,CAAC;AAI7D,OAAO,KAAK,EACV,UAAU,EACV,SAAS,EACT,+BAA+B,EAC/B,MAAM,EACN,iBAAiB,EAClB,MAAM,aAAa,CAAC;AAMrB,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,MAAM;IAClD,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC/C,yDAAyD;IACzD,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IACzC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,GAAG,kBAAkB,CAAC,CAAC;CACjD;AAED,KAAK,qBAAqB,GAAG,iBAAiB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AAErE,eAAO,MAAM,UAAU,~~6HAsCrB~~,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,+BAA+B,CAAC,SAAS,CAOnD,CAAC;AAEH,eAAe,IAAI,CAAC"}
1	+ {"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAmB,MAAM,OAAO,CAAC;AAI7D,OAAO,KAAK,EACV,UAAU,EACV,SAAS,EACT,+BAA+B,EAC/B,MAAM,EACN,iBAAiB,EAClB,MAAM,aAAa,CAAC;AAMrB,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,MAAM;IAClD,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC/C,yDAAyD;IACzD,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IACzC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,GAAG,kBAAkB,CAAC,CAAC;CACjD;AAED,KAAK,qBAAqB,GAAG,iBAAiB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AAErE,eAAO,MAAM,UAAU,4PAsCrB,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,+BAA+B,CAAC,SAAS,CAOnD,CAAC;AAEH,eAAe,IAAI,CAAC"}

package/lib/components/TextArea/TextArea.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import type { FC, ChangeEventHandler } from 'react';
+import type { FC, ChangeEventHandler, FocusEventHandler } from 'react';
 import type { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';
 import type { FormControlProps } from '../FormControl';
 export interface TextAreaProps extends FormControlProps, BaseProps, NoChildrenProp, TestIdProp {
@@ -27,6 +27,8 @@ export interface TextAreaProps extends FormControlProps, BaseProps, NoChildrenPr
      */
     hardStop?: boolean;
     onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+    onFocus?: FocusEventHandler<HTMLTextAreaElement>;
+    onBlur?: FocusEventHandler<HTMLTextAreaElement>;
 }
 declare const _default: FC<TextAreaProps & ForwardProps> & {
     getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;

package/lib/components/TextArea/TextArea.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,~~EAAE~~,EAAE,~~EAAqC~~,kBAAkB,~~EAAE~~,MAAM,OAAO,CAAC;~~AAEvF~~,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGvF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;~~AASvD~~,MAAM,WAAW,aAAc,SAAQ,gBAAgB,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU;IAC5F,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;~~IACnB~~,QAAQ,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;~~CACpD~~;;;;~~AAkJD~~,wBAAyD"}
1	+ {"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,EAAE,EAIF,kBAAkB,EAElB,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGvF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAgBvD,MAAM,WAAW,aAAc,SAAQ,gBAAgB,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU;IAC5F,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,QAAQ,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;IACjD,MAAM,CAAC,EAAE,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;CACjD;;;;AA+ND,wBAAyD"}

package/lib/components/TextArea/TextArea.js CHANGED Viewed

@@ -1,21 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useState, useEffect, useMemo } from 'react';
+import { forwardRef, useCallback, useState, useEffect, useRef, useLayoutEffect } from 'react';
 import FormField from '../FormField';
 import { StyledFormControl } from '../FormControl';
 import { hasProp, withTestIds } from '../../utils';
-import { useConsolidatedRef, useI18n, useTestIds, useUID } from '../../hooks';
+import { useConsolidatedRef, useElement, useI18n, useLiveLog, useTestIds, useUID } from '../../hooks';
 import Text from '../Text';
 import VisuallyHiddenText from '../VisuallyHiddenText';
-import StyledTextArea from './TextArea.styles';
+import StyledTextArea, { textAreaMaxHeight } from './TextArea.styles';
 import { getTextAreaTestIds } from './TextArea.test-ids';
+const warnCharCount = 30;
 const TextArea = forwardRef(function TextArea(props, ref) {
     const uid = useUID();
     const { testId, additionalInfo, id = uid, value, defaultValue, required = false, disabled = false, readOnly = false, label, labelHidden, info, status, resizable = false, autoResize = true, maxLength, displayCharCount = false, hardStop = true, onChange: onChangeProp, onResolveSuggestion, ...restProps } = props;
     const t = useI18n();
     const testIds = useTestIds(testId, getTextAreaTestIds);
-    const [charCount, setCharCount] = useState(0);
-    const textAreaRef = useConsolidatedRef(ref);
-    const consolidatedRef = useConsolidatedRef(ref, textAreaRef);
+    const [charCount, setCharCount] = useState(value?.length ?? defaultValue?.length ?? 0);
+    const [focused, setFocused] = useState(false);
+    const [textAreaEl, setTextAreaEl] = useElement();
+    const textAreaRef = useConsolidatedRef(ref, setTextAreaEl);
+    const prevHeightRef = useRef(0);
+    const heightPxRef = useRef(0);
+    const focusTimeoutRef = useRef(NaN);
+    const { announceAssertive } = useLiveLog();
     const controlProp = {};
     // Conditionally render component as controlled/uncontrolled
     if (hasProp(props, 'value')) {
@@ -25,40 +31,101 @@ const TextArea = forwardRef(function TextArea(props, ref) {
         controlProp.defaultValue = defaultValue ?? '';
     }
     const onChange = useCallback((e) => {
+        if (maxLength !== undefined) {
+            if (e.target.value.length >= maxLength) {
+                announceAssertive({ message: t('text_area_character_limit'), type: 'warning' });
+            }
+            else if (maxLength > warnCharCount) {
+                const prevCharsRemaining = maxLength - charCount;
+                const charsRemaining = maxLength - e.target.value.length;
+                if (charsRemaining < warnCharCount && prevCharsRemaining >= warnCharCount) {
+                    announceAssertive({
+                        message: t('text_area_characters_remaining', [`${warnCharCount}`]),
+                        type: 'warning'
+                    });
+                }
+            }
+        }
         if (!hardStop || maxLength === undefined || e.target.value.length <= maxLength) {
             onChangeProp?.(e);
             setCharCount(e.target.value.length);
         }
-    }, [onChangeProp, hardStop, maxLength]);
-    const ariaDescribedBy = useMemo(() => {
-        const idString = [];
-        if (info) {
-            idString.push(`${id}-info`);
-        }
-        if (displayCharCount && typeof maxLength === 'number') {
-            idString.push(`${id}-charCount`);
-        }
-        return idString.length ? idString.join(' ') : undefined;
-    }, [info, id, displayCharCount, maxLength]);
+    }, [onChangeProp, charCount, hardStop, maxLength, announceAssertive, t]);
+    const recalculateHeight = useCallback(() => {
+        if (!textAreaRef.current)
+            return;
+        const baseHeightPx = heightPxRef.current;
+        const currentHeight = parseFloat(getComputedStyle(textAreaRef.current).getPropertyValue('--textarea-height'));
+        textAreaRef.current.style.marginBlockEnd =
+            currentHeight > baseHeightPx
+                ? `calc(min(${textAreaMaxHeight}, ${currentHeight}px) - ${baseHeightPx}px)`
+                : '0';
+        textAreaRef.current.style.setProperty('--textarea-height', 'auto');
+        // Remove scrollbar width to avoid interference with calculation.
+        textAreaRef.current.style.setProperty('scrollbar-width', 'none');
+        const scrollHeight = textAreaRef.current.scrollHeight;
+        const borderWidth = textAreaRef.current.offsetHeight - textAreaRef.current.clientHeight;
+        // Set height to auto then scrollHeight + borderWidth to resize TextArea to content
+        textAreaRef.current.style.setProperty('--textarea-height', `${scrollHeight + borderWidth}px`);
+        textAreaRef.current.style.removeProperty('margin-block-end');
+        textAreaRef.current.style.removeProperty('scrollbar-width');
+    }, []);
+    useLayoutEffect(() => {
+        if (!textAreaRef.current)
+            return;
+        heightPxRef.current = textAreaRef.current.offsetHeight;
+    }, [textAreaEl]);
     useEffect(() => {
         if (!textAreaRef.current)
             return;
         if (autoResize) {
-            textAreaRef.current.style.setProperty('--textarea-height', 'auto');
-            // Remove scrollbar width to avoid interference with calculation.
-            textAreaRef.current.style.setProperty('scrollbar-width', 'none');
-            const scrollHeight = textAreaRef.current.scrollHeight;
-            const borderWidth = textAreaRef.current.offsetHeight - textAreaRef.current.clientHeight;
-            // Set height to auto then scrollHeight + borderWidth to resize TextArea to content
-            textAreaRef.current.style.setProperty('--textarea-height', `${scrollHeight + borderWidth}px`);
-            textAreaRef.current.style.removeProperty('scrollbar-width');
+            recalculateHeight();
         }
         else {
             textAreaRef.current.style.removeProperty('--textarea-height');
         }
-    }, [value, autoResize]);
-    const TextAreaControl = (_jsx(StyledFormControl, { "data-testid": testIds.control, ref: consolidatedRef, id: id, "aria-describedby": ariaDescribedBy, required: required, disabled: disabled, status: status, readOnly: readOnly, autoResize: autoResize, resizable: autoResize ? false : resizable, maxLength: hardStop ? maxLength : undefined, hasSuggestion: status === 'pending' && !!onResolveSuggestion, ...controlProp, ...restProps, onChange: onChange, as: StyledTextArea }));
-    return label || displayCharCount ? (_jsx(FormField, { testId: testIds, additionalInfo: additionalInfo, label: label, labelHidden: labelHidden, id: id, readOnly: readOnly, info: info, status: status, charLimitDisplay: displayCharCount && typeof maxLength === 'number' ? (_jsxs(Text, { id: `${id}-charCount`, readOnly: readOnly, variant: 'secondary', "aria-live": maxLength >= 0 && maxLength - charCount <= 20 ? 'polite' : 'off', children: [maxLength >= 0 ? t('x_of_y', [charCount || '0', maxLength]) : charCount, ' ', _jsx(VisuallyHiddenText, { children: t('characters_typed') })] })) : undefined, required: required, disabled: disabled, onResolveSuggestion: onResolveSuggestion, children: TextAreaControl })) : (TextAreaControl);
+    }, [value, autoResize, recalculateHeight]);
+    // Recalculate height when the element becomes visible after being displayed none.
+    useEffect(() => {
+        if (!textAreaEl || !autoResize)
+            return;
+        prevHeightRef.current = textAreaEl.offsetHeight;
+        const observer = new ResizeObserver(entries => {
+            const currentHeight = entries[0].contentRect.height;
+            if (prevHeightRef.current === 0 && currentHeight > 0) {
+                const textareaHeight = getComputedStyle(textAreaEl)
+                    .getPropertyValue('--textarea-height')
+                    .trim();
+                if (!textareaHeight || textareaHeight === 'auto' || textareaHeight === 'unset') {
+                    heightPxRef.current = textAreaEl.offsetHeight;
+                }
+                recalculateHeight();
+            }
+            prevHeightRef.current = currentHeight;
+        });
+        observer.observe(textAreaEl);
+        return () => observer.disconnect();
+    }, [autoResize, recalculateHeight, textAreaEl]);
+    useEffect(() => () => {
+        clearTimeout(focusTimeoutRef.current);
+    }, []);
+    const TextAreaControl = (_jsx(StyledFormControl, { "data-testid": testIds.control, ref: textAreaRef, id: id, "aria-describedby":
+        // Remove when focused to prevent each change in character count from being announced.
+        !focused && displayCharCount && typeof maxLength === 'number'
+            ? `${id}-charCount`
+            : undefined, required: required, disabled: disabled, status: status, readOnly: readOnly, autoResize: autoResize, resizable: autoResize ? false : resizable, maxLength: hardStop ? maxLength : undefined, hasSuggestion: status === 'pending' && !!onResolveSuggestion, ...controlProp, ...restProps, onChange: onChange, onFocus: (e) => {
+            // Need to delay so screen readers will include the character count in announcement on initial focus.
+            // Shorter delays did not seem to work.
+            focusTimeoutRef.current = window.setTimeout(() => {
+                setFocused(true);
+            }, 250);
+            restProps.onFocus?.(e);
+        }, onBlur: (e) => {
+            clearTimeout(focusTimeoutRef.current);
+            setFocused(false);
+            restProps.onBlur?.(e);
+        }, as: StyledTextArea }));
+    return label || displayCharCount ? (_jsx(FormField, { testId: testIds, additionalInfo: additionalInfo, label: label, labelHidden: labelHidden, id: id, readOnly: readOnly, info: info, status: status, charLimitDisplay: displayCharCount && typeof maxLength === 'number' ? (_jsxs(Text, { id: `${id}-charCount`, readOnly: readOnly, variant: 'secondary', children: [maxLength >= 0 ? t('x_of_y', [charCount || '0', maxLength]) : charCount, ' ', _jsx(VisuallyHiddenText, { children: t('characters_typed') })] })) : undefined, required: required, disabled: disabled, onResolveSuggestion: onResolveSuggestion, children: TextAreaControl })) : (TextAreaControl);
 });
 export default withTestIds(TextArea, getTextAreaTestIds);
 //# sourceMappingURL=TextArea.js.map

package/lib/components/TextArea/TextArea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAI9E,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEnD,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAC9E,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AAEvD,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AA8BzD,MAAM,QAAQ,GAAqC,UAAU,CAAC,SAAS,QAAQ,CAC7E,KAAqC,EACrC,GAA6B;IAE7B,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EACJ,MAAM,EACN,cAAc,EACd,EAAE,GAAG,GAAG,EACR,KAAK,EACL,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,MAAM,EACN,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,IAAI,EACjB,SAAS,EACT,gBAAgB,GAAG,KAAK,EACxB,QAAQ,GAAG,IAAI,EACf,QAAQ,EAAE,YAAY,EACtB,mBAAmB,EACnB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IACvD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC9C,MAAM,WAAW,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC5C,MAAM,eAAe,GAAG,kBAAkB,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;IAE7D,MAAM,WAAW,GAGb,EAAE,CAAC;IAEP,4DAA4D;IAC5D,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,CAAC;QAC5B,WAAW,CAAC,KAAK,GAAG,KAAK,IAAI,EAAE,CAAC;IAClC,CAAC;SAAM,IAAI,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,EAAE,CAAC;QAC1C,WAAW,CAAC,YAAY,GAAG,YAAY,IAAI,EAAE,CAAC;IAChD,CAAC;IAED,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,CAAmC,EAAE,EAAE;QACtC,IAAI,CAAC,QAAQ,IAAI,SAAS,KAAK,SAAS,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,IAAI,SAAS,EAAE,CAAC;YAC/E,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;YAClB,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACtC,CAAC;IACH,CAAC,EACD,CAAC,YAAY,EAAE,QAAQ,EAAE,SAAS,CAAC,CACpC,CAAC;IAEF,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,MAAM,QAAQ,GAAG,EAAE,CAAC;QAEpB,IAAI,IAAI,EAAE,CAAC;YACT,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;QAC9B,CAAC;QACD,IAAI,gBAAgB,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE,CAAC;YACtD,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;QACnC,CAAC;QAED,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAC1D,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,EAAE,gBAAgB,EAAE,SAAS,CAAC,CAAC,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,WAAW,CAAC,OAAO;YAAE,OAAO;QAEjC,IAAI,UAAU,EAAE,CAAC;YACf,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAC;YAEnE,iEAAiE;YACjE,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC;YAEjE,MAAM,YAAY,GAAG,WAAW,CAAC,OAAO,CAAC,YAAY,CAAC;YACtD,MAAM,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC,YAAY,GAAG,WAAW,CAAC,OAAO,CAAC,YAAY,CAAC;YACxF,mFAAmF;YACnF,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,mBAAmB,EAAE,GAAG,YAAY,GAAG,WAAW,IAAI,CAAC,CAAC;YAE9F,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC;QAC9D,CAAC;aAAM,CAAC;YACN,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC,CAAC;QAChE,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC;IAExB,MAAM,eAAe,GAAG,CACtB,KAAC,iBAAiB,mBACH,OAAO,CAAC,OAAO,EAC5B,GAAG,EAAE,eAAe,EACpB,EAAE,EAAE,EAAE,sBACY,eAAe,EACjC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EACzC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAC3C,aAAa,EAAE,MAAM,KAAK,SAAS,IAAI,CAAC,CAAC,mBAAmB,KACxD,WAAW,KACX,SAAS,EACb,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,cAAc,GAClB,CACH,CAAC;IAEF,OAAO,KAAK,IAAI,gBAAgB,CAAC,CAAC,CAAC,CACjC,KAAC,SAAS,IACR,MAAM,EAAE,OAAO,EACf,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,gBAAgB,EACd,gBAAgB,IAAI,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,CAClD,MAAC,IAAI,IACH,EAAE,EAAE,GAAG,EAAE,YAAY,EACrB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAC,WAAW,eACR,SAAS,IAAI,CAAC,IAAI,SAAS,GAAG,SAAS,IAAI,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,aAE1E,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,SAAS,IAAI,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,GAAG,EAC7E,KAAC,kBAAkB,cAAE,CAAC,CAAC,kBAAkB,CAAC,GAAsB,IAC3D,CACR,CAAC,CAAC,CAAC,SAAS,EAEf,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,mBAAmB,EAAE,mBAAmB,YAEvC,eAAe,GACN,CACb,CAAC,CAAC,CAAC,CACF,eAAe,CAChB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC","sourcesContent":["import { forwardRef, useCallback, useState, useEffect, useMemo } from 'react';\nimport type { FC, Ref, PropsWithoutRef, ChangeEvent, ChangeEventHandler } from 'react';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { hasProp, withTestIds } from '../../utils';\nimport { useConsolidatedRef, useI18n, useTestIds, useUID } from '../../hooks';\nimport Text from '../Text';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport StyledTextArea from './TextArea.styles';\nimport { getTextAreaTestIds } from './TextArea.test-ids';\n\nexport interface TextAreaProps extends FormControlProps, BaseProps, NoChildrenProp, TestIdProp {\n /** Minimum length of characters that can be input. /\n minLength?: number;\n /* Maximum length of characters that can be input. /\n maxLength?: number;\n /\n Allows the user to resize the Text Area. This prop is ignored if autoResize is true.\n * @default false\n /\n resizable?: boolean;\n /\n Enables the Text Area to resize itself automatically.\n * @default true\n /\n autoResize?: boolean;\n /\n Display a live character count in relation to the maxLength.\n * @default false\n /\n displayCharCount?: boolean;\n /\n Allow or disallow a value beyond the maxLength.\n * @default true\n */\n hardStop?: boolean;\n onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n}\n\nconst TextArea: FC<TextAreaProps & ForwardProps> = forwardRef(function TextArea(\n props: PropsWithoutRef<TextAreaProps>,\n ref: Ref<HTMLTextAreaElement>\n) {\n const uid = useUID();\n const {\n testId,\n additionalInfo,\n id = uid,\n value,\n defaultValue,\n required = false,\n disabled = false,\n readOnly = false,\n label,\n labelHidden,\n info,\n status,\n resizable = false,\n autoResize = true,\n maxLength,\n displayCharCount = false,\n hardStop = true,\n onChange: onChangeProp,\n onResolveSuggestion,\n ...restProps\n } = props;\n const t = useI18n();\n\n const testIds = useTestIds(testId, getTextAreaTestIds);\n const [charCount, setCharCount] = useState(0);\n const textAreaRef = useConsolidatedRef(ref);\n const consolidatedRef = useConsolidatedRef(ref, textAreaRef);\n\n const controlProp: {\n value?: string;\n defaultValue?: string;\n } = {};\n\n // Conditionally render component as controlled/uncontrolled\n if (hasProp(props, 'value')) {\n controlProp.value = value ?? '';\n } else if (hasProp(props, 'defaultValue')) {\n controlProp.defaultValue = defaultValue ?? '';\n }\n\n const onChange = useCallback(\n (e: ChangeEvent<HTMLTextAreaElement>) => {\n if (!hardStop \|\| maxLength === undefined \|\| e.target.value.length <= maxLength) {\n onChangeProp?.(e);\n setCharCount(e.target.value.length);\n }\n },\n [onChangeProp, hardStop, maxLength]\n );\n\n const ariaDescribedBy = useMemo(() => {\n const idString = [];\n\n if (info) {\n idString.push(`${id}-info`);\n }\n if (displayCharCount && typeof maxLength === 'number') {\n idString.push(`${id}-charCount`);\n }\n\n return idString.length ? idString.join(' ') : undefined;\n }, [info, id, displayCharCount, maxLength]);\n\n useEffect(() => {\n if (!textAreaRef.current) return;\n\n if (autoResize) {\n textAreaRef.current.style.setProperty('--textarea-height', 'auto');\n\n // Remove scrollbar width to avoid interference with calculation.\n textAreaRef.current.style.setProperty('scrollbar-width', 'none');\n\n const scrollHeight = textAreaRef.current.scrollHeight;\n const borderWidth = textAreaRef.current.offsetHeight - textAreaRef.current.clientHeight;\n // Set height to auto then scrollHeight + borderWidth to resize TextArea to content\n textAreaRef.current.style.setProperty('--textarea-height', `${scrollHeight + borderWidth}px`);\n\n textAreaRef.current.style.removeProperty('scrollbar-width');\n } else {\n textAreaRef.current.style.removeProperty('--textarea-height');\n }\n }, [value, autoResize]);\n\n const TextAreaControl = (\n <StyledFormControl\n data-testid={testIds.control}\n ref={consolidatedRef}\n id={id}\n aria-describedby={ariaDescribedBy}\n required={required}\n disabled={disabled}\n status={status}\n readOnly={readOnly}\n autoResize={autoResize}\n resizable={autoResize ? false : resizable}\n maxLength={hardStop ? maxLength : undefined}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n {...controlProp}\n {...restProps}\n onChange={onChange}\n as={StyledTextArea}\n />\n );\n\n return label \|\| displayCharCount ? (\n <FormField\n testId={testIds}\n additionalInfo={additionalInfo}\n label={label}\n labelHidden={labelHidden}\n id={id}\n readOnly={readOnly}\n info={info}\n status={status}\n charLimitDisplay={\n displayCharCount && typeof maxLength === 'number' ? (\n <Text\n id={`${id}-charCount`}\n readOnly={readOnly}\n variant='secondary'\n aria-live={maxLength >= 0 && maxLength - charCount <= 20 ? 'polite' : 'off'}\n >\n {maxLength >= 0 ? t('x_of_y', [charCount \|\| '0', maxLength]) : charCount}{' '}\n <VisuallyHiddenText>{t('characters_typed')}</VisuallyHiddenText>\n </Text>\n ) : undefined\n }\n required={required}\n disabled={disabled}\n onResolveSuggestion={onResolveSuggestion}\n >\n {TextAreaControl}\n </FormField>\n ) : (\n TextAreaControl\n );\n});\n\nexport default withTestIds(TextArea, getTextAreaTestIds);\n"]}
1	+ {"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useState, useEffect, useRef, useLayoutEffect } from 'react';\nimport type {\n FC,\n Ref,\n PropsWithoutRef,\n ChangeEvent,\n ChangeEventHandler,\n FocusEvent,\n FocusEventHandler\n} from 'react';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { hasProp, withTestIds } from '../../utils';\nimport {\n useConsolidatedRef,\n useElement,\n useI18n,\n useLiveLog,\n useTestIds,\n useUID\n} from '../../hooks';\nimport Text from '../Text';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport StyledTextArea, { textAreaMaxHeight } from './TextArea.styles';\nimport { getTextAreaTestIds } from './TextArea.test-ids';\n\nexport interface TextAreaProps extends FormControlProps, BaseProps, NoChildrenProp, TestIdProp {\n /** Minimum length of characters that can be input. /\n minLength?: number;\n /* Maximum length of characters that can be input. /\n maxLength?: number;\n /\n Allows the user to resize the Text Area. This prop is ignored if autoResize is true.\n * @default false\n /\n resizable?: boolean;\n /\n Enables the Text Area to resize itself automatically.\n * @default true\n /\n autoResize?: boolean;\n /\n Display a live character count in relation to the maxLength.\n * @default false\n /\n displayCharCount?: boolean;\n /\n Allow or disallow a value beyond the maxLength.\n * @default true\n */\n hardStop?: boolean;\n\n onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n}\n\nconst warnCharCount = 30;\n\nconst TextArea: FC<TextAreaProps & ForwardProps> = forwardRef(function TextArea(\n props: PropsWithoutRef<TextAreaProps>,\n ref: Ref<HTMLTextAreaElement>\n) {\n const uid = useUID();\n const {\n testId,\n additionalInfo,\n id = uid,\n value,\n defaultValue,\n required = false,\n disabled = false,\n readOnly = false,\n label,\n labelHidden,\n info,\n status,\n resizable = false,\n autoResize = true,\n maxLength,\n displayCharCount = false,\n hardStop = true,\n onChange: onChangeProp,\n onResolveSuggestion,\n ...restProps\n } = props;\n const t = useI18n();\n\n const testIds = useTestIds(testId, getTextAreaTestIds);\n const [charCount, setCharCount] = useState(value?.length ?? defaultValue?.length ?? 0);\n const [focused, setFocused] = useState(false);\n const [textAreaEl, setTextAreaEl] = useElement<HTMLTextAreaElement>();\n const textAreaRef = useConsolidatedRef(ref, setTextAreaEl);\n const prevHeightRef = useRef(0);\n const heightPxRef = useRef(0);\n const focusTimeoutRef = useRef(NaN);\n const { announceAssertive } = useLiveLog();\n\n const controlProp: {\n value?: string;\n defaultValue?: string;\n } = {};\n\n // Conditionally render component as controlled/uncontrolled\n if (hasProp(props, 'value')) {\n controlProp.value = value ?? '';\n } else if (hasProp(props, 'defaultValue')) {\n controlProp.defaultValue = defaultValue ?? '';\n }\n\n const onChange = useCallback(\n (e: ChangeEvent<HTMLTextAreaElement>) => {\n if (maxLength !== undefined) {\n if (e.target.value.length >= maxLength) {\n announceAssertive({ message: t('text_area_character_limit'), type: 'warning' });\n } else if (maxLength > warnCharCount) {\n const prevCharsRemaining = maxLength - charCount;\n const charsRemaining = maxLength - e.target.value.length;\n\n if (charsRemaining < warnCharCount && prevCharsRemaining >= warnCharCount) {\n announceAssertive({\n message: t('text_area_characters_remaining', [`${warnCharCount}`]),\n type: 'warning'\n });\n }\n }\n }\n\n if (!hardStop \|\| maxLength === undefined \|\| e.target.value.length <= maxLength) {\n onChangeProp?.(e);\n setCharCount(e.target.value.length);\n }\n },\n [onChangeProp, charCount, hardStop, maxLength, announceAssertive, t]\n );\n\n const recalculateHeight = useCallback(() => {\n if (!textAreaRef.current) return;\n\n const baseHeightPx = heightPxRef.current;\n const currentHeight = parseFloat(\n getComputedStyle(textAreaRef.current).getPropertyValue('--textarea-height')\n );\n textAreaRef.current.style.marginBlockEnd =\n currentHeight > baseHeightPx\n ? `calc(min(${textAreaMaxHeight}, ${currentHeight}px) - ${baseHeightPx}px)`\n : '0';\n\n textAreaRef.current.style.setProperty('--textarea-height', 'auto');\n\n // Remove scrollbar width to avoid interference with calculation.\n textAreaRef.current.style.setProperty('scrollbar-width', 'none');\n\n const scrollHeight = textAreaRef.current.scrollHeight;\n const borderWidth = textAreaRef.current.offsetHeight - textAreaRef.current.clientHeight;\n // Set height to auto then scrollHeight + borderWidth to resize TextArea to content\n textAreaRef.current.style.setProperty('--textarea-height', `${scrollHeight + borderWidth}px`);\n\n textAreaRef.current.style.removeProperty('margin-block-end');\n\n textAreaRef.current.style.removeProperty('scrollbar-width');\n }, []);\n\n useLayoutEffect(() => {\n if (!textAreaRef.current) return;\n heightPxRef.current = textAreaRef.current.offsetHeight;\n }, [textAreaEl]);\n\n useEffect(() => {\n if (!textAreaRef.current) return;\n\n if (autoResize) {\n recalculateHeight();\n } else {\n textAreaRef.current.style.removeProperty('--textarea-height');\n }\n }, [value, autoResize, recalculateHeight]);\n\n // Recalculate height when the element becomes visible after being displayed none.\n useEffect(() => {\n if (!textAreaEl \|\| !autoResize) return;\n\n prevHeightRef.current = textAreaEl.offsetHeight;\n\n const observer = new ResizeObserver(entries => {\n const currentHeight = entries[0].contentRect.height;\n if (prevHeightRef.current === 0 && currentHeight > 0) {\n const textareaHeight = getComputedStyle(textAreaEl)\n .getPropertyValue('--textarea-height')\n .trim();\n if (!textareaHeight \|\| textareaHeight === 'auto' \|\| textareaHeight === 'unset') {\n heightPxRef.current = textAreaEl.offsetHeight;\n }\n recalculateHeight();\n }\n prevHeightRef.current = currentHeight;\n });\n\n observer.observe(textAreaEl);\n return () => observer.disconnect();\n }, [autoResize, recalculateHeight, textAreaEl]);\n\n useEffect(\n () => () => {\n clearTimeout(focusTimeoutRef.current);\n },\n []\n );\n\n const TextAreaControl = (\n <StyledFormControl\n data-testid={testIds.control}\n ref={textAreaRef}\n id={id}\n aria-describedby={\n // Remove when focused to prevent each change in character count from being announced.\n !focused && displayCharCount && typeof maxLength === 'number'\n ? `${id}-charCount`\n : undefined\n }\n required={required}\n disabled={disabled}\n status={status}\n readOnly={readOnly}\n autoResize={autoResize}\n resizable={autoResize ? false : resizable}\n maxLength={hardStop ? maxLength : undefined}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n {...controlProp}\n {...restProps}\n onChange={onChange}\n onFocus={(e: FocusEvent<HTMLTextAreaElement>) => {\n // Need to delay so screen readers will include the character count in announcement on initial focus.\n // Shorter delays did not seem to work.\n focusTimeoutRef.current = window.setTimeout(() => {\n setFocused(true);\n }, 250);\n\n restProps.onFocus?.(e);\n }}\n onBlur={(e: FocusEvent<HTMLTextAreaElement>) => {\n clearTimeout(focusTimeoutRef.current);\n setFocused(false);\n restProps.onBlur?.(e);\n }}\n as={StyledTextArea}\n />\n );\n\n return label \|\| displayCharCount ? (\n <FormField\n testId={testIds}\n additionalInfo={additionalInfo}\n label={label}\n labelHidden={labelHidden}\n id={id}\n readOnly={readOnly}\n info={info}\n status={status}\n charLimitDisplay={\n displayCharCount && typeof maxLength === 'number' ? (\n <Text id={`${id}-charCount`} readOnly={readOnly} variant='secondary'>\n {maxLength >= 0 ? t('x_of_y', [charCount \|\| '0', maxLength]) : charCount}{' '}\n <VisuallyHiddenText>{t('characters_typed')}</VisuallyHiddenText>\n </Text>\n ) : undefined\n }\n required={required}\n disabled={disabled}\n onResolveSuggestion={onResolveSuggestion}\n >\n {TextAreaControl}\n </FormField>\n ) : (\n TextAreaControl\n );\n});\n\nexport default withTestIds(TextArea, getTextAreaTestIds);\n"]}

package/lib/components/TextArea/TextArea.styles.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
-declare const StyledTextArea: import("styled-components").StyledComponent<"textarea", import("styled-components").DefaultTheme, {
+export declare const textAreaMaxHeight = "90vh";
+declare const StyledTextArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, {
     resizable: boolean;
     autoResize: boolean;
-}, never>;
+}>> & string;
 export default StyledTextArea;
 //# sourceMappingURL=TextArea.styles.d.ts.map

package/lib/components/TextArea/TextArea.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.styles.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,cAAc;eAAgC,OAAO;gBAAc,OAAO;~~SAsB~~/E,CAAC;AAIF,eAAe,cAAc,CAAC"}
1	+ {"version":3,"file":"TextArea.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB,SAAS,CAAC;AAExC,QAAA,MAAM,cAAc;eAAgC,OAAO;gBAAc,OAAO;YAuB/E,CAAC;AAIF,eAAe,cAAc,CAAC"}

package/lib/components/TextArea/TextArea.styles.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
+export const textAreaMaxHeight = '90vh';
 const StyledTextArea = styled.textarea(({ resizable, autoResize }) => {
     return css `
       width: 100%;
@@ -18,6 +19,7 @@ const StyledTextArea = styled.textarea(({ resizable, autoResize }) => {
         : css `
             resize: none;
             overflow: auto;
+            max-height: ${textAreaMaxHeight};
           `}
     `;
 });

package/lib/components/TextArea/TextArea.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.styles.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CACpC,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,EAAE;IAC5B,OAAO,GAAG,CAAA;;oBAEM,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,YAAY,CAAC;iBAC7D,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,OAAO;;QAE7D,UAAU;QACZ,GAAG,CAAA;;OAEF;QACC,SAAS;QACT,CAAC,CAAC,GAAG,CAAA;;;WAGF;QACH,CAAC,CAAC,GAAG,CAAA;;;~~WAGF~~;KACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,eAAe,cAAc,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\n\nconst StyledTextArea = styled.textarea<{ resizable: boolean; autoResize: boolean }>(\n ({ resizable, autoResize }) => {\n return css`\n width: 100%;\n min-height: ${props => props.theme.components['text-area']['min-height']};\n padding: ${props => props.theme.components['text-area'].padding};\n appearance: none;\n ${autoResize &&\n css`\n height: var(--textarea-height, auto);\n `}\n ${resizable\n ? css`\n resize: vertical;\n overflow: hidden;\n `\n : css`\n resize: none;\n overflow: auto;\n `}\n `;\n }\n);\n\nStyledTextArea.defaultProps = defaultThemeProp;\n\nexport default StyledTextArea;\n"]}
1	+ {"version":3,"file":"TextArea.styles.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC;AAExC,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CACpC,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,EAAE;IAC5B,OAAO,GAAG,CAAA;;oBAEM,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,YAAY,CAAC;iBAC7D,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,OAAO;;QAE7D,UAAU;QACZ,GAAG,CAAA;;OAEF;QACC,SAAS;QACT,CAAC,CAAC,GAAG,CAAA;;;WAGF;QACH,CAAC,CAAC,GAAG,CAAA;;;0BAGa,iBAAiB;WAChC;KACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,eAAe,cAAc,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\n\nexport const textAreaMaxHeight = '90vh';\n\nconst StyledTextArea = styled.textarea<{ resizable: boolean; autoResize: boolean }>(\n ({ resizable, autoResize }) => {\n return css`\n width: 100%;\n min-height: ${props => props.theme.components['text-area']['min-height']};\n padding: ${props => props.theme.components['text-area'].padding};\n appearance: none;\n ${autoResize &&\n css`\n height: var(--textarea-height, auto);\n `}\n ${resizable\n ? css`\n resize: vertical;\n overflow: hidden;\n `\n : css`\n resize: none;\n overflow: auto;\n max-height: ${textAreaMaxHeight};\n `}\n `;\n }\n);\n\nStyledTextArea.defaultProps = defaultThemeProp;\n\nexport default StyledTextArea;\n"]}

package/lib/components/Toaster/Toaster.d.ts CHANGED Viewed

@@ -8,7 +8,7 @@ declare module '../../init' {
     }
 }
 declare const _default: FunctionComponent<ToasterProps> & {
-    getTestIds: (testIdProp?: import("../../types").TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["toast"]>;
+    getTestIds: (testIdProp?: import("../..").TestIdProp["testId"]) => import("../..").TestIdsRecord<readonly ["toast"]>;
 };
 export default _default;
 //# sourceMappingURL=Toaster.d.ts.map

package/lib/components/Toaster/Toaster.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,iBAAiB,EAGjB,OAAO,EAIR,MAAM,OAAO,CAAC;AA6Bf,OAAO,YAAY,CAAC;~~AAMpB~~,OAAO,KAAK,EAAgB,YAAY,EAAoC,MAAM,iBAAiB,CAAC;AAEpG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;~~AA8BrD~~,OAAO,QAAQ,YAAY,CAAC;IAC1B,UAAiB,aAAa;QAC5B,cAAc,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;KAC/C;CACF;;;;~~AA4WD~~,wBAAuD"}
1	+ {"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,iBAAiB,EAGjB,OAAO,EAIR,MAAM,OAAO,CAAC;AA6Bf,OAAO,YAAY,CAAC;AAKpB,OAAO,KAAK,EAAgB,YAAY,EAAoC,MAAM,iBAAiB,CAAC;AAEpG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AA2BrD,OAAO,QAAQ,YAAY,CAAC;IAC1B,UAAiB,aAAa;QAC5B,cAAc,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;KAC/C;CACF;;;;AAqWD,wBAAuD"}