@cube-dev/ui-kit 0.181.0 → 0.183.0

package/dist/components/content/Card/Card.js

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
+import { c } from "react-compiler-runtime";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -19,12 +20,33 @@ const CardElement = tasty({
 	styleProps: CONTAINER_STYLES
 });
 const Card = forwardRef(function Card(props, ref) {
-	const styles = extractStyles(props, CONTAINER_STYLES);
-	return /* @__PURE__ */ jsx(CardElement, {
-		...filterBaseProps(props, { eventProps: true }),
-		ref,
-		styles
-	});
+	const $ = c(8);
+	let t0;
+	if ($[0] !== props) {
+		t0 = extractStyles(props, CONTAINER_STYLES);
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	const styles = t0;
+	let t1;
+	if ($[2] !== props) {
+		t1 = filterBaseProps(props, { eventProps: true });
+		$[2] = props;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== ref || $[5] !== styles || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(CardElement, {
+			...t1,
+			ref,
+			styles
+		});
+		$[4] = ref;
+		$[5] = styles;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
 });
 
 //#endregion

package/dist/components/content/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":[],"sources":["../../../../src/components/content/Card/Card.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { extractStyles } from '../../../utils/styles';\n\nconst CardElement = tasty({\n  role: 'region',\n  styles: {\n    display: 'block',\n    flow: 'column',\n    radius: '(1cr + 1bw)',\n    fill: '#surface',\n    border: '#border',\n    padding: '1.5x',\n    preset: 't3',\n  },\n  styleProps: CONTAINER_STYLES,\n});\n\nexport interface CubeCardProps\n  extends Omit<AllBaseProps, 'title' | 'value' | 'placeholder' | 'text'>,\n    ContainerStyleProps {}\n\nexport const Card = forwardRef(function Card(props: CubeCardProps, ref) {\n  const styles = extractStyles(props, CONTAINER_STYLES);\n\n  return (\n    <CardElement\n      {...filterBaseProps(props, { eventProps: true })}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;AAWA,MAAM,cAAc,MAAM;CACxB,MAAM;CACN,QAAQ;EACN,SAAS;EACT,MAAM;EACN,QAAQ;EACR,MAAM;EACN,QAAQ;EACR,SAAS;EACT,QAAQ;EACT;CACD,YAAY;CACb,CAAC;AAMF,MAAa,OAAO,WAAW,SAAS,KAAK,OAAsB,KAAK;CACtE,MAAM,SAAS,cAAc,OAAO,iBAAiB;AAErD,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;GACR;EAEJ"}
+{"version":3,"file":"Card.js","names":["AllBaseProps","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","tasty","forwardRef","extractStyles","CardElement","role","styles","display","flow","radius","fill","border","padding","preset","styleProps","CubeCardProps","Omit","Card","props","ref","$","_c","t0","t1","eventProps","t2"],"sources":["../../../../src/components/content/Card/Card.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { extractStyles } from '../../../utils/styles';\n\nconst CardElement = tasty({\n  role: 'region',\n  styles: {\n    display: 'block',\n    flow: 'column',\n    radius: '(1cr + 1bw)',\n    fill: '#surface',\n    border: '#border',\n    padding: '1.5x',\n    preset: 't3',\n  },\n  styleProps: CONTAINER_STYLES,\n});\n\nexport interface CubeCardProps\n  extends Omit<AllBaseProps, 'title' | 'value' | 'placeholder' | 'text'>,\n    ContainerStyleProps {}\n\nexport const Card = forwardRef(function Card(props: CubeCardProps, ref) {\n  const styles = extractStyles(props, CONTAINER_STYLES);\n\n  return (\n    <CardElement\n      {...filterBaseProps(props, { eventProps: true })}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;;AAWA,MAAMO,cAAcH,MAAM;CACxBI,MAAM;CACNC,QAAQ;EACNC,SAAS;EACTC,MAAM;EACNC,QAAQ;EACRC,MAAM;EACNC,QAAQ;EACRC,SAAS;EACTC,QAAQ;EACT;CACDC,YAAYhB;CACb,CAAC;AAMF,MAAamB,OAAOf,WAAW,SAAAe,KAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;AAAA,KAAAF,EAAA,OAAAF,OAAA;AACdI,OAAAnB,cAAce,OAAOpB,iBAAiB;AAAAsB,IAAA,KAAAF;AAAAE,IAAA,KAAAE;OAAAA,MAAAF,EAAA;CAArD,MAAAd,SAAegB;CAAuC,IAAAC;AAAA,KAAAH,EAAA,OAAAF,OAAA;AAI9CK,OAAAvB,gBAAgBkB,OAAO,EAAAM,YAAc,MAAM,CAAC;AAAAJ,IAAA,KAAAF;AAAAE,IAAA,KAAAG;OAAAA,MAAAH,EAAA;CAAA,IAAAK;AAAA,KAAAL,EAAA,OAAAD,OAAAC,EAAA,OAAAd,UAAAc,EAAA,OAAAG,IAAA;AADlDE,OAAA,oBAAC;GAAW,GACNF;GACCJ;GACGb;IACR;AAAAc,IAAA,KAAAD;AAAAC,IAAA,KAAAd;AAAAc,IAAA,KAAAG;AAAAH,IAAA,KAAAK;OAAAA,MAAAL,EAAA;AAAA,QAJFK;EAMF"}

package/dist/components/content/Content.js

@@ -1,6 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useSlotProps } from "../../utils/react/Slots.js";
+import { c } from "react-compiler-runtime";
 import { CONTAINER_STYLES, TEXT_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -22,13 +23,34 @@ const ContentElement = tasty({
 	}
 });
 const Content = forwardRef(function Content(props, ref) {
+	const $ = c(8);
 	props = useSlotProps(props, "content");
-	const styles = extractStyles(props, STYLE_LIST);
-	return /* @__PURE__ */ jsx(ContentElement, {
-		...filterBaseProps(props, { eventProps: true }),
-		ref,
-		styles
-	});
+	let t0;
+	if ($[0] !== props) {
+		t0 = extractStyles(props, STYLE_LIST);
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	const styles = t0;
+	let t1;
+	if ($[2] !== props) {
+		t1 = filterBaseProps(props, { eventProps: true });
+		$[2] = props;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== ref || $[5] !== styles || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(ContentElement, {
+			...t1,
+			ref,
+			styles
+		});
+		$[4] = ref;
+		$[5] = styles;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
 });
 
 //#endregion

package/dist/components/content/Content.js.map

@@ -1 +1 @@
-{"version":3,"file":"Content.js","names":[],"sources":["../../../src/components/content/Content.tsx"],"sourcesContent":["import {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  tasty,\n  TEXT_STYLES,\n  TextStyleProps,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { useSlotProps } from '../../utils/react';\nimport { extractStyles } from '../../utils/styles';\n\nconst STYLE_LIST = [...CONTAINER_STYLES, ...TEXT_STYLES];\n\nconst ContentElement = tasty({\n  qa: 'Content',\n  as: 'section',\n  styles: {\n    gridArea: 'content',\n    preset: 'p3',\n    color: '#dark-02',\n    display: 'block',\n    flow: 'column',\n    gap: '2x',\n    overflow: 'auto',\n    scrollbar: 'styled',\n  },\n});\n\nexport interface CubeContentProps\n  extends BaseProps,\n    ContainerStyleProps,\n    TextStyleProps {}\n\nexport const Content = forwardRef(function Content(\n  props: CubeContentProps,\n  ref,\n) {\n  props = useSlotProps(props, 'content');\n\n  const styles = extractStyles(props, STYLE_LIST);\n\n  return (\n    <ContentElement\n      {...filterBaseProps(props, { eventProps: true })}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;;AAcA,MAAM,aAAa,CAAC,GAAG,kBAAkB,GAAG,YAAY;AAExD,MAAM,iBAAiB,MAAM;CAC3B,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,UAAU;EACV,QAAQ;EACR,OAAO;EACP,SAAS;EACT,MAAM;EACN,KAAK;EACL,UAAU;EACV,WAAW;EACZ;CACF,CAAC;AAOF,MAAa,UAAU,WAAW,SAAS,QACzC,OACA,KACA;AACA,SAAQ,aAAa,OAAO,UAAU;CAEtC,MAAM,SAAS,cAAc,OAAO,WAAW;AAE/C,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;GACR;EAEJ"}
+{"version":3,"file":"Content.js","names":["BaseProps","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","tasty","TEXT_STYLES","TextStyleProps","forwardRef","useSlotProps","extractStyles","STYLE_LIST","ContentElement","qa","as","styles","gridArea","preset","color","display","flow","gap","overflow","scrollbar","CubeContentProps","Content","props","ref","$","_c","t0","t1","eventProps","t2"],"sources":["../../../src/components/content/Content.tsx"],"sourcesContent":["import {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  tasty,\n  TEXT_STYLES,\n  TextStyleProps,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { useSlotProps } from '../../utils/react';\nimport { extractStyles } from '../../utils/styles';\n\nconst STYLE_LIST = [...CONTAINER_STYLES, ...TEXT_STYLES];\n\nconst ContentElement = tasty({\n  qa: 'Content',\n  as: 'section',\n  styles: {\n    gridArea: 'content',\n    preset: 'p3',\n    color: '#dark-02',\n    display: 'block',\n    flow: 'column',\n    gap: '2x',\n    overflow: 'auto',\n    scrollbar: 'styled',\n  },\n});\n\nexport interface CubeContentProps\n  extends BaseProps,\n    ContainerStyleProps,\n    TextStyleProps {}\n\nexport const Content = forwardRef(function Content(\n  props: CubeContentProps,\n  ref,\n) {\n  props = useSlotProps(props, 'content');\n\n  const styles = extractStyles(props, STYLE_LIST);\n\n  return (\n    <ContentElement\n      {...filterBaseProps(props, { eventProps: true })}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;;;AAcA,MAAMU,aAAa,CAAC,GAAGT,kBAAkB,GAAGI,YAAY;AAExD,MAAMM,iBAAiBP,MAAM;CAC3BQ,IAAI;CACJC,IAAI;CACJC,QAAQ;EACNC,UAAU;EACVC,QAAQ;EACRC,OAAO;EACPC,SAAS;EACTC,MAAM;EACNC,KAAK;EACLC,UAAU;EACVC,WAAW;EACb;CACD,CAAC;AAOF,MAAaE,UAAUjB,WAAW,SAAAiB,QAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;AAIhCH,SAAQjB,aAAaiB,OAAO,UAAU;CAAjC,IAAAI;AAAA,KAAAF,EAAA,OAAAF,OAAA;AAEUI,OAAApB,cAAcgB,OAAOf,WAAW;AAAAiB,IAAA,KAAAF;AAAAE,IAAA,KAAAE;OAAAA,MAAAF,EAAA;CAA/C,MAAAb,SAAee;CAAiC,IAAAC;AAAA,KAAAH,EAAA,OAAAF,OAAA;AAIxCK,OAAA3B,gBAAgBsB,OAAO,EAAAM,YAAc,MAAM,CAAC;AAAAJ,IAAA,KAAAF;AAAAE,IAAA,KAAAG;OAAAA,MAAAH,EAAA;CAAA,IAAAK;AAAA,KAAAL,EAAA,OAAAD,OAAAC,EAAA,OAAAb,UAAAa,EAAA,OAAAG,IAAA;AADlDE,OAAA,oBAAC;GAAc,GACTF;GACCJ;GACGZ;IACR;AAAAa,IAAA,KAAAD;AAAAC,IAAA,KAAAb;AAAAa,IAAA,KAAAG;AAAAH,IAAA,KAAAK;OAAAA,MAAAL,EAAA;AAAA,QAJFK;EAMF"}

package/dist/components/content/CopyPasteBlock/CopyPasteBlock.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useTimer } from "../../../_internal/hooks/use-timer/use-timer.js";
 import { useI18n } from "../../../i18n/useI18n.js";
@@ -104,7 +104,7 @@ function CopyPasteBlock(allProps, ref) {
 	const toast = useToast();
 	const { clipboardProps } = useClipboard({
 		async onPaste(items) {
-			let pasted = await Promise.all(items.filter((item) => item.kind === "text" && item.types.has("text/plain")).map((item) => item.getText("text/plain")));
+			let pasted = await Promise.all(items.filter((item) => item.kind === "text" && item.types.has("text/plain")).map((item_0) => item_0.getText("text/plain")));
 			try {
 				await onPaste?.(pasted.join("\n"));
 			} catch (e) {

package/dist/components/content/CopyPasteBlock/CopyPasteBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyPasteBlock.js","names":[],"sources":["../../../../src/components/content/CopyPasteBlock/CopyPasteBlock.tsx"],"sourcesContent":["import {\n  POSITION_STYLES,\n  PositionStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport copy from 'clipboard-copy';\nimport { ForwardedRef, forwardRef, ReactNode, useState } from 'react';\nimport { TextDropItem, useClipboard } from 'react-aria';\n\nimport { useTimer } from '../../../_internal';\nimport { useI18n } from '../../../i18n';\nimport { CopyIcon } from '../../../icons/CopyIcon';\nimport { extractStyles } from '../../../utils/styles';\nimport { Button } from '../../actions';\nimport { useToast } from '../../overlays/Toast';\nimport { Card, CubeCardProps } from '../Card/Card';\n\nconst StyledBlock = tasty({\n  styles: {\n    display: 'grid',\n    flow: 'column',\n    placeContent: 'center space-between',\n    placeItems: 'center stretch',\n    gap: '1x',\n    position: 'relative',\n    width: 'max 100%',\n    color: 'inherit',\n    padding: '0 1.5x',\n    // height: {\n    //   '': '4.5x',\n    //   '[data-size=\"small\"]': '3.5x',\n    //   '[data-size=\"large\"]': '5.5x',\n    // },\n    userSelect: 'none',\n\n    Label: {\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n    },\n  },\n});\n\nconst CopyPasteBlockElement = tasty(Card, {\n  qa: 'CopyPasteBlock',\n  styles: {\n    display: 'grid',\n    fill: '#surface-2',\n    radius: '1r',\n    padding: {\n      '': '0 1px',\n      ':focus': '0',\n    },\n    color: {\n      '': '#dark',\n      error: '#danger-text',\n    },\n    border: {\n      '': 'dashed #dark-03',\n      ':focus': '2px dashed #primary-text',\n      error: 'dashed #danger',\n    },\n    cursor: '$pointer',\n    preset: {\n      '': 't3',\n      'size=large': 't2',\n    },\n    height: {\n      '': '5x',\n      'size=small': '4x',\n      'size=large': '6x',\n    },\n    boxSizing: 'border-box',\n\n    Grid: {\n      display: 'grid',\n      flow: 'row',\n      gridColumns: 'minmax(0, 1fr) min-content',\n      placeContent: 'stretch',\n      width: 'min 20x',\n      radius: '1r',\n      position: 'relative',\n    },\n\n    Shortcut: {\n      display: 'inline',\n      hide: {\n        '': true,\n        ':focus & !error': false,\n      },\n    },\n  },\n});\n\nconst CopyButton = tasty(Button, {\n  type: 'clear',\n  icon: <CopyIcon />,\n  styles: {\n    placeSelf: 'stretch',\n    border: '#clear',\n    shadow: {\n      '': '0 0 0 1ow #purple-03.0 inset',\n      focused: '0 0 0 1ow #purple-03 inset',\n    },\n    radius: {\n      '': '0 1r 1r 0',\n      'multiline | has-scroll': '1r top-right',\n    },\n    height: 'auto',\n    outline: false,\n  },\n});\n\nexport interface CubeCopyPasteBlockProps\n  extends Omit<CubeCardProps, 'onPaste' | 'onCopy'>,\n    PositionStyleProps {\n  padding?: Styles['padding'];\n  /** The code snippet */\n  value?: string;\n  placeholder?: ReactNode;\n  /** The title of the snippet */\n  title?: string;\n  onPaste?: (text: string) => void | Promise<void | string>;\n  onCopy?: () => void;\n  size?: 'small' | 'medium' | 'large';\n}\n\nfunction CopyPasteBlock(\n  allProps: CubeCopyPasteBlockProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    value = '',\n    onPaste,\n    placeholder,\n    title,\n    size = 'medium',\n    ...props\n  } = allProps;\n  const styles = extractStyles(props, POSITION_STYLES);\n\n  const { t } = useI18n();\n  const [error, setError] = useState<string | null>(null);\n  const toast = useToast();\n\n  const { clipboardProps } = useClipboard({\n    async onPaste(items) {\n      let pasted = await Promise.all(\n        items\n          .filter(\n            (item) => item.kind === 'text' && item.types.has('text/plain'),\n          )\n          .map((item) => (item as TextDropItem).getText('text/plain')),\n      );\n      try {\n        await onPaste?.(pasted.join('\\n'));\n      } catch (e) {\n        setError(String(e));\n      }\n    },\n    getItems() {\n      return value\n        ? [\n            {\n              'text/plain': value,\n            },\n          ]\n        : [];\n    },\n    onCopy() {\n      if (value) {\n        toast.success(\n          t('copyPasteBlock.copied', '{{title}} copied', {\n            title: title || t('copyPasteBlock.defaultTitle', 'Text'),\n          }),\n        );\n      }\n    },\n  });\n\n  useTimer({\n    delay: 1000,\n    callback() {\n      setError(null);\n    },\n    isDisabled: !error,\n  });\n\n  async function onCopy() {\n    await copy(value);\n\n    toast.success(\n      t('copyPasteBlock.copied', '{{title}} copied', {\n        title: title || t('copyPasteBlock.defaultTitle', 'Text'),\n      }),\n    );\n  }\n\n  const pristineValue = value.replace(/\\n/, ' ');\n\n  return (\n    <CopyPasteBlockElement\n      ref={ref}\n      mods={{ error: !!error }}\n      data-size={size}\n      styles={styles}\n      tabIndex=\"0\"\n      {...props}\n      {...clipboardProps}\n    >\n      <div data-element=\"Grid\">\n        <StyledBlock\n          data-size={size}\n          mods={{\n            placeholder: !!placeholder || !value,\n          }}\n        >\n          <div data-element=\"Label\">\n            {error != null ? (\n              error || t('copyPasteBlock.invalidData', 'Invalid data')\n            ) : value ? (\n              pristineValue\n            ) : (\n              <>\n                {placeholder\n                  ? placeholder\n                  : t('copyPasteBlock.selectAndPaste', 'Select and paste')}\n              </>\n            )}\n          </div>\n          <span data-element=\"Shortcut\">\n            <kbd>Cmd</kbd> + <kbd>V</kbd>\n          </span>\n        </StyledBlock>\n        {value && !error && (\n          <CopyButton\n            size={size}\n            aria-label={t(\n              'copyPasteBlock.copyToClipboard',\n              'Copy {{title}} to clipboard',\n              {\n                title: title || t('copyPasteBlock.defaultTitle', 'Text'),\n              },\n            )}\n            onPress={onCopy}\n          />\n        )}\n      </div>\n    </CopyPasteBlockElement>\n  );\n}\n\nconst _CopyPasteBlock = forwardRef(CopyPasteBlock);\n\n_CopyPasteBlock.displayName = 'CopyPasteBlock';\n\nexport { _CopyPasteBlock as CopyPasteBlock };\n"],"mappings":"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"}
+{"version":3,"file":"CopyPasteBlock.js","names":["POSITION_STYLES","PositionStyleProps","Styles","tasty","copy","ForwardedRef","forwardRef","ReactNode","useState","TextDropItem","useClipboard","useTimer","useI18n","CopyIcon","extractStyles","Button","useToast","Card","CubeCardProps","StyledBlock","styles","display","flow","placeContent","placeItems","gap","position","width","color","padding","userSelect","Label","whiteSpace","overflow","textOverflow","CopyPasteBlockElement","qa","fill","radius","error","border","cursor","preset","height","boxSizing","Grid","gridColumns","Shortcut","hide","CopyButton","type","icon","placeSelf","shadow","focused","outline","CubeCopyPasteBlockProps","Omit","value","placeholder","title","onPaste","text","Promise","onCopy","size","CopyPasteBlock","allProps","ref","HTMLDivElement","props","t","setError","toast","clipboardProps","items","pasted","all","filter","item","kind","types","has","map","getText","join","e","String","getItems","success","delay","callback","isDisabled","pristineValue","replace","_CopyPasteBlock","displayName"],"sources":["../../../../src/components/content/CopyPasteBlock/CopyPasteBlock.tsx"],"sourcesContent":["import {\n  POSITION_STYLES,\n  PositionStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport copy from 'clipboard-copy';\nimport { ForwardedRef, forwardRef, ReactNode, useState } from 'react';\nimport { TextDropItem, useClipboard } from 'react-aria';\n\nimport { useTimer } from '../../../_internal';\nimport { useI18n } from '../../../i18n';\nimport { CopyIcon } from '../../../icons/CopyIcon';\nimport { extractStyles } from '../../../utils/styles';\nimport { Button } from '../../actions';\nimport { useToast } from '../../overlays/Toast';\nimport { Card, CubeCardProps } from '../Card/Card';\n\nconst StyledBlock = tasty({\n  styles: {\n    display: 'grid',\n    flow: 'column',\n    placeContent: 'center space-between',\n    placeItems: 'center stretch',\n    gap: '1x',\n    position: 'relative',\n    width: 'max 100%',\n    color: 'inherit',\n    padding: '0 1.5x',\n    // height: {\n    //   '': '4.5x',\n    //   '[data-size=\"small\"]': '3.5x',\n    //   '[data-size=\"large\"]': '5.5x',\n    // },\n    userSelect: 'none',\n\n    Label: {\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n    },\n  },\n});\n\nconst CopyPasteBlockElement = tasty(Card, {\n  qa: 'CopyPasteBlock',\n  styles: {\n    display: 'grid',\n    fill: '#surface-2',\n    radius: '1r',\n    padding: {\n      '': '0 1px',\n      ':focus': '0',\n    },\n    color: {\n      '': '#dark',\n      error: '#danger-text',\n    },\n    border: {\n      '': 'dashed #dark-03',\n      ':focus': '2px dashed #primary-text',\n      error: 'dashed #danger',\n    },\n    cursor: '$pointer',\n    preset: {\n      '': 't3',\n      'size=large': 't2',\n    },\n    height: {\n      '': '5x',\n      'size=small': '4x',\n      'size=large': '6x',\n    },\n    boxSizing: 'border-box',\n\n    Grid: {\n      display: 'grid',\n      flow: 'row',\n      gridColumns: 'minmax(0, 1fr) min-content',\n      placeContent: 'stretch',\n      width: 'min 20x',\n      radius: '1r',\n      position: 'relative',\n    },\n\n    Shortcut: {\n      display: 'inline',\n      hide: {\n        '': true,\n        ':focus & !error': false,\n      },\n    },\n  },\n});\n\nconst CopyButton = tasty(Button, {\n  type: 'clear',\n  icon: <CopyIcon />,\n  styles: {\n    placeSelf: 'stretch',\n    border: '#clear',\n    shadow: {\n      '': '0 0 0 1ow #purple-03.0 inset',\n      focused: '0 0 0 1ow #purple-03 inset',\n    },\n    radius: {\n      '': '0 1r 1r 0',\n      'multiline | has-scroll': '1r top-right',\n    },\n    height: 'auto',\n    outline: false,\n  },\n});\n\nexport interface CubeCopyPasteBlockProps\n  extends Omit<CubeCardProps, 'onPaste' | 'onCopy'>,\n    PositionStyleProps {\n  padding?: Styles['padding'];\n  /** The code snippet */\n  value?: string;\n  placeholder?: ReactNode;\n  /** The title of the snippet */\n  title?: string;\n  onPaste?: (text: string) => void | Promise<void | string>;\n  onCopy?: () => void;\n  size?: 'small' | 'medium' | 'large';\n}\n\nfunction CopyPasteBlock(\n  allProps: CubeCopyPasteBlockProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    value = '',\n    onPaste,\n    placeholder,\n    title,\n    size = 'medium',\n    ...props\n  } = allProps;\n  const styles = extractStyles(props, POSITION_STYLES);\n\n  const { t } = useI18n();\n  const [error, setError] = useState<string | null>(null);\n  const toast = useToast();\n\n  const { clipboardProps } = useClipboard({\n    async onPaste(items) {\n      let pasted = await Promise.all(\n        items\n          .filter(\n            (item) => item.kind === 'text' && item.types.has('text/plain'),\n          )\n          .map((item) => (item as TextDropItem).getText('text/plain')),\n      );\n      try {\n        await onPaste?.(pasted.join('\\n'));\n      } catch (e) {\n        setError(String(e));\n      }\n    },\n    getItems() {\n      return value\n        ? [\n            {\n              'text/plain': value,\n            },\n          ]\n        : [];\n    },\n    onCopy() {\n      if (value) {\n        toast.success(\n          t('copyPasteBlock.copied', '{{title}} copied', {\n            title: title || t('copyPasteBlock.defaultTitle', 'Text'),\n          }),\n        );\n      }\n    },\n  });\n\n  useTimer({\n    delay: 1000,\n    callback() {\n      setError(null);\n    },\n    isDisabled: !error,\n  });\n\n  async function onCopy() {\n    await copy(value);\n\n    toast.success(\n      t('copyPasteBlock.copied', '{{title}} copied', {\n        title: title || t('copyPasteBlock.defaultTitle', 'Text'),\n      }),\n    );\n  }\n\n  const pristineValue = value.replace(/\\n/, ' ');\n\n  return (\n    <CopyPasteBlockElement\n      ref={ref}\n      mods={{ error: !!error }}\n      data-size={size}\n      styles={styles}\n      tabIndex=\"0\"\n      {...props}\n      {...clipboardProps}\n    >\n      <div data-element=\"Grid\">\n        <StyledBlock\n          data-size={size}\n          mods={{\n            placeholder: !!placeholder || !value,\n          }}\n        >\n          <div data-element=\"Label\">\n            {error != null ? (\n              error || t('copyPasteBlock.invalidData', 'Invalid data')\n            ) : value ? (\n              pristineValue\n            ) : (\n              <>\n                {placeholder\n                  ? placeholder\n                  : t('copyPasteBlock.selectAndPaste', 'Select and paste')}\n              </>\n            )}\n          </div>\n          <span data-element=\"Shortcut\">\n            <kbd>Cmd</kbd> + <kbd>V</kbd>\n          </span>\n        </StyledBlock>\n        {value && !error && (\n          <CopyButton\n            size={size}\n            aria-label={t(\n              'copyPasteBlock.copyToClipboard',\n              'Copy {{title}} to clipboard',\n              {\n                title: title || t('copyPasteBlock.defaultTitle', 'Text'),\n              },\n            )}\n            onPress={onCopy}\n          />\n        )}\n      </div>\n    </CopyPasteBlockElement>\n  );\n}\n\nconst _CopyPasteBlock = forwardRef(CopyPasteBlock);\n\n_CopyPasteBlock.displayName = 'CopyPasteBlock';\n\nexport { _CopyPasteBlock as CopyPasteBlock };\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAMmB,cAAchB,MAAM,EACxBiB,QAAQ;CACNC,SAAS;CACTC,MAAM;CACNC,cAAc;CACdC,YAAY;CACZC,KAAK;CACLC,UAAU;CACVC,OAAO;CACPC,OAAO;CACPC,SAAS;CAMTC,YAAY;CAEZC,OAAO;EACLC,YAAY;EACZC,UAAU;EACVC,cAAc;EAChB;CACF,EACD,CAAC;AAEF,MAAMC,wBAAwBhC,MAAMc,MAAM;CACxCmB,IAAI;CACJhB,QAAQ;EACNC,SAAS;EACTgB,MAAM;EACNC,QAAQ;EACRT,SAAS;GACP,IAAI;GACJ,UAAU;GACX;EACDD,OAAO;GACL,IAAI;GACJW,OAAO;GACR;EACDC,QAAQ;GACN,IAAI;GACJ,UAAU;GACVD,OAAO;GACR;EACDE,QAAQ;EACRC,QAAQ;GACN,IAAI;GACJ,cAAc;GACf;EACDC,QAAQ;GACN,IAAI;GACJ,cAAc;GACd,cAAc;GACf;EACDC,WAAW;EAEXC,MAAM;GACJxB,SAAS;GACTC,MAAM;GACNwB,aAAa;GACbvB,cAAc;GACdI,OAAO;GACPW,QAAQ;GACRZ,UAAU;GACX;EAEDqB,UAAU;GACR1B,SAAS;GACT2B,MAAM;IACJ,IAAI;IACJ,mBAAmB;IACrB;GACF;EACF;CACD,CAAC;AAEF,MAAMC,aAAa9C,MAAMY,QAAQ;CAC/BmC,MAAM;CACNC,MAAM,oBAAC,aAAW;CAClB/B,QAAQ;EACNgC,WAAW;EACXZ,QAAQ;EACRa,QAAQ;GACN,IAAI;GACJC,SAAS;GACV;EACDhB,QAAQ;GACN,IAAI;GACJ,0BAA0B;GAC3B;EACDK,QAAQ;EACRY,SAAS;EACX;CACD,CAAC;AAgBF,SAASW,eACPC,UACAC,KACA;CACA,MAAM,EACJV,QAAQ,IACRG,SACAF,aACAC,OACAK,OAAO,UACP,GAAGK,UACDH;CACJ,MAAM/C,SAASN,cAAcwD,OAAOtE,gBAAgB;CAEpD,MAAM,EAAEuE,MAAM3D,SAAS;CACvB,MAAM,CAAC2B,OAAOiC,YAAYhE,SAAwB,KAAK;CACvD,MAAMiE,QAAQzD,UAAU;CAExB,MAAM,EAAE0D,mBAAmBhE,aAAa;EACtC,MAAMmD,QAAQc,OAAO;GACnB,IAAIC,SAAS,MAAMb,QAAQc,IACzBF,MACGG,QACEC,SAASA,KAAKC,SAAS,UAAUD,KAAKE,MAAMC,IAAI,aACnD,CAAC,CACAC,KAAKJ,WAAUA,OAAsBK,QAAQ,aAAa,CAC/D,CAAC;AACD,OAAI;AACF,UAAMvB,UAAUe,OAAOS,KAAK,KAAK,CAAC;YAC3BC,GAAG;AACVd,aAASe,OAAOD,EAAE,CAAC;;;EAGvBE,WAAW;AACT,UAAO9B,QACH,CACE,EACE,cAAcA,OACf,CACF,GACD,EAAE;;EAERM,SAAS;AACP,OAAIN,MACFe,OAAMgB,QACJlB,EAAE,yBAAyB,oBAAoB,EAC7CX,OAAOA,SAASW,EAAE,+BAA+B,OAAM,EACxD,CACH,CAAC;;EAGN,CAAC;AAEF5D,UAAS;EACP+E,OAAO;EACPC,WAAW;AACTnB,YAAS,KAAK;;EAEhBoB,YAAY,CAACrD;EACd,CAAC;CAEF,eAAeyB,SAAS;AACtB,QAAM5D,KAAKsD,MAAM;AAEjBe,QAAMgB,QACJlB,EAAE,yBAAyB,oBAAoB,EAC7CX,OAAOA,SAASW,EAAE,+BAA+B,OAAM,EACxD,CACH,CAAC;;CAGH,MAAMsB,gBAAgBnC,MAAMoC,QAAQ,MAAM,IAAI;AAE9C,QACE,oBAAC;EACM1B;EACL,MAAM,EAAE7B,OAAO,CAAC,CAACA,OAAO;EACxB,aAAW0B;EACH7C;EACR,UAAS;EACT,GAAIkD;EACJ,GAAII;YAEJ,qBAAC;GAAI,gBAAa;cAChB,qBAAC;IACC,aAAWT;IACX,MAAM,EACJN,aAAa,CAAC,CAACA,eAAe,CAACD,OAChC;eAED,oBAAC;KAAI,gBAAa;eACfnB,SAAS,OACRA,SAASgC,EAAE,8BAA8B,eAAe,GACtDb,QACFmC,gBAEA,4CACGlC,cACGA,cACAY,EAAE,iCAAiC,mBAAmB,GAE7D;MACE,EACL,qBAAC;KAAK,gBAAa;;MACjB,oBAAC,mBAAI,QAAS;;MAAG,oBAAC,mBAAI,MAAM;;MACxB;KACK,EACZb,SAAS,CAACnB,SACT,oBAAC;IACO0B;IACN,cAAYM,EACV,kCACA,+BACA,EACEX,OAAOA,SAASW,EAAE,+BAA+B,OAAM,EAE3D,CAAC;IACD,SAASP;KAEZ;IACE;GACiB;;AAI5B,MAAM+B,kBAAkBzF,WAAW4D,eAAe;AAElD6B,gBAAgBC,cAAc"}

package/dist/components/content/CopySnippet/CopySnippet.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { _Tooltip } from "../../overlays/Tooltip/Tooltip.js";
 import { TooltipTrigger } from "../../overlays/Tooltip/TooltipTrigger.js";
 import { useI18n } from "../../../i18n/useI18n.js";
@@ -10,8 +10,9 @@ import { Button } from "../../actions/index.js";
 import { _PrismCode } from "../PrismCode/PrismCode.js";
 import { useToast } from "../../overlays/Toast/useToast.js";
 import { Card } from "../Card/Card.js";
+import { c } from "react-compiler-runtime";
 import { tasty } from "@tenphi/tasty";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import copy from "clipboard-copy";
 
@@ -131,73 +132,232 @@ function replaceSymbolsToHidden(str) {
 	return HIDDEN_SYMBOL.repeat(str.length);
 }
 function CopySnippet(allProps) {
+	const $ = c(66);
 	const { t } = useI18n();
-	const { code = "", title = t("copySnippet.title", "Code example"), nowrap, isWrapped, prefix = "", language, serif, actions, showTooltip = false, hideText, ...props } = allProps;
+	let actions;
+	let hideText;
+	let isWrapped;
+	let language;
+	let nowrap;
+	let props;
+	let serif;
+	let t0;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== allProps) {
+		({code: t0, title: t1, nowrap, isWrapped, prefix: t2, language, serif, actions, showTooltip: t3, hideText, ...props} = allProps);
+		$[0] = allProps;
+		$[1] = actions;
+		$[2] = hideText;
+		$[3] = isWrapped;
+		$[4] = language;
+		$[5] = nowrap;
+		$[6] = props;
+		$[7] = serif;
+		$[8] = t0;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+	} else {
+		actions = $[1];
+		hideText = $[2];
+		isWrapped = $[3];
+		language = $[4];
+		nowrap = $[5];
+		props = $[6];
+		serif = $[7];
+		t0 = $[8];
+		t1 = $[9];
+		t2 = $[10];
+		t3 = $[11];
+	}
+	const code = t0 === void 0 ? "" : t0;
+	const title = t1 === void 0 ? t("copySnippet.title", "Code example") : t1;
+	const prefix = t2 === void 0 ? "" : t2;
+	const showTooltip = t3 === void 0 ? false : t3;
 	const toast = useToast();
 	const [showHidden, setShowHidden] = useState(false);
-	async function onCopy() {
+	const onCopy = async function onCopy() {
 		await copy(code);
 		toast.success(t("copySnippet.copied", "{{title}} copied", { title }));
+	};
+	let formattedCode;
+	let multiline;
+	let shouldWrap;
+	if ($[12] !== code || $[13] !== hideText || $[14] !== isWrapped || $[15] !== nowrap || $[16] !== prefix || $[17] !== showHidden) {
+		const pristineCode = code.replace(/\n$/, "");
+		multiline = pristineCode.includes("\n") && !nowrap;
+		shouldWrap = !!isWrapped && !nowrap;
+		let t4;
+		if ($[21] !== prefix) {
+			t4 = (line) => `${prefix}${line}`;
+			$[21] = prefix;
+			$[22] = t4;
+		} else t4 = $[22];
+		formattedCode = pristineCode.replace(/\r/g, "").split(/\n/g).map(t4).join("\n").trim();
+		if (!showHidden) {
+			if (hideText === true) formattedCode = replaceSymbolsToHidden(formattedCode);
+			else if (typeof hideText === "string") formattedCode = formattedCode.replaceAll(hideText, replaceSymbolsToHidden(hideText));
+			else if (Array.isArray(hideText)) hideText.forEach((text) => {
+				formattedCode = formattedCode.replaceAll(text, replaceSymbolsToHidden(text));
+			});
+		}
+		$[12] = code;
+		$[13] = hideText;
+		$[14] = isWrapped;
+		$[15] = nowrap;
+		$[16] = prefix;
+		$[17] = showHidden;
+		$[18] = formattedCode;
+		$[19] = multiline;
+		$[20] = shouldWrap;
+	} else {
+		formattedCode = $[18];
+		multiline = $[19];
+		shouldWrap = $[20];
 	}
-	const pristineCode = code.replace(/\n$/, "");
-	const multiline = pristineCode.includes("\n") && !nowrap;
-	const shouldWrap = !!isWrapped && !nowrap;
-	let formattedCode = pristineCode.replace(/\r/g, "").split(/\n/g).map((line) => `${prefix}${line}`).join("\n").trim();
-	if (!showHidden) {
-		if (hideText === true) formattedCode = replaceSymbolsToHidden(formattedCode);
-		else if (typeof hideText === "string") formattedCode = formattedCode.replaceAll(hideText, replaceSymbolsToHidden(hideText));
-		else if (Array.isArray(hideText)) hideText.forEach((text) => {
-			formattedCode = formattedCode.replaceAll(text, replaceSymbolsToHidden(text));
-		});
-	}
-	const mods = useMemo(() => {
-		return {
+	const t4 = multiline || shouldWrap;
+	const t5 = !!hideText;
+	let t6;
+	if ($[23] !== nowrap || $[24] !== serif || $[25] !== t4 || $[26] !== t5) {
+		t6 = {
 			nowrap,
-			multiline: multiline || shouldWrap,
+			multiline: t4,
 			serif,
-			hidden: !!hideText
+			hidden: t5
 		};
-	}, [
-		nowrap,
-		multiline,
-		shouldWrap,
-		hideText,
-		serif
-	]);
-	const Snippet = /* @__PURE__ */ jsx(CopySnippetElement, {
-		mods,
-		...props,
-		children: /* @__PURE__ */ jsxs("div", {
-			"data-element": "Grid",
-			children: [/* @__PURE__ */ jsx(StyledBlock, {
-				mods,
-				children: /* @__PURE__ */ jsx(_PrismCode, {
-					style: {
-						margin: 0,
-						overflow: "visible"
-					},
-					code: formattedCode,
-					language: language || "javascript",
-					isWrapped: shouldWrap
-				})
-			}), /* @__PURE__ */ jsxs(ButtonContainer, {
-				mods,
-				children: [
-					/* @__PURE__ */ jsx(CopyButton, {
-						"aria-label": t("copySnippet.copyToClipboard", "Copy {{title}} to clipboard", { title }),
-						onPress: onCopy
-					}),
-					hideText && /* @__PURE__ */ jsx(ShowButton, {
-						"aria-label": t("copySnippet.showHiddenParts", "Show hidden parts"),
-						icon: showHidden ? /* @__PURE__ */ jsx(EyeInvisibleIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {}),
-						onPress: () => setShowHidden(!showHidden)
-					}),
-					actions
-				]
-			})]
-		})
-	});
-	if (showTooltip) return /* @__PURE__ */ jsxs(TooltipTrigger, { children: [/* @__PURE__ */ jsx(ActionElement, { children: Snippet }), /* @__PURE__ */ jsx(_Tooltip, { children: formattedCode })] });
+		$[23] = nowrap;
+		$[24] = serif;
+		$[25] = t4;
+		$[26] = t5;
+		$[27] = t6;
+	} else t6 = $[27];
+	const mods = t6;
+	const T0 = CopySnippetElement;
+	const t7 = "Grid";
+	let t8;
+	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = {
+			margin: 0,
+			overflow: "visible"
+		};
+		$[28] = t8;
+	} else t8 = $[28];
+	const t9 = language || "javascript";
+	let t10;
+	if ($[29] !== formattedCode || $[30] !== shouldWrap || $[31] !== t9) {
+		t10 = /* @__PURE__ */ jsx(_PrismCode, {
+			style: t8,
+			code: formattedCode,
+			language: t9,
+			isWrapped: shouldWrap
+		});
+		$[29] = formattedCode;
+		$[30] = shouldWrap;
+		$[31] = t9;
+		$[32] = t10;
+	} else t10 = $[32];
+	let t11;
+	if ($[33] !== mods || $[34] !== t10) {
+		t11 = /* @__PURE__ */ jsx(StyledBlock, {
+			mods,
+			children: t10
+		});
+		$[33] = mods;
+		$[34] = t10;
+		$[35] = t11;
+	} else t11 = $[35];
+	const T1 = ButtonContainer;
+	const T2 = CopyButton;
+	const t12 = t("copySnippet.copyToClipboard", "Copy {{title}} to clipboard", { title });
+	let t13;
+	if ($[36] !== T2 || $[37] !== onCopy || $[38] !== t12) {
+		t13 = /* @__PURE__ */ jsx(T2, {
+			"aria-label": t12,
+			onPress: onCopy
+		});
+		$[36] = T2;
+		$[37] = onCopy;
+		$[38] = t12;
+		$[39] = t13;
+	} else t13 = $[39];
+	let t14;
+	if ($[40] !== hideText || $[41] !== setShowHidden || $[42] !== showHidden || $[43] !== t) {
+		t14 = hideText && /* @__PURE__ */ jsx(ShowButton, {
+			"aria-label": t("copySnippet.showHiddenParts", "Show hidden parts"),
+			icon: showHidden ? /* @__PURE__ */ jsx(EyeInvisibleIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {}),
+			onPress: () => setShowHidden(!showHidden)
+		});
+		$[40] = hideText;
+		$[41] = setShowHidden;
+		$[42] = showHidden;
+		$[43] = t;
+		$[44] = t14;
+	} else t14 = $[44];
+	let t15;
+	if ($[45] !== T1 || $[46] !== actions || $[47] !== mods || $[48] !== t13 || $[49] !== t14) {
+		t15 = /* @__PURE__ */ jsxs(T1, {
+			mods,
+			children: [
+				t13,
+				t14,
+				actions
+			]
+		});
+		$[45] = T1;
+		$[46] = actions;
+		$[47] = mods;
+		$[48] = t13;
+		$[49] = t14;
+		$[50] = t15;
+	} else t15 = $[50];
+	let t16;
+	if ($[51] !== t11 || $[52] !== t15) {
+		t16 = /* @__PURE__ */ jsxs("div", {
+			"data-element": t7,
+			children: [t11, t15]
+		});
+		$[51] = t11;
+		$[52] = t15;
+		$[53] = t16;
+	} else t16 = $[53];
+	let t17;
+	if ($[54] !== T0 || $[55] !== mods || $[56] !== props || $[57] !== t16) {
+		t17 = /* @__PURE__ */ jsx(T0, {
+			mods,
+			...props,
+			children: t16
+		});
+		$[54] = T0;
+		$[55] = mods;
+		$[56] = props;
+		$[57] = t16;
+		$[58] = t17;
+	} else t17 = $[58];
+	const Snippet = t17;
+	if (showTooltip) {
+		let t18;
+		if ($[59] !== Snippet) {
+			t18 = /* @__PURE__ */ jsx(ActionElement, { children: Snippet });
+			$[59] = Snippet;
+			$[60] = t18;
+		} else t18 = $[60];
+		let t19;
+		if ($[61] !== formattedCode) {
+			t19 = /* @__PURE__ */ jsx(_Tooltip, { children: formattedCode });
+			$[61] = formattedCode;
+			$[62] = t19;
+		} else t19 = $[62];
+		let t20;
+		if ($[63] !== t18 || $[64] !== t19) {
+			t20 = /* @__PURE__ */ jsxs(TooltipTrigger, { children: [t18, t19] });
+			$[63] = t18;
+			$[64] = t19;
+			$[65] = t20;
+		} else t20 = $[65];
+		return t20;
+	}
 	return Snippet;
 }
 const _CopySnippet = Object.assign(CopySnippet, { Button: ActionButton });

package/dist/components/content/CopySnippet/CopySnippet.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopySnippet.js","names":["PrismCode","Tooltip"],"sources":["../../../../src/components/content/CopySnippet/CopySnippet.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport copy from 'clipboard-copy';\nimport { ReactNode, useMemo, useState } from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { CopyIcon } from '../../../icons/CopyIcon';\nimport { EyeIcon } from '../../../icons/EyeIcon';\nimport { EyeInvisibleIcon } from '../../../icons/EyeInvisibleIcon';\nimport { Action, Button } from '../../actions';\nimport {\n  CubePrismCodeProps,\n  PrismCode,\n} from '../../content/PrismCode/PrismCode';\nimport { useToast } from '../../overlays/Toast';\nimport { Tooltip } from '../../overlays/Tooltip/Tooltip';\nimport { TooltipTrigger } from '../../overlays/Tooltip/TooltipTrigger';\nimport { Card, CubeCardProps } from '../Card/Card';\n\nconst ActionElement = tasty(Action, {\n  styles: {\n    display: 'block',\n    cursor: 'default',\n    width: '100%',\n  },\n});\n\nconst StyledBlock = tasty({\n  styles: {\n    position: 'relative',\n    overflow: {\n      '': 'auto clip',\n      multiline: 'auto',\n    },\n    width: 'initial auto 100%',\n    height: {\n      '': 'max 5x',\n      multiline: 'auto',\n    },\n    boxSizing: 'border-box',\n    whiteSpace: {\n      '': 'initial',\n      nowrap: 'nowrap',\n    },\n    scrollbar: 'styled',\n    padding: '1.125x 1.5x',\n    fade: {\n      '': 'right 2x',\n      multiline: false,\n    },\n\n    Code: {\n      $: 'code',\n      preset: {\n        '': 's3',\n        serif: 't3',\n      },\n      // `s3` carries `fontFamily: var(--font-mono)` but `t3` sets no family at\n      // all, so the preset alone cannot express \"serif\". Left to the preset, the\n      // `serif` variant would inherit the `<code>` element's UA monospace\n      // default and render monospace anyway. Keep the family explicit:\n      // `font: 'monospace'` for the default, `font: true` for the design\n      // system's default (non-mono) stack under `serif`.\n      font: {\n        '': 'monospace',\n        serif: true,\n      },\n      // The wrapping itself (`white-space` / `overflow-wrap` on the `<code>`)\n      // is owned by `PrismCode` via its `isWrapped` prop, which this component\n      // forwards.\n    },\n  },\n});\n\nconst ButtonContainer = tasty({\n  styles: {\n    position: 'relative',\n    display: 'flex',\n    flow: {\n      '': 'row-reverse',\n      multiline: 'column',\n    },\n    placeContent: 'start',\n\n    '$button-size': {\n      '': '5x',\n      multiline: '4x',\n    },\n\n    '$first-button-radius': {\n      '': '0 1r 1r 0',\n      multiline: '0 1r 0 0',\n    },\n\n    '$last-button-radius': {\n      '': '0',\n      multiline: '0 0 0 1r',\n    },\n\n    '$first-and-last-button-radius': {\n      '': '0 1r 1r 0',\n      multiline: '0 1r 0 1r',\n    },\n\n    // Make sure there's a small gap between buttons and the content\n    border: 'left #clear',\n  },\n});\n\nconst CopySnippetElement = tasty(Card, {\n  qa: 'CopySnippet',\n  styles: {\n    display: 'grid',\n    gridRows: 'minmax(0, 1fr)',\n    fill: '#surface-2',\n    border: 0,\n    padding: 0,\n    preset: 'default',\n    radius: '1r',\n    overflow: 'hidden',\n    height: 'max-content',\n\n    Grid: {\n      display: 'grid',\n      flow: 'row',\n      gridColumns: 'minmax(0, 1fr) auto',\n      gridRows: 'minmax(0, 1fr)',\n      width: 'min 20x',\n      position: 'relative',\n    },\n  },\n});\n\nconst ActionButton = tasty(Button, {\n  type: 'clear',\n  styles: {\n    width: '4x',\n    padding: 0,\n    placeSelf: 'stretch',\n    border: '#clear',\n    shadow: {\n      '': 'inset 0 0 0 1ow #purple-03.0',\n      focused: 'inset 0 0 0 1ow #purple-03',\n    },\n    outline: false,\n    height: '$button-size',\n    radius: {\n      '': 0,\n      ':last-child': '$last-button-radius',\n      ':first-child': '$first-button-radius',\n      ':first-child & :last-child': '$first-and-last-button-radius',\n    },\n  },\n});\n\nconst CopyButton = tasty(ActionButton, {\n  icon: <CopyIcon />,\n});\n\nconst ShowButton = tasty(ActionButton, {});\n\nexport interface CubeCopySnippetProps extends CubeCardProps {\n  /** The code snippet */\n  code: string;\n  /** The title of the snippet */\n  title?: string;\n  /** Whether the snippet is single-lined */\n  nowrap?: boolean;\n  /**\n   * Soft-wrap long content onto multiple lines instead of scrolling it\n   * horizontally. The block grows vertically to fit (so even a single long line\n   * is fully readable rather than clamped), and unbreakable runs like URLs,\n   * tokens and identifiers wrap too. Useful for error messages and logs.\n   * Has no effect when `nowrap` is set. Note this is a different axis from\n   * `nowrap`: `nowrap` collapses real newlines into one scrolling line, while\n   * `isWrapped` breaks long lines that would otherwise scroll.\n   */\n  isWrapped?: boolean;\n  /** The prefix for each line of code. Useful for bash snippets. */\n  prefix?: string;\n  /** The code language of the snippet */\n  language?: CubePrismCodeProps['language'];\n  /** Whether the snippet uses a serif font */\n  serif?: boolean;\n  /** Whether to show the tooltip with the full content */\n  showTooltip?: boolean;\n  hideText?: string[] | string | boolean;\n  actions?: ReactNode;\n}\n\n// const HIDDEN_SYMBOL = '●';\nconst HIDDEN_SYMBOL = '•';\n\nfunction replaceSymbolsToHidden(str: string) {\n  return HIDDEN_SYMBOL.repeat(str.length);\n}\n\nfunction CopySnippet(allProps: CubeCopySnippetProps) {\n  const { t } = useI18n();\n\n  const {\n    code = '',\n    title = t('copySnippet.title', 'Code example'),\n    nowrap,\n    isWrapped,\n    prefix = '',\n    language,\n    serif,\n    actions,\n    showTooltip = false,\n    hideText,\n    ...props\n  } = allProps;\n\n  const toast = useToast();\n\n  const [showHidden, setShowHidden] = useState(false);\n\n  async function onCopy() {\n    await copy(code);\n\n    toast.success(t('copySnippet.copied', '{{title}} copied', { title }));\n  }\n\n  const pristineCode = code.replace(/\\n$/, '');\n\n  const multiline = pristineCode.includes('\\n') && !nowrap;\n  // `isWrapped` reuses the multiline block layout (auto height, no right fade,\n  // copy button on top) so wrapped content grows vertically instead of being\n  // clamped to the single-line height. `nowrap` (force one scrolling line) wins\n  // over it.\n  const shouldWrap = !!isWrapped && !nowrap;\n  let formattedCode = pristineCode\n    .replace(/\\r/g, '')\n    .split(/\\n/g)\n    .map((line) => `${prefix}${line}`)\n    .join('\\n')\n    .trim();\n\n  if (!showHidden) {\n    if (hideText === true) {\n      formattedCode = replaceSymbolsToHidden(formattedCode);\n    } else if (typeof hideText === 'string') {\n      formattedCode = formattedCode.replaceAll(\n        hideText,\n        replaceSymbolsToHidden(hideText),\n      );\n    } else if (Array.isArray(hideText)) {\n      hideText.forEach((text) => {\n        formattedCode = formattedCode.replaceAll(\n          text,\n          replaceSymbolsToHidden(text),\n        );\n      });\n    }\n  }\n\n  const mods = useMemo(() => {\n    return {\n      nowrap,\n      multiline: multiline || shouldWrap,\n      serif,\n      hidden: !!hideText,\n    };\n  }, [nowrap, multiline, shouldWrap, hideText, serif]);\n\n  const Snippet = (\n    <CopySnippetElement mods={mods} {...props}>\n      <div data-element=\"Grid\">\n        <StyledBlock mods={mods}>\n          <PrismCode\n            style={{ margin: 0, overflow: 'visible' }}\n            code={formattedCode}\n            language={language || 'javascript'}\n            isWrapped={shouldWrap}\n          />\n        </StyledBlock>\n        <ButtonContainer mods={mods}>\n          <CopyButton\n            aria-label={t(\n              'copySnippet.copyToClipboard',\n              'Copy {{title}} to clipboard',\n              { title },\n            )}\n            onPress={onCopy}\n          />\n          {hideText && (\n            <ShowButton\n              aria-label={t('copySnippet.showHiddenParts', 'Show hidden parts')}\n              icon={showHidden ? <EyeInvisibleIcon /> : <EyeIcon />}\n              onPress={() => setShowHidden(!showHidden)}\n            />\n          )}\n          {actions}\n        </ButtonContainer>\n      </div>\n    </CopySnippetElement>\n  );\n\n  if (showTooltip) {\n    return (\n      <TooltipTrigger>\n        <ActionElement>{Snippet}</ActionElement>\n        <Tooltip>{formattedCode}</Tooltip>\n      </TooltipTrigger>\n    );\n  }\n\n  return Snippet;\n}\n\nconst _CopySnippet = Object.assign(\n  CopySnippet as typeof CopySnippet & {\n    Button: typeof ActionButton;\n  },\n  {\n    Button: ActionButton,\n  },\n);\n\n(_CopySnippet as any).displayName = 'CopySnippet';\n\nexport { _CopySnippet as CopySnippet };\n"],"mappings":"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"}
+{"version":3,"file":"CopySnippet.js","names":["tasty","copy","ReactNode","useMemo","useState","useI18n","CopyIcon","EyeIcon","EyeInvisibleIcon","Action","Button","CubePrismCodeProps","PrismCode","useToast","Tooltip","TooltipTrigger","Card","CubeCardProps","ActionElement","styles","display","cursor","width","StyledBlock","position","overflow","multiline","height","boxSizing","whiteSpace","nowrap","scrollbar","padding","fade","Code","$","preset","serif","font","ButtonContainer","flow","placeContent","border","CopySnippetElement","qa","gridRows","fill","radius","Grid","gridColumns","ActionButton","type","placeSelf","shadow","focused","outline","CopyButton","icon","ShowButton","CubeCopySnippetProps","code","title","isWrapped","prefix","language","showTooltip","hideText","actions","HIDDEN_SYMBOL","replaceSymbolsToHidden","str","repeat","length","CopySnippet","allProps","_c","t","props","t0","t1","t2","t3","undefined","toast","showHidden","setShowHidden","onCopy","success","formattedCode","shouldWrap","pristineCode","replace","includes","t4","line","split","map","join","trim","replaceAll","Array","isArray","forEach","text","t5","t6","hidden","mods","T0","t7","t8","Symbol","for","margin","t9","t10","t11","T1","T2","t12","t13","t14","t15","t16","t17","Snippet","t18","t19","t20","_CopySnippet","Object","assign","displayName"],"sources":["../../../../src/components/content/CopySnippet/CopySnippet.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport copy from 'clipboard-copy';\nimport { ReactNode, useMemo, useState } from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { CopyIcon } from '../../../icons/CopyIcon';\nimport { EyeIcon } from '../../../icons/EyeIcon';\nimport { EyeInvisibleIcon } from '../../../icons/EyeInvisibleIcon';\nimport { Action, Button } from '../../actions';\nimport {\n  CubePrismCodeProps,\n  PrismCode,\n} from '../../content/PrismCode/PrismCode';\nimport { useToast } from '../../overlays/Toast';\nimport { Tooltip } from '../../overlays/Tooltip/Tooltip';\nimport { TooltipTrigger } from '../../overlays/Tooltip/TooltipTrigger';\nimport { Card, CubeCardProps } from '../Card/Card';\n\nconst ActionElement = tasty(Action, {\n  styles: {\n    display: 'block',\n    cursor: 'default',\n    width: '100%',\n  },\n});\n\nconst StyledBlock = tasty({\n  styles: {\n    position: 'relative',\n    overflow: {\n      '': 'auto clip',\n      multiline: 'auto',\n    },\n    width: 'initial auto 100%',\n    height: {\n      '': 'max 5x',\n      multiline: 'auto',\n    },\n    boxSizing: 'border-box',\n    whiteSpace: {\n      '': 'initial',\n      nowrap: 'nowrap',\n    },\n    scrollbar: 'styled',\n    padding: '1.125x 1.5x',\n    fade: {\n      '': 'right 2x',\n      multiline: false,\n    },\n\n    Code: {\n      $: 'code',\n      preset: {\n        '': 's3',\n        serif: 't3',\n      },\n      // `s3` carries `fontFamily: var(--font-mono)` but `t3` sets no family at\n      // all, so the preset alone cannot express \"serif\". Left to the preset, the\n      // `serif` variant would inherit the `<code>` element's UA monospace\n      // default and render monospace anyway. Keep the family explicit:\n      // `font: 'monospace'` for the default, `font: true` for the design\n      // system's default (non-mono) stack under `serif`.\n      font: {\n        '': 'monospace',\n        serif: true,\n      },\n      // The wrapping itself (`white-space` / `overflow-wrap` on the `<code>`)\n      // is owned by `PrismCode` via its `isWrapped` prop, which this component\n      // forwards.\n    },\n  },\n});\n\nconst ButtonContainer = tasty({\n  styles: {\n    position: 'relative',\n    display: 'flex',\n    flow: {\n      '': 'row-reverse',\n      multiline: 'column',\n    },\n    placeContent: 'start',\n\n    '$button-size': {\n      '': '5x',\n      multiline: '4x',\n    },\n\n    '$first-button-radius': {\n      '': '0 1r 1r 0',\n      multiline: '0 1r 0 0',\n    },\n\n    '$last-button-radius': {\n      '': '0',\n      multiline: '0 0 0 1r',\n    },\n\n    '$first-and-last-button-radius': {\n      '': '0 1r 1r 0',\n      multiline: '0 1r 0 1r',\n    },\n\n    // Make sure there's a small gap between buttons and the content\n    border: 'left #clear',\n  },\n});\n\nconst CopySnippetElement = tasty(Card, {\n  qa: 'CopySnippet',\n  styles: {\n    display: 'grid',\n    gridRows: 'minmax(0, 1fr)',\n    fill: '#surface-2',\n    border: 0,\n    padding: 0,\n    preset: 'default',\n    radius: '1r',\n    overflow: 'hidden',\n    height: 'max-content',\n\n    Grid: {\n      display: 'grid',\n      flow: 'row',\n      gridColumns: 'minmax(0, 1fr) auto',\n      gridRows: 'minmax(0, 1fr)',\n      width: 'min 20x',\n      position: 'relative',\n    },\n  },\n});\n\nconst ActionButton = tasty(Button, {\n  type: 'clear',\n  styles: {\n    width: '4x',\n    padding: 0,\n    placeSelf: 'stretch',\n    border: '#clear',\n    shadow: {\n      '': 'inset 0 0 0 1ow #purple-03.0',\n      focused: 'inset 0 0 0 1ow #purple-03',\n    },\n    outline: false,\n    height: '$button-size',\n    radius: {\n      '': 0,\n      ':last-child': '$last-button-radius',\n      ':first-child': '$first-button-radius',\n      ':first-child & :last-child': '$first-and-last-button-radius',\n    },\n  },\n});\n\nconst CopyButton = tasty(ActionButton, {\n  icon: <CopyIcon />,\n});\n\nconst ShowButton = tasty(ActionButton, {});\n\nexport interface CubeCopySnippetProps extends CubeCardProps {\n  /** The code snippet */\n  code: string;\n  /** The title of the snippet */\n  title?: string;\n  /** Whether the snippet is single-lined */\n  nowrap?: boolean;\n  /**\n   * Soft-wrap long content onto multiple lines instead of scrolling it\n   * horizontally. The block grows vertically to fit (so even a single long line\n   * is fully readable rather than clamped), and unbreakable runs like URLs,\n   * tokens and identifiers wrap too. Useful for error messages and logs.\n   * Has no effect when `nowrap` is set. Note this is a different axis from\n   * `nowrap`: `nowrap` collapses real newlines into one scrolling line, while\n   * `isWrapped` breaks long lines that would otherwise scroll.\n   */\n  isWrapped?: boolean;\n  /** The prefix for each line of code. Useful for bash snippets. */\n  prefix?: string;\n  /** The code language of the snippet */\n  language?: CubePrismCodeProps['language'];\n  /** Whether the snippet uses a serif font */\n  serif?: boolean;\n  /** Whether to show the tooltip with the full content */\n  showTooltip?: boolean;\n  hideText?: string[] | string | boolean;\n  actions?: ReactNode;\n}\n\n// const HIDDEN_SYMBOL = '●';\nconst HIDDEN_SYMBOL = '•';\n\nfunction replaceSymbolsToHidden(str: string) {\n  return HIDDEN_SYMBOL.repeat(str.length);\n}\n\nfunction CopySnippet(allProps: CubeCopySnippetProps) {\n  const { t } = useI18n();\n\n  const {\n    code = '',\n    title = t('copySnippet.title', 'Code example'),\n    nowrap,\n    isWrapped,\n    prefix = '',\n    language,\n    serif,\n    actions,\n    showTooltip = false,\n    hideText,\n    ...props\n  } = allProps;\n\n  const toast = useToast();\n\n  const [showHidden, setShowHidden] = useState(false);\n\n  async function onCopy() {\n    await copy(code);\n\n    toast.success(t('copySnippet.copied', '{{title}} copied', { title }));\n  }\n\n  const pristineCode = code.replace(/\\n$/, '');\n\n  const multiline = pristineCode.includes('\\n') && !nowrap;\n  // `isWrapped` reuses the multiline block layout (auto height, no right fade,\n  // copy button on top) so wrapped content grows vertically instead of being\n  // clamped to the single-line height. `nowrap` (force one scrolling line) wins\n  // over it.\n  const shouldWrap = !!isWrapped && !nowrap;\n  let formattedCode = pristineCode\n    .replace(/\\r/g, '')\n    .split(/\\n/g)\n    .map((line) => `${prefix}${line}`)\n    .join('\\n')\n    .trim();\n\n  if (!showHidden) {\n    if (hideText === true) {\n      formattedCode = replaceSymbolsToHidden(formattedCode);\n    } else if (typeof hideText === 'string') {\n      formattedCode = formattedCode.replaceAll(\n        hideText,\n        replaceSymbolsToHidden(hideText),\n      );\n    } else if (Array.isArray(hideText)) {\n      hideText.forEach((text) => {\n        formattedCode = formattedCode.replaceAll(\n          text,\n          replaceSymbolsToHidden(text),\n        );\n      });\n    }\n  }\n\n  const mods = useMemo(() => {\n    return {\n      nowrap,\n      multiline: multiline || shouldWrap,\n      serif,\n      hidden: !!hideText,\n    };\n  }, [nowrap, multiline, shouldWrap, hideText, serif]);\n\n  const Snippet = (\n    <CopySnippetElement mods={mods} {...props}>\n      <div data-element=\"Grid\">\n        <StyledBlock mods={mods}>\n          <PrismCode\n            style={{ margin: 0, overflow: 'visible' }}\n            code={formattedCode}\n            language={language || 'javascript'}\n            isWrapped={shouldWrap}\n          />\n        </StyledBlock>\n        <ButtonContainer mods={mods}>\n          <CopyButton\n            aria-label={t(\n              'copySnippet.copyToClipboard',\n              'Copy {{title}} to clipboard',\n              { title },\n            )}\n            onPress={onCopy}\n          />\n          {hideText && (\n            <ShowButton\n              aria-label={t('copySnippet.showHiddenParts', 'Show hidden parts')}\n              icon={showHidden ? <EyeInvisibleIcon /> : <EyeIcon />}\n              onPress={() => setShowHidden(!showHidden)}\n            />\n          )}\n          {actions}\n        </ButtonContainer>\n      </div>\n    </CopySnippetElement>\n  );\n\n  if (showTooltip) {\n    return (\n      <TooltipTrigger>\n        <ActionElement>{Snippet}</ActionElement>\n        <Tooltip>{formattedCode}</Tooltip>\n      </TooltipTrigger>\n    );\n  }\n\n  return Snippet;\n}\n\nconst _CopySnippet = Object.assign(\n  CopySnippet as typeof CopySnippet & {\n    Button: typeof ActionButton;\n  },\n  {\n    Button: ActionButton,\n  },\n);\n\n(_CopySnippet as any).displayName = 'CopySnippet';\n\nexport { _CopySnippet as CopySnippet };\n"],"mappings":"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"}