agroptima-design-system 0.25.1 → 0.25.2

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 (4) hide show
  1. package/package.json +1 -1
  2. package/src/atoms/Multiselect.scss +4 -0
  3. package/src/atoms/Multiselect.tsx +14 -8
  4. package/src/stories/Changelog.mdx +5 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "agroptima-design-system",
3
- "version": "0.25.1",
3
+ "version": "0.25.2",
4
4
  "scripts": {
5
5
  "dev": "npm run storybook",
6
6
  "storybook": "storybook dev -p 6006 --ci",
package/src/atoms/Multiselect.scss CHANGED
@@ -64,6 +64,10 @@
64
64
  }
65
65
 
66
66
  .multiselect-options {
67
+ max-height: 256px;
68
+ overflow-y: auto;
69
+ overflow-anchor: none;
70
+ z-index: depth.$z-dropdown-options;
67
71
  border-radius: config.$corner-radius-xxs;
68
72
  background: color_alias.$neutral-white;
69
73
  box-shadow:
package/src/atoms/Multiselect.tsx CHANGED
@@ -7,8 +7,12 @@ import { buildHelpText } from '../utils/buildHelpText'
7
7
  export type Variant = 'primary'
8
8
  export type Option = { id: string; label: string }
9
9
 
10
- export interface MultiselectProps
11
- extends React.ComponentPropsWithoutRef<'input'> {
10
+ type InputPropsWithoutOnChange = Omit<
11
+ React.ComponentPropsWithoutRef<'input'>,
12
+ 'onChange'
13
+ >
14
+
15
+ export interface MultiselectProps extends InputPropsWithoutOnChange {
12
16
  placeholder?: string
13
17
  helpText?: string
14
18
  variant?: Variant
@@ -19,6 +23,7 @@ export interface MultiselectProps
19
23
  selectedLabel?: string
20
24
  hideLabel?: boolean
21
25
  defaultValue?: string[]
26
+ onChange?: (value: string[]) => void
22
27
  }
23
28
 
24
29
  export function Multiselect({
@@ -31,6 +36,7 @@ export function Multiselect({
31
36
  options,
32
37
  label,
33
38
  accessibilityLabel,
39
+ onChange,
34
40
  variant = 'primary',
35
41
  selectedLabel = 'items selected',
36
42
  hideLabel = false,
@@ -53,12 +59,12 @@ export function Multiselect({
53
59
 
54
60
  function selectOption(id: string) {
55
61
  const isOptionSelected = selectedOptions.includes(id)
56
- if (isOptionSelected) {
57
- return setSelectedOptions(
58
- selectedOptions.filter((optionId) => optionId !== id),
59
- )
60
- }
61
- setSelectedOptions([...selectedOptions, id])
62
+ const options = isOptionSelected
63
+ ? selectedOptions.filter((optionId) => optionId !== id)
64
+ : [...selectedOptions, id]
65
+
66
+ setSelectedOptions(options)
67
+ if (onChange !== undefined) onChange(options)
62
68
  }
63
69
 
64
70
  function handleBlur(event: React.FocusEvent<HTMLDivElement>) {
package/src/stories/Changelog.mdx CHANGED
@@ -4,6 +4,11 @@ import { Meta } from "@storybook/blocks";
4
4
 
5
5
  # Changelog
6
6
 
7
+ # 0.25.2
8
+
9
+ * Add onChange prop to Multiselect component
10
+ * Add max height to Multiselect component
11
+
7
12
  # 0.25.1
8
13
 
9
14
  * Replace selected prop by defaultValue in Multiselect component