@nulogy/components 13.1.6 → 13.2.0

package/dist/src/DatePickers/DatePicker.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { ReactDatePicker } from "react-datepicker";
+import { BaseDatePickerProps } from "./shared/types";
+declare const DatePicker: React.ForwardRefExoticComponent<Omit<BaseDatePickerProps, "ref"> & React.RefAttributes<ReactDatePicker<never, undefined>>>;
+export default DatePicker;

package/dist/src/DatePickers/MonthPicker.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { ReactDatePicker } from "react-datepicker";
+import { BaseDatePickerProps } from "./shared/types";
+declare const MonthPicker: React.ForwardRefExoticComponent<Omit<BaseDatePickerProps, "ref"> & React.RefAttributes<ReactDatePicker<never, undefined>>>;
+export default MonthPicker;

package/dist/src/DatePickers/components/DatePickerHeader.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import type { ReactDatePickerCustomHeaderProps } from "react-datepicker";
+type Props = {
+    date: Date;
+    decreaseMonth: React.MouseEventHandler<HTMLButtonElement>;
+    increaseMonth: React.MouseEventHandler<HTMLButtonElement>;
+    prevMonthButtonDisabled: boolean;
+    nextMonthButtonDisabled: boolean;
+    locale?: string;
+};
+export declare function DatePickerHeader({ date, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, locale, }: Props): React.JSX.Element;
+export declare function MonthDatePickerHeader({ date, increaseYear, decreaseYear, prevMonthButtonDisabled, nextMonthButtonDisabled, locale, }: ReactDatePickerCustomHeaderProps & {
+    locale?: string;
+}): React.JSX.Element;
+export {};

package/dist/src/{DatePicker → DatePickers/components}/DatePickerInput.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { InputFieldProps } from "../Input/InputField";
-import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
+import { InputFieldProps } from "../../Input/InputField";
+import { ComponentVariant } from "../../NDSProvider/ComponentVariantContext";
 interface InputProps extends InputFieldProps {
     placeholder?: string;
 }
@@ -8,9 +8,9 @@ type DatePickerInputProps = React.ComponentPropsWithRef<"input"> & {
     variant?: ComponentVariant;
     dateFormat?: string;
     inputProps?: InputProps;
-    onInputChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    onUpKeyPress: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-    onDownKeyPress: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onUpKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onDownKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     onEnterKeyPress: (e: React.KeyboardEvent<HTMLInputElement>) => void;
 };
 declare const DatePickerInput: React.ForwardRefExoticComponent<Omit<DatePickerInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/src/DatePickers/components/MonthPickerHeader.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { ReactDatePickerCustomHeaderProps } from "react-datepicker";
+export declare function MonthDatePickerHeader({ date, increaseYear, decreaseYear, prevMonthButtonDisabled, nextMonthButtonDisabled, locale, }: ReactDatePickerCustomHeaderProps & {
+    locale?: string;
+}): React.JSX.Element;

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

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

package/dist/src/DatePickers/shared/BasePicker.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import ReactDatePicker, { ReactDatePickerCustomHeaderProps } from "react-datepicker";
+import { BaseDatePickerProps } from "./types";
+interface BasePickerProps extends BaseDatePickerProps {
+    defaultFormat: string;
+    disabledKeyboardNavigation?: boolean;
+    defaultPlaceholder: string;
+    showMonthYearPicker?: boolean;
+    renderHeader: (props: ReactDatePickerCustomHeaderProps) => JSX.Element;
+    onUpKeyPress?: () => void;
+    onDownKeyPress?: () => void;
+    onEnterKeyPress?: () => void;
+}
+export declare const BasePicker: React.ForwardRefExoticComponent<Omit<BasePickerProps, "ref"> & React.RefAttributes<ReactDatePicker<never, undefined>>>;
+export {};

package/dist/src/DatePickers/shared/types.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { InputFieldProps } from "../../Input/InputField";
+import { ReactDatePickerProps } from "react-datepicker";
+import { FieldProps } from "../../Form/Field";
+type OmittedFieldProps = "onChange" | "onBlur" | "onFocus";
+export interface BaseDatePickerProps extends Omit<FieldProps, OmittedFieldProps> {
+    className?: string;
+    dateFormat?: string;
+    disableFlipping?: boolean;
+    errorList?: string[];
+    errorMessage?: string;
+    highlightDates?: ReactDatePickerProps["highlightDates"];
+    inputProps?: InputFieldProps;
+    locale?: string;
+    maxDate?: Date;
+    minDate?: Date;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onChange?: (date: Date) => void;
+    onInputChange?: (value: string) => void;
+    selected?: Date;
+}
+export {};

package/dist/src/DatePickers/stories/DatePicker.month.story.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithPlaceholder: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const Disabled: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithDefaultValue: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithMinMaxDate: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/src/DateRange/DateRangeStyles.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const highlightDates: (startDate: any, endDate: any) => ({
+export declare const highlightDates: (startDate: Date, endDate: Date) => ({
     "nds-datepicker-day--start-date": Date[];
     "nds-datepicker-day--end-date"?: undefined;
     "nds-datepicker-day--in-range"?: undefined;

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

@@ -1,2 +1,11 @@
 import React from "react";
-export declare const LocaleContext: React.Context<any>;
+export declare const LocaleContext: React.Context<{
+    locale: string;
+}>;
+export declare const useLocale: () => {
+    locale: string;
+};
+export declare const LocaleContextProvider: ({ locale, children }: {
+    locale: string;
+    children: React.ReactNode;
+}) => React.JSX.Element;

package/dist/src/Tabs/Tabs.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-export type TabsProps = {
+export type TabsProps = React.PropsWithChildren<{
     className?: string;
     selectedIndex?: number;
     variant?: ComponentVariant;
@@ -8,7 +8,7 @@ export type TabsProps = {
     renderTabContentOnlyWhenSelected?: boolean;
     fitted?: boolean;
     onTabClick?: (...args: any[]) => any;
-};
+}>;
 export type TabsState = {
     selectedIndex: any;
 };

package/dist/src/index.d.ts

@@ -13,7 +13,7 @@ export { Button, ControlIcon, DangerButton, IconicButton, PrimaryButton, QuietBu
 export { ButtonGroup } from "./ButtonGroup";
 export { Card, CardSet } from "./Card";
 export { Checkbox, CheckboxGroup } from "./Checkbox";
-export { DatePicker } from "./DatePicker";
+export { DatePicker, MonthPicker } from "./DatePickers";
 export { DateRange } from "./DateRange";
 export { DescriptionDetails, DescriptionList, DescriptionTerm } from "./DescriptionList";
 export { Divider } from "./Divider";

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "13.1.6",
+  "version": "13.2.0",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {
@@ -55,8 +55,8 @@
   ],
   "peerDependencies": {
     "@nulogy/icons": "4",
-    "react": ">=16.10.2",
-    "react-dom": ">=16.10.2",
+    "react": ">=16.10.2 <19.0.0",
+    "react-dom": ">=16.10.2 <19.0.0",
     "styled-components": "^6.0.0",
     "typescript": "4.9.5"
   },
@@ -95,7 +95,7 @@
     "@types/jest": "^29.5.1",
     "@types/node": "^14.0.14",
     "@types/react": "^17.0.39",
-    "@types/react-datepicker": "^4.1.0",
+    "@types/react-datepicker": "^4.19.6",
     "@types/react-dom": "^17.0.20",
     "@types/react-router-dom": "5.3.0",
     "@typescript-eslint/eslint-plugin": "^4.0.0",
@@ -158,7 +158,6 @@
     "@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",
     "date-fns": "2.23.0",
     "debounce": "^1.2.0",
@@ -166,7 +165,7 @@
     "framer-motion": "^3.1.3",
     "i18next": "^19.3.1",
     "polished": "3.4.4",
-    "react-datepicker": "^4.1.0",
+    "react-datepicker": "^4.25.0",
     "react-fast-compare": "^3.2.0",
     "react-hot-toast": "^2.4.1",
     "react-i18next": "^12.3.1",

package/dist/src/DatePicker/DatePicker.d.ts

@@ -1,24 +0,0 @@
-import React from "react";
-import type { ReactDatePickerProps } from "react-datepicker";
-import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-import { InputFieldProps } from "../Input/InputField";
-import { FieldProps } from "../Form/Field";
-type OmittedFieldProps = "onChange" | "onBlur" | "onFocus";
-interface DatePickerProps extends Omit<FieldProps, OmittedFieldProps> {
-    variant?: ComponentVariant;
-    onChange?: (date: Date) => void;
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    dateFormat?: string;
-    onInputChange?: (value: string) => void;
-    inputProps?: InputFieldProps;
-    errorMessage?: string;
-    errorList?: string[];
-    minDate?: Date;
-    maxDate?: Date;
-    highlightDates?: ReactDatePickerProps["highlightDates"];
-    disableFlipping?: boolean;
-    selected?: Date | null;
-}
-declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & React.RefAttributes<unknown>>;
-export default DatePicker;

package/dist/src/DatePicker/DatePickerHeader.d.ts

@@ -1,11 +0,0 @@
-import React from "react";
-type Props = {
-    date: number;
-    decreaseMonth: React.MouseEventHandler<HTMLButtonElement>;
-    increaseMonth: React.MouseEventHandler<HTMLButtonElement>;
-    prevMonthButtonDisabled: boolean;
-    nextMonthButtonDisabled: boolean;
-    locale?: string;
-};
-export default function DatePickerHeader({ date, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, locale, }: Props): React.JSX.Element;
-export {};

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

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