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

package/lib/hooks/useMountTransition/useMountTransition.stories.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Example = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Text = require("../../components/Text");
+var _ = _interopRequireDefault(require("./"));
+var _useMountTransitionStoriesModule = _interopRequireDefault(require("./useMountTransition.stories.module.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'Hooks/useMountTransition',
+  component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: `
+\`\`\`js
+import { useMountTransition } from "@spaced-out/ui-design-system/lib/hooks/useMountTransition";
+\`\`\`
+The \`useMountTransition\` hook is a custom hook that tracks the mount and unmount transitions of a component.
+
+### Props Accepted
+- \`isMounted\`: A boolean value indicating whether the component is mounted or not.
+- \`unmountDelay\`: The delay in milliseconds before transitioning from mounted to unmounted state.
+
+### Return Value
+- \`isTransitioning\`: A boolean value indicating whether the component is currently transitioning.
+
+### Usage
+\`\`\`jsx
+import useMountTransition from './useMountTransition';
+
+const MyComponent = () => {
+  const isMounted = ...; // Some value indicating whether the component is mounted or not
+  const unmountDelay = ...; // Delay before transitioning from mounted to unmounted state
+
+  const isTransitioning = useMountTransition(isMounted, unmountDelay);
+
+  useEffect(() => {
+    // Perform any additional actions during transition
+    if (isTransitioning) {
+      // ...
+    }
+  }, [isTransitioning]);
+
+  return (
+    <div className={\`${_useMountTransitionStoriesModule.default.container} \${isTransitioning ? css.transitioning : ''}\`}>
+      <BodyLarge>Component content</BodyLarge>
+    </div>
+  );
+};
+
+export default MyComponent;
+\`\`\`
+        `
+      }
+    }
+  }
+};
+const Example = () => /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Text.BodyLarge, null, "Usage documented above"));
+exports.Example = Example;

package/lib/hooks/useMountTransition/useMountTransition.stories.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+
+import {BodyLarge} from '../../components/Text';
+
+import useMountTransition from './';
+
+import css from './useMountTransition.stories.module.css';
+
+
+export default {
+  tags: ['autodocs'],
+  title: 'Hooks/useMountTransition',
+  component: useMountTransition,
+  parameters: {
+    docs: {
+      description: {
+        component: `
+\`\`\`js
+import { useMountTransition } from "@spaced-out/ui-design-system/lib/hooks/useMountTransition";
+\`\`\`
+The \`useMountTransition\` hook is a custom hook that tracks the mount and unmount transitions of a component.
+
+### Props Accepted
+- \`isMounted\`: A boolean value indicating whether the component is mounted or not.
+- \`unmountDelay\`: The delay in milliseconds before transitioning from mounted to unmounted state.
+
+### Return Value
+- \`isTransitioning\`: A boolean value indicating whether the component is currently transitioning.
+
+### Usage
+\`\`\`jsx
+import useMountTransition from './useMountTransition';
+
+const MyComponent = () => {
+  const isMounted = ...; // Some value indicating whether the component is mounted or not
+  const unmountDelay = ...; // Delay before transitioning from mounted to unmounted state
+
+  const isTransitioning = useMountTransition(isMounted, unmountDelay);
+
+  useEffect(() => {
+    // Perform any additional actions during transition
+    if (isTransitioning) {
+      // ...
+    }
+  }, [isTransitioning]);
+
+  return (
+    <div className={\`${css.container} \${isTransitioning ? css.transitioning : ''}\`}>
+      <BodyLarge>Component content</BodyLarge>
+    </div>
+  );
+};
+
+export default MyComponent;
+\`\`\`
+        `,
+      },
+    },
+  },
+};
+
+export const Example = (): React.ReactElement<React.ComponentProps<'div'>> => (<div>
+  <BodyLarge>Usage documented above</BodyLarge>
+</div>);

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

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

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

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

package/lib/hooks/usePagination/index.ts

@@ -0,0 +1 @@
+export * from './usePagination';

package/lib/hooks/usePagination/usePagination.d.ts

@@ -0,0 +1,5 @@
+import type { PaginationBaseProps, PaginationItemProps } from '../../components/Pagination';
+export declare const usePagination: (props: PaginationBaseProps) => {
+    items: PaginationItemProps[] | null | undefined;
+};
+//# sourceMappingURL=usePagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePagination.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePagination/usePagination.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,mBAAmB,EAAE,mBAAmB,EAAC,MAAM,6BAA6B,CAAC;AAI1F,eAAO,MAAM,aAAa,GAAI,OAAO,mBAAmB,KAAG;IACzD,KAAK,EAAE,mBAAmB,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;CAiJjD,CAAC"}

package/lib/hooks/usePagination/usePagination.js

@@ -78,6 +78,7 @@ const usePagination = props => {
   // Convert the basic item list to contain PaginationItem props objects
   const items = itemList.map((item, idx) => typeof item === 'number' ? {
     id: idx.toString(),
+    // @ts-ignore - TS7006 - Parameter 'event' implicitly has an 'any' type.
     onClick: event => {
       handleClick(event, item);
     },
@@ -87,6 +88,7 @@ const usePagination = props => {
     disabled
   } : {
     id: idx.toString(),
+    // @ts-ignore - TS7006 - Parameter 'event' implicitly has an 'any' type.
     onClick: event => {
       handleClick(event, buttonPage(item));
     },
@@ -96,6 +98,7 @@ const usePagination = props => {
     disabled: disabled || item.indexOf('ellipsis') === -1 && (item === 'next' || item === 'last' ? currentPage >= totalPages : currentPage <= 1)
   });
   return {
+    // @ts-ignore - TS2322 - Type '{ id: string; onClick: (event: any) => void; type: string; page: number | null; selected: boolean; disabled: boolean; }[]' is not assignable to type 'PaginationItemProps[]'.
     items
   };
 };

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

@@ -0,0 +1,18 @@
+import React from 'react';
+declare const _default: {
+    tags: string[];
+    title: string;
+    component: (props: import("../../components/Pagination").PaginationBaseProps) => {
+        items: import("../../components/Pagination").PaginationItemProps[] | null | undefined;
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Example: () => React.ReactElement<React.ComponentProps<"div">>;
+//# sourceMappingURL=usePagination.stories.d.ts.map

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

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

package/lib/hooks/usePagination/usePagination.stories.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Example = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Pagination = require("../../components/Pagination");
+var _usePagination = require("./usePagination");
+var _usePaginationStoriesModule = _interopRequireDefault(require("./usePagination.stories.module.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'Hooks/usePagination',
+  component: _usePagination.usePagination,
+  parameters: {
+    docs: {
+      description: {
+        component: `
+\`\`\`js
+import { usePagination } from "@spaced-out/ui-design-system/lib/hooks/usePagination";
+\`\`\`
+The \`usePagination\` hook is a custom hook that provides pagination functionality.
+It generates a list of pagination items based on the provided props, including
+the current page, total number of pages, and various display options.
+
+### Props Accepted
+- \`boundaryCount\` (optional): The number of pages to display at the beginning and end of the pagination. Defaults to 1.
+- \`totalPages\` (optional): The total number of pages. Defaults to 1.
+- \`disabled\` (optional): If set to \`true\`, the pagination functionality is disabled.
+- \`hideNextButton\` (optional): If set to \`true\`, the next button is hidden.
+- \`hidePrevButton\` (optional): If set to \`true\`, the previous button is hidden.
+- \`onChange\` (optional): A callback function called when a pagination item is clicked. Receives the selected page number and the event object.
+- \`currentPage\` (optional): The currently selected page. Defaults to 1.
+- \`showFirstButton\` (optional): If set to \`true\`, the first button is shown.
+- \`showLastButton\` (optional): If set to \`true\`, the last button is shown.
+- \`siblingCount\` (optional): The number of sibling pages to display before and after the current page. Defaults to 1.
+- \`style\` (optional): The style of the pagination. Can be 'primary' or 'secondary'. Defaults to 'primary'.
+
+### Props Returned
+- \`items\`: An array of pagination items with associated props.
+
+### Usage
+\`\`\`jsx
+import { usePagination } from './usePagination';
+
+const MyComponent = () => {
+  const { items } = usePagination({
+    boundaryCount: 1,
+    totalPages: 10,
+    disabled: false,
+    hideNextButton: false,
+    hidePrevButton: false,
+    onChange: (selectedPage, event) => {
+    },
+    currentPage: 1,
+    showFirstButton: false,
+    showLastButton: false,
+    siblingCount: 1,
+    style: 'primary',
+  });
+};
+
+export default MyComponent;
+\`\`\`
+          `
+      }
+    }
+  }
+};
+const Example = () => /*#__PURE__*/_react.default.createElement("div", {
+  className: _usePaginationStoriesModule.default.pagination
+}, /*#__PURE__*/_react.default.createElement(_Pagination.Pagination, {
+  currentPage: 10,
+  totalPages: 20
+}));
+exports.Example = Example;

package/lib/hooks/usePagination/usePagination.stories.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+import {Pagination} from '../../components/Pagination';
+
+import {usePagination} from './usePagination';
+
+import css from './usePagination.stories.module.css';
+
+
+export default {
+  tags: ['autodocs'],
+  title: 'Hooks/usePagination',
+  component: usePagination,
+  parameters: {
+    docs: {
+      description: {
+        component: `
+\`\`\`js
+import { usePagination } from "@spaced-out/ui-design-system/lib/hooks/usePagination";
+\`\`\`
+The \`usePagination\` hook is a custom hook that provides pagination functionality.
+It generates a list of pagination items based on the provided props, including
+the current page, total number of pages, and various display options.
+
+### Props Accepted
+- \`boundaryCount\` (optional): The number of pages to display at the beginning and end of the pagination. Defaults to 1.
+- \`totalPages\` (optional): The total number of pages. Defaults to 1.
+- \`disabled\` (optional): If set to \`true\`, the pagination functionality is disabled.
+- \`hideNextButton\` (optional): If set to \`true\`, the next button is hidden.
+- \`hidePrevButton\` (optional): If set to \`true\`, the previous button is hidden.
+- \`onChange\` (optional): A callback function called when a pagination item is clicked. Receives the selected page number and the event object.
+- \`currentPage\` (optional): The currently selected page. Defaults to 1.
+- \`showFirstButton\` (optional): If set to \`true\`, the first button is shown.
+- \`showLastButton\` (optional): If set to \`true\`, the last button is shown.
+- \`siblingCount\` (optional): The number of sibling pages to display before and after the current page. Defaults to 1.
+- \`style\` (optional): The style of the pagination. Can be 'primary' or 'secondary'. Defaults to 'primary'.
+
+### Props Returned
+- \`items\`: An array of pagination items with associated props.
+
+### Usage
+\`\`\`jsx
+import { usePagination } from './usePagination';
+
+const MyComponent = () => {
+  const { items } = usePagination({
+    boundaryCount: 1,
+    totalPages: 10,
+    disabled: false,
+    hideNextButton: false,
+    hidePrevButton: false,
+    onChange: (selectedPage, event) => {
+    },
+    currentPage: 1,
+    showFirstButton: false,
+    showLastButton: false,
+    siblingCount: 1,
+    style: 'primary',
+  });
+};
+
+export default MyComponent;
+\`\`\`
+          `,
+      },
+    },
+  },
+};
+
+export const Example = (): React.ReactElement<React.ComponentProps<'div'>> => (<div className={css.pagination}>
+  <Pagination currentPage={10} totalPages={20}></Pagination>
+</div>);

package/lib/hooks/usePagination/usePagination.ts

@@ -0,0 +1,151 @@
+import type {PaginationBaseProps, PaginationItemProps} from '../../components/Pagination';
+import {range} from '../../utils/helpers';
+
+
+export const usePagination = (props: PaginationBaseProps): {
+  items: PaginationItemProps[] | null | undefined;
+} => {
+  const {
+    boundaryCount = 1,
+    totalPages = 1,
+    disabled = false,
+    hideNextButton = false,
+    hidePrevButton = false,
+    onChange: handleChange,
+    currentPage = 1,
+    showFirstButton = false,
+    showLastButton = false,
+    siblingCount = 1,
+    style = 'primary',
+  } = props;
+
+  let itemList: Array<never> | Array<string> | Array<number | string> = [];
+
+  const handleClick = (event: React.SyntheticEvent<HTMLElement>, value: null | number) => {
+    if (handleChange) {
+      handleChange(value, event);
+    }
+  };
+
+  const startPages = range(1, Math.min(boundaryCount, totalPages));
+  const endPages = range(
+    Math.max(totalPages - boundaryCount + 1, boundaryCount + 1),
+    totalPages,
+  );
+
+  const siblingsStart = Math.max(
+    Math.min(
+      // Natural start
+      currentPage - siblingCount,
+      // Lower boundary when currentPage is high
+      totalPages - boundaryCount - siblingCount * 2 - 1,
+    ),
+    // Greater than startPages
+    boundaryCount + 2,
+  );
+
+  const siblingsEnd = Math.min(
+    Math.max(
+      // Natural end
+      currentPage + siblingCount,
+      // Upper boundary when currentPage is low
+      boundaryCount + siblingCount * 2 + 2,
+    ),
+    // Less than endPages
+    endPages.length > 0 ? endPages[0] - 2 : totalPages - 1,
+  );
+
+  // Basic list of items to render
+  // For primary style: itemList = ['first', 'previous', 1, 'start-ellipsis', 4, 5, 6, 'end-ellipsis', 10, 'next', 'last']
+  // For secondary style: itemList = ['first', 'previous', 'next', 'last']
+  if (style === 'primary') {
+    itemList = [
+      ...(showFirstButton ? ['first'] : []),
+      ...(hidePrevButton ? [] : ['previous']),
+      ...startPages,
+
+      // Start ellipsis
+      // eslint-disable-next-line no-nested-ternary
+      ...(siblingsStart > boundaryCount + 2
+        ? ['start-ellipsis']
+        : boundaryCount + 1 < totalPages - boundaryCount
+          ? [boundaryCount + 1]
+          : []),
+
+      // Sibling pages
+      ...range(siblingsStart, siblingsEnd),
+
+      // End ellipsis
+      // eslint-disable-next-line no-nested-ternary
+      ...(siblingsEnd < totalPages - boundaryCount - 1
+        ? ['end-ellipsis']
+        : totalPages - boundaryCount > boundaryCount
+          ? [totalPages - boundaryCount]
+          : []),
+
+      ...endPages,
+      ...(hideNextButton ? [] : ['next']),
+      ...(showLastButton ? ['last'] : []),
+    ];
+  } else if (style === 'secondary') {
+    itemList = [
+      ...(showFirstButton ? ['first'] : []),
+      ...(hidePrevButton ? [] : ['previous']),
+      ...(hideNextButton ? [] : ['next']),
+      ...(showLastButton ? ['last'] : []),
+    ];
+  }
+
+  // Map the button type to its page number
+  const buttonPage = (type: string) => {
+    switch (type) {
+    case 'first':
+      return 1;
+    case 'previous':
+      return currentPage - 1;
+    case 'next':
+      return currentPage + 1;
+    case 'last':
+      return totalPages;
+    default:
+      return null;
+    }
+  };
+
+  // Convert the basic item list to contain PaginationItem props objects
+  const items = itemList.map((item, idx) =>
+    typeof item === 'number'
+      ? {
+        id: idx.toString(),
+// @ts-ignore - TS7006 - Parameter 'event' implicitly has an 'any' type.
+        onClick: (event) => {
+          handleClick(event, item);
+        },
+        type: 'page',
+        page: item,
+        selected: item === currentPage,
+        disabled,
+      }
+      : {
+        id: idx.toString(),
+// @ts-ignore - TS7006 - Parameter 'event' implicitly has an 'any' type.
+        onClick: (event) => {
+          handleClick(event, buttonPage(item));
+        },
+        type: item,
+        page: buttonPage(item),
+        selected: false,
+        disabled:
+            disabled ||
+            (item.indexOf('ellipsis') === -1 &&
+              (item === 'next' || item === 'last'
+                ? currentPage >= totalPages
+                : currentPage <= 1)),
+      },
+  );
+
+  return {
+// @ts-ignore - TS2322 - Type '{ id: string; onClick: (event: any) => void; type: string; page: number | null; selected: boolean; disabled: boolean; }[]' is not assignable to type 'PaginationItemProps[]'.
+    items,
+  };
+};

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

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

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

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

package/lib/hooks/useReferenceElementWidth/index.ts

@@ -0,0 +1 @@
+export * from './useReferenceElementWidth';

package/lib/hooks/useReferenceElementWidth/useReferenceElementWidth.d.ts

@@ -0,0 +1,2 @@
+export declare function useReferenceElementWidth(ref?: HTMLElement | null, minWidth?: number): string;
+//# sourceMappingURL=useReferenceElementWidth.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useReferenceElementWidth.d.ts","sourceRoot":"","sources":["../../../src/hooks/useReferenceElementWidth/useReferenceElementWidth.ts"],"names":[],"mappings":"AAOA,wBAAgB,wBAAwB,CAAC,GAAG,CAAC,EAAE,WAAW,GAAG,IAAI,EAAE,QAAQ,GAAE,MAAwB,GAAG,MAAM,CAW7G"}

package/lib/hooks/useReferenceElementWidth/useReferenceElementWidth.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+import {sizeFluid} from '../../styles/variables/_size';
+
+
+const MIN_FLUID_WIDTH = 160;
+
+export function useReferenceElementWidth(ref?: HTMLElement | null, minWidth: number = MIN_FLUID_WIDTH): string {
+  const [width, setWidth] = React.useState(sizeFluid);
+
+  const refWidth = ref?.offsetWidth;
+  React.useLayoutEffect(() => {
+    if (refWidth) {
+      setWidth(Math.max(refWidth, minWidth) + 'px');
+    }
+  }, [refWidth, minWidth]);
+
+  return width;
+}

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

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

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

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

package/lib/hooks/useResizeObserver/index.ts

@@ -0,0 +1 @@
+export * from './useResizeObserver';

package/lib/hooks/useResizeObserver/useResizeObserver.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare function useResizeObserver(): [React.Ref<'div'>, number];
+//# sourceMappingURL=useResizeObserver.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useResizeObserver.d.ts","sourceRoot":"","sources":["../../../src/hooks/useResizeObserver/useResizeObserver.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,wBAAgB,iBAAiB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,CAyB9D"}

package/lib/hooks/useResizeObserver/useResizeObserver.js

@@ -14,11 +14,14 @@ function useResizeObserver() {
     if (!node) {
       return;
     }
+
+    // @ts-ignore - TS2345 - Argument of type '([entry]: [any]) => void' is not assignable to parameter of type 'ResizeObserverCallback'.
     const resizeObserver = new ResizeObserver(_ref => {
       let [entry] = _ref;
       setHeight(entry.contentRect.height);
     });
     resizeObserver.observe(node);
+    // @ts-ignore - TS2339 - Property 'getBoundingClientRect' does not exist on type 'never'.
     setHeight(node.getBoundingClientRect().height);
     return () => {
       resizeObserver.disconnect();

package/lib/hooks/useResizeObserver/useResizeObserver.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+
+export function useResizeObserver(): [React.Ref<'div'>, number] {
+  const ref = React.useRef(null);
+  const [height, setHeight] = React.useState(0);
+
+  React.useEffect(() => {
+    const node = ref.current;
+    if (!node) {
+      return;
+    }
+
+// @ts-ignore - TS2345 - Argument of type '([entry]: [any]) => void' is not assignable to parameter of type 'ResizeObserverCallback'.
+    const resizeObserver = new ResizeObserver(([entry]: [any]) => {
+      setHeight(entry.contentRect.height);
+    });
+
+    resizeObserver.observe(node);
+// @ts-ignore - TS2339 - Property 'getBoundingClientRect' does not exist on type 'never'.
+    setHeight(node.getBoundingClientRect().height);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  return [ref, height];
+}

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

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

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

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

package/lib/hooks/useToastPortal/index.ts

@@ -0,0 +1 @@
+export * from './useToastPortal';

package/lib/hooks/useToastPortal/useToastPortal.d.ts

@@ -0,0 +1,10 @@
+type UseToastPortal = {
+    toastRef: {
+        current: HTMLDivElement | null;
+    };
+};
+export declare const useToastPortal: ({ toastRef, }: UseToastPortal) => {
+    loaded: boolean;
+};
+export {};
+//# sourceMappingURL=useToastPortal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useToastPortal.d.ts","sourceRoot":"","sources":["../../../src/hooks/useToastPortal/useToastPortal.ts"],"names":[],"mappings":"AAMA,KAAK,cAAc,GAAG;IACpB,QAAQ,EAAE;QACR,OAAO,EAAE,cAAc,GAAG,IAAI,CAAC;KAChC,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,eAEG,cAAc,KAChB;IACD,MAAM,EAAE,OAAO,CAAC;CAgBjB,CAAC"}

package/lib/hooks/useToastPortal/useToastPortal.js

@@ -12,16 +12,16 @@ const useToastPortal = _ref => {
     toastRef
   } = _ref;
   const [loaded, setLoaded] = (0, _react.useState)(false);
+
+  // @ts-ignore - TS2345 - Argument of type '() => () => HTMLDivElement' is not assignable to parameter of type 'EffectCallback'.
   (0, _react.useEffect)(() => {
     const div = document.createElement('div');
 
-    // $FlowFixMe[incompatible-type];
+    // @ts-ignore - TS2540 - Cannot assign to 'style' because it is a read-only property.
     div.style = `position: fixed; bottom: ${_space.spaceMedium}; left: ${_space.spaceMedium}; z-index: ${_elevation.elevationToast};`;
-    /* $FlowIgnore */
     document.body.prepend(div);
     toastRef.current = div;
     setLoaded(true);
-    /* $FlowIgnore */
     return () => document.body.removeChild(div);
   }, []);
   return {