react-cheminfo 0.27.0 → 0.28.0

package/lib/clipboard/ui/CopyableValue.d.ts

@@ -3,7 +3,7 @@ import type { ReactElement, ReactNode } from 'react';
 export interface CopyableValueProps {
     /** What the value is, written above it, e.g. `InChIKey`. */
     label: string;
-    /** The value itself, which is also what the button copies. */
+    /** The value itself, which is what a click on it copies. */
     value: string;
     /**
      * A longer explanation of the label, shown on hover.
@@ -22,8 +22,9 @@ export interface CopyableValueProps {
      */
     maxHeight?: number | string;
     /**
-     * What the pointer and a screen reader are told the button does.
-     * @default `Copy the ${label}`
+     * What the pointer and a screen reader are told, replacing the title built
+     * from the label and the value.
+     * @default undefined — `Copy the ${label} (${value})`
      */
     copyTitle?: string;
     /**
@@ -38,14 +39,16 @@ export interface CopyableValueProps {
     className?: string;
 }
 /**
- * One read-only value, named, with the button that copies it.
+ * One read-only value, named, copied by clicking it.
  *
- * A derived notation — a SMILES, an InChIKey, an accession — is only useful
- * somewhere else, so a click on the value or on its button puts it on the
- * clipboard. An empty value reads as the missing marker and offers nothing to
- * copy.
+ * A derived notation — a SMILES, an InChIKey, an accession, a computed energy
+ * — is only useful somewhere else, so the value is the button that copies it:
+ * the cursor carries a clipboard over it, a click or `Enter` puts it on the
+ * clipboard, and a tick confirms. Nothing is drawn beside the label, which
+ * names the value and no more. An empty value reads as the missing marker and
+ * offers nothing to copy.
  * @param props - See {@link CopyableValueProps}.
- * @returns The labelled value and its copy button.
+ * @returns The labelled value.
  */
 export declare function CopyableValue(props: CopyableValueProps): ReactElement;
 //# sourceMappingURL=CopyableValue.d.ts.map

package/lib/clipboard/ui/CopyableValue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CopyableValue.d.ts","sourceRoot":"","sources":["../../../src/clipboard/ui/CopyableValue.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUpE,0DAA0D;AAC1D,MAAM,WAAW,kBAAkB;IACjC,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CAmDrE"}
+{"version":3,"file":"CopyableValue.d.ts","sourceRoot":"","sources":["../../../src/clipboard/ui/CopyableValue.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASpE,0DAA0D;AAC1D,MAAM,WAAW,kBAAkB;IACjC,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CA0CrE"}

package/lib/clipboard/ui/CopyableValue.js

@@ -2,32 +2,28 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MISSING_VALUE } from "../../format/core/missing.js";
 import { TOKEN } from "../../tokens/core/familyTokens.js";
 import { ClickToCopy } from "./ClickToCopy.js";
-import { CopyButton } from "./CopyButton.js";
 const DEFAULT_BLOCK_HEIGHT = 160;
 /**
- * One read-only value, named, with the button that copies it.
+ * One read-only value, named, copied by clicking it.
  *
- * A derived notation — a SMILES, an InChIKey, an accession — is only useful
- * somewhere else, so a click on the value or on its button puts it on the
- * clipboard. An empty value reads as the missing marker and offers nothing to
- * copy.
+ * A derived notation — a SMILES, an InChIKey, an accession, a computed energy
+ * — is only useful somewhere else, so the value is the button that copies it:
+ * the cursor carries a clipboard over it, a click or `Enter` puts it on the
+ * clipboard, and a tick confirms. Nothing is drawn beside the label, which
+ * names the value and no more. An empty value reads as the missing marker and
+ * offers nothing to copy.
  * @param props - See {@link CopyableValueProps}.
- * @returns The labelled value and its copy button.
+ * @returns The labelled value.
  */
 export function CopyableValue(props) {
-    const { label, value, hint, block = false, maxHeight = DEFAULT_BLOCK_HEIGHT, copyTitle = `Copy the ${label}`, children, className, } = props;
+    const { label, value, hint, block = false, maxHeight = DEFAULT_BLOCK_HEIGHT, copyTitle, children, className, } = props;
     const isEmpty = value === '';
     return (_jsxs("div", { className: className === undefined
             ? 'copyable-value'
-            : `copyable-value ${className}`, children: [_jsxs("div", { style: HEADER_STYLE, children: [_jsx("span", { className: "copyable-value__label", style: hint === undefined ? LABEL_STYLE : HINTED_LABEL_STYLE, title: hint, children: label }), _jsx(CopyButton, { content: value, title: copyTitle, disabled: isEmpty, minimal: true, small: true })] }), _jsx(ClickToCopy, { as: "code", value: value, label: label, focusable: false, disabled: isEmpty, className: "copyable-value__value", style: block ? { ...BLOCK_VALUE_STYLE, maxHeight } : VALUE_STYLE, children: isEmpty ? MISSING_VALUE : value }), children] }));
+            : `copyable-value ${className}`, children: [_jsx("span", { className: "copyable-value__label", style: hint === undefined ? LABEL_STYLE : HINTED_LABEL_STYLE, title: hint, children: label }), _jsx(ClickToCopy, { as: "code", value: value, label: label, title: copyTitle, disabled: isEmpty, className: "copyable-value__value", style: block ? { ...BLOCK_VALUE_STYLE, maxHeight } : VALUE_STYLE, children: isEmpty ? MISSING_VALUE : value }), children] }));
 }
-const HEADER_STYLE = {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    gap: 8,
-};
 const LABEL_STYLE = {
+    display: 'block',
     color: TOKEN.textMuted,
     fontSize: 12,
     fontWeight: 600,

package/lib/clipboard/ui/CopyableValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyableValue.js","sourceRoot":"","sources":["../../../src/clipboard/ui/CopyableValue.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAC;AAE9C,MAAM,oBAAoB,GAAG,GAAG,CAAC;AAyCjC;;;;;;;;;GASG;AACH,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EACJ,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAK,GAAG,KAAK,EACb,SAAS,GAAG,oBAAoB,EAChC,SAAS,GAAG,YAAY,KAAK,EAAE,EAC/B,QAAQ,EACR,SAAS,GACV,GAAG,KAAK,CAAC;IACV,MAAM,OAAO,GAAG,KAAK,KAAK,EAAE,CAAC;IAE7B,OAAO,CACL,eACE,SAAS,EACP,SAAS,KAAK,SAAS;YACrB,CAAC,CAAC,gBAAgB;YAClB,CAAC,CAAC,kBAAkB,SAAS,EAAE,aAGnC,eAAK,KAAK,EAAE,YAAY,aACtB,eACE,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,kBAAkB,EAC5D,KAAK,EAAE,IAAI,YAEV,KAAK,GACD,EACP,KAAC,UAAU,IACT,OAAO,EAAE,KAAK,EACd,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,OAAO,EACjB,OAAO,QACP,KAAK,SACL,IACE,EACN,KAAC,WAAW,IACV,EAAE,EAAC,MAAM,EACT,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,KAAK,EAChB,QAAQ,EAAE,OAAO,EACjB,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,GAAG,iBAAiB,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,WAAW,YAE/D,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,GACpB,EACb,QAAQ,IACL,CACP,CAAC;AACJ,CAAC;AAED,MAAM,YAAY,GAAG;IACnB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,eAAe;IAC/B,GAAG,EAAE,CAAC;CAC0B,CAAC;AAEnC,MAAM,WAAW,GAAG;IAClB,KAAK,EAAE,KAAK,CAAC,SAAS;IACtB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,GAAG;CACiB,CAAC;AAEnC,MAAM,kBAAkB,GAAG;IACzB,GAAG,WAAW;IACd,MAAM,EAAE,MAAM;CACkB,CAAC;AAEnC,MAAM,WAAW,GAAG;IAClB,OAAO,EAAE,OAAO;IAChB,UAAU,EAAE,gDAAgD;IAC5D,QAAQ,EAAE,EAAE;IACZ,YAAY,EAAE,UAAU;CACQ,CAAC;AAEnC,MAAM,iBAAiB,GAAG;IACxB,GAAG,WAAW;IACd,UAAU,EAAE,KAAK;IACjB,YAAY,EAAE,QAAQ;IACtB,QAAQ,EAAE,MAAM;CACgB,CAAC"}
+{"version":3,"file":"CopyableValue.js","sourceRoot":"","sources":["../../../src/clipboard/ui/CopyableValue.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAC;AAEhD,MAAM,oBAAoB,GAAG,GAAG,CAAC;AA0CjC;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EACJ,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAK,GAAG,KAAK,EACb,SAAS,GAAG,oBAAoB,EAChC,SAAS,EACT,QAAQ,EACR,SAAS,GACV,GAAG,KAAK,CAAC;IACV,MAAM,OAAO,GAAG,KAAK,KAAK,EAAE,CAAC;IAE7B,OAAO,CACL,eACE,SAAS,EACP,SAAS,KAAK,SAAS;YACrB,CAAC,CAAC,gBAAgB;YAClB,CAAC,CAAC,kBAAkB,SAAS,EAAE,aAGnC,eACE,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,kBAAkB,EAC5D,KAAK,EAAE,IAAI,YAEV,KAAK,GACD,EACP,KAAC,WAAW,IACV,EAAE,EAAC,MAAM,EACT,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,OAAO,EACjB,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,GAAG,iBAAiB,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,WAAW,YAE/D,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,GACpB,EACb,QAAQ,IACL,CACP,CAAC;AACJ,CAAC;AAED,MAAM,WAAW,GAAG;IAClB,OAAO,EAAE,OAAO;IAChB,KAAK,EAAE,KAAK,CAAC,SAAS;IACtB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,GAAG;CACiB,CAAC;AAEnC,MAAM,kBAAkB,GAAG;IACzB,GAAG,WAAW;IACd,MAAM,EAAE,MAAM;CACkB,CAAC;AAEnC,MAAM,WAAW,GAAG;IAClB,OAAO,EAAE,OAAO;IAChB,UAAU,EAAE,gDAAgD;IAC5D,QAAQ,EAAE,EAAE;IACZ,YAAY,EAAE,UAAU;CACQ,CAAC;AAEnC,MAAM,iBAAiB,GAAG;IACxB,GAAG,WAAW;IACd,UAAU,EAAE,KAAK;IACjB,YAAY,EAAE,QAAQ;IACtB,QAAQ,EAAE,MAAM;CACgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cheminfo",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "license": "MIT",
   "description": "React components, hooks and framework-free helpers shared by the cheminfo sites: site chrome, citations, sharing, routing, pedagogy, charts, and the structure, orbital and 3D molecule viewers",
   "author": "Luc Patiny",

package/src/clipboard/ui/CopyableValue.tsx

@@ -4,7 +4,6 @@ import { MISSING_VALUE } from '../../format/core/missing.ts';
 import { TOKEN } from '../../tokens/core/familyTokens.ts';
 
 import { ClickToCopy } from './ClickToCopy.tsx';
-import { CopyButton } from './CopyButton.tsx';
 
 const DEFAULT_BLOCK_HEIGHT = 160;
 
@@ -12,7 +11,7 @@ const DEFAULT_BLOCK_HEIGHT = 160;
 export interface CopyableValueProps {
   /** What the value is, written above it, e.g. `InChIKey`. */
   label: string;
-  /** The value itself, which is also what the button copies. */
+  /** The value itself, which is what a click on it copies. */
   value: string;
   /**
    * A longer explanation of the label, shown on hover.
@@ -31,8 +30,9 @@ export interface CopyableValueProps {
    */
   maxHeight?: number | string;
   /**
-   * What the pointer and a screen reader are told the button does.
-   * @default `Copy the ${label}`
+   * What the pointer and a screen reader are told, replacing the title built
+   * from the label and the value.
+   * @default undefined — `Copy the ${label} (${value})`
    */
   copyTitle?: string;
   /**
@@ -48,14 +48,16 @@ export interface CopyableValueProps {
 }
 
 /**
- * One read-only value, named, with the button that copies it.
+ * One read-only value, named, copied by clicking it.
  *
- * A derived notation — a SMILES, an InChIKey, an accession — is only useful
- * somewhere else, so a click on the value or on its button puts it on the
- * clipboard. An empty value reads as the missing marker and offers nothing to
- * copy.
+ * A derived notation — a SMILES, an InChIKey, an accession, a computed energy
+ * — is only useful somewhere else, so the value is the button that copies it:
+ * the cursor carries a clipboard over it, a click or `Enter` puts it on the
+ * clipboard, and a tick confirms. Nothing is drawn beside the label, which
+ * names the value and no more. An empty value reads as the missing marker and
+ * offers nothing to copy.
  * @param props - See {@link CopyableValueProps}.
- * @returns The labelled value and its copy button.
+ * @returns The labelled value.
  */
 export function CopyableValue(props: CopyableValueProps): ReactElement {
   const {
@@ -64,7 +66,7 @@ export function CopyableValue(props: CopyableValueProps): ReactElement {
     hint,
     block = false,
     maxHeight = DEFAULT_BLOCK_HEIGHT,
-    copyTitle = `Copy the ${label}`,
+    copyTitle,
     children,
     className,
   } = props;
@@ -78,27 +80,18 @@ export function CopyableValue(props: CopyableValueProps): ReactElement {
           : `copyable-value ${className}`
       }
     >
-      <div style={HEADER_STYLE}>
-        <span
-          className="copyable-value__label"
-          style={hint === undefined ? LABEL_STYLE : HINTED_LABEL_STYLE}
-          title={hint}
-        >
-          {label}
-        </span>
-        <CopyButton
-          content={value}
-          title={copyTitle}
-          disabled={isEmpty}
-          minimal
-          small
-        />
-      </div>
+      <span
+        className="copyable-value__label"
+        style={hint === undefined ? LABEL_STYLE : HINTED_LABEL_STYLE}
+        title={hint}
+      >
+        {label}
+      </span>
       <ClickToCopy
         as="code"
         value={value}
         label={label}
-        focusable={false}
+        title={copyTitle}
         disabled={isEmpty}
         className="copyable-value__value"
         style={block ? { ...BLOCK_VALUE_STYLE, maxHeight } : VALUE_STYLE}
@@ -110,14 +103,8 @@ export function CopyableValue(props: CopyableValueProps): ReactElement {
   );
 }
 
-const HEADER_STYLE = {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  gap: 8,
-} as const satisfies CSSProperties;
-
 const LABEL_STYLE = {
+  display: 'block',
   color: TOKEN.textMuted,
   fontSize: 12,
   fontWeight: 600,