@pega/cosmos-react-core 9.0.0-build.26.0 → 9.0.0-build.26.2

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 (56) hide show
  1. package/lib/components/AppShell/AppHeader.d.ts.map +1 -1
  2. package/lib/components/AppShell/AppHeader.js +2 -2
  3. package/lib/components/AppShell/AppHeader.js.map +1 -1
  4. package/lib/components/AppShell/AppNavigationPanel.d.ts.map +1 -1
  5. package/lib/components/AppShell/AppNavigationPanel.js +21 -7
  6. package/lib/components/AppShell/AppNavigationPanel.js.map +1 -1
  7. package/lib/components/AppShell/AppShell.d.ts.map +1 -1
  8. package/lib/components/AppShell/AppShell.js +42 -8
  9. package/lib/components/AppShell/AppShell.js.map +1 -1
  10. package/lib/components/AppShell/AppShell.styles.d.ts +4 -0
  11. package/lib/components/AppShell/AppShell.styles.d.ts.map +1 -1
  12. package/lib/components/AppShell/AppShell.styles.js +102 -51
  13. package/lib/components/AppShell/AppShell.styles.js.map +1 -1
  14. package/lib/components/AppShell/AppShell.types.d.ts +9 -3
  15. package/lib/components/AppShell/AppShell.types.d.ts.map +1 -1
  16. package/lib/components/AppShell/AppShell.types.js.map +1 -1
  17. package/lib/components/AppShell/AppShellContext.d.ts +4 -0
  18. package/lib/components/AppShell/AppShellContext.d.ts.map +1 -1
  19. package/lib/components/AppShell/AppShellContext.js +3 -1
  20. package/lib/components/AppShell/AppShellContext.js.map +1 -1
  21. package/lib/components/AppShell/AppTopNav.d.ts +4 -0
  22. package/lib/components/AppShell/AppTopNav.d.ts.map +1 -0
  23. package/lib/components/AppShell/AppTopNav.js +183 -0
  24. package/lib/components/AppShell/AppTopNav.js.map +1 -0
  25. package/lib/components/AppShell/AppTopNav.styles.d.ts +946 -0
  26. package/lib/components/AppShell/AppTopNav.styles.d.ts.map +1 -0
  27. package/lib/components/AppShell/AppTopNav.styles.js +184 -0
  28. package/lib/components/AppShell/AppTopNav.styles.js.map +1 -0
  29. package/lib/components/AppShell/AppTopNav.types.d.ts +16 -0
  30. package/lib/components/AppShell/AppTopNav.types.d.ts.map +1 -0
  31. package/lib/components/AppShell/AppTopNav.types.js +2 -0
  32. package/lib/components/AppShell/AppTopNav.types.js.map +1 -0
  33. package/lib/components/AppShell/Drawer.d.ts +3 -1
  34. package/lib/components/AppShell/Drawer.d.ts.map +1 -1
  35. package/lib/components/AppShell/Drawer.js +13 -12
  36. package/lib/components/AppShell/Drawer.js.map +1 -1
  37. package/lib/components/AppShell/Drawer.styles.d.ts +8 -0
  38. package/lib/components/AppShell/Drawer.styles.d.ts.map +1 -1
  39. package/lib/components/AppShell/Drawer.styles.js +15 -0
  40. package/lib/components/AppShell/Drawer.styles.js.map +1 -1
  41. package/lib/components/AppShell/TopNavMoreMenu.d.ts +9 -0
  42. package/lib/components/AppShell/TopNavMoreMenu.d.ts.map +1 -0
  43. package/lib/components/AppShell/TopNavMoreMenu.js +73 -0
  44. package/lib/components/AppShell/TopNavMoreMenu.js.map +1 -0
  45. package/lib/components/AppShell/index.d.ts +1 -1
  46. package/lib/components/AppShell/index.d.ts.map +1 -1
  47. package/lib/components/AppShell/index.js.map +1 -1
  48. package/lib/components/AppShell/useTopNavOverflow.d.ts +17 -0
  49. package/lib/components/AppShell/useTopNavOverflow.d.ts.map +1 -0
  50. package/lib/components/AppShell/useTopNavOverflow.js +73 -0
  51. package/lib/components/AppShell/useTopNavOverflow.js.map +1 -0
  52. package/lib/components/ComboBox/ComboBox.styles.js +1 -1
  53. package/lib/components/ComboBox/ComboBox.styles.js.map +1 -1
  54. package/lib/i18n/default.js +1 -1
  55. package/lib/i18n/default.js.map +1 -1
  56. package/package.json +1 -1
@@ -0,0 +1,73 @@
1
+ import { useLayoutEffect, useRef, useState } from 'react';
2
+ const getChildWidths = (el) => {
3
+ if (!el)
4
+ return [];
5
+ return Array.from(el.childNodes)
6
+ .filter((n) => n instanceof HTMLElement)
7
+ .map(n => n.getBoundingClientRect().width);
8
+ };
9
+ const getComputedGapPx = (el) => {
10
+ const raw = getComputedStyle(el).columnGap ?? getComputedStyle(el).gap ?? '0';
11
+ return parseFloat(raw) || 0;
12
+ };
13
+ export function useTopNavOverflow(items, opts) {
14
+ const { moreButtonRef, epsilon = 16 } = opts;
15
+ const containerRef = useRef(null);
16
+ const measureRef = useRef(null);
17
+ const [result, setResult] = useState({
18
+ visibleCount: items.length
19
+ });
20
+ const resultRef = useRef(result);
21
+ resultRef.current = result;
22
+ useLayoutEffect(() => {
23
+ const containerEl = containerRef.current;
24
+ const measureEl = measureRef.current;
25
+ if (!containerEl || !measureEl)
26
+ return undefined;
27
+ const recompute = () => {
28
+ const containerWidth = containerEl.getBoundingClientRect().width;
29
+ if (containerWidth === 0)
30
+ return;
31
+ const widths = getChildWidths(measureEl);
32
+ if (widths.length === 0)
33
+ return;
34
+ const gap = getComputedGapPx(containerEl);
35
+ const totalWidth = widths.reduce((sum, w) => sum + w, 0) + Math.max(0, widths.length - 1) * gap;
36
+ const prev = resultRef.current;
37
+ const isOverflowing = prev.visibleCount < items.length;
38
+ const expandThreshold = isOverflowing ? totalWidth + epsilon : totalWidth;
39
+ if (expandThreshold <= containerWidth) {
40
+ if (prev.visibleCount !== items.length) {
41
+ setResult({ visibleCount: items.length });
42
+ }
43
+ return;
44
+ }
45
+ const moreButtonWidth = moreButtonRef?.current?.getBoundingClientRect().width ?? 0;
46
+ const available = moreButtonWidth > 0 ? containerWidth - moreButtonWidth - gap : containerWidth;
47
+ let used = 0;
48
+ let visible = 0;
49
+ for (let i = 0; i < widths.length; i += 1) {
50
+ const itemWidth = widths[i] + (i > 0 ? gap : 0);
51
+ if (used + itemWidth <= available) {
52
+ used += itemWidth;
53
+ visible += 1;
54
+ }
55
+ else {
56
+ break;
57
+ }
58
+ }
59
+ if (prev.visibleCount !== visible) {
60
+ setResult({ visibleCount: visible });
61
+ }
62
+ };
63
+ recompute();
64
+ const ro = new ResizeObserver(recompute);
65
+ ro.observe(containerEl);
66
+ ro.observe(measureEl);
67
+ return () => {
68
+ ro.disconnect();
69
+ };
70
+ }, [items.length, moreButtonRef, epsilon]);
71
+ return { containerRef, measureRef, result };
72
+ }
73
+ //# sourceMappingURL=useTopNavOverflow.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useTopNavOverflow.js","sourceRoot":"","sources":["../../../src/components/AppShell/useTopNavOverflow.ts"],"names":[],"mappings":"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","sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react';\nimport type { RefObject } from 'react';\n\nimport type { LinkProps } from './AppShell.types';\n\nexport interface OverflowResult {\n visibleCount: number;\n}\n\ninterface UseTopNavOverflowOptions {\n moreButtonRef?: RefObject<HTMLElement | null>;\n epsilon?: number;\n}\n\ninterface UseTopNavOverflowReturn {\n containerRef: RefObject<HTMLDivElement>;\n measureRef: RefObject<HTMLDivElement>;\n result: OverflowResult;\n}\n\nconst getChildWidths = (el: HTMLElement | null): number[] => {\n if (!el) return [];\n return Array.from(el.childNodes)\n .filter((n): n is HTMLElement => n instanceof HTMLElement)\n .map(n => n.getBoundingClientRect().width);\n};\n\nconst getComputedGapPx = (el: HTMLElement): number => {\n const raw = getComputedStyle(el).columnGap ?? getComputedStyle(el).gap ?? '0';\n return parseFloat(raw) || 0;\n};\n\nexport function useTopNavOverflow(\n items: LinkProps[],\n opts: UseTopNavOverflowOptions\n): UseTopNavOverflowReturn {\n const { moreButtonRef, epsilon = 16 } = opts;\n const containerRef = useRef<HTMLDivElement>(null);\n const measureRef = useRef<HTMLDivElement>(null);\n const [result, setResult] = useState<OverflowResult>({\n visibleCount: items.length\n });\n\n const resultRef = useRef(result);\n resultRef.current = result;\n\n useLayoutEffect(() => {\n const containerEl = containerRef.current;\n const measureEl = measureRef.current;\n if (!containerEl || !measureEl) return undefined;\n\n const recompute = () => {\n const containerWidth = containerEl.getBoundingClientRect().width;\n if (containerWidth === 0) return;\n\n const widths = getChildWidths(measureEl);\n if (widths.length === 0) return;\n\n const gap = getComputedGapPx(containerEl);\n const totalWidth =\n widths.reduce((sum, w) => sum + w, 0) + Math.max(0, widths.length - 1) * gap;\n\n const prev = resultRef.current;\n const isOverflowing = prev.visibleCount < items.length;\n\n const expandThreshold = isOverflowing ? totalWidth + epsilon : totalWidth;\n if (expandThreshold <= containerWidth) {\n if (prev.visibleCount !== items.length) {\n setResult({ visibleCount: items.length });\n }\n return;\n }\n\n const moreButtonWidth = moreButtonRef?.current?.getBoundingClientRect().width ?? 0;\n const available =\n moreButtonWidth > 0 ? containerWidth - moreButtonWidth - gap : containerWidth;\n let used = 0;\n let visible = 0;\n for (let i = 0; i < widths.length; i += 1) {\n const itemWidth = widths[i] + (i > 0 ? gap : 0);\n if (used + itemWidth <= available) {\n used += itemWidth;\n visible += 1;\n } else {\n break;\n }\n }\n\n if (prev.visibleCount !== visible) {\n setResult({ visibleCount: visible });\n }\n };\n\n recompute();\n\n const ro = new ResizeObserver(recompute);\n ro.observe(containerEl);\n ro.observe(measureEl);\n\n return () => {\n ro.disconnect();\n };\n }, [items.length, moreButtonRef, epsilon]);\n\n return { containerRef, measureRef, result };\n}\n"]}
@@ -67,7 +67,7 @@ export const StyledSelectInput = styled.div(({ theme: { base, components } }) =>
67
67
  pointer-events: none;
68
68
  position: absolute;
69
69
  z-index: 1;
70
- inset-inline-start: ${components['form-control']['border-width']};
70
+ inset-inline-start: calc(${components['form-control']['border-width']} * -1);
71
71
  inset-block: 0;
72
72
  width: ${components['form-control']['border-width']};
73
73
  background-color: ${components['form-control']['border-color']};
@@ -1 +1 @@
1
- {"version":3,"file":"ComboBox.styles.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAExE,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE;IAC9E,MAAM,gBAAgB,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC;IAC/C,MAAM,uBAAuB,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC,CAAC;IAE5E,OAAO,GAAG,CAAA;;oBAEQ,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;;;UAKxC,UAAU,CAAC,KAAK,CAAC,MAAM,UAAU,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;;;;sBAK/D,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC;oBACtD,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;;;;;;;;;qBAUjD,UAAU,CAAC,KAAK,CAAC,MAAM,UAAU,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;eACjF,UAAU,CAAC,cAAc,CAAC,CAAC,kBAAkB,CAAC;;uBAEtC,IAAI,CAAC,OAAO;;;;;;;;;;;;;;;UAezB,YAAY;;;;;;sCAMgB,gBAAgB,MAAM,uBAAuB;;oCAE/C,gBAAgB,MAAM,uBAAuB;;;;;;;;;;;8BAWnD,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;iBAEvD,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;4BAC/B,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;gCAEtC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;GAG/E,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC,GAAG,EAAE;IAC3D,OAAO,GAAG,CAAA;;;;;;;MAON,aAAa;;;;QAIX,UAAU;QACV,qBAAqB;;;;GAI1B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { StyledButton } from '../Button';\nimport { StyledFormControl } from '../FormControl';\nimport { StyledPopover } from '../Popover';\nimport { StyledMenu, StyledMenuListWrapper } from '../Menu/Menu.styles';\n\nexport const StyledSelectInput = styled.div(({ theme: { base, components } }) => {\n const baseBorderRadius = base['border-radius'];\n const formControlBorderRadius = components['form-control']['border-radius'];\n\n return css`\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n\n div {\n min-height: calc(\n ${components.input.height} - 2 * ${components['form-control']['border-width']}\n );\n }\n\n &:focus-within {\n border-color: ${components['form-control'][':focus']['border-color']};\n box-shadow: ${components['form-control'][':focus']['box-shadow']};\n }\n\n &:hover:not([readonly]):not([disabled]):focus-within {\n border-color: transparent;\n }\n\n input {\n min-width: 0;\n width: 100%;\n height: calc(${components.input.height} - 2 * ${components['form-control']['border-width']});\n color: ${components['form-control']['foreground-color']};\n text-overflow: ellipsis;\n margin-inline: ${base.spacing};\n }\n\n input,\n input:focus {\n border: none;\n outline: none;\n flex-grow: 1;\n background-color: transparent;\n\n &:read-only {\n cursor: default;\n }\n }\n\n & > ${StyledButton} {\n align-self: stretch;\n height: auto;\n margin-block: -0.0625rem;\n margin-inline-end: -0.0625rem;\n border-start-start-radius: 0;\n border-start-end-radius: calc(${baseBorderRadius} * ${formControlBorderRadius});\n border-end-start-radius: 0;\n border-end-end-radius: calc(${baseBorderRadius} * ${formControlBorderRadius});\n\n &:hover::after {\n transform: scaleY(1);\n }\n\n &::after {\n content: '';\n pointer-events: none;\n position: absolute;\n z-index: 1;\n inset-inline-start: ${components['form-control']['border-width']};\n inset-block: 0;\n width: ${components['form-control']['border-width']};\n background-color: ${components['form-control']['border-color']};\n transform: scaleY(0.5);\n transition: transform ${base.animation.speed} ${base.animation.timing.ease};\n }\n }\n `;\n});\n\nStyledSelectInput.defaultProps = defaultThemeProp;\n\nexport const StyledComboBox = styled(StyledFormControl)(() => {\n return css`\n border: 0;\n\n &:focus {\n z-index: 1;\n }\n\n ${StyledPopover} {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n\n ${StyledMenu},\n ${StyledMenuListWrapper} {\n max-height: inherit;\n }\n }\n `;\n});\n\nStyledComboBox.defaultProps = defaultThemeProp;\n"]}
1
+ {"version":3,"file":"ComboBox.styles.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAExE,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE;IAC9E,MAAM,gBAAgB,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC;IAC/C,MAAM,uBAAuB,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC,CAAC;IAE5E,OAAO,GAAG,CAAA;;oBAEQ,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;;;UAKxC,UAAU,CAAC,KAAK,CAAC,MAAM,UAAU,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;;;;sBAK/D,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC;oBACtD,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;;;;;;;;;qBAUjD,UAAU,CAAC,KAAK,CAAC,MAAM,UAAU,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;eACjF,UAAU,CAAC,cAAc,CAAC,CAAC,kBAAkB,CAAC;;uBAEtC,IAAI,CAAC,OAAO;;;;;;;;;;;;;;;UAezB,YAAY;;;;;;sCAMgB,gBAAgB,MAAM,uBAAuB;;oCAE/C,gBAAgB,MAAM,uBAAuB;;;;;;;;;;;mCAW9C,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;iBAE5D,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;4BAC/B,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;gCAEtC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;GAG/E,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC,GAAG,EAAE;IAC3D,OAAO,GAAG,CAAA;;;;;;;MAON,aAAa;;;;QAIX,UAAU;QACV,qBAAqB;;;;GAI1B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { StyledButton } from '../Button';\nimport { StyledFormControl } from '../FormControl';\nimport { StyledPopover } from '../Popover';\nimport { StyledMenu, StyledMenuListWrapper } from '../Menu/Menu.styles';\n\nexport const StyledSelectInput = styled.div(({ theme: { base, components } }) => {\n const baseBorderRadius = base['border-radius'];\n const formControlBorderRadius = components['form-control']['border-radius'];\n\n return css`\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n\n div {\n min-height: calc(\n ${components.input.height} - 2 * ${components['form-control']['border-width']}\n );\n }\n\n &:focus-within {\n border-color: ${components['form-control'][':focus']['border-color']};\n box-shadow: ${components['form-control'][':focus']['box-shadow']};\n }\n\n &:hover:not([readonly]):not([disabled]):focus-within {\n border-color: transparent;\n }\n\n input {\n min-width: 0;\n width: 100%;\n height: calc(${components.input.height} - 2 * ${components['form-control']['border-width']});\n color: ${components['form-control']['foreground-color']};\n text-overflow: ellipsis;\n margin-inline: ${base.spacing};\n }\n\n input,\n input:focus {\n border: none;\n outline: none;\n flex-grow: 1;\n background-color: transparent;\n\n &:read-only {\n cursor: default;\n }\n }\n\n & > ${StyledButton} {\n align-self: stretch;\n height: auto;\n margin-block: -0.0625rem;\n margin-inline-end: -0.0625rem;\n border-start-start-radius: 0;\n border-start-end-radius: calc(${baseBorderRadius} * ${formControlBorderRadius});\n border-end-start-radius: 0;\n border-end-end-radius: calc(${baseBorderRadius} * ${formControlBorderRadius});\n\n &:hover::after {\n transform: scaleY(1);\n }\n\n &::after {\n content: '';\n pointer-events: none;\n position: absolute;\n z-index: 1;\n inset-inline-start: calc(${components['form-control']['border-width']} * -1);\n inset-block: 0;\n width: ${components['form-control']['border-width']};\n background-color: ${components['form-control']['border-color']};\n transform: scaleY(0.5);\n transition: transform ${base.animation.speed} ${base.animation.timing.ease};\n }\n }\n `;\n});\n\nStyledSelectInput.defaultProps = defaultThemeProp;\n\nexport const StyledComboBox = styled(StyledFormControl)(() => {\n return css`\n border: 0;\n\n &:focus {\n z-index: 1;\n }\n\n ${StyledPopover} {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n\n ${StyledMenu},\n ${StyledMenuListWrapper} {\n max-height: inherit;\n }\n }\n `;\n});\n\nStyledComboBox.defaultProps = defaultThemeProp;\n"]}
@@ -506,7 +506,7 @@ export default {
506
506
  thinking: 'Thinking',
507
507
  analyzing_data_sources: 'Analyzing data sources',
508
508
  generating_response: 'Generating response',
509
- generation_stopped: 'Stopped',
509
+ generation_stopped: 'Response stopped',
510
510
  fullscreen: 'Fullscreen',
511
511
  new_chat: 'New chat',
512
512
  double_checking_results: 'Double checking results',