@nulogy/components 8.7.2 → 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,
@@ -50878,8 +50956,7 @@
   var Header = function Header(_a) {
     var _b, _c;
 
-    var _a$background = _a.background,
-        background = _a$background === void 0 ? "whiteGrey" : _a$background,
+    var background = _a.background,
         renderBreadcrumbs = _a.renderBreadcrumbs,
         title = _a.title,
         _a$undecorated = _a.undecorated,
@@ -50896,12 +50973,13 @@
     var mediumBreakpoint = pixelDigitsFrom$1((_c = breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.medium) !== null && _c !== void 0 ? _c : theme.breakpoints.medium);
     var m = useMediaQuery("(max-width: " + mediumBreakpoint + "px)");
     var sm = useMediaQuery("(max-width: " + smallBreakpoint + "px)");
+    var bg = background ? background : undecorated ? "transparent" : "whiteGrey";
     return /*#__PURE__*/React__default['default'].createElement(Flex, Object.assign({
       py: "x1",
       px: "x3",
       gap: "x2",
       position: "relative",
-      bg: background
+      bg: bg
     }, rest), /*#__PURE__*/React__default['default'].createElement(Flex, {
       flexGrow: 3,
       justifyContent: "space-between",

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,
@@ -50852,8 +50930,7 @@ var ApplicationFrame = function ApplicationFrame(_a) {
 var Header = function Header(_a) {
   var _b, _c;
 
-  var _a$background = _a.background,
-      background = _a$background === void 0 ? "whiteGrey" : _a$background,
+  var background = _a.background,
       renderBreadcrumbs = _a.renderBreadcrumbs,
       title = _a.title,
       _a$undecorated = _a.undecorated,
@@ -50870,12 +50947,13 @@ var Header = function Header(_a) {
   var mediumBreakpoint = pixelDigitsFrom$1((_c = breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.medium) !== null && _c !== void 0 ? _c : theme.breakpoints.medium);
   var m = useMediaQuery("(max-width: " + mediumBreakpoint + "px)");
   var sm = useMediaQuery("(max-width: " + smallBreakpoint + "px)");
+  var bg = background ? background : undecorated ? "transparent" : "whiteGrey";
   return /*#__PURE__*/React__default.createElement(Flex, Object.assign({
     py: "x1",
     px: "x3",
     gap: "x2",
     position: "relative",
-    bg: background
+    bg: bg
   }, rest), /*#__PURE__*/React__default.createElement(Flex, {
     flexGrow: 3,
     justifyContent: "space-between",

package/dist/src/Layout/Header.story.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
-export declare const DefaultBackground: () => JSX.Element;
-export declare const WithAnUndecoratedBackground: () => JSX.Element;
+export declare const Default: () => JSX.Element;
 export declare const WithActions: () => JSX.Element;
-export declare const WithCustomBackground: () => JSX.Element;
 export declare const WithSubTitle: () => JSX.Element;
 export declare const WithContent: () => JSX.Element;
 export declare const WithSummary: () => JSX.Element;
+export declare const WithAnUndecoratedBackground: () => JSX.Element;
+export declare const WithCustomBackground: () => JSX.Element;
 export declare const WithEverything: () => JSX.Element;
 declare const _default: {
     title: string;

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.2",
+  "version": "8.8.0",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {
@@ -62,12 +62,12 @@
     "@nulogy/icons": "^4.18.0",
     "@rollup/plugin-babel": "^5.0.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
-    "@semantic-release/changelog": "^5.0.1",
-    "@semantic-release/commit-analyzer": "^8.0.1",
-    "@semantic-release/git": "^9.0.0",
-    "@semantic-release/github": "^7.1.1",
-    "@semantic-release/npm": "^7.0.6",
-    "@semantic-release/release-notes-generator": "^9.0.1",
+    "@semantic-release/changelog": "^6.0.2",
+    "@semantic-release/commit-analyzer": "^9.0.2",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^8.0.7",
+    "@semantic-release/npm": "^9.0.0",
+    "@semantic-release/release-notes-generator": "^10.0.3",
     "@storybook/addon-a11y": "^6.1.9",
     "@storybook/addon-actions": "^6.1.9",
     "@storybook/addon-knobs": "^6.1.9",
@@ -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",