@spaced-out/ui-design-system 0.1.44 → 0.1.46

package/.cspell/custom-words.txt

@@ -1,8 +1,9 @@
 amet
 Anant
 argstable
-atleast
 ashwini-sensehq
+Ashwini
+atleast
 autodocs
 circlehollow
 CODEOWNERS

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.46](https://github.com/spaced-out/ui-design-system/compare/v0.1.45...v0.1.46) (2023-08-29)
+
+
+### Bug Fixes
+
+* add delay to clear extras data in use modal ([#140](https://github.com/spaced-out/ui-design-system/issues/140)) ([030c841](https://github.com/spaced-out/ui-design-system/commit/030c84138f2582b8769a8bd249ea1f8a9a125e51))
+
+### [0.1.45](https://github.com/spaced-out/ui-design-system/compare/v0.1.44...v0.1.45) (2023-08-29)
+
+
+### Bug Fixes
+
+* add use modal hook ([#139](https://github.com/spaced-out/ui-design-system/issues/139)) ([bf5a6a9](https://github.com/spaced-out/ui-design-system/commit/bf5a6a99f3fcefb8493f33e0a1a188a5cb619799))
+
 ### [0.1.44](https://github.com/spaced-out/ui-design-system/compare/v0.1.44-beta.0...v0.1.44) (2023-08-28)
 
 

package/lib/hooks/index.js

@@ -47,6 +47,17 @@ Object.keys(_useLockedBody).forEach(function (key) {
     }
   });
 });
+var _useModal = require("./useModal");
+Object.keys(_useModal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useModal[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useModal[key];
+    }
+  });
+});
 var _useMountTransition = require("./useMountTransition");
 Object.keys(_useMountTransition).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/hooks/index.js.flow

@@ -4,6 +4,7 @@ export * from './useCopyToClipboard';
 export * from './useFileUpload';
 export * from './useInputState';
 export * from './useLockedBody';
+export * from './useModal';
 export * from './useMountTransition';
 export * from './usePagination';
 export * from './useToastPortal';

package/lib/hooks/useModal/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useModal = require("./useModal");
+Object.keys(_useModal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useModal[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useModal[key];
+    }
+  });
+});

package/lib/hooks/useModal/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './useModal';

package/lib/hooks/useModal/useModal.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useModal = void 0;
+var _react = require("react");
+var _motion = require("../../styles/variables/_motion");
+
+const useModal = () => {
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [extras, setExtras] = (0, _react.useState)({});
+  const openModal = (0, _react.useCallback)(function () {
+    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    setExtras(props);
+    setIsOpen(true);
+  }, []);
+  const closeModal = () => {
+    setIsOpen(false);
+    // Since the Dialog close uses animation and its duration is motionDurationNormal, we should clear the data after the animation duration for better user experience
+    setTimeout(() => {
+      setExtras({});
+    }, parseInt(_motion.motionDurationNormal));
+  };
+  return {
+    isOpen,
+    openModal,
+    closeModal,
+    extras
+  };
+};
+exports.useModal = useModal;

package/lib/hooks/useModal/useModal.js.flow

@@ -0,0 +1,39 @@
+// @flow strict
+
+import {useCallback, useState} from 'react';
+
+import {motionDurationNormal} from '../../styles/variables/_motion';
+
+
+export type UseModalExtras = {
+  // TODO(Ashwini): Add type for extras
+  // $FlowFixMe
+  [key: string]: any,
+};
+
+export type UseModalReturnType = {
+  isOpen: boolean,
+  openModal: (extras?: UseModalExtras) => void,
+  closeModal: () => void,
+  extras: UseModalExtras,
+};
+
+export const useModal = (): UseModalReturnType => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [extras, setExtras] = useState({});
+
+  const openModal = useCallback((props?: UseModalExtras = {}) => {
+    setExtras(props);
+    setIsOpen(true);
+  }, []);
+
+  const closeModal = () => {
+    setIsOpen(false);
+    // Since the Dialog close uses animation and its duration is motionDurationNormal, we should clear the data after the animation duration for better user experience
+    setTimeout(() => {
+      setExtras({});
+    }, parseInt(motionDurationNormal));
+  };
+
+  return {isOpen, openModal, closeModal, extras};
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.44",
+  "version": "0.1.46",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {