@pingux/astro 2.194.0 → 2.195.0-alpha.0

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -3188,6 +3188,7 @@ declare const _default: {
     };
     sizes: {
         avatar: {
+            xs: string;
             sm: string;
             md: string;
             xmd: string;
@@ -3202,6 +3203,7 @@ declare const _default: {
             xl: string;
         };
         avatarFontSize: {
+            xs: any;
             sm: any;
             md: any;
             xmd: string;
@@ -5397,6 +5399,17 @@ declare const _default: {
             };
         };
         iconWrapper: {
+            xs: {
+                '&.is-circle': {
+                    borderRadius: string;
+                };
+                borderRadius: string;
+                minHeight: string;
+                minWidth: string;
+                height: string;
+                width: string;
+                fontSize: any;
+            };
             sm: {
                 '&.is-circle': {
                     borderRadius: string;
@@ -5406,7 +5419,7 @@ declare const _default: {
                 minWidth: string;
                 height: string;
                 width: string;
-                p: string;
+                fontSize: any;
             };
             md: {
                 '&.is-circle': {
@@ -5417,7 +5430,7 @@ declare const _default: {
                 minWidth: string;
                 height: string;
                 width: string;
-                p: string;
+                fontSize: any;
             };
             lg: {
                 '&.is-circle': {
@@ -5428,7 +5441,18 @@ declare const _default: {
                 minWidth: string;
                 height: string;
                 width: string;
-                p: string;
+                fontSize: any;
+            };
+            xl: {
+                '&.is-circle': {
+                    borderRadius: string;
+                };
+                borderRadius: string;
+                minHeight: string;
+                minWidth: string;
+                height: string;
+                width: string;
+                fontSize: any;
             };
         };
         listBox: {

package/lib/cjs/styles/themes/next-gen/sizes.d.ts

@@ -1,5 +1,6 @@
 declare const _default: {
     avatar: {
+        xs: string;
         sm: string;
         md: string;
         xmd: string;
@@ -14,6 +15,7 @@ declare const _default: {
         xl: string;
     };
     avatarFontSize: {
+        xs: any;
         sm: any;
         md: any;
         xmd: string;

package/lib/cjs/styles/themes/next-gen/sizes.js

@@ -12,13 +12,6 @@ var sideNav = {
   halfWidth: "".concat(halfSidenavWidth, "px")
 };
 var fontSizes = _onyxTokens.astroTokens["default"]['font-size'];
-var avatar = {
-  sm: "".concat(_onyxTokens.astroTokens.size.avatar.sm, "px"),
-  md: '32px',
-  xmd: '44px',
-  lg: "".concat(_onyxTokens.astroTokens.size.avatar.lg, "px"),
-  xl: "".concat(_onyxTokens.astroTokens.size.avatar.xl, "px")
-};
 var avatarLogo = {
   sm: '14px',
   md: '20px',
@@ -26,7 +19,16 @@ var avatarLogo = {
   lg: '44px',
   xl: '54px'
 };
+var avatar = {
+  xs: "".concat(_onyxTokens.astroTokens.size.avatar.xs, "px"),
+  sm: "".concat(_onyxTokens.astroTokens.size.avatar.sm, "px"),
+  md: "".concat(_onyxTokens.astroTokens.size.avatar.md, "px"),
+  xmd: '44px',
+  lg: "".concat(_onyxTokens.astroTokens.size.avatar.lg, "px"),
+  xl: "".concat(_onyxTokens.astroTokens.size.avatar.xl, "px")
+};
 var avatarFontSize = {
+  xs: fontSizes.avatar.xs,
   sm: fontSizes.avatar.sm,
   md: fontSizes.avatar.md,
   xmd: '18px',

package/lib/cjs/styles/themes/next-gen/variants/iconWrapper.d.ts

@@ -1,4 +1,15 @@
 declare const _default: {
+    xs: {
+        '&.is-circle': {
+            borderRadius: string;
+        };
+        borderRadius: string;
+        minHeight: string;
+        minWidth: string;
+        height: string;
+        width: string;
+        fontSize: any;
+    };
     sm: {
         '&.is-circle': {
             borderRadius: string;
@@ -8,7 +19,7 @@ declare const _default: {
         minWidth: string;
         height: string;
         width: string;
-        p: string;
+        fontSize: any;
     };
     md: {
         '&.is-circle': {
@@ -19,7 +30,7 @@ declare const _default: {
         minWidth: string;
         height: string;
         width: string;
-        p: string;
+        fontSize: any;
     };
     lg: {
         '&.is-circle': {
@@ -30,7 +41,18 @@ declare const _default: {
         minWidth: string;
         height: string;
         width: string;
-        p: string;
+        fontSize: any;
+    };
+    xl: {
+        '&.is-circle': {
+            borderRadius: string;
+        };
+        borderRadius: string;
+        minHeight: string;
+        minWidth: string;
+        height: string;
+        width: string;
+        fontSize: any;
     };
 };
 export default _default;

package/lib/cjs/styles/themes/next-gen/variants/iconWrapper.js

@@ -14,6 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _sizes = _interopRequireDefault(require("../sizes"));
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var circle = {
@@ -22,29 +23,45 @@ var circle = {
   }
 };
 var iconWrapper = {
+  xs: _objectSpread({
+    borderRadius: '.25rem',
+    minHeight: _sizes["default"].avatar.xs,
+    minWidth: _sizes["default"].avatar.xs,
+    height: _sizes["default"].avatar.xs,
+    width: _sizes["default"].avatar.xs,
+    fontSize: _sizes["default"].avatarFontSize.xs
+  }, circle),
   sm: _objectSpread({
-    borderRadius: '4px',
-    minHeight: '32px',
-    minWidth: '32px',
-    height: '32px',
-    width: '32px',
-    p: '7px'
+    borderRadius: '.25rem',
+    minHeight: _sizes["default"].avatar.sm,
+    minWidth: _sizes["default"].avatar.sm,
+    height: _sizes["default"].avatar.sm,
+    width: _sizes["default"].avatar.sm,
+    fontSize: _sizes["default"].avatarFontSize.sm
   }, circle),
   md: _objectSpread({
-    borderRadius: '4px',
-    minHeight: '48px',
-    minWidth: '48px',
-    height: '48px',
-    width: '48px',
-    p: '12px'
+    borderRadius: '.25rem',
+    minHeight: _sizes["default"].avatar.md,
+    minWidth: _sizes["default"].avatar.md,
+    height: _sizes["default"].avatar.md,
+    width: _sizes["default"].avatar.md,
+    fontSize: _sizes["default"].avatarFontSize.md
   }, circle),
   lg: _objectSpread({
-    borderRadius: '16px',
-    minHeight: '104px',
-    minWidth: '104px',
-    height: '104px',
-    width: '104px',
-    p: '28px'
+    borderRadius: '.25rem',
+    minHeight: _sizes["default"].avatar.lg,
+    minWidth: _sizes["default"].avatar.lg,
+    height: _sizes["default"].avatar.lg,
+    width: _sizes["default"].avatar.lg,
+    fontSize: _sizes["default"].avatarFontSize.lg
+  }, circle),
+  xl: _objectSpread({
+    borderRadius: '.25rem',
+    minHeight: _sizes["default"].avatar.xl,
+    minWidth: _sizes["default"].avatar.xl,
+    height: _sizes["default"].avatar.xl,
+    width: _sizes["default"].avatar.xl,
+    fontSize: _sizes["default"].avatarFontSize.xl
   }, circle)
 };
 var _default = exports["default"] = _objectSpread({}, iconWrapper);

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -756,6 +756,17 @@ declare const _default: {
         };
     };
     iconWrapper: {
+        xs: {
+            '&.is-circle': {
+                borderRadius: string;
+            };
+            borderRadius: string;
+            minHeight: string;
+            minWidth: string;
+            height: string;
+            width: string;
+            fontSize: any;
+        };
         sm: {
             '&.is-circle': {
                 borderRadius: string;
@@ -765,7 +776,7 @@ declare const _default: {
             minWidth: string;
             height: string;
             width: string;
-            p: string;
+            fontSize: any;
         };
         md: {
             '&.is-circle': {
@@ -776,7 +787,7 @@ declare const _default: {
             minWidth: string;
             height: string;
             width: string;
-            p: string;
+            fontSize: any;
         };
         lg: {
             '&.is-circle': {
@@ -787,7 +798,18 @@ declare const _default: {
             minWidth: string;
             height: string;
             width: string;
-            p: string;
+            fontSize: any;
+        };
+        xl: {
+            '&.is-circle': {
+                borderRadius: string;
+            };
+            borderRadius: string;
+            minHeight: string;
+            minWidth: string;
+            height: string;
+            width: string;
+            fontSize: any;
         };
     };
     listBox: {

package/lib/components/Badge/Badge.styles.js

@@ -54,7 +54,15 @@ var selectedItemBadge = _objectSpread(_objectSpread({}, multivaluesBadge), {}, {
   bg: '#4462ED !important',
   py: 3,
   pr: 0,
-  my: 3
+  my: 3,
+  maxWidth: '200px',
+  '& span': {
+    mr: '5px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    flex: '1 1 0%'
+  }
 });
 var readOnlyBadge = _objectSpread(_objectSpread({}, multivaluesBadge), {}, {
   p: 2.54,

package/lib/components/IconWrapper/IconWrapper.js

@@ -53,7 +53,9 @@ var IconWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
     sx: _objectSpread({
       backgroundColor: "iconWrapper.wrapper.".concat(finalColor)
     }, sx),
-    className: classNames
+    className: classNames,
+    justifyContent: "center",
+    alignItems: "center"
   }, wrapperProps), ___EmotionJSX(Icon, _extends({
     icon: icon,
     size: sizeProps.size,

package/lib/components/IconWrapper/IconWrapper.stories.js

@@ -12,7 +12,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _co
 import React from 'react';
 import DeleteIcon from '@pingux/mdi-react/DeleteIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { IconWrapper } from '../../index';
+import { Box, IconWrapper } from '../../index';
 import IconWrapperReadme from './IconWrapper.mdx';
 import { iconWrapperArgTypes } from './iconWrapperAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -38,4 +38,85 @@ export default {
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(IconWrapper, args);
+};
+export var Sizes = function Sizes() {
+  return ___EmotionJSX(Box, {
+    gap: "md",
+    isRow: true,
+    alignItems: "center"
+  }, ___EmotionJSX(IconWrapper, {
+    icon: DeleteIcon,
+    color: "cyan",
+    size: "xs",
+    title: {
+      name: 'extra small'
+    }
+  }), ___EmotionJSX(IconWrapper, {
+    icon: DeleteIcon,
+    color: "cyan",
+    size: "sm",
+    title: {
+      name: 'small'
+    }
+  }), ___EmotionJSX(IconWrapper, {
+    icon: DeleteIcon,
+    color: "cyan",
+    size: "md",
+    title: {
+      name: 'medium'
+    }
+  }), ___EmotionJSX(IconWrapper, {
+    icon: DeleteIcon,
+    color: "cyan",
+    size: "lg",
+    title: {
+      name: 'large'
+    }
+  }), ___EmotionJSX(IconWrapper, {
+    icon: DeleteIcon,
+    color: "cyan",
+    size: "xl",
+    title: {
+      name: 'extra large'
+    }
+  }));
+};
+export var IsCircle = function IsCircle() {
+  return ___EmotionJSX(Box, {
+    gap: "md",
+    isRow: true,
+    alignItems: "center"
+  }, ___EmotionJSX(IconWrapper, {
+    icon: DeleteIcon,
+    color: "cyan",
+    size: "xs",
+    isCircle: true,
+    title: {
+      name: 'extra small circle'
+    }
+  }), ___EmotionJSX(IconWrapper, {
+    icon: DeleteIcon,
+    color: "cyan",
+    size: "sm",
+    isCircle: true,
+    title: {
+      name: 'small circle'
+    }
+  }), ___EmotionJSX(IconWrapper, {
+    icon: DeleteIcon,
+    color: "cyan",
+    size: "md",
+    isCircle: true,
+    title: {
+      name: 'medium circle'
+    }
+  }), ___EmotionJSX(IconWrapper, {
+    icon: DeleteIcon,
+    color: "cyan",
+    size: "lg",
+    isCircle: true,
+    title: {
+      name: 'large circle'
+    }
+  }));
 };

package/lib/components/MultivaluesField/BadgeLabelTooltip.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { useRef } from 'react';
+import { mergeProps } from 'react-aria';
+import Clear from '@pingux/mdi-react/CloseIcon';
+import { useHover } from '@react-aria/interactions';
+import { Badge, Box, Icon, IconButton } from '../..';
+import TooltipTrigger, { Tooltip } from '../TooltipTrigger';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var BADGE_TOOLTIP_CHAR_THRESHOLD = 25;
+var BadgeLabelTooltip = function BadgeLabelTooltip(_ref) {
+  var _item$badgeProps;
+  var item = _ref.item,
+    index = _ref.index,
+    deleteItem = _ref.deleteItem,
+    closeBadgeRefs = _ref.closeBadgeRefs;
+  var isLong = item.name.length > BADGE_TOOLTIP_CHAR_THRESHOLD;
+  var _useHover = useHover({}),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
+  var textProps = mergeProps(((_item$badgeProps = item.badgeProps) === null || _item$badgeProps === void 0 ? void 0 : _item$badgeProps.textProps) || {}, hoverProps);
+  var badgeRef = useRef();
+  return ___EmotionJSX(Box, {
+    as: "li"
+  }, ___EmotionJSX(TooltipTrigger, {
+    direction: "top",
+    isDisabled: !isLong,
+    isOpen: isLong && isHovered,
+    targetRef: badgeRef
+  }, ___EmotionJSX(Badge, _extends({
+    ref: badgeRef,
+    key: item.key,
+    role: "presentation",
+    variant: "selectedItemBadge",
+    label: item.name,
+    slots: item.slots
+  }, item.badgeProps, {
+    textProps: textProps
+  }), ___EmotionJSX(IconButton, _extends({
+    "aria-label": "delete ".concat(item.name),
+    "data-item": item.name,
+    onPress: function onPress(e) {
+      return deleteItem(item.key, e);
+    },
+    ref: function ref(el) {
+      return closeBadgeRefs.current[index] = el;
+    } // eslint-disable-line
+    ,
+    variant: "badge.deleteButton",
+    "aria-describedby": "selectedKeysState"
+  }, item.buttonProps), ___EmotionJSX(Icon, {
+    icon: Clear,
+    size: 14,
+    title: {
+      name: 'Clear Icon'
+    }
+  }))), ___EmotionJSX(Tooltip, {
+    variant: "variants.tooltip.badgeTooltipContainer"
+  }, item.name)));
+};
+export default BadgeLabelTooltip;

package/lib/components/MultivaluesField/DefaultMultivaluesField.js

@@ -24,13 +24,12 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { DismissButton, FocusScope, useOverlayPosition } from 'react-aria';
-import Clear from '@pingux/mdi-react/CloseIcon';
 import { useFilter } from '@react-aria/i18n';
 import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { useListState } from '@react-stately/list';
 import PropTypes from 'prop-types';
-import { Badge, Box, Icon, IconButton, Loader, PopoverContainer, ScrollBox, Text, TextField } from '../..';
+import { Badge, Box, Loader, PopoverContainer, ScrollBox, Text, TextField } from '../..';
 import { MultivaluesContext } from '../../context/MultivaluesContext';
 import { useGetTheme, useInputLoader, usePropWarning } from '../../hooks';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
@@ -39,6 +38,7 @@ import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
 import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
+import BadgeLabelTooltip from './BadgeLabelTooltip';
 import ListBox from '../ListBox';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -396,34 +396,13 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     return null;
   });
   var multivaluesFieldBadge = function multivaluesFieldBadge(item, index) {
-    return ___EmotionJSX(Box, {
-      as: "li",
-      key: "li ".concat(item.key)
-    }, ___EmotionJSX(Badge, _extends({
-      key: item.key,
-      role: "presentation",
-      variant: "selectedItemBadge",
-      label: item.name,
-      slots: item.slots
-    }, item.badgeProps), ___EmotionJSX(IconButton, _extends({
-      "aria-label": "delete ".concat(item.name),
-      "data-item": item.name,
-      onPress: function onPress(e) {
-        return deleteItem(item.key, e);
-      },
-      ref: function ref(el) {
-        return closeBadgeRefs.current[index] = el;
-      } // eslint-disable-line
-      ,
-      variant: "badge.deleteButton",
-      "aria-describedby": "selectedKeysState"
-    }, item.buttonProps), ___EmotionJSX(Icon, {
-      icon: Clear,
-      size: 14,
-      title: {
-        name: 'Clear Icon'
-      }
-    }))));
+    return ___EmotionJSX(BadgeLabelTooltip, {
+      key: "tooltip-".concat(item.key),
+      item: item,
+      index: index,
+      deleteItem: deleteItem,
+      closeBadgeRefs: closeBadgeRefs
+    });
   };
   var selectedItems = ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(_context0 = _Array$from(selectionManager.selectedKeys)).call(_context0, function (key, i) {
     var _context1, _context10;

package/lib/components/MultivaluesField/MultivaluesField.stories.js

@@ -250,6 +250,23 @@ var itemsWithSlots = [{
     })
   }
 }];
+var longLabelItems = [{
+  id: 1,
+  name: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit,',
+  key: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit,'
+}, {
+  id: 2,
+  name: 'Quisque vitae lacinia diam, nec ullamcorper neque.',
+  key: 'Quisque vitae lacinia diam, nec ullamcorper neque.'
+}, {
+  id: 3,
+  name: 'In egestas dui vel dolor tincidunt, sit amet ullamcorper',
+  key: 'In egestas dui vel dolor tincidunt, sit amet ullamcorper'
+}, {
+  id: 4,
+  name: 'Short name',
+  key: 'Short name'
+}];
 var setOverlayStyle = function setOverlayStyle(direction, isOpen, mr, ml, mt) {
   return {
     marginRight: direction === 'right' && isOpen ? mr : 0,
@@ -862,4 +879,16 @@ export var OnLoadPrev = function OnLoadPrev() {
       "aria-label": item.name
     }, item.name);
   }));
+};
+export var LongLabels = function LongLabels() {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(MultivaluesField, {
+    items: longLabelItems,
+    label: "Example label",
+    defaultSelectedKeys: ['Lorem ipsum dolor sit amet, consectetur adipiscing elit,', 'Quisque vitae lacinia diam, nec ullamcorper neque.', 'In egestas dui vel dolor tincidunt, sit amet ullamcorper']
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.key,
+      "aria-label": item.name
+    }, item.name);
+  }));
 };