@spaced-out/ui-design-system 0.1.45 → 0.1.47

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.47](https://github.com/spaced-out/ui-design-system/compare/v0.1.46...v0.1.47) (2023-08-30)
+
+
+### Bug Fixes
+
+* background fix for dropdown and typeahead ([2dc52ef](https://github.com/spaced-out/ui-design-system/commit/2dc52ef72eeb557e479c65abfda67d19c1576eee))
+
+### [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)
 
 

package/lib/components/Dropdown/Dropdown.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.Dropdown = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _react2 = require("@floating-ui/react");
-var _color = require("../../styles/variables/_color");
 var _size = require("../../styles/variables/_size");
 var _space = require("../../styles/variables/_space");
 var _classify = require("../../utils/classify");
@@ -81,8 +80,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         position: strategy,
         top: y ?? _space.spaceNone,
         left: x ?? _space.spaceNone,
-        width: _size.sizeFluid,
-        backgroundColor: _color.colorBackgroundTertiary
+        width: _size.sizeFluid
       }
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
       onSelect: option => {

package/lib/components/Dropdown/Dropdown.js.flow

@@ -12,7 +12,6 @@ import {
   useFloating,
 } from '@floating-ui/react';
 
-import {colorBackgroundTertiary} from '../../styles/variables/_color';
 import {sizeFluid} from '../../styles/variables/_size';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
@@ -102,7 +101,6 @@ export const Dropdown: React$AbstractComponent<
                   top: y ?? spaceNone,
                   left: x ?? spaceNone,
                   width: sizeFluid,
-                  backgroundColor: colorBackgroundTertiary,
                 }}
               >
                 <Menu

package/lib/components/Typeahead/Typeahead.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.Typeahead = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _react2 = require("@floating-ui/react");
-var _color = require("../../styles/variables/_color");
 var _size = require("../../styles/variables/_size");
 var _space = require("../../styles/variables/_space");
 var _classify = require("../../utils/classify");
@@ -109,8 +108,7 @@ const Typeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         position: strategy,
         top: y ?? _space.spaceNone,
         left: x ?? _space.spaceNone,
-        width: _size.sizeFluid,
-        backgroundColor: _color.colorBackgroundTertiary
+        width: _size.sizeFluid
       }
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
       options: filteredOptions,

package/lib/components/Typeahead/Typeahead.js.flow

@@ -12,7 +12,6 @@ import {
   useFloating,
 } from '@floating-ui/react';
 
-import {colorBackgroundTertiary} from '../../styles/variables/_color';
 import {sizeFluid} from '../../styles/variables/_size';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
@@ -144,7 +143,6 @@ export const Typeahead: React$AbstractComponent<
                   top: y ?? spaceNone,
                   left: x ?? spaceNone,
                   width: sizeFluid,
-                  backgroundColor: colorBackgroundTertiary,
                 }}
               >
                 <Menu

package/lib/hooks/useModal/useModal.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useModal = void 0;
 var _react = require("react");
+var _motion = require("../../styles/variables/_motion");
 
 const useModal = () => {
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
@@ -16,7 +17,10 @@ const useModal = () => {
   }, []);
   const closeModal = () => {
     setIsOpen(false);
-    setExtras({});
+    // 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,

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

@@ -2,6 +2,8 @@
 
 import {useCallback, useState} from 'react';
 
+import {motionDurationNormal} from '../../styles/variables/_motion';
+
 
 export type UseModalExtras = {
   // TODO(Ashwini): Add type for extras
@@ -27,7 +29,10 @@ export const useModal = (): UseModalReturnType => {
 
   const closeModal = () => {
     setIsOpen(false);
-    setExtras({});
+    // 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.45",
+  "version": "0.1.47",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {