@pingux/astro 2.30.0-alpha.2 → 2.30.0-alpha.4

package/lib/cjs/hooks/useAriaLabelWarning/index.d.ts

@@ -0,0 +1 @@
+export { default } from './useAriaLabelWarning';

package/lib/cjs/hooks/useAriaLabelWarning/useAriaLabelWarning.d.ts

@@ -0,0 +1,9 @@
+interface UseAriaLabelWarning {
+    /**
+    * Provides a development-only console warning when a component
+    * that needs an aria-label is mounted without one.
+    */
+    (component: string, ariaLabel?: string, shouldTrigger?: boolean): void;
+}
+declare const useAriaLabelWarning: UseAriaLabelWarning;
+export default useAriaLabelWarning;

package/lib/cjs/hooks/useAriaLabelWarning/useAriaLabelWarning.js

@@ -7,10 +7,6 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _useDevelopmentWarning = _interopRequireDefault(require("../useDevelopmentWarning"));
-/**
- * Provides a development-only console warning when a component
- * that needs an aria-label is mounted without one.
-*/
 var useAriaLabelWarning = function useAriaLabelWarning(component, ariaLabel) {
   var shouldTrigger = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   var message = "".concat(component, " has an undefined aria-label. If the surrounding content sufficiently labels this component instance, you may disable this warning by setting the prop to `null`. Otherwise, please provide an appropriate aria-label. See more info here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label");

package/lib/cjs/hooks/useAriaLabelWarning/useAriaLabelWarning.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/cjs/hooks/useAriaLabelWarning/useAriaLabelWarning.test.js

@@ -6,9 +6,7 @@ var _useAriaLabelWarning = _interopRequireDefault(require("./useAriaLabelWarning
 var component = 'TestComponent';
 beforeEach(function () {
   process.env.NODE_ENV = 'development';
-  global.console.warn = function () {
-    return jest.mock();
-  }; // eslint-disable-line no-console
+  global.console.warn = jest.fn(); // eslint-disable-line no-console
 });
 
 afterEach(function () {

package/lib/cjs/hooks/useDevelopmentWarning/index.d.ts

@@ -0,0 +1 @@
+export { default } from './useDevelopmentWarning';

package/lib/cjs/hooks/useDevelopmentWarning/useDevelopmentWarning.d.ts

@@ -0,0 +1,11 @@
+interface UseDevelopmentWarning {
+    /**
+     * Provides a development-only console warning.
+    */
+    ({ message, shouldTrigger }: {
+        message: string;
+        shouldTrigger: boolean;
+    }): void;
+}
+declare const useDevelopmentWarning: UseDevelopmentWarning;
+export default useDevelopmentWarning;

package/lib/cjs/hooks/useDevelopmentWarning/useDevelopmentWarning.js

@@ -6,9 +6,6 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _react = require("react");
-/**
- * Provides a development-only console warning.
-*/
 var useDevelopmentWarning = function useDevelopmentWarning(_ref) {
   var message = _ref.message,
     shouldTrigger = _ref.shouldTrigger;

package/lib/cjs/hooks/useDevelopmentWarning/useDevelopmentWarning.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/cjs/hooks/useDevelopmentWarning/useDevelopmentWarning.test.js

@@ -6,9 +6,7 @@ var _useDevelopmentWarning = _interopRequireDefault(require("./useDevelopmentWar
 var message = 'This is test message';
 beforeEach(function () {
   process.env.NODE_ENV = 'development';
-  global.console.warn = function () {
-    return jest.mock();
-  }; // eslint-disable-line no-console
+  global.console.warn = jest.fn(); // eslint-disable-line no-console
 });
 
 afterEach(function () {

package/lib/cjs/recipes/{CollapsiblePanel.stories.hidden.js → CollapsiblePanel.stories.js}

@@ -108,9 +108,6 @@ var data = [{
 var sx = {
   listViewItem: {
     bg: 'white',
-    width: '100%',
-    justifyContent: 'space-between',
-    alignItems: 'center',
     '&.is-hovered': {
       bg: 'accent.99'
     }
@@ -122,8 +119,7 @@ var sx = {
     minHeight: 22,
     justifyContent: 'center',
     alignItems: 'center',
-    p: 'xs',
-    maxWidth: '50%'
+    p: 'xs'
   },
   defaultSelectedTitle: {
     fontSize: 'sm',
@@ -237,48 +233,31 @@ var Default = function Default() {
     mr: "sm",
     onChange: setSearchValue
   }), (0, _react2.jsx)(_index.ListView, {
-    items: filteredItems,
-    style: {
-      width: '100%',
-      outline: 'none'
-    }
+    items: filteredItems
   }, function (item) {
     return (0, _react2.jsx)(_index.Item, {
       key: item.key,
       textValue: item.name,
-      "data-id": item.key,
-      listItemProps: {
-        isRow: true,
-        sx: sx.listViewItem
-      }
-    }, (0, _react2.jsx)(_index.Box, {
-      isRow: true
-    }, (0, _react2.jsx)(_index.Icon, {
-      icon: _AccountGroupIcon["default"],
-      alignSelf: "center",
-      mr: "md",
-      color: "accent.40",
-      size: 25,
-      flexShrink: 1,
-      title: {
-        name: 'Account Group Icon'
-      }
-    }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
-      isRow: true
-    }, (0, _react2.jsx)(_index.Text, {
-      variant: "listTitle",
-      mb: "xs",
-      mr: "xs"
-    }, item.name), (0, _react2.jsx)(_index.Badge, {
-      label: item.badgeValue,
-      bg: "accent.99",
-      textColor: "text.secondary",
-      sx: {
-        minWidth: 'max-content'
+      "data-id": item.key
+    }, (0, _react2.jsx)(_index.ListViewItem, {
+      sx: sx.listViewItem,
+      data: {
+        icon: _AccountGroupIcon["default"],
+        text: item.name,
+        subtext: item.subtitle
+      },
+      slots: {
+        rightOfData: (0, _react2.jsx)(_index.Badge, {
+          label: item.badgeValue,
+          bg: "accent.99",
+          textColor: "text.secondary",
+          sx: {
+            minWidth: 'max-content'
+          },
+          ml: "xs"
+        })
       }
-    })), (0, _react2.jsx)(_index.Text, {
-      variant: "listSubtitle"
-    }, item.subtitle))), item.isDefaultSelected ? (0, _react2.jsx)(_index.Box, {
+    }, item.isDefaultSelected ? (0, _react2.jsx)(_index.Box, {
       isRow: true,
       sx: sx.defaultSelectedBox
     }, (0, _react2.jsx)(_index.Icon, {
@@ -308,7 +287,7 @@ var Default = function Default() {
       onClick: function onClick() {
         return checkBoxRef.current.focus();
       }
-    }));
+    })));
   })), (0, _react2.jsx)(_index.CollapsiblePanel, {
     items: selectedItems,
     selectedFilterCount: selectedItems.length.toString(),

package/lib/hooks/useAriaLabelWarning/useAriaLabelWarning.js

@@ -1,9 +1,4 @@
 import useDevelopmentWarning from '../useDevelopmentWarning';
-
-/**
- * Provides a development-only console warning when a component
- * that needs an aria-label is mounted without one.
-*/
 var useAriaLabelWarning = function useAriaLabelWarning(component, ariaLabel) {
   var shouldTrigger = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   var message = "".concat(component, " has an undefined aria-label. If the surrounding content sufficiently labels this component instance, you may disable this warning by setting the prop to `null`. Otherwise, please provide an appropriate aria-label. See more info here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label");

package/lib/hooks/useAriaLabelWarning/useAriaLabelWarning.test.js

@@ -3,9 +3,7 @@ import useAriaLabelWarning from './useAriaLabelWarning';
 var component = 'TestComponent';
 beforeEach(function () {
   process.env.NODE_ENV = 'development';
-  global.console.warn = function () {
-    return jest.mock();
-  }; // eslint-disable-line no-console
+  global.console.warn = jest.fn(); // eslint-disable-line no-console
 });
 
 afterEach(function () {

package/lib/hooks/useDevelopmentWarning/useDevelopmentWarning.js

@@ -1,8 +1,4 @@
 import { useMemo } from 'react';
-
-/**
- * Provides a development-only console warning.
-*/
 var useDevelopmentWarning = function useDevelopmentWarning(_ref) {
   var message = _ref.message,
     shouldTrigger = _ref.shouldTrigger;

package/lib/hooks/useDevelopmentWarning/useDevelopmentWarning.test.js

@@ -3,9 +3,7 @@ import useDevelopmentWarning from './useDevelopmentWarning';
 var message = 'This is test message';
 beforeEach(function () {
   process.env.NODE_ENV = 'development';
-  global.console.warn = function () {
-    return jest.mock();
-  }; // eslint-disable-line no-console
+  global.console.warn = jest.fn(); // eslint-disable-line no-console
 });
 
 afterEach(function () {

package/lib/recipes/{CollapsiblePanel.stories.hidden.js → CollapsiblePanel.stories.js}

@@ -21,7 +21,7 @@ import ChevronRightIcon from '@pingux/mdi-react/ChevronRightIcon';
 import Clear from '@pingux/mdi-react/CloseIcon';
 import SearchIcon from '@pingux/mdi-react/SearchIcon';
 import { useFilter } from '@react-aria/i18n';
-import { Badge, Box, Breadcrumbs, CheckboxField, CollapsiblePanel, CollapsiblePanelItem, Icon, IconButton, Item, ListView, SearchField, Text } from '../index';
+import { Badge, Box, Breadcrumbs, CheckboxField, CollapsiblePanel, CollapsiblePanelItem, Icon, IconButton, Item, ListView, ListViewItem, SearchField, Text } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/CollapsiblePanel with List'
@@ -95,9 +95,6 @@ var data = [{
 var sx = {
   listViewItem: {
     bg: 'white',
-    width: '100%',
-    justifyContent: 'space-between',
-    alignItems: 'center',
     '&.is-hovered': {
       bg: 'accent.99'
     }
@@ -109,8 +106,7 @@ var sx = {
     minHeight: 22,
     justifyContent: 'center',
     alignItems: 'center',
-    p: 'xs',
-    maxWidth: '50%'
+    p: 'xs'
   },
   defaultSelectedTitle: {
     fontSize: 'sm',
@@ -224,48 +220,31 @@ export var Default = function Default() {
     mr: "sm",
     onChange: setSearchValue
   }), ___EmotionJSX(ListView, {
-    items: filteredItems,
-    style: {
-      width: '100%',
-      outline: 'none'
-    }
+    items: filteredItems
   }, function (item) {
     return ___EmotionJSX(Item, {
       key: item.key,
       textValue: item.name,
-      "data-id": item.key,
-      listItemProps: {
-        isRow: true,
-        sx: sx.listViewItem
-      }
-    }, ___EmotionJSX(Box, {
-      isRow: true
-    }, ___EmotionJSX(Icon, {
-      icon: AccountGroupIcon,
-      alignSelf: "center",
-      mr: "md",
-      color: "accent.40",
-      size: 25,
-      flexShrink: 1,
-      title: {
-        name: 'Account Group Icon'
-      }
-    }), ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
-      isRow: true
-    }, ___EmotionJSX(Text, {
-      variant: "listTitle",
-      mb: "xs",
-      mr: "xs"
-    }, item.name), ___EmotionJSX(Badge, {
-      label: item.badgeValue,
-      bg: "accent.99",
-      textColor: "text.secondary",
-      sx: {
-        minWidth: 'max-content'
+      "data-id": item.key
+    }, ___EmotionJSX(ListViewItem, {
+      sx: sx.listViewItem,
+      data: {
+        icon: AccountGroupIcon,
+        text: item.name,
+        subtext: item.subtitle
+      },
+      slots: {
+        rightOfData: ___EmotionJSX(Badge, {
+          label: item.badgeValue,
+          bg: "accent.99",
+          textColor: "text.secondary",
+          sx: {
+            minWidth: 'max-content'
+          },
+          ml: "xs"
+        })
       }
-    })), ___EmotionJSX(Text, {
-      variant: "listSubtitle"
-    }, item.subtitle))), item.isDefaultSelected ? ___EmotionJSX(Box, {
+    }, item.isDefaultSelected ? ___EmotionJSX(Box, {
       isRow: true,
       sx: sx.defaultSelectedBox
     }, ___EmotionJSX(Icon, {
@@ -295,7 +274,7 @@ export var Default = function Default() {
       onClick: function onClick() {
         return checkBoxRef.current.focus();
       }
-    }));
+    })));
   })), ___EmotionJSX(CollapsiblePanel, {
     items: selectedItems,
     selectedFilterCount: selectedItems.length.toString(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.30.0-alpha.2",
+  "version": "2.30.0-alpha.4",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -136,7 +136,7 @@
     "@storybook/theming": "^7.1.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.0.4",
-    "@testing-library/react-hooks": "^3.4.1",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^12.8.3",
     "@types/jest": "^29.5.3",
     "@types/mdx": "^2.0.5",