@k2b/ui 0.47.0 → 0.49.0

package/dist/browser/actions/CopyButton.js

@@ -1,14 +1,15 @@
 import { template as _$template } from "solid-js/web";
-import { insert as _$insert } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
 import { mergeProps as _$mergeProps } from "solid-js/web";
 import { className as _$className } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
 import { getNextElement as _$getNextElement } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
-var _tmpl$ = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
-  _tmpl$2 = /*#__PURE__*/_$template(`<span>`),
-  _tmpl$3 = /*#__PURE__*/_$template(`<span class=k2b-sr-only aria-live=polite>`);
+var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-sr-only aria-live=polite>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<span class=k2b-copy-button__label><span>`);
 import { copyToClipboard } from "@k2b/stdlib/browser";
 import { createSignal, onCleanup, splitProps } from "solid-js";
 import { useUiMessages } from "../intl/messages";
@@ -44,9 +45,21 @@ export function CopyButton(props) {
     if (resetTimer) clearTimeout(resetTimer);
     resetTimer = setTimeout(() => setCopied(false), local.resetAfter ?? 2000);
   };
-  const visibleLabel = () => copied() ? local.copiedLabel ?? messages().copied : local.label ?? messages().copy;
+  const copyLabel = () => local.label ?? messages().copy;
+  const copiedLabel = () => local.copiedLabel ?? messages().copied;
+  const visibleLabel = () => copied() ? copiedLabel() : copyLabel();
   const icon = () => copied() ? "ti ti-check" : "ti ti-copy";
   const iconOnly = () => local.iconOnly ?? local.label === undefined;
+  // Copied often flashes into a row next to a field; the other label, drawn hidden by CSS, keeps the button's width.
+  const hiddenLabel = () => copied() ? copyLabel() : copiedLabel();
+  const announcement = () => (() => {
+    var _el$ = _$getNextElement(_tmpl$);
+    _$insert(_el$, (() => {
+      var _c$ = _$memo(() => !!copied());
+      return () => _c$() ? visibleLabel() : "";
+    })());
+    return _el$;
+  })();
   const button = tooltip => _$createComponent(Button, _$mergeProps(rest, {
     tooltip: tooltip,
     get disabled() {
@@ -76,24 +89,19 @@ export function CopyButton(props) {
     onClick: copy,
     get children() {
       return [(() => {
-        var _el$ = _$getNextElement(_tmpl$);
-        _$effect(() => _$className(_el$, icon()));
-        return _el$;
-      })(), _$memo(() => _$memo(() => !!!iconOnly())() && (() => {
         var _el$2 = _$getNextElement(_tmpl$2);
-        _$insert(_el$2, visibleLabel);
+        _$effect(() => _$className(_el$2, icon()));
         return _el$2;
+      })(), _$memo(() => _$memo(() => !!!iconOnly())() && (() => {
+        var _el$3 = _$getNextElement(_tmpl$3),
+          _el$4 = _el$3.firstChild;
+        _$insert(_el$4, visibleLabel);
+        _$effect(() => _$setAttribute(_el$3, "data-reserve", hiddenLabel()));
+        return _el$3;
       })())];
     }
   }));
-  return iconOnly() ? [_$memo(() => button(visibleLabel())), (() => {
-    var _el$3 = _$getNextElement(_tmpl$3);
-    _$insert(_el$3, (() => {
-      var _c$ = _$memo(() => !!copied());
-      return () => _c$() ? visibleLabel() : "";
-    })());
-    return _el$3;
-  })()] : button(undefined);
+  return [_$memo(() => button(iconOnly() ? visibleLabel() : undefined)), _$memo(announcement)];
 }
 export default CopyButton;
 //# sourceMappingURL=CopyButton.js.map

package/dist/browser/actions/CopyButton.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["actions/CopyButton.tsx"],"sourcesContent":["import { copyToClipboard } from \"@k2b/stdlib/browser\";\nimport { createSignal, type JSX, onCleanup, splitProps } from \"solid-js\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { Button, type ButtonProps } from \"./Button\";\n\nexport type CopyButtonValue = { text: string; value?: string } | { text?: string; value: string };\n\nexport type CopyButtonProps = CopyButtonValue &\n  Omit<ButtonProps, \"children\" | \"onClick\"> & {\n    label?: string;\n    copiedLabel?: string;\n    iconOnly?: boolean;\n    onCopied?: () => void;\n    onCopyError?: (error: unknown) => void;\n    resetAfter?: number;\n  };\n\nexport async function copyText(\n  text: string,\n  onCopyError?: (error: unknown) => void,\n  copy: (text: string) => Promise<void> = copyToClipboard,\n): Promise<void> {\n  try {\n    await copy(text);\n  } catch (error) {\n    onCopyError?.(error);\n    throw error;\n  }\n}\n\nexport function CopyButton(props: CopyButtonProps): JSX.Element {\n  const messages = useUiMessages();\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"copiedLabel\",\n    \"disabled\",\n    \"iconOnly\",\n    \"label\",\n    \"loading\",\n    \"loadingLabel\",\n    \"onCopied\",\n    \"onCopyError\",\n    \"resetAfter\",\n    \"size\",\n    \"text\",\n    \"type\",\n    \"value\",\n    \"variant\",\n  ]);\n  const [copied, setCopied] = createSignal(false);\n  let resetTimer: ReturnType<typeof setTimeout> | undefined;\n\n  onCleanup(() => {\n    if (resetTimer) clearTimeout(resetTimer);\n  });\n\n  const copy = async () => {\n    // `copyText` reports through `onCopyError` and then rethrows so direct\n    // callers can await it. The click handler is not awaited by anyone, so it\n    // has to absorb the rejection here — otherwise a denied clipboard\n    // permission surfaces as an unhandled rejection despite `onCopyError`.\n    try {\n      await copyText(local.text ?? local.value ?? \"\", local.onCopyError);\n    } catch {\n      return;\n    }\n    setCopied(true);\n    local.onCopied?.();\n    if (resetTimer) clearTimeout(resetTimer);\n    resetTimer = setTimeout(() => setCopied(false), local.resetAfter ?? 2000);\n  };\n\n  const visibleLabel = () => (copied() ? (local.copiedLabel ?? messages().copied) : (local.label ?? messages().copy));\n  const icon = () => (copied() ? \"ti ti-check\" : \"ti ti-copy\");\n  const iconOnly = () => local.iconOnly ?? local.label === undefined;\n  const button = (tooltip?: string) => (\n    <Button\n      {...rest}\n      tooltip={tooltip}\n      disabled={local.disabled}\n      loading={local.loading}\n      loadingLabel={local.loadingLabel}\n      type={local.type ?? \"button\"}\n      class={`k2b-copy-button ${local.class ?? \"\"}`}\n      size={local.size ?? \"sm\"}\n      variant={local.variant ?? \"ghost\"}\n      aria-label={iconOnly() ? visibleLabel() : undefined}\n      onClick={copy}\n    >\n      <i class={icon()} aria-hidden=\"true\" />\n      {!iconOnly() && <span>{visibleLabel()}</span>}\n    </Button>\n  );\n\n  return iconOnly() ? (\n    <>\n      {button(visibleLabel())}\n      <span class=\"k2b-sr-only\" aria-live=\"polite\">\n        {copied() ? visibleLabel() : \"\"}\n      </span>\n    </>\n  ) : (\n    button(undefined)\n  );\n}\n\nexport default CopyButton;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["actions/CopyButton.tsx"],"sourcesContent":["import { copyToClipboard } from \"@k2b/stdlib/browser\";\nimport { createSignal, type JSX, onCleanup, splitProps } from \"solid-js\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { Button, type ButtonProps } from \"./Button\";\n\nexport type CopyButtonValue = { text: string; value?: string } | { text?: string; value: string };\n\nexport type CopyButtonProps = CopyButtonValue &\n  Omit<ButtonProps, \"children\" | \"onClick\"> & {\n    label?: string;\n    copiedLabel?: string;\n    iconOnly?: boolean;\n    onCopied?: () => void;\n    onCopyError?: (error: unknown) => void;\n    resetAfter?: number;\n  };\n\nexport async function copyText(\n  text: string,\n  onCopyError?: (error: unknown) => void,\n  copy: (text: string) => Promise<void> = copyToClipboard,\n): Promise<void> {\n  try {\n    await copy(text);\n  } catch (error) {\n    onCopyError?.(error);\n    throw error;\n  }\n}\n\nexport function CopyButton(props: CopyButtonProps): JSX.Element {\n  const messages = useUiMessages();\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"copiedLabel\",\n    \"disabled\",\n    \"iconOnly\",\n    \"label\",\n    \"loading\",\n    \"loadingLabel\",\n    \"onCopied\",\n    \"onCopyError\",\n    \"resetAfter\",\n    \"size\",\n    \"text\",\n    \"type\",\n    \"value\",\n    \"variant\",\n  ]);\n  const [copied, setCopied] = createSignal(false);\n  let resetTimer: ReturnType<typeof setTimeout> | undefined;\n\n  onCleanup(() => {\n    if (resetTimer) clearTimeout(resetTimer);\n  });\n\n  const copy = async () => {\n    // `copyText` reports through `onCopyError` and then rethrows so direct\n    // callers can await it. The click handler is not awaited by anyone, so it\n    // has to absorb the rejection here — otherwise a denied clipboard\n    // permission surfaces as an unhandled rejection despite `onCopyError`.\n    try {\n      await copyText(local.text ?? local.value ?? \"\", local.onCopyError);\n    } catch {\n      return;\n    }\n    setCopied(true);\n    local.onCopied?.();\n    if (resetTimer) clearTimeout(resetTimer);\n    resetTimer = setTimeout(() => setCopied(false), local.resetAfter ?? 2000);\n  };\n\n  const copyLabel = () => local.label ?? messages().copy;\n  const copiedLabel = () => local.copiedLabel ?? messages().copied;\n  const visibleLabel = () => (copied() ? copiedLabel() : copyLabel());\n  const icon = () => (copied() ? \"ti ti-check\" : \"ti ti-copy\");\n  const iconOnly = () => local.iconOnly ?? local.label === undefined;\n  // Copied often flashes into a row next to a field; the other label, drawn hidden by CSS, keeps the button's width.\n  const hiddenLabel = () => (copied() ? copyLabel() : copiedLabel());\n  const announcement = () => (\n    <span class=\"k2b-sr-only\" aria-live=\"polite\">\n      {copied() ? visibleLabel() : \"\"}\n    </span>\n  );\n  const button = (tooltip?: string) => (\n    <Button\n      {...rest}\n      tooltip={tooltip}\n      disabled={local.disabled}\n      loading={local.loading}\n      loadingLabel={local.loadingLabel}\n      type={local.type ?? \"button\"}\n      class={`k2b-copy-button ${local.class ?? \"\"}`}\n      size={local.size ?? \"sm\"}\n      variant={local.variant ?? \"ghost\"}\n      aria-label={iconOnly() ? visibleLabel() : undefined}\n      onClick={copy}\n    >\n      <i class={icon()} aria-hidden=\"true\" />\n      {!iconOnly() && (\n        <span class=\"k2b-copy-button__label\" data-reserve={hiddenLabel()}>\n          <span>{visibleLabel()}</span>\n        </span>\n      )}\n    </Button>\n  );\n\n  return (\n    <>\n      {button(iconOnly() ? visibleLabel() : undefined)}\n      {announcement()}\n    </>\n  );\n}\n\nexport default CopyButton;\n"],"mappings":"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","ignoreList":[]}