@spaced-out/ui-design-system 0.4.12 → 0.4.13-beta.1

package/lib/hooks/useDebounce/useDebounce.stories.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Example = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _Input = require("../../components/Input/Input");
+var _Text = require("../../components/Text");
+var _useDebounce = require("./useDebounce");
+var _useDebounceStoriesModule = _interopRequireDefault(require("./useDebounce.stories.module.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'Hooks/useDebounce',
+  component: _useDebounce.useDebounce,
+  parameters: {
+    docs: {
+      description: {
+        component: `
+\`\`\`js
+import { useDebounce } from "@spaced-out/ui-design-system/lib/hooks/useDebounce";
+\`\`\`
+The \`useDebounce\` hook is a custom hook that delays updating a value until after a specified delay period has passed since the last change.
+
+### Props Accepted
+- \`value\`: The value that needs to be debounced.
+- \`delay\`: The debounce delay time in milliseconds. Defaults to 300ms.
+
+### Props Returned
+- \`debouncedValue\`: The debounced value, updated after the specified delay.
+
+### Usage
+\`\`\`jsx
+import { useDebounce } from './useDebounce';
+
+const MyComponent = () => {
+  const [inputValue, setInputValue] = useState('');
+  const debouncedValue = useDebounce(inputValue, 500);
+
+  return (
+    <div>
+      <input 
+        type="text" 
+        value={inputValue} 
+        onChange={(e) => setInputValue(e.target.value)} 
+        placeholder="Type something..." 
+      />
+      <BodyLarge>{debouncedValue}</BodyLarge>
+    </div>
+  );
+};
+
+export default MyComponent;
+\`\`\`
+          `
+      }
+    }
+  }
+};
+const _Example = args => {
+  const [value, setValue] = React.useState(args.value);
+  const debouncedValue = (0, _useDebounce.useDebounce)(value, 500);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _useDebounceStoriesModule.default.inputContainer
+  }, /*#__PURE__*/React.createElement(_Input.Input, _extends({}, args, {
+    value: value,
+    onChange: e => setValue(e.target.value)
+  })), /*#__PURE__*/React.createElement(_Text.BodyLarge, null, debouncedValue));
+};
+exports._Example = _Example;
+_Example.args = {
+  type: 'text',
+  size: 'medium',
+  label: 'Form Label',
+  value: '',
+  placeholder: 'Input Some text here'
+};

package/lib/hooks/useFileUpload/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useFileUpload';
+//# sourceMappingURL=index.d.ts.map

package/lib/hooks/useFileUpload/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/useFileUpload/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/lib/hooks/useFileUpload/useFileUpload.d.ts

@@ -0,0 +1,17 @@
+import type { FileObject, FileProgress, FileUploadBaseProps } from '../../components/FileUpload';
+export type UseFileUploadReturnProps = {
+    validFiles: Array<FileObject>;
+    rejectedFiles: Array<FileObject>;
+    isDragActive: boolean;
+    shouldAcceptFiles: boolean;
+    getRootProps: (arg1: unknown) => unknown;
+    getInputProps: (arg1: unknown) => unknown;
+    handleFileClear: (id: string) => unknown;
+    handleClear: () => unknown;
+    moveFileToProgress: (id: string, progress: FileProgress) => unknown;
+    moveFileToSuccess: (id: string, successMessage?: string) => unknown;
+    moveFileToReject: (id: string, rejectReason?: string) => unknown;
+    setShowReUpload: (id: string, showReUpload?: boolean) => unknown;
+};
+export declare const useFileUpload: ({ maxFiles, maxSize, accept, disabled, onValidFilesDrop, onRejectedFilesDrop, onFileClear, onClear, }: FileUploadBaseProps) => UseFileUploadReturnProps;
+//# sourceMappingURL=useFileUpload.d.ts.map

package/lib/hooks/useFileUpload/useFileUpload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFileUpload.d.ts","sourceRoot":"","sources":["../../../src/hooks/useFileUpload/useFileUpload.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,UAAU,EACV,YAAY,EAEZ,mBAAmB,EACpB,MAAM,6BAA6B,CAAC;AAIrC,MAAM,MAAM,wBAAwB,GAAG;IACrC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC9B,aAAa,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IACjC,YAAY,EAAE,OAAO,CAAC;IACtB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,OAAO,CAAC;IACzC,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,OAAO,CAAC;IAC1C,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;IACzC,WAAW,EAAE,MAAM,OAAO,CAAC;IAC3B,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,YAAY,KAAK,OAAO,CAAC;IACpE,iBAAiB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,cAAc,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;IACpE,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;IACjE,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC;CAClE,CAAC;AA4LF,eAAO,MAAM,aAAa,GACxB,uGASG,mBAAmB,KACrB,wBAqGF,CAAC"}

package/lib/hooks/useFileUpload/useFileUpload.js

@@ -8,8 +8,8 @@ var React = _interopRequireWildcard(require("react"));
 var _reactDropzone = require("react-dropzone");
 var _helpers = require("../../utils/helpers");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-// $FlowFixMe[untyped-import]
 // useFileUpload hook returns these props
+
 const initialState = {
   validFiles: [],
   rejectedFiles: []
@@ -180,7 +180,9 @@ const useFileUpload = _ref => {
         file,
         id: (0, _helpers.uuid)(),
         reject: true,
-        rejectReason: DROPZONE_ERROR_MESSAGES[errors[0].code] || 'Some error occurred uploading this file',
+        rejectReason:
+        // @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ readonly 'file-too-large': "File exceeds maximum size"; readonly 'file-invalid-type': "Wrong file type"; readonly 'too-many-files': "Too many files"; readonly 'file-too-small': "File is too small"; }'.
+        DROPZONE_ERROR_MESSAGES[errors[0].code] || 'Some error occurred uploading this file',
         success: false,
         successMessage: undefined,
         progress: undefined,
@@ -257,6 +259,7 @@ const useFileUpload = _ref => {
     noClick: !shouldAcceptFiles,
     noDrag: !shouldAcceptFiles,
     onDropAccepted: handleDropAccepted,
+    // @ts-ignore - TS2322 - Type '(fileRejections: Array<FileRejection>) => void' is not assignable to type '(fileRejections: FileRejection[], event: DropEvent) => void'.
     onDropRejected: handleDropRejected
   });
   return {
@@ -264,7 +267,9 @@ const useFileUpload = _ref => {
     rejectedFiles: state.rejectedFiles,
     shouldAcceptFiles,
     isDragActive,
+    // @ts-ignore - TS2322 - Type '<T extends DropzoneRootProps>(props?: T | undefined) => T' is not assignable to type '(arg1: unknown) => unknown'.
     getRootProps,
+    // @ts-ignore - TS2322 - Type '<T extends DropzoneInputProps>(props?: T | undefined) => T' is not assignable to type '(arg1: unknown) => unknown'.
     getInputProps,
     handleFileClear,
     handleClear,

package/lib/hooks/useFileUpload/useFileUpload.stories.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+declare const _default: {
+    tags: string[];
+    title: string;
+    component: ({ maxFiles, maxSize, accept, disabled, onValidFilesDrop, onRejectedFilesDrop, onFileClear, onClear, }: import("../..").FileUploadBaseProps) => import("./useFileUpload").UseFileUploadReturnProps;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Example: () => React.ReactElement<React.ComponentProps<"div">>;
+//# sourceMappingURL=useFileUpload.stories.d.ts.map

package/lib/hooks/useFileUpload/useFileUpload.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFileUpload.stories.d.ts","sourceRoot":"","sources":["../../../src/hooks/useFileUpload/useFileUpload.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;AAe1B,wBAiPE;AAEF,eAAO,MAAM,OAAO,QAAO,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAiNxE,CAAC"}

package/lib/hooks/useFileUpload/useFileUpload.stories.js

@@ -0,0 +1,405 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Example = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Button = require("../../components/Button");
+var _Card = require("../../components/Card");
+var _Dropdown = require("../../components/Dropdown");
+var _Icon = require("../../components/Icon");
+var _LinearLoader = require("../../components/LinearLoader");
+var _Text = require("../../components/Text");
+var _Truncate = require("../../components/Truncate");
+var _useFileUpload = require("./useFileUpload");
+var _useFileUploadStoriesModule = _interopRequireDefault(require("./useFileUpload.stories.module.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'Hooks/useFileUpload',
+  component: _useFileUpload.useFileUpload,
+  parameters: {
+    docs: {
+      description: {
+        component: `
+\`\`\`js
+import { useFileUpload } from "@spaced-out/ui-design-system/lib/hooks/useFileUpload";
+\`\`\`
+The \`useFileUpload\` hook is a custom hook that provides functionality for handling file uploads.
+It allows you to manage the state of selected files, handle file validation and rejection,
+and perform various actions on the files.
+
+### Props Accepted
+- \`maxFiles\` (optional): The maximum number of files that can be selected. Defaults to 1.
+- \`maxSize\` (optional): The maximum size of the file that can be uploaded, in bytes.
+- \`accept\` (optional): An object specifying accepted file types. The keys are MIME types, and the values are arrays of file extensions.
+- \`disabled\` (optional): If set to \`true\`, the file upload functionality is disabled.
+- \`onValidFilesDrop\` (optional): A callback function called when valid files are selected or dropped. Receives an array of accepted files.
+- \`onRejectedFilesDrop\` (optional): A callback function called when files are rejected due to validation errors. Receives an array of rejected files.
+- \`onFileClear\` (optional): A callback function called when a file is cleared. Receives the ID of the cleared file.
+- \`onClear\` (optional): A callback function called when all files are cleared.
+
+### Props Returned
+- \`validFiles\`: An array of valid files that have been selected.
+- \`rejectedFiles\`: An array of rejected files with associated rejection reasons.
+- \`isDragActive\`: A boolean indicating whether a file is being dragged over the dropzone.
+- \`shouldAcceptFiles\`: A function that returns whether the dropzone should accept files based on the current state.
+- \`getRootProps\`: A function that returns props to be spread onto the dropzone container element.
+- \`getInputProps\`: A function that returns props to be spread onto the file input element.
+- \`handleFileClear\`: A function to clear a specific file from the selected files.
+- \`handleClear\`: A function to clear all selected files.
+- \`moveFileToProgress\`: A function to move a file to the progress state. Accepts the file ID and progress value.
+- \`moveFileToSuccess\`: A function to move a file to the success state. Accepts the file ID and optional success message.
+- \`moveFileToReject\`: A function to move a file to the reject state. Accepts the file ID and optional reject reason.
+- \`setShowReUpload\`: A function to set the \`showReUpload\` property of a file. Accepts the file ID and optional boolean value.
+
+### Usage
+\`\`\`jsx
+import { useFileUpload } from './useFileUpload';
+
+export const Example = (): React$Element<'div'> => {
+  const [selectedFile, setSelectedFile] = React.useState(null);
+  const { validFiles, rejectedFiles, isDragActive, shouldAcceptFiles, getRootProps, getInputProps, handleFileClear, handleClear, moveFileToProgress, moveFileToSuccess, moveFileToReject,  } = useFileUpload({
+    maxFiles: 5,
+    maxSize: 5242880, // 5MB
+    accept: {
+      'image/*': ['.jpg', '.jpeg', '.png'],
+      'audio/*': ['.mp3', '.wav'],
+    },
+    disabled: false,
+    onValidFilesDrop: (acceptedFiles) => {
+      console.error('Valid files selected:', acceptedFiles);
+    },
+    onRejectedFilesDrop: (fileRejections) => {
+      console.error('Rejected files:', fileRejections);
+    },
+    onFileClear: (id) => {
+      console.error('File cleared:', id);
+    },
+    onClear: () => {
+      console.error('All files cleared');
+    },
+  });
+
+  return (
+    <div className={css.container}>
+      {/* Render the dropzone area */}
+      <div className={css.content}>
+        <div className={css.heading} {...getRootProps()}>
+          <input {...getInputProps()} />
+          {isDragActive ? (
+            <BodyLarge color="information">Drop the files here...</BodyLarge>
+          ) : (
+            <BodyLarge color="information">
+              Drag and drop files here or click to select files
+            </BodyLarge>
+          )}
+        </div>
+
+        {/* Render the clear all files button */}
+        {[...validFiles, ...rejectedFiles].length > 0 && (
+          <div className={css.globalClose}>
+            <Button type="ghost" iconLeftName="trash-can" onClick={handleClear}>
+              Clear all Files
+            </Button>
+          </div>
+        )}
+
+        {/* Render the list of valid files */}
+        {validFiles.length > 0 && (
+          <>
+            <BodyLarge color="success">Valid Files:</BodyLarge>
+            <Card classNames={{wrapper: css.filesBlock}}>
+              <ul className={css.noPadding}>
+                {validFiles.map((file) => (
+                  <li key={file.id}>
+                    <div className={css.list}>
+                      <BodyLarge color="success">
+                        <Truncate>
+                          {file.file.name} - {file.file.size} bytes{' '}
+                        </Truncate>
+                      </BodyLarge>
+                      <ClickableIcon
+                        name="trash-can"
+                        color="success"
+                        onClick={() => handleFileClear(file.id)}
+                      ></ClickableIcon>
+                    </div>
+                    {file.success && (
+                      <div className={css.stateMsg}>
+                        <Icon name="circle-check" color="success" />
+                        <BodySmall color="success">
+                          {file.successMessage}
+                        </BodySmall>
+                      </div>
+                    )}
+                    {!!file.progress && (
+                      <div className={css.stateMsg}>
+                        <LinearLoader size="small" value={file.progress} />
+                      </div>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </Card>
+          </>
+        )}
+
+        {/* Render the list of rejected files */}
+        {rejectedFiles.length > 0 && (
+          <>
+            <BodyLarge color="danger">Rejected Files:</BodyLarge>
+            <Card classNames={{wrapper: css.filesBlock}}>
+              <ul className={css.noPadding}>
+                {rejectedFiles.map((file) => (
+                  <li key={file.id}>
+                    <div className={css.list}>
+                      <BodyLarge color="danger">
+                        <Truncate>
+                          {file.file.name} - {file.file.size} bytes{' '}
+                        </Truncate>
+                      </BodyLarge>
+                      <ClickableIcon
+                        name="trash-can"
+                        color="danger"
+                        onClick={() => handleFileClear(file.id)}
+                      ></ClickableIcon>
+                    </div>
+                    {file.reject && (
+                      <div className={css.stateMsg}>
+                        <Icon name="bomb" color="danger" />
+                        <BodySmall color="danger">
+                          {file.rejectReason}
+                        </BodySmall>
+                      </div>
+                    )}
+                    {!!file.progress && (
+                      <div className={css.stateMsg}>
+                        <LinearLoader size="small" value={file.progress} />
+                      </div>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </Card>
+          </>
+        )}
+
+        {[...validFiles, ...rejectedFiles].length > 0 && (
+          <div className={css.tooling}>
+            <Dropdown
+              classNames={{wrapper: css.ddWrapper}}
+              label="Move File"
+              dropdownInputText={selectedFile?.label}
+              placeholder="Select a file"
+              menu={{
+                options: [...validFiles, ...rejectedFiles].map((option) => ({
+                  key: option.id,
+                  label: option.file.name,
+                })),
+              }}
+              onChange={(option) => setSelectedFile(option)}
+            ></Dropdown>
+            {!!selectedFile?.key && (
+              <div className={css.buttons}>
+                <Button
+                  type="tertiary"
+                  onClick={() =>
+                    selectedFile.key &&
+                    moveFileToSuccess(
+                      selectedFile.key,
+                      'Your custom Success Message',
+                    )
+                  }
+                >
+                  Move to Success
+                </Button>
+                <Button
+                  type="tertiary"
+                  onClick={() =>
+                    selectedFile.key &&
+                    moveFileToReject(
+                      selectedFile.key,
+                      'Your custom reject reason',
+                    )
+                  }
+                >
+                  Move to Reject
+                </Button>
+                <Button
+                  type="tertiary"
+                  onClick={() =>
+                    selectedFile.key &&
+                    moveFileToProgress(
+                      selectedFile.key,
+                      ([...validFiles, ...rejectedFiles].find(
+                        (op) => op.id === selectedFile.key,
+                      )?.progress || 0) + 10,
+                    )
+                  }
+                >
+                  Set Progress + 10
+                </Button>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default MyComponent;
+\`\`\`
+          `
+      }
+    }
+  }
+};
+const Example = () => {
+  const [selectedFile, setSelectedFile] = _react.default.useState(null);
+  const {
+    validFiles,
+    rejectedFiles,
+    isDragActive,
+    getRootProps,
+    getInputProps,
+    handleFileClear,
+    handleClear,
+    moveFileToProgress,
+    moveFileToSuccess,
+    moveFileToReject
+  } = (0, _useFileUpload.useFileUpload)({
+    maxFiles: 5,
+    maxSize: 5242880,
+    // 5MB
+    accept: {
+      'image/*': ['.jpg', '.jpeg', '.png'],
+      'audio/*': ['.mp3', '.wav']
+    },
+    disabled: false,
+    onValidFilesDrop: acceptedFiles => {
+      console.error('Valid files selected:', acceptedFiles);
+    },
+    onRejectedFilesDrop: fileRejections => {
+      console.error('Rejected files:', fileRejections);
+    },
+    onFileClear: id => {
+      console.error('File cleared:', id);
+    },
+    onClear: () => {
+      console.error('All files cleared');
+    }
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _useFileUploadStoriesModule.default.container
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _useFileUploadStoriesModule.default.content
+  }, /*#__PURE__*/_react.default.createElement("div", _extends({
+    className: _useFileUploadStoriesModule.default.heading
+  }, getRootProps()), /*#__PURE__*/_react.default.createElement("input", getInputProps()), isDragActive ? /*#__PURE__*/_react.default.createElement(_Text.BodyLarge, {
+    color: "information"
+  }, "Drop the files here...") : /*#__PURE__*/_react.default.createElement(_Text.BodyLarge, {
+    color: "information"
+  }, "Drag and drop files here or click to select files")), [...validFiles, ...rejectedFiles].length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: _useFileUploadStoriesModule.default.globalClose
+  }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    type: "ghost",
+    iconLeftName: "trash-can",
+    onClick: handleClear
+  }, "Clear all Files")), validFiles.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.BodyLarge, {
+    color: "success"
+  }, "Valid Files:"), /*#__PURE__*/_react.default.createElement(_Card.Card, {
+    classNames: {
+      wrapper: _useFileUploadStoriesModule.default.filesBlock
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _useFileUploadStoriesModule.default.noPadding
+  }, validFiles.map(file => /*#__PURE__*/_react.default.createElement("div", {
+    key: file.id,
+    className: _useFileUploadStoriesModule.default.col
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _useFileUploadStoriesModule.default.list
+  }, file.success && /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    name: "circle-check",
+    color: "success"
+  }), /*#__PURE__*/_react.default.createElement(_Text.BodyLarge, {
+    color: "success"
+  }, /*#__PURE__*/_react.default.createElement(_Truncate.Truncate, null, file.file.name, " - ", file.file.size, " bytes", ' ')), /*#__PURE__*/_react.default.createElement(_Icon.ClickableIcon, {
+    name: "trash-can",
+    color: "success",
+    onClick: () => handleFileClear(file.id)
+  })), file.successMessage && /*#__PURE__*/_react.default.createElement("div", {
+    className: _useFileUploadStoriesModule.default.stateMsg
+  }, /*#__PURE__*/_react.default.createElement(_Text.BodySmall, {
+    color: "success"
+  }, file.successMessage)), !!file.progress && /*#__PURE__*/_react.default.createElement("div", {
+    className: _useFileUploadStoriesModule.default.stateMsg
+  }, /*#__PURE__*/_react.default.createElement(_LinearLoader.LinearLoader, {
+    size: "small",
+    value: file.progress === 'indeterminate' ? 0 : file.progress,
+    indeterminate: file.progress === 'indeterminate'
+  }))))))), rejectedFiles.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.BodyLarge, {
+    color: "danger"
+  }, "Rejected Files:"), /*#__PURE__*/_react.default.createElement(_Card.Card, {
+    classNames: {
+      wrapper: _useFileUploadStoriesModule.default.filesBlock
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _useFileUploadStoriesModule.default.noPadding
+  }, rejectedFiles.map(file => /*#__PURE__*/_react.default.createElement("div", {
+    key: file.id,
+    className: _useFileUploadStoriesModule.default.col
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _useFileUploadStoriesModule.default.list
+  }, file.reject && /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    name: "bomb",
+    color: "danger"
+  }), /*#__PURE__*/_react.default.createElement(_Text.BodyLarge, {
+    color: "danger"
+  }, /*#__PURE__*/_react.default.createElement(_Truncate.Truncate, null, file.file.name, " - ", file.file.size, " bytes", ' ')), /*#__PURE__*/_react.default.createElement(_Icon.ClickableIcon, {
+    name: "trash-can",
+    color: "danger",
+    onClick: () => handleFileClear(file.id)
+  })), !!file.rejectReason && /*#__PURE__*/_react.default.createElement("div", {
+    className: _useFileUploadStoriesModule.default.stateMsg
+  }, /*#__PURE__*/_react.default.createElement(_Text.BodySmall, {
+    color: "danger"
+  }, file.rejectReason)), !!file.progress && /*#__PURE__*/_react.default.createElement("div", {
+    className: _useFileUploadStoriesModule.default.stateMsg
+  }, /*#__PURE__*/_react.default.createElement(_LinearLoader.LinearLoader, {
+    size: "small",
+    value: file.progress === 'indeterminate' ? 0 : file.progress,
+    indeterminate: file.progress === 'indeterminate'
+  }))))))), [...validFiles, ...rejectedFiles].length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: _useFileUploadStoriesModule.default.tooling
+  }, /*#__PURE__*/_react.default.createElement(_Dropdown.Dropdown, {
+    classNames: {
+      wrapper: _useFileUploadStoriesModule.default.ddWrapper
+    },
+    label: "Move File",
+    dropdownInputText: selectedFile?.label,
+    placeholder: "Select a file",
+    menu: {
+      options: [...validFiles, ...rejectedFiles].map(option => ({
+        key: option.id,
+        label: option.file.name
+      }))
+    },
+    onChange: option => setSelectedFile(option)
+  }), !!selectedFile?.key && /*#__PURE__*/_react.default.createElement("div", {
+    className: _useFileUploadStoriesModule.default.buttons
+  }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    type: "tertiary",
+    onClick: () => selectedFile.key && moveFileToSuccess(selectedFile.key, 'Your custom Success Message')
+  }, "Move to Success"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    type: "tertiary",
+    onClick: () => selectedFile.key && moveFileToReject(selectedFile.key, 'Your custom reject reason')
+  }, "Move to Reject"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    type: "tertiary",
+    onClick: () => selectedFile.key && moveFileToProgress(selectedFile.key, 'indeterminate')
+  }, "Set Progress + 10")))));
+};
+exports.Example = Example;

package/lib/hooks/useFilteredOptions/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useFilteredOptions';
+//# sourceMappingURL=index.d.ts.map

package/lib/hooks/useFilteredOptions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/useFilteredOptions/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/lib/hooks/useFilteredOptions/useFilteredOptions.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+export type GroupTitleOption<V> = {
+    groupTitle: React.ReactNode;
+    options?: V[];
+    showLineDivider?: boolean;
+};
+export declare function useFilteredOptions<V>({ searchTerm, options, excludedKeys, groupTitleOptions, searchOptionsBy, }: {
+    searchTerm: string;
+    options?: V[];
+    groupTitleOptions?: GroupTitleOption<V>[];
+    excludedKeys?: string[];
+    searchOptionsBy?: (option: V, searchTerm: string) => boolean;
+}): {
+    filteredOptions?: V[];
+    filteredGroupTitleOptions?: GroupTitleOption<V>[];
+};
+//# sourceMappingURL=useFilteredOptions.d.ts.map

package/lib/hooks/useFilteredOptions/useFilteredOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFilteredOptions.d.ts","sourceRoot":"","sources":["../../../src/hooks/useFilteredOptions/useFilteredOptions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI;IAChC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC;IACd,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAIF,wBAAgB,kBAAkB,CAAC,CAAC,EAClC,EACE,UAAU,EACV,OAAY,EACZ,YAAiB,EACjB,iBAAsB,EAEtB,eAeC,GACF,EAAE;IACD,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC;IACd,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1C,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC;CAC9D,GACA;IACD,eAAe,CAAC,EAAE,CAAC,EAAE,CAAC;IACtB,yBAAyB,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC;CACnD,CA+CA"}

package/lib/hooks/useFilteredOptions/useFilteredOptions.js

@@ -7,6 +7,7 @@ exports.useFilteredOptions = useFilteredOptions;
 var React = _interopRequireWildcard(require("react"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 // TODO: V should generic with constraints.
+
 function useFilteredOptions(_ref) {
   let {
     searchTerm,
@@ -15,6 +16,7 @@ function useFilteredOptions(_ref) {
     groupTitleOptions = [],
     searchOptionsBy = (option, searchTerm) => {
       // $FlowFixMe
+      // @ts-ignore - TS2322 - Type 'V' is not assignable to type '{ label: string; key: string; }'.
       const {
         label,
         key
@@ -23,9 +25,9 @@ function useFilteredOptions(_ref) {
     }
   } = _ref;
   // Memoize the filterExcluded function for performance
-  const filterExcluded = React.useCallback(list =>
-  // $FlowFixMe - list has key property
-  list ? list.filter(option => !excludedKeys.includes(option.key)) : [], [excludedKeys]);
+  const filterExcluded = React.useCallback(
+  // @ts-ignore - TS2339 - Property 'key' does not exist on type 'V'.
+  list => list ? list.filter(option => !excludedKeys.includes(option.key)) : [], [excludedKeys]);
   return React.useMemo(() => {
     const trimmedValue = (searchTerm || '').trim().toLowerCase();
 

package/lib/hooks/useFilteredOptions/useFilteredOptions.stories.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useFilteredOptions } from './useFilteredOptions';
+declare const _default: {
+    tags: string[];
+    title: string;
+    component: typeof useFilteredOptions;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Basic: () => React.JSX.Element;
+export declare const Grouped: () => React.JSX.Element;
+//# sourceMappingURL=useFilteredOptions.stories.d.ts.map

package/lib/hooks/useFilteredOptions/useFilteredOptions.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFilteredOptions.stories.d.ts","sourceRoot":"","sources":["../../../src/hooks/useFilteredOptions/useFilteredOptions.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;;;;;;;;;;;;;AAKxD,wBA+CE;AASF,eAAO,MAAM,KAAK,yBA2BjB,CAAC;AAsBF,eAAO,MAAM,OAAO,yBAyBnB,CAAC"}