@pingux/astro 2.14.0-alpha.2 → 2.14.0-alpha.3

package/lib/cjs/experimental/ListViewItem/ListViewItem.js

@@ -17,8 +17,8 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = exports.LIST_ITEM_ICON = void 0;
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _interactions = require("@react-aria/interactions");
 var _hooks = require("../../hooks");
@@ -30,6 +30,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var truncate = {
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap'
+};
 var sx = {
   container: {
     m: 1,
@@ -42,7 +47,8 @@ var sx = {
   controls: {
     alignSelf: 'center',
     ml: 'auto',
-    pr: 'sm'
+    pr: 'sm',
+    flexShrink: 0
   },
   data: {
     alignItems: 'center'
@@ -58,19 +64,19 @@ var sx = {
     alignSelf: 'center',
     ml: 'sm'
   },
-  subtitle: {
+  subtitle: _objectSpread(_objectSpread({}, truncate), {}, {
     alignSelf: 'start',
     fontSize: 'sm',
     lineHeight: '16px',
     my: '1px'
-  },
+  }),
   text: {
     ml: 'md'
   },
-  title: {
+  title: _objectSpread(_objectSpread({}, truncate), {}, {
     alignSelf: 'start',
     fontSize: 'md'
-  },
+  }),
   wrapper: {
     cursor: 'pointer',
     display: 'flex',
@@ -161,7 +167,8 @@ var ListViewItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     sx: wrapperStyles
   }, renderData, (slots === null || slots === void 0 ? void 0 : slots.rightOfData) && (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    alignSelf: "center"
+    alignSelf: "center",
+    flexShrink: 0
   }, slots.rightOfData), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     gap: "sm",

package/lib/cjs/experimental/ListViewItem/ListViewItem.stories.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithSubtext = exports.WithRightOfDataSlot = exports.WithLeftOfDataSlot = exports.WithImage = exports.WithControls = exports.Default = void 0;
+exports["default"] = exports.WithSubtext = exports.WithRightOfDataSlot = exports.WithLeftOfDataSlot = exports.WithImage = exports.WithExtraLongText = exports.WithControls = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactStately = require("react-stately");
 var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon"));
@@ -131,7 +131,8 @@ var WithRightOfDataSlot = function WithRightOfDataSlot() {
 exports.WithRightOfDataSlot = WithRightOfDataSlot;
 var WithLeftOfDataSlot = function WithLeftOfDataSlot() {
   var renderLeftOfData = (0, _react2.jsx)(_index.Box, {
-    mx: "sm"
+    mx: "sm",
+    minWidth: 35
   }, (0, _react2.jsx)(_index.Text, {
     pr: 3,
     variant: "H3"
@@ -157,4 +158,35 @@ var WithLeftOfDataSlot = function WithLeftOfDataSlot() {
     key: "delete"
   }, "Delete user"))));
 };
-exports.WithLeftOfDataSlot = WithLeftOfDataSlot;
+exports.WithLeftOfDataSlot = WithLeftOfDataSlot;
+var WithExtraLongText = function WithExtraLongText() {
+  var renderRightOfData = (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "sm",
+    mx: "sm"
+  }, (0, _react2.jsx)(_index.Badge, {
+    label: "Label"
+  }), (0, _react2.jsx)(_index.Badge, {
+    label: "Label",
+    bg: "active"
+  }));
+  var longText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum';
+  return (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_index.ListViewItem, {
+    data: {
+      icon: _AccountIcon["default"],
+      text: longText,
+      subtext: longText
+    },
+    slots: {
+      rightOfData: renderRightOfData
+    },
+    "aria-label": "Fons Vernall"
+  }, (0, _react2.jsx)(_index.ListViewItemMenu, null, (0, _react2.jsx)(_reactStately.Item, {
+    key: "enable"
+  }, "Enable user"), (0, _react2.jsx)(_reactStately.Item, {
+    key: "disable"
+  }, "Disable user"), (0, _react2.jsx)(_reactStately.Item, {
+    key: "delete"
+  }, "Delete user"))));
+};
+exports.WithExtraLongText = WithExtraLongText;

package/lib/experimental/ListViewItem/ListViewItem.js

@@ -7,8 +7,8 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 var _excluded = ["children", "className", "data", "isHovered", "isSelected", "linkProps", "onHoverChange", "onHoverEnd", "onHoverStart", "slots"];
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -19,6 +19,11 @@ import { useStatusClasses } from '../../hooks';
 import { Box, Icon, Image, Text } from '../../index';
 import { listViewItemPropTypes } from './listViewItemAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var truncate = {
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap'
+};
 var sx = {
   container: {
     m: 1,
@@ -31,7 +36,8 @@ var sx = {
   controls: {
     alignSelf: 'center',
     ml: 'auto',
-    pr: 'sm'
+    pr: 'sm',
+    flexShrink: 0
   },
   data: {
     alignItems: 'center'
@@ -47,19 +53,19 @@ var sx = {
     alignSelf: 'center',
     ml: 'sm'
   },
-  subtitle: {
+  subtitle: _objectSpread(_objectSpread({}, truncate), {}, {
     alignSelf: 'start',
     fontSize: 'sm',
     lineHeight: '16px',
     my: '1px'
-  },
+  }),
   text: {
     ml: 'md'
   },
-  title: {
+  title: _objectSpread(_objectSpread({}, truncate), {}, {
     alignSelf: 'start',
     fontSize: 'md'
-  },
+  }),
   wrapper: {
     cursor: 'pointer',
     display: 'flex',
@@ -149,7 +155,8 @@ var ListViewItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     sx: wrapperStyles
   }, renderData, (slots === null || slots === void 0 ? void 0 : slots.rightOfData) && ___EmotionJSX(Box, {
     isRow: true,
-    alignSelf: "center"
+    alignSelf: "center",
+    flexShrink: 0
   }, slots.rightOfData), ___EmotionJSX(Box, {
     isRow: true,
     gap: "sm",

package/lib/experimental/ListViewItem/ListViewItem.stories.js

@@ -117,7 +117,8 @@ export var WithRightOfDataSlot = function WithRightOfDataSlot() {
 };
 export var WithLeftOfDataSlot = function WithLeftOfDataSlot() {
   var renderLeftOfData = ___EmotionJSX(Box, {
-    mx: "sm"
+    mx: "sm",
+    minWidth: 35
   }, ___EmotionJSX(Text, {
     pr: 3,
     variant: "H3"
@@ -142,4 +143,34 @@ export var WithLeftOfDataSlot = function WithLeftOfDataSlot() {
   }, "Disable user"), ___EmotionJSX(Item, {
     key: "delete"
   }, "Delete user"))));
+};
+export var WithExtraLongText = function WithExtraLongText() {
+  var renderRightOfData = ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "sm",
+    mx: "sm"
+  }, ___EmotionJSX(Badge, {
+    label: "Label"
+  }), ___EmotionJSX(Badge, {
+    label: "Label",
+    bg: "active"
+  }));
+  var longText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum';
+  return ___EmotionJSX(Wrapper, null, ___EmotionJSX(ListViewItem, {
+    data: {
+      icon: AccountIcon,
+      text: longText,
+      subtext: longText
+    },
+    slots: {
+      rightOfData: renderRightOfData
+    },
+    "aria-label": "Fons Vernall"
+  }, ___EmotionJSX(ListViewItemMenu, null, ___EmotionJSX(Item, {
+    key: "enable"
+  }, "Enable user"), ___EmotionJSX(Item, {
+    key: "disable"
+  }, "Disable user"), ___EmotionJSX(Item, {
+    key: "delete"
+  }, "Delete user"))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.14.0-alpha.2",
+  "version": "2.14.0-alpha.3",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",