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

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

@@ -1,405 +0,0 @@
-"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

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

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

@@ -1 +0,0 @@
-{"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

@@ -1,17 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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.stories.d.ts

@@ -1,18 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"}

package/lib/hooks/useFilteredOptions/useFilteredOptions.stories.js

@@ -1,155 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Grouped = exports.Basic = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _Input = require("../../components/Input");
-var _Menu = require("../../components/Menu");
-var _useFilteredOptions = require("./useFilteredOptions");
-var _useFilteredOptionsStoriesModule = _interopRequireDefault(require("./useFilteredOptions.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); }
-var _default = exports.default = {
-  tags: ['autodocs'],
-  title: 'Hooks/useFilteredOptions',
-  component: _useFilteredOptions.useFilteredOptions,
-  parameters: {
-    docs: {
-      description: {
-        component: `
-\`\`\`js
-import { useFilteredOptions } from "@spaced-out/ui-design-system/lib/hooks/useFilteredOptions";
-\`\`\`
-The \`useFilteredOptions\` hook provides a way to filter a flat or grouped list of options based on a search term and excluded keys.
-
-### Parameters
-- \`searchTerm\`: The string to filter options by.
-- \`options\`: (optional) Flat array of options.
-- \`groupTitleOptions\`: (optional) Array of grouped options.
-- \`excludedKeys\`: (optional) Array of keys to exclude from results.
-- \`searchOptionsBy\`: (optional) Custom filter function.
-
-### Return Type
-- An object with:
-  - \`filteredOptions\`: The filtered flat options array.
-  - \`filteredGroupTitleOptions\`: The filtered grouped options array.
-
-### Usage
-\`\`\`jsx
-const { filteredOptions, filteredGroupTitleOptions } = useFilteredOptions({
-  searchTerm,
-  options,
-  groupTitleOptions,
-  excludedKeys,
-  searchOptionsBy,
-});
-\`\`\`
-
-- \`searchTerm\`: The string to filter options by.
-- \`options\`: (optional) Flat array of options.
-- \`groupTitleOptions\`: (optional) Array of grouped options.
-- \`excludedKeys\`: (optional) Array of keys to exclude from results.
-- \`searchOptionsBy\`: (optional) Custom filter function.
-
-See the examples below for both flat and grouped options.
-        `
-      }
-    }
-  }
-};
-const options = [{
-  key: 'apple',
-  label: 'Apple'
-}, {
-  key: 'banana',
-  label: 'Banana'
-}, {
-  key: 'orange',
-  label: 'Orange'
-}, {
-  key: 'grape',
-  label: 'Grape'
-}];
-const Basic = () => {
-  const [searchTerm, setSearchTerm] = React.useState('');
-  const {
-    filteredOptions
-  } = (0, _useFilteredOptions.useFilteredOptions)({
-    searchTerm,
-    options
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    className: _useFilteredOptionsStoriesModule.default.container
-  }, /*#__PURE__*/React.createElement(_Input.Input, {
-    type: "text",
-    value: searchTerm,
-    onChange: e => setSearchTerm(e.target.value),
-    placeholder: "Search fruits..."
-  }), /*#__PURE__*/React.createElement(_Menu.Menu, {
-    options: filteredOptions,
-    onSelect: option => {
-      // You can add a handler here if you want to show selection
-      // For demo, just log the selected option
-      // eslint-disable-next-line no-console
-      console.log('Selected:', option);
-    }
-  }));
-};
-exports.Basic = Basic;
-const groupTitleOptions = [{
-  groupTitle: /*#__PURE__*/React.createElement("span", null, "Fruits"),
-  options: [{
-    key: 'apple',
-    label: 'Apple'
-  }, {
-    key: 'banana',
-    label: 'Banana'
-  }, {
-    key: 'orange',
-    label: 'Orange'
-  }, {
-    key: 'grape',
-    label: 'Grape'
-  }]
-}, {
-  groupTitle: /*#__PURE__*/React.createElement("span", null, "Vegetables"),
-  options: [{
-    key: 'carrot',
-    label: 'Carrot'
-  }, {
-    key: 'broccoli',
-    label: 'Broccoli'
-  }, {
-    key: 'spinach',
-    label: 'Spinach'
-  }]
-}];
-const Grouped = () => {
-  const [searchTerm, setSearchTerm] = React.useState('');
-  const {
-    filteredGroupTitleOptions
-  } = (0, _useFilteredOptions.useFilteredOptions)({
-    searchTerm,
-    // @ts-ignore - TS2322 - Type 'MenuGroupTitleOption[]' is not assignable to type 'GroupTitleOption<MenuOption>[]'.
-    groupTitleOptions
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      maxWidth: 300
-    }
-  }, /*#__PURE__*/React.createElement(_Input.Input, {
-    type: "text",
-    value: searchTerm,
-    onChange: e => setSearchTerm(e.target.value),
-    placeholder: "Search fruits or vegetables..."
-  }), /*#__PURE__*/React.createElement(_Menu.Menu, {
-    groupTitleOptions: filteredGroupTitleOptions,
-    onSelect: option => {
-      // eslint-disable-next-line no-console
-      console.log('Selected:', option);
-    }
-  }));
-};
-exports.Grouped = Grouped;

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

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

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

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

package/lib/hooks/useInfiniteScroll/useInfiniteScroll.d.ts

@@ -1,15 +0,0 @@
-type InfiniteScrollOptions = {
-    itemSize: number | ((index: number) => number);
-    threshold: number;
-    itemsLength: number;
-    hasNextPage: boolean;
-    loadMoreItems: () => Promise<void>;
-    containerHeight: number;
-    isVariableSizeList?: boolean;
-};
-export declare function useInfiniteScroll({ itemSize, threshold, itemsLength, hasNextPage, loadMoreItems, containerHeight, isVariableSizeList, }: InfiniteScrollOptions): (scrollData: {
-    scrollOffset: number;
-    scrollDirection: 'forward' | 'backward';
-}) => void;
-export {};
-//# sourceMappingURL=useInfiniteScroll.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useInfiniteScroll.d.ts","sourceRoot":"","sources":["../../../src/hooks/useInfiniteScroll/useInfiniteScroll.ts"],"names":[],"mappings":"AAGA,KAAK,qBAAqB,GAAG;IAC3B,QAAQ,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IAC/C,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACnC,eAAe,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,wBAAgB,iBAAiB,CAC/B,EACE,QAAQ,EACR,SAAS,EACT,WAAW,EACX,WAAW,EACX,aAAa,EACb,eAAe,EACf,kBAAkB,GACnB,EAAE,qBAAqB,GACvB,CACD,UAAU,EAAE;IACV,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,SAAS,GAAG,UAAU,CAAC;CACzC,KACE,IAAI,CAwDR"}

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

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

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

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

package/lib/hooks/useInputState/useInputState.d.ts

@@ -1,13 +0,0 @@
-import * as React from 'react';
-type ReturnType = [string, (event: React.ChangeEvent<HTMLInputElement>) => void];
-/**
- * Simple Hook to use with input tag. The primary purpose is an abstraction over input onChange property.
- * () => {
- *   const [value, onChange] = useInputState("");
- *
- *   return <Input type="text" value={value} onChange={onChange} />;
- * }
- */
-export declare const useInputState: (initialState?: string) => ReturnType;
-export {};
-//# sourceMappingURL=useInputState.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useInputState.d.ts","sourceRoot":"","sources":["../../../src/hooks/useInputState/useInputState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,UAAU,GAAG,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC,CAAC;AAEjF;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,GAAI,eAAc,MAAW,KAAG,UAUzD,CAAC"}