@nulogy/components 10.0.2 → 10.1.0

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

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

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

@@ -1,20 +1,17 @@
 import React from "react";
+import { InputFieldProps } from "../Input/InputField";
 import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
-type DatePickerInputProps = {
+interface InputProps extends InputFieldProps {
+    placeholder?: string;
+}
+type DatePickerInputProps = Omit<React.ComponentPropsWithRef<"input">, "size"> & {
     size?: ComponentSize;
-    onBlur?: React.ComponentPropsWithRef<"input">["onBlur"];
-    onFocus?: React.ComponentPropsWithRef<"input">["onFocus"];
-    onClick?: (...args: any[]) => any;
-    onChange?: (...args: any[]) => any;
-    onUpKeyPress?: (...args: any[]) => any;
-    onDownKeyPress?: (...args: any[]) => any;
-    onEnterKeyPress?: (...args: any[]) => any;
-    onSpaceKeyPress?: (...args: any[]) => any;
-    value?: string;
-    onInputChange: (...args: any[]) => any;
     dateFormat?: string;
-    inputProps?: any;
-    "aria-label"?: string;
+    inputProps?: InputProps;
+    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.FC<DatePickerInputProps>;
+declare const DatePickerInput: React.ForwardRefExoticComponent<Omit<DatePickerInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default DatePickerInput;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { FieldLabelProps } from "./FieldLabel.type";
 declare const FieldLabel: {
-    ({ labelText, requirementText, helpText, children, ...props }: FieldLabelProps): React.JSX.Element;
+    ({ labelText, requirementText, helpText, hint, children, ...props }: FieldLabelProps): React.JSX.Element;
     defaultProps: {
         children: any;
         requirementText: any;

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

@@ -9,27 +9,8 @@ export declare const _FieldLabel: {
         name: string;
     };
 };
-export declare const WithHelpText: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithRequirementText: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithAllAdditionalText: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithAssociatedCustomInputComponent: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+export declare const WithHelpText: () => React.JSX.Element;
+export declare const WithRequirementText: () => React.JSX.Element;
+export declare const WithAllAdditionalText: () => React.JSX.Element;
+export declare const WithAssociatedCustomInputComponent: () => React.JSX.Element;
+export declare const WithHint: () => React.JSX.Element;

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

@@ -1,12 +1,11 @@
 import React from "react";
-import { SpaceProps } from "styled-system";
-export type FieldLabelProps = SpaceProps & {
+import type { LabelProps } from "./Label";
+export interface FieldLabelProps extends LabelProps {
+    hint?: string;
     labelText: string;
-    children?: React.ReactNode;
     requirementText?: string;
     helpText?: React.ReactNode;
-    id: string;
-};
+}
 export declare const FieldLabelDefaultProps: {
     children: any;
     requirementText: any;

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

@@ -0,0 +1,11 @@
+import React, { ReactElement } from "react";
+interface FramedIconProps extends React.ComponentPropsWithoutRef<"svg"> {
+    iconSize: string;
+    icon: string;
+    focusable?: boolean;
+    maxWidth?: string;
+    tooltip?: string | ReactElement;
+    isTooltipOpenByDefault?: boolean;
+}
+export default function FramedIcon({ isTooltipOpenByDefault, tooltip, maxWidth, iconSize, ...iconProps }: FramedIconProps): React.JSX.Element;
+export {};

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

@@ -1,2 +1,7 @@
-declare const Label: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
+import { DisplayProps } from "styled-system";
+import type { SpaceProps } from "styled-system";
+import type { ComponentPropsWithRef } from "react";
+export interface LabelProps extends SpaceProps, DisplayProps, Omit<ComponentPropsWithRef<"label">, "color"> {
+}
+declare const Label: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, LabelProps, never>;
 export default Label;

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

@@ -1,5 +1,4 @@
 import React from "react";
-import { TextAlignProps } from "styled-system";
 import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
 type NativeInputProps = Omit<React.ComponentPropsWithRef<"input">, "size">;
 export type InputFieldProps = NativeInputProps & {
@@ -9,15 +8,16 @@ export type InputFieldProps = NativeInputProps & {
     error?: boolean;
     labelText?: string;
     requirementText?: string;
-    helpText?: React.ReactNode;
+    helpText?: string;
     suffix?: string;
     prefix?: string;
     suffixWidth?: string;
     prefixWidth?: string;
-    suffixAlignment?: TextAlignProps["textAlign"];
-    prefixAlignment?: TextAlignProps["textAlign"];
+    suffixAlignment?: "left" | "right";
+    prefixAlignment?: "left" | "right";
     iconSize?: string;
     inputWidth?: string;
 };
 export declare const InputField: React.FC<InputFieldProps>;
+export declare const InputFieldDefaultProps: InputFieldProps;
 export {};

package/dist/src/TimePicker/TimePickerInput.d.ts

@@ -301,13 +301,13 @@ declare const TimePickerInput: import("styled-components").StyledComponent<impor
     error?: boolean;
     labelText?: string;
     requirementText?: string;
-    helpText?: import("react").ReactNode;
+    helpText?: string;
     suffix?: string;
     prefix?: string;
     suffixWidth?: string;
     prefixWidth?: string;
-    suffixAlignment?: import("styled-system").ResponsiveValue<import("csstype").Property.TextAlign, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>;
-    prefixAlignment?: import("styled-system").ResponsiveValue<import("csstype").Property.TextAlign, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>;
+    suffixAlignment?: "left" | "right";
+    prefixAlignment?: "left" | "right";
     iconSize?: string;
     inputWidth?: string;
 } & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "10.0.2",
+  "version": "10.1.0",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {

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

@@ -1,50 +0,0 @@
-export namespace InputFieldPropTypes {
-    const icon: PropTypes.Requireable<string>;
-    const disabled: PropTypes.Requireable<boolean>;
-    const error: PropTypes.Requireable<boolean>;
-    const required: PropTypes.Requireable<boolean>;
-    const labelText: PropTypes.Requireable<string>;
-    const requirementText: PropTypes.Requireable<string>;
-    const helpText: PropTypes.Requireable<string>;
-    const suffix: PropTypes.Requireable<string>;
-    const prefix: PropTypes.Requireable<string>;
-    const suffixWidth: PropTypes.Requireable<string>;
-    const prefixWidth: PropTypes.Requireable<string>;
-    const suffixAlignment: PropTypes.Requireable<string>;
-    const prefixAlignment: PropTypes.Requireable<string>;
-    const iconSize: PropTypes.Requireable<string>;
-    const inputWidth: PropTypes.Requireable<string>;
-}
-export namespace InputFieldDefaultProps {
-    const disabled_1: boolean;
-    export { disabled_1 as disabled };
-    const required_1: boolean;
-    export { required_1 as required };
-    const error_1: boolean;
-    export { error_1 as error };
-    const labelText_1: any;
-    export { labelText_1 as labelText };
-    const helpText_1: any;
-    export { helpText_1 as helpText };
-    const requirementText_1: any;
-    export { requirementText_1 as requirementText };
-    const suffix_1: any;
-    export { suffix_1 as suffix };
-    const suffixWidth_1: any;
-    export { suffixWidth_1 as suffixWidth };
-    const suffixAlignment_1: string;
-    export { suffixAlignment_1 as suffixAlignment };
-    const prefix_1: any;
-    export { prefix_1 as prefix };
-    const prefixWidth_1: any;
-    export { prefixWidth_1 as prefixWidth };
-    const prefixAlignment_1: string;
-    export { prefixAlignment_1 as prefixAlignment };
-    const icon_1: any;
-    export { icon_1 as icon };
-    const iconSize_1: any;
-    export { iconSize_1 as iconSize };
-    const inputWidth_1: any;
-    export { inputWidth_1 as inputWidth };
-}
-import PropTypes from "prop-types";