@hazelcast/ui 1.3.2-next.9 → 1.3.2-next.90

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 (271) hide show
  1. package/lib/Alert.d.ts +6 -5
  2. package/lib/Alert.js +2 -2
  3. package/lib/Alert.js.map +1 -1
  4. package/lib/Alert.module.scss +15 -11
  5. package/lib/AutocompleteField.d.ts +9 -6
  6. package/lib/AutocompleteField.js +6 -7
  7. package/lib/AutocompleteField.js.map +1 -1
  8. package/lib/AutocompleteField.module.scss +16 -0
  9. package/lib/AutocompleteFieldFormik.d.ts +1 -1
  10. package/lib/Badge.d.ts +4 -4
  11. package/lib/Button.d.ts +20 -19
  12. package/lib/Button.js +8 -6
  13. package/lib/Button.js.map +1 -1
  14. package/lib/Button.module.scss +60 -7
  15. package/lib/Calendar/Calendar.d.ts +8 -4
  16. package/lib/Calendar/Calendar.js +32 -22
  17. package/lib/Calendar/Calendar.js.map +1 -1
  18. package/lib/Calendar/Calendar.module.scss +3 -2
  19. package/lib/Calendar/CalendarRange.d.ts +4 -4
  20. package/lib/Calendar/CalendarRange.js +5 -5
  21. package/lib/Calendar/CalendarRange.js.map +1 -1
  22. package/lib/Calendar/CalendarRange.module.scss +5 -0
  23. package/lib/Calendar/components/CalendarHeader.d.ts +2 -2
  24. package/lib/Calendar/components/CalendarInput.d.ts +8 -6
  25. package/lib/Calendar/components/CalendarInput.js +3 -3
  26. package/lib/Calendar/components/CalendarInput.js.map +1 -1
  27. package/lib/Calendar/components/CalendarTime.d.ts +2 -2
  28. package/lib/Calendar/components/CalendarTime.js +15 -10
  29. package/lib/Calendar/components/CalendarTime.js.map +1 -1
  30. package/lib/Calendar/components/CalendarTime.module.scss +4 -0
  31. package/lib/Calendar/helpers/consts.js +97 -97
  32. package/lib/Calendar/helpers/consts.js.map +1 -1
  33. package/lib/Card.d.ts +1 -1
  34. package/lib/Card.js +2 -2
  35. package/lib/Card.js.map +1 -1
  36. package/lib/Card.module.scss +1 -1
  37. package/lib/Carousel.d.ts +26 -0
  38. package/lib/Carousel.js +28 -0
  39. package/lib/Carousel.js.map +1 -0
  40. package/lib/Carousel.module.scss +43 -0
  41. package/lib/Checkbox.d.ts +4 -3
  42. package/lib/Checkbox.js +4 -7
  43. package/lib/Checkbox.js.map +1 -1
  44. package/lib/Checkbox.module.scss +10 -7
  45. package/lib/CheckboxFormik.d.ts +1 -1
  46. package/lib/CircularProgressBar.d.ts +1 -1
  47. package/lib/CircularProgressBar.module.scss +1 -1
  48. package/lib/ContextMenu.d.ts +15 -0
  49. package/lib/ContextMenu.js +61 -0
  50. package/lib/ContextMenu.js.map +1 -0
  51. package/lib/ContextMenu.module.scss +37 -0
  52. package/lib/Dialog.d.ts +2 -2
  53. package/lib/EmptyState.d.ts +5 -5
  54. package/lib/FieldHeader.d.ts +10 -6
  55. package/lib/FieldHeader.js +3 -3
  56. package/lib/FieldHeader.js.map +1 -1
  57. package/lib/Help.d.ts +2 -1
  58. package/lib/Help.js +2 -2
  59. package/lib/Help.js.map +1 -1
  60. package/lib/Icon.d.ts +6 -5
  61. package/lib/Icon.js +3 -3
  62. package/lib/Icon.js.map +1 -1
  63. package/lib/IconButton.d.ts +8 -6
  64. package/lib/IconButton.js +3 -3
  65. package/lib/IconButton.js.map +1 -1
  66. package/lib/InteractiveList.d.ts +11 -7
  67. package/lib/InteractiveList.js +11 -8
  68. package/lib/InteractiveList.js.map +1 -1
  69. package/lib/InteractiveList.module.scss +43 -8
  70. package/lib/InteractiveListFormik.d.ts +1 -1
  71. package/lib/InteractiveListFormik.js +24 -21
  72. package/lib/InteractiveListFormik.js.map +1 -1
  73. package/lib/Label.d.ts +2 -1
  74. package/lib/Label.js +1 -1
  75. package/lib/Label.js.map +1 -1
  76. package/lib/Label.module.scss +4 -0
  77. package/lib/Link.d.ts +7 -7
  78. package/lib/Link.js +3 -3
  79. package/lib/Link.js.map +1 -1
  80. package/lib/Loader.d.ts +3 -1
  81. package/lib/Loader.js +3 -3
  82. package/lib/Loader.js.map +1 -1
  83. package/lib/Modal.d.ts +4 -2
  84. package/lib/Modal.js.map +1 -1
  85. package/lib/Notification.d.ts +5 -4
  86. package/lib/Notification.js +5 -3
  87. package/lib/Notification.js.map +1 -1
  88. package/lib/Notification.module.scss +14 -10
  89. package/lib/NumberBadge.d.ts +2 -1
  90. package/lib/NumberBadge.js +3 -2
  91. package/lib/NumberBadge.js.map +1 -1
  92. package/lib/NumberField.d.ts +5 -7
  93. package/lib/NumberField.js.map +1 -1
  94. package/lib/NumberFieldFormik.d.ts +1 -1
  95. package/lib/Overlay.d.ts +7 -2
  96. package/lib/Overlay.js +5 -5
  97. package/lib/Overlay.js.map +1 -1
  98. package/lib/Overlay.module.scss +1 -1
  99. package/lib/Pagination.d.ts +7 -6
  100. package/lib/Pagination.js +7 -7
  101. package/lib/Pagination.js.map +1 -1
  102. package/lib/Pagination.module.scss +3 -2
  103. package/lib/PasswordField.d.ts +6 -4
  104. package/lib/PasswordField.js +7 -3
  105. package/lib/PasswordField.js.map +1 -1
  106. package/lib/PasswordField.module.scss +6 -0
  107. package/lib/PasswordFieldFormik.d.ts +1 -1
  108. package/lib/Popover.d.ts +2 -0
  109. package/lib/Popover.js +37 -21
  110. package/lib/Popover.js.map +1 -1
  111. package/lib/Radio.d.ts +3 -3
  112. package/lib/Radio.module.scss +2 -2
  113. package/lib/RadioFormik.d.ts +1 -1
  114. package/lib/RadioGroup.d.ts +3 -3
  115. package/lib/RadioGroupFormik.d.ts +1 -1
  116. package/lib/SegmentedControl.d.ts +7 -6
  117. package/lib/SegmentedControl.js +4 -4
  118. package/lib/SegmentedControl.js.map +1 -1
  119. package/lib/SegmentedControl.module.scss +2 -2
  120. package/lib/SegmentedControlFormik.d.ts +1 -1
  121. package/lib/Select/CheckableSelectField.d.ts +4 -3
  122. package/lib/Select/CheckableSelectField.js +7 -2
  123. package/lib/Select/CheckableSelectField.js.map +1 -1
  124. package/lib/Select/CheckableSelectField.module.scss +10 -4
  125. package/lib/Select/CheckableSelectFieldFormik.d.ts +1 -1
  126. package/lib/Select/Common.d.ts +6 -6
  127. package/lib/Select/MultiSelectField.d.ts +7 -7
  128. package/lib/Select/MultiSelectField.js +3 -1
  129. package/lib/Select/MultiSelectField.js.map +1 -1
  130. package/lib/Select/MultiSelectFieldFormik.d.ts +1 -1
  131. package/lib/Select/SelectField.d.ts +6 -7
  132. package/lib/Select/SelectField.js +5 -3
  133. package/lib/Select/SelectField.js.map +1 -1
  134. package/lib/Select/SelectField.module.scss +6 -4
  135. package/lib/Select/SelectFieldFormik.d.ts +1 -1
  136. package/lib/Select/helpers.d.ts +2 -2
  137. package/lib/SimpleTable.d.ts +1 -1
  138. package/lib/Slider.d.ts +8 -8
  139. package/lib/Slider.module.scss +2 -2
  140. package/lib/SliderFormik.d.ts +1 -1
  141. package/lib/Table/Cell.d.ts +11 -3
  142. package/lib/Table/Cell.js +44 -9
  143. package/lib/Table/Cell.js.map +1 -1
  144. package/lib/Table/Cell.module.scss +8 -0
  145. package/lib/Table/CellWrapper.d.ts +11 -0
  146. package/lib/Table/CellWrapper.js +29 -0
  147. package/lib/Table/CellWrapper.js.map +1 -0
  148. package/lib/Table/EnhancedRenderers.d.ts +2 -2
  149. package/lib/Table/Header.d.ts +1 -2
  150. package/lib/Table/Header.js +3 -2
  151. package/lib/Table/Header.js.map +1 -1
  152. package/lib/Table/Header.module.scss +40 -28
  153. package/lib/Table/Row.d.ts +4 -4
  154. package/lib/Table/Row.js +6 -2
  155. package/lib/Table/Row.js.map +1 -1
  156. package/lib/Table/Row.module.scss +2 -2
  157. package/lib/Table/Table.d.ts +15 -19
  158. package/lib/Table/Table.js +108 -160
  159. package/lib/Table/Table.js.map +1 -1
  160. package/lib/Table/Table.module.scss +5 -17
  161. package/lib/Table/TableContent.d.ts +26 -0
  162. package/lib/Table/TableContent.js +52 -0
  163. package/lib/Table/TableContent.js.map +1 -0
  164. package/lib/Table/TableContent.module.scss +21 -0
  165. package/lib/Table/constants.d.ts +2 -0
  166. package/lib/Table/constants.js +3 -0
  167. package/lib/Table/constants.js.map +1 -0
  168. package/lib/Table/features/columnsSelection/CellCopyablePopover.d.ts +8 -0
  169. package/lib/Table/features/columnsSelection/CellCopyablePopover.js +13 -0
  170. package/lib/Table/features/columnsSelection/CellCopyablePopover.js.map +1 -0
  171. package/lib/Table/features/columnsSelection/CellCopyablePopover.module.scss +12 -0
  172. package/lib/Table/features/columnsSelection/ContextMenu/ContextMenu.d.ts +6 -0
  173. package/lib/Table/features/columnsSelection/ContextMenu/ContextMenu.js +17 -0
  174. package/lib/Table/features/columnsSelection/ContextMenu/ContextMenu.js.map +1 -0
  175. package/lib/Table/features/columnsSelection/ContextMenu/ContextMenu.module.scss +6 -0
  176. package/lib/Table/features/columnsSelection/ContextMenu/index.d.ts +1 -0
  177. package/lib/Table/features/columnsSelection/ContextMenu/index.js +2 -0
  178. package/lib/Table/features/columnsSelection/ContextMenu/index.js.map +1 -0
  179. package/lib/Table/features/columnsSelection/columnsSelection.d.ts +19 -0
  180. package/lib/Table/features/columnsSelection/columnsSelection.js +71 -0
  181. package/lib/Table/features/columnsSelection/columnsSelection.js.map +1 -0
  182. package/lib/Table/features/columnsSelection/helpers.d.ts +7 -0
  183. package/lib/Table/features/columnsSelection/helpers.js +26 -0
  184. package/lib/Table/features/columnsSelection/helpers.js.map +1 -0
  185. package/lib/Table/features/columnsSelection/index.d.ts +4 -0
  186. package/lib/Table/features/columnsSelection/index.js +5 -0
  187. package/lib/Table/features/columnsSelection/index.js.map +1 -0
  188. package/lib/Tabs/Tab.d.ts +6 -6
  189. package/lib/Tabs/Tab.js +1 -1
  190. package/lib/Tabs/Tab.js.map +1 -1
  191. package/lib/Tabs/Tab.module.scss +9 -3
  192. package/lib/Tabs/TabContext.d.ts +3 -3
  193. package/lib/Tabs/TabList.d.ts +1 -1
  194. package/lib/Tabs/TabPanel.d.ts +1 -1
  195. package/lib/Terminal.d.ts +1 -1
  196. package/lib/Terminal.module.scss +1 -1
  197. package/lib/TextArea.d.ts +4 -4
  198. package/lib/TextArea.module.scss +5 -1
  199. package/lib/TextAreaFormik.d.ts +1 -1
  200. package/lib/TextField.d.ts +12 -6
  201. package/lib/TextField.js +7 -6
  202. package/lib/TextField.js.map +1 -1
  203. package/lib/TextField.module.scss +12 -1
  204. package/lib/TextFieldFormik.d.ts +1 -1
  205. package/lib/TimeField.d.ts +3 -3
  206. package/lib/TimeField.js +4 -12
  207. package/lib/TimeField.js.map +1 -1
  208. package/lib/TimeField.module.scss +0 -87
  209. package/lib/TimeFieldFormik.d.ts +1 -1
  210. package/lib/Toast.d.ts +3 -3
  211. package/lib/Toast.module.scss +6 -6
  212. package/lib/Toggle.d.ts +4 -4
  213. package/lib/Toggle.js +1 -1
  214. package/lib/Toggle.js.map +1 -1
  215. package/lib/Toggle.module.scss +1 -1
  216. package/lib/ToggleFormik.d.ts +1 -1
  217. package/lib/Tooltip.d.ts +7 -6
  218. package/lib/Tooltip.js +5 -15
  219. package/lib/Tooltip.js.map +1 -1
  220. package/lib/hooks/index.d.ts +0 -1
  221. package/lib/hooks/index.js +0 -1
  222. package/lib/hooks/index.js.map +1 -1
  223. package/lib/hooks/useCloseOnResize.d.ts +8 -0
  224. package/lib/hooks/useCloseOnResize.js +16 -0
  225. package/lib/hooks/useCloseOnResize.js.map +1 -0
  226. package/lib/hooks/useDimensions.d.ts +1 -1
  227. package/lib/hooks/useOnClickOutside.d.ts +1 -1
  228. package/lib/hooks/useOnClickOutside.js +4 -0
  229. package/lib/hooks/useOnClickOutside.js.map +1 -1
  230. package/lib/hooks/usePagination.d.ts +2 -2
  231. package/lib/index.d.ts +3 -4
  232. package/lib/index.js +3 -4
  233. package/lib/index.js.map +1 -1
  234. package/lib/utils/formik.d.ts +2 -2
  235. package/lib/utils/portal.d.ts +2 -0
  236. package/lib/utils/portal.js +15 -0
  237. package/lib/utils/portal.js.map +1 -0
  238. package/lib/utils/test.d.ts +3 -1
  239. package/lib/utils/test.js.map +1 -1
  240. package/lib/utils/types.d.ts +1 -1
  241. package/package.json +60 -57
  242. package/styles/constants/_colors.scss +18 -15
  243. package/styles/constants/_sizes.scss +2 -1
  244. package/styles/constants/_typography.scss +34 -24
  245. package/styles/helpers/_gradients.scss +11 -0
  246. package/styles/helpers/_index.scss +1 -0
  247. package/styles/typography/fonts/LICENSE.txt +202 -0
  248. package/styles/typography/fonts/OpenSans-Italic.woff2 +0 -0
  249. package/styles/typography/fonts/OpenSans-Regular.woff2 +0 -0
  250. package/styles/typography/fonts/OpenSans-SemiBold.woff2 +0 -0
  251. package/styles/typography/fonts/OpenSans-SemiBoldItalic.woff2 +0 -0
  252. package/styles/typography/fonts/PPTelegraf-Light.woff2 +0 -0
  253. package/styles/typography/fonts/PPTelegraf-Medium.woff2 +0 -0
  254. package/styles/typography/fonts/PPTelegraf-RegularSlanted.woff2 +0 -0
  255. package/styles/typography/fonts/PPTelegraf-UltralightSlanted.woff2 +0 -0
  256. package/styles/typography/open-sans.css +35 -0
  257. package/styles/typography/pp-telegraf.css +31 -0
  258. package/lib/Code.d.ts +0 -8
  259. package/lib/Code.js +0 -16
  260. package/lib/Code.js.map +0 -1
  261. package/lib/CodeEditor.d.ts +0 -28
  262. package/lib/CodeEditor.js +0 -180
  263. package/lib/CodeEditor.js.map +0 -1
  264. package/lib/CodeEditor.module.scss +0 -32
  265. package/lib/CodeEditorFormik.d.ts +0 -9
  266. package/lib/CodeEditorFormik.js +0 -14
  267. package/lib/CodeEditorFormik.js.map +0 -1
  268. package/lib/hooks/useTableCustomizableColumns.d.ts +0 -10
  269. package/lib/hooks/useTableCustomizableColumns.js +0 -21
  270. package/lib/hooks/useTableCustomizableColumns.js.map +0 -1
  271. package/styles/fonts.css +0 -26
@@ -1,17 +1,18 @@
1
1
  /// <reference types="react" />
2
- export declare type SegmentedControlOption<V> = {
2
+ import { DataTestProp } from '@hazelcast/helpers';
3
+ export type SegmentedControlOption<V> = {
3
4
  value: V;
4
5
  label: string;
5
6
  };
6
- export declare type SegmentedControlSize = 'medium' | 'small';
7
- export declare type SegmentedControlProps<V> = {
7
+ export type SegmentedControlSize = 'medium' | 'small';
8
+ export type SegmentedControlProps<V> = {
8
9
  value: V;
9
10
  onChange: (value: V) => void;
10
- label: string;
11
+ label?: string;
11
12
  options: SegmentedControlOption<V>[];
12
13
  size?: SegmentedControlSize;
13
14
  className?: string;
14
15
  optionClassName?: string;
15
16
  labelClassName?: string;
16
- };
17
- export declare const SegmentedControl: <V extends string = string>({ label, value, onChange, options, size, className, optionClassName, labelClassName, }: SegmentedControlProps<V>) => JSX.Element;
17
+ } & DataTestProp;
18
+ export declare const SegmentedControl: <V extends string = string>({ label, value, onChange, options, size, className, optionClassName, labelClassName, "data-test": dataTest, }: SegmentedControlProps<V>) => JSX.Element;
@@ -2,8 +2,8 @@ import React from 'react';
2
2
  import cn from 'classnames';
3
3
  import { RadioGroup } from '@headlessui/react';
4
4
  import styles from './SegmentedControl.module.scss';
5
- export const SegmentedControl = ({ label, value, onChange, options, size = 'medium', className, optionClassName, labelClassName, }) => (React.createElement(RadioGroup, { className: cn(styles.group, { [styles.small]: size === 'small' }, className), value: value, onChange: onChange },
6
- React.createElement(RadioGroup.Label, { className: styles.groupLabel }, label),
7
- options.map((option) => (React.createElement(RadioGroup.Option, { key: option.value, value: option.value, className: ({ checked }) => cn(styles.option, { [styles.checked]: checked }, optionClassName) },
8
- React.createElement(RadioGroup.Label, { className: cn(styles.label, labelClassName) }, option.label))))));
5
+ export const SegmentedControl = ({ label, value, onChange, options, size = 'medium', className, optionClassName, labelClassName, 'data-test': dataTest = 'segmented', }) => (React.createElement(RadioGroup, { "data-test": dataTest, className: cn(styles.group, { [styles.small]: size === 'small' }, className), value: value, onChange: onChange },
6
+ label && (React.createElement(RadioGroup.Label, { "data-test": `${dataTest}-label`, className: styles.groupLabel }, label)),
7
+ options.map((option) => (React.createElement(RadioGroup.Option, { "data-test": `${dataTest}-${option.value}`, key: option.value, value: option.value, className: ({ checked }) => cn(styles.option, { [styles.checked]: checked }, optionClassName) },
8
+ React.createElement(RadioGroup.Label, { "data-test": `${dataTest}-${option.value}-label`, className: cn(styles.label, labelClassName) }, option.label))))));
9
9
  //# sourceMappingURL=SegmentedControl.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../src/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAE9C,OAAO,MAAM,MAAM,gCAAgC,CAAA;AAoBnD,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAA4B,EAC1D,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EACP,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,eAAe,EACf,cAAc,GACW,EAAE,EAAE,CAAC,CAC9B,oBAAC,UAAU,IAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO,EAAE,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ;IACxH,oBAAC,UAAU,CAAC,KAAK,IAAC,SAAS,EAAE,MAAM,CAAC,UAAU,IAAG,KAAK,CAAoB;IACzE,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,oBAAC,UAAU,CAAC,MAAM,IAChB,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,eAAe,CAAC;QAE7F,oBAAC,UAAU,CAAC,KAAK,IAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,IAAG,MAAM,CAAC,KAAK,CAAoB,CAC9E,CACrB,CAAC,CACS,CACd,CAAA"}
1
+ {"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../src/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAE9C,OAAO,MAAM,MAAM,gCAAgC,CAAA;AAqBnD,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAA4B,EAC1D,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EACP,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,eAAe,EACf,cAAc,EACd,WAAW,EAAE,QAAQ,GAAG,WAAW,GACV,EAAE,EAAE,CAAC,CAC9B,oBAAC,UAAU,iBACE,QAAQ,EACnB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO,EAAE,EAAE,SAAS,CAAC,EAC5E,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ;IAEjB,KAAK,IAAI,CACR,oBAAC,UAAU,CAAC,KAAK,iBAAY,GAAG,QAAQ,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,UAAU,IAC3E,KAAK,CACW,CACpB;IACA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,oBAAC,UAAU,CAAC,MAAM,iBACL,GAAG,QAAQ,IAAI,MAAM,CAAC,KAAK,EAAE,EACxC,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,eAAe,CAAC;QAE7F,oBAAC,UAAU,CAAC,KAAK,iBAAY,GAAG,QAAQ,IAAI,MAAM,CAAC,KAAK,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,IAC1G,MAAM,CAAC,KAAK,CACI,CACD,CACrB,CAAC,CACS,CACd,CAAA"}
@@ -33,7 +33,7 @@
33
33
 
34
34
  &.checked {
35
35
  color: c.$colorText;
36
- border-bottom-color: c.$colorSuccessLight;
36
+ border-bottom-color: c.$colorSuccess;
37
37
  }
38
38
 
39
39
  &:first-of-type {
@@ -55,7 +55,7 @@
55
55
  color: c.$colorText;
56
56
  }
57
57
 
58
- &:focus {
58
+ &:focus-visible {
59
59
  // Do not remove outline for high-contrast modes
60
60
  // https://stackoverflow.com/a/52616313
61
61
  outline: c.$outlineWidth solid transparent;
@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
2
2
  import { SegmentedControlProps } from './SegmentedControl';
3
3
  import { FieldValidatorGeneric } from './utils/formik';
4
4
  import { ExtractKeysOfValueType } from './utils/types';
5
- export declare type SegmentedControlFormikProps<V extends object, OV> = Omit<SegmentedControlProps<OV>, 'value' | 'onChange'> & {
5
+ export type SegmentedControlFormikProps<V extends object, OV> = Omit<SegmentedControlProps<OV>, 'value' | 'onChange'> & {
6
6
  name: ExtractKeysOfValueType<V, OV | undefined>;
7
7
  validate?: FieldValidatorGeneric<OV | undefined>;
8
8
  };
@@ -1,7 +1,7 @@
1
1
  import { FocusEvent, ReactNode } from 'react';
2
2
  import { SelectFieldOption } from './helpers';
3
3
  import { HelpProps } from '../Help';
4
- export declare type CheckableSelectFieldCoreStaticProps<V> = {
4
+ export type CheckableSelectFieldCoreStaticProps<V> = {
5
5
  name: string;
6
6
  onBlur?: (e: FocusEvent<HTMLElement>) => void;
7
7
  error?: string;
@@ -10,13 +10,14 @@ export declare type CheckableSelectFieldCoreStaticProps<V> = {
10
10
  allSelectedLabel?: string;
11
11
  noneSelectedLabel?: string;
12
12
  };
13
- export declare type CheckableSelectFieldExtraProps<V> = {
13
+ export type CheckableSelectFieldExtraProps<V> = {
14
14
  options: SelectFieldOption<V>[];
15
15
  label: ReactNode;
16
16
  size?: 'small' | 'medium';
17
17
  showAriaLabel?: boolean;
18
18
  helperText?: HelpProps['helperText'];
19
19
  className?: string;
20
+ placeholderMode?: 'normal' | 'permanent';
20
21
  placeholder?: string;
21
22
  disabled?: boolean;
22
23
  required?: boolean;
@@ -27,7 +28,7 @@ export declare type CheckableSelectFieldExtraProps<V> = {
27
28
  defaultOpen?: boolean;
28
29
  id?: string;
29
30
  };
30
- export declare type CheckableSelectProps<V> = CheckableSelectFieldCoreStaticProps<V> & CheckableSelectFieldExtraProps<V>;
31
+ export type CheckableSelectProps<V> = CheckableSelectFieldCoreStaticProps<V> & CheckableSelectFieldExtraProps<V>;
31
32
  export interface CheckMarkProps {
32
33
  checked: boolean;
33
34
  }
@@ -13,7 +13,7 @@ const Checkmark = ({ checked }) => {
13
13
  return checked ? React.createElement(Check, { className: classNames }) : React.createElement(Minus, { className: classNames });
14
14
  };
15
15
  export const CheckableSelectField = (props) => {
16
- const { options, onChange, value, size = 'small', placeholder = 'Search', label, showAriaLabel, disabled, helperText, className, error, onBlur, name, required, defaultOpen = false, 'data-test': dataTest, allSelectedLabel = 'All selected', noneSelectedLabel = 'None selected', noOptionsMessage = 'No options', id: rootId, } = props;
16
+ const { options, onChange, value, size = 'small', placeholder = 'Search', placeholderMode = 'normal', label, showAriaLabel, disabled, helperText, className, error, onBlur, name, required, defaultOpen = false, 'data-test': dataTest, allSelectedLabel = 'All selected', noneSelectedLabel = 'None selected', noOptionsMessage = 'No options', id: rootId, } = props;
17
17
  const id = useUID();
18
18
  const { isOpen, toggle, close } = useOpenCloseState(defaultOpen);
19
19
  const [searchValue, setSearchValue] = useState('');
@@ -30,6 +30,9 @@ export const CheckableSelectField = (props) => {
30
30
  return options.filter(({ label }) => label.toLowerCase().includes(value));
31
31
  }, [options, searchValue]);
32
32
  const getValueLabel = () => {
33
+ if (placeholderMode === 'permanent') {
34
+ return placeholder;
35
+ }
33
36
  if (value.length === 0) {
34
37
  return noneSelectedLabel;
35
38
  }
@@ -39,7 +42,9 @@ export const CheckableSelectField = (props) => {
39
42
  return `${value.length} selected`;
40
43
  };
41
44
  return (React.createElement(React.Fragment, null,
42
- React.createElement(TextField, { size: size, name: name, id: rootId || id, onClick: toggle, onKeyPress: handleKeyPress, mRef: setAnchorElement, onChange: () => null, label: label || '', disabled: disabled, showAriaLabel: showAriaLabel, helperText: helperText, className: cls(className, styles.opener), error: error, onBlur: onBlur, readOnly: true, required: required, "data-test": `${dataTest}-opener`, value: getValueLabel(), inputTrailingIconLabel: isOpen ? 'Close' : 'Open', inputTrailingIcon: isOpen ? ChevronUp : ChevronDown }),
45
+ React.createElement(TextField, { size: size, name: name, id: rootId || id, onClick: toggle, onKeyPress: handleKeyPress, mRef: setAnchorElement, onChange: () => null, label: label || '', disabled: disabled, showAriaLabel: showAriaLabel, helperText: helperText, className: cls(className, styles.opener, {
46
+ [styles.withPermanentPlaceholder]: placeholderMode === 'permanent',
47
+ }), error: error, onBlur: onBlur, readOnly: true, required: required, "data-test": `${dataTest}-opener`, value: getValueLabel(), inputTrailingIconLabel: isOpen ? 'Close' : 'Open', inputTrailingIcon: isOpen ? ChevronUp : ChevronDown }),
43
48
  React.createElement(Popover, { matchReferenceSize: true, anchorElement: anchorElement, open: isOpen, onClose: close, className: styles.panel, onUpdateLayout: () => setForceUpdateToken((token) => token + 1) },
44
49
  React.createElement("div", { className: styles.dropdown, "data-test": `${dataTest}-dropdown` },
45
50
  React.createElement(TextField, { size: size, iconSize: "medium", className: styles.search, name: "checkable-select-search", "data-test": `${dataTest}-search`, onChange: (e) => setSearchValue(e.target.value), value: searchValue, label: "", disabled: disabled, placeholder: placeholder }),
@@ -1 +1 @@
1
- {"version":3,"file":"CheckableSelectField.js","sourceRoot":"","sources":["../../src/Select/CheckableSelectField.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"CheckableSelectField.js","sourceRoot":"","sources":["../../src/Select/CheckableSelectField.tsx"],"names":[],"mappings":"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"}
@@ -2,13 +2,19 @@
2
2
  @use '../../styles/helpers' as h;
3
3
 
4
4
  .panel {
5
- z-index: c.$zIndex200;
5
+ z-index: c.$zIndex2000;
6
6
  }
7
7
 
8
8
  .opener {
9
9
  input {
10
10
  cursor: pointer;
11
11
  }
12
+
13
+ &.withPermanentPlaceholder {
14
+ input {
15
+ color: c.$colorTextSecondary;
16
+ }
17
+ }
12
18
  }
13
19
 
14
20
  .dropdown {
@@ -45,7 +51,7 @@
45
51
  margin-bottom: c.$grid * 2.5;
46
52
  overflow: hidden;
47
53
 
48
- &:focus {
54
+ &:focus-visible {
49
55
  @include h.outlineFormField;
50
56
  }
51
57
  }
@@ -74,8 +80,8 @@
74
80
 
75
81
  &.checked {
76
82
  color: c.$colorNeutralWhite;
77
- background-color: c.$colorSuccessLight;
78
- border-color: c.$colorSuccessLight;
83
+ background-color: c.$colorSuccess;
84
+ border-color: c.$colorSuccess;
79
85
  }
80
86
  }
81
87
 
@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
2
2
  import { CheckableSelectFieldExtraProps } from './CheckableSelectField';
3
3
  import { FieldValidatorGeneric } from '../utils/formik';
4
4
  import { ExtractKeysOfValueType } from '../utils/types';
5
- export declare type CheckableSelectFieldFormikProps<V extends object, OV = string> = CheckableSelectFieldExtraProps<OV> & {
5
+ export type CheckableSelectFieldFormikProps<V extends object, OV = string> = CheckableSelectFieldExtraProps<OV> & {
6
6
  name: ExtractKeysOfValueType<V, OV[]>;
7
7
  validate?: FieldValidatorGeneric<OV[]>;
8
8
  onChange?: (value: OV[]) => void;
@@ -1,11 +1,11 @@
1
1
  import React, { ReactNode } from 'react';
2
- export declare type RenderMenuFooterFunction = () => ReactNode;
2
+ export type RenderMenuFooterFunction = () => ReactNode;
3
3
  export declare const components: {
4
- DropdownIndicator: React.FunctionComponent<import("react-select").IndicatorProps<any>>;
5
- ClearIndicator: React.FunctionComponent<import("react-select").IndicatorProps<any>>;
4
+ DropdownIndicator: React.FunctionComponent<import("react-select").IndicatorProps<any, boolean>>;
5
+ ClearIndicator: React.FunctionComponent<import("react-select").IndicatorProps<any, boolean>>;
6
6
  Input: React.FunctionComponent<import("react-select").InputProps>;
7
- MenuList: React.FunctionComponent<import("react-select").MenuListComponentProps<any>>;
8
- IndicatorSeparator: React.FunctionComponent<import("react-select").IndicatorProps<any>>;
9
- Option: React.FunctionComponent<import("react-select").OptionProps<any>>;
7
+ MenuList: React.FunctionComponent<import("react-select").MenuListComponentProps<any, boolean>>;
8
+ IndicatorSeparator: React.FunctionComponent<import("react-select").IndicatorProps<any, boolean>>;
9
+ Option: React.FunctionComponent<import("react-select").OptionProps<any, boolean>>;
10
10
  SingleValue: React.FunctionComponent<import("react-select").SingleValueProps<any>>;
11
11
  };
@@ -4,25 +4,25 @@ import { DataTestProp } from '@hazelcast/helpers';
4
4
  import { SelectFieldOption } from './helpers';
5
5
  import { RenderMenuFooterFunction } from './Common';
6
6
  import { FieldHeaderProps } from '../FieldHeader';
7
- export declare type MultiSelectFieldCoreStaticProps<V> = {
7
+ export type MultiSelectFieldCoreStaticProps<V> = {
8
8
  name: string;
9
9
  onBlur?: (e: FocusEvent<HTMLElement>) => void;
10
10
  error?: string;
11
11
  value: V[];
12
12
  onChange: (newValue: V[]) => void;
13
- components?: Partial<SelectComponentsConfig<SelectFieldOption<V>>>;
13
+ components?: Partial<SelectComponentsConfig<SelectFieldOption<V>, true>>;
14
14
  };
15
- export declare type MultiSelectFieldExtraProps<V> = {
15
+ export type MultiSelectFieldExtraProps<V> = {
16
16
  options: GroupedOptionsType<SelectFieldOption<V>> | OptionsType<SelectFieldOption<V>>;
17
17
  isCreatable?: V extends string ? boolean : false;
18
18
  className?: string;
19
19
  placeholder?: string;
20
20
  errorClassName?: string;
21
21
  menuPortalTarget?: 'body' | 'self' | HTMLElement | null;
22
- formatGroupLabel?: ReactSelectProps<SelectFieldOption<V>>['formatGroupLabel'];
23
- formatOptionLabel?: ReactSelectProps<SelectFieldOption<V>>['formatOptionLabel'];
22
+ formatGroupLabel?: ReactSelectProps<SelectFieldOption<V>, true>['formatGroupLabel'];
23
+ formatOptionLabel?: ReactSelectProps<SelectFieldOption<V>, true>['formatOptionLabel'];
24
24
  renderMenuFooter?: RenderMenuFooterFunction;
25
- styles?: ReactSelectProps<SelectFieldOption<V>>['styles'];
25
+ styles?: ReactSelectProps<SelectFieldOption<V>, true>['styles'];
26
26
  } & DataTestProp & Pick<InputHTMLAttributes<HTMLElement>, 'autoFocus' | 'disabled' | 'required' | 'placeholder'> & Pick<ReactSelectProps, 'isSearchable' | 'menuIsOpen' | 'menuPlacement' | 'noOptionsMessage' | 'inputValue' | 'closeMenuOnSelect' | 'hideSelectedOptions' | 'isClearable' | 'onInputChange'> & Omit<FieldHeaderProps, 'id'>;
27
- export declare type MultiSelectProps<V> = MultiSelectFieldCoreStaticProps<V> & MultiSelectFieldExtraProps<V>;
27
+ export type MultiSelectProps<V> = MultiSelectFieldCoreStaticProps<V> & MultiSelectFieldExtraProps<V>;
28
28
  export declare const MultiSelectField: <V extends string | number = number>(props: MultiSelectProps<V>) => React.ReactElement<MultiSelectProps<V>, string | React.JSXElementConstructor<any>>;
@@ -10,6 +10,7 @@ import { Icon } from '../Icon';
10
10
  import { getMenuContainer, getOptionsMap } from './helpers';
11
11
  import { components } from './Common';
12
12
  import { FieldHeader } from '../FieldHeader';
13
+ import { useCloseOnResize } from '../hooks/useCloseOnResize';
13
14
  import styles from './SelectField.module.scss';
14
15
  import multiStyles from './MultiSelectField.module.scss';
15
16
  // Self styled version of the MultiValue/Label
@@ -52,9 +53,10 @@ export const MultiSelectField = (props) => {
52
53
  const selectRef = useRef();
53
54
  useEffect(() => {
54
55
  if (selectRef.current) {
55
- menuIsOpen ? selectRef.current.focus() : selectRef.current.blur();
56
+ menuIsOpen ? selectRef.current.onMenuOpen() : selectRef.current.onMenuClose();
56
57
  }
57
58
  }, [menuIsOpen]);
59
+ useCloseOnResize(selectRef);
58
60
  const selectProps = {
59
61
  ref: selectRef,
60
62
  inputId: id,
@@ -1 +1 @@
1
- {"version":3,"file":"MultiSelectField.js","sourceRoot":"","sources":["../../src/Select/MultiSelectField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiD,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACrH,OAAO,WAAW,EAAE,EAElB,UAAU,IAAI,YAAY,GAM3B,MAAM,cAAc,CAAA;AACrB,OAAO,oBAAoB,MAAM,wBAAwB,CAAA;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AACjC,OAAO,yBAAyB,MAAM,yCAAyC,CAAA;AAC/E,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAqB,gBAAgB,EAAE,aAAa,EAAyB,MAAM,WAAW,CAAA;AACrG,OAAO,EAAE,UAAU,EAA4B,MAAM,UAAU,CAAA;AAC/D,OAAO,EAAE,WAAW,EAAoB,MAAM,gBAAgB,CAAA;AAE9D,OAAO,MAAM,MAAM,2BAA2B,CAAA;AAC9C,OAAO,WAAW,MAAM,gCAAgC,CAAA;AAExD,8CAA8C;AAC9C,MAAM,eAAe,GAAwC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,6BAAK,SAAS,EAAE,WAAW,CAAC,eAAe,IAAG,QAAQ,CAAO,CAAA;AAE5I,sDAAsD;AACtD,MAAM,gBAAgB,GAAyC,CAAC,KAAK,EAAE,EAAE;IACvE,mCAAmC;IACnC,gHAAgH;IAChH,MAAM,OAAO,GAA4B,KAAK,CAAC,UAAU,CAAC,OAAO,CAAA;IAEjE,MAAM,eAAe,GAAG,CAAC,KAAuB,EAAE,EAAE;QAClD,+BAA+B;QAC/B,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,KAAK,CAAC,eAAe,EAAE,CAAA;IACzB,CAAC,CAAA;IAED,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;QAC9C,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,OAAO,IAAI,OAAO,CAAC,KAAK,CAAC,CAAA;IACjD,CAAC,CAAA;IAED,OAAO;IACL,iEAAiE;IACjE,6BACE,SAAS,EAAE,EAAE,CAAC,WAAW,CAAC,gBAAgB,EAAE,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,EAC7E,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,eAAe,EAC5B,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC,gBACD,QAAQ;QAEnB,oBAAC,IAAI,IAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAC,OAAO,EAAC,UAAU,SAAG,CACrC,CACP,CAAA;AACH,CAAC,CAAA;AAED,2CAA2C;AAC3C,MAAM,UAAU,GAAmC,CAAC,KAAK,EAAE,EAAE,CAAC,CAC5D,oBAAC,YAAY,CAAC,UAAU,OAClB,KAAK,EACT,SAAS,EAAE,EAAE,CAAC,WAAW,CAAC,UAAU,EAAE,EAAE,CAAC,WAAW,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC,GACvI,CACH,CAAA;AAyCD,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAqC,KAA0B,EAAqC,EAAE;IACpI,MAAM,EACJ,WAAW,EAAE,QAAQ,EACrB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,cAAc,EACd,UAAU,EACV,WAAW,EACX,YAAY,GAAG,IAAI,EACnB,KAAK,EACL,cAAc,EACd,aAAa,GAAG,KAAK,EACrB,UAAU,EACV,gBAAgB,GAAG,MAAM,EACzB,aAAa,GAAG,MAAM,EACtB,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,WAAW,EACX,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,UAAU,EAAE,gBAAgB,EAC5B,GAAG,IAAI,EACR,GAAG,KAAK,CAAA;IACT,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;IAEnB,yBAAyB,CAAC,GAAG,EAAE;QAC7B,MAAM,aAAa,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAA;QAExD,IAAI,aAAa,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE;YAC5E,aAAa,CAAC,SAAS,GAAG,GAAG,aAAa,CAAC,SAAS,IAAI,MAAM,CAAC,aAAa,EAAE,CAAA;SAC/E;IACH,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAA;IAEtB,MAAM,UAAU,GAAG,OAAO,CAA2B,GAAG,EAAE,CAAC,aAAa,CAAI,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEhG,MAAM,eAAe,GAAG,OAAO,CAC7B,GAAG,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,WAAC,OAAA,MAAA,UAAU,CAAC,GAAG,CAAC,mCAAI,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAA,EAAA,CAAC,EACvE,CAAC,UAAU,EAAE,KAAK,CAAC,CACpB,CAAA;IAED,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,eAAgD,EAAE,EAAE;QACnD,QAAQ,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IACrD,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAA;IAED,iEAAiE;IACjE,MAAM,SAAS,GAAG,MAAM,EAAe,CAAA;IACvC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,CAAC,OAAO,EAAE;YACrB,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,CAAA;SAClE;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,MAAM,WAAW,GAA2C;QAC1D,GAAG,EAAE,SAAS;QACd,OAAO,EAAE,EAAE;QACX,SAAS,EAAE,iBAAiB;QAC5B,eAAe,EAAE,iBAAiB;QAClC,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;QAC/C,mHAAmH;QACnH,mBAAmB,EAAE,KAAK,IAAI,OAAO,CAAC,EAAE,CAAC;QACzC,cAAc,EAAE,CAAC,CAAC,KAAK;QACvB,eAAe,EAAE,QAAQ;QACzB,UAAU,EAAE,QAAQ;QACpB,YAAY,EAAE,YAAY;QAC1B,WAAW,EAAE,IAAI;QACjB,OAAO,EAAE,IAAI;QACb,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,eAAe;QACtB,OAAO;QACP,QAAQ,EAAE,eAA6G;QACvH,WAAW;QACX,UAAU;QACV,aAAa;QACb,gBAAgB,EAAE,gBAAgB,CAAC,gBAAgB,CAAC;QACpD,UAAU,EAAE;YACV,eAAe;YACf,gBAAgB;YAChB,UAAU;YACV,GAAG,UAAU;YACb,GAAG,gBAAgB;SACpB;QACD,gBAAgB;QAChB,iBAAiB;QACjB,gBAAgB;QAChB,GAAG,IAAI;KACR,CAAA;IAED,OAAO,CACL,0CACa,QAAQ,EACnB,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,SAAS;QAChB,mEAAmE;QACnE,uHAAuH;QACvH,4GAA4G;QAC5G,MAAM,CAAC,aAAa,EACpB;YACE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,KAAK;YACxB,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK;YACtB,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,OAAO,IAAI,KAAK;YACpC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;YACrC,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;SAC3C,EACD,WAAW,CAAC,cAAc,EAC1B,SAAS,CACV;QAED,oBAAC,WAAW,IACV,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,GAC9B;QACF,6BAAK,SAAS,EAAE,MAAM,CAAC,WAAW,IAC/B,WAAW,CAAC,CAAC,CAAC,CACb,oBAAC,oBAAoB,OAA2B,WAAW,GAAI,CAChE,CAAC,CAAC,CAAC,CACF,oBAAC,WAAW,OAA2B,WAAW,GAAI,CACvD,CACG;QACN,oBAAC,KAAK,IAAC,SAAS,QAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,cAAc,EAAE,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,GAAI,CAChG,CACP,CAAA;AACH,CAAC,CAAA"}
1
+ {"version":3,"file":"MultiSelectField.js","sourceRoot":"","sources":["../../src/Select/MultiSelectField.tsx"],"names":[],"mappings":"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"}
@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
2
2
  import { MultiSelectFieldExtraProps } from './MultiSelectField';
3
3
  import { FieldValidatorGeneric } from '../utils/formik';
4
4
  import { ExtractKeysOfValueType } from '../utils/types';
5
- export declare type MultiSelectFieldFormikProps<V extends object, OV = string> = MultiSelectFieldExtraProps<OV> & {
5
+ export type MultiSelectFieldFormikProps<V extends object, OV = string> = MultiSelectFieldExtraProps<OV> & {
6
6
  name: ExtractKeysOfValueType<V, OV[]>;
7
7
  validate?: FieldValidatorGeneric<OV[]>;
8
8
  onChange?: (value: OV[]) => void;
@@ -5,14 +5,14 @@ import { FieldHeaderProps } from '../FieldHeader';
5
5
  import { IconProps } from '../Icon';
6
6
  import { SelectFieldOption } from './helpers';
7
7
  import { RenderMenuFooterFunction } from './Common';
8
- export declare type SelectFieldCoreStaticProps<V> = {
8
+ export type SelectFieldCoreStaticProps<V> = {
9
9
  name: string;
10
10
  onBlur?: (e: FocusEvent<HTMLElement>) => void;
11
11
  error?: string;
12
12
  value: V | null;
13
13
  onChange: (value: V | null) => void;
14
14
  };
15
- export declare type SelectFieldIconLeftProps = {
15
+ export type SelectFieldIconLeftProps = {
16
16
  iconLeft: IconProps['icon'];
17
17
  iconLeftAriaLabel: string;
18
18
  iconLeftClassName?: string;
@@ -23,8 +23,8 @@ export declare type SelectFieldIconLeftProps = {
23
23
  iconLeftClassName?: never;
24
24
  iconLeftContainerClassName?: never;
25
25
  };
26
- declare type SelectFieldSize = 'small' | 'medium';
27
- export declare type SelectFieldExtraProps<V> = {
26
+ export type SelectFieldSize = 'small' | 'medium';
27
+ export type SelectFieldExtraProps<V> = {
28
28
  options: GroupedOptionsType<SelectFieldOption<V>> | OptionsType<SelectFieldOption<V>>;
29
29
  size?: SelectFieldSize;
30
30
  isCreatable?: V extends string ? boolean : false;
@@ -37,7 +37,6 @@ export declare type SelectFieldExtraProps<V> = {
37
37
  renderMenuFooter?: RenderMenuFooterFunction;
38
38
  styles?: ReactSelectProps<SelectFieldOption<V>>['styles'];
39
39
  singleValueTooltipVisible?: boolean;
40
- } & DataTestProp & Pick<InputHTMLAttributes<HTMLElement>, 'autoFocus' | 'disabled' | 'required' | 'placeholder'> & Pick<ReactSelectProps, 'isSearchable' | 'isClearable' | 'menuIsOpen' | 'menuPlacement' | 'noOptionsMessage' | 'inputValue'> & SelectFieldIconLeftProps & Omit<FieldHeaderProps, 'id'>;
41
- export declare type SelectFieldProps<V> = SelectFieldCoreStaticProps<V> & SelectFieldExtraProps<V>;
40
+ } & DataTestProp & Pick<InputHTMLAttributes<HTMLElement>, 'autoFocus' | 'disabled' | 'required' | 'placeholder'> & Pick<ReactSelectProps, 'isSearchable' | 'isClearable' | 'menuIsOpen' | 'menuPlacement' | 'closeMenuOnScroll' | 'noOptionsMessage' | 'inputValue'> & SelectFieldIconLeftProps & Omit<FieldHeaderProps, 'id'>;
41
+ export type SelectFieldProps<V> = SelectFieldCoreStaticProps<V> & SelectFieldExtraProps<V>;
42
42
  export declare const SelectField: <V extends string | number = string>(props: SelectFieldProps<V>) => React.ReactElement<SelectFieldProps<V>, string | React.JSXElementConstructor<any>>;
43
- export {};
@@ -9,8 +9,9 @@ import { FieldHeader } from '../FieldHeader';
9
9
  import { Icon } from '../Icon';
10
10
  import { getMenuContainer, getOptionsMap } from './helpers';
11
11
  import { components } from './Common';
12
- import styles from './SelectField.module.scss';
13
12
  import { components as rsComponents } from 'react-select';
13
+ import { useCloseOnResize } from '../hooks/useCloseOnResize';
14
+ import styles from './SelectField.module.scss';
14
15
  export const SelectField = (props) => {
15
16
  const { 'data-test': dataTest, className, disabled, error, errorClassName, helperText, isClearable = false, isCreatable, isSearchable = true, label, labelClassName, showAriaLabel = false, size = 'medium', menuIsOpen, menuPortalTarget = 'body', menuPlacement = 'auto', name, onChange, options, placeholder, required, value, formatGroupLabel, formatOptionLabel, renderMenuFooter, singleValueTooltipVisible = true, ...iconAndRest } = props;
16
17
  const id = useUID();
@@ -37,7 +38,7 @@ export const SelectField = (props) => {
37
38
  const selectRef = useRef();
38
39
  useEffect(() => {
39
40
  if (selectRef.current) {
40
- menuIsOpen ? selectRef.current.focus() : selectRef.current.blur();
41
+ menuIsOpen ? selectRef.current.onMenuOpen() : selectRef.current.onMenuClose();
41
42
  }
42
43
  }, [menuIsOpen]);
43
44
  const innerComponents = useMemo(() => singleValueTooltipVisible
@@ -46,12 +47,13 @@ export const SelectField = (props) => {
46
47
  ...components,
47
48
  SingleValue: rsComponents.SingleValue,
48
49
  }, [singleValueTooltipVisible]);
50
+ useCloseOnResize(selectRef);
49
51
  const selectProps = {
50
52
  ref: selectRef,
51
53
  inputId: id,
52
54
  className: 'hz-select-field',
53
55
  classNamePrefix: 'hz-select-field',
54
- 'aria-label': showAriaLabel ? label : undefined,
56
+ 'aria-label': showAriaLabel ? label : 'select',
55
57
  // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute
56
58
  'aria-errormessage': error && errorId(id),
57
59
  'aria-invalid': !!error,
@@ -1 +1 @@
1
- {"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../../src/Select/SelectField.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../../src/Select/SelectField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiD,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACrH,OAAO,WAAkG,MAAM,cAAc,CAAA;AAC7H,OAAO,oBAAoB,MAAM,wBAAwB,CAAA;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,yBAAyB,MAAM,yCAAyC,CAAA;AAC/E,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AACzC,OAAO,EAAE,WAAW,EAAoB,MAAM,gBAAgB,CAAA;AAC9D,OAAO,EAAE,IAAI,EAAa,MAAM,SAAS,CAAA;AACzC,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAA4C,MAAM,WAAW,CAAA;AACrG,OAAO,EAAE,UAAU,EAA4B,MAAM,UAAU,CAAA;AAC/D,OAAO,EAAE,UAAU,IAAI,YAAY,EAAE,MAAM,cAAc,CAAA;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAE5D,OAAO,MAAM,MAAM,2BAA2B,CAAA;AAoD9C,MAAM,CAAC,MAAM,WAAW,GAAG,CAAqC,KAA0B,EAAqC,EAAE;IAC/H,MAAM,EACJ,WAAW,EAAE,QAAQ,EACrB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,cAAc,EACd,UAAU,EACV,WAAW,GAAG,KAAK,EACnB,WAAW,EACX,YAAY,GAAG,IAAI,EACnB,KAAK,EACL,cAAc,EACd,aAAa,GAAG,KAAK,EACrB,IAAI,GAAG,QAAQ,EACf,UAAU,EACV,gBAAgB,GAAG,MAAM,EACzB,aAAa,GAAG,MAAM,EACtB,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,WAAW,EACX,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,yBAAyB,GAAG,IAAI,EAChC,GAAG,WAAW,EACf,GAAG,KAAK,CAAA;IACT,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;IAEnB,MAAM,EAAE,QAAQ,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,GAAG,IAAI,EAAE,GAAG,WAAW,CAAA;IAE3G,yBAAyB,CAAC,GAAG,EAAE;QAC7B,MAAM,aAAa,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAA;QAExD,IAAI,aAAa,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE;YAC5E,aAAa,CAAC,SAAS,GAAG,GAAG,aAAa,CAAC,SAAS,IAAI,MAAM,CAAC,aAAa,EAAE,CAAA;SAC/E;IACH,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAA;IAEtB,MAAM,UAAU,GAAG,OAAO,CAA2B,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAE7F;;;;;OAKG;IACH,MAAM,cAAc,GAAG,OAAO,CAC5B,GAAG,EAAE,WAAC,OAAA,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAA,UAAU,CAAC,KAAK,CAAC,mCAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAA,EAAA,EACnF,CAAC,UAAU,EAAE,KAAK,CAAC,CACpB,CAAA;IAED,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,MAAmC,EAAE,EAAE;;QACtC,QAAQ,CAAC,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,mCAAI,IAAI,CAAC,CAAA;IACjC,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAA;IAED,iEAAiE;IACjE,MAAM,SAAS,GAAG,MAAM,EAAe,CAAA;IACvC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,CAAC,OAAO,EAAE;YACrB,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,WAAW,EAAE,CAAA;SAC9E;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,MAAM,eAAe,GAAG,OAAO,CAC7B,GAAG,EAAE,CACH,yBAAyB;QACvB,CAAC,CAAC,UAAU;QACZ,CAAC,CAAC;YACE,GAAG,UAAU;YACb,WAAW,EAAE,YAAY,CAAC,WAAW;SACtC,EACP,CAAC,yBAAyB,CAAC,CAC5B,CAAA;IAED,gBAAgB,CAAC,SAAS,CAAC,CAAA;IAE3B,MAAM,WAAW,GAA2C;QAC1D,GAAG,EAAE,SAAS;QACd,OAAO,EAAE,EAAE;QACX,SAAS,EAAE,iBAAiB;QAC5B,eAAe,EAAE,iBAAiB;QAClC,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;QAC9C,mHAAmH;QACnH,mBAAmB,EAAE,KAAK,IAAI,OAAO,CAAC,EAAE,CAAC;QACzC,cAAc,EAAE,CAAC,CAAC,KAAK;QACvB,eAAe,EAAE,QAAQ;QACzB,WAAW;QACX,YAAY;QACZ,UAAU,EAAE,QAAQ;QACpB,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,cAAc;QACrB,OAAO;QACP,QAAQ,EAAE,eAAoH;QAC9H,WAAW;QACX,UAAU;QACV,aAAa;QACb,gBAAgB,EAAE,gBAAgB,CAAC,gBAAgB,CAAC;QACpD,UAAU,EAAE,eAAe;QAC3B,gBAAgB;QAChB,iBAAiB;QACjB,gBAAgB;QAChB,GAAG,IAAI;KACR,CAAA;IAED,OAAO,CACL,0CACa,QAAQ,EACnB,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,SAAS;QAChB,mEAAmE;QACnE,uHAAuH;QACvH,4GAA4G;QAC5G,MAAM,CAAC,aAAa,EACpB;YACE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,KAAK;YACxB,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK;YACtB,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,QAAQ;YAC5B,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;YAChC,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,OAAO,IAAI,KAAK;SACrC,EACD,SAAS,CACV;QAED,oBAAC,WAAW,IACV,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,GAC9B;QACF,6BAAK,SAAS,EAAE,MAAM,CAAC,WAAW;YAC/B,QAAQ,IAAI,iBAAiB,IAAI,CAChC,oBAAC,IAAI,IACH,kBAAkB,EAAE,EAAE,CAAC,MAAM,CAAC,iBAAiB,EAAE,0BAA0B,CAAC,EAC5E,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,iBAAiB,eAClB,wBAAwB,EAClC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,iBAAiB,CAAC,GACjD,CACH;YACA,WAAW,CAAC,CAAC,CAAC,CACb,oBAAC,oBAAoB,OAA2B,WAAW,GAAI,CAChE,CAAC,CAAC,CAAC,CACF,oBAAC,WAAW,OAA2B,WAAW,GAAI,CACvD,CACG;QACN,oBAAC,KAAK,IAAC,SAAS,QAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,cAAc,EAAE,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,GAAI,CAChG,CACP,CAAA;AACH,CAAC,CAAA"}
@@ -31,7 +31,6 @@ $selectGroupHeading: ':global .hz-select-field__group-heading';
31
31
 
32
32
  #{$selectContainer} {
33
33
  flex: 1 1 auto;
34
- overflow: hidden;
35
34
 
36
35
  @include c.typographyBodySmall;
37
36
  }
@@ -49,7 +48,7 @@ $selectGroupHeading: ':global .hz-select-field__group-heading';
49
48
  box-sizing: border-box;
50
49
  border: c.$borderWidth solid c.$colorNeutralLight;
51
50
  border-radius: c.$borderRadius;
52
- background-color: c.$colorNeutralLighter;
51
+ background-color: c.$colorOverlayBackground;
53
52
  transition: none;
54
53
  }
55
54
 
@@ -75,6 +74,10 @@ $selectGroupHeading: ':global .hz-select-field__group-heading';
75
74
  #{$selectControl} {
76
75
  border-color: c.$colorError;
77
76
  }
77
+
78
+ label {
79
+ color: c.$colorError;
80
+ }
78
81
  }
79
82
 
80
83
  // We target select control specifically to avoid applying hover styles when hovering helper icon
@@ -94,7 +97,6 @@ $selectGroupHeading: ':global .hz-select-field__group-heading';
94
97
  flex-direction: row;
95
98
  align-items: center;
96
99
  position: relative;
97
- overflow: hidden;
98
100
 
99
101
  .iconLeftContainer {
100
102
  .iconLeft {
@@ -134,7 +136,7 @@ $selectGroupHeading: ':global .hz-select-field__group-heading';
134
136
  margin-bottom: $menuMargin;
135
137
  border: c.$borderWidth solid c.$colorNeutralLight;
136
138
  border-radius: c.$borderRadius;
137
- background-color: c.$colorNeutralLighter;
139
+ background-color: c.$colorOverlayBackground;
138
140
  overflow: hidden;
139
141
  box-shadow: 0 c.$selectMenuShadowSize c.$selectMenuShadowBlur 0 c.$colorShadow;
140
142
  z-index: c.$zIndex1000;
@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
2
2
  import { SelectFieldExtraProps } from './SelectField';
3
3
  import { FieldValidatorGeneric } from '../utils/formik';
4
4
  import { ExtractKeysOfValueType } from '../utils/types';
5
- export declare type SelectFieldFormikProps<V extends object, OV = string> = SelectFieldExtraProps<OV> & {
5
+ export type SelectFieldFormikProps<V extends object, OV = string> = SelectFieldExtraProps<OV> & {
6
6
  name: ExtractKeysOfValueType<V, OV | null>;
7
7
  validate?: FieldValidatorGeneric<OV | null>;
8
8
  onChange?: (value: OV | null) => void;
@@ -1,9 +1,9 @@
1
1
  import { GroupedOptionsType, OptionsType } from 'react-select';
2
- export declare type SelectFieldOption<V> = {
2
+ export type SelectFieldOption<V> = {
3
3
  label: string;
4
4
  value: V;
5
5
  };
6
- export declare type SelectFieldOptionsMap<V> = {
6
+ export type SelectFieldOptionsMap<V> = {
7
7
  [key: string]: SelectFieldOption<V>;
8
8
  };
9
9
  export declare const getOptionsMap: <V extends string | number>(options: OptionsType<SelectFieldOption<V>> | GroupedOptionsType<SelectFieldOption<V>>) => SelectFieldOptionsMap<V>;
@@ -1,5 +1,5 @@
1
1
  import { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
2
- export declare type SimpleTableProps = HTMLAttributes<HTMLTableElement>;
2
+ export type SimpleTableProps = HTMLAttributes<HTMLTableElement>;
3
3
  export declare const SimpleTable: {
4
4
  (props: SimpleTableProps): JSX.Element;
5
5
  Body(props: HTMLAttributes<HTMLTableSectionElement>): JSX.Element;
package/lib/Slider.d.ts CHANGED
@@ -1,20 +1,20 @@
1
1
  import { ChangeEvent, ReactNode } from 'react';
2
2
  import { DataTestProp } from '@hazelcast/helpers';
3
- export declare type SliderValue = number | [number, number];
4
- declare type SliderMark = {
3
+ export type SliderValue = number | [number, number];
4
+ type SliderMark = {
5
5
  value: number;
6
6
  label: ReactNode;
7
7
  };
8
- declare type ChangeEventType = ChangeEvent<HTMLInputElement> | MouseEvent;
9
- declare type SingleValueChangeFn = (val: number, e?: ChangeEventType) => void;
10
- declare type MultiValueChangeFn = (val: [number, number], e?: ChangeEventType) => void;
11
- export declare type SliderCoreProps<T extends SliderValue> = {
8
+ type ChangeEventType = ChangeEvent<HTMLInputElement> | MouseEvent;
9
+ type SingleValueChangeFn = (val: number, e?: ChangeEventType) => void;
10
+ type MultiValueChangeFn = (val: [number, number], e?: ChangeEventType) => void;
11
+ export type SliderCoreProps<T extends SliderValue> = {
12
12
  value: T;
13
13
  onChange: T extends number ? SingleValueChangeFn : MultiValueChangeFn;
14
14
  name: string;
15
15
  error?: string;
16
16
  };
17
- export declare type SliderExtraProps = {
17
+ export type SliderExtraProps = {
18
18
  step?: number;
19
19
  min: number;
20
20
  max: number;
@@ -26,7 +26,7 @@ export declare type SliderExtraProps = {
26
26
  hideValueIndicators?: boolean;
27
27
  formatCurrentValue?: (val: number) => ReactNode;
28
28
  };
29
- declare type SliderProps<T extends SliderValue = number> = SliderExtraProps & SliderCoreProps<T> & Partial<Pick<HTMLInputElement, 'disabled'>> & DataTestProp;
29
+ type SliderProps<T extends SliderValue = number> = SliderExtraProps & SliderCoreProps<T> & Partial<Pick<HTMLInputElement, 'disabled'>> & DataTestProp;
30
30
  /**
31
31
  * Determines the absolute left position of the mark given the markValue
32
32
  * @param markValue - value of the mark
@@ -23,7 +23,7 @@ $currentValueIndicatorHeight: c.$grid * 6;
23
23
 
24
24
  @mixin thumb() {
25
25
  box-shadow: 0 c.$sliderThumbShadowSize c.$sliderThumbShadowBlur c.$colorShadow;
26
- background: c.$colorSuccessLight; // background will represent the dot inside
26
+ background: c.$colorSuccess; // background will represent the dot inside
27
27
  border: c.$sliderThumbBorderSize solid c.$colorNeutralWhite; // the white part will be done by the border
28
28
  box-sizing: content-box; /* and because of all of this, we need content-box */
29
29
  border-radius: 50%;
@@ -162,7 +162,7 @@ ul.markDescriptions {
162
162
  }
163
163
 
164
164
  &.focus,
165
- &:focus {
165
+ &:focus-visible {
166
166
  @include styleThumb {
167
167
  box-shadow: 0 0 0 c.$outlineWidth c.$colorAccessibilityOutline;
168
168
  }
@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
2
2
  import { FieldValidator } from 'formik';
3
3
  import { SliderExtraProps, SliderValue } from './Slider';
4
4
  import { ExtractKeysOfValueType } from './utils/types';
5
- export declare type SliderFormikProps<V extends object> = SliderExtraProps & Partial<Pick<HTMLInputElement, 'disabled'>> & {
5
+ export type SliderFormikProps<V extends object> = SliderExtraProps & Partial<Pick<HTMLInputElement, 'disabled'>> & {
6
6
  name: ExtractKeysOfValueType<V, SliderValue>;
7
7
  validate?: FieldValidator;
8
8
  };
@@ -1,17 +1,25 @@
1
- import { FC } from 'react';
1
+ import { FC, RefObject } from 'react';
2
2
  import { TableCellProps } from 'react-table';
3
- export declare type CellWarningProps = {
3
+ export type CellWarningProps = {
4
4
  align: 'left' | 'right';
5
5
  warning: string;
6
6
  };
7
7
  export declare const CellWarning: FC<CellWarningProps>;
8
- export declare type CellProps = {
8
+ export type CellProps = {
9
9
  /**
10
10
  * Number fields should be right aligned as that allows
11
11
  * you to compare them or add them up quickly in your head.
12
12
  */
13
13
  align?: 'left' | 'right' | 'center';
14
+ selected?: boolean;
14
15
  warning?: string;
15
16
  colSpan?: number;
17
+ cellId?: string;
18
+ selectionStartedRef?: RefObject<boolean>;
19
+ onMouseEnterSelection?: (id: string) => void;
20
+ onClickSelection?: (id: string, modifiers: {
21
+ ctrl: boolean;
22
+ shift: boolean;
23
+ }) => void;
16
24
  } & Omit<TableCellProps, 'key'>;
17
25
  export declare const Cell: FC<CellProps>;