graphen 1.10.6 → 1.10.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphen",
-  "version": "1.10.6",
+  "version": "1.10.8",
   "description": "Graphen is a small library, that keeps reusable blocks of UI and helps making application design consistent across multiple projects.",
   "main": "src/index.ts",
   "files": [

package/src/components/Dropdown/index.tsx

@@ -1,33 +1,51 @@
-import React, { useState, useCallback } from "react";
-import * as _ from "lodash";
+import React, { useState, useCallback, useEffect } from "react";
 import classNames from "classnames";
 
 type Props = {
-  initValue: Readonly<{ value: string, label: string }>,
-  label?: string,
-  items: ReadonlyArray<{ value: string, label: string }>,
-  onChange: (arg0: string) => void,
+  initValue: Readonly<{ value: string, label: string }>;
+  label?: string;
+  items: ReadonlyArray<{ value: string, label: string }>;
+  onChange: (arg0: string) => void;
+  isDisabled?: boolean;
 };
 
 function Dropdown(props: Props) {
-  const { initValue, label, items, onChange } = props;
+  const { initValue, label, items, onChange, isDisabled } = props;
+
   const [isExpanded, setIsExpanded] = useState(false);
   const [selectedItem, setSelectedItem] = useState(initValue);
+
+  useEffect(() => {
+    setSelectedItem(initValue);
+  }, [initValue, setSelectedItem]);
+
   const expandMenu = useCallback(() => {
-    setIsExpanded((isShown) => !isShown);
+    if (!isDisabled) {
+      setIsExpanded(true);
+    }
+  }, [setIsExpanded, isDisabled]);
+  const closeMenu = useCallback((event) => {
+    if (!event.relatedTarget) {
+      setIsExpanded(false);
+    }
   }, [setIsExpanded]);
+
   const selectItem = useCallback(
     (item) => {
       onChange(item.value);
       setIsExpanded(false);
-      setSelectedItem(_.find(items, (i) => i.value === item.value));
+      setSelectedItem(items.find((i) => i.value === item.value));
     },
     [setIsExpanded, setSelectedItem, items]
   );
-  const buttonClasses = `gc-dropdown__btn ${label ? 'gc-dropdown__btn--with-label' : ''}`;
+
+  const buttonClasses = classNames('gc-dropdown__btn', {
+    'gc-dropdown__btn--with-label': label,
+    'gc-dropdown__btn--disabled': isDisabled,
+  });
 
   return (
-    <div className="gc-dropdown">
+    <div className="gc-dropdown" onBlur={closeMenu}>
       {label && (<label className="gc-dropdown__label" htmlFor="gc-dropdown__label">
         {label}
       </label>)}
@@ -41,13 +59,16 @@ function Dropdown(props: Props) {
           {selectedItem.label}
         </button>
         {isExpanded && (
-          <div className="gc-dropdown__content">
+          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+          <div className="gc-dropdown__content" tabIndex={0}>
             <ul className="gc-dropdown__list">
               {/* eslint-disable jsx-a11y/no-static-element-interactions */}
-              {_.map(items, (item) => {
+              {items.map((item, index) => {
                 const dropdownItemClasses = classNames("gc-dropdown__item", {
-                  "gc-dropdown__item--first": item === items[0],
+                  "gc-dropdown__item--first": index === 0,
+                  "gc-dropdown__item--selected": item.value === selectedItem.value,
                 });
+
                 return (
                   /* eslint-disable react/button-has-type */
                   <li
@@ -73,6 +94,7 @@ function Dropdown(props: Props) {
 // @ts-ignore
 Dropdown.defaultProps = {
   label: undefined,
+  isDisabled: false,
 };
 
 export default Dropdown;

package/src/components/Dropdown/styles/_styles.scss

@@ -19,6 +19,10 @@
     border: 1px solid $color-silver;
     border-radius: $radius-medium;
 
+    &--disabled {
+      border: 0;
+    }
+
     &--with-label {
       margin-top: 5px;
     }
@@ -62,8 +66,13 @@
       border-top: none;
     }
 
+    &--selected {
+      background-color: $colour-gallery;
+    }
+
     &:hover {
       cursor: pointer;
+      background-color: $color-michka;
     }
   }
 

package/src/example.tsx

@@ -627,11 +627,13 @@ class ExampleApp extends React.PureComponent<Props, State> {
             <p>
               <Dropdown
                 initValue={{ label: "Select value", value: "selectValue" }}
+                label="Disabled dropdown"
                 items={[
                   { label: "Red", value: "red" },
                   { label: "Blue", value: "blue" },
                 ]}
                 onChange={_.noop}
+                isDisabled
               />
             </p>
           </div>