@nulogy/components 12.3.0 → 13.1.0

package/dist/src/Alert/Alert.d.ts

@@ -6,7 +6,7 @@ export declare const NotificationTypes: {
     readonly success: "success";
     readonly warning: "warning";
 };
-export type NotificationType = typeof NotificationTypes[keyof typeof NotificationTypes];
+export type NotificationType = (typeof NotificationTypes)[keyof typeof NotificationTypes];
 export type AlertProps = FlexProps & {
     isCloseable?: boolean;
     closeAriaLabel?: string;

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

@@ -1,9 +1,9 @@
 import React from "react";
 import { ClearIndicatorProps, ContainerProps, ControlProps, DropdownIndicatorProps, InputProps, MenuProps, MultiValueProps } from "react-select";
 import { GroupBase } from "react-select";
-import type { OptionProps } from "react-windowed-select";
-import type { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
+import { OptionProps } from "react-select";
 import { IconName } from "@nulogy/icons";
+import type { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 export declare const SelectControl: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ iconLeft, isFocused, children, ...props }: ControlProps<Option, IsMulti, Group> & {
     iconLeft?: IconName | "loading";
 }) => React.JSX.Element;

package/dist/src/Pagination/NextButton.d.ts

@@ -2,8 +2,9 @@ import React, { ReactNode } from "react";
 type NextButtonProps = {
     disabled: boolean;
     onClick: React.MouseEventHandler<HTMLButtonElement>;
-    label: ReactNode;
-    ariaLabel: string;
+    label?: ReactNode;
+    ariaLabel?: string;
+    showIconOnly?: boolean;
 };
-declare const NextButton: ({ disabled, onClick, label, ariaLabel }: NextButtonProps) => React.JSX.Element;
+declare const NextButton: ({ disabled, onClick, label, ariaLabel, showIconOnly }: NextButtonProps) => React.JSX.Element;
 export default NextButton;

package/dist/src/Pagination/PageNumber.d.ts

@@ -2,9 +2,10 @@
 type PageNumberProps = {
     currentPage: boolean;
 };
-declare const PageNumber: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "disabled" | "currentPage"> & {
+declare const PageNumber: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "disabled" | "currentPage" | "iconOnly"> & {
     disabled?: boolean;
     currentPage?: boolean;
+    iconOnly?: boolean;
 }, "ref"> & {
     ref?: import("react").Ref<HTMLButtonElement>;
 }, PageNumberProps>> & string;

package/dist/src/Pagination/Pagination.d.ts

@@ -1,13 +1,13 @@
 import React, { ReactNode, RefObject } from "react";
 import { FlexProps } from "../Flex/Flex";
-declare const SEPARATOR: "...";
-export declare const getPageItemsToDisplay: (totalPages: number, currentPage: number) => Array<typeof SEPARATOR | number>;
+export declare const SEPARATOR: "...";
 interface PaginationProps extends FlexProps {
-    currentPage: number;
-    totalPages: number;
     onNext?: () => void;
     onPrevious?: () => void;
     onSelectPage?: (page: number) => void;
+    currentPage: number;
+    totalPages: number;
+    maxVisiblePages?: number;
     nextLabel?: ReactNode;
     nextAriaLabel?: string;
     previousLabel?: ReactNode;
@@ -15,5 +15,5 @@ interface PaginationProps extends FlexProps {
     scrollToTopAfterPagination?: boolean;
     scrollTargetRef?: RefObject<HTMLElement>;
 }
-declare function Pagination({ onNext, onPrevious, onSelectPage, currentPage, totalPages, nextAriaLabel, nextLabel, previousAriaLabel, previousLabel, scrollToTopAfterPagination, scrollTargetRef, "aria-label": ariaLabel, ...restProps }: PaginationProps): React.JSX.Element;
+declare function Pagination({ onNext, onPrevious, onSelectPage, currentPage, totalPages, maxVisiblePages, nextAriaLabel, nextLabel, previousAriaLabel, previousLabel, scrollToTopAfterPagination, scrollTargetRef, "aria-label": ariaLabel, ...restProps }: PaginationProps): React.JSX.Element;
 export default Pagination;

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

@@ -22,4 +22,5 @@ export declare const WithLessThan5Pages: {
         name: string;
     };
 };
+export declare const CustomMaxVisiblePages: () => React.JSX.Element;
 export declare function ScrollAfterPagination(): React.JSX.Element;

package/dist/src/Pagination/PaginationButton.d.ts

@@ -2,5 +2,6 @@
 declare const PaginationButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     disabled?: boolean;
     currentPage?: boolean;
+    iconOnly?: boolean;
 }>> & string;
 export default PaginationButton;

package/dist/src/Pagination/PaginationCount.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+type PaginationCountProps = {
+    currentPage: number;
+    totalPages: number;
+};
+declare const PaginationCount: ({ currentPage, totalPages }: PaginationCountProps) => React.JSX.Element;
+export default PaginationCount;

package/dist/src/Pagination/PreviousButton.d.ts

@@ -2,8 +2,9 @@ import React, { ReactNode } from "react";
 type PreviousButtonProps = {
     disabled: boolean;
     onClick: React.MouseEventHandler<HTMLButtonElement>;
-    label: ReactNode;
-    ariaLabel: string;
+    label?: ReactNode;
+    ariaLabel?: string;
+    showIconOnly?: boolean;
 };
-declare const PreviousButton: ({ disabled, onClick, label, ariaLabel }: PreviousButtonProps) => React.JSX.Element;
+declare const PreviousButton: ({ disabled, onClick, label, ariaLabel, showIconOnly }: PreviousButtonProps) => React.JSX.Element;
 export default PreviousButton;

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

@@ -0,0 +1,9 @@
+import { SEPARATOR } from "./Pagination";
+interface PaginationItemsToDisplay {
+    totalPages: number;
+    currentPage: number;
+    maxVisiblePages?: number;
+}
+type PagesToDisplay = (number | typeof SEPARATOR)[];
+export declare function getPageItemsToDisplay({ totalPages, currentPage, maxVisiblePages, }: PaginationItemsToDisplay): PagesToDisplay;
+export {};

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

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

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

@@ -1,32 +1,31 @@
 import React, { ReactNode } from "react";
-import { GroupBase } from "react-windowed-select";
-import type { Props as SelectProps } from "react-select";
-import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-interface WindowedSelectProps extends SelectProps {
-    windowThreshold?: number;
-}
-interface NDSOptionType {
-    label: string;
-    value: unknown;
+import Select from "react-select/base";
+import { PropsValue } from "react-select";
+import type { GroupBase, Props, StylesConfig } from "react-select";
+import { StyledProps } from "../StyledProps";
+export type NDSOptionValue = string | number | boolean | null;
+export interface NDSOption {
+    label: ReactNode;
+    value: NDSOptionValue;
 }
-interface CustomProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
-    autocomplete?: SelectProps<Option, IsMulti, Group>["isSearchable"];
+interface CustomProps<Option extends NDSOption, IsMulti extends boolean, Group extends GroupBase<Option>> extends StyledProps {
+    autocomplete?: Props<Option, IsMulti, Group>["isSearchable"];
     labelText?: string;
     requirementText?: string;
     helpText?: ReactNode;
-    disabled?: SelectProps<Option, IsMulti, Group>["isDisabled"];
+    disabled?: Props<Option, IsMulti, Group>["isDisabled"];
     errorMessage?: string;
     errorList?: string[];
-    initialIsOpen?: SelectProps<Option, IsMulti, Group>["defaultMenuIsOpen"];
-    multiselect?: SelectProps<Option, IsMulti, Group>["isMulti"];
+    initialIsOpen?: Props<Option, IsMulti, Group>["defaultMenuIsOpen"];
+    multiselect?: Props<Option, IsMulti, Group>["isMulti"];
     maxHeight?: string;
-    variant?: ComponentVariant;
-    error?: boolean;
-    options: NDSOptionType[];
-    onChange?: (newValue: unknown) => void;
-    [key: string]: any;
+    defaultValue?: PropsValue<Option["value"]>;
+    value?: PropsValue<Option["value"]>;
+    options: readonly Option[];
+    onChange?: (newValue: PropsValue<Option["value"]>) => void;
+    windowThreshold?: number;
+    styles?: (selectStyles: StylesConfig<Option, IsMulti, Group>) => StylesConfig<Option, IsMulti, Group>;
 }
-export type NDSSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = Omit<WindowedSelectProps, "isSearchable" | "isDisabled" | "isMulti" | "defaultMenuIsOpen" | "defaultInputValue" | "options" | "onChange"> & CustomProps<Option, IsMulti, Group>;
-declare const ReactSelect: React.ForwardRefExoticComponent<Omit<Omit<WindowedSelectProps, "isDisabled" | "isMulti" | "isSearchable" | "onChange" | "options" | "defaultMenuIsOpen" | "defaultInputValue"> & CustomProps<unknown, boolean, GroupBase<unknown>>, "ref"> & React.RefAttributes<unknown>>;
-export declare const getOption: (options: NDSOptionType[], value: unknown) => unknown;
-export default ReactSelect;
+export type NDSSelectProps<Option extends NDSOption = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> = Omit<Props<Option, IsMulti, Group>, keyof CustomProps<Option, IsMulti, Group> | "isSearchable" | "isDisabled" | "defaultMenuIsOpen" | "isMulti" | "styles"> & CustomProps<Option, IsMulti, Group>;
+declare const NDSSelect: <Option extends NDSOption = NDSOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: Omit<Props<Option, IsMulti, Group>, "isDisabled" | "isMulti" | "isSearchable" | "defaultMenuIsOpen" | keyof CustomProps<Option_1, IsMulti_1, Group_1>> & CustomProps<Option, IsMulti, Group> & React.RefAttributes<Select<Option, IsMulti, Group>>) => React.ReactElement;
+export default NDSSelect;

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

@@ -4,6 +4,7 @@ declare const _default: {
 };
 export default _default;
 export declare const _Select: () => React.JSX.Element;
+export declare const WithStyledProps: () => React.JSX.Element;
 export declare const WithABlankValue: {
     (): React.JSX.Element;
     story: {
@@ -102,12 +103,7 @@ export declare const WithCustomOptionComponent: {
         name: string;
     };
 };
-export declare const WithACustomSelectedOption: () => React.JSX.Element;
-export declare const UsingRefToControlFocus: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+export declare const UsingRefToControlFocus: () => React.JSX.Element;
 export declare const WithTopMenuPlacement: () => React.JSX.Element;
-export declare const WithCustomProps: () => React.JSX.Element;
+export declare const WithCustomStyles: () => React.JSX.Element;
+export declare const WithCustomOptionFields: () => React.JSX.Element;

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { GroupBase } from "react-select";
+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<NDSOption, true, GroupBase<NDSOption>>) => React.JSX.Element;
+export interface DescriptiveOption extends NDSOption {
+    description: string;
+}
+export declare const CustomFieldsOption: ({ ...props }: SelectOptionProps<DescriptiveOption, true, GroupBase<DescriptiveOption>>) => React.JSX.Element;

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

@@ -1,8 +1,10 @@
 import React from "react";
-export declare const SelectControl: (props: any) => React.JSX.Element;
-export declare const SelectMultiValue: (props: any) => React.JSX.Element;
-export declare const SelectClearIndicator: (props: any) => React.JSX.Element;
-export declare const SelectDropdownIndicator: (props: any) => React.JSX.Element;
-export declare const SelectMenu: (props: any) => React.JSX.Element;
-export declare const SelectContainer: (props: any) => React.JSX.Element;
-export declare const SelectInput: (props: any) => React.JSX.Element;
+import { ClearIndicatorProps, ContainerProps, ControlProps, DropdownIndicatorProps, InputProps, MenuProps, MultiValueProps, GroupBase } from "react-select";
+import { NDSOption } from "./Select";
+export declare function SelectControl<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: ControlProps<Option, IsMulti, Group>): React.JSX.Element;
+export declare function SelectMultiValue<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: MultiValueProps<Option, IsMulti, Group>): React.JSX.Element;
+export declare function SelectClearIndicator<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: ClearIndicatorProps<Option, IsMulti, Group>): React.JSX.Element;
+export declare function SelectDropdownIndicator<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: DropdownIndicatorProps<Option, IsMulti, Group>): React.JSX.Element;
+export declare function SelectMenu<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: MenuProps<Option, IsMulti, Group>): React.JSX.Element;
+export declare function SelectContainer<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: ContainerProps<Option, IsMulti, Group>): React.JSX.Element;
+export declare function SelectInput<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: InputProps<Option, IsMulti, Group>): React.JSX.Element;

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

@@ -1,14 +1,12 @@
 import React from "react";
-import { OptionProps } from "react-windowed-select";
-import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-type SelectOptionProps = {
+import { GroupBase, OptionProps } from "react-select";
+import { NDSOption } from "./Select";
+type StyledOptionProps = {
     isSelected: boolean;
     isFocused: boolean;
-    variant: ComponentVariant;
 };
-export declare const StyledOption: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SelectOptionProps>> & string;
-interface CustomOptionProps extends OptionProps {
-    variant?: ComponentVariant;
+export declare const StyledOption: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledOptionProps>> & string;
+export interface SelectOptionProps<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends OptionProps<Option, IsMulti, Group> {
 }
-export declare function SelectOption(props: CustomOptionProps): React.JSX.Element;
+export declare function SelectOption<Option extends NDSOption = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: SelectOptionProps<Option, IsMulti, Group>): React.JSX.Element;
 export {};

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

@@ -27,9 +27,14 @@ export declare function showIndicatorSeparator({ hasValue, isClearable, isMulti
     isClearable: any;
     isMulti: any;
 }): any;
-interface Args {
+interface CustomStylesArgs {
     theme: DefaultNDSThemeType;
-    [key: string]: any;
+    error: boolean;
+    maxHeight: string;
+    windowed: boolean;
+    variant: ComponentVariant;
+    hasIcon?: boolean;
+    hasDefaultOptions?: boolean;
 }
-declare const customStyles: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(args: Args) => StylesConfig<Option, IsMulti, Group>;
+declare const customStyles: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(args: CustomStylesArgs) => StylesConfig<Option, IsMulti, Group>;
 export default customStyles;

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

@@ -1,3 +1,3 @@
-export { SelectOption } from "./SelectOption";
-export { default as Select } from "./Select";
+export { SelectOption, type SelectOptionProps } from "./SelectOption";
+export { default as Select, type NDSOption, type NDSOptionValue, type NDSSelectProps } from "./Select";
 export * from "./SelectComponents";

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

@@ -0,0 +1,20 @@
+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/StatusIndicator/StatusIndicator.d.ts

@@ -9,7 +9,7 @@ export declare const StatusIndicatorValues: {
     readonly warning: "warning";
     readonly quiet: "quiet";
 };
-export type StatusIndicatorType = typeof StatusIndicatorValues[keyof typeof StatusIndicatorValues];
+export type StatusIndicatorType = (typeof StatusIndicatorValues)[keyof typeof StatusIndicatorValues];
 interface Props extends SpaceProps, TypographyProps, FlexboxProps {
     type?: StatusIndicatorType;
 }

package/dist/src/index.d.ts

@@ -35,7 +35,7 @@ export { Overlay } from "./Overlay";
 export { Pagination } from "./Pagination";
 export { Radio, RadioGroup } from "./Radio";
 export { RangeContainer } from "./RangeContainer";
-export { Select, SelectClearIndicator, SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption, } from "./Select";
+export { Select, SelectClearIndicator, SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption, type SelectOptionProps, type NDSOption, type NDSOptionValue, type NDSSelectProps, } from "./Select";
 export { SortingTable } from "./SortingTable";
 export { StatusIndicator, StatusIndicatorValues } from "./StatusIndicator";
 export type { StatusIndicatorType } from "./StatusIndicator";

package/dist/src/utils/testHelpers/createMatchMedia.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Creates a mock implementation of the `window.matchMedia` function.
+ * This is useful for changing the width of the viewport in tests without
+ * needing to manipulate the actual browser environment.
+ *
+ */
+export declare const createMatchMedia: (width: number) => (query: string) => MediaQueryList;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "12.3.0",
+  "version": "13.1.0",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {
@@ -90,6 +90,7 @@
     "@storybook/theming": "^6.1.9",
     "@testing-library/jest-dom": "5.11.5",
     "@testing-library/react": "^12.1.5",
+    "@types/css-mediaquery": "^0.1.4",
     "@types/jest": "^29.5.1",
     "@types/node": "^14.0.14",
     "@types/react": "^17.0.39",
@@ -108,6 +109,7 @@
     "babel-preset-react": "6.24.1",
     "chromatic": "^6.0.6",
     "concurrently": "^5.2.0",
+    "css-mediaquery": "^0.1.2",
     "cypress": "^13.2.0",
     "cypress-enter-plugin": "^1.0.1",
     "cypress-plugin-tab": "^1.0.1",
@@ -123,6 +125,7 @@
     "jscodeshift": "^0.11.0",
     "mockdate": "^3.0.2",
     "plop": "^2.4.0",
+    "prettier": "^3.4.2",
     "react": "17.0.2",
     "react-color": "^2.18.1",
     "react-dom": "17.0.2",
@@ -151,6 +154,7 @@
     "@styled-system/prop-types": "^5.1.4",
     "@styled-system/theme-get": "^5.1.2",
     "@types/react-router-dom": "5.3.0",
+    "@types/react-window": "^1.8.8",
     "@types/styled-system": "5.1.22",
     "body-scroll-lock": "^3.1.5",
     "core-js": "3",
@@ -169,7 +173,7 @@
     "react-popper-2": "npm:react-popper@2.2.4",
     "react-resize-detector": "^9.1.0",
     "react-select": "^5.8.0",
-    "react-windowed-select": "^5.2.0",
+    "react-window": "^1.8.11",
     "smoothscroll-polyfill": "^0.4.4",
     "styled-system": "^5.1.4",
     "stylis": "^4.0.0"