@keboola/design 9.1.0 → 10.1.0

package/dist/chunk-L37JJ6MR.js

@@ -0,0 +1,152 @@
+import { Button, ButtonInline } from './chunk-CTCFYWJC.js';
+import { Copy } from './chunk-BOHNXTMM.js';
+import { Tooltip } from './chunk-63NSN2VL.js';
+import { cn } from './chunk-JP7PNHLH.js';
+import { useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/utils/copyToClipboard.ts
+var copyViaSelection = (text) => {
+  const node = document.createElement("textarea");
+  node.value = text;
+  node.setAttribute("readonly", "");
+  node.style.cssText = "position:fixed;top:0;left:0;opacity:0";
+  document.body.append(node);
+  node.select();
+  try {
+    return document.execCommand("copy");
+  } finally {
+    node.remove();
+  }
+};
+var copyToClipboard = async (text) => {
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch (error) {
+    if (!copyViaSelection(text)) throw error;
+  }
+};
+var Clipboard = ({
+  ref,
+  text: textProp,
+  children,
+  tooltip = "Copy to Clipboard",
+  tooltipPlacement = "top",
+  tooltipVariant: tooltipVariantProp = "action",
+  asChild = false,
+  onClick,
+  className,
+  ...restButtonProps
+}) => {
+  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+  const [state, setState] = useState("ready");
+  const text = typeof textProp === "function" ? textProp() : textProp;
+  const copy = async (text2) => {
+    try {
+      if (!document.hasFocus()) window.focus();
+      await copyToClipboard(text2);
+      setState("copied");
+    } catch {
+      setState("error");
+    }
+  };
+  const handleOnClick = (event) => {
+    setIsTooltipOpen(true);
+    if (text && state === "ready") void copy(text);
+    onClick?.(event);
+  };
+  const handleOnOpenChange = (open) => {
+    if (!open && state !== "ready") setState("ready");
+    setIsTooltipOpen(open);
+  };
+  const tooltipContent = (() => {
+    if (!text) return "Nothing to copy";
+    if (state === "error") return "Failed to copy";
+    if (state === "copied") return "Copied to Clipboard";
+    return tooltip;
+  })();
+  const tooltipVariant = state === "ready" && !!text ? tooltipVariantProp : "action";
+  const hasTooltipContent = tooltipContent !== null && tooltipContent !== void 0;
+  return /* @__PURE__ */ jsxs(Tooltip.Root, { open: isTooltipOpen, onOpenChange: handleOnOpenChange, children: [
+    /* @__PURE__ */ jsx(
+      Tooltip.Trigger,
+      {
+        ...restButtonProps,
+        asChild,
+        keepOpenOnClick: true,
+        onClick: handleOnClick,
+        className: cn("tw:cursor-pointer", className),
+        ref,
+        children: children ?? text
+      }
+    ),
+    hasTooltipContent && /* @__PURE__ */ jsx(
+      Tooltip.Content,
+      {
+        keepOpenOnPointerDownOutside: true,
+        placement: tooltipPlacement,
+        variant: tooltipVariant,
+        children: tooltipContent
+      }
+    )
+  ] });
+};
+var DEFAULT_ICON = /* @__PURE__ */ jsx(Copy, {});
+var DEFAULT_ARIA_LABEL = "Copy";
+var ClipboardButton = ({
+  // clipboard props
+  text,
+  tooltip,
+  tooltipPlacement,
+  tooltipVariant,
+  // button props
+  icon = DEFAULT_ICON,
+  variant = "outline",
+  children,
+  ...rest
+}) => {
+  const defaultAriaLabel = typeof tooltip === "string" && tooltip.trim() ? tooltip : DEFAULT_ARIA_LABEL;
+  const ariaLabel = rest["aria-label"] ?? (children == null ? defaultAriaLabel : void 0);
+  return /* @__PURE__ */ jsx(
+    Clipboard,
+    {
+      asChild: true,
+      tooltip,
+      tooltipPlacement,
+      tooltipVariant,
+      text,
+      children: /* @__PURE__ */ jsxs(Button, { ...rest, "aria-label": ariaLabel, variant, disabled: !text, children: [
+        icon,
+        children
+      ] })
+    }
+  );
+};
+var ClipboardInline = ({
+  // clipboard props
+  text,
+  tooltip,
+  tooltipPlacement,
+  tooltipVariant,
+  // button props
+  children = "Copy To Clipboard",
+  hideIcon = false,
+  ...rest
+}) => /* @__PURE__ */ jsx(
+  Clipboard,
+  {
+    asChild: true,
+    text,
+    tooltip,
+    tooltipPlacement,
+    tooltipVariant,
+    children: /* @__PURE__ */ jsxs(ButtonInline, { ...rest, disabled: !text, children: [
+      !hideIcon && /* @__PURE__ */ jsx(Copy, { className: "tw:size-4" }),
+      children
+    ] })
+  }
+);
+
+export { Clipboard, ClipboardButton, ClipboardInline, copyToClipboard };
+//# sourceMappingURL=chunk-L37JJ6MR.js.map
+//# sourceMappingURL=chunk-L37JJ6MR.js.map

package/dist/chunk-L37JJ6MR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/copyToClipboard.ts","../src/components/Clipboard/Clipboard.tsx","../src/blocks/ClipboardButton/ClipboardButton.tsx","../src/blocks/ClipboardButton/ClipboardInline.tsx"],"names":["text","jsx","jsxs"],"mappings":"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","file":"chunk-L37JJ6MR.js","sourcesContent":["/**\n * The async Clipboard API requires the document to be focused and rejects with\n * `NotAllowedError: Document is not focused` otherwise — which is the normal state\n * for a page inside an iframe that has not taken focus, such as Storybook's canvas\n * or an embedded preview. `execCommand` has no such requirement because it copies\n * the selection of a node we focus ourselves, so it covers that gap.\n */\nconst copyViaSelection = (text: string) => {\n  const node = document.createElement('textarea');\n  node.value = text;\n  node.setAttribute('readonly', '');\n  node.style.cssText = 'position:fixed;top:0;left:0;opacity:0';\n  document.body.append(node);\n  node.select();\n\n  try {\n    return document.execCommand('copy');\n  } finally {\n    node.remove();\n  }\n};\n\nexport const copyToClipboard = async (text: string) => {\n  try {\n    await navigator.clipboard.writeText(text);\n  } catch (error) {\n    if (!copyViaSelection(text)) throw error;\n  }\n};\n","import { useState } from 'react';\nimport type { ComponentProps, MouseEventHandler } from 'react';\n\nimport { cn, copyToClipboard } from '../../utils';\nimport { type Props as TooltipProps, Tooltip } from '../Tooltip';\n\ntype Props = {\n  tooltip?: TooltipProps['tooltip'];\n  tooltipPlacement?: TooltipProps['placement'];\n  tooltipVariant?: TooltipProps['variant'];\n  asChild?: TooltipProps['triggerAsChild'];\n  text?: string | (() => string);\n} & ComponentProps<'button'>;\n\nexport const Clipboard = ({\n  ref,\n  text: textProp,\n  children,\n  tooltip = 'Copy to Clipboard',\n  tooltipPlacement = 'top',\n  tooltipVariant: tooltipVariantProp = 'action',\n  asChild = false,\n  onClick,\n  className,\n  ...restButtonProps\n}: Props) => {\n  const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n  const [state, setState] = useState<'ready' | 'copied' | 'error'>('ready');\n  const text = typeof textProp === 'function' ? textProp() : textProp;\n\n  const copy = async (text: string) => {\n    try {\n      // For the clipboard feature to work reliably, the window must be in focus for security reasons.\n      // However, the button can be clicked without the window being focused.\n      if (!document.hasFocus()) window.focus();\n\n      await copyToClipboard(text);\n      setState('copied');\n    } catch {\n      setState('error');\n    }\n  };\n\n  const handleOnClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n    // Open on click rather than waiting for hover. Radix opens on pointer-enter via a\n    // `delayDuration` timer (300ms here), so clicking faster than that left the outcome invisible\n    // until the timer caught up — the message was already rendered, just inside a closed tooltip.\n    setIsTooltipOpen(true);\n    if (text && state === 'ready') void copy(text);\n    onClick?.(event);\n  };\n\n  const handleOnOpenChange: ComponentProps<typeof Tooltip.Root>['onOpenChange'] = (open) => {\n    // Reset when the tooltip closes, allowing the user to leave the copy button.\n    if (!open && state !== 'ready') setState('ready');\n    setIsTooltipOpen(open);\n  };\n\n  const tooltipContent = (() => {\n    if (!text) return 'Nothing to copy';\n    if (state === 'error') return 'Failed to copy';\n    if (state === 'copied') return 'Copied to Clipboard';\n    return tooltip;\n  })();\n\n  const tooltipVariant: TooltipProps['variant'] =\n    state === 'ready' && !!text ? tooltipVariantProp : 'action';\n\n  // `tooltip={null}` leaves nothing to say until there is an outcome. Not rendering `Content` at all\n  // is what makes that work: hovering still opens the tooltip, there is simply nothing in it, and\n  // the copied / failed message appears in place the moment `state` changes. It also keeps Radix\n  // from pointing the trigger's `aria-describedby` at content that has no text.\n  const hasTooltipContent = tooltipContent !== null && tooltipContent !== undefined;\n\n  return (\n    <Tooltip.Root open={isTooltipOpen} onOpenChange={handleOnOpenChange}>\n      <Tooltip.Trigger\n        {...restButtonProps}\n        asChild={asChild}\n        keepOpenOnClick\n        onClick={handleOnClick}\n        className={cn('tw:cursor-pointer', className)}\n        ref={ref}\n      >\n        {children ?? text}\n      </Tooltip.Trigger>\n\n      {hasTooltipContent && (\n        <Tooltip.Content\n          keepOpenOnPointerDownOutside\n          placement={tooltipPlacement}\n          variant={tooltipVariant}\n        >\n          {tooltipContent}\n        </Tooltip.Content>\n      )}\n    </Tooltip.Root>\n  );\n};\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { Button } from '../../components/Button';\nimport { Clipboard } from '../../components/Clipboard';\nimport { Copy } from '../../icons';\n\ntype ClipboardProps = Pick<\n  ComponentProps<typeof Clipboard>,\n  'text' | 'tooltip' | 'tooltipPlacement' | 'tooltipVariant'\n>;\n\ntype ButtonProps = Omit<ComponentProps<typeof Button>, 'disabled' | 'icon'>;\n\ntype Props = ClipboardProps & ButtonProps & { icon?: ReactNode };\n\nconst DEFAULT_ICON: ReactNode = <Copy />;\nconst DEFAULT_ARIA_LABEL = 'Copy';\n\nexport const ClipboardButton = ({\n  // clipboard props\n  text,\n  tooltip,\n  tooltipPlacement,\n  tooltipVariant,\n\n  // button props\n  icon = DEFAULT_ICON,\n  variant = 'outline',\n  children,\n  ...rest\n}: Props) => {\n  // Icon-only (no text children): the `tooltip` is visual only, not an accessible\n  // name, so fall back to it (when it's a string) or a sensible default. A\n  // consumer-supplied `aria-label` in `rest` still wins.\n  // A non-empty string tooltip names the action; an empty/absent tooltip still\n  // needs a name, so fall back to the default rather than an empty aria-label.\n  const defaultAriaLabel =\n    typeof tooltip === 'string' && tooltip.trim() ? tooltip : DEFAULT_ARIA_LABEL;\n  const ariaLabel = rest['aria-label'] ?? (children == null ? defaultAriaLabel : undefined);\n\n  return (\n    <Clipboard\n      asChild\n      tooltip={tooltip}\n      tooltipPlacement={tooltipPlacement}\n      tooltipVariant={tooltipVariant}\n      text={text}\n    >\n      <Button {...rest} aria-label={ariaLabel} variant={variant} disabled={!text}>\n        {icon}\n        {children}\n      </Button>\n    </Clipboard>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { ButtonInline } from '../../components/Button';\nimport { Clipboard } from '../../components/Clipboard';\nimport { Copy } from '../../icons';\n\ntype ClipboardProps = Pick<\n  ComponentProps<typeof Clipboard>,\n  'text' | 'tooltip' | 'tooltipPlacement' | 'tooltipVariant'\n>;\n\ntype ButtonProps = Omit<ComponentProps<typeof ButtonInline>, 'disabled'>;\n\ntype Props = { hideIcon?: boolean } & ClipboardProps & ButtonProps;\n\nexport const ClipboardInline = ({\n  // clipboard props\n  text,\n  tooltip,\n  tooltipPlacement,\n  tooltipVariant,\n\n  // button props\n  children = 'Copy To Clipboard',\n  hideIcon = false,\n  ...rest\n}: Props) => (\n  <Clipboard\n    asChild\n    text={text}\n    tooltip={tooltip}\n    tooltipPlacement={tooltipPlacement}\n    tooltipVariant={tooltipVariant}\n  >\n    <ButtonInline {...rest} disabled={!text}>\n      {!hideIcon && <Copy className=\"tw:size-4\" />}\n      {children}\n    </ButtonInline>\n  </Clipboard>\n);\n"]}

package/dist/chunk-Q7NWXLCT.js

@@ -0,0 +1,90 @@
+import { cn } from './chunk-JP7PNHLH.js';
+import { cva } from 'class-variance-authority';
+import { useRef, useLayoutEffect, useCallback, Children, Fragment } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/utils/isMac.ts
+var getIsMac = () => {
+  if (typeof navigator !== "undefined" && "userAgentData" in navigator) {
+    const platform = navigator.userAgentData.platform;
+    if (typeof platform === "string") {
+      return platform.toLowerCase() === "macos";
+    }
+  }
+  if (typeof navigator !== "undefined" && typeof navigator.platform === "string") {
+    return navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+  }
+  return false;
+};
+var isMac = getIsMac();
+var kbdVariants = cva(
+  [
+    "tailwindcss-preflight",
+    // style
+    "tw:pointer-events-none",
+    "tw:w-fit",
+    "tw:h-5",
+    "tw:min-w-5",
+    // layout
+    "tw:inline-flex",
+    "tw:items-center",
+    "tw:justify-center",
+    "tw:gap-1",
+    "tw:shrink-0",
+    // spacing
+    "tw:px-1",
+    'tw:[&_svg:not([class*="size-"])]:size-2.5',
+    "tw:text-xs",
+    "tw:font-medium",
+    "tw:rounded"
+  ],
+  {
+    defaultVariants: {
+      variant: "default"
+    },
+    variants: {
+      variant: {
+        default: "tw:bg-muted tw:text-muted-foreground",
+        primary: "tw:bg-white/20 tw:text-white"
+      }
+    }
+  }
+);
+
+// src/utils/escapeStringRegexp.ts
+var escapeStringRegexp = (string) => string.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&").replace(/-/g, "\\x2d");
+var KbdSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx("span", { ...props, className: cn("tw:text-xs tw:text-muted-foreground", className) });
+var KbdGroup = ({ ref, className, children, separator, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    "kbd",
+    {
+      ...props,
+      ref,
+      className: cn("tw:inline-flex", "tw:items-center", "tw:gap-1", className),
+      children: separator ? (
+        // oxlint-disable-next-line react-x/no-children-to-array
+        Children.toArray(children).map((child, index) => (
+          // oxlint-disable-next-line
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            index > 0 && /* @__PURE__ */ jsx(KbdSeparator, { children: separator }),
+            child
+          ] }, index)
+        ))
+      ) : children
+    }
+  );
+};
+var Kbd = ({ children, className, variant, ...rest }) => /* @__PURE__ */ jsx("kbd", { ...rest, className: kbdVariants({ className, variant }), children });
+Kbd.Group = KbdGroup;
+Kbd.Separator = KbdSeparator;
+var useStableCallback = (callback) => {
+  const latestRef = useRef(callback);
+  useLayoutEffect(() => {
+    latestRef.current = callback;
+  }, [callback]);
+  return useCallback((...args) => latestRef.current(...args), []);
+};
+
+export { Kbd, escapeStringRegexp, isMac, kbdVariants, useStableCallback };
+//# sourceMappingURL=chunk-Q7NWXLCT.js.map
+//# sourceMappingURL=chunk-Q7NWXLCT.js.map

package/dist/chunk-Q7NWXLCT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/isMac.ts","../src/components/Kbd/styles.ts","../src/utils/escapeStringRegexp.ts","../src/components/Kbd/KbdSeparator.tsx","../src/components/Kbd/KbdGroup.tsx","../src/components/Kbd/Kbd.tsx","../src/hooks/useStableCallback.ts"],"names":["jsx"],"mappings":"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","file":"chunk-Q7NWXLCT.js","sourcesContent":["// Platform detection\ntype NavigatorUAData = {\n  platform: string;\n  brands: { brand: string; version: string }[];\n  mobile: boolean;\n};\n\nconst getIsMac = (): boolean => {\n  // Modern approach using navigator.userAgentData\n  if (typeof navigator !== 'undefined' && 'userAgentData' in navigator) {\n    const platform = (navigator.userAgentData as NavigatorUAData).platform;\n\n    if (typeof platform === 'string') {\n      return platform.toLowerCase() === 'macos';\n    }\n  }\n\n  if (typeof navigator !== 'undefined' && typeof navigator.platform === 'string') {\n    return navigator.platform.toUpperCase().indexOf('MAC') >= 0;\n  }\n\n  // Server-side rendering fallback\n  return false;\n};\n\nexport const isMac = getIsMac();\n","import { cva } from 'class-variance-authority';\n\nexport const kbdVariants = cva(\n  [\n    'tailwindcss-preflight',\n    // style\n    'tw:pointer-events-none',\n    'tw:w-fit',\n    'tw:h-5',\n    'tw:min-w-5',\n\n    // layout\n    'tw:inline-flex',\n    'tw:items-center',\n    'tw:justify-center',\n    'tw:gap-1',\n    'tw:shrink-0',\n\n    // spacing\n    'tw:px-1',\n    'tw:[&_svg:not([class*=\"size-\"])]:size-2.5',\n\n    'tw:text-xs',\n    'tw:font-medium',\n\n    'tw:rounded',\n  ],\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        default: 'tw:bg-muted tw:text-muted-foreground',\n        primary: 'tw:bg-white/20 tw:text-white',\n      },\n    },\n  },\n);\n","// Escape characters with special meaning either inside or outside character sets.\n// Use a simple backslash escape when it's always valid, and a `\\xnn` escape when the simpler form would be disallowed by Unicode patterns' stricter grammar.\nexport const escapeStringRegexp = (string: string) =>\n  string.replace(/[|\\\\{}()[\\]^$+*?.]/g, '\\\\$&').replace(/-/g, '\\\\x2d');\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'span'>;\n\nexport const KbdSeparator = ({ className, ...props }: Props) => (\n  <span {...props} className={cn('tw:text-xs tw:text-muted-foreground', className)} />\n);\n","import { Children, Fragment } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { KbdSeparator } from './KbdSeparator';\n\ntype Props = { separator?: string } & ComponentProps<'kbd'>;\n\nexport const KbdGroup = ({ ref, className, children, separator, ...props }: Props) => {\n  return (\n    <kbd\n      {...props}\n      ref={ref}\n      className={cn('tw:inline-flex', 'tw:items-center', 'tw:gap-1', className)}\n    >\n      {separator\n        ? // oxlint-disable-next-line react-x/no-children-to-array\n          Children.toArray(children).map((child, index) => (\n            // oxlint-disable-next-line\n            <Fragment key={index}>\n              {index > 0 && <KbdSeparator>{separator}</KbdSeparator>}\n              {child}\n            </Fragment>\n          ))\n        : children}\n    </kbd>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { KbdGroup } from './KbdGroup';\nimport { KbdSeparator } from './KbdSeparator';\nimport { kbdVariants } from './styles';\n\ntype Props = ComponentProps<'kbd'> & VariantProps<typeof kbdVariants>;\n\nexport const Kbd = ({ children, className, variant, ...rest }: Props) => (\n  <kbd {...rest} className={kbdVariants({ className, variant })}>\n    {children}\n  </kbd>\n);\n\nKbd.Group = KbdGroup;\nKbd.Separator = KbdSeparator;\n","import { useCallback, useLayoutEffect, useRef } from 'react';\n\n/**\n * A callback with a permanently stable identity that always sees the latest\n * render's values — for any consumer that keys off the handler's identity: a\n * third-party component that redoes expensive work when it changes, or a\n * memoized context value.\n *\n * React 19.2's `useEffectEvent` does this in one line, but it is scoped to\n * Effects and explicitly not to be passed to another component, which is the\n * whole point here.\n *\n * The swap is a layout effect rather than a passive one so it lands before the\n * browser can paint and accept input against the previous render's handler. It\n * is still an effect, and a child's runs before its parent's — so a consumer\n * calling the returned function from its own layout effect can still see the\n * previous render's closure.\n */\nexport const useStableCallback = <Args extends unknown[], Result>(\n  callback: (...args: Args) => Result,\n): ((...args: Args) => Result) => {\n  const latestRef = useRef(callback);\n\n  useLayoutEffect(() => {\n    latestRef.current = callback;\n  }, [callback]);\n\n  return useCallback((...args: Args) => latestRef.current(...args), []);\n};\n"]}