@trackunit/react-form-components 0.0.305 → 0.0.308

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.0.305",
+  "version": "0.0.308",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/Select/CreatableSelect.d.ts

@@ -1,38 +1,39 @@
-import React from "react";
+/// <reference types="react" />
 import { GroupBase } from "react-select";
 import { SelectProps } from "./useSelect";
-interface CreateableSelectProps<Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> extends SelectProps<Option, IsAsync, IsMulti, Group> {
-    /**
-     * To hide the label.
-     */
-    hideLabel?: boolean;
-    /**
-     * Description for the select component.
-     */
-    description?: string;
-    /**
-     * Whether the component is invalid.
-     */
-    isInvalid?: boolean;
-    /**
-     * Info of the select component.
-     */
-    info?: React.ReactNode;
-    /**
-     * Error of the select component.
-     */
-    error?: React.ReactNode;
-    /**
-     * Size of the component.
-     */
-    size?: SelectSize;
+export interface CreatableSelectOption<TValue extends string | number> {
+    label: string;
+    value: TValue;
+    disabled?: boolean;
 }
-export type SelectSize = "small" | "default";
+export type CreatableSelectProps = {
+    allowCreateWhileLoading?: boolean;
+    onCreateOption?: (inputValue: string) => void;
+};
 /**
- * The CreatableSelect component.
+ * CreatableSelects are input components used to choose a value from a set.
  *
- * @param {CreateableSelectProps} props - The props for the CreatableSelect component
+ * @param {CreatableSelectProps} props - The props for the CreatableSelect component
  * @returns {JSX.Element} CreatableSelect component
  */
-export declare const CreatableSelect: <Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: CreateableSelectProps<Option, IsAsync, IsMulti, Group>) => JSX.Element;
-export {};
+export declare const CreatableSelect: {
+    <Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: import("dist/libs/react/components/src").CommonProps & Omit<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<Option, IsMulti, Group>, "inputValue" | "menuIsOpen" | "onChange" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "value"> & Partial<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<Option, IsMulti, Group>> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<Option> & {
+        prefix?: JSX.Element | undefined;
+        placeholder?: string | undefined;
+        disabled?: boolean | undefined;
+        readOnly?: boolean | undefined;
+        id?: string | undefined;
+        async?: import("./useSelect").AsyncSelect<Option, Group> | undefined;
+        dropdownIcon?: JSX.Element | undefined;
+        label?: string | undefined;
+        maxMenuHeight?: number | undefined;
+        hasError?: boolean | undefined;
+        isLoading?: boolean | undefined;
+        maxSelectedDisplayCount?: number | undefined;
+        onMenuOpen?: (() => void) | undefined;
+        isClearable?: boolean | undefined;
+        isSearchable?: boolean | undefined;
+        isAsync?: IsAsync | undefined;
+    } & CreatableSelectProps): JSX.Element;
+    displayName: string;
+};

package/src/components/Select/Select.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { GroupBase } from "react-select";
 import { SelectProps } from "./useSelect";
-export interface SelectOption<T extends string | number> {
+export interface SelectOption<TValue extends string | number> {
     label: string;
-    value: T;
+    value: TValue;
     disabled?: boolean;
 }
 /**

package/src/components/Select/useSelect.d.ts

@@ -7,7 +7,7 @@ export interface AsyncSelect<Option, Group extends GroupBase<Option> = GroupBase
     defaultOptions: OptionsOrGroups<Option, Group> | undefined;
     cacheOptions: boolean;
 }
-export interface SelectProps<Option, IsAsync extends boolean, IsMulti extends boolean, GroupType extends GroupBase<Option>> extends CommonProps, Props<Option, IsMulti, GroupType> {
+export type SelectProps<Option, IsAsync extends boolean, IsMulti extends boolean, GroupType extends GroupBase<Option>> = CommonProps & Props<Option, IsMulti, GroupType> & {
     /**
      * An React element to render before the text in the select.
      * This is typically used to render an icon.
@@ -113,7 +113,7 @@ export interface SelectProps<Option, IsAsync extends boolean, IsMulti extends bo
      * @memberof SelectProps
      */
     isAsync?: IsAsync;
-}
+};
 interface IUseSelect<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> {
     customStyles: StylesConfig<Option, IsMulti, Group>;
     customComponents: Partial<SelectComponents<Option, IsMulti, Group>>;

package/src/components/SelectField/CreatableSelectField.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { CreatableSelectProps } from "../Select/CreatableSelect";
+import { BaseOptionType, SelectFieldProps } from "./FormFieldSelectAdapter";
+/**
+ * The CreatableSelectField component is a CreatableSelect component wrapped in the FromGroup component.
+ *
+ * This means that it can easily be added to any form alongside other Field components.
+ *
+ * This is done to make the field compatible with the React-hook-form library.
+ *
+ * @param {SelectFieldProps & CreatableSelectProps} props - The props for the CreatableSelectField component
+ * @returns {JSX.Element} CreatableSelectField component
+ */
+export declare const CreatableSelectField: ({ allowCreateWhileLoading, onCreateOption, ...props }: SelectFieldProps<BaseOptionType> & CreatableSelectProps) => JSX.Element;

package/src/components/SelectField/FormFieldSelectAdapter.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import { CommonProps } from "@trackunit/react-components";
+import { MappedOmit } from "@trackunit/shared-utils";
+import { GroupBase } from "react-select";
+import { FormGroupProps } from "../FormGroup/FormGroup";
+import { SelectProps } from "../Select/useSelect";
+export type BaseOptionType = {
+    label: string;
+    value: string | number;
+};
+type SelectExposedProps<TOptionType extends BaseOptionType> = MappedOmit<SelectProps<TOptionType, false, false, GroupBase<TOptionType>>, "value" | "label" | "onChange" | "defaultValue" | "onBlur" | "options">;
+type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon" | "isInvalid">;
+export type SelectFieldProps<TOptionType extends BaseOptionType> = CommonProps & FormGroupExposedProps & SelectExposedProps<TOptionType> & {
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * The options available for the SelectField.
+     */
+    options: TOptionType[];
+    /**
+     * The selected value of the SelectField.
+     */
+    value?: TOptionType["value"];
+    /**
+     * The default selected value of the SelectField.
+     */
+    defaultValue?: TOptionType["value"];
+    /**
+     * The onChange handler for the SelectField.
+     */
+    onChange?: (event: {
+        target: {
+            value?: TOptionType["value"];
+        };
+    }) => void;
+    /**
+     * If a value is set, the field is rendered in its invalid state.
+     */
+    errorMessage?: string;
+};
+interface FormFieldSelectAdapterProps<TOptionType extends BaseOptionType, IsAsync extends boolean = false, IsMulti extends boolean = false> extends SelectFieldProps<TOptionType> {
+    children: (props: SelectProps<TOptionType, IsAsync, IsMulti, GroupBase<TOptionType>>) => JSX.Element;
+}
+export declare const FormFieldSelectAdapter: import("react").ForwardRefExoticComponent<FormFieldSelectAdapterProps<BaseOptionType, false, false> & import("react").RefAttributes<HTMLSelectElement>>;
+export {};

package/src/components/SelectField/SelectField.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { BaseOptionType, SelectFieldProps } from "./FormFieldSelectAdapter";
+/**
+ * The SelectField component is a Select component wrapped in the FromGroup component.
+ *
+ * This means that it can easily be added to any form alongside other Field components.
+ *
+ * This is done to make the field compatible with the React-hook-form library.
+ *
+ * @param {SelectFieldProps} props - The props for the SelectField component
+ * @returns {JSX.Element} SelectField component
+ */
+export declare const SelectField: (props: SelectFieldProps<BaseOptionType>) => JSX.Element;

package/src/index.d.ts

@@ -1,4 +1,3 @@
-export * from "./SelectField/SelectField";
 export * from "./components/ActionButton";
 export * from "./components/BaseInput";
 export * from "./components/Checkbox";
@@ -23,6 +22,8 @@ export * from "./components/Schedule/Schedule";
 export * from "./components/Schedule/ScheduleParser";
 export * from "./components/Search";
 export * from "./components/Select";
+export * from "./components/SelectField/CreatableSelectField";
+export * from "./components/SelectField/SelectField";
 export * from "./components/TextArea";
 export * from "./components/TextAreaField";
 export * from "./components/TextField";

package/src/SelectField/SelectField.d.ts

@@ -1,50 +0,0 @@
-/// <reference types="react" />
-import { CommonProps } from "@trackunit/react-components";
-import { GroupBase } from "react-select";
-import { FormGroupProps } from "../components/FormGroup/FormGroup";
-import { SelectProps } from "../components/Select/useSelect";
-export type BaseOptionType = {
-    label: string;
-    value: string | number;
-};
-type SelectExposedProps<TOptionType extends BaseOptionType> = Omit<SelectProps<TOptionType, false, false, GroupBase<TOptionType>>, "value" | "label" | "onChange" | "defaultValue" | "onBlur">;
-type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon" | "isInvalid">;
-export interface SelectFieldProps<TOptionType extends BaseOptionType> extends CommonProps, FormGroupExposedProps, SelectExposedProps<TOptionType> {
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    /**
-     * The options available for the SelectField.
-     */
-    options: TOptionType[];
-    /**
-     * The selected value of the SelectField.
-     */
-    value?: TOptionType["value"];
-    /**
-     * The default selected value of the SelectField.
-     */
-    defaultValue?: TOptionType["value"];
-    /**
-     * The onChange handler for the SelectField.
-     */
-    onChange?: (event: {
-        target: {
-            value?: TOptionType["value"];
-        };
-    }) => void;
-    /**
-     * If a value is set, the field is rendered in its invalid state.
-     */
-    errorMessage?: string;
-}
-/**
- * The SelectField component is a Select component wrapped in the FromGroup component.
- *
- * This means that it can easily be added to any form alongside other Field components.
- *
- * This is done to make the field compatible with the React-hook-form library.
- *
- * @param {SelectFieldProps} props - The props for the SelectField component
- * @returns {JSX.Element} SelectField component
- */
-export declare const SelectField: import("react").ForwardRefExoticComponent<SelectFieldProps<BaseOptionType> & import("react").RefAttributes<HTMLSelectElement>>;
-export {};