@nulogy/components 10.2.14 → 10.4.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"
           }
         },

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"
       }
     },

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

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

package/dist/src/Button/Button.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
 import { DefaultNDSThemeType } from "../theme.type";
+import icons from "@nulogy/icons";
 type ComponentSize = "small" | "medium" | "large";
 export type ButtonProps = SpaceProps & React.ComponentPropsWithRef<"button"> & {
     className?: string;
-    icon?: any;
+    icon?: keyof typeof icons | "loading";
     iconSide?: "left" | "right";
     size?: ComponentSize;
     fullWidth?: boolean;

package/dist/src/Button/ControlIcon.d.ts

@@ -1,10 +1,11 @@
+import icons from "@nulogy/icons";
 import React from "react";
 import { SpaceProps } from "styled-system";
 declare const ControlIcon: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: React.Ref<HTMLButtonElement>;
 } & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    icon: string;
+    icon: keyof typeof icons | "loading";
     toggled?: boolean;
     disabled?: boolean;
     size?: string;

package/dist/src/Button/IconicButton.d.ts

@@ -1,11 +1,12 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
+import icons from "@nulogy/icons";
 import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
 interface BaseProps {
     size?: ComponentSize;
     color?: string;
     labelHidden?: boolean;
-    icon?: string;
+    icon?: keyof typeof icons | "loading";
     iconSize?: string;
     hoverBackgroundColor?: string;
     fontSize?: string;

package/dist/src/FieldLabel/FramedIcon.d.ts

@@ -1,7 +1,8 @@
 import React, { ReactElement } from "react";
+import icons from "@nulogy/icons";
 interface FramedIconProps extends React.ComponentPropsWithoutRef<"svg"> {
     iconSize: string;
-    icon: string;
+    icon: keyof typeof icons | "loading";
     focusable?: boolean;
     maxWidth?: string;
     tooltip?: string | ReactElement;

package/dist/src/Icon/Icon.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
+import icons from "@nulogy/icons";
 interface IconProps extends SpaceProps {
-    icon: string;
+    icon: keyof typeof icons | "loading";
     className?: string;
     size?: string;
     title?: string;

package/dist/src/Input/InputField.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
 import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
+import icons from "@nulogy/icons";
 type NativeInputProps = Omit<React.ComponentPropsWithRef<"input">, "size">;
 export interface InputFieldProps extends NativeInputProps {
     htmlSize?: number;
     size?: ComponentSize;
-    icon?: string;
+    icon?: keyof typeof icons | "loading";
     error?: boolean;
     labelText?: string;
     requirementText?: 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/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.14",
+  "version": "10.4.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",
@@ -63,7 +64,7 @@
     "@babel/preset-env": "7.3.1",
     "@babel/preset-typescript": "^7.10.4",
     "@nulogy/eslint-config-nulogy": "^1.0.0",
-    "@nulogy/icons": "4.34.1",
+    "@nulogy/icons": "^4.36.0",
     "@rollup/plugin-babel": "^5.0.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@semantic-release/changelog": "^6.0.2",
@@ -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;