@pingux/astro 2.120.0 → 2.121.0-alpha.1

package/lib/cjs/components/AIComponents/Attachment/Attachment.d.ts

@@ -1,10 +1,5 @@
 import React from 'react';
 import { AttachmentProps } from '../../../types/promptInput';
 export declare const getFileExtension: (fullString: string) => string;
-declare const Attachment: {
-    (props: AttachmentProps): React.JSX.Element;
-    defaultProps: {
-        icon: import("@pingux/mdi-react").MdiReactIconComponentType;
-    };
-};
+declare const Attachment: (props: AttachmentProps) => React.JSX.Element;
 export default Attachment;

package/lib/cjs/components/AIComponents/Attachment/Attachment.js

@@ -20,6 +20,7 @@ var _CloseIcon = _interopRequireDefault(require("@pingux/mdi-react/CloseIcon"));
 var _PaperOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/PaperOutlineIcon"));
 var _hooks = require("../../../hooks");
 var _index = require("../../../index");
+var _constants = require("./constants");
 var _react2 = require("@emotion/react");
 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -41,12 +42,16 @@ var Attachment = function Attachment(props) {
     id = props.id,
     containerProps = props.containerProps,
     iconWrapperProps = props.iconWrapperProps,
-    icon = props.icon,
     deleteButtonProps = props.deleteButtonProps;
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
       isFullScreen: isFullScreen
     }),
     classNames = _useStatusClasses.classNames;
+  var defaultIconProps = {
+    icon: _PaperOutlineIcon["default"],
+    color: 'lightBlue'
+  };
+  var iconProps = _constants.fileTypeConfig[fileType] || defaultIconProps;
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "attachment.container",
     className: classNames
@@ -55,13 +60,11 @@ var Attachment = function Attachment(props) {
     alignItems: "center",
     px: "lg",
     py: "md"
-  }, (0, _react2.jsx)(_index.IconWrapper, {
+  }, (0, _react2.jsx)(_index.IconWrapper, (0, _extends2["default"])({
     isCircle: true,
     title: {
-      name: 'File Icon'
+      name: "".concat(fileType, " File Icon")
     },
-    icon: icon,
-    color: "red",
     size: "sm",
     wrapperProps: _objectSpread({
       size: '36px',
@@ -69,18 +72,13 @@ var Attachment = function Attachment(props) {
       minWidth: '36px',
       p: '9px'
     }, iconWrapperProps)
-  }), (0, _react2.jsx)(_index.Box, {
+  }, iconProps)), (0, _react2.jsx)(_index.Box, {
     sx: {
       ml: 'md'
     }
   }, (0, _react2.jsx)(_index.Text, {
     as: "h5",
-    sx: {
-      fontWeight: 2,
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden'
-    }
+    variant: "attachmentTitle"
   }, title), (0, _react2.jsx)(_index.Text, {
     sx: {
       textOverflow: 'ellipsis'
@@ -102,8 +100,5 @@ var Attachment = function Attachment(props) {
     icon: _CloseIcon["default"]
   }))));
 };
-Attachment.defaultProps = {
-  icon: _PaperOutlineIcon["default"]
-};
 var _default = Attachment;
 exports["default"] = _default;

package/lib/cjs/components/AIComponents/Attachment/Attachment.test.d.ts

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

package/lib/cjs/components/AIComponents/Attachment/Attachment.test.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _testWrapper = require("../../../utils/testUtils/testWrapper");
+var _Attachment = _interopRequireDefault(require("./Attachment"));
+var _react2 = require("@emotion/react");
+var mockFileName = 'sampleFile';
+var defaultProps = {
+  key: 'file_key',
+  title: mockFileName,
+  fileType: 'PPT',
+  removeFile: function removeFile() {
+    return false;
+  },
+  id: 'Example Title'
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_Attachment["default"], (0, _extends2["default"])({}, defaultProps, props)));
+};
+describe('Attachment', function () {
+  test('renders with PPT file format ', function () {
+    getComponent();
+    _testWrapper.screen.getByRole('img', {
+      name: /ppt file icon/i
+    });
+    _testWrapper.screen.getByRole('heading', {
+      name: mockFileName
+    });
+    _testWrapper.screen.getAllByText(/ppt/i);
+    _testWrapper.screen.getByRole('button', {
+      name: /remove attachment/i
+    });
+  });
+  test('renders with PDF file format', function () {
+    getComponent({
+      fileType: 'pdf'
+    });
+    _testWrapper.screen.getByRole('img', {
+      name: /pdf file icon/i
+    });
+    _testWrapper.screen.getByRole('heading', {
+      name: mockFileName
+    });
+    _testWrapper.screen.getAllByText(/pdf/i);
+  });
+  test('renders with CSV file format', function () {
+    getComponent({
+      fileType: 'csv'
+    });
+    _testWrapper.screen.getAllByText(/csv/i);
+  });
+  test('renders with JS file format', function () {
+    getComponent({
+      fileType: 'js'
+    });
+    _testWrapper.screen.getAllByText(/js/i);
+  });
+  test('renders with ZIP file format', function () {
+    getComponent({
+      fileType: 'zip'
+    });
+    _testWrapper.screen.getAllByText(/zip/i);
+  });
+});

package/lib/cjs/components/AIComponents/Attachment/constants.d.ts

@@ -0,0 +1,38 @@
+export declare const fileTypeConfig: {
+    pdf: {
+        icon: import("@pingux/mdi-react").MdiReactIconComponentType;
+        color: string;
+    };
+    doc: {
+        icon: import("@pingux/mdi-react").MdiReactIconComponentType;
+        color: string;
+    };
+    docx: {
+        icon: import("@pingux/mdi-react").MdiReactIconComponentType;
+        color: string;
+    };
+    text: {
+        icon: import("@pingux/mdi-react").MdiReactIconComponentType;
+        color: string;
+    };
+    csv: {
+        icon: import("@pingux/mdi-react").MdiReactIconComponentType;
+        color: string;
+    };
+    xls: {
+        icon: import("@pingux/mdi-react").MdiReactIconComponentType;
+        color: string;
+    };
+    xlsx: {
+        icon: import("@pingux/mdi-react").MdiReactIconComponentType;
+        color: string;
+    };
+    js: {
+        icon: import("@pingux/mdi-react").MdiReactIconComponentType;
+        color: string;
+    };
+    zip: {
+        icon: import("@pingux/mdi-react").MdiReactIconComponentType;
+        color: string;
+    };
+};

package/lib/cjs/components/AIComponents/Attachment/constants.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fileTypeConfig = void 0;
+var _CodeTagsIcon = _interopRequireDefault(require("@pingux/mdi-react/CodeTagsIcon"));
+var _FileDocumentOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/FileDocumentOutlineIcon"));
+var _FolderZipOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/FolderZipOutlineIcon"));
+var _TableLargeIcon = _interopRequireDefault(require("@pingux/mdi-react/TableLargeIcon"));
+var fileTypeConfig = {
+  pdf: {
+    icon: _FileDocumentOutlineIcon["default"],
+    color: 'lightPink'
+  },
+  doc: {
+    icon: _FileDocumentOutlineIcon["default"],
+    color: 'lightPink'
+  },
+  docx: {
+    icon: _FileDocumentOutlineIcon["default"],
+    color: 'lightPink'
+  },
+  text: {
+    icon: _FileDocumentOutlineIcon["default"],
+    color: 'lightPink'
+  },
+  csv: {
+    icon: _TableLargeIcon["default"],
+    color: 'lightGreen'
+  },
+  xls: {
+    icon: _TableLargeIcon["default"],
+    color: 'lightGreen'
+  },
+  xlsx: {
+    icon: _TableLargeIcon["default"],
+    color: 'lightGreen'
+  },
+  js: {
+    icon: _CodeTagsIcon["default"],
+    color: 'lightYellow'
+  },
+  zip: {
+    icon: _FolderZipOutlineIcon["default"],
+    color: 'lightIndigo'
+  }
+};
+exports.fileTypeConfig = fileTypeConfig;

package/lib/cjs/components/AIComponents/PromptInput/PromptInput.stories.js

@@ -66,9 +66,7 @@ var Default = function Default(args) {
     console.log('submit');
     setValue('');
   };
-  return (0, _react2.jsx)(_.AstroProvider, {
-    themeOverrides: [_.NextGenTheme]
-  }, (0, _react2.jsx)(_.Box, {
+  return (0, _react2.jsx)(_.Box, {
     maxWidth: "768px"
   }, (0, _react2.jsx)(_PromptInput["default"], (0, _extends2["default"])({}, args, {
     placeholder: "Enter a prompt here",
@@ -80,6 +78,6 @@ var Default = function Default(args) {
     onFileChange: onFileChange,
     onSubmit: onSubmit,
     onCancel: onCancel
-  }))));
+  })));
 };
 exports.Default = Default;

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;