@pega/cosmos-react-core 9.0.0-build.6.5 → 9.0.0-build.6.7

package/lib/components/PageTemplates/GridLayout/EditorBackground.js

@@ -55,7 +55,7 @@ StyledPageBreak.defaultProps = defaultThemeProp;
  */
 const EditorBackground = ({ layout, numColumns, rowHeight, rowsPerPage, highlighted }) => {
     const t = useI18n();
-    const { margin, containerPadding } = useGridLayoutConfig();
+    const { margin, containerPadding } = useGridLayoutConfig(true);
     const maxYInLayout = layout ? Math.max(...layout.map(item => item.y + item.h)) : 0;
     const maxY = Math.max(maxYInLayout, rowsPerPage || 0);
     const numGridCells = (maxY + 1) * numColumns;

package/lib/components/PageTemplates/GridLayout/EditorBackground.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditorBackground.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/EditorBackground.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FC } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { Layout } from 'react-grid-layout';\nimport { rgba } from 'polished';\n\nimport Grid from '../../Grid';\nimport type { NoChildrenProp } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport { useI18n } from '../../../hooks';\n\nimport useGridLayoutConfig from './config';\nimport { getArrayFromRange } from './utils';\n\nconst StyledGrid = styled(Grid)`\n  position: absolute;\n  z-index: -1;\n  pointer-events: none;\n  inline-size: 100%;\n`;\n\nconst StyledGridCell = styled.div<{ rowHeight: number; highlighted: boolean }>(\n  ({ theme, highlighted, rowHeight }) => {\n    const {\n      base: { palette }\n    } = theme;\n    const borderColor = palette[highlighted ? 'warn' : 'border-line'];\n    const background = highlighted ? rgba(palette.warn, 0.1) : 'transparent';\n\n    return css`\n      /* stylelint-disable-next-line unit-allowed-list */\n      border: 1px solid ${borderColor};\n      background: ${background};\n      block-size: ${rowHeight}px;\n    `;\n  }\n);\nStyledGridCell.defaultProps = defaultThemeProp;\n\ninterface PageBreakProps {\n  rowsAbove: number;\n  rowHeight: number;\n  margin: [number, number];\n  containerPadding: [number, number];\n  prefix: string;\n}\n\nconst StyledPageBreak = styled.div<PageBreakProps>(\n  ({ containerPadding, rowHeight, theme, margin, rowsAbove, prefix }) => {\n    const {\n      base: { palette }\n    } = theme;\n    return css`\n      position: absolute;\n      inset-inline-start: ${containerPadding[0]}px;\n      inset-inline-end: ${containerPadding[0]}px;\n      inset-block-start: ${containerPadding[1] + rowsAbove * (rowHeight + margin[1])}px;\n      /* stylelint-disable-next-line unit-allowed-list */\n      margin-block-start: ${-margin[1] / 2 - 1}px;\n      /* stylelint-disable-next-line unit-allowed-list */\n      border-block-start: 2px dashed ${palette['border-line']};\n\n      &::before {\n        content: '${prefix}';\n        position: absolute;\n        font-size: 0.75rem;\n        line-height: 1;\n        transform: translate(0, -50%);\n        background-color: ${palette['app-background']};\n        color: ${palette['border-line']};\n        padding-inline-end: 0.25rem;\n      }\n    `;\n  }\n);\nStyledPageBreak.defaultProps = defaultThemeProp;\n\ninterface EditorBackgroundProps extends NoChildrenProp {\n  layout?: Layout[];\n  numColumns: number;\n  rowHeight: number;\n  rowsPerPage: number | null; // null when not applying auto-fit\n  highlighted: boolean;\n}\n\n/**\n * Renders background grid-cells for GridEditor\n * @component\n */\nconst EditorBackground: FC<EditorBackgroundProps> = ({\n  layout,\n  numColumns,\n  rowHeight,\n  rowsPerPage,\n  highlighted\n}) => {\n  const t = useI18n();\n  const { margin, containerPadding } = useGridLayoutConfig();\n\n  const maxYInLayout = layout ? Math.max(...layout.map(item => item.y + item.h)) : 0;\n  const maxY = Math.max(maxYInLayout, rowsPerPage || 0);\n  const numGridCells = (maxY + 1) * numColumns;\n  const cells = getArrayFromRange(0, numGridCells, false);\n\n  // rowsPerPage will be null if auto-fit is disabled. Don't show pageBreaks in that case.\n  const numPageBreaks = rowsPerPage ? Math.floor(maxY / rowsPerPage) : 0;\n  const pageBreaks = getArrayFromRange(0, numPageBreaks, false);\n\n  return (\n    <StyledGrid container={{ cols: `repeat(${numColumns}, 1fr)`, gap: 2, pad: [0, 2, 2, 2] }}>\n      {cells.map(n => (\n        <StyledGridCell\n          key={n}\n          rowHeight={rowHeight}\n          // Highlight all cells except the dummy row at the bottom\n          highlighted={highlighted && n < numGridCells - numColumns}\n        />\n      ))}\n      {pageBreaks.map(n => (\n        <StyledPageBreak\n          key={n}\n          rowsAbove={(n + 1) * rowsPerPage!}\n          rowHeight={rowHeight}\n          margin={margin}\n          containerPadding={containerPadding}\n          prefix={t('page_number', [n + 1])}\n        />\n      ))}\n    </StyledGrid>\n  );\n};\n\nexport default EditorBackground;\n"]}
+{"version":3,"file":"EditorBackground.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/EditorBackground.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FC } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { Layout } from 'react-grid-layout';\nimport { rgba } from 'polished';\n\nimport Grid from '../../Grid';\nimport type { NoChildrenProp } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport { useI18n } from '../../../hooks';\n\nimport useGridLayoutConfig from './config';\nimport { getArrayFromRange } from './utils';\n\nconst StyledGrid = styled(Grid)`\n  position: absolute;\n  z-index: -1;\n  pointer-events: none;\n  inline-size: 100%;\n`;\n\nconst StyledGridCell = styled.div<{ rowHeight: number; highlighted: boolean }>(\n  ({ theme, highlighted, rowHeight }) => {\n    const {\n      base: { palette }\n    } = theme;\n    const borderColor = palette[highlighted ? 'warn' : 'border-line'];\n    const background = highlighted ? rgba(palette.warn, 0.1) : 'transparent';\n\n    return css`\n      /* stylelint-disable-next-line unit-allowed-list */\n      border: 1px solid ${borderColor};\n      background: ${background};\n      block-size: ${rowHeight}px;\n    `;\n  }\n);\nStyledGridCell.defaultProps = defaultThemeProp;\n\ninterface PageBreakProps {\n  rowsAbove: number;\n  rowHeight: number;\n  margin: [number, number];\n  containerPadding: [number, number];\n  prefix: string;\n}\n\nconst StyledPageBreak = styled.div<PageBreakProps>(\n  ({ containerPadding, rowHeight, theme, margin, rowsAbove, prefix }) => {\n    const {\n      base: { palette }\n    } = theme;\n    return css`\n      position: absolute;\n      inset-inline-start: ${containerPadding[0]}px;\n      inset-inline-end: ${containerPadding[0]}px;\n      inset-block-start: ${containerPadding[1] + rowsAbove * (rowHeight + margin[1])}px;\n      /* stylelint-disable-next-line unit-allowed-list */\n      margin-block-start: ${-margin[1] / 2 - 1}px;\n      /* stylelint-disable-next-line unit-allowed-list */\n      border-block-start: 2px dashed ${palette['border-line']};\n\n      &::before {\n        content: '${prefix}';\n        position: absolute;\n        font-size: 0.75rem;\n        line-height: 1;\n        transform: translate(0, -50%);\n        background-color: ${palette['app-background']};\n        color: ${palette['border-line']};\n        padding-inline-end: 0.25rem;\n      }\n    `;\n  }\n);\nStyledPageBreak.defaultProps = defaultThemeProp;\n\ninterface EditorBackgroundProps extends NoChildrenProp {\n  layout?: Layout[];\n  numColumns: number;\n  rowHeight: number;\n  rowsPerPage: number | null; // null when not applying auto-fit\n  highlighted: boolean;\n}\n\n/**\n * Renders background grid-cells for GridEditor\n * @component\n */\nconst EditorBackground: FC<EditorBackgroundProps> = ({\n  layout,\n  numColumns,\n  rowHeight,\n  rowsPerPage,\n  highlighted\n}) => {\n  const t = useI18n();\n  const { margin, containerPadding } = useGridLayoutConfig(true);\n\n  const maxYInLayout = layout ? Math.max(...layout.map(item => item.y + item.h)) : 0;\n  const maxY = Math.max(maxYInLayout, rowsPerPage || 0);\n  const numGridCells = (maxY + 1) * numColumns;\n  const cells = getArrayFromRange(0, numGridCells, false);\n\n  // rowsPerPage will be null if auto-fit is disabled. Don't show pageBreaks in that case.\n  const numPageBreaks = rowsPerPage ? Math.floor(maxY / rowsPerPage) : 0;\n  const pageBreaks = getArrayFromRange(0, numPageBreaks, false);\n\n  return (\n    <StyledGrid container={{ cols: `repeat(${numColumns}, 1fr)`, gap: 2, pad: [0, 2, 2, 2] }}>\n      {cells.map(n => (\n        <StyledGridCell\n          key={n}\n          rowHeight={rowHeight}\n          // Highlight all cells except the dummy row at the bottom\n          highlighted={highlighted && n < numGridCells - numColumns}\n        />\n      ))}\n      {pageBreaks.map(n => (\n        <StyledPageBreak\n          key={n}\n          rowsAbove={(n + 1) * rowsPerPage!}\n          rowHeight={rowHeight}\n          margin={margin}\n          containerPadding={containerPadding}\n          prefix={t('page_number', [n + 1])}\n        />\n      ))}\n    </StyledGrid>\n  );\n};\n\nexport default EditorBackground;\n"]}

package/lib/components/PageTemplates/GridLayout/GridLayoutEditor.js

@@ -41,7 +41,7 @@ const GridLayoutEditor = ({ handle, children, layoutModel, rows, onModelChange,
     const size = useMonitoredSize(wrapperEl);
     const width = size?.width;
     const height = size?.height;
-    const commonGridConfig = useGridLayoutConfig();
+    const commonGridConfig = useGridLayoutConfig(true);
     const t = useI18n();
     const { breakpoint, numColumns } = useMemo(() => getBreakpointAndCols(width || 0, restProps.breakpoints, restProps.cols), [width, restProps.breakpoints, restProps.cols]);
     const { rowHeight, numRowsPerPage } = useMemo(() => getRowHeight(breakpoint, height || 0, commonGridConfig.margin[0], rows, layoutModel), [breakpoint, commonGridConfig.margin, height, rows, layoutModel]);

package/lib/components/PageTemplates/GridLayout/GridLayoutEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridLayoutEditor.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/GridLayoutEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  type FC,\n  type ReactElement,\n  type Ref,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useState\n} from 'react';\nimport {\n  Responsive as ResponsiveGridLayout,\n  type Layout,\n  type Layouts,\n  type CoreProps\n} from 'react-grid-layout';\nimport styled, { css } from 'styled-components';\n\nimport Flex from '../../Flex';\nimport { useElement, useI18n } from '../../../hooks';\nimport { defaultThemeProp } from '../../../theme';\n\nimport useGridLayoutConfig, { type GridBreakPointWiseValues, type GridLayoutModel } from './config';\nimport EditorBackground from './EditorBackground';\nimport EditorGridItem, { ResizeHandle, resizeHandleClassName } from './EditorGridItem';\nimport {\n  checkLayoutForGaps,\n  getBreakpointAndCols,\n  getRowHeight,\n  useGridItemSorter,\n  useMonitoredSize,\n  type GridLayoutRowsProp\n} from './utils';\nimport ReactResizableStyles from './ReactResizableStyles';\nimport ReactGridLayoutStyles from './ReactGridLayoutStyles';\n\nconst StyledEditor = styled(Flex)(({ theme }) => {\n  const {\n    base: {\n      palette: { interactive }\n    }\n  } = theme;\n  return css`\n    position: relative;\n\n    /* Needed for the background grid to be visible */\n    z-index: 0;\n    block-size: 100%;\n    overflow-y: auto;\n\n    /* To minimize height triggers during dragging due to horizontal scrollbar showing up */\n    overflow-x: hidden;\n\n    .react-grid-item.react-grid-placeholder {\n      background: ${interactive};\n      opacity: 0.3;\n    }\n  `;\n});\nStyledEditor.defaultProps = defaultThemeProp;\n\nexport interface GridLayoutHandleValue {\n  /** Used to get layout model with imperative handle. Returns the layout model from all breakpoints. Returns undefined when no children. */\n  getLayoutModel: () => GridLayoutModel | undefined;\n\n  /**\n   * Returns a flag indicating whether there are any gaps in the current layout.\n   * Highlights all background cells to indicate the same.\n   */\n  checkForGaps: () => boolean;\n}\n\n/** Props for GridLayoutEditor component */\nexport interface GridLayoutEditorProps {\n  /**\n   * Called whenever there's a change in the layoutModel.\n   * Change-handler of the CONTROLLED COMPONENT\n   */\n  onModelChange: (newModel: GridLayoutModel | undefined) => void;\n\n  /**\n   * Value of the CONTROLLED component\n   * Passed when editing a previously saved layout.\n   * Can be `undefined` when no children.\n   * It should be the same as the one emitted by `getLayoutModel` or `handle`\n   */\n  layoutModel: GridLayoutModel | undefined;\n\n  /**\n   * Breakpoints set on the Grid.\n   * Needs to be aligned with `rows` and `cols`\n   */\n  breakpoints: GridBreakPointWiseValues;\n\n  /**\n   * # of rows to fit into the container height at each breakpoint (unless a fixed rowHeight is preferred)\n   * rows should be aligned with `breakpoints` prop\n   */\n  rows: GridLayoutRowsProp;\n\n  /**\n   * Breakpoint-wise numColumns on the Grid.\n   * cols should be aligned with `breakpoints` prop\n   */\n  cols: GridBreakPointWiseValues;\n\n  /**\n   * If parent DOM node of ResponsiveReactGridLayout or ReactGridLayout has \"transform: scale(n)\" css property,\n   * we should set scale coefficient to avoid render artifacts while dragging.\n   */\n  transformScale?: CoreProps['transformScale'];\n\n  /** Ref to access the editor state. Used to get the current layout-model when persisting it. */\n  handle?: Ref<GridLayoutHandleValue>;\n\n  /**\n   * Child elements to be rendered as Grid items.\n   * Each element should have a unique `key`\n   * Memoize children for a better performance: https://github.com/react-grid-layout/react-grid-layout#performance\n   * Set up an `itemLabel` prop with the text to call out when the item is focused.\n   * If a child needs to be initialized with a specific x/y/w/h,\n   *   or if you want to specify any special properties like minW, minH, etc.,\n   *   set up a `data-grid` in layoutModel prop with any subset of properties\n   * The prop can be undefined on init when no elements.\n   */\n  children?: ReactElement[];\n\n  /** Item label mapped with item id for a11y */\n  itemLabelMap: Record<string, string>;\n}\n\n/**\n * Editor component to create Grid Layouts\n * @component\n */\nconst GridLayoutEditor: FC<GridLayoutEditorProps> = ({\n  handle,\n  children,\n  layoutModel,\n  rows,\n  onModelChange,\n  itemLabelMap,\n  ...restProps\n}) => {\n  // Track width changes: https://github.com/react-grid-layout/react-grid-layout#providing-grid-width\n  const [wrapperEl, setWrapperEl] = useElement<HTMLElement>();\n  const size = useMonitoredSize(wrapperEl);\n  const width = size?.width;\n  const height = size?.height;\n  const commonGridConfig = useGridLayoutConfig();\n  const t = useI18n();\n  const { breakpoint, numColumns } = useMemo(\n    () => getBreakpointAndCols(width || 0, restProps.breakpoints, restProps.cols),\n    [width, restProps.breakpoints, restProps.cols]\n  );\n  const { rowHeight, numRowsPerPage } = useMemo(\n    () => getRowHeight(breakpoint, height || 0, commonGridConfig.margin[0], rows, layoutModel),\n    [breakpoint, commonGridConfig.margin, height, rows, layoutModel]\n  );\n  const currentLayout = useMemo(() => layoutModel?.[breakpoint], [breakpoint, layoutModel]);\n\n  const onLayoutChange = useCallback(\n    (curLayout: Layout[], allLayouts: Layouts) => {\n      onModelChange(!children || children.length === 0 ? undefined : allLayouts);\n    },\n    [children, onModelChange]\n  );\n\n  // Callback to sort child DOM nodes to ensure an intuitive tabbing order\n  const gridItemSorter = useGridItemSorter(currentLayout, numColumns);\n\n  // Set up keyboard accessibility\n  const [listEl, setListEl] = useElement<HTMLElement>();\n  useEffect(() => {\n    if (listEl) {\n      listEl.setAttribute('role', 'list');\n      listEl.setAttribute('tabindex', '0');\n      listEl.setAttribute('aria-label', t('configurable_layout_instructions'));\n    }\n  }, [listEl, t]);\n\n  const moveItem = useCallback(\n    (itemKey: ReactElement['key'], deltaX: number, deltaY: number) => {\n      // Should be initialized by this point\n      if (!currentLayout) return;\n      const itemIndex = currentLayout.findIndex(item => item.i === itemKey);\n      // Should be present on the currentLayout by this point.\n      if (itemIndex === -1) return;\n\n      const oldItem = currentLayout[itemIndex];\n      const newItem: Layout = {\n        ...oldItem,\n        // `Math.max` needed to avoid a glitch when moving left beyond the left edge\n        x: Math.max(0, oldItem.x + deltaX),\n        y: Math.max(0, oldItem.y + deltaY)\n      };\n      const newLayout = [\n        ...currentLayout.slice(0, itemIndex),\n        newItem,\n        ...currentLayout.slice(itemIndex + 1)\n      ];\n      const newModel = { ...layoutModel, [breakpoint]: newLayout };\n      onModelChange(!children || children.length === 0 ? undefined : newModel);\n    },\n    [breakpoint, children, currentLayout, layoutModel, onModelChange]\n  );\n\n  const addOrSubtractItemSize = useCallback(\n    (itemKey: ReactElement['key'], deltaW: number, deltaH: number) => {\n      // Should be initialized by this point\n      if (!currentLayout) return;\n      const itemIndex = currentLayout.findIndex(item => item.i === itemKey);\n      // Should be present on the currentLayout by this point.\n      if (itemIndex === -1) return;\n\n      const oldItem = currentLayout[itemIndex];\n      const newItem: Layout = {\n        ...oldItem,\n        // `Math.max` needed to avoid a glitch when moving left beyond the left edge\n        w: Math.max(oldItem.minW || 2, oldItem.w + deltaW),\n        h: Math.max(oldItem.minH || 2, oldItem.h + deltaH)\n      };\n      const newLayout = [\n        ...currentLayout.slice(0, itemIndex),\n        newItem,\n        ...currentLayout.slice(itemIndex + 1)\n      ];\n      const newModel = { ...layoutModel, [breakpoint]: newLayout };\n      onModelChange(!children || children.length === 0 ? undefined : newModel);\n    },\n    [breakpoint, children, currentLayout, layoutModel, onModelChange]\n  );\n\n  // Provide a way for the parent component to get layout-model on demand\n  const [highlightedBG, setHighlightedBG] = useState(false);\n  useImperativeHandle(\n    handle,\n    () => ({\n      getLayoutModel: () => {\n        // Without this check, we'll end up with the dummy model set up down below for this case\n        if (!children || children.length === 0) return undefined;\n        return layoutModel;\n      },\n\n      checkForGaps: () => {\n        // On load when no items are added.\n        if (!currentLayout) return true;\n        const hasGaps = checkLayoutForGaps(currentLayout, numColumns);\n        setHighlightedBG(hasGaps);\n        return hasGaps;\n      }\n    }),\n    [children, layoutModel, currentLayout, numColumns]\n  );\n\n  return (\n    // Editor is always in LTR. At runtime, the layout is mirrored depending on locale.\n    <StyledEditor ref={setWrapperEl} dir='ltr'>\n      <ReactResizableStyles />\n      <ReactGridLayoutStyles />\n\n      {!!width && !!height && (\n        <>\n          <EditorBackground\n            data-testid='editor'\n            layout={currentLayout}\n            numColumns={numColumns}\n            rowHeight={rowHeight}\n            rowsPerPage={numRowsPerPage}\n            highlighted={highlightedBG}\n          />\n\n          <ResponsiveGridLayout\n            {...commonGridConfig}\n            width={width}\n            rowHeight={rowHeight}\n            onLayoutChange={onLayoutChange}\n            resizeHandles={['s', 'e', 'n', 'w', 'sw', 'nw', 'se', 'ne']}\n            resizeHandle={<ResizeHandle />}\n            // To prevent drag event on the resize handles\n            draggableCancel={`.${resizeHandleClassName}`}\n            innerRef={setListEl}\n            layouts={layoutModel}\n            {...restProps}\n          >\n            {children?.sort(gridItemSorter).map(child => {\n              const gridLayoutModel = layoutModel?.[breakpoint]?.filter(\n                layout => layout.i === child.key\n              );\n              return (\n                <EditorGridItem\n                  key={child.key}\n                  itemKey={child.key}\n                  data-grid={gridLayoutModel && gridLayoutModel[0]}\n                  itemLabel={itemLabelMap[child.key!] || ''}\n                  moveItem={moveItem}\n                  addOrSubtractItemSize={addOrSubtractItemSize}\n                >\n                  {child}\n                </EditorGridItem>\n              );\n            })}\n\n            {(!children || children.length === 0) && (\n              // Placeholder when no children. Needed to avoid exceptions:\n              // https://github.com/react-grid-layout/react-grid-layout/issues/216\n              <div key='--' data-grid={{ x: 0, y: 0, w: 1, h: 1, resizeHandles: [] }} />\n            )}\n          </ResponsiveGridLayout>\n        </>\n      )}\n    </StyledEditor>\n  );\n};\n\nexport default GridLayoutEditor;\n"]}
+{"version":3,"file":"GridLayoutEditor.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/GridLayoutEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  type FC,\n  type ReactElement,\n  type Ref,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useState\n} from 'react';\nimport {\n  Responsive as ResponsiveGridLayout,\n  type Layout,\n  type Layouts,\n  type CoreProps\n} from 'react-grid-layout';\nimport styled, { css } from 'styled-components';\n\nimport Flex from '../../Flex';\nimport { useElement, useI18n } from '../../../hooks';\nimport { defaultThemeProp } from '../../../theme';\n\nimport useGridLayoutConfig, { type GridBreakPointWiseValues, type GridLayoutModel } from './config';\nimport EditorBackground from './EditorBackground';\nimport EditorGridItem, { ResizeHandle, resizeHandleClassName } from './EditorGridItem';\nimport {\n  checkLayoutForGaps,\n  getBreakpointAndCols,\n  getRowHeight,\n  useGridItemSorter,\n  useMonitoredSize,\n  type GridLayoutRowsProp\n} from './utils';\nimport ReactResizableStyles from './ReactResizableStyles';\nimport ReactGridLayoutStyles from './ReactGridLayoutStyles';\n\nconst StyledEditor = styled(Flex)(({ theme }) => {\n  const {\n    base: {\n      palette: { interactive }\n    }\n  } = theme;\n  return css`\n    position: relative;\n\n    /* Needed for the background grid to be visible */\n    z-index: 0;\n    block-size: 100%;\n    overflow-y: auto;\n\n    /* To minimize height triggers during dragging due to horizontal scrollbar showing up */\n    overflow-x: hidden;\n\n    .react-grid-item.react-grid-placeholder {\n      background: ${interactive};\n      opacity: 0.3;\n    }\n  `;\n});\nStyledEditor.defaultProps = defaultThemeProp;\n\nexport interface GridLayoutHandleValue {\n  /** Used to get layout model with imperative handle. Returns the layout model from all breakpoints. Returns undefined when no children. */\n  getLayoutModel: () => GridLayoutModel | undefined;\n\n  /**\n   * Returns a flag indicating whether there are any gaps in the current layout.\n   * Highlights all background cells to indicate the same.\n   */\n  checkForGaps: () => boolean;\n}\n\n/** Props for GridLayoutEditor component */\nexport interface GridLayoutEditorProps {\n  /**\n   * Called whenever there's a change in the layoutModel.\n   * Change-handler of the CONTROLLED COMPONENT\n   */\n  onModelChange: (newModel: GridLayoutModel | undefined) => void;\n\n  /**\n   * Value of the CONTROLLED component\n   * Passed when editing a previously saved layout.\n   * Can be `undefined` when no children.\n   * It should be the same as the one emitted by `getLayoutModel` or `handle`\n   */\n  layoutModel: GridLayoutModel | undefined;\n\n  /**\n   * Breakpoints set on the Grid.\n   * Needs to be aligned with `rows` and `cols`\n   */\n  breakpoints: GridBreakPointWiseValues;\n\n  /**\n   * # of rows to fit into the container height at each breakpoint (unless a fixed rowHeight is preferred)\n   * rows should be aligned with `breakpoints` prop\n   */\n  rows: GridLayoutRowsProp;\n\n  /**\n   * Breakpoint-wise numColumns on the Grid.\n   * cols should be aligned with `breakpoints` prop\n   */\n  cols: GridBreakPointWiseValues;\n\n  /**\n   * If parent DOM node of ResponsiveReactGridLayout or ReactGridLayout has \"transform: scale(n)\" css property,\n   * we should set scale coefficient to avoid render artifacts while dragging.\n   */\n  transformScale?: CoreProps['transformScale'];\n\n  /** Ref to access the editor state. Used to get the current layout-model when persisting it. */\n  handle?: Ref<GridLayoutHandleValue>;\n\n  /**\n   * Child elements to be rendered as Grid items.\n   * Each element should have a unique `key`\n   * Memoize children for a better performance: https://github.com/react-grid-layout/react-grid-layout#performance\n   * Set up an `itemLabel` prop with the text to call out when the item is focused.\n   * If a child needs to be initialized with a specific x/y/w/h,\n   *   or if you want to specify any special properties like minW, minH, etc.,\n   *   set up a `data-grid` in layoutModel prop with any subset of properties\n   * The prop can be undefined on init when no elements.\n   */\n  children?: ReactElement[];\n\n  /** Item label mapped with item id for a11y */\n  itemLabelMap: Record<string, string>;\n}\n\n/**\n * Editor component to create Grid Layouts\n * @component\n */\nconst GridLayoutEditor: FC<GridLayoutEditorProps> = ({\n  handle,\n  children,\n  layoutModel,\n  rows,\n  onModelChange,\n  itemLabelMap,\n  ...restProps\n}) => {\n  // Track width changes: https://github.com/react-grid-layout/react-grid-layout#providing-grid-width\n  const [wrapperEl, setWrapperEl] = useElement<HTMLElement>();\n  const size = useMonitoredSize(wrapperEl);\n  const width = size?.width;\n  const height = size?.height;\n  const commonGridConfig = useGridLayoutConfig(true);\n  const t = useI18n();\n  const { breakpoint, numColumns } = useMemo(\n    () => getBreakpointAndCols(width || 0, restProps.breakpoints, restProps.cols),\n    [width, restProps.breakpoints, restProps.cols]\n  );\n  const { rowHeight, numRowsPerPage } = useMemo(\n    () => getRowHeight(breakpoint, height || 0, commonGridConfig.margin[0], rows, layoutModel),\n    [breakpoint, commonGridConfig.margin, height, rows, layoutModel]\n  );\n  const currentLayout = useMemo(() => layoutModel?.[breakpoint], [breakpoint, layoutModel]);\n\n  const onLayoutChange = useCallback(\n    (curLayout: Layout[], allLayouts: Layouts) => {\n      onModelChange(!children || children.length === 0 ? undefined : allLayouts);\n    },\n    [children, onModelChange]\n  );\n\n  // Callback to sort child DOM nodes to ensure an intuitive tabbing order\n  const gridItemSorter = useGridItemSorter(currentLayout, numColumns);\n\n  // Set up keyboard accessibility\n  const [listEl, setListEl] = useElement<HTMLElement>();\n  useEffect(() => {\n    if (listEl) {\n      listEl.setAttribute('role', 'list');\n      listEl.setAttribute('tabindex', '0');\n      listEl.setAttribute('aria-label', t('configurable_layout_instructions'));\n    }\n  }, [listEl, t]);\n\n  const moveItem = useCallback(\n    (itemKey: ReactElement['key'], deltaX: number, deltaY: number) => {\n      // Should be initialized by this point\n      if (!currentLayout) return;\n      const itemIndex = currentLayout.findIndex(item => item.i === itemKey);\n      // Should be present on the currentLayout by this point.\n      if (itemIndex === -1) return;\n\n      const oldItem = currentLayout[itemIndex];\n      const newItem: Layout = {\n        ...oldItem,\n        // `Math.max` needed to avoid a glitch when moving left beyond the left edge\n        x: Math.max(0, oldItem.x + deltaX),\n        y: Math.max(0, oldItem.y + deltaY)\n      };\n      const newLayout = [\n        ...currentLayout.slice(0, itemIndex),\n        newItem,\n        ...currentLayout.slice(itemIndex + 1)\n      ];\n      const newModel = { ...layoutModel, [breakpoint]: newLayout };\n      onModelChange(!children || children.length === 0 ? undefined : newModel);\n    },\n    [breakpoint, children, currentLayout, layoutModel, onModelChange]\n  );\n\n  const addOrSubtractItemSize = useCallback(\n    (itemKey: ReactElement['key'], deltaW: number, deltaH: number) => {\n      // Should be initialized by this point\n      if (!currentLayout) return;\n      const itemIndex = currentLayout.findIndex(item => item.i === itemKey);\n      // Should be present on the currentLayout by this point.\n      if (itemIndex === -1) return;\n\n      const oldItem = currentLayout[itemIndex];\n      const newItem: Layout = {\n        ...oldItem,\n        // `Math.max` needed to avoid a glitch when moving left beyond the left edge\n        w: Math.max(oldItem.minW || 2, oldItem.w + deltaW),\n        h: Math.max(oldItem.minH || 2, oldItem.h + deltaH)\n      };\n      const newLayout = [\n        ...currentLayout.slice(0, itemIndex),\n        newItem,\n        ...currentLayout.slice(itemIndex + 1)\n      ];\n      const newModel = { ...layoutModel, [breakpoint]: newLayout };\n      onModelChange(!children || children.length === 0 ? undefined : newModel);\n    },\n    [breakpoint, children, currentLayout, layoutModel, onModelChange]\n  );\n\n  // Provide a way for the parent component to get layout-model on demand\n  const [highlightedBG, setHighlightedBG] = useState(false);\n  useImperativeHandle(\n    handle,\n    () => ({\n      getLayoutModel: () => {\n        // Without this check, we'll end up with the dummy model set up down below for this case\n        if (!children || children.length === 0) return undefined;\n        return layoutModel;\n      },\n\n      checkForGaps: () => {\n        // On load when no items are added.\n        if (!currentLayout) return true;\n        const hasGaps = checkLayoutForGaps(currentLayout, numColumns);\n        setHighlightedBG(hasGaps);\n        return hasGaps;\n      }\n    }),\n    [children, layoutModel, currentLayout, numColumns]\n  );\n\n  return (\n    // Editor is always in LTR. At runtime, the layout is mirrored depending on locale.\n    <StyledEditor ref={setWrapperEl} dir='ltr'>\n      <ReactResizableStyles />\n      <ReactGridLayoutStyles />\n\n      {!!width && !!height && (\n        <>\n          <EditorBackground\n            data-testid='editor'\n            layout={currentLayout}\n            numColumns={numColumns}\n            rowHeight={rowHeight}\n            rowsPerPage={numRowsPerPage}\n            highlighted={highlightedBG}\n          />\n\n          <ResponsiveGridLayout\n            {...commonGridConfig}\n            width={width}\n            rowHeight={rowHeight}\n            onLayoutChange={onLayoutChange}\n            resizeHandles={['s', 'e', 'n', 'w', 'sw', 'nw', 'se', 'ne']}\n            resizeHandle={<ResizeHandle />}\n            // To prevent drag event on the resize handles\n            draggableCancel={`.${resizeHandleClassName}`}\n            innerRef={setListEl}\n            layouts={layoutModel}\n            {...restProps}\n          >\n            {children?.sort(gridItemSorter).map(child => {\n              const gridLayoutModel = layoutModel?.[breakpoint]?.filter(\n                layout => layout.i === child.key\n              );\n              return (\n                <EditorGridItem\n                  key={child.key}\n                  itemKey={child.key}\n                  data-grid={gridLayoutModel && gridLayoutModel[0]}\n                  itemLabel={itemLabelMap[child.key!] || ''}\n                  moveItem={moveItem}\n                  addOrSubtractItemSize={addOrSubtractItemSize}\n                >\n                  {child}\n                </EditorGridItem>\n              );\n            })}\n\n            {(!children || children.length === 0) && (\n              // Placeholder when no children. Needed to avoid exceptions:\n              // https://github.com/react-grid-layout/react-grid-layout/issues/216\n              <div key='--' data-grid={{ x: 0, y: 0, w: 1, h: 1, resizeHandles: [] }} />\n            )}\n          </ResponsiveGridLayout>\n        </>\n      )}\n    </StyledEditor>\n  );\n};\n\nexport default GridLayoutEditor;\n"]}

package/lib/components/PageTemplates/GridLayout/GridLayoutViewer.d.ts

@@ -33,6 +33,11 @@ export interface GridLayoutViewerProps {
      * By default, all items will have fixed heights derived from the `layoutModel` prop
      */
     autoSizeItemIDs?: string[];
+    /**
+     * Add container margin to viewer and runtime
+     * @default true
+     */
+    padContent?: boolean;
 }
 /**
  * Viewer component for a Grid created using GridLayoutEditor

package/lib/components/PageTemplates/GridLayout/GridLayoutViewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridLayoutViewer.d.ts","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/GridLayoutViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAc,KAAK,YAAY,EAAqB,MAAM,OAAO,CAAC;AAOlF,OAAO,KAAK,EAAE,wBAAwB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE1E,OAAO,EAOL,KAAK,kBAAkB,EACxB,MAAM,SAAS,CAAC;AAwCjB,+CAA+C;AAC/C,MAAM,WAAW,qBAAqB;IACpC;;;;;OAKG;IACH,WAAW,EAAE,eAAe,GAAG,SAAS,CAAC;IAEzC;;;OAGG;IACH,WAAW,EAAE,wBAAwB,CAAC;IAEtC;;;OAGG;IACH,IAAI,EAAE,kBAAkB,CAAC;IAEzB;;;OAGG;IACH,IAAI,EAAE,wBAAwB,CAAC;IAE/B,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;IAE1B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;CAC5B;AAED;;;GAGG;AACH,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAiF/C,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"GridLayoutViewer.d.ts","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/GridLayoutViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAc,KAAK,YAAY,EAAqB,MAAM,OAAO,CAAC;AAOlF,OAAO,KAAK,EAAE,wBAAwB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE1E,OAAO,EAOL,KAAK,kBAAkB,EACxB,MAAM,SAAS,CAAC;AAwCjB,+CAA+C;AAC/C,MAAM,WAAW,qBAAqB;IACpC;;;;;OAKG;IACH,WAAW,EAAE,eAAe,GAAG,SAAS,CAAC;IAEzC;;;OAGG;IACH,WAAW,EAAE,wBAAwB,CAAC;IAEtC;;;OAGG;IACH,IAAI,EAAE,kBAAkB,CAAC;IAEzB;;;OAGG;IACH,IAAI,EAAE,wBAAwB,CAAC;IAE/B,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;IAE1B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAE3B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;GAGG;AACH,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAkF/C,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/PageTemplates/GridLayout/GridLayoutViewer.js

@@ -33,13 +33,13 @@ const ViewerGridItem = forwardRef(({ children, autoSize, direction, ...restProps
  * Viewer component for a Grid created using GridLayoutEditor
  * @component
  */
-const GridLayoutViewer = ({ children, layoutModel: layoutModelProp, rows, cols, autoSizeItemIDs = [], breakpoints }) => {
+const GridLayoutViewer = ({ children, layoutModel: layoutModelProp, rows, cols, autoSizeItemIDs = [], breakpoints, padContent = true }) => {
     // Track width changes: https://github.com/react-grid-layout/react-grid-layout#providing-grid-width
     const [wrapperEl, setWrapperEl] = useElement();
     const size = useMonitoredSize(wrapperEl);
     const width = size?.width;
     const height = size?.height;
-    const commonGridConfig = useGridLayoutConfig();
+    const commonGridConfig = useGridLayoutConfig(padContent);
     const { breakpoint, numColumns } = useMemo(() => getBreakpointAndCols(width || 0, breakpoints, cols), [width, breakpoints, cols]);
     const { rowHeight } = useMemo(() => getRowHeight(breakpoint, height || 0, commonGridConfig.margin[0], rows, layoutModelProp), [breakpoint, commonGridConfig.margin, height, rows, layoutModelProp]);
     // On load, setting layoutModel based on the direction

package/lib/components/PageTemplates/GridLayout/GridLayoutViewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridLayoutViewer.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/GridLayoutViewer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { type FC, forwardRef, type ReactElement, type Ref, useMemo } from 'react';\nimport { Responsive as ResponsiveGridLayout } from 'react-grid-layout';\nimport styled, { css } from 'styled-components';\n\nimport Flex from '../../Flex';\nimport { useDirection, useElement } from '../../../hooks';\n\nimport type { GridBreakPointWiseValues, GridLayoutModel } from './config';\nimport useGridLayoutConfig from './config';\nimport {\n  convertLtrToRtl,\n  getBreakpointAndCols,\n  getLastItemsInLayout,\n  getRowHeight,\n  useGridItemSorter,\n  useMonitoredSize,\n  type GridLayoutRowsProp\n} from './utils';\nimport ReactGridLayoutStyles from './ReactGridLayoutStyles';\n\nconst StyledWrapper = styled(Flex)`\n  block-size: 100%;\n`;\n\nconst StyledEmptyFooter = styled.div`\n  block-size: ${({ theme }) => `calc(${theme.base.spacing} * 2)`};\n`;\n\nconst StyledAutoSizeItem = styled(Flex)<{ autoSize: boolean }>(({ autoSize }) => {\n  if (!autoSize) return '';\n  return css`\n    /* Overriding the inline style added by the RGL plugin. Needed to give the item a free height. */\n    height: auto !important;\n\n    /* Needed to maintain the extra gap at the bottom, since it's position absolute-ly */\n    padding-bottom: 1rem;\n  `;\n});\n\n/**\n * Wrapper on top of GridItems to forward ref, etc.\n * https://github.com/react-grid-layout/react-grid-layout#custom-child-components-and-draggable-handles\n */\nconst ViewerGridItem = forwardRef(\n  ({ children, autoSize, direction, ...restProps }: any, ref: Ref<HTMLDivElement>) => (\n    <StyledAutoSizeItem\n      autoSize={autoSize}\n      container={{ direction: 'column' }}\n      ref={ref}\n      {...restProps}\n      dir={direction}\n    >\n      {children}\n    </StyledAutoSizeItem>\n  )\n);\n\n/** Props for the GridLayoutViewer component */\nexport interface GridLayoutViewerProps {\n  /**\n   * Layout-model saved previously from a GridLayoutEditor.\n   * If undefined, the elements will be rendered in some default layout.\n   * NOTE: A remount is needed if this layoutModel needs to be changed from the outside.\n   * - The component reads it only once on load and populates layouts for missing breakpoints, assuming `lg` as the baseline\n   */\n  layoutModel: GridLayoutModel | undefined;\n\n  /**\n   * Breakpoints set on the Grid.\n   * Needs to be aligned with `rows` and `cols`\n   */\n  breakpoints: GridBreakPointWiseValues;\n\n  /**\n   * # of rows to fit into the container height at each breakpoint (unless a fixed rowHeight is preferred)\n   * rows should be aligned with `breakpoints` prop\n   */\n  rows: GridLayoutRowsProp;\n\n  /**\n   * Breakpoint-wise numColumns on the Grid.\n   * cols should be aligned with `breakpoints` prop\n   */\n  cols: GridBreakPointWiseValues;\n\n  /** Child elements to be rendered as Grid items. Each element should have a unique `key` */\n  children?: ReactElement[];\n\n  /**\n   * List of items that needs to have free-flowing height.\n   * NOTE: This works just for the items which don't have any other content underneath them.\n   * By default, all items will have fixed heights derived from the `layoutModel` prop\n   */\n  autoSizeItemIDs?: string[];\n}\n\n/**\n * Viewer component for a Grid created using GridLayoutEditor\n * @component\n */\nconst GridLayoutViewer: FC<GridLayoutViewerProps> = ({\n  children,\n  layoutModel: layoutModelProp,\n  rows,\n  cols,\n  autoSizeItemIDs = [],\n  breakpoints\n}) => {\n  // Track width changes: https://github.com/react-grid-layout/react-grid-layout#providing-grid-width\n  const [wrapperEl, setWrapperEl] = useElement<HTMLElement>();\n  const size = useMonitoredSize(wrapperEl);\n  const width = size?.width;\n  const height = size?.height;\n  const commonGridConfig = useGridLayoutConfig();\n  const { breakpoint, numColumns } = useMemo(\n    () => getBreakpointAndCols(width || 0, breakpoints, cols),\n    [width, breakpoints, cols]\n  );\n  const { rowHeight } = useMemo(\n    () => getRowHeight(breakpoint, height || 0, commonGridConfig.margin[0], rows, layoutModelProp),\n    [breakpoint, commonGridConfig.margin, height, rows, layoutModelProp]\n  );\n\n  // On load, setting layoutModel based on the direction\n  const { rtl } = useDirection();\n  const layoutModel = useMemo(() => {\n    if (rtl && layoutModelProp) return convertLtrToRtl(layoutModelProp, cols);\n    return layoutModelProp;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // Callback to sort child DOM nodes to ensure an intuitive tabbing order\n  const gridItemSorter = useGridItemSorter(layoutModelProp?.[breakpoint], numColumns);\n\n  // Get list of last items in layout\n  const lastItemsInLayout = useMemo(\n    () => getLastItemsInLayout(layoutModel?.[breakpoint]),\n    [breakpoint, layoutModel]\n  );\n\n  return (\n    // Enforcing ltr here due to limitations of the RGL plugin.\n    // The layout is mirrored using convertLtrToRtl above,\n    // and then the direction is explicitly passed to items below.\n    <StyledWrapper ref={setWrapperEl} dir='ltr'>\n      <ReactGridLayoutStyles />\n\n      {!!width && !!height && (\n        <ResponsiveGridLayout\n          {...commonGridConfig}\n          width={width}\n          rowHeight={Math.max(rowHeight, 50)}\n          layouts={layoutModel}\n          isResizable={false}\n          isDraggable={false}\n          isDroppable={false}\n          cols={cols}\n          breakpoints={breakpoints}\n        >\n          {children?.sort(gridItemSorter).map(child => {\n            const autoSize =\n              autoSizeItemIDs.includes(child.key!) && lastItemsInLayout.includes(child.key!);\n\n            return (\n              <ViewerGridItem key={child.key} autoSize={autoSize} direction={rtl ? 'rtl' : 'ltr'}>\n                {child}\n              </ViewerGridItem>\n            );\n          })}\n\n          {(!children || children.length === 0) && (\n            // Placeholder when no children. Needed to avoid exceptions:\n            // https://github.com/react-grid-layout/react-grid-layout/issues/216\n            <div key='--' />\n          )}\n        </ResponsiveGridLayout>\n      )}\n      {/** Removed container padding, hence adding extra space at bottom of grid */}\n      <StyledEmptyFooter />\n    </StyledWrapper>\n  );\n};\n\nexport default GridLayoutViewer;\n"]}
+{"version":3,"file":"GridLayoutViewer.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/GridLayoutViewer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { type FC, forwardRef, type ReactElement, type Ref, useMemo } from 'react';\nimport { Responsive as ResponsiveGridLayout } from 'react-grid-layout';\nimport styled, { css } from 'styled-components';\n\nimport Flex from '../../Flex';\nimport { useDirection, useElement } from '../../../hooks';\n\nimport type { GridBreakPointWiseValues, GridLayoutModel } from './config';\nimport useGridLayoutConfig from './config';\nimport {\n  convertLtrToRtl,\n  getBreakpointAndCols,\n  getLastItemsInLayout,\n  getRowHeight,\n  useGridItemSorter,\n  useMonitoredSize,\n  type GridLayoutRowsProp\n} from './utils';\nimport ReactGridLayoutStyles from './ReactGridLayoutStyles';\n\nconst StyledWrapper = styled(Flex)`\n  block-size: 100%;\n`;\n\nconst StyledEmptyFooter = styled.div`\n  block-size: ${({ theme }) => `calc(${theme.base.spacing} * 2)`};\n`;\n\nconst StyledAutoSizeItem = styled(Flex)<{ autoSize: boolean }>(({ autoSize }) => {\n  if (!autoSize) return '';\n  return css`\n    /* Overriding the inline style added by the RGL plugin. Needed to give the item a free height. */\n    height: auto !important;\n\n    /* Needed to maintain the extra gap at the bottom, since it's position absolute-ly */\n    padding-bottom: 1rem;\n  `;\n});\n\n/**\n * Wrapper on top of GridItems to forward ref, etc.\n * https://github.com/react-grid-layout/react-grid-layout#custom-child-components-and-draggable-handles\n */\nconst ViewerGridItem = forwardRef(\n  ({ children, autoSize, direction, ...restProps }: any, ref: Ref<HTMLDivElement>) => (\n    <StyledAutoSizeItem\n      autoSize={autoSize}\n      container={{ direction: 'column' }}\n      ref={ref}\n      {...restProps}\n      dir={direction}\n    >\n      {children}\n    </StyledAutoSizeItem>\n  )\n);\n\n/** Props for the GridLayoutViewer component */\nexport interface GridLayoutViewerProps {\n  /**\n   * Layout-model saved previously from a GridLayoutEditor.\n   * If undefined, the elements will be rendered in some default layout.\n   * NOTE: A remount is needed if this layoutModel needs to be changed from the outside.\n   * - The component reads it only once on load and populates layouts for missing breakpoints, assuming `lg` as the baseline\n   */\n  layoutModel: GridLayoutModel | undefined;\n\n  /**\n   * Breakpoints set on the Grid.\n   * Needs to be aligned with `rows` and `cols`\n   */\n  breakpoints: GridBreakPointWiseValues;\n\n  /**\n   * # of rows to fit into the container height at each breakpoint (unless a fixed rowHeight is preferred)\n   * rows should be aligned with `breakpoints` prop\n   */\n  rows: GridLayoutRowsProp;\n\n  /**\n   * Breakpoint-wise numColumns on the Grid.\n   * cols should be aligned with `breakpoints` prop\n   */\n  cols: GridBreakPointWiseValues;\n\n  /** Child elements to be rendered as Grid items. Each element should have a unique `key` */\n  children?: ReactElement[];\n\n  /**\n   * List of items that needs to have free-flowing height.\n   * NOTE: This works just for the items which don't have any other content underneath them.\n   * By default, all items will have fixed heights derived from the `layoutModel` prop\n   */\n  autoSizeItemIDs?: string[];\n\n  /**\n   * Add container margin to viewer and runtime\n   * @default true\n   */\n  padContent?: boolean;\n}\n\n/**\n * Viewer component for a Grid created using GridLayoutEditor\n * @component\n */\nconst GridLayoutViewer: FC<GridLayoutViewerProps> = ({\n  children,\n  layoutModel: layoutModelProp,\n  rows,\n  cols,\n  autoSizeItemIDs = [],\n  breakpoints,\n  padContent = true\n}) => {\n  // Track width changes: https://github.com/react-grid-layout/react-grid-layout#providing-grid-width\n  const [wrapperEl, setWrapperEl] = useElement<HTMLElement>();\n  const size = useMonitoredSize(wrapperEl);\n  const width = size?.width;\n  const height = size?.height;\n  const commonGridConfig = useGridLayoutConfig(padContent);\n  const { breakpoint, numColumns } = useMemo(\n    () => getBreakpointAndCols(width || 0, breakpoints, cols),\n    [width, breakpoints, cols]\n  );\n  const { rowHeight } = useMemo(\n    () => getRowHeight(breakpoint, height || 0, commonGridConfig.margin[0], rows, layoutModelProp),\n    [breakpoint, commonGridConfig.margin, height, rows, layoutModelProp]\n  );\n\n  // On load, setting layoutModel based on the direction\n  const { rtl } = useDirection();\n  const layoutModel = useMemo(() => {\n    if (rtl && layoutModelProp) return convertLtrToRtl(layoutModelProp, cols);\n    return layoutModelProp;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // Callback to sort child DOM nodes to ensure an intuitive tabbing order\n  const gridItemSorter = useGridItemSorter(layoutModelProp?.[breakpoint], numColumns);\n\n  // Get list of last items in layout\n  const lastItemsInLayout = useMemo(\n    () => getLastItemsInLayout(layoutModel?.[breakpoint]),\n    [breakpoint, layoutModel]\n  );\n\n  return (\n    // Enforcing ltr here due to limitations of the RGL plugin.\n    // The layout is mirrored using convertLtrToRtl above,\n    // and then the direction is explicitly passed to items below.\n    <StyledWrapper ref={setWrapperEl} dir='ltr'>\n      <ReactGridLayoutStyles />\n\n      {!!width && !!height && (\n        <ResponsiveGridLayout\n          {...commonGridConfig}\n          width={width}\n          rowHeight={Math.max(rowHeight, 50)}\n          layouts={layoutModel}\n          isResizable={false}\n          isDraggable={false}\n          isDroppable={false}\n          cols={cols}\n          breakpoints={breakpoints}\n        >\n          {children?.sort(gridItemSorter).map(child => {\n            const autoSize =\n              autoSizeItemIDs.includes(child.key!) && lastItemsInLayout.includes(child.key!);\n\n            return (\n              <ViewerGridItem key={child.key} autoSize={autoSize} direction={rtl ? 'rtl' : 'ltr'}>\n                {child}\n              </ViewerGridItem>\n            );\n          })}\n\n          {(!children || children.length === 0) && (\n            // Placeholder when no children. Needed to avoid exceptions:\n            // https://github.com/react-grid-layout/react-grid-layout/issues/216\n            <div key='--' />\n          )}\n        </ResponsiveGridLayout>\n      )}\n      {/** Removed container padding, hence adding extra space at bottom of grid */}\n      <StyledEmptyFooter />\n    </StyledWrapper>\n  );\n};\n\nexport default GridLayoutViewer;\n"]}

package/lib/components/PageTemplates/GridLayout/config.d.ts

@@ -10,7 +10,7 @@ export type GridBreakPointWiseValues = Partial<Record<GridBreakPoint, number>>;
  * These properties need to stay consistent between the design-time and run-time layouts.
  * @returns Default RGL props for the GridLayout editor/viewer
  */
-export default function useGridLayoutConfig(): {
+export default function useGridLayoutConfig(padContent: boolean): {
     margin: [number, number];
     containerPadding: [number, number];
     compactType: "vertical";

package/lib/components/PageTemplates/GridLayout/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/config.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAIhD,uDAAuD;AACvD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAE/D,yEAAyE;AACzE,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;AAExE,8DAA8D;AAC9D,MAAM,MAAM,wBAAwB,GAAG,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC;AAE/E;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB;YAiBf,CAAC,MAAM,EAAE,MAAM,CAAC;sBACR,CAAC,MAAM,EAAE,MAAM,CAAC;;EAInD"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/config.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAIhD,uDAAuD;AACvD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAE/D,yEAAyE;AACzE,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;AAExE,8DAA8D;AAC9D,MAAM,MAAM,wBAAwB,GAAG,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC;AAE/E;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,UAAU,EAAE,OAAO;YAiBnC,CAAC,MAAM,EAAE,MAAM,CAAC;sBACS,CAAC,MAAM,EAAE,MAAM,CAAC;;EAIpE"}

package/lib/components/PageTemplates/GridLayout/config.js

@@ -6,7 +6,7 @@ import { useTheme } from '../../../hooks';
  * These properties need to stay consistent between the design-time and run-time layouts.
  * @returns Default RGL props for the GridLayout editor/viewer
  */
-export default function useGridLayoutConfig() {
+export default function useGridLayoutConfig(padContent) {
     const theme = useTheme();
     return useMemo(() => {
         // Determine Gap around different grid cells (px)
@@ -24,9 +24,9 @@ export default function useGridLayoutConfig() {
         }
         return {
             margin: [gap, gap],
-            containerPadding: [gap, 0],
+            containerPadding: [padContent ? gap : 0, 0],
             compactType: 'vertical'
         };
-    }, [theme]);
+    }, [theme, padContent]);
 }
 //# sourceMappingURL=config.js.map

package/lib/components/PageTemplates/GridLayout/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAW1C;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB;IACzC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,iDAAiD;QACjD,IAAI,GAAW,CAAC;QAChB,IAAI,CAAC;YACH,uDAAuD;YACvD,8CAA8C;YAC9C,qEAAqE;YACrE,GAAG,GAAG,CAAC,GAAG,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAC3D,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,sCAAsC;YACtC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAChB,GAAG,GAAG,EAAE,CAAC;QACX,CAAC;QAED,OAAO;YACL,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,CAAqB;YACtC,gBAAgB,EAAE,CAAC,GAAG,EAAE,CAAC,CAAqB;YAC9C,WAAW,EAAE,UAAmB;SACjC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AACd,CAAC","sourcesContent":["import { remToPx, stripUnit } from 'polished';\nimport { useMemo } from 'react';\nimport type { Layout } from 'react-grid-layout';\n\nimport { useTheme } from '../../../hooks';\n\n/** A breakpoint on the responsive GridLayout editor */\nexport type GridBreakPoint = 'lg' | 'md' | 'sm' | 'xs' | 'xxs';\n\n/** The persisted layout model could contain any subset of breakpoints */\nexport type GridLayoutModel = Partial<Record<GridBreakPoint, Layout[]>>;\n\n/** Numeric configuration per each breakpoint in GridLayout */\nexport type GridBreakPointWiseValues = Partial<Record<GridBreakPoint, number>>;\n\n/**\n * Config common to GridLayoutEditor and GridLayoutViewer.\n * These properties need to stay consistent between the design-time and run-time layouts.\n * @returns Default RGL props for the GridLayout editor/viewer\n */\nexport default function useGridLayoutConfig() {\n  const theme = useTheme();\n  return useMemo(() => {\n    // Determine Gap around different grid cells (px)\n    let gap: number;\n    try {\n      // Just for safety in case the value is not in rem etc.\n      // `polished` throws errors in those scenarios\n      // Shouldn't normally needed since Cosmos values are always in `rem`s\n      gap = 2 * Number(stripUnit(remToPx(theme.base.spacing)));\n    } catch (e) {\n      // eslint-disable-next-line no-console\n      console.warn(e);\n      gap = 16;\n    }\n\n    return {\n      margin: [gap, gap] as [number, number],\n      containerPadding: [gap, 0] as [number, number],\n      compactType: 'vertical' as const\n    };\n  }, [theme]);\n}\n"]}
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAW1C;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,UAAmB;IAC7D,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,iDAAiD;QACjD,IAAI,GAAW,CAAC;QAChB,IAAI,CAAC;YACH,uDAAuD;YACvD,8CAA8C;YAC9C,qEAAqE;YACrE,GAAG,GAAG,CAAC,GAAG,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAC3D,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,sCAAsC;YACtC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAChB,GAAG,GAAG,EAAE,CAAC;QACX,CAAC;QAED,OAAO;YACL,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,CAAqB;YACtC,gBAAgB,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAqB;YAC/D,WAAW,EAAE,UAAmB;SACjC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC;AAC1B,CAAC","sourcesContent":["import { remToPx, stripUnit } from 'polished';\nimport { useMemo } from 'react';\nimport type { Layout } from 'react-grid-layout';\n\nimport { useTheme } from '../../../hooks';\n\n/** A breakpoint on the responsive GridLayout editor */\nexport type GridBreakPoint = 'lg' | 'md' | 'sm' | 'xs' | 'xxs';\n\n/** The persisted layout model could contain any subset of breakpoints */\nexport type GridLayoutModel = Partial<Record<GridBreakPoint, Layout[]>>;\n\n/** Numeric configuration per each breakpoint in GridLayout */\nexport type GridBreakPointWiseValues = Partial<Record<GridBreakPoint, number>>;\n\n/**\n * Config common to GridLayoutEditor and GridLayoutViewer.\n * These properties need to stay consistent between the design-time and run-time layouts.\n * @returns Default RGL props for the GridLayout editor/viewer\n */\nexport default function useGridLayoutConfig(padContent: boolean) {\n  const theme = useTheme();\n  return useMemo(() => {\n    // Determine Gap around different grid cells (px)\n    let gap: number;\n    try {\n      // Just for safety in case the value is not in rem etc.\n      // `polished` throws errors in those scenarios\n      // Shouldn't normally needed since Cosmos values are always in `rem`s\n      gap = 2 * Number(stripUnit(remToPx(theme.base.spacing)));\n    } catch (e) {\n      // eslint-disable-next-line no-console\n      console.warn(e);\n      gap = 16;\n    }\n\n    return {\n      margin: [gap, gap] as [number, number],\n      containerPadding: [padContent ? gap : 0, 0] as [number, number],\n      compactType: 'vertical' as const\n    };\n  }, [theme, padContent]);\n}\n"]}

package/lib/hooks/index.d.ts

@@ -2,6 +2,7 @@ export { default as useAbortController } from './useAbortController';
 export { default as useActiveDescendant, useLazyDescendant } from './useActiveDescendant';
 export type { UseActiveDescendantConfig } from './useActiveDescendant';
 export { default as useAfterInitialEffect } from './useAfterInitialEffect';
+export { default as useAnimatedText } from './useAnimatedText';
 export { default as useArrows } from './useArrows';
 export { default as useAutoResize } from './useAutoResize';
 export { default as useBreakpoint } from './useBreakpoint';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1F,YAAY,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AACvE,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,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAChF,YAAY,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,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,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,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,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"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"}

package/lib/hooks/index.js

@@ -1,6 +1,7 @@
 export { default as useAbortController } from './useAbortController';
 export { default as useActiveDescendant, useLazyDescendant } from './useActiveDescendant';
 export { default as useAfterInitialEffect } from './useAfterInitialEffect';
+export { default as useAnimatedText } from './useAnimatedText';
 export { default as useArrows } from './useArrows';
 export { default as useAutoResize } from './useAutoResize';
 export { default as useBreakpoint } from './useBreakpoint';

package/lib/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"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","sourcesContent":["export { default as useAbortController } from './useAbortController';\nexport { default as useActiveDescendant, useLazyDescendant } from './useActiveDescendant';\nexport type { UseActiveDescendantConfig } 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 usePopoverMap } from './usePopoverMap';\nexport { default as usePrevious } from './usePrevious';\nexport { default as useRefMap } from './useRefMap';\nexport { default as useSimpleStore, createSimpleStore } from './useSimpleStore';\nexport type { SimpleStore } from './useSimpleStore';\nexport { default as useSimpleStoreInstance } from './useSimpleStoreInstance';\nexport { default as useScrollStick } from './useScrollStick';\nexport { default as useScrollToggle } from './useScrollToggle';\nexport { default as useShortcut } from './useShortcut';\nexport { default as useShortcutManager } from './useShortcutManager';\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 useElementFocus } from './useElementFocus';\nexport { default as useTriggerableLayoutEffect } from './useTriggerableLayoutEffect';\nexport { default as useUID } from './useUID';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1F,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,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,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAEhF,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,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,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,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,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC","sourcesContent":["export { default as useAbortController } from './useAbortController';\nexport { default as useActiveDescendant, useLazyDescendant } from './useActiveDescendant';\nexport type { UseActiveDescendantConfig } from './useActiveDescendant';\nexport { default as useAfterInitialEffect } from './useAfterInitialEffect';\nexport { default as useAnimatedText } from './useAnimatedText';\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 usePopoverMap } from './usePopoverMap';\nexport { default as usePrevious } from './usePrevious';\nexport { default as useRefMap } from './useRefMap';\nexport { default as useSimpleStore, createSimpleStore } from './useSimpleStore';\nexport type { SimpleStore } from './useSimpleStore';\nexport { default as useSimpleStoreInstance } from './useSimpleStoreInstance';\nexport { default as useScrollStick } from './useScrollStick';\nexport { default as useScrollToggle } from './useScrollToggle';\nexport { default as useShortcut } from './useShortcut';\nexport { default as useShortcutManager } from './useShortcutManager';\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 useElementFocus } from './useElementFocus';\nexport { default as useTriggerableLayoutEffect } from './useTriggerableLayoutEffect';\nexport { default as useUID } from './useUID';\n"]}

package/lib/hooks/useAnimatedText.d.ts

@@ -0,0 +1,11 @@
+declare const useAnimatedText: ({ text, allContentReceived, enabled, tokenizeMarkdown }: {
+    text: string;
+    allContentReceived: boolean;
+    enabled?: boolean;
+    tokenizeMarkdown?: boolean;
+}) => {
+    text: string;
+    isAnimationDone: boolean;
+};
+export default useAnimatedText;
+//# sourceMappingURL=useAnimatedText.d.ts.map

package/lib/hooks/useAnimatedText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnimatedText.d.ts","sourceRoot":"","sources":["../../src/hooks/useAnimatedText.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,eAAe,GAAI,yDAKtB;IACD,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;;;CA8GA,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/hooks/useAnimatedText.js

@@ -0,0 +1,93 @@
+import { useEffect, useState, useRef } from 'react';
+import tokenizeWithMarkdown from '../utils/markdownTokenizer';
+const useAnimatedText = ({ text, allContentReceived = false, enabled = true, tokenizeMarkdown = false }) => {
+    const [cursor, setCursor] = useState(0); // End pointer
+    const [startingCursor, setStartingCursor] = useState(0); // animation starting point
+    const [prevText, setPrevText] = useState(text);
+    const [isAnimationDone, setIsAnimationDone] = useState(false);
+    const allContentReceivedRef = useRef(allContentReceived);
+    allContentReceivedRef.current = allContentReceived;
+    // Tokenize text based on markdown flag
+    const getTokens = (inputText) => {
+        if (tokenizeMarkdown) {
+            return tokenizeWithMarkdown(inputText);
+        }
+        return inputText.split('');
+    };
+    // A new chunk has arrived
+    if (prevText !== text) {
+        setPrevText(text);
+        setStartingCursor(text.startsWith(prevText) ? cursor : 0);
+        setIsAnimationDone(false);
+    }
+    useEffect(() => {
+        // If streaming is disabled just return the whole chunk back
+        if (!enabled) {
+            setCursor(getTokens(text).length);
+            setIsAnimationDone(true);
+            return;
+        }
+        const tokens = getTokens(text);
+        const targetLength = tokens.length;
+        const charactersToAnimate = targetLength - startingCursor;
+        // If there are no more characters, return
+        if (charactersToAnimate <= 0) {
+            setCursor(targetLength);
+            setIsAnimationDone(true);
+            return;
+        }
+        let intervalId;
+        let startTime;
+        let isStopped = false;
+        let currentSpeed = 50; // Start with normal speed
+        let lastCursor = startingCursor;
+        const processTextAnimation = () => {
+            if (isStopped)
+                return;
+            const currentTime = performance.now();
+            if (!startTime) {
+                startTime = currentTime;
+            }
+            // When we have all content with us, speed up streaming animation
+            const targetSpeed = allContentReceivedRef.current ? 150 : 50;
+            // Smoothly transition to target speed
+            const speedDiff = targetSpeed - currentSpeed;
+            currentSpeed += speedDiff * 0.1; // Smooth transition
+            const elapsed = currentTime - startTime;
+            const timeStep = elapsed / 1000;
+            // Calculate how many characters we should have shown by now
+            const expectedCursor = Math.min(startingCursor + timeStep * currentSpeed, targetLength);
+            const newCursor = Math.min(Math.floor(expectedCursor), targetLength);
+            // Skip update if the cursor is at the same token
+            if (newCursor !== lastCursor) {
+                setCursor(newCursor);
+                lastCursor = newCursor;
+            }
+            // End condition - stop when we reach the target
+            if (newCursor >= targetLength && allContentReceivedRef.current) {
+                setIsAnimationDone(true);
+                return;
+            }
+            // Continue animation if not done
+            if (newCursor < targetLength || !allContentReceivedRef.current) {
+                // Use adaptive timing based on content state and visibility
+                const interval = allContentReceivedRef.current ? 20 : 50; // Faster when complete
+                intervalId = setTimeout(processTextAnimation, interval);
+            }
+        };
+        // Start the animation with initial delay
+        intervalId = setTimeout(processTextAnimation, 16);
+        return () => {
+            isStopped = true;
+            if (intervalId) {
+                clearTimeout(intervalId);
+            }
+        };
+    }, [startingCursor, text, tokenizeMarkdown]);
+    return {
+        text: getTokens(text).slice(0, cursor).join(''),
+        isAnimationDone
+    };
+};
+export default useAnimatedText;
+//# sourceMappingURL=useAnimatedText.js.map

package/lib/hooks/useAnimatedText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnimatedText.js","sourceRoot":"","sources":["../../src/hooks/useAnimatedText.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,oBAAoB,MAAM,4BAA4B,CAAC;AAE9D,MAAM,eAAe,GAAG,CAAC,EACvB,IAAI,EACJ,kBAAkB,GAAG,KAAK,EAC1B,OAAO,GAAG,IAAI,EACd,gBAAgB,GAAG,KAAK,EAMzB,EAAE,EAAE;IACH,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc;IACvD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,2BAA2B;IAEpF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/C,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9D,MAAM,qBAAqB,GAAG,MAAM,CAAC,kBAAkB,CAAC,CAAC;IAEzD,qBAAqB,CAAC,OAAO,GAAG,kBAAkB,CAAC;IAEnD,uCAAuC;IACvC,MAAM,SAAS,GAAG,CAAC,SAAiB,EAAY,EAAE;QAChD,IAAI,gBAAgB,EAAE,CAAC;YACrB,OAAO,oBAAoB,CAAC,SAAS,CAAC,CAAC;QACzC,CAAC;QACD,OAAO,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,0BAA0B;IAC1B,IAAI,QAAQ,KAAK,IAAI,EAAE,CAAC;QACtB,WAAW,CAAC,IAAI,CAAC,CAAC;QAClB,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1D,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED,SAAS,CAAC,GAAG,EAAE;QACb,4DAA4D;QAC5D,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;YAClC,kBAAkB,CAAC,IAAI,CAAC,CAAC;YACzB,OAAO;QACT,CAAC;QAED,MAAM,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;QAC/B,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC;QACnC,MAAM,mBAAmB,GAAG,YAAY,GAAG,cAAc,CAAC;QAE1D,0CAA0C;QAC1C,IAAI,mBAAmB,IAAI,CAAC,EAAE,CAAC;YAC7B,SAAS,CAAC,YAAY,CAAC,CAAC;YACxB,kBAAkB,CAAC,IAAI,CAAC,CAAC;YACzB,OAAO;QACT,CAAC;QAED,IAAI,UAAyC,CAAC;QAC9C,IAAI,SAAiB,CAAC;QACtB,IAAI,SAAS,GAAG,KAAK,CAAC;QACtB,IAAI,YAAY,GAAG,EAAE,CAAC,CAAC,0BAA0B;QACjD,IAAI,UAAU,GAAG,cAAc,CAAC;QAEhC,MAAM,oBAAoB,GAAG,GAAG,EAAE;YAChC,IAAI,SAAS;gBAAE,OAAO;YAEtB,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC;YAEtC,IAAI,CAAC,SAAS,EAAE,CAAC;gBACf,SAAS,GAAG,WAAW,CAAC;YAC1B,CAAC;YAED,iEAAiE;YACjE,MAAM,WAAW,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;YAE7D,sCAAsC;YACtC,MAAM,SAAS,GAAG,WAAW,GAAG,YAAY,CAAC;YAC7C,YAAY,IAAI,SAAS,GAAG,GAAG,CAAC,CAAC,oBAAoB;YAErD,MAAM,OAAO,GAAG,WAAW,GAAG,SAAS,CAAC;YACxC,MAAM,QAAQ,GAAG,OAAO,GAAG,IAAI,CAAC;YAEhC,4DAA4D;YAC5D,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,cAAc,GAAG,QAAQ,GAAG,YAAY,EAAE,YAAY,CAAC,CAAC;YAExF,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,EAAE,YAAY,CAAC,CAAC;YAErE,iDAAiD;YACjD,IAAI,SAAS,KAAK,UAAU,EAAE,CAAC;gBAC7B,SAAS,CAAC,SAAS,CAAC,CAAC;gBACrB,UAAU,GAAG,SAAS,CAAC;YACzB,CAAC;YAED,gDAAgD;YAChD,IAAI,SAAS,IAAI,YAAY,IAAI,qBAAqB,CAAC,OAAO,EAAE,CAAC;gBAC/D,kBAAkB,CAAC,IAAI,CAAC,CAAC;gBACzB,OAAO;YACT,CAAC;YAED,iCAAiC;YACjC,IAAI,SAAS,GAAG,YAAY,IAAI,CAAC,qBAAqB,CAAC,OAAO,EAAE,CAAC;gBAC/D,4DAA4D;gBAC5D,MAAM,QAAQ,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,uBAAuB;gBACjF,UAAU,GAAG,UAAU,CAAC,oBAAoB,EAAE,QAAQ,CAAC,CAAC;YAC1D,CAAC;QACH,CAAC,CAAC;QAEF,yCAAyC;QACzC,UAAU,GAAG,UAAU,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;QAElD,OAAO,GAAG,EAAE;YACV,SAAS,GAAG,IAAI,CAAC;YACjB,IAAI,UAAU,EAAE,CAAC;gBACf,YAAY,CAAC,UAAU,CAAC,CAAC;YAC3B,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,EAAE,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE7C,OAAO;QACL,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;QAC/C,eAAe;KAChB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { useEffect, useState, useRef } from 'react';\n\nimport tokenizeWithMarkdown from '../utils/markdownTokenizer';\n\nconst useAnimatedText = ({\n  text,\n  allContentReceived = false,\n  enabled = true,\n  tokenizeMarkdown = false\n}: {\n  text: string;\n  allContentReceived: boolean;\n  enabled?: boolean;\n  tokenizeMarkdown?: boolean;\n}) => {\n  const [cursor, setCursor] = useState(0); // End pointer\n  const [startingCursor, setStartingCursor] = useState(0); // animation starting point\n\n  const [prevText, setPrevText] = useState(text);\n  const [isAnimationDone, setIsAnimationDone] = useState(false);\n\n  const allContentReceivedRef = useRef(allContentReceived);\n\n  allContentReceivedRef.current = allContentReceived;\n\n  // Tokenize text based on markdown flag\n  const getTokens = (inputText: string): string[] => {\n    if (tokenizeMarkdown) {\n      return tokenizeWithMarkdown(inputText);\n    }\n    return inputText.split('');\n  };\n\n  // A new chunk has arrived\n  if (prevText !== text) {\n    setPrevText(text);\n    setStartingCursor(text.startsWith(prevText) ? cursor : 0);\n    setIsAnimationDone(false);\n  }\n\n  useEffect(() => {\n    // If streaming is disabled just return the whole chunk back\n    if (!enabled) {\n      setCursor(getTokens(text).length);\n      setIsAnimationDone(true);\n      return;\n    }\n\n    const tokens = getTokens(text);\n    const targetLength = tokens.length;\n    const charactersToAnimate = targetLength - startingCursor;\n\n    // If there are no more characters, return\n    if (charactersToAnimate <= 0) {\n      setCursor(targetLength);\n      setIsAnimationDone(true);\n      return;\n    }\n\n    let intervalId: ReturnType<typeof setTimeout>;\n    let startTime: number;\n    let isStopped = false;\n    let currentSpeed = 50; // Start with normal speed\n    let lastCursor = startingCursor;\n\n    const processTextAnimation = () => {\n      if (isStopped) return;\n\n      const currentTime = performance.now();\n\n      if (!startTime) {\n        startTime = currentTime;\n      }\n\n      // When we have all content with us, speed up streaming animation\n      const targetSpeed = allContentReceivedRef.current ? 150 : 50;\n\n      // Smoothly transition to target speed\n      const speedDiff = targetSpeed - currentSpeed;\n      currentSpeed += speedDiff * 0.1; // Smooth transition\n\n      const elapsed = currentTime - startTime;\n      const timeStep = elapsed / 1000;\n\n      // Calculate how many characters we should have shown by now\n      const expectedCursor = Math.min(startingCursor + timeStep * currentSpeed, targetLength);\n\n      const newCursor = Math.min(Math.floor(expectedCursor), targetLength);\n\n      // Skip update if the cursor is at the same token\n      if (newCursor !== lastCursor) {\n        setCursor(newCursor);\n        lastCursor = newCursor;\n      }\n\n      // End condition - stop when we reach the target\n      if (newCursor >= targetLength && allContentReceivedRef.current) {\n        setIsAnimationDone(true);\n        return;\n      }\n\n      // Continue animation if not done\n      if (newCursor < targetLength || !allContentReceivedRef.current) {\n        // Use adaptive timing based on content state and visibility\n        const interval = allContentReceivedRef.current ? 20 : 50; // Faster when complete\n        intervalId = setTimeout(processTextAnimation, interval);\n      }\n    };\n\n    // Start the animation with initial delay\n    intervalId = setTimeout(processTextAnimation, 16);\n\n    return () => {\n      isStopped = true;\n      if (intervalId) {\n        clearTimeout(intervalId);\n      }\n    };\n  }, [startingCursor, text, tokenizeMarkdown]);\n\n  return {\n    text: getTokens(text).slice(0, cursor).join(''),\n    isAnimationDone\n  };\n};\n\nexport default useAnimatedText;\n"]}

package/lib/hooks/useI18n.d.ts

@@ -62,6 +62,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     duration: string;
     tokens: string;
     keyboard_instructions: string;
+    today: string;
     remove: string;
     follow: string;
     unfollow: string;
@@ -396,7 +397,11 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     start_chat: string;
     starter_message: string;
     ask_coach: string;
+    thinking: string;
+    analyzing_data_sources: string;
     generating_response: string;
+    double_checking_results: string;
+    finalizing_response: string;
     response_generated: string;
     good_response: string;
     bad_response: string;
@@ -1461,6 +1466,29 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     hide_icons_additional_info_first_sentence: string;
     hide_icons_additional_info_second_sentence: string;
     wcag: string;
+    this_year: string;
+    this_quarter: string;
+    this_month: string;
+    this_week: string;
+    this_day: string;
+    this_hour: string;
+    this_minute: string;
+    this_second: string;
+    over_time_period: string;
+    since_time_period: string;
+    in_current_time_period: string;
+    increased_by_value_over_time_period: string;
+    increased_by_value_since_time_period: string;
+    increased_by_value_in_current_time_period: string;
+    increased_by_value_today: string;
+    decreased_by_value_over_time_period: string;
+    decreased_by_value_since_time_period: string;
+    decreased_by_value_in_current_time_period: string;
+    decreased_by_value_today: string;
+    no_change_over_time_period: string;
+    no_change_since_time_period: string;
+    no_change_in_current_time_period: string;
+    no_change_today: string;
     add_to: string;
     namespace: string;
     decision_rule: string;

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

@@ -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"}
+{"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/i18n/default.d.ts

@@ -58,6 +58,7 @@ declare const _default: {
     duration: string;
     tokens: string;
     keyboard_instructions: string;
+    today: string;
     remove: string;
     follow: string;
     unfollow: string;
@@ -392,7 +393,11 @@ declare const _default: {
     start_chat: string;
     starter_message: string;
     ask_coach: string;
+    thinking: string;
+    analyzing_data_sources: string;
     generating_response: string;
+    double_checking_results: string;
+    finalizing_response: string;
     response_generated: string;
     good_response: string;
     bad_response: string;
@@ -1460,6 +1465,29 @@ declare const _default: {
     hide_icons_additional_info_first_sentence: string;
     hide_icons_additional_info_second_sentence: string;
     wcag: string;
+    this_year: string;
+    this_quarter: string;
+    this_month: string;
+    this_week: string;
+    this_day: string;
+    this_hour: string;
+    this_minute: string;
+    this_second: string;
+    over_time_period: string;
+    since_time_period: string;
+    in_current_time_period: string;
+    increased_by_value_over_time_period: string;
+    increased_by_value_since_time_period: string;
+    increased_by_value_in_current_time_period: string;
+    increased_by_value_today: string;
+    decreased_by_value_over_time_period: string;
+    decreased_by_value_since_time_period: string;
+    decreased_by_value_in_current_time_period: string;
+    decreased_by_value_today: string;
+    no_change_over_time_period: string;
+    no_change_since_time_period: string;
+    no_change_in_current_time_period: string;
+    no_change_today: string;
     add_to: string;
     namespace: string;
     decision_rule: string;

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

@@ -1 +1 @@
-{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAw+CE,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4KxB,6CAA6C;;;;IAK7C,4CAA4C;;;;;;;;;;;;;;;;;;IAiC5C,uCAAuC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA1rDzC,wBA0uDE"}
+{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA6+CE,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4KxB,6CAA6C;;;;IAK7C,4CAA4C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAiE5C,uCAAuC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/tDzC,wBA+wDE"}