baseui 10.4.0 → 10.7.1

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 (195) hide show
  1. package/app-nav-bar/user-menu.js +1 -0
  2. package/app-nav-bar/user-menu.js.flow +1 -0
  3. package/button/styled-components.js +1 -1
  4. package/button/styled-components.js.flow +4 -1
  5. package/card/styled-components.js +0 -1
  6. package/card/styled-components.js.flow +0 -1
  7. package/combobox/combobox.js +5 -1
  8. package/combobox/combobox.js.flow +4 -0
  9. package/combobox/index.d.ts +6 -3
  10. package/data-table/column-datetime.js +2 -0
  11. package/data-table/column-datetime.js.flow +2 -0
  12. package/datepicker/calendar-header.js +255 -109
  13. package/datepicker/calendar-header.js.flow +282 -145
  14. package/datepicker/calendar.js +6 -1
  15. package/datepicker/calendar.js.flow +5 -1
  16. package/datepicker/constants.js +9 -2
  17. package/datepicker/constants.js.flow +7 -0
  18. package/datepicker/datepicker.js +135 -73
  19. package/datepicker/datepicker.js.flow +161 -62
  20. package/datepicker/day.js +2 -0
  21. package/datepicker/day.js.flow +2 -0
  22. package/datepicker/index.d.ts +8 -0
  23. package/datepicker/month.js +4 -0
  24. package/datepicker/month.js.flow +3 -0
  25. package/datepicker/styled-components.js +116 -56
  26. package/datepicker/styled-components.js.flow +101 -36
  27. package/datepicker/types.js.flow +18 -1
  28. package/datepicker/utils/calendar-header-helpers.js +51 -0
  29. package/datepicker/utils/calendar-header-helpers.js.flow +53 -0
  30. package/datepicker/utils/date-helpers.js +1 -1
  31. package/datepicker/utils/date-helpers.js.flow +1 -1
  32. package/datepicker/week.js +1 -0
  33. package/datepicker/week.js.flow +1 -0
  34. package/dnd-list/index.js.flow +2 -1
  35. package/dnd-list/list.js +1 -2
  36. package/dnd-list/list.js.flow +1 -1
  37. package/dnd-list/styled-components.js +1 -1
  38. package/dnd-list/styled-components.js.flow +1 -0
  39. package/drawer/drawer.js +2 -1
  40. package/drawer/drawer.js.flow +1 -1
  41. package/es/app-nav-bar/user-menu.js +1 -0
  42. package/es/button/styled-components.js +1 -1
  43. package/es/card/styled-components.js +0 -1
  44. package/es/combobox/combobox.js +5 -1
  45. package/es/data-table/column-datetime.js +2 -0
  46. package/es/datepicker/calendar-header.js +204 -93
  47. package/es/datepicker/calendar.js +7 -2
  48. package/es/datepicker/constants.js +6 -1
  49. package/es/datepicker/datepicker.js +70 -42
  50. package/es/datepicker/day.js +2 -0
  51. package/es/datepicker/month.js +3 -0
  52. package/es/datepicker/styled-components.js +98 -37
  53. package/es/datepicker/types.js +1 -1
  54. package/es/datepicker/utils/calendar-header-helpers.js +34 -0
  55. package/es/datepicker/utils/date-helpers.js +1 -1
  56. package/es/datepicker/week.js +1 -0
  57. package/es/dnd-list/index.js +2 -1
  58. package/es/dnd-list/list.js +1 -2
  59. package/es/dnd-list/styled-components.js +1 -0
  60. package/es/drawer/drawer.js +2 -1
  61. package/es/helper/helper.js +1 -0
  62. package/es/layer/layer.js +8 -0
  63. package/es/map-marker/constants.js +69 -0
  64. package/es/map-marker/fixed-marker.js +98 -0
  65. package/es/map-marker/floating-marker.js +65 -0
  66. package/es/map-marker/index.js +9 -0
  67. package/es/map-marker/pin-head.js +108 -0
  68. package/es/map-marker/styled-components.js +156 -0
  69. package/es/map-marker/types.js +8 -0
  70. package/es/menu/maybe-child-menu.js +1 -0
  71. package/es/popover/popover.js +6 -5
  72. package/es/popover/stateful-container.js +8 -2
  73. package/es/rating/emoticon-rating.js +3 -1
  74. package/es/rating/star-rating.js +3 -1
  75. package/es/select/select-component.js +20 -5
  76. package/es/select/styled-components.js +34 -4
  77. package/es/snackbar/snackbar-context.js +16 -4
  78. package/es/table-semantic/styled-components.js +6 -4
  79. package/es/table-semantic/table-builder.js +3 -0
  80. package/es/themes/dark-theme/color-component-tokens.js +1 -1
  81. package/es/themes/light-theme/color-component-tokens.js +9 -9
  82. package/es/themes/shared/lighting.js +5 -1
  83. package/es/timepicker/timepicker.js +16 -11
  84. package/es/tooltip/styled-components.js +8 -0
  85. package/es/tooltip/tooltip.js +1 -0
  86. package/esm/app-nav-bar/user-menu.js +1 -0
  87. package/esm/button/styled-components.js +1 -1
  88. package/esm/card/styled-components.js +0 -1
  89. package/esm/combobox/combobox.js +5 -1
  90. package/esm/data-table/column-datetime.js +2 -0
  91. package/esm/datepicker/calendar-header.js +255 -110
  92. package/esm/datepicker/calendar.js +7 -2
  93. package/esm/datepicker/constants.js +6 -1
  94. package/esm/datepicker/datepicker.js +136 -74
  95. package/esm/datepicker/day.js +2 -0
  96. package/esm/datepicker/month.js +3 -0
  97. package/esm/datepicker/styled-components.js +112 -55
  98. package/esm/datepicker/types.js +1 -1
  99. package/esm/datepicker/utils/calendar-header-helpers.js +45 -0
  100. package/esm/datepicker/utils/date-helpers.js +1 -1
  101. package/esm/datepicker/week.js +1 -0
  102. package/esm/dnd-list/index.js +2 -1
  103. package/esm/dnd-list/list.js +1 -2
  104. package/esm/dnd-list/styled-components.js +1 -1
  105. package/esm/drawer/drawer.js +2 -1
  106. package/esm/helper/helper.js +1 -0
  107. package/esm/layer/layer.js +8 -0
  108. package/esm/map-marker/constants.js +62 -0
  109. package/esm/map-marker/fixed-marker.js +137 -0
  110. package/esm/map-marker/floating-marker.js +94 -0
  111. package/esm/map-marker/index.js +9 -0
  112. package/esm/map-marker/pin-head.js +144 -0
  113. package/esm/map-marker/styled-components.js +168 -0
  114. package/esm/map-marker/types.js +8 -0
  115. package/esm/menu/maybe-child-menu.js +1 -0
  116. package/esm/popover/popover.js +6 -5
  117. package/esm/popover/stateful-container.js +8 -2
  118. package/esm/rating/emoticon-rating.js +2 -2
  119. package/esm/rating/star-rating.js +2 -2
  120. package/esm/select/select-component.js +19 -5
  121. package/esm/select/styled-components.js +28 -4
  122. package/esm/snackbar/snackbar-context.js +16 -4
  123. package/esm/table-semantic/styled-components.js +6 -4
  124. package/esm/table-semantic/table-builder.js +3 -0
  125. package/esm/themes/dark-theme/color-component-tokens.js +1 -1
  126. package/esm/themes/light-theme/color-component-tokens.js +9 -9
  127. package/esm/themes/shared/lighting.js +5 -1
  128. package/esm/timepicker/timepicker.js +17 -11
  129. package/esm/tooltip/styled-components.js +8 -0
  130. package/esm/tooltip/tooltip.js +1 -0
  131. package/helper/helper.js +1 -0
  132. package/helper/helper.js.flow +1 -0
  133. package/layer/layer.js +8 -0
  134. package/layer/layer.js.flow +9 -0
  135. package/link/index.d.ts +1 -0
  136. package/map-marker/constants.js +82 -0
  137. package/map-marker/constants.js.flow +74 -0
  138. package/map-marker/fixed-marker.js +152 -0
  139. package/map-marker/fixed-marker.js.flow +137 -0
  140. package/map-marker/floating-marker.js +109 -0
  141. package/map-marker/floating-marker.js.flow +102 -0
  142. package/map-marker/index.d.ts +105 -0
  143. package/map-marker/index.js +55 -0
  144. package/map-marker/index.js.flow +23 -0
  145. package/map-marker/package.json +4 -0
  146. package/map-marker/pin-head.js +159 -0
  147. package/map-marker/pin-head.js.flow +155 -0
  148. package/map-marker/styled-components.js +184 -0
  149. package/map-marker/styled-components.js.flow +177 -0
  150. package/map-marker/types.js +11 -0
  151. package/map-marker/types.js.flow +114 -0
  152. package/menu/index.d.ts +7 -0
  153. package/menu/maybe-child-menu.js +1 -0
  154. package/menu/maybe-child-menu.js.flow +1 -0
  155. package/menu/types.js.flow +12 -0
  156. package/modal/index.d.ts +1 -1
  157. package/modal/types.js.flow +4 -1
  158. package/package.json +5 -3
  159. package/popover/index.d.ts +2 -1
  160. package/popover/popover.js +6 -5
  161. package/popover/popover.js.flow +11 -4
  162. package/popover/stateful-container.js +8 -2
  163. package/popover/stateful-container.js.flow +5 -0
  164. package/popover/types.js.flow +6 -1
  165. package/rating/emoticon-rating.js +2 -2
  166. package/rating/emoticon-rating.js.flow +4 -1
  167. package/rating/star-rating.js +2 -2
  168. package/rating/star-rating.js.flow +4 -1
  169. package/select/select-component.js +19 -5
  170. package/select/select-component.js.flow +19 -5
  171. package/select/styled-components.js +28 -4
  172. package/select/styled-components.js.flow +30 -2
  173. package/select/types.js.flow +9 -0
  174. package/snackbar/index.d.ts +21 -16
  175. package/snackbar/snackbar-context.js +15 -4
  176. package/snackbar/snackbar-context.js.flow +15 -3
  177. package/table-semantic/styled-components.js +6 -4
  178. package/table-semantic/styled-components.js.flow +6 -4
  179. package/table-semantic/table-builder.js +3 -0
  180. package/table-semantic/table-builder.js.flow +3 -0
  181. package/themes/dark-theme/color-component-tokens.js +1 -1
  182. package/themes/dark-theme/color-component-tokens.js.flow +1 -1
  183. package/themes/light-theme/color-component-tokens.js +9 -9
  184. package/themes/light-theme/color-component-tokens.js.flow +9 -9
  185. package/themes/shared/lighting.js +5 -1
  186. package/themes/shared/lighting.js.flow +4 -0
  187. package/themes/types.js.flow +4 -0
  188. package/timepicker/index.d.ts +1 -0
  189. package/timepicker/timepicker.js +17 -11
  190. package/timepicker/timepicker.js.flow +31 -12
  191. package/timepicker/types.js.flow +10 -0
  192. package/tooltip/styled-components.js +8 -0
  193. package/tooltip/styled-components.js.flow +8 -0
  194. package/tooltip/tooltip.js +1 -0
  195. package/tooltip/tooltip.js.flow +6 -1
@@ -61,6 +61,15 @@ export function useSnackbar() {
61
61
  dequeue: context.dequeue
62
62
  };
63
63
  }
64
+
65
+ function usePrevious(value) {
66
+ var ref = React.useRef();
67
+ React.useEffect(function () {
68
+ ref.current = value;
69
+ });
70
+ return ref.current;
71
+ }
72
+
64
73
  export default function SnackbarProvider(_ref) {
65
74
  var children = _ref.children,
66
75
  _ref$overrides = _ref.overrides,
@@ -95,10 +104,6 @@ export default function SnackbarProvider(_ref) {
95
104
  function enqueue(elementProps) {
96
105
  var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultDuration;
97
106
  setSnackbars(function (prev) {
98
- if (prev.length === 0) {
99
- enter(duration);
100
- }
101
-
102
107
  return [].concat(_toConsumableArray(prev), [{
103
108
  elementProps: elementProps,
104
109
  duration: duration
@@ -106,6 +111,13 @@ export default function SnackbarProvider(_ref) {
106
111
  });
107
112
  }
108
113
 
114
+ var prevSnackbars = usePrevious(snackbars) || [];
115
+ React.useEffect(function () {
116
+ if (prevSnackbars.length === 0 && snackbars.length >= 1) {
117
+ enter(snackbars[0].duration);
118
+ }
119
+ }, [snackbars, prevSnackbars]);
120
+
109
121
  function dequeue() {
110
122
  setContainerHeight(0);
111
123
  setSnackbars(function (prev) {
@@ -70,7 +70,8 @@ export var StyledTableHeadCell = styled('th', function (_ref5) {
70
70
 
71
71
  var $theme = _ref5.$theme,
72
72
  $size = _ref5.$size,
73
- $divider = _ref5.$divider;
73
+ $divider = _ref5.$divider,
74
+ $isNumeric = _ref5.$isNumeric;
74
75
  var borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
75
76
  var borderVertical = $divider === DIVIDER.grid || $divider === DIVIDER.vertical;
76
77
  var padding = sizeToCellPadding($theme, $size);
@@ -83,7 +84,7 @@ export var StyledTableHeadCell = styled('th', function (_ref5) {
83
84
  paddingLeft: padding,
84
85
  backgroundColor: $theme.colors.tableHeadBackgroundColor,
85
86
  color: $theme.colors.contentPrimary,
86
- textAlign: $theme.direction === 'rtl' ? 'right' : 'left',
87
+ textAlign: $theme.direction === 'rtl' || $isNumeric ? 'right' : 'left',
87
88
  verticalAlign: 'top',
88
89
  whiteSpace: 'nowrap',
89
90
  zIndex: 1
@@ -164,14 +165,15 @@ export var StyledTableBodyCell = styled('td', function (_ref12) {
164
165
  $size = _ref12.$size,
165
166
  $divider = _ref12.$divider,
166
167
  $isNumeric = _ref12.$isNumeric,
167
- $isLastRow = _ref12.$isLastRow;
168
+ $isLastRow = _ref12.$isLastRow,
169
+ $isSortable = _ref12.$isSortable;
168
170
  var borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
169
171
  var borderVertical = $divider === DIVIDER.vertical || $divider === DIVIDER.grid;
170
172
  var borderHorizontal = $divider === undefined || $divider === DIVIDER.horizontal || $divider === DIVIDER.grid;
171
173
  var padding = sizeToCellPadding($theme, $size);
172
174
  return _objectSpread(_objectSpread({}, $theme.typography.font200), {}, {
173
175
  paddingTop: padding,
174
- paddingRight: padding,
176
+ paddingRight: !$isSortable ? padding : $theme.sizing.scale1000,
175
177
  paddingBottom: padding,
176
178
  paddingLeft: padding,
177
179
  color: $theme.colors.contentPrimary,
@@ -200,6 +200,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
200
200
  $col: col,
201
201
  $colIndex: colIndex,
202
202
  $divider: divider,
203
+ $isNumeric: col.numeric,
203
204
  $size: size
204
205
  }, tableHeadCellProps, colTableHeadCellProps), col.header);
205
206
  }
@@ -242,6 +243,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
242
243
  $col: col,
243
244
  $colIndex: colIndex,
244
245
  $divider: divider,
246
+ $isNumeric: col.numeric,
245
247
  role: "button",
246
248
  tabIndex: "0",
247
249
  "aria-label": "".concat(col.tableHeadAriaLabel || col.header, ", ").concat(sortLabel),
@@ -275,6 +277,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
275
277
  $rowIndex: rowIndex,
276
278
  $isNumeric: col.numeric,
277
279
  $isLastRow: rowIndex === lastRowindex,
280
+ $isSortable: col.sortable,
278
281
  $size: size
279
282
  }, tableBodyCellProps, colTableBodyCellProps), col.children(row, rowIndex));
280
283
  }
@@ -93,7 +93,7 @@ export default (function () {
93
93
  linkActive: themePrimitives.primary300,
94
94
  // List
95
95
  listHeaderFill: themePrimitives.mono600,
96
- listBodyFill: themePrimitives.mono700,
96
+ listBodyFill: themePrimitives.mono800,
97
97
  listIconFill: themePrimitives.mono100,
98
98
  listBorder: themePrimitives.mono500,
99
99
  // ProgressSteps
@@ -22,32 +22,32 @@ export default (function () {
22
22
  buttonPrimaryActive: themePrimitives.primary600,
23
23
  buttonPrimarySelectedFill: themePrimitives.primary600,
24
24
  buttonPrimarySelectedText: themePrimitives.white,
25
- buttonPrimarySpinnerForeground: themePrimitives.primary50,
26
- buttonPrimarySpinnerBackground: themePrimitives.primary500,
25
+ buttonPrimarySpinnerForeground: themePrimitives.accent,
26
+ buttonPrimarySpinnerBackground: themePrimitives.primaryB,
27
27
  buttonSecondaryFill: themePrimitives.primary100,
28
28
  buttonSecondaryText: themePrimitives.primary,
29
29
  buttonSecondaryHover: themePrimitives.primary200,
30
30
  buttonSecondaryActive: themePrimitives.primary300,
31
31
  buttonSecondarySelectedFill: themePrimitives.primary300,
32
32
  buttonSecondarySelectedText: themePrimitives.primary,
33
- buttonSecondarySpinnerForeground: themePrimitives.primary700,
34
- buttonSecondarySpinnerBackground: themePrimitives.primary300,
33
+ buttonSecondarySpinnerForeground: themePrimitives.accent,
34
+ buttonSecondarySpinnerBackground: themePrimitives.primaryB,
35
35
  buttonTertiaryFill: 'transparent',
36
36
  buttonTertiaryText: themePrimitives.primary,
37
37
  buttonTertiaryHover: themePrimitives.primary50,
38
38
  buttonTertiaryActive: themePrimitives.primary100,
39
39
  buttonTertiarySelectedFill: themePrimitives.primary100,
40
40
  buttonTertiarySelectedText: themePrimitives.primary,
41
- buttonTertiarySpinnerForeground: themePrimitives.primary700,
42
- buttonTertiarySpinnerBackground: themePrimitives.primary300,
41
+ buttonTertiarySpinnerForeground: themePrimitives.accent,
42
+ buttonTertiarySpinnerBackground: themePrimitives.primary100,
43
43
  buttonMinimalFill: 'transparent',
44
44
  buttonMinimalText: themePrimitives.primary,
45
45
  buttonMinimalHover: themePrimitives.primary50,
46
46
  buttonMinimalActive: themePrimitives.primary100,
47
47
  buttonMinimalSelectedFill: themePrimitives.primary100,
48
48
  buttonMinimalSelectedText: themePrimitives.primary,
49
- buttonMinimalSpinnerForeground: themePrimitives.primary700,
50
- buttonMinimalSpinnerBackground: themePrimitives.primary300,
49
+ buttonMinimalSpinnerForeground: themePrimitives.accent,
50
+ buttonMinimalSpinnerBackground: themePrimitives.primary100,
51
51
  buttonDisabledFill: themePrimitives.mono200,
52
52
  buttonDisabledText: themePrimitives.mono600,
53
53
  buttonDisabledSpinnerForeground: themePrimitives.mono600,
@@ -93,7 +93,7 @@ export default (function () {
93
93
  linkActive: themePrimitives.primary500,
94
94
  // List
95
95
  listHeaderFill: themePrimitives.white,
96
- listBodyFill: themePrimitives.mono200,
96
+ listBodyFill: themePrimitives.white,
97
97
  listIconFill: themePrimitives.mono500,
98
98
  listBorder: themePrimitives.mono500,
99
99
  // ProgressSteps
@@ -15,6 +15,10 @@ var lighting = {
15
15
  overlay300: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.12)',
16
16
  overlay400: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.16)',
17
17
  overlay500: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.2)',
18
- overlay600: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.24)'
18
+ overlay600: 'inset 0 0 0 1000px hsla(0, 0%, 0%, 0.24)',
19
+ shallowAbove: '0px -4px 16px rgba(0, 0, 0, 0.12)',
20
+ shallowBelow: '0px 4px 16px rgba(0, 0, 0, 0.12)',
21
+ deepAbove: '0px -16px 48px rgba(0, 0, 0, 0.22)',
22
+ deepBelow: '0px 16px 48px rgba(0, 0, 0, 0.22)'
19
23
  };
20
24
  export default lighting;
@@ -206,26 +206,31 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
206
206
  _defineProperty(_assertThisInitialized(_this), "getTimeWindowInSeconds", function (step) {
207
207
  var _this$props = _this.props,
208
208
  min = _this$props.minTime,
209
- max = _this$props.maxTime;
209
+ max = _this$props.maxTime,
210
+ ignoreMinMaxDateComponent = _this$props.ignoreMinMaxDateComponent;
210
211
 
211
- var midnight = _this.setTime(_this.props.value, 0, 0, 0);
212
+ var dayStart = _this.setTime(_this.props.value, 0, 0, 0);
212
213
 
213
- if (!min) {
214
- min = midnight;
214
+ var dayEnd = _this.setTime(_this.props.value, 24, 0, 0);
215
+
216
+ if (!min || _this.props.adapter.isBefore(min, dayStart) && !ignoreMinMaxDateComponent) {
217
+ min = dayStart;
218
+ } else {
219
+ min = _this.setTime(_this.props.value, _this.props.adapter.getHours(min), _this.props.adapter.getMinutes(min), _this.props.adapter.getSeconds(min));
215
220
  }
216
221
 
217
- if (!max) {
218
- max = _this.setTime(_this.props.value, 24, 0, 0);
222
+ if (!max || _this.props.adapter.isAfter(max, dayEnd) && !ignoreMinMaxDateComponent) {
223
+ max = dayEnd;
219
224
  } else {
220
- // maxTime (if provided) should be inclusive, so add an extra step here
221
- max = _this.props.adapter.setSeconds(_this.props.adapter.date(max), _this.props.adapter.getSeconds(max) + step);
225
+ max = _this.setTime(_this.props.value, _this.props.adapter.getHours(max), _this.props.adapter.getMinutes(max), // maxTime (if provided) should be inclusive, so add an extra second here
226
+ _this.props.adapter.getSeconds(max) + 1);
222
227
  }
223
228
 
224
229
  var minDate = _this.props.adapter.toJsDate(min);
225
230
 
226
231
  var maxDate = _this.props.adapter.toJsDate(max);
227
232
 
228
- var midnightDate = _this.props.adapter.toJsDate(midnight);
233
+ var midnightDate = _this.props.adapter.toJsDate(dayStart);
229
234
 
230
235
  return {
231
236
  start: (minDate - midnightDate) / 1000,
@@ -312,7 +317,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
312
317
  steps: steps,
313
318
  value: this.props.nullable ? undefined : {
314
319
  id: closestStep,
315
- label: this.secondsToLabel(closestStep, undefined)
320
+ label: this.secondsToLabel(closestStep, this.props.format)
316
321
  }
317
322
  });
318
323
 
@@ -414,7 +419,8 @@ _defineProperty(TimePicker, "defaultProps", {
414
419
  format: '12',
415
420
  step: 900,
416
421
  creatable: false,
417
- adapter: dateFnsAdapter
422
+ adapter: dateFnsAdapter,
423
+ ignoreMinMaxDateComponent: false
418
424
  });
419
425
 
420
426
  export default TimePicker;
@@ -28,6 +28,10 @@ import { getEndPosition } from '../popover/utils.js';
28
28
  export var Body = styled('div', function (props) {
29
29
  return _objectSpread(_objectSpread({}, getBodyStyles(props)), {}, {
30
30
  backgroundColor: props.$theme.colors.tooltipBackground,
31
+ borderTopLeftRadius: props.$theme.borders.radius300,
32
+ borderTopRightRadius: props.$theme.borders.radius300,
33
+ borderBottomRightRadius: props.$theme.borders.radius300,
34
+ borderBottomLeftRadius: props.$theme.borders.radius300,
31
35
  boxShadow: props.$theme.lighting.shadow400,
32
36
  color: props.$theme.colors.tooltipText,
33
37
  // Reset transition property to opacity only, and static transform
@@ -39,6 +43,10 @@ Body.displayName = "Body";
39
43
  export var Inner = styled('div', function (props) {
40
44
  return _objectSpread(_objectSpread(_objectSpread({}, getInnerStyles(props)), {}, {
41
45
  backgroundColor: props.$theme.colors.tooltipBackground,
46
+ borderTopLeftRadius: props.$theme.borders.radius300,
47
+ borderTopRightRadius: props.$theme.borders.radius300,
48
+ borderBottomRightRadius: props.$theme.borders.radius300,
49
+ borderBottomLeftRadius: props.$theme.borders.radius300,
42
50
  paddingTop: props.$theme.sizing.scale300,
43
51
  paddingBottom: props.$theme.sizing.scale300,
44
52
  paddingLeft: props.$theme.sizing.scale600,
@@ -62,6 +62,7 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
62
62
  Inner: StyledInner
63
63
  }, this.props.overrides);
64
64
  return /*#__PURE__*/React.createElement(Popover, _extends({
65
+ autoFocus: false,
65
66
  "data-baseweb": "tooltip"
66
67
  }, this.props, {
67
68
  overrides: overrides
package/helper/helper.js CHANGED
@@ -55,6 +55,7 @@ function Helper(props) {
55
55
  React.createElement(_index.Popover, _extends({
56
56
  "data-baseweb": "helper"
57
57
  }, restProps, {
58
+ autoFocus: false,
58
59
  placement: placement,
59
60
  overrides: mergedOverrides
60
61
  }))
@@ -36,6 +36,7 @@ export function Helper(props: PropsT) {
36
36
  <Popover
37
37
  data-baseweb="helper"
38
38
  {...restProps}
39
+ autoFocus={false}
39
40
  placement={placement}
40
41
  overrides={mergedOverrides}
41
42
  />
package/layer/layer.js CHANGED
@@ -141,6 +141,14 @@ var LayerComponent = /*#__PURE__*/function (_React$Component) {
141
141
  if (host && host !== prevProps.host && prevProps.host === null) {
142
142
  this.addContainer(host);
143
143
  }
144
+
145
+ if (prevProps.isHoverLayer != this.props.isHoverLayer) {
146
+ if (this.props.isHoverLayer) {
147
+ this.context.removeDocClickHandler(this.onDocumentClick);
148
+ } else {
149
+ this.context.addDocClickHandler(this.onDocumentClick);
150
+ }
151
+ }
144
152
  }
145
153
  }, {
146
154
  key: "componentWillUnmount",
@@ -61,9 +61,18 @@ class LayerComponent extends React.Component<
61
61
  if (mountNode) {
62
62
  return;
63
63
  }
64
+
64
65
  if (host && host !== prevProps.host && prevProps.host === null) {
65
66
  this.addContainer(host);
66
67
  }
68
+
69
+ if (prevProps.isHoverLayer != this.props.isHoverLayer) {
70
+ if (this.props.isHoverLayer) {
71
+ this.context.removeDocClickHandler(this.onDocumentClick);
72
+ } else {
73
+ this.context.addDocClickHandler(this.onDocumentClick);
74
+ }
75
+ }
67
76
  }
68
77
 
69
78
  componentWillUnmount() {
package/link/index.d.ts CHANGED
@@ -6,6 +6,7 @@ export interface LinkProps
6
6
  React.AnchorHTMLAttributes<HTMLAnchorElement>,
7
7
  HTMLAnchorElement
8
8
  > {
9
+ animateUnderline?: boolean;
9
10
  target?: '_self' | '_blank' | '_parent' | '_top';
10
11
  }
11
12
 
@@ -0,0 +1,82 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.anchorSize = exports.dragShadowWidth = exports.dragShadowMarginTop = exports.dragShadowHeight = exports.FLOATING_MARKER_ANCHOR_TYPES = exports.FLOATING_MARKER_ANCHOR_POSITIONS = exports.FLOATING_MARKER_SIZES = exports.PINHEAD_TYPES = exports.PINHEAD_DIMENSIONS = exports.xSmallPinheadDimension = exports.PINHEAD_SIZES_SHAPES = exports.NEEDLE_HEIGHTS = exports.NEEDLE_SIZES = void 0;
7
+
8
+ var _Object$freeze, _Object$freeze2;
9
+
10
+ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
11
+
12
+ /*
13
+ Copyright (c) Uber Technologies, Inc.
14
+
15
+ This source code is licensed under the MIT license found in the
16
+ LICENSE file in the root directory of this source tree.
17
+ */
18
+ var NEEDLE_SIZES = Object.freeze({
19
+ none: 'none',
20
+ short: 'short',
21
+ medium: 'medium',
22
+ tall: 'tall'
23
+ });
24
+ exports.NEEDLE_SIZES = NEEDLE_SIZES;
25
+ var NEEDLE_HEIGHTS = Object.freeze((_Object$freeze = {}, _defineProperty(_Object$freeze, NEEDLE_SIZES.none, 0), _defineProperty(_Object$freeze, NEEDLE_SIZES.short, 4), _defineProperty(_Object$freeze, NEEDLE_SIZES.medium, 12), _defineProperty(_Object$freeze, NEEDLE_SIZES.tall, 20), _Object$freeze));
26
+ exports.NEEDLE_HEIGHTS = NEEDLE_HEIGHTS;
27
+ var PINHEAD_SIZES_SHAPES = Object.freeze({
28
+ xSmallCircle: 'x-small-circle',
29
+ xSmallSquare: 'x-small-square',
30
+ small: 'small',
31
+ medium: 'medium',
32
+ large: 'large'
33
+ });
34
+ exports.PINHEAD_SIZES_SHAPES = PINHEAD_SIZES_SHAPES;
35
+ var xSmallPinheadDimension = {
36
+ height: 16,
37
+ icon: 4
38
+ };
39
+ exports.xSmallPinheadDimension = xSmallPinheadDimension;
40
+ var PINHEAD_DIMENSIONS = Object.freeze((_Object$freeze2 = {}, _defineProperty(_Object$freeze2, PINHEAD_SIZES_SHAPES.xSmallSquare, xSmallPinheadDimension), _defineProperty(_Object$freeze2, PINHEAD_SIZES_SHAPES.xSmallCircle, xSmallPinheadDimension), _defineProperty(_Object$freeze2, PINHEAD_SIZES_SHAPES.small, {
41
+ height: 24,
42
+ icon: 16
43
+ }), _defineProperty(_Object$freeze2, PINHEAD_SIZES_SHAPES.medium, {
44
+ height: 36,
45
+ icon: 16
46
+ }), _defineProperty(_Object$freeze2, PINHEAD_SIZES_SHAPES.large, {
47
+ height: 48,
48
+ icon: 24
49
+ }), _Object$freeze2));
50
+ exports.PINHEAD_DIMENSIONS = PINHEAD_DIMENSIONS;
51
+ var PINHEAD_TYPES = Object.freeze({
52
+ floating: 'floating',
53
+ fixed: 'fixed'
54
+ });
55
+ exports.PINHEAD_TYPES = PINHEAD_TYPES;
56
+ var FLOATING_MARKER_SIZES = Object.freeze({
57
+ small: 'small',
58
+ medium: 'medium',
59
+ large: 'large'
60
+ });
61
+ exports.FLOATING_MARKER_SIZES = FLOATING_MARKER_SIZES;
62
+ var FLOATING_MARKER_ANCHOR_POSITIONS = Object.freeze({
63
+ none: 'none',
64
+ topLeft: 'top-left',
65
+ topRight: 'top-right',
66
+ bottomRight: 'bottom-right',
67
+ bottomLeft: 'bottom-left'
68
+ });
69
+ exports.FLOATING_MARKER_ANCHOR_POSITIONS = FLOATING_MARKER_ANCHOR_POSITIONS;
70
+ var FLOATING_MARKER_ANCHOR_TYPES = Object.freeze({
71
+ circle: 'circle',
72
+ square: 'square'
73
+ });
74
+ exports.FLOATING_MARKER_ANCHOR_TYPES = FLOATING_MARKER_ANCHOR_TYPES;
75
+ var dragShadowHeight = 4;
76
+ exports.dragShadowHeight = dragShadowHeight;
77
+ var dragShadowMarginTop = 6;
78
+ exports.dragShadowMarginTop = dragShadowMarginTop;
79
+ var dragShadowWidth = 6;
80
+ exports.dragShadowWidth = dragShadowWidth;
81
+ var anchorSize = 16;
82
+ exports.anchorSize = anchorSize;
@@ -0,0 +1,74 @@
1
+ /*
2
+ Copyright (c) Uber Technologies, Inc.
3
+
4
+ This source code is licensed under the MIT license found in the
5
+ LICENSE file in the root directory of this source tree.
6
+ */
7
+ // @flow
8
+
9
+ export const NEEDLE_SIZES = Object.freeze({
10
+ none: 'none',
11
+ short: 'short',
12
+ medium: 'medium',
13
+ tall: 'tall',
14
+ });
15
+
16
+ export const NEEDLE_HEIGHTS = Object.freeze({
17
+ [NEEDLE_SIZES.none]: 0,
18
+ [NEEDLE_SIZES.short]: 4,
19
+ [NEEDLE_SIZES.medium]: 12,
20
+ [NEEDLE_SIZES.tall]: 20,
21
+ });
22
+
23
+ export const PINHEAD_SIZES_SHAPES = Object.freeze({
24
+ xSmallCircle: 'x-small-circle',
25
+ xSmallSquare: 'x-small-square',
26
+ small: 'small',
27
+ medium: 'medium',
28
+ large: 'large',
29
+ });
30
+
31
+ export const xSmallPinheadDimension = {
32
+ height: 16,
33
+ icon: 4,
34
+ };
35
+ export const PINHEAD_DIMENSIONS = Object.freeze({
36
+ [PINHEAD_SIZES_SHAPES.xSmallSquare]: xSmallPinheadDimension,
37
+ [PINHEAD_SIZES_SHAPES.xSmallCircle]: xSmallPinheadDimension,
38
+ [PINHEAD_SIZES_SHAPES.small]: {height: 24, icon: 16},
39
+ [PINHEAD_SIZES_SHAPES.medium]: {height: 36, icon: 16},
40
+ [PINHEAD_SIZES_SHAPES.large]: {height: 48, icon: 24},
41
+ });
42
+
43
+ export const PINHEAD_TYPES = Object.freeze({
44
+ floating: 'floating',
45
+ fixed: 'fixed',
46
+ });
47
+
48
+ export const FLOATING_MARKER_SIZES = Object.freeze({
49
+ small: 'small',
50
+ medium: 'medium',
51
+ large: 'large',
52
+ });
53
+
54
+ export const FLOATING_MARKER_ANCHOR_POSITIONS = Object.freeze({
55
+ none: 'none',
56
+ topLeft: 'top-left',
57
+ topRight: 'top-right',
58
+ bottomRight: 'bottom-right',
59
+ bottomLeft: 'bottom-left',
60
+ });
61
+
62
+ export const FLOATING_MARKER_ANCHOR_TYPES = Object.freeze({
63
+ circle: 'circle',
64
+ square: 'square',
65
+ });
66
+
67
+ export const dragShadowHeight = 4;
68
+ export const dragShadowMarginTop = 6;
69
+ export const dragShadowWidth = 6;
70
+ export const anchorSize = 16;
71
+
72
+ declare var __DEV__: boolean;
73
+ declare var __NODE__: boolean;
74
+ declare var __BROWSER__: boolean;
@@ -0,0 +1,152 @@
1
+ "use strict";
2
+
3
+ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = void 0;
9
+
10
+ var React = _interopRequireWildcard(require("react"));
11
+
12
+ var _index = require("../styles/index.js");
13
+
14
+ var _overrides = require("../helpers/overrides.js");
15
+
16
+ var _constants = require("./constants.js");
17
+
18
+ var _pinHead = _interopRequireDefault(require("./pin-head.js"));
19
+
20
+ var _styledComponents = require("./styled-components.js");
21
+
22
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23
+
24
+ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
25
+
26
+ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
27
+
28
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
29
+
30
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
31
+
32
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
33
+
34
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
35
+
36
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
37
+
38
+ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
39
+
40
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
41
+
42
+ var Needle = function Needle(_ref) {
43
+ var size = _ref.size,
44
+ background = _ref.background,
45
+ _ref$overrides = _ref.overrides,
46
+ overrides = _ref$overrides === void 0 ? {} : _ref$overrides;
47
+
48
+ var _getOverrides = (0, _overrides.getOverrides)(overrides.Needle, _styledComponents.Needle),
49
+ _getOverrides2 = _slicedToArray(_getOverrides, 2),
50
+ Needle = _getOverrides2[0],
51
+ needleProps = _getOverrides2[1];
52
+
53
+ return /*#__PURE__*/React.createElement(Needle, _extends({
54
+ $background: background,
55
+ $height: _constants.NEEDLE_HEIGHTS[size]
56
+ }, needleProps));
57
+ };
58
+
59
+ var DragShadow = function DragShadow(_ref2) {
60
+ var background = _ref2.background,
61
+ dragging = _ref2.dragging,
62
+ height = _ref2.height,
63
+ _ref2$overrides = _ref2.overrides,
64
+ overrides = _ref2$overrides === void 0 ? {} : _ref2$overrides;
65
+
66
+ var _getOverrides3 = (0, _overrides.getOverrides)(overrides.DragShadowContainer, _styledComponents.DragShadowContainer),
67
+ _getOverrides4 = _slicedToArray(_getOverrides3, 2),
68
+ DragShadowContainer = _getOverrides4[0],
69
+ dragShadowContainerProps = _getOverrides4[1];
70
+
71
+ var _getOverrides5 = (0, _overrides.getOverrides)(overrides.DragShadow, _styledComponents.DragShadow),
72
+ _getOverrides6 = _slicedToArray(_getOverrides5, 2),
73
+ DragShadow = _getOverrides6[0],
74
+ dragShadowProps = _getOverrides6[1];
75
+
76
+ return /*#__PURE__*/React.createElement(DragShadowContainer, _extends({
77
+ $width: _constants.dragShadowWidth,
78
+ $height: height,
79
+ $dragging: dragging
80
+ }, dragShadowContainerProps), /*#__PURE__*/React.createElement(DragShadow, _extends({
81
+ $width: _constants.dragShadowWidth,
82
+ $background: background
83
+ }, dragShadowProps)));
84
+ };
85
+
86
+ var FixedMarker = function FixedMarker(_ref3) {
87
+ var _ref3$size = _ref3.size,
88
+ size = _ref3$size === void 0 ? _constants.PINHEAD_SIZES_SHAPES.medium : _ref3$size,
89
+ _ref3$needle = _ref3.needle,
90
+ needle = _ref3$needle === void 0 ? _constants.NEEDLE_SIZES.medium : _ref3$needle,
91
+ label = _ref3.label,
92
+ startEnhancer = _ref3.startEnhancer,
93
+ endEnhancer = _ref3.endEnhancer,
94
+ color = _ref3.color,
95
+ background = _ref3.background,
96
+ _ref3$dragging = _ref3.dragging,
97
+ dragging = _ref3$dragging === void 0 ? false : _ref3$dragging,
98
+ _ref3$overrides = _ref3.overrides,
99
+ overrides = _ref3$overrides === void 0 ? {} : _ref3$overrides;
100
+
101
+ var _useStyletron = (0, _index.useStyletron)(),
102
+ _useStyletron2 = _slicedToArray(_useStyletron, 2),
103
+ theme = _useStyletron2[1];
104
+
105
+ var _theme$colors = theme.colors,
106
+ backgroundInversePrimary = _theme$colors.backgroundInversePrimary,
107
+ primaryB = _theme$colors.primaryB;
108
+ color = color || primaryB;
109
+ background = background || backgroundInversePrimary;
110
+ var doesPinHeadTransformOnDrag = needle !== _constants.NEEDLE_SIZES.none;
111
+
112
+ var _getOverrides7 = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.FixedMarkerRoot),
113
+ _getOverrides8 = _slicedToArray(_getOverrides7, 2),
114
+ Root = _getOverrides8[0],
115
+ rootProps = _getOverrides8[1];
116
+
117
+ var _getOverrides9 = (0, _overrides.getOverrides)(overrides.DragContainer, _styledComponents.FixedMarkerDragContainer),
118
+ _getOverrides10 = _slicedToArray(_getOverrides9, 2),
119
+ FixedMarkerDragContainer = _getOverrides10[0],
120
+ fixedMarkerDragContainerProps = _getOverrides10[1];
121
+
122
+ return /*#__PURE__*/React.createElement(Root, _extends({
123
+ "data-baseweb": "fixed-map-marker"
124
+ }, rootProps), /*#__PURE__*/React.createElement(FixedMarkerDragContainer, _extends({
125
+ $translateAmount: _constants.dragShadowMarginTop + _constants.dragShadowHeight,
126
+ $performTranslate: doesPinHeadTransformOnDrag && dragging
127
+ }, fixedMarkerDragContainerProps), /*#__PURE__*/React.createElement(_pinHead.default, _extends({
128
+ size: size,
129
+ label: label
130
+ }, startEnhancer ? {
131
+ startEnhancer: startEnhancer
132
+ } : {}, endEnhancer ? {
133
+ endEnhancer: endEnhancer
134
+ } : {}, {
135
+ color: color,
136
+ background: background,
137
+ type: _constants.PINHEAD_TYPES.fixed,
138
+ overrides: overrides
139
+ })), /*#__PURE__*/React.createElement(Needle, {
140
+ size: needle,
141
+ background: background,
142
+ overrides: overrides
143
+ })), doesPinHeadTransformOnDrag && /*#__PURE__*/React.createElement(DragShadow, {
144
+ background: background,
145
+ dragging: dragging,
146
+ height: _constants.dragShadowMarginTop + _constants.dragShadowHeight,
147
+ overrides: overrides
148
+ }));
149
+ };
150
+
151
+ var _default = FixedMarker;
152
+ exports.default = _default;