@dynatrace/strato-components 3.1.1 → 3.2.0

package/esm/charts/core/components/overlay-tooltip/_to-be-removed/_OverlayTooltipWIPStory.js

@@ -1,5 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import {
+  cloneElement,
+  isValidElement,
   useEffect,
   useRef,
   useState
@@ -14,6 +16,7 @@ import { ToastContainer } from "../../../../../notifications/toast/ToastContaine
 import { OverlayProvider } from "../contexts/OverlayContext.js";
 import { TooltipProvider, useTooltip } from "../contexts/TooltipContext.js";
 import { useTooltipReducer } from "../useTooltipReducer.js";
+import { TruncationStory } from "./_TruncationStory.js";
 const TooltipProgrammaticActions = () => {
   const dispatch = useTooltipReducer();
   const tooltip = useTooltip();
@@ -53,7 +56,8 @@ const TooltipGrid = (props) => {
     items,
     itemsPerRow = 3,
     width = "350px",
-    minHeight = "200px"
+    minHeight = "200px",
+    symbolAlignment
   } = props;
   const rows = chunkArray(items, itemsPerRow);
   return /* @__PURE__ */ jsx(Fragment, { children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx(Flex, { flexDirection: "row", children: row.map((item, itemIndex) => {
@@ -67,7 +71,10 @@ const TooltipGrid = (props) => {
           width,
           minHeight,
           getData: item.data,
-          children: item.template
+          children: symbolAlignment && isValidElement(item.template) ? cloneElement(
+            item.template,
+            { symbolAlignment }
+          ) : item.template
         }
       )
     ] }, key);
@@ -204,12 +211,19 @@ const OverlayTooltipCustomStory = () => {
     })
   ] });
 };
-const OverlayTooltipWIPStory = () => {
+const OverlayTooltipWIPStory = (props) => {
   const { sub, onClick } = usePinAllSetup();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(ToastContainer, {}),
     /* @__PURE__ */ jsx(Button, { onClick, children: "Pin all" }),
-    /* @__PURE__ */ jsx(TooltipGrid, { sub, items: TooltipData })
+    /* @__PURE__ */ jsx(
+      TooltipGrid,
+      {
+        sub,
+        items: TooltipData,
+        symbolAlignment: props?.symbolAlignment
+      }
+    )
   ] });
 };
 const OverlayTooltipHeaderStory = () => {
@@ -219,9 +233,13 @@ const OverlayTooltipHeaderStory = () => {
     /* @__PURE__ */ jsx(TooltipGrid, { sub, items: HeaderTestData })
   ] });
 };
+const OverlayTooltipTruncationStory = () => {
+  return /* @__PURE__ */ jsx(TruncationStory, {});
+};
 export {
   OverlayTooltipCustomStory,
   OverlayTooltipHeaderStory,
+  OverlayTooltipTruncationStory,
   OverlayTooltipWIPStory,
   TooltipProgrammaticActions
 };

package/esm/charts/core/components/overlay-tooltip/_to-be-removed/_OverlayTooltipWIPStory.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/overlay-tooltip/_to-be-removed/_OverlayTooltipWIPStory.tsx"],
-  "sourcesContent": ["import {\n  type PropsWithChildren,\n  useEffect,\n  useRef,\n  useState,\n  type JSX,\n} from 'react';\n\nimport { DummyInteractionsOverlay } from './DummyInteractionsOverlay.js';\nimport { HeaderTestData } from './HeaderTestTooltip.js';\nimport { TooltipData } from './MyTooltip.js';\nimport { Button } from '../../../../../buttons/button/Button.js';\nimport { Select } from '../../../../../forms/select/Select.js';\nimport { Flex } from '../../../../../layouts/flex/Flex.js';\nimport { ToastContainer } from '../../../../../notifications/toast/ToastContainer.js';\nimport { OverlayProvider } from '../contexts/OverlayContext.js';\nimport { TooltipProvider, useTooltip } from '../contexts/TooltipContext.js';\nimport type { Data } from '../types.js';\nimport { useTooltipReducer } from '../useTooltipReducer.js';\n\nexport const TooltipProgrammaticActions = () => {\n  const dispatch = useTooltipReducer();\n  const tooltip = useTooltip();\n  let snapshot = tooltip.getState();\n\n  const reset = () => {\n    snapshot = tooltip.getState();\n    dispatch({ type: 'RESET_TOOLTIP' })();\n  };\n  const restore = () => {\n    snapshot.pinned && tooltip.setState(snapshot);\n  };\n\n  return (\n    <Flex gap={4}>\n      <Button variant=\"emphasized\" onClick={reset}>\n        Reset Tooltip\n      </Button>\n      <Button variant=\"emphasized\" onClick={restore}>\n        Restore tooltip\n      </Button>\n    </Flex>\n  );\n};\n\ntype Sub = Set<() => void>;\n\nconst createPinAllHandler = (sub: Sub) => () => {\n  sub.forEach((action) => {\n    action();\n  });\n};\n\nconst usePinAllSetup = () => {\n  const sub: Sub = new Set();\n  const onClick = createPinAllHandler(sub);\n  return { sub, onClick };\n};\n\ninterface TestDataItem {\n  description: JSX.Element;\n  data: () => Data;\n  template: JSX.Element;\n  testId?: string;\n}\n\nconst chunkArray = <T,>(array: T[], size: number): T[][] => {\n  const rows: T[][] = [];\n  for (let i = 0; i < array.length; i += size) {\n    rows.push(array.slice(i, i + size));\n  }\n  return rows;\n};\n\nconst TooltipGrid = (props: {\n  sub: Sub;\n  items: TestDataItem[];\n  itemsPerRow?: number;\n  width?: string;\n  minHeight?: string;\n}) => {\n  const {\n    sub,\n    items,\n    itemsPerRow = 3,\n    width = '350px',\n    minHeight = '200px',\n  } = props;\n  const rows = chunkArray(items, itemsPerRow);\n\n  return (\n    <>\n      {rows.map((row, rowIndex) => (\n        <Flex flexDirection=\"row\" key={rowIndex}>\n          {row.map((item, itemIndex) => {\n            const key = rowIndex * itemsPerRow + itemIndex;\n            return (\n              <Flex flexDirection=\"column\" key={key} data-testid={item.testId}>\n                {item.description}\n                <Content\n                  sub={sub}\n                  width={width}\n                  minHeight={minHeight}\n                  getData={item.data}\n                >\n                  {item.template}\n                </Content>\n              </Flex>\n            );\n          })}\n        </Flex>\n      ))}\n    </>\n  );\n};\nconst TogglePinned = (props: { sub: Sub; getData?: () => Data }) => {\n  const dispatch = useTooltipReducer();\n  const isPinned = useRef(false);\n  useEffect(() => {\n    const cb = () => {\n      if (isPinned.current) {\n        dispatch({\n          type: 'RESET_TOOLTIP',\n        })();\n      } else {\n        dispatch({\n          type: 'SET_PINNED',\n          payload: {\n            pinned: true,\n            relativeX: 10,\n            relativeY: 30,\n            data: props.getData ? props.getData() : TooltipData[0].data(),\n          },\n        })();\n      }\n      isPinned.current = !isPinned.current;\n    };\n    props.sub.add(cb);\n    return () => {\n      props.sub.delete(cb);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  return null;\n};\nconst Content = (\n  props: PropsWithChildren<{\n    sub: Sub;\n    actions?: boolean;\n    width?: string;\n    minHeight?: string;\n    getData?: () => Data;\n  }>,\n) => {\n  return (\n    <OverlayProvider>\n      <TooltipProvider>\n        {props.actions && <TooltipProgrammaticActions />}\n        <TogglePinned sub={props.sub} getData={props.getData} />\n        <div\n          style={{\n            width: props.width || '200px',\n            height: '100%',\n            maxWidth: '100%',\n            maxHeight: '100%',\n            resize: 'both',\n            minHeight: props.minHeight || '50px',\n            borderRight: '1px dashed #DDA0DD',\n            overflow: 'hidden',\n            position: 'relative',\n          }}\n        >\n          <DummyInteractionsOverlay\n            getData={props.getData || TooltipData[0].data}\n          >\n            {props.children}\n          </DummyInteractionsOverlay>\n        </div>\n      </TooltipProvider>\n    </OverlayProvider>\n  );\n};\n\nconst Selector = function <T>(props: {\n  options: T[];\n  value: T;\n  update: (n: T) => void;\n}) {\n  return (\n    <Select\n      value={props.value}\n      onChange={(newValue) => {\n        props.update(newValue as T);\n      }}\n    >\n      <Select.Content>\n        {props.options.map((option) => (\n          <Select.Option key={String(option)} value={option}>\n            {`${option}`}\n          </Select.Option>\n        ))}\n      </Select.Content>\n    </Select>\n  );\n};\n\n/**\n * WIP story to avoid exporting internal WIP OverlayTooltip components and utils\n * @internal\n */\nexport const OverlayTooltipCustomStory = () => {\n  const [nTooltips, setNTooltips] = useState(5);\n  const { sub, onClick } = usePinAllSetup();\n  const Shared = () => {\n    return (\n      <>\n        <Selector\n          options={[5, 50, 100, 150, 300]}\n          value={nTooltips}\n          update={setNTooltips}\n        />\n        <Button onClick={onClick}>Pin all</Button>\n      </>\n    );\n  };\n\n  if (nTooltips === 5) {\n    return (\n      <Flex\n        flexWrap=\"nowrap\"\n        gap={6}\n        style={{ marginTop: '10px' }}\n        flexDirection=\"column\"\n      >\n        <Shared />\n        {Array.from({ length: 5 }).map((_, index) => {\n          return (\n            <Content\n              sub={sub}\n              actions\n              width=\"100%\"\n              minHeight=\"400px\"\n              key={index}\n            >\n              {TooltipData[0].template}\n            </Content>\n          );\n        })}\n      </Flex>\n    );\n  }\n\n  return (\n    <>\n      <Shared />\n      {Array.from({ length: nTooltips / 10 }).map((_, index) => {\n        return (\n          <Flex\n            gap={6}\n            style={{ marginTop: '10px' }}\n            flexDirection=\"row\"\n            key={index}\n          >\n            {Array.from({ length: 10 }).map((_, index) => {\n              return (\n                <Content sub={sub} key={index}>\n                  {TooltipData[0].template}\n                </Content>\n              );\n            })}\n          </Flex>\n        );\n      })}\n    </>\n  );\n};\n\n/**\n * WIP story to avoid exporting internal WIP OverlayTooltip components and utils\n * @internal\n */\nexport const OverlayTooltipWIPStory = () => {\n  const { sub, onClick } = usePinAllSetup();\n\n  return (\n    <>\n      <ToastContainer />\n      <Button onClick={onClick}>Pin all</Button>\n      <TooltipGrid sub={sub} items={TooltipData} />\n    </>\n  );\n};\n\n/**\n * WIP story to test different header variations\n * @internal\n */\nexport const OverlayTooltipHeaderStory = () => {\n  const { sub, onClick } = usePinAllSetup();\n\n  return (\n    <>\n      <Button onClick={onClick}>Pin all</Button>\n      <TooltipGrid sub={sub} items={HeaderTestData} />\n    </>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  type JSX,\n  cloneElement,\n  isValidElement,\n  type PropsWithChildren,\n  type ReactElement,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { DummyInteractionsOverlay } from './DummyInteractionsOverlay.js';\nimport { HeaderTestData } from './HeaderTestTooltip.js';\nimport { TooltipData } from './MyTooltip.js';\nimport { Button } from '../../../../../buttons/button/Button.js';\nimport { Select } from '../../../../../forms/select/Select.js';\nimport { Flex } from '../../../../../layouts/flex/Flex.js';\nimport { ToastContainer } from '../../../../../notifications/toast/ToastContainer.js';\nimport { OverlayProvider } from '../contexts/OverlayContext.js';\nimport { TooltipProvider, useTooltip } from '../contexts/TooltipContext.js';\nimport type { Data } from '../types.js';\nimport { useTooltipReducer } from '../useTooltipReducer.js';\nimport { TruncationStory } from './_TruncationStory.js';\n\nexport const TooltipProgrammaticActions = () => {\n  const dispatch = useTooltipReducer();\n  const tooltip = useTooltip();\n  let snapshot = tooltip.getState();\n\n  const reset = () => {\n    snapshot = tooltip.getState();\n    dispatch({ type: 'RESET_TOOLTIP' })();\n  };\n  const restore = () => {\n    snapshot.pinned && tooltip.setState(snapshot);\n  };\n\n  return (\n    <Flex gap={4}>\n      <Button variant=\"emphasized\" onClick={reset}>\n        Reset Tooltip\n      </Button>\n      <Button variant=\"emphasized\" onClick={restore}>\n        Restore tooltip\n      </Button>\n    </Flex>\n  );\n};\n\ntype Sub = Set<() => void>;\n\nconst createPinAllHandler = (sub: Sub) => () => {\n  sub.forEach((action) => {\n    action();\n  });\n};\n\nconst usePinAllSetup = () => {\n  const sub: Sub = new Set();\n  const onClick = createPinAllHandler(sub);\n  return { sub, onClick };\n};\n\ninterface TestDataItem {\n  description: JSX.Element;\n  data: () => Data;\n  template: JSX.Element;\n  testId?: string;\n}\n\nconst chunkArray = <T,>(array: T[], size: number): T[][] => {\n  const rows: T[][] = [];\n  for (let i = 0; i < array.length; i += size) {\n    rows.push(array.slice(i, i + size));\n  }\n  return rows;\n};\n\nconst TooltipGrid = (props: {\n  sub: Sub;\n  items: TestDataItem[];\n  itemsPerRow?: number;\n  width?: string;\n  minHeight?: string;\n  symbolAlignment?: 'left' | 'right';\n}) => {\n  const {\n    sub,\n    items,\n    itemsPerRow = 3,\n    width = '350px',\n    minHeight = '200px',\n    symbolAlignment,\n  } = props;\n  const rows = chunkArray(items, itemsPerRow);\n\n  return (\n    <>\n      {rows.map((row, rowIndex) => (\n        <Flex flexDirection=\"row\" key={rowIndex}>\n          {row.map((item, itemIndex) => {\n            const key = rowIndex * itemsPerRow + itemIndex;\n            return (\n              <Flex flexDirection=\"column\" key={key} data-testid={item.testId}>\n                {item.description}\n                <Content\n                  sub={sub}\n                  width={width}\n                  minHeight={minHeight}\n                  getData={item.data}\n                >\n                  {symbolAlignment && isValidElement(item.template)\n                    ? cloneElement(\n                        item.template as ReactElement<{\n                          symbolAlignment?: 'left' | 'right';\n                        }>,\n                        { symbolAlignment },\n                      )\n                    : item.template}\n                </Content>\n              </Flex>\n            );\n          })}\n        </Flex>\n      ))}\n    </>\n  );\n};\nconst TogglePinned = (props: { sub: Sub; getData?: () => Data }) => {\n  const dispatch = useTooltipReducer();\n  const isPinned = useRef(false);\n  useEffect(() => {\n    const cb = () => {\n      if (isPinned.current) {\n        dispatch({\n          type: 'RESET_TOOLTIP',\n        })();\n      } else {\n        dispatch({\n          type: 'SET_PINNED',\n          payload: {\n            pinned: true,\n            relativeX: 10,\n            relativeY: 30,\n            data: props.getData ? props.getData() : TooltipData[0].data(),\n          },\n        })();\n      }\n      isPinned.current = !isPinned.current;\n    };\n    props.sub.add(cb);\n    return () => {\n      props.sub.delete(cb);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  return null;\n};\nconst Content = (\n  props: PropsWithChildren<{\n    sub: Sub;\n    actions?: boolean;\n    width?: string;\n    minHeight?: string;\n    getData?: () => Data;\n  }>,\n) => {\n  return (\n    <OverlayProvider>\n      <TooltipProvider>\n        {props.actions && <TooltipProgrammaticActions />}\n        <TogglePinned sub={props.sub} getData={props.getData} />\n        <div\n          style={{\n            width: props.width || '200px',\n            height: '100%',\n            maxWidth: '100%',\n            maxHeight: '100%',\n            resize: 'both',\n            minHeight: props.minHeight || '50px',\n            borderRight: '1px dashed #DDA0DD',\n            overflow: 'hidden',\n            position: 'relative',\n          }}\n        >\n          <DummyInteractionsOverlay\n            getData={props.getData || TooltipData[0].data}\n          >\n            {props.children}\n          </DummyInteractionsOverlay>\n        </div>\n      </TooltipProvider>\n    </OverlayProvider>\n  );\n};\n\nconst Selector = function <T>(props: {\n  options: T[];\n  value: T;\n  update: (n: T) => void;\n}) {\n  return (\n    <Select\n      value={props.value}\n      onChange={(newValue) => {\n        props.update(newValue as T);\n      }}\n    >\n      <Select.Content>\n        {props.options.map((option) => (\n          <Select.Option key={String(option)} value={option}>\n            {`${option}`}\n          </Select.Option>\n        ))}\n      </Select.Content>\n    </Select>\n  );\n};\n\n/**\n * WIP story to avoid exporting internal WIP OverlayTooltip components and utils\n * @internal\n */\nexport const OverlayTooltipCustomStory = () => {\n  const [nTooltips, setNTooltips] = useState(5);\n  const { sub, onClick } = usePinAllSetup();\n  const Shared = () => {\n    return (\n      <>\n        <Selector\n          options={[5, 50, 100, 150, 300]}\n          value={nTooltips}\n          update={setNTooltips}\n        />\n        <Button onClick={onClick}>Pin all</Button>\n      </>\n    );\n  };\n\n  if (nTooltips === 5) {\n    return (\n      <Flex\n        flexWrap=\"nowrap\"\n        gap={6}\n        style={{ marginTop: '10px' }}\n        flexDirection=\"column\"\n      >\n        <Shared />\n        {Array.from({ length: 5 }).map((_, index) => {\n          return (\n            <Content\n              sub={sub}\n              actions\n              width=\"100%\"\n              minHeight=\"400px\"\n              key={index}\n            >\n              {TooltipData[0].template}\n            </Content>\n          );\n        })}\n      </Flex>\n    );\n  }\n\n  return (\n    <>\n      <Shared />\n      {Array.from({ length: nTooltips / 10 }).map((_, index) => {\n        return (\n          <Flex\n            gap={6}\n            style={{ marginTop: '10px' }}\n            flexDirection=\"row\"\n            key={index}\n          >\n            {Array.from({ length: 10 }).map((_, index) => {\n              return (\n                <Content sub={sub} key={index}>\n                  {TooltipData[0].template}\n                </Content>\n              );\n            })}\n          </Flex>\n        );\n      })}\n    </>\n  );\n};\n\n/**\n * WIP story to avoid exporting internal WIP OverlayTooltip components and utils\n * @internal\n */\nexport const OverlayTooltipWIPStory = (props?: {\n  symbolAlignment?: 'left' | 'right';\n}) => {\n  const { sub, onClick } = usePinAllSetup();\n\n  return (\n    <>\n      <ToastContainer />\n      <Button onClick={onClick}>Pin all</Button>\n      <TooltipGrid\n        sub={sub}\n        items={TooltipData}\n        symbolAlignment={props?.symbolAlignment}\n      />\n    </>\n  );\n};\n\n/**\n * WIP story to test different header variations\n * @internal\n */\nexport const OverlayTooltipHeaderStory = () => {\n  const { sub, onClick } = usePinAllSetup();\n\n  return (\n    <>\n      <Button onClick={onClick}>Pin all</Button>\n      <TooltipGrid sub={sub} items={HeaderTestData} />\n    </>\n  );\n};\n\n/**\n * WIP story to test different truncation variations\n * @internal\n */\nexport const OverlayTooltipTruncationStory = () => {\n  return <TruncationStory />;\n};\n"],
+  "mappings": "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",
   "names": ["_", "index"]
 }