@cube-dev/ui-kit 0.24.0 → 0.24.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @cube-dev/ui-kit
 
+## 0.24.2
+
+### Patch Changes
+
+- [#385](https://github.com/cube-js/cube-ui-kit/pull/385) [`b85b0b2`](https://github.com/cube-js/cube-ui-kit/commit/b85b0b260c035dddca39cade68e8875e65095336) Thanks [@tenphi](https://github.com/tenphi)! - Fix styles for the CopyPasteBlock component.
+
+## 0.24.1
+
+### Patch Changes
+
+- [#382](https://github.com/cube-js/cube-ui-kit/pull/382) [`eec5e0e`](https://github.com/cube-js/cube-ui-kit/commit/eec5e0e534f195ec8a3fb47775d1af0bcd8f2aeb) Thanks [@tenphi](https://github.com/tenphi)! - Add `size` property and position style properties for the CopyPasteBlock component.
+
 ## 0.24.0
 
 ### Minor Changes

package/cjs/_internal/hooks/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/_internal/hooks/use-chained-callback.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/_internal/hooks/use-deprecation-warning.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/_internal/hooks/use-effect-once.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/_internal/hooks/use-event.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/_internal/hooks/use-is-first-render.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/_internal/hooks/use-sync-ref.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/_internal/hooks/use-timer/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/_internal/hooks/use-timer/timer.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/_internal/hooks/use-timer/use-timer.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/_internal/hooks/use-update-effect.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/_internal/hooks/use-warn.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/_internal/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/Base.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/Block.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/GlobalStyles.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/GridProvider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/HiddenInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/OpenTrasition.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/Root.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/actions/Action.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/actions/Button/Button.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/actions/Button/Submit.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/actions/Button/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/actions/ButtonGroup/ButtonGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/actions/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/actions/use-action.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/content/ActiveZone/ActiveZone.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/content/Alert/Alert.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/content/Alert/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/content/Alert/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/content/Alert/use-alert.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/content/Avatar/Avatar.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/content/Badge/Badge.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/content/Card/Card.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/content/Content.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/content/CopyPasteBlock/CopyPasteBlock.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 
@@ -23,79 +23,96 @@ const Toasts_1 = require("../../overlays/Toasts");
 const _internal_1 = require("../../../_internal");
 const StyledBlock = (0, tasty_1.tasty)({
     styles: {
+        display: 'grid',
+        flow: 'column',
+        placeContent: 'center space-between',
+        placeItems: 'center stretch',
+        gap: '1x',
         position: 'relative',
         maxWidth: '100%',
         color: 'inherit',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-    },
-});
-const ButtonContainer = (0, tasty_1.tasty)({
-    styles: {
-        position: 'relative',
-        display: 'grid',
-        gridAutoFlow: 'column',
-        margin: '(-1x - 1bw) -1.5x (-1x - 1bw) -1x',
+        padding: '0 1.5x',
+        // height: {
+        //   '': '4.5x',
+        //   '[data-size="small"]': '3.5x',
+        //   '[data-size="large"]': '5.5x',
+        // },
+        userSelect: 'none',
+        Label: {
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        },
     },
 });
 const CopyPasteBlockElement = (0, tasty_1.tasty)(Card_1.Card, {
     qa: 'CopyPasteBlock',
     styles: {
-        display: 'block',
+        display: 'grid',
         fill: '#grey-light',
         radius: '1r',
-        padding: 0,
+        padding: {
+            '': '0 1px',
+            ':focus': '0',
+        },
         color: {
             '': '#dark',
             error: '#danger-text',
         },
         border: {
-            '': true,
-            ':focus': '#purple',
-            'error & :focus': '#danger',
+            '': 'dashed #dark-03',
+            ':focus': '2px dashed #purple-text',
+            error: 'dashed #danger',
         },
-        transition: 'theme',
         cursor: 'pointer',
+        preset: {
+            '': 't3',
+            '[data-size="large"]': 't2',
+        },
+        height: {
+            '': '5x',
+            '[data-size="small"]': '4x',
+            '[data-size="large"]': '6x',
+        },
+        boxSizing: 'border-box',
         Grid: {
             display: 'grid',
             flow: 'row',
-            gridColumns: 'minmax(0, 1fr) auto',
+            gridColumns: 'minmax(0, 1fr) min-content',
+            placeContent: 'stretch',
             width: 'min 20x',
             radius: '1r',
             position: 'relative',
-            overflow: 'hidden',
+        },
+        Shortcut: {
+            display: {
+                '': 'none',
+                ':focus & !error': 'inline',
+            },
         },
     },
 });
-const ActionButton = (0, tasty_1.tasty)(actions_1.Button, {
+const CopyButton = (0, tasty_1.tasty)(actions_1.Button, {
     type: 'clear',
+    icon: (0, jsx_runtime_1.jsx)(icons_1.CopyOutlined, {}, void 0),
+    'aria-label': 'Copy to clipboard',
     styles: {
-        padding: '1x 1.5x',
-        radius: 0,
-        placeSelf: {
-            '': 'none',
-            '!multiline & !with-scroll': 'stretch',
-        },
+        placeSelf: 'stretch',
         border: '#clear',
         outline: {
             '': '#purple-03.0',
             'focused & focus-visible': '#purple-03 inset',
         },
-    },
-});
-const CopyButton = (0, tasty_1.tasty)(ActionButton, {
-    icon: (0, jsx_runtime_1.jsx)(icons_1.CopyOutlined, {}, void 0),
-    'aria-label': 'Copy to clipboard',
-    styles: {
         radius: {
             '': '0 1r 1r 0',
             'multiline | with-scroll': '0 1r 0 0',
         },
+        height: 'auto',
     },
 });
-function CopyPasteBlock(allProps) {
-    const { value = '', onPaste, placeholder, padding = '1.125x 1.5x', title, styles, ...props } = allProps;
+function CopyPasteBlock(allProps, ref) {
+    const { value = '', onPaste, placeholder, title, size = 'medium', ...props } = allProps;
+    const styles = (0, tasty_1.extractStyles)(props, tasty_1.POSITION_STYLES);
     const [error, setError] = (0, react_1.useState)(null);
     const { clipboardProps } = (0, dnd_1.useClipboard)({
         async onPaste(items) {
@@ -137,13 +154,11 @@ function CopyPasteBlock(allProps) {
         toast.success(`${title || 'Text'} copied`);
     }
     const pristineValue = value.replace(/\n/, ' ');
-    return ((0, jsx_runtime_1.jsx)(CopyPasteBlockElement, { mods: { error: !!error }, styles: { preset: 'default', ...styles }, tabIndex: "0", ...props, ...clipboardProps, children: (0, jsx_runtime_1.jsxs)("div", { "data-element": "Grid", children: [(0, jsx_runtime_1.jsx)(StyledBlock, { mods: {
+    return ((0, jsx_runtime_1.jsx)(CopyPasteBlockElement, { ref: ref, mods: { error: !!error }, "data-size": size, styles: styles, tabIndex: "0", ...props, ...clipboardProps, children: (0, jsx_runtime_1.jsxs)("div", { "data-element": "Grid", children: [(0, jsx_runtime_1.jsxs)(StyledBlock, { "data-size": size, mods: {
                         placeholder: !!placeholder || !value,
-                    }, styles: { padding }, children: error != null ? (error || 'Invalid data') : value ? (pristineValue) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [placeholder ? placeholder : 'Select and paste', " ", (0, jsx_runtime_1.jsx)("kbd", { children: "Cmd" }, void 0), " +", ' ', (0, jsx_runtime_1.jsx)("kbd", { children: "V" }, void 0)] }, void 0)) }, void 0), (0, jsx_runtime_1.jsx)(ButtonContainer, { styles: { padding }, children: (0, jsx_runtime_1.jsx)(CopyButton, { isDisabled: !value, "aria-label": `Copy ${title}`, onPress: onCopy }, void 0) }, void 0)] }, void 0) }, void 0));
+                    }, children: [(0, jsx_runtime_1.jsx)("div", { "data-element": "Label", children: error != null ? (error || 'Invalid data') : value ? (pristineValue) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: placeholder ? placeholder : 'Select and paste' }, void 0)) }, void 0), (0, jsx_runtime_1.jsxs)("span", { "data-element": "Shortcut", children: [(0, jsx_runtime_1.jsx)("kbd", { children: "Cmd" }, void 0), " + ", (0, jsx_runtime_1.jsx)("kbd", { children: "V" }, void 0)] }, void 0)] }, void 0), value && !error && ((0, jsx_runtime_1.jsx)(CopyButton, { size: size, "aria-label": `Copy ${title}`, onPress: onCopy }, void 0))] }, void 0) }, void 0));
 }
-const _CopyPasteBlock = Object.assign(CopyPasteBlock, {
-    Button: ActionButton,
-});
+const _CopyPasteBlock = (0, react_1.forwardRef)(CopyPasteBlock);
 exports.CopyPasteBlock = _CopyPasteBlock;
 
         

package/cjs/components/content/CopyPasteBlock/index.js

@@ -0,0 +1,22 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.24.2
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CopyPasteBlock"), exports);
+
+        

package/cjs/components/content/CopySnippet/CopySnippet.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/content/CopySnippet/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/content/Divider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/content/Footer.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/content/Header.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/content/Paragraph.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/content/Placeholder/Placeholder.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/content/PrismCode/PrismCode.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */
 

package/cjs/components/content/Result/Result.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.24.0
+ * @cube-dev/ui-kit v0.24.2
  * Released under the MIT license.
  */