@nulogy/components 10.2.13 → 10.3.0

package/dist/main.js

@@ -21630,14 +21630,18 @@
       };
     }
     function stylesForSize(config, size) {
+      if (size === void 0) {
+        size = "medium";
+      }
+
       return config[size];
     }
-    var showIndicatorSeparator = function showIndicatorSeparator(_ref5) {
-      var isMulti = _ref5.isMulti,
-          hasValue = _ref5.hasValue,
-          hasDefaultOptions = _ref5.hasDefaultOptions;
-      return isMulti && hasValue && hasDefaultOptions;
-    };
+    function showIndicatorSeparator(_ref5) {
+      var hasValue = _ref5.hasValue,
+          isClearable = _ref5.isClearable,
+          isMulti = _ref5.isMulti;
+      return hasValue && (isMulti || isClearable);
+    }
 
     var customStyles = function customStyles(_ref6) {
       var theme = _ref6.theme,
@@ -21653,6 +21657,11 @@
             height: 38
           };
         },
+        clearIndicator: function clearIndicator(provided) {
+          return Object.assign(Object.assign({}, provided), {
+            color: theme.colors.midGrey
+          });
+        },
         control: function control(provided, state) {
           return Object.assign(Object.assign({}, provided), {
             display: "flex",
@@ -21664,7 +21673,6 @@
             lineHeight: theme.lineHeights.base,
             color: state.isDisabled ? curriedTransparentize(0.6667, theme.colors.black) : theme.colors.black,
             background: state.isDisabled ? theme.colors.whiteGrey : theme.colors.white,
-            border: "1px solid " + theme.colors.grey,
             borderColor: getBorderColor({
               errored: error,
               disabled: state.isDisabled,
@@ -21722,12 +21730,12 @@
           return Object.assign(Object.assign(Object.assign({}, provided), !hasDefaultOptions && {
             display: "none"
           }), {
-            color: theme.colors.grey
+            color: theme.colors.midGrey
           });
         },
         indicatorsContainer: function indicatorsContainer(provided) {
           return Object.assign(Object.assign({}, provided), {
-            color: theme.colors.grey
+            color: theme.colors.midGrey
           });
         },
         singleValue: function singleValue(provided) {
@@ -21741,8 +21749,8 @@
         },
         valueContainer: function valueContainer(provided, state) {
           return Object.assign(Object.assign(Object.assign({}, provided), {
-            display: "flex",
             padding: 0,
+            display: "flex",
             overflow: "auto",
             maxHeight: "150px",
             gap: theme.space.half
@@ -21753,8 +21761,8 @@
               gap: theme.space.x1
             },
             medium: {
-              paddingTop: theme.space.half,
-              paddingBottom: theme.space.half
+              paddingTop: theme.space.none,
+              paddingBottom: theme.space.none
             }
           }, size));
         },
@@ -21884,9 +21892,9 @@
         indicatorSeparator: function indicatorSeparator(provided, state) {
           return Object.assign(Object.assign({}, provided), {
             display: showIndicatorSeparator({
-              isMulti: state.isMulti,
               hasValue: state.hasValue,
-              hasDefaultOptions: hasDefaultOptions
+              isClearable: state.selectProps.isClearable,
+              isMulti: state.isMulti
             }) ? "block" : "none",
             borderLeft: "1px solid " + theme.colors.grey
           });
@@ -21899,7 +21907,7 @@
             position: "absolute",
             top: "50%",
             transform: "translateY(-50%)",
-            color: state.isDisabled ? curriedTransparentize(0.6667, theme.colors.black) : "hsl(0,0%,50%)"
+            color: state.isDisabled ? curriedTransparentize(0.7, theme.colors.midGrey) : theme.colors.midGrey
           };
         }
       };
@@ -26920,9 +26928,10 @@
         listStyle: "none",
         display: "inline-flex",
         alignSelf: "center",
-        color: theme.colors.darkBlue,
+        color: theme.colors.midGrey,
         a: {
-          color: theme.colors.darkBlue
+          color: theme.colors.darkBlue,
+          textDecorationLine: "none"
         },
         "a:visited": {
           color: theme.colors.darkBlue
@@ -26938,7 +26947,7 @@
         large: {
           "a, p": {
             py: "x2",
-            px: "x1",
+            px: "x0",
             fontSize: "medium"
           }
         },
@@ -51461,6 +51470,7 @@
           onClick = _ref.onClick;
       return /*#__PURE__*/React__default["default"].createElement(AnimatedBox, {
         position: "relative",
+        flexShrink: 0,
         height: "24px",
         width: "48px",
         bg: disabled ? "grey" : getSwitchBackground(toggled),

package/dist/main.module.js

@@ -21613,14 +21613,18 @@ function getMenuBorderRadius(_ref4) {
   };
 }
 function stylesForSize(config, size) {
+  if (size === void 0) {
+    size = "medium";
+  }
+
   return config[size];
 }
-var showIndicatorSeparator = function showIndicatorSeparator(_ref5) {
-  var isMulti = _ref5.isMulti,
-      hasValue = _ref5.hasValue,
-      hasDefaultOptions = _ref5.hasDefaultOptions;
-  return isMulti && hasValue && hasDefaultOptions;
-};
+function showIndicatorSeparator(_ref5) {
+  var hasValue = _ref5.hasValue,
+      isClearable = _ref5.isClearable,
+      isMulti = _ref5.isMulti;
+  return hasValue && (isMulti || isClearable);
+}
 
 var customStyles = function customStyles(_ref6) {
   var theme = _ref6.theme,
@@ -21636,6 +21640,11 @@ var customStyles = function customStyles(_ref6) {
         height: 38
       };
     },
+    clearIndicator: function clearIndicator(provided) {
+      return Object.assign(Object.assign({}, provided), {
+        color: theme.colors.midGrey
+      });
+    },
     control: function control(provided, state) {
       return Object.assign(Object.assign({}, provided), {
         display: "flex",
@@ -21647,7 +21656,6 @@ var customStyles = function customStyles(_ref6) {
         lineHeight: theme.lineHeights.base,
         color: state.isDisabled ? curriedTransparentize(0.6667, theme.colors.black) : theme.colors.black,
         background: state.isDisabled ? theme.colors.whiteGrey : theme.colors.white,
-        border: "1px solid " + theme.colors.grey,
         borderColor: getBorderColor({
           errored: error,
           disabled: state.isDisabled,
@@ -21705,12 +21713,12 @@ var customStyles = function customStyles(_ref6) {
       return Object.assign(Object.assign(Object.assign({}, provided), !hasDefaultOptions && {
         display: "none"
       }), {
-        color: theme.colors.grey
+        color: theme.colors.midGrey
       });
     },
     indicatorsContainer: function indicatorsContainer(provided) {
       return Object.assign(Object.assign({}, provided), {
-        color: theme.colors.grey
+        color: theme.colors.midGrey
       });
     },
     singleValue: function singleValue(provided) {
@@ -21724,8 +21732,8 @@ var customStyles = function customStyles(_ref6) {
     },
     valueContainer: function valueContainer(provided, state) {
       return Object.assign(Object.assign(Object.assign({}, provided), {
-        display: "flex",
         padding: 0,
+        display: "flex",
         overflow: "auto",
         maxHeight: "150px",
         gap: theme.space.half
@@ -21736,8 +21744,8 @@ var customStyles = function customStyles(_ref6) {
           gap: theme.space.x1
         },
         medium: {
-          paddingTop: theme.space.half,
-          paddingBottom: theme.space.half
+          paddingTop: theme.space.none,
+          paddingBottom: theme.space.none
         }
       }, size));
     },
@@ -21867,9 +21875,9 @@ var customStyles = function customStyles(_ref6) {
     indicatorSeparator: function indicatorSeparator(provided, state) {
       return Object.assign(Object.assign({}, provided), {
         display: showIndicatorSeparator({
-          isMulti: state.isMulti,
           hasValue: state.hasValue,
-          hasDefaultOptions: hasDefaultOptions
+          isClearable: state.selectProps.isClearable,
+          isMulti: state.isMulti
         }) ? "block" : "none",
         borderLeft: "1px solid " + theme.colors.grey
       });
@@ -21882,7 +21890,7 @@ var customStyles = function customStyles(_ref6) {
         position: "absolute",
         top: "50%",
         transform: "translateY(-50%)",
-        color: state.isDisabled ? curriedTransparentize(0.6667, theme.colors.black) : "hsl(0,0%,50%)"
+        color: state.isDisabled ? curriedTransparentize(0.7, theme.colors.midGrey) : theme.colors.midGrey
       };
     }
   };
@@ -26903,9 +26911,10 @@ var BreadcrumbsListItem = styled.li.withConfig({
     listStyle: "none",
     display: "inline-flex",
     alignSelf: "center",
-    color: theme.colors.darkBlue,
+    color: theme.colors.midGrey,
     a: {
-      color: theme.colors.darkBlue
+      color: theme.colors.darkBlue,
+      textDecorationLine: "none"
     },
     "a:visited": {
       color: theme.colors.darkBlue
@@ -26921,7 +26930,7 @@ var BreadcrumbsListItem = styled.li.withConfig({
     large: {
       "a, p": {
         py: "x2",
-        px: "x1",
+        px: "x0",
         fontSize: "medium"
       }
     },
@@ -51444,6 +51453,7 @@ function Switch(_ref) {
       onClick = _ref.onClick;
   return /*#__PURE__*/React__default.createElement(AnimatedBox, {
     position: "relative",
+    flexShrink: 0,
     height: "24px",
     width: "48px",
     bg: disabled ? "grey" : getSwitchBackground(toggled),

package/dist/src/AsyncSelect/fixtures.d.ts

@@ -0,0 +1,4 @@
+export declare const provinces: {
+    label: string;
+    value: string;
+}[];

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

@@ -22,12 +22,12 @@ export declare function getMenuBorderRadius({ border, menuPlacement, theme, }: {
 type SizeConfig = {
     [key in ComponentSize]: CSSObject;
 };
-export declare function stylesForSize(config: SizeConfig, size: ComponentSize): CSSObject;
-export declare const showIndicatorSeparator: ({ isMulti, hasValue, hasDefaultOptions }: {
-    isMulti: any;
+export declare function stylesForSize(config: SizeConfig, size?: ComponentSize): CSSObject;
+export declare function showIndicatorSeparator({ hasValue, isClearable, isMulti }: {
     hasValue: any;
-    hasDefaultOptions: any;
-}) => any;
+    isClearable: any;
+    isMulti: any;
+}): any;
 interface Args {
     theme: DefaultNDSThemeType;
     [key: string]: any;

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

@@ -41,6 +41,7 @@ export declare const WithLongText: {
         name: string;
     };
 };
+export declare const WithContraintWidth: () => React.JSX.Element;
 export declare const ControlledToggle: () => React.JSX.Element;
 export declare const UsingRefToControlFocus: {
     (): React.JSX.Element;

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

@@ -64,3 +64,4 @@ export declare const OpenByDefault: {
     };
 };
 export declare const WithCustomComponent: () => React.JSX.Element;
+export declare const WithRef: () => React.JSX.Element;

package/dist/src/utils/story/simulatedAPIRequests.d.ts

@@ -0,0 +1,4 @@
+export declare function filterOptions(inputValue: string, options: {
+    value: string;
+    label: string;
+}[], simulatedNetworkDelayMs?: number): Promise<Response>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "10.2.13",
+  "version": "10.3.0",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {
@@ -52,7 +52,8 @@
     "@nulogy/icons": "4",
     "react": ">=16.10.2",
     "react-dom": ">=16.10.2",
-    "styled-components": "^5.1.0"
+    "styled-components": "^5.1.0",
+    "typescript": "4.9.5"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
@@ -110,7 +111,7 @@
     "eslint-plugin-prettier": "^3.1.4",
     "http-server": "^14.0.0",
     "husky": "^4.3.0",
-    "jest": "29.5.0",
+    "jest": "29.7.0",
     "jest-environment-jsdom": "^29.5.0",
     "jest-styled-components": "7",
     "jscodeshift": "^0.11.0",

package/dist/src/utils/story/simulatedAPIRequest.d.ts

@@ -1,5 +0,0 @@
-declare const simulatedAPIRequest: (inputValue: string, data: {
-    value: string;
-    label: string;
-}[], milliseconds?: number) => Promise<Response>;
-export default simulatedAPIRequest;