@synerise/ds-copy-icon 1.0.1

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## 1.0.1 (2025-11-28)
+
+**Note:** Version bump only for package @synerise/ds-copy-icon

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Synerise
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,35 @@
+---
+id: copy-icon
+title: CopyIcon
+---
+
+CopyIcon UI Component
+
+## Installation
+```
+npm i @synerise/ds-copy-icon
+or
+yarn add @synerise/ds-copy-icon
+```
+
+## Usage
+```
+import CopyButton from '@synerise/ds-copy-icon'
+
+<CopyIcon />
+
+```
+
+## Demo
+
+<iframe src="/storybook-static/iframe.html?id=components-copy-icon--default"></iframe>
+
+## API
+
+ Property   | Description                                            | Type                     | Default |
+| --------- | ------------------------------------------------------ | ------------------------ | ------- |
+| texts     | Group of texts before copy and after                   | CopyTooltipTexts         | -       |
+| icon      | custom icon to render                                  | ReactNode                | -       |
+| copyValue | Value to copy after click on icon                      | string                   | -       |
+| placement | prop to set tooltip where need to be                   | TooltipPlacement         | -       |
+| onCopy    | An extra function to invoke on copy button event       | () => void               | -       |

package/dist/CopyIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type CopyIconProps } from './CopyIcon.types';
+declare const CopyIcon: ({ copyValue, texts, onMouseEnter, onMouseLeave, icon, placement, onCopy, ...rest }: CopyIconProps) => React.JSX.Element;
+export default CopyIcon;

package/dist/CopyIcon.js

@@ -0,0 +1,78 @@
+var _excluded = ["copyValue", "texts", "onMouseEnter", "onMouseLeave", "icon", "placement", "onCopy"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import copy from 'copy-to-clipboard';
+import React, { useCallback, useMemo, useState } from 'react';
+import { useIntl } from 'react-intl';
+import Icon, { CopyClipboardM } from '@synerise/ds-icon';
+import Tooltip from '@synerise/ds-tooltip';
+import * as S from './CopyIcon.styles';
+var CopyIcon = function CopyIcon(_ref) {
+  var copyValue = _ref.copyValue,
+    texts = _ref.texts,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave,
+    icon = _ref.icon,
+    placement = _ref.placement,
+    onCopy = _ref.onCopy,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var textsObj = useMemo(function () {
+    return _extends({
+      copiedTooltip: formatMessage({
+        id: 'DS.COPY-ICON.COPIED',
+        defaultMessage: 'Copied!'
+      }),
+      copyTooltip: formatMessage({
+        id: 'DS.COPY-ICON.COPY-VALUE',
+        defaultMessage: 'Copy'
+      })
+    }, texts);
+  }, [texts, formatMessage]);
+  var _useState = useState(textsObj.copyTooltip),
+    tooltipTitle = _useState[0],
+    setTooltipTitle = _useState[1];
+  var _useState2 = useState(false),
+    isCopiedBlock = _useState2[0],
+    setIsCopiedBlock = _useState2[1];
+  var handleCopy = useCallback(function (event) {
+    if (copyValue && copy(copyValue)) {
+      setTooltipTitle(textsObj.copiedTooltip);
+      setIsCopiedBlock(true);
+      setTimeout(function () {
+        setIsCopiedBlock(false);
+        setTooltipTitle(textsObj.copyTooltip);
+      }, 2000);
+      onCopy && onCopy();
+    }
+    if (rest != null && rest.onClick) {
+      rest.onClick(event);
+    }
+  }, [copyValue, textsObj.copiedTooltip, onCopy, rest]);
+  var handleMouseEnter = useCallback(function (event) {
+    event.stopPropagation();
+    if (!isCopiedBlock) {
+      setTooltipTitle(textsObj.copyTooltip);
+    }
+    onMouseEnter && onMouseEnter(event);
+  }, [isCopiedBlock, textsObj, onMouseEnter]);
+  var handleMouseLeave = useCallback(function (event) {
+    event.stopPropagation();
+    onMouseLeave && onMouseLeave(event);
+  }, [onMouseLeave]);
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    placement: placement,
+    title: tooltipTitle
+  }, /*#__PURE__*/React.createElement(S.CopyIcon, _extends({
+    "data-testid": "ds-copy-icon",
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, rest, {
+    onClick: handleCopy
+  }), icon || /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(CopyClipboardM, null),
+    size: 24
+  })));
+};
+export default CopyIcon;

package/dist/CopyIcon.styles.d.ts

@@ -0,0 +1 @@
+export declare const CopyIcon: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/CopyIcon.styles.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+export var CopyIcon = styled.div.withConfig({
+  displayName: "CopyIconstyles__CopyIcon",
+  componentId: "sc-1xzoy5o-0"
+})(["cursor:pointer;color:", ";&:hover{color:", ";}"], function (props) {
+  return props.theme.palette['grey-600'];
+}, function (props) {
+  return props.theme.palette['blue-600'];
+});

package/dist/CopyIcon.types.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+import { type WithHTMLAttributes } from '@synerise/ds-utils';
+export type CopyTooltipTexts = {
+    copyTooltip: ReactNode;
+    copiedTooltip: ReactNode;
+};
+export type TooltipPlacement = 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+export type CopyIconProps = WithHTMLAttributes<HTMLDivElement, {
+    copyValue: string;
+    texts?: Partial<CopyTooltipTexts>;
+    icon?: ReactNode;
+    placement?: TooltipPlacement;
+    onCopy?: () => void;
+}>;

package/dist/CopyIcon.types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './CopyIcon';
+export type { CopyIconProps } from './CopyIcon.types';

package/dist/index.js

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

package/dist/modules.d.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@synerise/ds-copy-icon",
+  "version": "1.0.1",
+  "description": "CopyIcon UI Component for the Synerise Design System",
+  "license": "ISC",
+  "repository": "Synerise/synerise-design",
+  "main": "dist/index.js",
+  "files": [
+    "/dist",
+    "CHANGELOG.md",
+    "README.md",
+    "package.json",
+    "LICENSE.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npm run build:js && npm run build:css && npm run defs",
+    "build:css": "node ../../../scripts/style/less.js",
+    "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
+    "build:watch": "npm run build:js -- --watch",
+    "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
+    "prepublish": "npm run build",
+    "types": "tsc --noEmit",
+    "pack:ci": "npm pack --pack-destination ../../storybook/storybook-static/static",
+    "test": "jest",
+    "test:watch": "npm run test -- --watchAll",
+    "check:circular-dependencies": "madge --circular --extensions ts,tsx,js,jsx --ts-config tsconfig.json src/ --exclude '/dist/'",
+    "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
+  },
+  "sideEffects": [
+    "dist/style/*",
+    "*.less"
+  ],
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@synerise/ds-icon": "^1.9.0",
+    "@synerise/ds-tooltip": "^1.3.1"
+  },
+  "devDependencies": {
+    "@synerise/ds-utils": "^1.5.0"
+  },
+  "peerDependencies": {
+    "@synerise/ds-core": "*",
+    "copy-to-clipboard": "^3.3.1",
+    "react": ">=16.9.0 <= 18.3.1",
+    "react-intl": ">=3.12.0 <= 6.8",
+    "styled-components": "^5.3.3"
+  },
+  "gitHead": "d5bd7fbc9d840ac30e2b79b36c451b486e178445"
+}