@devopness/ui-react 2.183.0 → 2.184.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/components/Forms/DynamicField/DynamicField.d.ts +74 -0
- package/dist/src/components/Forms/DynamicField/index.d.ts +1 -0
- package/dist/src/components/Forms/Select/CustomComponents/DrodpdownIndicator.d.ts +4 -0
- package/dist/src/components/Forms/Select/CustomComponents/LoadingMessage.d.ts +2 -0
- package/dist/src/components/Forms/Select/CustomComponents/NoOptionsMessage.d.ts +10 -0
- package/dist/src/components/Forms/Select/CustomComponents/Option.d.ts +14 -0
- package/dist/src/components/Forms/Select/CustomComponents/Placeholder.d.ts +4 -0
- package/dist/src/components/Forms/Select/CustomComponents/SingleValue.d.ts +4 -0
- package/dist/src/components/Forms/Select/CustomComponents/index.d.ts +6 -0
- package/dist/src/components/Forms/Select/CustomComponents/styled.d.ts +11 -0
- package/dist/src/components/Forms/Select/Select.d.ts +43 -0
- package/dist/src/components/Forms/Select/Select.styled.d.ts +6 -0
- package/dist/src/components/Forms/Select/index.d.ts +1 -0
- package/dist/src/components/Forms/index.d.ts +2 -0
- package/dist/ui-react.cjs +641 -386
- package/dist/ui-react.js +13285 -8591
- package/package.json +13 -12
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Supported field types for the DynamicField component.
|
|
4
|
+
* - `text`: Multi-line text area
|
|
5
|
+
* - `string`: Single-line text input
|
|
6
|
+
* - `number`: Numeric input
|
|
7
|
+
* - `boolean`: Boolean select (Yes/No)
|
|
8
|
+
*/
|
|
9
|
+
type FieldTypes = 'text' | 'boolean' | 'number' | 'string';
|
|
10
|
+
/**
|
|
11
|
+
* Optional label configuration for a field.
|
|
12
|
+
*/
|
|
13
|
+
type LabelProps = {
|
|
14
|
+
/** Field label text */
|
|
15
|
+
value: string;
|
|
16
|
+
/** Whether to show a help tooltip */
|
|
17
|
+
help?: boolean;
|
|
18
|
+
/** Help text content */
|
|
19
|
+
helpValue?: string;
|
|
20
|
+
};
|
|
21
|
+
/**
|
|
22
|
+
* External control props for managing field state.
|
|
23
|
+
* Uses `any` types to remain agnostic to form libraries (e.g. React Hook Form, Formik, etc.)
|
|
24
|
+
* and support different input types (Input, TextArea, Select) with varying event signatures.
|
|
25
|
+
*/
|
|
26
|
+
type ExternalControlProps = {
|
|
27
|
+
value?: any;
|
|
28
|
+
onChange?: (...args: any[]) => void;
|
|
29
|
+
onBlur?: () => void;
|
|
30
|
+
};
|
|
31
|
+
/**
|
|
32
|
+
* Props for the `DynamicField` component.
|
|
33
|
+
*/
|
|
34
|
+
type DynamicFieldProps = {
|
|
35
|
+
/** Field name */
|
|
36
|
+
name: string;
|
|
37
|
+
/** Whether the field contains sensitive data (e.g. password) */
|
|
38
|
+
sensitive?: boolean;
|
|
39
|
+
/** Placeholder text */
|
|
40
|
+
placeholder?: string;
|
|
41
|
+
/** Validation configuration for the field */
|
|
42
|
+
validation: {
|
|
43
|
+
type: FieldTypes;
|
|
44
|
+
required?: boolean;
|
|
45
|
+
min: number;
|
|
46
|
+
max: number;
|
|
47
|
+
};
|
|
48
|
+
/** Field validation error */
|
|
49
|
+
error?: {
|
|
50
|
+
message: string;
|
|
51
|
+
} | null;
|
|
52
|
+
/** Optional label configuration */
|
|
53
|
+
labelProps?: LabelProps;
|
|
54
|
+
/** Element reference */
|
|
55
|
+
inputRef?: RefObject<HTMLInputElement> | RefObject<HTMLTextAreaElement> | RefObject<HTMLSelectElement> | ((instance: HTMLTextAreaElement | HTMLInputElement | HTMLSelectElement | null) => void);
|
|
56
|
+
} & ExternalControlProps;
|
|
57
|
+
/**
|
|
58
|
+
* `DynamicField` is a flexible component that dynamically renders
|
|
59
|
+
* different input types (`Input`, `TextArea`, `Select`) based on the given configuration.
|
|
60
|
+
*
|
|
61
|
+
* @example
|
|
62
|
+
* ```tsx
|
|
63
|
+
* <DynamicField
|
|
64
|
+
* name="age"
|
|
65
|
+
* value={age}
|
|
66
|
+
* onChange={setAge}
|
|
67
|
+
* validation={{ type: 'number', min: 0, max: 100 }}
|
|
68
|
+
* labelProps={{ value: 'Age' }}
|
|
69
|
+
* />
|
|
70
|
+
* ```
|
|
71
|
+
*/
|
|
72
|
+
declare const DynamicField: ({ name, sensitive, placeholder, error, labelProps, inputRef, validation: { type }, ...props }: DynamicFieldProps) => import("react/jsx-runtime").JSX.Element;
|
|
73
|
+
export { DynamicField };
|
|
74
|
+
export type { DynamicFieldProps };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './DynamicField';
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { OptionProps as OptionReactSelectProps, GroupBase } from 'react-select';
|
|
2
|
+
import { OptionProps } from '../index';
|
|
3
|
+
declare const DropdownIndicator: (args: OptionReactSelectProps<OptionProps, boolean, GroupBase<OptionProps>>) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export { DropdownIndicator };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
type NoOptionsMessageProps = {
|
|
2
|
+
selectProps: {
|
|
3
|
+
inputValue?: string;
|
|
4
|
+
noOptionsMessage?: string | ((obj: {
|
|
5
|
+
inputValue: string;
|
|
6
|
+
}) => React.ReactNode);
|
|
7
|
+
};
|
|
8
|
+
};
|
|
9
|
+
declare const NoOptionsMessage: ({ selectProps }: NoOptionsMessageProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export { NoOptionsMessage };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { OptionProps as OptionReactSelectProps, GroupBase } from 'react-select';
|
|
2
|
+
import { OptionProps } from '../index';
|
|
3
|
+
import { Icon } from '../../../../icons';
|
|
4
|
+
type OptionConfigurationProps = {
|
|
5
|
+
iconName?: Icon | Omit<string, Icon>;
|
|
6
|
+
option: string;
|
|
7
|
+
iconSize?: number;
|
|
8
|
+
};
|
|
9
|
+
type OptionBodyProps = {
|
|
10
|
+
optionConfiguration: OptionConfigurationProps;
|
|
11
|
+
};
|
|
12
|
+
declare const OptionBody: ({ optionConfiguration }: OptionBodyProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
declare const memoizedOption: import('react').MemoExoticComponent<({ data, ...args }: OptionReactSelectProps<OptionProps, boolean, GroupBase<OptionProps>>) => import("react/jsx-runtime").JSX.Element>;
|
|
14
|
+
export { memoizedOption as Option, OptionBody };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { GroupBase, SingleValueProps } from 'react-select';
|
|
2
|
+
import { OptionProps } from '../index';
|
|
3
|
+
declare const memoizedSingleOption: import('react').MemoExoticComponent<({ data, }: SingleValueProps<OptionProps, boolean, GroupBase<OptionProps>>) => import("react/jsx-runtime").JSX.Element>;
|
|
4
|
+
export { memoizedSingleOption as SingleValue };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
type OptionProps = {
|
|
2
|
+
isOptionSelected?: boolean;
|
|
3
|
+
isCreateLink?: boolean;
|
|
4
|
+
};
|
|
5
|
+
declare const Wrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
6
|
+
declare const BoxLoader: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
7
|
+
declare const NoOption: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
8
|
+
declare const OptionSelectedWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
9
|
+
declare const OptionWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, OptionProps>> & string;
|
|
10
|
+
declare const OptionLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
|
|
11
|
+
export { BoxLoader, NoOption, OptionLabel, OptionSelectedWrapper, OptionWrapper, Wrapper, };
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { Props as SelectPropsBase, GroupBase } from 'react-select';
|
|
3
|
+
import { ErrorMessage } from '../../Primitives';
|
|
4
|
+
import { Icon } from '../../../icons';
|
|
5
|
+
/** Option type for the Select component. */
|
|
6
|
+
type OptionProps<T = unknown> = {
|
|
7
|
+
icon?: Icon | Omit<string, Icon>;
|
|
8
|
+
iconSize?: number;
|
|
9
|
+
value: T;
|
|
10
|
+
label: string;
|
|
11
|
+
isCreateLink?: boolean;
|
|
12
|
+
};
|
|
13
|
+
/**
|
|
14
|
+
* Props for the Select component.
|
|
15
|
+
*/
|
|
16
|
+
type SelectProps<TOption> = Omit<SelectPropsBase<OptionProps<TOption>, boolean, GroupBase<OptionProps<TOption>>>, 'noOptionsMessage'> & Pick<Parameters<typeof ErrorMessage>[0], 'error'> & {
|
|
17
|
+
/** Ref to the underlying input element (may be callback inputRef or object ref) */
|
|
18
|
+
inputRef?: React.RefObject<HTMLSelectElement>;
|
|
19
|
+
/** Options available in the dropdown */
|
|
20
|
+
options: OptionProps<TOption>[];
|
|
21
|
+
/** Public style overrides for placeholder and value */
|
|
22
|
+
publicStyle?: {
|
|
23
|
+
fontStyleValue?: string;
|
|
24
|
+
fontStylePlaceholder?: string;
|
|
25
|
+
};
|
|
26
|
+
/** If true, disables interactions and search */
|
|
27
|
+
isReadOnly?: boolean;
|
|
28
|
+
/** Whether the user can add custom options */
|
|
29
|
+
isCreatable?: boolean;
|
|
30
|
+
/** Text to display when there are no options */
|
|
31
|
+
noOptionsMessage?: string | ((obj: {
|
|
32
|
+
inputValue: string;
|
|
33
|
+
}) => React.ReactNode);
|
|
34
|
+
/** Format the label for create option */
|
|
35
|
+
formatCreateLabel?: (inputValue: string) => string;
|
|
36
|
+
/** Handle create option */
|
|
37
|
+
onCreateOption?: (inputValue: string) => void;
|
|
38
|
+
/** Class name to be applied to the select container */
|
|
39
|
+
className?: string;
|
|
40
|
+
};
|
|
41
|
+
declare const memoizedSelect: <TOption>({ inputRef, error, isReadOnly, defaultValue, options, menuIsOpen, placeholder, isCreatable, noOptionsMessage, className, ...restProps }: SelectProps<TOption>) => import("react/jsx-runtime").JSX.Element;
|
|
42
|
+
export { memoizedSelect as Select };
|
|
43
|
+
export type { OptionProps, SelectProps };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { default as Select } from 'react-select';
|
|
2
|
+
import { default as CreatableSelect } from 'react-select/creatable';
|
|
3
|
+
declare const Container: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
4
|
+
declare const ReactSelect: typeof Select;
|
|
5
|
+
declare const ReactCreatableSelect: typeof CreatableSelect;
|
|
6
|
+
export { Container, ReactSelect, ReactCreatableSelect };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Select';
|