@pingux/astro 2.172.0 → 2.173.0-alpha.0

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

@@ -8,10 +8,11 @@ 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.WithExtraLongText = exports.WithControls = exports.WithCharts = exports.Default = void 0;
+exports["default"] = exports.WithSubtext = exports.WithRightOfDataSlot = exports.WithLeftOfDataSlot = exports.WithImage = exports.WithExtraLongText = exports.WithExpandableItem = exports.WithControls = exports.WithCharts = exports.Default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactStately = require("react-stately");
 var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon"));
+var _AccountOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountOutlineIcon"));
 var _ClockOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/ClockOutlineIcon"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _ = require("../..");
@@ -325,4 +326,55 @@ WithExtraLongText.parameters = {
     type: 'figma',
     url: _figmaLinks.FIGMA_LINKS.listViewItem.withExtraLongText
   }
+};
+var WithExpandableItem = exports.WithExpandableItem = function WithExpandableItem() {
+  return (0, _react2.jsx)(_.ListView, {
+    items: [{
+      key: 'Fons Vernall',
+      name: 'Fons Vernall',
+      subtext: 'rad_developer@pingidentity.com',
+      id: '1',
+      icon: _AccountOutlineIcon["default"]
+    }],
+    selectionMode: "expansion"
+  }, function (item) {
+    return (0, _react2.jsx)(_reactStately.Item, {
+      key: item.key,
+      textValue: item.name
+    }, (0, _react2.jsx)(_.Box, {
+      isRow: true,
+      sx: {
+        alignItems: 'center'
+      },
+      gap: "lg"
+    }, (0, _react2.jsx)(_.IconWrapper, {
+      icon: item.icon,
+      size: "sm",
+      title: {
+        name: item.name
+      },
+      isCircle: true,
+      color: "blue"
+    }), (0, _react2.jsx)(_.Box, null, (0, _react2.jsx)(_.Text, {
+      variant: "listViewItemText"
+    }, item.name), (0, _react2.jsx)(_.Text, {
+      variant: "listViewItemSubtext"
+    }, item.subtext))), (0, _react2.jsx)(_.Box, {
+      sx: {
+        my: '20px'
+      }
+    }, (0, _react2.jsx)(_.SearchField, {
+      maxWidth: "400px",
+      "aria-label": "Search",
+      placeholder: "Search"
+    }), (0, _react2.jsx)(_.Text, {
+      variant: "listViewItemExpandedText"
+    }, "Lorem ipsum dolor sit amet consectetur. Viverra nulla nec velit sollicitudin sed nisi mi gravida. Maecenas vestibulum pretium dictum dictum tempus. Sit et rutrum hendrerit facilisi turpis tellus elementum. Egestas consectetur in ac id. Sit aliquam et ut pellentesque in at blandit sed. Sapien morbi cras eleifend lectus.")));
+  });
+};
+WithExpandableItem.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.listViewItem["default"]
+  }
 };

package/lib/cjs/components/PopoverMenu/PopoverMenu.js

@@ -54,7 +54,7 @@ var PopoverMenu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useMenuTrigger = (0, _reactAria.useMenuTrigger)({}, state, triggerRef),
     menuTriggerProps = _useMenuTrigger.menuTriggerProps,
     menuProps = _useMenuTrigger.menuProps;
-  var trigger = /*#__PURE__*/_react["default"].isValidElement(menuTrigger) ? /*#__PURE__*/_react["default"].cloneElement(menuTrigger, _objectSpread(_objectSpread({}, menuTriggerProps), {}, {
+  var trigger = /*#__PURE__*/_react["default"].isValidElement(menuTrigger) ? /*#__PURE__*/_react["default"].cloneElement(menuTrigger, _objectSpread(_objectSpread({}, (0, _reactAria.mergeProps)(menuTrigger.props, menuTriggerProps)), {}, {
     ref: triggerRef
   })) : menuTrigger;
 

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

@@ -22,6 +22,7 @@ export declare const astroBlacklistStory: {
     Text: string[];
     Loader: string[];
     Card: string[];
+    ListViewItem: string[];
     MaterialSymbolIcon: string[];
 };
 export declare const nextGenOnlyComponents: string[];

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

@@ -29,6 +29,7 @@ var astroBlacklistStory = exports.astroBlacklistStory = {
   Text: ['Onyx'],
   Loader: ['Circular', 'Custom Circular'],
   Card: ['With Shadow'],
+  ListViewItem: ['With Expandable Item'],
   MaterialSymbolIcon: ['Default', 'Sizes', 'Commonly Used']
 };
 var nextGenOnlyComponents = exports.nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input', 'Footer', 'Onyx Input Patterns'];

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

@@ -5520,7 +5520,7 @@ declare const _default: {
                 '&.is-last-item': {
                     borderBottomLeftRadius: string;
                     borderBottomRightRadius: string;
-                    '&.is-hovered, &.is-expanded': {
+                    '&.is-expanded.is-hovered, &.is-expanded.is-expanded': {
                         borderBottomLeftRadius: string;
                         borderBottomRightRadius: string;
                     };

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

@@ -60,7 +60,7 @@ export declare const listViewItem: {
         '&.is-last-item': {
             borderBottomLeftRadius: string;
             borderBottomRightRadius: string;
-            '&.is-hovered, &.is-expanded': {
+            '&.is-expanded.is-hovered, &.is-expanded.is-expanded': {
                 borderBottomLeftRadius: string;
                 borderBottomRightRadius: string;
             };

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

@@ -67,7 +67,7 @@ var listViewItem = exports.listViewItem = {
     '&.is-last-item': {
       borderBottomLeftRadius: borderRadius,
       borderBottomRightRadius: borderRadius,
-      '&.is-hovered, &.is-expanded': {
+      '&.is-expanded.is-hovered, &.is-expanded.is-expanded': {
         borderBottomLeftRadius: '0',
         borderBottomRightRadius: '0'
       }

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

@@ -907,7 +907,7 @@ declare const _default: {
             '&.is-last-item': {
                 borderBottomLeftRadius: string;
                 borderBottomRightRadius: string;
-                '&.is-hovered, &.is-expanded': {
+                '&.is-expanded.is-hovered, &.is-expanded.is-expanded': {
                     borderBottomLeftRadius: string;
                     borderBottomRightRadius: string;
                 };

package/lib/components/ListViewItem/ListViewItem.stories.js

@@ -1,9 +1,10 @@
 import React, { useRef } from 'react';
 import { Item } from 'react-stately';
 import AccountIcon from '@pingux/mdi-react/AccountIcon';
+import AccountOutlineIcon from '@pingux/mdi-react/AccountOutlineIcon';
 import ClockOutlineIcon from '@pingux/mdi-react/ClockOutlineIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Badge, Box, ListViewItem, ListViewItemChart, ListViewItemMenu, ListViewItemSwitchField, Separator, Text } from '../..';
+import { Badge, Box, IconWrapper, ListView, ListViewItem, ListViewItemChart, ListViewItemMenu, ListViewItemSwitchField, SearchField, Separator, Text } from '../..';
 import { useGetTheme } from '../../hooks';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import { userImagePanelHeader } from '../../utils/devUtils/constants/images';
@@ -313,4 +314,55 @@ WithExtraLongText.parameters = {
     type: 'figma',
     url: FIGMA_LINKS.listViewItem.withExtraLongText
   }
+};
+export var WithExpandableItem = function WithExpandableItem() {
+  return ___EmotionJSX(ListView, {
+    items: [{
+      key: 'Fons Vernall',
+      name: 'Fons Vernall',
+      subtext: 'rad_developer@pingidentity.com',
+      id: '1',
+      icon: AccountOutlineIcon
+    }],
+    selectionMode: "expansion"
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.key,
+      textValue: item.name
+    }, ___EmotionJSX(Box, {
+      isRow: true,
+      sx: {
+        alignItems: 'center'
+      },
+      gap: "lg"
+    }, ___EmotionJSX(IconWrapper, {
+      icon: item.icon,
+      size: "sm",
+      title: {
+        name: item.name
+      },
+      isCircle: true,
+      color: "blue"
+    }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+      variant: "listViewItemText"
+    }, item.name), ___EmotionJSX(Text, {
+      variant: "listViewItemSubtext"
+    }, item.subtext))), ___EmotionJSX(Box, {
+      sx: {
+        my: '20px'
+      }
+    }, ___EmotionJSX(SearchField, {
+      maxWidth: "400px",
+      "aria-label": "Search",
+      placeholder: "Search"
+    }), ___EmotionJSX(Text, {
+      variant: "listViewItemExpandedText"
+    }, "Lorem ipsum dolor sit amet consectetur. Viverra nulla nec velit sollicitudin sed nisi mi gravida. Maecenas vestibulum pretium dictum dictum tempus. Sit et rutrum hendrerit facilisi turpis tellus elementum. Egestas consectetur in ac id. Sit aliquam et ut pellentesque in at blandit sed. Sapien morbi cras eleifend lectus.")));
+  });
+};
+WithExpandableItem.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.listViewItem["default"]
+  }
 };

package/lib/components/PopoverMenu/PopoverMenu.js

@@ -13,7 +13,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 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 _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { forwardRef, useRef } from 'react';
-import { DismissButton, FocusScope, OverlayContainer, useMenuTrigger } from 'react-aria';
+import { DismissButton, FocusScope, mergeProps, OverlayContainer, useMenuTrigger } from 'react-aria';
 import { useMenuTriggerState } from 'react-stately';
 import { PressResponder } from '@react-aria/interactions';
 import { MenuContext } from '../../context/MenuContext';
@@ -44,7 +44,7 @@ var PopoverMenu = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useMenuTrigger = useMenuTrigger({}, state, triggerRef),
     menuTriggerProps = _useMenuTrigger.menuTriggerProps,
     menuProps = _useMenuTrigger.menuProps;
-  var trigger = /*#__PURE__*/React.isValidElement(menuTrigger) ? /*#__PURE__*/React.cloneElement(menuTrigger, _objectSpread(_objectSpread({}, menuTriggerProps), {}, {
+  var trigger = /*#__PURE__*/React.isValidElement(menuTrigger) ? /*#__PURE__*/React.cloneElement(menuTrigger, _objectSpread(_objectSpread({}, mergeProps(menuTrigger.props, menuTriggerProps)), {}, {
     ref: triggerRef
   })) : menuTrigger;
 

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -22,6 +22,7 @@ export var astroBlacklistStory = {
   Text: ['Onyx'],
   Loader: ['Circular', 'Custom Circular'],
   Card: ['With Shadow'],
+  ListViewItem: ['With Expandable Item'],
   MaterialSymbolIcon: ['Default', 'Sizes', 'Commonly Used']
 };
 export var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input', 'Footer', 'Onyx Input Patterns'];

package/lib/styles/themes/next-gen/variants/listview.js

@@ -60,7 +60,7 @@ export var listViewItem = {
     '&.is-last-item': {
       borderBottomLeftRadius: borderRadius,
       borderBottomRightRadius: borderRadius,
-      '&.is-hovered, &.is-expanded': {
+      '&.is-expanded.is-hovered, &.is-expanded.is-expanded': {
         borderBottomLeftRadius: '0',
         borderBottomRightRadius: '0'
       }