@cube-dev/ui-kit 0.19.0 → 0.20.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @cube-dev/ui-kit
 
+## 0.20.1
+
+### Patch Changes
+
+- [#321](https://github.com/cube-js/cube-ui-kit/pull/321) [`c8784ab`](https://github.com/cube-js/cube-ui-kit/commit/c8784ab98e5b1816d6bdc3f861d22044af9f7f5e) Thanks [@tenphi](https://github.com/tenphi)! - Show the Clear Button in the SearchInput component even if the `suffix` prop provided.
+
+- [#321](https://github.com/cube-js/cube-ui-kit/pull/321) [`c8784ab`](https://github.com/cube-js/cube-ui-kit/commit/c8784ab98e5b1816d6bdc3f861d22044af9f7f5e) Thanks [@tenphi](https://github.com/tenphi)! - Add the `hideText` property to hide parts of `CodeSnippet` text.
+  Add the `actions` property and `CodeSnippet.Button` component to allow adding new actions to the `CodeSnippet` compoonent.
+
+## 0.20.0
+
+### Minor Changes
+
+- [#317](https://github.com/cube-js/cube-ui-kit/pull/317) [`5487b12`](https://github.com/cube-js/cube-ui-kit/commit/5487b12ddcca823a5efc5954244720e1687bc1bf) Thanks [@MrFlashAccount](https://github.com/MrFlashAccount)! - [CUK-5](https://cubedevinc.atlassian.net/browse/CC-1485) Migrate all form components on new `useFieldProps` hook
+
+### Patch Changes
+
+- [#319](https://github.com/cube-js/cube-ui-kit/pull/319) [`a53cedf`](https://github.com/cube-js/cube-ui-kit/commit/a53cedf8ffdc283bc0d280a82689835f210c6c4d) Thanks [@tenphi](https://github.com/tenphi)! - Show the Clear Button in the SearchInput component even if the `suffix` prop provided.
+
+- [#318](https://github.com/cube-js/cube-ui-kit/pull/318) [`e3afdbe`](https://github.com/cube-js/cube-ui-kit/commit/e3afdbe2e872db4f03160ff4d25d28bdeaaf8900) Thanks [@tenphi](https://github.com/tenphi)! - Draw range connection link for RangeSlider component.
+
 ## 0.19.0
 
 ### Minor Changes

package/cjs/_internal/hooks/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.19.0
+ * @cube-dev/ui-kit v0.20.1
  * Released under the MIT license.
  */
 
@@ -12,6 +12,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CopySnippet = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const icons_1 = require("@ant-design/icons");
 const clipboard_copy_1 = __importDefault(require("clipboard-copy"));
 const actions_1 = require("../../actions");
@@ -52,6 +53,9 @@ const StyledBlock = (0, tasty_1.tasty)({
 const ButtonContainer = (0, tasty_1.tasty)({
     styles: {
         position: 'relative',
+        display: 'grid',
+        gridAutoFlow: 'column',
+        margin: '(-1x - 1bw) -1.5x (-1x - 1bw) -1x',
         '&::after': {
             display: {
                 '': 'none',
@@ -60,7 +64,7 @@ const ButtonContainer = (0, tasty_1.tasty)({
             content: '""',
             width: '2x',
             position: 'absolute',
-            left: '-2x',
+            left: '-1x',
             top: 0,
             bottom: 0,
             backgroundImage: 'linear-gradient(to right,rgba(var(--context-fill-color-rgb),0),rgba(var(--context-fill-color-rgb),1))',
@@ -70,6 +74,7 @@ const ButtonContainer = (0, tasty_1.tasty)({
 const CopySnippetElement = (0, tasty_1.tasty)(Card_1.Card, {
     qa: 'CopySnippet',
     styles: {
+        display: 'block',
         fill: '#grey-light',
         radius: '1r',
         border: 0,
@@ -77,7 +82,7 @@ const CopySnippetElement = (0, tasty_1.tasty)(Card_1.Card, {
         Grid: {
             display: 'grid',
             flow: 'row',
-            gridColumns: 'minmax(0, 1fr) 5x',
+            gridColumns: 'minmax(0, 1fr) auto',
             width: 'min 20x',
             radius: '1r',
             position: 'relative',
@@ -85,15 +90,11 @@ const CopySnippetElement = (0, tasty_1.tasty)(Card_1.Card, {
         },
     },
 });
-const CopyButton = (0, tasty_1.tasty)(actions_1.Button, {
+const ActionButton = (0, tasty_1.tasty)(actions_1.Button, {
     type: 'clear',
-    icon: (0, jsx_runtime_1.jsx)(icons_1.CopyOutlined, {}),
     styles: {
         padding: '1x 1.5x',
-        radius: {
-            '': '0 1r 1r 0',
-            'multiline | with-scroll': '0 1r',
-        },
+        radius: 0,
         placeSelf: {
             '': 'none',
             '!multiline & !with-scroll': 'stretch',
@@ -103,31 +104,71 @@ const CopyButton = (0, tasty_1.tasty)(actions_1.Button, {
             '': '#purple-03.0',
             'focused & focus-visible': '#purple-03 inset',
         },
-        position: 'absolute',
-        right: 0,
-        top: 0,
-        zIndex: 1,
     },
 });
+const CopyButton = (0, tasty_1.tasty)(ActionButton, {
+    icon: (0, jsx_runtime_1.jsx)(icons_1.CopyOutlined, {}),
+    'aria-label': 'Copy to clipboard',
+    styles: {
+        radius: {
+            '': '0 1r 1r 0',
+            'multiline | with-scroll': '0 1r 0 0',
+        },
+    },
+});
+const ShowButton = (0, tasty_1.tasty)(ActionButton, {
+    'aria-label': 'Show hidden parts',
+    styles: {
+        radius: 0,
+    },
+});
+// const HIDDEN_SYMBOL = '●';
+const HIDDEN_SYMBOL = '•';
 function CopySnippet(allProps) {
-    const { code = '', title = 'Code example', nowrap, prefix = '', language, showScroll = true, serif, children, padding = '1.125x 1.5x', showOverlay = true, showTooltip = false, styles, ...props } = allProps;
+    const { code = '', title = 'Code example', nowrap, prefix = '', language, showScroll = true, serif, actions, padding = '1.125x 1.5x', showOverlay = true, showTooltip = false, styles, hideText, ...props } = allProps;
     const { toast } = (0, Toasts_1.useToastsApi)();
+    const [showHidden, setShowHidden] = (0, react_1.useState)(false);
     async function onCopy() {
         await (0, clipboard_copy_1.default)(code);
         toast.success(`${title} copied`);
     }
     const pristineCode = code.replace(/\n$/, '');
     const multiline = pristineCode.includes('\n') && !nowrap;
-    const formattedCode = pristineCode
+    let formattedCode = pristineCode
         .split(/\n/g)
         .map((line) => `${prefix}${line} `)
         .join('\n');
-    const Snippet = ((0, jsx_runtime_1.jsx)(CopySnippetElement, { styles: { preset: 'default', ...styles }, ...props, children: (0, jsx_runtime_1.jsxs)("div", { "data-element": "Grid", children: [(0, jsx_runtime_1.jsx)(StyledBlock, { mods: { nowrap, multiline, scroll: showScroll, serif }, styles: { padding }, children: (0, jsx_runtime_1.jsx)(PrismCode_1.PrismCode, { style: { margin: 0, overflow: 'visible' }, code: formattedCode, language: language || 'javascript' }) }), (0, jsx_runtime_1.jsx)(ButtonContainer, { styles: { padding }, mods: { overlay: showOverlay }, children: (0, jsx_runtime_1.jsx)(CopyButton, { label: `Copy ${title}`, mods: { multiline, 'with-scroll': showScroll }, onPress: onCopy }) })] }) }));
+    if (!showHidden) {
+        if (hideText === true) {
+            formattedCode = formattedCode
+                .split('')
+                .map((s) => HIDDEN_SYMBOL)
+                .join('');
+        }
+        else if (typeof hideText === 'string') {
+            formattedCode = formattedCode.replaceAll(hideText, hideText
+                .split('')
+                .map((s) => HIDDEN_SYMBOL)
+                .join(''));
+        }
+        else if (Array.isArray(hideText)) {
+            hideText.forEach((text) => {
+                formattedCode = formattedCode.replaceAll(text, text
+                    .split('')
+                    .map((s) => HIDDEN_SYMBOL)
+                    .join(''));
+            });
+        }
+    }
+    const Snippet = ((0, jsx_runtime_1.jsx)(CopySnippetElement, { styles: { preset: 'default', ...styles }, ...props, children: (0, jsx_runtime_1.jsxs)("div", { "data-element": "Grid", children: [(0, jsx_runtime_1.jsx)(StyledBlock, { mods: { nowrap, multiline, scroll: showScroll, serif }, styles: { padding }, children: (0, jsx_runtime_1.jsx)(PrismCode_1.PrismCode, { style: { margin: 0, overflow: 'visible' }, code: formattedCode, language: language || 'javascript' }) }), (0, jsx_runtime_1.jsxs)(ButtonContainer, { styles: { padding }, mods: { overlay: showOverlay }, children: [actions, hideText && ((0, jsx_runtime_1.jsx)(ShowButton, { icon: showHidden ? (0, jsx_runtime_1.jsx)(icons_1.EyeInvisibleOutlined, {}) : (0, jsx_runtime_1.jsx)(icons_1.EyeOutlined, {}), mods: { multiline, withScroll: showScroll }, onPress: () => setShowHidden(!showHidden) })), (0, jsx_runtime_1.jsx)(CopyButton, { label: `Copy ${title}`, mods: { multiline, withScroll: showScroll, hidden: !!hideText }, onPress: onCopy })] })] }) }));
     if (showTooltip) {
         return ((0, jsx_runtime_1.jsxs)(TooltipTrigger_1.TooltipTrigger, { children: [(0, jsx_runtime_1.jsx)(ActionElement, { children: Snippet }), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { children: formattedCode })] }));
     }
     return Snippet;
 }
-exports.CopySnippet = CopySnippet;
+const _CopySnippet = Object.assign(CopySnippet, {
+    Button: ActionButton,
+});
+exports.CopySnippet = _CopySnippet;
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * 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.19.0
+ * @cube-dev/ui-kit v0.20.1
  * Released under the MIT license.
  */
 

package/cjs/components/content/Skeleton/Skeleton.js

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

package/cjs/components/content/Tag/Tag.js

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

package/cjs/components/content/Text.js

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