@spaced-out/ui-design-system 0.1.4 → 0.1.5

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 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.5](https://github.com/spaced-out/ui-design-system/compare/v0.1.4...v0.1.5) (2023-04-04)
+
+
+### Features
+
+* in context aleart and banner focus states ([9d3144d](https://github.com/spaced-out/ui-design-system/commit/9d3144dad0cc32f21cfd1ed4284b6eb5da99e742))
+
+
+### Bug Fixes
+
+* typeahead and dropdown fixes ([fa9d5ed](https://github.com/spaced-out/ui-design-system/commit/fa9d5ed1276fb3381fa71ac2f57c203ca9900dd8))
+
 ### [0.1.4](https://github.com/spaced-out/ui-design-system/compare/v0.1.3...v0.1.4) (2023-04-03)
 
 

package/lib/components/Dropdown/Dropdown.js

@@ -27,10 +27,9 @@ const Dropdown = _ref => {
     menu,
     onMenuOpen,
     onMenuClose,
-    dropdownInputText,
+    dropdownInputText = '',
     ...inputProps
   } = _ref;
-  const [inputValue, setInputValue] = React.useState(dropdownInputText || '');
   const dropdownRef = React.useRef();
   const {
     x,
@@ -44,9 +43,6 @@ const Dropdown = _ref => {
     whileElementsMounted: _reactDom.autoUpdate,
     middleware: [(0, _reactDom.flip)(), (0, _reactDom.offset)(parseInt(_space.spaceXXSmall))]
   });
-  React.useEffect(() => {
-    setInputValue(dropdownInputText || '');
-  }, [dropdownInputText]);
   const onMenuToggle = isOpen => {
     isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
   };
@@ -67,7 +63,7 @@ const Dropdown = _ref => {
       boxRef: reference,
       size: size,
       placeholder: placeholder,
-      value: inputValue,
+      value: dropdownInputText,
       classNames: {
         box: _DropdownModule.default.inputBox
       }

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

@@ -45,10 +45,9 @@ export const Dropdown = ({
   menu,
   onMenuOpen,
   onMenuClose,
-  dropdownInputText,
+  dropdownInputText = '',
   ...inputProps
 }: DropdownProps): React.Node => {
-  const [inputValue, setInputValue] = React.useState(dropdownInputText || '');
   const dropdownRef = React.useRef();
   const {x, y, reference, floating, strategy} = useFloating({
     strategy: 'absolute',
@@ -57,10 +56,6 @@ export const Dropdown = ({
     middleware: [flip(), offset(parseInt(spaceXXSmall))],
   });
 
-  React.useEffect(() => {
-    setInputValue(dropdownInputText || '');
-  }, [dropdownInputText]);
-
   const onMenuToggle = (isOpen: boolean) => {
     isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
   };
@@ -77,7 +72,7 @@ export const Dropdown = ({
             boxRef={reference}
             size={size}
             placeholder={placeholder}
-            value={inputValue}
+            value={dropdownInputText}
             classNames={{box: css.inputBox}}
             {...inputProps}
             iconRightName={isOpen ? 'angle-up' : 'angle-down'}

package/lib/components/InContextAlert/InContextAlert.js

@@ -8,6 +8,7 @@ var React = _interopRequireWildcard(require("react"));
 var _typography = require("../../types/typography");
 var _classify = require("../../utils/classify");
 var _Icon = require("../Icon");
+var _Link = require("../Link");
 var _Text = require("../Text");
 var _Truncate = require("../Truncate");
 var _InContextAlertModule = _interopRequireDefault(require("./InContextAlert.module.css"));
@@ -110,10 +111,10 @@ const InContextAlert = props => {
     line: 2
   }, children)), !!(actionText || dismissable) && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_InContextAlertModule.default.actionContainer, classNames?.actionContainer)
-  }, !!actionText && /*#__PURE__*/React.createElement(_Text.ButtonTextExtraSmall, {
-    className: _InContextAlertModule.default.actionText,
-    onClick: onAction
-  }, actionText), !!dismissable && /*#__PURE__*/React.createElement(_Icon.Icon, {
+  }, !!actionText && /*#__PURE__*/React.createElement(_Link.Link, {
+    onClick: onAction,
+    color: "primary"
+  }, actionText), !!dismissable && /*#__PURE__*/React.createElement(_Icon.ClickableIcon, {
     color: _typography.TEXT_COLORS.primary,
     name: "close",
     size: "small",

package/lib/components/InContextAlert/InContextAlert.js.flow

@@ -5,8 +5,9 @@ import * as React from 'react';
 import {TEXT_COLORS} from '../../types/typography';
 import {classify} from '../../utils/classify';
 import type {IconType} from '../Icon';
-import {Icon} from '../Icon';
-import {ButtonTextExtraSmall, SubTitleExtraSmall} from '../Text';
+import {ClickableIcon, Icon} from '../Icon';
+import {Link} from '../Link';
+import {SubTitleExtraSmall} from '../Text';
 import {Truncate} from '../Truncate';
 
 import css from './InContextAlert.module.css';
@@ -172,15 +173,12 @@ export const InContextAlert = (props: InContextAlertProps): React.Node => {
               )}
             >
               {!!actionText && (
-                <ButtonTextExtraSmall
-                  className={css.actionText}
-                  onClick={onAction}
-                >
+                <Link onClick={onAction} color="primary">
                   {actionText}
-                </ButtonTextExtraSmall>
+                </Link>
               )}
               {!!dismissable && (
-                <Icon
+                <ClickableIcon
                   color={TEXT_COLORS.primary}
                   name="close"
                   size="small"

package/lib/components/InContextAlert/InContextAlert.module.css

@@ -65,7 +65,6 @@
 }
 
 .closeIcon {
-  cursor: pointer;
   margin-left: auto;
 }
 
@@ -75,9 +74,3 @@
   align-items: center;
   gap: spaceSmall;
 }
-
-.actionText {
-  cursor: pointer;
-  text-decoration: underline;
-  white-space: nowrap;
-}

package/lib/components/Link/Link.js.flow

@@ -66,7 +66,7 @@ export type LinkProps = {
   underline?: boolean,
   target?: AnchorTarget,
   href?: string,
-  onClick?: (SyntheticEvent<HTMLElement>) => mixed,
+  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
   tabIndex?: number,
   disabled?: boolean,
   ...

package/lib/components/Typeahead/Typeahead.js

@@ -29,11 +29,10 @@ const Typeahead = _ref => {
     menu,
     onMenuOpen,
     onMenuClose,
-    typeaheadInputText,
+    typeaheadInputText = '',
     ...inputProps
   } = _ref;
   const typeaheadRef = React.useRef();
-  const [inputValue, setInputValue] = React.useState(typeaheadInputText || '');
   const [filteredOptions, setFilteredOptions] = React.useState(menu?.options);
   const {
     x,
@@ -47,28 +46,19 @@ const Typeahead = _ref => {
     whileElementsMounted: _reactDom.autoUpdate,
     middleware: [(0, _reactDom.flip)(), (0, _reactDom.offset)(parseInt(_space.spaceXXSmall))]
   });
-  const handleSelect = option => {
-    if (option?.key) {
-      onSelect && onSelect(option);
-      setInputValue(option.label);
-    }
-  };
-  React.useEffect(() => {
-    setInputValue(typeaheadInputText || '');
-  }, [typeaheadInputText]);
   const onMenuToggle = isOpen => {
     isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
   };
   React.useEffect(() => {
     const optionsFiltered = menu?.options && menu.options.filter(option => {
-      if (!option.label || !inputValue) {
+      if (!option.label || !typeaheadInputText) {
         return true;
       } else {
-        return option.label.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1;
+        return option.label.toLowerCase().indexOf(typeaheadInputText.toLowerCase()) !== -1;
       }
     });
     setFilteredOptions(optionsFiltered || []);
-  }, [inputValue]);
+  }, [typeaheadInputText]);
   return /*#__PURE__*/React.createElement(_clickAway.ClickAway, {
     onChange: onMenuToggle
   }, _ref2 => {
@@ -86,14 +76,13 @@ const Typeahead = _ref => {
       boxRef: reference,
       size: size,
       placeholder: placeholder,
-      value: inputValue,
+      value: typeaheadInputText,
       classNames: {
         box: classNames?.box
       }
     }, inputProps, {
       onChange: e => {
         e.stopPropagation();
-        setInputValue(e.target.value);
         onSearch && onSearch(e);
         if (e.target.value.length > 0) {
           onOpen();
@@ -102,7 +91,6 @@ const Typeahead = _ref => {
         }
       },
       onClear: _e => {
-        setInputValue('');
         onClear?.();
       }
     })), isOpen && menu && filteredOptions && !!filteredOptions.length && /*#__PURE__*/React.createElement("div", {
@@ -118,7 +106,7 @@ const Typeahead = _ref => {
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
       options: filteredOptions,
       onSelect: option => {
-        handleSelect(option);
+        onSelect && onSelect(option);
         if (!menu.optionsVariant || menu.optionsVariant === 'normal') {
           clickAway();
         }

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

@@ -49,12 +49,10 @@ export const Typeahead = ({
   menu,
   onMenuOpen,
   onMenuClose,
-  typeaheadInputText,
+  typeaheadInputText = '',
   ...inputProps
 }: TypeaheadProps): React.Node => {
   const typeaheadRef = React.useRef();
-
-  const [inputValue, setInputValue] = React.useState(typeaheadInputText || '');
   const [filteredOptions, setFilteredOptions] = React.useState(menu?.options);
 
   const {x, y, reference, floating, strategy} = useFloating({
@@ -64,17 +62,6 @@ export const Typeahead = ({
     middleware: [flip(), offset(parseInt(spaceXXSmall))],
   });
 
-  const handleSelect = (option?: MenuOption) => {
-    if (option?.key) {
-      onSelect && onSelect(option);
-      setInputValue(option.label);
-    }
-  };
-
-  React.useEffect(() => {
-    setInputValue(typeaheadInputText || '');
-  }, [typeaheadInputText]);
-
   const onMenuToggle = (isOpen: boolean) => {
     isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
   };
@@ -83,16 +70,18 @@ export const Typeahead = ({
     const optionsFiltered =
       menu?.options &&
       menu.options.filter((option) => {
-        if (!option.label || !inputValue) {
+        if (!option.label || !typeaheadInputText) {
           return true;
         } else {
           return (
-            option.label.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1
+            option.label
+              .toLowerCase()
+              .indexOf(typeaheadInputText.toLowerCase()) !== -1
           );
         }
       });
     setFilteredOptions(optionsFiltered || []);
-  }, [inputValue]);
+  }, [typeaheadInputText]);
 
   return (
     <ClickAway onChange={onMenuToggle}>
@@ -106,12 +95,11 @@ export const Typeahead = ({
             boxRef={reference}
             size={size}
             placeholder={placeholder}
-            value={inputValue}
+            value={typeaheadInputText}
             classNames={{box: classNames?.box}}
             {...inputProps}
             onChange={(e) => {
               e.stopPropagation();
-              setInputValue(e.target.value);
               onSearch && onSearch(e);
               if (e.target.value.length > 0) {
                 onOpen();
@@ -120,7 +108,6 @@ export const Typeahead = ({
               }
             }}
             onClear={(_e) => {
-              setInputValue('');
               onClear?.();
             }}
           />
@@ -141,7 +128,7 @@ export const Typeahead = ({
                 {...menu}
                 options={filteredOptions}
                 onSelect={(option) => {
-                  handleSelect(option);
+                  onSelect && onSelect(option);
                   if (
                     !menu.optionsVariant ||
                     menu.optionsVariant === 'normal'

package/package.json

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