@pingux/astro 2.194.0 → 2.195.0-alpha.0

package/lib/cjs/components/Badge/Badge.styles.d.ts

@@ -576,15 +576,20 @@ declare const _default: {
         py: number;
         pr: number;
         my: number;
+        maxWidth: string;
+        '& span': {
+            mr: string;
+            overflow: string;
+            textOverflow: string;
+            whiteSpace: string;
+            flex: string;
+        };
         alignSelf: string;
         cursor: string;
         height: string;
         m: number;
         mr: number;
         ml: number;
-        '& span': {
-            mr: string;
-        };
         p: string;
         alignItems: string;
         justifyContent: string;

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

@@ -61,7 +61,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/cjs/components/IconWrapper/IconWrapper.js

@@ -63,7 +63,9 @@ var IconWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     sx: _objectSpread({
       backgroundColor: "iconWrapper.wrapper.".concat(finalColor)
     }, sx),
-    className: classNames
+    className: classNames,
+    justifyContent: "center",
+    alignItems: "center"
   }, wrapperProps), (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
     icon: icon,
     size: sizeProps.size,

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

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.Sizes = exports.IsCircle = exports.Default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _DeleteIcon = _interopRequireDefault(require("@pingux/mdi-react/DeleteIcon"));
@@ -45,4 +45,85 @@ var _default = exports["default"] = {
 };
 var Default = exports.Default = function Default(args) {
   return (0, _react2.jsx)(_index.IconWrapper, args);
+};
+var Sizes = exports.Sizes = function Sizes() {
+  return (0, _react2.jsx)(_index.Box, {
+    gap: "md",
+    isRow: true,
+    alignItems: "center"
+  }, (0, _react2.jsx)(_index.IconWrapper, {
+    icon: _DeleteIcon["default"],
+    color: "cyan",
+    size: "xs",
+    title: {
+      name: 'extra small'
+    }
+  }), (0, _react2.jsx)(_index.IconWrapper, {
+    icon: _DeleteIcon["default"],
+    color: "cyan",
+    size: "sm",
+    title: {
+      name: 'small'
+    }
+  }), (0, _react2.jsx)(_index.IconWrapper, {
+    icon: _DeleteIcon["default"],
+    color: "cyan",
+    size: "md",
+    title: {
+      name: 'medium'
+    }
+  }), (0, _react2.jsx)(_index.IconWrapper, {
+    icon: _DeleteIcon["default"],
+    color: "cyan",
+    size: "lg",
+    title: {
+      name: 'large'
+    }
+  }), (0, _react2.jsx)(_index.IconWrapper, {
+    icon: _DeleteIcon["default"],
+    color: "cyan",
+    size: "xl",
+    title: {
+      name: 'extra large'
+    }
+  }));
+};
+var IsCircle = exports.IsCircle = function IsCircle() {
+  return (0, _react2.jsx)(_index.Box, {
+    gap: "md",
+    isRow: true,
+    alignItems: "center"
+  }, (0, _react2.jsx)(_index.IconWrapper, {
+    icon: _DeleteIcon["default"],
+    color: "cyan",
+    size: "xs",
+    isCircle: true,
+    title: {
+      name: 'extra small circle'
+    }
+  }), (0, _react2.jsx)(_index.IconWrapper, {
+    icon: _DeleteIcon["default"],
+    color: "cyan",
+    size: "sm",
+    isCircle: true,
+    title: {
+      name: 'small circle'
+    }
+  }), (0, _react2.jsx)(_index.IconWrapper, {
+    icon: _DeleteIcon["default"],
+    color: "cyan",
+    size: "md",
+    isCircle: true,
+    title: {
+      name: 'medium circle'
+    }
+  }), (0, _react2.jsx)(_index.IconWrapper, {
+    icon: _DeleteIcon["default"],
+    color: "cyan",
+    size: "lg",
+    isCircle: true,
+    title: {
+      name: 'large circle'
+    }
+  }));
 };

package/lib/cjs/components/MultivaluesField/BadgeLabelTooltip.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactAria = require("react-aria");
+var _CloseIcon = _interopRequireDefault(require("@pingux/mdi-react/CloseIcon"));
+var _interactions = require("@react-aria/interactions");
+var _ = require("../..");
+var _TooltipTrigger = _interopRequireWildcard(require("../TooltipTrigger"));
+var _react2 = require("@emotion/react");
+function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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 = (0, _interactions.useHover)({}),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
+  var textProps = (0, _reactAria.mergeProps)(((_item$badgeProps = item.badgeProps) === null || _item$badgeProps === void 0 ? void 0 : _item$badgeProps.textProps) || {}, hoverProps);
+  var badgeRef = (0, _react.useRef)();
+  return (0, _react2.jsx)(_.Box, {
+    as: "li"
+  }, (0, _react2.jsx)(_TooltipTrigger["default"], {
+    direction: "top",
+    isDisabled: !isLong,
+    isOpen: isLong && isHovered,
+    targetRef: badgeRef
+  }, (0, _react2.jsx)(_.Badge, (0, _extends2["default"])({
+    ref: badgeRef,
+    key: item.key,
+    role: "presentation",
+    variant: "selectedItemBadge",
+    label: item.name,
+    slots: item.slots
+  }, item.badgeProps, {
+    textProps: textProps
+  }), (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({
+    "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), (0, _react2.jsx)(_.Icon, {
+    icon: _CloseIcon["default"],
+    size: 14,
+    title: {
+      name: 'Clear Icon'
+    }
+  }))), (0, _react2.jsx)(_TooltipTrigger.Tooltip, {
+    variant: "variants.tooltip.badgeTooltipContainer"
+  }, item.name)));
+};
+var _default = exports["default"] = BadgeLabelTooltip;

package/lib/cjs/components/MultivaluesField/DefaultMultivaluesField.js

@@ -30,7 +30,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/hel
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
-var _CloseIcon = _interopRequireDefault(require("@pingux/mdi-react/CloseIcon"));
 var _i18n = require("@react-aria/i18n");
 var _utils = require("@react-aria/utils");
 var _visuallyHidden = require("@react-aria/visually-hidden");
@@ -45,6 +44,7 @@ var _isIterable = require("../../utils/devUtils/props/isIterable");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
+var _BadgeLabelTooltip = _interopRequireDefault(require("./BadgeLabelTooltip"));
 var _ListBox = _interopRequireDefault(require("../ListBox"));
 var _react2 = require("@emotion/react");
 var _excluded = ["items"],
@@ -407,34 +407,13 @@ var DefaultMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     return null;
   });
   var multivaluesFieldBadge = function multivaluesFieldBadge(item, index) {
-    return (0, _react2.jsx)(_.Box, {
-      as: "li",
-      key: "li ".concat(item.key)
-    }, (0, _react2.jsx)(_.Badge, (0, _extends2["default"])({
-      key: item.key,
-      role: "presentation",
-      variant: "selectedItemBadge",
-      label: item.name,
-      slots: item.slots
-    }, item.badgeProps), (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({
-      "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), (0, _react2.jsx)(_.Icon, {
-      icon: _CloseIcon["default"],
-      size: 14,
-      title: {
-        name: 'Clear Icon'
-      }
-    }))));
+    return (0, _react2.jsx)(_BadgeLabelTooltip["default"], {
+      key: "tooltip-".concat(item.key),
+      item: item,
+      index: index,
+      deleteItem: deleteItem,
+      closeBadgeRefs: closeBadgeRefs
+    });
   };
   var selectedItems = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _map["default"])(_context0 = (0, _from["default"])(selectionManager.selectedKeys)).call(_context0, function (key, i) {
     var _context1, _context10;

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

@@ -23,7 +23,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Uncontrolled = exports.ReadOnlyValues = exports.ReadOnlyField = exports.OnLoadPrev = exports.IconSlotsInBadge = exports.Error = exports.DisabledKeys = exports.Default = exports.CustomValues = exports.CustomSize = exports.Controlled = exports.CondensedWithSection = exports.CondensedWithCustomText = exports.CondensedAsyncLoading = exports.Condensed = void 0;
+exports["default"] = exports.Uncontrolled = exports.ReadOnlyValues = exports.ReadOnlyField = exports.OnLoadPrev = exports.LongLabels = exports.IconSlotsInBadge = exports.Error = exports.DisabledKeys = exports.Default = exports.CustomValues = exports.CustomSize = exports.Controlled = exports.CondensedWithSection = exports.CondensedWithCustomText = exports.CondensedAsyncLoading = exports.Condensed = void 0;
 var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
@@ -261,6 +261,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,
@@ -873,4 +890,16 @@ var OnLoadPrev = exports.OnLoadPrev = function OnLoadPrev() {
       "aria-label": item.name
     }, item.name);
   }));
+};
+var LongLabels = exports.LongLabels = function LongLabels() {
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.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 (0, _react2.jsx)(_index.Item, {
+      key: item.key,
+      "aria-label": item.name
+    }, item.name);
+  }));
 };