@pingux/astro 2.115.0 → 2.116.0-alpha.0

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

@@ -41,6 +41,8 @@ var PromptInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var attachmentProps = props.attachmentProps,
     isFullScreen = props.isFullScreen,
     isLoading = props.isLoading,
+    _props$isUploadButton = props.isUploadButtonHidden,
+    isUploadButtonHidden = _props$isUploadButton === void 0 ? false : _props$isUploadButton,
     fileInputButtonProps = props.fileInputButtonProps,
     valueProp = props.value,
     defaultValueProp = props.defaultValue,
@@ -188,7 +190,7 @@ var PromptInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, fieldControlInputProps, {
     onKeyUp: onKeyUp,
     onKeyDown: onKeyDown
-  })), (0, _react2.jsx)(_index.Box, {
+  })), !isUploadButtonHidden && (0, _react2.jsx)(_index.Box, {
     sx: {
       mx: '.75rem',
       mb: 'auto'

package/lib/cjs/components/AIComponents/PromptInput/PromptInput.stories.d.ts

@@ -2,8 +2,17 @@ import React from 'react';
 declare const _default: {
     title: string;
     component: React.ForwardRefExoticComponent<import("../../../types/promptInput").PromptInputProps & React.RefAttributes<HTMLInputElement>>;
+    parameters: {
+        docs: {
+            page: () => React.JSX.Element;
+            source: {
+                type: string;
+            };
+        };
+    };
     argTypes: {
         isLoading: any;
+        isUploadButtonHidden: any;
     };
 };
 export default _default;

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

@@ -19,9 +19,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
+var _storybookDocsLayout = _interopRequireDefault(require("../../../../.storybook/storybookDocsLayout"));
 var _ = require("../../..");
 var _docArgTypes = require("../../../utils/docUtils/docArgTypes");
 var _PromptInput = _interopRequireDefault(require("./PromptInput"));
+var _PromptInputReadMe = _interopRequireDefault(require("./PromptInputReadMe.mdx"));
 var _react2 = require("@emotion/react");
 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 || _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; }
@@ -30,8 +32,19 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var _default = {
   title: 'Ai Components/Prompt Input',
   component: _PromptInput["default"],
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_PromptInputReadMe["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      },
+      source: {
+        type: 'code'
+      }
+    }
+  },
   argTypes: {
-    isLoading: _objectSpread({}, _docArgTypes.booleanArg)
+    isLoading: _objectSpread({}, _docArgTypes.booleanArg),
+    isUploadButtonHidden: _objectSpread({}, _docArgTypes.booleanArg)
   }
 };
 exports["default"] = _default;

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

@@ -134,6 +134,15 @@ test('onSubmit prop works correctly', /*#__PURE__*/(0, _asyncToGenerator2["defau
     }
   }, _callee2);
 })));
+test('', function () {
+  getComponent({
+    isUploadButtonHidden: true,
+    uploadButtonProps: {
+      'data-testid': buttonTestId
+    }
+  });
+  expect(_testWrapper.screen.queryByText(buttonTestId)).not.toBeInTheDocument();
+});
 test('onCancel prop works correctly', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
   var control;
   return _regeneratorRuntime().wrap(function _callee3$(_context3) {

package/lib/cjs/components/AIComponents/PromptInput/PromptInputReadMe.mdx

@@ -0,0 +1,71 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/PromptInput" />
+
+# PromptInput
+
+The `PromptInput` component is used to capture user input in a conversational UI. It supports text input, file attachments, and customizable actions like submission or cancellation.
+
+### Recommended Use
+
+- Use the `PromptInput` component to collect user input in chat-like interfaces.
+- Attach files or documents to the input using the file attachment feature.
+
+### Features
+
+- **Text Input**: Allows users to type text with dynamic height adjustment based on content.
+- **File Attachments**: Supports adding and removing file attachments.
+- **Customizable Actions**: Includes `onSubmit`, `onCancel`, `onKeyDown`, and `onKeyUp` handlers for custom behavior.
+
+### Props
+
+| Prop                  | Type                 | Description                                                                 |
+| --------------------- | -------------------- | --------------------------------------------------------------------------- |
+| `value`               | `string`            | The controlled value of the input.                                          |
+| `defaultValue`        | `string`            | The default value of the input.                                             |
+| `onSubmit`            | `function`          | Callback triggered when the input is submitted.                             |
+| `onCancel`            | `function`          | Callback triggered when the input is canceled.                              |
+| `onKeyDown`           | `function`          | Callback triggered on key down events.                                      |
+| `onKeyUp`             | `function`          | Callback triggered on key up events.                                        |
+| `onFileChange`        | `function`          | Callback triggered when files are added or removed.                         |
+| `attachmentProps`     | `object`            | Props passed to the `Attachment` component for file attachments.            |
+| `fileInputButtonProps`| `object`            | Props passed to the file input button.                                       |
+| `uploadButtonProps`   | `object`            | Props passed to the upload button.                                          |
+| `isLoading`           | `boolean`           | Indicates whether the input is in a loading state.                          |
+
+### Accessibility
+
+This component adheres to accessibility guidelines to ensure a better user experience for all users.
+
+#### Keyboard Navigation
+
+| Keys         | Function                                                                 |
+| ------------ | ----------------------------------------------------------------------- |
+| Tab          | Focuses on the next focusable element within the input.                 |
+| Shift + Tab  | Moves focus to the previous focusable element.                          |
+| Enter        | Submits the input when `onSubmit` is defined.                           |
+| Shift + Enter| Adds a new line to the input.                           |
+| Escape       | Cancels the input when `onCancel` is defined.                           |
+
+#### Screen Readers
+
+- **`aria-label`**: Describes the purpose of the input field.
+- **`aria-disabled`**: Indicates when the input is disabled.
+- **`aria-live`**: Announces changes to the input dynamically.
+
+### Example Usage
+
+```jsx
+<PromptInput
+  value=""
+  onSubmit={(e, value) => console.log('Submitted:', value)}
+  onCancel={(e) => console.log('Canceled')}
+  onFileChange={(files) => console.log('Files:', files)}
+  attachmentProps={{
+    icon: GlobeIcon,
+  }}
+  uploadButtonProps={{
+    'aria-label': 'Upload',
+  }}
+  isLoading={false}
+/>

package/lib/cjs/components/FileInputField/FileInputField.js

@@ -19,8 +19,9 @@ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
 var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-var _url = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/url"));
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+var _some = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/some"));
+var _url = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/url"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
@@ -43,11 +44,11 @@ var _FileItem = _interopRequireDefault(require("./FileItem"));
 var _FileSelect = _interopRequireDefault(require("./FileSelect"));
 var _FileSelectIcon = _interopRequireDefault(require("./FileSelectIcon"));
 var _react2 = require("@emotion/react");
-var _excluded = ["buttonProps", "defaultButtonText", "defaultFileList", "fileList", "helperText", "iconContainerProps", "iconProps", "isDisabled", "isIconButton", "isLoading", "isMultiple", "label", "onFileSelect", "onRemove", "status", "textProps"];
+var _excluded = ["buttonProps", "defaultButtonText", "defaultFileList", "fileList", "helperText", "iconContainerProps", "iconProps", "isDisabled", "isIconButton", "isLoading", "isMultiple", "label", "onFileSelect", "onRemove", "status", "textProps", "fileTypes"];
 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 || _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 = _filterInstanceProperty2(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; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var displayName = 'FileInputField';
 var FILE_CHANGE_STATUS = {
   ADDED: 'added',
@@ -70,6 +71,7 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     onRemove = props.onRemove,
     status = props.status,
     textProps = props.textProps,
+    fileTypes = props.fileTypes,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useState = (0, _react.useState)(defaultFileList || []),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -120,6 +122,7 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     setFileChangeStatus(null);
   }, [fileChangeStatus, helperText, status]);
   var handleFileUpload = function handleFileUpload(event, newFiles) {
+    var _context2;
     if (status === _statuses["default"].ERROR) {
       setFileChangeMessage('');
     }
@@ -130,7 +133,11 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     if (!isMultiple) {
       arrayWithNewFiles = (0, _slice["default"])(arrayWithNewFiles).call(arrayWithNewFiles, 0, 1);
     }
-    var filesWithIdAndLink = (0, _map["default"])(arrayWithNewFiles).call(arrayWithNewFiles, function (newFile) {
+    var filesWithIdAndLink = (0, _map["default"])(_context2 = (0, _filter["default"])(arrayWithNewFiles).call(arrayWithNewFiles, function (newFile) {
+      return !fileTypes || (0, _some["default"])(fileTypes).call(fileTypes, function (fileType) {
+        return newFile.type.search(fileType) !== -1;
+      });
+    })).call(_context2, function (newFile) {
       return {
         fileObj: newFile,
         name: newFile.name,
@@ -141,8 +148,8 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     });
     if (isMultiple) {
       setUploadedFiles(function (prevFiles) {
-        var _context2;
-        return (0, _concat["default"])(_context2 = []).call(_context2, prevFiles, filesWithIdAndLink);
+        var _context3;
+        return (0, _concat["default"])(_context3 = []).call(_context3, prevFiles, filesWithIdAndLink);
       });
     } else {
       setUploadedFiles(filesWithIdAndLink);
@@ -224,7 +231,8 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     multiple: isMultiple,
     onChange: handleOnChange,
     ref: inputRef,
-    type: "file"
+    type: "file",
+    accept: fileTypes ? fileTypes === null || fileTypes === void 0 ? void 0 : fileTypes.join(',') : '*'
   })), filesListNode, shouldFileSelectRender() && (isIconButton ? (0, _react2.jsx)(_FileSelectIcon["default"], (0, _extends2["default"])({
     handleFileSelect: handleFileSelect,
     iconContainerProps: iconContainerProps,
@@ -243,7 +251,8 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     },
     "data-testid": "file-input-field__loader"
   })), helperText && (0, _react2.jsx)(_.Box, {
-    "aria-label": helperText
+    "aria-label": helperText,
+    role: "marquee"
   }, (0, _react2.jsx)(_.FieldHelperText, {
     status: status,
     id: helperTextId

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

@@ -14,7 +14,8 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithCustomWidth = exports.ErrorWithMultipleFiles = exports.ErrorStatusSingleFile = exports.DefaultFileListUncontrolled = exports.Default = exports.CustomButtonText = exports.ControlledState = void 0;
+exports["default"] = exports.WithFileTypePdfAndImage = exports.WithCustomWidth = exports.ErrorWithMultipleFiles = exports.ErrorStatusSingleFile = exports.DefaultFileListUncontrolled = exports.Default = exports.CustomButtonText = exports.ControlledState = void 0;
+var _some = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/some"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
@@ -150,7 +151,8 @@ var ControlledState = function ControlledState() {
     fileList: userFiles,
     sx: fitContentWidthSx,
     status: error && _statuses["default"].ERROR,
-    helperText: error
+    helperText: error,
+    isMultiple: true
   });
 };
 exports.ControlledState = ControlledState;
@@ -231,4 +233,34 @@ var WithCustomWidth = function WithCustomWidth() {
     isMultiple: true
   }));
 };
-exports.WithCustomWidth = WithCustomWidth;
+exports.WithCustomWidth = WithCustomWidth;
+var WithFileTypePdfAndImage = function WithFileTypePdfAndImage() {
+  var fileTypes = ['application/pdf', 'image/*'];
+  var _useState5 = (0, _react.useState)(),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    error = _useState6[0],
+    setError = _useState6[1];
+  var handleFileSelect = function handleFileSelect(event, files) {
+    var uploadedFileType = files[0].type;
+    var isValidFileType = (0, _some["default"])(fileTypes).call(fileTypes, function (fileType) {
+      return uploadedFileType.search(fileType) !== -1;
+    });
+    if (isValidFileType) {
+      setError(null);
+    } else {
+      setError('Not a valid File Type. Only PDF and Image files are allowed.');
+    }
+  };
+  return (0, _react2.jsx)(_index.FileInputField, {
+    label: "With File Type",
+    sx: fitContentWidthSx,
+    fileTypes: fileTypes,
+    onFileSelect: handleFileSelect,
+    onRemove: function onRemove() {
+      return setError(null);
+    },
+    status: error && _statuses["default"].ERROR,
+    helperText: error
+  });
+};
+exports.WithFileTypePdfAndImage = WithFileTypePdfAndImage;

package/lib/cjs/components/FileInputField/FileInputField.test.js

@@ -34,12 +34,16 @@ var testFileURL = 'test-file-url';
 var testFileId = 'test-file-id-1';
 var testFileName = 'chucknorris.png';
 var testFileName2 = 'chucknorris222.png';
+var testFileName3 = 'document.pdf';
 var testFile = new File(['(⌐□_□)'], testFileName, {
   type: 'image/png'
 });
 var testFile2 = new File(['(⌐□_□)'], testFileName2, {
   type: 'image/png'
 });
+var testFile3 = new File(['(⌐□_□)'], testFileName3, {
+  type: 'application/pdf'
+});
 var testFileObject = {
   id: testFileId,
   name: testFileName,
@@ -203,8 +207,7 @@ test('passing helper text should display it and correct aria attributes on input
   expect(helper).toHaveTextContent(testHelperText);
   expect(helper).toBeInTheDocument();
   expect(helper).toHaveClass("is-".concat(_statuses["default"].ERROR));
-  var helperTextID = helper.getAttribute('id');
-  expect(_react2.screen.getAllByRole('button')[0]).toHaveAttribute('aria-describedby', helperTextID);
+  expect(_react2.screen.getAllByRole('button')[0]).toHaveAttribute('aria-describedby', "file-uploaded__download-link-".concat(testFileId));
 });
 test('should display helper text if passed', function () {
   var testHelperText = 'testHelperText';
@@ -221,4 +224,23 @@ test('should render icon button if isIconButton prop is true', function () {
     name: 'Add File Icon'
   });
   expect(iconButton).toBeInTheDocument();
+});
+test('File upload should allow only image', function () {
+  var setStateMock = jest.fn();
+  jest.spyOn(_react["default"], 'useState').mockImplementation(function (initialState) {
+    return [initialState, setStateMock];
+  });
+  getComponent({
+    fileTypes: ['image/*']
+  });
+  var fileUploadFieldInput = _react2.screen.getByLabelText(testLabel);
+  _userEvent["default"].click(_react2.screen.getByTestId(fileSelectTestIdButton));
+  _react2.fireEvent.change(fileUploadFieldInput, {
+    target: {
+      files: [testFile3]
+    }
+  });
+  var val = _react2.screen.queryByText('document');
+  expect(val).not.toBeInTheDocument();
+  expect(setStateMock).toHaveBeenCalled();
 });

package/lib/cjs/components/FileInputField/FileItem.js

@@ -34,7 +34,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var FileItem = function FileItem(props) {
   var downloadLink = props.downloadLink,
     handleFileDelete = props.handleFileDelete,
-    helperTextId = props.helperTextId,
     id = props.id,
     isDisabled = props.isDisabled,
     name = props.name,
@@ -87,7 +86,7 @@ var FileItem = function FileItem(props) {
     "aria-label": name,
     "data-testid": "file-uploaded__download-file-button",
     onPress: handleDownloadPress,
-    "aria-describedby": helperTextId,
+    "aria-describedby": "file-uploaded__download-link-".concat(id),
     "aria-live": "polite"
   }, (0, _react2.jsx)(_index.Text, (0, _extends2["default"])({
     color: "active"
@@ -113,7 +112,8 @@ var FileItem = function FileItem(props) {
     ref: downloadRef,
     "aria-label": "download ".concat(name),
     "data-testid": "file-uploaded__download-link",
-    tabIndex: -1
+    tabIndex: -1,
+    id: "file-uploaded__download-link-".concat(id)
   })));
 };
 var _default = FileItem;

package/lib/cjs/types/promptInput.d.ts

@@ -18,6 +18,7 @@ export interface PromptProps {
 export interface PromptInputProps extends TextFieldProps, PromptProps {
     onKeyUp?: (e: React.KeyboardEvent, value?: string) => void;
     onKeyDown?: (e: React.KeyboardEvent, value?: string) => void;
+    isUploadButtonHidden?: boolean;
 }
 export interface AttachmentProps {
     title: string;

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

@@ -29,6 +29,8 @@ var PromptInput = /*#__PURE__*/forwardRef(function (props, ref) {
   var attachmentProps = props.attachmentProps,
     isFullScreen = props.isFullScreen,
     isLoading = props.isLoading,
+    _props$isUploadButton = props.isUploadButtonHidden,
+    isUploadButtonHidden = _props$isUploadButton === void 0 ? false : _props$isUploadButton,
     fileInputButtonProps = props.fileInputButtonProps,
     valueProp = props.value,
     defaultValueProp = props.defaultValue,
@@ -176,7 +178,7 @@ var PromptInput = /*#__PURE__*/forwardRef(function (props, ref) {
   }, fieldControlInputProps, {
     onKeyUp: onKeyUp,
     onKeyDown: onKeyDown
-  })), ___EmotionJSX(Box, {
+  })), !isUploadButtonHidden && ___EmotionJSX(Box, {
     sx: {
       mx: '.75rem',
       mb: 'auto'

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

@@ -12,15 +12,28 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 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) { _defineProperty(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; }
 import React, { useState } from 'react';
+import DocsLayout from '../../../../.storybook/storybookDocsLayout';
 import { AstroProvider, Box, NextGenTheme } from '../../..';
 import { booleanArg } from '../../../utils/docUtils/docArgTypes';
 import PromptInput from './PromptInput';
+import PromptInputReadMe from './PromptInputReadMe.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Ai Components/Prompt Input',
   component: PromptInput,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(PromptInputReadMe, null), ___EmotionJSX(DocsLayout, null));
+      },
+      source: {
+        type: 'code'
+      }
+    }
+  },
   argTypes: {
-    isLoading: _objectSpread({}, booleanArg)
+    isLoading: _objectSpread({}, booleanArg),
+    isUploadButtonHidden: _objectSpread({}, booleanArg)
   }
 };
 export var Default = function Default(args) {

package/lib/components/AIComponents/PromptInput/PromptInput.test.js

@@ -131,6 +131,15 @@ test('onSubmit prop works correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE_
     }
   }, _callee2);
 })));
+test('', function () {
+  getComponent({
+    isUploadButtonHidden: true,
+    uploadButtonProps: {
+      'data-testid': buttonTestId
+    }
+  });
+  expect(screen.queryByText(buttonTestId)).not.toBeInTheDocument();
+});
 test('onCancel prop works correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
   var control;
   return _regeneratorRuntime().wrap(function _callee3$(_context3) {

package/lib/components/AIComponents/PromptInput/PromptInputReadMe.mdx

@@ -0,0 +1,71 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/PromptInput" />
+
+# PromptInput
+
+The `PromptInput` component is used to capture user input in a conversational UI. It supports text input, file attachments, and customizable actions like submission or cancellation.
+
+### Recommended Use
+
+- Use the `PromptInput` component to collect user input in chat-like interfaces.
+- Attach files or documents to the input using the file attachment feature.
+
+### Features
+
+- **Text Input**: Allows users to type text with dynamic height adjustment based on content.
+- **File Attachments**: Supports adding and removing file attachments.
+- **Customizable Actions**: Includes `onSubmit`, `onCancel`, `onKeyDown`, and `onKeyUp` handlers for custom behavior.
+
+### Props
+
+| Prop                  | Type                 | Description                                                                 |
+| --------------------- | -------------------- | --------------------------------------------------------------------------- |
+| `value`               | `string`            | The controlled value of the input.                                          |
+| `defaultValue`        | `string`            | The default value of the input.                                             |
+| `onSubmit`            | `function`          | Callback triggered when the input is submitted.                             |
+| `onCancel`            | `function`          | Callback triggered when the input is canceled.                              |
+| `onKeyDown`           | `function`          | Callback triggered on key down events.                                      |
+| `onKeyUp`             | `function`          | Callback triggered on key up events.                                        |
+| `onFileChange`        | `function`          | Callback triggered when files are added or removed.                         |
+| `attachmentProps`     | `object`            | Props passed to the `Attachment` component for file attachments.            |
+| `fileInputButtonProps`| `object`            | Props passed to the file input button.                                       |
+| `uploadButtonProps`   | `object`            | Props passed to the upload button.                                          |
+| `isLoading`           | `boolean`           | Indicates whether the input is in a loading state.                          |
+
+### Accessibility
+
+This component adheres to accessibility guidelines to ensure a better user experience for all users.
+
+#### Keyboard Navigation
+
+| Keys         | Function                                                                 |
+| ------------ | ----------------------------------------------------------------------- |
+| Tab          | Focuses on the next focusable element within the input.                 |
+| Shift + Tab  | Moves focus to the previous focusable element.                          |
+| Enter        | Submits the input when `onSubmit` is defined.                           |
+| Shift + Enter| Adds a new line to the input.                           |
+| Escape       | Cancels the input when `onCancel` is defined.                           |
+
+#### Screen Readers
+
+- **`aria-label`**: Describes the purpose of the input field.
+- **`aria-disabled`**: Indicates when the input is disabled.
+- **`aria-live`**: Announces changes to the input dynamically.
+
+### Example Usage
+
+```jsx
+<PromptInput
+  value=""
+  onSubmit={(e, value) => console.log('Submitted:', value)}
+  onCancel={(e) => console.log('Canceled')}
+  onFileChange={(files) => console.log('Files:', files)}
+  attachmentProps={{
+    icon: GlobeIcon,
+  }}
+  uploadButtonProps={{
+    'aria-label': 'Upload',
+  }}
+  isLoading={false}
+/>

package/lib/components/FileInputField/FileInputField.js

@@ -9,15 +9,16 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["buttonProps", "defaultButtonText", "defaultFileList", "fileList", "helperText", "iconContainerProps", "iconProps", "isDisabled", "isIconButton", "isLoading", "isMultiple", "label", "onFileSelect", "onRemove", "status", "textProps"];
+var _excluded = ["buttonProps", "defaultButtonText", "defaultFileList", "fileList", "helperText", "iconContainerProps", "iconProps", "isDisabled", "isIconButton", "isLoading", "isMultiple", "label", "onFileSelect", "onRemove", "status", "textProps", "fileTypes"];
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import _URL from "@babel/runtime-corejs3/core-js-stable/url";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _someInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/some";
+import _URL from "@babel/runtime-corejs3/core-js-stable/url";
 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) { _defineProperty(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; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { mergeProps, useVisuallyHidden, VisuallyHidden } from 'react-aria';
 import { useDropzone } from 'react-dropzone';
@@ -58,6 +59,7 @@ var FileInputField = /*#__PURE__*/forwardRef(function (props, ref) {
     onRemove = props.onRemove,
     status = props.status,
     textProps = props.textProps,
+    fileTypes = props.fileTypes,
     others = _objectWithoutProperties(props, _excluded);
   var _useState = useState(defaultFileList || []),
     _useState2 = _slicedToArray(_useState, 2),
@@ -108,6 +110,7 @@ var FileInputField = /*#__PURE__*/forwardRef(function (props, ref) {
     setFileChangeStatus(null);
   }, [fileChangeStatus, helperText, status]);
   var handleFileUpload = function handleFileUpload(event, newFiles) {
+    var _context2;
     if (status === statuses.ERROR) {
       setFileChangeMessage('');
     }
@@ -118,7 +121,11 @@ var FileInputField = /*#__PURE__*/forwardRef(function (props, ref) {
     if (!isMultiple) {
       arrayWithNewFiles = _sliceInstanceProperty(arrayWithNewFiles).call(arrayWithNewFiles, 0, 1);
     }
-    var filesWithIdAndLink = _mapInstanceProperty(arrayWithNewFiles).call(arrayWithNewFiles, function (newFile) {
+    var filesWithIdAndLink = _mapInstanceProperty(_context2 = _filterInstanceProperty(arrayWithNewFiles).call(arrayWithNewFiles, function (newFile) {
+      return !fileTypes || _someInstanceProperty(fileTypes).call(fileTypes, function (fileType) {
+        return newFile.type.search(fileType) !== -1;
+      });
+    })).call(_context2, function (newFile) {
       return {
         fileObj: newFile,
         name: newFile.name,
@@ -129,8 +136,8 @@ var FileInputField = /*#__PURE__*/forwardRef(function (props, ref) {
     });
     if (isMultiple) {
       setUploadedFiles(function (prevFiles) {
-        var _context2;
-        return _concatInstanceProperty(_context2 = []).call(_context2, prevFiles, filesWithIdAndLink);
+        var _context3;
+        return _concatInstanceProperty(_context3 = []).call(_context3, prevFiles, filesWithIdAndLink);
       });
     } else {
       setUploadedFiles(filesWithIdAndLink);
@@ -212,7 +219,8 @@ var FileInputField = /*#__PURE__*/forwardRef(function (props, ref) {
     multiple: isMultiple,
     onChange: handleOnChange,
     ref: inputRef,
-    type: "file"
+    type: "file",
+    accept: fileTypes ? fileTypes === null || fileTypes === void 0 ? void 0 : fileTypes.join(',') : '*'
   })), filesListNode, shouldFileSelectRender() && (isIconButton ? ___EmotionJSX(FileSelectIcon, _extends({
     handleFileSelect: handleFileSelect,
     iconContainerProps: iconContainerProps,
@@ -231,7 +239,8 @@ var FileInputField = /*#__PURE__*/forwardRef(function (props, ref) {
     },
     "data-testid": "file-input-field__loader"
   })), helperText && ___EmotionJSX(Box, {
-    "aria-label": helperText
+    "aria-label": helperText,
+    role: "marquee"
   }, ___EmotionJSX(FieldHelperText, {
     status: status,
     id: helperTextId

package/lib/components/FileInputField/FileInputField.stories.js

@@ -9,6 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _someInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/some";
 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) { _defineProperty(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; }
 import React, { useState } from 'react';
@@ -136,7 +137,8 @@ export var ControlledState = function ControlledState() {
     fileList: userFiles,
     sx: fitContentWidthSx,
     status: error && statuses.ERROR,
-    helperText: error
+    helperText: error,
+    isMultiple: true
   });
 };
 export var DefaultFileListUncontrolled = function DefaultFileListUncontrolled() {
@@ -212,4 +214,33 @@ export var WithCustomWidth = function WithCustomWidth() {
     },
     isMultiple: true
   }));
+};
+export var WithFileTypePdfAndImage = function WithFileTypePdfAndImage() {
+  var fileTypes = ['application/pdf', 'image/*'];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    error = _useState6[0],
+    setError = _useState6[1];
+  var handleFileSelect = function handleFileSelect(event, files) {
+    var uploadedFileType = files[0].type;
+    var isValidFileType = _someInstanceProperty(fileTypes).call(fileTypes, function (fileType) {
+      return uploadedFileType.search(fileType) !== -1;
+    });
+    if (isValidFileType) {
+      setError(null);
+    } else {
+      setError('Not a valid File Type. Only PDF and Image files are allowed.');
+    }
+  };
+  return ___EmotionJSX(FileInputField, {
+    label: "With File Type",
+    sx: fitContentWidthSx,
+    fileTypes: fileTypes,
+    onFileSelect: handleFileSelect,
+    onRemove: function onRemove() {
+      return setError(null);
+    },
+    status: error && statuses.ERROR,
+    helperText: error
+  });
 };

package/lib/components/FileInputField/FileInputField.test.js

@@ -31,12 +31,16 @@ var testFileURL = 'test-file-url';
 var testFileId = 'test-file-id-1';
 var testFileName = 'chucknorris.png';
 var testFileName2 = 'chucknorris222.png';
+var testFileName3 = 'document.pdf';
 var testFile = new File(['(⌐□_□)'], testFileName, {
   type: 'image/png'
 });
 var testFile2 = new File(['(⌐□_□)'], testFileName2, {
   type: 'image/png'
 });
+var testFile3 = new File(['(⌐□_□)'], testFileName3, {
+  type: 'application/pdf'
+});
 var testFileObject = {
   id: testFileId,
   name: testFileName,
@@ -200,8 +204,7 @@ test('passing helper text should display it and correct aria attributes on input
   expect(helper).toHaveTextContent(testHelperText);
   expect(helper).toBeInTheDocument();
   expect(helper).toHaveClass("is-".concat(statuses.ERROR));
-  var helperTextID = helper.getAttribute('id');
-  expect(screen.getAllByRole('button')[0]).toHaveAttribute('aria-describedby', helperTextID);
+  expect(screen.getAllByRole('button')[0]).toHaveAttribute('aria-describedby', "file-uploaded__download-link-".concat(testFileId));
 });
 test('should display helper text if passed', function () {
   var testHelperText = 'testHelperText';
@@ -218,4 +221,23 @@ test('should render icon button if isIconButton prop is true', function () {
     name: 'Add File Icon'
   });
   expect(iconButton).toBeInTheDocument();
+});
+test('File upload should allow only image', function () {
+  var setStateMock = jest.fn();
+  jest.spyOn(React, 'useState').mockImplementation(function (initialState) {
+    return [initialState, setStateMock];
+  });
+  getComponent({
+    fileTypes: ['image/*']
+  });
+  var fileUploadFieldInput = screen.getByLabelText(testLabel);
+  userEvent.click(screen.getByTestId(fileSelectTestIdButton));
+  fireEvent.change(fileUploadFieldInput, {
+    target: {
+      files: [testFile3]
+    }
+  });
+  var val = screen.queryByText('document');
+  expect(val).not.toBeInTheDocument();
+  expect(setStateMock).toHaveBeenCalled();
 });

package/lib/components/FileInputField/FileItem.js

@@ -23,7 +23,6 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var FileItem = function FileItem(props) {
   var downloadLink = props.downloadLink,
     handleFileDelete = props.handleFileDelete,
-    helperTextId = props.helperTextId,
     id = props.id,
     isDisabled = props.isDisabled,
     name = props.name,
@@ -76,7 +75,7 @@ var FileItem = function FileItem(props) {
     "aria-label": name,
     "data-testid": "file-uploaded__download-file-button",
     onPress: handleDownloadPress,
-    "aria-describedby": helperTextId,
+    "aria-describedby": "file-uploaded__download-link-".concat(id),
     "aria-live": "polite"
   }, ___EmotionJSX(Text, _extends({
     color: "active"
@@ -102,7 +101,8 @@ var FileItem = function FileItem(props) {
     ref: downloadRef,
     "aria-label": "download ".concat(name),
     "data-testid": "file-uploaded__download-link",
-    tabIndex: -1
+    tabIndex: -1,
+    id: "file-uploaded__download-link-".concat(id)
   })));
 };
 export default FileItem;

package/package.json

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