@verdaccio/ui-components 5.0.0-next-9.24 → 5.0.0-next-9.26

package/README.md

@@ -91,6 +91,26 @@ const App: React.FC = () => {
 ``
 ```
 
+## Development
+
+Storybook runs with `pnpm start` (port 6006). Stories mock the registry API with
+[msw](https://mswjs.io), which serves the requests from a service worker in
+`public/mockServiceWorker.js`.
+
+### Updating msw
+
+The worker file is generated by msw and must match the installed version (`PACKAGE_VERSION` at the
+top of the file). Whenever `msw` changes version in `package.json`:
+
+1. Regenerate the worker from this folder: `npx msw init public`.
+2. Unregister the old worker in the browser, otherwise it keeps serving the previous version: in
+   DevTools open **Application → Service Workers** for `localhost:6006` and click **Unregister**,
+   or run `navigator.serviceWorker.getRegistrations().then((rs) => rs.forEach((r) => r.unregister()))`
+   in the console.
+3. Reload the page (a hard reload, so the new worker is installed) and restart Storybook.
+
+Commit the regenerated `public/mockServiceWorker.js` together with the version bump.
+
 ## Donations
 
 Verdaccio is run by **volunteers**; nobody is working full-time on it. If you find this project to be useful and would like to support its development, consider making a donation - **your logo might end up in this readme.** 😉

package/build/api/use-data.d.ts

@@ -1,4 +1,4 @@
-import type { SWRResponse } from 'swr';
+import type { SWRConfiguration, SWRResponse } from 'swr';
 import type { APIRoute } from '../utils/routes';
 export declare function buildUrl(basePath: string, route: APIRoute, packageName?: string, packageVersion?: string): string;
-export declare function useData<T>(basePath: string, route: APIRoute, packageName?: string, packageVersion?: string): Pick<SWRResponse<T>, 'data' | 'error' | 'isLoading' | 'mutate'>;
+export declare function useData<T>(basePath: string, route: APIRoute, packageName?: string, packageVersion?: string, options?: SWRConfiguration<T>): Pick<SWRResponse<T>, 'data' | 'error' | 'isLoading' | 'mutate'>;

package/build/api/use-data.js

@@ -9,9 +9,9 @@ function buildUrl(basePath, route, packageName, packageVersion) {
 	if (packageVersion) url += `?v=${encodeURIComponent(packageVersion)}`;
 	return url;
 }
-function useData(basePath, route, packageName, packageVersion) {
+function useData(basePath, route, packageName, packageVersion, options) {
 	const url = buildUrl(basePath, route, packageName, packageVersion);
-	const { data, error, isLoading, mutate } = (0, swr.default)(url, () => require_api.default.request(url));
+	const { data, error, isLoading, mutate } = (0, swr.default)(url, () => require_api.default.request(url), options);
 	return {
 		data,
 		error,

package/build/api/use-data.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-data.js","names":["useSWR","API"],"sources":["../../src/api/use-data.ts"],"sourcesContent":["import type { SWRResponse } from 'swr';\nimport useSWR from 'swr';\n\nimport API from '../store/api';\nimport type { APIRoute } from '../utils/routes';\n\nexport function buildUrl(\n  basePath: string,\n  route: APIRoute,\n  packageName?: string,\n  packageVersion?: string\n): string {\n  let url = `${basePath}${route}`;\n  if (packageName) {\n    // encode each path segment (scoped names keep their `/`); characters like\n    // `+` in build-metadata versions would otherwise be decoded as a space.\n    // `@` stays literal: it is path-safe and the npm registry convention —\n    // clients, proxies and test intercepts all expect `/@scope/pkg`\n    url += packageName\n      .split('/')\n      .map((segment) => encodeURIComponent(segment).replace(/%40/g, '@'))\n      .join('/');\n  }\n  if (packageVersion) {\n    url += `?v=${encodeURIComponent(packageVersion)}`;\n  }\n  return url;\n}\n\nexport function useData<T>(\n  basePath: string,\n  route: APIRoute,\n  packageName?: string,\n  packageVersion?: string\n): Pick<SWRResponse<T>, 'data' | 'error' | 'isLoading' | 'mutate'> {\n  const url = buildUrl(basePath, route, packageName, packageVersion);\n\n  const { data, error, isLoading, mutate } = useSWR<T>(url, () => API.request<T>(url));\n\n  return { data, error, isLoading, mutate };\n}\n"],"mappings":";;;;;AAMA,SAAgB,SACd,UACA,OACA,aACA,gBACQ;CACR,IAAI,MAAM,GAAG,WAAW;CACxB,IAAI,aAKF,OAAO,YACJ,MAAM,GAAG,CAAC,CACV,KAAK,YAAY,mBAAmB,OAAO,CAAC,CAAC,QAAQ,QAAQ,GAAG,CAAC,CAAC,CAClE,KAAK,GAAG;CAEb,IAAI,gBACF,OAAO,MAAM,mBAAmB,cAAc;CAEhD,OAAO;AACT;AAEA,SAAgB,QACd,UACA,OACA,aACA,gBACiE;CACjE,MAAM,MAAM,SAAS,UAAU,OAAO,aAAa,cAAc;CAEjE,MAAM,EAAE,MAAM,OAAO,WAAW,YAAA,GAAWA,IAAAA,QAAAA,CAAU,WAAWC,YAAAA,QAAI,QAAW,GAAG,CAAC;CAEnF,OAAO;EAAE;EAAM;EAAO;EAAW;CAAO;AAC1C"}
+{"version":3,"file":"use-data.js","names":["useSWR","API"],"sources":["../../src/api/use-data.ts"],"sourcesContent":["import type { SWRConfiguration, SWRResponse } from 'swr';\nimport useSWR from 'swr';\n\nimport API from '../store/api';\nimport type { APIRoute } from '../utils/routes';\n\nexport function buildUrl(\n  basePath: string,\n  route: APIRoute,\n  packageName?: string,\n  packageVersion?: string\n): string {\n  let url = `${basePath}${route}`;\n  if (packageName) {\n    // encode each path segment (scoped names keep their `/`); characters like\n    // `+` in build-metadata versions would otherwise be decoded as a space.\n    // `@` stays literal: it is path-safe and the npm registry convention —\n    // clients, proxies and test intercepts all expect `/@scope/pkg`\n    url += packageName\n      .split('/')\n      .map((segment) => encodeURIComponent(segment).replace(/%40/g, '@'))\n      .join('/');\n  }\n  if (packageVersion) {\n    url += `?v=${encodeURIComponent(packageVersion)}`;\n  }\n  return url;\n}\n\nexport function useData<T>(\n  basePath: string,\n  route: APIRoute,\n  packageName?: string,\n  packageVersion?: string,\n  options?: SWRConfiguration<T>\n): Pick<SWRResponse<T>, 'data' | 'error' | 'isLoading' | 'mutate'> {\n  const url = buildUrl(basePath, route, packageName, packageVersion);\n\n  const { data, error, isLoading, mutate } = useSWR<T>(url, () => API.request<T>(url), options);\n\n  return { data, error, isLoading, mutate };\n}\n"],"mappings":";;;;;AAMA,SAAgB,SACd,UACA,OACA,aACA,gBACQ;CACR,IAAI,MAAM,GAAG,WAAW;CACxB,IAAI,aAKF,OAAO,YACJ,MAAM,GAAG,CAAC,CACV,KAAK,YAAY,mBAAmB,OAAO,CAAC,CAAC,QAAQ,QAAQ,GAAG,CAAC,CAAC,CAClE,KAAK,GAAG;CAEb,IAAI,gBACF,OAAO,MAAM,mBAAmB,cAAc;CAEhD,OAAO;AACT;AAEA,SAAgB,QACd,UACA,OACA,aACA,gBACA,SACiE;CACjE,MAAM,MAAM,SAAS,UAAU,OAAO,aAAa,cAAc;CAEjE,MAAM,EAAE,MAAM,OAAO,WAAW,YAAA,GAAWA,IAAAA,QAAAA,CAAU,WAAWC,YAAAA,QAAI,QAAW,GAAG,GAAG,OAAO;CAE5F,OAAO;EAAE;EAAM;EAAO;EAAW;CAAO;AAC1C"}

package/build/api/use-data.mjs

@@ -7,9 +7,9 @@ function buildUrl(basePath, route, packageName, packageVersion) {
 	if (packageVersion) url += `?v=${encodeURIComponent(packageVersion)}`;
 	return url;
 }
-function useData(basePath, route, packageName, packageVersion) {
+function useData(basePath, route, packageName, packageVersion, options) {
 	const url = buildUrl(basePath, route, packageName, packageVersion);
-	const { data, error, isLoading, mutate } = useSWR(url, () => api_default.request(url));
+	const { data, error, isLoading, mutate } = useSWR(url, () => api_default.request(url), options);
 	return {
 		data,
 		error,

package/build/api/use-data.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-data.mjs","names":["API"],"sources":["../../src/api/use-data.ts"],"sourcesContent":["import type { SWRResponse } from 'swr';\nimport useSWR from 'swr';\n\nimport API from '../store/api';\nimport type { APIRoute } from '../utils/routes';\n\nexport function buildUrl(\n  basePath: string,\n  route: APIRoute,\n  packageName?: string,\n  packageVersion?: string\n): string {\n  let url = `${basePath}${route}`;\n  if (packageName) {\n    // encode each path segment (scoped names keep their `/`); characters like\n    // `+` in build-metadata versions would otherwise be decoded as a space.\n    // `@` stays literal: it is path-safe and the npm registry convention —\n    // clients, proxies and test intercepts all expect `/@scope/pkg`\n    url += packageName\n      .split('/')\n      .map((segment) => encodeURIComponent(segment).replace(/%40/g, '@'))\n      .join('/');\n  }\n  if (packageVersion) {\n    url += `?v=${encodeURIComponent(packageVersion)}`;\n  }\n  return url;\n}\n\nexport function useData<T>(\n  basePath: string,\n  route: APIRoute,\n  packageName?: string,\n  packageVersion?: string\n): Pick<SWRResponse<T>, 'data' | 'error' | 'isLoading' | 'mutate'> {\n  const url = buildUrl(basePath, route, packageName, packageVersion);\n\n  const { data, error, isLoading, mutate } = useSWR<T>(url, () => API.request<T>(url));\n\n  return { data, error, isLoading, mutate };\n}\n"],"mappings":";;;AAMA,SAAgB,SACd,UACA,OACA,aACA,gBACQ;CACR,IAAI,MAAM,GAAG,WAAW;CACxB,IAAI,aAKF,OAAO,YACJ,MAAM,GAAG,CAAC,CACV,KAAK,YAAY,mBAAmB,OAAO,CAAC,CAAC,QAAQ,QAAQ,GAAG,CAAC,CAAC,CAClE,KAAK,GAAG;CAEb,IAAI,gBACF,OAAO,MAAM,mBAAmB,cAAc;CAEhD,OAAO;AACT;AAEA,SAAgB,QACd,UACA,OACA,aACA,gBACiE;CACjE,MAAM,MAAM,SAAS,UAAU,OAAO,aAAa,cAAc;CAEjE,MAAM,EAAE,MAAM,OAAO,WAAW,WAAW,OAAU,WAAWA,YAAI,QAAW,GAAG,CAAC;CAEnF,OAAO;EAAE;EAAM;EAAO;EAAW;CAAO;AAC1C"}
+{"version":3,"file":"use-data.mjs","names":["API"],"sources":["../../src/api/use-data.ts"],"sourcesContent":["import type { SWRConfiguration, SWRResponse } from 'swr';\nimport useSWR from 'swr';\n\nimport API from '../store/api';\nimport type { APIRoute } from '../utils/routes';\n\nexport function buildUrl(\n  basePath: string,\n  route: APIRoute,\n  packageName?: string,\n  packageVersion?: string\n): string {\n  let url = `${basePath}${route}`;\n  if (packageName) {\n    // encode each path segment (scoped names keep their `/`); characters like\n    // `+` in build-metadata versions would otherwise be decoded as a space.\n    // `@` stays literal: it is path-safe and the npm registry convention —\n    // clients, proxies and test intercepts all expect `/@scope/pkg`\n    url += packageName\n      .split('/')\n      .map((segment) => encodeURIComponent(segment).replace(/%40/g, '@'))\n      .join('/');\n  }\n  if (packageVersion) {\n    url += `?v=${encodeURIComponent(packageVersion)}`;\n  }\n  return url;\n}\n\nexport function useData<T>(\n  basePath: string,\n  route: APIRoute,\n  packageName?: string,\n  packageVersion?: string,\n  options?: SWRConfiguration<T>\n): Pick<SWRResponse<T>, 'data' | 'error' | 'isLoading' | 'mutate'> {\n  const url = buildUrl(basePath, route, packageName, packageVersion);\n\n  const { data, error, isLoading, mutate } = useSWR<T>(url, () => API.request<T>(url), options);\n\n  return { data, error, isLoading, mutate };\n}\n"],"mappings":";;;AAMA,SAAgB,SACd,UACA,OACA,aACA,gBACQ;CACR,IAAI,MAAM,GAAG,WAAW;CACxB,IAAI,aAKF,OAAO,YACJ,MAAM,GAAG,CAAC,CACV,KAAK,YAAY,mBAAmB,OAAO,CAAC,CAAC,QAAQ,QAAQ,GAAG,CAAC,CAAC,CAClE,KAAK,GAAG;CAEb,IAAI,gBACF,OAAO,MAAM,mBAAmB,cAAc;CAEhD,OAAO;AACT;AAEA,SAAgB,QACd,UACA,OACA,aACA,gBACA,SACiE;CACjE,MAAM,MAAM,SAAS,UAAU,OAAO,aAAa,cAAc;CAEjE,MAAM,EAAE,MAAM,OAAO,WAAW,WAAW,OAAU,WAAWA,YAAI,QAAW,GAAG,GAAG,OAAO;CAE5F,OAAO;EAAE;EAAM;EAAO;EAAW;CAAO;AAC1C"}

package/build/components/CopyClipboard/CopyToClipBoard.d.ts

@@ -5,5 +5,6 @@ interface Props {
     dataTestId: string;
     children?: React.ReactNode;
 }
+export declare const COPIED_FEEDBACK_MS = 2000;
 declare function CopyToClipBoard({ text, children, dataTestId, title, ...props }: Props): React.JSX.Element;
 export default CopyToClipBoard;

package/build/components/CopyClipboard/CopyToClipBoard.js

@@ -1,7 +1,10 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_utils = require("./utils.js");
+const require_index = require("../VisuallyHidden/index.js");
 let _emotion_styled = require("@emotion/styled");
 _emotion_styled = require_runtime.__toESM(_emotion_styled);
+let _mui_icons_material_Check = require("@mui/icons-material/Check");
+_mui_icons_material_Check = require_runtime.__toESM(_mui_icons_material_Check);
 let _mui_icons_material_FileCopy = require("@mui/icons-material/FileCopy");
 _mui_icons_material_FileCopy = require_runtime.__toESM(_mui_icons_material_FileCopy);
 let _mui_material_IconButton = require("@mui/material/IconButton");
@@ -13,6 +16,7 @@ react = require_runtime.__toESM(react);
 let react_i18next = require("react-i18next");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/CopyClipboard/CopyToClipBoard.tsx
+var COPIED_FEEDBACK_MS = 2e3;
 var Wrapper = (0, _emotion_styled.default)("div")({
 	display: "flex",
 	alignItems: "center",
@@ -28,29 +32,44 @@ var Content = (0, _emotion_styled.default)("span")(({ theme }) => ({
 }));
 function CopyToClipBoard({ text, children, dataTestId, title, ...props }) {
 	const { t } = (0, react_i18next.useTranslation)();
-	const accessibleName = title ?? t("copy-to-clipboard");
+	const [copied, setCopied] = (0, react.useState)(false);
+	const accessibleName = copied ? t("copy-to-clipboard-done") : title ?? t("copy-to-clipboard");
+	(0, react.useEffect)(() => {
+		if (!copied) return;
+		const timer = setTimeout(() => setCopied(false), COPIED_FEEDBACK_MS);
+		return () => clearTimeout(timer);
+	}, [copied]);
+	const handleCopy = (event) => {
+		require_utils.copyToClipBoardUtility(text)(event).then((ok) => setCopied(ok));
+	};
+	const button = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_IconButton.default, {
+		"aria-label": accessibleName,
+		"data-testid": dataTestId,
+		onClick: handleCopy,
+		size: "small",
+		children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_icons_material_Check.default, {
+			color: "success",
+			fontSize: "small"
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_icons_material_FileCopy.default, { fontSize: "small" })
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Wrapper, {
 		...props,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Content, { children: children ?? text }), title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Tooltip.default, {
-			disableFocusListener: true,
-			title,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_IconButton.default, {
-				"aria-label": accessibleName,
-				"data-testid": dataTestId,
-				onClick: require_utils.copyToClipBoardUtility(text),
-				size: "small",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_icons_material_FileCopy.default, { fontSize: "small" })
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Content, { children: children ?? text }),
+			title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Tooltip.default, {
+				disableFocusListener: true,
+				title: copied ? t("copy-to-clipboard-done") : title,
+				children: button
+			}) : button,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.VisuallyHidden, {
+				"aria-live": "polite",
+				children: copied ? t("copy-to-clipboard-done") : ""
 			})
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_IconButton.default, {
-			"aria-label": accessibleName,
-			"data-testid": dataTestId,
-			onClick: require_utils.copyToClipBoardUtility(text),
-			size: "small",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_icons_material_FileCopy.default, { fontSize: "small" })
-		})]
+		]
 	});
 }
 //#endregion
+exports.COPIED_FEEDBACK_MS = COPIED_FEEDBACK_MS;
 exports.default = CopyToClipBoard;
 
 //# sourceMappingURL=CopyToClipBoard.js.map

package/build/components/CopyClipboard/CopyToClipBoard.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyToClipBoard.js","names":["styled","useTranslation","Tooltip","IconButton","copyToClipBoardUtility","FileCopy"],"sources":["../../../src/components/CopyClipboard/CopyToClipBoard.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport FileCopy from '@mui/icons-material/FileCopy';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { Theme } from '../../Theme';\nimport { copyToClipBoardUtility } from './utils';\n\ninterface Props {\n  text: string;\n  title?: string;\n  dataTestId: string;\n  children?: React.ReactNode;\n}\n\nconst Wrapper = styled('div')({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n});\n\nconst Content = styled('span')<{ theme?: Theme }>(({ theme }) => ({\n  display: 'inline-block',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  height: 'auto',\n  whiteSpace: 'break-spaces',\n  fontSize: theme.fontSize.sm,\n}));\n\nfunction CopyToClipBoard({ text, children, dataTestId, title, ...props }: Props) {\n  const { t } = useTranslation();\n  // without a title the icon button had no accessible name at all\n  const accessibleName = title ?? t('copy-to-clipboard');\n  return (\n    <Wrapper {...props}>\n      <Content>{children ?? text}</Content>\n      {title ? (\n        <Tooltip disableFocusListener={true} title={title}>\n          <IconButton\n            aria-label={accessibleName}\n            data-testid={dataTestId}\n            onClick={copyToClipBoardUtility(text)}\n            size=\"small\"\n          >\n            <FileCopy fontSize=\"small\" />\n          </IconButton>\n        </Tooltip>\n      ) : (\n        <IconButton\n          aria-label={accessibleName}\n          data-testid={dataTestId}\n          onClick={copyToClipBoardUtility(text)}\n          size=\"small\"\n        >\n          <FileCopy fontSize=\"small\" />\n        </IconButton>\n      )}\n    </Wrapper>\n  );\n}\n\nexport default CopyToClipBoard;\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,IAAM,WAAA,GAAUA,gBAAAA,QAAAA,CAAO,KAAK,CAAC,CAAC;CAC5B,SAAS;CACT,YAAY;CACZ,gBAAgB;AAClB,CAAC;AAED,IAAM,WAAA,GAAUA,gBAAAA,QAAAA,CAAO,MAAM,CAAC,EAAqB,EAAE,aAAa;CAChE,SAAS;CACT,UAAU;CACV,cAAc;CACd,QAAQ;CACR,YAAY;CACZ,UAAU,MAAM,SAAS;AAC3B,EAAE;AAEF,SAAS,gBAAgB,EAAE,MAAM,UAAU,YAAY,OAAO,GAAG,SAAgB;CAC/E,MAAM,EAAE,OAAA,GAAMC,cAAAA,eAAAA,CAAe;CAE7B,MAAM,iBAAiB,SAAS,EAAE,mBAAmB;CACrD,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,SAAD;EAAS,GAAI;EAAb,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD,EAAA,UAAU,YAAY,KAAc,CAAA,GACnC,QACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,SAAD;GAAS,sBAAsB;GAAa;GAC1C,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,SAAD;IACE,cAAY;IACZ,eAAa;IACb,SAASC,cAAAA,uBAAuB,IAAI;IACpC,MAAK;IAEL,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,6BAAAA,SAAD,EAAU,UAAS,QAAS,CAAA;GAClB,CAAA;EACL,CAAA,IAET,iBAAA,GAAA,kBAAA,IAAA,CAACF,yBAAAA,SAAD;GACE,cAAY;GACZ,eAAa;GACb,SAASC,cAAAA,uBAAuB,IAAI;GACpC,MAAK;GAEL,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,6BAAAA,SAAD,EAAU,UAAS,QAAS,CAAA;EAClB,CAAA,CAEP;;AAEb"}
+{"version":3,"file":"CopyToClipBoard.js","names":["styled","useTranslation","useState","IconButton","Check","FileCopy","Tooltip","VisuallyHidden"],"sources":["../../../src/components/CopyClipboard/CopyToClipBoard.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Check from '@mui/icons-material/Check';\nimport FileCopy from '@mui/icons-material/FileCopy';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport React, { useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { Theme } from '../../Theme';\nimport { copyToClipBoardUtility } from './utils';\nimport { VisuallyHidden } from '../VisuallyHidden';\n\ninterface Props {\n  text: string;\n  title?: string;\n  dataTestId: string;\n  children?: React.ReactNode;\n}\n\nexport const COPIED_FEEDBACK_MS = 2000;\n\nconst Wrapper = styled('div')({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n});\n\nconst Content = styled('span')<{ theme?: Theme }>(({ theme }) => ({\n  display: 'inline-block',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  height: 'auto',\n  whiteSpace: 'break-spaces',\n  fontSize: theme.fontSize.sm,\n}));\n\nfunction CopyToClipBoard({ text, children, dataTestId, title, ...props }: Props) {\n  const { t } = useTranslation();\n  const [copied, setCopied] = useState(false);\n  // without a title the icon button had no accessible name at all\n  const accessibleName = copied ? t('copy-to-clipboard-done') : (title ?? t('copy-to-clipboard'));\n\n  useEffect(() => {\n    if (!copied) {\n      return;\n    }\n    const timer = setTimeout(() => setCopied(false), COPIED_FEEDBACK_MS);\n    return () => clearTimeout(timer);\n  }, [copied]);\n\n  const handleCopy = (event: React.SyntheticEvent<HTMLElement>) => {\n    // announce the copy only when the clipboard really changed\n    copyToClipBoardUtility(text)(event).then((ok) => setCopied(ok));\n  };\n\n  const button = (\n    <IconButton\n      aria-label={accessibleName}\n      data-testid={dataTestId}\n      onClick={handleCopy}\n      size=\"small\"\n    >\n      {copied ? <Check color=\"success\" fontSize=\"small\" /> : <FileCopy fontSize=\"small\" />}\n    </IconButton>\n  );\n\n  return (\n    <Wrapper {...props}>\n      <Content>{children ?? text}</Content>\n      {title ? (\n        <Tooltip disableFocusListener={true} title={copied ? t('copy-to-clipboard-done') : title}>\n          {button}\n        </Tooltip>\n      ) : (\n        button\n      )}\n      <VisuallyHidden aria-live=\"polite\">\n        {copied ? t('copy-to-clipboard-done') : ''}\n      </VisuallyHidden>\n    </Wrapper>\n  );\n}\n\nexport default CopyToClipBoard;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAmBA,IAAa,qBAAqB;AAElC,IAAM,WAAA,GAAUA,gBAAAA,QAAAA,CAAO,KAAK,CAAC,CAAC;CAC5B,SAAS;CACT,YAAY;CACZ,gBAAgB;AAClB,CAAC;AAED,IAAM,WAAA,GAAUA,gBAAAA,QAAAA,CAAO,MAAM,CAAC,EAAqB,EAAE,aAAa;CAChE,SAAS;CACT,UAAU;CACV,cAAc;CACd,QAAQ;CACR,YAAY;CACZ,UAAU,MAAM,SAAS;AAC3B,EAAE;AAEF,SAAS,gBAAgB,EAAE,MAAM,UAAU,YAAY,OAAO,GAAG,SAAgB;CAC/E,MAAM,EAAE,OAAA,GAAMC,cAAAA,eAAAA,CAAe;CAC7B,MAAM,CAAC,QAAQ,cAAA,GAAaC,MAAAA,SAAAA,CAAS,KAAK;CAE1C,MAAM,iBAAiB,SAAS,EAAE,wBAAwB,IAAK,SAAS,EAAE,mBAAmB;CAE7F,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,CAAC,QACH;EAEF,MAAM,QAAQ,iBAAiB,UAAU,KAAK,GAAG,kBAAkB;EACnE,aAAa,aAAa,KAAK;CACjC,GAAG,CAAC,MAAM,CAAC;CAEX,MAAM,cAAc,UAA6C;EAE/D,cAAA,uBAAuB,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,OAAO,UAAU,EAAE,CAAC;CAChE;CAEA,MAAM,SACJ,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,SAAD;EACE,cAAY;EACZ,eAAa;EACb,SAAS;EACT,MAAK;EAEJ,UAAA,SAAS,iBAAA,GAAA,kBAAA,IAAA,CAACC,0BAAAA,SAAD;GAAO,OAAM;GAAU,UAAS;EAAS,CAAA,IAAI,iBAAA,GAAA,kBAAA,IAAA,CAACC,6BAAAA,SAAD,EAAU,UAAS,QAAS,CAAA;CACzE,CAAA;CAGd,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,SAAD;EAAS,GAAI;EAAb,UAAA;GACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD,EAAA,UAAU,YAAY,KAAc,CAAA;GACnC,QACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,SAAD;IAAS,sBAAsB;IAAM,OAAO,SAAS,EAAE,wBAAwB,IAAI;IAChF,UAAA;GACM,CAAA,IAET;GAEF,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,gBAAD;IAAgB,aAAU;IACvB,UAAA,SAAS,EAAE,wBAAwB,IAAI;GAC1B,CAAA;EACT;;AAEb"}

package/build/components/CopyClipboard/CopyToClipBoard.mjs

@@ -1,12 +1,15 @@
 import { copyToClipBoardUtility } from "./utils.mjs";
+import { VisuallyHidden } from "../VisuallyHidden/index.mjs";
 import styled from "@emotion/styled";
+import Check from "@mui/icons-material/Check";
 import FileCopy from "@mui/icons-material/FileCopy";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
-import "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/CopyClipboard/CopyToClipBoard.tsx
+var COPIED_FEEDBACK_MS = 2e3;
 var Wrapper = styled("div")({
 	display: "flex",
 	alignItems: "center",
@@ -22,29 +25,43 @@ var Content = styled("span")(({ theme }) => ({
 }));
 function CopyToClipBoard({ text, children, dataTestId, title, ...props }) {
 	const { t } = useTranslation();
-	const accessibleName = title ?? t("copy-to-clipboard");
+	const [copied, setCopied] = useState(false);
+	const accessibleName = copied ? t("copy-to-clipboard-done") : title ?? t("copy-to-clipboard");
+	useEffect(() => {
+		if (!copied) return;
+		const timer = setTimeout(() => setCopied(false), COPIED_FEEDBACK_MS);
+		return () => clearTimeout(timer);
+	}, [copied]);
+	const handleCopy = (event) => {
+		copyToClipBoardUtility(text)(event).then((ok) => setCopied(ok));
+	};
+	const button = /* @__PURE__ */ jsx(IconButton, {
+		"aria-label": accessibleName,
+		"data-testid": dataTestId,
+		onClick: handleCopy,
+		size: "small",
+		children: copied ? /* @__PURE__ */ jsx(Check, {
+			color: "success",
+			fontSize: "small"
+		}) : /* @__PURE__ */ jsx(FileCopy, { fontSize: "small" })
+	});
 	return /* @__PURE__ */ jsxs(Wrapper, {
 		...props,
-		children: [/* @__PURE__ */ jsx(Content, { children: children ?? text }), title ? /* @__PURE__ */ jsx(Tooltip, {
-			disableFocusListener: true,
-			title,
-			children: /* @__PURE__ */ jsx(IconButton, {
-				"aria-label": accessibleName,
-				"data-testid": dataTestId,
-				onClick: copyToClipBoardUtility(text),
-				size: "small",
-				children: /* @__PURE__ */ jsx(FileCopy, { fontSize: "small" })
+		children: [
+			/* @__PURE__ */ jsx(Content, { children: children ?? text }),
+			title ? /* @__PURE__ */ jsx(Tooltip, {
+				disableFocusListener: true,
+				title: copied ? t("copy-to-clipboard-done") : title,
+				children: button
+			}) : button,
+			/* @__PURE__ */ jsx(VisuallyHidden, {
+				"aria-live": "polite",
+				children: copied ? t("copy-to-clipboard-done") : ""
 			})
-		}) : /* @__PURE__ */ jsx(IconButton, {
-			"aria-label": accessibleName,
-			"data-testid": dataTestId,
-			onClick: copyToClipBoardUtility(text),
-			size: "small",
-			children: /* @__PURE__ */ jsx(FileCopy, { fontSize: "small" })
-		})]
+		]
 	});
 }
 //#endregion
-export { CopyToClipBoard as default };
+export { COPIED_FEEDBACK_MS, CopyToClipBoard as default };
 
 //# sourceMappingURL=CopyToClipBoard.mjs.map

package/build/components/CopyClipboard/CopyToClipBoard.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CopyToClipBoard.mjs","names":[],"sources":["../../../src/components/CopyClipboard/CopyToClipBoard.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport FileCopy from '@mui/icons-material/FileCopy';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { Theme } from '../../Theme';\nimport { copyToClipBoardUtility } from './utils';\n\ninterface Props {\n  text: string;\n  title?: string;\n  dataTestId: string;\n  children?: React.ReactNode;\n}\n\nconst Wrapper = styled('div')({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n});\n\nconst Content = styled('span')<{ theme?: Theme }>(({ theme }) => ({\n  display: 'inline-block',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  height: 'auto',\n  whiteSpace: 'break-spaces',\n  fontSize: theme.fontSize.sm,\n}));\n\nfunction CopyToClipBoard({ text, children, dataTestId, title, ...props }: Props) {\n  const { t } = useTranslation();\n  // without a title the icon button had no accessible name at all\n  const accessibleName = title ?? t('copy-to-clipboard');\n  return (\n    <Wrapper {...props}>\n      <Content>{children ?? text}</Content>\n      {title ? (\n        <Tooltip disableFocusListener={true} title={title}>\n          <IconButton\n            aria-label={accessibleName}\n            data-testid={dataTestId}\n            onClick={copyToClipBoardUtility(text)}\n            size=\"small\"\n          >\n            <FileCopy fontSize=\"small\" />\n          </IconButton>\n        </Tooltip>\n      ) : (\n        <IconButton\n          aria-label={accessibleName}\n          data-testid={dataTestId}\n          onClick={copyToClipBoardUtility(text)}\n          size=\"small\"\n        >\n          <FileCopy fontSize=\"small\" />\n        </IconButton>\n      )}\n    </Wrapper>\n  );\n}\n\nexport default CopyToClipBoard;\n"],"mappings":";;;;;;;;;AAiBA,IAAM,UAAU,OAAO,KAAK,CAAC,CAAC;CAC5B,SAAS;CACT,YAAY;CACZ,gBAAgB;AAClB,CAAC;AAED,IAAM,UAAU,OAAO,MAAM,CAAC,EAAqB,EAAE,aAAa;CAChE,SAAS;CACT,UAAU;CACV,cAAc;CACd,QAAQ;CACR,YAAY;CACZ,UAAU,MAAM,SAAS;AAC3B,EAAE;AAEF,SAAS,gBAAgB,EAAE,MAAM,UAAU,YAAY,OAAO,GAAG,SAAgB;CAC/E,MAAM,EAAE,MAAM,eAAe;CAE7B,MAAM,iBAAiB,SAAS,EAAE,mBAAmB;CACrD,OACE,qBAAC,SAAD;EAAS,GAAI;EAAb,UAAA,CACE,oBAAC,SAAD,EAAA,UAAU,YAAY,KAAc,CAAA,GACnC,QACC,oBAAC,SAAD;GAAS,sBAAsB;GAAa;GAC1C,UAAA,oBAAC,YAAD;IACE,cAAY;IACZ,eAAa;IACb,SAAS,uBAAuB,IAAI;IACpC,MAAK;IAEL,UAAA,oBAAC,UAAD,EAAU,UAAS,QAAS,CAAA;GAClB,CAAA;EACL,CAAA,IAET,oBAAC,YAAD;GACE,cAAY;GACZ,eAAa;GACb,SAAS,uBAAuB,IAAI;GACpC,MAAK;GAEL,UAAA,oBAAC,UAAD,EAAU,UAAS,QAAS,CAAA;EAClB,CAAA,CAEP;;AAEb"}
+{"version":3,"file":"CopyToClipBoard.mjs","names":[],"sources":["../../../src/components/CopyClipboard/CopyToClipBoard.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport Check from '@mui/icons-material/Check';\nimport FileCopy from '@mui/icons-material/FileCopy';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport React, { useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { Theme } from '../../Theme';\nimport { copyToClipBoardUtility } from './utils';\nimport { VisuallyHidden } from '../VisuallyHidden';\n\ninterface Props {\n  text: string;\n  title?: string;\n  dataTestId: string;\n  children?: React.ReactNode;\n}\n\nexport const COPIED_FEEDBACK_MS = 2000;\n\nconst Wrapper = styled('div')({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n});\n\nconst Content = styled('span')<{ theme?: Theme }>(({ theme }) => ({\n  display: 'inline-block',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  height: 'auto',\n  whiteSpace: 'break-spaces',\n  fontSize: theme.fontSize.sm,\n}));\n\nfunction CopyToClipBoard({ text, children, dataTestId, title, ...props }: Props) {\n  const { t } = useTranslation();\n  const [copied, setCopied] = useState(false);\n  // without a title the icon button had no accessible name at all\n  const accessibleName = copied ? t('copy-to-clipboard-done') : (title ?? t('copy-to-clipboard'));\n\n  useEffect(() => {\n    if (!copied) {\n      return;\n    }\n    const timer = setTimeout(() => setCopied(false), COPIED_FEEDBACK_MS);\n    return () => clearTimeout(timer);\n  }, [copied]);\n\n  const handleCopy = (event: React.SyntheticEvent<HTMLElement>) => {\n    // announce the copy only when the clipboard really changed\n    copyToClipBoardUtility(text)(event).then((ok) => setCopied(ok));\n  };\n\n  const button = (\n    <IconButton\n      aria-label={accessibleName}\n      data-testid={dataTestId}\n      onClick={handleCopy}\n      size=\"small\"\n    >\n      {copied ? <Check color=\"success\" fontSize=\"small\" /> : <FileCopy fontSize=\"small\" />}\n    </IconButton>\n  );\n\n  return (\n    <Wrapper {...props}>\n      <Content>{children ?? text}</Content>\n      {title ? (\n        <Tooltip disableFocusListener={true} title={copied ? t('copy-to-clipboard-done') : title}>\n          {button}\n        </Tooltip>\n      ) : (\n        button\n      )}\n      <VisuallyHidden aria-live=\"polite\">\n        {copied ? t('copy-to-clipboard-done') : ''}\n      </VisuallyHidden>\n    </Wrapper>\n  );\n}\n\nexport default CopyToClipBoard;\n"],"mappings":";;;;;;;;;;;AAmBA,IAAa,qBAAqB;AAElC,IAAM,UAAU,OAAO,KAAK,CAAC,CAAC;CAC5B,SAAS;CACT,YAAY;CACZ,gBAAgB;AAClB,CAAC;AAED,IAAM,UAAU,OAAO,MAAM,CAAC,EAAqB,EAAE,aAAa;CAChE,SAAS;CACT,UAAU;CACV,cAAc;CACd,QAAQ;CACR,YAAY;CACZ,UAAU,MAAM,SAAS;AAC3B,EAAE;AAEF,SAAS,gBAAgB,EAAE,MAAM,UAAU,YAAY,OAAO,GAAG,SAAgB;CAC/E,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAE1C,MAAM,iBAAiB,SAAS,EAAE,wBAAwB,IAAK,SAAS,EAAE,mBAAmB;CAE7F,gBAAgB;EACd,IAAI,CAAC,QACH;EAEF,MAAM,QAAQ,iBAAiB,UAAU,KAAK,GAAG,kBAAkB;EACnE,aAAa,aAAa,KAAK;CACjC,GAAG,CAAC,MAAM,CAAC;CAEX,MAAM,cAAc,UAA6C;EAE/D,uBAAuB,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,OAAO,UAAU,EAAE,CAAC;CAChE;CAEA,MAAM,SACJ,oBAAC,YAAD;EACE,cAAY;EACZ,eAAa;EACb,SAAS;EACT,MAAK;EAEJ,UAAA,SAAS,oBAAC,OAAD;GAAO,OAAM;GAAU,UAAS;EAAS,CAAA,IAAI,oBAAC,UAAD,EAAU,UAAS,QAAS,CAAA;CACzE,CAAA;CAGd,OACE,qBAAC,SAAD;EAAS,GAAI;EAAb,UAAA;GACE,oBAAC,SAAD,EAAA,UAAU,YAAY,KAAc,CAAA;GACnC,QACC,oBAAC,SAAD;IAAS,sBAAsB;IAAM,OAAO,SAAS,EAAE,wBAAwB,IAAI;IAChF,UAAA;GACM,CAAA,IAET;GAEF,oBAAC,gBAAD;IAAgB,aAAU;IACvB,UAAA,SAAS,EAAE,wBAAwB,IAAI;GAC1B,CAAA;EACT;;AAEb"}

package/build/components/CopyClipboard/utils.d.ts

@@ -1,2 +1,3 @@
 import type { SyntheticEvent } from 'react';
-export declare const copyToClipBoardUtility: (str: string) => ((e: SyntheticEvent<HTMLElement>) => void);
+/** Copies `str`; resolves to whether the clipboard actually changed. */
+export declare const copyToClipBoardUtility: (str: string) => ((e: SyntheticEvent<HTMLElement>) => Promise<boolean>);

package/build/components/CopyClipboard/utils.js

@@ -1,6 +1,6 @@
 //#region src/components/CopyClipboard/utils.ts
 function execCommandCopy(str) {
-	if (!document.body) return;
+	if (!document.body) return false;
 	const textarea = document.createElement("textarea");
 	textarea.value = str;
 	textarea.style.position = "fixed";
@@ -8,13 +8,15 @@ function execCommandCopy(str) {
 	textarea.setAttribute("readonly", "");
 	document.body.appendChild(textarea);
 	textarea.select();
-	document.execCommand("copy");
+	const copied = document.execCommand?.("copy") ?? false;
 	document.body.removeChild(textarea);
+	return copied;
 }
+/** Copies `str`; resolves to whether the clipboard actually changed. */
 var copyToClipBoardUtility = (str) => (event) => {
 	event.preventDefault();
-	if (navigator.clipboard?.writeText) navigator.clipboard.writeText(str).catch(() => execCommandCopy(str));
-	else execCommandCopy(str);
+	if (navigator.clipboard?.writeText) return navigator.clipboard.writeText(str).then(() => true, () => execCommandCopy(str));
+	return Promise.resolve(execCommandCopy(str));
 };
 //#endregion
 exports.copyToClipBoardUtility = copyToClipBoardUtility;

package/build/components/CopyClipboard/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../../src/components/CopyClipboard/utils.ts"],"sourcesContent":["import type { SyntheticEvent } from 'react';\n\n// clipboard-api-free fallback: outside a secure context (plain-http deployments,\n// very common for LAN registries) `navigator.clipboard` is undefined. The\n// hidden-textarea approach needs no Selection/Range juggling — and\n// window.getSelection() can legitimately return null.\nfunction execCommandCopy(str: string): void {\n  if (!document.body) {\n    return;\n  }\n  const textarea = document.createElement('textarea');\n  textarea.value = str;\n  // keep it out of sight without display:none (which would prevent selection)\n  textarea.style.position = 'fixed';\n  textarea.style.opacity = '0';\n  textarea.setAttribute('readonly', '');\n  document.body.appendChild(textarea);\n  textarea.select();\n  document.execCommand('copy');\n  document.body.removeChild(textarea);\n}\n\nexport const copyToClipBoardUtility =\n  (str: string): ((e: SyntheticEvent<HTMLElement>) => void) =>\n  (event: SyntheticEvent<HTMLElement>): void => {\n    event.preventDefault();\n\n    if (navigator.clipboard?.writeText) {\n      navigator.clipboard.writeText(str).catch(() => execCommandCopy(str));\n    } else {\n      execCommandCopy(str);\n    }\n  };\n"],"mappings":";AAMA,SAAS,gBAAgB,KAAmB;CAC1C,IAAI,CAAC,SAAS,MACZ;CAEF,MAAM,WAAW,SAAS,cAAc,UAAU;CAClD,SAAS,QAAQ;CAEjB,SAAS,MAAM,WAAW;CAC1B,SAAS,MAAM,UAAU;CACzB,SAAS,aAAa,YAAY,EAAE;CACpC,SAAS,KAAK,YAAY,QAAQ;CAClC,SAAS,OAAO;CAChB,SAAS,YAAY,MAAM;CAC3B,SAAS,KAAK,YAAY,QAAQ;AACpC;AAEA,IAAa,0BACV,SACA,UAA6C;CAC5C,MAAM,eAAe;CAErB,IAAI,UAAU,WAAW,WACvB,UAAU,UAAU,UAAU,GAAG,CAAC,CAAC,YAAY,gBAAgB,GAAG,CAAC;MAEnE,gBAAgB,GAAG;AAEvB"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../../src/components/CopyClipboard/utils.ts"],"sourcesContent":["import type { SyntheticEvent } from 'react';\n\n// clipboard-api-free fallback: outside a secure context (plain-http deployments,\n// very common for LAN registries) `navigator.clipboard` is undefined. The\n// hidden-textarea approach needs no Selection/Range juggling — and\n// window.getSelection() can legitimately return null.\nfunction execCommandCopy(str: string): boolean {\n  if (!document.body) {\n    return false;\n  }\n  const textarea = document.createElement('textarea');\n  textarea.value = str;\n  // keep it out of sight without display:none (which would prevent selection)\n  textarea.style.position = 'fixed';\n  textarea.style.opacity = '0';\n  textarea.setAttribute('readonly', '');\n  document.body.appendChild(textarea);\n  textarea.select();\n  const copied = document.execCommand?.('copy') ?? false;\n  document.body.removeChild(textarea);\n  return copied;\n}\n\n/** Copies `str`; resolves to whether the clipboard actually changed. */\nexport const copyToClipBoardUtility =\n  (str: string): ((e: SyntheticEvent<HTMLElement>) => Promise<boolean>) =>\n  (event: SyntheticEvent<HTMLElement>): Promise<boolean> => {\n    event.preventDefault();\n\n    if (navigator.clipboard?.writeText) {\n      return navigator.clipboard.writeText(str).then(\n        () => true,\n        () => execCommandCopy(str)\n      );\n    }\n    return Promise.resolve(execCommandCopy(str));\n  };\n"],"mappings":";AAMA,SAAS,gBAAgB,KAAsB;CAC7C,IAAI,CAAC,SAAS,MACZ,OAAO;CAET,MAAM,WAAW,SAAS,cAAc,UAAU;CAClD,SAAS,QAAQ;CAEjB,SAAS,MAAM,WAAW;CAC1B,SAAS,MAAM,UAAU;CACzB,SAAS,aAAa,YAAY,EAAE;CACpC,SAAS,KAAK,YAAY,QAAQ;CAClC,SAAS,OAAO;CAChB,MAAM,SAAS,SAAS,cAAc,MAAM,KAAK;CACjD,SAAS,KAAK,YAAY,QAAQ;CAClC,OAAO;AACT;;AAGA,IAAa,0BACV,SACA,UAAyD;CACxD,MAAM,eAAe;CAErB,IAAI,UAAU,WAAW,WACvB,OAAO,UAAU,UAAU,UAAU,GAAG,CAAC,CAAC,WAClC,YACA,gBAAgB,GAAG,CAC3B;CAEF,OAAO,QAAQ,QAAQ,gBAAgB,GAAG,CAAC;AAC7C"}

package/build/components/CopyClipboard/utils.mjs

@@ -1,6 +1,6 @@
 //#region src/components/CopyClipboard/utils.ts
 function execCommandCopy(str) {
-	if (!document.body) return;
+	if (!document.body) return false;
 	const textarea = document.createElement("textarea");
 	textarea.value = str;
 	textarea.style.position = "fixed";
@@ -8,13 +8,15 @@ function execCommandCopy(str) {
 	textarea.setAttribute("readonly", "");
 	document.body.appendChild(textarea);
 	textarea.select();
-	document.execCommand("copy");
+	const copied = document.execCommand?.("copy") ?? false;
 	document.body.removeChild(textarea);
+	return copied;
 }
+/** Copies `str`; resolves to whether the clipboard actually changed. */
 var copyToClipBoardUtility = (str) => (event) => {
 	event.preventDefault();
-	if (navigator.clipboard?.writeText) navigator.clipboard.writeText(str).catch(() => execCommandCopy(str));
-	else execCommandCopy(str);
+	if (navigator.clipboard?.writeText) return navigator.clipboard.writeText(str).then(() => true, () => execCommandCopy(str));
+	return Promise.resolve(execCommandCopy(str));
 };
 //#endregion
 export { copyToClipBoardUtility };

package/build/components/CopyClipboard/utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.mjs","names":[],"sources":["../../../src/components/CopyClipboard/utils.ts"],"sourcesContent":["import type { SyntheticEvent } from 'react';\n\n// clipboard-api-free fallback: outside a secure context (plain-http deployments,\n// very common for LAN registries) `navigator.clipboard` is undefined. The\n// hidden-textarea approach needs no Selection/Range juggling — and\n// window.getSelection() can legitimately return null.\nfunction execCommandCopy(str: string): void {\n  if (!document.body) {\n    return;\n  }\n  const textarea = document.createElement('textarea');\n  textarea.value = str;\n  // keep it out of sight without display:none (which would prevent selection)\n  textarea.style.position = 'fixed';\n  textarea.style.opacity = '0';\n  textarea.setAttribute('readonly', '');\n  document.body.appendChild(textarea);\n  textarea.select();\n  document.execCommand('copy');\n  document.body.removeChild(textarea);\n}\n\nexport const copyToClipBoardUtility =\n  (str: string): ((e: SyntheticEvent<HTMLElement>) => void) =>\n  (event: SyntheticEvent<HTMLElement>): void => {\n    event.preventDefault();\n\n    if (navigator.clipboard?.writeText) {\n      navigator.clipboard.writeText(str).catch(() => execCommandCopy(str));\n    } else {\n      execCommandCopy(str);\n    }\n  };\n"],"mappings":";AAMA,SAAS,gBAAgB,KAAmB;CAC1C,IAAI,CAAC,SAAS,MACZ;CAEF,MAAM,WAAW,SAAS,cAAc,UAAU;CAClD,SAAS,QAAQ;CAEjB,SAAS,MAAM,WAAW;CAC1B,SAAS,MAAM,UAAU;CACzB,SAAS,aAAa,YAAY,EAAE;CACpC,SAAS,KAAK,YAAY,QAAQ;CAClC,SAAS,OAAO;CAChB,SAAS,YAAY,MAAM;CAC3B,SAAS,KAAK,YAAY,QAAQ;AACpC;AAEA,IAAa,0BACV,SACA,UAA6C;CAC5C,MAAM,eAAe;CAErB,IAAI,UAAU,WAAW,WACvB,UAAU,UAAU,UAAU,GAAG,CAAC,CAAC,YAAY,gBAAgB,GAAG,CAAC;MAEnE,gBAAgB,GAAG;AAEvB"}
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../../src/components/CopyClipboard/utils.ts"],"sourcesContent":["import type { SyntheticEvent } from 'react';\n\n// clipboard-api-free fallback: outside a secure context (plain-http deployments,\n// very common for LAN registries) `navigator.clipboard` is undefined. The\n// hidden-textarea approach needs no Selection/Range juggling — and\n// window.getSelection() can legitimately return null.\nfunction execCommandCopy(str: string): boolean {\n  if (!document.body) {\n    return false;\n  }\n  const textarea = document.createElement('textarea');\n  textarea.value = str;\n  // keep it out of sight without display:none (which would prevent selection)\n  textarea.style.position = 'fixed';\n  textarea.style.opacity = '0';\n  textarea.setAttribute('readonly', '');\n  document.body.appendChild(textarea);\n  textarea.select();\n  const copied = document.execCommand?.('copy') ?? false;\n  document.body.removeChild(textarea);\n  return copied;\n}\n\n/** Copies `str`; resolves to whether the clipboard actually changed. */\nexport const copyToClipBoardUtility =\n  (str: string): ((e: SyntheticEvent<HTMLElement>) => Promise<boolean>) =>\n  (event: SyntheticEvent<HTMLElement>): Promise<boolean> => {\n    event.preventDefault();\n\n    if (navigator.clipboard?.writeText) {\n      return navigator.clipboard.writeText(str).then(\n        () => true,\n        () => execCommandCopy(str)\n      );\n    }\n    return Promise.resolve(execCommandCopy(str));\n  };\n"],"mappings":";AAMA,SAAS,gBAAgB,KAAsB;CAC7C,IAAI,CAAC,SAAS,MACZ,OAAO;CAET,MAAM,WAAW,SAAS,cAAc,UAAU;CAClD,SAAS,QAAQ;CAEjB,SAAS,MAAM,WAAW;CAC1B,SAAS,MAAM,UAAU;CACzB,SAAS,aAAa,YAAY,EAAE;CACpC,SAAS,KAAK,YAAY,QAAQ;CAClC,SAAS,OAAO;CAChB,MAAM,SAAS,SAAS,cAAc,MAAM,KAAK;CACjD,SAAS,KAAK,YAAY,QAAQ;CAClC,OAAO;AACT;;AAGA,IAAa,0BACV,SACA,UAAyD;CACxD,MAAM,eAAe;CAErB,IAAI,UAAU,WAAW,WACvB,OAAO,UAAU,UAAU,UAAU,GAAG,CAAC,CAAC,WAClC,YACA,gBAAgB,GAAG,CAC3B;CAEF,OAAO,QAAQ,QAAQ,gBAAgB,GAAG,CAAC;AAC7C"}

package/build/components/DocsLink/DocsLink.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const VERDACCIO_DOCS_URL = "https://verdaccio.org/docs/what-is-verdaccio";
+/** A link to the Verdaccio documentation, marked as opening in a new tab. */
+declare const DocsLink: React.FC<{
+    href?: string;
+    dataTestId?: string;
+}>;
+export default DocsLink;

package/build/components/DocsLink/DocsLink.js

@@ -0,0 +1,40 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.js");
+const require_index = require("../VisuallyHidden/index.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_i18next = require("react-i18next");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _mui_material_Link = require("@mui/material/Link");
+_mui_material_Link = require_runtime.__toESM(_mui_material_Link);
+let _mui_icons_material_OpenInNew = require("@mui/icons-material/OpenInNew");
+_mui_icons_material_OpenInNew = require_runtime.__toESM(_mui_icons_material_OpenInNew);
+//#region src/components/DocsLink/DocsLink.tsx
+var VERDACCIO_DOCS_URL = "https://verdaccio.org/docs/what-is-verdaccio";
+/** A link to the Verdaccio documentation, marked as opening in a new tab. */
+var DocsLink = ({ href = VERDACCIO_DOCS_URL, dataTestId = "docs-link" }) => {
+	const { t } = (0, react_i18next.useTranslation)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Link.default, {
+		"data-testid": dataTestId,
+		href,
+		rel: "noopener noreferrer",
+		sx: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: .5
+		},
+		target: "_blank",
+		children: [
+			t("dialog.docs-link"),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_icons_material_OpenInNew.default, {
+				"aria-hidden": true,
+				fontSize: "small"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.VisuallyHidden, { children: t("dialog.opens-in-new-tab") })
+		]
+	});
+};
+//#endregion
+exports.VERDACCIO_DOCS_URL = VERDACCIO_DOCS_URL;
+exports.default = DocsLink;
+
+//# sourceMappingURL=DocsLink.js.map

package/build/components/DocsLink/DocsLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocsLink.js","names":["useTranslation","Link","OpenInNewIcon","VisuallyHidden"],"sources":["../../../src/components/DocsLink/DocsLink.tsx"],"sourcesContent":["import OpenInNewIcon from '@mui/icons-material/OpenInNew';\nimport Link from '@mui/material/Link';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { VisuallyHidden } from '../VisuallyHidden';\n\nexport const VERDACCIO_DOCS_URL = 'https://verdaccio.org/docs/what-is-verdaccio';\n\n/** A link to the Verdaccio documentation, marked as opening in a new tab. */\nconst DocsLink: React.FC<{ href?: string; dataTestId?: string }> = ({\n  href = VERDACCIO_DOCS_URL,\n  dataTestId = 'docs-link',\n}) => {\n  const { t } = useTranslation();\n  return (\n    <Link\n      data-testid={dataTestId}\n      href={href}\n      rel=\"noopener noreferrer\"\n      sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5 }}\n      target=\"_blank\"\n    >\n      {t('dialog.docs-link')}\n      <OpenInNewIcon aria-hidden={true} fontSize=\"small\" />\n      <VisuallyHidden>{t('dialog.opens-in-new-tab')}</VisuallyHidden>\n    </Link>\n  );\n};\n\nexport default DocsLink;\n"],"mappings":";;;;;;;;;;;AAOA,IAAa,qBAAqB;;AAGlC,IAAM,YAA8D,EAClE,OAAO,oBACP,aAAa,kBACT;CACJ,MAAM,EAAE,OAAA,GAAMA,cAAAA,eAAAA,CAAe;CAC7B,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,mBAAAA,SAAD;EACE,eAAa;EACP;EACN,KAAI;EACJ,IAAI;GAAE,SAAS;GAAe,YAAY;GAAU,KAAK;EAAI;EAC7D,QAAO;EALT,UAAA;GAOG,EAAE,kBAAkB;GACrB,iBAAA,GAAA,kBAAA,IAAA,CAACC,8BAAAA,SAAD;IAAe,eAAa;IAAM,UAAS;GAAS,CAAA;GACpD,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,gBAAD,EAAA,UAAiB,EAAE,yBAAyB,EAAkB,CAAA;EAC1D;;AAEV"}

package/build/components/DocsLink/DocsLink.mjs

@@ -0,0 +1,35 @@
+import { VisuallyHidden } from "../VisuallyHidden/index.mjs";
+import "react";
+import { useTranslation } from "react-i18next";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "@mui/material/Link";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+//#region src/components/DocsLink/DocsLink.tsx
+var VERDACCIO_DOCS_URL = "https://verdaccio.org/docs/what-is-verdaccio";
+/** A link to the Verdaccio documentation, marked as opening in a new tab. */
+var DocsLink = ({ href = VERDACCIO_DOCS_URL, dataTestId = "docs-link" }) => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsxs(Link, {
+		"data-testid": dataTestId,
+		href,
+		rel: "noopener noreferrer",
+		sx: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: .5
+		},
+		target: "_blank",
+		children: [
+			t("dialog.docs-link"),
+			/* @__PURE__ */ jsx(OpenInNewIcon, {
+				"aria-hidden": true,
+				fontSize: "small"
+			}),
+			/* @__PURE__ */ jsx(VisuallyHidden, { children: t("dialog.opens-in-new-tab") })
+		]
+	});
+};
+//#endregion
+export { VERDACCIO_DOCS_URL, DocsLink as default };
+
+//# sourceMappingURL=DocsLink.mjs.map

package/build/components/DocsLink/DocsLink.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocsLink.mjs","names":[],"sources":["../../../src/components/DocsLink/DocsLink.tsx"],"sourcesContent":["import OpenInNewIcon from '@mui/icons-material/OpenInNew';\nimport Link from '@mui/material/Link';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { VisuallyHidden } from '../VisuallyHidden';\n\nexport const VERDACCIO_DOCS_URL = 'https://verdaccio.org/docs/what-is-verdaccio';\n\n/** A link to the Verdaccio documentation, marked as opening in a new tab. */\nconst DocsLink: React.FC<{ href?: string; dataTestId?: string }> = ({\n  href = VERDACCIO_DOCS_URL,\n  dataTestId = 'docs-link',\n}) => {\n  const { t } = useTranslation();\n  return (\n    <Link\n      data-testid={dataTestId}\n      href={href}\n      rel=\"noopener noreferrer\"\n      sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5 }}\n      target=\"_blank\"\n    >\n      {t('dialog.docs-link')}\n      <OpenInNewIcon aria-hidden={true} fontSize=\"small\" />\n      <VisuallyHidden>{t('dialog.opens-in-new-tab')}</VisuallyHidden>\n    </Link>\n  );\n};\n\nexport default DocsLink;\n"],"mappings":";;;;;;;AAOA,IAAa,qBAAqB;;AAGlC,IAAM,YAA8D,EAClE,OAAO,oBACP,aAAa,kBACT;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,qBAAC,MAAD;EACE,eAAa;EACP;EACN,KAAI;EACJ,IAAI;GAAE,SAAS;GAAe,YAAY;GAAU,KAAK;EAAI;EAC7D,QAAO;EALT,UAAA;GAOG,EAAE,kBAAkB;GACrB,oBAAC,eAAD;IAAe,eAAa;IAAM,UAAS;GAAS,CAAA;GACpD,oBAAC,gBAAD,EAAA,UAAiB,EAAE,yBAAyB,EAAkB,CAAA;EAC1D;;AAEV"}

package/build/components/DocsLink/index.d.ts

@@ -0,0 +1 @@
+export { default, VERDACCIO_DOCS_URL } from './DocsLink';

package/build/components/DocsLink/index.js

@@ -0,0 +1,3 @@
+const require_DocsLink = require("./DocsLink.js");
+exports.VERDACCIO_DOCS_URL = require_DocsLink.VERDACCIO_DOCS_URL;
+exports.default = require_DocsLink.default;

package/build/components/DocsLink/index.mjs

@@ -0,0 +1 @@
+export { VERDACCIO_DOCS_URL, default } from "./DocsLink.mjs";

package/build/components/Help/Help.d.ts

@@ -1,3 +1,16 @@
 import React from 'react';
+declare const SETUP_TABS: readonly ['npm', 'pnpm', 'yarn', 'bun', ".npmrc"];
+type SetupTab = (typeof SETUP_TABS)[number];
+/** The one-time command that makes a client use this registry, honouring `web.scope`. */
+export declare function getSetupCommand(tab: SetupTab, scope: string | undefined, registryUrl: string): string;
+/** The markdown that `web.help` sets, with `{{registryUrl}}` filled in. */
+export declare const CustomHelp: React.FC<{
+    markdown: string;
+}>;
+/** The steps to point a client at the registry, log in and publish; shared by the welcome card and the settings. */
+export declare const HelpGuide: React.FC<{
+    withWaitStep?: boolean;
+    labelledBy?: string;
+}>;
 declare const Help: React.FC;
 export default Help;