@dt-dds/react-select 1.0.0-beta.59 → 1.0.0-beta.60

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.
Files changed (7) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/README.md +44 -30
  3. package/dist/index.d.mts +14 -12
  4. package/dist/index.d.ts +14 -12
  5. package/dist/index.js +258 -283
  6. package/dist/index.mjs +259 -287
  7. package/package.json +16 -10
package/CHANGELOG.md CHANGED
@@ -1,5 +1,31 @@
1
1
  # @dt-ui/react-select
2
2
 
3
+ ## 1.0.0-beta.60
4
+
5
+ ### Minor Changes
6
+
7
+ - feat: implement new Dropdown
8
+ - feat: add native attributes to Typography
9
+ - feat: implement new Select field
10
+
11
+ ### Patch Changes
12
+
13
+ - style: apply minor changes to Checkbox
14
+ - Updated dependencies
15
+ - Updated dependencies
16
+ - Updated dependencies
17
+ - Updated dependencies
18
+ - Updated dependencies [223664b]
19
+ - @dt-dds/react-checkbox@1.0.0-beta.51
20
+ - @dt-dds/react-core@1.0.0-beta.51
21
+ - @dt-dds/react-dropdown@1.0.0-beta.69
22
+ - @dt-dds/react-icon@1.0.0-beta.53
23
+ - @dt-dds/react-label-field@1.0.0-beta.51
24
+ - @dt-dds/react-icon-button@1.0.0-beta.19
25
+ - @dt-dds/react-tooltip@1.0.0-beta.59
26
+ - @dt-dds/react-typography@1.0.0-beta.42
27
+ - @dt-dds/react-box@1.0.0-beta.48
28
+
3
29
  ## 1.0.0-beta.59
4
30
 
5
31
  ### Patch Changes
package/README.md CHANGED
@@ -5,25 +5,36 @@ A Select is designed to gather input from users by offering a selection from a p
5
5
  ## Select Usage
6
6
 
7
7
  ```jsx
8
- import { Select, SelectOptionValue } from '@dt-dds/react-select';
8
+ import { Select } from '@dt-dds/react-select';
9
9
 
10
- const items: SelectOptionValue[] = [
10
+ const items = [
11
11
  { value: 'value1', label: 'Value 1' },
12
12
  { value: 'value2', label: 'Value 2' },
13
13
  { value: 'value3', label: 'Value 3', disabled: true },
14
14
  ];
15
15
 
16
16
  export const App = () => {
17
+ const [value, setValue] = useState < string > '';
18
+
17
19
  return (
18
- <Select {...props}>
20
+ <Select
21
+ label='Choose a value'
22
+ helperText='you need to make a selection'
23
+ isMulti={false}
24
+ value={value}
25
+ onChange={setValue}
26
+ variant='outlined'
27
+ fill='default'
28
+ >
19
29
  {items.map((item, index) => (
20
30
  <Select.Option
21
- disabled={item.disabled}
22
- index={index}
23
31
  key={item.value}
24
- label={item.label}
32
+ index={index}
25
33
  value={item.value}
26
- />
34
+ disabled={item.disabled}
35
+ >
36
+ {item.label}
37
+ </Select.Option>
27
38
  ))}
28
39
  </Select>
29
40
  );
@@ -32,32 +43,35 @@ export const App = () => {
32
43
 
33
44
  ## Select
34
45
 
35
- | Property | Type | Default | Description |
36
- | -------------- | -------------------- | ---------- | --------------------------------------------------------------------- |
37
- | `label` | `string` | - | A label to help users understand the scope of the select field. |
38
- | `initialValue` | `string \| string[]` | [] | Sets the initial value of the select field. |
39
- | `helperText` | `string` | - | The message to be displayed below the select field. Useful for hints. |
40
- | `hasError` | `boolean` | false | Set error state for select field. |
41
- | `isDisabled` | `boolean` | false | Determines the disabled state of the select field. |
42
- | `isRequired` | `boolean` | - | Set the state of the select field to required. |
43
- | `errorMessage` | `string` | - | The error message to show when hasError is true |
44
- | `style` | `CSSProperties` | - | Add css style directly to the select field. |
45
- | `onChange` | `function` | - | The triggered function when the selected option changes. |
46
- | `isMulti` | `boolean` | false | Toggles the Select between multi selection and single selection |
47
- | `children` | `React node` | - | Child components to be rendered. Useful to pass the list of options |
48
- | `fill` | `DropdownFill` | `default` | Styles the input with a specific background color |
49
- | `variant` | `DropdownVariant` | `outlined` | Styles the input with a specific border |
46
+ | Property | Type | Default | Description |
47
+ | ----------------- | -------------------------- | --------------------------- | ----------------------------------------------------------------------------------- |
48
+ | `label` | `string` | — | Field label to give context to the selection. |
49
+ | `value` | `string` | `string[]` | Controlled value. A string for single-select; an array of strings for multi-select. |
50
+ | `onChange` | `(value: string) => void` | `(value: string[]) => void` | Called when the selection changes (string in single mode; array in multi mode). |
51
+ | `isMulti` | `boolean` | `false` | Toggles between single and multiple selection. |
52
+ | `helperText` | `string` | - | Helper text displayed below the field; associated via `aria-describedby`. |
53
+ | `hasError` | `boolean` | `false` | Error state (applies `aria-invalid` and error styles). |
54
+ | `isDisabled` | `boolean` | `false` | Disables user interaction. |
55
+ | `isRequired` | `boolean` | — | Marks the field as required. |
56
+ | `isFloatingLabel` | `boolean` | `true` | Controls the “floating label” behavior. |
57
+ | `scale` | `LabelFieldProps['scale']` | `'standard'` | Visual scale/size for label/field. |
58
+ | `labelIcon` | `ReactNode` | — | Optional icon rendered next to the label. |
59
+ | `variant` | `SelectVariant` | `'outlined'` | Border/line variant of the field. |
60
+ | `fill` | `SelectFill` | `'default'` | Background fill style of the field. |
61
+ | `style` | `React.CSSProperties` | — | Inline styles applied to the Select wrapper. |
62
+ | `dataTestId` | `string` | `'select'` | Test identifier applied to the component container. |
63
+ | `children` | `ReactNode` | — | Typically a list of `Select.Option`. |
50
64
 
51
65
  ### Select.Option
52
66
 
53
- | Property | Type | Default | Description |
54
- | ------------ | --------------------- | ----------------- | ---------------------------------------------- |
55
- | `children` | `ReactNode` | - | Child component to be rendered |
56
- | `value` | `string` | - | Value of the option |
57
- | `label` | `string` | - | Text that describes the option |
58
- | `style` | `React.CSSProperties` | - | Add css style directly to the select option. |
59
- | `dataTestId` | `string` | `dropdown-select` | Customizable test identifier |
60
- | `index` | `number` | - | To be used to get the properties of the option |
67
+ | Property | Type | Default | Description |
68
+ | ------------ | --------------------- | ------- | ------------------------------------------------------------ |
69
+ | `children` | `ReactNode` | — | Visible content of the option (the label shown to the user). |
70
+ | `value` | `string` | — | Option value. |
71
+ | `index` | `number` | — | Option index in the list (used internally by Downshift). |
72
+ | `isDisabled` | `boolean` | `false` | Disables the option. |
73
+ | `style` | `React.CSSProperties` | — | Inline styles for the option. |
74
+ | `dataTestId` | `string` | — | Test identifier for the option. |
61
75
 
62
76
  ## Stack
63
77
 
package/dist/index.d.mts CHANGED
@@ -1,18 +1,18 @@
1
1
  import { CustomTheme } from '@dt-dds/themes';
2
- import { BaseProps } from '@dt-dds/react-core';
2
+ import { BaseProps, Scale } from '@dt-dds/react-core';
3
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
4
+ import { ReactNode } from 'react';
4
5
 
5
6
  interface SelectOptionProps extends BaseProps {
6
7
  value: string;
7
- label?: string;
8
8
  index: number;
9
- disabled?: boolean;
9
+ isDisabled?: boolean;
10
10
  }
11
11
 
12
12
  type SelectOptionValue = {
13
- label?: string;
14
13
  value: string;
15
- disabled?: boolean;
14
+ isDisabled?: boolean;
15
+ label?: string;
16
16
  };
17
17
  type SelectVariant = 'outlined' | 'bottom-line';
18
18
  type SelectFill = 'default' | 'contrast' | 'light';
@@ -22,25 +22,27 @@ interface BaseSelectProps extends BaseProps {
22
22
  hasError?: boolean;
23
23
  label: string;
24
24
  isRequired?: boolean;
25
- errorMessage?: string;
26
25
  isDisabled?: boolean;
27
26
  variant?: SelectVariant;
28
27
  fill?: SelectFill;
28
+ isFloatingLabel?: boolean;
29
+ scale?: Scale;
30
+ labelIcon?: ReactNode;
29
31
  }
30
32
  interface SingleSelectProps extends BaseSelectProps {
31
33
  isMulti?: false;
32
- initialValue?: string;
33
- onChange?: (value: string) => void;
34
+ value?: string;
35
+ onChange: (value: string) => void;
34
36
  }
35
37
  interface MultiSelectProps extends BaseSelectProps {
36
38
  isMulti: true;
37
- initialValue?: string[];
38
- onChange?: (value: string[]) => void;
39
+ value?: string[];
40
+ onChange: (value: string[]) => void;
39
41
  }
40
42
  type SelectProps = SingleSelectProps | MultiSelectProps;
41
43
  declare const Select: {
42
- ({ dataTestId, style, helperText, hasError, initialValue, label, isMulti, isRequired, errorMessage, children, isDisabled, variant, fill, onChange, }: SelectProps): react_jsx_runtime.JSX.Element;
43
- Option: ({ dataTestId, index, children, style, value, label, disabled, }: SelectOptionProps) => react_jsx_runtime.JSX.Element;
44
+ ({ dataTestId, style, value, label, isMulti, isRequired, children, isDisabled, labelIcon, hasError, helperText, variant, fill, isFloatingLabel, scale, onChange, }: SelectProps): react_jsx_runtime.JSX.Element;
45
+ Option: ({ dataTestId, index, children, style, value, isDisabled, }: SelectOptionProps) => react_jsx_runtime.JSX.Element;
44
46
  };
45
47
 
46
48
  declare module '@emotion/react' {
package/dist/index.d.ts CHANGED
@@ -1,18 +1,18 @@
1
1
  import { CustomTheme } from '@dt-dds/themes';
2
- import { BaseProps } from '@dt-dds/react-core';
2
+ import { BaseProps, Scale } from '@dt-dds/react-core';
3
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
4
+ import { ReactNode } from 'react';
4
5
 
5
6
  interface SelectOptionProps extends BaseProps {
6
7
  value: string;
7
- label?: string;
8
8
  index: number;
9
- disabled?: boolean;
9
+ isDisabled?: boolean;
10
10
  }
11
11
 
12
12
  type SelectOptionValue = {
13
- label?: string;
14
13
  value: string;
15
- disabled?: boolean;
14
+ isDisabled?: boolean;
15
+ label?: string;
16
16
  };
17
17
  type SelectVariant = 'outlined' | 'bottom-line';
18
18
  type SelectFill = 'default' | 'contrast' | 'light';
@@ -22,25 +22,27 @@ interface BaseSelectProps extends BaseProps {
22
22
  hasError?: boolean;
23
23
  label: string;
24
24
  isRequired?: boolean;
25
- errorMessage?: string;
26
25
  isDisabled?: boolean;
27
26
  variant?: SelectVariant;
28
27
  fill?: SelectFill;
28
+ isFloatingLabel?: boolean;
29
+ scale?: Scale;
30
+ labelIcon?: ReactNode;
29
31
  }
30
32
  interface SingleSelectProps extends BaseSelectProps {
31
33
  isMulti?: false;
32
- initialValue?: string;
33
- onChange?: (value: string) => void;
34
+ value?: string;
35
+ onChange: (value: string) => void;
34
36
  }
35
37
  interface MultiSelectProps extends BaseSelectProps {
36
38
  isMulti: true;
37
- initialValue?: string[];
38
- onChange?: (value: string[]) => void;
39
+ value?: string[];
40
+ onChange: (value: string[]) => void;
39
41
  }
40
42
  type SelectProps = SingleSelectProps | MultiSelectProps;
41
43
  declare const Select: {
42
- ({ dataTestId, style, helperText, hasError, initialValue, label, isMulti, isRequired, errorMessage, children, isDisabled, variant, fill, onChange, }: SelectProps): react_jsx_runtime.JSX.Element;
43
- Option: ({ dataTestId, index, children, style, value, label, disabled, }: SelectOptionProps) => react_jsx_runtime.JSX.Element;
44
+ ({ dataTestId, style, value, label, isMulti, isRequired, children, isDisabled, labelIcon, hasError, helperText, variant, fill, isFloatingLabel, scale, onChange, }: SelectProps): react_jsx_runtime.JSX.Element;
45
+ Option: ({ dataTestId, index, children, style, value, isDisabled, }: SelectOptionProps) => react_jsx_runtime.JSX.Element;
44
46
  };
45
47
 
46
48
  declare module '@emotion/react' {