@pingux/astro 2.121.0-alpha.0 → 2.121.0-alpha.1

package/lib/cjs/components/Icon/Icon.js

@@ -18,10 +18,12 @@ exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/typeof"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("../../hooks");
 var _Box = _interopRequireDefault(require("../Box"));
 var _react2 = require("@emotion/react");
+var _excluded = ["color", "icon", "sx", "size", "variant", "title"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(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; }
@@ -30,32 +32,33 @@ var Icon = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var color = props.color,
     IconComponent = props.icon,
     sx = props.sx,
-    size = props.size;
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'sm' : _props$size,
+    variant = props.variant,
+    title = props.title,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var theme = (0, _hooks.useGetTheme)();
   var _useTShirtSize = (0, _hooks.useTShirtSize)({
       size: size,
       sizes: theme.tShirtSizes
     }),
     sizeProps = _useTShirtSize.sizeProps;
-  var title = props.title || ((0, _typeof2["default"])(IconComponent) === 'object' && 'type' in IconComponent ? {
+  var resolvedTitle = title !== null && title !== void 0 ? title : (0, _typeof2["default"])(IconComponent) === 'object' && 'type' in IconComponent ? {
     name: IconComponent.type.name
-  } : '');
+  } : '';
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: IconComponent,
     ref: ref,
-    title: title
-  }, props, {
-    size: sizeProps.size,
     role: "img",
+    title: resolvedTitle,
+    variant: variant,
+    size: sizeProps.size,
     sx: _objectSpread({
       fill: color,
       minWidth: sizeProps.size
     }, sx)
-  }));
+  }, others));
 });
-Icon.defaultProps = {
-  size: 20
-};
 Icon.displayName = 'Icon';
 var _default = Icon;
 exports["default"] = _default;

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

@@ -638,5 +638,42 @@ declare const _default: {
         height: string;
         outline: string;
     };
+    searchClearButton: {
+        position: string;
+        right: number;
+        justifyContent: string;
+        appearance: string;
+        alignItems: string;
+        alignSelf: string;
+        display: string;
+        flexGrow: number;
+        flexShrink: number;
+        borderRadius: string;
+        cursor: string;
+        bg: string;
+        p: string;
+        width: string;
+        height: string;
+        path: {
+            fill: string;
+        };
+        outline: string;
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&.is-hovered': {
+            bg: string;
+            boxShadow: string;
+        };
+        '&.is-pressed': {
+            path: {
+                fill: string;
+            };
+            bg: string;
+            boxShadow: string;
+        };
+    };
 };
 export default _default;

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

@@ -143,6 +143,10 @@ var applicationPortalPinned = _objectSpread(_objectSpread({}, base), {}, {
     }
   }
 });
+var searchClearButton = _objectSpread(_objectSpread({}, base), {}, {
+  position: 'absolute',
+  right: 10
+});
 var _default = {
   base: base,
   bidirectional: bidirectional,
@@ -168,6 +172,7 @@ var _default = {
   },
   // Recipe related variants
   applicationPortal: applicationPortal,
-  applicationPortalPinned: applicationPortalPinned
+  applicationPortalPinned: applicationPortalPinned,
+  searchClearButton: searchClearButton
 };
 exports["default"] = _default;

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

@@ -5,7 +5,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.iconWrapperArgTypes = void 0;
-var colorOptions = ['cyan', 'orange', 'red', 'green', 'purple', 'yellow', 'teal', 'pink'];
+var colorOptions = ['cyan', 'orange', 'red', 'green', 'purple', 'yellow', 'teal', 'pink', 'blue', 'indigo'];
 var sizes = ['sm', 'md', 'lg'];
 var iconWrapperArgTypes = {
   color: {

package/lib/cjs/components/ListView/ListView.js

@@ -173,6 +173,11 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     onScroll: resetHoverState,
     tabIndex: isFocusable ? 0 : -1,
     shouldUseVirtualFocus: !isFocusable
+    // added to remove the outline when using keyboard navigation encountered during UIP-7501
+    ,
+    style: {
+      outline: 'none'
+    }
   }), function (type, item) {
     if (type === 'item') {
       if (props.selectionMode === 'expansion') {

package/lib/cjs/components/ListView/ListView.stories.d.ts

@@ -1,4 +1,5 @@
 import React, { Key } from 'react';
+import { IconWrapperProps } from '../..';
 declare const _default: {
     title: string;
     component: React.ForwardRefExoticComponent<import("../../types/listView").ListViewProps & React.RefAttributes<unknown>>;
@@ -139,10 +140,9 @@ export interface ExampleItemProps {
     subtext?: string;
     id: string | number;
     hasSeparator?: boolean;
+    icon?: React.ElementType;
+    iconWrapperProps?: IconWrapperProps;
 }
-export declare const animals: {
-    name: string;
-}[];
 export declare const Default: {
     ({ ...args }: {
         [x: string]: any;

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

@@ -21,7 +21,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.animals = exports.WithExpandableItems = exports.WithCharts = exports.OnLoadPrev = exports.InfiniteLoadingList = exports.Default = exports.ControlledExpandableItems = void 0;
+exports["default"] = exports.WithExpandableItems = exports.WithCharts = exports.OnLoadPrev = exports.InfiniteLoadingList = exports.Default = exports.ControlledExpandableItems = void 0;
 var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
@@ -38,12 +38,15 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactStately = require("react-stately");
+var _ClockTimeEightOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/ClockTimeEightOutlineIcon"));
+var _CogIcon = _interopRequireDefault(require("@pingux/mdi-react/CogIcon"));
 var _FormSelectIcon = _interopRequireDefault(require("@pingux/mdi-react/FormSelectIcon"));
 var _addonActions = require("@storybook/addon-actions");
 var _isChromatic = _interopRequireDefault(require("chromatic/isChromatic"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _2 = require("../..");
 var _figmaLinks = require("../../utils/designUtils/figmaLinks");
+var _animals = _interopRequireDefault(require("../../utils/devUtils/constants/animals"));
 var _loadingStates = _interopRequireDefault(require("../../utils/devUtils/constants/loadingStates"));
 var _chartData = require("../ListViewItem/controls/chart/chartData");
 var _ListView = _interopRequireDefault(require("./ListView.mdx"));
@@ -79,466 +82,30 @@ var items = [{
   key: 'Aardvark',
   name: 'Aardvark',
   id: '1',
-  hasSeparator: false
+  icon: _CogIcon["default"],
+  iconWrapperProps: {
+    size: 'sm',
+    color: 'blue'
+  }
 }, {
   key: 'Kangaroo',
   name: 'Kangaroo',
-  id: '2'
+  id: '2',
+  icon: _ClockTimeEightOutlineIcon["default"],
+  iconWrapperProps: {
+    size: 'sm',
+    color: 'green'
+  }
 }, {
   key: 'Snake',
   name: 'Snake',
-  id: '3'
-}];
-var animals = [{
-  name: 'Aardvark'
-}, {
-  name: 'Albatross'
-}, {
-  name: 'Alligator'
-}, {
-  name: 'Alpaca'
-}, {
-  name: 'Ant'
-}, {
-  name: 'Anteater'
-}, {
-  name: 'Antelope'
-}, {
-  name: 'Ape'
-}, {
-  name: 'Armadillo'
-}, {
-  name: 'Donkey'
-}, {
-  name: 'Baboon'
-}, {
-  name: 'Badger'
-}, {
-  name: 'Barracuda'
-}, {
-  name: 'Bat'
-}, {
-  name: 'Bear'
-}, {
-  name: 'Beaver'
-}, {
-  name: 'Bee'
-}, {
-  name: 'Bison'
-}, {
-  name: 'Boar'
-}, {
-  name: 'Buffalo'
-}, {
-  name: 'Butterfly'
-}, {
-  name: 'Camel'
-}, {
-  name: 'Capybara'
-}, {
-  name: 'Caribou'
-}, {
-  name: 'Cassowary'
-}, {
-  name: 'Cat'
-}, {
-  name: 'Caterpillar'
-}, {
-  name: 'Cattle'
-}, {
-  name: 'Chamois'
-}, {
-  name: 'Cheetah'
-}, {
-  name: 'Chicken'
-}, {
-  name: 'Chimpanzee'
-}, {
-  name: 'Chinchilla'
-}, {
-  name: 'Chough'
-}, {
-  name: 'Clam'
-}, {
-  name: 'Cobra'
-}, {
-  name: 'Cockroach'
-}, {
-  name: 'Cod'
-}, {
-  name: 'Cormorant'
-}, {
-  name: 'Coyote'
-}, {
-  name: 'Crab'
-}, {
-  name: 'Crane'
-}, {
-  name: 'Crocodile'
-}, {
-  name: 'Crow'
-}, {
-  name: 'Curlew'
-}, {
-  name: 'Deer'
-}, {
-  name: 'Dinosaur'
-}, {
-  name: 'Dog'
-}, {
-  name: 'Dogfish'
-}, {
-  name: 'Dolphin'
-}, {
-  name: 'Dotterel'
-}, {
-  name: 'Dove'
-}, {
-  name: 'Dragonfly'
-}, {
-  name: 'Duck'
-}, {
-  name: 'Dugong'
-}, {
-  name: 'Dunlin'
-}, {
-  name: 'Eagle'
-}, {
-  name: 'Echidna'
-}, {
-  name: 'Eel'
-}, {
-  name: 'Eland'
-}, {
-  name: 'Elephant'
-}, {
-  name: 'Elk'
-}, {
-  name: 'Emu'
-}, {
-  name: 'Falcon'
-}, {
-  name: 'Ferret'
-}, {
-  name: 'Finch'
-}, {
-  name: 'Fish'
-}, {
-  name: 'Flamingo'
-}, {
-  name: 'Fly'
-}, {
-  name: 'Fox'
-}, {
-  name: 'Frog'
-}, {
-  name: 'Gaur'
-}, {
-  name: 'Gazelle'
-}, {
-  name: 'Gerbil'
-}, {
-  name: 'Giraffe'
-}, {
-  name: 'Gnat'
-}, {
-  name: 'Gnu'
-}, {
-  name: 'Goat'
-}, {
-  name: 'Goldfinch'
-}, {
-  name: 'Goldfish'
-}, {
-  name: 'Goose'
-}, {
-  name: 'Gorilla'
-}, {
-  name: 'Goshawk'
-}, {
-  name: 'Grasshopper'
-}, {
-  name: 'Grouse'
-}, {
-  name: 'Guanaco'
-}, {
-  name: 'Gull'
-}, {
-  name: 'Hamster'
-}, {
-  name: 'Hare'
-}, {
-  name: 'Hawk'
-}, {
-  name: 'Hedgehog'
-}, {
-  name: 'Heron'
-}, {
-  name: 'Herring'
-}, {
-  name: 'Hippopotamus'
-}, {
-  name: 'Hornet'
-}, {
-  name: 'Horse'
-}, {
-  name: 'Human'
-}, {
-  name: 'Hummingbird'
-}, {
-  name: 'Hyena'
-}, {
-  name: 'Ibex'
-}, {
-  name: 'Ibis'
-}, {
-  name: 'Jackal'
-}, {
-  name: 'Jaguar'
-}, {
-  name: 'Jay'
-}, {
-  name: 'Jellyfish'
-}, {
-  name: 'Kangaroo'
-}, {
-  name: 'Kingfisher'
-}, {
-  name: 'Koala'
-}, {
-  name: 'Kookabura'
-}, {
-  name: 'Kouprey'
-}, {
-  name: 'Kudu'
-}, {
-  name: 'Lapwing'
-}, {
-  name: 'Lark'
-}, {
-  name: 'Lemur'
-}, {
-  name: 'Leopard'
-}, {
-  name: 'Lion'
-}, {
-  name: 'Llama'
-}, {
-  name: 'Lobster'
-}, {
-  name: 'Locust'
-}, {
-  name: 'Loris'
-}, {
-  name: 'Louse'
-}, {
-  name: 'Lyrebird'
-}, {
-  name: 'Magpie'
-}, {
-  name: 'Mallard'
-}, {
-  name: 'Manatee'
-}, {
-  name: 'Mandrill'
-}, {
-  name: 'Mantis'
-}, {
-  name: 'Marten'
-}, {
-  name: 'Meerkat'
-}, {
-  name: 'Mink'
-}, {
-  name: 'Mole'
-}, {
-  name: 'Mongoose'
-}, {
-  name: 'Monkey'
-}, {
-  name: 'Moose'
-}, {
-  name: 'Mosquito'
-}, {
-  name: 'Mouse'
-}, {
-  name: 'Mule'
-}, {
-  name: 'Narwhal'
-}, {
-  name: 'Newt'
-}, {
-  name: 'Nightingale'
-}, {
-  name: 'Octopus'
-}, {
-  name: 'Okapi'
-}, {
-  name: 'Opossum'
-}, {
-  name: 'Oryx'
-}, {
-  name: 'Ostrich'
-}, {
-  name: 'Otter'
-}, {
-  name: 'Owl'
-}, {
-  name: 'Oyster'
-}, {
-  name: 'Panther'
-}, {
-  name: 'Parrot'
-}, {
-  name: 'Partridge'
-}, {
-  name: 'Peafowl'
-}, {
-  name: 'Pelican'
-}, {
-  name: 'Penguin'
-}, {
-  name: 'Pheasant'
-}, {
-  name: 'Pig'
-}, {
-  name: 'Pigeon'
-}, {
-  name: 'Pony'
-}, {
-  name: 'Porcupine'
-}, {
-  name: 'Porpoise'
-}, {
-  name: 'Quail'
-}, {
-  name: 'Quelea'
-}, {
-  name: 'Quetzal'
-}, {
-  name: 'Rabbit'
-}, {
-  name: 'Raccoon'
-}, {
-  name: 'Rail'
-}, {
-  name: 'Ram'
-}, {
-  name: 'Rat'
-}, {
-  name: 'Raven'
-}, {
-  name: 'Red deer'
-}, {
-  name: 'Red panda'
-}, {
-  name: 'Reindeer'
-}, {
-  name: 'Rhinoceros'
-}, {
-  name: 'Rook'
-}, {
-  name: 'Salamander'
-}, {
-  name: 'Salmon'
-}, {
-  name: 'Sand Dollar'
-}, {
-  name: 'Sandpiper'
-}, {
-  name: 'Sardine'
-}, {
-  name: 'Scorpion'
-}, {
-  name: 'Seahorse'
-}, {
-  name: 'Seal'
-}, {
-  name: 'Shark'
-}, {
-  name: 'Sheep'
-}, {
-  name: 'Shrew'
-}, {
-  name: 'Skunk'
-}, {
-  name: 'Snail'
-}, {
-  name: 'Snake'
-}, {
-  name: 'Sparrow'
-}, {
-  name: 'Spider'
-}, {
-  name: 'Spoonbill'
-}, {
-  name: 'Squid'
-}, {
-  name: 'Squirrel'
-}, {
-  name: 'Starling'
-}, {
-  name: 'Stingray'
-}, {
-  name: 'Stinkbug'
-}, {
-  name: 'Stork'
-}, {
-  name: 'Swallow'
-}, {
-  name: 'Swan'
-}, {
-  name: 'Tapir'
-}, {
-  name: 'Tarsier'
-}, {
-  name: 'Termite'
-}, {
-  name: 'Tiger'
-}, {
-  name: 'Toad'
-}, {
-  name: 'Trout'
-}, {
-  name: 'Turkey'
-}, {
-  name: 'Turtle'
-}, {
-  name: 'Viper'
-}, {
-  name: 'Vulture'
-}, {
-  name: 'Wallaby'
-}, {
-  name: 'Walrus'
-}, {
-  name: 'Wasp'
-}, {
-  name: 'Weasel'
-}, {
-  name: 'Whale'
-}, {
-  name: 'Wildcat'
-}, {
-  name: 'Wolf'
-}, {
-  name: 'Wolverine'
-}, {
-  name: 'Wombat'
-}, {
-  name: 'Woodcock'
-}, {
-  name: 'Woodpecker'
-}, {
-  name: 'Worm'
-}, {
-  name: 'Wren'
-}, {
-  name: 'Yak'
-}, {
-  name: 'Zebra'
+  id: '3',
+  icon: _FormSelectIcon["default"],
+  iconWrapperProps: {
+    size: 'sm',
+    color: 'indigo'
+  }
 }];
-exports.animals = animals;
 var props = {
   disabledKeys: ['Snake']
 };
@@ -593,11 +160,12 @@ var Default = function Default(_ref) {
     }, (0, _react2.jsx)(_2.ListViewItem, {
       data: {
         text: item.name,
-        icon: _FormSelectIcon["default"]
+        icon: item.icon
       },
       iconProps: {
         color: 'text.secondary'
-      }
+      },
+      iconWrapperProps: item.iconWrapperProps
     }, (0, _react2.jsx)(Controls, null)));
   });
 };
@@ -646,7 +214,8 @@ var ControlledExpandableItems = function ControlledExpandableItems(_ref3) {
   return (0, _react2.jsx)(_2.Box, null, (0, _react2.jsx)(_2.Button, {
     onPress: function onPress() {
       expandAllKeys();
-    }
+    },
+    mb: "lg"
   }, "Expand all"), (0, _react2.jsx)(_2.ListView, (0, _extends2["default"])({}, props, args, {
     items: items,
     expandedKeys: expandedKeys,
@@ -684,7 +253,7 @@ var InfiniteLoadingList = function InfiniteLoadingList(args) {
             });
           case 5:
             return _context.abrupt("return", {
-              items: (0, _slice["default"])(animals).call(animals, (pageNumber - 1) * 10, pageNumber * 10),
+              items: (0, _slice["default"])(_animals["default"]).call(_animals["default"], (pageNumber - 1) * 10, pageNumber * 10),
               cursor: "mock-".concat(pageNumber + 1)
             });
           case 6:

package/lib/cjs/components/ListView/ListViewExpandableItem.js

@@ -78,6 +78,7 @@ var ListViewExpandableItem = function ListViewExpandableItem(props) {
       ml: 'auto'
     },
     icon: isExpanded ? MenuUp : MenuDown,
+    variant: "listViewItem.expandIcon",
     title: {
       name: "".concat(key, " expand icon button")
     }