@cube-dev/ui-kit 0.18.0 → 0.18.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @cube-dev/ui-kit
 
+## 0.18.2
+
+### Patch Changes
+
+- [#311](https://github.com/cube-js/cube-ui-kit/pull/311) [`3cf56c8`](https://github.com/cube-js/cube-ui-kit/commit/3cf56c86584cf4435f5d98304791055d4edda9c1) Thanks [@tenphi](https://github.com/tenphi)! - Limit the size of the Field items to avoid overflow in the real layouts.
+
+## 0.18.1
+
+### Patch Changes
+
+- [#308](https://github.com/cube-js/cube-ui-kit/pull/308) [`d044698`](https://github.com/cube-js/cube-ui-kit/commit/d044698a9b8d303b409fad9df4c0493458c38e7d) Thanks [@tenphi](https://github.com/tenphi)! - Fix TrackingProvider api to pass element instead of ref.
+
 ## 0.18.0
 
 ### Minor Changes

package/cjs/_internal/hooks/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.18.0
+ * @cube-dev/ui-kit v0.18.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.18.0
+ * @cube-dev/ui-kit v0.18.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.18.0
+ * @cube-dev/ui-kit v0.18.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.18.0
+ * @cube-dev/ui-kit v0.18.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.18.0
+ * @cube-dev/ui-kit v0.18.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.18.0
+ * @cube-dev/ui-kit v0.18.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.18.0
+ * @cube-dev/ui-kit v0.18.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.18.0
+ * @cube-dev/ui-kit v0.18.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.18.0
+ * @cube-dev/ui-kit v0.18.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.18.0
+ * @cube-dev/ui-kit v0.18.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.18.0
+ * @cube-dev/ui-kit v0.18.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.18.0
+ * @cube-dev/ui-kit v0.18.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.18.0
+ * @cube-dev/ui-kit v0.18.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.18.0
+ * @cube-dev/ui-kit v0.18.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.18.0
+ * @cube-dev/ui-kit v0.18.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.18.0
+ * @cube-dev/ui-kit v0.18.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.18.0
+ * @cube-dev/ui-kit v0.18.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.18.0
+ * @cube-dev/ui-kit v0.18.2
  * Released under the MIT license.
  */
 
@@ -216,19 +216,21 @@ exports.Button = (0, react_1.forwardRef)(function Button(allProps, ref) {
     const isDisabled = props.isDisabled || props.isLoading;
     const isLoading = props.isLoading;
     const isSelected = props.isSelected;
+    children = children || icon || rightIcon ? children : label;
     if (!children) {
         if (icon) {
             if (!label) {
                 (0, warnings_1.accessibilityWarning)('If you provide `icon` property for a Button and do not provide any children then you should specify the `label` property to make sure the Button element stays accessible.');
+                label = 'Unnamed'; // fix to avoid warning in production
             }
         }
         else {
             if (!label) {
                 (0, warnings_1.accessibilityWarning)('If you provide no children for a Button then you should specify the `label` property to make sure the Button element stays accessible.');
+                label = 'Unnamed'; // fix to avoid warning in production
             }
         }
     }
-    children = children || icon || rightIcon ? children : label;
     if (icon) {
         icon = (0, react_1.cloneElement)(icon, {
             'data-element': 'ButtonIcon',
@@ -247,7 +249,7 @@ exports.Button = (0, react_1.forwardRef)(function Button(allProps, ref) {
         'single-icon-only': singleIcon,
         ...mods,
     }), [mods, isDisabled, isLoading, isSelected, singleIcon]);
-    const { actionProps } = (0, use_action_1.useAction)({ ...allProps, isDisabled, mods: modifiers }, ref);
+    const { actionProps } = (0, use_action_1.useAction)({ ...allProps, isDisabled, mods: modifiers, ...(label ? { label } : {}) }, ref);
     const styles = (0, tasty_1.extractStyles)(props, STYLE_PROPS);
     return ((0, jsx_runtime_1.jsxs)(ButtonElement, { ...actionProps, variant: theme, "data-theme": theme, "data-type": type ?? 'secondary', "data-size": size ?? 'medium', styles: styles, children: [icon || isLoading ? !isLoading ? icon : (0, jsx_runtime_1.jsx)(icons_1.LoadingOutlined, {}) : null, children, rightIcon] }));
 });

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.18.0
+ * @cube-dev/ui-kit v0.18.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.18.0
+ * @cube-dev/ui-kit v0.18.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.18.0
+ * @cube-dev/ui-kit v0.18.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.18.0
+ * @cube-dev/ui-kit v0.18.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.18.0
+ * @cube-dev/ui-kit v0.18.2
  * Released under the MIT license.
  */
 
@@ -54,26 +54,26 @@ function parseTo(to) {
 exports.parseTo = parseTo;
 function performClickHandler(evt, { router, to, onPress, tracking }) {
     const { newTab, nativeRoute, href } = parseTo(to);
-    const ref = evt.target;
-    const qa = ref?.getAttribute('data-qa');
+    const element = evt.target;
+    const qa = element?.getAttribute('data-qa');
     onPress?.(evt);
     if (!to) {
-        tracking.event(BUTTON_PRESS_EVENT, { qa }, ref);
+        tracking.event(BUTTON_PRESS_EVENT, { qa }, element);
         return;
     }
     if (evt.shiftKey || evt.metaKey || newTab) {
         openLink(href, true);
-        tracking.event(LINK_PRESS_EVENT, { qa, href, type: 'tab' }, ref);
+        tracking.event(LINK_PRESS_EVENT, { qa, href, type: 'tab' }, element);
         return;
     }
     if (nativeRoute) {
         openLink(href || window.location.href);
-        tracking.event(LINK_PRESS_EVENT, { qa, href, type: 'native' }, ref);
+        tracking.event(LINK_PRESS_EVENT, { qa, href, type: 'native' }, element);
     }
     else if (href && href.startsWith('#')) {
         const id = href.slice(1);
         const element = document.getElementById(id);
-        tracking.event(LINK_PRESS_EVENT, { qa, href, type: 'hash', target: id }, ref);
+        tracking.event(LINK_PRESS_EVENT, { qa, href, type: 'hash', target: id }, element);
         if (element) {
             element.scrollIntoView({
                 behavior: 'smooth',
@@ -84,11 +84,11 @@ function performClickHandler(evt, { router, to, onPress, tracking }) {
         }
     }
     if (router) {
-        tracking.event(LINK_PRESS_EVENT, { qa, href, type: 'router' }, ref);
+        tracking.event(LINK_PRESS_EVENT, { qa, href, type: 'router' }, element);
         router.push(href);
     }
     else if (href) {
-        tracking.event(LINK_PRESS_EVENT, { qa, href, type: 'native' }, ref);
+        tracking.event(LINK_PRESS_EVENT, { qa, href, type: 'native' }, element);
         window.location.href = href;
     }
 }
@@ -105,6 +105,7 @@ const useAction = function useAction({ to, as, htmlType, label, mods, onPress, .
         performClickHandler(evt, { router, to, onPress, tracking });
     });
     let { buttonProps, isPressed } = (0, button_1.useButton)({
+        'aria-label': label,
         ...props,
         onPress: customOnPress,
     }, domRef);
@@ -127,7 +128,6 @@ const useAction = function useAction({ to, as, htmlType, label, mods, onPress, .
                 ...mods,
             },
             ...(0, react_2.mergeProps)(buttonProps, hoverProps, focusProps, customProps, (0, tasty_1.filterBaseProps)(props, FILTER_OPTIONS)),
-            'aria-label': label,
             ref: domRef,
             type: htmlType || 'button',
             rel: as === 'a' && newTab ? 'rel="noopener noreferrer"' : undefined,

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

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

package/cjs/components/content/Title.js

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

package/cjs/components/forms/Checkbox/Checkbox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.18.0
+ * @cube-dev/ui-kit v0.18.2
  * Released under the MIT license.
  */
 
@@ -97,6 +97,7 @@ function Checkbox(props, ref) {
     let { hoverProps, isHovered } = (0, interactions_1.useHover)({ isDisabled });
     let inputRef = (0, react_1.useRef)(null);
     let domRef = (0, utils_1.useFocusableRef)(ref, inputRef);
+    const toggleState = (0, toggle_1.useToggleState)(props);
     let { inputProps } = groupState // eslint-disable-next-line react-hooks/rules-of-hooks
         ? (0, checkbox_1.useCheckboxGroupItem)({
             ...props,
@@ -108,7 +109,12 @@ function Checkbox(props, ref) {
             isRequired: originalProps.isRequired,
             validationState: originalProps.validationState,
         }, groupState, inputRef) // eslint-disable-next-line react-hooks/rules-of-hooks
-        : (0, checkbox_1.useCheckbox)(props, (0, toggle_1.useToggleState)(props), inputRef);
+        : (0, checkbox_1.useCheckbox)({
+            ...props,
+            ...(typeof label === 'string' && label.trim()
+                ? { 'aria-label': label }
+                : {}),
+        }, toggleState, inputRef);
     let markIcon = isIndeterminate ? (0, jsx_runtime_1.jsx)(IndeterminateOutline, {}) : (0, jsx_runtime_1.jsx)(CheckOutlined, {});
     if (groupState) {
         for (let key of ['isSelected', 'defaultSelected', 'isEmphasized']) {

package/cjs/components/forms/Checkbox/CheckboxGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.18.0
+ * @cube-dev/ui-kit v0.18.2
  * Released under the MIT license.
  */
 
@@ -19,13 +19,6 @@ const tasty_1 = require("../../../tasty");
 const FieldWrapper_1 = require("../FieldWrapper");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
 const context_1 = require("./context");
-const WRAPPER_STYLES = {
-    display: 'grid',
-    gridColumns: {
-        '': '1fr',
-        'has-sider': 'max-content 1fr',
-    },
-};
 const CheckGroupElement = (0, tasty_1.tasty)({
     qa: 'CheckboxGroup',
     styles: {
@@ -48,7 +41,7 @@ function CheckboxGroup(props, ref) {
     props = (0, Form_1.useFormProps)(props);
     let { isDisabled, isRequired, necessityIndicator, necessityLabel, label, extra, labelPosition = 'top', validationState, children, orientation = 'vertical', message, description, labelStyles, requiredMark = true, tooltip, labelSuffix, inputStyles, ...otherProps } = props;
     let domRef = (0, utils_1.useDOMRef)(ref);
-    let styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.CONTAINER_STYLES, WRAPPER_STYLES);
+    let styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.CONTAINER_STYLES);
     let state = (0, checkbox_2.useCheckboxGroupState)(props);
     let { groupProps, labelProps } = (0, checkbox_1.useCheckboxGroup)(props, state);
     let radioGroup = ((0, jsx_runtime_1.jsx)(CheckGroupElement, { styles: inputStyles, mods: {

package/cjs/components/forms/Checkbox/context.js

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