@cube-dev/ui-kit 0.10.10 → 0.10.13

package/es/components/overlays/Modal/Modal.js

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

package/es/components/overlays/Modal/OpenTransition.js

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

package/es/components/overlays/Modal/Overlay.js

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

package/es/components/overlays/Modal/Popover.js

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

package/es/components/overlays/Modal/Tray.js

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

package/es/components/overlays/Modal/Underlay.js

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

package/es/components/overlays/Modal/index.js

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

package/es/components/overlays/Notification/Notification.js

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

package/es/components/overlays/OverlayWrapper.js

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

package/es/components/overlays/Tooltip/Tooltip.js

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

package/es/components/overlays/Tooltip/TooltipProvider.js

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

package/es/components/overlays/Tooltip/TooltipTrigger.js

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

package/es/components/overlays/Tooltip/context.js

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

package/es/components/pickers/ComboBox/ComboBox.js

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

package/es/components/pickers/Menu/Menu.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.10
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 
@@ -18,7 +18,7 @@ import { MenuItem } from './MenuItem';
 import { MenuSection } from './MenuSection';
 import { useMenuContext } from './context';
 function Menu(props, ref) {
-    const { header, footer } = props;
+    const { header, footer, selectionIcon } = props;
     const domRef = useDOMRef(ref);
     const contextProps = useMenuContext();
     const completeProps = mergeProps(contextProps, props);
@@ -38,9 +38,9 @@ function Menu(props, ref) {
     useSyncRef(contextProps, domRef);
     return (_jsxs(StyledMenu, { ...mergeProps(menuProps, completeProps, baseProps), ref: domRef, children: [header && _jsx(StyledMenuHeader, { children: header }, void 0), items.map((item) => {
                 if (item.type === 'section') {
-                    return (_jsx(MenuSection, { item: item, state: state, onAction: completeProps.onAction }, item.key));
+                    return (_jsx(MenuSection, { item: item, state: state, selectionIcon: selectionIcon, onAction: completeProps.onAction }, item.key));
                 }
-                let menuItem = (_jsx(MenuItem, { item: item, state: state, onAction: completeProps.onAction }, item.key));
+                let menuItem = (_jsx(MenuItem, { item: item, state: state, selectionIcon: selectionIcon, onAction: completeProps.onAction }, item.key));
                 if (item.wrapper) {
                     menuItem = item.wrapper(menuItem);
                 }

package/es/components/pickers/Menu/MenuButton.js

@@ -1,13 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.10
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../../actions';
 import { Text } from '../../content/Text';
+import { tasty } from '../../../tasty';
 import { Space } from '../../layout/Space';
 import { CheckOutlined } from '@ant-design/icons';
 const ACTION_BUTTON = {
@@ -34,7 +35,8 @@ const ACTION_BUTTON = {
     shadow: '#clear',
     padding: {
         '': '(0.75x - 1px) (1.5x - 1px)',
-        'selectable & !selected': '(0.75x - 1px) (1.5x - 1px) (0.75x - 1px) (1.5x - 1px + 22px)',
+        'selectable & !selected': '(0.75x - 1px) (1.5x - 1px) (0.75x - 1px) (1.5x - 1px)',
+        'selectionIcon & selectable & !selected': '(0.75x - 1px) (1.5x - 1px) (0.75x - 1px) (1.5x - 1px + 22px)',
     },
     display: 'flex',
     flow: 'row',
@@ -48,12 +50,38 @@ const ACTION_BUTTON = {
         },
     },
 };
+const RadioIcon = tasty({
+    styles: {
+        display: 'flex',
+        width: '1.875x',
+        placeContent: 'center',
+        '&::before': {
+            display: 'block',
+            content: '""',
+            width: '1x',
+            height: '1x',
+            radius: 'round',
+            fill: '#current',
+        },
+    },
+});
 const getPostfix = (postfix) => typeof postfix === 'string' ? (_jsx(Text, { nowrap: true, color: "inherit", "data-element": "Postfix", children: postfix }, void 0)) : (postfix);
+const getSelectionTypeIcon = (selectionIcon) => {
+    switch (selectionIcon) {
+        case 'checkbox':
+            return _jsx(CheckOutlined, {}, void 0);
+        case 'radio':
+            return _jsx(RadioIcon, {}, void 0);
+        default:
+            return null;
+    }
+};
 export function MenuButton({ children, icon, postfix, ...props }) {
-    const { isSelected, isSelectable } = props;
-    const checkIcon = isSelectable && isSelected ? _jsx(CheckOutlined, {}, void 0) : null;
+    const { selectionIcon, isSelected, isSelectable } = props;
+    const checkIcon = isSelectable && isSelected ? getSelectionTypeIcon(selectionIcon) : null;
     const mods = {
         ...props.mods,
+        selectionIcon: !!selectionIcon,
         selectable: isSelectable,
         selected: isSelected,
     };

package/es/components/pickers/Menu/MenuItem.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.10
+ * @cube-dev/ui-kit v0.10.13
  * Released under the MIT license.
  */
 
@@ -16,7 +16,7 @@ import { StyledMenuItem } from './styled';
 import { MenuButton } from './MenuButton';
 /** @private */
 export function MenuItem(props) {
-    const { item, state, isVirtualized, onAction } = props;
+    const { item, state, selectionIcon, isVirtualized, onAction } = props;
     const { onClose, closeOnSelect } = useMenuContext();
     const { rendered, key, props: itemProps } = item;
     const isSelectable = state.selectionManager.selectionMode !== 'none';
@@ -34,7 +34,7 @@ export function MenuItem(props) {
         isVirtualized,
         onAction,
     }, state, ref);
-    let contents = typeof rendered === 'string' ? (_jsx(MenuButton, { ...itemProps, isSelectable: isSelectable, isSelected: isSelected, isDisabled: isDisabled, children: rendered }, void 0)) : (rendered);
+    let contents = typeof rendered === 'string' ? (_jsx(MenuButton, { ...itemProps, selectionIcon: selectionIcon, isSelectable: isSelectable, isSelected: isSelected, isDisabled: isDisabled, children: rendered }, void 0)) : (rendered);
     return (_jsx(FocusRing, { children: _jsx(StyledMenuItem, { ...mergeProps(menuItemProps, hoverProps), ref: ref, mods: {
                 disabled: isDisabled,
                 selected: isSelected,

package/es/components/pickers/Menu/MenuSection.js

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

package/es/components/pickers/Menu/MenuTrigger.js

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

package/es/components/pickers/Menu/context.js

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

package/es/components/pickers/Menu/styled.js

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

package/es/components/pickers/Select/Select.js

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

package/es/components/portal/Portal.js

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

package/es/components/portal/PortalProvider.js

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

package/es/components/portal/index.js

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

package/es/components/portal/storybook/templates/CustomRoot.js

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

package/es/components/portal/storybook/templates/PortalOrder.js

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

package/es/components/portal/storybook/templates/basic.js

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

package/es/components/portal/storybook/templates/index.js

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

package/es/components/portal/types.js

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

package/es/components/portal/usePortal.js

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

package/es/components/status/LoadingAnimation/LoadingAnimation.js

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

package/es/components/status/LoadingAnimation/index.js

@@ -0,0 +1,10 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.10.13
+ * Released under the MIT license.
+ */
+
+export { LoadingAnimation } from './LoadingAnimation';
+
+        

package/es/components/status/Spin/Cube.js

@@ -0,0 +1,190 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.10.13
+ * Released under the MIT license.
+ */
+
+import { memo } from 'react';
+import styled from 'styled-components';
+const fillByPosition = {
+    top: '#7a77ff',
+    right: '#727290',
+    bottom: '#ff6492',
+};
+export const Cube = memo(styled.div.attrs(({ position }) => ({
+    role: 'presentation',
+    style: {
+        '--cube-spin-animation-name': `cube-spin-${position}`,
+        '--cube-spin-fill': fillByPosition[position],
+    },
+})) `
+  --cube-spin-cube-border-width: calc(4 / 100 * var(--cube-spin-size));
+  --cube-spin-cube-border-compensation: calc(
+    -1 * (var(--cube-spin-cube-border-width))
+  );
+  --cube-spin-cube-size: calc(
+    (100% - 2 * var(--cube-spin-cube-border-width)) / 2
+  );
+
+  box-sizing: content-box;
+  position: absolute;
+  top: var(--cube-spin-cube-border-compensation);
+  left: var(--cube-spin-cube-border-compensation);
+  width: var(--cube-spin-cube-size);
+  height: var(--cube-spin-cube-size);
+  border: var(--cube-spin-cube-border-width) solid transparent;
+  overflow: hidden;
+  contain: size layout style paint;
+  pointer-events: none;
+  user-select: none;
+
+  animation-name: var(--cube-spin-animation-name);
+  animation-duration: 2.2s;
+  animation-iteration-count: infinite;
+  animation-timing-function: cubic-bezier(0.5, 0.05, 0.3, 0.95);
+
+  @media (prefers-reduced-motion) {
+    animation-play-state: paused;
+  }
+
+  &::before {
+    --cube-spin-cube-round-radius: calc((4 / 100) * var(--cube-spin-size));
+
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--cube-spin-cube-round-radius);
+
+    background-color: var(--cube-spin-fill);
+  }
+
+  @keyframes cube-spin-top {
+    0% {
+      transform: translate(0%, 0);
+    }
+    8% {
+      transform: translate(100%, 0);
+    }
+    17% {
+      transform: translate(100%, 0);
+    }
+    25% {
+      transform: translate(100%, 0);
+    }
+    33% {
+      transform: translate(100%, 100%);
+    }
+    42% {
+      transform: translate(100%, 100%);
+    }
+    50% {
+      transform: translate(100%, 100%);
+    }
+    58% {
+      transform: translate(0, 100%);
+    }
+    67% {
+      transform: translate(0, 100%);
+    }
+    75% {
+      transform: translate(0, 100%);
+    }
+    83% {
+      transform: translate(0, 0);
+    }
+    92% {
+      transform: translate(0, 0);
+    }
+    100% {
+      transform: translate(0, 0);
+    }
+  }
+
+  @keyframes cube-spin-right {
+    0% {
+      transform: translate(100%, 100%);
+    }
+    8% {
+      transform: translate(100%, 100%);
+    }
+    17% {
+      transform: translate(100%, 100%);
+    }
+    25% {
+      transform: translate(0, 100%);
+    }
+    33% {
+      transform: translate(0, 100%);
+    }
+    42% {
+      transform: translate(0, 100%);
+    }
+    50% {
+      transform: translate(0, 0);
+    }
+    58% {
+      transform: translate(0, 0);
+    }
+    67% {
+      transform: translate(0, 0);
+    }
+    75% {
+      transform: translate(100%, 0);
+    }
+    83% {
+      transform: translate(100%, 0);
+    }
+    92% {
+      transform: translate(100%, 0);
+    }
+    100% {
+      transform: translate(100%, 100%);
+    }
+  }
+
+  @keyframes cube-spin-bottom {
+    0% {
+      transform: translate(0, 100%);
+    }
+    8% {
+      transform: translate(0, 100%);
+    }
+    17% {
+      transform: translate(0, 0);
+    }
+    25% {
+      transform: translate(0, 0);
+    }
+    33% {
+      transform: translate(0, 0);
+    }
+    42% {
+      transform: translate(100%, 0);
+    }
+    50% {
+      transform: translate(100%, 0);
+    }
+    58% {
+      transform: translate(100%, 0);
+    }
+    67% {
+      transform: translate(100%, 100%);
+    }
+    75% {
+      transform: translate(100%, 100%);
+    }
+    83% {
+      transform: translate(100%, 100%);
+    }
+    92% {
+      transform: translate(0, 100%);
+    }
+    100% {
+      transform: translate(0, 100%);
+    }
+  }
+`);
+
+        

package/es/components/status/Spin/InternalSpinner.js

@@ -0,0 +1,26 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.10.13
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { tasty } from '../../../tasty';
+import { Cube } from './Cube';
+import { SpinsContainer } from './SpinsContainer';
+const SpinsBox = tasty({ styles: { position: 'relative', blockSize: '100%' } });
+export const InternalSpinner = memo(function InternalSpinner(props) {
+    const { size } = props;
+    return (
+    // Even though using size as a key resets the animation, it helps safari to resize the cubes.
+    _jsx(SpinsContainer, { ownSize: CUBE_SIZE_MAP[size], children: _jsxs(SpinsBox, { children: [_jsx(Cube, { position: "top" }, void 0), _jsx(Cube, { position: "right" }, void 0), _jsx(Cube, { position: "bottom" }, void 0)] }, void 0) }, size));
+});
+const CUBE_SIZE_MAP = {
+    small: 24,
+    default: 32,
+    large: 48,
+};
+
+