@nulogy/components 11.0.0-beta.5 → 11.1.0

package/dist/src/utils/PreventBodyElementScrolling.d.ts

@@ -1,22 +1,8 @@
-export default PreventBodyElementScrolling;
-declare class PreventBodyElementScrolling extends React.Component<any, any, any> {
+export default class PreventBodyElementScrolling extends React.Component<any, any, any> {
     constructor(props: any);
     constructor(props: any, context: any);
     componentDidMount(): void;
     componentWillUnmount(): void;
     render(): React.JSX.Element;
 }
-declare namespace PreventBodyElementScrolling {
-    namespace propTypes {
-        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        const scrollableRef: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{}>>>;
-    }
-    namespace defaultProps {
-        const children_1: any;
-        export { children_1 as children };
-        const scrollableRef_1: any;
-        export { scrollableRef_1 as scrollableRef };
-    }
-}
 import React from "react";
-import PropTypes from "prop-types";

package/dist/src/utils/ScrollIndicators.d.ts

@@ -13,10 +13,4 @@ declare class ScrollIndicators extends React.Component<any, any, any> {
     contentHiddenAbove(): boolean;
     render(): React.JSX.Element;
 }
-declare namespace ScrollIndicators {
-    namespace propTypes {
-        const children: PropTypes.Validator<PropTypes.ReactElementLike>;
-    }
-}
 import React from "react";
-import PropTypes from "prop-types";

package/dist/src/utils/localized-date-fns.d.ts

@@ -1 +1 @@
-export function localizedFormat(date: any, stringFormat: any, ndsLocale: any): string;
+export declare function localizedFormat(date: number, dateFormat: string, ndsLocale: string): string;

package/dist/src/utils/noop.d.ts

@@ -0,0 +1,5 @@
+/**
+ * No operation function that does nothing and returns nothing.
+ * Useful as a default callback or placeholder.
+ */
+export declare function noop(): void;

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

@@ -0,0 +1,9 @@
+import { StyledComponent } from "styled-components";
+import { ComponentType } from "react";
+import { DefaultNDSThemeType } from "../../theme.type";
+/**
+ * A styled utility that adds a dashed border around a component
+ * to highlight its boundaries. To be used in Storybook exclusively.
+ * Do not export for production.
+ */
+export declare const dashed: <P extends object>(component: ComponentType<P>) => StyledComponent<ComponentType<P>, DefaultNDSThemeType, {}, never>;

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { BoxProps } from "../../Box";
+/**
+ * A dialognaly striped and bordered rectangle that can be used as a placeholder for content.
+ * To be used in Storybook exclusively. Do not export for production.
+ */
+export declare function Placeholder(props: BoxProps): 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/dist/src/utils/subPx.d.ts

@@ -1,2 +1,9 @@
-export default subPx;
-declare function subPx(val1: any, val2: any): string;
+type CSSUnit = string;
+/**
+ * Subtracts two CSS measurements using calc()
+ * @param baseValue The starting CSS measurement
+ * @param subtractValue The value to subtract (defaults to '1px')
+ * @returns A CSS calc() expression
+ */
+export default function subPx(baseValue: CSSUnit, subtractValue?: CSSUnit): string;
+export {};

package/dist/src/utils/subset.d.ts

@@ -1,2 +1,3 @@
 export function getSubset(o: any, propObj: any): any;
 export function omitSubset(o: any, propObj: any): {};
+export function pick(o: any, ...fields: any[]): any;

package/dist/src/utils/ts/FocusManager.d.ts

@@ -13,5 +13,5 @@ type FocusManagerProps = {
     defaultFocusedIndex: number | null;
     children: (handlers: ChildrenHandlers) => ReactNode;
 };
-declare const FocusManager: React.FC<FocusManagerProps>;
+declare const FocusManager: React.FC<React.PropsWithChildren<FocusManagerProps>>;
 export default FocusManager;

package/dist/src/utils/useWindowDimensions.d.ts

@@ -1,4 +1,4 @@
-export function getWindowDimensionInfo(width: any, height: any): {
+export function getWindowDimensionInfo(width: any, height: any, theme: any): {
     width: any;
     height: any;
     widthBreakpoints: {

package/package.json

@@ -1,15 +1,19 @@
 {
   "name": "@nulogy/components",
-  "version": "11.0.0-beta.5",
+  "version": "11.1.0",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
+    "ci": "yarn && yarn build && yarn test && yarn run check",
     "new": "plop",
-    "start": "concurrently \"yarn build --watch\" \"start-storybook -p 9999\"",
-    "start:e2e": "yarn concurrently --kill-others \"yarn start --ci\" \"yarn wait-on http://localhost:9999 && cypress open\"",
+    "generate:theme": "npx tsx src/scripts/generateTheme.ts && prettier -w src/theme.ts",
+    "start": "concurrently \"yarn build --watch\" \"yarn start:storybook\"",
+    "start:cypress": "yarn concurrently --kill-others \"yarn start --ci\" \"yarn wait-on http://localhost:9999 && cypress open\"",
+    "start:storybook": "start-storybook -p 9999",
+    "clean:storybook": "rm -rf node_modules/.cache/storybook && rm -rf ./storybook-static",
     "build": "rollup -c",
     "build:storybook": "build-storybook",
     "check": "yarn check:types && yarn check:lint && yarn check:format",
@@ -19,9 +23,9 @@
     "fix": "yarn fix:lint && yarn fix:format",
     "fix:lint": "yarn check:lint --fix",
     "fix:format": "prettier -w .",
-    "test": "yarn test:components && yarn run test:e2e",
+    "test": "yarn test:components && yarn run test:cypress",
     "test:components": "jest",
-    "test:e2e": "yarn build:storybook && yarn concurrently --success \"first\" --kill-others \"yarn http-server -p 9999 ./storybook-static\" \"yarn wait-on http://localhost:9999 && yarn cypress run\"",
+    "test:cypress": "yarn build:storybook && yarn concurrently --success \"first\" --kill-others \"yarn http-server -p 9999 ./storybook-static\" \"yarn wait-on http://localhost:9999 && yarn cypress run\"",
     "test:visual": "npx chromatic --project-token $CHROMATIC_TOKEN --exit-zero-on-changes"
   },
   "license": "MIT",
@@ -52,7 +56,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 +68,7 @@
     "@babel/preset-env": "7.3.1",
     "@babel/preset-typescript": "^7.10.4",
     "@nulogy/eslint-config-nulogy": "^1.0.0",
-    "@nulogy/icons": "^4.26.0",
+    "@nulogy/icons": "4.34.1",
     "@rollup/plugin-babel": "^5.0.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@semantic-release/changelog": "^6.0.2",
@@ -74,6 +79,7 @@
     "@semantic-release/release-notes-generator": "^10.0.3",
     "@storybook/addon-a11y": "^6.1.9",
     "@storybook/addon-actions": "^6.1.9",
+    "@storybook/addon-docs": "6.1.9",
     "@storybook/addon-knobs": "^6.1.9",
     "@storybook/addon-storysource": "^6.1.9",
     "@storybook/addon-viewport": "^7.6.6",
@@ -110,14 +116,12 @@
     "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",
     "mockdate": "^3.0.2",
     "plop": "^2.4.0",
-    "prettier": "^3.3.2",
-    "prop-types": "15.7.2",
     "react": "17.0.2",
     "react-color": "^2.18.1",
     "react-dom": "17.0.2",
@@ -141,13 +145,12 @@
   "dependencies": {
     "@babel/runtime": "^7.9.6",
     "@nulogy/tokens": "^5.4.0",
+    "@reach/dialog": "0.17.0",
     "@styled-system/prop-types": "^5.1.4",
     "@styled-system/theme-get": "^5.1.2",
-    "@types/react-window": "^1.8.8",
     "@types/styled-system": "5.1.22",
     "body-scroll-lock": "^3.1.5",
     "core-js": "3",
-    "create-react-context": "^0.3.0",
     "date-fns": "2.23.0",
     "debounce": "^1.2.0",
     "deep-equal": "^2.2.1",
@@ -158,18 +161,18 @@
     "react-fast-compare": "^3.2.0",
     "react-hot-toast": "^2.4.1",
     "react-i18next": "^12.3.1",
-    "react-input-autosize": "^2.2.2",
     "react-modal": "^3.14.4",
     "react-popper": "1.3.11",
     "react-popper-2": "npm:react-popper@2.2.4",
     "react-resize-detector": "^9.1.0",
     "react-select": "^5.8.0",
-    "react-window": "^1.8.10",
+    "react-windowed-select": "^5.2.0",
+    "smoothscroll-polyfill": "^0.4.4",
     "styled-system": "^5.1.4"
   },
   "husky": {
     "hooks": {
-      "pre-push": "yarn run check"
+      "pre-push": "yarn run ci"
     }
   },
   "jest": {

package/dist/src/NDSProvider/ComponentSizeContext.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-export type ComponentSize = "medium" | "large";
-type ComponentSizeContextValue = {
-    size: ComponentSize;
-};
-export declare const ComponentSizeContext: React.Context<ComponentSizeContextValue>;
-export declare function useComponentSize(selectedSize?: ComponentSize): ComponentSize;
-declare const ComponentSizeContextProvider: React.FC<ComponentSizeContextValue>;
-export default ComponentSizeContextProvider;

package/dist/src/NavBar/DesktopMenu.d.ts

@@ -1,18 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-declare const DesktopMenu: import("styled-components").StyledComponent<{
-    ({ menuData, themeColorObject, ...props }: {
-        [x: string]: any;
-        menuData: any;
-        themeColorObject: any;
-    }): React.JSX.Element;
-    propTypes: {
-        menuData: PropTypes.Requireable<PropTypes.InferProps<{}>[]>;
-        themeColorObject: PropTypes.Requireable<PropTypes.InferProps<{}>>;
-    };
-    defaultProps: {
-        menuData: any;
-        themeColorObject: any;
-    };
-}, import("styled-components").DefaultTheme, {}, never>;
-export default DesktopMenu;

package/dist/src/NavBar/MenuTrigger.d.ts

@@ -1,29 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-export type MenuTriggerProps = {
-    name?: string;
-    "aria-label"?: string;
-    color?: string;
-    hoverColor?: string;
-    hoverBackground?: string;
-    menuData?: any[];
-};
-declare const MenuTrigger: {
-    (props: any): React.JSX.Element;
-    propTypes: {
-        name: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        "aria-label": PropTypes.Requireable<string>;
-        menuData: PropTypes.Requireable<PropTypes.InferProps<{}>[]>;
-        color: PropTypes.Requireable<string>;
-        hoverColor: PropTypes.Requireable<string>;
-        hoverBackground: PropTypes.Requireable<string>;
-    };
-    defaultProps: {
-        menuData: any;
-        "aria-label": any;
-        color: string;
-        hoverColor: string;
-        hoverBackground: string;
-    };
-};
-export default MenuTrigger;

package/dist/src/NavBar/MobileMenu.d.ts

@@ -1,34 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-declare const MobileMenu: import("styled-components").StyledComponent<{
-    ({ menuData, closeMenu, subtext, includeSubtext, themeColorObject, ...props }: {
-        [x: string]: any;
-        menuData: any;
-        closeMenu: any;
-        subtext: any;
-        includeSubtext: any;
-        themeColorObject: any;
-    }): React.JSX.Element;
-    propTypes: {
-        menuData: PropTypes.Requireable<PropTypes.InferProps<{
-            primaryMenu: PropTypes.Requireable<PropTypes.InferProps<{}>[]>;
-            secondaryMenu: PropTypes.Requireable<PropTypes.InferProps<{}>[]>;
-        }>>;
-        subtext: PropTypes.Requireable<string>;
-        includeSubtext: PropTypes.Requireable<boolean>;
-        closeMenu: PropTypes.Requireable<(...args: any[]) => any>;
-        themeColorObject: PropTypes.Requireable<PropTypes.InferProps<{
-            textColor: PropTypes.Requireable<string>;
-            background: PropTypes.Requireable<string>;
-            logoColor: PropTypes.Requireable<string>;
-        }>>;
-    };
-    defaultProps: {
-        menuData: any;
-        subtext: any;
-        includeSubtext: boolean;
-        closeMenu: () => void;
-        themeColorObject: any;
-    };
-}, import("styled-components").DefaultTheme, {}, never>;
-export default MobileMenu;

package/dist/src/NavBar/NavBar.d.ts

@@ -1,66 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { DefaultNDSThemeType } from "../theme.type";
-export declare const getThemeColor: (themeColor: any) => any;
-export declare const NavBarBackground: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Box/Box").BoxProps & {
-    gap?: import("csstype").Property.Gap<string | number>;
-    rowGap?: import("csstype").Property.RowGap<string | number>;
-    columnGap?: import("csstype").Property.ColumnGap<string | number>;
-} & {
-    backgroundColor: string;
-    theme?: DefaultNDSThemeType;
-}, never>;
-export declare const BrandingLink: ({ to, href, children, ...props }: {
-    [x: string]: any;
-    to: any;
-    href: any;
-    children: any;
-}) => React.JSX.Element;
-export declare const MenuDataPropTypes: {
-    primaryMenu: PropTypes.Requireable<unknown[]>;
-    secondaryMenu: PropTypes.Requireable<unknown[]>;
-    search: PropTypes.Requireable<PropTypes.InferProps<{
-        onSubmit: PropTypes.Requireable<(...args: any[]) => any>;
-    }>>;
-};
-export declare const MobileMenuTrigger: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
-    hoverColor: string;
-    hoverBackground: string;
-}, never>;
-export declare const SmallHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {
-    isOpen: boolean;
-}, never>;
-export declare const pixelDigitsFrom: (pixelString: any) => number;
-export declare const MenuIcon: {
-    ({ isOpen }: {
-        isOpen: any;
-    }): React.JSX.Element;
-    propTypes: {
-        isOpen: PropTypes.Requireable<boolean>;
-    };
-    defaultProps: {
-        isOpen: boolean;
-    };
-};
-declare const NavBar: {
-    (props: any): React.JSX.Element;
-    propTypes: {
-        menuData: PropTypes.Requireable<PropTypes.InferProps<{
-            primaryMenu: PropTypes.Requireable<unknown[]>;
-            secondaryMenu: PropTypes.Requireable<unknown[]>;
-            search: PropTypes.Requireable<PropTypes.InferProps<{
-                onSubmit: PropTypes.Requireable<(...args: any[]) => any>;
-            }>>;
-        }>>;
-        className: PropTypes.Requireable<string>;
-        breakpointUpper: PropTypes.Requireable<NonNullable<string | number>>;
-        themeColor: PropTypes.Requireable<string>;
-    };
-    defaultProps: {
-        menuData: any;
-        className: any;
-        breakpointUpper: string;
-        themeColor: string;
-    };
-};
-export default NavBar;

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

@@ -1,77 +0,0 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const _NavBar: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithoutSearch: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithoutSecondaryMenu: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithoutSearchAndSecondaryMenu: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithoutSearchAndPrimaryMenu: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithBrandingOnly: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithCustomLinkComponents: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithTextInTheMenu: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithSubtext: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithAlternativeBrandingLink: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithAlternateThemeColor: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithReactRouter: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};

package/dist/src/NavBar/NavBarDropdownMenu.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-declare const NavBarDropdownMenu: React.JSXElementConstructor<any>;
-export default NavBarDropdownMenu;

package/dist/src/NavBar/SmallNavBar.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-declare const SmallNavBar: React.JSXElementConstructor<any>;
-export default SmallNavBar;

package/dist/src/NavBar/SubMenuTrigger.d.ts

@@ -1,15 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-declare const SubMenuTrigger: {
-    (props: any): React.JSX.Element;
-    propTypes: {
-        name: PropTypes.Validator<string>;
-        menuData: PropTypes.Requireable<PropTypes.InferProps<{}>[]>;
-        onItemClick: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    defaultProps: {
-        menuData: any;
-        onItemClick: any;
-    };
-};
-export default SubMenuTrigger;

package/dist/src/NavBar/index.d.ts

@@ -1 +0,0 @@
-export { default as NavBar } from "./NavBar";

package/dist/src/NavBar/isValidMenuItem.d.ts

@@ -1,2 +0,0 @@
-declare const isValidMenuItem: (arr: any, idx: any, componentName: any, location: any, propFullName: any) => Error;
-export default isValidMenuItem;

package/dist/src/NavBar/renderSubMenuItems.d.ts

@@ -1,2 +0,0 @@
-declare const renderSubMenuItems: (subMenuItems: any, onItemClick: any, SubMenuTrigger: any) => any;
-export default renderSubMenuItems;

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

@@ -1,3 +0,0 @@
-import * as React from "react";
-declare function MenuList(props: any): React.JSX.Element;
-export default MenuList;

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

@@ -1,19 +0,0 @@
-import React from "react";
-import { SelectOptionProps } from "./SelectOption";
-import { NDSOption } from "./Select";
-export declare const errorList: string[];
-export declare const options: NDSOption[];
-export declare const partnerCompanyName: {
-    value: string;
-    label: string;
-}[];
-export declare const wrappingOptions: {
-    value: string;
-    label: string;
-}[];
-export declare const PCNList: {
-    value: string;
-    label: string;
-}[];
-export declare const getPhotos: () => Promise<any>;
-export declare const CustomOption: ({ children, ...props }: SelectOptionProps) => React.JSX.Element;

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

@@ -1,20 +0,0 @@
-import { Options, PropsValue } from "react-select";
-import { NDSOption, NDSOptionValue } from "./Select";
-export declare function calcOptionsLength(options: any): any;
-export declare function flattenGroupedChildren(children: any): any;
-export declare function isFocused({ props: { isFocused } }: {
-    props: {
-        isFocused: any;
-    };
-}): boolean;
-export declare function getCurrentIndex(children: any): number;
-export declare function createGetHeight({ groupHeadingStyles, noOptionsMsgStyles, optionStyles, loadingMsgStyles }: {
-    groupHeadingStyles: any;
-    noOptionsMsgStyles: any;
-    optionStyles: any;
-    loadingMsgStyles: any;
-}): (child: any) => any;
-export declare function checkOptionsAreValid(options: Options<NDSOption>): void;
-export declare function getOption(options: Options<NDSOption>, value: PropsValue<NDSOptionValue>): any;
-export declare function getReactSelectValue(options: Options<NDSOption>, input: PropsValue<NDSOptionValue>): any;
-export declare function extractValue(options: Options<NDSOption> | NDSOption, isMulti: boolean): NDSOptionValue[] | NDSOptionValue;

package/dist/src/utils/DeprecatedComponent.d.ts

@@ -1,2 +0,0 @@
-export function Deprecated(Component: any, message?: string): (props: any) => React.JSX.Element;
-import React from "react";

package/dist/src/utils/conditionallyRequiredProp.d.ts

@@ -1 +0,0 @@
-export function conditionallyRequiredProp(propType: any, dependsOnPropName: any): (props: any, propName: any, componentName: any, ...rest: any[]) => any;

package/dist/src/utils/dashed.d.ts

@@ -1,6 +0,0 @@
-/**
- * A styled utility that adds a dashed border around a component
- * to highlight its boundaries. To be used in Storybook exclusively.
- */
-declare const dashed: (component: any) => import("styled-components").StyledComponent<any, import("styled-components").DefaultTheme, object, string | number | symbol>;
-export default dashed;

package/dist/src/utils/deprecatedProp.d.ts

@@ -1 +0,0 @@
-export function deprecatedProp(propType: any, newPropName: any): (props: any, propName: any, componentName: any, ...rest: any[]) => any;

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;