@nulogy/components 8.7.3 → 8.8.0

package/dist/main.js

@@ -23038,20 +23038,42 @@
     }
   };
 
-  var showIndicatorSeparator = function showIndicatorSeparator(_ref3) {
-    var isMulti = _ref3.isMulti,
-        hasValue = _ref3.hasValue,
-        hasDefaultOptions = _ref3.hasDefaultOptions;
+  function getControlBorderRadius(_ref3) {
+    var border = _ref3.border,
+        isMenuOpen = _ref3.isMenuOpen,
+        menuLength = _ref3.menuLength,
+        menuPlacement = _ref3.menuPlacement,
+        theme = _ref3.theme;
+    var isMenuEmpty = menuLength === 0;
+    if (!isMenuOpen || isMenuEmpty || border !== menuPlacement) return theme.radii.medium;
+    return 0;
+  }
+  function getMenuBorderRadius(_ref4) {
+    var border = _ref4.border,
+        menuPlacement = _ref4.menuPlacement,
+        theme = _ref4.theme;
+    return border === menuPlacement ? {
+      radius: theme.radii.medium,
+      style: "solid"
+    } : {
+      radius: 0,
+      style: "none"
+    };
+  }
+  var showIndicatorSeparator = function showIndicatorSeparator(_ref5) {
+    var isMulti = _ref5.isMulti,
+        hasValue = _ref5.hasValue,
+        hasDefaultOptions = _ref5.hasDefaultOptions;
     return isMulti && hasValue && hasDefaultOptions;
   };
 
-  var customStyles = function customStyles(_ref4) {
-    var theme = _ref4.theme,
-        error = _ref4.error,
-        maxHeight = _ref4.maxHeight,
-        windowed = _ref4.windowed,
-        _ref4$hasDefaultOptio = _ref4.hasDefaultOptions,
-        hasDefaultOptions = _ref4$hasDefaultOptio === void 0 ? true : _ref4$hasDefaultOptio;
+  var customStyles = function customStyles(_ref6) {
+    var theme = _ref6.theme,
+        error = _ref6.error,
+        maxHeight = _ref6.maxHeight,
+        windowed = _ref6.windowed,
+        _ref6$hasDefaultOptio = _ref6.hasDefaultOptions,
+        hasDefaultOptions = _ref6$hasDefaultOptio === void 0 ? true : _ref6$hasDefaultOptio;
     return {
       option: function option() {
         return {
@@ -23084,8 +23106,34 @@
             theme: theme
           }),
           borderRadius: theme.radii.medium,
-          borderBottomLeftRadius: state.selectProps.menuIsOpen && state.selectProps.options.length ? 0 : theme.radii.medium,
-          borderBottomRightRadius: state.selectProps.menuIsOpen && state.selectProps.options.length ? 0 : theme.radii.medium,
+          borderBottomLeftRadius: getControlBorderRadius({
+            border: "bottom",
+            isMenuOpen: state.selectProps.menuIsOpen,
+            menuLength: state.selectProps.options.length,
+            menuPlacement: state.selectProps.menuPlacement,
+            theme: theme
+          }),
+          borderBottomRightRadius: getControlBorderRadius({
+            border: "bottom",
+            isMenuOpen: state.selectProps.menuIsOpen,
+            menuLength: state.selectProps.options.length,
+            menuPlacement: state.selectProps.menuPlacement,
+            theme: theme
+          }),
+          borderTopRightRadius: getControlBorderRadius({
+            border: "top",
+            isMenuOpen: state.selectProps.menuIsOpen,
+            menuLength: state.selectProps.options.length,
+            menuPlacement: state.selectProps.menuPlacement,
+            theme: theme
+          }),
+          borderTopLeftRadius: getControlBorderRadius({
+            border: "top",
+            isMenuOpen: state.selectProps.menuIsOpen,
+            menuLength: state.selectProps.options.length,
+            menuPlacement: state.selectProps.menuPlacement,
+            theme: theme
+          }),
           "&:hover, &:focus": {
             borderColor: getBorderColor({
               errored: error,
@@ -23120,8 +23168,9 @@
         });
       },
       menu: function menu(provided, state) {
-        return {
+        return Object.assign(Object.assign({}, provided), {
           marginTop: 0,
+          marginBottom: 0,
           position: "absolute",
           overflowX: "auto",
           zIndex: "100",
@@ -23135,16 +23184,44 @@
             isFocused: false,
             theme: theme
           }),
-          borderBottomStyle: "solid",
           borderLeftStyle: "solid",
           borderRightStyle: "solid",
-          borderRadius: "0 0 4px 4px",
+          borderBottomStyle: getMenuBorderRadius({
+            border: "bottom",
+            menuPlacement: state.selectProps.menuPlacement,
+            theme: theme
+          }).style,
+          borderTopStyle: getMenuBorderRadius({
+            border: "top",
+            menuPlacement: state.selectProps.menuPlacement,
+            theme: theme
+          }).style,
+          borderBottomLeftRadius: getMenuBorderRadius({
+            border: "bottom",
+            menuPlacement: state.selectProps.menuPlacement,
+            theme: theme
+          }).radius,
+          borderBottomRightRadius: getMenuBorderRadius({
+            border: "bottom",
+            menuPlacement: state.selectProps.menuPlacement,
+            theme: theme
+          }).radius,
+          borderTopLeftRadius: getMenuBorderRadius({
+            border: "top",
+            menuPlacement: state.selectProps.menuPlacement,
+            theme: theme
+          }).radius,
+          borderTopRightRadius: getMenuBorderRadius({
+            border: "top",
+            menuPlacement: state.selectProps.menuPlacement,
+            theme: theme
+          }).radius,
           boxShadow: getShadow({
             errored: error,
             isOpen: true,
             theme: theme
           })
-        };
+        });
       },
       menuList: function menuList(provided) {
         return Object.assign(Object.assign({}, provided), {
@@ -23274,6 +23351,7 @@
     initialIsOpen: undefined,
     maxHeight: "248px",
     menuPosition: "absolute",
+    menuPlacement: "bottom",
     multiselect: false,
     name: undefined,
     onBlur: undefined,

package/dist/main.module.js

@@ -23012,20 +23012,42 @@ var getShadow = function getShadow(_ref2) {
   }
 };
 
-var showIndicatorSeparator = function showIndicatorSeparator(_ref3) {
-  var isMulti = _ref3.isMulti,
-      hasValue = _ref3.hasValue,
-      hasDefaultOptions = _ref3.hasDefaultOptions;
+function getControlBorderRadius(_ref3) {
+  var border = _ref3.border,
+      isMenuOpen = _ref3.isMenuOpen,
+      menuLength = _ref3.menuLength,
+      menuPlacement = _ref3.menuPlacement,
+      theme = _ref3.theme;
+  var isMenuEmpty = menuLength === 0;
+  if (!isMenuOpen || isMenuEmpty || border !== menuPlacement) return theme.radii.medium;
+  return 0;
+}
+function getMenuBorderRadius(_ref4) {
+  var border = _ref4.border,
+      menuPlacement = _ref4.menuPlacement,
+      theme = _ref4.theme;
+  return border === menuPlacement ? {
+    radius: theme.radii.medium,
+    style: "solid"
+  } : {
+    radius: 0,
+    style: "none"
+  };
+}
+var showIndicatorSeparator = function showIndicatorSeparator(_ref5) {
+  var isMulti = _ref5.isMulti,
+      hasValue = _ref5.hasValue,
+      hasDefaultOptions = _ref5.hasDefaultOptions;
   return isMulti && hasValue && hasDefaultOptions;
 };
 
-var customStyles = function customStyles(_ref4) {
-  var theme = _ref4.theme,
-      error = _ref4.error,
-      maxHeight = _ref4.maxHeight,
-      windowed = _ref4.windowed,
-      _ref4$hasDefaultOptio = _ref4.hasDefaultOptions,
-      hasDefaultOptions = _ref4$hasDefaultOptio === void 0 ? true : _ref4$hasDefaultOptio;
+var customStyles = function customStyles(_ref6) {
+  var theme = _ref6.theme,
+      error = _ref6.error,
+      maxHeight = _ref6.maxHeight,
+      windowed = _ref6.windowed,
+      _ref6$hasDefaultOptio = _ref6.hasDefaultOptions,
+      hasDefaultOptions = _ref6$hasDefaultOptio === void 0 ? true : _ref6$hasDefaultOptio;
   return {
     option: function option() {
       return {
@@ -23058,8 +23080,34 @@ var customStyles = function customStyles(_ref4) {
           theme: theme
         }),
         borderRadius: theme.radii.medium,
-        borderBottomLeftRadius: state.selectProps.menuIsOpen && state.selectProps.options.length ? 0 : theme.radii.medium,
-        borderBottomRightRadius: state.selectProps.menuIsOpen && state.selectProps.options.length ? 0 : theme.radii.medium,
+        borderBottomLeftRadius: getControlBorderRadius({
+          border: "bottom",
+          isMenuOpen: state.selectProps.menuIsOpen,
+          menuLength: state.selectProps.options.length,
+          menuPlacement: state.selectProps.menuPlacement,
+          theme: theme
+        }),
+        borderBottomRightRadius: getControlBorderRadius({
+          border: "bottom",
+          isMenuOpen: state.selectProps.menuIsOpen,
+          menuLength: state.selectProps.options.length,
+          menuPlacement: state.selectProps.menuPlacement,
+          theme: theme
+        }),
+        borderTopRightRadius: getControlBorderRadius({
+          border: "top",
+          isMenuOpen: state.selectProps.menuIsOpen,
+          menuLength: state.selectProps.options.length,
+          menuPlacement: state.selectProps.menuPlacement,
+          theme: theme
+        }),
+        borderTopLeftRadius: getControlBorderRadius({
+          border: "top",
+          isMenuOpen: state.selectProps.menuIsOpen,
+          menuLength: state.selectProps.options.length,
+          menuPlacement: state.selectProps.menuPlacement,
+          theme: theme
+        }),
         "&:hover, &:focus": {
           borderColor: getBorderColor({
             errored: error,
@@ -23094,8 +23142,9 @@ var customStyles = function customStyles(_ref4) {
       });
     },
     menu: function menu(provided, state) {
-      return {
+      return Object.assign(Object.assign({}, provided), {
         marginTop: 0,
+        marginBottom: 0,
         position: "absolute",
         overflowX: "auto",
         zIndex: "100",
@@ -23109,16 +23158,44 @@ var customStyles = function customStyles(_ref4) {
           isFocused: false,
           theme: theme
         }),
-        borderBottomStyle: "solid",
         borderLeftStyle: "solid",
         borderRightStyle: "solid",
-        borderRadius: "0 0 4px 4px",
+        borderBottomStyle: getMenuBorderRadius({
+          border: "bottom",
+          menuPlacement: state.selectProps.menuPlacement,
+          theme: theme
+        }).style,
+        borderTopStyle: getMenuBorderRadius({
+          border: "top",
+          menuPlacement: state.selectProps.menuPlacement,
+          theme: theme
+        }).style,
+        borderBottomLeftRadius: getMenuBorderRadius({
+          border: "bottom",
+          menuPlacement: state.selectProps.menuPlacement,
+          theme: theme
+        }).radius,
+        borderBottomRightRadius: getMenuBorderRadius({
+          border: "bottom",
+          menuPlacement: state.selectProps.menuPlacement,
+          theme: theme
+        }).radius,
+        borderTopLeftRadius: getMenuBorderRadius({
+          border: "top",
+          menuPlacement: state.selectProps.menuPlacement,
+          theme: theme
+        }).radius,
+        borderTopRightRadius: getMenuBorderRadius({
+          border: "top",
+          menuPlacement: state.selectProps.menuPlacement,
+          theme: theme
+        }).radius,
         boxShadow: getShadow({
           errored: error,
           isOpen: true,
           theme: theme
         })
-      };
+      });
     },
     menuList: function menuList(provided) {
       return Object.assign(Object.assign({}, provided), {
@@ -23248,6 +23325,7 @@ var SelectDefaultProps = {
   initialIsOpen: undefined,
   maxHeight: "248px",
   menuPosition: "absolute",
+  menuPlacement: "bottom",
   multiselect: false,
   name: undefined,
   onBlur: undefined,

package/dist/src/Select/Select.d.ts

@@ -15,6 +15,7 @@ export declare type SelectProps = {
     id?: string;
     initialIsOpen?: boolean;
     menuPosition?: string;
+    menuPlacement?: string;
     maxHeight?: string;
     multiselect?: boolean;
     name?: string;
@@ -50,6 +51,7 @@ export declare const SelectDefaultProps: {
     initialIsOpen: any;
     maxHeight: string;
     menuPosition: string;
+    menuPlacement: string;
     multiselect: boolean;
     name: any;
     onBlur: any;

package/dist/src/Select/Select.story.d.ts

@@ -108,3 +108,4 @@ export declare const UsingRefToControlFocus: {
     };
 };
 export declare const WithCustomProps: () => JSX.Element;
+export declare const WithTopMenuPlacement: () => JSX.Element;

package/dist/src/Select/customReactSelectStyles.d.ts

@@ -1,3 +1,23 @@
+import { DefaultNDSThemeType } from "../theme.type";
+declare type Placement = "top" | "bottom";
+export declare function getControlBorderRadius({ border, isMenuOpen, menuLength, menuPlacement, theme, }: {
+    border: Placement;
+    isMenuOpen: boolean;
+    menuLength: number;
+    menuPlacement: Placement;
+    theme: DefaultNDSThemeType;
+}): string | 0;
+export declare function getMenuBorderRadius({ border, menuPlacement, theme, }: {
+    border: Placement;
+    menuPlacement: Placement;
+    theme: DefaultNDSThemeType;
+}): {
+    radius: string;
+    style: string;
+} | {
+    radius: number;
+    style: string;
+};
 export declare const showIndicatorSeparator: ({ isMulti, hasValue, hasDefaultOptions }: {
     isMulti: any;
     hasValue: any;
@@ -28,8 +48,10 @@ declare const customStyles: ({ theme, error, maxHeight, windowed, hasDefaultOpti
         boxSizing: string;
         boxShadow: any;
         borderRadius: any;
-        borderBottomLeftRadius: any;
-        borderBottomRightRadius: any;
+        borderBottomLeftRadius: string | number;
+        borderBottomRightRadius: string | number;
+        borderTopRightRadius: string | number;
+        borderTopLeftRadius: string | number;
         "&:hover, &:focus": {
             borderColor: any;
         };
@@ -38,21 +60,7 @@ declare const customStyles: ({ theme, error, maxHeight, windowed, hasDefaultOpti
     indicatorsContainer: (provided: any) => any;
     input: () => {};
     valueContainer: (provided: any) => any;
-    menu: (provided: any, state: any) => {
-        marginTop: number;
-        position: string;
-        overflowX: string;
-        zIndex: string;
-        width: string;
-        background: any;
-        borderWidth: string;
-        borderColor: any;
-        borderBottomStyle: string;
-        borderLeftStyle: string;
-        borderRightStyle: string;
-        borderRadius: string;
-        boxShadow: any;
-    };
+    menu: (provided: any, state: any) => any;
     menuList: (provided: any) => any;
     multiValue: (provided: any) => any;
     multiValueLabel: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "8.7.3",
+  "version": "8.8.0",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {
@@ -109,6 +109,7 @@
     "jest": "24.1.0",
     "jest-styled-components": "7",
     "jscodeshift": "^0.11.0",
+    "lost-pixel": "^3.2.0",
     "mockdate": "^3.0.2",
     "plop": "^2.4.0",
     "prop-types": "15.7.2",