npm - @pega/cosmos-react-core - Versions diffs - 4.0.0-dev.13.0 → 4.0.0-dev.14.0 - Mend

@pega/cosmos-react-core 4.0.0-dev.13.0 → 4.0.0-dev.14.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 (321) hide show

package/lib/components/SummaryItem/SummaryItem.test-ids.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SummaryItem.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,~~kIAKvB~~,CAAC"}
1	+ {"version":3,"file":"SummaryItem.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,4HAKvB,CAAC"}

package/lib/components/Tabs/Tab.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAoC,MAAM,OAAO,CAAC;AAOxE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,UAAU,QAAQ;IAChB,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,OAAO,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6DAA6D;IAC7D,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC/B,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CAC3B;~~AAsHD~~,eAAO,MAAM,SAAS,~~gNA0BrB~~,CAAC;AAIF,QAAA,MAAM,GAAG,EAAE,EAAE,CAAC,QAAQ,GAAG,YAAY,CAYpC,CAAC;AAEF,eAAe,GAAG,CAAC"}
1	+ {"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAoC,MAAM,OAAO,CAAC;AAOxE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,UAAU,QAAQ;IAChB,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,OAAO,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6DAA6D;IAC7D,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC/B,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CAC3B;AA4HD,eAAO,MAAM,SAAS,gNA6BrB,CAAC;AAIF,QAAA,MAAM,GAAG,EAAE,EAAE,CAAC,QAAQ,GAAG,YAAY,CAYpC,CAAC;AAEF,eAAe,GAAG,CAAC"}

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

@@ -117,31 +117,34 @@ const getVerticalStyles = ({ selected, theme }) => {
     }
   `;
 };
-export const StyledTab = styled(BareButton) `
-  position: relative;
-  background: none;
-  cursor: pointer;
+export const StyledTab = styled(BareButton)(({ theme, tabType, selected }) => css `
+    position: relative;
+    background: none;
+    cursor: pointer;
+    white-space: nowrap;
-  ${props => props.tabType === 'horizontal' ? getHorizontalStyles(props) : getVerticalStyles(props)}
-  ${props => props.selected &&
+    ${selected &&
     css `
       font-weight: bold;
     `}
-  white-space: nowrap;
-  & + & {
-    margin-inline-start: 0;
-  }
+    & + & {
+      margin-inline-start: 0;
+    }
-  &:focus {
-    outline: none;
-  }
+    &:focus {
+      outline: none;
+    }
-  &:disabled {
-    cursor: not-allowed;
-    opacity: ${props => props.theme.base['disabled-opacity']};
-  }
-`;
+    &:disabled {
+      cursor: not-allowed;
+      opacity: ${theme.base['disabled-opacity']};
+    }
+    ${tabType === 'horizontal'
+    ? getHorizontalStyles({ theme, selected })
+    : getVerticalStyles({ theme, selected })}
+  `);
 StyledTab.defaultProps = defaultThemeProp;
 const Tab = forwardRef(({ selected, content, count, type, disabled, ...restProps }, ref) => {
     return (_jsxs(StyledTab, { ref: ref, selected: selected, tabType: type, disabled: disabled, ...restProps, children: [_jsx("span", { "data-content": content, children: content }), count] }));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,UAAU,EAAwB,MAAM,OAAO,CAAC;AACxE,OAAO,MAAM,EAAE,EAAe,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAsB9C,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,GAAG,CAAA;;;wBAGlB,KAAK;;CAE5B,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAAC,~~EAAE~~,QAAQ,~~EAAE~~,KAAK,~~EAA+B~~,EAAE,EAAE;~~IAC/E~~,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;IACpD,MAAM,cAAc,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC,IAAI,EAAE,CAAC;IAC/E,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC;IAE/B,OAAO,GAAG,CAAA;;;;uBAIW,OAAO;0BACJ,OAAO;;;;;eAKlB,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;;;;;;;;;;;;;;;;;oBAkB3D,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc;iBAC3C,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;;;;;;;;;;QAUpC,WAAW,CAAC,cAAc,CAAC;;;;;;QAM3B,WAAW,CAAC,cAAc,CAAC;oBACf,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;;;;MAI9C,WAAW;wCACuB,OAAO;;GAE5C,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,~~EAAE~~,QAAQ,~~EAAE~~,KAAK,~~EAA+B~~,EAAE,EAAE;~~IAC7E~~,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IACtD,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;IACpD,MAAM,cAAc,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC,IAAI,EAAE,CAAC;IAC/E,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC;IAE/B,OAAO,GAAG,CAAA;;;;;aAKC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;oBAE/B,WAAW;yBACN,OAAO;;0BAEN,OAAO;;;;oCAIG,WAAW;;;;;;iBAM9B,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;;;;;oBAKxB,YAAY;;;;QAIxB,WAAW,CAAC,cAAc,CAAC;;;;;;QAM3B,WAAW,CAAC,YAAY,CAAC;0CACS,YAAY;;;GAGnD,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,~~CAAgB;;;;;IAKvD~~,~~KAAK,~~CAAC,EAAE,~~CACR,~~KAAK,~~CAAC~~,OAAO,~~KAAK~~,~~YAAY~~,~~CAAC~~,~~CAAC~~,CAAC,~~mBAAmB~~,~~CAAC~~,KAAK,CAAC,~~CAAC~~,CAAC,CAAC,~~iBAAiB~~,~~CAAC,~~KAAK,~~CAAC~~;~~IACtF~~,~~KAAK~~,CAAC,EAAE,~~CACR,~~KAAK,~~CAAC~~,QAAQ;~~IACd~~,~~GAAG~~,~~CAAA;;KAEF;;;;;;;;;;;;;eAaU~~,~~KAAK~~,CAAC,EAAE,~~CAAC,~~KAAK,~~CAAC~~,~~KAAK~~,~~CAAC~~,~~IAAI,~~CAAC,~~kBAAkB~~,CAAC~~;;CAE3D,CAAC~~;AAEF,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1C,MAAM,GAAG,GAAgC,UAAU,CACjD,CACE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,SAAS,EAA6B,EACrF,GAA2B,EAC3B,EAAE;IACF,OAAO,CACL,MAAC,SAAS,IAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,KAAM,SAAS,aACvF,+BAAoB,OAAO,YAAG,OAAO,GAAQ,EAC5C,KAAK,IACI,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,GAAG,CAAC","sourcesContent":["import { FC, ReactNode, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { StyledProps, css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { StyledCount } from '../Badges/Count';\nimport { ForwardProps } from '../../types';\nimport BareButton from '../Button/BareButton';\n\nimport { TabsProps } from './Tabs.types';\n\ninterface TabProps {\n /** Indicates if this Tab is active. /\n selected: boolean;\n /* The text to display as the name of the Tab. /\n content: string;\n /* A number to associate with the Tab. /\n count?: ReactNode;\n /* Determines the direction in which the Tab will render. /\n type: TabsProps['type'];\n /* Disables the tab if true /\n disabled?: boolean;\n}\n\nexport interface StyledTabProps {\n selected: TabProps['selected'];\n tabType: TabProps['type'];\n}\n\nconst activeStyle = (color: string) => css`\n ::after {\n display: block;\n background-color: ${color};\n }\n`;\n\nconst getHorizontalStyles = ({ selected, theme }: StyledProps<StyledTabProps>) => {\n const primaryColor = theme.base.palette.interactive;\n const lightenedColor = tryCatch(() => transparentize(0.3, primaryColor)) ?? '';\n const { spacing } = theme.base;\n\n return css`\n align-items: center;\n display: flex;\n flex-direction: row;\n height: calc(4 ${spacing});\n padding: 0 calc(2 * ${spacing});\n border: none;\n text-decoration: none;\n\n span:first-of-type {\n color: ${selected ? primaryColor : theme.base.palette['foreground-color']};\n display: inline-block;\n\n ::before {\n content: attr(data-content);\n display: block;\n font-weight: bold;\n height: 0;\n overflow: hidden;\n visibility: hidden;\n }\n }\n\n &:first-child {\n margin-left: 0;\n }\n\n ::after {\n background: ${selected ? primaryColor : lightenedColor};\n display: ${selected ? 'block' : 'none'};\n content: '';\n position: absolute;\n height: 0.125rem;\n bottom: 0;\n left: 0;\n right: 0;\n }\n\n &:hover&:not(:disabled) {\n ${activeStyle(lightenedColor)}\n text-decoration: none;\n }\n\n &:focus,\n &:not([disabled]):focus {\n ${activeStyle(lightenedColor)}\n box-shadow: ${theme.base.shadow['focus-inset']};\n text-decoration: none;\n }\n\n ${StyledCount} {\n margin-inline-start: calc(0.5 * ${spacing});\n }\n `;\n};\n\nconst getVerticalStyles = ({ selected, theme }: StyledProps<StyledTabProps>) => {\n const borderColor = theme.base.palette['border-line'];\n const primaryColor = theme.base.palette.interactive;\n const lightenedColor = tryCatch(() => transparentize(0.5, primaryColor)) ?? '';\n const { spacing } = theme.base;\n\n return css`\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-style: solid;\n color: ${theme.base.palette['foreground-color']};\n border-width: 0.0625rem 0;\n border-color: ${borderColor};\n height: calc(5.5 * ${spacing});\n margin-top: -0.0625rem;\n padding: 0 calc(2 * ${spacing});\n text-decoration: none;\n\n &:first-child {\n border-top: 0.0625rem solid ${borderColor};\n }\n\n ::after {\n content: '';\n position: absolute;\n display: ${selected ? 'block' : 'none'};\n top: 0;\n bottom: 0;\n right: 0;\n width: 0.25rem;\n background: ${primaryColor};\n }\n\n &:hover&:not(:disabled) {\n ${activeStyle(lightenedColor)}\n text-decoration: none;\n }\n\n &:focus,\n &:not([disabled]):focus {\n ${activeStyle(primaryColor)}\n box-shadow: inset 0 0 0 0.0625rem ${primaryColor};\n text-decoration: none;\n }\n `;\n};\n\nexport const StyledTab = styled(BareButton)<StyledTabProps~~>`\~~n position: relative;\n background: none;\n cursor: pointer;\n~~\n ${props =>\n~~ ~~props.tabType === 'horizontal' ? getHorizontalStyles(props)~~ : ~~getVerticalStyles(props)}~~\n ${~~props =>\n props.~~selected &&\n css`\n font-weight: bold;\n `}\n ~~white-space: nowrap;\n~~\n & + & {\n margin-inline-start: 0;\n }\n\n &:focus {\n outline: none;\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: ${~~props => props.~~theme.base['disabled-opacity']};\n }\n~~`;\~~n\nStyledTab.defaultProps = defaultThemeProp;\n\nconst Tab: FC<TabProps & ForwardProps> = forwardRef(\n (\n { selected, content, count, type, disabled, ...restProps }: PropsWithoutRef<TabProps>,\n ref: Ref<HTMLButtonElement>\n ) => {\n return (\n <StyledTab ref={ref} selected={selected} tabType={type} disabled={disabled} {...restProps}>\n <span data-content={content}>{content}</span>\n {count}\n </StyledTab>\n );\n }\n);\n\nexport default Tab;\n"]}
1	+ {"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, ReactNode, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { StyledProps, css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { StyledCount } from '../Badges/Count';\nimport { ForwardProps } from '../../types';\nimport BareButton from '../Button/BareButton';\n\nimport { TabsProps } from './Tabs.types';\n\ninterface TabProps {\n /** Indicates if this Tab is active. /\n selected: boolean;\n /* The text to display as the name of the Tab. /\n content: string;\n /* A number to associate with the Tab. /\n count?: ReactNode;\n /* Determines the direction in which the Tab will render. /\n type: TabsProps['type'];\n /* Disables the tab if true /\n disabled?: boolean;\n}\n\nexport interface StyledTabProps {\n selected: TabProps['selected'];\n tabType: TabProps['type'];\n}\n\nconst activeStyle = (color: string) => css`\n ::after {\n display: block;\n background-color: ${color};\n }\n`;\n\nconst getHorizontalStyles = ({\n selected,\n theme\n}: Pick<StyledProps<StyledTabProps>, 'theme' \| 'selected'>) => {\n const primaryColor = theme.base.palette.interactive;\n const lightenedColor = tryCatch(() => transparentize(0.3, primaryColor)) ?? '';\n const { spacing } = theme.base;\n\n return css`\n align-items: center;\n display: flex;\n flex-direction: row;\n height: calc(4 ${spacing});\n padding: 0 calc(2 * ${spacing});\n border: none;\n text-decoration: none;\n\n span:first-of-type {\n color: ${selected ? primaryColor : theme.base.palette['foreground-color']};\n display: inline-block;\n\n ::before {\n content: attr(data-content);\n display: block;\n font-weight: bold;\n height: 0;\n overflow: hidden;\n visibility: hidden;\n }\n }\n\n &:first-child {\n margin-left: 0;\n }\n\n ::after {\n background: ${selected ? primaryColor : lightenedColor};\n display: ${selected ? 'block' : 'none'};\n content: '';\n position: absolute;\n height: 0.125rem;\n bottom: 0;\n left: 0;\n right: 0;\n }\n\n &:hover&:not(:disabled) {\n ${activeStyle(lightenedColor)}\n text-decoration: none;\n }\n\n &:focus,\n &:not([disabled]):focus {\n ${activeStyle(lightenedColor)}\n box-shadow: ${theme.base.shadow['focus-inset']};\n text-decoration: none;\n }\n\n ${StyledCount} {\n margin-inline-start: calc(0.5 * ${spacing});\n }\n `;\n};\n\nconst getVerticalStyles = ({\n selected,\n theme\n}: Pick<StyledProps<StyledTabProps>, 'theme' \| 'selected'>) => {\n const borderColor = theme.base.palette['border-line'];\n const primaryColor = theme.base.palette.interactive;\n const lightenedColor = tryCatch(() => transparentize(0.5, primaryColor)) ?? '';\n const { spacing } = theme.base;\n\n return css`\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-style: solid;\n color: ${theme.base.palette['foreground-color']};\n border-width: 0.0625rem 0;\n border-color: ${borderColor};\n height: calc(5.5 * ${spacing});\n margin-top: -0.0625rem;\n padding: 0 calc(2 * ${spacing});\n text-decoration: none;\n\n &:first-child {\n border-top: 0.0625rem solid ${borderColor};\n }\n\n ::after {\n content: '';\n position: absolute;\n display: ${selected ? 'block' : 'none'};\n top: 0;\n bottom: 0;\n right: 0;\n width: 0.25rem;\n background: ${primaryColor};\n }\n\n &:hover&:not(:disabled) {\n ${activeStyle(lightenedColor)}\n text-decoration: none;\n }\n\n &:focus,\n &:not([disabled]):focus {\n ${activeStyle(primaryColor)}\n box-shadow: inset 0 0 0 0.0625rem ${primaryColor};\n text-decoration: none;\n }\n `;\n};\n\nexport const StyledTab = styled(BareButton)<StyledTabProps>(\n ({ theme, tabType, selected }) => css`\n position: relative;\n background: none;\n cursor: pointer;\n white-space: nowrap;\n\n ${selected &&\n css`\n font-weight: bold;\n `}\n\n & + & {\n margin-inline-start: 0;\n }\n\n &:focus {\n outline: none;\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: ${theme.base['disabled-opacity']};\n }\n\n ${tabType === 'horizontal'\n ? getHorizontalStyles({ theme, selected })\n : getVerticalStyles({ theme, selected })}\n `\n);\n\nStyledTab.defaultProps = defaultThemeProp;\n\nconst Tab: FC<TabProps & ForwardProps> = forwardRef(\n (\n { selected, content, count, type, disabled, ...restProps }: PropsWithoutRef<TabProps>,\n ref: Ref<HTMLButtonElement>\n ) => {\n return (\n <StyledTab ref={ref} selected={selected} tabType={type} disabled={disabled} {...restProps}>\n <span data-content={content}>{content}</span>\n {count}\n </StyledTab>\n );\n }\n);\n\nexport default Tab;\n"]}

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

@@ -55,7 +55,7 @@ const TextArea = forwardRef((props, ref) => {
             as: StyledTextArea
         } }));
     return label || displayCharCount ? (_jsx(FormField, { ...{
-            testId: testIds.root,
+            testId: testIds,
             additionalInfo,
             label,
             labelHidden,

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":"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~~,CAAC,IAAI~~;~~YACpB~~,cAAc;YACd,KAAK;YACL,WAAW;YACX,EAAE;YACF,QAAQ;YACR,IAAI;YACJ,MAAM;YACN,gBAAgB,EACd,gBAAgB,IAAI,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,CAClD,KAAC,IAAI,IACH,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,YAE1E,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,SAAS,IAAI,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,GACnE,CACR,CAAC,CAAC,CAAC,SAAS;YACf,QAAQ;YACR,QAAQ;YACR,mBAAmB;SACpB,YAEA,IAAI,GACK,CACb,CAAC,CAAC,CAAC,CACF,IAAI,CACL,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import {\n FC,\n Ref,\n forwardRef,\n PropsWithoutRef,\n ChangeEvent,\n useCallback,\n useState,\n ChangeEventHandler,\n useEffect\n} from 'react';\n\nimport { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport { hasProp } from '../../utils';\nimport { useAutoResize, useConsolidatedRef, useI18n, useTestIds, useUID } from '../../hooks';\nimport Text from '../Text';\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.\n * @default false\n /\n resizable?: boolean;\n /\n Enables the Text Area to resize itself automatically.\n * @default false\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(\n (props: PropsWithoutRef<TextAreaProps>, ref: Ref<HTMLTextAreaElement>) => {\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 = false,\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\n const [textAreaRef, resizeTextArea] = useAutoResize<HTMLTextAreaElement>(undefined, 100);\n const consolidatedRef = useConsolidatedRef(textAreaRef, ref);\n const [charCount, setCharCount] = useState(0);\n\n const controlProp: {\n value?: string;\n defaultValue?: string;\n } = {};\n\n useEffect(() => {\n if ('value' in props) {\n setCharCount(props.value ? props.value.length : 0);\n } else if ('defaultValue' in props) {\n setCharCount(props.defaultValue ? props.defaultValue.length : 0);\n }\n }, [props]);\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 resizeTextArea();\n }\n },\n [onChangeProp, resizeTextArea, hardStop, maxLength]\n );\n\n const Comp = (\n <StyledFormControl\n {...{\n 'data-testid': testIds.control,\n ref: autoResize ? consolidatedRef : ref,\n id,\n required,\n disabled,\n status,\n readOnly,\n resizable,\n maxLength: hardStop ? maxLength : undefined,\n hasSuggestion: status === 'pending' && !!onResolveSuggestion,\n ...controlProp,\n ...restProps,\n onChange,\n as: StyledTextArea\n }}\n />\n );\n\n return label \|\| displayCharCount ? (\n <FormField\n {...{\n testId: testIds~~.root~~,\n additionalInfo,\n label,\n labelHidden,\n id,\n readOnly,\n info,\n status,\n charLimitDisplay:\n displayCharCount && typeof maxLength === 'number' ? (\n <Text\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 </Text>\n ) : undefined,\n required,\n disabled,\n onResolveSuggestion\n }}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default TextArea;\n"]}
1	+ {"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FC,\n Ref,\n forwardRef,\n PropsWithoutRef,\n ChangeEvent,\n useCallback,\n useState,\n ChangeEventHandler,\n useEffect\n} from 'react';\n\nimport { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport { hasProp } from '../../utils';\nimport { useAutoResize, useConsolidatedRef, useI18n, useTestIds, useUID } from '../../hooks';\nimport Text from '../Text';\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.\n * @default false\n /\n resizable?: boolean;\n /\n Enables the Text Area to resize itself automatically.\n * @default false\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(\n (props: PropsWithoutRef<TextAreaProps>, ref: Ref<HTMLTextAreaElement>) => {\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 = false,\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\n const [textAreaRef, resizeTextArea] = useAutoResize<HTMLTextAreaElement>(undefined, 100);\n const consolidatedRef = useConsolidatedRef(textAreaRef, ref);\n const [charCount, setCharCount] = useState(0);\n\n const controlProp: {\n value?: string;\n defaultValue?: string;\n } = {};\n\n useEffect(() => {\n if ('value' in props) {\n setCharCount(props.value ? props.value.length : 0);\n } else if ('defaultValue' in props) {\n setCharCount(props.defaultValue ? props.defaultValue.length : 0);\n }\n }, [props]);\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 resizeTextArea();\n }\n },\n [onChangeProp, resizeTextArea, hardStop, maxLength]\n );\n\n const Comp = (\n <StyledFormControl\n {...{\n 'data-testid': testIds.control,\n ref: autoResize ? consolidatedRef : ref,\n id,\n required,\n disabled,\n status,\n readOnly,\n resizable,\n maxLength: hardStop ? maxLength : undefined,\n hasSuggestion: status === 'pending' && !!onResolveSuggestion,\n ...controlProp,\n ...restProps,\n onChange,\n as: StyledTextArea\n }}\n />\n );\n\n return label \|\| displayCharCount ? (\n <FormField\n {...{\n testId: testIds,\n additionalInfo,\n label,\n labelHidden,\n id,\n readOnly,\n info,\n status,\n charLimitDisplay:\n displayCharCount && typeof maxLength === 'number' ? (\n <Text\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 </Text>\n ) : undefined,\n required,\n disabled,\n onResolveSuggestion\n }}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default TextArea;\n"]}

package/lib/components/TextArea/TextArea.test-ids.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-export declare const getTextAreaTestIds: (testIdProp?: string | undefined) => import("../../utils").TestIdsRecord<readonly ["control"]>;
+export declare const getTextAreaTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 //# sourceMappingURL=TextArea.test-ids.d.ts.map

package/lib/components/TextArea/TextArea.test-ids.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.test-ids.ts"],"names":[],"mappings":"~~AAEA~~,eAAO,MAAM,kBAAkB,~~gGAAmD~~,CAAC"}
1	+ {"version":3,"file":"TextArea.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.test-ids.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,wKAAgE,CAAC"}

package/lib/components/TextArea/TextArea.test-ids.js CHANGED Viewed

@@ -1,3 +1,4 @@
 import { createTestIds } from '../../utils';
-export const getTextAreaTestIds = createTestIds('text-area', ['control']);
+import { elements } from '../FormField/FormField.test-ids';
+export const getTextAreaTestIds = createTestIds('text-area', ['control', ...elements]);
 //# sourceMappingURL=TextArea.test-ids.js.map

package/lib/components/TextArea/TextArea.test-ids.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.test-ids.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;~~AAE5C~~,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,CAAU,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const getTextAreaTestIds = createTestIds('text-area', ['control'] as const);\n"]}
1	+ {"version":3,"file":"TextArea.test-ids.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAE3D,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,EAAE,GAAG,QAAQ,CAAU,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\nimport { elements } from '../FormField/FormField.test-ids';\n\nexport const getTextAreaTestIds = createTestIds('text-area', ['control', ...elements] as const);\n"]}

package/lib/hooks/index.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ export { default as useAfterInitialEffect } from './useAfterInitialEffect';
 export { default as useArrows } from './useArrows';
 export { default as useAutoResize } from './useAutoResize';
 export { default as useBreakpoint } from './useBreakpoint';
+export { default as useChToPxConversionFactor } from './useChToPxConversionFactor';
 export { default as useConfiguration } from './useConfiguration';
 export { default as useConsolidatedRef } from './useConsolidatedRef';
 export { default as useDirection } from './useDirection';

package/lib/hooks/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,IAAI,mBAAmB,EAC9B,yBAAyB,EACzB,iBAAiB,EAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,IAAI,mBAAmB,EAC9B,yBAAyB,EACzB,iBAAiB,EAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/lib/hooks/index.js CHANGED Viewed

@@ -3,6 +3,7 @@ export { default as useAfterInitialEffect } from './useAfterInitialEffect';
 export { default as useArrows } from './useArrows';
 export { default as useAutoResize } from './useAutoResize';
 export { default as useBreakpoint } from './useBreakpoint';
+export { default as useChToPxConversionFactor } from './useChToPxConversionFactor';
 export { default as useConfiguration } from './useConfiguration';
 export { default as useConsolidatedRef } from './useConsolidatedRef';
 export { default as useDirection } from './useDirection';

package/lib/hooks/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,IAAI,mBAAmB,EAE9B,iBAAiB,EAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC","sourcesContent":["export {\n default as useActiveDescendant,\n UseActiveDescendantConfig,\n useLazyDescendant\n} from './useActiveDescendant';\nexport { default as useAfterInitialEffect } from './useAfterInitialEffect';\nexport { default as useArrows } from './useArrows';\nexport { default as useAutoResize } from './useAutoResize';\nexport { default as useBreakpoint } from './useBreakpoint';\nexport { default as useConfiguration } from './useConfiguration';\nexport { default as useConsolidatedRef } from './useConsolidatedRef';\nexport { default as useDirection } from './useDirection';\nexport { default as useDraggable } from './useDraggable';\nexport { default as useElement } from './useElement';\nexport { default as useEscape } from './useEscape';\nexport { default as useEvent } from './useEvent';\nexport { default as useFocusTrap } from './useFocusTrap';\nexport { default as useFocusWithin } from './useFocusWithin';\nexport { default as useI18n } from './useI18n';\nexport { default as useInputFormatter } from './useInputFormatter';\nexport { default as useItemIntersection } from './useItemIntersection';\nexport { default as useLiveLog } from './useLiveLog';\nexport { default as useLongPress } from './useLongPress';\nexport { default as useModalContext } from './useModalContext';\nexport { default as useModalManager } from './useModalManager';\nexport { default as useOS } from './useOS';\nexport { default as useOuterEvent } from './useOuterEvent';\nexport { default as usePrevious } from './usePrevious';\nexport { default as useScrollStick } from './useScrollStick';\nexport { default as useScrollToggle } from './useScrollToggle';\nexport { default as useTestIds } from './useTestIds';\nexport { default as useTheme } from './useTheme';\nexport { default as useToaster } from './useToaster';\nexport { default as useTransitionState } from './useTransitionState';\nexport { default as useTriggerableEffect } from './useTriggerableEffect';\nexport { default as useTriggerableLayoutEffect } from './useTriggerableLayoutEffect';\nexport { default as useUID } from './useUID';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,IAAI,mBAAmB,EAE9B,iBAAiB,EAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC","sourcesContent":["export {\n default as useActiveDescendant,\n UseActiveDescendantConfig,\n useLazyDescendant\n} from './useActiveDescendant';\nexport { default as useAfterInitialEffect } from './useAfterInitialEffect';\nexport { default as useArrows } from './useArrows';\nexport { default as useAutoResize } from './useAutoResize';\nexport { default as useBreakpoint } from './useBreakpoint';\nexport { default as useChToPxConversionFactor } from './useChToPxConversionFactor';\nexport { default as useConfiguration } from './useConfiguration';\nexport { default as useConsolidatedRef } from './useConsolidatedRef';\nexport { default as useDirection } from './useDirection';\nexport { default as useDraggable } from './useDraggable';\nexport { default as useElement } from './useElement';\nexport { default as useEscape } from './useEscape';\nexport { default as useEvent } from './useEvent';\nexport { default as useFocusTrap } from './useFocusTrap';\nexport { default as useFocusWithin } from './useFocusWithin';\nexport { default as useI18n } from './useI18n';\nexport { default as useInputFormatter } from './useInputFormatter';\nexport { default as useItemIntersection } from './useItemIntersection';\nexport { default as useLiveLog } from './useLiveLog';\nexport { default as useLongPress } from './useLongPress';\nexport { default as useModalContext } from './useModalContext';\nexport { default as useModalManager } from './useModalManager';\nexport { default as useOS } from './useOS';\nexport { default as useOuterEvent } from './useOuterEvent';\nexport { default as usePrevious } from './usePrevious';\nexport { default as useScrollStick } from './useScrollStick';\nexport { default as useScrollToggle } from './useScrollToggle';\nexport { default as useTestIds } from './useTestIds';\nexport { default as useTheme } from './useTheme';\nexport { default as useToaster } from './useToaster';\nexport { default as useTransitionState } from './useTransitionState';\nexport { default as useTriggerableEffect } from './useTriggerableEffect';\nexport { default as useTriggerableLayoutEffect } from './useTriggerableLayoutEffect';\nexport { default as useUID } from './useUID';\n"]}

package/lib/hooks/useBreakpoint.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0C,SAAS,EAAE,MAAM,OAAO,CAAC;~~AAS1E~~;;;;;GAKG;AACH,QAAA,MAAM,aAAa,eACL,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;oBAM1B,UAAU,OAAO,CAAC,GAAG,SAAS;;;~~aAkEjD~~,CAAC;AAEF,eAAe,aAAa,CAAC"}
1	+ {"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0C,SAAS,EAAE,MAAM,OAAO,CAAC;AAU1E;;;;;GAKG;AACH,QAAA,MAAM,aAAa,eACL,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;oBAM1B,UAAU,OAAO,CAAC,GAAG,SAAS;;;aAuEjD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/hooks/useBreakpoint.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { useState, useLayoutEffect, useCallback } from 'react';
 import { windowIsAvailable, debounce } from '../utils';
+import useChToPxConversionFactor from './useChToPxConversionFactor';
 import useTheme from './useTheme';
 // We should be able to safely capture once as the computed root font size is unlikely to change during normal runtime.
 const rootFontSize = window.getComputedStyle(document.documentElement).fontSize;
@@ -13,6 +14,7 @@ const useBreakpoint = (breakpoint, { breakpointRef, defaultValue = false, themeP
     const { base: { breakpoints, 'content-width': contentWidth } } = useTheme();
     const breakpointVal = themeProp === 'content-width' ? contentWidth[breakpoint] : breakpoints[breakpoint];
     const [matches, setMatches] = useState(windowIsAvailable ? window.matchMedia(`(min-width: ${breakpointVal})`).matches : !!defaultValue);
+    const chToPxConversionFactor = useChToPxConversionFactor();
     const onResize = useCallback((e) => {
         setMatches(e.matches);
     }, []);
@@ -23,7 +25,8 @@ const useBreakpoint = (breakpoint, { breakpointRef, defaultValue = false, themeP
                 const matchesBreakpoint = entries.some(({ target, contentRect }) => {
                     if (target !== breakpointRef.current)
                         return;
-                    return contentRect.width >= parseFloat(breakpointVal) * parseFloat(rootFontSize);
+                    const multiplier = themeProp === 'breakpoints' ? parseFloat(rootFontSize) : chToPxConversionFactor;
+                    return contentRect.width >= parseFloat(breakpointVal) * multiplier;
                 });
                 setMatches(matchesBreakpoint);
             });

package/lib/hooks/useBreakpoint.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useBreakpoint.js","sourceRoot":"","sources":["../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,WAAW,EAAa,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEvD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,uHAAuH;AACvH,MAAM,YAAY,GAAG,MAAM,CAAC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,QAAQ,CAAC;AAEhF;;;;;GAKG;AACH,MAAM,aAAa,GAAG,CACpB,UAA4C,EAC5C,EACE,aAAa,EACb,YAAY,GAAG,KAAK,EACpB,SAAS,GAAG,aAAa,KAKvB,EAAE,EACN,EAAE;IACF,MAAM,EACJ,IAAI,EAAE,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,EACrD,GAAG,QAAQ,EAAE,CAAC;IACf,MAAM,aAAa,GACjB,SAAS,KAAK,eAAe,CAAC,CAAC,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAErF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CACpC,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,eAAe,aAAa,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAChG,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAsB,EAAE,EAAE;QACtD,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IACxB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,eAAe,CAAC,GAAG,EAAE;QACnB,6CAA6C;QAC7C,IAAI,aAAa,IAAI,aAAa,CAAC,OAAO,EAAE;YAC1C,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;gBAC5C,MAAM,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,EAAE;oBACjE,IAAI,MAAM,KAAK,aAAa,CAAC,OAAO;wBAAE,OAAO;oBAE7C,OAAO,WAAW,CAAC,KAAK,IAAI,UAAU,CAAC,aAAa,CAAC,GAAG,UAAU,CAAC~~,YAAY,CAAC,CAAC~~;~~gBACnF~~,CAAC,CAAC,CAAC;gBAEH,UAAU,CAAC,iBAAiB,CAAC,CAAC;YAChC,CAAC,CAAC,CAAC;YAEH,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YAExC,OAAO,GAAG,EAAE;gBACV,QAAQ,CAAC,UAAU,EAAE,CAAC;YACxB,CAAC,CAAC;SACH;~~QACD~~,mCAAmC;QACnC,IAAI,iBAAiB,EAAE;YACrB,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,aAAa,GAAG,CAAC,CAAC;YACtE,MAAM,mBAAmB,GAAG,kBAAkB,IAAI,UAAU,CAAC;YAC7D,MAAM,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE;gBAClC,UAAU,CAAC,MAAM,CAAC,UAAU,IAAI,QAAQ,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC,CAAC;YAC/D,CAAC,EAAE,GAAG,CAAC,CAAC;YAER,+DAA+D;YAC/D,IAAI,mBAAmB,EAAE;gBACvB,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;gBAChD,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;aAChC;iBAAM;gBACL,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;gBACjD,UAAU,CAAC,MAAM,CAAC,UAAU,IAAI,QAAQ,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC,CAAC;aAC9D;YAED,OAAO,GAAG,EAAE;gBACV,+DAA+D;gBAC/D,IAAI,mBAAmB;oBAAE,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;qBACvE;oBACH,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;iBACrD;YACH,CAAC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC;IAE7B,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { useState, useLayoutEffect, useCallback, RefObject } from 'react';\n\nimport { windowIsAvailable, debounce } from '../utils';\n\nimport useTheme from './useTheme';\n\n// We should be able to safely capture once as the computed root font size is unlikely to change during normal runtime.\nconst rootFontSize = window.getComputedStyle(document.documentElement).fontSize;\n\n/*\n @example const breakpointActive = useBreakpoint(breakpoint);\n * @param breakpoint The string indicator for the breakpoint that should be checked for validity.\n * @param options\n * @returns breakpointActive:: A boolean indicating if the given breakpoint is active or not. If false, the breakpoint is too big for the screen size.\n /\nconst useBreakpoint = (\n breakpoint: 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl',\n {\n breakpointRef,\n defaultValue = false,\n themeProp = 'breakpoints'\n }: {\n breakpointRef?: RefObject<Element> \| undefined;\n defaultValue?: boolean;\n themeProp?: 'breakpoints' \| 'content-width';\n } = {}\n) => {\n const {\n base: { breakpoints, 'content-width': contentWidth }\n } = useTheme();\n const breakpointVal =\n themeProp === 'content-width' ? contentWidth[breakpoint] : breakpoints[breakpoint];\n\n const [matches, setMatches] = useState(\n windowIsAvailable ? window.matchMedia(`(min-width: ${breakpointVal})`).matches : !!defaultValue\n );\n\n const onResize = useCallback((e: MediaQueryListEvent) => {\n setMatches(e.matches);\n }, []);\n\n useLayoutEffect(() => {\n // Breakpoint handling for contained elements\n if (breakpointRef && breakpointRef.current) {\n const observer = new ResizeObserver(entries => {\n const matchesBreakpoint = entries.some(({ target, contentRect }) => {\n if (target !== breakpointRef.current) return;\n\n return contentRect.width >= parseFloat(breakpointVal) ~~parseFloat(rootFontSize)~~;\n });\n\n setMatches(matchesBreakpoint);\n });\n\n observer.observe(breakpointRef.current);\n\n return () => {\n observer.disconnect();\n };\n }\n // Breakpoint handling for viewport\n if (windowIsAvailable) {\n const mediaMatch = window.matchMedia(`(min-width: ${breakpointVal})`);\n const mediaMatchAvailable = 'addEventListener' in mediaMatch;\n const resizeHandler = debounce(() => {\n setMatches(window.innerWidth >= parseInt(breakpointVal, 10));\n }, 100);\n\n // Need to check useMatchMedia in order to support unit testing\n if (mediaMatchAvailable) {\n mediaMatch.addEventListener('change', onResize);\n setMatches(mediaMatch.matches);\n } else {\n window.addEventListener('resize', resizeHandler);\n setMatches(window.innerWidth >= parseInt(breakpointVal, 10));\n }\n\n return () => {\n // Need to check useMatchMedia in order to support unit testing\n if (mediaMatchAvailable) mediaMatch.removeEventListener('change', onResize);\n else {\n window.removeEventListener('resize', resizeHandler);\n }\n };\n }\n }, [breakpointRef?.current]);\n\n return matches;\n};\n\nexport default useBreakpoint;\n"]}
1	+ {"version":3,"file":"useBreakpoint.js","sourceRoot":"","sources":["../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState, useLayoutEffect, useCallback, RefObject } from 'react';\n\nimport { windowIsAvailable, debounce } from '../utils';\n\nimport useChToPxConversionFactor from './useChToPxConversionFactor';\nimport useTheme from './useTheme';\n\n// We should be able to safely capture once as the computed root font size is unlikely to change during normal runtime.\nconst rootFontSize = window.getComputedStyle(document.documentElement).fontSize;\n\n/*\n @example const breakpointActive = useBreakpoint(breakpoint);\n * @param breakpoint The string indicator for the breakpoint that should be checked for validity.\n * @param options\n * @returns breakpointActive:: A boolean indicating if the given breakpoint is active or not. If false, the breakpoint is too big for the screen size.\n /\nconst useBreakpoint = (\n breakpoint: 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl',\n {\n breakpointRef,\n defaultValue = false,\n themeProp = 'breakpoints'\n }: {\n breakpointRef?: RefObject<Element> \| undefined;\n defaultValue?: boolean;\n themeProp?: 'breakpoints' \| 'content-width';\n } = {}\n) => {\n const {\n base: { breakpoints, 'content-width': contentWidth }\n } = useTheme();\n const breakpointVal =\n themeProp === 'content-width' ? contentWidth[breakpoint] : breakpoints[breakpoint];\n\n const [matches, setMatches] = useState(\n windowIsAvailable ? window.matchMedia(`(min-width: ${breakpointVal})`).matches : !!defaultValue\n );\n\n const chToPxConversionFactor = useChToPxConversionFactor();\n\n const onResize = useCallback((e: MediaQueryListEvent) => {\n setMatches(e.matches);\n }, []);\n\n useLayoutEffect(() => {\n // Breakpoint handling for contained elements\n if (breakpointRef && breakpointRef.current) {\n const observer = new ResizeObserver(entries => {\n const matchesBreakpoint = entries.some(({ target, contentRect }) => {\n if (target !== breakpointRef.current) return;\n\n const multiplier =\n themeProp === 'breakpoints' ? parseFloat(rootFontSize) : chToPxConversionFactor;\n return contentRect.width >= parseFloat(breakpointVal) multiplier;\n });\n\n setMatches(matchesBreakpoint);\n });\n\n observer.observe(breakpointRef.current);\n\n return () => {\n observer.disconnect();\n };\n }\n\n // Breakpoint handling for viewport\n if (windowIsAvailable) {\n const mediaMatch = window.matchMedia(`(min-width: ${breakpointVal})`);\n const mediaMatchAvailable = 'addEventListener' in mediaMatch;\n const resizeHandler = debounce(() => {\n setMatches(window.innerWidth >= parseInt(breakpointVal, 10));\n }, 100);\n\n // Need to check useMatchMedia in order to support unit testing\n if (mediaMatchAvailable) {\n mediaMatch.addEventListener('change', onResize);\n setMatches(mediaMatch.matches);\n } else {\n window.addEventListener('resize', resizeHandler);\n setMatches(window.innerWidth >= parseInt(breakpointVal, 10));\n }\n\n return () => {\n // Need to check useMatchMedia in order to support unit testing\n if (mediaMatchAvailable) mediaMatch.removeEventListener('change', onResize);\n else {\n window.removeEventListener('resize', resizeHandler);\n }\n };\n }\n }, [breakpointRef?.current]);\n\n return matches;\n};\n\nexport default useBreakpoint;\n"]}

package/lib/hooks/useChToPxConversionFactor.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+declare const useChToPxConversionFactor: () => number;
+export default useChToPxConversionFactor;
+//# sourceMappingURL=useChToPxConversionFactor.d.ts.map

package/lib/hooks/useChToPxConversionFactor.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"useChToPxConversionFactor.d.ts","sourceRoot":"","sources":["../../src/hooks/useChToPxConversionFactor.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,yBAAyB,cAU9B,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

package/lib/hooks/useChToPxConversionFactor.js ADDED Viewed

@@ -0,0 +1,13 @@
+import { useMemo } from 'react';
+const useChToPxConversionFactor = () => {
+    return useMemo(() => {
+        const chToPxDiv = document.createElement('div');
+        chToPxDiv.style.width = '1ch';
+        document.body.append(chToPxDiv);
+        const conversionFactor = chToPxDiv.offsetWidth;
+        chToPxDiv.remove();
+        return conversionFactor;
+    }, []);
+};
+export default useChToPxConversionFactor;
+//# sourceMappingURL=useChToPxConversionFactor.js.map

package/lib/hooks/useChToPxConversionFactor.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useChToPxConversionFactor.js","sourceRoot":"","sources":["../../src/hooks/useChToPxConversionFactor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,MAAM,yBAAyB,GAAG,GAAG,EAAE;IACrC,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAChD,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;QAC9B,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;QAChC,MAAM,gBAAgB,GAAG,SAAS,CAAC,WAAW,CAAC;QAC/C,SAAS,CAAC,MAAM,EAAE,CAAC;QAEnB,OAAO,gBAAgB,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC,CAAC;AAEF,eAAe,yBAAyB,CAAC","sourcesContent":["import { useMemo } from 'react';\n\nconst useChToPxConversionFactor = () => {\n return useMemo(() => {\n const chToPxDiv = document.createElement('div');\n chToPxDiv.style.width = '1ch';\n document.body.append(chToPxDiv);\n const conversionFactor = chToPxDiv.offsetWidth;\n chToPxDiv.remove();\n\n return conversionFactor;\n }, []);\n};\n\nexport default useChToPxConversionFactor;\n"]}

package/lib/hooks/useElement.d.ts CHANGED Viewed

@@ -5,6 +5,6 @@ import { RefCallback } from 'react';
  * @returns * element:: A DOM Element.
  *          * setElementFunction:: The function responsible for setting and resetting the element variable. This function is typically passed to the ref attribute of the element you wish to reference.
  */
-declare const useElement: <T extends Element>(initial?: T | null) => [T | null, (instance: T | null) => void];
+declare const useElement: <T extends Element>(initial?: T | null) => [T | null, RefCallback<T>];
 export default useElement;
 //# sourceMappingURL=useElement.d.ts.map

package/lib/hooks/useElement.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useElement.d.ts","sourceRoot":"","sources":["../../src/hooks/useElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,WAAW,EAAE,MAAM,OAAO,CAAC;AAE9C;;;;;GAKG;AACH,QAAA,MAAM,UAAU,~~qFACa~~,CAAC;AAE9B,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"useElement.d.ts","sourceRoot":"","sources":["../../src/hooks/useElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,WAAW,EAAE,MAAM,OAAO,CAAC;AAE9C;;;;;GAKG;AACH,QAAA,MAAM,UAAU,uEACa,CAAC;AAE9B,eAAe,UAAU,CAAC"}

package/lib/hooks/useI18n.d.ts CHANGED Viewed

@@ -209,6 +209,9 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     picker_jump_to_month_and_year: string;
     calendar_assist: string;
     calendar: string;
+    choose_date: string;
+    choose_date_and_time: string;
+    choose_week: string;
     boolean_display_true_label: string;
     boolean_display_false_label: string;
     step_changed_to_name: string;
@@ -259,6 +262,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     };
     edit_tags: string;
     tags: string;
+    view_profile: string;
     timeline_toolbar_sort_descending: string;
     timeline_toolbar_sort_ascending: string;
     timeline_toolbar_group_date: string;
@@ -330,6 +334,14 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
         many: string;
         other: string;
     };
+    feed_post_comments: {
+        zero: string;
+        one: string;
+        two: string;
+        few: string;
+        many: string;
+        other: string;
+    };
     feed_attachments_added: {
         zero: string;
         one: string;
@@ -396,6 +408,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     new_message: string;
     attachments: string;
     attachments_x_of_y: string;
+    use_current_template: string;
     unique_entities: {
         zero: string;
         one: string;

package/lib/hooks/useI18n.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
1	+ {"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGZ,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/hooks/useScrollToggle.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useScrollToggle.d.ts","sourceRoot":"","sources":["../../src/hooks/useScrollToggle.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,eAAe,cAAc,MAAM;wBAKF,IAAI;yBAMH,IAAI;~~CAgC3C~~,CAAC;AAEF,eAAe,eAAe,CAAC"}
1	+ {"version":3,"file":"useScrollToggle.d.ts","sourceRoot":"","sources":["../../src/hooks/useScrollToggle.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,eAAe,cAAc,MAAM;wBAKF,IAAI;yBAMH,IAAI;CA+B3C,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/hooks/useScrollToggle.js CHANGED Viewed

@@ -32,7 +32,6 @@ const useScrollToggle = (selector = ':root') => {
     }, [selector]);
     useLayoutEffect(() => {
         scrollbarWidthRef.current = getScrollbarWidth();
-        // cSpell:ignoreRegExp /unmounts?/
         // To be safe, clean up when the calling component unmounts just in case it did not do so.
         return enableScroll;
         // As enableScroll is memoized with no deps, the cleanup **should** only run once on unmount. If that changes, adjust here accordingly.

package/lib/hooks/useScrollToggle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useScrollToggle.js","sourceRoot":"","sources":["../../src/hooks/useScrollToggle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAEhE,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAElD,MAAM,eAAe,GAAG,CAAC,WAAmB,OAAO,EAAE,EAAE;IACrD,MAAM,iBAAiB,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IACpC,MAAM,QAAQ,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IACvD,MAAM,EAAE,gBAAgB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEhD,MAAM,YAAY,GAAG,WAAW,CAAC,GAAS,EAAE;QAC1C,mGAAmG;QACnG,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;QAC3B,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,WAAW,CAAC,GAAS,EAAE;QAC3C,qHAAqH;QACrH,IAAI,QAAQ,CAAC,OAAO;YAAE,OAAO;QAC7B,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAClD,IAAI,CAAC,QAAQ;YAAE,OAAO;QACtB,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC;QAC3D,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS;YAAE,OAAO;QAErC,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAEnD,QAAQ,CAAC,OAAO,CAAC,WAAW,GAAG;QAC3B,QAAQ;UACN,SAAS,CAAC,CAAC,CAAC,uBAAuB,iBAAiB,CAAC,OAAO,eAAe,CAAC,CAAC,CAAC,EAAE;UAChF,SAAS,CAAC,CAAC,CAAC,sBAAsB,iBAAiB,CAAC,OAAO,eAAe,CAAC,CAAC,CAAC,EAAE;;;KAGpF,CAAC;QAEF,CAAC,gBAAgB,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC/D,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,eAAe,CAAC,GAAG,EAAE;QACnB,iBAAiB,CAAC,OAAO,GAAG,iBAAiB,EAAE,CAAC;QAEhD,~~kCAAkC;QAClC,~~0FAA0F;QAC1F,OAAO,YAAY,CAAC;QAEpB,uIAAuI;IACzI,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC;AACzC,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { useCallback, useLayoutEffect, useRef } from 'react';\n\nimport { getScrollbarWidth, testElForOverflow } from '../utils';\n\nimport useConfiguration from './useConfiguration';\n\nconst useScrollToggle = (selector: string = ':root') => {\n const scrollbarWidthRef = useRef(0);\n const styleRef = useRef<HTMLStyleElement \| null>(null);\n const { styleSheetTarget } = useConfiguration();\n\n const enableScroll = useCallback((): void => {\n // No need to short circuit if called repetitively, will just perform a simple null set on the ref.\n styleRef.current?.remove();\n styleRef.current = null;\n }, []);\n\n const disableScroll = useCallback((): void => {\n // If we have a ref to the style el we can assume styles to disable overflow are in the DOM. No need for a DOM query.\n if (styleRef.current) return;\n const scrollEl = document.querySelector(selector);\n if (!scrollEl) return;\n const [overflowX, overflowY] = testElForOverflow(scrollEl);\n if (!overflowX && !overflowY) return;\n\n styleRef.current = document.createElement('style');\n\n styleRef.current.textContent = `\n ${selector} {\n ${overflowY ? `padding-inline-end: ${scrollbarWidthRef.current}px !important` : ''};\n ${overflowX ? `padding-block-end: ${scrollbarWidthRef.current}px !important` : ''};\n overflow: hidden !important;\n }\n `;\n\n (styleSheetTarget ?? document.head).append(styleRef.current);\n }, [selector]);\n\n useLayoutEffect(() => {\n scrollbarWidthRef.current = getScrollbarWidth();\n\n // ~~cSpell:ignoreRegExp /unmounts?/\n //~~ To be safe, clean up when the calling component unmounts just in case it did not do so.\n return enableScroll;\n\n // As enableScroll is memoized with no deps, the cleanup should only run once on unmount. If that changes, adjust here accordingly.\n }, [enableScroll]);\n\n return { enableScroll, disableScroll };\n};\n\nexport default useScrollToggle;\n"]}
1	+ {"version":3,"file":"useScrollToggle.js","sourceRoot":"","sources":["../../src/hooks/useScrollToggle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAEhE,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAElD,MAAM,eAAe,GAAG,CAAC,WAAmB,OAAO,EAAE,EAAE;IACrD,MAAM,iBAAiB,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IACpC,MAAM,QAAQ,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IACvD,MAAM,EAAE,gBAAgB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEhD,MAAM,YAAY,GAAG,WAAW,CAAC,GAAS,EAAE;QAC1C,mGAAmG;QACnG,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;QAC3B,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,WAAW,CAAC,GAAS,EAAE;QAC3C,qHAAqH;QACrH,IAAI,QAAQ,CAAC,OAAO;YAAE,OAAO;QAC7B,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAClD,IAAI,CAAC,QAAQ;YAAE,OAAO;QACtB,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC;QAC3D,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS;YAAE,OAAO;QAErC,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAEnD,QAAQ,CAAC,OAAO,CAAC,WAAW,GAAG;QAC3B,QAAQ;UACN,SAAS,CAAC,CAAC,CAAC,uBAAuB,iBAAiB,CAAC,OAAO,eAAe,CAAC,CAAC,CAAC,EAAE;UAChF,SAAS,CAAC,CAAC,CAAC,sBAAsB,iBAAiB,CAAC,OAAO,eAAe,CAAC,CAAC,CAAC,EAAE;;;KAGpF,CAAC;QAEF,CAAC,gBAAgB,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC/D,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,eAAe,CAAC,GAAG,EAAE;QACnB,iBAAiB,CAAC,OAAO,GAAG,iBAAiB,EAAE,CAAC;QAEhD,0FAA0F;QAC1F,OAAO,YAAY,CAAC;QAEpB,uIAAuI;IACzI,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC;AACzC,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { useCallback, useLayoutEffect, useRef } from 'react';\n\nimport { getScrollbarWidth, testElForOverflow } from '../utils';\n\nimport useConfiguration from './useConfiguration';\n\nconst useScrollToggle = (selector: string = ':root') => {\n const scrollbarWidthRef = useRef(0);\n const styleRef = useRef<HTMLStyleElement \| null>(null);\n const { styleSheetTarget } = useConfiguration();\n\n const enableScroll = useCallback((): void => {\n // No need to short circuit if called repetitively, will just perform a simple null set on the ref.\n styleRef.current?.remove();\n styleRef.current = null;\n }, []);\n\n const disableScroll = useCallback((): void => {\n // If we have a ref to the style el we can assume styles to disable overflow are in the DOM. No need for a DOM query.\n if (styleRef.current) return;\n const scrollEl = document.querySelector(selector);\n if (!scrollEl) return;\n const [overflowX, overflowY] = testElForOverflow(scrollEl);\n if (!overflowX && !overflowY) return;\n\n styleRef.current = document.createElement('style');\n\n styleRef.current.textContent = `\n ${selector} {\n ${overflowY ? `padding-inline-end: ${scrollbarWidthRef.current}px !important` : ''};\n ${overflowX ? `padding-block-end: ${scrollbarWidthRef.current}px !important` : ''};\n overflow: hidden !important;\n }\n `;\n\n (styleSheetTarget ?? document.head).append(styleRef.current);\n }, [selector]);\n\n useLayoutEffect(() => {\n scrollbarWidthRef.current = getScrollbarWidth();\n\n // To be safe, clean up when the calling component unmounts just in case it did not do so.\n return enableScroll;\n\n // As enableScroll is memoized with no deps, the cleanup should only run once on unmount. If that changes, adjust here accordingly.\n }, [enableScroll]);\n\n return { enableScroll, disableScroll };\n};\n\nexport default useScrollToggle;\n"]}

package/lib/hooks/useTestIds.d.ts CHANGED Viewed

@@ -5,6 +5,6 @@ import { TestIdProp } from '../types';
  * @param getTestIds Function for generating test ids for a particular component.
  * @returns An empty object or an object with a root key and camelCased keys and values based on params.
  */
-declare const useTestIds: <F extends (testIdProp?: string | undefined) => import("../utils").TestIdsRecord<readonly string[]>>(testIdProp: TestIdProp['testId'], getTestIds: F) => ReturnType<F>;
+declare const useTestIds: <F extends (testIdProp?: string | undefined) => import("../types").TestIdsRecord<readonly string[]>>(testIdProp: string | Partial<ReturnType<F>> | undefined, getTestIds: F) => Partial<ReturnType<F>>;
 export default useTestIds;
 //# sourceMappingURL=useTestIds.d.ts.map

package/lib/hooks/useTestIds.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useTestIds.d.ts","sourceRoot":"","sources":["../../src/hooks/useTestIds.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAKtC;;;;;GAKG;AAEH,QAAA,MAAM,UAAU,~~mHACF~~,~~UAAU,~~CAAC~~,QAAQ,CAAC,iCAUjC,CAAC~~;AAEF,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"useTestIds.d.ts","sourceRoot":"","sources":["../../src/hooks/useTestIds.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAKtC;;;;;GAKG;AAEH,QAAA,MAAM,UAAU,wMAef,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/hooks/useTestIds.js CHANGED Viewed

@@ -11,6 +11,9 @@ const useTestIds = (testIdProp, getTestIds) => {
     return useMemo(() => {
         if (!testIds)
             return {};
+        if (typeof testIdProp === 'object') {
+            return testIdProp;
+        }
         return getTestIds(testIdProp);
     }, [testIds, testIdProp, getTestIds]);
 };

package/lib/hooks/useTestIds.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useTestIds.js","sourceRoot":"","sources":["../../src/hooks/useTestIds.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAKhC,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAElD;;;;;GAKG;AAEH,MAAM,UAAU,GAAG,CACjB,~~UAAgC~~,~~EAChC~~,UAAa,~~EACE~~,EAAE;~~IACjB~~,MAAM,EAAE,OAAO,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEvC,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,IAAI,CAAC,OAAO;YAAE,OAAO,~~EAAmB~~,CAAC;~~QAEzC~~,OAAO,UAAU,CAAC,UAAU,~~CAAkB~~,CAAC;~~IACjD~~,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC;AACxC,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { useMemo } from 'react';\n\nimport { TestIdProp } from '../types';\nimport type { createTestIds } from '../utils';\n\nimport useConfiguration from './useConfiguration';\n\n/*\n @example const testIds = useTestIds(testIdProp: 'some-test-id', getSomeComponentTestIds);\n * @param testIdProp `testId` prop passed to the component.\n * @param getTestIds Function for generating test ids for a particular component.\n * @returns An empty object or an object with a root key and camelCased keys and values based on params.\n */\n\nconst useTestIds = <F extends ReturnType<typeof createTestIds>>(\n testIdProp: TestIdProp['testId'],\n getTestIds: F\n): ReturnType<F> => {\n const { testIds } = useConfiguration();\n\n return useMemo(() => {\n if (!testIds) return {} as ~~ReturnType<F>;\~~n\n return getTestIds(testIdProp) ~~as ReturnType<F>;\~~n }, [testIds, testIdProp, getTestIds]);\n};\n\nexport default useTestIds;\n"]}
1	+ {"version":3,"file":"useTestIds.js","sourceRoot":"","sources":["../../src/hooks/useTestIds.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAKhC,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAElD;;;;;GAKG;AAEH,MAAM,UAAU,GAAG,CACjB,UAAyD,EACzD,UAAa,EACW,EAAE;IAC1B,MAAM,EAAE,OAAO,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEvC,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,IAAI,CAAC,OAAO;YAAE,OAAO,EAAE,CAAC;QAExB,IAAI,OAAO,UAAU,KAAK,QAAQ,EAAE;YAClC,OAAO,UAAU,CAAC;SACnB;QAED,OAAO,UAAU,CAAC,UAAU,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC;AACxC,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { useMemo } from 'react';\n\nimport { TestIdProp } from '../types';\nimport type { createTestIds } from '../utils';\n\nimport useConfiguration from './useConfiguration';\n\n/*\n @example const testIds = useTestIds(testIdProp: 'some-test-id', getSomeComponentTestIds);\n * @param testIdProp `testId` prop passed to the component.\n * @param getTestIds Function for generating test ids for a particular component.\n * @returns An empty object or an object with a root key and camelCased keys and values based on params.\n */\n\nconst useTestIds = <F extends ReturnType<typeof createTestIds>>(\n testIdProp: TestIdProp['testId'] \| Partial<ReturnType<F>>,\n getTestIds: F\n): Partial<ReturnType<F>> => {\n const { testIds } = useConfiguration();\n\n return useMemo(() => {\n if (!testIds) return {};\n\n if (typeof testIdProp === 'object') {\n return testIdProp;\n }\n\n return getTestIds(testIdProp);\n }, [testIds, testIdProp, getTestIds]);\n};\n\nexport default useTestIds;\n"]}

package/lib/i18n/default.d.ts CHANGED Viewed

@@ -205,6 +205,9 @@ declare const _default: {
     picker_jump_to_month_and_year: string;
     calendar_assist: string;
     calendar: string;
+    choose_date: string;
+    choose_date_and_time: string;
+    choose_week: string;
     boolean_display_true_label: string;
     boolean_display_false_label: string;
     step_changed_to_name: string;
@@ -255,6 +258,7 @@ declare const _default: {
     };
     edit_tags: string;
     tags: string;
+    view_profile: string;
     timeline_toolbar_sort_descending: string;
     timeline_toolbar_sort_ascending: string;
     timeline_toolbar_group_date: string;
@@ -326,6 +330,14 @@ declare const _default: {
         many: string;
         other: string;
     };
+    feed_post_comments: {
+        zero: string;
+        one: string;
+        two: string;
+        few: string;
+        many: string;
+        other: string;
+    };
     feed_attachments_added: {
         zero: string;
         one: string;
@@ -392,6 +404,7 @@ declare const _default: {
     new_message: string;
     attachments: string;
     attachments_x_of_y: string;
+    use_current_template: string;
     unique_entities: {
         zero: string;
         one: string;

package/lib/i18n/default.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,~~wBA2/BE~~"}
1	+ {"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wBA0gCE"}

package/lib/i18n/default.js CHANGED Viewed

@@ -229,6 +229,9 @@ export default {
     picker_jump_to_month_and_year: 'Jump to month and year selection',
     calendar_assist: 'Use cursor keys to navigate dates',
     calendar: 'Calendar',
+    choose_date: 'Choose date',
+    choose_date_and_time: 'Choose date and time',
+    choose_week: 'Choose week',
     /* core:Boolean */
     boolean_display_true_label: 'Yes',
     boolean_display_false_label: 'No',
@@ -294,6 +297,8 @@ export default {
     /* work:Tags */
     edit_tags: 'Edit tags',
     tags: 'Tags',
+    /* work:Glimpse */
+    view_profile: 'View profile',
     /* work:Timeline */
     timeline_toolbar_sort_descending: 'Newest first',
     timeline_toolbar_sort_ascending: 'Oldest first',
@@ -372,6 +377,14 @@ export default {
         many: '{0} likes',
         other: '{0} likes'
     },
+    feed_post_comments: {
+        zero: 'No comments',
+        one: '{0} comment',
+        two: '{0} comments',
+        few: '{0} comments',
+        many: '{0} comments',
+        other: '{0} comments'
+    },
     feed_attachments_added: {
         zero: 'No attachments added',
         one: '{0} attachment added',
@@ -439,6 +452,7 @@ export default {
     new_message: 'New message',
     attachments: 'attachments',
     attachments_x_of_y: 'attachment {0} of {1}',
+    use_current_template: 'Use suggested reply {0} of {1} ',
     /* cs:Email */
     unique_entities: {
         zero: 'No unique entities',