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

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

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

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

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

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

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

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

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

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

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

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

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

package/lib/hooks/useInputState/useInputState.js

@@ -17,7 +17,9 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 const useInputState = function () {
   let initialState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   const [state, setState] = React.useState(initialState);
-  const setInputState = React.useCallback(event => setState(event && event.target.value), []);
+  const setInputState = React.useCallback(
+  // @ts-ignore - TS7006 - Parameter 'event' implicitly has an 'any' type.
+  event => setState(event && event.target.value), []);
   return [state, setInputState];
 };
 exports.useInputState = useInputState;

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+declare const _default: {
+    tags: string[];
+    title: string;
+    component: (initialState?: string) => [string, (event: React.ChangeEvent<HTMLInputElement>) => void];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Example: () => React.JSX.Element;
+//# sourceMappingURL=useInputState.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useInputState.stories.d.ts","sourceRoot":"","sources":["../../../src/hooks/useInputState/useInputState.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;AAU/B,wBAwCE;AAEF,eAAO,MAAM,OAAO,yBASnB,CAAC"}

package/lib/hooks/useInputState/useInputState.stories.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Example = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _Input = require("../../components/Input");
+var _Text = require("../../components/Text");
+var _useInputState = require("./useInputState");
+var _useInputStateStoriesModule = _interopRequireDefault(require("./useInputState.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/useInputState',
+  component: _useInputState.useInputState,
+  parameters: {
+    docs: {
+      description: {
+        component: `
+\`\`\`js
+import { useInputState } from "@spaced-out/ui-design-system/lib/hooks/useInputState";
+\`\`\`
+The \`useInputState\` hook is a simple hook that provides state management for input elements.
+It abstracts the onChange property of the input and returns the current value and a callback function to update it.
+
+### Return Type
+- An array with two elements:
+  - \`value\`: The current value of the input.
+  - \`onChange\`: A callback function to handle changes in the input value.
+
+### Usage
+\`\`\`jsx
+import { useInputState } from './useInputState';
+
+const MyComponent = () => {
+  const [value, onChange] = useInputState('');
+
+  return (
+    <div className={css.container}>
+      <Input type="text" value={value} onChange={onChange} />
+      <BodyLarge>Value: {value}</BodyLarge>
+    </div>
+  );
+};
+
+export default MyComponent;
+\`\`\`
+        `
+      }
+    }
+  }
+};
+const Example = () => {
+  const [value, onChange] = (0, _useInputState.useInputState)('');
+  return /*#__PURE__*/React.createElement("div", {
+    className: _useInputStateStoriesModule.default.container
+  }, /*#__PURE__*/React.createElement(_Input.Input, {
+    type: "text",
+    value: value,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement(_Text.BodyLarge, {
+    className: _useInputStateStoriesModule.default.value
+  }, "Value: ", value));
+};
+exports.Example = Example;

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

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

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

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

package/lib/hooks/useLockedBody/useLockedBody.d.ts

@@ -0,0 +1,4 @@
+type ReturnType = [boolean, (locked: boolean) => void];
+export declare function useLockedBody(initialLocked?: boolean): ReturnType;
+export {};
+//# sourceMappingURL=useLockedBody.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useLockedBody.d.ts","sourceRoot":"","sources":["../../../src/hooks/useLockedBody/useLockedBody.ts"],"names":[],"mappings":"AAGA,KAAK,UAAU,GAAG,CAAC,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC,CAAC;AAEvD,wBAAgB,aAAa,CAAC,aAAa,GAAE,OAAe,GAAG,UAAU,CA+CxE"}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useLockedBody } from './useLockedBody';
+declare const _default: {
+    tags: string[];
+    title: string;
+    component: typeof useLockedBody;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Example: () => React.ReactElement<React.ComponentProps<"div">>;
+//# sourceMappingURL=useLockedBody.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useLockedBody.stories.d.ts","sourceRoot":"","sources":["../../../src/hooks/useLockedBody/useLockedBody.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;;;;;;;;;;;;;AAK9C,wBA6CE;AAEF,eAAO,MAAM,OAAO,QAAO,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAcxE,CAAC"}

package/lib/hooks/useLockedBody/useLockedBody.stories.js

@@ -0,0 +1,69 @@
+"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 _useLockedBody = require("./useLockedBody");
+var _useLockedBodyStoriesModule = _interopRequireDefault(require("./useLockedBody.stories.module.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'Hooks/useLockedBody',
+  component: _useLockedBody.useLockedBody,
+  parameters: {
+    docs: {
+      description: {
+        component: `
+\`\`\`js
+import { useLockedBody } from "@spaced-out/ui-design-system/lib/hooks/useLockedBody";
+\`\`\`
+The \`useLockedBody\` hook is a custom hook that allows locking and unlocking the scroll of the document's body.
+It prevents the user from scrolling the page by setting the overflow and padding-right styles of the body element.
+
+### Return Type
+- An array with two elements:
+  - \`locked\`: A boolean indicating whether the body scroll is locked or not.
+  - \`setLocked\`: A function to toggle the locked state.
+
+### Usage
+\`\`\`jsx
+import { useLockedBody } from './useLockedBody';
+
+const MyComponent = () => {
+  const [locked, setLocked] = useLockedBody(false);
+
+  const toggleLock = () => {
+    setLocked(!locked);
+  };
+
+  return (
+    <div className={css.container}>
+      <Button onClick={toggleLock}>
+        {locked ? 'Unlock Scroll' : 'Lock Scroll'}
+      </Button>
+    </div>
+  );
+};
+
+export default MyComponent;
+\`\`\`
+        `
+      }
+    }
+  }
+};
+const Example = () => {
+  const [locked, setLocked] = (0, _useLockedBody.useLockedBody)(false);
+  const toggleLock = () => {
+    setLocked(!locked);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _useLockedBodyStoriesModule.default.container
+  }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    onClick: toggleLock
+  }, locked ? 'Unlock Scroll' : 'Lock Scroll'));
+};
+exports.Example = Example;

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

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

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

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

package/lib/hooks/useModal/useModal.d.ts

@@ -0,0 +1,11 @@
+export type UseModalExtras = {
+    [key: string]: any;
+};
+export type UseModalReturnType = {
+    isOpen: boolean;
+    openModal: (extras?: UseModalExtras) => void;
+    closeModal: () => void;
+    extras: UseModalExtras;
+};
+export declare const useModal: () => UseModalReturnType;
+//# sourceMappingURL=useModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useModal.d.ts","sourceRoot":"","sources":["../../../src/hooks/useModal/useModal.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,cAAc,GAAG;IAE3B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,EAAE,cAAc,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,QAAQ,QAAO,kBAkB3B,CAAC"}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+declare const _default: {
+    tags: string[];
+    title: string;
+    component: () => import("./useModal").UseModalReturnType;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Example: () => React.ReactElement<React.ComponentProps<"div">>;
+//# sourceMappingURL=useModal.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useModal.stories.d.ts","sourceRoot":"","sources":["../../../src/hooks/useModal/useModal.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;AAS1B,wBA+EE;AAuBF,eAAO,MAAM,OAAO,QAAO,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAsBxE,CAAC"}

package/lib/hooks/useModal/useModal.stories.js

@@ -0,0 +1,138 @@
+"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 _Dialog = require("../../components/Dialog");
+var _useModal = require("./useModal");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'Hooks/useModal',
+  component: _useModal.useModal,
+  parameters: {
+    docs: {
+      description: {
+        component: `
+\`\`\`js
+import { useModal } from "@spaced-out/ui-design-system/lib/hooks/useModal";
+\`\`\`
+The \`useModal\` hook is a simple hook that provides state management for Modal(Dialog) when triggered from hooks (non-components).
+You can provide all the additional details in extras as shown in the example to invoke Modal(Dialog).
+\n**Note:** You don't need this hook if you are using Dialog from a component.
+
+### Return Type
+- An Object with four elements:
+  - \`isOpen\`: The current value of if the Dialog is open.
+  - \`openModal\`: A callback function to perform open action on the Dialog with additional info which you can pass as params (title, description, ...).
+  - \`closeModal\`: A callback function to perform close action on the Dialog.
+  - \`extras\`: This is an object when the calling hook can set additional information and handlers as required for a particular use case. Refer the example for better understanding.
+
+### Usage
+\`\`\`jsx
+import { useModal } from './useModal';
+
+const useIntermediateExampleHook = (
+    openModal: (extras?: UseModalExtras) => void,
+    closeModal: () => void,
+  ): ({handleClick: () => void}) => {
+    const onConfirmClick = () => {
+      console.error('onConfirmClick handler called');
+      closeModal();
+    };
+    const handleClick = () => {
+      openModal({
+        title: 'Dialog title',
+        description: 'Dialog description',
+        cancelText: 'Cancel',
+        confirmText: 'Confirm',
+        semantic: 'danger',
+        onConfirmClick,
+      });
+      console.error('some action in click handler useIntermediateExampleHook');
+    };
+    return {handleClick};
+  };
+
+export const MyComponent = (): React$Element<'div'> => {
+    const { isOpen, openModal, closeModal, extras } = useModal();
+    const { handleClick } = useIntermediateExampleHook(openModal, closeModal);
+    return (
+      <div>
+        <Button type="primary" onClick={handleClick}>
+          Open Dialog
+        </Button>
+        <BasicDialog
+          initialFocus={1}
+          onClose={closeModal}
+          semantic={extras.semantic}
+          isOpen={isOpen}
+          heading={extras.title}
+          body={extras.description}
+          confirmText={extras.confirmText}
+          abortText={extras.cancelText}
+          handleConfirm={extras.onConfirmClick}
+          handleAbort={closeModal}
+        />
+      </div>
+    );
+  };
+
+
+export default MyComponent;
+\`\`\`
+        `
+      }
+    }
+  }
+};
+const useIntermediateExampleHook = (openModal, closeModal) => {
+  const onConfirmClick = () => {
+    console.error('onConfirmClick handler called');
+    closeModal();
+  };
+  const handleClick = () => {
+    openModal({
+      title: 'Dialog title - useModal',
+      description: 'Dialog description - useModal',
+      cancelText: 'Cancel',
+      confirmText: 'Confirm',
+      semantic: 'danger',
+      onConfirmClick
+    });
+    console.error('some action in click handler useIntermediateExampleHook');
+  };
+  return {
+    handleClick
+  };
+};
+const Example = () => {
+  const {
+    isOpen,
+    openModal,
+    closeModal,
+    extras
+  } = (0, _useModal.useModal)();
+  const {
+    handleClick
+  } = useIntermediateExampleHook(openModal, closeModal);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    type: "primary",
+    onClick: handleClick
+  }, "Open Dialog"), /*#__PURE__*/_react.default.createElement(_Dialog.BasicDialog, {
+    initialFocus: 1,
+    onClose: closeModal,
+    semantic: extras.semantic,
+    isOpen: isOpen,
+    heading: extras.title,
+    body: extras.description,
+    confirmText: extras.confirmText,
+    abortText: extras.cancelText,
+    handleConfirm: extras.onConfirmClick,
+    handleAbort: closeModal
+  }));
+};
+exports.Example = Example;

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

@@ -0,0 +1,3 @@
+declare const useMountTransition: (isMounted: boolean, unmountDelay: number) => boolean;
+export default useMountTransition;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/useMountTransition/index.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,kBAAkB,GAAI,WAAW,OAAO,EAAE,cAAc,MAAM,KAAG,OAmBtE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/hooks/useMountTransition/index.js

@@ -8,6 +8,7 @@ var _react = require("react");
 const useMountTransition = (isMounted, unmountDelay) => {
   const [isTransitioning, setIsTransitioning] = (0, _react.useState)(false);
   (0, _react.useEffect)(() => {
+    // @ts-ignore - TS7034 - Variable 'timeoutId' implicitly has type 'any' in some locations where its type cannot be determined.
     let timeoutId;
     if (isMounted && !isTransitioning) {
       setIsTransitioning(true);
@@ -15,6 +16,7 @@ const useMountTransition = (isMounted, unmountDelay) => {
       timeoutId = setTimeout(() => setIsTransitioning(false), unmountDelay);
     }
     return () => {
+      // @ts-ignore - TS7005 - Variable 'timeoutId' implicitly has an 'any' type.
       clearTimeout(timeoutId);
     };
   }, [unmountDelay, isMounted, isTransitioning]);

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

@@ -0,0 +1,16 @@
+import React from 'react';
+declare const _default: {
+    tags: string[];
+    title: string;
+    component: (isMounted: boolean, unmountDelay: number) => boolean;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Example: () => React.ReactElement<React.ComponentProps<"div">>;
+//# sourceMappingURL=useMountTransition.stories.d.ts.map

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

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