@entur/dropdown 5.1.3 → 5.2.0-beta.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/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import './index.scss';
2
- export type { NormalizedDropdownItemType, DropdownItemType, } from './useNormalizedItems';
2
+ export type { NormalizedDropdownItemType, DropdownItemType } from './types';
3
3
  export * from './deprecated';
4
4
  export * from './SearchableDropdown';
5
5
  export * from './MultiSelect';
package/dist/styles.css CHANGED
@@ -64,6 +64,38 @@
64
64
  }
65
65
  /* DO NOT CHANGE!*/
66
66
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
67
+ .eds-dropdown__searchable-selected-item {
68
+ display: block;
69
+ font-size: 1rem;
70
+ line-height: 1rem;
71
+ margin-right: -1rem;
72
+ padding: calc(1rem + 0.25rem) 0 0.25rem 1rem;
73
+ font-family: inherit;
74
+ overflow-x: hidden;
75
+ text-overflow: ellipsis;
76
+ white-space: nowrap;
77
+ }
78
+ .eds-dropdown__searchable-selected-item__wrapper {
79
+ max-width: 65%;
80
+ }
81
+
82
+ .eds-form-control.eds-dropdown__input::-moz-placeholder {
83
+ -moz-transition: none;
84
+ transition: none;
85
+ }
86
+
87
+ .eds-form-control.eds-dropdown__input::placeholder {
88
+ transition: none;
89
+ }
90
+ .eds-inline-spinner {
91
+ align-items: center;
92
+ display: flex;
93
+ justify-content: center;
94
+ height: 100%;
95
+ width: 100%;
96
+ }
97
+ /* DO NOT CHANGE!*/
98
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
67
99
  .eds-dropdown-wrapper {
68
100
  position: relative;
69
101
  }
@@ -122,6 +154,34 @@
122
154
  }
123
155
  /* DO NOT CHANGE!*/
124
156
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
157
+ .eds-dropdown__toggle-button {
158
+ -webkit-appearance: none;
159
+ -moz-appearance: none;
160
+ appearance: none;
161
+ background: none;
162
+ border: none;
163
+ border-radius: 0;
164
+ color: inherit;
165
+ font-size: inherit;
166
+ font-family: inherit;
167
+ margin-right: -0.75rem;
168
+ padding: 0.5rem;
169
+ display: flex;
170
+ justify-content: center;
171
+ }
172
+ .eds-dropdown__toggle-button--open svg {
173
+ transform: rotate(180deg);
174
+ }
175
+ .eds-dropdown__toggle-button:focus {
176
+ outline-offset: 0.125rem;
177
+ outline: none;
178
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
179
+ }
180
+ .eds-contrast .eds-dropdown__toggle-button:focus {
181
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
182
+ }
183
+ /* DO NOT CHANGE!*/
184
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
125
185
  .eds-multi-select {
126
186
  position: relative;
127
187
  }
@@ -213,66 +273,6 @@
213
273
  }
214
274
  /* DO NOT CHANGE!*/
215
275
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
216
- .eds-dropdown__toggle-button {
217
- -webkit-appearance: none;
218
- -moz-appearance: none;
219
- appearance: none;
220
- background: none;
221
- border: none;
222
- border-radius: 0;
223
- color: inherit;
224
- font-size: inherit;
225
- font-family: inherit;
226
- margin-right: -0.75rem;
227
- padding: 0.5rem;
228
- display: flex;
229
- justify-content: center;
230
- }
231
- .eds-dropdown__toggle-button--open svg {
232
- transform: rotate(180deg);
233
- }
234
- .eds-dropdown__toggle-button:focus {
235
- outline-offset: 0.125rem;
236
- outline: none;
237
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
238
- }
239
- .eds-contrast .eds-dropdown__toggle-button:focus {
240
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
241
- }
242
- .eds-inline-spinner {
243
- align-items: center;
244
- display: flex;
245
- justify-content: center;
246
- height: 100%;
247
- width: 100%;
248
- }
249
- /* DO NOT CHANGE!*/
250
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
251
- .eds-dropdown__searchable-selected-item {
252
- display: block;
253
- font-size: 1rem;
254
- line-height: 1rem;
255
- margin-right: -1rem;
256
- padding: calc(1rem + 0.25rem) 0 0.25rem 1rem;
257
- font-family: inherit;
258
- overflow-x: hidden;
259
- text-overflow: ellipsis;
260
- white-space: nowrap;
261
- }
262
- .eds-dropdown__searchable-selected-item__wrapper {
263
- max-width: 65%;
264
- }
265
-
266
- .eds-form-control.eds-dropdown__input::-moz-placeholder {
267
- -moz-transition: none;
268
- transition: none;
269
- }
270
-
271
- .eds-form-control.eds-dropdown__input::placeholder {
272
- transition: none;
273
- }
274
- /* DO NOT CHANGE!*/
275
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
276
276
  .eds-dropdown__list {
277
277
  position: absolute;
278
278
  list-style: none;
@@ -0,0 +1,14 @@
1
+ /// <reference types="react" />
2
+ export type DropdownItemType<ValueType = string> = {
3
+ value?: ValueType;
4
+ label: string;
5
+ icons?: React.ComponentType<any>[];
6
+ } | string;
7
+ export type NormalizedDropdownItemType<ValueType = string> = {
8
+ value: ValueType;
9
+ label: string;
10
+ icons?: React.ComponentType<any>[];
11
+ };
12
+ export type AsyncDropdownItemType<ValueType> = (inputType: string, abortControllerRef: React.MutableRefObject<AbortController>) => Promise<DropdownItemType<ValueType>[]>;
13
+ export type SyncDropdownItemType<ValueType> = (inputType: string, abortControllerRef: React.MutableRefObject<AbortController>) => DropdownItemType<ValueType>[];
14
+ export type PotentiallyAsyncDropdownItemType<ValueType = string> = DropdownItemType<ValueType>[] | SyncDropdownItemType<ValueType> | AsyncDropdownItemType<ValueType>;
@@ -1,12 +1,2 @@
1
- import React from 'react';
2
- export type DropdownItemType = {
3
- value?: string;
4
- label: string;
5
- icons?: React.ComponentType<any>[];
6
- } | string;
7
- export type NormalizedDropdownItemType = {
8
- value: string;
9
- label: string;
10
- icons?: React.ComponentType<any>[];
11
- };
12
- export declare const useNormalizedItems: (items: DropdownItemType[]) => NormalizedDropdownItemType[];
1
+ import { DropdownItemType, NormalizedDropdownItemType } from './types';
2
+ export declare const useNormalizedItems: <ValueType = string>(items: DropdownItemType<ValueType>[]) => NormalizedDropdownItemType<ValueType>[];
@@ -1,11 +1,6 @@
1
- import React from 'react';
2
- import { DropdownItemType, NormalizedDropdownItemType } from './useNormalizedItems';
3
- type AsyncDropdownItemType = (inputType: string, abortControllerRef: React.MutableRefObject<AbortController>) => Promise<DropdownItemType[]>;
4
- type SyncDropdownItemType = (inputType: string, abortControllerRef: React.MutableRefObject<AbortController>) => DropdownItemType[];
5
- export type PotentiallyAsyncDropdownItemType = DropdownItemType[] | SyncDropdownItemType | AsyncDropdownItemType;
6
- export declare const useResolvedItems: (itemsOrItemsResolver: PotentiallyAsyncDropdownItemType, debounceTimeout?: number) => {
1
+ import { PotentiallyAsyncDropdownItemType, NormalizedDropdownItemType } from './types';
2
+ export declare const useResolvedItems: <ValueType extends unknown>(itemsOrItemsResolver: PotentiallyAsyncDropdownItemType<ValueType>, debounceTimeout?: number) => {
7
3
  fetchItems: (query?: string) => void;
8
4
  loading: boolean;
9
- items: NormalizedDropdownItemType[];
5
+ items: NormalizedDropdownItemType<ValueType>[];
10
6
  };
11
- export {};
package/dist/utils.d.ts CHANGED
@@ -1,33 +1,33 @@
1
1
  import { A11yRemovalMessage, A11yStatusMessageOptions } from 'downshift';
2
- import { NormalizedDropdownItemType } from './useNormalizedItems';
2
+ import { NormalizedDropdownItemType } from './types';
3
3
  import React from 'react';
4
4
  export declare const EMPTY_INPUT = "";
5
- export declare function lowerCaseFilterTest(item: NormalizedDropdownItemType, input: string | undefined): boolean;
6
- export declare function noFilter(item: NormalizedDropdownItemType, input: string | undefined): boolean;
7
- export declare const itemToString: (item: NormalizedDropdownItemType | null) => string;
5
+ export declare function lowerCaseFilterTest(item: NormalizedDropdownItemType<any>, input: string | undefined): boolean;
6
+ export declare function noFilter<ValueType>(item: NormalizedDropdownItemType<ValueType>, input: string | undefined): boolean;
7
+ export declare const itemToString: (item: NormalizedDropdownItemType<any> | null) => string;
8
8
  export declare const isFunctionWithQueryArgument: (object: any) => boolean;
9
- type useMultiselectUtilsType = {
10
- selectedItems: NormalizedDropdownItemType[];
11
- listItems: NormalizedDropdownItemType[];
12
- selectAll: NormalizedDropdownItemType;
9
+ type useMultiselectUtilsType<ValueType> = {
10
+ selectedItems: NormalizedDropdownItemType<ValueType>[];
11
+ listItems: NormalizedDropdownItemType<ValueType | string>[];
12
+ selectAll: NormalizedDropdownItemType<string>;
13
13
  };
14
- export declare const useMultiselectUtils: ({ listItems, selectedItems, selectAll, }: useMultiselectUtilsType) => {
15
- addClickedItemToSelectedItems: (clickedItem: NormalizedDropdownItemType, onChange: (value: NormalizedDropdownItemType[]) => void) => void;
14
+ export declare const useMultiselectUtils: <ValueType>({ listItems, selectedItems, selectAll, }: useMultiselectUtilsType<ValueType>) => {
15
+ addClickedItemToSelectedItems: (clickedItem: NormalizedDropdownItemType<ValueType>, onChange: (value: NormalizedDropdownItemType<ValueType>[]) => void) => void;
16
16
  allListItemsAreSelected: boolean;
17
- clickedItemIsInSelectedItems: (clickedItem: NormalizedDropdownItemType) => boolean;
18
- clickedItemIsSelectAll: (clickedItem: NormalizedDropdownItemType) => boolean;
17
+ clickedItemIsInSelectedItems: (clickedItem: NormalizedDropdownItemType<ValueType>) => boolean;
18
+ clickedItemIsSelectAll: (clickedItem: NormalizedDropdownItemType<string | ValueType>) => boolean;
19
19
  handleListItemClicked: ({ clickedItem, onChange, setLastRemovedItem, }: {
20
- clickedItem: NormalizedDropdownItemType;
21
- onChange: (value: NormalizedDropdownItemType[]) => void;
20
+ clickedItem: NormalizedDropdownItemType<any>;
21
+ onChange: (value: NormalizedDropdownItemType<ValueType>[]) => void;
22
22
  setLastRemovedItem: any;
23
23
  }) => void;
24
24
  hasSelectedItems: boolean;
25
- listItemsWithoutSelectAll: NormalizedDropdownItemType[];
26
- removeClickedItemFromSelectedItems: (clickedItem: NormalizedDropdownItemType, onChange: (value: NormalizedDropdownItemType[]) => void) => void;
25
+ listItemsWithoutSelectAll: NormalizedDropdownItemType<ValueType>[];
26
+ removeClickedItemFromSelectedItems: (clickedItem: NormalizedDropdownItemType<ValueType>, onChange: (value: NormalizedDropdownItemType<ValueType>[]) => void) => void;
27
27
  selectAllCheckboxState: () => boolean | "indeterminate";
28
- selectAllUnselectedItemsInListItems: (onChange: (value: NormalizedDropdownItemType[]) => void) => void;
28
+ selectAllUnselectedItemsInListItems: (onChange: (value: NormalizedDropdownItemType<ValueType>[]) => void) => void;
29
29
  someListItemsAreSelected: boolean;
30
- unselectAllListItems: (onChange: (value: NormalizedDropdownItemType[]) => void) => void;
30
+ unselectAllListItems: (onChange: (value: NormalizedDropdownItemType<ValueType>[]) => void) => void;
31
31
  };
32
32
  type getA11yStatusMessageType<Item> = A11yStatusMessageOptions<Item> & {
33
33
  selectAllItemIncluded?: boolean;
@@ -35,14 +35,14 @@ type getA11yStatusMessageType<Item> = A11yStatusMessageOptions<Item> & {
35
35
  };
36
36
  export declare function getA11yStatusMessage<Item>(options: getA11yStatusMessageType<Item>): string;
37
37
  type getA11ySelectionMessageType<Item> = A11yStatusMessageOptions<Item> & {
38
- selectAllItem?: NormalizedDropdownItemType;
38
+ selectAllItem?: NormalizedDropdownItemType<string>;
39
39
  };
40
- export declare function getA11ySelectionMessage(options: getA11ySelectionMessageType<NormalizedDropdownItemType>): string;
40
+ export declare function getA11ySelectionMessage(options: getA11ySelectionMessageType<NormalizedDropdownItemType<any>>): string;
41
41
  type getA11yRemovalMessageType<Item> = A11yRemovalMessage<Item> & {
42
- selectAllItem?: NormalizedDropdownItemType;
43
- removedItem?: NormalizedDropdownItemType;
42
+ selectAllItem?: NormalizedDropdownItemType<string>;
43
+ removedItem?: NormalizedDropdownItemType<any>;
44
44
  };
45
- export declare function getA11yRemovalMessage(options: getA11yRemovalMessageType<NormalizedDropdownItemType>): string;
45
+ export declare function getA11yRemovalMessage(options: getA11yRemovalMessageType<NormalizedDropdownItemType<any>>): string;
46
46
  /**A VoiceOver click is always preformed in the center of the clicked element.
47
47
  This functions expolits that to check if the performed click likely is
48
48
  made by VoiceOver. */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/dropdown",
3
- "version": "5.1.3",
3
+ "version": "5.2.0-beta.0",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/dropdown.esm.js",
@@ -39,5 +39,5 @@
39
39
  "classnames": "^2.3.1",
40
40
  "downshift": "^7.6.1"
41
41
  },
42
- "gitHead": "3842f90322ff4340572e6597baf4ce753a6bf355"
42
+ "gitHead": "7fdec90227d3619fe001248c0a2d82393ac897c7"
43
43
  }